/* ===========================================================================
   KAROS TEMA KATMANI — mevcut portalin GERCEK gorunen kiligi   [29.10.2026]
   ---------------------------------------------------------------------------
   KAYNAK: eski VDS'teki canli site (karos-remastered, :5025) olculerek
   cikarilan tasarim sozlugu. Kaynak sitede palet ALTI CSS dosyasinin ust uste
   binmesiyle olusuyordu: temeldeki bordo (#b72f42) `realm-polish.css` ile
   altin/obsidyene EZILIYOR. Yani temel dosyaya bakip "kirmizi tema" diye
   kurmak YANLIS olur - asagidaki degerler ekranda GERCEKTEN gorunen renkler.
   Burada o alti dosya tasinmiyor; tek katman olarak yeniden yaziliyor:
   yukleme sirasi bozulup paletin kirmizaya donmesi MUMKUN DEGIL.

   NE DEGISIR: renk jetonlari, baslik fontu (Oswald 600, kendi sunucumuzda),
   mikro etiketlerin genis harf araligi, altin gradyan buton + pah kirilmis
   kose (clip-path), kart kenarlari ve hover kalkmasi, ust bar/hero/footer.
   NE DEGISMEZ: HTML yapisi, sinif adlari, erisilebilirlik davranisi.

   ERISILEBILIRLIK TUZAGI (bilerek cozuldu): `clip-path` ogeyi kirptigi icin
   outline VE box-shadow'u da kirpar - pah kirilmis butonda normal odak halkasi
   GORUNMEZ. O yuzden kirpilan ogelerde odak halkasi ICE cizilir (inset).
   =========================================================================== */

/* --- Oswald 600: kendi sunucumuzda, Google Fonts baglantisi YOK ----------- */
@font-face {
  font-family: "Oswald";
  src: url("/static/fonts/oswald-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- zemin: mor-siyah yerine OBSIDYEN --- */
  --zemin:        #101114;
  --zemin-2:      #14181e;   /* hero / ikincil yuzey */
  --zemin-3:      #191a1d;   /* kart */
  --cizgi:        #4a4036;   /* govde cizgisi (kart kenari daha sicak) */
  --cizgi-sicak:  #66523f;
  --cizgi-ust:    #665442;

  /* --- metin --- */
  --metin:        #f1eee7;
  --metin-sus:    #c0b9b1;
  --metin-hero:   #fff7e9;
  --metin-lead:   #e0dcd5;

  /* --- vurgu: PIRINC/ALTIN --- */
  --altin:        #dcc395;
  --altin-rafine: #cfb883;
  --altin-koyu:   #b89053;
  --altin-sis:    rgba(220, 195, 149, .14);
  --btn-acik:     #ebd3a2;
  --btn-koyu:     #b89053;
  --btn-kenar:    #f2d7a2;
  --btn-metin:    #17140f;   /* altin uzerinde KOYU metin - beyaz kontrasti bozar */
  --btn-h-acik:   #f7e2b7;
  --btn-h-koyu:   #d8b371;
  --odak:         #ecd2a0;

  /* mor vurgu kaldirildi: kaynak sitede ekranda GORUNMUYOR.
     Degisken duruyor ki ona bagli eski kurallar kirilmasin. */
  --mor:          #cfb883;
  --mor-sis:      rgba(207, 184, 131, .16);

  --display:      "Oswald", "Arial Narrow", Impact, sans-serif;
  --govde-font:   "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --golge:        0 10px 24px rgba(0, 0, 0, .27);
  --golge-derin:  0 20px 35px rgba(0, 0, 0, .5);
  --pah:          13px;      /* kose kesme olcusu (yuvarlak DEGIL) */
  --en:           1360px;    /* kaynak sitenin icerik kabi */
}

body { font-family: var(--govde-font); font-size: 15px; line-height: 1.6; }

/* --- Tipografi: baslikler Oswald, BUYUK HARF ------------------------------ */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .015em;
}
h1 { font-size: clamp(43px, 3.65vw, 63px); line-height: 1.08; letter-spacing: -.012em; }
h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; }
h3 { font-size: 20px; letter-spacing: .03em; }

/* Form/kart basliklari: BUYUK HARF olmasin (okunurluk) */
.giris-kutu h2, .yan-kart h2, .neden-grid h3, .form-kutu h2, .form-kutu h3 {
  font-family: var(--display);
  text-transform: none;
  letter-spacing: .02em;
}

/* --- Mikro etiketler: temanin imzasi (genis aralik + buyuk harf) ---------- */
.kicker,
.marka-rozet,
.sayac-baslik,
.dil-secici a,
.sayac-oge span,
.alt-destek,
.feragat {
  text-transform: uppercase;
  letter-spacing: .18em;
}
.kicker {
  font: 700 11px/1.3 var(--govde-font);
  letter-spacing: .22em;
  color: var(--altin);
}
.marka-rozet {
  font: 600 9px/1 var(--govde-font);
  letter-spacing: .16em;
  color: var(--altin-rafine);
  border-color: var(--cizgi-sicak);
  border-radius: 3px;              /* temada yuvarlak kapsul yok */
}
.sayac-oge span { font-size: 9px; letter-spacing: .14em; }
.feragat { letter-spacing: .06em; }

.lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--metin-lead);
  max-width: 58ch;
}

/* --- Ust bar -------------------------------------------------------------- */
.ust {
  min-height: 88px;
  background: rgba(17, 18, 21, .96);
  border-bottom: 1px solid var(--cizgi-ust);
}
.menu a {
  position: relative;
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #e0d9cd;
  border-radius: 0;
  background: none;
}
.menu a::after {
  content: "";
  position: absolute; left: .66rem; right: .66rem; bottom: .18rem;
  height: 2px; background: var(--altin);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.menu a:hover { background: none; color: #fff5e0; }
.menu a:hover::after { transform: scaleX(1); }

.dil-secici {
  border: 0; border-left: 1px solid var(--cizgi-ust);
  border-radius: 0; padding-left: .7rem;
}
.dil-secici a.secili { color: var(--btn-metin); background: var(--altin); border-radius: 2px; }

/* --- Butonlar: altin gradyan + PAH KIRILMIS kose -------------------------- */
.btn {
  font: 700 12px/1 var(--govde-font);
  letter-spacing: .07em;
  text-transform: uppercase;
  min-height: 49px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--pah)) 0, 100% var(--pah),
                     100% 100%, var(--pah) 100%, 0 calc(100% - var(--pah)));
  transition: background .2s, color .2s, transform .25s cubic-bezier(.4, 0, .2, 1);
}
.btn.kucuk { min-height: 38px; font-size: 10.5px; --pah: 9px; }
.btn b { font-size: 20px; font-weight: 400; margin-left: .9rem; }

.btn-altin {
  background: linear-gradient(115deg, var(--btn-acik), var(--btn-koyu));
  border: 1px solid var(--btn-kenar);
  color: var(--btn-metin);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .33);
}
.btn-altin:hover {
  background: linear-gradient(115deg, var(--btn-h-acik), var(--btn-h-koyu));
  color: #100e0a;
  transform: translateY(-2px);
}
.btn-cam {
  background: rgba(18, 23, 28, .73);
  border: 1px solid #927a58;
  color: #f0dfc2;
}
.btn-cam:hover {
  background: #343029; border-color: #dec18c; color: #fff5e0;
  transform: translateY(-2px);
}
.btn-discord { clip-path: none; border-radius: 4px; }  /* marka rengi korunur */

/* clip-path outline'i da kirptigi icin odak halkasi ICERI cizilir */
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--btn-metin), inset 0 0 0 4px var(--odak);
}
.btn-discord:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; box-shadow: none; }

:focus-visible { outline-color: var(--odak); }

/* --- Hero ----------------------------------------------------------------- */
.kahraman { background: var(--zemin-2); }
.kahraman-perde {
  background:
    linear-gradient(90deg, rgba(11, 17, 25, .95) 0%, rgba(12, 18, 27, .91) 21%,
                    rgba(16, 23, 33, .64) 38%, rgba(16, 23, 33, .07) 70%);
}
.kahraman h1 { color: var(--metin-hero); text-shadow: 0 3px 28px #000; }
.istatistik { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.istatistik strong { font-family: var(--display); font-size: 15px; color: var(--altin); }

/* --- "SUNUCU SIFIRLAMASI YOK" rozeti: sitenin en guclu satis argumani ----- */
.rozet-wipe {
  display: inline-block;
  font: 700 11px/1.4 var(--govde-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0f0d08;
  background: linear-gradient(115deg, var(--btn-acik), var(--btn-koyu));
  border: 1px solid var(--btn-kenar);
  padding: .55rem .95rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px,
                     100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* --- Kartlar: obsidyen yuzey + sicak kenar + hover kalkmasi --------------- */
.sayac-kutu,
.giris-kutu,
.neden-grid article,
.form-kutu,
.yan-kart {
  background: var(--zemin-3);
  border: 1px solid var(--cizgi-sicak);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px,
                     100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: var(--golge);
}
.neden-grid article {
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), border-color .25s;
}
.neden-grid article:hover { transform: translateY(-5px); border-color: #d4be92; }
.sayac-kutu { border-color: rgba(220, 195, 149, .42); }

/* Form girdileri kirpilmaz: odak halkasi gorunur kalmali */
.alan input[type="text"],
.alan input[type="email"],
.alan input[type="password"],
.alan textarea,
.alan select {
  background: #15161a;
  border: 1px solid var(--cizgi);
  border-radius: 4px;
}
.alan input:focus, .alan textarea:focus {
  border-color: var(--altin);
  box-shadow: 0 0 0 3px var(--altin-sis);
}

/* --- Geri sayim: display font --------------------------------------------- */
.sayac-oge strong, .sayac-ayirac, .sayac-bitti-metin {
  font-family: var(--display);
  color: var(--metin-hero);
}
.sayac-oge strong { letter-spacing: -.01em; }

/* --- Footer --------------------------------------------------------------- */
.alt { background: #111316; border-top: 1px solid #554c3d; }
.alt a { color: #ddbf88; }
.alt-menu a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* --- Hareket azaltma: kaynak sitede de destekliydi ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn, .neden-grid article, .menu a::after { transition: none; }
  .btn:hover, .btn-cam:hover, .neden-grid article:hover { transform: none; }
}

/* --- Kucuk ekran: pah olcusu kuculur, kirpma tasmasin -------------------- */
@media (max-width: 760px) {
  :root { --pah: 9px; }
  .ust { min-height: 65px; }
  h1 { font-size: clamp(32px, 8vw, 43px); }
  .sayac-kutu, .giris-kutu, .neden-grid article, .form-kutu, .yan-kart {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px,
                       100% 100%, 12px 100%, 0 calc(100% - 12px));
  }
}