/* Mektebe — klasik Şâmile-vari arayüz.
   Üç bölge: araç çubuğu (üst) · okuma+sonuç (sol) · kütüphane ağacı (sağ).
   Türkçe kabuk LTR; Arapça içerik blokları dir="rtl". Tema değişkenle. */

/* Tema: Palet B (açık) + Lacivert (koyu) — apply/01-tema-tokens.css */
:root {
  --bg:      #eae7df;   /* gövde zemini (panellerin arkası) */
  --panel:   #faf8f3;   /* okuma/kâğıt yüzeyi */
  --panel-2: #f0ede6;   /* araç şeridi · yan panel · sonuç bölmesi */
  --ink:     #272320;
  --muted:   #8b8479;
  --line:    #ddd8cc;
  --accent:  #3f7d6e;   /* sakin teal-yeşil */
  --head:    #3c4a57;   /* tablo başlığı (kayrak) */
  --sel:     #e6eae5;   /* seçili satır / vurgu zemini */
  --hit:     #bb3b33;   /* aranan kelime (kırmızı) */
  --mark-bg: #f1ead0;   /* gruplu görünüm işaretleme zemini */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ar-font: "Amiri", "Scheherazade New", "Geeza Pro", "Noto Naskh Arabic", serif;
}
/* Koyu — Lacivert (gece-mavisi kâğıt). Saf siyah yok; sıcak-soğuk dengeli. */
:root[data-theme="dark"] {
  --bg:      #141821;
  --panel:   #181c25;
  --panel-2: #1b212a;
  --ink:     #dde3ec;
  --muted:   #8c93a3;
  --line:    #2e3542;
  --accent:  #5fae97;
  --head:    #2c3a52;
  --sel:     #273043;
  --hit:     #ff7d70;   /* gece okumasında gözü yormayan mercan kırmızısı */
  --mark-bg: #3a3a24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #141821;
    --panel:   #181c25;
    --panel-2: #1b212a;
    --ink:     #dde3ec;
    --muted:   #8c93a3;
    --line:    #2e3542;
    --accent:  #5fae97;
    --head:    #2c3a52;
    --sel:     #273043;
    --hit:     #ff7d70;
    --mark-bg: #3a3a24;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--ui-font); }
.ar { font-family: var(--ar-font); }

.app { display: flex; flex-direction: column; height: 100vh; }

/* Araç çubuğu */
.toolbar {
  display: flex; align-items: center; gap: 1rem; padding: .5rem .9rem;
  background: linear-gradient(var(--panel), var(--panel-2));
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 8px; line-height: 1.1; flex: none; text-decoration: none; color: inherit; cursor: pointer; }
.brand-mark { color: var(--accent); flex: none; display: block; }
.brand-name { font-weight: 700; font-size: 1.15rem; color: var(--accent); }
.brand-tagline { color: var(--muted); font-size: .72rem; }
.search-form { display: flex; flex: 1; gap: .5rem; max-width: 640px; }
.search-input {
  flex: 1; padding: .5rem .7rem; font-size: 1.15rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--ink);
}
.search-btn {
  padding: 0 1.2rem; border: none; border-radius: 6px; background: var(--accent);
  color: #fff; font-weight: 600; cursor: pointer;
}
.theme-toggle {
  margin-left: auto; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-radius: 6px; width: 2.1rem; height: 2.1rem; cursor: pointer;
}

/* Çalışma alanı: sol içerik + sağ ağaç */
.workspace { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--lib-w, 300px); overflow: hidden; }
.workspace.lib-collapsed { grid-template-columns: minmax(0, 1fr) 20px 0; }
.main { display: flex; flex-direction: column; overflow: hidden; }
/* Kütüphane ayracı: açıkken sürükle → genişlet/daralt, çift-tık → gizle */
.splitter { position: relative; background: var(--line); cursor: col-resize; transition: background .15s; }
.splitter:hover, .splitter.dragging { background: var(--accent); }
/* Gizliyken: kalın, accent renkli, oklu, tıklanır çubuk → tek tıkla aç */
.workspace.lib-collapsed .splitter { background: var(--accent); cursor: pointer; }
.workspace.lib-collapsed .splitter::after {
  content: "❮"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: #fff; font-size: .85rem; line-height: 1; }
.workspace.lib-collapsed .sidebar { overflow: hidden; border: 0; }

/* Okuma bölmesi */
.reading {
  flex: 1; overflow: auto; background: var(--panel); padding: 1.2rem 1.6rem;
}
.reading .placeholder { color: var(--muted); text-align: center; margin-top: 3rem; }
/* Boş/açılış ekranı: ortada marka simgesi + ad + Arapça + davet + örnek çipler */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .45rem; margin: 4rem auto 0; max-width: 34rem; color: var(--muted); }
.empty-mark { width: 56px; height: 56px; padding: 13px; border-radius: 15px;
  background: var(--sel); color: var(--accent); }
.empty-title { font-size: 1.5rem; font-weight: 700; color: var(--accent); margin-top: .3rem; }
.empty-ar { font-size: 1.25rem; color: var(--ink); }
.empty-desc { margin: .3rem 0 1.1rem; line-height: 1.6; }
.empty-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.empty-chip { font-family: var(--ar-font); font-size: 1.1rem; padding: .3rem .95rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--ink); cursor: pointer; }
.empty-chip:hover { border-color: var(--accent); color: var(--accent); }
.read-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .8rem;
}
.read-title { font-weight: 700; font-size: 1.15rem; }
.read-author { color: var(--muted); font-size: .85rem; }
.read-bab { color: var(--accent); font-size: .95rem; }
.read-cite { font-size: .75rem; color: var(--muted); direction: ltr; }
.toc-btn {
  margin-left: auto; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 6px; padding: .25rem .7rem; cursor: pointer; font-size: .8rem;
}
.read-body, .read-foot { direction: rtl; text-align: justify; font-family: var(--ar-font); }
.read-body { font-size: calc(1.45rem * var(--read-scale, 1)); line-height: var(--read-lh, 2.15); }
.read-line { margin: 0 0 .15rem; }
.read-line.blank { height: .8rem; }
.read-body mark.hit, .read-foot mark.hit {
  background: none; color: var(--hit); font-weight: 700;
}
.foot-rule { border: none; border-top: 1px solid var(--line); margin: 1.2rem 0 .6rem; width: 40%; }
.read-foot { font-size: calc(1.05rem * var(--read-scale, 1)); line-height: 1.9; color: var(--muted); }
.read-nav { display: flex; justify-content: space-between; margin-top: 1.4rem; gap: 1rem; }
.read-nav button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .4rem 1rem; cursor: pointer;
}
.read-nav button[disabled] { opacity: .4; cursor: default; }

/* İçindekiler (fihrist) */
.toc { direction: rtl; border-top: 1px dashed var(--line); margin-top: 1rem; padding-top: .6rem; }
.toc-item {
  font-family: var(--ar-font); font-size: 1.05rem; padding: .15rem .3rem;
  cursor: pointer; border-radius: 4px;
}
.toc-item:hover { background: var(--sel); }

/* Sonuç paneli (alt) */
.resultpane { flex: 0 0 45%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel-2); border-top: 2px solid var(--line); }
.resultpane[hidden] { display: none; }
.resultbar {
  display: flex; align-items: center; gap: 1rem; padding: .4rem .8rem;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.result-summary { font-size: .85rem; color: var(--ink); }
.result-tools { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.view-toggle {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .25rem .7rem; cursor: pointer; font-size: .8rem;
}
.pager { display: flex; align-items: center; gap: .5rem; }
.page-btn { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }
.page-btn[disabled] { opacity: .4; cursor: default; }
.page-label { font-size: .78rem; color: var(--muted); }
.results { flex: 1; overflow: auto; }

/* Klasik düz tablo (RTL: مسلسل sağda) */
table.hits { width: 100%; border-collapse: collapse; direction: rtl; }
table.hits th, table.hits td {
  border: 1px solid var(--line); padding: .3rem .5rem; text-align: right; vertical-align: top;
}
table.hits thead th {
  background: var(--head); color: #fff; font-weight: 600; font-size: .8rem;
  position: sticky; top: 0; font-family: var(--ui-font);
}
table.hits td { font-family: var(--ar-font); font-size: 1.05rem; }
table.hits td.num, table.hits td.cite { font-family: var(--ui-font); font-size: .8rem; color: var(--muted); text-align: center; white-space: nowrap; }
table.hits tbody tr { cursor: pointer; }
table.hits tbody tr:hover { background: var(--sel); }
table.hits tbody tr.active { background: var(--sel); outline: 2px solid var(--accent); outline-offset: -2px; }
table.hits td .kwic-match { color: var(--hit); font-weight: 700; }
.col-text { width: 50%; }

/* Gruplu görünüm (toggle) */
.work { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem .9rem; margin: .6rem; }
.work-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
  border-bottom: 1px dashed var(--line); padding-bottom: .4rem; margin-bottom: .4rem; }
.work-title { font-weight: 700; font-family: var(--ar-font); font-size: 1.1rem; }
.work-author { color: var(--muted); font-size: .82rem; font-family: var(--ar-font); }
.work-hits { margin-left: auto; color: var(--accent); font-weight: 600; font-size: .8rem; }
.work .kwic { direction: rtl; font-family: var(--ar-font); font-size: 1.15rem; line-height: 1.9;
  padding: .2rem 0; cursor: pointer; }
.work .kwic:hover { background: var(--sel); }
.work .kwic mark { background: var(--mark-bg); color: inherit; }
.badge { font-size: .68rem; padding: .05rem .4rem; border-radius: 999px; background: var(--mark-bg); color: var(--ink); }
.status-msg { padding: 1.2rem; color: var(--muted); text-align: center; }

/* Kütüphane ağacı */
.sidebar { background: var(--panel-2); display: flex; flex-direction: column; overflow: hidden; }
.sidebar-head { padding: .5rem .8rem; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.lib-count { color: var(--muted); font-size: .78rem; font-weight: 400; }
.tree { flex: 1; overflow: auto; direction: rtl; padding: .3rem 0; }
.tree-row {
  font-family: var(--ar-font); font-size: 1.02rem; padding: .25rem .6rem;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-row:hover { background: var(--sel); }
.tree-row.cat { font-weight: 600; }
.tree-row.book { color: var(--ink); }
.tree-row.book.active { background: var(--sel); }
.tree-row .tw { color: var(--muted); font-family: var(--ui-font); margin-left: .3rem; }
.tw-count { flex: none; color: var(--muted); font-family: var(--ui-font);
  font-size: .78rem; font-weight: 400; }
.tree-empty { color: var(--muted); font-size: .8rem; padding: .3rem 1rem; font-family: var(--ui-font); }
.death-year { font-size: .78rem; color: var(--muted); margin-inline-start: .4rem; white-space: nowrap; }

/* ── Klasik menü çubuğu ──────────────────────────────────────────────────── */
.menubar {
  display: flex; gap: .1rem; padding: .1rem .4rem;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.menu { position: relative; }
.menu-title {
  font-family: var(--ar-font); font-size: 1.05rem; background: none; border: none;
  color: var(--ink); padding: .2rem .7rem; cursor: pointer; border-radius: 4px;
}
.menu.open .menu-title, .menu-title:hover { background: var(--sel); }
.dropdown {
  display: none; position: absolute; top: 100%; right: 0; min-width: 220px; z-index: 50;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: .25rem; direction: rtl;
}
.menu.open .dropdown { display: block; }
.mi {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%;
  background: none; border: none; color: var(--ink); text-align: right;
  padding: .35rem .6rem; cursor: pointer; border-radius: 4px; font-size: .9rem;
  font-family: var(--ui-font);
}
.mi:hover { background: var(--sel); }
.mi.disabled { color: var(--muted); cursor: default; }
.mi.disabled:hover { background: none; }
.mi .soon { color: var(--muted); font-size: .75rem; }

/* ── Araç şeridi düğmeleri (klasik gri) ──────────────────────────────────── */
.toolbar { gap: .6rem; }
.tb-group { display: flex; gap: .15rem; padding: 0 .2rem;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.tb {
  width: 2rem; height: 2rem; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-radius: 5px; cursor: pointer; font-size: .9rem; line-height: 1;
}
.tb:hover { background: var(--sel); }
.tb[disabled] { opacity: .4; cursor: default; }

/* ── Hakkında kartı ──────────────────────────────────────────────────────── */
.about-card {
  max-width: 32rem; margin: 3rem auto; padding: 1.4rem 1.6rem; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.about-card .about-name { font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.about-card p { color: var(--muted); margin: .6rem 0 0; }

/* ── Yazdırma: yalnız okuma bölmesi ──────────────────────────────────────── */
@media print {
  .menubar, .toolbar, .sidebar, .resultpane, .read-nav, .toc, .toc-btn { display: none !important; }
  .app, .workspace, .main { display: block; height: auto; overflow: visible; }
  .reading { overflow: visible; }
}

/* "Nerede aransın" seçici (araç şeridi) */
.field-where { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.field-select {
  padding: .35rem .4rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font-size: 1rem;
}

/* Arama kapsamı çubuğu + ağaç işaret kutuları */
.scope-bar {
  display: flex; align-items: center; gap: 1rem; padding: .3rem .9rem;
  background: var(--sel); border-bottom: 1px solid var(--line); font-size: .82rem;
}
.scope-bar[hidden] { display: none; }
.scope-text { color: var(--ink); }
.scope-clear {
  margin-left: auto; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-radius: 6px; padding: .2rem .7rem; cursor: pointer; font-size: .78rem;
}
.tree-row { display: flex; align-items: center; gap: .4rem; }
.tw-check { flex: none; cursor: pointer; margin: 0; }
.tw-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Çok ibareli arama paneli (و/أو) */
.adv-toggle { background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: 0 .7rem; cursor: pointer; font-family: var(--ar-font); font-size: 1rem; }
.adv-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .5rem .9rem; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.adv-panel[hidden] { display: none; }
.adv-op { display: flex; gap: 1rem; font-size: .85rem; }
.adv-phrases { display: flex; flex-wrap: wrap; gap: .4rem; }
.adv-row { display: flex; align-items: center; gap: .2rem; }
.adv-input { padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font-size: 1.05rem; min-width: 13rem; }
.adv-remove { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 6px; width: 1.7rem; height: 1.7rem; cursor: pointer; }
.adv-add { background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: .3rem .7rem; cursor: pointer; font-size: .8rem; }

/* "Kapsam seç" menüsü ağacı kısa süre vurgular */
.sidebar.flash { outline: 2px solid var(--accent); outline-offset: -2px; transition: outline-color .3s; }

/* Yeni-sekme bağlantıları görünümü değiştirmesin */
.kwic-link { color: inherit; text-decoration: none; }
.work a.kwic { display: block; color: inherit; text-decoration: none; }
a.tw-label { color: inherit; text-decoration: none; }
a.toc-btn { display: inline-block; text-decoration: none; color: var(--ink); }

/* Rehber sayfası */
.guide { max-width: 46rem; margin: 0 auto; }
.guide-h { color: var(--accent); border-bottom: 2px solid var(--line); padding-bottom: .4rem; }
.guide-sec { margin: 1.2rem 0; }
.guide-sec h3 { color: var(--accent); margin: 0 0 .4rem; font-size: 1.1rem; }
.guide-sec p { margin: .2rem 0 .6rem; line-height: 1.6; }
.guide-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; }
.guide-list dt { font-weight: 600; }
.guide-list dd { margin: 0; color: var(--muted); line-height: 1.5; }

/* Çıkış çipi (araç şeridi) */
.logout { font-size: .78rem; color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 6px; }
.logout:hover { background: var(--sel); color: var(--ink); }
.logout-user { font-weight: 600; color: var(--ink); }

/* Notlarım editörü */
.notes { max-width: 60rem; margin: 0 auto; }
.notes-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .6rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.notes-title { font-weight: 700; color: var(--accent); font-size: 1.1rem; }
.notes-select { margin-left: auto; padding: .35rem .5rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel); color: var(--ink); max-width: 16rem; }
.notes-btn { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); cursor: pointer; font-size: .85rem; }
.notes-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.notes-btn:hover { background: var(--sel); }
.notes-title-input { width: 100%; padding: .5rem .7rem; font-size: 1.1rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink); margin-bottom: .6rem; }
.note-textarea { width: 100%; min-height: 24rem; padding: .7rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 1.1rem; line-height: 1.8; }
.notes-status { display: inline-block; margin-top: .5rem; color: var(--muted); font-size: .8rem; }
.ck-editor__editable { min-height: 24rem; }

/* Toast (kısa bildirim) */
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  background: var(--ink); color: var(--bg); padding: .5rem 1rem; border-radius: 8px; font-size: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100; }
.toast.show { opacity: .95; transform: translateX(-50%) translateY(0); }

/* Yer imleri listesi */
.bm-list { display: flex; flex-direction: column; gap: .3rem; }
.bm-row { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.bm-label { flex: 1; font-size: 1.05rem; color: inherit; text-decoration: none; direction: rtl; text-align: right; }
.bm-label:hover { color: var(--accent); }
.bm-del { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 6px; width: 1.7rem; height: 1.7rem; cursor: pointer; }

/* Ayarlar paneli */
.settings { max-width: 40rem; margin: 0 auto; }
.set-row { display: flex; align-items: center; gap: 1rem; margin: .6rem 0; }
.set-label { flex: 0 0 12rem; color: var(--muted); font-size: .9rem; }
.set-control, .set-input { flex: 1; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 1rem; }
.set-step { display: flex; align-items: center; gap: .6rem; }
.set-btn { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); cursor: pointer; font-size: 1.1rem; }
.set-btn:hover { background: var(--sel); }
.set-val { min-width: 3.5rem; text-align: center; }
.set-check { cursor: pointer; }
.set-check input { width: auto; flex: none; }
.set-status { margin-top: .6rem; color: var(--muted); font-size: .85rem; }

/* ════════════════════════════════════════════════════════════════════════
   MEKTEBE — Giriş (login) ekranı stilleri
   style.css'in SONUNA ekle. login.html bu sınıfları kullanır. Token'lardan
   (01-tema-tokens.css) beslenir; açık/koyu otomatik çalışır.
   ════════════════════════════════════════════════════════════════════════ */

.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: linear-gradient(165deg, var(--panel-2), var(--bg));
}
.login-card {
  width: 380px; max-width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; padding: 34px 32px;
  box-shadow: 0 16px 44px rgba(40, 34, 22, .16);
}
:root[data-theme="dark"] .login-card { box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }

.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 26px; }
.login-mark {
  width: 54px; height: 54px; border-radius: 14px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
:root[data-theme="dark"] .login-mark { color: #16201c; }   /* koyu temada aksan üstüne koyu glif */
.login-name { font-weight: 700; font-size: 1.45rem; color: var(--ink); letter-spacing: .4px; }
.login-ar { font-family: var(--ar-font); font-size: 1.05rem; color: var(--muted); margin-top: 5px; }

.login-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.login-field {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); margin-bottom: 15px;
}
.login-field:focus-within { border-color: var(--accent); }
.login-field svg { color: var(--muted); flex: none; }
.login-field input {
  flex: 1; border: none; background: none; color: var(--ink);
  font: 1rem var(--ui-font); outline: none; padding: 0;
}
.login-field input::placeholder { color: var(--muted); }
.login-field .login-eye { color: var(--muted); cursor: pointer; display: inline-flex; }

.login-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; font-size: .8rem; }
.login-remember { display: flex; align-items: center; gap: 7px; color: var(--ink); cursor: pointer; }
.login-remember input { accent-color: var(--accent); margin: 0; }
.login-note { color: var(--muted); }

.login-btn {
  width: 100%; padding: 12px; background: var(--accent); color: #fff;
  border: none; border-radius: 11px; font: 600 .95rem var(--ui-font); cursor: pointer;
}
:root[data-theme="dark"] .login-btn { color: #16201c; }
.login-btn:hover { filter: brightness(1.05); }

.login-foot { text-align: center; font-size: .72rem; color: var(--muted); margin-top: 18px; }
.login-error {
  border: 1px solid var(--hit); color: var(--hit); background: transparent;
  border-radius: 9px; padding: 8px 12px; font-size: .82rem; margin-bottom: 16px; text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   MEKTEBE — Araç-şeridi SVG ikon boyutlandırması
   index.html (SVG'li sürüm) ile birlikte kullan. style.css'in SONUNA ekle.
   Mevcut .tb / .theme-toggle / .search-btn kurallarını DEĞİŞTİRMEZ, tamamlar.
   ════════════════════════════════════════════════════════════════════════ */

.tb { display: inline-flex; align-items: center; justify-content: center; }
.tb svg { width: 16px; height: 16px; display: block; }
.tb.tb-text { font: 600 .82rem var(--ui-font); }   /* A− / A+ metin kalsın */

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.theme-toggle svg { width: 15px; height: 15px; display: block; }

.search-btn { display: inline-flex; align-items: center; gap: 7px; }
.search-btn svg { width: 15px; height: 15px; display: block; }

/* CKEditor'ı uygulama temasına bağla — kendi --ck-* değişkenlerini token'lara
   eşleriz; tokenlar data-theme ile değiştiği için açık+lacivert otomatik. */
:root {
  --ck-color-base-background: var(--panel);
  --ck-color-base-foreground: var(--panel-2);
  --ck-color-base-border: var(--line);
  --ck-color-base-text: var(--ink);
  --ck-color-text: var(--ink);
  --ck-color-toolbar-background: var(--panel-2);
  --ck-color-toolbar-border: var(--line);
  --ck-color-button-default-hover-background: var(--sel);
  --ck-color-button-default-active-background: var(--sel);
  --ck-color-button-on-background: var(--sel);
  --ck-color-button-on-hover-background: var(--sel);
  --ck-color-panel-background: var(--panel);
  --ck-color-panel-border: var(--line);
  --ck-color-dropdown-panel-background: var(--panel);
  --ck-color-input-background: var(--panel);
  --ck-color-input-border: var(--line);
  --ck-color-input-text: var(--ink);
  --ck-color-list-background: var(--panel);
  --ck-color-list-button-hover-background: var(--sel);
  --ck-color-split-button-hover-background: var(--sel);
}
.ck.ck-editor__main > .ck-editor__editable,
.ck.ck-source-editing-area textarea { background: var(--panel); color: var(--ink); }
.ck.ck-toolbar { background: var(--panel-2); border-color: var(--line); }
.ck.ck-button, .ck.ck-button.ck-on { color: var(--ink); }
.ck.ck-editor, .ck.ck-editor__main > .ck-editor__editable { border-color: var(--line); }

/* Araç şeridi taşma düzeltmesi — Ara butonu A−/A+ ile çakışmasın.
   (flex item min-width:auto, uzun placeholder yüzünden formu küçültmüyordu.) */
.toolbar { flex-wrap: wrap; row-gap: .4rem; }
.search-form { min-width: 0; }
.search-input { min-width: 0; }
.search-btn { flex: none; white-space: nowrap; }
.adv-toggle, .field-where, .tb-group, .brand-name { flex: none; }

/* Türkçe Ayarlar+Rehber'i sayfanın SOL kenarına it (RTL menüde sağa yığılmasın) */
.menubar .menu.push-end { margin-inline-start: auto; }
.menubar .menu.left-menu .dropdown { right: auto; left: 0; }

/* Ayarlar alt başlığı (kullanıcı yönetimi bölümleri) */
.set-sub { color: var(--accent); font-size: 1rem; margin: 1.2rem 0 .5rem; border-top: 1px solid var(--line); padding-top: .8rem; }

/* Notlar — OneNote-vari: solda aranabilir sayfa listesi, sağda editör */
.notes-app { display: flex; gap: 1rem; height: 100%; min-height: 0; align-items: stretch; }
.notes-aside { flex: 0 0 240px; display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.notes-search { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: .9rem; }
.notes-list { flex: 1; min-height: 8rem; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.note-item { padding: .5rem .6rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.note-item:last-child { border-bottom: none; }
.note-item:hover { background: var(--sel); }
.note-item.active { background: var(--sel); border-inline-start: 3px solid var(--accent); }
.note-item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item-date { font-size: .72rem; color: var(--muted); }
.notes-empty { padding: .7rem; color: var(--muted); font-size: .85rem; }
.notes-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.notes-mainbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.notes-mainbar .notes-title-input { flex: 1; min-width: 12rem; margin: 0; }
.notes-mainbar .notes-select { margin-left: 0; }
.note-link { display:flex; align-items:center; gap:.5rem; background:var(--sel); border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; font-size:.85rem; color:var(--ink); }
.note-link[hidden]{ display:none; }
.note-link .nl-ref { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-link .nl-go { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:.2rem .6rem; cursor:pointer; font-size:.8rem; }
.note-item-ref { font-size:.72rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }