/* ============================================================
   KODDATA TEMA — "Trust & Authority" (Direction D)
   `default` temasının ("Modern Corporate") kopyasından türetilen
   "Enterprise Clean" (Direction A) kimliğinin ÜZERİNE yeniden boyandı;
   AYNI --t-* token sözleşmesi ve TÜM .t-* sınıfları korunur (hiçbir
   şablon değişmeden çalışmaya devam eder — WordPress child-theme
   mantığı). Kimlik: lacivert ink (#0F172A) + tek bir "trust blue"
   accent (#0369A1), disiplinli 12-kolon grid, eşit yükseklikli düz
   kartlar (border + hafif gölge, ASLA scale), tarayıcı-çerçeveli ürün
   ekranları, kanıt-önce (proof-first) ana sayfa. Kaynak: docs/superpowers/
   specs/assets/2026-09-04-koddata-direction-d.html (görsel doğruluk
   kaynağı) + aynı klasördeki -direction-d.jpg render.
   Tipografi: başlıklar Lexend (600), gövde Source Sans 3 — Google Font
   <link>'i _customizer_fonts.html.twig tarafından yönetilir, burada
   KENDİ @import EKLENMEZ (aşağıdaki --t-font-* zaten sağlam sistem
   yedekleriyle tanımlı).
   Koyu bantlar (.t-cta/.t-footer/.t-stats-band) SABİT #0F172A zemin +
   açık metin taşır (mod-aware token'a BAĞLANMAZ — frontend memory
   kuralı: dark bands with light text must use FIXED dark backgrounds).
   Koyu MOD (toggle) aynı navy/mavi skalasına çekildi (accent #38BDF8)
   ama ÖNCELİK açık mod.
   ============================================================ */

/* ---------- Tasarım Token'ları: AÇIK MOD ----------
   FAZ-B (Theme Customizer) köprüsü: aşağıdaki --t-* token'ları artık
   `var(--c-*, <eski-sabit-değer>)` ile tanımlanır. --c-* değişkenleri
   partials/_customizer_vars.html.twig tarafından bu dosyanın <link>'inden
   ÖNCE <head>'e enjekte edilir (bkz. o partial'in yerleşim notu). --c-*
   enjekte edilmemişse (örn. partial include edilmeden bu CSS tek başına
   yüklenirse) fallback değerler devreye girer ve GÖRSEL SONUÇ TAMAMEN
   AYNI kalır — eski sabit tasarım korunur, regresyon riski yok.

   Eşleme (CustomizerService sözleşmesi → bu temanın rolleri):
     --c-primary   → --t-accent        (CTA/link/buton rengi — customizer'ın
                                          "Ana Renk" alanı görsel olarak bu
                                          temanın accent rolüne karşılık gelir,
                                          --t-primary'ye DEĞİL: --t-primary
                                          burada "başlık/koyu yüzey" navy'si,
                                          ayrı bir marka rolü, bilinçli olarak
                                          customizer'a bağlanmadı)
     --c-secondary → --t-secondary
     --c-bg        → --t-bg
     --c-text      → --t-fg            (ana metin rengi)
     --c-radius    → --t-radius        (taban ölçek; --t-radius-sm/-lg aşağıda
                                          calc() ile buna ORANTILI türetilir ki
                                          slider TÜM köşe skalasını [kart, form,
                                          CTA, page-header, buton-dışı öğeler]
                                          tutarlı biçimde etkilesin — bkz. o
                                          satırlardaki ayrı not. --t-radius-pill
                                          BİLİNÇLİ OLARAK sabit 999px kalır:
                                          "pill" kavramı zaten "tam yuvarlak"
                                          demektir, küçük bir taban değerin
                                          küçük bir katı asla pill görünmez.)
     --c-font-*    → --t-font-*
   Dark mode BU BLOĞA dokunmaz; [data-bs-theme="dark"] kendi --t-accent/--t-bg/
   --t-fg vb. tonlarını AŞAĞIDA ayrıca ve bağımsız tanımlar (ters çevirme değil,
   elle ayarlanmış aydınlık/desatüre tonlar) — --c-* değerleri sadece AÇIK
   MOD taban tanımını besler, koyu mod kendi renklerini seçer. Katman sırası:
   1) bu blok (:root, [data-bs-theme="light"]) --c-*'tan türer,
   2) [data-bs-theme="dark"] kendi sabit --t-* değerleriyle override eder. */
:root,
[data-bs-theme="light"] {
    --t-primary: #0F172A;          /* navy ink — başlık/metin ve koyu yüzeyler; customizer'a bağlı DEĞİL, bkz. yukarıdaki eşleme notu */
    --t-on-primary: #ffffff;
    --t-secondary: var(--c-secondary, #334155);        /* slate-700 */
    --t-accent: var(--c-primary, #0369A1);              /* trust blue CTA — customizer "Ana Renk" */
    --t-accent-hover: #075985;     /* trust blue koyu tonu — hover sabit kalır (customizer tek ton verir, otomatik koyulaştırma CSS'te yok) */
    --t-accent-soft: #E0F2FE;      /* trust blue tint (sky-100) */
    --t-accent-2: #075985;         /* gradient ikinci tonu (DEKORATİF; gradient DÜZLEŞTİRİLDİ, bkz. --t-gradient-accent notu) */

    /* ★ METİN TAŞIYAN ACCENT DOLGUSU — ölçülmüş WCAG düzeltmesi (spec §3.3),
       koddata'da DA korunur: `.btn-accent` background-COLOR + background-IMAGE
       AYRI (kısayol değil) — gradient boyanmasa bile metin sayfa zeminine karşı
       kalmaz. Gradient tek renge DÜZLEŞTİ (bkz. aşağıdaki --t-gradient-accent-fill
       notu) — "calm buttons" (spec §3): düz trust-blue dolgu.
       ÖLÇÜLEN (beyaz metin üstünde #0369A1): 5.6:1 ✓ AA. */
    --t-accent-2-fill: #075985;    /* düzleştirilmiş dolgu artık --t-accent'i tek başına kullanıyor, bu token dekoratif/yedek kalır */
    --t-on-accent: #ffffff;        /* accent dolgu üstündeki metin — 5.6:1 ✓ AA */
    --t-gradient-accent-fill: linear-gradient(180deg, var(--t-accent) 0%, var(--t-accent) 100%);
    --t-bg: var(--c-bg, #F8FAFC);                       /* sayfa zemini — soğuk beyaz-gri (spec: Direction D) */
    --t-surface: #ffffff;          /* kart/panel zemini */
    --t-surface-2: #F1F5F9;        /* alternatif bölüm zemini (bg-alt) */
    --t-surface-glass: rgba(255, 255, 255, .92);
    --t-fg: var(--c-text, #020617);                     /* ana metin */
    --t-muted: #475569;            /* ikincil metin — ≥4.5:1 AA (spec) */
    --t-muted-2: #64748B;          /* üçüncül/dekoratif metin (trust-strip, blog tarihi, browser-frame noktaları) — AA taşımayan küçük/dekoratif kullanım içindir */
    --t-border: #E2E8F0;
    --t-border-strong: #CBD5E1;
    --t-danger: #dc2626;
    --t-success: #16a34a;
    --t-warning: #f59e0b;

    --t-font-heading: var(--c-font-heading, 'Lexend'), system-ui, -apple-system, sans-serif;
    --t-font-body: var(--c-font-body, 'Source Sans 3'), system-ui, -apple-system, sans-serif;

    /* 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;

    --t-radius: var(--c-radius, 1rem);                  /* 16px varsayılan (spec: kart 14-16px) */
    --t-radius-sm: calc(var(--t-radius) * 0.625);        /* orijinal 10px oranı (0.625rem / 1rem) korunur — mockup buton radius'uyla eşleşir */
    --t-radius-lg: calc(var(--t-radius) * 1.5);          /* orijinal 24px oranı (1.5rem / 1rem) korunur */
    --t-radius-pill: 999px;        /* bilinçli sabit — "pill" = tam yuvarlak, bkz. yukarıdaki not */

    /* Yumuşak gölge skalası — navy tabanlı (spec: "0 4px 6px rgba(15,23,42,.06)") */
    --t-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --t-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --t-shadow: 0 4px 6px rgba(15, 23, 42, .06);
    --t-shadow-md: 0 10px 20px -8px rgba(15, 23, 42, .12), 0 4px 8px -4px rgba(15, 23, 42, .06);
    --t-shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .18), 0 8px 16px -8px rgba(15, 23, 42, .08);
    --t-shadow-accent: 0 12px 24px -8px rgba(3, 105, 161, .35);

    /* ★ Modern Corporate'ın iki-tonlu gradient'i (mavi→camgöbeği) DÜZLEŞTİRİLDİ —
       token adı (sınıflarca tüketilen sözleşme) AYNEN korunur, değeri artık
       tek accent rengine çözülen "sahte gradient" (dekoratif .t-footer::before /
       .t-hero::after gibi blob'lar zaten ayrıca kapatıldı, bkz. o kurallardaki
       not; bu token hâlâ okuyan birkaç iç sayfa bileşeninde — ör.
       .t-pricing-card__badge — artık düz trust-blue görünür, kimlikle tutarlı). */
    --t-gradient-accent: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent) 100%);
    --t-gradient-hero: linear-gradient(120deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.62) 45%, rgba(15,23,42,.18) 100%);

    --t-transition: 220ms cubic-bezier(.4, 0, .2, 1);
    --t-transition-slow: 420ms cubic-bezier(.4, 0, .2, 1);

    /* 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);
    --bs-link-hover-color: var(--t-accent-hover);
    --bs-emphasis-color: var(--t-primary);
}

/* ---------- Tasarım Token'ları: KOYU MOD ----------
   Ters çevirme değil; desatüre/aydınlatılmış tonlar.
   FAZ-B KATMANLAMA KARARI: bu blok BİLİNÇLİ OLARAK --c-*'a hiç referans
   VERMEZ (yukarıdaki açık mod bloğunun aksine). Customizer sadece açık modun
   taban tonunu besler; koyu mod WCAG AA doğrulanmış kendi sabit paletini
   korur — aksi halde kullanıcının seçtiği rastgele bir açık-mod rengi koyu
   zeminde kontrast garantisi olmadan kullanılırdı (erişilebilirlik riski).
   Sonuç: customizer + dark mode ÇAKIŞMAZ, ikisi ayrı eksenler. */
[data-bs-theme="dark"] {
    --t-primary: #F5F6FA;
    --t-on-primary: #0F172A;
    --t-secondary: #CBD5E1;
    /* ★ Aynı ayrım Modern Corporate'tan devralındı (koyu mod accent SIKIŞMASI):
       tek bir ton hem KÜÇÜK METİN hem DOLGU rolünü AA ile birlikte karşılayamaz
       (metin için AÇIK olması, beyaz/koyu metin taşıyabilmek için ise dolgunun
       yeterince PARLAK/KOYU olması gerekir — zıt yönler). Roller ayrılır:
       --t-accent (metin/kenarlık/ikon/eyebrow, sky-400 #38BDF8) açık zeminlerde
       metin AA'sı taşır; --t-accent-2-fill (sky-300, DAHA parlak) dolgu rolü —
       üstündeki metin --t-on-accent ile koyu mürekkebe bağlanır (beyaz metin
       burada AA'yı kaçırırdı, aynı `nova`/`cocoa` deseni). Navy/trust-blue
       skalasına çekildi (spec: "koyu mod default'un koyu değerlerini korur,
       yalnız kendi skalasına çekilir"). */
    --t-accent: #38BDF8;           /* sky-400 — ÖLÇÜLEN ~7.5:1 bg üstünde ✓ AA (metin/ikon/eyebrow/kenarlık rolü) */
    --t-accent-hover: #7DD3FC;     /* sky-300 — hover, accent'ten bir kademe açık */
    --t-accent-soft: rgba(56, 189, 248, .16);
    --t-accent-2: #7DD3FC;
    --t-accent-2-fill: #7DD3FC;    /* koyu modda dolgu PARLAK kalır (kimlik) — üstündeki metin koyu ink */
    --t-on-accent: #0F172A;        /* ★ accent dolgu üstündeki metin — ÖLÇÜLEN ~9.6:1 (accent-2-fill) ✓
                                      Beyaz metin burada AA'yı kaçırırdı (Modern Corporate'taki aynı kusur). */
    --t-bg: #0F172A;               /* navy — light modun "ink"iyle aynı aile, kimlik tutarlılığı */
    --t-surface: #16213A;          /* kart/panel — bg'den bir ton açık */
    --t-surface-2: #1E293B;        /* slate-800 — alternatif bölüm zemini */
    --t-surface-glass: rgba(22, 33, 58, .82);
    --t-fg: #F1F5F9;
    --t-muted: #94a3b8;            /* koyu zeminde AA (~7:1) */
    --t-muted-2: #7A8CA6;          /* ÖLÇÜLEN: ~4.9:1 bg üstünde ✓ AA (küçük/dekoratif metin: trust-strip, blog tarihi) */
    --t-border: #1E293B;
    --t-border-strong: #334155;
    --t-danger: #f87171;
    --t-success: #4ade80;
    --t-warning: #fbbf24;

    --t-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
    --t-shadow: 0 4px 6px -1px rgba(0, 0, 0, .5);
    --t-shadow-md: 0 10px 20px -8px rgba(0, 0, 0, .6);
    --t-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);
    --t-shadow-accent: 0 12px 28px -8px rgba(56, 189, 248, .35);

    --t-gradient-accent: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent) 100%);
    --t-gradient-accent-fill: linear-gradient(180deg, var(--t-accent-2-fill) 0%, var(--t-accent-2-fill) 100%);
    --t-gradient-hero: linear-gradient(120deg, rgba(15,23,42,.94) 0%, rgba(15,23,42,.7) 45%, rgba(15,23,42,.3) 100%);

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

/* ---------- Temel ---------- */
* { scroll-behavior: smooth; }

body {
    font-family: var(--t-font-body);
    background-color: var(--t-bg);
    color: var(--t-fg);
    font-size: 1.0625rem;   /* 17px — Source Sans 3 küçük gözükür, spec: "Body 17px/1.6" */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.t-heading {
    font-family: var(--t-font-heading);
    font-weight: 600;       /* Lexend 600 (spec: Trust & Authority başlıkları) */
    color: var(--t-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

a { color: var(--t-accent); text-decoration: none; transition: color var(--t-transition); }
a:hover { color: var(--t-accent-hover); }

.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 gradient metin (başlıklarda parça vurgu için).
   ★ METİN olduğu için DEKORATİF gradient'i değil metin-güvenli olanı kullanır:
   ham #0ea5e9 ucu açık zeminde 2.63:1 veriyordu ve AA-large 3:1 eşiğini bile
   kaçırıyordu. --t-gradient-accent-fill ile ölçülen: 5.17:1 → 5.93:1 ✓ */
.t-grad-text {
    background: var(--t-gradient-accent-fill);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Bölüm ritmi */
.t-section { padding-block: clamp(3.5rem, 8vw, var(--t-space-10)); position: relative; }
.t-section-title { margin-bottom: var(--t-space-6); }
.t-section-title h2 { font-size: clamp(1.875rem, 3.4vw, 2.5rem); }    /* spec: bölüm başlıkları 36-40px masaüstünde */
.t-section-title p { color: var(--t-muted); max-width: 56ch; font-size: 1.05rem; }

/* Bölüm üstü küçük etiket — düz büyük harf metin, DEKORATİF çizgi YOK
   (Modern Corporate'ın gradient bar'ı bilinçli olarak kaldırıldı, bkz.
   dosya başı notu). Harf aralığı mockup'a göre .12em (spec: 12px/.12em). */
.t-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t-accent);
    margin-bottom: .75rem;
}
.t-eyebrow::before { content: none; }
.t-section-title.text-center .t-eyebrow { justify-content: center; }

/* Erişilebilir focus halkası */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.t-card:focus-visible {
    outline: 3px solid var(--t-accent);
    outline-offset: 2px;
    border-radius: var(--t-radius-sm);
}

/* ---------- Scroll Reveal (progressive enhancement) ----------
   Gizleme yalnızca JS aktifken (html.js) uygulanır; JS yoksa içerik görünür kalır. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    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 (Enterprise Clean: düz beyaz, cam efekti YOK) ----------
   Modern Corporate'ın backdrop-blur glassmorphism'i kaldırıldı — spec §3:
   "Navbar: white, 1px bottom border". Kenarlık her zaman görünür (yalnızca
   scroll'da DEĞİL); `.is-scrolled` artık sadece ince bir gölge ekler. */
.t-navbar {
    background-color: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
    transition: box-shadow var(--t-transition), background-color var(--t-transition);
    padding-block: 1.05rem;
}
.t-navbar.is-scrolled {
    box-shadow: var(--t-shadow-sm);
}
.t-navbar .navbar-brand {
    font-family: var(--t-font-heading);
    font-weight: 800;
    color: var(--t-primary);
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}
.t-navbar .nav-link {
    color: #333B49;
    font-weight: 500;
    font-size: .93rem;
    /* Menü metni ASLA satır kırmaz: uzun etiketler (Vaka Çalışmaları, Açık
       Pozisyonlar, Blog technique) tek satırda kalır; sığmıyorsa aşağıdaki
       ara-genişlik kuralları tipografiyi sıkıştırır, o da yetmezse navbar
       1200px altında hamburger'a düşer (navbar-expand-xl). */
    white-space: nowrap;
    /* mockup: nav-menu gap 36px, sıfır iç dolgu — 7 menü ögesi + arama +
       dil + CTA aynı satıra sığsın diye Modern Corporate'ın geniş
       (1rem/yan) dolgusu daraltıldı. Dokunma hedefi masaüstünde bir
       sorun değil (fare); mobilde zaten `.t-navbar .nav-link{min-height:44px}`
       ayrı kuralı devrede (bkz. dosya sonu DOKUNMA HEDEFİ bloğu). */
    padding-inline: .6rem !important;
    transition: color var(--t-transition);
}
.t-navbar .nav-link:hover { color: var(--t-accent); }
.t-navbar .nav-link.active { color: var(--t-accent); font-weight: 600; }
/* Navbar CTA ("Teklif Alın") — .btn-accent'in normal boyutu navbar'da fazla
   iri kalıyordu; kompakt yükseklik ama yine de 44px dokunma hedefinin ALTINA
   İNMEZ (mobil medya sorgusu .btn için zaten min-height:44px zorunlu kılıyor,
   bkz. dosya sonundaki "DOKUNMA HEDEFİ" bloğu — bu kural onunla ÇAKIŞMAZ,
   yalnızca masaüstünde daha kompakt görünür). */
.t-navbar__cta.btn { height: 44px; padding-inline: 1.35rem; font-size: .875rem; white-space: nowrap; }

/* ===== Navbar tek satır garantisi (koddata) =====
   Ölçüm (1440px, TR): logo 52px yüksekte ~190px, 7 menü ~780px, sağ blok
   ~254px → 1320px kaba sığar. 1200-1399px arasında kap akışkan (container-xxl)
   ve tipografi bir kademe küçülür; hiçbir bileşen sarmaz (flex-wrap:nowrap). */
.t-navbar .navbar-collapse { flex-wrap: nowrap; min-width: 0; }
.t-navbar .navbar-nav { flex-wrap: nowrap; min-width: 0; }
.t-navbar .navbar-collapse > .d-flex { flex-shrink: 0; white-space: nowrap; }
.t-navbar .navbar-brand { flex-shrink: 0; }
.t-navbar .navbar-brand img { max-height: var(--c-logo-h, 52px); }
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .t-navbar .nav-link { font-size: .85rem; padding-inline: .45rem !important; }
    .t-navbar .navbar-brand img { max-height: 46px; }
    .t-navbar__cta.btn { padding-inline: 1rem; font-size: .8125rem; }
    .t-navbar .navbar-collapse > .d-flex { gap: .35rem !important; }
}
@media (min-width: 1400px) {
    .t-navbar .nav-link { font-size: .9rem; padding-inline: .55rem !important; }
}
/* Hamburger modunda (1200px altı) menü satırları dokunma hedefi boyunda */
@media (max-width: 1199.98px) {
    .t-navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
}

/* Min dokunma alanı ikon butonları */
.t-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    color: var(--t-secondary);
    transition: background var(--t-transition), color var(--t-transition), border-color var(--t-transition), transform var(--t-transition);
    cursor: pointer;
}
.t-iconbtn:hover { background: var(--t-accent-soft); color: var(--t-accent); border-color: var(--t-accent); }
.t-iconbtn:active { transform: scale(.94); }

/* ---------- Butonlar ----------
   FAZ-B: köşe + buton stili köprüsü.
   `--c-button-style` diye bir CSS DEĞİŞKENİ YOK (backend sözleşmesi) —
   customizer.js customizer_button_style değerini body'ye
   `data-btn-style="solid|outline|pill"` attribute'u olarak yazar (bkz.
   _customizer_vars.html.twig başındaki not). Varsayılan/"solid": taban
   kural artık --t-radius-pill DEĞİL --t-radius kullanır (aşağıda değişti)
   ki "Köşe Yuvarlaklığı" slider'ı BUTONLARDA DA görünür olsun (önceden
   butonlar sabit pill idi, slider'a hiç tepki vermiyordu — bu gerçek bir
   işlevsel boşluktu, bkz. dosya başı FAZ-B yorumu). "pill" seçilirse köşe
   slider'dan BAĞIMSIZ her zaman tam yuvarlanır ("hap" tanımı gereği).
   "outline" seçilirse ANA CTA (.btn-accent) dolgu yerine çerçeveli olur
   (ikincil .btn-outline-accent zaten çerçeveli olduğundan görünürde
   değişmez — beklenen/doğru davranış). */
.btn {
    border-radius: var(--t-radius-sm);   /* spec: buton radius 10px (--t-radius-sm), --t-radius DEĞİL */
    font-family: var(--t-font-heading);
    min-height: 44px;
    cursor: pointer;
    transition: background var(--t-transition), color var(--t-transition), transform var(--t-transition), box-shadow var(--t-transition);
}
/* ★ background-COLOR + background-IMAGE AYRI yazılır (tek `background`
   kısayolu DEĞİL): kısayol background-color'ı `transparent`a sıfırlıyordu ve
   buton metni gradient boyanmadığı anda sayfa zeminine karşı kalıyordu
   (ölçülen: 1.05:1). Alttaki opak renk hem bu boşluğu kapatır hem de
   denetleyicilerin gerçek kontrastı ölçmesini sağlar. Görsel sonuç AYNI —
   opak gradient zaten rengi tamamen örter. */
.btn-accent {
    background-color: var(--t-accent);
    background-image: var(--t-gradient-accent-fill);
    color: var(--t-on-accent);
    border: none;
    font-weight: 600;
    padding: 0.7rem 1.6rem;
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow-sm);
}
.btn-accent:hover {
    color: var(--t-on-accent);
    transform: translateY(-2px);
    box-shadow: var(--t-shadow-accent);
}
.btn-accent:active { transform: translateY(0); }
.btn-accent.btn-lg { padding: 0.9rem 2rem; font-size: 1.05rem; }

.btn-outline-accent {
    background: transparent;
    color: var(--t-primary);
    border: 1.5px solid var(--t-border-strong);
    font-weight: 600;
    padding: 0.7rem 1.6rem;
    border-radius: var(--t-radius-sm);
}
.btn-outline-accent:hover {
    background: var(--t-accent);
    color: var(--t-on-accent);   /* accent DOLGU üstünde: koyu modda beyaz 3.68:1 ✗ idi, şimdi 7.02:1 ✓ */
    border-color: var(--t-accent);
    transform: translateY(-2px);
    box-shadow: var(--t-shadow-accent);
}
.btn-outline-accent.btn-lg { padding: 0.9rem 2rem; font-size: 1.05rem; }

/* "outline" stili: ana CTA (.btn-accent) dolgu yerine çerçeveli olur. */
[data-btn-style="outline"] .btn-accent {
    background: transparent;
    color: var(--t-accent);
    border: 1.5px solid var(--t-accent);
    box-shadow: none;
}
[data-btn-style="outline"] .btn-accent:hover {
    background: var(--t-accent);
    color: var(--t-on-accent);
}

/* "pill" stili: köşe --c-radius'tan BAĞIMSIZ her zaman tam yuvarlak. */
[data-btn-style="pill"] .btn-accent,
[data-btn-style="pill"] .btn-outline-accent {
    border-radius: var(--t-radius-pill);
}

/* Filtre çipleri (kategori) */
.btn-sm.btn-outline-accent,
.btn-sm.btn-accent { padding: .4rem 1rem; font-size: .875rem; }

/* ---------- Hero / Slider ----------
   Hero her zaman beyaz metin taşır (görsel + koyu scrim üstünde ya da
   görselsizken düz koyu zemin). Bu yüzden zemin mod-aware --t-primary'ye
   DEĞİL sabit koyu renge bağlanır; aksi halde koyu modda görselsiz hero
   beyaza döner ve "beyaz üzerine beyaz" olur. */
.t-hero {
    position: relative;
    min-height: clamp(480px, 68vh, 720px);
    display: flex;
    align-items: center;
    color: #fff;
    background: #0F172A; /* sabit koyu navy — scrim/metin her modda okunur */
    overflow: hidden;
}
.t-hero__media { position: absolute; inset: 0; }
.t-hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.06);
    animation: t-hero-zoom 14s ease-out forwards;
}
@keyframes t-hero-zoom { to { transform: scale(1); } }
.t-hero__scrim {
    position: absolute; inset: 0;
    background: var(--t-gradient-hero);
}
/* Dekoratif "blob" ışığı Enterprise Clean'de kaldırıldı (spec §3: "blob
   decorations" kaldırılır — sınıf/pseudo-element seçici kalır, görünmez). */
.t-hero::after { content: none; }
.t-hero__content { position: relative; z-index: 2; max-width: 46rem; }
/* FAZ-H 4.2: h1 VE h2 birlikte hedeflenir — carousel'de yalnızca ilk
   (aktif) slayt <h1>, sonraki slaytlar <h2> kullanır (tek sayfa-başlığı
   kuralı, bkz. home.html.twig'teki gerekçe); görsel stil ikisinde de
   AYNI kalmalı ki slaytlar arasında geçişte hiçbir boyut/ağırlık sıçraması
   olmasın. */
.t-hero__content h1,
.t-hero__content h2 {
    color: #fff;
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.t-hero__content p {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: rgba(255,255,255,.88);
    max-width: 40ch;
    line-height: 1.6;
}
.t-hero__content .btn-outline-accent {
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.t-hero__content .btn-outline-accent:hover {
    background: #fff;
    color: var(--t-primary);
    border-color: #fff;
}

/* Hero carousel kontrolleri */
.t-hero-carousel .carousel-control-prev,
.t-hero-carousel .carousel-control-next { width: 8%; z-index: 3; }
.t-hero-carousel .carousel-indicators { z-index: 3; margin-bottom: 1.5rem; }
.t-hero-carousel .carousel-indicators [data-bs-target] {
    width: 28px; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.5); border: none;
}
.t-hero-carousel .carousel-indicators .active { background: #fff; }

/* ---------- Kartlar ---------- */
.t-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);   /* spec: kartlar dinlenme halinde de hafif gölge taşır */
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-transition), box-shadow var(--t-transition), border-color var(--t-transition);
}
.t-card:hover {
    transform: translateY(-4px);   /* spec: hover lift 4px */
    box-shadow: var(--t-shadow-lg);
    border-color: var(--t-border-strong);
}
.t-card__media {
    aspect-ratio: 16 / 10;
    background: var(--t-surface-2);
    overflow: hidden;
    position: relative;
}
.t-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-transition-slow); }
.t-card:hover .t-card__media img { transform: scale(1.06); }
.t-card__body { padding: var(--t-space-3); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.t-card__title {
    font-family: var(--t-font-heading);
    font-size: 1.2rem; font-weight: 600; color: var(--t-primary);
    letter-spacing: -0.01em;
    transition: color var(--t-transition);
}
.t-card:hover .t-card__title { color: var(--t-accent); }
.t-card__text { color: var(--t-muted); font-size: 0.95rem; flex: 1; line-height: 1.6; }

/* Kart "Detay" link satırı + ok kayması */
.t-card__more {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--t-accent); font-weight: 600; font-size: .9rem;
    margin-top: .25rem;
}
.t-card__more i { transition: transform var(--t-transition); }
.t-card:hover .t-card__more i { transform: translateX(4px); }

/* Görseli olmayan kartlar için yer tutucu (CLS önleme) */
.t-card__media--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--t-border-strong);
    background: linear-gradient(135deg, var(--t-surface-2), var(--t-surface));
}

/* Genel içerik kartı (display:block varyantı şablonlarda kullanılıyor) */
.t-card.p-4, .t-card.p-md-5 { transition: transform var(--t-transition), box-shadow var(--t-transition), border-color var(--t-transition); }

/* ---------- Rozet / etiket ---------- */
.t-badge {
    display: inline-block;
    font-family: var(--t-font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--t-radius-pill);
    background: var(--t-surface-2);
    color: var(--t-secondary);
}
.t-badge--accent { background: var(--t-accent-soft); color: var(--t-accent); }

/* ---------- İkon balonu (özellik/değer bölümleri) ---------- */
.t-icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem;
    border-radius: var(--t-radius);
    background: var(--t-accent-soft);
    color: var(--t-accent);
    font-size: 1.5rem;
    transition: transform var(--t-transition), background var(--t-transition);
}
.t-card:hover .t-icon-circle { transform: scale(1.08); }

/* ---------- Referans logoları ---------- */
.t-logo-strip { display: flex; flex-wrap: wrap; gap: var(--t-space-6); align-items: center; justify-content: center; }
.t-logo-strip img {
    height: 44px; width: auto; object-fit: contain;
    filter: grayscale(1); opacity: .55;
    transition: filter var(--t-transition), opacity var(--t-transition), transform var(--t-transition);
}
.t-logo-strip a:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.05); }

/* ---------- İstatistik / sayaç ---------- */
.t-stat { text-align: center; }
.t-stat__num {
    font-family: var(--t-font-heading);
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    font-weight: 800; color: var(--t-accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.t-stat__label { color: var(--t-muted); font-weight: 500; margin-top: .5rem; }

/* ============================================================
   ENTERPRISE CLEAN — YENİ BİLEŞENLER (koddata ana sayfası)
   Sözleşme: tümü `t-` önekli YENİ sınıflar (mevcut hiçbir .t-* silinmedi/
   yeniden adlandırılmadı). Mockup: assets/2026-09-04-koddata-direction-a.html.
   ============================================================ */

/* ---------- Ana sayfa hero'su (açık zemin, tarayıcı çerçeveli görsel) ----------
   Modern Corporate'ın koyu/resim-üstü-scrim .t-hero'sundan BİLİNÇLİ olarak
   AYRI bir sınıf: .t-hero hâlâ project/show.html.twig'in koyu sayfa başlığı
   için kullanılıyor (farklı yapı — media+scrim+content), yapısını burada
   değiştirmek o sayfayı kırardı. Ana sayfa artık açık, iki-kolonlu bir hero
   kullanıyor (spec §4.1). */
.t-home-hero {
    position: relative;
    background:
        radial-gradient(48rem 32rem at 82% 6%, var(--t-accent-soft) 0%, transparent 65%),
        var(--t-bg);
    padding-block: clamp(2.5rem, 7vw, var(--t-space-10)) clamp(1.5rem, 4vw, var(--t-space-6));
    overflow: visible;
}
.t-home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    gap: var(--t-space-6);
    align-items: start;
}
@media (max-width: 991.98px) {
    .t-home-hero__grid { grid-template-columns: 1fr; }
}
.t-home-hero h1 {
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);   /* spec: h1 52-56px masaüstünde (3.5rem=56px) */
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--t-primary);
}
.t-home-hero__sub {
    margin-top: var(--t-space-3);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--t-muted);
    max-width: 34rem;
}
.t-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-2);
    margin-top: var(--t-space-4);
}
.t-home-hero__visual { position: relative; }
@media (min-width: 992px) {
    /* Mockup: görsel çerçevesi güven şeridine hafifçe taşar (spec §4.1). */
    .t-home-hero__visual { margin-bottom: -2.5rem; }
}

/* ---------- Hero güvenilirlik satırı (kısa kontrol-işaretli liste) ----------
   Direction D: hero aksiyon butonlarının altında ince bir üst-kenarlıkla
   ayrılan 2-3 satırlık "sabit kapsam / KVKK-GDPR / canlı sistemler" listesi
   (spec §hero). `setting_json('hero_proof')` boşsa hiç basılmaz. */
.t-hero-proof {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-top: var(--t-space-4);
    padding-top: var(--t-space-3);
    border-top: 1px solid var(--t-border);
}
.t-hero-proof__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--t-secondary);
}
.t-hero-proof__item i {
    flex-shrink: 0;
    color: var(--t-accent);
    font-size: 1.05rem;
}

/* ---------- Tarayıcı çerçevesi (ürün ekranı mockup'ı) ---------- */
.t-browser-frame {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    overflow: hidden;
}
.t-browser-frame__bar {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-inline: var(--t-space-2);
    background: var(--t-surface-2);
    border-bottom: 1px solid var(--t-border);
}
.t-browser-frame__bar span {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--t-border-strong);
}
.t-browser-frame img {
    display: block;
    width: 100%;
    height: clamp(280px, 32vw, 460px);
    object-fit: cover;
    object-position: top;
}

/* ---------- Kanıt bandı (güven şeridi + rakam kartları) ----------
   Direction D: eskiden ayrı olan "güven şeridi" (referans isimleri) ile
   koyu "rakam bandı" TEK, açık zeminli bir kanıt bandında birleşti (spec:
   ana sayfa §2 "proof band"). Sol yarı referans isimleri, sağ yarı 4
   metrik kartı — her iki yarı da kendi verisi boşsa BAĞIMSIZ gizlenir
   (home.html.twig'te ayrı ayrı kontrol edilir); yalnızca tek yarı varsa
   `.t-trust__row--single` ızgarayı tek sütuna indirger. */
.t-trust {
    padding-block: var(--t-space-6) var(--t-space-4);
    background: var(--t-bg);
    border-bottom: 1px solid var(--t-border);
}
.t-trust__row {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr;
    gap: var(--t-space-4) var(--t-space-6);
    align-items: center;
}
.t-trust__row--single { grid-template-columns: 1fr; }
@media (max-width: 767.98px) {
    .t-trust__row { grid-template-columns: 1fr; }
}
.t-trust__left { display: flex; flex-direction: column; gap: var(--t-space-2); }
.t-trust__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-muted-2);
    white-space: nowrap;
}
.t-trust__marks {
    /* Öğe #6: semantik <ul> (home.html.twig) — varsayılan liste stilini
       (madde işareti/girinti) sıfırlar, görsel sonuç DEĞİŞMEZ. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--t-space-2) var(--t-space-6);
    flex: 1 1 auto;
}
.t-trust__item {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-muted-2);
}
/* Sağ yarı: 4 metrik kart (data-count sayaç kancaları — layout.html.twig'in
   scroll-reveal script'i bunları AYNEN önceki t-stats-band'de olduğu gibi
   kullanır, hiçbir JS değişikliği gerekmez). */
.t-trust__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--t-space-2);
}
@media (max-width: 575.98px) {
    .t-trust__stats { grid-template-columns: repeat(2, 1fr); }
}
.t-trust__stat-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow);
    padding: var(--t-space-2) var(--t-space-1);
    text-align: center;
}
.t-trust__stat-card .t-stat__num { font-size: clamp(1.4rem, 2.6vw, 1.75rem); color: var(--t-primary); }
.t-trust__stat-card .t-stat__label { font-size: .78rem; margin-top: .25rem; }

/* ---------- Yol seçimi ("Size uygun yolu seçin" — sektör/ihtiyaç) ----------
   Direction D: ana sayfanın "Nereden başlayalım" bölümü, iki eşit sütun
   (sektöre göre / ihtiyaca göre), her biri bir panel + tıklanabilir satır
   listesi (spec: home_paths ayarı). `.t-path-icon` rengi BİLİNÇLİ OLARAK
   navy (--t-primary) — mockup'ta accent değil ink kullanılıyor, ikon
   tekrarı sayfada "her şey mavi" doygunluğuna kaçmasın diye. */
.t-path-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--t-space-4);
}
@media (max-width: 767.98px) {
    .t-path-grid { grid-template-columns: 1fr; }
}
.t-path-col {
    background: var(--t-bg);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    padding: var(--t-space-4);
}
.t-path-col h3 {
    font-size: 1.2rem;
    margin-bottom: .2rem;
}
.t-path-col__intro {
    font-size: .9rem;
    color: var(--t-muted);
    margin-bottom: var(--t-space-3);
}
.t-path-list { display: flex; flex-direction: column; gap: .6rem; }
.t-path-item {
    display: flex;
    align-items: center;
    gap: var(--t-space-2);
    padding: .9rem .85rem;
    border-radius: var(--t-radius);
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t-transition), box-shadow var(--t-transition), transform var(--t-transition);
}
.t-path-item:hover {
    border-color: var(--t-accent);
    box-shadow: var(--t-shadow);
    color: inherit;
    transform: translateY(-2px);
}
.t-path-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--t-radius-sm);
    background: var(--t-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--t-primary);
}
.t-path-icon svg { width: 20px; height: 20px; }
.t-path-body { flex: 1; min-width: 0; }
.t-path-body__title {
    display: block;
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-size: .95rem;
    color: var(--t-primary);
}
.t-path-body__text {
    display: block;
    font-size: .82rem;
    color: var(--t-muted);
    margin-top: .2rem;
    line-height: 1.45;
}
.t-path-chev { flex-shrink: 0; color: var(--t-muted-2); font-size: .95rem; transition: transform var(--t-transition); }
.t-path-item:hover .t-path-chev { transform: translateX(3px); color: var(--t-accent); }

/* ---------- Hizmet kartı ("Ne yapıyoruz" ızgarası) ----------
   Direction D'de ana sayfa artık bu ızgarayı KULLANMIYOR (bkz. home.html.twig
   — "Nereden başlayalım" yol seçimi bölümü onun yerini aldı). Sınıf sözleşme
   gereği (mevcut .t-* asla silinmez) BURADA KALIR, başka bir şablon ileride
   yeniden kullanabilir. */
.t-service-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: var(--t-space-4);
    height: 100%;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--t-shadow-xs);
    transition: transform var(--t-transition), box-shadow var(--t-transition), border-color var(--t-transition);
}
.t-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--t-shadow-lg);
    border-color: var(--t-border-strong);
    color: inherit;
}
.t-service-card h3 {
    font-size: 1.15rem;
    margin-top: var(--t-space-3);
    letter-spacing: -0.01em;
    color: var(--t-primary);
}
.t-service-card p {
    font-size: .93rem;
    line-height: 1.6;
    color: var(--t-muted);
    margin-top: .6rem;
    flex: 1;
}
.t-service-card .t-card__more { margin-top: auto; }

/* ---------- İkon karo (hizmet kartı ikonu) ---------- */
.t-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: var(--t-radius-sm);
    background: var(--t-accent-soft);
    color: var(--t-accent);
}
.t-icon-tile svg { width: 22px; height: 22px; }

/* ---------- Rakam bandı (sabit koyu — bkz. .t-cta/.t-footer notu) ----------
   Beyaz metin taşır → mod-aware token'a DEĞİL, sabit koyu navy'ye bağlanır
   (koyu modda beyaza dönüp metni kaybetmesin, bkz. dosya başı frontend
   memory kuralı). */
.t-stats-band {
    background: #0F172A;
    padding-block: var(--t-space-8);
}
.t-stats-band__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: center;
    gap: var(--t-space-4);
}
@media (max-width: 991.98px) {
    .t-stats-band__row { grid-template-columns: repeat(2, 1fr); }
    .t-stats-band__cta {
        grid-column: 1 / -1;
        border-inline-start: none;
        border-top: 1px solid rgba(255,255,255,.14);
        padding-inline-start: 0;
        padding-top: var(--t-space-3);
    }
}
.t-stats-band .t-stat { text-align: start; }
.t-stats-band .t-stat__num { color: #fff; }
.t-stats-band .t-stat__label { color: rgba(255,255,255,.62); }
.t-stats-band__cta {
    padding-inline-start: var(--t-space-4);
    border-inline-start: 1px solid rgba(255,255,255,.14);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--t-space-2);
}
.t-stats-band__cta p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255,255,255,.78);
    white-space: nowrap;
}

/* ---------- "Nasıl çalışıyoruz" süreç adımları ---------- */
.t-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--t-space-6);
}
@media (max-width: 767.98px) {
    .t-process { grid-template-columns: 1fr; }
}
.t-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--t-radius-sm);
    background: var(--t-primary);
    /* ★ var(--t-on-primary) — DEĞİL sabit #fff: koyu modda --t-primary neredeyse
       beyaza döner (başlık metni rolü), sabit beyaz metin o zeminde kaybolurdu
       (ölçüldü: koyu modda kare görünür ama "01" rakamı okunmaz oluyordu).
       --t-on-primary ÇİFTİ tam bu senaryo için var: açık modda beyaz, koyu
       modda ink — kare her modda okunur kalır. */
    color: var(--t-on-primary);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: var(--t-space-2);
}
.t-process__step h3 {
    font-size: 1.2rem;
    margin-top: var(--t-space-2);
    color: var(--t-primary);
}
.t-process__step p {
    font-size: .93rem;
    line-height: 1.6;
    color: var(--t-muted);
    margin-top: .6rem;
}

/* ---------- Büyük referans alıntısı (ana sayfa) ---------- */
.t-quote-lg { max-width: 54rem; }
.t-quote-lg__mark {
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--t-accent);
    opacity: .28;
    margin-bottom: .5rem;
}
.t-quote-lg blockquote {
    margin: 0;
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--t-primary);
}
.t-quote-lg figcaption {
    margin-top: var(--t-space-4);
    display: flex;
    align-items: center;
    gap: .9rem;
}
.t-quote-lg__dash { width: 32px; height: 2px; flex-shrink: 0; background: var(--t-accent); }
.t-quote-lg__attr { font-size: .93rem; color: var(--t-muted); font-weight: 500; }

/* ---------- Blog mini kartı (ana sayfa "Blog'dan") ---------- */
.t-post-mini {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: var(--t-space-3);
    color: inherit;
    text-decoration: none;
    transition: transform var(--t-transition), box-shadow var(--t-transition), border-color var(--t-transition);
}
.t-post-mini:hover {
    transform: translateY(-4px);
    box-shadow: var(--t-shadow-md);
    border-color: var(--t-border-strong);
    color: inherit;
}
.t-post-mini__date {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--t-muted-2);
}
.t-post-mini h3 {
    font-size: 1.05rem;
    line-height: 1.4;
    margin-top: var(--t-space-2);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-primary);
}
.t-post-mini .t-card__more { margin-top: auto; padding-top: var(--t-space-2); }

/* ---------- Testimonial ---------- */
.t-quote {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: var(--t-space-4);
    height: 100%;
    position: relative;
    transition: transform var(--t-transition), box-shadow var(--t-transition);
}
.t-quote:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-md); }
.t-quote::before {
    content: "\201C";
    /* I8 RTL düzeltmesi: right → inset-inline-end (mantıksal), RTL'de elle
       tersine çevirmeye gerek kalmadan doğru kenarda kalır. */
    position: absolute; top: .25rem; inset-inline-end: 1.25rem;
    font-family: Georgia, serif;
    font-size: 4.5rem; line-height: 1;
    color: var(--t-accent-soft);
}
.t-quote__text { color: var(--t-fg); font-size: 1.05rem; line-height: 1.7; position: relative; }
.t-quote__author { display: flex; align-items: center; gap: var(--t-space-1); margin-top: var(--t-space-3); }
.t-quote__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.t-quote__name { font-weight: 600; color: var(--t-primary); }
.t-quote__role { color: var(--t-muted); font-size: 0.875rem; }
.t-stars { color: var(--t-warning); letter-spacing: 2px; }

/* ---------- Footer ----------
   Footer her iki modda da KOYU zemin + açık metin (tasarım niyeti).
   Bu yüzden mod-aware --t-primary'ye DEĞİL, footer'a özel sabit
   token'lara bağlanır; böylece koyu modda zemin beyaza dönüp
   "beyaz üzerine beyaz yazı" oluşmaz. Tek kaynak: --t-footer-*. */
.t-footer {
    --t-footer-bg: #0F172A;                  /* sabit koyu navy zemin (spec §3) */
    --t-footer-fg: #ffffff;                  /* başlık/marka — tam beyaz */
    --t-footer-muted: rgba(255, 255, 255, .72); /* gövde/link — okunur */
    --t-footer-hover: #ffffff;
    --t-footer-border: rgba(255, 255, 255, .14);
    --t-footer-chip: rgba(255, 255, 255, .08);

    position: relative;
    background: var(--t-footer-bg);
    color: var(--t-footer-fg);
    padding-block: var(--t-space-10) var(--t-space-4);
    margin-top: var(--t-space-10);
    overflow: hidden;
}
/* Enterprise Clean: üst gradient şerit + dekoratif "blob" ışığı kaldırıldı
   (spec §3 — düz koyu bant, dekorasyon yok). Seçiciler sözleşme gereği kalır. */
.t-footer::before { content: none; }
.t-footer::after { content: none; }
.t-footer > .container { position: relative; z-index: 1; }
.t-footer h5 {
    color: var(--t-footer-fg);
    font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: var(--t-space-3); opacity: .7;
}
/* I8 RTL düzeltmesi: padding-left → padding-inline-start (fiziksel değil
   mantıksal yön). Önceden bu iki kural + aşağıdaki .t-footer__social hover'ı
   [dir="rtl"] altında ELLE tersine çevriliyordu (padding-left/right takası);
   mantıksal property kullanınca dir="rtl"'de TARAYICI kendisi çevirir, ayrı
   bir override kuralı GEREKMEZ (dosya sonundaki RTL bloğundan kaldırıldı). */
.t-footer a { color: var(--t-footer-muted); transition: color var(--t-transition), padding-inline-start var(--t-transition); }
.t-footer ul a:hover { color: var(--t-footer-hover); padding-inline-start: .35rem; }
.t-footer__brand { font-family: var(--t-font-heading); font-weight: 800; font-size: 1.4rem; color: var(--t-footer-fg); }
.t-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--t-footer-chip);
    border: 1px solid var(--t-footer-border);
    color: var(--t-footer-muted);
    transition: background var(--t-transition), color var(--t-transition), transform var(--t-transition), border-color var(--t-transition);
}
.t-footer__social a:hover { background: var(--t-accent); color: var(--t-on-accent); transform: translateY(-3px); padding-inline-start: 0; border-color: var(--t-accent); }
.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: 0.875rem;
}

/* ---------- Formlar ---------- */
.t-form .form-label { font-weight: 600; color: var(--t-secondary); margin-bottom: .4rem; }
.t-form .form-control,
.t-form .form-select {
    border-radius: var(--t-radius-sm);
    border: 1.5px solid var(--t-border);
    background: var(--t-surface);
    color: var(--t-fg);
    min-height: 48px;
    padding: .65rem .9rem;
    transition: border-color var(--t-transition), box-shadow var(--t-transition);
}
.t-form .form-control:focus,
.t-form .form-select:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 4px var(--t-accent-soft);
}
.t-form textarea.form-control { min-height: 9rem; }
.t-required { color: var(--t-danger); }

/* ---------- Dosya seçici (kariyer başvuru formu: CV yükleme) ----------
   Native <input type="file"> label içine gizlenir (opacity:0 — display:none
   DEĞİL, klavye/screen reader erişimi ve :invalid stilleri korunur). Kart
   görünümü .form-control ile aynı border/radius dilini paylaşır. */
.t-file-picker {
    position: relative;
    display: flex; align-items: center; gap: var(--t-space-3);
    border: 1.5px dashed var(--t-border);
    border-radius: var(--t-radius-sm);
    background: var(--t-surface);
    padding: .85rem 1rem;
    cursor: pointer;
    transition: border-color var(--t-transition), background var(--t-transition);
}
.t-file-picker:hover { border-color: var(--t-accent); background: var(--t-surface-2); }
.t-file-picker.has-file { border-style: solid; border-color: var(--t-accent); background: var(--t-accent-soft); }
.t-file-picker__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: var(--t-radius-sm);
    background: var(--t-surface-2);
    color: var(--t-accent);
    font-size: 1.15rem;
}
.t-file-picker.has-file .t-file-picker__icon { background: #fff; }
.t-file-picker__text { flex: 1 1 auto; min-width: 0; }
.t-file-picker__title {
    display: block; font-weight: 600; color: var(--t-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-file-picker__hint { display: block; font-size: .78rem; color: var(--t-muted); margin-top: .1rem; }
.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-ring, var(--t-accent)); outline-offset: 2px; }

/* ---------- İçerik (rich text) ---------- */
.t-prose { color: var(--t-fg); line-height: 1.8; max-width: 72ch; font-size: 1.02rem; }
.t-prose img { max-width: 100%; height: auto; border-radius: var(--t-radius-sm); margin-block: 1rem; }
.t-prose h2, .t-prose h3 { margin-top: var(--t-space-4); margin-bottom: .75rem; }
.t-prose p { margin-bottom: 1.1rem; }
.t-prose ul, .t-prose ol { padding-left: 1.25rem; margin-bottom: 1.1rem; }
.t-prose li { margin-bottom: .4rem; }
.t-prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.t-prose blockquote {
    border-left: 3px solid var(--t-accent);
    padding-left: 1.25rem; margin: 1.5rem 0;
    color: var(--t-muted); font-style: italic;
}

/* ---------- İç sayfa başlık şeridi ---------- */
.t-page-header {
    position: relative;
    background:
        radial-gradient(60rem 30rem at 100% -20%, var(--t-accent-soft) 0%, transparent 60%),
        var(--t-surface-2);
    border-bottom: 1px solid var(--t-border);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.t-page-header h1 { font-size: clamp(1.85rem, 4vw, 2.75rem); }
.t-page-header p { color: var(--t-muted); font-size: 1.1rem; max-width: 60ch; }

/* ---------- Breadcrumb ---------- */
.t-breadcrumb { font-size: 0.875rem; color: var(--t-muted); }
.t-breadcrumb a { color: var(--t-muted); }
.t-breadcrumb a:hover { color: var(--t-accent); }

/* ---------- Boş durum ---------- */
.t-empty {
    text-align: center; padding: var(--t-space-10) var(--t-space-2); color: var(--t-muted);
    border: 1.5px dashed var(--t-border); border-radius: var(--t-radius);
    background: var(--t-surface);
}
.t-empty i { color: var(--t-border-strong); }

/* ---------- CTA bandı ----------
   Beyaz metin taşır → zemin mod-aware --t-primary'ye DEĞİL sabit koyu
   navy'ye bağlanır (koyu modda beyaza dönüp metni kaybetmesin). */
.t-cta {
    position: relative;
    background: #0F172A; /* sabit koyu navy (spec §3) */
    border-radius: var(--t-radius-lg);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    color: #fff;
    overflow: hidden;
    text-align: center;
}
/* Enterprise Clean: çift radial-gradient "blob" kaldırıldı — düz koyu bant. */
.t-cta::before { content: none; }
.t-cta > * { position: relative; z-index: 1; }
.t-cta h2 { color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.t-cta p { color: rgba(255,255,255,.85); }
.t-cta .btn-outline-accent { color: #fff; border-color: rgba(255,255,255,.45); }
.t-cta .btn-outline-accent:hover { background: #fff; color: var(--t-primary); border-color: #fff; }

/* ---------- Sayfalama ---------- */
.pagination { gap: .35rem; }
.pagination .page-link {
    border-radius: var(--t-radius-sm);
    border-color: var(--t-border);
    color: var(--t-secondary);
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--t-surface);
}
.pagination .page-link:hover { background: var(--t-accent-soft); color: var(--t-accent); border-color: var(--t-accent); }
.pagination .page-item.active .page-link {
    background-color: var(--t-accent);
    background-image: var(--t-gradient-accent-fill);
    border-color: transparent;
    color: var(--t-on-accent);   /* aktif sayfa numarası = metin taşıyan accent dolgusu (bkz. .btn-accent notu) */
}

/* ---------- FAZ-E: Yüzen WhatsApp butonu ----------
   "Modern Corporate" dili: yuvarlak FAB, gradient dolgu, yumuşak glow gölge —
   theme.css'in geri kalanıyla aynı token'lar (--t-gradient-accent,
   --t-shadow-accent, --t-radius-pill), sabit renk/hex YOK. FAZ-B Theme
   Customizer'daki "Ana Renk" slider'ı bu butonu da otomatik günceller.
   Sağ-alt sabit köşe; z-index 1030 = Bootstrap sticky-top navbar'ın (1020)
   üstünde, dropdown/modal (1050+) altında — hiçbir katman çakışmaz. Mobilde
   metin etiketi gizlenir (dar ekranda yer kaplamasın), yalnızca ikon kalır;
   58px çap 44px asgari dokunma hedefinin üstünde. */
/* Yalnız simge (kullanıcı kararı, Kaya ile aynı): 56px yuvarlak, yazı görsel olarak gizli, aria-label duruyor. */
.t-floating-whatsapp {
    position: fixed;
    right: var(--t-space-2);
    bottom: var(--t-space-2);
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: var(--t-accent);
    background-image: var(--t-gradient-accent-fill);
    color: var(--t-on-accent);
    border-radius: 50%;
    box-shadow: var(--t-shadow-accent);
    text-decoration: none;
    line-height: 1;
    transition: transform var(--t-transition), box-shadow var(--t-transition);
}
.t-floating-whatsapp:hover,
.t-floating-whatsapp:focus-visible {
    color: var(--t-on-accent);
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-lg);
}
.t-floating-whatsapp:active { transform: translateY(-1px); }
.t-floating-whatsapp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: transparent;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.t-floating-whatsapp__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .t-floating-whatsapp {
        right: var(--t-space-1);
        bottom: var(--t-space-1);
    }
}

/* ---------- Reduced motion ---------- */
@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; }
    .t-card:hover { transform: none; }
    .t-card:hover .t-card__media img { transform: none; }
    .t-hero__media img { animation: none; transform: none; }
    .t-floating-whatsapp:hover { transform: none; }
}

/* ============================================================
   FAZ-F — İçerik Modülleri (SSS, Fiyatlandırma, Newsletter, Arama)
   "Modern Corporate" dili: yumuşak köşe, katmanlı gölge, gradient
   accent — mevcut .t-card/.t-badge/.t-form token'larıyla tutarlı,
   yeni renk/hex İCAT EDİLMEDİ, hepsi --t-* değişkenlerinden gelir.
   ============================================================ */

/* ---------- SSS: Bootstrap accordion, tema token'larına bağlanmış ----------
   Özel bir accordion component'i yazmak yerine Bootstrap'in native
   .accordion sınıflarını temanın --t-* token'larıyla köprülüyoruz
   (yeni CSS component İCAT ETMEDEN Bootstrap'in a11y/klavye davranışını
   olduğu gibi kullanıyoruz — collapse/aria-expanded zaten Bootstrap JS'inde). */
.t-faq-accordion .accordion-item {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    margin-bottom: var(--t-space-1);
    overflow: hidden;
}
.t-faq-accordion .accordion-item:last-child { margin-bottom: 0; }
.t-faq-accordion .accordion-button {
    font-family: var(--t-font-heading);
    font-weight: 600;
    color: var(--t-primary);
    background: var(--t-surface);
    padding: 1.25rem 1.5rem;
    box-shadow: none;
}
.t-faq-accordion .accordion-button:not(.collapsed) {
    /* NOT: metin rengi BİLİNÇLİ OLARAK --t-accent DEĞİL --t-primary kalır.
       --t-accent-soft (%10 alfa) zemin üstünde --t-accent metni WCAG AA
       4.5:1'i garanti edemiyor (Theme Customizer'ın canlı "Ana Renk"
       değerine göre — özellikle #0d6efd gibi orta parlaklıkta tonlarda
       ölçülüp doğrulandı, ~3.9:1'e düşebiliyor). Vurgu, kontrast riski
       taşımayan sol kenarlık + zemin renginden gelir (ui-ux-pro-max:
       color-not-only — rengi TEK vurgu taşıyıcısı yapma). */
    color: var(--t-primary);
    background: var(--t-accent-soft);
    border-left: 3px solid var(--t-accent);
    box-shadow: none;
}
.t-faq-accordion .accordion-button:focus { box-shadow: none; }
.t-faq-accordion .accordion-button:focus-visible {
    outline: 3px solid var(--t-accent);
    outline-offset: -3px;
}
.t-faq-accordion .accordion-button::after { filter: none; }
.t-faq-accordion .accordion-body { padding: .25rem 1.5rem 1.5rem; }

/* ---------- Fiyatlandırma: 3 sütun karşılaştırma kartı ----------
   .isFeatured olan kart görsel olarak vurgulu: kalın accent kenarlık,
   yükseltilmiş gölge, "En Popüler" rozeti ve hafif ölçek — grid'in geri
   kalanından net biçimde ayrışır (ui-ux-pro-max: featured plan highlight). */
.t-pricing-card {
    background: var(--t-surface);
    border: 1.5px solid var(--t-border);
    border-radius: var(--t-radius-lg);
    padding: var(--t-space-4) var(--t-space-3);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-transition), box-shadow var(--t-transition), border-color var(--t-transition);
}
.t-pricing-card:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-md); border-color: var(--t-border-strong); }
.t-pricing-card--featured {
    border-color: var(--t-accent);
    box-shadow: var(--t-shadow-lg);
    position: relative;
}
@media (min-width: 992px) {
    .t-pricing-card--featured { transform: scale(1.04); z-index: 1; }
    .t-pricing-card--featured:hover { transform: scale(1.04) translateY(-4px); }
}
.t-pricing-card__badge {
    position: absolute;
    top: -.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--t-gradient-accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .35rem 1rem;
    border-radius: var(--t-radius-pill);
    box-shadow: var(--t-shadow-sm);
    white-space: nowrap;
}
.t-pricing-card__name { font-size: 1.25rem; margin-bottom: .25rem; }
.t-pricing-card__price {
    font-family: var(--t-font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--t-primary);
    line-height: 1.1;
    margin-top: .75rem;
}
.t-pricing-card--featured .t-pricing-card__price { color: var(--t-accent); }
.t-pricing-card__period { color: var(--t-muted); font-size: .9rem; margin-left: .35rem; }
.t-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: var(--t-space-3) 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1;
}
.t-pricing-card__features li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    color: var(--t-fg);
}
.t-pricing-card__features i { color: var(--t-success); margin-top: .2rem; flex-shrink: 0; }
.t-pricing-card .btn { width: 100%; margin-top: auto; }

/* ---------- Newsletter: footer abonelik formu ----------
   Tek satır input+buton (masaüstü), dikey yığın (mobil). Başarı/hata
   mesajı JS ile aynı konumda inline gösterilir (sayfa yenilenmeden). */
.t-newsletter-form {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.t-newsletter-form .form-control {
    flex: 1 1 14rem;
    min-width: 0;
    background: var(--t-surface-2);
    border-color: var(--t-border);
    color: var(--t-fg);
}
.t-newsletter-form .btn { flex-shrink: 0; }
.t-newsletter-form__feedback {
    font-size: .875rem;
    margin-top: .6rem;
    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 ikon-tetikleyici + açılır kutu ----------
   Navbar'a 10. kalabalık öge eklemek yerine ikon-only bir buton +
   üstten açılan/genişleyen kompakt bir arama paneli (FAZ-E frontend
   notunun devamı: navbar zaten 9 öge taşıyor). */
.t-search-panel {
    z-index: 5;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--t-surface);
    border-bottom: 1px solid var(--t-border);
    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;
}
.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; }

/* ---------- Arama sonuç sayfası ---------- */
.t-search-group + .t-search-group { margin-top: var(--t-space-4); }
.t-search-group__title {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--t-space-2);
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--t-border);
}
.t-search-group__title .t-badge { font-weight: 700; }
.t-search-result-card {
    display: block;
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    transition: border-color var(--t-transition), transform var(--t-transition), box-shadow var(--t-transition);
    height: 100%;
}
.t-search-result-card:hover { border-color: var(--t-accent); transform: translateY(-2px); box-shadow: var(--t-shadow-sm); color: inherit; }
.t-search-result-card__title { color: var(--t-primary); font-weight: 600; margin-bottom: .35rem; }
.t-search-result-card:hover .t-search-result-card__title { color: var(--t-accent); }
.t-search-result-card__snippet { color: var(--t-muted); font-size: .9rem; line-height: 1.6; margin: 0; }

/* ============================================================
   FAZ-G — Blog Geliştirmeleri (okuma süresi, paylaşım, etiketler,
   sidebar). "Modern Corporate" dili: yumuşak kart, rounded köşe,
   ince gölge — mevcut .t-card/.t-badge token'larıyla tutarlı.
   ============================================================ */

/* ---------- Okuma süresi rozeti ---------- */
.t-reading-time {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--t-muted);
    font-size: .85rem;
}
.t-reading-time i { color: var(--t-accent); }
/* Liste kartında: kartın meta satırına (başlık üstü) küçük ek bilgi */
.t-card__meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--t-muted);
    font-size: .78rem;
}

/* ---------- Sosyal paylaşım butonları ---------- */
.t-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}
.t-share__label { color: var(--t-muted); font-size: .85rem; font-weight: 600; margin-right: .2rem; }
.t-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--t-radius-pill);
    background: var(--t-surface-2);
    color: var(--t-secondary);
    font-size: 1.05rem;
    border: 1px solid transparent;
    transition: background var(--t-transition), color var(--t-transition), transform var(--t-transition);
}
.t-share__btn:hover { background: var(--t-accent); color: var(--t-on-accent); transform: translateY(-2px); }
.t-share__btn:focus-visible { outline: 3px solid var(--t-accent); outline-offset: 2px; }
.t-share__btn--copy { position: relative; }
.t-share__btn--copy.is-copied { background: var(--t-success); color: #fff; }
/* Kopyalandı geri bildirimi: buton üstünde beliren küçük balon */
.t-share__feedback {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--t-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .35rem .65rem;
    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 (detay sayfası) ---------- */
.t-post-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.t-post-tags .t-badge:hover { background: var(--t-accent); color: var(--t-on-accent); }

/* ---------- Blog sidebar ---------- */
.t-blog-sidebar__panel {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    padding: var(--t-space-3);
    box-shadow: var(--t-shadow-xs);
}
.t-blog-sidebar__title {
    font-size: .95rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--t-space-2);
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--t-border);
}
.t-blog-sidebar__recent-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    color: var(--t-fg);
    transition: color var(--t-transition);
}
.t-blog-sidebar__recent-item:hover { color: var(--t-accent); }
.t-blog-sidebar__recent-title { font-size: .92rem; font-weight: 600; line-height: 1.35; }
.t-blog-sidebar__recent-date { font-size: .76rem; color: var(--t-muted); }
.t-blog-sidebar__cat-link {
    color: var(--t-fg);
    padding: .4rem .1rem;
    font-size: .92rem;
    transition: color var(--t-transition);
}
.t-blog-sidebar__cat-link:hover, .t-blog-sidebar__cat-link.is-active { color: var(--t-accent); }
.t-blog-sidebar__cat-link.is-active .t-badge { background: var(--t-accent); color: var(--t-on-accent); }

/* Etiket rozeti aktif durumu (etiket liste sayfasında görüntülenen etiket) */
.t-badge.is-active { background: var(--t-accent); color: var(--t-on-accent); }

/* Blog liste/detay: içerik + sidebar 2 sütun grid (mobilde sidebar altta akar) */
.t-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--t-space-4); align-items: start; }
.t-blog-layout__sidebar { position: sticky; top: calc(var(--t-space-4) + 64px); }
@media (max-width: 991.98px) {
    .t-blog-layout { grid-template-columns: 1fr; }
    .t-blog-layout__sidebar { position: static; }
}

/* ============================================================
   FAZ-H 4.2: :focus-visible — genel klavye odak göstergesi.
   Bootstrap'in varsayılan mavi glow'u --c-primary/--t-accent'ten
   BAĞIMSIZDIR (customizer rengini yansıtmaz); bu kural tüm interaktif
   ögelerde (link, buton, form kontrolü, native Bootstrap bileşenleri)
   temanın kendi accent rengiyle tutarlı, 3:1+ kontrastlı bir halka
   sağlar. Var olan .t-faq-accordion .accordion-button:focus-visible
   kuralı (yukarıda) ile AYNI dil/kalınlık — burada GENELLEŞTİRİLİYOR.
   :focus (fare tıklamasında da tetiklenir) DEĞİL, yalnızca
   :focus-visible (klavye/programatik odak) kullanılır — fare
   kullanıcısında gereksiz halka göstermez (WCAG 2.4.7 + modern UX). */
:focus-visible {
    outline: 2px solid var(--t-accent);
    outline-offset: 2px;
    border-radius: var(--t-radius-sm);
}
/* Bootstrap'in kendi mavi box-shadow glow'u :focus-visible ile ÇAKIŞMASIN
   diye form kontrollerinde ve butonlarda söndürülür (üstteki outline
   tek gösterge kalır — çift halka görsel karmaşa yaratmaz). */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    box-shadow: none;
}

/* ============================================================
   SEO-audit I9 düzeltmesi: Arapça tipografi (html[lang="ar"]).
   Lexend/Source Sans 3 (--t-font-heading/--t-font-body varsayılanları)
   Arapça glif TAŞIMAZ — /ar/ sayfalarında görünmez metin yerine sistem
   fontuna sessizce düşüyordu. layout.html.twig SADECE ar locale'de gerçek
   bir Arapça aile (Noto Sans Arabic) <link>'i ekler; burada o aileyi
   --t-font-body/--t-font-heading'in ÖNÜNE koyarız — Latin locale'lerde
   (en/tr/de/fr) hiçbir şey DEĞİŞMEZ (html[lang] o sayfalarda "ar" değil).
   Negatif letter-spacing (başlıklarda -0.01/-0.02/-0.03em, bkz. dosya
   başındaki genel h1-h6 kuralı ve .t-hero__content/.t-home-hero/.t-post-mini
   override'ları) Arapçada bitişik harfleri sıkıştırıp okunaksızlaştırır —
   burada sıfırlanır. ÖZGÜLLÜK NOTU: bu seçiciler (html[lang="ar"] h1 vb.)
   yukarıdaki `.t-home-hero h1`/`.t-hero__content h1` ile AYNI özgüllükte
   (1 attribute/class + 1 etiket); dosyanın en altına yakın tanımlandığı için
   kaynak sırası bu bloğu KAZANDIRIR — ayrıca sıralamadan bağımsız olsun diye
   `body`/global `h1..h6,.t-heading` kuralına göre DAHA YÜKSEK özgüllük
   taşır (o ikisi kazanmaz zaten). Gövde satır yüksekliği 1.75'e çıkarılır
   (Arapça diyakritikler Latin'den daha fazla dikey alan ister).
   ============================================================ */
html[lang="ar"] body {
    font-family: 'Noto Sans Arabic', var(--t-font-body), system-ui, sans-serif;
    letter-spacing: 0;
    line-height: 1.75;
}
html[lang="ar"] .t-heading,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: 'Noto Sans Arabic', var(--t-font-heading), system-ui, sans-serif;
    letter-spacing: 0;
}

/* ============================================================
   FAZ-H 4.1: RTL desteği — [dir="rtl"] override bloğu.
   YAKLAŞIM: mevcut LTR kurallarının HİÇBİRİ değiştirilmedi (regresyon
   sıfır); bu blok SADECE dosyanın en sonunda, yukarıdaki fiziksel-yön
   (margin-left/right, padding-left/right, border-left/right) kurallarını
   [dir="rtl"] altında tersine çeviren ek kurallar tanımlar. Kaynak sırası
   gereği bu blok her zaman KAZANIR (aynı özgüllük, sonra tanımlı).
   Bootstrap'in KENDİ utility/bileşenleri (ms-x, me-x, ps-x, pe-x, dropdown,
   ★ NOT: bu satırda önceden `ms-*` `me-*` biçiminde yan yana yazılmış
   joker'ler vardı ve aradaki `*` + `/` dizisi CSS YORUMUNU ERKEN
   KAPATIYORDU; kalan yorum metni geçersiz bir seçici gibi ayrıştırılıp
   hemen ardından gelen `[dir="rtl"] { text-align: right; }` kuralını
   YUTUYORDU (RTL sayfalarda temel metin hizası kayboluyordu). Joker
   yazımı kaldırıldı — yorum artık doğru yerde kapanıyor.
   navbar-toggler, carousel, breadcrumb vb.) burada ELE ALINMIYOR — onlar
   layout.html.twig'in koşullu bootstrap.rtl.min.css yüklemesiyle çözülüyor
   (standart bootstrap.min.css [dir=rtl] SIFIR selector içerir, kendiliğinden
   dönmez — doğrulandı). Burada SADECE bu temanın kendi .t-* sınıflarındaki
   sabit fiziksel yönler ele alınıyor. */
[dir="rtl"] {
    text-align: right;
}

/* Footer link hover kayması: ARTIK BURADA DEĞİL — .t-footer a/.t-footer ul
   a:hover/.t-footer__social a:hover mantıksal padding-inline-start'a
   taşındı (bkz. o kurallar), dir="rtl"'de tarayıcı kendiliğinden çevirir,
   elle override GEREKMEZ (önceki 3 satırlık blok kaldırıldı — I8 düzeltmesi). */

/* Yüzen WhatsApp butonu iç boşluk asimetrisi (satır 787) — ikon/etiket
   DOM sırası flex `row` olduğu için RTL'de zaten görsel olarak otomatik
   ayna olur (Flexbox row, `direction`'a duyarlıdır), AMA `padding: T R B L`
   fiziksel shorthand'ı bundan ETKİLENMEZ — "nefes boşluğu" olan taraf
   (etiketin dış kenarı) elle tersine çevrilmezse yanlış tarafta (artık
   ikonun bitişik olduğu kenarda) kalır. Konum (position:fixed; right:)
   BİLİNÇLİ OLARAK değiştirilmedi: yüzen aksiyon butonları (WhatsApp dahil)
   dilden bağımsız hep aynı fiziksel köşede kalması yaygın bir konvansiyondur. */
[dir="rtl"] .t-floating-whatsapp { padding: .8rem .8rem .8rem 1.15rem; }

/* Zengin içerik (rich text) listeleri ve alıntı (satır 695-701) */
[dir="rtl"] .t-prose ul,
[dir="rtl"] .t-prose ol { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .t-prose blockquote {
    border-left: none;
    border-right: 3px solid var(--t-accent);
    padding-left: 0;
    padding-right: 1.25rem;
}

/* SSS akordeon aktif durum sol kenarlığı (satır 882) */
[dir="rtl"] .t-faq-accordion .accordion-button:not(.collapsed) {
    border-left: none;
    border-right: 3px solid var(--t-accent);
}

/* Fiyat kartı periyot etiketi boşluğu (satır 942) */
[dir="rtl"] .t-pricing-card__period { margin-left: 0; margin-right: .35rem; }

/* Paylaşım butonları etiket boşluğu (satır 1067) */
[dir="rtl"] .t-share__label { margin-right: 0; margin-left: .2rem; }

/* Breadcrumb ok ikonu ve kart "detay" oku — Bootstrap Icons yönlü glif,
   metin akışı tersine döndüğünde görsel olarak da tersine çevrilir
   (basit trick — yeni ikon seti İCAT EDİLMEDİ). */
[dir="rtl"] .t-breadcrumb i.bi-chevron-right,
[dir="rtl"] .t-card__more i.bi-arrow-right,
[dir="rtl"] .btn i.bi-arrow-right {
    transform: scaleX(-1);
}
/* Genel yakalayıcı: yukarıdaki üç seçici bugün için TÜM .bi-arrow-right
   kullanımlarını zaten kapsıyor (btn/.t-card__more/.t-breadcrumb), ama yeni
   bir şablon konteksti bunlardan birine sarılmadan ikonu kullanırsa (ör.
   ileride eklenecek bir liste satırı) sessizce ayna DIŞI kalmasın diye küçük,
   sınıf-bağımsız bir yakalayıcı — aynı transform, zararsız tekrar. */
[dir="rtl"] .bi-arrow-right {
    transform: scaleX(-1);
}

/* "Size uygun yolu seçin" satır oku (.t-path-chev, bi-chevron-right) — statik
   halde ayna, hover'da KAYMA yönü de tersine döner. scaleX(-1) DIŞ (solda)
   olduğu için translateX bileşik matriste işaret değiştirir: sonuç kayma
   RTL'de görsel olarak SOLA (okuma yönüne doğru) kayar, glif de ters kalır —
   ayrı bir translateX(-3px) YAZILMAZ (yanlış olurdu, bkz. CSS transform
   kompozisyon sırası: sağdaki fonksiyon önce, soldaki üstte uygulanır). */
[dir="rtl"] .t-path-chev {
    transform: scaleX(-1);
}
[dir="rtl"] .t-path-item:hover .t-path-chev {
    transform: scaleX(-1) translateX(3px);
}

/* Bootstrap carousel ok ikonları (home hero slider) — Bootstrap'in kendi
   maskeli SVG'leri yön-nötr ok şekli kullanır, RTL'de sadece prev/next
   pozisyonları mantıksal olarak zaten Bootstrap tarafından ayna kullanılmaz;
   burada yalnızca ok GLİFİNİN görsel yönünü çeviriyoruz (konum Bootstrap'in
   kendi .carousel-control-prev/.carousel-control-next'i solda/sağda sabit
   kalır — bu bilinçli, "geri" hep aynı fiziksel tarafta kalması karışıklığı
   azaltır, yalnızca ok GLİFİ dil akışına uyum sağlar). */
[dir="rtl"] .carousel-control-prev-icon,
[dir="rtl"] .carousel-control-next-icon {
    transform: scaleX(-1);
}

/* Responsive Logo Sizing */
.navbar-logo-img,
.navbar-brand img {
    max-height: var(--c-logo-h, 52px);
    height: auto;
    width: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 1199.98px) {
    .navbar-logo-img,
    .navbar-brand img {
        max-height: var(--c-logo-h-mobile, 40px) !important;
        height: auto !important;
    }
}


/* ============================================================
   MOBİL DÜZELTMELERİ (spec §3 — hepsi tarayıcıda computed-style ile
   ÖLÇÜLDÜ; "iyileştirme" değil kusur giderme. Ölçüm koşulu: 320 ve
   390px, açık+koyu mod, <style id="customizer-vars"> KALDIRILMIŞ —
   yani temanın KENDİ varsayılan token'larıyla.)
   ============================================================ */

/* ★ DOKUNMA HEDEFİ — sayfa başına 18–30 öğe 44px altındaydı (ölçüldü:
   footer linkleri 21–23px, filtre çipleri 35.8px, navbar-toggler 40px,
   sosyal ikonlar 42px, slider göstergeleri 4px, slider okları 31px genişlik).
   ★ İki koşul OR'lanır çünkü ikisi de TEK BAŞINA yeterli sebep: dokunmatik
   girdi (geniş ekranlı dokunmatik dizüstü) ve dar ekran (fare kullanan ama
   dar pencereli kullanıcı) AYRI senaryolardır.
   ★ Masaüstündeki sıkı tipografik ritim BOZULMAZ — hedefler yalnızca
   gerçekten gerektiğinde büyür. (cocoa/theme.css'teki aynı desen.) */
@media (pointer: coarse), (max-width: 991.98px) {
    /* Navigasyon */
    .t-navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
    .navbar-toggler { min-width: 44px; min-height: 44px; }

    /* Butonlar + filtre çipleri. inline-flex ŞART: .btn varsayılanda
       inline-block'tur ve min-height tek başına metni üste yapıştırır. */
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer bağlantıları satır içi olduğu için min-height'a ancak
       inline-flex ile tepki verir. */
    .t-footer ul a,
    .t-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
    .t-footer__social a { width: 44px; height: 44px; }

    /* Rozet-bağlantılar (blog etiketleri), blog kategori listesi ve
       iletişim kartındaki tel/e-posta bağlantıları. */
    a.t-badge,
    .t-post-tags .t-badge,
    .t-blog-sidebar__cat-link,
    .t-blog-sidebar__recent-item,
    a[href^="tel:"],
    a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
    .t-blog-sidebar__cat-link,
    .t-blog-sidebar__recent-item { display: flex; }

    /* .t-form DIŞINDAKİ alanlar (bülten, arama kutusu) Bootstrap
       varsayılanında 38px kalıyordu. */
    .form-control, .form-select { min-height: 44px; }

    /* Referans logo şeridi: bağlantının yüksekliği logo görselinin
       yüksekliğidir (bazı temalarda 40px). */
    .t-logo-strip a { display: inline-flex; align-items: center; min-height: 44px; }

    /* Bölüm başlıklarındaki "TÜMÜNÜ GÖR →" tipi mono bağlantılar (20px). */
    a.t-mono, a.t-label { display: inline-flex; align-items: center; min-height: 44px; }

    /* Slider kontrolleri. Göstergelerde GÖRÜNEN çubuk aynı kalır; hedef
       ŞEFFAF kenarlıkla büyütülür (background-clip:padding-box sayesinde
       kenarlık boyanmaz). Bootstrap'in kendi çözümü de budur — tema
       `border:none` yazarak onu iptal etmişti. */
    .t-hero-carousel .carousel-control-prev,
    .t-hero-carousel .carousel-control-next { min-width: 44px; }
    .t-hero-carousel .carousel-indicators [data-bs-target] {
        border-top: 21px solid transparent;
        border-bottom: 21px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        background-clip: padding-box;
    }
}

/* ★ BOOTSTRAP TUZAĞI — dar ekranda `.row.g-5` yatay taşması.
   `.row`un negatif yan margin'i satırın KENDİ --bs-gutter-x değerine göre
   ölçeklenir (g-5 → 3rem → -24px), ama `.container`ın yan padding'i kendi
   VARSAYILAN 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Ü: /tr/iletisim, 390px viewport → scrollWidth 402px
   (320px'de 332px). `g-5` birden çok şablonda kullanılıyor, bu yüzden
   şablon şablon değil 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; sadece yatay gutter kısılır, DİKEY boşluk (gy)
   korunur — 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; }
}

/* ============================================================
   ===== Inner pages (T3) =====
   Hedefli düzeltmeler — sözleşmedeki mevcut sınıflar (.t-page-header,
   .t-card, .t-prose, .t-faq-accordion, .t-pricing-card, .t-blog-layout,
   vb.) ZATEN kurulu ve iç sayfaların çoğu bunları doğru kullanıyordu; bu
   blok sadece ekran görüntüsüyle doğrulanmış, somut kusurları giderir.
   ============================================================ */

/* Kategori filtre çipleri (Çözümler/Vaka Çalışmaları/Blog liste sayfaları):
   mockup'ta tam pilli ("All", "Enterprise Systems" ...). `.btn-sm` +
   `--t-radius` (customizer'da köşeli olabilir) tek başına pil ŞEKLİ
   garanti etmiyordu (ölçüldü: 35.8px yükseklikte 12px radius = pil değil,
   köşeli hap). Yalnızca bu üç liste sayfasının filtre satırına eklenen
   `.t-filter-chips` sarmalayıcısı ile SINIRLI — career/show.html.twig'teki
   `.btn-sm.btn-outline-accent` (dosya seçici butonu) bundan ETKİLENMEZ. */
.t-filter-chips .btn { border-radius: var(--t-radius-pill); }

/* Fiyat kartı: boş fiyat (plan.price == '') satırı — Chrome/tüm tarayıcılar
   TAMAMEN boş bir inline <span> için hiçbir line box üretmiyor (ölçüldü:
   dolu kartlarda .t-pricing-card__price-row yüksekliği 44-46px, "Enterprise"
   kartında 0px). Sonuç: fiyatsız kart özellik listesi ~44px daha yukarıdan
   başlıyor, üç kart farklı hizada görünüyordu. Fiyatlı kartlarla AYNI
   font-size'a bağlı min-height rezerve edilerek üç kart da aynı hizada
   başlar (fiyat olsun/olmasın). */
.t-pricing-card__price-row {
    min-height: calc(clamp(2rem, 4vw, 2.5rem) * 1.1);
    display: flex;
    align-items: baseline;
}