/* ══════════════════════════════════════════════════════════════════════════
   KENAR PANELİ — TÜM SAYFALAR İÇİN ORTAK
   ──────────────────────────────────────────────────────────────────────────
   Bu dosya ek/kenar-panel.php ve ek/kenar-panel.js ile birlikte çalışır.
   Üçü birden panelin TEK kaynağıdır; sayfalara kopyalanmaz, dahil edilir.

   KENDİ KENDİNE YETER olmak zorunda: alt sayfaların bir kısmı --R, --E gibi
   değişkenleri tanımlamıyor (kimi hiç :root yazmamış). O yüzden aşağıdaki
   her var() bir yedek değer taşır — palet varsa sitenin rengi kullanılır,
   yoksa marka değerine düşer. Böylece dosya hangi sayfaya eklenirse eklensin
   aynı görünür ve hiçbir sayfanın kendi paletini EZMEZ.
   ══════════════════════════════════════════════════════════════════════════ */

/* Panelin yazı tipleri. Aynı @font-face'i birden çok dosyada tanımlamak
   zararsızdır (tarayıcı kaynağa göre tekilleştirir); buradaki amaç, fontu
   tanımlamayan sayfalarda da panelin doğru görünmesi. */
@font-face{font-family:'Uni';src:url('../gorsel/uni-sans-ince.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face{font-family:'Mont';src:url('../gorsel/mont.woff2') format('woff2');font-weight:400;font-display:swap;}

/* Panel iç boşlukları + başlık şeridi yüksekliği. Menüyü açan iki çizgi ile
   panelin başlık satırı AYNI noktada durmalı — panel açılınca o çizgiler
   kapatma düğmesine dönüşüyor, ayrı bir X yok. Bağımsız clamp'lerle yazılsalar
   yalnızca belli bir ekran genişliğinde hizalı olurlardı; tek kaynaktan
   türetiliyorlar. (--sb* adları yeni, hiçbir sayfayla çakışmaz.) */
:root{
  --sbPadT:clamp(26px,3.4vh,44px);
  --sbPadR:clamp(30px,3.4vw,58px);
  --sbHead:46px;
}

/* Menuyu acan iki cizgi. z-index PANELDEN yuksek (.sb = 10001): panel acilinca
   onun ustunde kalir ve kapatma dugmesi olur. Ayri bir X dugmesi yok — "kapat"
   diye ikinci bir sey belirmiyor, ayni oge yerinde duruyor.
   Konum panelin ic bosluklarindan turetiliyor ki 46px'lik baslik seridinin tam
   ortasina otursun (bkz. :root'taki --sb* degiskenleri). */
.sidebar-toggle{background:none;border:none;width:36px;height:18px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;padding:0;position:fixed !important;top:calc(var(--sbPadT) + (var(--sbHead) - 18px) / 2) !important;right:calc(var(--sbPadR) + (var(--sbHead) - 36px) / 2) !important;z-index:10002 !important;margin:0 !important;}
.sidebar-toggle span{display:block;width:100%;height:4px;background:#fff;transition:background-color .3s,transform .45s var(--ES,cubic-bezier(.22,1,.36,1));transform-origin:center;}
.sidebar-toggle:hover span{background-color:var(--R,#99001C);}

/* Panel ACIKKEN uzerine gelince iki cizgi ortada bulusup capraza doner.
   18px'lik kutuda cizgi merkezleri 2px ve 16px'te; ikisini de ortaya (9px)
   tasimak icin +7 / -7, sonra 45 ve -45 derece.
   Kapaliyken bu YAPILMAZ: orada tiklamak ACAR, X gostermek yanlis bilgi olur. */
.sidebar-toggle.is-open:hover span{background-color:#fff;}
.sidebar-toggle.is-open:hover span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.sidebar-toggle.is-open:hover span:nth-child(2){transform:translateY(-7px) rotate(-45deg);}

/* ══════════════════════════════════════════════════════════════════════════
   KENAR PANELİ (sidebar) — v3
   ──────────────────────────────────────────────────────────────────────────
   Referansın asıl özelliği BOŞLUK: beş büyük başlık, altında koca bir sessizlik
   ve en altta iki küçük kontrol. v2'de üst şerit + yardımcı ızgara + dış site
   kutuları ekleyerek tam da o sessizliği doldurmuştum; hepsi kalktı.

   CBH'nin 12 sayfası var, referansın 5. Farkı ">" işaretinin GERÇEK anlamıyla
   kapatıyoruz: chevron olan satır bir sayfa değil, bir GRUPTUR; tıklanınca
   altında açılır. Böylece üst seviye 8 satırda kalıyor, hiçbir sayfa da
   kaybolmuyor.

   PERFORMANS: panel açılıp kapanırken yalnızca transform/opacity değişir.
   Grup açılışı grid-template-rows ile yapılıyor (max-height tahmini yok,
   içerik ne kadarsa o kadar açılır) ve kullanıcı tıklamasına bağlı — kare
   başına iş eklemez.
   ══════════════════════════════════════════════════════════════════════════ */

.sb-overlay{position:fixed;inset:0;z-index:10000;background:linear-gradient(to left,rgba(0,0,0,.80) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.12) 100%);opacity:0;pointer-events:none;transition:opacity .55s var(--E,cubic-bezier(.16,1,.3,1));}
.sb-overlay.open{opacity:1;pointer-events:auto;}

.sb{
  position:fixed;top:0;right:0;bottom:0;z-index:10001;
  width:min(42vw,560px);
  display:flex;flex-direction:column;
  /* Ust ve sag bosluk :root'taki degiskenlerden — menuyu acan iki cizgi de
     ayni degiskenlerden konumlaniyor, boylece her ekran boyutunda ust uste. */
  padding:var(--sbPadT) var(--sbPadR) clamp(20px,2.6vh,32px);
  background:linear-gradient(158deg,rgba(38,7,14,.80) 0%,rgba(17,4,8,.86) 48%,rgba(7,2,4,.90) 100%);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-30px 0 90px rgba(0,0,0,.6);
  transform:translateX(105%);
  transition:transform .68s var(--E,cubic-bezier(.16,1,.3,1));
  overflow:hidden;
}
/* backdrop-filter YALNIZCA açıkken — kapalıyken arkadaki her kareyi
   bulanıklaştırmanın bedelini bedavaya ödüyorduk. */
.sb.open{backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);transform:translateX(0);}
.sb::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:linear-gradient(to bottom,transparent,rgba(200,0,42,.55),transparent);pointer-events:none;z-index:3;}


/* ── Marka satırı + kapat ─────────────────────────────────────────────── */
/* Baslik seridi. min-height, menuyu acan iki cizginin dikey ortasina denk
   gelsin diye --sbHead'e esit; sag padding de o cizgilerin altina marka
   yazisinin girmemesi icin (cizgiler bu seridin sag ucunda duruyor). */
.sb-head{display:flex;align-items:center;gap:16px;flex-shrink:0;position:relative;z-index:1;min-height:var(--sbHead);padding-right:52px;}
.sb-brand{display:flex;align-items:center;gap:14px;min-width:0;}
.sb-brand img{width:30px;height:auto;flex-shrink:0;}
.sb-brand-sep{width:1px;height:24px;background:rgba(232,227,220,.20);flex-shrink:0;}
.sb-brand span{font-family:var(--M,'Mont','Arial',sans-serif);font-size:.76rem;letter-spacing:.06em;color:var(--T2,rgba(232,227,220,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── MENÜ ─────────────────────────────────────────────────────────────── */
/* Üstte duruyor, altında boşluk kalıyor — referanstaki gibi. Taşarsa kayar. */
.sb-nav{
  margin-top:clamp(30px,5vh,64px);
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  position:relative;z-index:1;
  scrollbar-width:thin;scrollbar-color:rgba(200,0,42,.45) transparent;
}
.sb-nav::-webkit-scrollbar{width:3px;}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(200,0,42,.45);}

.sb-row{
  position:relative;display:flex;align-items:center;width:100%;
  font-family:var(--F,'Uni','Arial',sans-serif);text-transform:uppercase;font-weight:700;
  font-size:clamp(1.6rem,4vh,2.7rem);line-height:1.06;letter-spacing:.005em;
  color:rgba(232,227,220,.62);
  padding:clamp(3px,.55vh,7px) 0;
  background:none;border:none;text-align:left;cursor:pointer;
  transition:color .3s var(--E,cubic-bezier(.16,1,.3,1)),transform .4s var(--E,cubic-bezier(.16,1,.3,1));
}
.sb-row:hover{color:#fff;transform:translateX(14px);}
/* Etkin sayfa bayrak beyazı — referansta krem/sarının oynadığı rol */
.sb-row.is-active{color:#fff;}

  margin-left:auto;width:.38em;height:.38em;flex-shrink:0;
  color:rgba(232,227,220,.34);
  transition:transform .45s var(--E,cubic-bezier(.16,1,.3,1)),color .3s var(--E,cubic-bezier(.16,1,.3,1));
}


/* ── ALT SATIR: referanstaki gibi iki küçük kontrol, sol ve sağ ───────── */
.sb-foot{
  margin-top:clamp(18px,2.6vh,30px);padding-top:clamp(14px,2vh,20px);
  border-top:1px solid rgba(232,227,220,.09);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-shrink:0;position:relative;z-index:1;
}
.sb-socials{display:flex;gap:14px;align-items:center;}
.sb-socials a{display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ES,cubic-bezier(.22,1,.36,1));}
.sb-socials a img{width:15px;height:15px;opacity:.45;transition:opacity .3s;}
.sb-socials a:hover{transform:translateY(-3px);}
.sb-socials a:hover img{opacity:1;}
.sb-foot-note{display:flex;align-items:center;gap:9px;font-family:var(--M,'Mont','Arial',sans-serif);font-size:.63rem;letter-spacing:.2em;color:var(--T3,rgba(232,227,220,.22));text-transform:lowercase;white-space:nowrap;}
.sb-foot-note::before{content:"";width:14px;height:1px;background:var(--RB,#C8002A);}

/* ── AÇILIŞ SIRALAMASI ────────────────────────────────────────────────── */
/* Gecikme --i değişkeninden geliyor; menüye satır eklenince CSS'e dokunmak
   gerekmiyor, HTML'de style="--i:7" yazmak yetiyor. */
.sb-head,.sb-item,.sb-foot{opacity:0;transform:translateX(38px);transition:opacity .5s var(--E,cubic-bezier(.16,1,.3,1)),transform .62s var(--E,cubic-bezier(.16,1,.3,1));}
.sb.open .sb-head,.sb.open .sb-item,.sb.open .sb-foot{opacity:1;transform:translateX(0);}
.sb.open .sb-head{transition-delay:.08s;}
.sb.open .sb-item{transition-delay:calc(.14s + var(--i,0) * .05s);}
.sb.open .sb-foot{transition-delay:.52s;}

/* ── MOBİL ────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .sb{
    width:100%;
    padding:calc(env(safe-area-inset-top,0px) + 18px) 24px calc(env(safe-area-inset-bottom,0px) + 16px);
    /* Zemin zaten opak — blur GÖRÜNMEZ ama hesaplanırdı; kapalı. */
    background:linear-gradient(170deg,rgba(22,5,10,.96) 0%,rgba(10,3,5,.98) 60%,rgba(6,2,3,.99) 100%);
    box-shadow:none;
  }
  .sb,.sb.open{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .sb::before{display:none;}
  .sb-brand img{width:27px;}
  .sb-brand span{font-size:.7rem;}
    .sb-nav{margin-top:26px;}
  .sb-row{font-size:clamp(1.45rem,3.4vh,2.1rem);}
  /* Dokunmatikte hover yok; kaydırma hissini bozmasın diye kaydırma kapalı */
  .sb-row:hover{transform:none;}
  .sb-row:active{color:#fff;}
}

/* Alçak ekranlarda başlıklar küçülsün ki alt satır da görünsün */
@media(max-height:660px){@media(max-height:660px){
  .sb-nav{margin-top:20px;}
  .sb-row{font-size:clamp(1.2rem,3vh,1.6rem);}
}

/* Zayıf cihaz kipi — sınıfı kenar-panel.js ekler. Kapatılan tek şey her karede
   yeniden hesaplanan backdrop-filter; düzen, renk ve içerik aynı kalır. */
.perf-lite .sb,.perf-lite .sb.open{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.perf-lite .sb{background:linear-gradient(158deg,rgba(30,6,11,.97) 0%,rgba(10,3,5,.99) 100%)!important;}
.perf-lite .sb *{will-change:auto!important;}