/* Noto Sans di-host sendiri (lisensi OFL) agar halaman langsung tampil tanpa menunggu Google Fonts */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-devanagari-wght-normal.woff2) format('woff2');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-greek-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-greek-wght-normal.woff2) format('woff2');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-vietnamese-wght-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Palet datar: netral + satu warna aksen, tanpa gradasi.
   Satu keluarga font: Noto Sans (+ Noto Sans untuk aksara lain bila perlu). */
:root {
  /* Tema & warna sama dengan ineedsave.site (versi gelap): monokrom datar, website selalu bertema gelap */
  color-scheme: dark;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F4F4F5;
  --border: #E4E4E7;
  --border-strong: #D4D4D8;
  --text: #18181B;
  --muted: #71717A;
  --primary: #18181B;
  --on-primary: #FFFFFF;
  --error: #B91C1C;
  --error-bg: #FEF2F2;
  --pattern: #E4E4E7;
  /* Nama lama dipetakan ke palet baru */
  --hover: var(--surface-2);
  --accent: var(--primary);
  --accent-hover: var(--primary);
  --accent-soft: transparent;
  --link: var(--text);
  --danger: var(--error);
  --danger-soft: var(--error-bg);
  --danger-border: var(--error);
  --flag-outline: var(--border);
  --shadow: 0 12px 32px rgba(0, 0, 0, .18);
  --nav-bg: var(--bg);
  --nav-border: var(--border);
  --footer-bg: var(--surface);
  --footer-border: var(--border);
  --social-bg: var(--bg);
  --social-border: var(--border-strong);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "Noto Sans", sans-serif;
  --topbar-h: 65px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media all { /* tema gelap selalu aktif */
  :root {
    --bg: #0A0A0A;
    --surface: #141414;
    --surface-2: #1C1C1E;
    --border: #27272A;
    --border-strong: #3F3F46;
    --text: #FAFAFA;
    --muted: #A1A1AA;
    --primary: #FAFAFA;
    --on-primary: #0A0A0A;
    --error: #F87171;
    --error-bg: #1F1212;
    --pattern: #222225;
    --shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: max(16px, var(--safe-l)) max(16px, var(--safe-r));
}
@media (min-width: 768px) { .wrap { padding-inline: max(32px, var(--safe-l)) max(32px, var(--safe-r)); } }

/* ---------- Navbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar-inner { position: relative; display: flex; align-items: center; gap: 16px; height: 64px; }
@media (min-width: 900px) {
  .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .topbar-inner .brand { justify-self: start; }
  .topbar-inner .topbar-actions { justify-self: end; }
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; flex: 0 0 auto; }
.brand-mark { width: 32px; height: 32px; padding: 6px; background: var(--primary); fill: var(--on-primary); border-radius: 9px; flex: 0 0 auto; }

.nav { display: flex; align-items: center; justify-content: center; gap: 4px; }
.nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
/* Penanda section yang sedang tampil (beranda) atau halaman saat ini (artikel) */
.nav a[aria-current] { color: var(--text); background: var(--surface-2); font-weight: 600; }

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

/* HP & tablet: menu navigasi disembunyikan */
@media (max-width: 899px) {
  .nav { display: none; }
}

/* ---------- Dropdown (picker) ---------- */
.picker { position: relative; min-width: 0; }
.picker-btn {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 16px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}
.picker-btn:hover { border-color: var(--text); }
/* Dropdown kecil (ukuran modul, rotasi, keamanan WiFi): ukuran sama dengan kolom isian */
.picker-select .picker-btn { min-height: 44px; padding: 10px 12px; font-weight: 400; }
.picker-select .picker-list { max-height: min(320px, 50vh); padding-top: 4px; }
.picker-select .picker-option { min-height: 40px; }
.picker-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.picker-value.placeholder { color: var(--muted); }
.picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { flex: 0 0 auto; width: 12px; height: 8px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.picker-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.picker-search { padding: 8px; border-bottom: 1px solid var(--border); }
.picker-search input { min-height: 40px; }
.picker-list {
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 4px;
}
.picker-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 14px 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.picker-option {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
}
.picker-option .opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-option small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.picker-option.active { background: var(--hover); }
.picker-option[aria-selected="true"] { color: var(--text); font-weight: 700; }
.picker-option[aria-selected="true"]::after {
  content: ""; flex: 0 0 auto; width: 6px; height: 11px;
  border: solid var(--link); border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-inline-end: 4px;
}
.picker-empty { padding: 14px; color: var(--muted); font-size: 14px; }

/* Bahasa */
.lang-btn { background: transparent; border-color: var(--social-border); width: auto; min-height: 44px; padding: 8px 12px; gap: 8px; font-size: 14px; }
.flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex: 0 0 auto; outline: 1px solid var(--flag-outline); outline-offset: -1px; }
.picker-lang .picker-panel { inset-inline: auto 0; width: 300px; max-width: calc(100vw - 32px); }
@media (max-width: 479px) {
  .lang-name { display: none; }
  .picker-lang { position: static; }
  .picker-lang .picker-panel { inset-inline: max(16px, var(--safe-l)) max(16px, var(--safe-r)); width: auto; max-width: none; }
}

/* ---------- Hero & layout ---------- */
.hero { padding-top: 32px; padding-bottom: 8px; text-align: center; }
.hero h1 { font-size: clamp(28px, 6vw, 48px); line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.hero p { margin: 16px auto 0; color: var(--muted); font-size: clamp(16px, 2.2vw, 18px); max-width: 720px; text-wrap: pretty; }

.layout {
  display: grid;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 16px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "type" "data" "settings" "design" "preview";
}
.area-type { grid-area: type; position: relative; z-index: 5; }
.area-data { grid-area: data; }
.area-preview { grid-area: preview; }
.area-settings { grid-area: settings; }
.area-design { grid-area: design; }

@media (min-width: 920px) {
  .layout {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-areas: "type preview" "data preview" "settings preview" "design preview";
    grid-template-rows: auto auto auto 1fr;
  }
  .area-preview { align-self: start; position: sticky; top: calc(var(--topbar-h) + 20px); }
}
@media (min-width: 1200px) {
  .layout { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  /* Pengaturan melebar agar generator tetap muat satu layar */
  .area-settings .grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .area-settings .checks { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
}

.section-anchor { scroll-margin-top: var(--topbar-h); }

/* ---------- Kartu ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
}
@media (min-width: 600px) { .card { padding: 22px; } }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 28px; }
.card-head h2 { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.step {
  display: inline-grid; place-items: center;
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 700;
}
.meta { color: var(--muted); font-size: 13px; text-align: end; }

/* ---------- Field ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; }
.hint { color: var(--muted); font-size: 13px; }

input[type="text"], input[type="search"], input[type="number"], input[type="url"],
input[type="email"], input[type="tel"], input[type="datetime-local"], select, textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px; /* 16px mencegah zoom otomatis di iOS */
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: #6b6b74; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="datetime-local"] { display: block; }
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: start; }

select {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
[dir="rtl"] select { background-position: left 14px center; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.grid-2 .full { grid-column: 1 / -1; }
@media (max-width: 359px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.color-row { display: flex; gap: 8px; }
.color-row input[type="text"] { flex: 1; min-width: 0; text-transform: uppercase; }
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 44px;
  width: 44px; height: 44px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

/* Tab jenis data */
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -16px 16px;
  padding: 0 16px 2px;
}
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .tabs { flex-wrap: wrap; overflow: visible; margin: 0 0 16px; padding: 0; } }
.tab {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { border-color: var(--text); }
.tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Switch & checkbox */
.switch, .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; user-select: none; -webkit-user-select: none; }
.switch input, .check input {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto;
  margin: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  display: grid; place-items: center;
  cursor: pointer;
}
.switch input:checked, .check input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after, .check input:checked::after {
  content: ""; width: 5px; height: 10px;
  border: solid var(--on-primary); border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.switch input:focus-visible, .check input:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.switch span { font-weight: 600; font-size: 13px; }
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.check { min-height: 28px; }

/* ---------- Pratinjau ---------- */
.preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  overflow: hidden;
}
@media (min-width: 1200px) { .preview { min-height: 340px; } }
.preview.checker {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 0h8v8H0zM8 8h8v8H8z' fill='%23ececec'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}
.preview svg, .bulk-item svg { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; }
.preview.empty { color: var(--muted); font-size: 14px; text-align: center; }

.bulk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 600px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bulk-item {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  min-width: 0;
}
.bulk-item:hover { border-color: var(--text); }
.bulk-item svg { max-height: 120px; }
.bulk-item span { font-size: 12px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-item.bad { background: var(--danger-soft); border-color: var(--danger-border); cursor: default; }
.bulk-item.bad span { color: var(--danger); white-space: normal; }

.error { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 14px; word-break: break-word; }

.actions { margin-top: 14px; }
.btn {
  -webkit-appearance: none; appearance: none;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { border-color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { width: 100%; min-height: 56px; border-radius: var(--radius); background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-size: 16px; transition: opacity .15s; }
.btn-primary:hover { opacity: .88; border-color: var(--primary); }
.btn:focus-visible, .tab:focus-visible, .link:focus-visible, .picker-btn:focus-visible, .menu-btn:focus-visible, .nav a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.link { -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 4px 0; color: var(--link); font-size: 13px; font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }

.toast { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- Section ---------- */
.section { padding: 48px 0; }
.section + .section { border-top: 1px solid var(--border); }
.section-generator { padding-top: 0; }
@media (min-width: 768px) { .section { padding: 64px 0; } .section-generator { padding-top: 8px; } }

/* Desktop: setiap section setinggi layar, isinya di tengah */
@media (min-width: 920px) and (min-height: 620px) {
  .section {
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100svh - var(--topbar-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 0;
  }
  .section-generator { padding: 24px 0; }
  .section-generator .hero { padding-top: 0; }
}

.section-head { margin: 0 auto 28px; max-width: 760px; text-align: center; }
.section-head h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.section-head p { margin-top: 8px; color: var(--muted); }

.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: center; }
.steps .step { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.steps h3 { margin-top: 14px; font-size: 17px; font-weight: 650; }
.steps p { margin-top: 6px; color: var(--muted); }

/* Akordeon (dipakai FAQ & jenis barcode) */
.accordion { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 860px; margin: 0 auto; }
.accordion details { padding: 0; }
.accordion summary {
  list-style: none;
  display: flex; align-items: center; gap: 16px;
  min-height: 56px;
  padding: 14px 18px;
  font-weight: 600;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary > span { flex: 1; min-width: 0; }
.accordion summary small { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.accordion summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-inline-start: auto;
  border: solid var(--muted);
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.accordion details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.accordion summary:hover::after { border-color: var(--text); }
.accordion details > p { padding: 0 18px 16px; color: var(--muted); }

.type-list {
  list-style: none;
  margin: 0;
  padding: 0 18px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  column-gap: 20px;
}
.type-list li { border-top: 1px solid var(--border); }
.type-list button {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
}
.type-list button:hover { color: var(--link); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--footer-border); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px; padding-top: 40px; padding-bottom: 32px; }
.footer-brand p { margin-top: 12px; color: var(--muted); max-width: 360px; }
.footer-contact h3 { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
@media (min-width: 720px) { .footer-contact { text-align: end; } .footer-contact .socials { justify-content: flex-end; } }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.social {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--social-border);
  border-radius: 10px;
  background: var(--social-bg);
  color: var(--text);
  transition: border-color .15s;
}
.social:hover { border-color: var(--muted); }
.social:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.footer-bottom p { white-space: nowrap; }
.footer-bottom { padding-top: 16px; padding-bottom: calc(20px + var(--safe-b)); border-top: 1px solid var(--footer-border); color: var(--muted); font-size: min(13px, 3vw); text-align: center; }
.footer-bottom a { color: var(--text); text-decoration: none; white-space: nowrap; }
/* Nama pembuat: warna tetap saat disorot, ditekan, atau sudah dikunjungi */
.footer-bottom a, .footer-bottom a:hover, .footer-bottom a:active, .footer-bottom a:visited { color: var(--text); }
.footer-bottom a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------- Desain: pilihan bergambar ---------- */
.design-group + .design-group, .design-group + .hint, .hint + .design-group { margin-top: 16px; }
.design-group h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.area-design .hint { margin-top: 12px; }
#frameOptions { margin-top: 16px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.tile {
  -webkit-appearance: none; appearance: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 74px;
  padding: 10px 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.tile svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.tile svg .fill { fill: currentColor; stroke: none; }
.tile:hover { border-color: var(--muted); color: var(--text); }
.tile[aria-checked="true"] { border-color: var(--text); background: var(--surface-2); color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.preview canvas, .bulk-item canvas { display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; }
.bulk-item canvas { max-height: 120px; }
.preview canvas.pixel { image-rendering: pixelated; }

/* ---------- Artikel: sama dengan ineedsave.site (kartu, carousel, halaman artikel) ---------- */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
}
.btn-outline:hover { border-color: var(--text); }

.article-card {
  height: 100%; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.article-card:hover { border-color: var(--text); transform: translateY(-2px); }
.article-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.article-link:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; border-radius: var(--radius); }
.article-thumb { aspect-ratio: 1200 / 630; background: var(--surface-2); overflow: hidden; }
.article-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; text-align: start; }
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article-tags span {
  padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--muted); font-size: 12px; font-weight: 600;
}
.article-title { font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-align: start; }
.article-excerpt {
  color: var(--muted); font-size: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: var(--muted); font-size: 13px; }
.article-meta svg, .post-meta svg { flex: none; }
.article-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
[dir="rtl"] .article-more svg { transform: scaleX(-1); }

.article-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: 32px; padding: 0; list-style: none;
}

/* Beranda: carousel bergeser otomatis setiap beberapa detik */
.carousel { margin-top: 32px; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
  overflow: hidden; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.carousel-controls .btn-outline { min-height: 48px; padding: 0 24px; border-radius: var(--radius-sm); }
.articles-all, .articles-all:hover, .articles-all:active, .articles-all:focus { text-decoration: none; }

/* Halaman artikel */
.article-page { padding: 32px 0 0; }
.header-cta {
  justify-self: end; display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: 44px; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius-sm); font-size: 15px; text-decoration: none; white-space: nowrap;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 6px; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--text); overflow-wrap: anywhere; }
.post { margin-top: 24px; }
.post-head { display: flex; flex-direction: column; gap: 12px; }
.post-head h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.post-cover { margin: 28px 0 0; }
.post-cover img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.post-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.post-cover figcaption, .post-figure figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; text-align: center; }
.caption-text { color: var(--muted); font-size: 14px; line-height: 1.5; }
.caption-credit { color: var(--muted); font-size: 12px; opacity: .85; }
.caption-credit a { color: inherit; }
.post-body .post-figure { margin: 32px 0; }
.post-body figcaption span { text-align: center; }
.post-body { margin-top: 28px; font-size: 17px; line-height: 1.75; }
/* Teks artikel rata kiri-kanan; judul tetap rata kiri */
.post-body p, .post-body li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.post-body > * + * { margin-top: 18px; }
.post-body h2 { margin-top: 40px; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.post-body h3 { margin-top: 28px; font-size: 19px; line-height: 1.35; font-weight: 700; }
.post-body h3 + p { margin-top: 8px; }
.post-body ul, .post-body ol { padding-inline-start: 24px; }
.post-body li + li { margin-top: 8px; }
.post-body a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.post-body strong { font-weight: 600; }
.post-body code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: .9em; word-break: break-word; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.post-body th, .post-body td { padding: 10px 12px; border: 1px solid var(--border); text-align: start; vertical-align: top; }
.post-body th { background: var(--surface-2); font-weight: 600; }
.cta-wrap { margin-top: 48px; }
.post-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.post-cta p { color: var(--text); font-size: 17px; font-weight: 600; }
.post-cta .btn-primary { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 48px; min-height: 48px; padding: 0 28px; flex: none; text-decoration: none; }
.related { margin-top: 48px; padding: 0 0 64px; }
.related h2, .list-head h1 { font-size: clamp(22px, 4vw, 28px); font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.list-head { margin-top: 24px; }
/* /artikel: setiap kategori sebagai label; memilih satu hanya menampilkan artikelnya (article.js) */
.category-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.category-chip {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s;
}
.category-chip:hover { border-color: var(--text); }
.category-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.article-card[hidden] { display: none; }
@media (max-width: 639px) {
  /* satu baris yang bisa digeser ke samping, bukan beberapa baris */
  .category-filter {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .category-filter::-webkit-scrollbar { display: none; }
  .category-chip { flex: none; white-space: nowrap; }
}
.list-head h1 { font-size: clamp(28px, 5vw, 40px); }
.article-page > .wrap > .article-grid { margin-bottom: 64px; }
.related-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.related-head h2 { text-align: start; }
.related-head .btn-outline { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-sm); }

/* Isi + sidebar "Artikel Populer" */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.post-main { min-width: 0; }
.popular { position: sticky; top: calc(var(--topbar-h) + 24px); }
.popular h2 { font-size: 18px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.popular-list { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.popular-item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
}
.popular-item:hover { background: var(--surface-2); }
.popular-item img { display: block; width: 96px; height: 50px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.popular-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.popular-stats { display: flex; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.mini-stat { display: inline-flex; align-items: center; gap: 4px; }
.mini-stat svg { width: 13px; height: 13px; }
.popular-title {
  font-size: 14px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Dilihat / suka / bagikan (kiri) + tombol bagikan (kanan) */
.post-stats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border);
}
.stats-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stat {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600;
}
.stat svg { width: 18px; height: 18px; }
.stat-button { cursor: pointer; }
.stat-button:hover { border-color: var(--text); }
.stat-button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.stat-button[aria-pressed="true"] svg { fill: currentColor; }
button.social { -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0; }
.share-links .social svg { width: 18px; height: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.toast-float {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(20px + var(--safe-b));
  transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary);
  font-size: 14px; font-weight: 500; text-align: center;
}

@media (max-width: 1023px) {
  .carousel-track { grid-auto-columns: calc((100% - 20px) / 2); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .popular { position: static; margin-top: 48px; }
}
@media (max-width: 639px) {
  .post-cta { flex-direction: column; align-items: flex-start; padding: 20px; }
  .post-cta p { font-size: 16px; }
  .carousel-track { grid-auto-columns: 100%; }
  .article-grid { grid-template-columns: 1fr; }
  /* HP: deskripsi kartu artikel tampil utuh, tidak dipotong */
  .article-excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .post-body { font-size: 16px; }
  /* Teks tombol yang panjang di beberapa bahasa (mis. Tamil) turun ke baris kedua, tidak melebihi layar */
  .header-cta { padding: 4px 14px; font-size: 14px; height: auto; min-width: 0; max-width: 48%; white-space: normal; text-align: center; line-height: 1.2; }
  .related-head { flex-wrap: wrap; }
}
.article-page-body .topbar-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
@media (max-width: 899px) { .article-page-body .topbar-inner { display: flex; justify-content: space-between; } }

[hidden] { display: none !important; }

/* ---------- Pola latar: satu pola titik menerus untuk semua section ---------- */
/* Dipasang di body (bukan per section) agar pola menyambung rapi melewati garis pembatas. */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23E4E4E7'/%3E%3C/svg%3E");
  background-position: center var(--pattern-y, 0px);
}
@media all { /* tema gelap selalu aktif */
  body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23222225'/%3E%3C/svg%3E"); }
}