/*
  Identitas visual PPRPG Dewadaru
  - Kuning utama #fcc900, hitam sebagai warna dasar & teks
  - Stencil: tulisan "Dewadaru" dan H1  (Stencil / Stardos Stencil sebagai cadangan web)
  - H2, H3, isi, dan form: DM Sans (mudah dibaca)
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Stardos+Stencil:wght@400;700&display=swap');
:root{
  --yellow:#fcc900;--yellow-dark:#c99f00;--yellow-soft:#fff3bf;
  --black:#0b0b0b;--black2:#161616;--black3:#222;
  --paper:#fffdf4;--ink:#0b0b0b;--muted:#4a4a44;--line:#e6dfc3;--line-dark:#3a3a3a;
  --font-stencil:'Stencil','Stencil Std','Stardos Stencil','Allerta Stencil',Impact,sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--ink);font-family:var(--font-body);line-height:1.7}
img{max-width:100%}

/* Tipografi */
h1{font-family:var(--font-stencil);font-weight:700;line-height:1.08;text-transform:uppercase}
h2,h3{font-family:var(--font-body);font-weight:800;line-height:1.2;letter-spacing:-.02em}
.stencil{font-family:var(--font-stencil);font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* Hero & navigasi */
.hero{min-height:650px;background:radial-gradient(ellipse at 78% 25%,rgba(252,201,0,.16) 0%,transparent 48%),linear-gradient(135deg,#000,#141414);color:#fff;position:relative;overflow:hidden;padding:0 7%;border-bottom:6px solid var(--yellow)}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;gap:16px}
.brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-family:var(--font-stencil);font-weight:700;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase}
.brand .brand-text span{color:var(--yellow)}
.brand-logo{height:48px;width:auto;display:block}
.nav-link{color:var(--black);background:var(--yellow);text-decoration:none;font-size:.88rem;font-weight:700;padding:9px 16px;white-space:nowrap;transition:transform .2s}
.nav-link:hover{transform:translateY(-2px)}
.hero-content{max-width:800px;padding:90px 0 90px;position:relative;z-index:1}
.eyebrow{color:var(--black);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:700;margin:0 0 16px;display:inline-block;border-bottom:3px solid var(--yellow);padding-bottom:4px}
.hero .eyebrow,.rsvp-section .eyebrow{color:var(--yellow)}
h1 {
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  margin: 0 0 22px;
  letter-spacing: .01em;
  font-weight: 300; /* Kurangi ketebalan h1 (bisa ganti 500 untuk medium) */
}

h1 span {
  color: var(--yellow);
  white-space: nowrap;
  font-weight: 500; /* Menjaga teks di dalam span tetap tebal */
}
.hero-copy{max-width:540px;color:#e8e8e8;font-size:1.08rem;margin-bottom:32px}
.button{display:inline-flex;gap:22px;align-items:center;border:0;text-decoration:none;padding:14px 22px;font:700 .92rem var(--font-body);cursor:pointer;transition:transform .2s,opacity .2s,background .2s}
.button:hover{transform:translateY(-2px)}
.button-gold{background:var(--yellow);color:var(--black)}
.button-gold:hover{background:#ffd83a}
.hero-date{margin-top:44px;color:var(--yellow);font-size:.8rem;font-weight:700;letter-spacing:.22em}
.hero-decoration{position:absolute;right:5%;bottom:-120px;font:700 34rem/.9 var(--font-stencil);color:var(--yellow);opacity:.07;pointer-events:none}

/* Section umum */
.section{padding:100px 7%}
.intro{max-width:none;text-align:center;margin:0;background:var(--paper)}
.intro>*{max-width:850px;margin-left:auto;margin-right:auto}
.intro h2,.section-heading h2,.rsvp-copy h2{font-size:clamp(2.1rem,4vw,3.3rem);margin:0 0 24px}
.intro h2 em,.rsvp-copy h2 em{font-style:normal;color:var(--black);background:linear-gradient(transparent 58%,var(--yellow) 58%)}
.intro>p:last-child{color:var(--muted);max-width:680px;margin:0 auto;font-size:1.05rem}

/* Agenda */
.agenda{background:var(--yellow)}
.agenda .eyebrow{border-bottom-color:var(--black)}
.section-heading{text-align:center;margin-bottom:45px}
.section-heading h2{margin-bottom:10px}
.event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1100px;margin:auto}
.event-card{background:var(--paper);padding:36px;border:2px solid var(--black);position:relative;box-shadow:8px 8px 0 var(--black)}
.event-card-featured{background:var(--black);color:#fff}
.event-number{color:var(--black);font-family:var(--font-stencil);font-size:1.6rem;font-weight:700;letter-spacing:.06em}
.event-card-featured .event-number{color:var(--yellow)}
.event-number span{font-family:var(--font-body);font-size:.7rem;font-weight:700;margin-left:8px;letter-spacing:.15em}
.event-card h3{font-size:1.8rem;margin:22px 0 14px}
.event-card p{color:var(--muted)}
.event-card-featured p{color:#d6d6d6}
.event-details{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:20px;margin-top:25px;font-size:.92rem;font-weight:500}
.event-card-featured .event-details{border-color:var(--line-dark)}
.event-details span:before{content:'✦';color:var(--yellow-dark);margin-right:10px}
.event-card-featured .event-details span:before{color:var(--yellow)}
.text-link{display:inline-block;margin-top:22px;color:var(--black);font-weight:700;font-size:.9rem;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}
.event-card-featured .text-link{color:var(--yellow)}
.text-link:hover{text-decoration-color:currentColor}

/* RSVP */
.rsvp-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;background:var(--black);color:#fff}
.rsvp-copy{align-self:start;position:sticky;top:30px}
.rsvp-copy h2{font-size:clamp(2.6rem,5vw,4rem)}
.rsvp-copy h2 em{color:var(--yellow);background:none}
.rsvp-copy>p:last-child{color:#d0d0d0;max-width:380px}
.rsvp-form{display:grid;gap:18px}
.rsvp-form label{display:grid;gap:7px;font-size:.88rem;font-weight:600;color:#f2f2f2}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{width:100%;border:1px solid #4a4a4a;background:var(--black2);color:#fff;border-radius:0;padding:13px 14px;font:400 1rem var(--font-body);outline:none}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(252,201,0,.25)}
.rsvp-form input::placeholder,.rsvp-form textarea::placeholder{color:#8d8d8d}
.rsvp-form select option{background:var(--black2)}
.date-hint{color:var(--yellow);font-weight:500;font-size:.8rem}
.submit-button{justify-content:center;margin-top:5px}
.submit-button:disabled{opacity:.6;cursor:wait}
.form-message{margin:0;font-size:.92rem}
.form-message.success{color:#9be59a}
.form-message.error{color:#ff9f90}

/* Guestbook */
.guestbook{max-width:none;margin:0;background:var(--paper)}
.guestbook>.section-heading,.guestbook>.guestbook-list{max-width:1100px}
.guestbook>.section-heading{margin-left:auto;margin-right:auto}
.section-subtitle{color:var(--muted);margin-top:0}
.guestbook-list{max-width:850px;margin:0 auto;display:grid;gap:16px}
.comment{display:flex;gap:16px;padding:24px;background:#fff;border:1px solid var(--black);border-left:6px solid var(--yellow)}
.avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--black);color:var(--yellow);display:grid;place-items:center;font-family:var(--font-stencil);font-weight:700;font-size:1.25rem}
.comment-body{min-width:0;flex:1}
.comment-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.comment-head strong{color:var(--black)}
.comment-head span{font-size:.78rem;font-weight:600;color:var(--black);background:var(--yellow-soft);padding:2px 9px}
.comment-text{white-space:normal;overflow-wrap:anywhere;margin:12px 0;color:#2c2c28}
.comment-status{display:flex;gap:8px;flex-wrap:wrap}
.comment-status span{font-size:.74rem;font-weight:500;color:var(--black);border:1px solid var(--line);padding:4px 8px}
.empty-state{text-align:center;padding:35px;color:var(--muted);background:#fff;border:1px dashed var(--yellow-dark)}

/* Footer */
footer{text-align:center;background:var(--black);color:#d0d0d0;padding:55px 20px;border-top:6px solid var(--yellow)}
.footer-logo{height:84px;width:auto;display:block;margin:0 auto 18px}
footer>p:first-of-type{font-style:italic}
footer h3{color:#fff;font-size:1.7rem;margin:.4em 0}
footer h3 .stencil{color:var(--yellow)}
footer h3 span:not(.stencil){color:var(--yellow)}
footer>p{font-size:.9rem}
footer small{display:block;margin-top:25px;color:#8d8d8d;font-size:.75rem}

@media(max-width:760px){
  .hero{min-height:600px;padding:0 6%}
  .nav{height:72px}
  .brand{font-size:1rem}
  .brand-logo{height:40px}
  .nav-link{font-size:.76rem;padding:8px 12px}
  .hero-content{padding:80px 0 70px}
  .hero-decoration{font-size:20rem;bottom:-65px;right:-20px}
  .section{padding:70px 6%}
  .event-grid,.rsvp-section{grid-template-columns:1fr}
  .event-card{padding:26px;box-shadow:5px 5px 0 var(--black)}
  .rsvp-section{gap:40px}
  .rsvp-copy{position:static}
  .comment{padding:18px;gap:12px}
  .avatar{width:38px;height:38px;flex-basis:38px}
  /* Pengaturan ketebalan H1 khusus Mobile */
  h1 {
    font-weight: 600; /* Ubah ke 400, 500, 600, atau 700 sesuai tingkat ketebalan yang diinginkan */
  }

  h1 span {
    font-weight: 900; /* Atur ketebalan teks di dalam <span> jika ingin dibedakan */
  }
  
}