/* =====================================================================
 * SAMARA publik - dasar tema "Neon Grid" (sama dengan MEKAR) untuk
 * halaman tanpa AdminBSB: landing, login, daftar, daftar sukses, halaman
 * statis. Dimuat lewat _theme_head.php ($theme_publik = true) SEBELUM
 * <style> milik tiap halaman, jadi halaman cukup memakai variabel --sm-*.
 * Mode terang/gelap mengikuti <html data-theme> (assets/js/samara-theme.js).
 * ===================================================================== */

:root {
	color-scheme: light;
	--sm-bg: #F3F6FC;
	--sm-bg-glow:
		radial-gradient(900px 520px at 8% -8%, rgba(59, 130, 246, .14), transparent 60%),
		radial-gradient(760px 480px at 100% 4%, rgba(168, 85, 247, .12), transparent 60%),
		radial-gradient(900px 600px at 50% 115%, rgba(6, 182, 212, .1), transparent 60%);
	--sm-grid-line: rgba(37, 99, 235, .07);
	--sm-surface: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(246, 249, 255, .92));
	--sm-surface-solid: #FFFFFF;
	--sm-input: #FFFFFF;
	--sm-fill: rgba(15, 23, 42, .035);
	--sm-nav-bg: rgba(248, 250, 255, .82);
	--sm-border: rgba(37, 99, 235, .14);
	--sm-border-strong: rgba(37, 99, 235, .26);
	--sm-ink: #0F172A;
	--sm-text: #334155;
	--sm-muted: #64748B;
	--sm-faint: #94A3B8;
	--sm-primary: #0E7490;
	--sm-primary-rgb: 6, 182, 212;
	--sm-primary-light: rgba(6, 182, 212, .1);
	--sm-success: #059669;
	--sm-danger: #BE123C;
	--sm-danger-bg: #FFF1F2;
	--sm-danger-border: #FECDD3;
	--sm-shadow: 0 10px 30px rgba(30, 58, 138, .08), inset 0 1px 0 #FFFFFF;
	--sm-shadow-lg: 0 24px 50px rgba(30, 58, 138, .12), inset 0 1px 0 #FFFFFF;
	--sm-shadow-hover: 0 18px 40px rgba(30, 58, 138, .16);
	--sm-glow-text: none;
	--sm-link-glow: none;
	--sm-grad: linear-gradient(120deg, #22D3EE 0%, #3B82F6 50%, #A855F7 100%);
	--sm-grad-btn: linear-gradient(120deg, #0891B2 0%, #2563EB 50%, #7C3AED 100%);
	--sm-grad-text: linear-gradient(120deg, #0891B2 0%, #2563EB 50%, #7C3AED 100%);
	--sm-hero-bg:
		radial-gradient(600px 320px at 85% 20%, rgba(168, 85, 247, .14), transparent 70%),
		radial-gradient(520px 300px at 10% 30%, rgba(6, 182, 212, .14), transparent 70%);
	--sm-holo:
		radial-gradient(420px 220px at 100% 0%, rgba(192, 132, 252, .55), transparent 70%),
		radial-gradient(380px 220px at 0% 100%, rgba(34, 211, 238, .45), transparent 70%),
		linear-gradient(135deg, #1E40AF, #4C1D95);
	--sm-font-body: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', sans-serif;
	--sm-font-display: 'Space Grotesk', 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
	--sm-font-brand: 'Orbitron', 'Space Grotesk', 'Segoe UI', sans-serif;
	--sm-radius: 18px;
}

html[data-theme="dark"] {
	color-scheme: dark;
	--sm-bg: #050816;
	--sm-bg-glow:
		radial-gradient(900px 520px at 8% -8%, rgba(59, 130, 246, .22), transparent 60%),
		radial-gradient(760px 480px at 100% 4%, rgba(168, 85, 247, .18), transparent 60%),
		radial-gradient(900px 600px at 50% 115%, rgba(34, 211, 238, .12), transparent 60%);
	--sm-grid-line: rgba(125, 211, 252, .055);
	--sm-surface: linear-gradient(160deg, rgba(20, 30, 66, .72), rgba(10, 15, 38, .8));
	--sm-surface-solid: #0C1331;
	--sm-input: rgba(255, 255, 255, .035);
	--sm-fill: rgba(255, 255, 255, .04);
	--sm-nav-bg: rgba(5, 8, 22, .78);
	--sm-border: rgba(125, 211, 252, .14);
	--sm-border-strong: rgba(125, 211, 252, .3);
	--sm-ink: #F5F8FF;
	--sm-text: #B8C4E6;
	--sm-muted: #8494BD;
	--sm-faint: #5F6F99;
	--sm-primary: #67E8F9;
	--sm-primary-rgb: 34, 211, 238;
	--sm-primary-light: rgba(34, 211, 238, .1);
	--sm-success: #34D399;
	--sm-danger: #FDA4AF;
	--sm-danger-bg: rgba(251, 113, 133, .12);
	--sm-danger-border: rgba(251, 113, 133, .38);
	--sm-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
	--sm-shadow-lg: 0 30px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
	--sm-shadow-hover: 0 18px 40px rgba(0, 0, 0, .45);
	--sm-glow-text: 0 0 18px rgba(34, 211, 238, .35);
	--sm-link-glow: 0 0 12px rgba(34, 211, 238, .6);
	--sm-grad-text: linear-gradient(120deg, #22D3EE 0%, #3B82F6 50%, #A855F7 100%);
	--sm-hero-bg:
		radial-gradient(600px 320px at 85% 20%, rgba(168, 85, 247, .24), transparent 70%),
		radial-gradient(520px 300px at 10% 30%, rgba(34, 211, 238, .18), transparent 70%);
	--sm-holo:
		radial-gradient(420px 220px at 100% 0%, rgba(168, 85, 247, .38), transparent 70%),
		radial-gradient(380px 220px at 0% 100%, rgba(34, 211, 238, .26), transparent 70%),
		linear-gradient(135deg, #0E1940, #0A0F2C);
}

/* Panel hologram (latar pekat) - teks selalu putih di kedua mode */
.sm-holo {
	--sm-ink: #FFFFFF;
	--sm-text: #DBE4FF;
	--sm-muted: rgba(226, 232, 255, .8);
	--sm-primary: #A5F3FC;
	--sm-border: rgba(255, 255, 255, .16);
	--sm-border-strong: rgba(255, 255, 255, .3);
	--sm-fill: rgba(255, 255, 255, .08);
	position: relative;
	overflow: hidden;
	color: var(--sm-text);
	background: var(--sm-holo);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 20px 45px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sm-holo::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(110deg, transparent 10%, #000 55%, transparent 95%);
	mask-image: linear-gradient(110deg, transparent 10%, #000 55%, transparent 95%);
}
.sm-holo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--sm-grad);
	box-shadow: 0 0 14px rgba(34, 211, 238, .7);
}
.sm-holo > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- Dasar */
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(var(--sm-primary-rgb), .3) transparent; }
html { background: var(--sm-bg); }
body {
	margin: 0;
	background: transparent;
	color: var(--sm-text);
	font-family: var(--sm-font-body);
	-webkit-font-smoothing: antialiased;
}
/* grid neon + cahaya di belakang seluruh halaman */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}
body::before { z-index: -2; background: var(--sm-bg-glow); }
body::after {
	z-index: -1;
	background-image:
		linear-gradient(var(--sm-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--sm-grid-line) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 80%);
	mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 25%, transparent 80%);
}
h1, h2, h3, h4 { font-family: var(--sm-font-display); color: var(--sm-ink); letter-spacing: -.01em; }
::selection { background: rgba(var(--sm-primary-rgb), .3); color: var(--sm-ink); }

.sm-grad-text {
	background: var(--sm-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.sm-wordmark {
	font-family: var(--sm-font-brand);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var(--sm-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.sm-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: var(--sm-primary);
	background: linear-gradient(135deg, rgba(var(--sm-primary-rgb), .18), rgba(168, 85, 247, .2));
	border: 1px solid rgba(var(--sm-primary-rgb), .45);
	box-shadow: 0 0 18px rgba(var(--sm-primary-rgb), .35), inset 0 0 12px rgba(var(--sm-primary-rgb), .2);
}

/* Tombol utama bergradien & tombol garis neon */
.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 0;
	border-radius: 12px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	color: #FFFFFF !important;
	text-decoration: none;
	cursor: pointer;
	background-image: var(--sm-grad-btn);
	background-size: 180% 100%;
	background-position: 0% 50%;
	box-shadow: 0 6px 22px rgba(59, 130, 246, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: background-position .4s ease, box-shadow .2s ease, transform .15s ease;
}
.sm-btn:hover, .sm-btn:focus-visible {
	background-position: 100% 50%;
	transform: translateY(-1px);
	box-shadow: 0 8px 30px rgba(124, 58, 237, .45), 0 0 0 1px rgba(165, 243, 252, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.sm-btn-outline {
	color: var(--sm-primary) !important;
	background: rgba(var(--sm-primary-rgb), .06);
	border: 1px solid rgba(var(--sm-primary-rgb), .5);
	box-shadow: none;
}
.sm-btn-outline:hover, .sm-btn-outline:focus-visible {
	background: rgba(var(--sm-primary-rgb), .14);
	box-shadow: 0 0 22px rgba(var(--sm-primary-rgb), .35);
}
.sm-btn .material-icons { font-size: 18px; }

/* Isian form */
.sm-input {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--sm-ink);
	background: var(--sm-input);
	border: 1px solid var(--sm-border-strong);
	border-radius: 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.sm-input::placeholder { color: var(--sm-faint); }
.sm-input:focus {
	outline: none;
	border-color: rgba(var(--sm-primary-rgb), .7);
	box-shadow: 0 0 0 3px rgba(var(--sm-primary-rgb), .16), 0 0 22px rgba(var(--sm-primary-rgb), .18);
}

/* Panel kaca */
.sm-panel {
	background: var(--sm-surface);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius);
	box-shadow: var(--sm-shadow);
}

/* ---------------------------------------------------------------- Tombol tema */
.s-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	color: var(--sm-primary);
	background: var(--sm-fill);
	border: 1px solid var(--sm-border-strong);
	border-radius: 12px;
	transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.s-theme-toggle:hover {
	color: var(--sm-ink);
	border-color: rgba(var(--sm-primary-rgb), .6);
	box-shadow: 0 0 18px rgba(var(--sm-primary-rgb), .3);
}
.s-theme-toggle .material-icons { font-size: 20px; }
.s-theme-toggle .ikon-terang { display: none; }
html[data-theme="dark"] .s-theme-toggle .ikon-terang { display: inline-block; }
html[data-theme="dark"] .s-theme-toggle .ikon-gelap { display: none; }
.s-theme-toggle.is-fixed {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 60;
	background: var(--sm-nav-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Transisi halus saat ganti tema (kelas dipasang sebentar oleh samara-theme.js) */
html.s-theme-anim, html.s-theme-anim * {
	transition: background-color .25s ease, border-color .25s ease, color .2s ease !important;
}

@keyframes sm-spin { to { transform: rotate(360deg); } }
@keyframes sm-pulse {
	0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
	70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.sm-live-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #34D399;
	animation: sm-pulse 2s infinite;
}

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