:root{
  --bg:#f9f9f7;
  --surface:#ffffff;
  --surface2:#f4f4f2;
  --surface3:#eeeeec;
  --border:#e5e5e2;
  --border2:#c3c6d7;
  --text:#1a1c1b;
  --text2:#737686;
  --text3:#ababab;
  --accent:#E8750A;
  --accent-dark:#C66408;
  --accent-dim:rgba(232,117,10,0.08);
  --red:#ba1a1a;
  --red-dim:rgba(186,26,26,0.08);
  --green:#16a34a;
  --green-dim:rgba(22,163,74,0.08);
  --blue:#004ac6;
  --blue-dim:rgba(0,74,198,0.08);
  --amber:#d97706;
  --amber-dim:rgba(217,119,6,0.08);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);
  --shadow-md:0 4px 16px rgba(15,15,15,0.08);
}
:root[data-theme="dark"]{
  --bg:#0f0f0d;
  --surface:#1a1a18;
  --surface2:#242422;
  --surface3:#2e2e2c;
  --border:#333331;
  --border2:#44444f;
  --text:#e8e8e6;
  --text2:#9a9aaa;
  --text3:#666675;
  --accent:#F59E0B;
  --accent-dark:#E8750A;
  --accent-dim:rgba(245,158,11,0.12);
  --red:#ff6b6b;
  --red-dim:rgba(255,107,107,0.1);
  --green:#4ade80;
  --green-dim:rgba(74,222,128,0.1);
  --blue:#60a5fa;
  --blue-dim:rgba(96,165,250,0.1);
  --amber:#fbbf24;
  --amber-dim:rgba(251,191,36,0.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
  --shadow-md:0 4px 16px rgba(0,0,0,0.4);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
.page{display:none;min-height:100vh;}.page.active{display:block;}

/* AUTH */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--bg);
  background-image:radial-gradient(circle at 20% 20%, rgba(232,117,10,0.06) 0%, transparent 50%),
                   radial-gradient(circle at 80% 80%, rgba(232,117,10,0.04) 0%, transparent 50%),
                   radial-gradient(var(--border) 1px, transparent 1px);
  background-size:auto,auto,24px 24px;
  position:relative;
}
:root[data-theme="dark"] .auth-wrap{
  background-image:radial-gradient(circle at 20% 20%, rgba(245,158,11,0.08) 0%, transparent 50%),
                   radial-gradient(circle at 80% 80%, rgba(245,158,11,0.05) 0%, transparent 50%),
                   radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:auto,auto,24px 24px;
}
.auth-card{
  background:var(--surface);
  border:1px solid rgba(195,198,215,0.2);
  border-radius:24px;padding:32px;width:100%;max-width:380px;
  box-shadow:0 4px 6px rgba(0,0,0,0.04),0 20px 48px rgba(15,15,15,0.08);
  position:relative;overflow:hidden;
  animation:authCardIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
:root[data-theme="dark"] .auth-card{
  border-color:rgba(255,255,255,0.07);
  box-shadow:0 4px 6px rgba(0,0,0,0.3),0 20px 48px rgba(0,0,0,0.35);
}
.auth-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0.5;
}
@keyframes authCardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.auth-logo-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:#09090b;
  box-shadow:0 4px 16px rgba(0,0,0,0.5),0 0 0 1px rgba(192,152,46,0.25);
  overflow:hidden;
}
.auth-logo-img{
  width:54px;height:54px;border-radius:12px;
  object-fit:cover;display:block;
}
.auth-logo-text{font-size:20px;font-weight:700;letter-spacing:-0.02em;font-family:'Space Grotesk',sans-serif;}
.auth-subtitle{font-size:13px;color:var(--text2);margin-bottom:24px;font-family:'Inter',sans-serif;}
.auth-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:12px;padding:4px;margin-bottom:24px;}
.auth-tab{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:600;border-radius:9px;cursor:pointer;color:var(--text2);border:none;background:transparent;font-family:'Inter',sans-serif;transition:all 0.2s;}
.auth-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,0.08);}
.auth-form{display:none;}.auth-form.active{display:block;}
.form-group{margin-bottom:14px;}
.form-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;display:block;font-family:'Inter',sans-serif;margin-left:2px;}
.form-input{
  width:100%;padding:12px 14px;height:48px;
  background:var(--surface2);border:1px solid transparent;
  border-radius:12px;color:var(--text);font-size:14px;outline:none;
  font-family:'Inter',sans-serif;transition:all 0.2s;
}
.form-input:focus{background:var(--surface);border-color:rgba(232,117,10,0.25);box-shadow:0 0 0 3px rgba(232,117,10,0.1);}
.form-input::placeholder{color:var(--text3);}
.btn-auth{
  width:100%;padding:14px;height:50px;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;margin-top:8px;font-family:'Inter',sans-serif;
  transition:all 0.2s;
  box-shadow:0 4px 16px rgba(232,117,10,0.25),0 1px 3px rgba(232,117,10,0.15);
}
.btn-auth:hover{box-shadow:0 6px 20px rgba(232,117,10,0.35);transform:translateY(-1px);}
.btn-auth:active{transform:scale(0.98) translateY(0);}
.auth-error{font-size:13px;color:var(--red);background:var(--red-dim);border:1px solid rgba(186,26,26,0.15);padding:10px 14px;border-radius:10px;margin-top:12px;display:none;font-family:'JetBrains Mono',monospace;}
.auth-error.visible{display:block;}

/* NAV - TOPBAR */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;
  background:rgba(249,249,247,0.88);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(195,198,215,0.22);
  display:flex;align-items:center;justify-content:center;padding:0;z-index:100;
}
:root[data-theme="dark"] .topbar{background:rgba(15,15,13,0.88);border-bottom-color:rgba(255,255,255,0.07);}
.topbar-inner{display:flex;align-items:center;width:100%;max-width:480px;padding:0 16px;}
.btn-hamburger{width:36px;height:36px;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;border-radius:8px;transition:background 0.15s;}
.btn-hamburger:hover{background:var(--surface2);}
.btn-hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s;}
.topbar-title{font-size:15px;font-weight:700;flex:1;text-align:center;letter-spacing:-0.01em;color:var(--accent);font-family:'Space Grotesk',sans-serif;}
.topbar-user{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;letter-spacing:0.05em;text-transform:uppercase;flex-shrink:0;}

/* DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200;display:none;opacity:0;transition:opacity 0.25s;backdrop-filter:blur(3px);}
.drawer-overlay.open{display:block;opacity:1;}
.drawer{
  position:fixed;top:0;left:-284px;width:280px;height:100vh;height:100dvh;
  background:var(--surface);border-right:1px solid var(--border);
  z-index:201;transition:left 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  display:flex;flex-direction:column;
  box-shadow:4px 0 24px rgba(0,0,0,0.08);
}
:root[data-theme="dark"] .drawer{box-shadow:4px 0 32px rgba(0,0,0,0.4);}
.drawer.open{left:0;}
.drawer-header{padding:24px 20px 16px;border-bottom:1px solid var(--border);}
.drawer-logo{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.drawer-logo-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:#09090b;
  box-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 0 1px rgba(192,152,46,0.2);
  overflow:hidden;
}
.drawer-logo-img{
  width:36px;height:36px;border-radius:8px;
  object-fit:cover;display:block;
}
.drawer-dukkan{font-size:15px;font-weight:700;letter-spacing:-0.01em;font-family:'Space Grotesk',sans-serif;}
.drawer-user{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px;letter-spacing:0.02em;}
.drawer-nav{padding:8px 0;flex:1;overflow-y:auto;}
.drawer-item{
  display:flex;align-items:center;gap:12px;padding:11px 20px;
  font-size:14px;font-weight:500;cursor:pointer;color:var(--text2);
  transition:background 0.15s,color 0.15s;
  border:none;background:transparent;width:100%;font-family:'Inter',sans-serif;position:relative;
}
.drawer-item:hover{background:var(--surface2);color:var(--text);}
.drawer-item.active{color:var(--accent);background:var(--accent-dim);font-weight:600;}
.drawer-item.active::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:3px;background:var(--accent);border-radius:0 3px 3px 0;}
.drawer-item-icon{font-size:17px;width:24px;text-align:center;opacity:0.85;}
.drawer-item.active .drawer-item-icon{opacity:1;}
.drawer-footer{padding:14px 20px;border-top:1px solid var(--border);}
.btn-logout{width:100%;padding:11px;background:transparent;border:1px solid rgba(186,26,26,0.22);border-radius:10px;color:var(--red);font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-logout:hover{background:var(--red-dim);border-color:rgba(186,26,26,0.35);}

/* MAIN CONTENT */
.main{padding-top:56px;}
.content{max-width:480px;margin:0 auto;padding:20px 16px 100px;}

/* CARDS */
.card{background:var(--surface);border:1px solid rgba(195,198,215,0.2);border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.section-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;font-family:'Space Grotesk',sans-serif;}
.cam-btn{width:100%;padding:14px;background:var(--accent-dim);border:2px dashed rgba(37,99,235,0.3);border-radius:12px;color:var(--accent);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-family:'Inter',sans-serif;transition:all 0.2s;}
.cam-btn:hover{background:rgba(37,99,235,0.12);}
.cam-btn-stop{background:var(--red-dim);border-color:rgba(186,26,26,0.25);color:var(--red);display:none;}
#qr-reader{border-radius:12px;overflow:hidden;margin-bottom:12px;display:none;}
#qr-reader.active{display:block;}
#qr-reader img{display:none!important;}
#qr-reader button{background:var(--surface2)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:8px 16px!important;margin-top:8px!important;}
#qr-reader select{background:var(--surface2)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:6px!important;}
.divider{display:flex;align-items:center;gap:10px;margin:12px 0;}
.divider span{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.input-row{display:flex;gap:8px;}
.input-row input{flex:1;padding:12px 14px;height:48px;background:var(--surface2);border:none;border-radius:12px;color:var(--text);font-size:14px;font-family:'JetBrains Mono',monospace;outline:none;transition:all 0.2s;}
.input-row input:focus{background:var(--surface);box-shadow:0 0 0 2px rgba(37,99,235,0.15);}
.input-row input::placeholder{color:var(--text3);}
.btn-query{padding:12px 18px;height:48px;background:var(--accent);border:none;border-radius:12px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;box-shadow:0 2px 8px rgba(37,99,235,0.2);}
.btn-query:hover{opacity:0.9;}
.status{font-size:13px;padding:10px 14px;border-radius:10px;margin-bottom:12px;display:none;font-family:'JetBrains Mono',monospace;}
.status.visible{display:block;}
.status.loading{background:rgba(217,119,6,0.08);color:var(--amber);border:1px solid rgba(217,119,6,0.2);}
.status.error{background:var(--red-dim);color:var(--red);border:1px solid rgba(186,26,26,0.15);}
.status.success{background:var(--green-dim);color:var(--green);border:1px solid rgba(22,163,74,0.15);}
.result-card{display:none;}.result-card.visible{display:block;}
.tyre-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
.tyre-brand{font-size:20px;font-weight:700;letter-spacing:-0.02em;}
.tyre-model{font-size:13px;color:var(--text2);margin-top:2px;}
.tyre-size{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(37,99,235,0.15);padding:6px 12px;border-radius:8px;white-space:nowrap;font-weight:700;letter-spacing:-0.03em;}
.tyre-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.badge{padding:4px 10px;border-radius:6px;font-size:11px;font-family:'JetBrains Mono',monospace;font-weight:700;}
.badge-blue{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(0,74,198,0.15);}
.badge-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(22,163,74,0.15);}
.badge-acc{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(37,99,235,0.15);}
.add-row{display:flex;align-items:center;gap:8px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap;}
.qty-label{font-size:13px;color:var(--text2);}
.qty-input{width:70px;padding:8px 10px;height:40px;background:var(--surface2);border:none;border-radius:8px;color:var(--text);font-size:14px;text-align:center;outline:none;font-family:'JetBrains Mono',monospace;transition:all 0.2s;}
.qty-input:focus{background:var(--surface);box-shadow:0 0 0 2px rgba(37,99,235,0.15);}
.price-input{width:110px;padding:8px 10px;height:40px;background:var(--surface2);border:none;border-radius:8px;color:var(--text);font-size:14px;text-align:center;outline:none;font-family:'JetBrains Mono',monospace;transition:all 0.2s;}
.price-input:focus{background:var(--surface);box-shadow:0 0 0 2px rgba(37,99,235,0.15);}
.btn-add{flex:1;padding:10px;height:40px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;min-width:100px;transition:all 0.2s;}
.btn-add:hover{opacity:0.9;}
.btn-clear{padding:10px 14px;height:40px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-clear:hover{background:var(--surface2);}
.stock-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.stock-title{font-size:15px;font-weight:700;letter-spacing:-0.01em;}
.stock-count{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;background:var(--surface2);border:1px solid var(--border);padding:3px 10px;border-radius:20px;font-weight:700;}
.stock-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);transition:background 0.12s;}
.stock-item:last-child{border-bottom:none;}
.stock-item:hover{background:var(--surface2);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:10px;}
.stock-info{flex:1;min-width:0;}
.stock-brand{font-size:14px;font-weight:600;}
.stock-detail{font-size:12px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-top:2px;letter-spacing:-0.02em;}
.stock-price{font-size:12px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:1px;}
/* Adet badge — renkli arka plan ile KPI stili */
.stock-qty{
  font-size:16px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:-0.03em;
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-dim);color:var(--accent);
  border-radius:10px;border:1px solid rgba(37,99,235,0.12);
}
.stock-qty.low{background:var(--red-dim);color:var(--red);border-color:rgba(186,26,26,0.15);}
.stock-del{width:30px;height:30px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text3);cursor:pointer;font-size:13px;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.stock-del:hover{background:var(--red-dim);color:var(--red);border-color:rgba(186,26,26,0.2);}
.empty-state{text-align:center;padding:40px 0;color:var(--text3);font-size:13px;font-family:'JetBrains Mono',monospace;}
.empty-icon{font-size:36px;margin-bottom:12px;opacity:0.35;}

/* SATIS */
.search-input{width:100%;padding:12px 14px;height:48px;background:var(--surface2);border:none;border-radius:12px;color:var(--text);font-size:14px;font-family:'JetBrains Mono',monospace;outline:none;margin-bottom:12px;transition:all 0.2s;letter-spacing:-0.02em;}
.search-input:focus{background:var(--surface);box-shadow:0 0 0 2px rgba(37,99,235,0.15);}
.search-input::placeholder{color:var(--text3);}
.satis-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.15s;}
.satis-item:last-child{border-bottom:none;}
.satis-item:hover{background:var(--surface2);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;}
.satis-info{flex:1;}
.satis-brand{font-size:14px;font-weight:600;}
.satis-detail{font-size:12px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-top:2px;letter-spacing:-0.02em;}
.satis-stok{font-size:12px;color:var(--text3);margin-top:1px;}
.btn-sat{padding:8px 14px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;transition:all 0.2s;}
.btn-sat:hover{opacity:0.9;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:300;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal-overlay.center{align-items:center;padding:16px;}
.modal{
  background:var(--surface);border:1px solid rgba(195,198,215,0.15);
  border-radius:24px 24px 0 0;padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  box-shadow:0 -8px 40px rgba(15,15,15,0.1);
}
:root[data-theme="dark"] .modal{border-color:rgba(255,255,255,0.07);box-shadow:0 -8px 40px rgba(0,0,0,0.4);}
.modal-card{
  background:var(--surface);border:1px solid rgba(195,198,215,0.15);
  border-radius:20px;padding:24px;width:100%;max-width:400px;max-height:80vh;overflow-y:auto;
  box-shadow:0 8px 40px rgba(15,15,15,0.18);
}
:root[data-theme="dark"] .modal-card{border-color:rgba(255,255,255,0.07);box-shadow:0 8px 48px rgba(0,0,0,0.5);}
.modal-handle{width:40px;height:5px;background:var(--border2);border-radius:3px;margin:0 auto 20px;}
.modal-title{font-size:17px;font-weight:700;margin-bottom:4px;letter-spacing:-0.02em;}
.modal-sub{font-size:13px;color:var(--text2);margin-bottom:20px;font-family:'JetBrains Mono',monospace;letter-spacing:-0.02em;}
.modal-row{display:flex;gap:8px;margin-bottom:12px;}
.modal-row .form-group{flex:1;margin-bottom:0;}
.btn-modal-confirm{width:100%;padding:14px;height:50px;background:var(--accent);border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:8px;font-family:'Inter',sans-serif;transition:all 0.2s;box-shadow:0 4px 16px rgba(37,99,235,0.2);}
.btn-modal-confirm:hover{opacity:0.9;}
.btn-modal-confirm:active{transform:scale(0.98);}
.btn-modal-cancel{width:100%;padding:12px;height:46px;background:transparent;border:1px solid var(--border);border-radius:12px;color:var(--text2);font-size:13px;cursor:pointer;margin-top:8px;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-modal-cancel:hover{background:var(--surface2);}

/* RAPOR */
.rapor-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:12px;padding:4px;margin-bottom:20px;}
.rapor-tab{flex:1;padding:8px 4px;text-align:center;font-size:12px;font-weight:600;border-radius:9px;cursor:pointer;color:var(--text2);border:none;background:transparent;font-family:'Inter',sans-serif;transition:all 0.2s;}
.rapor-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.metric-card{
  background:var(--surface);border:1px solid rgba(195,198,215,0.15);
  border-radius:16px;padding:16px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
}
/* KPI köşe dekorasyon dairesi — büyük */
.metric-card::before{
  content:'';position:absolute;right:-16px;top:-16px;
  width:56px;height:56px;border-radius:50%;
  background:currentColor;opacity:0.05;pointer-events:none;
}
/* KPI köşe dekorasyon dairesi — küçük */
.metric-card::after{
  content:'';position:absolute;right:-4px;top:-4px;
  width:30px;height:30px;border-radius:50%;
  background:currentColor;opacity:0.07;pointer-events:none;
}
/* Renkli ton — value rengi ile hizalı */
.metric-card:has(.accent){color:var(--accent);}
.metric-card:has(.green){color:var(--green);}
.metric-card:has(.blue){color:var(--blue);}
.metric-label{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;font-weight:600;}
.metric-value{font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:-0.04em;}
.metric-value.accent{color:var(--accent);}
.metric-value.green{color:var(--green);}
.metric-value.blue{color:var(--blue);}
/* Baseline çizgisi — KPI kartlarında görsel derinlik */
.metric-baseline{height:2px;width:48px;background:currentColor;opacity:0.4;border-radius:1px;margin-top:12px;}
.chart-wrap{background:var(--surface);border:1px solid rgba(195,198,215,0.15);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.chart-title{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.satis-list-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.satis-list-item:last-child{border-bottom:none;}
.satis-list-info{flex:1;}
.satis-list-brand{font-size:13px;font-weight:600;}
.satis-list-detail{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px;}
.satis-list-kar{font-size:14px;font-weight:700;color:var(--green);font-family:'JetBrains Mono',monospace;letter-spacing:-0.03em;}
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(249,249,247,0.92);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid rgba(195,198,215,0.2);
  padding:10px 16px;display:flex;gap:8px;max-width:480px;margin:0 auto;
}
:root[data-theme="dark"] .bottom-bar{background:rgba(15,15,13,0.92);border-top-color:rgba(255,255,255,0.07);}
.btn-export{flex:1;padding:10px;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-export:hover{background:var(--surface2);color:var(--text);}
.btn-export:hover{background:var(--surface2);}

/* CRM */
.filter-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.filter-pill{padding:6px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.15s;}
.filter-pill:hover{background:var(--surface3);}
.filter-pill.active{background:var(--accent-dim);border-color:rgba(37,99,235,0.2);color:var(--accent);font-weight:600;}
.musteri-item{padding:14px 0;border-bottom:1px solid var(--border);}
.musteri-item:last-child{border-bottom:none;}
.musteri-top{display:flex;align-items:center;gap:10px;cursor:pointer;}
.musteri-info{flex:1;min-width:0;}
.musteri-ad{font-size:14px;font-weight:700;}
.musteri-meta{font-size:12px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-top:3px;letter-spacing:-0.02em;}
.musteri-stats{text-align:right;min-width:70px;}
.musteri-ciro{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--green);letter-spacing:-0.03em;}
.musteri-ziyaret{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;}
.musteri-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.musteri-gecmis{margin-top:10px;padding:12px;background:var(--surface2);border-radius:12px;display:none;}
.musteri-gecmis.open{display:block;}
.musteri-satis-row{font-size:12px;padding:6px 0;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;color:var(--text2);display:flex;justify-content:space-between;letter-spacing:-0.02em;}
.musteri-satis-row:last-child{border-bottom:none;}
.badge-vip{background:rgba(217,119,6,0.1);color:var(--amber);border:1px solid rgba(217,119,6,0.2);padding:2px 7px;border-radius:5px;font-size:10px;font-family:'JetBrains Mono',monospace;margin-left:5px;font-weight:700;}
.badge-yeni{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(0,74,198,0.15);padding:2px 7px;border-radius:5px;font-size:10px;font-family:'JetBrains Mono',monospace;margin-left:5px;font-weight:700;}
.musteri-chip{padding:10px 14px;background:var(--accent-dim);border:1px solid rgba(37,99,235,0.15);border-radius:10px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.musteri-sec-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.kampanya-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.kampanya-item:last-child{border-bottom:none;}
.kampanya-item-info{flex:1;}

/* OTELİ */
.otel-ozet{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.otel-ozet-kart{background:var(--surface);border:1px solid rgba(195,198,215,0.15);border-radius:14px;padding:14px;text-align:center;box-shadow:var(--shadow-sm);}
.otel-ozet-sayi{font-size:28px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:-0.04em;}
.otel-ozet-label{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:4px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.otel-tabs{display:flex;gap:4px;background:var(--surface2);border-radius:12px;padding:4px;margin-bottom:14px;}
.otel-tab{flex:1;padding:8px 4px;text-align:center;font-size:12px;font-weight:600;border-radius:9px;cursor:pointer;color:var(--text2);border:none;background:transparent;font-family:'Inter',sans-serif;transition:all 0.2s;}
.otel-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.otel-item{padding:14px 0;border-bottom:1px solid var(--border);}
.otel-item:last-child{border-bottom:none;}
.otel-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.otel-item-info{flex:1;min-width:0;}
.otel-item-musteri{font-size:14px;font-weight:700;}
.otel-item-plaka{display:inline-block;font-size:11px;font-family:'JetBrains Mono',monospace;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(37,99,235,0.15);padding:2px 8px;border-radius:5px;margin-left:6px;font-weight:700;}
.otel-item-detay{font-size:12px;color:var(--text2);font-family:'JetBrains Mono',monospace;margin-top:4px;letter-spacing:-0.02em;}
.otel-item-raf{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px;}
.otel-item-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.btn-wa{padding:6px 12px;background:rgba(37,211,102,0.08);border:1px solid rgba(37,211,102,0.25);border-radius:8px;color:#16a34a;font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:all 0.2s;}
.btn-teslim{padding:6px 12px;background:var(--green-dim);border:1px solid rgba(22,163,74,0.2);border-radius:8px;color:var(--green);font-size:12px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-duzenle{padding:6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:12px;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;}
.btn-duzenle:hover{background:var(--surface3);}
.tag-gecmis{font-size:10px;background:var(--red-dim);color:var(--red);border:1px solid rgba(186,26,26,0.15);padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-weight:700;}
.tag-bu-hafta{font-size:10px;background:rgba(217,119,6,0.08);color:var(--amber);border:1px solid rgba(217,119,6,0.15);padding:2px 7px;border-radius:5px;font-family:'JetBrains Mono',monospace;font-weight:700;}
.fab{position:fixed;bottom:80px;right:20px;width:52px;height:52px;background:var(--accent);border:none;border-radius:50%;font-size:24px;cursor:pointer;box-shadow:0 4px 20px rgba(37,99,235,0.35);z-index:50;display:none;color:#fff;transition:all 0.2s;}
.fab:hover{transform:scale(1.05);}
.fab.visible{display:flex;align-items:center;justify-content:center;}

/* INLINE STYLES USED IN JS - override for light theme */
select{background:var(--surface2);border:none;border-radius:10px;color:var(--text);padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;outline:none;}
select:focus{box-shadow:0 0 0 2px rgba(37,99,235,0.15);}
table{border-collapse:collapse;width:100%;}
th{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;padding:10px 12px;background:var(--surface2);font-family:'JetBrains Mono',monospace;}
td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--surface2);}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton-item{padding:12px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.skeleton-item:last-child{border-bottom:none;}
.skeleton-line{height:12px;border-radius:6px;}
.skeleton-block{height:44px;border-radius:10px;margin-bottom:10px;}

/* TOAST */
.toast-container{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:100%;max-width:400px;padding:0 16px;}
.toast{
  padding:12px 20px;border-radius:12px;font-size:13px;font-weight:500;font-family:'Inter',sans-serif;
  box-shadow:0 4px 24px rgba(0,0,0,0.18),0 1px 4px rgba(0,0,0,0.08);
  pointer-events:none;animation:toastIn 0.28s cubic-bezier(0.16,1,0.3,1);
  max-width:100%;text-align:center;
  display:flex;align-items:center;gap:8px;
}
.toast.success{background:var(--green);color:#fff;}
.toast.error{background:var(--red);color:#fff;}
.toast.info{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,0.12);}
@keyframes toastIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

/* ═══════════════════════════════════════════════════
   DESKTOP RESPONSIVE LAYOUT  (≥ 1024px)
   ═══════════════════════════════════════════════════ */
:root { --sidebar-w: 260px; }

@media (min-width: 1024px) {

  /* ── Sidebar: always visible, no slide animation ── */
  .drawer {
    left: 0 !important;
    z-index: 100;
    transition: none;
    box-shadow: none;
    border-right: 1px solid var(--border);
    width: var(--sidebar-w);
  }
  .drawer-overlay { display: none !important; }
  .btn-hamburger  { display: none !important; }

  /* ── Topbar: shifted right of sidebar ── */
  .topbar {
    left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    z-index: 99;
  }
  .topbar-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 36px;
  }
  .topbar-title { text-align: left; }

  /* ── Main area: offset for sidebar ── */
  .main {
    padding-left: var(--sidebar-w);
    padding-top: 56px;
  }

  /* ── Content sections: wide, centred ── */
  .content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 48px 80px;
  }

  /* ── Dashboard metric grid: 4 columns ── */
  .metric-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  /* ── Otel ozet: 4 columns ── */
  .otel-ozet { grid-template-columns: repeat(4, 1fr); }

  /* ── Card hover lift ── */
  .card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-2px);
  }
  .metric-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .metric-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    transform: translateY(-2px);
  }

  /* ── Bottom bar: shifted right of sidebar ── */
  .bottom-bar {
    left: var(--sidebar-w);
    right: 0;
    max-width: none;
    margin: 0;
    padding: 10px 48px;
  }

  /* ── FAB: more breathing room on desktop ── */
  .fab { bottom: 80px; right: 48px; }

  /* ── Toast: account for sidebar offset ── */
  .toast-container {
    left: calc(var(--sidebar-w) + 50%);
    transform: translateX(-50%);
  }

  /* ── Modals become centred on desktop too ── */
  .modal-overlay:not(.center) {
    align-items: center;
    padding: 32px;
  }
  .modal-overlay:not(.center) .modal {
    border-radius: 20px;
    max-width: 540px;
    max-height: 82vh;
  }

  /* ── Sidebar header sizing ── */
  .drawer-header { padding: 28px 24px 18px; }
  .drawer-logo-icon { width: 44px; height: 44px; border-radius: 12px; }
  .drawer-logo-img  { width: 42px; height: 42px; border-radius: 10px; }
  .drawer-dukkan    { font-size: 16px; }
  .drawer-item      { padding: 12px 24px; font-size: 14px; }
  .drawer-footer    { padding: 16px 24px; }

  /* ── Two-pane layout for Stok & Satis sections ── */
  #section-stok  .content-inner,
  #section-satis .content-inner { display: contents; } /* passthrough */

  /* ── Stok: query card + list side by side ── */
  #section-stok  { display: block; }
  #section-satis { display: block; }

  /* Wide table cells */
  td, th { padding: 12px 16px; }

  /* Section label + stock header row */
  .stock-header { margin-bottom: 16px; }

  /* Wider filter pills area */
  .filter-pills { gap: 8px; }

  /* Slightly larger section labels */
  .section-label { font-size: 11.5px; letter-spacing: 0.09em; }
}