/* ----------------------------------------------------------------
	CKAN Theme — Homepage Specific Styles
	File: css/ckan-home.css

	Berisi rule CSS khusus untuk halaman utama (Homepage) tema CKAN.
	Semua class menggunakan prefix `ckan-` agar tidak bertabrakan
	dengan class bawaan Canvas.

	WARNA: Semua warna primer menggunakan CSS variables dari color.css
	       Tidak ada hardcode #1abc9c di file ini.

	Status: DISETUJUI oleh User pada 2026-09-01
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	Hero Section
-----------------------------------------------------------------*/

/* Text shadow untuk judul hero agar terbaca di atas gambar parallax */
.ckan-hero-title {
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Text shadow lebih halus untuk subjudul hero */
.ckan-hero-subtitle {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Tombol submit search bar — ukuran tetap 54x54px agar tetap bulat */
.ckan-search-btn {
	width: 54px !important;
	height: 54px !important;
	flex-shrink: 0;
}


/* ----------------------------------------------------------------
	Services Section
-----------------------------------------------------------------*/

/* Background image kolom kiri Services — tidak bisa diwakilkan class Canvas */
.ckan-services-bg {
	background: url('../images/services/main-bg.jpg') center center no-repeat;
	background-size: cover;
}


/* ----------------------------------------------------------------
	CTA / Quote Section
-----------------------------------------------------------------*/

/* Tombol inline di dalam <h2> — diangkat sedikit agar baseline sejajar teks */
.ckan-btn-lift {
	position: relative;
	top: -3px;
}


/* ----------------------------------------------------------------
	Contact / Map Section
-----------------------------------------------------------------*/

/* Placeholder peta — pastikan tinggi minimum terjaga */
.ckan-map-placeholder {
	min-height: 400px;
}


/* ----------------------------------------------------------------
	Tabs Topik & Organisasi (Arrow Tabs)
-----------------------------------------------------------------*/
.ckan-card-icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px auto;
}

.ckan-card-icon img, .ckan-card-icon i {
	max-width: 60%;
	max-height: 60%;
	object-fit: contain;
}

.ckan-arrow-tabs {
	border-bottom: 0 !important;
	display: flex;
	margin-bottom: 30px !important;
}

.ckan-arrow-tabs li {
	list-style: none;
	position: relative;
	margin-right: -15px;
	z-index: 1;
}

.ckan-arrow-tabs li button.nav-link {
	display: block;
	padding: 10px 40px 10px 20px;
	position: relative;
	clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
	text-decoration: none;
	border: none !important;
	background-color: var(--bs-gray-600) !important;
	color: #fff !important;
}

.ckan-arrow-tabs li button.nav-link.active {
	background-color: var(--bs-dark) !important;
}

.ckan-arrow-tabs li:not(:first-child) button.nav-link {
	padding-left: 35px;
	clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
}

/* Pure CSS Hover Effect for Topic & Organization Cards */
.ckan-topic-card {
    transition: all 0.3s ease !important;
}
.ckan-topic-card:hover {
    background-color: var(--rembang-primary) !important;
    color: #fff !important;
}
.ckan-topic-card:hover h5.card-title {
    color: #fff !important;
}
.ckan-topic-card:hover .ckan-card-icon {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    transform: scale(1.05);
    transition: transform 0.3s ease;
}
.ckan-topic-card:hover .ckan-card-icon i {
    color: var(--rembang-primary) !important;
}

/* Gambar asli tetap tampil apa adanya saat hover — tidak diubah jadi putih */
.ckan-topic-card:hover .ckan-card-icon img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Block Hero 25 specific CSS */
.block-hero-25 h1,
.block-hero-25 h2,
.block-hero-25 h3,
.block-hero-25 h4,
.block-hero-25 h5,
.block-hero-25 h6,
.block-hero-25 p,
.block-hero-25 a,
.block-hero-25 button {
    font-family: 'Inter', sans-serif;
}


/* Grid 12 Kolom untuk Infografis */
.row-cols-12 > * { flex: 0 0 auto; width: 8.33333333%; }
@media (max-width: 1200px) { .row-cols-12 > * { width: 10%; } }
@media (max-width: 992px) { .row-cols-12 > * { width: 16.66666667%; } }
@media (max-width: 768px) { .row-cols-12 > * { width: 25%; } }
@media (max-width: 576px) { .row-cols-12 > * { width: 33.33333333%; } }


/* ----------------------------------------------------------------
   CSS Dipindahkan dari index.html
-----------------------------------------------------------------*/
/* BRUTE FORCE OVERRIDE FOR TAB CONTENT VISIBILITY */
			#ckanTabContent, #infografisTabContent {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
			}
			.ckan-arrow-tabs .nav-link {
				position: relative;
				overflow: visible;
			}
			.ckan-arrow-tabs .nav-link.active::after {
				content: "";
				position: absolute;
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%);
				border-width: 10px 10px 0;
				border-style: solid;
				border-color: var(--bs-primary) transparent transparent transparent;
				display: block;
			}
			/* Overlay info grafis */
			.infografis-hover-overlay {
				position: relative;
			}
			.infografis-hover-overlay::after {
				content: '';
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				background-color: rgba(0, 0, 0, 0.4);
				opacity: 0;
				transition: opacity 0.3s ease;
			}
			.infografis-hover-overlay:hover::after {
				opacity: 1;
			}

            /* Forcing the card icon to remain a circle and dark on hover */
            .ckan-topic-card .ckan-card-icon {
                border-radius: 50% !important;
                overflow: hidden !important;
                position: relative !important;
                z-index: 10 !important;
                background-color: #ffffff !important;
                border: 2px solid #eee !important;
            }
            .ckan-topic-card:hover .ckan-card-icon {
                background-color: #ffffff !important;
                border-color: #ffffff !important;
                transform: scale(1.05);
            }
            .ckan-topic-card:hover .ckan-card-icon i {
                color: #333333 !important;
                background-color: transparent !important;
                -webkit-text-fill-color: #333333 !important;
            }
            .ckan-topic-card:hover .ckan-card-icon img {
                background-color: transparent !important;
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
            }

/* Responsive Slider Height for Mobile */
@media (max-width: 991px) {
    .ckan-responsive-slider {
        min-height: 0 !important;
        height: auto !important;
    }
    .ckan-responsive-slider-inner {
        position: relative !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

/* Responsive background bleeding for Bantuan Langsung */
@media (max-width: 991px) {
    .ckan-bantuan-bg {
        width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}
@media (min-width: 992px) {
    .ckan-bantuan-bg {
        width: 100vw !important;
        left: 0 !important;
        transform: none !important;
    }
}