/* GoKlik Bio theme applied on bio.zip page structure */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --bone: #f6f1e8;
  --bone-2: #efe7d8;
  --ink: #1c1915;
  --ink-soft: #3a342c;
  --muted: #6b6459;
  --line: rgba(28, 25, 21, 0.12);
  --pine: #2f6f5e;
  --pine-dark: #1d4d41;
  --card: #fffaf3;
}

html, body {
  background: #f6f1e8 !important;
  color: #1c1915 !important;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
}

h1, h2, h3, .logo-font, .tracking-tight {
  font-family: "Fraunces", Georgia, serif !important;
  color: #1c1915 !important;
}

.auth-bg, .auth-bg::before, .mesh-bg, .mesh {
  background: transparent !important;
  background-image: none !important;
}
.orb { display: none !important; }

.glass {
  background: #fffaf3 !important;
  border: 1px solid rgba(28,25,21,0.12) !important;
  color: #1c1915 !important;
  box-shadow: 0 20px 50px rgba(28,25,21,0.08) !important;
}

.text-white, .text-slate-100, .text-zinc-100 { color: #1c1915 !important; }
.text-slate-300, .text-slate-400, .text-slate-500,
.text-zinc-400, .text-zinc-500 { color: #6b6459 !important; }
.text-cyan-400, .text-cyan-300, .text-goklik-400 { color: #1d4d41 !important; }

.bg-slate-950, .bg-slate-900, .bg-slate-800,
.bg-slate-950\/70, .bg-slate-900\/80 {
  background-color: #ffffff !important;
  color: #1c1915 !important;
}

.border-slate-700, .border-slate-800, .border-white\/5,
.border-slate-700\/80, .border-slate-700\/50, .border-cyan-500\/20 {
  border-color: rgba(28,25,21,0.12) !important;
}

input, textarea, select {
  background: #fff !important;
  color: #1c1915 !important;
  border-color: rgba(28,25,21,0.12) !important;
}
.input-focus:focus, input:focus, textarea:focus {
  border-color: #2f6f5e !important;
  box-shadow: 0 0 0 4px rgba(47,111,94,0.12) !important;
}

.btn-glow,
.bg-cyan-400, .bg-cyan-500, .bg-cyan-600,
.from-cyan-500, .from-cyan-400 {
  background: #1c1915 !important;
  background-image: none !important;
  color: #f6f1e8 !important;
  box-shadow: none !important;
}

.sidebar {
  background: #fffaf3 !important;
  border-right: 1px solid rgba(28,25,21,0.12) !important;
}
.nav-item { color: #3a342c !important; }
.nav-item.active {
  background: rgba(47,111,94,0.12) !important;
  color: #1d4d41 !important;
  border-left: 3px solid #2f6f5e !important;
}
.tab-bar { background: #fff !important; border-color: rgba(28,25,21,0.12) !important; }
.design-tab, .pro-tab { color: #6b6459 !important; }
.phone-frame { border-color: #d7cfc0 !important; box-shadow: 0 20px 50px rgba(28,25,21,0.08) !important; }
.phone-notch { background: #d7cfc0 !important; }

#notFound h1 { color: #1c1915 !important; }
#notFound a.bg-cyan-600 { background: #1c1915 !important; color: #f6f1e8 !important; }


/* Contrast launch — jangan sentuh preview phone */
.sidebar, .nav-item, .tab-bar, .design-tab, .pro-tab { color: #3a342c !important; }
.sidebar .text-white, header .text-white, main .text-white { color: #1c1915 !important; }
.phone-frame .text-white,
.preview-scroll .text-white { color: #fff !important; }

.text-cyan-300\/70, .text-cyan-300 { color: #1d4d41 !important; opacity: 1 !important; }
.auth-kicker { color: #1d4d41 !important; font-weight: 700; letter-spacing: .04em; }

#googleBtn, #googleBtn * { color: #1c1915 !important; }
#googleBtn {
  background: #fff !important;
  border: 1px solid rgba(28,25,21,.16) !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}


/* Dashboard panels — kertas, teks ink. Preview phone tidak disentuh */
.section-panel, .section-panel .rounded-xl, .section-panel .rounded-2xl, .section-panel .rounded-lg {
  color: #1c1915;
}
.section-panel .bg-white\/5,
.section-panel .bg-slate-800,
.section-panel .bg-slate-900,
.section-panel .bg-slate-950,
.section-panel .bg-\[\#0f172a\] {
  background: #fffaf3 !important;
  border-color: rgba(28,25,21,0.12) !important;
}
.section-panel label,
.section-panel h2,
.section-panel h3,
.section-panel p,
.section-panel .text-slate-400,
.section-panel .text-slate-300 {
  color: #3a342c !important;
}
.phone-frame, .phone-frame * { }


/* Butang gelap mesti teks cerah — text-white overlay jangan override */
#openShopBtn, #openShopBtn i, #openShopBtn span,
button.bg-cyan-600, button.bg-cyan-500, a.bg-cyan-600,
.bg-cyan-600.text-white, .bg-cyan-500.text-white,
button[class*="from-cyan"], .btn-glow {
  color: #f6f1e8 !important;
}

#contentOrderList [data-key] {
  background: #fffaf3 !important;
  border: 1px solid rgba(28,25,21,0.12) !important;
}
#contentOrderList .text-white,
#contentOrderList [data-key] {
  color: #1c1915 !important;
}
#contentOrderList .text-slate-500 { color: #6b6459 !important; }

/* Kad susunan / list gelap: teks cerah */
.bg-slate-950\/60 .text-white { color: #f6f1e8 !important; }


/* Panel dashboard: teks ink atas kad kertas */
.section-panel h2, .section-panel h3,
.section-panel .text-2xl, .section-panel .font-bold,
.section-panel .text-white,
#section-profile h2, #section-design h2, #section-pro h2,
#section-settings h2, #section-domain h2, #section-shop h2 {
  color: #1c1915 !important;
}
.section-panel p, .section-panel label, .section-panel span,
.section-panel .text-slate-300, .section-panel .text-slate-400,
.section-panel .text-slate-500, .section-panel .text-xs,
.section-panel .text-sm {
  color: #3a342c !important;
}
.section-panel input, .section-panel textarea, .section-panel select {
  color: #1c1915 !important;
}
.section-panel .bg-slate-900\/60,
.section-panel .bg-slate-900,
.section-panel .bg-slate-800,
.section-panel .border-slate-800 {
  background: #fffaf3 !important;
  border-color: rgba(28,25,21,0.12) !important;
}
/* butang utama dalam panel kekal teks cerah */
.section-panel button.bg-cyan-600,
.section-panel button.bg-cyan-500,
.section-panel #openShopBtn,
.section-panel button[class*="from-cyan"] {
  color: #f6f1e8 !important;
  background: #1c1915 !important;
}


/* --- targeted readable controls --- */
#publishShareBtn, #publishShareBtn span, #publishShareBtn i,
#qrDownloadBtn, #qrDownloadBtn span, #qrDownloadBtn i,
#qrShareBtn, #qrShareBtn span, #qrShareBtn i,
#saveYoutubeBtn, #saveSpotifyBtn, #saveLockBtn,
#saveAppearanceBtn, #saveProfileBtn, #saveBookingSettingsBtn,
#saveContentOrderBtn, #saveMapBtn, #saveWaBtn {
  color: #ffffff !important;
}
#publishShareBtn, #qrShareBtn { background: #1c1915 !important; }
#qrDownloadBtn, #saveYoutubeBtn, #saveSpotifyBtn, #saveLockBtn {
  background: #1c1915 !important;
}

#bookingEnabled + span,
label:has(#bookingEnabled),
.section-panel label.flex {
  color: #1c1915 !important;
}

#bookingServiceName, #bookingServicePrice,
#bookingSettingsFields input,
#bookingSettingsFields textarea,
#bookingSettingsFields select {
  background: #ffffff !important;
  color: #1c1915 !important;
  border-color: rgba(28,25,21,0.16) !important;
}

#bookingServicesList .text-white,
#bookingServicesList p,
#bookingServicesList .truncate {
  color: #1c1915 !important;
}
#bookingServicesList .bg-slate-950\/80,
#bookingServicesList > div {
  background: #fffaf3 !important;
  border-color: rgba(28,25,21,0.12) !important;
}

#totalClicks, #totalShares, #trackedLinksCount {
  color: #1c1915 !important;
}
#totalClicks, #totalShares, #trackedLinksCount {
  color: #1c1915 !important;
}

/* samakan 3 kad analytics */
#section-analytics .rounded-2xl.p-5,
#pro-analytics .rounded-2xl.p-5,
.section-panel #totalClicks,
.section-panel #totalShares,
.section-panel #trackedLinksCount {
  color: #1c1915 !important;
}

#proActiveBanner, #proActiveBanner p, #proActiveBanner span, #proActiveUntil {
  color: #1c1915 !important;
}
#proActiveBanner {
  background: #fff6e8 !important;
  border-color: rgba(196,92,38,0.28) !important;
}
#proActiveBanner .text-emerald-300 { color: #1d4d41 !important; }

#section-analytics .grid > div,
#pro-analytics .grid > div {
  background: #fffaf3 !important;
  border: 1px solid rgba(28,25,21,0.12) !important;
  box-shadow: none !important;
}
#section-analytics .grid > div div,
#pro-analytics .grid > div div {
  color: #1c1915 !important;
}
#section-analytics .text-slate-400,
#section-analytics .text-slate-500,
#pro-analytics .text-slate-400,
#pro-analytics .text-slate-500 {
  color: #6b6459 !important;
}

/* Mobile dashboard chrome — teks & ikon putih */
.md\:hidden.fixed.top-0,
nav.md\:hidden.fixed.bottom-0 {
  background: #1c1915 !important;
  border-color: rgba(246,241,232,0.12) !important;
  color: #f6f1e8 !important;
}
.md\:hidden.fixed.top-0 .text-white,
.md\:hidden.fixed.top-0 span.font-bold,
.md\:hidden.fixed.top-0 #planPillMobile {
  color: #f6f1e8 !important;
}
.md\:hidden.fixed.top-0 #mobileMenuBtn,
.md\:hidden.fixed.top-0 .text-slate-300 {
  color: #f6f1e8 !important;
}
.mobile-nav, .mobile-nav i,
#mobilePreviewBtn, #mobilePreviewBtn i {
  color: rgba(246,241,232,0.72) !important;
}
.mobile-nav.text-cyan-400,
.mobile-nav.text-cyan-400 i {
  color: #ffffff !important;
}
.tab-bar.md\:hidden .design-tab,
.tab-bar.md\:hidden .pro-tab {
  color: #1c1915 !important;
}