/* =============================================
   Bio Runtut.com — Stylesheet
   Brand: #1C276F primer · #dc2626 headline · #f59e0b aksen · #1c1917 footer
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

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

/* ── Tokens ── */
:root {
  --c-primer:       #1C276F;
  --c-primer-hover: #1856C2;
  --c-primer-tint:  #eef1fb;
  --c-red:          #dc2626;
  --c-amber:        #f59e0b;
  --c-footer-bg:    #1c1917;

  --bg:             #f8f7f4;
  --bg-card:        #ffffff;
  --bg-service:     #f3f4f8;
  --border:         #e4e3df;
  --border-hover:   #b6bde0;
  --text-primary:   #111118;
  --text-secondary: #5a5a6e;
  --text-muted:     #9999aa;
  --link-primary-bg:      var(--c-primer);
  --link-primary-text:    #ffffff;
  --link-primary-border:  var(--c-primer);

  --radius-card:    18px;
  --radius-link:    14px;
  --radius-service: 14px;
  --shadow-card:    0 2px 12px rgba(28,39,111,0.07), 0 0 0 1px var(--border);
  --shadow-hover:   0 8px 28px rgba(28,39,111,0.14);
  --shadow-page:    none;

  --font-serif: 'Sora', system-ui, sans-serif;
  --font-sans:  'Sora', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg:             #10111a;
  --bg-card:        #181924;
  --bg-service:     #1e2030;
  --border:         rgba(255,255,255,0.08);
  --border-hover:   rgba(255,255,255,0.2);
  --text-primary:   #eeeef4;
  --text-secondary: rgba(238,238,244,0.55);
  --text-muted:     rgba(238,238,244,0.32);
  --c-primer-tint:  rgba(28,39,111,0.22);
  --link-primary-bg:     var(--c-primer);
  --link-primary-text:   #ffffff;
  --link-primary-border: #2d3d9a;
  --shadow-card:    0 2px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-hover:   0 8px 32px rgba(0,0,0,0.5);
}

/* ── Base ── */
html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

/* ── Theme toggle ── */
.theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.theme-toggle:hover { border-color: var(--border-hover); box-shadow: 0 3px 12px rgba(0,0,0,0.12); transform: scale(1.07); }
.theme-toggle svg { width: 16px; height: 16px; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* ── Layout ── */
.page {
  padding: 48px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Stagger animation ── */
.profile-header,
.links-grid,
.section-divider,
.about-card,
.services-grid,
.legal-card {
  animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 90ms);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Profile header ── */
.profile-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px 28px 26px;
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.logo-block { display: flex; justify-content: center; }

.logo { height: 36px; width: auto; max-width: 190px; object-fit: contain; display: none; }

/* Light mode */
[data-theme="light"] .logo-for-light { display: block; }
[data-theme="light"] .logo-for-dark  { display: none; }
/* Dark mode */
[data-theme="dark"]  .logo-for-dark  { display: block; }
[data-theme="dark"]  .logo-for-light { display: none; }

.profile-tagline {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 340px;
  font-weight: 300;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primer-tint);
  border: 1px solid rgba(28,39,111,0.15);
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-primer);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .badge-verified {
  border-color: rgba(100,130,255,0.2);
  color: #8fa4ff;
  background: rgba(28,39,111,0.25);
}
.badge-verified svg { width: 13px; height: 13px; }

/* ── Links grid ── */
.links-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-link);
  padding: 15px 16px;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}

.link-card:hover, .link-card:focus-visible {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  outline: none;
}

.link-card:active { transform: translateY(0) scale(0.99); }

/* Primary link — filled */
.link-primary {
  background: var(--link-primary-bg);
  border-color: var(--link-primary-border);
  color: var(--link-primary-text);
  box-shadow: 0 4px 18px rgba(28,39,111,0.25);
}

.link-primary:hover {
  background: var(--c-primer-hover);
  border-color: var(--c-primer-hover);
  box-shadow: 0 8px 28px rgba(28,39,111,0.38);
}

.link-primary .lc-body strong { color: #fff; }
.link-primary .lc-body span   { color: rgba(255,255,255,0.72); }
.link-primary .lc-icon        { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); color: #fff; }
.link-primary .lc-arrow       { color: rgba(255,255,255,0.65); }
.link-primary:hover .lc-arrow { color: #fff; }

.lc-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-primer-tint);
  border: 1px solid rgba(28,39,111,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primer);
  transition: background 0.2s;
}
[data-theme="dark"] .lc-icon { background: rgba(28,39,111,0.2); border-color: rgba(100,130,255,0.15); color: #8fa4ff; }

.lc-icon svg { width: 18px; height: 18px; }

.lc-body { flex: 1; min-width: 0; }
.lc-body strong { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-body span   { display: block; font-size: 0.75rem; color: var(--text-secondary); font-weight: 300; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lc-arrow { flex-shrink: 0; color: var(--text-muted); transition: color 0.2s, transform 0.2s; }
.lc-arrow svg { width: 15px; height: 15px; }
.link-card:hover .lc-arrow { color: var(--c-primer); transform: translate(2px, -2px); }
[data-theme="dark"] .link-card:hover .lc-arrow { color: #8fa4ff; }

/* ── Section divider ── */
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.section-divider span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── About card ── */
.about-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.about-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-red);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.about-text {
  font-size: 0.855rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin-bottom: 10px;
}
.about-text em { color: var(--text-primary); font-style: normal; font-weight: 500; }
.about-text:last-of-type { margin-bottom: 20px; }

.vision-mission {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.vm-block {}

.vm-label {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primer);
  background: var(--c-primer-tint);
  border: 1px solid rgba(28,39,111,0.12);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 8px;
}
[data-theme="dark"] .vm-label { background: rgba(28,39,111,0.22); color: #8fa4ff; border-color: rgba(100,130,255,0.15); }

.vm-block p {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.mission-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mission-list li {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mission-list li::before {
  content: counter(item);
  counter-increment: item;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-primer-tint);
  color: var(--c-primer);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
[data-theme="dark"] .mission-list li::before { background: rgba(28,39,111,0.28); color: #8fa4ff; }
.mission-list { counter-reset: item; }

/* ── Services grid ── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.service-card {
  background: var(--bg-service);
  border: 1px solid var(--border);
  border-radius: var(--radius-service);
  padding: 20px 20px 18px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.service-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.service-icon {
  display: flex;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  color: var(--c-primer);
  margin-bottom: 12px;
}
[data-theme="dark"] .service-icon { color: #8fa4ff; }
.service-icon svg { width: 17px; height: 17px; }

.service-card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.service-sub {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-amber);
  margin-bottom: 8px;
}

.service-card p {
  font-size: 0.815rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── Legal card ── */
.legal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.legal-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--c-primer);
  margin-top: 2px;
}
[data-theme="dark"] .legal-icon { color: #8fa4ff; }
.legal-icon svg { width: 36px; height: 36px; }

.legal-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.legal-text {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Footer ── */
.site-footer {
  background: var(--c-footer-bg);
  width: 100%;
  text-align: center;
  padding: 18px 16px;
  margin-top: 24px;
}
.site-footer p { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.site-footer a:hover { color: #fff; }

/* ── Responsive ── */

/* Mobile base: semua single column, padding nyaman */
@media (max-width: 519px) {
  .page { padding: 52px 14px 28px; }
  .container { gap: 9px; }
  .theme-toggle { top: 14px; right: 14px; }

  .profile-header { padding: 24px 20px 20px; gap: 8px; }
  .logo { height: 30px; }
  .profile-tagline { font-size: 0.82rem; }
  .badge-verified { font-size: 0.67rem; padding: 4px 10px; }

  .link-card { padding: 13px 13px; gap: 11px; border-radius: 12px; }
  .lc-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; }
  .lc-icon svg { width: 16px; height: 16px; }
  .lc-body strong { font-size: 0.82rem; }
  .lc-body span { font-size: 0.7rem; }
  .lc-arrow svg { width: 13px; height: 13px; }

  .about-card { padding: 20px 18px; }
  .about-heading { font-size: 1rem; }
  .about-text { font-size: 0.8rem; }
  .vm-label { font-size: 0.62rem; }
  .vm p, .vm li { font-size: 0.78rem; }
  .vm li::before { width: 17px; height: 17px; font-size: 0.6rem; }

  .services-grid { grid-template-columns: 1fr; }
  .service-card { padding: 16px 14px; }
  .service-icon { width: 30px; height: 30px; border-radius: 8px; }
  .service-icon svg { width: 14px; height: 14px; }
  .service-card h3 { font-size: 0.85rem; }
  .service-sub { font-size: 0.62rem; }
  .service-card p { font-size: 0.76rem; }

  .legal-card { padding: 14px 16px; gap: 11px; }
  .legal-icon svg { width: 28px; height: 28px; }
  .legal-name { font-size: 0.78rem; }
  .legal-text { font-size: 0.7rem; }

  .site-footer { padding: 14px 16px; margin-top: 18px; }
  .site-footer p { font-size: 0.7rem; }
}

/* Tiny screens (iPhone SE, 320px) */
@media (max-width: 360px) {
  .page { padding: 48px 12px 24px; }
  .profile-header { padding: 20px 16px 18px; }
  .link-card { padding: 12px 11px; gap: 9px; }
  .lc-icon { width: 33px; height: 33px; }
  .lc-body strong { font-size: 0.78rem; }
  .lc-body span { font-size: 0.67rem; }
  .about-card { padding: 18px 14px; }
}

/* Tablet+ */
@media (min-width: 520px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 640px) {
  .page { padding: 56px 24px 32px; }
  .profile-header { padding: 36px 36px 30px; }
  .about-card { padding: 32px 32px; }
  .vision-mission { flex-direction: row; gap: 24px; }
  .vm-block { flex: 1; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card:last-child { grid-column: auto; }
  .logo { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}


/* ===== RUNTUT BRAND THEME OVERRIDE ===== */

/* Light mode */
:root,
[data-theme="light"] {
  --runtut-primary: #1C276F;
  --runtut-hover: #1856C2;

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8faff;
  --text: #142433;
  --muted: #6b778c;
  --border: #d8e4f2;
  --border-hover: rgba(24, 86, 194, 0.35);
  --soft: #eef3ff;
  --shadow: rgba(28, 39, 111, 0.10);
}

/* Dark mode */
[data-theme="dark"] {
  --runtut-primary: #1C276F;
  --runtut-hover: #1856C2;

  --bg: #070c16;
  --surface: #101827;
  --surface-2: #121c2f;
  --text: #f4f7fb;
  --muted: #a8b3c7;
  --border: rgba(255,255,255,0.11);
  --border-hover: rgba(120, 154, 255, 0.40);
  --soft: rgba(24, 86, 194, 0.18);
  --shadow: rgba(0, 0, 0, 0.34);
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Center bio layout cleanly */
.container,
.wrapper,
main {
  background: transparent !important;
}

/* Make desktop preview look more premium */
@media (min-width: 768px) {
  .container,
  .wrapper,
  main {
    max-width: 520px !important;
  }
}

/* Cards */
.profile-card,
.header-card,
.card,
.about-card,
.service-card,
.contact-card,
.cta-card,
.bio-link,
.link-card,
.menu-card,
.item-card,
.legal-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 16px 44px var(--shadow) !important;
}

/* Header/profile top card */
.profile-card,
.header-card {
  background: var(--surface) !important;
}

[data-theme="dark"] .profile-card,
[data-theme="dark"] .header-card {
  background: linear-gradient(180deg, #121827 0%, #0f1625 100%) !important;
}

/* Link cards */
.link-card,
.bio-link,
.menu-card,
.item-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.link-card:hover,
.bio-link:hover,
.menu-card:hover,
.item-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--border-hover) !important;
  box-shadow: 0 20px 50px rgba(24, 86, 194, 0.14) !important;
}

/* Featured / active link */
.link-card.active,
.bio-link.active,
.active,
.primary,
.featured,
.highlight {
  background: linear-gradient(135deg, #1C276F 0%, #1856C2 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.16) !important;
}

.link-card.active *,
.bio-link.active *,
.active *,
.primary *,
.featured *,
.highlight * {
  color: #ffffff !important;
}

/* Icons */
.icon,
.icon-box,
.card-icon,
.link-icon,
.lc-icon,
.service-icon,
.legal-icon {
  background: var(--soft) !important;
  color: var(--runtut-hover) !important;
  border: 1px solid var(--border) !important;
}

/* Text */
h1,
h2,
h3,
.title,
.section-title,
.lc-title {
  color: var(--text) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

p,
.description,
.subtitle,
.lc-desc,
small {
  color: var(--muted) !important;
}

/* Badge verified */
.badge,
.badge-verified,
.verified,
.verify-badge {
  background: var(--soft) !important;
  color: var(--runtut-primary) !important;
  border: 1px solid rgba(24, 86, 194, 0.26) !important;
}

[data-theme="dark"] .badge,
[data-theme="dark"] .badge-verified,
[data-theme="dark"] .verified,
[data-theme="dark"] .verify-badge {
  color: #d8e3ff !important;
}

/* Buttons */
button,
.btn,
.button,
.cta {
  background: var(--runtut-primary) !important;
  color: #ffffff !important;
  border-color: var(--runtut-primary) !important;
}

button:hover,
.btn:hover,
.button:hover,
.cta:hover {
  background: var(--runtut-hover) !important;
  border-color: var(--runtut-hover) !important;
}

/* Theme toggle */
.theme-toggle {
  background: var(--runtut-primary) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 30px rgba(28, 39, 111, 0.25) !important;
}

/* Footer */
footer,
.footer {
  background: #0b1020 !important;
  color: rgba(255,255,255,0.72) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

footer *,
.footer * {
  color: rgba(255,255,255,0.78) !important;
}

/* Legal bottom card readable in dark */
[data-theme="dark"] .legal-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .cta-card {
  background: #121827 !important;
}

/* Logo handling */
[data-theme="dark"] .logo-for-dark {
  display: block !important;
}

[data-theme="dark"] .logo-for-light {
  display: none !important;
}

[data-theme="light"] .logo-for-light {
  display: block !important;
}

[data-theme="light"] .logo-for-dark {
  display: none !important;
}


/* ===== CENTER LAYOUT FIX ===== */

/* Pastikan halaman bio berada di tengah layar */
body {
  min-height: 100vh !important;
  background: var(--bg) !important;
}

/* Target wrapper utama bio */
.container,
.wrapper,
main,
.bio-container,
.bio-wrapper,
.page,
.app {
  width: min(100% - 32px, 520px) !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Jangan biarkan konten mulai dari kiri */
main {
  display: block !important;
  padding-top: 72px !important;
  padding-bottom: 48px !important;
}

/* Card tetap full dalam container */
.profile-card,
.header-card,
.link-card,
.bio-link,
.about-card,
.service-card,
.contact-card,
.cta-card,
.legal-card,
.card {
  width: 100% !important;
}

/* Theme toggle tetap pojok kanan */
.theme-toggle {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 999 !important;
}

/* Footer tetap full width, bukan ikut container kecil */
footer,
.footer {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Mobile */
@media (max-width: 640px) {
  .container,
  .wrapper,
  main,
  .bio-container,
  .bio-wrapper,
  .page,
  .app {
    width: min(100% - 24px, 520px) !important;
  }

  main {
    padding-top: 64px !important;
  }

  .theme-toggle {
    top: 14px !important;
    right: 14px !important;
  }
}


/* ===== TEXT VISIBILITY + ENGLISH BIO FIX ===== */

/* Make the first portal card readable in light mode */
[data-theme="light"] .link-card,
[data-theme="light"] .bio-link,
[data-theme="light"] .menu-card,
[data-theme="light"] .item-card {
  background: #ffffff !important;
  color: #142433 !important;
}

[data-theme="light"] .link-card *,
[data-theme="light"] .bio-link *,
[data-theme="light"] .menu-card *,
[data-theme="light"] .item-card * {
  color: inherit !important;
}

[data-theme="light"] .link-card .lc-title,
[data-theme="light"] .bio-link .lc-title,
[data-theme="light"] .menu-card .lc-title,
[data-theme="light"] .item-card .lc-title {
  color: #142433 !important;
}

[data-theme="light"] .link-card .lc-desc,
[data-theme="light"] .bio-link .lc-desc,
[data-theme="light"] .menu-card .lc-desc,
[data-theme="light"] .item-card .lc-desc {
  color: #667085 !important;
}

[data-theme="light"] .link-card .lc-arrow,
[data-theme="light"] .bio-link .lc-arrow,
[data-theme="light"] .menu-card .lc-arrow,
[data-theme="light"] .item-card .lc-arrow {
  color: #8a94a6 !important;
}

/* Keep active/featured card readable */
[data-theme="light"] .link-card.active,
[data-theme="light"] .bio-link.active,
[data-theme="light"] .primary,
[data-theme="light"] .featured,
[data-theme="light"] .highlight {
  background: linear-gradient(135deg, #1C276F 0%, #1856C2 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .link-card.active *,
[data-theme="light"] .bio-link.active *,
[data-theme="light"] .primary *,
[data-theme="light"] .featured *,
[data-theme="light"] .highlight * {
  color: #ffffff !important;
}

/* Header description spacing for longer English text */
.profile-card .subtitle,
.header-card .subtitle,
.profile-card p,
.header-card p {
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65 !important;
}

/* Slightly wider header card so new description breathes */
.profile-card,
.header-card {
  padding-left: 34px !important;
  padding-right: 34px !important;
}


/* ===== BIO TEXT FINAL POLISH ===== */
.profile-card p,
.header-card p,
.subtitle {
  max-width: 560px !important;
  line-height: 1.65 !important;
}

@media (min-width: 768px) {
  .profile-card,
  .header-card {
    padding-top: 54px !important;
    padding-bottom: 48px !important;
  }
}

[data-theme="light"] .link-card,
[data-theme="light"] .bio-link {
  background: #ffffff !important;
}

[data-theme="light"] .link-card .lc-title,
[data-theme="light"] .bio-link .lc-title {
  color: #142433 !important;
}

[data-theme="light"] .link-card .lc-desc,
[data-theme="light"] .bio-link .lc-desc {
  color: #667085 !important;
}


/* ===== FINAL WIDTH + SECTION TEXT FIX ===== */

/* Paksa seluruh konten utama konsisten di satu lebar */
.container,
.wrapper,
main,
.bio-container,
.bio-wrapper,
.page,
.app {
  width: min(100% - 32px, 620px) !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Semua card utama full sesuai container */
.profile-card,
.header-card,
.link-card,
.bio-link,
.about-card,
.service-card,
.contact-card,
.cta-card,
.legal-card,
.card,
.section-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Section divider juga sama lebar dengan card */
.section-label,
.section-title-wrap,
.section-divider,
.divider-title {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Service grid tetap dalam lebar container */
.services,
.service-grid,
.services-grid {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Service card jangan melebar sendiri-sendiri */
.service-card {
  min-width: 0 !important;
}

/* Typography section label */
.section-label,
.section-title-wrap,
.section-divider,
.divider-title {
  color: #8a94a6 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* About text lebih rapi */
.about-card p,
.card p {
  line-height: 1.72 !important;
}

/* Mobile: service jadi 1 kolom biar tidak sempit */
@media (max-width: 640px) {
  .container,
  .wrapper,
  main,
  .bio-container,
  .bio-wrapper,
  .page,
  .app {
    width: min(100% - 24px, 620px) !important;
  }

  .services,
  .service-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}