:root{
  --brand: #256F4A;
  --brand-dark: #163B29;
  --brand-light: #5FBF7A;
  --accent: #F4A261;
  --accent-dark: #C97A3D;
  --bg: #FFF9F1;
  --paper: #FFFFFF;
  --ink: #1F2937;
  --ink-soft: #6B7280;
  --line: rgba(31,41,55,0.10);
  --shadow-sm: 0 1px 2px rgba(31,41,55,0.04), 0 1px 3px rgba(31,41,55,0.04);
  --shadow-md: 0 4px 10px rgba(31,41,55,0.06), 0 2px 4px rgba(31,41,55,0.04);
  --shadow-lg: 0 16px 32px rgba(31,41,55,0.10), 0 4px 10px rgba(31,41,55,0.05);
  --ease: cubic-bezier(.22,1,.36,1);
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; height:100%; }
body{ margin:0; background: var(--bg); color: var(--ink); font-family:'Plus Jakarta Sans', sans-serif; line-height:1.55; letter-spacing:-0.01em; min-height:100vh; display:flex; flex-direction:column; }
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 32px; width:100%; flex:1; }
img{ max-width:100%; }
.footer-logo-img{ height:30px; width:auto; display:block; }

/* ---------- NAV ---------- */
nav{ position: sticky; top:0; z-index: 50; background: rgba(255,249,241,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 2px 16px rgba(31,41,55,0.05); transition: box-shadow .25s ease, background .25s ease; }
nav.scrolled{ background: rgba(255,249,241,0.97); box-shadow: 0 6px 20px rgba(31,41,55,0.08); }
.nav-inner{ position:relative; max-width:1240px; margin:0 auto; padding:14px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; min-width:0; }
.logo-mark{ width:34px; height:34px; flex-shrink:0; }
.logo-img{ height:40px; width:auto; display:block; flex-shrink:0; }
.logo-word{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.02em; }
.logo-word .dark{ color: var(--brand-dark); }
.logo-word .bright{ color: var(--brand-light); }
.logo-tagline{ font-size:11px; color: var(--ink-soft); font-weight:500; margin-top:-2px; display:block; }
.nav-links{ display:flex; gap:26px; font-size:14.5px; font-weight:500; }
.nav-links a{ color: var(--ink); text-decoration:none; position:relative; padding:4px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; border-radius:2px; background: var(--brand); transition: right .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a:hover, .nav-links a.active{ color: var(--brand); }
.nav-right{ display:flex; align-items:center; gap:12px; }

/* Hamburger toggle — hidden on desktop, shown on tablet/mobile */
.nav-burger{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--paper); cursor:pointer; flex-shrink:0; }
.nav-burger svg{ width:19px; height:19px; }
.nav-burger .icon-close{ display:none; }
.nav-burger.open .icon-menu{ display:none; }
.nav-burger.open .icon-close{ display:block; }

@media (max-width:900px){
  .nav-inner{ flex-wrap:nowrap; padding:12px 20px; }
  .nav-links{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; left:0; right:0; top:100%;
    background: var(--paper); border-bottom:1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding:10px 20px 16px;
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height .3s var(--ease), opacity .2s ease, padding .3s var(--ease);
  }
  .nav-links.open{ max-height:260px; opacity:1; padding:14px 20px 20px; }
  .nav-links a{ padding:12px 4px; font-size:15.5px; border-bottom:1px solid var(--line); }
  .nav-links a:last-child{ border-bottom:none; }
  .nav-links a::after{ display:none; }
  .nav-burger{ display:flex; }
  .nav-right{ gap:8px; }
  #connectBtn, .wallet-pill{ padding:9px 14px; font-size:12.5px; }
}
@media (max-width:480px){
  .logo-img{ height:30px; }
  .nav-inner{ padding:10px 14px; gap:8px; }
  .nav-right{ gap:6px; }
  #connectBtn, .wallet-pill{ padding:8px 10px; font-size:11.5px; }
  .nav-burger{ width:34px; height:34px; }
}
@media (max-width:420px){
  .lang-switch{ display:none; }
}

/* ---------- LANG SWITCHER ---------- */
.lang-switch{ display:flex; align-items:center; background: var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px; box-shadow: var(--shadow-sm); flex-shrink:0; }
.lang-btn{ border:none; background:transparent; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:700; font-family:'Space Mono', monospace; color: var(--ink-soft); cursor:pointer; transition: background .2s ease, color .2s ease; }
.lang-btn.active{ background: var(--brand); color:#fff; }

#connectBtn{ background: var(--brand); color:#fff; border:none; padding:11px 22px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer; transition: transform .2s var(--ease), background .2s ease; white-space:nowrap; }
#connectBtn:hover{ background: var(--brand-dark); transform: translateY(-2px); }
#connectBtn:active{ transform: translateY(0) scale(.97); }
.wallet-pill{ font-family:'Space Mono', monospace; font-size:13px; background: var(--paper); border:1px solid var(--line); padding:9px 16px; border-radius:999px; color:var(--brand-dark); }

.badge-pill{ display:inline-flex; align-items:center; gap:7px; background: rgba(95,191,122,0.16); color: var(--brand-dark); font-size:13px; font-weight:600; padding:7px 16px; border-radius:999px; margin-bottom:18px; }
.section-eyebrow{ font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent-dark); margin:0 0 6px; }
h1,h2,h3{ font-family:'Plus Jakarta Sans', sans-serif; color: var(--ink); }
h2{ font-weight:700; font-size:27px; margin:0 0 28px; }

.btn-primary{ background: var(--brand); color:#fff; border:none; padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; display:inline-block; box-shadow: 0 6px 16px rgba(37,111,74,0.22); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease; }
.btn-primary:hover{ background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,111,74,0.28); }
.btn-primary:active{ transform: translateY(0) scale(.98); }
.btn-ghost{ border:1.5px solid var(--brand); color:var(--brand-dark); background:transparent; padding:12.5px 26px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; display:inline-block; transition: background .2s ease, transform .2s var(--ease); }
.btn-ghost:hover{ background: rgba(37,111,74,0.08); transform: translateY(-2px); }
.btn-ghost:active{ transform: translateY(0) scale(.98); }

.net-warning{ display:none; background:#FDECD8; border:1px solid var(--accent); color:#6B4A17; padding:12px 16px; border-radius:10px; font-size:14px; margin: 20px 0; }
.net-warning button{ background:var(--accent); border:none; color:#fff; padding:6px 12px; border-radius:6px; font-weight:600; cursor:pointer; margin-left:8px; }

.empty-state{ border:2px dashed var(--line); border-radius:16px; padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:15px; background:var(--paper); }

/* ---------- FOOTER ---------- */
footer{ background: var(--brand-dark); color: #E8F0EA; margin-top:20px; }
.footer-inner{ max-width:1240px; margin:0 auto; padding: 44px 32px 24px; }
.footer-top{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom: 26px; border-bottom: 1px solid rgba(232,240,234,0.16); margin-bottom:18px; }
.footer-top > div{ flex:1; min-width:200px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:21px; color:#fff; margin:0 0 8px; }
.footer-tag{ font-size:14px; color: #B9C9BE; max-width:38ch; margin:0; }
.footer-heading{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8FA396; margin:0 0 14px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color: #E8F0EA; text-decoration:none; font-size:14px; transition: color .2s ease, transform .2s ease; display:inline-block; }
.footer-links a:hover{ color: var(--brand-light); transform: translateX(2px); }
.footer-socials{ display:flex; gap:10px; }
.footer-socials a{ width:36px; height:36px; border-radius:50%; background: rgba(232,240,234,0.08); display:flex; align-items:center; justify-content:center; color:#E8F0EA; transition: background .2s ease, transform .2s ease; }
.footer-socials a:hover{ background: var(--brand-light); color:var(--brand-dark); transform: translateY(-2px); }
.footer-socials svg{ width:17px; height:17px; }
.footer-bottom{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; color: #8FA396; padding-top:4px; }
.footer-bottom a{ color:#8FA396; text-decoration:none; }
.footer-bottom a:hover{ color:#E8F0EA; }
.footer-bottom > span{ text-align:center; }
.footer-chain-links{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.footer-chain-badge{ display:inline-flex; align-items:center; gap:6px; font-family:'Space Mono',monospace; font-size:11.5px; background: rgba(232,240,234,0.08); padding:5px 12px; border-radius:999px; color: var(--brand-light); text-decoration:none; border:1px solid rgba(232,240,234,0.16); transition: background .2s ease, color .2s ease; }
.footer-chain-badge:hover{ background: var(--brand-light); color: var(--brand-dark); }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background: var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .25s ease, bottom .25s ease; max-width:90vw; text-align:center; z-index:100; }
.toast.show{ opacity:1; bottom:30px; }

/* ---------- CARDS (dipakai lintas halaman) ---------- */
.stat-card{ background: var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.stat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.stat-icon svg{ width:22px; height:22px; }
.stat-icon.green{ background: rgba(37,111,74,0.12); }
.stat-icon.orange{ background: rgba(244,162,97,0.22); }
.stat-icon.emerald{ background: rgba(95,191,122,0.22); }
.stat-num{ font-weight:700; font-size:30px; color: var(--ink); display:block; }
.stat-label{ font-size:13.5px; color: var(--ink-soft); }

.stamp{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:5px 13px; border-radius:999px; margin-bottom:12px; }
.stamp.posted{ background: rgba(95,191,122,0.2); color: var(--brand-dark); }
.stamp.claimed{ background: rgba(244,162,97,0.25); color: var(--accent-dark); }
.stamp.completed{ background: var(--brand); color: #fff; }

.ticket{ position:relative; background:var(--paper); border-radius:20px; border:1px solid var(--line); overflow:hidden; animation: rise .4s ease both; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ticket:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
@keyframes rise{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.ticket-photo-wrap{ position:relative; width:100%; height:150px; overflow:hidden; }
.ticket-photo-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #EAF5EC, #FBE9D6); }
.ticket-photo-placeholder svg{ width:36px; height:36px; opacity:0.5; }
.ticket-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ticket-body{ padding:16px 18px 18px; }
.ticket-food{ font-weight:700; font-size:19px; margin:0 0 4px; }
.ticket-desc{ font-size:14px; color:var(--ink-soft); margin:0 0 12px; }
.ticket-meta{ font-family:'Space Mono', monospace; font-size:11px; color:var(--ink-soft); margin-bottom:12px; }
.ticket-btn{ width:100%; border:none; padding:12px; border-radius:10px; font-weight:600; font-size:14px; cursor:pointer; transition: background .2s ease, transform .15s var(--ease); }
.ticket-btn:active{ transform: scale(.98); }
.ticket-btn.claim{ background: var(--brand); color:#fff; }
.ticket-btn.claim:hover{ background: var(--brand-dark); }
.ticket-btn.complete{ background: var(--accent); color:#fff; }
.ticket-btn.complete:hover{ background:var(--accent-dark); }
.ticket-btn:disabled{ background:#F1EEE5; color:var(--ink-soft); cursor:not-allowed; }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:20px; }

form{ background: var(--paper); border:1px solid var(--line); border-radius:22px; padding:30px; display:grid; gap:16px; box-shadow: var(--shadow-sm); }
label{ font-size:13px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px; }
.hint{ font-size:12px; color: var(--ink-soft); margin:4px 0 0; }

.urgency-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; margin-left:8px; }
.urgency-badge .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.urgency-badge.new{ background: rgba(95,191,122,0.2); color: var(--brand-dark); }
.urgency-badge.new .dot{ background: var(--brand-light); }
.urgency-badge.waiting{ background: rgba(244,162,97,0.25); color: var(--accent-dark); }
.urgency-badge.waiting .dot{ background: var(--accent); }
.urgency-badge.long{ background: #FBDCC7; color: #A8451C; }
.urgency-badge.long .dot{ background: #A8451C; }
input, textarea{ width:100%; border:1px solid var(--line); background:#fff; border-radius:9px; padding:11px 13px; font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; color:var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(37,111,74,0.12); }
textarea{ resize:vertical; min-height:70px; }
.submit-btn{ justify-self:start; background:var(--accent); color:#fff; border:none; padding:13px 30px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; box-shadow: 0 6px 16px rgba(244,162,97,0.3); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease; }
.submit-btn:hover{ background:var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(244,162,97,0.35); }
.submit-btn:active{ transform: translateY(0) scale(.98); }
.submit-btn:disabled{ background:#D9D2C4; cursor:not-allowed; transform:none; box-shadow:none; }