/*!
 * Elaf Turizm — ANA SAYFA
 * Yalnız `is_front_page()` durumunda yüklenir (inc/varliklar.php).
 * Bağımlılık: signature.css
 *
 * BÖLÜMLER
 *   1. Kapak
 *   2. Hızlı yönlendirici
 *   3. Güven şeridi
 *   4. Süreç
 *   5. Rakamlar
 *   6. SSS düzeni
 *   7. Kapanış
 *
 * NOT: ızgara, yazı kartı, boş hâl, sayfalama ve tur detayı stilleri BU
 * DOSYADA DEĞİL — components.css içindeler. Sebep ölçülmüş bir hata: bu
 * dosya yalnız ana sayfada yükleniyor ve paylaşılan bileşenler burada
 * kalınca tur detay sayfası tek sütuna düşüyordu.
 */

/* ==== 1. KAPAK ======================================================== */

.e-hero {
	position: relative; overflow: hidden;
	background: var(--e-grad-deep);
	color: #fff;
	padding-top: var(--e-s-12);
}
.e-hero__ic {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 7.5fr 4.5fr;
	align-items: center; gap: var(--e-s-9);
	padding-bottom: var(--e-s-12);
	min-height: 520px;
}
.e-hero__baslik { color: #fff; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.022em; margin: 0; }
.e-hero__alt { margin-top: var(--e-s-5); color: rgba(255,255,255,.90); max-width: 52ch; }
.e-hero__eylem { display: flex; gap: var(--e-s-3); flex-wrap: wrap; margin-top: var(--e-s-8); }

/* Kapak görseli — DOĞAL ORANINDA, kırpılmadan.
   Burada eskiden 4/5 oranlı, `--e-r-dome` maskeli ve `object-fit: cover`
   ile kırpan bir yuva vardı. Kurumsal kapak görseli 2/3 dikey ve KENDİ
   mihrap kemeriyle şeffaf zeminli geliyor; iki maske üst üste binince
   görselin kemeri kesiliyor, tepesindeki hilal kayboluyordu. Kırpma ve
   maske kalktı — yuva yüksekliğini görselin kendisinden alıyor.
   `filter: drop-shadow`, `box-shadow`un yapamadığını yapıyor: gölgeyi
   dikdörtgen kutuya değil, şeffaf PNG'nin GERÇEK siluetine uyguluyor. */
.e-hero__medya { position: relative; }
.e-hero__kemer { position: relative; filter: drop-shadow(0 18px 36px rgba(6,20,34,.34)); }
.e-hero__kemer img { display: block; width: 100%; height: auto; }

@media (max-width: 991px) {
	.e-hero__ic { grid-template-columns: 1fr; gap: var(--e-s-8); min-height: 0; }
	/* Görsel MOBİLDE DE GÖSTERİLİYOR. Eskiden gizleniyordu çünkü kapak
	   görseli telefonda en büyük öge (LCP) olup açılışı geciktiriyordu; o
	   gerekçe 2,3 MB'lık PNG içindi. Görsel 258 KB'lık WebP'ye indi ve
	   artık sitenin ana mesajını taşıyor, gizlemek anlamsız. Yine de
	   sınırlandırılıyor: dar ekranda tam boy basılırsa tek başına bir
	   ekrandan uzun oluyor ve sayfanın geri kalanı katlanın çok altında
	   kalıyor. */
	/* GÖRSEL ÜSTTE, METİN ALTTA. Kaynak (DOM) sırası DEĞİŞMİYOR — hâlâ önce
	   başlık/metin, sonra görsel geliyor; `.e-hero__medya` zaten
	   `aria-hidden="true"` olduğu için ekran okuyucu onu hiç duyurmuyor,
	   dolayısıyla klavye/okuyucu sırası bundan etkilenmiyor. Yalnız GÖRÜNEN
	   sıra `order: -1` ile değişip görsel grid'de birinci satıra alınıyor. */
	.e-hero__medya { display: flex; justify-content: center; order: -1; }
	.e-hero__kemer { width: min(280px, 62vw); }
}
@media (max-width: 767px) {
	.e-hero { padding-top: var(--e-s-9); }
	.e-hero__ic { padding-bottom: var(--e-s-9); }
	.e-hero__eylem { margin-top: var(--e-s-6); }
	.e-hero__eylem .e-btn { width: 100%; }

	/* Telefonda tek, net eylem: yalnız "Bizi arayın" kalıyor. "Turları
	   inceleyin" (dolgu-beyaz varyant) kaldırılıyor — iki tam genişlikli
	   düğme alt alta H1'i aşağı itiyor, sabit çağrı çubuğu da kalktığına
	   göre arama düğmesinin tek ve belirgin olması daha net bir eylem. */
	.e-hero__eylem .e-btn--dolgubeyaz { display: none; }

	/* Açıklama paragrafı telefonda basılmıyor — başlık + tek düğme yeterli,
	   kapak daha kısa sürede bitiyor. */
	.e-hero__alt { display: none; }

	/* Görsel telefonda tabletten de küçük: 991px bloğundaki 280px/62vw,
	   dar ekranda hâlâ başlığın yarısı kadar yer kaplıyordu. */
	.e-hero__kemer { width: min(200px, 46vw); }
}

/* ==== 3. HIZLI YÖNLENDİRİCİ =========================================== */

/* Kapağın altına oturan yüzen kart: kapağın İÇİNDE değil — orada H1'i ezip
   asıl mesajı ikinci plana atıyordu. */
.e-bul {
	position: relative; z-index: 3;
	margin-top: -56px; margin-bottom: var(--e-s-9);
	padding: var(--e-s-6);
	background: var(--e-surface);
	border: 1px solid var(--e-line);
	border-radius: var(--e-r-lg);
	box-shadow: var(--e-shadow-xl);
}
.e-bul__tip { display: flex; gap: var(--e-s-2); flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 var(--e-s-5); }
.e-bul__radyo:checked + .e-cip { background: var(--e-blue-600); border-color: var(--e-blue-600); color: #fff; }
.e-bul__radyo:focus-visible + .e-cip { outline: 2px solid var(--e-blue-600); outline-offset: 2px; }
.e-bul__satir { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--e-s-4); align-items: end; }
.e-bul__git { min-height: 50px; }
.e-bul__ozet { display: flex; align-items: center; gap: var(--e-s-2); margin: var(--e-s-4) 0 0; font-size: var(--e-t-kucuk); color: var(--e-neutral-500); max-width: none; }
.e-bul__ozet .e-ikon { color: var(--e-blue-600); }

@media (max-width: 767px) {
	.e-bul { margin-top: -34px; padding: var(--e-s-4); }
	.e-bul__satir { grid-template-columns: 1fr; }
	.e-bul__tip .e-cip { flex: 1; justify-content: center; }
}

/* ==== 4. GÜVEN ŞERİDİ ================================================= */

.e-guven { background: var(--e-surface); border-block: 1px solid var(--e-line); padding-block: var(--e-s-5); }
.e-guven__ic { display: flex; align-items: center; justify-content: center; gap: var(--e-s-4) var(--e-s-8); flex-wrap: wrap; }
.e-guven__oge { display: inline-flex; align-items: center; gap: var(--e-s-2); font-size: var(--e-t-kucuk); font-weight: 600; color: var(--e-neutral-600); }
.e-guven__oge .e-ikon { color: var(--e-success); }
.e-guven__belge { padding-left: var(--e-s-6); border-left: 1px solid var(--e-line); }
.e-guven__belge .e-ikon { color: var(--e-blue-600); }
@media (max-width: 767px) {
	.e-guven__ic { gap: var(--e-s-3) var(--e-s-5); justify-content: flex-start; }
	.e-guven__belge { padding-left: 0; border-left: 0; }
}

/* ==== 5. SÜREÇ ======================================================== */

.e-surec { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-s-6); list-style: none; padding: 0; margin: 0; counter-reset: none; }
.e-adim { position: relative; }
/* Adımlar arası bağlayıcı — 63/37 çift renkli, kesikli. */
.e-adim:not(:last-child)::after {
	content: ''; position: absolute; top: 31px; left: 72px; right: calc(var(--e-s-6) * -1);
	height: 2px;
	background: var(--e-grad-rule);
	opacity: .34;
}
.e-adim__baslik { margin: var(--e-s-4) 0 6px; font-size: 19px; font-weight: 600; color: var(--e-neutral-800); }
.e-adim__metin { margin: 0; font-size: var(--e-t-kucuk); color: var(--e-neutral-500); }
.e-surec__alt { margin: var(--e-s-8) auto 0; text-align: center; color: var(--e-neutral-600); display: flex; align-items: center; justify-content: center; gap: var(--e-s-3); flex-wrap: wrap; max-width: none; }

@media (max-width: 991px) { .e-surec { grid-template-columns: repeat(2, 1fr); } .e-adim:nth-child(2)::after { display: none; } }
@media (max-width: 767px) {
	/* Dikey zaman çizelgesi */
	.e-surec { grid-template-columns: 1fr; gap: var(--e-s-5); }
	.e-adim { display: grid; grid-template-columns: 56px 1fr; gap: var(--e-s-4); align-items: start; }
	.e-adim__baslik { margin-top: 0; grid-column: 2; }
	.e-adim__metin { grid-column: 2; }
	.e-adim__no { grid-row: span 2; }
	.e-adim:not(:last-child)::after { top: 62px; left: 27px; right: auto; bottom: calc(var(--e-s-5) * -1); width: 2px; height: auto; }
}

/* ==== 6. RAKAMLAR ===================================================== */

.e-rakamlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-s-6); text-align: center; position: relative; z-index: 1; }
.e-rakam-kutu__sayi { margin: 0; font-family: var(--e-font-baslik); font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; }
.e-rakam-kutu__sayi sup { font-size: .5em; color: var(--e-blue-300); }
.e-rakam-kutu__etiket { margin: var(--e-s-2) 0 0; font-size: 16px; color: var(--e-neutral-300); max-width: none; }
@media (max-width: 991px) { .e-rakamlar { grid-template-columns: repeat(2, 1fr); gap: var(--e-s-7); } }
@media (max-width: 575px) { .e-rakam-kutu__sayi { font-size: 38px; } }

/* ==== 7. SSS DÜZENİ =================================================== */

.e-sss-duzen { display: grid; grid-template-columns: 4fr 8fr; gap: var(--e-s-9); align-items: start; }
.e-sss-yan { position: sticky; top: 110px; }
.e-sss-yan .e-bolum__bas { margin-bottom: var(--e-s-5); }
.e-sss-yan__eylem { display: flex; gap: var(--e-s-3); flex-wrap: wrap; }
@media (max-width: 991px) {
	.e-sss-duzen { grid-template-columns: 1fr; gap: var(--e-s-7); }
	.e-sss-yan { position: static; }
}

/* ==== 8. KAPANIŞ ====================================================== */

.e-kapanis { position: relative; overflow: hidden; background: var(--e-grad-brand); color: #fff; }
.e-kapanis__ic { position: relative; z-index: 2; display: grid; grid-template-columns: 7fr 5fr; gap: var(--e-s-9); align-items: center; }
.e-kapanis__baslik { margin: 0; color: #fff; font-size: var(--e-t-h2); }
.e-kapanis__metin { margin: var(--e-s-4) 0 0; color: rgba(255,255,255,.92); }
.e-kapanis__saat { display: inline-flex; align-items: center; gap: var(--e-s-2); margin-top: var(--e-s-5); font-size: var(--e-t-kucuk); color: rgba(255,255,255,.86); }
.e-kapanis__eylem { display: grid; gap: var(--e-s-3); }
@media (max-width: 991px) { .e-kapanis__ic { grid-template-columns: 1fr; gap: var(--e-s-7); } }