/* DTF Promo — "Baskı atölyesi" tasarım dili
   kâğıt zemin · mürekkep siyahı · CMYK vurgular */
:root{
  --paper:#f4f1ea; --paper2:#ebe7dd; --card:#fff; --ink:#12141c; --ink2:#1d2030; --mut:#6d7080; --line:#e4dfd3; --line2:#d6d0c1;
  --c:#00a6e0; --m:#e5147f; --y:#ffc800; --k:#12141c;
  --cd:#0079a8; --md:#b80e63; --yd:#8a6a00;
  --good:#17995a; --warn:#e58a00; --bad:#d6264b;
  --r:16px; --r2:10px;
  --shadow:0 1px 2px rgba(18,20,28,.05),0 10px 28px -14px rgba(18,20,28,.18);
  --head:'Bricolage Grotesque',Inter,system-ui,sans-serif;
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font:14.5px/1.5 Inter,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--paper);display:flex;min-height:100vh;
  background-image:radial-gradient(circle at 1px 1px,rgba(18,20,28,.06) 1px,transparent 0);background-size:22px 22px}
body.bare{display:grid;place-items:center;background:var(--ink)}
a{color:inherit;text-decoration:none}
small{color:var(--mut);font-weight:400}
h1,h2,b.num{font-family:var(--head)}
button{font-family:inherit}

/* ink bar: üstte sabit CMYK şeridi, yüklenirken akar */
.inkbar{position:fixed;inset:0 0 auto 0;height:4px;display:flex;z-index:100;pointer-events:none}
.inkbar i{flex:1}.inkbar i:nth-child(1){background:var(--c)}.inkbar i:nth-child(2){background:var(--m)}.inkbar i:nth-child(3){background:var(--y)}.inkbar i:nth-child(4){background:var(--k)}
.inkbar.busy{height:5px}
.inkbar.busy i{animation:ink .9s ease-in-out infinite alternate;transform-origin:left}
.inkbar.busy i:nth-child(2){animation-delay:.12s}.inkbar.busy i:nth-child(3){animation-delay:.24s}.inkbar.busy i:nth-child(4){animation-delay:.36s}
@keyframes ink{from{transform:scaleX(.15);opacity:.5}to{transform:scaleX(1);opacity:1}}

/* kenar çubuğu */
.side{width:248px;background:var(--ink);color:#c4c7d6;flex:none;padding:22px 14px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:auto}
/* marka: koyu zeminli kenar çubuğu için açık renkli (koyu) logo sürümü */
.brand{display:block;padding:4px 6px 22px;line-height:0}
.brand img.logo{width:100%;max-width:216px;height:auto;display:block}
.side nav{flex:1}
.side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;margin-bottom:3px;font-weight:500;color:#aab0c6;transition:background .12s,color .12s}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:var(--paper);color:var(--ink);font-weight:700}
.side nav a.on .ic{color:var(--m)}
.sidefoot{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:10px}
.me{display:flex;gap:10px;align-items:center;padding:0 6px 12px}.me b{display:block;color:#fff;font-size:13.5px}.me small{display:block;color:#7f8399;font-size:11.5px}
.logout{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;color:#9aa0b8}.logout:hover{background:rgba(255,255,255,.07);color:#fff}
.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--c),var(--m));color:#fff;display:grid;place-items:center;font:700 16px var(--head);flex:none}
.ic{width:20px;height:20px;flex:none}

main{flex:1;min-width:0;padding:26px 30px 48px;max-width:1500px}
.top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.top h1{margin:0;font-size:30px;letter-spacing:-.8px;line-height:1.1;font-weight:800}
.top p{margin:3px 0 0;color:var(--mut);font-size:13.5px}
.top .date{margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 14px;color:var(--mut);font-weight:600;font-size:13px}
.mmark{display:none}
.mmark img{width:38px;height:38px;display:block}

/* kartlar */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.chip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi span{display:block;color:var(--mut);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding-right:26px}
.kpi b{display:block;font:800 30px/1.15 var(--head);margin-top:6px;letter-spacing:-.8px}
.kpi small{display:block;margin-top:3px;font-size:12.5px}
/* kayıt işareti (registration mark) */
.kpi::after{content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;border:2px solid var(--acc,var(--line2));
  background:linear-gradient(var(--acc,var(--line2)),var(--acc,var(--line2))) center/2px 100% no-repeat,linear-gradient(var(--acc,var(--line2)),var(--acc,var(--line2))) center/100% 2px no-repeat;opacity:.9}
.kpi.blue,.kpi.acc-c{--acc:var(--c)}.kpi.red,.kpi.acc-m{--acc:var(--m)}.kpi.acc-y{--acc:var(--y)}.kpi.green{--acc:var(--good)}.kpi.acc-k{--acc:var(--k)}
.kpi.blue,.kpi.green,.kpi.red{border-color:transparent}
.kpi.blue{background:#e5f6fd}.kpi.green{background:#e4f6ec}.kpi.red{background:#fde8f2}
.greenText b,.greenText{color:var(--good)}.redText b,.redText{color:var(--bad)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.panelhead{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.panelhead h2,.sub{margin:0;font-size:18px;display:flex;align-items:center;gap:8px;letter-spacing:-.3px;font-weight:700}
.panelhead h2 small{font-size:13px;font-family:Inter,sans-serif}
.panelhead .tabs,.panelhead .link,.panelhead form{margin-left:auto}
.sub{margin:20px 0 8px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.grid2.wideleft{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}

/* hızlı eylemler */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.quick a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--ink);color:#fff;font-weight:700;box-shadow:var(--shadow);transition:transform .12s}
.quick a:hover{transform:translateY(-2px)}
.quick a i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--q,var(--c));color:var(--ink);flex:none}
.quick a:nth-child(2) i{--q:var(--m);color:#fff}.quick a:nth-child(3) i{--q:var(--y)}.quick a:nth-child(4) i{--q:#fff}
.quick small{display:block;color:#9aa0b8;font-weight:500;font-size:12px}

/* sekmeler, rozetler, bağlantılar */
.tabs{display:inline-flex;gap:3px;background:var(--paper2);border-radius:12px;padding:3px}
.tabs a{padding:7px 16px;border-radius:9px;color:var(--mut);font-weight:600}
.tabs a.on{background:var(--ink);color:#fff}
.badge{display:inline-block;padding:2px 11px;border-radius:20px;font-size:12px;font-weight:700}
.badge.ok{background:#dcf3e7;color:#0f6a3d}.badge.warn{background:#fff0d1;color:#8a5200}.badge.bad{background:#fde0e6;color:#a31537}
.link{color:var(--cd);font-weight:700;background:none;border:0;cursor:pointer;font-size:inherit;padding:0}.link:hover{text-decoration:underline}.link.danger{color:var(--bad)}
.exports{margin-left:auto;display:flex;gap:16px}
.monthnav{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3px}
.monthnav b{padding:0 8px;font-family:var(--head);min-width:76px;text-align:center}
.monthnav a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:20px;color:var(--ink)}.monthnav a:hover{background:var(--paper2)}

/* tablolar */
.tablewrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:11.5px;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.6px;background:transparent;border-bottom:2px solid var(--line2)}
tr:last-child td{border-bottom:0}
tbody tr:hover td,table tr:hover td{background:#faf8f3}
td small{white-space:normal}
.r{text-align:right}.empty{text-align:center;color:var(--mut);padding:26px 12px!important}
tr.muted td{opacity:.5}
.dot{display:inline-block;width:11px;height:11px;border-radius:50% 50% 50% 20%;transform:rotate(-45deg);margin-right:9px}
.dotbig{display:inline-block;width:24px;height:24px;border-radius:50% 50% 50% 18%;transform:rotate(-45deg);box-shadow:inset -3px -3px 0 rgba(0,0,0,.12)}
.sbar{display:block;height:5px;border-radius:3px;background:var(--paper2);margin-top:5px;min-width:70px;overflow:hidden}
.sbar i{display:block;height:100%;border-radius:3px;background:var(--good)}.sbar i.low{background:var(--warn)}.sbar i.empty{background:var(--bad)}

/* formlar */
label{display:block;font-weight:600;font-size:13px;margin-bottom:12px}
input,select,textarea{width:100%;margin-top:6px;padding:11px 13px;min-height:44px;border:1.5px solid var(--line2);border-radius:var(--r2);font:inherit;background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 4px rgba(0,166,224,.15)}
form.inline{display:inline;margin:0}form.inline select,form.inline input{width:auto;margin:0;min-height:40px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;align-items:center;gap:9px}.check input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--ink)}
.btn{padding:11px 22px;min-height:44px;border:1.5px solid var(--line2);border-radius:var(--r2);background:#fff;font:inherit;font-weight:700;cursor:pointer;color:var(--ink);transition:transform .08s,box-shadow .12s}
.btn:hover{border-color:var(--ink)}.btn:active{transform:scale(.98)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn.primary:hover{box-shadow:0 6px 18px -6px rgba(18,20,28,.55)}
.btn.wide{width:100%;padding:14px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.hint{color:var(--mut);margin:0 0 12px;font-size:13px}
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-weight:600}
.flash.err{background:#fde0e6;color:#a31537}.flash.ok{background:#dcf3e7;color:#0f6a3d}

/* grafik */
.bars{display:flex;gap:12px;align-items:flex-end;height:160px;padding-top:6px}
.barcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.pair{flex:1;width:100%;display:flex;gap:4px;align-items:flex-end}
.pair i{flex:1;border-radius:6px 6px 0 0;min-height:3px;transition:height .4s}
.b-rev{background:var(--c)}.b-exp{background:var(--m)}
.barcol small{margin-top:6px;font-size:11.5px;font-weight:600}
.legend{display:flex;gap:16px;margin-top:10px;font-size:12px;color:var(--mut)}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
code{background:var(--paper2);padding:2px 7px;border-radius:6px;font-size:12.5px;word-break:break-all}
code.token{display:block;padding:12px;margin-bottom:12px}
.steps{margin:0;padding-left:20px;line-height:1.9}

/* günlük tüketim karoları */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.tile{border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center;background:#fdfcf9}
.tile small{display:block;font-size:12px;color:var(--ink);margin:6px 0 2px;min-height:17px;font-weight:500}.tile b{font:800 24px var(--head);display:block}.tile em{font-style:normal;color:var(--mut);font-size:12px}

/* malzeme girişi */
.usepage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.useleft{min-width:0}
.cart{position:sticky;top:18px;margin:0}
.usebar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.usebar input{flex:1;min-width:140px;margin:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px 8px 13px;border:1.5px solid var(--line);border-radius:14px;background:#fdfcf9;font:inherit;cursor:pointer;color:var(--ink);transition:.12s}
.pcard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(18,20,28,.35)}
.pcard.sel{border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(0,166,224,.2)}
.pcard.dis{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.pcard b{font-size:13px;line-height:1.25}
.pcard .badge{font-size:11px;padding:1px 9px}
.tick{position:absolute;top:7px;right:7px;min-width:24px;height:24px;border-radius:12px;background:var(--m);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 7px}
.cartempty{text-align:center;color:var(--mut);padding:30px 8px}
.crow{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.crow.over .cname small{color:var(--bad);font-weight:600}.crow.over input{border-color:var(--bad)}
.cname{font-weight:600;font-size:13px;display:flex;flex-direction:column}.cname small{display:block;margin-left:20px}
.stepper{display:flex;align-items:center}
.stepper button{width:36px;height:42px;border:1.5px solid var(--line2);background:var(--paper);font-size:20px;cursor:pointer;line-height:1}
.stepper button:first-child{border-radius:10px 0 0 10px}.stepper button:last-child{border-radius:0 10px 10px 0}
.stepper input{width:58px;margin:0;border-radius:0;text-align:center;padding:8px 2px;border-left:0;border-right:0;min-height:42px}
.crow em{font-style:normal;color:var(--mut);font-size:12px;min-width:30px}
.crow .x{border:0;background:none;font-size:22px;color:var(--mut);cursor:pointer;width:32px;height:40px}.crow .x:hover{color:var(--bad)}
.cart label{margin-top:14px}
.cartsum{color:var(--mut);margin:2px 0 12px;font-size:13px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;transition:.22s;z-index:120;max-width:90vw;box-shadow:0 12px 30px -8px rgba(0,0,0,.45);border-bottom:3px solid var(--c)}
.toast.show{opacity:1;transform:translate(-50%,0)}.toast.err{background:var(--bad);border-color:#fff}

/* giriş */
.loginbox{background:#fff;border-radius:22px;padding:34px 30px;width:min(390px,92vw);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.loginlogo{text-align:center;margin:0 0 20px;line-height:0}.loginlogo img{width:250px;max-width:80%;height:auto}

/* mobil çerçeve */
.tabbar,.scrim{display:none}
@media(max-width:960px){
  body{display:block;padding-bottom:calc(76px + var(--safe))}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:90;transform:translateX(-105%);transition:transform .22s;width:min(290px,86vw);box-shadow:20px 0 50px -20px rgba(0,0,0,.6)}
  body.menu .side{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(18,20,28,.5);z-index:80;opacity:0;pointer-events:none;transition:.2s}
  body.menu .scrim{opacity:1;pointer-events:auto}
  main{padding:16px 14px 24px}
  .top{position:sticky;top:0;z-index:40;margin:-16px -14px 16px;padding:14px;background:rgba(244,241,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .mmark{display:block;line-height:0}
  .top h1{font-size:21px}.top p{font-size:12px}.top .date{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe))}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0;border:0;background:none;color:var(--mut);font-size:11px;font-weight:600;border-radius:12px;cursor:pointer}
  .tabbar .ic{width:23px;height:23px}
  .tabbar a.on{color:var(--ink);background:var(--paper)}.tabbar a.on .ic{color:var(--m)}
  .toast{bottom:calc(86px + var(--safe))}
  .cards,.cards.four{grid-template-columns:1fr 1fr;gap:10px}
  .cards:not(.four)>:last-child:nth-child(odd){grid-column:1/-1}
  .kpi b{font-size:23px}.kpi span{font-size:11px}
  .quick{grid-template-columns:1fr 1fr;gap:10px}.quick a{padding:12px}
  .grid2,.grid2.wideleft{grid-template-columns:minmax(0,1fr)}
  .grid2.wideleft>:last-child{order:-1}
  .usepage{grid-template-columns:minmax(0,1fr)}.cart{position:static;order:2}
  .useleft{display:contents}.useleft>.panel:first-child{order:1}.useleft>.panel:last-child{order:3}
  table.compact th,table.compact td{padding:10px 6px}
  table.compact td:first-child{white-space:normal}
  table.compact .badge{padding:2px 8px;font-size:11px}
  table.compact .sbar{min-width:0}
  .cartfab{display:flex}
  .panel{padding:14px;border-radius:14px}
  .exports{margin-left:0;width:100%}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  input,select,textarea{font-size:16px}
  .hm{display:none}
  /* tablolar kart görünümüne döner */
  table.stack,table.stack tbody{display:block}
  table.stack tr:first-child:has(th),table.stack thead{display:none}
  table.stack tr{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:14px;margin-bottom:9px;background:#fdfcf9}
  table.stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;white-space:normal;text-align:right;background:none!important}
  table.stack td::before{content:attr(data-label);color:var(--mut);font-size:12px;font-weight:600;text-align:left;flex:none}
  table.stack td:first-child{font:700 15px var(--head);text-align:left;justify-content:flex-start;padding-bottom:6px}
  table.stack td:first-child::before{display:none}
  table.stack td:empty{display:none}
  table.stack td[colspan]{display:block;text-align:center}table.stack td[colspan]::before{display:none}
  table.stack td.r{text-align:right}
  .tablewrap{margin:0}
}
@media(max-width:520px){
  .row2{grid-template-columns:1fr}
  .top h1{font-size:19px}
  .cards.four .kpi b{font-size:21px}
  .crow{grid-template-columns:1fr auto auto}.crow em{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.cartfab{display:none;position:fixed;right:14px;bottom:calc(86px + var(--safe));z-index:60;align-items:center;gap:8px;background:var(--m);color:#fff;border:0;border-radius:30px;padding:13px 20px;font-weight:700;font-size:15px;box-shadow:0 10px 24px -8px rgba(229,20,127,.6);cursor:pointer}
.cartfab[hidden]{display:none!important}
@media(min-width:961px){.cartfab{display:none!important}}
@media(max-width:960px){.cartfab{display:flex}}

/* seçim kutuları: özel ok, fare odağında halka yok (yalnız klavye) */
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2312141c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center/14px}
select:focus,input:focus,textarea:focus{box-shadow:none;border-color:var(--ink)}
select:focus-visible,input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px rgba(0,166,224,.25);border-color:var(--c)}
form.inline select{min-height:40px;padding:7px 38px 7px 16px;border-radius:22px;font-weight:600;font-size:14px;background-color:var(--card);border:1.5px solid var(--line2);box-shadow:var(--shadow)}
form.inline select:hover{border-color:var(--ink)}
form.inline input[type=date]{min-height:40px;padding:7px 14px;border-radius:22px;font-weight:600;background:var(--card)}
@media(max-width:960px){form.inline select{font-size:15px}}

/* dil değiştirici */
.langs{display:flex;gap:4px;padding:0 6px 10px}
.langs a{flex:1;text-align:center;padding:6px 0;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.5px;color:#9aa0b8;border:1px solid rgba(255,255,255,.14)}
.langs a:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.langs a.on{background:var(--y);border-color:var(--y);color:var(--ink)}
.loginbox .langs{padding:16px 0 0}
.loginbox .langs a{color:var(--mut);border-color:var(--line2)}.loginbox .langs a:hover{color:var(--ink);border-color:var(--ink)}
.loginbox .langs a.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* dil seçici (açılır menü + bayrak) */
.flag{display:block;flex:none;border-radius:3px}
.langdd{position:relative;display:block}
.langdd summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 12px;border-radius:12px;font-weight:600;user-select:none}
.langdd summary::-webkit-details-marker{display:none}
.langdd .chev{margin-left:auto;transition:transform .15s;opacity:.7}.langdd[open] .chev{transform:rotate(180deg)}
.langmenu{position:absolute;z-index:60;min-width:190px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 40px -12px rgba(18,20,28,.35)}
.langmenu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;font-weight:600}
.langmenu a:hover{background:var(--paper)}.langmenu a.on{background:var(--paper)}.langmenu .ok{margin-left:auto;color:var(--good)}
/* kenar çubuğu: yukarı açılır, koyu */
.langdd.up{margin:0 0 8px}
.langdd.up summary{background:rgba(255,255,255,.06);color:#e6e8f2;border:1px solid rgba(255,255,255,.1)}
.langdd.up summary:hover{background:rgba(255,255,255,.11)}
.langdd.up .langmenu{bottom:calc(100% + 6px);left:0;right:0}
/* üst/giriş: aşağı açılır */
.langdd.down summary{background:var(--card);border:1.5px solid var(--line2);padding:7px 12px;box-shadow:var(--shadow)}
.langdd.down .langmenu{top:calc(100% + 6px);right:0}
.langdd.compact{display:none}
.langdd.compact summary{padding:6px 9px;gap:6px}.langdd.compact .lname{display:none}
.loginlang{display:flex;justify-content:flex-end;margin:-8px 0 14px}
.loginlang .langdd summary{padding:6px 11px;font-size:13px}
.langs{display:none}
@media(max-width:960px){.langdd.compact{display:block;margin-left:auto}.top .date{display:none}}

/* profil */
a.me{border-radius:12px;padding:8px 8px 12px;margin:0 -2px;transition:background .12s}a.me:hover,a.me.on{background:rgba(255,255,255,.07)}
.idcard{display:flex;gap:14px;align-items:center;padding:4px 0 18px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.idcard b{display:block;font:700 19px var(--head)}.idcard small{display:block;margin-bottom:6px}
.avatar.big{width:58px;height:58px;border-radius:18px;font-size:24px}
.chip.sm{padding:2px 11px;font-size:12px}
.langlabel{font-weight:600;font-size:13px;margin-bottom:8px}
.langcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.langcard{margin:0;cursor:pointer;display:block}
.langcard input{position:absolute;opacity:0;pointer-events:none}
.langcard span{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;border:2px solid var(--line2);border-radius:14px;background:#fdfcf9;transition:.12s}
.langcard span b{font-size:14px}
.langcard:hover span{border-color:var(--ink)}
.langcard input:checked+span{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(0,166,224,.2)}
.langcard input:focus-visible+span{box-shadow:0 0 0 4px rgba(0,166,224,.35)}
@media(max-width:520px){.langcards{gap:8px}.langcard span{padding:12px 4px}}

.quick.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.quick.three{grid-template-columns:1fr}}

/* telegram bağlama kodu kartı */
.codecard{border:2px solid var(--ink)}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--paper);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.codebox small{display:block;margin-bottom:4px}
.bigcode{display:block;background:none;padding:0;font:800 30px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:4px;user-select:all;-webkit-user-select:all;cursor:text;word-break:break-all}
.bigcode.sm{font-size:19px;letter-spacing:.5px}
@media(max-width:520px){.codebox{flex-direction:column;align-items:stretch}.codebox .btn{width:100%}.bigcode{font-size:26px}}

.btn.danger{color:var(--bad);border-color:#f0c4cd;background:#fff}.btn.danger:hover{background:var(--bad);border-color:var(--bad);color:#fff}
.deleteform{margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line)}.deleteform .btn{width:100%}

/* sürükle-bırak sıralama */
.handle{cursor:grab;color:var(--mut);width:36px;text-align:center;user-select:none;-webkit-user-select:none;touch-action:none;font-size:18px;letter-spacing:-2px}
.handle:active{cursor:grabbing}
.drag-ghost{opacity:.35;background:var(--paper)!important;border-style:dashed!important}
.drag-chosen{box-shadow:0 12px 26px -10px rgba(18,20,28,.45);cursor:grabbing}
.sorthint{margin:-4px 0 12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media(max-width:960px){
  table.stack td.handle{display:flex;justify-content:center;padding-top:6px;border-top:1px dashed var(--line);margin-top:6px;width:auto;font-size:20px}
  table.stack td.handle::before{display:none}
}
.drag-fallback{opacity:.95!important;box-shadow:0 16px 30px -10px rgba(18,20,28,.5)!important;z-index:200;pointer-events:none}