@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('animated.css');
@import url('scrollbar.css');

:root {
    --font-montserrat: "Montserrat", sans-serif;
    --font-inter: "Inter", sans-serif;

    --color-mainGold: #D6C26A;
    --color-darkGold: #94812d;
    --color-notWhite: #EDF3F1;
    --color-notBlack: #1E1E1E;
    --color-cream:#F0EDD8;
    --color-darkGreen:#084643;
}

* { 
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body { overflow-x: hidden; }
img { user-select: none; }
::-webkit-scrollbar{
    display: none;
}

.margin-x-section {
	padding-left: 24px;
	padding-right: 24px;
}

.title-text-shadow {
    text-shadow: 1.5px 1.5px 1px #000040;
}
.title-text-shadow-2 {
    text-shadow: 3px 3px 6px #000040;
}

.btnleft::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    top: 0;
    left: -40px;
    background-color: #917b31;
    z-index: -1;
    transition: all 0.5s;
}

.btnleft:hover::before {
    width: 160%;
}

.section-container {
    max-width: 1600px;
    margin-inline: auto;
}

/* =============== START HEADER =============== */
.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
	z-index: 9;
	overflow: hidden;
}

.auto-container{
	position:static;
	max-width:1200px;
	padding:0px 15px;
	margin:0 auto;
}

/* Posisi navbar kanan dan kiri */

.pull-right{
	float: right;
}

.pull-left{
	float: left;
}

/* Preloader */

.preloader{ 
	position:fixed; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	z-index:999999; 
	background-color:rgba(0,0,0,0); 
} 

.preloader .icon{ 
	position:fixed; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	z-index:1; 
	background-color:rgba(0,0,0,0); 
	background-position:center center; 
	background-repeat:no-repeat; 
	background-image:url(../images/graphic/gear\ full\ 9.svg);

	/* GANTI INI: Pakai Pixel biar anteng pas browser ditarik */
    background-size: 974px auto;

	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	animation: 2s gearAnimation linear infinite;
} 

.preloader .other-icon{ 
	position:fixed; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	z-index:2; 
	background-color:rgba(0,0,0,0); 
	background-position:center center; 
	background-repeat:no-repeat; 
	background-image:url(../images/graphic/rebuild\ tanpa\ gear.svg);
	/* GANTI INI: Pakai Pixel juga biar sinkron */
    background-size: 397px auto;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	margin-left: 34px;
} 

.page-loaded .preloader .icon,
.page-loaded .preloader .other-icon{
	opacity:0; 
}

.preloader:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#ffffff;
	z-index:0; 
	-webkit-transform:translateX(0%);
	-ms-transform:translateX(0%);
	transform:translateX(0%);
	-webkit-transition: all 800ms ease;
	-moz-transition: all 800ms ease;
	-ms-transition: all 800ms ease;
	-o-transition: all 800ms ease;
	transition: all 800ms ease;
}

.page-loaded .preloader:before{
	-webkit-transform:translateX(-101%);
	-ms-transform:translateX(-101%);
	transform:translateX(-101%);
}

.preloader:after{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background: linear-gradient(to right, #0F1E1C, #1e3d39);
	z-index:2; 
	-webkit-transform:translateX(101%);
	-ms-transform:translateX(101%);
	transform:translateX(101%);
	-webkit-transition: all 800ms ease;
	-moz-transition: all 800ms ease;
	-ms-transition: all 800ms ease;
	-o-transition: all 800ms ease;
	transition: all 800ms ease;
}

.page-loaded .preloader:after{
	-webkit-transform:translateX(-101%);
	-ms-transform:translateX(-101%);
	transform:translateX(-101%);
}

/* Main Header */

/* State 1: Saat di atas (Sticky & Transparan) */
.header-absolute {
    position: absolute !important;
    background-color: transparent !important;
    box-shadow: none !important;
    top: 0;
}

/* State 2: Saat Melayang (Fixed & Glassy) */
.header-fixed {
    position: fixed !important;
    top: 0;
    background-color: rgba(22, 46, 43, 0.4) !important; /* Warna himtika-dark dengan opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Shadow di bawah header */
}

/* .main-header{
	position: fixed;
	display: block;
	width: 100%;
	z-index: 99999;
	background-color:#252742;
} */
.main-header{
	display: block;
	width: 100%;
	z-index: 99999;
	transition: transform 0.5s ease, opacity 0.5s ease !important;
	
}

.main-header .header-top{
	position: relative;
	transition: opacity 0.3s ease;
}

/* Live News */

.live-news {
    background: linear-gradient(to right, black 0%, #94812d 30%, #c5ad43 100%);
    position: fixed;
    width: 115%;
    height: 45px;
    top: 0;
    left: 0;
}

.live-news .auto-container {
    max-width: 100% !important;
    padding: 0 30px !important;
    margin: 0 !important;
}

.live-news .rectangle {
    position: absolute;
    left: 0;
    top: 0;
    width: 310.5px;
    height: 45px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
	gap: 15px;
    box-shadow: #1C1E32;
}

.live-news .rectangle .rectangle-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -13px;
    z-index: 1;
}

.live-news .rectangle .rectangle-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 5px;
    z-index: 0;
}

.live-news .rectangle .kabinet-selaras {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
	font-family: "Montserrat";
}

.live-news .rectangle .selaras {
    position: relative;
    z-index: 2;
    width: 45px;
    height: 45px;
    margin: 10px 50px 0 0;
}

.live-news .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
	
}

.live-news .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    color: white;
    align-content: center;
    line-height: 45px;
    font-size: 16px;
    font-family: "Figtree";
	text-shadow: 2px 2px 2px #000040;
}

.live-news .marquee span a {
    color: white;
    text-decoration: underline;
    font-weight: bold;
}

.live-news .marquee span:hover {
    animation-play-state: paused;
}

.main-header .header-top .top{
	position: relative;
}

/*=== Header Upper ===*/
.header-upper{
	position: relative;
	top: 0;
	/* background-color:#252742; */
	height: 87px;
	left: 0;
    right: 0;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 1); Shadow di bawah header */
    transition: top 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.header-upper.sticky {
    top: 0;  /* Header akan berada di atas */
}

.main-header .nav-outer .logo-outer{
	position: absolute;
	left: 50%;
	z-index:2;
	transform: translateX(-50%);
	margin-top: 5px;
}

.main-header .nav-outer{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	position: sticky;
	float: right;
	width:100%;
	z-index:1;
}
/* 
.main-header .nav-outer .logo-header{
	display: inline-block;
	max-width: 200px;
	position: relative;
} */

.main-header .nav-outer .logo-outer img{
	position: relative;
	display: inline-block;
	width: 190px;
	/* height: 200px; */
}

/* Main Menu */

.main-menu{
	position:relative;
	float:left;
	width:90%;
	padding: 7px 0;
	margin: auto;
}

.main-menu .navbar-collapse{
	padding:0px;
	display:block !important;
}

.main-menu .navigation{
	position:relative;
	margin: -3px;
}

.main-menu .navigation > li{
	position:relative;
	float:left;
	z-index:2;
	padding:25px 0px;
	margin-right: 85px;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.main-menu .navigation > li:last-child{
	margin-right:0px;
}

.main-menu .navigation > li > a{
	font-family: "Montserrat";
	position:relative;
	display:block;
	text-align:center;
	font-size:16px;
	line-height:28px;
	font-weight:400;
	opacity:1;
	color:white;
	padding: 0px;
	z-index:1;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a{
	color: #ffffff;
}

.main-menu .navigation > li > ul{
	position:absolute;
	left:0px;
	top:100%;
	width:230px;
	z-index:100; 
	display: block !important;
	opacity: 0;
    visibility: hidden;
	overflow: hidden;

    transform: translateY(30px);
    transition: all 400ms ease; 

	padding: 0px 0px;
	background-color: #ffffff;
	border-top: 2px solid #00978d;
	border-bottom: 2px solid #00978d;
	-moz-transform: translateY(30px);
	-webkit-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
    transform: translateY(30px);
	-webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
	-ms-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
	-o-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
	-moz-box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
	box-shadow:2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
	border-radius: 8px;
}

.main-menu .navigation > li > ul > li{
	position:relative;
	width:100%;
	border-bottom:1px solid rgba(0,0,0,0.10);
}

.main-menu .navigation > li > ul > li:last-child{
	border-bottom:none;	
}

.main-menu .navigation > li > ul > li:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	width:0%;
	height:100%;
	display:block;
	background:#104642;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li:hover:before{
	width:100%;
}

.main-menu .navigation li a {
    text-decoration: none;
}

.main-menu .navigation > li > ul > li > a {
	position:relative;
	display:block;
	padding:12px 20px;
	line-height:24px;
	font-weight:500;
	font-size:15px;
	font-family: "Figtree";
	text-decoration: none;
	text-transform:capitalize;
	color:#252525;
	text-align: left;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li:hover > a{
	color:#ffffff;
}

.arrow {
    font-size: 10px;
    margin-left: 6px;
    transition: transform 0.3s ease;
	opacity: 0.5;
}

.main-menu .dropdown:hover .arrow {
    transform: rotate(180deg);
	opacity: 1;
}

.main-menu .navigation > li > ul > li.dropdown > a:after{
	font-family: "Figtree";
	content: "\f105";
	position:absolute;
	right:20px;
	top:12px;
	display:block;
	line-height:24px;
	font-size:16px;
	font-weight:800;
	text-align:center;
	z-index:5;	
}

.main-menu .navigation > li > ul > li > ul.from-right{
	left:auto;
	right:0px;	
}

.main-menu .navigation > li > ul > li > ul > li{
	position:relative;
	width:100%;
	border-bottom:1px solid rgba(0,0,0,0.10);
}

.main-menu .navigation > li > ul > li > ul > li:last-child{
	border-bottom:none;	
}

.main-menu .navigation > li > ul > li > ul > li:hover:before{
	width:100%;	
}

.main-menu .navigation > li > ul > li > ul > li:last-child{
	border-bottom:none;	
}

.main-menu .navigation > li > ul > li > ul > li > a{
	position:relative;
	display:block;
	padding:12px 20px;
	line-height:24px;
	font-weight:500;
	font-size:15px;
	font-family: "Figtree";
	text-transform:capitalize;
	color:#252525;
	text-align: left;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.main-menu .navigation > li > ul > li > ul > li:hover > a{
	color:#ffffff;
}

.main-menu .navigation .dropdown {
    position: relative;
    display: inline-block;
}

.main-menu .navigation > li.dropdown:hover > ul{
	visibility:visible;
	opacity:1;
	-moz-transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
    transform: translateY(0);
	transition:all 400ms ease;
	-moz-transition:all 300ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
}

.main-menu .navigation li.dropdown .dropdown-btn{
	position:absolute;
	width:34px;
	height:30px;
	border:1px solid #ffffff;
	text-align:center;
	font-size:16px;
	line-height:26px;
	color:#ffffff;
	cursor:pointer;
	z-index:5;
	display:none;
}

.dropdown-toggle::after{
	display: none;
}

/* Mobile Menu */

.nav-outer .mobile-nav-toggler{
	position: relative;
	float: right;
	font-size: 40px;
	line-height: 50px;
	cursor: pointer;
	color: white;
	display: none;
}

.mobile-menu{
	position: fixed;
	right: 0;
	top: 0;
	width: 300px;
	padding-right:20px;
	max-width:100%;
	height: 100vh; /*diubah dari 100% jadi 100vh*/
	opacity: 0;
	visibility: hidden;
	z-index: 9999999 !important;
}

.mobile-menu .navbar-collapse{
	display:block !important;	
}

.mobile-menu .nav-logo{
	position:relative;
	padding:30px 25px;
	text-align:left;	
}

.mobile-menu-visible{
	overflow: hidden;
}

.mobile-menu-visible .mobile-menu{
	opacity: 1;
	visibility: visible;
}

.mobile-menu .menu-backdrop{
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	height: 100vh; /*diubah dari 100% jadi 100vh*/
	z-index: 1;
	background: #162E2B;
	-webkit-transform: translateX(101%);
	-ms-transform: translateX(101%);
	transform: translateX(101%);
	transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
    -ms-transition: all 900ms ease;
    -o-transition: all 900ms ease;
}

.mobile-menu-visible .mobile-menu .menu-backdrop{
	opacity: 0.70;
	visibility: visible;
	-webkit-transition:all 0.7s ease;
	-moz-transition:all 0.7s ease;
	-ms-transition:all 0.7s ease;
	-o-transition:all 0.7s ease;
	transition:all 0.7s ease;
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.mobile-menu .menu-box{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	background: #162E2B;
	padding: 0px 0px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	border-radius: 0px;
	-webkit-transform: translateX(101%);
	-ms-transform: translateX(101%);
	transform: translateX(101%);
}

.mobile-menu-visible .mobile-menu .menu-box{
	opacity: 1;
	visibility: visible;
	-webkit-transition:all 0.7s ease;
	-moz-transition:all 0.7s ease;
	-ms-transition:all 0.7s ease;
	-o-transition:all 0.7s ease;
	transition:all 0.7s ease;
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}

.mobile-menu .close-btn{
	position: absolute;
	right: 10px;
	top: 5px;
	line-height: 30px;
	width: 24px;
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	cursor: pointer;
	z-index: 10;
	-webkit-transition:all 0.9s ease;
	-moz-transition:all 0.9s ease;
	-ms-transition:all 0.9s ease;
	-o-transition:all 0.9s ease;
	transition:all 0.9s ease;
}

.mobile-menu-visible .mobile-menu .close-btn{
	-webkit-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

.mobile-menu .close-btn:hover{
	color: black;
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	filter: drop-shadow(0px 0px 1px white);
}

.mobile-menu .navigation{
	position: relative;
	display: block;
	width: 100%;
	float: none;
}

.mobile-menu .navigation li{
	position: relative;
	display: block;
	border-top: 1px solid rgba(255,255,255,0.10);
}

.mobile-menu .navigation:last-child{
	border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mobile-menu .navigation li > ul > li:first-child{
	border-top: 1px solid rgba(255,255,255,0.10);
}

.mobile-menu .navigation li > a{
	position: relative;
	display: block;
	line-height: 24px;
	padding: 10px 25px;
	font-size: 15px;
	font-weight: 500;
	font-family: "Figtree";
	text-decoration: none;
	color: #ffffff;
	text-transform: uppercase;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;	
}

.mobile-menu .navigation li ul li > a{
	font-size: 16px;
	font-family: "Figtree";
	margin-left: 20px;
	text-transform: none;
}

.mobile-menu .navigation li.current > a,
.mobile-menu .navigation li > a:hover{
	color:white;	
}

.mobile-menu .navigation li.current > a:before{
	height:100%;
}

.mobile-menu .navigation li.dropdown .dropdown-btn{
	position:absolute;
	right:6px;
	top:6px;
	width:32px;
	height:32px;
	text-align:center;
	font-size:16px;
	line-height:32px;
	color:#ffffff;
	background:rgba(255,255,255,0.10);
	cursor:pointer;
	border-radius:2px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;	
	z-index:5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn.open{
	background:#c5ad43;	
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);	
}

.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul{
	display: none;
	position: relative; /*tambahan sampai margin untuk animasi out ketika nutup menu mobilenya*/
    width: 100%;
    padding: 0;
    margin: 0;
}

.mobile-menu .social-links{
	position:relative;
	text-align:center;
	padding:30px 25px;
}

.mobile-menu .social-links li{
	position:relative;
	display:inline-block;
	margin:0px 10px 10px;
}

.mobile-menu .social-links li a{
	position:relative;
	line-height:32px;
	font-size:16px;
	color:#ffffff;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;	
	padding: 8px;
	font-size: 20px;
}

.mobile-menu .social-links li a:hover{
	color: #c5ad43;	
}

/* Middle Section */
.middle-section {
    padding: 400px 20px;
    background-color: #162E2B;
    text-align: center;
}

.middle-section h2 {
    font-size: 2em;
    margin-bottom: 20px;
	color: white;
}

.middle-section p {
    font-size: 1.2em;
    color: white;
}
/* =============== END HEADER =============== */

/* =============== START HERO SECTION =============== */
.hero-section {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100dvh;
    padding-top: 140px;
    padding-bottom: 60px;
    transition: all 0.5s ease-in-out;
}

.hero-section ::selection {
    background-color: var(--color-darkGold);
    color: #ffffff;
}

.hero-section .bg-mobile-swap {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    display: block;
    z-index: 0;
}

.hero-section .pattern-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    z-index: 1;
    pointer-events: none; /* Biar gak ngeblok klik mouse user */
}

.hero-section .pattern-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    width: 380px;
}

.hero-section .hero-grid-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px; 
    align-items: center;
}

.hero-section .hero-text-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* items-center */
    text-align: center; /* text-center */
    font-family: var(--font-montserrat);
    color: var(--color-notWhite);
}

.hero-section .hero-text-content .hero-title {
    font-size: 30px; /* text-3xl */
    font-weight: 600; /* font-semibold */
    line-height: 36px; /* leading-9 (9 * 4 = 36px) */
    margin-bottom: 8px; /* mb-2 */
}

.hero-section .hero-text-content .hero-title span {
    color: var(--color-mainGold);
}

.hero-section .hero-text-content .hero-subtitle {
    font-size: 18px; /* text-lg */
    font-weight: 500; /* font-medium */
    margin-bottom: 20px; /* mb-5 */
}

.hero-section .hero-text-content .hero-subtitle span {
    font-weight: 600;
    color: var(--color-mainGold);
}

.hero-section .hero-text-content .hero-description {
    font-family: var(--font-inter);
    font-size: 12px; /* text-xs */
    line-height: 1.375; /* leading-snug */
    max-width: 672px; /* max-w-2xl (2xl = 42rem * 16px = 672px) */
    margin-bottom: 16px; /* mb-4 */
}

.hero-section .book-mobile-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 16px; /* mb-4 */
}
.hero-section .book-mobile-wrapper .buku-gd-card img {
    max-width: 160px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
}

.hero-section .hero-btn-group {
    display: flex;
    flex-wrap: wrap; /* flex-wrap */
    justify-content: center; /* justify-center */
    align-items: center; /* items-center */
    gap: 16px; /* gap-4 */
    width: 100%; /* w-full */
    font-family: var(--font-inter);
}

.btnhero-1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* gap-2 */
    padding: 8px 16px; /* py-2 px-4 */
    background-color: var(--color-mainGold); /* bg-mainGold */
    border: 1px solid #facc15; /* border-yellow-400 */
    border-radius: 9999px; /* rounded-full */
    overflow: hidden; /* overflow-hidden */
    z-index: 1; /* z-1 */
    cursor: pointer; /* cursor-pointer */
    font-weight: 500; /* font-medium */
    color: #000000; /* text-black */
    font-family: var(--font-inter);
    transition: all 500ms ease-in-out; /* duration-500 ease-in-out */
}
.btnhero-1:hover {
    transform: translateY(-2px); /* hover:-translate-y-0.5 */
    color: #ffffff; /* hover:text-white */
}

.btnhero-1 span {
    font-size: 12px; /* text-xs */
    color: #000000; /* text-black */
    text-decoration: none; /* no-underline */
    transition: color 500ms ease-in-out; /* duration-500 ease-in-out */
}
.btnhero-1:hover span {
    color: #ffffff; /* group-hover:text-white */
}

.btnhero-1 svg {
    width: 18px; /* w-4.5 */
    height: 18px; /* h-4.5 */
    fill: currentColor; /* fill-current */
    transform: rotate(180deg); /* rotate-180 */
    transition: transform 500ms ease-in-out; /* duration-500 ease-in-out */
}
.btnhero-1:hover svg {
    transform: rotate(0deg); /* group-hover:rotate-0 */
}

.btnhero-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px; /* py-2 px-4 */
    background-color: transparent;
    border: 1px solid var(--color-mainGold); /* border-mainGold */
    border-radius: 9999px; /* rounded-full */
    color: #ffffff; /* text-white */
    font-size: 12px; /* text-xs */
    font-family: var(--font-inter);
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(2px);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btnhero-2:hover {
    background-color: rgba(255, 255, 255, 0.1); /* hover:bg-white/10 */
    border-color: rgba(255, 255, 255, 0.8); /* hover:border-white/80 */
    transform: translateY(-2px); /* hover:-translate-y-0.5 */
}

.hero-section .book-desktop-wrapper {
    display: none;
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* Gerakan naik turun */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.container-3d {
    position: relative;
    width: 100%;
    max-width: 200px; /* Sesuaikan dengan lebar maksimal buku kamu */
    aspect-ratio: 8 / 9; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.container-3d:hover .floating {
    animation-play-state: paused !important;
}

.canvas-3d {
    perspective: 1000px; /* Ditambah biar efek lengkungan 3D-nya lebih smooth & nyata */
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0px;
    grid-template-areas: 
    "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}

/* --- Pengaturan Elemen Target Buku --- */
.buku-gd-card {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Transisi kembali ke posisi semula saat mouse pergi (kembali ke posisi tengah) */
    transition: all 500ms cubic-bezier(0.25, 1, 0.5, 1); 
}

/* --- Konfigurasi 25 Tombol Tracker Gaib --- */
.tracker {
    position: absolute;
    z-index: 30;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.tr-1 { grid-area: tr-1; }
.tr-2 { grid-area: tr-2; }
.tr-3 { grid-area: tr-3; }
.tr-4 { grid-area: tr-4; }
.tr-5 { grid-area: tr-5; }
.tr-6 { grid-area: tr-6; }
.tr-7 { grid-area: tr-7; }
.tr-8 { grid-area: tr-8; }
.tr-9 { grid-area: tr-9; }
.tr-10 { grid-area: tr-10; }
.tr-11 { grid-area: tr-11; }
.tr-12 { grid-area: tr-12; }
.tr-13 { grid-area: tr-13; }
.tr-14 { grid-area: tr-14; }
.tr-15 { grid-area: tr-15; }
.tr-16 { grid-area: tr-16; }
.tr-17 { grid-area: tr-17; }
.tr-18 { grid-area: tr-18; }
.tr-19 { grid-area: tr-19; }
.tr-20 { grid-area: tr-20; }
.tr-21 { grid-area: tr-21; }
.tr-22 { grid-area: tr-22; }
.tr-23 { grid-area: tr-23; }
.tr-24 { grid-area: tr-24; }
.tr-25 { grid-area: tr-25; }

.tracker:hover ~ .buku-gd-card {
    transition: transform 500ms cubic-bezier(0.25, 1, 0.5, 1);

    filter: 
        drop-shadow(0 0 14px rgba(9, 57, 51, 0.5)) 
        drop-shadow(0 0 8px rgba(31, 127, 120, 0.7))
        drop-shadow(0 0 4px rgba(214, 194, 106, 1));
}

.tr-1:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(20deg) rotateY(-10deg) rotateZ(-6deg); }
.tr-2:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(20deg) rotateY(-5deg)  rotateZ(-6deg); }
.tr-3:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(20deg) rotateY(0deg)   rotateZ(-6deg); }
.tr-4:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(20deg) rotateY(5deg)   rotateZ(-6deg); }
.tr-5:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(20deg) rotateY(10deg)  rotateZ(-6deg); }
.tr-6:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(10deg) rotateY(-10deg) rotateZ(-6deg); }
.tr-7:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(10deg) rotateY(-5deg)  rotateZ(-6deg); }
.tr-8:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(10deg) rotateY(0deg)   rotateZ(-6deg); }
.tr-9:hover ~ .buku-gd-card  { transform: scale(1.12) rotateX(10deg) rotateY(5deg)   rotateZ(-6deg); }
.tr-10:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(10deg) rotateY(10deg)  rotateZ(-6deg); }
.tr-11:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(0deg)  rotateY(-10deg) rotateZ(-6deg); }
.tr-12:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(0deg)  rotateY(-5deg)  rotateZ(-6deg); }
.tr-13:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(0deg)  rotateY(0deg)   rotateZ(-6deg); }
.tr-14:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(0deg)  rotateY(5deg)   rotateZ(-6deg); }
.tr-15:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(0deg)  rotateY(10deg)  rotateZ(-6deg); }
.tr-16:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-10deg) rotateY(-10deg) rotateZ(-6deg); }
.tr-17:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-10deg) rotateY(-5deg)  rotateZ(-6deg); }
.tr-18:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-10deg) rotateY(0deg)   rotateZ(-6deg); }
.tr-19:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-10deg) rotateY(5deg)   rotateZ(-6deg); }
.tr-20:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-10deg) rotateY(10deg)  rotateZ(-6deg); }
.tr-21:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-20deg) rotateY(-10deg) rotateZ(-6deg); }
.tr-22:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-20deg) rotateY(-5deg)  rotateZ(-6deg); }
.tr-23:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-20deg) rotateY(0deg)   rotateZ(-6deg); }
.tr-24:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-20deg) rotateY(5deg)   rotateZ(-6deg); }
.tr-25:hover ~ .buku-gd-card { transform: scale(1.12) rotateX(-20deg) rotateY(10deg)  rotateZ(-6deg); }

/* Utility anti block text select */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.corner-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.corner-frame::before,
.corner-frame::after,
.cf-tr,
.cf-bl {
    --c-size: 20px;
    --c-thick: 2px;
    --c-color: #D6C26A;
    content: "";
    position: absolute;
    width: var(--c-size);
    height: var(--c-size);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    filter: 
        drop-shadow(0 0 14px rgba(9, 57, 51, 0.5)) 
        drop-shadow(0 0 8px rgba(31, 127, 120, 0.7))
        drop-shadow(0 0 4px rgba(214, 194, 106, 1));
}

/* Sudut Kiri Atas */
.corner-frame::before {
    top: 0; left: 0;
    border-top: var(--c-thick) solid var(--c-color);
    border-left: var(--c-thick) solid var(--c-color);
}

/* Sudut Kanan Bawah */
.corner-frame::after {
    bottom: 0; right: 0;
    border-bottom: var(--c-thick) solid var(--c-color);
    border-right: var(--c-thick) solid var(--c-color);
}

.cf-tr {
    top: 0; right: 0;
    border-top: var(--c-thick) solid var(--c-color);
    border-right: var(--c-thick) solid var(--c-color);
}

/* Sudut Kiri Bawah */
.cf-bl {
    bottom: 0; left: 0;
    border-bottom: var(--c-thick) solid var(--c-color);
    border-left: var(--c-thick) solid var(--c-color);
}

/* Trigger hover */
.canvas-3d:hover .corner-frame::before,
.canvas-3d:hover .corner-frame::after,
.canvas-3d:hover .cf-tr,
.canvas-3d:hover .cf-bl {
    opacity: 1;
}
/* =============== END HERO SECTION =============== */

/* =============== START ABOUT SECTION =============== */
.about-section {
    background-color: var(--color-cream); 
    padding-top: 60px; /* pt-15 */
    padding-bottom: 0;
    transition: all 500ms ease-in-out; /* transition-all duration-500 */
}

.about-section .about-title {
    font-family: var(--font-montserrat);
    font-weight: 600;
    color: var(--color-notBlack); /* Warna hitam elegan (notBlack) */
    font-size: 24px; /* text-2xl */
    line-height: 1.25; /* leading-tight */
    max-width: 90%; /* max-w-[90%] */
    margin-bottom: 24px; /* mb-6 */
}
.about-section .about-title span {
    color: rgba(30, 30, 30, 0.65); /* text-notBlack/65 */
}
.about-section .about-title::selection,
.about-section .about-desc::selection {
    background-color: var(--color-darkGreen);
    color: #ffffff;
}

.about-section .about-desc {
    font-family: var(--font-inter);
    color: var(--color-notBlack);
    font-size: 14px; /* text-sm */
    line-height: 1.375; /* leading-snug */
    max-width: 768px; /* max-w-3xl */
    margin-bottom: 48px; /* mb-12 */
}

.about-section .about-card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px; /* gap-6 */
    max-width: 80%; /* max-w-[80%] */
    margin-left: auto;
    margin-right: auto;
}
.about-section .about-card-wrapper ::selection,
.about-section .about-card-wrapper::selection {
    background-color: var(--color-darkGold);
    color: #ffffff;
}

@keyframes borderGlow {
    0%, 100% { border-color: #D6C26A; }
    50%       { border-color: #4CAF8A; }
}
.about-section .about-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px; /* gap-3 (3 * 4 = 12px) */
    background-color: #ffffff; /* bg-white */
    border: 2px solid var(--color-mainGold); /* border-2 border-mainGold */
    border-radius: 16px; /* rounded-2xl */
    padding: 24px; /* p-6 (6 * 4 = 24px) */
    width: 100%; /* w-full */
    max-width: 448px; /* max-w-md */
    box-sizing: border-box;

    animation: borderGlow 3s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-section .about-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(214, 194, 106, 0.25);
}
.about-section .about-card:nth-child(2) { animation-delay: 1s; }
.about-section .about-card:nth-child(3) { animation-delay: 2s; }

.about-section .about-card .card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px; /* gap-3 */
}

.about-section .about-card .card-icon {
    width: 72px; /* w-18 (18 * 4 = 72px) */
    height: 72px; /* h-18 */
}

.about-section .about-card .card-title {
    font-family: var(--font-montserrat);
    font-weight: 600; /* font-semibold */
    font-size: 18px; /* text-lg */
    color: var(--color-notBlack);
}
.about-section .about-card .card-text {
    font-family: var(--font-inter);
    font-size: 12px; /* text-xs */
    text-align: center; /* text-center */
    line-height: 1.375; /* leading-snug */
    color: var(--color-notBlack);
}
/* =============== END ABOUT SECTION =============== */

/* =============== START EXPLORATION SECTION =============== */
.explore-section {
    background-color: var(--color-cream);
    padding-top: 72px; /* py-18 */
    padding-bottom: 72px;
    transition: all 500ms ease-in-out;
}
.explore-section ::selection,
.explore-section::selection {
    background-color: var(--color-darkGold);
    color: #ffffff;
}

.explore-section .explore-banner-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr; /* Numpuk 1 kolom di mobile */
    
    /* bg-linear-to-r from-darkGreen/85 via-darkGreen/90 to-darkGreen */
    background: linear-gradient(
        to right, 
        rgba(8, 70, 67, 0.85), 
        rgba(8, 70, 67, 0.90), 
        rgba(8, 70, 67, 1)
    );
    
    border-radius: 16px; /* rounded-2xl */
    overflow: hidden;
    align-items: center; /* items-center */
    padding: 28px 32px; /* py-7 px-8 */
    gap: 32px; /* gap-8 (8 * 4 = 32px) */
    box-sizing: border-box;
}

.explore-section .explore-banner-card .card-pattern-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none; /* Biar gak ngeblok seleksi teks atau klik tombol */
    width: 320px;
}

.explore-section .explore-banner-card .explore-visual-wrapper {
    display: none; /* hidden secara default di mobile & tablet */
}

.explore-section .explore-banner-card .explore-text-content {
    font-family: var(--font-montserrat);
    color: var(--color-notWhite); /* Menggunakan #EDF3F1 murni */
}

.explore-section .explore-banner-card .explore-title {
    font-weight: 600; /* font-semibold */
    text-align: left; /* text-left */
    font-size: 24px; /* text-2xl */
    line-height: 1.25; /* leading-tight */
    margin-bottom: 16px; /* mb-4 (4 * 4 = 16px) */
}
.explore-section .explore-banner-card .explore-title .text-mainGold {
    color: var(--color-mainGold);
}
.explore-section .explore-banner-card .explore-title .text-inline-and-block {
    display: inline-block;
}

.explore-section .explore-banner-card .explore-desc {
    font-family: var(--font-inter);
    font-size: 12px; /* text-xs */
    line-height: 1.375; /* leading-snug */
    text-align: justify; /* text-justify */
    color: var(--color-notWhite);
    margin-bottom: 0;
}

.explore-section .explore-banner-card .explore-visual-mobile {
    position: relative;
    width: 100%;
    display: flex; /* Aktif sebagai flexbox di mobile */
    align-items: center;
    justify-content: center;
    margin-top: 24px; /* mt-6 (6 * 4 = 24px) */
    margin-bottom: 24px; /* mb-6 */
}

.explore-section .explore-banner-card .explore-visual-mobile .pattern-circle-mobile {
    position: absolute;
    inset: 0;
    margin: auto; /* Mengunci posisi pas di tengah */
    width: 160px; /* w-40 (40 * 4 = 160px) */
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
}

.explore-section .explore-banner-card .explore-visual-mobile .img-twin-mobile {
    position: relative;
    z-index: 10;
    width: 200px; /* w-50 (50 * 4 = 200px) */
    margin-left: auto;
    margin-right: auto; /* mx-auto */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
    -webkit-user-drag: none;
    user-select: none;
}

.explore-section .explore-banner-card .btn-explore {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* gap-3 (3 * 4 = 12px) */
    padding: 8px 16px; /* py-2 px-4 */
    margin-left: auto;
    margin-right: auto; /* mx-auto (Rata tengah di mobile) */
    background-color: var(--color-mainGold); /* bg-mainGold */
    border: 1px solid #facc15; /* border-yellow-400 */
    border-radius: 9999px; /* rounded-full */
    overflow: hidden;
    z-index: 2; /* Di atas pattern hiasan belakang card */
    cursor: pointer;
    font-weight: 500; /* font-medium */
    color: #000000; /* text-black */
    transition: all 500ms ease-in-out; /* duration-500 ease-in-out */
}
.explore-section .explore-banner-card .btn-explore:hover {
    transform: translateY(-2px); /* hover:-translate-y-0.5 */
    color: #ffffff; /* hover:text-white */
}

.explore-section .explore-banner-card .btn-explore .icon-buku {
    width: 16px; /* w-4 (4 * 4 = 16px) */
    height: 16px; /* h-4 */
    fill: currentColor; /* fill-current */
    transition: color 500ms ease-in-out;
}
.explore-section .explore-banner-card .btn-explore span {
    font-family: var(--font-inter);
    font-size: 12px; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: #000000; /* text-black */
    text-decoration: none; /* no-underline */
    transition: color 500ms ease-in-out; /* duration-500 ease-in-out */
}
.explore-section .explore-banner-card .btn-explore:hover span {
    color: #ffffff; /* group-hover:text-white */
}

/* Efek Tombol Ambles Saat Diklik */
.btnleft:active {
    transform: scale(0.95);
}

/* Nilai Ayunan Naik-Turun Lembut (Konversi dari 0.1em milik Uiverse) */
@keyframes fly-1 {
    from {
        transform: translateY(1.5px);
    }
    to {
        transform: translateY(-1.5px);
    }
}
/* =============== END EXPLORATION SECTION =============== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* fixed inset-0 */
    background-color: rgba(0, 0, 0, 0.7); /* bg-black/70 */
    display: none; /* hidden secara default, nanti diubah ke flex via JS */
    align-items: center;
    justify-content: center;
    z-index: 99999; /* z-50 */
}
.modal-overlay .modal-content {
    background-color: #ffffff; /* bg-white */
    width: 90%; /* w-[90%] */
    max-width: 1024px; /* max-w-5xl (5xl = 64rem * 16px = 1024px) */
    height: 80%; /* h-[80%] */
    border-radius: 8px; /* rounded-lg */
    overflow: hidden; /* overflow-hidden */
    position: relative; /* relative */
    box-sizing: border-box;
}
.modal-overlay .modal-close-btn {
    position: absolute;
    top: 12px; /* top-3 (3 * 4 = 12px) */
    right: 16px; /* right-4 (4 * 4 = 16px) */
    background: none;
    border: none;
    color: #000000; /* text-black */
    font-size: 20px; /* text-xl (kira-kira 20px) */
    font-weight: 700; /* font-bold */
    cursor: pointer;
    z-index: 10; /* z-10 */
}
.modal-overlay .modal-iframe {
    width: 100%; /* w-full */
    height: 100%; /* h-full */
}

/* =============== back to top button ================ */
.back-to-top {
    /* Positioning */
    position: fixed !important;
    bottom: 50px; /* Jarak dari bawah */
    right: 40px;  /* Jarak dari kanan */
    z-index: 999; /* Pastikan di atas elemen lain */
    
    /* Animation State (Default: Ngumpet) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    
    /* Reset gaya bawaan (jika ada) */
    display: flex;
}

/* State pas dimunculin via JS */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* --- Sisanya pake kodingan Uiverse lo --- */
.button {
    height: 50px;
    width: 50px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    background-color: #D6C26A;
    border: 2px solid #F0EDDB;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
}

.button::after {
    content: "Top";
    position: absolute;
    width: auto;
    background-color: white;
    font-size: 1em;
    padding: 10px 15px;
    border-radius: 25px;
    top: -50px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.5s;
    transform: scale(0);
}
.svg {
	transition: all 0.5s;
}
.button:hover {
	transform: translateY(-3px);
	background-color: #94812d;
}
.button:hover .svg {
	fill: white;
	transform: scale(1.2);
}
.button:hover::after {
	transform: scale(1);
}
.button:active {
	transform: translateY(2px);
}
/* =============== back to top button ================ */

/* =============== START FOOTER =============== */
.site-footer {
    /* Gradasi oklch identik */
    background: linear-gradient(180deg, #0B1615 0%, #162E2B 50%, #162E2B 100%);
    padding: 36px 40px 32px 40px;
    color: white;
    transition: all 0.5s ease;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
}

.footer-main-row {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

/* --- BRAND COLUMN --- */
.footer-brand-col {
    width: 100%;
    margin-bottom: 32px;
    margin-top: 20px;
}

.brand-content {
    display: flex;
    flex-direction: column;
    align-items: center;
gap: 20px;
}

.logo-address-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-family: 'Inter', sans-serif;
}

.footer-logo {
    width: 240px; /* w-60 */
    user-select: none;
}

.footer-address {
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.25rem;
    max-width: 280px;
}

.footer-social-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 260px; /* max-w-65 */
    margin-bottom: 20px;
}

.footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social-link:hover {
    background-color: white;
    color: #2a5550;
    border-color: transparent;
}

/* --- LINKS GRID COLUMN --- */
.footer-grid-col {
    width: 100%;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Grid default mobile */
    gap: 32px;
}

.align-center-lg { 
    display: flex;
}

.tentang-kami {
    display: flex; justify-content: center; 
}
.media-hp-footer {
    display: flex; justify-content: start; 
}

.align-right-lg { 
    display: flex; justify-content: start; 
}

.group-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.group-list {
    list-style: none;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.group-list li a {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 2px;
    transition: all 0.5s ease;
    transform-origin: left;
    -webkit-font-smoothing: antialiased;
}

.group-list li a:hover {
    transform: scale(1.25);
    color: #c5ad43;
}

/* --- FOOTER BOTTOM --- */
.footer-bottom {
display: flex;
flex-direction: column;
gap: 20px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #94a3b8; /* border-slate-400 */
    text-align: center;
}

.copyright-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.authorized-brand {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.mini-logo { width: 40px; height: 40px; }

/* --- RESPONSIVE BREAKPOINTS (IDENTIK TAILWIND) --- */

@media (max-width: 640px) {
    /* .align-right-lg { 
        display: flex; justify-content: end; 
    } */
}

/* SM (640px) */
@media (min-width: 640px) {
    .aplikasi-publik {
        display: flex; justify-content: start;
    }
    .align-center-lg { 
        display: flex; justify-content: end; 
    }
    .site-footer { padding-left: 64px; padding-right: 64px; }
    .footer-logo { width: 260px; }
    .footer-links-grid { grid-template-columns: repeat(3, 1fr); }
    .group-title { font-size: 16px; }
    .group-list li a { font-size: 14px; }
    .copyright-text { font-size: 14px; font-weight: 500; }
}

/* MD (768px) */
@media (min-width: 768px) {
    .align-center-lg { 
        display: flex; justify-content: end; 
    }
    .align-right-lg { 
        display: flex; justify-content: start; 
    }
    .group-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
    .group-list li a { font-size: 14px; margin-bottom: 10px; }
}

/* LG (1024px) */
@media (min-width: 1024px) {
    .site-footer { padding-top: 48px; padding-bottom: 44px; padding-left: 80px; padding-right: 80px; }
    .footer-main-row { flex-direction: row; justify-content: space-between; }
    
    .footer-brand-col { width: 33.33%; margin-top: 0; }
    .brand-content { align-items: flex-start; }
    .logo-address-group { align-items: flex-start; }
    .footer-address { text-align: left; }
    
    .footer-grid-col { width: 66.66%; }
    .footer-links-grid { grid-template-columns: repeat(4, 1fr); }
    
    .align-center-lg { display: flex; justify-content: center; }
    .align-right-lg { display: flex; justify-content: end; }
    .media-hp-footer { display: flex; justify-content: center; }
    
    .footer-bottom { padding-top: 32px; gap: 10px; }
    .mini-logo { width: 40px; height: 40px; }
}

/* XL (1280px) */
@media (min-width: 1280px) {
    .site-footer { padding-left: 88px; padding-right: 88px; }
}
/* =============== END FOOTER =============== */