/*

PRIMA MEMBRANE
MAIN STYLESHEET
STABLE RENDERING / ANTI FOUC / LOW CLS

*/

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

ROOT VARIABLES
========================================================= */

:root {
--c-primary: #0f172a;
--c-accent: #FF6600;
--c-accent-hover: #e65c00;

--c-white: #ffffff;
--c-bg: #ffffff;
--c-bg-alt: #f8fafc;

--font-base:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

--container-width: 1200px;

/*
 * HARUS SAMA DENGAN HEADER PHP
 */
--header-height: 74px;

--ease:
    cubic-bezier(0.4, 0, 0.2, 1);

/*
 * Z-index hierarchy
 */
--z-header: 1000;
--z-dropdown: 1010;
--z-overlay: 1090;
--z-drawer: 1100;


}

/* =========================================================
2. RESET
========================================================= */

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

/* =========================================================
3. HTML
========================================================= */

html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;

/*
 * Memberikan ruang untuk fixed header
 * saat anchor scrolling.
 */
scroll-padding-top:
    calc(var(--header-height) + 10px);


}

/* =========================================================
4. BODY
========================================================= */

body {
margin: 0;

/*
 * PENTING:
 * Jangan ubah nilai ini menggunakan JS.
 */
padding-top: var(--header-height);

font-family: var(--font-base);
background-color: var(--c-bg);
color: #333333;
line-height: 1.6;
overflow-x: hidden;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;


}

/* =========================================================
5. ANCHOR OFFSET
========================================================= */

[id] {
scroll-margin-top:
calc(var(--header-height) + 10px);
}

/* =========================================================
6. IMAGES
========================================================= */

img {
display: block;
max-width: 100%;
height: auto;

/*
 * Jangan memberikan background image
 * ke semua gambar karena dapat membuat
 * rendering gambar lebih berat.
 */


}

/*

Jika gambar mempunyai width + height dari HTML,

browser dapat langsung menyediakan ruang.
*/
img[width][height] {
height: auto;
}

/* =========================================================
7. TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5 {
color: var(--c-primary);
font-weight: 800;
line-height: 1.2;
margin-bottom: 1rem;
}

h1 {
font-size:
clamp(2.2rem, 5vw, 4rem);
}

h2 {
font-size:
clamp(1.8rem, 4vw, 2.5rem);
}

h3 {
font-size:
clamp(1.4rem, 3vw, 1.8rem);
}

/* =========================================================
8. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline:
3px solid var(--c-accent);

outline-offset: 3px;
border-radius: 4px;


}

/* =========================================================
9. LINKS
========================================================= */

.post-content a {
text-decoration: underline;
font-weight: 600;
}

/* =========================================================
10. TEXT
========================================================= */

.text-highlight {
display: inline-block;

color:
    var(--c-accent) !important;

border: none !important;
text-decoration: none !important;
background: transparent !important;


}

.text-white,
.hero-section,
.hero-section h1 {
color: var(--c-white);
}

.text-white .text-highlight {
color: var(--c-accent);
}

/* =========================================================
11. HERO
========================================================= */

.hero-section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 560px;

padding:
    120px 20px 80px;

overflow: hidden;
text-align: center;

background-color:
    var(--c-primary);


}

.hero-section h1 {
margin-bottom: 24px;
}

.hero-section .text-highlight {
color: var(--c-accent);
border-bottom: none;
}

.hero-section h2,
.hero-section p {
color: #cbd5e1;
font-weight: 400;
}

/* =========================================================
12. BUTTON
========================================================= */

.btn,
.float-btn {
display: inline-flex;
align-items: center;
justify-content: center;

padding:
    14px 32px;

border: none;
border-radius: 99px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;

transition:
    transform .2s var(--ease),
    background-color .2s var(--ease),
    border-color .2s var(--ease);


}

.btn-primary {
color: var(--c-white);

background-color:
    var(--c-accent);


}

.btn-primary:hover {
color: var(--c-white);

background-color:
    var(--c-accent-hover);

transform:
    translateY(-2px);


}

.btn-outline {
color: var(--c-white);

background-color:
    transparent;

border:
    1px solid rgba(255,255,255,.3);


}

.btn-outline:hover {
color: var(--c-white);

background-color:
    rgba(255,255,255,.1);

border-color:
    var(--c-white);


}

/* =========================================================
13. ICON
========================================================= */

.pm-icon {
display: inline-block;
width: 1.25em;
height: 1.25em;

margin-right:
    .5rem;

vertical-align:
    -.125em;

fill: currentColor;


}

/* =========================================================
14. SCROLL ANIMATION
========================================================= */

/*

PENTING:

Konten TIDAK disembunyikan ketika halaman pertama

kali dimuat.

Ini sengaja dilakukan untuk mencegah:

FOUC

blank content

flash content

LCP delay

CLS akibat JS

Semua elemen langsung berada pada posisi final.
*/

[data-anim] {
opacity: 1;
transform: none;

/*
 * Animasi hanya digunakan ketika class
 * .in-view benar-benar ditambahkan.
 */
transition:
    opacity .6s var(--ease),
    transform .6s var(--ease);


}

/*

JANGAN gunakan lagi:

html.js-loaded [data-anim]:not(.in-view)

karena ini menyebabkan elemen menghilang

setelah JavaScript selesai loading.
*/

/*

Saat element diberi .in-view,

tetap berada pada kondisi normal.
*/

[data-anim].in-view {
opacity: 1;
transform: none;
}

/* =========================================================
15. NAVIGATION
========================================================= */

.nav-menu {
display: flex;
align-items: center;
gap: 30px;
list-style: none;
}

.nav-item {
position: relative;
}

/* =========================================================
16. DROPDOWN
========================================================= */

.dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;

z-index: var(--z-dropdown);
min-width: 220px;
padding: 10px 0;
list-style: none;

background: var(--c-white);
border-radius: 8px;

box-shadow:
    0 10px 30px rgba(0,0,0,.1);

/*
 * State awal benar-benar tersembunyi.
 */
visibility: hidden;
opacity: 0;
pointer-events: none;

transform:
    translate3d(0,10px,0);

transition:
    opacity .2s var(--ease),
    transform .2s var(--ease),
    visibility .2s ease;


}

.nav-item:hover > .dropdown {
visibility: visible;
opacity: 1;
pointer-events: auto;

transform:
    translate3d(0,0,0);


}

.dropdown li {
list-style: none;
}

.dropdown li a {
display: block;

padding:
    10px 20px;

white-space: nowrap;

color:
    var(--c-primary);

text-decoration: none;


}

.dropdown li a:hover {
color:
var(--c-accent);

background:
    #fff7ed;


}

/* =========================================================
17. FIXED HEADER COMPATIBILITY
========================================================= */

/*

Header dari header.php menggunakan:

position: fixed;

top: 0;

main.css hanya memastikan ruang body.
*/

.site-header {
position: fixed;
top: 0;
right: 0;
left: 0;

z-index:
    var(--z-header);

width: 100%;

height:
    var(--header-height);


}

/* =========================================================
18. HEADER INNER
========================================================= */

.header-inner {
width: 100%;

max-width:
    1280px;

height: 100%;

margin:
    0 auto;

padding:
    0 24px;

display: flex;
align-items: center;
justify-content: space-between;


}

/* =========================================================
19. LOGO
========================================================= */

.site-brand {
display: flex;
align-items: center;
flex-shrink: 0;
min-width: 0;
}

.site-brand a {
display: flex;
align-items: center;
min-height: 48px;
text-decoration: none;
}

.brand-logo {
display: block;
width: 240px;
height: 48px;
max-width: 240px;
object-fit: contain;
flex-shrink: 0;
}

/* =========================================================
20. DESKTOP NAV
========================================================= */

.desktop-nav {
display: none;
}

@media (min-width: 1024px) {
.desktop-nav {
display: block;

    margin:
        0 20px;
}


}

/* =========================================================
21. HEADER ACTION
========================================================= */

.header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}

/* =========================================================
22. CTA
========================================================= */

.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;

min-height: 44px;

padding:
    12px 24px;

color:
    var(--c-white);

background:
    var(--c-accent);

border-radius: 50px;
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none;

box-shadow:
    0 4px 14px rgba(255,102,0,.30);

transition:
    transform .2s var(--ease),
    background-color .2s var(--ease),
    box-shadow .2s var(--ease);


}

.btn-cta:hover {
color: var(--c-white);

background:
    var(--c-accent-hover);

transform:
    translateY(-2px);

box-shadow:
    0 6px 20px rgba(255,102,0,.40);


}

.btn-cta svg {
width: 18px;
height: 18px;
flex-shrink: 0;
fill: currentColor;
}

/* =========================================================
23. MOBILE TOGGLE
========================================================= */

.mobile-toggle {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;

width: 42px;
height: 42px;
padding: 10px;
border: 0;
border-radius: 8px;

background:
    #f1f5f9;

cursor: pointer;
appearance: none;


}

.bar {
display: block;
width: 22px;
height: 2px;

background:
    var(--c-primary);

border-radius: 2px;

transition:
    transform .3s ease,
    opacity .3s ease;


}

.mobile-toggle.active .bar:nth-child(1) {
transform:
translateY(8px)
rotate(45deg);
}

.mobile-toggle.active .bar:nth-child(2) {
opacity: 0;
}

.mobile-toggle.active .bar:nth-child(3) {
transform:
translateY(-8px)
rotate(-45deg);
}

@media (min-width: 1024px) {
.mobile-toggle {
display: none;
}
}

/* =========================================================
24. MOBILE DRAWER
========================================================= */

.mobile-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;

z-index:
    var(--z-drawer);

width:
    min(85vw, 320px);

height: 100dvh;

padding:
    80px 20px 20px;

overflow-y: auto;
box-sizing: border-box;

background:
    var(--c-white);

/*
 * STATE AWAL
 */
visibility: hidden;
opacity: 0;
pointer-events: none;

transform:
    translate3d(100%,0,0);

transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    opacity .2s ease,
    visibility .35s ease;


}

.mobile-drawer.open {
visibility: visible;
opacity: 1;
pointer-events: auto;

transform:
    translate3d(0,0,0);


}

/* =========================================================
25. MOBILE OVERLAY
========================================================= */

.drawer-overlay {
position: fixed;
inset: 0;

z-index:
    var(--z-overlay);

width: 100%;
height: 100%;

background:
    rgba(15,23,42,.50);

visibility: hidden;
opacity: 0;
pointer-events: none;

transition:
    opacity .25s ease,
    visibility .25s ease;


}

.drawer-overlay.open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

/* =========================================================
26. MOBILE MENU
========================================================= */

.mobile-item {
border-bottom:
1px solid #f1f5f9;
}

.mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;

padding:
    16px 12px;

color:
    var(--c-primary);

font-weight: 600;
line-height: 1.3;
text-decoration: none;


}

.mobile-link svg {
flex-shrink: 0;

transition:
    transform .3s ease,
    color .3s ease;


}

/* =========================================================
27. MOBILE SUBMENU
========================================================= */

.mobile-submenu {
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;

background:
    #f8fafc;

border-radius: 8px;

transition:
    max-height .35s ease,
    margin .35s ease;


}

.mobile-item.active .mobile-submenu {
max-height: 600px;
margin-bottom: 10px;
}

.mobile-item.active .mobile-link svg {
transform:
rotate(180deg);

color:
    var(--c-accent);


}

.mobile-sub-link {
display: block;

padding:
    12px 24px;

color:
    #333333;

font-size: 14px;
line-height: 1.4;
text-decoration: none;


}

/* =========================================================
28. MOBILE RESPONSIVE
========================================================= */

@media (max-width: 1023px) {
.desktop-nav {
display: none;
}
}

@media (max-width: 768px) {
:root {
/*
* HARUS SAMA DENGAN HEADER PHP
*/
--header-height: 68px;
}

.hero-section {
    min-height:
        520px;

    padding:
        100px 20px 60px;
}

.btn {
    width: 100%;
}

.site-section {
    padding:
        48px 0;
}

h1 {
    font-size:
        2.2rem;
}

.header-inner {
    padding-left:
        16px;

    padding-right:
        16px;
}

.brand-logo {
    width:
        200px;

    height:
        44px;

    max-width:
        200px;
}

.btn-cta.desktop-only {
    display: none;
}


}

/* =========================================================
29. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
:root {
--header-height: 64px;
}

.brand-logo {
    width:
        180px;

    height:
        40px;

    max-width:
        180px;
}

.mobile-drawer {
    width:
        min(88vw, 320px);
}


}

/* =========================================================
30. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior:
auto !important;
}

*,
*::before,
*::after {
    animation-duration:
        0s !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        0s !important;
}


}

/* =========================================================
END
========================================================= */