/* ==========================================================================
   ui_modern.css — PROTOCOL UI_MODERN_V1 (üretildi · elle düzenlemeyin).
   Kaynak: ui_modern.py · token'lar static/vision.css'ten var() ile KULLANILIR,
   burada YENİDEN TANIMLANMAZ.
   ========================================================================== */

/* 1) @layer — katman sırası: çakışma önleme (reset · base · bilesen · yardimci). */
@layer reset, base, bilesen, yardimci;

@layer reset {
  .um-kap *, .um-kap *::before, .um-kap *::after { box-sizing: border-box; }
  .um-kap { -webkit-text-size-adjust: 100%; }
}

@layer base {
  html { scroll-behavior: smooth; }
  body { text-rendering: optimizeLegibility; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  h1, h2, h3, .baslik { line-height: 1.2; }
}

@layer bilesen {
  /* 2) aspect-ratio — görsel oranları (CLS'i sıfırlar). */
  .kart-medya { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 12px; }
  .avatar     { aspect-ratio: 1 / 1; width: 44px; border-radius: 50%; object-fit: cover; }
  .vitrin-4-3 { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
  .hero-21-9  { aspect-ratio: 21 / 9; width: 100%; object-fit: cover; }

  /* 3) container-type — container query (bileşen kendi genişliğine göre uyarlanır). */
  .kart-kap { container-type: inline-size; container-name: kart; }
  .kart { display: grid; gap: 16px; grid-template-columns: 1fr; }
  @container kart (min-width: 400px) {
    .kart { grid-template-columns: 1fr 1fr; }
  }
  @container kart (min-width: 720px) {
    .kart { grid-template-columns: 1fr 1fr 1fr; }
  }

  /* 4) scroll-snap — yatay kaydırma (branş kartları · vitrin şeridi). */
  .kaydirma {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding: 16px; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .kaydirma > * { scroll-snap-align: start; scroll-margin: 16px; }

  /* 5) text-wrap: balance — başlık dengesi (son kelime tek başına kalmaz). */
  h1, h2, h3, .baslik, .um-baslik { text-wrap: balance; }
  p, li, .metin { text-wrap: pretty; }

  /* 6) @starting-style — giriş animasyonu (JS'siz · yeni element görünümü). */
  .modal, dialog[open] {
    opacity: 1; transform: translateY(0);
    transition: opacity .3s ease, transform .3s ease;
    @starting-style { opacity: 0; transform: translateY(12px); }
  }

  /* 7) color-mix() — token türetme (yeni renk tanımlamadan ton üretir). */
  .soft        { background: color-mix(in oklab, var(--gold) 12%, transparent); }
  .soft-bronze { background: color-mix(in oklab, var(--bronze) 16%, transparent); }
  .cizgi       { border: 1px solid color-mix(in oklab, var(--line) 70%, transparent); }
  .rozet-ok    { color: var(--ok); background: color-mix(in oklab, var(--ok) 14%, transparent); }

  /* 8) :has() — ebeveyn seçici (çocuğa göre ebeveyni biçimle). */
  .kart:has(img) { padding: 0; }
  .kart:has(.kart-medya) { overflow: hidden; }
  .alan:has(input:focus-visible) { border-color: var(--gold); }

  /* 10) focus-visible — erişilebilir odak halkası (klavye kullanıcısı). */
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .btn:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 8px;
  }

  /* Dokunma hedefi ≥44px (Apple HIG) — mobil ergonomi. */
  .btn, button, a.btn, .um-dokunma { min-height: 44px; min-width: 44px; }
}

@layer yardimci {
  /* Motion YEDEK: CDN yüklenmezse bu CSS animasyon devreye girer (fail-soft). */
  @keyframes giris   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes girisYan { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
  .anim-giris     { animation: giris .35s ease-out both; }
  .anim-giris-yan { animation: girisYan .35s ease-out both; }
  .um-reveal      { opacity: 1; transition: opacity .4s ease; }
  .um-reveal.um-bekle { opacity: 0; }
}

/* 9) prefers-reduced-motion — animasyon kapatma (ZORUNLU erişilebilirlik).
   Hareket hassasiyeti olan kullanıcı için TÜM animasyon/geçiş devre dışı. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}