/* ==========================================================================
   HAREM — tasarım sistemi
   ==========================================================================

   Referans tasarımlardan çıkarılan dil:
     - sıcak siyah zemin (mor/mavi değil, kahverengiye çalan siyah)
     - altın → şampanya degrade, büyük serif başlıklarda
     - düşük opaklıkta altın kenarlıklarla ayrılmış paneller
     - ikon + büyük harf başlık + sağda "Tümünü Gör" biçiminde bölüm başları
     - altın degrade birincil düğme, koyu metinli
     - geniş harf aralıklı küçük büyük-harf etiketler
     - italik serif sözler

   HER ŞEY DEĞİŞKENDE

     Renk, yuvarlaklık, gölge ve yazı tipi tek yerde. Marka paleti veya
     font değişince sayfalara dokunulmuyor.

   VARLIK YUVASI SİSTEMİ (md. 92-96)

     Referanstaki hissin büyük kısmı FOTOĞRAFTAN geliyor. O görseller
     henüz yok ve internetten rastgele görsel indirilmiyor. Görsel gelecek
     her alan `.yuva` sınıflı bir kutu: ekranda hangi dosyanın hangi oranda
     gerektiğini yazıyor, dosya gelince otomatik yerine geçiyor. HTML ve
     düzen hiç değişmiyor.
   ========================================================================== */

/* ==========================================================================
   YAZI TİPLERİ
   ==========================================================================

   @font-face buraya YAZILDI, ayrı bir font.css'e değil.

   Sebep: `@import` seri çalışıyor — tarayıcı önce stil.css'i indirip
   ayrıştırıyor, SONRA font.css'i görüp indiriyor, SONRA font dosyalarını
   fark ediyor. Üç ardışık gidiş-dönüş, ve o süre boyunca metin yedek yazı
   tipiyle duruyor.

   Burada tanımlı olunca tarayıcı stil.css'i ayrıştırır ayrıştırmaz font
   dosyalarını görüyor. Sayfalardaki `<link rel="preload">` ile birlikte
   fontlar CSS ile PARALEL iniyor.

   AĞIRLIK ARALIĞI NEDEN YAZILI

     `font-weight: 500` yazsaydık ve bir yerde 600 istesek, tarayıcı
     "sahte kalın" (faux bold) üretirdi: harfleri kendi kalınlaştırır.
     Serif bir başlık yazı tipinde bu berbat görünür — harf iskeleti bozulur.

     Aralık yazınca tarayıcı "bu dosya bu aralığı kapsıyor" diye kabul edip
     sentez yapmıyor. Gövde yazı tipinde iki gerçek ağırlık olduğu için
     orada kesin değerler kullanılıyor.
   ========================================================================== */

@font-face {
  font-family: 'HaremBaslik';
  src: url('/varliklar/marka/font/HaremBaslik.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  /* swap: font inene kadar metin YEDEK yazı tipiyle görünür.
     Alternatifi `block` — o da metni 3 saniye görünmez bırakırdı. */
  font-display: swap;
}

@font-face {
  font-family: 'HaremGovde';
  src: url('/varliklar/marka/font/HaremGovde-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HaremGovde';
  src: url('/varliklar/marka/font/HaremGovde-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- zemin: sıcak siyah --- */
  --zemin: #070604;
  --zemin-2: #0b0907;
  --yuzey: #12100b;
  --yuzey-2: #181410;
  --yuzey-3: #201a13;

  /* --- altın ailesi --- */
  --altin: #c9a227;
  --altin-acik: #e8c884;
  --altin-parlak: #f5e2b8;
  --altin-koyu: #8a6f22;

  /* --- kenarlıklar: hep altının düşük opaklığı --- */
  --kenar: rgba(201, 162, 77, 0.14);
  --kenar-orta: rgba(201, 162, 77, 0.26);
  --kenar-parlak: rgba(232, 200, 132, 0.45);

  /* --- metin --- */
  --metin: #ece3d2;
  --metin-orta: #a2957e;
  /* ESKİ DEĞER: #6e6553 — ÖLÇÜLDÜ VE KALDI.
     Sahne zemini eklenirken yapılan kontrast ölçümünde alt bilgi yazısı
     ("© HAREM · Harem Coin sanal bakiyedir") 3.48:1 çıktı; WCAG AA normal
     metin eşiği 4.5:1. Bu, sahne görselinin YOL AÇTIĞI bir sorun değildi —
     düz zeminde de 3.52:1'di, yani bugüne kadar her sayfada vardı.
     Ölçüm sahne görselini araştırırken ortaya çıktığı için burada
     düzeltildi.
     #8e8471 bütün yüzeylerde eşiği geçiyor:
       zemin 5.49 · sahne 5.36 · yuzey 5.15 · yuzey-2 4.96 · yuzey-3 4.67
     Bu satır tek başına eski görünüme döndürür. */
  --metin-soluk: #8e8471;

  /* --- durum --- */
  --kirmizi: #a32b2b;
  --kirmizi-acik: #e06767;
  --yesil: #3fa76a;
  --uyari: #d9a441;

  /* --- yazı tipleri ---
     Yukarıdaki @font-face bloklarında tanımlı. Listedeki diğer isimler
     yedek: font dosyası inene kadar (ya da hiç inmezse) metin onlarla
     görünür, sayfa hiçbir zaman boş kalmaz. */
  --yazi-baslik: 'HaremBaslik', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --yazi-govde: 'HaremGovde', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* --- ölçü --- */
  --genislik: 1320px;
  --bosluk: 24px;
  --yuvarlak: 12px;
  --yuvarlak-kucuk: 8px;

  /* --- derinlik --- */
  --golge-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --golge-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --golge-3: 0 18px 50px rgba(0, 0, 0, 0.55);

  --gecis: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: 15.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Zemin ışığı — görsel değil, saf CSS. Hiç dosya indirmiyor. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 620px at 18% -8%, rgba(201, 162, 77, 0.13), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(163, 43, 43, 0.07), transparent 58%),
    linear-gradient(180deg, #0b0806 0%, var(--zemin) 45%);
  pointer-events: none;
}

a { color: var(--altin-acik); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--altin-parlak); text-decoration: none; }

img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--altin-acik); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ tipografi */

h1, h2, h3, h4 {
  font-family: var(--yazi-baslik);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 14px;
}

h1 { font-size: clamp(36px, 5.2vw, 66px); }
h2 { font-size: clamp(24px, 2.6vw, 34px); }
h3 { font-size: 17px; font-family: var(--yazi-govde); font-weight: 600; line-height: 1.35; }

p { margin: 0 0 14px; }

/* Büyük başlıklardaki altın → şampanya degrade. Referansın imzası bu. */
.altin-yazi {
  background: linear-gradient(170deg, var(--altin-parlak) 0%, var(--altin-acik) 38%, var(--altin) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Degrade metin desteklenmiyorsa metin görünmez kalmasın. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .altin-yazi { color: var(--altin-acik); -webkit-text-fill-color: currentColor; }
}

/* Başlık üstündeki küçük, geniş aralıklı etiket */
.ust-yazi {
  font-family: var(--yazi-govde);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 11px;
  font-weight: 600;
  color: var(--metin-orta);
  margin: 0 0 16px;
}

.alt-metin { color: var(--metin-orta); max-width: 56ch; font-size: 16px; }

/* Referanstaki italik serif söz */
.soz {
  font-family: var(--yazi-baslik);
  font-style: italic;
  color: var(--metin-orta);
  font-size: 16px;
  line-height: 1.5;
}

.kapsayici {
  width: 100%;
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 0 var(--bosluk);
}

/* ------------------------------------------------------------------ üst bar */

.ustbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 6, 4, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--kenar);
}

.ustbar-ic { display: flex; align-items: center; gap: 22px; height: 86px; }

.marka { display: flex; align-items: center; gap: 12px; }
.marka:hover { text-decoration: none; }

/* Gerçek logo yatay bir kilit (3:1). Yüksekliği sabitleyip genişliği
   orana bırakıyoruz — logo dosyası değişse bile düzen bozulmuyor. */
.logo { height: 54px; width: auto; display: block; }
.logo-kucuk { height: 46px; }

/* Yönetim panelinde logonun yanındaki bölüm etiketi */
.marka-etiket {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  border-left: 1px solid var(--kenar-orta);
  padding-left: 11px;
  margin-left: 2px;
}

.marka-simge { width: 38px; height: 38px; flex: 0 0 38px; display: block; }

.marka-yazi { display: flex; flex-direction: column; line-height: 1; }

.marka-ad {
  font-family: var(--yazi-baslik);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--metin);
}

.marka-alt {
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  margin-top: 5px;
}

.menu { display: flex; gap: 2px; margin: 0 auto; align-items: center; }

.menu a {
  position: relative;
  padding: 10px 16px;
  color: var(--metin-orta);
  font-size: 14.5px;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--altin), transparent);
  transform: scaleX(0);
  transition: transform var(--gecis);
}
.menu a:hover { color: var(--metin); }
.menu a:hover::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--altin-acik); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

.menu-ac {
  display: none;
  background: transparent;
  border: 1px solid var(--kenar-orta);
  color: var(--metin);
  border-radius: var(--yuvarlak-kucuk);
  padding: 9px 13px;
  font-size: 16px;
  cursor: pointer;
}

/* Sağdaki söz — referansta üst barın en sağında duruyor */
.ustbar-soz {
  border-left: 1px solid var(--kenar);
  padding-left: 22px;
  font-family: var(--yazi-baslik);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--metin-soluk);
  max-width: 190px;
}

.oturum { display: flex; align-items: center; gap: 12px; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--yuzey-2);
  border: 1px solid var(--kenar-orta);
  object-fit: cover;
}

.oturum-ad {
  font-size: 14px;
  color: var(--metin-orta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}

.oturum-ad:hover {
  color: var(--altin-acik);
  border-bottom-color: var(--kenar-parlak);
  text-decoration: none;
}

/* ------------------------------------------------------------------ düğmeler */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--yuvarlak-kucuk);
  border: 1px solid transparent;
  font-family: var(--yazi-govde);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--gecis);
  white-space: nowrap;
}
.dugme:hover { text-decoration: none; }

.dugme-birincil {
  background: linear-gradient(160deg, var(--altin-parlak) 0%, var(--altin-acik) 45%, var(--altin) 100%);
  color: #18120a;
  box-shadow: var(--golge-1);
}
.dugme-birincil:hover {
  color: #18120a;
  box-shadow: 0 6px 22px rgba(201, 162, 77, 0.28);
  transform: translateY(-1px);
}
.dugme-birincil:active { transform: none; }

.dugme-ikincil {
  background: rgba(255, 255, 255, 0.02);
  color: var(--metin);
  border-color: var(--kenar-orta);
}
.dugme-ikincil:hover {
  border-color: var(--kenar-parlak);
  background: rgba(201, 162, 77, 0.06);
  color: var(--metin);
  transform: translateY(-1px);
}

.dugme-kucuk { padding: 9px 16px; font-size: 13.5px; }

.dugme[disabled] { opacity: 0.35; cursor: default; transform: none; box-shadow: none; }

/* ------------------------------------------------------------------ panel */

/* Referanstaki temel yapı taşı: koyu yüzey, çok düşük opaklıkta altın
   kenarlık, üstte ince bir ışık çizgisi. */
.panel {
  position: relative;
  min-width: 0;
  background: linear-gradient(180deg, rgba(26, 21, 15, 0.9), rgba(13, 11, 8, 0.9));
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge-2);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 200, 132, 0.28), transparent);
  pointer-events: none;
}

.panel-ic { padding: 18px; }
/* Panel içindeki metin blokları arasında nefes payı */
.panel-ic > * + * { margin-top: 14px; }
.panel-metin { font-size: 14.5px; line-height: 1.6; max-width: none; }

/* Bölüm başı: ikon + büyük harf başlık + sağda bağlantı */
.bolum-basi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--kenar);
}

.bolum-basi h2 {
  margin: 0;
  font-family: var(--yazi-govde);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--metin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bolum-basi .bag { margin-left: auto; font-size: 13px; color: var(--metin-orta); white-space: nowrap; }
.bolum-basi .bag:hover { color: var(--altin-acik); }

.bolum-simge {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(201, 162, 77, 0.1);
  border: 1px solid var(--kenar);
  color: var(--altin-acik);
  font-size: 13px;
  line-height: 1;
}

.bolum { margin-bottom: 26px; }

/* Sayfa üstü başlık bloğu (panel dışı) */
.sayfa-basi { padding: 46px 0 32px; }

/* ------------------------------------------------------------------ giriş bölümü */

.giris-bolumu {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
  gap: 44px;
  align-items: center;
  padding: 54px 0 44px;
}

.giris-dugmeler { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; align-items: center; }

.giris-alt {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--kenar);
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* Ana sayfa kapak görseli — panelle aynı çerçeve dili */
.giris-gorsel {
  margin: 0;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-3);
  position: relative;
}
.giris-gorsel img { width: 100%; height: auto; display: block; }
/* Alt kenarda zemine yumuşak geçiş: görsel kesik durmuyor. */
.giris-gorsel::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 4, 0.55));
  pointer-events: none;
}

/* Panel içindeki görsel */
.panel-gorsel {
  width: 100%;
  height: auto;
  border-radius: var(--yuvarlak-kucuk);
  border: 1px solid var(--kenar);
}

/* ------------------------------------------------------------------ ızgara */

.izgara { display: grid; gap: 18px; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Ana sayfadaki pano düzeni.
   Önce 4 sütun + "duyurular 2 sütun kaplasın" denenmişti; o zaman video
   paneli ~300px'e düşüyor ve satır kartının başlığı 4 satıra sarıyordu.
   Üç eşit sütun, her panele satır kartının rahat çalıştığı genişliği veriyor. */
.pano { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* ------------------------------------------------------------------ kart */

.kart {
  position: relative;
  min-width: 0;
  background: linear-gradient(180deg, rgba(26, 21, 15, 0.82), rgba(12, 10, 7, 0.92));
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--gecis);
}
.kart:hover {
  border-color: var(--kenar-orta);
  transform: translateY(-3px);
  box-shadow: var(--golge-3);
}
.kart .kapak, .kart .yuva { transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.kart:hover .kapak, .kart:hover .yuva { transform: scale(1.03); }

.kart-govde { padding: 16px 17px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kart-govde h3 { margin: 0; }
.kart-govde p {
  margin: 0; color: var(--metin-orta); font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.kart-alt {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--kenar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--metin-soluk);
}

.kart-baglanti { color: var(--metin); }
.kart-baglanti:hover { color: var(--altin-acik); }

/* Kapağın üstüne binen rozet (referanstaki YENİ / ETKİNLİK) */
.kart-ustu { position: relative; }
.kart-ustu .rozet { position: absolute; top: 10px; left: 10px; z-index: 2; }
.kart-sure {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: rgba(7, 6, 4, 0.8);
  border: 1px solid var(--kenar);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11.5px;
  color: var(--metin);
}

/* Yatay satır kartı (referanstaki "Öne Çıkan Duyurular" listesi) */
.satir-kart {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px;
  border-radius: var(--yuvarlak-kucuk);
  border: 1px solid transparent;
  transition: var(--gecis);
}
.satir-kart + .satir-kart { margin-top: 2px; }
.satir-kart:hover {
  background: rgba(201, 162, 77, 0.045);
  border-color: var(--kenar);
  text-decoration: none;
}
.satir-kart .yuva, .satir-kart .kapak { border-radius: 7px; }
/* 92px genişlikte yuva etiketi okunmuyor ve taşıyor; sadece desen kalsın. */
.satir-kart .yuva-etiket { display: none; }
.satir-kart h3 {
  font-size: 14.5px; margin: 0 0 3px; color: var(--metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.satir-kart p {
  margin: 0; font-size: 12.5px; color: var(--metin-soluk);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.satir-kart .ok { color: var(--metin-soluk); font-size: 15px; }
.satir-kart:hover .ok { color: var(--altin-acik); }
.satir-kart:hover h3 { color: var(--altin-acik); }

.satir-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.satir-tarih { font-size: 11.5px; color: var(--metin-soluk); letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ varlık yuvası */

.yuva {
  position: relative;
  border: 1px dashed var(--kenar-orta);
  background:
    repeating-linear-gradient(135deg,
      rgba(201, 162, 77, 0.035) 0 10px,
      transparent 10px 20px),
    linear-gradient(140deg, var(--yuzey-2), var(--yuzey));
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--metin-soluk);
  text-align: center;
  padding: 12px;
}

.yuva[data-gorsel] {
  border-style: solid;
  border-color: var(--kenar);
  background-size: cover;
  background-position: center;
}
.yuva[data-gorsel] .yuva-etiket { display: none; }

.yuva-etiket { font-size: 11.5px; line-height: 1.5; }
.yuva-etiket strong {
  display: block;
  color: var(--metin-orta);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  margin-bottom: 3px;
}
.yuva-etiket span { opacity: 0.7; }

.yuva-16-9 { aspect-ratio: 16 / 9; }
.yuva-4-3 { aspect-ratio: 4 / 3; }
.yuva-1-1 { aspect-ratio: 1 / 1; }
.yuva-3-1 { aspect-ratio: 3 / 1; }
.yuva-21-9 { aspect-ratio: 21 / 9; }

/* ------------------------------------------------------------------ rozet */

.rozet {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--yazi-govde);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid var(--kenar-orta);
  color: var(--metin-orta);
  background: rgba(201, 162, 77, 0.06);
  line-height: 1.5;
}

.rozet-altin { border-color: var(--kenar-parlak); color: var(--altin-acik); background: rgba(201, 162, 77, 0.12); }
.rozet-kirmizi { border-color: rgba(163, 43, 43, 0.55); color: #f0a5a5; background: rgba(163, 43, 43, 0.22); }

/* Şartname md. 90: demo veri AÇIKÇA işaretlenir. */
.rozet-demo { border-color: rgba(217, 164, 65, 0.6); color: var(--uyari); background: rgba(217, 164, 65, 0.12); }

.kart-govde > .rozet, .yazi-ust-bilgi .rozet { align-self: flex-start; }

.etiketler { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ durumlar */

main { flex: 1; padding: 0 0 70px; }

.durum {
  padding: 50px 26px;
  text-align: center;
  color: var(--metin-soluk);
  border: 1px dashed var(--kenar);
  border-radius: var(--yuvarlak);
  background: linear-gradient(180deg, rgba(26, 21, 15, 0.5), transparent);
}
.durum strong {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 21px;
  color: var(--metin-orta);
  margin-bottom: 7px;
}

.durum-hata { border-color: rgba(163, 43, 43, 0.4); }
.durum-hata strong { color: var(--kirmizi-acik); }

/* İskelet yükleme: "Yükleniyor…" yazısı yerine içeriğin şekli.
   Sayfa zıplamıyor ve bekleme daha kısa hissettiriyor. */
.yukleniyor { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yukleniyor-1 { grid-template-columns: minmax(0, 1fr); }

.iskelet {
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  overflow: hidden;
  background: var(--yuzey);
}
.iskelet::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.015) 30%,
    rgba(201, 162, 77, 0.07) 50%,
    rgba(255, 255, 255, 0.015) 70%);
  background-size: 220% 100%;
  animation: kayan 1.5s linear infinite;
}
.iskelet::after {
  content: "";
  display: block;
  height: 72px;
  background:
    linear-gradient(var(--yuzey-2), var(--yuzey-2)) 17px 19px / 65% 12px no-repeat,
    linear-gradient(var(--yuzey-2), var(--yuzey-2)) 17px 43px / 40% 10px no-repeat;
}

@keyframes kayan {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* ------------------------------------------------------------------ yazı (duyuru detayı) */

.yazi { max-width: 72ch; }
.yazi p { font-size: 17px; color: var(--metin-orta); line-height: 1.8; }
.yazi p:first-of-type { font-size: 18.5px; color: var(--metin); }

.yazi-basi { margin-bottom: 28px; }
.yazi-basi h1 { font-size: clamp(30px, 4vw, 50px); margin-bottom: 18px; }
.yazi-ust-bilgi {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  color: var(--metin-soluk); font-size: 13px; margin-bottom: 16px;
}

/* ------------------------------------------------------------------ medya */

.video-kutu { position: relative; overflow: hidden; }
.video-kutu iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

.kapak { aspect-ratio: 16/9; background: var(--yuzey-2); background-size: cover; background-position: center; }

.oynat {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(7, 6, 4, 0.12), rgba(7, 6, 4, 0.6));
  border: 0; cursor: pointer; width: 100%; padding: 0;
  transition: var(--gecis);
}
.oynat:hover { background: linear-gradient(180deg, rgba(7, 6, 4, 0.04), rgba(7, 6, 4, 0.42)); }

.oynat-daire {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(12, 10, 7, 0.55);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(232, 200, 132, 0.75);
  display: grid; place-items: center;
  color: var(--altin-parlak); font-size: 19px;
  padding-left: 4px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  transition: var(--gecis);
}
.oynat:hover .oynat-daire { transform: scale(1.07); background: rgba(201, 162, 77, 0.28); }

.oynat-kucuk .oynat-daire { width: 42px; height: 42px; font-size: 14px; }

/* ------------------------------------------------------------------ sayfalama */

.sayfalama { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 28px; }
.sayfalama span { color: var(--metin-soluk); font-size: 13px; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ bilgi kutusu */

.bilgi {
  border: 1px solid var(--kenar);
  border-left: 2px solid var(--altin);
  background: linear-gradient(90deg, rgba(201, 162, 77, 0.07), transparent);
  border-radius: var(--yuvarlak-kucuk);
  padding: 15px 20px;
  color: var(--metin-orta);
  font-size: 14.5px;
}

/* ------------------------------------------------------------------ alt bar */

.altbar {
  border-top: 1px solid var(--kenar);
  background: linear-gradient(180deg, transparent, rgba(201, 162, 77, 0.035));
  padding: 32px 0;
  color: var(--metin-soluk);
  font-size: 13px;
}
.altbar-ic { display: flex; gap: 26px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.altbar-menu { display: flex; gap: 20px; flex-wrap: wrap; }
.altbar-menu a { color: var(--metin-orta); font-size: 13.5px; }
.altbar-soz { font-family: var(--yazi-baslik); font-style: italic; color: var(--metin-soluk); }

/* ------------------------------------------------------------------ giriş animasyonu */

/* Sayfa açılışında hafif yükselme. Abartısız: 12px, 420ms. */
.gir { animation: gir 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.gir-2 { animation-delay: 70ms; }
.gir-3 { animation-delay: 140ms; }

@keyframes gir {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.ortala { text-align: center; margin-top: 22px; }

/* ------------------------------------------------------------------ dar ekran */

@media (max-width: 1180px) {
  .ustbar-soz { display: none; }
  .pano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pano > :last-child { grid-column: 1 / -1; }
  .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .giris-bolumu { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 32px 0; }
  .izgara-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yukleniyor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root { --bosluk: 16px; }

  body { font-size: 15px; }

  .izgara-2, .izgara-3, .izgara-4, .pano, .yukleniyor { grid-template-columns: minmax(0, 1fr); }
  .pano > :last-child { grid-column: auto; }

  .menu-ac { display: block; margin-left: auto; }
  .menu {
    display: none;
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 10px var(--bosluk) 16px;
    background: var(--zemin-2);
    border-bottom: 1px solid var(--kenar);
    box-shadow: var(--golge-3);
  }
  .menu.acik { display: flex; }
  .menu a { padding: 13px 4px; width: 100%; }
  .menu a::after { display: none; }

  .ustbar-ic { position: relative; height: 72px; gap: 10px; }
  .oturum-ad, .marka-alt, .marka-etiket { display: none; }
  .marka-ad { font-size: 19px; letter-spacing: 0.18em; }
  .marka-simge { width: 32px; height: 32px; flex-basis: 32px; }
  .logo { height: 40px; }
  .logo-kucuk { height: 34px; }

  .satir-kart { grid-template-columns: 74px minmax(0, 1fr) auto; padding: 9px; }

  /* Dar ekranda başlığı kesmek yerine sarmasına izin ver:
     "ÖNE ÇIKAN DUYU…" gibi yarım kalan bir başlık özensiz görünüyor. */
  .bolum-basi { flex-wrap: wrap; gap: 8px 10px; padding: 13px 14px; }
  .bolum-basi h2 { white-space: normal; overflow: visible; letter-spacing: 0.09em; }
  .bolum-basi .bag { font-size: 12.5px; }
  .panel-ic { padding: 14px; }
  .sayfa-basi { padding: 28px 0 20px; }
  .giris-dugmeler .dugme { flex: 1 1 100%; }
  .altbar-ic { justify-content: center; text-align: center; }
  .altbar-menu { justify-content: center; }
}

/* Çok dar telefonlarda başlık taşmasın */
@media (max-width: 380px) {
  h1 { font-size: 32px; }
  .dugme { padding: 12px 18px; font-size: 14px; }
}

/* Hareketi azaltma tercihine saygı. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .kart:hover { transform: none; }
}

/* ==========================================================================
   YÖNETİM PANELİ
   ==========================================================================
   Aynı tasarım dili; sadece yoğun veri ekranlarının ihtiyaç duyduğu
   bileşenler ekleniyor. Yeni renk yok — hepsi mevcut değişkenlerden.
   ========================================================================== */

.yonetim { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }

.yan-menu { position: sticky; top: 108px; }
.yan-menu-baslik {
  padding: 15px 18px 12px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--metin-soluk); border-bottom: 1px solid var(--kenar);
}
.yan-menu-liste { padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.yan-menu-liste button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--yuvarlak-kucuk);
  background: transparent; border: 1px solid transparent;
  color: var(--metin-orta); font-family: inherit; font-size: 14px;
  cursor: pointer; transition: var(--gecis);
}
.yan-menu-liste button:hover { background: rgba(201, 162, 77, 0.06); color: var(--metin); }
.yan-menu-liste button[aria-current="true"] {
  background: rgba(201, 162, 77, 0.1);
  border-color: var(--kenar-orta);
  color: var(--altin-acik);
}
.yan-menu-sayi { margin-left: auto; font-size: 12px; color: var(--metin-soluk); }

/* --- form alanları --- */

.alan { display: flex; flex-direction: column; gap: 7px; }
.alan + .alan { margin-top: 16px; }

.alan label { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--metin-orta); }
.alan .ipucu { font-size: 12.5px; color: var(--metin-soluk); line-height: 1.5; }

.girdi, .metin-alani, .secim {
  width: 100%;
  padding: 11px 13px;
  background: rgba(7, 6, 4, 0.55);
  border: 1px solid var(--kenar-orta);
  border-radius: var(--yuvarlak-kucuk);
  color: var(--metin);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: var(--gecis);
}
.girdi:focus, .metin-alani:focus, .secim:focus {
  outline: none;
  border-color: var(--kenar-parlak);
  background: rgba(7, 6, 4, 0.8);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.1);
}
.girdi::placeholder, .metin-alani::placeholder { color: var(--metin-soluk); }

.metin-alani { min-height: 240px; resize: vertical; line-height: 1.7; }
.girdi-tek-aralik { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 14px; }

.alan-hatali .girdi, .alan-hatali .metin-alani { border-color: rgba(163, 43, 43, 0.7); }
.alan-hata { font-size: 12.5px; color: var(--kirmizi-acik); }

.ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ikili .alan + .alan { margin-top: 0; }

/* --- anahtar (yayında / taslak) --- */

.anahtar { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.anahtar input { position: absolute; opacity: 0; width: 0; height: 0; }

.anahtar-govde {
  width: 44px; height: 25px; border-radius: 99px;
  background: rgba(7, 6, 4, 0.7);
  border: 1px solid var(--kenar-orta);
  position: relative; transition: var(--gecis); flex: 0 0 44px;
}
.anahtar-govde::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--metin-soluk); transition: var(--gecis);
}
.anahtar input:checked + .anahtar-govde {
  background: rgba(201, 162, 77, 0.28);
  border-color: var(--kenar-parlak);
}
.anahtar input:checked + .anahtar-govde::after {
  transform: translateX(19px);
  background: var(--altin-parlak);
}
.anahtar input:focus-visible + .anahtar-govde { box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.22); }
.anahtar-yazi { font-size: 14px; color: var(--metin-orta); }

/* --- liste satırı --- */

.kayit-satiri {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--kenar);
  transition: var(--gecis);
}
.kayit-satiri:last-child { border-bottom: 0; }
.kayit-satiri:hover { background: rgba(201, 162, 77, 0.035); }

.kayit-bilgi { min-width: 0; }
.kayit-bilgi h3 { margin: 0 0 4px; font-size: 15px; }
.kayit-ust { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.kayit-adres {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: var(--metin-soluk);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kayit-eylemler { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.dugme-tehlike { border-color: rgba(163, 43, 43, 0.5); color: var(--kirmizi-acik); background: rgba(163, 43, 43, 0.1); }
.dugme-tehlike:hover { border-color: var(--kirmizi-acik); background: rgba(163, 43, 43, 0.2); color: var(--kirmizi-acik); }

/* --- denetim kaydı --- */

.denetim-satiri {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--kenar);
  font-size: 14px;
}
.denetim-satiri:last-child { border-bottom: 0; }
.denetim-zaman { font-size: 12px; color: var(--metin-soluk); }
.denetim-metin { color: var(--metin-orta); min-width: 0; }
.denetim-metin strong { color: var(--metin); font-weight: 600; }
.denetim-alanlar { font-size: 12px; color: var(--metin-soluk); margin-top: 3px; }

/* --- bildirim (toast) --- */

.bildirimler {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(400px, calc(100vw - 40px));
}
.bildirim {
  padding: 13px 17px;
  border-radius: var(--yuvarlak-kucuk);
  border: 1px solid var(--kenar-orta);
  background: linear-gradient(180deg, rgba(32, 26, 19, 0.98), rgba(13, 11, 8, 0.98));
  box-shadow: var(--golge-3);
  color: var(--metin);
  font-size: 14px;
  animation: bildirimGir 240ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.bildirim-basarili { border-left: 3px solid var(--yesil); }
.bildirim-hata { border-left: 3px solid var(--kirmizi-acik); }
.bildirim-bilgi { border-left: 3px solid var(--altin); }

@keyframes bildirimGir {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* --- onay penceresi --- */

.perde {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(4, 3, 2, 0.75);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  animation: gir 180ms ease both;
}
.pencere {
  width: min(480px, 100%);
  background: linear-gradient(180deg, rgba(26, 21, 15, 0.98), rgba(13, 11, 8, 0.98));
  border: 1px solid var(--kenar-orta);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge-3);
  padding: 24px;
}
.pencere h3 { font-family: var(--yazi-baslik); font-size: 22px; margin-bottom: 10px; }
.pencere p { color: var(--metin-orta); font-size: 14.5px; }
.pencere-dugmeler { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* --- araç çubuğu --- */

.arac-cubugu {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--kenar);
}
.arac-cubugu .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.suzgec { display: flex; gap: 4px; }
.suzgec button {
  padding: 7px 13px; border-radius: var(--yuvarlak-kucuk);
  background: transparent; border: 1px solid transparent;
  color: var(--metin-soluk); font-family: inherit; font-size: 13.5px; cursor: pointer;
  transition: var(--gecis);
}
.suzgec button:hover { color: var(--metin); background: rgba(201, 162, 77, 0.06); }
.suzgec button[aria-pressed="true"] {
  color: var(--altin-acik);
  border-color: var(--kenar-orta);
  background: rgba(201, 162, 77, 0.1);
}

/* --- yönetim dar ekran --- */

@media (max-width: 900px) {
  .yonetim { grid-template-columns: minmax(0, 1fr); }
  .yan-menu { position: static; }
  .yan-menu-liste { flex-direction: row; overflow-x: auto; }
  .yan-menu-liste button { white-space: nowrap; width: auto; }
  .ikili { grid-template-columns: minmax(0, 1fr); }
  .ikili .alan + .alan { margin-top: 16px; }
}

@media (max-width: 680px) {
  .kayit-satiri { grid-template-columns: minmax(0, 1fr); }
  .kayit-eylemler { justify-content: flex-start; }
  .denetim-satiri { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bildirimler { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* ==========================================================================
   CASINO
   ==========================================================================

   Buradaki hiçbir renk sabit değil: hepsi yukarıdaki değişkenlerden geliyor.
   Kazanç yeşili ve kayıp kırmızısı da öyle — tek yerden değiştirilebilsin.
   ========================================================================== */

/* --- casino giriş kapağı ------------------------------------------------ */
.casino-kapak {
  position: relative;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid var(--kenar);
  box-shadow: var(--golge-3);
  margin-bottom: 34px;
}
.casino-kapak .yuva { border: 0; border-radius: 0; aspect-ratio: 21 / 9; }
/* Soldan sağa karanlık geçiş: başlık her görselin üstünde okunur kalıyor. */
.casino-kapak::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 6, 4, 0.92) 0%, rgba(7, 6, 4, 0.72) 32%, rgba(7, 6, 4, 0.05) 62%);
  pointer-events: none;
}
.casino-kapak-yazi {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(20px, 5vw, 60px);
  max-width: 54%;
  z-index: 2;
}
.casino-kapak-yazi h1 { font-size: clamp(34px, 5.2vw, 62px); margin: 6px 0 12px; }
.casino-kapak-yazi p { color: var(--metin-orta); margin: 0 0 20px; max-width: 46ch; }
.casino-kapak-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- oyun kartları ------------------------------------------------------ */
.oyun-kartlari { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bosluk); }
.oyun-kart {
  position: relative;
  display: block;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid var(--kenar);
  background: var(--yuzey);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
  min-width: 0;
}
.oyun-kart:hover, .oyun-kart:focus-visible { border-color: var(--kenar-parlak); transform: translateY(-2px); }
.oyun-kart .yuva { border: 0; border-radius: 0; aspect-ratio: 16 / 9; }
.oyun-kart::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 56%;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 4, 0.94));
  pointer-events: none;
}
.oyun-kart-yazi { position: absolute; inset: auto 0 0 0; padding: 20px; z-index: 2; }
.oyun-kart-yazi h3 { font-size: 26px; margin: 0 0 4px; }
.oyun-kart-yazi p { margin: 0; font-size: 13.5px; color: var(--metin-orta); }
.oyun-kart-rozet {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--kenar-orta); border-radius: 999px;
  padding: 4px 11px; background: rgba(7, 6, 4, .72); color: var(--altin-acik);
}
.oyun-kart-rozet.yakinda { color: var(--metin-soluk); }

/* --- son turlar şeridi --------------------------------------------------- */
.tur-serit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tur-cip {
  border: 1px solid var(--kenar); border-radius: 8px;
  padding: 6px 11px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--yuzey-2); color: var(--metin-orta);
  text-decoration: none;
}
.tur-cip.dusuk { color: var(--kirmizi-acik); border-color: rgba(224, 103, 103, .28); }
.tur-cip.yuksek { color: var(--yesil); border-color: rgba(63, 167, 106, .3); }

/* --- crash düzeni ------------------------------------------------------- */
.crash-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--bosluk); align-items: start; }

.egri-kutu {
  position: relative;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  background: linear-gradient(180deg, var(--yuzey-2), var(--zemin-2));
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 300px;
}
.egri-kutu canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ÇARPAN OKUMASI SOL ÜSTTE — ve bu geometrik bir karar.
   
   Eğrinin ucu (ve orada uçan karakter) şu yolu izliyor: zaman ilerledikçe
   SAĞA, çarpan büyüdükçe YUKARI. İkisi birlikte arttığı için uç her zaman
   sol-alt ile sağ-üst arasındaki köşegende. Yani:
   
     - düşük çarpan  = erken an  -> uç SOL-ALTTA
     - yüksek çarpan = geç an    -> uç SAĞ-ÜSTTE
   
   Uç hiçbir zaman SOL-ÜSTTE olamaz (yüksek çarpana kısa sürede ulaşılmıyor).
   Sayı ortadayken karakterle sürekli çakışıyordu; sol üst köşe kanıtlanabilir
   şekilde boş. */
.egri-orta {
  position: absolute;
  inset: 52px 20px auto 18px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 4px; pointer-events: none; text-align: left;
}

/* Sayının arkasında yumuşak bir karartma: eğri ya da karakter altından
   geçerse bile okunur kalıyor. */
.egri-orta::before {
  content: '';
  position: absolute;
  inset: -16px -20px -24px -22px;
  background: radial-gradient(120% 140% at 0% 0%,
    rgba(7, 6, 4, 0.82) 0%, rgba(7, 6, 4, 0.45) 45%, rgba(7, 6, 4, 0) 75%);
  pointer-events: none;
}

.egri-orta > * { position: relative; }
.carpan-yazi {
  /* Gövde yazı tipi: başlık serifinin rakamları eski stil (old-style)
     olduğu için "1.12x" okunurken roma rakamı gibi görünüyordu. Saniyede
     60 kez değişen bir sayıda okunaklılık, marka tipografisinden önce gelir. */
  font-family: var(--yazi-govde);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(40px, 7vw, 74px);
  line-height: 1;
  color: var(--altin-parlak);
  /* İkinci gölge KOYU: altın parıltı tek başına, karakterin açık renkli
     pelerini arkaya denk geldiğinde sayıyı okunmaz bırakıyordu. */
  text-shadow: 0 0 44px rgba(201, 162, 77, .32), 0 2px 12px rgba(7, 6, 4, .9);
  font-variant-numeric: tabular-nums;
}
.carpan-yazi.coktu { color: var(--kirmizi-acik); text-shadow: 0 0 44px rgba(163, 43, 43, .4); }
.carpan-alt { font-size: 14px; color: var(--metin-orta); letter-spacing: .04em; }
.carpan-alt strong { color: var(--altin-acik); font-weight: 400; }

.egri-rozet {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px;
  border: 1px solid var(--kenar-orta); background: rgba(7, 6, 4, .6); color: var(--metin-orta);
}
.egri-rozet.canli { color: var(--yesil); border-color: rgba(63, 167, 106, .38); background: rgba(63, 167, 106, .08); }
.egri-rozet.bahis { color: var(--altin-acik); border-color: var(--kenar-parlak); }
.egri-rozet.coktu { color: var(--kirmizi-acik); border-color: rgba(224, 103, 103, .38); }

.geri-sayim:empty { display: none; }
.geri-sayim {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--metin-orta);
  border: 1px solid var(--kenar); border-radius: 8px;
  padding: 5px 11px; background: rgba(7, 6, 4, .6);
  font-variant-numeric: tabular-nums;
}

/* --- bahis paneli -------------------------------------------------------- */
.bahis-paneli { display: flex; flex-direction: column; gap: 14px; }
.alan-etiket { font-size: 12px; color: var(--metin-soluk); margin-bottom: 6px; display: block; }
.tutar-giris {
  width: 100%;
  border: 1px solid var(--kenar-orta); border-radius: 8px;
  padding: 11px 13px; background: var(--zemin-2);
  color: var(--altin-parlak); font-size: 17px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.tutar-giris:focus-visible { outline: 2px solid var(--kenar-parlak); outline-offset: 1px; }
.hizli-tutar { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.hizli-tutar button {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--kenar); border-radius: 7px;
  background: var(--yuzey-2); color: var(--metin-orta);
  padding: 6px 4px; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
.hizli-tutar button:hover { border-color: var(--kenar-orta); color: var(--metin); }

.dugme-oyun {
  width: 100%; padding: 15px; font-size: 16px; letter-spacing: .04em;
  border-radius: 10px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--altin-koyu);
  background: linear-gradient(180deg, rgba(201, 162, 77, .2), rgba(201, 162, 77, .07));
  color: var(--altin-parlak);
  transition: filter .15s ease;
}
.dugme-oyun:hover:not(:disabled) { filter: brightness(1.22); }
.dugme-oyun:disabled { opacity: .42; cursor: not-allowed; }
.dugme-oyun.cekim {
  border-color: rgba(63, 167, 106, .5);
  background: linear-gradient(180deg, rgba(63, 167, 106, .24), rgba(63, 167, 106, .08));
  color: #9fe0bb;
}
.dugme-oyun.iptal { border-color: var(--kenar-orta); background: var(--yuzey-2); color: var(--metin-orta); }

.oyun-satir {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--kenar); font-size: 13.5px;
}
.oyun-satir:last-child { border-bottom: 0; }
.oyun-satir span { color: var(--metin-orta); }
.oyun-satir b { font-weight: 400; font-variant-numeric: tabular-nums; }

/* --- canlı bahis listesi ------------------------------------------------- */
.canli-liste { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.canli-satir {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13.5px;
  background: var(--yuzey-2); border: 1px solid transparent;
}
.canli-satir.cekti { border-color: rgba(63, 167, 106, .26); }
.canli-satir.benim { border-color: var(--kenar-parlak); }
.canli-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--metin-orta); }
.canli-sonuc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.canli-sonuc.cekti { color: var(--yesil); }

/* --- adillik paneli ------------------------------------------------------ */
.adillik-kutu { font-size: 13px; }
.adillik-kutu dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.adillik-kutu dt { color: var(--metin-soluk); }
.adillik-kutu dd {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; overflow-wrap: anywhere; color: var(--metin-orta);
}
.adillik-sonuc { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.adillik-sonuc.gecerli { border: 1px solid rgba(63, 167, 106, .3); background: rgba(63, 167, 106, .07); color: #9fe0bb; }
.adillik-sonuc.gecersiz { border: 1px solid rgba(224, 103, 103, .35); background: rgba(163, 43, 43, .1); color: var(--kirmizi-acik); }

/* --- bakiye rozeti ------------------------------------------------------- */
.bakiye-cip {
  border: 1px solid var(--kenar-orta); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--altin-acik);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- dar ekran ----------------------------------------------------------- */
@media (max-width: 940px) {
  .crash-duzen { grid-template-columns: minmax(0, 1fr); }
  .oyun-kartlari { grid-template-columns: minmax(0, 1fr); }
  .casino-kapak-yazi { max-width: 100%; }
  .casino-kapak::after {
    background: linear-gradient(180deg, rgba(7, 6, 4, .55) 0%, rgba(7, 6, 4, .88) 68%);
  }
}
@media (max-width: 680px) {
  .egri-kutu { aspect-ratio: 4 / 3; min-height: 260px; }
  .casino-kapak .yuva { aspect-ratio: 16 / 10; }
}

/* Bölümden ayrılmış tek panel (satır içi stil kullanmamak için). */
.panel-ayrik { margin-top: var(--bosluk); }

/* ==========================================================================
   BLACKJACK MASASI
   ==========================================================================

   Masa bir FOTOĞRAF; koltuklar, kartlar ve isimler onun üstüne HTML ile
   çiziliyor. Konumlar `masaYerlesim.js` içinden yüzde olarak geliyor ve
   JavaScript tarafından `left`/`top` olarak yazılıyor — bu yüzden burada
   sabit koordinat yok, yalnızca görünüm var.

   Masaüstünde koltuklar fotoğrafın üstünde duruyor. 900 px altında
   `position: static`e düşüp fotoğrafın ALTINA, tek sütunlu bir listeye
   dönüşüyorlar: telefonda 60 pikselik kart okunmuyor.
   ========================================================================== */

.bj-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

/* --- masa kutusu --- */

.bj-masa {
  position: relative;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  border: 1px solid var(--kenar-orta);
  box-shadow: var(--golge-3);
  background: var(--zemin-2);
}

.bj-zemin .yuva {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.bj-katman {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* koltuk düğmeleri kendi içinde geri açıyor */
}

.bj-rozet {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 6, 4, 0.78);
  border: 1px solid var(--kenar-orta);
  color: var(--metin-orta);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bj-rozet.d-SIRA_OYUNCUDA { color: var(--altin-acik); border-color: var(--kenar-parlak); }
.bj-rozet.d-BAHIS_ACIK { color: var(--yesil); }
.bj-rozet.d-ACIKLAMA { color: var(--metin); }

.bj-sayac {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(7, 6, 4, 0.78);
  border: 1px solid var(--kenar-orta);
  color: var(--altin-acik);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.bj-sayac:empty { display: none; }

/* --- kartlar --- */

/* Bir koltuğun tamamı: kartlar + isim rozeti. Konumu ve genişliği
   JavaScript yazıyor (yerleşim dosyasından). Ortalamak için yatayda yarı
   genişlik kadar sola, dikeyde yarı yükseklik kadar yukarı kaydırılıyor. */
.bj-yer {
  position: absolute;
  transform: translate(-50%, -50%);
}

.bj-kartlar { position: relative; width: 100%; }

/* Krupiyenin kartları koltuğa bağlı değil; kendi konumu var. */
.bj-krupiye-kartlari {
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Kartlar mutlak konumlu olduğu için kabın kendiliğinden yüksekliği yok;
   yüksekliği `padding-bottom` ile JavaScript veriyor (kart oranından). */
.bj-yigin {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
}

.bj-kart {
  position: absolute;
  top: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}

.bj-kart img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.bj-toplam {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(7, 6, 4, 0.9);
  border: 1px solid var(--kenar-parlak);
  color: var(--altin-parlak);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bj-toplam.patlak { color: var(--kirmizi-acik); border-color: var(--kirmizi); }
.bj-toplam.blackjack { color: var(--zemin); background: var(--altin-parlak); }

/* --- koltuklar --- */

.bj-koltuk {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 4px;
  transform: translateX(-50%);
  min-width: 132px;
  max-width: 190px;
  padding: 6px 10px;
  border-radius: var(--yuvarlak-kucuk);
  background: rgba(7, 6, 4, 0.82);
  border: 1px solid var(--kenar);
  text-align: center;
  pointer-events: auto;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

.bj-koltuk.bos {
  background: rgba(7, 6, 4, 0.55);
  border-style: dashed;
  padding: 0;
}

.bj-koltuk.benim { border-color: var(--altin); box-shadow: 0 0 0 1px var(--altin-koyu); }

.bj-koltuk.sirada {
  border-color: var(--altin-acik);
  box-shadow: 0 0 0 2px rgba(232, 200, 132, 0.35), 0 0 22px rgba(232, 200, 132, 0.2);
  animation: bj-nabiz 1.4s ease-in-out infinite;
}

@keyframes bj-nabiz {
  0%, 100% { box-shadow: 0 0 0 2px rgba(232, 200, 132, 0.3), 0 0 18px rgba(232, 200, 132, 0.14); }
  50% { box-shadow: 0 0 0 2px rgba(232, 200, 132, 0.55), 0 0 30px rgba(232, 200, 132, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .bj-koltuk.sirada { animation: none; }
}

.bj-koltuk.kazanc { border-color: var(--yesil); }
.bj-koltuk.kayip { border-color: var(--kirmizi); }

.bj-koltuk-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--metin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bj-koltuk-no { color: var(--metin-soluk); }

.bj-sen {
  padding: 0 5px;
  border-radius: 3px;
  background: var(--altin);
  color: var(--zemin);
  font-size: 9.5px;
  letter-spacing: 0.08em;
}

.bj-koltuk-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--metin-orta);
  white-space: nowrap;
}

/* Genel `.alt-metin` 16 px; koltuk rozetinde o boy iki satıra taşıyor ve
   rozet masanın dışına çıkıyordu. */
.bj-koltuk-alt .alt-metin { font-size: 11.5px; max-width: none; }

.bj-bahis { font-variant-numeric: tabular-nums; }
.bj-sigorta-rozet { color: var(--uyari); font-size: 10.5px; }
.bj-sonuc { letter-spacing: 0.06em; font-size: 10.5px; }
.bj-sonuc.kazanc { color: var(--yesil); }
.bj-sonuc.kayip { color: var(--kirmizi-acik); }
.bj-sonuc.esit { color: var(--metin-orta); }

.bj-otur {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--altin-acik);
  font-family: var(--yazi-govde);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.bj-otur:hover { background: rgba(201, 162, 39, 0.14); }

/* Bu elin dışındayken koltuk düğmesi kapalı: sunucu zaten reddediyor,
   burada sebebi görünüyor (title) ve boşa tıklama olmuyor. */
.bj-otur.kapali,
.bj-otur:disabled {
  color: var(--metin-soluk, #7b7469);
  cursor: not-allowed;
  opacity: 0.55;
}
.bj-otur.kapali:hover { background: transparent; }

/* --- masadan kalk --- */

.bj-kalk {
  padding: 2px 7px;
  border: 1px solid var(--kenar-parlak);
  border-radius: 999px;
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  cursor: pointer;
}

.bj-kalk:hover {
  border-color: var(--kirmizi-acik);
  color: var(--kirmizi-acik);
}

.bj-kalk.kapali,
.bj-kalk:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bj-kalk.kapali:hover {
  border-color: var(--kenar-parlak);
  color: var(--metin-orta);
}

.bj-panel-koltuk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar);
}

.bj-panel-kalk {
  padding: 5px 12px;
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}

.bj-panel-kalk:hover:not(:disabled) {
  border-color: var(--kirmizi-acik);
  color: var(--kirmizi-acik);
}

.bj-panel-kalk:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- karar çubuğu --- */

.bj-karar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--yuvarlak);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar-parlak);
}

.bj-karar[hidden] { display: none; }

.bj-karar-sayac {
  min-width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--altin-koyu);
  color: var(--altin-parlak);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.bj-karar-sayac.acil { border-color: var(--kirmizi); color: var(--kirmizi-acik); }

.bj-karar-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.bj-hamle { flex: 1; min-width: 118px; }

/* --- sağ panel --- */

.bj-panel h3 { margin-bottom: 10px; }

.bj-bakiye {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--kenar);
}

.bj-bakiye strong { color: var(--altin-parlak); font-size: 18px; font-variant-numeric: tabular-nums; }

.bj-bahis-giris { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bj-bahis-giris .girdi { flex: 1; }
.bj-birim { color: var(--metin-soluk); font-size: 13px; }

.bj-hizli { display: flex; gap: 6px; margin-bottom: 12px; }

.bj-hizli-dugme {
  flex: 1;
  padding: 6px 0;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 12.5px;
  cursor: pointer;
}

.bj-hizli-dugme:hover { border-color: var(--kenar-parlak); color: var(--altin-acik); }

.bj-bahis-dugme { width: 100%; }
.bj-ipucu { margin-top: 10px; }

.bj-panel-durum { display: flex; flex-direction: column; gap: 3px; }
.bj-panel-durum strong { color: var(--altin-parlak); font-variant-numeric: tabular-nums; }

.bj-net { margin-top: 10px; font-size: 20px; font-variant-numeric: tabular-nums; }
.bj-net.kazanc { color: var(--yesil); }
.bj-net.kayip { color: var(--kirmizi-acik); }
.bj-net.esit { color: var(--metin-orta); }

/* --- masadaki oyuncular listesi --- */

.bj-liste { display: flex; flex-direction: column; gap: 6px; }

.bj-satir {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey);
  font-size: 13px;
}

.bj-satir.benim { background: var(--yuzey-3); }
.bj-satir-no { color: var(--metin-soluk); }
.bj-satir-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-satir-bahis { color: var(--metin-orta); font-variant-numeric: tabular-nums; }
.bj-satir-sonuc { font-variant-numeric: tabular-nums; color: var(--metin-orta); }
.bj-satir-sonuc.kazanc { color: var(--yesil); }
.bj-satir-sonuc.kayip { color: var(--kirmizi-acik); }
.bj-satir-sonuc.esit { color: var(--metin-orta); }

/* Bahis ve sonuç sütunları artık birden fazla parça taşıyor:
   tutar + rozetler, sonuç + net tutar. */
.bj-satir-bahis,
.bj-satir-sonuc {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.bj-satir.kaybetti { opacity: 0.62; }

.bj-satir-net { font-size: 12px; opacity: 0.85; }

.bj-rozet-kucuk {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  border: 1px solid var(--kenar);
  border-radius: 999px;
  padding: 1px 5px;
}

/* Sırası gelen oyuncu listede de belli olsun: masaya bakmadan kimin
   oynadığı anlaşılıyor. */
.bj-satir-sirada { color: var(--altin-acik); font-weight: 600; }

.bj-satir-ok {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--altin-koyu);
  animation: canli-nefes 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bj-satir-ok { animation: none; }
}

/* --- krupiyeler --- */

.bj-krupiyeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.bj-krupiye {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: var(--yuvarlak-kucuk);
  border: 1px solid var(--kenar);
  text-align: center;
  opacity: 0.5;
}

.bj-krupiye .yuva { margin: 0; border: 0; }
.bj-krupiye.aktif { opacity: 1; border-color: var(--altin); }
.bj-krupiye.sonraki { opacity: 0.82; border-color: var(--kenar-parlak); }
.bj-krupiye-ad { font-size: 11.5px; letter-spacing: 0.08em; color: var(--altin-acik); }
.bj-krupiye-durum { font-size: 10px; color: var(--metin-soluk); }

/* --- kurallar ve geçmiş --- */

.bj-kurallar {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--metin-orta);
}

.bj-kurallar li + li { margin-top: 5px; }

.bj-gecmis { display: flex; flex-direction: column; gap: 5px; }

.bj-gecmis-satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey);
  font-size: 12.5px;
  color: var(--metin-orta);
  cursor: pointer;
}

.bj-gecmis-satir:hover { background: var(--yuzey-3); color: var(--metin); }
.bj-gecmis-no { color: var(--altin-koyu); font-variant-numeric: tabular-nums; }

/* --- dar ekran: koltuklar fotoğrafın ALTINA iniyor --- */

@media (max-width: 1080px) {
  .bj-duzen { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Fotoğraf üstte banner olarak kalıyor: krupiye ve onun kartları
     görünüyor. Oyuncu koltukları ise normal boyutlu kartlarla alta
     akıyor — 60 pikselik kart telefonda okunmuyor. */
  .bj-katman { position: static; inset: auto; }

  .bj-masa {
    display: flex;
    flex-direction: column;
  }

  .bj-katman {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    padding: 12px 12px 18px;
    background: var(--zemin-2);
  }

  .bj-yer,
  .bj-koltuk {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    margin-top: 0;
    max-width: none;
  }

  /* `relative` KALIYOR: toplam rozeti buna göre konumlanıyor. `static`
     yapılınca rozet en yakın konumlu atası olan masa kutusuna tutunuyor
     ve masanın dibinde yarısı kesik duruyordu.

     `left`/`top` için `!important` ŞART: bu değerleri JavaScript satır içi
     yazıyor ve `relative` konumda satır içi ofsetler elemanı yerinden
     kaydırıyor. (Krupiyenin kartları tam olarak böyle sağa kayıp
     oyuncunun kartlarının üstüne biniyordu.) */
  .bj-kartlar,
  .bj-krupiye-kartlari {
    position: relative;
    transform: none;
    left: auto !important;
    top: auto !important;
  }

  /* Boş koltukta kart kabı yer kaplamasın — masaüstünde hizalama için
     duruyor, burada gereksiz boşluk yaratıyordu. */
  .bj-kartlar.bos { display: none; }

  /* Bir koltuk = bir hücre: kartları ve adı birlikte kalıyor. */
  .bj-yer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: auto !important;
  }

  .bj-koltuk { width: 100%; }

  /* Dar ekranda kartlar akışa giriyor. Genişlik ve konum JavaScript
     tarafından SATIR İÇİ yazıldığı için burada `!important` şart:
     satır içi stil normalde CSS'i yener. */
  .bj-kartlar,
  .bj-krupiye-kartlari {
    display: flex;
    justify-content: center;
    padding: 10px 0 16px;
    width: auto !important;
  }

  .bj-krupiye-kartlari { grid-column: 1 / -1; }

  .bj-yigin {
    width: auto !important;
    height: 96px;
    padding-bottom: 0 !important;
    display: flex;
  }

  .bj-kart {
    position: relative;
    left: auto !important;
    width: auto !important;
    height: 100%;
    margin-left: -24px;
  }

  .bj-kart:first-child { margin-left: 0; }
  .bj-kart img { width: auto; height: 100%; }
  .bj-toplam { top: auto; bottom: -14px; }
}

@media (max-width: 560px) {
  .bj-karar { flex-direction: column; align-items: stretch; }
  .bj-karar-sayac { margin: 0 auto; }
  .bj-krupiyeler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   PROFİL VE CÜZDAN
   ========================================================================== */

.profil-duzen {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.profil-duzen[hidden] { display: none; }

/* --- cüzdan --- */

.profil-kimlik {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--kenar);
}

.profil-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--kenar-orta);
  object-fit: cover;
}

.profil-ad { font-size: 16px; color: var(--metin); }

.profil-bakiye { display: flex; flex-direction: column; gap: 2px; }

.profil-bakiye strong {
  font-size: 30px;
  color: var(--altin-parlak);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Rezerve: kilitli para. Kayıptan AYRI görünmeli. */
.profil-rezerve {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey);
  border: 1px solid var(--kenar);
}

.profil-rezerve-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--metin-orta);
}

.profil-rezerve-ust strong { color: var(--uyari); font-variant-numeric: tabular-nums; }
.profil-rezerve .alt-metin { font-size: 12px; margin-top: 6px; max-width: none; }

.profil-toplam {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kenar);
}

.profil-toplam strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.profil-dugmeler { display: flex; gap: 8px; margin-top: 14px; }
.profil-dugmeler .dugme { flex: 1; }

/* --- defter --- */

.profil-baslik {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profil-baslik h3 { margin: 0; }

.defter { display: flex; flex-direction: column; gap: 6px; }

.defter-satir {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey);
  font-size: 13.5px;
}

.defter-satir.bekleyen { opacity: 0.6; }

.defter-sol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.defter-tur { color: var(--metin); }

.defter-kaynak,
.defter-zaman,
.defter-bakiye {
  color: var(--metin-soluk);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.defter-orta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.defter-bakiye { font-variant-numeric: tabular-nums; }

.defter-tutar {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  white-space: nowrap;
}

.defter-tutar.kazanc { color: var(--yesil); }
.defter-tutar.kayip { color: var(--kirmizi-acik); }
.defter-tutar.esit { color: var(--metin-soluk); }

.sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.sayfalama:empty { display: none; }

/* --- oyun geçmişi --- */

.oyun-gecmisi { display: flex; flex-direction: column; gap: 6px; }

.oyun-satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey);
  font-size: 13.5px;
}

.oyun-rozet {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--kenar-orta);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--metin-orta);
  white-space: nowrap;
}

.oyun-rozet.blackjack { border-color: var(--kenar-parlak); color: var(--altin-acik); }

.oyun-orta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oyun-orta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oyun-kartlar { color: var(--metin-soluk); font-size: 12px; letter-spacing: 0.08em; }
.oyun-bahis { color: var(--metin-soluk); font-variant-numeric: tabular-nums; white-space: nowrap; }

.oyun-net {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 78px;
  text-align: right;
}

.oyun-net.kazanc { color: var(--yesil); }
.oyun-net.kayip { color: var(--kirmizi-acik); }
.oyun-net.esit { color: var(--metin-soluk); }

@media (max-width: 900px) {
  .profil-duzen { grid-template-columns: minmax(0, 1fr); }

  .defter-satir { grid-template-columns: minmax(0, 1fr) auto; }
  .defter-orta { grid-column: 1 / -1; flex-direction: row; gap: 10px; }

  .oyun-satir { grid-template-columns: auto minmax(0, 1fr) auto; }
  .oyun-bahis { grid-column: 2; font-size: 12px; }
}

/* ==========================================================================
   BLACKJACK — SONUÇ GÖSTERİSİ
   ==========================================================================

   El bitince her oyuncunun kartları masadaki YERİNDEN kalkıp ekrana doğru
   yaklaşıyor. Üç sonucun üç ayrı hareketi var; bu, isteğin özüydü:

     KAZANÇ    kartlar yelpaze gibi açılır, hafifçe YÜKSELİR, altın
               parıltı büyür, yazı tokmak gibi oturur
     KAYIP     kartlar blok hâlinde gelir, rengi SOLAR, öne devrilir ve
               aşağı ÇÖKER; yazı yukarıdan ağır ağır düşer
     BERABERE  kartlar gelir, kısa durur ve geldiği yere GERİ döner

   Başlangıç noktası (`--bas-x`, `--bas-y`) ve başlangıç ölçeği
   (`--bas-olcek`) JavaScript'ten geliyor: koltuğun masadaki gerçek
   koordinatı. Böylece kartlar "bir yerden" değil, KENDİ yerinden geliyor.

   Süre: kişi başı 4 sn (sunucudaki `gosteriKisiMs` ile aynı). İkisi
   ayrışırsa animasyon yarıda kesilir; bu yüzden değer tek yerde,
   `--bjg-sure` içinde.
   ========================================================================== */

.bjg {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  --bjg-sure: 4000ms;
  /* Geç başlanan gösteride animasyonu ortasından başlatmak için NEGATİF
     gecikme. Sekme arka plandayken tarayıcı zamanlayıcıları kısıyor;
     telafi etmezsek kart tam uçmaya başlarken dilim bitiyor ve ekranda
     yarım kalmış bir hareket görünüyor ("animasyon kırık düşüyor"). */
  --bjg-kayma: 0ms;
  --bas-x: 0px;
  --bas-y: 0px;
  --bas-olcek: 0.45;
}

.bjg[hidden] { display: none; }

/* Masa arkada kalsın ama kartlar okunsun diye koyulaştırma. */
/* Karartma DÜZ, yalnızca hafif bir renk tonu var.
   İlk denemede yalnızca kenarları karartan bir radyal geçiş kullanmıştım:
   masanın ortasında krupiye fotoğrafı parlak kaldığı için "KAZANDIN"
   yazısı ve tutar okunmuyordu. Gösterinin işi o anda tek bir şeyi
   okutmak; arka planın görünmesi ikinci sırada. */
.bjg-fon {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(7, 6, 4, 0.62) 0%, rgba(4, 3, 2, 0.88) 70%);
  animation: bjg-fon-ac 420ms ease both;
}

.bjg.kazanc .bjg-fon {
  background:
    radial-gradient(circle at 50% 44%, rgba(46, 36, 14, 0.72) 0%, rgba(5, 4, 3, 0.9) 70%);
}

.bjg.kayip .bjg-fon {
  background:
    radial-gradient(circle at 50% 44%, rgba(38, 14, 14, 0.74) 0%, rgba(4, 3, 2, 0.92) 70%);
}

@keyframes bjg-fon-ac { from { opacity: 0; } to { opacity: 1; } }

/* --- sahne: kartlar + yazı, birlikte hareket eder --- */

.bjg-sahne {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 62%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.bjg-kartlar {
  position: relative;      /* parıltı halkası (::before) buna göre konumlanır */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Kartlar üst üste binsin: negatif boşluk. */
  gap: 0;
}

.bjg-kart {
  width: 25%;
  max-width: 132px;
  margin: 0 -3.6%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 100%;
}

/* Görsel henüz gelmediyse kart BOŞ bir dikdörtgen olarak uçmasın:
   arka yüz rengi bir yer tutucu. */
.bjg-kart {
  background: linear-gradient(160deg, #2a2118, #17120c);
  aspect-ratio: 200 / 280;
}

.bjg-kart img { display: block; width: 100%; height: auto; }

/* --- yazı --- */

/* Yazının arkasında yumuşak bir plaka. Kartlar masanın desenli
   çuhasının üstüne düştüğünde tutar satırı kayboluyordu. */
.bjg-yazi {
  text-align: center;
  padding: 10px 26px 12px;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 50%, rgba(5, 4, 3, 0.86) 0%, rgba(5, 4, 3, 0) 78%);
}

.bjg-ad {
  font-size: clamp(11px, 1.5vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-orta);
}

.bjg-baslik {
  font-family: var(--yazi-baslik);
  font-size: clamp(26px, 5.4vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  margin: 2px 0;
}

.bjg-tutar {
  font-size: clamp(14px, 2.2vw, 20px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.bjg-alt {
  margin-top: 4px;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}

.bjg.kazanc .bjg-baslik {
  color: var(--altin-parlak);
  text-shadow: 0 0 26px rgba(232, 200, 132, 0.55), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.bjg.kazanc .bjg-tutar { color: var(--altin-acik); }

.bjg.kayip .bjg-baslik {
  color: #c98a8a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.bjg.kayip .bjg-tutar { color: var(--kirmizi-acik); }

.bjg.berabere .bjg-baslik { color: var(--metin); }
.bjg.berabere .bjg-tutar { color: var(--metin-orta); }

/* ==========================================================================
   HAREKET — üç sonuç, üç ayrı yol
   ========================================================================== */

/* --- KAZANÇ: gelir, yerleşir, yükselerek çıkar --- */

.bjg.kazanc .bjg-sahne {
  animation: bjg-kazanc-gelis var(--bjg-sure) cubic-bezier(0.16, 0.9, 0.28, 1) both;
  animation-delay: var(--bjg-kayma);
}

@keyframes bjg-kazanc-gelis {
  0% {
    transform: translate(calc(-50% + var(--bas-x)), calc(-50% + var(--bas-y)))
               scale(var(--bas-olcek));
    opacity: 0;
  }
  12% { opacity: 1; }
  38% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 1;
  }
  50% { transform: translate(-50%, -50%) scale(1); }
  82% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% {
    transform: translate(-50%, calc(-50% - 34px)) scale(1.02);
    opacity: 0;
  }
}

/* Yelpaze: her kart kendi açısına açılır. `--i` ortadan uzaklık. */
.bjg.kazanc .bjg-kart {
  animation: bjg-yelpaze 900ms 300ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes bjg-yelpaze {
  from { transform: rotate(0deg) translateY(0); }
  to { transform: rotate(calc(var(--i) * 7deg)) translateY(calc(var(--i) * var(--i) * 1.4px)); }
}

/* Yazı tokmak gibi oturur. */
.bjg.kazanc .bjg-baslik {
  animation: bjg-tokmak 620ms 380ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}

@keyframes bjg-tokmak {
  from { transform: scale(1.75); opacity: 0; filter: blur(6px); }
  60% { transform: scale(0.97); opacity: 1; filter: blur(0); }
  to { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* Altın parıltı: kartların arkasından büyüyerek söner. */
.bjg.kazanc .bjg-kartlar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 200, 132, 0.5) 0%, rgba(232, 200, 132, 0) 70%);
  transform: translate(-50%, -50%);
  animation: bjg-parilti 1400ms 340ms ease-out both;
  pointer-events: none;
}

@keyframes bjg-parilti {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  35% { opacity: 1; }
  to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

/* --- KAYIP: ağır gelir, solar, öne devrilip aşağı çöker --- */

.bjg.kayip .bjg-sahne {
  animation: bjg-kayip-gelis var(--bjg-sure) cubic-bezier(0.3, 0.05, 0.4, 1) both;
  animation-delay: var(--bjg-kayma);
}

@keyframes bjg-kayip-gelis {
  0% {
    transform: translate(calc(-50% + var(--bas-x)), calc(-50% + var(--bas-y)))
               scale(var(--bas-olcek));
    opacity: 0;
  }
  15% { opacity: 1; }
  /* Aşırıya kaçmadan gelir — kazançtaki gibi taşma yok. */
  44% { transform: translate(-50%, -50%) scale(0.97); opacity: 1; }
  78% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% {
    transform: translate(-50%, calc(-50% + 46px)) scale(0.88) rotate(2.5deg);
    opacity: 0;
  }
}

/* Kartlar blok hâlinde kalır ve rengi çekilir. */
.bjg.kayip .bjg-kartlar {
  animation: bjg-solma 1500ms 500ms ease-in both;
}

@keyframes bjg-solma {
  from { filter: grayscale(0) brightness(1); }
  to { filter: grayscale(0.85) brightness(0.62); }
}

.bjg.kayip .bjg-kart {
  animation: bjg-devril 1100ms 420ms cubic-bezier(0.4, 0, 0.5, 1) both;
}

@keyframes bjg-devril {
  from { transform: rotate(0deg); }
  to { transform: rotate(calc(var(--i) * 2deg)) translateY(5px); }
}

/* Yazı YUKARIDAN düşer ve kısa bir sarsıntıyla durur. */
.bjg.kayip .bjg-baslik {
  animation: bjg-dusus 700ms 300ms cubic-bezier(0.55, 0, 0.3, 1) both;
}

@keyframes bjg-dusus {
  from { transform: translateY(-44px); opacity: 0; }
  70% { transform: translateY(4px); opacity: 1; }
  85% { transform: translateY(-2px); }
  to { transform: translateY(0); opacity: 1; }
}

/* --- BERABERE: gelir, durur, geldiği yere geri döner --- */

.bjg.berabere .bjg-sahne {
  animation: bjg-berabere var(--bjg-sure) cubic-bezier(0.4, 0, 0.3, 1) both;
  animation-delay: var(--bjg-kayma);
}

@keyframes bjg-berabere {
  0% {
    transform: translate(calc(-50% + var(--bas-x)), calc(-50% + var(--bas-y)))
               scale(var(--bas-olcek));
    opacity: 0;
  }
  15% { opacity: 1; }
  38%, 68% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--bas-x)), calc(-50% + var(--bas-y)))
               scale(var(--bas-olcek));
    opacity: 0;
  }
}

.bjg.berabere .bjg-baslik {
  animation: bjg-yumusak 600ms 340ms ease both;
}

@keyframes bjg-yumusak {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

/* --- sıra göstergesi ve geç düğmesi --- */

.bjg-sira {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}

.bjg-nokta {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(236, 227, 210, 0.22);
}

.bjg-nokta.gecti { background: rgba(236, 227, 210, 0.45); }

.bjg-nokta.aktif {
  background: var(--altin-acik);
  box-shadow: 0 0 10px rgba(232, 200, 132, 0.7);
}

/* --- krupiye devri --- */

.bjg-krupiye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  animation: bjg-krupiye-gelis 700ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes bjg-krupiye-gelis {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.bjg-krupiye-isim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--yazi-baslik);
  font-size: clamp(20px, 3.6vw, 34px);
  letter-spacing: 0.1em;
  margin: 6px 0 4px;
}

.bjg-krupiye-isim .giden {
  color: var(--metin-soluk);
  animation: bjg-giden 1400ms 200ms ease both;
}

@keyframes bjg-giden {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0.25; transform: translateX(-10px); }
}

.bjg-krupiye-isim .ok { color: var(--altin-koyu); font-size: 0.7em; }

.bjg-krupiye-isim .gelen {
  color: var(--altin-acik);
  animation: bjg-gelen 1400ms 200ms ease both;
}

@keyframes bjg-gelen {
  from { opacity: 0.3; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   HAREKET AZALTMA

   Dört oyunculu masada bu, arka arkaya on altı saniyelik hareket demek.
   Baş dönmesi yaşayan biri için bu bir tercih meselesi değil: kart uçmuyor,
   sonuç olduğu yerde beliriyor.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bjg .bjg-sahne,
  .bjg .bjg-kart,
  .bjg .bjg-kartlar,
  .bjg .bjg-baslik,
  .bjg .bjg-krupiye,
  .bjg .bjg-krupiye-isim .giden,
  .bjg .bjg-krupiye-isim .gelen,
  .bjg .bjg-fon {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }

  .bjg .bjg-kart { transform: none !important; }
  .bjg .bjg-baslik { transform: none !important; }
  .bjg .bjg-kartlar::before { display: none; }
  .bjg .bjg-krupiye-isim .giden { opacity: 0.35; }

  /* Hareket yerine tek bir yumuşak beliriş. */
  .bjg { animation: bjg-fon-ac 200ms ease both; }
}

/* `.sakin`: JavaScript de aynı tercihi görüyor ve sınıf ekliyor —
   CSS medya sorgusu desteklenmeyen bir tarayıcıda da kural işlesin diye. */
.bjg.sakin .bjg-sahne,
.bjg.sakin .bjg-kart,
.bjg.sakin .bjg-kartlar,
.bjg.sakin .bjg-baslik { animation: none; }

.bjg.sakin .bjg-sahne { transform: translate(-50%, -50%); opacity: 1; }
.bjg.sakin .bjg-kartlar::before { display: none; }

/* --- dar ekran --- */

/* Dar ekranda masa kutusu uzuyor (fotoğraf + altında koltuk ızgarası).
   Sahne dikey ortada kalırsa ızgaranın içine düşüyor; fotoğraf bölgesine
   yakın tutuyoruz. */
@media (max-width: 900px) {
  .bjg-sahne { top: 30%; }
}

@media (max-width: 720px) {
  .bjg-sahne { width: 88%; gap: 12px; }
  .bjg-kart { max-width: 74px; }
  .bjg-yazi { padding: 8px 16px 10px; }
}

/* Sunucudan onay gelmezken çarpan donuyor (bkz. crash.js anlikCarpan).
   Donmuş sayının normal görünmesi, olmayan bir kazancı vaat etmek olurdu. */
.carpan-yazi.bekliyor {
  color: var(--metin-soluk);
  animation: carpan-nefes 1.6s ease-in-out infinite;
}

@keyframes carpan-nefes {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

.carpan-uyari {
  color: var(--uyari);
  font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
  .carpan-yazi.bekliyor { animation: none; opacity: 0.65; }
}

/* ==========================================================================
   BU TURDAKİ BAHİSLER — tutar ve sonuç sütunlu
   ==========================================================================
   Üç sütun: kim, ne kadar, ne oldu. Tutarlar sayısal hizada (tabular-nums)
   çünkü alt alta okunan sayılar aynı genişlikte olmalı; aksi hâlde göz
   büyüklükleri karşılaştıramıyor.
   ========================================================================== */

.canli-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.canli-tutar {
  color: var(--metin-orta);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.canli-satir.benim .canli-tutar { color: var(--altin-acik); }

.canli-sonuc {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.canli-net { font-size: 12px; opacity: 0.85; }

.canli-satir.kaybetti { opacity: 0.6; }
.canli-sonuc.kaybetti { color: var(--kirmizi-acik); }
.canli-sonuc.cekti { color: var(--yesil); }

.canli-bekliyor {
  color: var(--metin-soluk);
  font-size: 12.5px;
  animation: canli-nefes 1.8s ease-in-out infinite;
}

@keyframes canli-nefes {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.canli-oto {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  border: 1px solid var(--kenar);
  border-radius: 999px;
  padding: 1px 6px;
}

/* Tur özeti: hacim ve sonuç tek satırda. */
.canli-ozet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kenar);
  font-size: 12px;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
}

.canli-ozet .artida { color: var(--yesil); }
.canli-ozet .eksida { color: var(--altin-acik); }

@media (prefers-reduced-motion: reduce) {
  .canli-bekliyor { animation: none; opacity: 0.7; }
}

/* ==========================================================================
   DOSYA YÜKLEME — yönetim paneli ve içerik sayfaları
   ==========================================================================

   Bu bölüm iki iş yapıyor:
     1. Yönetim panelindeki seçici, ilerleme çubuğu ve küçük önizlemeler
     2. Duyuru/medya sayfalarında yüklenen dosyaların gösterimi

   TASARIM KARARI: ÖNİZLEMELER SABİT ORANLI

     Yüklenen görsellerin oranı belli değil; dikey bir telefon fotoğrafı da
     geniş bir ekran görüntüsü de gelebilir. Kartlar sabit oranlı ve
     `object-fit: cover` ile kırpılıyor — aksi hâlde tek bir dikey görsel
     ızgarayı boyuna esnetip düzeni bozardı.
   ========================================================================== */

.pencere-genis { width: min(880px, 100%); }
.pencere-genis .arac-cubugu { padding-left: 0; padding-right: 0; }

/* --- ızgara --- */

.yuk-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
}

.yuk-kart {
  border: 1px solid var(--kenar);
  border-radius: 10px;
  overflow: hidden;
  background: var(--yuzey);
  transition: border-color var(--gecis);
}
.yuk-kart.yuk-secili { border-color: var(--altin); box-shadow: 0 0 0 1px var(--altin) inset; }

.yuk-kart-sec {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--zemin-2);
}

.yuk-onizleme {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--zemin-2);
}
.yuk-onizleme-video {
  display: flex; align-items: center; justify-content: center;
  color: var(--altin-acik); font-size: 28px;
  background: linear-gradient(140deg, var(--yuzey-2), var(--zemin-2));
}

.yuk-kart-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 6px 8px;
}
.yuk-kart-bilgi { font-size: 11.5px; color: var(--metin-soluk); }
.yuk-kart-sil {
  border: 0; background: none; cursor: pointer;
  color: var(--metin-soluk); font-size: 13px; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
}
.yuk-kart-sil:hover { color: var(--kirmizi-acik); background: rgba(163, 43, 43, 0.14); }

/* --- ilerleme çubuğu --- */

.yuk-listesi { display: grid; gap: 6px; }
.yuk-listesi:not(:empty) { padding: 10px 16px; }

.yuk-satiri {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--metin-orta);
}
.yuk-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yuk-cubuk {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(201, 162, 77, 0.14);
}
.yuk-dolgu {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--altin-koyu), var(--altin-acik));
  transition: width 140ms linear;
}
.yuk-yazi { font-variant-numeric: tabular-nums; color: var(--metin-soluk); }
.yuk-tamam .yuk-dolgu { background: var(--yesil); }
.yuk-hata .yuk-dolgu { background: var(--kirmizi); }
.yuk-hata .yuk-yazi { color: var(--kirmizi-acik); }

/* --- form içi dosya alanları --- */

.ek-tekli { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.ek-tekli-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.ek-onizleme {
  width: 132px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--kenar); background: var(--zemin-2);
}
.ek-bos {
  width: 132px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--kenar-orta); border-radius: 8px;
  color: var(--metin-soluk); font-size: 12px;
}

.ek-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px; margin-bottom: 10px;
}
.ek-kart { position: relative; }
.ek-kart .ek-onizleme { width: 100%; }
.ek-kart-dugmeler {
  position: absolute; inset-inline: 4px; bottom: 4px;
  display: flex; gap: 4px; justify-content: center;
}
.ek-mini {
  border: 1px solid var(--kenar-orta); border-radius: 5px; cursor: pointer;
  background: rgba(7, 6, 4, 0.82); color: var(--metin);
  font-size: 11px; line-height: 1; padding: 4px 6px;
}
.ek-mini:disabled { opacity: 0.35; cursor: default; }
.ek-mini-sil:hover:not(:disabled) { color: var(--kirmizi-acik); border-color: var(--kirmizi); }

/* --- içerik sayfalarındaki gösterim --- */

.medya-dosya {
  display: block; width: 100%; height: auto;
  border-radius: var(--yuvarlak); background: var(--zemin-2);
}
.medya-video { aspect-ratio: 16 / 9; object-fit: contain; }

.yazi-kapak { margin: 0 0 22px; }
.yazi-kapak .medya-dosya { border: 1px solid var(--kenar); }

.ek-galeri {
  display: grid; gap: 14px; margin: 26px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ek-galeri-tek { grid-template-columns: 1fr; }
.ek-oge { margin: 0; }
.ek-oge figcaption {
  margin-top: 6px; font-size: 12.5px; color: var(--metin-soluk);
}

.video-kutu-yerel { background: var(--zemin-2); }
.video-kutu-yerel .medya-dosya { border-radius: 0; }

@media (max-width: 560px) {
  .yuk-izgara { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .yuk-satiri { grid-template-columns: minmax(0, 1fr) 70px auto; }
}

/* ==========================================================================
   OYUN SESİ — köşedeki düğme ve gizli oynatıcı
   ========================================================================== */

.ses-kutusu {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 999px;
  border: 1px solid var(--kenar);
  background: rgba(13, 11, 8, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: var(--golge-2, 0 6px 20px rgba(0,0,0,0.4));
}
.ses-kutusu.ses-kutusu-acik { border-color: var(--kenar-orta); }

/* Kaydırak ses kapalıyken soluk: kapalı sesin seviyesini ayarlamak
   anlamsız, ama gizlemek de kutuyu zıplatırdı. */
.ses-kutu-seviye { display: flex; align-items: center; gap: 6px; opacity: 0.45; transition: opacity var(--gecis); }
.ses-kutusu-acik .ses-kutu-seviye { opacity: 1; }
.ses-kutu-kaydirak { width: 92px; }
.ses-yuzde {
  font-size: 11.5px; color: var(--metin-soluk);
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
}

.ses-dugmesi {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--kenar-orta);
  background: rgba(7, 6, 4, 0.6);
  color: var(--metin-orta); font-size: 12.5px;
}
.ses-dugmesi:hover { color: var(--metin); border-color: var(--kenar-parlak); }
.ses-dugmesi.ses-acik { color: var(--altin-acik); border-color: var(--altin); }

/* YouTube oynatıcısı sayfada GÖRÜNMÜYOR ama `display:none` olamaz:
   gizlenen bir iframe bazı tarayıcılarda hiç çalmıyor. Bu yüzden
   ekran dışına alınıyor. */
.ses-cerceve {
  position: fixed; width: 1px; height: 1px;
  left: -9999px; top: -9999px; border: 0; opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .ses-kutusu { right: 10px; bottom: 10px; padding: 5px 7px; gap: 6px; }
  .ses-dugmesi { padding: 6px 9px; font-size: 12px; }
  .ses-kutu-kaydirak { width: 64px; }
  .ses-yuzde { display: none; }
}

/* --- yönetim panelindeki ses ayarları --- */

.ses-bolum-basi { font-family: var(--yazi-baslik); font-size: 19px; margin: 6px 0 2px; }
.ses-baslik { font-size: 14px; color: var(--altin-acik); margin-bottom: 8px; letter-spacing: 0.04em; }
.ses-ayrac { border: 0; border-top: 1px solid var(--kenar); margin: 18px 0; }

.ses-satir {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 62px;
  gap: 10px; align-items: center; margin: 10px 0;
}
.ses-satir label { margin: 0; font-size: 13px; color: var(--metin-orta); }
.ses-deger { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--metin-soluk); text-align: right; }
.ses-kaydirak { width: 100%; accent-color: var(--altin); }

@media (max-width: 560px) {
  .ses-satir { grid-template-columns: minmax(0, 1fr) 54px; }
  .ses-satir label { grid-column: 1 / -1; }
}

/* ==========================================================================
   KULLANIM KOŞULLARI — onay penceresi ve sayfa
   ========================================================================== */

.perde-kosul { align-items: flex-start; padding: 3vh 12px; overflow-y: auto; }

.pencere-kosul { width: min(860px, 100%); max-height: 94vh; display: flex; flex-direction: column; }
.kosul-baslik { font-family: var(--yazi-baslik); font-size: 21px; line-height: 1.3; margin-bottom: 12px; }

/* Metin kutusu: kaydırılabilir ve sona inildiği ölçülebilir olmalı. */
.kosul-govde {
  flex: 1 1 auto; min-height: 220px; max-height: 46vh;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--kenar); border-radius: 10px;
  background: rgba(7, 6, 4, 0.55);
  font-size: 13.5px; line-height: 1.62; color: var(--metin-orta);
}
.kosul-govde.kosul-okundu { border-color: var(--altin-koyu); }
.kosul-ustbilgi { color: var(--metin-soluk); font-size: 12.5px; margin-bottom: 12px; }
.kosul-madde-basi {
  font-family: var(--yazi-baslik); font-size: 15px; color: var(--altin-acik);
  margin: 18px 0 6px; letter-spacing: 0.02em;
}
.kosul-paragraf { margin: 0 0 8px; }
.kosul-liste { margin: 4px 0 10px 18px; padding: 0; }
.kosul-liste li { margin: 3px 0; }
.kosul-son-isaret { height: 1px; }

.kosul-kutular { display: grid; gap: 7px; margin-bottom: 10px; }
.kosul-anabeyan {
  font-size: 13px; color: var(--metin); margin-bottom: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(201, 162, 77, 0.07); border: 1px solid var(--kenar);
}
.kosul-kutu {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--metin-orta); cursor: pointer;
}
.kosul-kutu input { margin-top: 3px; accent-color: var(--altin); flex: none; }
.kosul-kutu input:disabled { opacity: 0.4; cursor: not-allowed; }

.kosul-uyari { font-size: 12.5px; color: var(--uyari); min-height: 18px; margin-bottom: 6px; }
.kosul-kabul { font-size: 12.5px; letter-spacing: 0.03em; }
.kosul-kapanis { font-size: 11.5px; color: var(--metin-soluk); margin-top: 10px; }

/* Ayrı sayfa: kutu yok, metin akıyor. */
.kosul-sayfa { font-size: 14px; line-height: 1.68; color: var(--metin-orta); }
.kosul-sayfa .kosul-baslik { font-size: 22px; margin-bottom: 16px; }

@media (max-width: 560px) {
  .pencere-kosul { padding: 16px; }
  .kosul-govde { max-height: 40vh; font-size: 13px; }
  .pencere-kosul .pencere-dugmeler { flex-direction: column-reverse; }
  .pencere-kosul .pencere-dugmeler .dugme { width: 100%; }
}

/* Masa paneli uyarısı — "bu eli kaçırdın" gibi geçici bilgiler. */
.bj-uyari {
  display: grid; gap: 4px; margin-bottom: 12px;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid rgba(217, 164, 65, 0.35);
  background: rgba(217, 164, 65, 0.08);
  font-size: 12.5px; color: var(--metin-orta);
}
.bj-uyari strong { color: var(--uyari); font-size: 13px; }

/* Ses dosyaları: kırık görsel yerine gerçek oynatıcı. */
.medya-ses { width: 100%; height: 42px; }
.ek-onizleme-ses { width: 100%; height: 40px; aspect-ratio: auto; border: 0; background: none; }
.yuk-onizleme-ses {
  display: flex; align-items: center; justify-content: center;
  color: var(--altin-acik); font-size: 26px;
  background: linear-gradient(140deg, var(--yuzey-3), var(--zemin-2));
}

/* ==========================================================================
   OTURUM ZAMAN AŞIMI UYARISI
   ==========================================================================
   Ekranın altında duruyor, sayfanın üstünü kapatmıyor: kullanıcı ne
   yaptığını görmeye devam ediyor. Odak çalan tam ekran bir pencere,
   oyunun ortasında yapılabilecek en kötü şeydi. */

.oturum-uyari {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 9000;
  width: min(420px, calc(100vw - 32px));
}

.oturum-uyari-ic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--yuvarlak);
  background: var(--yuzey-2);
  border: 1px solid var(--altin);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
}

.oturum-uyari-ic strong {
  font-family: var(--yazi-baslik, inherit);
  letter-spacing: 0.04em;
  color: var(--altin-acik);
}

.oturum-uyari-ic .panel-metin { margin: 0; font-size: 13.5px; }
.oturum-uyari-ic .dugme { align-self: flex-start; }

/* ==========================================================================
   MINES
   ==========================================================================

   TASARIM KARARI

     Tahta görseli (tabla.webp) ARKA PLANDA duruyor; 25 hücre onun üstünde
     CSS grid ile. Hücreleri mutlak koordinatla tek tek yerleştirmek
     görselin oranı değiştiği anda her şeyi bozardı. Grid, tabla ile aynı
     kareyi paylaşıyor ve her ekran boyutunda örtüşüyor.

     Görsel HİÇ YOKSA da oyun çalışıyor: `.mn-tabla` kendi degrade zeminini
     çiziyor. Varlık eksikliği oyunu durdurmuyor.

   ANİMASYON

     Yalnızca `transform` ve `opacity` — ikisi de GPU'da, düzen hesabı
     tetiklemiyor. `prefers-reduced-motion` JavaScript tarafında da
     kontrol ediliyor (bkz. oyunSesi.js `animasyonAyari`).
   ========================================================================== */

.mn-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}

.mn-yan { display: flex; flex-direction: column; gap: 16px; }

/* --- tahta --- */

.mn-tahta-kap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border-radius: var(--yuvarlak);
  overflow: hidden;
}

.mn-tabla {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* Görsel yoksa görünen zemin. */
  background-color: var(--yuzey-2);
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--yuvarlak);
}

.mn-tabla[data-var] { border-color: transparent; background-color: transparent; }

.mn-izgara {
  position: absolute;
  /* ÖLÇÜLMÜŞ DEĞERLER — tahmin değil.
     tabla.webp'teki koyu soketlerin piksel konumları ölçüldü:
       yatay  %9.09 – %90.91   (adım %16.36)
       dikey  %10.82 – %89.82
     İlk yazımda dört kenara da %7.5 verilmişti ve hücreler soketlerin
     ÜSTÜNE kayıyordu; mayınlar halkaların içinde değil, kenarında
     duruyordu. */
  inset: 10.4% 8.8% 9.9% 8.8%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0.95%;
}

/* --- hücre --- */

.mn-hucre {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

.mn-hucre:disabled { cursor: default; }

.mn-hucre-ic {
  position: absolute;
  /* Mayın görseli soketi dolduruyor ama dikenler altın halkanın İÇİNDE
     kalıyor: %1'de komşu hücrelere taşıyordu, %6'da kaybolacak kadar
     küçülüyordu. */
  inset: 5%;
  border-radius: 50%;
  background-image: var(--mayin-saglam, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Görsel yokken: hücre yine de görünür ve tıklanabilir olmalı. */
.mn-tahta-kap:not([style*="--mayin-saglam"]) .mn-hucre-ic {
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(160deg, #241d18, #0d0a08);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.28);
}

.mn-hucre:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); }
.mn-hucre:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Açılmış güvenli hücre: mayın görseli kalkıyor, altın soket kalıyor. */
.mn-hucre.acik .mn-hucre-ic {
  opacity: 0;
  transform: scale(0.72);
}

.mn-hucre.acik::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 2px solid var(--altin);
  background: radial-gradient(circle, rgba(201, 162, 39, 0.22), transparent 70%);
  box-shadow: 0 0 14px rgba(201, 162, 39, 0.35);
}

/* Patlamış mayın */
.mn-hucre.patlak .mn-hucre-ic {
  background-image: var(--mayin-patlak, var(--mayin-saglam, none));
  transform: scale(1.18);
  filter: drop-shadow(0 0 12px rgba(220, 40, 40, 0.75));
}

/* Oyun bitince açığa çıkan diğer mayınlar: sönük, dikkat çekmesin. */
.mn-hucre.mayin .mn-hucre-ic { opacity: 0.42; filter: saturate(0.45); }

/* --- animasyonlar --- */

@keyframes mnGuvenli {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.mn-canli-guvenli { animation: mnGuvenli 420ms ease-out; }

@keyframes mnPatlama {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.32) rotate(-3deg); }
  36%  { transform: scale(0.94) rotate(2deg); }
  60%  { transform: scale(1.12) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
.mn-canli-patlama { animation: mnPatlama 640ms cubic-bezier(.2,.8,.2,1); }

/* --- sonuç perdesi --- */

.mn-perde {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border-radius: var(--yuvarlak);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 3;
}

.mn-perde strong {
  font-family: var(--yazi-baslik, inherit);
  font-size: clamp(30px, 7vw, 58px);
  letter-spacing: 0.1em;
}
.mn-perde span { font-size: 15px; color: var(--metin-orta); }

.mn-perde.kazanc { background: rgba(10, 8, 6, 0.55); }
.mn-perde.kazanc strong { color: var(--altin-acik); text-shadow: 0 0 26px rgba(201, 162, 39, 0.6); }
.mn-perde.temiz  { background: rgba(10, 8, 6, 0.62); }
.mn-perde.temiz strong { color: var(--altin-acik); text-shadow: 0 0 34px rgba(201, 162, 39, 0.8); }
.mn-perde.kayip  { background: rgba(28, 6, 8, 0.55); }
.mn-perde.kayip strong { color: var(--kirmizi-acik); text-shadow: 0 0 24px rgba(200, 40, 40, 0.5); }

@keyframes mnPerdeGir {
  0%   { opacity: 0; transform: scale(0.9); }
  30%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.mn-perde-gir { animation: mnPerdeGir 520ms cubic-bezier(.2,.8,.2,1); }

/* --- durum ve panel --- */

.mn-durum {
  margin: 12px 0 0;
  text-align: center;
  color: var(--metin-orta);
  font-size: 14px;
}

.mn-alt-panel { margin-top: 18px; }
.mn-kucuk-not { margin: 0 0 8px; }

.mn-bakiye {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--kenar);
}
.mn-bakiye strong { font-size: 19px; color: var(--altin-acik); font-variant-numeric: tabular-nums; }

.mn-satir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-variant-numeric: tabular-nums;
}
.mn-satir.mn-vurgu strong { font-size: 22px; color: var(--altin-acik); }
.mn-satir.mn-sonraki strong { color: var(--metin-orta); }
.mn-satir.mn-odeme strong { font-size: 18px; color: var(--yesil); }

.mn-bahis-giris { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; }
.mn-bahis-giris .girdi { flex: 1; }
.mn-birim { color: var(--metin-orta); font-size: 13px; }

.mn-hizli { display: flex; gap: 6px; margin-bottom: 12px; }
.mn-hizli-dugme {
  flex: 1;
  padding: 6px 0;
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 12.5px;
  cursor: pointer;
}
.mn-hizli-dugme:hover { border-color: var(--altin); color: var(--altin-acik); }

.mn-etiket { margin: 10px 0 6px; font-size: 13px; color: var(--metin-orta); }

.mn-mayin-secim {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.mn-mayin-dugme {
  padding: 8px 0;
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.mn-mayin-dugme:hover { border-color: var(--altin); color: var(--altin-acik); }
.mn-mayin-dugme.secili {
  border-color: var(--altin);
  background: rgba(201, 162, 39, 0.16);
  color: var(--altin-acik);
}

.mn-onizleme { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.mn-onizleme-cip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--yuzey-2);
  border: 1px solid var(--kenar);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.mn-onizleme-cip em { color: var(--metin-soluk, #7b7469); font-style: normal; }
.mn-onizleme-cip b { color: var(--altin-acik); }

.mn-oyna, .mn-al { width: 100%; margin-top: 6px; }
.mn-al { font-variant-numeric: tabular-nums; }

.mn-iptal {
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 12.5px;
  cursor: pointer;
}
.mn-iptal:hover { border-color: var(--kirmizi-acik); color: var(--kirmizi-acik); }

.mn-ipucu { margin-top: 10px; }

.mn-uyari, .mn-sonuc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey-2);
  border: 1px solid var(--kenar-parlak);
  margin-bottom: 12px;
}
.mn-sonuc.kazanc { border-color: var(--yesil); }
.mn-sonuc.kayip { border-color: var(--kirmizi-acik); }
.mn-sonuc strong { color: var(--altin-acik); }
.mn-sonuc.kayip strong { color: var(--kirmizi-acik); }

/* --- listeler --- */

.mn-kazananlar, .mn-gecmis { display: flex; flex-direction: column; gap: 5px; }

.mn-kazanan, .mn-gecmis-satir {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 6px 9px;
  border-radius: var(--yuvarlak-kucuk);
  background: var(--yuzey-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.mn-kazanan { grid-template-columns: 1fr auto auto; }
.mn-kazanan strong, .mn-gecmis-satir strong { color: var(--altin-acik); }
.mn-gecmis-satir.kazanc strong { color: var(--yesil); }
.mn-gecmis-satir.kayip strong { color: var(--kirmizi-acik); }
.mn-gecmis-satir.esit strong { color: var(--metin-orta); }
.mn-gecmis-mayin, .mn-gecmis-guvenli, .mn-gecmis-carpan, .mn-kazanan-mayin, .mn-kazanan-carpan {
  color: var(--metin-orta);
}

/* --- adillik --- */

.mn-adillik { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mn-adillik-satir { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mn-kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--altin-acik);
  word-break: break-all;
}
.mn-kod.tam { font-size: 10.5px; }
.mn-adillik-dugme {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 12.5px;
  cursor: pointer;
}
.mn-adillik-dugme:hover { border-color: var(--altin); color: var(--altin-acik); }
.mn-adillik-sonuc {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--kenar);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mn-dogrulama { margin: 4px 0 0; font-size: 13px; }
.mn-dogrulama.gecerli { color: var(--yesil); }
.mn-dogrulama.gecersiz { color: var(--kirmizi-acik); }

/* --- mobil --- */

@media (max-width: 960px) {
  .mn-duzen { grid-template-columns: minmax(0, 1fr); }
  /* Panel tahtanın ALTINDA ama listeler daha altta: telefonda önce
     oyna, sonra oku. */
  .mn-yan { order: 2; }
}

@media (max-width: 560px) {
  .mn-tahta-kap { max-width: none; }
  .mn-izgara { inset: 10.4% 8.8% 9.9% 8.8%; gap: 1.2%; }
  .mn-mayin-secim { grid-template-columns: repeat(4, 1fr); }
  .mn-perde strong { font-size: clamp(26px, 11vw, 44px); }
}

/* Hareketi azaltma tercihi: büyük animasyonlar kapanıyor.
   JS tarafında da kontrol ediliyor; bu, CSS-only yedek. */
@media (prefers-reduced-motion: reduce) {
  .mn-canli-guvenli, .mn-canli-patlama, .mn-perde-gir { animation: none; }
  .mn-hucre, .mn-hucre-ic { transition: none; }
}

/* --- yönetim: efekt yuvaları ve Mines ayarları --- */

.efekt-satir {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--kenar);
}
.efekt-satir .anahtar { flex: 1 1 200px; margin: 0; }
.efekt-dosya { font-size: 11.5px; color: var(--metin-soluk, #7b7469); }

.ses-ayrac-ince { border: 0; border-top: 1px solid var(--kenar); margin: 14px 0 10px; }

.mayin-secim-yonetim {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: 6px 0 12px;
}
.mayin-secim-yonetim button {
  padding: 6px 0;
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--yuvarlak-kucuk);
  background: transparent;
  color: var(--metin-orta);
  font-family: var(--yazi-govde);
  font-size: 12.5px;
  cursor: pointer;
}
.mayin-secim-yonetim button.secili {
  border-color: var(--altin);
  background: rgba(201, 162, 39, 0.18);
  color: var(--altin-acik);
}

/* ==========================================================================
   SAHNE ZEMİNİ — sayfanın arkasındaki büyük görsel
   ==========================================================================

   NEDEN AYRI BİR KATMAN

     `body::before` zaten var ve sayfa boyunca duran ışık degradesini
     çiziyor. O degradenin son katmanı OPAK:
       linear-gradient(180deg, #0b0806 0%, var(--zemin) 45%)
     Görseli doğrudan `body`'ye koysaydık bu opak katman görseli tamamen
     örterdi. Bu yüzden görsel bir katman ALTA (`::after`, z-index -3)
     giriyor, ve sahne sınıfı olan sayfalarda `::before` aynı degradeyi
     YARI SAYDAM tonlarla çiziyor: ışık aynı kalıyor, görsel görünüyor.

   OKUNABİLİRLİK ÖNCE GELİR

     Görsel dekor, metin içerik. Perde opaklığı üstte %72, altta %96:
     üst kısımda sahne görünüyor, panellerin ve tahtanın olduğu alt
     kısımda neredeyse düz zemin. Tahta ve paneller kendi opak
     zeminlerine sahip, yani kontrast oranları görselden ETKİLENMİYOR.

   GÖRSEL YOKSA

     `::after` boş kalıyor, `::before` yarı saydam perdesini düz `--zemin`
     üstüne çiziyor. Sayfa bugünkünden biraz daha açık bir siyah oluyor,
     başka hiçbir şey değişmiyor. Varlık eksikliği sayfayı bozmuyor.

   TELEFON

     Geniş görsel dikey ekranda zaten merkezinden kırpılırdı ve 154 KB'ı
     boşuna inerdi. 560px altında 64 KB'lık dikey kırpım iniyor.
     `background-attachment: fixed` KULLANILMIYOR — iOS Safari'de kaydırma
     sırasında titriyor; katman zaten `position: fixed`, aynı etkiyi
     titremeden veriyor.
   ========================================================================== */

.sahne {
  /* Sahne görseli olmayan bir sayfa bu sınıfı alırsa hiçbir şey bozulmuyor:
     değişken boş kalır, `::after` görselsiz kalır. */
  --sahne-gorsel: none;
  /* ÖLÇÜLMÜŞ DEĞER — göze göre değil.
     İlk denemede üst perde 0.72'ydi ve sayfa başlığındaki küçük
     "HAREM CASINO" etiketinin kontrastı 4.37:1'e düşüyordu (WCAG AA
     normal metin eşiği 4.5:1). Arkadaki ay ve fener ışıkları o bandın
     tam altına denk geliyor. 0.80'de aynı ölçüm 5.1:1 veriyor ve sahne
     hâlâ görünüyor. Ölçüm: scratchpad/sahne-kontrast.js. */
  --sahne-perde-ust: 0.80;
  --sahne-perde-alt: 0.96;
}

.sahne-mines {
  --sahne-gorsel: url('/varliklar/marka/casino/mines/arkaplan.webp');
}

.sahne::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: var(--sahne-gorsel, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--zemin);
  pointer-events: none;
}

/* Işık degradesi aynı, ama opak kapanış yerine saydam perde. */
.sahne::before {
  background:
    radial-gradient(1200px 620px at 18% -8%, rgba(201, 162, 77, 0.13), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(163, 43, 43, 0.07), transparent 58%),
    linear-gradient(
      180deg,
      rgba(11, 8, 6, var(--sahne-perde-ust)) 0%,
      rgba(7, 6, 4, calc((var(--sahne-perde-ust) + var(--sahne-perde-alt)) / 2)) 38%,
      rgba(7, 6, 4, var(--sahne-perde-alt)) 78%
    );
}

@media (max-width: 560px) {
  .sahne-mines { --sahne-gorsel: url('/varliklar/marka/casino/mines/arkaplan-dar.webp'); }
  /* Telefonda metin ekranın çok daha büyük kısmını kaplıyor: perde
     aşağıda daha kalın. Üstte 0.74 — başlık alanında sahne görünüyor,
     panellerin başladığı yerden itibaren neredeyse düz zemin. */
  .sahne { --sahne-perde-ust: 0.74; --sahne-perde-alt: 0.97; }
}

/* Kontrast tercihi: dekor tamamen kapanıyor, düz zemine dönülüyor. */
@media (prefers-contrast: more) {
  .sahne::after { background-image: none; }
  .sahne::before {
    background: linear-gradient(180deg, #0b0806 0%, var(--zemin) 45%);
  }
}