:root{
  --white:#fdfaf4;--sage:#e9dfd0;--lime:#e3d3b5;--moss:#7a6552;--deep:#3b2f27;
  --ink:#3a2f28;--gold:#c9a96e;--accent:#a98774;--accent-deep:#6b4435;--gold2:#e6d3a3;--mute:#6b5b4e;
  --glass:rgba(255,255,255,.42);--glass-line:rgba(255,255,255,.75);--shadow:0 8px 32px rgba(59,47,39,.12),inset 0 1px 0 rgba(255,255,255,.85);
  --tint:linear-gradient(160deg,rgba(169,135,116,0.3),rgba(255,255,255,.35));
  --btn:linear-gradient(135deg,#6b4435,#3b2f27);
  --display:'Fraunces',Georgia,serif;--body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--body);color:var(--ink);background:#f1ebe0;line-height:1.65;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(42vmax 42vmax at 8% 8%,rgba(169,135,116,.55),transparent 62%),
  radial-gradient(36vmax 36vmax at 92% 18%,rgba(227,211,181,.9),transparent 62%),
  radial-gradient(46vmax 46vmax at 75% 92%,rgba(122,101,82,.32),transparent 62%),
  radial-gradient(32vmax 32vmax at 4% 88%,rgba(214,190,170,.6),transparent 62%)}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
section{padding:90px 0}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,4vw,2.8rem);max-width:640px}
.kicker{font-family:'Pinyon Script',cursive;font-weight:400;font-size:1.6rem;line-height:1.2;color:var(--accent-deep);margin-bottom:8px;display:flex;align-items:center;gap:14px}
.kicker::after{content:"";height:1px;width:60px;background:linear-gradient(90deg,var(--gold),transparent)}
h1 em,h2 em{font-style:italic;font-weight:400;padding-right:.06em;background:linear-gradient(90deg,#5b3a2e,#a5865a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--mute);max-width:470px;margin-top:14px}
.head{margin-bottom:44px}

/* === glass dasar === */
.top,.arch,.checks li,.cat-nav button,.item,.view,.btn.ghost,.addon-grid,.b,.feat li,.tl li,
.testi-card,.faq details,.cta-box,form,.foot{
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-line);box-shadow:var(--shadow)}

/* tombol */
.btn{display:inline-block;padding:13px 26px;border-radius:14px;font-weight:700;font-size:.92rem;cursor:pointer;font-family:var(--body);transition:transform .2s,box-shadow .2s}
.btn.solid{background:var(--btn);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 24px rgba(59,47,39,.3)}
.btn.ghost{color:var(--deep)}
.btn.light{background:rgba(227,211,181,.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);color:var(--deep);margin-top:26px;box-shadow:var(--shadow)}
.btn.sm{padding:9px 18px;font-size:.84rem}

/* header */
.top{position:sticky;top:0;z-index:30;border-width:0 0 1px;box-shadow:none;background:rgba(255,255,255,.5)}
.bar{display:flex;align-items:center;gap:28px;height:66px}
.brand{font-family:'Pinyon Script',cursive;font-size:2rem;font-weight:400;color:var(--deep)}
.brand span{color:var(--moss)}
#menu{display:flex;gap:24px;margin-left:auto;font-size:.9rem;font-weight:500}
#menu a:hover{color:var(--moss)}
.burger{display:none;background:none;border:0;margin-left:auto;width:38px;height:38px;cursor:pointer;flex-direction:column;justify-content:center;gap:7px;align-items:center}
.burger i{display:block;width:22px;height:2px;background:var(--deep)}

/* hero */
.hero{padding:70px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
.hero .lead{font-size:1.05rem}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;font-size:.84rem;color:var(--mute)}
.checks li{padding:6px 16px;border-radius:99px;box-shadow:none}
.checks li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--moss);margin-right:8px}
.hero-art{position:relative;height:480px}
.arch{position:absolute;inset:0 8%;border-radius:999px 999px 28px 28px;background:linear-gradient(180deg,rgba(169,135,116,0.23),rgba(255,255,255,.22))}
.mock{position:absolute;width:170px;height:320px;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.75);border-radius:28px;padding:7px;box-shadow:0 24px 44px rgba(59,47,39,.2)}
.mock i{display:grid;place-content:center;width:100%;height:100%;border-radius:22px;text-align:center;font:600 1.3rem/1.25 var(--display);color:var(--deep);padding:12px}
.mock b{display:block;font:700 .6rem var(--body);letter-spacing:.08em;margin-bottom:8px;color:var(--moss)}
.m1{left:12%;top:60px;transform:rotate(-6deg)}.m1 i{background:rgba(255,255,255,.6)}
.m2{right:8%;top:120px;transform:rotate(7deg)}.m2 i{background:rgba(227,211,181,.6)}
.leaf{position:absolute;width:90px;height:150px;background:linear-gradient(135deg,rgba(91,58,46,.4),rgba(169,135,116,.28));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.65);border-radius:0 100% 0 100%}
.l1{left:2%;bottom:20px;transform:rotate(-20deg)}
.l2{right:0;top:20px;width:60px;height:100px;transform:rotate(30deg)}

/* katalog */
#katalog .wrap{max-width:1240px}
.cat-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.cat-nav button{padding:10px 26px;border-radius:99px;font:600 .92rem var(--body);color:var(--mute);cursor:pointer;box-shadow:none}
.cat-nav button.on{background:var(--btn);color:#fff;border-color:rgba(255,255,255,.4)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.item{padding:14px;border-radius:30px;transition:transform .25s,box-shadow .25s}
.art{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:20px;display:grid;place-items:center}
.art .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.item:hover .art .cover{transform:scale(1.04)}
.phone{width:160px;height:285px;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.75);border-radius:26px;padding:6px;box-shadow:0 16px 32px rgba(59,47,39,.2)}
.phone i{display:grid;place-content:center;width:100%;height:100%;border-radius:20px;text-align:center;font:600 1.1rem/1.2 var(--display);color:var(--deep);background:color-mix(in srgb,var(--p) 65%,transparent);padding:10px}
.phone b{display:block;font:700 .55rem var(--body);letter-spacing:.07em;margin-bottom:6px;color:var(--moss)}
.info-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 8px 0;font-size:.95rem}
.info-row strong{font-family:var(--display);font-size:1.1rem}
.info-row small{display:block;color:var(--mute)}
.info-row s{color:var(--mute);font-size:.8rem;margin-right:6px}
.info-row b{color:var(--moss);font-size:1.05rem}
.view{display:block;margin-top:14px;text-align:center;padding:11px 0;border-radius:14px;font-size:.88rem;font-weight:700;color:var(--deep);box-shadow:none;transition:background .2s,color .2s}
.view:hover{background:var(--btn);color:#fff}

/* ganti kategori: kartu muncul halus (tanpa efek kilat) */
.cat-grid.swap .item{animation:swap .35s ease both}
@keyframes swap{from{opacity:0;transform:translateY(10px)}}

/* add on */
.addon-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;padding:48px;border-radius:32px}
.prices div{display:grid;grid-template-columns:1fr auto;gap:2px 20px;padding:18px 0;border-bottom:1px solid rgba(59,47,39,.12)}
.prices div:first-child{padding-top:0}
.prices div:last-child{border-bottom:0;padding-bottom:0}
.prices dt{font-family:var(--display);font-size:1.25rem}
.prices dd{font-weight:700;color:var(--moss);background:rgba(122,101,82,.12);padding:2px 12px;border-radius:99px;font-size:.84rem;align-self:center}
.prices p{grid-column:1/-1;font-size:.86rem;color:var(--mute)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.b{border-radius:26px;padding:28px;min-height:180px}
.b h3{font-size:1.3rem;margin-bottom:8px}
.b p{font-size:.88rem;color:var(--mute)}
.b.big{grid-column:span 2;grid-row:span 2;background:var(--tint);display:flex;flex-direction:column;justify-content:flex-end}
.b.big h3{font-size:2.1rem}
.b.wide{grid-column:span 2}
.b.dark{background:linear-gradient(135deg,rgba(227,211,181,0.39),rgba(255,255,255,.3))}

/* fitur */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat li{padding:28px;border-radius:24px}
.feat h3{font-size:1.3rem;margin-bottom:6px}
.feat p{font-size:.9rem;color:var(--mute)}

/* proses + faq */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.sticky{position:sticky;top:100px;align-self:start}
.tl{border-left:2px dashed var(--moss);padding-left:34px}
.tl li{position:relative;padding:22px 26px;margin-bottom:18px;border-radius:22px}
.tl li:last-child{margin-bottom:0}
.tl li::before{content:"";position:absolute;left:-44px;top:28px;width:16px;height:16px;border-radius:50%;background:var(--lime);border:3px solid var(--moss)}
.tl h3{font-size:1.4rem;margin-bottom:4px}
.tl p{color:var(--mute);font-size:.92rem}
.faq details{margin-bottom:12px;border-radius:20px;padding:0 24px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font:600 1.15rem var(--display);display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--moss);font-size:1.4rem;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;color:var(--mute);font-size:.92rem;max-width:520px}

/* testimoni (slider) */
.slider{max-width:760px;margin:0 auto}
.testi-card{padding:14px;border-radius:32px}
.testi-photo{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--tint);display:grid;place-items:center;color:var(--moss);font:600 .88rem var(--body)}
.testi-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.testi-body{padding:26px 18px 14px;text-align:center}
.testi-body p{font:400 clamp(1.25rem,2.6vw,1.7rem)/1.4 var(--display);color:var(--deep)}
.testi-body b{display:block;margin-top:18px}
.testi-body small{color:var(--mute)}
.slide-ctl{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:22px;font-size:.88rem;color:var(--mute)}
.slide-ctl button{width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.1rem;color:var(--deep);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.slide-ctl button:hover{background:var(--btn);color:#fff}
.testi .checks{justify-content:center;margin-top:34px}

/* cta + kontak */
.cta-band{padding:50px 0}
.cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:56px;border-radius:34px;background:linear-gradient(120deg,rgba(196,174,148,.55),rgba(255,255,255,.4))}
.cta-box h2{max-width:620px}
.cta-box .btn{margin-top:0}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
form{display:grid;gap:14px;padding:30px;border-radius:28px}
label{display:grid;gap:5px;font-size:.82rem;font-weight:700;color:var(--moss)}
input,textarea{padding:12px 14px;border:1px solid rgba(255,255,255,.85);border-radius:12px;background:rgba(255,255,255,.55);font:400 .92rem var(--body);color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--moss)}
.info{margin-top:22px;display:grid;gap:8px;color:var(--mute);font-size:.92rem}

/* footer */
footer{padding:40px 0 28px;font-size:.88rem;color:var(--mute)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding:38px;border-radius:30px}
.foot p{margin-top:10px;max-width:260px}
.foot h4{font-family:var(--display);color:var(--deep);font-size:1.1rem;margin-bottom:10px}
.foot a{display:block;padding:2px 0}
.foot .brand{display:inline-block;padding:0}
.foot a:hover{color:var(--moss)}
.copy{text-align:center;margin-top:26px;font-size:.8rem}

/* responsive */
@media(max-width:900px){
  section{padding:68px 0}
  .hero-grid,.addon-grid,.split,.contact{grid-template-columns:1fr;gap:36px}
  .addon-grid{padding:30px}
  .hero-art{height:400px;order:-1}
  .sticky{position:static}
  .bento{grid-template-columns:1fr 1fr}
  .b.big{grid-column:span 2;grid-row:auto;min-height:200px}
  .feat{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr 1fr;gap:18px}
  .foot{grid-template-columns:1fr 1fr}
  .cta-box{padding:36px}
  .burger{display:flex}
  .bar .btn{display:none}
  #menu{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-line);padding:8px 22px 16px}
  #menu.open{display:flex}
  #menu a{padding:12px 0;border-bottom:1px solid rgba(59,47,39,.1)}
}
@media(max-width:560px){
  .bento,.feat,.foot{grid-template-columns:1fr}
  .b.big,.b.wide{grid-column:auto}
  .mock{width:140px;height:270px}
  .cat-grid{gap:10px}
  .item{padding:8px;border-radius:22px}
  .phone{width:100px;height:180px;border-radius:18px;padding:4px}
  .phone i{border-radius:14px;font-size:.75rem;padding:6px}
  .phone b{font-size:.42rem}
  .info-row{padding:12px 4px 0;font-size:.8rem;flex-direction:column;gap:4px}
  .info-row strong{font-size:.95rem}
}
/* === sentuhan elegan === */
.hero-art::before{content:"";position:absolute;inset:-14px 3%;border:1px solid rgba(201,169,110,.75);border-radius:999px 999px 40px 40px}
#menu a{position:relative}
#menu a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--gold);transition:width .3s}
#menu a:hover::after{width:100%}
.btn.solid{border-color:rgba(230,211,163,.8)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.stats>div,.wa-float{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.stats>div{text-align:center;padding:22px 12px;border-radius:24px}
.stats b{display:block;font:600 2.4rem/1.1 var(--display);color:var(--deep)}
.stats span{font-size:.85rem;color:var(--mute)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;font-weight:700;font-size:.86rem;color:var(--deep);transition:transform .2s}
@media(max-width:560px){.stats{gap:10px}.stats b{font-size:1.6rem}.stats span{font-size:.72rem}.wa-float span{display:none}.wa-float{padding:14px}}
/* === dua warna: taupe + sage === */
.l2{background:linear-gradient(135deg,rgba(217,191,140,.5),rgba(243,229,194,.3))}
.btn.solid{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand span,.checks li::before{color:var(--accent-deep)}
.checks li::before{background:var(--accent-deep)}
.addon-grid{background:linear-gradient(135deg,rgba(169,135,116,0.24),rgba(255,255,255,.42))}
.prices dd{color:var(--accent-deep);background:rgba(169,135,116,.22)}
.b:nth-child(4){background:linear-gradient(135deg,rgba(169,135,116,0.18),rgba(255,255,255,.4))}
.feat li:nth-child(odd){background:linear-gradient(160deg,rgba(227,211,181,0.33),rgba(255,255,255,.38))}
.feat li:nth-child(even){background:linear-gradient(160deg,rgba(169,135,116,0.2),rgba(255,255,255,.38))}
.tl{border-left-color:var(--accent)}
.tl li::before{border-color:var(--accent-deep)}
.stats>div:nth-child(odd){background:linear-gradient(160deg,rgba(227,211,181,0.33),rgba(255,255,255,.4))}
.stats>div:nth-child(even){background:linear-gradient(160deg,rgba(169,135,116,0.22),rgba(255,255,255,.4))}
.faq details[open]{background:linear-gradient(135deg,rgba(169,135,116,0.17),rgba(255,255,255,.45))}
.faq summary::after{color:var(--accent-deep)}
.cta-box{background:linear-gradient(120deg,rgba(169,135,116,.6),rgba(227,211,181,.6))}
.foot{background:linear-gradient(135deg,rgba(227,211,181,.55),rgba(169,135,116,.32))}
.wa-float{background:linear-gradient(135deg,rgba(169,135,116,0.39),rgba(255,255,255,.5))}
/* === menyala === */
.item:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(59,47,39,.22),inset 0 1px 0 rgba(255,255,255,.85)}
.stats b{background:linear-gradient(90deg,#5b3a2e,#a5865a);-webkit-background-clip:text;background-clip:text;color:transparent}
.cat-nav button.on{box-shadow:0 8px 20px rgba(59,47,39,.3)}
/* === beberapa elemen dibuat SOLID (sisanya tetap kaca) ===
   Mau kembali jadi kaca? Hapus aturan elemen itu dari blok ini. */
.b.big,.b.dark,.feat li:nth-child(odd),.cta-box,.foot,.wa-float{-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}
.btn.light{background:#e6d3a3;color:#3b2f27;border-color:#e6d3a3}
.b.big{background:#e3d2b6}
.b.dark{background:#3b2f27;color:#fff}
.b.dark p{color:#e3d9ce}
.feat li:nth-child(odd){background:#efe3c8}
.cta-box{background:#3b2f27;color:#fff}
.cta-box h2 em{background:none;color:#e6d3a3}
.foot{background:#3b2f27;color:#d9cfc3}
.foot h4,.foot .brand{color:#fff}
.foot .brand span,.foot a:hover{color:#e6d3a3}
.wa-float{background:#3b2f27;color:#fff}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}