:root {
  /* Lacivert + beyaz + nötr gri — daha ferah, sakin dengelenmiş palet */
  --navy-950:#0b1626;
  --navy-900:#10233c;   /* üst bar */
  --navy-850:#16304f;
  --navy-800:#1d3c62;
  --navy-700:#2a4d76;   /* ana aksan / buton */
  --navy-600:#356197;
  --navy-500:#4a77a8;
  --navy-400:#7899bf;
  --bg:#f6f8fb;         /* sayfa arka planı (yumuşak, ferah) */
  --ink:#1a2c44;        /* koyu lacivert ana metin (biraz yumuşatıldı) */
  --ink-2:#33475f;
  --muted:#5f7286;
  --muted-2:#8a99ab;
  --line:#a9bace;       /* NET çerçeve çizgisi */
  --line-2:#cdd8e5;     /* iç ayraç (belirgin) */
  --panel:#eaf0f7;      /* açık başlık şeridi */
  --zebra:#eef3f9;      /* belirgin zebra şeridi */
  --row-hover:#dfe8f3;  /* satır hover (zebradan koyu) */
  --white:#ffffff;
  --on-dark:#d8e2ee;    /* üst bar üstü metin */
  --on-dark-mute:#9db0c6;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,35,60,.04), 0 4px 16px -8px rgba(16,35,60,.12);
  --shadow-pop:0 24px 64px -22px rgba(16,35,60,.34);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,monospace;
  /* geriye dönük takma adlar */
  --slate-700:#33465c; --slate-600:#4a5c72; --slate-500:#5a6a7e; --slate-400:#8593a4;
  --slate-300:#c3cdd9; --slate-200:#dbe2ea; --slate-100:#eef2f6; --slate-50:#f7f9fb;
  --accent:#2a4d76; --accent-2:#356197; --accent-soft:#eef3f8;
  --green:#2a4d76; --green-bg:#eaf0f6; --amber:#5f7286; --amber-bg:#f0f4f9; --red:#4a5c72; --red-bg:#f0f4f9;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--navy-600); font-weight:500; text-decoration:none; }
a:hover { color:var(--navy-700); text-decoration:underline; }

/* ---------------- Login ---------------- */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--white); }
.auth-hero { background:linear-gradient(160deg,var(--navy-950),var(--navy-800) 70%,var(--navy-700)); color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:72px; }
.auth-hero::after { content:""; position:absolute; inset:0;
  background:radial-gradient(700px 340px at 82% 8%,rgba(120,153,191,.18),transparent),radial-gradient(520px 320px at 8% 92%,rgba(74,119,168,.16),transparent); }
.auth-hero .brand { font-size:30px; font-weight:700; letter-spacing:1.5px; position:relative; line-height:1.15; }
.auth-hero .tagline { color:var(--navy-400); margin-top:12px; font-size:13px; letter-spacing:1.8px; position:relative; }
.auth-hero .feat { margin-top:52px; position:relative; }
.auth-hero .feat div { margin:15px 0; color:#c9d8ea; font-size:14.5px; display:flex; gap:13px; align-items:center; }
.auth-hero .feat .dot { width:6px; height:6px; border-radius:50%; background:var(--navy-400); flex:none; }
.auth-form-side { display:flex; align-items:center; justify-content:center; padding:48px; background:var(--white); }
.auth-card { width:100%; max-width:370px; }
.auth-card h1 { font-size:23px; margin:0 0 8px; letter-spacing:-.2px; }
.auth-card p.sub { color:var(--muted); margin:0 0 30px; }
/* Parola göster/gizle + beni hatırla */
.pw-wrap { position:relative; }
.pw-wrap input { width:100%; padding-right:44px; }
.pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer;
  padding:6px; color:var(--muted-2); display:flex; align-items:center; border-radius:6px; }
.pw-eye:hover { color:var(--navy-700); background:var(--slate-100); }
.remember { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin:-8px 0 18px; cursor:pointer; user-select:none; }
.remember input { width:16px; height:16px; accent-color:var(--navy-700); cursor:pointer; margin:0; }

/* ---------------- Üst bar ---------------- */
.appbar { position:fixed; top:0; left:0; right:0; height:62px; background:var(--navy-900); border-bottom:1px solid rgba(255,255,255,.06); z-index:50; }
.appbar-inner { height:100%; max-width:1340px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:20px; }
.appbar .brand { font-size:15.5px; font-weight:700; letter-spacing:.8px; color:#fff; white-space:nowrap; }
.topnav { display:flex; align-items:stretch; gap:2px; height:100%; flex:1; overflow-x:auto; }
.topnav a { display:flex; align-items:center; height:100%; padding:0 13px; color:var(--on-dark-mute); font-weight:500; font-size:13.5px;
  border-bottom:2px solid transparent; white-space:nowrap; transition:.15s; }
.topnav a:hover { color:#fff; text-decoration:none; }
.topnav a.active { color:#fff; border-bottom-color:var(--navy-400); font-weight:600; }
.topnav .tag { margin-left:7px; background:var(--navy-600); color:#fff; font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; }
.appbar-right { display:flex; align-items:center; gap:16px; }
.appbar-right .who { text-align:right; line-height:1.25; }
.appbar-right .who .nm { font-size:13px; font-weight:600; color:#fff; }
.appbar-right .who .rl { font-size:11px; color:var(--on-dark-mute); text-transform:uppercase; letter-spacing:.5px; }
.appbar-right .av { width:36px; height:36px; border-radius:50%; background:var(--navy-700); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px; }
.appbar-right .out { color:var(--on-dark-mute); font-size:13px; padding:7px 12px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); transition:.15s; }
.appbar-right .out:hover { color:#fff; border-color:var(--navy-500); background:rgba(255,255,255,.04); text-decoration:none; }

/* Hamburger düğmesi + arka karartma (masaüstünde gizli) */
.nav-toggle { display:none; width:40px; height:40px; flex:none; background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-sm); cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-toggle span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:.2s; }
body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.nav-scrim { display:none; }
.topnav a.nav-logout { display:none; }   /* yalnızca mobil hamburger menüde görünür */

.main { margin-top:62px; }
.container { max-width:1340px; margin:0 auto; padding:34px 28px 72px; }

/* ---------------- Sayfa başlığı ---------------- */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.page-head h1 { font-size:24px; margin:0; letter-spacing:-.3px; font-weight:700; color:var(--navy-900); }
.page-head .desc { color:var(--muted); font-size:13.5px; margin-top:6px; }
.crumb { color:var(--muted); font-size:12px; margin-bottom:10px; text-transform:uppercase; letter-spacing:.7px; font-weight:600; }
.crumb a { color:var(--navy-600); } .crumb a:hover { color:var(--navy-800); }

/* ---------------- Kart ---------------- */
.card { background:var(--white); border:2px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-pad { padding:26px 28px; }

/* Başlık bandı: üst bar rengi (lacivert), net ayrım */
.card-head { padding:15px 28px; border-bottom:none; display:flex; align-items:center; justify-content:space-between;
  background:var(--navy-900); border-radius:12px 12px 0 0; gap:12px; }
.card-head .section-title { margin:0; color:#fff; }
/* Lacivert bant üstündeki butonlar */
.card-head .btn-outline { background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.card-head .btn-outline:hover { background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.card-head .btn-primary { background:#fff; color:var(--navy-800); box-shadow:none; }
.card-head .btn-primary:hover { background:var(--accent-soft); color:var(--navy-900); }
/* Katlanabilir kart (akordiyon başlık) */
.card-head.acc-head { cursor:pointer; user-select:none; transition:background .15s; }
.card-head.acc-head:hover { background:var(--navy-850); }
.card-head.acc-head .acc-chev { color:#fff; font-size:11px; line-height:1; opacity:.85; transition:transform .2s; flex:none; }
.card.acc-closed .acc-head .acc-chev { transform:rotate(-90deg); }
.card.acc-closed .acc-body { display:none; }

.section-title { font-size:12.5px; font-weight:700; letter-spacing:.9px; color:var(--navy-700); text-transform:uppercase; margin:0 0 18px; }
/* card-pad içindeki ilk başlık da tam genişlik lacivert banda dönüşür */
.card-pad > .section-title:first-child,
.card-pad > h3.card-title:first-child {
  margin:-26px -28px 22px; padding:14px 28px; background:var(--navy-900); color:#fff;
  border-radius:12px 12px 0 0; letter-spacing:.9px; }
.section-sub { color:var(--muted); font-size:13.5px; margin:-10px 0 16px; }
h3.card-title { margin:0 0 18px; font-size:13px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--navy-700); }
.divider { border:none; border-top:2px solid var(--line-2); margin:24px 0; }

/* ---------------- Grid ---------------- */
.grid { display:grid; gap:22px; }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }

/* ---------------- KPI ---------------- */
.stat { background:var(--white); border:2px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow); transition:.15s; }
.stat:hover { box-shadow:0 2px 4px rgba(16,35,60,.05), 0 10px 28px -14px rgba(16,35,60,.22); }
.stat .num { font-size:30px; font-weight:700; line-height:1; letter-spacing:-.6px; color:var(--navy-800); }
.stat .lbl { color:var(--muted); font-size:12px; margin-top:10px; text-transform:uppercase; letter-spacing:.6px; }
.stat .bar { height:3px; width:30px; background:var(--navy-600); border-radius:2px; margin-bottom:16px; }

/* ---------------- Butonlar ---------------- */
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 17px; border-radius:var(--radius-sm); border:1px solid transparent;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; text-decoration:none; line-height:1; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--navy-700); color:#fff; box-shadow:0 1px 2px rgba(16,35,60,.12); }
.btn-primary:hover { background:var(--navy-800); }
.btn-success { background:var(--navy-700); color:#fff; box-shadow:0 1px 2px rgba(16,35,60,.12); }
.btn-success:hover { background:var(--navy-800); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--panel); color:var(--navy-900); }
.btn-outline { background:var(--white); border-color:var(--line); color:var(--ink); }
.btn-outline:hover { border-color:var(--navy-500); color:var(--navy-700); background:var(--accent-soft); }
.btn-danger { background:var(--white); border-color:var(--line); color:var(--ink); }
.btn-danger:hover { border-color:var(--navy-600); color:var(--navy-700); }
.btn-sm { padding:7px 12px; font-size:12.5px; }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ---------------- Rozet ---------------- */
.badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.badge-live { background:var(--accent-soft); color:var(--navy-700); }
.badge-done { background:var(--panel); color:var(--muted); }
.badge-pending { background:#eef3f8; color:var(--navy-600); }
.badge-approved { background:var(--navy-700); color:#fff; }
.badge-rejected { background:var(--panel); color:var(--muted); }
.badge-role-admin { background:var(--navy-700); color:#fff; }
.badge-role-employee { background:#eef3f8; color:var(--navy-600); }

/* ---------------- Tablo (sakin, hafif çizgili) ---------------- */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th { text-align:left; padding:13px 18px; font-size:11px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--navy-800); border-bottom:2px solid var(--line);
  font-weight:800; background:var(--panel); white-space:nowrap; }
table.tbl td { padding:14px 18px; border-bottom:1px solid var(--line-2);
  color:var(--ink-2); vertical-align:middle; }
table.tbl tbody tr { transition:background .12s; }
table.tbl tbody tr:last-child td { border-bottom:none; }
table.tbl tr.clickable { cursor:pointer; }
/* Zebra — düz tablolar (çift satırlı personel tablosu hariç, o ayrı ele alınır) */
table.tbl:not(.tbl-crew) tbody tr:nth-child(even) > td { background:var(--zebra); }
table.tbl:not(.tbl-crew) tbody tr:hover > td { background:var(--row-hover); }
.tbl .name { font-weight:600; color:var(--ink); }
.tbl .sub { font-size:12px; color:var(--muted-2); margin-top:2px; }
.tbl code, .mono { font-family:var(--mono); font-size:12.5px; color:var(--ink-2); }
.ship-cell { display:flex; align-items:center; gap:12px; }
.ship-cell .av { width:36px; height:36px; border-radius:var(--radius-sm); background:var(--navy-700); color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px; letter-spacing:.5px; }
.ship-cell .nm { font-weight:600; color:var(--ink); }
.ship-cell .sub { font-size:12px; color:var(--muted-2); }
.tbl-check { width:42px; }
.tbl input[type=checkbox], .dropzone + * input[type=checkbox] { width:16px; height:16px; accent-color:var(--navy-700); cursor:pointer; }

/* ---------------- Personel satır genişletme ---------------- */
.crew-row { cursor:pointer; }
.crew-row .crew-toggle { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center;
  color:var(--navy-500); background:var(--panel); border-radius:5px; transition:transform .18s,color .18s,background .18s; font-size:9px; flex:none; }
.crew-row:hover .crew-toggle { color:var(--navy-700); }
.crew-row.open .crew-toggle { transform:rotate(90deg); color:#fff; background:var(--navy-600); }
.crew-row.open > td { background:var(--accent-soft) !important; }
.crew-row.open > td:first-child { box-shadow:inset 4px 0 0 var(--navy-600); }

/* Personel tablosu zebra (crew-row/crew-detail çiftleri: 1,3,5… crew-row) */
table.tbl-crew tbody tr.crew-row:nth-child(4n+3):not(.open) > td { background:var(--zebra); }
table.tbl-crew tbody tr.crew-row:hover:not(.open) > td { background:var(--row-hover); }

.crew-detail { display:none; }
.crew-detail.open { display:table-row; }
.crew-detail > td { padding:0 !important;
  background:linear-gradient(var(--panel),var(--panel));
  border-bottom:2px solid var(--line) !important;
  box-shadow:inset 0 4px 8px -6px rgba(16,35,60,.28), inset 4px 0 0 var(--navy-600); }
.crew-detail-inner { padding:20px 22px; }
.cd-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
/* Her sütun net beyaz kart */
.cd-col { min-width:0; background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 17px; box-shadow:var(--shadow); }
.cd-title { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--navy-700);
  margin:0 0 14px; padding-bottom:11px; border-bottom:1.5px solid var(--line-2); display:flex; align-items:center; gap:9px; }
.cd-title::before { content:""; width:4px; height:14px; background:var(--navy-600); border-radius:2px; flex:none; }
.cd-or { display:flex; align-items:center; gap:12px; margin:14px 0 12px;
  font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--muted-2); }
.cd-or::before, .cd-or::after { content:""; flex:1; height:1px; background:var(--line-2); }
.cd-empty-note { font-size:12.5px; color:var(--muted); line-height:1.5; padding:2px 0; }
.cd-none { font-size:12.5px; color:var(--muted-2); font-style:italic; }
.cd-forms { display:flex; flex-direction:column; gap:8px; }
.doc-chip { display:flex; align-items:center; gap:11px; width:100%; padding:11px 13px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--slate-50); font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:inherit; transition:.15s; text-align:left; line-height:1.3; }
.doc-chip:hover { border-color:var(--navy-500); color:var(--navy-800); background:var(--accent-soft); }
.doc-chip:disabled { opacity:.5; cursor:not-allowed; }
.doc-chip .dc-ic { width:28px; height:28px; border-radius:6px; flex:none; display:grid; place-items:center; background:var(--navy-700); color:#fff; font-size:9px; font-weight:700; letter-spacing:.3px; }
.doc-chip.visa .dc-ic { background:var(--navy-500); }
.cd-docs { display:flex; flex-direction:column; gap:8px; }
.cd-doc { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); background:var(--slate-50); flex-wrap:wrap; }
.cd-doc .cd-doc-t { flex:1; min-width:140px; font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.35; }
@media (max-width:760px) { .cd-grid { grid-template-columns:1fr; gap:12px; } }

/* Belge var/yok işareti (✓ / ✗) */
.mark { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:6px; font-size:13px; font-weight:800; line-height:1; }
.mark-yes { background:#e4f2ea; color:#1f7a4d; }
.mark-no  { background:#f3e7e6; color:#b04a3f; }

/* Kompakt personel tablosu — çok sütun ekrana sığsın, kaydırma azalsın */
table.tbl-crew { font-size:11.5px; }
table.tbl-crew th { padding:8px 6px; font-size:9px; letter-spacing:.2px; }
table.tbl-crew td { padding:8px 6px; }
table.tbl-crew .name { font-weight:600; }
table.tbl-crew .crew-toggle { width:13px; height:13px; font-size:9px; }
table.tbl-crew .mark { width:19px; height:19px; font-size:10.5px; border-radius:5px; }
table.tbl-crew .badge { padding:2px 5px; font-size:9.5px; letter-spacing:.2px; }
table.tbl-crew .btn-sm { padding:4px 7px; font-size:10.5px; }
table.tbl-crew .mono { font-size:11px; }

/* ---------------- Geniş yükleme şeridi ---------------- */
.upload-band { display:flex; gap:24px; align-items:stretch; flex-wrap:wrap; }
.upload-band .dropzone { flex:1; min-width:280px; margin:0; display:flex; flex-direction:column; justify-content:center; }
.upload-band .ub-side { display:flex; flex-direction:column; justify-content:center; gap:14px; min-width:220px; }
.upload-band .ub-side label { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }

/* ---------------- Form ---------------- */
.field { margin-bottom:20px; }
.field label { display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.field input, .field select, .field textarea { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14.5px; background:#fff; color:var(--ink); transition:.15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--navy-500); box-shadow:0 0 0 3px rgba(74,119,168,.14); }
.field textarea { resize:vertical; min-height:90px; }
.field .hint { font-size:12px; color:var(--muted-2); margin-top:6px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

/* ---------------- Özel otomatik tamamlama listesi ---------------- */
.ac-wrap { position:relative; }
.ac-menu { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:40; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-pop);
  max-height:264px; overflow-y:auto; display:none; padding:5px; }
.ac-menu.open { display:block; }
.ac-item { display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:13.5px; color:var(--ink);
  cursor:pointer; border-radius:var(--radius-sm); transition:.1s; }
.ac-item:hover, .ac-item.active { background:var(--accent-soft); color:var(--navy-800); }
.ac-item .ac-ic { width:26px; height:26px; border-radius:6px; flex:none; display:grid; place-items:center;
  background:var(--navy-700); color:#fff; font-size:10px; font-weight:700; letter-spacing:.3px; }
.ac-item .ac-body { min-width:0; }
.ac-item .ac-t { font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-item .ac-s { font-size:11.5px; color:var(--muted-2); margin-top:1px; }
.ac-item:hover .ac-s, .ac-item.active .ac-s { color:var(--navy-600); }
.ac-empty { padding:11px 12px; font-size:12.5px; color:var(--muted-2); }

/* ---------------- Profesyonel form bölümleri ---------------- */
.form-section + .form-section { margin-top:26px; padding-top:24px; border-top:1px solid var(--line-2); }
.form-section-title { font-size:11px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--navy-600);
  margin:0 0 16px; display:flex; align-items:center; gap:9px; }
.form-section-title::before { content:""; width:3px; height:14px; background:var(--navy-600); border-radius:2px; flex:none; }
.form-section-title .fs-hint { font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted-2); font-size:11.5px; }
.field .req { color:var(--navy-600); font-weight:800; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:28px; padding-top:22px; border-top:1px solid var(--line-2); }
.form-actions .spacer { flex:1; }

/* ---------------- Sefer görünümü: üst iki sütun (yükle | bilgiler) ---------------- */
.vv-top { display:grid; grid-template-columns:400px 1fr; gap:22px; align-items:stretch; }
.vv-top .upload-band { flex-direction:column; }
.vv-top .upload-band .dropzone,
.vv-top .upload-band .ub-side { width:100%; min-width:0; }
@media (max-width:920px) { .vv-top { grid-template-columns:1fr; } }

/* ---------------- Kurumsal iki sütunlu edit düzeni ---------------- */
.edit-layout { display:grid; grid-template-columns:310px 1fr; gap:24px; align-items:start; max-width:1120px; }
.edit-aside { position:sticky; top:84px; color:#fff; border-radius:var(--radius); padding:30px 28px; overflow:hidden;
  background:linear-gradient(165deg,var(--navy-950),var(--navy-850) 72%,var(--navy-800)); box-shadow:var(--shadow); border:1px solid var(--navy-800); }
.edit-aside::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 220px at 88% 6%,rgba(120,153,191,.18),transparent),radial-gradient(360px 220px at 6% 96%,rgba(74,119,168,.16),transparent); }
.edit-aside > * { position:relative; }
.ea-kicker { font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--navy-400); font-weight:800; }
.ea-title { font-size:21px; font-weight:750; margin:11px 0 12px; letter-spacing:-.2px; line-height:1.2; }
.ea-desc { font-size:13px; color:#c6d5e8; line-height:1.65; margin:0; }
.ea-steps { list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.12); counter-reset:s; }
.ea-steps li { counter-increment:s; display:flex; align-items:center; gap:12px; padding:8px 0; font-size:13.5px; color:#dbe5f0; }
.ea-steps li::before { content:counter(s); width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,.08);
  color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; border:1px solid rgba(255,255,255,.16); }
.ea-tip { margin-top:24px; padding:13px 15px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm); font-size:12.5px; color:#c6d5e8; line-height:1.55; }
.edit-main .card { width:100%; }
@media (max-width:860px) {
  .edit-layout { grid-template-columns:1fr; }
  .edit-aside { position:static; }
  .ea-steps { display:flex; flex-wrap:wrap; gap:6px 18px; }
}

/* Belge durumu geçiş kartları */
.doc-toggles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.doc-toggle { display:flex; align-items:center; gap:11px; padding:14px 15px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; transition:.15s; background:var(--white); user-select:none; }
.doc-toggle:hover { border-color:var(--navy-500); background:var(--slate-50); }
.doc-toggle input { width:18px; height:18px; accent-color:var(--navy-700); flex:none; cursor:pointer; margin:0; }
.doc-toggle .dt-body { display:flex; flex-direction:column; gap:1px; }
.doc-toggle .dt-t { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
.doc-toggle .dt-s { font-size:11px; color:var(--muted-2); }
.doc-toggle:has(input:checked) { border-color:var(--navy-600); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--navy-600); }

/* ---------------- Alert ---------------- */
.alert { padding:13px 17px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:13.5px; font-weight:500; border:1px solid var(--line); background:var(--white); color:var(--ink-2); box-shadow:var(--shadow); }
.alert-success { border-left:3px solid var(--navy-600); }
.alert-error { border-left:3px solid var(--navy-900); background:var(--panel); }
.alert-info { border-left:3px solid var(--navy-500); }
.alert-warn { border-left:3px solid var(--muted); }

/* ---------------- Yardımcılar ---------------- */
.muted { color:var(--muted); }
.empty { text-align:center; padding:56px 20px; color:var(--muted-2); font-size:13.5px; }
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.tabs a { padding:11px 18px; color:var(--muted); font-weight:600; font-size:13.5px; border-bottom:2px solid transparent; }
.tabs a:hover { text-decoration:none; color:var(--navy-800); }
.tabs a.active { color:var(--navy-700); border-bottom-color:var(--navy-600); }
.flex { display:flex; } .items-center{align-items:center;} .gap{gap:12px;} .between{justify-content:space-between;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.kv { display:grid; grid-template-columns:180px 1fr; gap:0; font-size:13.5px; }
.kv-2 { grid-template-columns:repeat(2,180px 1fr); column-gap:28px; }
.kv dt { color:var(--muted); text-transform:uppercase; font-size:11.5px; letter-spacing:.4px; padding:13px 0; border-bottom:1px solid var(--line-2); }
.kv dd { margin:0; font-weight:600; color:var(--ink); padding:13px 0; border-bottom:1px solid var(--line-2); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom:none; }

/* ---------------- Belge üret kartları ---------------- */
.form-list { display:flex; flex-direction:column; gap:11px; }
.form-card { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 17px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); cursor:pointer; font-family:inherit; transition:.15s; }
.form-card:hover { border-color:var(--navy-500); background:var(--accent-soft); }
.form-card:disabled { opacity:.5; cursor:not-allowed; }
.form-card .fc-ic { width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-size:11px; font-weight:700; letter-spacing:.5px; background:var(--navy-700); color:#fff; }
.form-card.visa .fc-ic { background:var(--navy-500); }
.form-card .fc-body { flex:1; min-width:0; }
.form-card .fc-title { font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.35; }
.form-card .fc-meta { font-size:11px; color:var(--muted-2); margin-top:3px; text-transform:uppercase; letter-spacing:.3px; }
.form-card .fc-go { color:var(--muted-2); font-size:16px; flex:none; }
.form-card:hover .fc-go { color:var(--navy-700); }

/* ---------------- Yükleme ---------------- */
.dropzone { border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:30px 18px; text-align:center; background:var(--panel); transition:.15s; cursor:pointer; }
.dropzone:hover, .dropzone.drag { border-color:var(--navy-500); background:var(--accent-soft); }
.dropzone .dz-ic { font-size:13px; color:var(--navy-700); font-weight:700; letter-spacing:1px; }
.dropzone .dz-hint { color:var(--muted); font-size:12.5px; margin-top:10px; }
.dropzone .dz-files { font-size:12.5px; color:var(--navy-700); font-weight:600; margin-top:10px; min-height:16px; }

/* Türlü evrak yükleme (Pasaport / Cüzdan / Bilet) */
.doc-uploads { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.doc-up { border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:18px 12px; text-align:center;
  background:var(--panel); cursor:pointer; transition:.15s; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:120px; justify-content:center; }
.doc-up:hover, .doc-up.drag { border-color:var(--navy-500); background:var(--accent-soft); }
.doc-up.has { border-style:solid; border-color:var(--navy-600); background:var(--accent-soft); }
.doc-up .du-ic { width:34px; height:34px; border-radius:8px; background:var(--navy-700); color:#fff; display:grid; place-items:center;
  font-size:10px; font-weight:800; letter-spacing:.3px; }
.doc-up.has .du-ic { background:var(--navy-600); }
.doc-up .du-label { font-size:13.5px; font-weight:700; color:var(--ink); }
.doc-up .du-hint { font-size:11.5px; color:var(--muted-2); }
.doc-up .du-files { font-size:11.5px; color:var(--navy-700); font-weight:600; word-break:break-word; line-height:1.3; }
@media (max-width:600px){ .doc-uploads { grid-template-columns:1fr; } }

/* collapsible ---------------- */
details.disclosure { border-top:1px solid var(--line); margin-top:20px; }
details.disclosure > summary { list-style:none; cursor:pointer; padding:16px 0 4px; font-size:12px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px; }
details.disclosure > summary::-webkit-details-marker { display:none; }
details.disclosure > summary::before { content:"+"; font-size:15px; color:var(--muted-2); width:14px; }
details.disclosure[open] > summary::before { content:"–"; }

/* ---------------- İlerleme popup ---------------- */
.overlay { position:fixed; inset:0; background:rgba(11,22,38,.72); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:1000; }
.overlay.show { display:flex; }
.progress-modal { width:100%; max-width:410px; background:var(--white); border-radius:16px; padding:34px 30px; box-shadow:var(--shadow-pop); text-align:center; }
.progress-modal .pm-spin { width:46px; height:46px; margin:0 auto 20px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--navy-600); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.progress-modal h3 { margin:0 0 8px; font-size:15.5px; font-weight:700; }
.progress-modal .pm-msg { color:var(--muted); font-size:13px; min-height:18px; margin-bottom:18px; }
.pm-bar { height:6px; background:var(--line); border-radius:99px; overflow:hidden; }
.pm-bar > span { display:block; height:100%; width:0; background:var(--navy-600); border-radius:99px; transition:width .3s ease; }
.pm-bar.indet > span { width:35% !important; animation:indet 1.1s ease-in-out infinite; }
@keyframes indet { 0%{margin-left:-35%;} 100%{margin-left:100%;} }
.pm-count { font-size:11.5px; color:var(--muted-2); margin-top:10px; }
.progress-modal.done .pm-spin, .progress-modal.error .pm-spin { animation:none; position:relative; border-color:var(--navy-600); border-top-color:var(--navy-600); }
.progress-modal.done .pm-spin::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:var(--navy-600); font-size:22px; font-weight:700; }
.progress-modal.error .pm-spin { border-color:var(--muted-2); border-top-color:var(--muted-2); }
.progress-modal.error .pm-spin::after { content:"!"; position:absolute; inset:0; display:grid; place-items:center; color:var(--navy-700); font-size:22px; font-weight:700; }

/* ================= RESPONSIVE ================= */

/* Tablet ve altı: yatay menü yerine hamburger açılır menü (sağ üstte) */
@media (max-width:1200px) {
  .nav-toggle { display:flex; order:3; }        /* hamburger en sağa */
  .appbar .brand { margin-right:auto; order:1; } /* marka solda, boşluk sağa iter */
  .appbar-right { display:none; }               /* kullanıcı/çıkış menüye taşınır */
  .topnav a.nav-logout { display:flex; color:#fff; font-weight:600; }
  .topnav {
    position:fixed; top:62px; left:0; right:0; z-index:49;
    flex-direction:column; height:auto; max-height:calc(100vh - 62px); overflow-y:auto; overflow-x:hidden;
    background:var(--navy-900); border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 48px -14px rgba(0,0,0,.55); padding:6px 0; gap:0; display:none;
  }
  body.nav-open .topnav { display:flex; }
  .topnav a { width:100%; height:auto; padding:15px 24px; font-size:15px;
    border-bottom:1px solid rgba(255,255,255,.05); border-left:3px solid transparent; }
  .topnav a.active { border-bottom-color:rgba(255,255,255,.05); border-left-color:var(--navy-400);
    background:rgba(255,255,255,.05); }
  .topnav .tag { margin-left:auto; }
  body.nav-open .nav-scrim { display:block; position:fixed; inset:62px 0 0; background:rgba(8,17,31,.5); z-index:48; }
}

/* Küçük tablet / büyük telefon */
@media (max-width:860px) {
  .auth-wrap { grid-template-columns:1fr; } .auth-hero { display:none; }
  .grid-4 { grid-template-columns:1fr 1fr; } .grid-3,.grid-2 { grid-template-columns:1fr; }
  .form-row,.form-row-3 { grid-template-columns:1fr; }
  .doc-toggles { grid-template-columns:1fr; }
  .form-actions { flex-wrap:wrap; }
  .appbar-inner { padding:0 16px; gap:14px; }
  .appbar-right .who { display:none; }
  .container { padding:22px 16px 56px; }
  .page-head { align-items:stretch; }
  .page-head form { width:100%; flex-wrap:wrap; }
  .page-head form input[type=text], .page-head form select { flex:1 1 160px; min-width:0; }
  .card-pad { padding:20px 18px; }
  .card-pad > .section-title:first-child,
  .card-pad > h3.card-title:first-child { margin:-20px -18px 18px; padding:13px 18px; }
  .card-head { padding:13px 18px; }
  table.tbl th, table.tbl td { padding:11px 12px; }
  .kv-2 { grid-template-columns:160px 1fr; }
}

/* Telefon */
@media (max-width:560px) {
  html, body { overflow-x:hidden; }
  .grid-4 { grid-template-columns:1fr; }
  .container { padding:16px 12px 48px; }
  .appbar-inner { padding:0 12px; }
  .appbar .brand { font-size:12.5px; letter-spacing:.2px; }
  .appbar-right .av { display:none; }
  .page-head h1 { font-size:20px; }
  .page-head { margin-bottom:20px; }
  .stat { padding:18px; }
  .stat .num { font-size:26px; }
  .card-pad { padding:18px 15px; }
  .card-pad > .section-title:first-child,
  .card-pad > h3.card-title:first-child { margin:-18px -15px 16px; padding:12px 15px; }
  .card-head { padding:12px 15px; flex-wrap:wrap; gap:8px; }
  table.tbl th, table.tbl td { padding:10px 11px; font-size:13px; }
  .table-wrap { -webkit-overflow-scrolling:touch; }
  /* Anahtar-değer listesi tamamen dikey */
  .kv, .kv-2 { grid-template-columns:1fr; }
  .kv dt { padding:10px 0 2px; border-bottom:none; text-transform:uppercase; }
  .kv dd { padding:0 0 12px; border-bottom:1px solid var(--line-2); }
  .kv dt:last-of-type { border-bottom:none; }
  .btn { padding:9px 13px; }
  .upload-band .ub-side { min-width:0; }
  .cd-idgrid { grid-template-columns:1fr 1fr; }
}

/* ---------------- Mobil: geniş tabloları KART'a çevir ---------------- */
@media (max-width:600px) {
  /* Telefon: Panel'de yalnızca aktif çalışanlar (transfer takibi) kartları açık kalır;
     seferler ve diğer bölümler sağ üstteki hamburger menüden açılır. */
  .mobile-hidden { display:none !important; }
  .transfer-card { margin-top:0 !important; }
  table.tbl.cards { border:none; width:100%; }
  table.tbl.cards thead { display:none; }
  table.tbl.cards tbody, table.tbl.cards tbody tr, table.tbl.cards tbody td { display:block; width:auto; }
  table.tbl.cards tbody tr {
    border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--white);
    margin-bottom:12px; overflow:hidden;
  }
  table.tbl.cards tbody tr:hover { background:var(--white); }
  table.tbl.cards tbody td {
    border:none !important; border-bottom:1px solid var(--line-2) !important;
    padding:9px 14px; display:flex; justify-content:space-between; align-items:center; gap:14px;
    text-align:right; font-size:13.5px; white-space:normal; word-break:break-word;
  }
  table.tbl.cards tbody tr td:last-child { border-bottom:none !important; }
  table.tbl.cards tbody td::before {
    content:attr(data-label); flex:none; max-width:46%; text-align:left; color:var(--muted);
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; line-height:1.3;
  }
  table.tbl.cards tbody td.cell-primary {
    justify-content:flex-start; font-size:15px; font-weight:600; color:var(--ink);
    background:var(--panel); border-bottom:1px solid var(--line) !important; text-align:left;
    word-break:break-word; overflow-wrap:anywhere; min-width:0;
  }
  table.tbl.cards tbody td.cell-primary::before { display:none; }
  table.tbl.cards tbody td.cell-actions { justify-content:flex-end; flex-wrap:wrap; gap:8px; }
  table.tbl.cards tbody td.cell-actions::before { display:none; }
  table.tbl.cards tbody td:empty { display:none; }
  table.tbl.cards tbody tr.clickable:active { background:var(--zebra); }
  /* boş kategori satırı (colspan) */
  table.tbl.cards tbody td[colspan] { border:none !important; padding:0; }
  table.tbl.cards tbody td[colspan]::before { display:none; }

  /* Personel detay satırı: kart değil, açılır blok */
  table.tbl.cards tbody tr.crew-detail { display:none; border:none; border-radius:0; margin:-8px 0 12px; background:transparent; }
  table.tbl.cards tbody tr.crew-detail.open { display:block; }
  table.tbl.cards tbody tr.crew-detail > td { padding:0 !important; border:none !important; background:var(--panel); box-shadow:inset 4px 0 0 var(--navy-600); border-radius:0 0 var(--radius-sm) var(--radius-sm); }
  .crew-detail-inner { padding:15px 14px; }
  .cd-forms { gap:8px; }
  .doc-chip { width:100%; }
}