/* =================================================================
   MG MOBİL EKSPERTİZ — Panel Ortak Stilleri
   Admin & Bayi paneli için sidebar layout
   ================================================================= */

:root{
  --white:#FFFFFF;
  --white-2:#FAFAFA;
  --white-3:#F5F2EC;
  --navy:#1B3A5C;
  --navy-2:#0F2640;
  --navy-3:#2E4F75;
  --orange:#F26419;
  --orange-2:#C44516;
  --orange-soft:#FFB37A;
  --orange-tint:#FFF1E6;
  --ink:#0F1419;
  --ink-2:#1F2937;
  --muted:#5C6470;
  --muted-2:#8A8F9A;
  --line:#EAE5D8;
  --line-2:#F0EBDF;
  --success:#2D7A3E;
  --success-soft:#D9EDDD;
  --warning:#E8A317;
  --warning-soft:#FBEFD3;
  --danger:#C0392B;
  --danger-soft:#F5D9D5;
  --info:#2563EB;
  --info-soft:#DBE5FB;
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter Tight',system-ui,sans-serif;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --sb-w:260px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-2);
  background:var(--white-2);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,select,textarea{ font:inherit; }

h1,h2,h3,h4{ font-family:var(--display); margin:0; line-height:1.15; color:var(--navy); font-weight:600; letter-spacing:-.015em; }
h1{ font-size:28px; }
h2{ font-size:22px; }
h3{ font-size:18px; }
h4{ font-size:15px; font-weight:600; }
p{ margin:0 0 1em; }

/* =============== APP LAYOUT =============== */
.app{
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  min-height:100vh;
}

/* =============== SIDEBAR =============== */
.sidebar{
  background:var(--navy-2);
  color:var(--white);
  display:flex; flex-direction:column;
  position:sticky; top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:4px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:2px; }

.sb-brand{
  padding:22px 24px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sb-brand .mark{
  width:38px; height:auto;
  flex-shrink:0;
}
.sb-brand .text{
  display:flex; flex-direction:column;
  line-height:1;
}
.sb-brand .mg{
  font-family:var(--display);
  font-size:22px; font-weight:700;
  color:var(--white);
  letter-spacing:-.04em;
}
.sb-brand .role{
  font-size:10px; font-weight:600;
  letter-spacing:.24em;
  color:var(--orange-soft);
  margin-top:4px;
}

.sb-section{
  padding:18px 12px 8px;
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

.sb-nav{
  list-style:none; padding:0 12px; margin:0;
  display:flex; flex-direction:column; gap:2px;
}
.sb-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  font-size:14px; font-weight:500;
  color:rgba(255,255,255,.78);
  border-radius:8px;
  transition:all .15s;
  position:relative;
}
.sb-nav a svg{ width:18px; height:18px; flex-shrink:0; }
.sb-nav a:hover{
  background:rgba(255,255,255,.06);
  color:var(--white);
}
.sb-nav a.active{
  background:var(--orange);
  color:var(--white);
  box-shadow:0 4px 12px rgba(242,100,25,.25);
}
.sb-nav a .badge{
  margin-left:auto;
  background:var(--orange);
  color:var(--white);
  font-size:11px; font-weight:600;
  padding:2px 8px;
  border-radius:999px;
  min-width:22px; text-align:center;
}
.sb-nav a.active .badge{ background:rgba(255,255,255,.25); }

.sb-foot{
  margin-top:auto;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:12px;
}
.sb-foot .ava{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--orange);
  color:var(--white);
  font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sb-foot .info{ flex:1; min-width:0; }
.sb-foot .info strong{
  display:block; font-size:13px; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-foot .info span{
  font-size:11px; color:rgba(255,255,255,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.sb-foot .logout{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6);
  border-radius:6px;
  transition:all .15s;
}
.sb-foot .logout:hover{ background:rgba(192,57,43,.18); color:#FF6B5C; }
.sb-foot .logout svg{ width:16px; height:16px; }

/* =============== MAIN =============== */
.main{
  display:flex; flex-direction:column;
  min-width:0;
}

/* =============== TOPBAR =============== */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:16px 28px;
  display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:10;
}
.topbar .crumbs{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--muted);
}
.topbar .crumbs .sep{ color:var(--line); }
.topbar .crumbs .current{ color:var(--navy); font-weight:600; }
.topbar .search{
  flex:1; max-width:380px;
  position:relative;
  margin-left:auto;
}
.topbar .search input{
  width:100%;
  padding:9px 14px 9px 38px;
  font-size:14px;
  background:var(--white-2);
  border:1px solid var(--line);
  border-radius:8px;
  outline:none;
  transition:border-color .15s, background .15s;
}
.topbar .search input:focus{ border-color:var(--orange); background:var(--white); }
.topbar .search svg{
  position:absolute; left:12px; top:50%;
  transform:translateY(-50%);
  width:16px; height:16px;
  color:var(--muted-2);
}
.topbar .actions{ display:flex; align-items:center; gap:8px; }
.topbar .iconbtn{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  color:var(--ink-2);
  background:var(--white-2);
  border:1px solid var(--line);
  position:relative;
  transition:all .15s;
}
.topbar .iconbtn:hover{ border-color:var(--orange); color:var(--orange); }
.topbar .iconbtn svg{ width:17px; height:17px; }
.topbar .iconbtn .dot{
  position:absolute; top:7px; right:7px;
  width:8px; height:8px;
  background:var(--orange);
  border:2px solid var(--white);
  border-radius:50%;
}

/* =============== PAGE CONTAINER =============== */
.page{
  padding:28px;
  flex:1;
}
.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.page-head .title h1{ font-size:26px; }
.page-head .title p{ font-size:14px; color:var(--muted); margin:6px 0 0; }
.page-head .toolbar{ display:flex; gap:8px; flex-wrap:wrap; }

/* =============== BUTTONS =============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px;
  font-size:13.5px; font-weight:600;
  border-radius:8px;
  border:1px solid transparent;
  transition:all .15s;
  white-space:nowrap;
}
.btn svg{ width:15px; height:15px; }
.btn-primary{ background:var(--orange); color:var(--white); }
.btn-primary:hover{ background:var(--orange-2); }
.btn-secondary{ background:var(--navy); color:var(--white); }
.btn-secondary:hover{ background:var(--navy-2); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ background:var(--white-2); border-color:var(--navy); }
.btn-danger{ background:var(--danger); color:var(--white); }
.btn-danger:hover{ background:#9C2D22; }
.btn-success{ background:var(--success); color:var(--white); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }
.btn-lg{ padding:12px 22px; font-size:14.5px; }

/* =============== CARDS =============== */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.card-pad{ padding:22px; }
.card-head{
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.card-head h3{ font-size:16px; }
.card-body{ padding:22px; }
.card-foot{
  padding:14px 22px;
  border-top:1px solid var(--line);
  background:var(--white-2);
  display:flex; align-items:center; justify-content:space-between;
}

/* =============== KPI CARDS =============== */
.kpis{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:24px;
}
.kpi{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:20px 22px;
  position:relative;
  transition:all .2s;
}
.kpi:hover{
  border-color:var(--orange-soft);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,38,64,.06);
}
.kpi .ic{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--orange-tint);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.kpi .ic svg{ width:20px; height:20px; }
.kpi.success .ic{ background:var(--success-soft); color:var(--success); }
.kpi.warning .ic{ background:var(--warning-soft); color:var(--warning); }
.kpi.info .ic{ background:var(--info-soft); color:var(--info); }
.kpi .num{
  font-family:var(--display);
  font-size:30px; font-weight:600;
  color:var(--navy);
  line-height:1;
  margin-bottom:6px;
  letter-spacing:-.02em;
}
.kpi .lbl{
  font-size:13px;
  color:var(--muted);
}
.kpi .delta{
  margin-top:8px;
  font-size:12px;
  display:inline-flex; align-items:center; gap:4px;
  font-weight:600;
}
.kpi .delta.up{ color:var(--success); }
.kpi .delta.down{ color:var(--danger); }
@media (max-width:1100px){ .kpis{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .kpis{ grid-template-columns:1fr; } }

/* =============== TABLE =============== */
.table-wrap{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.table-toolbar{
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.table-toolbar .filter{
  padding:7px 12px;
  background:var(--white-2);
  border:1px solid var(--line);
  border-radius:7px;
  font-size:13px;
  color:var(--ink-2);
  cursor:pointer;
}
.table-toolbar .filter:hover{ border-color:var(--orange); }
.table-toolbar .filter.active{
  background:var(--navy);
  color:var(--white);
  border-color:var(--navy);
}
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
.tbl thead{
  background:var(--white-2);
}
.tbl th{
  text-align:left;
  padding:14px 18px;
  font-size:11.5px; font-weight:700;
  color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:14px 18px;
  border-bottom:1px solid var(--line-2);
  vertical-align:middle;
  color:var(--ink-2);
}
.tbl tbody tr{ transition:background .15s; }
.tbl tbody tr:hover{ background:var(--white-2); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl .id{
  font-family:var(--display);
  font-size:13px; font-weight:600;
  color:var(--navy);
  letter-spacing:.02em;
}
.tbl .muted{ color:var(--muted); }

/* =============== BADGE =============== */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px;
  font-size:11.5px; font-weight:600;
  border-radius:999px;
  letter-spacing:.02em;
}
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.badge-success{ background:var(--success-soft); color:var(--success); }
.badge-warning{ background:var(--warning-soft); color:var(--warning); }
.badge-danger{ background:var(--danger-soft); color:var(--danger); }
.badge-info{ background:var(--info-soft); color:var(--info); }
.badge-muted{ background:var(--white-3); color:var(--muted); }
.badge-orange{ background:var(--orange-tint); color:var(--orange); }

/* Tag (no dot) */
.tag{
  display:inline-block;
  padding:2px 9px;
  font-size:11px; font-weight:600;
  border-radius:5px;
  background:var(--white-3);
  color:var(--muted);
  letter-spacing:.02em;
}

/* =============== AVATAR =============== */
.avatar{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--orange);
  color:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:12px;
  flex-shrink:0;
}
.avatar-with-text{ display:inline-flex; align-items:center; gap:10px; }
.avatar-with-text strong{
  display:block; font-size:13.5px; font-weight:600; color:var(--navy);
}
.avatar-with-text span{
  display:block; font-size:11.5px; color:var(--muted);
}

/* =============== ICON ACTIONS =============== */
.row-actions{
  display:inline-flex; gap:4px;
}
.row-action{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
  color:var(--muted);
  transition:all .15s;
}
.row-action:hover{ background:var(--orange-tint); color:var(--orange); }
.row-action svg{ width:15px; height:15px; }

/* =============== GRID UTILITIES =============== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.grid-2-1{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.grid-1-2{ display:grid; grid-template-columns:1fr 2fr; gap:24px; }
@media (max-width:1100px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2, 1fr); }
  .grid-2-1, .grid-1-2{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

/* =============== FORMS =============== */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:12.5px; font-weight:600;
  color:var(--navy);
}
.input,.select,.textarea{
  width:100%;
  padding:9px 12px;
  font-size:14px;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:7px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(242,100,25,.1);
}
.textarea{ resize:vertical; min-height:90px; line-height:1.55; }
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:34px;
}

/* =============== EMPTY STATE =============== */
.empty{
  text-align:center;
  padding:60px 24px;
  color:var(--muted);
}
.empty svg{
  width:48px; height:48px;
  color:var(--muted-2);
  margin:0 auto 16px;
  opacity:.6;
}
.empty h3{ font-size:18px; color:var(--navy); margin-bottom:6px; }
.empty p{ font-size:14px; margin:0; }

/* =============== RESPONSIVE =============== */
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width:var(--sb-w); transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:100;
  }
  .sidebar.open{ transform:translateX(0); }
  .topbar .menubtn{ display:flex !important; }
  .page{ padding:18px; }
  .table-wrap{ overflow-x:auto; }
  .tbl{ min-width:720px; }
}
.menubtn{ display:none; }

/* =============== SECTION TITLES =============== */
.section-title{
  font-size:14px; font-weight:600;
  color:var(--muted);
  letter-spacing:.04em;
  margin:24px 0 12px;
}

/* =============== TIMELINE =============== */
.timeline{
  list-style:none; padding:0; margin:0;
  position:relative;
  padding-left:30px;
}
.timeline::before{
  content:""; position:absolute;
  left:9px; top:6px; bottom:6px;
  width:2px; background:var(--line);
}
.timeline li{
  position:relative;
  padding:0 0 22px;
}
.timeline li::before{
  content:""; position:absolute;
  left:-26px; top:6px;
  width:12px; height:12px;
  background:var(--white);
  border:2px solid var(--orange);
  border-radius:50%;
}
.timeline li.done::before{ background:var(--orange); }
.timeline li time{
  display:block;
  font-size:11.5px; color:var(--muted-2);
  letter-spacing:.04em;
  margin-bottom:3px;
}
.timeline li strong{
  font-size:13.5px; color:var(--navy);
  display:block;
}
.timeline li p{
  font-size:13px; color:var(--muted);
  margin:2px 0 0;
}

/* Login styling (uses different layout — no sidebar) */
.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--white);
}
.login-page .visual{
  background:var(--navy-2);
  color:var(--white);
  padding:48px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.login-page .visual::before{
  content:""; position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(242,100,25,.18), transparent 50%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto, 36px 36px, 36px 36px;
  pointer-events:none;
}
.login-page .visual-inner{ position:relative; z-index:1; }
.login-page .role-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--orange-soft);
}
.login-page .role-tag::before{
  content:""; width:24px; height:1px; background:var(--orange-soft);
}
.login-page h1{
  color:var(--white);
  font-size:48px; line-height:1.1;
  margin:18px 0 18px;
}
.login-page h1 em{ color:var(--orange-soft); font-style:italic; }
.login-page .visual p{ color:rgba(255,255,255,.65); font-size:16px; max-width:400px; }
.login-page .visual-foot{
  font-size:12.5px; color:rgba(255,255,255,.45);
  letter-spacing:.04em;
}
.login-page .form-side{
  display:flex; align-items:center; justify-content:center;
  padding:48px;
}
.login-page .form-card{
  width:100%; max-width:380px;
}
.login-page .form-card .logo-row{
  display:flex; align-items:center; gap:12px;
  margin-bottom:32px;
}
.login-page .form-card .logo-row svg{ width:42px; height:auto; }
.login-page .form-card h2{
  font-size:28px;
  margin-bottom:8px;
}
.login-page .form-card .lede{
  font-size:14px; color:var(--muted);
  margin-bottom:24px;
}
.login-page form .field + .field{ margin-top:14px; }
.login-page .form-bottom{
  margin-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px;
}
.login-page .form-bottom a{ color:var(--orange); font-weight:500; }
.login-page .check-row{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--muted);
}
@media (max-width:880px){
  .login-page{ grid-template-columns:1fr; }
  .login-page .visual{ display:none; }
}

/* =============== SETTINGS TABS =============== */
.settings-tab svg{
  width:18px; height:18px;
  flex-shrink:0;
}
.settings-tab{
  text-decoration:none;
}


/* Settings tab icons - force size */
.card ul .settings-tab svg{
  width:18px !important;
  height:18px !important;
  flex-shrink:0;
}