/* =========================================================
   hatikode — base.css
   Token, reset, komponen bersama
   ========================================================= */

:root{
  --paper:#FBF5EC;
  --paper-2:#F5EADB;
  --card:#FFFCF7;
  --ink:#241C1A;
  --ink-2:#6E5F57;
  --ink-3:#9C8C83;
  --line:#E7D7C6;
  --line-2:#D9C6B2;
  --rose:#D33F63;
  --rose-2:#A82648;
  --rose-soft:#FBE3E8;
  --plum:#47202F;
  --plum-2:#2B1220;
  --gold:#B9873F;
  --gold-soft:#F3E4C8;
  --sage:#6E7F63;
  --cream:#FFFBF4;

  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --r-xl:34px;

  --shadow-sm:0 1px 2px rgba(60,30,40,.05), 0 4px 14px -8px rgba(60,30,40,.18);
  --shadow:0 2px 4px rgba(60,30,40,.04), 0 20px 44px -24px rgba(60,30,40,.34);
  --shadow-lg:0 4px 8px rgba(60,30,40,.05), 0 40px 80px -32px rgba(60,30,40,.36);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Caveat",ui-rounded,cursive;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --wrap:1120px;
  --pad:clamp(20px,5vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* tekstur kertas halus di seluruh halaman */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--rose);color:#fff}

:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
  position:relative;
  z-index:1;
}

.section{
  padding-block:clamp(64px,9vw,120px);
  position:relative;
}
.section--tight{padding-block:clamp(48px,6vw,80px)}

/* ---------- tipografi ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rose-2);
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  opacity:.55;
}

.h1,.h2{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.04;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  text-wrap:balance;
}
.h1{font-size:clamp(38px,6.2vw,68px)}
.h2{font-size:clamp(29px,4.4vw,46px);line-height:1.08}

.h1 em,.h2 em{
  font-style:italic;
  color:var(--rose);
  font-variation-settings:"SOFT" 40,"WONK" 1;
}

.lead{
  font-size:clamp(15px,1.6vw,17.5px);
  line-height:1.72;
  color:var(--ink-2);
  max-width:56ch;
  text-wrap:pretty;
}

.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:.02em}
.hand{font-family:var(--font-hand);font-size:1.35em;line-height:1}

/* ---------- tombol ---------- */
.btn{
  --bg:var(--plum-2);
  --fg:var(--cream);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 26px;
  border-radius:999px;
  background:var(--bg);
  color:var(--fg);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  box-shadow:0 10px 24px -14px rgba(43,18,32,.7);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(43,18,32,.65);background:#3a1a2a}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.99)}

.btn--rose{--bg:var(--rose);box-shadow:0 10px 26px -12px rgba(211,63,99,.8)}
.btn--rose:hover{background:var(--rose-2)}

.btn--ghost{
  --bg:transparent;
  --fg:var(--ink);
  border-color:var(--line-2);
  box-shadow:none;
}
.btn--ghost:hover{background:var(--card);border-color:var(--ink-3);box-shadow:var(--shadow-sm)}

.btn--sm{min-height:40px;padding:0 18px;font-size:13px}

/* ---------- kartu ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:none}

/* ---------- aksesibilitas ---------- */
.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--plum-2);color:var(--cream);
  padding:10px 18px;border-radius:10px;font-size:13px;
  transition:top .2s;
}
.skip:focus{top:16px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
}