/* =========================================================
   CUKKALA V14 — Ön yüz düzenlemeleri
   Sol menü, daralmış menü (ikon şeridi), hikayeler, oyun ızgarası
   Bu dosya en son yüklenir; önceki sürümlerin kurallarını düzenler.
   ========================================================= */

/* ---------- 1) Sol menü: tam boy, sabit, sayfa sonunda kaybolmaz ---------- */
@media(min-width:861px){
  body .app{grid-template-columns:var(--sw) minmax(0,1fr)}
  body .app>.main{grid-column:2;grid-row:1}
  body .side{
    position:fixed!important;left:0;top:var(--hh);bottom:0;
    width:var(--sw);height:auto!important;z-index:40;
    padding:16px 12px 44px!important;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;
    border-right:1px solid var(--line)!important;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(#000 calc(100% - 34px),transparent);
  }
  body .side::-webkit-scrollbar{display:none}
  body .ft{margin-left:var(--sw)}
  /* Daraltılmış menü: 72px ikon şeridi */
  html.side-off body .app{grid-template-columns:72px minmax(0,1fr)!important}
  .side-off .side{width:72px!important;padding:14px 10px 44px!important}
  .side-off .ft{margin-left:72px}
}

/* ---------- 2) Menü öğeleri: daha şık ikon kutuları ---------- */
body .side a{
  min-height:46px!important;padding:0 10px!important;gap:12px;
  border-radius:14px;font-size:14px;font-weight:550!important;
  color:var(--dim);transition:background .18s,color .18s,box-shadow .18s;
}
body .side a:hover{background:rgba(var(--gr),.07);color:var(--text)}
body .side .mi{
  width:34px!important;height:34px!important;flex:0 0 34px!important;
  display:grid!important;place-items:center!important;border-radius:11px;
  background:rgba(128,128,140,.10)!important;
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--dim)!important;transition:background .18s,color .18s,transform .18s;
}
body .side .mi .ico,body .side .mi svg{width:18px!important;height:18px!important;stroke-width:1.75!important}
body .side a:hover .mi{color:var(--gold)!important;background:rgba(var(--gr),.14)!important;transform:none}
body .side a.on{
  color:var(--text);font-weight:700!important;
  background:linear-gradient(90deg,rgba(var(--gr),.20),rgba(var(--gr),.05));
  box-shadow:inset 0 0 0 1px rgba(var(--gr),.22);
}
body .side a.on:before{display:none}
body .side a.on .mi{
  background:linear-gradient(135deg,var(--gold),var(--gold2))!important;
  color:var(--ink)!important;box-shadow:0 6px 16px rgba(var(--gr),.28);
}
body .side .side-t{margin:20px 12px 6px;font-size:10.5px!important;letter-spacing:.14em;opacity:.85}
body .side a.sl .soc{width:34px;height:34px;border-radius:11px}
body .side a.sl .soc svg{width:17px;height:17px}
body .side .cnt{font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:var(--gold);color:var(--ink);padding:0 6px}

/* Daraltılmış menüde (ikon şeridi) tüm ikonlar sığar ve düzenli durur */
@media(min-width:861px){
  .side-off .side a:not(.acct){
    width:52px;min-height:46px!important;height:46px!important;margin:3px auto;
    padding:0!important;justify-content:center;border-radius:14px;
  }
  .side-off .side .mi{margin:0!important}
  .side-off .side .side-t{
    display:block!important;height:1px;margin:10px 14px!important;padding:0;
    font-size:0!important;line-height:0;overflow:hidden;background:var(--line);opacity:1;
  }
  .side-off .side a.on{box-shadow:none;background:transparent}
  .side-off .side a.on .mi{box-shadow:0 6px 16px rgba(var(--gr),.28)}
}

/* Mobil çekmece menü */
@media(max-width:860px){
  body .side{padding:14px 12px 30px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body .side a{min-height:48px!important}
}

/* ---------- 3) Hikayeler: 10 hikaye tüm genişliği doldurur ---------- */
body .sec-s{padding-top:18px}
body .st-row{
  --stg:clamp(8px,1.4vw,18px);
  display:flex;gap:var(--stg);padding:6px 2px 12px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:none;justify-content:flex-start;
}
body .st-row::-webkit-scrollbar{display:none}
body .st-row.st-few{justify-content:center}
body .st{
  flex:0 0 calc((100% - 9 * var(--stg)) / 10);
  width:auto;min-width:0;scroll-snap-align:start;
}
body .st-ring{
  width:100%;height:auto;max-width:112px;aspect-ratio:1/1;
  padding:3px;margin:0 auto 8px;
  transition:transform .2s,box-shadow .2s;
}
body .st:hover .st-ring{transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--gr),.25)}
body .st-ring img{border-width:3px}
body .st-t{font-size:12.5px;font-weight:600}
@media(max-width:860px){
  body .st{flex-basis:calc((100% - 4 * var(--stg)) / 5.5)}
}
@media(max-width:520px){
  body .st{flex-basis:calc((100% - 3 * var(--stg)) / 4.5)}
  body .st-t{font-size:11.5px}
}

/* ---------- 4) En Çok Kazandıran Oyunlar: satırda 6 oyun ---------- */
body .games{
  display:grid!important;
  grid-template-columns:repeat(var(--gcols,6),minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  gap:clamp(8px,1.2vw,16px)!important;
}
body .gcard,body .gcard:first-child{
  grid-column:auto!important;grid-row:auto!important;
  height:auto!important;aspect-ratio:3/4!important;
  border-radius:calc(var(--r) * .75)!important;
}
body .gcard img{object-fit:cover!important;background:var(--card)}
body .gmeta{padding:30px 10px 10px!important}
body .gmeta b{font-size:13px;line-height:1.25}
body .gmeta small{font-size:11px}
body .gbadge{top:8px;left:8px;padding:2px 8px;font-size:11px}
@media(max-width:1180px){body .games{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:1000px){body .games{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:760px){body .games{grid-template-columns:repeat(3,minmax(0,1fr))!important}body .gmeta{padding:22px 7px 7px!important}body .gmeta b{font-size:11.5px}body .gmeta small{display:none}}
@media(max-width:400px){body .games{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* ---------- 5) Slider: oran korunur, görsel kırpılmaz ---------- */
/* Yönetim panelindeki genişlik/yükseklik değerlerinden oran hesaplanır (--slr / --slmr). */
body .ck-slider-web{height:auto!important;aspect-ratio:var(--slr,1180 / 380)}
body .ck-slider-mobile{height:auto!important;aspect-ratio:var(--slmr,720 / 350)}

/* ---------- 6) Bento kartlar: mobil yükseklik ayarı gerçekten çalışır ---------- */
/* Panelde "Bento kart yüksekliği — mobil" değeri, mobilde kartın oranını belirler (--bento-ratio-m). */
@media(max-width:680px){body .bcard{aspect-ratio:var(--bento-ratio-m,183 / 200)!important}}