:root{
  --bg:#020617;--panel:#0b1224;--panel2:#111a30;--line:#1e293b;
  --txt:#e2e8f0;--mut:#94a3b8;--cyan:#22d3ee;--blue:#6366f1;--pink:#c026d3;
  --grad:linear-gradient(90deg,#22d3ee,#a855f7 60%,#d946ef);
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:90px}
body{background:var(--bg);color:var(--txt);font:15px/1.5 Inter,"Segoe UI",system-ui,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* üst şerit */
.top{background:#01040f;border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)}
.top .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.top a:hover{color:var(--cyan)}
.top span+span,.top a+a{margin-left:18px}

/* başlık */
header.main{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.main .wrap{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.logo{font-weight:800;font-size:22px;letter-spacing:.14em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;border-bottom:2px solid transparent}
.logo small{display:block;font-size:11px;letter-spacing:.3em;color:var(--mut);-webkit-text-fill-color:var(--mut);font-weight:500}
.search{flex:1;display:flex;max-width:640px}
.search input{flex:1;background:var(--panel);border:1px solid var(--line);border-right:0;border-radius:var(--r) 0 0 var(--r);padding:11px 14px;color:var(--txt);font:inherit;min-width:0}
.search button{background:var(--grad);border:0;border-radius:0 var(--r) var(--r) 0;padding:0 20px;font-weight:600;color:#020617}
.cartbtn{margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 16px;font-weight:600;white-space:nowrap}
.cartbtn b{background:var(--grad);color:#020617;border-radius:20px;padding:1px 8px;margin-left:6px;font-size:13px}
.cartbtn:hover{border-color:var(--cyan)}

/* kategori menüsü */
nav.cats{background:var(--panel);border-bottom:1px solid var(--line)}
nav.cats .wrap{display:flex;gap:4px;overflow-x:auto}
nav.cats button{background:none;border:0;border-bottom:3px solid transparent;padding:13px 16px;white-space:nowrap;color:var(--mut);font-weight:600}
nav.cats button:hover{color:var(--txt)}
nav.cats button.on{color:var(--cyan);border-bottom-color:var(--cyan)}

/* tanıtım alanı */
.hero{padding:34px 0 10px}
.hero .box{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:var(--r);padding:26px 28px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.hero h1{font-size:34px;line-height:1.15;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.hero p{color:var(--mut);max-width:60ch}
.hero ul{list-style:none;display:grid;gap:10px}
.hero li{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:14px}
.hero li b{display:block;color:var(--cyan);font-size:14px}
.hero li span{color:var(--mut);font-size:13px}

/* ana düzen */
.layout{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:24px 0 50px}
aside .blk{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
aside h3{font-size:14px;margin-bottom:10px;color:var(--cyan)}
aside label{display:flex;align-items:center;gap:9px;padding:5px 0;color:var(--mut);cursor:pointer}
aside label:hover{color:var(--txt)}
aside input{accent-color:#a855f7}
aside .n{margin-left:auto;font-size:12px}
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.bar h2{font-size:20px}
.bar select{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit}

/* ürün kartları */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.card:hover{border-color:#334155}
.card .im{aspect-ratio:4/3;background:#000;cursor:pointer;border:0;padding:0;display:block;width:100%}
.card .im img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.brand{font-size:12px;color:var(--mut)}
.card h3{font-size:15px;line-height:1.35;font-weight:600;cursor:pointer}
.card h3:hover{color:var(--cyan)}
.price{font-size:19px;font-weight:800;margin-top:auto;padding-top:8px}
.price.ask{font-size:14px;font-weight:600;color:var(--mut)}
.stk{font-size:12px;color:#4ade80}
.stk.out{color:#f87171}
.btn{background:var(--grad);color:#020617;border:0;border-radius:8px;padding:10px 14px;font-weight:700;width:100%;margin-top:8px}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{background:var(--line);color:var(--mut);cursor:not-allowed}
.btn.alt{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.btn.alt:hover{border-color:var(--cyan)}
.empty{padding:40px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:var(--r)}

/* pencere ve sepet */
.ov{position:fixed;inset:0;background:rgba(2,6,23,.82);z-index:50;display:none}
.ov.open{display:block}
.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(900px,94vw);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.x{position:absolute;top:10px;right:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;width:34px;height:34px;font-size:18px;z-index:2}
.x:hover{border-color:var(--cyan)}
.gal .big{aspect-ratio:4/3;background:#000;border-radius:8px;overflow:hidden}
.gal .big img{width:100%;height:100%;object-fit:contain}
.gal .th{display:flex;gap:8px;margin-top:8px}
.gal .th button{width:64px;height:50px;border:2px solid var(--line);border-radius:6px;overflow:hidden;padding:0;background:#000}
.gal .th button.on{border-color:var(--cyan)}
.gal .th img{width:100%;height:100%;object-fit:cover}
.modal h2{font-size:22px;line-height:1.25;margin:4px 0 8px}
.modal ul{margin:12px 0 12px 18px;color:var(--mut)}
.modal ul li{margin:3px 0}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
.drawer>h2{padding:18px 20px;border-bottom:1px solid var(--line);font-size:18px}
.items{flex:1;overflow:auto;padding:8px 20px}
.it{display:grid;grid-template-columns:64px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.it img{width:64px;height:50px;object-fit:cover;border-radius:6px}
.it .t{font-size:14px;line-height:1.3}
.it .q{display:flex;align-items:center;gap:6px;margin-top:6px}
.it .q button{width:26px;height:26px;background:var(--bg);border:1px solid var(--line);border-radius:6px}
.it .rm{background:none;border:0;color:var(--mut);font-size:20px}
.it .rm:hover{color:#f87171}
.foot{padding:16px 20px;border-top:1px solid var(--line)}
.foot .tot{display:flex;justify-content:space-between;font-weight:800;font-size:18px;margin-bottom:4px}
.foot small{color:var(--mut);display:block;margin-bottom:10px}
.foot input,.foot textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--txt);font:inherit;margin-bottom:8px}
.pay{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;color:var(--mut);margin-top:10px;word-break:break-word}
.pay b{color:var(--txt)}

/* alt bilgi */
footer{background:#01040f;border-top:1px solid var(--line);padding:34px 0 20px;color:var(--mut);font-size:14px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
footer h4{color:var(--txt);margin-bottom:8px}
footer a:hover{color:var(--cyan)}
footer .c{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.wa{position:fixed;right:18px;bottom:18px;background:#22c55e;color:#04210f;font-weight:700;border-radius:30px;padding:12px 18px;z-index:15}

@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .hero .box,.modal{grid-template-columns:1fr}
  header.main .wrap{flex-wrap:wrap;gap:12px}
  .search{order:3;flex-basis:100%;max-width:none}
  .hero h1{font-size:26px}
  aside .blk label{display:inline-flex;margin-right:12px}
}