/* ==========================================================================
   DeadlyPirate — resmi site
   Karanlık / eskitilmiş altın korsan MMORPG teması.
   Tek stil dosyası, harici bağımlılık yok (fontlar Google Fonts'tan).
   ========================================================================== */

:root{
  --bg-0:#050505;
  --bg-1:#0A0A0A;
  --bg-2:#12100C;
  --bg-3:#1B1710;
  --bg-4:#2A2115;

  --gold:#C89B3C;
  --gold-2:#D9AE4D;
  --gold-3:#F0C66A;

  --text:#E8E1D4;
  --text-dim:#9E9688;

  --line:rgba(201,155,60,0.35);
  --line-soft:rgba(201,155,60,0.18);

  --f-display:'Cinzel', Georgia, serif;
  --f-body:'Barlow', system-ui, -apple-system, sans-serif;

  --nav-h:78px;
  --radius:6px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:.04em;
  margin:0;
  line-height:1.2;
}

/* --- ortak yardımcılar --- */
.wrap{ width:min(1320px, calc(100% - 48px)); margin-inline:auto; }
.section{ padding:76px 0; position:relative; }
.section-head{ text-align:center; margin-bottom:44px; }
.section-title{
  font-size:clamp(24px, 3vw, 38px);
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--gold-3), var(--gold) 55%, #8a6a26);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 10px rgba(201,155,60,.18));
}
.section-sub{ color:var(--text-dim); font-size:14px; margin-top:10px; }
/* başlığın altındaki altın ayraç — ortada küçük bir elmas */
.rule{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:16px;
}
.rule::before,.rule::after{
  content:''; height:1px; width:min(150px, 22vw);
  background:linear-gradient(90deg, transparent, var(--gold));
}
.rule::after{ background:linear-gradient(270deg, transparent, var(--gold)); }
.rule i{
  width:7px; height:7px; transform:rotate(45deg);
  background:var(--gold-2); box-shadow:0 0 10px rgba(240,198,106,.6);
}

/* --- altın metal buton --- */
.btn-gold{
  --h:52px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--h); padding:0 34px; cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:15px;
  letter-spacing:.13em; text-transform:uppercase; color:#2b1e08;
  border:1px solid #7d5f1f; border-radius:4px;
  background:
    linear-gradient(180deg, #f6d98a 0%, #d9ae4d 42%, #b8862c 62%, #e5c069 100%);
  box-shadow:0 2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow:hidden;
}
.btn-gold::after{        /* hover'da soldan sağa geçen parıltı */
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.btn-gold:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 6px 22px rgba(201,155,60,.45), inset 0 1px 0 rgba(255,255,255,.5);
  filter:brightness(1.05);
}
.btn-gold:hover::after{ transform:translateX(130%); }
.btn-gold:active{ transform:translateY(0) scale(.99); }
/* Henüz hazır olmayan indirmeler: tıklanamaz, soluk, parıltı animasyonu yok */
.btn-gold.locked{
  cursor:not-allowed; pointer-events:none;
  filter:grayscale(.7) brightness(.62);
  box-shadow:0 2px 0 rgba(0,0,0,.5);
}
.btn-gold.locked::after{ display:none; }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 30px; cursor:pointer;
  font-family:var(--f-display); font-weight:600; font-size:14px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-3);
  background:rgba(10,10,10,.72); border:1px solid var(--line); border-radius:4px;
  transition:border-color .2s, box-shadow .2s, color .2s, transform .18s;
}
.btn-ghost:hover{
  border-color:var(--gold-2); color:#fff;
  box-shadow:0 0 20px rgba(201,155,60,.25) , inset 0 0 24px rgba(201,155,60,.08);
  transform:translateY(-2px);
}

/* ==========================================================================
   GELİŞTİRME UYARISI — sayfanın en üstünde sabit şerit
   ========================================================================== */
:root{ --dev-h:38px; }
.devbar{
  position:fixed; top:0; left:0; right:0; z-index:80; height:var(--dev-h);
  display:flex; align-items:center; justify-content:center; gap:10px; padding:0 44px 0 16px;
  font-size:12.5px; color:#F0C66A; text-align:center;
  background:linear-gradient(180deg, #2a2115, #16120c);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(0,0,0,.6);
}
.devbar-in{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.devbar b{
  font-family:var(--f-display); letter-spacing:.1em; font-size:11.5px;
  color:#2b1e08; background:linear-gradient(180deg,#f6d98a,#c89b3c);
  padding:3px 9px; border-radius:3px; white-space:nowrap;
}
.devbar span span, .devbar-in > span{ color:#cdb98a; }
.devbar-x{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; cursor:pointer; font-size:19px; line-height:1;
  background:none; border:0; color:#9E9688; transition:color .2s;
}
.devbar-x:hover{ color:var(--gold-3); }
/* şerit kapatılınca üst boşluk sıfırlanır */
body.devbar-off{ --dev-h:0px; }
body.devbar-off .devbar{ display:none; }

/* ==========================================================================
   HEADER — logo sol, menü orta, giriş sağ
   ========================================================================== */
.topbar{
  position:fixed; inset:var(--dev-h) 0 auto 0; z-index:60;
  padding:12px 0;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.topbar::before{  /* üstten aşağı inen karartma — logo/menü hep okunur kalsın */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,3,3,.94), rgba(3,3,3,.55) 65%, transparent);
  pointer-events:none;
}
.topbar.stuck{
  background:rgba(5,5,5,.93);
  box-shadow:0 1px 0 var(--line-soft), 0 10px 34px rgba(0,0,0,.6);
  padding:6px 0;
  backdrop-filter:blur(9px);
}
.topbar-in{ display:flex; align-items:center; gap:20px; position:relative; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:39px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.8)); }

/* Menü — referans tasarımdaki gibi düz altın yazı (metal plaka/zincir yok).
   Logo solda, menü ortada, giriş butonları sağda. */
.nav{ margin-inline:auto; display:flex; align-items:center; }
.nav-list{
  display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;
}
.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  font-family:var(--f-display); font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:#cdb98a; white-space:nowrap;
  transition:color .2s ease, text-shadow .2s ease;
}
.nav-link .ico{ display:none; }         /* referansta ikon yok */
.nav-link::after{                        /* altın alt çizgi */
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-3), transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .25s ease;
}
.nav-link:hover, .nav-link.active{
  color:var(--gold-3);
  text-shadow:0 0 14px rgba(240,198,106,.5);
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

.auth-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-left:16px; }
.auth-actions .btn-gold{ --h:40px; padding:0 20px; font-size:12px; }
.auth-actions .btn-ghost{ min-height:40px; padding:0 18px; font-size:12px; }

.burger{
  display:none; width:44px; height:40px; margin-left:auto;
  background:linear-gradient(180deg,#221c12,#14100a); border:1px solid #6b5526;
  border-radius:3px; cursor:pointer; padding:10px 9px;
}
.burger span{ display:block; height:2px; background:var(--gold-2); border-radius:2px; }
.burger span + span{ margin-top:5px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-h) + var(--dev-h) + 40px) 0 40px;
  overflow:hidden;
}
/* katman 1: derin deniz + gökyüzü gradyanı */
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(120,85,30,.30), transparent 58%),
    radial-gradient(90% 60% at 12% 82%, rgba(28,40,52,.55), transparent 62%),
    radial-gradient(90% 60% at 88% 78%, rgba(40,26,12,.55), transparent 62%),
    linear-gradient(180deg, #0b0906 0%, #070707 45%, #050505 100%);
}
/* katman 2: sis bantları */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 22% at 30% 72%, rgba(190,170,140,.055), transparent 70%),
    radial-gradient(55% 18% at 72% 62%, rgba(190,170,140,.045), transparent 70%);
  animation:mist 26s ease-in-out infinite alternate;
}
@keyframes mist{ from{ transform:translateX(-2.5%);} to{ transform:translateX(2.5%);} }

.hero-in{ position:relative; z-index:2; }
.hero-logo{
  width:min(600px, 100%); height:auto; margin:0;
  filter:drop-shadow(0 12px 46px rgba(0,0,0,.9)) drop-shadow(0 0 32px rgba(201,155,60,.20));
  animation:rise .9s cubic-bezier(.2,.7,.3,1) both;
}
/* ekran okuyucu / arama motoru için görünmez metin */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* İKİ SÜTUNLU HERO — solda logo, sağda yazı (referans tasarım) */
.hero-in{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(20px,4vw,64px);
  text-align:left;
}
.hero-art{ display:flex; justify-content:center; }
.hero-copy{ animation:rise .9s .12s cubic-bezier(.2,.7,.3,1) both; }

.hero-tag{
  margin:0;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(26px, 3.6vw, 52px); line-height:1.12;
  letter-spacing:.03em; text-transform:uppercase;
  background:linear-gradient(180deg, #f7e2a6, var(--gold-2) 52%, #9c7628);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.85));
}
/* ---- HERO TANITIM VİDEOSU ----
   Başlığın (h1.hero-tag) durduğu yeri alıyor. Çerçeve dili sitenin geri
   kalanıyla aynı: --line kenarlık, --radius köşe, altın iç hat.
   aspect-ratio 16/9: yükseklik yazıyla değil oranla belirlendiği için
   video inmeden ÖNCE de kutu yerini kaplıyor, sayfa zıplamıyor (CLS). */
.hero-video{
  position:relative; width:100%; max-width:760px;
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-1);
  box-shadow:0 18px 46px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.5);
}
/* İnce iç altın hat — kartlardaki "el işi" çerçeve hissi. */
.hero-video::after{
  content:''; position:absolute; inset:3px; border-radius:4px;
  border:1px solid var(--line-soft); pointer-events:none; z-index:2;
}
.hero-video-el{
  display:block; width:100%; height:100%; object-fit:cover;
  /* Videonun kendi rengi siteye göre biraz parlak kalıyor; hafif
     karartma altın metinlerle aynı tonda durmasını sağlıyor. */
  filter:saturate(1.05) contrast(1.03);
}
.hero-video-ses{
  position:absolute; right:10px; bottom:10px; z-index:3;
  width:34px; height:34px; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer;
  color:var(--gold-3); background:rgba(5,5,5,.62);
  border:1px solid var(--line); border-radius:50%;
  transition:background-color .18s, border-color .18s, color .18s;
}
.hero-video-ses:hover{
  background:rgba(5,5,5,.86); border-color:var(--gold-2); color:var(--gold-3);
}
/* HAREKET AZALTMA: kullanıcı işletim sisteminde "hareketi azalt" demişse
   video kendiliğinden oynamıyor; kapak karesi duruyor ve denetimler
   açılıyor ki isteyen elle başlatabilsin. */
@media (prefers-reduced-motion: reduce){
  .hero-video-el{ filter:none; }
}

/* Başlık artık videonun altında, düğmelerin hemen üstünde duruyor.
   KULLANICI İSTEĞİ: "oyuna başla ve oyunu keşfet yazısının yanına alalım,
   oraya sığdıracak şekilde ayarla."
   Punto clamp(26-52px)'ten clamp(17-27px)'e indi ve satır kırılmaları
   kaldırıldı (eskiden üç satırdı) — düğme genişliğine yakın tek/iki
   satırlık bir üst başlık gibi duruyor. Altın gradyan ve gölge aynen
   korundu, yalnızca ölçek değişti. */
.hero-tag--alt{
  /* KULLANICI BİLDİRDİ: "'Ol.' dışarıda kalıyor, o sıraya sığdır, punto
     küçültebilirsin."
     27px'te satır kutuya sığmıyor ve son kelime tek başına alta düşüyordu
     (ölçüldü: 27px'te ~642px, kutu 597px). Üst sınır 23px'e indi.
     `text-wrap:balance`: yine de sarması gerekirse satırları dengeli
     bölüyor, tek kelimeyi yalnız bırakmıyor. Desteklemeyen tarayıcı
     kuralı yok sayıyor, davranış eskisi gibi kalıyor.
     KULLANICI İSTEĞİ: "başlat ve keşfeti de yukarı doğru alalım" —
     üst boşluk 20px'ten 12px'e indi, düğmelerle arası sıkılaştı. */
  font-size:clamp(15px, 1.5vw, 23px);
  line-height:1.22; letter-spacing:.05em;
  margin:12px 0 0; max-width:760px;
  text-wrap:balance;
}

.hero-desc{
  margin:16px 0 0; color:var(--text-dim); font-size:clamp(13.5px,1.05vw,16px);
  text-shadow:0 2px 10px rgba(0,0,0,.8);
  /* Açıklama videonun/düğmelerin genişliğine kadar uzasın. Sınır konmasaydı
     .hero-copy sütununun tamamına yayılıp başlıktan ve kutudan taşardı. */
  max-width:760px;
}
.hero-cta{
  /* KULLANICI İSTEĞİ: "Oyuna Başla ve Oyunu Keşfet yan yana olsunlar."
     Eskiden flex-direction:column ile alt alta duruyorlardı.
     wrap AÇIK: dar ekranda ikisi yan yana sığmayınca alt alta düşüyorlar,
     720px altındaki kural da onları tam genişliğe alıyor. */
  display:flex; flex-direction:row; flex-wrap:wrap;
  align-items:center; gap:12px; margin-top:14px;
}
/* Yan yana dururken 290px'lik alt sınırlar toplamı 592px yapıyordu ve
   kutudan taşıyordu; ikisi de daraltıldı. Yükseklikleri de eşitlendi —
   yan yana duran iki düğmenin farklı boyda olması göze çarpıyor. */
.hero-cta .btn-gold{ --h:54px; padding:0 30px; font-size:15px; min-width:210px; }
.hero-cta .btn-ghost{ min-height:54px; padding:0 26px; font-size:13px; min-width:170px; }

/* --- hero sahnesi: gemiler (sol) + kale (sağ) --- */
.hero-scene{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hero-scene span{
  position:absolute; top:0; bottom:0; display:block;
  background-repeat:no-repeat; background-position:center;
  background-size:cover;
}
.scene-ships{
  left:0; width:min(38%, 640px);
  background-image:url('../img/hero-ships.webp');
  background-position:left center;
}
.scene-castle{
  right:0; width:min(25%, 440px);
  background-image:url('../img/hero-castle.webp');
  background-position:right center;
}
/* Yazı bloğunun arkasına yumuşak karartma — kale/gemi dokusu üstünde
   metnin okunurluğu düşmesin diye. Görsel olarak fark edilmez. */
.hero-copy{ position:relative; }
.hero-copy::before{
  content:''; position:absolute; z-index:-1;
  inset:-34px -46px -30px -40px;
  background:radial-gradient(72% 62% at 46% 50%, rgba(4,4,4,.82), rgba(4,4,4,.45) 62%, transparent 82%);
}

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

/* aşağı kaydır işareti */
.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:2; color:var(--text-dim); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:7px;
  animation:bob 2.4s ease-in-out infinite;
}
.scroll-hint b{ font-size:15px; color:var(--gold-2); }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,7px);} }

/* --- düşen DP paraları (JS ile üretilir) ---
   Dış katman DÜŞÜŞÜ, iç katman DÖNÜŞÜ yapar. İkisi de transform kullandığı
   için aynı elemana verilemez — bu yüzden iç içe iki eleman var. */
.coins{
  position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden;
  perspective:900px;
}
.coin{
  position:absolute; top:0; left:0;
  will-change:transform, opacity;
  animation:coinFall linear infinite;
}
.coin i{
  display:block; width:100%; height:100%;
  background-image:url('../img/dp-coin.webp');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transform-style:preserve-3d;
  animation:coinSpin linear infinite;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(240,198,106,.25));
}
@keyframes coinFall{
  0%   { transform:translate3d(0, -18vh, 0); opacity:0; }
  10%  { opacity:var(--op, .8); }
  85%  { opacity:var(--op, .8); }
  100% { transform:translate3d(var(--dx, 30px), 115vh, 0); opacity:0; }
}
@keyframes coinSpin{
  from{ transform:rotateY(0deg) rotateZ(0deg); }
  to  { transform:rotateY(360deg) rotateZ(var(--rz, 25deg)); }
}

/* altın kıvılcımlar (JS ile üretilir) */
.sparks{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.spark{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#f0c66a; opacity:0;
  animation:spark linear infinite;
}
@keyframes spark{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  12%{ opacity:.85; }
  100%{ opacity:0; transform:translateY(-170px) scale(1.25); }
}

/* ==========================================================================
   İNDİRME KARTLARI
   ========================================================================== */
.downloads{ padding:0 0 78px; margin-top:-24px; position:relative; z-index:3; }
.dl-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.dl-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:26px 20px 22px; text-align:center;
  background:linear-gradient(170deg, rgba(26,22,15,.95), rgba(9,9,9,.97));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 40px rgba(201,155,60,.05);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.dl-card:hover{
  transform:translateY(-6px); border-color:var(--gold-2);
  box-shadow:0 18px 40px rgba(0,0,0,.7), 0 0 30px rgba(201,155,60,.18), inset 0 0 48px rgba(201,155,60,.09);
}
/* kartın tepesindeki kuru kafa amblemi */
.dl-card .crest{
  position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  background:var(--bg-1); border:1px solid var(--line);
  display:grid; place-items:center; font-size:15px; color:var(--gold-2);
}
.dl-ico{ height:46px; margin-bottom:12px; display:grid; place-items:center; }
.dl-ico svg{ width:42px; height:42px; }
.dl-name{
  font-family:var(--f-display); font-size:16px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-3);
}
.dl-sub{ font-size:12.5px; color:var(--text-dim); margin:4px 0 18px; }
.dl-card .btn-gold{ --h:44px; width:100%; padding:0 12px; font-size:13px; }

/* ==========================================================================
   ÖZELLİK KARTLARI (DENİZLER SENİ BEKLİYOR)
   ========================================================================== */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat{
  padding:28px 22px; text-align:center;
  background:linear-gradient(170deg, rgba(27,23,16,.9), rgba(10,10,10,.95));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.feat:hover{
  transform:translateY(-7px); border-color:var(--gold);
  box-shadow:0 16px 36px rgba(0,0,0,.6), inset 0 0 40px rgba(201,155,60,.07);
}
.feat .g{ font-size:30px; margin-bottom:12px; filter:drop-shadow(0 0 12px rgba(201,155,60,.4)); }
.feat h3{ font-size:15px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-3); margin-bottom:8px; }
.feat p{ margin:0; font-size:13.5px; color:var(--text-dim); }

/* ==========================================================================
   GALERİ
   ========================================================================== */
/* KULLANICI BILDIRDI: "fotograflar asagi dogru gidiyor".
   ESKI DUZEN: kucuk gorseller sagda 190px'lik DIKEY sutundaydi. 4 gorselle
   ana gorselin yaninda sigiyordu; 9 gorsele cikinca sutun ana gorselden
   uzun kaldi ve GRID SATIR YUKSEKLIGINI o belirledi, yani bolum asagi
   dogru buyudu.
   YENI DUZEN: ana gorsel ustte tam genislik, kucukler altinda YATAY serit
   halinde ve kendi icinde kayiyor. Gorsel sayisi artsa da bolumun boyu
   degismiyor. (Bu zaten dar ekranlarda kullanilan duzendi; her boyuta
   alindi.) */
.gal{ display:grid; grid-template-columns:1fr; gap:14px; }
.gal-main{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-1); aspect-ratio:16/9;
}
.gal-main img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal-main:hover img{ transform:scale(1.04); }
.gal-main::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.65);
}
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:rgba(5,5,5,.7); border:1px solid var(--line); border-radius:50%;
  color:var(--gold-3); font-size:18px;
  transition:background .2s, border-color .2s, transform .2s;
}
.gal-nav:hover{ background:rgba(5,5,5,.92); border-color:var(--gold-2); transform:translateY(-50%) scale(1.08); }
.gal-nav.prev{ left:14px; } .gal-nav.next{ right:14px; }
.gal-thumbs{
  display:flex; flex-direction:row; gap:10px;
  overflow-x:auto; overflow-y:hidden; padding:2px 2px 8px;
  scrollbar-width:thin; scrollbar-color:var(--gold-2) rgba(255,255,255,.06);
}
.gal-thumbs::-webkit-scrollbar{ height:7px; }
.gal-thumbs::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:4px; }
.gal-thumbs::-webkit-scrollbar-thumb{ background:rgba(201,155,60,.55); border-radius:4px; }
.gal-thumbs::-webkit-scrollbar-thumb:hover{ background:var(--gold-2); }
.gal-thumbs button{
  padding:0; cursor:pointer; background:none; aspect-ratio:16/10;
  flex:0 0 128px;                      /* serit halinde sabit genislik */
  border:1px solid var(--line-soft); border-radius:4px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.gal-thumbs img{ width:100%; height:100%; object-fit:cover; }
.gal-thumbs button:hover{ transform:translateY(-2px); }
.gal-thumbs button.on{ border-color:var(--gold-2); box-shadow:0 0 16px rgba(201,155,60,.3); }
/* görsel yoksa gösterilen yer tutucu */
.shot-ph{
  width:100%; height:100%; display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(70% 60% at 50% 20%, rgba(120,85,30,.20), transparent 60%),
    linear-gradient(160deg,#151109,#080808);
  color:var(--text-dim); font-family:var(--f-display); letter-spacing:.14em;
  text-transform:uppercase; font-size:12px; padding:12px;
}

/* ==========================================================================
   DÜNYA / REHBER KARTLARI
   ========================================================================== */
.tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile{
  display:block; padding:24px 18px; text-align:center;
  background:linear-gradient(170deg, rgba(24,20,14,.92), rgba(9,9,9,.96));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tile:hover{
  transform:translateY(-6px); border-color:var(--gold);
  box-shadow:0 14px 32px rgba(0,0,0,.6), inset 0 0 36px rgba(201,155,60,.08);
}
.tile .g{ font-size:26px; margin-bottom:10px; filter:drop-shadow(0 0 10px rgba(201,155,60,.35)); }
.tile h3{ font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-3); margin-bottom:6px; }
.tile p{ margin:0; font-size:12.5px; color:var(--text-dim); }

/* ==========================================================================
   GÜNCELLEMELER + SIRALAMA (yan yana)
   ========================================================================== */
.two-col{ display:grid; grid-template-columns:1.25fr 1fr; gap:26px; align-items:start; }

.news-item{
  display:flex; gap:16px; padding:18px;
  background:linear-gradient(170deg, rgba(24,20,14,.9), rgba(9,9,9,.95));
  border:1px solid var(--line-soft); border-left:3px solid var(--gold);
  border-radius:var(--radius); margin-bottom:12px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.news-item:hover{ transform:translateX(4px); border-color:var(--line); box-shadow:0 10px 26px rgba(0,0,0,.5); }
.news-ver{
  flex-shrink:0; align-self:flex-start;
  font-family:var(--f-display); font-size:11px; font-weight:700; letter-spacing:.1em;
  color:#2b1e08; padding:5px 11px; border-radius:3px;
  background:linear-gradient(180deg,#e5c069,#c89b3c);
}
.news-body h3{ font-size:15px; color:var(--text); margin-bottom:4px; }
.news-date{ font-size:11px; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; }
.news-body p{ margin:7px 0 8px; font-size:13.5px; color:var(--text-dim); }
.news-more{
  font-family:var(--f-display); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-2);
  border-bottom:1px solid transparent; transition:border-color .2s, color .2s;
}
.news-more:hover{ color:var(--gold-3); border-color:var(--gold-3); }

.board{
  background:linear-gradient(170deg, rgba(24,20,14,.92), rgba(9,9,9,.96));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.board-head{
  padding:15px 18px; border-bottom:1px solid var(--line-soft);
  font-family:var(--f-display); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-3);
  display:flex; align-items:center; gap:9px;
  background:linear-gradient(180deg, rgba(201,155,60,.08), transparent);
}
.board-row{
  display:grid; grid-template-columns:44px 1fr auto auto; gap:12px; align-items:center;
  padding:12px 18px; border-bottom:1px solid rgba(201,155,60,.09); font-size:13.5px;
}
.board-row:last-child{ border-bottom:0; }
.rank-badge{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; font-size:12.5px; color:#1a1206;
  background:linear-gradient(180deg,#3a3128,#241e16); color:var(--text-dim);
  border:1px solid rgba(201,155,60,.25);
}
.rank-1{ background:linear-gradient(180deg,#f6d98a,#c89b3c); color:#2b1e08; border-color:#f0c66a; box-shadow:0 0 14px rgba(240,198,106,.45); }
.rank-2{ background:linear-gradient(180deg,#e6e6ea,#9aa0a6); color:#22252a; border-color:#cfd3d8; }
.rank-3{ background:linear-gradient(180deg,#d8a06a,#a2662f); color:#2b1a08; border-color:#e0ae7c; }
.board-name{ font-family:var(--f-display); letter-spacing:.05em; color:var(--text); }
/* Sıralamadaki kalıcı oyuncu ID — adın yanında, sönük ve dar. */
.board-oid{ margin-left:.6rem; font-family:var(--f-body); letter-spacing:0;
            font-size:.78em; color:var(--text-dim); }
.board-lv{ color:var(--text-dim); font-size:12.5px; }
.board-pt{ color:var(--gold-3); font-variant-numeric:tabular-nums; }
.board-foot{ padding:13px 18px; text-align:center; border-top:1px solid var(--line-soft); }
.board-foot a{
  font-family:var(--f-display); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-2);
}
.board-foot a:hover{ color:var(--gold-3); }

/* ==========================================================================
   MARKET SAYFASI
   ========================================================================== */
.page-head{
  padding:calc(var(--nav-h) + var(--dev-h) + 64px) 0 30px; text-align:center; position:relative;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(120,85,30,.22), transparent 65%),
    linear-gradient(180deg,#0b0906,#050505);
  border-bottom:1px solid var(--line-soft);
}
.cats{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.cat{
  padding:9px 18px; cursor:pointer;
  font-family:var(--f-display); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#cdb98a; background:linear-gradient(180deg,#221c12,#14100a);
  border:1px solid #6b5526; border-radius:3px;
  transition:color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.cat:hover{ transform:translateY(-2px); color:var(--gold-3); border-color:var(--gold); }
.cat.on{
  color:#2b1e08; border-color:#7d5f1f;
  background:linear-gradient(180deg,#f6d98a,#d9ae4d 45%,#b8862c);
}
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.item{
  display:flex; flex-direction:column;
  background:linear-gradient(170deg, rgba(26,22,15,.94), rgba(9,9,9,.97));
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.item:hover{
  transform:translateY(-6px); border-color:var(--gold);
  box-shadow:0 16px 36px rgba(0,0,0,.62), inset 0 0 40px rgba(201,155,60,.07);
}
.item-art{
  aspect-ratio:1/1; display:grid; place-items:center; font-size:52px;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(201,155,60,.16), transparent 62%),
    linear-gradient(160deg,#171308,#0a0a0a);
  border-bottom:1px solid var(--line-soft);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.item-body{ padding:15px 15px 17px; display:flex; flex-direction:column; flex:1; }
.item-name{ font-family:var(--f-display); font-size:14.5px; color:var(--text); margin-bottom:5px; }
.item-desc{
  font-size:12.5px; color:var(--text-dim); line-height:1.55; margin-bottom:12px;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; min-height:58px;
}
.item-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.item-price{
  font-family:var(--f-display); font-size:15px; color:var(--gold-3);
  display:flex; align-items:center; gap:5px;
}
.item-foot .btn-gold{ --h:38px; padding:0 16px; font-size:11.5px; }

/* ==========================================================================
   DESTEK / TALEP
   ========================================================================== */
.ticket-gate, .ticket-box{
  max-width:640px; margin:0 auto; padding:32px 30px;
  background:linear-gradient(170deg, rgba(26,22,15,.94), rgba(9,9,9,.97));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 0 46px rgba(201,155,60,.05);
}
.ticket-gate{ text-align:center; }
.ticket-gate .g{ font-size:32px; margin-bottom:10px; filter:drop-shadow(0 0 12px rgba(201,155,60,.35)); }
.ticket-gate h3{
  font-size:16px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-3); margin-bottom:8px;
}
.ticket-gate p{ margin:0 0 20px; font-size:13.5px; color:var(--text-dim); }
.ticket-gate-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.ticket-who{
  font-size:12.5px; color:var(--text-dim); margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line-soft);
}
.ticket-who b{ color:var(--gold-3); font-family:var(--f-display); letter-spacing:.05em; }
.ticket-box textarea{
  width:100%; padding:12px 13px; font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(0,0,0,.55); border:1px solid var(--line-soft); border-radius:4px;
  resize:vertical; min-height:120px; line-height:1.6;
  transition:border-color .2s, box-shadow .2s;
}
.ticket-box textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,155,60,.12);
}
.ticket-box .btn-gold{ width:100%; margin-top:6px; }
.ticket-box .modal-msg{ text-align:left; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{
  padding:56px 0 26px; text-align:center; position:relative;
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, #070605, #050505);
}
.foot-logo{ width:min(300px,64vw); margin:0 auto 14px; opacity:.95; }
.foot-slogan{
  font-family:var(--f-display); font-size:13.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-2); margin-bottom:26px;
}
.foot-links{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-bottom:16px;
}
.foot-links a{ font-size:13px; color:var(--text-dim); transition:color .2s; }
.foot-links a:hover{ color:var(--gold-3); }
/* ==========================================================================
   REHBER SAYFASI (rehber.html)
   Kapsam: tüm kurallar .gd- önekli, paylaşılan sınıflara dokunulmuyor.
   ========================================================================== */
.gd-toc{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:26px;
}
.gd-toc a{
  padding:7px 15px; border-radius:20px; font-size:12.5px; letter-spacing:.04em;
  border:1px solid rgba(201,155,60,.28); color:var(--gold-2);
  background:rgba(201,155,60,.06); transition:color .2s, border-color .2s, background .2s;
}
.gd-toc a:hover{ color:var(--gold-3); border-color:var(--gold-3); background:rgba(201,155,60,.16); }

.gd-h2{
  font-family:var(--f-display); font-size:26px; letter-spacing:.06em;
  color:var(--gold-3); margin:46px 0 6px; padding-top:14px;
  border-top:1px solid rgba(201,155,60,.16); scroll-margin-top:90px;
}
.gd-lead{ font-size:14.5px; color:var(--text-dim); line-height:1.75; margin-bottom:20px; }

.gd-card{
  border:1px solid rgba(201,155,60,.16); border-radius:10px;
  background:linear-gradient(180deg,rgba(20,17,12,.92),rgba(8,7,5,.92));
  padding:20px 22px; margin-bottom:16px;
}
.gd-card h3{
  font-family:var(--f-display); font-size:17px; letter-spacing:.05em;
  color:var(--gold-2); margin-bottom:10px;
}
.gd-card p{ font-size:13.5px; line-height:1.8; color:var(--text-dim); margin-bottom:10px; }
.gd-card p:last-child{ margin-bottom:0; }
.gd-card b{ color:var(--gold-3); }
.gd-card a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px; }

.gd-list{ margin:0 0 10px; padding-left:20px; }
.gd-list li{ font-size:13.5px; line-height:1.8; color:var(--text-dim); margin-bottom:6px; }
.gd-list--num{ list-style:decimal; }
.gd-note{
  font-size:12.5px !important; color:#8a8377 !important; font-style:italic;
  border-left:2px solid rgba(201,155,60,.3); padding-left:12px; margin-top:12px !important;
}

/* Dar ekranda tablo taşmasın: kendi içinde yatay kaysın. */
.gd-tablo-sar{ overflow-x:auto; margin:4px 0 12px; }
.gd-tablo{ width:100%; border-collapse:collapse; font-size:13px; min-width:420px; }
.gd-tablo th{
  text-align:left; padding:9px 12px; font-family:var(--f-display); font-weight:600;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-2); border-bottom:1px solid rgba(201,155,60,.28);
}
.gd-tablo td{
  padding:9px 12px; color:var(--text-dim); line-height:1.6;
  border-bottom:1px solid rgba(201,155,60,.08);
}
.gd-tablo tbody tr:hover{ background:rgba(201,155,60,.05); }
.gd-tablo td b{ color:var(--gold-3); }

.gd-cta{
  text-align:center; margin-top:44px; padding:32px 22px; border-radius:12px;
  border:1px solid rgba(201,155,60,.24);
  background:radial-gradient(120% 90% at 50% 0%, rgba(201,155,60,.12), transparent 62%), #080706;
}
.gd-cta h3{ font-family:var(--f-display); font-size:21px; color:var(--gold-3); margin-bottom:8px; }
.gd-cta p{ font-size:13.5px; color:var(--text-dim); margin-bottom:18px; }

@media (max-width:640px){
  .gd-h2{ font-size:21px; }
  .gd-card{ padding:16px 15px; }
}

/* Sosyal hesap düğmeleri — altın çerçeveli yuvarlak rozetler.
   Bağlantı listesiyle yasal satır arasında duruyor. */
.foot-social{
  display:flex; gap:12px; justify-content:center; margin-bottom:18px;
}
.foot-social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(201,155,60,.32); color:var(--gold-2);
  background:rgba(201,155,60,.06);
  transition:color .2s, border-color .2s, background .2s, transform .2s;
}
.foot-social a:hover{
  color:var(--gold-3); border-color:var(--gold-3);
  background:rgba(201,155,60,.18); transform:translateY(-2px);
}
.foot-social svg{ width:18px; height:18px; fill:currentColor; display:block; }
.foot-legal{
  display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:center;
  padding-top:18px; margin-top:8px; border-top:1px solid rgba(201,155,60,.12);
}
.foot-legal a{ font-size:11.5px; color:#6f6a60; }
.foot-legal a:hover{ color:var(--gold-2); }
.copy{ margin-top:14px; font-size:11.5px; color:#5d584f; }

/* ==========================================================================
   MODAL (giriş / kayıt)
   ========================================================================== */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(2,2,2,.86); backdrop-filter:blur(6px);
}
.modal.open{ display:flex; }
.modal-card{
  position:relative; width:min(430px,100%); padding:34px 30px 28px; text-align:center;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(120,85,30,.20), transparent 62%),
    linear-gradient(170deg, #16120c, #090909);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 26px 70px rgba(0,0,0,.85), inset 0 0 60px rgba(201,155,60,.05);
  animation:pop .25s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none;} }
.modal-crest{ width:76px; margin:0 auto 8px; }
.modal-card h2{
  font-size:21px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-3); margin-bottom:4px;
}
.modal-card .sub{ font-size:12.5px; color:var(--text-dim); margin-bottom:20px; }
.field{ margin-bottom:12px; text-align:left; }
.field label{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:5px;
}
.field input{
  width:100%; padding:12px 13px; font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(0,0,0,.55); border:1px solid var(--line-soft); border-radius:4px;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,155,60,.12);
}
.modal-card .btn-gold{ width:100%; margin-top:8px; }
.modal-msg{
  display:none; margin-bottom:12px; padding:10px 12px; border-radius:4px; font-size:12.5px;
  background:rgba(150,40,30,.16); border:1px solid rgba(210,80,60,.4); color:#ffb3a3;
}
.modal-msg.ok{ background:rgba(50,140,80,.14); border-color:rgba(80,190,120,.4); color:#a8e6be; }
.modal-msg.show{ display:block; }
.modal-alt{ margin-top:16px; font-size:12.5px; color:var(--text-dim); }
.modal-alt button{
  background:none; border:0; cursor:pointer; padding:0;
  color:var(--gold-3); font-size:12.5px; text-decoration:underline;
}
.modal-x{
  position:absolute; top:10px; right:12px; width:32px; height:32px; cursor:pointer;
  background:none; border:0; color:var(--text-dim); font-size:22px; line-height:1;
  transition:color .2s;
}
.modal-x:hover{ color:var(--gold-3); }
.forgot{
  display:inline-block; margin-top:12px; font-size:12px; color:var(--text-dim);
  border-bottom:1px solid transparent;
}
.forgot:hover{ color:var(--gold-2); border-color:var(--gold-2); }

/* giriş yapılınca header'da görünen kaptan kutusu */
.me{ display:none; align-items:center; gap:10px; }
.me.on{ display:flex; }
.me-name{
  font-family:var(--f-display); font-size:12.5px; letter-spacing:.06em; color:var(--gold-3);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ==========================================================================
   SIRALAMA — CANLI VERİ
   Aynı işaretleme hem ana sayfada (#siralama) hem siralama.html'de kullanılır;
   satırları assets/js/main.js içindeki TEK modül dolduruyor (Firestore).
   ========================================================================== */
.lb-tools{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid var(--line-soft);
}
/* KULLANICI: "sıralamada seçimler beyaz ve çok çirkin duruyor."
   SEBEP: `appearance` sıfırlanmamıştı, yani tarayıcı kendi YERLİ
   kontrolünü çiziyordu — Windows/Chrome'da bu, koyu zemine rağmen açık
   gri/beyaz bir kutu ve yerli ok demek. Renk vermek yetmiyor, önce
   yerli görünümü kapatmak gerekiyor.
   OK KENDİMİZ ÇİZİYORUZ: appearance:none yerli oku da kaldırdığı için
   arka plana altın renkli bir SVG karet konuyor (data URI — ek dosya ve
   istek yok). sağdaki padding oka yer açıyor. */
.lb-select{
  /* Açılan listeyi işletim sistemi çiziyor. Aşağıdaki `option` kuralları
     zaten zemini/yazıyı koyulaştırıyordu ama SEÇİLİ SATIR VURGUSU ve
     kaydırma çubuğu açık temada kalıyordu; color-scheme onları da
     koyuya çeviriyor. Oyun tarafında da aynı düzeltme var. */
  color-scheme: dark;
  flex:1 1 165px; min-width:0; padding:9px 34px 9px 12px; cursor:pointer;
  font-family:var(--f-body); font-size:12.5px; color:var(--text);
  border:1px solid var(--line); border-radius:5px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-color:var(--bg-2, #14110c);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23c9a227' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:center, right 12px center;
  background-size:auto, 11px 7px;
  transition:border-color .18s, box-shadow .18s;
}
.lb-select:hover{ border-color:var(--gold-3, #8a6f22); }
.lb-select:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(201,162,39,.22);
}
/* Koyu zeminde okunur açılır liste (Windows/Chrome varsayılanı beyazdır) */
.lb-select option{ background:#100e0a; color:var(--text); }
.lb-select option:disabled{ color:#6f6a60; }
/* Filo satırında seviye sütunu yok — üç sütuna iner. */
.board-row.two{ grid-template-columns:44px 1fr auto; }
.lb-msg{ padding:26px 18px; text-align:center; font-size:13px; color:var(--text-dim); }
.lb-msg .btn-ghost{ min-height:40px; padding:0 22px; font-size:12px; margin-top:14px; }

/* ==========================================================================
   RÜTBE / GEMİ / ETKİNLİK SAYFALARI
   ========================================================================== */
/* --- altın çerçeveli bilgi kutusu (oyundaki .rankInfoCard'ın site karşılığı) --- */
.info-card{
  display:flex; gap:16px; align-items:flex-start; padding:18px 20px; margin-bottom:28px;
  background:linear-gradient(170deg, rgba(24,20,14,.9), rgba(9,9,9,.95));
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--radius);
}
.info-card .i{
  width:30px; height:30px; flex-shrink:0; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold-3);
  display:grid; place-items:center; font-family:var(--f-display); font-size:15px;
}
.info-card h3{
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-3); margin-bottom:7px;
}
.info-card p{ margin:0; font-size:13px; color:var(--text-dim); line-height:1.75; }
.formula{
  display:inline-block; margin-top:6px; padding:5px 10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px; color:var(--gold-3);
  background:rgba(0,0,0,.5); border:1px solid var(--line-soft); border-radius:3px;
}

/* --- rütbe merdiveni (oyundaki .rankLadderStrip'in site karşılığı) --- */
.rank-ladder{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.rank-card{
  padding:18px 12px 15px; text-align:center;
  background:linear-gradient(170deg, rgba(26,22,15,.94), rgba(9,9,9,.97));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.rank-card:hover{
  transform:translateY(-4px); border-color:var(--gold);
  box-shadow:0 14px 30px rgba(0,0,0,.6), inset 0 0 34px rgba(201,155,60,.06);
}
.rank-art{ width:76px; height:76px; margin:0 auto 10px; }
.rank-art img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 12px rgba(0,0,0,.65)); }
.rank-no{ font-family:var(--f-display); font-size:11px; letter-spacing:.16em; color:var(--gold-2); }
.rank-name{
  font-family:var(--f-display); font-size:13.5px; letter-spacing:.05em;
  color:var(--text); margin:4px 0 7px;
}
.rank-req{ font-size:11.5px; color:var(--text-dim); }
.rank-req b{ color:var(--gold-3); font-variant-numeric:tabular-nums; }

/* --- gemi kartları --- */
.ship-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.ship-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(170deg, rgba(26,22,15,.94), rgba(9,9,9,.97));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.ship-card:hover{
  transform:translateY(-5px); border-color:var(--gold);
  box-shadow:0 18px 38px rgba(0,0,0,.62), inset 0 0 44px rgba(201,155,60,.06);
}
/* Kare oyun görselleri (760x760) buraya "cover" ile oturuyor. Oran 3/2
   seçildi: geminin çapraz duruşu tam kadraja giriyor, daha geniş bir oran
   (16/10) baş ve kıçtan kırpıyordu. */
.ship-shot{
  position:relative; aspect-ratio:3/2; overflow:hidden;
  background:linear-gradient(160deg,#0d1620,#050505);
  border-bottom:1px solid var(--line-soft);
}
/* cover -> contain: kart görselleri artık modelden üretilen SAYDAM PNG'ler
   (sinifkart-sinifN.png), eski deniz arka planlı JPEG'ler değil. `cover`
   saydam kartı kırpıyor, geminin direkleri ve cıvadrası kesiliyordu;
   `contain` gemiyi bütün gösteriyor ve boşluğu .ship-shot'un kendi koyu
   degradesi dolduruyor.
   KAPSAM: `.ship-shot` YALNIZCA gemiler.html'de geçiyor (grep ile
   doğrulandı), yani bu satır sitenin başka bir yerine sızmıyor. */
.ship-shot img{ width:100%; height:100%; object-fit:contain; }
/* Görseli olmayan tasarımlar için yer tutucu (kırık resim çıkmasın). */
.ship-shot .noshot{
  position:absolute; inset:0; display:grid; place-items:center; gap:6px;
  font-family:var(--f-display); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:#5d584f; text-align:center; padding:14px;
}
.ship-tag{
  position:absolute; top:10px; left:10px; padding:4px 11px; border-radius:3px;
  font-family:var(--f-display); font-size:11px; letter-spacing:.1em; color:#2b1e08;
  background:linear-gradient(180deg,#e5c069,#c89b3c);
}
.ship-tag.locked{ background:linear-gradient(180deg,#3a3128,#241e16); color:var(--text-dim); }
.ship-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.ship-name{ font-family:var(--f-display); font-size:17px; color:var(--gold-3); letter-spacing:.05em; }
.ship-req{ font-size:12.5px; color:var(--text-dim); margin:5px 0 12px; }
.ship-req b{ color:var(--text); font-variant-numeric:tabular-nums; }
.ship-desc{ margin:0 0 15px; font-size:13px; color:var(--text-dim); line-height:1.65; }
/* Kart ızgarasının ÜSTÜNDEKİ tek satırlık uyarı (atış aralığı/menzil
   sınıftan değil toptan gelir). .ship-desc kart içinde, bu dışında. */
.ship-note{
  margin:-4px 0 18px; max-width:70ch; font-size:13px; line-height:1.65;
  color:var(--text-dim); border-left:2px solid var(--line); padding-left:12px;
}
.ship-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:auto; }
.ship-stat{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 10px; font-size:12px; border-radius:3px;
  background:rgba(0,0,0,.42); border:1px solid var(--line-soft);
}
.ship-stat span{ color:var(--text-dim); }
.ship-stat b{ color:var(--gold-3); font-weight:600; font-variant-numeric:tabular-nums; }

/* --- etkinlik takvimi (oyundaki Etkinlik Takvimi ekranının site karşılığı) --- */
.ev-list{
  background:linear-gradient(170deg, rgba(24,20,14,.92), rgba(9,9,9,.96));
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.ev-row{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  border-bottom:1px solid rgba(201,155,60,.09);
}
.ev-row:last-child{ border-bottom:0; }
.ev-row.on{ background:linear-gradient(90deg, rgba(201,155,60,.10), transparent 72%); }
.ev-icon{
  width:54px; height:54px; flex-shrink:0; border-radius:8px;
  display:grid; place-items:center; font-size:24px;
  background:linear-gradient(145deg,#4a3510,#2a1d08); border:2px solid #6b5228;
}
.ev-body{ flex:1; min-width:0; }
.ev-title{ font-family:var(--f-display); font-size:15px; color:#f0d9a8; line-height:1.4; }
/* Oyundaki davranışın aynısı: BUGÜN olan gün yeşil, diğerleri kırmızı. */
.ev-day{ font-size:12.5px; color:#c85a4a; margin-top:4px; }
.ev-row.on .ev-day{ color:#3fd15f; }
.ev-soon{ font-size:11px; color:var(--text-dim); letter-spacing:.06em; }
.ev-now{
  display:none; flex-shrink:0; padding:4px 11px; border-radius:3px;
  font-family:var(--f-display); font-size:11px; letter-spacing:.12em; color:#12220f;
  background:linear-gradient(180deg,#8ee6a8,#3fd15f);
}
.ev-row.on .ev-now{ display:inline-block; }

/* --- görünürlük animasyonu (JS: IntersectionObserver) --- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.seen{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1240px){
  .nav-link{ padding:8px 11px; font-size:11px; }
  .nav-list li + li::before{ width:14px; }
  .dl-grid, .feat-grid, .tile-grid, .shop-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  .burger{ display:block; }
  .nav{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    background:rgba(7,7,7,.985); border:1px solid var(--line-soft); border-radius:var(--radius);
    padding:14px; display:none; box-shadow:0 24px 50px rgba(0,0,0,.75);
  }
  .nav.open{ display:block; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:8px; }
  .nav-list li + li::before{ display:none; }
  .nav-link{ justify-content:center; }
  .auth-actions{ margin-left:12px; }
  /* hero tek sütuna iner, yazı ortalanır */
  .hero-in{ grid-template-columns:1fr; text-align:center; gap:18px; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  /* Dar ekranda video sütunun tamamını kaplasın; max-width kalkmazsa
     ortada dar bir şerit gibi durur. */
  .hero-video{ max-width:100%; }
  .hero-cta{ justify-content:center; }
  .hero-logo{ width:min(480px, 86vw); }
  .scene-ships{ width:52%; opacity:.55; }
  .scene-castle{ width:46%; opacity:.55; }
  .two-col{ grid-template-columns:1fr; }
  .ship-grid{ grid-template-columns:1fr; }
  /* Duzen zaten yatay; dar ekranda yalnizca kucukler daraliyor. */
  .gal-thumbs button{ flex:0 0 112px; }
}
@media (max-width:720px){
  .wrap{ width:calc(100% - 30px); }
  .section{ padding:56px 0; }
  .auth-actions .btn-ghost{ display:none; }
  .dl-grid, .feat-grid, .tile-grid, .shop-grid{ grid-template-columns:1fr; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn-gold, .hero-cta .btn-ghost{ width:100%; }
  .brand img{ height:30px; }
  .rank-ladder{ grid-template-columns:repeat(2,1fr); }
  .ship-stats{ grid-template-columns:1fr; }
  .ev-row{ gap:12px; padding:14px 15px; }
  .ev-icon{ width:44px; height:44px; font-size:20px; }
}

/* ====================== AKTİF OYUNCU SAYISI ======================
   Sıralama başlığının altında duran küçük canlılık göstergesi.
   Veri netlify/functions/aktif.js'ten geliyor (RTDB, Firestore'a
   dokunmuyor). Kutu main.js tarafından açılıyor — sayı gelmezse
   hiç görünmüyor, "0 kaptan" yazmıyor. */
.aktif-kutu{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:12px; padding:6px 14px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(10,10,10,.55);
  color:var(--text-dim); font-family:var(--f-body);
  font-size:13px; letter-spacing:.02em;
}
.aktif-kutu b{ color:var(--gold-3); font-variant-numeric:tabular-nums; }
/* Nabız — "canlı" hissi. prefers-reduced-motion'da duruyor. */
.aktif-nokta{
  width:8px; height:8px; border-radius:50%;
  background:#4ade6a; box-shadow:0 0 0 0 rgba(74,222,106,.55);
  animation:aktifNabiz 2.4s ease-out infinite;
}
@keyframes aktifNabiz{
  0%   { box-shadow:0 0 0 0 rgba(74,222,106,.55); }
  70%  { box-shadow:0 0 0 7px rgba(74,222,106,0); }
  100% { box-shadow:0 0 0 0 rgba(74,222,106,0); }
}
@media (prefers-reduced-motion: reduce){
  .aktif-nokta{ animation:none; }
}

/* ====================== MOBİL DOKUNMA HEDEFLERİ ======================
   ÖLÇÜLDÜ (375x812): sayfada 32 px'in altında 13 dokunulabilir öğe
   vardı. Parmakla basılan bir kontrolün kenarı en az ~44 px olmalı;
   altında kalınca yanlış öğeye basılıyor.

   YALNIZCA DOKUNMATİK CİHAZDA: `hover:none` sorgusu fareyle gezilen
   masaüstünü hiç etkilemiyor — orada 21 px'lik metin bağlantısı sorun
   değil ve boşlukları büyütmek alt bilgiyi gereksiz yayardı.

   GÖRÜNÜM DEĞİŞMİYOR: eklenen şey yalnızca dolgu (padding) ve negatif
   dış boşluk; yazı boyutu, renk ve hizalama aynı kalıyor, öğeler
   birbirini itmiyor. */
@media (hover: none) and (pointer: coarse){
  /* Şerit kapatma düğmesi — 28x28 idi, gerçekten basılan tek kontrol. */
  .devbar-x{ width:40px; height:40px; }

  /* Alt bilgi bağlantıları: 21 px yükseklikteydi. Dolgu dokunma alanını
     büyütüyor, negatif margin satır aralığının açılmasını engelliyor. */
  .foot-links a,
  .foot-legal a,
  /* "Tüm Sıralama →" — sıralama kutusunun altındaki tek bağlantı,
     ölçüldü: 15 px yükseklik. */
  .board-foot a{
    display:inline-block;
    padding:11px 6px;
    margin:-11px -6px;
  }
}