/* ==========================================================
   slots.css — slot katalog sayfası
   landing.css'in token'larını ve .box/.gm bileşenlerini kullanır,
   burada sadece bu sayfaya özel yerleşim ve filtre bileşenleri var.
   ========================================================== */

/* ---------- IZGARA ---------- */
.slots-page{
  display:grid;gap:13px;padding:13px;max-width:1720px;margin:0 auto;align-items:start;
  min-height:calc(100vh - 86px);
  grid-template-columns:230px minmax(0,1fr) 300px;
  grid-template-areas:
    "rail banner   feed"
    "rail jackpots feed"
    "rail search   feed"
    "rail main     feed";
}
.slots-rail{grid-area:rail;display:flex;flex-direction:column;gap:13px;min-height:0}
.slots-jackpots{grid-area:jackpots;min-height:0}
.slots-search{grid-area:search;min-height:0}
.slot-main{grid-area:main;display:flex;flex-direction:column;gap:13px;min-height:0}
.slots-feed{grid-area:feed;display:flex;flex-direction:column;gap:13px;min-height:0}

/* ---------- TURNUVA ---------- */
.trn-prize{padding:2px 14px;font-family:var(--ui);font-size:19px;font-weight:800;color:var(--gold)}
.trn-prize small{margin-left:4px;font-size:10px;font-weight:600;color:var(--t4)}
.trn-copy{margin:0;padding:0 14px 10px;font-size:10.5px;line-height:1.5;color:var(--t3)}
.trn-board{display:flex;flex-direction:column;border-top:1px solid var(--b1)}
.trn-row{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:1px solid var(--b1);font-size:10.5px}
.trn-row.top .trn-rank{color:var(--gold);font-weight:800}
.trn-rank{width:14px;flex-shrink:0;font-weight:700;color:var(--t4)}
.trn-user{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2)}
.trn-pts{flex-shrink:0;font-family:var(--ui);font-variant-numeric:tabular-nums;color:var(--t4);font-size:9.5px}
.trn-prize2{flex-shrink:0;font-family:var(--ui);font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold)}
.trn-cta{display:block;width:calc(100% - 28px);margin:10px 14px 14px;padding:9px;text-align:center;
  border-radius:8px;background:var(--gold-grad);color:var(--onAcc);font-size:10.5px;font-weight:800;letter-spacing:.08em}
.trn-cta:hover{filter:brightness(1.06)}

/* ---------- BANNER (görselin kendisi tam bir banner; metin/CTA içinde gömülü) ---------- */
.slots-banner-img{grid-area:banner;display:block;width:100%;height:280px;border-radius:var(--r);
  overflow:hidden;background:url(../assets/slots-banner.jpg) top/cover no-repeat;transition:filter .15s}
.slots-banner-img:hover{filter:brightness(1.04)}

/* ---------- JACKPOT HAVUZLARI (yan yana, sabit — slider değil) ---------- */
.jackpots-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.jackpots-row .jk{height:236px}

/* ---------- KATEGORİ FİLTRESİ ---------- */
/* ---------- ARAMA ---------- */
.search-box{padding:10px}
.sb-in{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;
  background:var(--tile);border:1px solid var(--b2)}
.sb-in:focus-within{border-color:var(--gold)}
.sb-in svg{width:14px;height:14px;color:var(--t4);flex-shrink:0}
.sb-in input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--t1);
  font-family:var(--ui);font-size:12px}
.sb-in input::placeholder{color:var(--t4);font-weight:400}
.sb-clear{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center;
  color:var(--t4);border-radius:50%}
.sb-clear:hover{color:var(--t1);background:var(--tileh)}
.sb-clear svg{width:9px;height:9px}

/* kategori şeridi: aramanın hemen altında, yatay */
.cat-row{display:flex;gap:7px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat-pill{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;border:1px solid var(--b2);border-radius:8px;
  background:var(--tile);color:var(--t2);white-space:nowrap;
  transition:border-color .14s,color .14s,background .14s}
.cat-pill svg{width:14px;height:14px;color:var(--t4);flex-shrink:0}
.cat-pill .cn{font-size:11.5px;font-weight:700}
.cat-pill .cc{font-family:var(--ui);font-size:9.5px;color:var(--t4)}
.cat-pill:hover{background:var(--tileh);color:var(--t1);border-color:var(--b3)}
.cat-pill.on{background:var(--gold-grad);border-color:var(--gold2);color:var(--onAcc)}
.cat-pill.on svg,.cat-pill.on .cc{color:var(--onAcc)}
@media (max-width:900px){
  .cat-pill{flex:0 0 auto;padding:8px 11px}
  .cat-pill .cn{font-size:10.5px}
}
body.mv .cat-pill{flex:0 0 auto;padding:8px 11px}
body.mv .cat-pill .cn{font-size:10.5px}

/* ---------- SAĞLAYICI FİLTRESİ ---------- */
.prov-list{display:flex;flex-direction:column}
.prov-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;
  text-align:left;border-top:1px solid var(--b1);color:var(--t2)}
.prov-btn:hover{background:var(--panel2)}
.prov-btn .pc{width:16px;height:16px;border-radius:4px;flex-shrink:0;border:1px solid var(--b3);
  display:grid;place-items:center;transition:background .12s,border-color .12s}
.prov-btn .pc svg{width:10px;height:10px;color:var(--onAcc);opacity:0;transition:opacity .12s}
.prov-btn.on .pc{background:var(--gold-grad);border-color:var(--gold2)}
.prov-btn.on .pc svg{opacity:1}
.prov-btn .pn{flex:1;font-size:11px;font-weight:600;color:var(--t2)}
.prov-btn.on .pn{color:var(--t1)}
.prov-btn .pcount{font-family:var(--ui);font-size:9.5px;color:var(--t4)}
.prov-clear{width:100%;padding:9px 14px;text-align:left;border-top:1px solid var(--b1);
  font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--t4)}
.prov-clear:hover{color:var(--gold)}

/* ---------- BÖLÜMLER + IZGARA ---------- */
.slot-sec{background:var(--panel);border:1px solid var(--b1);border-radius:var(--r);
  padding:13px 14px 14px;min-height:0}
.slot-sec-h{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.slot-sec-h h3{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.11em}
.slot-sec-h .ssc{font-family:var(--ui);font-size:10px;color:var(--t4)}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.slot-grid .gm{aspect-ratio:.82;min-height:150px}
.slot-more{display:block;width:100%;margin-top:11px;padding:10px;text-align:center;
  border:1px solid var(--b2);border-radius:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:var(--t3)}
.slot-more:hover{border-color:var(--gold);color:var(--gold)}
.slot-empty{padding:26px 4px;text-align:center;font-family:var(--ui);font-size:12px;color:var(--t4);line-height:1.7}

/* ---------- CANLI AKIŞ (dikey) ---------- */
.fd-list{display:flex;flex-direction:column;overflow:hidden}
.fd-list .fd{padding:9px 14px}

/* ---------- DUYARLI ---------- */
@media (max-width:1500px){
  .slots-page{grid-template-columns:214px minmax(0,1fr) 276px}
}
@media (max-width:1240px){
  .slots-page{
    grid-template-columns:minmax(0,1fr) 276px;
    grid-template-areas:
      "banner   feed"
      "jackpots feed"
      "search   feed"
      "main     feed"
      "rail     rail";
  }
  .slots-rail{flex-direction:row}
  .slots-rail .box{flex:1;min-width:0}
  .prov-list{max-height:220px;overflow-y:auto}
}
@media (max-width:900px){
  .slots-page{
    gap:11px;padding:11px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"banner" "jackpots" "search" "main" "feed" "rail";
  }
  .slots-rail{flex-direction:column}
  .slots-banner-img{height:175px;background-position:center}
  .jackpots-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .jackpots-row .jk{height:214px}
  .slot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .slot-grid .gm{min-height:110px}
}

/* ---------- MOBİL ÖNİZLEME ---------- */
body.mv .slots-page{
  gap:11px;padding:11px;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"banner" "jackpots" "search" "main" "feed" "rail";
}
body.mv .slots-rail{flex-direction:column}
body.mv .slots-banner-img{height:175px;background-position:center}
body.mv .jackpots-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
body.mv .jackpots-row .jk{height:214px}
body.mv .slot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body.mv .slot-grid .gm{min-height:110px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}