/* ═══════════ HERO · SOL AKIŞ + SAĞ MERCEK · 02.08.2026 ═══════════ */
/* Arka plan fotoğrafı KALDIRILDI (03.08.2026). Hero artık tema katmanı:
   sayfa zemini (--page-bg) → bölüm paneli (--sl-fill) → kart (--panel).
   Bütün renkler tek kaynaktan (app.blade.php token'ları) gelir; dark/light kendiliğinden doğru. */
.t50-hero.sbh{
  --sbh-ink:var(--ink);
  /* Zemin canlandı → yardımcı metinler bir tık koyulaştı.
     Ölçüm: --muted (#4E6B84) canlı mavi üstünde 4.62:1 (sınırda) → #3D5A73 ile 6.2:1. */
  --sbh-soluk:#3D5A73;
  --sbh-vurgu-ic:#005E82;   /* üst rozet · light'ta --marka 4.33:1 kalıyordu */
  --sbh-cizgi:var(--line);
  --sbh-yuzey:var(--panel);
  --sbh-yuzey-h:var(--panel-hover);
  --sbh-marka:var(--marka);
  --sbh-uyari:#B42318;            /* light: koyu kırmızı */
  --sbh-ordek:clamp(280px,30vw,500px);

  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  gap:clamp(16px,3vw,44px); align-items:center;
  /* Üst pay yüzen header'ı (üst şerit 40 + bar 64 = 134px) hesaba katar:
     içerik dikey ortalandığı için daha az pay verilirse rozet barın altına giriyordu. */
  /* 18.09.2026 · yatay pay .hm-wrap ile AYNI sol hizaya oturur (1440: 82→80 · 768: 40→42 ölçüldü):
     geniş ekranda (hero genişliği − container)/2 = kap payı + wrap-pad, dar ekranda yalnız wrap-pad. */
  padding:clamp(96px,8vw,118px) max(var(--wrap-pad), calc((100% - var(--container)) / 2)) clamp(38px,5.2vw,76px);
  place-items:center;
  /* ── ARKA PLAN · üç katman ──
     1) mesh: üç yumuşak ışık odağı (maskotun arkası · sol üst · sağ alt)
     2) ağ   : çok soluk ızgara, kenarlara doğru maskeyle söner (::before)
     3) grain: ince film dokusu — gradient bantlaşmasını da kırar (::after)
     Gradient yönü ÖNEMLİ: üstte sayfa zemini, altta bölüm rengi. Ters kurulursa
     hero bölüm rengiyle başlayıp sayfa rengiyle biter ve bir SONRAKİ bölüm yine
     bölüm rengine döndüğü için "yıkanmış" bir bant oluşur. */
  /* CANLI ZEMİN · hero kendi renk çiftini taşır. Sayfa token'ları (--page-bg / --sl-fill)
     nötr ve soluk; hero markanın capcanlı mavisini kullanır — pastel değil, doygun. */
  --sbh-bg-ust:#F2FAFF;
  --sbh-bg-alt:#A9DCF7;
  --sbh-isik1:rgba(0,186,240,.34);    /* maskotun arkası · camgöbeği */
  --sbh-isik2:rgba(0,119,163,.20);    /* sol üst · derin mavi */
  --sbh-isik3:rgba(255,163,36,.18);   /* sağ alt · sıcak kırılma */
  --sbh-ag:rgba(16,48,80,.055);
  --sbh-grain:.38;

  background:
    radial-gradient(56% 60% at 71% 44%, var(--sbh-isik1) 0%, transparent 64%),
    radial-gradient(46% 52% at  6%  4%, var(--sbh-isik2) 0%, transparent 60%),
    radial-gradient(52% 48% at 98% 98%, var(--sbh-isik3) 0%, transparent 58%),
    linear-gradient(172deg, var(--sbh-bg-ust) 0%, var(--sbh-bg-alt) 100%);
}
html.dark .t50-hero.sbh{
  --sbh-uyari:#FCA5A5;
  --sbh-soluk:var(--muted);
  --sbh-vurgu-ic:var(--marka);
  --sbh-bg-ust:#04203C;
  --sbh-bg-alt:#0B4A7C;
  --sbh-isik1:rgba(61,200,238,.30);
  --sbh-isik2:rgba(24,132,214,.36);
  --sbh-isik3:rgba(255,132,20,.14);
  --sbh-ag:rgba(160,215,250,.07);
  --sbh-grain:.30;
}

/* ── DESEN KATMANI · ince kare ızgara, kenarlarda maskeyle söner ── */
.t50-hero.sbh::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--sbh-ag) 1px, transparent 1px),
    linear-gradient(90deg, var(--sbh-ag) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(74% 66% at 48% 38%, #000 0%, transparent 76%);
          mask-image:radial-gradient(74% 66% at 48% 38%, #000 0%, transparent 76%);
}

/* Grain · soft-light ile karışır, iki temada da yüzeyi "kağıt" gibi tutar */
.t50-hero.sbh::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:var(--sbh-grain); mix-blend-mode:soft-light;
  background-size:150px 150px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.55'/></svg>");
}
/* İçerik pseudo katmanların ÜSTÜNDE kalmalı */
.sbh-sol, .sbh-sag{ position:relative; z-index:1; }

/* ── SOL ── */
.sbh-sol{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,28px);
  width:100%; max-width:560px; justify-self:start;
  position:relative; z-index:1; }   /* sahne mutlak konumlu → yazı üstte kalmalı */

.sbh-ust{ display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--sbh-vurgu-ic); }
.sbh-ust i{ font-size:12px; }

.sbh-h1{ margin:0; font-weight:800; line-height:1.14; letter-spacing:-.028em;
  font-size:clamp(30px,4.1vw,54px); color:var(--sbh-ink); text-wrap:balance; }
.sbh-h1 > span{ display:block; }
.sbh-h1 .sbh-vurgu{ display:inline-block; }
/* "biz sigortanabak'arız" · akan gradient — marka sözcüğü canlı dursun.
   Yalnız MAVİ tonları kullanılır (turuncu tek eylem düğmesine ayrılmıştır).
   Fallback: background-clip desteklenmezse düz marka mavisi kalır. */
.sbh-satir2{ color:var(--sbh-vurgu-ic); }
/* "g · ğ · y" alt uzantıları: background-clip:text kullanan öğede satır kutusu dar kalınca
   descender KIRPILIR. inline-block + alt pay + negatif margin ile düzeltilir (yükseklik değişmez). */
.sbh-vurgu{ color:var(--sbh-vurgu-ic);
  display:inline-block; padding-bottom:.14em; margin-bottom:-.14em; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* İki ayrı gradient ŞART: koyu temadaki beyaz parlama açık zeminde görünmez olur,
     açık temanın koyu mavisi de koyu zeminde kaybolur. Parlama noktası her iki
     yönde de zemine ZIT tarafa kurulur. */
  /* Açık temada parlama noktası ölçüyle seçilir. Zemin canlı maviye çekilince eşik yükseldi:
     #0891B8 → 3.09:1 (sınırda) · #07789F → 4.31:1. Uçlar daha koyu, akış hissi korunur. */
  .sbh-vurgu{
    background-image:linear-gradient(100deg,
      #00506F 0%, #006288 18%, #07789F 30%, #006288 42%, #00506F 58%, #003A53 74%, #00506F 100%);
    background-size:260% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:sbh-akis 9s linear infinite;
  }
  html.dark .sbh-vurgu{
    background-image:linear-gradient(100deg,
      #3DC8EE 0%, #A5EEFB 18%, #FFFFFF 30%, #A5EEFB 42%, #3DC8EE 58%, #1FA6D6 74%, #3DC8EE 100%);
  }
}
@keyframes sbh-akis{ from{ background-position:0% 50%; } to{ background-position:260% 50%; } }
@media (prefers-reduced-motion:reduce){
  .sbh-vurgu{ animation:none; background-position:22% 50%; }
}

.sbh-alt{ margin:0; max-width:46ch; color:var(--sbh-soluk);
  font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.68; }

/* durum geçişi · yalnız opaklık (hareket yok) */
.sbh-adim{ display:flex; flex-direction:column; gap:clamp(12px,1.4vw,17px);
  animation:sbh-gir .26s ease both; }
@keyframes sbh-gir{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .sbh-adim{ animation:none } }

.sbh-etiket{ margin:6px 0 0; font-size:11px; font-weight:800;
  letter-spacing:.16em; color:var(--sbh-soluk); }

/* ── BRANŞ KUTULARI · 2×2 · asıl eylem burası ── */
.sbh-kutular{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sbh-kutu{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:20px 22px; border-radius:18px; text-align:left; cursor:pointer;
  border:1px solid var(--sbh-cizgi); background:var(--sbh-yuzey);
  color:var(--sbh-ink); font-family:inherit;
  transition:background-color .18s ease, border-color .18s ease;
}
.sbh-kutu:hover{ background:var(--sbh-yuzey-h); border-color:var(--sbh-marka); }
.sbh-kutu:focus-visible{ outline:2px solid var(--sbh-marka); outline-offset:3px; }
/* Kutu içinde kutu YOK: ikon kendi çerçevesi olmadan, doğrudan durur */
.sbh-kutu-ikon{ display:grid; place-items:center; width:30px; color:var(--sbh-marka); font-size:22px; }
.sbh-kutu-yazi{ display:flex; flex-direction:column; gap:4px; min-width:0; }
/* Başlıklar TEK SATIR: "Tamamlayıcı Sağlık" 17px'te sığmayıp ikinci satıra kırılıyordu.
   Ölçü kutu genişliğine göre daralır; nowrap kırılmayı kesin engeller. */
.sbh-kutu-yazi b{ font-size:clamp(15px,1.16vw,17px); font-weight:700; letter-spacing:-.012em;
  line-height:1.2; white-space:nowrap; }
.sbh-kutu-yazi small{ font-size:12.5px; color:var(--sbh-soluk); line-height:1.3; }
.sbh-kutu-ok{ font-size:13px; color:var(--sbh-soluk); transition:color .18s ease; }
.sbh-kutu:hover .sbh-kutu-ok{ color:var(--sbh-marka); }

/* ── FORM ── */
.sbh-form-ust{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:2px; }
.sbh-rozet{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px;
  border-radius:999px; border:1px solid var(--sbh-marka); font-size:15px; color:var(--sbh-ink); }
.sbh-rozet i{ color:var(--sbh-marka); font-size:14px; }
.sbh-rozet b{ font-weight:700; }
.sbh-geri{ display:inline-flex; align-items:center; gap:8px; padding:9px 4px;
  border:0; background:none; color:var(--sbh-marka); font:inherit;
  font-size:17px; font-weight:700; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  transition:color .18s ease; }
.sbh-geri:hover{ color:var(--sbh-ink); }
.sbh-geri:focus-visible{ outline:2px solid var(--sbh-marka); outline-offset:3px; }
.sbh-geri--blok{ margin-top:16px; padding:13px 22px; border:1px solid var(--sbh-cizgi);
  border-radius:999px; text-decoration:none; }
.sbh-geri--blok:hover{ border-color:var(--sbh-marka); }

.sbh-alanlar{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sbh-alan--tam{ grid-column:1 / -1; }
.sbh-alan-ad em{ font-style:normal; font-weight:600; opacity:.72; letter-spacing:.04em; }
/* Tarih seçici · ortak bileşenin renklerini hero paletine bağla */
.sbh-alan-ic.sbt{ --sbt-panel:var(--panel); --sbt-line:var(--sbh-cizgi); --sbt-ink:var(--sbh-ink);
  --sbt-soluk:var(--sbh-soluk); --sbt-marka:var(--sbh-marka); --sbt-marka-ink:#04121F;
  --sbt-vurgu-zemin:color-mix(in srgb, var(--sbh-marka) 16%, transparent); }
.sbh-alan-ic .sbt-giris{ height:58px; padding:0 16px 0 46px; border-radius:15px;
  border:1px solid var(--sbh-cizgi); background:var(--page-bg); color:var(--sbh-ink);
  font-size:16px; font-weight:500;
  transition:border-color .2s ease, background-color .2s ease; }
.sbh-alan-ic .sbt-giris.bos{ color:var(--sbh-soluk); font-weight:400; opacity:.72; }
.sbh-alan-ic .sbt-giris:hover{ border-color:color-mix(in srgb, var(--sbh-marka) 55%, var(--sbh-cizgi)); }
.sbh-alan-ic .sbt-giris:focus-visible{ outline:0; border-color:var(--sbh-marka); background:var(--panel); }
.sbh-alan-ic.sbt:focus-within i{ color:var(--sbh-marka); }
/* onay kutuları · kutu içinde kutu YOK, çerçevesiz */
.sbh-onay-kutu{ display:flex; align-items:flex-start; gap:11px; cursor:pointer;
  font-size:13.5px; line-height:1.5; color:var(--sbh-soluk); }
.sbh-onay-kutu input{ flex:0 0 auto; width:18px; height:18px; margin:1px 0 0;
  accent-color:var(--sbh-marka); cursor:pointer; }
.sbh-onay-kutu:hover{ color:var(--sbh-ink); }
.sbh-alan{ display:flex; flex-direction:column; gap:7px; }
.sbh-alan-ad{ font-size:10.5px; font-weight:800; letter-spacing:.13em; color:var(--sbh-soluk);
  text-transform:uppercase; transition:color .2s ease; }
.sbh-alan-ic{ position:relative; display:block; }
.sbh-alan-ic i{ position:absolute; left:17px; top:50%; margin-top:-7px; z-index:1;
  font-size:14px; color:var(--sbh-soluk); pointer-events:none; transition:color .2s ease; }
/* ── GİRDİLER · premium ──
   Odak göstergesi renkli halka DEĞİL: kenar markaya döner + zemin bir tık kalkar
   (yüzey yükselmesi). İkon da odakta/doluyken marka rengine geçer, böylece hangi
   alanda olduğunuz kenardan bağımsız da okunur. */
.sbh-alan-ic input,
.sbh-alan-ic select{
  width:100%; height:58px; padding:0 16px 0 46px; border-radius:15px;
  border:1px solid var(--sbh-cizgi); background:var(--page-bg);
  color:var(--sbh-ink); font:inherit; font-size:16px; font-weight:500;
  letter-spacing:-.005em;
  transition:border-color .2s ease, background-color .2s ease; }
/* rakam alanları · sabit genişlikli rakam, hizası kaymasın */
.sbh-alan-ic input[type="tel"], .sbh-alan-ic input[inputmode="numeric"]{
  font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.sbh-alan-ic input::placeholder{ color:var(--sbh-soluk); opacity:.55; font-weight:400; }
.sbh-alan-ic input:hover{ border-color:color-mix(in srgb, var(--sbh-marka) 55%, var(--sbh-cizgi)); }
.sbh-alan-ic input:focus,
.sbh-alan-ic select:focus{ outline:0; border-color:var(--sbh-marka); background:var(--panel); }
/* Sigorta türü seçimi (06.10.2026) · yerli ok gizli, kendi okumuz sağda */
.sbh-alan-ic select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px; }
.sbh-alan-ic select option{ color:#0B2540; background:#fff; }
.sbh-alan-ic .sbh-sec-ok{ left:auto; right:17px; font-size:12px; }
.sbh-alan-ic input:focus ~ i,
.sbh-alan-ic input:not(:placeholder-shown) ~ i{ color:var(--sbh-marka); }
.sbh-alan-ic input:focus-visible{ outline:0; }        /* odak zaten kenar + zeminle belli */
.sbh-alan.bad .sbh-alan-ic input,
.sbh-alan.bad .sbh-alan-ic select,
.sbh-alan.bad .sbt-giris{ border-color:var(--sbh-uyari); }
.sbh-alan.bad .sbh-alan-ic i{ color:var(--sbh-uyari); }
.sbh-onay-kutu.bad span{ color:var(--sbh-uyari); }

/* Etiket · alan odaklanınca markaya döner */
.sbh-alan{ transition:none; }
.sbh-alan:focus-within .sbh-alan-ad{ color:var(--sbh-marka); }

.sbh-uyari{ display:flex; align-items:center; gap:8px; margin:0;
  font-size:13px; font-weight:600; color:var(--sbh-uyari); }
.sbh-uyari i{ font-size:12px; }

/* TEK turuncu alan = asıl eylem */
.sbh-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:4px; padding:19px 26px;
  border:0; border-radius:999px;
  background:var(--cta); color:var(--cta-ink);
  font:inherit; font-size:17px; font-weight:700; cursor:pointer;
  transition:background-color .18s ease;
}
.sbh-cta:hover{ background:var(--cta-hover); }
.sbh-cta:active{ background:var(--cta-active); }
.sbh-cta:focus-visible{ outline:3px solid var(--sbh-marka); outline-offset:3px; }
.sbh-cta i{ font-size:15px; }
.sbh-kucuk{ margin:0; font-size:12.5px; line-height:1.5; color:var(--sbh-soluk); }

/* ── ONAY ── */
.sbh-onay{ padding:28px; border-radius:18px; border:1px solid var(--sbh-marka);
  background:var(--sbh-yuzey); }
.sbh-tik{ display:block; margin-bottom:12px; color:var(--sbh-marka); font-size:30px; line-height:1; }
.sbh-onay-b{ margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--sbh-ink); }
.sbh-onay-m{ margin:0; font-size:15px; line-height:1.65; color:var(--sbh-soluk); }
.sbh-onay-m b{ color:var(--sbh-ink); font-weight:700; }

/* ══ SAĞ · ördek + mercek ══ */
/* Sahne hero'nun SAĞ YARISINI baştan aşağı kaplar: grid akışından çıkarılıp mutlak
   konumlanır, böylece hero'nun dikey padding'i onu sıkıştırmaz ve üst/alt kenara dayanır.
   Yazı katmanı (.sbh-sol) z-index ile ÜSTTE kalır. */
.sbh-sag{ position:absolute; top:0; right:0; bottom:0; width:min(58%, 940px);
  display:block; margin:0; z-index:0; pointer-events:none; }
.sbh-ordekkap{ position:relative; width:100%; height:100%; }
/* MERCEK-TAM modu · sahne hero'nun sağ yarısını BAŞTAN AŞAĞI kaplar.
   Kapsayıcı görselle aynı oranda (1:1) tutulur ve alanı dolduracak kadar büyütülür;
   taşan kısmı .sbh-sag kırpar. Bu şart: görsel contain ile kapsayıcıya TAM oturmazsa
   camın yüzde koordinatları kayardı. width:max(100cqw,100cqh) kareyi her iki yönde de doldurur. */
.sbh-sag--mercek-tam{ container-type:size; overflow:hidden; border-radius:inherit; }
.sbh-sag--mercek-tam .sbh-ordekkap{
  /* SAĞA yaslı: kare alanı doldururken taşan kısım SOLDAN kırpılır,
     böylece sahnenin sağ kenarı hero'nun sağ kenarıyla hizalı kalır. */
  position:absolute; top:50%; right:0; left:auto; transform:translateY(-50%);
  width:max(100cqw, 100cqh); aspect-ratio:1/1; height:auto; }
.sbh-sag--mercek-tam .sbh-ordek{
  object-fit:contain; object-position:center;
  /* sol kenar yazı alanına doğru erir; diğer kenarlar alanı doldurur */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 22%, #000 100%); }

/* MERCEK modu · sahne alana ortalanır, oranı görselle AYNI kalmak zorunda:
   cam yüzdeleri ancak çizim alanı = kapsayıcı olduğunda doğru oturur. */
.sbh-sag--mercek .sbh-ordekkap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(94%, 760px); aspect-ratio:1536/1024; height:auto; }
.sbh-sag--mercek .sbh-ordek{
  object-fit:contain; object-position:center;
  -webkit-mask-image:none; mask-image:none; }

/* Büyütecin camı · ölçülen daire (merkez 747,333 · r=131 · kare 1536×1024) */
.sbh-cam{
  /* konum ve çap satır içinde verilir · seriye göre değişir */
  position:absolute; aspect-ratio:1;
  border-radius:50%; display:grid; place-items:center; overflow:hidden;
  container-type:inline-size; pointer-events:none; }
.sbh-cam-ikon{
  grid-area:1/1; opacity:0; transform:scale(.72);
  font-size:42cqw; line-height:1; color:#0C3A55;
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.sbh-cam-ikon.acik{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:reduce){ .sbh-cam-ikon{ transition:none; transform:none; } }

/* ADA modu · sahne alana yerleşir ama kenarlara dayanmaz.
   Üst pay ALT paydan büyük: ada kompozisyonunun ağırlığı (kaya kütlesi) altta olduğu için
   eşit paylarla optik olarak yukarıda duruyor ve hero'nun altı boş kalıyordu.
   object-position da alta yaslanır, böylece kaya hero'nun alt kenarına yaklaşır. */
.sbh-sag--ada .sbh-ordekkap{ position:absolute; inset:17% 6% 3% 8%; width:auto; height:auto; }
.sbh-sag--ada .sbh-ordek{
  object-fit:contain; object-position:center bottom;
  -webkit-mask-image:none; mask-image:none;   /* şeffaf PNG · kenar eritmeye gerek yok */
}

/* On sahne üst üste (5 branş × gündüz/gece); yalnız opaklık değişir.
   Görünürlük İKİ koşula bağlı: doğru sahne (.acik) VE doğru tema (data-tema).
   Aynı sahnenin gece çekimi ayrı dosya — renk düzeltmesiyle değil, gerçekten
   gece çekilmiş sahne olduğu için koyu temada doğal duruyor. */
.sbh-ordek{ position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .34s ease; pointer-events:none;
  /* cover: alan hero yüksekliğinde ve dar olduğu için sahne kırpılır.
     object-position sağ kenarı kilitler; kırpılan taraf sol taraf olur. */
  /* object-position yatayda 100%: sahnenin SAĞ kenarı hero'nun sağ kenarıyla hizalanır,
     kırpma SOLDAN yapılır. Ters kurulunca sahnenin sağı kesiliyor, oysa asıl içerik orada. */
  object-fit:cover; object-position:100% 58%;
  /* Sol kenar yazı alanına doğru erir; üst/alt tam kaplar (clip-path alt eğriyi kendisi keser). */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 34%, #000 100%); }
html:not(.dark) .sbh-ordek.acik[data-tema="gunduz"]{ opacity:1; }
html.dark        .sbh-ordek.acik[data-tema="gece"]  { opacity:1; }
/* Tema çifti olmayan seriler (tek sahne · mercek kurgusu) yalnız .acik ile görünür */
.sbh-ordek.acik:not([data-tema]){ opacity:1; }
@media (prefers-reduced-motion:reduce){ .sbh-ordek{ transition:none; } }

/* GEÇİCİ · seri seçici (?sv= ile açılır) */
.sbh-secici{ position:absolute; left:clamp(22px,4.2vw,58px); bottom:18px; z-index:3;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:9px 12px; border-radius:12px;
  background:rgba(6,18,32,.82); border:1px solid rgba(120,175,220,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.sbh-secici span{ font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:#8FB0C4; margin-right:2px; }
.sbh-secici a{ font-size:12.5px; font-weight:700; text-decoration:none;
  padding:6px 12px; border-radius:8px; color:#E6F4FB;
  border:1px solid rgba(120,175,220,.35); transition:background-color .15s, border-color .15s; }
.sbh-secici a:hover{ border-color:#3DC8EE; }
.sbh-secici a.secili{ background:#3DC8EE; border-color:#3DC8EE; color:#04121F; }

/* GEÇİCİ · aday kare seçici (?aday=trafik gibi açılır) */
.sbh-aday-secici{ position:absolute; left:clamp(22px,4.2vw,58px); bottom:18px; z-index:4;
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding:10px 13px; border-radius:14px;
  background:rgba(6,18,32,.88); border:1px solid rgba(120,175,220,.4);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.sbh-aday-secici > span{ font-size:10.5px; font-weight:900; letter-spacing:.13em;
  color:#8FB0C4; margin-right:4px; }
.sbh-aday-secici button{ width:38px; height:38px; border-radius:10px; cursor:pointer;
  font-size:15px; font-weight:900; color:#E6F4FB; background:transparent;
  border:1px solid rgba(120,175,220,.4); transition:background-color .14s, color .14s; }
.sbh-aday-secici button:hover,
.sbh-aday-secici button.secili{ background:#3DC8EE; border-color:#3DC8EE; color:#04121F; }
.sbh-aday-secici b{ font-size:12px; font-weight:700; color:#8FB0C4;
  margin-left:6px; font-family:ui-monospace,Menlo,monospace; }
/* Aday kareleri normal sahnelerin üstünde; görünürlük .acik ile (bkz. .sbh-ordek kuralları) */
.sbh-aday{ z-index:2; }
@media (max-width:1023px){
  /* sahne akışa girdiğinde şerit görselin altına, sabit konumdan çıkar */
  .sbh-aday-secici{ position:static; margin:0 0 4px; }
}

/* ══ RESPONSIVE ══ */

/* ── SAHNE · 1024 ALTINDA AKIŞA GİRER (07.08.2026) ──
   İki sütun kurgusu ancak sahneye gerçekten yer kaldığında işe yarıyor. Altında:
     · mobil 390 → sahne 211px'lik şeride sıkışıyordu, kaynağın %84'ü kırpılıyor,
       MASKOT HİÇ GÖRÜNMÜYOR, metnin %59'u görselin üzerine biniyordu
     · tablet 768 → daha kötüsü: sahne 425×936'lık DİKEY bir şerit (oran 0,45),
       kaynağın yalnız %26'sı görünüyor; başlık ve alt metin %21 çakışıyor,
       branş kutuları görselin üstünde kesiliyordu
   Kök sebep ikisinde de aynı: `.sbh-sag` mutlak konumlu olduğu için kodda yazılı
   `order:-1` hiç uygulanmıyordu. Akışa alınca sahne üste geçer, çakışma sıfırlanır. */
@media (max-width:1023px){
  .t50-hero.sbh{
    grid-template-columns:1fr; gap:16px;
    /* Yüzen header (üst şerit 36 + bar 64 = 130px) sahnenin üstüne biner ve
       maskotun başını keser; üst pay onu header'ın altından başlatır. */
    padding:144px var(--wrap-pad) 40px;   /* 18.09.2026 · 22 → --wrap-pad (bölümlerle aynı hiza) */
  }
  .sbh-sol{ max-width:none; }

  .sbh-sag{
    position:relative; top:auto; right:auto; bottom:auto;
    order:-1; width:100%; height:auto;
    /* tablette 16/9 · geniş alanda 4/3 gereksiz uzuyor */
    aspect-ratio:16/9;
    border-radius:20px; overflow:hidden; }
  .sbh-sag .sbh-ordek{
    /* %62 · maskotun kaynak karedeki yatay merkezi; kadrajın ortasına gelir */
    object-position:62% 50%;
    /* sol kenar eritme masaüstünde yazı alanı içindi; burada yazı altta, gerek yok */
    -webkit-mask-image:none; mask-image:none; }
}

/* 1024–1199: iki sütun hâlâ yan yana ama kutular dar → ok gizlenir, başlık kırılabilir (yazılar sıkışıyordu) */
@media (min-width:1024px) and (max-width:1199.98px){
  .sbh-kutu{ grid-template-columns:auto 1fr; gap:12px; padding:16px; }
  .sbh-kutu-ok{ display:none; }
  .sbh-kutu-yazi b{ white-space:normal; }
}
@media (max-width:767px){
  /* 29.09.2026 · karar: "mobilde hero ile header bar arasındaki boşluğu azalt".
     Ölçüm (390px): bar 130px'te bitiyor, sahne 174'te başlıyordu → 44px boşluk. 144 → 116: boşluk 16px. */
  /* 29.09.2026 · bar 16px yukarı alındı (layouts/css/_header) → üst pay 116 → 100, bar↔sahne 16px korunur. */
  .t50-hero.sbh{ padding:100px var(--wrap-pad) 34px; }   /* 18.09.2026 · 18 = --wrap-pad (767 altı) */
  /* dar ekranda 16/9 fazla basık kalıyor; 4/3 maskotu büyütür */
  .sbh-sag{ aspect-ratio:4/3; border-radius:18px; }
  /* 15.09.2026 · karar: "mobilde bile 2 kolon olsun, çok uzun oluyor" → ikon üstte, yazı altta, ok yok */
  .sbh-kutular{ grid-template-columns:1fr 1fr; gap:10px; }
  .sbh-kutu{ grid-template-columns:1fr; align-items:start; gap:10px; padding:14px; border-radius:16px; }
  .sbh-kutu-ikon{ width:auto; justify-content:start; font-size:20px; }
  .sbh-kutu-ok{ display:none; }
  .sbh-kutu-yazi b{ font-size:14.5px; white-space:normal; }
  .sbh-kutu-yazi small{ font-size:12px; }
  .sbh-alanlar{ grid-template-columns:1fr; }
}