/* =========================================
   1. CORE VARIABLES & GLOBAL RESET
   ========================================= */
:root {
    --village-primary: #2b7a0b;   /* Hijau Daun Segar */
    --village-secondary: #5bb318; /* Hijau Muda */
    --village-accent: #f5d042;    /* Kuning Padi */
    --village-bg: #fdfdfa;        /* Putih Tulang */
    --text-dark: #2d3748;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--village-bg);
    color: var(--text-dark);
    padding-top: 100px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex-grow: 1; }

/* Global Utilities */
.bg-village-primary { background-color: var(--village-primary) !important; }
.bg-village-accent { background-color: var(--village-accent) !important; }
.text-village-primary { color: var(--village-primary) !important; }
.text-village-secondary { color: var(--village-secondary) !important; }
.drop-shadow { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); }

/* =========================================
   2. HEADER, NAVBAR & TOP BAR (BASE)
   ========================================= */
.header-wrapper {
    background-color: transparent;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1030;
}

.top-bar {
    max-height: 50px; opacity: 1; overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.header-scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header-scrolled .top-bar { max-height: 0; opacity: 0; padding: 0 !important; margin: 0; }

.custom-navbar { min-height: 80px; padding: 0.8rem 0; transition: all 0.4s ease; position: relative; }
.header-scrolled .custom-navbar { min-height: 70px; padding: 0.4rem 0; }

.brand-text { font-size: 1.4rem; color: #ffffff; letter-spacing: 0.5px; transition: color 0.3s ease; text-shadow: 0 2px 5px rgba(0,0,0,0.6); }
.brand-subtext { font-size: 0.75rem; letter-spacing: 1px; color: #e2e8f0 !important; transition: color 0.3s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.header-scrolled .brand-text { color: var(--village-primary); text-shadow: none; }
.header-scrolled .brand-subtext { color: #718096 !important; text-shadow: none; }

.brand-logo { max-height: 55px; width: auto; transition: all 0.4s ease; }
.header-scrolled .brand-logo { max-height: 45px; }

/* -----------------------------------------
   NAV LINKS & HOVER/ACTIVE EFFECTS (KUNING BERSINAR)
   ----------------------------------------- */
.custom-navbar .nav-link { 
    color: #ffffff; 
    font-size: 0.95rem; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.6); 
    transition: all 0.3s ease; 
    position: relative;
}

/* Efek Hover dan Active Teks Saat Navbar Transparan (Atas) */
.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active { 
    color: var(--village-accent) !important; 
    text-shadow: 0 0 10px rgba(245, 208, 66, 0.5); /* Glow kuning */
}

/* Efek Hover dan Active Teks Saat Navbar Putih (Di-scroll) */
.header-scrolled .custom-navbar .nav-link { 
    color: var(--text-dark); 
    text-shadow: none; 
}
.header-scrolled .custom-navbar .nav-link:hover,
.header-scrolled .custom-navbar .nav-link.active { 
    color: var(--village-primary) !important; 
    text-shadow: none;
}

/* Base Ikon Menu */
.custom-navbar .nav-link i.main-icon { 
    color: var(--village-accent) !important; 
    text-shadow: none; 
    font-size: 1.2rem; 
    transition: transform 0.3s ease, color 0.3s ease; 
}

/* Efek Ikon Membesar dan Glow saat Di-hover atau Aktif */
.custom-navbar .nav-link:hover i.main-icon,
.custom-navbar .nav-link.active i.main-icon {
    transform: scale(1.15);
    color: var(--village-accent) !important;
    filter: drop-shadow(0 0 5px rgba(245, 208, 66, 0.5)); /* Glow kuning ikon */
}

/* Ikon Menu Saat Navbar Putih */
.header-scrolled .custom-navbar .nav-link i.main-icon { color: var(--village-secondary) !important; }
.header-scrolled .custom-navbar .nav-link.active i.main-icon { color: var(--village-primary) !important; }

/* -----------------------------------------
   MISC NAVBAR ELEMENTS
   ----------------------------------------- */
.custom-navbar .dropdown-toggle::after { display: none !important; }
.dropdown-indicator { transition: transform 0.3s ease; color: inherit; opacity: 0.7; }

.btn-login { 
    background-color: var(--village-primary); border: none; color: white !important; 
    box-shadow: 0 4px 15px rgba(43, 122, 11, 0.25); transition: all 0.3s ease; 
}
.btn-login:hover { background-color: var(--village-secondary); transform: translateY(-3px); }

/* =========================================
   3. HERO, CONTENT & FOOTER (BASE)
   ========================================= */
.hero-section {
    background-color: #143e06; 
    background-image: url('../img/hero-bg.jpg');
    background-position: center; background-size: cover; background-attachment: fixed; 
    margin-top: -100px; padding-top: 120px; min-height: 100vh; position: relative;
}
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(15,23,42,0.4) 0%, rgba(15,23,42,0.95) 100%); }
.hero-logo-img { max-height: 140px !important; width: auto !important; }
.text-gradient { background: linear-gradient(90deg, #34d399, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* =========================================
   BERITA SECTION (FIX ANTI MELAR)
   ========================================= */
.news-card-main { 
    border-radius: 24px; overflow: hidden; position: relative; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
    height: 420px; 
    margin-bottom: 1.5rem;
}
.news-card-main img { 
    width: 100%; height: 100%; object-fit: cover; 
    position: absolute; top: 0; left: 0; transition: transform 0.7s ease; 
}
.news-card-main:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.news-card-main:hover img { transform: scale(1.05); }

.news-overlay-main { 
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2;
    background: linear-gradient(0deg, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0) 100%); 
    padding: 2.5rem 2rem 2rem 2rem; 
}

/* KARTU BERITA SAMPING (LIST) */
.news-card-side { 
    background: #ffffff; border-radius: 20px; padding: 1.2rem; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: all 0.3s ease; 
    border: 1px solid rgba(0,0,0,0.04); 
}
.news-card-side:hover { transform: translateX(8px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: rgba(43, 122, 11, 0.2); }
.news-card-side img { border-radius: 14px; width: 130px; height: 110px; object-fit: cover; }

/* KARTU BERITA GRID (2 BERDAMPINGAN) */
.news-card-grid { 
    background: #ffffff; border-radius: 20px; overflow: hidden; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: all 0.3s ease; 
    border: 1px solid rgba(0,0,0,0.04); height: 100%; 
    display: flex; flex-direction: column; 
}
.news-card-grid:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: rgba(43, 122, 11, 0.2); }
.news-card-grid img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.5s ease; }
.news-card-grid:hover img { transform: scale(1.05); }
.news-card-grid-body { padding: 1.2rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }

.custom-footer { background: linear-gradient(180deg, #1a4d07 0%, #0d2b03 100%); color: #e2e8f0; position: relative; border-top: 4px solid var(--village-accent); }
.text-footer-muted { color: #cbd5e1; opacity: 0.8; }

.footer-heading { color: #ffffff; font-weight: 700; letter-spacing: 0.5px; position: relative; padding-bottom: 12px; margin-bottom: 15px; }
.footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background-color: var(--village-accent); border-radius: 5px; transition: width 0.3s ease; }
.custom-footer:hover .footer-heading::after { width: 60px; }

.footer-link { color: #cbd5e1; text-decoration: none; transition: all 0.3s ease; display: inline-block; }
.footer-link:hover { color: var(--village-accent); transform: translateX(8px); }

.social-circle { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); color: var(--village-accent); border: 1px solid rgba(245, 208, 66, 0.3); font-size: 1.2rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.social-circle:hover { background-color: var(--village-accent); color: #0d2b03; transform: translateY(-5px) rotate(360deg); box-shadow: 0 8px 20px rgba(245, 208, 66, 0.3); }

.map-container { border: 2px solid rgba(245, 208, 66, 0.2); transition: all 0.4s ease; }
.map-container:hover { border-color: var(--village-accent); transform: scale(1.02); }

.footer-bottom { background-color: rgba(0,0,0,0.3); border-top: 1px solid rgba(245, 208, 66, 0.1); }
.hover-glow-yellow:hover { color: var(--village-accent) !important; text-shadow: 0 0 10px rgba(245, 208, 66, 0.5); }

.custom-shape-divider-top { position: absolute; top: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; }
.custom-shape-divider-top svg { display: block; width: calc(100% + 1.3px); height: 50px; }
.custom-shape-divider-top .shape-fill { fill: var(--village-bg); }

/* =========================================
   PENGUMUMAN SECTION (MODERN TYPOGRAPHY)
   ========================================= */
.announcement-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.8rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    border-left: 5px solid var(--village-secondary); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    z-index: 1;
    height: 100%;
}

.announcement-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(43, 122, 11, 0.1);
    border-left-color: var(--village-primary);
}

.announcement-date {
    background: rgba(43, 122, 11, 0.08);
    color: var(--village-primary);
    border-radius: 12px;
    padding: 0.8rem 0.5rem;
    text-align: center;
    min-width: 75px;
    flex-shrink: 0;
    border: 1px solid rgba(43, 122, 11, 0.1);
}
.announcement-date span.day {
    font-size: 1.8rem;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 2px;
}
.announcement-date span.month {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.announcement-content { flex-grow: 1; }
.announcement-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.5;
    transition: color 0.3s ease;
}
.announcement-card:hover .announcement-title { color: var(--village-primary); }

.announcement-watermark {
    position: absolute;
    right: -15px;
    bottom: -20px;
    font-size: 6rem;
    color: rgba(0,0,0,0.02);
    z-index: -1;
    transform: rotate(-15deg);
    transition: all 0.5s ease;
}
.announcement-card:hover .announcement-watermark {
    color: rgba(245, 208, 66, 0.1); 
    transform: rotate(0deg) scale(1.1);
}

.read-more-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--village-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}
.read-more-link i { transition: transform 0.3s ease; }
.announcement-card:hover .read-more-link { color: var(--village-primary); }
.announcement-card:hover .read-more-link i { transform: translateX(5px); }


/* =========================================
   4. LOGIKA DESKTOP & LAYAR BESAR (>= 1200px)
   ========================================= */
@media (min-width: 1200px) {
    .navbar-nav-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; height: 100%; width: max-content !important; }
    
    /* Garis Bawah Menu */
    .custom-navbar .nav-link::before { content: ''; position: absolute; width: 0; height: 3px; bottom: -8px; left: 50%; background-color: var(--village-accent); transition: all 0.3s ease; transform: translateX(-50%); border-radius: 5px; }
    
    /* Munculkan Garis saat Hover atau Aktif */
    .custom-navbar .nav-link:hover::before,
    .custom-navbar .nav-link.active::before { width: 80%; }
    
    .custom-dropdown { display: none; position: absolute; top: 100%; left: 0; border-radius: 12px; padding: 0.8rem 0.5rem; min-width: 240px; border-top: 4px solid var(--village-primary) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.1); background: white; }
    .custom-navbar .dropdown:hover .dropdown-menu { display: block; animation: fadeDown 0.3s ease-in-out forwards; }
    .custom-navbar .dropdown:hover .dropdown-indicator { transform: rotate(180deg); }
    .custom-dropdown .dropdown-item { border-radius: 8px; font-weight: 500; font-size: 0.9rem; color: var(--text-dark); transition: all 0.2s ease; margin-bottom: 2px; display: flex; align-items: center; gap: 10px; }
    .custom-dropdown .dropdown-item:hover { background-color: rgba(91, 179, 24, 0.1); color: var(--village-primary); transform: translateX(8px); }

    .hero-title { font-size: 4.5rem !important; }
    .hero-desc { font-size: 1.25rem !important; line-height: 1.8 !important; max-width: 650px !important;}
    .section-title { font-size: 2.5rem !important; }
    .kades-icon-box { width: 60px !important; height: 60px !important; }
    .kades-icon-box i { font-size: 2rem !important; }
}


/* =========================================
   5. LOGIKA MENU TABLET & MOBILE (< 1200px)
   ========================================= */
@media (max-width: 1199.98px) {
    body { padding-top: 60px; } 
    .header-wrapper { background-color: #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
    .brand-text { color: var(--village-primary) !important; text-shadow: none !important; font-size: 1.25rem; }
    .brand-subtext { color: #718096 !important; text-shadow: none !important; }
    .navbar-toggler i { color: var(--village-primary) !important; }

    .navbar-collapse { background: #ffffff; padding: 1rem; border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); margin-top: 10px; max-height: 75vh; overflow-y: auto; }
    .custom-navbar .nav-link { color: var(--text-dark) !important; text-shadow: none !important; padding: 0.75rem 0 !important; border-bottom: 1px solid #f1f5f9; justify-content: space-between; font-size: 1rem; }
    .custom-navbar .nav-link i.main-icon { color: var(--village-secondary) !important; margin-right: 8px; font-size: 1.1rem;}
    .custom-navbar .nav-link[aria-expanded="true"] .dropdown-indicator { transform: rotate(180deg); color: var(--village-primary); }

    .custom-navbar .dropdown-menu { position: static !important; transform: none !important; inset: auto !important; box-shadow: none !important; border: none !important; border-left: 3px solid var(--village-secondary) !important; background-color: #f8fafc; padding: 0.5rem 0.75rem !important; margin-top: 0.25rem; margin-bottom: 0.25rem; border-radius: 0 12px 12px 0; font-size: 0.95rem; }
    
    /* Penyesuaian Mobile untuk Pengumuman */
    .announcement-card { flex-direction: column; gap: 1rem; padding: 1.5rem; }
    .announcement-date { display: flex; align-items: baseline; gap: 8px; min-width: auto; padding: 0.5rem 1rem; }
    .announcement-date span.day { font-size: 1.4rem; }
    .announcement-watermark { font-size: 5rem; }
}


/* =========================================
   6. LOGIKA UKURAN TABLET (768px - 1199px)
   ========================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-section { padding-top: 140px; }
    .hero-logo-img { max-height: 115px !important; } 
    .hero-title { font-size: 2.8rem !important; } 
    .hero-subtitle { font-size: 1rem !important; }
    .hero-desc { font-size: 1.05rem !important; line-height: 1.7 !important; max-width: 85% !important; }
    
    .section-title { font-size: 2.2rem !important; }
    .kades-icon-box { width: 50px !important; height: 50px !important; }
    .kades-icon-box i { font-size: 1.75rem !important; }
}


/* =========================================
   7. LOGIKA UKURAN SMARTPHONE (< 768px)
   ========================================= */
@media (max-width: 767.98px) {
    .hero-section { padding-top: 200px; min-height: auto; padding-bottom: 60px; }
    .hero-logo-img { max-height: 100px !important; }
    
    .hero-title { font-size: 2.5rem !important; }
    .hero-subtitle { font-size: 0.85rem !important; opacity: 0.8 !important; }
    .hero-desc { font-size: 0.95rem !important; line-height: 1.6 !important; max-width: 90% !important; }
    .hero-btn { font-size: 0.9rem !important; }

    /* Mencegah ikon menu membesar di HP agar tidak aneh */
    .custom-navbar .nav-link.active i.main-icon { transform: none !important; }

    .news-card-main { min-height: 300px; }
    .news-overlay-main { padding: 1.5rem; }
    .news-card-side { flex-direction: column; text-align: left; }
    .news-card-side img { width: 100%; height: 200px; margin-bottom: 1rem; }

    .section-title { font-size: 1.8rem !important; }
    .section-desc { font-size: 0.95rem !important; line-height: 1.7 !important; }

    .kades-icon-box { width: 45px !important; height: 45px !important; }
    .kades-icon-box i { font-size: 1.5rem !important; }
    .kades-name { font-size: 1.1rem !important; }
    .kades-period { font-size: 0.75rem !important; }

    .footer-heading { font-size: 1.1rem; }
}


/* =========================================
   9. DETAIL PAGE & SIDEBAR LAYOUT
   ========================================= */
.page-header {
    background: linear-gradient(rgba(26, 77, 7, 0.85), rgba(13, 43, 3, 0.9)), url('../img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 160px 0 60px; 
    margin-top: -100px;    
    color: white;
}

.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.5); }
.breadcrumb-item.active { color: var(--village-accent); }

.content-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
}

.greeting-text {
    line-height: 1.9;
    font-size: 1.05rem;
    color: #4a5568;
    text-align: justify;
}

.img-sambutan {
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 5px solid white;
}

.sidebar-widget {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
}

.widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--village-accent);
    display: inline-block;
}

.sidebar-news-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e2e8f0;
    text-decoration: none;
    transition: all 0.3s ease;
}
.sidebar-news-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-news-item:hover { transform: translateX(5px); }

.sidebar-news-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
}

.sidebar-news-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 4px;
}

@media (max-width: 1199.98px) {
    .page-header { 
        margin-top: -60px; 
        padding: 120px 0 40px; 
    }
    .content-card { padding: 1.5rem; }
}



/* =========================================
   10. BERITA DETAIL & TYPOGRAPHY
   ========================================= */
.article-header-meta {
    font-size: 0.9rem;
    color: #718096;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
}

/* Memastikan format dari Filament tampil rapi */
.article-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #2d3748;
}

.article-content p { margin-bottom: 1.5rem; }

.article-content ul, .article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li { margin-bottom: 0.5rem; }

/* Tombol Share Social Media */
.share-container {
    padding: 20px 0;
    border-top: 1px solid #edf2f7;
    margin-top: 40px;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    margin-right: 10px;
}

.share-btn.fb { background-color: #3b5998; }
.share-btn.wa { background-color: #25d366; }
.share-btn.ig { background-color: #e4405f; }
.share-btn.tw { background-color: #1da1f2; }

.share-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0.9;
}

/* =========================================
   11. PORTAL BERITA CLASSIC LAYOUT & SEARCH
   ========================================= */
.portal-news-item {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}
.portal-news-item:last-child { border-bottom: none; }

.portal-news-img {
    flex-shrink: 0;
    width: 240px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.portal-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.portal-news-item:hover .portal-news-img img { transform: scale(1.05); }

.portal-news-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.portal-news-meta {
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.portal-news-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.portal-news-item:hover .portal-news-title { color: var(--village-primary); }

.portal-news-excerpt {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 0;
    /* Efek memotong teks agar tidak kepanjangan (Maksimal 2 baris) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kotak Pencarian Sidebar */
.search-box-widget {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}
.search-box-widget .form-control {
    border-radius: 8px 0 0 8px;
    border-right: none;
}
.search-box-widget .btn-search {
    border-radius: 0 8px 8px 0;
    background-color: var(--village-primary);
    color: white;
    border: none;
}
.search-box-widget .btn-search:hover { background-color: var(--village-secondary); }

@media (max-width: 767.98px) {
    .portal-news-item { flex-direction: column; gap: 1rem; }
    .portal-news-img { width: 100%; height: 200px; }
}



/* =========================================
   12. WISATA CARDS & GALLERY
   ========================================= */
.wisata-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.wisata-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }

.wisata-img-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
}
.wisata-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.wisata-card:hover .wisata-img-wrapper img { transform: scale(1.1); }

.wisata-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.wisata-title { font-size: 1.3rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.5rem; }
.wisata-location { font-size: 0.9rem; color: #718096; margin-bottom: 1rem; display: flex; align-items: center; }

/* Grid Galeri di Detail */
.wisata-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 2rem;
}
.wisata-gallery-item {
    border-radius: 12px;
    overflow: hidden;
    height: 150px;
    cursor: pointer;
}
.wisata-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.wisata-gallery-item:hover img { transform: scale(1.05); }



/* =========================================
   13. UMKM CARDS & E-COMMERCE STYLE
   ========================================= */
.umkm-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.umkm-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.umkm-img { height: 220px; width: 100%; object-fit: cover; }
.umkm-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.umkm-seller { font-size: 0.85rem; font-weight: 600; color: #718096; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 5px; }
.umkm-title { font-size: 1.25rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.5rem; }
.umkm-price { font-size: 1.15rem; font-weight: 800; color: var(--village-accent); margin-bottom: 1rem; }
.umkm-address { font-size: 0.85rem; color: #4a5568; margin-bottom: 1.5rem; }

.btn-whatsapp { background-color: #25D366; color: white; font-weight: bold; border: none; transition: all 0.3s; }
.btn-whatsapp:hover { background-color: #128C7E; color: white; transform: scale(1.02); }



/* =========================================
   14. STRUKTUR ORGANISASI (FULL-BLEED PHOTO)
   ========================================= */
.org-tier {
    position: relative;
    padding-bottom: 4rem; 
}
.org-tier::after {
    content: "\F128"; 
    font-family: "bootstrap-icons";
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--village-primary);
    opacity: 0.7;
}
.org-tier:last-child::after { display: none; }

.org-card {
    background: #fff;
    border-radius: 16px;
    padding: 0; /* 🔥 PADDING DIHILANGKAN AGAR FOTO MENTOK KE TEPI 🔥 */
    overflow: hidden; /* Mengunci foto agar sudutnya ikut membulat */
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: none;
    border-bottom: 5px solid var(--village-primary);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.org-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.12); 
}

/* FOTO SEKARANG SEBESAR KARTUNYA */
.org-img-wrapper {
    width: 100%; /* Lebar penuh 100% */
    height: 280px; /* Tinggi proporsional */
    background: #f8fafc;
    margin-bottom: 0;
    border-radius: 0; 
}
.org-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; 
    transition: transform 0.5s ease;
}
.org-card:hover .org-img-wrapper img {
    transform: scale(1.05);
}

.org-card-body {
    width: 100%;
    padding: 1.5rem 1rem; /* Padding hanya diberikan untuk area teks di bawah foto */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    position: relative;
    z-index: 2;
}

.org-name { font-size: 1.2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.2rem;}
.org-role { font-size: 0.85rem; font-weight: 800; color: var(--village-accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.8rem; }
.org-detail { font-size: 0.8rem; color: #718096; margin-bottom: 0.2rem; }



/* Animasi Tombol Hover Scale 
ANIMASI CSS 404 ERROR
*/
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15) !important;
}



/* INI UNTUK TAMPILAN LOGO KEMENTERIAN YANG BERJALAN */
/* Container Utama */
.logo-ticker-wrapper {
    overflow: hidden;
    /*background-color: #144c22; */
    padding: 1rem 0; /* 3rem ini adalah jarak atas dan bawah. Bisa diubah misal jadi 2rem 0 */
    width: 100%;
}

/* Track Logo */
.logo-ticker-track {
    display: flex;
    width: max-content; /* Biarkan melebar sesuai konten */
    will-change: transform; /* Optimasi performa untuk animasi smooth */
}



.logo-item img {
    height: 60px; /* Ukuran Logo */
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Hover Effect: Logo menyala dan membesar */
.logo-item:hover img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.1);
}

/* --- Tambahkan 'position: relative' ke logo-item yang sudah ada --- */
.logo-item {
    position: relative; /* Wajib ditambahkan agar tulisan muncul pas di dekat logo */
    /* (kode padding dan display milik Anda sebelumnya tetap biarkan di sini) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
}

/* --- KODE BARU: Desain Kotak Nama (Tooltip) --- */
.logo-item::after {
    content: attr(data-name); /* Mengambil teks otomatis dari data-name di HTML */
    position: absolute;
    top: -40px; /* Jarak tulisan di atas logo */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: rgba(255, 255, 255, 0.85); /* Warna background gelap agak transparan */
    color: #2b7a0b; /* Warna teks putih */
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap; /* Mencegah teks turun ke bawah / jadi 2 baris */
    opacity: 0; /* Sembunyikan saat tidak di-hover */
    visibility: hidden;
    transition: all 0.3s ease; /* Efek transisi halus */
    pointer-events: none; /* Agar tulisan tidak memblokir klik pada logo */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sedikit bayangan biar elegan */
}

/* --- KODE BARU: Memunculkan tulisan saat logo di-hover --- */
.logo-item:hover::after {
    opacity: 1; /* Munculkan */
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Efek tulisan melayang naik ke tempatnya */
}