/*
  normo.css — WEB TARAFININ TEK TASARIM KAYNAĞI

  ── NEDEN VAR ──────────────────────────────────────────────────────

  Altı HTML sayfasının her biri kendi renklerini kendi <style> bloğunda
  taşıyordu ve hepsi birbirinden kaymıştı. Ölçüldü:

    landing / hakkimda : #141210 zemin, #F2ECDF yazı, 12px köşe
    hukuk sayfaları    : #14100C zemin, #E8DFD0 yazı — YAKIN AMA AYNI
                         DEĞİL; üstelik terms 6px, veri-silme 12px köşe
    yönetim paneli     : #0e1015 zemin, #38bdf8 mavi, 4px köşe —
                         tamamen başka bir üründen gelmiş gibi

  Bu kayma kaçınılmazdı: aynı değeri altı yere elle yazarsan biri
  güncellenir, beşi unutulur. Tek dosya bunu yapısal olarak imkânsız
  kılıyor — renk bir kez burada tanımlanıyor.

  ── PALET NEREDEN GELİYOR ──────────────────────────────────────────

  Uydurulmadı. Uygulamanın kendi rampasından alındı
  (`constants/temaDegiskenleri.ts` + `global.css`): sıcak nötr bir
  gri rampası ve dört vurgu — altın, adaçayı, terrakota, gece mavisi.
  Kontrastları uygulamada ölçülmüş durumda (WCAG AA, 4.5:1 üstü).

  Uygulamada renk HSL üçlüsü olarak duruyor çünkü Tailwind opaklık eki
  (`bg-white/5`) ancak öyle çalışıyor. Burada Tailwind yok, o yüzden
  okunabilir hex kullanılıyor; değerler aynı rampanın karşılıkları.

  ── KOYU TEK YÖN ───────────────────────────────────────────────────

  Uygulamanın açık modu var, sitenin yok. Sebep: bu sayfalar çoğunlukla
  geceleyin ya da mağazadan gelen bir bağlantıyla açılıyor ve uygulamanın
  kimliği koyu. Açık mod eklemek iki katı yüzey kararı demek; karşılığı
  olmadan alınacak bir bakım yükü değil.
*/

:root {
  /* Tarayıcının kendi parçaları (kaydırma çubuğu, form kontrolleri,
     otomatik doldurma) da koyu çizilsin; yoksa sayfanın kenarında
     beyaz bir şerit kalıyor. */
  color-scheme: dark;

  /* ── YÜZEYLER ── */
  --zemin: #141210;
  --yuzey: #1e1a16;
  --yuzey-yuksek: #26211c;
  /* Girdi alanları zeminden AŞAĞI iner: form alanı "oyuk" okunmalı,
     kart ise "yükselmiş". İkisi aynı tonda olursa hiyerarşi kayboluyor. */
  --oyuk: #100e0c;

  /* ── YAZI ── */
  --metin: #f2ecdf;
  --metin-ikincil: #a79a8a;
  --metin-sonuk: #8d8579;

  /* ── ÇİZGİLER ──
     Opak hex yerine perde: farklı yüzeylerin üstünde aynı ağırlıkta
     görünüyor. Opak bir çizgi kartta doğru, zeminde fazla sert kalıyordu. */
  --cizgi: rgba(255, 250, 240, 0.1);
  --cizgi-belirgin: rgba(255, 250, 240, 0.18);

  /* ── VURGULAR ──
     Altın birincil. Diğer üçü YALNIZCA durum anlatır (olumlu / uyarı /
     bilgi); dekorasyon için kullanılmaz, yoksa renk anlamını yitirir. */
  --altin: #e8c468;
  --altin-koyu: #d4a24e;
  --altin-perde: rgba(212, 162, 78, 0.14);
  --adacayi: #96b896;
  --kor: #c4703e;
  --gece: #8fa8c9;
  --kul: #867d70;

  /* ── TİPOGRAFİ ──
     Sistem yazı tipi bilinçli: uygulama da öyle. Web yazı tipi yüklemek
     bu sayfalarda ilk boyamayı geciktirir ve karşılığında marka olarak
     hiçbir şey kazandırmaz — kimlik renkte ve düzende. */
  --govde: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── GEOMETRİ ──
     TEK köşe yarıçapı. Sayfalarda dokuz farklı değer vardı
     (2, 4, 6, 7, 8, 12, 14, 16, 28, 999px); hiçbiri bir anlam
     taşımıyordu, yalnızca farklı zamanlarda yazılmışlardı. */
  --yaricap: 12px;
  --yaricap-kucuk: 8px;
  --en: 960px;
}

/* ═══════════════════════════════════════════════════════════════════
   TEMEL
   ═══════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Hareketi azaltma tercihi SAYGI GÖRÜR.
   Uygulamada `ReducedMotionConfig` ile bütün animasyonlar kapanıyor;
   sitenin de aynısını yapmaması tutarsızlık olurdu. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.kap {
  max-width: var(--en);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 36px);
}

/* ═══════════════════════════════════════════════════════════════════
   TİPOGRAFİ
   ═══════════════════════════════════════════════════════════════════ */

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 700;
}

h1 {
  font-size: clamp(28px, 5vw, 40px);
}
h2 {
  font-size: clamp(22px, 3.4vw, 28px);
}
h3 {
  font-size: 18px;
}

p {
  color: var(--metin-ikincil);
}

a {
  color: var(--altin);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--altin-koyu);
}

/* Klavye odağı HER YERDE görünür.
   Sayfalarda `outline:none` yazan yerler vardı; klavyeyle gezen biri
   nerede olduğunu göremiyordu. */
:focus-visible {
  outline: 2px solid var(--altin-koyu);
  outline-offset: 2px;
  border-radius: var(--yaricap-kucuk);
}

code,
kbd,
samp,
.mono {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* Sayı, kimlik ve tarih için: rakamlar sabit genişlikte olunca
   tablolarda sütunlar oynamıyor. */
.sayi {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   BİLEŞENLER
   ═══════════════════════════════════════════════════════════════════ */

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: clamp(16px, 3vw, 24px);
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* dokunma hedefi — 44px altı parmakla ıskalanıyor */
  padding: 11px 20px;
  border: 1px solid var(--cizgi-belirgin);
  border-radius: var(--yaricap);
  background: var(--yuzey-yuksek);
  color: var(--metin);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dugme:hover {
  background: #2e2822;
  border-color: var(--cizgi-belirgin);
}
.dugme[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dugme-birincil {
  background: var(--altin-koyu);
  border-color: var(--altin-koyu);
  color: #1a1512; /* altın üstünde koyu yazı — beyaz burada okunmuyor */
}
.dugme-birincil:hover {
  background: var(--altin);
  border-color: var(--altin);
}

.dugme-yikici {
  border-color: rgba(196, 112, 62, 0.45);
  color: var(--kor);
  background: transparent;
}
.dugme-yikici:hover {
  background: rgba(196, 112, 62, 0.12);
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--oyuk);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-kucuk);
  color: var(--metin);
  font: inherit;
}
input::placeholder,
textarea::placeholder {
  color: var(--metin-sonuk);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--altin-koyu);
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--metin-sonuk);
}

/* Durum rozetleri — renk TEK BAŞINA anlam taşımıyor, metin de var.
   Renk körlüğü olan biri için yalnızca yeşil/kırmızı ayrımı yetersiz. */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--cizgi);
  color: var(--metin-ikincil);
}
.rozet-olumlu {
  color: var(--adacayi);
  border-color: rgba(150, 184, 150, 0.35);
}
.rozet-uyari {
  color: var(--altin);
  border-color: rgba(232, 196, 104, 0.35);
}
.rozet-kotu {
  color: var(--kor);
  border-color: rgba(196, 112, 62, 0.4);
}

hr,
.ayrac {
  border: 0;
  border-top: 1px solid var(--cizgi);
  margin: 24px 0;
}

/* Geniş içerik KENDİ İÇİNDE kayar; sayfa gövdesi yatay kaymamalı.
   Telefonda tablo taşınca bütün sayfa sağa sola oynuyordu. */
.kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--cizgi);
}
th {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--metin-sonuk);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   BELGE SAYFALARI — gizlilik, koşullar, veri silme

   Üçü de aynı türden: uzun düzyazı, başlıklar, listeler, bir iki tablo.
   Stilleri her sayfada ayrı yazılıydı ve üçü birbirinden kaymıştı
   (biri 6px köşe, biri 12px; ikisi #14100C zemin, biri #1C1712 kutu).
   Ortak katman olunca kayacak bir şey kalmıyor.

   Sınıf adları hem Türkçe hem İngilizce: sayfalar farklı zamanlarda
   yazılmış ve ikisi de kullanılmış. HTML'i toptan yeniden adlandırmak
   yerine ikisini de tanıyoruz — metin dosyalarına dokunmadan tasarım
   birleşiyor, risk sıfır.
   ═══════════════════════════════════════════════════════════════════ */

.wrap {
  /* Uzun düzyazı DAR sütunda okunur: ~760px, satır başına 75-85
     karakter. Sitenin 960px'lik pazarlama genişliği burada gözü satır
     sonunda kaybettiriyor. */
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 22px 80px;
}

.wrap h1 {
  color: var(--altin);
  font-size: 26px;
  margin: 0 0 4px;
}
.wrap h2 {
  color: var(--altin-koyu);
  font-size: 18px;
  margin: 34px 0 10px;
}
.wrap h3 {
  color: var(--metin-ikincil);
  font-size: 15px;
  margin: 20px 0 6px;
}

.wrap p,
.wrap li,
.wrap td {
  font-size: 15px;
  color: var(--metin-ikincil);
}

.wrap ol,
.wrap ul {
  padding-left: 22px;
}
.wrap li {
  padding: 4px 0;
}

/* Yürürlük tarihi / iletişim satırı — iki ad da kullanımda. */
.date,
.alt {
  color: var(--metin-sonuk);
  font-size: 13px;
  margin-bottom: 28px;
}

.divider,
.ayrac {
  border: 0;
  border-top: 1px solid var(--cizgi);
  margin: 40px 0;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--altin-perde);
  color: var(--altin);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.kutu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: 16px 18px;
  margin: 16px 0;
}
.kutu p {
  margin: 0;
}

/* İngilizce çeviri bloğu — aynı içeriğin ikinci dili, bir tık geride. */
.en {
  opacity: 0.95;
}

.wrap table {
  margin: 12px 0;
  font-size: 14px;
}
.wrap th {
  color: var(--altin-koyu);
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.wrap th,
.wrap td {
  vertical-align: top;
}

/* ── DİL ANAHTARI ──────────────────────────────────────────────────
   Her iki dilin metni de belgede duruyor; görünürlüğü tek bir
   öznitelik belirliyor. Gizleme CSS'te çünkü betik çalışmasa bile
   sayfanın tek dilde ve eksiksiz kalması gerekiyor: varsayılan
   `data-dil="tr"` işaretli geldiği için İngilizce bloklar başlangıçta
   zaten gizli.

   `!important` var çünkü gizlenen blokların bir kısmı kendi
   `display` değerini taşıyor (grid, flex); onlar olmadan gizleme
   tutmuyordu. */
html[data-dil="tr"] [data-dil="en"],
html[data-dil="en"] [data-dil="tr"] { display: none !important; }

.dil-anahtari {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--cizgi, rgba(128,128,128,0.28));
  background: var(--yuzey, rgba(20,18,16,0.72));
  backdrop-filter: blur(8px);
}
/*
  DOKUNMA HEDEFİ EN AZ 24px.

  Ölçüldüğünde düğme 34×23 px çıkıyordu: yükseklik yalnızca 11px yazı
  ve 6px dolgudan doğuyordu, bir piksel eksik (WCAG 2.2 · 2.5.8).
  Dolguyu büyütmek yerine TABAN VERİLDİ — dolgu yazı boyutuna bağlı,
  punto değişirse yükseklik yine düşer; `min-height` puntodan bağımsız.
*/
.dil-anahtari button {
  appearance: none;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 30px;
}
.dil-anahtari button[aria-pressed="true"] {
  opacity: 1;
  background: rgba(212, 162, 78, 0.18);
  color: #D4A24E;
}
.dil-anahtari button:focus-visible { outline: 2px solid #D4A24E; outline-offset: 2px; }


/*
  DÜZYAZI İÇİNDEKİ LİNKLER ALTI ÇİZİLİ.

  Genel kural `text-decoration: none` — gezinme ve düğmeler için doğru.
  Ama uzun bir gizlilik metninin ortasındaki bağlantı, yalnızca renkle
  ayrıldığında gözden kaçıyor; renk körlüğünde ise hiç ayrılmıyor
  (WCAG 1.4.1: bilgi yalnızca renkle taşınmamalı).

  Yalnızca paragraf ve liste içi bağlantılara uygulanıyor; başlıklar ve
  alt gezinme satırı bundan etkilenmiyor.
*/
.wrap p a,
.wrap li a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/*
  ── BASKI / PDF ─────────────────────────────────────────────────────

  Hukuki sayfalar koyu temada. Bir kullanici ya da kurum "PDF olarak
  kaydet" dediginde sayfa simsiyah zeminle cikiyordu: okunmasi zor ve
  yazicida kartus tuketen bir cikti.

  Bu sayfalar tam da saklanmak ve paylasilmak icin var (gizlilik metni,
  kullanim sartlari), yani basilmasi kenar durum degil beklenen kullanim.

  Baglantilarin adresi metnin yanina yaziliyor: kagitta tiklanabilir bir
  sey yok, adres gorunmezse bilgi tamamen kayboluyor.
*/
@media print {
  :root { color-scheme: light; }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .wrap {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  /* Dis baglantilarin adresi yaninda gorunsun; ic baglantilar
     (/terms gibi) kagitta anlamsiz oldugu icin haric. */
  .wrap p a[href^="http"]::after,
  .wrap li a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Ekrana ait olanlar kagida gitmiyor. */
  .dil-anahtar,
  .dugme,
  .atla-link,
  button {
    display: none !important;
  }

  /* Baslik ve paragraf sayfa sonunda ortadan bolunmesin. */
  h1, h2, h3 { break-after: avoid-page; }
  p, li { break-inside: avoid-page; }
}