/* ============================================
   EBKV TV Bağış Panosu — Final CSS (Smart‑TV + Desktop)
   ============================================ */

/* -------------------------
   TEMA DEĞİŞKENLERİ (Light)
------------------------- */
:root{
  --brand:#7aa099;

  --bg1:#eef3f6;
  --bg2:#f9fbfc;

  --ink:#0f1d23;
  --muted:#6b7a80;
  --line:#dce3e8;

  --rez:#e8cc68;     /* sarı ton referansı */
  --dolu:#55a37c;    /* yeşil ton referansı */
  --bos:#ebf0f4;

  --safe-tv: 0px;    /* TV overscan güvenli alan */
  --scale: 1;        /* PC’de dış ölçek (index.php set eder) */
}

/* -------------------------
   DARK MODE (Auto)
------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    --bg1:#151a1c; --bg2:#101415;
    --ink:#e8eeee; --muted:#a5b1b6; --line:#2a2f31; --bos:#1b2224;
  }
}
/* Tema zorlaması için (html.force-dark / force-light) */
.force-dark:root{ --bg1:#151a1c; --bg2:#101415; --ink:#e8eeee; --muted:#a5b1b6; --line:#2a2f31; --bos:#1b2224; }
.force-light:root{ --bg1:#eef3f6; --bg2:#f9fbfc; --ink:#0f1d23; --muted:#6b7a80; --line:#dce3e8; --bos:#ebf0f4; }

/* -------------------------
   SAYFA TEMELLERİ
------------------------- */
*{ box-sizing: border-box; }
html, body { height:100%; }
body{
  margin:0;
  background: #f6f8fa; /* fallback */
  background: radial-gradient(120% 120% at 0% 0%, var(--bg1), var(--bg2));
  color:var(--ink);
  font:500 18px/1.45 system-ui, Segoe UI, Roboto, Arial;
}

/* === PANO ÖZELİ: ARKA PLAN BİNA GÖRSELİ (Pano sayfasında: body.pano) ===
   Görsel: /admin/assets/img/bg-building.jpg
   Not: Admin panelini etkilememesi için sadece pano class’ında aktif. */
body.pano{
  background-image:
    linear-gradient(rgba(255,255,255,0.40), rgba(255,255,255,0.40)), /* 0.55 → 0.40, fotoğraf daha görünür */
    url('/admin/assets/img/bg-building.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* background-attachment: fixed;  // Smart‑TV’de sorun çıkarsa kapalı kalsın */
}

/* TV modunda overscan payı + imleç sadece inaktivitede gizlenir (JS .hide-cursor ekler) */
body.tv{ --safe-tv: 3vw; }
body.tv.hide-cursor{ cursor:none; }

/* -------------------------
   YAYILIM — WRAP / CARD
------------------------- */
.wrap{
  /* TV: gerçek tam ekran + güvenli alan */
  max-width: none;
  margin: 0;
  padding: var(--safe-tv);
  height: 100svh;
  box-sizing: border-box;
  transform: none !important; /* TV’de scale yok */
}

/* PC: dış ölçek opsiyonel (index.php, :root --scale set eder) */
body.pc .wrap{
  max-width: 1920px;
  margin: 14px auto 18px;
  padding: 0 16px;
  height: auto;
  transform: scale(var(--scale));
  transform-origin: top center;
}
@media (max-width: 1100px){
  body.pc .wrap{ transform:none; }
}

.card{
  background: rgba(255,255,255,0.68);                /* 0.72 → 0.68 cam */
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 14px;

  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative; /* katman yönetimi için */
}

/* -------------------------
   HEADER & TABS (cam yoğunluğu optimize)
------------------------- */
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;

  background: color-mix(in oklab, white 16%, transparent); /* 18% → 16% */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 8px 10px;
}
.h-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.logo-link{ display:inline-flex; align-items:center; }
.logo{ height:42px; width:auto; object-fit:contain; display:block; }

.title{
  font-weight:900; letter-spacing:.2px;
  font-size: clamp(18px, 2.2vw, 26px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.offline{ display:none; margin-left:8px; font-weight:800; color:#b23b3b; }

.controls{ display:flex; gap:8px; align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#f0f4f6; color:#0f2022; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer;
  transition:background .2s, box-shadow .2s, transform .12s;
}
.pill:hover{ box-shadow:0 3px 10px rgba(0,0,0,.08); }
.pill:active{ transform:translateY(1px); }
.pill .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* TV’de kontroller varsayılan gizli; body.show-ctrl → görünür */
body.tv:not(.show-ctrl) .controls{ display:none; }

.tabsWrap{ position:relative; margin-bottom:4px; flex:0 0 auto; }
.tabs{
  display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto;
  padding:4px 48px 6px 4px;
  scrollbar-width:none; scroll-behavior:smooth;

  background: color-mix(in oklab, white 24%, transparent); /* 26% → 24% */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;

  mask-image: linear-gradient(90deg, transparent 0, black 24px,
                              black calc(100% - 24px), transparent 100%);
}
.tabs::-webkit-scrollbar{ display:none; }

.tab{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:#f0f4f6; color:#0f2022; border:1px solid var(--line);
  border-radius:999px; padding:7px 12px; font-weight:800; cursor:pointer; white-space:nowrap;
  transition: background .2s, box-shadow .2s, transform .12s;
}
.tab .chip{
  min-width:28px; height:22px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 8px; background:#e6eef1; color:#0f2022; border-radius:999px;
  font-weight:800; font-size:12px;
}
.tab.active{
  background: var(--brand); color:#0e1315;
  box-shadow:0 4px 14px rgba(0,0,0,.12) inset, 0 3px 8px rgba(0,0,0,.06);
}
.tab.active::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-6px;
  height:3px; border-radius:3px; background:var(--brand);
}

.navBtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:999px; border:1px solid var(--line);
  background:#f0f4f6; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.08); transition:filter .15s;
}
.navBtn:hover{ filter:brightness(.98); }
.navLeft{ left:6px; display:none; }
.navRight{ right:6px; }
.navBtn svg{ width:18px; height:18px; }

/* -------------------------
   GRID (Board)
------------------------- */
.board{
  margin-top:12px;
  flex: 1 1 auto;
  min-height: 0;
  display:grid; gap:12px; overflow:hidden;     /* 10px → 12px */
  position:relative; z-index:0;                 /* footer üstte kalsın */
}
/* Grid kolonları PHP ile inline set ediliyor (index.php). */

.cell{
  position:relative; background: rgba(255,255,255,0.78);
  border:1px solid color-mix(in oklab, var(--line) 80%, transparent);
  border-radius:12px; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; padding:6px;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  font-size: clamp(14px, 1.35vw, 20px);  /* PC taban */
}

/* DOLU – en opak + hafif halo (odak) */
.cell.dolu{
  background: rgba(255,255,255,0.86);
  border-color: color-mix(in oklab, var(--dolu) 45%, var(--line));
  box-shadow:
    0 0 0 2px rgba(85,163,124,0.18),
    0 1px 0 rgba(0,0,0,0.03) inset;
}

/* REZERVE – yalnızca sarı çerçeve, iç dolgu yok (base .cell camını koru) */
.cell.rezerve{
  background-color: inherit !important;
  background-image: none !important;
  border-color: #f0cf58; /* var(--rez) pastel */
  box-shadow:
    inset 0 0 0 2px #f0cf58,
    0 1px 0 rgba(0,0,0,0.03) inset;
  color: color-mix(in oklab, var(--ink) 18%, var(--muted));
}

/* BOŞ – daha şeffaf gri cam */
.cell.bos{
  background: rgba(240,244,246,0.55);
  color: color-mix(in oklab, var(--muted) 88%, #000);
  border-color: color-mix(in oklab, var(--line) 60%, transparent);
}

/* -------------------------
   İSİM BLOĞU + TUTAR
------------------------- */
.cell .name{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; max-width:100%; overflow:hidden;
  line-height: 1.06;
  padding: 2px 6px 22px;  /* altta tutar için yer */
  box-sizing: border-box;
}
.cell .name .hon{
  font-weight:700; font-size:.82em; letter-spacing:.2px; opacity:.95;
  line-height:1; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  color: color-mix(in oklab, var(--muted) 95%, #000);
}
.cell .name .line{
  font-weight:780; letter-spacing:.12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; line-height:1.06;
}

/* TV: başlangıç boyutu (fitName taşarsa küçültür) */
body.tv .cell { font-size: clamp(13px, 1.6vw, 24px); }
body.tv .cell .name{ font-size: clamp(15px, 1.80vw, 26px); }

.cell .amount{
  position: absolute;
  left: 6px; right: 6px; bottom: 6px;
  text-align: center;
  font-size: .9em;
  color: color-mix(in oklab, var(--muted) 88%, #000);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rezerve/Boş'ta alt boşluğu azalt */
.cell.rezerve .name,
.cell.bos .name{ padding-bottom: 6px; }

/* -------------------------
   LEYEND
------------------------- */
.legend{
  margin-top:10px; color:var(--muted);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  font-size:15px;
}
.l-dot{ width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:6px; }
.doluDot{ background:var(--dolu); }
.rezDot{
  background: transparent;             /* çerçeve uyumu */
  border: 2px solid #f0cf58;
  box-sizing: border-box;
}
.bosDot{ background: var(--bos); border:1px solid var(--line); }

/* -------------------------
   FOOTER (tıklanabilir kalır)
------------------------- */
.bp-footer{
  margin-top: 10px;
  flex: 0 0 auto;
  position: relative;
  z-index: 10; /* daima gridin üstünde */
}
.bp-foot-wrap{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  background: color-mix(in oklab, white 18%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid color-mix(in oklab, var(--line) 68%, transparent);
  opacity: .95;
}
.bp-foot-wrap a{ display:inline-flex; align-items:center; }
.bp-foot-logo{ height: 18px; width:auto; object-fit:contain; display:block; filter: saturate(1.05); }
.bp-foot-text{ user-select: text; }

body.tv .bp-foot-wrap{
  font-size: clamp(11px, 1.1vw, 13px);
  padding: 6px 8px;
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  opacity: .9;
}
body.tv .bp-foot-logo{ height: 16px; }

/* === Donate Strip (tek şerit, ince) === */
.donate-strip{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin: 6px 0 8px;
  padding: 8px 10px;                                 /* ince */
  background: color-mix(in oklab, white 18%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
  border-radius: 12px;
}

/* --- Donate Message (ince, bar tarzı, grid ile hizalı) --- */
.donate-msg{
  flex: 1;                                 /* Şeridin solunu doldursun */
  font-weight: 850;
  color: color-mix(in oklab, var(--ink) 90%, var(--muted));
  background: color-mix(in oklab, white 10%, transparent);
  padding: 6px 12px;                        /* İnce ve geniş nefes */
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--line) 65%, transparent);
  letter-spacing: .1px;
  white-space: nowrap;                      /* Desktop: tek satır */
  overflow: hidden; text-overflow: ellipsis;
}

/* TV — okunabilirlik için 2 satıra izin verelim */
body.tv .donate-msg{
  white-space: normal;                      
  line-height: 1.28;
  font-size: clamp(14px,1.4vw,18px);
  max-width: 100%;
}

/* Orta blok: IBAN/BIC/PayPal */
.donate-items{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }

.donate-item{
  display:flex; align-items:center; gap:6px;
  background: color-mix(in oklab, white 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 68%, transparent);
  padding: 4px 8px;
  border-radius: 10px;
}
.donate-item .k{ font-weight:900; letter-spacing:.1px; color: var(--ink); }

/* Piller ve linkler */
.copy-pill, .link-pill{
  appearance:none; border:1px solid color-mix(in oklab, var(--line) 68%, transparent);
  background: color-mix(in oklab, white 40%, transparent);
  color: var(--ink); border-radius: 999px; padding: 4px 10px;
  font-weight:800; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.copy-pill:hover, .link-pill:hover{ filter:brightness(0.98); }
.copy-pill:active{ transform: translateY(1px); }
.copy-icon{
  appearance:none; border:1px solid color-mix(in oklab, var(--line) 68%, transparent);
  background: color-mix(in oklab, white 40%, transparent);
  color: var(--ink); border-radius: 8px; padding: 3px 6px;
  font-weight:800; cursor:pointer;
}
.copy-icon:hover{ filter:brightness(0.98); }
.copy-icon:active{ transform: translateY(1px); }

/* TV: kopyala butonları yine gizli — mesaj görünür */
body.tv .copy-pill, body.tv .copy-icon{ display:none !important; }

/* QR daha kompakt kalsın */
.donate-qr{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding-left:10px;
  border-left:1px dashed color-mix(in oklab, var(--line) 68%, transparent);
}
.donate-qr img{
  width: 64px; height: 64px;
  object-fit:cover; border-radius:10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12); background:#fff;
}
.donate-qr .qr-caption{ font-size:12px; color: var(--muted); font-weight:800; }

body.tv .donate-strip{ padding: 10px 12px; }  /* TV'de çok az genişlesin */
body.tv .donate-item{ padding: 5px 10px; }
body.tv .donate-qr img{ width: 74px; height: 74px; }

/* =========================
   TV COMPACT (küçük dokunuş)
   ========================= */
body.tv { --safe-tv: 3.0vw; }                     /* 3.4vw -> 3.0vw: dikeyde ~1.5% alan kazan */
body.tv .header       { padding: 6px 8px; margin-bottom: 8px; }
body.tv .donate-strip { padding: 8px 10px; }
body.tv .tabs         { padding: 4px 44px 5px 4px; }

body.tv .board { gap: 10px; }                      /* 12px -> 10px: küçük ama etkili */

/* ================================
   GLASSMORPHIC DENGE (Seçenek 3)
   - Card yarı şeffaf (%72)
   - Grid hücreleri kontrollü şeffaf
   - Durumlara göre farklı opaklık
   - Arka plan görünür + yazılar okunur
   ================================ */

/* Kart (büyük pano alanı) – daha şeffaf ve canlı cam etkisi */
.card{
  background: rgba(255,255,255,0.72);                /* 0.88 → 0.72 */
  backdrop-filter: blur(8px) saturate(130%);         /* blur ve doygunluk */
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);           /* gölgeyi bir tık hafiflet */
}

/* Tüm hücreler için temel cam yüzey – hafif şeffaf */
.cell{
  background: rgba(255,255,255,0.80);                /* #fff → %80 opak */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}

/* BOŞ hücreler – bir tık daha şeffaf, gri ton korunsun */
.cell.bos{
  background: rgba(240,244,246,0.60);                /* var(--bos) ~%60 */
  color: color-mix(in oklab, var(--muted) 88%, #000);
  border-color: color-mix(in oklab, var(--line) 65%, transparent);
}

/* REZERVE – altın tonlu ancak soluk; okuma rahat */
.cell.rezerve{
  background: rgba(250,235,150,0.55);                /* rezerv alanı daha şeffaf */
  border-color: color-mix(in oklab, var(--rez) 55%, var(--line));
  color: color-mix(in oklab, var(--ink) 25%, var(--muted));
}

/* DOLU – en net, okuyucu odağı burada */
.cell.dolu{
  background: rgba(255,255,255,0.85);                /* dolu daha opak */
  border-color: color-mix(in oklab, var(--dolu) 40%, var(--line));
}

/* Metin kontrastı (TV’de netlik) */
.cell .name .hon{ color: color-mix(in oklab, var(--muted) 95%, #000); }
.cell .amount{ color: color-mix(in oklab, var(--muted) 90%, #000); }

/* Sekme çubuğu (tabs) – arka plan hafif sızsın ama okunurluk kalsın */
.tabs{
  background: color-mix(in oklab, white 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
}

/* Header şeridi – cam etkisiyle uyumlu */
.header{
  background: color-mix(in oklab, white 22%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

/* Footer – arka planı gösterecek kadar şeffaf kalsın */
.bp-foot-wrap{
  background: color-mix(in oklab, white 20%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}

/* TV’de cam yoğunluğu hafif artabilir -> istersen aç/kapa
body.tv .card{ backdrop-filter: blur(9px) saturate(135%); }
body.tv .cell{ backdrop-filter: blur(3.5px); }
*/

/* === Donate Strip (Header altı, tek şerit) === */
.donate-strip{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin: 6px 0 8px;
  padding: 10px 12px;
  background: color-mix(in oklab, white 20%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
  border-radius: 12px;
}
.donate-items{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.donate-item{
  display:flex; align-items:center; gap:6px;
  background: color-mix(in oklab, white 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  padding: 5px 8px; border-radius: 10px;
}
.donate-item .k{ font-weight:900; letter-spacing:.1px; color: var(--ink); }

/* İçerik pilleri ve kopya ikonları — PC’de görünür, TV’de gizli (JS ile de desteklendi) */
.copy-pill, .copy-icon{
  appearance:none; border:1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, white 40%, transparent);
  color: var(--ink); border-radius: 999px; padding: 5px 10px; font-weight:800;
  text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.copy-icon{ border-radius:8px; padding:4px 6px; }
.copy-pill:hover, .copy-icon:hover{ filter:brightness(0.98); }
.copy-pill:active, .copy-icon:active{ transform: translateY(1px); }
.copy-pill.ok, .copy-icon.ok{
  outline: 2px solid color-mix(in oklab, var(--dolu) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--dolu) 20%, transparent);
}

/* TV modunda kopyala butonlarını tamamen gizle (ekranda sade kalsın) */
body.tv .copy-pill, body.tv .copy-icon{ display:none !important; }

.donate-qr{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding-left:10px;
  border-left:1px dashed color-mix(in oklab, var(--line) 70%, transparent);
}
.donate-qr img{
  width: 72px; height: 72px; object-fit:cover; border-radius:10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); background:#fff;
}
.donate-qr .qr-caption{ font-size:12px; color: var(--muted); font-weight:800; }

@media (max-width: 900px){
  .donate-strip{ flex-direction:column; align-items:flex-start; }
  .donate-qr{ border-left:0; padding-left:0; }
}
body.tv .donate-strip{ padding: 12px 14px; }
body.tv .donate-item{ padding: 6px 10px; }
body.tv .donate-qr img{ width: 82px; height: 82px; }

/* === Donate Strip (tek şerit, ince) === */
.donate-strip{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin: 6px 0 8px;
  padding: 8px 10px;                                 /* ince */
  background: color-mix(in oklab, white 18%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
  border-radius: 12px;
}

/* Mesaj: artık TV'de de görünür */
.donate-msg{
  font-weight: 850;
  color: color-mix(in oklab, var(--ink) 85%, var(--muted));
  background: color-mix(in oklab, white 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 68%, transparent);
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;                     /* tek satırda tutmaya çalış */
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .1px;
}

/* Küçük ekranlarda veya dar alanlarda mesaj 2 satıra izin verebilir */
@media (max-width: 1100px){
  .donate-strip{ flex-wrap:wrap; }
  .donate-msg{
    white-space: normal;                   /* 2 satır olabilir */
    max-width: 100%;
  }
}

/* Orta blok: IBAN/BIC/PayPal */
.donate-items{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }

.donate-item{
  display:flex; align-items:center; gap:6px;
  background: color-mix(in oklab, white 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--line) 68%, transparent);
  padding: 4px 8px;
  border-radius: 10px;
}
.donate-item .k{ font-weight:900; letter-spacing:.1px; color: var(--ink); }

/* Piller ve linkler */
.copy-pill, .link-pill{
  appearance:none; border:1px solid color-mix(in oklab, var(--line) 68%, transparent);
  background: color-mix(in oklab, white 40%, transparent);
  color: var(--ink); border-radius: 999px; padding: 4px 10px;
  font-weight:800; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.copy-pill:hover, .link-pill:hover{ filter:brightness(0.98); }
.copy-pill:active{ transform: translateY(1px); }
.copy-icon{
  appearance:none; border:1px solid color-mix(in oklab, var(--line) 68%, transparent);
  background: color-mix(in oklab, white 40%, transparent);
  color: var(--ink); border-radius: 8px; padding: 3px 6px;
  font-weight:800; cursor:pointer;
}
.copy-icon:hover{ filter:brightness(0.98); }
.copy-icon:active{ transform: translateY(1px); }

/* TV: kopyala butonları yine gizli — mesaj görünür */
body.tv .copy-pill, body.tv .copy-icon{ display:none !important; }

/* QR daha kompakt kalsın */
.donate-qr{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding-left:10px;
  border-left:1px dashed color-mix(in oklab, var(--line) 68%, transparent);
}
.donate-qr img{
  width: 64px; height: 64px;
  object-fit:cover; border-radius:10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12); background:#fff;
}
.donate-qr .qr-caption{ font-size:12px; color: var(--muted); font-weight:800; }

body.tv .donate-strip{ padding: 10px 12px; }  /* TV'de çok az genişlesin */
body.tv .donate-item{ padding: 5px 10px; }
body.tv .donate-qr img{ width: 74px; height: 74px; }

/* === FINALIZER R2 — Kare hücreleri px ile kilitle, taşmayı önle === */

/* Flex içinde board'ın yüksekliği doğru hesaplansın (kritik) */
.card { display:flex; flex-direction:column; min-height:0; }
.header, .donate-strip, .tabsWrap, .legend, .bp-footer { flex:0 0 auto; }
.board { flex:1 1 auto; min-height:0; }

/* Chrome/Firefox/Edge paritesi: 'aspect-ratio'yu devre dışı bırakıyoruz;
   kare yüksekliğini JS'in hesapladığı --cell px ile sabitliyoruz. */
.cell { aspect-ratio: auto !important; }
.board { grid-auto-rows: var(--cell, 120px); }
.cell  { height:       var(--cell, 120px); }

/* Metin taşmasına karşı son güvenlik: 2 satırda kes (JS yine de küçültüyor) */
.cell .name { 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; 
  hyphens: auto;
  word-break: break-word;
}
/* Kare yüksekliğini bir tık düşür */
:root {
  --cell-min: 78px;   /* önceki 96px’ten küçük */
}

/* JS’in px değerini bastığı yerin fallback’i */
.board { grid-auto-rows: var(--cell, var(--cell-min)); }
.cell  { height:       var(--cell, var(--cell-min)); }

/* Chrome – Firefox kare uyumu */
:root {
  --cell-multiplier: 0.90;   /* %90 yükseklik */
}

.cell {
  height: calc(var(--cell) * var(--cell-multiplier)) !important;
}

/* PC + Chrome yazı boyutunu küçült */
body.pc .cell {
  font-size: clamp(12px, 1.20vw, 18px);
}

body.pc .cell .name {
  font-size: clamp(13px, 1.40vw, 20px);
}

body.pc .cell .amount {
  font-size: 0.85em;
}

/* === Hücre yazısını küçült (PC ve TV için ayrı), Chrome ≈ Firefox paritesi === */
body.pc .cell       { font-size: clamp(12px, 1.10vw, 18px); }
body.pc .cell .name { font-size: clamp(13px, 1.25vw, 19px); }
body.pc .cell .amount { font-size: 0.85em; }

body.tv .cell       { font-size: clamp(14px, 1.70vw, 26px); }
body.tv .cell .name { font-size: clamp(15px, 1.85vw, 28px); }

/* Kare yüksekliğini yüzde 90’a indir (Chrome’da fazla uzun görünüyordu) */
:root { --cell-multiplier: 0.90; }
.cell { height: calc(var(--cell) * var(--cell-multiplier)) !important; }

/* QR görselini sabitle (satır yüksekliğini etkilemesin) */
.donate-qr img.qr-img { display:block; width:74px; height:74px; object-fit:cover; border-radius:10px; }

/* ===== Hücre yüksekliğini %10 küçült (Chrome farkını kapatır) ===== */
:root {
  --cell-multiplier: 0.90;
}

.cell {
  height: calc(var(--cell) * var(--cell-multiplier)) !important;
}

/* ===== Hücre yazı boyutunu küçült (daha estetik, taşma yok) ===== */
body.pc .cell       { font-size: clamp(12px, 1.05vw, 17px); }
body.pc .cell .name { font-size: clamp(13px, 1.18vw, 18px); }
body.pc .cell .amount { font-size: 0.75em; }

body.tv .cell       { font-size: clamp(13px, 1.60vw, 25px); }
body.tv .cell .name { font-size: clamp(14px, 1.75vw, 26px); }

/* === Donate strip: 3 kolonlu deterministik düzen (Mesaj | Items | QR) === */
.donate-strip{
  display:grid;
  grid-template-columns: 1fr auto auto;   /* mesaj esner, items & qr doğal genişlikte */
  align-items:center;
  gap:12px;
}

/* Mesaj kapsülü: satır yüksekliği sabitlenir → tarayıcı farkları azalır */
.donate-msg{
  min-height: 40px;              /* aynı satır yüksekliği */
  display:flex; align-items:center;
  line-height: 1.2;              /* font metrik farklarını törpüler */
  white-space: nowrap;           /* PC’de tek satır */
  overflow: hidden; text-overflow: ellipsis;
}

/* Items (IBAN/BIC/PayPal) alanı: taşma yok, hizalı */
.donate-items{
  display:flex; flex-wrap:nowrap; gap:10px; align-items:center;
  min-width: max-content;        /* kapsüller sıkışıp alt satıra düşmesin */
}

/* QR sütunu */
.donate-qr{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.donate-qr img.qr-img{ display:block; width:74px; height:74px; object-fit:cover; border-radius:10px; }

/* Daha dar genişlikte tabloyu kır (TV/PC küçük pencere) */
@media (max-width: 1200px){
  .donate-strip{ grid-template-columns: 1fr auto; }
  .donate-qr{ grid-column: 2; }
  .donate-items{ flex-wrap:wrap; }
}

/* === Font metrik normalize === */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;   /* Chrome'un "bold sentezini" kapat */
}

/* Başlığı biraz düşürelim ve metrik farklarını azaltalım */
.title{
  font-weight: 800;              /* 900 yerine 800 → Firefox/Chrome ağırlık farkı azalır */
  letter-spacing: .1px;
  line-height: 1.15;
}

/* Kapsüllerin dikey hizası ve sabit yüksekliği */
.pill, .donate-item, .link-pill, .copy-pill, .copy-icon{
  line-height: 1.1;
  min-height: 34px;              /* her yerde aynı pil yüksekliği */
  display:inline-flex; align-items:center;
}