/* ============================================================
   PROJE ÖN KONTROL
   Sol sütun form (yapışkan), sağ sütun sekmeli sonuç.
   Renkler styles.css'teki --durum-* değişkenlerinden gelir;
   bu dosyada YENİ RENK TANIMLANMAZ (CLAUDE.md 7.3).
   ============================================================ */

.ok-duzen {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.ok-form-sutun {
  position: sticky;
  top: var(--space-6);
  max-height: calc(100dvh - var(--space-12));
  overflow-y: auto;
  padding-right: var(--space-2);
}

/* ---------- Sorumluluk metinleri ---------- */
/* Spec 6.2: bu metinler GÖRÜNÜR olmalı, gizli bir sayfaya saklanmaz. */

.ok-sorumluluk {
  border-left: 3px solid var(--line-strong);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-muted);
}

.ok-sorumluluk strong { color: var(--ink); }

.ok-kapsam {
  border-left: 3px solid var(--durum-uyari);
  background: var(--durum-uyari-bg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ok-kapsam h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--durum-uyari-metin);
  margin: 0 0 var(--space-2);
}

.ok-kapsam ul { margin: var(--space-2) 0 0; padding-left: var(--space-4); }
.ok-kapsam li { margin-bottom: var(--space-1); }

/* ---------- Form ---------- */

.ok-grup {
  border: 1px solid var(--line);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
    border-radius: var(--radius-kart);
    box-shadow: var(--golge);
    background: var(--cam-zemin);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
    border-color: var(--cam-kenar);
    box-shadow: var(--golge), var(--cam-ic-isik);
  }

.ok-grup > h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-subtle);
  margin: 0 0 var(--space-3);
  font-weight: var(--w-orta);
}

.ok-alan { margin-bottom: var(--space-4); }
.ok-alan:last-child { margin-bottom: 0; }

.ok-alan > label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: none;      /* global label kuralını sıfırla */
  letter-spacing: normal;
  font-weight: var(--w-orta);
  color: var(--ink);
}

.ok-alan input[type="text"],
.ok-alan input[type="number"],
.ok-alan select {
  width: 100%;
}

.ok-birim {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-subtle);
  margin-left: var(--space-1);
}

.ok-onay { display: flex; align-items: flex-start; gap: var(--space-2); }
.ok-onay input { margin-top: 3px; flex: 0 0 auto; }

/* OKUNAMAYAN DEĞER · kutuda bir şey yazıyor ama araç onu okuyamıyor.
   Renk tek başına anlam taşımaz (bölüm 7.3): kenarlığın yanında her
   zaman `.ok-alan-hata` metni de bulunur. */
.ok-alan.gecersiz input,
.ok-alan.gecersiz select {
  border-color: var(--durum-hata);
}

.ok-alan-hata {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--durum-hata);
  background: var(--durum-hata-bg);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink);
}

/* ÖRNEK DOLDURMA · formun ilk satırı. Boş formda otuza yakın kutu
   duruyor ve hiçbiri neyle başlanacağını söylemiyordu (spec 8.5). */
.ok-ornek {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.ok-ornek-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.ok-ornek-dugmeler .btn { font-size: var(--text-xs); }

/* "Hangi durumda" açıklaması · üslup kuralı 4 */
.ok-nicin {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-left: 2px solid var(--line);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: normal;
}
.ok-nicin.acik { display: block; }
.ok-nicin em { display: block; margin-top: var(--space-2); font-style: normal; color: var(--ink-subtle); }

.ok-nicin-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-subtle);
  width: 18px; height: 18px;
  line-height: 1;
  padding: 0;
  margin-left: var(--space-2);
  border-radius: 50%;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}
.ok-nicin-btn:hover { color: var(--ink); border-color: var(--ink); background: none; }

/* ---------- Özet şeridi ---------- */

.ok-ozet {
  border: 1px solid var(--line-strong);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
    border-radius: var(--radius-kart);
    box-shadow: var(--golge);
    background: var(--cam-zemin);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
    border-color: var(--cam-kenar);
    box-shadow: var(--golge), var(--cam-ic-isik);
  }

.ok-ozet-kunye { font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-muted); }

.ok-sayaclar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}

.ok-sayac { font-size: var(--text-sm); }
.ok-sayac b { font-family: var(--font-mono); font-size: var(--text-lg); display: block; }

.ok-eylemler { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Sekmeler ---------- */

.ok-sekmeler {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.ok-sekme {
  flex: 1;
  /* DARALABILMELI. Flex ogesinin varsayilan `min-width: auto` degeri onu
     kendi en-az-icerik genisliginin altina inmekten alikoyar; sekme sayisi
     dortten fazla oldugunda cubuk sayfayi YATAY KAYDIRIYORDU. Modul 2 ile
     dorduncu sekme eklendiginde 1024 px'te 37 px tasma olctu. */
  min-width: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: normal;
  color: var(--ink-subtle);
  cursor: pointer;
  display: block;
  /* Uzun bir sekme adi kirilarak iki satira insin, kutuyu tasirmasin. */
  overflow-wrap: anywhere;
}
.ok-sekme:hover { color: var(--ink); background: none; }
.ok-sekme.etkin {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
  font-weight: var(--w-baslik);
}

/* ---------- Kartlar ---------- */

.ok-kart {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
    border-radius: var(--radius-ic);
    box-shadow: var(--golge);
    background: var(--cam-zemin);
    -webkit-backdrop-filter: var(--cam-bulanik);
    backdrop-filter: var(--cam-bulanik);
    border-color: var(--cam-kenar);
    box-shadow: var(--golge), var(--cam-ic-isik);
  }

.ok-kart-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.ok-rozet {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--w-orta);
  white-space: nowrap;
}

.ok-kart h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--w-baslik);
}

/* Durum renkleri. RENK TEK BAŞINA ANLAM TAŞIMAZ: her kartta durum
   metni de yazılıdır (spec 11.9). */
.ok-kart.zorunlu       { border-left-color: var(--ink); }
.ok-kart.zorunlu .ok-rozet { color: var(--ink); }
/* CAKISMA DUZELTMESI (8 Eylul 2026). `--accent` artik `--ink` ile ayni
   degerde; bu iki kural once `zorunlu` ile AYNI kenar rengini uretiyordu
   ve iki zit hukuki sonuc gorsel olarak OZDES oluyordu. Monokromda ayrim
   ekseni DEGER: zorunlu #141414 > zorunluDegil #4B4944 > belirsiz #66645F.
   Rozet metni zaten her zaman yazili, yani renk tek basina anlam tasimiyor.
   (Bu uc deger 8 Eylul 2026'da WCAG AA icin koyulastirildi; kademeler
   arasi ayrim 2,00:1'den 1,52:1'e dustu ve gerekcesi styles.css'te.
   Ayrim daralinca rozet METNI daha da onemli hale geldi, kaldirilamaz.) */
.ok-kart.zorunluDegil  { border-left-color: var(--ink-muted); }
.ok-kart.zorunluDegil .ok-rozet { color: var(--ink-muted); }
.ok-kart.kosullu       { border-left-color: var(--durum-uyari); background: var(--durum-uyari-bg); }
.ok-kart.kosullu .ok-rozet { color: var(--durum-uyari-metin); }
.ok-kart.belirsiz      { border-left-color: var(--ink-subtle); }
.ok-kart.belirsiz .ok-rozet { color: var(--ink-subtle); }
.ok-kart.bilgi         { border-left-color: var(--ink-muted); background: var(--accent-soft); }
.ok-kart.bilgi .ok-rozet { color: var(--ink-muted); }
.ok-kart.gerekmiyor    { border-left-color: var(--line); opacity: 0.55; }
.ok-kart.gerekmiyor .ok-rozet { color: var(--ink-subtle); }

.ok-gerekce { font-size: var(--text-sm); line-height: 1.7; margin: 0 0 var(--space-3); }

.ok-alinti {
  border-left: 2px solid var(--line);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-muted);
  font-style: italic;
}

.ok-notlar { margin: var(--space-3) 0 0; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.7; color: var(--ink-muted); }
.ok-notlar li { margin-bottom: var(--space-2); }

/* ---------- Hesap kartı (Modül 2) ---------- */
/* Yeni renk tanımlanmaz; kart durumları yukarıdaki --durum-* ölçeğini
   kullanır. Buradaki kurallar yalnız DÖKÜM tablosunun düzenidir. */

.ok-hesap-sonuc {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--w-guclu);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

.ok-dokum {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}
.ok-dokum th {
  text-align: left;
  vertical-align: top;
  width: 38%;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--line);
  font-weight: var(--w-orta);
  color: var(--ink-muted);
}
.ok-dokum td {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}
.ok-dokum code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  /* Uzun bir ifade dar ekranda satırı taşırmasın; kart kendi içinde kayar. */
  overflow-wrap: anywhere;
}
.ok-dokum b { font-weight: var(--w-guclu); white-space: nowrap; }
.ok-dokum small {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-subtle);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.ok-kalem { margin: var(--space-3) 0; }
.ok-kalem > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--w-orta);
  padding: var(--space-1) 0;
}
.ok-kalem-baslik {
  font-size: var(--text-sm);
  font-weight: var(--w-orta);
  margin: var(--space-3) 0 0;
}

/* ---------- Hata bildirimi (spec 6.4) ---------- */
/* Kartın en altında, dayanak satırından sonra. Kasıtlı olarak SÖNÜK:
   bir kartın asıl işi sonucu söylemek, bildirim bağlantısı ise arandığında
   bulunması gereken bir çıkış. */

.ok-bildirim { margin-top: var(--space-3); }
.ok-bildirim > summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--ink-subtle);
  padding: var(--space-1) 0;
}
.ok-bildirim > summary:hover { color: var(--ink); }
.ok-bildirim-govde {
  border-top: 1px solid var(--line);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.ok-bildirim-metin {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.6;
  padding: var(--space-2);
  border: 1px solid var(--grafik-sinir);
  background: var(--bg);
  color: var(--ink-muted);
  resize: vertical;
}
.ok-bildirim-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.ok-bildirim-adres {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-subtle);
}

/* ---------- Yerel şartlar (spec 3.2) ---------- */

.ok-yerel-liste { margin: var(--space-3) 0 0; padding-left: var(--space-4); }
.ok-yerel-liste li {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.ok-yerel-liste strong { display: block; }
.ok-yerel-liste span { color: var(--ink-muted); }
.ok-yerel-liste em {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-subtle);
  font-style: normal;
  font-size: var(--text-xs);
}

.ok-uyari-satiri {
  border-left: 3px solid var(--durum-uyari);
  background: var(--durum-uyari-bg);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ok-uyari-satiri.hata { border-left-color: var(--durum-hata); background: var(--durum-hata-bg); }

.ok-atlanirsa {
  border-left: 3px solid var(--durum-hata);
  background: var(--durum-hata-bg);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ok-sure {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin: var(--space-2) 0;
}
.ok-sure b { color: var(--ink); }

.ok-dayanak {
  border-top: 1px solid var(--line);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink-subtle);
  line-height: 1.7;
}
.ok-dayanak a { color: var(--ink-muted); }
.ok-bayat { color: var(--durum-uyari-metin); }

/* ---------- Süreç aşamaları ---------- */

.ok-asama { margin-bottom: var(--space-6); }

.ok-asama > summary {
  cursor: pointer;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--w-baslik);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.ok-asama > summary::-webkit-details-marker { display: none; }
.ok-asama-sayac { font-weight: var(--w-normal); color: var(--ink-subtle); }
.ok-asama > div { padding-top: var(--space-4); }

.ok-onay-kutu { display: flex; align-items: flex-start; gap: var(--space-3); }
.ok-onay-kutu > input { margin-top: 6px; flex: 0 0 auto; }
.ok-onay-kutu > div { flex: 1 1 auto; min-width: 0; }
.ok-kart.tamam { opacity: 0.5; }
.ok-kart.tamam h3 { text-decoration: line-through; }

.ok-onkosul { font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-subtle); margin: var(--space-2) 0 0; }

/* ---------- Boş durum ---------- */

.ok-bos {
  border: 1px dashed var(--line);
  padding: var(--space-8);
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ---------- Dar ekran ---------- */

/* Dort sekme dar bir sonuc sutununda sigmiyor; harf araligi once dusuyor,
   sonra yazi kuculuyor. Sekme adlari kisaltilmiyor: bir sekmenin metni
   DURUM soyler ve kisaltilmis bir ad neyi gosterdigini gizler. */
@media (max-width: 1200px) {
  .ok-sekme { letter-spacing: 0.02em; padding: var(--space-3) var(--space-1); }
}

@media (max-width: 900px) {
  .ok-duzen { grid-template-columns: 1fr; }
  .ok-form-sutun { position: static; max-height: none; overflow: visible; padding-right: 0; }
  /* 10px -> 11px (8 Eylul 2026). 10px, dort sekmeyi tek satirda tutmak
     icin secilmisti. Olculdu: 11px'te de tasma YOK ve kirpma YOK; 375
     px'te yalniz "Yukumlulukler" iki satira sariyor ve sekme yuksekligi
     30'dan 44 px'e cikiyor. 6C.14 bu cubukta onceligi zaten koymustu:
     sekme adi KISALTILMAZ, cunku bir sekmenin metni durum soyler.
     Iki satir, kucultulmus bir ad ya da okunmayan bir satirdan iyidir. */
  .ok-sekme { font-size: 11px; padding: var(--space-2) var(--space-1); }
}

/* Dokum tablosu dar ekranda KATA DIZILIR. Iki kolonu 375 px'e sikistirmak
   etiketi de aritmetigi de okunmaz yapiyordu; tahmin tablosunda da aynisi
   yapilmisti (CLAUDE.md 6.16). Tablo kendi icinde kaymiyor, kata diziliyor:
   kaydirma sarmalayicisi iceriği ekran disinda birakir ve "sayfa yatay
   kaymiyor" kontrolu bunu GORMEZ. */
@media (max-width: 640px) {
  .ok-dokum, .ok-dokum tbody, .ok-dokum tr, .ok-dokum th, .ok-dokum td {
    display: block;
    width: auto;
  }
  .ok-dokum tr { border-top: 1px solid var(--line); padding: var(--space-2) 0; }
  .ok-dokum th { border-top: none; padding: 0 0 var(--space-1); }
  .ok-dokum td { border-top: none; padding: 0; }
}

/* ---------- Yazdırma ---------- */
/* Aracın somut çıktıya dönüştüğü nokta (spec 11.8). Sol panel, form ve
   sekme düğmeleri düşer; BÜTÜN sekmeler açılır ve alt alta basılır. */

@media print {
  .side-panel, .sidebar-backdrop, .mobil-menu-btn, .atlama-baglantisi,
  .ok-form-sutun, .ok-sekmeler, .ok-eylemler, .ok-nicin-btn,
  /* Bildirim paneli yazdırılan kontrol listesinde işe yaramaz: kopyalama
     düğmesi kâğıtta çalışmaz ve metin listeyi iki katına çıkarır. */
  .ok-bildirim,
  .scroll-top-btn { display: none !important; }

  .app-layout, .app-content { display: block; max-width: none; margin: 0; padding: 0; }
  .ok-duzen { display: block; }
  .ok-bolum[hidden] { display: block !important; }

  .ok-kart, .ok-ozet, .ok-kapsam, .ok-sorumluluk {
    break-inside: avoid;
    border-color: #999;
    background: #fff;
  }
  .ok-asama > div { display: block !important; }
  body { font-size: 10pt; }
  a[href]::after { content: ""; }
}