/* ==========================================================================
   Tabya — stil (kod tarafındaki dizin/DB adları "temeria" olarak kalıyor)
   ==========================================================================
   Yığın: Express + EJS + saf CSS. Derleme adımı, ön işlemci, sınıf üreteci
   yok; bu dosya tarayıcıya olduğu gibi gidiyor.

   Simge mimarisi üç katmanlı:
     1. İlkel   (--i-*)  ham renk basamakları, HSL üçlüsü olarak
     2. Anlamsal(--a-*)  amaca göre takma ad  ("zemin", "vurgu", "hata")
     3. Bileşen (--b-*)  bileşene özel        ("dugme-bg", "kart-kenar")
   Bileşen kuralları ASLA ham değer yazmaz; hep bir simgeye bakar.

   Renkler HSL üçlüsü olarak saklanıyor çünkü saydamlık ancak böyle tek
   kaynaktan türetilebiliyor: hsl(var(--i-mor-500) / .3). Onaltılık tutsaydık
   aynı rengin her saydam varyantını elle yazmak gerekirdi — nitekim önceki
   sürümde 22 yerde tam olarak bu vardı ve renk değişince hepsi kaçacaktı.

   Sıra: 1) yazı tipi  2) simgeler  3) temel  4) kabuk  5) bileşenler
         6) hareket    7) erişilebilirlik  8) duyarlı davranış
   ========================================================================== */

/* --- 1. Yazı tipi ---------------------------------------------------------
   Geist kendi sunucumuzda barındırılıyor. Google Fonts'tan çekmek üç şey
   getiriyordu: üçüncü taraf isteği, yazı sıçraması ve kapalı ağda çalışmama.
   Değişken sürüm 100-900 arası tüm ağırlıkları tek dosyada taşıyor.

   latin-ext ŞART: ğ Ğ ş Ş İ (U+011E, U+015E, U+0130) latin aralığında yok.
   Yalnız latin yüklenirse panel Türkçe metinde yedek yazı tipine düşer.      */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geistmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/geistmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2a. İLKEL SİMGELER — ham basamaklar, amaç bilgisi taşımaz
   ==========================================================================
   Buradaki değerler tek "sabit kodlanmış renk" kümesi; olması gereken de bu.
   Her biri onaltılıktan HSL'e çevrildi ve geri dönüşü kayıpsız doğrulandı.  */
:root {
  /* Soğuk gri ailesi. Sıcak ve soğuk grileri karıştırmak yüzeyleri kirli
     gösteriyor; hepsi 220-227 ton aralığında tutuldu. */
  --i-gri-990: 226 30.0% 4.0%;
  --i-gri-950: 222.9 21.2% 6.5%;
  --i-gri-900: 221.5 25.5% 10.0%;
  --i-gri-850: 221.3 23.5% 13.3%;
  --i-gri-800: 221.1 21.3% 17.5%;
  --i-gri-750: 221.1 19.6% 19.0%;
  --i-gri-700: 220.8 19.4% 25.3%;
  /* Yalnız ölçek yuvası için. Açıklığı iki kısıt birlikte belirledi:
     karttan ayrışacak kadar açık (1.44:1), üstündeki üç dolgu rengini
     3:1'in altına düşürmeyecek kadar koyu. %23'te kırmızı dolgu 3.03'e
     iniyordu — marj bırakmıyordu. */
  --i-gri-720: 221 19.5% 22%;
  --i-gri-500: 221.5 11.8% 56.9%;
  --i-gri-400: 220.8 15.5% 68.4%;
  --i-gri-200: 226.7 25.7% 93.1%;

  /* Tek vurgu ailesi. Eskisi %86 doygunluktaydı ve koyu zeminde bağırıyordu. */
  --i-mor-400: 234.8 78.6% 79.8%;
  --i-mor-500: 235.0 69.9% 66.1%;
  --i-mor-600: 235.2 64.9% 62.0%;
  --i-mor-700: 234.8 59.6% 58.2%;

  --i-yesil-400: 143.4 60.7% 66.1%;
  --i-yesil-600: 140.6 45.5% 45.3%;
  --i-amber-400: 35.7 83.1% 65.1%;
  --i-amber-600: 36.7 84.5% 45.5%;
  --i-kirmizi-400: 358.8 100.0% 80.4%;
  --i-kirmizi-600: 358.8 70.8% 58.4%;

  --i-siyah: 222.9 41.2% 3.3%;
  --i-beyaz: 0 0% 100%;
}

/* ==========================================================================
   2b. ANLAMSAL SİMGELER — amaca göre takma ad
   ==========================================================================
   İki biçim: `--a-*-k` kanal üçlüsü (saydamlık türetmek için), `--a-*` hazır
   renk. Bileşenler saydamlık isterse kanalı, istemezse rengi kullanıyor.    */
:root {
  --a-zemin-k:   var(--i-gri-990);
  --a-yuzey1-k:  var(--i-gri-900);
  --a-yuzey2-k:  var(--i-gri-850);
  --a-yuzey3-k:  var(--i-gri-800);
  --a-kenar-k:   var(--i-gri-750);
  --a-kenar2-k:  var(--i-gri-700);
  --a-metin-k:   var(--i-gri-200);
  --a-soluk-k:   var(--i-gri-400);
  --a-sonuk-k:   var(--i-gri-500);
  --a-vurgu-k:   var(--i-mor-500);
  --a-iyi-k:     var(--i-yesil-600);
  --a-uyari-k:   var(--i-amber-600);
  --a-hata-k:    var(--i-kirmizi-600);
  --a-golge-k:   var(--i-siyah);
  --a-isik-k:    var(--i-beyaz);

  --a-zemin:  hsl(var(--a-zemin-k));
  --a-yuzey1: hsl(var(--a-yuzey1-k));
  --a-yuzey2: hsl(var(--a-yuzey2-k));
  --a-yuzey3: hsl(var(--a-yuzey3-k));
  --a-kenar:  hsl(var(--a-kenar-k));
  --a-kenar2: hsl(var(--a-kenar2-k));
  --a-metin:  hsl(var(--a-metin-k));
  --a-soluk:  hsl(var(--a-soluk-k));
  --a-sonuk:  hsl(var(--a-sonuk-k));

  /* Dolgu ve yazı ayrı tonlar. Vurgu rengi koyu zeminde iyi okunuyor ama
     ÜSTÜNDEKİ beyaz yazı için fazla açık (3.92:1). Dolgu-üstünde-beyaz ile
     koyu-zemin-üstünde-vurgu farklı kısıtlar; tek simge ikisini tutamaz. */
  --a-vurgu:       hsl(var(--a-vurgu-k));
  --a-vurgu-yazi:  hsl(var(--i-mor-400));
  --a-vurgu-dolgu: hsl(var(--i-mor-600));   /* beyaz yazı 4.61:1 */
  --a-vurgu-dolgu2:hsl(var(--i-mor-700));   /* hover: AÇILMAZ, koyulaşır 5.24:1 */

  --a-iyi:        hsl(var(--a-iyi-k));
  --a-iyi-yazi:   hsl(var(--i-yesil-400));
  --a-uyari:      hsl(var(--a-uyari-k));
  --a-uyari-yazi: hsl(var(--i-amber-400));
  --a-hata:       hsl(var(--a-hata-k));
  --a-hata-yazi:  hsl(var(--i-kirmizi-400));

  /* Boşluk: kontrol paneli yoğunluğu. Pazarlama sayfası ölçeği (96-160px)
     bilerek kullanılmadı — burada asıl iş 15 kiracıyı tek ekranda taramak,
     ekran başına iki kart göstermek değil. */
  --bo-1: 4px;  --bo-2: 8px;  --bo-3: 12px;  --bo-4: 16px;
  --bo-5: 24px; --bo-6: 32px; --bo-7: 48px;

  /* Yarıçap kademeli: iç öğe dar, kapsayıcı geniş. Her şeye aynı yarıçapı
     vermek katman hissini siliyor. Dış kabuklar abartılı squircle. */
  --yari-1: 6px;
  --yari-2: 10px;
  --yari-3: 16px;
  --yari-4: 22px;
  --yari-tam: 999px;

  /* Gölge zeminin tonunu taşıyor; saf siyah gölge koyu mavi-gri yüzeyde
     delik gibi duruyor. Yayılım geniş ve yumuşak, sert değil. */
  --golge-1: 0 1px 2px hsl(var(--a-golge-k) / .5);
  --golge-2: 0 8px 24px -8px hsl(var(--a-golge-k) / .6);
  --golge-3: 0 24px 60px -20px hsl(var(--a-golge-k) / .78);

  /* z-index ölçeği: koda 9999 serpiştirmemek için. */
  --z-doku: 0;
  --z-icerik: 1;
  --z-yapisik: 20;
  --z-ust: 30;
  --z-atla: 40;

  --hiz-1: 160ms;
  --hiz-2: 320ms;
  --hiz-3: 680ms;
  /* Yay benzeri eğri: hızlı çıkıp uzun yumuşayan. `ease-in-out` mekanik,
     `linear` ölü duruyor; bu eğri kütle hissi veriyor. */
  --egri: cubic-bezier(.32, .72, 0, 1);
  --egri-cikis: cubic-bezier(.4, 0, .68, .06);
}

/* ==========================================================================
   2c. BİLEŞEN SİMGELERİ
   ==========================================================================
   Aşağıdaki kurallar yalnız bunlara bakıyor. Bir bileşenin rengini
   değiştirmek için kuralları değil bu bloğu düzenlemek yeterli.            */
:root {
  /* Çift çerçeve (Doppelrand): dış hatlı kabuk + iç çekirdek. Şablon
     değiştirmeden, katmanlı halkalarla elde ediliyor — iç içe iki div
     yazmak 5 görünümün tamamına dokunmayı gerektirirdi. */
  --b-kabuk-hat:   hsl(var(--a-isik-k) / .055);  /* dış hatlı halka */
  --b-cekirdek-hat:hsl(var(--a-isik-k) / .035);  /* iç hatlı halka */
  --b-ust-isik:    hsl(var(--a-isik-k) / .07);   /* üstten gelen ışık */

  --b-kart-bg:     var(--a-yuzey1);
  --b-kart-kenar:  var(--a-kenar);
  --b-kart-kenar-hover: var(--a-kenar2);
  --b-kart-isik:   hsl(var(--a-vurgu-k) / .14);  /* imleç nokta ışığı */

  --b-dugme-bg:        var(--a-yuzey3);
  --b-dugme-bg-hover:  var(--a-kenar);
  --b-dugme-kenar:     var(--a-kenar2);
  --b-dugme-kenar-hover: var(--a-sonuk);
  --b-dugme-birincil-bg:       var(--a-vurgu-dolgu);
  --b-dugme-birincil-bg-hover: var(--a-vurgu-dolgu2);
  --b-dugme-birincil-yazi:     hsl(var(--a-isik-k));
  /* Düğme içindeki ikon adacığı */
  --b-ada-bg:       hsl(var(--a-isik-k) / .16);
  --b-ada-bg-hover: hsl(var(--a-isik-k) / .26);

  --b-rozet-bg:     var(--a-yuzey3);
  --b-rozet-kenar:  var(--a-kenar2);
  --b-rozet-yazi:   var(--a-soluk);

  --b-girdi-bg:     var(--a-yuzey2);
  --b-girdi-kenar:  var(--a-kenar2);
  --b-girdi-kenar-hover: var(--a-sonuk);

  --b-kabuk-bg:     hsl(var(--a-yuzey1-k) / .72);
  --b-perde-bg:     hsl(var(--a-golge-k) / .7);

  /* Yuva kart yüzeyinden AÇILARAK ayrışıyor. Koyulaştırmak işe yaramadı:
     zaten koyu bir yüzeyin üstüne siyah koymak 1.08:1 veriyor, çubuk
     görünmez oluyordu. */
  --b-olcek-yuva:   hsl(var(--i-gri-720));
  --b-odak-halka:   var(--a-vurgu-yazi);
}

/* ==========================================================================
   3. TEMEL
   ========================================================================== */
* { box-sizing: border-box; }

html {
  background: var(--a-zemin);
  /* Sayfa içi çapa bağlantıları (#yeni-kiraci) zıplayarak gidiyordu. */
  scroll-behavior: smooth;
  /* Yüzen üst çubuk çapanın hedefini örtmesin. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: transparent;
  color: var(--a-metin);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Atmosfer katmanı: düz koyu zemin steril duruyordu. İki geniş renk kümesi
   + ince gren. İçeriğin ALTINDA ve `position: fixed` — kaydırılan bir
   kapsayıcıya bağlansaydı her karede GPU'yu yeniden boyatırdı. */
.doku {
  position: fixed;
  inset: 0;
  z-index: var(--z-doku);
  pointer-events: none;
  background:
    radial-gradient(720px circle at 12% -6%,  hsl(var(--a-vurgu-k) / .13), transparent 62%),
    radial-gradient(620px circle at 92% 4%,   hsl(var(--i-yesil-600) / .06), transparent 60%),
    radial-gradient(900px circle at 50% 108%, hsl(var(--a-vurgu-k) / .06), transparent 66%);
}
.doku::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.ust, .govde, .atla { position: relative; z-index: var(--z-icerik); }

/* Tipografi. Önceden yalnız 400 ve 700 vardı; 500/600 ara kademeleri
   hiyerarşiyi kalınlık zıplaması olmadan kuruyor. */
h1, h2, h3 {
  margin: 0 0 var(--bo-1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;      /* son satırda tek kelime kalmasın */
}
h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 620; letter-spacing: -.035em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

p { text-wrap: pretty; }

a { color: var(--a-vurgu-yazi); }
a:hover { color: var(--a-metin); }

.soluk { color: var(--a-soluk); font-size: 14px; margin: 0; }
.kucuk { font-size: 12px; }

/* Rakamlar ve Discord kimlikleri. 17-20 haneli kimlikler orantılı yazı
   tipinde sütun hâlinde okunmuyor; mono + sabit genişlikli rakam şart. */
code, .kimlik, .kiraci-kimlik, .olcek-sayi {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
code {
  font-size: .85em;
  background: var(--a-yuzey2);
  border: 1px solid var(--a-kenar);
  border-radius: var(--yari-1);
  padding: 1px 5px;
}

/* Kaş etiketi: büyük başlıktan önce mikro rozet. */
.kas {
  display: inline-block;
  margin-bottom: var(--bo-2);
  padding: 3px 11px;
  border-radius: var(--yari-tam);
  border: 1px solid var(--b-kabuk-hat);
  background: hsl(var(--a-isik-k) / .03);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--a-sonuk);
}

/* ==========================================================================
   4. KABUK
   ========================================================================== */

/* Klavye kullanıcısı için atlama bağlantısı: normalde ekran dışında,
   odaklanınca içeri giriyor. `display:none` OLMAZ — odaklanamayan öğe
   sekme sırasından tamamen çıkar. */
.atla {
  position: absolute;
  left: var(--bo-4);
  top: -60px;
  z-index: var(--z-atla);
  background: var(--b-dugme-birincil-bg);
  color: var(--b-dugme-birincil-yazi);
  padding: 10px 18px;
  border-radius: var(--yari-tam);
  text-decoration: none;
  font-weight: 500;
  transition: top var(--hiz-2) var(--egri);
}
.atla:focus { top: var(--bo-4); color: var(--b-dugme-birincil-yazi); }

/* Yüzen ada çubuğu: üste yapıştırılmış kenardan kenara bar yerine, kendi
   gölgesi olan ayrı bir yüzey. `backdrop-filter` yalnız buraya uygulanıyor —
   yapışık öğe olduğu için tek seferlik boyama, kaydırmada tekrarlanmıyor. */
.ust {
  display: flex;
  align-items: center;
  gap: var(--bo-5);
  max-width: 1180px;
  margin: var(--bo-3) auto 0;
  padding: 10px 10px 10px var(--bo-4);
  background: var(--b-kabuk-bg);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--b-kabuk-hat);
  border-radius: var(--yari-tam);
  box-shadow: var(--golge-2), inset 0 1px 0 var(--b-ust-isik);
  position: sticky;
  top: var(--bo-3);
  z-index: var(--z-ust);
}

.marka {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--a-metin);
  text-decoration: none;
  white-space: nowrap;
}
.marka b { color: var(--a-vurgu-yazi); font-weight: 600; }
.marka img { border-radius: 8px; display: block; }

.menu { display: flex; gap: 2px; flex: 1; }
.menu a {
  position: relative;
  color: var(--a-soluk);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--yari-tam);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--hiz-1) var(--egri), background var(--hiz-1) var(--egri);
}
.menu a:hover { background: hsl(var(--a-isik-k) / .05); color: var(--a-metin); }
/* Aktif sayfa: dolu hap + nokta. İki koyu gri arasındaki fark tek başına
   zayıf bir sinyaldi. */
.menu a.aktif {
  color: var(--a-metin);
  background: hsl(var(--a-isik-k) / .07);
  box-shadow: inset 0 0 0 1px var(--b-cekirdek-hat);
}
.menu a.aktif::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px; height: 3px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--a-vurgu);
}

.hesap {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  color: var(--a-soluk);
  font-size: 14px;
}
/* Yuvarlak avatar yerine köşeleri yumuşatılmış kare — her panelde aynı
   daire, arayüzü jenerik gösteriyor. */
.hesap img { width: 30px; height: 30px; border-radius: 10px; display: block; }
.cikis {
  color: var(--a-soluk);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: var(--yari-tam);
  border: 1px solid transparent;
  transition: color var(--hiz-1) var(--egri), background var(--hiz-1) var(--egri),
              border-color var(--hiz-1) var(--egri);
}
.cikis:hover {
  color: var(--a-hata-yazi);
  background: hsl(var(--a-hata-k) / .1);
  border-color: hsl(var(--a-hata-k) / .3);
}

.govde { max-width: 1180px; margin: 0 auto; padding: var(--bo-7) var(--bo-5) 96px; }

.baslik-satiri {
  display: flex;
  align-items: flex-start;
  gap: var(--bo-4);
  margin-bottom: var(--bo-6);
  flex-wrap: wrap;
}
.baslik-satiri .sag { margin-left: auto; display: flex; align-items: center; gap: var(--bo-2); }

.sayfa-basi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-4);
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 var(--bo-6);
}
.sayfa-basi h1 { margin: 0 0 var(--bo-2); }
.sayfa-basi .soluk { max-width: 62ch; }

/* ==========================================================================
   5. BİLEŞENLER
   ========================================================================== */

/* Çift çerçeve: dış hatlı halka + iç hatlı halka + üstten ışık + yumuşak
   gölge. Kart düz bir dikdörtgen değil, tepsiye oturmuş bir plaka gibi
   duruyor. Hepsi box-shadow katmanı — ek düğüm yok, yerleşimi etkilemiyor. */
.kutu {
  background: var(--b-kart-bg);
  border: 1px solid var(--b-kart-kenar);
  border-radius: var(--yari-4);
  padding: var(--bo-5);
  margin-bottom: var(--bo-4);
  box-shadow:
    inset 0 1px 0 var(--b-ust-isik),
    inset 0 0 0 1px var(--b-cekirdek-hat),
    0 0 0 1px var(--b-kabuk-hat),
    var(--golge-2);
}
.kutu.dar { max-width: 440px; margin: 96px auto; }
.kutu.ortala { text-align: center; }

.bolum-basi {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  margin: 0 0 var(--bo-1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.bolum-basi .ikon { color: var(--a-sonuk); }
.bolum-aciklama { margin: 0 0 var(--bo-1); font-size: 13px; color: var(--a-soluk); max-width: 68ch; }

.ikon { flex: 0 0 auto; vertical-align: -.15em; }

/* --- Düğmeler --- */
.dugme {
  position: relative;
  background: var(--b-dugme-bg);
  color: var(--a-metin);
  border: 1px solid var(--b-dugme-kenar);
  border-radius: var(--yari-tam);
  padding: 10px 18px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--bo-2);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--b-cekirdek-hat);
  transition: background var(--hiz-1) var(--egri), border-color var(--hiz-1) var(--egri),
              transform var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.dugme:hover:not(:disabled) {
  background: var(--b-dugme-bg-hover);
  border-color: var(--b-dugme-kenar-hover);
  color: var(--a-metin);
}
/* Basılı geri bildirimi: fiziksel tuş hissi. Yoksa tıklamanın kaydedilip
   kaydedilmediği ancak sonuç geldiğinde anlaşılıyor. */
.dugme:active:not(:disabled) { transform: scale(.978); }
.dugme:disabled { opacity: .5; cursor: not-allowed; }

.dugme.birincil {
  background: var(--b-dugme-birincil-bg);
  border-color: var(--b-dugme-birincil-bg);
  color: var(--b-dugme-birincil-yazi);
  box-shadow: var(--golge-2), inset 0 1px 0 hsl(var(--a-isik-k) / .22);
}
/* Yükselme hissini renk DEĞİL gölge ve kalkma veriyor; rengi açmak beyaz
   yazıyı 4.5:1 eşiğinin altına düşürürdü. */
.dugme.birincil:hover:not(:disabled) {
  background: var(--b-dugme-birincil-bg-hover);
  border-color: var(--b-dugme-birincil-bg-hover);
  color: var(--b-dugme-birincil-yazi);
  transform: translateY(-1px);
  box-shadow: var(--golge-3), inset 0 1px 0 hsl(var(--a-isik-k) / .22);
}
.dugme.birincil:active:not(:disabled) { transform: scale(.978); box-shadow: var(--golge-1); }

.dugme.tehlike {
  border-color: hsl(var(--a-hata-k) / .4);
  color: var(--a-hata-yazi);
  background: transparent;
  box-shadow: none;
}
.dugme.tehlike:hover:not(:disabled) {
  background: hsl(var(--a-hata-k) / .13);
  border-color: var(--a-hata);
  color: var(--a-hata-yazi);
}

/* Görsel olarak küçük, dokunma hedefi 44px. Görünür kutuyu küçültmek
   dokunmatikte ıskalamaya yol açıyordu. */
.dugme.kucuk { padding: 4px 13px; font-size: 12px; min-height: 44px; }

/* Düğme içindeki ikon adacığı: ok, metnin yanında çıplak durmuyor; kendi
   dairesel kabuğunun içinde ve hover'da çapraz kayıyor. */
.ada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin: -4px -8px -4px 2px;
  border-radius: 50%;
  background: var(--b-ada-bg);
  transition: background var(--hiz-1) var(--egri), transform var(--hiz-2) var(--egri);
}
.dugme:hover .ada { background: var(--b-ada-bg-hover); transform: translate(2px, -1px) scale(1.06); }

/* Üçüncül eylem: her yerde "dolu düğme + hayalet düğme" ikilisi görsel
   gürültü yaratıyor. Yıkıcı olmayan ikincil eylemler bunu kullanıyor. */
.baglanti-dugme {
  background: none;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  color: var(--a-vurgu-yazi);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--hiz-1) var(--egri);
}
.baglanti-dugme:hover { border-bottom-color: currentColor; }

/* --- Rozet --- */
/* Hap biçimli rozet en yaygın varsayılan; köşeli biçim hem daha az jenerik
   hem de kimlik/sayı gibi teknik içerikle daha uyumlu. */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--yari-1);
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--b-rozet-bg);
  color: var(--b-rozet-yazi);
  border: 1px solid var(--b-rozet-kenar);
}
.rozet.kucuk { padding: 1px 7px; font-size: 11px; }
.rozet.iyi   { background: hsl(var(--a-iyi-k) / .13);   color: var(--a-iyi-yazi);   border-color: hsl(var(--a-iyi-k) / .32); }
.rozet.uyari { background: hsl(var(--a-uyari-k) / .13); color: var(--a-uyari-yazi); border-color: hsl(var(--a-uyari-k) / .32); }
.rozet.kotu  { background: hsl(var(--a-hata-k) / .13);  color: var(--a-hata-yazi);  border-color: hsl(var(--a-hata-k) / .32); }

/* --- Uyarı kutusu --- */
.uyari-kutu {
  display: flex;
  align-items: flex-start;
  gap: var(--bo-2);
  border: 1px solid hsl(var(--a-uyari-k) / .35);
  background: hsl(var(--a-uyari-k) / .1);
  border-radius: var(--yari-3);
  padding: var(--bo-3) var(--bo-4);
  margin-bottom: var(--bo-4);
  font-size: 14px;
}
.uyari-kutu .ikon { color: var(--a-uyari-yazi); margin-top: 3px; }
.uyari-kutu.hata { border-color: hsl(var(--a-hata-k) / .35); background: hsl(var(--a-hata-k) / .1); }
.uyari-kutu.hata .ikon { color: var(--a-hata-yazi); }

/* --- Bildirim --- */
.bildirim {
  position: sticky;
  top: 84px;
  z-index: var(--z-yapisik);
  border-radius: var(--yari-3);
  padding: 12px 16px;
  margin-bottom: var(--bo-4);
  font-size: 14px;
  border: 1px solid var(--a-kenar);
  background: var(--a-yuzey2);
  box-shadow: var(--golge-2);
  animation: kaydir-gir var(--hiz-2) var(--egri) both;
}
.bildirim.gizli { display: none; }
.bildirim.ok   { border-color: hsl(var(--a-iyi-k) / .45);  background: hsl(var(--a-iyi-k) / .13); }
.bildirim.hata { border-color: hsl(var(--a-hata-k) / .45); background: hsl(var(--a-hata-k) / .13); }
.bildirim.notr { background: var(--a-yuzey2); }

/* --- Ayar alanları (ayarlar.ejs) --- */
.alanlar { display: grid; gap: var(--bo-3); margin-top: var(--bo-4); }
.alan {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--bo-3);
  align-items: start;
  padding: var(--bo-3);
  border-radius: var(--yari-3);
  border: 1px solid transparent;
  transition: background var(--hiz-1) var(--egri);
}
.alan:hover { background: var(--a-yuzey2); }
.alan.bos { border-color: hsl(var(--a-uyari-k) / .3); background: hsl(var(--a-uyari-k) / .1); }
.alan label {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 500;
  padding-top: 8px;
}
.anahtar { color: var(--a-sonuk); font-weight: 400; font-size: 12px; }

.giris { display: flex; gap: var(--bo-2); align-items: flex-start; }
.giris input[type="text"], .giris select {
  flex: 1;
  min-width: 0;
  background: var(--b-girdi-bg);
  color: var(--a-metin);
  border: 1px solid var(--b-girdi-kenar);
  border-radius: var(--yari-2);
  padding: 10px 12px;
  font: inherit;
  transition: border-color var(--hiz-1) var(--egri);
}
.giris input[type="text"]:hover, .giris select:hover { border-color: var(--b-girdi-kenar-hover); }
.giris select[multiple] { min-height: 116px; }

/* --- Satırlı form --- */
.satirli {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bo-3);
  align-items: flex-end;
  margin: var(--bo-4) 0 0;
  padding-top: var(--bo-4);
  border-top: 1px solid var(--a-kenar);
}
.satirli:first-of-type { border-top: none; padding-top: 0; }
.satirli label {
  display: flex;
  flex-direction: column;
  gap: var(--bo-1);
  font-size: 13px;
  color: var(--a-soluk);
  font-weight: 500;
}
.satirli input, .satirli select {
  background: var(--b-girdi-bg);
  border: 1px solid var(--b-girdi-kenar);
  border-radius: var(--yari-2);
  color: var(--a-metin);
  font: inherit;
  /* Dokunma hedefi en az 44px. */
  padding: 11px 13px;
  min-height: 44px;
  /* flex-basis sabitlenirse 375px ekranda kutu dolgusuyla taşıp yatay
     kaydırma yaratıyordu. */
  flex: 1 1 220px;
  min-width: 0;
  max-width: 100%;
  transition: border-color var(--hiz-1) var(--egri);
}
.satirli input:hover, .satirli select:hover { border-color: var(--b-girdi-kenar-hover); }
.satirli small { font-weight: 400; color: var(--a-sonuk); }

/* Girdi hatası alanın YANINDA duruyor, formun tepesinde toplu değil —
   hangi alanın sorunlu olduğu ancak orada anlaşılıyor. */
.alan-hata { display: block; margin-top: var(--bo-1); font-size: 12px; color: var(--a-hata-yazi); }
input:user-invalid, select:user-invalid { border-color: var(--a-hata); }

.satir { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: var(--bo-3) 0; }
.satir.sikisik { margin: 0; }
.satir-ici { display: inline; }

/* Satır içi `style` yerine adlandırılmış sınıflar: stil kararı şablonun
   içine dağılınca aynı ölçüyü iki yerde farklı yazmak kaçınılmaz oluyor. */
.sag { text-align: right; }
.ayrik { margin-top: var(--bo-5); }
.ust-bosluk { margin-top: var(--bo-3); }
.kimlik-orta { font-size: 13px; }
.geri-baglanti { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }

/* --- Tablo --- */
.liste { width: 100%; border-collapse: collapse; margin-top: var(--bo-3); }
.liste th {
  text-align: left;
  font-size: 12px;
  /* Büyük harfe çevirmek yerine renk ve kalınlıkla ayrılıyor: her yerde
     BÜYÜK HARF başlık hem okunurluğu düşürüyor hem jenerik duruyor. */
  color: var(--a-sonuk);
  font-weight: 500;
  padding: var(--bo-2) var(--bo-3);
  border-bottom: 1px solid var(--a-kenar);
}
.liste td { padding: var(--bo-3); border-bottom: 1px solid var(--a-kenar); vertical-align: middle; }
.liste tbody tr { transition: background var(--hiz-1) var(--egri); }
.liste tbody tr:hover { background: var(--a-yuzey2); }
.liste tr:last-child td { border-bottom: none; }
.liste a { color: var(--a-metin); text-decoration: none; }
.liste a:hover { color: var(--a-vurgu-yazi); }

/* Dar ekranda tablo sayfanın tamamını yatay kaydırmasın; kendi içinde kaysın. */
@media (max-width: 700px) {
  .liste { display: block; overflow-x: auto; }
}

/* --- Numaralı yönerge listesi (bot kurulum adımları) --- */
/* Numara gizlenmiyor: kullanıcı Discord'un sitesine gidip geri döndüğünde
   "kaçıncı adımdaydım" sorusunu ancak numara cevaplıyor. */
.adim-liste {
  counter-reset: adim;
  list-style: none;
  margin: var(--bo-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--bo-3);
}
.adim-liste > li {
  counter-increment: adim;
  position: relative;
  padding-left: 34px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--a-metin);
}
.adim-liste > li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--a-kenar);
  background: var(--a-yuzey2);
  color: var(--a-sonuk);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.adim-liste a { color: var(--a-vurgu-yazi); }

/* --- Açılır ayrıntı (token yenileme, izin listesi) --- */
/* Yerel üçgen işareti bırakılıyor ama tıklama alanı büyütülüyor: yalnız
   metne tıklanabilen bir summary dokunma hedefi kuralını ihlal ediyor. */
details > summary {
  cursor: pointer;
  padding: var(--bo-2) 0;
  user-select: none;
}
details > summary:hover { color: var(--a-metin); }
details > summary:focus-visible {
  outline: 2px solid var(--a-vurgu);
  outline-offset: 2px;
  border-radius: var(--yari-1);
}

/* --- Ölçüm kartları (KPI) — asimetrik bento --- */
/* Eşit dört sütun en jenerik kontrol paneli yerleşimi. İlk kart iki sütun
   kaplıyor: hiyerarşiyi boyut kuruyor, hepsi aynı ağırlıkta değil. */
.olcumler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--bo-3);
  margin: 0 0 var(--bo-6);
}
@media (min-width: 900px) {
  .olcumler { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

.olcum {
  position: relative;
  background: var(--b-kart-bg);
  border: 1px solid var(--b-kart-kenar);
  border-radius: var(--yari-3);
  padding: var(--bo-4) var(--bo-5);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 var(--b-ust-isik),
    inset 0 0 0 1px var(--b-cekirdek-hat),
    0 0 0 1px var(--b-kabuk-hat),
    var(--golge-1);
}
/* Üst kenarda ışık çizgisi: ışık yönünü her kartta aynı tutuyor (yukarıdan). */
.olcum::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--a-isik-k) / .13) 42%, transparent);
}
.olcum-etiket {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--a-sonuk);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--bo-3);
}
.olcum-deger {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
/* Sayı değil metin taşıyan ölçümler (paket adı, "Süresiz"). */
.olcum-deger.metin { font-size: 21px; letter-spacing: -.02em; }
.olcum-alt { margin-top: var(--bo-2); font-size: 12px; color: var(--a-sonuk); }
.olcum.vurgulu {
  border-color: hsl(var(--a-vurgu-k) / .4);
  background: linear-gradient(165deg, hsl(var(--a-vurgu-k) / .14), transparent 62%), var(--b-kart-bg);
}
.olcum.dikkat {
  border-color: hsl(var(--a-uyari-k) / .4);
  background: linear-gradient(165deg, hsl(var(--a-uyari-k) / .14), transparent 62%), var(--b-kart-bg);
}

/* --- Kiracı kartları --- */
.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--bo-3);
}

.kiraci-kart {
  position: relative;
  display: block;
  background: var(--b-kart-bg);
  border: 1px solid var(--b-kart-kenar);
  border-radius: var(--yari-3);
  padding: var(--bo-5);
  color: inherit;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 var(--b-ust-isik),
    inset 0 0 0 1px var(--b-cekirdek-hat),
    0 0 0 1px var(--b-kabuk-hat),
    var(--golge-1);
  transition: border-color var(--hiz-2) var(--egri), transform var(--hiz-2) var(--egri),
              box-shadow var(--hiz-2) var(--egri);
}

/* İmleci takip eden nokta ışığı. Konum iki değişkenden geliyor; JS yoksa
   varsayılan merkez kullanılır ve efekt sabit bir parlamaya dönüşür. */
.kiraci-kart::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hiz-2) var(--egri);
  background: radial-gradient(360px circle at var(--fx, 50%) var(--fy, 50%),
              var(--b-kart-isik), transparent 62%);
}
.kiraci-kart:hover::before { opacity: 1; }
.kiraci-kart:hover {
  border-color: var(--b-kart-kenar-hover);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--b-ust-isik),
    inset 0 0 0 1px var(--b-cekirdek-hat),
    0 0 0 1px var(--b-kabuk-hat),
    var(--golge-3);
}
.kiraci-kart:active { transform: translateY(-1px) scale(.995); }

.kiraci-kart-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bo-3);
  margin-bottom: var(--bo-4);
}
.kiraci-ad { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.kiraci-kimlik { font-size: 11px; color: var(--a-sonuk); margin-top: 3px; }

/* Durum noktası rozetin yanında ikinci sinyal. Renk TEK BAŞINA bilgi
   taşımıyor — yanındaki metin durumu yazıyor. */
.durum-nokta {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--a-sonuk);
}
.durum-nokta.iyi   { background: var(--a-iyi);   box-shadow: 0 0 0 3px hsl(var(--a-iyi-k) / .18); }
.durum-nokta.kotu  { background: var(--a-hata);  box-shadow: 0 0 0 3px hsl(var(--a-hata-k) / .18); }
.durum-nokta.uyari { background: var(--a-uyari); box-shadow: 0 0 0 3px hsl(var(--a-uyari-k) / .18); }

.kiraci-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-2);
  padding: 5px 0;
  font-size: 13px;
  color: var(--a-soluk);
}
.kiraci-satir strong { color: var(--a-metin); font-weight: 500; }

/* --- Slot göstergesi --- */
.olcek-grup {
  display: grid;
  gap: 8px;
  margin-top: var(--bo-4);
  padding-top: var(--bo-4);
  border-top: 1px solid var(--a-kenar);
}
.olcek-satir {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: var(--bo-2);
  font-size: 12px;
}
.olcek-ad { color: var(--a-sonuk); text-transform: capitalize; }
/* Yuva, kart yüzeyinden ayrışmak zorunda: doluluk sıfırken kullanıcının
   gördüğü tek şey bu: "gösterge var ama boş". Kart rengiyle aynı olsaydı
   çubuk hiç yokmuş gibi görünürdü. */
.olcek {
  height: 6px;
  border-radius: var(--yari-tam);
  background: var(--b-olcek-yuva);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--b-cekirdek-hat);
}
.olcek span {
  display: block;
  height: 100%;
  border-radius: var(--yari-tam);
  background: var(--a-vurgu);
  /* Genişlik yerine ölçek animasyonu: genişlik her karede yerleşimi
     yeniden hesaplatıyor, transform hesaplatmıyor. */
  transform-origin: left center;
  animation: dolum var(--hiz-3) 120ms var(--egri) both;
}
.olcek.dolu span   { background: var(--a-iyi); }
.olcek.asildi span { background: var(--a-hata); }
/* `.olcek.bos` için dolgu rengi TANIMLI DEĞİL, bilerek: şablon bu sınıfı
   yalnız kullanilan === 0 iken üretiyor ve o durumda genişlik de %0 oluyor.
   Sıfır genişlikli bir öğeye renk vermek ölü kural demekti. Boşluk sinyalini
   yuvanın kendisi ve yanındaki "0/3" sayısı taşıyor. */
.olcek-sayi { color: var(--a-soluk); min-width: 38px; text-align: right; }

/* --- Paket seçimi --- */
/* Açılır menü paketler arasındaki farkı gizliyordu. Kartlar seçim
   yapılmadan önce neyin değişeceğini gösteriyor. */
.paket-secim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--bo-3);
  margin: var(--bo-4) 0 var(--bo-5);
}
.paket-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--a-yuzey2);
  border: 1px solid var(--a-kenar);
  border-radius: var(--yari-3);
  padding: var(--bo-5) var(--bo-4) var(--bo-4);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--b-cekirdek-hat);
  transition: border-color var(--hiz-1) var(--egri), background var(--hiz-1) var(--egri),
              transform var(--hiz-1) var(--egri);
}
.paket-kart:hover { border-color: var(--a-kenar2); transform: translateY(-2px); }
.paket-kart input { position: absolute; opacity: 0; pointer-events: none; }
.paket-kart:has(input:checked) {
  border-color: var(--a-vurgu);
  background: linear-gradient(165deg, hsl(var(--a-vurgu-k) / .16), transparent 70%), var(--a-yuzey2);
}
/* :has() desteklemeyen tarayıcıda odak yine görünür kalsın. */
.paket-kart input:focus-visible + .paket-ad {
  outline: 2px solid var(--b-odak-halka);
  outline-offset: 3px;
  border-radius: var(--yari-1);
}
.paket-ad { display: block; font-weight: 600; margin-bottom: var(--bo-2); letter-spacing: -.02em; font-size: 16px; }
/* margin-top:auto — detay blokları her kartta aynı hizada bitiyor; başlık
   blokları farklı yükseklikte olunca satırlar kayıp tablo bozuk görünüyordu. */
.paket-detay { font-size: 12px; color: var(--a-soluk); line-height: 1.7; margin-top: auto; }
.paket-detay b { color: var(--a-metin); font-weight: 600; }
.paket-kart .simdiki {
  position: absolute;
  top: var(--bo-3);
  right: var(--bo-3);
  padding: 2px 8px;
  border-radius: var(--yari-tam);
  background: hsl(var(--a-vurgu-k) / .18);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a-vurgu-yazi);
}

/* --- Özellik ızgarası --- */
.ozellik-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--bo-2);
  margin-top: var(--bo-3);
}
.ozellik {
  display: flex;
  align-items: center;
  gap: var(--bo-2);
  padding: 11px 13px;
  border: 1px solid var(--a-kenar);
  border-radius: var(--yari-2);
  font-size: 13px;
  background: var(--a-yuzey2);
  box-shadow: inset 0 1px 0 var(--b-cekirdek-hat);
}
.ozellik.acik { border-color: hsl(var(--a-iyi-k) / .3); }
.ozellik.acik .ikon { color: var(--a-iyi-yazi); }
.ozellik.kapali { opacity: .45; }
.ozellik.kapali .ikon { color: var(--a-sonuk); }

/* --- Boş durum --- */
/* "Henüz kiracı yok" tek başına çıkmaz sokak; ne yapılacağını da söylüyor. */
.bos-durum {
  text-align: center;
  padding: 72px var(--bo-5);
  border: 1px dashed var(--a-kenar2);
  border-radius: var(--yari-4);
  color: var(--a-soluk);
  background: radial-gradient(620px circle at 50% 0%, hsl(var(--a-vurgu-k) / .08), transparent 70%);
}
.bos-durum .ikon { color: var(--a-kenar2); margin-bottom: var(--bo-3); }
.bos-durum h3 { margin: 0 0 var(--bo-2); color: var(--a-metin); font-size: 18px; }
.bos-durum p { margin: 0 auto var(--bo-5); max-width: 46ch; font-size: 14px; }

/* --- Onay diyaloğu --- */
/* Basit eylemler için açılır pencere kullanılmıyor; yalnız geri alınamayan
   işlemler (sahip çıkarma, süreç yeniden başlatma) buraya düşüyor. */
.onay {
  border: 1px solid var(--a-kenar2);
  border-radius: var(--yari-4);
  background: var(--a-yuzey1);
  color: var(--a-metin);
  padding: var(--bo-6);
  max-width: 430px;
  width: calc(100% - 32px);
  box-shadow: var(--golge-3), inset 0 1px 0 var(--b-ust-isik);
}
.onay::backdrop { background: var(--b-perde-bg); backdrop-filter: blur(6px); }
.onay-baslik { margin: 0 0 var(--bo-2); font-size: 18px; }
.onay-metin { margin: 0 0 var(--bo-6); font-size: 14px; color: var(--a-soluk); }
.onay-dugmeler { display: flex; gap: var(--bo-2); justify-content: flex-end; flex-wrap: wrap; }
.onay[open] { animation: belir var(--hiz-2) var(--egri) both; }

/* --- İskelet yükleyici --- */
/* Dönen çember gelecek içeriğin biçimi hakkında hiçbir şey söylemiyor;
   iskelet yerleşimi baştan ayırdığı için sayfa da zıplamıyor. */
.iskelet {
  border-radius: var(--yari-2);
  background: linear-gradient(90deg, var(--a-yuzey2) 25%, var(--a-yuzey3) 37%, var(--a-yuzey2) 63%);
  background-size: 400% 100%;
  animation: parilti 1.4s ease-in-out infinite;
  color: transparent;
  user-select: none;
}

/* ==========================================================================
   6. HAREKET
   ========================================================================== */

@keyframes belir {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes kaydir-gir {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dolum {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes parilti {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* Kademeli giriş: hepsi aynı anda belirirse göz nereye bakacağını bilemiyor.
   Gecikmeler CSS'te — satır içi stil üretmemek için. */
.olcumler > *,
.kart-izgara > *,
.ozellik-izgara > * {
  animation: belir var(--hiz-2) var(--egri) both;
}
.olcumler > *:nth-child(1), .kart-izgara > *:nth-child(1), .ozellik-izgara > *:nth-child(1) { animation-delay: 0ms; }
.olcumler > *:nth-child(2), .kart-izgara > *:nth-child(2), .ozellik-izgara > *:nth-child(2) { animation-delay: 45ms; }
.olcumler > *:nth-child(3), .kart-izgara > *:nth-child(3), .ozellik-izgara > *:nth-child(3) { animation-delay: 90ms; }
.olcumler > *:nth-child(4), .kart-izgara > *:nth-child(4), .ozellik-izgara > *:nth-child(4) { animation-delay: 135ms; }
.olcumler > *:nth-child(5), .kart-izgara > *:nth-child(5), .ozellik-izgara > *:nth-child(5) { animation-delay: 180ms; }
.olcumler > *:nth-child(6), .kart-izgara > *:nth-child(6), .ozellik-izgara > *:nth-child(6) { animation-delay: 225ms; }
/* 7. öğeden sonra gecikme sabit: doğrusal büyüseydi 20 kartlık listede son
   kart bir saniye sonra gelirdi. */
.olcumler > *:nth-child(n+7), .kart-izgara > *:nth-child(n+7), .ozellik-izgara > *:nth-child(n+7) { animation-delay: 250ms; }

/* Kaydırınca beliren bölümler.
   Gizleme sınıfını (`hazir`) her öğeye JS'in KENDİSİ ekliyor. Başlangıç
   durumunu doğrudan CSS'e yazsaydık, script 404 verdiğinde ya da hata
   attığında içerik sonsuza dek görünmez kalırdı — animasyon uğruna sayfayı
   kaybetmek kabul edilemez. JS çalışmazsa hiçbir şey gizlenmiyor. */
.belirir.hazir {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity var(--hiz-3) var(--egri), transform var(--hiz-3) var(--egri),
              filter var(--hiz-3) var(--egri);
  /* will-change yalnız bekleyen öğede; açıldıktan sonra geri alınıyor. */
  will-change: transform, opacity;
}
.belirir.hazir.gorunur {
  opacity: 1;
  transform: none;
  filter: blur(0);
  will-change: auto;
}

/* ==========================================================================
   7. ERİŞİLEBİLİRLİK
   ========================================================================== */

/* Klavye kullanıcısı nerede olduğunu görmek zorunda. Kenarlık rengini
   değiştirmek odak göstergesi sayılmaz: 1px kenar koyu temada 3:1'i
   tutmuyor. Halka ASLA animasyonlu değil — gecikmeli odak, odak değildir. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--b-odak-halka);
  outline-offset: 2px;
  border-radius: var(--yari-1);
  transition: none;
}
/* Fare tıklamasında halka çıkmasın, klavyede çıksın. */
:focus:not(:focus-visible) { outline: none; }
.satirli input:focus-visible,
.satirli select:focus-visible,
.giris input:focus-visible,
.giris select:focus-visible { outline-offset: -1px; border-color: var(--a-vurgu); }

/* Hareket duyarlılığı olan kullanıcılar için tüm hareket kapanıyor.
   `.belirir` de görünür sabitleniyor — yalnız geçişi kapatmak, içeriği
   bulanık ve kaymış hâlde bırakırdı. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .belirir.hazir { opacity: 1; transform: none; filter: none; }
}

/* ==========================================================================
   8. TANITIM YÜZEYİ
   ==========================================================================
   Panel ile tanıtım aynı simgeleri paylaşıyor ama farklı yoğunlukta
   konuşuyor: panel iş yaptırır, tanıtım ikna eder. Burada boşluk 2-3 kat
   açılıyor, başlıklar büyüyor. Renk paleti AYNI — iki ayrı palet tutmak
   markayı böler.

   Not: bu blok ileride `tanitim.css` olarak ayrılacak. Şimdilik tek dosyada
   duruyor çünkü ayırma panel şablonlarının da güncellenmesini gerektiriyor
   ve o iş henüz sırada değil.                                              */

.govde.genis { max-width: 1140px; }

/* --- Kahraman --- */
.kahraman { padding: 72px 0 56px; max-width: 42ch; }
.kahraman h1 {
  font-size: clamp(38px, 6.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -.045em;
  margin: 0 0 var(--bo-4);
}
.kahraman-alt {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--a-soluk);
  max-width: 54ch;
  margin: 0 0 var(--bo-6);
}
.kahraman-eylem { display: flex; flex-wrap: wrap; gap: var(--bo-3); }

/* --- Bölüm --- */
.bolum { padding: 72px 0; border-top: 1px solid var(--a-kenar); }
.bolum-baslik {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.03em;
  margin: 0 0 var(--bo-3);
  max-width: 26ch;
}
.bolum-alt { color: var(--a-soluk); max-width: 62ch; margin: 0 0 var(--bo-6); font-size: 15px; }
.grup-baslik {
  margin: var(--bo-6) 0 var(--bo-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--a-sonuk);
}

/* --- Üç kutu (sorun anlatımı) --- */
/* Eşit üç sütun en jenerik pazarlama yerleşimi; burada bilerek kullanılıyor
   çünkü üç madde EŞDEĞER — biri diğerinden önemli değil. Hiyerarşi olmayan
   yerde asimetri uydurmak yanlış sinyal verir. */
.uc-kutu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--bo-4); }
.anlat {
  padding: var(--bo-5);
  border: 1px solid var(--a-kenar);
  border-radius: var(--yari-4);
  background: var(--b-kart-bg);
  box-shadow: inset 0 1px 0 var(--b-ust-isik), var(--golge-1);
}
.anlat h3 { font-size: 16px; margin: 0 0 var(--bo-2); }
.anlat p { margin: 0; color: var(--a-soluk); font-size: 14px; line-height: 1.6; }

/* --- Adımlar --- */
.adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--bo-5);
}
.adimlar li { position: relative; padding-top: var(--bo-5); }
.adim-no {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: hsl(var(--a-vurgu-k) / .16);
  border: 1px solid hsl(var(--a-vurgu-k) / .35);
  color: var(--a-vurgu-yazi);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.adimlar h3 { font-size: 16px; margin: var(--bo-4) 0 var(--bo-2); }
.adimlar p { margin: 0; color: var(--a-soluk); font-size: 14px; line-height: 1.6; }

/* --- Zaman çizgisi (guard gösterimi) --- */
.zaman-cizgisi {
  display: grid;
  border-left: 2px solid var(--a-kenar2);
  margin: 0 0 var(--bo-4);
  padding-left: var(--bo-5);
}
.zc-adim {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--bo-3);
  padding: var(--bo-3) 0;
  font-size: 14px;
  color: var(--a-soluk);
}
.zc-adim b {
  color: var(--a-sonuk);
  font-family: 'Geist Mono', ui-monospace, Consolas, monospace;
  font-size: 12px;
  min-width: 44px;
}
.zc-nokta {
  position: absolute;
  left: calc(-1 * var(--bo-5) - 5px);
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--a-kenar2);
}
.zc-adim.uyari { color: var(--a-uyari-yazi); }
.zc-adim.uyari .zc-nokta { background: var(--a-uyari); box-shadow: 0 0 0 3px hsl(var(--a-uyari-k) / .2); }
.zc-adim.tehlike { color: var(--a-hata-yazi); }
.zc-adim.tehlike .zc-nokta { background: var(--a-hata); box-shadow: 0 0 0 3px hsl(var(--a-hata-k) / .2); }

/* --- Özellik vitrini (anasayfa) --- */
.ozellik-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ozellik-metin small { font-size: 12px; line-height: 1.45; }
.ozellik-metin .rozet { align-self: flex-start; margin-top: 2px; }
.ozellik-izgara .ozellik { align-items: flex-start; }
.ozellik-izgara .ozellik > .ikon { margin-top: 3px; }

/* --- Özellik listesi (özellikler sayfası) --- */
.ozellik-liste { display: grid; margin-top: var(--bo-3); }
.ozellik-satir { padding: var(--bo-3) 0; border-bottom: 1px solid var(--a-kenar); }
.ozellik-satir:last-child { border-bottom: none; }
.ozellik-ad { display: flex; align-items: center; gap: var(--bo-2); flex-wrap: wrap; }
.ozellik-satir p { margin: 4px 0 0; font-size: 13px; }

/* --- Paket vitrini --- */
.paket-vitrin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bo-4);
  align-items: stretch;
  margin-bottom: var(--bo-6);
}
.paket-vitrin-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--bo-6) var(--bo-5) var(--bo-5);
  border: 1px solid var(--a-kenar);
  border-radius: var(--yari-4);
  background: var(--b-kart-bg);
  box-shadow: inset 0 1px 0 var(--b-ust-isik), var(--golge-1);
}
/* Önerilen kademe yalnız daha uzun olarak değil, renk ve etiketle
   işaretleniyor — boy farkı tek başına niyeti anlatmıyor. */
.paket-vitrin-kart.onerilen {
  border-color: hsl(var(--a-vurgu-k) / .45);
  background: linear-gradient(180deg, hsl(var(--a-vurgu-k) / .1), transparent 42%), var(--b-kart-bg);
  box-shadow: inset 0 1px 0 var(--b-ust-isik), var(--golge-2);
}
.onerilen-etiket {
  position: absolute;
  top: -10px;
  left: var(--bo-5);
  padding: 3px 10px;
  border-radius: var(--yari-tam);
  background: var(--b-dugme-birincil-bg);
  color: var(--b-dugme-birincil-yazi);
  font-size: 11px;
  font-weight: 500;
}
.paket-vitrin-kart h2, .paket-vitrin-kart h3 { font-size: 20px; margin: 0 0 var(--bo-2); }
.paket-fiyat { margin: 0 0 var(--bo-4); }
.paket-fiyat b {
  font-size: 32px;
  font-weight: 620;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
/* Fiyat girilmemiş. Uydurma rakam yerine bunu göstermek, yanlış fiyatla
   müşteri kaybetmekten iyi. */
.fiyat-yok { font-size: 15px; color: var(--a-uyari-yazi); }

/* --- Satın alma formu ---
   Sınıf adları `satin-` önekli: `.alan` (ayar kutusu) ve `.onay` (dialog
   penceresi) bu dosyada BAŞKA anlamlarda zaten kullanılıyor. Aynı adı
   vermek formu sessizce bozardı. */
.satin-izgara { display: grid; gap: var(--bo-4); margin-top: var(--bo-4); }
.satin-alan { display: block; }
.satin-alan-ad {
  display: block;
  margin-bottom: var(--bo-1);
  font-size: 13px;
  font-weight: 550;
  color: var(--a-metin);
}
.satin-alan input, .satin-alan select {
  width: 100%;
  padding: 10px var(--bo-3);
  border: 1px solid var(--b-girdi-kenar);
  border-radius: var(--yari-2);
  background: var(--b-girdi-bg);
  color: var(--a-metin);
  font: inherit;
  font-size: 14px;
}
.satin-alan input:hover, .satin-alan select:hover { border-color: var(--b-girdi-kenar-hover); }
.satin-alan small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; }

/* Onay kutusu ve metni: kutu yukarı hizalı, metin sarınca kaymasın. */
.satin-onay {
  display: flex;
  align-items: flex-start;
  gap: var(--bo-2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--a-soluk);
  cursor: pointer;
}
.satin-onay input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: var(--a-vurgu);
}
.satin-onay a { color: var(--a-vurgu-yazi); }
.satin-izgara .dugme { justify-self: start; }

/* --- Dönem seçenekleri ---
   Shopier tekrarlayan tahsilat yapmadığı için uzun dönem satmak işin
   gereği. Tutarlar burada tam olarak yazılıyor; "yıllık alana indirim"
   deyip rakamı ödeme adımına saklamak müşteriyi orada geri döndürüyor.
   Renk kullanılmıyor: indirim bilgisi yazıyla da tam. */
.donem-listesi {
  list-style: none;
  margin: 0 0 var(--bo-4);
  padding: var(--bo-3) 0 0;
  border-top: 1px solid var(--a-kenar);
}
.donem-listesi li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--bo-2);
  padding: 5px 0;
  font-size: 13px;
}
.donem-ad { color: var(--a-soluk); min-width: 62px; }
.donem-tutar {
  margin-left: auto;
  color: var(--a-metin);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* İndirim satırı tam genişlik alıyor: dar kartta tutarın yanına sıkışıp
   iki rakam yan yana geldiğinde hangisinin ödeneceği belirsizleşiyordu. */
.donem-indirim {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--a-vurgu-yazi);
}

.paket-liste { list-style: none; margin: 0 0 var(--bo-5); padding: 0; flex: 1; }
.paket-liste li {
  padding: 7px 0;
  border-bottom: 1px solid var(--a-kenar);
  font-size: 13px;
  color: var(--a-soluk);
}
.paket-liste li:last-child { border-bottom: none; }
.paket-liste b { color: var(--a-metin); font-weight: 600; }
.paket-liste .alt-madde { padding-left: var(--bo-3); color: var(--a-sonuk); font-size: 12px; }
/* Düğmeler kartın altına sabitleniyor: içerik uzunluğu farklı olsa da
   yatay bir hat oluşturuyorlar. */
.paket-vitrin-kart .dugme { justify-content: center; }

/* --- Karşılaştırma tablosu --- */
.tablo-kaydir { overflow-x: auto; margin-top: var(--bo-4); }
.karsilastirma { min-width: 560px; }
.karsilastirma th.orta, .karsilastirma td.orta { text-align: center; }
.karsilastirma td small { display: block; font-size: 12px; margin-top: 2px; }
.karsilastirma .grup-satiri td {
  background: var(--a-yuzey2);
  font-size: 12px;
  font-weight: 500;
  color: var(--a-sonuk);
  padding: 6px var(--bo-3);
}
.karsilastirma .var { color: var(--a-iyi-yazi); }
.karsilastirma .yok { color: var(--a-sonuk); }

/* Ekran okuyucuya açık, gözle görünmez. `display:none` OLMAZ — o, içeriği
   ekran okuyucudan da gizler. */
.gorsel-gizli {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- SSS --- */
.sss-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--bo-4); }
.sss-madde {
  padding: var(--bo-5);
  border: 1px solid var(--a-kenar);
  border-radius: var(--yari-4);
  background: var(--b-kart-bg);
  box-shadow: inset 0 1px 0 var(--b-ust-isik);
}
.sss-madde h2 { font-size: 16px; margin: 0 0 var(--bo-2); }
.sss-madde p { margin: 0; color: var(--a-soluk); font-size: 14px; line-height: 1.65; }

/* --- Yasal --- */
.yasal-duzen { display: grid; grid-template-columns: 220px 1fr; gap: var(--bo-6); align-items: start; }
.yasal-menu { display: grid; gap: 2px; position: sticky; top: 96px; }
.yasal-menu a {
  padding: 9px 12px;
  border-radius: var(--yari-2);
  color: var(--a-soluk);
  text-decoration: none;
  font-size: 14px;
  transition: background var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri);
}
.yasal-menu a:hover { background: var(--a-yuzey2); color: var(--a-metin); }
.yasal-menu a.aktif { background: hsl(var(--a-vurgu-k) / .14); color: var(--a-metin); }
.yasal-metin { max-width: 68ch; }
.yasal-metin h2 { font-size: 17px; margin: var(--bo-6) 0 var(--bo-2); }
.yasal-metin h2:first-child { margin-top: 0; }
.yasal-metin p { color: var(--a-soluk); line-height: 1.7; margin: 0 0 var(--bo-3); }

/* --- Kapanış --- */
.kapanis { text-align: center; }
.kapanis .bolum-baslik, .kapanis .bolum-alt { margin-left: auto; margin-right: auto; }

/* --- Altbilgi --- */
.alt-bilgi { border-top: 1px solid var(--a-kenar); padding: var(--bo-6) 0 0; margin-top: var(--bo-7); }
.alt-ust { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--bo-5); margin-bottom: var(--bo-5); }
.alt-ust h3 { font-size: 13px; color: var(--a-sonuk); margin: 0 0 var(--bo-2); font-weight: 500; }
.alt-ust nav { display: grid; gap: 6px; align-content: start; }
.alt-ust nav a { color: var(--a-soluk); text-decoration: none; font-size: 14px; }
.alt-ust nav a:hover { color: var(--a-metin); }
.alt-ust .marka { margin-bottom: var(--bo-2); }
.alt-son { border-top: 1px solid var(--a-kenar); padding: var(--bo-4) 0; margin: 0; }

@media (max-width: 760px) {
  .yasal-duzen { grid-template-columns: 1fr; }
  .yasal-menu { position: static; grid-auto-flow: column; overflow-x: auto; }
  .alt-ust { grid-template-columns: 1fr; }
  .kahraman { padding: 48px 0 40px; }
  .bolum { padding: 48px 0; }
}

/* ==========================================================================
   9. DUYARLI DAVRANIŞ
   ========================================================================== */
@media (max-width: 900px) {
  .govde { padding: var(--bo-6) var(--bo-4) 72px; }
  .ust { margin: var(--bo-2) var(--bo-3) 0; gap: var(--bo-3); }
  /* Ad gizleniyor, avatar ve çıkış kalıyor: dar ekranda gezinme
     bağlantılarına yer açmak gerekiyor. */
  .hesap-ad { display: none; }
}

@media (max-width: 720px) {
  .alan { grid-template-columns: 1fr; }
  /* Menü ARTIK GİZLENMİYOR. Eskiden `display:none` idi ve mobilde gezinmenin
     yerine hiçbir şey konmamıştı — kullanıcı sayfalar arasında geçemiyordu.
     Şimdi kendi içinde yatay kayıyor. */
  .ust { flex-wrap: wrap; border-radius: var(--yari-4); }
  .menu {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .menu::-webkit-scrollbar { display: none; }
  .kart-izgara { grid-template-columns: 1fr; }
  /* Asimetrik yerleşim dar ekranda tek sütuna düşüyor. */
  .olcumler { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 560px) {
  .olcek-satir { grid-template-columns: 58px 1fr auto; }
  .kutu { padding: var(--bo-4); }
  .kutu.dar { margin: var(--bo-6) auto; }
  .govde { padding-left: var(--bo-3); padding-right: var(--bo-3); }
}