:root{--bg:#0e1512;--bg2:#15201b;--gold:#d4b36a;--gold2:#f1dba0;--text:#efe9da;--muted:#a3ada2;--line:rgba(212,179,106,.28);--card:rgba(255,255,255,.04)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--text);line-height:1.7;background:var(--bg);
  background-image:radial-gradient(circle at 15% 0,#1f3a2e 0,transparent 45%),radial-gradient(circle at 95% 60%,#2a3a24 0,transparent 40%);background-attachment:fixed}
a{color:var(--gold2)}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.2}
.muted{color:var(--muted)} .center{text-align:center}
.script{font-family:'Great Vibes',cursive;font-weight:400;background:linear-gradient(135deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}

.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;
  background:rgba(14,21,18,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font:1.6rem 'Great Vibes',cursive;text-decoration:none;color:var(--gold2)}
.nav nav{display:flex;gap:1.4rem}.nav nav a{text-decoration:none;color:var(--text);font-size:.9rem;transition:color .2s}.nav nav a:hover{color:var(--gold)}
@media(max-width:560px){.nav nav a:nth-child(3){display:none}}

.wrap{max-width:1080px;margin:0 auto;padding:3rem 5vw}
.narrow{max-width:640px}
.btn{display:inline-block;cursor:pointer;border:1px solid var(--gold);padding:.85rem 1.8rem;border-radius:999px;font:500 .85rem 'Jost',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#1a1408;background:linear-gradient(135deg,var(--gold2),var(--gold));transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(212,179,106,.3)}
.btn.ghost{background:transparent;color:var(--gold2)}
.btn.sm{padding:.5rem 1.1rem;font-size:.75rem}
.btn.danger{background:#b3402f;border-color:#b3402f;color:#fff}

.hero-site{text-align:center;padding:6rem 5vw 5rem;position:relative}
.hero-site .eyebrow{letter-spacing:.35em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
.hero-site h1{font-size:clamp(2.6rem,7vw,4.6rem);margin:1rem auto;max-width:800px}
.hero-site h1 em{font-style:normal}
.hero-site p.lead{max-width:560px;margin:0 auto 2rem;color:var(--muted);font-size:1.1rem}
.hero-site .row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.section-title{text-align:center;margin-bottom:2.5rem}
.section-title h2{font-size:2.4rem}
.section-title p{color:var(--muted)}

.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{padding:1.6rem;border:1px solid var(--line);border-radius:18px;background:var(--card);backdrop-filter:blur(8px)}
.step b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);color:var(--gold2);font:600 1.3rem 'Cormorant Garamond',serif;margin-bottom:.8rem}
.step h3{font-size:1.4rem;margin-bottom:.3rem}

.tpl{padding:0;overflow:hidden;transition:transform .3s,box-shadow .3s}
.tpl:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.tpl .thumb{display:block;position:relative;height:380px;overflow:hidden;border-bottom:1px solid var(--line);background:#000}
.tpl .thumb iframe{position:absolute;top:0;left:50%;width:390px;height:780px;border:0;transform-origin:top center;transform:translateX(-50%) scale(.62);pointer-events:none}
.tpl .thumb::after{content:"Lihat Demo →";position:absolute;inset:auto 0 0 0;padding:1.6rem 1rem .8rem;text-align:center;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .25s}
.tpl:hover .thumb::after{opacity:1}
.chip{display:inline-block;margin-bottom:.5rem;padding:.1rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.tpl .body{padding:1.4rem}
.tpl h3{font-size:1.5rem}
.tpl .acts{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.t-emerald{background:radial-gradient(circle at 50% 30%,#2b4a3a,#0b1411);color:#f1dba0}
.t-rose{background:radial-gradient(circle at 50% 30%,#fbe3e0,#f1c9c9);color:#8f3f50}
.t-navy{background:radial-gradient(circle at 50% 30%,#22386a,#070d1a);color:#e6ecf8}

.price{max-width:420px;margin:0 auto;text-align:center}
.price .amount{font:600 3.4rem 'Cormorant Garamond',serif;color:var(--gold2)}
.price ul{list-style:none;margin:1.2rem 0 1.6rem;text-align:left}
.price li{padding:.35rem 0 .35rem 1.6rem;position:relative}
.price li::before{content:"✓";position:absolute;left:0;color:var(--gold)}

/* Form */
.form{display:grid;gap:1rem}
.form fieldset{border:1px solid var(--line);border-radius:16px;padding:1.4rem;display:grid;gap:.9rem}
.form legend{padding:0 .6rem;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;font-size:.78rem}
.form label{display:grid;gap:.3rem;font-size:.88rem;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font:inherit}
.form input[type=file]{padding:.6rem}
.form select option{color:#111}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--gold2)}
.form small{color:var(--muted);font-size:.78rem}
.two{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.alert{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1rem}
.alert.err{background:rgba(179,64,47,.2);border:1px solid #b3402f}
.alert.ok{background:rgba(70,160,100,.18);border:1px solid #46a064}
.alert.info{background:rgba(212,179,106,.12);border:1px solid var(--line)}
.badge{display:inline-block;padding:.2rem .8rem;border-radius:999px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.b-draft{background:#444;color:#ddd}.b-pending{background:#8a6a1a;color:#fff3cf}.b-active{background:#2c7a4b;color:#e2ffe9}
.copy-row{display:flex;gap:.5rem}.copy-row input{flex:1}
.proof img{max-width:100%;border-radius:12px;border:1px solid var(--line)}
iframe.pv{width:100%;height:520px;border:1px solid var(--line);border-radius:16px;background:#000}

table.t{width:100%;border-collapse:collapse;font-size:.88rem}
table.t th,table.t td{padding:.7rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t th{color:var(--gold);font-weight:500;letter-spacing:.06em;font-size:.75rem;text-transform:uppercase}
.table-wrap{overflow-x:auto}

.site-foot{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);margin-top:3rem}