/* StokCari Online — açık, ferah, kompakt tema (koyu renk yok) */
:root{
  --bg:#f3f6fb; --surface:#ffffff; --surface-2:#f8fafd; --line:#e2e8f2; --line-2:#edf1f7;
  --text:#2c3b57; --text-2:#52627f; --muted:#8393ae;
  --primary:#3b82f6; --primary-600:#2f6fe0; --primary-50:#eaf2ff; --primary-100:#d8e7ff;
  --accent:#14b8a6; --accent-50:#e3f8f5;
  --good:#16a34a; --good-50:#e6f7ec; --warn:#d98a06; --warn-50:#fff4dc; --bad:#e5484d; --bad-50:#fdecec;
  --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(44,59,87,.05),0 4px 14px rgba(44,59,87,.06);
  --side-w:224px; --top-h:56px; --tab-h:60px;
  --font:'Segoe UI',system-ui,-apple-system,'Inter','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.4;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{margin:0;font-weight:650;color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.sag{text-align:right}.orta{text-align:center}
.gap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1 1 auto}
.sayi{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:var(--good)}.neg{color:var(--bad)}.warn{color:var(--warn)}

/* ---------- iskelet ---------- */
#app{display:flex;min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30}
.logo{display:flex;align-items:center;gap:10px;padding:14px 16px;height:var(--top-h)}
.logo-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#4f9bff,#19c2b0);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}
.logo-ad{font-weight:700;font-size:15px;line-height:1.1}.logo-ad small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.nav{flex:1;overflow:auto;padding:6px 10px 12px}
.nav-baslik{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:12px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--text-2);font-weight:550;margin-bottom:1px}
.nav a svg{width:18px;height:18px;flex:none;stroke:currentColor}
.nav a:hover{background:var(--surface-2)}
.nav a.aktif{background:var(--primary-50);color:var(--primary-600)}
.side-alt{border-top:1px solid var(--line);padding:10px 12px;font-size:12px;color:var(--muted)}
.main{flex:1;margin-left:var(--side-w);min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;height:var(--top-h);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 18px}
.top h1{font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sube-sec{max-width:190px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary-50);color:var(--primary-600);display:grid;place-items:center;font-weight:700;border:0;cursor:pointer}
#view{padding:16px 18px 40px;max-width:1280px;width:100%;margin:0 auto}
.tabbar{display:none}

/* ---------- bileşenler ---------- */
.kart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.kart-p{padding:14px 16px}
.kart-baslik{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-2);font-weight:650}
.kart-baslik .grow{font-size:14px}
.sayfa-baslik{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.sayfa-baslik h2{font-size:19px}
.istatistikler{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.ist{padding:12px 14px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.ist small{color:var(--muted);font-weight:550;font-size:12px}
.ist b{font-size:20px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ist i{font-style:normal;font-size:12px;color:var(--muted)}
.ist::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:var(--primary-50)}
.ist.t1::after{background:var(--accent-50)}.ist.t2::after{background:var(--warn-50)}.ist.t3::after{background:var(--bad-50)}.ist.t4::after{background:var(--good-50)}
.izgara{display:grid;gap:14px}
.izgara.iki{grid-template-columns:1fr 1fr}.izgara.uc{grid-template-columns:repeat(3,1fr)}
.kasa-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s}
.btn:hover{background:var(--surface-2);border-color:#cfd8e8}
.btn svg{width:16px;height:16px;stroke:currentColor}
.btn.p{background:var(--primary);border-color:var(--primary);color:#fff}.btn.p:hover{background:var(--primary-600)}
.btn.g{background:var(--good);border-color:var(--good);color:#fff}.btn.g:hover{filter:brightness(.95)}
.btn.k{background:var(--bad-50);border-color:#f6c9ca;color:var(--bad)}
.btn.s{height:30px;padding:0 10px;font-size:13px;border-radius:8px}
.btn.ikon{width:34px;padding:0}.btn.s.ikon{width:30px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.etiket{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:650;background:var(--primary-50);color:var(--primary-600);white-space:nowrap}
.etiket.g{background:var(--good-50);color:var(--good)}.etiket.w{background:var(--warn-50);color:var(--warn)}.etiket.b{background:var(--bad-50);color:var(--bad)}.etiket.n{background:#eef1f6;color:var(--text-2)}

.alan{display:flex;flex-direction:column;gap:4px;min-width:0}
.alan label{font-size:12px;font-weight:600;color:var(--text-2)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{width:100%;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;outline:none;transition:.12s}
textarea{height:auto;padding:8px 11px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
input[readonly]{background:var(--surface-2)}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238393ae' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 12px}
.form-grid .tam{grid-column:1/-1}
.filtre{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filtre .arama{flex:1 1 220px;min-width:160px}
.filtre input[type=date]{width:150px}.filtre select{width:auto;min-width:130px}
.segment{display:inline-flex;background:#eaf0f8;border-radius:10px;padding:3px;gap:2px}
.segment button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-weight:600;color:var(--text-2);cursor:pointer;white-space:nowrap}
.segment button.aktif{background:#fff;color:var(--primary-600);box-shadow:0 1px 3px rgba(44,59,87,.12)}

/* tablo */
.tablo-sar{overflow:auto;border-radius:var(--radius)}
.tablo{width:100%;border-collapse:collapse;font-size:13.5px}
.tablo th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-size:12px;font-weight:650;color:var(--text-2);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tablo td{padding:8px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tablo tbody tr:hover{background:#f7faff}
.tablo tr.tikla{cursor:pointer}
.tablo tr.devir td{background:#f4f9ff;font-weight:600}
.tablo tr.toplam td{background:var(--surface-2);font-weight:700;border-top:1px solid var(--line)}
.tablo tr.iptal td{color:var(--muted);text-decoration:line-through}
.tablo th.sayi{text-align:right}
.bos{padding:34px 16px;text-align:center;color:var(--muted)}
.yukleniyor{padding:30px;text-align:center;color:var(--muted)}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--primary-100);border-top-color:var(--primary);border-radius:50%;animation:don .7s linear infinite;vertical-align:-4px;margin-right:8px}
@keyframes don{to{transform:rotate(360deg)}}

/* modal / sheet */
.perde{position:fixed;inset:0;background:rgba(60,80,120,.35);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;animation:gir .12s}
.pencere{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(44,59,87,.25)}
.pencere.genis{max-width:860px}
.pencere-b{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2);gap:8px}
.pencere-b h3{flex:1;font-size:16px}
.pencere-g{padding:16px 18px;overflow:auto}
.pencere-a{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line-2);flex-wrap:wrap}
@keyframes gir{from{opacity:0}to{opacity:1}}

/* toast */
#toastlar{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:92vw}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);padding:10px 14px;border-radius:10px;box-shadow:0 6px 24px rgba(44,59,87,.18);min-width:220px;animation:gir .15s}
.toast.g{border-left-color:var(--good)}.toast.h{border-left-color:var(--bad)}

/* arama açılır liste */
.ac-sar{position:relative}
.ac-liste{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(44,59,87,.15);max-height:280px;overflow:auto;z-index:50}
.ac-oge{padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line-2)}
.ac-oge:last-child{border-bottom:0}
.ac-oge:hover,.ac-oge.sec{background:var(--primary-50)}
.ac-oge small{color:var(--muted)}

/* belge editörü */
.belge-duzen{display:grid;grid-template-columns:1fr 330px;gap:14px;align-items:start}
.toplam-kutu{padding:14px 16px;position:sticky;top:calc(var(--top-h) + 12px)}
.toplam-satir{display:flex;justify-content:space-between;padding:4px 0;color:var(--text-2)}
.toplam-satir.buyuk{font-size:21px;font-weight:750;color:var(--text);border-top:1px dashed var(--line);margin-top:6px;padding-top:10px}
input.kalem-in{width:84px;height:32px;padding:0 8px;text-align:right;border:1px solid var(--line);border-radius:8px;background:#fff;outline:none}
input.kalem-in:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
.toplam-satir input.kalem-in{width:120px}
.kalem-in.fy{width:100px!important}
.kalem-in.kucuk{width:62px!important}

/* giriş sayfası */
.giris-sayfa{min-height:100vh;display:grid;place-items:center;padding:18px;background:radial-gradient(1200px 500px at 10% -10%,#dcebff 0,transparent 60%),radial-gradient(900px 500px at 100% 110%,#d6f6f1 0,transparent 55%),var(--bg)}
.giris-kart{width:100%;max-width:420px;padding:26px 24px}
.giris-kart .logo{padding:0 0 14px}
.giris-kart h2{font-size:21px;margin-bottom:4px}
.hata-kutu{background:var(--bad-50);color:var(--bad);border:1px solid #f6c9ca;border-radius:9px;padding:8px 12px;margin-bottom:10px;font-weight:550}

/* ---------- tablet ---------- */
@media (max-width:1023px){
  :root{--side-w:64px}
  .logo-ad,.nav a span,.nav-baslik,.side-alt{display:none}
  .logo{justify-content:center;padding:14px 0}
  .nav a{justify-content:center;padding:10px 0}
  .belge-duzen{grid-template-columns:1fr}
  .toplam-kutu{position:static}
  .izgara.uc{grid-template-columns:1fr 1fr}
}
/* ---------- telefon ---------- */
@media (max-width:719px){
  body{font-size:14px}
  .side{display:none}
  .main{margin-left:0}
  .top{padding:0 12px;height:52px}
  .sube-sec{max-width:130px}
  #view{padding:12px 12px calc(var(--tab-h) + 24px)}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--tab-h);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:40;padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--muted);border:0;background:none;font-weight:600;cursor:pointer}
  .tabbar svg{width:22px;height:22px;stroke:currentColor}
  .tabbar .aktif{color:var(--primary-600)}
  .istatistikler{grid-template-columns:1fr 1fr;gap:8px}
  .ist b{font-size:17px}
  .izgara.iki,.izgara.uc{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filtre input[type=date]{width:calc(50% - 4px)}
  .perde{align-items:flex-end;padding:0}
  .pencere{max-width:none;border-radius:18px 18px 0 0;max-height:94vh}
  .sayfa-baslik h2{font-size:17px}
  #toastlar{left:12px;right:12px;bottom:calc(var(--tab-h) + 10px)}
  /* tablo → kart */
  .tablo.mobil thead{display:none}
  .tablo.mobil,.tablo.mobil tbody,.tablo.mobil tr,.tablo.mobil td{display:block;width:100%}
  .tablo.mobil tr{padding:8px 12px;border-bottom:1px solid var(--line)}
  .tablo.mobil td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .tablo.mobil td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;text-align:left;flex:none}
  .tablo.mobil td.ana{font-weight:650;font-size:14.5px;justify-content:flex-start;text-align:left}
  .tablo.mobil td.ana::before{display:none}
  .tablo.mobil td.gizle-m{display:none}
  .tablo.mobil tr.devir,.tablo.mobil tr.toplam{background:var(--surface-2)}
  .belge-tablo.mobil td .kalem-in,.belge-tablo.mobil td .kalem-in.fy,.belge-tablo.mobil td .kalem-in.kucuk{width:120px!important}
  .tablo.mobil td[colspan]{display:block;text-align:left;font-weight:700;padding-bottom:4px}
  .tablo.mobil td[colspan]::before{display:none}
  .tablo.mobil td:empty{display:none}
}
@media print{
  .side,.top,.tabbar,.filtre,.btn,#toastlar,.no-print{display:none!important}
  .main{margin:0}#view{padding:0;max-width:none}
  body{background:#fff}.kart{box-shadow:none;border:0}
}

/* ---------- Hızlı satış ---------- */
.hizli{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;align-items:start}
.hz-sol{min-width:0}
.hz-ara{display:flex;gap:8px;margin-bottom:8px}
.hz-ara input{flex:1;height:46px;font-size:16px;border-radius:12px}
.hz-kat{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px}
.hz-kat button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:6px 14px;font-weight:600;color:var(--text-2);white-space:nowrap;cursor:pointer}
.hz-kat button.aktif{background:var(--primary);border-color:var(--primary);color:#fff}
.hz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hz-urun{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px;min-height:92px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow)}
.hz-urun:hover{border-color:var(--primary)}.hz-urun:active{transform:scale(.98)}
.hz-urun b{font-size:13.5px;line-height:1.25;flex:1}
.hz-urun span{font-weight:750;color:var(--primary-600)}
.hz-urun small{color:var(--muted)}
.hz-urun.bitti{opacity:.55}
.hz-sag{position:sticky;top:calc(var(--top-h) + 12px);display:flex;flex-direction:column;max-height:calc(100vh - var(--top-h) - 28px)}
.hz-cari{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.hz-cari .btn:first-child{flex:1;justify-content:flex-start;gap:8px;overflow:hidden}
.hz-sepet{flex:1;overflow:auto;padding:6px 12px;min-height:140px}
.hz-satir{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 8px;padding:8px 0;border-bottom:1px solid var(--line-2);align-items:center}
.hz-ad{grid-column:1/-1}
.hz-adet{display:flex;align-items:center;gap:4px}
.hz-adet input,.hz-fy input{width:58px;height:32px;text-align:center;border:1px solid var(--line);border-radius:8px}
.hz-fy{text-align:right}.hz-fy input{width:84px;text-align:right}
.hz-fy input[readonly]{background:var(--surface-2);border-color:transparent}
.hz-tut{text-align:right;min-width:70px}
.hz-alt{padding:10px 12px 12px;border-top:1px solid var(--line)}
.hz-top{display:flex;justify-content:space-between;color:var(--text-2);padding:1px 0}
.hz-top.buyuk{font-size:22px;font-weight:800;color:var(--text);padding:4px 0 8px}
.hz-odeme{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}
/* seçili: dolgulu · seçili değil: sadece çerçeve */
.hz-od{height:42px;border-radius:10px;font-weight:700;cursor:pointer;background:transparent;border:1.5px solid #9db4d6;color:#4a6593}
.hz-od:hover{background:var(--primary-50)}
.hz-od.sec{background:var(--primary);border:2px solid var(--primary);color:#fff}
.hz-kasa{display:flex;gap:8px;align-items:center;margin-bottom:8px;min-height:30px}
.hz-kasa select{flex:1}
.hz-tamam{width:100%;height:50px;font-size:16px;font-weight:700}
@media (max-width:1023px){.hizli{grid-template-columns:1fr}.hz-sag{position:static;max-height:none}.hz-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media (max-width:719px){.hz-odeme{grid-template-columns:repeat(3,1fr)}.hz-grid{grid-template-columns:repeat(2,1fr)}}
.hz-git{display:none}
@media (max-width:1023px){
  .hz-git{display:flex;justify-content:space-between;align-items:center;position:sticky;bottom:calc(var(--tab-h) + 8px);z-index:15;width:100%;margin:10px 0;padding:12px 16px;border:0;border-radius:12px;background:var(--primary);color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(47,111,224,.35);cursor:pointer}
}

.demo-bant{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px 14px;background:var(--warn-50);color:#7a5200;font-size:13px;border-bottom:1px solid #f1d9a0}