/*!
 * Elaf Turizm — BİLEŞENLER
 * Buton, rozet, fiyat, kart, form, akordiyon, çip.
 * Bağımlılık: base.css
 *
 * DOKUNMATİK KURALI (bu dosyada tekrar tekrar geçiyor):
 *   Hover etkileri KOŞULSUZ yazılır, sonra dokunmatikte iptal edilir:
 *     @media (hover: none), (max-width: 767px) { ...:hover { transform: none } }
 *   Neden `@media (hover: hover)` ile SARMALAMIYORUZ: algılamanın başarısız
 *   olduğu ortamlarda (headless tarayıcılar, bazı hibrit cihazlar) efekt
 *   sessizce kayboluyor. Bu yazımda en kötü ihtimalle masaüstünde 3px'lik
 *   bir süs kaybedilir — işlevsel hata olmaz.
 *   İptalin kendisi şart: parmak karta ilk dokunduğunda tarayıcı `:hover`
 *   uyguluyor, kart 3px kayıyor, parmağın altındaki öge değişiyor ve ilk
 *   dokunuş boşa gidiyor.
 *
 * BÖLÜMLER
 *   1. İkon
 *   2. Buton
 *   3. Rozet
 *   4. Fiyat
 *   5. Tur kartı
 *   6. Kategori kartı
 *   7. Özellik / madde kartı
 *   8. Form
 *   9. Akordiyon (SSS)
 *  10. Çip ve etiket
 *  11. Kaydırmalı şerit
 *  12. Yer tutucu ve iskelet
 *  13. Izgaralar
 *  14. Yazı kartı, boş hâl, sayfalama, tur detayı
 */

/* ==== 1. İKON ========================================================== */

.e-ikon {
	width: 1.25em; height: 1.25em;
	flex: 0 0 auto;
	vertical-align: -.24em;
}
.e-ikon--sm { width: 1em; height: 1em; }
.e-ikon--lg { width: 1.6em; height: 1.6em; }

/* ==== 2. BUTON ========================================================= */

.e-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-s-2);
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--e-r-sm);
	font-family: var(--e-font-govde);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--e-dur-color) var(--e-ease),
		border-color var(--e-dur-color) var(--e-ease),
		color var(--e-dur-color) var(--e-ease),
		transform var(--e-dur-move) var(--e-ease),
		box-shadow var(--e-dur-move) var(--e-ease);
}
.e-btn:focus-visible { outline: 2px solid var(--e-blue-600); outline-offset: 2px; box-shadow: 0 0 0 4px var(--e-focus); }
.e-btn:disabled, .e-btn[aria-disabled="true"] {
	background: var(--e-neutral-100);
	border-color: var(--e-neutral-200);
	color: #7A8798;
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
	pointer-events: none;
}

.e-btn--lg { min-height: 54px; padding: 0 30px; font-size: 17px; }
.e-btn--sm { min-height: 38px; padding: 0 16px; font-size: var(--e-t-kucuk); }
.e-btn--blok { display: flex; width: 100%; }

/* Birincil — dolgu marka mavisi, beyaz metin 4.88:1 ✓
   Sayfada TEK birincil buton olur; ikisi birbirinin önemini yiyor.         */
.e-btn--ana {
	background: var(--e-blue-600);
	border-color: var(--e-blue-600);
	color: #fff;
	box-shadow: var(--e-shadow-brand);
}
.e-btn--ana:hover { background: var(--e-blue-700); border-color: var(--e-blue-700); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,117,189,.34); }
.e-btn--ana:active { background: var(--e-blue-800); border-color: var(--e-blue-800); transform: translateY(0); box-shadow: var(--e-shadow-xs); }

/* İkincil — açık mavi zemin, koyu mavi metin 6.62:1 ✓ */
.e-btn--ikincil { background: var(--e-blue-50); border-color: var(--e-blue-200); color: var(--e-blue-700); }
.e-btn--ikincil:hover { background: var(--e-blue-100); border-color: var(--e-blue-300); color: var(--e-blue-800); }
.e-btn--ikincil:active { background: var(--e-blue-200); }

/* Nötr / outline */
.e-btn--hayalet { background: transparent; border-color: var(--e-line-strong); color: var(--e-neutral-800); }
.e-btn--hayalet:hover { background: var(--e-bg); border-color: var(--e-line-input); color: var(--e-neutral-900); }

/* Koyu zeminde outline */
.e-btn--beyaz { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.e-btn--beyaz:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.e-btn--dolgubeyaz { background: #fff; border-color: #fff; color: var(--e-blue-700); }
.e-btn--dolgubeyaz:hover { background: var(--e-blue-50); color: var(--e-blue-800); }

/* Aciliyet — LOGO KIRMIZISI DEĞİL.
   #ED1B24 beyaz metinle 4.39 veriyor, AA'nın altında. Bu ton 5.63.         */
.e-btn--aciliyet { background: var(--e-red-600); border-color: var(--e-red-600); color: #fff; }
.e-btn--aciliyet:hover { background: var(--e-red-700); border-color: var(--e-red-700); color: #fff; }
.e-btn--aciliyet:active { background: var(--e-red-800); }

/* WhatsApp — marka yeşili #25D366 beyazda 1.98, dolgu olarak kullanılamaz. */
.e-btn--wa { background: var(--e-whatsapp); border-color: var(--e-whatsapp); color: #fff; }
.e-btn--wa:hover { background: var(--e-whatsapp-600); border-color: var(--e-whatsapp-600); color: #fff; }

/* Pill CTA — hero ve kapanış */
.e-btn--pill { border-radius: var(--e-r-pill); background: var(--e-grad-brand); border-color: transparent; color: #fff; box-shadow: var(--e-shadow-brand), var(--e-shadow-inset); }
.e-btn--pill:hover { background: var(--e-grad-hover); color: #fff; transform: translateY(-1px); }

/* Yalnız ikon taşıyan buton — kare ve `aria-label` zorunlu. */
.e-btn--ikon { min-width: 46px; padding: 0; }

/* Metin bağlantısı CTA */
.e-link {
	display: inline-flex; align-items: center; gap: var(--e-s-2);
	font-weight: 600; color: var(--e-blue-700); text-decoration: none;
	transition: gap var(--e-dur-color) var(--e-ease), color var(--e-dur-color) var(--e-ease);
}
.e-link:hover { gap: 12px; color: var(--e-blue-800); }

@media (hover: none), (max-width: 767px) {
	.e-btn:hover { transform: none !important; }
	.e-link:hover { gap: var(--e-s-2) !important; }
}
@media (max-width: 767px) {
	/* Dokunma hedefi en az 44px (WCAG 2.5.8 + Apple HIG). */
	.e-btn { min-height: 48px; }
	.e-btn--sm { min-height: 44px; }
	.e-btn--ikon { min-width: 48px; }
}

/* ==== 3. ROZET ========================================================= */

.e-rozet {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 6px 11px;
	border: 1px solid transparent;
	border-radius: var(--e-r-xs);
	font-family: var(--e-font-govde);
	font-size: 12px; font-weight: 700; line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* Türkçe kelimeler uzun; rozet iki satıra sarınca kart düzeni bozuluyor. */
	white-space: nowrap;
}
/* NOT: `text-transform: uppercase` DİLE DUYARLIDIR. <html lang="tr"> olmadan
   "iptal" -> "IPTAL" olur; doğrusu "İPTAL". header.php'de lang yazılı.      */

.e-rozet--one   { background: rgba(255,255,255,.94); color: var(--e-blue-700); border-color: var(--e-blue-200); }
.e-rozet--kampanya { background: var(--e-blue-50); color: var(--e-blue-700); border-color: var(--e-blue-300); }
.e-rozet--indirim  { background: var(--e-red-600); color: #fff; }            /* 5.63 ✓ */
.e-rozet--aciliyet { background: var(--e-red-50); color: var(--e-red-700); border-color: var(--e-red-200); } /* 6.74 ✓ */
.e-rozet--ok    { background: var(--e-success-tint); color: var(--e-success); border-color: rgba(14,122,82,.28); }
.e-rozet--dolu  { background: var(--e-neutral-100); color: var(--e-neutral-600); border-color: var(--e-neutral-300); }
.e-rozet--havayolu { background: rgba(17,44,74,.82); color: #fff; border-color: transparent; }

/* Aciliyet rozeti YANIP SÖNMEZ. Yanıp sönme WCAG 2.3.1 sınırında ve
   seksen bin liralık bir kararda panik pazarlaması güveni kırıyor.          */
.e-rozet { animation: none !important; }

/* ==== 4. FİYAT ========================================================= */

.e-fiyat { display: flex; flex-direction: column; gap: 2px; }

/* Eski fiyat ÜSTTE küçük ve çizili, güncel ALTTA büyük: göz yukarıdan aşağı
   okurken önce referansı sonra kazancı görüyor.                            */
.e-fiyat__eski {
	font-size: 16px; font-weight: 500;
	color: var(--e-neutral-500);
	text-decoration: line-through;
	/* Çizginin rengi logo kırmızısı — metin DEĞİL, sadece çizgi; bu yüzden
	   4.39 kontrast sorunu doğmuyor.                                        */
	text-decoration-color: var(--e-red-500);
	text-decoration-thickness: 1.5px;
}
.e-fiyat__simdi { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* Güncel fiyat LACİVERT, kırmızı değil. Kırmızı fiyat "tasfiye/ucuzluk"
   kodlar; seksen bin liralık bir hac paketinde yanlış sinyal.               */
.e-fiyat__tutar { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--e-blue-900); line-height: 1.1; }
.e-fiyat__birim { font-size: var(--e-t-mikro); font-weight: 500; color: var(--e-neutral-500); }
@media (max-width: 767px) { .e-fiyat__tutar { font-size: 26px; } }

/* ==== 5. TUR KARTI ===================================================== */

.e-tur {
	/* `position: relative` ŞART: içerideki `position: absolute` rozetler
	   referans çerçevesini buradan alır. Yoksa referans bir üstteki ızgara
	   hücresi olur ve rozetler kartın dışına taşar.                         */
	position: relative;
	display: flex; flex-direction: column; height: 100%;
	background: var(--e-surface);
	border: 1px solid var(--e-line);
	border-radius: var(--e-r-md);
	box-shadow: var(--e-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--e-dur-move) var(--e-ease), transform var(--e-dur-move) var(--e-ease), border-color var(--e-dur-color) var(--e-ease);
}
.e-tur:hover { transform: translateY(-3px); box-shadow: var(--e-shadow-lg); border-color: var(--e-line-strong); }

.e-tur__medya { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--e-blue-50); }
.e-tur__medya img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--e-dur-zoom) var(--e-ease); }
.e-tur:hover .e-tur__medya img { transform: scale(1.04); }

/* MARKA İMZASI — görselin alt kenarına oturan 63/37 çift renkli çizgi. */
.e-tur__medya::after {
	content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
	background: var(--e-grad-rule);
}

.e-tur__rozetler { position: absolute; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: var(--e-s-2); pointer-events: none; z-index: 2; }
.e-tur__rozetler > * { pointer-events: auto; }
.e-tur__rozetler-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.e-tur__govde { display: flex; flex-direction: column; gap: var(--e-s-3); padding: var(--e-s-5); flex: 1; }

.e-tur__meta { display: flex; align-items: center; gap: var(--e-s-2); flex-wrap: wrap; font-size: var(--e-t-kucuk); color: var(--e-neutral-500); }
.e-tur__meta .e-ikon { color: var(--e-blue-600); }

.e-tur__baslik {
	margin: 0; font-size: var(--e-t-h4); font-weight: 600; line-height: 1.4;
	color: var(--e-neutral-800);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	/* CLS kilidi: bir ve iki satırlık başlıklar AYNI yeri kaplasın, yoksa
	   ızgara satır satır zıplıyor.                                          */
	min-height: calc(var(--e-t-h4) * 1.4 * 2);
}
.e-tur__baslik a { color: inherit; text-decoration: none; }
/* Kartın tamamı tıklanabilir — ama DOM'da tek bağlantı var (iç içe bağlantı
   geçersiz HTML ve ekran okuyucuda iki kez duyuruluyor).                    */
.e-tur__baslik a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.e-tur__oteller { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: var(--e-s-3) 0; border-block: 1px solid var(--e-line); }
.e-tur__otel { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--e-s-2); align-items: baseline; font-size: var(--e-t-kucuk); line-height: 1.5; }
.e-tur__otel .e-ikon { color: var(--e-neutral-400); align-self: center; }
.e-tur__sehir { font-weight: 600; color: var(--e-neutral-800); }
.e-tur__otel-ad { color: var(--e-neutral-500); }
/* Mesafe AYRI bir çipte: umrede satın alma kararının en belirleyici tek
   verisi Harem'e yürüme mesafesi; düz metin içinde kayboluyor.             */
.e-tur__mesafe {
	font-size: 13px; font-weight: 700;
	color: var(--e-blue-700); background: var(--e-blue-50);
	border-radius: var(--e-r-xs); padding: 2px 7px;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}

.e-tur__alt { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-s-3); margin-top: auto; padding-top: var(--e-s-2); }
.e-tur__eylem { display: flex; gap: var(--e-s-2); position: relative; z-index: 2; }

@media (hover: none), (max-width: 767px) {
	.e-tur:hover { transform: none !important; }
	.e-tur:hover .e-tur__medya img { transform: none !important; }
}

/* ==== 6. KATEGORİ KARTI ================================================ */

.e-kat {
	position: relative; display: block; overflow: hidden; isolation: isolate;
	min-height: 420px;
	border-radius: var(--e-r-xl);
	background: var(--e-blue-900);
	color: #fff; text-decoration: none;
	transition: transform var(--e-dur-move) var(--e-ease), box-shadow var(--e-dur-move) var(--e-ease);
}
.e-kat:hover { transform: translateY(-4px); box-shadow: var(--e-shadow-xl); color: #fff; }
.e-kat__medya { position: absolute; inset: 0; }
.e-kat__medya img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--e-ease); }
.e-kat:hover .e-kat__medya img { transform: scale(1.06); }
/* Perde — alt uç .78 alfa; parlak fotoğrafta bile beyaz başlık 8.7:1. */
.e-kat::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--e-grad-veil); }

/* MARKA İMZASI — kubbe/mihrap kemeri. Saf border-radius, ek dosya yok. */
.e-kat__kemer {
	position: absolute; left: 50%; top: 34px; transform: translateX(-50%);
	z-index: 2;
	display: grid; place-items: center;
	width: 132px; height: 150px;
	border-radius: var(--e-r-dome);
	border: 1.5px solid rgba(255,255,255,.34);
	background: rgba(15,117,189,.18);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.e-kat__kemer .e-ikon { width: 52px; height: 52px; color: #fff; }

.e-kat__govde { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: var(--e-s-6); margin-top: auto; height: 100%; justify-content: flex-end; }
.e-kat__baslik { margin: 0; font-size: var(--e-t-h3); color: #fff; }
.e-kat__alt { margin: 0; color: rgba(255,255,255,.88); font-size: var(--e-t-kucuk); max-width: 34ch; }
.e-kat__sayac { margin-top: var(--e-s-2); display: inline-flex; align-items: center; gap: var(--e-s-2); font-weight: 600; font-size: var(--e-t-kucuk); color: var(--e-blue-300); }

@media (max-width: 991px) { .e-kat { min-height: 340px; } .e-kat__kemer { width: 104px; height: 118px; top: 26px; } .e-kat__kemer .e-ikon { width: 40px; height: 40px; } }
@media (max-width: 767px) {
	/* Mobilde üç kart dikey 3x420 = 1260px ekran yiyor. Kemer sola alınıp
	   metin sağa geçiyor, kart 240px'e iniyor.                              */
	.e-kat { min-height: 200px; display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: var(--e-s-4); padding: var(--e-s-4); }
	.e-kat__kemer { position: static; transform: none; width: 100px; height: 114px; }
	.e-kat__govde { padding: 0; height: auto; justify-content: center; }
	.e-kat__baslik { font-size: var(--e-t-h4); }
	/* Metin artık dikey ORTADA; alta yaslı degradenin orta noktası perde
	   olarak yetmiyor (bkz. --e-veil-flat). Düz perdeye geçiliyor. */
	.e-kat::before { background: var(--e-veil-flat); }
}
@media (hover: none), (max-width: 767px) {
	.e-kat:hover { transform: none !important; }
	.e-kat:hover .e-kat__medya img { transform: none !important; }
}

/* ==== 7. ÖZELLİK / MADDE KARTI ========================================= */

.e-ozellik { display: flex; gap: var(--e-s-4); align-items: flex-start; }
.e-ozellik__ikon {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 52px; height: 58px;
	border-radius: var(--e-r-dome);              /* kubbe imzası */
	background: var(--e-blue-50);
	border: 1px solid var(--e-blue-200);
	color: var(--e-blue-700);
}
.e-ozellik__ikon .e-ikon { width: 24px; height: 24px; }
.e-ozellik__baslik { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--e-neutral-800); }
.e-ozellik__metin { margin: 0; font-size: var(--e-t-kucuk); color: var(--e-neutral-500); }
.e-bolum--koyu .e-ozellik__ikon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.e-bolum--koyu .e-ozellik__baslik { color: #fff; }
.e-bolum--koyu .e-ozellik__metin { color: var(--e-neutral-300); }

/* ==== 8. FORM ========================================================== */

.e-alan { display: flex; flex-direction: column; gap: 7px; }
.e-alan label { font-size: var(--e-t-kucuk); font-weight: 600; color: var(--e-neutral-800); }
.e-alan .req { color: var(--e-red-600); margin-left: 3px; }

.e-input, .e-select, .e-textarea {
	width: 100%;
	min-height: 50px;
	padding: 13px 15px;
	font-size: var(--e-t-govde);
	line-height: 1.4;
	color: var(--e-neutral-800);
	background: var(--e-surface);
	/* WCAG 1.4.11: metin-dışı ögeler 3:1 ister. --e-line (1.27) yetmiyor. */
	border: 1px solid var(--e-line-input);
	border-radius: var(--e-r-sm);
	transition: border-color var(--e-dur-color) var(--e-ease), box-shadow var(--e-dur-color) var(--e-ease);
}
.e-textarea { min-height: 120px; resize: vertical; }
.e-input::placeholder, .e-textarea::placeholder { color: var(--e-neutral-500); opacity: 1; }  /* 5.15 ✓ */
.e-input:hover, .e-select:hover, .e-textarea:hover { border-color: var(--e-neutral-600); }
.e-input:focus, .e-select:focus, .e-textarea:focus { outline: none; border-color: var(--e-blue-600); box-shadow: 0 0 0 4px var(--e-focus); }
.e-input[aria-invalid="true"], .e-select[aria-invalid="true"], .e-textarea[aria-invalid="true"] { border-color: var(--e-red-600); background: var(--e-danger-tint); }
.e-input:disabled, .e-select:disabled { background: var(--e-neutral-100); color: #7A8798; border-color: var(--e-neutral-200); }

.e-select {
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%235F6F81' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.4 9.4 5.6 5.6 5.6-5.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px;
}

/* Hata bildirimi renkle sınırlı DEĞİL: ikon + metin birlikte (WCAG 1.4.1). */
.e-alan__hata { display: flex; align-items: center; gap: 6px; font-size: var(--e-t-kucuk); font-weight: 500; color: var(--e-red-600); }

@media (max-width: 767px) {
	/* 16px ALTINDA iOS Safari alana odaklanınca sayfayı otomatik
	   yakınlaştırıyor ve kullanıcı geri çıkamıyor. Pazarlık dışı.           */
	.e-input, .e-select, .e-textarea { font-size: 16px; min-height: 52px; }
}

/* ==== 9. AKORDİYON (SSS) =============================================== */

/* Native <details>/<summary>: klavyeyle erişilebilir, ekran okuyucu durumu
   doğru okur ve JS YÜKLENMEDEN çalışır.                                    */
.e-sss details {
	background: var(--e-surface);
	border: 1px solid var(--e-line);
	border-radius: var(--e-r-md);
	overflow: hidden;
	transition: border-color var(--e-dur-color) var(--e-ease), box-shadow var(--e-dur-color) var(--e-ease);
}
.e-sss details + details { margin-top: var(--e-s-3); }
.e-sss details[open] { border-color: var(--e-blue-200); box-shadow: var(--e-shadow-sm); }

.e-sss summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: var(--e-s-5) 56px var(--e-s-5) var(--e-s-5);
	font-size: 19px; font-weight: 600; line-height: 1.45;
	color: var(--e-neutral-800);
}
.e-sss summary::-webkit-details-marker { display: none; }
.e-sss summary::after {
	content: ''; position: absolute; right: var(--e-s-5); top: 50%;
	width: 11px; height: 11px; margin-top: -8px;
	border-right: 2.5px solid var(--e-blue-600);
	border-bottom: 2.5px solid var(--e-blue-600);
	transform: rotate(45deg);
	transition: transform var(--e-dur-panel) var(--e-ease);
}
.e-sss details[open] summary { color: var(--e-blue-700); }
.e-sss details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.e-sss summary:focus-visible { outline: 2px solid var(--e-blue-600); outline-offset: -3px; }

/* Açılma animasyonu `height` ile DEĞİL, grid satırıyla: `height` kompozitörde
   çalışmıyor ve `auto` yüksekliğe animasyon yapılamıyor.                    */
.e-sss__govde { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--e-dur-panel) var(--e-ease); }
.e-sss details[open] .e-sss__govde { grid-template-rows: 1fr; }
.e-sss__govde > div { overflow: hidden; }
.e-sss__govde p { padding: 0 var(--e-s-5) var(--e-s-5); color: var(--e-neutral-700); max-width: var(--e-read); }

/* ==== 10. ÇİP VE ETİKET =============================================== */

.e-cip {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 40px; padding: 0 16px;
	border: 1px solid var(--e-line-strong);
	border-radius: var(--e-r-pill);
	background: var(--e-surface);
	font-size: var(--e-t-kucuk); font-weight: 600;
	color: var(--e-neutral-700);
	cursor: pointer;
	transition: background-color var(--e-dur-color) var(--e-ease), border-color var(--e-dur-color) var(--e-ease), color var(--e-dur-color) var(--e-ease);
}
.e-cip:hover { border-color: var(--e-blue-400); color: var(--e-blue-700); }
.e-cip[aria-pressed="true"], .e-cip--aktif { background: var(--e-blue-600); border-color: var(--e-blue-600); color: #fff; }
@media (max-width: 767px) { .e-cip { min-height: 44px; } }

/* ==== 11. KAYDIRMALI ŞERİT ============================================ */

.e-serit-kutu { position: relative; }
.e-kaydir {
	display: grid; grid-auto-flow: column; gap: var(--e-s-6);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Kartın gölgesi kırpılmasın diye dikey pay. */
	padding: 4px var(--e-gutter) var(--e-s-4);
	margin-inline: calc(var(--e-gutter) * -1);
}
.e-kaydir::-webkit-scrollbar { display: none; }
.e-kaydir > * { scroll-snap-align: start; }

/* ==== 12. YER TUTUCU VE İSKELET ======================================= */

/* Fotoğrafı olmayan her görsel yuvası bunu alır. Site fotoğraf beklemeden
   yayına girebilsin diye: marka degradesi + lale deseni + amblem filigranı.
   Desenin kendisi signature.css'te.                                        */
.e-ph { position: relative; background: var(--e-grad-brand); overflow: hidden; display: grid; place-items: center; }
.e-ph__yazi { position: relative; z-index: 2; color: #fff; font-family: var(--e-font-baslik); font-size: var(--e-t-h4); font-weight: 700; text-shadow: 0 1px 3px rgba(17,44,74,.5); padding: var(--e-s-4); text-align: center; }

.e-iskelet { background: var(--e-neutral-100); border-radius: var(--e-r-sm); position: relative; overflow: hidden; }
.e-iskelet::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
	animation: e-parla 1.4s infinite;
}
@keyframes e-parla { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .e-iskelet::after { display: none; } }


/* ==== 13. IZGARALAR ==================================================== */

.e-izgara { display: grid; gap: var(--e-s-6); }
.e-izgara--3 { grid-template-columns: repeat(3, 1fr); }
.e-izgara--madde { gap: var(--e-s-7) var(--e-s-8); }
.e-bolum__cift { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-s-6); flex-wrap: wrap; }
.e-bolum__yan { margin-bottom: var(--e-s-9); white-space: nowrap; }

/* `auto-fit` KULLANILMIYOR: son satırda tek kart kalınca onu tüm genişliğe
   geriyor ve ızgara bozuk görünüyor. Sabit kırılımlar daha öngörülebilir. */
@media (max-width: 1199px) { .e-izgara--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .e-izgara--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .e-izgara--3 { grid-template-columns: 1fr; } }

/* Mobilde kart ızgarası yatay snap şeridine dönüşüyor: üç kartı alt alta
   yığmak 1200px ekran yiyor ve kullanıcı listeyi göremeden kaydırıyor.
   Sağda sonraki kartın bir kısmı görünüyor — kaydırılabildiğinin kanıtı. */
@media (max-width: 767px) {
	.e-izgara--kaydir {
		display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 320px);
		grid-template-columns: none;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none;
		padding: 4px var(--e-gutter) var(--e-s-4);
		margin-inline: calc(var(--e-gutter) * -1);
	}
	.e-izgara--kaydir::-webkit-scrollbar { display: none; }
	.e-izgara--kaydir > * { scroll-snap-align: start; }
	.e-bolum__yan { margin-bottom: var(--e-s-5); }
}


/* ==== 14. YAZI KARTI, BOŞ HÂL, SAYFALAMA, TUR DETAYI ================== */

.e-yazi { display: flex; flex-direction: column; background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-md); overflow: hidden; box-shadow: var(--e-shadow-sm); height: 100%; }
.e-yazi__medya img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.e-yazi__govde { padding: var(--e-s-5); display: flex; flex-direction: column; gap: var(--e-s-2); }
.e-yazi__meta { margin: 0; font-size: var(--e-t-mikro); color: var(--e-neutral-500); }
.e-yazi__baslik { margin: 0; font-size: var(--e-t-h4); line-height: 1.35; }
.e-yazi__baslik a { color: var(--e-neutral-800); text-decoration: none; }
.e-yazi__baslik a:hover { color: var(--e-blue-700); }

.e-bos, .e-bos-kutu { text-align: center; color: var(--e-neutral-500); }
.e-bos-kutu { max-width: 560px; margin-inline: auto; padding-block: var(--e-s-8); display: grid; gap: var(--e-s-4); justify-items: center; }
.e-bos-kutu__ikon { display: grid; place-items: center; width: 68px; height: 76px; border-radius: var(--e-r-dome); background: var(--e-blue-50); border: 1px solid var(--e-blue-200); color: var(--e-blue-700); }
.e-bos-kutu__ikon .e-ikon { width: 28px; height: 28px; }
.e-bos-kutu h2 { margin: 0; }
.e-bos-kutu p { margin: 0; }
.e-bos-kutu__kisayol { display: flex; gap: var(--e-s-2); flex-wrap: wrap; justify-content: center; }

.e-ara { display: flex; gap: var(--e-s-2); width: 100%; max-width: 440px; }
.e-ara .e-input { flex: 1; }

.e-sayfalama, .pagination { margin-top: var(--e-s-8); display: flex; justify-content: center; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--e-line); border-radius: var(--e-r-sm); background: var(--e-surface); color: var(--e-neutral-700); font-weight: 600; font-size: var(--e-t-kucuk); text-decoration: none; }
.nav-links .page-numbers:hover { border-color: var(--e-blue-400); color: var(--e-blue-700); }
.nav-links .page-numbers.current { background: var(--e-blue-600); border-color: var(--e-blue-600); color: #fff; }

.e-gezinti { display: flex; justify-content: space-between; gap: var(--e-s-4); margin-top: var(--e-s-8); padding-top: var(--e-s-6); border-top: 1px solid var(--e-line); font-size: var(--e-t-kucuk); }
.e-sayfa__medya { margin: 0 0 var(--e-s-7); }
.e-sayfa__medya img { border-radius: var(--e-r-md); width: 100%; }

/* --- Tur detayı --- */
.e-turbas { position: relative; overflow: hidden; background: var(--e-grad-deep); color: #fff; padding-top: var(--e-s-10); }
.e-turbas__ic { position: relative; z-index: 2; padding-bottom: var(--e-s-10); }
.e-turbas__ust { color: var(--e-blue-300); margin-bottom: var(--e-s-3); }
.e-turbas__baslik { margin: 0; color: #fff; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; max-width: 22ch; }
.e-turbas__rozet { display: flex; gap: var(--e-s-2); flex-wrap: wrap; margin-top: var(--e-s-5); }

.e-tur-duzen { display: grid; grid-template-columns: 1fr var(--e-side); gap: var(--e-s-8); align-items: start; padding-block: var(--e-s-9); }
.e-tur-kapak { margin: 0 0 var(--e-s-6); }
.e-tur-kapak img { width: 100%; border-radius: var(--e-r-md); }

.e-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-s-3); margin-bottom: var(--e-s-7); }
.e-ozet__kutu { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 0 var(--e-s-3); padding: var(--e-s-4); background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-md); }
.e-ozet__ikon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 44px; border-radius: var(--e-r-dome); background: var(--e-blue-50); color: var(--e-blue-700); }
.e-ozet__ikon .e-ikon { width: 20px; height: 20px; }
.e-ozet__etiket { font-size: 13px; color: var(--e-neutral-500); }
.e-ozet__deger { font-size: var(--e-t-kucuk); font-weight: 600; color: var(--e-neutral-800); }

.e-tur-yan { position: sticky; top: 110px; }
.e-yan-kart { background: var(--e-surface); border: 1px solid var(--e-line); border-radius: var(--e-r-lg); box-shadow: var(--e-shadow-md); padding: var(--e-s-5); display: grid; gap: var(--e-s-5); }
.e-yan-kart__not { margin: 0; font-size: var(--e-t-kucuk); color: var(--e-neutral-600); }
.e-yan-kart__eylem { display: grid; gap: var(--e-s-3); }
.e-yan-kart__guven { display: grid; gap: var(--e-s-2); padding-top: var(--e-s-4); border-top: 1px solid var(--e-line); font-size: 13px; color: var(--e-neutral-600); }
.e-yan-kart__guven li { display: flex; gap: var(--e-s-2); align-items: flex-start; }
.e-yan-kart__guven .e-ikon { color: var(--e-success); margin-top: 2px; }

@media (max-width: 991px) {
	.e-tur-duzen { grid-template-columns: 1fr; }
	.e-tur-yan { position: static; }
}

/* İletişim sayfasındaki eylem düğmeleri (kısa kod çıktısı). */
.e-iletisim__eylem { display: flex; gap: var(--e-s-3); flex-wrap: wrap; margin-top: var(--e-s-6); max-width: none; }
@media (max-width: 575px) { .e-iletisim__eylem .e-btn { width: 100%; } }