/* ============================================================
   RekanDoc Theme untuk RekanPDF
   Lapisan desain SAJA: font Plus Jakarta Sans (self-host) +
   palet stone hangat & satu aksen oranye dari RekanDoc.
   File ini dimuat terakhir di <head> semua halaman; tidak ada
   markup, konten, meta, atau JS yang diubah oleh file ini.
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: 'Plus Jakarta Sans Variable';
  src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* Token RekanDoc ditulis ke variabel yang sudah dipakai semua halaman */
:root {
  --orange: #C2410C;
  --orange-dark: #9A3412;
  --orange-light: #FB923C;
  --orange-bg: #FFF7ED;
  --navy: #1C1917;
  --navy2: #292524;
  --blue: #9A3412;
  --blue-light: #C2410C;
  --off: #FAFAF9;
  --border: #E7E5E4;
  --border2: #D6D3D1;
  --text: #1C1917;
  --text2: #44403C;
  --muted: #78716C;
  --green: #15803D;
  --red: #B91C1C;
  --shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
  --shadow-md: 0 10px 28px rgba(28, 25, 23, 0.11);
}

body {
  font-family: 'Plus Jakarta Sans Variable', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #FED7AA; color: #431407; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

h1, h2, h3 { letter-spacing: -0.015em; }

/* ---------- Header terang ala RekanDoc ---------- */
nav {
  background: #FAFAF9;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}
.logo-mark { border-radius: 8px; }
.logo-sub { color: var(--text); }
.nav-btn { color: var(--text2); }
.nav-btn:hover { background: #F5F5F4; border-color: transparent; color: var(--text); }
.mobile-menu-btn { color: var(--text); }
.search-toggle-btn { color: var(--text2); }
.search-toggle-btn:hover { color: var(--orange); }
.search-dropdown {
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  box-shadow: 0 18px 34px rgba(28, 25, 23, 0.12);
}
.search-inner { border: 1.5px solid var(--border2); border-radius: 12px; }
.btn-masuk-nav {
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--border2);
  border-radius: 100px;
}
.btn-trakteer-nav { border-radius: 100px; }

/* ---------- Hero terang (beranda) ---------- */
.hero { background: #FAFAF9; }
.hero h1 { color: var(--text); }
.hero h1 em { color: var(--orange); }
.hero p { color: var(--text2); }
.hero-eyebrow {
  background: #FFF7ED;
  border-color: #FED7AA;
  color: var(--orange-dark);
}
.featured-strip {
  background: var(--navy);
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Komponen ---------- */
.tool-card { border-radius: 16px; }
.tool-icon { border-radius: 14px; }
.upload-area { border-radius: 16px; background: #FFFFFF; }
.btn-primary-action, .btn-download { border-radius: 10px; }
.btn-sec, .btn-upload, .btn-remove { border-radius: 10px; }
.result-area { border-radius: 16px; }
.filter-pill { border-radius: 100px; }

/* Ikon kategori di drawer: pastel multi-hue -> rumpun stone/oranye */
.ico-red { background: #FFF7ED; color: #C2410C; }
.ico-blue { background: #F5F5F4; color: #44403C; }
.ico-green { background: #F0FDF4; color: #15803D; }
.ico-orange { background: #FFF7ED; color: #C2410C; }
.ico-purple { background: #F5F5F4; color: #9A3412; }
.ico-teal { background: #F0FDF4; color: #15803D; }
.ico-pink { background: #FFF7ED; color: #B91C1C; }
.ico-lime { background: #F5F5F4; color: #44403C; }
.ico-navy { background: #E7E5E4; color: #1C1917; }

/* Blok drawer yang semula biru -> hangat */
.md-auth {
  background: linear-gradient(135deg, rgba(194, 65, 12, 0.08), rgba(154, 52, 18, 0.08));
  border-top-color: rgba(194, 65, 12, 0.22);
  border-bottom-color: rgba(194, 65, 12, 0.22);
}
.md-auth .trakteer-ico, .trakteer-ico {
  background: linear-gradient(135deg, #C2410C, #9A3412);
}

/* Ikon tool: samakan ke ubin oranye lembut RekanDoc di semua halaman alat */
.tool-icon { background: var(--orange-bg); color: var(--orange); }

/* Strip pengunjung: gradasi biru -> tinta hangat */
.visitor-strip { background: var(--navy); }

/* Subnav kategori (artikel & sebagian halaman): biru -> terang */
.subnav { background: #FFFFFF; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.subnav-link { color: var(--text2); border-radius: 8px; }
.subnav-link:hover { background: #F5F5F4; color: var(--text); }
.subnav-link.active { background: var(--orange-bg); color: var(--orange-dark); }

/* ============================================================
   Migrasi Astro + Lucide (redesain komponen yang diminta)
   ============================================================ */

/* Ikon Lucide inline menggantikan font ikon lama.
   Elemen tetap <i class="lucide-ic"> agar semua selector lama
   (.md-link i, .faq-q i, dst.) tetap berlaku. */
.lucide-ic { font-style: normal; line-height: 0; }
.lucide-ic > svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; }

/* Logo navbar: ubin oranye + wordmark teks (bukan gambar) */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; }
.brand-tile {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--orange); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.18);
}
.brand-name {
  font-family: 'Plus Jakarta Sans Variable', sans-serif;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  line-height: 1;
}
.brand-name span { color: var(--orange); }

/* Badge hero: minimalis, tanpa huruf kapital berteriak */
.hero-eyebrow {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text2);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }

/* Strip pengunjung: band statistik bersih ala situs perusahaan,
   angka besar count-up (dirender JS), tanpa kotak digit odometer */
.visitor-strip {
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 20px;
}
.visitor-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 34px; max-width: 960px; margin: 0 auto; position: relative; z-index: 1;
}
.visitor-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--green);
}
.visitor-main { text-align: center; }
.visitor-label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.visitor-count, .odometer-wrap {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.visitor-today {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--orange-bg); color: var(--orange-dark);
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 100px;
}
.visitor-today .lucide-ic > svg { vertical-align: -0.2em; }
.visitor-number{display:flex;align-items:baseline;justify-content:center;gap:12px;}
.visitor-unit{font-size:2.5rem;font-weight:800;letter-spacing:-0.02em;line-height:1.1;color:var(--text);}

/* Saklar bahasa ID/EN */
.lang-switch{display:inline-flex;gap:2px;background:rgba(15,25,35,.07);border:1px solid rgba(15,25,35,.12);border-radius:999px;padding:2px;margin-right:10px;vertical-align:middle}
.lang-opt{font-family:'Plus Jakarta Sans Variable',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;color:#57534E;text-decoration:none;padding:4px 10px;border-radius:999px;line-height:1.2}
.lang-opt.is-active{background:#C2410C;color:#fff}
@media(max-width:900px){.lang-opt{min-height:44px;display:inline-flex;align-items:center}}