/* ============================================================
   COCOA TEMA — "Cocoa Noir" (Gourmet / Patisserie / Chocolate)
   Sekizinci tema. Diğer yedisinden (default/vibrant/aurora editorial-
   lüks / meridian Swiss-brütalist-mono / nova koyu-SaaS-cam / atelier
   sıcak-düz-editorial-yatay-şerit / monarch klasik-simetrik-altın-
   çerçeve) YAPISAL olarak ayrışır.

   ★ AYRIŞMA RENKTEN DEĞİL YAPIDAN GELİR (spec §1.1). "Koyu zemin +
   altın + serif" kombinasyonu ZATEN Monarch'ta var; "sıcak mürekkep +
   şampanya + kağıt-editorial" ZATEN Aurora'da var. Cocoa'nın üç
   taşıyıcı ayrışma öğesi:

     1) HERO: YAPIŞKAN BÖLÜNMÜŞ KAYDIRMA (sticky split-scroll).
        Carousel (default/vibrant/aurora) DEĞİL, merkezi simetri
        (monarch) DEĞİL, kırık asimetrik grid (atelier) DEĞİL,
        gradient-mesh (nova) DEĞİL. Sol sütun yapışkan durur, sağ
        sütun slaytları altından akar. Saf CSS `position: sticky`.
     2) WAFFLE KAFESİ (lattice): repeating-linear-gradient ile üretilen
        çok düşük alfalı KABARTMALI kare doku. Dekoratif süs DEĞİL —
        DÖRT yerde iş yapar: bölüm ayraç bantları, boş görsel yer
        tutucusu, footer üst kenarı, kart hover geçişi.
     3) PRALINE KARTLAR: 4:5 DİKEY görsel oranı. Diğer TÜM temalar 4:3
        kullanıyor. Gıda fotoğrafı dikey okunur.

   Palet: sinematik koyu kakao ("Bitter") + karamel altını + tutumlu
   ahududu. Açık mod ("Sütlü") süt kremi zemin. Lüks ama MODERN —
   Monarch'ın klasik/ağırbaşlı çerçeveciliği değil.

   Tipografi: Bodoni Moda (Didone — lüks çikolata/parfüm ambalajının
   tipografik kodu) + Manrope (modern premium DTC gıda sans'ı).
   ★ MONOSPACE YOK. --t-font-mono TANIMLANMAZ. Mono "teknoloji" okur;
   o Meridian'ın istasyon-panosu kimliğidir, Cocoa'nın değil.
   ★ BODONI SINIRI: Didone'nin saç-inceliğindeki tırnakları küçük
   puntoda kaybolur. Bodoni SADECE büyük punto başlık/alıntıda
   kullanılır; gövde metni, buton, form etiketi, navigasyon, kart
   başlığı, h4/h5/h6 HER ZAMAN Manrope'tur. Bu bilinçli bir SINIR.

   Aynı --t-* token sözleşmesini ve .t-* class'larını korur; tüm
   controller'lar ve makrolar değişmeden çalışır. Bootstrap 5.3 üstüne;
   açık/koyu mod [data-bs-theme] ile.

   ★★★ KRİTİK WCAG KARARI — ALTIN KONTRAST (Monarch'ta YAŞANMIŞ bir
   hatanın tekrarlanmaması için baştan kurala yazıldı). Ölçülen gerçek
   oranlar (WCAG 2.1 relative-luminance formülü, tahmin DEĞİL):
     - #D9A441 (ham karamel altını) vs #FAF4EC (süt kremi) = 2.06:1
       → 4.5:1 metin eşiğini KAÇIRIR, 3:1 non-text eşiğini de KAÇIRIR.
       AÇIK MODDA HAM ALTIN METİN OLARAK ASLA KULLANILMAZ.
     - #D9A441 vs #16100C (kakao siyahı) = 8.38:1 → AA/AAA'yı rahatça
       geçer. KOYU MODDA ham altın metin olarak GÜVENLİ.
   Bu yüzden ÜÇ ayrı altın rolü tanımlanır:
     --t-gold       : marka altını / DEKORATİF (kafes dokusu, sabit-koyu
                      zeminli bileşenlerdeki vurgu). Açık modun kendi
                      krem zemininde METİN olarak KULLANILMAZ.
     --t-gold-line  : YAPISAL hairline (kart/panel/form kenarı, navbar
                      alt çizgisi). Açık modda koyulaştırılmış yanık
                      altın #A8792E (3.53:1 krem / 3.86:1 beyaz /
                      3.22:1 surface-2) — WCAG 1.4.11 non-text 3:1
                      eşiğini HER ÜÇ açık yüzeyde de geçer. Ham altın
                      2.06:1 ile ÇİZGİ olarak bile yetersizdi.
     --t-gold-text  : küçük METİN. Açık modda #8A5A22 (5.39:1), koyu
                      modda ham altın #D9A441 (8.38:1).
   Şablonlarda küçük altın etiket/eyebrow/badge/link HER ZAMAN
   --t-gold-text kullanır.

   ★★ AHUDUDU (ikincil vurgu) da AYNI disipline tabidir — ölçüldü:
     - #C24A5E vs #16100C = 3.98:1 → küçük metin için AA'yı KAÇIRIR.
     - #C24A5E üstünde krem metin = 3.88:1 → dolgu olarak da KAÇIRIR.
   Bu yüzden ahududu da rollere ayrıldı: --t-accent-2 (dekoratif),
   --t-accent-2-text (metin-güvenli), --t-accent-2-fill + --t-on-accent-2
   (metin taşıyan dolgu). Ayrıntı: ilgili token satırlarındaki notlar.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..800;1,6..96,400..700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ---------- Tasarım Token'ları: AÇIK MOD — "Sütlü" ----------
   Süt kremi zemin + kakao mürekkebi. Koyu modun "tersi" değil, EŞİT
   DEĞERDE ayrı bir gurme ifadesi (kremalı beyaz çikolata paleti).

   FAZ-B (Theme Customizer) köprüsü — plan §2.4, ZORUNLU:
     --c-primary   → --t-accent
     --c-secondary → --t-secondary
     --c-bg        → --t-bg
     --c-text      → --t-fg
     --c-radius    → --t-radius   (fallback 14px — squircle)
     --c-font-*    → --t-font-heading / --t-font-body
   --t-primary (mürekkep/başlık rolü) customizer'a BAĞLANMAZ — bu ayrı
   bir marka/ink rolüdür, "Ana Renk" değil (default/monarch ile aynı
   gerekçe).

   ★ KATMANLAMA KARARI (Monarch/Nova/Atelier'den BİLİNÇLİ SAPMA):
   Cocoa KOYU-ÖNCELİKLİ bir kimliktir; ziyaretçilerin çoğu temayı koyu
   modda görecek. Diğer temalarda customizer köprüsü SADECE açık moda
   bağlanır — Cocoa'da bu, "Ana Renk" kontrolünü temanın ASIL modunda
   ölü bırakırdı. Bu yüzden --c-primary (yalnız o) HER İKİ modda da
   bağlanır. --c-bg / --c-text / --c-secondary ise SADECE açık modda
   bağlanır: koyu modda zemin/metin çiftini customizer'a açmak,
   --t-surface / --t-muted / --t-border sabit koyu kalırken zeminin
   kremleşmesine ve "koyu kart üstünde koyu metin" gibi felaket bir
   kombinasyona yol açar. Bilinçli olarak engellendi.
   --t-gold-text / --t-gold-line / --t-on-* token'ları HER İKİ MODDA
   SABİT ve WCAG-doğrulanmış kalır — arayüzün metin güvenliği asla
   customizer'ın eline bırakılmaz. */
:root,
[data-bs-theme="light"] {
    --t-primary: #2B1B12;          /* kakao mürekkebi — başlık/ink; customizer'a bağlı DEĞİL */
    --t-on-primary: #FAF4EC;
    --t-secondary: var(--c-secondary, #574A3F);   /* ikincil mürekkep — ÖLÇÜLDÜ 7.82:1 krem üstünde ✓ AAA */
    --t-accent: var(--c-primary, #8A5A22);        /* genel amaçlı (dolgu/kenarlık/büyük metin) — customizer'a bağlı */
    /* ★ KÜÇÜK METİN/LİNK ROLÜ — customizer'a BİLİNÇLİ OLARAK BAĞLI DEĞİL.
       KANIT: tek bir customizer rengi Cocoa'da HER İKİ modda AA olamaz.
       Koyu zemin #16100C (L=0.005666) 4.5:1 için L ≥ 0.2005 ister;
       açık zemin #FAF4EC (L=0.910823) 4.5:1 için L ≤ 0.1635 ister.
       İki koşul KESİŞMEZ — böyle bir renk yoktur. Bu yüzden --t-accent
       her iki modda customizer'a bağlı kalır (dolgu/kenarlık/büyük metin
       için 3:1 eşiği yeterli), küçük METİN ise sabit güvenli tona bağlanır.
       Desen uydurma değil: `nova` teması aynı sorunu aynı --t-accent-text
       rolüyle çözüyor (bkz. nova/theme.css:68). */
    --t-accent-text: #8A5A22;                     /* 5.39 krem / 5.89 beyaz ✓ AA */
    --t-accent-hover: #6B4517;                    /* 7.72:1 ✓ */
    --t-accent-soft: rgba(138, 90, 34, .10);
    --t-bg: var(--c-bg, #FAF4EC);                 /* süt kremi */
    --t-surface: #FFFFFF;                          /* kart/panel — krema beyazı */
    --t-surface-2: #F3E9DC;                        /* alternatif bölüm zemini — sütlü kakao */
    --t-surface-glass: #FAF4EC;                    /* cam YOK — düz yüzey (glassmorphism Nova'nın dili) */
    --t-fg: var(--c-text, #2B1B12);               /* ana metin — 15.15:1 ✓ AAA */
    --t-muted: #6B5A4C;            /* ikincil metin — ÖLÇÜLDÜ: 6.02 krem / 6.58 beyaz / 5.48 surface-2 ✓ AA */
    --t-border: var(--t-gold-line);/* YAPISAL hairline = altın çizgi (Cocoa'da kenarlık sistemi altındır) */
    --t-border-soft: #E2D4BF;      /* fısıltı düzeyi ayraç — SADECE dekoratif (liste içi çizgi), bilgi taşımaz */
    --t-border-strong: #2B1B12;    /* belirgin mürekkep ayraç */

    --t-danger: #A8384A;           /* 5.77:1 ✓ — ahududu ailesinden (marka tutarlılığı) */
    --t-success: #2F6B46;          /* 5.80:1 ✓ */
    --t-warning: #7A5A18;          /* 5.82:1 ✓ */

    /* ---- Altın sistemi (üç rol — bkz. dosya başındaki WCAG bloğu) ---- */
    --t-gold: #D9A441;             /* MARKA ALTINI — açık modda 2.06:1: SADECE dekoratif (kafes dokusu) ve SABİT-KOYU zeminli bileşenlerde (hero/footer/CTA/navbar → orada 8.38:1) */
    --t-gold-line: #A8792E;        /* YAPISAL hairline — 3.53 krem / 3.86 beyaz / 3.22 surface-2 ✓ WCAG 1.4.11 */
    --t-gold-text: #8A5A22;        /* KÜÇÜK METİN — 5.39 krem / 5.89 beyaz / 4.91 surface-2 ✓ AA */
    --t-gold-bright: #E9BC6A;      /* "parlak altın" — SADECE sabit-koyu zeminlerde (10.66:1 kakao üstünde) */
    --t-gold-soft: rgba(217, 164, 65, .12);
    /* ★ Altın DOLGU üstündeki metin --t-on-primary KULLANMAZ (o token
       "--t-primary/mürekkep zemini üstünde metin" rolüdür ve koyu modda
       kakao siyahına çözülür → altın zeminle kazara eşleşirse "krem
       metin ham altın üstünde" = 2.25:1 gibi bir hataya yol açar).
       --t-on-gold HER İKİ MODDA SABİT kakao mürekkebi: altın ailesi her
       zaman açık/orta parlaklıkta olduğu için koyu ink her modda okunur
       kalır. ÖLÇÜLEN: 7.36:1. */
    --t-on-gold: #2B1B12;
    --t-gold-btn-hover-bg: #C08F30;  /* buton DOLGUSU hover'ı — ink ile 5.69:1 ✓ (metin-link hover'ı --t-accent-hover ile KARIŞTIRILMAZ) */

    /* ---- Ahududu sistemi — TUTUMLU ikincil vurgu (ürün rozeti, öne
       çıkan plan rozeti, zorunlu alan yıldızı). Başka yerde kullanılmaz;
       çikolata-ahududu eşleşmesi konfeksiyonerin lüks kodudur ve fazlası
       ucuzlatır. */
    --t-accent-2: #A8384A;         /* açık modda metin olarak da güvenli: 5.77 krem / 6.31 beyaz / 5.26 surface-2 ✓ */
    --t-accent-2-text: #A8384A;
    --t-accent-2-fill: #A8384A;    /* metin TAŞIYAN dolgu — her iki modda AYNI (bkz. koyu mod notu) */
    --t-on-accent-2: #FFFFFF;      /* 6.31:1 ✓ */

    --t-font-heading: var(--c-font-heading, 'Bodoni Moda'), 'Didot', Georgia, serif;
    --t-font-body: var(--c-font-body, 'Manrope'), system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* --t-font-mono BİLİNÇLİ OLARAK TANIMLANMADI (bkz. dosya başı notu). */

    /* 8px ritim */
    --t-space-1: 0.5rem;
    --t-space-2: 1rem;
    --t-space-3: 1.5rem;
    --t-space-4: 2rem;
    --t-space-6: 3rem;
    --t-space-8: 4rem;
    --t-space-10: 6rem;

    /* Cocoa = "squircle": çikolata kalıbının yumuşak köşesi. Meridian'ın
       sıfır'ı da Monarch'ın 3px kesilmiş-mücevheri de DEĞİL — 14px.
       --c-radius köprüsü zorunlu (plan §2.4). Türev ölçekler Cocoa'nın
       kendi sabit değerlerinde tutulur; customizer'ın "pill" tercihi
       [data-btn-style="pill"] ile AYRI ve BİLİNÇLİ bir karardır. */
    --t-radius: var(--c-radius, 14px);
    --t-radius-sm: 9px;
    --t-radius-lg: 22px;
    --t-radius-pill: 999px;

    /* Gölge: kakao mürekkebi tonlu, yumuşak ve derin (nötr gri gölge
       sıcak paleti kirletir). Neon/glow YOK — o Nova'nın dilidir. */
    --t-shadow-xs: 0 1px 2px rgba(43, 27, 18, .06);
    --t-shadow-sm: 0 2px 8px rgba(43, 27, 18, .08);
    --t-shadow: 0 6px 20px rgba(43, 27, 18, .10);
    --t-shadow-md: 0 12px 32px rgba(43, 27, 18, .13);
    --t-shadow-lg: 0 22px 54px rgba(43, 27, 18, .16);
    --t-shadow-accent: 0 8px 26px rgba(217, 164, 65, .26);

    /* Gradient token'ları — şablonlar .t-grad-text/gradient kullanırsa
       kırılmasın diye tanımlı; Cocoa'da METİN gradienti YOK (düz altın). */
    --t-gradient-accent: var(--t-gold-text);
    --t-gradient-hero: linear-gradient(180deg, rgba(22,16,12,0) 0%, rgba(22,16,12,.55) 100%);

    /* Geçiş: "eriyen çikolata" — yavaş, akışkan, yumuşak çıkış.
       Meridian'ın mekanik hızının ve Vibrant'ın yaylı zıplamasının
       tersi; Monarch'ın ağırbaşlılığından daha AKIŞKAN. */
    --t-transition: 260ms cubic-bezier(.22, .61, .36, 1);
    --t-transition-slow: 620ms cubic-bezier(.22, .61, .36, 1);

    /* ---- Waffle kafesi (lattice) — mod-duyarlı KABARTMA ----
       Açık modda "ışık üstten gelir" mantığı: tepe çizgisi krema-beyazı
       (hi), gölge çizgisi yanık altın (lo). ★ ALFA DÜŞÜK TUTULUR —
       spec §2.3'ün mutlak kuralı "DOKU, DESEN DEĞİL". Bu değerler
       (.92 beyaz tepe / .17 altın gölge) 1px'lik çizgiler üzerinde
       26px aralıkla dağıldığında ortalama görsel yoğunluk ~%4'tür;
       metnin okunurluğuyla yarışmaz ama yüzeye dokunsal bir kabartma
       hissi verir. Yükseltmek CAZİP ama yanlıştır. */
    --t-lattice-size: 26px;
    --t-lattice-hi: rgba(255, 253, 247, .92);
    --t-lattice-lo: rgba(138, 90, 34, .17);
    --t-lattice-plate: linear-gradient(152deg, #F7ECDB 0%, #E9DAC2 100%);
    --t-lattice-glow: rgba(217, 164, 65, .22);
    --t-lattice-band-bg: var(--t-surface-2);

    /* Navbar yüksekliği — blog sidebar'ının ve iç sayfa yapışkanlarının
       tek referansı. .t-navbar üstünde min-height ile DETERMİNİSTİK
       hale getirilir (bkz. navbar bloğu). */
    --t-navbar-h: 88px;

    /* Bootstrap köprüsü */
    --bs-primary: var(--t-accent);
    --bs-body-bg: var(--t-bg);
    --bs-body-color: var(--t-fg);
    --bs-border-color: var(--t-border);
    --bs-link-color: var(--t-accent-text);
    --bs-link-hover-color: var(--t-accent-hover);
    --bs-emphasis-color: var(--t-primary);
}

/* ---------- Tasarım Token'ları: KOYU MOD — "Bitter" ----------
   Temanın ASIL kimliği (spec §2.1). Kakao siyahı zemin + krem metin +
   karamel altını. Sinematik.

   ★ Koyu modda ham altın (#D9A441) HEM hairline HEM küçük metin için
   GÜVENLİDİR (8.38:1) — açık moddaki "üç ayrı altın tonu" ayrımı burada
   GEREKSİZDİR; --t-gold-text ve --t-gold aynı değere çözülür.
   --t-gold-line ise KASITLI olarak daha SÖNÜK bir altına çözülür: koyu
   zeminde 8.38:1'lik bir hairline "çizgi" değil "ışıklı tel" gibi
   görünür ve kartın içeriğini bastırır. #8A6A32 ÖLÇÜLDÜ: 3.76 zemin /
   3.50 surface / 3.18 surface-2 — WCAG 1.4.11'i geçer AMA gözü yormaz.
   Kontrastı gereğinden fazla yapmak da bir tasarım hatasıdır. */
[data-bs-theme="dark"] {
    --t-primary: #F2E7DA;
    --t-on-primary: #16100C;
    --t-secondary: #D6C5B1;        /* ikincil mürekkep — 11.21:1 ✓ AAA */
    --t-accent: var(--c-primary, #D9A441);  /* customizer HER İKİ modda bağlı (bkz. açık moddaki katmanlama kararı) — varsayılan 8.38:1 ✓ */
    /* Koyu modda küçük metin rolü ham altını GÜVENLE kullanır (8.38:1) —
       açık moddaki kısıt burada yok. Bkz. açık mod bloğundaki kanıt notu. */
    --t-accent-text: #D9A441;      /* 8.38:1 ✓ AAA */
    --t-accent-hover: #E9BC6A;     /* 10.66:1 ✓ */
    --t-accent-soft: rgba(217, 164, 65, .14);
    --t-bg: #16100C;               /* kakao siyahı — Cocoa'nın "ev sahibi" zemini */
    --t-surface: #211711;          /* kart/panel */
    --t-surface-2: #2C1F17;        /* yükseltilmiş / alternatif bölüm zemini */
    --t-surface-glass: #211711;
    --t-fg: #F2E7DA;               /* krem — 15.46:1 ✓ AAA */
    --t-muted: #BCA894;            /* ikincil metin — ÖLÇÜLDÜ: 8.23 zemin / 7.67 surface / 6.97 surface-2 ✓ AAA */
    --t-border: var(--t-gold-line);
    --t-border-soft: #3A2A20;      /* fısıltı ayracı — SADECE dekoratif */
    --t-border-strong: #F2E7DA;

    --t-danger: #F2837A;           /* 7.46:1 ✓ */
    --t-success: #8FCB9F;          /* 10.07:1 ✓ */
    --t-warning: #E6BE72;          /* 10.75:1 ✓ */

    --t-gold: #D9A441;             /* 8.38:1 — koyu modda ham altın her rolde güvenli */
    --t-gold-line: #8A6A32;        /* 3.76 / 3.50 / 3.18 ✓ 1.4.11 — bilinçli olarak SÖNÜK (bkz. blok başı notu) */
    --t-gold-text: #D9A441;        /* 8.38:1 ✓ — koyulaştırmaya gerek YOK */
    --t-gold-bright: #E9BC6A;      /* 10.66:1 */
    --t-gold-soft: rgba(217, 164, 65, .14);
    --t-on-gold: #2B1B12;          /* SABİT — bkz. açık moddaki gerekçe */
    --t-gold-btn-hover-bg: #E9BC6A;  /* koyu modda TABAN zaten --t-gold; hover AYNI değeri tekrarlarsa görsel geri bildirim OLMAZ → parlağa çıkar */

    /* ★ Ahududu koyu modda ROLE AYRILMAK ZORUNDA (ölçüm sonucu):
       ham #C24A5E küçük metin olarak 3.98:1 → AA'yı KAÇIRIR. Metin rolü
       için açılmış #E4737F kullanılır (6.34 zemin / 5.90 surface /
       5.37 surface-2 ✓). Metin TAŞIYAN dolgu ise her iki modda AYNI
       koyu ahududuya (#A8384A + beyaz metin = 6.31:1) sabitlenir —
       koyu modda #C24A5E üstünde ne krem (3.88) ne kakao ink (3.98)
       AA'ya sığıyordu. spec §7 "ahududu kontrastı" riskinin uygulama
       karşılığı budur. */
    --t-accent-2: #C24A5E;         /* DEKORATİF (metinsiz çizgi/nokta) — 3.98:1, METİN DEĞİL */
    --t-accent-2-text: #E4737F;    /* metin-güvenli ahududu */
    --t-accent-2-fill: #A8384A;
    --t-on-accent-2: #FFFFFF;

    /* ★ Gölgeler koyu modda YENİDEN tanımlanır: açık moddaki kakao
       mürekkebi tonlu (.06–.16 alfa) gölgeler kakao-siyahı zeminde
       görünmez olur ve kartlar "yüzeye yapışık" durur. Burada saf
       siyah + belirgin alfa kullanılır; derinlik ipucu korunur.
       (Neon/glow YOK — o Nova'nın dilidir.) */
    --t-shadow-xs: 0 1px 3px rgba(0, 0, 0, .45);
    --t-shadow-sm: 0 3px 10px rgba(0, 0, 0, .50);
    --t-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    --t-shadow-md: 0 14px 38px rgba(0, 0, 0, .60);
    --t-shadow-lg: 0 26px 62px rgba(0, 0, 0, .66);
    --t-shadow-accent: 0 10px 30px rgba(217, 164, 65, .22);

    --t-gradient-accent: var(--t-gold);
    --t-gradient-hero: linear-gradient(180deg, rgba(22,16,12,0) 0%, rgba(22,16,12,.72) 100%);

    /* Kafes koyu modda TERSİNE kabartılır: tepe çizgisi altın ışıltısı,
       gölge çizgisi saf siyah. Aynı geometri, ters ışık. */
    --t-lattice-hi: rgba(217, 164, 65, .16);
    --t-lattice-lo: rgba(0, 0, 0, .34);
    --t-lattice-plate: linear-gradient(152deg, #2E211A 0%, #1A120D 100%);
    --t-lattice-glow: rgba(217, 164, 65, .14);
    --t-lattice-band-bg: var(--t-surface-2);

    --bs-body-bg: var(--t-bg);
    --bs-body-color: var(--t-fg);
    --bs-border-color: var(--t-border);
    --bs-emphasis-color: var(--t-primary);
}

/* ---------- Kafes dokusunun customizer'a uyumu ----------
   spec §2.3: kafes "color-mix() ile hem açık/koyu moda hem customizer'ın
   --c-primary değerine uyum sağlar". color-mix() desteklenmeyen
   tarayıcıda yukarıdaki DÜZ rgba değerleri yürürlükte kalır (bilinçli
   progressive enhancement: doku kaybolmaz, sadece marka rengine
   boyanmaz). Alfa çok düşük olduğu için customizer HANGİ rengi seçerse
   seçsin kontrast riski YOKTUR — doku metin taşımaz. */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    :root,
    [data-bs-theme="light"] {
        --t-lattice-lo: color-mix(in srgb, var(--c-primary, #8A5A22) 17%, transparent);
        --t-lattice-glow: color-mix(in srgb, var(--c-primary, #D9A441) 20%, transparent);
    }
    [data-bs-theme="dark"] {
        --t-lattice-hi: color-mix(in srgb, var(--c-primary, #D9A441) 17%, transparent);
        --t-lattice-glow: color-mix(in srgb, var(--c-primary, #D9A441) 14%, transparent);
    }
}

/* ---------- Kafes katman tanımı (TEK KAYNAK) ----------
   İki yönlü repeating-linear-gradient. Her durak çifti SERT geçişlidir
   (0 1px / 1px 2px / 2px SIZE) — böylece gradient interpolasyonu hiç
   çalışmaz ve "transparent" üzerinden gri saçaklanma oluşmaz.
   `--t-lattice-size` bir alt-bileşende yeniden tanımlandığında (ör. boş
   yer tutucuda 34px) custom property ikamesi O ELEMANDA çözüleceği için
   bu katman otomatik yeniden ölçeklenir — tek tanım, dört kullanım. */
:root {
    --t-lattice-layers:
        repeating-linear-gradient(90deg,
            var(--t-lattice-hi) 0 1px,
            var(--t-lattice-lo) 1px 2px,
            transparent 2px var(--t-lattice-size)),
        repeating-linear-gradient(180deg,
            var(--t-lattice-hi) 0 1px,
            var(--t-lattice-lo) 1px 2px,
            transparent 2px var(--t-lattice-size));
}

/* ============================================================
   TEMEL
   ============================================================ */
* { scroll-behavior: smooth; }

/* 320px GERÇEK ZEMİN (plan §1.4): bu genişlikte yatay taşma OLMAYACAK.
   overflow-x:hidden bir "yara bandı"dır — asıl korumalar tek tek
   yazıldı (min-width:0 grid/flex çocukları, overflow-wrap başlıklar,
   max-width:100% medya). Bu satırlar son güvenlik ağıdır. */
html, body { max-width: 100%; }

body {
    font-family: var(--t-font-body);
    background-color: var(--t-bg);
    color: var(--t-fg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; }

/* ★ BODONI SINIRI (dosya başı notu): h1/h2/h3 ve .t-heading Didone;
   h4/h5/h6 Manrope. Bir Didone'nin saç-inceliğindeki yatay tırnakları
   ~1.4rem altında ekranda kaybolur — özellikle koyu zeminde ters
   kontrastta. Bu bilinçli bir SINIR, eksiklik değil. */
h1, h2, h3,
.t-heading {
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-optical-sizing: auto;   /* Bodoni Moda'nın değişken opsz ekseni: büyük puntoda yüksek kontrastlı Didone kesimi, küçükte daha dayanıklı */
    color: var(--t-primary);
    line-height: 1.1;
    letter-spacing: -0.015em;
    overflow-wrap: break-word;   /* 320px: uzun Türkçe bileşik sözcük taşırmasın */
}
h4, h5, h6 {
    font-family: var(--t-font-body);
    font-weight: 700;
    color: var(--t-primary);
    line-height: 1.35;
    letter-spacing: .005em;
    overflow-wrap: break-word;
}

/* Çıplak link = KÜÇÜK METİN → --t-accent-text (bkz. token bloğundaki kanıt:
   tek customizer rengi iki modda birden AA olamaz). --t-accent değil. */
a { color: var(--t-accent-text); text-decoration: none; transition: color var(--t-transition); }
a:hover { color: var(--t-accent-hover); }

p { overflow-wrap: break-word; }

.t-muted { color: var(--t-muted) !important; }
.t-bg-surface { background-color: var(--t-surface); }
.t-bg-alt { background-color: var(--t-surface-2); }
.text-accent { color: var(--t-accent) !important; }

/* Vurgu metni: gradient YOK (o Nova/Vibrant'ın dili). Bodoni italik +
   metin-güvenli altın. HER İKİ modda --t-gold-text kullanır — ham altın
   açık modda >=24px kalın olsa bile 2.06:1 ile AA-large 3:1'i kaçırır. */
.t-grad-text {
    font-family: var(--t-font-heading);
    font-style: italic;
    font-weight: 500;
    color: var(--t-gold-text);
    -webkit-text-fill-color: currentColor;
    background: none;
}

/* ---------- .t-label — uppercase geniş-aralıklı etiket ----------
   Monarch'ın .t-mono'sunun Cocoa karşılığı. ★ MONOSPACE DEĞİLDİR:
   büyük harf + geniş harf aralığı MANROPE. Mono bir gıda markasında
   "laboratuvar" okur; Cocoa'nın etiket dili premium ambalaj dilidir. */
.t-label {
    font-family: var(--t-font-body);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.45;
}

/* ============================================================
   WAFFLE KAFESİ — dört iş (spec §2.3)
     1) bölüm ayraç bantları     → .t-lattice-band
     2) boş görsel yer tutucusu  → .t-card__media--empty / .t-praline__media--empty
     3) footer üst kenarı        → .t-footer::before
     4) kart hover geçişi        → .t-card::after / .t-praline::after
   .t-lattice serbest kullanım için doku utility'sidir.
   ============================================================ */

/* Serbest doku utility'si — herhangi bir yüzeye kafes dokusu ekler. */
.t-lattice {
    background-image: var(--t-lattice-layers);
}

/* (1) Bölüm ayraç bandı — tam genişlik şerit (sayaç şeridi, güven bandı,
   CTA öncesi nefes alanı). Üst/alt altın hairline + doku birleşince
   "waffle dilimi kenarı" hissi verir. */
.t-lattice-band {
    position: relative;
    background-color: var(--t-lattice-band-bg);
    background-image: var(--t-lattice-layers);
    border-top: 1px solid var(--t-gold-line);
    border-bottom: 1px solid var(--t-gold-line);
}
.t-lattice-band > * { position: relative; z-index: 1; }

/* Kafes ayracı — ince yatay "waffle kenarı" çizgisi; .t-rule'un dokulu
   kardeşi. ★ Sabit yükseklikli, taşmayan şerit (yatay kaydırma YOK). */
.t-lattice-rule {
    border: 0;
    height: 10px;
    margin: 0;
    opacity: 1;
    background-color: transparent;
    background-image:
        repeating-linear-gradient(90deg,
            var(--t-lattice-hi) 0 1px,
            var(--t-lattice-lo) 1px 2px,
            transparent 2px 10px),
        linear-gradient(180deg, transparent 0 4px, var(--t-gold-line) 4px 5px, transparent 5px 10px);
}

/* ---------- İnce altın cetvel çizgisi (bölüm ayraçları) ---------- */
.t-rule {
    border: 0;
    height: 1px;
    background: var(--t-gold-line);
    margin: 0;
    opacity: 1;
}
.t-rule--light { background: var(--t-border-soft); }
.t-rule--center {
    width: 4.5rem;
    height: 1px;
    background: var(--t-gold-line);
    margin-inline: auto;
}

/* ---------- Bölüm ritmi ---------- */
.t-section { padding-block: clamp(3.5rem, 7vw, var(--t-space-10)); position: relative; }
.t-section--ruled { border-top: 1px solid var(--t-gold-line); }
.t-section-title { margin-bottom: var(--t-space-6); }
.t-section-title.text-center { text-align: center; }
.t-section-title h2 {
    /* 320px tabanı: 1.95rem = 31px — Bodoni bu puntoda okunur ve
       ~288px'lik içerik genişliğinde (overflow-wrap ile) taşmaz. */
    font-size: clamp(1.95rem, 4.4vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}
.t-section-title p {
    color: var(--t-muted);
    max-width: 58ch;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-top: .9rem;
    margin-bottom: 0;
}
.t-section-title.text-center p { margin-inline: auto; }

/* ---------- Bölüm üstü etiket (eyebrow) ----------
   Manrope uppercase + geniş aralık + kısa altın çizgi. Metin HER ZAMAN
   --t-gold-text (açık modda ham altın 2.06:1 ile okunmaz). */
.t-eyebrow {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    font-family: var(--t-font-body);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--t-gold-text);
    margin-bottom: 1.1rem;
}
.t-eyebrow::before {
    content: "";
    width: 2.5rem; height: 1px;
    background: var(--t-gold-line);
}
/* Sola dayalı bağlamlar (liste/panel başlıkları) */
.t-eyebrow--inline {
    flex-direction: row;
    gap: .65rem;
    margin-bottom: .65rem;
}
.t-eyebrow--inline::before { width: 1.6rem; }

/* ---------- Erişilebilir odak halkası ----------
   Her iki modda görünür ve kontrastlı: açık modda #8A5A22 (5.39:1),
   koyu modda #D9A441 (8.38:1). offset ile squircle kenardan ayrışır. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.t-card:focus-visible,
.t-praline:focus-visible {
    outline: 2px solid var(--t-gold-text);
    outline-offset: 3px;
    border-radius: var(--t-radius-sm);
}

/* ---------- Scroll Reveal (progressive enhancement) ----------
   ★ KRİTİK (plan §1.2): gizleme MUTLAKA `.js` ile koşullanır. `js`
   sınıfı <head>'deki SENKRON script'te <html>'e eklenir. JS çalışmazsa
   hiçbir içerik görünmez kalmaz. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--t-transition-slow), transform var(--t-transition-slow);
    will-change: opacity, transform;
}
.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
/* ============================================================
   NAVBAR
   Varsayılan durum: MOD-DUYARLI DOLU zemin + altın hairline alt kenar.
   ★ JS YOKSA DA DOLU (plan: progressive enhancement) — çünkü saydamlık
   `.js` sınıfına koşullanmıştır ve `js` sınıfı yalnızca JS çalışırsa
   <html>'e eklenir.

   Hero üstünde saydamlık, SADECE sayfada gerçekten yapışkan-bölünmüş
   hero varsa (`body:has(.t-hero-split)`) devreye girer — böylece iç
   sayfalarda kazara saydam/okunmaz bir navbar oluşmaz.

   ★ position:absolute KARARI: navbar Bootstrap'te `.sticky-top` ile
   AKIŞ İÇİNDEDİR; akışta kalırsa "saydam" olduğunda hero'yu değil
   SAYFA ZEMİNİNİ gösterir (açık modda krem bir şerit). Klasik çözüm
   hero'ya negatif margin vermektir ama bu, navbar yüksekliğinin logo
   boyutuna göre değişmesi yüzünden kırılgandır (yanlış tahminde
   hero'nun üstünde birkaç piksellik krem şerit kalır). Bunun yerine
   navbar bu tek durumda AKIŞTAN ÇIKARILIR (absolute) — hiçbir yükseklik
   hesabı gerekmez, hero doğal olarak y=0'dan başlar. `.is-stuck` (JS
   ekler) geldiğinde `fixed`e döner: akıştan zaten çıkmış olduğu için
   sıçrama/layout shift OLMAZ.
   ============================================================ */
.t-navbar {
    --t-nav-bg: var(--t-bg);
    --t-nav-fg: var(--t-primary);
    --t-nav-link: var(--t-secondary);
    --t-nav-accent: var(--t-gold-text);
    --t-nav-line: var(--t-gold-line);

    min-height: 72px;
    align-items: center;
    background-color: var(--t-nav-bg);
    border-bottom: 1px solid var(--t-nav-line);
    padding-block: .3rem;
    transition: background-color var(--t-transition), border-color var(--t-transition), box-shadow var(--t-transition);
}
.t-navbar.is-scrolled,
.t-navbar.is-stuck { box-shadow: var(--t-shadow-sm); }

.t-navbar .navbar-brand {
    font-family: var(--t-font-heading);
    font-weight: 600;
    color: var(--t-nav-fg);
    font-size: clamp(1.25rem, 3.2vw, 1.6rem);
    letter-spacing: -0.015em;
    padding-block: .55rem;
    margin: 0;
    min-width: 0;
}
.t-navbar .nav-link {
    color: var(--t-nav-link);
    font-family: var(--t-font-body);   /* ★ navigasyon ASLA Bodoni değil */
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .9rem var(--t-space-2) !important;   /* dokunma hedefi >=44px */
    min-height: 44px;
    display: flex;
    align-items: center;
    position: relative;
    transition: color var(--t-transition);
}
/* Alt çizgi: ORTADAN büyüyen ince altın.
   ★ scaleX + transform-origin:center kullanılır (left/right ofset
   animasyonu DEĞİL): transform yön-bağımsızdır, RTL'de ek override
   gerektirmez ve compositor'da çalıştığı için layout tetiklemez. */
.t-navbar .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: var(--t-space-2);
    bottom: .5rem;
    height: 1px;
    background: var(--t-nav-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t-transition);
}
.t-navbar .nav-link:hover { color: var(--t-nav-accent); }
.t-navbar .nav-link:hover::after,
.t-navbar .nav-link.active::after { transform: scaleX(1); }
.t-navbar .nav-link.active { color: var(--t-nav-accent); font-weight: 700; }

/* Mobil açılır menü: navbar saydamken hero görselinin üstüne düşmesin
   diye kendi DOLU zemini olur (aksi halde metin fotoğrafla yarışır). */
@media (max-width: 991.98px) {
    .t-navbar .navbar-collapse.show,
    .t-navbar .navbar-collapse.collapsing {
        background: var(--t-nav-bg);
        border-radius: var(--t-radius);
        margin-top: .5rem;
        padding: .5rem .25rem;
        border: 1px solid var(--t-nav-line);
    }
}

/* ---------- Navbar: hero üstü saydam durum ----------
   `@supports selector(:has(*))` kapısı: :has() desteklemeyen tarayıcı
   bloğun TAMAMINI atlar → navbar her zaman dolu/okunur kalır (kabul
   edilebilir düşüş). `.js` kapısı: JS yoksa da dolu kalır.

   ★ "Saydam" burada SAF transparent DEĞİL, üstten aşağı SÖNEN bir kakao
   scrim'idir. Gerekçe ölçülebilir: saf saydamda navbar metni hero
   fotoğrafının rastgele bir bölgesine düşer ve kontrast garanti
   edilemez. .82 alfalı kakao scrim, en kötü durumda (bembeyaz fotoğraf
   pikseli) altındaki rengi ~#494540'a çeker; krem navbar metni orada
   hâlâ ~6:1 okur. Kimlik korunur, erişilebilirlik garanti altına alınır. */
@supports selector(:has(*)) {
    .js body:has(.t-hero-split) .t-navbar {
        position: absolute;
        inset-inline: 0;
        top: 0;
        z-index: 1030;
        background-color: transparent;
        background-image: linear-gradient(180deg, rgba(22,16,12,.82) 0%, rgba(22,16,12,.38) 58%, rgba(22,16,12,0) 100%);
        border-bottom-color: transparent;
        box-shadow: none;

        --t-nav-bg: #16100C;          /* mobil açılır menünün dolu zemini */
        --t-nav-fg: #F7EFE4;
        --t-nav-link: #E4D8C8;
        --t-nav-accent: #D9A441;      /* sabit kakao üstünde 8.38:1 ✓ */
        --t-nav-line: rgba(217, 164, 65, .45);
    }
    /* Kaydırınca: DOLU kakao + altın hairline (JS `.is-stuck` ekler) */
    .js body:has(.t-hero-split) .t-navbar.is-stuck {
        position: fixed;
        background-color: #16100C;
        background-image: none;
        border-bottom-color: var(--t-gold);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
    }
}

/* ---------- İkon butonları (arama / dil / mod) ----------
   Dokunma hedefi >=44px (plan §1.4). */
.t-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--t-radius-sm);
    background: transparent;
    color: var(--t-nav-fg, var(--t-primary));
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
    cursor: pointer;
}
.t-iconbtn:hover {
    border-color: var(--t-nav-accent, var(--t-gold-line));
    color: var(--t-nav-accent, var(--t-gold-text));
    background: var(--t-gold-soft);
}
.t-iconbtn:active { transform: none; }

/* ============================================================
   BUTONLAR
   Squircle köşe, Manrope uppercase geniş-aralık etiket, dolgu-altın
   veya altın-çerçeve. Hover'da "eriyen karamel" tonu — yükselme/gölge
   patlaması YOK (o Vibrant'ın dili).
   ★ Dokunma hedefi: tüm .btn min-height 48px, .btn-sm 44px.
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 48px;
    border-radius: var(--t-radius);
    font-family: var(--t-font-body);   /* ★ buton ASLA Bodoni değil */
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition), box-shadow var(--t-transition);
}
.btn-sm { min-height: 44px; }

.btn-accent {
    background: var(--t-gold);
    color: var(--t-on-gold);            /* ÖLÇÜLEN 7.36:1 ✓ — --t-on-primary DEĞİL (bkz. token notu) */
    border: 1px solid var(--t-gold-btn-hover-bg);
    padding: .85rem 1.9rem;
    box-shadow: var(--t-shadow-sm);
}
.btn-accent:hover {
    background: var(--t-gold-btn-hover-bg);
    border-color: var(--t-gold-btn-hover-bg);
    color: var(--t-on-gold);            /* açık modda 5.69:1 / koyu modda 9.36:1 ✓ */
    transform: none;
    box-shadow: var(--t-shadow-accent);
}
.btn-accent:active { transform: none; }
.btn-accent.btn-lg { padding: 1rem 2.4rem; font-size: .84rem; min-height: 54px; }

.btn-outline-accent {
    background: transparent;
    color: var(--t-gold-text);          /* açık modda #8A5A22 (5.39:1) — ham altın ASLA */
    border: 1px solid var(--t-gold-line);
    padding: .85rem 1.9rem;
}
.btn-outline-accent:hover {
    background: var(--t-gold);
    color: var(--t-on-gold);
    border-color: var(--t-gold);
    transform: none;
    box-shadow: none;
}
.btn-outline-accent.btn-lg { padding: 1rem 2.4rem; font-size: .84rem; min-height: 54px; }

.btn-sm.btn-outline-accent,
.btn-sm.btn-accent { padding: .55rem 1.15rem; font-size: .72rem; }

/* ---------- FAZ-B buton stili (customizer_button_style) ----------
   `data-btn-style="solid|outline|pill"` — sunucu tarafında <body>'ye
   basılır. "solid" (varsayılan): altın dolgu aynen. "outline": ana CTA
   çerçeveli metne döner. "pill": köşe tam yuvarlanır — Cocoa'nın
   squircle kimliğini çiğner ama customizer'ın AMACI budur (site
   sahibinin açık tercihi, otomatik davranış DEĞİL). */
[data-btn-style="outline"] .btn-accent {
    background: transparent;
    color: var(--t-gold-text);
    border-color: var(--t-gold-line);
    box-shadow: none;
}
[data-btn-style="outline"] .btn-accent:hover {
    background: var(--t-gold);
    color: var(--t-on-gold);
    border-color: var(--t-gold);
}
[data-btn-style="pill"] .btn-accent,
[data-btn-style="pill"] .btn-outline-accent,
[data-btn-style="pill"] .btn { border-radius: var(--t-radius-pill); }

/* ============================================================
   HERO — iç sayfalar (project/show, page header görselli vb.)
   Sabit kakao zemin (mod-bağımsız): koyu-zeminli açık-metinli
   bileşenlerin zemini SABİT koyu renge bağlanır, mod-aware token'a
   DEĞİL — yoksa koyu modda "beyaz üstüne beyaz" olur.
   ★ Yükseklikler HER YERDE `svh` birimindedir; `vh` birimi bu dosyada
   hiç kullanılmaz (iOS adres çubuğu daralıp genişlerken yaşanan zıplama
   baştan engellenir).
   ============================================================ */
.t-hero {
    position: relative;
    min-height: clamp(320px, 46svh, 540px);
    display: flex;
    align-items: flex-end;
    color: #F2E7DA;
    background: #16100C;
    overflow: hidden;
    border-bottom: 1px solid var(--t-gold);
}
.t-hero__media { position: absolute; inset: 0; }
.t-hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    filter: saturate(.88) brightness(.66);
}
.t-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22,16,12,.30) 0%, rgba(22,16,12,.62) 58%, rgba(22,16,12,.92) 100%);
}
.t-hero__content {
    position: relative; z-index: 2;
    width: 100%;
    max-width: 52rem;
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
    padding-inline: 0;
}
.t-hero__content h1 {
    color: #F7EFE4;
    font-family: var(--t-font-heading);
    font-size: clamp(2.1rem, 5.4vw, 3.9rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0;
}
.t-hero__content p {
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    color: #C9B7A4;                 /* sabit kakao üstünde 9.69:1 ✓ */
    max-width: 48ch;
    line-height: 1.75;
    margin-top: .9rem;
    margin-bottom: 0;
}
.t-hero__content .btn-outline-accent {
    color: #F7EFE4;
    border-color: rgba(247, 239, 228, .48);
}
.t-hero__content .btn-outline-accent:hover {
    background: #F7EFE4;
    color: #16100C;
    border-color: #F7EFE4;
}

/* Carousel kontrolleri (görselli iç sayfa hero fallback'i için kalır) */
.t-hero-carousel .carousel-control-prev,
.t-hero-carousel .carousel-control-next { width: 8%; z-index: 3; min-width: 44px; }
.t-hero-carousel .carousel-indicators { z-index: 3; margin-bottom: 1.25rem; }
.t-hero-carousel .carousel-indicators [data-bs-target] {
    width: 28px; height: 3px; border-radius: 2px;
    background: rgba(247, 239, 228, .42); border: none;
}
.t-hero-carousel .carousel-indicators .active { background: var(--t-gold); }

/* ============================================================
   ★ .t-hero-split — YAPIŞKAN BÖLÜNMÜŞ KAYDIRMA (Cocoa'nın imzası)
   Sol sütun yapışkan durur (marka anlatısı), sağ sütunun slaytları
   altından akar. Saf CSS `position: sticky` — JS yalnızca slayt
   sayacını günceller; JS yoksa sayaç gizlenir, hero ÇALIŞMAYA DEVAM
   EDER (progressive enhancement).

   ★★ MOBİLDE STICKY TAMAMEN BIRAKILIR (<992px). Telefonda yapışkan
   kaydırma bilinen bir kullanılabilirlik tuzağıdır: küçük ekranda
   yapışkan sütun görünür alanın yarısını yer, kaydırma "takılıyor"
   hissi verir ve iOS'ta adres çubuğu daralıp genişledikçe sıçrar.
   Kimlik uğruna mobil FEDA EDİLMEZ — slaytlar üst üste yığılır, her
   biri kendi metin bindirmesini (caption) taşır.

   ★ Zemin SABİT kakao (#16100C), mod-aware token DEĞİL — hero
   koyu-zeminli/açık-metinli bir bileşendir.
   ============================================================ */
.t-hero-split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: #16100C;
    color: #F2E7DA;
    /* Izgara mantıksal akışa bırakıldı → RTL'de sütun sırası
       kendiliğinden yansır (fiziksel left/right kuralı YOK). */
}
.t-hero-split__sticky {
    position: relative;
    z-index: 2;
    min-width: 0;                   /* 320px taşma koruması */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    background: #16100C;
    padding: clamp(2.75rem, 9vw, 4.5rem) clamp(1.15rem, 5vw, 4.25rem) clamp(2.75rem, 8vw, 4rem);
}
.t-hero-split__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--t-font-body);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #D9A441;                 /* sabit kakao üstünde 8.38:1 ✓ */
    margin: 0;
}
.t-hero-split__eyebrow::before {
    content: "";
    width: 2.25rem; height: 1px;
    background: rgba(217, 164, 65, .72);
    flex-shrink: 0;
}
.t-hero-split__title {
    font-family: var(--t-font-heading);
    color: #F7EFE4;
    /* ★ 320px tabanı 2.2rem (35px): Bodoni bu puntoda okunur ve
       ~290px'lik içerik genişliğinde en uzun Türkçe bileşik sözcük
       bile (overflow-wrap yedeğiyle) taşmaz. */
    font-size: clamp(2.2rem, 6.2vw, 5rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.028em;
    margin: 0;
    overflow-wrap: break-word;
}
.t-hero-split__title em {
    font-style: italic;
    font-weight: 500;
    color: #D9A441;
}
.t-hero-split__lede {
    color: #C9B7A4;                 /* 9.69:1 ✓ */
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.78;
    max-width: 44ch;
    margin: 0;
}
.t-hero-split__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    margin-top: .5rem;
}
.t-hero-split .btn-outline-accent {
    color: #F7EFE4;
    border-color: rgba(247, 239, 228, .45);
}
.t-hero-split .btn-outline-accent:hover {
    background: #F7EFE4;
    color: #16100C;
    border-color: #F7EFE4;
}
/* İnce slayt sayacı — JS'in IntersectionObserver'ı günceller.
   ★ JS yoksa GİZLİ (spec §2.3): sayaç güncellenmezse yanlış bilgi
   verir; yokluğu hero'yu bozmaz. */
.t-hero-split__counter { display: none; }
.js .t-hero-split__counter {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-top: var(--t-space-3);
    font-family: var(--t-font-body);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #D9A441;
    font-variant-numeric: tabular-nums;
}
.js .t-hero-split__counter::after {
    content: "";
    width: 3.25rem;
    height: 1px;
    background: rgba(217, 164, 65, .45);
}

.t-hero-split__track { position: relative; min-width: 0; }
.t-hero-split__slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #1A120D;
    min-height: 62svh;              /* ★ `svh` birimi — `vh`/`dvh` DEĞİL */
}
.t-hero-split__slide + .t-hero-split__slide {
    border-top: 1px solid rgba(217, 164, 65, .22);
}
.t-hero-split__media { position: absolute; inset: 0; }
.t-hero-split__media img {
    width: 100%; height: 100%;
    object-fit: cover;              /* intrinsic width/height + object-fit → CLS yok */
    display: block;
}
/* Kakao scrim: üstte navbar okunurluğu, altta caption okunurluğu.
   Yatay bileşen (90deg) sol sütuna yumuşak geçiş sağlar — RTL'de
   [dir="rtl"] bloğunda yönü çevrilir. */
.t-hero-split__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(22,16,12,.72) 0%, rgba(22,16,12,.16) 26%, rgba(22,16,12,.34) 58%, rgba(22,16,12,.93) 100%),
        linear-gradient(90deg, rgba(22,16,12,.60) 0%, rgba(22,16,12,0) 44%);
}
.t-hero-split__caption {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: clamp(1.35rem, 5vw, 2.75rem);
}
.t-hero-split__caption .t-label,
.t-hero-split__caption > span:first-child {
    color: #D9A441;
}
.t-hero-split__caption h2,
.t-hero-split__caption h3,
.t-hero-split__caption .t-heading {
    color: #F7EFE4;
    font-family: var(--t-font-heading);
    font-size: clamp(1.55rem, 3.6vw, 2.35rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}
.t-hero-split__caption p {
    color: #D5C6B6;                 /* sabit kakao/scrim üstünde >=10:1 ✓ */
    font-size: .98rem;
    line-height: 1.7;
    max-width: 46ch;
    margin: 0;
}

/* ---- Masaüstü: yapışkan bölünmüş kaydırma DEVREDE ---- */
@media (min-width: 992px) {
    .t-hero-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
    .t-hero-split__sticky {
        position: sticky;
        top: 0;
        height: 100svh;             /* ★ `svh` birimi — `vh` ASLA */
        /* Navbar akışta kaldığı senaryoda (JS yok / :has yok) yapışkan
           sütunun metni navbar'ın ALTINDA kalmalı; navbar akıştan
           çıktığında da (saydam hero durumu) aynı boşluk metni
           navbar'dan uzak tutar. Tek değer iki senaryoyu da çözer. */
        padding-top: calc(var(--t-navbar-h) + 1.25rem);
        padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
        border-inline-end: 1px solid rgba(217, 164, 65, .26);
    }
    .t-hero-split__slide { min-height: 100svh; }
    .t-hero-split__slide + .t-hero-split__slide { border-top: 0; }
}

/* ---- <992px: STICKY TAMAMEN BIRAKILIR (spec §2.3 / plan §1.4) ---- */
@media (max-width: 991.98px) {
    .t-hero-split { display: block; }
    .t-hero-split__sticky {
        position: static;           /* ★ yapışkanlık YOK */
        height: auto;
        top: auto;
    }
    .js .t-hero-split__counter { display: none; }  /* yapışkan sütun yoksa sayaç anlamsız */
}
@media (max-width: 575.98px) {
    .t-hero-split__actions { flex-direction: column; align-items: stretch; }
    .t-hero-split__actions .btn { width: 100%; }
    .t-hero-split__slide { min-height: 56svh; }
}
/* ============================================================
   KART (card makrosu) — 4:3 genel amaçlı kart
   Squircle köşe + altın hairline + kakao gölge. Hover'da kafes dokusu
   yavaşça belirir (KAFESİN DÖRDÜNCÜ İŞİ) + görsel hafifçe yakınlaşır.
   ============================================================ */
.t-card {
    position: relative;
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    overflow: hidden;
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--t-shadow-xs);
    transition: border-color var(--t-transition), box-shadow var(--t-transition), transform var(--t-transition);
}
.t-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-md);
    border-color: var(--t-gold);
}
/* (4) Kafes hover geçişi — dokunun dördüncü işi. */
.t-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background-image: var(--t-lattice-layers);
    transition: opacity var(--t-transition-slow);
}
.t-card:hover::after { opacity: 1; }

.t-card__media {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 3;
    background: var(--t-surface-2);
    overflow: hidden;
    border-bottom: 1px solid var(--t-gold-line);
}
.t-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-transition-slow);
}
.t-card:hover .t-card__media img { transform: scale(1.05); }
.t-card__body {
    position: relative;
    z-index: 1;
    padding: var(--t-space-3);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
    min-width: 0;
}
/* ★ Kart başlığı MANROPE'tur — Bodoni değil. Kart başlıkları 1.1–1.4rem
   aralığında yaşar; Didone'nin saç tırnakları bu puntoda kaybolur
   (dosya başındaki "Bodoni sınırı" kuralı). */
.t-card__title {
    font-family: var(--t-font-body);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--t-primary);
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin: 0;
    transition: color var(--t-transition);
}
.t-card:hover .t-card__title { color: var(--t-gold-text); }
.t-card__text {
    color: var(--t-muted);
    font-size: .94rem;
    line-height: 1.7;
    flex: 1;
    margin: 0;
}
.t-card__more {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--t-gold-text);
    font-family: var(--t-font-body);
    font-weight: 700; font-size: .74rem;
    letter-spacing: .14em; text-transform: uppercase;
    margin-top: .35rem;
    min-height: 24px;
}
.t-card__more i { transition: transform var(--t-transition); }
.t-card:hover .t-card__more i { transform: translateX(4px); }

.t-card.p-4, .t-card.p-md-5 { transition: border-color var(--t-transition), box-shadow var(--t-transition); }

/* ============================================================
   ★ .t-praline — 4:5 DİKEY ÜRÜN KARTI (Cocoa'nın ikinci imzası)
   Diğer TÜM temalar 4:3 kullanıyor; gıda fotoğrafı DİKEY okunur.
   aspect-ratio + object-fit:cover → görsel gelsin gelmesin CLS YOK.
   Hover: yavaş karamel gradient geçişi + görsel yakınlaşma + kafes.
   Izgara: <480px 1 sütun, >=480px 2, >=992px 3 (aşağıdaki köprüye bkz.)
   ============================================================ */
.t-praline {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    overflow: hidden;
    box-shadow: var(--t-shadow-xs);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-transition), box-shadow var(--t-transition), transform var(--t-transition);
}
.t-praline:hover,
.t-praline:focus-visible {
    color: inherit;
    transform: translateY(-4px);
    border-color: var(--t-gold);
    box-shadow: var(--t-shadow-md);
}
/* Kafes hover geçişi (kart gövdesi üzerinde) */
.t-praline::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background-image: var(--t-lattice-layers);
    transition: opacity var(--t-transition-slow);
}
.t-praline:hover::after { opacity: 1; }

.t-praline__media {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;            /* ★ DİKEY — Cocoa'nın ayrışma öğesi */
    overflow: hidden;
    background: var(--t-surface-2);
    border-bottom: 1px solid var(--t-gold-line);
}
.t-praline__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-transition-slow);
}
.t-praline:hover .t-praline__media img { transform: scale(1.06); }
/* Yavaş karamel gradient geçişi — çikolatanın üstünden akan karamel.
   ★ :not(--empty) ile sınırlandırıldı: boş yer tutucu KENDİ ::after'ını
   (taban vignette'i) kullanır; iki kural aynı sözde-elemanı paylaşırsa
   `opacity:0` sızar ve yer tutucunun vignette'i görünmez olur. */
.t-praline__media:not(.t-praline__media--empty)::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(155deg,
        rgba(217, 164, 65, .40) 0%,
        rgba(194, 74, 94, .18) 46%,
        rgba(22, 16, 12, .12) 100%);
    transition: opacity var(--t-transition-slow);
}
.t-praline:hover .t-praline__media:not(.t-praline__media--empty)::after { opacity: 1; }

.t-praline__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
    min-width: 0;
    padding: var(--t-space-3);
}
/* Ürün rozeti — AHUDUDU'nun asıl işi (tutumlu ikincil vurgu).
   Dolgu + beyaz metin = 6.31:1 ✓ (her iki modda AYNI dolgu tonu). */
.t-praline__badge {
    align-self: flex-start;
    display: inline-block;
    background: var(--t-accent-2-fill);
    color: var(--t-on-accent-2);
    font-family: var(--t-font-body);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: var(--t-radius-pill);
    max-width: 100%;
    overflow-wrap: break-word;
}
.t-praline__title {
    font-family: var(--t-font-body);   /* ★ Bodoni sınırı — bkz. .t-card__title notu */
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--t-primary);
    line-height: 1.3;
    letter-spacing: -0.005em;
    margin: 0;
    transition: color var(--t-transition);
}
.t-praline:hover .t-praline__title { color: var(--t-gold-text); }
.t-praline__text {
    color: var(--t-muted);
    font-size: .92rem;
    line-height: 1.68;
    flex: 1;
    margin: 0;
}
.t-praline__more {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--t-gold-text);
    font-family: var(--t-font-body);
    font-weight: 700; font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase;
    margin-top: .3rem;
    min-height: 24px;
}
.t-praline__more i { transition: transform var(--t-transition); }
.t-praline:hover .t-praline__more i { transform: translateX(4px); }

/* ---------- 480px "phablet" ara kırılımı ----------
   Praline 4:5 DİKEY olduğu için 480px'te iki sütun rahat sığar —
   Bootstrap'in sm(576px) eşiği bu tema için geç kalıyor. Yalnızca
   praline taşıyan .row-cols-1 satırlarında ve YALNIZCA bu aralıkta
   devreye girer; :has() desteklenmeyen tarayıcıda Bootstrap'in kendi
   davranışı (576px'te iki sütun) geçerli kalır — kusursuz düşüş. */
@media (min-width: 480px) and (max-width: 575.98px) {
    .row-cols-1:has(> * > .t-praline) > *,
    .row-cols-1:has(> * .t-praline) > * { flex: 0 0 auto; width: 50%; }
}

/* ============================================================
   ★ BOŞ GÖRSEL YER TUTUCUSU — KAFESİN İKİNCİ (VE EN ÖNEMLİ) İŞİ
   Waffle demo setinde fotoğraf OLMAYACAK; sitenin kartlarının ÇOĞU bu
   durumda görünecek. Bu yüzden burası "gri ikon kutusu" değil, KASITLI
   ve MARKALI bir yüzeydir: kabartmalı kakao kafesi + üst-soldan gelen
   sıcak ışık + iç altın hairline çerçeve + tabandan yükselen hafif
   vignette. Fotoğraf gelince aynı kutuya oturur, kod değişmez.
   ★ aspect-ratio ebeveynden gelir (4:3 kart / 4:5 praline) → CLS YOK.
   ============================================================ */
.t-card__media--empty,
.t-praline__media--empty {
    --t-lattice-size: 34px;         /* yer tutucuda kafes daha iri: doku burada ÖZNE, arka plan değil */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-gold-text);
    background-color: transparent;
    background-image:
        var(--t-lattice-layers),
        radial-gradient(128% 96% at 24% 12%, var(--t-lattice-glow) 0%, transparent 62%),
        var(--t-lattice-plate);
}
/* İç altın hairline çerçeve — "kasıtlı" hissinin taşıyıcısı */
.t-card__media--empty::before,
.t-praline__media--empty::before {
    content: "";
    position: absolute;
    inset: clamp(.6rem, 4.5%, 1.15rem);
    border: 1px solid var(--t-gold-line);
    border-radius: max(4px, calc(var(--t-radius) - 8px));
    opacity: .8;
    pointer-events: none;
}
/* Tabandan yükselen çok hafif vignette — kalıptan çıkmış çikolata hissi */
.t-card__media--empty::after,
.t-praline__media--empty::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 1;                     /* açıkça yazıldı — bkz. karamel geçişi notu */
    pointer-events: none;
    background: radial-gradient(125% 100% at 50% 118%, rgba(0, 0, 0, .26) 0%, transparent 58%);
}
.t-card__media--empty > *,
.t-praline__media--empty > * { position: relative; z-index: 1; }
.t-card__media--empty i,
.t-praline__media--empty i {
    position: relative;
    z-index: 1;
    font-size: clamp(1.5rem, 5vw, 2.15rem);
    color: var(--t-gold-text);
}

/* ============================================================
   ★ .t-stagger — KAYDIRILMIŞ İKİLİ IZGARA (featuredProjects)
   Sağ sütun aşağı ötelenir; simetrik ızgaranın (monarch) ve yatay
   şeridin (atelier) ikisinden de ayrışan sakin bir ritim.
   Mobilde tek sütuna düzleşir, öteleme SIFIRLANIR.
   ============================================================ */
.t-stagger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}
.t-stagger__item { min-width: 0; }
/* nth-child mantıksal ızgara sırasını izler → RTL'de de "ikinci sütun"
   ötelenir (fiziksel yön kuralı YOK). */
.t-stagger__item:nth-child(even) { margin-top: clamp(2.25rem, 8vw, 6.5rem); }
@media (max-width: 767.98px) {
    .t-stagger { grid-template-columns: minmax(0, 1fr); }
    .t-stagger__item:nth-child(even) { margin-top: 0; }
}

/* ============================================================
   ★ .t-quote-feature — TEK BÜYÜK BODONI İTALİK ALINTI
   testimonials bölümünün Cocoa biçimi: ızgara dolusu kart yerine TEK
   büyük söz. Kakao yüzey + altın hairline + dev italik Didone.
   ============================================================ */
.t-quote-feature {
    position: relative;
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    padding: clamp(2rem, 6vw, 4.25rem) clamp(1.35rem, 5vw, 4rem);
    text-align: center;
    box-shadow: var(--t-shadow-xs);
    overflow: hidden;
}
/* Dekoratif dev tırnak — DEKORATİF (aria-hidden değeri taşımaz),
   bu yüzden düşük opaklık WCAG açısından sorun değil. */
.t-quote-feature::before {
    content: "\201C";
    position: absolute;
    top: -.35em;
    inset-inline-start: .12em;
    font-family: var(--t-font-heading);
    font-size: clamp(7rem, 18vw, 13rem);
    line-height: 1;
    color: var(--t-gold);
    opacity: .16;
    pointer-events: none;
}
.t-quote-feature > * { position: relative; z-index: 1; }
.t-quote-feature__text {
    font-family: var(--t-font-heading);
    font-style: italic;
    font-weight: 500;
    /* >=1.35rem taban → Bodoni sınırının üstünde kalır */
    font-size: clamp(1.35rem, 3.6vw, 2.4rem);
    line-height: 1.4;
    letter-spacing: -0.015em;
    color: var(--t-fg);
    max-width: 34ch;
    margin: 0 auto;
    overflow-wrap: break-word;
}
.t-quote-feature__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin-top: var(--t-space-4);
}
.t-quote-feature__author img {
    width: 60px; height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--t-gold-line);
    margin-bottom: .3rem;
}
.t-quote-feature__author strong,
.t-quote-feature__author .t-quote__name {
    font-family: var(--t-font-body);
    font-weight: 700;
    color: var(--t-primary);
}
.t-quote-feature__author span,
.t-quote-feature__author .t-quote__role {
    font-family: var(--t-font-body);
    color: var(--t-muted);
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ============================================================
   .t-panel — genel çerçeveli panel (Monarch'ın .t-framed-panel'inin
   Cocoa karşılığı). Form / boş durum / bilgi paneli gibi TÜM ikincil
   yüzeyler bunu kullanır; çıplak inline `border:1px solid ...` DEĞİL.
   ============================================================ */
.t-panel {
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-xs);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    min-width: 0;
}

/* ---------- Roster satırı (career/index — taranabilir ilan listesi) ---------- */
.t-roster-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--t-space-2);
    min-height: 44px;
    padding: var(--t-space-3);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    background: var(--t-surface);
    color: var(--t-fg);
    box-shadow: var(--t-shadow-xs);
    transition: border-color var(--t-transition), box-shadow var(--t-transition), transform var(--t-transition);
}
.t-roster-row:hover {
    border-color: var(--t-gold);
    box-shadow: var(--t-shadow);
    transform: translateY(-2px);
    color: var(--t-fg);
}
.t-roster-row__title {
    font-family: var(--t-font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--t-primary);
    letter-spacing: -0.005em;
    transition: color var(--t-transition);
    min-width: 0;
    overflow-wrap: break-word;
}
.t-roster-row:hover .t-roster-row__title { color: var(--t-gold-text); }
.t-roster-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--t-space-2);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-muted);
}
.t-roster-row__meta i { transition: transform var(--t-transition); }
.t-roster-row:hover .t-roster-row__meta i { transform: translateX(4px); color: var(--t-gold-text); }
@media (max-width: 575.98px) {
    .t-roster-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Numaralı editorial satır (.t-list__row) ---------- */
.t-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--t-space-2);
    padding-block: var(--t-space-3);
    border-bottom: 1px solid var(--t-border-soft);
    color: var(--t-fg);
    min-width: 0;
}
.t-list__row:first-child { border-top: 1px solid var(--t-gold-line); }

/* ---------- Rozet / etiket ---------- */
.t-badge {
    display: inline-block;
    font-family: var(--t-font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .34rem .8rem;
    border-radius: var(--t-radius-pill);
    background: transparent;
    color: var(--t-secondary);
    border: 1px solid var(--t-border-soft);
    max-width: 100%;
    overflow-wrap: break-word;
}
.t-badge--accent {
    background: transparent;
    color: var(--t-gold-text);      /* açık modda #8A5A22 — ham altın ASLA */
    border-color: var(--t-gold-line);
}

/* ---------- İkon balonu ---------- */
.t-icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--t-gold-soft);
    border: 1px solid var(--t-gold-line);
    color: var(--t-gold-text);
    font-size: 1.4rem;
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
}
.t-card:hover .t-icon-circle,
.t-icon-circle:hover {
    transform: none;
    background: var(--t-gold);
    color: var(--t-on-gold);
    border-color: var(--t-gold);
}

/* ---------- Referans logoları (sessiz logo bandı) ---------- */
.t-logo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, var(--t-space-6));
    align-items: center;
    justify-content: center;
}
.t-logo-strip img {
    height: 36px; width: auto; max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .55;
    transition: opacity var(--t-transition), filter var(--t-transition);
}
.t-logo-strip a { display: inline-flex; align-items: center; min-height: 44px; }
.t-logo-strip a:hover img { opacity: 1; filter: grayscale(0); transform: none; }

/* ---------- İstatistik / sayaç (kafes bandı içinde yaşar) ---------- */
.t-stat { text-align: center; min-width: 0; }
.t-stat__num {
    font-family: var(--t-font-heading);   /* dev punto → Bodoni sınırının ÜSTÜNDE */
    font-size: clamp(2.35rem, 5.4vw, 3.9rem);
    font-weight: 600;
    color: var(--t-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
}
.t-stat__num .t-stat__plus { color: var(--t-gold-text); }
.t-stat__label {
    color: var(--t-muted);
    font-family: var(--t-font-body);
    font-weight: 600;
    margin-top: .65rem;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.t-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--t-space-4) var(--t-space-3);
}
.t-stat-grid > * {
    padding-top: var(--t-space-3);
    border-top: 1px solid var(--t-gold-line);
    min-width: 0;
}
@media (max-width: 767.98px) {
    .t-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Testimonial kartı (ızgara biçimi — .t-quote-feature'ın küçüğü) ---------- */
.t-quote {
    position: relative;
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    padding: var(--t-space-4) var(--t-space-3);
    height: 100%;
    min-width: 0;
    box-shadow: var(--t-shadow-xs);
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
}
.t-quote:hover { box-shadow: var(--t-shadow); border-color: var(--t-gold); }
.t-quote__text {
    color: var(--t-fg);
    font-family: var(--t-font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: 1.32rem;              /* Bodoni sınırının hemen üstünde tutuldu */
    line-height: 1.55;
    letter-spacing: -0.01em;
    margin: 0;
    overflow-wrap: break-word;
}
.t-quote__author { display: flex; align-items: center; gap: .85rem; margin-top: var(--t-space-3); }
.t-quote__author img {
    width: 52px; height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--t-gold-line);
}
.t-quote__name { font-weight: 700; color: var(--t-primary); font-family: var(--t-font-body); }
.t-quote__role {
    color: var(--t-muted);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.t-stars { color: var(--t-gold-text); letter-spacing: 2px; font-size: .85rem; }

/* ============================================================
   FOOTER — derin kakao, KAFESLİ ÜST KENAR (kafesin üçüncü işi)
   Zemin SABİT koyu (mod-aware DEĞİL): koyu-zeminli/açık-metinli
   bileşenlerin zemini sabit koyu renge bağlanır, yoksa koyu modda
   beyaz-üstü-beyaz olur.
   ============================================================ */
.t-footer {
    --t-footer-bg: #16100C;
    --t-footer-fg: #F7EFE4;
    --t-footer-muted: #C2AF9C;      /* sabit kakao üstünde ÖLÇÜLEN 8.90:1 ✓ AAA */
    --t-footer-hover: #E9BC6A;
    --t-footer-border: rgba(217, 164, 65, .22);
    --t-footer-chip: transparent;
    /* Kafes koyu-mod kabartmasına SABİTLENİR — footer her modda koyudur,
       açık modun krem kabartması burada ters/ışıklı görünürdü. */
    --t-lattice-hi: rgba(217, 164, 65, .18);
    --t-lattice-lo: rgba(0, 0, 0, .38);

    position: relative;
    background: var(--t-footer-bg);
    color: var(--t-footer-fg);
    border-top: 1px solid var(--t-gold);
    padding-block: calc(var(--t-space-8) + 18px) var(--t-space-4);
    margin-top: var(--t-space-10);
    overflow: hidden;
}
/* (3) Kafesli üst kenar — waffle diliminin kesilmiş kenarı */
.t-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 18px;
    background-image: var(--t-lattice-layers);
    background-color: rgba(217, 164, 65, .05);
    border-bottom: 1px solid rgba(217, 164, 65, .18);
    pointer-events: none;
}
.t-footer::after { content: none; }
.t-footer > .container { position: relative; z-index: 1; }
.t-footer h5 {
    color: var(--t-footer-fg);
    font-family: var(--t-font-body);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: var(--t-space-3);
    font-weight: 700;
}
.t-footer a { color: var(--t-footer-muted); transition: color var(--t-transition); }
.t-footer ul a:hover { color: var(--t-footer-hover); }
.t-footer ul a { display: inline-flex; align-items: center; min-height: 32px; }

/* ★ DOKUNMA HEDEFİ (plan §1.4 / spec §5.2: ≥44px).
   Masaüstünde 32px'lik sıkı dikey ritim footer'ın sakin editorial dokusunu
   korur — orada işaretçi hassas, 44px gereksiz boşluk üretir. Hedef yalnızca
   GERÇEKTEN gerektiğinde büyür: dokunmatik girdide ya da dar ekranda.
   İki koşul OR'lanır çünkü ikisi de tek başına yeterli sebep: dokunmatik
   masaüstü (pointer:coarse, geniş ekran) ve dar ekranlı fare kullanıcısı
   ayrı senaryolar. `.t-footer__bottom a` satır içi olduğu için ayrıca
   inline-flex'e alınır, yoksa min-height'a tepki vermez. */
@media (pointer: coarse), (max-width: 991.98px) {
    .t-footer ul a { min-height: 44px; }
    .t-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ★ BOOTSTRAP TUZAĞI — dar ekranda .row.g-5 yatay taşması.
   Bootstrap'te `.row`un negatif yan margin'i satırın kendi --bs-gutter-x
   değerine göre ölçeklenir (g-5 → 3rem → -24px), ama `.container`ın yan
   padding'i kendi varsayılan gutter'ına (1.5rem → 12px) bağlıdır. `g-5`
   doğrudan bir container altında kullanılınca satır her iki yandan 12px
   taşar. Geniş ekranda container zaten viewport'tan içeride olduğu için
   belirti görünmez; container tam-genişliğe oturduğu DAR ekranda belge
   yatay kayar (ölçüldü: 390px viewport, scrollWidth 402px, iletişim sayfası).
   `g-5` yedi şablonda kullanılıyor — tek tek şablon düzeltmek tekrarı davet
   ederdi, bu yüzden CSS'te tek yerden çözülür.
   <992px'de sütunlar zaten alt alta yığıldığı için 48px YATAY boşluk hiçbir
   iş yapmaz; yalnızca yatay gutter kısılır, dikey boşluk (gy) korunur —
   yani masaüstündeki cömert ritim aynen kalır. */
@media (max-width: 991.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
.t-footer__brand {
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-size: 1.7rem;              /* Bodoni sınırının üstünde */
    color: var(--t-footer-fg);
    letter-spacing: -0.02em;
}
.t-footer__newsletter {
    border-bottom: 1px solid var(--t-footer-border);
    padding-bottom: var(--t-space-4);
    margin-bottom: var(--t-space-4);
}

/* ★ SABİT-KOYU YÜZEY İÇİNDEKİ MOD-DUYARLI PANEL — spec §3.2E tuzağının TERSİ.
   `.t-footer` bilinçli olarak sabit koyu (--t-footer-bg) ve metni sabit açık
   (--t-footer-fg/--t-footer-muted); bu doğru ve korunuyor. Ama içine genel
   amaçlı `.t-panel` konduğunda panel zemini `--t-surface`'e bağlıdır ve AÇIK
   MODDA #FFFFFF olur — footer'dan miras alınan KREM metin beyaz panelin
   üstünde kalır (tarayıcıda ölçülen: 1.77:1 ve 2.12:1, ikisi de AA'nın çok
   altında). Panel footer'ın içindeyken zemini de footer gibi SABİT olmalı;
   mod-duyarlı token'a değil sabit değere bağlanır. #211711 = koyu moddaki
   --t-surface (footer zemininden bir kademe açık "yükseltilmiş yüzey"),
   ölçülen kontrast: --t-footer-fg 14.9:1, --t-footer-muted 8.0:1. */
.t-footer .t-panel {
    background: #211711;
    border-color: var(--t-footer-border);
    box-shadow: none;
}
.t-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;      /* dokunma hedefi >=44px */
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(217, 164, 65, .45);
    color: var(--t-footer-fg);
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
}
.t-footer__social a:hover {
    background: var(--t-gold);
    color: var(--t-on-gold);
    border-color: var(--t-gold);
    transform: none;
}
.t-footer__bottom {
    border-top: 1px solid var(--t-footer-border);
    margin-top: var(--t-space-6);
    padding-top: var(--t-space-3);
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--t-footer-muted);
}
.t-footer__bottom a { color: var(--t-footer-muted); }
.t-footer__bottom a:hover { color: var(--t-footer-hover); }
/* ============================================================
   FORMLAR
   Squircle köşe, altın hairline kenar (odakta doygun altın + yumuşak
   halka), Manrope uppercase etiket.
   ★ Alan kenarlıkları --t-gold-line kullanır: form alanı bir UI
   bileşenidir ve sınırı WCAG 1.4.11 gereği >=3:1 olmalıdır. Ham altın
   açık modda 2.06:1 ile bunu kaçırıyordu — bu yüzden koyulaştırılmış
   çizgi tonu kullanılır (bkz. dosya başı WCAG bloğu).
   ★ Dokunma hedefi: tüm alanlar min 48px.
   ============================================================ */
.t-form .form-label {
    font-weight: 700;
    color: var(--t-secondary);
    margin-bottom: .45rem;
    font-family: var(--t-font-body);   /* ★ form etiketi ASLA Bodoni değil */
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.t-form .form-control,
.t-form .form-select {
    border-radius: var(--t-radius-sm);
    border: 1px solid var(--t-gold-line);
    background: var(--t-surface);
    color: var(--t-fg);
    min-height: 48px;
    padding: .75rem .95rem;
    font-family: var(--t-font-body);
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
}
.t-form .form-control::placeholder { color: var(--t-muted); opacity: 1; }
.t-form .form-control:focus,
.t-form .form-select:focus {
    border-color: var(--t-gold);
    box-shadow: 0 0 0 3px var(--t-gold-soft);
    background: var(--t-surface);
    color: var(--t-fg);
}
.t-form textarea.form-control { min-height: 9.5rem; }
.t-form .form-check-input {
    width: 1.15rem; height: 1.15rem;
    margin-top: .28rem;
    background-color: var(--t-surface);
    border-color: var(--t-gold-line);
}
.t-form .form-check-input:checked {
    background-color: var(--t-gold);
    border-color: var(--t-gold);
}
.t-form .form-check-label { min-height: 24px; }
.t-required { color: var(--t-accent-2-text); }   /* ahududu — tutumlu ikincil vurgunun üçüncü işi */

/* ---------- Dosya seçici (kariyer başvurusu: CV yükleme) ---------- */
.t-file-picker {
    position: relative;
    display: flex; align-items: center; gap: var(--t-space-3);
    min-height: 56px;
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface-2);
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color var(--t-transition), background var(--t-transition);
}
.t-file-picker:hover { border-color: var(--t-gold); }
.t-file-picker.has-file { background: var(--t-gold-soft); border-color: var(--t-gold); }
.t-file-picker__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    border: 1px solid var(--t-gold-line);
    color: var(--t-gold-text);
    font-size: 1.1rem;
}
.t-file-picker__text { flex: 1 1 auto; min-width: 0; }
.t-file-picker__title {
    display: block; font-weight: 700; color: var(--t-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-file-picker__hint {
    display: block; margin-top: .15rem;
    font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--t-muted);
}
.t-file-picker__btn { flex-shrink: 0; pointer-events: none; }
.t-file-picker__input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    margin: 0; padding: 0; border: 0;
}
.t-file-picker__input:focus-visible ~ .t-file-picker__btn,
.t-file-picker:has(.t-file-picker__input:focus-visible) {
    outline: 2px solid var(--t-gold-text);
    outline-offset: 3px;
}

/* ---------- İçerik (rich text) — editorial prose ---------- */
.t-prose { color: var(--t-fg); line-height: 1.85; max-width: 68ch; font-size: 1.05rem; }
.t-prose img {
    max-width: 100%; height: auto;
    border-radius: var(--t-radius);
    margin-block: 1.35rem;
    border: 1px solid var(--t-gold-line);
}
.t-prose h2, .t-prose h3 { margin-top: var(--t-space-4); margin-bottom: .8rem; font-weight: 600; }
.t-prose h2 { font-size: clamp(1.6rem, 3.4vw, 2rem); }
.t-prose h3 { font-size: clamp(1.35rem, 2.8vw, 1.6rem); }
/* Drop-cap: Bodoni'nin en güzel göründüğü yer — dev punto, tam kontrast */
.t-prose > p:first-of-type::first-letter {
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-size: 3.6em;
    float: left;
    line-height: .82;
    margin: .05em .12em 0 0;
    color: var(--t-gold-text);
}
.t-prose ul, .t-prose ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.t-prose li { margin-bottom: .5rem; }
.t-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.t-prose blockquote {
    border-left: 2px solid var(--t-gold-line);
    padding-left: 1.5rem;
    margin: 1.85rem 0;
    color: var(--t-fg);
    font-style: italic;
    font-family: var(--t-font-heading);
    font-size: clamp(1.35rem, 2.6vw, 1.55rem);   /* Bodoni sınırının üstünde */
    line-height: 1.5;
}
.t-prose table { width: 100%; }

/* ---------- İç sayfa başlık şeridi ----------
   Kafes bandının üstünde oturur — bölüm ayraç bandının (kafesin BİRİNCİ
   işi) sayfa girişindeki karşılığı. */
.t-page-header {
    position: relative;
    background-color: var(--t-surface-2);
    background-image: var(--t-lattice-layers);
    border-bottom: 1px solid var(--t-gold-line);
    padding-block: clamp(2.75rem, 6.5vw, 5rem);
}
.t-page-header > * { position: relative; z-index: 1; }
.t-page-header h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    margin: 0;
}
.t-page-header p {
    color: var(--t-muted);
    font-size: 1.08rem;
    max-width: 56ch;
    line-height: 1.8;
    margin: var(--t-space-2) 0 0;
}

/* ---------- Breadcrumb ---------- */
.t-breadcrumb {
    font-family: var(--t-font-body);
    font-size: .74rem;
    color: var(--t-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.t-breadcrumb a { color: var(--t-muted); }
.t-breadcrumb a:hover { color: var(--t-gold-text); }

/* ---------- Boş durum ---------- */
.t-empty {
    text-align: center;
    padding: var(--t-space-10) var(--t-space-2);
    color: var(--t-muted);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    background-color: var(--t-surface);
    background-image: var(--t-lattice-layers);
    box-shadow: var(--t-shadow-xs);
}
.t-empty i { color: var(--t-gold-text); }

/* ============================================================
   CTA bandı — tam-taşan kakao blok + KAFES KABARTMASI
   Zemin SABİT koyu (mod-aware DEĞİL). Footer öncesi son vitrin anı.
   ============================================================ */
.t-cta {
    position: relative;
    background-color: #16100C;
    /* Kafes koyu-mod kabartmasına sabitlenir (CTA her modda koyudur) */
    --t-lattice-hi: rgba(217, 164, 65, .17);
    --t-lattice-lo: rgba(0, 0, 0, .36);
    background-image:
        var(--t-lattice-layers),
        radial-gradient(90% 130% at 18% 0%, rgba(217, 164, 65, .13) 0%, transparent 60%);
    border: 1px solid var(--t-gold);
    border-radius: var(--t-radius);
    padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1.35rem, 5vw, 4rem);
    color: #F7EFE4;
    overflow: hidden;
    text-align: center;
}
.t-cta::before { content: none; }
.t-cta > * { position: relative; z-index: 1; }
.t-cta h2 {
    color: #F7EFE4;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    margin: 0;
    overflow-wrap: break-word;
}
.t-cta p {
    color: #C9B7A4;                 /* sabit kakao üstünde 9.69:1 ✓ */
    max-width: 52ch;
    margin: .9rem auto 0;
}
.t-cta .t-eyebrow { color: #D9A441; }             /* 8.38:1 ✓ */
.t-cta .t-eyebrow::before { background: rgba(217, 164, 65, .7); }
.t-cta .btn-outline-accent { color: #F7EFE4; border-color: rgba(247, 239, 228, .48); }
.t-cta .btn-outline-accent:hover { background: #F7EFE4; color: #16100C; border-color: #F7EFE4; }

/* ---------- Sayfalama (dokunma hedefi >=44px) ---------- */
.pagination { gap: .35rem; flex-wrap: wrap; }
.pagination .page-link {
    border-radius: var(--t-radius-sm);
    border-color: var(--t-gold-line);
    color: var(--t-secondary);
    font-size: .85rem;
    font-weight: 600;
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
}
.pagination .page-link:hover { background: var(--t-gold-soft); color: var(--t-gold-text); border-color: var(--t-gold); }
.pagination .page-item.active .page-link {
    background: var(--t-gold);
    border-color: var(--t-gold);
    color: var(--t-on-gold);        /* 7.36:1 ✓ */
}
.pagination .page-item.disabled .page-link { color: var(--t-muted); opacity: .55; }

/* ---------- Yüzen WhatsApp butonu ---------- */
.t-floating-whatsapp {
    position: fixed;
    inset-inline-end: var(--t-space-2);
    bottom: var(--t-space-2);
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-height: 48px;
    max-width: calc(100vw - 2rem);
    background: var(--t-surface);
    color: var(--t-gold-text);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-md);
    text-decoration: none;
    line-height: 1;
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
}
.t-floating-whatsapp:hover,
.t-floating-whatsapp:focus-visible {
    background: var(--t-gold);
    color: var(--t-on-gold);
    border-color: var(--t-gold);
}
.t-floating-whatsapp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.t-floating-whatsapp__label {
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: .85rem 1rem;
    border-inline-start: 1px solid var(--t-gold-line);
    max-width: 13rem;
}
@media (max-width: 575.98px) {
    .t-floating-whatsapp {
        inset-inline-end: var(--t-space-1);
        bottom: var(--t-space-1);
    }
    .t-floating-whatsapp__label { display: none; }
}

/* ============================================================
   İÇERİK MODÜLLERİ — SSS / Fiyatlandırma / Newsletter / Arama
   ============================================================ */

/* ---------- SSS ---------- */
.t-faq-accordion .accordion-item {
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    margin-bottom: var(--t-space-2);
    box-shadow: var(--t-shadow-xs);
    overflow: hidden;
}
.t-faq-accordion .accordion-button {
    font-family: var(--t-font-body);   /* soru metni 1.05rem → Bodoni sınırı altında */
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--t-primary);
    background: var(--t-surface);
    padding: 1.25rem 1.4rem;
    min-height: 56px;
    box-shadow: none;
}
.t-faq-accordion .accordion-button:not(.collapsed) {
    color: var(--t-gold-text);
    background: var(--t-gold-soft);
    box-shadow: inset 0 -1px 0 var(--t-gold-line);
}
.t-faq-accordion .accordion-button::after {
    filter: none;
    width: 1.1rem; height: 1.1rem; background-size: 1.1rem;
}
.t-faq-accordion .accordion-button:focus { box-shadow: none; }
.t-faq-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--t-gold-text);
    outline-offset: -3px;
}
.t-faq-accordion .accordion-body { padding: .25rem 1.4rem 1.4rem; color: var(--t-fg); }

/* ---------- Fiyatlandırma ----------
   Öne çıkan plan RENK-DIŞI bir yolla da ayrışır: kalın altın çerçeve +
   ahududu rozet + hafif yükseltme. */
.t-pricing-card {
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    padding: var(--t-space-4) var(--t-space-3);
    height: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--t-shadow-xs);
    text-align: center;
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
}
.t-pricing-card:hover { border-color: var(--t-gold); box-shadow: var(--t-shadow); }
.t-pricing-card--featured {
    border: 2px solid var(--t-gold);
    box-shadow: var(--t-shadow-accent);
    position: relative;
}
.t-pricing-card--featured:hover { border-color: var(--t-gold); }
.t-pricing-card__badge {
    position: absolute;
    top: -.8rem;
    /* ★ FİZİKSEL left:50% BİLİNÇLİ: `transform` yön-duyarlı DEĞİLDİR,
       bu yüzden inset-inline-start:50% + translateX(-50%) çifti RTL'de
       rozeti merkezden kaydırır. Ortalanmış öğede fiziksel left doğru
       davranışı her iki yönde de verir. */
    left: 50%;
    transform: translateX(-50%);
    background: var(--t-accent-2-fill);   /* ahududu — tutumlu ikincil vurgunun ikinci işi */
    color: var(--t-on-accent-2);          /* 6.31:1 ✓ */
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .34rem .95rem;
    border-radius: var(--t-radius-pill);
    white-space: nowrap;
}
.t-pricing-card__name {
    font-family: var(--t-font-body);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-secondary);
    margin-bottom: 0;
}
.t-pricing-card__price {
    font-family: var(--t-font-heading);   /* dev punto → Bodoni sınırının üstünde */
    font-weight: 600;
    font-size: clamp(2.1rem, 4.2vw, 2.7rem);
    color: var(--t-primary);
    line-height: 1.1;
    margin-top: 1rem;
    letter-spacing: -0.03em;
    font-feature-settings: "tnum";
}
.t-pricing-card--featured .t-pricing-card__price { color: var(--t-gold-text); }
.t-pricing-card__period {
    color: var(--t-muted);
    font-family: var(--t-font-body);
    font-size: .74rem;
    margin-inline-start: .35rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.t-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: var(--t-space-3) 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex: 1;
    border-top: 1px solid var(--t-border-soft);
    padding-top: var(--t-space-2);
    text-align: start;
}
.t-pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .92rem;
    color: var(--t-fg);
}
.t-pricing-card__features i { color: var(--t-gold-text); margin-top: .3rem; flex-shrink: 0; }
.t-pricing-card .btn { width: 100%; margin-top: auto; }

/* ---------- Newsletter (footer abonelik formu) ---------- */
.t-newsletter-form {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap;
    border: 1px solid rgba(217, 164, 65, .45);
    border-radius: var(--t-radius);
    padding: .35rem;
    background: rgba(247, 239, 228, .04);
}
.t-newsletter-form .form-control {
    flex: 1 1 13rem;
    min-width: 0;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--t-footer-fg, var(--t-fg));
}
.t-newsletter-form .form-control::placeholder { color: var(--t-footer-muted, var(--t-muted)); opacity: 1; }
.t-newsletter-form .form-control:focus {
    box-shadow: none;
    background: transparent;
    color: var(--t-footer-fg, var(--t-fg));
}
.t-newsletter-form .btn { flex-shrink: 0; }
.t-newsletter-form__feedback {
    font-size: .8rem;
    letter-spacing: .01em;
    margin-top: .7rem;
    display: none;
    align-items: center;
    gap: .4rem;
}
.t-newsletter-form__feedback.is-visible { display: flex; }
.t-newsletter-form__feedback--success { color: var(--t-success); }
.t-newsletter-form__feedback--error { color: var(--t-danger); }

/* ---------- Arama: navbar açılır kutusu ---------- */
.t-search-panel {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-gold-line);
    box-shadow: var(--t-shadow-md);
    padding: var(--t-space-2) 0;
    /* Anlik display gecisi yerine animasyonlu gorunurluk: display
       animate EDILEMEZ, bu yuzden panel "birden zipliyordu". visibility
       gecikmeli kapanir ki cikis animasyonu gorulebilsin. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
    z-index: 5;
}
.t-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.t-search-panel form { display: flex; gap: .5rem; }
.t-search-panel .form-control {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    border-radius: var(--t-radius-sm);
    border: 1px solid var(--t-gold-line);
    background: var(--t-surface);
    color: var(--t-fg);
}
.t-search-panel .form-control:focus { box-shadow: 0 0 0 3px var(--t-gold-soft); border-color: var(--t-gold); }

/* ---------- Arama sonuç sayfası ---------- */
.t-search-group + .t-search-group { margin-top: var(--t-space-4); }
.t-search-group__title {
    font-family: var(--t-font-body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--t-gold-text);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--t-space-2);
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--t-gold-line);
}
.t-search-result-card {
    display: block;
    background: var(--t-surface);
    border: 1px solid var(--t-gold-line);
    border-radius: var(--t-radius);
    padding: 1.15rem 1.3rem;
    text-decoration: none;
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
    height: 100%;
    min-width: 0;
    box-shadow: var(--t-shadow-xs);
}
.t-search-result-card:hover { border-color: var(--t-gold); box-shadow: var(--t-shadow); color: inherit; }
.t-search-result-card__title {
    color: var(--t-primary);
    font-family: var(--t-font-body);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .35rem;
}
.t-search-result-card:hover .t-search-result-card__title { color: var(--t-gold-text); }
.t-search-result-card__snippet { color: var(--t-muted); font-size: .9rem; line-height: 1.65; margin: 0; }

/* ============================================================
   BLOG MODÜLLERİ
   ============================================================ */
.t-reading-time {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--t-muted);
    font-size: .8rem;
    letter-spacing: .02em;
}
.t-reading-time i { color: var(--t-gold-text); }
.t-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    color: var(--t-muted);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Sosyal paylaşım (dokunma hedefi >=44px) ---------- */
.t-share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.t-share__label {
    font-weight: 700;
    color: var(--t-muted);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-inline-end: .3rem;
}
.t-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--t-surface);
    color: var(--t-gold-text);
    border: 1px solid var(--t-gold-line);
    font-size: 1rem;
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition);
    position: relative;
}
.t-share__btn:hover { background: var(--t-gold); color: var(--t-on-gold); border-color: var(--t-gold); }
.t-share__btn:focus-visible { outline: 2px solid var(--t-gold-text); outline-offset: 3px; }
.t-share__btn--copy.is-copied { background: var(--t-gold); color: var(--t-on-gold); border-color: var(--t-gold); }
.t-share__feedback {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;                      /* fiziksel — bkz. .t-pricing-card__badge notu */
    transform: translateX(-50%) translateY(4px);
    background: var(--t-primary);
    color: var(--t-bg);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .6rem;
    border-radius: var(--t-radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-transition), transform var(--t-transition);
}
.t-share__btn--copy.is-copied .t-share__feedback { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Yazı etiketleri ---------- */
.t-post-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.t-post-tags .t-badge { min-height: 32px; display: inline-flex; align-items: center; }
.t-post-tags .t-badge:hover { background: var(--t-gold); color: var(--t-on-gold); border-color: var(--t-gold); }
.t-badge.is-active { background: var(--t-gold); color: var(--t-on-gold); border-color: var(--t-gold); }

/* ---------- Blog sidebar ---------- */
.t-blog-sidebar__panel {
    border-top: 1px solid var(--t-gold-line);
    padding-top: var(--t-space-3);
}
.t-blog-sidebar__panel + .t-blog-sidebar__panel { margin-top: var(--t-space-4); }
.t-blog-sidebar__panel .t-eyebrow { margin-top: 0; margin-bottom: var(--t-space-2); }
.t-blog-sidebar__recent-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .1rem .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--t-border-soft);
    color: var(--t-fg);
}
.t-blog-sidebar__recent-item:first-child { padding-top: 0; }
.t-blog-sidebar__recent-num {
    color: var(--t-gold-text);
    grid-row: 1 / 3;
    align-self: start;
    padding-top: .1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.t-blog-sidebar__recent-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.4;
    transition: color var(--t-transition);
}
.t-blog-sidebar__recent-item:hover .t-blog-sidebar__recent-title { color: var(--t-gold-text); }
.t-blog-sidebar__recent-date { color: var(--t-muted); font-size: .7rem; }
.t-blog-sidebar__cat-link {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    color: var(--t-fg);
    padding: .6rem 0;
    min-height: 44px;
    align-items: center;
    font-size: .92rem;
    border-bottom: 1px solid var(--t-border-soft);
    transition: color var(--t-transition);
}
.t-blog-sidebar__cat-link:hover,
.t-blog-sidebar__cat-link.is-active { color: var(--t-gold-text); }
.t-blog-sidebar__cat-count { color: var(--t-muted); }
.t-blog-sidebar__cat-link.is-active .t-blog-sidebar__cat-count { color: var(--t-gold-text); }

/* Blog liste/detay: içerik + sidebar 2 sütun, altın hairline ayraç.
   ★ Mantıksal özellikler (padding-inline-start / border-inline-start)
   kullanıldı → RTL'de ek override GEREKMEZ. */
.t-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0;
    align-items: start;
}
.t-blog-layout__sidebar {
    position: sticky;
    top: calc(var(--t-navbar-h) + var(--t-space-3));
    padding-inline-start: var(--t-space-4);
    border-inline-start: 1px solid var(--t-gold-line);
    margin-inline-start: var(--t-space-4);
    min-width: 0;
}
@media (max-width: 991.98px) {
    .t-blog-layout { grid-template-columns: minmax(0, 1fr); }
    .t-blog-layout__sidebar {
        position: static;
        padding-inline-start: 0;
        border-inline-start: none;
        margin-inline-start: 0;
        margin-top: var(--t-space-6);
        padding-top: var(--t-space-4);
        border-top: 1px solid var(--t-gold-line);
    }
}
/* ============================================================
   :focus-visible — genel klavye odak göstergesi
   Her iki modda kontrastlı: açık #8A5A22 (5.39:1) / koyu #D9A441
   (8.38:1). offset:3px squircle köşeden ayrıştırır.
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--t-gold-text);
    outline-offset: 3px;
    border-radius: var(--t-radius-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible { box-shadow: none; }
/* Sabit-koyu zeminli bileşenlerde odak halkası ham altına döner
   (kakao üstünde 8.38:1; --t-gold-text açık modda #8A5A22 olsaydı
   koyu zeminde 2.6:1'e düşerdi — ölçüldü, bilinçli düzeltme). */
.t-hero-split :focus-visible,
.t-hero :focus-visible,
.t-cta :focus-visible,
.t-footer :focus-visible { outline-color: #D9A441; }

/* ============================================================
   prefers-reduced-motion — TÜM hareket anında son değere atlar
   (hover zoom, karamel gradient geçişi, reveal, hero dahil).
   ★ Yapışkan hero de bırakılır: scroll-bağlantılı sabitlenme
   vestibüler hassasiyeti tetikleyebilir; düzen iki sütunlu ama
   DURAĞAN hâle döner, hiçbir içerik kaybolmaz.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }

    /* Yer değiştiren/ölçeklenen hover hareketleri TAMAMEN kapatılır */
    .t-card:hover,
    .t-praline:hover,
    .t-roster-row:hover,
    .t-search-result-card:hover { transform: none !important; }
    .t-card:hover .t-card__media img,
    .t-praline:hover .t-praline__media img { transform: none !important; }
    .t-card:hover .t-card__more i,
    .t-praline:hover .t-praline__more i,
    .t-roster-row:hover .t-roster-row__meta i { transform: none !important; }

    /* Yapışkan bölünmüş hero → durağan iki sütun */
    .t-hero-split__sticky { position: static !important; height: auto !important; }
    .t-hero-split__slide { min-height: 62svh !important; }
}

/* ============================================================
   RTL — [dir="rtl"] override bloğu
   Bu dosyada yön-duyarlı yerlerin ÇOĞU baştan MANTIKSAL özelliklerle
   (inset-inline-*, padding-inline-*, border-inline-*, margin-inline-*,
   text-align:start) yazıldı; bu blok yalnızca mantıksal karşılığı
   OLMAYAN üç şeyi çevirir: gradient açısı, float ve ok ikonları.
   Bootstrap'in kendi utility'leri layout'un koşullu bootstrap.rtl.min.css
   yüklemesiyle çözülür.

   ★ .t-hero-split ızgarası mantıksal akıştadır → RTL'de yapışkan sütun
   kendiliğinden SAĞA geçer, sıra doğru yansır. Ek kural gerekmez;
   yalnızca slaytın yatay scrim'i (fiziksel 90deg) çevrilir.
   ============================================================ */
[dir="rtl"] { text-align: right; }

[dir="rtl"] .t-hero-split__scrim {
    background:
        linear-gradient(180deg, rgba(22,16,12,.72) 0%, rgba(22,16,12,.16) 26%, rgba(22,16,12,.34) 58%, rgba(22,16,12,.93) 100%),
        linear-gradient(270deg, rgba(22,16,12,.60) 0%, rgba(22,16,12,0) 44%);
}

/* Zengin içerik: liste girintisi, drop-cap float, alıntı çizgisi */
[dir="rtl"] .t-prose ul,
[dir="rtl"] .t-prose ol { padding-left: 0; padding-right: 1.3rem; }
[dir="rtl"] .t-prose > p:first-of-type::first-letter {
    float: right;
    margin: .05em 0 0 .12em;
}
[dir="rtl"] .t-prose blockquote {
    border-left: none;
    border-right: 2px solid var(--t-gold-line);
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Ok ikonları (kart "detay" oku, breadcrumb, buton içi ok, carousel) */
[dir="rtl"] .t-breadcrumb i.bi-chevron-right,
[dir="rtl"] .t-card__more i.bi-arrow-right,
[dir="rtl"] .t-praline__more i.bi-arrow-right,
[dir="rtl"] .t-roster-row__meta i.bi-arrow-right,
[dir="rtl"] .btn i.bi-arrow-right,
[dir="rtl"] .carousel-control-prev-icon,
[dir="rtl"] .carousel-control-next-icon { transform: scaleX(-1); }

/* Hover'da ok kayması RTL'de ters yöne gitmeli */
[dir="rtl"] .t-card:hover .t-card__more i,
[dir="rtl"] .t-praline:hover .t-praline__more i,
[dir="rtl"] .t-roster-row:hover .t-roster-row__meta i { transform: scaleX(-1) translateX(4px); }

/* ============================================================
   Logo boyutu (navbar)
   ============================================================ */
.navbar-logo-img,
.navbar-brand img {
    max-height: var(--c-logo-h, 64px);
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
}
@media (max-width: 991.98px) {
    .navbar-logo-img,
    .navbar-brand img {
        max-height: var(--c-logo-h-mobile, 40px) !important;
        height: auto !important;
    }
}

/* ============================================================
   ★ 320px GÜVENLİK AĞI (plan §1.4: "320px gerçek zemin")
   Test genişlikleri: 320 / 360 / 390 / 414 / 768 / 1024 / 1440.
   Burada YATAY KAYDIRMALI hiçbir bileşen YOKTUR (kayan içerik şeridi
   Atelier'in alanıdır ve mobilde en kırılgan desendir) — bu blok
   yalnızca taşma kaynaklarını kapatır. Dosyadaki tek yatay taşma
   kuralı body'nin `hidden` değeridir (son güvenlik ağı).
   ============================================================ */
/* Grid/flex çocuklarının varsayılan min-width:auto değeri, uzun bir
   sözcük ya da geniş bir tablo yüzünden hücrenin ızgarayı taşırmasına
   yol açar. Tema bileşenlerinde min-width:0 tek tek verildi; bu blok
   Bootstrap satır/sütunları için son ağdır. */
.row > * { min-width: 0; }

@media (max-width: 359.98px) {
    /* 320px: yatay iç boşluklar daralır, uzun URL/e-posta kırılır */
    .t-section { padding-block: 2.75rem; }
    .t-panel,
    .t-quote-feature { padding-inline: 1.1rem; }
    .t-card__body,
    .t-praline__body { padding: 1.15rem; }
    .t-cta { padding-inline: 1.1rem; }
    .t-prose { font-size: 1rem; }
    .t-prose a,
    .t-footer a,
    .t-blog-sidebar__recent-title { overflow-wrap: anywhere; }
    .t-stat-grid { gap: var(--t-space-3) var(--t-space-2); }
    .t-badge,
    .t-praline__badge { font-size: .62rem; letter-spacing: .08em; }
}

/* Zengin metindeki tablolar: sütunlar sığdırılır, satır içi kırılır.
   ★ Yatay kaydırma kutusu BİLİNÇLİ OLARAK KULLANILMADI — plan §1.4
   yatay kaydırmalı bileşeni yasaklıyor. table-layout:fixed sütunları
   zorla sığdırır; 320px'te bile ne tablo ne gövde yatay kayar. */
.t-prose table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}
.t-prose th,
.t-prose td { overflow-wrap: anywhere; }