*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Tarayıcının select/tarih seçici gibi yerel form kontrollerini (özellikle
     açılır liste kutusunu) siteyle aynı koyu temada çizmesi için — aksi halde
     kutu koyu görünse de açılan seçenek listesi varsayılan beyaz temada çıkıyordu. */
  color-scheme: dark;
  /* ============================================================
     OBSIDIAN (ver2) — token katmanı.
     Taban mutlak siyah; renk yalnızca ışıktan gelir. Eski token ADLARI
     bilerek korundu: tüm bileşenler bunları kullandığı için palet buradan
     değişince arayüzün tamamı tek noktadan yeni tasarım diline geçiyor.
     Referans: /ver2 sunumu.
     ============================================================ */
  --bg:#000000;
  --bg-grad:
    radial-gradient(1200px 820px at 12% -14%, rgba(79,227,255,.085), transparent 58%),
    radial-gradient(1050px 760px at 112% 6%, rgba(139,107,255,.075), transparent 56%),
    radial-gradient(900px 620px at 50% 120%, rgba(79,227,255,.035), transparent 60%),
    #000000;
  --surface:#0b0e17;
  --surface2:#11141f;
  --surface3:#171b28;
  --border:rgba(255,255,255,.075);
  --border-strong:rgba(255,255,255,.16);
  --accent:#4fe3ff;            /* İyon */
  --accent2:#8b6bff;           /* Plazma */
  --accent-soft:rgba(79,227,255,.13);
  --green:#3fe0a8;             /* Nane — stok var */
  --red:#ff5c7a;               /* Gül — hata/yasak */
  --orange:#ff7a45;            /* Kor — kritik/uyarı */
  --purple:#8b6bff;
  --teal:#3fe0a8;
  --text:#f4f6fb;
  --muted:#7c8698;
  --faint:#4d5566;
  --card:#0a0d14;
  --radius:20px;
  --radius-sm:12px;
  --radius-lg:28px;
  --shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.95);
  --shadow-lg:0 1px 0 rgba(255,255,255,.09) inset, 0 44px 100px -36px rgba(0,0,0,1);
  --ring:0 0 0 3px rgba(79,227,255,.22);
  --trans:.18s cubic-bezier(.16,1,.3,1);
  --spring:.26s cubic-bezier(.16,1,.3,1);
  --bounce:.42s cubic-bezier(.34,1.56,.64,1);
  --grad:linear-gradient(115deg,#7fe9ff,#4fe3ff 42%,#6f8dff);
  --font:'SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,sans-serif;
  --font-display:'SF Pro Display',-apple-system,'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --font-mono:'SF Mono','Cascadia Mono',ui-monospace,Consolas,'Liberation Mono',monospace;
  --hairline:rgba(255,255,255,.045);
  --row-hover:rgba(255,255,255,.022);
  /* Cam katmanı — Vitrum I (ince) / Vitrum II (derin), /ver2 malzeme bölümü */
  --glass-fill:linear-gradient(168deg,rgba(255,255,255,.048),rgba(255,255,255,.016) 62%,rgba(255,255,255,.03));
  --glass-fill-strong:linear-gradient(165deg,rgba(255,255,255,.085),rgba(6,8,14,.55) 68%,rgba(255,255,255,.045));
  --glass-border:rgba(255,255,255,.075);
  --glass-border-hi:rgba(255,255,255,.16);
  --glass-blur:blur(26px) saturate(150%);
  --glass-blur-deep:blur(44px) saturate(180%);
  --glass-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 0 0 1px rgba(255,255,255,.045) inset, 0 26px 62px -24px rgba(0,0,0,1);
  --halo-ion:0 0 0 1px rgba(79,227,255,.28), 0 0 42px -8px rgba(79,227,255,.42);
}
html{height:100%;scroll-behavior:smooth}
body{min-height:100%;background:var(--bg-grad);background-attachment:fixed;color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(79,227,255,.3);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:2px solid transparent;background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}

/* ============================================================
   LOGIN — "Vitrum III": tek kristal cam + üstünde duran ince panel
   Sahnenin tamamı #loginGL'de (bkz. login-bg.js). Buradaki CSS yalnızca
   panel, geçiş ve WebGL yoksa devreye giren yedek zemin.
   ============================================================ */
#loginOverlay{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s ease;padding:20px;overflow:hidden}
/* WebGL yoksa görünen yedek sahne — kristal yüklenirse üstünü tamamen örter */
#loginOverlay::before,#loginOverlay::after{content:'';position:absolute;border-radius:50%;filter:blur(120px);opacity:.20;z-index:0;animation:floatOrb 26s ease-in-out infinite}
#loginOverlay::before{width:460px;height:460px;background:radial-gradient(circle,var(--accent),transparent 70%);top:-140px;left:-100px}
#loginOverlay::after{width:420px;height:420px;background:radial-gradient(circle,var(--accent2),transparent 70%);bottom:-150px;right:-90px;animation-delay:-9s}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}
#loginOverlay.hidden{opacity:0;pointer-events:none}
/* Kristal çiziliyorsa yedek küreler kapanır — ::after canvas'tan SONRA boyanıyor
   (ikisi de z-index:0) ve sahnenin üstüne mor bir sis seriyordu. */
#loginOverlay.glOn::before,#loginOverlay.glOn::after{display:none}
#loginGL{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- Giriş → portal geçişi -----------------------------------------------
   1. yarı: kart ekseni etrafında dönerek uzaklaşır, kristal büyür (login-bg.js).
   2. yarı: sayfa yenilenir, kabuk yansımaların arkasından tam ekran açılır. */
/* Geçiş boyunca opaklığı JS kare kare sürüyor (kristale eşlenik olması gerek).
   CSS'teki `transition:opacity .5s` her atamada yeniden başlayıp fadeyi
   sürüklüyordu — geçiş modunda kapatılıyor. */
#loginOverlay.crystalMode{padding:0;transition:none}
#loginOverlay.crystalMode .loginBox{pointer-events:none}
/* Açılış yarısında giriş kartı ölü işaretleme: parlamanın üstünde bir kare bile
   görünmesin diye gizleniyor. İki kural gerekiyor — `html.fpEnter` satır içi
   önyüklemeden itibaren JS çalışana kadar, `.enterMode` ise animasyon boyunca
   (playEnter zemin rengi için fpEnter'ı hemen kaldırıyor). */
html.fpEnter .loginBox,#loginOverlay.enterMode .loginBox{display:none}
.loginBox.loginBoxOut{
  animation:loginBoxOut .78s cubic-bezier(.55,0,.68,.35) forwards;
  transform-origin:50% 55%;
}
@keyframes loginBoxOut{
  0%  {opacity:1;transform:perspective(1400px) rotateY(0deg) rotateX(0deg) scale(1);filter:blur(0)}
  55% {opacity:.85;transform:perspective(1400px) rotateY(-58deg) rotateX(6deg) scale(.9);filter:blur(0)}
  100%{opacity:0;transform:perspective(1400px) rotateY(-142deg) rotateX(12deg) scale(.58);filter:blur(7px)}
}
/* Kabuk açılırken transform/opacity JS'ten sürülüyor (kare kare kristale eşlenik
   olması gerekiyor), o yüzden burada geçiş TANIMLANMIYOR — sadece başlangıç hali. */
.fpShellIn{opacity:0;transform:scale(.955);transform-origin:50% 48%;will-change:opacity,transform,filter}
/* Yenilenen sayfanın İLK boyaması: beyaz flash yerine parlamanın rengi.
   index.php'deki satır içi önyükleme script'i bu sınıfı <html>'e koyuyor. */
/* Renk shader'ın uBloom=1'de ürettiğine eşlenmiştir (tonemap+gamma sonrası
   ~#d1d9db) — aksi halde reload anında ton sıçraması görünüyor. */
html.fpEnter,html.fpEnter body{background:#d1d9db}
html.fpEnter #loginOverlay{background:#d1d9db}
@media (prefers-reduced-motion:reduce){
  .loginBox.loginBoxOut{animation:none;opacity:0}
  html.fpEnter,html.fpEnter body,html.fpEnter #loginOverlay{background:#000}
}

/* Vitrum III — kristalin ÜSTÜNDE duran ince cam levha. Arkadaki kristal
   görünsün diye eski panelden belirgin biçimde daha şeffaf ve daha koyu;
   ayrışmayı gövde parlaklığı değil, keskin kenar ışığı sağlıyor. */
.loginBox{
  position:relative;z-index:1;width:396px;max-width:92vw;padding:38px 32px 28px;
  border-radius:28px;overflow:hidden;
  font-family:var(--font);
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(4,6,11,.72) 62%);
  backdrop-filter:var(--glass-blur-deep) saturate(140%);-webkit-backdrop-filter:var(--glass-blur-deep) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 60px 140px -40px #000,
    0 0 0 1px rgba(255,255,255,.03),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(139,107,255,.16);
  display:flex;flex-direction:column;gap:13px;
  animation:loginIn .7s cubic-bezier(.16,1,.3,1);
}
/* camın kalınlığını gösteren üst kenar ışığı — kristalin dispersiyonuna
   göz kırpacak şekilde iki uçta iyon/plazma rengine kayıyor */
.loginBox::after{
  content:'';position:absolute;left:10%;right:10%;top:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(79,227,255,.55) 22%,rgba(255,255,255,.85) 50%,rgba(139,107,255,.55) 78%,transparent);
}
.loginBox::before{
  content:'';position:absolute;inset:-60% -20%;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%);
  transform:translateX(-140%) rotate(3deg);
  animation:glassSheen 10s ease-in-out infinite;
}
@keyframes glassSheen{
  0%,70%{transform:translateX(-140%) rotate(3deg)}
  88%{transform:translateX(140%) rotate(3deg)}
  100%{transform:translateX(140%) rotate(3deg)}
}
@keyframes loginIn{from{opacity:0;transform:translateY(22px) scale(.965)}to{opacity:1;transform:none}}

.loginLogo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-bottom:10px}
.loginLogo svg{margin-bottom:15px;filter:drop-shadow(0 10px 30px rgba(79,227,255,.55)) drop-shadow(0 0 14px rgba(139,107,255,.30))}
.loginLogoText{font-family:var(--font-display);font-size:23px;font-weight:500;letter-spacing:-.6px;color:var(--text)}
/* alt başlık ince bir hairline'ın üstünde duruyor — panele "kesilmiş" bir his verir */
.loginLogo span{
  display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:400;color:var(--faint);
  letter-spacing:3.4px;text-transform:uppercase;margin-top:11px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);
}

/* Yüzen etiketli alan — placeholder yerine yukarı kayan etiket */
.loginField{position:relative;z-index:1}
.loginField label{
  position:absolute;left:16px;top:16px;font-size:14px;color:var(--faint);
  pointer-events:none;transform-origin:left top;transition:var(--spring);
}
.loginField .loginInput:focus + label,
.loginField .loginInput:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.72);color:var(--accent);
}
.loginInput{
  position:relative;z-index:1;width:100%;padding:13px 16px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);
  color:var(--text);font-size:14.5px;outline:none;font-family:inherit;
  transition:background var(--spring),border-color var(--spring),box-shadow var(--spring);
}
.loginInput::placeholder{color:var(--faint)}
/* Yüzen etiket yalnızca .loginField içindeyken devreye girer — .loginInput
   sınıfı başka yerlerde de (ör. Dağıtılmayan Modeller aramasında) kullanılıyor
   ve orada placeholder metni görünmek zorunda. */
.loginField .loginInput{padding:18px 16px 9px}
.loginField .loginInput::placeholder{color:transparent}
.loginInput:focus{background:rgba(79,227,255,.05);border-color:rgba(79,227,255,.55);box-shadow:0 0 0 3px rgba(79,227,255,.11)}

.loginBtn{
  position:relative;z-index:1;width:100%;padding:14px;margin-top:8px;
  background:var(--grad);border:none;border-radius:var(--radius-sm);
  color:#02060c;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;letter-spacing:.2px;
  box-shadow:0 12px 34px -12px rgba(79,227,255,.75),0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .25s;
}
.loginBtn:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 18px 46px -12px rgba(79,227,255,.9),0 1px 0 rgba(255,255,255,.6) inset}
.loginBtn:active{transform:translateY(0) scale(.97);filter:brightness(.98)}
.loginBtn:disabled{opacity:.55;cursor:wait;transform:none;filter:none}

@media(max-width:480px){
  #loginOverlay{padding:14px}
  .loginBox{width:100%;padding:32px 20px 22px;border-radius:26px;gap:11px}
  .loginLogo svg{margin-bottom:10px}
  .loginLogoText{font-size:21px}
  .loginInput{padding:16px 14px 8px;font-size:14px}
  .loginField label{left:14px;top:14px;font-size:13.5px}
  .loginBtn{padding:13px;font-size:13.5px}
}

.loginErr{position:relative;z-index:1;color:#ffb4b4;font-size:13px;text-align:center;display:none;background:rgba(255,92,122,.12);border:1px solid rgba(255,92,122,.28);padding:10px 14px;border-radius:14px;backdrop-filter:blur(8px)}

#turnstileContainer{position:relative;z-index:1}

/* ============================================================
   APP SHELL — Liquid Glass kontrol katmanı (nav/sidebar/butonlar)
   ============================================================ */
#app{display:none;flex-direction:column;min-height:100vh}
#app.visible{display:flex}
.nav{display:flex;align-items:center;gap:16px;padding:14px 22px;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 16px 32px -22px rgba(0,0,0,.55)}
.navBrand{font-size:19px;font-weight:800;display:flex;align-items:center;gap:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;letter-spacing:-.3px}
.navSearchWrap{flex:1;display:flex;justify-content:center}
.navSearch{width:100%;max-width:480px;padding:10px 18px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:999px;color:var(--text);font-size:14px;outline:none;transition:var(--spring);text-align:center;backdrop-filter:blur(10px)}
.navSearch:focus{border-color:rgba(255,255,255,.34);box-shadow:0 0 0 4px rgba(79,227,255,.2);background:rgba(255,255,255,.1);text-align:left}
.navRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);color:var(--muted);backdrop-filter:blur(8px)}
.chip.admin{color:var(--accent);border-color:rgba(79,227,255,.4);background:rgba(79,227,255,.14)}
.chip.satis{color:var(--orange);border-color:rgba(255,122,69,.4);background:rgba(255,122,69,.12)}
.chip.musteri{color:var(--green);border-color:rgba(63,224,168,.4);background:rgba(63,224,168,.12)}
.navBtn{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);color:var(--text);transition:var(--spring);white-space:nowrap;backdrop-filter:blur(10px)}
.navBtn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);transform:translateY(-1px)}
.navBtn:active{transform:translateY(0) scale(.95)}
.navBtn.danger{border-color:rgba(255,92,122,.4);color:#ffb4b4;background:rgba(255,92,122,.08)}
.navBtn.danger:hover{background:rgba(255,92,122,.16)}
.navBtn.active{border-color:rgba(255,122,69,.5);color:var(--orange);background:rgba(255,122,69,.12)}

.adminDashWrap{position:relative}
.adminDashMenu{position:absolute;top:calc(100% + 8px);right:0;z-index:150;min-width:180px;display:flex;flex-direction:column;overflow:hidden;background:rgba(18,21,30,.96);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-shadow)}
.adminDashMenu.hidden{display:none}
.adminDashMenu button{text-align:left;padding:12px 16px;background:none;border:none;color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.adminDashMenu button:hover{background:var(--accent-soft);color:var(--accent)}
.adminDashMenu button+button{border-top:1px solid var(--glass-border)}
.navBadge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800}
.navBadge.hidden{display:none}

.mobileShowResultsBtn{display:none;margin-top:8px;width:100%}
@media(max-width:700px){ .mobileShowResultsBtn{display:flex} }

.statsBar{padding:10px 22px;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px}
.statItem{color:var(--muted)}
.statVal{color:var(--text);font-weight:700}
.sortBtn{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--muted);transition:var(--spring);white-space:nowrap;backdrop-filter:blur(8px)}
.sortBtn:hover{border-color:var(--accent);color:var(--accent)}
.sortBtn.active{background:rgba(79,227,255,.2);border-color:var(--accent);color:var(--accent)}
.sortBtn:active{transform:scale(.94)}

/* MAIN LAYOUT */
.main{display:flex;flex:1;overflow:hidden}
.sidebar{width:270px;min-width:230px;max-width:290px;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-right:1px solid var(--glass-border);padding:18px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;transition:margin-left .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1)}
.sidebar.collapsed{margin-left:-290px}
.filterGroup{display:flex;flex-direction:column;gap:6px}
.filterLabel{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;padding:0 2px}
.filterDesc{font-size:10px;color:var(--muted);padding:0 2px 2px;opacity:.75}
.filterChips{display:flex;flex-wrap:wrap;gap:5px}
.fchip{padding:5px 13px;border-radius:999px;font-size:12px;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text);transition:var(--spring);user-select:none;backdrop-filter:blur(6px)}
.fchip:hover{border-color:var(--accent);color:var(--accent)}
.fchip.active{background:rgba(79,227,255,.22);border-color:var(--accent);color:var(--accent);font-weight:600}
.fchip:active{transform:scale(.93)}

/* ARANABİLİR ÇOKLU SEÇİM (combo) — cam pil */
.comboBox{position:relative;z-index:1;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:14px;padding:6px;backdrop-filter:blur(10px)}
.comboBox.open{z-index:200}
.comboChips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.comboChips:empty{margin-bottom:0}
.comboChip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--accent-soft);border:1px solid rgba(79,227,255,.35);color:var(--accent)}
.comboChip .x{cursor:pointer;opacity:.75;font-weight:800}
.comboChip .x:hover{opacity:1;color:var(--red)}
.comboInputWrap{display:flex;align-items:center;gap:6px;padding:2px 6px}
.comboIcon{font-size:12px;opacity:.6}
.comboInput{flex:1;border:none;background:transparent;color:var(--text);font-size:12.5px;outline:none;font-family:var(--font)}
.comboInput::placeholder{color:var(--faint)}
.comboDropdown{position:absolute;left:0;right:0;top:calc(100% + 6px);background:rgba(13,16,24,.98);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--glass-shadow);max-height:220px;overflow-y:auto;z-index:50}
.comboDropdown.hidden{display:none}
.comboDropdown.dropUp{top:auto;bottom:calc(100% + 6px)}
.comboOption{padding:8px 12px;font-size:12.5px;cursor:pointer;color:var(--text);border-radius:10px;margin:2px}
.comboOption:hover{background:var(--accent-soft);color:var(--accent)}
.comboEmpty{padding:10px 12px;font-size:12px;color:var(--muted)}

/* CONTENT / GRID — kartlar performans için opak kalır (Apple da Liquid Glass'ı
   içerik döşemelerine değil kontrol katmanına uygular), yalnızca ince cam benzeri
   üst vurgu ve yumuşak gölgelerle bütünlüğü sağlar */
.content{flex:1;overflow-y:auto;padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;transition:var(--spring);display:flex;flex-direction:column;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 20px -14px rgba(0,0,0,.5)}
.pcard:hover{transform:translateY(-5px);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 26px 50px -18px rgba(0,0,0,.6);border-color:rgba(79,227,255,.55)}
.pcard.outstock{opacity:.5}
.pcard.outstock:hover{opacity:.8}
/* KART DAĞITIMI — ızgaraya giren kartlar iskambil destesinden dağıtılır gibi
   tek bir noktadan sırayla yerlerine kayar. --deal-* değişkenlerini her kart
   için dealCards() (app.js) yazar; animasyon bitince sınıf da değişkenler de
   kaldırılır, böylece hover dönüşümüyle çakışmaz. */
@keyframes pcardDeal{
  from{opacity:0;transform:translate3d(var(--deal-x,0px),var(--deal-y,-220px),0) rotate(var(--deal-rot,-10deg)) scale(.84)}
  to{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
}
.pcard.dealIn{animation:pcardDeal .55s cubic-bezier(.2,.85,.3,1) both;animation-delay:var(--deal-delay,0ms);will-change:transform,opacity;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pcard.dealIn{animation:none;pointer-events:auto}}
.uretimBadge{position:absolute;top:8px;left:8px;z-index:10;font-size:9px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.3px;background:rgba(255,122,69,.22);color:var(--orange);border:1px solid rgba(255,122,69,.45);backdrop-filter:blur(6px)}
.depoRibbon{position:absolute;top:8px;right:8px;z-index:10;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.depoTag{font-size:9px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.4px;background:rgba(79,227,255,.25);color:var(--accent);border:1px solid rgba(79,227,255,.4);backdrop-filter:blur(6px)}
.pcardImg{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--surface2);display:block;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pcard:hover .pcardImg{transform:scale(1.06)}
.pcardImgPlaceholder{width:100%;aspect-ratio:3/4;background:var(--surface2);display:flex;align-items:center;justify-content:center;color:var(--border);font-size:34px;flex-direction:column;gap:4px}
.pcardImgPlaceholder small{font-size:10px;color:var(--muted)}
.pcardBody{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.pcardCode{font-size:10px;color:var(--muted);font-family:monospace}
.pcardName{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--text)}
.pcardMeta{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.badge{font-size:10px;padding:2px 8px;border-radius:999px;font-weight:600;background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.badge.marka{color:var(--accent);border-color:rgba(79,227,255,.3);background:rgba(79,227,255,.07)}
.badge.depoonly{color:var(--teal);border-color:rgba(63,224,168,.3);background:rgba(63,224,168,.07)}
.pcardFooter{padding:9px 12px;border-top:1px solid var(--border)}
.pcard.selectable .pcardFooter{padding-right:34px} /* seçim balonuna yer aç */
/* Kart altındaki TEK gösterge: stok durumu + toplam adet. Renk noktaları
   kaldırıldı; bardaki dolgu oranı o an listelenen en yüksek stoğa göre
   normalize edilir (bkz. maxStockInView / buildCard). */
.stockBar{display:flex;flex-direction:column;gap:5px}
.stockBarLabel{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stockBarLine{display:flex;align-items:center;gap:8px}
.stockBarTrack{flex:1;min-width:24px;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.stockBarFill{height:100%;border-radius:999px;background:currentColor;transition:width .45s cubic-bezier(.16,1,.3,1)}
.stockBarQty{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.stockBar.var{color:var(--green)}
.stockBar.dusuk{color:var(--orange)}
.stockBar.yok{color:var(--red)}

/* SELECTION BUBBLE / BAR — tam cam, yüzen kontrol */
.selBubble{position:absolute;bottom:8px;right:8px;z-index:11;width:24px;height:24px;border-radius:50%;cursor:pointer;background:rgba(10,12,17,.7);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;font-weight:900;transition:var(--spring);backdrop-filter:blur(6px)}
.selBubble:hover{transform:scale(1.12);box-shadow:0 0 0 4px var(--accent-soft)}
.selBubble:active{transform:scale(.92)}
.selBubble.checked{background:var(--accent);border-color:var(--accent);color:#fff}
.selBubble.checked::after{content:'✓'}
.pcard.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.selBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 22px;position:relative;background:rgba(79,227,255,.08);border-bottom:1px solid var(--glass-border);font-size:13px;color:var(--text)}
.selDraftBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 22px;background:rgba(255,122,69,.08);border-bottom:1px solid var(--glass-border);font-size:12.5px;color:var(--text)}

.selTray{width:190px;flex-shrink:0;background:var(--glass-fill);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;overflow:hidden}
.selTray.hidden{display:none}
.selTrayHead{padding:16px 14px 10px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--glass-border);flex-shrink:0}
.selTrayList{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
.selTrayItem{display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer;transition:var(--spring)}
.selTrayItem:hover{background:rgba(255,255,255,.09)}
.selTrayItem img{width:34px;height:34px;border-radius:8px;object-fit:cover;background:var(--surface2);flex-shrink:0}
.selTrayCode{font-size:11.5px;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selTrayRemove{width:20px;height:20px;border-radius:50%;background:rgba(255,92,122,.12);color:#ffb4b4;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;cursor:pointer}
.selTrayRemove:hover{background:rgba(255,92,122,.24)}
.selCount{display:inline-block;min-width:22px;text-align:center;background:var(--accent);color:#fff;font-weight:800;font-size:12px;padding:2px 8px;border-radius:999px;margin-right:2px}
.selMenu{position:absolute;top:calc(100% + 8px);right:0;background:rgba(18,21,30,.9);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--glass-shadow);display:flex;flex-direction:column;min-width:230px;overflow:hidden;z-index:401}
.selMenu button{text-align:left;padding:12px 18px;background:none;border:none;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:.15s}
.selMenu button:hover{background:var(--accent-soft);color:var(--accent)}
.selMenu button:active{background:rgba(79,227,255,.18)}
.selMenu button + button{border-top:1px solid var(--glass-border)}

/* MODAL — Liquid Glass panel */
.modalBg{position:fixed;inset:0;background:rgba(4,5,9,.62);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px;backdrop-filter:blur(10px);animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modalBg.hidden{display:none}
.modal{
  position:relative;background:var(--glass-fill-strong);
  backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid var(--glass-border);border-radius:28px;
  width:100%;max-width:820px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--glass-shadow),0 40px 90px -24px rgba(0,0,0,.6);
  animation:modalIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.modalHead{padding:22px 24px;border-bottom:1px solid var(--glass-border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modalTitle{font-size:17px;font-weight:700;line-height:1.3}
.modalClose{background:rgba(255,255,255,.06);border:1px solid var(--glass-border);width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--spring);backdrop-filter:blur(8px)}
.modalClose:hover{color:#ffb4b4;border-color:rgba(255,92,122,.4);background:rgba(255,92,122,.12);transform:scale(1.06)}
.modalClose:active{transform:scale(.9)}
.modalTrashBtn{background:rgba(255,255,255,.06);border:1px solid var(--glass-border);height:34px;padding:0 12px;border-radius:17px;cursor:pointer;color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--spring);backdrop-filter:blur(8px);margin-left:auto}
.modalTrashBtn:hover{color:#f5a524;border-color:rgba(245,165,36,.4);background:rgba(245,165,36,.12);transform:scale(1.04)}
.modalTrashBtn:active{transform:scale(.92)}

/* Koray'ın isteği: Canlı Durum penceresindeki statik/canlı bölüm ayracı — siyah bir çubuk
   üzerinde akan kırmızı ışık şeridi, 1500ms'lik telemetri yoklama döngüsüyle aynı hızda akar
   (2026-08-06: 300ms'de gerçek veri gelmediği için 1500ms'ye çıkarıldı). Üç görsel durum:
   varsayılan (sınıfsız) = cihaz çevrimiçi, ışık akıyor; .offline = yoklama başarılı ama cihaz
   çevrimdışı, çubuğun tamamı 1500ms'de bir kırmızı/siyah yanıp söner; .stalled = yoklamanın
   kendisi başarısız oldu/canlı veri hiç gelmiyor, akış tamamen donup söner. */
.telemetryLiveBar{position:relative;height:4px;border-radius:2px;background:#000;overflow:hidden;margin:10px 0 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.telemetryLiveBar::before{content:'';position:absolute;top:0;left:-35%;width:35%;height:100%;background:linear-gradient(90deg,transparent,#ff3b30 45%,#ffb4ab 50%,#ff3b30 55%,transparent);filter:drop-shadow(0 0 5px #ff3b30) drop-shadow(0 0 2px #ff3b30);animation:telemetryFlow 1.5s linear infinite}
.telemetryLiveBar.stalled::before{animation-play-state:paused;opacity:.15;filter:none}
.telemetryLiveBar.offline::before{animation-play-state:paused;opacity:0}
.telemetryLiveBar.offline{animation:telemetryBlink 1.5s ease-in-out infinite}
@keyframes telemetryFlow{from{left:-35%}to{left:100%}}
@keyframes telemetryBlink{0%,49%{background:#ff3b30;box-shadow:0 0 8px #ff3b30,inset 0 0 0 1px rgba(255,255,255,.05)}50%,100%{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}}
.modalBody{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.modalImgRow{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.modalMainImg{width:220px;height:300px;object-fit:cover;border-radius:18px;background:var(--surface2);border:1px solid var(--border);flex-shrink:0}
.modalMainImgPlaceholder{width:220px;height:300px;border-radius:18px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--border);flex-shrink:0}
.modalInfo{flex:1;min-width:180px;display:flex;flex-direction:column;gap:9px}
.infoRow{display:flex;flex-direction:column;gap:2px}
.uretimInfoRow{margin-top:4px;padding-top:10px;border-top:1px dashed rgba(255,122,69,.35)}
.infoKey{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.infoVal{font-size:14px;color:var(--text);font-weight:500}
.modalImgZoomWrap{position:relative;width:220px;height:300px;flex-shrink:0}
.zoomBtn{position:absolute;bottom:8px;right:8px;z-index:5;width:36px;height:36px;border-radius:50%;cursor:pointer;background:rgba(10,12,17,.72);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);transition:var(--spring)}
.zoomBtn:hover{background:var(--accent);transform:scale(1.08)}
.zoomBtn:active{transform:scale(.94)}

.depoTablesWrap{display:flex;flex-direction:column;gap:14px}
.depoTableSection{background:rgba(255,255,255,.05);border-radius:16px;overflow:hidden;border:1px solid var(--glass-border);backdrop-filter:blur(12px)}
.depoTableHead{padding:10px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--glass-border)}
.depoTableTitle{font-size:13px;font-weight:700}
.depoTotalBadge{font-size:11px;padding:3px 12px;border-radius:999px;font-weight:700;margin-left:auto;background:rgba(79,227,255,.15);color:var(--accent)}
.modalDepotToggleBtn{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);color:var(--text);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--spring)}
.modalDepotToggleBtn:hover{background:rgba(255,255,255,.13);transform:scale(1.06)}
.colorTable{width:100%;border-collapse:collapse}
.colorTable th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:7px 10px;border-bottom:1px solid var(--glass-border)}
.colorTable td{padding:7px 10px;border-bottom:1px solid var(--hairline);font-size:13px}
.colorTable tr:last-child td{border-bottom:none}
.colorTable tr:hover td{background:var(--row-hover)}
.stockCell{font-weight:700}
.stockCell.pos{color:var(--green)}
.stockCell.neg{color:var(--red)}

/* ADMIN */
.adminForm{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:rgba(255,255,255,.05);backdrop-filter:blur(16px);padding:18px;border-radius:20px;margin-bottom:20px;border:1px solid var(--glass-border)}
.adminForm label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
.adminForm input,.adminForm select{padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:12px;color:var(--text);font-size:13px;outline:none;min-width:130px}
.adminForm input:focus,.adminForm select:focus{border-color:rgba(255,255,255,.32);box-shadow:0 0 0 4px rgba(79,227,255,.18)}
.btn{padding:10px 20px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:var(--spring);font-family:inherit;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.btn.primary{background:linear-gradient(135deg,#4fe3ff,#8b6bff);color:#0a0c11;box-shadow:0 10px 26px -12px rgba(79,227,255,.6),0 1px 0 rgba(255,255,255,.4) inset}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--glass-border);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26)}
.btn.sm{padding:6px 14px;font-size:12px}
.btn.red{background:rgba(255,92,122,.14);color:#ffb4b4;border-color:rgba(255,92,122,.32)}
.btn.red:hover{background:rgba(255,92,122,.24)}
.btn:active{transform:scale(.95)}
.userTable{width:100%;border-collapse:collapse}
.userTable th{text-align:left;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;border-bottom:1px solid var(--glass-border)}
.userTable td{padding:9px 12px;border-bottom:1px solid var(--hairline);font-size:13px;vertical-align:middle}
.userTable tr:hover td{background:var(--row-hover)}
.depotAccessChips{display:flex;flex-wrap:wrap;gap:4px}
.depotAccessChip{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--glass-border);background:rgba(255,255,255,.05);color:var(--muted);transition:var(--spring)}
.depotAccessChip.on{background:rgba(79,227,255,.2);border-color:var(--accent);color:var(--accent)}
.depotAccessChip:active{transform:scale(.92)}

.depotRow{display:flex;align-items:center;gap:10px;padding:14px 16px;background:rgba(255,255,255,.05);backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:16px}
.depotRow input{flex:1;padding:9px 12px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:12px;color:var(--text);font-size:13px;font-weight:700}
.depotRow .fixedTag{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase}

.toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 24px;border-radius:999px;font-weight:600;font-size:14px;backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--glass-shadow);transform:translateY(20px);opacity:0;transition:.35s cubic-bezier(.16,1,.3,1);pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{background:rgba(26,74,46,.8);color:var(--green);border:1px solid rgba(63,224,168,.4)}
.toast.err{background:rgba(74,26,26,.8);color:var(--red);border:1px solid rgba(255,92,122,.4)}
.empty{text-align:center;padding:70px 20px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.empty .icon{font-size:48px;opacity:.4}

/* TAKİP */
.logFilterBar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;padding:14px;background:rgba(255,255,255,.05);backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:16px}
.logFilterBar select,.logFilterBar input{padding:8px 12px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font-size:13px;outline:none;font-family:var(--font)}
.logTable{width:100%;border-collapse:collapse}
.logTable th{text-align:left;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:9px 12px;border-bottom:1px solid var(--glass-border);position:sticky;top:0;background:rgba(20,24,34,.9);backdrop-filter:blur(12px)}
.logTable td{padding:9px 12px;border-bottom:1px solid var(--hairline);font-size:13px;vertical-align:middle}
.logTable tbody tr{cursor:pointer}
.logTable tr:hover td{background:var(--row-hover)}
.logTypeBadge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.logTypeBadge.card{color:var(--accent);background:var(--accent-soft);border:1px solid rgba(79,227,255,.3)}
.logTypeBadge.search{color:var(--orange);background:rgba(255,122,69,.1);border:1px solid rgba(255,122,69,.3)}
.logStock{font-weight:700}
.logStock.pos{color:var(--green)}
.logStock.neg{color:var(--red)}
.logPagBar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--glass-border)}
.logPagBtn{min-width:34px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);color:var(--text);transition:var(--spring)}
.logPagBtn.active{background:rgba(79,227,255,.2);border-color:var(--accent);color:var(--accent)}
.logPagBtn:active{transform:scale(.92)}
.logPagInfo{margin-left:auto;font-size:12px;color:var(--muted)}

/* LIGHTBOX */
.lightboxBg{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:600;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s ease}
.lightboxBg.hidden{display:none}
.lightboxImg{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:14px;box-shadow:var(--shadow-lg)}
.lightboxClose{position:fixed;top:18px;right:24px;z-index:601;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--spring);backdrop-filter:blur(10px)}
.lightboxClose:hover{background:rgba(255,92,122,.3);transform:rotate(90deg)}
.lightboxClose:active{transform:rotate(90deg) scale(.9)}

@media(max-width:900px){
  .navBrand{display:none}
  .navSearch{max-width:none}
}
@media(max-width:700px){
  .nav{flex-wrap:wrap;row-gap:10px}
  .navSearchWrap{flex-basis:100%;order:1}
  .navRight{flex-basis:100%;order:2;justify-content:center}
  .selBar,.selDraftBar{justify-content:center;padding:10px 14px}
  .selTray{width:76px}
  .selTrayHead{font-size:8.5px;padding:8px 4px 4px;text-align:center;letter-spacing:0}
  .selTrayList{padding:6px 4px;gap:8px}
  .selTrayItem{flex-direction:column;gap:3px;padding:4px;position:relative}
  .selTrayItem img{width:100%;height:48px}
  .selTrayCode{font-size:8.5px;text-align:center;white-space:normal;line-height:1.15;overflow:visible}
  .selTrayRemove{position:absolute;top:2px;right:2px;width:16px;height:16px;font-size:9px}
  .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:200;transform:translateX(-100%);margin-left:0 !important}
  .sidebar.mobileOpen{transform:translateX(0)}
  .content{padding:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

  /* Ürün detay modalı: küçük ekranda kaydırmadan tek bakışta sığmalı */
  .modal{max-height:94vh}
  .modalHead{padding:16px 18px}
  .modalBody{padding:14px 18px 18px;gap:10px}
  .modalImgRow{flex-wrap:nowrap;gap:12px;align-items:flex-start}
  .modalMainImg,.modalMainImgPlaceholder,.modalImgZoomWrap{width:92px;height:125px;border-radius:14px}
  .modalMainImgPlaceholder{font-size:26px}
  .zoomBtn{width:26px;height:26px;font-size:12px;bottom:5px;right:5px}
  .modalInfo{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;min-width:0}
  .infoRow{gap:1px}
  .infoKey{font-size:9.5px}
  .infoVal{font-size:12.5px;line-height:1.25}
  .infoRow:last-child{grid-column:1/-1}
  #modalStokSection .colorTable th,#modalStokSection .colorTable td{padding:6px 8px;font-size:12px}
  #modalStokSection .depoTableHead{flex-wrap:wrap;gap:6px}
}

/* ============================================================
   MOBİL UYGULAMA (Satış Sorumlusu) — tamamen ayrı, dokunmatik-öncelikli kabuk
   ============================================================ */
#mobileApp{display:none;flex-direction:column;min-height:100vh;max-width:560px;margin:0 auto;position:relative}
#mobileApp.visible{display:flex}
.mScreen{display:flex;flex-direction:column;flex:1;min-height:100vh}
.mScreen.hidden{display:none}
.mTopBar{display:flex;align-items:center;gap:10px;padding:16px 18px;background:var(--glass-fill);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:10}
.mTopBarTitle{font-size:17px;font-weight:700;flex:1}
.mSelectAllBtn{padding:7px 14px;border-radius:999px;font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid var(--glass-border);background:rgba(255,255,255,.06);color:var(--text);white-space:nowrap;transition:var(--spring);flex-shrink:0}
.mSelectAllBtn:active{transform:scale(.94)}
.mIconBtn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--spring);backdrop-filter:blur(8px)}
.mIconBtn:active{transform:scale(.92)}
.mIconBtn.danger{color:#ffb4b4;border-color:rgba(255,92,122,.35)}
.mIconBtn svg{flex-shrink:0}

.mLogoutSmall{
  align-self:center;display:flex;align-items:center;gap:6px;margin:6px 0 22px;padding:8px 16px;
  border-radius:999px;background:none;border:1px solid var(--glass-border);color:var(--muted);
  font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--spring);
}
.mLogoutSmall:hover,.mLogoutSmall:active{color:#ffb4b4;border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.08)}

.mHomeBody{flex:1;display:flex;flex-direction:column;padding-top:8px}
.mWelcome{padding:18px 22px 6px}
.mWelcomeTitle{font-size:23px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.mWelcomeSub{font-size:13px;color:var(--muted);margin-top:5px}

.mActionList{display:flex;flex-direction:column;gap:12px;padding:18px 18px 28px}
.mActionRow{
  display:flex;align-items:center;gap:14px;padding:16px;border-radius:22px;text-align:left;
  background:var(--glass-fill-strong);backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);cursor:pointer;transition:var(--spring);
}
.mActionRow:active{transform:scale(.97)}
.mActionIcon{
  width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:23px;flex-shrink:0;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 18px -8px rgba(0,0,0,.5);
}
.mActionIcon--send{background:linear-gradient(135deg,#ff9a5c,#ff5c7c)}
.mActionIcon--stock{background:linear-gradient(135deg,#4fe3ff,#8b6bff)}
.mActionIcon--query{background:linear-gradient(135deg,#a78bfa,#f472b6)}
.mActionText{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.mActionTitle{font-size:15.5px;font-weight:700;color:var(--text)}
.mActionDesc{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mActionChevron{font-size:22px;color:var(--muted);flex-shrink:0}

.mFilterBody{flex:1;overflow-y:auto;padding:18px 18px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.mFilterAcc{border:1px solid var(--glass-border);border-radius:18px;background:var(--glass-fill);backdrop-filter:blur(14px);overflow:hidden}
.mFilterAccHead{display:flex;align-items:center;gap:10px;width:100%;padding:15px 16px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--text);text-align:left}
.mFilterAccHead .filterLabel{margin:0;flex:1;font-size:13px}
.mFilterAccCount{font-size:11px;font-weight:700;color:#0a0c11;background:linear-gradient(135deg,#4fe3ff,#8b6bff);border-radius:999px;padding:2px 8px;min-width:10px;text-align:center}
.mFilterAccCount.hidden{display:none}
.mFilterAccChevron{font-size:13px;color:var(--muted);transition:transform .28s cubic-bezier(.16,1,.3,1);flex-shrink:0}
.mFilterAcc.open .mFilterAccChevron{transform:rotate(180deg)}
.mFilterAccBody{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.16,1,.3,1)}
.mFilterAcc.open .mFilterAccBody{max-height:70vh;overflow-y:auto}
.mFilterAccBody .filterChips{padding:0 16px 16px;gap:8px}
.mFilterAccBody .fchip{padding:9px 16px;font-size:13.5px;border-radius:14px}
.mListeleBtn{
  position:fixed;left:14px;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:528px;margin:0 auto;
  padding:16px;border:none;border-radius:999px;z-index:400;
  background:linear-gradient(135deg,#4fe3ff,#8b6bff);color:#0a0c11;font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:0 14px 32px -12px rgba(79,227,255,.65),0 1px 0 rgba(255,255,255,.5) inset;transition:var(--spring);
}
.mListeleBtn:active{transform:scale(.97)}

/* Bekleyen Fotoğraflar (geçici çözüm — SenerOS entegrasyonu bitene kadar) */
.pendingPhotoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pendingPhotoCard{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.pendingPhotoCard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface);display:block}
.pendingPhotoInfo{padding:10px 12px 4px}
.pendingPhotoKod{font-family:monospace;font-weight:700;color:var(--accent)}
.pendingPhotoMeta{font-size:12px;color:var(--muted);margin-top:2px}
.pendingPhotoActions{display:flex;gap:8px;padding:10px 12px}
.pendingPhotoActions .btn{flex:1}

.mStockInput{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--glass-border);background:var(--glass-fill);color:var(--text);font-family:inherit;font-size:14px;resize:vertical;outline:none;transition:var(--spring)}
.mStockInput:focus{border-color:var(--accent)}
.mStockHint{font-size:11.5px;color:var(--muted);padding:0 2px;display:flex;align-items:center;gap:5px}
.mStockResults{display:flex;flex-direction:column;gap:12px}
.mStockCard{border:1px solid var(--glass-border);border-radius:18px;background:var(--glass-fill);overflow:hidden}
.mStockCardHead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--glass-border)}
.mStockCardImg{width:42px;height:42px;border-radius:10px;object-fit:cover;background:var(--surface2);flex-shrink:0;cursor:pointer}
.mStockCardTitle{font-weight:700;font-size:13.5px;color:var(--text)}
.mStockCardCode{font-size:11px;color:var(--muted);margin-top:2px}
.mStockCardBody{padding:12px 14px 14px;overflow-x:auto}
.mUretimBtn{margin:0 14px 12px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;background:rgba(255,122,69,.14);color:var(--orange);border:1px solid rgba(255,122,69,.4)}
.mUretimDetail{margin:0 14px 12px;padding:8px 12px;border-radius:12px;font-size:12px;color:var(--orange);background:rgba(255,122,69,.08);border:1px solid rgba(255,122,69,.25)}
.mUretimDetail.hidden{display:none}
.mStockNotFound{padding:14px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
.mPQGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

.mPhotoGrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}
.mPhotoTile{position:relative;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--border);aspect-ratio:3/4;cursor:pointer}
.mPhotoTile img{width:100%;height:100%;object-fit:cover;display:block}
.mPhotoPlaceholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;color:var(--border);background:var(--surface2)}
.mPhotoCode{position:absolute;left:8px;bottom:8px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(10,12,17,.6);color:#fff;backdrop-filter:blur(6px)}
.mPhotoSelDot{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(10,12,17,.6);border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:transparent;font-weight:900}
.mPhotoTile.selected .mPhotoSelDot{background:var(--accent);border-color:var(--accent);color:#fff}
.mPhotoTile.selected .mPhotoSelDot::after{content:'✓'}
.mPhotoTile.selected{outline:2px solid var(--accent);outline-offset:-2px}

.mSelBar{position:fixed;left:14px;right:14px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:400;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:999px;background:var(--glass-fill-strong);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);font-size:13px;color:var(--text);max-width:560px;margin:0 auto}
.mSelBar.hidden{display:none}
.mShareMenu{position:absolute;bottom:calc(100% + 10px);left:0;right:0;background:rgba(18,21,30,.94);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--glass-shadow);display:flex;flex-direction:column;overflow:hidden}
.mShareMenu.hidden{display:none}
.mShareMenuStats{padding:10px 18px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--glass-border);display:flex;gap:10px;flex-wrap:wrap}
.mShareMenu button{text-align:left;padding:14px 18px;background:none;border:none;color:var(--text);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.mShareMenu button:hover{background:var(--accent-soft);color:var(--accent)}
.mShareMenu button + button{border-top:1px solid var(--glass-border)}


/* ============================================================
   OBSIDIAN KATMANI (ver2) — bileşen ince ayarları
   Token'lar paleti zaten taşıyor; burada yalnızca token'la ifade
   edilemeyen malzeme/ritim düzeltmeleri var. Dosyanın sonunda
   duruyor ki üstteki hiçbir kuralı yanlışlıkla gölgelemesin.
   ============================================================ */

/* --- 1. Kaydırma çubuğu ve seçim ------------------------------------- */
::-webkit-scrollbar-thumb{background:#1a1f2c;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#262d3e;background-clip:content-box}

/* --- 2. Üst çubuk ----------------------------------------------------- */
.nav{background:rgba(6,8,14,.62);backdrop-filter:var(--glass-blur-deep);-webkit-backdrop-filter:var(--glass-blur-deep);border-bottom:1px solid var(--glass-border);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 40px -28px #000}
.navBrand{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.5px;background:none;-webkit-text-fill-color:initial;color:var(--text)}
.navSearch{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.09);border-radius:999px;transition:border-color var(--spring),box-shadow var(--spring),background var(--spring)}
.navSearch:hover{border-color:rgba(79,227,255,.4);box-shadow:0 0 30px -10px rgba(79,227,255,.5)}
.navSearch:focus{border-color:rgba(79,227,255,.6);box-shadow:0 0 0 3px rgba(79,227,255,.13),0 0 34px -12px rgba(79,227,255,.6);background:rgba(79,227,255,.05)}
.chip{font-family:var(--font-mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px}
.navBtn{border-radius:999px;font-weight:500;font-size:12.5px}
.navBtn:hover{background:rgba(255,255,255,.08);border-color:var(--glass-border-hi);transform:translateY(-1px)}
.navBadge{font-family:var(--font-mono);font-weight:600;background:var(--orange);color:#0a0500}
.statsBar{background:rgba(6,8,14,.42);backdrop-filter:var(--glass-blur)}
.statVal{font-family:var(--font-mono);font-weight:500;color:var(--text)}
.sortBtn{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}

/* --- 3. Kenar çubuğu / filtreler ------------------------------------- */
.sidebar{background:rgba(255,255,255,.012);backdrop-filter:var(--glass-blur)}
.filterLabel{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;font-weight:400;color:var(--faint)}
.fchip{border-radius:999px;font-size:11.5px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.06);color:var(--muted)}
.fchip:hover{border-color:var(--glass-border-hi);color:var(--text)}
.fchip.active{background:rgba(79,227,255,.16);border-color:rgba(79,227,255,.5);color:#b9f0ff;font-weight:500}
.comboBox{background:rgba(0,0,0,.3);border-radius:var(--radius-sm)}
.comboDropdown{background:rgba(6,8,14,.96);border-radius:var(--radius-sm)}
.comboChip{font-family:var(--font-mono);font-size:10.5px;font-weight:400}

/* --- 4. Ürün kartı — obsidyen levha + spekülar süpürme ---------------- */
.pcard{background:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px -16px #000}
.pcard::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;z-index:6;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.13) 47%,transparent 62%);
  opacity:0;transition:opacity .42s cubic-bezier(.16,1,.3,1);
}
.pcard:hover::after{opacity:1}
.pcard:hover{transform:translateY(-4px);border-color:rgba(79,227,255,.35);box-shadow:0 26px 50px -22px #000,0 0 34px -14px rgba(79,227,255,.5)}
.pcard.selected{border-color:rgba(79,227,255,.6);box-shadow:0 0 0 1px rgba(79,227,255,.35),0 0 30px -12px rgba(79,227,255,.7)}
.pcardImg,.pcardImgPlaceholder{background:linear-gradient(150deg,#141926,#080a11)}
.pcardCode{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--text)}
.pcardName{font-weight:500;color:var(--muted)}
.pcardFooter{border-top:1px solid var(--hairline)}
.badge{font-family:var(--font-mono);font-size:9.5px;font-weight:400;letter-spacing:.06em;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.uretimBadge,.depoTag{font-family:var(--font-mono);font-weight:500;letter-spacing:.1em}
/* Stok barında durum metninden önce sönük ışık noktası */
.stockBarLabel,.stockBarQty{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.03em}
.stockBarLabel::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex-shrink:0}
.stockBarTrack{background:rgba(255,255,255,.06)}
.stockBarFill{box-shadow:0 0 8px -1px currentColor}
.selBubble{border-radius:50%;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.35);transition:var(--bounce)}
.selBubble.checked{background:var(--accent);border-color:var(--accent);color:#04060c;box-shadow:0 0 16px rgba(79,227,255,.8)}

/* --- 5. Seçim çubuğu / tepsi ----------------------------------------- */
.selBar{background:rgba(79,227,255,.06);border-bottom:1px solid var(--glass-border)}
.selDraftBar{background:rgba(255,122,69,.06)}
.selCount{font-family:var(--font-mono);font-weight:600;background:var(--accent);color:#04060c;box-shadow:0 0 14px -2px rgba(79,227,255,.8)}
.selMenu,.adminDashMenu,.mShareMenu{background:rgba(6,8,14,.92);border-radius:var(--radius);border-color:var(--glass-border)}
.selTray{background:rgba(255,255,255,.015);backdrop-filter:var(--glass-blur)}
.selTrayHead{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;font-weight:400}
.selTrayCode{font-family:var(--font-mono);font-size:11px;font-weight:400}

/* --- 6. Modal — Vitrum II -------------------------------------------- */
.modalBg{background:rgba(0,0,0,.72);backdrop-filter:blur(14px)}
.modal{background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(6,8,14,.72) 68%);backdrop-filter:var(--glass-blur-deep);-webkit-backdrop-filter:var(--glass-blur-deep);border-radius:var(--radius-lg);border-color:rgba(255,255,255,.11);box-shadow:0 50px 120px -34px #000,0 0 0 1px rgba(255,255,255,.04),0 0 90px -40px rgba(79,227,255,.28)}
.modalTitle{font-family:var(--font-display);font-weight:600;letter-spacing:-.3px}
.modalMainImg,.modalMainImgPlaceholder{background:linear-gradient(150deg,#121722,#05070c);border-radius:var(--radius)}
.infoKey{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;font-weight:400;color:var(--faint)}
.infoVal{font-weight:500}
.depoTableSection{background:rgba(255,255,255,.03);border-radius:var(--radius-sm)}
.depoTableTitle{font-weight:600;letter-spacing:-.2px}
.depoTotalBadge{font-family:var(--font-mono);font-weight:500}
.colorTable th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;font-weight:400;text-transform:uppercase;color:var(--faint)}
.colorTable td{font-size:12.5px}
.stockCell{font-family:var(--font-mono);font-weight:500}

/* --- 7. Butonlar ------------------------------------------------------ */
.btn{border-radius:999px;font-weight:600;font-size:12.5px;letter-spacing:.01em}
.btn.primary{background:var(--grad);color:#02060c;box-shadow:0 12px 30px -14px rgba(79,227,255,.75),0 1px 0 rgba(255,255,255,.5) inset}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 18px 44px -14px rgba(79,227,255,.9),0 1px 0 rgba(255,255,255,.6) inset}
.btn.ghost{background:rgba(255,255,255,.05);border-color:var(--glass-border)}
.btn.ghost:hover{background:rgba(255,255,255,.09);border-color:var(--glass-border-hi)}
.btn:active{transform:translateY(1px) scale(.99)}

/* --- 8. Yönetim panelleri -------------------------------------------- */
.adminForm,.depotRow,.logFilterBar{background:rgba(255,255,255,.028);border-radius:var(--radius);backdrop-filter:var(--glass-blur)}
.adminForm label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--faint)}
.adminForm input,.adminForm select,.depotRow input,.logFilterBar select,.logFilterBar input{background:rgba(0,0,0,.32);border-color:rgba(255,255,255,.09);border-radius:var(--radius-sm);font-weight:400}
.adminForm input:focus,.adminForm select:focus,.logFilterBar select:focus,.logFilterBar input:focus{border-color:rgba(79,227,255,.55);box-shadow:0 0 0 3px rgba(79,227,255,.12)}
.userTable th,.logTable th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;font-weight:400;color:var(--faint);text-transform:uppercase}
.logTable th{background:rgba(6,8,14,.92)}
.userTable td,.logTable td{font-size:12.5px}
.depotAccessChip{font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.06em}
.depotAccessChip.on{background:rgba(79,227,255,.16);border-color:rgba(79,227,255,.5);color:#b9f0ff}
.logTypeBadge,.logPagBtn{font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.08em}
.logStock{font-family:var(--font-mono);font-weight:500}
.toast{border-radius:999px;font-size:13px;font-weight:500}
.toast.ok{background:rgba(6,26,20,.9);border-color:rgba(63,224,168,.4)}
.toast.err{background:rgba(28,6,12,.9);border-color:rgba(255,92,122,.4)}

/* --- 9. Satış mobil kabuğu ------------------------------------------- */
.mTopBar{background:rgba(6,8,14,.66);backdrop-filter:var(--glass-blur-deep);-webkit-backdrop-filter:var(--glass-blur-deep)}
.mTopBarTitle{font-family:var(--font-display);font-weight:600;letter-spacing:-.4px}
.mWelcomeTitle{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.8px}
.mActionRow{background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border-radius:var(--radius-lg)}
.mActionIcon{border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 22px -10px #000}
.mActionIcon--send{background:linear-gradient(140deg,#ff9a5c,#ff5c7a)}
.mActionIcon--stock{background:linear-gradient(140deg,#7ff0ff,#6f8dff)}
.mActionIcon--query{background:linear-gradient(140deg,#b9a6ff,#6f4bff)}
.mActionTitle{font-weight:600;letter-spacing:-.2px}
.mFilterAcc{background:rgba(255,255,255,.028);border-radius:var(--radius)}
.mFilterAccCount{font-family:var(--font-mono);font-weight:600;background:var(--grad);color:#02060c}
.mSelectAllBtn,.mIconBtn{font-family:var(--font-mono);letter-spacing:.08em}

/* --- 10. Boş durum ---------------------------------------------------- */
.empty{color:var(--faint)}
.empty .icon{opacity:.25}

/* --- 11. Erişilebilirlik: klavye odağı her zaman görünür -------------- */
:focus-visible{outline:none;box-shadow:var(--ring)}

/* --- 12. Hareketi azalt ------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- 13. İkon sistemi -------------------------------------------------
   Emoji yerine inline SVG. Rengi devralır, her ölçekte keskindir. */
.ic{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.16em;display:inline-block}
.ic.lg{width:1.35em;height:1.35em}
.ic.xl{width:22px;height:22px;stroke-width:1.4}
button .ic,.btn .ic,.navBtn .ic,.sortBtn .ic{margin-right:.42em}
button .ic:only-child,.navBtn .ic:only-child,.mIconBtn .ic{margin-right:0}
.mActionIcon .ic{width:23px;height:23px;stroke-width:1.6;color:#04060c;margin:0}
.modalClose .ic,.selTrayRemove .ic{margin:0}
.empty .icon .ic{width:44px;height:44px;stroke-width:1}
.adminDashMenu button .ic,.selMenu button .ic,.mShareMenu button .ic{color:var(--muted)}
.adminDashMenu button:hover .ic,.selMenu button:hover .ic,.mShareMenu button:hover .ic{color:var(--accent)}
/* --- 14. Arama kapsülü — ikon CSS arka planı olarak gömülü ------------
   Ayrı bir <svg> elemanı yerine data URI: yerleşimi bozmaz, odak/placeholder
   davranışı aynen korunur. */
.navSearch{
  text-align:left;padding-left:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8698' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:17px center;background-size:16px 16px;
}
.navSearch:focus{text-align:left}
/* --- 15. Kart ayrıntı düzeltmeleri (görsel denetimden sonra) ----------
   Seçim balonu küçük ve sönük durur, üzerine gelince ve seçiliyken öne çıkar;
   stok barı da yalnızca balon varken sağdan pay bırakır. */
.selBubble{width:20px;height:20px;bottom:9px;right:9px;border-width:1.5px;border-color:rgba(255,255,255,.24);font-size:11px}
.pcard:hover .selBubble{border-color:rgba(79,227,255,.75)}
.selBubble.checked{border-color:var(--accent)}
.pcard.selectable .pcardFooter{padding-right:32px}
.pcardImgPlaceholder{color:#232b3c}
.pcardImgPlaceholder .ic{width:30px;height:30px;stroke-width:1.1}
.pcardImgPlaceholder small{font-family:var(--font-mono);font-size:9.5px;color:var(--faint)}
.modalMainImgPlaceholder{color:#232b3c}