/* kutenang.id — gaya dasar
   Palet Yayasan: Ivory & Blush dominan; Sage, Terracotta, Evergreen aksen kecil.
   Warna teks memakai coklat dari logo (#4D362E) — kontras 10,06 di atas Ivory. */

:root{
  --ivory:#F4F3F1;  --blush:#DECEBF;  --sage:#A1A79E;
  --terracotta:#B57B66;  --evergreen:#68756D;
  --ink:#4D362E;          /* coklat logo — teks utama */
  --ink-soft:#6E5A50;     /* teks sekunder */
  --ink-mute:#9A8B82;
  --putih:#FFFFFF;
  --garis:#E5DDD2;
  --galat:#B03030;  --awas:#B8860B;  --oke:#3E7A4E;
  --r:18px;  --r-kecil:12px;
  --bayang:0 1px 2px rgba(77,54,46,.04), 0 8px 24px rgba(77,54,46,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--ivory); color:var(--ink);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wadah{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------------------------------------------------------------- tipografi */
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(32px,5.5vw,54px)}
h2{font-size:clamp(24px,3.4vw,34px)}
h3{font-size:19px}
.lead{font-size:clamp(15px,1.7vw,18px);color:var(--ink-soft)}
.kecil{font-size:13.5px;color:var(--ink-mute)}

/* ------------------------------------------------------------------ tombol */
.tbl{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid transparent;border-radius:99px;
  padding:13px 26px;font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tbl-utama{background:var(--ink);color:var(--ivory)}
.tbl-utama:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(77,54,46,.22)}
.tbl-garis{background:transparent;border-color:var(--ink);color:var(--ink)}
.tbl-garis:hover{background:rgba(77,54,46,.05)}
.tbl-lembut{background:var(--blush);color:var(--ink)}
.tbl-lembut:hover{transform:translateY(-1px)}
.tbl-lebar{width:100%}

/* ------------------------------------------------------------------- kartu */
.kartu{
  background:var(--putih);border:1px solid var(--garis);
  border-radius:var(--r);padding:22px;box-shadow:var(--bayang);
}

/* ------------------------------------------------------------------- utilitas */
.pusat{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------------------------------------------------------- halaman masuk */
body.masuk{
  min-height:100vh;display:grid;place-items:center;padding:32px 20px;
  background:
    radial-gradient(1100px 520px at 15% -8%, rgba(222,206,191,.55), transparent 62%),
    radial-gradient(760px 420px at 92% 108%, rgba(161,167,158,.22), transparent 60%),
    var(--ivory);
}
.masuk-kotak{width:100%;max-width:412px}
.masuk-merek{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.masuk-merek img{height:38px;width:auto}
.masuk-peran{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--putih);border:1px solid var(--garis);
  border-radius:99px;padding:4px 14px;
}
.masuk-kartu{
  background:var(--putih);border:1px solid var(--garis);border-radius:22px;
  padding:32px 30px;box-shadow:0 1px 2px rgba(77,54,46,.04),0 18px 48px rgba(77,54,46,.09);
}
.masuk-kartu h1{font-size:25px;margin-bottom:5px}
.masuk-kartu .lead{font-size:14.5px;margin-bottom:24px}

.kolom{margin-bottom:16px}
.kolom label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-soft)}
.kolom input{
  width:100%;border:1.5px solid var(--garis);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:15px;background:#FCFBF9;color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.kolom input:focus{
  outline:none;border-color:var(--sage);
  box-shadow:0 0 0 3.5px rgba(161,167,158,.2);background:var(--putih);
}
.kolom input::placeholder{color:#BCADA3}

.tbl-google{
  width:100%;background:var(--putih);border:1.5px solid var(--garis);color:var(--ink);
  padding:13px 20px;
}
.tbl-google:hover:not(:disabled){border-color:var(--sage);transform:translateY(-1px)}
.tbl-google:disabled{opacity:.55;cursor:not-allowed}
.tbl-google svg{width:19px;height:19px;flex:none}

.pisah{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-mute);font-size:12.5px}
.pisah::before,.pisah::after{content:"";flex:1;height:1px;background:var(--garis)}

.pesan{
  border-radius:12px;padding:11px 14px;font-size:13.2px;margin-bottom:18px;
  border-left:3px solid;
}
.pesan-info{background:#F6F4F0;border-color:var(--sage);color:var(--ink-soft)}
.pesan-awas{background:#FDF8EC;border-color:var(--awas);color:#7A5B0A}
.pesan-galat{background:#FBEFEF;border-color:var(--galat);color:#8A2020}

.masuk-kaki{margin-top:22px;text-align:center;font-size:13px;color:var(--ink-mute)}
.masuk-kaki a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--garis)}
.masuk-kaki a:hover{border-color:var(--ink)}
.balik{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:13.5px;color:var(--ink-soft)}
.balik:hover{color:var(--ink)}

@media (max-width:460px){
  .masuk-kartu{padding:26px 22px;border-radius:18px}
}