/* ============================================================================

Nama File : /assets/css/custom.css

Deskripsi : Variabel Tema, Skala Grid Adaptif, & CSS Reset Lengkap

Proyek    : Portofolio Digital & CMS Muhammad Sayyid Ali (MSAL)

============================================================================ */

/* --------------------------------------------------------------------------

GLOBAL VARIABLES (BAKE IN) & RESET
-------------------------------------------------------------------------- */
:root {
--background: #ffffff;
--foreground: #111111;
--ink: #0a0a0a;
--muted: #8d8d8d;
--subtle: #b6b6b6;
--line: #e6e5e2;
--surface: #f1f0ee;
--surface-2: #e3e2df;

/* Aksen Tembaga Lumora */
--accent: #b15f2c;
--accent-from: #cf8047;
--accent-to: #97501f;

--hero-from: #ecebe9;
--hero-to: #c9c9c9;

/* Radii & Layout Tokens */
--radius-pill: 9999px;
--radius-card: 2rem;
--radius-card-sm: 1.25rem;
--radius-control: 0.875rem;
--text-watermark: 13rem;
--container-shell: 88rem;


}

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

html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}

body {
background: var(--background);
color: var(--foreground);
font-family: 'Onest', sans-serif;
overflow-x: hidden;
}

a {
color: inherit;
text-decoration: none;
}

button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}

ul {
list-style: none;
}

img {
display: block;
}

.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;
}

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

/* --------------------------------------------------------------------------
2. ADAPTIVE REM GRID (CRITICAL FOR PUBLIC PAGE)
-------------------------------------------------------------------------- /
/ Skala viewport dinamis ini HANYA akan bekerja di layar 1920 ke bawah /
@media (max-width: 1920px) { body:not(.admin-page) { font-size: 0.833333vw; } }   / base 1920 /
@media (max-width: 1440px) { body:not(.admin-page) { font-size: 1.111111vw; } }   / base 1440 /
@media (max-width: 1024px) { body:not(.admin-page) { font-size: 1.5625vw; } }     / base 1024 /
@media (max-width: 640px)  { body:not(.admin-page) { font-size: 4.444444vw; } }   / base 360  */

/* --------------------------------------------------------------------------
3. LENIS SMOOTH SCROLL OVERRIDES
-------------------------------------------------------------------------- /
/ Reset native smooth scroll agar Lenis berfungsi optimal */
html.lenis, html.lenis body {
height: auto;
width: 100%;
}

.lenis.lenis-smooth {
scroll-behavior: auto !important; /* Wajib auto untuk Lenis */
}

.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}

.lenis.lenis-stopped {
overflow: hidden;
}

.lenis.lenis-scrolling iframe {
pointer-events: none;
}

/* --------------------------------------------------------------------------
4. LAYOUT SHELL & BASE CLASSES
-------------------------------------------------------------------------- */
.shell {
max-width: var(--container-shell);
margin-inline: auto;
}

.font-jp {
font-family: 'Noto Sans JP', sans-serif;
}

/* Pola Grid Estetika (Digunakan di halaman Login/Admin jika perlu) */
.japanese-grid {
background-size: 32px 32px;
background-image:
linear-gradient(to right, rgba(226, 232, 240, 0.6) 1px, transparent 1px),
linear-gradient(to bottom, rgba(226, 232, 240, 0.6) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
5. CUSTOM SCROLLBARS
-------------------------------------------------------------------------- /
/ Kustomisasi Scrollbar Webkit (Admin) */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: rgba(107, 114, 128, 0.8);
}

/* Kustomisasi Scrollbar Halaman Utama */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--surface);
}
::-webkit-scrollbar-thumb {
background: var(--subtle);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}

/* --------------------------------------------------------------------------
6. ANIMATIONS & REVEALS (SPRING PHYSICS)
-------------------------------------------------------------------------- /
/ Efek Hover Elevated */
.btn-elevated {
box-shadow: 0 10px 20px -5px rgba(10, 10, 10, 0.2), 0 3px 6px -2px rgba(10, 10, 10, 0.08);
}
.btn-elevated:hover {
transform: translateY(-2px);
box-shadow: 0 14px 24px -5px rgba(10, 10, 10, 0.25), 0 5px 10px -2px rgba(10, 10, 10, 0.1);
}

/* Scroll Reveal Bawaan (Bisa dikombinasi dengan JS IntersectionObserver) */
.reveal-item {
opacity: 0;
transform: translateY(40px);
/* Spring config {200, 24} ~ easeOutCubic ~0.8s */
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}

.reveal-item.is-visible {
opacity: 1;
transform: translateY(0);
}

/* Efek kemunculan berurutan (Staggered Delays) */
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }

/* --------------------------------------------------------------------------
7. PAGE LOADER TRANSITIONS (LUMORA)
-------------------------------------------------------------------------- */
#pageLoader {
/* Exit slide: translateY 0 -> -100% {220,30} ~ cubic-bezier(.22,1,.36,1) ~0.7s */
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}

#pageLoader.loader-sliding {
transform: translateY(-100%);
}

#loaderContent {
/* Content fade out */
transition: opacity 0.5s ease, transform 0.5s ease;
will-change: opacity, transform;
}

/* Sembunyikan konten utama sampai loader selesai (Gated on 'ready') */
body:not(.loaded) main, body:not(.loaded) header {
opacity: 0;
}

body.loaded main, body.loaded header {
opacity: 1;
transition: opacity 0.5s ease-in;
}

/* Menghormati pengaturan aksesibilitas sistem (Reduced Motion) */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}