/* Custom CSS for IAIPI Website */

/* =========================
   SKIP TO MAIN CONTENT
   ========================= */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #006739;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* =========================
   FOCUS STATES
   ========================= */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #ffc600;
    outline-offset: 2px;
}

/* =========================
   HERO BANNER ISLAMIC ORNAMENT
   Geometric Islamic pattern overlay on all hero banners
   ========================= */

/* Add Islamic ornament pattern on top of hero banner overlay */
#page-banner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('/images/islamic-ornament-hero.svg') !important;
    background-repeat: repeat !important;
    background-size: 180px 180px !important;
    background-position: center center !important;
    opacity: 0.6 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Ensure content is above ornament */
#page-banner .container,
#page-banner .page-banner-cont {
    position: relative !important;
    z-index: 5 !important;
}

/* Adjust ornament for mobile */
@media (max-width: 767px) {
    #page-banner::after {
        background-size: 120px 120px !important;
        opacity: 0.5 !important;
    }
}

/* =========================
   SLIDER ENHANCEMENTS
   ========================= */
.slider-wrapper {
    position: relative;
    height: 90vh;
    min-height: 650px;
    max-height: 1000px;
    display: flex;
    align-items: center;
}

/* Alternative: Use aspect ratio for perfect 16:9 display */
@supports (aspect-ratio: 16 / 9) {
    .slider-wrapper {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 650px;
        max-height: 1000px;
    }
}

/* Slider overlay disabled - show original image colors */
.slider-overlay {
    display: none;
}

.slider-content {
    position: relative;
    z-index: 2;
    padding-top: 150px;
}

.slider-text {
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slider-title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.slider-subtitle {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 30px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.slider-btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.slider-btn:hover,
.slider-btn:focus {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* =========================
   SLIDER CONTROLS FIX - COMPREHENSIVE
   Fixes double arrow issue by hiding ALL template arrows
   and showing ONLY custom button arrows
   ========================= */

/* STEP 1: Hide ALL template arrows with extreme prejudice */
.slider-active .slick-arrow,
.slider-active .next,
.slider-active .prev,
.slider-active .slick-arrow.next,
.slider-active .slick-arrow.prev,
.slider-active > .slick-arrow,
.slider-active > .next,
.slider-active > .prev {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* STEP 2: Force show ONLY button.slick-prev and button.slick-next */
.slider-active button.slick-prev,
.slider-active button.slick-next {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    left: auto !important;
    pointer-events: auto !important;
}

/* Style for icon inside button */
.slider-active .slick-prev i,
.slider-active .slick-next i {
    font-size: 24px !important;
    color: white !important;
    line-height: 1 !important;
    display: block !important;
}

/* Fallback if using ::before */
.slider-active .slick-prev::before,
.slider-active .slick-next::before {
    content: '' !important;
    display: none !important;
}

.slider-active .slick-prev:hover,
.slider-active .slick-next:hover,
.slider-active .slick-prev:focus,
.slider-active .slick-next:focus {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* STEP 3: Position button arrows correctly */
.slider-active button.slick-prev {
    left: 30px !important;
    right: auto !important;
}

.slider-active button.slick-next {
    right: 30px !important;
    left: auto !important;
}

/* STEP 4: Override ALL hover states from template */
.slider-active:hover .slick-arrow,
.slider-active:hover .next,
.slider-active:hover .prev {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    left: -9999px !important;
}

.slider-active:hover button.slick-prev {
    display: flex !important;
    left: 30px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.slider-active:hover button.slick-next {
    display: flex !important;
    right: 30px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Slider Dots - Fixed for Production */
.slider-active .slick-dots {
    position: absolute !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.slider-active .slick-dots li {
    margin: 0 5px !important;
    display: inline-block !important;
}

.slider-active .slick-dots li button {
    font-size: 0 !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
}

.slider-active .slick-dots li button:before {
    font-size: 12px !important;
    color: white !important;
    opacity: 0.5 !important;
    content: '•' !important;
    display: block !important;
    line-height: 12px !important;
}

.slider-active .slick-dots li.slick-active button:before {
    color: #ffc600 !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

/* =========================
   MOBILE NAVIGATION
   ========================= */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 998;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.navbar-collapse {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-collapse.show {
    animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Better touch targets for mobile */
.navbar-nav .nav-item a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 20px;
}

.navbar-toggler {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
}

/* =========================
   PUBLICATION
   ========================= */
.singel-publication .image {
    height: 350px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.singel-publication .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.singel-publication .cont .name {
    width: 100%;
}

.singel-publication .cont .name a h6 {
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* Hover effect for publications */
.singel-publication {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.singel-publication:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.singel-publication .image {
    position: relative;
    overflow: hidden;
}

.singel-publication .image img {
    transition: transform 0.5s ease;
}

.singel-publication:hover .image img {
    transform: scale(1.05);
}

/* =========================
   CTA ENHANCEMENTS
   ========================= */
.apply-badge {
    display: inline-block;
    background: rgba(255, 198, 0, 0.9);
    color: #006739;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.apply-badge.scholarship {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.apply-badge i {
    margin-right: 5px;
}

/* Countdown Timer */
.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    border-radius: 8px;
    min-width: 70px;
}

.countdown-number {
    font-size: 32px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.countdown-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 5px;
}

/* CTA Buttons */
.cta-buttons {
    margin: 20px 0;
}

.cta-primary,
.cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.cta-primary:hover,
.cta-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.deadline-text {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-top: 15px;
}

.deadline-text i {
    margin-right: 5px;
}

/* Social Proof */
.social-proof {
    margin: 20px 0;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: white;
}

.proof-item i {
    font-size: 20px;
    color: #ffc600;
}

/* =========================
   CARD ANIMATIONS
   ========================= */
.singel-course,
.teachers-2-singel,
.singel-patnar {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.singel-course:hover,
.teachers-2-singel:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Button Ripple Effect */
.main-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.main-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.main-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Scroll Reveal Animation */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Link Hover Effects */
a {
    transition: color 0.3s ease;
}

/* Footer Links Animation */
.footer-link ul li a {
    position: relative;
    transition: all 0.3s ease;
}

.footer-link ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #ffc600;
    transition: width 0.3s ease;
}

.footer-link ul li a:hover::after {
    width: 100%;
}

/* Social Media Icons Animation */
.footer-about ul li a {
    transition: all 0.3s ease;
}

.footer-about ul li a:hover {
    transform: translateY(-3px) scale(1.1);
}

/* =========================
   WHATSAPP FLOAT BUTTON
   ========================= */
.whatsapp-float {
    position: fixed;
    bottom: 100px;
    right: 30px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background: #20BA5A;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
    color: white;
}

.whatsapp-float span {
    display: none;
}

.whatsapp-float:hover span {
    display: block;
    position: absolute;
    right: 70px;
    background: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* =========================
   NEWS SECTION - MODERN DESIGN
   ========================= */
.news-view-all {
    display: flex;
    align-items: flex-end;
    height: 100%;
}

.view-all-link {
    color: #006739;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    color: #ffc600;
    transform: translateX(5px);
}

.view-all-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.view-all-link:hover i {
    transform: translateX(5px);
}

/* Featured News Card */
.news-card-featured {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card-featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.news-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card-image {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #f0f0f0;
}

.news-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.news-card-featured:hover .news-card-image img {
    transform: scale(1.08);
}

.news-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.news-card-featured:hover .news-card-overlay {
    opacity: 1;
}

.news-category-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #006739;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-card-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    color: #999;
    font-size: 48px;
}

.news-card-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.news-date,
.news-read-time {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.news-date i,
.news-read-time i {
    color: #006739;
}

.news-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-card-link:hover .news-title {
    color: #006739;
}

.news-excerpt {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin: 0 0 20px;
    flex: 1;
}

.news-read-more {
    color: #006739;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.news-read-more i {
    transition: transform 0.3s ease;
}

.news-card-link:hover .news-read-more {
    color: #ffc600;
}

.news-card-link:hover .news-read-more i {
    transform: translateX(5px);
}

/* Small News Cards */
.news-grid-small {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news-card-small {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.news-card-small:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.news-card-link-small {
    text-decoration: none;
    color: inherit;
    display: block;
}

.news-card-image-small {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #f0f0f0;
}

.news-card-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-card-small:hover .news-card-image-small img {
    transform: scale(1.1);
}

.news-category-badge-small {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #006739;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
    text-transform: uppercase;
}

.news-card-image-placeholder-small {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    color: #999;
    font-size: 32px;
}

.news-card-content-small {
    padding: 20px;
}

.news-meta-small {
    margin-bottom: 10px;
}

.news-date-small {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-date-small i {
    color: #006739;
}

.news-title-small {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-card-link-small:hover .news-title-small {
    color: #006739;
}

.news-excerpt-small {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Mobile News Cards */
.news-card-mobile {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.news-card-mobile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.news-card-image-mobile {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f0f0f0;
}

.news-card-image-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card-mobile:hover .news-card-image-mobile img {
    transform: scale(1.08);
}

.news-card-content-mobile {
    padding: 20px;
}

.news-title-mobile {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.news-card-link:hover .news-title-mobile {
    color: #006739;
}

.news-excerpt-mobile {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .news-view-all {
        justify-content: center;
        margin-top: 20px;
    }
    
    .news-card-featured {
        margin-bottom: 30px;
    }
    
    .news-grid-small {
        gap: 15px;
    }
}

@media (max-width: 767px) {
    .news-card-content {
        padding: 20px;
    }
    
    .news-title {
        font-size: 20px;
    }
    
    .news-excerpt {
        font-size: 14px;
    }
    
    .news-category-badge {
        top: 15px;
        left: 15px;
        padding: 5px 14px;
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .news-card-content {
        padding: 15px;
    }
    
    .news-title {
        font-size: 18px;
    }
}

/* =========================
   SEARCH BOX ENHANCEMENT
   ========================= */
.search-results {
    max-width: 600px;
    margin: 20px auto 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.search-result-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
    display: block;
    color: #333;
    text-decoration: none;
}

.search-result-item:hover {
    background: #f8f8f8;
}

.search-result-item:last-child {
    border-bottom: none;
}

.result-type {
    font-size: 12px;
    color: #006739;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.search-result-item h4 {
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: 500;
}

.search-result-item:hover h4 {
    color: #006739;
}

.search-result-footer {
    padding: 10px 20px;
    background: #f8f8f8;
    text-align: center;
    color: #666;
}

.search-box .search-form form {
    position: relative;
}

.search-box .search-form input {
    transition: border-color 0.3s ease;
}

.search-box .search-form input:focus {
    border-color: #006739;
    outline: none;
}

/* =========================
   SKELETON LOADER
   ========================= */
.skeleton {
    animation: skeleton-loading 1.5s infinite ease-in-out;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-image {
    display: block;
    width: 100%;
}

.skeleton-text {
    display: block;
}

/* =========================
   RESPONSIVE
   ========================= */
@media only screen and (max-width: 991px) {
    .slider-wrapper {
        height: 70vh;
        min-height: 500px;
        max-height: 800px;
    }
    
    @supports (aspect-ratio: 16 / 9) {
        .slider-wrapper {
            aspect-ratio: 16 / 9;
            height: auto;
            min-height: 500px;
            max-height: 800px;
        }
    }
    
    .slider-title {
        font-size: 36px;
    }
    
    .slider-subtitle {
        font-size: 18px;
    }
    
    .countdown-timer {
        gap: 10px;
    }
    
    .countdown-item {
        padding: 10px 15px;
        min-width: 60px;
    }
    
    .countdown-number {
        font-size: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .slider-wrapper {
        height: 60vh;
        min-height: 400px;
        max-height: 650px;
    }
    
    @supports (aspect-ratio: 16 / 9) {
        .slider-wrapper {
            aspect-ratio: 16 / 9;
            height: auto;
            min-height: 400px;
            max-height: 650px;
        }
    }
    
    .slider-title {
        font-size: 28px;
    }
    
    .slider-subtitle {
        font-size: 16px;
    }
    
    .slider-btn {
        padding: 12px 30px;
        font-size: 14px;
    }
    
    .singel-publication .image {
        height: 300px;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 24px;
        bottom: 80px;
        right: 20px;
    }
    
    .countdown-timer {
        gap: 8px;
    }
    
    .countdown-item {
        padding: 8px 12px;
        min-width: 50px;
    }
    
    .countdown-number {
        font-size: 20px;
    }
    
    .countdown-label {
        font-size: 10px;
    }
    
    .cta-primary,
    .cta-secondary {
        padding: 12px 25px;
        font-size: 14px;
    }
    
    .slider-active .slick-prev,
    .slider-active .slick-next {
        width: 40px !important;
        height: 40px !important;
    }
    
    .slider-active .slick-prev i,
    .slider-active .slick-next i {
        font-size: 18px !important;
    }
    
    .slider-active .slick-prev {
        left: 10px !important;
    }
    
    .slider-active:hover .slick-prev {
        left: 10px !important;
    }
    
    .slider-active .slick-next {
        right: 10px !important;
    }
    
    .slider-active:hover .slick-next {
        right: 10px !important;
    }
    
    .slider-active .slick-dots {
        bottom: 20px !important;
    }
}

@media only screen and (max-width: 575px) {
    .singel-publication .image {
        height: 400px;
    }
    
    .slider-content {
        padding-top: 100px;
    }
}

/* =========================
   LEMBAGA & DEPARTEMEN SECTION
   ========================= */

.lembaga-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* Filter Info Badges */
.lembaga-filter-info {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.filter-badge {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.badge-lembaga {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    color: white;
}

.badge-pusat {
    background: linear-gradient(135deg, #ffc600 0%, #ffd700 100%);
    color: #333;
}

.badge-unit {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
}

.filter-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Lembaga Card */
.lembaga-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.lembaga-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.lembaga-card.coming-soon {
    opacity: 0.85;
}

.lembaga-card.coming-soon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Coming Soon Badge */
.coming-soon-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

/* Card Header */
.lembaga-card-header {
    padding: 30px 25px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.lembaga-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 8px 20px rgba(0, 103, 57, 0.3);
    transition: all 0.4s ease;
}

.lembaga-card:hover .lembaga-icon {
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 12px 30px rgba(0, 103, 57, 0.4);
}

.category-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-lembaga {
    background: #006739;
    color: white;
}

.badge-pusat {
    background: #ffc600;
    color: #333;
}

.badge-unit {
    background: #3498db;
    color: white;
}

/* Card Body */
.lembaga-card-body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lembaga-title {
    font-size: 20px;
    font-weight: 700;
    color: #006739;
    margin: 0 0 8px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.lembaga-card:hover .lembaga-title {
    color: #008749;
}

.lembaga-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin: 0 0 15px;
    line-height: 1.4;
}

.lembaga-description {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* Card Footer */
.lembaga-card-footer {
    padding: 0 25px 25px;
}

.lembaga-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 103, 57, 0.2);
}

.lembaga-link:hover {
    background: linear-gradient(135deg, #008749 0%, #00a859 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 103, 57, 0.3);
    color: white;
}

.lembaga-link.disabled {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    cursor: not-allowed;
    opacity: 0.7;
}

.lembaga-link.disabled:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.2);
}

.lembaga-link i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.lembaga-link:hover i {
    transform: translateX(5px);
}

/* Info Box */
.lembaga-info-box {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    color: white;
    padding: 30px;
    border-radius: 16px;
    display: flex;
    gap: 25px;
    box-shadow: 0 8px 30px rgba(0, 103, 57, 0.2);
}

.info-box-icon {
    font-size: 48px;
    color: #ffc600;
}

.info-box-content h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
    color: white;
}

.info-box-content p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
}

.info-box-content a {
    color: #ffc600;
    font-weight: 600;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.info-box-content a:hover {
    color: #ffd700;
}

/* Responsive */
@media (max-width: 991px) {
    .lembaga-filter-info {
        gap: 10px;
    }
    
    .filter-badge {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    .lembaga-card-header {
        padding: 25px 20px 15px;
    }
    
    .lembaga-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .lembaga-filter-info {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-badge {
        justify-content: center;
    }
    
    .lembaga-title {
        font-size: 18px;
    }
    
    .lembaga-subtitle {
        font-size: 12px;
    }
    
    .lembaga-description {
        font-size: 13px;
    }
    
    .lembaga-info-box {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .info-box-icon {
        font-size: 36px;
    }
    
    .info-box-content h4 {
        font-size: 18px;
    }
    
    .info-box-content p {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .lembaga-card-header {
        padding: 20px 15px 15px;
    }
    
    .lembaga-card-body,
    .lembaga-card-footer {
        padding: 20px 15px;
    }
    
    .lembaga-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    
    .category-badge {
        font-size: 10px;
        padding: 5px 12px;
    }
    
    .lembaga-title {
        font-size: 16px;
    }
}

/* =========================
   FORCE HIDE TEMPLATE SLIDER ARROWS
   ========================= */
/* Override template style.css arrows completely */
.slider-active .next.slick-arrow,
.slider-active .prev.slick-arrow,
.slider-active > .slick-arrow:not(button) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

/* Force show only button arrows */
.slider-active button.slick-prev,
.slider-active button.slick-next {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Prevent any stacking/overlap */
.slider-active {
    position: relative;
}

.slider-active button.slick-prev,
.slider-active button.slick-next {
    position: absolute !important;
}

/* =========================
   NUCLEAR OPTION - FINAL OVERRIDE
   Last resort to ensure NO template arrows show
   Must be at END of file for maximum specificity
   ========================= */

/* Hide EVERYTHING that's not a button element */
.slider-active *:not(button).slick-arrow,
.slider-active span.slick-arrow,
.slider-active div.slick-arrow,
.slider-active a.slick-arrow,
.slider-active i.slick-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -10000px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Specifically target template arrow classes */
.slider-active .next.slick-arrow,
.slider-active .prev.slick-arrow,
.slider-active > .next,
.slider-active > .prev {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    left: -10000px !important;
    top: -10000px !important;
}

/* Ensure button arrows always show */
.slider-active button[class*="slick-prev"],
.slider-active button[class*="slick-next"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
}

/* Prevent any animation or transition that might reveal hidden arrows */
.slider-active .slick-arrow:not(button) {
    transition: none !important;
    animation: none !important;
}


/* =========================
   TENTANG PAGE OPTIMIZATION
   Modern UI/UX Improvements
   ========================= */

/* About Content Modern */
.about-content-modern {
    padding-right: 30px;
}

.lead-text {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-features {
    margin-top: 30px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: translateX(10px);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i {
    font-size: 28px;
    color: white;
}

.feature-content h5 {
    font-size: 18px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 8px;
}

.feature-content p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* About Image Modern */
.about-image-modern {
    position: relative;
}

.image-wrapper {
    position: relative;
}

.image-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 103, 57, 0.3);
    text-align: center;
}

.badge-content i {
    font-size: 32px;
    color: #ffc600;
    margin-bottom: 10px;
}

.badge-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0 0 5px;
}

.badge-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Why Choose Cards */
.why-choose-card {
    background: white;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    margin-bottom: 30px;
}

.why-choose-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.why-choose-card .card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
}

.why-choose-card:hover .card-icon {
    transform: rotateY(360deg);
}

.why-choose-card .card-icon i {
    font-size: 36px;
    color: white;
}

.why-choose-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
}

.why-choose-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Visi Misi Tabs */
.visi-misi-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.tab-btn {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 15px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.tab-btn i {
    font-size: 20px;
}

.tab-btn:hover {
    border-color: #006739;
    color: #006739;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 103, 57, 0.2);
}

.tab-btn.active {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-color: #006739;
    color: white;
    box-shadow: 0 8px 20px rgba(0, 103, 57, 0.3);
}

/* Tab Content Wrapper */
.tab-content-wrapper {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Visi Card */
.visi-card {
    background: white;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card-icon-large {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}

.card-icon-large i {
    font-size: 48px;
    color: white;
}

.visi-statement h4 {
    font-size: 28px;
    font-weight: 700;
    color: #006739;
    line-height: 1.5;
    margin: 0;
}

.visi-description p {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Misi & Tujuan Cards */
.misi-card,
.tujuan-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.misi-item,
.tujuan-item {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: all 0.3s ease;
    height: 100%;
}

.misi-item:hover,
.tujuan-item:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.misi-icon,
.tujuan-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.misi-icon i,
.tujuan-icon i {
    font-size: 24px;
    color: white;
}

.misi-content,
.tujuan-content {
    flex: 1;
}

.misi-number,
.tujuan-number {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #006739;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}

.misi-content p,
.tujuan-content p {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin: 0;
}

/* Motto & Nilai Cards */
.motto-card,
.nilai-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 100%;
}

.card-icon-medium {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.card-icon-medium i {
    font-size: 36px;
    color: white;
}

.motto-statement h4 {
    font-size: 24px;
    font-weight: 700;
    color: #006739;
    line-height: 1.5;
}

.nilai-list {
    text-align: left;
}

.nilai-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.nilai-item:hover {
    background: #006739;
    color: white;
    transform: translateX(10px);
}

.nilai-item i {
    font-size: 24px;
    color: #006739;
}

.nilai-item:hover i {
    color: #ffc600;
}

.nilai-item span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.nilai-item:hover span {
    color: white;
}

/* Responsive */
@media (max-width: 991px) {
    .about-content-modern {
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .feature-item {
        padding: 15px;
    }
    
    .image-badge {
        bottom: 20px;
        right: 20px;
        padding: 20px;
    }
    
    .why-choose-card {
        margin-bottom: 20px;
    }
    
    .visi-misi-tabs {
        gap: 10px;
    }
    
    .tab-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .lead-text {
        font-size: 16px;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon {
        margin: 0 auto;
    }
    
    .image-badge {
        position: static;
        margin-top: 20px;
    }
    
    .visi-card,
    .misi-card,
    .tujuan-card,
    .motto-card,
    .nilai-card {
        padding: 30px 20px;
    }
    
    .visi-statement h4 {
        font-size: 22px;
    }
    
    .misi-item,
    .tujuan-item {
        flex-direction: column;
        text-align: center;
    }
    
    .misi-icon,
    .tujuan-icon {
        margin: 0 auto;
    }
    
    .tab-btn span {
        display: none;
    }
    
    .tab-btn {
        padding: 12px;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .why-choose-card {
        padding: 25px 20px;
    }
    
    .visi-card {
        padding: 25px 15px;
    }
    
    .card-icon-large {
        width: 80px;
        height: 80px;
    }
    
    .card-icon-large i {
        font-size: 36px;
    }
}

/* =========================
   AKREDITASI SECTION OPTIMIZATION
   Modern Certificate Display
   ========================= */

/* Akreditasi Preview Card */
.akreditasi-preview-card {
    position: relative;
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Grade Badge */
.grade-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.badge-content {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 20px;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 103, 57, 0.3);
}

.grade-letter {
    font-size: 36px;
    font-weight: 900;
    color: white;
    line-height: 1;
}

.grade-label {
    font-size: 12px;
    font-weight: 700;
    color: #ffc600;
    margin-top: 5px;
}

/* Certificate Frame */
.certificate-image-wrapper {
    margin-bottom: 25px;
}

.certificate-frame {
    position: relative;
    border: 8px solid #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.certificate-frame:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* Certificate Info Card */
.certificate-info-card {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 25px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.info-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon i {
    font-size: 28px;
    color: #ffc600;
}

.info-content {
    flex: 1;
}

.info-content h5 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-content h4 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0 0 10px;
}

.info-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.info-meta span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 6px;
}

.info-meta i {
    color: #ffc600;
}

/* Certificate Actions */
.certificate-actions {
    display: flex;
    gap: 15px;
}

.download-btn,
.view-btn {
    flex: 1;
    padding: 15px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
}

.download-btn {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 103, 57, 0.3);
}

.download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 103, 57, 0.4);
    color: white;
}

.view-btn {
    background: white;
    color: #006739;
    border: 2px solid #006739;
}

.view-btn:hover {
    background: #006739;
    color: white;
    transform: translateY(-3px);
}

/* Akreditasi Info Box */
.akreditasi-info-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 30px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-left: 5px solid #006739;
}

.info-icon-large {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.info-icon-large i {
    font-size: 32px;
    color: white;
}

.info-text h4 {
    font-size: 20px;
    font-weight: 700;
    color: #006739;
    margin: 0 0 10px;
}

.info-text p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Certificates List */
.certificates-list {
    margin-bottom: 30px;
}

.list-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.certificate-item {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
}

.certificate-item:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border-color: #006739;
}

.certificate-item.active {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-color: #006739;
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(0, 103, 57, 0.3);
}

.item-icon {
    width: 50px;
    height: 50px;
    background: #006739;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.certificate-item.active .item-icon {
    background: rgba(255, 255, 255, 0.2);
}

.item-icon i {
    font-size: 24px;
    color: white;
}

.item-content {
    flex: 1;
}

.item-content h6 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 0 0 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.certificate-item.active .item-content h6 {
    color: rgba(255, 255, 255, 0.8);
}

.item-content p {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px;
}

.certificate-item.active .item-content p {
    color: white;
}

.item-meta {
    display: flex;
    gap: 10px;
}

.grade-mini,
.year-mini {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.grade-mini {
    background: #ffc600;
    color: #333;
}

.certificate-item.active .grade-mini {
    background: white;
    color: #006739;
}

.year-mini {
    background: #e0e0e0;
    color: #666;
}

.certificate-item.active .year-mini {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.item-arrow {
    font-size: 18px;
    color: #ccc;
    transition: all 0.3s ease;
}

.certificate-item:hover .item-arrow {
    transform: translateX(5px);
    color: #006739;
}

.certificate-item.active .item-arrow {
    color: white;
}

/* Akreditasi Stats */
.akreditasi-stats {
    display: flex;
    gap: 15px;
}

.stat-item {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i {
    font-size: 24px;
    color: white;
}

.stat-content h4 {
    font-size: 32px;
    font-weight: 900;
    color: #006739;
    margin: 0;
    line-height: 1;
}

.stat-content p {
    font-size: 13px;
    color: #666;
    margin: 5px 0 0;
}

/* Footer Info */
.akreditasi-footer-info {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 30px;
    border-radius: 16px;
    display: flex;
    gap: 25px;
    align-items: center;
}

.footer-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-icon i {
    font-size: 32px;
    color: #ffc600;
}

.footer-content h5 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0 0 10px;
}

.footer-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    margin: 0;
}

.footer-content a {
    color: #ffc600;
    font-weight: 600;
    text-decoration: underline;
}

.footer-content a:hover {
    color: white;
}

/* Responsive */
@media (max-width: 991px) {
    .grade-badge {
        position: static;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }
    
    .akreditasi-info-box {
        flex-direction: column;
        text-align: center;
    }
    
    .info-icon-large {
        margin: 0 auto;
    }
    
    .akreditasi-stats {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .akreditasi-preview-card {
        padding: 20px;
    }
    
    .certificate-frame {
        border-width: 4px;
    }
    
    .certificate-info-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .info-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .certificate-actions {
        flex-direction: column;
    }
    
    .certificate-item {
        padding: 15px;
    }
    
    .item-content h6 {
        font-size: 12px;
    }
    
    .item-content p {
        font-size: 14px;
    }
    
    .akreditasi-footer-info {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
}

@media (max-width: 575px) {
    .badge-content {
        width: 70px;
        height: 70px;
        padding: 15px;
    }
    
    .grade-letter {
        font-size: 28px;
    }
    
    .grade-label {
        font-size: 10px;
    }
    
    .info-content h4 {
        font-size: 18px;
    }
    
    .download-btn,
    .view-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* =========================
   FAKULTAS & PRODI OPTIMIZATION
   Modern UI/UX for Faculty & Study Program Pages
   ========================= */

/* =========================
   1. HALAMAN UTAMA FAKULTAS
   ========================= */

/* Fakultas Cards */
.fakultas-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    height: 100%;
}

.fakultas-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.fakultas-image-wrapper {
    position: relative;
    overflow: hidden;
    height: 250px;
}

.fakultas-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.fakultas-card:hover .fakultas-image-wrapper img {
    transform: scale(1.1);
}

.fakultas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fakultas-card:hover .fakultas-overlay {
    opacity: 1;
}

.fakultas-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.fakultas-icon i {
    font-size: 36px;
    color: white;
}

.fakultas-content {
    padding: 30px;
}

.fakultas-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
    line-height: 1.3;
}

.fakultas-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.prodi-list {
    margin-bottom: 25px;
}

.prodi-list h6 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prodi-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prodi-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #555;
}

.prodi-list li i {
    color: #006739;
    font-size: 16px;
}

.fakultas-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.fakultas-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 103, 57, 0.3);
    color: white;
}

.fakultas-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Fakultas Stats */
.fakultas-stats-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.fakultas-stat-item {
    background: white;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    min-width: 220px;
}

.fakultas-stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.fakultas-stat-item .stat-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fakultas-stat-item .stat-icon i {
    font-size: 28px;
    color: white;
}

.fakultas-stat-item .stat-content h4 {
    font-size: 32px;
    font-weight: 900;
    color: #006739;
    margin: 0;
    line-height: 1;
}

.fakultas-stat-item .stat-content p {
    font-size: 14px;
    color: #666;
    margin: 5px 0 0;
}

/* Fakultas CTA */
.fakultas-cta {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.cta-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cta-icon i {
    font-size: 32px;
    color: #ffc600;
}

.cta-content {
    flex: 1;
}

.cta-content h4 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0 0 8px;
}

.cta-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.cta-action .cta-btn {
    padding: 15px 35px;
    background: white;
    color: #006739;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-action .cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* =========================
   2. HALAMAN FAKULTAS DETAIL
   ========================= */

/* Faculty Overview Card */
.faculty-overview-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.overview-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.overview-icon i {
    font-size: 48px;
    color: white;
}

.faculty-overview-card h3 {
    font-size: 28px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
}

.faculty-overview-card .lead {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

.overview-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    background: #f8f9fa;
    border-radius: 10px;
}

.stat-box i {
    font-size: 32px;
    color: #006739;
}

.stat-box h5 {
    font-size: 28px;
    font-weight: 900;
    color: #006739;
    margin: 0;
    line-height: 1;
}

.stat-box p {
    font-size: 13px;
    color: #666;
    margin: 3px 0 0;
}

/* Prodi Card Modern */
.prodi-card-modern {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.prodi-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.akreditasi-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.badge-grade {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: white;
    line-height: 1;
}

.badge-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 5px;
}

.prodi-image-wrapper {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.prodi-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.prodi-card-modern:hover .prodi-image-wrapper img {
    transform: scale(1.1);
}

.prodi-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.prodi-code {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
}

.prodi-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prodi-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
}

.prodi-description {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.prodi-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

.info-item i {
    font-size: 22px;
    color: #006739;
}

.info-item .label {
    display: block;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item .value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.prodi-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.highlight-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 2px solid;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.highlight-tag i {
    font-size: 10px;
}

.prodi-detail-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: auto;
}

.prodi-detail-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: white;
}

/* Visi Misi Faculty */
.visi-misi-faculty {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 16px;
}

.vm-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 20px;
    height: 100%;
}

.vm-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vm-icon i {
    font-size: 28px;
    color: white;
}

.vm-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
}

.vm-content p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

.vm-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vm-content ul li {
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    position: relative;
    padding-left: 25px;
}

.vm-content ul li:before {
    content: "\f00c";
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    color: #006739;
}

/* Faculty CTA Footer */
.faculty-cta-footer {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.faculty-cta-footer .cta-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0 0 10px;
}

.faculty-cta-footer .cta-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.faculty-cta-footer .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: white;
    color: #006739;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.faculty-cta-footer .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* =========================
   3. HALAMAN DETAIL PRODI
   ========================= */

/* Prodi Header */
.prodi-header-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.prodi-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.prodi-badge {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    color: white;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.prodi-title-wrapper h2 {
    font-size: 28px;
    font-weight: 700;
    color: #006739;
    margin: 0 0 5px;
}

.prodi-subtitle {
    font-size: 15px;
    color: #999;
    margin: 0;
}

.prodi-header-right .quick-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.prodi-header-right .info-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 10px;
}

.prodi-header-right .info-box i {
    font-size: 24px;
    color: #006739;
}

.prodi-header-right .info-box .label {
    display: block;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
}

.prodi-header-right .info-box strong {
    display: block;
    font-size: 16px;
    color: #333;
}

/* Prodi Tabs Modern */
.prodi-tabs-modern {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.tab-btn-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    transition: all 0.3s ease;
}

.tab-btn-modern:hover {
    border-color: #006739;
    color: #006739;
    transform: translateY(-3px);
}

.tab-btn-modern.active {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-color: #006739;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 103, 57, 0.3);
}

.tab-btn-modern i {
    font-size: 20px;
}

/* Tab Content Modern */
.tab-content-modern {
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.content-title {
    font-size: 26px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #006739;
}

.lead-text {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Profil Lulusan Card */
.profil-lulusan-card {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
}

.profil-lulusan-card:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.profil-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.profil-icon i {
    font-size: 32px;
    color: white;
}

.profil-lulusan-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 8px;
}

.profil-lulusan-card p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* Kompetensi List */
.kompetensi-list {
    display: grid;
    gap: 15px;
}

.kompetensi-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.kompetensi-item:hover {
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transform: translateX(10px);
}

.kompetensi-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kompetensi-icon i {
    font-size: 24px;
    color: white;
}

.kompetensi-content h6 {
    font-size: 16px;
    font-weight: 700;
    color: #006739;
    margin: 0 0 5px;
}

.kompetensi-content p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* Kurikulum Timeline */
.kurikulum-timeline {
    position: relative;
    padding-left: 40px;
}

.kurikulum-timeline:before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-marker {
    position: absolute;
    left: -40px;
    top: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 103, 57, 0.3);
}

.timeline-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.semester-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.semester-header h4 {
    font-size: 20px;
    font-weight: 700;
    color: #006739;
    margin: 0;
}

.semester-meta {
    display: flex;
    gap: 10px;
}

.sks-badge {
    padding: 6px 15px;
    background: #006739;
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.fokus-badge {
    padding: 6px 15px;
    background: #f8f9fa;
    color: #666;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.matkul-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.matkul-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.matkul-chip:hover {
    background: #e0e0e0;
}

.mk-name {
    font-size: 13px;
    color: #333;
    flex: 1;
}

.mk-sks {
    font-size: 12px;
    font-weight: 700;
    color: #006739;
    background: white;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Fasilitas Card Modern */
.fasilitas-card-modern {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
    height: 100%;
}

.fasilitas-card-modern:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.fasilitas-icon-modern {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fasilitas-icon-modern i {
    font-size: 28px;
    color: white;
}

.fasilitas-content-modern h5 {
    font-size: 18px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
}

.fasilitas-content-modern ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fasilitas-content-modern ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: #666;
}

.fasilitas-content-modern ul li i {
    color: #006739;
    font-size: 14px;
}

/* Karir Sectors */
.karir-sectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.sector-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.sector-card:hover {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.sector-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sector-icon i {
    font-size: 32px;
    color: white;
}

.sector-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 15px;
}

.sector-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sector-card ul li {
    padding: 6px 0;
    font-size: 14px;
    color: #666;
    position: relative;
    padding-left: 20px;
}

.sector-card ul li:before {
    content: "\f105";
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    color: #006739;
}

.alumni-note {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.alumni-note i {
    font-size: 32px;
    color: #006739;
}

.alumni-note p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Prodi CTA Footer */
.prodi-cta-footer {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 30px 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
}

.cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-left i {
    font-size: 48px;
    color: #ffc600;
}

.cta-left h4 {
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin: 0 0 5px;
}

.cta-left p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.cta-right {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-daftar,
.btn-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-daftar {
    background: white;
    color: #006739;
}

.btn-daftar:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

.btn-info {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
}

.btn-info:hover {
    background: white;
    color: #006739;
}

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

@media (max-width: 991px) {
    .fakultas-stats-wrapper {
        gap: 15px;
    }
    
    .fakultas-stat-item {
        min-width: 180px;
        padding: 20px;
    }
    
    .fakultas-cta,
    .faculty-cta-footer,
    .prodi-cta-footer {
        flex-direction: column;
        text-align: center;
    }
    
    .prodi-header-card {
        flex-direction: column;
        text-align: center;
    }
    
    .prodi-header-left {
        flex-direction: column;
    }
    
    .quick-info {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .fakultas-card {
        margin-bottom: 20px;
    }
    
    .prodi-tabs-modern {
        flex-direction: column;
    }
    
    .tab-btn-modern {
        width: 100%;
        justify-content: center;
    }
    
    .content-card {
        padding: 25px;
    }
    
    .kurikulum-timeline {
        padding-left: 30px;
    }
    
    .timeline-marker {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .semester-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .matkul-grid {
        grid-template-columns: 1fr;
    }
    
    .karir-sectors {
        grid-template-columns: 1fr;
    }
    
    .cta-right {
        width: 100%;
    }
    
    .btn-daftar,
    .btn-info {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .fakultas-content {
        padding: 20px;
    }
    
    .prodi-info-grid {
        grid-template-columns: 1fr;
    }
    
    .overview-stats {
        flex-direction: column;
        gap: 15px;
    }
    
    .stat-box {
        width: 100%;
    }
    
    .vm-card {
        flex-direction: column;
        text-align: center;
    }
    
    .vm-icon {
        margin: 0 auto;
    }
}

/* =========================
   MAGISTER PAGE STYLES
   Additional styles for magister program
   ========================= */

/* Info Box Small - for magister highlights */
.info-box-small {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid #006739;
    transition: all 0.3s ease;
}

.info-box-small:hover {
    background: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.info-box-small h6 {
    font-size: 16px;
    font-weight: 700;
    color: #006739;
    margin-bottom: 10px;
}

.info-box-small h6 i {
    margin-right: 8px;
    color: #ffc600;
}

.info-box-small p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.info-box-small ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.info-box-small ul li {
    padding: 5px 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-box-small ul li i {
    color: #006739;
    font-size: 14px;
}

/* Responsive for info-box-small */
@media (max-width: 767px) {
    .info-box-small {
        margin-bottom: 15px;
    }
}

/* =========================
   PMB PAGE STYLES
   ========================= */
.pmb-intro {
    padding: 90px 0;
    background: linear-gradient(135deg, rgba(7, 41, 77, 0.07), rgba(255, 198, 0, 0.12));
}

.pmb-intro__content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.3;
    margin-bottom: 20px;
}

.pmb-intro__content p {
    font-size: 18px;
    color: #35516f;
    line-height: 1.7;
    margin-bottom: 30px;
}

.pmb-intro__stats {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.pmb-intro__stats div {
    min-width: 130px;
}

.pmb-intro__stats strong {
    display: block;
    font-size: 32px;
    color: #ffc600;
    font-weight: 700;
}

.pmb-intro__stats span {
    font-size: 14px;
    color: #07294d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pmb-intro__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.pmb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.pmb-btn--primary {
    background: linear-gradient(135deg, #ffc600, #ffe27a);
    color: #07294d;
    box-shadow: 0 16px 32px rgba(7, 41, 77, 0.16);
}

.pmb-btn--primary:hover,
.pmb-btn--primary:focus {
    background: linear-gradient(135deg, #ffcf26, #ffe88f);
    color: #07294d;
    transform: translateY(-2px);
}

.pmb-btn--ghost {
    background: transparent;
    border: 2px solid rgba(7, 41, 77, 0.4);
    color: #07294d;
}

.pmb-btn--ghost:hover,
.pmb-btn--ghost:focus {
    border-color: #07294d;
    color: #07294d;
    transform: translateY(-2px);
}

.pmb-intro__card {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 18px 45px rgba(7, 41, 77, 0.12);
    border: 1px solid rgba(7, 41, 77, 0.08);
}

.pmb-intro__card h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #07294d;
}

.pmb-intro__card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.pmb-intro__card li {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(7, 41, 77, 0.1);
    font-weight: 600;
    color: #07294d;
}

.pmb-intro__card li span:nth-child(2) {
    color: #ffc600;
}

.pmb-intro__note {
    font-size: 14px;
    color: #4f5f71;
    line-height: 1.6;
    margin: 0;
}

.pmb-highlight-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 14px 35px rgba(7, 41, 77, 0.1);
    border-top: 4px solid #ffc600;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pmb-highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(7, 41, 77, 0.12);
}

.pmb-highlight-card__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: rgba(255, 198, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07294d;
    font-size: 28px;
}

.pmb-highlight-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #07294d;
}

.pmb-highlight-card p {
    color: #4f5f71;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.pmb-steps {
    background: #ffffff;
}

.pmb-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pmb-step-list li {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(7, 41, 77, 0.12);
}

.pmb-step-list li:last-child {
    border-bottom: none;
}

.pmb-step-list__number {
    width: 48px;
    height: 48px;
    background: rgba(255, 198, 0, 0.2);
    color: #07294d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.pmb-step-list h4 {
    font-size: 18px;
    color: #07294d;
    margin-bottom: 6px;
}

.pmb-step-list p {
    font-size: 15px;
    color: #4f5f71;
    margin: 0;
    line-height: 1.6;
}

.pmb-gallery {
    background: linear-gradient(135deg, rgba(7, 41, 77, 0.05), rgba(255, 198, 0, 0.12));
}

.pmb-poster-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(7, 41, 77, 0.12);
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pmb-poster-card__image {
    position: relative;
    width: 100%;
    padding-top: 130%;
    overflow: hidden;
}

.pmb-poster-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pmb-poster-card__caption {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: rgba(7, 41, 77, 0.04);
    font-weight: 600;
    color: #07294d;
}

.pmb-support {
    background: linear-gradient(135deg, rgba(7, 41, 77, 0.05), rgba(255, 198, 0, 0.18));
    color: #07294d;
}

.pmb-support p {
    color: #4f5f71;
}

.pmb-support-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 20px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.12);
    box-shadow: 0 12px 26px rgba(7, 41, 77, 0.08);
    margin-bottom: 20px;
    color: #07294d;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.pmb-support-card:hover,
.pmb-support-card:focus {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(7, 41, 77, 0.12);
    color: #07294d;
}

.pmb-support-card i {
    font-size: 20px;
    color: #ffc600;
}

.pmb-support-card__label {
    font-size: 16px;
    font-weight: 600;
}

.pmb-support-card__desc {
    font-size: 14px;
    color: #4f5f71;
}

@media (max-width: 991px) {
    .pmb-intro {
        padding: 70px 0;
    }

    .pmb-intro__content h2 {
        font-size: 30px;
    }

    .pmb-intro__stats {
        gap: 18px;
    }

    .pmb-intro__card {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .pmb-intro__content h2 {
        font-size: 26px;
    }

    .pmb-btn {
        width: 100%;
        justify-content: center;
    }

    .pmb-step-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    .pmb-step-list__number {
        margin-bottom: 10px;
    }
}

/* =========================
   TOMBOL PENDAFTARAN KHUSUS
   Special registration button in navigation
   ========================= */

/* Navigation Register Button */
.nav-item-register {
    margin-left: 15px !important;
}

.btn-register {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 28px !important;
    background: linear-gradient(135deg, #ffc600 0%, #ffb700 100%) !important;
    color: #006739 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 15px rgba(255, 198, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    border: 2px solid transparent !important;
}

.btn-register:hover {
    background: linear-gradient(135deg, #006739 0%, #008749 100%) !important;
    border-color: #ffc600 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(255, 198, 0, 0.6) !important;
    color: #ffc600 !important;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.btn-register span {
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mobile Register Button */
.register-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.btn-register-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ffc600 0%, #ffb700 100%);
    color: #006739;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(255, 198, 0, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    border: 2px solid transparent;
}

.btn-register-mobile:hover {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-color: #ffc600;
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(255, 198, 0, 0.6);
    color: #ffc600;
}

/* Desktop - Hide mobile button */
@media (min-width: 992px) {
    .btn-register-mobile {
        display: none;
    }
}

/* Tablet & Mobile - Adjust desktop button */
@media (max-width: 991px) {
    .btn-register {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
    
    .nav-item-register {
        margin-left: 0 !important;
    }
}

/* Mobile Menu - Full width button */
@media (max-width: 991px) {
    .navbar-collapse.show .nav-item-register {
        margin: 15px 0 !important;
        text-align: center;
    }
    
    .navbar-collapse.show .btn-register {
        width: 100%;
        justify-content: center;
        padding: 15px 24px !important;
    }
    
    .navbar-collapse.show .btn-register span {
        display: inline;
    }
}

/* Sticky Header Adjustment */
.header-sticky .btn-register {
    padding: 10px 20px !important;
}

/* =========================
   FIX: REGISTER BUTTON ALIGNMENT
   Center button vertically with menu items
   ========================= */

/* Override previous styles for better alignment */
.navigation-2 .navbar-nav .nav-item-register {
    display: flex;
    align-items: center;
    margin-left: 15px !important;
}

.navigation-2 .navbar-nav .nav-item-register .btn-register {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 10px 24px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    height: auto !important;
}

/* Ensure navbar items are aligned */
.navigation-2 .navbar-nav {
    align-items: center !important;
}

.navigation-2 .navbar-nav > li {
    display: flex;
    align-items: center;
}

.navigation-2 .navbar-nav > li > a {
    display: flex;
    align-items: center;
}

/* Mobile alignment fix */
@media (max-width: 991px) {
    .navigation-2 .navbar-nav .nav-item-register {
        margin: 10px 0 !important;
    }
    
    .navigation-2 .navbar-nav {
        align-items: stretch !important;
    }
    
    .navigation-2 .navbar-nav > li {
        display: block;
    }
}

/* =========================
   LEMBAGA HOME SECTION
   Modern cards for institutions/services
   ========================= */

/* Lembaga Card */
.lembaga-card-home {
    display: block;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    text-decoration: none;
    height: 100%;
    position: relative;
}

.lembaga-card-home:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.lembaga-card-home:hover .lembaga-card-body h4 {
    color: var(--lembaga-color, #006739);
}

/* Card Header */
.lembaga-card-header {
    padding: 30px 30px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.lembaga-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.lembaga-card-home:hover .lembaga-icon {
    transform: rotateY(360deg);
}

.lembaga-icon i {
    font-size: 32px;
    color: white;
}

.external-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
}

/* Card Body */
.lembaga-card-body {
    padding: 0 30px 20px;
}

.lembaga-card-body h4 {
    font-size: 24px;
    font-weight: 900;
    color: #333;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.lembaga-card-body h5 {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.4;
}

.lembaga-card-body p {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* Card Footer */
.lembaga-card-footer {
    padding: 20px 30px;
    border-top: 2px solid #f8f9fa;
    transition: all 0.3s ease;
}

.access-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #006739;
}

.lembaga-card-home:hover .access-link {
    color: var(--lembaga-color, #006739);
}

.access-link i {
    font-size: 16px;
    transition: all 0.3s ease;
}

.lembaga-card-home:hover .access-link i {
    transform: translateX(5px);
}

/* CTA Section */
.lembaga-cta {
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.lembaga-cta p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 991px) {
    .lembaga-card-home {
        margin-bottom: 20px;
    }
    
    .lembaga-card-body h4 {
        font-size: 20px;
    }
    
    .lembaga-card-body h5 {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .lembaga-card-header {
        padding: 25px 25px 15px;
    }
    
    .lembaga-icon {
        width: 60px;
        height: 60px;
    }
    
    .lembaga-icon i {
        font-size: 28px;
    }
    
    .lembaga-card-body {
        padding: 0 25px 15px;
    }
    
    .lembaga-card-footer {
        padding: 15px 25px;
    }
}

@media (max-width: 575px) {
    .lembaga-card-body h4 {
        font-size: 18px;
    }
}

/* =========================
   LAYANAN PAGE STYLES
   Services and Information Systems
   ========================= */

/* Category Filter */
.category-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: white;
    border-color: #006739;
    color: #006739;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    border-color: #006739;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 103, 57, 0.3);
}

.filter-btn i {
    font-size: 16px;
}

/* Layanan Card */
.layanan-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.layanan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Status Badge */
.status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active {
    background: #27ae60;
    color: white;
}

.status-badge.coming-soon {
    background: #f39c12;
    color: white;
}

.status-badge i {
    font-size: 12px;
}

/* Card Header */
.layanan-card-header {
    padding: 30px;
    text-align: center;
    background: linear-gradient(180deg, #f8f9fa 0%, white 100%);
}

.layanan-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.4s ease;
}

.layanan-card:hover .layanan-icon {
    transform: rotateY(360deg) scale(1.1);
}

.layanan-icon i {
    font-size: 36px;
    color: white;
}

/* Card Body */
.layanan-card-body {
    padding: 20px 30px;
    flex: 1;
}

.layanan-card-body h4 {
    font-size: 22px;
    font-weight: 900;
    color: #333;
    margin-bottom: 8px;
}

.layanan-card-body h5 {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.4;
}

.layanan-card-body p {
    font-size: 14px;
    color: #999;
    line-height: 1.6;
    margin: 0;
}

/* Card Footer */
.layanan-card-footer {
    padding: 20px 30px;
    border-top: 2px solid #f8f9fa;
}

.access-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.access-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: white;
}

.access-btn i {
    font-size: 16px;
}

.access-btn.disabled {
    background: #95a5a6 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.access-btn.disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Info Box */
.layanan-info-box {
    background: linear-gradient(135deg, #006739 0%, #008749 100%);
    padding: 30px;
    border-radius: 16px;
    display: flex;
    gap: 25px;
    align-items: center;
    box-shadow: 0 8px 30px rgba(0, 103, 57, 0.3);
}

.layanan-info-box .info-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.layanan-info-box .info-icon i {
    font-size: 28px;
    color: #ffc600;
}

.layanan-info-box .info-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.layanan-info-box .info-content p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.7;
    margin: 0;
}

.layanan-info-box .info-content a {
    color: #ffc600;
    font-weight: 700;
    text-decoration: underline;
}

.layanan-info-box .info-content a:hover {
    color: white;
}

/* Responsive */
@media (max-width: 991px) {
    .category-filter {
        gap: 8px;
        padding: 15px;
    }
    
    .filter-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    .layanan-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .filter-btn span {
        display: none;
    }
    
    .filter-btn {
        padding: 10px 15px;
        justify-content: center;
    }
    
    .filter-btn.active span {
        display: inline;
    }
    
    .layanan-card-header {
        padding: 25px;
    }
    
    .layanan-icon {
        width: 70px;
        height: 70px;
    }
    
    .layanan-icon i {
        font-size: 32px;
    }
    
    .layanan-card-body {
        padding: 15px 25px;
    }
    
    .layanan-card-footer {
        padding: 15px 25px;
    }
    
    .layanan-info-box {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
}

@media (max-width: 575px) {
    .category-filter {
        gap: 6px;
    }
    
    .filter-btn {
        padding: 8px 12px;
    }
    
    .layanan-card-body h4 {
        font-size: 20px;
    }
    
    .layanan-card-body h5 {
        font-size: 14px;
    }
}

/* =========================
   TESTIMONIAL AVATAR FIX
   Make avatars circular like before
   ========================= */

/* Circular avatar styling */
.testimonial-thum img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 4px solid #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Adjust quote icon position for smaller avatar */
.testimonial-thum .quote {
    bottom: -5px !important;
    right: -5px !important;
    width: 35px !important;
    height: 35px !important;
}

.testimonial-thum .quote i {
    font-size: 16px !important;
    line-height: 35px !important;
}

/* Ensure testimonial thumb container is appropriate size */
.testimonial-thum {
    width: 100px !important;
    height: 100px !important;
    position: relative;
    flex-shrink: 0;
}

/* Adjust testimonial card layout for smaller avatar */
.singel-testimonial {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.testimonial-cont {
    flex: 1;
}

@media (max-width: 767px) {
    .singel-testimonial {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* =========================
   KONTAK PAGE STYLES
   Contact page styling
   ========================= */

/* Contact Info Cards */
.contact-info-section {
    background: white;
}

.contact-info-card {
    background: white;
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
}

.contact-info-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
}

.contact-info-card:hover .contact-icon {
    transform: rotateY(360deg) scale(1.1);
}

.contact-icon i {
    font-size: 36px;
    color: white;
}

.contact-info-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.contact-details p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 8px;
}

.contact-details a {
    color: #006739;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-details a:hover {
    color: #008749;
    text-decoration: underline;
}

/* Department Cards */
.departments-section {
    background: #f8f9fa;
}

.department-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.dept-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.dept-header i {
    font-size: 32px;
    color: #006739;
}

.dept-header h4 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.dept-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.dept-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dept-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dept-item i {
    font-size: 16px;
    color: #006739;
    width: 20px;
}

.dept-item a {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    transition: all 0.3s ease;
}

.dept-item a:hover {
    color: #006739;
}

/* Map Container */
.map-container {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Social Media Cards */
.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    text-decoration: none;
    text-align: center;
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    background: var(--social-color);
}

.social-card:hover .social-icon {
    background: white;
    color: var(--social-color);
}

.social-card:hover h4,
.social-card:hover .follow-text {
    color: white;
}

.social-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--social-color);
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.social-icon i {
    font-size: 36px;
    color: white;
}

.social-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.follow-text {
    font-size: 14px;
    color: #999;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 991px) {
    .contact-info-card {
        margin-bottom: 20px;
    }
    
    .department-card {
        margin-bottom: 20px;
    }
    
    .social-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .contact-icon {
        width: 70px;
        height: 70px;
    }
    
    .contact-icon i {
        font-size: 32px;
    }
    
    .dept-header {
        flex-direction: column;
        text-align: center;
    }
    
    .dept-item {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================
   SLIDER ARROW FIX - FINAL
   Complete fix for both left and right arrows
   ========================= */

/* Remove ALL previous arrow hiding behaviors */
.slider-active .slick-arrow:not(button) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
}

/* Force BOTH button arrows to always show */
.slider-active button.slick-prev,
.slider-active button.slick-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 100 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: all 0.3s ease !important;
}

/* Position left arrow */
.slider-active button.slick-prev {
    left: 30px !important;
    right: auto !important;
}

/* Position right arrow */
.slider-active button.slick-next {
    right: 30px !important;
    left: auto !important;
}

/* Icon styling */
.slider-active button.slick-prev i,
.slider-active button.slick-next i {
    font-size: 24px !important;
    color: white !important;
    display: block !important;
    line-height: 1 !important;
}

/* Remove any ::before content */
.slider-active button.slick-prev::before,
.slider-active button.slick-next::before {
    content: '' !important;
    display: none !important;
}

/* Hover state */
.slider-active button.slick-prev:hover,
.slider-active button.slick-next:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Focus state for accessibility */
.slider-active button.slick-prev:focus,
.slider-active button.slick-next:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Disabled state */
.slider-active button.slick-prev.slick-disabled,
.slider-active button.slick-next.slick-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .slider-active button.slick-prev,
    .slider-active button.slick-next {
        width: 40px !important;
        height: 40px !important;
    }
    
    .slider-active button.slick-prev {
        left: 10px !important;
    }
    
    .slider-active button.slick-next {
        right: 10px !important;
    }
    
    .slider-active button.slick-prev i,
    .slider-active button.slick-next i {
        font-size: 18px !important;
    }
}

/* Override any conflicting hover states from parent */
.slider-active:hover button.slick-prev,
.slider-active:hover button.slick-next,
.slider-active button.slick-prev:not(:hover),
.slider-active button.slick-next:not(:hover) {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Ensure no hiding on any state */
.slider-active button.slick-prev,
.slider-active button.slick-next {
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================
   CUSTOM SLIDER ARROWS - NEW APPROACH
   Simple, clean arrows with Unicode symbols
   ========================= */

/* Hide ALL default slick arrows */
.slider-active .slick-arrow {
    display: none !important;
}

/* Show ONLY our custom arrows */
.slider-active .custom-slider-prev,
.slider-active .custom-slider-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 60px !important;
    background: rgba(0, 103, 57, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Left arrow position */
.slider-active .custom-slider-prev {
    left: 20px !important;
}

/* Right arrow position */
.slider-active .custom-slider-next {
    right: 20px !important;
}

/* Arrow symbol styling */
.slider-active .custom-slider-prev span,
.slider-active .custom-slider-next span {
    display: block !important;
    font-size: 48px !important;
    line-height: 60px !important;
    color: #fff !important;
    font-weight: 300 !important;
    text-align: center !important;
}

/* Hover effects */
.slider-active .custom-slider-prev:hover,
.slider-active .custom-slider-next:hover {
    background: rgba(0, 103, 57, 1) !important;
    border-color: rgba(255, 198, 0, 0.8) !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Active/Focus state */
.slider-active .custom-slider-prev:active,
.slider-active .custom-slider-next:active,
.slider-active .custom-slider-prev:focus,
.slider-active .custom-slider-next:focus {
    background: rgba(0, 103, 57, 1) !important;
    outline: 2px solid #ffc600 !important;
}

/* Disabled state */
.slider-active .custom-slider-prev.slick-disabled,
.slider-active .custom-slider-next.slick-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .slider-active .custom-slider-prev,
    .slider-active .custom-slider-next {
        width: 45px !important;
        height: 45px !important;
    }
    
    .slider-active .custom-slider-prev {
        left: 10px !important;
    }
    
    .slider-active .custom-slider-next {
        right: 10px !important;
    }
    
    .slider-active .custom-slider-prev span,
    .slider-active .custom-slider-next span {
        font-size: 36px !important;
        line-height: 45px !important;
    }
}

/* =========================
   CRITICAL FIX: Arrows visible on slider hover
   Override any hover states that hide arrows
   ========================= */

/* Force arrows to stay visible when hovering slider */
.slider-active:hover .custom-slider-prev,
.slider-active:hover .custom-slider-next {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Ensure arrows are always clickable */
.slider-active .custom-slider-prev,
.slider-active .custom-slider-next {
    pointer-events: auto !important;
}

/* Override any parent hover that might hide children */
.slider-active:hover > *:not(.custom-slider-prev):not(.custom-slider-next) {
    /* Intentionally empty - ensures proper specificity */
}

.slider-active:hover .custom-slider-prev,
.slider-active:hover .custom-slider-next {
    /* Force arrows to remain visible and on top */
    z-index: 9999 !important;
    display: block !important;
    opacity: 1 !important;
}

/* When hovering the slider wrapper */
.slider-wrapper:hover ~ .custom-slider-prev,
.slider-wrapper:hover ~ .custom-slider-next {
    display: block !important;
    opacity: 1 !important;
}

/* Ensure arrows stay visible in all states */
.slider-active.slick-slider:hover .custom-slider-prev,
.slider-active.slick-slider:hover .custom-slider-next,
.slider-active .slick-list:hover ~ .custom-slider-prev,
.slider-active .slick-list:hover ~ .custom-slider-next {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}