/* DERLENMİŞ DOSYA -- ELLE DÜZENLEME.
   Kaynak: assets/stil/*.css. Buradaki her değişiklik bir sonraki
   sayfa yüklemesinde siliniyor. Bölümü stil/ altında bul ve orada
   düzenle; derleme kendiliğinden çalışıyor (venny_stil_derle).
   Parça sırası ad sırasıdır ve CSS'te sıra özgüllük demektir. */

/* ==== 00-belirtec.css ==== */
/* ============================================================================
   VENNY - tasarım belirteçleri
   ============================================================================
   Düzen serahor.com'un iskeletini izliyor: iki satırlı başlık, kısayol
   şeridi, üç kolonlu pano, sol altta yapışık panel.

   ŞEKİL - kademeli, tek tip değil
   İlk denemede her kutu pahlıydı. Kırk yerde tekrarlanan bir kesim artık
   imza değil doku oluyor ve şablon gibi okunuyor. Şimdi kural şu:

     yüzeyler ve denetimler   3px yarıçap, 1px kılcal kenar
     çipler, rozetler         2px yarıçap
     PAH (köşe kesimi)        yalnız iki yerde: birincil düğme ve
                              seçili sekme

   Yani sayfada iki tane pahlı öğe var, ikisi de "buradasın / buna bas"
   diyen öğeler. Geri kalan her şey sakin dikdörtgen.

   MALZEME
   Gölge yok, parıltı yok, ama düz de değil: her yüzeyin üstünden %4,5
   alfalı bir ışık geçiyor (--parlama) ve üst kenarda 1px iç aydınlatma
   var. Kutu çizgiyle değil, malzemeyle duruyor. Tek gerçek gölge sol
   alttaki yüzen panelde.

   Önemli panellerde sol kenarda 2px camgöbeği şerit (.pnl--vurgu) var.
   Her kart aynı ağırlıkta olmasın diye: göz önce oraya gidiyor.

   RENK
   Palet 27 Ağustos'ta müşterinin verdiği beş renge geçti: #07111F zemin,
   #0D1B30 kartlar, #18D8FF vurgu, #6C5CE7 ikinci vurgu, #FFFFFF yazı.
   Nötr basamakların tonu ~213 derecede; gri hiçbir yerde gerçekten gri
   değil, hep lacivere kaçıyor. Saf siyah yok.

   İKİ VURGU VAR VE İKİSİNİN İŞİ AYRI:

     --accent    (#18D8FF, camgöbeği)  OYUN. Canlı sunucu, sıralama,
                                       bağlan, rütbe rozetleri.
     --accent-2  (#6C5CE7, mor)        PARA. Prime rozeti, mağaza
                                       paketleri, ücretli her şey.

   Bu ayrım kural, tercih değil: ziyaretçi kadroya bakarken "hangi ajan
   parayla" sorusunun cevabını renkten okuyor, etiketi okumadan. İkinci
   vurguyu "çeşitlilik olsun" diye kullanmak onu üçüncü bir vurgulama
   diline çevirir ve aşağıdaki kademe kuralını bozar.

   --alarm (#ff6b7f) üçüncü renk değil, durum: hata ve ban.

   Rütbe rozetleri ayrı renk KULLANMIYOR, aynı camgöbeğinin üç alfa
   kademesini kullanıyor: rütbe yükseldikçe rozet parlıyor.

   TİPOGRAFİ
     Saira Condensed  başlık, sekme, düğme (600/700, sıkı negatif aralık)
     Barlow           gövde ve arayüz metni (13px)
     JetBrains Mono   her sayı, her etiket, her SteamID, her adres

   Başlıklarda 700 ağırlık var. Ölçülen SaaS sitelerinin 300-510 aralığının
   dışında, bilerek: burası bir CS 1.6 sunucusu.

   İKON
   Phosphor Icons regular (MIT). Emoji yok: serahor'daki 🎮 🏆 🎫 dizisi her
   işletim sisteminde başka görünüyor.
   ============================================================================ */

:root {
  /* İkisi müşteriden geldi (--bg, --surface); aradaki ve üstteki basamak
     onlardan türetildi ki dört kademe eşit aralıklı kalsın. */
  --bg:        #07111F;
  --bg-2:      #0A1626;
  --surface:   #0D1B30;
  --surface-2: #13243F;

  /* Notr ton tabani. Sitede 24 yerde ayri ayri yaziliydi ve palet
     degisince yirmi dordu de eski tonda kaldi -- kenarlar yeni maviye
     gecerken satir ayraclari eskisinde. Tek deger, tek yer. */
  --ton: 140 186 240;

  --edge:      rgb(var(--ton) / 0.14);
  --edge-2:    rgb(var(--ton) / 0.26);
  --edge-cyan: rgb(24 216 255 / 0.48);

  /* --ink saf beyaz, müşterinin listesinde öyle yazıyor. Alt iki basamak
     ÖLÇÜLEREK seçildi, göze göre değil.

     --ink-3 on bir piksellik etiket rengi ve KULLANILDIĞI EN AÇIK YÜZEYDE
     4,5:1'i geçmek zorunda. O yüzey --surface değil --surface-2: öne çıkan
     mağaza paketi ve podyumun birinci basamağı onu kullanıyor. İlk deneme
     --surface'e göre ayarlanmıştı ve orada 4,71 veriyordu ama --surface-2
     üstünde 4,23'e düşüyordu -- iki paket etiketi eşiğin altında kalmıştı.
     Şimdiki değer --surface-2'de 4,63, --surface'te 5,14.

     Eski #61729b eşiği hiçbir yerde geçmiyordu (3,7:1). */
  --ink:   #FFFFFF;
  --ink-2: #9AB4D8;
  --ink-3: #7A8CB6;

  /* OYUN rengi. Nerede kullanıldığı başlıktaki RENK bölümünde yazılı. */
  --accent:      #18D8FF;
  --accent-deep: #0E6E8C;
  --accent-ink:  #041F2B;
  --accent-wash: rgb(24 216 255 / 0.09);

  /* PARA rengi. Prime ve mağaza. Süs olarak kullanılmıyor.
     İKİ MOR VAR, ÇÜNKÜ ÖLÇÜLDÜ. Müşterinin verdiği #6C5CE7 kart yüzeyinde
     3,55:1 kontrast veriyor; 11 piksellik etiket için eşik 4,5:1. Yani bu
     mor DOLGU ve kenar olarak doğru (üstüne beyaz yazı 4,86:1), YAZI olarak
     değil. Mor yazı gerektiğinde --accent-2-yaz kullanılıyor: aynı mor
     ailesinden, 5,06:1. Tek değerle idare etmek ya okunmayan etiket ya da
     morun hiç yazı olamaması demekti. */
  --accent-2:      #6C5CE7;
  --accent-2-yaz:  #8B79F5;
  --accent-2-ink:  #FFFFFF;
  --accent-2-wash: rgb(108 92 231 / 0.14);
  --edge-mor:      rgb(108 92 231 / 0.52);

  /* Pahlı öğelerin (birincil düğme, seçili sekme) degradesi. VURGUDAN
     TÜRETİLİYOR, elle yazılmıyor.

     Eskiden üç yerde ayrı ayrı "var(--vurgu-degrade)"
     yazıyordu ve biri #45c3c6 ile sapmıştı -- kimsenin fark etmediği bir
     ton farkı. 27 Ağustos'ta palet değişince üçü birden ESKİ turkuazda
     kaldı: sayfanın en görünür öğesi, "Oyuna bağlan" düğmesi, yeni maviye
     geçmedi. Hatayı tarayıcıdan renk okuyarak bulduk, gözle değil.

     color-mix vurgu değiştiği gün degradeyi kendiliğinden taşıyor.

     İKİ KEZ YAZILI VE BU YEDEK. color-mix'i tanımayan bir tarayıcıda ikinci
     bildirim geçersiz sayılıp düşüyor ve birinci kalıyor. Yedek olmasaydı
     düğmenin zemini HİÇ olmazdı: koyu yazı koyu sayfada, yani görünmez bir
     "Oyuna bağlan". Sabit çift tek bir yerde duruyor -- eskiden dört yere
     dağılmış olan da buydu. */
  --vurgu-degrade: linear-gradient(180deg, #3DDEFF, #15BADB);
  --vurgu-degrade: linear-gradient(180deg,
                     color-mix(in srgb, var(--accent), #fff 16%),
                     color-mix(in srgb, var(--accent), #000 14%));

  --vurgu-degrade-parlak: linear-gradient(180deg, #66E6FF, #17D4FA);
  --vurgu-degrade-parlak: linear-gradient(180deg,
                     color-mix(in srgb, var(--accent), #fff 32%),
                     color-mix(in srgb, var(--accent), #000 2%));

  --alarm:      #ff6b7f;
  --alarm-wash: rgb(255 107 127 / 0.10);

  --ff-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ff-ui:      'Barlow', system-ui, -apple-system, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --t-11: 11px;
  --t-13: 13px;
  --t-15: 15px;
  --t-20: 20px;
  --t-28: 28px;
  --t-34: 34px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 20px;
  --s5: 32px;
  --s6: 56px;

  /* GENİŞLİK MERDİVENİ. Bir ölçü değil üç: sayfanın ritmi buradan geliyor.

     28 Ağustos'ta ana sayfa ölçüldü ve altı bölümün altısı da 1320 pikseldi.
     Hiçbiri diğerinden geniş ya da dar değil, yani hero'dan sonra 2900 piksel
     boyunca göz her bandı aynı ağırlıkta okuyor. Sayfanın "aynı şeyin altı
     tekrarı" gibi ilerlemesinin ölçülebilir sebebi bu.

     Karşılaştırma da bunu söylüyor: serahor.com tek bir ölçü kullanıyor ama o
     ölçü 914 piksel, yani yoğun. VENNY 1320'de yayılıyor ve yönetim paneli
     gibi okunuyor. Üç kademe ikisini birden yapıyor -- dar olan yoğun, geniş
     olan hiyerarşi kuruyor.

     --measure-dar 860: metnin ağır olduğu yerler için. 13 pikselde 860 piksel
     yaklaşık 95 karakter; craft floor 65-75 istiyor ve tek sütunda öyle
     olacak, çok sütunlu bloklarda sütun başına düşen ölçü zaten altında.

     --measure-genis: tam kanama. Kadro duvarı için, çünkü orada içerik
     görsel ve görsel kenardan kenara gitmeyi hak ediyor.

     Kademeler ARASI FARK BÜYÜK olmak zorunda: 1320 ile 1200 arasında gidip
     gelmek ritim kurmuyor, ölçü hatası gibi görünüyor. 860 -> 1320 -> tam. */
  --measure:       1320px;
  --measure-dar:    860px;
  --measure-genis:  100%;
  --gutter: clamp(16px, 3vw, 32px);

  --r:   3px;
  --r-s: 2px;
  --cut: 9px;

  /* PARLAMA YÖNLÜ, TEPEDEN DEĞİL. Üstten aşağı düz bir beyaz solma her
     yüzey kitaplığının varsayılanı ve hiçbir şey söylemiyor. Sayfanın
     ışığı belli bir yerden geliyor -- body::before'un ilk havuzu sol üstte,
     10% -10%'da. Parlama artık o yönü izliyor (105deg) ve sitedeki bütün
     cam yüzeyler aynı ışığı alıyor gibi duruyor.

     Şiddet 0,045'ten 0,07'ye çıktı: düz zemin üstünde duran bir cam
     yüzeyin (kısayol kutucukları, hero görselinin altındakiler) arkasında
     bulanıklaştıracak bir şey yok, yani malzemeyi cam yapan tek şey KENDİ
     ışığı. Ölçüldü: 0,045'te o kutucuklar koyu dikdörtgen gibi duruyordu. */
  --parlama: linear-gradient(105deg,
               rgb(255 255 255 / 0.07) 0%,
               rgb(255 255 255 / 0.025) 34%,
               rgb(255 255 255 / 0) 68%);
  --ic-isik: inset 0 1px 0 rgb(255 255 255 / 0.05);
  --golge:   0 16px 36px rgb(2 6 18 / 0.58), 0 2px 6px rgb(2 6 18 / 0.45);

  /* ------------------------------------------------------------------ CAM
     Müşteri "cam efektli kartlar + hafif glow + ince border" istedi.

     DÜZ KOYU ZEMİNDE backdrop-filter HİÇBİR ŞEY YAPMAZ. Bulanıklaştıracak
     bir şey olmadığı sürece cam, rengi biraz açılmış bir dikdörtgendir. O
     yüzden önce sayfanın arkasına ışık havuzları kondu (body::before) ve
     kartlar onları buğuluyor. Işık havuzları iki vurgu renginden: sol üstte
     camgöbeği, sağ üstte mor, altta yine camgöbeği.

     Yüzey SAYDAM ama %55 -- daha saydamı yazıyı okunmaz yapıyor, daha
     opağı camı yok ediyor. Ölçüldü: %55'te --ink-3 etiketleri hâlâ 4,5:1
     eşiğini geçiyor.

     Kenar iki katmanlı: dıştan 1px kılcal çizgi, içten üstte 1px ışık.
     Cam kenarını tek çizgiyle çizmek onu "kutu" yapıyor; ikinci katman
     malzemeye kalınlık veriyor.

     --cam-isik'in ALT kenarı da var ve üstünkinin tersi: üstte ışık, altta
     gölge. Yalnız üstte beyaz çizgi olan bir yüzey "üstü aydınlatılmış
     dikdörtgen"; iki kenarı birden olan bir yüzey KALINLIĞI olan bir pane.
     Camı camsı yapan şey saydamlık değil, kalınlığının görünmesi. */
  --cam-bg:      rgb(13 27 48 / 0.55);
  --cam-bg-2:    rgb(19 36 63 / 0.62);
  --cam-kenar:   rgb(140 186 240 / 0.20);
  --cam-bulanik: blur(16px) saturate(1.4);
  --cam-isik:    inset 0 1px 0 rgb(255 255 255 / 0.09),
                 inset 0 -1px 0 rgb(2 6 18 / 0.34);
  --cam-golge:   0 1px 2px rgb(2 6 18 / 0.36), 0 14px 32px -18px rgb(2 6 18 / 0.7);

  /* Hafif glow: kenarın hemen dışında, vurgu renginden. Odak/hover ve
     ETKİN durumlar için; sabit süs değil. */
  --cam-parilti: 0 0 0 1px rgb(24 216 255 / 0.22), 0 0 26px -6px rgb(24 216 255 / 0.35);
  --cam-parilti-mor: 0 0 0 1px rgb(108 92 231 / 0.28), 0 0 26px -6px rgb(108 92 231 / 0.4);

  --marka-h: 66px;
  --sekme-h: 44px;

  --hiz: 140ms;
  --hiz-2: 220ms;
  --yay: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==== 01-temel.css ==== */
/* ---------------------------------------------------------------- temel ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Çapayla gelinen bölüm ekranın tam tepesine yapışmasın. Üst çubuk yapışık
   değil, yani başlık gizlenmiyor; mesele nefes: kenara dayanmış bir başlık
   "sayfa buradan başlıyor" diyor, oysa yukarısı da sayfa. Menüdeki
   "Yönetim Kurulu" ve sunucu.php'deki #kurallar / #notlar üçü de buradan
   geçiyor. */
section[id], article[id] { scroll-margin-top: var(--s4); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-13) / 1.6 var(--ff-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* IŞIK HAVUZLARI. Camın var olma şartı: düz koyu bir zeminde
   backdrop-filter bulanıklaştıracak bir şey bulamıyor ve kart yalnız
   "rengi biraz açılmış dikdörtgen" oluyor. Bu katman sayfanın arkasına üç
   yumuşak ışık koyuyor, kartlar onları buğuluyor.

   İki vurgu rengi de burada ve yerleri rastgele değil: camgöbeği sol üstte
   (hero'nun ve canlı sunucunun bulunduğu yer), mor sağ üstte, aşağıda yine
   camgöbeği. Sayfa yukarıdan aşağı camgöbeği-mor-camgöbeği okunuyor.

   fixed + z-index -1: sayfa kaydıkça ışık yerinde kalıyor, yani ışığın
   kaynağı ekranın kendisi gibi davranıyor -- kaydırmayla birlikte
   sürüklenen bir ışık, ışık değil doku olurdu.

   pointer-events yok, tıklamayı engellemiyor. */
/* IŞIK HAVUZLARI GÖRÜNÜMÜN İÇİNDE. İlk hâlinde merkezleri -10% ve 106%'daydı,
   yani ikisi ekranın DIŞINDA duruyordu ve sayfaya yalnız sönük kuyrukları
   giriyordu. Ölçülebilir sonucu: görünümün orta bandında -- kısayol
   kutucukları, Yönetim Kurulu şeridi, dörtlü pano, tam olarak camın en çok
   kullanıldığı yer -- arkada bulanıklaştıracak hiçbir şey yoktu ve o
   yüzeyler koyu dikdörtgen gibi duruyordu.

   Havuz `fixed`: sayfa kaydıkça yerinde kalıyor. Odadaki bir ışık gibi
   davranıyor, sayfaya boyanmış bir doku gibi değil. Kaydırmayla sürüklenen
   bir ışık, ışık olmaktan çıkardı.

   Üçü de farklı boyda ve farklı şiddette. Eşit üç havuz simetri kurar ve
   simetrik ışık yönsüz ışıktır; hangi taraftan geldiği okunmazsa yüzeyler
   de nereye baktığını bilmez. --parlama'nın 105 derecesi bu ilk havuzu
   izliyor. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 6% 14%,  rgb(24 216 255 / 0.16), transparent 62%),
    radial-gradient(46rem 34rem at 96% 30%, rgb(108 92 231 / 0.15), transparent 60%),
    radial-gradient(64rem 44rem at 44% 92%, rgb(24 216 255 / 0.10), transparent 64%);
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Tarayıcının kendi çizdiği iki parça. Seçim, kaydırma çubuğu ve odak
   halkası zaten temalıydı; imleç ile onay kutusu kalmıştı ve ikisi de
   varsayılanda sistem mavisi geliyordu -- lacivert bir sayfada Windows'un
   #0078d4'ü, paletin dışından gelen tek renk oluyordu. */
:root { accent-color: var(--accent); }
input, textarea, select { caret-color: var(--accent); }

/* ÜÇÜNCÜ PARÇA: açılır listenin kendisi.
   <option> rengi devralıyordu, yani beyaz; zemini ise sayfanın değil
   İŞLETİM SİSTEMİNİN. Windows'ta açık temada beyaz üstüne beyaz oluyordu ve
   destek formundaki altı konu başlığı okunmuyordu. Sayfada görünmüyor,
   çünkü liste ancak tıklanınca açılıyor -- tarayıcıdan renk okunarak
   bulundu, gözle değil.

   Zemin --surface, kutunun kendisiyle aynı: liste açıldığında kutunun
   devamı gibi duruyor. */
option { background-color: var(--surface); color: var(--ink); }

/* ----------------------------------------------------------------- yüzey ---
   Tek ilkel: .pnl. Kenar + yarıçap + üstten geçen ışık. Eskiden iki kırpılmış
   sözde elemanla pah çiziliyordu; o mekanizma tümden kalktı, artık gerçek
   border ve box-shadow kullanılabiliyor. */

.pnl {
  --pnl-bg: var(--cam-bg);
  --pnl-edge: var(--cam-kenar);
  position: relative;
  border: 1px solid var(--pnl-edge);
  border-radius: var(--r);
  background: var(--parlama), var(--pnl-bg);
  -webkit-backdrop-filter: var(--cam-bulanik);
  backdrop-filter: var(--cam-bulanik);
  box-shadow: var(--pnl-golge, var(--cam-isik), var(--cam-golge));
  transition: border-color var(--hiz-2) linear, background-color var(--hiz-2) linear,
              box-shadow var(--hiz-2) linear, transform var(--hiz-2) var(--yay);
}

/* KENARIN ÜST YARISI PARLAK, ALT YARISI DEĞİL. Tek renkli 1px çizgi kartı
   kutu yapıyor; cam bir yüzeyin üst kenarı ışığı yakalar, alt kenarı
   gölgede kalır. Sözde eleman kullanılıyor çünkü border tek renk alıyor ve
   degrade kenar için başka yol yok.

   inset + pointer-events: none: kartın içeriğine ve tıklamasına
   dokunmuyor. */
.pnl::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 52%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Sol kenarda camgöbeği şerit. Sayfadaki en önemli iki panelde var, hepsinde
   yok: hiyerarşi ancak bazı şeyler öne çıkmazsa çalışıyor. */
.pnl--vurgu {
  --pnl-golge: var(--ic-isik), inset 2px 0 0 var(--accent);
}

/* Pahlı iki öğe (birincil düğme ve seçili sekme) kesimi kendi kuralında
   taşıyor; ayrı bir .pah yardımcı sınıfı yok, çünkü üçüncü bir yerde
   kullanılması istenmiyor. */

/* ==== 02-tipografi.css ==== */
/* ------------------------------------------------------------- tipografi --- */

h1, h2, h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
}

h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 0.94; letter-spacing: -0.032em; }
h2 { font-size: var(--t-34); line-height: 1.02; letter-spacing: -0.022em; }
h3 { font-size: var(--t-20); font-weight: 600; line-height: 1.15; letter-spacing: -0.012em; }

/* venny_marka()'nın <span lang="en"> sarmalayıcısı GÖRÜNMEZ olmalı: tek işi
   sözcüğü İngilizce kasa kuralına almak, biçime karışmak değil.

   Karışıyordu. `.kisayol span` gibi gevşek alt-öğe seçicileri sarmalayıcıyı
   da yakalıyor ve 27 Ağustos'ta kısayol kutucuğundaki "Discord" başlığı
   yanındaki dördü 20px Saira beyazken 11px mono gri çıkıyordu. Sitede bu
   biçimde altı seçici var; her birini tek tek daraltmak yerine sarmalayıcı
   kendini savunuyor. Böyle bir seçici yarın da yazılabilir.

   Nitelik iki kez yazılı, yazım hatası değil: `[lang="en"]` tek başına (0,1,0)
   ve `.kisayol span`'ın (0,1,1)'ine yeniliyor. İkilenince (0,2,0) oluyor ve
   dosyanın neresinde durduğundan bağımsız kazanıyor. !important yerine bu:
   önceliği yükseltmek, tartışmayı kapatmaktan farklı. */
[lang="en"][lang] {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  display: inline;
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.sonuk { color: var(--ink-2); }
.silik { color: var(--ink-3); }
.vurgu { color: var(--accent); }

/* Sayısal her şey mono ve tablo hizalı: 1.842 ile 227 alt alta gelince
   rakamlar aynı kolonda durmalı. */
.veri {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.rakam {
  font-family: var(--ff-mono);
  font-size: var(--t-28);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Veri etiketi. Başlık üstü süs değil; bir sayının ya da alanın adı. */
.lbl {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  color: var(--ink);
  background: rgb(var(--ton) / 0.09);
  border-radius: var(--r-s);
  padding: 2px 6px;
}

/* ------------------------------------------------------------------ ikon ---
   Phosphor regular, 256'lık ızgarada 16 birim kalınlık: 16px'te tam 1px,
   sayfadaki kılcal çizgilerle aynı ağırlık. Renk currentColor'dan geliyor.
   Her öğeye ikon konmuyor: sekmeler, kısayollar ve üç birincil düğme. */

.ikon { width: 16px; height: 16px; flex: none; }

/* ==== 03-duzen.css ==== */
/* ----------------------------------------------------------------- düzen --- */

/* Kabuk artık üç ölçüden birini alıyor. Varsayılan 1320; iki değişke ile
   daralıyor ya da kenara dayanıyor. Belirteç üzerinden yazılıyor, doğrudan
   max-width ile değil: bir bölümün ölçüsünü değiştirmek tek sınıf eklemek
   olsun, kural aramak olmasın. */
.kabuk {
  width: 100%;
  max-width: var(--kabuk-olcu, var(--measure));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Metnin ağır olduğu bölümler. 860 piksel, 13 pikselde okunur bir ölçü. */
.kabuk--dar { --kabuk-olcu: var(--measure-dar); }

/* Tam kanama: içerik görsel olduğunda kenardan kenara. Yan boşluk küçülüyor
   ama sıfırlanmıyor -- 1425 pikselde ızgara kenara yapışırsa kart kesilmiş
   gibi duruyor. */
.kabuk--genis { --kabuk-olcu: var(--measure-genis); padding-inline: var(--s4); }

/* Bölüm ritmi bilerek eşit değil: veri bölümleri sıkı, anlatı bölümleri
   geniş. Her bölüme aynı dolgu vermek en hızlı ucuzluk işareti. */
.blok       { padding-block: var(--s5); }
.blok--sik  { padding-block: var(--s4); }
.blok--bant { background: var(--bg-2); border-block: 1px solid var(--edge); }

.blok-basi {
  display: flex;
  align-items: last baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- başlık ---
   İki satır: marka satırı, sekme satırı. serahor'un iskeleti; oradaki toplam
   yükseklik 130px'e yakın, buradaki 110px. Yapışkan değil, serahor'da da
   değil: pano zaten ilk ekrana sığıyor. */

.ust {
  border-bottom: 1px solid var(--edge-2);
  background: linear-gradient(180deg, #0C192C, var(--bg-2));
}

/* Üç kolon: solda sunucu durumu, ortada marka, sağda düğmeler.
   Marka ortada ama ortalama pazarlığa açık: sağ blok büyüdüğünde marka
   çarpışmak yerine sola kayıyor.

   Önceden bu satır flex'ti ve yanlar mutlak konumluydu. Mutlak konumlu öğe
   akışta yer kaplamadığı için marka onların varlığından habersiz ortalanıyordu;
   girişliyken dördüncü düğme (Çıkış) eklenince 900-1090px arasında
   "VALORANT MOD" kuyruğu düğmelerin altına giriyordu. Izgara bunu eşiği
   kaydırarak değil, sınıfı ortadan kaldırarak çözüyor. */
.ust__marka {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--s3);
  height: var(--marka-h);
  border-bottom: 1px solid var(--edge);
}

.marka { display: flex; align-items: center; gap: var(--s3); }

/* Marka yazısı assets/img/venny-yazi.svg. Boyut <img> niteliklerinden
   geliyor -- üst çubukta 174x34, altbilgide 153x30, giriş ekranında 225x44 --
   ve burada PİNLENMİYOR. Pinlenseydi üç boyut CSS'te ikinci kez yaşardı ve
   biri kaydığında yazı ezilirdi.

   Eskiden burası Saira Condensed'e skewX(-8deg) ve metin gradyanı uygulanmış
   bir <span>'di. İki sorunu vardı: yazı tipi inene kadar Arial Narrow eğik
   duruyordu, ve yanındaki .marka__rozet hiç var olmamış bir venny-badge.png
   arıyordu. */
.marka__yazi { display: block; height: auto; }

.marka__kuyruk {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-20);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: flex-end;
  padding-bottom: 3px;
}

.ust__sol, .ust__sag {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.ust__sol { justify-self: start; }
.ust__sag { justify-self: end; }

/* Çıkış bir form olmak zorunda (POST + CSRF), ama başlıkta kutu gibi
   davranmamalı: display:contents ile düğme doğrudan .ust__sag'ın öğesi
   oluyor, aradaki form katmanı hizalamaya karışmıyor. */
.ust__cikis { display: contents; }

.sekmeler {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s1);
  height: var(--sekme-h);
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sekmeler a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding-inline: var(--s4);
  border-radius: var(--r) var(--r) 0 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: color var(--hiz) linear, background var(--hiz) linear;
}

.sekmeler a:hover { color: var(--ink); background: rgb(var(--ton) / 0.06); }
.sekmeler a .ikon { color: var(--ink-3); }
.sekmeler a:hover .ikon { color: var(--ink-2); }

/* Seçili sekme: sayfadaki iki pahlı öğeden biri. */
.sekmeler a[aria-current='page'] {
  color: var(--accent-ink);
  background: var(--vurgu-degrade);
  border-radius: 0;
  clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% 100%,
    0 100%
  );
  padding-inline: calc(var(--s4) + var(--cut));
}

.sekmeler a[aria-current='page'] .ikon { color: var(--accent-ink); }
.sekmeler a[aria-current='page']:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-ink); }

/* ==== 04-dugme.css ==== */
/* ----------------------------------------------------------------- düğme ---
   Hayalet düğme saydam değil, hafif dolgulu: sadece çerçeveyle duran düğme
   tel kafes gibi görünüyordu. Birincil düğme gradyanlı ve alt kenarında koyu
   bir iç çizgi var, yani fiziksel bir tuş gibi duruyor. */

.dg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 38px;
  padding-inline: var(--s4);
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  background: var(--parlama), rgb(var(--ton) / 0.05);
  box-shadow: var(--ic-isik);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--hiz) linear, background-color var(--hiz) linear,
              color var(--hiz) linear, transform var(--hiz) linear;
}

/* .dg--ana DIŞARIDA. Onun `border: 0` (aşağıda) ve ölçüldüğünde
   borderTopWidth 0px, yani buradaki border-color ona uygulanıyor ama ekranda
   hiçbir karşılığı yok. Çalışıyormuş gibi duran bir satırı bırakmak, bir
   sonraki kişinin "hover zaten var" diye bakmasına yol açıyor -- sayfanın en
   önemli düğmesinin bütün hover'ı bu yüzden tek bir ani renk sıçramasıydı. */
.dg:not(.dg--ana):hover {
  border-color: var(--edge-cyan);
  background-color: rgb(24 216 255 / 0.08);
  color: var(--accent);
}
.dg:active { transform: translateY(1px); }

/* Sayfadaki ikinci pahlı öğe. */
.dg--ana {
  border: 0;
  color: var(--accent-ink);
  background: var(--vurgu-degrade);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(4 32 42 / 0.28);
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

/* HOVER'IN TAMAMI PAHIN KENDİSİ. Bu düğme tarayıcıyı terk eden tek tıklama
   (steam://connect), sayfadaki iki pahlı öğeden biri ve hero'nun en büyük
   denetimi. Jenerik hamle buraya translateY(-2px) koymak olurdu; pah bu
   sitenin kendine yalnız iki kez izin verdiği şekil ve imzanın KENDİSİNİ
   oynatmak, yeni bir görsel araç sokmadan tek bir yetkili an üretiyor.

   Parıltı bilerek yok: parıltı canlı sunucu şeridine ayrılmış ve buraya bir
   hale koymak o imzayı ikiye böler.

   background-image geçiş listesinde YOK ve bu ölçüme dayanıyor: iki
   linear-gradient arasındaki geçiş bu motorda ara değerlenmiyor -- 1000ms'lik
   bir geçişte 120/300/500/700ms'de okunan değerlerin dördü de bitiş değeri.
   Ara değerlenmeyen bir özelliği listeye yazmak, yukarıda söktüğüm ölü
   border-color satırının aynısı olurdu.

   clip-path ara değerleniyor: iki poligon da altı köşe, 9px -> 13px
   geçişinin ortasında okunan değer calc(100% - 11px).

   DELTA DÜĞMEYLE ÖLÇEKLENİYOR, sabit +4px değil. Normal düğme 38 piksel
   yüksek, orada 13px pah kenarın %34'ü. Ama .dg--kucuk 30 piksel ve orada
   aynı 13px %43 ediyor: yazı 11px, yatay dolgu 12px, yani köşegenin iç
   noktası tam yazının başladığı yere geliyor. Küçük düğmede delta 2px.

   Nerede geçiyor: parcalar/balon.php'deki .balon__yedek -- JS kapalıyken
   gösterilen yedek şerit. Ölçülemedi (JS açıkken 0x0), karar orandan
   verildi. */
.dg--ana {
  --pah-hover: calc(var(--cut) + 4px);
  transition: clip-path var(--hiz-2) var(--yay),
              transform var(--hiz) linear;
}

.dg--ana.dg--kucuk { --pah-hover: calc(var(--cut) + 2px); }

.dg--ana:hover {
  color: var(--accent-ink);
  background: var(--vurgu-degrade-parlak);
  clip-path: polygon(
    0 0,
    calc(100% - var(--pah-hover)) 0,
    100% var(--pah-hover),
    100% 100%,
    var(--pah-hover) 100%,
    0 calc(100% - var(--pah-hover))
  );
}

.dg--ana:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--accent-ink); }

.dg--kucuk { height: 30px; padding-inline: var(--s3); font-size: var(--t-11); }
.dg--tam { width: 100%; }

/* .dg display'i inline-flex'e ayarladığı için bu kural ondan sonra gelmeli. */
.menu-dugmesi { display: none; }

/* ==== 05-hero.css ==== */
/* ---------------------------------------------------------------- banner ---
   serahor'da yok, tek eklemem bu. Tam ekran hero değil: 300px'lik bir bant,
   panoyu ekranın dışına itmiyor. */

/* Zemin YOK, bilerek: arkadaki ışık havuzları (body::before) görünsün.
   Eskiden --surface ile kapalıydı ve havuzlar hero'nun arkasında kalıyordu. */
/* KAPANIŞ ÇİZGİSİ YOK. Vardı ve şeridin 33 piksel altında duruyordu, yani
   33 piksel içinde iki yatay kapanış üst üste geliyordu: cam şeridin alt
   kenarı ve hero'nun kılcal çizgisi. Görselin --bg'ye tam sönmesi ve şeridin
   kendi kenarı bölümü zaten kapatıyor; üçüncü bir araç bandı dilimliyordu.

   ALT BOŞLUK ÜSTTEKİNDEN BÜYÜK. Şerit hero'ya ait -- görselin üstüne biniyor
   -- ama ölçüldüğünde üstünde 72, altında 53 piksel vardı, yani göz onu
   aşağıdaki kutucuklarla gruplluyordu. Şimdi 52 üst, 76 alt. */
.banner {
  position: relative;
  overflow: clip;
  padding-bottom: var(--s6);
}

/* GÖRSEL TAM GENİŞLİK. Eskiden inset: 0 0 0 34% ile sağ üçte ikide
   duruyordu ve solda düz bir yüzey kalıyordu. İki sorunu vardı: görsel
   yarım bir pano gibi okunuyordu (müşteri "daha sinematik" istedi) ve
   altındaki cam şeridin buğulayacak bir şeyi yoktu -- düz yüzeyin üstünde
   backdrop-filter hiçbir şey yapmıyor. */
.banner__gorsel { position: absolute; inset: 0; }

.banner__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 24%;
}

/* İKİ MASKE ÜST ÜSTE, ikisi de okunurluk için, süs değil.

   Yatay: solda neredeyse opak, sağa doğru açılıyor -- başlık ve düğmeler
   orada duruyor. Dikey: alta doğru koyulaşıyor, çünkü HUD şeridi orada ve
   şeridin altındaki görsel ne kadar sakinse cam o kadar okunur.

   Görsel tam genişlik olunca yatay maskenin solu --bg'ye kadar gidiyor;
   eskiden --surface'te duruyordu ve görselin başladığı yerde bir dikey
   dikiş görünüyordu. */
/* İKİ YIKAMA. Yatay olan hero metnini okunur tutuyor (sol taraf koyu),
   dikey olan görseli sayfaya bağlıyor.

   DİKEY YIKAMA TAM OPAKLIĞA GİDİYOR. Eskiden %78'de bitiyordu, yani
   görselin son satırında hâlâ %22'si görünüyordu ve orada aniden kesiliyordu
   -- sayfanın ortasında yatay bir dikiş. Ölçüldü: alt sağ köşede bileşik
   alfa 0,85 çıkıyordu, yani %15'lik bir basamak. Şimdi %97'de --bg'ye
   oturuyor ve geçiş görünmüyor.

   %74'te 0,30 kalıyor, çünkü cam şerit tam oraya biniyor (hero yüksekliğinin
   %76-92'si). Şeridin ARKASINDA görüntü olmasa backdrop-filter bulanıklaştıracak
   bir şey bulamaz ve şerit koyu bir kutuya döner. Yıkama şeridin üstünde açık,
   altında koyu: cam boyunca değişen bir arka plan, camı cam yapan şey o. */
.banner__gorsel::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 2%, rgb(7 17 31 / 0.82) 30%, rgb(7 17 31 / 0.22) 64%, rgb(7 17 31 / 0.32)),
    linear-gradient(180deg,
      rgb(7 17 31 / 0.28) 0%,
      rgb(7 17 31 / 0.10) 34%,
      rgb(7 17 31 / 0.30) 74%,
      var(--bg) 97%);
}

.banner__ic {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s4);
  min-height: 300px;
  padding-block: var(--s5);
}

.banner__ic > * { max-width: 560px; }
.banner h1 span { display: block; }

/* MARKA VE SLOGAN. 27 Ağustos'ta başlık "CS 1.6 motorunda / Valorant"tan
   "VENNY / CS 1.6'da yeni nesil deneyim"e döndü. Ertesi gün marka, dizilmiş
   metin olmaktan çıkıp üst çubuktaki DOSYANIN KENDİSİ oldu.

   ÖLÇÜ HİYERARŞİ İÇİN. Metin hâlinde 1440 pikselde 218 piksel geliyordu ve üst
   çubuktaki logo 174 -- yani ikisi neredeyse aynı boydaydı ve sayfa aynı şeyi
   iki kez, iki farklı biçimde söylüyordu. 440 piksel, üst çubuğun 2,5 katı;
   hangisinin başlık hangisinin gezinme olduğu artık boydan okunuyor.

   Alt sınır 240: telefonda metin hâli de bu kadar yer kaplıyordu, yani
   mobilde denge değişmiyor. Üst sınır 440, kabın 560'lık tavanının altında
   kalıyor ve sağdaki karakter görselinin üstüne binmiyor.

   height:auto ŞART: nitelikte 72 yazıyor ve o olmadan görsel eziliyor. */
.banner__marka {
  display: block;
  width: clamp(240px, 32vw, 440px);
  height: auto;
}

.banner__slogan {
  margin-top: var(--s2);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink-2);
}

.banner__alt { color: var(--ink-2); font-size: var(--t-15); max-width: 42ch; margin: 0; }
.banner__eylem { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ------------------------------------------------------- canlı sunucu ---
   Hero'nun içinde, ilk ekranda. Müşteri "site tanıtım sitesi değil canlı
   sunucu merkezi gibi hissettirsin" dedi ve bloğun tamamı o cümlenin
   karşılığı.

   Hero'nun alt kenarına oturan cam şerit. Görselin ÜSTÜNE bindiği için
   buradaki backdrop-filter gerçekten buğuluyor -- sitedeki camın en görünür
   olduğu yer burası. Şeridi görselin altına koymak camı görünmez yapardı.

   Şeridin SOL üçte biri hero metninin koyu yıkaması üstünde duruyor, yani
   orada bulanıklaştıracak bir şey yok. Malzemeyi orada ayakta tutan şey
   backdrop-filter değil, --parlama'nın kendi ışığı ve --cam-isik'in iki
   kenarı. Cam sadece arkasındakine güvenirse yarısı kutuya dönüyor.

   ÜÇ ZONE, YAN YANA: durum | connect satırı | ölçüler. Dikey yığındı ve
   dört satır boyunca sol sütuna sıkışıyordu. Yatay dizilim hem şeridi
   hero'nun altına yakışan bir HUD yapıyor hem üç bilgiyi tek bakışta
   veriyor.

   ESNEYEN ZONE ÜÇÜNCÜSÜ, ORTASI DEĞİL. Önce orta 1fr'dı ve orada kullanılmayan
   bir boşluk kalıyordu: connect komutu tek satırlık, sabit genişlikte bir
   monospace dizi, yani 1fr'ın verdiği yerden fazlasını kullanamıyor. Esnemesi
   gereken şey ölçü şeridi -- üç hücresi etiket + değer taşıyor ve sıkıştıkça
   değerler kırılıyor.

   1440 pikselde ölçüldü, kazanç MÜTEVAZI ve olduğu kadarıyla yazılıyor:
     bölgeler   269,16 / 381,34 / 437,50  ->  269,16 / 366,98 / 451,86
     komut       366,98 (iki halde de AYNI -- eski ortada 14,36px boşluk)
     şerit      187,50 / 125,00 / 125,00  ->  193,64 / 129,11 / 129,11
   Yani 14 piksel deliğin yerine şeride geçiyor. Küçük ama bedeli sıfır ve
   yönü doğru: ölçü şeridi büyüyor, sabit genişlikli komut büyümüyor.

   29 AĞUSTOS, TAM KANAMA: bant 1905 piksele çıkınca aynı kural ters
   çalışmaya başladı -- 1fr'lık şerit 1200 piksele yayılıyor ve üç hücre
   birbirinden kopuyordu ("HARİTA Breeze" ile "MOD 3.4.1" arası yarım ekran).

   Artık HİÇBİR bölge esnemiyor: üçü de içeriği kadar ve aradaki fazlalığı
   space-between dağıtıyor. Durum solda, komut ortada, ölçüler sağda; boşluk
   okunan şeyin ORTASINDA değil, iki ayrı şeyin arasında. Dördüncü bir 1fr
   sütun da denenebilirdi ama HUD'un üç çocuğu var, dördüncü sütun şeridi
   yanlış hücreye düşürürdü. */
.sunucu-durum {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--cam-kenar);
  border-radius: var(--r);
  background: var(--parlama), var(--cam-bg);
  -webkit-backdrop-filter: var(--cam-bulanik);
  backdrop-filter: var(--cam-bulanik);
  box-shadow: var(--cam-isik), var(--cam-golge);
  transition: border-color var(--hiz-2) linear, box-shadow var(--hiz-2) linear;
}

/* Sunucu ayaktayken kenar camgöbeğine dönüyor ve şeridin dışına hafif bir
   parıltı çıkıyor. Renk DEĞİŞİMİ bilgi taşıyor; şerit çevrimdışıyken nötr
   ve parıltısız. */
.sunucu-durum--acik {
  border-color: rgb(24 216 255 / 0.34);
  box-shadow: var(--cam-isik), var(--cam-golge), 0 0 34px -14px rgb(24 216 255 / 0.55);
}

/* Çevrimdışı not şeridin altına, tam genişliğe geçiyor: üç zone'un yanına
   dördüncü olarak girseydi cümle 200 piksele sıkışırdı. */
.sunucu-durum__not { grid-column: 1 / -1; }

/* Sol zone artık iki satır: durum cümlesi ve slot haritası. Harita panonun
   sağ kolonundaki sunucu kartından buraya taşındı; kart aynı arızayı sayfada
   ikinci kez ve çelişkili anlatıyordu.

   Genişlik pinlenmiyor. Zone `auto` ve içindeki en geniş satır durum cümlesi;
   32 çentik en az 32×4 + 31×3 = 221 piksel istiyor, yani harita cümlenin
   altına sığıyor ve zone'u BÜYÜTMÜYOR -- ölçüldü, zone iki halde de 269,16.
   min-width verilirse cümle uzadığında ikisi ayrı ayrı ölçü dayatır.

   Bedeli yükseklik: HUD 72 pikselden 100,59'a çıkıyor. Karşılığı, panonun
   sağ kolonundaki 460 piksellik sunucu kartının sayfadan tümden kalkması. */
.sunucu-durum__sol { display: grid; gap: var(--s2); align-content: center; }

/* Kart içindeki hâlinden daha sıkı: HUD 108 piksellik bir şerit, oraya
   kartın nefesi girmiyor. Çentik 18'den 13'e. */
.slot-harita--kompakt .slotlar span { height: 13px; }

/* Kompakt hâlde özette tek eleman kaldı ("9 yer boş") -- rakamı çağıran
   basıyor. space-between tek elemanı sola yapıştırıyor ve çentiklerin sağ
   kenarıyla hizasını kaybediyor; sağa dayanıyor, çünkü hizalanacağı şey
   üstündeki 32. çentiğin sağ kenarı. */
.slot-harita--kompakt .slot-ozet {
  margin-top: var(--s1);
  justify-content: flex-end;
}

/* ------------------------------------------------------------- canlı bant ---
   28 Ağustos: şerit hero'nun İÇİNDEN çıktı ve kendi bölümü oldu. Yanına
   duyuru şeridi geldi; bant artık tek bir soruyu cevaplıyor: şu an ne oluyor.

   Duyurunun buraya gelmesinin sebebi ölçüm. Eskiden panonun orta kolonuydu
   ve duyuru YOKKEN panonun altına, y=1542'ye düşüyordu -- 845 piksellik bir
   bloğun arkası. Bir bölümün "görünmüyor" olmasının en sessiz hâli o.

   Şerit ile duyuru arasındaki ayrım kılcal çizgi, kutu değil: ikisi ayrı
   panel olsaydı bant üç yüzey taşıyacaktı ve "düzenli" olmaktan çıkardı. */
.canli-bant > .kabuk {
  display: grid;
  gap: var(--s4);
}

/* Duyuru DAR ölçüde, üstündeki şerit 1320'de. Bant içinde bir kademe: metin
   ağırlıklı bir blok 1320 piksele yayıldığında başlık ile cümle arasında 600
   piksel boşluk kalıyordu. Sola yaslı, ortalanmış değil -- yukarıdaki şeridin
   devamı olduğunu sol kenarın hizası söylüyor. */
.duyuru-bant {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s3) var(--s5);
  max-width: var(--measure-dar);
  padding-top: var(--s4);
  border-top: 1px solid var(--edge);
}

/* Başlık ve "tüm notlar" düğmesi tek sütunda, alt alta değil yan yana:
   başlık kısa ve düğme de kısa, ikisini ayrı satırlara koymak bandı iki
   kademe uzatıyordu. */
.duyuru-bant__basi {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.duyuru-bant__basi h2 { margin: 0; font-size: var(--t-20); white-space: nowrap; }

.duyuru-bant__metin {
  margin: 0;
  color: var(--ink-2);
  max-width: 74ch;
  font-size: var(--t-15);
  line-height: 1.5;
}

.duyuru-bant__metin a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.duyuru-bant__metin a:hover { color: var(--accent); }

/* Duyuru VARKEN kutu değil yine akış: başlık, gövde, imza. Kart yapmak
   bandın içine ikinci bir yüzey sokardı ve yukarıdaki şeritle yarışırdı. */
.duyuru-bant__son { margin: 0; max-width: 78ch; }
.duyuru-bant__son .duyuru__ust { display: flex; align-items: center; gap: var(--s3); margin-bottom: 6px; }
.duyuru-bant__son .duyuru__ust .veri { font-size: var(--t-11); }
.duyuru-bant__son h3 { margin: 0 0 var(--s2); font-size: var(--t-20); }
.duyuru-bant__son p { margin: 0 0 var(--s2); color: var(--ink-2); line-height: 1.55; }
.duyuru-bant__son .duyuru__imza { font-size: var(--t-11); color: var(--ink-3); }
.duyuru-bant__son .duyuru__imza a { color: var(--ink-2); }
.duyuru-bant__son .duyuru__imza a:hover { color: var(--accent); }

@media (max-width: 700px) {
  /* Başlık üstte, metin altta: 700 pikselin altında "Duyurular" + düğme +
     cümle yan yana 340 piksele sığmıyor. */
  .duyuru-bant { grid-template-columns: minmax(0, 1fr); }
}

/* 900 pikselin altında üç zone yan yana sığmıyor: connect satırı tek
   başına 300 piksel. Dikey yığına dönüyor ve ölçü şeridi kendi satırında
   üç kolon kalıyor. */
@media (max-width: 900px) {
  .sunucu-durum { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }
  .sunucu-durum .olcu-serit { border-top: 1px solid var(--edge); padding-top: var(--s3); }
  .sunucu-durum .olcu-serit > div:last-child { padding-right: var(--s3); }
}

.sunucu-durum__ust {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  flex-wrap: wrap;
}

.sunucu-durum__ust b {
  font-family: var(--ff-display);
  font-size: var(--t-20);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* Sayı başlıktan bir boşluk kadar ayrı: HUD'un sol zone'unda "SUNUCU
   AYAKTA" ve "9 / 32 oyuncu" yan yana ve aralarında ayraç olmadan
   birbirine yapışıyorlardı. */
.sunucu-durum__sayi {
  padding-left: var(--s2);
  border-left: 1px solid var(--edge);
  font-size: var(--t-15);
  color: var(--ink-2);
}

/* GLOW SADECE BURADA VE SADECE SUNUCU AYAKTAYKEN.
   Sayfadaki tek parlayan öğe bu 9 piksellik nokta. Sebebi: glow'u kırk
   yüzeye dağıtmak onu imza olmaktan çıkarıp dokuya çevirir -- pah kuralının
   aynısı, bu dosyanın başında yazılı. Burada parlamanın VARLIĞI bilginin
   kendisi: parlıyorsa sunucu cevap veriyor.

   Durum sözcükle de yazılıyor (sunucu-durum__ust > b), yani renk körü ziyaretçi ve
   ekran okuyucu aynı bilgiyi alıyor. Nokta aria-hidden. */
.sunucu-durum__nokta {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-3);
}

.sunucu-durum--acik .sunucu-durum__nokta {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(24 216 255 / 0.16), 0 0 12px rgb(24 216 255 / 0.85);
  animation: sunucu-nabiz 2.4s ease-in-out infinite;
}

/* Nabız yalnız halkayı büyütüp söndürüyor; nokta hep yanık kalıyor, yani
   hareket kapalıyken de bilgi yerinde. */
@keyframes sunucu-nabiz {
  0%, 100% { box-shadow: 0 0 0 3px rgb(24 216 255 / 0.16), 0 0 12px rgb(24 216 255 / 0.85); }
  50%      { box-shadow: 0 0 0 8px rgb(24 216 255 / 0),    0 0 12px rgb(24 216 255 / 0.55); }
}

.sunucu-durum__not {
  margin: 0;
  font-size: var(--t-11);
  line-height: 1.5;
  color: var(--ink-3);
}

/* Şerit HUD'un sağ zone'unda. Üst çizgisi YOK: zone'ları ayıran şey
   zaten aradaki boşluk, ikinci bir ayraç gürültü olurdu.

   Kolon sayısı yazılmıyor (repeat(3) değil): şerit çevrimiçiyken üç, ölçüm
   damgası okunamazsa iki hücre taşıyor. minmax(0,1fr) uzun bir değerin
   komşusunu itmesini engelliyor -- harita adı sunucudan geliyor ve
   uzunluğunu biz belirlemiyoruz. Harita adı ayrıca venny_harita_adi() ile
   kısaltılıyor; ikisi birden var, biri ikinci savunma hattı. */
/* Eşit üçe bölmüyor. İlk hücre HARİTA ve tek değişken uzunluktaki değer o;
   yanındaki ikisi "az önce" ve "3.4.1", ikisi de kısa ve kısa kalacak. Eşit
   üçte birde harita 375 pikselde kırpılıyordu (ölçüldü: 162px değer, 92px
   hücre). Birinci sütun açık ızgaradan 1,5fr alıyor, kalanlar örtük
   sütunlardan 1fr; hücre sayısı değişse de (çevrimdışı dalda iki tane) kural
   bozulmuyor. */
.sunucu-durum .olcu-serit {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1.5fr);
  grid-auto-columns: minmax(0, 1fr);
  border-top: 0;
  padding-top: 0;
}

.sunucu-durum .olcu-serit > div { padding-right: var(--s4); min-width: 0; }
.sunucu-durum .olcu-serit > div + div { padding-left: var(--s4); }
.sunucu-durum .olcu-serit > div:last-child { padding-right: 0; }

.sunucu-durum .olcu-serit dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 375 pikselde üç hücreye 100'er piksel düşüyor ve 20 piksellik mono
   "0 sn önce"yi kırpıyordu (ölçüldü, ellipsis çıkıyordu). Değer bir kademe
   iniyor; hücre SAYISI değişmiyor, çünkü üçü de bir ölçü taşıyor ve dar
   ekranda ölçü atmak, dar ekrandaki ziyaretçiye az bilgi vermek demek. */
@media (max-width: 560px) {
  .sunucu-durum .olcu-serit dd { font-size: var(--t-15); }
  .sunucu-durum .olcu-serit > div { padding-right: var(--s2); }
  .sunucu-durum .olcu-serit > div + div { padding-left: var(--s2); }
}

/* ------------------------------------------------------------ kısayollar ---
   serahor'daki beş kutucuk. Eşit beşli ızgara değil: sıralama kutusu
   diğerlerinden geniş, çünkü siteye gelen çoğu kişi onun için geliyor. */

.kisayollar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--s2);
}

/* Alt satır TABANA yaslı. Discord kutucuğunun alt cümlesi iki satıra
   kırılıyor ve diğer dördününki tek satır; yaslanmadan bırakılınca beş
   kutunun alt yazıları farklı yükseklikte duruyor ve satır düzensiz
   okunuyor. Izgara zaten hepsini aynı boya çekiyor, mesele içerideki hiza. */
.kisayol {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 78px;
  gap: 2px;
  padding: var(--s3) var(--s4);
  transition: border-color var(--hiz) linear, background-color var(--hiz) linear,
              transform var(--hiz) var(--yay);
}

.kisayol:hover {
  border-color: var(--edge-cyan);
  background-color: var(--surface-2);
  transform: translateY(-1px);
}

.kisayol__ust { display: flex; align-items: center; gap: var(--s2); }
.kisayol__ust .ikon { width: 18px; height: 18px; color: var(--ink-3); transition: color var(--hiz) linear; }
.kisayol:hover .kisayol__ust .ikon { color: var(--accent); }

.kisayol b {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-20);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.kisayol:hover b { color: var(--accent); }

/* Doğrudan çocuk. Alt-öğe seçicisiyken başlığın içindeki marka
   sarmalayıcısını da yakalıyordu; kastedilen tek şey kutucuğun altındaki
   açıklama satırı. */
.kisayol > span {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* ==== 06-pano.css ==== */
/* ------------------------------------------------------------------ pano ---
   İKİ kolon, eşit değil: solda o an sunucuda olanlar, sağda sezon zirvesi.

   Üç kolondu. Üçüncüsü sırayla duyuruları, Discord'u, destek kartını ve
   sunucu kartını taşıdı; hepsi daha iyi bir yere gidince elinde bir mağaza
   kartı kaldı ve altında 522 piksel boşluk (ölçüldü: sol 640, orta 805,
   sağ 283). Boşluğu üçüncü kolona yeni bir kart yazarak kapatmak, panonun
   bu turda temizlenen tam o alışkanlığıydı -- kolon dolsun diye içerik
   üretmek. Kolon kalktı, mağaza kartı kendi bandına çıktı.

   Ölçü ORANLA değil TAVANLA veriliyor. Önce 1 / 1,4 denendi ve sol sütun
   482 piksele çıktı; oyuncu satırı ad + süreden ibaret, yani adın sonuyla
   sürenin arası ortalama 273 piksel boşluk oluyordu. Sağdaki sıralama
   satırı ise sıra, ad, rütbe rozeti ve KP taşıyor -- yoğunluk eşit değil,
   o yüzden pay da eşit değil.

   380 tavanı ölçülerek seçildi (1440'ta sol 380, sağ 778):
     1 / 1,4      -> boşluk ort. 273,5   en az 205,4
     1 / 1,9      -> boşluk ort. 190,3   en az 122,3
     tavan 420    -> boşluk ort. 211,0   en az 143,0
     tavan 380    -> boşluk ort. 171,0   en az 103,0   <- bu
   En az 103 piksel, yani en uzun oyuncu adı bile süreye değmiyor.

   Alt sınır 300: aradaki eşikte sol sütun daralıyor ama satır kırılmıyor. */

/* 29 Ağustos: pano TAM KANAMAYA geçti ve üçüncü kolon geri geldi.
   Müşteri "her şeyin ortaya alınması çok kötü olmuş, sağ tarafları
   dolduralım" dedi ve ölçüm onu doğruluyordu: 1920 pikselde bölümlerin
   çoğu 1320 genişlikteydi, yani ekranın 601 pikseli (%31) boş kalıyordu.

   İki kolon tam kanamada ÇALIŞMIYOR: sıralama 1500 piksele yayılıyor ve on
   satırlık bir liste o genişlikte gerilmiş duruyor. Üçüncü kolon boşluğu
   içerikle kapatıyor -- künye ve kural özeti, ikisi de veri/sunucu.php'de
   zaten duran ve bugüne kadar yalnız /sunucu'da görünen gerçek veri.

   Sağ raf SABİT 320: içindeki kartlar etiket/değer satırları ve onların
   esnemeye ihtiyacı yok. Esneyen tek kolon sıralama, çünkü satırları
   uzayabilen tek içerik o. */
.pano {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) 320px;
  gap: var(--s3);
  align-items: start;
}

/* Sağ raf: kartlar alt alta, aralarında panonun kendi boşluğu. */
.kolon--raf { align-content: start; }

/* 1500'ün altında üçüncü kolon alta iniyor ve kartları yan yana diziliyor --
   dar ekranda 320 piksellik bir raf, ortadaki sıralamayı 400'ün altına
   düşürürdü. Eşik ölçüldü: 1500'de sıralama 700 piksel kalıyor, altında
   kırılmaya başlıyor. */
@media (max-width: 1500px) {
  .pano { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .kolon--raf {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--s3);
  }
}

.kolon { display: grid; gap: var(--s3); }

.kart { overflow: hidden; }

.kart__basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--edge);
  background: rgb(var(--ton) / 0.025);
}

.kart__basi h2, .kart__basi h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-15);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.kart__govde { padding: var(--s4); display: grid; gap: var(--s4); }
.kart__govde--sik { padding: 0; gap: 0; }

.kart__alt { padding: var(--s3) var(--s4); border-top: 1px solid var(--edge); }

.canli {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* Gerçek durum göstergesi (sunucu açık / kapalı), süs değil. */
.canli::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgb(24 216 255 / 0.16);
}

.canli--kapali { color: var(--alarm); }
.canli--kapali::before { background: var(--alarm); box-shadow: 0 0 0 3px rgb(255 107 127 / 0.16); }

/* ------------------------------------------------------------ kişi listesi ---
   Canlı oyuncular ve sezonun ilk beşi aynı satır biçimini kullanıyor:
   solda ad, altında küçük künye, sağda tek sayı. */

.kisi-liste { margin: 0; padding: 0; list-style: none; display: grid; }

.kisi-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  transition: background var(--hiz) linear;
}

.kisi-liste li + li { border-top: 1px solid rgb(var(--ton) / 0.07); }
.kisi-liste li:hover { background: rgb(var(--ton) / 0.03); }
.kisi-liste b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.kisi-liste a:hover { color: var(--accent); }
.kisi-liste small { display: block; font-family: var(--ff-mono); font-size: var(--t-11); color: var(--ink-3); }

/* Eskiden .ping'di ve hep "0 ms" yazıyordu; şimdi oyuncunun bağlı olduğu
   süre. Alarm hâli yok, çünkü uzun süre kötü bir şey değil -- yüksek ping
   öyleydi, süre değil. */
.oyuncu-sure {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: rgb(var(--ton) / 0.07);
  border-radius: var(--r-s);
  padding: 2px 6px;
  white-space: nowrap;
}

/* ---------------------------------------------------- adres ve slot haritası ---
   Sitenin imzası. serahor bu işi "kopyala" yazan kırmızı bir düğmeyle
   yapıyor; buradaki fark, adresin konsola yazılacak hâliyle durması ve
   doluluğun çubuk değil harita olması.

   Çentikler dolgu çubuğu değil: bir çubuk "%72 dolu" der, bu harita
   "dokuz yer boş" der. Oyuncunun sorduğu soru ikincisi. */

.komut {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3);
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: inset 2px 0 0 var(--accent-deep);
  font-family: var(--ff-mono);
  font-size: var(--t-13);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--hiz) linear, box-shadow var(--hiz) linear;
}

.komut i { font-style: normal; color: var(--ink-3); user-select: none; }

/* Adres ortadan bölünmesin: yer yetmezse "kopyala" etiketi alt satıra iner. */
.komut b { font-weight: 400; color: var(--accent); white-space: nowrap; }

.komut:hover { border-color: var(--edge-cyan); box-shadow: inset 2px 0 0 var(--accent); }

.komut__kopya {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-left: auto;
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  white-space: nowrap;
}

.komut__kopya .ikon { width: 13px; height: 13px; }
.komut:hover .komut__kopya { color: var(--ink-2); }
.komut[data-kopyalandi] .komut__kopya { color: var(--accent); }

.slotlar { display: flex; gap: 3px; align-items: flex-end; }

.slotlar span {
  flex: 1;
  min-width: 4px;
  height: 18px;
  border-radius: 1px;
  background: rgb(var(--ton) / 0.16);
}

.slotlar span[data-dolu] {
  background: var(--accent);
  animation: slot-dolsun 260ms var(--yay) backwards;
  animation-delay: calc(var(--i) * 14ms);
}

@keyframes slot-dolsun {
  from { transform: scaleY(0.15); background: var(--accent-deep); }
}

.slot-ozet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s3);
}

.slot-ozet .rakam { color: var(--ink); }
.slot-ozet .lbl { text-align: right; }

/* Etiket / değer satırları. Sunucu künyesi ve kart içi meta. */
.satir-liste { margin: 0; }

.satir-liste div {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s2);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
}

.satir-liste div + div { border-top: 1px solid rgb(var(--ton) / 0.07); }
.satir-liste dt { margin: 0; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.12em; }
.satir-liste dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }

/* Üç sayı yan yana: Discord kartı. */
/* Sütun sayısı değişken: Discord kartı artık iki sayı çiziyor (çevrimiçi,
   seste). Toplam üye sayısını widget vermiyor ve olmayan bir rakamı
   uydurmak yerine sütunu düşürdük. */
.sayi-uclu,
.sayi-ikili { display: grid; border-top: 1px solid var(--edge); }
.sayi-uclu  { grid-template-columns: repeat(3, 1fr); }
.sayi-ikili { grid-template-columns: repeat(2, 1fr); }

.sayi-uclu div,
.sayi-ikili div { padding: var(--s3) var(--s2); text-align: center; }
.sayi-uclu div + div,
.sayi-ikili div + div { border-left: 1px solid var(--edge); }

.sayi-uclu b,
.sayi-ikili b {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--t-20);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.sayi-uclu span,
.sayi-ikili span {
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- duyurular --- */

.duyuru { padding: var(--s5); }
.duyuru + .duyuru { margin-top: var(--s3); }
.duyuru h2 { margin-block: var(--s2) var(--s4); }
.duyuru h3 { margin-block: var(--s4) var(--s2); color: var(--ink); }
.duyuru p { color: var(--ink-2); max-width: 68ch; }

.duyuru__ust { display: flex; align-items: center; gap: var(--s3); }

.etiket {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.duyuru__imza {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--edge);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  color: var(--ink-3);
}

.duyuru ul { margin: var(--s3) 0; padding-left: 0; list-style: none; display: grid; gap: var(--s2); }
.duyuru ul li { color: var(--ink-2); padding-left: var(--s4); position: relative; }
.duyuru ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--accent);
}

/* Denge tablosu: eski değer solda üstü çizili, yeni değer sağda vurguda.
   Denge notlarının asıl bilgisi bu ikili, düz cümle değil. */
.degisim { margin: var(--s4) 0; }

.degisim div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s2);
  font-family: var(--ff-mono);
  font-size: var(--t-13);
}

.degisim div + div { border-top: 1px solid rgb(var(--ton) / 0.07); }
.degisim dt { margin: 0; color: var(--ink-2); font-family: var(--ff-ui); }
.degisim dd { margin: 0; }
.degisim .eski { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.degisim .ok { color: var(--accent-deep); }
.degisim .yeni { color: var(--accent); min-width: 4ch; text-align: right; }

.duyuru-liste { display: grid; }

.duyuru-liste a {
  display: grid;
  gap: 2px;
  padding: var(--s3) var(--s4);
  transition: background var(--hiz) linear;
}

.duyuru-liste a + a { border-top: 1px solid rgb(var(--ton) / 0.07); }
.duyuru-liste a:hover { background: var(--accent-wash); }
.duyuru-liste strong { font-weight: 500; color: var(--ink); }
.duyuru-liste a:hover strong { color: var(--accent); }
.duyuru-liste span { font-family: var(--ff-mono); font-size: var(--t-11); color: var(--ink-3); }

/* Duyurunun özeti. Eskiden bu alan veride vardı ama hiçbir yerde
   çizilmiyordu; liste de başlık + tarihten ibaretti ve hangi notun ne
   olduğu ancak tıklayınca anlaşılıyordu. İki satırda kesiliyor: üçüncü
   satır listeyi tarama değil okuma nesnesine çeviriyor. */
.duyuru-liste em {
  font-style: normal;
  font-size: var(--t-13);
  line-height: 1.45;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==== 07-tablo.css ==== */
/* ----------------------------------------------------------------- tablo ---
   Satır ayracı %7 alfada, her beşinci satırda %14'e çıkıyor. Dekorasyon
   değil: 15 satırlık sayfada "kaçıncı sıradayım" sorusunu beşerli ritim
   cevaplıyor. Bir de çok hafif zebra var, göz satırı kaydırmasın. */

.tablo { width: 100%; border-collapse: collapse; }

.tablo th {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-align: right;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--edge-2);
  white-space: nowrap;
}

.tablo th:first-child,
.tablo th:nth-child(2) { text-align: left; }

.tablo td {
  padding: var(--s3);
  text-align: right;
  border-bottom: 1px solid rgb(var(--ton) / 0.07);
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
  letter-spacing: -0.02em;
  color: var(--ink-2);
  white-space: nowrap;
}

.tablo tbody tr:nth-child(even) { background: rgb(var(--ton) / 0.018); }
.tablo tbody tr:nth-child(5n) td { border-bottom-color: var(--edge); }
.tablo tbody tr:last-child td { border-bottom-color: var(--edge-2); }
.tablo tbody tr { transition: background var(--hiz) linear; }
.tablo tbody tr:hover { background: var(--accent-wash); }

.tablo td:first-child,
.tablo td:nth-child(2) { text-align: left; }

.tablo .sira { color: var(--ink-3); width: 56px; }
.tablo tr[data-ilk3] .sira { color: var(--accent); }

/* Birinci satır sol kenarında şerit: tablonun tepesi bir bakışta belli. */
.tablo tbody tr:first-child td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.tablo .oyuncu {
  font-family: var(--ff-ui);
  font-size: var(--t-13);
  letter-spacing: 0;
  color: var(--ink);
  min-width: 180px;
  white-space: normal;
}

.tablo .oyuncu a:hover { color: var(--accent); }
.tablo .oyuncu small { display: block; color: var(--ink-3); font-size: var(--t-11); font-family: var(--ff-mono); }

.tablo .kp { color: var(--ink); font-size: var(--t-15); }
.tablo .zayif { color: var(--ink-3); }

/* --------------------------------------------------------------- rütbe ------
   İkinci bir renk eklemek yerine aynı camgöbeğinin üç alfa kademesi: rütbe
   yükseldikçe rozet parlıyor. Kademeyi istatistik.php belirliyor. */

.rutbe {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: var(--r-s);
  background: rgb(var(--ton) / 0.07);
  color: var(--ink-3);
}

.rutbe[data-kademe='orta'] { background: var(--accent-wash); color: var(--ink-2); }
.rutbe[data-kademe='ust']  { background: rgb(24 216 255 / 0.17); color: var(--accent); }

/* ---------------------------------------------------------------- podyum ---
   Üç eşit kart değil: birinci hem geniş hem yüksek. */

.podyum {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
  /* Kartlar eşit yükseklikte uzamıyor: birinci zaten daha büyük punto
     taşıdığı için doğal olarak yüksek kalıyor, ikinci ve üçüncüde ölü
     boşluk oluşmuyor. */
  align-items: start;
}

.podyum__yer { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.podyum__yer--bir { --pnl-bg: var(--surface-2); --pnl-edge: var(--edge-cyan); }
.podyum__ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }

.podyum__ad {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-20);
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.podyum__ad:hover { color: var(--accent); }
.podyum__yer--bir .podyum__ad { font-size: 30px; font-weight: 700; }
.podyum__yer--bir .rakam { font-size: 40px; color: var(--accent); }

.podyum__sayilar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--edge);
}

.podyum__sayilar div { display: flex; flex-direction: column; gap: 2px; }
.podyum__sayilar b {
  font-family: var(--ff-mono);
  font-size: var(--t-15);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ==== 08-galeri.css ==== */
/* ------------------------------------------------------------ skin ızgara ---
   Hücre sayısı içerik sayısına eşit: 5 skin, 5 hücre. Biri iki sütun iki
   satır kaplıyor, ızgarada boş kutu kalmıyor. */

.skinler { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }

.skin { overflow: hidden; display: flex; flex-direction: column; }
.skin:hover { border-color: var(--edge-cyan); }
.skin--iri { grid-column: span 2; grid-row: span 2; }

.skin__gorsel { background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.skin__gorsel img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--hiz-2) var(--yay);
}

.skin--iri .skin__gorsel img { aspect-ratio: 4 / 3; }
.skin:hover .skin__gorsel img { transform: scale(1.025); }

.skin__govde { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }

.skin__ad {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-20);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.skin--iri .skin__ad { font-size: 28px; font-weight: 700; }

.skin__kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--edge);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  color: var(--ink-3);
}

.skin__kunye b { color: var(--ink-2); font-weight: 400; }

/* ------------------------------------------------------------ filtre çipi --- */

.filtreler { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Panel bölümleri. Aynı çipler ama altındaki kılcal çizgi bunu liste
   filtresinden ayırıyor: kuyruk sayfasında iki çip sırası üst üste geliyor
   (bölümler, sonra durum filtresi) ve ikisi birbirine karışmamalı. */
.yonetim-gezinme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--edge);
}

.cip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-inline: var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  background: rgb(var(--ton) / 0.04);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  transition: color var(--hiz) linear, border-color var(--hiz) linear, background var(--hiz) linear;
}

.cip:hover { color: var(--ink); border-color: var(--edge-2); }
.cip[aria-current] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* --------------------------------------------------------------- adımlar --- */

.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--edge-2); }

.adim { padding: var(--s4) var(--s4) var(--s4) 0; }
.adim + .adim { padding-left: var(--s4); border-left: 1px solid var(--edge); }
.adim h3 { color: var(--accent); margin-bottom: var(--s2); }
.adim p { color: var(--ink-2); }

/* ------------------------------------------------------------ satır liste ---
   İndirmeler ve yetki paketleri gibi az sayıda ama içeriği geniş kalemler
   kart ızgarası değil, tam genişlik satır. */

.satirlar { border-top: 1px solid var(--edge-2); }

.satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--edge);
}

.satir__basi { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
/* İndirme satırının başlığı h2 -- sayfada üstünde yalnız h1 var, h3 iken
   kademe atlıyordu. Punto h3'ün ölçüsünde KALIYOR: on bir indirme satırı
   34px display puntosuyla dizilseydi sayfa bir liste değil on bir bölüm
   gibi okunurdu. Kademe belgeye ait, punto tasarıma. */
.satir h2 { font-size: var(--t-20); letter-spacing: -0.012em; color: var(--ink); }
.satir p { color: var(--ink-2); max-width: 68ch; }
.satir__kunye { display: flex; gap: var(--s4); margin-top: var(--s2); font-family: var(--ff-mono); font-size: var(--t-11); color: var(--ink-3); }
.satir__kunye b { color: var(--ink-2); font-weight: 400; }

/* ==== 09-magaza.css ==== */
/* --------------------------------------------------------------- paketler --- */

/* Kolon sayısı KATEGORİNİN KALEM SAYISINA göre kendiliğinden çıkıyor.
   auto-fit boş izleri topluyor: Prime'ın iki paketi 620'şer piksel, dört
   skin 305'er piksel, tek bıçak da 640'la sınırlı kalıyor. Sabit "1fr 1fr"
   dört skini iki satıra bölüyordu ve skinler yan yana karşılaştırılan
   şeyler. max-width tek kalemli kategoriyi 1256 piksellik bir karta
   çevirmekten koruyor. */
/* Kolon sayısı işaretlemeden geliyor (--sutun); hangi kategorinin kaç
   kolon aldığının gerekçesi magaza.php'de, döngünün başında.

   align-items: stretch -- eskiden start'tı ve kartlar içeriklerinin boyunda
   kalıyordu: dört skin kartının "Satın al" düğmesi dört ayrı yükseklikte
   duruyordu, satırın altı tırtıklıydı. */
.paketler {
  display: grid;
  grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr));
  gap: var(--s3);
  align-items: stretch;
}

@media (max-width: 1000px) { .paketler { --sutun: 2 !important; } }
@media (max-width: 560px)  { .paketler { --sutun: 1 !important; } }

/* Dolgu TEK DEĞER ve belirteçten geliyor. Eskiden --s5 (32px) yazıyordu ve
   iki paketlik ızgarada doğruydu; kategoriler gelince aynı ızgarada 305
   piksellik skin kartları da var ve orada 32 piksel içeriğe 240 piksel
   bırakıyor. --s4 ikisinde de çalışıyor.

   Değer belirteç, çünkü .paket__gorsel karttan taşmak için onun NEGATİFİNİ
   kullanıyor; iki yere ayrı yazılsaydı biri değiştiği gün görsel kenardan
   kayardı. */
.paket {
  --paket-dolgu: var(--s4);
  padding: var(--paket-dolgu);
  display: flex;
  flex-direction: column;
  gap: var(--s4);

  /* Kart KENDİ genişliğini sorgulayabilsin diye kap. Aşağıdaki @container
     kuralı buna dayanıyor: fiyatın boyutu ekranın değil KARTIN darlığına
     göre iniyor. Aynı ekranda 622 piksellik Prime kartı ile 305 piksellik
     skin kartı yan yana yaşıyor ve medya sorgusu ikisini ayırt edemiyor. */
  container-type: inline-size;
}

/* Düğme her zaman kartın DİBİNDE. Eşit yükseklikteki kartlarda içerik
   uzunluğu farklı ve düğme içeriğin hemen altında kalırsa dört kart dört
   ayrı hizada bitiyor. */
.paket > .dg:last-child { margin-top: auto; }

/* Dar kartta fiyat bir kademe iniyor ve künye alt satıra geçiyor. 34
   piksellik "2.475 VP" 305 piksellik kartta iki satıra kırılıyordu. */
@container (max-width: 360px) {
  .paket .paket__fiyat { font-size: var(--t-20); }
  .paket__ust { flex-direction: column; align-items: flex-start; gap: var(--s1); }
}

/* Öne çıkan paketin şeridi MOR, camgöbeği değil. Kural paletin başında:
   camgöbeği oyunun, mor paranın. Öne çıkan paket satın alınacak bir şey. */
.paket--one-cikan { --pnl-bg: var(--surface-2); --pnl-golge: var(--ic-isik), inset 2px 0 0 var(--accent-2); }

/* MAĞAZADAKİ HAYALET DÜĞME PARA RENGİYLE CEVAPLIYOR. Ölçüldü: .paket__fiyat
   rgb(139,121,245) yani --accent-2-yaz; hemen altındaki "Satın al" düğmesi
   hoverda --accent alıyordu, yani #18D8FF. Kart parayı morla söylüyor, satın
   alma düğmesi camgöbeğiyle cevap veriyordu -- sayfanın kendi renk sözleşmesi
   tam satın alma anında bozuluyordu.

   Öne çıkan paketin düğmesi .dg--ana ve pahını koruyor, o yüzden dışarıda.

   YAZI BEYAZ KALIYOR, mor değil. Renk kenarda ve yıkamada; sinyal orada
   zaten okunuyor. Yazıyı --accent-2-yaz yapmak ÖLÇÜLDÜ ve kaldı: ışık
   havuzlarının kartın arkasına düştüğü en aydınlık noktada mor yazı
   4,02:1 veriyor, 13 piksel için eşik 4,5. Beyaz aynı zeminde 13,74:1.

   Hesap havuzların TAM katkısını uyguluyor, yani üst sınır -- kartın
   havuzdan uzak durduğu yerde değer yükseliyor. Ama bir kartın nereye
   düşeceği kaydırma konumuna bağlı ve en kötü hâli geçmiyorsa geçmiyor. */
.paket .dg:not(.dg--ana):hover {
  border-color: var(--edge-mor);
  background-color: var(--accent-2-wash);
  color: var(--ink);
}

/* KART TIKLANABİLİRLİK TAKLİDİ YAPMIYOR. .paket bir <article>; tıklanabilir
   tek şey içindeki bağlantı. Karta yaklaşınca öne çıkan paketin mor şeridi
   beliriyor: zaten var olan bir işaret ödünç alınıyor (üst satır), yeni bir
   görsel araç girmiyor ve şerit kartın "seçili" hâlini önden gösteriyor.

   ÜÇÜNCÜ GÖLGE HER İKİ HÂLDE DE YAZILI, dinlenirken saydam. Ölçüldü:
   .paket'in varsayılan box-shadow'u DÖRT gölge (--cam-isik iki, --cam-golge
   iki). Hoverda gölge SAYISI değişseydi liste ara değerlenemez ve geçiş ani
   takasa düşerdi. --cam-golge de yerinde kalıyor: onu ezmek kartın malzeme
   hissini tam hoverda siliyordu.

   Geçiş satırı YAZILMIYOR. .pnl zaten box-shadow'u geçiş listesinde taşıyor
   ve .paket aynı özgüllükte, daha sonra geldiği için buraya yazılan bir
   transition o listeyi tümden ezip kartın kenar ve yüzey geçişlerini
   öldürürdü -- 13-hareket'te yeni düzelttiğim çarpışmanın aynısı.

   .paket--one-cikan dışarıda: şeridi kalıcı taşıyor ve :hover (0,2,0) onun
   --pnl-golge'sini (0,1,0) ezerdi. */
.paket:not(.paket--one-cikan) {
  --pnl-golge: var(--cam-isik), var(--cam-golge), inset 2px 0 0 transparent;
}

.paket:not(.paket--one-cikan):hover {
  --pnl-golge: var(--cam-isik), var(--cam-golge), inset 2px 0 0 var(--accent-2);
}

/* Skin ve bıçak kartlarındaki görsel, kartın dolgusundan taşıp üst kenara
   yapışıyor. 16/9 kırpma: kartlar aynı yükseklikte kalsın. */
.paket__gorsel {
  display: block;
  width: calc(100% + var(--paket-dolgu) * 2);
  /* max-width KALDIRILIYOR. Satır 170'teki "img { max-width: 100% }"
     sıfırlaması yukarıdaki width'i sessizce 100%'e kırpıyordu: negatif
     kenar boşluğu uygulanıyor ama görsel karttan taşmıyor, yani sağ kenarda
     20 piksellik bir boşluk kalıyordu. Kural doğruydu, kırpan başkasıydı. */
  max-width: none;
  margin: calc(var(--paket-dolgu) * -1) calc(var(--paket-dolgu) * -1) 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--edge);
}
.paket__ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }

.paket__fiyat {
  font-family: var(--ff-mono);
  font-size: var(--t-34);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}

/* FİYATIN RENGİ PARA BİRİMİNİ SÖYLÜYOR. Mor gerçek para (TL), camgöbeği
   oyun içi para (VP). Sayfada ikisi yan yana duruyor -- Prime 140 ₺, Vandal
   2.475 VP -- ve rakamlar birbirine benziyor. Rengi ayırmak, birim yazısını
   okumadan hangisinin cüzdandan çıktığını söylüyor.

   Mor yazı --accent-2 DEĞİL --accent-2-yaz: müşterinin verdiği #6C5CE7 kart
   yüzeyinde 3,55:1 ve fiyat okunacak bir şey. Gerekçe paletin başında. */
.paket__fiyat[data-birim='TL'] { color: var(--accent-2-yaz); }
.paket__fiyat[data-birim='VP'] { color: var(--accent); }

/* -------------------------------------------------------------- mağaza ---
   Kategori şeridi ve kümeler. */

.magaza-gezinme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

/* Küme aralığı bölüm aralığından geniş: aynı sayfada yedi başlık var ve
   aralarında nefes olmazsa liste tek bir uzun akışa dönüyor. */
.magaza-kume + .magaza-kume { margin-top: var(--s6); }

.magaza-bekleniyor {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--t-13);
}
.paket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.paket li { color: var(--ink-2); padding-left: var(--s4); position: relative; }
.paket li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--accent);
}

.paket .dg { margin-top: auto; }



/* ------------------------------------------------------- öne çıkan bant ---
   Ana sayfanın yatay paket bandı. Panonun üçüncü kolonundaki 283 piksellik
   dikey kartın yerine geçti; kolon kalktığı için taşındı, dikeyden yataya
   dönmesi de içeriğinin ölçüsünden çıkan bir karar. Dikey kartta beş içerik
   satırının yalnız dördü basılıyordu, beşincisi array_slice ile kesiliyordu.

   Üç bölge: kimlik | içerik | düğme. Orta bölge esniyor, iki yan bölge
   içeriği kadar. HUD'un tersi (orada esneyen üçüncü zone) çünkü burada
   ortadaki içerik gerçekten uzayabilen tek şey -- beş kalem, sarabiliyor. */
/* Tam kanamada orta bölge ESNEMİYOR. 1920 pikselde ölçüldü: 1fr verildiğinde
   orta bölge 1492 piksele çıkıyor ve beş kalem sola toplanıp geri kalanı boş
   bırakıyordu -- doldurulmuş bir bant değil, ortasında delik olan bir bant.

   Şimdi üçü de içeriği kadar, boşluğu ARALARINDAKİ gap alıyor ve düğme sağa
   dayanıyor. Bandın işi bir satırı okutmak; o satır 1900 piksele yayılmak
   zorunda değil. */
.paket-bant {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  padding: var(--s4) var(--s5);
}

/* Düğme üçüncü hücrenin SAĞ ucunda: hücre esneyen tek hücre, düğme onun
   içinde yüzüyor. */
.paket-bant > .dg { justify-self: end; }

/* Mor şerit, .paket--one-cikan ile aynı: camgöbeği oyunun, mor paranın.
   Bandın satın alınacak bir şey olduğunu söyleyen tek işaret bu. */
.paket-bant { --pnl-golge: var(--cam-isik), var(--cam-golge), inset 2px 0 0 var(--accent-2); }

.paket-bant__kimlik { display: grid; gap: var(--s2); }

/* Fiyat 34 pikselde mağaza kartındaki boyu; bantta 28'e iniyor çünkü
   yanındaki h2 ile aynı satırda değil, ALTINDA ve ikisi birlikte bir blok
   okunuyor. 34 kalsaydı başlık fiyatın altbaşlığı gibi dururdu. */
.paket-bant .paket__fiyat {
  margin: 0;
  font-size: var(--t-28);
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.paket-bant__icerik {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--t-13);
  color: var(--ink-2);
}

/* Kalemin başında kılcal çizgi, madde imi değil. İdiom dikey karttan
   geliyor (17-kadro.css'te .kart--paket__govde li aynı çizgiyi kullanıyordu)
   ve yatay dizilimde ikinci bir iş yapıyor: kalemleri ayıran dikey ayraç
   oluyor, yani ayrı bir ayırıcı öğe yazmaya gerek kalmıyor. */
.paket-bant__icerik li { padding-left: var(--s3); border-left: 1px solid var(--edge); }

@media (max-width: 900px) {
  /* Üç bölge alt alta. Düğme tam genişliğe çıkıyor: 375 pikselde sağa
     yapışmış bir düğme bandın altında yamalı duruyor. */
  .paket-bant { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4); }
  .paket-bant .dg { justify-content: center; }
}

/* ==== 10-form.css ==== */
/* ------------------------------------------------------------------ form --- */

.form { display: grid; gap: var(--s4); }
.alan { display: grid; gap: var(--s2); }

.alan label {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  height: 42px;
  padding-inline: var(--s3);
  font: 400 var(--t-13) / 1.5 var(--ff-ui);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  transition: border-color var(--hiz) linear, background var(--hiz) linear;
}

.alan textarea { height: auto; min-height: 132px; padding-block: var(--s3); resize: vertical; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--ink-3); }
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: rgb(var(--ton) / 0.38); }

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
}

.alan select {
  appearance: none;
  padding-right: var(--s5);
  cursor: pointer;
  /* Ok işareti: iki gradyandan üçgen. İkon kitaplığından çekmeye değmeyecek
     kadar küçük ve metin rengiyle birlikte değişmesi gerekiyor. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 20px center, right 14px center;
  background-repeat: no-repeat;
}

/* Sıralama ve galeri sayfalarının filtre çubuğu. Hepsi tek GET formu:
   JS kapalıyken de sezon değiştirmek, aramak ve sıralamak çalışıyor. */
.arac-cubugu {
  display: grid;
  grid-template-columns: 172px 196px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: end;
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.arac-cubugu .dg { height: 42px; }

/* Üye panelinde tek alan var. Yukarıdaki ızgara sıralama sayfasının dört
   alanına göre ölçülü; iki çocukla kutu 172px'e sıkışıp düğme 196px'e
   şişiyordu. */
.arac-cubugu--arama { grid-template-columns: minmax(0, 1fr) auto; }

/* Duyuru gövdesi mono: "| Etiket | 12 | 5" satırlarının boruları alt alta
   gelsin diye. Orantılı yazı tipinde üç sütun göze sütun gibi görünmüyor ve
   yazan kişi tabloyu yanlış kurduğunu ancak önizlemede fark ediyor. */
.alan textarea.duyuru-kaynak {
  font-family: var(--ff-mono);
  font-size: var(--t-13);
  line-height: 1.7;
  tab-size: 2;
}

.alan__yardim { font-size: var(--t-11); color: var(--ink-3); }
.alan__hata { font-size: var(--t-11); color: var(--alarm); font-family: var(--ff-mono); }
.alan[data-hata] input, .alan[data-hata] select, .alan[data-hata] textarea { border-color: var(--alarm); }

/* Oyun içi giriş kodunun alanı (kod.php). Sitedeki tek girdi ki içeriği
   okunmuyor, KARŞILAŞTIRILIYOR: oyuncu CS 1.6 HUD'undaki sekiz karakteri
   gözüyle takip edip buraya yazıyor ve yazdığını karakter karakter geri
   kontrol ediyor. 14px Barlow'da bu iş yapılmıyor -- M ile N, 5 ile S,
   büyük Z ile 2 gövde metni boyutunda birbirine giriyor.

   Bu yüzden üç şey birden: eşit genişlikli yazı tipi (her karakter aynı
   sütunda), 24px (HUD'daki boyutla aynı mertebe) ve geniş harf aralığı
   (gözün tek tek karaktere odaklanması için). Girdi 46px yüksekliğindeki
   .alan input kalıbının içinde kalıyor, sadece içindeki metin değişiyor.

   text-transform yalnız görüntüyü büyütüyor; sunucuya kullanıcının bastığı
   tuşlar gidiyor ve büyütmeyi venny_kod_duzelt() yapıyor. */
.alan input.alan__kod {
  font-family: var(--ff-mono);
  font-size: 24px;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
  /* Harf aralığı son karakterden sonra da uygulanıyor ve metni sola
     kaydırıyor; aynı miktar soldan geri veriliyor. */
  text-indent: 0.28em;
}

.uyari, .bilgi { padding: var(--s3) var(--s4); font-size: var(--t-13); }
.uyari { --pnl-bg: var(--alarm-wash); --pnl-edge: rgb(255 107 127 / 0.34); color: #ffd2d9; }
.bilgi { --pnl-bg: var(--accent-wash); --pnl-edge: var(--edge-cyan); color: var(--ink); }
.uyari a, .bilgi a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------- boş --- */

.bos { padding: var(--s6) var(--s5); text-align: center; --pnl-bg: transparent; }
.bos h3 { color: var(--ink); margin-bottom: var(--s2); }
.bos p { color: var(--ink-2); max-width: 46ch; margin-inline: auto; }
.bos .dg { margin-top: var(--s4); }

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

.sayfalama { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }

.sayfalama a, .sayfalama span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding-inline: var(--s2);
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  color: var(--ink-2);
  transition: color var(--hiz) linear, border-color var(--hiz) linear, background var(--hiz) linear;
}

.sayfalama a:hover { color: var(--accent); border-color: var(--edge-cyan); }
.sayfalama [aria-current] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.sayfalama__bilgi { margin-left: auto; color: var(--ink-3); border-color: transparent; }

/* Tek sayfalık listede şerit hiç çizilmiyor -- "1 / 1" bilgi değil gürültü --
   ve geriye yalnız bilgi satırı kalıyor. O zaman .sayfalama flex kutusu
   yok, yani yukarıdaki kuralların hiçbiri tutmuyor; ölçüleri burada
   veriliyor. p seçicisi bilerek: aynı sınıf nav'ın içinde span olarak da
   geçiyor ve oradaki hâli bozulmamalı. */
p.sayfalama__bilgi {
  margin-top: var(--s4);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
}

/* ==== 11-sayfa.css ==== */
/* ---------------------------------------------------------------- profil --- */

.profil-basi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

.profil-basi img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--edge);
}

.profil-basi h1 { font-size: 40px; }
.profil-basi .veri { font-size: var(--t-11); color: var(--ink-3); }

/* Sayı ızgarası: kutu yok, sadece kılcal çizgi. Yoğunluk arttıkça kart
   çerçevesi bilgiyi taşımıyor, gürültü ekliyor. */
.sayilar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--edge-2);
  border-left: 1px solid var(--edge);
}

.sayilar > div {
  padding: var(--s4);
  border-right: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  display: grid;
  gap: var(--s2);
}

.sayilar .lbl { order: -1; }

/* --------------------------------------------------------------- altbilgi --- */

.altbilgi { border-top: 1px solid var(--edge); background: var(--bg-2); margin-top: var(--s5); }

.altbilgi__ic {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: var(--s5);
  padding-block: var(--s5) var(--s4);
}

/* h2, h3 DEĞİL. Altbilginin üç başlığı (Menü / Hesap / Sunucu) belgenin üst
   düzey bölümleri: h3 iken h2'si olmayan her sayfa h1'den doğrudan h3'e
   atlıyordu ve ekran okuyucu kullanıcısı bir üst başlığa çıkamıyordu. On iki
   sayfanın sekizinde vardı; testler.php "hicbir sayfada baslik kademesi
   atlanmiyor" ile tutuyor.

   Görünüş değişmedi: burası 11px mono, sayfadaki öteki h2'lerin 34px display
   ölçüsünü almıyor. Kademe belgeye ait, punto tasarıma. */
.altbilgi h2 {
  font-size: var(--t-11);
  font-family: var(--ff-mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: var(--s3);
}

.altbilgi ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.altbilgi a { color: var(--ink-2); transition: color var(--hiz) linear; }
.altbilgi a:hover { color: var(--accent); }
.altbilgi__sosyal a { display: inline-flex; align-items: center; gap: var(--s2); }

/* Çıkış artık bağlantı değil, CSRF anahtarı taşıyan bir form düğmesi.
   Görünüşü listedeki bağlantılarla aynı kalıyor. */
.altbilgi__cikis {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--hiz) linear;
}

.altbilgi__cikis:hover { color: var(--accent); }

.altbilgi__son {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3) var(--s6);
  border-top: 1px solid var(--edge);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  color: var(--ink-3);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- talep ----
   Destek konuşması. Yetkili mesajı sol kenardaki camgöbeği şeritle
   ayrılıyor; renk yerine kenar kullanmanın sebebi, ikinci bir vurgu rengi
   açmamak. */

.talep-basi {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  padding: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

/* Künye sayfa genişliğine yayılmasın: etiket ile değeri birbirinden
   1200px uzağa düşürmek okunmuyor. */
.talep-basi .satir-liste { flex: 1 1 320px; max-width: 460px; }

.durum {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 4px 10px;
  border-radius: var(--r-s);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  background: rgb(var(--ton) / 0.07);
  color: var(--ink-2);
}

/* Açık = sıra bizde, dikkat çekmeli. Kapandı = arka plana çekilmeli. */
.durum[data-durum='acik']       { background: var(--accent-wash); color: var(--accent); }
.durum[data-durum='cevaplandi'] { background: rgb(var(--ton) / 0.1); color: var(--ink); }
.durum[data-durum='kapandi']    { color: var(--ink-3); }

.mesajlar { display: grid; gap: var(--s3); }

.mesaj { padding: var(--s4); }
.mesaj--yetkili { --pnl-bg: var(--surface-2); --pnl-golge: var(--ic-isik), inset 2px 0 0 var(--accent); }

.mesaj__basi {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}

.mesaj__basi b { font-weight: 600; color: var(--ink); }
.mesaj p { color: var(--ink-2); max-width: 74ch; margin: 0; }

.yanit-kutusu { padding: var(--s4); margin-top: var(--s4); }
.yanit-kutusu__eylem { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* ==== 12-kimlik.css ==== */
/* --------------------------------------------------------------- kimlik ----
   Giriş ve kayıt aynı ekranda ama aynı anda değil: bir seferde tek form.
   Yan yana iki panel, gelen kişiye "hangisi benim?" diye düşündürüyordu ve
   iki formun alanları göz ucuyla karışıyordu.

   Sayfa sitenin geri kalanına benzemiyor: bant yok, pano yok, kolon yok.
   Solda ajan görseli, sağda tek sütun form. Kimlik ekranı içerik sayfası
   gibi görünmemeli.

   Geçiş bağlantısı gerçek bir <a href="?mod=kayit">: JS kapalıyken sunucu
   diğer formu çiziyor, geri tuşu çalışıyor, bağlantı paylaşılabiliyor. JS
   varken aynı tıklama startViewTransition ile yerinde dönüşüyor ve yazılmış
   e-posta öbür forma taşınıyor. */

/* Yükseklik svh'den hesaplanmıyor. "100svh eksi başlık" denemesinde bölüm
   pencereden uzun çıkıp görselin üstündeki yazıyı kıvrımın altına itiyordu;
   svh her tarayıcıda görünen alanla aynı değil. Sabit bir taban veriyoruz,
   gerisini form sütununun içeriği belirliyor. */
.kimlik {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  min-height: 600px;
  border-bottom: 1px solid var(--edge);
}

.kimlik__gorsel {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  view-transition-name: kimlik-gorsel;
}

/* Görsel akıştan çıkarılıyor. Akışta kalınca height:100% belirsiz yükseklik
   karşısında auto'ya düşüyor ve 876px genişliğindeki sütunda 876px boy
   veriyordu; bölümün yüksekliğini form değil görsel belirliyordu. */
.kimlik__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  view-transition-name: kimlik-art;
}

/* Kırpma sol kenardan: ajan iki karede de solda duruyor ve sağa, forma doğru
   bakıyor. Yatayda soldan hiç kesmiyoruz, fazlalık sağdaki boş karanlıktan
   gidiyor. Sütun daraldığında (900-1100px arası) bu sayede kadraja giren ilk
   şey ajan oluyor, boş arka plan değil.
   Dikey değerin masaüstünde etkisi yok (kırpma yalnız yatayda), mobildeki
   190px'lik bantta çalışıyor. */
.kimlik__art--giris { object-position: 0% 44%; }
.kimlik__art--kayit { object-position: 0% 40%; }

[data-kimlik='giris'] .kimlik__art--kayit,
[data-kimlik='kayit'] .kimlik__art--giris,
[data-kimlik='giris'] .kimlik__slogan--kayit,
[data-kimlik='kayit'] .kimlik__slogan--giris { display: none; }

.kimlik__slogan { view-transition-name: kimlik-slogan; }

/* Görsel form kadar hızlı değişmiyor: hafif yakınlaşarak çapraz geçiyor,
   kamera değişmiş gibi. Formun kayması dikkatte önde kalsın. */
::view-transition-old(kimlik-art) { animation: art-cik 240ms var(--yay) both; }
::view-transition-new(kimlik-art) { animation: art-gir 400ms var(--yay) both; }

@keyframes art-cik { to { opacity: 0; transform: scale(1.035); } }
@keyframes art-gir { from { opacity: 0; transform: scale(1.055); } }

/* İki katman: aşağı doğru koyulaşan perde metni okutuyor, sağa doğru olan
   görseli form sütununa bağlıyor. Süs değil, iki işi de var. */
.kimlik__gorsel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(7 17 31 / 0.08) 0%, rgb(7 17 31 / 0.40) 48%,
                                      rgb(7 17 31 / 0.86) 78%, var(--bg) 100%),
              linear-gradient(90deg, transparent 58%, var(--bg) 100%);
}

.kimlik__yazi {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  gap: var(--s3);
  padding: var(--s5) var(--gutter) var(--s6);
}

.kimlik__yazi p { color: var(--ink-2); max-width: 34ch; margin: 0; }

.kimlik__panel { display: grid; place-items: center; padding: var(--s6) var(--gutter); }

.kimlik__kutu {
  width: 100%;
  max-width: 384px;
  view-transition-name: kimlik-kutu;
}

/* Etiketi h1 de olabilir p de (bkz. giris.php); gorunus etikete degil
   sinifa bagli. */
.kimlik__baslik {
  margin: 0 0 var(--s2);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 0.94;
  letter-spacing: -0.032em;
  text-transform: uppercase;
  color: var(--ink);
}
.kimlik__kutu > p { color: var(--ink-2); margin-bottom: var(--s5); }

/* Görünmeyen kutu display:none olduğu için view-transition-name'i de
   kaydolmuyor; iki kutunun aynı adı taşıması bu yüzden çakışma yaratmıyor. */
[data-kimlik='giris'] .kimlik__kutu--kayit,
[data-kimlik='kayit'] .kimlik__kutu--giris { display: none; }

/* Berkay'ın istediği çizgi: formu geçiş bağlantısından ayıran kılcal hat. */
.kimlik__gecis {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--edge);
  font-size: var(--t-13);
  color: var(--ink-3);
}

.kimlik__gecis a {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-15);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border-bottom: 1px solid rgb(24 216 255 / 0.35);
  transition: border-color var(--hiz) linear, color var(--hiz) linear;
}

.kimlik__gecis a:hover { border-bottom-color: var(--accent); color: color-mix(in srgb, var(--accent), #fff 32%); }

/* Kutu yer değiştirirken: eski sola kayıp siliniyor, yeni sağdan giriyor.
   Yükseklik farkını (kayıt formu girişten uzun) grup animasyonu yumuşatıyor,
   yoksa panel bir kare içinde zıplıyor. */
::view-transition-group(kimlik-kutu) {
  animation-duration: 340ms;
  animation-timing-function: var(--yay);
}

::view-transition-old(kimlik-kutu) { animation: kimlik-cik 170ms var(--yay) both; }
::view-transition-new(kimlik-kutu) { animation: kimlik-gir 300ms 70ms var(--yay) both; }

@keyframes kimlik-cik { to { opacity: 0; transform: translateX(-18px); } }
@keyframes kimlik-gir { from { opacity: 0; transform: translateX(22px); } }

/* Kimlik sayfasında gövdenin tümü kaymıyor: kayan parça kutunun kendisi.
   main'in geçiş adı burada kaldırılıyor, yoksa form değiştirirken bütün
   sayfa bir kez yukarı sıçrıyor. */
.kimlik-sayfa main { view-transition-name: none; }

/* ==== 13-hareket.css ==== */
/* -------------------------------------------------------------- hareket ----
   Dört hareket var, dördünün de bir işi var. Süs için eklenen beşinci bir
   animasyon yok.

   1. Sayfa geçişi (View Transitions). Burası sunucu tarafında üretilen çok
      sayfalı bir site; her tıklama tam sayfa yenilemesi demek ve varsayılan
      hâli beyaz bir çakma. Başlık ve balon geçiş boyunca yerinde kalıyor,
      yalnız gövde değişiyor. Destelemeyen tarayıcıda hiçbir şey olmuyor.
   2. Görünüme girince beliren ızgaralar. İçeriği geldiği sırada okutuyor.
      Her bölüme değil, yalnız çok elemanlı ızgaralara uygulanıyor.
   3. Sayaçlar. Kartın varlık sebebi olan sayıya gözü çekiyor.
   4. Kısayol kutucuklarında imleci izleyen ışık. Tıklanabilirlik geri
      bildirimi; sayfadaki tek işaretçi güdümlü efekt.

   Hepsi prefers-reduced-motion altında kapanıyor. */

@view-transition { navigation: auto; }

.ust  { view-transition-name: ust; }
.balon { view-transition-name: balon; }
main  { view-transition-name: govde; }

::view-transition-old(govde) { animation: gecis-cik 160ms var(--yay) both; }
::view-transition-new(govde) { animation: gecis-gir 260ms var(--yay) both; }

@keyframes gecis-cik { to { opacity: 0; transform: translateY(-6px); } }
@keyframes gecis-gir { from { opacity: 0; transform: translateY(10px); } }

/* Sayfa açılışındaki kademeli giriş (banner). */
.gir { animation: gir 560ms var(--yay) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

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

/* Kaydırınca beliren öğeler. data-belir'i JS koyuyor: JS kapalıysa hiçbir
   şey gizlenmiyor, içerik olduğu gibi duruyor.

   GEÇİŞ DEĞİL ANİMASYON, ve bu sitedeki dört hover'ı geri getiren düzeltme.

   Eski hâli belirişi `transition` ile yapıyordu ve bir öğede `transition`
   TEK bir yuva: kazanan bildirim listeyi tümden değiştiriyor, eklemiyor.
   `[data-belir][data-gorunur]` iki nitelik, yani (0,2,0); `.kisayol` tek
   sınıf, (0,1,0). Yani beliriş kutucuğun kendi `border-color,
   background-color @140ms` listesini ÖZGÜLLÜKLE eziyordu -- sıra değiştirerek
   ya da transform'u translate'e çevirerek düzelmiyor, ölçüldü ve düzelmedi.

   Aynı çarpışma .paket (bütün .pnl geçişleri), .skin (kenar geçişi),
   .kadro__tumu ve tablo satırlarında da ölçüldü.

   Beliriş bir kerelik bir GİRİŞ; animasyonların işi o. Hover bir DURUM
   değişimi; geçişlerin işi o. İkisini aynı mekanizmaya koymak çarpışmayı
   üretiyordu. Artık beliriş `animation`, hover `transition` -- ayrı yuvalar,
   çarpışma yok, beşinin geçişleri kendiliğinden geri geliyor.

   Kalıp yeni değil: iki satır yukarıdaki .gir tam olarak böyle çalışıyor
   (`animation: ... backwards` + yalnız `from` yazan keyframes). `backwards`
   şart: kademe gecikmesi boyunca öğe `from` değerlerinde bekliyor, yoksa
   sırasını beklerken görünür olurdu. */
[data-belir] { opacity: 0; translate: 0 12px; }

[data-belir][data-gorunur] {
  opacity: 1;
  translate: none;
  animation: belir 460ms var(--yay) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes belir {
  from { opacity: 0; translate: 0 12px; }
}

/* Tablo satırlarında yalnız saydamlık: display:table-row üstünde kaydırma
   tarayıcıdan tarayıcıya değişiyor, kolon hizası kaymasın. Kendi keyframes'i
   var; `translate: none` yazmak yetmiyordu çünkü kaydırmayı artık animasyon
   yapıyor ve animasyon kuralı satır içi değerleri eziyor.
   Sekiz tbody: venny.js data-belir-grup="sade" taşıyanlara koyuyor. */
[data-belir-sade][data-belir] { translate: none; }
[data-belir-sade][data-belir][data-gorunur] { animation-name: belir-sade; }

@keyframes belir-sade {
  from { opacity: 0; }
}

/* HAREKET AZALTMA KARSILIKLARI. Ucu de kendi asillarindan tek farkla
   ayriliyor: konum/olcek yok, yalniz saydamlik. Ayni sure, ayni gecikme,
   ayni kademe -- yani ayari acik olan ziyaretci sayfayi olu degil sakin
   goruyor. Asillari yukarida ve asagida duruyor, bunlar onlarin yerine
   gecmiyor; @media blogunda animation-name ile secilliyorlar. */
@keyframes gir-sade {
  from { opacity: 0; }
}

@keyframes slot-dolsun-sade {
  from { opacity: 0; background: var(--accent-deep); }
}

/* Sayaç dönerken rakam genişliği değiştikçe satır zıplamasın. */
[data-sayac] { font-variant-numeric: tabular-nums; }

.kisayol { position: relative; overflow: hidden; --fx: 50%; --fy: 50%; }

.kisayol::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--fx) var(--fy),
                              rgb(24 216 255 / 0.12), transparent 62%);
  opacity: 0;
  transition: opacity 220ms linear;
}

.kisayol:hover::after { opacity: 1; }

/* ------------------------------------------- HAREKET AZALTMA: CERRAHİ ---
   `prefers-reduced-motion: reduce` "hiç geçiş olmasın" DEMİYOR. Ayarın amacı
   vestibüler rahatsızlık veren hareketi kaldırmak: paralaks, büyük kaydırma,
   ölçekleme, döndürme, sonsuz döngü, otomatik oynatma. 140 milisaniyelik bir
   renk geçişi o kategoride değil.

   28 Ağustos'a kadar burada nükleer seçenek vardı: `*` üzerinde
   `transition-duration: 1ms !important`. Sonucu ölçülebilir ve bu sitenin
   sahibi onu yaşadı -- ayarı açık olduğu için hover'ların tamamı anında
   sıçrıyordu ve site "hiç animasyonu yok" gibi hissediyordu. Hiçbir risk
   taşımayan geçişler de kapanmıştı.

   Şimdi ayrım özellik bazında:
     KAPANAN  -> transform, translate, scale, rotate (yer degistiren her sey),
                 sonsuz animasyonlar, sayfa gecisleri, kaydirma yumusatmasi
     KALAN    -> renk, zemin, kenar, saydamlik, golge, backdrop-filter,
                 clip-path -- hepsi kendi normal suresinde

   clip-path KALIYOR ve bu bilincli: birincil dugmenin pahi derinlesiyor, yani
   sekil degisiyor ama oge YERINDEN OYNAMIYOR. Vestibuler tetikleyici olan
   sey konum degisimi, sekil degisimi degil. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }

  /* 29 AGUSTOS: BURASI DA CERRAHI OLDU. Once "animation-duration: 1ms" ile
     BUTUN animasyonlar kapaliydi ve gerekcesi "hepsi konum ya da dongu
     tasiyor" idi. Yanlisti: ikisi de tasimayan bir surum yazilabiliyordu ve
     yazilmadigi icin ayari acik olan ziyaretci -- bu sitenin sahibi dahil --
     sayfada TEK bir hareket gormuyordu. "Sitede animasyon yok denilecek
     kadar az" cumlesi tam olarak bunun olcumu.

     Ayrim artik animasyonun NE YAPTIGINA gore:
       DURUYOR -> konum (translate), olcek (scale), donme (rotate),
                  sonsuz donguler, sayfa gecisleri, kaydirma yumusatmasi
       KALIYOR -> yalniz saydamlikla oynayan her sey, kendi suresinde

     Bir solma vestibuler tetikleyici degil; WCAG'in 2.3.3'te saydigi sey
     paralaks, buyuk kaydirma, olcekleme, donme ve otomatik oynatma. Fade
     onlarin hicbiri. */
  *, *::before, *::after {
    animation-iteration-count: 1 !important;
    transition-property:
      color, background-color, border-color, outline-color, fill, stroke,
      opacity, box-shadow, backdrop-filter, -webkit-backdrop-filter,
      clip-path, text-decoration-color !important;
  }

  /* Konum tasiyan animasyonlar SADE karsiliklariyla degistiriliyor --
     kapatilmiyorlar. Sure ve gecikme aynen kaliyor, yani kademeli giris
     duruyor: oge oge beliriyor ama hicbiri yerinden oynamiyor. */
  [data-belir][data-gorunur] { animation-name: belir-sade; }
  .gir { animation-name: gir-sade; }
  .slotlar span[data-dolu] { animation-name: slot-dolsun-sade; }

  /* Beliris baslangici: yalniz saydamlik. translate DE sifirlaniyor, cunku
     keyframes artik onu hic yazmiyor ve satir ici deger kalirdi. */
  [data-belir] { transform: none; translate: none; }

  /* Imleci izleyen isik bir konum efekti: kapaniyor. */
  .kisayol::after { display: none; }

  /* Kaldirma ve olcekleme durdu; kenar, yuzey ve golge gecisleri calisiyor.
     .kadro__ajan > img ayri satirda cunku olcegi transform ile degil `scale`
     ozelligiyle veriyor -- transform:none onu durdurmuyor. */
  .skin:hover .skin__gorsel img,
  .kadro__tumu:hover,
  .kisayol:hover { transform: none; }

  /* SINIF İKİ KERE YAZILI ve bu bir yazım hatası değil. Ölçüldü: tek sınıfla
     yazıldığında ölçek durmuyordu, çünkü asıl kural 17-kadro.css'te ve o
     dosya bu dosyadan SONRA derleniyor -- eşit özgüllükte sonra yazılan
     kazanıyor. Sınıfı tekrarlamak özgüllüğü (0,2,1)'den (0,3,1)'e çıkarıyor.

     Kuralı 17'ye taşımak da çözerdi ama hareket politikası tek dosyada
     duruyor; dağıtırsam bir sonraki kişi hangi dosyada arayacağını bilemez.
     Aynı teknik sitede ikinci kez kullanılıyor (03-duzen.css'te [lang]). */
  .kadro__ajan.kadro__ajan:hover > img { scale: none; }

  /* Canli sunucu noktasinin nabzi durdu ama nokta YANIK kaliyor: parlaklik
     bilgi tasiyor, "sunucu cevap veriyor" demek. Hareket kapatan ziyaretci
     bilgiyi kaybetmiyor, yalnizca atisi gormiyor. */
}

/* ==== 14-mobil.css ==== */
/* ----------------------------------------------------------------- mobil --- */

@media (max-width: 1240px) {
  /* Pano zaten iki kolon ve oran esnek, yani bu eşikte yeniden yazacak bir
     şey yok. Üçüncü kolonu (.kolon--sag) alta indiren kural da kalktı:
     üçüncü kolon 28 Ağustos'ta tümden gitti, kural artık var olmayan bir
     seçiciyi hedefliyordu. */
  .kisayollar { grid-template-columns: repeat(3, 1fr); }
  .kisayollar > :first-child { grid-column: span 3; }
}

@media (max-width: 1000px) {
  .altbilgi__ic { grid-template-columns: 1fr 1fr; }
  .skinler { grid-template-columns: repeat(2, 1fr); }
  .skin--iri { grid-column: span 2; grid-row: span 1; }
  .banner__gorsel { inset: 0 0 0 44%; }
}

@media (max-width: 900px) {
  :root { --marka-h: 58px; --t-34: 28px; }

  .marka__yazi { height: 28px; width: auto; }
  .marka__kuyruk, .ust__sol { display: none; }
  /* [hidden] koruması ŞART. Bu satırın kendisi bir display kuralı ve yazar
     display'i UA'nın [hidden] { display: none } kuralını yener. Düğme
     sunucudan hidden geliyor (JS'siz tarayıcıda ölü uç kalmasın diye); bu
     koruma olmadan tam da o tarayıcıda görünmeye devam ederdi. Aynı tuzak
     .balon__tetik'te de var, orada da açıkça yazılı. */
  .menu-dugmesi { display: inline-flex; }
  .menu-dugmesi[hidden] { display: none; }

  /* Dar ekranda üç kolon yok: sunucu durumu düşüyor, kalan ikisi tek sıra.
     Izgara yerine flex, çünkü .ust__sol gizlenince orta kolon boşalıyor. */
  .ust { position: relative; }
  .ust__marka { display: flex; justify-content: flex-start; }
  .marka { margin-right: auto; }

  /* Üç tam düğme 375px'e sığmıyordu: bu ikisi ikona iniyor. */
  .dg--simge { width: 38px; padding-inline: 0; }
  .dg--simge .dg__yazi { display: none; }

  /* Girişliyken dördüncü düğme 375px'te menüyü markanın üstüne bindiriyor.
     Çıkış burada düşüyor; altbilgide ve hesap sayfasında duruyor. */
  .ust__cikis { display: none; }

  /* Sekme şeridi mobilde açılır menüye dönüşüyor. İşaretlemede açık geliyor;
     JS yüklenince kapatıyor, böylece JS kapalıyken de bağlantılar erişilebilir
     kalıyor. */
  .sekmeler {
    position: absolute;
    inset: calc(var(--marka-h) + 1px) 0 auto;
    z-index: 35;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    gap: 0;
    padding: var(--s2) var(--gutter) var(--s4);
    background: var(--bg-2);
    border-bottom: 1px solid var(--edge-2);
    box-shadow: var(--golge);
  }

  .sekmeler[hidden] { display: none; }
  .sekmeler a { height: 44px; padding-inline: var(--s3); font-size: var(--t-15); border-radius: var(--r-s); }
  .sekmeler a[aria-current='page'] { clip-path: none; border-radius: var(--r-s); padding-inline: var(--s3); }

  .banner__gorsel { position: relative; inset: auto; height: 200px; }
  .banner__gorsel::after { background: linear-gradient(0deg, var(--surface) 0%, transparent 60%); }
  .banner__ic { min-height: 0; padding-block: var(--s4) var(--s5); }
  .banner__ic > * { max-width: none; }

  .pano { grid-template-columns: 1fr; }
  .kisayollar { grid-template-columns: 1fr 1fr; }
  .kisayollar > :first-child { grid-column: span 2; }
  .podyum, .paketler, .arac-cubugu { grid-template-columns: 1fr; }

  /* Kimlik ekranı mobilde üstte 190px görsel, altında form. */
  .kimlik { grid-template-columns: 1fr; min-height: 0; }
  .kimlik__gorsel { height: 190px; }
  .kimlik__gorsel::after { background: linear-gradient(180deg, rgb(7 17 31 / 0.15) 0%, rgb(7 17 31 / 0.5) 50%, var(--bg) 100%); }
  .kimlik__yazi { padding: var(--s4) var(--gutter); }
  .kimlik__panel { padding: var(--s5) var(--gutter) var(--s6); }
  .kimlik__baslik { font-size: 32px; }
  .sayilar { grid-template-columns: repeat(2, 1fr); }
  .adimlar { grid-template-columns: 1fr; }
  .adim { padding: var(--s4) 0; border-bottom: 1px solid var(--edge); }
  .adim + .adim { padding-left: 0; border-left: 0; }
  .profil-basi { grid-template-columns: auto minmax(0, 1fr); }
  .profil-basi > :last-child { grid-column: 1 / -1; }
  .satir { grid-template-columns: 1fr; gap: var(--s3); }
  .altbilgi__ic { grid-template-columns: 1fr; gap: var(--s4); }
  .duyuru { padding: var(--s4); }

  /* Sıralama tablosu mobilde yatay kayıyor: kolonları gizleyip veriyi eksik
     göstermek yerine tabloyu tablo bırakıyoruz. */
  .tablo-sar { overflow-x: auto; }
  .tablo { min-width: 700px; }
}

/* Panel tabloları.

   Sıralama tablosunda kolon gizlemiyoruz, orada her kolon sayfanın kendisi.
   Panelde iş farklı: yetkili tabloyu okumaya değil bir şey yapmaya geliyor.
   Telefonda "Aç" düğmesine ulaşmak için 402px sürüklemek, kolonu gizlemekten
   daha çok veri kaybettiriyor. İkincil kolonlar düşüyor, eylem kalıyor.

   Eşik 700px ve ölçülerek seçildi. Kuyruk tablosu yedi kolonuyla 745px yer
   istiyor; 768px'te bu 23px'lik bir kaydırma demek ve beş kolonu gizlemeye
   değmez, 700px'in altında kaydırma 100px'i geçiyor ve okunmaz oluyor. */
/* Komutlar sayfası */
.komut-gruplar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.komut-liste {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.komut-liste > div { display: flex; flex-direction: column; gap: var(--s1); }
.komut-liste dt { display: flex; }
.komut-liste dd {
  font-size: var(--t-13);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
}

.komut-sade {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-inline: var(--s3);
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  font-family: var(--ff-mono);
  font-size: var(--t-13);
  color: var(--ink);
}

kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
}

/* Ekip / yönetim kurulu — ana sayfada kısayolların altında */
.blok-ust-baslik {
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}

/* Ray SABİT genişlikte, esnek değil. minmax(140px, 1fr) ile raylar satırı
   dolduracak kadar geniyordu ve kadroda tek kişi varken o kişi 1300 piksellik
   bir satırın solunda, arkasında bir ekran boşlukla duruyordu -- bozuk
   ızgara gibi okunuyor. Sabit 160px'te tek kart "bir kişi" diye okunuyor,
   sekiz kart düzgün sarıyor. */
/* Başlık ve kurul yan yana. Gerekçe index.php'de, bölümün başında. */
/* Bölümün tamamı TEK BİR CAM ŞERİT. Başlık solda, kurul sağda, ikisi de
   aynı kabın içinde.

   Kurulda bugün bir kişi var. Kapsız hâlinde o tek kart 1256 piksellik bir
   satırın ortasında askıda duruyordu -- ızgarada delik izlenimi. Kap
   gelince aynı boşluk "şeridin devamı" oluyor; kutunun içindeki boşluk
   eksiklik değil, nefes.

   Kurul altı kişiye çıktığında da çalışıyor: sağdaki sütun dolar, şerit
   uzar, başka hiçbir şey değişmez. */
.kurul {
  display: grid;
  /* İlk sütun auto: başlık iki kısa satır ve sabit 200 piksel ona fazla
     geliyordu -- kart gereksiz yere sağa itiliyordu. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
  padding: var(--s4);
}

.kurul__basi { display: grid; gap: var(--s1); }
.kurul__basi .blok-ust-baslik { margin: 0; }

@media (max-width: 900px) {
  .kurul { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* Kartlar solda, davet cümlesi en sağda. auto-fill yerine esnek kutu:
   davet son öğe ve margin-left:auto ile sağa yaslanıyor; ızgarada bunu
   yapmak için kart sayısını bilmek gerekiyordu. */
.ekip-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

.ekip-liste > .ekip-kart { flex: 0 0 160px; }

/* DAVET SAĞA YASLANMIYOR. Bir gün yaslanıyordu, gerekçesi "şeridin sağı boş
   kalmasın"dı. Kurulda tek kişi olduğu için sonuç şu oldu: 160 piksellik bir
   kart, 660 piksel hiçlik, sonra gri bir cümle. Ortadaki boşluk hata gibi
   okunuyor; satırın SONUNDAKİ boşluk okunmuyor bile.

   Davet cümlesi kartın dengi de değil: 13 piksel, --ink-3, tek satır. İki
   ucu tutan bir düzen iki ucunda da ağırlık ister. Şimdi kartın yanında ve
   şerit büyümeye yer bırakmış gibi duruyor -- cümlenin kendisi de tam olarak
   bunu söylüyor. */
.kurul-davet {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-3);
  font-size: var(--t-13);
}

.kurul-davet a { color: var(--ink-2); border-bottom: 1px solid var(--edge-cyan); }
.kurul-davet a:hover { color: var(--accent); }

@media (max-width: 560px) {
  /* Telefonda 160px sabit kart ikiye sığmıyor. */
  .ekip-liste > .ekip-kart { flex: 1 1 140px; }
  .kurul-davet { max-width: none; }
}

.ekip-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s3);
  text-align: center;
}

.ekip-kart b { font-size: var(--t-15); font-weight: 500; color: var(--ink); }
.ekip-kart .lbl { font-size: var(--t-11); }

/* Ekip kartının kare portresi artık kendi kuralı değil, .avatar bileşeninin
   bir takma adı. Kural dosyanın sonundaki avatar bölümünde; buradaki iki
   sınıf adı orada .avatar ile aynı seçici listesinde duruyor. */

@media (max-width: 700px) {
  .tablo--panel .ikincil { display: none; }
  .tablo--panel { min-width: 0; }

  /* Kolonlar düşünce dolgu ve ad kolonunun taban genişliği de daralıyor.
     Ölçüldü: yalnız kolonları gizlemek 21px, dolguyu daraltmak 5px taşırma
     bırakıyordu; kalan 5px .oyuncu'nun 180px tabanıydı. */
  .tablo--panel th,
  .tablo--panel td { padding-inline: var(--s2); }
  .tablo--panel .oyuncu { min-width: 140px; }

  /* Eylem düğmeleri parmakla basılacak. 30px masaüstünde fare için yeterli,
     telefonda değil; satır biraz uzuyor, kabul. */
  .tablo--panel .dg { height: 38px; }
}

@media (max-width: 560px) {
  .skinler, .kisayollar { grid-template-columns: 1fr; }
  .skin--iri, .kisayollar > :first-child { grid-column: span 1; }
}

/* ============================================================================
   AVATAR
   ============================================================================
   Tek bileşen, dört boy, iki gövde: ya <img> ya adın ilk harfi. Aynı kare
   sohbet satırında (32), ekip kartında (64), profil başında (88) ve hesap
   önizlemesinde (96) çıkıyor.

   Boy bir yerel değişkenle geliyor (.pnl'in --pnl-bg deseni), yani harfin
   puntosu da kendiliğinden ölçekleniyor ve beşinci bir boy eklenirken
   unutulacak bir satır kalmıyor. Ara değer yok: venny_avatar_etiketi() bu
   dördünün dışında InvalidArgumentException atıyor.

   .ekip-kart__avatar burada bir TAKMA AD. index.php hâlâ o eski adı yazıyor;
   sayfa venny_avatar_etiketi($e, 64)'e geçince aşağıdaki üç yerden silinecek
   ve geriye tek bileşen kalacak.
   ============================================================================ */

.avatar,
.ekip-kart__avatar {
  --avatar-boy: 32px;
  flex: none;
  width: var(--avatar-boy);
  height: var(--avatar-boy);
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  object-fit: cover;
  /* Ajan portreleri tam boy çizim; merkezden kırpınca göğüs kalıyor, yüz
     gidiyor. Yüklenen fotoğraf sunucuda zaten 256x256 kareye indiği için
     onda bu ayarın etkisi yok. */
  object-position: top;
  /* Tembel yüklenen görselin yerini önceden tutuyor: yoksa sohbet akışı
     satır satır dolarken kaydırma konumu altından kayıyor. */
  background: var(--surface-2);
}

.avatar--32 { --avatar-boy: 32px; }
.avatar--64, .ekip-kart__avatar { --avatar-boy: 64px; }
.avatar--88 { --avatar-boy: 88px; }
.avatar--96 { --avatar-boy: 96px; }

.avatar--harf,
.ekip-kart__avatar--harf {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-wash);
  font-family: var(--ff-display);
  font-size: calc(var(--avatar-boy) * 0.42);
  /* 700 değil 600: bu bir başlık değil, bir işaret. Düğme ve sekme yazısıyla
     aynı ağırlıkta duruyor. */
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  user-select: none;
}

/* hesap.php'nin 96'lık önizlemesi; yanında ad ve avatarın nereden geldiği. */
.avatar-onizleme { display: flex; align-items: center; gap: var(--s4); }

/* Hazır portre ızgarası. auto-fit, sabit sütun sayısı değil: galeriye
   altıncı portre girerse ızgaranın haberi olsun. */
.avatar-secim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--s2);
}

.avatar-secim__kutu {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: rgb(var(--ton) / 0.04);
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--hiz) linear, background var(--hiz) linear;
}

.avatar-secim__kutu:hover { border-color: var(--edge-cyan); background: rgb(24 216 255 / 0.08); }
.avatar-secim__kutu:hover .lbl { color: var(--accent); }

/* Seçili kutu sınıfla değil aria-current ile işaretli: ekran okuyucu da
   hangisinin yürürlükte olduğunu duyuyor. Aynı desen .cip[aria-current]. */
.avatar-secim__kutu[aria-current] { border-color: var(--accent); background: var(--accent-wash); }
.avatar-secim__kutu[aria-current] .lbl { color: var(--accent); }

/* ============================================================================
   CANLI SOHBET
   ============================================================================
   Shoutbox, forum değil: tek akış, kısa satır, kutusuz satır. Elli mesajın
   her birine .pnl vermek elli kenarlık demekti; ayrım .satir-liste'deki gibi
   kılcal bir çizgi.

   Yeni pah yok: --cut hâlâ tam iki yerde (birincil düğme, seçili sekme).
   Yeni gölge yok: --golge hâlâ tek yerde (balon).

   .sohbet sınıfının kendi kuralı yok, aşağıdaki :has() kancası dışında bir
   işi de yok -- kutunun görünüşünü .kart .pnl taşıyor.
   ============================================================================ */

/* /sohbet'te .paketler'in iki kolonu eşit değil: solda okunan akış, sağda
   sabit bir kurallar kartı. Kabı yazan sohbet.php'ye dokunamadığımız için
   oran :has() ile veriliyor. Tanımayan tarayıcıda 1fr 1fr kalıyor, o da
   çalışıyor -- bu bir düzen tercihi, bir gereklilik değil.

   min-width 901px sorgusu ZORUNLU, süs değil. :has() iki sınıflı bir seçici,
   yani mobil bloktaki düz .paketler { 1fr } kuralından güçlü; sorgusuz
   yazıldığında telefonda da iki kolon kalıyor ve kurallar kartı 96px'e
   düşüp her kelimeyi hecelere bölüyor. Ölçerek görüldü, tahmin değil. */
@media (min-width: 901px) {
  .paketler:has(.sohbet) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.sohbet__akis {
  /* Sabit yükseklik şart: kutu içeriğiyle büyürse sayfa her yeni mesajda
     uzuyor ve altındaki gönderme alanı parmağın altından kaçıyor. Tabandaki
     340px'e 32'lik avatarla dört satır sığıyor; üçten azı oda değil pencere. */
  height: clamp(340px, 58vh, 560px);
  overflow-y: auto;
  /* Akışın dibine gelince tekerlek sayfayı sürüklemesin. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--edge-2) transparent;
  display: flex;
  flex-direction: column;
}

/* Odada beş mesaj varken bunlar kutunun tepesinde asılı kalmasın: son satır
   her zaman dipte, tıpkı bir terminalde olduğu gibi.
   justify-content: flex-end DEĞİL, ilk çocuğa otomatik üst boşluk -- taşan
   içerikte flex-end'in üst tarafı kaydırılamaz hâle getirdiği bilinen bir
   durum var, otomatik boşluk ise taşınca kendiliğinden sıfıra düşüyor. */
.sohbet__akis > :first-child { margin-top: auto; }

/* Boş oda yazısı dipte değil ortada duruyor; yukarıdaki kuralı eziyor. */
.sohbet__akis > .sohbet__bos { margin-block: auto; }

.sohbet__bos { padding: var(--s5) var(--s4); text-align: center; color: var(--ink-2); }

.sohbet-satir {
  /* Üç doğrudan çocuk, iki sütun: avatar solda iki satır kaplıyor, başlık ve
     gövde sağda alt alta. Adsız bir sarmalayıcı div olmadığı için yerleşim
     burada elle veriliyor. İlk sütun auto: genişliği avatarın kendi boyu
     söylüyor, buraya ikinci kez 32px yazmıyoruz. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  padding: var(--s3) var(--s4);
}

.sohbet-satir > .avatar { grid-row: span 2; }
.sohbet-satir + .sohbet-satir { border-top: 1px solid rgb(var(--ton) / 0.07); }

.sohbet-satir__basi {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  min-width: 0;
}

.sohbet-satir__ad { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sohbet-satir__saat { font-size: var(--t-11); color: var(--ink-3); }

/* Yetkiliyi ayıran tek şey adın rengi. İkinci bir bileşen (rozet, arka plan,
   kenar şeridi) eklemiyoruz: akan bir kutuda üç işaretin üçü de gürültü. */
.sohbet-satir--yetkili .sohbet-satir__ad { color: var(--accent); }

/* Kendi satırın: 2px kılcal şerit, camgöbeği DEĞİL. Camgöbeği yetkilinin
   adında duruyor; "bu benim" ile "bu yetkili" aynı renk olursa ikisi de bir
   şey söylemiyor. */
.sohbet-satir--benim { box-shadow: inset 2px 0 0 var(--edge-2); }

.sohbet-satir__govde {
  margin: 0;
  /* Sitedeki en büyük gövde metni: 13 değil 15. Bu sayfada okunan şey tam
     olarak bu satırlar, kart açıklamaları ve tablo hücreleri 13'te kalıyor.
     Aradaki fark bilerek görülüyor. */
  font-size: var(--t-15);
  line-height: 1.5;
  color: var(--ink-2);
  /* 240 karakteri tek kelime yazan çıkıyor. */
  overflow-wrap: anywhere;
}

/* Yoklamayla inen her satır kısa bir belirme yapıyor. Yalnız opacity: kayan
   ya da büyüyen bir satır, elli mesajlık bir yağmurda mide bulandırıyor.
   Az-hareket kipinde küresel blok bunu 1ms'ye indiriyor ve orada doğru olan
   da bu -- satır hareketsiz beliriyor, hiçbir bilgi kaybolmuyor. */
.sohbet-satir--indi { animation: sohbet-indi 220ms var(--yay) both; }

@keyframes sohbet-indi {
  from { opacity: 0; }
}

/* Sen BAŞKA YERE BAKARKEN gelen satır. Parlama değil, kalıcı işaret:
   kaydırma dibe inince venny.js hepsini toptan kaldırıyor, yani "okundu"
   olayı kaydırmanın kendisi.
   Kalıcı olmasının sebebi az-hareket kipi. Bir saniyelik parlama, zaten
   ekranda olmayan bir satırda hiç görülmüyor; işaret ise sen oraya
   kaydırınca hâlâ duruyor. İki kip aynı bilgiyi taşıyor. */
.sohbet-satir--yeni { box-shadow: inset 2px 0 0 var(--accent); }

.sohbet-satir__eylem {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sohbet-satir__eylem:hover { color: var(--alarm); }

/* Fareyle gezerken eylemler satırın üstüne gelinceye kadar görünmüyor: elli
   satırın her birinde duran bir "sil" bağlantısı odayı moderasyon paneline
   çeviriyor.
   Gizleme opacity ile, display ile değil -- yer kaplamaya devam ettiği için
   imleç satıra girince hiçbir şey oynamıyor ve Tab ile gelen odağı
   :focus-within geri getiriyor.
   Dokunmatikte kural hiç uygulanmıyor: hover'ı olmayan cihazda gizlenen
   bağlantı ulaşılamayan bağlantı demek. */
@media (hover: hover) and (pointer: fine) {
  .sohbet-satir__eylem { opacity: 0; transition: opacity var(--hiz) linear; }
  .sohbet-satir:hover .sohbet-satir__eylem,
  .sohbet-satir:focus-within .sohbet-satir__eylem { opacity: 1; }
}

.sohbet__durum {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

/* Metin yokken nokta da olmasın; kart başlığında yalnız "Oda" kalıyor. */
.sohbet__durum:empty { display: none; }

.sohbet__durum::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

.sohbet__durum[data-durum='canli']    { color: var(--accent); }
.sohbet__durum[data-durum='bekliyor'] { color: var(--ink-2); }
.sohbet__durum[data-durum='kopuk']    { color: var(--alarm); }

.sohbet__yenile {
  margin: 0;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--edge);
  font-family: var(--ff-mono);
  font-size: var(--t-11);
}

.sohbet__yenile a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* "4 yeni mesaj" akışın altına yapışan bir şerit.
   [hidden] satırı zorunlu: .dg display'i inline-flex'e çekiyor ve yazar
   sayfasındaki bir kural, tarayıcının [hidden] { display: none } kuralını
   her zaman eziyor. O satır olmadan düğme hiç gizlenmiyor. */
.sohbet__yeni {
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
}

.sohbet__yeni[hidden] { display: none; }

/* Gönderme kutusu kartın alt şeridinde, metin alanı ile düğme yan yana:
   shoutbox'ta göndermek bir formu doldurmak değil, bir hamle. */
.sohbet__yaz {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s3);
}

/* .alan textarea 132px taban istiyor. O ölçü destek talebi yazan biri için
   doğru, iki satırlık bir replik için değil. */
.sohbet__yaz textarea { min-height: 0; height: 62px; }

/* Kalan karakter sayısı "MESAJ" etiketinin sağ ucunda, metin alanının altında
   değil. İki sebep: etiket satırı zaten boş duruyordu, ve sayaç altta olunca
   .alan uzuyor, düğme de metin alanının hizasından aşağı kayıyordu. */
.sohbet__yaz .alan { grid-template-columns: minmax(0, 1fr) auto; }
.sohbet__yaz .alan > * { grid-column: 1 / -1; }
.sohbet__yaz .alan > label { grid-column: 1; grid-row: 1; }

/* Bu iki seçicinin ">" ile yazılması şart. Üstteki blanket kural iki sınıf
   taşıyor, yani tek sınıflı bir .sohbet__sayac kuralından güçlü: sayaç
   sessizce iki sütuna yayılıp etiketin üstüne biniyordu. Sağa yaslı ve kısa
   olduğu için ekranda doğru görünüyor ama uzun bir etikette çakışırdı. */
.sohbet__yaz .alan > .sohbet__sayac {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
}

.sohbet__sayac {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  color: var(--ink-3);
}

.sohbet__sayac:empty { display: none; }
.sohbet__sayac[data-az] { color: var(--alarm); }

/* Sitedeki ilk devre dışı düğme sohbetteki "Gönder": susturulmuş üye onu
   göremesin diye değil, basamadığını anlasın diye sönük. pointer-events
   kapalı, çünkü camgöbeği gradyan hover'da parlarsa düğme çalışıyor gibi
   duruyor. Sebebi hemen üstündeki .uyari pnl yazıyor, yani sönük düğme tek
   başına açıklama taşımak zorunda değil. */
.dg:disabled { opacity: 0.45; pointer-events: none; }

/* ==== 15-sohbet.css ==== */
/* ---------------------------------------------- panel: sohbet moderasyonu --
   .tablo td nowrap yazıyor; sıralamada doğru, panelde 240 karakterlik bir
   sohbet gövdesi taşıyan hücrede değil: tek satır tabloyu iki bin piksele
   uzatıyor ve yatay kaydırma çubuğunu ekranın dışına atıyor.

   Köprü seçici yalnız SARMAYI açıyor. Satır içi ff-ui yazan hücreler
   yonetim-sohbet.php'de değil, yonetim.php ve yonetim-duyurular.php'de de
   var (kategori, etiket, yazar) -- onlarda sarılacak bir şey olmadığı için
   bu kural hiçbir şeyi değiştirmiyor, ama hizalamayı da açsaydım o üç kolon
   sola kayar ve kendi <th>'lerinin hizasını kaybederdi. */
.tablo--panel td[style*='--ff-ui'] { white-space: normal; overflow-wrap: anywhere; }

/* Cümle taşıyan hücrenin tam hâli.
   Hizalama burada, köprüde değil: .tablo td sağa yaslıyor ve sağa yaslı bir
   paragrafın sol kenarı her satırda kayıyor. Ama <th> de sağa yaslı, yani
   hücreyi sola çeken kim olursa başlığı da çekmeli -- o iş işaretlemede.
   yonetim-sohbet.php'nin iki hücresi class="yazi" alınca bu kural devreye
   giriyor. */
.tablo .yazi {
  font-family: var(--ff-ui);
  font-size: var(--t-13);
  letter-spacing: 0;
  text-align: left;
  min-width: 24ch;
}

/* Dosya seçici. Tarayıcının kendi düğmesi açık gri ve sistem yazı tipiyle
   geliyor; koyu bir formun ortasında tek beyaz kutu olarak duruyordu.
   .dg--kucuk ölçüleriyle aynı, ama .dg sınıfını buraya veremiyoruz:
   ::file-selector-button gerçek bir öğe değil. */
.alan input[type='file'] { padding-inline: var(--s2); line-height: 40px; }

.alan input[type='file']::file-selector-button {
  height: 30px;
  margin-right: var(--s3);
  padding-inline: var(--s3);
  border: 1px solid var(--edge-2);
  border-radius: var(--r);
  background: rgb(var(--ton) / 0.05);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
}

.alan input[type='file']::file-selector-button:hover {
  border-color: var(--edge-cyan);
  color: var(--accent);
}

/* ------------------------------------------------------------ sohbet: dar --- */

/* Sekme şeridi Sohbet ile birlikte yediden sekize çıktı. Ölçüldü: sekiz sekme
   --s4 dolgusuyla 941px istiyor. 1024px'lik ekranda şeride 948px kalıyor, yani
   7px payla geçiyor; 905px'te kalan 836px ve şerit 105px taşıyor -- sekmeler
   büzülüp metni kırpıyor. Dolgu --s3'e inince ihtiyaç 813px'e düşüyor ve
   905px'te 23px pay kalıyor.

   Alt sınır 901px yazılı, açık uçlu değil: 900px'in altında şerit zaten açılır
   menüye dönüyor ve oradaki dolgu kuralını ezmemeli. */
@media (min-width: 901px) and (max-width: 1100px) {
  .sekmeler a { padding-inline: var(--s3); }
  .sekmeler a[aria-current='page'] { padding-inline: calc(var(--s3) + var(--cut)); }
}

@media (max-width: 900px) {
  /* Telefonda 58vh'lik kutu ekranın yarısını yiyor ve klavye açılınca
     gönderme alanı görünürün dışında kalıyor. */
  .sohbet__akis { height: clamp(300px, 46vh, 420px); }
  .sohbet-satir { padding-inline: var(--s3); }
}

@media (max-width: 560px) {
  /* 240 karakterlik kutu 90px'lik düğmeyle yan yana 150px'e düşüyor. */
  .sohbet__yaz { grid-template-columns: minmax(0, 1fr); }
  .avatar-onizleme { flex-wrap: wrap; }
}

/* ============================================================================
   BALON, MARKA ŞERİDİ VE RÜTBE GÖRSELLERİ
   ============================================================================
   Müşteri listesinin görsel yarısı: sağ alt balon, hero şeridi, sıralamadaki
   Riot rütbe ikonları ve ana sayfa zirvesinin ilk üçü.

   ÜÇ SÖZ TUTULDU, ÜÇÜ DE ÖLÇÜLEBİLİR:
     --cut  hâlâ tam iki yerde: birincil düğme ve SEÇİLİ SEKME. Balonun seçili
            sekmesi ikinci maddenin içine giriyor, üçüncü bir istisna açmıyor.
     --golge hâlâ tam bir yerde: sayfanın tek yüzen öğesi, artık balon.
     Yeni renk yok. Podyum sırası camgöbeğinin alfa kademeleriyle ayrılıyor,
     altın/gümüş/bronz eklenmedi -- palet tek vurgulu ve öyle kalıyor.
   ============================================================================ */

/* ----------------------------------------------------------------- balon ---
   Ölen .dock'un köşesi değil: o sol alttaydı ve <details> ile açılıyordu.
   Balon sağ altta, çünkü sol alt kolon ana sayfada canlı oyuncu listesini
   taşıyor ve panel açıkken tam onun üstüne oturuyordu.

   column-reverse: tetikleyici DOM'da panelden ÖNCE geliyor (JS'siz yedek en
   üstte kalsın diye) ama ekranda altta duruyor. Sıra tersine çevrilince
   panel açılıp kapanırken tetikleyici yerinden kıpırdamıyor. */

.balon {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--s3);
}

/* JS yüklenemezse köşede kalan iki gerçek bağlantı. assets/venny.js ilk işi
   olarak bunu gizleyip tetikleyiciyi açıyor.

   [hidden] KURALLARI ŞART. hidden niteliği tarayıcının kendi stil sayfasında
   display:none demek ve yazarın her display bildirimi onu eziyor -- yani
   aşağıdaki üç satır olmadan yedek bağlantılar JS gizledikten SONRA da köşede
   duruyordu, tetikleyicinin altında ikinci bir çift düğme olarak. Ekranda
   görüldü, tahmin edilmedi. */
.balon__yedek { display: flex; gap: var(--s2); margin: 0; }
.balon__yedek[hidden] { display: none; }

.balon__tetik[hidden] { display: none; }

.balon__tetik {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  padding: 0;
  border: 1px solid var(--edge-cyan);
  border-radius: var(--r);
  background: var(--parlama), var(--surface-2);
  box-shadow: var(--golge), var(--ic-isik);
  color: var(--accent);
  cursor: pointer;
  transition: border-color var(--hiz) linear, background-color var(--hiz) linear;
}

.balon__tetik .ikon { width: 24px; height: 24px; }
/* UZUN YAZIM, ve sebebi bir hata. Eski hâli `background: var(--accent-wash),
   var(--surface-2)` yazıyordu ve ikisi de RENK: `background` kısayazımında
   yalnız son katman renk taşıyabilir, iki renk üst üste yazılınca bildirim
   tümden geçersiz oluyor ve başlangıç değerine dönüyor. Ölçüldü: hoverda
   background-color rgb(19,36,63) -> rgba(0,0,0,0) ve background-image
   parıltıdan none'a. Sonuç, 52 piksellik düğmenin imleç üstüne gelince
   camgöbeği çerçeveli saydam bir deliğe dönüşmesiydi -- her sayfada.

   Yıkama artık bir katman RESMİ (iki duraklı düz gradyan), yani kural
   çiğnenmiyor. Çalışan emsal iki satır yukarıda: `var(--parlama),
   var(--surface-2)` -- önce resim, sonra renk.

   Alt satır sınandı ve TEMİZ: --parlama gradyan, --bg-2 renk, sıra doğru. */
.balon__tetik:hover {
  background-color: var(--surface-2);
  background-image: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--parlama);
  border-color: var(--accent);
}
.balon__tetik[aria-expanded='true'] { background: var(--parlama), var(--bg-2); }

.balon__govde[hidden] { display: none; }

.balon__govde {
  /* 380px: sohbet satırı 32px avatar + 12px boşluk + metin demek ve 320'de
     iki kelimelik satırlar üç satıra kırılıyordu. 420'de balon ana sayfanın
     sağ kolonunu kapatıyor. */
  width: 380px;
  max-width: calc(100vw - var(--gutter) * 2);
  /* Tetikleyici 52, aradaki boşluk --s3, iki yandan --gutter. Kalanı panel
     alıyor ve fazlası paneli değil, panelin içini kaydırıyor. Sınır olmadan
     destek formu 900 piksellik bir laptopta gönder düğmesini ekranın altına
     itiyordu. */
  max-height: calc(100vh - 52px - var(--s3) - var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  overflow: clip;
  --pnl-bg: var(--bg-2);
  --pnl-edge: var(--edge-2);
  --pnl-golge: var(--golge), var(--ic-isik);
}

.balon__basi {
  display: flex;
  align-items: stretch;
  height: var(--sekme-h);
  border-bottom: 1px solid var(--edge);
}

.balon__sekmeler { display: flex; }

.balon__sekme {
  padding-inline: var(--s4);
  border: 0;
  background: none;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  cursor: pointer;
}

.balon__sekme:hover { color: var(--ink); }

/* Seçili sekmenin pahı üst çubuktaki .sekmeler kuralının aynısı: aynı --cut,
   aynı poligon, aynı gradyan. İki ayrı sekme şeridi aynı dili konuşuyor. */
.balon__sekme[aria-selected='true'] {
  color: var(--accent-ink);
  background: var(--vurgu-degrade);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 100%, 0 100%);
  padding-inline: calc(var(--s3) + var(--cut));
}

.balon__sekme[aria-selected='true']:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--accent-ink);
}

/* Tek sekmeli balonun başlığı. Sekme değil, o yüzden pah yok. */
.balon__baslik {
  margin: 0;
  align-self: center;
  padding-inline: var(--s4);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* Çarpı iki sözde elemandan çiziliyor, SVG dosyasından değil: assets/icon
   altında bir x yok ve tek kullanım için Phosphor'dan dosya indirmek paketi
   büyütürdü. İki 1px çubuk, ikonların çizgi kalınlığıyla aynı. */
.balon__kapat {
  position: relative;
  width: 38px;
  margin-left: auto;
  flex: none;
  border: 0;
  border-left: 1px solid var(--edge);
  background: none;
  cursor: pointer;
  color: var(--ink-3);
}

.balon__kapat::before,
.balon__kapat::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
}

.balon__kapat::before { transform: translate(-50%, -50%) rotate(45deg); }
.balon__kapat::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.balon__kapat:hover { color: var(--ink); }

/* Kaydırma panelde, kabuk değil. Sohbet sekmesinde bu kutu hiç taşmıyor --
   .sohbet__akis zaten 34vh ile sınırlı -- yani ikinci bir kaydırma çubuğu
   çıkmıyor; taşan tek şey uzun destek formu. */
.balon__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.balon__panel[hidden] { display: none; }

.balon__ust {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--edge);
  font-size: var(--t-11);
  line-height: 1.5;
  color: var(--ink-3);
}

/* -------------------------------------------- balon: destek talep listesi -- */

.balon__liste { display: grid; border-bottom: 1px solid var(--edge); }
.balon__liste[hidden] { display: none; }

.balon__satir {
  display: grid;
  gap: 2px;
  padding: var(--s3) var(--s4);
  /* Sıra kimdeyse o kenardan işaretleniyor. Metinle söylemek dört satırda
     dört kere "sende / bizde" yazmak demekti; şerit bir bakışta okunuyor. */
  border-left: 2px solid transparent;
}

.balon__satir + .balon__satir { border-top: 1px solid rgb(var(--ton) / 0.07); }
.balon__satir:hover { background: rgb(var(--ton) / 0.03); }
.balon__satir[data-sirasi='sende'] { border-left-color: var(--accent); }
.balon__satir[data-sirasi='bizde'] { border-left-color: var(--edge-2); }

.balon__satir strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.balon__satir:hover strong { color: var(--accent); }

.balon__satir em {
  font-style: normal;
  font-size: var(--t-11);
  color: var(--ink-3);
  /* Önizleme tek satır: iki satırlık bir özet listeyi iki katına çıkarıyor ve
     dört talep balonun yarısını yiyor. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balon__durum {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.balon__not {
  margin: 0;
  padding: var(--s4);
  font-size: var(--t-11);
  line-height: 1.6;
  color: var(--ink-2);
}

/* ------------------------------------------------- balon: sıkışık sohbet --- */

/* Kutu balonun içinde kart değil: .pnl'in kenarlığı balonun kenarlığının 1px
   içine düşüyor ve iki çizgi arasında 1 piksellik bir kanal görünüyordu. */
.sohbet--sik {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
}

.sohbet--sik .sohbet__akis {
  /* Sayfadaki kutu 58vh alıyor; balonda o kadarı ekranın yarısını yiyor ve
     altındaki yazma alanını dışarı itiyor. 240px'e 32'lik avatarla üç satır
     sığıyor -- balon oda değil, odaya açılan pencere. */
  height: clamp(240px, 34vh, 360px);
}

.sohbet--sik .kart__alt { padding: var(--s3) var(--s4); }
.sohbet--sik .sohbet__yaz { gap: var(--s2); }

.sohbet__durum--sik {
  margin: 0;
  padding: var(--s2) var(--s4) 0;
  font-size: var(--t-11);
}

/* Sıkışık formda yardım metni sunucuda hiç basılmıyor; kalan alanlar sıkışıyor. */
.form--sik { gap: var(--s3); padding: var(--s4); }
.form--sik .alan { gap: var(--s1); }
.form--sik label { font-size: var(--t-11); }

/* rows="3" tek başına yetmiyor: .alan textarea min-height:132px taşıyor ve
   satır sayısını eziyor. Balonda 132px, formu 660 piksele çıkarıp gönder
   düğmesini 720'lik ekranın dışına atıyordu -- ekranda görüldü. */
.form--sik textarea { min-height: 76px; }

/* ==== 16-parca.css ==== */
/* ------------------------------------------------------------ marka şeridi ---
   Hero'nun altındaki dört hücre. Eşit dörtlü ızgara DEĞİL: hücreler
   içeriklerinin genişliğinde ve aralarında kılcal dikey çizgi var, yani şerit
   bir ölçü paneli gibi okunuyor. Eşit paylaştırılsaydı "Mod 2.4" hücresi
   "Sunucu yanıt vermiyor" kadar yer kaplardı.

   Sayılar tabular-nums: oyuncu sayısı 7/32'den 12/32'ye çıkarken şerit
   kaymıyor. */

/* ÖLÇÜ ŞERİDİ. Etiketli sayı dizisi; iki yerde kullanılıyor (canlı sunucu
   bloğu ve Discord bandı), o yüzden adı artık banner__serit değil: bileşen
   adının yaşadığı yeri yazması, ikinci kullanım geldiği gün yalana dönüyor. */
.olcu-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  max-width: none;
  border-top: 1px solid var(--edge);
  padding-top: var(--s4);
}

.olcu-serit > div {
  display: grid;
  gap: var(--s1);
  padding-right: var(--s5);
}

.olcu-serit > div + div {
  border-left: 1px solid var(--edge);
  padding-left: var(--s5);
}

.olcu-serit dt {
  font-family: var(--ff-mono);
  font-size: var(--t-11);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.olcu-serit dd {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: var(--t-20);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

/* Hero'daki kopyalama düğmesi komutlar sayfasındakiyle AYNI bileşen -- artık
   benzer değil, aynı: dördü de parcalar/komut-dugmesi.php'den çıkıyor. Buradaki
   tek fark canlı sunucu bloğunun 560px'lik sütununa sığması ve biraz büyümesi,
   o yüzden ek sınıf .komut'u geçersiz kılmıyor, üstüne biniyor. */
.sunucu-durum__komut { width: fit-content; max-width: 100%; font-size: var(--t-15); }

/* ---------------------------------------------------------- rütbe görseli ---
   İki biçim var ve ikisi de parcalar/rutbe.php'den çıkıyor:
     .rutbe__ikon   rozetin içindeki 16px ikon
     .rutbe-ikon    podyumun ve ana sayfa ilk üçünün çıplak 40px ikonu

   BOYUT BURADA YOK, BİLEREK. İkisinin de width/height'ı işaretlemede duruyor
   (parcalar/rutbe.php:110 bunu açıkça yazıyor). CSS'te ikinci kez pinlenseydi
   40px'lik ikonu 48'e çıkarmak iki dosyada değişiklik isterdi ve biri
   unutulurdu. */

.rutbe__ikon { flex: none; margin-right: 5px; }
.rutbe-ikon  { display: block; flex: none; }

/* Podyum kartında ikon satırın başında, #1 etiketi ve rütbe çipi yanında. */
.podyum__ust { gap: var(--s2); }
.podyum__ust .rutbe-ikon { margin-right: auto; }

/* ------------------------------------------------- ana sayfa zirvesi: ilk üç ---
   Müşteri "ilk 3 güzel bir şekilde ayirtalim" dedi. Ayrım üç kademeli, tek
   tip değil: birinci hem şeritli hem büyük puntolu, ikinci ve üçüncü yalnız
   şeritli ve şerit sönükleşiyor. Üçüne de aynı vurguyu vermek "ilk üç" değil
   "ilk üç eşit" derdi.

   Altın/gümüş/bronz YOK. Palet tek vurgulu ve üç yeni renk eklemek sayfadaki
   bütün renk hiyerarşisini bozardı; kademe aynı camgöbeğinin alfasıyla
   veriliyor. */

.kisi-liste li[data-yer] { box-shadow: inset 2px 0 0 rgb(24 216 255 / 0.22); }
.kisi-liste li[data-yer='2'] { box-shadow: inset 2px 0 0 rgb(24 216 255 / 0.42); }
.kisi-liste li[data-yer='1'] {
  box-shadow: inset 2px 0 0 var(--accent);
  background: var(--accent-wash);
}

.kisi-liste li[data-yer='1'] b { font-size: var(--t-15); }
.kisi-liste li[data-yer='1'] .veri { color: var(--accent); }

/* Birinci satırın zemini --accent-wash ile açılıyor ve 11 piksellik alt
   yazı orada 4,29:1'e düşüyor (eşik 4,5). Bir kademe yukarı çıkıyor.
   Ölçüldü, göze göre değil -- kontrast farkı bu boyutta gözle seçilmiyor,
   yalnız okunurlukta hissediliyor. */
.kisi-liste li[data-yer='1'] small { color: var(--ink-2); }

/* ----------------------------------------------------------- discord widget ---
   Sağ kolondaki karta gömülü iframe. 320px: Discord'un kendi widget'ı bunun
   altında üye listesini kesiyor ve yalnız "Sunucuya katıl" düğmesi kalıyor. */

.discord-widget { display: block; width: 100%; height: 320px; border: 0; }

/* ---------------------------------------------------------- topluluk ---
   Discord bandı. Sağ kolonun üçüncü kartıydı, tam genişliğe çıktı.

   İki kolon EŞİT DEĞİL: solda davet metni, sağda widget ve widget dar.
   Eşit bölmek widget'a hak etmediği ağırlığı verirdi -- o bir üye listesi,
   davetin kendisi soldaki cümle ve düğme.

   Widget yoksa (discord_id boş) ızgara tek kolona iniyor ve metin sütunu
   ortalanmıyor, solda kalıyor: sayfadaki her bölüm sola hizalı ve tek bir
   bölümü ortalamak onu sayfadan koparır. */
/* Üç sütun: davet | ne yapılıyor | widget. Widget yoksa (discord_id boş)
   ilk ikisi kalıyor ve bant yine dolu -- bandın boş yarısı müşterinin asıl
   şikâyetiydi.

   Sütunlar eşit DEĞİL: davet en geniş, çünkü karar orada veriliyor. */
.topluluk {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 320px);
  gap: var(--s6);
  align-items: start;
}

/* Widget yokken (discord_id boş, bugünkü hâli) İKİ bölge kalıyor ve tam
   kanamada `1fr 1fr` yanlış: 1905 pikselde iki 930'luk sütun oluyor, ama
   soldaki metin zaten 46ch (~400px) sınırlı ve sağdaki liste beş kısa
   satır. Sonuç, iki sütunun da yarısının boş kalması.

   Bölgeler içerikleri kadar, fazlalığı space-between dağıtıyor: davet solda,
   liste sağda, boşluk ikisinin ARASINDA. Aynı düzeltme canlı bandın HUD'unda
   da yapıldı (05-hero.css) -- tam kanamada "1fr ver, essin" kalıbı boşluğu
   okunan şeyin içine koyuyor. */
.topluluk:not(:has(.topluluk__widget)) {
  grid-template-columns: auto auto;
  justify-content: space-between;
}

.topluluk__yazi { display: grid; justify-items: start; gap: var(--s4); max-width: 46ch; }
.topluluk__yazi p { margin: 0; color: var(--ink-2); }
.topluluk__yazi .olcu-serit { border-top: 0; padding-top: 0; }

/* İşaret olarak ikon YOK, tik YOK: beş satırın başına aynı simgeyi koymak
   listeyi süslüyor ama ayırt etmiyor. Sol kenardaki kılcal çizgi hepsini
   tek bir kümeye bağlıyor, o kadar. */
.topluluk__isler {
  margin: 0;
  padding: 0 0 0 var(--s4);
  list-style: none;
  border-left: 1px solid var(--edge);
  display: grid;
  gap: var(--s2);
  color: var(--ink-2);
  font-size: var(--t-15);
}

@media (max-width: 900px) {
  .topluluk,
  .topluluk:not(:has(.topluluk__widget)) { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .topluluk__isler { border-left: 0; border-top: 1px solid var(--edge); padding: var(--s3) 0 0; }
}

/* ---------------------------------------------------------------- mobil ----
   Dar ekranda balon tam genişlik değil: 375px'te sağ ve sol boşluk kalıyor,
   çünkü kenardan kenara oturan bir panel sayfayı kapatan bir kip penceresi
   gibi okunuyor ve balon kip penceresi değil. */

@media (max-width: 560px) {
  .balon { right: var(--s3); bottom: var(--s3); gap: var(--s2); }
  .balon__govde { width: calc(100vw - var(--s3) * 2); }
  .balon__tetik { width: 46px; height: 46px; }
  .sohbet--sik .sohbet__akis { height: clamp(200px, 42vh, 300px); }

  /* Şerit iki sütuna iniyor ve bu SABİTLENİYOR, sarmaya bırakılmıyor.
     flex-wrap ile denendi: 375px'te "Oyuncu / Sezon 1 / Ajan" bir satıra
     sığıp "Mod" alta düşüyordu, yani 3+1 -- ve nth-child(3) için yazılmış
     kenarlık kuralı yanlış hücreye biniyordu. Izgara nerede kırılacağını
     tahmin etmiyor, söylüyor.

     Tek sütuna düşürmedik: hero'nun altına dört satır ekleniyor ve katlamanın
     altında hiçbir şey kalmıyordu. */
  .olcu-serit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--s3);
  }

  .olcu-serit > div { padding-right: var(--s4); }
  .olcu-serit > div + div { padding-left: var(--s4); }
  .olcu-serit > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ============================================================================
   25 Ağustos - boş durumların tasarımı ve kadro şeridi
   ============================================================================
   Müşteri "arkadaşlar çok basit kalmış diyor" dedi. Ana sayfa ölçüldü: sade
   değil, BOŞTU. Altı boş durum üst üste -- sunucu yanıt vermiyor, sıralama
   "İLK 0", duyurular ortada kocaman bir "yok" kutusu, yönetim bölümü hiç
   çizilmiyor, Discord'da tek düğme. Orta kolonun tamamı tek bir boş kutuydu.

   Yön: veri gelmediğinde YOKLUĞU değil, dolduracağı SİSTEMİ göster. Sıralama
   boşsa tırmanılacak merdiveni; oyuncu listesi çekilemiyorsa oynanacak
   kadroyu. İkisi de uydurma veri değil, zaten var olan ve bugüne kadar
   gösterilmeyen içerik.

   Belgelenmiş sisteme dokunulmadı: gölge yok, pah hâlâ iki yerde (birincil
   düğme + seçili sekme), vurgu tek renk. Yeni bir görsel araç icat edilmedi;
   merdivenin kademesi rozetlerdeki alfa ayrımının aynısı.
   ============================================================================ */

/* ------------------------------------------------------- rütbe merdiveni --- */

.merdiven {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.merdiven li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
}

.merdiven li + li { border-top: 1px solid rgb(var(--ton) / 0.07); }

/* Kademe yükseldikçe ad parlıyor. Şerit, dolgu ya da ikinci renk YOK:
   ayrımın tamamı metin renginde, çünkü rozet sistemi de öyle çalışıyor
   (.rutbe[data-kademe]) ve sayfaya üçüncü bir vurgulama dili girmemeli. */
.merdiven b { font-weight: 500; color: var(--ink-3); }
.merdiven li[data-kademe='orta'] b { color: var(--ink-2); }
.merdiven li[data-kademe='ust']  b { color: var(--ink); }

.merdiven .veri { font-size: var(--t-11); color: var(--ink-3); }

/* Merdivenin altındaki iki satırlık not. Cümle olduğu için normal yazım;
   formül ölçü olduğu için mono ve bir alt satırda. */
.merdiven__not { font-size: var(--t-11); line-height: 1.5; color: var(--ink-3); }
.merdiven__not span { display: block; margin-top: 2px; font-family: var(--ff-mono); color: var(--ink-2); }
.merdiven li[data-kademe='ust'] .veri { color: var(--accent); }

/* İkon 32px ve merdivende tek başına duruyor; rozet çipinin yanında değil,
   yani parcalar/rutbe.php'nin "aynı satırda iki ikon olmasın" kuralı
   korunuyor. */
.merdiven .rutbe-ikon { opacity: 0.55; }
.merdiven li[data-kademe='orta'] .rutbe-ikon { opacity: 0.8; }
.merdiven li[data-kademe='ust']  .rutbe-ikon { opacity: 1; }

/* ------------------------------------------------------ tek satır boşluk --- */

/* ".bos" kutusunun küçük kardeşi. O kutu ortalanmış başlık ve paragrafla
   240 piksel yer kaplıyor; bir bölümün TAMAMI o kutuysa sayfa boş görünüyor.
   Bu satır aynı bilgiyi veriyor ve yer kaplamıyor. */
.kurul-bos {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
}

.kurul-bos a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.kurul-bos a:hover { color: var(--accent); }

/* ==== 17-kadro.css ==== */
/* ---------------------------------------------------------------- kadro --- */

/* Altı kolon, on iki hücre: on bir portre + tabloya giden kapak hücresi.
   Kolon merdiveni 6 -> 4 -> 3 -> 2 ve dördü de 12'yi tam bölüyor, yani
   hiçbir genişlikte yarım satır kalmıyor. 11 portre tek başına asal ve
   her merdiven basamağında bir yerde tek kart bırakıyordu. */
.kadro {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s3);
}

.kadro__ajan {
  display: grid;
  grid-template-rows: auto auto auto;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--surface);
  background-image: var(--parlama);
  box-shadow: var(--ic-isik);
  overflow: hidden;
  transition: border-color var(--hiz-2) linear, box-shadow var(--hiz-2) linear;
}

/* KADRO KARTINDA HOVER. 29 Ağustos'a kadar YOKTU: sayfanın en görünür on bir
   öğesi tamamen tepkisizdi ve müşterinin "sitede animasyon yok denilecek
   kadar az" cümlesinin en büyük payı buradaydı.

   Üç şey birden oluyor ve üçü ayrı katmanda:
     kenar   camgöbeğine dönüyor       -> renk, hareket azaltmada da çalışıyor
     yetenek çizgileri parlıyor        -> renk, aynı şekilde
     portre  hafifçe yaklaşıyor (1,04) -> ÖLÇEK, hareket azaltmada duruyor

   Ölçek yalnız 1,04: kart 301 piksel ve kırpma zaten dar, daha fazlası
   çeneyi kesiyor. Portre `overflow: hidden` içinde büyüyor, yani kartın
   kendisi yerinden oynamıyor -- ızgara kaymıyor. */
.kadro__ajan:hover {
  border-color: var(--edge-cyan);
  box-shadow: var(--ic-isik), 0 0 28px -12px rgb(24 216 255 / 0.5);
}

.kadro__ajan > img { transition: scale var(--hiz-2) var(--yay); }
.kadro__ajan:hover > img { scale: 1.04; }

.kadro__ajan:hover .kadro__yetenek li { border-left-color: var(--accent); }

/* Portre 3/4 kırpılıyor: kaynak kare ve kareler yan yana dizildiğinde şerit
   çok alçak kalıyor.

   KIRPMA YATAY, DİKEY DEĞİL. Kare kaynak 3/4 kutuya "cover" ile girerken
   yükseklik tam oturuyor ve fazlalık genişlikten kesiliyor; object-position'ın
   dikey bileşeni bu geometride hiçbir şey yapmıyor. Burada bir zamanlar
   "50% 12%" yazıyordu ve yorumu "kırpılan yer omuz altı olmalı" diyordu --
   ikisi de yanlıştı, kesilen yer omuz değil şakaklardı.

   Yatayda %50 doğru: Riot'un ajan ikonlarında yüz kadrajın ortasına yakın,
   on birinde de kırpma yüzü kesmiyor (ölçüldü, kontak sayfası alındı). */
.kadro__ajan > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50%;
  display: block;
}

/* Ad görselin ÜSTÜNDE duruyor, altında değil: altına almak her ajanı
   "görsel + başlık + metin" kartına çevirirdi ve sayfada zaten beş tane
   öyle kutu var (kısayol şeridi). Okunurluk için altta koyu bir perde --
   süs değil, kontrast şartı: portrelerin alt kenarı açık renk. */
.kadro__yazi {
  grid-area: 1 / 1;
  align-self: end;
  display: grid;
  gap: 2px;
  padding: var(--s5) var(--s3) var(--s3);
  background: linear-gradient(180deg, rgb(7 17 31 / 0), rgb(7 17 31 / 0.82) 62%);
}

.kadro__yazi b {
  font-family: var(--ff-display);
  font-size: var(--t-20);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1;
  color: #fff;
}

.kadro__yazi .lbl { font-size: var(--t-11); color: var(--ink-2); }

/* YETENEKLER. 29 Ağustos'ta karta girdi; daha önce yalnız /sunucu#kadro
   tablosundaydı. Müşteri "karakter özellikleri felan gözükebilsin" dedi ve
   haklıydı: kart ajanın adını, rolünü ve ultisini söylüyordu ama ajanı ajan
   yapan şeyi söylemiyordu.

   Ultinin ÜSTÜNDE duruyorlar, altında değil. Sıra oynanış sırası: yetenekler
   round boyunca kullanılıyor, ulti biriktirilip bir kez. Kartı yukarıdan
   aşağı okuyan kişi aynı sırayı okuyor.

   Ayraç kılcal çizgi, madde imi değil -- .paket-bant__icerik'te kurulan
   idiom. İki yetenek için iki madde imi koymak, iki simgeyle hiçbir şey
   ayırt etmemek olurdu. */
.kadro__yetenek {
  grid-area: 2 / 1;
  margin: 0;
  padding: var(--s2) var(--s3);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  border-top: 1px solid var(--edge);
  font-size: var(--t-11);
  color: var(--ink-2);
}

.kadro__yetenek li {
  padding-left: var(--s2);
  border-left: 1px solid var(--edge-cyan);
  transition: border-left-color var(--hiz-2) linear, color var(--hiz-2) linear;
}

/* Ulti görselin dışında: adın yanına sıkıştırmak perdeyi büyütür ve
   portrenin yarısını yer. */
.kadro__ulti {
  grid-area: 3 / 1;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--edge);
}

.kadro__ulti dt {
  font-size: var(--t-11);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kadro__ulti dd { margin: 0; font-size: var(--t-11); color: var(--ink-3); }

/* Rozetin zemini burada KOYU, .rutbe'nin %9'luk yıkaması değil. Sebebi
   .kadro__yazi'nınkiyle aynı ve aynı değer kullanılıyor (rgb(7 17 31 /
   0.82)): rozet artık portrenin üstünde duruyor ve portrenin sağ üstü her
   ajanda başka renk. Neon'un mavi saçında ve Raze'in turuncu şapkasında
   yıkama görünmüyordu, yazı da --ink-2 ile okunmuyordu.

   Ölçüldü: --ink bu perdenin üstünde, altındaki sanat BEYAZ olsa bile
   9,7:1 kontrast veriyor. 11px yazı için eşik 4,5:1.

   Seçici .rutbe.kadro__erisim, tek sınıf değil: .rutbe[data-kademe='orta']
   sınıf + öznitelik taşıyor ve tek sınıflı kuralı yeniyordu. İlk hâli
   sessizce hiçbir şey yapmadı, tarayıcıdan okunarak yakalandı. */
.kadro__erisim {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  margin: var(--s2);
}

.rutbe.kadro__erisim {
  background: rgb(7 17 31 / 0.82);
  color: var(--ink);
}

/* Kapak hücresi. Portre kartlarıyla aynı kutu ölçüsünde ama görseli yok ve
   zemini bir kademe koyu (--bg-2), yani on bir yüzün arasında bakışı
   çalmadan duruyor.

   Yazı ALTA yaslı ve alt dolgusu --s2: portre kartının en alt öğesi
   .kadro__ulti ve onun alt dolgusu da --s2. İkisi böylece aynı çizgide
   bitiyor. Ölçülen şey taban hizası, süs değil.

   YÜKSEKLİK VERİLMİYOR, bilerek. İlk halinde aspect-ratio: 3/4 yazıyordu
   ve hücre 266px çıkıyordu; portre kartları 301px, çünkü görselin ALTINDA
   bir de ulti şeridi var. 35px'lik fark satırın sonunda görünüyordu.
   Şimdi hücre ızgaradan geriliyor, yani kart yüksekliği değişirse bu da
   değişiyor -- sayı iki yere yazılmıyor. */
.kadro__tumu {
  display: grid;
  align-content: end;
  gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s2);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color var(--hiz) linear, background-color var(--hiz) linear,
              transform var(--hiz) var(--yay);
}

.kadro__tumu b {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-20);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.kadro__tumu .lbl { font-size: var(--t-11); color: var(--ink-3); }

.kadro__tumu:hover {
  border-color: var(--edge-cyan);
  background-color: var(--surface);
  transform: translateY(-1px);
}

.kadro__kalan {
  margin: var(--s4) 0 0;
  max-width: 70ch;
  font-size: var(--t-11);
  color: var(--ink-3);
}

/* Kolon merdiveni: 6 -> 4 -> 3 -> 2. Dördü de 12'yi tam bölüyor, o yüzden
   hiçbir genişlikte son satır yarım kalmıyor. Basamaklar sitenin mevcut
   kırılma noktaları (1240/1000/560); kadro için yeni nokta açılmadı. */
@media (max-width: 1240px) {
  .kadro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .kadro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .kadro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .kadro__yazi b { font-size: var(--t-15); }
  .kadro__tumu b { font-size: var(--t-15); }
}


/* Sağ raftaki öne çıkan paket kartının kuralları BURADAYDI, silindi.
   Panonun üçüncü kolonu kalktı ve kart yatay banda dönüştü; kuralları
   09-magaza.css'te .paket-bant olarak yaşıyor -- mağazanın kuralları
   mağazanın dosyasında, kadronun dosyasında değil.

   Kılcal çizgi idiomu (li'nin başında 1px kenar) oraya taşındı ve yatay
   dizilimde kalemleri ayıran ayraç olarak ikinci bir iş yapıyor. */

/* ------------------------------------------------------------- cam / dar ---
   900 pikselin altında BULANIKLIK KAPANIYOR, saydamlık kalıyor.

   İki sebep. (1) Görünürlük: dar ekranda kartlar alt alta ve arkalarında
   düz zemin var; buğulanacak bir şey olmadığı için blur hiçbir şey
   göstermiyor. (2) Maliyet: ana sayfada yirmiden fazla panel var ve
   backdrop-filter her kaydırma karesinde yeniden hesaplanıyor -- orta
   sınıf bir telefonda görünür takılma.

   Zemin bir tık opaklaşıyor (0.55 -> 0.72): bulanıklık gidince camın
   arkasındaki keskin kenarlar yazının altında görünüyordu. */
@media (max-width: 900px) {
  .pnl, .sunucu-durum {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .pnl { --pnl-bg: rgb(13 27 48 / 0.72); }
  .sunucu-durum { background: var(--parlama), rgb(13 27 48 / 0.72); }
}

/* Bulanıklığı tarayıcı desteklemiyorsa da aynı yol: cam yerine biraz daha
   opak bir yüzey. Destek yokken saydam bir kart, arkasındaki keskin
   ayrıntıların üstünde okunmaz oluyor. */
@supports not (backdrop-filter: blur(1px)) {
  .pnl { --pnl-bg: rgb(13 27 48 / 0.86); }
  .sunucu-durum { background: var(--parlama), rgb(13 27 48 / 0.86); }
}

/* ==== 18-ekip.css ==== */
/* ------------------------------------------------------------------ ekip ---
   /ekip sayfası. Kurul kartları ve davet satırı 16-parca ile 14-mobil
   içinde duruyor (ana sayfadan taşındı, kuralları taşınmadı); buradaki
   kurallar yalnız yeni sayfaya ait iki listeyle çıkış şeridi.

   YENİ PARÇA AÇILDI, .kurul kurallarının yanına yazılmadı. Onlar 14-mobil.css
   içinde ve o dosyanın adı zaten yalan söylüyor -- 113. satırdan sonra mobille
   ilgisi olmayan bir torba. Oraya yeni kural eklemek yalanı büyütmek olurdu.
   Sonda durması ayrıca sıra açısından güvenli: bu sayfaya ait kurallar
   çakışırsa kazanan bu dosya. */

/* İKİ SÜTUN, EŞİT DEĞİL: 1 / 1.25. Eşit iki kutu iki kutu gibi okunur ve
   sayfanın söylediği şey ikincisinde -- yetkilerin sınırı. Sınırlar sütunu
   hem geniş hem içinde başlık/gerekçe çiftleri var, ötekisi sade liste. */
.yetki-ikili {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--s4);
  align-items: start;
}

.yetki-kutu { padding: var(--s4); }

.yetki-kutu h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t-20);
  letter-spacing: -0.012em;
}

/* Sınırlar kutusunun kenarı mor. Renk kademesi bilgi taşıyor: camgöbeği
   oyun ve sunucu, mor PARA. Burası ikisi de değil, o yüzden mor DEĞİL -- kenar
   nötr kalıyor, ağırlığı genişlikten ve içerik yoğunluğundan alıyor. Üçüncü
   bir vurgu rengi girmiyor. */
.yetki-kutu--sinir { --pnl-edge: var(--edge-2); }
.yetki-kutu--sinir > .sonuk { margin: 0 0 var(--s3); font-size: var(--t-13); }

.yetki-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
}

.yetki-liste li {
  position: relative;
  padding-left: 18px;
  font-size: var(--t-15);
  color: var(--ink-2);
  line-height: 1.45;
}

/* İşaret nokta değil kısa çizgi: madde imi listeyi "seçenekler" gibi okutuyor,
   çizgi "kalem" gibi. Bunlar seçenek değil, olgu. */
.yetki-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.sinir-liste {
  margin: 0;
  display: grid;
  gap: var(--s3);
}

.sinir-liste > div {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--edge);
}
.sinir-liste > div:last-child { padding-bottom: 0; border-bottom: 0; }

.sinir-liste dt {
  font-size: var(--t-15);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}

.sinir-liste dd {
  margin: 3px 0 0;
  font-size: var(--t-13);
  color: var(--ink-3);
  line-height: 1.5;
}

/* ÇIKIŞ ŞERİDİ. Cümle solda, düğme sağda; ikisi de ağırlık taşıdığı için
   burada iki uca yaslamak doğru (kurul şeridinde değildi -- orada sağ uçtaki
   şey 13 piksellik gri bir cümleydi ve kartın dengi değildi). */
.kurul-cikis {
  margin-top: var(--s5);
  padding: var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.kurul-cikis b { display: block; font-size: var(--t-17); font-weight: 600; color: var(--ink); }
.kurul-cikis p { margin: 4px 0 0; max-width: 62ch; font-size: var(--t-13); }
.kurul-cikis .dg { flex: 0 0 auto; }

/* /ekip'te kurul şeridi tek sütun: başlık zaten h1 olarak yukarıda, yani
   şeridin kendi başlık sütununa gerek yok.

   Davet cümlesinin 34ch sınırı burada kalkıyor. Ana sayfada kartın yanında
   duruyordu ve orada dar olması gerekiyordu; burada tek başına ve 34ch onu
   "başvuru / Discord'dan" diye bölüyordu -- cümlenin ortasından, bağlantının
   hemen öncesinden. */
.blok .ekip-liste { margin-top: var(--s4); }
.blok > .kabuk > .kurul-davet { margin-top: var(--s4); max-width: 58ch; }

@media (max-width: 900px) {
  /* 900 altında sınırlar sütunu üstte kalırsa yetkiler listesi ekranın
     dışına düşüyor ve sayfanın asıl söylediği şey ikinci ekranda başlıyor.
     Sıra korunuyor, sütunlar tek sıraya iniyor. */
  .yetki-ikili { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .kurul-cikis { justify-content: flex-start; }
  .kurul-cikis .dg { width: 100%; justify-content: center; }
}