:root{--gold:#f5c451;--bg:#050505;--surface:#0d0d0d;--text:#fff;--muted:#a7a7a7;--line:#3b2d10;--green:#1bd77b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0,#211904,transparent 28%),var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(1150px,92%);margin:auto}.nav{height:68px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;background:#050505dd;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{font-weight:900;font-size:20px}.brand i,.goldText{color:var(--gold);font-style:normal}.brandZ{color:var(--gold);font-size:28px;margin-right:7px}.links{display:flex;gap:20px;font-size:13px;color:#ccc}.gold{border:0;border-radius:11px;padding:12px 17px;background:linear-gradient(135deg,#fff1a0,var(--gold));color:#080808;font-weight:900}.outline{border:1px solid #68531c;background:#111;color:#fff;border-radius:11px;padding:11px 17px;font-weight:800}.hero{min-height:535px;display:grid;grid-template-columns:1fr .85fr;gap:35px;align-items:center}.eyebrow{color:var(--gold);border:1px solid #5d4918;border-radius:99px;padding:6px 11px;font-size:11px;font-weight:800}.hero h1{font-size:clamp(44px,7vw,75px);line-height:.95;margin:18px 0}.hero p{color:var(--muted);font-size:17px;line-height:1.6}.actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}.phoneBox{min-height:420px;border:1px solid #5d4715;border-radius:28px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#151108,#070707);box-shadow:0 30px 90px #000}.phone{width:235px;height:430px;border:8px solid #262626;border-radius:31px;background:#070707;padding:18px 12px;box-shadow:0 20px 50px #000}.notch{width:72px;height:17px;background:#111;border-radius:20px;margin:-13px auto 15px}.pcard{border:1px solid #584619;border-radius:15px;padding:14px;margin:11px 0}.pcard strong{color:var(--gold)}.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mini{border:1px solid #403613;border-radius:9px;padding:8px 2px;text-align:center;font-size:10px}.section{padding:55px 0}.section h2{margin:0 0 7px;font-size:29px}.muted{color:var(--muted)}.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:22px}.cat,.prod,.adv,.promo,.step,.faq details{border:1px solid #292929;background:#0c0c0c;border-radius:16px}.cat{padding:17px 7px;text-align:center}.cat:hover{border-color:var(--gold)}.cat b{display:block;font-size:11px;margin-top:7px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}.prod{padding:17px}.badge{display:inline-block;background:var(--gold);color:#080808;padding:4px 8px;border-radius:99px;font-size:10px;font-weight:900}.prod h3{margin:12px 0 3px}.code{font-size:11px;color:#777}.price{font-size:21px;color:var(--gold);font-weight:950;margin:15px 0}.buy{width:100%;border:1px solid #624d1b;background:#141109;color:#fff;border-radius:10px;padding:10px;font-weight:900}.stock{border:1px solid #493813;background:#0d0d0d;border-radius:20px;padding:20px;margin-top:22px}.stockgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.stockitem{border:1px solid #282828;border-radius:12px;padding:14px;display:flex;justify-content:space-between}.off{color:#aaa}.on{color:var(--green)}.promos{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-top:22px}.promo{padding:23px;background:linear-gradient(120deg,#1b1508,#0c0c0c);min-height:155px}.promo h3{font-size:22px}.advgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:22px}.adv{padding:18px}.adv .ico{font-size:24px}.adv p{color:#999;font-size:13px;line-height:1.5}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:22px}.step{padding:18px;border-left:2px solid var(--gold)}.step b{color:var(--gold)}.bot{padding:27px;border:1px solid #4c3a14;border-radius:22px;background:radial-gradient(circle at 90% 10%,#2a2008,transparent 38%),#0c0c0c}.faq{display:grid;gap:9px;margin-top:20px}.faq details{padding:14px}.faq summary{font-weight:800;cursor:pointer}.faq p{color:#999;line-height:1.5}.footer{border-top:1px solid #2b220e;padding:35px 0 75px;color:#999}.fab{position:fixed;right:17px;bottom:20px;width:48px;height:48px;border-radius:50%;background:#101010;border:1px solid #6a531c;color:var(--gold);z-index:8}.modal{position:fixed;inset:0;background:#000c;backdrop-filter:blur(9px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}.hidden{display:none}.card{width:min(900px,100%);max-height:90vh;overflow:auto;background:#0b0b0b;border:1px solid #4c3a13;border-radius:19px;padding:22px;position:relative;box-shadow:0 30px 90px #000}.login{width:min(400px,100%);text-align:center}.logoZ{font-size:50px;color:var(--gold);font-weight:1000}.x{position:absolute;right:12px;top:8px;border:0;background:none;color:#aaa;font-size:28px}.login input,.field input{width:100%;padding:12px;background:#151515;border:1px solid #353535;color:#fff;border-radius:10px;margin-top:7px}.full{width:100%;margin-top:11px}.login small{display:block;color:#ff6570;margin-top:8px}.head{border-bottom:1px solid #292929;padding-bottom:14px}.head span{display:block;color:#888;font-size:12px}.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0}.tabs button,.row button{border:1px solid #353535;background:#121212;color:#ddd;border-radius:9px;padding:9px}.tabs .active,.row .goldish{border-color:var(--gold);color:var(--gold)}.row{border:1px solid #292929;background:#101010;border-radius:11px;padding:11px;display:flex;justify-content:space-between;gap:10px;align-items:center;margin:8px 0}.actions2{display:flex;gap:7px;flex-wrap:wrap}.form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field label{font-size:12px;color:#aaa}.savebar{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.hint{color:#888;font-size:12px;line-height:1.5}.mobileNav{display:none}@media(max-width:800px){.links{display:none}.hero{grid-template-columns:1fr}.cats{grid-template-columns:repeat(3,1fr)}.products{grid-template-columns:1fr 1fr}.advgrid,.steps{grid-template-columns:1fr 1fr}.promos,.stockgrid{grid-template-columns:1fr}.mobileNav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#080808ee;border-top:1px solid #312610;z-index:7}.mobileNav a{flex:1;text-align:center;padding:9px;font-size:10px;color:#aaa}.mobileNav span{display:block;font-size:16px}.form{grid-template-columns:1fr}}@media(max-width:480px){.products,.advgrid,.steps{grid-template-columns:1fr}.hero h1{font-size:48px}}

/* ZAFF.CELL - Product Image */
.prodImage{
  width:100%;
  aspect-ratio:16/10;
  margin:-4px 0 16px;
  overflow:hidden;
  border-radius:14px;
  background:var(--surface,#0d0d0d);
}

.prodImage img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .3s ease;
}

.prod:hover .prodImage img{
  transform:scale(1.03);
}

@media(max-width:600px){
  .prodImage{
    aspect-ratio:16/10;
    border-radius:12px;
  }
}

/* ZAFF.CELL - Promo Image */
.promoImage{
  width:100%;
  aspect-ratio:16/9;
  margin-bottom:14px;
  overflow:hidden;
  border-radius:14px;
  background:var(--surface,#0d0d0d);
}

.promoImage img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .3s ease;
}

.promo:hover .promoImage img{
  transform:scale(1.03);
}

@media(max-width:600px){
  .promoImage{
    aspect-ratio:16/9;
    border-radius:12px;
  }
}

/* ZAFF.CELL - Hero Banner */
.heroBanner{
  width:100%;
  margin-bottom:24px;
  overflow:hidden;
  border-radius:20px;
  background:var(--surface,#0d0d0d);
}

.heroBanner img{
  width:100%;
  max-height:420px;
  display:block;
  object-fit:cover;
}

@media(max-width:600px){
  .heroBanner{
    border-radius:14px;
    margin-bottom:18px;
  }

  .heroBanner img{
    max-height:260px;
  }
}

/* ===== ZAFF.CELL - KATEGORI PREMIUM ===== */

.categorySection{
  position:relative;
}

.categorySection > h2{
  margin-bottom:6px;
}

.categorySection > .muted{
  margin-bottom:18px;
}

.cats{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:4px 3px 14px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.cats::-webkit-scrollbar{
  display:none;
}

.cats .cat{
  position:relative;
  flex:0 0 145px;
  min-height:125px;
  padding:18px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:9px;
  scroll-snap-align:start;
  transition:all .22s ease;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  user-select:none;
}

.cats .cat:hover{
  transform:translateY(-3px);
  border-color:rgba(245,196,81,.45);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.cats .cat > div:first-child{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  font-size:26px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
}

.cats .cat b{
  font-size:14px;
  line-height:1.3;
}

.cats .cat.active{
  border-color:var(--gold,#f5c451);
  background:linear-gradient(
    145deg,
    rgba(245,196,81,.16),
    rgba(245,196,81,.035)
  );
  box-shadow:
    0 10px 28px rgba(0,0,0,.25),
    0 0 0 1px rgba(245,196,81,.08);
}

.cats .cat.active > div:first-child{
  background:rgba(245,196,81,.14);
  border-color:rgba(245,196,81,.3);
}

@media(max-width:600px){

  .categorySection{
    padding-right:0;
  }

  .categorySection > h2,
  .categorySection > .muted{
    margin-right:14px;
  }

  .cats{
    gap:11px;
    padding-right:14px;
  }

  .cats .cat{
    flex-basis:125px;
    min-height:115px;
    padding:15px 11px;
    border-radius:16px;
  }

  .cats .cat > div:first-child{
    width:45px;
    height:45px;
    border-radius:13px;
    font-size:23px;
  }

  .cats .cat b{
    font-size:13px;
  }
}


/* ===== ZAFF.CELL - PRODUK PREMIUM ===== */

.products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.prod{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.055),
    rgba(255,255,255,.018)
  );
  padding:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.prod:hover{
  transform:translateY(-4px);
  border-color:rgba(245,196,81,.4);
  box-shadow:0 16px 35px rgba(0,0,0,.28);
}

.prodImage{
  width:calc(100% + 32px);
  aspect-ratio:16/10;
  margin:-16px -16px 16px;
  overflow:hidden;
  background:var(--surface,#0d0d0d);
}

.prodImage img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}

.prod:hover .prodImage img{
  transform:scale(1.04);
}

.prod .badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  margin-bottom:9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  background:rgba(245,196,81,.12);
  border:1px solid rgba(245,196,81,.25);
}

.prod h3{
  margin:4px 0 7px;
  font-size:17px;
  line-height:1.25;
}

.prod .code{
  min-height:38px;
  color:var(--muted,#999);
  font-size:12px;
  line-height:1.5;
}

.prod .price{
  margin:14px 0;
  font-size:21px;
  line-height:1;
  font-weight:900;
  color:var(--gold,#f5c451);
}

.prod .buy{
  width:100%;
  min-height:43px;
  border:1px solid rgba(245,196,81,.45);
  border-radius:12px;
  background:linear-gradient(
    135deg,
    rgba(245,196,81,.18),
    rgba(245,196,81,.07)
  );
  color:var(--gold,#f5c451);
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  cursor:pointer;
  transition:all .2s ease;
}

.prod .buy:hover{
  background:var(--gold,#f5c451);
  color:#080808;
  transform:translateY(-1px);
}

.prod .buy:active{
  transform:scale(.98);
}

@media(max-width:900px){
  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
  }
}

@media(max-width:600px){
  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }

  .prod{
    padding:12px;
    border-radius:16px;
  }

  .prodImage{
    width:calc(100% + 24px);
    margin:-12px -12px 12px;
    aspect-ratio:1/1;
  }

  .prod h3{
    font-size:14px;
  }

  .prod .code{
    min-height:34px;
    font-size:10px;
  }

  .prod .price{
    margin:11px 0;
    font-size:17px;
  }

  .prod .buy{
    min-height:39px;
    font-size:10px;
    border-radius:10px;
  }

  .prod .badge{
    font-size:9px;
    padding:4px 7px;
  }
}


/* ===== ADMIN PRODUK PREMIUM ===== */

#panel .row{
  position:relative;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.015)
  );
  border-radius:16px;
  padding:14px;
  margin-bottom:10px;
  transition:border-color .2s ease,transform .2s ease;
}

#panel .row:hover{
  border-color:rgba(245,196,81,.25);
}

#panel .row .actions2{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

#panel .row .actions2 button{
  min-width:38px;
  min-height:36px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:inherit;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

#panel .row .actions2 button:hover{
  border-color:rgba(245,196,81,.4);
  color:var(--gold,#f5c451);
}

#panel .row .actions2 .goldish{
  border-color:rgba(245,196,81,.35);
  color:var(--gold,#f5c451);
}

#panel .row .actions2 button:disabled{
  opacity:.25;
  cursor:not-allowed;
}

#panel .form{
  background:rgba(255,255,255,.018);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:16px;
}

#panel .form .field{
  margin-bottom:14px;
}

#panel .form label{
  display:block;
  margin-bottom:7px;
  font-size:12px;
  font-weight:700;
  opacity:.85;
}

#panel .form input,
#panel .form select,
#panel .form textarea{
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(0,0,0,.25);
  color:inherit;
  outline:none;
}

#panel .form input:focus,
#panel .form select:focus,
#panel .form textarea:focus{
  border-color:rgba(245,196,81,.55);
  box-shadow:0 0 0 3px rgba(245,196,81,.06);
}

#panel .form img{
  border:1px solid rgba(255,255,255,.08);
}

@media(max-width:600px){

  #panel .row{
    padding:12px;
    border-radius:14px;
  }

  #panel .row .actions2{
    justify-content:flex-start;
    margin-top:10px;
  }

  #panel .row .actions2 button{
    min-height:34px;
    padding:6px 9px;
  }

  #panel .form{
    padding:13px;
    border-radius:15px;
  }

  #panel .form input,
  #panel .form select,
  #panel .form textarea{
    min-height:43px;
  }
}


/* ===== TEMA ADMIN PREMIUM ===== */

#panel .form input[id^="f_primary"],
#panel .form input[id^="f_background"],
#panel .form input[id^="f_surface"],
#panel .form input[id^="f_text"],
#panel .form input[id^="f_muted"]{
  min-height:48px;
  border-radius:12px;
  font-family:monospace;
  font-size:14px;
  letter-spacing:.3px;
}

#panel .form input[id^="f_primary"]:focus,
#panel .form input[id^="f_background"]:focus,
#panel .form input[id^="f_surface"]:focus,
#panel .form input[id^="f_text"]:focus,
#panel .form input[id^="f_muted"]:focus{
  border-color:var(--gold,#f5c451);
  box-shadow:0 0 0 3px rgba(245,196,81,.08);
}



/* ZAFF.CELL CATEGORY IMAGE */

.catMedia{
  width:58px;
  height:58px;
  margin:0 auto;
  border-radius:15px;
  overflow:hidden;
  border:1px solid #3d3218;
  background:linear-gradient(145deg,#17130a,#090909);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px #0008;
}

.catMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.catMedia span{
  font-size:27px;
  line-height:1;
}

.cats .cat{
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.cats .cat:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px #0008;
}

.cats .cat.active .catMedia{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 10px 28px #0009;
}

.category-edit-image{
  margin:15px 0;
  padding:16px;
  border:1px solid #292929;
  border-radius:15px;
  background:#0d0d0d;
}

.category-edit-preview{
  width:110px;
  height:110px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #4c3a14;
  background:#151515;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.category-edit-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.category-edit-preview span{
  font-size:45px;
}

.category-image-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.upload-label{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

.upload-label input{
  display:none;
}

.mini img{
  width:30px;
  height:30px;
  object-fit:cover;
  border-radius:7px;
  vertical-align:middle;
}

@media(max-width:480px){
  .catMedia{
    width:50px;
    height:50px;
  }

  .catMedia span{
    font-size:23px;
  }

  .category-edit-preview{
    width:95px;
    height:95px;
  }
}

/* ICON KATEGORI DI BAWAH GAMBAR */
.catIcon{
  margin:8px auto 5px;
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#17130a;
  border:1px solid #4c3a14;
  font-size:17px;
  line-height:1;
  box-shadow:0 5px 14px #0008;
}

.cats .cat.active .catIcon{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 5px 14px #0008;
}

/* ICON KATEGORI DI BAWAH GAMBAR */
.catIcon{
  margin:8px auto 5px;
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#17130a;
  border:1px solid #4c3a14;
  font-size:17px;
  line-height:1;
  box-shadow:0 5px 14px #0008;
}

.cats .cat.active .catIcon{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),0 5px 14px #0008;
}

@media(max-width:480px){
  .catIcon{
    width:29px;
    height:29px;
    font-size:16px;
  }
}

/* =========================================
   KATEGORI HOMEPAGE — 2 KOLOM MOBILE
   ========================================= */

.cats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.cats .cat{
  min-width:0;
  padding:15px 10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:150px;
}

.cats .catMedia{
  width:82px;
  height:82px;
  margin:0 auto 7px;
  border-radius:16px;
}

.cats .catMedia span{
  font-size:32px;
}

.cats .catIcon{
  margin:4px auto 6px;
}

.cats .cat b{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}

@media(min-width:700px){
  .cats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(min-width:1000px){
  .cats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:480px){
  .cats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .cats .cat{
    min-height:135px;
    padding:12px 8px;
  }

  .cats .catMedia{
    width:68px;
    height:68px;
    border-radius:14px;
  }

  .cats .catMedia span{
    font-size:28px;
  }

  .cats .cat b{
    font-size:13px;
  }
}


/* =====================================================
   ZAFF.CELL THEME TOGGLE
   ===================================================== */

:root{
  --theme-bg:#050505;
  --theme-surface:#0d0d0d;
  --theme-text:#ffffff;
  --theme-muted:#a7a7a7;
  --theme-border:rgba(255,255,255,.10);
}

html[data-theme="light"]{
  --theme-bg:#f6f3ed;
  --theme-surface:#ffffff;
  --theme-text:#171717;
  --theme-muted:#66615a;
  --theme-border:rgba(20,20,20,.10);
}

html[data-theme="light"] body{
  background:var(--theme-bg);
  color:var(--theme-text);
}

html[data-theme="light"] .section,
html[data-theme="light"] .card,
html[data-theme="light"] .product,
html[data-theme="light"] .category,
html[data-theme="light"] .promo,
html[data-theme="light"] .faq,
html[data-theme="light"] .bot,
html[data-theme="light"] .adv,
html[data-theme="light"] .step{
  background:var(--theme-surface);
  color:var(--theme-text);
  border-color:var(--theme-border);
}

html[data-theme="light"] .muted,
html[data-theme="light"] .hint,
html[data-theme="light"] small{
  color:var(--theme-muted);
}

html[data-theme="light"] .nav{
  background:rgba(246,243,237,.92);
  border-bottom-color:var(--theme-border);
}

html[data-theme="light"] .links a{
  color:var(--theme-text);
}

html[data-theme="light"] .hero{
  color:var(--theme-text);
}

html[data-theme="light"] .themeToggle{
  background:#ffffff;
  color:#171717;
  border-color:rgba(20,20,20,.12);
}

.navActions{
  display:flex;
  align-items:center;
  gap:8px;
}

.themeToggle{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#111;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

.themeToggle:hover{
  transform:translateY(-1px);
}

@media(max-width:600px){
  .navActions{
    gap:6px;
  }

  .themeToggle{
    width:38px;
    height:38px;
    font-size:17px;
  }
}
/* =========================================================
   ZAFF.CELL — LIGHT MODE PREMIUM
   Ivory + Champagne Gold
   ========================================================= */

:root {
  --zaff-ivory: #f7f3ea;
  --zaff-ivory-soft: #fbf9f4;
  --zaff-card: #fffdf8;
  --zaff-gold: #c9a227;
  --zaff-gold-dark: #a88416;
  --zaff-gold-soft: #eadcae;
  --zaff-text: #25231f;
  --zaff-text-soft: #706b60;
  --zaff-border: rgba(166, 137, 48, 0.18);
  --zaff-shadow: 0 10px 30px rgba(72, 58, 25, 0.08);
}

/* Light mode */
html:not(.dark),
body:not(.dark),
body.light-mode {
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(201, 162, 39, 0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      var(--zaff-ivory-soft) 0%,
      var(--zaff-ivory) 100%
    ) !important;

  color: var(--zaff-text);
}

/* Main containers */
html:not(.dark) .container,
body:not(.dark) .container,
body.light-mode .container {
  color: var(--zaff-text);
}

/* Cards */
html:not(.dark) .card,
html:not(.dark) .product-card,
html:not(.dark) .category-card,
html:not(.dark) .box,
body.light-mode .card,
body.light-mode .product-card,
body.light-mode .category-card,
body.light-mode .box {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--zaff-border);
  box-shadow: var(--zaff-shadow);
}

/* Headings */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {
  color: var(--zaff-text);
}

/* Secondary text */
html:not(.dark) p,
html:not(.dark) .muted,
html:not(.dark) .description,
html:not(.dark) small,
body.light-mode p,
body.light-mode .muted,
body.light-mode .description,
body.light-mode small {
  color: var(--zaff-text-soft);
}

/* Gold accents */
html:not(.dark) .gold,
html:not(.dark) .price,
html:not(.dark) .accent,
body.light-mode .gold,
body.light-mode .price,
body.light-mode .accent {
  color: var(--zaff-gold-dark);
}

/* Buttons */
html:not(.dark) button,
html:not(.dark) .btn,
body.light-mode button,
body.light-mode .btn {
  border-color: var(--zaff-border);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* Primary / gold buttons */
html:not(.dark) .btn-primary,
html:not(.dark) .primary,
html:not(.dark) button.primary,
body.light-mode .btn-primary,
body.light-mode .primary,
body.light-mode button.primary {
  background: linear-gradient(
    135deg,
    #d8b943,
    var(--zaff-gold)
  );
  color: #fffdf5;
  border: 1px solid rgba(139, 108, 17, 0.35);
  box-shadow:
    0 7px 18px rgba(166, 130, 22, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Button hover */
html:not(.dark) .btn-primary:hover,
html:not(.dark) .primary:hover,
body.light-mode .btn-primary:hover,
body.light-mode .primary:hover {
  background: linear-gradient(
    135deg,
    #e1c34e,
    #b9931d
  );
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(166, 130, 22, 0.24);
}

/* Inputs */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
  background: #fffdf8;
  color: var(--zaff-text);
  border: 1px solid rgba(166, 137, 48, 0.22);
  box-shadow: inset 0 1px 3px rgba(70, 55, 20, 0.03);
}

/* Input focus */
html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus,
body.light-mode input:focus,
body.light-mode textarea:focus,
body.light-mode select:focus {
  outline: none;
  border-color: rgba(201, 162, 39, 0.65);
  box-shadow:
    0 0 0 3px rgba(201, 162, 39, 0.10);
}

/* Product price */
html:not(.dark) .product-price,
body.light-mode .product-price {
  color: #a88416;
  font-weight: 700;
}

/* Product badge — tetap dipertahankan */
html:not(.dark) .badge,
html:not(.dark) .product-badge,
body.light-mode .badge,
body.light-mode .product-badge {
  border: 1px solid rgba(201, 162, 39, 0.28);
  box-shadow: 0 4px 12px rgba(100, 80, 20, 0.08);
}

/* Header */
html:not(.dark) header,
html:not(.dark) .header,
body.light-mode header,
body.light-mode .header {
  background: rgba(255, 253, 248, 0.88);
  border-bottom: 1px solid var(--zaff-border);
  box-shadow: 0 5px 20px rgba(70, 55, 20, 0.05);
  backdrop-filter: blur(12px);
}

/* Navigation */
html:not(.dark) nav a,
body.light-mode nav a {
  color: var(--zaff-text-soft);
}

html:not(.dark) nav a:hover,
body.light-mode nav a:hover {
  color: var(--zaff-gold-dark);
}

/* Gold divider */
html:not(.dark) hr,
body.light-mode hr {
  border: 0;
  border-top: 1px solid var(--zaff-border);
}

/* Soft gold highlight */
html:not(.dark) .gold-soft,
body.light-mode .gold-soft {
  background: linear-gradient(
    135deg,
    rgba(234, 220, 174, 0.38),
    rgba(201, 162, 39, 0.07)
  );
  border: 1px solid rgba(201, 162, 39, 0.16);
}

/* Smooth premium feel */
html:not(.dark) *,
body.light-mode * {
  scrollbar-color: #d0b044 #f2eee5;
}

/* Mobile polish */
@media (max-width: 600px) {
  html:not(.dark) .card,
  html:not(.dark) .product-card,
  body.light-mode .card,
  body.light-mode .product-card {
    border-radius: 16px;
    box-shadow: 0 7px 22px rgba(72, 58, 25, 0.07);
  }

  html:not(.dark) button,
  html:not(.dark) .btn,
  body.light-mode button,
  body.light-mode .btn {
    border-radius: 12px;
  }
}
++

/* =========================================================
   ZAFF.CELL — PREMIUM IVORY + GOLD LIGHT MODE
   ========================================================= */

html[data-theme="light"] {
  --theme-bg: #f7f3ea;
  --theme-surface: #fffdf8;
  --theme-text: #25231f;
  --theme-muted: #756f63;
  --theme-border: rgba(166, 137, 48, .18);
  --theme-gold: #b89220;
}

/* Background utama */
html[data-theme="light"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(201,162,39,.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #fbf9f4 0%,
      #f7f3ea 100%
    ) !important;

  color: var(--theme-text);
}

/* Header */
html[data-theme="light"] .nav {
  background: rgba(255,253,248,.90);
  border-bottom: 1px solid var(--theme-border);
  box-shadow: 0 5px 22px rgba(70,55,20,.06);
}

/* Brand */
html[data-theme="light"] .brand,
html[data-theme="light"] .links a {
  color: var(--theme-text);
}

/* Gold text */
html[data-theme="light"] .goldText,
html[data-theme="light"] .brandZ,
html[data-theme="light"] .price,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .step b {
  color: var(--theme-gold);
}

/* Cards */
html[data-theme="light"] .cat,
html[data-theme="light"] .prod,
html[data-theme="light"] .adv,
html[data-theme="light"] .promo,
html[data-theme="light"] .step,
html[data-theme="light"] .faq details {
  background: rgba(255,253,248,.92);
  border-color: var(--theme-border);
  box-shadow: 0 8px 25px rgba(72,58,25,.055);
}

/* Product badge — tetap dipertahankan */
html[data-theme="light"] .badge {
  background: linear-gradient(135deg,#dfc45c,#c9a227);
  color: #fffdf5;
  box-shadow: 0 4px 12px rgba(150,115,20,.12);
}

/* Tombol gold */
html[data-theme="light"] .gold {
  background: linear-gradient(
    135deg,
    #dfc45c,
    #c9a227
  );
  color: #fffdf5;
  border: 1px solid rgba(139,108,17,.28);
  box-shadow:
    0 7px 18px rgba(166,130,22,.16);
}

/* Tombol outline */
html[data-theme="light"] .outline,
html[data-theme="light"] .buy {
  background: #fffdf8;
  color: #332f27;
  border-color: rgba(166,137,48,.30);
}

/* Tombol beli */
html[data-theme="light"] .buy {
  transition: .2s ease;
}

html[data-theme="light"] .buy:hover,
html[data-theme="light"] .gold:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(166,130,22,.20);
}

/* Stock */
html[data-theme="light"] .stock {
  background: rgba(255,253,248,.90);
  border-color: var(--theme-border);
}

/* Promo */
html[data-theme="light"] .promo {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(201,162,39,.10),
      transparent 38%
    ),
    #fffdf8;
}

/* Bot */
html[data-theme="light"] .bot {
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(201,162,39,.10),
      transparent 38%
    ),
    #fffdf8;
  border-color: var(--theme-border);
}

/* Floating admin */
html[data-theme="light"] .fab {
  background: #fffdf8;
  color: var(--theme-gold);
  border-color: rgba(166,137,48,.30);
  box-shadow: 0 8px 22px rgba(72,58,25,.10);
}

/* Mobile navigation */
html[data-theme="light"] .mobileNav {
  background: rgba(255,253,248,.94);
  border-top-color: var(--theme-border);
  box-shadow: 0 -5px 20px rgba(70,55,20,.06);
}

html[data-theme="light"] .mobileNav a {
  color: #756f63;
}

/* Input / form Admin */
html[data-theme="light"] .login input,
html[data-theme="light"] .field input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #fffdf8;
  color: var(--theme-text);
  border-color: var(--theme-border);
}

/* Admin panel */
html[data-theme="light"] .card {
  background: #fffdf8;
  border-color: var(--theme-border);
  box-shadow: 0 25px 70px rgba(55,45,25,.14);
}

html[data-theme="light"] .row,
html[data-theme="light"] .tabs button {
  background: #faf7ef;
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="light"] .tabs .active,
html[data-theme="light"] .row .goldish {
  border-color: var(--theme-gold);
  color: var(--theme-gold);
}

/* Login modal */
html[data-theme="light"] .modal {
  background: rgba(45,39,27,.38);
}

/* Phone preview tetap premium */
html[data-theme="light"] .phoneBox {
  background:
    linear-gradient(145deg,#eee3c5,#faf7ef);
  border-color: rgba(166,137,48,.25);
  box-shadow: 0 25px 70px rgba(72,58,25,.12);
}

/* Footer */
html[data-theme="light"] .footer {
  border-top-color: var(--theme-border);
  color: var(--theme-muted);
}


/* =========================================================
   ZAFF.CELL — FIX LIGHT MODE CORE COLORS
   ========================================================= */

html[data-theme="light"] {
  --bg: #f7f3ea;
  --surface: #fffdf8;
  --text: #25231f;
  --muted: #756f63;
  --line: rgba(166,137,48,.18);
  --gold: #b89220;
}

/* Seluruh halaman */
html[data-theme="light"] body {
  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(201,162,39,.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #fbf9f4 0%,
      #f7f3ea 100%
    ) !important;

  color: #25231f !important;
}

/* Semua teks utama */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] b,
html[data-theme="light"] strong {
  color: #25231f;
}

/* Section */
html[data-theme="light"] .section {
  color: #25231f;
}

/* Kategori */
html[data-theme="light"] .cat,
html[data-theme="light"] .prod,
html[data-theme="light"] .adv,
html[data-theme="light"] .promo,
html[data-theme="light"] .step,
html[data-theme="light"] .faq details,
html[data-theme="light"] .stock {
  background: #fffdf8 !important;
  color: #25231f;
}

/* Product card */
html[data-theme="light"] .prod h3 {
  color: #25231f;
}

html[data-theme="light"] .code {
  color: #817a6d;
}

/* Muted text */
html[data-theme="light"] .muted,
html[data-theme="light"] .hero p,
html[data-theme="light"] .adv p,
html[data-theme="light"] .faq p {
  color: #756f63 !important;
}

/* Kartu kategori */
html[data-theme="light"] .cat:hover {
  border-color: #c9a227;
  box-shadow: 0 8px 25px rgba(166,137,48,.10);
}

/* Navigation */
html[data-theme="light"] .nav {
  background: rgba(255,253,248,.94) !important;
}

/* Tombol outline */
html[data-theme="light"] .outline {
  background: #fffdf8 !important;
  color: #332f27 !important;
}

/* Tombol beli */
html[data-theme="light"] .buy {
  background: #fffaf0 !important;
  color: #332f27 !important;
}

/* Live Stock item */
html[data-theme="light"] .stockitem {
  background: #faf7ef;
  border-color: rgba(166,137,48,.16);
}

/* Footer */
html[data-theme="light"] .footer {
  color: #756f63;
}

/* Mobile navigation */
html[data-theme="light"] .mobileNav {
  background: rgba(255,253,248,.96) !important;
}

html[data-theme="light"] .mobileNav a {
  color: #756f63;
}


/* =========================================================
   ZAFF.CELL — LIGHT MODE PREMIUM IVORY + GOLD
   ========================================================= */

html[data-theme="light"] {
  --bg: #f5f0e6 !important;
  --background: #f5f0e6 !important;
  --surface: #fffdf8 !important;
  --text: #29261f !important;
  --muted: #756e61 !important;
  --line: rgba(167, 132, 38, .20) !important;
  --gold: #b58a1f !important;
}

/* HALAMAN */
html[data-theme="light"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(212,174,76,.10), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(212,174,76,.08), transparent 25%),
    #f5f0e6 !important;
  color: #29261f !important;
}

/* NAVBAR */
html[data-theme="light"] .nav {
  background: rgba(255,253,248,.94) !important;
  border-bottom: 1px solid rgba(167,132,38,.20) !important;
  box-shadow: 0 4px 20px rgba(80,60,20,.06) !important;
}

html[data-theme="light"] .logo,
html[data-theme="light"] .links a {
  color: #29261f !important;
}

/* SEMUA SECTION */
html[data-theme="light"] section {
  color: #29261f !important;
}

/* KARTU */
html[data-theme="light"] .cat,
html[data-theme="light"] .prod,
html[data-theme="light"] .adv,
html[data-theme="light"] .promo,
html[data-theme="light"] .step,
html[data-theme="light"] .faq details,
html[data-theme="light"] .card,
html[data-theme="light"] .row,
html[data-theme="light"] .phoneBox {
  background: #fffdf8 !important;
  color: #29261f !important;
  border-color: rgba(167,132,38,.20) !important;
  box-shadow: 0 8px 28px rgba(76,57,20,.07) !important;
}

/* JUDUL */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] strong {
  color: #29261f !important;
}

/* TEKS */
html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] label,
html[data-theme="light"] .hint,
html[data-theme="light"] small {
  color: #756e61;
}

/* HARGA */
html[data-theme="light"] .price {
  color: #a77b12 !important;
}

/* BADGE — TETAP ADA */
html[data-theme="light"] .badge {
  background: #f1dfaa !important;
  color: #76550b !important;
  border-color: rgba(167,132,38,.25) !important;
}

/* TOMBOL GOLD */
html[data-theme="light"] .gold,
html[data-theme="light"] .buy {
  background: linear-gradient(135deg,#c9a13a,#a77b12) !important;
  color: #fff !important;
  border-color: #a77b12 !important;
}

/* OUTLINE */
html[data-theme="light"] .outline {
  background: #fffdf8 !important;
  color: #9a7115 !important;
  border-color: rgba(167,132,38,.40) !important;
}

/* STOCK */
html[data-theme="light"] .stock {
  background: #fffdf8 !important;
  color: #29261f !important;
  border-color: rgba(167,132,38,.20) !important;
}

/* PROMO / BOT */
html[data-theme="light"] .promo,
html[data-theme="light"] .bot {
  background: linear-gradient(145deg,#fffdf8,#f8f0dc) !important;
  color: #29261f !important;
}

/* FOOTER */
html[data-theme="light"] footer,
html[data-theme="light"] .footer {
  background: #eee7d9 !important;
  color: #756e61 !important;
  border-top: 1px solid rgba(167,132,38,.18) !important;
}

/* MOBILE NAV */
html[data-theme="light"] .mobileNav {
  background: rgba(255,253,248,.97) !important;
  border-top: 1px solid rgba(167,132,38,.20) !important;
  box-shadow: 0 -6px 25px rgba(76,57,20,.08) !important;
}

/* ADMIN */
html[data-theme="light"] .tabs button {
  background: #fffdf8 !important;
  color: #756e61 !important;
  border-color: rgba(167,132,38,.20) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #fffdf8 !important;
  color: #29261f !important;
  border-color: rgba(167,132,38,.25) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #9b9487 !important;
}

/* MODAL */
html[data-theme="light"] .modal {
  background: rgba(50,40,20,.35) !important;
}

html[data-theme="light"] .modal > div,
html[data-theme="light"] .modal .card {
  background: #fffdf8 !important;
  color: #29261f !important;
}

/* TOGGLE */
html[data-theme="light"] .themeToggle {
  background: #f3ead4 !important;
  color: #795b12 !important;
  border-color: rgba(167,132,38,.30) !important;
}


/* =========================================================
   ZAFF.CELL — FINAL PREMIUM THEME
   DARK = BLACK + CHAMPAGNE GOLD
   LIGHT = IVORY + GOLD
   ========================================================= */

/* ---------- DARK MODE ---------- */

html[data-theme="dark"] {
  --bg: #050505 !important;
  --background: #050505 !important;
  --surface: #0d0d0d !important;
  --text: #f8f5ed !important;
  --muted: #aaa59a !important;
  --line: rgba(212,175,55,.18) !important;
  --gold: #d4af37 !important;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% -10%, rgba(212,175,55,.055), transparent 32%),
    #050505 !important;
  color: #f8f5ed !important;
}

/* NAV */
html[data-theme="dark"] .nav {
  background: rgba(5,5,5,.96) !important;
  border-bottom: 1px solid rgba(212,175,55,.16) !important;
  box-shadow: 0 4px 25px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] .logo,
html[data-theme="dark"] .links a {
  color: #f8f5ed !important;
}

/* HERO + SECTION */
html[data-theme="dark"] section,
html[data-theme="dark"] .hero {
  color: #f8f5ed !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong {
  color: #f8f5ed !important;
}

/* SECONDARY TEXT */
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .hint {
  color: #aaa59a;
}

/* CARDS */
html[data-theme="dark"] .cat,
html[data-theme="dark"] .prod,
html[data-theme="dark"] .adv,
html[data-theme="dark"] .promo,
html[data-theme="dark"] .step,
html[data-theme="dark"] .faq details,
html[data-theme="dark"] .card,
html[data-theme="dark"] .row,
html[data-theme="dark"] .phoneBox,
html[data-theme="dark"] .stock,
html[data-theme="dark"] .bot {
  background: #0d0d0d !important;
  color: #f8f5ed !important;
  border-color: rgba(212,175,55,.16) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}

/* CARD SECONDARY */
html[data-theme="dark"] .cat:hover,
html[data-theme="dark"] .prod:hover,
html[data-theme="dark"] .adv:hover {
  background: #121212 !important;
  border-color: rgba(212,175,55,.30) !important;
}

/* PRICE */
html[data-theme="dark"] .price {
  color: #e1bd55 !important;
}

/* BADGE */
html[data-theme="dark"] .badge {
  background: rgba(212,175,55,.14) !important;
  color: #e6c45e !important;
  border: 1px solid rgba(212,175,55,.28) !important;
}

/* GOLD BUTTON */
html[data-theme="dark"] .gold,
html[data-theme="dark"] .buy {
  background: linear-gradient(135deg,#e0bd58,#b88b20) !important;
  color: #100e09 !important;
  border-color: #c39a2d !important;
  font-weight: 700 !important;
}

/* OUTLINE */
html[data-theme="dark"] .outline {
  background: #0d0d0d !important;
  color: #d8b64c !important;
  border-color: rgba(212,175,55,.38) !important;
}

/* INPUT */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0b0b0b !important;
  color: #f8f5ed !important;
  border-color: rgba(212,175,55,.20) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #77736b !important;
}

/* FOOTER */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
  background: #030303 !important;
  color: #aaa59a !important;
  border-top: 1px solid rgba(212,175,55,.14) !important;
}

/* MOBILE NAV */
html[data-theme="dark"] .mobileNav {
  background: rgba(5,5,5,.98) !important;
  border-top: 1px solid rgba(212,175,55,.16) !important;
}

/* TABS */
html[data-theme="dark"] .tabs button {
  background: #0d0d0d !important;
  color: #aaa59a !important;
  border-color: rgba(212,175,55,.18) !important;
}

html[data-theme="dark"] .tabs button.active {
  color: #e1bd55 !important;
  border-color: rgba(212,175,55,.45) !important;
}

/* TOGGLE */
html[data-theme="dark"] .themeToggle {
  background: #111 !important;
  color: #e1bd55 !important;
  border-color: rgba(212,175,55,.28) !important;
}


/* =========================================================
   LIGHT MODE — IVORY + GOLD
   ========================================================= */

html[data-theme="light"] {
  --bg: #f5f0e6 !important;
  --background: #f5f0e6 !important;
  --surface: #fffdf8 !important;
  --text: #29261f !important;
  --muted: #756e61 !important;
  --line: rgba(167,123,18,.18) !important;
  --gold: #a77b12 !important;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(194,153,48,.09), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(194,153,48,.07), transparent 25%),
    #f5f0e6 !important;
  color: #29261f !important;
}

/* NAV */
html[data-theme="light"] .nav {
  background: rgba(255,253,248,.96) !important;
  border-bottom: 1px solid rgba(167,123,18,.18) !important;
  box-shadow: 0 5px 25px rgba(90,65,20,.07) !important;
}

html[data-theme="light"] .logo,
html[data-theme="light"] .links a {
  color: #29261f !important;
}

/* HERO + SECTION */
html[data-theme="light"] section,
html[data-theme="light"] .hero {
  color: #29261f !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] strong {
  color: #29261f !important;
}

/* SECONDARY TEXT */
html[data-theme="light"] p,
html[data-theme="light"] span,
html[data-theme="light"] label,
html[data-theme="light"] small,
html[data-theme="light"] .hint {
  color: #756e61;
}

/* CARDS */
html[data-theme="light"] .cat,
html[data-theme="light"] .prod,
html[data-theme="light"] .adv,
html[data-theme="light"] .promo,
html[data-theme="light"] .step,
html[data-theme="light"] .faq details,
html[data-theme="light"] .card,
html[data-theme="light"] .row,
html[data-theme="light"] .phoneBox,
html[data-theme="light"] .stock,
html[data-theme="light"] .bot {
  background: #fffdf8 !important;
  color: #29261f !important;
  border-color: rgba(167,123,18,.18) !important;
  box-shadow: 0 10px 28px rgba(90,65,20,.07) !important;
}

/* PRICE */
html[data-theme="light"] .price {
  color: #946c0b !important;
}

/* BADGE */
html[data-theme="light"] .badge {
  background: #f1dfaa !important;
  color: #74550b !important;
  border: 1px solid rgba(167,123,18,.24) !important;
}

/* GOLD BUTTON */
html[data-theme="light"] .gold,
html[data-theme="light"] .buy {
  background: linear-gradient(135deg,#c9a13a,#9f7510) !important;
  color: #fffdf8 !important;
  border-color: #a77b12 !important;
  font-weight: 700 !important;
}

/* OUTLINE */
html[data-theme="light"] .outline {
  background: #fffdf8 !important;
  color: #8d670b !important;
  border-color: rgba(167,123,18,.36) !important;
}

/* INPUT */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #fffdf8 !important;
  color: #29261f !important;
  border-color: rgba(167,123,18,.24) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #9a9285 !important;
}

/* FOOTER */
html[data-theme="light"] footer,
html[data-theme="light"] .footer {
  background: #ebe3d4 !important;
  color: #756e61 !important;
  border-top: 1px solid rgba(167,123,18,.16) !important;
}

/* MOBILE NAV */
html[data-theme="light"] .mobileNav {
  background: rgba(255,253,248,.98) !important;
  border-top: 1px solid rgba(167,123,18,.18) !important;
  box-shadow: 0 -5px 25px rgba(90,65,20,.07) !important;
}

/* TABS */
html[data-theme="light"] .tabs button {
  background: #fffdf8 !important;
  color: #756e61 !important;
  border-color: rgba(167,123,18,.18) !important;
}

html[data-theme="light"] .tabs button.active {
  color: #8d670b !important;
  border-color: rgba(167,123,18,.40) !important;
}

/* TOGGLE */
html[data-theme="light"] .themeToggle {
  background: #f1e6c9 !important;
  color: #795b0d !important;
  border-color: rgba(167,123,18,.28) !important;
}


/* =========================================================
   MODAL — MENYESUAIKAN TEMA
   ========================================================= */

html[data-theme="dark"] .modal {
  background: rgba(0,0,0,.72) !important;
}

html[data-theme="dark"] .modal > div,
html[data-theme="dark"] .modal .card {
  background: #0d0d0d !important;
  color: #f8f5ed !important;
}

html[data-theme="light"] .modal {
  background: rgba(45,35,15,.35) !important;
}

html[data-theme="light"] .modal > div,
html[data-theme="light"] .modal .card {
  background: #fffdf8 !important;
  color: #29261f !important;
}


/* =========================================================
   LINK / ICON / TEXT COLOR SAFETY
   ========================================================= */

html[data-theme="dark"] a {
  color: #d8b64c;
}

html[data-theme="light"] a {
  color: #8d670b;
}

html[data-theme="dark"] .gold *,
html[data-theme="dark"] .buy *,
html[data-theme="light"] .gold *,
html[data-theme="light"] .buy * {
  color: inherit !important;
}


.installApp{
  position:fixed;
  right:16px;
  bottom:82px;
  z-index:9999;
  border:1px solid rgba(201,164,92,.55);
  border-radius:999px;
  padding:11px 17px;
  background:linear-gradient(135deg,#c9a45c,#ead49a);
  color:#111;
  font-weight:700;
  font-size:13px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  cursor:pointer;
  transition:.2s ease;
}

.installApp:hover{
  transform:translateY(-2px);
}

.installApp[hidden]{
  display:none;
}

[data-theme="light"] .installApp{
  box-shadow:0 8px 24px rgba(70,50,20,.16);
}


/* =========================================================
   ZAFF.CELL — LUXURY HOME V1
   VISUAL ONLY — NO FUNCTION CHANGES
   ========================================================= */

/* ---------- PREMIUM SURFACE ---------- */

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% -10%, rgba(201,164,92,.13), transparent 34%),
    radial-gradient(circle at 100% 35%, rgba(201,164,92,.055), transparent 28%),
    linear-gradient(180deg,#080808 0%,#0b0b0b 48%,#070707 100%) !important;
}

html[data-theme="dark"] body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.12;
  background:
    linear-gradient(125deg,transparent 0 43%,rgba(255,255,255,.10) 44%,transparent 45%),
    linear-gradient(35deg,transparent 0 62%,rgba(201,164,92,.08) 63%,transparent 64%);
}

/* ---------- HEADER ---------- */

html[data-theme="dark"] .nav {
  background:linear-gradient(180deg,rgba(18,18,18,.94),rgba(9,9,9,.88)) !important;
  border:1px solid rgba(201,164,92,.28) !important;
  box-shadow:
    0 10px 35px rgba(0,0,0,.38),
    0 0 25px rgba(201,164,92,.055) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.brand {
  letter-spacing:.02em;
}

.brandZ {
  filter:
    drop-shadow(0 0 8px rgba(201,164,92,.35))
    drop-shadow(0 5px 10px rgba(0,0,0,.5));
}

html[data-theme="dark"] .links a {
  transition:.2s ease;
}

html[data-theme="dark"] .links a:hover {
  color:#f1d48c !important;
  text-shadow:0 0 14px rgba(201,164,92,.28);
}

/* ---------- HERO ---------- */

html[data-theme="dark"] .hero {
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(201,164,92,.26);
  background:
    radial-gradient(circle at 78% 45%,rgba(201,164,92,.18),transparent 24%),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.035),transparent 25%),
    linear-gradient(135deg,#111 0%,#080808 52%,#15110a 100%) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 0 50px rgba(201,164,92,.035);
}

html[data-theme="dark"] .hero::before {
  content:"";
  position:absolute;
  inset:-30%;
  pointer-events:none;
  background:
    linear-gradient(125deg,
      transparent 38%,
      rgba(255,255,255,.045) 39%,
      transparent 40%,
      transparent 62%,
      rgba(201,164,92,.08) 63%,
      transparent 64%);
  transform:rotate(-4deg);
}

html[data-theme="dark"] .hero::after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-100px;
  top:-110px;
  border-radius:50%;
  background:rgba(201,164,92,.10);
  filter:blur(60px);
  pointer-events:none;
}

.hero > * {
  position:relative;
  z-index:1;
}

html[data-theme="dark"] .eyebrow {
  border:1px solid rgba(201,164,92,.30);
  background:rgba(201,164,92,.08);
  box-shadow:0 0 20px rgba(201,164,92,.06);
}

/* ---------- CATEGORY CARDS ---------- */

html[data-theme="dark"] .cats {
  gap:14px;
  padding:6px;
}

html[data-theme="dark"] .cat {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(201,164,92,.22) !important;
  border-radius:20px !important;
  background:
    linear-gradient(145deg,rgba(25,25,25,.96),rgba(9,9,9,.96)) !important;
  box-shadow:
    0 10px 25px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

html[data-theme="dark"] .cat::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(201,164,92,.08),transparent 42%);
  pointer-events:none;
}

html[data-theme="dark"] .cat:hover,
html[data-theme="dark"] .cat.active {
  transform:translateY(-3px);
  border-color:rgba(201,164,92,.55) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.32),
    0 0 22px rgba(201,164,92,.10),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .catIcon {
  filter:drop-shadow(0 0 8px rgba(201,164,92,.22));
}

/* ---------- SECTION HEADINGS ---------- */

html[data-theme="dark"] .section {
  position:relative;
}

html[data-theme="dark"] .section h2 {
  letter-spacing:-.02em;
}

html[data-theme="dark"] .section h2::first-letter {
  color:#e7c875;
}

/* ---------- PROMO ---------- */

html[data-theme="dark"] .promo {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(201,164,92,.30) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 85% 50%,rgba(201,164,92,.14),transparent 30%),
    linear-gradient(135deg,#15120d,#090909 55%,#111 100%) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .promo::after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  top:-70px;
  border-radius:50%;
  border:1px solid rgba(201,164,92,.20);
  box-shadow:0 0 40px rgba(201,164,92,.08);
  pointer-events:none;
}

/* ---------- PRODUCT GRID ---------- */

html[data-theme="dark"] .pcard {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(201,164,92,.23) !important;
  border-radius:22px !important;
  background:
    linear-gradient(145deg,#151515,#0a0a0a 72%,#111 100%) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

html[data-theme="dark"] .pcard::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(145deg,rgba(201,164,92,.08),transparent 32%);
}

html[data-theme="dark"] .pcard:hover {
  transform:translateY(-4px);
  border-color:rgba(201,164,92,.50) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.38),
    0 0 24px rgba(201,164,92,.08) !important;
}

html[data-theme="dark"] .prodImage {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.45));
}

html[data-theme="dark"] .badge {
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* ---------- GOLD BUTTONS ---------- */

html[data-theme="dark"] .gold,
html[data-theme="dark"] .buy {
  background:
    linear-gradient(135deg,#c9a45c 0%,#ead49a 48%,#bd9344 100%) !important;
  color:#17130b !important;
  border:1px solid rgba(255,226,151,.55) !important;
  box-shadow:
    0 7px 18px rgba(201,164,92,.16),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
  transition:.2s ease;
}

html[data-theme="dark"] .gold:hover,
html[data-theme="dark"] .buy:hover {
  transform:translateY(-2px);
  box-shadow:
    0 10px 24px rgba(201,164,92,.24),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* ---------- LIVE STOCK ---------- */

html[data-theme="dark"] .stock {
  border:1px solid rgba(201,164,92,.25) !important;
  border-radius:22px !important;
  background:
    linear-gradient(135deg,rgba(20,20,20,.98),rgba(9,9,9,.98)) !important;
  box-shadow:
    0 15px 35px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

html[data-theme="dark"] .stockitem {
  border-color:rgba(201,164,92,.20) !important;
  background:rgba(255,255,255,.025) !important;
  border-radius:16px !important;
}

/* ---------- FOOTER ---------- */

html[data-theme="dark"] .footer,
html[data-theme="dark"] footer {
  background:
    linear-gradient(180deg,#0d0d0d,#070707) !important;
  border-top:1px solid rgba(201,164,92,.18) !important;
}

/* ---------- MOBILE NAV ---------- */

html[data-theme="dark"] .mobileNav {
  background:rgba(8,8,8,.94) !important;
  border-top:1px solid rgba(201,164,92,.24) !important;
  box-shadow:
    0 -12px 35px rgba(0,0,0,.40),
    0 -1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* ---------- INSTALL BUTTON ---------- */

html[data-theme="dark"] .installApp {
  background:
    linear-gradient(135deg,#c9a45c,#ead49a 50%,#c19a4e) !important;
  border-color:rgba(255,225,150,.65) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 20px rgba(201,164,92,.10) !important;
}

/* ---------- LIGHT MODE: KEEP PREMIUM IVORY ---------- */

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 50% -10%,rgba(201,164,92,.10),transparent 34%),
    linear-gradient(180deg,#fffdf8,#f6f0e5) !important;
}

html[data-theme="light"] .hero {
  border-color:rgba(167,123,18,.25) !important;
  border-radius:28px;
  background:
    radial-gradient(circle at 80% 35%,rgba(201,164,92,.13),transparent 28%),
    linear-gradient(135deg,#fffdf8,#f4ecdc) !important;
  box-shadow:
    0 18px 45px rgba(90,65,20,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}

html[data-theme="light"] .cat {
  border-color:rgba(167,123,18,.20) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,#fffdf8,#f7f0e3) !important;
  box-shadow:0 10px 25px rgba(90,65,20,.08) !important;
}

html[data-theme="light"] .cat:hover,
html[data-theme="light"] .cat.active {
  border-color:rgba(167,123,18,.42) !important;
  box-shadow:0 14px 30px rgba(90,65,20,.12) !important;
}

html[data-theme="light"] .promo {
  border-color:rgba(167,123,18,.25) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 85% 50%,rgba(201,164,92,.13),transparent 30%),
    linear-gradient(135deg,#fffdf8,#f4ecdc) !important;
}

html[data-theme="light"] .pcard {
  border-color:rgba(167,123,18,.20) !important;
  border-radius:22px !important;
  background:linear-gradient(145deg,#fffdf8,#f6efe2) !important;
  box-shadow:0 12px 28px rgba(90,65,20,.09) !important;
}

html[data-theme="light"] .pcard:hover {
  border-color:rgba(167,123,18,.40) !important;
  box-shadow:0 18px 35px rgba(90,65,20,.13) !important;
}

html[data-theme="light"] .stock {
  border-color:rgba(167,123,18,.23) !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#fffdf8,#f4ecdc) !important;
  box-shadow:0 15px 35px rgba(90,65,20,.08) !important;
}

/* ---------- MOBILE POLISH ---------- */

@media (max-width:700px) {
  .hero {
    border-radius:22px !important;
  }

  .cats {
    gap:10px !important;
  }

  .cat {
    border-radius:16px !important;
  }

  .promo,
  .stock {
    border-radius:20px !important;
  }

  .pcard {
    border-radius:18px !important;
  }

  .installApp {
    right:12px;
    bottom:76px;
    padding:10px 15px;
    font-size:12px;
  }
}



/* =========================================================
   ZAFF.CELL — LUXURY HOME V2
   BLACK MARBLE / CHAMPAGNE GOLD
   VISUAL ONLY — JAVASCRIPT & DATA UNTOUCHED
   ========================================================= */

:root {
  --lux-gold:#c9a45c;
  --lux-gold-light:#ead49a;
  --lux-black:#080808;
  --lux-panel:#101010;
}


/* =========================================================
   MAIN PAGE ATMOSPHERE
   ========================================================= */

html[data-theme="dark"] body {
  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(201,164,92,.15),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #070707 0%,
      #0b0b0b 45%,
      #070707 100%
    ) !important;
}


/* =========================================================
   HEADER — APP PREMIUM
   ========================================================= */

html[data-theme="dark"] .nav {
  min-height:64px;
  margin-top:10px;
  padding:10px 18px !important;
  border:1px solid rgba(201,164,92,.18) !important;
  border-radius:18px !important;

  background:
    linear-gradient(
      180deg,
      rgba(24,24,24,.96),
      rgba(8,8,8,.96)
    ) !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

html[data-theme="dark"] .brand {
  font-weight:800;
  letter-spacing:.02em;
}

html[data-theme="dark"] .brandZ {
  color:#ead49a !important;
  text-shadow:
    0 0 10px rgba(201,164,92,.35),
    0 3px 10px rgba(0,0,0,.7);
}

html[data-theme="dark"] .links {
  gap:24px;
}

html[data-theme="dark"] .links a {
  color:#d8d1c2 !important;
  font-size:13px;
  font-weight:600;
}

html[data-theme="dark"] .themeToggle {
  border-color:rgba(201,164,92,.35) !important;
  background:rgba(201,164,92,.08) !important;
}


/* =========================================================
   HERO — LUXURY LANDING
   ========================================================= */

html[data-theme="dark"] .hero {
  margin-top:18px;
  padding:0 !important;

  overflow:hidden;
  position:relative;

  display:grid;

  border-radius:30px !important;
  border:1px solid rgba(201,164,92,.30) !important;

  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(201,164,92,.15),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #151515 0%,
      #080808 55%,
      #12100c 100%
    ) !important;

  box-shadow:
    0 25px 70px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}


/* Marble-like highlights */

html[data-theme="dark"] .hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      125deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,.035) 36%,
      transparent 38%
    ),
    linear-gradient(
      155deg,
      transparent 50%,
      rgba(201,164,92,.055) 51%,
      transparent 53%
    ),
    linear-gradient(
      35deg,
      transparent 68%,
      rgba(255,255,255,.025) 69%,
      transparent 71%
    );
}


/* =========================================================
   HERO BANNER
   ========================================================= */

html[data-theme="dark"] .heroBanner {
  position:relative;
  width:100%;
  overflow:hidden;

  border-bottom:1px solid rgba(201,164,92,.22);
}

html[data-theme="dark"] .heroBanner::after {
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.60) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.08),
      transparent 45%,
      rgba(201,164,92,.08)
    );

  pointer-events:none;
}

html[data-theme="dark"] .heroBanner img {
  display:block;
  width:100%;
  height:auto;
  min-height:240px;

  object-fit:cover;

  filter:
    saturate(.92)
    contrast(1.05)
    brightness(.88);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

html[data-theme="dark"] .hero > div:not(.heroBanner):not(.phoneBox) {
  position:relative;
  z-index:2;

  padding:34px 32px 30px;
}

html[data-theme="dark"] .eyebrow {
  display:inline-flex;
  align-items:center;

  padding:7px 13px;

  border-radius:999px;

  color:#ead49a !important;

  background:
    linear-gradient(
      135deg,
      rgba(201,164,92,.14),
      rgba(201,164,92,.035)
    ) !important;

  border:1px solid rgba(201,164,92,.38) !important;

  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;

  box-shadow:
    0 5px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);
}


html[data-theme="dark"] .hero h1 {
  margin-top:16px;

  font-size:clamp(36px,6vw,66px);
  line-height:.98;
  letter-spacing:-.045em;

  color:#faf8f2 !important;

  text-shadow:
    0 5px 25px rgba(0,0,0,.55);
}


html[data-theme="dark"] .hero .goldText {
  background:
    linear-gradient(
      135deg,
      #fff0ad,
      #c9a45c 48%,
      #f1d58b
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;

  text-shadow:none;
}


html[data-theme="dark"] .hero p {
  max-width:620px;

  color:#cfc8b9 !important;

  font-size:15px;
  line-height:1.7;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

html[data-theme="dark"] .hero .actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;

  margin-top:22px;
}

html[data-theme="dark"] .hero .actions .gold {
  min-height:48px;
  padding:0 23px;

  border-radius:13px !important;

  font-weight:800;
  letter-spacing:.01em;
}

html[data-theme="dark"] .hero .actions .outline {
  min-height:48px;
  padding:0 22px;

  border-radius:13px !important;

  border:1px solid rgba(201,164,92,.55) !important;

  background:rgba(201,164,92,.045) !important;
  color:#ead49a !important;

  font-weight:800;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}

html[data-theme="dark"] .hero .actions .outline:hover {
  background:rgba(201,164,92,.10) !important;
  border-color:#ead49a !important;
}


/* =========================================================
   PHONE MOCKUP
   ========================================================= */

html[data-theme="dark"] .phoneBox {
  position:relative;
  z-index:2;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  min-height:390px;

  padding:20px 24px 0;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(201,164,92,.12),
      transparent 60%
    );
}


html[data-theme="dark"] .phone {
  position:relative;

  width:min(280px,78vw);
  min-height:430px;

  padding:48px 16px 22px;

  border-radius:38px 38px 24px 24px;

  border:2px solid rgba(201,164,92,.42) !important;

  background:
    linear-gradient(
      145deg,
      #202020,
      #090909 65%,
      #17120b
    ) !important;

  box-shadow:
    0 30px 60px rgba(0,0,0,.62),
    0 0 45px rgba(201,164,92,.09),
    inset 0 1px 0 rgba(255,255,255,.07);
}


html[data-theme="dark"] .phone::before {
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:8px;
  height:2px;

  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.20),
      transparent
    );
}


html[data-theme="dark"] .notch {
  position:absolute;
  top:13px;
  left:50%;
  transform:translateX(-50%);

  width:74px;
  height:18px;

  border-radius:99px;

  background:#030303 !important;

  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.08);
}


/* Phone internal cards */

html[data-theme="dark"] .phone .pcard {
  border:1px solid rgba(201,164,92,.28) !important;

  background:
    linear-gradient(
      145deg,
      rgba(35,35,35,.95),
      rgba(13,13,13,.95)
    ) !important;

  border-radius:18px !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035);
}


html[data-theme="dark"] .phone .pgrid {
  gap:8px;
}

html[data-theme="dark"] .phone .mini {
  border:1px solid rgba(201,164,92,.22) !important;

  border-radius:13px !important;

  background:
    rgba(255,255,255,.025) !important;

  color:#e5ddce !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* =========================================================
   CATEGORY SECTION
   ========================================================= */

html[data-theme="dark"] .cats {
  margin-top:22px;

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

  gap:12px;
}

html[data-theme="dark"] .cat {
  min-height:100px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  border-radius:18px !important;

  border:1px solid rgba(201,164,92,.20) !important;

  background:
    linear-gradient(
      145deg,
      #181818,
      #0b0b0b
    ) !important;

  box-shadow:
    0 12px 25px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.03);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

html[data-theme="dark"] .cat:hover,
html[data-theme="dark"] .cat.active {
  transform:translateY(-3px);

  border-color:rgba(201,164,92,.55) !important;

  box-shadow:
    0 15px 30px rgba(0,0,0,.32),
    0 0 20px rgba(201,164,92,.08);
}

html[data-theme="dark"] .catIcon {
  font-size:25px;
  margin-bottom:7px;

  filter:
    drop-shadow(0 0 8px rgba(201,164,92,.18));
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

html[data-theme="dark"] .section h2 {
  color:#f5f1e8 !important;

  font-weight:800;
  letter-spacing:-.025em;
}

html[data-theme="dark"] .section h2::after {
  content:"";

  display:block;

  width:42px;
  height:2px;

  margin-top:9px;

  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      #c9a45c,
      transparent
    );
}


/* =========================================================
   MOBILE — LIKE A REAL APP
   ========================================================= */

@media (max-width:700px) {

  html[data-theme="dark"] .nav {
    margin-top:5px;
    min-height:58px;
    padding:8px 13px !important;
    border-radius:15px !important;
  }

  html[data-theme="dark"] .links {
    display:none;
  }

  html[data-theme="dark"] .hero {
    margin-top:10px;
    border-radius:23px !important;
  }

  html[data-theme="dark"] .heroBanner img {
    min-height:210px;
    max-height:300px;
    object-fit:cover;
  }

  html[data-theme="dark"] .hero > div:not(.heroBanner):not(.phoneBox) {
    padding:27px 20px 24px;
  }

  html[data-theme="dark"] .hero h1 {
    font-size:39px;
    line-height:1.02;
  }

  html[data-theme="dark"] .hero p {
    font-size:14px;
  }

  html[data-theme="dark"] .hero .actions {
    gap:9px;
  }

  html[data-theme="dark"] .hero .actions button {
    flex:1;
    min-width:0;
    padding-left:13px;
    padding-right:13px;
    font-size:12px;
  }

  html[data-theme="dark"] .phoneBox {
    min-height:360px;
    padding:12px 15px 0;
  }

  html[data-theme="dark"] .phone {
    width:235px;
    min-height:365px;
    padding:43px 12px 17px;
    border-radius:31px 31px 21px 21px;
  }

  html[data-theme="dark"] .phone .pcard {
    border-radius:15px !important;
  }

  html[data-theme="dark"] .cats {
    grid-template-columns:repeat(3,1fr);
    gap:9px;
  }

  html[data-theme="dark"] .cat {
    min-height:86px;
    border-radius:15px !important;
    font-size:12px;
  }

  html[data-theme="dark"] .catIcon {
    font-size:22px;
  }

}


/* =========================================================
   LIGHT MODE — PREMIUM IVORY
   ========================================================= */

html[data-theme="light"] .hero {
  border-radius:30px !important;

  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(201,164,92,.12),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #fffdf8,
      #f3eadb
    ) !important;

  box-shadow:
    0 25px 60px rgba(80,60,25,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-theme="light"] .heroBanner {
  border-bottom-color:rgba(167,123,18,.20);
}

html[data-theme="light"] .heroBanner img {
  filter:
    saturate(.92)
    contrast(1.02)
    brightness(.97);
}

html[data-theme="light"] .hero h1 {
  color:#29261f !important;
}

html[data-theme="light"] .hero p {
  color:#756e61 !important;
}

html[data-theme="light"] .hero .goldText {
  color:#9a7110 !important;
}

html[data-theme="light"] .phone {
  background:
    linear-gradient(
      145deg,
      #fffdf8,
      #eee3cf
    ) !important;

  border-color:rgba(167,123,18,.35) !important;

  box-shadow:
    0 25px 50px rgba(70,50,20,.15);
}


/* =========================================================
   FINAL MOBILE NAV POLISH
   ========================================================= */

@media (max-width:700px) {

  html[data-theme="dark"] .mobileNav {
    border-radius:18px 18px 0 0;

    background:
      linear-gradient(
        180deg,
        rgba(18,18,18,.97),
        rgba(7,7,7,.98)
      ) !important;

    border-top:
      1px solid rgba(201,164,92,.25) !important;

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }

  html[data-theme="dark"] .mobileNav a {
    color:#aaa398;
  }

  html[data-theme="dark"] .mobileNav a:first-child {
    color:#ead49a;
  }

}



/* =========================================================
   ZAFF.CELL — HEADER LOGO LUXURY
   VISUAL ONLY
   ========================================================= */

.brand {
  display:inline-flex !important;
  align-items:center;
  gap:10px;
}

.brandLogo {
  width:38px;
  height:38px;

  display:block;

  object-fit:cover;

  border-radius:10px;

  border:1px solid rgba(201,164,92,.42);

  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    0 0 14px rgba(201,164,92,.10);
}

html[data-theme="light"] .brandLogo {
  border-color:rgba(167,123,18,.30);

  box-shadow:
    0 4px 12px rgba(70,50,20,.12);
}

@media (max-width:700px) {
  .brandLogo {
    width:34px;
    height:34px;
    border-radius:9px;
  }
}