/* 
   RENEWAL DESIGN SYSTEM 2026 - MASTER LAYOUT PRECISION RESOLUTION V4
   PT. BPR KRISNA YUNA DANA
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary: #841711; /* Maroon */
    --accent: #FD9E00;  /* Orange/Gold */
    --white: #ffffff;
}

body {
    background: var(--white) !important;
    color: #222 !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
}

/* --- DESKTOP HEADER --- */
header { z-index: 10000; position: relative; }

.top-bar {
    background: var(--white) !important;
    border-bottom: 2px solid var(--primary) !important;
    padding: 10px 0 !important;
    min-height: 40px !important;
}

.top-bar .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
}

.top-bar .contact-details { display: flex !important; gap: 20px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.top-bar .contact-details li { font-size: 11px; font-weight: 700; white-space: nowrap !important; display: flex; align-items: center; color: #333 !important; }
.top-bar .contact-details li i { color: var(--primary); margin-right: 6px; font-size: 13px; }
.top-bar .contact-details li a { color: #333 !important; transition: all 0.3s ease; }
.top-bar .contact-details li a:hover { color: var(--primary) !important; }

.top-bar .social-list { display: flex !important; gap: 15px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.top-bar .social-list li a { color: #333 !important; font-size: 14px; transition: all 0.3s ease; }
.top-bar .social-list li a:hover { color: var(--primary) !important; transform: translateY(-2px); }

/* Navbar Desktop */
.navbar-default {
    background: var(--white) !important;
    border: none !important;
    border-bottom: 1px solid #f2f2f2 !important;
    padding: 15px 0 !important;
    margin: 0 !important;
}

.navbar.affix {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10001 !important;
    padding: 8px 0 !important;
    background: rgba(255,255,255,0.98) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    border-bottom: 3px solid var(--accent) !important;
}

/* Enlarged Desktop Logo - Forcing size with height */
.navbar-brand img { 
    height: 28px !important; 
    max-height: 28px !important; 
    width: auto !important; 
    transition: all 0.3s ease; 
}

/* Nav Links */
.navbar-nav > li > a {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
}

.navbar-nav > li > a:hover { color: var(--accent) !important; }

/* --- MOBILE PRECISION OVERHAUL --- */

@media (max-width: 991px) {
    .top-bar { display: none !important; }

    .navbar-default .container {
        display: block !important;
        width: 100% !important;
        padding: 0 15px !important;
        min-height: auto !important;
    }

    /* ALIGN LOGO TO THE LEFT, HAMBURGER TO THE RIGHT */
    .navbar-header {
        display: flex !important;
        flex-direction: row-reverse !important; /* Standard: child1(burger) right, child2(logo) left */
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        float: none !important;
        position: static !important; /* Resetting to let child align with navbar-default */
    }

    .navbar-brand {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important; /* Overriding absolute from responsive.css */
        width: auto !important;
        max-width: 70% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Refined Mobile Logo Size - Left Aligned */
    .navbar-brand img {
        display: block !important;
        max-height: 28px !important;
        height: 28px !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* POSITION HAMBURGER TO THE RIGHT - NO BOX */
    .slicknav_menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        z-index: 10005 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        float: none !important; /* Clean up floats */
        clear: none !important;
    }

    .slicknav_btn { 
        background: transparent !important; 
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        width: 40px !important;
        height: 40px !important;
    }

    .slicknav_menu .slicknav_icon {
        margin: 0 !important;
        width: 24px !important;
        height: 16px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .slicknav_menu .slicknav_icon-bar {
        background-color: var(--primary) !important;
        width: 24px !important;
        height: 3px !important;
        margin: 0 !important;
        display: block !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

    /* DROPDOWN MENU - VIEWPORT RELATIVE NUCLEAR FIX */
    .slicknav_nav {
        position: absolute !important;
        top: 100% !important; 
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
        border-top: 3px solid var(--accent) !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        text-align: center !important;
        z-index: 10002 !important;
        transform: none !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Compact Menu Items */
    .slicknav_nav a, .slicknav_nav .slicknav_row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 10px 20px !important;
        color: var(--primary) !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid #f9f9f9 !important;
        position: relative !important;
    }

    /* Arrow Centering Fix */
    .slicknav_arrow { 
        position: absolute !important;
        right: 25px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        float: none !important;
        background: transparent !important;
        font-size: 12px !important;
    }

    /* Fix submenu lists */
    .slicknav_nav ul { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
    .slicknav_nav li { width: 100% !important; display: block !important; margin: 0 !important; }
    .slicknav_nav ul ul a { background: #fafafa !important; font-size: 12px !important; font-weight: 500 !important; padding: 6px 20px !important; }

    /* Kill native items */
    .navbar-collapse, .navbar-toggle { display: none !important; }
}

/* --- MODERN REVEAL & CONTENT --- */
.section { padding: 60px 0 !important; }
.classic-title span { font-size: 26px; font-weight: 800; color: var(--primary); }

.service-box {
    background: #fff !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 10px !important;
    padding: 30px 20px !important;
    transition: 0.3s;
}

.service-box:hover { border-color: var(--accent) !important; transform: translateY(-5px); }

.btn-system {
    background: var(--primary) !important;
    color: #fff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    border: none !important;
}

.btn-system:hover { background: var(--accent) !important; }