html,body{overflow-x:hidden;}
:root{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.75);
  --primary:#2563eb;

  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --r: 18px;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 15% -10%, rgba(37,99,235,.22), transparent 60%),
              radial-gradient(900px 600px at 90% 0%, rgba(34,197,94,.12), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:inherit}
img{max-width:100%;display:block}

/* Navbar */
.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  position:sticky; top:0; z-index:50;
  background: rgba(15,23,42,.72);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(14px);
}
.logo{font-weight:900; letter-spacing:.4px; display:flex; align-items:center; gap:10px;}
.logo img{height:30px; width:auto; border-radius:10px; box-shadow: 0 8px 24px rgba(0,0,0,.35);}
.nav nav{display:flex; gap:10px; flex-wrap:wrap;}
.nav nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  opacity:.92;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.nav nav a:hover{background: rgba(255,255,255,.06); transform: translateY(-1px); opacity:1;}

/* Layout */
.section{max-width:1120px; margin:22px auto; padding:0 16px;}
.hero{max-width:1120px; margin:16px auto; padding:0 16px;}
h1,h2,h3{margin:0 0 12px}
h1{font-size:28px}
h2{font-size:22px;opacity:.95}
p{color:var(--muted);line-height:1.6}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
}
.btn:hover{transform: translateY(-2px); box-shadow: var(--shadow); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));}
.btn-primary{background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(37,99,235,.65)); border-color: rgba(37,99,235,.55);}
.btn-primary:hover{background: linear-gradient(180deg, rgba(37,99,235,1), rgba(37,99,235,.72));}
.btn-whatsapp{background: linear-gradient(180deg, rgba(34,197,94,.92), rgba(34,197,94,.60)); border-color: rgba(34,197,94,.55);}
.btn-ig{background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); border-color: rgba(255,255,255,.18);}
.btn-phone{background: linear-gradient(180deg, rgba(148,163,184,.25), rgba(148,163,184,.12));}
.btn i{opacity:.95}

/* Grid & cards */
.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}

.card{
  position:relative;
  display:block;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius: var(--r);
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.card:hover{transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow); border-color: rgba(255,255,255,.18);}

.card-img{height:170px; background: rgba(0,0,0,.14); overflow:hidden; position:relative;}
.card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.05);
}
.card:hover .card-img img{transform: scale(1.14);}
.card-img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.40), transparent 60%);
  opacity:.85; pointer-events:none;
}
.card-title{padding:12px 12px 6px; font-weight:900; letter-spacing:.2px;}
.price{padding:0 12px 12px; opacity:.95; font-weight:800;}

/* Slider */
.swiper{
  border-radius: 22px; overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  position:relative;
  isolation:isolate;
}
.swiper img{width:100%; height:420px; object-fit:cover;}
@media(max-width:520px){ .swiper img{height:280px} }

/* depth + vignette */
.swiper::before{
  content:"";
  position:absolute; inset:-30px; z-index:-1;
  border-radius: 30px;
  background:
    radial-gradient(700px 220px at 20% 15%, rgba(37,99,235,.32), transparent 60%),
    radial-gradient(700px 220px at 80% 20%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(900px 360px at 50% 100%, rgba(0,0,0,.55), transparent 65%);
  filter: blur(18px);
  opacity:.95;
}
.swiper::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(110% 90% at 50% 40%,
    transparent 55%, rgba(0,0,0,.32) 80%, rgba(0,0,0,.52) 100%);
  opacity:.8;
}
.swiper .swiper-slide img{transform: scale(1.01); filter: contrast(1.06) saturate(1.06);}

/* Premium overlay */
.hero-overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; pointer-events:none;}
.hero-panel{
  pointer-events:auto;
  max-width: 560px;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.hero-title{font-size:20px; font-weight:1000; letter-spacing:.2px; margin:0 0 6px;}
.hero-sub{margin:0 0 12px; color: rgba(229,231,235,.80); line-height:1.45;}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap;}

/* Product detail */
.detail{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:start;}
@media(max-width:900px){ .detail{grid-template-columns:1fr} }
.detail-img{border-radius:22px; overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow2); background: rgba(0,0,0,.16);}
.detail-img img{width:100%; transition: transform .4s ease;}
.detail-img:hover img{transform: scale(1.12);}
.detail-info{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:22px; padding:14px; box-shadow: var(--shadow2);}
.price.big{font-size:24px; font-weight:1000; letter-spacing:.2px;}

/* Forms */
input,select,textarea{
  width:100%; padding:10px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:var(--text); outline:none;
}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.small{font-size:12px;opacity:.85}
.alert{background:#7f1d1d;padding:10px;border-radius:14px;margin:10px 0}
.ok{background:#14532d;padding:10px;border-radius:14px;margin:10px 0}
.footer{padding:28px 16px;text-align:center;opacity:.75}

/* Scroll reveal */
.reveal, .reveal-left, .reveal-right, .reveal-zoom{
  opacity:0;
  transform: translateY(18px) scale(.98);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-left{ transform: translateX(-22px); }
.reveal-right{ transform: translateX(22px); }
.reveal-zoom{ transform: scale(.92); }
.reveal.show, .reveal-left.show, .reveal-right.show, .reveal-zoom.show{
  opacity:1;
  transform: translateY(0) translateX(0) scale(1);
}
@media(prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-zoom{transition:none;opacity:1;transform:none;}
}

/* Parallax helper */
.card.parallax{transform-style: preserve-3d; will-change: transform;}
.card.parallax::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: var(--r);
  background: radial-gradient(600px 220px at var(--mx,50%) var(--my,20%), rgba(255,255,255,.18), transparent 60%);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.card.parallax:hover::before{opacity:1;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.72);
  display:none; align-items:center; justify-content:center;
  padding:18px; z-index:9999;
  backdrop-filter: blur(10px);
}
.lightbox.open{display:flex;}
.lightbox-inner{
  position:relative;
  max-width:min(980px,96vw);
  max-height:86vh;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  background: rgba(15,23,42,.65);
}
.lightbox-inner img{width:100%; max-height:86vh; object-fit:contain;}
.lightbox-close{
  position:absolute; top:10px; right:10px;
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff; display:grid; place-items:center;
  cursor:pointer;
}

/* Quick View */
.card-actions{
  position:absolute; left:12px; right:12px; bottom:12px;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  opacity:0; transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.card:hover .card-actions{opacity:1; transform: translateY(0); pointer-events:auto;}
.qv-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff; font-weight:900; cursor:pointer;
}
.qv-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff; font-weight:900;
}
.qv-modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  padding:18px; z-index:9998;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
}
.qv-modal.open{display:flex;}
.qv-box{
  width:min(980px,96vw);
  max-height:86vh;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.72);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
}
@media(max-width:900px){.qv-box{grid-template-columns:1fr;}}
.qv-img{background: rgba(0,0,0,.18); border-right:1px solid rgba(255,255,255,.10);}
@media(max-width:900px){.qv-img{border-right:none;border-bottom:1px solid rgba(255,255,255,.10);}}
.qv-img img{width:100%; height:100%; max-height:86vh; object-fit:cover;}
.qv-info{padding:14px;}
.qv-title{font-size:20px; font-weight:1000; margin:0 0 8px;}
.qv-desc{color: rgba(229,231,235,.78); line-height:1.55; margin:0 0 12px;}
.qv-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;}
.qv-close{
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color:#fff; cursor:pointer;
}
.qv-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.qv-action{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  font-weight:900; text-decoration:none;
  color:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.qv-action:hover{transform: translateY(-2px); box-shadow:0 20px 60px rgba(0,0,0,.5); filter:brightness(1.05);}
.qv-wa{background: linear-gradient(180deg,#22c55e,#16a34a);}
.qv-ig{background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);}
.qv-phone{background: linear-gradient(180deg,#94a3b8,#64748b);}

/* Lightbox improvements (prevent off-screen) */
.lightbox{padding: max(18px, env(safe-area-inset-top)) 18px;}
.lightbox-inner{max-height: calc(100vh - 40px); overflow:auto;}
.lightbox-inner img{max-height: calc(100vh - 40px);}

/* Stronger hover zoom (AdaCanta) */
@media(hover:hover){
  .card:hover{transform: translateY(-6px) scale(1.04);}
  .card:hover .card-img img{transform: scale(1.18);}
}

/* White/Black/Blue polish */
.nav{background: rgba(9,14,26,.78);} 
.card{background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));}
.btn-primary{filter:saturate(1.05);} 


/* ===== Layout polish v4 ===== */
.container{max-width:1180px;margin:0 auto;padding:0 16px;}
.section{max-width:1180px}
.hero{max-width:1180px}
body{background:
  radial-gradient(1200px 700px at 15% -10%, rgba(29,78,216,.20), transparent 60%),
  radial-gradient(900px 600px at 90% 0%, rgba(255,255,255,.06), transparent 55%),
  linear-gradient(180deg, rgba(10,15,28,1), rgba(7,10,18,1));
}

/* Navbar spacing */
.nav{padding:14px 22px;}
.nav nav a{font-weight:800; letter-spacing:.2px;}
.nav nav a.active{background: rgba(255,255,255,.08); opacity:1}

/* Slider: bigger + centered */
.swiper img{height:520px;}
@media(max-width:520px){ .swiper img{height:320px} }
.hero-overlay{padding:22px;}
.hero-panel{background: rgba(0,0,0,.42);}

/* Cards: nicer and clearer */
.card-title{font-size:15px}
.card-img{height:190px;}
.grid{gap:16px}

/* Placeholder icon nicer */
.ph{
  height:190px;display:flex;align-items:center;justify-content:center;
  background: radial-gradient(400px 220px at 30% 20%, rgba(29,78,216,.18), transparent 60%),
              rgba(0,0,0,.14);
  font-size:64px;opacity:.85;
}

/* Product detail: better composition */
.detail{gap:18px}
.detail-info{min-height:340px}
.detail-img{display:flex;align-items:center;justify-content:center}
.detail-img img{width:100%; max-width:620px;}

/* Lightbox fix (force full-screen overlay, avoid being constrained by transforms) */
.lightbox{
  position: fixed !important;
  top:0 !important; left:0 !important;
  width:100% !important; height:100vh !important;
  inset:auto !important;
  z-index: 100000 !important;
  transform: none !important;
}
.lightbox.open{display:flex !important;}
.lightbox-inner{max-height: calc(100vh - 40px); overflow:auto;}
.lightbox-inner img{max-height: calc(100vh - 40px);}

/* Subtle entrance animations */
@media (prefers-reduced-motion: no-preference){
  .card{transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
  .btn{transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;}
}

/* Footer */
.footer{padding:34px 16px;opacity:.85}


/* ===== Footer + Floating WhatsApp (v5) ===== */
.footer{border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.14);}
.footer-inner{
  max-width:1180px; margin:0 auto; padding:22px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.footer-brand{font-weight:900; letter-spacing:.2px;}
.footer-muted{opacity:.78; font-size:13px; margin-top:6px;}
.footer-icons{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
.footer-icon{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  text-decoration:none;
}
.footer-icon:hover{transform: translateY(-2px); filter:brightness(1.06);}
.footer-icon.ig{background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);}
.footer-icon.wa{background: linear-gradient(180deg,#22c55e,#16a34a);}
.footer-icon.phone{background: linear-gradient(180deg,#94a3b8,#64748b);}

.fab-wa{
  position:fixed; right:18px; bottom:18px;
  width:58px; height:58px; border-radius:999px;
  display:grid; place-items:center;
  z-index: 200000;
  background: linear-gradient(180deg,#22c55e,#16a34a);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  text-decoration:none;
  transform: translateZ(0);
}
.fab-wa i{font-size:28px;}
.fab-wa:hover{transform: translateY(-3px); filter:brightness(1.06);}
@media(max-width:520px){
  .fab-wa{right:14px; bottom:14px; width:54px; height:54px;}
  .fab-wa i{font-size:26px;}
}

/* ===== Category search bar ===== */
.filterbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  padding:12px; border-radius:18px;
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
  margin: 12px 0 18px;
}
.filterbar .hint{opacity:.78; font-size:13px;}
.filterbar input{
  max-width:420px;
  background: rgba(0,0,0,.20);
}


/* ===== Promo bar (v6) ===== */
.promo-bar{
  position:sticky;
  top:0;
  z-index:60;
  background: linear-gradient(90deg, rgba(29,78,216,.95), rgba(0,0,0,.65));
  border-bottom:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.promo-inner{
  max-width:1180px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
  text-align:center;
}
#promoText{
  display:inline-block;
  opacity:1;
  transition: opacity .25s ease, transform .25s ease;
  will-change: opacity, transform;
}
#promoText.fade-out{opacity:0; transform: translateY(-6px);}
#promoText.fade-in{opacity:1; transform: translateY(0);}


/* ===== Promo bar sizing (v7) ===== */
.promo-inner{
  min-height: var(--promo-height, 44px);
  font-size: 15px;
  padding: 10px 16px;
}
@media(max-width:520px){
  .promo-inner{font-size:13px; padding:10px 12px;}
}

/* Bigger always-visible WhatsApp FAB (v7) */
.fab-wa{
  width:68px; height:68px;
  right:18px; bottom:18px;
}
.fab-wa i{font-size:32px;}
@media(max-width:520px){
  .fab-wa{width:64px;height:64px; right:14px; bottom:14px;}
  .fab-wa i{font-size:30px;}
}

/* Lightbox full modal (v7) */
.lightbox-inner{width:min(1100px,96vw);} 
@media(max-width:520px){.lightbox-inner{width:96vw;}}


/* ===== WYSIWYG content styling (v8) ===== */
.wysiwyg-content h2, .wysiwyg-content h3{
  margin: 14px 0 10px;
  letter-spacing:.2px;
}
.wysiwyg-content p{margin:0 0 12px; color: rgba(248,250,252,.82); line-height:1.75;}
.wysiwyg-content a{color: var(--primary); font-weight:900; text-decoration: none;}
.wysiwyg-content a:hover{text-decoration: underline;}
.wysiwyg-content ul, .wysiwyg-content ol{margin: 0 0 12px 18px; color: rgba(248,250,252,.82); line-height:1.75;}


/* ===== Blog tags (v9) ===== */
.tag{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
  letter-spacing:.15px;
}


/* ===== Product detail image no-zoom (v10) ===== */
.detail-img img{transform:none !important;}
.detail-img:hover img{transform:none !important;}

/* ===== WhatsApp FAB label (v10) ===== */
.fab-wa{right:18px; left:auto;}
.fab-wa::after{
  content: "WhatsApp";
  position:absolute;
  right: 78px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 10px;
  border-radius:14px;
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  opacity:0;
  transform: translateY(2px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  white-space:nowrap;
}
.fab-wa:hover::after{opacity:1; transform: translateY(0);}
@media(max-width:520px){
  .fab-wa::after{display:none;}
}


  .gallery-item{height:120px;}
}

/* ===== Blog layout (v11) ===== */
.blog-layout{display:grid; grid-template-columns: 340px 1fr; gap:14px; align-items:start;}
.blog-side{position:sticky; top: calc(var(--promo-height,44px) + 14px);}
.blog-main{min-width:0;}
.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
}
.chip.active{background: rgba(29,78,216,.35); border-color: rgba(29,78,216,.65);}
@media(max-width:900px){
  .blog-layout{grid-template-columns: 1fr;}
  .blog-side{position:relative; top:auto;}
}


/* ===== Home top layout (v12) ===== */
.home-top-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:stretch;
}
.home-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.mini-link{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.15px;
  box-shadow: 0 14px 46px rgba(0,0,0,.22);
}
.mini-link:hover{transform: translateY(-2px); filter:brightness(1.06);}
.mini-link i{opacity:.95}
@media(max-width:900px){
  .home-top-grid{grid-template-columns: 1fr;}
}


/* ===== Mobile bottom bar (v15) ===== */
.mobile-bar{display:none;}
@media(max-width:720px){
  body{padding-bottom:78px;}
  .mobile-bar{
    position:fixed; left:10px; right:10px; bottom:10px;
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap:10px;
    z-index:9999;
  }
  .mb-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px;
    padding:11px 8px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(10, 15, 25, .72);
    backdrop-filter: blur(10px);
    text-decoration:none;
    font-weight:900;
    box-shadow: 0 14px 46px rgba(0,0,0,.35);
    user-select:none;
  }
  .mb-item.primary{background: rgba(29,78,216,.35); border-color: rgba(29,78,216,.65);}
  .mb-item i{font-size:18px;}
  .mb-item span{font-size:12px; letter-spacing:.15px;}
}


/* ===== Mobile nav fix (v16) ===== */
@media(max-width:720px){
  .nav{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 12px;
  }
  .logo{flex:1 1 100%;}
  nav[data-nav]{
    flex:1 1 100%;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
    justify-items:center;
  }
  nav[data-nav] a{padding:10px 8px; width:100%; text-align:center;}
  .nav-cta{
    flex:1 1 100%;
    margin-left:0 !important;
    justify-content:center;
  }
}

/* ===== Mobile right side bar (v16) ===== */
.mobile-side{display:none;}
@media(max-width:720px){
  /* hide bottom bar to avoid clutter; use right side bar */
  .mobile-bar{display:none !important;}
  .fab-wa{display:none !important;}

  .mobile-side{
    position:fixed;
    right:12px;
    bottom:110px;
    display:flex;
    flex-direction:column;
    gap:12px;
    z-index:9999;
  }
  .ms-btn{
    width:56px; height:56px;
    border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(10, 15, 25, .72);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 46px rgba(0,0,0,.35);
    text-decoration:none;
    font-size:22px;
  }
  .ms-btn.wa{background: rgba(34,197,94,.20); border-color: rgba(34,197,94,.45);}
  .ms-btn.offer{background: rgba(29,78,216,.25); border-color: rgba(29,78,216,.55);}
  .ms-btn:active{transform: scale(.96);}
}


/* ===== Cookie + Live Update Bars (v18) ===== */
.cookie-banner{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:99999;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,15,25,.86);
  backdrop-filter: blur(10px);
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  color:#fff;
}
.cookie-inner{ display:flex; gap:14px; padding:14px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; }
.cookie-title{ font-weight:900; font-size:14px; }
.cookie-desc{ opacity:.85; font-size:13px; margin-top:4px; max-width:680px; line-height:1.35; }
.cookie-actions{ display:flex; gap:10px; }
.cookie-link{ display:inline-block; margin-top:8px; font-weight:800; opacity:.9; text-decoration:underline; }
@media(max-width:720px){
  .cookie-inner{ align-items:stretch; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1; }
}


/* ===== Homepage Wireframe Layout (v18) ===== */
.hero-wire{margin-top:10px;}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:stretch;}
.hero-left h1{font-size:46px; letter-spacing:.5px; margin:0;}
.hero-sub{font-weight:900; opacity:.9; margin-top:6px;}
.hero-pills{opacity:.75; margin-top:8px; font-weight:800;}
.hero-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.hero-badges{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.badge{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-weight:900; font-size:13px;}
.hero-imgbox{height:240px; border-radius:18px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.hero-imgbox img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9;}
.hero-imgph{opacity:.7; font-weight:900;}
.cat-strip{margin-top:14px; display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;}
.cat-chip{display:flex; gap:10px; align-items:center; padding:12px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); text-decoration:none;}
.cat-chip:hover{transform: translateY(-2px); filter: brightness(1.06);}
.cat-ico{width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background: rgba(29,78,216,.25); border:1px solid rgba(29,78,216,.45);}
.cat-name{font-weight:900; display:block;}
.cat-sub{font-size:12px; opacity:.75; font-weight:900;}
.services-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px;}
.svc{display:flex; gap:12px; align-items:center;}
.svc-ico{width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:18px;}
.svc-title{font-weight:900;}
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}
.list{margin:10px 0 0 18px; padding:0; opacity:.9;}
.logo-row{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; margin-top:12px;}
.logo-box{height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);}
.product-row{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; margin-top:12px;}
.p-card{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius:18px; overflow:hidden; text-decoration:none;}
.p-img{height:110px; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center;}
.p-img img{width:100%; height:100%; object-fit:cover;}
.p-body{padding:10px;}
.p-name{font-weight:900;}
.p-cta{margin-top:8px; display:inline-block; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); font-weight:900;}
.p-card:hover{transform: translateY(-2px); filter:brightness(1.06);}

@media(max-width:1000px){
  .cat-strip{grid-template-columns: repeat(3, 1fr);}
  .product-row{grid-template-columns: repeat(3, 1fr);}
  .services-grid{grid-template-columns: repeat(2, 1fr);}
  .logo-row{grid-template-columns: repeat(3, 1fr);}
}
@media(max-width:720px){
  .hero-grid{grid-template-columns: 1fr;}
  .hero-left h1{font-size:34px;}
  .cat-strip{grid-template-columns: repeat(2, 1fr);}
  .two-col{grid-template-columns: 1fr;}
  .product-row{grid-template-columns: repeat(2, 1fr);}
}


/* ===== Wireframe Layout (dark theme) V20 ===== */
.home-wire{padding-top:12px;}
.wire-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch;padding:18px;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(255,255,255,.04);box-shadow:0 18px 70px rgba(0,0,0,.35);}
.wire-title{margin:0;font-size:44px;letter-spacing:.6px;}
.wire-sub{font-weight:900;opacity:.9;margin-top:6px;}
.wire-pills{opacity:.72;margin-top:10px;font-weight:800;}
.wire-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.wire-checks{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap;opacity:.85;font-weight:800;}
.wire-media{height:260px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);overflow:hidden;position:relative;}
.wire-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);}
.wire-media-ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;opacity:.65;}
.wire-cats{margin-top:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.wire-cat{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);text-decoration:none;}
.wire-cat:hover{transform:translateY(-2px);filter:brightness(1.06);}
.wire-cat-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(29,78,216,.22);border:1px solid rgba(29,78,216,.45);}
.wire-cat-name{font-weight:900;}
.wire-cat-sub{font-size:12px;opacity:.75;font-weight:900;}
.wire-cat-btn{padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-weight:900;font-size:13px;}
.wire-section{margin-top:18px;}
.wire-section-title{text-align:center;font-weight:1000;letter-spacing:.4px;margin:8px 0 12px 0;font-size:22px;}
.wire-services{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.wire-service{display:flex;gap:12px;align-items:center;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);}
.wire-service-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);font-size:18px;}
.wire-service-title{font-weight:900;}
.wire-service-desc{opacity:.72;font-size:13px;font-weight:700;margin-top:2px;}
.wire-two{margin-top:18px;display:grid;grid-template-columns:1.15fr .85fr;gap:12px;}
.wire-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:16px;}
.wire-h3{font-weight:1000;font-size:18px;}
.wire-muted{opacity:.78;margin-top:6px;font-weight:800;}
.wire-list{margin:10px 0 0 18px;padding:0;opacity:.9;}
.wire-list li{margin:7px 0;}
.wire-mini-media{margin-top:12px;height:160px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);overflow:hidden;display:grid;place-items:center;}
.wire-mini-media img{width:100%;height:100%;object-fit:cover;}
.wire-popular{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.wire-prod{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:16px;overflow:hidden;text-decoration:none;}
.wire-prod-img{height:120px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;}
.wire-prod-img img{width:100%;height:100%;object-fit:cover;}
.wire-prod-name{padding:10px 10px 0 10px;font-weight:900;}
.wire-prod-meta{padding:2px 10px 0 10px;opacity:.75;font-weight:800;font-size:12px;}
.wire-prod-btn{margin:10px;padding:9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.14);display:inline-block;font-weight:900;font-size:13px;}
.wire-prod:hover{transform:translateY(-2px);filter:brightness(1.06);}
@media(max-width:1100px){.wire-cats{grid-template-columns:repeat(3,1fr);} .wire-services{grid-template-columns:repeat(2,1fr);} .wire-popular{grid-template-columns:repeat(3,1fr);}}
@media(max-width:780px){.wire-hero{grid-template-columns:1fr;} .wire-title{font-size:34px;} .wire-two{grid-template-columns:1fr;} .wire-cats{grid-template-columns:repeat(2,1fr);} .wire-popular{grid-template-columns:repeat(2,1fr);}}



/* Hero Slider (homepage) */
.hero-slider{position:relative;height:260px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);}
.hero-track{height:100%;}
.hero-slide{position:absolute;inset:0;}
.hero-media{width:100%;height:100%;object-fit:cover;display:block;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,.35));}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:#fff;font-size:26px;font-weight:900;display:grid;place-items:center;cursor:pointer;}
.hero-nav.prev{left:10px}
.hero-nav.next{right:10px}
.hero-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;z-index:3}
.hero-dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);cursor:pointer}
.hero-dot.active{background:rgba(29,78,216,.75);border-color:rgba(29,78,216,.95)}
.wire-cat-ico img{width:100%;height:100%;object-fit:cover;border-radius:14px}

/* Newsletter */
.newsletter{margin-top:22px;}
.newsletter-inner{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);}
.newsletter-title{font-weight:1000;font-size:18px;}
.newsletter-desc{opacity:.75;font-weight:800;margin-top:4px;}
.newsletter-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.newsletter-form input{min-width:240px;}
.newsletter-msg{font-weight:900;opacity:.85;margin-left:4px;}
@media(max-width:780px){
  .newsletter-inner{flex-direction:column;align-items:stretch;}
  .newsletter-form{width:100%;}
  .newsletter-form input{flex:1;min-width:0;}
}

/* Tasarla */
.page-head h1{margin:0 0 6px 0;}
.page-head p{margin:0;opacity:.78;font-weight:800;}
.design-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.design-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:14px;}
.design-top{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;}
.design-title{font-weight:1000;font-size:18px;}
.design-desc{opacity:.75;font-weight:800;margin-top:6px;}
.design-img{width:120px;height:120px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.10);}
.design-sizes{margin-top:10px;}
.design-sizes-title{font-weight:1000;margin-bottom:8px;}
.design-sizes-table{display:flex;flex-direction:column;gap:8px;}
.size-row{display:grid;grid-template-columns:160px 150px 1fr;gap:10px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);}
.size-name{font-weight:1000;}
.size-dim{opacity:.9;font-weight:900;}
.size-note{opacity:.75;font-weight:800;}
@media(max-width:900px){
  .design-grid{grid-template-columns:1fr;}
  .size-row{grid-template-columns:1fr;}
}


/* ===== Design Tool V25 ===== */
.design-tool .dt-head h1{margin:6px 0 6px 0;font-size:30px;}
.design-tool .dt-head p{opacity:.78;margin:0 0 12px 0;font-weight:800;}
.dt-grid{display:grid;grid-template-columns:420px 1fr;gap:12px;align-items:start;}
.dt-panel{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:14px;}
.dt-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.dt-row label{font-weight:900;opacity:.9;}
.dt-row input[type="text"], .dt-row select, .dt-row input[type="file"], .dt-row textarea{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);color:inherit;
}
.dt-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dt-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
.dt-result{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(29,78,216,.35);background:rgba(29,78,216,.10);}
.dt-result-title{font-weight:1000;margin-bottom:8px;}
.dt-canvas-wrap{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:12px;overflow:hidden;}
.dt-canvas-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;}
.dt-canvas-label{font-weight:1000;}
.dt-hint{opacity:.72;font-weight:800;font-size:12px;}
#designCanvas{width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);}
@media(max-width:980px){.dt-grid{grid-template-columns:1fr;}}


/* ===== Design Tool Page ===== */
.design-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start;margin-top:12px;}
.design-form .df-row{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:center;margin:10px 0;}
.design-form label{font-weight:900;opacity:.9;}
.design-form input[type="text"], .design-form select, .design-form input[type="file"]{width:100%;}
.design-form .df-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px;}
.design-form .df-grid label{display:block;margin-bottom:6px;opacity:.8;}
.design-form .df-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.btn-whatsapp{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35);color:#eafff2;}
.design-canvas-wrap{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);overflow:hidden;}
.design-canvas-wrap canvas{width:100%;height:auto;display:block;}
.design-canvas-ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;opacity:.7;}
@media(max-width:900px){.design-hero{grid-template-columns:1fr;} .design-form .df-row{grid-template-columns:1fr;} }

.label{display:block;font-weight:900;opacity:.85;margin-bottom:6px;}
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:inherit;}
.grid{display:grid;}
.small{font-size:12px;}

/* ===== Floating WhatsApp Button (fixed, responsive) ===== */
html, body { max-width: 100%; overflow-x: hidden; }
.float-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  transform: translateZ(0);
  will-change: transform;
}
.float-whatsapp:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.float-whatsapp:active{ transform: translateY(0); }
.float-whatsapp .wa-ico{
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  font-size: 18px;
  line-height: 1;
}
.float-whatsapp .wa-text{ font-size: 14px; opacity: .95; }
@media (max-width: 520px){
  .float-whatsapp{ right: 12px; bottom: 12px; padding: 10px 12px; }
  .float-whatsapp .wa-text{ display:none; }
  .float-whatsapp .wa-ico{ width: 46px; height: 46px; }
}

/* ===== Products dropdown ===== */
.has-drop{position:relative;}
.nav-drop{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  box-shadow:0 22px 60px rgba(0,0,0,.45);
  display:none;
  z-index:9999;
}
.has-drop:hover .nav-drop{display:block;}
.nav-drop-item{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  opacity:.92;
}
.nav-drop-item:hover{background:rgba(255,255,255,.06); opacity:1;}
@media(max-width: 820px){
  .has-drop:hover .nav-drop{display:none;}
  .nav-drop{position:static; display:block; padding:6px; margin-top:6px;}
}

/* ===== Mobile category carousel (no body scroll) ===== */
@media(max-width:780px){
  .wire-cats-scroll{
    display:flex !important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:10px;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .wire-cats-scroll::-webkit-scrollbar{height:8px;}
  .wire-cats-scroll .wire-cat{
    flex:0 0 78%;
    scroll-snap-align:start;
    min-width:240px;
  }
}