/*!
 * Elaf Turizm — TABAN
 * Sıfırlama, tipografi ölçeği, bağlantı, odak halkası, kap, erişilebilirlik.
 * Bağımlılık: tokens.css
 *
 * BÖLÜMLER
 *   1. Sıfırlama
 *   2. Gövde ve tipografi
 *   3. Bağlantılar
 *   4. Odak
 *   5. Kap ve bölüm
 *   6. Erişilebilirlik yardımcıları
 *   7. Blok editör içeriği
 *   8. Hareket azaltma
 */

/* ==== 1. SIFIRLAMA ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Sabit başlık, bağlantıyla atlanan başlığı örtmesin. */
	scroll-padding-top: 96px;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* `hidden` HER ZAMAN gizlesin.
   Tarayıcının varsayılanı `[hidden] { display: none }` ama özgüllüğü düşük:
   bir bileşene `display: flex` veren TEK bir sınıf kuralı onu eziyor ve öğe
   `hidden` niteliğiyle birlikte ekranda kalıyor. Yönlendiricinin özet
   satırında tam olarak bu oldu — "0 kalkış planlandı" cümlesi gizlenmesi
   gerekirken görünüyordu. JS de `hidden` ile açıp kapadığı için kural
   burada, tek yerde ve !important ile sabitlendi. */
[hidden] { display: none !important; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* ==== 2. GÖVDE VE TİPOGRAFİ ============================================= */

body {
	margin: 0;
	background: var(--e-bg);
	color: var(--e-neutral-800);
	font-family: var(--e-font-govde);
	font-size: var(--e-t-govde);
	line-height: 1.65;
	font-weight: 400;
	/* Türkçede tireleme kalıpları tarayıcılarda eksik/hatalı; `hyphens: auto`
	   "kalkı-şlar" gibi yanlış bölmeler üretiyor. Yerine akıllı sarma.      */
	overflow-wrap: break-word;
	text-wrap: pretty;
}

h1, h2, h3 {
	font-family: var(--e-font-baslik);
	color: var(--e-blue-900);
	font-weight: 700;
	text-wrap: balance;
}
h4, h5, h6 {
	font-family: var(--e-font-govde);
	color: var(--e-neutral-800);
	font-weight: 600;
	text-wrap: balance;
}

h1 { font-size: var(--e-t-h1); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: var(--e-t-h2); line-height: 1.15; letter-spacing: -.018em; }
h3 { font-size: var(--e-t-h3); line-height: 1.22; letter-spacing: -.015em; }
h4 { font-size: var(--e-t-h4); line-height: 1.40; letter-spacing: -.01em; }
h5 { font-size: 19px; line-height: 1.42; }
h6 { font-size: var(--e-t-govde); line-height: 1.45; }

p { max-width: var(--e-read); }
p + p { margin-top: 1em; }

small, .e-mikro { font-size: var(--e-t-mikro); }
.e-kucuk { font-size: var(--e-t-kucuk); }
.e-genis { font-size: var(--e-t-genis); line-height: 1.55; }
.e-soluk { color: var(--e-neutral-500); }

/* Üst etiket (eyebrow) */
.e-ustetiket {
	margin: 0 0 var(--e-s-3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--e-blue-700);
}

/* Rakamların sütun hâlinde kaymaması için — fiyat, sayaç, tarih. */
.e-rakam, .e-fiyat, .e-sayac { font-variant-numeric: tabular-nums; }

/* ==== 3. BAĞLANTILAR ==================================================== */

a { color: var(--e-blue-700); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--e-blue-800); }

/* Metin içindeki bağlantılar ALTI ÇİZİLİ kalır: rengin tek ayırt edici
   olması WCAG 1.4.1 ihlali ve renk körü kullanıcılar için bağlantı
   görünmez oluyor. Bileşen içindeki bağlantılar (buton, kart, menü) zaten
   kendi görsel kabına sahip, orada çizgi kaldırılıyor.                     */
.e-icerik a:not([class]) { text-decoration: underline; }
a[class] { text-decoration: none; }

/* ==== 4. ODAK =========================================================== */

/* Odak halkası HİÇBİR YERDE `outline: none` ile kaldırılmaz.
   `:focus-visible` sayesinde fareyle tıklayan kullanıcı halkayı görmez,
   klavyeyle gezen görür.                                                   */
:focus-visible {
	outline: 2px solid var(--e-blue-600);
	outline-offset: 2px;
	border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Koyu zeminde halka mavi yeterince ayrışmıyor; beyaza çevriliyor. */
.e-koyu :focus-visible { outline-color: #fff; }

/* ==== 5. KAP VE BÖLÜM =================================================== */

.e-kap {
	width: 100%;
	max-width: var(--e-shell);
	margin-inline: auto;
	padding-inline: var(--e-gutter);
}
.e-kap--dar { max-width: 880px; }
.e-kap--genis { max-width: var(--e-shell-wide); }

.e-bolum { padding-block: var(--e-s-12); position: relative; }
.e-bolum--sik { padding-block: var(--e-s-11); }
.e-bolum--zemin { background: var(--e-surface); }
.e-bolum--mavi { background: var(--e-bg-blue); }
.e-bolum--koyu { background: var(--e-bg-dark); color: #fff; }
.e-bolum--koyu h2, .e-bolum--koyu h3 { color: #fff; }

.e-bolum__bas { margin-bottom: var(--e-s-9); max-width: var(--e-read); }
.e-bolum__bas--orta { margin-inline: auto; text-align: center; }
.e-bolum__baslik { margin: 0; }
.e-bolum__alt { margin-top: var(--e-s-4); color: var(--e-neutral-500); font-size: var(--e-t-govde); }
.e-bolum--koyu .e-bolum__alt { color: var(--e-neutral-300); }
.e-bolum__bas--orta .e-bolum__alt { margin-inline: auto; }

@media (max-width: 991px) {
	.e-bolum { padding-block: var(--e-s-11); }
	.e-bolum__bas { margin-bottom: var(--e-s-8); }
}
@media (max-width: 767px) {
	.e-bolum { padding-block: var(--e-s-10); }
	.e-bolum__bas { margin-bottom: var(--e-s-7); }
}

/* ==== 6. ERİŞİLEBİLİRLİK YARDIMCILARI =================================== */

/* Ekran okuyucuya görünür, göze gizli. `display:none` KULLANILMAZ — o,
   ögeyi erişilebilirlik ağacından da siler.                               */
.screen-reader-text, .e-gizli {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* İçeriğe atla — odaklanınca görünür olur. */
.e-atla {
	position: absolute;
	top: -100px;
	left: var(--e-s-4);
	z-index: 9999;
	padding: 12px 20px;
	background: var(--e-blue-700);
	color: #fff;
	font-weight: 600;
	border-radius: 0 0 var(--e-r-sm) var(--e-r-sm);
	text-decoration: none;
	transition: top var(--e-dur-move) var(--e-ease);
}
.e-atla:focus { top: 0; color: #fff; }

/* `tabindex="-1"` verilen atlama hedefinde odak çerçevesi görünmesin —
   halka burada gürültü, odağın taşındığını sayfa konumu zaten gösteriyor. */
[tabindex="-1"]:focus { outline: none; }

/* ==== 7. BLOK EDİTÖR İÇERİĞİ =========================================== */

/* theme.json varlığı çekirdeğin blok düzen CSS'ini değiştiriyor; bu kurallar
   yazılmazsa `alignwide`/`alignfull` bloklar kaptan taşıyor.               */
.e-icerik > * { max-width: var(--e-read); margin-inline: auto; }
.e-icerik > .alignwide { max-width: 1080px; }
.e-icerik > .alignfull { max-width: none; margin-inline: calc(50% - 50vw); width: 100vw; }
.e-icerik > * + * { margin-top: var(--e-s-5); }
.e-icerik h2, .e-icerik h3, .e-icerik h4 { margin-top: var(--e-s-8); }
.e-icerik ul, .e-icerik ol { padding-left: 1.3em; }
.e-icerik li + li { margin-top: .4em; }
.e-icerik img { border-radius: var(--e-r-md); }
.e-icerik blockquote {
	border-left: 3px solid var(--e-blue-600);
	padding-left: var(--e-s-5);
	font-size: var(--e-t-genis);
	color: var(--e-neutral-700);
}

/* ==== 8. HAREKET AZALTMA =============================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}