/* =========================================================
   TIMELINE OF US — stylesheet
   Mobile-first. Target: iPhone 15 (390x844) & Full HD (1920x1080)
   ========================================================= */

:root{
  --cream:#f7efe7;
  --cream-deep:#efe3d7;
  --dusty:#c98b93;
  --dusty-soft:#e7bfc2;
  --gold:#c9a227;
  --ink:#4a3f3a;
  --ink-soft:#7d6e66;
  --muted-bg:#eceae7;
  --muted-ink:#8d8a86;
  --white:#fffdfb;

  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-hand:"Caveat",cursive;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  --pad-x:clamp(18px,5vw,32px);
  --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}

html,body{
  margin:0;padding:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;          /* cegah bentrok swipe-back Safari */
}
body{
  min-height:100dvh;
  overflow:hidden;
  touch-action:pan-y;                /* horizontal dipegang JS, vertikal native */
}
img{display:block;max-width:100%;}
button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:var(--cream);
  transition:opacity .6s var(--ease),visibility .6s;
}
#loader.hide{opacity:0;visibility:hidden;}
.loader-heart{
  font-size:clamp(34px,9vw,48px);color:var(--dusty);
  animation:beat 1.1s ease-in-out infinite;
}
#loaderText{
  margin:0;font-size:clamp(12px,3.4vw,14px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* ---------- STAGE & CHAPTERS ---------- */
#stage{
  position:relative;
  width:100%;height:100dvh;
  overflow:hidden;
}
.chapter{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transform:translateX(40px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
  padding:calc(var(--safe-t) + 96px) calc(var(--pad-x) + var(--safe-r))
          0 calc(var(--pad-x) + var(--safe-l));   /* bawah 0: diurus .ch-foot */
}
.chapter.active{opacity:1;visibility:visible;transform:translateX(0);}
.chapter.leaving{opacity:0;transform:translateX(-40px);}

/* area konten yang boleh scroll vertikal di dalam chapter */
.ch-scroll{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  width:100%;max-width:1000px;margin-inline:auto;
}
.ch-scroll::-webkit-scrollbar{display:none;}

.ch-head{margin:0 0 clamp(18px,5vw,30px);text-align:center;}
.ch-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,8.5vw,56px);line-height:1.1;margin:0 0 6px;
}
.ch-sub{
  margin:0;font-size:clamp(12px,3.4vw,16px);color:var(--ink-soft);
  letter-spacing:.06em;font-weight:300;
}

/* ---------- FOOTER / NEXT BUTTON ----------
   Tombol ada DI DALAM area scroll, setelah konten terakhir.
   Jadi tombolnya baru terlihat kalau fotonya sudah digeser sampai bawah. */
.ch-foot{
  display:flex;justify-content:center;
  margin-top:clamp(26px,8vw,44px);
  padding-bottom:calc(var(--safe-b) + 18px);
}

/* ---------- PETUNJUK GESER KE BAWAH ---------- */
.scroll-hint{
  position:absolute;left:0;right:0;
  bottom:calc(var(--safe-b) + 10px);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:clamp(10px,2.8vw,12px);letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink-soft);
  text-shadow:0 1px 10px var(--cream),0 0 4px var(--cream);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
  pointer-events:none;z-index:5;
}
.scroll-hint.on{opacity:.55;visibility:visible;transform:none;}
.scroll-hint .chev{
  font-size:1.9em;line-height:.5;
  animation:nudge 1.9s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{transform:translateY(0);opacity:.65;}
  50%    {transform:translateY(4px);opacity:1;}
}
/* di layar gelap/terang tertentu warnanya disesuaikan */
.counter .scroll-hint{color:rgba(255,253,251,.85);text-shadow:0 1px 10px rgba(40,30,26,.7);}
.mood-muted .scroll-hint{color:var(--muted-ink);text-shadow:0 1px 10px var(--muted-bg);}
.jadian .scroll-hint{text-shadow:0 1px 10px #f3d9d5,0 0 4px #f3d9d5;}
.quiz .scroll-hint{text-shadow:0 1px 10px #f4e7f0,0 0 4px #f4e7f0;}
.closing .scroll-hint{text-shadow:0 1px 10px #f6e2e0,0 0 4px #f6e2e0;}
.next-btn{
  min-height:48px;min-width:44px;
  padding:13px clamp(26px,7vw,38px);
  border-radius:999px;
  background:var(--ink);color:var(--white);
  font-size:clamp(14px,3.8vw,16px);font-weight:500;letter-spacing:.03em;
  box-shadow:0 8px 22px rgba(74,63,58,.22);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .3s;
}
.next-btn:active{transform:scale(.96);}
@media (hover:hover){.next-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(74,63,58,.28);}}

/* ---------- DOTS ---------- */
#dots{
  position:fixed;z-index:60;left:50%;transform:translateX(-50%);
  top:calc(var(--safe-t) + 12px);
  display:flex;gap:2px;align-items:center;
  padding:4px 6px;border-radius:999px;
  background:rgba(255,253,251,.72);backdrop-filter:blur(10px);
  max-width:calc(100vw - 130px);overflow:hidden;
}
#dots button{
  width:22px;height:44px;                /* tap area tinggi 44px (standar Apple) */
  display:grid;place-items:center;flex:0 0 auto;
}
#dots button::after{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--dusty-soft);transition:all .3s var(--ease);
}
#dots button[aria-current="true"]::after{
  width:20px;border-radius:999px;background:var(--dusty);
}

/* ---------- BACK & MUSIC ---------- */
#backBtn,#musicBtn{
  position:fixed;z-index:70;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,253,251,.82);backdrop-filter:blur(10px);
  box-shadow:0 3px 12px rgba(74,63,58,.14);
  font-size:19px;color:var(--ink);
  transition:opacity .3s,transform .2s var(--ease);
}
#backBtn{top:calc(var(--safe-t) + 12px);left:calc(var(--safe-l) + 12px);}
#musicBtn{top:calc(var(--safe-t) + 12px);right:calc(var(--safe-r) + 12px);}
#backBtn:active,#musicBtn:active{transform:scale(.9);}
#backBtn[hidden]{display:none;}
#musicBtn.playing .music-icon{color:var(--dusty);animation:spin 3.4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* denyut halus selagi musik belum bunyi, sebagai isyarat "ada lagunya" */
#musicBtn.nudge::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--dusty);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%  {transform:scale(.9);opacity:.7;}
  70% {transform:scale(1.32);opacity:0;}
  100%{transform:scale(1.32);opacity:0;}
}

/* ---------- HERO ---------- */
.hero{padding:0;}
.hero .hero-inner{
  position:relative;flex:1;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;text-align:center;
  padding:0 calc(var(--pad-x) + var(--safe-l))
          calc(var(--safe-b) + 34px) calc(var(--pad-x) + var(--safe-r));
}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:var(--cream-deep);}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(40,30,26,.18) 0%,rgba(40,30,26,.1) 40%,rgba(40,30,26,.72) 100%);
}
.hero-text{position:relative;z-index:2;color:#fff;animation:fadeUp 1.1s var(--ease) both .3s;}
.hero-kicker{
  margin:0 0 8px;font-size:clamp(11px,3vw,13px);letter-spacing:.3em;
  text-transform:uppercase;opacity:.85;
}
.hero-name{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(44px,13vw,86px);line-height:1;margin:0 0 10px;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero-sub{margin:0 0 26px;font-size:clamp(13px,3.6vw,17px);opacity:.9;font-weight:300;}
.hero .next-btn{background:var(--white);color:var(--ink);}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- GALLERY ---------- */
.photo-list{display:flex;flex-direction:column;gap:clamp(20px,6vw,34px);padding-bottom:10px;}
.photo-item{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.photo-item.in{opacity:1;transform:none;}
.photo-item img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius);
  background:var(--cream-deep);
  box-shadow:0 10px 28px rgba(74,63,58,.13);
}
.photo-cap{
  margin:10px 2px 0;font-size:clamp(12px,3.3vw,14px);
  color:var(--ink-soft);font-style:italic;text-align:center;
}

/* mood: muted (Chapter Jeda) */
.mood-muted{background:var(--muted-bg);}
.mood-muted .ch-title{color:var(--muted-ink);letter-spacing:.04em;}
.mood-muted .ch-sub{color:#a6a3a0;}
.mood-muted .ch-head{margin-bottom:clamp(40px,14vw,80px);}
.mood-muted .photo-list{gap:clamp(48px,16vw,90px);padding-block:clamp(20px,8vw,50px);}
.mood-muted .photo-item img{filter:saturate(.45) brightness(1.03);box-shadow:none;}
.mood-muted .next-btn{background:var(--muted-ink);box-shadow:none;}

/* mood: warm */
.mood-warm{background:linear-gradient(170deg,var(--cream) 0%,#f9e6de 100%);}

/* mood: grid (Chapter 5) */
.mood-grid .photo-list{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(8px,2.6vw,14px);
}
.mood-grid .photo-item img{aspect-ratio:1/1;border-radius:12px;cursor:pointer;}
.mood-grid .photo-item:nth-child(6n+1) img{aspect-ratio:1/1.35;}
.mood-grid .photo-cap{font-size:11px;margin-top:6px;}

/* ---------- CHAPTER 4: JADIAN ---------- */
.jadian{background:linear-gradient(165deg,#fbf1ea 0%,#f3d9d5 100%);}
.jadian .ch-scroll{display:flex;flex-direction:column;justify-content:flex-start;text-align:center;}
.jadian-photo{
  width:100%;max-width:520px;margin:0 auto clamp(20px,6vw,30px);
  aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(160,110,105,.25);
}
.big-date{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(52px,16vw,120px);line-height:.95;
  color:var(--dusty);margin:0;
  opacity:0;transform:scale(.72);
}
.big-date.in{animation:pop 1s var(--ease) forwards;}
@keyframes pop{0%{opacity:0;transform:scale(.72)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.big-year{
  margin:2px 0 clamp(18px,5vw,28px);letter-spacing:.42em;
  font-size:clamp(12px,3.4vw,16px);color:var(--gold);
  opacity:0;animation:fadeUp .8s var(--ease) forwards .7s;
}
.jadian-quote{
  font-family:var(--font-hand);font-size:clamp(22px,6.4vw,34px);
  line-height:1.4;color:var(--ink);max-width:22ch;margin:0 auto;
  opacity:0;animation:fadeUp .9s var(--ease) forwards 1s;
}

/* ---------- LIVE COUNTER ---------- */
.counter{background:linear-gradient(160deg,#4a3f3a 0%,#6b544c 100%);color:var(--white);}
.counter .ch-scroll{display:flex;flex-direction:column;justify-content:flex-start;text-align:center;}
.counter .ch-title{color:var(--white);}
.counter .ch-sub{color:rgba(255,253,251,.66);}
.counter-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,3vw,18px);max-width:640px;margin:0 auto;
}
.counter-cell{
  padding:clamp(16px,5vw,26px) 8px;border-radius:var(--radius);
  background:rgba(255,253,251,.07);border:1px solid rgba(255,253,251,.13);
}
.counter-num{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(38px,11vw,64px);line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.counter-lbl{
  display:block;margin-top:6px;font-size:clamp(10px,2.8vw,12px);
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,253,251,.6);
}
.counter .next-btn{background:var(--white);color:var(--ink);}

/* ---------- CLOSING ---------- */
.closing{background:linear-gradient(175deg,var(--cream) 0%,#f6e2e0 100%);}
.closing .ch-scroll{display:flex;flex-direction:column;justify-content:flex-start;text-align:center;}
.closing-title{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,8vw,50px);margin:0 0 clamp(18px,5vw,28px);
  color:var(--dusty);
}
.closing-msg{
  font-family:var(--font-hand);
  font-size:clamp(20px,5.6vw,30px);line-height:1.55;
  max-width:26ch;margin:0 auto;
}
.closing-msg p{margin:0 0 .7em;opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);}
.closing-msg p.in{opacity:1;transform:none;}
.closing-sign{
  margin-top:clamp(20px,6vw,32px);font-family:var(--font-hand);
  font-size:clamp(18px,5vw,26px);color:var(--ink-soft);
  opacity:0;transition:opacity 1s var(--ease);
}
.closing-sign.in{opacity:1;}
.closing-heart{font-size:clamp(26px,7vw,36px);color:var(--dusty);margin-top:16px;animation:beat 1.6s ease-in-out infinite;}

/* ---------- QUIZ ---------- */
.quiz{background:linear-gradient(160deg,#fdf6ee 0%,#f4e7f0 100%);}
.quiz .ch-scroll{display:flex;flex-direction:column;justify-content:flex-start;}

/* ---------- PEMUSATAN YANG AMAN ----------
   Layar-layar ini isinya dipusatkan secara vertikal. Tapi kalau memakai
   justify-content:center dan isinya lebih tinggi dari layar, kelebihannya
   meluber KE ATAS dan tidak bisa digulir — bagian atas hilang permanen.

   Trik margin auto ini aman: saat masih muat, margin auto membagi sisa
   ruang sehingga isinya tetap di tengah. Saat isinya kepanjangan, margin
   auto jadi 0 sehingga isinya mulai dari atas dan bisa digulir penuh.
   Didukung semua browser yang mengenal flexbox. */
.jadian  .ch-scroll > :first-child,
.counter .ch-scroll > :first-child,
.closing .ch-scroll > :first-child,
.quiz    .ch-scroll > :first-child{margin-top:auto;}

.jadian  .ch-scroll > :last-child,
.counter .ch-scroll > :last-child,
.closing .ch-scroll > :last-child,
.quiz    .ch-scroll > :last-child{margin-bottom:auto;}
.quiz-card{
  width:100%;max-width:560px;margin:0 auto;
  background:var(--white);
  border:2px dashed var(--dusty-soft);
  border-radius:20px;
  padding:clamp(14px,4vw,22px);
  box-shadow:0 12px 32px rgba(180,120,130,.16);
}
.quiz-badge{
  display:inline-block;margin:0 0 12px;padding:5px 13px;border-radius:999px;
  background:var(--dusty-soft);color:#7d4a52;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.quiz-photo{
  width:100%;aspect-ratio:16/11;object-fit:cover;
  border-radius:12px;margin-bottom:14px;background:var(--cream-deep);
}
.quiz-q{
  margin:0 0 14px;font-size:clamp(15px,4.2vw,20px);font-weight:500;line-height:1.4;
}
.quiz-opts{display:flex;flex-direction:column;gap:9px;}
.quiz-opt{
  width:100%;min-height:48px;text-align:left;
  padding:12px 16px;border-radius:12px;
  border:1.5px solid var(--cream-deep);background:var(--cream);
  font-size:clamp(13px,3.8vw,15px);
  transition:all .2s var(--ease);
}
@media (hover:hover){.quiz-opt:not(:disabled):hover{border-color:var(--dusty);transform:translateX(3px);}}
.quiz-opt:disabled{cursor:default;}
.quiz-opt.correct{background:#dff3e3;border-color:#6bbd7f;font-weight:600;animation:bounce .5s var(--ease);}
.quiz-opt.wrong{background:#fae1e1;border-color:#d98b8b;opacity:.9;}
@keyframes bounce{0%,100%{transform:scale(1)}40%{transform:scale(1.05)}}
.quiz-feedback{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;
  font-size:clamp(13px,3.8vw,15px);line-height:1.5;
  background:var(--cream-deep);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.quiz-feedback.in{opacity:1;transform:none;}
.quiz .next-btn{opacity:0;pointer-events:none;background:var(--dusty);}
.quiz .next-btn.show{opacity:1;pointer-events:auto;}

/* ---------- LIGHTBOX ---------- */
#lightbox{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,22,20,.94);
  padding:calc(var(--safe-t) + 54px) 8px calc(var(--safe-b) + 54px);
  animation:fadeIn .25s var(--ease);
}
#lightbox[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lb-figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:10px;align-items:center;}
#lbImg{max-width:100%;max-height:78dvh;object-fit:contain;border-radius:10px;}
#lbCap{color:rgba(255,255,255,.78);font-size:13px;text-align:center;font-style:italic;}
#lbCap:empty{display:none;}
#lightbox button{
  position:absolute;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.13);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(6px);
}
.lb-close{top:calc(var(--safe-t) + 10px);right:10px;}
.lb-prev{left:10px;top:50%;transform:translateY(-50%);}
.lb-next{right:10px;top:50%;transform:translateY(-50%);}

/* ---------- CONFETTI ---------- */
#confetti{position:fixed;inset:0;z-index:120;pointer-events:none;}

/* =========================================================
   TABLET  481px - 1024px
   ========================================================= */
@media (min-width:481px){
  .photo-list{gap:30px;}
  .mood-grid .photo-list{grid-template-columns:repeat(3,1fr);}
  .counter-grid{grid-template-columns:repeat(4,1fr);}
  .photo-item img{aspect-ratio:3/2;}
}

/* =========================================================
   DESKTOP / LAPTOP FULL HD  1025px+
   ========================================================= */
@media (min-width:1025px){
  .chapter{padding-top:112px;padding-bottom:0;}
  .ch-scroll{max-width:1040px;}

  .ch-title{font-size:clamp(46px,3.4vw,64px);}
  .ch-sub{font-size:17px;}

  .photo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
  .photo-item img{aspect-ratio:4/3;}
  .mood-grid .photo-list{grid-template-columns:repeat(4,1fr);gap:16px;}
  .mood-grid .photo-item:nth-child(6n+1) img{aspect-ratio:1/1;}

  .mood-muted .photo-list{display:flex;max-width:560px;margin-inline:auto;}

  .ch-foot{padding-bottom:30px;}
  .quiz-card{max-width:680px;padding:28px;}
  .quiz-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .quiz-photo{aspect-ratio:16/8;}

  .hero-name{font-size:clamp(76px,5.6vw,110px);}
  .hero .hero-inner{padding-bottom:64px;}
  .hero-bg img{object-position:center 30%;}

  #dots{max-width:none;}
  #backBtn{left:24px;}
  #musicBtn{right:24px;}

  .counter-grid{max-width:860px;gap:22px;}
  .closing-msg{max-width:30ch;font-size:clamp(28px,1.9vw,34px);}
}

/* Full HD tuning */
@media (min-width:1600px){
  .ch-scroll{max-width:1100px;}
  .ch-title{font-size:68px;}
  .photo-list{gap:30px;}
  .closing-msg{font-size:36px;}
  .counter-num{font-size:72px;}
}

/* landscape mobile */
@media (max-height:520px) and (orientation:landscape){
  .chapter{padding-top:calc(var(--safe-t) + 72px);}
  .ch-head{margin-bottom:12px;}
  .ch-title{font-size:26px;}
  .counter-grid{grid-template-columns:repeat(4,1fr);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .photo-item,.big-date,.closing-msg p,.closing-sign{opacity:1!important;transform:none!important;}
}