/* =====================================================================
   revamp.css  —  muat SETELAH style.css
   Isi: 2 tema terang baru, tipografi, kartu, tombol, form, bottom-nav HP
   Hapus file ini + tag <link>-nya = kembali ke tampilan lama.
   ===================================================================== */

/* ---------- 1. TEMA BARU ---------- */
:root{--alt:rgba(0,0,0,.14);--r:20px}

/* Ivory & Blush (romantis klasik) */
body[data-theme="ivory"]{
  --bg1:#FFFCF8;--bg2:#F6E9E5;--text:#4A3B3B;--head:#7A4B4F;
  --gold:#94702F;--gold-l:#B8935A;--btn-text:#fff;
  --card-bg:rgba(255,255,255,.75);--input-bg:#fff;--input-text:#4A3B3B;
  --glow:rgba(184,147,90,.12);--shade:rgba(90,60,55,.16);
  --ui-bg:#fff;--ui-fg:#94702F;--alt:rgba(201,139,139,.10);
  --bf-a:#C98B8B;--bf-as:#F4E4E1;--bf-b:#B8935A;--bf-bs:#FFFCF8;--bf-body:#7A4B4F
}
/* Sage & Cream (natural / garden) */
body[data-theme="sagecream"]{
  --bg1:#FBF8F0;--bg2:#E9EEE3;--text:#38443A;--head:#4F6B4A;
  --gold:#A8663F;--gold-l:#B87850;--btn-text:#fff;
  --card-bg:rgba(255,255,255,.75);--input-bg:#fff;--input-text:#38443A;
  --glow:rgba(125,146,114,.14);--shade:rgba(56,68,58,.16);
  --ui-bg:#fff;--ui-fg:#4F6B4A;--alt:rgba(125,146,114,.13);
  --bf-a:#7D9272;--bf-as:#E8EDE3;--bf-b:#B87850;--bf-bs:#FBF8F0;--bf-body:#4F6B4A
}

/* ---------- 2. TIPOGRAFI ---------- */
body{font-family:'Jost',system-ui,sans-serif;font-size:1rem;line-height:1.75;font-weight:400}
.card h3,#guestName{font-family:'Cormorant Garamond',serif;font-weight:600}
.card h3{font-size:1.6rem;line-height:1.25}
#guestName{font-size:1.9rem}

/* label kecil (eyebrow) di sampul & hero */
#cover>p,.hero>p:not(.ornament){text-transform:uppercase;letter-spacing:.2em;font-size:.8rem}

/* judul section: huruf kapital elegan, bukan script besar */
#content h2.script{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.4rem;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.6rem;background:none;color:var(--gold)}
.wrap>h2.script::after{width:48px;height:1px;margin-top:.9rem}

/* nama mempelai tetap Great Vibes, kilau dibuat lebih tenang */
h1.gold-text{animation-duration:14s}

/* ---------- 3. KARTU, FOTO, HITUNG MUNDUR ---------- */
.card{border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);border-radius:var(--r);padding:1.8rem 1.4rem;
  box-shadow:0 12px 32px color-mix(in srgb,var(--shade) 55%,transparent)}
.card::before{display:none}               /* buang garis ganda di dalam kartu */

.photo-arch,.photo-round{border:5px solid var(--input-bg);
  box-shadow:0 0 0 1px var(--gold),0 14px 34px color-mix(in srgb,var(--shade) 60%,transparent)}

.countdown div{border:0;border-radius:var(--r);padding:1rem .2rem;
  box-shadow:0 8px 24px color-mix(in srgb,var(--shade) 45%,transparent)}
.countdown b{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:2.2rem;line-height:1.1}
.countdown span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}

.gb-item{border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:14px;padding:1rem 1.1rem;
  box-shadow:0 6px 18px color-mix(in srgb,var(--shade) 35%,transparent)}

/* ritme section: selang-seling latar (full-width walau .wrap sempit) */
#cdSec,#galSec,#rsvpSec{background:var(--alt);box-shadow:0 0 0 100vmax var(--alt);clip-path:inset(0 -100vmax)}

/* ---------- 4. TOMBOL & FORM ---------- */
.btn{font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.95rem 2.1rem;
  box-shadow:0 8px 22px color-mix(in srgb,var(--gold) 35%,transparent)}
.card a.btn,.card .btns .btn,.card .btn.copy{font-size:.75rem;padding:.7rem 1.4rem}
.btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold);box-shadow:none}

input,select,textarea{border:1.5px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:12px;
  padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent)}

/* pilihan kehadiran berbentuk tombol (pengganti dropdown) */
.seg{display:flex;gap:.4rem;margin:.35rem 0 .9rem}
.seg button{flex:1;font:inherit;font-size:.9rem;padding:.8rem .4rem;border-radius:12px;cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--gold) 35%,transparent);background:var(--input-bg);color:var(--input-text);
  transition:background .2s,color .2s,border-color .2s}
.seg button.on{background:var(--gold);border-color:var(--gold);color:var(--btn-text)}

/* ---------- 5. SAMPUL ---------- */
#cover{border:0}                          /* buang border double tebal */
#cover::before{inset:14px;border-radius:24px}
#cover .corner{opacity:.7}
#guestName{display:inline-block;padding:.6rem 1.6rem;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);background:var(--card-bg);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ---------- 6. HP: MENU MELAYANG DI BAWAH ---------- */
@media (max-width:899px){
  #topnav{display:flex;position:fixed;z-index:45;bottom:14px;left:12px;right:76px;gap:.2rem;padding:.4rem;
    overflow-x:auto;scrollbar-width:none;border-radius:999px;
    background:color-mix(in srgb,var(--bg2) 85%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);box-shadow:0 10px 30px var(--shade)}
  #topnav::-webkit-scrollbar{display:none}
  #topnav a{flex:0 0 auto;color:var(--head);text-decoration:none;font-size:.78rem;letter-spacing:.06em;
    padding:.5rem .85rem;border-radius:999px;white-space:nowrap}
  #topnav a.on{background:var(--gold);color:var(--btn-text)}
  footer.wrap{padding-bottom:6rem}        /* supaya footer tidak tertutup menu */
}

/* ---------- 7. DESKTOP ---------- */
@media (min-width:900px){
  body{font-size:1.05rem}
  #cover p,#content .hero p{font-size:.9rem}
  #content .hero p.ornament{font-size:1.2rem}
  #content h2.script{font-size:1.8rem;letter-spacing:.2em;margin-bottom:2.2rem}
  #content .wrap{padding:6rem 2rem}
  #guestName{font-size:2.2rem}
}

/* ---------- 8. KARTU ACARA: tombol utama + tombol sekunder (outline) ---------- */
.btns .btn.gcal,.btns .btn.ics{background:transparent;color:var(--gold);border:1.5px solid var(--gold);box-shadow:none}
.btns .btn.gcal:hover,.btns .btn.ics:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)}

/* ---------- 9. SAMPUL FOTO PENUH DI HP (desktop tetap foto di kiri, teks di kanan) ---------- */
@media (max-width:899px){
  #cover:has(#coverPhoto:not([hidden])){justify-content:safe flex-end;padding-bottom:3.2rem}
  #cover:has(#coverPhoto:not([hidden])) #coverPhoto{position:absolute;inset:0;z-index:-1;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;border:0;border-radius:0;box-shadow:none;margin:0}
  #cover:has(#coverPhoto:not([hidden]))::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.18) 55%,rgba(0,0,0,.4))}
  /* teks & ornamen jadi terang agar terbaca di atas foto, apa pun temanya */
  #cover:has(#coverPhoto:not([hidden])) p{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
  #cover:has(#coverPhoto:not([hidden])) h1.gold-text{background:none;color:#fff;animation:none;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  #cover:has(#coverPhoto:not([hidden])) #guestName{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
  #cover:has(#coverPhoto:not([hidden])) .corner{color:#fff;opacity:.55}
  #cover:has(#coverPhoto:not([hidden]))::before{border-color:rgba(255,255,255,.4)}
}