:root{
  --bg:#f9f9f9; --panel:#fff; --text:#111; --muted:#6b7280;
  --accent:#0ea5ff; --accent-2:#7c3aed; --glass: rgba(255,255,255,0.6);
  --shadow: 0 10px 30px rgba(2,6,23,0.06);
  --card-radius:16px;
}
body.dark{
  --bg:#0b0f13; --panel:#0f1720; --text:#e6eef8; --muted:#9aa6b2;
  --accent:#38bdf8; --accent-2:#a78bfa; --glass: rgba(10,12,15,0.6);
  --shadow: 0 8px 30px rgba(0,0,0,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family: Inter, "Segoe UI", Roboto, Arial; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition: background .35s ease, color .35s ease;
}

/* canvas bg will live under everything */
#bg{position:fixed;inset:0;z-index:-2;display:block}

/* navbar */
.navbar{
  position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;background:linear-gradient(180deg,var(--glass),transparent);
  backdrop-filter: blur(8px); z-index:1000; box-shadow:var(--shadow);
}
.logo{font-weight:700;letter-spacing:.6px}
.nav-links{display:flex;gap:22px;list-style:none;margin-left:16px}
.nav-links a{color:var(--text);text-decoration:none;font-weight:600;position:relative;padding:8px}
.nav-links a::after{content:'';position:absolute;left:8px;right:8px;bottom:6px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transform:translateY(6px);transition:all .28s}
.nav-links a:hover::after{opacity:1;transform:none}

/* nav-right (sepet) */
.nav-right{display:flex;align-items:center;gap:12px}
.cart-icon{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700}

/* hamburger */
.hamburger{display:none;cursor:pointer;font-size:20px;padding:8px;border-radius:8px}
@media(max-width:860px){ .nav-links{display:none} .hamburger{display:block} }

/* mobile menu */
.mobile-menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--panel);box-shadow:var(--shadow);padding:12px 20px;flex-direction:column;gap:8px;z-index:999}
.mobile-menu a{padding:12px;border-radius:10px;text-decoration:none;color:var(--text)}
.mobile-menu.show{display:flex}

/* container */
.container{max-width:1200px;margin:110px auto;padding:0 20px}

/* hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0;border-radius:14px}
.hero h1{font-size:44px;margin-bottom:12px;letter-spacing:.4px}
.hero p{color:var(--muted);max-width:820px;margin-bottom:20px}
.cta{display:inline-flex;gap:12px;align-items:center;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:12px 20px;border-radius:12px;font-weight:700;box-shadow:0 8px 30px rgba(12,40,80,0.12);transform:translateY(0);transition:all .28s; text-decoration:none}

/* products grid */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:40px}
.product-card{background:var(--panel);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.9,.25,1), box-shadow .38s}
.product-card:hover{transform:translateY(-12px) rotateY(6deg);box-shadow:0 30px 60px rgba(2,6,23,0.25)}
.product-card .media{height:200px;display:block;overflow:hidden}
.product-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s ease}
.product-card:hover img{transform:scale(1.05)}
.product-info{padding:18px}
.product-info h3{margin:0 0 8px;color:var(--text)}
.product-info p{margin:0 0 14px;color:var(--muted);font-size:14px}

/* buttons */
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:white;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(12,40,80,0.12)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,0.06)}

/* search area */
.search-bar{display:flex;gap:12px;align-items:center;max-width:820px;margin:24px auto;background:var(--panel);padding:12px;border-radius:12px;box-shadow:var(--shadow)}
.search-bar input{flex:1;padding:12px;border-radius:10px;border:0;background:transparent;color:var(--text);outline:none;font-size:15px}
.suggestions-list{position:absolute;left:0;right:0;top:46px;background:var(--panel);box-shadow:var(--shadow);border-radius:10px;overflow:hidden;display:none;z-index:50}
.suggestions-list.show{display:block}
.suggestions-list button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;color:var(--text);cursor:pointer}
.suggestions-list button:hover{background:linear-gradient(90deg, rgba(14,165,255,0.06), rgba(124,58,237,0.06))}

/* modal */
.modal{position:fixed;inset:0;background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.3));display:flex;align-items:center;justify-content:center;z-index:1200;display:none}
.modal.show{display:flex}
.modal-card{width:90%;max-width:820px;background:var(--panel);border-radius:14px;padding:18px;box-shadow:var(--shadow);display:flex;gap:18px;align-items:center}
.modal-card img{width:48%;height:320px;object-fit:cover;border-radius:10px}
.modal-info{flex:1}

/* cart small animation */
.add-anim{position:fixed;right:30px;bottom:100px;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:12px 16px;border-radius:12px;color:white;box-shadow:0 12px 30px rgba(12,40,80,0.18);transform:translateY(40px);opacity:0;transition:all .5s}

/* payment form */
.payment-card{max-width:760px;margin:40px auto;padding:22px;border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;margin-bottom:12px}
.field label{font-weight:600;font-size:14px;margin-bottom:6px}
.field input, .field select, .field textarea{padding:12px;border-radius:10px;border:0;background:transparent;color:var(--text);outline:none}
.pay-row{display:flex;gap:12px}
.pay-row .field{flex:1}

/* small helpers */
.row{display:flex;gap:12px}
.center{display:flex;align-items:center;justify-content:center}
.mb-20{margin-bottom:20px}

/* responsive tweaks */
@media(max-width:720px){
  .hero h1{font-size:30px}
  .product-card .media{height:160px}
  .modal-card{flex-direction:column}
  .modal-card img{width:100%;height:220px}
  .search-bar{flex-direction:column;gap:12px}
}

/* live chat widget */
.live-chat{
  position:fixed;
  bottom:20px;
  right:20px;
  width:320px;
  background:var(--panel);
  box-shadow:var(--shadow);
  border-radius:14px;
  overflow:hidden;
  transform:translateY(110%);
  transition:transform .4s ease;
  z-index:9999;
  display:flex;
  flex-direction:column;
  max-height:480px;
}
.live-chat.open{transform:translateY(0);}

.chat-header{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:700;
  padding:12px 16px;
  cursor:pointer;
  text-align:center;
}
.chat-body{
  flex:1;
  padding:12px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--bg);
}
.chat-msg{
  padding:10px 14px;
  border-radius:12px;
  max-width:80%;
  line-height:1.4;
  font-size:14px;
}
.chat-msg.bot{
  background:rgba(124,58,237,0.12);
  align-self:flex-start;
}
.chat-msg.user{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  align-self:flex-end;
}
.chat-input{
  display:flex;
  border-top:1px solid rgba(255,255,255,0.05);
  background:var(--panel);
}
.chat-input input{
  flex:1;
  border:0;
  padding:10px 12px;
  outline:none;
  background:transparent;
  color:var(--text);
}
.chat-input button{
  border:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:600;
  padding:0 16px;
  cursor:pointer;
}

/* small responsive tweaks */
@media(max-width:900px){
  .container { padding-left:14px; padding-right:14px; }
  .live-chat { right:12px; left:auto; width:90%; }
  .contact-container { grid-template-columns: 1fr; }
}



/* === Background Canvas Effect === */
#bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}