/* =========================================
   GLOMAX FEATURE CARD
========================================= */

.glomax-feature{
	padding:80px 80px;
	background:#f5f5f7;
}

.glomax-card{
	position:relative;

	max-width:1600px;
	height:760px;

	margin:auto;

	border-radius:36px;
	overflow:hidden;

	display:grid;
	grid-template-columns: 1fr 1.2fr;

	background:
	linear-gradient(
		90deg,
		#FDB913 22%,
		#FDB913 22%,
		#E1A76C 100%
	);
}


/* =========================================
   LEFT CONTENT
========================================= */

.glomax-copy{
	position:relative;
	z-index:3;

	display:flex;
	flex-direction:column;
	justify-content:center;

	padding:100px;
	max-width:560px;
}

.glomax-label{
	font-size:11px;
	letter-spacing:.24em;
	text-transform:uppercase;

	color:rgba(0,0,0,.42);

	margin-bottom:28px;
}

.glomax-copy h2{
	font-size:clamp(58px,6vw,96px);
	line-height:.9;
	letter-spacing:-0.07em;
	font-weight:500;

	color:#111;

	margin:0 0 28px;
}

.glomax-copy p{
	font-size:20px;
	line-height:1.6;

	color:rgba(0,0,0,.62);

	margin-bottom:42px;

	max-width:420px;
}


/* =========================================
   BUTTON
========================================= */

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

	width:max-content;

	height:48px;
	padding:0 26px;

	border-radius:999px;

	background:#111;
	color:#fff;

	font-size:15px;
	font-weight:500;

	text-decoration:none;

	transition:.3s ease;
}

.glomax-btn:hover{
	transform:scale(1.03);
	background:#000;
}


/* =========================================
   VISUAL
========================================= */

.glomax-visual{
	position:relative;

	display:flex;
	align-items:flex-end;
	justify-content:center;
}

.glomax-visual img{
	position:relative;

	width:170%;
	max-width:none;

	object-fit:contain;

	transform:translateX(4%) translateY(4%);

	filter:
		contrast(1.05)
		brightness(1.02);

	z-index:2;
}


/* =========================================
   RESPONSIVE
========================================= */

/* ==========================================================================
   RESPONSIVE MEDIA FOR MOBILE (SASA ANTI-OVERFLOW FIX)
   ========================================================================== */
@media(max-width: 980px){
    /* Jinakin padding luar biar card gak kejepit di layar HP */
    .glomax-feature {
        padding: 40px 16px;
    }

    .glomax-card {
        height: auto;
        grid-template-columns: 1fr; /* Jadiin satu kolom atas-bawah */
        border-radius: 28px; /* Disesuaikan biar makin manis di HP */
        /* Ubah arah gradient ke bawah biar transisi warnanya mengalir natural */
        background: linear-gradient(
            180deg,
            #FDB913 22%,
            #E1A76C 100%
        );
    }

    /* Konten Teks di Atas */
    .glomax-copy {
        padding: 46px 24px 32px; /* Padding proporsional buat jempol */
        max-width: 100%; /* Penuhin space */
        box-sizing: border-box;
    }

    .glomax-label {
        margin-bottom: 16px;
    }

    .glomax-copy h2 {
        /* Pake clamp biar kalau layarnya makin kecil, font-nya ngecil sendiri secara cerdas */
        font-size: clamp(36px, 10vw, 52px);
        line-height: 0.95;
        letter-spacing: -0.04em;
        margin-0 0 16px;
    }

    .glomax-copy p {
        font-size: 17px;
        line-height: 1.5;
        margin-bottom: 32px;
        max-width: 100%;
    }

    /* Konten Gambar di Bawah */
    .glomax-visual {
        min-height: auto;
        height: 320px; /* Batasin tinggi biar gak terlalu panjang ke bawah */
        overflow: hidden; /* KUNCI: Biar gambar lu yg gede gak ngerusak layar HP */
    }

    .glomax-visual img {
        width: 100%; /* Pas-in ke lebar card */
        height: 100%;
        object-fit: contain; /* Gambar tetep utuh gak kepotong */
        transform: translateY(10px) scale(1.05); /* Efek nongol dikit di bawah, rapi! */
    }
}