/* Maraş Robotik Mağaza */
:root{
  --orange:#F5841F;--orange-dark:#E0720C;--navy:#283747;--navy-2:#1E2A36;
  --bg:#f4f6f9;--card:#fff;--line:#e6eaef;--slate:#5b6b78;--ok:#1f9d57;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;background:var(--bg);color:var(--navy);line-height:1.55}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1200px,94%);margin-inline:auto}

/* Header */
.shop-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.shop-head .bar{display:flex;align-items:center;gap:20px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.logo .mr{background:var(--orange);color:#fff;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:900}
.logo small{display:block;font-size:11px;color:var(--slate);font-weight:600}
.searchbar{flex:1;display:flex;gap:8px}
.searchbar input{flex:1;padding:11px 14px;border:2px solid #cdd9e6;border-radius:10px;font-size:14px}
.searchbar button{background:var(--navy);color:#fff;border:0;padding:0 18px;border-radius:10px;font-weight:700;cursor:pointer}
.head-actions{display:flex;align-items:center;gap:14px}
.cart-btn{position:relative;background:var(--orange);color:#fff;padding:11px 18px;border-radius:10px;font-weight:700}
.cart-btn .cnt{position:absolute;top:-8px;right:-8px;background:var(--navy);color:#fff;font-size:12px;min-width:22px;height:22px;border-radius:50%;display:grid;place-items:center;padding:0 5px}
.head-phone{font-weight:700;color:var(--navy)}
.shop-nav{background:var(--navy)}
.shop-nav .wrap{display:flex;gap:6px;flex-wrap:wrap;overflow-x:auto}
.shop-nav a{color:#cdd7e0;padding:11px 14px;font-size:14px;font-weight:600;white-space:nowrap;border-bottom:3px solid transparent}
.shop-nav a:hover,.shop-nav a.active{color:#fff;border-bottom-color:var(--orange)}

/* Layout */
.shop-main{padding:26px 0 50px}
.crumb{font-size:13px;color:var(--slate);margin-bottom:16px}
.crumb a:hover{color:var(--orange)}
.sectitle{font-size:22px;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sectitle:before{content:"";width:6px;height:24px;background:var(--orange);border-radius:3px}

/* Ürün grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 36px -20px rgba(40,55,71,.5);border-color:rgba(245,132,31,.5)}
.card .ph{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph .no{color:#c2cdd8;font-size:40px}
.indirim-rozet{position:absolute;top:10px;left:10px;background:#d9433f;color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;box-shadow:0 4px 10px -3px rgba(217,67,63,.6);z-index:2}
.bolum{margin-bottom:34px}
.bolum-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
/* Ana sayfa mini kartlar (%75 küçültülmüş yoğun ızgara) */
.grid-mini{grid-template-columns:repeat(auto-fill,minmax(182px,1fr));gap:15px}
.grid-mini .card{border-radius:12px}
.grid-mini .card .body{padding:12px 13px}
.grid-mini .card .kat{font-size:11px}
.grid-mini .card h3{font-size:14px;margin:4px 0 7px;min-height:37px;line-height:1.3}
.grid-mini .card .fiyat{font-size:17.5px}
.grid-mini .card .kdv{font-size:11px}
.grid-mini .card .alt{display:flex;gap:6px;margin-top:8px}
.grid-mini .card .alt .btn{padding:8px 10px;font-size:13px}
.grid-mini .indirim-rozet{font-size:11px;padding:3px 9px;top:9px;left:9px}
.card .body{padding:13px 14px;display:flex;flex-direction:column;flex:1}
.card .kat{font-size:11px;color:var(--orange-dark);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.card h3{font-size:14.5px;font-weight:700;margin:5px 0 8px;line-height:1.35;min-height:38px}
.card .fiyat{font-size:19px;font-weight:800;color:var(--navy);margin-top:auto}
.card .kdv{font-size:11px;color:var(--slate);font-weight:600}
.card .alt{display:flex;gap:8px;margin-top:10px}
.card .alt .btn{flex:1;text-align:center;white-space:nowrap;padding-left:6px;padding-right:6px}
.stok-yok{color:#d9433f;font-weight:700;font-size:13px}
.badge-stok{display:inline-block;font-size:11px;font-weight:700;color:var(--ok);background:#e4f6ec;padding:2px 8px;border-radius:20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--orange);color:#fff;border:0;cursor:pointer;
  padding:11px 18px;border-radius:10px;font-weight:700;font-size:14px;font-family:inherit;transition:.15s}
.btn:hover{background:var(--orange-dark)}
.btn-navy{background:var(--navy)}.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--line)}.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}
.btn-wa{background:#25D366}.btn-wa:hover{background:#1da851}
.btn-lg{padding:14px 24px;font-size:16px}
.btn-block{width:100%}
.btn[disabled]{background:#c2cdd8;cursor:not-allowed}

/* Ürün detay */
.detay{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.galeri .ana{background:#fff;border:1px solid var(--line);border-radius:14px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.galeri .ana img{width:100%;height:100%;object-fit:cover}
.galeri .ana .no{color:#c2cdd8;font-size:64px}
.galeri .kucuk{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.galeri .kucuk img{width:70px;height:70px;object-fit:cover;border:2px solid var(--line);border-radius:9px;cursor:pointer}
.galeri .kucuk img:hover{border-color:var(--orange)}
.detay h1{font-size:26px;font-weight:800;line-height:1.25;margin-bottom:8px}
.detay .kat{color:var(--orange-dark);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.detay .fiyat-kutu{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin:18px 0}
.detay .fiyat{font-size:32px;font-weight:900;color:var(--navy)}
.detay .fiyat small{font-size:13px;color:var(--slate);font-weight:600}
.adet-kutu{display:flex;align-items:center;gap:12px;margin:14px 0}
.adet-kutu input{width:70px;padding:10px;border:2px solid #cdd9e6;border-radius:10px;text-align:center;font-size:15px;font-weight:700}
.box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:20px}
.box h2{font-size:17px;font-weight:800;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid #ffe2c4}
.box p{color:#3c4a57;white-space:pre-line}
.ozellik{list-style:none}
.ozellik li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:8px}
.ozellik li:before{content:"✓";color:var(--orange);font-weight:800}

/* Sepet & tablo */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.tbl th{background:var(--navy);color:#fff;font-size:12px;text-transform:uppercase}
.tbl td.num,.tbl th.num{text-align:right}
.tbl .urun-mini{display:flex;align-items:center;gap:12px}
.tbl .urun-mini img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.ozet{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.ozet .satir{display:flex;justify-content:space-between;padding:7px 0;font-size:14px}
.ozet .genel{border-top:2px solid var(--navy);margin-top:8px;padding-top:12px;font-size:20px;font-weight:800}
.miktar{display:inline-flex;border:2px solid #cdd9e6;border-radius:8px;overflow:hidden}
.miktar a{padding:6px 11px;font-weight:800;background:#f3f6fa}
.miktar span{padding:6px 13px;font-weight:700}

/* Form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.full{grid-column:1/-1}
.fld label{font-size:13px;font-weight:700}
.fld input,.fld textarea,.fld select{padding:11px 13px;border:2px solid #cdd9e6;border-radius:10px;font-size:14px;font-family:inherit}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--orange)}
.odeme-sec{display:flex;flex-direction:column;gap:10px;margin:6px 0}
.odeme-sec label{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--line);border-radius:10px;padding:13px;cursor:pointer;font-size:14px}
.odeme-sec label:hover{border-color:var(--orange)}
.odeme-sec input{margin-top:3px}

.flash{padding:13px 16px;border-radius:10px;margin-bottom:16px;font-weight:600}
.flash-ok{background:#e4f6ec;color:#13693a;border:1px solid #bce6cd}
.flash-err{background:#fdecec;color:#9a2b28;border:1px solid #f3c9c7}
.bos{background:#fff;border:1px dashed #cdd9e6;border-radius:14px;padding:50px;text-align:center;color:var(--slate)}

/* Footer */
.shop-foot{background:var(--navy-2);color:#c6d1da;margin-top:40px}
.shop-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0}
.shop-foot a:hover{color:var(--orange)}
.shop-foot .alt{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;font-size:13px;color:#8b9aa6;text-align:center}

.cols-2{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
@media(max-width:880px){
  .detay{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  .searchbar{display:none}
}