/* =====================================================================
   AdaKolay AdminPortal — Tasarım sistemi
   Katman 1: Tokenlar, sıfırlama, tipografi, temel bileşenler

   Açık ve koyu tema desteklenir. Varsayılan olarak işletim sistemi
   ayarı izlenir; kullanıcı üst çubuktan değiştirirse tercihi
   html[data-theme] özniteliğiyle sabitlenir ve hatırlanır.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokenlar — açık tema
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* --- Marka renkleri (brand/renk-kodlari.txt) ---
     MERCAN #FF5A2E · MUREKKEP #171412 · KUM #FFF1EA · BEYAZ #FFFFFF   */
  --mercan:          #FF5A2E;
  --murekkep:        #171412;
  --kum:             #FFF1EA;

  /* Yüzeyler */
  --bg:              #FBF8F6;
  --surface:         #ffffff;
  --surface-2:       #FFF9F6;
  --surface-hover:   var(--kum);
  --sidebar-bg:      var(--murekkep);
  --sidebar-fg:      #9c948f;
  --sidebar-fg-str:  #ffffff;
  --sidebar-hover:   rgba(255,255,255,.07);

  /* Metin */
  --fg:              var(--murekkep);
  --fg-muted:        #6b625d;
  --fg-subtle:       #a2988f;

  /* Çizgiler */
  --border:          #ece4de;
  --border-strong:   #ddd2ca;

  /* Vurgu = mercan */
  --accent:          var(--mercan);
  --accent-hover:    #E8431A;
  --accent-fg:       #ffffff;
  --accent-soft:     var(--kum);
  --accent-soft-fg:  #C23D16;
  --accent-ring:     rgba(255,90,46,.30);

  /* Durum — mercanla çakışmayacak şekilde seçildi */
  --ok:              #0f8a5f;
  --ok-soft:         #e8f7f0;
  --warn:            #a15c07;
  --warn-soft:       #fdf4e3;
  --danger:          #c9314b;
  --danger-soft:     #fdecef;
  --danger-hover:    #a82740;

  /* Ölçüler */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --sh-sm: 0 1px 2px rgba(16,17,20,.05);
  --sh-md: 0 1px 3px rgba(16,17,20,.06), 0 8px 24px -8px rgba(16,17,20,.10);
  --sh-lg: 0 2px 8px rgba(16,17,20,.06), 0 24px 48px -16px rgba(16,17,20,.18);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Marka tipografisi: Outfit SemiBold 600, harf aralığı -0.04em, küçük harf. */
  --font-brand: "Outfit", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------
   Tokenlar — koyu tema
   Aynı değerler iki yerde: sistem tercihi ve elle seçim.
   --------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0F0D0C;
    --surface:       #1A1715;
    --surface-2:     #211D1A;
    --surface-hover: #262119;
    --sidebar-bg:    #141110;
    --sidebar-fg:    #948a84;
    --sidebar-fg-str:#ffffff;
    --sidebar-hover: rgba(255,255,255,.06);

    --fg:            #F5EFEB;
    --fg-muted:      #a89c95;
    --fg-subtle:     #7d726c;

    --border:        #2C2622;
    --border-strong: #443B35;

    --accent:        #FF7048;
    --accent-hover:  #FF8A69;
    --accent-fg:     #1a0f0a;
    --accent-soft:   rgba(255,90,46,.16);
    --accent-soft-fg:#FFB49B;
    --accent-ring:   rgba(255,112,72,.34);

    --ok:            #3ecf99;
    --ok-soft:       rgba(62,207,153,.13);
    --warn:          #f5b544;
    --warn-soft:     rgba(245,181,68,.13);
    --danger:        #f4778c;
    --danger-soft:   rgba(244,119,140,.13);
    --danger-hover:  #ef5b74;

    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh-md: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.6);
    --sh-lg: 0 2px 8px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0F0D0C;
  --surface:       #1A1715;
  --surface-2:     #211D1A;
  --surface-hover: #262119;
  --sidebar-bg:    #141110;
  --sidebar-fg:    #948a84;
  --sidebar-fg-str:#ffffff;
  --sidebar-hover: rgba(255,255,255,.06);

  --fg:            #F5EFEB;
  --fg-muted:      #a89c95;
  --fg-subtle:     #7d726c;

  --border:        #2C2622;
  --border-strong: #443B35;

  --accent:        #FF7048;
  --accent-hover:  #FF8A69;
  --accent-fg:     #1a0f0a;
  --accent-soft:   rgba(255,90,46,.16);
  --accent-soft-fg:#FFB49B;
  --accent-ring:   rgba(255,112,72,.34);

  --ok:            #3ecf99;
  --ok-soft:       rgba(62,207,153,.13);
  --warn:          #f5b544;
  --warn-soft:     rgba(245,181,68,.13);
  --danger:        #f4778c;
  --danger-soft:   rgba(244,119,140,.13);
  --danger-hover:  #ef5b74;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.6);
  --sh-lg: 0 2px 8px rgba(0,0,0,.5), 0 24px 48px -16px rgba(0,0,0,.7);
}

/* ---------------------------------------------------------------------
   Sıfırlama ve temel
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-brand);
  line-height: 1.25; letter-spacing: -.03em; font-weight: 600;
}
h1 { font-size: 26px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

a { color: inherit; text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--accent); }

img, svg { display: block; max-width: 100%; }
svg { flex: 0 0 auto; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

::selection { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* İnce kaydırma çubuğu */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   Yardımcılar
   --------------------------------------------------------------------- */
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-subtle);
}
.text-muted { color: var(--fg-muted); }
.num { font-family: var(--font-num); font-size: 13px; font-variant-numeric: tabular-nums; }
.lead { color: var(--fg-muted); font-size: 14px; }
.hr { height: 1px; border: 0; background: var(--border); margin: var(--sp-5) 0; }
.fine { font-size: 12px; color: var(--fg-subtle); line-height: 1.6; }

/* ---------------------------------------------------------------------
   Düğmeler
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 38px; padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 550; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background .15s var(--ease), border-color .15s var(--ease),
              color .15s var(--ease), transform .08s var(--ease),
              box-shadow .15s var(--ease);
}
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--sh-sm); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); }

.btn-secondary {
  background: var(--surface); color: var(--fg);
  border-color: var(--border-strong); box-shadow: var(--sh-sm);
}
.btn-secondary:hover { background: var(--surface-hover); color: var(--fg); }

.btn-ghost { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--fg); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); color: #fff; }

.btn-icon { width: 38px; padding: 0; }
.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: 13px; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------------
   Form alanları
   --------------------------------------------------------------------- */
.input {
  display: block; width: 100%; height: 40px; padding: 0 var(--sp-3);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder { color: var(--fg-subtle); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

textarea.input { height: auto; min-height: 108px; padding: var(--sp-3); resize: vertical; line-height: 1.6; }
select.input { cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 550; color: var(--fg); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.field-error { color: var(--danger); font-size: 12.5px; }
.field-error:empty { display: none; }

.check {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13.5px; color: var(--fg-muted); cursor: pointer; user-select: none;
}
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.check i { display: none; }

.pw { position: relative; }
.pw .input { padding-right: 44px; }
.pw .btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  height: 32px; width: 32px; padding: 0; color: var(--fg-subtle);
  background: transparent; border: 0;
}
.pw .btn:hover { color: var(--fg); background: var(--surface-hover); }

.summary {
  padding: var(--sp-3) var(--sp-4);
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--r-md);
  font-size: 13.5px;
}
.summary ul { margin: 0; padding-left: 18px; }
.summary:empty { display: none; }

.notice {
  padding: var(--sp-3) var(--sp-4);
  background: var(--ok-soft); color: var(--ok);
  border: 1px solid var(--ok); border-radius: var(--r-md);
  font-size: 13.5px;
}

/* ---------------------------------------------------------------------
   Etiketler
   --------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 550; white-space: nowrap;
}
.tag-neutral { background: var(--ok-soft); color: var(--ok); }
.tag-accent  { background: var(--danger-soft); color: var(--danger); }
.tag-accent-2{ background: var(--warn-soft); color: var(--warn); }
.tag-outline { background: transparent; color: var(--fg-muted); border: 1px solid var(--border-strong); }
.tag-brand   { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* ---------------------------------------------------------------------
   Kart ve tablo
   --------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.card-body { padding: var(--sp-5); }
.card-title { font-size: 15px; font-weight: 650; }
.card-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); }
.card-meta { font-size: 12.5px; color: var(--fg-muted); }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; padding: 10px var(--sp-4);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 13px var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background .12s var(--ease); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------
   Hareket azaltma tercihi
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   Marka kelime işareti

   Logo bir görsel değil, Outfit ile dizilmiş metindir; böylece her
   boyutta net görünür ve temaya göre renk alır.
   Yazım kuralı: her zaman küçük harf, "ada'kolay".
   --------------------------------------------------------------------- */
.brand {
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: -.04em;
  text-transform: lowercase;
  line-height: 1;
  white-space: nowrap;
}
.brand .b-ada { color: var(--murekkep); }
.brand .b-kolay { color: var(--mercan); }

/* Koyu zeminde "ada" beyaza döner (marka rehberindeki dark sürüm). */
.brand.on-dark .b-ada { color: #ffffff; }