/*!
 * Elaf Turizm — TASARIM TOKENLARI (tek doğruluk kaynağı)
 *
 * Bu dosya renk, ölçü, gölge ve zamanlama değerlerinin TEK tanımlandığı yerdir.
 * Başka hiçbir CSS dosyasında çıplak hex kodu ya da sabit gölge yazılmaz.
 *
 * PALET LOGODAN ÖLÇÜLDÜ, seçilmedi:
 *   logo PNG'sinin palet bloğu çözüldü, piksel dağılımı sayıldı ->
 *   beyaz %81.69 · mavi #0F75BD %5.34 · kırmızı #ED1B24 %3.14
 *   normalize edilince mavi/kırmızı oranı = 63 / 37  (bkz. --e-grad-rule)
 *
 * KONTRAST: her metin/zemin çifti WCAG 2.1 bağıl parlaklık formülüyle
 * hesaplandı; her satırın yanında ölçülen oran yazılı. Bu değerler tahmin
 * değil, `dogrula/kontrast.php` betiğinin çıktısıdır ve değişirse test düşer.
 *
 * BÖLÜMLER
 *   1. Mavi skalası
 *   2. Kırmızı skalası
 *   3. Nötr skalası
 *   4. Yüzey, çizgi, durum
 *   5. Degradeler
 *   6. Gölgeler
 *   7. Yarıçap
 *   8. Hareket
 *   9. Boşluk ve ölçü
 */

:root {

	/* ==== 1. MAVİ SKALASI — marka omurgası ============================== */
	--e-blue-50:   #ECF6FE;   /* bölüm zemini, çip zemini                     */
	--e-blue-100:  #D5EBFB;   /* hover zemini                                 */
	--e-blue-200:  #ADD7F5;   /* mavi yüzeyde kenarlık                        */
	--e-blue-300:  #73B7E8;   /* KOYU zeminde link — lacivert üstünde 6.52 ✓  */
	--e-blue-400:  #3598DE;   /* koyu zeminde ikon                            */
	/* --e-blue-500: #1785D3 → beyazda 3.94, AA ALTINDA. Metin/dolgu olarak
	   KULLANILMAZ; bilerek token yapılmadı ki kazara kullanılmasın.          */
	--e-blue-600:  #0F75BD;   /* LOGO. Birincil buton dolgusu — beyaz metin 4.88 ✓ */
	--e-blue-700:  #0B5998;   /* gövde içi link + hover — 7.25 ✓ AAA          */
	--e-blue-800:  #0D4173;   /* :active, koyu bant                — 10.39 ✓  */
	--e-blue-900:  #112C4A;   /* lacivert: başlık, footer zemini   — 14.16 ✓  */

	/* ==== 2. KIRMIZI SKALASI — YALNIZ VURGU ============================= */
	/* Kırmızı hâkim renk DEĞİL. Üç gerekçe:
	   (a) Anlam: hac/umre bir ibadet yolculuğu; baskın kırmızı arayüzde
	       "uyarı / hata" şeması okunur, güven değil.
	   (b) Erişilebilirlik: logo kırmızısı beyazda 4.39 — AA'yı GEÇEMİYOR,
	       hem metin rengi hem beyaz yazılı dolgu olarak kullanılamaz.
	   (c) Marka sadakati: logonun kendi piksel dağılımı kırmızıya %37 pay
	       veriyor; arayüzde öne çıkarmak logoyu yanlış temsil eder.
	   Kırmızı bütçesi: bir bölümde renkli alanın %10'unu geçmez.            */
	--e-red-50:    #FEECED;   /* aciliyet rozeti zemini, hata kutusu          */
	--e-red-100:   #FCD9DB;
	--e-red-200:   #F9B9BC;   /* hata kutusu kenarlığı                        */
	--e-red-300:   #F47C82;   /* koyu zeminde aciliyet ikonu                  */
	--e-red-400:   #F04C54;   /* koyu zeminde hata metni — AA-büyük ✓         */
	--e-red-500:   #ED1B24;   /* LOGO. Yalnız dekor/çizgi. METİN TAŞIMAZ.     */
	--e-red-600:   #CE121B;   /* metin + dolgu kırmızısı — beyazda 5.63 ✓     */
	--e-red-700:   #A71118;   /* rozet metni — kırmızı-50 üstünde 6.74 ✓      */
	--e-red-800:   #7F1015;   /* :active                                      */

	/* ==== 3. NÖTR SKALASI — hafif mavi tonlu (HSL 212°) ================= */
	/* Saf gri, mavi bir markada "kirli/soğuk" görünüyor.                    */
	--e-neutral-50:  #F8FAFC;
	--e-neutral-100: #EEF2F6;   /* devre dışı yüzey, iskelet                  */
	--e-neutral-200: #DFE5EC;   /* KART KENARLIĞI, ayraç                      */
	--e-neutral-300: #C8D0DA;   /* güçlü ayraç; koyu zeminde metin  — 9.10 ✓  */
	--e-neutral-400: #9AA7B6;   /* yer tutucu ikon                            */
	--e-neutral-500: #5F6F81;   /* SOLUK METİN — beyaz 5.15 · --e-bg 4.83 ·
	                               --e-blue-50 4.70 → ÜÇ zeminde birden AA ✓  */
	--e-neutral-600: #516070;   /* ikincil metin                    — 6.45 ✓  */
	--e-neutral-700: #3A4A63;   /* yumuşak gövde metni              — 8.98 ✓  */
	--e-neutral-800: #1B2E4A;   /* ANA GÖVDE METNİ                  — 13.67 ✓ */
	--e-neutral-900: #161F2C;   /* en koyu başlık                   — 16.58 ✓ */

	/* ==== 4. YÜZEY, ÇİZGİ, DURUM ======================================== */
	--e-surface:     #FFFFFF;   /* kart, panel, header                        */
	--e-surface-2:   #FBFCFE;   /* iç içe kart                                */
	--e-bg:          #F4F8FC;   /* SAYFA ZEMİNİ                               */
	--e-bg-blue:     #ECF6FE;   /* mavi vurgulu bölüm                         */
	--e-bg-dark:     #112C4A;   /* istatistik bandı, footer — beyaz 14.16 ✓   */

	--e-line:        #DFE5EC;   /* dekoratif kenarlık                         */
	--e-line-strong: #C8D0DA;
	/* Form kenarlığı AYRI bir token: WCAG 1.4.11 metin-dışı ögeler için 3:1
	   istiyor. --e-line (1.27) bunu karşılamıyor; bu ton 3.15 veriyor.       */
	--e-line-input:  #8193A7;

	--e-success:      #0E7A52;  /* beyazda 5.35 ✓ · beyaz yazı taşıyabilir    */
	--e-success-tint: rgba(14, 122, 82, .10);
	--e-warning:      #B45309;  /* beyazda 5.02 ✓ — yıldız da bu renk, sarı
	                               (#F5B301) beyazda 1.9'da kalıyor           */
	--e-warning-tint: rgba(180, 83, 9, .10);
	--e-danger:       #CE121B;
	--e-danger-tint:  rgba(206, 18, 27, .08);
	/* WhatsApp marka yeşili #25D366 beyazda 1.98 — metin taşıyamaz.
	   Dolgu için koyulaştırılmış sürüm: 5.02 ✓                               */
	--e-whatsapp:     #1B7F4B;
	--e-whatsapp-600: #166A3F;

	--e-focus:      rgba(15, 117, 189, .35);

	/* ==== 5. DEGRADELER ================================================= */
	/* KURAL: hiçbir degrade --e-blue-600'den DAHA AÇIĞA gitmez. #1785D3
	   beyaz metinle 3.94 veriyor; açık uçlu bir degradenin üstündeki beyaz
	   başlık, degradenin ortasında sessizce okunmaz hale geliyor.           */
	--e-grad-brand: linear-gradient(135deg, #0B5998 0%, #0F75BD 100%);   /* en düşük 4.88 ✓ */
	--e-grad-deep:  linear-gradient(140deg, #112C4A 0%, #0B5998 58%, #0F75BD 100%);
	--e-grad-hover: linear-gradient(135deg, #0D4173 0%, #0B5998 100%);   /* en düşük 7.25 ✓ */
	/* Hero perdesi. Alt uç .78 — parlak gökyüzü fotoğrafında bile beyaz
	   metin 8.7:1. Yaygın olarak kullanılan .55 alfa 4.34'te kalıyor ve
	   AA'yı kaçırıyor.                                                      */
	--e-grad-veil:  linear-gradient(to top, rgba(11,33,53,.78) 0%, rgba(11,33,53,.40) 46%, rgba(11,33,53,0) 100%);
	/* Düz perde. Degrade YALNIZ metnin alta yaslandığı yerde işe yarıyor;
	   metin dikey ortada duruyorsa (mobil kategori kartı) degradenin orta
	   noktası .40 alfa ve beyaz başlık aydınlık bir fotoğrafta 2.44:1'e
	   düşüyor. Düz .78, aynı fotoğrafta 8.08:1 — degradenin alt ucuyla
	   aynı değer, o yüzden ayrı bir gerekçe gerekmiyor. */
	--e-veil-flat: rgba(11,33,53,.78);
	/* MARKA İMZASI: 63/37 durağı logonun mavi/kırmızı piksel oranıdır.      */
	--e-grad-rule:  linear-gradient(90deg, var(--e-blue-600) 0 63%, var(--e-red-500) 63% 100%);

	/* ==== 6. GÖLGELER — lacivert tonlu, iki katmanlı ==================== */
	/* Siyah gölge mavi palette gri bir halka bırakıyor; tümü rgb(17,44,74).
	   Yakın katman (1-2px) nesneyi yüzeye bağlar, uzak katman yüksekliği
	   verir. Tek katmanlı gölge "çıkartma" gibi duruyor.                    */
	--e-shadow-xs: 0 1px 2px rgba(17,44,74,.06);
	--e-shadow-sm: 0 1px 2px rgba(17,44,74,.05), 0 2px 8px rgba(17,44,74,.05);
	--e-shadow-md: 0 2px 4px rgba(17,44,74,.04), 0 8px 24px rgba(17,44,74,.07);
	--e-shadow-lg: 0 4px 8px rgba(17,44,74,.05), 0 16px 40px rgba(17,44,74,.10);
	--e-shadow-xl: 0 8px 16px rgba(17,44,74,.06), 0 28px 64px rgba(17,44,74,.14);
	--e-shadow-brand: 0 4px 14px rgba(15,117,189,.28);
	--e-shadow-inset: inset 0 1px 0 rgba(255,255,255,.14);

	/* ==== 7. YARIÇAP ==================================================== */
	--e-r-xs:   6px;    /* çip, küçük etiket                                 */
	--e-r-sm:  10px;    /* buton, form alanı                                 */
	--e-r-md:  14px;    /* kart, görsel                                      */
	--e-r-lg:  20px;    /* panel, modal                                      */
	--e-r-xl:  28px;    /* kategori kartı, hero paneli                       */
	--e-r-pill: 999px;
	/* MARKA İMZASI — kubbe/mihrap kemeri. Logodaki lalenin ve İslam
	   mimarisindeki kemerin ortak silueti: sivri-yuvarlak üst, düz alt.
	   Ek görsel dosyası gerektirmez, saf border-radius.                     */
	--e-r-dome: 50% 50% 14px 14px / 26% 26% 14px 14px;

	/* ==== 8. HAREKET ==================================================== */
	--e-ease:     cubic-bezier(.16, 1, .3, 1);    /* transform ve renk       */
	/* Çapraz geçiş/fade AYRI eğri ister: --e-ease ile opaklık sürenin
	   %6'sında %71'e fırlıyor, uzun bir fade sert kesme gibi görünüyor.
	   Fade'de iki katman da tam ortada %50'de olmalı → simetrik eğri.       */
	--e-ease-sym: cubic-bezier(.37, 0, .63, 1);
	--e-dur-color: 150ms;
	--e-dur-move:  220ms;
	--e-dur-zoom:  320ms;
	--e-dur-fade:  380ms;
	--e-dur-panel: 280ms;

	/* ==== 9. BOŞLUK VE ÖLÇÜ ============================================= */
	/* 4px tabanlı, 8px ritimli. 12 ve 20 bilinçli olarak var: saf 8'lik
	   ızgara kart iç dolgusunu ya 16 (sıkışık) ya 24 (savruk) bırakıyor.    */
	--e-s-1:  4px;   --e-s-2:  8px;   --e-s-3: 12px;  --e-s-4: 16px;
	--e-s-5: 20px;   --e-s-6: 24px;   --e-s-7: 32px;  --e-s-8: 40px;
	--e-s-9: 48px;   --e-s-10: 64px;  --e-s-11: 80px; --e-s-12: 96px;

	--e-shell:      1280px;   /* ana kabuk                                   */
	--e-shell-wide: 1440px;
	--e-read:       68ch;     /* uzun metin — Türkçe kelimeler uzun, 75ch
	                             fazla kaçıyor                               */
	--e-side:        320px;   /* yan sütun                                   */
	--e-gutter:       24px;

	/* ==== 10. TİPOGRAFİ ================================================= */
	--e-font-govde:  "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--e-font-baslik: "Platypi", Georgia, "Times New Roman", serif;

	/* Gövde 17px. Yaygın 16px'ten bir adım yukarı, çünkü hac/umre
	   müşterisinin yaş ortalaması yüksek (45-70 bandı ağırlıklı) ve
	   presbiyopi yaygın. Ölçek oranı ≈1.22.                                 */
	--e-t-mikro:  14px;
	--e-t-kucuk:  15px;
	--e-t-govde:  17px;
	--e-t-genis:  21px;
	--e-t-h4:     21px;
	--e-t-h3:     32px;
	--e-t-h2:     39px;
	--e-t-h1:     48px;

	/* Android Chrome'un "Otomatik Koyu Tema"sı paleti kendi algoritmasıyla
	   ters çevirip laciverti çamura, kırmızıyı pembeye çeviriyor. Site
	   karanlık mod sunmadığına göre bunu açıkça reddetmek gerekiyor.        */
	color-scheme: light only;
}

@media (max-width: 767px) {
	:root {
		--e-t-genis: 18px;
		--e-t-h4:    19px;
		--e-t-h3:    24px;
		--e-t-h2:    27px;
		--e-t-h1:    32px;
		--e-gutter:  16px;
	}
}