/* ===================== TOKEN SSOT (spec C.7 · placeholder/swappable) ===================== */
    :root{
      /* BRAND (mavi/teal · güven) */
      --brand-50:#EAF6FC; --brand-100:#CBE8F7; --brand-200:#9AD2EE; --brand-300:#63B7E0;
      --brand-400:#3599CB; --brand-500:#237FAE; --brand-600:#1C6790; --brand-700:#1A5474;
      --brand-800:#17435B; --brand-900:#123444; --brand-950:#0C2630;
      /* ACCENT (sıcak tan/gold · CTA) */
      --accent-50:#FCF4E8; --accent-100:#F7E5C8; --accent-200:#EFCC96; --accent-300:#E8B972;
      --accent-400:#E0A458; --accent-500:#CB8838; --accent-600:#A96C29; --accent-700:#855420;
      --accent-800:#64401A; --accent-900:#472E14; --accent-950:#29190A;
      /* SKY (parlak vurgu/focus/rozet/top bar) */
      --sky-50:#ECF7FE; --sky-100:#D3EDFC; --sky-200:#ABDDF8; --sky-300:#7DCAF2;
      --sky-400:#53B5EC; --sky-500:#2C9DDD; --sky-600:#1F80BC; --sky-700:#1C6595;
      --sky-800:#1B5177; --sky-900:#163E5A;
      /* AD-RED (reklam/aciliyet) */
      --ad-50:#FBEDEC; --ad-100:#F6D6D3; --ad-200:#EBAAA5; --ad-300:#DE7D75;
      --ad-400:#CB5348; --ad-500:#AC332C; --ad-600:#8C2822; --ad-700:#6E201B;
      --ad-800:#531815; --ad-900:#3B110F; --ad-950:#230908;
      /* INK (nötr metin/ayraç) */
      --ink-50:#F4F7F9; --ink-100:#E6ECEF; --ink-200:#CDD8DE; --ink-300:#ABBBC4;
      --ink-400:#7E939E; --ink-500:#5E7480; --ink-600:#4A5C67; --ink-700:#3B4A53;
      --ink-800:#2B363D; --ink-900:#1C252B; --ink-950:#111A1F;

      /* ═══════════ MARKA PALETİ · 02.08.2026 ═══════════
         Renkler sigortanabak.com maskotundan (mavi ördek) piksel bazında çıkarıldı.
         3 KATMAN RİTMİ: sayfa zemini → bölüm paneli → kart. Her katmanın kendi tonu var.
           LIGHT:  bg beyaz      → section gri-mavi  → card beyaz
           DARK:   bg en koyu    → section açık      → card koyu
         GÖLGE YOK (karar kararı): katmanlar KENAR + yüzey rengiyle ayrışır. */

      /* SEMANTİK yüzey (LIGHT default) */
      --page-bg:#FFFFFF;          /* KATMAN 1 · sayfa zemini */
      --panel:#FFFFFF;            /* KATMAN 3 · kart */
      --surface-2:#E4EDF4;
      --ink:#103050;              /* marka laciverti · 13.46:1 */
      --muted:#4E6B84;            /* 5.58:1 */
      --line:#CBDEEC;             /* kenar — gölgenin yerine geçen ayrışma aracı */
      /* 27.08.2026 · karar: düğme dolgusu LOGONUN turuncusu olsun (iki temada da aynı).
         Ton, marka göz-noktasının fill değeri: #F1940A. Hover/basma aynı rengin
         daha koyu iki basamağı (aynı H/S, L 49 → 44 → 39). */
      --cta:#F1940A;              /* düğme dolgusu · LOGO turuncusu (marka-*.svg nokta) */
      --cta-ink:#3B1A00;          /* koyu kahve — siyah DEĞİL · 6.73:1 (ölçüldü) */
      --cta-line:#A66811;         /* açık zeminde düğme sınırı (renk ayrışamıyor) */
      --cta-hover:#D78409;        /* hover · hareket yok, yalnız ton (5.39:1) */
      --cta-active:#BF7508;       /* basma · bir tık daha koyu (4.32:1) */
      --panel-hover:#F7FAFD;      /* kart üzerine gelince yüzey bir tık değişir */
      --marka:#0077A3;            /* ördek mavisi · ikon/çizgi/rozet · 5.04:1 */
      --on-panel:#103050;
      --badge:#AC332C; --badge-ink:#FFFFFF; --focus-ring:#1C6595;

      /* HERO + SECTION (MOD-BAĞIMLI) — KATMAN 2 · bölüm paneli */
      --hero-fill:#F4F9FB; --hero-fill-ad:#8C2822; --on-hero:#103050;
      --sl-fill:#E4EDF4;          /* KATMAN 2 · kenar yok → beyaz kartın ayrışması buna bağlı (1.19) */
      --sl-ink:#103050; --sl-muted:#4E6B84; --sl-line:#CBDEEC;
      --hero-drop:0 18px 34px rgba(18,48,61,.20);   /* clip-path box-shadow'u kırptığı için drop-shadow */
      --ad-outline:0 0 0 1px rgba(255,255,255,.85);

      /* BİLEŞEN */
      --sb-topbar-bg:#53B5EC;         /* DEFAULT: marka aksanı */
      --sb-topbar-bg-calm:#0C2630;    /* dingin referans-sadık alternatif */
      --sb-topbar-ink:#10201B;
      --sb-topbar-ink-calm:#DCEAF0;
      --sb-pill-bg:rgba(12,20,17,.55);
      --sb-pill-bg-solid:rgba(12,20,17,.72);
      --sb-pill-border:rgba(255,255,255,.10);
      --sb-hover-veil:rgba(255,255,255,.08);

      --r-pill:999px; --r-panel:30px; --r-box:18px;
      --frame-pad:24px; --topbar-h:40px;
      --gap:30px;                     /* düzeltme 1: TÜM section araları EŞİT + daha ferah (topbar↔hero, hero↔slider) */
      --container:1280px;             /* düzeltme 7: header + yazı alanları bu genişlikte ortalı (fluid DEĞİL) */
      --slant:72px; --corner:28px;    /* düzeltme 3: TÜM köşe yarıçapları EŞİT (topbar alt köşeleri dahil) */
      --header-top:calc(var(--topbar-h) + var(--gap) + 24px);
      /* SECTION DİKEY BOŞLUK — TEK RİTİM (22.07.2026): her section'da GÖRÜNÜR NEFES = --pad-y (alt=üst eşit).
         Eğik kenar olan tarafa ekstra 'slant' payı eklenir (içerik eğime değmesin) → iki taraf da görsel eşit. */
      --pad-y:clamp(64px,9vw,128px);                 /* düz kenar nefesi (tüm section'larda AYNI) */
      --pad-panel-top:calc(var(--slant) + var(--pad-y)); /* eğik kenarlı taraf: slant payı + AYNI nefes (görünür nefes = pad-y) */
      /* 15.09.2026 · karar: "panel içi boşluklar çok fazla, footer üst boşluğu ideal".
         Dolu PANEL'lerde (teaser · uygulama · rehber · footer) görünür nefes = footer'ınki (44px), üst=alt. */
      --pad-panel:44px;
      --pad-panel-slant:calc(var(--slant) + var(--pad-panel));
      --sec-gap:var(--gap);                          /* section-arası boşluk = interlock boşluğuyla AYNI (30px) */

      /* ALT SECTION'LAR (rakamlar/SSS/galeri/bülten/footer · ref 04-08 · MOD-BAĞIMLI) */
      --script-gold:var(--marka);     /* LIGHT: bölüm başlığı · marka mavisi (turuncu yalnız düğmede) */
      --stat-ic:var(--marka);         /* ince ikonlar marka mavisinden gelir */
      --foot-bottom-bg:#E4EDF4;       /* LIGHT: alt bar = section katmanı */
      --foot-bottom-ink:#4E6B84;
    }
    html.dark{
      /* 3 KATMAN · bg (en koyu) → section (açık) → card (koyu) — ekran örneğindeki ritim */
      --page-bg:#061422;          /* KATMAN 1 · parlaklık %8 */
      --panel:#081E30;            /* KATMAN 3 · kart · kenar yok → renk farkı taşıyor (1.26) */
      --surface-2:#103050;
      --ink:#E6F4FB;              /* 16.53:1 (bg) · 11.98:1 (section) · 14.27:1 (kart) */
      --muted:#93B4C8;            /* 8.49 / 6.15 / 7.33 */
      --line:#2B4E70;             /* kenar — gölge yok, ayrışmayı bu taşıyor */
      /* 27.08.2026 · karar: düğme dolgusu iki temada da LOGO turuncusu (#F1940A).
         ⚠️ Yazı rengi BEYAZ KALAMADI: beyaz, bu turuncunun üstünde 2.34:1 veriyor
         (ölçüldü) — hiçbir punto için yeterli değil. Açık temadaki koyu kahve
         yazıya geçildi: 6.73:1. Düğme her iki temada birebir aynı görünüyor. */
      --cta:#F1940A;              /* düğme dolgusu · LOGO turuncusu (marka-*.svg nokta) */
      --cta-ink:#3B1A00;          /* koyu kahve · 6.73:1 (beyaz olsaydı 2.34:1 · KULLANMA) */
      --cta-line:transparent;     /* koyu zeminde gerekmiyor */
      --cta-hover:#D78409;        /* hover · koyulaşır (5.39:1) */
      --cta-active:#BF7508;       /* basma · 4.32:1 */
      --panel-hover:#0D2740;      /* kart üzerine gelince yüzey bir tık açılır */
      --marka:#3DC8EE;            /* ördek mavisi · parlak ton · 9.46:1 (bg) */
      --on-panel:#E6F4FB;
      --badge:#AC332C; --badge-ink:#FFF3F1; --focus-ring:#53B5EC;
      /* DARK: KOYU section dolgu + AÇIK metin */
      --hero-fill:#081E30; --on-hero:#E6F4FB;
      --sl-fill:#103050;          /* KATMAN 2 · marka laciverti · parlaklık %19 */
      --sl-ink:#E6F4FB; --sl-muted:#93B4C8; --sl-line:#2B4E70;
      --hero-drop:0 20px 36px rgba(0,0,0,.55);
      /* alt section'lar · DARK */
      --script-gold:var(--marka);     /* DARK: bölüm başlığı · marka mavisi (turuncu yalnız düğmede) */
      --stat-ic:var(--marka);         /* ince ikonlar marka mavisinden gelir */
      --foot-bottom-bg:#040E19;       /* DARK: alt bar · bg'den bir tık daha koyu */
      --foot-bottom-ink:#93B4C8;
    }

    /* ===================== SİTE FONTU (karar seçimi · Plus Jakarta Sans · "şapkalı a") ===================== */
    :root{ --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }

    /* Reklam / kampanya modu (body üzerinde — rozet/pill/CTA hero'nun çocuğu değil) */
    body[data-mode="ad"] .t50-hero{ --hero-fill:var(--hero-fill-ad); --on-hero:#F2F8FB; }  /* ad-kırmızısı KORUNUR + metin her modda AÇIK */
    body[data-mode="ad"] .t50-badge,
    body[data-mode="ad"] .t50-cta,
    body[data-mode="ad"] .t50-burger{ box-shadow:var(--ad-outline); }
    body[data-mode="ad"] .t50-pill{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }

    /* ===================== RESET / TABAN ===================== */
    *,*::before,*::after{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; overflow-x:clip; }
    body{
      background:var(--page-bg); color:var(--ink);
      font-family:var(--font);
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      min-height:100svh; display:flex; flex-direction:column;
      transition:background-color .25s ease,color .25s ease;
    }
    a{ color:inherit; text-decoration:none; }
    :focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:6px; }
    @media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

    /* ═══════════ GÖLGESİZ DÜZEN (02.08.2026 · karar kararı) ═══════════
       Gölge kaldırıldı. Bir yüzeyin "üstte" olduğunu üç şey anlatır: gölge, renk farkı, kenar.
       Gölge gidince kalan ikisi daha net çalışmak zorunda → her kart 1px kenar taşır. */
    .hm-tcard, .hm-feat, .pm-tile, .hm-erow-thumb,
    .sl-card, .social-card{ box-shadow:none !important; }

    /* ⚠️ KENAR KURALI · clip-path taşıyan öğeye BORDER VERİLMEZ.
       .hm-tcard'da eğik alt kenar (sgb-slant-box → clip-path) var; clip, border'ı da kırpar →
       üst/yan kenarda çizgi görünür, ALT EĞİK kenarda kesilir. Yarım çerçeve tutarsız durur.
       Bu yüzden kartta kenar YOK: ayrışmayı katman rengi taşıyor (bkz. --panel / --sl-fill farkı).
       .pm-tile'da clip-path yok → orada kenar sorunsuz çalışır, kalıyor. */
    .hm-tcard{ border:0 !important; }
    .pm-tile{ border:1px solid var(--line); transition:border-color .18s ease; }
    .pm-tile:hover{ border-color:var(--marka); }

    /* ═══════════ HAREKET YOK (02.08.2026 · karar kararı) ═══════════
       Zıplama / kayma / büyüme efekti kullanılmaz. Gölge de kenar da olmadığına göre
       üzerine gelme tepkisini YALNIZ RENK taşır: yüzey bir tık değişir, hepsi bu.
       Kart yüzeyi tek değişkenden inerse (--kart-bg) iç katmanlar da birlikte döner. */
    .hm-tcard{ --kart-bg:var(--panel); }
    .hm-tcard:hover{ --kart-bg:var(--panel-hover); }
    .hm-tcard, .hm-tcard-media, .hm-tcard-body{
      background:var(--kart-bg) !important; transition:background-color .2s ease; }

    /* Sayfadaki TÜM hareket efektlerini bastır (transform/scale/translate) */
    .hm-tcard:hover, .hm-tcard:active,
    .pm-tile:hover, .pm-tile:active,
    .hm-tcard-medialink:hover .hm-tcard-img,
    .hm-feat:hover, .hm-feat:hover .hm-feat-media img,
    .hm-erow:hover .hm-erow-thumb img,
    .hm-linkrow:hover > i, .hm-tcard-titlelink:hover .hm-tcard-arr,
    .foot-soc:hover, .foot-more:hover i, .hm-arrow:active,
    .t50-badge:hover, .social-card:hover .social-card-media i{
      transform:none !important; }

    /* ═══════════ DÜĞME · TEK KAYNAK ═══════════
       27.08.2026'dan beri iki temada da dolgu LOGO turuncusu #F1940A, yazı koyu
       kahve #3B1A00 → 6.73:1. Kontrast artık bol; 17px/700 ölçüsü tipografi
       tercihi olarak duruyor, zorunluluk değil. Beyaz yazıya DÖNMEYİN: bu
       turuncunun üstünde 2.34:1 eder. */
    .hm-tcard-cta, .hero-lead .hl-btn, .t50-cta, .foot-cta-btn, .hm-feat-btn{
      background:var(--cta) !important; color:var(--cta-ink) !important;
      font-weight:700 !important; font-size:17px !important; letter-spacing:.005em;
      box-shadow:none !important; filter:none !important;
      transition:background-color .18s ease;
    }
    /* ⚠️ clip-path taşıyan öğede border YARIM kalır (üst/yan görünür, eğik kenarda kesilir).
       .hm-tcard-cta eğik alt kenarlı → kenar YOK. Turuncu dolgu zaten kendi başına ayrışıyor. */
    .sgb-slant-box, .sgb-slant-b, .sgb-slant-t,
    .hm-tcard-cta, .hm-tcard, .hm-tcard-img,
    .hm-teaser, .hm-blog-panel, .t50-hero, .foot-panel{ border:0 !important; }
    /* Eğik alt kenar payı: metin eğime değmesin ama optik olarak ORTADA dursun.
       Eğim 21px → görünür alt sınır ortalama 49.5px → merkez ~25px (60px düğmede). */
    .hm-tcard-cta{ padding-bottom:10px !important; }
    /* Hover/basma tepkisi YALNIZ RENK — hareket yok. Ton koyulaşır → yazı kontrastı da artar. */
    .hm-tcard-cta:hover, .hero-lead .hl-btn:hover, .t50-cta:hover,
    .foot-cta-btn:hover, .hm-feat-btn:hover{
      background:var(--cta-hover) !important; transform:none !important; }
    .hm-tcard-cta:active, .hero-lead .hl-btn:active, .t50-cta:active,
    .foot-cta-btn:active{ background:var(--cta-active) !important; transform:none !important; }
    /* İKİNCİL düğme ("Tüm yazılar") — turuncuyla yarışmaz, kenarlı ve renksiz */
    .hm-pillbtn{
      background:transparent !important; color:var(--sl-ink) !important;
      border:1px solid var(--line) !important; box-shadow:none !important;
      font-weight:600 !important; font-size:16px !important;
      transition:border-color .18s ease, background-color .18s ease;
    }
    .hm-pillbtn:hover{ border-color:var(--marka) !important;
      background:color-mix(in srgb, var(--marka) 8%, transparent) !important; transform:none !important; }

    /* ===================== ÇERÇEVE ===================== */
    .t50-frame{
      position:relative; flex:1; background:var(--page-bg);
      padding:0 var(--frame-pad) var(--frame-pad); display:flex; flex-direction:column; gap:var(--gap);
      transition:background-color .25s ease;
    }

    
    /* ═══════════ APPLE LIQUID GLASS · TEK KAYNAK (02.08.2026) ═══════════
       Gerçek cam tek bir blur değildir; beş katmanın üst üste binmesidir:
         1) BACKDROP   arkayı bulanıklaştırır + doygunlaştırır + bir tık aydınlatır
         2) TINT       çok ince renk perdesi (arkayı boğmaz, sadece birleştirir)
         3) SPECULAR   üst kenarda 1px parlak çizgi — ışığın cama vurduğu yer
         4) RIM        mask-composite ile çizilen yön duyarlı çerçeve (köşelerde yoğun)
         5) DEPTH      içeride yumuşak aydınlanma → camın KALINLIK hissi
       Not: buradaki inset parlaklıklar gölge değil, camın optiğidir (dış gölge yok).
       Tint, header'ın nerede durduğuna göre değişir: hero üstünde (koyu) beyaz perde,
       açık panel üstünde mod tintі. .on-hero sınıfını header JS'i yönetir. */
    :root{
      --nav-blur:28px;
      --nav-glass-filter:blur(var(--nav-blur)) saturate(190%) brightness(1.04);
      --nav-tint:rgba(255,255,255,.58);            /* LIGHT · açık panel üstünde */
      --nav-tint-hero:rgba(255,255,255,.10);       /* koyu hero üstünde (her iki modda) */
      --nav-specular:rgba(255,255,255,.55);        /* üst kenar parlaması */
      --nav-depth:rgba(255,255,255,.14);           /* iç aydınlanma */
      --nav-rim-1:rgba(255,255,255,.60);           /* rim · ışık gelen köşe */
      --nav-rim-2:rgba(255,255,255,.06);           /* rim · ara */
      --nav-rim-3:rgba(16,48,80,.16);              /* rim · gölge tarafı */
      --nav-glass-bg:var(--nav-tint);
    }
    html.dark{
      --nav-tint:rgba(16,48,80,.52);
      --nav-specular:rgba(255,255,255,.40);
      --nav-depth:rgba(120,190,230,.10);
      --nav-rim-1:rgba(255,255,255,.42);
      --nav-rim-2:rgba(255,255,255,.05);
      --nav-rim-3:rgba(0,0,0,.30);
    }

    /* ===================== A · TOP BAR · SADECE EN ÜSTTE görünür (absolute → aşağı kaydırınca kayıp gider, üste dönünce yine görünür) ===================== */
    .t50-topbar{
      position:absolute; top:0; left:var(--frame-pad); right:var(--frame-pad); z-index:60;   /* fixed DEĞİL: sayfayla birlikte kayar, persistan olmaz */
      height:var(--topbar-h); border-radius:0 0 var(--corner) var(--corner);
      background:var(--sb-topbar-bg); color:var(--sb-topbar-ink);
      display:flex; align-items:center; justify-content:center; gap:8px;
      padding:0 20px; font-size:13px; font-weight:600; letter-spacing:.01em;
      transition:background-color .25s ease,color .25s ease;
    }
    body[data-topbar="calm"] .t50-topbar{ background:var(--sb-topbar-bg-calm); color:var(--sb-topbar-ink-calm); }
    .t50-topbar .tb-notice{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
    .t50-topbar .tb-notice > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .t50-topbar .tb-link{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-weight:700; }
    .t50-topbar .tb-link .lbl{ border-bottom:1px solid transparent; }
    .t50-topbar .tb-link:hover .lbl{ border-bottom-color:currentColor; }
    .t50-topbar i{ font-size:12px; flex-shrink:0; }

    /* ===================== B · LIQUID GLASS HEADER BAR (hero içi · sabit · gecikmeli oto-gizle) ===================== */
    /* TEK cam yüzey (A'nın camı) + tam-genişlik düzeni (logo | nav | kontrol) · topbardan --gap AYRI */
    .t50-headerbar{
      position:fixed; z-index:50;
      top:calc(var(--topbar-h) + var(--gap));
      left:var(--frame-pad); right:var(--frame-pad); margin-inline:auto; width:auto;
      max-width:calc(var(--container) + 52px);   /* pill her yandan 26px TAŞAR → iç padding logo/kontrolü CONTAINER kenarına oturtur */
      display:grid; grid-template-columns:3fr 6fr 3fr; align-items:center; gap:16px;   /* 3-6-3 grid: logo | nav | kontrol */
      height:64px; padding:0 26px; border-radius:var(--r-pill); overflow:visible;   /* simetrik 26 → logo=container sol, kontrol=container sağ */
      transition:transform .5s cubic-bezier(.22,1,.36,1), top .35s cubic-bezier(.22,1,.36,1);
    }
    /* Kaydırınca (topbar gidince) header ÜSTE yapışır; en üstte default top'a (topbar altı) iner */
    .t50-headerbar.stuck{ top:12px; }
    /* 29.09.2026 · karar: "header ve üst bar arasındaki boşluğu da biraz daralt" (mobil).
       --gap (30) section ritmi olduğu için ona dokunulmadı; yalnız bar konumu: 30 → 14px.
       Hero üst payı da aynı miktar indirildi (home/_hero.blade.php · 116 → 100). */
    @media (max-width:767px){ .t50-headerbar:not(.stuck){ top:calc(var(--topbar-h) + 14px); } }
    /* GLASS ::before katmanı (backdrop-filter BURADA) → .t50-headerbar backdrop-root OLMAZ,
       böylece içindeki dropdown/megamenü camı da hero'yu örnekler = nav ile BİREBİR AYNI görünür */
    /* KATMAN 1+2+3+5 · backdrop + tint + specular + derinlik (tek pseudo, çok katman) */
    .t50-headerbar::before{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
      background:
        /* 5 · iç aydınlanma: üstten inen yumuşak ışık → cam KALIN hissettirir */
        radial-gradient(120% 140% at 50% -30%, var(--nav-depth), transparent 62%),
        /* 2 · tint perdesi */
        var(--nav-glass-bg);
      box-shadow:
        inset 0 1px 0 var(--nav-specular),                 /* 3 · üst specular çizgi */
        inset 0 -1px 0 rgba(255,255,255,.10),              /* alt kenarda hafif ışık sızması */
        inset 0 14px 26px -18px var(--nav-depth);          /* 5 · içeride derinlik */
    }
    @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
      .t50-headerbar::before{ -webkit-backdrop-filter:var(--nav-glass-filter); backdrop-filter:var(--nav-glass-filter); }
    }
    /* Header hero'nun (koyu görsel) üstündeyken tint beyaza döner — koyu perde koyu zemini boğardı */
    .t50-headerbar:not(.off-hero)::before{ --nav-glass-bg:var(--nav-tint-hero); }

    /* KATMAN 4 · RIM — yön duyarlı çerçeve. Işık sol-üstten gelir: o köşe parlak,
       sağ-alt sönük. mask-composite ile yalnız 1px kenar boyanır (dolgu değil). */
    .t50-headerbar::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
      background:linear-gradient(142deg,
        var(--nav-rim-1) 0%,
        var(--nav-rim-2) 26%,
        var(--nav-rim-2) 62%,
        var(--nav-rim-3) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
    /* Gecikmeli oto-gizle: aşağı kaydırınca EŞLİK edip (JS ~130px) yumuşakça gizlen, yukarı → geri gel */
    .t50-headerbar.is-hidden{ transform:translateY(calc(-100% - var(--topbar-h) - var(--gap) - 8px)); }
    @media (prefers-reduced-motion:reduce){ .t50-headerbar{ transition:none; } }

    /* ═══════════ HEADER YAZI OKUNURLUĞU (03.08.2026 · sadeleştirildi) ═══════════
       Hero'nun koyu arka plan fotoğrafı kaldırıldı; hero artık her iki modda da
       tema zemini kullanıyor. Bu yüzden "hero üstünde her zaman açık yazı" kuralı
       ARTIK YANLIŞ: açık temada beyaz yazı, açık hero zemininde okunmaz.
       Tek kural yeterli — yazı her yerde mod rengini (--on-hero) alır.
       .off-hero ayrımı yalnız cam tonu (tint) için duruyor. */
    .t50-logo, .t50-logo .lg-soft, .t50-navlink, .t50-icobtn{ color:var(--on-hero); }
    .t50-icobtn:hover{ background:color-mix(in srgb, var(--on-hero) 12%, transparent); }
    /* İSTİSNA · reklam modu: hero ad-kırmızısı (#8C2822) ve HER İKİ temada koyu kalır.
       Header o hero'nun üstündeyken mod rengi (açık temada koyu lacivert) okunmaz —
       yalnız bu durumda açık yazıya dönülür. Hero geçilince (.off-hero) mod rengine döner. */
    body[data-mode="ad"] .t50-headerbar:not(.off-hero) .t50-logo,
    body[data-mode="ad"] .t50-headerbar:not(.off-hero) .t50-logo .lg-soft,
    body[data-mode="ad"] .t50-headerbar:not(.off-hero) .t50-navlink,
    body[data-mode="ad"] .t50-headerbar:not(.off-hero) .t50-icobtn{ color:#F2F8FB; }

    .t50-logo{ justify-self:start; flex-shrink:0; display:inline-flex; align-items:center; height:40px;
      font-weight:800; font-size:20px; letter-spacing:-.005em; line-height:1;
      transition:color .25s ease; }
    .t50-logo img{ height:40px; width:auto; display:block; }
    .t50-logo .lg-soft{ opacity:.72; font-weight:600; margin-left:.28em; }

    /* ---- LOGO KİLİDİ · kelime (düz SVG) + göz markası (canlı 3D) ----------
       Yüzdeler eserin kendi kutusundan (1109,5 × 182) geliyor; 3D iframe düz
       markanın tam üstüne oturuyor. Yükseklik .t50-logo ile aynı → CLS yok. */
    /* 27.08.2026 · karar: göz markası kelimeye fazla yapışıktı → sağa alındı.
       Önce 40 birim denendi, "açıklık çok olmuş" → yarıya indirildi: 20 birim
       (≈4,4 px). Kelime ve marka BÜYÜMEDİ; yalnız kilit kutusu 1109,5 → 1129,5
       birim genişledi ve yüzdeler yeni kutuya göre yeniden hesaplandı
       (marka 898,5 → 918,5). Marka kutudan taşıp menüye girmiyor. */
    .t50-logo .sb-kilit{ position:relative; display:block; height:40px; aspect-ratio:1129.5/182; }
    .t50-logo .sb-kilit > *{ position:absolute; }
    .t50-logo .sb-kelime{ left:0; top:0; width:84.06%; height:100%; }
    .t50-logo .sb-marka{ left:81.32%; top:.16%; width:18.65%; height:99.67%;
      transition:opacity .5s ease; }
    .t50-logo .sb-marka img{ width:100%; height:100%; }
    .t50-logo .sb-kilit canvas.sb-3d{ left:79.88%; top:-6.8%; width:21.55%; height:113.6%;
      display:block; background:transparent; pointer-events:none;
      opacity:0; transition:opacity .5s ease; }
    .t50-logo .sb-kilit canvas.sb-3d.sb-3d-hazir{ opacity:1; }
    /* 3D geldi → düz marka sönümlenir (aynı yerde durdukları için sıçrama yok) */
    .t50-logo .sb-kilit.sb-3d-var .sb-marka{ opacity:0; }
    /* tema anahtarı: html[data-theme] */
    html[data-theme="dark"]  .sb-kilit .lg-acik,
    html[data-theme="light"] .sb-kilit .lg-koyu{ display:none; }

    /* Nav: cam üstünde düz metin + altın underline (transform → CLS yok) */
    .t50-pill{ justify-self:center; align-self:stretch; display:flex; align-items:stretch; gap:0; height:auto; padding:0; }   /* 15.09.2026 · başlıklar arası BOŞLUK YOK → fare iki başlık arasında hiçbir öğeyi terk etmez */
    /* 15.09.2026 · karar: "dropdown megamenüyle AYNI yükseklikten başlasın". Başlık öğesi çubuğun TAM yüksekliğine uzar
       → .t50-dd'nin top:100% değeri çubuğun alt kenarı olur; megamenü de çubuğa göre yerleştiği için ikisi aynı çizgide. */
    .t50-navitem{ position:relative; display:flex; align-items:center; }
    .t50-navlink{
      position:relative; display:inline-flex; align-items:center; gap:7px; padding:8px 16px; font-size:15px; font-weight:500;   /* eski gap:4 → yatay padding 14+2 (görünür aralık aynı) */
      opacity:.92; border-radius:var(--r-pill); cursor:pointer; user-select:none;
      background:transparent; border:0; font-family:inherit; line-height:1; transition:color .18s ease,opacity .18s ease;
    }
    .t50-navlink::after{ content:''; position:absolute; left:16px; right:16px; bottom:2px; height:2px; background:var(--cta);
      border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
    .t50-navlink:hover,.t50-navitem.open > .t50-navlink{ opacity:1; background:transparent; }
    .t50-navlink:hover::after,.t50-navitem.open > .t50-navlink::after{ transform:scaleX(1); }
    .t50-navlink .chev{ font-size:11px; transition:transform .2s ease; }
    .t50-navitem.open .t50-navlink .chev{ transform:rotate(180deg); }

    .t50-dd{
      position:absolute; top:calc(100% + 14px); left:0; min-width:240px; padding:10px;
      border-radius:var(--r-box); color:var(--sl-ink);
      /* NAV ile BİREBİR AYNI cam · aynı 5 katman (tek kaynak).
         Fark: dropdown hep sayfa içeriği üstünde açılır → hero tinti kullanılmaz. */
      background:
        radial-gradient(120% 130% at 50% -20%, var(--nav-depth), transparent 60%),
        var(--nav-tint);
      box-shadow:
        inset 0 1px 0 var(--nav-specular),
        inset 0 -1px 0 rgba(255,255,255,.08),
        inset 0 16px 30px -20px var(--nav-depth);
      opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:20;
    }
    @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
      .t50-dd{ -webkit-backdrop-filter:var(--nav-glass-filter); backdrop-filter:var(--nav-glass-filter); }
    }
    /* RIM · nav ile AYNI yön duyarlı çerçeve → açıldığında header'ın devamı gibi durur */
    .t50-dd::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
      background:linear-gradient(142deg, var(--nav-rim-1) 0%, var(--nav-rim-2) 26%, var(--nav-rim-2) 62%, var(--nav-rim-3) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
    .t50-navitem.open .t50-dd{ opacity:1; pointer-events:auto; }   /* hareket yok · yalnız opaklık */
    /* HOVER KÖPRÜSÜ: açık navitem'in ALTINA görünmez şerit (buton→menü yolu · header bar'ın üstünde, ölü bölgeyi kapatır) */
    .t50-navitem[data-dd].open::after{ content:''; position:absolute; top:100%; left:-16px; width:calc(100% + 32px); height:42px; z-index:5; }
    .t50-dd.dd-wide{ min-width:300px; columns:2; column-gap:6px; }
    .t50-dd a{ display:block; padding:10px 14px; font-size:14px; font-weight:500; color:var(--sl-ink); border-radius:12px; break-inside:avoid; transition:background-color .16s ease; }
    .t50-dd a:hover{ color:var(--sl-ink); opacity:1; background:color-mix(in srgb, var(--sl-ink) 8%, transparent); }

    /* Sağ kontroller: cam üstünde ghost ikon + altın CTA */
    .t50-controls{ justify-self:end; display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .t50-icobtn{
      width:42px; height:42px; aspect-ratio:1; display:inline-flex; align-items:center; justify-content:center;
      background:transparent; border-radius:var(--r-pill); box-shadow:none;
      cursor:pointer; border:0; font-family:inherit; font-size:13px; font-weight:700; transition:background-color .18s ease;
    }
        .t50-icobtn i{ font-size:16px; }
    .t50-cta{
      height:46px; min-width:128px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
      background:var(--cta); color:var(--cta-ink); font-size:15px; font-weight:600; border-radius:var(--r-pill);
      cursor:pointer; border:0; font-family:inherit; line-height:1;
      transition:box-shadow .18s ease, filter .18s ease;
    }

    /* ═══ 19.08.2026 · karar: "Bizi Arayın" hover'da TELEFONA dönüşür (t-42 cta-contact deseni) ═══
       "Bizi Arayın" dikeyde ortaya büzülüp kaybolur, telefon aynı merkez çizgiden açılarak gelir.
       SABİT GENİŞLİK ŞART: ölçüm (1440px) → telefon metni 112px + 2×20px padding = 152px; 156px
       güvenli pay. Sabit olmasaydı hover'da kutu şişer, yanındaki ikonlar kayardı (CLS).
       Animasyon yalnız transform+opacity → layout'a dokunmaz. Tıklama HÂLÂ tel: bağlantısı. */
    .t50-cta--degis{ position:relative; width:156px; min-width:156px; padding:0; overflow:hidden; }
    .t50-cta--degis .cc-etiket,
    .t50-cta--degis .cc-tel{
      position:absolute; top:50%; left:50%; transform-origin:center center;
      display:inline-flex; align-items:center; gap:8px; white-space:nowrap; line-height:1;
      transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    }
    .t50-cta--degis .cc-etiket{ transform:translate(-50%,-50%) scaleY(1); opacity:1; }
    .t50-cta--degis .cc-tel{ transform:translate(-50%,-50%) scaleY(0); opacity:0; font-size:14.5px; letter-spacing:-.01em; }
    .t50-cta--degis:hover .cc-etiket{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
    .t50-cta--degis:hover .cc-tel{ transform:translate(-50%,-50%) scaleY(1); opacity:1; }
    /* klavyeyle gezen de numarayı görsün */
    .t50-cta--degis:focus-visible .cc-etiket{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
    .t50-cta--degis:focus-visible .cc-tel{ transform:translate(-50%,-50%) scaleY(1); opacity:1; }
    @media (prefers-reduced-motion:reduce){
      .t50-cta--degis .cc-etiket,.t50-cta--degis .cc-tel{ transform:translate(-50%,-50%) !important; transition:opacity .2s linear; }
    }

    .t50-cta:hover{ filter:brightness(1.06); }
    .t50-cta i{ font-size:13px; }

    /* Hamburger (mobil) */
    .t50-burger{
      display:none; width:44px; height:44px; aspect-ratio:1; align-items:center; justify-content:center;
      background:var(--sb-pill-bg-solid); border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--sb-pill-border);
      color:#fff; border:0; cursor:pointer; }
    .t50-burger i{ font-size:20px; }

    /* Mobil drawer · header SABİT olduğu için drawer da sabit (kaydırınca yerinde kalsın) */
    /* 15.09.2026 · karar: "menü TÜM ekranı kaplasın, arada boşluk kalmasın, scroll kendi içinde çalışsın,
       arkadaki sayfa kaymasın". Drawer artık tam ekran katman: header'ın ALTINDA başlar (header üstte kalır,
       burger X olur), kendi içinde kayar (overscroll-behavior:contain → kaydırma sayfaya geçmez),
       açıkken html/body kilitli (aşağıda). */
    .t50-drawer{
      position:fixed; z-index:65; inset:0; width:100%; height:100dvh;
      padding:calc(12px + 64px + 18px) max(18px, calc(var(--frame-pad) + 12px)) calc(28px + env(safe-area-inset-bottom, 0px));
      background:rgba(8,16,26,.97); border-radius:0; box-shadow:none;
      overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s;
    }
    body.menu-open .t50-drawer{ visibility:visible; transition:opacity .2s ease, visibility 0s; }
    html:has(body.menu-open), body.menu-open{ overflow:hidden; overscroll-behavior:none; }
    /* menü açıkken header HEP aynı yerde (üste yapışık, üst şeridin de üstünde) → içerik boşluğu sayfa konumundan bağımsız
       (ölçüldü: kaydırılmış sayfada header altı 76px, içerik 148px'ten başlıyordu → 72px boşluk). Sohbet düğmesi menünün üstüne binmesin. */
    body.menu-open .t50-headerbar{ transform:none !important; top:12px !important; z-index:70; }
    body.menu-open .ai-chat-root{ opacity:0; pointer-events:none; }
    .t50-drawer > *{ max-width:640px; margin-inline:auto; }
    @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
      .t50-drawer{ -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
    }
    body.menu-open .t50-drawer{ opacity:1; pointer-events:auto; }
    .t50-drawer .dw-group{ border-bottom:1px solid var(--sb-pill-border); }
    .t50-drawer .dw-group:last-of-type{ border-bottom:0; }
    .t50-drawer .dw-head{ width:100%; text-align:left; background:transparent; border:0; color:#fff; font-family:inherit;
      font-size:16px; font-weight:600; padding:14px 8px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
    .t50-drawer .dw-head .chev{ font-size:12px; transition:transform .2s ease; }
    .t50-drawer .dw-group.open .dw-head .chev{ transform:rotate(180deg); }
    .t50-drawer .dw-sub{ display:none; padding:0 8px 10px; }
    .t50-drawer .dw-group.open .dw-sub{ display:block; }
    .t50-drawer .dw-sub a,.t50-drawer .dw-flat{ display:block; padding:9px 8px; font-size:14px; color:rgba(255,255,255,.82); }
    .t50-drawer .dw-cta{ margin-top:12px; width:100%; height:48px; background:var(--cta); color:var(--cta-ink);
      border:0; border-radius:var(--r-pill); font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; }
    /* 🔎 mobil drawer · sitede ara satırı (büyüteç mobilde gizli olduğu için buraya kondu) */
    .t50-drawer .dw-ara{ margin-top:14px; width:100%; height:46px; display:flex; align-items:center; justify-content:center; gap:9px;
      background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:12px;
      font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:background-color .16s ease; }
    .t50-drawer .dw-ara i{ font-size:14px; }
    .t50-drawer .dw-ara:hover{ background:rgba(255,255,255,.14); }


    /* header responsive */
    @media (max-width:1023px){ .t50-icobtn{ width:40px; height:40px; } .t50-cta{ min-width:120px; } .t50-navlink{ padding:8px 12px; } }
    /* 15.09.2026 · karar: "tablette mobil header yok, menü patlamış". 768'de masaüstü nav sığmıyordu
       ("Yardım / Hasar" 768 VE 1024'te kırılıyordu, ölçüldü; nav 566px istiyor, 1200 altında orta kolon ≤550) → 1199px ve altı HAMBURGER. */
    .t50-navlink{ white-space:nowrap; }
    @media (max-width:1199.98px){ .t50-headerbar{ display:flex; justify-content:space-between; } .t50-pill,.t50-controls{ display:none; } .t50-burger{ display:inline-flex; } }
    @media (max-width:767px){ .t50-topbar{ font-size:12px; padding:0 14px; } .t50-logo{ font-size:18px; height:32px; } .t50-logo .sb-kilit{ height:32px; } }

    /* ===================== MEGAMENÜ (geçici · ?mega=on · LIQUID GLASS · sol kategori rayı + sağ ürün paneli) ===================== */
    .t50-navitem.has-mega{ position:relative; }
    /* megamenü cam/rim'i ORTAK .t50-dd kuralından gelir (birbirini tamamlar); burada sadece DÜZEN */
    /* 21.08.2026 · üçüncü kolon: hover'da değişen görsel paneli */
    /* 15.09.2026 · karar: "megamenüler ortalansın, navigasyon boyu kadar olsun, yükseklik eşit olsun".
       Öncesi (ölçüldü, 1440px): menü başlığın altından açılıyordu (360→1420, çubuk 54→1386, sağdan 34px taşma),
       yükseklik sekmeye göre 283–546px arasında değişiyor, görsel 297×251'e kadar küçülüyordu.
       Şimdi: .has-mega konum bağlamı DEĞİL → menü en yakın konumlu ata, yani .t50-headerbar'a (fixed) göre yerleşir:
       left:0/right:0 = çubukla BİREBİR aynı genişlik ve ortalı. Yükseklik SABİT (--m3-h) → iki menü ve tüm sekmeler eşit,
       görsel kolonu her sekmede tam boy. */
    .t50-navitem.has-mega{ position:static; }
    /* 15.09.2026 · karar: "Bireysel ↔ Kurumsal geçerken megamenü kapanıp açılıyor". Biri solarken öteki beliriyordu
       (0,18 sn çapraz geçiş, yarı saydam cam → kapanıp açılma gibi görünüyordu). Açık bir megamenüden ötekine geçişte
       JS body'ye .mega-gecis koyar → geçiş YOK, içerik anında değişir; menü hiç kapanmamış görünür. */
    body.mega-gecis .t50-mega3{ transition:none; }
    .t50-mega3{ --m3-h:400px; left:0; right:0; width:auto; min-width:0; height:var(--m3-h);
      padding:0; overflow:hidden; display:grid; grid-template-columns:270px 1fr 330px; grid-template-rows:100%; }
    @media (max-width:1199.98px){   /* dar masaüstünde görsel kolonu düşer, menü eski haline döner */
      .t50-mega3{ grid-template-columns:270px 1fr; }
      .t50-mega3 .m3-gorsel{ display:none; }
    }

    /* SAĞ · görsel paneli · katmanlar üst üste, yalnız opacity değişir (yerleşim kaymaz) */
    /* 21.08.2026 · karar: "menüdeki fotolar biraz içeride olsun" → görsel artık
       panelin kenarlarına yapışmıyor; çevresinde eşit boşluk var ve köşeleri
       yuvarlatıldı. Boşluk TEK değişkenden (--m3-gpad) yönetilir; görsel, gölge
       ve alt yazı aynı çerçeveye hizalanır. */
    .m3-gorsel{ --m3-gpad:16px; position:relative; overflow:hidden; background:transparent;
      border-left:1px solid color-mix(in srgb, var(--sl-ink) 10%, transparent); }
    /* NOT: <img>'de `inset + width:auto` boyutu SIFIRLIYOR (intrinsic boyut henüz
       yokken 0x0 ölçüldü) → genişlik/yükseklik açıkça hesaplanır. */
    .m3-gimg{ position:absolute; inset:var(--m3-gpad); object-fit:cover;
      width:calc(100% - 2 * var(--m3-gpad)); height:calc(100% - 2 * var(--m3-gpad));
      border-radius:18px; opacity:0; transition:opacity .3s ease; }
    .m3-gimg.on{ opacity:1; }
    .m3-gshade{ position:absolute; inset:var(--m3-gpad); pointer-events:none; border-radius:18px;
      background:linear-gradient(to top, rgba(6,20,34,.88) 0%, rgba(6,20,34,.42) 42%, rgba(6,20,34,.06) 74%); }
    .m3-gcap{ position:absolute; left:calc(var(--m3-gpad) + 18px); right:calc(var(--m3-gpad) + 18px);
      bottom:calc(var(--m3-gpad) + 16px); display:flex; flex-direction:column; gap:.3rem; color:#F2F8FB; }
    .m3-gkick{ font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sky-300); }
    .m3-gbaslik{ font-size:1.12rem; font-weight:800; line-height:1.3; letter-spacing:-.01em; }
    @media (prefers-reduced-motion:reduce){ .m3-gimg{ transition:none; } }

    /* SOL · kategori rayı */
    .m3-rail{ display:flex; flex-direction:column; gap:3px; padding:16px 14px; min-height:0;
      border-right:1px solid color-mix(in srgb, var(--sl-ink) 10%, transparent); }
    .m3-tab{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px;
      background:transparent; border:0; color:var(--sl-ink); font:inherit; font-size:15px; font-weight:600;
      cursor:pointer; text-align:left; width:100%; transition:background-color .16s ease; }
    .m3-tab > i:first-child{ font-size:20px; width:24px; text-align:center; color:var(--cta); flex-shrink:0; }
    .m3-tab span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* sekme adı TEK satır (15.09.2026) */
    .m3-tab .m3-arr{ font-size:11px; opacity:0; transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease; }
    .m3-tab.on{ background:color-mix(in srgb, var(--sl-ink) 8%, transparent); }
    .m3-tab.on .m3-arr{ opacity:.55; transform:none; }
    .m3-tab:hover{ background:color-mix(in srgb, var(--sl-ink) 6%, transparent); }
    /* ⭐ Öne Çıkanlar sekmesi · yalnız RENK vurgusu + statik ayraç (hover'da konum/boyut değişmez → zıplama yok) */
    .m3-tab-fav{ position:relative; margin-bottom:9px; }
    .m3-tab-fav > i:first-child{ color:#f5b301; }
    .m3-tab-fav.on{ background:color-mix(in srgb, #f5b301 15%, transparent); }
    .m3-tab-fav:hover{ background:color-mix(in srgb, #f5b301 11%, transparent); }
    .m3-tab-fav::after{ content:''; position:absolute; left:14px; right:14px; bottom:-5px; height:1px;
      background:color-mix(in srgb, var(--sl-ink) 12%, transparent); }
    .t50-mega3 .m3-call{ margin-top:auto;   /* rayın DİBİNE sabit → iki menüde de aynı yerde */ display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:14px;
      color:var(--sl-ink); font-size:13px; font-weight:600; line-height:1.3;
      background:color-mix(in srgb, var(--cta) 15%, transparent); border:1px solid color-mix(in srgb, var(--cta) 42%, transparent);
      transition:background-color .16s ease; }
    .t50-mega3 .m3-call > i{ font-size:15px; color:var(--cta); flex-shrink:0; }
    .t50-mega3 .m3-call:hover{ background:color-mix(in srgb, var(--cta) 24%, transparent); }

    /* SAĞ · seçili kategori ürünleri (tek sütun, ferah satırlar · dikeyde ortalı) */
    /* 21.08.2026 · karar: "menüdeki alt seçenekler ortalı olmasın, yukarı hizalı olsun".
       Eskiden justify-content:center idi → az hizmetli kategorilerde (ör. Konut: 3 kayıt)
       liste panelin ortasında asılı kalıyordu. Artık üstten başlar, kategori değişince
       ilk satırın yeri sabit kalır. */
    .m3-panels{ padding:16px; position:relative; display:flex; flex-direction:column; justify-content:flex-start; min-height:0; overflow-y:auto; }
    .m3-panel{ display:none; width:100%; }
    .m3-panel.on{ display:block; }
    /* 15.09.2026 · ürünler İKİ KOLON: sabit yükseklikte 7 ürünlü sekme de sığar, az ürünlü sekme boş sütun gibi durmaz */
    .m3-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 8px; align-content:start; }
    .t50-mega3 .m3-item{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; color:var(--sl-ink);
      transition:background-color .16s ease; }
    .t50-mega3 .m3-item:hover{ background:color-mix(in srgb, var(--sl-ink) 6%, transparent); }
    .m3-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex-shrink:0;
      background:color-mix(in srgb, var(--sl-ink) 8%, transparent); }
    .m3-ic i{ font-size:22px; color:var(--sky-500); }
    .m3-txt{ flex:1; min-width:0; }
    .m3-txt b{ display:block; font-size:15px; font-weight:600; line-height:1.2; }
    .m3-txt small{ display:block; font-size:12.5px; color:color-mix(in srgb, var(--sl-ink) 55%, transparent); margin-top:2px; }
    .m3-go{ font-size:13px; opacity:0; color:var(--cta); transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease; }
    .t50-mega3 .m3-item:hover .m3-go{ opacity:1; transform:none; }

    @media (max-width:820px){
      .t50-mega3{ grid-template-columns:1fr; height:auto; max-height:calc(100vh - 140px); overflow-y:auto; }
      .m3-grid{ grid-template-columns:1fr; }
      .m3-rail{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--sl-ink) 10%,transparent); }
      .m3-tab{ width:auto; } .m3-call{ width:100%; }
      .m3-tab-fav{ margin-bottom:0; } .m3-tab-fav::after{ display:none; }
    }

    /* Tema toggle ikonları (dark→güneş, light→ay) */
    .t50-theme .ic-sun,.t50-theme .ic-moon{ display:none; }
    html.dark .t50-theme .ic-sun{ display:inline-block; }
    html:not(.dark) .t50-theme .ic-moon{ display:inline-block; }
    .t50-dtheme{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;
      padding:12px 14px; border-radius:var(--r-box); background:var(--sb-pill-bg-solid); color:rgba(255,255,255,.92); font-size:14px; }
    .t50-dtheme button{ display:inline-flex; align-items:center; gap:8px; background:var(--sb-hover-veil); color:inherit;
      border:0; border-radius:999px; padding:9px 15px; font:inherit; font-size:14px; cursor:pointer; }
    .t50-dtheme .ic-sun,.t50-dtheme .ic-moon{ display:none; }
    html.dark .t50-dtheme .ic-sun{ display:inline-block; }
    html:not(.dark) .t50-dtheme .ic-moon{ display:inline-block; }

    /* ===================== ANA / HERO ===================== */
    .t50-main{ position:relative; flex:1; }              /* dikey akış: herowrap + slider */
    .t50-herowrap{ position:relative; }                  /* rozet buraya çıpalanır (hero alt-sağ) */

    /* C · HERO PANEL (yuvarlak üst + DİYAGONAL alt · clip-path) */
    .t50-hero{
      position:relative; background:var(--hero-fill); color:var(--on-hero);
      width:100%;
      display:grid; place-items:center; padding:0 4%;
      min-height:calc(100svh - var(--topbar-h) - var(--gap) - var(--frame-pad));
      /* GÖLGE YOK (karar) */
      clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);  /* FALLBACK: düz-diyagonal */
      transition:background-color .3s ease;
    }
    @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
      .t50-hero{
        clip-path:shape(
          from var(--corner) 0%,
          curve to 0% var(--corner) with 0% 0%,                                   /* üst-sol yuvarlak */
          line to 0% calc(100% - var(--corner)),                                  /* sol kenar aşağı */
          curve to var(--corner) 100% with 0% 100%,                               /* alt-sol yuvarlak (BL · referans) */
          line to calc(100% - var(--corner)) calc(100% - var(--slant)),           /* DİYAGONAL alt (sola-alçak, sağa-yüksek) */
          curve to 100% calc(100% - var(--slant) - var(--corner)) with 100% calc(100% - var(--slant)), /* alt-sağ kavis */
          line to 100% var(--corner),                                             /* sağ kenar yukarı */
          curve to calc(100% - var(--corner)) 0% with 100% 0%,                    /* üst-sağ yuvarlak */
          close
        );
      }
    }

    /* Script başlık */
    .t50-script{
      margin:0; z-index:2; text-align:center; color:var(--on-hero);
      font-family:var(--font);
      font-weight:800; font-size:clamp(40px,6.4vw,92px); line-height:1.06; letter-spacing:-.015em;
      max-width:min(92%,900px); min-height:1.2em;   /* CLS guard */
    }

    /* Sağ-alt rozet (hero'nun KARDEŞİ · clip'e takılmaz, diyagonale biner) */
    .t50-badge{
      position:absolute; right:40px; bottom:40px; z-index:5;
      width:150px; height:150px; border-radius:var(--r-pill);
      background:var(--sky-400); color:#10201B;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
      font-weight:800; font-size:15px; line-height:1.15; letter-spacing:.01em;
      transition:transform .18s ease;
    }
    .t50-badge i{ font-size:20px; }
    .t50-badge:hover{ transform:scale(1.04); }


    /* ===================== RESPONSIVE ===================== */
    /* 15.09.2026 · karar: "mobilde yazılar kutu kenarına dayanmış, paddingler yok olmuş" (iç sayfalar dahil).
       TÜM içerik kapları (hm-wrap · sgbp-in · sv-in · sl-in · sbb-in) yatay payını BU değişkenden alır.
       Masaüstünde içerik genişliği değişmez: max-width = container + 2 × pay. */
    :root{ --wrap-pad:26px; }
    @media (max-width:1199.98px){ :root{ --wrap-pad:24px; } }
    @media (max-width:767px){ :root{ --wrap-pad:18px; } }
    @media (max-width:1023px){
      :root{ --frame-pad:18px; --slant:48px; --corner:22px; }
      .t50-badge{ width:120px; height:120px; font-size:13px; }
    }
    @media (max-width:767px){
      :root{ --frame-pad:13px; --topbar-h:36px; --slant:32px; --corner:18px; }
      .t50-script{ font-size:clamp(48px,15vw,84px); }
      .t50-badge{ width:96px; height:96px; right:18px; bottom:18px; font-size:12px; }
    }

    /* ═══════════════ SİGORTANABAK EĞİK ÇİZGİ (SLANT) KURALI ═══════════════
       Footer + hero-slider ile aynı görsel dil. Herhangi bir kutuya class ekle:
         .sgb-slant-b → ALT kenar eğik (sol-alçak → sağ-yüksek · footer üstüne PARALEL)
         .sgb-slant-t → ÜST kenar eğik (footer'ın kendisi gibi)
       Eğim yüksekliği --sgb-slant, köşe yarıçapı --sgb-corner ile ayarlanır (öğe üstünde override et).
       KURAL: küçük/dar öğede küçük değer (kart ~16/8px · bölüm ~40/16px · sayfa ~72/28px).
       shape() destekliyse köşeler YUVARLAK; yoksa düz-diyagonal fallback. Dokümantasyon:
       /readme/2026/07/19/sigortanabak-egik-cizgi-kurali/v1/
       ⚠️ Eğim alanında içerik olmasın (o kenara --sgb-slant kadar padding bırak) — yoksa clip keser. */
    :root{ --sgb-slant:28px; --sgb-corner:14px; }
    .sgb-slant-b{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--sgb-slant)), 0 100%); }
    .sgb-slant-t{ clip-path:polygon(0 var(--sgb-slant), 100% 0, 100% 100%, 0 100%); }
    @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
      .sgb-slant-b{ clip-path:shape(
        from 0% 0%, line to 100% 0%,
        line to 100% calc(100% - var(--sgb-slant) - var(--sgb-corner)),
        curve to calc(100% - var(--sgb-corner)) calc(100% - var(--sgb-slant)) with 100% calc(100% - var(--sgb-slant)),
        line to var(--sgb-corner) 100%,
        curve to 0% calc(100% - var(--sgb-corner)) with 0% 100%, close ); }
      .sgb-slant-t{ clip-path:shape(
        from 0% calc(var(--sgb-slant) + var(--sgb-corner)),
        curve to var(--sgb-corner) var(--sgb-slant) with 0% var(--sgb-slant),
        line to calc(100% - var(--sgb-corner)) 0%,
        curve to 100% var(--sgb-corner) with 100% 0%,
        line to 100% 100%, line to 0% 100%, close ); }
    }

    /* Kutu/görsel için: TÜM köşeler yuvarlak + ALT eğim (kart/görselde üst kare kalmasın · full-width bölümlerde .sgb-slant-b kullan) */
    .sgb-slant-box{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--sgb-slant)), 0 100%); }

    /* ═══ 19.08.2026 · karar: CTA'daki WhatsApp düğmeleri hover'da NUMARAYA dönüşür ═══
       Header'daki "Bizi Arayın" ile aynı desen (kaynak: t-42 .cta-contact).
       İki metin katmanı üst üste; hover'da etiket dikeyde büzülür, numara merkezden açılır.
       min-width ŞART: numara ("0530 350 30 30") etiketten geniş — sabitlenmezse hover'da
       düğme şişer ve yanındaki düğmeleri iter (CLS). Yalnız transform+opacity → layout sabit.
       Tıklama davranışı DEĞİŞMEZ: bağlantı yine wa.me sohbetini açar. */
    .sb-wa-degis{ position:relative; min-width:190px; overflow:hidden; }
    .sb-wa-degis .wa-etiket,
    .sb-wa-degis .wa-tel{
      position:absolute; top:50%; left:50%; transform-origin:center center;
      display:inline-flex; align-items:center; gap:9px; white-space:nowrap; line-height:1;
      transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    }
    .sb-wa-degis .wa-etiket{ transform:translate(-50%,-50%) scaleY(1); opacity:1; }
    .sb-wa-degis .wa-tel{ transform:translate(-50%,-50%) scaleY(0); opacity:0; letter-spacing:-.01em; }
    .sb-wa-degis:hover .wa-etiket,
    .sb-wa-degis:focus-visible .wa-etiket{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
    .sb-wa-degis:hover .wa-tel,
    .sb-wa-degis:focus-visible .wa-tel{ transform:translate(-50%,-50%) scaleY(1); opacity:1; }
    @media (prefers-reduced-motion:reduce){
      .sb-wa-degis .wa-etiket,.sb-wa-degis .wa-tel{ transform:translate(-50%,-50%) !important; transition:opacity .2s linear; }
    }

    @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
      .sgb-slant-box{ clip-path:shape(
        from 0% var(--sgb-corner),
        curve to var(--sgb-corner) 0% with 0% 0%,
        line to calc(100% - var(--sgb-corner)) 0%,
        curve to 100% var(--sgb-corner) with 100% 0%,
        line to 100% calc(100% - var(--sgb-slant) - var(--sgb-corner)),
        curve to calc(100% - var(--sgb-corner)) calc(100% - var(--sgb-slant)) with 100% calc(100% - var(--sgb-slant)),
        line to var(--sgb-corner) 100%,
        curve to 0% calc(100% - var(--sgb-corner)) with 0% 100%, close ); }
    }

    /* ===================== HERO-ALTI YATAY SLIDER (GSAP · interlock diyagonal üst) ===================== */
    .t50-slider{
      /* --sl-fill/ink/muted/line → :root + html.dark (MOD-BAĞIMLI · düzeltme 6) */
      --card-w:440px; --card-gap:20px;
      --gutter:max(0px, calc((100% - var(--container)) / 2));   /* düzeltme 7: içerik container'a hizalı */
      position:relative; z-index:1; margin-top:calc(var(--gap) - var(--slant));   /* düzeltme 1: hero ile EŞİT gap (page-bg görünür) */
      padding:calc(var(--slant) + 64px) 0 46px;
      background:var(--sl-fill); color:var(--sl-ink);
      clip-path:polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);       /* FALLBACK: üst diyagonal yukarı, alt düz */
    }
    @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
      .t50-slider{
        clip-path:shape(
          from 0% calc(var(--slant) + var(--corner)),
          line to 0% calc(100% - var(--corner)),
          curve to var(--corner) 100% with 0% 100%,                        /* alt-sol yuvarlak */
          line to calc(100% - var(--corner)) 100%,                         /* DÜZ alt */
          curve to 100% calc(100% - var(--corner)) with 100% 100%,         /* alt-sağ yuvarlak */
          line to 100% var(--corner),
          curve to calc(100% - var(--corner)) 0% with 100% 0%,             /* üst-sağ yuvarlak (yüksek) */
          line to var(--corner) var(--slant),                              /* DİYAGONAL üst (sağ-yüksek → sol-alçak) */
          curve to 0% calc(var(--slant) + var(--corner)) with 0% var(--slant),  /* üst-sol yuvarlak */
          close
        );
      }
    }
    .t50-slider .sl-intro{ display:flex; justify-content:space-between; align-items:flex-end; gap:44px; flex-wrap:wrap; margin-bottom:32px; padding-inline:var(--gutter); }  /* düzeltme 7: intro container'a hizalı */
    .t50-slider .sl-intro-left{ max-width:520px; }
    .t50-slider .sl-intro h2{ margin:0 0 14px; font-size:clamp(28px,3.4vw,44px); font-weight:800; line-height:1.06; letter-spacing:-.01em; }
    .t50-slider .sl-intro p{ margin:0; color:var(--sl-muted); font-size:16px; line-height:1.5; }
    .t50-slider .sl-intro-links{ flex:1; min-width:300px; max-width:460px; }
    .t50-slider .sl-ln{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 2px;
      border-top:1px solid var(--sl-line); color:var(--sl-ink); font-size:16px; font-weight:500; }
    .t50-slider .sl-intro-links .sl-ln:last-child{ border-bottom:1px solid var(--sl-line); }
    .t50-slider .sl-ln i{ color:var(--accent-300); transition:transform .18s ease; }
    .t50-slider .sl-ln:hover i{ transform:translateX(4px); }

    .t50-slider .sl-viewport{ overflow:hidden; margin-left:var(--gutter); margin-right:calc(-1 * var(--frame-pad)); }  /* düzeltme 7: sol container-hizalı (ilk kart), sağa full-bleed */
    .t50-slider .sl-track{ display:flex; gap:var(--card-gap); width:max-content; padding-right:var(--frame-pad); will-change:transform; }
    .t50-slider .sl-card{ flex:0 0 var(--card-w); width:var(--card-w); border-radius:var(--r-box); overflow:hidden;
      background:var(--card-bg,#17435B); display:flex; flex-direction:column; box-shadow:0 16px 34px -20px rgba(0,0,0,.65); }
    .t50-slider .sl-card-media{ aspect-ratio:16/10; background:
      linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02)); position:relative; }
    .t50-slider .sl-card-media i{ position:absolute; left:18px; bottom:14px; font-size:24px; color:rgba(255,255,255,.9); }
    .t50-slider .sl-card-body{ padding:22px; display:flex; flex-direction:column; gap:9px; flex:1; }
    .t50-slider .sl-card-body h3{ margin:0; font-size:20px; font-weight:800; letter-spacing:.01em; }
    .t50-slider .sl-card-body > p{ margin:0 0 4px; color:rgba(255,255,255,.74); font-size:14px; line-height:1.45; }
    .t50-slider .sl-card-links{ margin-top:auto; }
    .t50-slider .sl-card-links a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 2px;
      border-top:1px solid rgba(255,255,255,.14); font-size:14px; color:rgba(255,255,255,.9); }
    .t50-slider .sl-card-links a i{ color:var(--accent-300); transition:transform .18s ease; }
    .t50-slider .sl-card-links a:hover i{ transform:translateX(4px); }

    .t50-slider .sl-controls{ display:flex; align-items:center; gap:24px; margin-top:32px;
      padding-inline:var(--gutter); }   /* düzeltme 7: kontroller container'a hizalı */
    .t50-slider .sl-progress{ position:relative; flex:1; height:3px; background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden; }
    .t50-slider .sl-progress-fill{ position:absolute; inset:0 auto 0 0; width:10%; background:var(--sky-400); border-radius:2px; transition:width .1s linear; }
    .t50-slider .sl-arrows{ display:flex; gap:10px; flex-shrink:0; }
    .t50-slider .sl-arrow{ width:52px; height:52px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.10);
      color:#fff; font-size:15px; display:inline-flex; align-items:center; justify-content:center; transition:background-color .18s ease; }
    .t50-slider .sl-arrow:hover{ background:var(--sky-600); }

    /* desktop >=1024: bölüm 100svh flex-kolon → intro/kartlar/kontroller HEP görünür (pin içi · kompakt) */
    @media (min-width:1024px){
      .t50-slider{ height:100svh; min-height:640px; display:flex; flex-direction:column;
        padding:calc(var(--slant) + 34px) 0 26px; overflow:hidden; }
      .t50-slider .sl-intro{ flex:0 0 auto; margin-bottom:18px; align-items:center; }
      .t50-slider .sl-intro h2{ font-size:clamp(26px,2.7vw,38px); margin-bottom:10px; }
      .t50-slider .sl-intro p{ font-size:15px; }
      .t50-slider .sl-ln{ padding:11px 2px; }
      .t50-slider .sl-viewport{ flex:1; min-height:0; }
      .t50-slider .sl-track{ height:100%; align-items:stretch; }
      .t50-slider .sl-card{ height:100%; }
      .t50-slider .sl-card-media{ aspect-ratio:auto; flex:1 1 0; min-height:70px; }
      .t50-slider .sl-card-body{ flex:0 0 auto; padding:16px 18px; gap:6px; }
      .t50-slider .sl-card-links a{ padding:9px 2px; }
      .t50-slider .sl-controls{ flex:0 0 auto; margin-top:18px; }
    }

    /* mobil/tablet <1024: PIN YOK · native yatay kaydırma + snap */
    @media (max-width:1023px){
      .t50-slider{ --card-w:300px; padding-top:calc(var(--slant) + 44px); }
      .t50-slider .sl-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
      .t50-slider .sl-viewport::-webkit-scrollbar{ display:none; }
      .t50-slider .sl-card{ scroll-snap-align:start; }
    }
    @media (max-width:767px){
      .t50-slider{ --card-w:80vw; }
      .t50-slider .sl-intro{ flex-direction:column; align-items:stretch; gap:22px; }
      .t50-slider .sl-intro-links{ min-width:0; max-width:none; }
    }

    
    /* ===================== FOOTER (token-aware · minimal fallback) ===================== */
    .t50-foot{ flex-shrink:0; background:var(--page-bg); color:var(--muted); border-top:1px solid var(--line);
      padding:22px 24px; text-align:center; font-size:14px; transition:background-color .25s ease,color .25s ease; }
    .t50-foot a{ color:var(--muted); }
    .t50-foot a:hover{ color:var(--ink); }

    /* ===================== FOOTER · marka + gerçek ürün/rehber linkleri + CTA + alt bar ===================== */
    .t50-footer{ flex-shrink:0; background:var(--page-bg); color:var(--sl-ink); transition:background-color .25s ease,color .25s ease; }

    /* Sosyal daire (marka bloğu içinde) */
    .foot-soc{ width:52px; height:52px; border-radius:999px; background:var(--sky-400); color:#0C2630;
      display:inline-flex; align-items:center; justify-content:center; font-size:19px; transition:transform .18s ease; }
    .foot-soc:hover{ transform:translateY(-2px); }
    .foot-soc.sm{ width:42px; height:42px; font-size:16px; }

    /* Panel (DİYAGONAL üst · shape yoksa yuvarlak köşe fallback) */
    .foot-panel-wrap{ padding:0 var(--frame-pad) var(--frame-pad); }
    .foot-panel{
      position:relative; background:var(--sl-fill); color:var(--sl-ink);
      padding:var(--pad-panel) 0;
      border-radius:clamp(18px,2.4vw,30px);   /* FALLBACK: shape yoksa köşeler YUVARLAK (köşesiz kalmasın) */
      transition:background-color .25s ease,color .25s ease;
    }
    @supports (clip-path: shape(from 0 0, line to 1px 1px, close)){
      .foot-panel{
        border-radius:0;
        padding:var(--pad-panel-slant) 0 var(--pad-panel);   /* 15.09.2026 · alt = üst görünür nefes (44) */
        clip-path:shape(
          from 0% calc(var(--slant) + var(--corner)),
          line to 0% calc(100% - var(--corner)),
          curve to var(--corner) 100% with 0% 100%,
          line to calc(100% - var(--corner)) 100%,
          curve to 100% calc(100% - var(--corner)) with 100% 100%,
          line to 100% var(--corner),
          curve to calc(100% - var(--corner)) 0% with 100% 0%,
          line to var(--corner) var(--slant),                                  /* DİYAGONAL üst (sağ-yüksek → sol-alçak · slider ile aynı) */
          curve to 0% calc(var(--slant) + var(--corner)) with 0% var(--slant),
          close
        );
      }
    }
    .foot-inner{ max-width:calc(var(--container) + 2 * var(--wrap-pad)); margin:0 auto; padding:0 var(--wrap-pad); }   /* 18.09.2026 · .hm-wrap ile aynı hiza (26 sabitti: 768'de 2px, 390'da 8px kayıyordu) */

    /* Grid: marka (geniş) + 3 link kolonu */
    .foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.5fr; gap:clamp(28px,3.4vw,56px); align-items:start; }

    /* MARKA + İLETİŞİM */
    .foot-brand{ max-width:380px; }
    .foot-logo{ display:inline-flex; align-items:baseline; gap:6px; font-size:26px; font-weight:800; letter-spacing:-.01em; color:var(--sl-ink); }
    .foot-logo .soft{ color:var(--marka); font-weight:700; }

    /* ---- LOGO KİLİDİ (header ile AYNI yüzdeler · 1129,5 × 182) ----------
       27.08.2026 · karar: header'da marka kelimeden 20 birim (≈4,4 px)
       uzaklaştırıldı, footer da eşitlendi. İki logo birebir aynı kilitte;
       birini değiştirirken ötekini de güncelle (_header.blade.php). */
    .foot-logo .sb-kilit{ position:relative; display:block; height:40px; aspect-ratio:1129.5/182; }
    .foot-logo .sb-kilit > *{ position:absolute; }
    .foot-logo .sb-kelime{ left:0; top:0; width:84.06%; height:100%; }
    .foot-logo .sb-marka{ left:81.32%; top:.16%; width:18.65%; height:99.67%; transition:opacity .5s ease; }
    .foot-logo .sb-marka img{ width:100%; height:100%; display:block; }
    .foot-logo .sb-kilit canvas.sb-3d{ left:79.88%; top:-6.8%; width:21.55%; height:113.6%;
      display:block; background:transparent; pointer-events:none;
      opacity:0; transition:opacity .5s ease; }
    .foot-logo .sb-kilit canvas.sb-3d.sb-3d-hazir{ opacity:1; }
    .foot-logo .sb-kilit.sb-3d-var .sb-marka{ opacity:0; }
    @media (max-width:767px){ .foot-logo .sb-kilit{ height:32px; } }

    /* ---- BRANŞ ŞERİDİ · sayfanın en altı -------------------------------
       Düz SVG ve 3D iframe aynı kutuda üst üste; 3D gelince düz olan söner.
       Kutu oranı şeridin kendi kutusundan (440 × 76,5). */
    .foot-branslar{ margin-top:clamp(30px,3.6vw,46px); }
    .foot-brans-kutu{ position:relative; width:100%; aspect-ratio:440/100; }
    .foot-brans-kutu > *{ position:absolute; inset:0; width:100%; height:100%; }
    .foot-brans-duz{ transition:opacity .5s ease; }
    .foot-brans-kutu canvas.sb-3d-ikon{ display:block; background:transparent;
      opacity:0; transition:opacity .5s ease; }
    .foot-brans-kutu canvas.sb-3d-ikon.sb-3d-hazir{ opacity:1; }
    .foot-brans-kutu:has(canvas.sb-3d-hazir) .foot-brans-duz{ opacity:0; }
    .foot-brans-kutu.sb-3d-var .foot-brans-duz{ opacity:0; }
    @media (max-width:767px){ .foot-branslar{ margin-top:26px; } }
    .foot-tag{ margin:16px 0 22px; color:var(--sl-muted); font-size:15px; line-height:1.62; }
    .foot-contact{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:12px; }
    .foot-contact li{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--sl-ink); }
    .foot-contact li i{ width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:14px;
      background:color-mix(in srgb, var(--marka) 14%, transparent); color:var(--marka); }
    .foot-contact a{ color:var(--sl-ink); transition:color .16s ease; }
    .foot-contact a:hover{ color:var(--marka); }
    .foot-soc-set{ display:flex; gap:10px; }

    /* LİNK KOLONLARI */
    .foot-col h3{ margin:0 0 18px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--sl-ink); }
    .foot-col a{ display:block; padding:7px 0; font-size:15px; line-height:1.4; color:var(--sl-muted); transition:color .16s ease; }
    .foot-col a:hover{ color:var(--marka); }
    .foot-more{ margin-top:14px; font-weight:700; color:var(--marka); }
    .foot-more i{ font-size:12px; margin-left:6px; transition:transform .18s ease; }
    .foot-more:hover i{ transform:translateX(4px); }

    /* CTA şeridi */
    .foot-cta{ margin-top:clamp(32px,4vw,48px); padding-top:clamp(28px,3vw,38px); border-top:1px solid var(--sl-line);
      display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
    .foot-cta-txt strong{ display:block; font-size:clamp(18px,2vw,25px); font-weight:800; letter-spacing:-.01em; color:var(--sl-ink); }
    .foot-cta-txt span{ display:block; margin-top:5px; font-size:15px; color:var(--sl-muted); max-width:520px; line-height:1.55; }
    .foot-cta-btn{ display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 30px; border-radius:999px;
      background:var(--cta); color:var(--cta-ink); font-weight:800; font-size:16px; white-space:nowrap; transition:filter .18s ease; }
    .foot-cta-btn:hover{ filter:brightness(1.06); }
    .foot-cta-btn i{ font-size:15px; }

    /* Alt bar (koyu · full-width) */
    .foot-bottom{ background:var(--foot-bottom-bg); color:var(--foot-bottom-ink); transition:background-color .25s ease,color .25s ease; }
    .foot-bottom-inner{ max-width:calc(var(--container) + 2 * var(--wrap-pad)); margin:0 auto; padding:20px var(--wrap-pad);
      display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
    .foot-bottom p{ margin:0; font-size:13.5px; }
    .foot-bottom .foot-note{ opacity:.72; }
    /* Alt bar kurumsal linkleri — ortada, ayraçlı; hover'da yalnız renk (konum sabit) */
    .foot-korum{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; }
    .foot-korum a{ color:inherit; opacity:.82; transition:opacity .16s ease, color .16s ease; }
    .foot-korum a:hover{ opacity:1; color:var(--marka); }
    .foot-made a{ color:inherit; font-weight:inherit; transition:opacity .16s ease; }
    .foot-made a:hover{ text-decoration:underline; opacity:.8; }

    /* Responsive */
    @media (max-width:1023px){
      .foot-grid{ grid-template-columns:1fr 1fr 1fr; }
      .foot-brand{ grid-column:1 / -1; max-width:none; margin-bottom:6px; }
    }
    @media (max-width:640px){
      .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 24px; }
      .foot-col h3{ font-size:12px; letter-spacing:.08em; white-space:nowrap; }   /* 18.09.2026 · 'SİGORTA ÜRÜNLERİ' 390'da iki satıra kırılıp kolonları kaydırıyordu (ölçüldü: 39px / 20px) */
      .foot-brand{ grid-column:1 / -1; }
      .foot-rehber{ grid-column:1 / -1; }
      .foot-cta{ flex-direction:column; align-items:flex-start; }
      .foot-cta-btn{ width:100%; justify-content:center; }
      .foot-bottom-inner{ flex-direction:column; align-items:flex-start; }
    }
    
    /* ===================== LOGO DİLİ · parçalar ===================== */
    :root{
      --ld-goz-mono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath fill='%23000' d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M926.6 83A54.6 54.6 0 1 1 1035.8 83A54.6 54.6 0 1 1 926.6 83ZM948 83A33.2 33.2 0 1 0 1014.4 83A33.2 33.2 0 1 0 948 83ZM974.39 108.51A26.4 26.4 0 1 1 988.01 108.51A15.35 15.35 0 1 0 974.39 108.51Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85' fill='%23000'/%3E%3C/svg%3E");
      --ld-goz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath fill='%230C3380' d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Cpath fill='%231C9CBE' fill-rule='evenodd' d='M926.6 83A54.6 54.6 0 1 1 1035.8 83A54.6 54.6 0 1 1 926.6 83ZM948 83A33.2 33.2 0 1 0 1014.4 83A33.2 33.2 0 1 0 948 83ZM974.39 108.51A26.4 26.4 0 1 1 988.01 108.51A15.35 15.35 0 1 0 974.39 108.51Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85' fill='%23F1940A'/%3E%3C/svg%3E");
      --ld-cer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath fill='%230C3380' d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85' fill='%23F1940A'/%3E%3C/svg%3E");
      --ld-halka-soluk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='924.6 26.4 113.2 113.2'%3E%3Cpath fill='%23fff' fill-opacity='.22' fill-rule='evenodd' d='M926.6 83A54.6 54.6 0 1 1 1035.8 83A54.6 54.6 0 1 1 926.6 83ZM948 83A33.2 33.2 0 1 0 1014.4 83A33.2 33.2 0 1 0 948 83ZM974.39 108.51A26.4 26.4 0 1 1 988.01 108.51A15.35 15.35 0 1 0 974.39 108.51Z'/%3E%3C/svg%3E");
      --ld-halka-renk:#1C9CBE; --ld-goz-ici:#FFFFFF;
      --ld-cer-koyu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath fill='%232E6FD9' d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85' fill='%23F1940A'/%3E%3C/svg%3E");
      --ld-cer-mono:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85'/%3E%3C/svg%3E");
    }
    html.dark{
      --ld-goz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath fill='%232E6FD9' d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Cpath fill='%235DC8E0' fill-rule='evenodd' d='M926.6 83A54.6 54.6 0 1 1 1035.8 83A54.6 54.6 0 1 1 926.6 83ZM948 83A33.2 33.2 0 1 0 1014.4 83A33.2 33.2 0 1 0 948 83ZM974.39 108.51A26.4 26.4 0 1 1 988.01 108.51A15.35 15.35 0 1 0 974.39 108.51Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85' fill='%23F1940A'/%3E%3C/svg%3E");
      --ld-cer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='866.2 -32 230 230'%3E%3Cpath fill='%232E6FD9' d='M981.2 .3A82.7 82.7 0 0 1 1062.12 65.94A22.9 22.9 0 0 0 1062.12 100.06A82.7 82.7 0 0 1 981.2 165.7L981.2 144.7A61.7 61.7 0 0 0 981.2 21.3L981.2 .3Z'/%3E%3Ccircle cx='1077.4' cy='83' r='15.85' fill='%23F1940A'/%3E%3C/svg%3E");
      --ld-halka-renk:#5DC8E0; --ld-goz-ici:#082033;
    }
    @keyframes ld-don{ to{ transform:rotate(360deg); } }
    @keyframes ld-nabiz{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3.2); opacity:0; } }

    /* ── 13 · 22 · 08 · 07 · ok → nokta çekirdeği ── */
    .hm-linkrow > i, .foot-more i, .sbh-kutu-ok, .t50-mega3 .m3-go, .m3-tab .m3-arr, .hm-tcard-arr{ position:relative; }
    .hm-linkrow > i::before, .foot-more i::before, .sbh-kutu-ok::before, .t50-mega3 .m3-go::before, .m3-tab .m3-arr::before, .hm-tcard-arr::before{
      display:inline-block; transition:opacity .18s ease, transform .26s ease; }
    .hm-linkrow > i::after, .foot-more i::after, .sbh-kutu-ok::after, .t50-mega3 .m3-go::after, .m3-tab .m3-arr::after, .hm-tcard-arr::after{
      content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
      background:var(--cta); transform:scale(0); pointer-events:none;
      transition:transform .32s cubic-bezier(.34,1.56,.64,1) .06s; }
    /* 13 · link satırları (teaser + rehber · _common) */
    body .hm-linkrow:hover > i, body .hm-linkrow:focus-visible > i{ transform:none; }
    .hm-linkrow:hover > i::before, .hm-linkrow:focus-visible > i::before{ opacity:0; transform:translateX(7px) scale(.4); }
    .hm-linkrow:hover > i::after, .hm-linkrow:focus-visible > i::after{ transform:scale(1); }
    /* 22 · footer "Tüm Rehber Yazıları" */
    .foot-more:hover i, .foot-more:focus-visible i{ transform:none; }
    .foot-more:hover i::before, .foot-more:focus-visible i::before{ opacity:0; transform:translateX(7px) scale(.4); }
    .foot-more:hover i::after, .foot-more:focus-visible i::after{ transform:scale(1); }
    /* 13b · teaser kart başlık oku (16.09.2026 14:05) */
    body .hm-tcard:hover .hm-tcard-arr{ transform:none; }
    .hm-tcard:hover .hm-tcard-arr::before{ opacity:0; transform:translateX(7px) scale(.4); }
    .hm-tcard:hover .hm-tcard-arr::after{ transform:scale(1); }

    /* ── 09b · teaser "Hemen Başvur" (16.09.2026 14:05 · karar: "buraya da bir logo efekti bul") ──
       09'un dili: şimşek logonun GÖZÜNE oturur, kart üstüne gelince ay + nokta dönerek sarar.
       Turuncu düğmede tek renk kahve (mask) — renkli nokta düğmede görünmez. Çerçeve 48px = 23px göz × 230/109,2.
       Dokunmatikte üstüne gelme yok → çerçeve baştan görünür. */
    body .hm-tcard-cta{ gap:24px; padding-left:18px; }
    body .hm-tcard-cta i{ position:relative; flex:0 0 auto; width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
      background:var(--cta-ink); color:var(--cta); font-size:11px; }
    .hm-tcard-cta i::after{ content:''; position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px;
      background:var(--cta-ink); -webkit-mask:var(--ld-cer-mono) center/contain no-repeat; mask:var(--ld-cer-mono) center/contain no-repeat;
      opacity:0; transform:rotate(-140deg); pointer-events:none;
      transition:transform .7s cubic-bezier(.34,1.3,.64,1), opacity .25s ease; }
    .hm-tcard:hover .hm-tcard-cta i::after, .hm-tcard-cta:focus-visible i::after{ opacity:1; transform:none; }
    @media (hover:none){ .hm-tcard-cta i::after{ opacity:1; transform:none; } }

    /* ══════════ GÖZ ÇERÇEVESİ AİLESİ · 28–35 (16.09.2026 · karar seçimi) ══════════
       09'un dili: simge logonun GÖZÜ olur (daire), yarım ay + nokta TEK görselde dönerek sarar.
       Çerçeve kutusu = göz çapı × 230/109,2 = 2,106 → her yöne %55,3 taşar (inset:-55.3%).
       Sağa taştığı için yanındaki metinle aradaki boşluk en az göz yarıçapı kadar açıldı.
       İki kip: ÜSTÜNE GELİNCE (geçiş) · GÖRÜNÜNCE BİR KEZ (animasyon, döngü yok). */
    /* --ld-aci · 18.09.2026 · yay HER ZAMAN İLERİ döner: giriş −140° → 0°, çıkış 0° → +220°.
       +220° ile −140° aynı görünür (fark 360°) → çıkış açısı bir sonraki turun BAŞLANGICI olur,
       hiçbir yerde başa sarma/geri dönme olmaz. Değeri betik büyüterek verir (layouts/app). */
    .sbh-tik, .sbcm-done-ic, .m3-tab > i:first-child, .m3-ic, .foot-contact li i, .sba-oge-ic, .hm-app-ikon, .ld-goz-bas, .ld-sayfa-goz, .yh-kart-ic{ position:relative; }
    .sbh-tik::after, .sbcm-done-ic::after, .m3-tab > i:first-child::after, .m3-ic::after, .foot-contact li i::after, .sba-oge-ic::after,
    .hm-app-ikon::after, .ld-goz-bas::after, .ld-sayfa-goz::after, .yh-kart-ic::after{
      content:''; position:absolute; inset:-55.3%; background:var(--ld-cer) center/contain no-repeat; pointer-events:none;
      opacity:0; transform:rotate(var(--ld-aci, -140deg));
      transition:transform 0s linear .95s, opacity .55s ease .4s; }

    /* ── AÇILIŞ · dönerek sarar, üstünde durulduğu / odaklanıldığı / aktif olduğu sürece KALIR ──
       .ld-ac sınıfını layouts/app içindeki küçük betik takar; :hover seçicileri betiksiz de
       çalışsın diye yedekte duruyor (ikisi de aynı sonucu verir). */
    .ld-ac::after,
    body .m3-tab > i.ld-ac::after,   /* 19.09.2026 · ray sekmeleri: acilis artik .on degil betigin .ld-ac'i
                                        (.on ile yay fare cekilince YERINDE soluyordu · olculdu 4/5 sekme birden acik) */
    .t50-mega3 .m3-item:hover .m3-ic::after, .t50-mega3 .m3-item:focus-visible .m3-ic::after,
    .foot-contact li:hover i::after, .foot-contact li:focus-within i::after,
    .sba-oge:hover .sba-oge-ic::after, .sba-oge:focus-visible .sba-oge-ic::after,
    .hm-app-liste li:hover .hm-app-ikon::after,
    .yh-kart:hover .yh-kart-ic::after, .yh-kart:focus-visible .yh-kart-ic::after{
      opacity:1; transform:rotate(var(--ld-aci, 0deg)); transition:transform .7s cubic-bezier(.34,1.3,.64,1), opacity .22s ease; }

    /* ── ÇIKIŞ · yay AYNI YÖNE dönmeye devam eder (+220°) ve dönerken süzülür ──
       Yerinde durup sönmüyor, geri de sarmıyor: girdiği taraftan girip öbür taraftan çıkıyor.
       Sönme 0,14 sn sonra başlar, 0,55 sn sürer → gözden kaybolduğunda dönüş hâlâ sürüyor,
       kalan yol görünmeden tamamlanır ve bir sonraki turun başlangıç açısına oturur. */
    .ld-son::after{ opacity:0; transform:rotate(var(--ld-aci, 220deg));
      transition:transform 1.1s cubic-bezier(.36,0,.58,1), opacity .55s ease .14s; }
    /* ray sekmesi: taban seçici `.m3-tab > i:first-child::after` (0,2,1) olduğu için çıkış da aynı ağırlıkta yazılır */
    body .m3-tab > i.ld-son::after{ opacity:0; transform:rotate(var(--ld-aci, 220deg));
      transition:transform 1.1s cubic-bezier(.36,0,.58,1), opacity .55s ease .14s; }
    /* kare simgeler (mega menü · footer · arama) yayla birlikte eski hâline döner */
    body .m3-ic.ld-son, body .foot-contact li i.ld-son, body .sba-oge-ic.ld-son{ transition-delay:.15s; }

    /* 28 · gönderildi ekranı (hero + "Biz sizi arayalım") · görününce bir kez */
    body .sbh-tik{ display:grid; place-items:center; width:58px; height:58px; margin:4px 0 18px 3px; border-radius:50%;
      background:var(--ld-halka-renk); color:var(--ld-goz-ici); font-size:24px; }
    /* ay + nokta sağa taşar → grup optik olarak sağda kalıyordu: göz 14px sola · alt boşluk çerçeve başlığa değmesin diye 26px */
    body .sbcm-done-ic{ width:64px; height:64px; margin:26px auto 26px; transform:translateX(-14px); background:var(--ld-halka-renk); color:var(--ld-goz-ici); font-size:26px; }
    body .sbcm-done-ic i::before{ content:"\f00c"; }   /* daire içinde daireli tik olmasın → düz tik glifi */
    .sbh-tik::after, .sbcm-done-ic::after{ animation:ld-cerceve .85s cubic-bezier(.34,1.3,.64,1) .25s both; }

    /* 33 · "Biz sizi arayalım" başlığı (markup: partials/call-modal · .ld-goz-bas) · pencere açılınca bir kez */
    body .sbcm h2#sbcm-title{ display:flex; align-items:center; gap:30px; margin:1.25rem 0 1.1rem; }   /* çerçeve üstteki etikete ve alttaki açıklamaya değiyordu */
    .ld-goz-bas{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
      background:var(--ld-halka-renk); color:var(--ld-goz-ici); font-size:16px; }
    .ld-goz-bas::after{ animation:ld-cerceve .85s cubic-bezier(.34,1.3,.64,1) .3s both; }

    /* 29 · mega menü kategori rayı: seçili kategorinin simgesi göz olur */
    /* 34px göz + 26px boşluk kategori adını 24px daralttı ("Deniz & Evcil Hayvan" 146px ister, 113px kaldı · 22:18 ölçüldü)
       → 28px göz + 20px boşluk (çerçeve sağa 15,5px taşar) */
    body .m3-tab{ gap:20px; }   /* 17px'te nokta yazıya 1,5px kalıyordu (22:20 ölçüldü) */
    /* 19.09.2026 · karar: "mobil reklam sectionundaki gibi olsun hepsi" → simge HER ZAMAN yuvarlak (göz),
       değişen yalnız yay + nokta. Nötr zemin aktif sekmeyi gizlemez: aktif olan marka mavisine döner. */
    body .m3-tab > i:first-child{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:14px;
      background:color-mix(in srgb, var(--sl-ink) 10%, transparent);
      transition:background-color .25s ease, color .25s ease; }
    body .m3-tab.on > i:first-child{ background:var(--ld-halka-renk); color:var(--ld-goz-ici); }

    /* 30 · mega menü ürünleri: kare simge üstüne gelince yuvarlanır, göz olur */
    body .t50-mega3 .m3-item{ gap:34px; }
    body .m3-ic{ transition:border-radius .3s ease, background-color .25s ease; }
    body .m3-ic i{ transition:color .25s ease; }
    body .t50-mega3 .m3-item:hover .m3-ic, body .t50-mega3 .m3-item:focus-visible .m3-ic{ border-radius:50%; background:var(--ld-halka-renk); }
    body .t50-mega3 .m3-item:hover .m3-ic i, body .t50-mega3 .m3-item:focus-visible .m3-ic i{ color:var(--ld-goz-ici); }

    /* 31 · footer iletişim: satırın üstüne gelince simge göz olur */
    body .foot-contact li{ gap:30px; }
    body .foot-contact li i{ transition:border-radius .3s ease, background-color .25s ease, color .25s ease; }
    body .foot-contact li:hover i, body .foot-contact li:focus-within i{ border-radius:50%; background:var(--ld-halka-renk); color:var(--ld-goz-ici); }

    /* 32 · arama sonuçları: üstüne gelinen / klavyeyle odaklanan sonucun simgesi göz olur */
    body .sba-oge{ gap:30px; }
    body .sba-oge-ic{ transition:border-radius .3s ease, background-color .25s ease; }
    body .sba-oge-ic i{ transition:color .25s ease; }
    body .sba-oge:hover .sba-oge-ic, body .sba-oge:focus-visible .sba-oge-ic{ border-radius:50%; background:var(--ld-halka-renk); }
    body .sba-oge:hover .sba-oge-ic i, body .sba-oge:focus-visible .sba-oge-ic i{ color:var(--ld-goz-ici); }

    /* 34 · Sigortanız cebinizde · 18.09.2026 · karar: "normalde normal olsun; üstüne gelince dönerek
       açsın, sırayla hızlı geçilse de turunu tamamlayıp yavaşça kaybolsun; hover/aktifken hep kalsın."
       Önceki hâl: bölüm ekrana girince sırayla açılıyor ve KALICI duruyordu. */
    /* göz maddenin yüksekliğine uzayınca çerçeveler alt alta birbirine değiyordu (22:14 ölçüldü) → 46px sabit, maddeler arası 28px:
       komşu göz merkezleri ≥ 80px, ayın yüksekliği 46 × 165,4/109,2 = 70px → aralarında ~10px boşluk kalır */
    body .hm-app-liste{ gap:28px; }
    body .hm-app-liste li{ gap:36px; align-items:center; }
    /* ⚠️ AĞIRLIK: _uygulama'daki `html.dark .hm-app-ikon` (0,2,1) bu dosyadan SONRA basılıyor.
       Göz görünümü onu geçebilsin diye `html body …` ile yazıldı (0,2,2); taban kural ise
       yalnız `body …` (0,1,1) — yoksa .ld-son'un beklemesi koyu temada eziliyordu (ölçüldü). */
    /* 18.09.2026 01:46 · karar: "en başta hepsi zaten yuvarlak içinde yer alır" → simge HER ZAMAN
       göz (yuvarlak, marka mavisi). Üstüne gelince yalnız ay + nokta gelir, simge değişmez. */
    html body .hm-app-ikon{ width:46px; height:46px; align-self:center;
      border-radius:50%; box-shadow:none; background:var(--ld-halka-renk); color:var(--ld-goz-ici); }
    @media (hover:none){
      /* dokunmatikte üstüne gelme yok → bölüm görününce çerçeveler sırayla bir kez açılır ve kalır */
      .hm-app-liste.in li .hm-app-ikon::after{ animation:ld-cerceve .85s cubic-bezier(.34,1.3,.64,1) both; }
      .hm-app-liste.in li:nth-child(1) .hm-app-ikon::after{ animation-delay:.55s; }
      .hm-app-liste.in li:nth-child(2) .hm-app-ikon::after{ animation-delay:.85s; }
      .hm-app-liste.in li:nth-child(3) .hm-app-ikon::after{ animation-delay:1.15s; }
      .hm-app-liste.in li:nth-child(4) .hm-app-ikon::after{ animation-delay:1.45s; }
    }

    /* 35 · hizmet sayfası başlığı (markup: service/show · .ld-sayfa-goz) · sayfa açılınca bir kez
       Tema rengini izler; hero'da fotoğraf varsa (.sv-scrim) koyu palete geçer. Çerçeve %55 yukarı taştığı için
       üst boşluk 30px (sayfa yolu çubuğuna değiyordu · 22:10 ölçüldü). */
    .ld-sayfa-goz{ display:grid; place-items:center; width:52px; height:52px; margin:30px 0 26px 4px; border-radius:50%;
      background:var(--ld-halka-renk); color:var(--ld-goz-ici); font-size:21px; }
    .ld-sayfa-goz::after{ animation:ld-cerceve .9s cubic-bezier(.34,1.3,.64,1) .35s both; }
    .sgbsv-hero:has(.sv-scrim) .ld-sayfa-goz{ background:#5DC8E0; color:#082033; }
    .sgbsv-hero:has(.sv-scrim) .ld-sayfa-goz::after{ background-image:var(--ld-cer-koyu); }

    /* 08 · hero branş kutuları: ok kuyruğundan ucuna doğru erir, uçta nokta kalır */
    .sbh-kutu-ok::before{ transform-origin:100% 50%; }
    .sbh-kutu-ok::after{ left:auto; right:-3px; margin-left:0; }
    .sbh-kutu:hover .sbh-kutu-ok::before, .sbh-kutu:focus-visible .sbh-kutu-ok::before{ opacity:0; transform:scaleX(.15); }
    .sbh-kutu:hover .sbh-kutu-ok::after, .sbh-kutu:focus-visible .sbh-kutu-ok::after{ transform:scale(1); }
    /* 07 · mega menü: ürün satırında ok gelir ve noktaya döner · seçili kategoride ok yerine nokta */
    .t50-mega3 .m3-item:hover .m3-go::before{ opacity:0; transform:translateX(6px) scale(.4); transition-delay:.14s; }
    .t50-mega3 .m3-item:hover .m3-go::after{ transform:scale(1); transition-delay:.2s; }
    .m3-tab .m3-arr::after{ width:7px; height:7px; margin:-3.5px 0 0 -3.5px; }
    .m3-tab.on .m3-arr{ opacity:1; }
    .m3-tab.on .m3-arr::before{ opacity:0; transform:scale(.4); }
    .m3-tab.on .m3-arr::after{ transform:scale(1); }

    /* ── 02 · "Bizi Arayın" → numara gelirken yanında tek renk göz bir tur döner ──
       Turuncu düğmede RENKLİ logo kullanılmaz (nokta düğmeyle aynı renk, 1:1) → mask + currentColor (--cta-ink).
       Genişlik 156 → 180: numara 112 + göz 20 + boşluk 8 + iki yan pay. 1200 altında göz yok (header dar). */
    @media (min-width:1200px){
      .t50-cta--degis{ width:180px; min-width:180px; }
      .t50-cta--degis .cc-tel::before{ content:''; flex:0 0 auto; width:20px; height:20px; background:currentColor;
        -webkit-mask:var(--ld-goz-mono) center/contain no-repeat; mask:var(--ld-goz-mono) center/contain no-repeat;
        transition:transform .9s cubic-bezier(.65,0,.35,1) .1s; }
      .t50-cta--degis:hover .cc-tel::before, .t50-cta--degis:focus-visible .cc-tel::before{ transform:rotate(360deg); }
    }

    /* ── 04 · menü: turuncu çizgi uzar, ortaya toplanıp noktaya döner (açık menüde nokta kalır) ── */
    .t50-navlink::after{ left:50%; right:50%; transform:none; transition:none; }
    .t50-navlink:hover::after, .t50-navitem.open > .t50-navlink::after{ transform:none; animation:ld-cizgi-nokta .7s cubic-bezier(.65,0,.35,1) forwards; }
    @keyframes ld-cizgi-nokta{
      0%  { left:50%; right:50%; bottom:2px; height:2px; border-radius:2px; }
      40% { left:16px; right:16px; bottom:2px; height:2px; border-radius:2px; }
      72% { left:calc(50% - 3.5px); right:calc(50% - 3.5px); bottom:2px; height:2px; border-radius:2px; }
      100%{ left:calc(50% - 3.5px); right:calc(50% - 3.5px); bottom:-3px; height:7px; border-radius:50%; }
    }

    /* ── 09 · hero formu: seçilen branşın simgesi logonun GÖZÜ olur, ay + nokta dönerek sarar ──
       Çerçeve 72px = 34px göz × 230/109,2 (halka dış çapı). Ay ile nokta TEK görselde döner → boşluk sabit. */
    .sbh-form-ust .sbh-rozet{ border:0; background:transparent; padding:6px 10px 6px 6px; gap:32px; }
    body .sbh-rozet i{ position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
      background:var(--ld-halka-renk); color:var(--ld-goz-ici); font-size:14px; }
    .sbh-rozet i::after{ content:''; position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px;
      background:var(--ld-cer) center/contain no-repeat; pointer-events:none;
      animation:ld-cerceve .8s cubic-bezier(.34,1.3,.64,1) .12s both; }
    @keyframes ld-cerceve{ from{ opacity:0; transform:rotate(-140deg); } to{ opacity:1; transform:none; } }

    /* ── 11 · hero üst yazısı: kalkan yerine nabız atan nokta ── */
    body .sbh-ust i{ position:relative; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--cta); }
    .sbh-ust i::before{ content:none; }
    .sbh-ust i::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--cta); animation:ld-nabiz 1.8s ease-out infinite; }

    /* ── 12 · bölüm başlıkları: cümle sonu = logonun noktası · bölüm ekrana girince damlar ── */
    .hm-script-head::after{ content:''; display:inline-block; width:.19em; height:.19em; margin-left:.06em; border-radius:50%;
      background:var(--cta); vertical-align:baseline; }
    /* 16.09.2026 14:05 · karar: "nokta animasyonu ara ara tekrarlasın, göz yormasın" → 9 sn'de bir, 0,7 sn'lik küçük sekme */
    .hm-script-head::after{ animation:ld-sek 9s ease-in-out 5s infinite; }
    .in .hm-script-head::after, .hm-script-head.in::after{ animation:ld-damla .75s cubic-bezier(.34,1.56,.64,1) .35s both, ld-sek 9s ease-in-out 5s infinite; }
    @keyframes ld-sek{ 0%, 90%, 100%{ transform:none; } 92.5%{ transform:translateY(-.42em) scale(.9,1.1); } 95%{ transform:none; } 96.3%{ transform:scale(1.18,.84); } 97.8%{ transform:translateY(-.08em); } }
    @keyframes ld-damla{ 0%{ transform:translateY(-1.3em) scale(.4); opacity:0; } 60%{ transform:translateY(0) scale(1.25,.8); opacity:1; } 100%{ transform:none; opacity:1; } }

    /* 16 · ilerleme çubuğu noktası: güncel tasarımda ilerleme çubuğu YOK (yalnız eski ?v2 slider'ında) → uygulanmadı, yer kararı bekliyor. */

    /* ── 17 · şirket kartı: üstüne gelince köşede "baktık" noktası ── */
    body .pm-tile{ position:relative; }
    .pm-tile::after{ content:''; position:absolute; right:10px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--cta);
      transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
    .pm-tile:hover::after{ transform:scale(1); }

    /* 18 · "Oku" düğmesinde göz: 16.09.2026 13:47 karar "çirkin olmuş, kullanma" → KALDIRILDI, ok geri geldi. */

    /* ⚠️ body öneki: bölüm CSS'i (push edilen stiller) bu dosyadan SONRA basılıyor; eşit ağırlıkta onlar kazanıyordu (ölçüldü). */
    /* ── 21 · rehber görselleri yüklenirken: boş kutu yerine soluk göz halkası + tek geçişli ışık ──
       img üstte (absolute, sonra gelir) → yüklenince halkayı ve ışığı kapatır. Işık 6 tur sonra durur. */
    body .hm-feat-media{ background:var(--ld-halka-soluk) center / 92px no-repeat; }
    body .hm-erow-thumb{ background:var(--ld-halka-soluk) center / 42px no-repeat, linear-gradient(150deg,var(--brand-500),var(--brand-900)); }
    body .hm-feat-media:has(> i), body .hm-erow-thumb:has(> i){ background-image:none; }
    body .hm-erow-thumb:has(> i){ background:linear-gradient(150deg,var(--brand-500),var(--brand-900)); }
    .hm-feat-media::before, .hm-erow-thumb::before{ content:''; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.10) 50%,transparent 70%);
      transform:translateX(-100%); animation:ld-parla 1.6s linear 6; }
    @keyframes ld-parla{ to{ transform:translateX(100%); } }

    /* ── 22 · footer bağlantıları: yazı sağa kayar, önüne nokta düşer ── */
    .foot-col a:not(.foot-more){ position:relative; transition:color .16s ease, transform .28s cubic-bezier(.34,1.3,.64,1); }
    .foot-col a:not(.foot-more)::before{ content:''; position:absolute; left:-14px; top:50%; width:6px; height:6px; margin-top:-3px;
      border-radius:50%; background:var(--cta); transform:scale(0); transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
    @media (hover:hover){
      .foot-col a:not(.foot-more):hover{ transform:translateX(14px); }
      .foot-col a:not(.foot-more):hover::before{ transform:scale(1); }
    }

    /* ── 23 · yukarı çık: çevresi sayfa ilerledikçe logonun lacivert kavisi gibi dolar (markup: layouts/footer) ── */
    .ld-yukari{ position:fixed; left:clamp(14px,2vw,26px); bottom:clamp(16px,2.4vw,28px); z-index:45; width:56px; height:56px;
      border:0; border-radius:50%; padding:0; cursor:pointer; display:grid; place-items:center;
      background:var(--sl-fill); color:var(--sl-ink); box-shadow:0 10px 26px -10px rgba(0,0,0,.45);
      opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.3,.64,1); }
    .ld-yukari.gor{ opacity:1; transform:none; pointer-events:auto; }
    .ld-yukari svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
    .ld-yukari .iz{ fill:none; stroke:var(--sl-line); stroke-width:3; }
    .ld-yukari .ilr{ fill:none; stroke:#0C3380; stroke-width:3.2; stroke-linecap:round; stroke-dasharray:176; stroke-dashoffset:176; }
    html.dark .ld-yukari .ilr{ stroke:#2E6FD9; }
    .ld-yukari i{ position:relative; font-size:15px; }
    .ld-yukari i::before{ display:inline-block; transition:opacity .2s ease, transform .28s ease; }
    .ld-yukari i::after{ content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
      background:var(--cta); transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1) .06s; }
    .ld-yukari:hover i::before, .ld-yukari:focus-visible i::before{ opacity:0; transform:translateY(-8px); }
    .ld-yukari:hover i::after, .ld-yukari:focus-visible i::after{ transform:scale(1); }
    .ld-yukari:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }

    /* ── 25 · onay kutuları: boş göz halkası · işaretleyince içine turuncu nokta düşer ── */
    body .sbh-onay-kutu input, body .sbcm-opt input{ margin:0; -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
      border:2px solid var(--ld-halka-renk); background:transparent; display:grid; place-items:center; flex:0 0 auto; }
    .sbh-onay-kutu input::before, .sbcm-opt input::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--cta);
      transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
    .sbh-onay-kutu input:checked::before, .sbcm-opt input:checked::before{ transform:scale(1); }
    /* form eklentisinin :checked dolgusu (mavi zemin + tik görseli) halkayı boyuyordu (ölçüldü) */
    body .sbh-onay-kutu input:checked, body .sbcm-opt input:checked{ background:transparent !important; border-color:var(--ld-halka-renk) !important; box-shadow:none !important; }
    .sbh-onay-kutu input:focus-visible, .sbcm-opt input:focus-visible{ outline:2px solid var(--ld-halka-renk); outline-offset:2px; }

    /* ── 26 · arama sonucu yok: büyüteç yerine etrafa bakınan göz ── */
    .sba-yok > i::before{ content:''; display:inline-block; width:64px; height:64px; background:var(--ld-goz) center/contain no-repeat;
      animation:ld-don 14s linear infinite; }

    @media (prefers-reduced-motion:reduce){
      .sbh-ust i::after, .sba-yok > i::before, .hm-feat-media::before, .hm-erow-thumb::before{ animation:none; }
      .sbh-rozet i::after, .t50-navlink::after{ animation-duration:.01s !important; }
      .hm-script-head::after{ animation:none !important; }
      .sbh-tik::after, .sbcm-done-ic::after, .ld-goz-bas::after, .ld-sayfa-goz::after{ animation:none !important; opacity:1; transform:none; }
      /* çerçeve üstüne gelince yine çıkar ama dönmez: açı yok, sönme kısa */
      .hm-app-ikon::after{ animation:none !important; }
      .ld-ac::after, .ld-son::after, body .m3-tab > i.ld-ac::after, body .m3-tab > i.ld-son::after{ transition-duration:.01s !important; transition-delay:0s !important; }
    }
    
        /* ===================== SCRIPT GOLD BAŞLIK (ref: gold el-yazısı) ===================== */
    .t50-script-gold{
      margin:0; color:var(--script-gold);
      font-family:var(--font);
      font-weight:800; line-height:1.1; letter-spacing:-.01em;
      transition:color .25s ease;
    }

    /* ===================== D · RAKAMLAR + SSS (ref 04 · flat-top yuvarlak panel) ===================== */
    .t50-figs{
      position:relative; margin-top:var(--gap);
      background:var(--sl-fill); color:var(--sl-ink);
      border-radius:var(--corner); overflow:hidden;
      padding:clamp(48px,6vw,72px) 0;
      transition:background-color .25s ease,color .25s ease;
    }
    .figs-inner{ max-width:var(--container); margin:0 auto; padding:0 clamp(20px,4vw,56px); }
    .t50-figs .t50-script-gold{ text-align:center; font-size:clamp(40px,6vw,86px); }

    .figs-stats{ margin-top:clamp(32px,4vw,48px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,32px); }
    .figs-stat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
    .figs-stat > i{ font-size:clamp(34px,3.4vw,42px); color:var(--stat-ic); line-height:1; }
    .figs-val{ font-size:clamp(24px,2.8vw,34px); font-weight:800; letter-spacing:.01em; color:var(--sl-ink); }
    .figs-lbl{ font-size:15px; color:var(--sl-muted); }

    .figs-faq{ margin-top:clamp(48px,6vw,72px); }
    .figs-faq-title{ margin:0; font-size:clamp(24px,3vw,34px); font-weight:800; line-height:1.12; letter-spacing:-.01em; color:var(--sl-ink); max-width:640px; }
    .figs-faq-list{ margin-top:22px; max-width:1000px; }
    .figs-q{ border-top:1px solid var(--sl-line); }
    .figs-q:last-child{ border-bottom:1px solid var(--sl-line); }
    .figs-q-head{ width:100%; background:transparent; border:0; cursor:pointer; font-family:inherit; color:var(--sl-ink);
      display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left;
      padding:22px 4px; font-size:clamp(16px,1.4vw,19px); font-weight:600; line-height:1.35; }
    .figs-q-ic{ flex-shrink:0; font-size:16px; color:var(--stat-ic); transition:transform .25s ease; }
    .figs-q.is-open .figs-q-ic{ transform:rotate(45deg); }
    .figs-q-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
    .figs-q.is-open .figs-q-body{ grid-template-rows:1fr; }
    .figs-q-inner{ overflow:hidden; }
    .figs-q-inner p{ margin:0; padding:0 4px 24px; max-width:820px; color:var(--sl-muted); font-size:16px; line-height:1.6; }

    /* ===================== E · SOSYAL GALERİ (ref 05 · page-bg üzerinde) ===================== */
    .t50-social{ margin-top:var(--gap); padding:clamp(16px,3vw,32px) 0 0; }
    .social-head{ text-align:center; }
    .social-kicker{ margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
    .t50-social .t50-script-gold{ font-size:clamp(38px,5.4vw,78px); }
    .social-grid{ margin:clamp(28px,4vw,44px) auto 0; max-width:var(--container); padding:0 clamp(0px,2vw,24px);
      display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
    .social-card{ display:block; border-radius:var(--r-box); overflow:hidden; box-shadow:0 18px 40px -22px rgba(0,0,0,.6); }
    .social-card-media{ position:relative; display:grid; place-items:center; aspect-ratio:3/4; background:var(--g,var(--brand-800)); overflow:hidden; }
    .social-card-media i{ font-size:clamp(44px,5vw,60px); color:rgba(255,255,255,.92); transition:transform .35s ease; }
    .social-card:hover .social-card-media i{ transform:scale(1.09); }   /* hover: sadece ikon büyür (layout sabit) */


    [x-cloak]{ display:none !important; }