:root{--bg:#16212b;--bg2:#1a2833;--card:#253746;--card2:#1e2d3a;--tx:#f1f5f8;--mu:#a3b5c3;--bd:rgba(255,255,255,.09);--ac:#FC4C02;--ac2:#ff6b2c;--acs:rgba(252,76,2,.14);--ok:#19c37d;--wn:#f5a524;--er:#f97066;--nav:#101a22;--sh:0 10px 30px rgba(0,0,0,.28);--e:cubic-bezier(.2,.8,.2,1);color-scheme:dark}


*{box-sizing:border-box}:root{padding-bottom:env(safe-area-inset-bottom,0px)}html,body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC","Noto Sans Arabic",Tahoma,Arial,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
input,select,textarea{background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:9px 12px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
textarea{resize:vertical;min-height:70px}label{display:block;font-size:12px;color:var(--mu)}label>input,label>select,label>textarea{margin-top:4px;color:var(--tx);font-size:14px}
.btn{border:1px solid var(--bd);background:var(--card);padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;white-space:nowrap;transition:transform .15s var(--e),background .2s,border-color .2s,box-shadow .2s}.btn:hover{border-color:rgba(255,255,255,.22)}.btn:active{transform:scale(.97)}
.btn.p{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 6px 18px rgba(252,76,2,.28)}.btn.p:hover{background:var(--ac2);border-color:var(--ac2);box-shadow:0 8px 24px rgba(252,76,2,.4)}.btn.d{color:var(--er)}.btn.s{padding:5px 10px;font-size:12px}.btn:disabled{opacity:.5}
.shell{display:grid;grid-template-columns:224px 1fr;min-height:100vh;min-height:100dvh}
.side{background:var(--nav);color:#c3c9d3;padding:calc(18px + env(safe-area-inset-top,0px)) 12px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{color:#fff;font-weight:800;font-size:19px;letter-spacing:.5px;padding:4px 10px 0}.brand small{display:block;font-weight:500;font-size:11px;color:#8b93a1;letter-spacing:0;margin-bottom:14px}
.side button.nav{background:none;border:0;color:inherit;text-align:start;padding:10px 12px;border-radius:8px;font-size:14px;display:flex;gap:8px;justify-content:space-between}
.side button.nav.on{background:var(--ac);color:#fff}.side button.nav:hover:not(.on){background:#1e242d}.side .cnt{font-size:11px;opacity:.7}
.who{margin-top:auto;padding:10px;font-size:12px;border-top:1px solid #232a34}.who b{color:#fff;display:block}.who .btn{margin-top:8px;width:100%;background:#1e242d;color:#c3c9d3;border-color:#2a313c}
.main{padding:20px 24px;min-width:0}.top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}.top h1{margin:0;font-size:22px}
.top select{width:auto}.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.bar input,.bar select{flex:1;min-width:140px;width:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:16px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px;min-width:0}.kpi b{font-size:28px;display:block}.kpi span{color:var(--mu);font-size:13px}
.row{cursor:pointer;margin-bottom:10px}.row{transition:transform .2s var(--e),border-color .2s,box-shadow .2s}.row:hover{border-color:rgba(252,76,2,.55);transform:translateY(-2px);box-shadow:var(--sh)}.rt{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}.rm{color:var(--mu);font-size:13px;margin-top:6px;display:flex;flex-wrap:wrap;gap:3px 14px}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--bd);color:var(--tx);white-space:nowrap}
.s-quote,.s-cancelled{background:rgba(255,255,255,.1);color:var(--mu)}.s-pending{background:rgba(245,165,36,.16);color:#f7b955}.s-approved{background:rgba(96,165,250,.16);color:#8dbdfc}.s-production{background:rgba(252,76,2,.16);color:#ff8a5c}.s-ready,.s-warehouse{background:rgba(25,195,125,.16);color:#3ddc97}.s-shipped,.s-delivered{background:#14a36a;color:#fff}
.late{color:var(--er);font-weight:600}.soon{color:var(--wn);font-weight:600}.good{color:var(--ok);font-weight:600}.mu{color:var(--mu)}.red{color:var(--er)}.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.bg{position:fixed;inset:0;background:rgba(3,12,18,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;justify-content:center;align-items:flex-start;overflow:auto;padding:14px;z-index:50}.bg.on{display:flex}
.mod{background:var(--card);border:1px solid var(--bd);border-radius:18px;box-shadow:var(--sh);padding:18px;width:100%;max-width:760px;margin:auto}.mod h2{margin:0 0 14px;font-size:18px}.mod h3{margin:18px 0 8px;font-size:14px;color:var(--mu)}
.f{display:grid;grid-template-columns:1fr 1fr;gap:10px}.f .w{grid-column:1/-1}.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--bd)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}.kv>div{background:var(--bg);border-radius:8px;padding:8px 10px}.kv span{display:block;font-size:11px;color:var(--mu)}.kv b{font-size:14px;overflow-wrap:anywhere}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:7px 8px;border-bottom:1px solid var(--bd);text-align:start}th{color:var(--mu);font-weight:600;font-size:12px}td.n,th.n{text-align:end}.tw{overflow-x:auto}
.tl{display:flex;flex-wrap:wrap;gap:6px 14px}.tl div{font-size:12px;color:var(--mu);display:flex;gap:6px;align-items:center}.tl i{width:16px;height:16px;border-radius:50%;background:var(--bd);display:inline-block}.tl .dn{color:var(--ok);font-weight:600}.tl .dn i{background:var(--ok)}
.line{border:1px solid var(--bd);border-radius:10px;padding:10px;margin-bottom:8px}.line .f3{margin-top:8px}
.auth{max-width:380px;margin:calc(8vh + env(safe-area-inset-top,0px)) auto 24px;padding:0 14px}.auth .card{padding:20px}.tabs{display:flex;gap:6px;margin:12px 0}.tabs .btn{flex:1}.tabs .on{background:var(--ac);color:#fff;border-color:var(--ac)}.auth label{margin-top:10px}
#toast{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));inset-inline:0;display:flex;justify-content:center;pointer-events:none;z-index:60}#toast div{background:#101a22;border:1px solid var(--bd);color:#fff;padding:11px 18px;border-radius:10px;max-width:92vw;box-shadow:0 6px 24px #0005}#toast .er{background:var(--er)}
.codebox{font:600 18px ui-monospace,Consolas,monospace;background:var(--bg);padding:12px;border-radius:8px;text-align:center;letter-spacing:1px;user-select:all;overflow-wrap:anywhere}
.pg{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0}
[dir=rtl] .side{border-inline-end:0}
@media print{.side,.top,.bar,.foot,#toast,.noprint{display:none!important}.bg{position:static;background:none;padding:0}.mod{max-width:none;box-shadow:none}.main>*:not(#modal){display:none}body{background:#fff;color:#000}}
.atabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}.atabs .btn.on{background:var(--ac);color:#fff;border-color:var(--ac)}.prog{height:6px;background:var(--bd);border-radius:99px;overflow:hidden;margin:6px 0 2px}.prog i{display:block;height:100%;background:var(--ok);border-radius:99px}.kpi.row:hover,.card.row{transition:transform .2s var(--e),border-color .2s,box-shadow .2s}.row:hover{border-color:rgba(252,76,2,.55);transform:translateY(-2px);box-shadow:var(--sh)}

.kpi b{white-space:nowrap;font-size:24px}.grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}

label.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx);padding:9px 0;border-bottom:1px solid var(--bd);cursor:pointer}label.chk input{width:auto;margin:0;flex:none}label.chk input:disabled+span{opacity:.45}

/* ================= MOBİL ================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,[data-a],select,input,textarea,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html.lock,html.lock body{overflow:hidden}
.bg{overscroll-behavior:contain}
.navs{display:flex;flex-direction:column;gap:4px}
.who .wn{line-height:1.35}.who .ic,.mx{display:none}.who .btn{display:flex;align-items:center;justify-content:center;gap:6px}
td .mono,td.n,th.n,td .pill,.tw .mono{white-space:nowrap}
.tw{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
input[type=date]{min-width:0;max-width:100%}
@media (hover:none){.row:hover,.kpi.row:hover,.card.row:hover{border-color:var(--bd)}.btn.p:hover{background:var(--ac)}.side button.nav:hover:not(.on){background:none}}

@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}.side{min-width:0;max-width:100%}
  /* üst çubuk: marka + hesap düğmeleri, altında kaydırılabilir tek satır menü */
  .side{height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 0}
  .brand{flex:1;min-width:0;padding:0;font-size:17px;line-height:1.1;white-space:nowrap}.brand small{display:none}
  .who{order:2;margin:0;padding:0;border:0;display:flex;align-items:center;gap:10px;width:auto}
  .who .wn{font-size:12px;text-align:end;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .who .wb{display:flex;gap:6px}.who .btn{margin:0;width:auto;min-height:44px;min-width:44px;padding:8px 12px}
  .navs{order:3;flex-direction:row;width:calc(100% + 24px);margin:4px -12px 0;padding:0 12px 8px;overflow-x:auto;gap:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 20px),transparent 100%)}
  .navs::-webkit-scrollbar{display:none}
  .side button.nav{flex:none;min-height:44px;padding:10px 14px;white-space:nowrap;justify-content:center;align-items:center;scroll-snap-align:center}
  .main{padding:14px 12px calc(20px + env(safe-area-inset-bottom,0px))}
  .top{gap:8px}.top h1{font-size:20px;min-width:0;overflow-wrap:anywhere}
  .top>div{margin-inline-start:auto}
  /* dokunma hedefleri ve iOS'ta odaklanınca yakınlaşmayı önleyen 16px yazı */
  input,select,textarea{font-size:16px!important;min-height:44px}textarea{min-height:88px}
  label>input,label>select,label>textarea{font-size:16px}
  .btn{min-height:44px;padding:10px 16px;font-size:14px}.btn.s{min-height:40px;min-width:44px;padding:8px 12px;font-size:13px}
  .bar{gap:8px}.bar input,.bar select{min-width:0;flex:1 1 140px}.bar .btn{flex:1 1 auto}
  .atabs{margin-inline:-12px;padding-inline:12px;scrollbar-width:none}.atabs::-webkit-scrollbar{display:none}.atabs .btn{flex:none}
  .f,.f3{grid-template-columns:1fr}.f3{grid-template-columns:1fr 1fr}
  .kpi b{font-size:clamp(18px,5.6vw,24px)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cards{grid-template-columns:1fr}
  .kv{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .card{padding:12px}
  th,td{padding:10px 8px}
  .tl{gap:8px 12px}
  label.chk{min-height:48px}label.chk input{width:22px;height:22px}
  .pg .btn{min-width:96px}
  .demoacc .btn{min-height:48px}
  /* tablolarda ilk sütun (kod) yatay kaydırmada sabit kalsın */
  .card.tw table th:first-child,.card.tw table td:first-child{position:sticky;inset-inline-start:0;background:var(--card);z-index:1;box-shadow:1px 0 0 var(--bd)}
  #toast{bottom:auto;top:calc(10px + env(safe-area-inset-top,0px))}
}
@media (max-width:860px) and (min-height:640px){.side{position:sticky;top:0;z-index:10}}
@media (max-width:860px) and (min-width:375px){.f.c2{grid-template-columns:1fr 1fr}.f.c2 .w{grid-column:1/-1}}
/* telefon: pencereler tam ekran, eylem düğmeleri altta sabit */
@media (max-width:640px){
  .who .lb{display:none}.who .ic{display:block}.who .wn{display:none}
  .bg{padding:0;align-items:stretch}
  .mod{border-radius:0;max-width:none;margin:0;min-height:100%;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 0;display:flex;flex-direction:column}
  .mod>form{display:flex;flex-direction:column;flex:1}
  .mod h2{padding-inline-end:52px;overflow-wrap:anywhere}
  .mx{flex:none;display:flex;align-items:center;justify-content:center;position:sticky;top:6px;align-self:flex-end;margin:0 -4px -44px 8px;width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);background:var(--card);color:var(--tx);font-size:16px;z-index:5;box-shadow:0 2px 8px #0002}
  .mod .foot{position:sticky;bottom:0;margin:auto -14px 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--card);box-shadow:0 -8px 14px -10px #0004;z-index:4;justify-content:stretch}
  .mod .foot .btn{flex:1 1 auto}
  .mod .foot:has(.btn:nth-child(4)){position:static;box-shadow:none}
  .mod .foot{margin-top:16px}
}
@media (max-width:640px){.mod>form>.foot,.mod>.foot{margin-top:auto}}


/* ================= v8: koyu lacivert + turuncu tasarım, animasyonlar ================= */
body{background:radial-gradient(1200px 600px at 85% -10%,rgba(252,76,2,.07),transparent 60%),var(--bg);background-attachment:fixed}
.side{background:linear-gradient(180deg,#121d26,#0e1720);border-inline-end:1px solid var(--bd);color:#b4c4ce}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 0}.brand small{margin:0;color:#6f8696}.brand span{line-height:1.15}
.brand .lg{flex:none;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--ac),#ff8a50);color:#fff;display:grid;place-items:center;font:800 18px system-ui;font-style:normal;box-shadow:0 6px 16px rgba(252,76,2,.35)}
.navs{margin-top:14px}
.side button.nav{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:11px 12px;border-radius:12px;transition:background .2s,color .2s,transform .15s var(--e);position:relative}
.side button.nav .ni{flex:none;opacity:.85;transition:transform .25s var(--e)}
.side button.nav:hover:not(.on){background:rgba(255,255,255,.06);color:#fff}.side button.nav:hover .ni{transform:scale(1.12)}
.side button.nav.on{background:var(--acs);color:#fff;box-shadow:inset 3px 0 0 var(--ac)}.side button.nav.on .ni{color:var(--ac2);opacity:1}
[dir=rtl] .side button.nav.on{box-shadow:inset -3px 0 0 var(--ac)}
.side .cnt{margin-inline-start:auto;background:rgba(255,255,255,.1);border-radius:99px;padding:1px 8px;font-size:11px;opacity:1}
.who{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;border-top:1px solid var(--bd);padding:12px 6px 0}
.who .wb{grid-column:1/-1;display:flex;gap:6px}.who .wb .btn{flex:1;margin:0;background:rgba(255,255,255,.06);border-color:var(--bd);color:#c3d2db}
.av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ac),#ff9a5c);color:#fff;display:grid;place-items:center;font:700 15px system-ui;font-style:normal;flex:none}
.av.lg2{width:52px;height:52px;font-size:21px}
.top{align-items:flex-end}.top h1{font-size:26px;letter-spacing:-.3px}.sub{margin:2px 0 0;color:var(--mu);font-size:13px}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gs{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:0 12px;min-width:240px;transition:border-color .2s,box-shadow .2s}.gs:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
.gs input{border:0;background:none;padding:9px 0;box-shadow:none!important;margin:0!important}.gs .ni{color:var(--mu);flex:none}
.btn.ib{padding:8px 11px;display:inline-flex;align-items:center;justify-content:center}
.bell{position:relative}.dot{position:absolute;top:-6px;inset-inline-end:-6px;min-width:19px;height:19px;border-radius:99px;background:var(--ac);color:#fff;font:700 11px/19px system-ui;font-style:normal;text-align:center;padding:0 4px;animation:pulse 2s infinite}
.top select{border-radius:12px}
.kpi b{background:linear-gradient(90deg,var(--tx),#cfe3ee);-webkit-background-clip:text;background-clip:text}
.kpi b.late,.kpi b.red{color:var(--er)}.kpi b.good{color:var(--ok)}
.card.kpi{position:relative;overflow:hidden}.card.kpi::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--acs);filter:blur(6px)}
.prog{height:7px;background:rgba(255,255,255,.08)}.prog i{width:var(--w,0%);background:linear-gradient(90deg,var(--ac),#ff9a5c);transform-origin:left;animation:grow .9s var(--e) both}
[dir=rtl] .prog i{transform-origin:right}
.pill{font-weight:600}
h3{font-size:15px}
/* sekmeler / çipler */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;margin-bottom:4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--bd);background:var(--card);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--mu);transition:all .2s var(--e)}
.chip em{font-style:normal;font-weight:500;opacity:.7;margin-inline-start:4px}.chip:hover{color:var(--tx);border-color:rgba(255,255,255,.25)}
.chip.on{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 6px 16px rgba(252,76,2,.3)}
.seg{display:inline-flex;background:var(--card2);border:1px solid var(--bd);border-radius:11px;padding:3px;gap:2px}.seg.full{display:flex;margin-bottom:12px}.seg.full button{flex:1}
.seg button{border:0;background:none;color:var(--mu);padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;transition:all .2s}.seg button.on{background:var(--ac);color:#fff}
.ps{display:flex;align-items:center;gap:8px;flex:2 1 260px;background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:0 12px}.ps input{border:0;background:none;box-shadow:none!important;padding:9px 0;min-width:0}.ps .ni{color:var(--mu);flex:none}
.ps:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--acs)}
/* ürün: liste + detay paneli */
.split{display:block}
.pd{display:none}
.ptab table th{white-space:nowrap}.ptab td{vertical-align:middle}.pn{color:var(--mu);font-size:12px;margin-top:2px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptab tr{transition:background .15s}.ptab tr[data-a]:hover{background:rgba(255,255,255,.04)}.ptab tr.sel{background:var(--acs)}
.sb{display:flex;align-items:center;gap:10px;min-width:120px}.sb b{min-width:34px;text-align:end}.sb .prog{flex:1;margin:0}.sb.lo .prog i{background:linear-gradient(90deg,var(--er),#ff9b8f)}.sb.zr .prog i{background:var(--mu)}
.pdh{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.pdh h2{margin:0 0 4px;font-size:20px}
.pbody{animation:fade .3s both}.wfull{width:100%;margin-top:14px}
.pd .foot{margin-top:12px;padding-top:12px}
.empt{text-align:center;color:var(--mu);padding:40px 10px}.empt p{margin:10px 0 0}
.ib2{padding:4px 8px!important;min-height:0!important;min-width:0!important}
.sk{height:56px;border-radius:12px;margin-bottom:8px;background:linear-gradient(90deg,var(--card) 25%,rgba(255,255,255,.08) 50%,var(--card) 75%);background-size:200% 100%;animation:shim 1.3s infinite}
@media (min-width:1100px){
  .ps2{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
  .pd{display:block;position:sticky;top:16px;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px;max-height:calc(100vh - 32px);overflow:auto}
  .cs{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
  .cs .cl{position:sticky;top:16px}.cs .cbk{display:none}
}
/* alıcılar */
.cils{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 150px);overflow:auto}
.ci{display:flex;align-items:center;gap:12px;text-align:start;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:10px 12px;transition:all .2s var(--e);width:100%}
.ci:hover{border-color:rgba(252,76,2,.5);transform:translateX(3px)}[dir=rtl] .ci:hover{transform:translateX(-3px)}.ci.on{background:var(--acs);border-color:var(--ac)}
.cn{flex:1;min-width:0;display:flex;flex-direction:column}.cn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cn small{color:var(--mu)}.cc{background:rgba(255,255,255,.08);border-radius:99px;padding:2px 9px;font-size:12px;font-weight:700}
.cdh{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}.cdt{flex:1;min-width:140px}.cdt h2{margin:0;font-size:22px;overflow-wrap:anywhere}.cda{display:flex;gap:8px;flex-wrap:wrap}
.chartc{margin-bottom:12px}.chart{width:100%;height:170px;display:block;margin-top:10px}.chart .gl{stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--e) .1s forwards}.chart .ar{animation:fade 1.2s .5s both}
.cl2{display:flex;justify-content:space-between;color:var(--mu);font-size:11px;margin-top:4px}.cl2 span{flex:1;text-align:center;min-width:0}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:8px}
.tb{display:grid;grid-template-columns:minmax(0,auto) 1fr auto;gap:10px;align-items:center;margin-top:10px}.tb .prog{margin:0}.tb .mono{max-width:120px;overflow:hidden;text-overflow:ellipsis}
/* giriş ekranı */
.auth{position:relative}
.auth .card{backdrop-filter:blur(10px);background:rgba(37,55,70,.86);animation:pop .6s var(--e) both;box-shadow:var(--sh)}
.auth .brand{padding:0 0 4px}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
body::before{width:420px;height:420px;background:rgba(252,76,2,.22);top:-120px;inset-inline-end:-100px;animation:float 14s ease-in-out infinite}
body::after{width:380px;height:380px;background:rgba(80,120,150,.28);bottom:-140px;inset-inline-start:-100px;animation:float 18s ease-in-out infinite reverse}
/* animasyonlar */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shim{to{background-position:-200% 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(252,76,2,.6)}70%{box-shadow:0 0 0 8px rgba(252,76,2,0)}100%{box-shadow:0 0 0 0 rgba(252,76,2,0)}}
@keyframes float{50%{transform:translate(30px,40px)}}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#pg.anim>*,#pg.anim .grid>*,#pg.anim .cards>*{animation:rise .55s var(--e) both}
#pg.anim>*:nth-child(2){animation-delay:.06s}#pg.anim>*:nth-child(3){animation-delay:.12s}#pg.anim>*:nth-child(4){animation-delay:.18s}#pg.anim>*:nth-child(n+5){animation-delay:.24s}
#pg.anim .grid>*:nth-child(2),#pg.anim .cards>*:nth-child(2){animation-delay:.07s}#pg.anim .grid>*:nth-child(3),#pg.anim .cards>*:nth-child(3){animation-delay:.14s}#pg.anim .grid>*:nth-child(4),#pg.anim .cards>*:nth-child(4){animation-delay:.21s}#pg.anim .grid>*:nth-child(n+5),#pg.anim .cards>*:nth-child(n+5){animation-delay:.28s}
#res>.card,#res>.row,.cils>.ci{animation:rise .4s var(--e) both}
.bg.on{animation:fade .2s both}.bg.on .mod{animation:pop .3s var(--e) both}
#toast div{animation:tin .3s var(--e) both}
.late-dot{animation:pulse 2s infinite}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.chart .ln{stroke-dashoffset:0}}
/* mobil uyarlamalar */
@media (max-width:860px){
  .brand .lg{width:30px;height:30px;font-size:15px;border-radius:9px}
  .side{background:#101a22}
  .who{display:flex;border:0;padding:0}.who .av{width:34px;height:34px}.who .wb{display:flex}
  .side button.nav{gap:8px;padding:10px 14px;justify-content:center}.side button.nav.on{box-shadow:none;background:var(--ac)}.side button.nav.on .ni{color:#fff}
  .side .cnt{display:none}
  .top{align-items:flex-start}.top h1{font-size:22px}.tools{width:100%;order:3}.tools .gs{flex:1 1 100%;min-width:0;order:-1}.top>div{margin-inline-start:0}
  .gs input{min-height:44px}.btn.ib{min-width:44px}
  .chips{margin-inline:-12px;padding-inline:12px}.chip{min-height:40px}
  .sb{min-width:96px}
  .cils{max-height:none}
  .cs:not(.has) .cd{display:none}.cs.has .cl{display:none}
  .cdh{gap:10px}.cdh .cda{width:100%}.cdh .cda .btn{flex:1}
  .cdt h2{font-size:19px}
  .chart{height:140px}
  .pn{max-width:210px}
}
@media (max-width:640px){.who .wn{display:none}.who .av{display:none}.auth .card{padding:18px}}
@media (max-width:860px){.btn.s{min-height:44px}.chip{min-height:44px}.seg button{min-height:38px}.btn.ib2{min-height:40px!important;min-width:40px!important}}
@media (max-width:860px){.tools .gs{display:none}.tools{width:auto;order:0;margin-inline-start:auto;flex-wrap:nowrap}.top{align-items:center;flex-wrap:nowrap}.tt{min-width:0;flex:1}.top select{min-height:44px}}

/* v8.1: Pantone 1655 C (#FC4C02) + Pantone 7546 C (#253746), logo, yapışkan üst menü düzeltmesi */
.brand{padding:2px 6px 0}.brand .logo{display:block;width:150px;max-width:100%}.brand .logo svg{display:block;width:100%;height:auto}.brand small{margin:6px 0 0;display:block}
.auth .brand .logo{width:190px;margin:0 0 4px}
@media (max-width:860px){
  .shell{display:block}
  .side{position:sticky;top:0;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .brand .logo{width:104px}.brand small{display:none}
}
@media (max-width:860px) and (max-height:480px){.side{position:static}}
.brand{display:block}.brand .logo{width:168px;margin-bottom:2px}
@media (max-width:860px){.brand{display:block;flex:1}.brand .logo{width:112px}}

.brand .logo img{display:block;width:100%;height:auto}

/* v9: faturalar + ek animasyonlar */
.amt{color:var(--tx)}.amt b{color:#ffb089}.badge{display:inline-block;min-width:24px;padding:1px 8px;border-radius:99px;background:var(--acs);color:var(--ac2);font-size:12px;font-weight:700;text-align:center}
.tn{font-style:normal;font-weight:700;opacity:.8;margin-inline-start:4px;background:rgba(255,255,255,.12);border-radius:99px;padding:0 7px;font-size:11px}.atabs .btn.on .tn{background:rgba(255,255,255,.25)}
.okc{text-align:center;color:var(--ok)}.amtb{font-size:18px}.inv-card .btn{pointer-events:none}
.dotp::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-inline-end:6px;animation:pulse 1.8s infinite}
.tabin{animation:tabin .4s var(--e) both}
@keyframes tabin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
@keyframes slidein{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes shake{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(14deg)}96%{transform:rotate(-12deg)}98%{transform:rotate(8deg)}}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes glow{50%{box-shadow:0 0 0 1px rgba(252,76,2,.4),0 8px 28px rgba(252,76,2,.28)}}
@keyframes stripes{to{background-position:28px 0}}
@keyframes drift{50%{transform:translate(-10px,12px) scale(1.15)}}
/* logo parıltısı */
.brand .logo{position:relative;overflow:hidden;border-radius:6px}
.brand .logo::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:sweep 5s ease-in-out 1.2s infinite}
/* düğmeler */
.btn.p{position:relative;overflow:hidden}.btn.p::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-120%) skewX(-20deg)}
.btn.p:hover::after{animation:sweep .8s var(--e)}
/* menü */
.side .navs .nav{animation:slidein .5s var(--e) both}
.side .navs .nav:nth-child(2){animation-delay:.05s}.side .navs .nav:nth-child(3){animation-delay:.1s}.side .navs .nav:nth-child(4){animation-delay:.15s}.side .navs .nav:nth-child(5){animation-delay:.2s}.side .navs .nav:nth-child(6){animation-delay:.25s}.side .navs .nav:nth-child(7){animation-delay:.3s}.side .navs .nav:nth-child(8){animation-delay:.35s}.side .navs .nav:nth-child(n+9){animation-delay:.4s}
.side button.nav.on{animation:slidein .5s var(--e) both,glow 3s ease-in-out 1s infinite}
.bell .dot{animation:pulse 2s infinite,popin .4s var(--e) both}.bell:has(.dot) .ni{transform-origin:50% 0;animation:shake 5s ease-in-out 2s infinite}
/* kartlar */
.card.kpi{transition:transform .25s var(--e),border-color .25s,box-shadow .25s}.card.kpi:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.card.kpi::after{animation:drift 9s ease-in-out infinite}
.card.tw tr{animation:fade .45s both}.card.tw tr:nth-child(2){animation-delay:.03s}.card.tw tr:nth-child(3){animation-delay:.06s}.card.tw tr:nth-child(4){animation-delay:.09s}.card.tw tr:nth-child(5){animation-delay:.12s}.card.tw tr:nth-child(6){animation-delay:.15s}.card.tw tr:nth-child(7){animation-delay:.18s}.card.tw tr:nth-child(8){animation-delay:.21s}.card.tw tr:nth-child(n+9){animation-delay:.24s}
/* ilerleme çubuğu: akan ışık + şerit */
.prog i{position:relative;overflow:hidden;background-image:linear-gradient(90deg,var(--ac),#ff9a5c)}
.prog i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 8px,transparent 8px 16px);background-size:28px 100%;animation:stripes 1.2s linear infinite;opacity:.6}
/* zaman çizelgesi noktaları sırayla belirir */
.tl .dn i{animation:popin .4s var(--e) both}.tl div:nth-child(2) i{animation-delay:.08s}.tl div:nth-child(3) i{animation-delay:.16s}.tl div:nth-child(4) i{animation-delay:.24s}.tl div:nth-child(5) i{animation-delay:.32s}.tl div:nth-child(6) i{animation-delay:.4s}.tl div:nth-child(7) i{animation-delay:.48s}
.chip{animation:popin .35s var(--e) both}.chips .chip:nth-child(2){animation-delay:.04s}.chips .chip:nth-child(3){animation-delay:.08s}.chips .chip:nth-child(4){animation-delay:.12s}.chips .chip:nth-child(n+5){animation-delay:.16s}
.who .av{animation:popin .5s var(--e) .2s both}
@media (max-width:860px){.atabs .btn{min-height:44px}.tn{display:inline-block}}

/* v10: ithalat hesaplayıcı */
.icl .icr{align-self:end;font-size:13px;line-height:1.35;min-height:20px}.icb,.icx{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}.icx:empty{display:none}.icw{margin:0}
.icd summary{cursor:pointer;margin:10px 0 6px;color:var(--mu);font-size:13px}.icp{margin-bottom:12px}.icl input{min-width:0}
@media print{.noprint,.side,.top .tools{display:none!important}}

/* v11: kur düğmesi */
.btn.rate{display:inline-flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.btn.rate .r2{color:var(--mu)}
.rqs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.rqs .card{padding:12px}.rq{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-weight:600}.rq em{font-style:normal;color:var(--mu);font-weight:400}
@media(max-width:640px){.btn.rate .r2{display:none}}

/* v12: ihracat belgeleri */
.docv{background:#fff;color:#111;padding:22px;border-radius:8px;font-size:13px;line-height:1.45}.docv .dh{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:2px solid #FC4C02;padding-bottom:10px}.docv .dlogo img{height:46px;width:auto;display:block;background:#253746;padding:6px 10px;border-radius:6px}.docv .dsel{text-align:right;font-weight:600}
.docv .dtt{font-size:22px;letter-spacing:.06em;margin:14px 0 4px;color:#253746}.docv .dno{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}.docv .dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0}.docv h4{margin:0 0 3px;font-size:11px;text-transform:uppercase;color:#666;letter-spacing:.05em}
.docv table{width:100%;border-collapse:collapse;margin:10px 0}.docv th,.docv td{border:1px solid #ccc;padding:5px 7px;text-align:left;vertical-align:top;color:#111}.docv th{background:#eef1f4;font-weight:600}.docv .n{text-align:right}.docv .dm th{width:34%}.docv .tot td{font-weight:700;background:#f6f7f9}.docv .dsig{margin-top:36px;display:flex;justify-content:flex-end}.docv .dsig span{border-top:1px solid #111;padding-top:4px;min-width:220px;text-align:center}
.dl .icb:empty{display:none}.docv .mono{font-family:ui-monospace,monospace}
@media (max-width:640px){.docv{padding:12px;overflow-x:auto}.docv .dt{min-width:560px}}
@media print{.docv{padding:0;border-radius:0}.modal,.mdl,.card{box-shadow:none}}
/* ---- v13: fatura listesi, satış analizi, potansiyel müşteriler, yeni animasyonlar ---- */
.chips .btn{flex:none}.chips .btn.on{background:var(--ac);color:#fff;border-color:var(--ac)}.chips select,.bar select{width:auto;flex:none;min-width:0}.bar{flex-wrap:wrap}
tr.clk{cursor:pointer;transition:background .2s}tr.clk:hover{background:rgba(255,255,255,.05)}
.race{height:8px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin:10px 0 6px}.race i{display:block;height:100%;width:var(--w,0%);border-radius:99px;background:linear-gradient(90deg,var(--ac),#ffb36b);transform-origin:left;animation:grow 1s var(--e) both;animation-delay:var(--d,0ms)}
[dir=rtl] .race i{transform-origin:right}
.sg{padding:0;overflow:hidden;animation:rise .5s var(--e) both;animation-delay:var(--d,0ms);transition:border-color .2s,transform .2s var(--e),box-shadow .2s}.sg:hover{border-color:rgba(252,76,2,.45);transform:translateY(-2px);box-shadow:var(--sh)}.sg.open{border-color:var(--ac)}
.sgh{padding:14px 16px;cursor:pointer}.sgh:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}.sgn{text-align:end;white-space:nowrap}.sgn b{font-size:22px}.sg .chev{margin-inline-start:auto;color:var(--mu);font-size:11px}.sg .rm{display:flex;gap:12px;flex-wrap:wrap;color:var(--mu);font-size:13px}
.sgd{padding:0 16px 14px;animation:tabin .3s var(--e) both}.cards.sold{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.tops{padding:6px 16px}.toprow{padding:10px 0;cursor:pointer;border-bottom:1px solid var(--bd);animation:slidein .5s var(--e) both;animation-delay:var(--d,0ms)}.toprow:last-child{border-bottom:0}.toprow .rt{display:flex;justify-content:space-between;gap:10px}
.card.warn{border-color:rgba(245,165,36,.4);background:rgba(245,165,36,.08);font-size:13px;margin-bottom:12px}
.pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:14px}.stg{border:1px solid var(--bd);background:var(--card);border-radius:14px;padding:10px 6px;text-align:center;animation:popin .4s var(--e) both;animation-delay:var(--d,0ms);transition:transform .2s var(--e),border-color .2s,background .2s}.stg:hover{transform:translateY(-3px)}.stg.on{background:var(--acs);border-color:var(--ac)}.stg b{display:block;font-size:22px}.stg span{font-size:12px;color:var(--mu);display:block;line-height:1.2}
.lead{border-inline-start:4px solid var(--bd);animation:rise .5s var(--e) both;animation-delay:var(--d,0ms);transition:transform .2s var(--e),box-shadow .2s}.lead:hover{transform:translateY(-2px);box-shadow:var(--sh)}.lead.pr-high{border-inline-start-color:var(--ac)}.lead.pr-med{border-inline-start-color:#f5a524}.lead.due{animation:rise .5s var(--e) both,glow 2.6s ease-in-out 1s infinite}
.lead .rt{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.lead .rm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0;color:var(--mu);font-size:13px}.lead .ln{margin:6px 0;font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.lacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}.lacts select{width:auto;padding:6px 10px;font-size:13px}.lacts a.btn{text-decoration:none;color:inherit}
@media (max-width:860px){.pipe{grid-template-columns:repeat(3,minmax(0,1fr))}.cards.sold{grid-template-columns:1fr}.lacts .btn,.lacts select{min-height:40px}.sgn b{font-size:18px}}
/* sayfa geçişi, tıklama dalgası, konfeti */
#pg>*{animation:rise .45s var(--e) both}#pg>*:nth-child(2){animation-delay:.04s}#pg>*:nth-child(3){animation-delay:.08s}#pg>*:nth-child(4){animation-delay:.12s}
.card{transition:transform .2s var(--e),box-shadow .2s,border-color .2s}.cards>.card:hover,.grid>.card.row:hover{transform:translateY(-2px)}
.btn{position:relative;overflow:hidden}.rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.burst{position:fixed;left:50%;top:55%;width:0;height:0;z-index:99;pointer-events:none}.burst i{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--c);animation:confetti 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){.rp,.burst{display:none}}
@media (max-width:860px){.top.lt{flex-wrap:wrap}.top.lt .tt{flex:1 1 100%}.top.lt .tools{width:100%;margin:0;justify-content:flex-end}}
/* ---- v14 ---- */
.obg{animation:pulse 2.4s infinite;font-size:11px;padding:1px 8px}
details.fold{padding:0}details.fold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:15px;user-select:none}details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"▾";color:var(--mu);transition:transform .3s var(--e);margin-inline-start:10px}details.fold[open]>summary::after{transform:rotate(180deg)}details.fold>summary span{flex:1}
details.fold>.toprow{margin:0 16px}details.fold[open]>.toprow{animation:slidein .45s var(--e) both;animation-delay:var(--d,0ms)}details.fold[open]{animation:tabin .35s var(--e) both}
@property --p{syntax:'<number>';inherits:false;initial-value:0}
.ring{--p:0;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ac) calc(var(--p)*1%),rgba(255,255,255,.1) 0);animation:ringin 1.2s var(--e) both;position:relative}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--card)}.ring b{position:relative;font-size:13px}
@keyframes ringin{from{--p:0}}
.lead .lh{display:flex;gap:10px;align-items:center;min-width:0}.lead .lh>div:last-child{min-width:0;overflow-wrap:anywhere}
.lead::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}.lead{position:relative;overflow:hidden}.lead:hover::after{transition:transform .8s var(--e);transform:translateX(120%)}
.lead{transform-origin:50% 0;animation:flipin .6s var(--e) both;animation-delay:var(--d,0ms)}
@keyframes flipin{from{opacity:0;transform:perspective(700px) rotateX(-14deg) translateY(14px)}to{opacity:1;transform:none}}
.pipe .stg:not(:last-child){position:relative}.pipe .stg b{transition:transform .3s var(--e)}.pipe .stg:hover b{transform:scale(1.2)}
.lfl{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.lfo{animation:tabin .3s var(--e) both}
.side button.nav:hover .ni{animation:wiggle .5s var(--e)}
@keyframes wiggle{25%{transform:rotate(-14deg) scale(1.15)}75%{transform:rotate(10deg) scale(1.15)}}
.top h1{background:linear-gradient(90deg,var(--tx),var(--tx));background-size:0 3px;background-repeat:no-repeat;background-position:0 100%;animation:underl .8s var(--e) .2s forwards;padding-bottom:3px}
@keyframes underl{to{background-image:linear-gradient(90deg,var(--ac),transparent);background-size:60% 3px}}
.toprow:hover .race i{filter:brightness(1.2)}.stg.on{animation:popin .3s var(--e) both,glow 3s ease-in-out infinite}
/* v15 */
.xlist{max-height:46vh;overflow:auto;border:1px solid var(--bd);border-radius:12px;margin-top:6px}.xlist label.chk{padding:8px 12px;gap:10px;animation:fade .2s both}.xlist label.chk span{flex:1;min-width:0;overflow-wrap:anywhere}.xq{font-style:normal;color:var(--mu);font-size:12px;white-space:nowrap}
.pg .btn.on{background:var(--ac);border-color:var(--ac);color:#fff}.pg{flex-wrap:wrap}.grid.mv{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.mv .kpi b{font-size:20px}
/* v16 */
:root[data-theme=light]{--bg:#f2f5f8;--bg2:#fff;--card:#fff;--card2:#eef2f6;--tx:#14212b;--mu:#5a6a77;--bd:rgba(20,33,43,.12);--acs:rgba(252,76,2,.1);--sh:0 10px 30px rgba(20,33,43,.12);color-scheme:light}
:root[data-theme=light] body{background:var(--bg)}:root[data-theme=light] body::before,:root[data-theme=light] body::after{opacity:.35}
:root[data-theme=light] .kpi b{background:none;color:var(--tx)}:root[data-theme=light] .kpi b.good{color:#0f9d63}:root[data-theme=light] .kpi b.late,:root[data-theme=light] .kpi b.red{color:#d92d20}:root[data-theme=light] .kpi b.soon{color:#c77700}
:root[data-theme=light] .auth .card{background:rgba(255,255,255,.92)}:root[data-theme=light] .bg{background:rgba(20,33,43,.45)}:root[data-theme=light] .btn:hover{border-color:rgba(20,33,43,.3)}:root[data-theme=light] .amt b{color:#c2410c}
:root[data-theme=light] .s-pending{color:#b7791f}:root[data-theme=light] .s-approved{color:#2563eb}:root[data-theme=light] .s-production{color:#c2410c}:root[data-theme=light] .s-ready,:root[data-theme=light] .s-warehouse{color:#0f9d63}
:root[data-theme=light] .card.tw tr:hover,:root[data-theme=light] tr.clk:hover{background:rgba(20,33,43,.04)}:root[data-theme=light] .race,:root[data-theme=light] .prog{background:rgba(20,33,43,.1)}
.cpi{width:100%;font-size:16px;padding:12px 14px}.kres{display:grid;gap:4px;margin-top:10px;max-height:52vh;overflow:auto}.kit{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:start;border:1px solid transparent;background:var(--card2);border-radius:10px;padding:10px 12px;animation:slidein .25s var(--e) both}.kit:hover,.kit.on{border-color:var(--ac);background:var(--acs)}.kit span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
/* v17 */
.race.big{height:14px;margin:12px 0}.cnsum .grid{margin:10px 0}.cnsum .kpi b{font-size:20px}
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start;scroll-snap-type:x proximity}.bcol{flex:0 0 250px;background:var(--card2);border:1px solid var(--bd);border-radius:16px;padding:10px;scroll-snap-align:start;animation:flipin .5s var(--e) both;animation-delay:var(--d,0ms)}
.bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.bcard{margin-bottom:8px;cursor:pointer;padding:10px;transition:transform .2s var(--e),border-color .2s}.bcard:hover{transform:translateY(-3px) rotate(-.4deg);border-color:var(--ac)}.bcard.bl{border-inline-start:3px solid var(--er)}.bempty{text-align:center;font-size:12px;margin:8px 0}
.mbars{display:flex;gap:10px;align-items:flex-end;height:190px;padding:14px}.mb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;gap:4px}.mcol{width:100%;flex:1;display:flex;align-items:flex-end;background:rgba(255,255,255,.04);border-radius:8px;overflow:hidden}
.mcol i{display:block;width:100%;height:var(--h);background:linear-gradient(180deg,#ffb36b,var(--ac));border-radius:8px 8px 0 0;transform-origin:bottom;animation:growy .9s var(--e) both;animation-delay:var(--d,0ms)}.mv{font-size:11px;color:var(--mu);white-space:nowrap}.ml{font-size:12px;color:var(--mu)}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:860px){.bcol{flex-basis:78vw}.mv{font-size:9px}.mbars{gap:6px;padding:10px}}

/* ---------- v21: akıcı animasyonlar ve görsel detaylar ---------- */
@property --bw{syntax:'<percentage>';inherits:true;initial-value:100%}
@keyframes v21in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v21row{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes v21bar{from{--bw:0%}to{--bw:100%}}
@keyframes v21spin{to{transform:rotate(360deg)}}
@keyframes v21nav{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes v21breathe{50%{transform:scale(1.04);filter:drop-shadow(0 6px 14px rgba(252,76,2,.35))}}
@keyframes v21orb{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,3vh,0) scale(1.15)}100%{transform:translate3d(-3vw,5vh,0) scale(1.05)}}
#pg.enter>*{animation:v21in .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*55ms)}
#pg.enter .grid>*{animation:v21in .55s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*60ms + 80ms)}
#pg.enter tr[style*="--r"]{animation:v21row .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--r,0)*22ms + 120ms)}
.navs.first .nav{animation:v21nav .5s cubic-bezier(.22,1,.36,1) both}
.navs.first .nav:nth-child(1){animation-delay:45ms}.navs.first .nav:nth-child(2){animation-delay:90ms}.navs.first .nav:nth-child(3){animation-delay:135ms}.navs.first .nav:nth-child(4){animation-delay:180ms}.navs.first .nav:nth-child(5){animation-delay:225ms}.navs.first .nav:nth-child(6){animation-delay:270ms}.navs.first .nav:nth-child(7){animation-delay:315ms}.navs.first .nav:nth-child(8){animation-delay:360ms}.navs.first .nav:nth-child(9){animation-delay:405ms}.navs.first .nav:nth-child(10){animation-delay:450ms}.navs.first .nav:nth-child(11){animation-delay:495ms}.navs.first .nav:nth-child(12){animation-delay:540ms}.navs.first .nav:nth-child(13){animation-delay:585ms}.navs.first .nav:nth-child(14){animation-delay:630ms}.navs.first .nav:nth-child(15){animation-delay:675ms}.navs.first .nav:nth-child(16){animation-delay:720ms}.navs.first .nav:nth-child(17){animation-delay:765ms}.navs.first .nav:nth-child(18){animation-delay:810ms}
:root:not(.zz) .kpi{background-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),rgba(252,76,2,.13),transparent 62%),linear-gradient(90deg,var(--ac),#ff8a4c);background-size:100% 100%,var(--bw) 3px;background-repeat:no-repeat;background-position:0 0,0 0;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
#pg.enter .kpi{animation:v21in .55s cubic-bezier(.22,1,.36,1) both,v21bar 1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*60ms + 80ms),calc(var(--i,0)*60ms + 200ms)}
:root:not(.zz) .kpi:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);border-color:rgba(252,76,2,.45)}
:root:not(.zz) .bcard,:root:not(.zz) .lead,:root:not(.zz) .ci{background-image:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),rgba(252,76,2,.12),transparent 62%);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
:root:not(.zz) .bcard:hover,:root:not(.zz) .lead:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(0,0,0,.5);border-color:rgba(252,76,2,.4)}
.tw tr td{transition:background-color .2s}.tw tr:hover td{background-color:rgba(252,76,2,.06)}
.tw tr td:first-child{box-shadow:inset 0 0 0 var(--ac);transition:box-shadow .25s,background-color .2s}.tw tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--ac)}
.btn{transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .25s,background-color .2s,border-color .2s,filter .2s}
.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0) scale(.97)}
.btn.p{position:relative;overflow:hidden;background-image:linear-gradient(135deg,var(--ac),#ff7a3c);box-shadow:0 6px 18px -8px rgba(252,76,2,.7)}
.btn.p::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.btn.p:hover::after{transform:translateX(130%);transition:transform .8s cubic-bezier(.22,1,.36,1)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(252,76,2,.22);border-color:var(--ac)!important;transition:box-shadow .2s,border-color .2s}
.pill{transition:transform .2s,filter .2s}.tw tr:hover .pill{transform:scale(1.06)}
.bg{backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1)}
.mod{animation:pop .42s cubic-bezier(.22,1,.36,1) both}
.side .logo,.side img{animation:v21breathe 6s ease-in-out infinite}
body::before{content:'';position:fixed;inset:-20vh -10vw auto auto;width:60vw;height:60vh;border-radius:50%;background:radial-gradient(closest-side,rgba(252,76,2,.09),transparent);pointer-events:none;z-index:0;animation:v21orb 22s ease-in-out infinite alternate;will-change:transform}
html[data-theme=light] body::before{background:radial-gradient(closest-side,rgba(252,76,2,.07),transparent)}
.shell{position:relative;z-index:1}
#sp{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ac),#ffb199);transform-origin:left;transform:scaleX(0);z-index:90;pointer-events:none;transition:transform .12s linear}
[dir=rtl] #sp{transform-origin:right}
html.tt *,html.tt *::before,html.tt *::after{transition:background-color .45s,color .45s,border-color .45s,box-shadow .45s!important}
#app:empty::before{content:'';display:block;width:54px;height:54px;margin:34vh auto 0;border-radius:50%;border:4px solid rgba(252,76,2,.18);border-top-color:#FC4C02;animation:v21spin .8s linear infinite}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(128,140,155,.35);border-radius:99px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:rgba(252,76,2,.5);background-clip:padding-box}
@media (prefers-reduced-motion:reduce){body::before,#sp{display:none}}
@media print{#sp,body::before{display:none!important}}
@media (max-width:760px){body::before{display:none}}

/* ---------- v22: Excel içe aktarma ---------- */
.xtabs{display:flex;gap:4px;padding:4px;background:var(--card);border:1px solid var(--bd);border-radius:14px;width:fit-content;max-width:100%;overflow-x:auto;margin-bottom:14px}
.xtab{background:none;border:0;color:var(--mu);padding:9px 16px;border-radius:10px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,transform .2s}
.xtab:hover{color:var(--tx)}.xtab.on{background:var(--ac);color:#fff;box-shadow:0 6px 16px -8px rgba(252,76,2,.8)}
.xdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:42px 20px;margin:12px 0;border:2px dashed var(--bd);border-radius:18px;cursor:pointer;background:var(--card);transition:border-color .25s,background-color .25s,transform .25s}
.xdrop:hover,.xdrop.over{border-color:var(--ac);background:rgba(252,76,2,.06);transform:translateY(-2px)}.xdrop .xdi{color:var(--ac);transition:transform .3s}.xdrop:hover .xdi,.xdrop.over .xdi{transform:translateY(-4px) scale(1.08)}
.chk{display:flex;align-items:center;gap:8px;font-size:14px}.chk input{width:auto}
tr.xe td{background:rgba(255,80,80,.08)}
.xdone{text-align:center;padding:34px 18px}.xdone .xcheck{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:32px;color:#fff;background:linear-gradient(135deg,#1fbf75,#13a05f);animation:popin .5s cubic-bezier(.22,1,.36,1) both,glow 2.4s ease-in-out 1s infinite}
.xdone .foot{justify-content:center}