:root{
    --paper:#FBF3E7;
    --paper-deep:#F3E6D3;
    --card:#FFFDF9;
    --wine:#6B2737;
    --wine-deep:#4E1C29;
    --rose:#C97B84;
    --gold:#B8862B;
    --gold-soft:#E7CE9C;
    --ink:#2B1F22;
    --ink-soft:#6E5C60;
    --line: rgba(107,39,55,0.14);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html, body{max-width:100%;}
  /* Catatan: overflow-x:hidden TIDAK dipasang di html/body karena itu bisa
     mematikan efek "position: sticky" pada header di sebagian browser HP.
     Elemen yang berpotensi melebar ke luar layar (mis. floaty-tag di hero)
     sudah ditangani per-section lewat overflow:hidden pada .hero saja. */
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}

  h1,h2,h3, .display{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:0.005em;
    margin:0;
  }

  .eyebrow{
    font-family:'Work Sans', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.18em;
    font-size:12px;
    font-weight:600;
    color:var(--wine);
  }

  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
  }
  @media(max-width:480px){ .wrap{padding:0 18px;} }

  a{color:inherit;}

  /* subtle paper texture */
  .grain{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0.5; mix-blend-mode:multiply;
    background-image: radial-gradient(rgba(107,39,55,0.05) 1px, transparent 1px);
    background-size: 3px 3px;
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(251,243,231,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
  }
  .brand-mark{
    width:34px; height:34px;
    flex-shrink:0;
    display:block;
  }
  .foot-brand .brand-mark{ width:38px; height:38px; }
  .brand-name{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:23px;
    color:var(--wine-deep);
  }
  nav.links{
    display:flex; gap:34px;
  }
  nav.links a{
    text-decoration:none;
    font-size:14px; font-weight:500;
    color:var(--ink-soft);
    transition:color .2s;
  }
  nav.links a:hover{color:var(--wine);}
  .nav-cta{
    display:flex; align-items:center; gap:22px;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 26px;
    border-radius:999px;
    font-size:14px; font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .2s;
  }
  .btn-primary{
    background:var(--wine);
    color:var(--paper);
    box-shadow:0 10px 24px -8px rgba(107,39,55,0.55);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(107,39,55,0.6);}
  .btn-ghost{
    color:var(--ink-soft); font-size:14px; font-weight:500; text-decoration:none;
  }
  .btn-ghost:hover{color:var(--wine);}
  .menu-btn{
    display:none; background:none; border:none; font-size:24px; color:var(--wine);
    width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;
    border-radius:10px;
  }
  .menu-btn:hover{background:var(--paper-deep);}

  .mobile-menu{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--card);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 30px -20px rgba(107,39,55,0.25);
    padding:10px 24px 24px;
    flex-direction:column;
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{
    text-decoration:none; color:var(--ink); font-size:15.5px; font-weight:600;
    padding:14px 4px; border-bottom:1px solid var(--line);
  }
  .mobile-menu a:last-of-type{border-bottom:none;}
  .mobile-menu .btn-primary{
    margin-top:16px; text-align:center; border-bottom:none; padding:14px 26px;
  }

  @media (max-width: 900px){
    nav.links{display:none;}
    .nav-cta .btn-ghost{display:none;}
    .menu-btn{display:flex;}
    header{position:sticky;}
  }
  @media (min-width: 901px){
    .mobile-menu{display:none !important;}
  }

  /* Navbar ringkas khusus layar HP — supaya logo + tombol + hamburger
     tetap muat rapi dalam satu baris, tidak mepet/kepotong. */
  @media (max-width: 480px){
    .nav{ height:64px; }
    .brand-mark{ width:28px; height:28px; }
    .brand-name{ font-size:17px; }
    .nav-cta{ gap:10px; }
    .nav-cta .btn-primary{
      padding:9px 14px; font-size:12.5px;
    }
    .menu-btn{ width:38px; height:38px; font-size:20px; }
  }
  @media (max-width: 360px){
    .nav-cta .btn-primary{ padding:8px 11px; font-size:11.5px; }
    .brand-name{ font-size:15.5px; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:96px 0 60px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
    min-width:0;
  }
  .hero-grid > *{ min-width:0; }
  @media(max-width:920px){ .hero-grid{grid-template-columns:1fr; text-align:center; gap:44px;} }
  @media(max-width:600px){ .hero{padding:44px 0 40px;} }

  .badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:999px;
    font-size:12px; font-weight:600; letter-spacing:0.06em;
    color:var(--wine);
    margin-bottom:26px;
  }
  .badge svg{width:13px;height:13px;}

  .hero h1{
    font-size:clamp(40px, 5.4vw, 66px);
    line-height:1.06;
    color:var(--wine-deep);
  }
  .hero h1 em{
    font-style:italic; color:var(--wine);
  }
  .hero-sub{
    margin-top:22px;
    font-size:18px;
    line-height:1.65;
    color:var(--ink-soft);
    max-width:480px;
  }
  @media(max-width:920px){ .hero-sub{margin-inline:auto;} }

  .hero-actions{
    margin-top:34px;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  }
  @media(max-width:920px){ .hero-actions{justify-content:center;} }
  .hero-note{
    font-size:13px; color:var(--ink-soft); font-style:italic;
  }

  .stat-row{
    display:flex; gap:34px; margin-top:46px; flex-wrap:wrap;
  }
  @media(max-width:920px){ .stat-row{justify-content:center;} }
  @media(max-width:420px){ .stat-row{gap:22px; margin-top:34px;} }
  .stat-row .stat b{
    display:block; font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--wine-deep);
  }
  .stat-row .stat span{
    font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em;
  }

  /* SIGNATURE: envelope + wax seal */
  .envelope-stage{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    perspective:1400px;
    width:100%; min-width:0;
  }
  .envelope{
    position:relative;
    width:400px; height:278px;
    filter:drop-shadow(0 30px 40px rgba(78,28,41,0.28));
    cursor:pointer;
  }
  /* Scale the whole envelope illustration down on narrow screens instead of
     reflowing its internal (fixed-px) parts, so it always stays centered
     and never overflows or gets clipped on a phone. min-width:0 above lets
     the grid track itself shrink below the envelope's own 400px — without
     that, the scale() below only shrinks it visually while the layout box
     still claims 400px, pushing content off-screen. */
  @media(max-width:600px){
    .envelope-stage{ transform:scale(0.78); margin:-30px 0; }
  }
  @media(max-width:480px){
    .envelope-stage{ transform:scale(0.62); margin:-52px 0; }
  }
  @media(max-width:380px){
    .envelope-stage{ transform:scale(0.5); margin:-70px 0; }
  }
  .env-body{
    position:absolute; inset:0; z-index:1;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
  }
  .env-flap{
    position:absolute; top:0; left:0; right:0; height:0; z-index:2;
    border-left:200px solid transparent;
    border-right:200px solid transparent;
    border-top:139px solid var(--rose);
    transform-origin:top center;
    animation: flapOpen 5s ease-in-out infinite;
    border-radius:0 0 2px 2px;
  }
  .env-shadowfold{
    position:absolute; left:0; right:0; bottom:0; top:92px;
    background:linear-gradient(180deg, transparent, rgba(107,39,55,0.06));
    clip-path:polygon(0 100%, 50% 20%, 100% 100%);
  }
  .letter{
    position:absolute; z-index:0;
    left:50%; top:8px;
    width:384px; height:250px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
    transform:translate(-50%, 12px);
    animation: letterRise 5s ease-in-out infinite;
    box-shadow:0 10px 22px -6px rgba(78,28,41,0.18);
  }
  .letter-photo{
    width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block;
    transition:opacity .3s ease;
  }
  .letter-photo-caption{
    position:absolute; left:10px; right:10px; bottom:10px;
    background:rgba(255,255,255,0.92); border-radius:8px;
    padding:7px 10px; display:flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; color:var(--wine-deep);
  }
  .seal{
    position:absolute; left:50%; top:116px; transform:translate(-50%,0);
    width:56px; height:56px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #cf9a3e, var(--gold) 60%, #8a6316 100%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
    animation: sealFade 5s ease-in-out infinite;
    z-index:4;
  }
  .seal svg{width:24px;height:24px;fill:#fff8ea;}

  @keyframes flapOpen{
    0%, 18%{transform:rotateX(0deg);}
    45%, 75%{transform:rotateX(-158deg);}
    100%{transform:rotateX(0deg);}
  }
  @keyframes letterRise{
    0%, 18%{transform:translate(-50%, 12px); z-index:0;}
    22%{z-index:3;}
    45%, 75%{transform:translate(-50%, -58px); z-index:3;}
    78%{z-index:0;}
    100%{transform:translate(-50%, 12px); z-index:0;}
  }
  @keyframes sealFade{
    0%, 15%{opacity:1; transform:translate(-50%,0) scale(1);}
    25%, 68%{opacity:0; transform:translate(-50%,0) scale(0.6);}
    80%, 100%{opacity:1; transform:translate(-50%,0) scale(1);}
  }
  @media (prefers-reduced-motion: reduce){
    .env-flap, .letter, .seal{animation:none;}
  }

  .floaty-tag{
    position:absolute; z-index:5;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 14px;
    font-size:12.5px; font-weight:600;
    color:var(--wine-deep);
    display:flex; align-items:center; gap:8px;
    box-shadow:0 12px 22px -10px rgba(78,28,41,0.25);
    white-space:nowrap;
  }
  .floaty-tag.a{ top:2%; left:-8%; }
  .floaty-tag.b{ bottom:0%; right:-10%; }
  @media(max-width:920px){ .floaty-tag{display:none;} }
  .floaty-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--rose);}

  /* ---------- SECTION BASICS ---------- */
  section{position:relative; z-index:1;}
  .section-pad{padding:96px 0;}
  @media(max-width:600px){ .section-pad{padding:60px 0;} }
  .section-head{
    text-align:center; max-width:600px; margin:0 auto 56px;
  }
  .section-head h2{
    font-size:clamp(30px,4vw,42px);
    color:var(--wine-deep);
    margin-top:12px;
  }
  .section-head p{
    margin-top:14px; color:var(--ink-soft); font-size:16px; line-height:1.6;
  }
  .on-wine .eyebrow{color:var(--gold-soft);}
  .on-wine .section-head h2{color:#fff;}
  .on-wine .section-head p{color:rgba(255,255,255,0.78);}

  /* ---------- CARA KERJA ---------- */
  .steps-band{
    background:var(--wine);
    color:#fff;
  }
  .steps{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step;
  }
  @media(max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .steps{grid-template-columns:1fr;} }
  .step{
    position:relative;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:16px;
    padding:28px 22px 24px;
  }
  .step .seal-num{
    counter-increment:step;
    width:40px;height:40px;border-radius:50%;
    background:var(--gold);
    color:var(--wine-deep);
    font-family:'Cormorant Garamond',serif; font-weight:600; font-size:18px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px;
  }
  .step .seal-num::before{content: counter(step);}
  .step h3{
    font-size:20px; color:#fff; margin-bottom:8px; font-weight:600;
  }
  .step p{
    font-size:14.5px; line-height:1.55; color:rgba(255,255,255,0.75); margin:0;
  }
  .step-connector{
    display:none;
  }

  /* ---------- FITUR ---------- */
  .feat-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  @media(max-width:900px){ .feat-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .feat-grid{grid-template-columns:1fr;} }
  .feat-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px 26px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .feat-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 30px -14px rgba(107,39,55,0.28);
  }
  .feat-ic{
    width:46px;height:46px;border-radius:12px;
    background:var(--paper-deep);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px; color:var(--wine);
  }
  .feat-ic svg{width:22px;height:22px;}
  .feat-card h3{
    font-size:19px; font-weight:600; font-family:'Work Sans',sans-serif; color:var(--ink); margin-bottom:8px;
  }
  .feat-card p{
    font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0;
  }

  /* ---------- TEMPLATE GALLERY ---------- */
  .filters{
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:40px;
  }
  .filter-btn{
    padding:10px 20px; border-radius:999px; border:1px solid var(--line);
    background:var(--card); font-size:13.5px; font-weight:600; color:var(--ink-soft);
    cursor:pointer; transition:.2s;
  }
  .filter-btn.active, .filter-btn:hover{
    background:var(--wine); color:#fff; border-color:var(--wine);
  }
  .tpl-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  @media(max-width:900px){ .tpl-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:600px){ .tpl-grid{grid-template-columns:1fr;} }
  .tpl-card{
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    overflow:hidden; box-shadow:0 10px 22px -14px rgba(107,39,55,0.2);
  }
  .tpl-thumb{
    height:170px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:24px; color:#fff;
    text-align:center; padding:20px;
  }
  .tpl-thumb.t1{background:linear-gradient(135deg,#6B2737,#9B4256);}
  .tpl-thumb.t2{background:linear-gradient(135deg,#B8862B,#8a6316);}
  .tpl-thumb.t3{background:linear-gradient(135deg,#C97B84,#6B2737);}
  .tpl-body{padding:18px 20px 22px;}
  .tpl-body .tag{
    font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--wine); font-weight:700;
  }
  .tpl-body h3{
    font-size:19px; font-weight:600; font-family:'Work Sans',sans-serif; margin:6px 0 6px;
  }
  .tpl-body p{
    font-size:13.5px; color:var(--ink-soft); margin:0 0 14px;
  }
  .tpl-body a{
    font-size:13.5px; font-weight:700; color:var(--wine); text-decoration:none;
  }

  /* ---------- KARTU KATEGORI (order/create.php tahap 1 & index.php) ---------- */
  .category-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  @media(max-width:900px){ .category-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .category-grid{grid-template-columns:1fr;} }
  .category-card{
    display:block; background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:26px 22px; text-decoration:none; color:inherit;
    box-shadow:0 10px 22px -14px rgba(107,39,55,0.2);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .category-card:hover{
    transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(107,39,55,0.32);
  }
  .category-card-emoji{ font-size:32px; display:block; margin-bottom:10px; }
  .category-card h3{
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:22px;
    color:var(--wine); margin:0 0 8px;
  }
  .category-card p{
    font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; line-height:1.55;
  }
  .category-card-count{
    font-size:12.5px; font-weight:700; color:var(--gold-deep, var(--wine));
  }
  .category-card-anims{
    display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px;
  }
  .category-card-anim-chip{
    display:inline-flex; align-items:center; font-size:11px; font-weight:700;
    padding:4px 10px; border-radius:999px; white-space:nowrap;
    background:linear-gradient(120deg, rgba(224,68,123,0.12), rgba(122,40,72,0.12));
    color:var(--wine); border:1px solid rgba(224,68,123,0.25);
    font-family:inherit; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  }
  .category-card-anim-chip:hover{
    background:linear-gradient(120deg, rgba(224,68,123,0.22), rgba(122,40,72,0.22));
    transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(224,68,123,0.4);
  }
  .category-card-anim-chip:active{ transform:translateY(0); }
  /* Chip ringkasan "+N lainnya" — dipakai saat animasi di satu kategori
     kepotong (lihat category-card-anims di index.php) supaya kartu tidak
     ikut padat, tapi tetap kasih tahu ada lebih banyak pilihan. */
  .category-card-anim-chip-more{
    cursor:default; background:var(--paper-deep, rgba(107,39,55,0.06));
    color:var(--ink-soft); border-color:var(--line);
  }
  .category-card-anim-chip-more:hover{
    background:var(--paper-deep, rgba(107,39,55,0.06)); transform:none; box-shadow:none;
  }
  .category-card-soon{
    cursor:default; opacity:0.6; filter:grayscale(0.3);
  }
  .category-card-soon:hover{ transform:none; box-shadow:0 10px 22px -14px rgba(107,39,55,0.2); }
  .category-card-count-soon{
    color:var(--ink-soft); font-weight:700; letter-spacing:0.02em;
  }

  /* ---------- Kartu Animasi Pembuka Spesial (homepage) ---------- */
  .anim-card-row{
    display:flex; gap:20px; overflow-x:auto; padding:6px 4px 18px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  /* Dipasang lewat JS cuma SELAGI auto-slide sedang aktif menggerakkan
     baris (lihat script auto-slide di index.php). scroll-snap-type bikin
     browser "menarik" scrollLeft balik ke kartu terdekat tiap kali kita
     ubah sedikit-sedikit lewat JS, jadi geserannya kelihatan macet/tidak
     jalan sama sekali — snap-nya dimatikan sementara saat itu, lalu
     otomatis balik aktif begitu auto-slide berhenti (pas disentuh user)
     supaya scroll manual tetap terasa "nge-klik" rapi ke tiap kartu. */
  .anim-card-row.is-auto-sliding{ scroll-snap-type:none; }
  .anim-card{
    flex:0 0 auto; width:230px; scroll-snap-align:start;
    display:flex; flex-direction:column;
  }
  .anim-card-thumb{
    width:100%; aspect-ratio:3/4; border-radius:20px; margin-bottom:14px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 16px 32px -18px rgba(107,39,55,0.35);
    position:relative; overflow:hidden;
  }
  .anim-card-thumb::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
  }
  .anim-card-icon{ font-size:64px; line-height:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.25)); position:relative; z-index:1; }
  .anim-card-icon-fallback{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    transition:opacity .3s ease;
  }
  .anim-card-live{
    position:absolute; inset:0; overflow:hidden; z-index:2;
  }
  .anim-card-live iframe{
    position:absolute; top:0; left:0; border:none;
    width:1200px; height:1600px;
    /* Kartu lebar 230px, iframe dirender di "layar virtual" 1200x1600 lalu
       diperkecil pas ke ukuran kartu — supaya animasi ASLI yang jalan di
       dalamnya (bukan gambar statis) tetap terlihat bergerak.
       CATATAN: sempat dikecilkan ke 480x640 buat hemat render, TAPI itu
       bikin sebagian animasi lama yang punya CSS "@media (max-width:1140px)"
       sendiri (mis. Pohon Cinta, Bunga Matahari — desain jQuery/Canvas lama
       lebar tetap 1100px, ditambahi media query supaya proporsional di HP
       asli) jadi SALAH KIRA kartu preview ini layar HP sungguhan lalu
       nge-scale ke ukuran yang keliru/mengecil drastis sampai nyaris tak
       kelihatan di kartu. Dikembalikan ke 1200x1600 (lebar di atas breakpoint
       manapun yang dipakai animasi-animasi ini) supaya semua animasi
       konsisten tampil dalam mode "desktop"-nya di kartu preview. Beban
       render puluhan animasi sekaligus tetap teratasi lewat
       IntersectionObserver di index.php (animasi kartu yang discroll
       menjauh dari layar dihentikan total, src iframe-nya dikembalikan ke
       about:blank) — itu yang jadi penyebab utama beranda berat, bukan
       resolusi per-animasinya. */
    transform:scale(calc(230 / 1200));
    transform-origin:top left;
    pointer-events:none; /* dekoratif saja — klik tetap jatuh ke tombol kartu, bukan ke animasi di dalamnya */
  }
  @media (max-width:600px){
    .anim-card-live iframe{ transform:scale(calc(200 / 1200)); }
  }
  .anim-card-title{
    font-family:'Cormorant Garamond', serif; font-weight:600; font-size:19px;
    color:var(--wine); margin:0 0 12px; text-align:center;
  }
  .anim-card-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
  .anim-card-btn{ width:100%; text-align:center; font-size:13.5px; padding:10px 14px; }
  @media (max-width:600px){ .anim-card{ width:200px; } }

  .back-to-categories{
    display:inline-block; margin-bottom:10px; font-size:13px; font-weight:600;
    color:var(--ink-soft); text-decoration:none;
  }
  .back-to-categories:hover{ color:var(--wine); }

  /* ---------- TESTIMONI ---------- */
  .testi-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  }
  @media(max-width:900px){ .testi-grid{grid-template-columns:1fr;} }
  .testi-card{
    background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px;
  }
  .testi-stars{color:var(--gold); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
  .testi-card p{font-size:14.5px; line-height:1.65; color:var(--ink); margin:0 0 18px; font-style:italic;}
  .testi-who{display:flex; align-items:center; gap:10px;}
  .testi-avatar{
    width:34px;height:34px;border-radius:50%;
    background:var(--paper-deep); color:var(--wine); font-weight:700; font-size:13px;
    display:flex;align-items:center;justify-content:center;
  }
  .testi-who b{font-size:13.5px; display:block;}
  .testi-who span{font-size:12px; color:var(--ink-soft);}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .faq-item{
    background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:'Work Sans',sans-serif; font-size:15.5px; font-weight:600; color:var(--ink);
  }
  .faq-q .plus{
    flex-shrink:0; width:24px;height:24px; border-radius:50%; border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center; color:var(--wine); font-size:16px;
    transition:transform .25s ease;
  }
  .faq-item.open .plus{transform:rotate(45deg); background:var(--wine); color:#fff; border-color:var(--wine);}
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    padding:0 22px;
  }
  .faq-item.open .faq-a{padding:0 22px 20px;}
  .faq-a p{margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-soft);}

  /* ---------- CTA ---------- */
  .cta-band{
    background:var(--wine-deep);
    border-radius:28px;
    padding:64px 40px;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  @media(max-width:600px){ .cta-band{padding:48px 24px; border-radius:22px;} }
  @media(max-width:600px){ #template.section-pad{ margin:0 12px; border-radius:24px; } }
  .cta-band::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 20% 20%, rgba(184,134,43,0.18), transparent 45%),
               radial-gradient(circle at 85% 80%, rgba(201,123,132,0.18), transparent 45%);
  }
  .cta-band > *{position:relative;}
  .cta-band h2{color:#fff; font-size:clamp(28px,4vw,40px); margin-bottom:14px;}
  .cta-band p{color:rgba(255,255,255,0.78); font-size:16px; margin-bottom:30px;}
  .cta-band .btn-primary{background:var(--gold); color:var(--wine-deep); box-shadow:0 14px 28px -10px rgba(184,134,43,0.5);}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--wine);
    color:rgba(255,255,255,0.85);
    padding:64px 0 30px;
    margin-top:40px;
  }
  .foot-grid{
    display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
    padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.14);
  }
  .foot-brand .brand-name{color:#fff;}
  .foot-brand p{max-width:280px; font-size:13.5px; color:rgba(255,255,255,0.65); margin-top:14px; line-height:1.6;}
  .foot-cols{display:flex; gap:56px; flex-wrap:wrap;}
  .foot-col h4{
    font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-soft);
    margin-bottom:14px; font-weight:700;
  }
  .foot-col a{
    display:block; font-size:13.5px; color:rgba(255,255,255,0.75); text-decoration:none; margin-bottom:10px;
  }
  .foot-col a:hover{color:#fff;}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:26px;
    font-size:12.5px; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:12px;
  }

  .skip-link:focus{
    position:fixed; top:10px; left:10px; background:#fff; color:var(--wine); padding:10px 16px; border-radius:8px; z-index:999;
  }
  :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* =============================================================
   ORDER FLOW, SURAT PUBLIK & KOMPONEN FORM
   (ditambahkan untuk backend: order/*, surat/view.php)
   ============================================================= */

.wrap-narrow{ max-width:680px; }

/* ---- Order step header ---- */
.order-header{
  background:rgba(251,243,231,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.order-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.step-progress{
  display:flex; gap:22px; list-style:none; margin:0; padding:0;
}
.step-progress li{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.step-progress .step-num{
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px;
  background:var(--card);
}
.step-progress li.active{ color:var(--wine-deep); }
.step-progress li.active .step-num{ background:var(--wine); border-color:var(--wine); color:#fff; }
.step-progress li.done .step-num{ background:var(--gold); border-color:var(--gold); color:#fff; }
@media(max-width:700px){
  .step-progress{ gap:12px; }
  .step-progress .step-label{ display:none; }
}

.order-step-banner{ text-align:center; max-width:600px; margin:0 auto 40px; }
.order-step-banner .eyebrow{ display:block; margin-bottom:10px; }
.order-step-banner h1{ font-size:clamp(26px,4vw,38px); color:var(--wine-deep); margin-bottom:12px; }
.order-step-banner p, .order-step-banner-p{ color:var(--ink-soft); font-size:15.5px; line-height:1.6; }

.order-step-actions{
  display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap;
}
@media(max-width:520px){ .order-step-actions{ flex-direction:column-reverse; } .order-step-actions .btn{ width:100%; text-align:center; } }

.btn-ghost-danger{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:999px; font-size:13.5px; font-weight:600;
  border:1px solid rgba(180,50,50,0.3); background:none; color:#a63a3a; cursor:pointer;
}

/* ---- Forms (order + admin share this look) ---- */
.order-form, .admin-form, .login-form{
  display:flex; flex-direction:column; gap:18px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:30px;
}
.order-form label, .admin-form label, .login-form label{
  display:flex; flex-direction:column; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.req{ font-weight:400; color:var(--ink-soft); font-size:12px; }
.order-form input[type="text"], .order-form input[type="url"], .order-form input[type="tel"], .order-form textarea, .order-form select,
.admin-form input[type="text"], .admin-form input[type="number"], .admin-form input[type="password"],
.admin-form select, .admin-form textarea,
.login-form input{
  font-family:'Work Sans', sans-serif;
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); font-size:14.5px; color:var(--ink);
}
.order-form select, .admin-form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B2737' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px; cursor:pointer;
}
.order-form input[type="file"]{
  font-family:'Work Sans', sans-serif;
  font-size:13.5px; color:var(--ink-soft);
  padding:10px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); cursor:pointer;
}
.order-form input[type="file"]::file-selector-button,
.order-form input[type="file"]::-webkit-file-upload-button{
  font-family:'Work Sans', sans-serif; font-size:13px; font-weight:600;
  padding:9px 18px; margin-right:14px; border:none; border-radius:999px;
  background:var(--wine); color:#fff; cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.order-form input[type="file"]::file-selector-button:hover,
.order-form input[type="file"]::-webkit-file-upload-button:hover{
  transform:translateY(-1px); box-shadow:0 8px 18px -6px rgba(107,39,55,0.5);
}
.order-form textarea, .admin-form textarea{ resize:vertical; min-height:90px; }
.order-form input:focus, .order-form select:focus, .order-form textarea:focus,
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus, .login-form input:focus{
  outline:2px solid var(--gold); outline-offset:1px;
}
.checkbox-label{ flex-direction:row !important; align-items:center; gap:10px !important; }
.admin-form-actions{ display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; }

/* ---- Photo grids ---- */
.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:10px; margin-top:14px; }
.photo-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.photo-grid-edit{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
.photo-grid-edit .photo-thumb{ position:relative; display:flex; flex-direction:column; gap:6px; }
.photo-caption-input{
  width:100%; padding:7px 9px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); font-size:12px; font-family:'Work Sans',sans-serif; color:var(--ink);
}
.photo-remove{
  position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
  background:var(--wine); color:#fff; border:2px solid var(--paper); font-size:15px; line-height:1;
  cursor:pointer;
}
.photo-thumb-new-badge{
  position:absolute; top:6px; left:6px; background:var(--wine); color:#fff;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:0.02em;
}
.photo-thumb-filename{
  font-size:12px; color:var(--ink-soft); text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- Preview frame ---- */
.preview-frame{
  position:relative; border:1px solid var(--line); border-radius:24px;
  background:var(--card); padding:10px; box-shadow:0 20px 40px -24px rgba(107,39,55,0.3);
}
.preview-frame-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--wine); color:#fff; font-size:11.5px; font-weight:700;
  padding:6px 16px; border-radius:999px; letter-spacing:0.04em;
}

/* ---- Checkout ---- */
.checkout-methods{ display:flex; flex-direction:column; gap:14px; }
.method-card{
  display:flex; flex-direction:column; gap:4px; padding:18px 20px;
  border:1.5px solid var(--line); border-radius:16px; cursor:pointer; background:var(--card);
}
.method-card input{ margin-bottom:6px; }
.method-title{ font-weight:700; font-size:15px; color:var(--ink); }
.method-desc{ font-size:13px; color:var(--ink-soft); }
.pay-instructions{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:32px; text-align:center; }
.pay-instructions h3{ font-size:20px; color:var(--wine-deep); margin-bottom:18px; }
.qr-image{ width:220px; height:220px; margin:0 auto; border-radius:14px; border:1px solid var(--line); }
.bank-box{ display:flex; flex-direction:column; gap:4px; background:var(--paper-deep); border-radius:14px; padding:18px; }
.bank-number{ font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--wine-deep); letter-spacing:0.03em; }
.bank-name{ font-size:13px; color:var(--ink-soft); }
.pay-note{ font-size:13px; color:var(--ink-soft); margin-top:12px; line-height:1.6; }

/* ---- Success page ---- */
.success-seal{
  width:64px; height:64px; border-radius:50%; background:var(--wine); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 20px;
}
.success-seal-pending{ background:var(--gold); }
.link-box{ display:flex; gap:10px; max-width:520px; margin:24px auto 0; flex-wrap:wrap; }
.link-box input{
  flex:1; min-width:200px; padding:13px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); font-size:13.5px; color:var(--ink-soft);
}

/* ---- Public surat/view.php ---- */
.surat-body{ background:var(--wine-deep); min-height:100vh; }
/* Ruang cadangan di bawah halaman supaya tombol musik mengambang (fixed
   di bawah layar) tidak pernah menutupi tombol/teks terakhir di halaman —
   kelas ini ditambahkan otomatis lewat JS begitu pemutar musik muncul. */
body.has-floating-player{ padding-bottom:140px; }
body.has-floating-player .surat-cta-footer{ margin-bottom:20px; }
.surat-stage{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  transition:opacity .4s ease;
}
.surat-envelope-cta{
  background:none; border:none; cursor:pointer; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  font-family:'Work Sans',sans-serif; font-size:15px; line-height:1.6;
  text-align:center;
}
.envelope-mini{
  width:90px; height:64px; background:var(--gold); border-radius:8px; position:relative;
  box-shadow:0 20px 40px -12px rgba(0,0,0,0.4);
  animation: envPulse 2.4s ease-in-out infinite;
}
.envelope-mini-flap{
  position:absolute; top:0; left:0; right:0; height:0;
  border-left:45px solid transparent; border-right:45px solid transparent;
  border-top:32px solid #E7CE9C;
}
@keyframes envPulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .envelope-mini{ animation:none; } }

.surat-content{ background:var(--paper); min-height:100vh; padding:60px 0 40px; }
.letter-open-wrapper{ max-width:100%; }
.letter-open{
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:44px 34px; text-align:center; box-shadow:0 24px 50px -30px rgba(107,39,55,0.35);
}
.letter-open-seal{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--wine);
  display:flex; align-items:center; justify-content:center;
}
.letter-open-seal img{ filter:brightness(0) invert(1); width:30px; height:30px; }
.letter-open-eyebrow{ font-size:13px; color:var(--ink-soft); margin:0; }
.letter-open-name{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(28px,5vw,42px); color:var(--wine-deep); margin:6px 0 24px; }
.letter-open-song{ aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin-bottom:26px; border:1px solid var(--line); }
.letter-open-message{
  font-size:16px; line-height:1.85; color:var(--ink); text-align:left; white-space:pre-wrap;
  max-width:520px; margin:0 auto;
}
.letter-open-signoff{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--wine); margin-top:26px; }
.letter-open-gallery-title{ font-size:20px; color:var(--wine-deep); margin:38px 0 16px; }
.letter-open-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; }
.letter-open-gallery img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.surat-cta-footer{ text-align:center; margin-top:44px; }
.surat-cta-footer p{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:17px;
  color:var(--wine); margin-bottom:14px;
}

/* =============================================================
   KARTU "PAMERIN KE STORY" (includes/share-story-card.php)
   ============================================================= */
.share-story-card{
  position:relative; text-align:center; margin-top:40px;
  padding:28px 24px 26px;
  background:linear-gradient(160deg, #fff, #fdf0f0);
  border:1px solid var(--line); border-radius:22px;
  box-shadow:0 16px 34px -20px rgba(107,39,55,0.3);
}
.share-story-text{
  font-size:14.5px; color:var(--ink-soft); line-height:1.6;
  max-width:380px; margin:0 auto 18px;
}
.share-story-actions{
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.share-story-btn{ min-width:220px; }
.share-story-btn-alt{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:220px; padding:11px 22px; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--wine-deep);
  background:#fff; border:1.5px solid var(--gold-soft); cursor:pointer;
}
.share-story-btn-alt:hover{ border-color:var(--gold); }
.share-story-btn:disabled, .share-story-btn-alt:disabled{ opacity:0.7; cursor:default; }
.share-story-info{
  position:absolute; top:16px; right:16px; width:26px; height:26px;
  border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--ink-soft); font-size:13px; font-style:italic; font-weight:700;
  cursor:pointer; line-height:1;
}
.share-story-popover{
  margin:16px auto 0; max-width:340px; text-align:left;
  background:var(--paper-deep); border-radius:12px; padding:12px 14px;
  font-size:12.5px; line-height:1.55; color:var(--ink-soft);
}

/* =============================================================
   UPGRADE HALAMAN SURAT PUBLIK — adegan buka amplop, player lagu,
   galeri polaroid, dan ornamen dekoratif.
   ============================================================= */

/* ---- Flourish divider (ornamen pemisah) ---- */
.flourish-divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--gold); margin:22px auto 26px; max-width:220px;
}
.flourish-divider span{ height:1px; flex:1; background:var(--line); }
.flourish-divider-tight{ max-width:140px; margin:36px auto 18px; }
.flourish-divider-tight span{ background:var(--line); }

/* ---- Song card (bungkus video jadi terasa seperti "pemutar musik") ---- */
.song-card{
  background:var(--paper-deep); border:1px solid var(--line); border-radius:18px;
  padding:16px 16px 18px; margin-bottom:28px;
}
.song-card-label{
  font-size:12.5px; font-weight:700; color:var(--wine); text-transform:uppercase;
  letter-spacing:0.06em; margin:0 0 10px;
}
.letter-open-song{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.letter-open-song-audio{ aspect-ratio:auto; border:none; overflow:visible; }
.letter-open-song-audio audio{ width:100%; border-radius:999px; }

/* ---- Pesan pembuka (opsional, tampil sebelum pesan utama) ---- */
.letter-open-opening-message{ margin-bottom:22px; font-style:italic; opacity:0.92; }

/* ---- Quote box (kutipan singkat yang ditonjolkan) ---- */
.letter-quote-box{
  position:relative; background:var(--paper-deep); border:1px solid var(--line); border-radius:16px;
  padding:22px 24px 20px; margin:8px 0 30px; text-align:center;
}
.letter-quote-mark{ color:var(--wine); opacity:0.35; margin-bottom:6px; }
.letter-quote-box p{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; line-height:1.55;
  color:var(--ink); margin:0;
}

/* ---- Video "Momen Random & Games" ---- */
.letter-random-video{
  aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--line);
  margin-top:14px; background:#000;
}
.letter-random-video video{ display:block; width:100%; height:100%; object-fit:contain; background:#000; }

/* ---- Caption di bawah tiap foto polaroid (opsional, kalau customer isi) ---- */
.polaroid-caption{
  font-family:'Caveat', cursive; font-size:15px; text-align:center; color:var(--ink);
  margin:6px 0 0; line-height:1.3;
}

/* ---- Polaroid photo gallery ---- */
.polaroid-gallery{
  display:flex; flex-wrap:wrap; justify-content:center; gap:22px 16px; padding:10px 6px 6px;
}
.polaroid-item{
  background:#fff; padding:10px 10px 22px; box-shadow:0 12px 24px -10px rgba(107,39,55,0.3);
  border-radius:3px; width:132px; transition:transform .25s ease, box-shadow .25s ease;
}
.polaroid-item img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:1px; }
.polaroid-rot-0{ transform:rotate(-4deg); }
.polaroid-rot-1{ transform:rotate(3deg); }
.polaroid-rot-2{ transform:rotate(-2deg); }
.polaroid-rot-3{ transform:rotate(4deg); }
.polaroid-item:hover{ transform:rotate(0deg) scale(1.05); box-shadow:0 18px 32px -12px rgba(107,39,55,0.4); z-index:2; }
@media(max-width:480px){ .polaroid-item{ width:112px; } }

/* ---- Fullscreen envelope-opening scene ---- */
.surat-open-scene{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(circle at 20% 15%, rgba(184,134,43,0.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(201,123,132,0.16), transparent 45%),
    var(--wine-deep);
  position:relative; overflow:hidden;
  transition:opacity .5s ease;
}
.surat-open-inner{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; color:#fff; }
.surat-open-greeting{ text-align:center; margin-bottom:30px; }
.surat-open-greeting h2{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:#fff;
  font-size:clamp(24px,6vw,32px); margin:0 0 8px; text-shadow:0 4px 18px rgba(0,0,0,0.25);
}
.surat-open-greeting p{ color:rgba(255,255,255,0.72); font-size:13.5px; margin:0; }
.surat-open-scene.opening .surat-open-greeting{ opacity:0; transition:opacity .3s ease; }
.surat-open-scene.opening{ pointer-events:none; }
.surat-open-scene.opening .surat-open-caption{ opacity:0; transform:translateY(8px); }

.surat-ambient{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.drift{
  position:absolute; color:rgba(255,255,255,0.16); font-size:22px;
  animation: driftUp 9s ease-in-out infinite;
}
.d1{ left:12%; bottom:-10%; animation-delay:0s; font-size:26px; }
.d2{ left:78%; bottom:-14%; animation-delay:1.6s; font-size:18px; }
.d3{ left:45%; bottom:-8%; animation-delay:3.2s; font-size:14px; color:rgba(231,206,156,0.35); }
.d4{ left:25%; bottom:-16%; animation-delay:4.8s; font-size:20px; }
.d5{ left:65%; bottom:-6%; animation-delay:2.4s; font-size:13px; color:rgba(231,206,156,0.3); }
@keyframes driftUp{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(-110vh) rotate(20deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .drift{ animation:none; display:none; } }

.surat-envelope-cta{
  background:none; border:none; cursor:pointer; color:#fff; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  font-family:'Work Sans',sans-serif; text-align:center;
}
.surat-envelope-cta:disabled{ cursor:default; }

.envelope-big{
  display:block; position:relative; width:220px; height:152px;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,0.35));
}
.envelope-big-body{
  position:absolute; inset:0; background:var(--card); border:1px solid rgba(0,0,0,0.06); border-radius:10px;
}
.envelope-big-flap{
  position:absolute; top:0; left:0; right:0; height:0;
  border-left:110px solid transparent; border-right:110px solid transparent;
  border-top:76px solid var(--rose);
  transform-origin:top center; transition:transform 1.1s cubic-bezier(.6,-0.1,.3,1.2);
}
.envelope-big-shadowfold{
  position:absolute; left:0; right:0; bottom:0; top:50px;
  background:linear-gradient(180deg, transparent, rgba(107,39,55,0.08));
  clip-path:polygon(0 100%, 50% 22%, 100% 100%);
}
.envelope-big-letter{
  position:absolute; left:50%; top:10px; width:174px; height:110px;
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  transform:translate(-50%, 18px); padding:16px 18px;
  transition:transform 1.1s cubic-bezier(.6,-0.1,.3,1.2), opacity .4s ease .5s;
  box-shadow:0 10px 20px -8px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; gap:9px;
}
.envelope-big-letter .lline{ height:6px; border-radius:4px; background:var(--line); display:block; }
.envelope-big-seal{
  position:absolute; left:50%; top:64px; transform:translate(-50%,0) scale(1); z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #cf9a3e, var(--gold) 60%, #8a6316 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,0.3);
  transition:transform .5s ease, opacity .5s ease;
}
.envelope-big-seal svg{ width:20px; height:20px; fill:#fff8ea; }

/* Saat "opening": flap terbuka, surat naik keluar, segel pecah & memudar */
.opening .envelope-big-flap{ transform:rotateX(-158deg); }
.opening .envelope-big-letter{ transform:translate(-50%, -92px); }
.opening .envelope-big-seal{ transform:translate(-50%,0) scale(0.4) rotate(25deg); opacity:0; }

/* ---- Adegan pembuka gaya "dua cincin pernikahan menyatu" (includes/opening-wedding.php) ---- */
.wedding-rings{
  position:relative; width:220px; height:150px;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,0.35));
}
.wedding-ring{
  position:absolute; top:20px; width:100px; height:100px;
  transition:transform 1.1s cubic-bezier(.6,-0.1,.3,1.2);
  animation:wdRingBob 3.2s ease-in-out infinite;
}
.wedding-ring-left{ left:14px; animation-delay:0s; }
.wedding-ring-right{ left:106px; animation-delay:1.6s; }
@keyframes wdRingBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .wedding-ring{ animation:none; } }

/* Saat "opening": cincin kiri-kanan bergeser saling mendekat & sedikit
   miring, seolah bertemu & menyatu di tengah. */
.opening .wedding-ring-left{ transform:translateX(46px) rotate(-18deg); animation:none; }
.opening .wedding-ring-right{ transform:translateX(-46px) rotate(18deg); animation:none; }

.wedding-sparkle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  color:#F3D68A; font-size:0; opacity:0;
  transition:transform .5s ease .9s, opacity .4s ease .9s, font-size 0s .9s;
}
.opening .wedding-sparkle{ opacity:1; font-size:22px; }
.opening .ws1{ transform:translate(-50%,-50%) translate(-22px,-16px) scale(1); }
.opening .ws2{ transform:translate(-50%,-50%) translate(20px,-12px) scale(1); }
.opening .ws3{ transform:translate(-50%,-50%) translate(0,18px) scale(1); }

/* ---- Adegan pembuka gaya "bedug ditabuh & ketupat bergoyang" (includes/opening-lebaran.php) ---- */

/* Latar foto masjid asli (Pexels), dengan lapisan gelap gradasi di atasnya
   supaya teks putih tetap terbaca jelas — timpa background gradient bawaan
   .surat-open-scene khusus untuk gaya "lebaran" ini saja. */
.lebaran-stage{
  background:
    linear-gradient(180deg, rgba(30,10,16,0.55), rgba(30,10,16,0.82)),
    url('https://images.pexels.com/photos/1631676/pexels-photo-1631676.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    var(--wine-deep);
}

.lebaran-title-moon{
  width:26px; height:26px; vertical-align:-4px; margin-left:6px;
  filter:drop-shadow(0 0 6px rgba(243,223,160,0.6));
}

.lebaran-scene{
  position:relative; width:260px; height:170px;
  display:flex; align-items:flex-end; justify-content:center;
}

/* Bedug: sekarang pakai gambar GIF asli (assets/img/bedug.gif), bukan
   bentuk yang digambar CSS lagi — animasi idle & "dipukul" tetap dipasang
   di wrapper .lebaran-bedug, jadi GIF-nya ikut kebawa gerak walau
   animasi framenya sendiri tetap jalan independen. */
.lebaran-bedug{
  position:relative; width:120px; height:120px; z-index:2;
  animation:lbBedugIdle 2.4s ease-in-out infinite; transform-origin:bottom center;
}
.lebaran-bedug-img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
@keyframes lbBedugIdle{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .lebaran-bedug{ animation:none; } }

/* Saat "opening": bedug seolah "dipukul" — gepeng sebentar lalu memantul & memudar */
.opening .lebaran-bedug{ animation:lbBedugHit .55s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes lbBedugHit{
  0%{ transform:scaleY(1) translateY(0); }
  30%{ transform:scaleY(.82) translateY(4px); }
  60%{ transform:scaleY(1.06) translateY(-6px); }
  100%{ transform:scale(1.15) translateY(-4px); opacity:0; }
}

/* Riak suara memancar dari permukaan bedug saat ditabuh */
.lebaran-bedug-ring{
  position:absolute; left:50%; top:50%; width:40px; height:40px;
  border:2px solid rgba(243,223,160,0.7); border-radius:50%;
  transform:translate(-50%,-50%) scale(.3); opacity:0;
}
.opening .lebaran-bedug-ring{ animation:lbRingPulse .9s ease-out forwards; }
.opening .r2{ animation-delay:.12s; }
.opening .r3{ animation-delay:.24s; }
@keyframes lbRingPulse{
  0%{ transform:translate(-50%,-50%) scale(.3); opacity:.8; }
  100%{ transform:translate(-50%,-50%) scale(2.6); opacity:0; }
}

/* Ketupat kiri-kanan — sekarang pakai gambar asli (assets/img/ketupat.png),
   diposisikan lebih menjauh dari bedug (bukan lagi nempel dekat) sesuai
   revisi terakhir. */
.lebaran-ketupat{
  position:absolute; bottom:64px; width:46px; height:46px;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.3));
  transform:rotate(8deg); transform-origin:top center;
  animation:lbKetupatSway 2.8s ease-in-out infinite;
}
.lebaran-ketupat-left{ left:-6px; transform:rotate(-8deg); }
.lebaran-ketupat-right{ right:-6px; animation-delay:1.4s; }
@keyframes lbKetupatSway{
  0%,100%{ transform:rotate(8deg) translateX(0); }
  50%{ transform:rotate(3deg) translateX(-3px); }
}
@media (prefers-reduced-motion: reduce){ .lebaran-ketupat{ animation:none; } }

/* Saat "opening": ketupat terayun keluar & memudar, berlawanan arah kiri-kanan */
.opening .lebaran-ketupat-left{ animation:lbKetupatOutL .9s ease forwards; }
.opening .lebaran-ketupat-right{ animation:lbKetupatOutR .9s ease forwards; }
@keyframes lbKetupatOutL{ to{ transform:rotate(-25deg) translate(-46px,-30px); opacity:0; } }
@keyframes lbKetupatOutR{ to{ transform:rotate(25deg) translate(46px,-30px); opacity:0; } }

/* ---- Adegan pembuka gaya "pengibaran bendera" (includes/opening-merdeka.php) ---- */

/* Latar foto bendera Merah Putih asli (Pexels) — overlay dibuat LEBIH TERANG
   & bernuansa merah hangat (bukan gelap-redup seperti tema lain), supaya
   suasananya kelihatan semarak/meriah khas 17 Agustus, bukan syahdu. */
.merdeka-stage{
  background:
    linear-gradient(180deg, rgba(206,17,38,0.35), rgba(120,10,20,0.55)),
    url('https://images.pexels.com/photos/13884489/pexels-photo-13884489.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    #CE1126;
}

.merdeka-scene{
  position:relative; width:180px; height:190px;
  display:flex; align-items:flex-end; justify-content:center;
}

/* Tiang bendera */
.merdeka-pole{
  position:relative; width:6px; height:170px;
  background:linear-gradient(90deg, #c9a35a, #8a6a30, #c9a35a);
  border-radius:3px 3px 0 0;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.merdeka-pole::before{
  content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f3dfa0, #c9a35a 70%);
}

/* Bendera Merah Putih — mulai dari bawah tiang, naik pelan ke atas saat "opening" */
.merdeka-flag{
  position:absolute; left:6px; bottom:6px; width:64px; height:44px;
  background:linear-gradient(180deg, #CE1126 50%, #ffffff 50%);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  transform-origin:left center;
  animation:mkFlagWave 2.4s ease-in-out infinite;
  transition:bottom 1.3s cubic-bezier(.3,.8,.3,1);
}
@keyframes mkFlagWave{
  0%,100%{ transform:skewY(0deg); }
  50%{ transform:skewY(-3deg); }
}
@media (prefers-reduced-motion: reduce){ .merdeka-flag{ animation:none; } }

/* Saat "opening": bendera naik ke puncak tiang, lalu tiang & bendera memudar */
.opening .merdeka-flag{ bottom:128px; }
.opening .merdeka-pole{ transition:opacity .5s ease .9s; opacity:0; }
.opening .merdeka-flag{ transition:bottom 1.3s cubic-bezier(.3,.8,.3,1), opacity .5s ease .9s; opacity:0; }

/* Confetti merah-putih meledak ke segala arah begitu bendera sampai puncak */
.merdeka-confetti{
  position:absolute; top:14px; left:50%; width:8px; height:14px;
  background:#CE1126; opacity:0; transform:translate(-50%,0) scale(.4);
}
.merdeka-confetti:nth-child(even){ background:#ffffff; }
.opening .merdeka-confetti{ animation:mkConfettiBurst .9s ease-out 1.1s forwards; }
.mc1{ } .mc2{ } .mc3{ } .mc4{ } .mc5{ } .mc6{ }
.opening .mc1{ --tx:-70px; --ty:-40px; --rot:140deg; }
.opening .mc2{ --tx:-30px; --ty:-70px; --rot:-80deg; }
.opening .mc3{ --tx:20px; --ty:-75px; --rot:200deg; }
.opening .mc4{ --tx:65px; --ty:-35px; --rot:-150deg; }
.opening .mc5{ --tx:-50px; --ty:-15px; --rot:60deg; }
.opening .mc6{ --tx:50px; --ty:-10px; --rot:-40deg; }
@keyframes mkConfettiBurst{
  0%{ opacity:.9; transform:translate(-50%,0) scale(.4) rotate(0deg); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), var(--ty)) scale(1) rotate(var(--rot)); }
}

/* ---- Adegan pembuka gaya "bunga mekar" (includes/opening-haribu.php) ---- */

/* Latar foto close-up mawar merah muda asli (Pexels), dengan lapisan
   gelap tipis di atasnya supaya teks putih tetap terbaca jelas — nuansa
   lembut & hangat, bukan gelap-redup seperti tema lain. */
.haribu-stage{
  background:
    linear-gradient(180deg, rgba(120,40,60,0.45), rgba(90,25,45,0.72)),
    url('https://images.pexels.com/photos/1231265/pexels-photo-1231265.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    #C2687D;
}

.haribu-scene{
  position:relative; width:180px; height:210px;
  display:flex; align-items:flex-end; justify-content:center;
}

/* Batang & daun */
.haribu-stem{
  position:relative; width:5px; height:120px;
  background:linear-gradient(180deg, #7ba05b, #5c8043);
  border-radius:3px;
}
.haribu-leaf{
  position:absolute; top:55px; width:26px; height:14px;
  background:#7ba05b; border-radius:0 100% 0 100%;
}
.hl-left{ left:-22px; transform:rotate(15deg); }
.hl-right{ right:-22px; transform:scaleX(-1) rotate(15deg); }

/* Kuncup/bunga — 6 kelopak tersusun radial, mulai rapat (kuncup),
   mekar terbuka saat "opening" */
.haribu-flower{
  position:absolute; left:50%; bottom:112px; width:10px; height:10px;
  transform:translateX(-50%);
}
.haribu-petal{
  position:absolute; top:50%; left:50%; width:34px; height:46px;
  background:linear-gradient(180deg, #F0AABB, #D6708C);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin:50% 100%;
  transition:transform 1.1s cubic-bezier(.34,1.2,.4,1), opacity .6s ease;
  animation:hiBudBob 3s ease-in-out infinite;
}
@keyframes hiBudBob{ 0%,100%{ margin-top:0; } 50%{ margin-top:-3px; } }
@media (prefers-reduced-motion: reduce){ .haribu-petal{ animation:none; } }

/* Posisi awal (kuncup): semua kelopak rapat & tegak lurus ke atas */
.p1{ transform:translate(-50%,-100%) rotate(0deg) scale(.32); }
.p2{ transform:translate(-50%,-100%) rotate(60deg) scale(.32); }
.p3{ transform:translate(-50%,-100%) rotate(120deg) scale(.32); }
.p4{ transform:translate(-50%,-100%) rotate(180deg) scale(.32); }
.p5{ transform:translate(-50%,-100%) rotate(240deg) scale(.32); }
.p6{ transform:translate(-50%,-100%) rotate(300deg) scale(.32); }

/* Saat "opening": tiap kelopak berputar keluar & membesar — mekar */
.opening .p1{ transform:translate(-50%,-100%) rotate(0deg) scale(1) rotateX(35deg); }
.opening .p2{ transform:translate(-50%,-100%) rotate(60deg) scale(1) rotateX(35deg); }
.opening .p3{ transform:translate(-50%,-100%) rotate(120deg) scale(1) rotateX(35deg); }
.opening .p4{ transform:translate(-50%,-100%) rotate(180deg) scale(1) rotateX(35deg); }
.opening .p5{ transform:translate(-50%,-100%) rotate(240deg) scale(1) rotateX(35deg); }
.opening .p6{ transform:translate(-50%,-100%) rotate(300deg) scale(1) rotateX(35deg); }

.haribu-flower-core{
  position:absolute; top:-10px; left:50%; width:20px; height:20px;
  transform:translate(-50%,-50%) scale(.4);
  background:radial-gradient(circle at 35% 30%, #F3DFA0, #D4AF37 70%);
  border-radius:50%; z-index:2;
  transition:transform 1s ease .3s;
  box-shadow:0 0 10px rgba(212,175,55,0.5);
}
.opening .haribu-flower-core{ transform:translate(-50%,-50%) scale(1); }

/* Bunga & batang memudar begitu mekar sempurna, sesaat sebelum surat terbuka */
.opening .haribu-flower, .opening .haribu-stem{
  transition:opacity .5s ease 1s;
  opacity:0;
}

/* Kilauan di sekitar bunga saat mekar */
.haribu-sparkle{
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(0);
  color:#F3DFA0; font-size:0; opacity:0;
  transition:transform .6s ease .4s, opacity .5s ease .4s, font-size 0s .4s;
}
.opening .haribu-sparkle{ opacity:1; font-size:18px; }
.opening .hs1{ transform:translate(-50%,-50%) translate(-46px,-30px) scale(1); }
.opening .hs2{ transform:translate(-50%,-50%) translate(44px,-24px) scale(1); }
.opening .hs3{ transform:translate(-50%,-50%) translate(0,-56px) scale(1); }

/* ---- Adegan pembuka gaya "lempar topi toga" (includes/opening-wisuda.php) ---- */

/* Latar foto wisuda asli (Pexels) — mahasiswi melempar topi toga di taman,
   dengan lapisan gelap navy di atasnya supaya teks putih tetap terbaca. */
.wisuda-stage{
  background:
    linear-gradient(180deg, rgba(10,20,45,0.55), rgba(10,20,45,0.82)),
    url('https://images.pexels.com/photos/19581378/pexels-photo-19581378.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    #1B3A6B;
}

.wisuda-scene{
  position:relative; width:200px; height:190px;
  display:flex; align-items:center; justify-content:center;
}

/* Topi toga (mortarboard) — papan hitam persegi + tombol & rumbai emas */
.wisuda-cap{
  position:relative; width:110px; height:70px;
  animation:wsCapIdle 2.8s ease-in-out infinite;
  transition:transform 1.1s cubic-bezier(.25,.65,.3,1.15), opacity .5s ease .9s;
}
@keyframes wsCapIdle{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-5px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce){ .wisuda-cap{ animation:none; } }

.wisuda-cap-board{
  position:absolute; top:0; left:0; width:110px; height:14px;
  background:linear-gradient(180deg, #232323, #0e0e0e);
  transform:perspective(200px) rotateX(55deg);
  box-shadow:0 6px 10px rgba(0,0,0,0.35);
}
.wisuda-cap-board::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-40%) rotate(45deg);
  width:44px; height:44px; background:#1a1a1a; border-radius:3px;
}
.wisuda-cap-button{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:#D4AF37; z-index:2;
}
.wisuda-cap-tassel{
  position:absolute; top:9px; left:50%; width:2px; height:38px;
  background:#D4AF37; transform-origin:top center; transform:rotate(18deg);
}
.wisuda-cap-tassel::after{
  content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; background:#D4AF37; border-radius:0 0 50% 50%;
}

/* Saat "opening": topi melambung tinggi sambil berputar, lalu memudar */
.opening .wisuda-cap{
  transform:translateY(-160px) rotate(680deg) scale(1.05);
  opacity:0; animation:none;
}

/* Confetti biru-emas meledak ke segala arah begitu topi dilempar */
.wisuda-confetti{
  position:absolute; top:50%; left:50%; width:8px; height:14px;
  background:#D4AF37; opacity:0; transform:translate(-50%,-50%) scale(.4);
}
.wisuda-confetti:nth-child(even){ background:#3A5A94; }
.opening .wisuda-confetti{ animation:wsConfettiBurst 1s ease-out .35s forwards; }
.opening .wc1{ --tx:-75px; --ty:-45px; --rot:150deg; }
.opening .wc2{ --tx:-35px; --ty:-80px; --rot:-90deg; }
.opening .wc3{ --tx:22px; --ty:-85px; --rot:210deg; }
.opening .wc4{ --tx:70px; --ty:-40px; --rot:-160deg; }
.opening .wc5{ --tx:-55px; --ty:10px; --rot:70deg; }
.opening .wc6{ --tx:55px; --ty:14px; --rot:-50deg; }
@keyframes wsConfettiBurst{
  0%{ opacity:.9; transform:translate(-50%,-50%) scale(.4) rotate(0deg); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); }
}

/* ---- Adegan pembuka gaya "countdown 3-2-1 lalu kembang api" (includes/opening-countdown.php) ---- */

/* Latar foto kembang api asli (Pexels), dengan lapisan gelap navy di
   atasnya supaya teks & angka countdown tetap terbaca jelas. */
.countdown-stage{
  background:
    linear-gradient(180deg, rgba(8,12,28,0.55), rgba(8,12,28,0.85)),
    url('https://images.pexels.com/photos/634694/pexels-photo-634694.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    #0c1226;
}

.countdown-scene{
  position:relative; width:200px; height:200px;
  display:flex; align-items:center; justify-content:center;
}

.countdown-number{
  position:relative; z-index:2;
  font-family:'Cormorant Garamond', serif; font-weight:700; font-style:italic;
  font-size:96px; line-height:1; color:#E8C468;
  text-shadow:0 0 24px rgba(232,196,104,0.6);
  transition:opacity .35s ease, transform .35s ease;
}
.countdown-number.pulse{ animation:tbNumberPulse .5s cubic-bezier(.3,.8,.3,1.1); }
@keyframes tbNumberPulse{
  0%{ transform:scale(.4); opacity:0; }
  55%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .countdown-number.pulse{ animation:none; opacity:1; transform:scale(1); } }

/* Begitu hitungan selesai (class "burst" ditambahkan via JS): angka
   memudar & 8 ledakan kembang api kecil memancar keluar dari tengah. */
.countdown-scene.burst .countdown-number{ opacity:0; transform:scale(1.3); transition:opacity .3s ease, transform .3s ease; }

.countdown-burst{
  position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%;
  background:#E8C468; opacity:0; transform:translate(-50%,-50%) scale(.5);
  box-shadow:0 0 8px 2px rgba(232,196,104,0.7);
}
.countdown-burst:nth-child(4n+1){ background:#E8544F; box-shadow:0 0 8px 2px rgba(229,84,79,0.7); }
.countdown-burst:nth-child(4n+2){ background:#F5F5F5; box-shadow:0 0 8px 2px rgba(245,245,245,0.7); }
.countdown-scene.burst .countdown-burst{ animation:tbFireworkBurst 1s ease-out forwards; }
.cb1{ --a:0deg; } .cb2{ --a:45deg; } .cb3{ --a:90deg; } .cb4{ --a:135deg; }
.cb5{ --a:180deg; } .cb6{ --a:225deg; } .cb7{ --a:270deg; } .cb8{ --a:315deg; }
@keyframes tbFireworkBurst{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1); }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(90px) scale(.4); }
}

/* Seluruh panggung countdown memudar halus begitu kembang api selesai,
   sesaat sebelum surat terbuka (stage disembunyikan penuh lewat JS). */
.opening .countdown-scene{ transition:opacity .4s ease .5s; opacity:0; }

/* ---- Adegan pembuka gaya "nyala lilin" (includes/opening-duka.php) ----
   SENGAJA tanpa confetti/ledakan/lompatan — cuma lilin yang menyala
   tenang, sesuai nada belasungkawa (lihat catatan di file PHP-nya). */

/* Latar foto lilin menyala asli (Pexels), dengan lapisan gelap tipis di
   atasnya supaya teks putih tetap terbaca jelas. */
.duka-stage{
  background:
    linear-gradient(180deg, rgba(15,15,20,0.55), rgba(15,15,20,0.82)),
    url('https://images.pexels.com/photos/5991717/pexels-photo-5991717.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    #1a1a20;
}

.duka-scene{
  position:relative; width:120px; height:180px;
  display:flex; align-items:flex-end; justify-content:center;
}

.duka-candle{ position:relative; width:34px; height:120px; }
.duka-candle-body{
  position:absolute; bottom:0; left:0; width:34px; height:100px;
  background:linear-gradient(90deg, #EDE6D6, #D9CFB8 45%, #EDE6D6);
  border-radius:3px 3px 2px 2px;
  box-shadow:inset -4px 0 8px rgba(0,0,0,0.12);
}
.duka-wick{
  position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
  width:2px; height:8px; background:#3a332a; border-radius:1px;
}

.duka-flame{
  position:absolute; bottom:106px; left:50%; width:14px; height:26px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 70%, #FFF3C4 0%, #F3B33D 45%, #E8724A 80%, transparent 100%);
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  filter:blur(.2px);
  animation:dukaFlicker 2.6s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes dukaFlicker{
  0%,100%{ transform:translateX(-50%) scaleY(1) rotate(0deg); opacity:.95; }
  25%{ transform:translateX(-50%) scaleY(1.06) rotate(-2deg); opacity:1; }
  50%{ transform:translateX(-50%) scaleY(.96) rotate(1deg); opacity:.9; }
  75%{ transform:translateX(-50%) scaleY(1.03) rotate(-1deg); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .duka-flame{ animation:none; } }

/* Cahaya lembut di sekitar nyala api */
.duka-candle::before{
  content:''; position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
  width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle, rgba(243,179,61,0.35) 0%, transparent 70%);
  z-index:-1;
}

/* Saat "opening": nyala api membesar sesaat (seperti tertiup lembut/doa
   dipanjatkan) lalu semuanya memudar perlahan — TIDAK ada ledakan. */
.opening .duka-flame{
  animation:dukaFlameRise 1.7s ease-out forwards;
}
@keyframes dukaFlameRise{
  0%{ transform:translateX(-50%) scaleY(1); opacity:1; }
  35%{ transform:translateX(-50%) scaleY(1.35) translateY(-4px); opacity:1; }
  100%{ transform:translateX(-50%) scaleY(1.1) translateY(-2px); opacity:0; }
}
.opening .duka-scene{
  transition:opacity .6s ease .9s;
  opacity:0;
}

/* ---- Adegan pembuka gaya "tos tangan" (includes/opening-persahabatan.php) ---- */
.persahabatan-stage{
  background:
    linear-gradient(180deg, rgba(20,70,65,0.5), rgba(20,70,65,0.8)),
    url('https://images.pexels.com/photos/9287491/pexels-photo-9287491.jpeg?auto=compress&cs=tinysrgb&w=1200') center/cover no-repeat,
    #1a4640;
}

.persahabatan-scene{
  position:relative; width:220px; height:150px;
  display:flex; align-items:center; justify-content:center;
}

.persahabatan-hand{
  position:absolute; top:50%; font-size:56px; line-height:1;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.3));
  transition:transform .55s cubic-bezier(.3,.6,.3,1.3);
  animation:frHandIdle 2.4s ease-in-out infinite;
}
.hand-left{ left:14px; transform:translateY(-50%) rotate(-18deg); animation-delay:0s; }
.hand-right{ right:14px; transform:translateY(-50%) scaleX(-1) rotate(-18deg); animation-delay:1.2s; }
@keyframes frHandIdle{ 0%,100%{ margin-top:0; } 50%{ margin-top:-5px; } }
@media (prefers-reduced-motion: reduce){ .persahabatan-hand{ animation:none; } }

/* Saat "opening": kedua tangan bergerak saling mendekat ke tengah lalu "bertos" */
.opening .hand-left{ transform:translateY(-50%) translateX(58px) rotate(-6deg); animation:none; }
.opening .hand-right{ transform:translateY(-50%) scaleX(-1) translateX(58px) rotate(-6deg); animation:none; }

.persahabatan-sparkle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  color:#FFD27A; font-size:0; opacity:0;
  transition:transform .5s ease .5s, opacity .4s ease .5s, font-size 0s .5s;
}
.opening .persahabatan-sparkle{ opacity:1; font-size:20px; }
.opening .ps1{ transform:translate(-50%,-50%) translate(-26px,-24px) scale(1); }
.opening .ps2{ transform:translate(-50%,-50%) translate(24px,-26px) scale(1); }
.opening .ps3{ transform:translate(-50%,-50%) translate(-22px,22px) scale(1); }
.opening .ps4{ transform:translate(-50%,-50%) translate(24px,20px) scale(1); }

.surat-open-caption{
  font-size:14.5px; line-height:1.7; transition:opacity .3s ease, transform .3s ease;
}
.surat-open-caption strong{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; }
.surat-open-hint{ display:block; margin-top:10px; font-size:12px; color:rgba(255,255,255,0.55); letter-spacing:0.03em; }

/* ---- Adegan pembuka gaya "pesawat kertas & garis jarak" (includes/opening-plane.php) ---- */
.plane-scene{
  cursor:pointer;
  background:
    radial-gradient(circle at 20% 15%, rgba(120,130,220,0.16), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(200,130,180,0.14), transparent 45%),
    linear-gradient(180deg, #0a0a1a 0%, #111133 40%, #1a1a4e 70%, #0d0d2a 100%);
}
.plane-stars{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.plane-star{
  position:absolute; background:#fff; border-radius:50%;
  animation:planeTwinkle ease-in-out infinite alternate;
}
@keyframes planeTwinkle{
  0%{ opacity:.3; transform:scale(1); }
  100%{ opacity:1; transform:scale(1.5); }
}
.plane-particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.plane-particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(255,180,200,0.65); opacity:0;
  animation:planeFloatUp ease-in forwards;
}
@keyframes planeFloatUp{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  20%{ opacity:.8; }
  80%{ opacity:.4; }
  100%{ opacity:0; transform:translateY(-200px) scale(.2); }
}
.plane-paper{
  position:absolute; font-size:30px; top:38%; left:-50px; z-index:1;
  animation:planeFlyAcross 6s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,200,200,0.55));
}
@keyframes planeFlyAcross{
  0%{ left:-50px; top:55%; transform:rotate(-10deg) scale(.8); opacity:0; }
  10%{ opacity:1; }
  50%{ top:28%; transform:rotate(5deg) scale(1.1); }
  90%{ opacity:1; }
  100%{ left:110%; top:45%; transform:rotate(-5deg) scale(.8); opacity:0; }
}
.plane-distance{ position:relative; width:min(78vw,320px); height:16px; margin:22px auto 0; z-index:1; }
.plane-line{
  position:absolute; top:50%; left:0; right:0; height:1px; transform:translateY(-50%);
  background:linear-gradient(90deg, transparent, rgba(255,180,200,0.55) 18%, rgba(255,180,200,0.55) 82%, transparent);
}
.plane-dot{
  position:absolute; top:50%; width:8px; height:8px; border-radius:50%;
  background:#FF9EB5; transform:translateY(-50%);
  animation:planeDotPulse 2s ease-in-out infinite;
}
.plane-dot.left{ left:0; }
.plane-dot.right{ right:0; }
@keyframes planeDotPulse{
  0%,100%{ box-shadow:0 0 4px rgba(255,158,181,0.5); }
  50%{ box-shadow:0 0 12px rgba(255,158,181,0.9); }
}
.plane-heart{
  font-size:44px; margin:16px auto 0; text-align:center; position:relative; z-index:1;
  animation:planeHeartGlow 2.5s ease-in-out infinite;
}
@keyframes planeHeartGlow{
  0%,100%{ opacity:.75; transform:scale(1); filter:drop-shadow(0 0 8px rgba(255,100,150,0.4)); }
  50%{ opacity:1; transform:scale(1.14); filter:drop-shadow(0 0 16px rgba(255,100,150,0.8)); }
}
.plane-scene.opening .plane-paper,
.plane-scene.opening .plane-heart{ animation:none; opacity:0; transition:opacity .4s ease; }
@media (prefers-reduced-motion: reduce){
  .plane-star, .plane-paper, .plane-dot, .plane-heart{ animation:none; }
}

/* ---- Adegan pembuka gaya "gerimis & hati patah" (includes/opening-rain.php) ---- */
.rain-scene{
  cursor:pointer;
  background:
    radial-gradient(circle at 20% 15%, rgba(122,156,198,0.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(60,90,150,0.16), transparent 45%),
    linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a1a2e 100%);
}
.rain-drops{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.rain-drop{
  position:absolute; top:-8%; width:2px; height:22px;
  background:linear-gradient(transparent, rgba(174,194,224,0.55));
  animation:rainFall linear infinite; opacity:0;
}
@keyframes rainFall{
  0%{ opacity:0; transform:translateY(0); }
  10%{ opacity:.7; }
  90%{ opacity:.35; }
  100%{ opacity:0; transform:translateY(115vh); }
}
.rain-tears{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.rain-tear{
  position:absolute; top:44%; width:6px; height:10px;
  background:rgba(174,194,224,0.65); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation:rainTearDrop ease-in forwards; opacity:0;
}
@keyframes rainTearDrop{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translateY(120px) scale(.8); }
}
.rain-heart-broken{
  font-size:60px; margin:14px auto 0; text-align:center;
  animation:rainHeartPulse 3s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
@keyframes rainHeartPulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.1); }
}
.rain-scene.opening .rain-heart-broken{ animation:rainHeartFade .6s ease forwards; }
@keyframes rainHeartFade{
  0%{ transform:scale(1); opacity:1; }
  55%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(0.8); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .rain-drop, .rain-tear, .rain-heart-broken{ animation:none; }
}

/* ---- Adegan pembuka gaya "dua cincin & bintang" (includes/opening-rings.php) ---- */
.rings-scene{ cursor:pointer; }
.rings-floating-hearts{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.rings-heart{
  position:absolute; bottom:0; color:#F8A4C8; opacity:0;
  animation:ringsHeartFloat 4s ease-in forwards;
}
@keyframes ringsHeartFloat{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-220px) scale(1.2) rotate(20deg); }
}
.rings-stage{ position:relative; width:170px; height:130px; margin:6px auto 0; }
.ring{
  position:absolute; top:22px; width:80px; height:80px; border:4px solid; border-radius:50%;
  animation:ringsPulse 2s ease-in-out infinite;
}
.ring-left{ left:8px; border-color:#F8A4C8; animation-delay:0s; }
.ring-right{ right:8px; border-color:var(--gold); animation-delay:.3s; }
@keyframes ringsPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.08); opacity:1; }
}
.rings-sparkle{
  position:absolute; width:4px; height:4px; background:var(--gold); border-radius:50%;
  animation:ringsSparkle 1.5s ease-in-out infinite;
}
.rings-sparkle.rs1{ left:14%; top:10%; animation-delay:0s; }
.rings-sparkle.rs2{ left:80%; top:20%; animation-delay:.4s; }
.rings-sparkle.rs3{ left:30%; top:85%; animation-delay:.8s; }
.rings-sparkle.rs4{ left:68%; top:75%; animation-delay:1.1s; }
@keyframes ringsSparkle{
  0%,100%{ opacity:0; transform:scale(0); }
  50%{ opacity:1; transform:scale(1.5); }
}
.rings-scene.opening .rings-stage{ animation:ringsPop .6s ease forwards; }
@keyframes ringsPop{
  0%{ transform:scale(1); opacity:1; }
  55%{ transform:scale(1.1); opacity:1; }
  100%{ transform:scale(0.85); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .ring, .rings-sparkle{ animation:none; }
}

/* ---- Adegan pembuka gaya "kue ulang tahun & tiup lilin" (includes/opening-cake.php) ---- */
.cake-wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; position:relative; z-index:1; }
.cake-stage{ position:relative; width:220px; height:260px; margin-top:20px; }

.cake-tier{ position:absolute; left:50%; transform:translateX(-50%); }
.cake-tier-base{
  bottom:0; width:180px; height:100px;
  background:linear-gradient(180deg,#F8A4C8 0%,#E8749A 100%);
  border-radius:12px 12px 20px 20px; box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.cake-tier-base::before{
  content:''; position:absolute; top:-20px; left:-10px; right:-10px; height:25px;
  background:linear-gradient(180deg,#FFF5F5,#F8A4C8); border-radius:50% 50% 0 0;
}
.cake-tier-mid{
  bottom:90px; width:150px; height:80px;
  background:linear-gradient(180deg,#FFD4E8 0%,#F8A4C8 100%);
  border-radius:10px 10px 0 0;
}
.cake-tier-mid::before{
  content:''; position:absolute; top:-15px; left:-8px; right:-8px; height:20px;
  background:linear-gradient(180deg,#FFFFFF,#FFD4E8); border-radius:50% 50% 0 0;
}
.cake-tier-top{
  bottom:160px; width:120px; height:60px;
  background:linear-gradient(180deg,#FFE8F0 0%,#FFD4E8 100%);
  border-radius:10px 10px 0 0;
}
.cake-tier-top::before{
  content:''; position:absolute; top:-12px; left:-6px; right:-6px; height:16px;
  background:linear-gradient(180deg,#FFFFFF,#FFE8F0); border-radius:50% 50% 0 0;
}

.cake-candles{
  position:absolute; left:50%; bottom:224px; transform:translateX(-50%);
  display:flex; gap:18px; z-index:2;
}
.cake-candle{ position:relative; width:8px; height:40px; background:none; border:none; padding:0; cursor:pointer; }
.cake-candle-stick{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#FFEAA7,#FDCB6E); border-radius:3px 3px 0 0; display:block;
}
.cake-candle-stick::after{
  content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  width:10px; height:4px; background:#E17055; border-radius:2px;
}
.cake-glow{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,200,50,0.4), transparent 70%);
  transition:opacity .4s ease;
}
.cake-flame{
  position:absolute; top:-20px; left:50%; transform:translateX(-50%);
  width:10px; height:18px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at bottom, #FFEAA7 0%, #FDCB6E 40%, #E17055 70%, transparent 100%);
  animation:cakeFlicker .3s ease-in-out infinite alternate;
}
.cake-flame::before{
  content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:5px; height:10px; border-radius:50%;
  background:radial-gradient(ellipse at bottom, #fff 0%, #FFEAA7 60%, transparent 100%);
}
@keyframes cakeFlicker{
  0%{ transform:translateX(-50%) scale(1) rotate(-2deg); }
  100%{ transform:translateX(-50%) scale(1.1) rotate(2deg); }
}
.cake-candle.is-out .cake-flame{ animation:cakeBlowOut .4s ease forwards; }
.cake-candle.is-out .cake-glow{ opacity:0; }
@keyframes cakeBlowOut{
  0%{ opacity:1; transform:translateX(-50%) scale(1); }
  50%{ opacity:.5; transform:translateX(-50%) scale(1.3,0.5); }
  100%{ opacity:0; transform:translateX(-50%) scale(0); }
}

.cake-scene.opening .cake-stage{ animation:cakePop .7s ease forwards; }
@keyframes cakePop{
  0%{ transform:scale(1); opacity:1; }
  55%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(0.9); opacity:0; }
}
.cake-caption{ text-align:center; }
@media (prefers-reduced-motion: reduce){
  .cake-flame{ animation:none; }
}

/* ---- Reveal animation saat isi surat muncul ---- */
.surat-content{ background:var(--paper); min-height:100vh; padding:60px 0 40px; }
.letter-reveal .letter-open{ animation: letterFadeUp .6s ease both; }
@keyframes letterFadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .letter-reveal .letter-open{ animation:none; }
}

/* =============================================================
   ADEGAN "BOTOL PESAN" — alternatif gaya pembuka selain amplop.
   Ilustrasi & animasi orisinal, palet warna brand (wine/gold/rose).
   ============================================================= */

.bottle-scene{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:64px;
  touch-action:none;
}
.bottle-scene.opening{ pointer-events:none; }

.bottle-sky{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, #3a1524 0%, #6B2737 38%, #C97B84 68%, #E7CE9C 100%);
}
.bottle-stars{ position:absolute; inset:0; z-index:1; }
.bstar{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,0.75); animation:starTwinkle 3.4s ease-in-out infinite;
}
.bs1{ top:8%; left:15%; } .bs2{ top:14%; left:70%; animation-delay:.6s; }
.bs3{ top:22%; left:40%; animation-delay:1.2s; } .bs4{ top:10%; left:85%; animation-delay:1.8s; }
.bs5{ top:28%; left:8%; animation-delay:2.2s; } .bs6{ top:18%; left:55%; animation-delay:.9s; }
@keyframes starTwinkle{ 0%,100%{opacity:.2;} 50%{opacity:1;} }

.bottle-caption{
  position:relative; z-index:2; text-align:center; color:#fff; padding:0 28px; max-width:420px;
}
.bottle-caption h1{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(24px,5vw,32px);
  margin-bottom:10px; text-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.bottle-caption p{ font-size:14px; color:rgba(255,255,255,0.85); }

.bottle-ocean{ position:absolute; left:0; right:0; bottom:120px; height:220px; z-index:1; overflow:hidden; }
.bottle-wave{
  position:absolute; left:-10%; width:120%; height:100%; border-radius:45% 45% 0 0;
  opacity:0.55; animation:waveSway 6s ease-in-out infinite;
}
.w1{ bottom:-10px; background:rgba(107,39,55,0.5); animation-duration:7s; }
.w2{ bottom:-26px; background:rgba(107,39,55,0.35); animation-duration:8.5s; animation-delay:.4s; }
.w3{ bottom:-42px; background:rgba(78,28,41,0.3); animation-duration:10s; animation-delay:.8s; }
@keyframes waveSway{
  0%,100%{ transform:translateX(0) scaleY(1); }
  50%{ transform:translateX(3%) scaleY(1.06); }
}
@media (prefers-reduced-motion: reduce){ .bottle-wave, .bstar{ animation:none; } }

.bottle-sand{
  position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1;
  background:linear-gradient(180deg, #E7CE9C 0%, #D9B87C 100%);
  border-radius:50% 50% 0 0 / 30px 30px 0 0;
}

.bottle-drag-wrap{
  position:relative; z-index:3; margin-top:22px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.bottle-drag-track{
  width:5px; height:170px; border-radius:999px; background:rgba(255,255,255,0.2); overflow:hidden;
}
.bottle-drag-fill{ width:100%; height:0%; background:var(--gold); transition:height .15s ease; }
.bottle-handle{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  background:none; border:none; cursor:grab; padding:0; touch-action:none;
}
.bottle-handle:active{ cursor:grabbing; }
.bottle-svg{ width:76px; height:126px; filter:drop-shadow(0 14px 22px rgba(0,0,0,0.35)); animation:bottleBob 3.6s ease-in-out infinite; }
@keyframes bottleBob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce){ .bottle-svg{ animation:none; } }

.bottle-drag-label{
  position:relative; z-index:3; margin-top:184px;
  color:rgba(255,255,255,0.85); font-size:13px; font-weight:600; letter-spacing:0.02em;
}

/* ---- Floating music player (khusus gaya botol) ---- */
.float-player{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:10px 16px 10px 10px; box-shadow:0 16px 32px -14px rgba(107,39,55,0.4);
  max-width:calc(100vw - 32px);
}
.float-player-art{
  width:38px; height:38px; border-radius:50%; background:var(--paper-deep);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.float-player.is-playing .float-player-art{ animation:artSpin 3s linear infinite; }
@keyframes artSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.float-player-info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.float-player-title{ font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.float-player-sub{ font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.float-player-btn{
  width:34px; height:34px; border-radius:50%; border:none; background:var(--wine); color:#fff;
  font-size:13px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}

/* =============================================================
   RIWAYAT SURAT SAYA (order/history.php)
   ============================================================= */
.history-list{ display:flex; flex-direction:column; gap:10px; }
.history-item{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; text-decoration:none; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.history-item:hover{ transform:translateY(-2px); box-shadow:0 14px 24px -16px rgba(107,39,55,0.3); }
.history-item-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.history-item-name{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--wine-deep); }
.history-item-meta{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:480px){
  .history-item{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* =============================================================
   UPSELL "LINK CUSTOM" DI HALAMAN CHECKOUT
   ============================================================= */
.custom-slug-box{
  border:1.5px dashed var(--gold); border-radius:16px; padding:16px 18px;
  background:var(--paper-deep); margin-bottom:6px;
}
.custom-slug-box .checkbox-label{
  font-size:14.5px; font-weight:700; color:var(--ink);
}
.custom-slug-price{
  color:var(--wine); font-weight:700; margin-left:2px;
}
.custom-slug-field{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.custom-slug-field input{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); font-size:14px; font-family:'Work Sans',sans-serif;
}

/* =============================================================
   OPSI "KEJUTAN SPESIAL" DI HALAMAN ISI SURAT (order/edit.php)
   ============================================================= */
.surprise-effect-box{
  border:1.5px dashed var(--gold); border-radius:16px; padding:16px 18px;
  background:var(--paper-deep); margin-bottom:18px;
}
.surprise-effect-box .checkbox-label{
  font-size:14.5px; font-weight:700; color:var(--ink);
}
.surprise-effect-price{
  color:var(--wine); font-weight:700; margin-left:2px;
}
.surprise-effect-field{ margin-top:4px; }
.surprise-effect-field select{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); font-size:14px; font-family:'Work Sans',sans-serif;
}
.surprise-effect-cat-label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); margin:14px 0 8px;
}
.surprise-effect-cat-label:first-child{ margin-top:2px; }
.surprise-effect-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px;
  max-height:300px; overflow-y:auto; padding:2px;
}
.surprise-effect-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 10px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card); cursor:pointer; text-align:center;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.surprise-effect-card:hover{ border-color:var(--gold); }
.surprise-effect-card.is-selected,
.surprise-effect-card:has(.surprise-effect-radio:checked){
  border-color:var(--wine); box-shadow:0 0 0 2px rgba(107,39,55,0.14);
  background:var(--paper);
}
.surprise-effect-radio{
  position:absolute; top:8px; left:8px; margin:0;
}
.surprise-effect-card-name{
  font-size:13px; font-weight:600; color:var(--ink); line-height:1.3;
  margin-top:6px;
}
.surprise-effect-card-preview{
  font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--wine); cursor:pointer;
}
.surprise-effect-card-preview:hover{ border-color:var(--wine); }
.surprise-effect-select-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.surprise-effect-select-row select{ flex:1; min-width:160px; }
.surprise-preview-btn{ white-space:nowrap; padding:10px 16px; font-size:13.5px; }

.surprise-preview-modal{
  position:fixed; inset:0; z-index:300; background:rgba(20,10,14,0.8);
  display:flex; align-items:center; justify-content:center;
}
.surprise-preview-modal[hidden]{ display:none; }
.surprise-preview-modal-inner{
  position:relative; width:100%; height:100%;
  background:#2B1F22; overflow:hidden;
}
@media (min-width:640px){
  .surprise-preview-modal{ padding:24px; }
  .surprise-preview-modal-inner{
    width:100%; max-width:420px; height:auto; aspect-ratio:9/16; max-height:88vh;
    border-radius:18px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
}
.surprise-preview-frame{ width:100%; height:100%; border:none; display:block; }
.surprise-preview-close{
  position:absolute; top:16px; right:16px; z-index:310;
  width:40px; height:40px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.95); color:#2B1F22; font-size:22px; line-height:1;
  cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.surprise-addon-summary{
  border:1.5px solid var(--line); border-radius:14px; padding:12px 16px;
  background:var(--card); font-size:14px; color:var(--ink); margin-bottom:6px;
}
.slug-preview{ color:var(--ink-soft); word-break:break-all; }
.checkout-total{
  text-align:center; font-size:15px; color:var(--ink-soft); margin:16px 0 0;
}
.checkout-total strong{ color:var(--wine-deep); font-size:19px; font-family:'Cormorant Garamond',serif; }

/* =============================================================
   QR CODE CANTIK DI HALAMAN SUKSES (order/success.php)
   ============================================================= */
.qr-card{
  display:inline-block; margin-top:28px; padding:18px;
  background:linear-gradient(145deg, #ffffff, #fdf3f5);
  border-radius:24px;
  border:2px solid transparent;
  background-image:
    linear-gradient(145deg, #ffffff, #fdf3f5),
    linear-gradient(135deg, #C2185B, #E7CE9C, #6B2737);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  box-shadow:0 20px 40px -20px rgba(194,24,91,0.35);
}
.qr-styled{ display:none; width:100%; height:100%; }

/* Bingkai "hati" QR — latar hati solid (dekoratif, motif garis tipis)
   dengan kotak QR TEGAK LURUS (tidak dimiringkan/dipotong) di tengahnya,
   jadi tetap 100% bisa dipindai normal seperti QR biasa. */
.qr-heart-wrap{ width:230px; height:230px; margin:16px auto 10px; position:relative; }
.qr-heart-bg{
  position:absolute; inset:0;
  clip-path:url(#qrHeartClip);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 20px),
    linear-gradient(145deg, #E8547A, #B4405A);
}
.qr-heart-square{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  width:132px; height:132px;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center;
}
.qr-heart-square .qr-styled,
.qr-heart-square .qr-image{
  width:118px; height:118px; border-radius:0; border:none; margin:0;
}
@media(max-width:480px){
  .qr-heart-wrap{ width:196px; height:196px; }
  .qr-heart-square{ width:114px; height:114px; }
  .qr-heart-square .qr-styled, .qr-heart-square .qr-image{ width:100px; height:100px; }
}
.qr-styled svg{ display:block; width:100%; height:100%; }
.qr-card .qr-image{
  width:240px; height:240px; border-radius:8px; border:none;
}
@media(max-width:480px){
  .qr-card{ padding:14px; }
  .qr-styled, .qr-card .qr-image{ width:200px; height:200px; }
}

/* =============================================================
   KOTAK PESAN (alert) — dipindahkan/disalin ke sini juga karena
   dipakai di halaman customer (order/*, setup.php) yang tidak
   memuat admin.css. admin.css tetap punya salinannya sendiri
   untuk halaman admin.
   ============================================================= */
.alert{ padding:14px 16px; border-radius:12px; font-size:13.5px; margin-bottom:18px; text-align:left; line-height:1.5; }
.alert-error{ background:#FBE7E7; color:#9B3A3A; border:1px solid #F0C6C6; }
.alert-success{ background:#E9F5EC; color:#2E6B3F; border:1px solid #C7E6CE; }
.alert-warn{ background:#FDF3E0; color:#8A5A11; border:1px solid #F3DFAE; }
.alert code{ background:rgba(0,0,0,0.06); padding:1px 6px; border-radius:4px; font-size:12.5px; }

/* =============================================================
   TABUR BUNGA (includes/flower-transition.php)
   Bunga-bunga (digambar sendiri pakai SVG, bukan foto) meletup dari
   tengah layar dan berhamburan ke segala arah sambil berputar & jatuh,
   lalu memudar — efek confetti perayaan, murni dekorasi di atas konten,
   tidak pernah menutupi/mengganggu interaksi apa pun.
   ============================================================= */
.flower-burst-layer{
  position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden;
}
.flower-burst-item{
  position:absolute;
  opacity:0;
  animation-name:flowerBurstFly;
  animation-timing-function:cubic-bezier(.15,.6,.3,1);
  animation-fill-mode:forwards;
}
.flower-burst-item svg{
  display:block; width:100%; height:100%;
  filter:drop-shadow(0 3px 6px rgba(78,28,41,0.3));
}
@keyframes flowerBurstFly{
  0%{ opacity:0; transform:translate(-50%,-50%) translate(0,0) rotate(0deg) scale(0.35); }
  14%{ opacity:1; }
  72%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}



/* =============================================================
   TOMBOL BACK & INFO POPUP HALAMAN DEMO PUBLIK (surat/demo.php)
   ============================================================= */
/* =============================================================
   TOMBOL PILIH KECEPATAN "Baca Cepat" / "Nikmati Pelan" — mengatur
   kecepatan auto-scroll DAN efek ketik sekaligus (surat/view.php,
   surat/demo.php).
   ============================================================= */
.speed-toggle{
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:80;
  display:flex; gap:6px; background:rgba(40,20,28,0.78); backdrop-filter:blur(6px);
  padding:5px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,0.2);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.speed-toggle.visible{ opacity:1; pointer-events:all; }
.speed-btn{
  border:none; background:transparent; color:#fff; font-size:11.5px; font-weight:700;
  padding:6px 13px; border-radius:999px; cursor:pointer; opacity:.75; transition:all .2s ease;
  white-space:nowrap;
}
.speed-btn:hover{ opacity:1; }
.speed-btn.active{ background:#fff; color:#4A2A32; opacity:1; }

.demo-back-btn{
  position:fixed; top:18px; left:18px; z-index:90;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.95); color:var(--wine);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.demo-info-wrap{ position:fixed; top:50%; right:16px; transform:translateY(-50%); z-index:90; }
.demo-info-btn{
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.95); color:var(--wine); font-size:17px;
  box-shadow:0 4px 12px rgba(0,0,0,0.18); cursor:pointer;
}
.demo-info-popup{
  position:absolute; top:0; right:48px;
  width:220px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:18px; box-shadow:0 16px 32px -12px rgba(78,28,41,0.35);
  opacity:0; transform:translateX(10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.demo-info-popup.open{ opacity:1; transform:translateX(0); pointer-events:all; }
.demo-info-eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; }
.demo-info-popup h3{ font-family:'Cormorant Garamond',serif; color:var(--wine-deep); font-size:19px; margin:4px 0 0; }
@media(max-width:480px){
  .demo-info-popup{ right:0; top:48px; width:200px; }
}

/* =============================================================
   FOTO DI DALAM SURAT (landing page hero, index.php) — bergantian
   otomatis tiap kali amplop "terbuka" pada siklus animasinya.
   ============================================================= */
.hero-slider-heart{ color:var(--rose); font-size:12px; }