/* ============================================================================
   1299 Mobile — GÖRSEL RÖTUŞ KATMANI            (2026-07-28)

   AMAÇ: "sayfa çok kaba" geri bildirimi. Temanın kendi CSS'ine DOKUNULMADI;
   bu dosya en son yüklenir ve sadece üstüne yazar. Beğenilmezse top.php'deki
   tek <link> satırı silinince her şey eski hâline döner.

   TEŞHİS: Altın renk (#D4AF37) 22 ayrı yerde 2px KALIN ÇERÇEVE olarak
   kullanılmış — menü, açılır kutular, üst bar, butonlar, hepsi altın kutu
   içinde. Her şey vurgulanınca hiçbir şey vurgulanmamış oluyor ve arayüz
   kalabalık/ucuz görünüyor.

   YAKLAŞIM: Altın ARTIK BİR VURGU. Yapısal çizgiler nötr gri; altın sadece
   aktif sekme, başlık altı ve ana çağrı butonunda. Ayrıca boşluk ritmi
   sıkılaştırıldı ve çok geniş ekranlarda içerik genişliği sınırlandı.
   ============================================================================ */

:root{
  --altin:#D4AF37;
  --altin-sonuk:rgba(212,175,55,.35);
  --cizgi:#2a2a34;          /* yapısal çizgi — nötr */
  --zemin:#15151b;
  --zemin-kart:#1b1b22;
  --metin:#cfcfd6;
  --metin-sonuk:#8b8b96;
}

/* ── 1. Kalın altın çerçeveleri incelt ─────────────────────────────────── */
.dropdown-menu{
  border:1px solid var(--cizgi) !important;
  border-top:2px solid var(--altin) !important;   /* altın sadece üstte, imza gibi */
  border-radius:6px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.45) !important;
  padding:6px 0 !important;
}

/* Menü öğeleri arasındaki altın dikey çizgiler kalabalık yapıyordu */
.navbar-nav > li{
  border-right:0 !important;
  border-left:0 !important;
}
.navbar-nav > li > a{
  padding:14px 16px !important;
  letter-spacing:.2px;
}
/* Aktif/hover'da altın ALT çizgi — çerçeve yerine */
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a{
  background:transparent !important;
  box-shadow:inset 0 -2px 0 var(--altin);
  color:#fff !important;
}

/* ── 2. Üst bar ve duyuru şeridi ───────────────────────────────────────── */
.top-toolbar{
  height:42px !important;
  border-top:0 !important;
  border-bottom:1px solid var(--cizgi) !important;
  box-shadow:none !important;
}
.ticker,
.container-fluid.ticker{
  border-top:1px solid var(--cizgi) !important;
  border-bottom:1px solid var(--cizgi) !important;
  background:#17171d !important;
}
.ticker-title{
  background:transparent !important;
  color:var(--altin) !important;
  font-weight:600;
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.newsticker li{ font-size:13px !important; color:var(--metin) !important; }

/* ── 3. Butonlar — parlak altın degrade yerine sakin dolgu ─────────────── */
.btn_red,.button-medium,.btn.btn_red,input[type="submit"]{
  background:linear-gradient(180deg,#c9a233 0%,#a9862a 100%) !important;
  border:1px solid #8a6d22 !important;
  border-radius:5px !important;
  color:#1a1a1a !important;
  font-weight:600 !important;
  letter-spacing:.3px;
  text-shadow:none !important;
  transition:filter .18s ease;
}
.btn_red:hover,.button-medium:hover,input[type="submit"]:hover{
  filter:brightness(1.12);
}

/* ── 4. Başlıklar — boyutu düşür, altın alt çizgi ile ayır ─────────────── */
.main-content-title h3{
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:.3px;
  padding:0 0 8px !important;
  margin:0 0 14px !important;
  border-bottom:1px solid var(--cizgi) !important;
  position:relative;
  color:#e6e6ec !important;
}
.main-content-title h3::after{     /* altın vurgu sadece başlığın altında kısa bir çizgi */
  content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--altin);
}
.main-content-title h3 i{ color:var(--altin) !important; margin-right:7px; }

/* Sayfa üstündeki dev başlık */
.slider h1{
  font-size:22px !important;
  font-weight:600 !important;
  letter-spacing:.4px;
  padding:18px 0 !important;
  margin:0 !important;
}

/* ── 5. Boşluk ritmi — her şey birbirine yapışıktı ─────────────────────── */
.content-wrapper{ padding-top:18px !important; }
.main-content{ margin-bottom:22px !important; }
.single-post{ padding:12px 0 !important; border-bottom:1px solid var(--cizgi); }
.single-post:last-child{ border-bottom:0; }
.news-title a{ font-size:14px !important; line-height:1.45 !important; }

/* ── 6. Tablolar — sıralama/drop listesi okunaklı olsun ────────────────── */
table.white,.accountinfo,#prizes_table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  width:100% !important;
}
table.white th,#prizes_table th,.accountinfo th{
  background:#1f1f27 !important;
  color:var(--altin) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:10px 12px !important;
  border-bottom:1px solid var(--cizgi) !important;
}
table.white td,#prizes_table td,.accountinfo td{
  padding:9px 12px !important;
  font-size:13px !important;
  border-bottom:1px solid #232330 !important;
}
table.white tr:hover td,#prizes_table tr:hover td{ background:#1c1c24 !important; }

/* ── 7. Çok geniş ekranda içerik dağılmasın ────────────────────────────── */
@media (min-width:1600px){
  .container{ max-width:1320px !important; }
}

/* ── 8. Mobil — dokunma hedefleri ve taşma ─────────────────────────────── */
@media (max-width:768px){
  .slider h1{ font-size:18px !important; padding:14px 0 !important; }
  .main-content-title h3{ font-size:14px !important; }
  .navbar-nav > li > a{ padding:12px 14px !important; }
  /* Geniş tablolar sayfayı yana kaydırmasın, kendi içinde kaysın */
  .main-content,.entry-content{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}


/* ============================================================================
   ============  v2 — TASARIM SİSTEMİ  ============            (2026-08-05)

   28 Temmuz'daki ilk geçiş menü/tablo/boşluk düzeltmişti ama BUTONLARIN
   GEOMETRİSİNE hiç dokunmamıştı; yalnızca rengini değiştirmişti. Kullanıcı
   geri bildirimi: "butonlar kutulardan taşıyor, arka plan amatör, sayfanın
   bir sürü eksiği var".

   TEŞHİS — taşmanın kökü:
     Şablon bir E-SPOR TURNUVA temasıdır (CSS'i tournaments/matches/teams
     sınıflarıyla dolu). Butonları İngilizce kısa metinlere göre ölçülmüş
     (SUBMIT, LOGIN). Türkçe karşılıkları çok daha uzun:
         "SUBMIT"          (6)  -> "KABUL ET & GÖNDER"            (18)
         "SEND TO EMAIL"  (13)  -> "BAĞLANTIYI E-POSTAMA GÖNDER"  (27)
     Buton `display:inline-block` + `white-space:nowrap` olduğu için metin
     sarmalanamıyor, kutuyu yatayda yarıyor. Çözüm rengi değiştirmek değil;
     butonu ESNEK yapmak.

   YAKLAŞIM: Bu katman hâlâ tek override dosyası. Tema CSS'ine dokunulmuyor;
   top.php'deki tek <link> silinince her şey eski hâline döner.
   ============================================================================ */

:root{
  /* Ölçü ritmi — 4px tabanlı. Boşluklar artık göz kararı değil. */
  --bosluk-1:4px;  --bosluk-2:8px;  --bosluk-3:12px;
  --bosluk-4:16px; --bosluk-5:24px; --bosluk-6:32px;

  --kose:6px;                 /* tek köşe yarıçapı — her yerde aynı */
  --zemin-koyu:#0d0d10;
  --metin-parlak:#e6e6ec;

  /* Başlık yazı tipi: Georgia SİSTEM fontudur, ağ isteği YOK.
     Sayfa zaten 3 ayrı Google font ailesi indiriyor; dördüncüyü eklemek
     yerine hukuki metinler/doğrulama ekranlarıyla aynı serif kullanılıyor. */
  --font-baslik:Georgia,'Times New Roman',serif;
}

/* ── 9. LOGO — amblem kare, şablon geniş yazı-logo bekliyordu ───────────── */
/* Önceki sahibin logosu 2220x671 (geniş). Bizimki 480x408 (kare). Genişlik
   sınırlanırsa yükseklik patlıyor; bu yüzden YÜKSEKLİK sabitleniyor. */
.logo.col-lg-4{ padding:10px !important; }
.brand img{
  height:82px !important;
  width:auto !important;
  max-width:100% !important;
  object-fit:contain;
}
@media (max-width:768px){
  .brand img{ height:56px !important; }
}

/* ── 10. BUTONLAR — taşmanın asıl çözümü ───────────────────────────────── */
.btn_red,.button-medium,.btn.btn_red,
input[type="submit"],button[type="submit"]{
  /* inline-flex: metin ortalanır VE kutu içeriğe göre büyür */
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:var(--bosluk-2);

  /* Taşmanın kökü buydu: nowrap kaldırıldı, uzun Türkçe metin sarmalanabilir */
  white-space:normal !important;
  word-break:normal;
  text-align:center;
  line-height:1.3 !important;

  /* Sabit genişlik YOK; içerik kadar, ama dokunma hedefi kadar da küçülmesin */
  width:auto;
  min-height:44px;            /* mobil dokunma hedefi alt sınırı */
  padding:12px 22px !important;
  box-sizing:border-box;

  font-size:13.5px !important;
  letter-spacing:.4px;
  border-radius:var(--kose) !important;
  cursor:pointer;
}

/* Form içindeki ana gönder butonu tam genişlik — hizası bozulmasın */
form .btn_red[style*="width: 100%"],
form input[type="submit"][style*="width: 100%"],
.register-form-wrapper form button[type="submit"],
.register-form-wrapper form input[type="submit"]{
  width:100% !important;
}

/* Buton bir sütunun içindeyse sütunu yarmasın */
.form-group .button-medium,
.form-group button[type="submit"],
.form-group input[type="submit"]{
  max-width:100%;
}

/* Klavyeyle gezenler için görünür odak — şablonda outline:none!important
   ile TAMAMEN kapatılmıştı (erişilebilirlik sorunu). Geri getiriliyor. */
.btn_red:focus-visible,.button-medium:focus-visible,
input[type="submit"]:focus-visible,button[type="submit"]:focus-visible,
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--altin) !important;
  outline-offset:2px;
}

/* ── 11. FORM ALANLARI — şablon varsayılanı bırakılmıştı ────────────────── */
input[type="text"],input[type="password"],input[type="email"],
input[type="number"],input[type="tel"],select,textarea,
.register,.form-control{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px !important;
  background:#0c0c11 !important;
  border:1px solid var(--cizgi) !important;
  border-radius:var(--kose) !important;
  color:var(--metin-parlak) !important;
  font-size:14.5px !important;
  line-height:1.4;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus,.register:focus,.form-control:focus{
  border-color:var(--altin) !important;
  box-shadow:0 0 0 3px var(--altin-sonuk) !important;
}
input::placeholder,textarea::placeholder{ color:#5f5f6b !important; }

/* Etiketler — şablonda sağa yaslıydı, uzun Türkçe etiketlerde kırılıyordu */
.control-label,.label-left label{
  text-align:left !important;
  float:none !important;
  width:auto !important;
  display:block;
  margin:0 0 var(--bosluk-2);
  font-size:12.5px;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--metin-sonuk);
}
/* Bootstrap sütun sınıfları formu daraltıyordu; form alanları tam genişlik */
.label-left .col-sm-8,.label-left .col-sm-10,
.register-form-wrapper .col-sm-8,.register-form-wrapper .col-sm-10{
  width:100% !important;
  float:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.form-group{ margin-bottom:var(--bosluk-4) !important; }

/* Onay kutuları — tıklama hedefi küçüktü */
input[type="checkbox"],input[type="radio"]{
  width:17px; height:17px;
  min-width:17px;
  accent-color:var(--altin);
  cursor:pointer;
  vertical-align:middle;
}

/* ── 12. ARKA PLANLAR — telifli / tür dışı görseller kaldırıldı ─────────── */
/* .slider ve .single-post-page, Blizzard'a ait bir World of Warcraft
   görselini (bg1.jpg) kullanıyordu; karantinaya alındı. registerbg.jpg de
   bir BİLİM-KURGU UZAY ASKERİ idi — ortaçağ temalı oyunda yanlış.
   Yerine derinlik veren nötr degrade; FAZ 3'te Unity'den alınacak gerçek
   oyun görüntüleriyle değiştirilecek. */
.slider,
body.single-post-page,
.content-wrapper[style*="registerbg"],
section[style*="registerbg"]{
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.07) 0%, transparent 60%),
    linear-gradient(180deg,#15151b 0%,var(--zemin-koyu) 100%) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
.slider{ border-bottom:1px solid var(--cizgi); }

/* ── 13. BAŞLIK TİPOGRAFİSİ — serif imza ───────────────────────────────── */
.slider h1,.main-content-title h3{ font-family:var(--font-baslik) !important; }
.slider h1{ color:var(--metin-parlak) !important; }

/* ── 14. KART/KUTU TUTARLILIĞI ──────────────────────────────────────────── */
.main-block-content,.register-form-wrapper,.main-content{
  background:var(--zemin-kart);
  border:1px solid var(--cizgi);
  border-radius:var(--kose);
  padding:var(--bosluk-5) !important;
}
.main-block-top{
  font-family:var(--font-baslik);
  font-size:16px;
  color:var(--metin-parlak);
  padding:0 0 var(--bosluk-3);
  margin:0 0 var(--bosluk-4);
  border-bottom:1px solid var(--cizgi);
}

/* ── 15. HİÇBİR ŞEY SAYFAYI YANA KAYDIRMASIN ────────────────────────────── */
html,body{ max-width:100%; overflow-x:hidden; }
img,video,table{ max-width:100%; }

/* ── 16. Giriş yapmış kullanıcı rozeti ─────────────────────────────────── */
/* MEVCUT HATA (benim değişikliğim değil — kural dökümünde yalnızca temanın
   style.css'i eşleşiyor): `.user-avatar` float+width:auto ile daralması
   gerekirken 274px'e yayılıyordu, çünkü içindeki `a.username` genel
   `.username` kuralından 172px genişlik alıyor. Sonuç: avatarın kırmızı
   halkası 50px'lik resmin etrafında dev bir KAPSÜL olarak çiziliyordu.
   Ölçü burada sabitleniyor; sebep temada, düzeltme bu katmanda. */
/* NOT: Once display:flex denendi; anchor flex ogesi olarak DARALDI ve
   50px'lik resim 18px'e ezildi. Flex'e gerek yok — sabit olcu yeterli. */
.user-avatar{
  width:58px !important;
  height:58px !important;
  padding:4px !important;
  box-sizing:border-box !important;
  border-radius:50% !important;
  overflow:hidden;
}
.user-avatar a.username{
  width:50px !important;
  height:50px !important;
  display:block !important;
  float:none !important;
  padding:0 !important;
}
.user-avatar img{
  width:50px !important;
  height:50px !important;
  border-radius:50%;
  object-fit:cover;
}