/* ============================================================================
   Ali Fidan — brand.css
   Marka kimliği v1.1 (4 Ağustos 2026) · Üretim: 4 Ağustos 2026
   Kaynak: MARKA_KILAVUZU.md. Bu dosya ile kılavuz çelişirse kılavuz geçerlidir.

   Yükleme sırası: site stilinden SONRA çağır ki devralma yönü doğru olsun.
   Bölüm 9 (temel öğe stilleri) mevcut siteyle çakışırsa tek başına silinebilir;
   değişkenler ve .af-* sınıfları etkilenmez.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DEĞİŞKENLER
   ------------------------------------------------------------------------ */
:root {
  /* Renk — rol adları kılavuz §1 ile birebir */
  --af-lacivert:        #0E1B2E;  /* ana zemin / koyu            */
  --af-lacivert-derin:  #0B1423;  /* koyu zemin alt tonu, hover  */
  --af-murekkep:        #16243A;  /* başlık, açık zeminde        */
  --af-govde:           #2A3340;  /* gövde metni                 */
  --af-altin:           #C29B4A;  /* vurgu — %10 tavan           */
  --af-altin-koyu:      #B08A3C;  /* yalnızca aksan buton hover  */
  --af-celik:           #51647A;  /* ikincil metin, ara ton      */
  --af-buz:             #A7BACE;  /* yalnızca KOYU zeminde       */
  --af-fildisi:         #F6F3EC;  /* varsayılan sayfa yüzeyi     */
  --af-kum:             #E8E4DA;  /* yalnızca ikinci katman      */
  --af-beyaz:           #FFFFFF;
  --af-ayrac:           #E4DFD3;  /* tablo/bölüm çizgisi         */
  --af-form-kenar:      #9C8F73;  /* beyaz üzerinde 3,19:1       */

  /* Durum */
  --af-pozitif:         #3F6B4C;
  --af-negatif:         #A63D3D;
  --af-notr:            #51647A;

  /* Veri görselleştirme — seri sırası bozulmaz */
  --af-seri-1:          #0E1B2E;
  --af-seri-2:          #C29B4A;
  --af-seri-3:          #51647A;
  --af-seri-4:          #A7BACE;
  --af-seri-5:          #8C6D33;

  /* Tipografi */
  --af-font-baslik: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --af-font-govde:  "Lato", "Helvetica Neue", Arial, sans-serif;
  /* Yedekler aynı sınıftan: Lato hiçbir koşulda serif bir yedeğe düşmez. */

  --af-h1: clamp(30px, 4.6vw, 44px);
  --af-h2: clamp(22px, 3.0vw, 28px);
  --af-h3: 17px;
  --af-metin: 16px;
  --af-kucuk: 14px;
  --af-etiket: 11px;              /* majüskül üst başlık */

  /* Boşluk — 8px temelli */
  --af-bosluk-1: 4px;   --af-bosluk-2: 8px;   --af-bosluk-3: 12px;
  --af-bosluk-4: 16px;  --af-bosluk-5: 20px;  --af-bosluk-6: 26px;
  --af-bosluk-7: 32px;  --af-bosluk-8: 40px;  --af-bosluk-9: 48px;
  --af-bosluk-10: 56px; --af-bosluk-11: 64px;

  --af-kenar-bosluk: var(--af-bosluk-11);  /* sayfa kenarı  */
  --af-bolum-arasi:  var(--af-bosluk-10);  /* bölüm arası   */
  --af-kart-ic:      var(--af-bosluk-6);   /* kart içi 24–30 */

  /* Biçim */
  --af-radius: 0;                 /* köşeler keskin — istisnası yok */
  --af-dokunma: 44px;             /* asgari dokunma / buton yüksekliği */
  --af-gecis: 140ms ease-out;
}

/* ---------------------------------------------------------------------------
   2. ODAK HALKASI
   Kılavuz odak rengini altın 2px / 2px offset olarak veriyor. Ancak altın
   açık zeminde 2,34:1 kalıyor; WCAG 1.4.11 metin dışı öğe için 3:1 ister.
   Çözüm: altın halkanın dışına 1px lacivert ikinci halka. Böylece halka hem
   açık hem koyu zeminde 3:1'i geçiyor, marka rengi de korunuyor.
   `outline: none` hiçbir yerde kullanılmaz.
   ------------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--af-altin);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--af-lacivert);
}
/* Koyu zeminde dış halka açık tonda olsun */
.af-koyu :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: 0 0 0 1px var(--af-fildisi);
}

/* ---------------------------------------------------------------------------
   3. TİPOGRAFİ
   ------------------------------------------------------------------------ */
.af-h1, .af-h2, .af-h3 { font-family: var(--af-font-baslik); font-weight: 600; color: var(--af-murekkep); margin: 0 0 var(--af-bosluk-4); }
.af-h1 { font-size: var(--af-h1); line-height: 1.15; letter-spacing: -0.4px; }
.af-h2 { font-size: var(--af-h2); line-height: 1.25; letter-spacing: -0.2px; }
.af-h3 { font-size: var(--af-h3); line-height: 1.35; letter-spacing: 0; }

.af-metin  { font-size: var(--af-metin); line-height: 1.75; }
.af-kucuk  { font-size: var(--af-kucuk); line-height: 1.65; color: var(--af-celik); }

/* Üst başlık / etiket — altının serbest olduğu tek metin yeri değil:
   koyu zeminde altın, açık zeminde çelik mavi kullanılır. */
.af-etiket {
  font-family: var(--af-font-baslik);
  font-size: var(--af-etiket);
  font-weight: 600;
  line-height: 2;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-celik);
}
.af-koyu .af-etiket { color: var(--af-altin); }

/* Sayı biçimi: ondalık virgül, binlik nokta. Tablolarda sütun hizası için. */
.af-sayi { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   4. YÜZEYLER
   Fildişi varsayılan yüzey; Kum yalnızca ikinci katman.
   Kum üzerine Fildişi kart konmaz — bu yüzden .af-kart iç içe kullanılmaz.
   ------------------------------------------------------------------------ */
.af-koyu   { background: var(--af-lacivert); color: var(--af-beyaz); }
.af-koyu .af-h1, .af-koyu .af-h2, .af-koyu .af-h3 { color: var(--af-beyaz); }
.af-koyu .af-kucuk { color: var(--af-buz); }

.af-kart {
  background: var(--af-kum);
  padding: var(--af-kart-ic);
  border-radius: var(--af-radius);
}

/* Altın vurgu çizgisi — bölüm ayracı, başlık altı */
.af-cizgi { width: 56px; height: 2px; background: var(--af-altin); border: 0; margin: var(--af-bosluk-4) 0; }
.af-ayrac { border: 0; border-top: 1px solid var(--af-ayrac); margin: var(--af-bolum-arasi) 0; }

/* ---------------------------------------------------------------------------
   5. BAĞLANTI
   Kılavuz hover'ı altın veriyor. Altın metin açık zeminde 2,34:1 olduğundan
   metnin kendisi lacivert kalır, altına çekilen çizgi altına döner: marka
   davranışı korunur, okunabilirlik AA'nın altına düşmez.
   Kılavuzun harfi harfine uygulanması istenirse §5-B'yi aç.
   ------------------------------------------------------------------------ */
.af-link, .af-govde-alan a {
  color: var(--af-lacivert);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--af-gecis), color var(--af-gecis);
}
.af-link:hover, .af-govde-alan a:hover {
  text-decoration-color: var(--af-altin);
  text-decoration-thickness: 2px;
}
.af-koyu .af-link { color: var(--af-beyaz); }
.af-koyu .af-link:hover { color: var(--af-altin); }   /* koyu zeminde 6,65:1 — serbest */

/* §5-B — kılavuzun birebir uygulaması (açık zeminde AA altına düşer)
.af-link:hover { color: var(--af-altin); }
*/

/* ---------------------------------------------------------------------------
   6. BUTONLAR
   Yükseklik 44px, yatay dolgu 24px, radius 0.
   ------------------------------------------------------------------------ */
.af-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--af-dokunma);
  padding: 0 var(--af-bosluk-6);
  border: 1px solid transparent;
  border-radius: var(--af-radius);
  font-family: var(--af-font-baslik);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--af-gecis), color var(--af-gecis), border-color var(--af-gecis);
}

.af-btn--birincil { background: var(--af-lacivert); color: var(--af-beyaz); }
.af-btn--birincil:hover { background: var(--af-lacivert-derin); }

.af-btn--ikincil { background: transparent; color: var(--af-lacivert); border-color: var(--af-lacivert); }
.af-btn--ikincil:hover { background: var(--af-fildisi); }

/* Aksan buton: hover'da metin LACİVERT KALIR — beyaza dönmez (2,60:1). */
.af-btn--aksan { background: var(--af-altin); color: var(--af-lacivert); }
.af-btn--aksan:hover { background: var(--af-altin-koyu); color: var(--af-lacivert); }

/* Koyu zeminde ikincil butonun kenarı görünür kalsın */
.af-koyu .af-btn--ikincil { color: var(--af-beyaz); border-color: var(--af-beyaz); }
.af-koyu .af-btn--ikincil:hover { background: rgba(255,255,255,0.08); }

/* Pasif durum — kılavuzda tanımlı değil, bu pakette öneriliyor.
   Kum zemin + çelik mavi metin: 4,79:1. */
.af-btn[disabled], .af-btn[aria-disabled="true"] {
  background: var(--af-kum);
  color: var(--af-celik);
  border-color: var(--af-kum);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   7. FORM
   ------------------------------------------------------------------------ */
.af-alan { display: block; margin-bottom: var(--af-bosluk-5); }

.af-etiket-alan {
  display: block;
  margin-bottom: var(--af-bosluk-2);
  font-family: var(--af-font-govde);
  font-size: var(--af-kucuk);
  font-weight: 700;
  color: var(--af-murekkep);
}

.af-girdi, .af-secim, .af-metin-kutusu {
  display: block;
  width: 100%;
  min-height: var(--af-dokunma);
  padding: 10px var(--af-bosluk-3);
  background: var(--af-beyaz);
  border: 1px solid var(--af-form-kenar);
  border-radius: var(--af-radius);
  font-family: var(--af-font-govde);
  font-size: var(--af-metin);
  line-height: 1.5;
  color: var(--af-govde);
}
.af-metin-kutusu { min-height: 120px; resize: vertical; }

.af-girdi:hover, .af-secim:hover, .af-metin-kutusu:hover { border-color: var(--af-celik); }

/* Odak: 2px altın kenarlık + §2'deki halka birlikte çalışır */
.af-girdi:focus-visible, .af-secim:focus-visible, .af-metin-kutusu:focus-visible {
  border-color: var(--af-altin);
}

.af-girdi::placeholder, .af-metin-kutusu::placeholder { color: var(--af-celik); opacity: 1; }

/* Hata — renk tek başına bilgi taşımaz, metinle birlikte verilir */
.af-alan--hata .af-girdi,
.af-alan--hata .af-secim,
.af-alan--hata .af-metin-kutusu { border-color: var(--af-negatif); border-width: 2px; }

.af-hata-metni { display: block; margin-top: var(--af-bosluk-2); font-size: var(--af-kucuk); color: var(--af-negatif); }
.af-ipucu      { display: block; margin-top: var(--af-bosluk-2); font-size: var(--af-kucuk); color: var(--af-celik); }

.af-girdi[disabled], .af-secim[disabled], .af-metin-kutusu[disabled] {
  background: var(--af-kum); color: var(--af-celik); cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   8. TABLO, ROZET, DURUM
   ------------------------------------------------------------------------ */
.af-tablo { width: 100%; border-collapse: collapse; font-size: var(--af-kucuk); }
.af-tablo th {
  background: var(--af-lacivert); color: var(--af-beyaz);
  font-family: var(--af-font-baslik); font-weight: 600;
  text-align: left; padding: var(--af-bosluk-3) var(--af-bosluk-4);
}
.af-tablo td { padding: var(--af-bosluk-3) var(--af-bosluk-4); border-bottom: 1px solid var(--af-ayrac); }
.af-tablo tbody tr:nth-child(odd)  { background: var(--af-beyaz); }
.af-tablo tbody tr:nth-child(even) { background: var(--af-fildisi); }
.af-tablo .af-sag { text-align: right; font-variant-numeric: tabular-nums; }

.af-rozet {
  display: inline-block; padding: 3px 10px;
  background: var(--af-lacivert); color: var(--af-beyaz);
  font-family: var(--af-font-baslik); font-size: var(--af-etiket);
  font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  border-radius: var(--af-radius);
}
/* Altın rozette metin daima lacivert (bağıl parlaklık 0,354 > 0,20). */
.af-rozet--altin { background: var(--af-altin); color: var(--af-lacivert); }

.af-pozitif { color: var(--af-pozitif); }
.af-negatif { color: var(--af-negatif); }
.af-notr    { color: var(--af-notr); }
/* Değer daima işaretiyle yazılır: +%12,5 / −%4,2 */

/* ---------------------------------------------------------------------------
   10. DUYARLI DAVRANIŞ
   ------------------------------------------------------------------------ */
.af-kap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--af-kenar-bosluk); }

@media (max-width: 640px) {
  :root { --af-kenar-bosluk: var(--af-bosluk-5); --af-bolum-arasi: var(--af-bosluk-8); }
  .af-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}