/* ============================================================
   KAHVEHANE PİŞTİ — Arı Royal neon paleti (lobi ile aynı jetonlar)
   Kartlar SVG ile çizilir; dışarıdan görsel kullanılmaz.
   ============================================================ */
:root{
  --k-en:62px; --k-boy:88px;          /* elimdeki kart */
  --m-en:56px; --m-boy:80px;          /* masadaki kart */
  --bg:#07071a;--panel:#0f0f28;--panel-2:#14143a;
  --cyan:#00e5ff;--pink:#e040fb;--gold:#ffd700;--gold2:#ffaa00;
  --green:#00e676;--red:#ff1744;--ivory:#f0e6ff;--ivdim:#6a6a8a;
  --cuha:#0b1b3a;--ceviz:#12123a;--ceviz-acik:#1b1b4d;
  --metin:var(--ivory);--metin-sonuk:#8f8fb4;
  --cizgi:rgba(0,229,255,.18);
  --nav-h:60px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);
  background-image:radial-gradient(100% 70% at 50% 0%,rgba(0,229,255,.10) 0%,transparent 60%),
                   radial-gradient(80% 60% at 85% 100%,rgba(224,64,251,.10) 0%,transparent 60%);
  color:var(--metin);font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;overflow-x:hidden;
}
h1,h2,h3{font-family:Orbitron,Inter,system-ui,sans-serif;letter-spacing:.04em}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}

.sar{max-width:1180px;margin:0 auto;padding-inline:14px;padding-block:14px 26px}

/* ---------------- üst şerit ---------------- */
.tepe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.marka{display:flex;align-items:center;gap:11px;min-width:0}
.marka .fis{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#fff3a8,var(--gold) 55%,#a98c00);
  box-shadow:0 0 0 1px rgba(255,215,0,.5),0 0 18px rgba(255,215,0,.35),inset 0 0 0 4px rgba(7,7,26,.25);
  display:grid;place-items:center;font:700 15px/1 Orbitron,sans-serif;color:#2a2200;
}
.marka b{font:700 19px/1.1 Orbitron,Inter,sans-serif;letter-spacing:.06em;display:block}
.marka span{font-size:12px;color:var(--metin-sonuk);letter-spacing:.6px;text-transform:uppercase}
.salon-araclar{display:flex;gap:8px;align-items:center;flex:none}
.fis-kutu{
  margin-left:auto;display:flex;align-items:center;gap:7px;text-decoration:none;
  padding:6px 13px;border-radius:99px;border:1px solid rgba(255,215,0,.38);
  background:linear-gradient(160deg,rgba(255,215,0,.10),rgba(15,15,40,.9));color:var(--metin);
  transition:border-color .2s,box-shadow .2s;flex:none;
}
.fis-kutu:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(255,215,0,.28)}
.fis-kutu .etiket{font:700 9.5px/1 Inter,sans-serif;letter-spacing:1.2px;color:var(--metin-sonuk)}
.fis-kutu b{font:700 15px/1 Orbitron,Inter,sans-serif;color:var(--gold);font-variant-numeric:tabular-nums}
.fis-kutu.giris b{font-size:12.5px}
.ikon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--cizgi);
  background:rgba(15,15,40,.7);color:var(--metin);display:grid;place-items:center;
  font-size:15px;line-height:1;flex:none;text-decoration:none;transition:border-color .2s,color .2s,opacity .2s;
}
.ikon-btn:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 14px rgba(0,229,255,.25)}
.ikon-btn.kapali{color:var(--metin-sonuk);opacity:.5}

.mini-serit{display:none;gap:6px;flex-wrap:wrap;justify-content:center;font-size:11.5px;color:var(--metin-sonuk);margin-bottom:6px}
.mini-serit span{background:rgba(15,15,40,.65);border:1px solid var(--cizgi);border-radius:99px;padding:4px 10px;white-space:nowrap}
.mini-serit b{color:var(--cyan);font-variant-numeric:tabular-nums}

/* ---------------- masa ---------------- */
.masa-kabuk{
  position:relative;border-radius:24px;padding:11px;
  background:linear-gradient(160deg,var(--ceviz-acik),var(--ceviz) 45%,#0b0b22);
  border:1px solid rgba(0,229,255,.20);
  box-shadow:0 22px 52px rgba(0,0,0,.6),0 0 40px rgba(0,229,255,.10),inset 0 1px 0 rgba(240,230,255,.07);
}
.masa{
  position:relative;border-radius:14px;height:clamp(380px,58vw,460px);
  background:radial-gradient(120% 100% at 50% 45%,#16265e 0%,#0e1a44 44%,#0a1130 76%,#06081c 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,229,255,.18),inset 0 0 60px rgba(0,229,255,.06);
  overflow:hidden;
}

/* oyuncu tabelaları */
.tabela{
  position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(178deg,#22226b,#16163f 55%,#0d0d26);
  border:1px solid rgba(0,229,255,.22);border-radius:10px;padding:9px 14px;min-width:120px;
  box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(240,230,255,.08);
  transition:box-shadow .25s,border-color .25s;
}
.tabela .ad{font:700 13px/1.1 Orbitron,Inter,sans-serif;letter-spacing:.04em}
.tabela .rol{font:600 9px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--metin-sonuk)}
.tabela .sayi{font:500 10.5px/1 Inter,sans-serif;color:var(--metin-sonuk)}
.tabela.esim{border-color:rgba(0,230,118,.45)}
.tabela.esim .rol{color:var(--green)}
.tabela.sirasi{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px rgba(0,229,255,.55)}
.tabela.ust{top:10px;left:50%;transform:translateX(-50%)}
.tabela.sol{left:10px;top:50%;transform:translateY(-50%)}
.tabela.sag{right:10px;top:50%;transform:translateY(-50%)}

/* orta alan: yığın + deste */
.orta{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:34px;
}
.yigin,.deste-yigin{position:relative;width:var(--m-en);height:var(--m-boy);flex:none}
.yigin .kart,.deste-yigin .kart{position:absolute;left:0;top:0}
.yigin-bos{
  width:var(--m-en);height:var(--m-boy);border-radius:9px;
  border:1px dashed rgba(0,229,255,.28);display:grid;place-items:center;
  font:600 9.5px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,230,255,.35);
}
.yigin-sayi,.deste-sayi{
  position:absolute;z-index:6;border-radius:99px;padding:2px 8px;
  font:700 12px/1 Orbitron,Inter,sans-serif;font-variant-numeric:tabular-nums;
}
.yigin-sayi{left:-6px;bottom:-10px;background:var(--cyan);color:#04121a;box-shadow:0 0 12px rgba(0,229,255,.55)}
.deste-sayi{right:-8px;bottom:-10px;background:var(--red);color:#fff;box-shadow:0 0 12px rgba(255,23,68,.6)}
.orta-etiket{
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);z-index:1;
  font:600 9px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,230,255,.3);
}
.masa-durum{
  position:absolute;left:12px;bottom:10px;z-index:4;max-width:46%;
  font-size:12.5px;color:var(--metin-sonuk);line-height:1.3;
}
.masa-durum b{color:var(--cyan)}
.flas{
  position:absolute;left:50%;top:32%;transform:translate(-50%,-50%) scale(.85);z-index:8;
  font:900 34px/1 Orbitron,Inter,sans-serif;letter-spacing:.06em;
  color:var(--gold);text-shadow:0 0 24px rgba(255,215,0,.75);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.flas.acik{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------------- kart ---------------- */
.kart{
  width:var(--k-en);height:var(--k-boy);border-radius:7px;position:relative;flex:none;
  background:#fbf8f0;
  box-shadow:0 1px 0 #b9ad93,0 2px 4px rgba(0,0,0,.34),0 8px 16px rgba(0,0,0,.28);
  user-select:none;overflow:hidden;
}
.kart svg{display:block;width:100%;height:100%}
.kart.masa-kart{width:var(--m-en);height:var(--m-boy)}
.kart.arka{background:linear-gradient(160deg,#23236b,#0e0e2c);box-shadow:0 0 0 1px rgba(0,229,255,.22),0 5px 11px rgba(0,0,0,.45)}
.kart.ust{box-shadow:0 0 0 2px rgba(0,229,255,.55),0 8px 18px rgba(0,0,0,.4)}
.kart.tiklanir{cursor:pointer;transition:transform .13s,box-shadow .13s}
.kart.tiklanir:hover{transform:translateY(-10px);box-shadow:0 0 0 2px var(--cyan),0 12px 22px rgba(0,229,255,.35)}
.kart.pasif{opacity:.72}

/* ---------------- elim ---------------- */
.el-kabuk{margin-top:14px}
.el{
  width:fit-content;max-width:100%;margin-inline:auto;
  display:flex;gap:8px;justify-content:center;align-items:flex-end;
  background:linear-gradient(178deg,#22226b,#16163f 32%,#0d0d26);
  border:1px solid rgba(0,229,255,.18);border-radius:12px;padding:11px 13px 14px;
  box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 30px rgba(0,229,255,.08),inset 0 1px 0 rgba(240,230,255,.08);
  min-height:calc(var(--k-boy) + 14px);
}

.dugmeler{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:13px}
.btn{
  border:0;border-radius:11px;padding:11px 19px;font-weight:700;font-size:15px;
  background:linear-gradient(135deg,var(--cyan),#0091ea 60%,#0066b3);color:#04121a;
  box-shadow:0 0 22px rgba(0,229,255,.35);transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(2px)}
.btn.sakin{background:linear-gradient(160deg,#1c1c52,#101030);box-shadow:0 0 0 1px rgba(0,229,255,.22);color:var(--metin)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------------- skor şeridi ---------------- */
.skor-serit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.skor-kart{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--cizgi);
  border-radius:16px;padding:13px 16px;
}
.skor-kart .baslik{font:700 9.5px/1 Inter,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--metin-sonuk)}
.skor-kart .deger{font:700 30px/1.1 Orbitron,Inter,sans-serif;font-variant-numeric:tabular-nums;margin-top:6px}
.skor-kart.biz{border-color:rgba(0,230,118,.35)}
.skor-kart.biz .deger{color:var(--green)}
.skor-kart.onlar .deger{color:var(--pink)}
.el-not{margin-top:8px;font-size:12px;color:var(--metin-sonuk);text-align:center}

.alt{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pano{background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--cizgi);border-radius:16px;padding:15px 17px}
.pano h2{margin:0 0 12px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.pano h2::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);transform:rotate(45deg)}
.gunluk{height:170px;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:6px;font-size:13px;color:var(--metin-sonuk)}
.gunluk div{padding:5px 9px;background:rgba(240,230,255,.045);border-radius:7px;border-left:2px solid var(--cizgi)}
.gunluk div.iyi{border-left-color:var(--green);color:#b9f5d6}
.gunluk div.onemli{border-left-color:var(--gold);color:#ffe9a3;font-weight:700}
.gunluk div.pisti{border-left-color:var(--pink);color:#f6c7ff;font-weight:700}
.skor{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.skor th{text-align:left;font:700 10.5px/1 Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--metin-sonuk);padding:0 8px 8px;border-bottom:1px solid var(--cizgi)}
.skor td{padding:8px;border-bottom:1px solid rgba(240,230,255,.07)}
.skor .num{text-align:right}

.perde{position:fixed;inset:0;background:rgba(4,4,16,.82);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:80;padding:18px}
.kutu{max-width:460px;width:100%;background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid rgba(0,229,255,.28);border-radius:20px;padding:24px 22px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 40px rgba(0,229,255,.10)}
.kutu h3{margin:0 0 6px;font:700 23px/1.2 Orbitron,Inter,sans-serif;color:var(--cyan)}
.kutu p{margin:0 0 4px;color:var(--metin-sonuk);font-size:14.5px}
.kutu .dokum{margin:14px 0 6px;text-align:left;font-size:13.5px}
.kutu .dokum div{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;border-bottom:1px solid rgba(240,230,255,.08)}
.kutu .dokum span:last-child{font-variant-numeric:tabular-nums;font-weight:700;color:var(--metin);text-align:right}

.dip{margin-top:20px;font-size:12.5px;color:var(--metin-sonuk);line-height:1.65;border-top:1px solid var(--cizgi);padding-top:14px}
.dip b{color:var(--metin)}

/* ---------------- alt gezinme (lobi ile aynı) ---------------- */
.nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(8,8,26,.96);
  border-top:1px solid rgba(0,229,255,.15);display:flex;align-items:center;justify-content:space-around;
  z-index:60;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(20px)}
.ni{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;flex:1;text-decoration:none;transition:.2s}
.ni-icon{font-size:20px;line-height:1}
.ni-lbl{font:600 8px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ivdim)}
.ni.active .ni-lbl{color:var(--cyan)}
.ni.active .ni-icon{filter:drop-shadow(0 0 6px var(--cyan));transform:scale(1.1)}
body:not(.yatay) .sar{padding-bottom:calc(var(--nav-h) + 26px)}
body.yatay .nav{display:none}

/* ---------------- dar ekran ---------------- */
@media (max-width:900px){.alt{grid-template-columns:1fr}}
@media (max-width:780px){
  :root{--k-en:54px;--k-boy:77px;--m-en:50px;--m-boy:71px}
  .masa{height:clamp(340px,72vw,430px)}
  .tabela{min-width:96px;padding:7px 10px}
  .tabela .ad{font-size:12px}
  .orta{gap:22px}
  .el{gap:5px;padding:9px 10px 12px}
}
@media (max-width:430px){
  :root{--k-en:42px;--k-boy:60px;--m-en:40px;--m-boy:57px}
  .sar{padding-inline:8px}
  .tabela{min-width:78px;padding:6px 8px}
  .tabela .ad{font-size:11px}
  .tabela .rol{display:none}
  .orta{gap:14px}
  .el{gap:3px}
  .flas{font-size:26px}
}

/* ---------------- yatay ekran ---------------- */
body.yatay{overflow:hidden}
body.yatay .sar{height:100dvh;max-width:none;display:flex;flex-direction:column;gap:4px;padding-block:6px;position:relative}
body.yatay .tepe{flex:none;margin-bottom:0;gap:8px;flex-wrap:nowrap}
body.yatay .marka b{font-size:15px}
body.yatay .marka span{display:none}
body.yatay .marka .fis{width:28px;height:28px;font-size:12px}
body.yatay .fis-kutu{padding:4px 10px}
body.yatay .fis-kutu b{font-size:13px}
body.yatay .mini-serit{display:flex;flex:none;margin-bottom:0}
body.yatay .masa-kabuk{flex:1 1 auto;min-height:0;padding:7px;border-radius:16px}
body.yatay .masa{height:100%!important;border-radius:11px}
body.yatay .el-kabuk{flex:none;margin-top:5px}
body.yatay .el{padding:7px 9px 9px;gap:5px}
body.yatay:not(.detay) .skor-serit,
body.yatay:not(.detay) .alt,
body.yatay:not(.detay) .dip{display:none}
body.yatay .dugmeler{position:absolute;top:4px;left:50%;transform:translateX(-50%);margin:0;gap:7px;z-index:20;flex-wrap:nowrap}
body.yatay .btn{padding:6px 12px;font-size:12.5px;border-radius:9px}
body.yatay.detay{overflow:auto}
body.yatay.detay .sar{height:auto}
@media (orientation:landscape) and (max-height:520px){
  body.yatay{--k-en:44px;--k-boy:63px;--m-en:42px;--m-boy:60px}
  body.yatay .tabela{min-width:84px;padding:5px 8px}
  body.yatay .flas{font-size:24px}
}

/* ============================================================
   BATAK EKLERİ — ihale paneli, koz, orta el alanı, 4'lü skor
   ============================================================ */
.skor-serit{grid-template-columns:repeat(4,1fr)}
.skor-kart .baslik{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skor-kart.benim{border-color:rgba(255,215,0,.5)}
.skor-kart.benim .deger{color:var(--gold)}
.skor-kart .alt-not{font:500 10px/1.2 Inter,sans-serif;color:var(--metin-sonuk);margin-top:2px}

/* ihale paneli */
.ihale-panel{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
  margin-top:12px;padding:10px;border-radius:14px;
  background:rgba(15,15,40,.72);border:1px solid rgba(255,215,0,.35)
}
.ihale-panel[hidden]{display:none!important}
.ihale-panel .ip-baslik{
  font:700 10.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  width:100%;text-align:center;margin-bottom:2px
}
.ip-btn{
  min-width:42px;padding:9px 11px;border:0;border-radius:10px;cursor:pointer;
  font:700 14px/1 Orbitron,Inter,sans-serif;color:#04121a;
  background:linear-gradient(160deg,var(--cyan),#0091ea);box-shadow:0 0 14px rgba(0,229,255,.25)
}
.ip-btn.pas{background:linear-gradient(160deg,#2a2a5e,#13132e);color:var(--metin);box-shadow:none;border:1px solid var(--cizgi)}
.ip-btn.koz{font-size:20px;min-width:52px;background:linear-gradient(160deg,var(--gold),var(--gold2));color:#2a1a00}
.ip-btn.koz.kirmizi{color:#8b1a12}
.ip-btn:disabled{opacity:.38;cursor:not-allowed}

/* koz ve ihale rozeti */
.koz-rozet{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  background:rgba(255,215,0,.14);border:1px solid rgba(255,215,0,.45);color:var(--gold);
  font:700 12px/1 Inter,sans-serif
}
.koz-rozet .sembol{font-size:16px}
.koz-rozet.kirmizi .sembol{color:#ff6b5e}

/* ortadaki el alanı: 4 koltuk konumu */
.el-alani{position:relative;width:min(340px,72vw);height:min(210px,44vw)}
.el-yuva{
  position:absolute;width:var(--m-en);height:var(--m-boy);border-radius:9px;
  border:1px dashed rgba(240,230,255,.14)
}
.el-yuva.benim{left:50%;bottom:0;transform:translateX(-50%)}
.el-yuva.sol{left:0;top:50%;transform:translateY(-50%)}
.el-yuva.ust{left:50%;top:0;transform:translateX(-50%)}
.el-yuva.sag{right:0;top:50%;transform:translateY(-50%)}
.el-yuva .kart{position:absolute;left:0;top:0;width:100%;height:100%}
.el-yuva.kazandi{border-color:var(--gold);box-shadow:0 0 18px rgba(255,215,0,.5)}
.el-yuva .yuva-ad{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  font:600 9px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--metin-sonuk);white-space:nowrap
}
.teklif-serit{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:11.5px;color:var(--metin-sonuk)}
.teklif-serit span{background:rgba(15,15,40,.7);border:1px solid var(--cizgi);border-radius:99px;padding:3px 9px}
.teklif-serit b{color:var(--gold)}