/* ETESIO SMS - KIMLIK KATMANI (8 Eyl 2026, logoya gore)
   Renk logodan: mavi degrade #4fa8de -> #30358c, yazi #1f1f25
   (Z:\5-Etesio_Grafik\etesio-sms). Ana ton logonun koyu ucu (lacivert 237),
   acik ucu (gok mavisi 202) vurgu ve degrade icin. Sicak ikincil ton yalniz
   uyari/rozet dilinde.

   DUZEN DILI Is Yonetim Pro panelinden (Enver, 8 Eyl 2026: "iyp paneli gibi
   gorunsun"): beyaz ust cubuk, acik sol menu, etkin ogede sol serit, ince
   kenarli kart, kucuk buyuk harf tablo basligi.

   Degisken adlari platform kimligiyle AYNI (--mor-*, --altin-*) ki bilesenler
   ortak kalsin; degerler bu urune ozel. Bilesenlerde elle renk yazilmaz. */

:root {
  color-scheme: light;

  /* ── Marka: logo mavisi ── */
  --mor-900: #151a4a;
  --mor-800: #22276b;
  --mor-700: #30358c;   /* logo koyu ucu */
  --mor-600: #3a4aa8;
  --mor-500: #4372c4;
  --mor-400: #4fa8de;   /* logo acik ucu */
  --mor-300: #8cc6ea;
  --mor-200: #c5e2f4;
  --mor-100: #eaf3fb;

  /* ── Ikincil: sicak vurgu, yalniz dikkat cekmek icin ── */
  --altin-600: #9a5a1e;
  --altin-500: #c8782c;
  --altin-400: #dc9a4f;
  --altin-300: #eabf87;
  --altin-100: #fbf0e0;

  /* ── Anlam ── */
  --ana: var(--mor-700);
  --ana-koyu: var(--mor-800);
  --ana-acik: var(--mor-400);
  --vurgu: var(--altin-500);
  --vurgu-acik: var(--altin-300);
  --degrade: linear-gradient(90deg, #4fa8de, #30358c);

  --basari: #2f7a55;
  --uyari: #a76b12;
  --tehlike: #a33a3a;

  /* ── Zemin ve metin ── */
  --zemin: #ffffff;
  --zemin-2: #f5f7fb;
  --zemin-3: #eaeef5;
  --kart: #ffffff;
  --kenar: #dfe4ee;
  --kenar-koyu: #c9d1e0;

  --metin: #1f1f25;     /* logo yazi rengi */
  --metin-2: #4a4f5e;
  --metin-3: #767b8c;
  --metin-ters: #ffffff;

  /* ── Tipografi ── */
  --yazi-baslik: "Manrope", "Segoe UI", system-ui, sans-serif;
  --yazi-govde: "Inter", "Segoe UI", system-ui, sans-serif;
  --yazi-veri: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --olcek-1: 0.78rem;
  --olcek-2: 0.875rem;
  --olcek-3: 1rem;
  --olcek-4: 1.125rem;
  --olcek-5: 1.35rem;
  --olcek-6: 1.7rem;
  --olcek-7: 2.2rem;
  --olcek-8: 2.9rem;
  --olcek-9: 3.6rem;

  --aralik-1: 0.25rem;
  --aralik-2: 0.5rem;
  --aralik-3: 0.75rem;
  --aralik-4: 1rem;
  --aralik-5: 1.5rem;
  --aralik-6: 2rem;
  --aralik-7: 3rem;
  --aralik-8: 4rem;
  --aralik-9: 6rem;

  --kose-kucuk: 5px;
  --kose-orta: 8px;
  --kose-buyuk: 12px;
  --kose-tam: 999px;

  --golge-1: 0 1px 2px rgba(31, 31, 37, .05);
  --golge-2: 0 4px 14px rgba(31, 31, 37, .08);
  --golge-3: 0 12px 36px rgba(31, 31, 37, .12);

  --gecis: 160ms cubic-bezier(.4, 0, .2, 1);
  --kapsayici: 1180px;
}

:root[data-tema="koyu"] {
  color-scheme: dark;
  --zemin: #121420; --zemin-2: #181b2a; --zemin-3: #222638; --kart: #1b1e2e;
  --kenar: #2f3448; --kenar-koyu: #414762;
  --metin: #f1f2f8; --metin-2: #c2c6d6; --metin-3: #8d92a6; --metin-ters: #121420;
  --ana: var(--mor-400); --ana-koyu: var(--mor-300); --ana-acik: var(--mor-500);
  --golge-1: 0 1px 2px rgba(0,0,0,.4); --golge-2: 0 4px 16px rgba(0,0,0,.45); --golge-3: 0 12px 40px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --zemin: #121420; --zemin-2: #181b2a; --zemin-3: #222638; --kart: #1b1e2e;
    --kenar: #2f3448; --kenar-koyu: #414762;
    --metin: #f1f2f8; --metin-2: #c2c6d6; --metin-3: #8d92a6; --metin-ters: #121420;
    --ana: var(--mor-400); --ana-koyu: var(--mor-300); --ana-acik: var(--mor-500);
    --golge-1: 0 1px 2px rgba(0,0,0,.4); --golge-2: 0 4px 16px rgba(0,0,0,.45); --golge-3: 0 12px 40px rgba(0,0,0,.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--zemin); color: var(--metin); font-family: var(--yazi-govde); font-size: var(--olcek-3); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--yazi-baslik); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 var(--aralik-4); color: var(--metin); }
p { margin: 0 0 var(--aralik-4); color: var(--metin-2); }
a { color: var(--ana); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--ana-koyu); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--mor-400); outline-offset: 2px; border-radius: var(--kose-kucuk); }
.sayisal { font-family: var(--yazi-veri); font-variant-numeric: tabular-nums; }

/* ── Cihaz siniflari: olcek ve ritim kesmeleri (E20) ──
   Tablet (768-1023): baslik olcegi bir kademe iner, buyuk bosluklar daralir.
   Buyuk mobil (480-767) ve mobil (0-479): tek sutun; sayfalar kendi duzenini kurar,
   kimlik yalniz olcek ve bosluk ritmini kucultur. */
@media (max-width: 1023px) {
  :root { --olcek-9: 3rem; --olcek-8: 2.4rem; --aralik-9: 4rem; --aralik-8: 3rem; }
}
@media (max-width: 767px) {
  :root { --olcek-8: 2rem; --olcek-7: 1.7rem; --olcek-6: 1.45rem; --aralik-9: 3rem; --aralik-8: 2.5rem; --aralik-7: 2rem; --kapsayici: 100%; }
  body { line-height: 1.55; }
}
@media (max-width: 479px) {
  :root { --olcek-8: 1.75rem; --olcek-7: 1.5rem; --aralik-6: 1.5rem; }
}
/* Dokunmatik cihazda hedefler buyur; ince imlecte gerek yok. */
@media (pointer: coarse) {
  button, .dugme, a.dugme { min-height: 44px; }
  input, select, textarea { min-height: 44px; }
}