/* ═══════════════════════════════════════════════════════════════
   main.css — Bave Mimarlık Ruhsat Takip Sistemi
   ───────────────────────────────────────────────────────────────
   Kaynak: index.html lines 30-1353 + 1405-1620
   FAZ 3: refactor — tüm <style> blokları bu dosyada toplanır.
   components.css ve ekranlar.css ileride bu dosyadan ayrıştırılacak.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root,
html[data-theme="dark"]{
  /* KARANLIK TEMA — Notion/Lago Kurumsal Premium */
  /* Saf siyah yerine yumuşak koyu gri (#191919) */
  --bg:#191919;           /* Notion-style ana arka plan */
  --bg2:#202020;          /* kartlar, sidebar üzeri */
  --bg3:#2a2a2a;          /* input, ikincil yüzey */
  --bg4:#363636;          /* hover, vurgu */
  --border:#2e2e2e;       /* çok ince, görünür ama agresif değil */
  --border2:#3e3e3e;      /* belirgin kenarlık */
  --text:#e8e8e8;         /* krem-beyaz (yumuşak göze yormaz) */
  --text2:#a8a8a8;        /* gri — ikincil yazı */
  --text3:#6b6b6b;        /* koyu gri — etiket, placeholder */
  --accent:#2383e2;       /* Notion mavi (kurumsal, güven) */
  --accent2:#1a6cba;      /* hover/aktif */
  --green:#10b981;        /* daha sade yeşil (success) */
  --yellow:#eab308;       /* uyarı */
  --red:#ef4444;          /* hata */
  --orange:#f97316;       /* ikincil vurgu */
  --purple:#8b5cf6;       /* özel kategoriler */
  --blue:#2383e2;
  --sidebar-bg:#171717;   /* sidebar biraz daha koyu */
  --shadow:0 4px 24px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --r:6px;                /* daha az yuvarlak — Notion tarzı */
  --rl:8px;               /* büyük yuvarlatma */
  --rxl:12px;             /* çok büyük (kartlar) */
}

html[data-theme="light"]{
  /* AYDINLIK TEMA — Notion/Lago White Premium */
  --bg:#ffffff;           /* saf beyaz ana arka plan */
  --bg2:#ffffff;          /* kartlar saf beyaz */
  --bg3:#f7f7f5;          /* Notion'un açık gri tonu (input) */
  --bg4:#efefed;          /* hover */
  --border:#e9e9e7;       /* çok yumuşak çizgi */
  --border2:#d3d3d1;      /* belirgin */
  --text:#37352f;         /* Notion siyah (saf siyah değil!) */
  --text2:#6b6a64;        /* orta gri */
  --text3:#9b9a94;        /* açık gri */
  --accent:#2383e2;       /* aynı Notion mavi */
  --accent2:#1a6cba;
  --green:#0f7b3e;
  --yellow:#cb912f;
  --red:#e03e3e;
  --orange:#d9730d;
  --purple:#6940a5;
  --blue:#2383e2;
  --sidebar-bg:#fbfbfa;   /* Notion sidebar tonu */
  --shadow:0 1px 3px rgba(15,15,15,.1), 0 2px 8px rgba(15,15,15,.08);
  --shadow-sm:0 1px 2px rgba(15,15,15,.04);
  --shadow-lg:0 4px 16px rgba(15,15,15,.12);
  --r:6px;
  --rl:8px;
  --rxl:12px;
}
/* ═══════════════════════════════════════════════════════════════
   LUCİDE İKON CSS — currentColor ile her yerde uyumlu
   Kullanım: <svg class="licon"><use href="#i-home"></use></svg>
   Boyut: licon-sm (14), licon (16), licon-lg (20), licon-xl (24)
   ═══════════════════════════════════════════════════════════════ */
.licon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
  color: inherit;
  stroke: currentColor;
  fill: none;
}
.licon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.licon-lg { width: 20px; height: 20px; vertical-align: -4px; }
.licon-xl { width: 24px; height: 24px; vertical-align: -5px; }
.licon-xxl { width: 32px; height: 32px; vertical-align: -7px; }

/* Buton içindeki ikonlar */
.btn .licon, button .licon {
  margin-right: 6px;
}
.btn .licon:only-child, button .licon:only-child {
  margin-right: 0;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;height:100vh;overflow:hidden;margin:0;padding:0}#ana-uygulama{display:none;flex-direction:row;width:100vw;height:100vh;overflow:hidden}
.sidebar{width:230px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}

/* Aydınlık temada sidebar'ı düzgün göstermek için override'lar */
html[data-theme="light"] .nav-sec{color:var(--text3)}
html[data-theme="light"] .nav-item{color:var(--text2)}
html[data-theme="light"] .nav-item:hover{background:var(--bg3);color:var(--text)}
html[data-theme="light"] .nav-item.active{background:var(--bg4);color:var(--text);border-color:var(--border2)}
html[data-theme="light"] .nav-dot{background:var(--text3)}
html[data-theme="light"] .nav-item.active .nav-dot{background:var(--accent)}
html[data-theme="light"] .nav-badge{background:var(--bg3);border-color:var(--border);color:var(--text2)}
html[data-theme="light"] .nav-item.active .nav-badge{background:var(--accent);border-color:var(--accent);color:#fff}
html[data-theme="light"] .sb-bottom{border-top-color:var(--border)}
html[data-theme="light"] .nav-sub-item{color:var(--text2)}
html[data-theme="light"] .nav-sub-item:hover{background:var(--bg3);color:var(--text)}

/* Tema toggle butonu */
.theme-toggle-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:8px 12px;margin-bottom:8px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text2);font-size:12px;font-family:inherit;cursor:pointer;
  transition:all .15s;
}
.theme-toggle-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.theme-toggle-btn .icon{font-size:14px}
.logo{padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.logo-t{font-size:14px;font-weight:600;letter-spacing:-.3px}
.logo-s{font-size:11px;color:var(--text3);margin-top:2px;font-family:'IBM Plex Mono',monospace}
.nav-sec{padding:14px 12px 4px;font-size:10px;font-weight:600;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 6px;border-radius:var(--r);cursor:pointer;color:rgba(255,255,255,.6);font-size:13px;transition:all .15s;border:1px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.15)}
.nav-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0}
.nav-item.active .nav-dot{background:#60a5fa}
.nav-badge{margin-left:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);font-size:10px;padding:1px 6px;border-radius:10px;font-family:'IBM Plex Mono',monospace}
.nav-item.active .nav-badge{background:var(--accent2);border-color:var(--accent);color:#fff}
.gd-tab-btn{flex:1;padding:8px;border:none;border-radius:8px;background:transparent;color:var(--text3);cursor:pointer;font-size:12px;font-family:inherit;font-weight:500;transition:all .15s}
.gd-tab-btn:hover{background:var(--bg4);color:var(--text)}
.gd-tab-aktif{background:var(--accent)!important;color:#fff!important;font-weight:600!important}
.rapor-tip-btn{padding:6px 10px;border:none;border-radius:6px;background:transparent;color:var(--text3);cursor:pointer;font-size:11px;font-family:inherit;font-weight:500;transition:all .15s}
.tev-step{color:var(--text3);font-weight:500;transition:all .2s}
.tev-step-aktif{background:var(--accent);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(220,93,72,.4)}
.tev-step-tamam{background:rgba(34,197,94,.15);color:var(--green);font-weight:600}

/* === MANUEL TEV — DOSYA AĞACI === */
.tev-klasor-grup{border-bottom:1px solid var(--border)}
.tev-klasor-bas{padding:8px 12px;background:var(--bg3);font-size:11px;color:var(--text2);font-weight:600;position:sticky;top:0;z-index:1}
.tev-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.tev-row:hover{background:var(--bg3)}
.tev-row-aktif{background:rgba(99,102,241,.12)!important;border-left:3px solid #6366f1;padding-left:7px}
.tev-row .tev-cb{cursor:pointer;width:14px;height:14px;flex-shrink:0}
.tev-row-ikon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.tev-row-info{flex:1;min-width:0}
.tev-row-ad{font-size:12px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tev-row-meta{font-size:10px;color:var(--text3);margin-top:1px}
.tev-row-aksiyon{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s}
.tev-row:hover .tev-row-aksiyon,.tev-row-aktif .tev-row-aksiyon{opacity:1}
.tev-mini-btn{background:transparent;border:1px solid var(--border);color:var(--text2);width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}
.tev-mini-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}

/* === MANUEL TEV — MERGE MODAL === */
.tev-merge-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--bg2);cursor:move;transition:background .15s}
.tev-merge-row:hover{background:var(--bg3)}
.tev-merge-handle{font-size:14px;color:var(--text3);flex-shrink:0;cursor:grab}
.tev-merge-num{background:var(--accent);color:#fff;width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.tev-merge-thumb{width:54px;height:54px;object-fit:cover;border-radius:4px;background:#fff;flex-shrink:0;border:1px solid var(--border)}
.tev-merge-thumb-pdf{display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(239,68,68,.08);color:#ef4444}
.tev-merge-info{flex:1;min-width:0}
.tev-merge-ad{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tev-merge-meta{font-size:10px;color:var(--text3);margin:2px 0 4px}
.tev-merge-etiket{width:100%;font-size:11px;padding:4px 6px;background:var(--bg);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:inherit}
.tev-merge-etiket:focus{outline:none;border-color:var(--accent)}
.tev-merge-cikar{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:3px;flex-shrink:0}
.tev-merge-cikar:hover{background:rgba(239,68,68,.1);color:#ef4444}

/* === TOPLU GİRİŞ (TG) + KOD MIGRATION === */
.tg-tablo{width:100%;border-collapse:collapse;font-size:11px}
.tg-tablo thead{position:sticky;top:0;background:var(--bg3);z-index:2}
.tg-tablo th{text-align:left;padding:8px 8px;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);font-size:10px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.tg-tablo td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.tg-tablo tbody tr:hover{background:var(--bg3)!important}
.tg-tablo input[type=checkbox]{cursor:pointer;width:14px;height:14px}

/* === GÜNLÜK RAPOR — YENİLENMİŞ AKARDİYON === */
.gr-personel-kart{border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);margin-bottom:8px;overflow:hidden;transition:border-color .15s}
.gr-personel-kart:hover{border-color:var(--border2)}
.gr-personel-bas{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;user-select:none;transition:background .12s}
.gr-personel-bas:hover{background:var(--bg3)}
.gr-personel-ok{font-size:10px;color:var(--text3);width:12px;flex-shrink:0;transition:transform .15s}
.gr-personel-isim{font-size:13px;font-weight:600;color:var(--text);padding-left:8px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-personel-rol{font-size:10px;color:var(--text3);background:var(--bg3);padding:2px 8px;border-radius:10px;flex-shrink:0}
.gr-personel-sayilar{display:flex;gap:4px;flex-shrink:0}
.gr-rozet{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600}
.gr-rozet-manuel{background:rgba(35,131,226,.12);color:#5b9ee8}
.gr-rozet-sistem{background:rgba(168,85,247,.15);color:#c084fc}
.gr-rozet-toplam{background:rgba(59,130,246,.15);color:#60a5fa}
.gr-personel-icerik{padding:0 14px 12px 24px;border-top:1px solid var(--border);background:var(--bg)}
.gr-bolum{margin-top:12px}
.gr-bolum-bas{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;padding:6px 0 4px;border-bottom:1px solid var(--border);margin-bottom:6px}
.gr-bolum-bos{font-size:11px;color:var(--text3);padding:8px 0 4px;font-style:italic}
.gr-satir{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px dashed var(--border)}
.gr-satir:last-child{border-bottom:0}
.gr-saat{font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace;flex-shrink:0;min-width:36px;margin-top:2px}
.gr-ikon{font-size:14px;flex-shrink:0;margin-top:1px;width:18px;text-align:center}
.gr-icerik-wrap{flex:1;min-width:0}
.gr-satir-bas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.gr-dosya{font-size:10px;color:var(--accent);font-family:'IBM Plex Mono',monospace;font-weight:600;cursor:pointer;background:rgba(220,93,72,.08);padding:1px 6px;border-radius:3px}
.gr-dosya:hover{background:rgba(220,93,72,.18)}
.gr-dosya-yok{font-size:10px;color:var(--text3);font-style:italic}
.gr-baslik{font-size:11px;font-weight:600;color:var(--text);margin-bottom:1px}
.gr-icerik{font-size:11px;color:var(--text2);line-height:1.45;word-break:break-word}
.gr-icerik-alt{display:block;font-size:10px;color:var(--text3);margin-top:2px}

/* eski tablo (geriye dönük) */
.tev-tablo{width:100%;border-collapse:collapse;font-size:11.5px}
.tev-tablo thead{position:sticky;top:0;background:var(--bg2);z-index:2}
.tev-tablo th{text-align:left;padding:8px 10px;font-weight:600;color:var(--text2);border-bottom:1px solid var(--border);font-size:10px;letter-spacing:.4px;text-transform:uppercase}
.tev-tablo td{padding:6px 10px;border-bottom:1px solid var(--border)}
.tev-tablo tbody tr:hover{background:var(--bg3)}
.tev-tablo tbody tr.tev-belirsiz{background:rgba(251,146,60,.05)}
.tev-tablo tbody tr.tev-hatali{background:rgba(239,68,68,.05)}
.tev-guven-bar{display:inline-block;width:40px;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;vertical-align:middle;margin-right:4px}
.tev-guven-bar > div{height:100%;border-radius:3px;transition:width .3s}
.rapor-tip-btn:hover{background:var(--bg4);color:var(--text)}
.rapor-tip-aktif{background:var(--accent)!important;color:#fff!important;font-weight:600!important}
.ia-sub-btn{padding:7px 10px;border:none;border-radius:5px;background:transparent;color:var(--text3);cursor:pointer;font-size:11.5px;font-family:inherit;font-weight:500;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:4px}
.ia-sub-btn:hover{background:var(--bg4);color:var(--text)}
.ia-sub-aktif{background:var(--accent)!important;color:#fff!important;font-weight:600!important}
.sb-bottom{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
.page-title{font-size:15px;font-weight:600}
.topbar-date{font-size:11px;color:var(--text3);font-family:'IBM Plex Mono',monospace}

/* ── CANLI SAAT-TARİH WIDGET ─────────────────────────────── */
.live-clock{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px;
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'IBM Plex Mono',monospace;
  position:relative;
  overflow:hidden;
  transition:all .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.03);
}
.live-clock::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.4;
}
.live-clock:hover{
  border-color:var(--border2);
  box-shadow:0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.live-clock .lc-pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent), 0 0 0 0 var(--accent);
  animation:lcPulse 2s infinite ease-in-out;
  flex-shrink:0;
}
@keyframes lcPulse{
  0%,100%{box-shadow:0 0 8px var(--accent), 0 0 0 0 rgba(255,107,91,.5);transform:scale(1)}
  50%{box-shadow:0 0 12px var(--accent), 0 0 0 6px rgba(255,107,91,0);transform:scale(1.1)}
}
html[data-theme="light"] .live-clock .lc-pulse{
  box-shadow:0 0 8px var(--accent), 0 0 0 0 rgba(37,99,235,.4);
  animation:lcPulseLight 2s infinite ease-in-out;
}
@keyframes lcPulseLight{
  0%,100%{box-shadow:0 0 8px var(--accent), 0 0 0 0 rgba(37,99,235,.4);transform:scale(1)}
  50%{box-shadow:0 0 12px var(--accent), 0 0 0 6px rgba(37,99,235,0);transform:scale(1.1)}
}
.live-clock .lc-time{
  font-size:14px;font-weight:600;
  color:var(--text);
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.live-clock .lc-time .lc-sec{
  font-size:11px;color:var(--text3);font-weight:500;margin-left:1px;
}
.live-clock .lc-divider{
  width:1px;height:18px;
  background:linear-gradient(180deg,transparent,var(--border2),transparent);
  flex-shrink:0;
}
.live-clock .lc-date{
  display:flex;flex-direction:column;gap:1px;line-height:1;
}
.live-clock .lc-date-day{
  font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.3px;
}
.live-clock .lc-date-sub{
  font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:500;
}
.btn{padding:7px 14px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:12px;font-family:'IBM Plex Sans',sans-serif;transition:all .15s;white-space:nowrap}
.btn:hover{background:var(--bg4);color:var(--text)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn-danger{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#f87171}
.btn-danger:hover{background:rgba(239,68,68,.25);color:#fca5a5}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:3px 8px;font-size:11px}
.content{flex:1;overflow-y:auto;padding:20px 24px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px;margin-bottom:16px}
.card-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat-card.blue::before{background:var(--accent)}.stat-card.green::before{background:var(--green)}.stat-card.red::before{background:var(--red)}.stat-card.yellow::before{background:var(--yellow)}
.stat-label{font-size:11px;color:var(--text3);margin-bottom:6px;font-family:'IBM Plex Mono',monospace}
.stat-value{font-size:28px;font-weight:300;line-height:1}
.stat-value.blue{color:var(--accent)}.stat-value.green{color:var(--green)}.stat-value.red{color:var(--red)}.stat-value.yellow{color:var(--yellow)}
.stat-sub{font-size:11px;color:var(--text3);margin-top:4px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid;white-space:nowrap}
.badge-blue{background:rgba(59,130,246,.12);color:#60a5fa;border-color:rgba(59,130,246,.3)}
.badge-green{background:rgba(34,197,94,.12);color:#4ade80;border-color:rgba(34,197,94,.3)}
.badge-red{background:rgba(239,68,68,.12);color:#f87171;border-color:rgba(239,68,68,.3)}
.badge-yellow{background:rgba(234,179,8,.12);color:#facc15;border-color:rgba(234,179,8,.3)}
.badge-gray{background:rgba(139,154,181,.1);color:var(--text2);border-color:var(--border)}
.progress-bar{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden;flex:1}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3);color:var(--text)}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}
input,select,textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-family:'IBM Plex Sans',sans-serif;font-size:13px;padding:8px 12px;outline:none;transition:border-color .15s;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
select option{background:var(--bg3)}
label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.form-group{margin-bottom:14px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px)}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:24px;width:520px;max-height:85vh;overflow-y:auto;max-width:calc(100vw - 32px)}
.modal-title{font-size:16px;font-weight:600;margin-bottom:20px}
.asama-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border);margin-bottom:4px;background:var(--bg3);transition:all .15s}
.asama-row:hover{border-color:var(--border2)}
.asama-row.aktif{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.05)}
.asama-row.tamam{opacity:.55}
.asama-plan-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border);margin-bottom:4px;background:var(--bg3);transition:all .15s}
.asama-plan-row:hover{border-color:var(--border2);background:var(--bg4)}
.asama-kod{font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--text3);min-width:32px}
.asama-baslik{flex:1;font-size:12px}
.grup-header{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r);margin-bottom:4px;margin-top:12px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--bg3)}
.gorev-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:12px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;transition:border-color .15s}
.gorev-card:hover{border-color:var(--border2)}
.gorev-card.done{opacity:.45}
.checkbox{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border2);flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;background:transparent}
.checkbox.checked{background:var(--green);border-color:var(--green);color:#fff;font-size:9px}
.personel-grid{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:14px}
.personel-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);padding:16px;transition:border-color .15s}
.personel-card:hover{border-color:var(--border2)}
.loading{display:flex;align-items:center;justify-content:center;padding:48px;color:var(--text3);font-size:12px;gap:8px}
.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:48px 20px;color:var(--text3)}
.empty-title{font-size:14px;margin-bottom:4px;color:var(--text2)}
.view{display:none}.view.active{display:block}
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--r);padding:10px 16px;font-size:13px;z-index:9999;display:flex;align-items:center;gap:8px;animation:slideUp .2s ease;max-width:320px}
@keyframes slideUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeInDown{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mono{font-family:'IBM Plex Mono',monospace}
.scrollbar::-webkit-scrollbar{width:4px}
.scrollbar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.drag-handle{cursor:grab;color:var(--text3);font-size:14px;padding:4px 6px;border-radius:4px;user-select:none;transition:color .15s}
.drag-handle:hover{color:var(--text);background:var(--bg4)}
.drag-handle:active{cursor:grabbing}
.drag-over{outline:2px dashed var(--accent);outline-offset:2px;opacity:.7}
.dragging{opacity:.4;transform:scale(.98)}
.rol-hiyar-kart.drag-over{outline:2px dashed var(--accent);outline-offset:2px;background:rgba(59,130,246,.08)!important;}
.ac-item.ac-aktif{background:var(--bg4)!important;}
.ilce-badge{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--bg4);color:var(--text3);border:1px solid var(--border);font-family:'IBM Plex Mono',monospace}

/* ── Ruhsat Tablosu v2 Stilleri ──────────────────────── */
.ruhsat-tablo-wrap{position:relative}
.ruhsat-tablo tr{transition:background .12s,transform .12s}
.ruhsat-tablo tbody tr{cursor:pointer;position:relative}
.ruhsat-tablo tbody tr:nth-child(even) td{background:color-mix(in oklab, var(--bg2) 50%, var(--bg3))}
.ruhsat-tablo tbody tr:hover td{background:var(--bg3)!important}
.ruhsat-tablo tbody tr:hover{transform:translateY(-1px)}
.ruhsat-tablo td{padding:11px 12px;vertical-align:middle}

/* Sol durum şeridi — ilk td'ye gömülmüş pseudo */
.ruhsat-tablo tbody tr td:first-child{position:relative;padding-left:16px}
.ruhsat-tablo tbody tr td:first-child::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--durum-renk,transparent);
  transition:background .2s;
}
.ruhsat-tablo tr.durum-devam td:first-child::before{background:var(--accent)}
.ruhsat-tablo tr.durum-gecikme td:first-child::before{background:var(--red)}
.ruhsat-tablo tr.durum-bekliyor td:first-child::before{background:var(--yellow)}
.ruhsat-tablo tr.durum-tamamlandi td:first-child::before{background:var(--green)}

/* Müteahhit avatarı — 2 harf initial */
.m-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:600;
  color:#fff;letter-spacing:.3px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.m-avatar-wrap{display:flex;align-items:center;gap:8px;max-width:180px}
.m-avatar-text{flex:1;min-width:0;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Aşama kodu + başlığı küçük kart */
.asama-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;
  padding:3px 8px;border-radius:4px;background:var(--bg3);border:1px solid var(--border);
  max-width:220px;
}
.asama-chip .kod{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--accent);flex-shrink:0;font-size:10px}
.asama-chip .baslik{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Son aktivite */
.son-aktivite{font-size:10px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:4px}

/* Mini bilgi badge'leri (görev + evrak) */
.mini-badge{
  display:inline-flex;align-items:center;gap:3px;font-size:10px;
  padding:2px 6px;border-radius:10px;background:var(--bg3);
  color:var(--text2);border:1px solid var(--border);font-family:inherit;
}
.mini-badge.acik{background:rgba(234,179,8,.12);color:var(--yellow);border-color:rgba(234,179,8,.3)}
.mini-badge.tamam{background:rgba(34,197,94,.12);color:var(--green);border-color:rgba(34,197,94,.3)}

/* Kompakt mod (toggle) */
.ruhsat-tablo.kompakt td{padding:6px 10px;font-size:11px}
.ruhsat-tablo.kompakt .m-avatar{width:20px;height:20px;font-size:9px}
.ruhsat-tablo.kompakt .asama-chip{padding:2px 6px}
.ruhsat-tablo.kompakt .son-aktivite{display:none}
.ruhsat-tablo.kompakt .mini-badge{font-size:9px;padding:1px 5px}
.ruhsat-tablo.kompakt tbody tr:hover{transform:none}

/* Üst bar kompakt/geniş toggle */
.view-mod-toggle{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:2px}
.view-mod-toggle button{border:none;background:transparent;color:var(--text3);font-size:11px;padding:5px 10px;cursor:pointer;border-radius:4px;font-family:inherit;transition:all .15s}
.view-mod-toggle button.active{background:var(--accent);color:#fff}
.view-mod-toggle button:not(.active):hover{background:var(--bg4);color:var(--text2)}

/* Evrak thumbnail */
.evrak-thumb{
  width:48px;height:48px;flex-shrink:0;
  border-radius:4px;overflow:hidden;background:var(--bg4);
  border:1px solid var(--border);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;transition:all .15s;
}
.evrak-thumb:hover{
  border-color:var(--accent);
  transform:scale(1.05);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.evrak-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.evrak-thumb .ikon{font-size:20px;opacity:.5}
.evrak-thumb .play-ikon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);opacity:0;transition:opacity .15s;
  font-size:18px;color:#fff;
}
.evrak-thumb:hover .play-ikon{opacity:1}

/* Thumbnail placeholder (yoksa) */
.evrak-thumb-placeholder{
  width:48px;height:48px;flex-shrink:0;
  border-radius:4px;background:var(--bg4);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;opacity:.5;
}

/* Evrak satır yeni layout (thumbnail ile) */
.evrak-row-v2{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:4px;transition:all .12s;
}
.evrak-row-v2:hover{background:var(--bg3);border-color:var(--border2)}
.evrak-row-v2 .info{flex:1;min-width:0}
.evrak-row-v2 .baslik{font-size:12px;color:var(--text);font-weight:500;margin-bottom:2px}
.evrak-row-v2 .meta{font-size:10px;color:var(--text3);display:flex;gap:8px;align-items:center}
.drop-menu{display:none;position:absolute;top:100%;left:0;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);z-index:200;min-width:180px;max-height:280px;overflow-y:auto;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.drop-menu::-webkit-scrollbar{width:4px}.drop-menu::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.drop-item{padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:400}
.drop-item:hover{background:var(--bg4);color:var(--text)}
.drop-item.active{background:rgba(59,130,246,.12);color:var(--accent)}
.drop-item .cnt{font-size:10px;color:var(--text3);font-family:'IBM Plex Mono',monospace;flex-shrink:0}

/* ONAY MODALI */
.confirm-modal{background:var(--bg2);border:1px solid var(--red);border-radius:var(--rl);padding:28px;width:420px;max-width:calc(100vw - 32px);text-align:center}
.confirm-icon{font-size:36px;margin-bottom:12px}
.confirm-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.confirm-sub{font-size:13px;color:var(--text2);margin-bottom:24px;line-height:1.6}
.confirm-btns{display:flex;gap:10px;justify-content:center}

/* ÇIKAR BUTONU */
.btn-cikar{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#f87171;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:'IBM Plex Sans',sans-serif;transition:all .15s}
.btn-cikar:hover{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.nav-sub-item{display:flex;align-items:center;padding:7px 12px 7px 24px;margin:1px 6px;border-radius:var(--r);cursor:pointer;color:rgba(255,255,255,.4);font-size:12px;transition:all .15s}
.nav-sub-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.nav-sub-item.active{color:#60a5fa;background:rgba(59,130,246,.15)}

/* ═══════════════════════════════════════════════════════════════
   MOBİL RESPONSIVE — 768px ve altı
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   MOBİL TASARIM — FAZ 1: Temel Altyapı + Bottom Nav + Touch
   Tüm değişiklikler @media (max-width: 768px) altında.
   Masaüstü kodunu BOZMAZ.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── HAMBURGER ─── */
  #mobile-menu-btn { display: inline-block !important; }

  /* ─── SIDEBAR: yan kayar (hala kullanılabilir) ─── */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    box-shadow: 2px 0 20px rgba(0,0,0,.3);
    padding-bottom: 80px !important; /* Bottom nav için yer */
  }
  .sidebar.mobil-acik { transform: translateX(0); }
  #sidebar-overlay.mobil-acik { display: block; }

  /* ─── ANA İSKELET ─── */
  #ana-uygulama { height: 100vh; height: 100dvh; }
  .main {
    width: 100%;
    padding-bottom: 68px !important; /* Bottom nav için boşluk bırak */
  }

  /* ─── TOPBAR (kompakt) ─── */
  .topbar {
    padding: 10px 12px;
    flex-wrap: nowrap;
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg2);
  }
  .page-title { font-size: 14px; }
  .topbar-date { display: none; }

  /* ─── LIVE CLOCK ─── */
  .live-clock { padding: 5px 8px; gap: 6px; }
  .live-clock .lc-time { font-size: 12px; }
  .live-clock .lc-time .lc-sec { display: none; }
  .live-clock .lc-divider { height: 14px; }
  .live-clock .lc-date-day { font-size: 10px; }
  .live-clock .lc-date-sub { display: none; }

  /* ─── SCROLL ALANI ─── */
  .scroll-area { padding: 12px !important; }

  /* ─── STAT KARTLARI ─── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card { padding: 12px !important; min-height: 80px; }
  .stat-value { font-size: 24px !important; }
  .stat-label { font-size: 10px !important; }
  .stat-sub { font-size: 10px !important; }

  /* ─── GRID'LER ─── */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ─── KARTLAR ─── */
  .card { padding: 12px !important; }
  .card-title { font-size: 13px; }

  /* ─── TABLOLAR: kart görünümü için hazırlık ─── */
  table { font-size: 11px; }
  .scrollbar table { min-width: 700px; }

  /* ═══════════════════════════════════════════════════════════════
     FAZ 3: TABLOLAR → KART GÖRÜNÜMÜ (mobile)
     Mevcut HTML'i koruyup CSS ile kart gibi render eder
     ═══════════════════════════════════════════════════════════════ */

  /* === RUHSAT TABLOSU === */
  /* Tablo container'ı yatay kaydırmayı bırak */
  #ruhsat-tablo,
  table.ruhsat-tablo {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Ruhsat tablo wrap container */
  .ruhsat-tablo-wrap {
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Filtre + arama satırı: SADECE Ruhsat sayfası filtre barı */
  #view-dosyalar > div:first-of-type {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #dosya-arama {
    width: 100% !important;
    order: -1; /* En üstte arama */
    margin-bottom: 6px;
  }
  /* Görünüm modu butonları mobilde gizle */
  #ruhsat-mod-toggle { display: none !important; }
  /* Filtre butonları çoklu satır */
  .ruhsat-filt-btn, [onclick*="filterDosya"] {
    flex: 1 1 auto;
    min-width: 80px !important;
  }
  table.ruhsat-tablo thead {
    display: none !important; /* Mobilde başlıklar kart içinde */
  }
  table.ruhsat-tablo tbody {
    display: block !important;
  }
  table.ruhsat-tablo tbody tr {
    display: block !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    cursor: pointer;
    /* Sol durum şeridi */
    border-left-width: 4px !important;
    position: relative;
  }
  table.ruhsat-tablo tbody tr.durum-devam { border-left-color: var(--blue) !important; }
  table.ruhsat-tablo tbody tr.durum-gecikme { border-left-color: var(--red) !important; }
  table.ruhsat-tablo tbody tr.durum-tamamlandi { border-left-color: var(--green) !important; }
  table.ruhsat-tablo tbody tr.durum-bekliyor { border-left-color: var(--text3) !important; }

  table.ruhsat-tablo tbody td {
    display: block !important;
    padding: 6px 0 !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* 1. hücre (Dosya No) — başlık vurgusu */
  table.ruhsat-tablo tbody td:nth-child(1) {
    padding-bottom: 4px !important;
    font-size: 13px !important;
  }
  /* 2. hücre (Ada/Parsel) */
  table.ruhsat-tablo tbody td:nth-child(2) {
    font-size: 14px !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    margin-bottom: 4px !important;
  }
  /* 3. (İlçe) - inline yan yana */
  table.ruhsat-tablo tbody td:nth-child(3),
  table.ruhsat-tablo tbody td:nth-child(4) {
    display: inline-block !important;
    width: auto !important;
    font-size: 11px;
    color: var(--text3);
    padding-right: 8px !important;
  }
  table.ruhsat-tablo tbody td:nth-child(3)::before { content: '📍 '; opacity: .6; }
  table.ruhsat-tablo tbody td:nth-child(4)::before { content: '👷 '; opacity: .6; }

  /* 5,6 (Mimar, Takip Eden) */
  table.ruhsat-tablo tbody td:nth-child(5),
  table.ruhsat-tablo tbody td:nth-child(6) {
    font-size: 11px;
    padding: 4px 0 !important;
    border-top: 1px dashed rgba(255,255,255,.05) !important;
  }
  table.ruhsat-tablo tbody td:nth-child(5)::before {
    content: '👤 Mimar: ';
    color: var(--text3);
    font-size: 10px;
  }
  table.ruhsat-tablo tbody td:nth-child(6)::before {
    content: '👀 Takip: ';
    color: var(--text3);
    font-size: 10px;
  }
  table.ruhsat-tablo tbody td:nth-child(5) select,
  table.ruhsat-tablo tbody td:nth-child(6) select {
    width: auto;
    max-width: 200px;
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: 32px;
  }

  /* 7 (Aktif Aşama) */
  table.ruhsat-tablo tbody td:nth-child(7) {
    padding: 6px 0 !important;
    border-top: 1px dashed rgba(255,255,255,.05) !important;
  }
  table.ruhsat-tablo tbody td:nth-child(7)::before {
    content: '⚡ Aşama: ';
    color: var(--text3);
    font-size: 10px;
  }

  /* 8 (İlerleme) */
  table.ruhsat-tablo tbody td:nth-child(8) {
    padding: 6px 0 !important;
  }

  /* 9 (Durum) — inline rozetler */
  table.ruhsat-tablo tbody td:nth-child(9) {
    display: inline-block !important;
    width: auto !important;
    padding: 4px 0 !important;
  }

  /* 10 (Aksiyon butonları) */
  table.ruhsat-tablo tbody td:last-child {
    padding-top: 8px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 6px;
    display: flex !important;
    gap: 6px;
    flex-wrap: wrap;
  }
  table.ruhsat-tablo tbody td:last-child .btn-xs {
    flex: 1;
    min-width: 0;
  }

  /* === GÖREV TABLOSU (gorev listesi) === */
  /* Gorev tablosu - SADECE class ile target, id ile DEĞİL (yan etki engellenir) */
  table.gorev-tablo {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  table.gorev-tablo thead { display: none !important; }
  table.gorev-tablo tbody { display: block !important; }
  table.gorev-tablo tbody tr {
    display: block !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    border-left-width: 4px !important;
  }
  table.gorev-tablo tbody td {
    display: block !important;
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
  }

  /* === PERSONEL GRİDİ ZATEN TEK SÜTUN — kart stili güçlendir === */
  #personel-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #personel-grid > div {
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }

  /* === MUTAHIT GRİDİ === */
  #mutahit-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* === BİLDİRİM LİSTESİ === */
  #bildirimler-liste > div, #bildirim-liste > div {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }

  /* === MİNİ TABLOLAR (basit listeler) — kart stili === */
  .mini-tablo, .basit-tablo {
    display: block !important;
  }
  .mini-tablo thead, .basit-tablo thead {
    display: none !important;
  }
  .mini-tablo tbody, .basit-tablo tbody { display: block !important; }
  .mini-tablo tbody tr, .basit-tablo tbody tr {
    display: block !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    margin-bottom: 6px !important;
  }
  .mini-tablo tbody td, .basit-tablo tbody td {
    display: flex !important;
    justify-content: space-between !important;
    padding: 3px 0 !important;
    border: none !important;
    font-size: 12px;
  }

  /* Mobil tablo-kart class'ı (manuel kullanım için) */
  .mobil-kart-liste { display: block; }
  .mobil-kart-liste .mobil-kart {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }

  /* ═══════════════════════════════════════════════════════════════
     FAZ 4: SAYFA İÇERİKLERİ — Dashboard, Günlük Rapor, Toplu Rapor
     ═══════════════════════════════════════════════════════════════ */

  /* === DASHBOARD === */
  #view-dashboard .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Dashboard'daki büyük grid'ler tek sütun (stats-grid hariç) */
  #view-dashboard > div.grid-2,
  #view-dashboard > div.grid-3 {
    grid-template-columns: 1fr !important;
  }

  /* === GÜNLÜK RAPOR === */
  /* Üst filtre bar mobile yumuşat — SADECE doğrudan ilk seviye */
  #view-gunluk-rapor > div > div:first-child[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Tarih seçici tam genişlik */
  #gr-tarih-metin {
    font-size: 14px !important;
  }
  /* Personel filtre dropdown'u tam genişlik */
  #gr-kullanici-filtre {
    width: 100% !important;
    margin-bottom: 6px;
  }
  /* Arama kutusu tam genişlik */
  #gr-arama {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 6px;
  }
  /* İstatistik rozetleri */
  #gr-istatistik {
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start !important;
  }
  #gr-istatistik > span {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  /* Source checkboxları kompakt */
  #view-gunluk-rapor label[style*="font-size"] {
    font-size: 11px !important;
    padding: 6px 8px;
    background: var(--bg3);
    border-radius: 6px;
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
  /* Personel kart akordeonu */
  .gr-personel-kart {
    margin-bottom: 10px;
  }
  .gr-personel-bas {
    padding: 12px !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .gr-personel-isim {
    font-size: 13px !important;
  }
  .gr-personel-rol {
    font-size: 10px !important;
    width: 100%;
  }
  .gr-personel-sayilar {
    font-size: 10px !important;
  }
  .gr-rozet {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }
  /* PDF butonu küçült */
  .gr-personel-bas .btn-xs {
    font-size: 9px !important;
    padding: 4px 7px !important;
  }

  /* === TOPLU RAPOR === */
  /* Personel + tarih satırı: dikey */
  #view-gorevler [style*="grid-template-columns:1fr 1fr"],
  #modal-toplu-rapor [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Drop zone */
  #tr-drop-zone {
    padding: 20px !important;
  }
  /* Madde satırları — kompakt */
  .tr-madde-row {
    gap: 4px !important;
    padding: 8px !important;
  }
  /* Sayı badge'i */
  #tr-sayi {
    font-size: 10px !important;
  }

  /* === GÖREV TAKİBİ (İş Takibi) === */
  /* Sekme barı yatay scroll */
  .gorev-tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .gorev-tab-bar > button {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  /* === YETKİ YÖNETİMİ === */
  /* Sekme barı yatay scroll */
  [id*="yt-tab"] {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  /* === RUHSAT DETAY MODAL — FAZ 5 === */
  /* Üst başlık satırı (dosya kodu, durum dropdown, aksiyon ikonları) */
  #modal-dosya-detay > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Sağdaki aksiyon butonları satırı — wrap olsun, küçük kal */
  #modal-dosya-detay > div:first-child > div:nth-child(2) {
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100%;
    margin-top: 6px;
  }

  /* Sekme seçici (Aşamalar / İlerleme / Tarihçe) — ikinci div */
  #modal-dosya-detay > div:nth-child(2) {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow-x: auto;
  }
  #modal-dosya-detay > div:nth-child(2) > button {
    flex: 1 !important;
    font-size: 12px !important;
    padding: 10px 8px !important;
    min-width: 0 !important;
    white-space: nowrap;
  }

  /* Detay üst başlık metni (sol kısım) — wrap edebilir */
  #modal-dosya-detay > div:first-child > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* Aşama row'ları — KALSIN ama wrap KALDIRILDI */
  .asama-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  /* Aşama row içindeki * stil verme - SİLİNDİ */

  /* Detay buton grupları */
  #modal-dosya-detay .btn-xs {
    padding: 6px 8px !important;
    font-size: 10px !important;
    min-height: 30px;
  }

  /* === FORM SAYFALARI (Yeni Ruhsat, Yeni Personel, vs.) === */
  /* Tüm form grid'leri tek sütun */
  [id^="view-yeni-"] [style*="grid-template-columns"]:not([style*="grid-template-columns: 1fr"]) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Form içindeki butonlar tam genişlik (kaydet, iptal) */
  [id^="view-yeni-"] [style*="text-align:right"],
  [id^="view-yeni-"] [style*="text-align: right"] {
    text-align: center !important;
  }
  [id^="view-yeni-"] [style*="text-align:right"] > button,
  [id^="view-yeni-"] [style*="text-align: right"] > button {
    width: 100%;
    margin-top: 6px;
  }

  /* === MİNİ MENÜ / DROPDOWN'lar === */
  .drop-menu {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    top: 50% !important;
    transform: translateY(-50%);
    max-height: 70vh;
    overflow-y: auto;
  }

  /* === ARAMA SAYFASI === */
  #global-arama-sonuclar > div {
    padding: 12px !important;
  }
  #genel-arama-sonuclar {
    max-height: 60vh !important;
  }

  /* === BİLDİRİM PANELİ === */
  #bildirim-paneli {
    width: 92vw !important;
    right: 4vw !important;
    left: 4vw !important;
    max-height: 70vh !important;
  }

  /* === BUGÜN SAYFASI özelinde === */
  #view-bugun .stat-card {
    padding: 12px !important;
    min-height: 90px;
  }
  #view-bugun .stat-value {
    font-size: 22px !important;
  }
  #view-bugun > div .card {
    padding: 12px !important;
  }

  /* === GENEL: scrollbar mobil için ince === */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

  /* === DROPDOWN/SELECT mobile native göstergesi === */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23999' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px !important;
    appearance: none;
    -webkit-appearance: none;
  }

  /* === TOAST mesajları bottom navi bağlamına alta sığsın === */
  .toast {
    bottom: 76px !important; /* bottom-nav (60) + safe-area + margin */
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
  }

  /* === LOADING SPINNER === */
  .spinner {
    width: 24px !important;
    height: 24px !important;
  }

  /* === EVRAK YÜKLEME MODAL === */
  #mobilevrak-paneli, #modal-mobil-evrak-sec {
    max-width: 100% !important;
    max-height: 90vh !important;
  }

  /* === PDF/ÖNİZLEME modal === */
  #modal-doc-onizle, [id*="onizle"] iframe {
    width: 100% !important;
    height: 70vh !important;
  }

  /* === SUPABASE AYAR === */
  #view-supabase-ayar input {
    font-family: monospace !important;
    font-size: 13px !important;
  }

  /* === KARANLIK / AÇIK TEMA UYUMU === */
  body[data-tema="acik"] table.ruhsat-tablo tbody tr {
    background: #fff !important;
    border-color: #e5e7eb !important;
  }

  /* ─── FORM ELEMANLARI ─── */
  /* iOS zoom önleme: font 16px+ */
  input, select, textarea {
    font-size: 16px !important;
    padding: 12px !important;
    min-height: 44px; /* Touch target */
  }
  label { font-size: 11px !important; }

  /* ─── BUTONLAR (Apple/Google touch target: min 44x44px) ─── */
  .btn, button.btn {
    padding: 12px 16px !important;
    font-size: 13px !important;
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm, button.btn-sm {
    padding: 9px 12px !important;
    font-size: 12px !important;
    min-height: 38px;
    min-width: 38px;
  }
  .btn-xs, button.btn-xs {
    padding: 7px 10px !important;
    font-size: 11px !important;
    min-height: 32px;
    min-width: 32px;
  }
  /* Icon-only butonlar daha geniş */
  .btn-icon { min-width: 44px !important; }

  /* Buton grubu: yatay kaydırmaya gerek kalmasın */
  .btn-group { flex-wrap: wrap !important; gap: 6px; }

  /* ─── DETAY PANELİ ─── */
  #detay-asama-list, #detay-tarihce-icerik, #detay-ilerleme-liste {
    max-height: calc(100vh - 320px) !important;
  }

  /* ─── KÜÇÜK ETİKETLER ─── */
  .ilce-badge { font-size: 10px; padding: 3px 7px; }
  .asama-chip { font-size: 10px; padding: 4px 6px; }
  .asama-chip .kod { font-size: 9px; }
  .asama-chip .baslik {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── GÖREV KARTLARI ─── */
  .gorev-card { padding: 12px !important; flex-wrap: wrap !important; }

  /* ─── PERSONEL GRID ─── */
  #personel-grid { grid-template-columns: 1fr !important; }

  /* ─── GÜNLÜK RAPOR ÜST BAR ─── */
  #view-gunluk-rapor > div > div[style*="display:flex"] { flex-wrap: wrap; }

  /* ─── ARAMA SONUÇLARI ─── */
  #genel-arama-sonuclar { font-size: 11px; }

  /* ─── DETAY PANEL ─── */
  .detay-panel-wrap, .detay-layout {
    grid-template-columns: 1fr !important;
  }

  /* ─── RUHSAT ÜST INFO ─── */
  #dosya-detay-ustbar {
    flex-wrap: wrap !important;
  }

  /* ─── BOTTOM NAVIGATION BAR ─── */
  #bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 40;
    padding: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,.15);
    justify-content: space-around;
    align-items: stretch;
  }
  #bottom-nav .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text3);
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    padding: 4px;
    border-radius: 8px;
    transition: all .15s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
  }
  #bottom-nav .bn-item:active {
    background: rgba(220,93,72,.15);
    transform: scale(.95);
  }
  #bottom-nav .bn-item.aktif {
    color: var(--accent);
  }
  #bottom-nav .bn-item .bn-ikon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
  }
  #bottom-nav .bn-item.aktif .bn-ikon {
    transform: scale(1.1);
  }
  #bottom-nav .bn-item .bn-rozet {
    position: absolute;
    top: 2px;
    right: calc(50% - 18px);
    background: var(--red);
    color: white;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg2);
  }

  /* ─── MODAL: Mobilde tam ekran, bottom sheet stili ─── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal, .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Bottom safe area (iPhone X+ home indicator) */
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  /* Modal başlığı sticky olsun */
  .modal-title {
    position: sticky;
    top: -16px; /* Modal padding'ini telafi */
    background: var(--bg2);
    z-index: 5;
    margin: -16px -16px 12px -16px !important;
    padding: 14px 18px 12px 18px !important;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    /* Bottom sheet handle (üstte ince gri çizgi) */
    background-image: linear-gradient(transparent, transparent), linear-gradient(var(--text3), var(--text3));
    background-size: auto, 40px 4px;
    background-position: center, center 4px;
    background-repeat: no-repeat;
    padding-top: 18px !important;
  }
}

/* Masaüstünde bottom nav gizli */
#bottom-nav { display: none; }

/* iOS Safe Area (iPhone X+ çentik) */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* Sadece mobilde görünecek öğeler */
.mobil-only { display: none; }
@media (max-width: 768px) {
  .mobil-only { display: inline-block; }
  .masaustu-only { display: none !important; }
}

/* Ruhsat tablosu — Dosya No (1.) ve Durum (9.) sütunlarını gizle (kullanıcı isteği) */
/* Veri arka planda korunur, sadece görsel gizleme */
.ruhsat-tablo thead tr th:nth-child(1),
.ruhsat-tablo thead tr th:nth-child(9),
.ruhsat-tablo tbody tr td:nth-child(1),
.ruhsat-tablo tbody tr td:nth-child(9) {
  display: none !important;
}

/* Hızlı evrak grid — responsive */
/* Tablet (768px-1100px) — 4 kolon */
@media (max-width: 1100px) {
  .hizli-evrak-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* Mobil (<=600px) — 3 kolon */
@media (max-width: 600px) {
  .hizli-evrak-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GİRİŞ EKRANI CSS — eski <style id="giris-style"> bloğu
   Login ekranı özel stilleri (sadece login açıkken aktif)
   Kaynak: index.html lines 1405-1620
   ═══════════════════════════════════════════════════════════════ */

#giris-ekrani *{box-sizing:border-box}

/* Arka plan dekorasyonu — subtle radial glow + grid pattern */
.giris-bg-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.giris-bg-glow{position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle, rgba(35,131,226,.08) 0%, transparent 70%);
  filter:blur(40px)}
.giris-bg-glow.g1{top:-200px;right:-150px}
.giris-bg-glow.g2{bottom:-250px;left:-200px;background:radial-gradient(circle, rgba(35,131,226,.05) 0%, transparent 70%)}
html[data-theme="light"] .giris-bg-glow{background:radial-gradient(circle, rgba(35,131,226,.06) 0%, transparent 70%)}

/* Decorative grid pattern — Notion workspace hissi */
.giris-bg-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%)}
html[data-theme="light"] .giris-bg-grid{
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px)}

/* Card — premium centered */
.giris-card{position:relative;width:100%;max-width:460px;padding:40px 36px 30px;
  background:var(--bg);border:1px solid var(--border);border-radius:12px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06),
    0 24px 48px rgba(0,0,0,.08);
  z-index:1;
  animation:giris-fade-in .4s ease-out}
html[data-theme="dark"] .giris-card,
html:not([data-theme="light"]) .giris-card{
  background:var(--bg2);
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 8px 24px rgba(0,0,0,.4),
    0 24px 48px rgba(0,0,0,.5)}

@keyframes giris-fade-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Logo bölümü — frame'siz, doğal görünüm, 2 kat büyütülmüş */
.giris-logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}
.giris-logo-frame{position:relative;width:320px;max-width:100%;
  margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
  /* JPEG arka planının köşeleriyle uyumlu yumuşak geçiş */
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.18))}
html[data-theme="dark"] .giris-logo-frame,
html:not([data-theme="light"]) .giris-logo-frame{
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.5))}
.giris-logo-frame img{width:100%;height:auto;display:block;border-radius:14px}
.giris-app-sub{font-size:13px;color:var(--text3);letter-spacing:.04em;text-align:center;font-weight:500}

/* Form etiketleri */
.giris-label{font-size:11px;font-weight:500;color:var(--text2);
  display:flex;align-items:center;gap:6px;margin-bottom:7px;letter-spacing:.01em}
.giris-label svg{opacity:.55;flex-shrink:0}

/* Inputlar */
.giris-input-wrap{position:relative;margin-bottom:16px}
.giris-input{width:100%;font-size:14px;padding:11px 14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:inherit;
  transition:all .15s ease;outline:none}
html[data-theme="dark"] .giris-input,
html:not([data-theme="light"]) .giris-input{background:var(--bg3)}
.giris-input::placeholder{color:var(--text3)}
.giris-input:hover{border-color:var(--border2)}
.giris-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(35,131,226,.15);
  background:var(--bg)}
html[data-theme="dark"] .giris-input:focus,
html:not([data-theme="light"]) .giris-input:focus{background:var(--bg2)}

/* Şifre için ekstra padding */
.giris-input.with-toggle{padding-right:42px}

/* Telefon prefix kutusu (+90) */
.giris-phone-row{display:flex;align-items:stretch;gap:0;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg2);overflow:hidden;
  transition:all .15s ease}
html[data-theme="dark"] .giris-phone-row,
html:not([data-theme="light"]) .giris-phone-row{background:var(--bg3)}
.giris-phone-row:hover{border-color:var(--border2)}
.giris-phone-row:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(35,131,226,.15);
  background:var(--bg)}
html[data-theme="dark"] .giris-phone-row:focus-within,
html:not([data-theme="light"]) .giris-phone-row:focus-within{background:var(--bg2)}

.giris-phone-prefix{display:flex;align-items:center;gap:6px;
  padding:0 12px;font-size:14px;color:var(--text2);font-weight:500;
  background:var(--bg3);border-right:1px solid var(--border);
  user-select:none;letter-spacing:.02em}
html[data-theme="dark"] .giris-phone-prefix,
html:not([data-theme="light"]) .giris-phone-prefix{background:var(--bg4);border-right-color:var(--border)}
.giris-phone-flag{font-size:14px;line-height:1}

.giris-phone-input{flex:1;width:100%;font-size:14px;padding:11px 14px;
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:inherit;
  letter-spacing:.02em}
.giris-phone-input::placeholder{color:var(--text3);letter-spacing:.02em}

/* Form satırı — beni hatırla / şifremi unuttum */
.giris-form-row{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;flex-wrap:wrap;gap:8px}

/* Beni hatırla checkbox */
.giris-remember{display:flex;align-items:center;gap:8px;cursor:pointer;
  user-select:none;font-size:12.5px;color:var(--text2);
  padding:4px 2px;border-radius:4px;transition:color .15s}
.giris-remember:hover{color:var(--text)}
.giris-remember input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.giris-remember-box{width:16px;height:16px;border:1.5px solid var(--border2);
  border-radius:4px;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .15s ease;position:relative}
html[data-theme="dark"] .giris-remember-box,
html:not([data-theme="light"]) .giris-remember-box{background:var(--bg3)}
.giris-remember:hover .giris-remember-box{border-color:var(--accent)}
.giris-remember input:checked + .giris-remember-box{
  background:var(--accent);border-color:var(--accent)}
.giris-remember-check{opacity:0;color:#fff;transition:opacity .15s ease}
.giris-remember input:checked + .giris-remember-box .giris-remember-check{opacity:1}
.giris-remember input:focus-visible + .giris-remember-box{
  box-shadow:0 0 0 3px rgba(35,131,226,.2)}

/* Şifremi unuttum link */
.giris-forgot{font-size:12.5px;color:var(--accent);
  background:none;border:none;cursor:pointer;font-family:inherit;
  padding:4px 2px;border-radius:4px;transition:color .15s;
  text-decoration:none}
.giris-forgot:hover{color:var(--accent2);text-decoration:underline}
.giris-forgot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Göz toggle butonu */
.giris-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text3);
  padding:8px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  transition:all .15s ease}
.giris-toggle:hover{color:var(--text);background:var(--bg3)}
html[data-theme="dark"] .giris-toggle:hover,
html:not([data-theme="light"]) .giris-toggle:hover{background:var(--bg4)}

/* Hata mesajı */
.giris-hata{display:none;align-items:flex-start;gap:8px;
  color:var(--red);font-size:12.5px;line-height:1.4;
  margin-bottom:14px;padding:10px 12px;border-radius:8px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);
  border-left:3px solid var(--red);
  animation:giris-shake .35s ease-out}
html[data-theme="light"] .giris-hata{background:rgba(224,62,62,.06);border-color:rgba(224,62,62,.2);border-left-color:var(--red)}
.giris-hata svg{flex-shrink:0;margin-top:1px}
.giris-hata.active{display:flex}

@keyframes giris-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

/* Ana Giriş butonu */
.giris-btn{width:100%;padding:12px 16px;
  background:var(--accent);border:1px solid var(--accent);
  color:#fff;font-size:14px;font-weight:600;
  border-radius:8px;cursor:pointer;font-family:inherit;
  transition:all .15s ease;
  box-shadow:0 1px 2px rgba(35,131,226,.2);
  letter-spacing:.01em}
.giris-btn:hover:not(:disabled){
  background:var(--accent2);border-color:var(--accent2);
  box-shadow:0 4px 12px rgba(35,131,226,.3), 0 1px 2px rgba(35,131,226,.2);
  transform:translateY(-1px)}
.giris-btn:active:not(:disabled){transform:translateY(0);
  box-shadow:0 1px 2px rgba(35,131,226,.2)}
.giris-btn:disabled{opacity:.7;cursor:wait}

/* Yardım metni */
.giris-yardim{text-align:center;margin-top:18px;font-size:11.5px;color:var(--text3);
  line-height:1.5}

/* Geliştirici bypass */
.giris-bypass{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.giris-bypass-btn{width:100%;padding:9px 12px;
  background:rgba(234,179,8,.08);
  border:1px dashed rgba(234,179,8,.35);
  color:#eab308;font-size:11.5px;font-weight:500;
  border-radius:7px;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .15s ease;letter-spacing:.01em}
.giris-bypass-btn:hover{background:rgba(234,179,8,.14);border-color:rgba(234,179,8,.5)}

/* Alt versiyon yazısı */
.giris-footer{position:absolute;bottom:24px;left:0;right:0;text-align:center;
  font-size:10.5px;color:var(--text3);letter-spacing:.05em;z-index:1;
  opacity:.6}

/* Mobil */
@media (max-width:480px){
  .giris-card{max-width:none;width:calc(100% - 24px);padding:28px 22px 22px;border-radius:14px}
  .giris-logo-frame{width:240px;max-width:90%}
  .giris-phone-prefix{padding:0 10px;font-size:13px}
}