/* ==========================================================================
   css/mz-paket.css — paket karsilastirma tablolari (damga 181).
   Sayfalar: sayfa/paket-satin-al.php (bireysel), kurumsal-paket-satin-al.php,
   magaza-paket-satin-al.php. KAPSAM: yalnizca table.mz-paket-tablo.

   Sahip (27 Eylul, telefonda kurumsal paket sayfasi): "باقي المميزات
   تختفي على يمين الصفحه فالمستخدم لا يعلم ولا يرى باقي الصفحه".
   OLCULDU: 390px'te tablo 7 sutun; ilk ucu gorunuyor (paket, ilan
   limiti, foto limiti), danisman limiti / aninda onay / ilan basi ucret
   / UCRET ekranin disinda, yatay kaydirma kabinda - ve kaydirilabilecegini
   gosteren hicbir sey yok. Fiyati gormeden paket secilmiyor.

   COZUM, telefonda (<=767px): her paket bir KART.
     - baslik satiri: paket adi (sol/bas) ve FIYAT (sag/son), iri;
     - altinda butun ozellikler "etiket ..... deger" satirlari
       (etiket data-mz-etiket'ten; basliklarla ayni ceviriler);
     - "Bu paketi sec": ustteki siparis formunda paketi secer, ozet
       kartini yukler ve forma kaydirir (js/mz-uye-deneyim.js 4);
     - secili paketin karti marka rengiyle cerceveli.
   Masaustunde tablo aynen kalir; yalnizca sona "sec" sutunu eklenir ve
   secili satir vurgulanir.
   ========================================================================== */
/* Tutar + para birimi her dilde soldan saga ("50 TL", RTL'de "TL 50"
   degil) - temanin kurali: sayilar her dilde soldan saga (mz-ilan-v2.css). */
table.mz-paket-tablo .mz-tutar {display: inline-block; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums;}
table.mz-paket-tablo .mz-paket-sec {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 36px;
	padding: 0 14px;
	border: 1px solid var(--mz-brand, #3f475f);
	border-radius: 999px;
	background: #ffffff;
	color: var(--mz-brand, #3f475f);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}
table.mz-paket-tablo .mz-paket-sec:hover,
table.mz-paket-tablo .mz-paket-sec[aria-pressed="true"] {background: var(--mz-brand, #3f475f); color: var(--mz-brand-yazi, #ffffff);}
table.mz-paket-tablo .mz-paket-sec:focus-visible {outline: 2px solid var(--mz-brand, #3f475f); outline-offset: 2px;}
table.mz-paket-tablo > tbody > tr.mz-secili > th,
table.mz-paket-tablo > tbody > tr.mz-secili > td {background: var(--mz-brand-acik, #eef1f6);}

@media (max-width: 767px) {
	/* Kaydirma kabi artik gereksiz: kartlar ekran genisliginde. */
	.table-responsive:has(> table.mz-paket-tablo) {overflow: visible; border: 0;}
	table.mz-paket-tablo,
	table.mz-paket-tablo > tbody {display: block !important; inline-size: 100% !important; max-inline-size: 100%;}
	/* !important ZORUNLU (183): js/main.js ".ortala"yi gizleyip jQuery
	   .show() ile geri aciyor - thead'e SATIR ICI "display:
	   table-header-group" yaziyor ve satir ici stil normal kurali yener.
	   Canlida baslik satiri geri geldi ve sayfayi yana tasirdi (sahibin
	   ekran goruntusu). Test ayni satir ici stili kuruyor. */
	table.mz-paket-tablo > thead {display: none !important;}
	table.mz-paket-tablo > tbody > tr.mz-paket-satir {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 12px;
		margin: 0 0 12px;
		padding: 14px 16px 16px;
		border: 1px solid var(--mz-cizgi, #e4e7eb);
		border-radius: 14px;
		background: #ffffff;
		text-align: start;
		box-shadow: 0 1px 2px rgba(31,41,51,.05);
	}
	table.mz-paket-tablo > tbody > tr.mz-paket-satir:hover {background: #ffffff;}
	table.mz-paket-tablo > tbody > tr.mz-paket-satir.mz-secili {border-color: var(--mz-brand, #3f475f); box-shadow: 0 0 0 1px var(--mz-brand, #3f475f);}
	table.mz-paket-tablo > tbody > tr.mz-paket-satir > th,
	table.mz-paket-tablo > tbody > tr.mz-paket-satir > td {
		display: block;
		/* style.css ".panel.limon.tablo" basliklara !important ust cizgi
		   veriyor; kartin icinde cizgi yalnizca ozellik satirlari arasinda. */
		border: 0 !important;
		background: transparent !important;
		padding: 0;
		text-align: start;
		white-space: normal;
	}
	/* Baslik satiri: ad + fiyat */
	table.mz-paket-tablo > tbody > tr > th.mz-paket-ad {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		font-size: 18px;
		font-weight: 800;
		color: var(--mz-ink, #1f2933);
		padding-block-end: 10px;
	}
	table.mz-paket-tablo > tbody > tr > td.mz-paket-fiyat {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		font-size: 18px;
		font-weight: 800;
		color: var(--mz-brand, #3f475f);
		justify-self: end;
		padding-block-end: 10px;
		font-variant-numeric: tabular-nums;
		/* "50 TL" RTL sayfada "TL 50" okunmasin: tutar+birim kendi yonunde. */
		direction: ltr;
		unicode-bidi: isolate;
	}
	table.mz-paket-tablo > tbody > tr > td.mz-paket-fiyat::before {content: none;}
	/* Ozellik satirlari: etiket ..... deger */
	table.mz-paket-tablo > tbody > tr > td[data-mz-etiket]:not(.mz-paket-fiyat):not(.mz-paket-sec-hucre) {
		grid-column: 1 / -1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		padding-block: 9px;
		border-block-start: 1px solid var(--mz-cizgi, #e4e7eb) !important;
		font-size: 15px;
		font-weight: 600;
		color: var(--mz-ink, #1f2933);
		font-variant-numeric: tabular-nums;
	}
	table.mz-paket-tablo > tbody > tr > td[data-mz-etiket]:not(.mz-paket-fiyat):not(.mz-paket-sec-hucre)::before {
		content: attr(data-mz-etiket);
		font-weight: 400;
		color: var(--mz-muted, #6b7683);
	}
	table.mz-paket-tablo > tbody > tr > td.mz-paket-sec-hucre {grid-column: 1 / -1; padding-block-start: 12px;}
	table.mz-paket-tablo > tbody > tr > td.mz-paket-sec-hucre:empty {display: none;}
	table.mz-paket-tablo .mz-paket-sec {inline-size: 100%; min-block-size: 46px; font-size: 15px; border-radius: 12px;}
}

/* ---------- 181b: sahibin kararlari (27 Eylul) ----------
   1. Telefonda sayfanin basinda "Size uygun paketleri inceleyin" + asagi
      ok: paket kartlarina kaydirir (form ve ozet ustte, kartlar altta
      kaliyor; ziyaretci kartlarin varligini bilmiyordu).
   2. Koyu ozet karti (#ajax_load, .mz-paket-ozet) telefonda gizli:
      kartlar ayni bilgiyi zaten veriyor, secili kart cerceveli.
      Masaustunde yerinde. */
.mz-paket-git {display: none;}
@media (max-width: 767px) {
	.mz-paket-git {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-block-size: 54px;
		margin: 0 0 14px;
		padding: 12px 16px;
		border-radius: 14px;
		background: var(--mz-brand, #3f475f);
		color: var(--mz-brand-yazi, #ffffff);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
		text-decoration: none;
		box-shadow: 0 2px 8px rgba(31,41,51,.14);
	}
	.mz-paket-git:hover,
	.mz-paket-git:focus {color: var(--mz-brand-yazi, #ffffff); text-decoration: none;}
	.mz-paket-git:focus-visible {outline: 2px solid var(--mz-brand, #3f475f); outline-offset: 3px;}
	.mz-paket-git svg {
		flex: none;
		inline-size: 30px;
		block-size: 30px;
		padding: 4px;
		border-radius: 50%;
		background: rgba(255,255,255,.18);
		fill: none;
		stroke: currentColor;
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.mz-paket-ozet {display: none !important;}
	#mz-paketler {scroll-margin-block-start: 96px;}
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	.mz-paket-git svg {animation: mz-paket-ok 1.6s ease-in-out 3;}
}
@keyframes mz-paket-ok {0%, 100% {transform: translateY(0);} 50% {transform: translateY(4px);}}