:root{
  --bg:#faf8f5;
  --card:#fff;
  --ink:#1c1a17;
  --muted:#6e6860;
  --line:#ece7df;
  --accent:#1c1a17;
  --accent-soft:#f3efe9;
  --gold:#8a6d3f;
  --gold-soft:#f5eee1;
  --success:#1e7e46;
  --warning:#9a6a00;
  --danger:#b3261e;
  --info:#1a5fb4;
  --radius-sm:.4rem;
  --radius-md:.75rem;
  --shadow-card:0 1px 2px rgba(28,26,23,.06);
  --shadow-lift:0 8px 20px rgba(28,26,23,.10);
  --space-xs:.25rem;
  --space-sm:.5rem;
  --space-md:.75rem;
  --space-lg:1rem;
}
html{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1b1917;
  --card:#262320;
  --ink:#f2ede6;
  --muted:#a8a094;
  --line:#38332d;
  --accent:#f2ede6;
  --accent-soft:#2e2a25;
  --gold:#c2a878;
  --gold-soft:#33291c;
  --success:#4caf7d;
  --warning:#d9a441;
  --danger:#e57373;
  --info:#7aa8e8;
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 8px 20px rgba(0,0,0,.45);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .topbar{background:#211e1b;border-bottom-color:var(--line)}
html[data-theme="dark"] .brand{color:var(--ink)}
html[data-theme="dark"] .topbar-tag{color:var(--muted);border-color:var(--line)}
html[data-theme="dark"] .topnav-link{color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .pcard,
html[data-theme="dark"] .ccard,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .order-success,
html[data-theme="dark"] .doc-row{background:var(--card);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .img-ph{background:var(--accent-soft);color:var(--muted)}
html[data-theme="dark"] .gallery-main{background:#171412}
html[data-theme="dark"] .thumb{background:var(--accent-soft)}
html[data-theme="dark"] .wholesale-note{background:var(--accent-soft);border-color:var(--line)}
html[data-theme="dark"] .notice-band{background:#100e0c;color:#f2ede6}
html[data-theme="dark"] .pwa-bar{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .skel{background:#2e2a25}
html[data-theme="dark"] #waFloat:focus-visible{outline-color:var(--gold)}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;padding-bottom:env(safe-area-inset-bottom,0px)}
.skip-link{position:absolute;left:-9999px;top:0;background:#16130f;color:#fff;padding:.5rem 1rem;z-index:200;border-radius:0 0 .5rem 0}
.skip-link:focus{left:0}
/* --- Header --- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar-inner{display:flex;align-items:center;gap:.5rem;padding-top:.5rem;padding-bottom:.5rem;min-height:56px}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:1.1rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav{display:flex;gap:.35rem;align-items:center;margin-left:.75rem;min-width:0}
.topnav-link{display:inline-flex;align-items:center;gap:.3rem;border:1px solid transparent;border-radius:999px;padding:.3rem .7rem;font-size:.82rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;min-height:36px}
.topnav-link:hover{border-color:var(--line)}
.topnav-link[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-theme="dark"] .topnav-link[aria-current="page"]{background:var(--ink);color:#1b1917}
.topbar-actions{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-shrink:0}
/* Tema dugmesi: tek tiklamada Sistem -> Aydinlik -> Karanlik (40px hedef) */
.theme-toggle{width:40px;height:40px;flex:0 0 40px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--gold)}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.user{font-size:.85rem;color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-link{white-space:nowrap}
.cart-badge{max-width:3.2em;overflow:hidden;text-overflow:ellipsis}
.logout-btn{padding-left:.25rem;padding-right:.25rem}
/* --- Kategori chips --- */
.catalog-toolbar{margin-bottom:.5rem}
.cat-chips{display:flex;gap:.4rem;overflow-x:auto;padding:.4rem .1rem;margin:0 -.25rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cat-chip{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:.35rem .85rem;font-size:.82rem;font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.cat-chip:hover{border-color:var(--ink)}
.cat-chip[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-chip .cnt{opacity:.6;font-size:.75em;margin-left:.25em}
#subCats:empty{display:none}
/* --- Arama --- */
.search-wrap{position:relative}
.search-wrap .form-control{padding-right:3.4rem}
.search-clear{position:absolute;right:1.9rem;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:1.2rem;line-height:1;color:var(--muted);padding:.2rem .4rem;cursor:pointer}
.search-clear:hover{color:var(--ink)}
.search-spin{position:absolute;right:.6rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* --- Grid / kart --- */
.grid-status{min-height:1.25rem;margin:.25rem 0}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:576px){.product-grid{grid-template-columns:repeat(3,1fr);gap:.75rem}}
@media(min-width:992px){.product-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1400px){.product-grid{grid-template-columns:repeat(5,1fr)}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:var(--shadow-card);min-width:0;display:flex;flex-direction:column}
@media(hover:hover){.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}}
.pcard:active{transform:scale(.985)}
.pcard:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pcard .imgwrap{aspect-ratio:1;background:var(--accent-soft);display:block;overflow:hidden;position:relative}
.pcard img{width:100%;height:100%;object-fit:cover;display:block}
/* Urun zoom affordance: gorsel sag-alt, 40px hedef, tema uyumlu, sakin */
.product-zoom{position:absolute;right:.5rem;bottom:.5rem;width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--card);background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-card);padding:0}
.product-zoom:hover{border-color:var(--gold)}
.product-zoom:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.product-zoom svg{width:18px;height:18px}
.pcard .body{padding:.55rem .65rem .65rem;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pcard .name{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard .sku{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard .price{font-weight:700;margin-top:.2rem;font-size:.92rem;font-variant-numeric:tabular-nums}
.pcard .add-btn{margin-top:.45rem;min-height:38px}
/* PWA bar */
.pwa-bar{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));z-index:80;background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:.5rem .6rem;display:flex;gap:.5rem;align-items:center;box-shadow:var(--shadow-lift);max-width:520px;margin:0 auto}
.pwa-bar span{flex:1;font-size:.85rem}
/* Mobil form zoom onleme + dokunma hedefleri */
input,select,textarea{font-size:16px}
@media(min-width:768px){input,select,textarea{font-size:.9rem}}
.btn{min-height:36px}
@media(max-width:575.98px){
  .topbar-inner{min-height:52px;padding-top:.4rem;padding-bottom:.4rem}
  .brand{font-size:1rem}
  .product-grid{gap:.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* --- Skeleton --- */
.skel{background:linear-gradient(90deg,#ece7df,#f7f4ef,#ece7df);background-size:200% 100%;min-height:230px;border-radius:var(--radius-md);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes pulse{50%{opacity:.6}}
/* --- Empty / error --- */
.empty{border:1px dashed var(--line);border-radius:var(--radius-md);padding:2rem 1rem;text-align:center;color:var(--muted);background:#fff}
.empty strong{display:block;color:var(--ink);margin-bottom:.25rem}
/* --- Login --- */
.login-body{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login-card{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.5rem;width:min(420px,100%)}
/* --- Urun modal medya --- */
.modal-video video{width:100%;border-radius:.5rem;background:#111;max-height:320px}
.doc-list{display:flex;flex-direction:column;gap:.4rem}
.doc-row{display:flex;gap:.6rem;align-items:center;border:1px solid var(--line);border-radius:.5rem;padding:.5rem .6rem;text-decoration:none;color:var(--ink);background:#fff}
.doc-row:hover{border-color:var(--ink)}
.doc-ico{font-size:.65rem;font-weight:800;background:#c00;color:#fff;border-radius:.3rem;padding:.2rem .35rem;flex-shrink:0}
/* --- Urun modal --- */
.gallery-main{width:100%;aspect-ratio:1;object-fit:contain;background:#f6f3ee;border-radius:.5rem}
.thumb{width:56px;height:56px;object-fit:cover;border-radius:.4rem;border:2px solid transparent;cursor:pointer;background:var(--accent-soft)}
.thumb.active{border-color:var(--ink)}
.sku-copy{cursor:pointer}
.modal-product-cat{font-size:.78rem;color:var(--muted)}
.modal-product-price{font-size:1.25rem;font-weight:700}
@media(max-width:575.98px){
  .modal-fullscreen-sm-down .modal-body{overflow-y:auto}
  .gallery-main{aspect-ratio:4/3}
  #mAdd,#mWhatsapp{flex:1 1 auto}
}
/* --- Sepet --- */
.cart-row{display:flex;gap:.6rem;align-items:center;border-bottom:1px solid var(--line);padding:.6rem 0}
.cart-row img{border-radius:.4rem;flex-shrink:0}
.sticky-cart-cta{position:sticky;bottom:0;z-index:30;padding:.6rem;background:linear-gradient(transparent,var(--bg) 30%)}
.sticky-cart-cta .btn{box-shadow:var(--shadow-lift)}
.order-success{border:1px solid var(--line);background:#fff;border-radius:var(--radius-md);padding:1.5rem;text-align:center}
.order-success .tick{font-size:2rem;color:var(--success)}
/* --- Toast uyumu --- */
.toast-container{max-width:min(92vw,360px)}
/* --- WhatsApp yuzen buton (sag alt, admin ayariyla yonetilir) --- */
#waFloat{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom, 0px));z-index:70;width:56px;height:56px;display:inline-grid;place-items:center;border-radius:50%;background:#25d366;color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(28,26,23,.25);transition:transform .12s ease,box-shadow .12s ease}
#waFloat:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(28,26,23,.30);color:#fff}
#waFloat:focus-visible{outline:2px solid #1c1a17;outline-offset:2px}
body.has-sticky-cta #waFloat{bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px))}
@media(max-width:575.98px){
  #waFloat{width:52px;height:52px;right:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .pcard,.cat-chip,.search-spin,.skel{transition:none;animation:none}
}
.topbar-tag{font-size:.72rem;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;white-space:nowrap}
/* --- Toptan satis bilgi bandi --- */
.notice-band{background:#1c1a17;color:#faf8f5}
.notice-band-inner{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.45rem 0;font-size:.83rem;font-weight:500;text-align:center}
.notice-dot{width:.5rem;height:.5rem;border-radius:50%;background:#25d366;flex-shrink:0}
/* --- Katalog hero --- */
.catalog-hero{margin:.25rem 0 .5rem}
.catalog-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .15rem}
/* --- Breadcrumb --- */
.crumbs{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0 0 .6rem;font-size:.82rem}
.crumbs li{display:flex;align-items:center;gap:.25rem;min-width:0}
.crumbs li+li::before{content:"/";color:var(--muted);margin-right:.25rem}
.crumbs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{border-color:var(--ink)}
.crumbs [aria-current="page"]{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
nav[aria-label="Breadcrumb"] .crumbs [aria-current="page"]{color:var(--ink);font-weight:600}
nav[aria-label="Breadcrumb"] .crumbs a{color:var(--ink);text-decoration:none}
nav[aria-label="Breadcrumb"] .crumbs a:hover{border-color:var(--gold)}
nav[aria-label="Breadcrumb"] .crumbs a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:.25rem}
/* --- Mobil floating Kategori Sec + drawer --- */
.cat-fab{display:none;position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:65;border:1px solid var(--ink);background:var(--ink);color:var(--bg);border-radius:999px;padding:.7rem 1.2rem;font-size:.88rem;font-weight:700;box-shadow:var(--shadow-lift);cursor:pointer;min-height:48px}
html[data-theme="dark"] .cat-fab{background:var(--ink);color:#1b1917}
.cat-fab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
body.has-pwa-bar .cat-fab{bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}
.cat-drawer{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.cat-drawer[hidden]{display:none}
.cat-drawer-box{background:var(--card);color:var(--ink);border-radius:.9rem .9rem 0 0;width:min(560px,100vw);max-height:84vh;max-height:84dvh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-bottom:0;box-shadow:var(--shadow-lift)}
.cat-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.cat-drawer-overlay{position:fixed;inset:0;z-index:89;background:rgba(20,16,12,.5)}
.cat-drawer-overlay[hidden]{display:none}
body.cat-drawer-open{overflow:hidden}
.cat-tree{overflow:auto;max-height:60vh;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.cat-tree-node{margin:.1rem 0}
.cat-tree-row{display:flex;gap:.4rem;align-items:center;padding:.3rem .45rem;border-radius:.4rem;cursor:pointer;border:1px solid transparent;min-width:0;min-height:44px}
.cat-tree-row:hover{background:var(--accent-soft);border-color:var(--line)}
.cat-tree-row.active{background:var(--ink);color:var(--bg);font-weight:600}
.cat-tree-row .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cat-tree-row a.tname{color:inherit;text-decoration:none;min-width:0}
.cat-tree-row a.tname:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:.3rem}
.cat-tree-row .tw{width:40px;height:40px;display:inline-grid;place-items:center;color:var(--muted);flex-shrink:0;border-radius:.4rem;border:1px solid transparent;background:none;cursor:pointer;font-size:.9rem}
.cat-tree-row .tw:hover{border-color:var(--line)}
.cat-tree-row.active .tw{color:inherit}
.cat-tree-row .tpath{display:block;font-size:.72rem;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-tree-row.active .tpath{color:inherit;opacity:.75}
.cat-tree-children{margin:0}
.cat-tree-children[hidden]{display:none}
@media(max-width:767.98px){
  .cat-fab{display:inline-block}
}
/* --- Kategori basligi --- */
.cat-head{margin-bottom:.75rem}
/* --- Kategori grid / kart (urun kartindan net farkli) --- */
.section-title{margin:1rem 0 .5rem;padding-top:.75rem;border-top:1px solid var(--line)}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:576px){.cat-grid{grid-template-columns:repeat(3,1fr);gap:.75rem}}
@media(min-width:992px){.cat-grid{grid-template-columns:repeat(4,1fr)}}
.ccard{background:var(--card);border:1px solid var(--ink);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;min-width:0;box-shadow:var(--shadow-card)}
@media(hover:hover){.ccard:hover{box-shadow:var(--shadow-lift)}}
.ccard .imgwrap{aspect-ratio:16/10;background:var(--accent-soft);display:block;overflow:hidden}
.ccard img{width:100%;height:100%;object-fit:cover;display:block}
.ccard .body{padding:.55rem .65rem .65rem;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.ccard .name{font-size:.88rem;font-weight:700;overflow-wrap:break-word;min-width:0}
.ccard .meta{font-size:.74rem;color:var(--muted)}
.ccard .open{display:inline-block;margin-top:.35rem;font-size:.78rem;font-weight:700;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:.25rem .8rem;align-self:flex-start}
html[data-theme="dark"] .ccard .open{color:var(--gold)}
/* Kategori quick selector: kart gorunumlu satir */
.cat-quick{display:flex;gap:.6rem;align-items:center;margin:.6rem 0 .25rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:.55rem .7rem;box-shadow:var(--shadow-card)}
.cat-quick label{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap;margin:0}
.cat-quick select{flex:1 1 auto;min-width:0;width:auto;min-height:44px;border-color:var(--line);font-weight:600;cursor:pointer}
.cat-quick select:hover{border-color:var(--gold)}
.cat-quick select:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(138,109,63,.18)}
html[data-theme="dark"] .cat-quick select:focus{box-shadow:0 0 0 .2rem rgba(194,168,120,.22)}
@media(max-width:575.98px){.cat-quick{flex-direction:column;align-items:stretch}.cat-quick label{text-align:left}}
.img-ph{display:grid;place-items:center;width:100%;height:100%;min-height:120px;color:var(--muted);font-size:.8rem;background:var(--accent-soft)}
/* --- Toptan not (urun modal) --- */
.wholesale-note{font-size:.82rem;background:var(--accent-soft);border:1px solid var(--line);border-radius:.5rem;padding:.5rem .65rem;margin-bottom:0}
.wholesale-body{font-size:.92rem;line-height:1.55}
.wholesale-body ul,.wholesale-body ol{padding-left:1.2rem;margin-bottom:.5rem}
.wholesale-body p{margin-bottom:.5rem}
.wholesale-body h2,.wholesale-body h3{font-size:1rem;font-weight:700;margin:.75rem 0 .4rem}
.wholesale-body blockquote{border-left:3px solid var(--line);margin:.5rem 0;padding:.25rem 0 .25rem .75rem;color:var(--muted)}
@media(max-width:575.98px){
  .cat-grid{gap:.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .crumbs{font-size:.78rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}
  .crumbs [aria-current="page"]{max-width:46vw;flex-shrink:0}
  .crumbs li{flex-shrink:0}
  /* Dar ekranda navbar iki satira duser: marka + aksiyonlar ustte, nav altta (ust uste binme yok) */
  .topbar-inner{flex-wrap:wrap;row-gap:.3rem;min-height:0;padding-top:.45rem;padding-bottom:.45rem}
  .brand{flex:1 1 auto;font-size:.95rem}
  .topbar-actions{margin-left:auto}
  .topnav{order:3;flex:1 1 100%;margin-left:0;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:.1rem}
  .topnav-link{flex-shrink:0}
  .topbar-tag{display:none}
  #catalogMain{padding-bottom:5.5rem}
}