/* ============================================================
   site.css — token warna/tipografi + komponen yang dipakai
   di SEMUA halaman (nav, toast, modal, hero, footer).
   Style khusus satu halaman (grid template, konten legal)
   ada di home.css / legal.css, JANGAN ditaruh di sini.
   ============================================================ */

:root{
  --red: #C81E2C;
  --red-dark: #7A0F1B;
  --cream: #FBF3E6;
  --paper: #FFFDF9;
  --gold: #D9A441;
  --gold-dark: #A87A2C;
  --ink: #241511;
  --ink-soft: #8a7a68;
  --line: #EADFC9;
  --green: #2E7D45;
  --radius: 18px;
}
*{ box-sizing:border-box; }
html{ -webkit-tap-highlight-color: transparent; }
body{
  margin:0;
  font-family:'Poppins', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:'Poppins', sans-serif; }

/* ---------------- Top nav ---------------- */
.topnav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: 12px 20px;
  background: rgba(251,243,230,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; color:var(--red-dark); letter-spacing:-0.01em; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--red); display:inline-block; }

.nav-actions{ display:flex; align-items:center; gap:8px; }
.btn{
  border:none; cursor:pointer; font-weight:600; font-size:13.5px;
  padding:9px 16px; border-radius:100px; font-family:'Poppins',sans-serif;
  transition: transform .12s ease, background .15s ease;
}
.btn:active{ transform: scale(0.96); }
.btn-ghost{ background:transparent; color:var(--red-dark); }
.btn-ghost:hover{ background:#F2E4CB; }
.btn-solid{ background:var(--red); color:#fff; }
.btn-solid:hover{ background:var(--red-dark); }

.user-chip{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 12px 5px 5px; border-radius:100px; background:#fff; border:1px solid var(--line);
}
.user-chip .avatar{
  width:28px; height:28px; border-radius:50%; background:var(--gold);
  color:#fff; font-weight:700; font-size:12.5px; display:flex; align-items:center; justify-content:center;
}
.user-chip .meta{ display:flex; flex-direction:column; line-height:1.15; }
.user-chip .meta .name{ font-size:12.5px; font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .meta .tier{ font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.tier.free{ color:var(--ink-soft); }
.tier.basic{ color:var(--gold-dark); }
.tier.premium{ color:var(--red); }

.dropdown{
  position:absolute; top:56px; right:20px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow: 0 12px 28px rgba(122,15,27,0.14); min-width:190px;
  padding:6px; display:none; z-index:50;
}
.dropdown.open{ display:block; }
.dropdown a, .dropdown button{
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:10px 12px; border-radius:9px; font-size:13px; font-weight:500; cursor:pointer; color:var(--ink);
}
.dropdown a:hover, .dropdown button:hover{ background:#F7EFDF; }
.dropdown .divider{ height:1px; background:var(--line); margin:4px 2px; }
.dropdown .upgrade{ color:var(--red-dark); font-weight:700; }

/* ---------------- Hero (dipakai di home & halaman legal) ---------------- */
.hero{ padding: 30px 20px 8px; max-width:1080px; margin:0 auto; text-align:center; }
.hero .eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;color:var(--red); margin:!important;
  
}
.hero h1{
  font-family:'Fraunces', serif; font-weight:600; font-size: clamp(26px, 5vw, 38px);
  margin:0 0 8px; color:var(--red-dark); line-height:1.15;
}
.hero p{ font-size:14px; color:var(--ink-soft); margin:0 auto; max-width:440px; line-height:1.55; }
.hero .updated{
  display:inline-block; margin-top:14px; font-size:12px; color:var(--ink-soft);
  background:#F2E4CB; border-radius:100px; padding:5px 13px;
}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; top:70px; left:50%; transform:translateX(-50%) translateY(-10px);
  z-index:90; max-width:92vw; width:420px; background:#fff; border-radius:14px;
  padding:13px 16px; box-shadow:0 14px 30px rgba(36,21,17,0.18); border:1px solid var(--line);
  display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:500;
  opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast .icon{ font-size:16px; line-height:1.3; }
.toast.success .icon{ color:var(--green); }
.toast.error .icon{ color:var(--red); }
.toast .close{ margin-left:auto; background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:16px; }

/* ---------------- Modal shell (dipakai auth-modal & upgrade-modal) ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(36,21,17,0.45); z-index:80;
  display:none; align-items:flex-end; justify-content:center;
}
.modal-backdrop.open{ display:flex; }
@media (min-width:640px){ .modal-backdrop{ align-items:center; } }

.modal{
  background:#fff; width:100%; max-width:400px; border-radius: 22px 22px 0 0;
  padding:22px 22px 26px; max-height:88vh; overflow-y:auto;
}
@media (min-width:640px){ .modal{ border-radius:20px; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head h2{ font-size:17px; margin:0; color:var(--red-dark); }
.modal-close{ background:none; border:none; font-size:20px; cursor:pointer; color:var(--ink-soft); line-height:1; padding:4px; }

/* ---------------- Auth modal specifics ---------------- */
.auth-tabs{ display:flex; gap:6px; margin-bottom:14px; background:#F7EFDF; padding:4px; border-radius:12px; }
.auth-tabs button{
  flex:1; padding:9px; border-radius:9px; border:none; background:transparent;
  font-weight:600; font-size:13px; cursor:pointer; color:var(--ink-soft);
}
.auth-tabs button.active{ background:#fff; color:var(--red-dark); box-shadow: 0 2px 6px rgba(122,15,27,0.1); }

.google-btn{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:11px; border-radius:11px; border:1.5px solid var(--line); background:#fff;
  font-weight:600; font-size:13.5px; color:var(--ink); margin-bottom:14px; cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.google-btn:hover{ background:#F7EFDF; border-color:var(--gold-dark); }
.google-btn img{ width:16px; height:16px; }

.auth-divider{ display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--ink-soft); font-size:11.5px; }
.auth-divider .line{ flex:1; height:1px; background:var(--line); }

input[type=email], input[type=password], input[type=text]{
  width:100%; padding:12px 13px; border-radius:11px;
  border:1.5px solid var(--line); font-family:'Poppins',sans-serif; font-size:14px; margin-bottom:9px;
  background:#FBF7EE;
}
input:focus{ outline:2px solid var(--gold); outline-offset:1px; }

.auth-error{ color:var(--red); font-size:12.5px; margin:-3px 0 9px; line-height:1.5; }
.auth-error.info{ color:var(--gold-dark); }
.auth-error .resend-link{ background:none; border:none; padding:0; margin-left:4px; color:var(--red-dark); font-weight:700; text-decoration:underline; cursor:pointer; font-size:12.5px; }

.modal-submit{
  width:100%; padding:13px; border-radius:11px; border:none; background:var(--red); color:#fff;
  font-weight:700; font-size:14.5px; cursor:pointer; margin-top:4px;
}
.modal-submit:hover{ background:var(--red-dark); }
.modal-submit:disabled{ background:#ccc; cursor:default; }

/* ---------------- Upgrade modal / pricing (shared, muncul dari dropdown di semua halaman) ---------------- */
.pricing{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.price-card{ border:1.5px solid var(--line); border-radius:14px; padding:15px 12px; text-align:center; position:relative; overflow:hidden; }
.price-card.highlight{ border-color:var(--red); background:#FDF3EF; opacity:0.94; }
.price-card h3{ margin:0 0 2px; font-size:14px; color:var(--red-dark); }
.price-card .amt{ font-size:19px; font-weight:800; margin:5px 0; }
.price-card .amt .per{ font-size:11px; font-weight:500; color:var(--ink-soft); }
.price-card p{ font-size:11.5px; color:var(--ink-soft); margin:0 0 12px; line-height:1.4; }
.price-card button{
  width:100%; padding:10px; border-radius:9px; border:none;
  background:var(--gold-dark); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer;
}
.price-card.highlight button{ background:var(--red); }
.price-card button:disabled{ background:#ccc; color:#fff; cursor:not-allowed; }

.upgrade-sub{ font-size:12.5px; color:var(--ink-soft); margin:-4px 0 14px; }
.feature-list{
  list-style:none; margin:0 0 14px; padding:0;
  text-align:left; font-size:11.5px; color:var(--ink-soft); line-height:1.7;
}
.feature-list li{ padding-left:18px; position:relative; }
.feature-list li::before{ content:'✓'; position:absolute; left:0; color:var(--green); font-weight:700; }
.soon-ribbon{
  position:absolute; top:10px; right:-28px; transform:rotate(35deg);
  background:var(--gold-dark); color:#fff; font-size:9.5px; font-weight:800;
  letter-spacing:0.04em; text-transform:uppercase; padding:3px 34px;
}

/* ---------------- Footer (baru, tampil di semua halaman) ---------------- */
.site-footer{ border-top:1px solid var(--line); padding:32px 20px 24px; margin-top:24px; }
.site-footer-inner{
  max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:flex-start; justify-content:space-between; gap:20px;
}
.site-footer-brand p{ font-size:12.5px; color:var(--ink-soft); margin:6px 0 0; }
.site-footer-links{ display:flex; flex-wrap:wrap; gap:18px; }
.site-footer-links a{ font-size:13px; color:var(--ink-soft); font-weight:500; }
.site-footer-links a:hover{ color:var(--red-dark); }
.site-footer-copy{ max-width:1080px; margin:20px auto 0; font-size:11.5px; color:var(--ink-soft); }