:root{
    --bg: #fff6f9;          
    --bg2: #ffe6f0;         
    --surface: #ffffff;     
    --emerald: #ff4f81;     
    --emerald-light: #ff8fb3; 
    --gold: #ff6fa0;        
    --gold-deep: #e64d84;   
    --white: #ffffff;       
    --ink: #4a1f30;         
    --cream: #5c2c3f;       
    --muted: #a85d78;       
    --hairline: rgba(255,111,160,0.3);
    --serif: 'Cormorant Garamond', serif;
    --script: 'Cormoranr Garamond', cursive;
    --sans: 'Lato', sans-serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html, body{ height:100%; }
  body{
    background: radial-gradient(ellipse at 50% 0%, #ffe0ec 0%, var(--bg) 65%);
    color: var(--cream);
    font-family: var(--sans);
    overflow:hidden;
    width:100%;
    height:100%;
    position:fixed;
    inset:0;
  }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background: var(--gold); color:#2a1620; }

  .wrap{ max-width: 880px; margin:0 auto; padding: 0 28px; }

  /* ============ STEP STAGE ============ */
  #stage{
    position:relative;
    width:100%;
    height:100%;
    z-index:10;
  }
  .step{
    position:absolute;
    inset:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .55s ease;
  }
  .step.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .step.leaving{ opacity:0; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }

  .progress-dots{
    position:fixed; top: max(18px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    z-index:50;
    display:flex; gap:8px;
    padding: 8px 14px;
    border-radius:999px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,111,160,0.25);
    box-shadow: 0 4px 14px rgba(255,111,160,0.15);
  }
  .dot{
    width:6px; height:6px; border-radius:50%;
    background: rgba(74,31,48,0.2);
    transition: background .3s ease, transform .3s ease;
  }
  .dot.active{ background: var(--gold-deep); transform: scale(1.3); box-shadow: 0 0 8px var(--gold); }
  .dot.done{ background: var(--gold); }

  .next-btn{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    color: #2a1620; background: linear-gradient(135deg, var(--white), var(--gold));
    border:none; border-radius: 999px;
    padding: 14px 28px;
    cursor:pointer;
    box-shadow: 0 14px 28px -10px rgba(0,0,0,0.5);
    transition: transform .25s ease, box-shadow .25s ease, opacity .4s ease;
    -webkit-tap-highlight-color: transparent;
    font-weight: 700;
  }
  .next-btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(0,0,0,0.6); }
  .next-btn:active{ transform: translateY(0) scale(.98); }
  .next-btn svg{ width:13px; height:13px; }
  .next-btn-wrap{
    display:flex; justify-content:center;
    margin-top: 56px;
  }
  .next-btn-wrap.hidden-until-ready{
    opacity:0; pointer-events:none; transition: opacity .6s ease;
  }
  .next-btn-wrap.hidden-until-ready.show{ opacity:1; pointer-events:auto; }

  /* ambient floating items */
  #ambient{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
  .petal{
    position:absolute; top:-40px;
    color: var(--gold);
    opacity:0.4;
    font-size: 14px;
    animation: fall linear infinite;
  }
  @keyframes fall{
    to{ transform: translateY(110vh) rotate(360deg); }
  }

  /* ============ LOCK SCREEN ============ */
  #lock{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(rgba(20,10,20,0.55), rgba(20,10,20,0.65)), url('foto6.jpg') center/cover no-repeat;
    transition: opacity .9s ease, visibility .9s ease;
  }
  #lock.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  .lock-card{
    width: 100%; max-width: 340px;
    text-align:center;
    padding: 20px;
  }
  .lock-icon{
    width:56px; height:56px;
    border-radius:50%;
    background: linear-gradient(160deg, var(--gold), var(--gold-deep));
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 22px;
    font-size:22px;
    box-shadow: 0 0 30px rgba(255,255,255,0.45);
  }
  .lock-card h2{
    font-family: var(--serif);
    font-weight:600;
    font-size: 26px;
    margin-bottom: 8px;
    color: var(--white);
  }
  .lock-card p{
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 22px;
  }
  .pin-dots{
    display:flex; justify-content:center; gap: 12px;
    margin-bottom: 30px;
  }
  .pin-dots span{
    width: 12px; height:12px; border-radius:50%;
    border: 1px solid var(--hairline);
    transition: all .25s ease;
  }
  .pin-dots span.filled{
    background: var(--white);
    border-color: var(--white);
    box-shadow: 0 0 10px rgba(255,255,255,0.7);
  }
  .pin-dots span.shake{ animation: shakeDot .4s ease; }
  @keyframes shakeDot{
    25%{ transform: translateX(-4px); }
    75%{ transform: translateX(4px); }
  }
  .keypad{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .key{
    aspect-ratio:1;
    border-radius:50%;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.18);
    color: var(--white);
    font-family: var(--serif);
    font-size: 22px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: all .2s ease;
  }
  .key:hover{ background: rgba(255,255,255,0.3); border-color: var(--white); }
  .key:active{ transform: scale(0.92); }
  .key.util{ font-size:13px; color: rgba(255,255,255,0.85); font-family: var(--sans); font-weight:700; }
  .lock-hint{
    margin-top: 24px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--white);
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 9px 14px;
    border-radius: 100px;
    display:inline-block;
  }

  /* ============ MAIN CONTENT ============ */
  section{ padding: 90px 0 70px; position:relative; min-height:100%; box-sizing:border-box; }
  section.hero{ padding-top:0; }

  .eyebrow{
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    text-align:center;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-weight: 700;
  }
  .eyebrow::before, .eyebrow::after{ content:""; width:24px; height:1px; background: var(--gold); opacity:0.5; }

  /* HERO */
  .hero{
    min-height: 100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding-top: 80px;
  }
  .hero .eyebrow{ margin-bottom: 22px; }
  .hero h1{
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(38px, 8vw, 62px);
    line-height: 1.15;
    color: var(--ink);
  }
  .hero .name{
    display:block;
    font-family: var(--script);
    font-size: clamp(65px, 15vw, 115px);
    color: var(--gold-deep);
    line-height: 1.1;
    margin-top: 12px;
    text-shadow: 0 0 40px rgba(255,111,160,0.35);
    font-weight: 400;
  }
  .hero p.sub{
    margin-top: 26px;
    color: var(--muted);
    font-size: 16px;
    max-width: auto;
    line-height: 1.6;
  }
  .hero .scrolldown{
    margin-top: 60px;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform:uppercase;
    color: var(--muted);
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .scrolldown .stick{
    width:1px; height: 36px;
    background: linear-gradient(var(--gold), transparent);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{ 50%{ opacity:0.2; } }

  /* GIFT */
  .gift-section{ text-align:center; }
  .gift-section h2{
    font-family: var(--serif); font-weight:600;
    font-size: clamp(28px,4vw,42px);
    margin: 16px 0 8px;
    color: var(--ink);
  }
  .gift-section p{ color: var(--muted); font-size: 15px; margin-bottom: 50px; }
  .gift-box{
    width: 150px; height: 130px;
    margin: 0 auto;
    position:relative;
    cursor:pointer;
  }
  .gift-box .lid{
    position:absolute; top:-24px; left:-8px; right:-8px;
    height: 34px;
    background: linear-gradient(160deg, var(--gold), var(--gold-deep));
    border-radius: 6px;
    transition: transform .6s cubic-bezier(.65,0,.35,1);
    z-index:2;
  }
  .gift-box .lid::after{
    content:""; position:absolute; left:50%; top:-16px;
    transform: translateX(-50%);
    width: 22px; height: 22px;
    background: var(--white);
    border-radius: 50% 50% 0 50%;
    rotate: 45deg;
  }
  .gift-box .body{
    position:absolute; top:10px; left:0; right:0; bottom:0;
    background: linear-gradient(160deg, #ff8fbc, #ff4f8f);
    border-radius: 4px;
    border: 1px solid var(--hairline);
  }
  .gift-box .ribbon{
    position:absolute; top:10px; bottom:0; left:50%;
    width: 18px; margin-left:-9px;
    background: var(--gold);
    opacity:0.9;
  }
  .gift-box.opened .lid{ transform: translateY(-70px) rotate(-18deg); opacity:0; }
  .gift-box .glow{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width: 4px; height:4px; border-radius:50%;
    box-shadow: 0 0 0 0 rgba(255,111,160,0);
    transition: box-shadow .6s ease;
  }
  .gift-box.opened .glow{ box-shadow: 0 0 80px 40px rgba(255,111,160,0.5); }
  .gift-tap{
    margin-top: 26px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--gold);
    text-transform:uppercase;
    font-weight: 700;
  }

  /* LETTER */
  .letter-wrap{
    display:none;
    animation: fadeUp .8s ease both;
  }
  .letter-wrap.show{ display:block; }
  @keyframes fadeUp{ from{ opacity:0; transform: translateY(20px);} to{opacity:1; transform:translateY(0);} }
  .letter-card{
    border: 1px solid var(--hairline);
    border-radius: 6px;
    padding: 48px 40px;
    background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,230,240,0.5));
    box-shadow: 0 10px 30px rgba(255,111,160,0.12);
    position:relative;
    margin-top: 40px;
  }
  .letter-card .mark{
    font-family: var(--serif);
    font-style:italic;
    font-size: 60px;
    color: var(--gold);
    opacity:0.5;
    line-height:0.5;
    margin-bottom: 18px;
  }
  .letter-card p{
    font-size: 16px;
    line-height: 1.9;
    color: var(--cream);
    margin-bottom: 20px;
    opacity:0.92;
  }
  .letter-sign{
    margin-top: 30px;
    text-align:right;
  }
  .letter-sign span{ display:block; font-size: 13px; color: var(--muted); }
  .letter-sign strong{
    font-family: var(--script);
    font-size: 42px;
    color: var(--gold-deep);
    font-weight:400;
    text-shadow: 0 0 10px rgba(255,111,160,0.2);
  }

  /* GALLERY */
  .gallery-head{ text-align:center; margin-bottom: 50px; }
  .gallery-head h2{ font-family: var(--serif); font-weight:600; font-size: clamp(30px,4vw,42px); margin-top:14px; color: var(--ink); }
  .gallery-head p{ color: var(--muted); font-size: 15px; margin-top:8px; }
  .polaroid-row{
    display:flex; gap: 24px; overflow-x:auto; padding: 20px 4px 30px;
    scroll-snap-type: x mandatory;
  }
  .polaroid-row::-webkit-scrollbar{ height:5px; }
  .polaroid-row::-webkit-scrollbar-thumb{ background: var(--hairline); border-radius:4px; }
  .polaroid{
    flex: 0 0 200px;
    scroll-snap-align:center;
    background: #fcfbfa;
    padding: 12px 12px 40px;
    border-radius: 3px;
    transform: rotate(var(--rot));
    box-shadow: 0 14px 30px rgba(0,0,0,0.5);
    transition: transform .3s ease;
  }
  .polaroid:hover{ transform: rotate(0deg) translateY(-6px) scale(1.03); }
  .polaroid .photo{
    width:100%; aspect-ratio: 4/5;
    border-radius:2px;
    background-size: cover; background-position:center;
  }
  /* Font yang menyerupai tulisan tangan tapi sangat mudah dibaca */
  .polaroid figcaption{
    font-family: 'Shadows Into Light', cursive;
    font-size: 24px;
    color: #4a1f30;
    text-align:center;
    margin-top: 10px;
    letter-spacing: 0.05em;
  }

  /* CANDLE / WISH */
  .candle-section{ text-align:center; }
  .candle-section h2{ font-family: var(--serif); font-weight:600; font-size: clamp(28px,4vw,42px); margin: 16px 0 10px; color: var(--ink); }
  .candle-section > .wrap > p{ color: var(--muted); font-size:15px; margin-bottom: 50px; }
  .cake{
    width: 130px; margin: 0 auto;
    position:relative;
  }
  .candle{
    width: 8px; height: 40px;
    background: linear-gradient(var(--gold), #a9824c);
    margin: 0 auto;
    border-radius:2px;
    position:relative;
    cursor:pointer;
  }
  .flame{
    position:absolute; top:-22px; left:50%; transform: translateX(-50%);
    width: 14px; height: 22px;
    background: radial-gradient(circle at 50% 70%, #fff8e0, var(--gold) 60%, transparent 75%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 1.6s ease-in-out infinite;
    transform-origin:bottom center;
  }
  @keyframes flicker{
    0%,100%{ transform: translateX(-50%) scale(1) rotate(-2deg); }
    50%{ transform: translateX(-50%) scale(1.08) rotate(3deg); }
  }
  .flame.out{ animation:none; opacity:0; transition: opacity .5s ease; }
  .cake-base{
    width: 130px; height: 70px;
    background: linear-gradient(160deg, var(--emerald), var(--emerald-light));
    border-radius: 8px 8px 20px 20px;
    margin-top: -2px;
    position:relative;
    border: 1px solid var(--hairline);
  }
  .cake-base::before{
    content:""; position:absolute; top:0; left:0; right:0; height:14px;
    background: repeating-linear-gradient(90deg, #ffffff, #ffffff 8px, transparent 8px, transparent 16px);
    opacity:0.85;
  }
  .candle-tap{
    margin-top: 20px; font-size: 12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); font-weight:700;
  }
  .wish-reveal{
    max-width: 480px; margin: 46px auto 0;
    opacity:0; transform: translateY(16px);
    transition: all .8s ease;
    font-family: var(--serif); font-style:italic;
    font-size: clamp(20px,2.6vw,26px);
    line-height:1.6;
    color: var(--ink);
    text-shadow: 0 0 15px rgba(255,111,160,0.2);
  }
  .wish-reveal.show{ opacity:1; transform: translateY(0); }

  /* MUSIC */
  .music-card{
    max-width: 400px; margin: 40px auto 0;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 30px;
    text-align:center;
    background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,230,240,0.5));
    box-shadow: 0 10px 30px rgba(255,111,160,0.12);
  }
  .album-art{
    width: 140px; height:140px; border-radius:8px; margin:0 auto 18px;
    background: linear-gradient(135deg, var(--emerald), var(--gold));
    display:flex; align-items:center; justify-content:center;
    font-size:34px;
    color: var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }
  .music-card h3{ font-family: var(--serif); font-weight:600; font-size:22px; color: var(--ink); }
  .music-card .artist{ font-size:14px; color: var(--muted); margin-top:4px; letter-spacing:0.04em; }
  .music-controls{
    display:flex; align-items:center; justify-content:center; gap: 22px;
    margin-top: 22px;
  }
  .music-controls button{
    background:none; border:none; color: var(--ink); font-size:16px; cursor:pointer;
    opacity:0.7; transition: opacity .2s ease;
  }
  .music-controls button:hover{ opacity:1; }
  .play-btn{
    width: 52px; height:52px; border-radius:50%;
    background: linear-gradient(135deg, var(--white), var(--gold)) !important;
    color: #2a1620 !important;
    font-size: 18px !important;
    opacity:1 !important;
    box-shadow: 0 4px 12px rgba(255,111,160,0.35);
  }
  .playlist{ margin-top: 26px; text-align:left; border-top:1px solid var(--hairline); padding-top:18px; }
  .playlist-item{
    display:flex; justify-content:space-between; align-items:center;
    padding: 9px 4px; border-radius:6px; font-size:14px; cursor:pointer;
    color: var(--muted); transition: all .2s ease;
  }
  .playlist-item:hover, .playlist-item.active{ background: rgba(255,111,160,0.12); color: var(--ink); }
  .playlist-item .t strong{ display:block; font-weight:700; }
  .playlist-item .t span{ font-size:12px; opacity:0.7; }

  /* CLOSING */
  .closing{ text-align:center; padding: 130px 0 90px; }
  .closing h2{
    font-family: var(--serif); font-weight:600;
    font-size: clamp(32px,5vw,50px);
    color: var(--gold-deep);
  }
  .closing p{ color: var(--muted); font-size:16px; max-width:440px; margin: 18px auto 0; line-height:1.8; }
  .closing blockquote{
    font-family: var(--serif); font-style:italic;
    font-size: clamp(20px,2.2vw,24px);
    margin: 36px auto; max-width: 420px;
    border-top: 1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    padding: 22px 0;
    color: var(--ink);
  }
  .closing .from{ margin-top: 30px; font-size:12px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); font-weight:700; }
  .closing .from strong{ display:block; margin-top:6px; font-family: var(--script); font-size: 46px; color: var(--gold-deep); text-shadow: 0 0 10px rgba(255,111,160,0.2); font-weight:400; }
  footer{ text-align:center; padding: 30px 0 50px; font-size: 12px; color: var(--muted); opacity:0.6; }

  @media (max-width: 600px){
    section{ padding: 80px 0; }
    .letter-card{ padding: 34px 22px; }
  }