/* =========================================
   RESET & BASE
========================================= */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,Helvetica,sans-serif;background:#f1f1f1;overflow-x:hidden;}

/* =========================================
   HEADER & BANNER
========================================= */
.header{width:100%;background:#8bc34a;overflow:hidden;line-height:0;}
.logo-banner{width:100%;height:295px;overflow:hidden;}
.logo-banner img{width:100%;height:100%;display:block;object-fit:cover;}

/* =========================================
   LAYOUT
========================================= */
.row{overflow:visible!important;position:relative;z-index:1;}
.row::after{content:"";display:table;clear:both;}
.leftcolumn{float:left;width:70%;position:relative;z-index:1;}
.rightcolumn{float:left;width:30%;padding-left:20px;position:sticky;z-index:1;top:20px;}
.card{background:white;padding:20px;margin-top:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);position:relative;z-index:1;}
.admin-row{display:flex;justify-content:center;align-items:center;text-align:center;}
.admin-row .leftcolumn{width:100%;display:flex;justify-content:center;}
.admin-row .card{width:100%;max-width:900px;}

/* =========================================
   NAVBAR
========================================= */
.navbar, #navbar{
    background:linear-gradient(to bottom,#7cb342,#9ccc65,#dcedc8,#f1f8e9);
    width:100%;
    position:sticky;
    top:0;
    z-index:9999;
}

.nav-container{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    width:100%;
}

.nav-left{
    display:flex;
    align-items:center;
    flex:1;
    flex-wrap:wrap;
}

.nav-right{
    display:flex;
    align-items:stretch;
    flex-shrink:0;
}

/* Desktop nav links */
.navbar a, #navbar a{
    display:flex;
    align-items:center;
    color:#2e7d32;
    padding:14px 16px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
    white-space:nowrap;
}
.navbar a:hover, #navbar a:hover{background:rgba(76,175,80,.25);color:#000;}

/* =========================================
   DROPDOWN (hamburger)
========================================= */
.dropdown{position:relative;}
.dropdown .dropbtn{
    font-size:22px;border:none;outline:none;
    color:#2e7d32;padding:14px 16px;
    background:inherit;font-weight:bold;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    line-height:1;
}
.dropdown-content{
    display:none;position:absolute;
    background:white;min-width:220px;
    box-shadow:0 10px 25px rgba(0,0,0,.2);
    z-index:999999;top:100%;right:0;
    border-radius:0 0 12px 12px;overflow:hidden;
}
.dropdown-content a{
    float:none!important;display:block!important;
    width:100%!important;text-align:left!important;
    padding:14px 18px!important;
    color:#2e7d32!important;background:white!important;
    border-bottom:1px solid rgba(0,0,0,.05);
}
.dropdown-content a:hover{
    background:#dcedc8!important;color:#1b5e20!important;
    padding-left:24px!important;
}
/* Hover hanya diaktifkan pada perangkat yang benar-benar punya mouse (desktop).
   Di HP/tablet (touchscreen), :hover pada tap pertama membuat link butuh 2x tap
   untuk benar-benar diklik. Maka di touchscreen kita andalkan class .open dari JS saja. */
@media (hover:hover) and (pointer:fine){
    .dropdown:hover .dropdown-content{display:block;}
}
.dropdown.open .dropdown-content{display:block;}

/* =========================================
   FOOTER
========================================= */
.footer{padding:8px;text-align:center;background:#9ccc65;margin-top:20px;clear:both;}

/* =========================================
   WHATSAPP FLOAT
========================================= */
.float{
    position:fixed;width:60px;height:60px;
    bottom:40px;right:40px;
    background:#25d366;color:#fff;
    border-radius:50%;text-align:center;
    font-size:30px;box-shadow:2px 2px 3px #999;
    z-index:10000;display:flex;align-items:center;justify-content:center;
    text-decoration:none;
}

/* =========================================
   RESPONSIVE TABLET ≤800px
========================================= */
@media screen and (max-width:800px){
    .leftcolumn,.rightcolumn{width:100%;padding:0;}
}

/* =========================================
   RESPONSIVE MOBILE ≤768px
========================================= */
@media screen and (max-width:768px){

    .logo-banner{height:120px;}

    /* Nav container: satu baris, link kiri scroll, hamburger kanan */
    .nav-container{
        display:flex;
        flex-direction:row;
        align-items:stretch;
        width:100%;
        overflow:visible;
        position:relative;
    }

    /* Link-link scroll horizontal */
    .nav-left{
        flex:1;
        min-width:0;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        align-items:center;
        scrollbar-width:none;
    }
    .nav-left::-webkit-scrollbar{display:none;}

    .navbar a, #navbar a{
        padding:11px 10px;
        font-size:13px;
        white-space:nowrap;
        flex-shrink:0;
    }

    /* Hamburger di kanan - sewarna & sejajar */
    .nav-right{
        display:flex;
        align-items:center;
        flex-shrink:0;
        background:transparent;
        border-left:1px solid rgba(76,175,80,.3);
    }

    .dropdown .dropbtn,
    .hamburger-icon{
        padding:11px 14px;
        font-size:20px;
        background:transparent;
        color:#2e7d32;
        display:flex;
        align-items:center;
        justify-content:center;
        border:none;
        cursor:pointer;
        font-weight:bold;
        text-decoration:none;
        height:100%;
    }
    .dropdown .dropbtn:hover,
    .hamburger-icon:hover{
        background:rgba(76,175,80,.25);
        color:#000;
    }

    .dropdown-content{
        min-width:200px;
        right:0;
    }

    .float{width:50px;height:50px;font-size:24px;right:16px;bottom:16px;}
}

/* =========================================
   MOBILE KECIL ≤480px
========================================= */
@media screen and (max-width:480px){
    .logo-banner{height:90px;}
    #navbar a{padding:10px 8px;font-size:12px;}
}

/* =========================================
   GLOBAL RAPIH — memperbaiki elemen umum
========================================= */

/* Semua form input tidak boleh overflow container */
input, select, textarea, button {
    max-width: 100%;
    box-sizing: border-box;
}

/* Tabel selalu scrollable di mobile */
.tbl-wrap, .table-wrap, .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Form grid - 2 kolom di desktop, 1 kolom di mobile */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* Filter bar umum - wrap di mobile */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-bar input,
.filter-bar select {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}
.filter-bar button {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Button tidak boleh overflow */
.btn, button {
    max-width: 100%;
    word-break: break-word;
}

/* Text tidak overflow */
.page-title, .mon-title, .as-title, .bk-title, .ph-title, .mat-title {
    word-break: break-word;
    overflow-wrap: break-word;
}