/* ════════════════════════════════════════════════════════════
   MODULOR v2 — tokens.css · KONTRAST C ("Okunurluk Önce")
   Kademe 5 Adım 0 — 4 Temmuz 2026
   ─────────────────────────────────────────────────────────────
   İlkeler (devir raporu 5b):
   · Metinde şeffaflık DEĞİL gerçek renk basamakları (m1–m3)
   · Cümle taşıyan metin ≥ 7:1 (AAA) — en silik metin bile 7:1 üstü
   · Coral koyuda açılır / açıkta koyulur
   · Açık tema koyunun negatifi değil, kendi kimliği
   · Renk süs değil BİLGİ: coral = tanımlı/aktif, altın = başlık
   · rem tabanlı ölçek — sistem font ayarına saygı
   Eski token adları KORUNDU (app.css dokunulmadan çalışır);
   yeni adlar (--m1..--m3, --aksan, --odak, --oda-*) eklendi.
════════════════════════════════════════════════════════════ */

html { font-size: 100%; } /* her şey rem'e göre — sistem ölçeğiyle büyür */

/* ── KOYU TEMA (varsayılan) ─────────────────────────────── */
:root,
html.dark {
  /* Native form elemanları (select/option, date picker) koyu tema kullansın.
     Bu olmadan bazı tarayıcılar seçili <option>'u beyaz zeminde gösteriyordu
     (ör. doğum yeri "Türkiye" kutusu). */
  color-scheme: dark;
  /* Kontrast C temel paleti */
  --zemin : #0C0B12;
  --kart  : #17151F;
  --cizgi : #3A3648;
  --m1    : #F7F3EA;   /* 15.8:1 — ana metin */
  --m2    : #D9D3C6;   /* 11.6:1 — ikincil */
  --m3    : #B3ACA0;   /*  7.4:1 — en silik, hâlâ AAA */
  --aksan   : #F09A80; /* coral — koyuda açık */
  --aksan-m : #F7BCA8; /* coral metin tonu */
  --gold-rgb: 201,168,76;   /* altının RGB bileşeni — rgba(var(--gold-rgb), a) */
  --altin   : #E0C070;
  --odak    : #9CB8FF; /* focus halkası */

  /* ── Eski adlar → C değerleri (app.css uyumu) ── */
  /* Paneller hafif saydam: arka plan fonu altlarından hissedilir (%14 geçiş) */
  --bg-0 : var(--zemin);
  --bg-1 : rgba(23,21,31,.86);      /* --kart #17151F, %86 opak */
  --bg-2 : rgba(29,26,40,.86);      /* elevated #1D1A28, %86 opak */
  --bg-3 : #242031;    /* hover — opak kalır (etkileşim netliği) */

  /* ── Uçan buton (alt menüler) — zeminsiz, hâle ile yükselti ── */
  --ucan-bg      : rgba(23,21,31,.82);
  --ucan-cerceve : rgba(201,168,76,.28);
  --ucan-golge-1 : rgba(0,0,0,.6);
  --ucan-golge-2 : rgba(0,0,0,.45);
  --ucan-ic-isik : rgba(255,255,255,.07);

  --border-0 : rgba(58,54,72,.45);   /* cizgi basamakları */
  --border-1 : var(--cizgi);
  --border-2 : #4A4560;
  --border-gold: rgba(224,192,112,.30);

  --text-0 : var(--m1);
  --text-1 : var(--m2);
  --text-2 : var(--m3);
  --text-gold : var(--altin);
  --text-gold-dim: #A8905A;          /* şeffaflık değil basamak — 5:1 (yalnız süs/etiket) */

  --gold   : var(--altin);
  --gold-10: rgba(224,192,112,.10);
  --gold-20: rgba(224,192,112,.20);

  --error  : #E88A8A;
  --warn   : #D98BA6;
  --success: #8FCFA8;

  --shadow-sm : 0 2px 12px rgba(0,0,0,.35);
  --shadow-md : 0 8px 32px rgba(0,0,0,.55);
  --shadow-lg : 0 16px 64px rgba(0,0,0,.7);

  --blur-bg  : blur(16px);
  --blur-card: blur(8px);

  --dur-fast: 150ms;
  --dur-mid : 250ms;
  --dur-slow: 400ms;

  --font-cinzel   : 'Cinzel', 'Georgia', serif;
  --font-cormorant: 'Cormorant Garamond', 'Georgia', serif;
  --font-outfit   : 'Outfit', system-ui, sans-serif;

  /* Mobil standartlar (tasarım önerisi §4) */
  --dokunma : 48px;               /* min dokunma hedefi (44→48, %30 ölçekle uyumlu) */
  --nav-h   : 92px;               /* uçan alt menü yüksekliği (toast konumu için) */
  --header-h: 66px;               /* 52→66 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top   : env(safe-area-inset-top, 0px);

  /* Oda varsayılanı = Sofa (altın) */
  --oda-aksan : var(--altin);
  --oda-pasif : var(--m3);
  --oda-cizgi : var(--altin);
  --oda-hover : var(--m2);
}

/* ── AÇIK TEMA — kendi kimliği ──────────────────────────── */
html.light {
  color-scheme: light;
  --gold-rgb: 107,78,10;    /* açık zeminde okunur altın (WCAG AA) */
  --zemin : #FBF7EF;
  --kart  : #FFFFFF;
  --cizgi : #C9BFAE;
  --m1    : #16121E;   /* daha koyu — ana metin, güçlü kontrast */
  --m2    : #2E2738;   /* koyulaştırıldı — ikincil daha okunur */
  --m3    : #484054;   /* koyulaştırıldı — silik metin artık net */
  --aksan   : #A8432B; /* coral — açıkta koyu */
  --aksan-m : #8B341F;
  --altin   : #6B4E0A;   /* koyulaştırıldı: kontrast 5.62 → 7.23 */
  --odak    : #2B4AC7;

  --bg-0 : var(--zemin);
  --bg-1 : rgba(255,255,255,.86);   /* --kart beyaz, %86 opak */
  --bg-2 : rgba(243,237,226,.86);   /* #F3EDE2, %86 opak */
  --bg-3 : #EAE2D3;                 /* hover — opak kalır */

  /* ── Uçan buton (alt menüler) ── */
  --ucan-bg      : rgba(255,255,255,.86);
  --ucan-cerceve : rgba(122,90,21,.3);
  --ucan-golge-1 : rgba(58,45,20,.2);
  --ucan-golge-2 : rgba(58,45,20,.14);
  --ucan-ic-isik : rgba(255,255,255,.9);

  --border-0 : rgba(201,191,174,.5);
  --border-1 : var(--cizgi);
  --border-2 : #A89C86;
  --border-gold: rgba(107,78,10,.42);   /* çizgiler de görünür olsun */

  --text-0 : var(--m1);
  --text-1 : var(--m2);
  --text-2 : var(--m3);
  --text-gold : var(--altin);
  --text-gold-dim: #7A6636;   /* 3.47 → 5.20 · 12px başlıklar AA geçiyor */

  --gold   : var(--altin);
  --gold-10: rgba(126,94,20,.10);
  --gold-20: rgba(126,94,20,.20);

  --error  : #B23A3A;
  --warn   : #A03B62;
  --success: #2E7D4F;

  --shadow-sm : 0 2px 12px rgba(0,0,0,.08);
  --shadow-md : 0 8px 32px rgba(0,0,0,.12);
  --shadow-lg : 0 16px 64px rgba(0,0,0,.18);

  --oda-pasif : var(--m3);
  --oda-hover : var(--m2);
}

/* ── ODA RENKLERİ (v1 kimlikleri, C temellerine bağlı) ──── */
/* view section'ları data-view taşır; nav butonları data-oda ile
   aynı değişkenleri okuyabilir. */
[data-view="sofa"],   [data-oda="sofa"]   { --oda-aksan: var(--altin);  --oda-cizgi: var(--altin); }
/* Harita — gece mavisi (Zemin'den ayrı) */
html.dark  [data-view="harita"], html.dark  [data-oda="harita"],
:root      [data-view="harita"], [data-oda="harita"] {
  --oda-aksan:#7a9cd8; --oda-cizgi:#4a6ba8; --oda-pasif:rgba(122,156,216,.5); --oda-hover:rgba(122,156,216,.85);
}
html.light [data-view="harita"], html.light [data-oda="harita"] {
  --oda-aksan:#2a4a80; --oda-cizgi:#2a4a80; --oda-pasif:rgba(42,74,128,.6); --oda-hover:rgba(42,74,128,.85);
}
/* Zemin — toprak/coral (Harita'dan ayrı) */
html.dark  [data-view="zemin"], html.dark  [data-oda="zemin"],
:root      [data-view="zemin"], [data-oda="zemin"] {
  --oda-aksan:#d8a068; --oda-cizgi:#c8845a; --oda-pasif:rgba(216,160,104,.5); --oda-hover:rgba(216,160,104,.85);
}
html.light [data-view="zemin"], html.light [data-oda="zemin"] {
  --oda-aksan:#a05820; --oda-cizgi:#a05820; --oda-pasif:rgba(160,88,32,.6); --oda-hover:rgba(160,88,32,.85);
}

html.dark  [data-view="elements"], html.dark  [data-oda="elements"],
:root      [data-view="elements"], [data-oda="elements"] {
  --oda-aksan:#98b8a0; --oda-cizgi:#789880; --oda-pasif:rgba(152,184,160,.6); --oda-hover:rgba(152,184,160,.8);
}
html.light [data-view="elements"], html.light [data-oda="elements"] {
  --oda-aksan:#286040; --oda-cizgi:#286040; --oda-pasif:rgba(40,100,65,.7);  --oda-hover:rgba(40,100,65,.85);
}

html.dark  [data-view="gemoloji"], html.dark  [data-oda="gemoloji"],
:root      [data-view="gemoloji"], [data-oda="gemoloji"] {
  --oda-aksan:#b0c8f4; --oda-cizgi:#80a0e8; --oda-pasif:rgba(160,184,240,.5); --oda-hover:rgba(160,184,240,.8);
}
html.light [data-view="gemoloji"], html.light [data-oda="gemoloji"] {
  --oda-aksan:#3a5aaa; --oda-cizgi:#3a5aaa; --oda-pasif:rgba(50,70,160,.5);  --oda-hover:rgba(50,70,160,.8);
}

/* Zemin'in toprak tonu (v1 --oda-zemin-accent) — gerektiğinde: */
html.dark  [data-view="zemin"], html.dark  [data-oda="zemin"] { --oda-toprak:#c8845a; }
html.light [data-view="zemin"], html.light [data-oda="zemin"] { --oda-toprak:#8a6020; }

/* ── İKİ METİN SINIFI (rapor 5b — kimlik cümlesi kararı) ── */

/* 1) Statik içerik (Hakan'ın kalıcı metinleri: kimlik cümleleri,
      merkez tanımları, Ton & Renk). Deneme 5 "iki ton":
      gövde m2 · em = ALTIN anahtar · strong = CORAL anahtar · 600.
      Kural: blok başına en fazla 1–2 anahtar. */
.metin-statik {
  font-family: var(--font-cormorant);
  font-weight: 500;
  font-size: 1.4625rem;      /* 18px → ~23px taban (%30) */
  line-height: 1.85;
  color: var(--m2);
}
.metin-statik em {
  font-style: normal;
  font-weight: 600;
  color: var(--altin);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--altin) 45%, transparent);
  text-underline-offset: 4px;   /* vurgunun tek dayanağı renk değil */
}
.metin-statik strong {
  font-weight: 600;
  color: var(--aksan-m);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--aksan) 45%, transparent);
  text-underline-offset: 4px;
}

/* 2) AI metni (yorumlar, Günün Yansıması, WOW). Deneme 2:
      Cormorant DİK 500 · 19px · vurgu yok. İtalik terk edildi. */
.metin-ai {
  font-family: var(--font-cormorant);
  font-style: normal;
  font-weight: 500;
  font-size: 1.54375rem;    /* 19px → ~25px (%30) */
  line-height: 1.8;
  color: var(--m1);
}
.metin-ai em, .metin-ai strong { font-style: normal; font-weight: 500; color: inherit; }

/* ── ERİŞİLEBİLİRLİK ────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--odak);
  outline-offset: 2px;
  border-radius: 6px;
}

button, .cip, .sekme, [role="tab"] { min-height: var(--dokunma); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}