/* Velfile — tema "utilitas bersih": tenang, rapi, cepat dipindai.
   Dimuat paling akhir di setiap halaman, jadi menimpa gaya dasar. */

:root {
  --bg: #f6f7f9;
  --paper: #ffffff;
  --ink: #15181e;
  --muted: #566070;
  --line: #e1e5ea;
  --yellow: #ffd23f;
  --yellow-soft: #fff6cf;
  --ok: #17694a;
  --ok-bg: #e2f4ea;
  --err: #a8261d;
  --err-bg: #fdeceb;
  --r: 14px;
  --shadow: 0 1px 2px rgba(21, 24, 30, 0.05), 0 6px 20px rgba(21, 24, 30, 0.06);
  --on-ink: #ffffff;
  --on-yellow: #15181e;
  --hover: #e9ecf1;
  --line-strong: #c9ced6;
  --soft: #f0f2f5;
  --soft-2: #fafbfc;
  --dash: #bcc3cd;
  --chip: #e8ebf0;
  --chip-h: #d9dee6;
  --yel-line: #f1dd8a;
  --err-line: #efb9b4;
  --ok-line: #b6dcc6;
  --notice-bg: #fff4d6;
  --notice-ink: #4a3b00;
  --checker: #e3e6ea;
  --header-bg: rgba(255, 255, 255, 0.97);
  --stat-bg: #f6f7f9;
  --underline: #c9a400;
}

body { background: var(--bg); color: var(--ink); }
::selection { background: var(--yellow); color: var(--on-yellow); }
:focus-visible { outline: 3px solid #2f6bff; outline-offset: 3px; }

/* ---------- Header ---------- */
header { padding-block: 18px; }
.brand { font-size: 23px; }
.brand svg { width: 32px; height: 32px; }
.nav { gap: 4px; }
.nav a, .back {
  background: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.nav a:hover, .back:hover { background: var(--hover); color: var(--ink); }
.nav a:last-child { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.back { border: 1px solid var(--line); background: var(--paper); color: var(--ink); }

/* ---------- Judul halaman tool / blog ---------- */
.tool-head { padding-block: 28px 24px; }
.tool-head h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.03em; }
.tool-head p { color: var(--muted); }
.tool-head .nf-code { color: var(--yellow); -webkit-text-stroke: 2px var(--ink); }

/* ---------- Kartu kerja ---------- */
.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 28px;
}
.sheet::before, .sheet::after { content: none; }

/* ---------- Tombol ---------- */
.btn, .btn-link {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(21, 24, 30, 0.06);
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:hover, .btn-link:hover { background: var(--soft); color: var(--ink); border-color: var(--ink); }
.btn:active, .btn-link:active { transform: translateY(1px); }
.btn.primary, .btn-link {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--on-yellow);
  box-shadow: 0 2px 0 rgba(21, 24, 30, 0.25);
}
.btn.primary:hover, .btn-link:hover { background: #ffc41a; border-color: #ffc41a; color: var(--on-yellow); }
.btn:disabled, .btn.disabled { box-shadow: none; }
.btn.primary:disabled:hover { background: var(--yellow); border-color: var(--yellow); }
.btn:disabled:hover:not(.primary) { background: var(--paper); border-color: var(--line-strong); }
.btn.on, .presets .btn.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ---------- Kotak upload ---------- */
.dropzone {
  border: 2px dashed var(--dash);
  border-radius: 16px;
  background: var(--soft-2);
  min-height: 250px;
}
.dropzone:hover { border-color: var(--ink); background: var(--yellow-soft); }
.dropzone.dragging { background: var(--yellow-soft); border-color: var(--ink); border-style: solid; transform: none; }
.dropzone strong { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 21px; letter-spacing: -0.02em; }
.pick { background: var(--yellow); color: var(--on-yellow); border-radius: 10px; font-weight: 600; padding: 11px 22px; }
.dropzone:hover .pick { background: #ffc41a; }
.dz-ico { animation: none; }

/* ---------- Pesan, hasil, status ---------- */
.msg, .result.error, .result.ok { border-radius: 12px; }
.msg.error, .result.error { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err); }
.msg.info { background: var(--yellow-soft); border: 1px solid var(--yel-line); }
.result.ok { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.result .links a { border: 1px solid var(--line-strong); border-radius: 10px; }
.result .links a:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ---------- Kontrol ---------- */
.preview { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; }
.stat { background: var(--stat-bg); border: 1px solid var(--line); border-radius: 12px; }
.stat.saved { background: var(--yellow-soft); border-color: var(--yel-line); }
.stat.saved span { color: var(--ink); }

input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], select, textarea {
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, select:hover, textarea:hover { border-color: var(--ink); }
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

.formats span { border: 1.5px solid var(--line-strong); border-radius: 10px; }
.formats label:hover span { background: var(--soft); border-color: var(--ink); }
.formats input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ---------- Panduan di bawah tool ---------- */
.guide { margin-top: 64px; }
.how li::before { background: var(--yellow); width: 30px; height: 30px; font-size: 14px; }
.qa details, .faq details { border-bottom: 1px solid var(--line); }
.qa details:first-of-type, .faq details:first-of-type { border-top: 1px solid var(--line); }
.qa summary::after, .faq summary::after { color: var(--muted); }

.related a {
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 500;
  padding: 8px 16px;
}
.related a:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.prose a, .guide-link a, .tips a { text-decoration-color: var(--underline); text-underline-offset: 3px; }

/* Daftar artikel */
.post { background: var(--paper); border: 1px solid var(--line) !important; border-radius: 16px; padding: 20px 22px !important; margin-bottom: 14px; transition: box-shadow 0.15s, border-color 0.15s; }
.post:hover { box-shadow: var(--shadow); border-color: var(--line-strong) !important; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); background: var(--paper); margin-top: 88px; }

/* ---------- Beranda ---------- */
.hero { grid-template-columns: 1fr; gap: 36px; text-align: center; padding-block: 36px 72px; justify-items: center; }
.hero h1 { font-size: clamp(40px, 6.4vw, 68px); letter-spacing: -0.04em; margin-bottom: 18px; }
.hero h1 mark { background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%); color: inherit; padding: 0 2px; }
.lead { margin-inline: auto; font-size: 18px; margin-bottom: 22px; }
.hero .btn-link { display: none; }
.badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 0; }
.badges li { font-size: 14px; font-weight: 500; color: var(--muted); }
.badges li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 6px; }

.hero .sheet { width: 100%; max-width: 720px; padding: 22px; }
.hero .dropzone { min-height: 230px; }

/* Daftar alat: grid rapat */
.section { padding-block: 16px 88px; }
.section-head h2 { font-size: clamp(28px, 4vw, 36px); }
.tool-search input { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 13px 16px; max-width: 520px; background: var(--paper); }

.tools { grid-template-columns: 1fr; gap: 44px; }
.tool-group h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }

.tool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tool-list li + li { border: 0; }
.tool-list a {
  height: 100%;
  margin: 0;
  padding: 14px 16px;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tool-list a:hover { background: var(--paper); border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-1px); }

.ico, .ico.pdf {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--yellow-soft);
  color: var(--ink);
}
.ico.pdf { background: var(--chip); }
.ico::before { content: none; }
.ico svg { width: 24px; height: 24px; }
.tool-list a:hover .ico { transform: none; background: var(--yellow); }
.tool-list a:hover .ico.pdf { background: var(--chip-h); }
.tool-list strong { font-size: 16px; line-height: 1.25; }
.tool-list span { font-size: 13.5px; line-height: 1.45; display: block; margin-top: 2px; }

/* Langkah-langkah */
.steps { gap: 20px; }
.steps li { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--paper); }
.steps li::before { width: 34px; height: 34px; font-size: 16px; }
.steps p { max-width: none; }

.faq details { border: 0; border-bottom: 1px solid var(--line); }
.faq summary { padding-inline: 0; }

/* ---------- Responsif ---------- */
@media (max-width: 520px) {
  .sheet { padding: 16px; border-radius: 18px; }
  .hero { padding-bottom: 56px; text-align: left; justify-items: stretch; }
  .lead { margin-inline: 0; }
  .badges { justify-content: flex-start; }
  .nav a { padding: 9px 10px; font-size: 13.5px; }
  .tool-list { grid-template-columns: 1fr; gap: 10px; }
  .tool-list a { padding: 14px; }

  /* Tombol unduh selalu terlihat di HP */
  #workView > .actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: -16px;
    margin-bottom: -16px;
    padding: 10px 16px;
    background: var(--header-bg);
    border-top: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
  }
  #workView > .actions .btn.primary { flex: 1 1 auto; }
  #workView > .actions .btn:not(.primary) { flex: 0 0 auto; padding-inline: 14px; font-size: 14px; }
}

/* Layar sangat sempit (<=360px): tombol bar bawah boleh turun baris agar halaman tidak melebar ke samping */
@media (max-width: 360px) {
  #workView > .actions { flex-wrap: wrap; }
  #workView > .actions .btn:not(.primary) { flex: 1 1 auto; text-align: center; }
}

/* ================= Mode gelap ================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1115;
  --paper: #171b21;
  --ink: #eef1f5;
  --muted: #9ba5b3;
  --line: #2a313b;
  --yellow: #ffd23f;
  --yellow-soft: #2e2810;
  --ok: #5fd09a;
  --ok-bg: #12291e;
  --err: #ff9088;
  --err-bg: #301816;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
  --on-ink: #0e1115;
  --on-yellow: #15181e;
  --hover: #232933;
  --line-strong: #3a434f;
  --soft: #1d222a;
  --soft-2: #12161b;
  --dash: #46505f;
  --chip: #232933;
  --chip-h: #2d3541;
  --yel-line: #5a4d12;
  --err-line: #5c2a26;
  --ok-line: #1f4a36;
  --notice-bg: #2e2810;
  --notice-ink: #f3dc8a;
  --checker: #2a3038;
  --header-bg: rgba(14, 17, 21, 0.97);
  --stat-bg: #12161b;
  --underline: #ffd23f;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1115;
    --paper: #171b21;
    --ink: #eef1f5;
    --muted: #9ba5b3;
    --line: #2a313b;
    --yellow: #ffd23f;
    --yellow-soft: #2e2810;
    --ok: #5fd09a;
    --ok-bg: #12291e;
    --err: #ff9088;
    --err-bg: #301816;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.35);
    --on-ink: #0e1115;
    --on-yellow: #15181e;
    --hover: #232933;
    --line-strong: #3a434f;
    --soft: #1d222a;
    --soft-2: #12161b;
    --dash: #46505f;
    --chip: #232933;
    --chip-h: #2d3541;
    --yel-line: #5a4d12;
    --err-line: #5c2a26;
    --ok-line: #1f4a36;
    --notice-bg: #2e2810;
    --notice-ink: #f3dc8a;
    --checker: #2a3038;
    --header-bg: rgba(14, 17, 21, 0.97);
    --stat-bg: #12161b;
    --underline: #ffd23f;
  }
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] svg [stroke="#15181e"], html:not([data-theme]) svg [stroke="#15181e"] { stroke: var(--ink); }
html[data-theme="dark"] svg [fill="#ffffff"], html[data-theme="dark"] svg [fill="#fff"] { fill: var(--paper); }
html[data-theme="dark"] .brand svg path[fill="none"] { stroke: var(--ink); }
html[data-theme="dark"] img.preview-img, html[data-theme="dark"] .preview img { color-scheme: normal; }
html[data-theme="dark"] .btn.primary:hover, html[data-theme="dark"] .btn-link:hover { color: var(--on-yellow); }
html[data-theme="dark"] .dropzone:hover .pick { color: var(--on-yellow); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--soft-2); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .tool-search input { background: var(--paper); }

/* ---------- Tombol ganti tema ---------- */
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--hover); border-color: var(--ink); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .i-sun { display: block; }
  html:not([data-theme]) .theme-toggle .i-moon { display: none; }
}

/* ================= Login / akun ================= */
.auth-link {
  display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--yellow);
  background: var(--yellow); color: var(--on-yellow); text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.auth-link:hover { background: #ffc41a; border-color: #ffc41a; }
.auth-user { display: inline-flex; align-items: center; gap: 8px; }
.auth-name { font-size: 14px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-out {
  font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); color: var(--ink);
}
.auth-out:hover { background: var(--hover); border-color: var(--ink); }
@media (max-width: 600px) {
  .nav a[href="#about"], .nav a[href="#faq"] { display: none; }
  .hdr-actions { gap: 4px; }
  .auth-name { display: none; }
  .auth-link, .auth-out { padding: 8px 10px; font-size: 13.5px; }
}

[hidden] { display: none !important; }
.auth-card { max-width: 440px; margin: 0 auto 56px; }
.auth-msg { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
.auth-msg:empty { display: none; }
.auth-msg.error { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err); }
.auth-msg.info { background: var(--yellow-soft); border: 1px solid var(--yel-line); color: var(--ink); }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--paper); color: var(--ink); font-weight: 600; font-size: 15.5px; text-decoration: none;
}
.google-btn:hover { background: var(--hover); border-color: var(--ink); }
.google-btn svg { width: 20px; height: 20px; flex: none; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 13.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--soft); border-radius: 12px; }
.auth-tabs button {
  font: inherit; font-weight: 600; font-size: 14.5px; padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.auth-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.auth-form label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.auth-form input {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-weight: 400; font-size: 16px;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 12px;
}
.auth-form input:focus-visible { outline: 3px solid #2f6bff; outline-offset: 1px; border-color: var(--ink); }
.auth-form .hint { margin: -6px 0 14px; font-size: 13px; color: var(--muted); font-weight: 400; }
.auth-form button[type="submit"] { width: 100%; padding: 13px 16px; font-size: 16px; cursor: pointer; }
.auth-form button[disabled] { opacity: 0.6; cursor: wait; }
.auth-note { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }

.auth-forgot { margin: 14px 0 0; text-align: center; }
.auth-forgot button { background: none; border: 0; padding: 4px 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: underline; cursor: pointer; }
.auth-forgot button:focus-visible { outline: 3px solid #2f6bff; outline-offset: 2px; border-radius: 6px; }

/* ---------- Menu geser ---------- */
.hdr-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.menu-btn:hover { background: var(--hover); border-color: var(--ink); }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vf-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(14, 17, 21, 0.5); opacity: 0; transition: opacity 0.2s; }
.vf-overlay.open { opacity: 1; }
.vf-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; width: min(86vw, 340px); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); transform: translateX(-100%); transition: transform 0.22s ease; }
.vf-drawer.open { transform: none; }
.vf-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vf-title { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: 22px; letter-spacing: -0.03em; }
.vf-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 28px; }
.vf-acct { margin: 8px 4px 4px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.vf-login { display: block; text-align: center; }
.vf-hello { font-size: 12.5px; color: var(--muted); }
.vf-user { font-weight: 700; font-size: 16px; word-break: break-word; }
.vf-mail { font-size: 13.5px; color: var(--muted); word-break: break-all; margin-bottom: 12px; }
.vf-acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-acct-actions .btn { padding: 8px 14px; font-size: 14px; }
.vf-drawer h3 { margin: 18px 12px 6px; font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.vf-drawer ul { list-style: none; margin: 0; padding: 0; }
.vf-drawer li a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
.vf-drawer li a:hover { background: var(--hover); }
.vf-drawer li a[aria-current="page"] { background: var(--yellow-soft); font-weight: 700; }
html.menu-lock { overflow: hidden; }
@media (max-width: 560px) { .hdr-actions .back { display: none; } }
@media (prefers-reduced-motion: reduce) { .vf-overlay, .vf-drawer { transition: none; } }
.auth-user a.auth-name { color: inherit; text-decoration: none; }
.auth-user a.auth-name:hover { text-decoration: underline; }

/* ---------- Halaman akun ---------- */
.acct-card { max-width: 560px; margin: 0 auto 20px; }
.acct-card h2 { font-size: 20px; margin-bottom: 12px; }
.acct-card p { margin-bottom: 12px; font-size: 14.5px; color: var(--muted); }
.acct-card.danger { border-color: var(--err-line); }
.acct-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.acct-badge.ok { background: var(--ok-bg); color: var(--ok); }
.acct-badge.warn { background: var(--notice-bg); color: var(--notice-ink); }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-card .btn { font-size: 14.5px; padding: 10px 18px; }
.btn.danger { border-color: var(--err); color: var(--err); background: var(--paper); }
.btn.danger:hover { background: var(--err); color: #fff; }
.auth-form input[readonly] { background: var(--soft); color: var(--muted); }
.acct-note { max-width: 560px; margin: 0 auto 16px; }

/* ---------- Pengingat verifikasi email ---------- */
.vf-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 9px 44px 9px 16px; position: relative; background: var(--notice-bg); color: var(--notice-ink); border-bottom: 1px solid var(--yel-line); font-size: 14px; font-weight: 500; text-align: center; }
.vf-banner-btn { font: inherit; font-weight: 700; font-size: 14px; padding: 2px 4px; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.vf-banner-btn:disabled { opacity: 0.6; cursor: wait; }
.vf-banner-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; font-size: 22px; line-height: 1; background: none; border: 0; color: inherit; cursor: pointer; border-radius: 8px; }
.vf-banner-x:hover { background: rgba(0, 0, 0, 0.08); }

/* ---------- Lompat ke konten ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: 15px; text-decoration: none; transition: top 0.15s; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Hormati pengaturan "kurangi gerakan" di semua halaman */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}