@media only screen and (max-width: 7000px){
	.page-wrapper{
		overflow: hidden;
	}
}

@media only screen and (max-width: 1480px){
	.preloader .icon {
        background-size: 674px auto;
    }
    .preloader .other-icon {
        background-size: 277px auto;
        margin-left: 24px;
    }
}

@media only screen and (max-width: 1023px){
	/* 1. Perbaikan Marquee & Rectangle (Header Top) */
    .live-news {
        height: 40px !important; 
    }

    .live-news .auto-container {
        padding: 0 10px !important;
    }

    /* Rectangle Nama Kabinet di HP */
    .live-news .rectangle {
		top: -4px;
		left: -40px;
        display: flex !important;
        width: 275px !important;
		gap: 7px;
    }

    .live-news .rectangle .rectangle-img {
        display: block !important;
        left: -10px !important;
    }

	.live-news .rectangle .rectangle-shadow {
		left: -1px;
		/* top: -3px; */
	}

    .live-news .rectangle .kabinet-selaras {
        font-size: 12px !important; /* Teks lebih kecil */
        font-weight: 500;
        /* margin-left: 5px; */
		margin-top: 5px;
    }

    .live-news .rectangle .selaras {
        width: 30px;
    	height: 30px;
		margin: 10px -35px 0 0;
    }

    .live-news .marquee span {
        line-height: 40px !important;
        font-size: 13px !important; /* Teks marquee lebih kecil */
    }

    /* 2. Perbaikan Header Upper (Logo & Hamburger) */
    .header-upper {
        height: 75px !important;
    }

    .main-header .nav-outer .main-menu,
	.sticky-header{
		display: none !important;
	}

    .main-header .nav-outer .logo-outer img {
        width: 180px !important;
        height: auto !important;
    }

    .main-header .nav-outer .logo-outer {
        margin-top: 0 !important;
		left: 30px !important;
    }

    /* 3. Perbaikan Tombol Hamburger */
    .nav-outer .mobile-nav-toggler {
        font-size: 28px !important;
        padding: 0 !important;
        top: 68% !important;
        transform: translateY(-50%) !important;
        right: 40px !important;
    }

	.preloader .icon {
        background-size: 572px auto;
    }
    .preloader .other-icon {
        background-size: 237px auto;
        margin-left: 21px;
    }
	
	.main-header .nav-outer .main-menu,
	.sticky-header{
		display: none !important;
	}

	.nav-outer .mobile-nav-toggler{
		display: block;
		margin: 0;
		padding: 24px 0;
	}
	
	.main-header .header-upper .nav-outer:before{
		display:none;	
	}

	.main-header .dropdown > a > i{
		display: none;
	}
	
	.main-header .nav-outer{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: 10px;
		width:auto;
		float:none;	
	}
	
	.main-header .nav-outer .logo-outer{
		position:relative;
		left:0;
		top: 8px;
		
		width:auto;
		height:auto;
		margin:0;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);	
	}

	.main-header .nav-outer .logo-outer .logo-header {
		transform: translateY(-31%);
	} 

	.nav-outer .mobile-nav-toggler{
		position: absolute;
		right: 10px;
		/* top: 60%; */
		transform: translateY(-58%);
		line-height: 50px;
		display: block;
		margin: 0;
		padding: 24px 0;
	}

	/* =============== section Footer ================ */
    .footer-text{
        display: flex;
        position: relative;
        gap: 60px;
        padding: 20px 20px 0 20px;
    }
    .logo-section{
        margin-left: 0px;
    }
    .section-3{
        margin-top: -20px; 
    }
    .tentang-kami {
        display: flex; justify-content: start;
    }
    

    .authorized-brand {
		margin-top: -10px;
	}

    .logo-address-group {
		gap: 20px;
        margin-bottom: 10px;
	}
}

@media only screen and (max-width: 768px){
	/* 1. Perbaikan Marquee & Rectangle (Header Top) */
    .live-news {
        height: 35px !important; 
    }

    .live-news .auto-container {
        padding: 0 10px !important;
    }

    /* Rectangle Nama Kabinet di HP */
    .live-news .rectangle {
		top: -5.8px;
		left: -60px;
        display: flex !important;
        width: 240px !important;
		gap: 5px;
    }

    .live-news .rectangle .rectangle-img {
        display: block !important;
        left: -10px !important;
    }

	.live-news .rectangle .rectangle-shadow {
		left: -1px;
	}

    .live-news .rectangle .kabinet-selaras {
        font-size: 10px !important; /* Teks lebih kecil */
        font-weight: 500;
        /* margin-left: 5px; */
    }

    .live-news .rectangle .selaras {
        width: 30px;
    	height: 30px;
		margin: 5px -35px 0 0;
    }

    .live-news .marquee span {
        line-height: 35px !important;
        font-size: 12px !important; /* Teks marquee lebih kecil */
    }

    /* 2. Perbaikan Header Upper (Logo & Hamburger) */
    .header-upper {
        height: 65px !important; /* Tinggi header bawah dikurangin drastis */
    }

    .main-header .nav-outer .logo-outer img {
        width: 130px !important; /* Logo dikecilin biar pas */
        height: auto !important;
    }

    .main-header .nav-outer .logo-outer {
        margin-top: 3px !important;
		left: 0px !important;
    }

    /* 3. Perbaikan Tombol Hamburger */
    .nav-outer .mobile-nav-toggler {
        font-size: 24px !important;
        padding: 0 !important;
        /* top: 75% !important; */
        transform: translateY(-50%) !important;
        right: 10px !important;
    }

	.preloader .icon {
        background-size: 402px auto;
    }
    .preloader .other-icon {
        background-size: 164px auto;
        margin-left: 14px;
    }

    .back-to-top {
        bottom: 40px; /* Lebih mepet ke bawah */
        right: 30px;  /* Lebih mepet ke kanan */
    }

    .button {
        width: 40px;  /* Kecilin dari 50px ke 40px */
        height: 40px;
        padding: 8px;
    }

    .button .svg {
        width: 18px;  /* Icon juga ikut mengecil biar proporsional */
        height: 18px;
    }

    /* Sembunyikan efek 'Top' di mobile biar nggak menuhi layar pas kena jempol */
    .button::after {
        display: none !important;
    }
}

@media only screen and (min-width: 768px){
	.main-menu{
		width:90%;
	}
	.main-menu .navigation > li > ul,
	.main-menu .navigation > li > ul > li > ul{
		display:block !important;
		visibility:hidden;
		opacity:0;
	}
	
	.header-top .live-news{
		position: auto;	
	}
}

@media only screen and (max-width: 599px){
	.main-header .header-top .top-left{
		display:none;	
	}
	
	.main-header .header-top .top-right{
		width:100%;
		text-align:center	
	}
}

@media only screen and (max-width: 480px) {
    .back-to-top {
        bottom: 30px; 
        right: 20px;
    }
}

/* ============================================================
    RESPONSIVE TEMPLATE (MOBILE-FIRST / min-width)
    Sesuai Standar Breakpoints Tailwind CSS
    ============================================================ */

/* SM Mode: (Tailwind sm: -> 640px) */
@media only screen and (min-width: 640px) {
    .margin-x-section {
        padding-left: 52px;
        padding-right: 52px;
    }

    /* =============== START HERO SECTION =============== */
    .hero-section .pattern-top {
        width: 240px; /* sm:w-60 */
    }
    .hero-section .pattern-bottom {
        width: 80%; /* sm:w-[80%] */
    }
    .hero-section .hero-text-content .hero-title {
        font-size: 36px; /* sm:text-4xl */
        line-height: 1.25; /* sm:leading-tight */
    }
    .hero-section .hero-text-content .hero-subtitle {
        font-size: 20px; /* sm:text-xl */
        margin-bottom: 32px; /* sm:mb-8 */
    }
    .hero-section .hero-text-content .hero-description {
        font-size: 14px; /* sm:text-sm */
        line-height: 1.25; /* sm:leading-tight */
    }
    .hero-section .hero-btn-group {
        gap: 20px; /* sm:gap-5 (5 * 4 = 20px) */
        width: auto; /* sm:w-auto */
    }
    .btnhero-1 span,
    .btnhero-2 {
        font-size: 14px; /* sm:text-sm */
    }
    /* =============== END HERO SECTION =============== */

    /* =============== START ABOUT SECTION =============== */
    .about-section .about-title {
        max-width: none;
    }
    .about-section .about-card-wrapper {
        max-width: none; /* sm:max-w-none */
    }
    .about-section .about-card {
        width: calc(50% - 16px); /* sm:w-[calc(50%-16px)] */
    }
    /* =============== END ABOUT SECTION =============== */

    /* =============== START EXPLORATION SECTION =============== */
    .explore-section .explore-banner-card .explore-title .text-inline-and-block {
        display: inline; /* sm:inline */
    }
    .explore-section .explore-banner-card .explore-visual-mobile {
        margin-bottom: 32px; /* sm:mb-8 */
    }
    
    /* 2. Atur ukuran siluet lingkaran secara mandiri */
    .explore-section .explore-banner-card .explore-visual-mobile .pattern-circle-mobile {
        width: 200px; /* sm:w-50 */
    }
    
    /* 3. Atur ukuran gambar buku kembar secara mandiri */
    .explore-section .explore-banner-card .explore-visual-mobile .img-twin-mobile {
        width: 240px; /* sm:w-60 */
    }
    .explore-section .explore-banner-card .btn-explore span {
        font-size: 14px; /* sm:text-sm */
    }
    .explore-section .explore-banner-card .card-pattern-bottom {
        width: 420px;
    }
    /* =============== END EXPLORATION SECTION =============== */
}

/* MD Mode: (Tailwind md: -> 768px) */
@media only screen and (min-width: 768px) {
    .margin-x-section {
        padding-left: 64px;
        padding-right: 64px;
    }

    /* =============== START HERO SECTION =============== */
    .hero-section .bg-mobile-swap {
        background-position: center center;
    }
    .hero-section .pattern-top {
        width: 260px; /* md:w-65 */
    }
    .hero-section .pattern-bottom {
        width: 560px; /* md:w-140 */
    }
    .hero-section .hero-text-content .hero-title  {
        margin-bottom: 12px; /* md:mb-3 */
    }
    .hero-section .book-mobile-wrapper {
        margin-bottom: 24px; /* md:mb-6 */
    }
    .hero-section .hero-btn-group {
        justify-content: flex-start; /* md:justify-start (Otomatis rata kiri) */
    }
    /* =============== END HERO SECTION =============== */

    /* =============== START ABOUT SECTION =============== */
    .about-section .about-title {
        max-width: 90%; /* md:max-w-[90%] */
    }
    .about-section .about-desc {
        text-align: justify; /* md:text-justify */
    }
    /* =============== END ABOUT SECTION =============== */

    /* =============== START EXPLORATION SECTION =============== */
    .explore-section .explore-banner-card .explore-title {
        margin-bottom: 24px; /* md:mb-6 (6 * 4 = 24px) */
    }
    .explore-section .explore-banner-card .card-pattern-bottom {
        width: 420px;
    }
    /* =============== END EXPLORATION SECTION =============== */
}

/* LG Mode: (Tailwind lg: -> 1024px) */
@media only screen and (min-width: 1024px) {
    .margin-x-section {
        padding-left: 80px;
        padding-right: 80px;
    }

    /* =============== START HERO SECTION =============== */
    .hero-section {
        padding-top: 70px;
        padding-bottom: 0;
    }
    .hero-section .bg-mobile-swap {
        display: none;
    }
    .hero-section .pattern-top {
        width: 220px; /* lg:w-55 */
    }
    .hero-section .hero-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .hero-section .hero-text-content {
        align-items: flex-start; /* lg:items-start */
        text-align: left; /* lg:text-left */
    }
    .hero-section .hero-text-content .hero-title {
        margin-bottom: 16px; /* lg:mb-4 */
    }
    .hero-section .hero-text-content .hero-subtitle {
        font-size: 24px; /* lg:text-2xl */
    }
    .hero-section .hero-text-content .hero-description {
        font-size: 16px; /* lg:text-base */
        margin-bottom: 32px; /* lg:mb-8 */
    }
    .hero-section .book-mobile-wrapper {
        display: none;
    }
    .btnhero-1 {
        padding-left: 22px;
        padding-right: 22px;
    }
    .btnhero-1 span {
        font-size: 16px;
    }
    .btnhero-2 {
        padding-left: 22px; /* lg:px-5.5 (5.5 * 4 = 22px) */
        padding-right: 22px;
        font-size: 16px; /* lg:text-base */
    }
    .hero-section .book-desktop-wrapper {
        display: flex; /* lg:flex */
        justify-content: center; /* justify-center */
        align-items: center; /* items-center */
        width: 100%; /* w-full */
    }
    .hero-section .book-desktop-wrapper .buku-gd-card img {
        width: 280px;
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    }
    .container-3d {
        max-width: 380px;
    }
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-25px);
        }
    }
    .tracker:hover ~ .buku-gd-card {
        filter: 
            drop-shadow(0 0 28px rgba(9, 57, 51, 0.5)) 
            drop-shadow(0 0 16px rgba(31, 127, 120, 0.7))
            drop-shadow(0 0 8px rgba(214, 194, 106, 1));
    }
    /* =============== END HERO SECTION =============== */

    /* =============== START ABOUT SECTION =============== */
    .about-section {
        padding-top: 92px;
    }
    .about-section .about-title {
        font-size: 30px; /* lg:text-3xl */
        margin-bottom: 32px; /* lg:mb-8 */
    }
    .about-section .about-desc {
        font-size: 16px; /* lg:text-base */
    }

    .about-section .about-card {
        flex: 1; /* lg:flex-1 */
        max-width: none; /* lg:max-w-none */
        padding: 28px; /* lg:p-7 (7 * 4 = 28px) */
    }
    .about-section .about-card .card-header {
        gap: 20px; /* lg:gap-6 (6 * 4 = 24px) */
    }
    .about-section .about-card .card-icon {
        width: 92px; /* lg:w-23 (23 * 4 = 92px) */
        height: 92px; /* lg:h-23 */
    }
    .about-section .about-card .card-text {
        font-size: 14px; /* lg:text-sm */
    }
    /* =============== END ABOUT SECTION =============== */

    /* =============== START EXPLORATION SECTION =============== */
    .explore-section {
        padding-top: 96px; /* lg:py-24 (24 * 4 = 96px) */
        padding-bottom: 96px;
    }
    .explore-section .explore-banner-card {
        grid-template-columns: repeat(2, 1fr); /* Membelah 2 kolom di PC */
        padding: 80px 48px; /* lg:py-20 lg:px-12 (20*4=80px, 12*4=48px) */
    }
    .explore-section .explore-banner-card .card-pattern-bottom {
        width: 520px; /* lg:w-130 (130 * 4 = 520px) */
    }
    .explore-section .explore-banner-card .explore-visual-wrapper {
        position: relative;
        width: 100%;
        display: flex; /* lg:flex */
        align-items: center;
        justify-content: center;
    }
    .explore-section .explore-banner-card .explore-visual-wrapper .pattern-circle-full {
        position: absolute;
        inset: 0;
        margin: auto; /* m-auto (Membikin posisi pas di tengah) */
        width: 280px; /* lg:w-70 (70 * 4 = 280px) */
        object-fit: contain;
        pointer-events: none;
        z-index: 0;
    }
    .explore-section .explore-banner-card .explore-visual-wrapper .img-twin-book {
        position: relative;
        z-index: 10;
        width: 320px; /* lg:w-80 (80 * 4 = 320px) */
        filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4)); /* filter drop-shadow */
    }
    .explore-section .explore-banner-card .explore-title {
        font-size: 30px; /* lg:text-3xl */
    }
    .explore-section .explore-banner-card .explore-desc {
        font-size: 14px; /* lg:text-sm */
        margin-bottom: 32px; /* lg:mb-8 (8 * 4 = 32px) */
    }
    .explore-section .explore-banner-card .explore-visual-mobile {
        display: none; /* lg:hidden */
    }
    .explore-section .explore-banner-card .btn-explore {
        margin-left: 0;
        margin-right: 0; /* lg:mx-0 (Geser rata kiri di PC) */
    }
    .explore-section .explore-banner-card .btn-explore .icon-buku {
        width: 20px; /* lg:w-5 (5 * 4 = 20px) */
        height: 20px; /* lg:h-5 */
    }
    /* =============== END EXPLORATION SECTION =============== */
}

/* XL Mode: (Tailwind xl: -> 1280px) */
@media only screen and (min-width: 1280px) {
    .margin-x-section {
        padding-left: 92px;
        padding-right: 92px;
    }

    /* =============== START HERO SECTION =============== */
    .hero-section .pattern-bottom {
        width: 720px; /* xl:w-180 */
    }
    .hero-section .hero-text-content .hero-title {
        font-size: 48px; /* xl:text-5xl */
    }
    .hero-section .hero-text-content .hero-subtitle {
        font-size: 30px; /* xl:text-3xl */
    }
    .btnhero-1 {
        padding-top: 10px; /* xl:py-2.5 (2.5 * 4 = 10px) */
        padding-bottom: 10px;
    }
    .btnhero-2 {
        padding-top: 10px; /* xl:py-2.5 (2.5 * 4 = 10px) */
        padding-bottom: 10px;
        font-weight: 500; /* xl:font-medium */
    }
    .hero-section .book-desktop-wrapper .buku-gd-card img {
        width: 300px;
    }
    .container-3d {
        max-width: 420px;
    }
    /* =============== END HERO SECTION =============== */

    /* =============== START ABOUT SECTION =============== */
    .about-section .about-title {
        font-size: 36px; /* xl:text-4xl */
    }
    .about-section .about-card-wrapper {
        gap: 40px; /* xl:gap-10 */
    }
    .about-section .about-card {
        gap: 20px; /* xl:gap-5 (5 * 4 = 20px) */
        padding: 30px; /* xl:p-10 (10 * 4 = 40px) */
    }
    .about-section .about-card .card-title {
        font-size: 24px; /* xl:text-2xl */
    }
    .about-section .about-card .card-text {
        font-size: 16px; /* xl:text-base */
    }
    /* =============== END ABOUT SECTION =============== */

    /* =============== START EXPLORATION SECTION =============== */
    .explore-section {
        padding-top: 112px; /* xl:py-28 (28 * 4 = 112px) */
        padding-bottom: 112px;
    }
    .explore-section .explore-banner-card {
        padding: 48px 64px; /* xl:py-12 xl:px-16 (12*4=48px, 16*4=64px) */
        gap: 40px; /* xl:gap-10 (10 * 4 = 40px) */
    }
    .explore-section .explore-banner-card .card-pattern-bottom {
        width: 680px; /* xl:w-170 (170 * 4 = 680px) */
    }
    .explore-section .explore-banner-card .explore-visual-wrapper .pattern-circle-full {
        width: 360px; /* xl:w-90 (90 * 4 = 360px) */
    }
    .explore-section .explore-banner-card .explore-visual-wrapper .img-twin-book {
        width: 440px; /* xl:w-110 (110 * 4 = 440px) */
    }
    .explore-section .explore-banner-card .explore-title {
        font-size: 36px; /* xl:text-4xl */
    }
    .explore-section .explore-banner-card .explore-desc {
        font-size: 16px; /* xl:text-base */
    }
    .explore-section .explore-banner-card .btn-explore {
        padding-left: 22px; /* xl:px-5.5 (5.5 * 4 = 22px) */
        padding-right: 22px;
        padding-top: 10px; /* xl:py-2.5 (2.5 * 4 = 10px) */
        padding-bottom: 10px;
    }
    .explore-section .explore-banner-card .btn-explore span {
        font-size: 16px; /* xl:text-base */
    }
    /* =============== END EXPLORATION SECTION =============== */
}

/* 2XL Mode: (Tailwind 2xl: -> 1536px) */
@media only screen and (min-width: 1536px) {
    .margin-x-section {
        padding-left: 180px;
        padding-right: 180px;
    }

    /* =============== START HERO SECTION =============== */
    .hero-section .pattern-top {
        width: 368px; /* 2xl:w-92 */
    }
    .hero-section .pattern-bottom {
        width: 1028px; /* 2xl:w-257 */
    }
    .hero-section .hero-text-content .hero-title {
        font-size: 60px; /* 2xl:text-6xl */
        margin-bottom: 8px; /* 2xl:mb-2 */
    }
    .btnhero-1 {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 24px;
        padding-left: 24px;
        /* padding: 12px 24px; */
    }
    .btnhero-2 {
        padding: 12px 24px; /* 2xl:px-6 2xl:py-3 */
    }
    .hero-section .book-desktop-wrapper .buku-gd-card img {
        width: 400px;
    }
    .container-3d {
        max-width: 550px;
    }
    /* =============== END HERO SECTION =============== */

    /* =============== START ABOUT SECTION =============== */
    .about-section .about-title {
        font-size: 48px; /* 2xl:text-5xl */
    }
    .about-section .about-desc {
        font-size: 18px; /* 2xl:text-lg */
    }
    .about-section .about-card {
        gap: 24px; /* 2xl:gap-6 (6 * 4 = 24px) */
    }
    .about-section .about-card .card-title {
        font-size: 30px; /* 2xl:text-3xl */
    }
    .about-section .about-card .card-text {
        font-size: 18px; /* 2xl:text-lg */
    }
    /* =============== END ABOUT SECTION =============== */

    /* =============== START EXPLORATION SECTION =============== */
    .explore-section {
        padding-top: 120px; /* 2xl:py-30 (30 * 4 = 120px) */
        padding-bottom: 120px;
    }
    .explore-section .explore-banner-card .explore-visual-wrapper .pattern-circle-full {
        width: 464px; /* 2xl:w-116 (116 * 4 = 464px) */
    }
    .explore-section .explore-banner-card .explore-visual-wrapper .img-twin-book {
        width: 544px; /* 2xl:w-136 (136 * 4 = 544px) */
    }
    .explore-section .explore-banner-card .explore-title {
        font-size: 48px; /* 2xl:text-5xl */
    }
    .explore-section .explore-banner-card .explore-desc {
        font-size: 18px; /* 2xl:text-lg */
    }
    .explore-section .explore-banner-card .btn-explore {
        padding: 12px 24px; /* 2xl:px-6 2xl:py-3 */
    }
    /* =============== END EXPLORATION SECTION =============== */
}