/* ═══════════════════════════════════════════════════════════════════
   Akkan AI — Tasarım Sistemi v3
   İki tema: koyu (varsayılan) ve açık  ·  <html data-tema="acik">
   Eski değişken adları (--blue, --card …) korunur; tüm sayfalar
   bu değişkenleri kullandığı için tema değişince her şey birlikte değişir.
═══════════════════════════════════════════════════════════════════ */
/* Yazı tipi: Figtree (OFL) — sunucuda barınır, internetsiz de çalışır */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/figtree-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/figtree-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/figtree-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/figtree-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/figtree-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/figtree-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/figtree-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/figtree-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/figtree-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/figtree-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Zemin & yüzeyler */
  --bg:        #141821;
  --card:      #1C212B;
  --card2:     #252B37;
  --input-bg:  #161A23;
  --border:    #313949;
  --line:      #262D3A;      /* tablo içi ince çizgi */
  --line-strong:#3D4659;
  --hover:     rgba(255,255,255,.045);
  --topbar:    #1A1F29;

  /* Yazı */
  --text:      #E7EAF0;
  --muted:     #959EB0;
  --faint:     #6C7589;

  /* Vurgu & durum renkleri (eski adlar korunur) */
  --blue:      #8EA6FF;   /* ana vurgu: mürekkep mavisi */
  --blue-h:    #A8BBFF;
  --accent-bg: #4E6EF2;   /* dolu buton zemini */
  --accent-bg-h:#5F7DF7;
  --on-accent: #FFFFFF;
  --green:     #5FBF8C;
  --green-h:   #78CFA0;
  --red:       #EE7376;
  --red-h:     #F38B8D;
  --orange:    #E7B65A;
  --orange-h:  #EEC57A;
  --purple:    #B391F6;
  --purple-h:  #C4A9F8;

  --blue-soft:   rgba(142,166,255,.13);
  --green-soft:  rgba(95,191,140,.13);
  --red-soft:    rgba(238,115,118,.13);
  --orange-soft: rgba(231,182,90,.13);
  --purple-soft: rgba(179,145,246,.15);

  --radius:    10px;
  --radius-s:  7px;
  --shadow:    0 12px 32px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.25);
  --shadow-s:  0 1px 2px rgba(0,0,0,.3);
  --tr:        .15s ease;
  color-scheme: dark;
}

[data-tema="acik"]{
  --bg:        #F3F5F8;
  --card:      #FFFFFF;
  --card2:     #EEF1F6;
  --input-bg:  #FFFFFF;
  --border:    #DCE1E9;
  --line:      #E8EBF1;
  --line-strong:#C9D0DC;
  --hover:     rgba(23,32,51,.04);
  --topbar:    #FFFFFF;

  --text:      #172033;
  --muted:     #5A6479;
  --faint:     #8A93A6;

  --blue:      #2E52D2;
  --blue-h:    #2142B5;
  --accent-bg: #2E52D2;
  --accent-bg-h:#2445BE;
  --on-accent: #FFFFFF;
  --green:     #1D8452;
  --green-h:   #166B42;
  --red:       #C73B41;
  --red-h:     #A82F35;
  --orange:    #A0650A;
  --orange-h:  #835207;
  --purple:    #7448D4;
  --purple-h:  #5E37B6;

  --blue-soft:   rgba(46,82,210,.08);
  --green-soft:  rgba(29,132,82,.09);
  --red-soft:    rgba(199,59,65,.08);
  --orange-soft: rgba(204,134,22,.11);
  --purple-soft: rgba(116,72,212,.09);

  --shadow:    0 14px 36px rgba(23,32,51,.14), 0 2px 6px rgba(23,32,51,.06);
  --shadow-s:  0 1px 2px rgba(23,32,51,.06);
  color-scheme: light;
}

/* ── Temel ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
button,input,select,textarea{font-family:inherit}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

h1,h2,h3{font-family:var(--font);line-height:1.2;letter-spacing:-.01em}
h1{font-size:2rem;font-weight:800}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{line-height:1.6;color:var(--muted)}
code{font-family:var(--font);font-weight:600;background:var(--card2);
  border:1px solid var(--border);padding:1px 6px;border-radius:5px;font-size:12px;color:var(--text)}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ── İkon ──────────────────────────────────────────────────────────── */
.ik{width:1.1em;height:1.1em;flex-shrink:0;vertical-align:-.17em}
i[data-ik]{display:inline-flex;font-style:normal;line-height:0}

/* ── Kart ──────────────────────────────────────────────────────────── */
.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  padding:18px;box-shadow:var(--shadow-s)}

/* ── Butonlar ──────────────────────────────────────────────────────────
   Tek bir ana renk (mavi) + nötr + tehlike. Eski renk sınıfları korunur
   ama sadeleştirilmiş anlamlara bağlanır.                              */
a.btn{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 15px;border-radius:var(--radius-s);border:1px solid transparent;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1;
  transition:background var(--tr),border-color var(--tr),color var(--tr),box-shadow var(--tr)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn .ik{width:16px;height:16px}

.btn-blue,.btn-green,.btn-purple{background:var(--accent-bg);color:var(--on-accent);box-shadow:var(--shadow-s)}
.btn-blue:hover:not(:disabled),.btn-green:hover:not(:disabled),.btn-purple:hover:not(:disabled){background:var(--accent-bg-h)}
.btn-orange{background:var(--orange-soft);color:var(--orange);border-color:color-mix(in srgb,var(--orange) 35%,transparent)}
.btn-orange:hover:not(:disabled){background:color-mix(in srgb,var(--orange) 20%,transparent)}
.btn-red{background:var(--red-soft);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.btn-red:hover:not(:disabled){background:color-mix(in srgb,var(--red) 20%,transparent)}

.btn-ghost,.btn-ghost-blue,.btn-ghost-green,.btn-ghost-orange{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover:not(:disabled),.btn-ghost-blue:hover:not(:disabled),
.btn-ghost-green:hover:not(:disabled),.btn-ghost-orange:hover:not(:disabled){background:var(--hover);border-color:var(--line-strong)}
.btn-ghost-blue .ik{color:var(--blue)}
.btn-ghost-green .ik{color:var(--green)}
.btn-ghost-orange .ik{color:var(--orange)}

.btn-sm{height:32px;padding:0 12px;font-size:12.5px}
.btn-lg{height:44px;padding:0 22px;font-size:15px;border-radius:var(--radius)}
.btn-icon{width:32px;padding:0}
.btn-sade{background:none;border:none;color:var(--muted);height:30px;padding:0 8px}
.btn-sade:hover:not(:disabled){color:var(--text);background:var(--hover)}

/* ── Form ──────────────────────────────────────────────────────────── */
input,select,textarea{background:var(--input-bg);border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text);font-size:13px;padding:8px 11px;outline:none;width:100%;
  transition:border-color var(--tr),box-shadow var(--tr)}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent-bg)}
input[type=range]{padding:0;border:none;background:none;box-shadow:none;accent-color:var(--accent-bg)}
label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}

/* ── Tablo ─────────────────────────────────────────────────────────── */
.tablo-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--card);color:var(--muted);font-weight:600;font-size:12px;
  padding:10px 13px;text-align:left;position:sticky;top:0;border-bottom:1px solid var(--border);
  cursor:pointer;user-select:none;white-space:nowrap}
thead th:hover{color:var(--text)}
tbody tr{border-bottom:1px solid var(--line);transition:background var(--tr)}
tbody tr:hover{background:var(--hover)}
tbody tr.sel{background:var(--blue-soft)}
tbody td{padding:8px 13px;vertical-align:middle}
.cb-cell{cursor:pointer;text-align:center;font-size:15px;width:44px}

/* ── Üst bar ───────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:8px;min-height:58px;padding:10px 18px;
  border-bottom:1px solid var(--border);background:var(--topbar);
  position:sticky;top:0;z-index:100;flex-shrink:0;flex-wrap:wrap}
.topbar h2{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:9px;margin-right:6px}
.topbar h2 .ik{color:var(--muted);width:18px;height:18px}
.spacer{flex:1}
.ayrac{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0}

/* Ana menü (logo) butonu */
.logo-btn{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 8px;margin-right:6px;
  border:1px solid transparent;border-radius:var(--radius-s);background:none;color:var(--text);cursor:pointer;
  transition:background var(--tr),border-color var(--tr)}
.logo-btn:hover{background:var(--hover);border-color:var(--border)}
.logo-btn .ik{width:15px;height:15px;color:var(--muted)}
.logo-btn .logo-svg{height:26px;width:auto;color:var(--text);display:block}
.geri-btn{height:34px;padding:0 14px 0 10px;font-size:13px;gap:6px}
.geri-btn .ik{width:17px;height:17px}

/* Tema anahtarı (app.js ekler) */
.tema-anahtar{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
.tema-anahtar button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:26px;
  border:none;border-radius:6px;background:transparent;color:var(--faint);cursor:pointer;transition:all var(--tr)}
.tema-anahtar button:hover{color:var(--text)}
.tema-anahtar button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow-s)}
.tema-anahtar .ik{width:15px;height:15px}

/* Segment (iki-üç seçenekli geçiş) */
.segment{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--bg)}
.segment button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:none;border-radius:6px;
  background:transparent;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:all var(--tr)}
.segment button:hover{color:var(--text)}
.segment button.on{background:var(--blue-soft);color:var(--blue);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 40%,transparent)}
.segment .ik{width:15px;height:15px}

/* ── İçerik ────────────────────────────────────────────────────────── */
.icerik{padding:18px 20px;flex:1;overflow-y:auto}

/* ── Bildirim ──────────────────────────────────────────────────────── */
.notif{padding:10px 14px 10px 12px;border-radius:var(--radius-s);font-size:13px;font-weight:500;
  display:flex;align-items:flex-start;gap:9px;animation:notifGir .22s ease;
  background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow);
  border-left:3px solid var(--blue)}
.notif .ik{width:17px;height:17px;margin-top:1px}
.notif-hata  {border-left-color:var(--red)}   .notif-hata .ik{color:var(--red)}
.notif-basari{border-left-color:var(--green)} .notif-basari .ik{color:var(--green)}
.notif-uyari {border-left-color:var(--orange)}.notif-uyari .ik{color:var(--orange)}
.notif-bilgi {border-left-color:var(--blue)}  .notif-bilgi .ik{color:var(--blue)}
#notif-wrap{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:9999;max-width:380px}

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(8,11,18,.55);display:flex;align-items:center;justify-content:center;
  z-index:1000;animation:fadeIn .18s ease;backdrop-filter:blur(2px)}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;width:460px;
  max-width:94vw;box-shadow:var(--shadow);animation:slideUp .2s ease}
.modal-box h3{margin-bottom:14px;color:var(--text)}

/* ── Rozet ─────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700}
.badge-blue  {background:var(--blue-soft);  color:var(--blue)}
.badge-green {background:var(--green-soft); color:var(--green)}
.badge-orange{background:var(--orange-soft);color:var(--orange)}
.badge-red   {background:var(--red-soft);   color:var(--red)}

/* ── İlerleme ──────────────────────────────────────────────────────── */
.prog-wrap{background:var(--card2);border-radius:99px;height:6px;overflow:hidden}
.prog-bar{height:100%;border-radius:99px;background:var(--accent-bg);transition:width .7s ease}
.prog-bar.pulse{animation:pulse 1.8s ease-in-out infinite}

/* ── Yükleniyor ────────────────────────────────────────────────────── */
.spin{width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--blue);border-radius:50%;
  animation:spin .75s linear infinite;display:inline-block;flex-shrink:0}

/* ── Animasyonlar ──────────────────────────────────────────────────── */
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes notifGir{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Yardımcılar ───────────────────────────────────────────────────── */
.flex{display:flex;gap:9px;align-items:center}
.flex-wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.w-full{width:100%}.text-center{text-align:center}
.text-muted{color:var(--muted);font-size:12px}
.hidden{display:none!important}
.sep{height:1px;background:var(--border);margin:14px 0}
.bolum-etiket{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}

/* ── Telefon ───────────────────────────────────────────────────────── */
@media (max-width:760px){
  .topbar{padding:8px 12px;gap:6px}
  .topbar h2{font-size:15px;flex-basis:100%;order:-1;margin:2px 0}
  .topbar .btn-sm{height:30px;padding:0 10px}
  .topbar .btn-yazi{display:none}
  .logo-btn,.geri-btn{order:-2}
  .topbar .ayrac{display:none}
  #notif-wrap{left:12px;right:12px;max-width:none}
}

/* ── Hesap menüsü (sunucu sürümü) ─────────────────────────────────── */
.hesap-btn .btn-yazi{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.hesap-menu{position:fixed;z-index:1200;min-width:230px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px}
.hesap-menu .hm-bas{padding:9px 11px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;display:grid;gap:2px}
.hesap-menu .hm-bas b{font-size:13px}
.hesap-menu .hm-bas span{font-size:11.5px;color:var(--muted)}
.hesap-menu button{display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--text);
  font:inherit;font-size:13px;padding:8px 11px;border-radius:8px;cursor:pointer;text-align:left}
.hesap-menu button:hover{background:var(--hover)}
.hesap-menu button .ik{width:16px;height:16px;color:var(--muted)}
.hesap-menu button.kirmizi{color:var(--red)}
.hesap-menu button.kirmizi .ik{color:var(--red)}
.sd-et{display:grid;gap:5px;font-size:12px;color:var(--muted);font-weight:600}