/* ============================================================
   Diva13 Toy Shop — diva13shop.online
   Full Stylesheet: Gate Overlay + Complete Store Styles
   Theme: Dark Navy + Light Blue + Yellow + Orange
============================================================ */

/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Bebas+Neue&display=swap');

:root {
  --bg:         #090d16;
  --bg-card:    #0f172a;
  --bg-card-2:  #1e293b;
  --bg-input:   #1a2540;

  --blue:       #38bdf8;
  --blue-2:     #7dd3fc;
  --blue-dark:  #0284c7;
  --blue-glow:  rgba(56,189,248,0.28);
  --dark-blue:  #0f172a;

  --yellow:     #facc15;
  --yellow-glow:rgba(250,204,21,0.25);
  --orange:     #f97316;
  --orange-dark:#ea580c;
  --orange-glow:rgba(249,115,22,0.32);

  --text:       #f8fafc;
  --text-2:     #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim:   #64748b;
  --border:     rgba(255,255,255,0.09);
  --border-blue:rgba(56,189,248,0.22);

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-full:9999px;

  --shadow: 0 10px 40px rgba(0,0,0,0.55);
  --glow:   0 0 28px rgba(56,189,248,0.18);

  --font:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; color-scheme:dark; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ===========================================
   AGE GATE OVERLAY — Ultra Simple & Compact
=========================================== */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('https://res.cloudinary.com/db8er9lqr/image/upload/desk-verf_fbcntu.webp') center/cover no-repeat;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.age-gate-overlay.gate-hidden { display: none; }

/* ---- Box ---- */
.gate-box {
  background: #111722;
  border: 1px solid #222e42;
  border-radius: 12px;
  padding: 24px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.gate-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.gate-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 18px;
}

.gate-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gate-btn-yes {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.15s;
}
.gate-btn-yes:hover { opacity: 0.85; }
.gate-btn-yes:disabled { opacity: 0.5; cursor: not-allowed; }

.gate-btn-no {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: transparent;
  color: #64748b;
  border: 1px solid #222e42;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}
.gate-btn-no:hover { color: #94a3b8; border-color: #334155; }

#gateVerification {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.turnstile-container,
#gateVerification iframe,
#gateVerificationWidget {
  transform: scale(0.85);
  transform-origin: center center;
  margin: -6px 0;
}

.turnstile-msg { font-size: 12px; color: #94a3b8; margin-top: 4px; }

/* ===========================================
   LAYOUT
=========================================== */
.container {
  width:100%;max-width:1240px;margin:0 auto;padding:0 20px;
}
@media(min-width:768px){ .container{padding:0 32px;} }

/* ===========================================
   HEADER & NAV
=========================================== */
.site-header {
  position:sticky;top:0;z-index:100;
  background:rgba(9,13,22,0.93);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  display:flex;align-items:center;justify-content:space-between;
  height:66px;gap:16px;
}
.brand {
  display:flex;align-items:center;gap:12px;
  text-decoration:none;flex-shrink:0;
}
.brand-logo {
  width:42px;height:42px;border-radius:var(--r-sm);
  border:2px solid var(--blue);box-shadow:0 0 10px var(--blue-glow);
  object-fit:cover;
}
.brand-name  { font-size:18px;font-weight:800;background:linear-gradient(135deg,#fff 20%,var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.brand-tagline{ font-size:10px;color:var(--yellow);font-weight:700;text-transform:uppercase;letter-spacing:0.08em; }

.nav-menu { display:none;align-items:center;gap:4px; }
@media(min-width:900px){ .nav-menu{display:flex;} }
.nav-link { padding:8px 14px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--text-muted);transition:all 0.18s; }
.nav-link:hover,.nav-link.active { color:#fff;background:rgba(255,255,255,0.07); }

.header-cta { display:flex;align-items:center;gap:10px; }
.btn-wa-header {
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;background:rgba(22,163,74,0.15);
  border:1px solid rgba(22,163,74,0.4);border-radius:var(--r-full);
  color:#4ade80;font-size:13px;font-weight:700;transition:all 0.2s;
}
.btn-wa-header:hover { background:rgba(22,163,74,0.25); }

/* ===========================================
   HERO
=========================================== */
.hero {
  background:
    radial-gradient(circle at 15% 30%,rgba(56,189,248,0.14) 0%,transparent 50%),
    radial-gradient(circle at 85% 70%,rgba(249,115,22,0.11) 0%,transparent 50%),
    var(--bg);
  padding:68px 0 58px;text-align:center;
  border-bottom:1px solid var(--border);
}
.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px;background:rgba(250,204,21,0.1);
  border:1px solid rgba(250,204,21,0.3);border-radius:var(--r-full);
  color:var(--yellow);font-size:13px;font-weight:700;margin-bottom:24px;
}
.pulse { width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:blink 1.8s infinite; }
@keyframes blink{0%,100%{opacity:.6;transform:scale(.9);}50%{opacity:1;transform:scale(1.25);}}

.hero-title { font-size:38px;font-weight:800;line-height:1.14;margin-bottom:18px;letter-spacing:-0.03em; }
@media(min-width:768px){ .hero-title{font-size:52px;} }
.text-blue   { background:linear-gradient(135deg,var(--blue) 0%,#60a5fa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.text-orange { background:linear-gradient(135deg,var(--yellow) 0%,var(--orange) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }

.hero-sub { max-width:680px;margin:0 auto 36px;color:var(--text-muted);font-size:17px;line-height:1.7; }
.hero-actions { display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; }

.btn-primary {
  display:inline-flex;align-items:center;gap:8px;padding:14px 28px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff;border:none;border-radius:var(--r-md);font-family:var(--font);
  font-size:15px;font-weight:700;cursor:pointer;transition:all 0.22s ease;
  text-decoration:none;box-shadow:0 8px 24px var(--orange-glow);
}
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 12px 30px rgba(249,115,22,0.5); }

.btn-outline {
  display:inline-flex;align-items:center;gap:8px;padding:13px 24px;
  background:rgba(56,189,248,0.1);color:var(--blue);
  border:1px solid var(--border-blue);border-radius:var(--r-md);
  font-family:var(--font);font-size:15px;font-weight:700;
  cursor:pointer;transition:all 0.22s ease;text-decoration:none;
}
.btn-outline:hover { background:rgba(56,189,248,0.2);transform:translateY(-2px); }

.hero-stats {
  display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;
  margin-top:48px;padding-top:36px;border-top:1px solid var(--border);
}
.stat-num   { font-size:30px;font-weight:800;color:var(--blue); }
.stat-label { font-size:13px;color:var(--text-muted);margin-top:2px; }

/* ===========================================
   SECTION WRAPPER
=========================================== */
.section       { padding:60px 0; }
.section-border{ border-bottom:1px solid var(--border); }
.section-head  { text-align:center;margin-bottom:42px; }
.sec-badge {
  display:inline-block;padding:5px 14px;
  background:rgba(56,189,248,0.1);border:1px solid var(--border-blue);
  border-radius:var(--r-full);color:var(--blue);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;
}
.sec-title   { font-size:30px;font-weight:800;letter-spacing:-0.02em;margin-bottom:12px; }
@media(min-width:768px){ .sec-title{font-size:36px;} }
.sec-sub { max-width:600px;margin:0 auto;color:var(--text-muted);font-size:15px;line-height:1.65; }

/* ===========================================
   CATEGORY CHIPS
=========================================== */
.cat-scroll { display:flex;gap:10px;overflow-x:auto;padding-bottom:16px;scrollbar-width:none; }
.cat-scroll::-webkit-scrollbar { display:none; }
.cat-chip {
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-full);
  color:var(--text-muted);font-size:14px;font-weight:600;white-space:nowrap;
  cursor:pointer;transition:all 0.2s;text-decoration:none;
}
.cat-chip:hover,.cat-chip.active {
  background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 4px 14px var(--blue-glow);
}

/* ===========================================
   PRODUCT GRID
=========================================== */
.products-grid {
  display:grid;grid-template-columns:repeat(1,1fr);gap:22px;
}
@media(min-width:520px){ .products-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:880px){ .products-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1150px){ .products-grid{grid-template-columns:repeat(4,1fr);} }

.product-card {
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s ease;
}
.product-card:hover { border-color:var(--border-blue);transform:translateY(-6px);box-shadow:var(--shadow),var(--glow); }
.product-card a { text-decoration:none; }

.prod-img-wrap { position:relative;width:100%;padding-top:75%;background:var(--bg-card-2);overflow:hidden; }
.prod-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease; }
.product-card:hover .prod-img { transform:scale(1.06); }

.badge-disc  { position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:var(--r-full); }
.badge-stock { position:absolute;top:10px;right:10px;background:rgba(9,13,22,0.85);color:var(--blue);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--border-blue);backdrop-filter:blur(8px); }

.prod-body  { padding:16px;flex:1;display:flex;flex-direction:column; }
.prod-cat   { font-size:11px;font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px; }
.prod-title { font-size:15px;font-weight:700;line-height:1.4;color:var(--text);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.prod-rating{ display:flex;align-items:center;gap:5px;font-size:13px;color:var(--yellow);margin-bottom:10px; }
.prod-rating span { color:var(--text-dim);font-size:12px; }
.prod-prices { margin-top:auto;margin-bottom:14px; }
.price-ori  { font-size:12px;color:var(--text-dim);text-decoration:line-through;margin-right:6px; }
.price-cur  { font-size:18px;font-weight:800;color:var(--blue); }
.prod-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.btn-detail {
  padding:10px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text-muted);font-family:var(--font);font-size:12px;font-weight:700;
  cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.btn-detail:hover { border-color:var(--blue);color:var(--blue); }
.btn-beli {
  padding:10px;background:var(--orange);border:none;border-radius:var(--r-sm);
  color:#fff;font-family:var(--font);font-size:12px;font-weight:700;
  cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.btn-beli:hover { background:var(--orange-dark); }

/* ===========================================
   BENEFITS
=========================================== */
.benefits-grid {
  display:grid;grid-template-columns:repeat(1,1fr);gap:20px;
}
@media(min-width:600px){ .benefits-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .benefits-grid{grid-template-columns:repeat(4,1fr);} }

.benefit-card {
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:26px 22px;text-align:center;transition:all 0.3s ease;
}
.benefit-card:hover { border-color:var(--border-blue);transform:translateY(-4px);box-shadow:var(--glow); }
.benefit-icon  { font-size:38px;margin-bottom:14px; }
.benefit-title { font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px; }
.benefit-desc  { font-size:14px;color:var(--text-muted);line-height:1.55; }

/* ===========================================
   ABOUT SPLIT
=========================================== */
.about-grid {
  display:grid;grid-template-columns:1fr;gap:44px;align-items:center;
}
@media(min-width:900px){ .about-grid{grid-template-columns:1fr 1fr;} }

.about-img-wrap {
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border-blue);box-shadow:var(--shadow),var(--glow);
}
.about-img { width:100%;height:360px;object-fit:cover; }

.about-content h2 { font-size:30px;font-weight:800;margin-bottom:14px;line-height:1.25; }
@media(min-width:768px){ .about-content h2{font-size:36px;} }
.about-content p { color:var(--text-muted);font-size:15px;line-height:1.7;margin-bottom:16px; }
.about-list li {
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:14px;color:var(--text-2);
}
.about-list li .check { color:var(--blue);font-weight:700;font-size:16px;flex-shrink:0;padding-top:1px; }

/* ===========================================
   TESTIMONIALS
=========================================== */
.testi-grid {
  display:grid;grid-template-columns:repeat(1,1fr);gap:20px;
}
@media(min-width:700px){ .testi-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .testi-grid{grid-template-columns:repeat(3,1fr);} }

.testi-card { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:24px; }
.testi-stars { color:var(--yellow);font-size:16px;margin-bottom:12px; }
.testi-text  { font-size:14px;color:var(--text-2);line-height:1.7;font-style:italic;margin-bottom:16px; }
.testi-author{ display:flex;align-items:center;gap:12px; }
.testi-avatar{ width:42px;height:42px;border-radius:50%;background:var(--bg-card-2);border:2px solid var(--border-blue);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.testi-name  { font-size:14px;font-weight:700;color:var(--text); }
.testi-city  { font-size:12px;color:var(--text-dim); }

/* ===========================================
   INFO STRIP
=========================================== */
.info-strip { background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:44px 0; }
.info-grid  { display:grid;grid-template-columns:1fr;gap:32px; }
@media(min-width:768px){ .info-grid{grid-template-columns:repeat(3,1fr);} }
.info-item  { display:flex;align-items:flex-start;gap:16px; }
.info-icon  { width:48px;height:48px;border-radius:var(--r-sm);background:rgba(56,189,248,0.1);border:1px solid var(--border-blue);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
.info-label { font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px; }
.info-value { font-size:15px;font-weight:600;color:var(--text);margin-bottom:2px; }
.info-sub   { font-size:13px;color:var(--text-muted); }

/* ===========================================
   FOOTER
=========================================== */
.footer { background:#050811;border-top:1px solid var(--border);padding:52px 0 30px; }
.footer-grid { display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:40px; }
@media(min-width:768px){ .footer-grid{grid-template-columns:2.2fr 1fr 1fr;} }

.footer-about h3 { font-size:20px;font-weight:800;background:linear-gradient(135deg,#fff 20%,var(--blue) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:10px; }
.footer-about p   { color:var(--text-muted);font-size:14px;line-height:1.65;margin-bottom:18px; }
.footer-wa-btn {
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;
  background:rgba(22,163,74,0.15);border:1px solid rgba(22,163,74,0.4);
  border-radius:var(--r-md);color:#4ade80;font-size:14px;font-weight:700;
  transition:all 0.2s;
}
.footer-wa-btn:hover { background:rgba(22,163,74,0.25); }

.footer-col h4 { font-size:14px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:16px; }
.footer-links li { margin-bottom:10px; }
.footer-links a  { font-size:14px;color:var(--text-muted);transition:color 0.2s; }
.footer-links a:hover { color:var(--blue); }

.footer-bottom { padding-top:28px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px; }
.footer-copy   { font-size:13px;color:var(--text-dim); }
.footer-copy a { color:var(--blue); }

/* ===========================================
   BREADCRUMB (sub-pages)
=========================================== */
.breadcrumb { padding:14px 0;border-bottom:1px solid var(--border);background:var(--bg-card); }
.breadcrumb-inner { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim); }
.breadcrumb-inner a { color:var(--blue);transition:opacity 0.2s; }
.breadcrumb-inner a:hover { opacity:0.8; }
.breadcrumb-sep { color:var(--text-dim); }

/* ===========================================
   PAGE HERO (sub-pages)
=========================================== */
.page-hero {
  background:
    radial-gradient(circle at 20% 50%,rgba(56,189,248,0.1) 0%,transparent 55%),
    var(--bg-card);
  padding:52px 0;border-bottom:1px solid var(--border);text-align:center;
}
.page-hero-title { font-size:34px;font-weight:800;letter-spacing:-0.02em;margin-bottom:12px; }
@media(min-width:768px){ .page-hero-title{font-size:42px;} }
.page-hero-sub { font-size:16px;color:var(--text-muted);max-width:600px;margin:0 auto; }

/* ===========================================
   UTILITY
=========================================== */
.text-center { text-align:center; }
.mt-6  { margin-top:24px; }
.mt-8  { margin-top:32px; }
.mt-10 { margin-top:40px; }
.mb-4  { margin-bottom:16px; }
.fw-800{ font-weight:800; }
.text-blue-c { color:var(--blue); }
.text-orange-c { color:var(--orange); }