/* =========================================================
   evmora — Ortak Tema Sistemi
   Yazılım & Tasarım: Beyribey Bilişim
   5 tema: 3 açık (komur, orman, bordo) + 2 koyu (gece, antrasit)
   Tema html[data-theme] ile değişir; panelden seçilen tema
   localStorage'a yazılır ve site ön yüzüne yansır.
   ========================================================= */

/* ---- Açık tema 1: Kömür & Kehribar (VARSAYILAN) ---- */
:root,
html[data-theme="komur"]{
  --bg:#FAF7F2;        --surface:#FFFFFF;     --surface-2:#F2ECE3;
  --text:#1B1A17;      --muted:#6E665B;       --border:#E7E0D5;
  --accent:#C75A1B;    --accent-ink:#FFFFFF;  --accent-soft:#F7E6D7;
  --chrome:#1C1A17;    --chrome-ink:#F7F3EC;  --chrome-muted:#B6ADA0;
  --ok:#1F7A4D;        --warn:#C0303A;        --star:#E0A33E;
  --shadow:0 1px 2px rgba(20,16,10,.06), 0 8px 24px rgba(20,16,10,.06);
  --radius:16px;       --is-dark:0;
}
/* ---- Açık tema 2: Orman ---- */
html[data-theme="orman"]{
  --bg:#F4F7F4;        --surface:#FFFFFF;     --surface-2:#E8F0E9;
  --text:#15201A;      --muted:#5C6B61;       --border:#DBE6DD;
  --accent:#1F7A4D;    --accent-ink:#FFFFFF;  --accent-soft:#DDEFE3;
  --chrome:#14271C;    --chrome-ink:#EAF3EC;  --chrome-muted:#9FB6A7;
  --ok:#1F7A4D;        --warn:#C0303A;        --star:#D9930F;
  --is-dark:0;
}
/* ---- Açık tema 3: Bordo (Evgör tarzı) ---- */
html[data-theme="bordo"]{
  --bg:#FBF5F5;        --surface:#FFFFFF;     --surface-2:#F6E9EA;
  --text:#211517;      --muted:#715A5D;       --border:#ECDADC;
  --accent:#C0303A;    --accent-ink:#FFFFFF;  --accent-soft:#F7DEE0;
  --chrome:#7E1620;    --chrome-ink:#FCEFF0;  --chrome-muted:#E2A9AE;
  --ok:#1F7A4D;        --warn:#8E1117;        --star:#E0A33E;
  --is-dark:0;
}
/* ---- Koyu tema 1: Gece ---- */
html[data-theme="gece"]{
  --bg:#14161A;        --surface:#1C1F25;     --surface-2:#232831;
  --text:#ECEFF4;      --muted:#9AA3B0;       --border:#2E343E;
  --accent:#E0A33E;    --accent-ink:#1B1405;  --accent-soft:#3A2F18;
  --chrome:#0E1013;    --chrome-ink:#F3F5F9;  --chrome-muted:#7F8794;
  --ok:#4FBE85;        --warn:#E06A72;        --star:#E0A33E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  --is-dark:1;
}
/* ---- Koyu tema 2: Antrasit ---- */
html[data-theme="antrasit"]{
  --bg:#101314;        --surface:#181C1E;     --surface-2:#1F2528;
  --text:#E8EEEE;      --muted:#8FA0A1;       --border:#283032;
  --accent:#2BB3A3;    --accent-ink:#04231F;  --accent-soft:#11302C;
  --chrome:#0A0C0D;    --chrome-ink:#EAF2F1;  --chrome-muted:#788584;
  --ok:#34C9A6;        --warn:#E2716F;        --star:#E0A33E;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --is-dark:1;
}

*{box-sizing:border-box}
*,*::before,*::after{ min-width:0; }     /* flex/grid çocuklarının taşmasını önler */
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px; line-height:1.55; letter-spacing:-.005em;
  overflow-x:hidden; max-width:100%;
  transition:background .25s ease, color .25s ease;
}
img,svg,video,canvas{ max-width:100%; }
h1,h2,h3,h4,.display{ font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif; letter-spacing:-.02em; line-height:1.1; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 18px; }

/* Yardımcı */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:12px; padding:13px 18px; font-weight:700;
  font-size:15px; transition:transform .08s ease, filter .15s ease, background .15s; }
.btn:active{ transform:translateY(1px); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ filter:brightness(1.05); }
.btn-ghost{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-block{ width:100%; }
.muted{ color:var(--muted); }
.star{ color:var(--star); }

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