/* ============================================================
   THEME: COMIC LOVE STORY — Wildan & Anisa
   Basis desain dari inspo "undangan_comic_demo.html"
   ============================================================ */
:root{
  --paper:#f7f2e8;--cream:#efe6d5;--ink:#3f3a31;--rose:#b07a52;
  --sage:#7d865e;--line:#d9ccb6;--shadow:0 12px 30px #5b4a3422;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  background-image:radial-gradient(#a9967a22 .8px,transparent .8px);
  background-size:12px 12px;
}
button,input,select,textarea{font:inherit}
img{max-width:100%}
.center{text-align:center}
.small,.kecil{font:11px Arial;color:#8b796b;line-height:1.6}
.hand{font-family:Georgia,'Times New Roman',serif;font-style:italic}

/* ---------- tombol musik ---------- */
#musikBtn{position:fixed;right:16px;bottom:16px;z-index:60;width:48px;height:48px;
  border-radius:50%;border:1px solid var(--line);background:#fffdf8;color:var(--ink);
  cursor:pointer;font-size:18px;box-shadow:var(--shadow)}
#musikBtn.mati{opacity:.5}

/* ---------- COVER (gate) ---------- */
#cover{position:fixed;inset:0;z-index:100;background:var(--paper);
  background-image:radial-gradient(#a9967a22 .8px,transparent .8px);background-size:12px 12px;
  overflow:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  padding:48px max(20px,calc((100vw - 1050px)/2));
  transition:transform .8s ease,opacity .8s ease}
#cover.buka{transform:translateY(-100%);opacity:0}
#cover3d{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
#cover>.cover-copy,#cover>.art{position:relative;z-index:1}
.cover-copy{padding:25px 10px}
.cover-copy p{line-height:1.7;max-width:430px}
#cover h1{font-size:clamp(38px,7vw,74px)}
#namaTamu{font-weight:normal;font-size:30px;margin:6px 0;display:inline-block;
  padding:0 10px;border-bottom:1px dashed var(--line)}
.btn{border:0;background:var(--rose);color:#fff;border-radius:30px;padding:13px 20px;
  cursor:pointer;display:inline-block;text-decoration:none;font:12px Arial;letter-spacing:.5px;
  box-shadow:0 4px 0 #8d5f3c;margin-top:10px}
.btn:hover{filter:brightness(1.04)}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.kecil{padding:9px 14px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:16px}
.pager .btn{margin-top:0}
.eyebrow{font:11px Arial;letter-spacing:3px;text-transform:uppercase;color:var(--rose)}
.date-pill{display:inline-block;border:1px solid var(--line);border-radius:30px;
  padding:10px 16px;font:12px Arial;letter-spacing:2px;margin:6px 0}
.art{position:relative;min-height:440px;border:1px solid var(--line);
  border-radius:48% 48% 18px 18px;
  background:linear-gradient(#dde0d0,#edd7bd 65%,#ddc4a1);overflow:hidden;
  box-shadow:var(--shadow);display:flex;align-items:end;justify-content:center}
.sun{position:absolute;top:12%;left:25%;width:160px;height:160px;background:#f8eed6;
  border-radius:50%;opacity:.85}
.hill{position:absolute;bottom:0;width:120%;height:40%;border-radius:50% 50% 0 0;
  background:#9aa07f;left:-10%}
.hill.two{height:28%;background:#6f7860;left:10%;width:110%}
.sticker{position:absolute;z-index:3;background:#fff8e8;border:1px solid var(--line);
  padding:12px 15px;transform:rotate(-7deg);font-style:italic;box-shadow:var(--shadow);
  font-size:13px}
.sticker.one{top:14%;right:5%}
.sticker.two{bottom:9%;left:5%;transform:rotate(5deg)}
.cover-art-couple{position:relative;z-index:2;display:flex;align-items:flex-end;
  justify-content:center;gap:6px;margin-bottom:34px}
.cover-art-couple svg{width:82px;height:104px}
.cover-art-couple .love{font-size:26px;transform:translateY(-12px)}

/* ---------- layout utama ---------- */
.topbar{position:sticky;top:0;z-index:10;background:#fff9f0ef;border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;
  padding:12px max(18px,calc((100vw - 1050px)/2))}
.brand{font-size:13px;letter-spacing:3px}
.menu{display:flex;gap:8px;flex-wrap:wrap}
.menu a{color:var(--ink);text-decoration:none;font:12px Arial;padding:8px 10px;border-radius:30px}
.menu a:hover{background:var(--cream)}
.wrap{max-width:1050px;margin:auto;padding:20px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(42px,8vw,82px);line-height:.98;font-weight:normal;letter-spacing:-3px;margin:18px 0}
h2{font-size:clamp(30px,5vw,48px);font-weight:normal;margin-bottom:10px}
h3{font-size:23px;font-weight:normal;margin-bottom:8px}
.script{font-style:italic}
section{padding:75px 0;scroll-margin-top:70px}
.section-head{text-align:center;max-width:620px;margin:0 auto 32px}
.section-head p{line-height:1.7}

/* ---------- komik panel / story ---------- */
.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.panel{background:#fffdf8;border:1.5px solid var(--line);border-radius:15px;padding:16px;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.panel:after{content:'\2665';position:absolute;right:12px;top:5px;color:#c6ab8c;font-size:22px}
.panel-art{aspect-ratio:2006/784;border-radius:10px;background:linear-gradient(145deg,#e3dcc8,#e6cbb4);
  display:grid;place-items:center;font-size:60px;margin-bottom:15px;overflow:hidden}
.panel-art img{width:100%;height:100%;object-fit:cover;display:block}
.caption{font:11px Arial;letter-spacing:1.5px;text-transform:uppercase;color:var(--rose)}
.panel p,.event-card p{line-height:1.6;font-size:14px}

/* ---------- mempelai & event card ---------- */
.events{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.event-card{background:#fffdf8;border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:var(--shadow)}
.event-icon{font-size:44px;margin-bottom:8px}
.meta{font:13px Arial;line-height:1.9;color:#77675b}
.couple-badge{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  font-size:34px;border:1.5px solid var(--line);margin:0 auto 12px;background:#ffe3ec}
.couple-photo{display:block;width:100%;max-width:230px;aspect-ratio:2/3;object-fit:cover;
  border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);
  margin:0 auto 14px;background:var(--cream)}

/* ---------- countdown ---------- */
.count-wrap{background:#e8e2d3;border:1px solid #d2cab5;border-radius:25px;padding:38px 20px;text-align:center}
.count-grid{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:24px 0}
.count-box{min-width:75px;padding:14px 12px;background:#fffaf1;border:1px solid var(--line);border-radius:12px}
.count-box strong,.count-box b{font-size:29px;display:block;font-weight:normal}
.count-box span{font:11px Arial}

/* ---------- maps ---------- */
.map-card{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.map-art{min-height:230px;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center;
  background:repeating-linear-gradient(35deg,#eee7d9,#eee7d9 18px,#e1e7dc 19px,#e1e7dc 38px);font-size:54px}

/* ---------- galeri ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photo{aspect-ratio:3/4;border:7px solid #fffdf8;outline:1px solid var(--line);
  background:linear-gradient(145deg,#e8d6c3,#d5dfd3);display:grid;place-items:center;
  font-size:48px;box-shadow:var(--shadow);transform:rotate(var(--r,-2deg));overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo:nth-child(2){--r:2deg}
.photo:nth-child(3){--r:1deg}

/* ---------- dresscode ---------- */
.dress{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:25px 0}
.swatch{width:54px;height:54px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}

/* ---------- form ---------- */
.form-card{max-width:620px;margin:auto;background:#fffdf8;border:1px solid var(--line);
  border-radius:18px;padding:24px;box-shadow:var(--shadow)}
label{display:block;font:12px Arial;margin:15px 0 7px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;
  background:#fffaf5;color:var(--ink);font-family:Georgia,serif}
textarea{min-height:90px;resize:vertical}
.radio-row{display:flex;gap:15px;flex-wrap:wrap;font:13px Arial}
.radio-row label{display:flex;gap:6px;align-items:center}
.radio-row input{width:auto}
.notice{font:12px Arial;color:#7b6b5e;line-height:1.6}

/* ---------- QR ---------- */
#qrBox{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
#qrImg{display:flex;justify-content:center;background:#fff;padding:12px;border-radius:12px;
  border:1px solid var(--line);margin:10px auto;width:max-content}
#qrKode{font-size:20px;letter-spacing:2px}

/* ---------- messages / ucapan ---------- */
.messages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.message,.ucapan{background:#fffdf8;border:1px solid var(--line);border-radius:14px;
  padding:16px;font-size:14px;line-height:1.6}
.ucapan{margin-top:10px}

/* ---------- gift ---------- */
.gift{max-width:560px;margin:auto;border:1px dashed var(--rose);background:#fffdf8;
  border-radius:18px;padding:24px;text-align:center}
.amplop-norek{font:20px 'Courier New',monospace;letter-spacing:2px;background:#fffaf5;
  border:1px dashed var(--line);border-radius:10px;padding:12px;margin:10px 0}

/* ---------- penutup & footer ---------- */
.closing{max-width:640px;margin:auto;text-align:center;line-height:1.8}
.footer{text-align:center;padding:40px 15px;border-top:1px solid var(--line);font-style:italic}
.watermark{margin-top:18px}
.brand-badge{display:inline-block;margin-top:6px;padding:6px 16px;border:1px solid var(--line);
  border-radius:30px;font:12px Arial;letter-spacing:2px;background:#fffdf8}
.footer .by{font:11px Arial;margin-top:8px}
.footer .by a{color:var(--rose);text-decoration:none}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .menu{display:none}
  #cover{grid-template-columns:1fr;padding:25px 20px 45px;gap:20px}
  .cover-copy{text-align:center}
  .cover-copy p{margin-left:auto;margin-right:auto}
  .art{min-height:330px;grid-row:1}
  .story-grid,.events,.map-card{grid-template-columns:1fr}
  .gallery{gap:8px}
  .photo{font-size:35px;border-width:5px}
  .messages{grid-template-columns:1fr}
  .section-head{text-align:left}
  section{padding:55px 0}
}