:root{
  --bg:#14110E; --surface:#1E1A16; --line:#3A3128;
  --text:#F2EBDF; --muted:#A99B87;
  --amber:#E8A13C; --green:#6FB56A; --red:#E06D5B;
  --raise:#26211B; --raise-active:#2f2921;
  --nav-bg:rgba(30,26,22,.92);
  --nav-h:64px; --sheet-ease:cubic-bezier(.22,.61,.36,1);
  --app-w:820px;                 /* geniş ekranda içerik genişliği; telefonda %100 */
}
:root[data-theme="light"]{
  --bg:#FAF6EF; --surface:#FFFFFF; --line:#E7DDCB;
  --text:#2B2118; --muted:#8A7A64;
  --amber:#C9822B; --green:#4E9E57; --red:#CF5544;
  --raise:#F2EADB; --raise-active:#EAE0CE;
  --nav-bg:rgba(255,253,249,.9);
}
html{background:var(--bg);}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
.app{width:100%; max-width:var(--app-w); margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; position:relative; background:var(--bg);}
button{font-family:inherit; color:inherit; cursor:pointer; border:none; background:none;}

header{padding:calc(env(safe-area-inset-top) + 14px) 16px 12px; position:sticky; top:0; z-index:20; background:linear-gradient(var(--bg) 78%, transparent);}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.brand .logo{width:46px; height:46px; border-radius:12px; flex:0 0 auto; background:#fff; display:grid; place-items:center; padding:3px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.3);}
.brand .logo img{width:100%; height:100%; object-fit:contain;}
.brand h1{font-size:18px; font-weight:700; margin:0; letter-spacing:.2px;}
.brand .sub{font-size:12px; color:var(--muted); margin-top:1px;}
.icon-btn{margin-left:auto; width:44px; height:44px; border-radius:12px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; font-size:20px;}
.icon-btn:active{transform:scale(.94);}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 8px; text-align:center;}
.stat .n{font-size:22px; font-weight:700; line-height:1;}
.stat .l{font-size:11px; color:var(--muted); margin-top:5px;}

.filters{display:flex; gap:8px; overflow-x:auto; padding:4px 16px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.filters::-webkit-scrollbar{display:none;}
.pill{flex:0 0 auto; height:38px; padding:0 14px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap; transition:background .15s, color .15s, border-color .15s;}
.pill .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.pill.active{background:var(--text); color:var(--bg); border-color:var(--text);}
.pill b{font-weight:700; opacity:.65; margin-left:1px;}

main{flex:1; padding:12px 16px calc(env(safe-area-inset-bottom) + 96px);}
.searchbar{position:relative; margin-bottom:12px;}
.searchbar input{width:100%; height:46px; padding:0 42px; border-radius:14px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-size:16px; outline:none;}
.searchbar input:focus{border-color:var(--amber);}
.searchbar .si{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:15px; opacity:.6; pointer-events:none;}
.searchbar .sc{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--muted); font-size:15px;}
.searchbar .sc.hidden{display:none;}
.subfilters{margin:0 -16px; padding:2px 16px 12px;}

.view{display:none;}
.view.active{display:block;}
.page-hint{font-size:13px; color:var(--muted); margin:0 2px 14px; line-height:1.5;}

/* Liste: telefonda tek sütun, geniş ekranda otomatik çok sütun (responsive). */
.list{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; align-items:start;}
.row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 14px 12px 0; min-height:64px; position:relative; overflow:hidden;}
.row .strip{width:6px; align-self:stretch; flex:0 0 auto; border-radius:0 3px 3px 0;}
.row .info{flex:1; min-width:0; -webkit-user-select:none; user-select:none;}
.row .name{font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px;}
.row .name .sdot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.row .meta{font-size:13px; color:var(--muted); margin-top:3px;}
.row .meta .mk{font-weight:600;}
.qtybox{display:flex; align-items:center; gap:8px; flex:0 0 auto;}
.qtybox .qv{min-width:42px; text-align:center; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;}
.qtybox .qv small{font-size:11px; color:var(--muted); font-weight:500;}
.step{width:34px; height:34px; border-radius:10px; flex:0 0 auto; border:1px solid var(--line); background:var(--raise); font-size:20px; font-weight:600; line-height:1; display:grid; place-items:center; color:var(--text); transition:transform .08s, background .12s;}
.step:active{transform:scale(.9); background:var(--raise-active);}
.step.plus{color:var(--green);} .step.minus{color:var(--red);}
.row .chev{flex:0 0 auto; color:var(--muted); font-size:20px; padding:0 6px;}

.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:56px 20px; font-size:15px;}
.empty .big{font-size:40px; margin-bottom:12px; opacity:.7;}

.fab{position:fixed; z-index:30; right:max(16px, calc(50% - var(--app-w)/2 + 16px)); bottom:calc(env(safe-area-inset-bottom) + var(--nav-h) + 14px); width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--amber),#cf8a2c); color:#171310; font-size:32px; line-height:1; display:grid; place-items:center; box-shadow:0 6px 20px rgba(232,161,60,.4); transition:transform .1s;}
.fab:active{transform:scale(.92);}
.fab.hidden{display:none;}

nav{position:fixed; left:0; right:0; bottom:0; z-index:25; max-width:var(--app-w); margin:0 auto; height:calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--nav-bg); backdrop-filter:blur(12px); border-top:1px solid var(--line); display:flex;}
nav button{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:11px; font-weight:600;}
nav button .ic{font-size:22px; line-height:1;}
nav button.active{color:var(--amber);}

.scrim{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .25s;}
.scrim.open{opacity:1; pointer-events:auto;}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:var(--app-w); margin:0 auto; background:var(--surface); border-radius:22px 22px 0 0; border-top:1px solid var(--line); padding:8px 20px calc(env(safe-area-inset-bottom) + 20px); transform:translateY(105%); transition:transform .3s var(--sheet-ease); max-height:92vh; overflow-y:auto;}
.sheet.open{transform:translateY(0);}
.grab{width:40px; height:4px; border-radius:2px; background:var(--line); margin:6px auto 14px;}
.sheet h2{font-size:19px; margin:0 0 18px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:600;}
.field input{width:100%; height:50px; padding:0 14px; border-radius:12px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-size:16px; outline:none;}
.field input:focus{border-color:var(--amber);}
.field .hint{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.4;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.unit-pills, .market-pills{display:flex; flex-wrap:wrap; gap:8px;}
.chip{height:44px; padding:0 15px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--muted); font-size:15px; font-weight:600; display:flex; align-items:center; gap:7px;}
.chip .dot{width:10px; height:10px; border-radius:50%;}
.chip.sel{border-color:var(--text); color:var(--text); background:var(--raise);}
.sheet-actions{display:flex; gap:12px; margin-top:24px;}
.btn{flex:1; height:52px; border-radius:14px; font-size:16px; font-weight:700; display:grid; place-items:center;}
.btn.primary{background:var(--amber); color:#171310;}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text);}
.btn.danger{background:transparent; border:1px solid var(--red); color:var(--red); flex:0 0 auto; width:52px; font-size:20px;}
.btn.dwide{background:transparent; border:1px solid var(--red); color:var(--red);}
.btn.wa{background:#25D366; color:#0a3d1f;}
.btn:active{transform:scale(.97);}

.login{position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; padding-top:max(24px, env(safe-area-inset-top));}
.login.hidden{display:none;}
.login-card{width:100%; max-width:340px; text-align:center;}
.login-card .logo{width:150px; height:106px; border-radius:18px; margin:0 auto 20px; background:#fff; display:grid; place-items:center; padding:10px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.35);}
.login-card .logo img{width:100%; height:100%; object-fit:contain;}
.login-card h1{font-size:24px; margin:0 0 6px;}
.login-card .login-sub{color:var(--muted); font-size:14px; margin:0 0 26px;}
.login-card input{width:100%; height:52px; padding:0 16px; margin-bottom:12px; border-radius:14px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-size:16px; outline:none;}
.login-card input:focus{border-color:var(--amber);}
.login-err{color:var(--red); font-size:14px; min-height:20px; margin:2px 0 10px; font-weight:600;}
.login-card .btn.primary{width:100%; height:54px;}

.mrow{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.mrow .swatch{width:46px; height:46px; border-radius:12px; border:1px solid var(--line); padding:0; overflow:hidden; flex:0 0 auto; background:none; cursor:pointer;}
.mrow .swatch::-webkit-color-swatch-wrapper{padding:4px;}
.mrow .swatch::-webkit-color-swatch{border:none; border-radius:8px;}
.mrow input.mname{flex:1; height:46px; padding:0 12px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--text); font-size:16px; outline:none; min-width:0;}
.mrow input.mname:focus{border-color:var(--amber);}
.mrow .mdel{width:46px; height:46px; border-radius:12px; flex:0 0 auto; border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:18px; display:grid; place-items:center;}
.dta{width:100%; height:200px; padding:12px; border-radius:12px; background:var(--bg); border:1px solid var(--line); color:var(--text); font:13px/1.45 ui-monospace,Menlo,monospace; resize:vertical; outline:none;}

/* Geniş ekranlarda market düzenleyici de çok sütun kullanabilsin. */
@media (min-width:640px){
  #market-editor{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px;}
  #market-editor .mrow{margin-bottom:0;}
}

/* Listeye ekle: ürün türü seçici */
.picklist{display:flex; flex-direction:column; gap:6px; max-height:240px; overflow-y:auto; margin-top:8px;}
.picklist .pt, .stk-chosen .pt{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--text); font-size:15px; font-weight:600;}
.picklist .pt small, .stk-chosen .pt small{color:var(--muted); font-weight:500;}
.picklist .pt .u, .stk-chosen .pt .u{margin-left:auto; color:var(--muted); font-size:12px; font-weight:500;}
.picklist .pt.sel, .stk-chosen .pt.sel{border-color:var(--amber); background:var(--raise);}
.pt-empty{color:var(--muted); font-size:14px; padding:14px 4px; line-height:1.5;}
.stk-chosen{margin-bottom:16px;}

/* Sağ üstte kısa bildirim (toast) */
.toast{position:fixed; top:calc(env(safe-area-inset-top) + 14px); right:16px; z-index:200; background:var(--surface); color:var(--text); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:12px; padding:12px 16px; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.3); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .2s, transform .2s; max-width:80vw;}
.toast.show{opacity:1; transform:translateY(0);}