:root{--ivory:#f6f1e7;--paper:#fbf9f3;--ink:#2b0c0e;--ox:#5a0a0e;--oxd:#3a0a0d;--gold:#a97f3f;--line:rgba(169,127,63,.42);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300}
.jnav{--n-fg:#3a0a0d;--n-bg:rgba(246,241,231,.88);--n-sheet:#f6f1e7;--n-accent:#a97f3f;--n-font:var(--sans);--n-display:var(--serif)}
.jnav__brand{opacity:0;transition:opacity .5s}
.jnav.is-scrolled .jnav__brand{opacity:1}
.eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);font-weight:400}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(36px,4.8vw,70px);line-height:1.04;color:var(--oxd);letter-spacing:-.005em}
.h2 em,.hero__h em{font-style:italic;color:var(--gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 28px;border:1px solid var(--ox);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;font-weight:400;transition:background .45s,color .45s,border-color .45s}
.btn--fill{background:var(--ox);color:#f6ead3}
.btn--fill:hover{background:#7a1015;border-color:#7a1015}
.btn--line{color:var(--ox)}
.btn--line:hover{background:var(--ox);color:#f6ead3}
.btn--block{display:flex;width:100%}

/* ---------- 1. beranda ---------- */
.hero{display:flex;align-items:center;overflow:hidden;background:var(--ivory);padding:84px 0 56px}
.hero__bg{position:absolute;inset:0;background:url("../media/tex/ivory.jpg") center/cover;opacity:.5}
.hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 55% at 72% 42%,rgba(255,255,255,.85),transparent 72%);animation:glow 14s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.55;transform:translate3d(-3%,0,0)}to{opacity:1;transform:translate3d(3%,0,0)}}
.hero__txt{position:relative;z-index:2;padding:0 clamp(24px,4vw,70px) 0 clamp(28px,7vw,130px);max-width:780px}
.hero__logo{width:clamp(170px,17vw,250px);height:auto;margin-bottom:clamp(20px,5svh,48px)}
.hero__h{font-family:var(--serif);font-weight:300;font-size:clamp(40px,min(5.2vw,9svh),84px);line-height:1.02;letter-spacing:-.012em;color:var(--oxd)}
.hero__p{margin:clamp(16px,3svh,26px) 0 clamp(24px,4svh,36px);max-width:470px;font-size:clamp(15px,1.25vw,18px);line-height:1.7;color:#4d2d2b}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__media{position:absolute;top:0;right:0;bottom:0;width:62%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 14%,#000 40%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 14%,#000 40%);opacity:0;transform:scale(1.035);transition:opacity 1.8s ease .2s,transform 2.8s cubic-bezier(.2,.8,.2,1) .2s}
body.is-open .hero__media{opacity:1;transform:none}
.hero__media video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;background:#e9e1d2}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,241,231,.6),rgba(246,241,231,0) 16%)}
.hero__note{position:absolute;left:clamp(28px,7vw,130px);bottom:26px;z-index:2;display:flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:400}
.hero__note i{display:block;width:44px;height:1px;background:var(--gold);transform-origin:left;animation:lineIn 1.6s cubic-bezier(.2,.8,.2,1) 1.2s both}
@keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- 2. koleksi ---------- */
.kol{background:linear-gradient(#f6f1e7,#efe8d9);padding:clamp(84px,12svh,124px) clamp(14px,3.4vw,56px) clamp(70px,10svh,110px)}
.kol__head{text-align:center;max-width:740px;margin:0 auto clamp(36px,6svh,64px)}
.kol__head .h2{margin:14px 0 18px}
.kol__p{font-size:clamp(15px,1.2vw,17.5px);line-height:1.7;color:#4d2d2b}
.kol__grid{column-count:4;column-gap:clamp(14px,2vw,30px);max-width:1500px;margin:0 auto}
.tile{break-inside:avoid;margin-bottom:clamp(20px,2.6vw,36px)}
.tile__frame{display:block;width:100%;padding:10px;background:var(--paper);border:1px solid var(--line);position:relative;cursor:zoom-in;transition:border-color .5s,box-shadow .5s}
.tile__frame::after{content:"";position:absolute;inset:4px;border:1px solid transparent;transition:border-color .6s;pointer-events:none}
.tile__frame:hover,.tile__frame:focus-visible{border-color:rgba(169,127,63,.8);box-shadow:0 14px 34px rgba(90,40,20,.1)}
.tile__frame:hover::after{border-color:rgba(169,127,63,.35)}
.tile__frame img{width:100%;height:auto;background:#e9e1d1}
.tile__cap{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:13px 2px 0}
.tile__n{font-family:var(--serif);font-size:clamp(19px,1.5vw,22px);line-height:1.15;color:var(--oxd)}
.ask{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ox);text-decoration:none;font-weight:400}
.ask svg{width:16px;height:16px;flex:none}
.ask span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .45s cubic-bezier(.2,.8,.2,1)}
.ask:hover span,.ask:focus-visible span{background-size:100% 1px}

/* ---------- 3. janji temu ---------- */
.janji{display:flex;flex-direction:column;overflow:hidden;background:#d9c7a3;color:var(--ink)}
.janji__tex{position:absolute;inset:0;background:url("../media/tex/champagne.jpg") center/cover}
.janji__in{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,100px);align-items:center;padding:clamp(84px,12svh,120px) clamp(20px,6vw,110px) 28px}
.janji__l .h2{margin:14px 0 clamp(24px,4svh,40px);max-width:760px}
.steps{display:grid;max-width:760px}
.steps li{position:relative;display:grid;grid-template-columns:58px 1fr;gap:16px;padding:20px 0}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(58,10,13,.35);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.steps li.in::before{transform:scaleX(1)}
.steps b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:var(--oxd)}
.steps h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,1.9vw,27px);margin-bottom:5px;color:var(--oxd)}
.steps p{font-size:15.5px;line-height:1.65;color:#3d2422;max-width:560px}
.card{background:rgba(251,249,243,.93);padding:clamp(26px,3vw,44px);border:1px solid var(--line);outline:1px solid rgba(169,127,63,.5);outline-offset:9px;display:grid;gap:18px}
.card__logo{width:min(220px,70%);height:auto}
.card__p{font-size:16px;line-height:1.65;color:#4d2d2b}
.card__ig{justify-self:start;color:var(--ox);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-underline-offset:5px;font-weight:400}
.card__facts{display:grid;gap:9px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;color:#4d2d2b}
.card__facts li{position:relative;padding-left:20px}
.card__facts li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.janji__foot{position:relative;z-index:2;text-align:center;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;padding:22px 20px 26px;opacity:.7}

/* ---------- layar lebih kecil ---------- */
@media (max-width:1180px){.kol__grid{column-count:3}}
@media (max-width:860px){
  .hero{flex-direction:column;justify-content:flex-end;padding:100px 22px 56px}
  .hero__media{width:100%;-webkit-mask-image:none;mask-image:none}
  .hero__media video{object-position:50% 30%}
  .hero__veil{background:linear-gradient(0deg,#f6f1e7 0,rgba(246,241,231,.96) 34%,rgba(246,241,231,.6) 52%,rgba(246,241,231,0) 76%),linear-gradient(180deg,rgba(246,241,231,.5),rgba(246,241,231,0) 14%)}
  .hero__txt{padding:0;text-align:center;max-width:540px;margin:0 auto}
  .hero__logo{margin:0 auto 22px;width:170px}
  .hero__p{margin-left:auto;margin-right:auto}
  .hero__cta{justify-content:center}
  .hero__note{display:none}
  .kol__grid{column-count:2;column-gap:12px}
  .tile__frame{padding:6px}
  .ask{font-size:11px;letter-spacing:.1em}
  .janji__in{grid-template-columns:1fr;padding-top:90px}
  .steps li{grid-template-columns:44px 1fr}
  .card{outline-offset:6px;margin:0 8px}
}

@media (max-width:900px){.janji__foot{padding-bottom:100px;line-height:1.8}}