/* Welcome Page Modernization CSS */
:root {
    --primary-color: #005faf;
    --primary-hover: #2487ce;
    --secondary-color: #f0f0f0;
    --text-color: #2c3e50;
    --light-text: #fff;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --border-radius-lg: 20px;
    --border-radius-md: 15px;
    --border-radius-sm: 8px;
}

/* General Styling */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
}

.container-x {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

/* Section Headers */
.container-x h3 {
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 0;
    font-size: 1.75rem;
}

.container-x h3.item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover));
    border-radius: 10px;
}

/* "View All" Button */
.informasi-lengkap {
    background-color: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    padding: 8px 24px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    transition: var(--transition) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
}

.informasi-lengkap:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 95, 175, 0.2);
}

.informasi-lengkap i {
    transition: transform 0.3s ease;
}

.informasi-lengkap:hover i {
    transform: translateX(4px);
}


/* Hero Banner */
.slider-banner {
    position: relative;
    width: 100%;
    height: 75vh;
    max-height: 700px;
    min-height: 500px;
    overflow: hidden;
}

.slider-image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 6s ease;
    /* Smooth fade + slow zoom effect */
    transform: scale(1);
    z-index: 1;
}

/* Overlay Gradient */
.slider-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 43, 93, 0.8) 100%);
    z-index: 2;
}

.slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

input:checked+.slider-image {
    opacity: 1;
    z-index: 2;
    transform: scale(1.05);
    /* Proper zoom on active */
}

.slider-banner input {
    display: none;
}

/* Navigation Arrows */
.nav label {
    z-index: 10;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    transition: var(--transition);
    cursor: pointer;
    opacity: 0;
    /* Hidden by default, shown on hover */
    position: absolute;
}

.slider-banner:hover .nav label {
    opacity: 1;
}

.nav label:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.nav .prev {
    left: 30px;
}

.nav .next {
    right: 30px;
}

.nav {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through except on labels */
}

.nav label {
    pointer-events: auto;
}


/* Bullet Nav */
.bullet-nav {
    position: absolute;
    z-index: 10;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    border-radius: 50% !important;
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.bullet:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Note: The active state for bullets is handled within the blade template using @foreach loop as it depends on IDs, 
   but we can style the base active class if applied, or rely on the specific ID selector which we will keep in the blade but simplified */


/* Service Cards (Glassmorphism) */
.card-container {
    position: relative;
    z-index: 20;
    margin-top: -80px;
    /* Overlap banner */
    padding: 0 20px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.card-item {
    display: flex;
    justify-content: center;
    gap: 30px;
    background: transparent;
    padding-bottom: 30px;
    /* Space for hover effects */
}

.card-landing {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--glass-border);
    border-radius: var(--border-radius-lg);
    height: 280px;
    width: 100%;
    max-width: 320px;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.card-landing:hover {
    transform: translateY(-15px);
    box-shadow: var(--shadow-hover);
}

.card-landing .icon-title {
    padding: 10px;
    /* Reduced from 40px 20px */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    width: 100%;
}

.card-landing .icon-title img {
    width: 170px;
    /* Increased from 90px */
    height: 170px;
    /* Increased from 90px */
    margin-bottom: 0px;
    /* Removed bottom margin */
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-landing:hover .icon-title img {
    transform: scale(1.1) rotate(-5deg);
}

.capt-title h4 {
    color: white;
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Bottom Bar (Label) */
.card-landing>div:last-child {
    background: var(--primary-color);
    /* background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important; */
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.card-landing:hover>div:last-child {
    height: 60px;
    /* Shrink slightly */
}

/* Sub-menu reveal on hover */
.child-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.96);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* Hidden state */
    transform: translateY(20px);
    transition: var(--transition);
    pointer-events: none;
    /* Ignore clicks when hidden */
    padding: 20px;
    gap: 10px;
}

.card-landing:hover .child-card {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.child-card .item {
    width: 100%;
}

.child-card .item a {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
    padding: 12px 15px;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    border: 1px solid #eef2f6;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.child-card .item a:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 95, 175, 0.2);
}


/* News Sections Styles */
.about.section {
    padding: 60px 0;
}

/* Swiper Container Spacing */
.swiper {
    padding: 20px 10px 50px 10px !important;
    /* Bottom padding for pagination */
}

.swiper-slide {
    height: auto;
    display: flex;
}

/* News Cards */
/* News Cards Uniform Styling */
.post-slide {
    background: #fff;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    height: 520px;
    /* Fixed height for ALL cards (Opini, Berita, etc.) */
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    margin-bottom: 30px;
    /* Spacing for shadow */
}

.post-slide:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 95, 175, 0.15);
}

.post-img {
    position: relative;
    height: 240px;
    /* Fixed image height for aspect ratio consistency */
    overflow: hidden;
    background-color: #f8f9fa;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.post-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Flexes to show full image regardless of aspect ratio */
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: #f4f6f8;
    /* Soft background */
}

/* Reduced zoom effect for better view */
.post-slide:hover .post-img img {
    transform: scale(1.05);
}

/* Over layer effect */
.over-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 95, 175, 0.3);
    /* Lighter blue tint */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition);
}

.post-slide:hover .over-layer {
    opacity: 1;
}

.over-layer i {
    color: white;
    font-size: 2rem;
    transform: scale(0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.post-slide:hover .over-layer i {
    transform: scale(1);
}

.post-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.post-title a {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    text-decoration: none;
    transition: color 0.2s;
}

/* Always ensure blue text on hover + underline logic */
.post-slide:hover .post-title a {
    color: var(--primary-color) !important;
}

.post-title a:hover {
    text-decoration: underline;
    text-decoration-color: #fdb913;
    /* Yellow Underline */
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

.post-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: auto;
    /* Push meta to bottom */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-date {
    font-size: 0.8rem;
    color: #95a5a6;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.post-date i {
    color: var(--primary-hover);
}

/* Read More Button styling removal as strictly requested just text effects */
.read-more {
    display: none;
    /* Hide if not needed or style minimally */
}

/* Swiper Pagination - Modern */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 0.6;
    transition: var(--transition);
    margin: 0 6px !important;
}

.swiper-pagination-bullet-active {
    width: 30px;
    border-radius: 10px;
    background: var(--primary-color);
    opacity: 1;
}


/* About Section */
#about {
    position: relative;
    background: white;
    /* Clean background */
}

#about h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

#about p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    max-width: 900px;
    margin: 0 auto;
}

/* Org Chart Modernization */
.organizational-chart {
    margin-top: 50px;
    font-family: 'Inter', sans-serif;
}

.eselon1,
.eselon2 {
    background: white;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 800;
    transition: var(--transition);
    box-shadow: 0 10px 20px rgba(0, 95, 175, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 250px;
}

.eselon1 h3,
.eselon2 h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
}

.eselon1:hover,
.eselon2:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 95, 175, 0.25);
    border-color: var(--primary-color);
}

.eselon1:hover h3,
.eselon2:hover h4 {
    color: white;
}

/* Chart connections */
ol.organizational-chart>li>div:before,
ol.organizational-chart>li>div:after,
ol.organizational-chart ol:before,
ol.organizational-chart ol:after,
ol.organizational-chart>li:before,
ol.organizational-chart>li:after {
    background-color: #d1d8e0 !important;
    /* Softer line color */
    width: 2px !important;
}

/* Eselon 2 spacing */
.eselon2 {
    margin-top: 20px;
    background: #f8fbff;
}

/* Responsive */
/* Responsive Adjustments */
@media (max-width: 991px) {
    .card-container {
        margin-top: 30px;
    }

    .card-item {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .card-landing {
        width: 100%;
        max-width: 360px;
        height: auto;
        min-height: 260px;
    }

    .slider-banner {
        height: 50vh;
        min-height: 400px;
    }

    /* Relax fixed height on tablet/mobile */
    .post-slide {
        height: auto;
        min-height: 480px;
    }

    .post-img {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .container-x {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .nav .prev,
    .nav .next {
        width: 40px;
        height: 40px;
    }

    /* Org Chart Mobile - Scroll Wrapper */
    .org-chart-container {
        justify-content: flex-start;
        /* Align left to allow scroll */
        overflow-x: auto;
        /* Enable horizontal scroll */
        padding-bottom: 20px;
        /* Space for scrollbar */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
    }

    .org-chart-wrapper {
        min-width: 850px;
        /* Force minimum width to keep structure intact */
        padding: 0 20px;
    }

    /* News Cards Mobile */
    .post-slide {
        height: auto;
        /* Natural height */
        margin-bottom: 20px;
        min-height: unset;
    }

    .post-img {
        height: 200px;
    }

    .post-content {
        padding: 20px;
    }

    .post-title a {
        font-size: 1rem;
    }

    /* Hero Text Mobile */
    .slider-banner {
        height: 400px;
    }
}

/* Org Chart Custom Styling */
.org-chart-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 0 80px 0;
    overflow: visible;
}

.org-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.org-node {
    width: 280px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 10;
    margin: 0 auto;
    background: transparent;
}

.org-node:hover {
    transform: scale(1.05);
    z-index: 20;
}

.org-header {
    background-color: #fdb913;
    color: #002b5d;
    text-align: center;
    padding: 12px 15px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.3;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    position: relative;
}

.org-body {
    background-color: #002b5d;
    color: white;
    text-align: center;
    padding: 15px 15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 15px rgba(0, 43, 93, 0.15);
}

/* Connecting Lines Container */
.org-lines {
    position: relative;
    width: 100%;
    height: 220px;
    /* Increased vertical space */
    display: flex;
    justify-content: center;
}

/* Main Vertical Line (Center) */
.line-vertical-main {
    width: 4px;
    background-color: #002b5d;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Secretary Branch - Right Side */
.secretary-branch {
    position: absolute;
    top: 60px;
    left: calc(50% + 10px);
    /* Start from the right edge of the dot (10px = dot radius) */
    display: flex;
    align-items: center;
}

.line-horizontal-sec {
    width: 130px;
    /* Wider gap for separation */
    height: 4px;
    background-color: #002b5d;
}

/* Bottom Branch - Horizontal Line */
.line-horizontal-bottom {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 570px;
    /* Precise width: 850px (total) - 280px (node width center-to-center offset) = 570px */
    height: 4px;
    background-color: #002b5d;
}

/* Dots Styling (Donut) */
.dot {
    width: 20px;
    height: 20px;
    background-color: white;
    border: 5px solid #002b5d;
    border-radius: 50%;
    position: absolute;
    z-index: 15;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dot Positions */
/* Secretary Intersection Dot */
.dot-secretary-junction {
    top: 116px;
    /* Precision alignment (60px top + 100px node center offset approx) */
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom Intersection Dots */
.dot-bottom-center {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.dot-bottom-left {
    bottom: -8px;
    left: 0;
    transform: translateX(-50%);
}

.dot-bottom-right {
    bottom: -8px;
    right: 0;
    transform: translateX(50%);
}


/* Directors Row */
.directors-row {
    display: flex;
    justify-content: space-between;
    width: 850px;
    /* Container width */
    margin: 0 auto;
}

.director-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px;
    /* Explicit width to match node width for precise centering */
}

.line-vertical-short {
    width: 4px;
    height: 40px;
    background-color: #002b5d;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
    .org-chart-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding-left: 40px;
    }

    .org-chart-wrapper {
        min-width: 950px;
        /* Ensure scrolling triggers */
        padding-right: 40px;
    }
}