/* ==========================================================================
   TOTAŞ — Tasarım Token'ları
   Tema: Marka Mavi/Yeşil — Modernize (bkz. docs/TASARIM.md)
   Buradaki değerler dışında hiçbir dosyada ham renk/ölçü yazılmaz.

   Renk rolleri nettir: MAVİ eylem (buton, bağlantı, aktif durum),
   YEŞİL kategori (hizmet simgesi, alan etiketi). İkisi karışmaz.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Zemin ve yüzeyler --------------------------------------------- */
  --c-bg:            #FFFFFF;  /* sayfa zemini */
  --c-bg-alt:        #F5F8FC;  /* alternatif bant */
  --c-surface:       #FFFFFF;  /* kart, panel */
  --c-surface-2:     #F5F8FC;  /* form alanı, ikinci düzey yüzey */
  --c-surface-3:     #EDF2F9;  /* hover */

  /* Koyu bölümler (footer, kurumsal şerit) — açık zemine karşıtlık */
  --c-dark:          #0F172A;
  --c-dark-2:        #16233C;
  --c-dark-ink:      #E9EEF6;
  --c-dark-ink-2:    #93A3BA;
  --c-dark-line:     rgba(255, 255, 255, 0.10);
  --c-dark-line-2:   rgba(255, 255, 255, 0.22);  /* şema düğümü, koyu zeminde belirgin kenar */

  /* --- Çizgiler ------------------------------------------------------- */
  --c-line:          #E3E9F1;
  --c-line-strong:   #C9D3E1;

  /* --- Metin ---------------------------------------------------------- */
  --c-ink:           #0F172A;  /* başlık ve ana metin */
  --c-ink-2:         #5A6675;  /* gövde */
  --c-ink-3:         #8A94A3;  /* etiket, üçüncül */

  /* --- Birincil: MAVİ = eylem ----------------------------------------- */
  --c-accent:        #1D4ED8;
  --c-accent-hover:  #1740B8;
  --c-accent-ink:    #FFFFFF;  /* mavi zemin üzerine yazı */
  --c-accent-soft:   rgba(29, 78, 216, 0.08);
  --c-accent-line:   rgba(29, 78, 216, 0.24);
  --c-accent-glow:   rgba(29, 78, 216, 0.20);

  /* --- İkincil: YEŞİL = kategori -------------------------------------- */
  --c-second:        #16A34A;
  --c-second-ink:    #FFFFFF;
  --c-second-soft:   rgba(22, 163, 74, 0.10);
  --c-second-line:   rgba(22, 163, 74, 0.26);
  --c-second-on-dark: #7FE3A4;  /* koyu zeminde yeşil: #16A34A okunmuyor */

  /* --- Durum renkleri (vurgudan ayrı) --------------------------------- */
  --c-success:       #15803D;
  --c-success-soft:  rgba(22, 163, 74, 0.10);
  --c-warning:       #B45309;
  --c-warning-soft:  rgba(217, 119, 6, 0.10);
  --c-danger:        #DC2626;
  --c-danger-soft:   rgba(220, 38, 38, 0.08);

  /* --- Tipografi ------------------------------------------------------ */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

  --fs-xs:    11.5px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    clamp(21px, 2.2vw, 26px);
  --fs-2xl:   clamp(26px, 3vw, 36px);
  --fs-3xl:   clamp(30px, 3.8vw, 44px);
  --fs-4xl:   clamp(34px, 4.8vw, 58px);

  --lh-tight:  1.08;
  --lh-snug:   1.26;
  --lh-normal: 1.66;
  --lh-loose:  1.80;

  --track-tight:  -0.03em;
  --track-normal:  0;
  --track-wide:    0.02em;
  --track-caps:    0.14em;

  --fw-heading: 800;

  /* --- Boşluk (4px tabanlı) ------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-section: clamp(60px, 8vw, 108px);

  /* --- Ölçü ------------------------------------------------------------ */
  --w-container: 1240px;
  --w-narrow:    780px;
  --pad-gutter:  clamp(20px, 4vw, 40px);

  /* --- Köşe ve gölge ---------------------------------------------------- */
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 28px 64px rgba(15, 23, 42, 0.12);
  --shadow-accent: 0 12px 28px var(--c-accent-glow);

  /* --- Hareket ---------------------------------------------------------- */
  --t-fast:  0.16s ease;
  --t-base:  0.24s ease;
  --t-slow:  0.42s cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Bayrak renkleri ------------------------------------------------
     Bunlar tasarım kararı değil, ulusal bayrakların sabit renkleridir; tema
     değişse de değişmezler. Yine de tek kaynaktan gelsin diye burada duruyorlar. */
  --flag-tr-red:  #E30A17;
  --flag-uk-blue: #012169;
  --flag-uk-red:  #C8102E;
  --flag-white:   #FFFFFF;
  --flag-edge:    rgba(15, 23, 42, 0.18);  /* bayrağı zeminden ayıran saç teli */

  /* --- Fotoğraf büyütme (K-039) ---------------------------------------
     Perde iki temada da aynı: büyütülen fotoğrafın etrafı her zaman koyu
     olmalı, yoksa açık temada fotoğraf zeminden ayrılmaz. Bu yüzden koyu
     tema bloğunda yeniden tanımlanmıyor. */
  --c-lightbox-veil: rgba(9, 15, 28, 0.92);
  --lightbox-max-h:    86vh;
  --lightbox-max-h-sm: 74vh;  /* dar ekranda çarpı fotoğrafın üstünde durur */

  /* --- Çapaya inen bağlantı (K-051) ------------------------------------
     Başlık yapışkan; çapa hedefi bu pay olmadan başlığın altında kalır.
     Üst şerit 40px + gezinti 80px = 120px; üstüne bir nefes payı. */
  --scroll-anchor: 136px;

  /* --- WhatsApp düğmesi (K-052) ----------------------------------------
     Yeşil burada KATEGORİ rolü değil: WhatsApp'ın kendi marka rengi, bayrak
     renkleri gibi sabit. Tema değişse de değişmez, o yüzden koyu tema
     bloğunda yeniden tanımlanmıyor. */
  --c-wa:       #25D366;
  --c-wa-ink:   #FFFFFF;
  --c-wa-glow:  rgba(37, 211, 102, 0.34);
  --c-wa-glow-2: rgba(37, 211, 102, 0.46);
  --c-wa-ring:  rgba(37, 211, 102, 0.42);
  --c-sheen:    rgba(255, 255, 255, 0.55);  /* düğme üzerinden geçen ışık (K-053) */
  --c-wa-ring-out: rgba(37, 211, 102, 0);   /* halkanın söndüğü yer */
  --shadow-wa:       0 10px 26px var(--c-wa-glow);
  --shadow-wa-hover: 0 14px 34px var(--c-wa-glow-2);

  --fab-size:      58px;
  --fab-inset:     clamp(16px, 3vw, 28px);
  --wa-bubble-w:   248px;
  /* Çerez bandı açıkken düğmenin yukarı kaçtığı mesafe (K-058): band yüksekliği + boşluk.
     Bandın iki düzeni var — tek satır (≤1040) ve dikey yığın (≤720). */
  --fab-lift:      100px;
  --fab-lift-sm:   176px;

  /* --- Perde (K-054) ---------------------------------------------------
     Modal ve mobil çekmece arkasındaki karartma. İki temada da koyu: perde
     içeriği geri iter, zemine uymaya çalışmaz. */
  --c-veil:    rgba(15, 23, 42, 0.55);
  --drawer-w:  min(86vw, 400px);
  --shadow-drawer: -24px 0 64px rgba(15, 23, 42, 0.28);

  /* --- Katman sırası ---------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-fab:      400;
  --z-cookie:   500;
  --z-drawer:   550;  /* mobil çekmece: düğme ve bandın üstünde, modalın altında (K-054) */
  --z-modal:    600;
  --z-lightbox: 700;
}

/* ==========================================================================
   KOYU TEMA (K-029)

   Yalnızca renk token'ları yeniden tanımlanır. Hiçbir bileşen biçemine
   dokunulmaz — K-011'den beri ham renk yazılmadığı için maliyet bu kadar.

   Blok neden iki kez yazılı: seçim iki ayrı yerden gelebiliyor.
     1. `:root[data-theme="dark"]`  — ziyaretçi düğmeye bastı, tercihi kayıtlı.
     2. `prefers-color-scheme: dark` — işletim sistemi koyu, ziyaretçi bir şey seçmedi.
   İkincisi `:not([data-theme="light"])` ile korunuyor: açık temayı elle seçen biri,
   işletim sistemi koyu olsa da açık kalsın.

   CSS'te değişken bloğunu iki seçiciye birden paylaştırmanın yolu yok; ön işlemci de
   kullanmıyoruz. İki blok DEĞER OLARAK BİREBİR AYNI tutulmalıdır — biri değişirse
   öteki de değişir.

   Renk rolleri korunuyor: MAVİ eylem, YEŞİL kategori (K-011). İkisi de koyu zeminde
   okunacak kadar açıldı; #1D4ED8 ve #16A34A koyu zeminde sönük kalıyordu.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-bg:            #0B1220;
  --c-bg-alt:        #111A2C;
  --c-surface:       #131D31;
  --c-surface-2:     #18243B;
  --c-surface-3:     #1E2C46;

  /* Koyu bant, sayfa zemininden bir tık AÇIK olur; yoksa bant kaybolur */
  --c-dark:          #16233C;
  --c-dark-2:        #1D2B47;
  --c-dark-ink:      #E9EEF6;
  --c-dark-ink-2:    #A0AEC3;
  --c-dark-line:     rgba(255, 255, 255, 0.09);
  --c-dark-line-2:   rgba(255, 255, 255, 0.20);

  --c-line:          #253148;
  --c-line-strong:   #3A4A6B;

  --c-ink:           #E9EEF6;
  --c-ink-2:         #A8B4C6;
  --c-ink-3:         #7C8798;

  --c-accent:        #4D82F3;
  --c-accent-hover:  #6C99F7;
  --c-accent-ink:    #08101F;
  --c-accent-soft:   rgba(77, 130, 243, 0.14);
  --c-accent-line:   rgba(77, 130, 243, 0.34);
  --c-accent-glow:   rgba(77, 130, 243, 0.26);

  --c-second:        #35C46B;
  --c-second-ink:    #08101F;
  --c-second-soft:   rgba(53, 196, 107, 0.14);
  --c-second-line:   rgba(53, 196, 107, 0.32);
  --c-second-on-dark: #7FE3A4;

  --c-success:       #35C46B;
  --c-success-soft:  rgba(53, 196, 107, 0.14);
  --c-warning:       #E0A34A;
  --c-warning-soft:  rgba(224, 163, 74, 0.14);
  --c-danger:        #F2645C;
  --c-danger-soft:   rgba(242, 100, 92, 0.14);

  --flag-edge:       rgba(255, 255, 255, 0.24);

  /* Koyu zeminde gri gölge görünmez; siyah ve daha derin olur */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.46);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.56);
  --shadow-accent: 0 12px 28px var(--c-accent-glow);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --c-bg:            #0B1220;
    --c-bg-alt:        #111A2C;
    --c-surface:       #131D31;
    --c-surface-2:     #18243B;
    --c-surface-3:     #1E2C46;

    --c-dark:          #16233C;
    --c-dark-2:        #1D2B47;
    --c-dark-ink:      #E9EEF6;
    --c-dark-ink-2:    #A0AEC3;
    --c-dark-line:     rgba(255, 255, 255, 0.09);
    --c-dark-line-2:   rgba(255, 255, 255, 0.20);

    --c-line:          #253148;
    --c-line-strong:   #3A4A6B;

    --c-ink:           #E9EEF6;
    --c-ink-2:         #A8B4C6;
    --c-ink-3:         #7C8798;

    --c-accent:        #4D82F3;
    --c-accent-hover:  #6C99F7;
    --c-accent-ink:    #08101F;
    --c-accent-soft:   rgba(77, 130, 243, 0.14);
    --c-accent-line:   rgba(77, 130, 243, 0.34);
    --c-accent-glow:   rgba(77, 130, 243, 0.26);

    --c-second:        #35C46B;
    --c-second-ink:    #08101F;
    --c-second-soft:   rgba(53, 196, 107, 0.14);
    --c-second-line:   rgba(53, 196, 107, 0.32);
    --c-second-on-dark: #7FE3A4;

    --c-success:       #35C46B;
    --c-success-soft:  rgba(53, 196, 107, 0.14);
    --c-warning:       #E0A34A;
    --c-warning-soft:  rgba(224, 163, 74, 0.14);
    --c-danger:        #F2645C;
    --c-danger-soft:   rgba(242, 100, 92, 0.14);

    --flag-edge:       rgba(255, 255, 255, 0.24);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.46);
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.56);
    --shadow-accent: 0 12px 28px var(--c-accent-glow);
  }
}