/**
 * ============================================================
 * FILE    : assets/css/google-drive-gallery.css
 * VERSION : Google Drive Gallery v1.1.4
 * NAME    : Gallery Visual Refinement
 * THEME   : MAN Kota Blitar
 * ============================================================
 *
 * Fokus:
 * - Hero lebih kompak dan premium
 * - Menyatu dengan header website
 * - Grid album rapi
 * - Cover seragam
 * - Mobile responsive
 * - Tidak mengubah fungsi Google Drive
 * - Lightbox tetap digunakan
 * ============================================================
 */


/* ============================================================
   01. VARIABLE
   ============================================================ */

.mkb-drive-gallery-page{
    --mkb-gallery-green:#05663f;
    --mkb-gallery-green-2:#078251;
    --mkb-gallery-green-dark:#034a30;

    --mkb-gallery-gold:#d6aa29;
    --mkb-gallery-gold-soft:#f3df94;

    --mkb-gallery-text:#1e3028;
    --mkb-gallery-muted:#6d7973;

    --mkb-gallery-bg:#f5f8f6;
    --mkb-gallery-white:#ffffff;
    --mkb-gallery-border:#e2e9e5;

    --mkb-gallery-shadow:
        0 12px 34px rgba(13,77,49,.08);

    --mkb-gallery-shadow-hover:
        0 20px 45px rgba(13,77,49,.16);

    width:100%;
    margin:0;
    padding:0;

    background:var(--mkb-gallery-bg);
    color:var(--mkb-gallery-text);

    overflow:hidden;
}


/* ============================================================
   02. RESET KHUSUS GALERI
   ============================================================ */

.mkb-drive-gallery-page *,
.mkb-drive-gallery-page *::before,
.mkb-drive-gallery-page *::after{
    box-sizing:border-box;
}

.mkb-drive-gallery-page h1,
.mkb-drive-gallery-page h2,
.mkb-drive-gallery-page h3,
.mkb-drive-gallery-page p{
    margin-top:0;
}

.mkb-gallery-container{
    width:min(1180px,calc(100% - 40px));
    margin-left:auto;
    margin-right:auto;
}


/* ============================================================
   03. HERO
   ============================================================ */

.mkb-gallery-hero{
    position:relative;
    isolation:isolate;

    width:100%;

    padding:54px 0 48px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(237,198,72,.30) 0,
            rgba(237,198,72,.08) 25%,
            transparent 48%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(255,255,255,.09),
            transparent 40%
        ),
        linear-gradient(
            118deg,
            #03462d 0%,
            #056b43 54%,
            #087c4d 100%
        ) !important;

    color:#fff !important;
}


/* ornamen lingkaran */

.mkb-gallery-hero::before{
    content:"";

    position:absolute;
    z-index:-1;

    width:340px;
    height:340px;

    right:-110px;
    top:-190px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius:50%;
}


.mkb-gallery-hero::after{
    content:"";

    position:absolute;
    z-index:-1;

    width:175px;
    height:175px;

    right:130px;
    bottom:-130px;

    border:
        28px solid rgba(255,255,255,.035);

    border-radius:50%;
}


/* ============================================================
   04. KICKER
   ============================================================ */

.mkb-gallery-kicker{
    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:13px;

    color:#f4d66b !important;

    font-size:11px !important;
    font-weight:800 !important;

    line-height:1.3;

    letter-spacing:2px;

    text-transform:uppercase;
}


.mkb-gallery-kicker::before{
    content:"";

    width:28px;
    height:2px;

    border-radius:99px;

    background:
        var(--mkb-gallery-gold);
}


/* ============================================================
   05. HERO TITLE
   ============================================================ */

.mkb-gallery-hero h1{
    max-width:820px;

    margin:
        0 0 14px !important;

    padding:0 !important;

    color:#fff !important;

    font-size:
        clamp(34px,4.2vw,53px) !important;

    font-weight:800 !important;

    line-height:1.08 !important;

    letter-spacing:-1.4px !important;
}


.mkb-gallery-hero h1 span{
    color:
        #f2d16a !important;
}


.mkb-gallery-hero p{
    max-width:720px;

    margin:
        0 !important;

    color:
        rgba(255,255,255,.86) !important;

    font-size:
        15px !important;

    line-height:
        1.72 !important;
}


/* ============================================================
   06. SUMMARY ALBUM / FOTO
   ============================================================ */

.mkb-gallery-summary{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:9px;

    margin-top:22px;
}


.mkb-gallery-summary span{
    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:
        8px 13px;

    border:
        1px solid rgba(255,255,255,.16);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.09);

    color:
        rgba(255,255,255,.88) !important;

    font-size:
        12px !important;

    line-height:
        1.2;

    backdrop-filter:
        blur(4px);
}


.mkb-gallery-summary strong{
    color:
        #f4d66b !important;

    font-size:
        14px;

    font-weight:
        800;
}


/* ============================================================
   07. CONTENT AREA
   ============================================================ */

.mkb-gallery-content{
    width:100%;

    padding:
        48px 0 82px;

    background:
        linear-gradient(
            180deg,
            #f7faf8 0%,
            #f4f7f5 100%
        ) !important;
}


/* ============================================================
   08. SECTION HEADING
   ============================================================ */

.mkb-gallery-heading{
    display:flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:32px;

    margin-bottom:
        26px;
}


.mkb-gallery-heading > div{
    min-width:0;
}


.mkb-gallery-heading span{
    display:block;

    margin-bottom:
        6px;

    color:
        var(--mkb-gallery-green) !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    line-height:
        1.2;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;
}


.mkb-gallery-heading h2{
    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--mkb-gallery-text) !important;

    font-size:
        clamp(26px,3vw,34px) !important;

    font-weight:
        800 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.7px !important;
}


.mkb-gallery-heading p{
    max-width:
        400px;

    margin:
        0 !important;

    color:
        var(--mkb-gallery-muted) !important;

    font-size:
        14px !important;

    line-height:
        1.65 !important;

    text-align:
        right;
}


/* ============================================================
   09. ALBUM GRID
   ============================================================ */

.mkb-album-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        20px;

    align-items:
        stretch;
}


/* ============================================================
   10. ALBUM CARD
   ============================================================ */

.mkb-album-card{
    position:relative;

    display:flex;

    flex-direction:
        column;

    min-width:0;

    overflow:hidden;

    border:
        1px solid
        var(--mkb-gallery-border) !important;

    border-radius:
        16px !important;

    background:
        #fff !important;

    color:
        inherit !important;

    text-decoration:
        none !important;

    box-shadow:
        var(--mkb-gallery-shadow);

    transform:
        translateY(0);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.mkb-album-card:hover{
    transform:
        translateY(-5px);

    border-color:
        rgba(5,102,63,.20) !important;

    box-shadow:
        var(--mkb-gallery-shadow-hover);
}


/* ============================================================
   11. COVER ALBUM
   ============================================================ */

.mkb-album-cover{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:
        16 / 9;

    overflow:hidden;

    background:
        #dfe9e4;
}


.mkb-album-cover::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(0,0,0,.22)
        );
}


.mkb-album-cover img{
    width:100% !important;
    height:100% !important;

    display:block;

    margin:0 !important;
    padding:0 !important;

    object-fit:
        cover !important;

    object-position:
        center;

    transition:
        transform .45s ease;
}


.mkb-album-card:hover
.mkb-album-cover img{
    transform:
        scale(1.045);
}


/* ============================================================
   12. PLACEHOLDER
   ============================================================ */

.mkb-album-placeholder{
    width:100%;
    height:100%;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            135deg,
            #e6f1ec,
            #d8e7df
        );

    color:
        var(--mkb-gallery-green);
}


.mkb-album-placeholder span{
    font-size:
        13px;

    font-weight:
        800;
}


/* ============================================================
   13. BADGE JUMLAH FOTO
   ============================================================ */

.mkb-album-photo-count{
    position:absolute;

    z-index:3;

    right:11px;
    bottom:11px;

    display:inline-flex;

    align-items:center;

    min-height:
        29px;

    padding:
        6px 10px;

    border:
        1px solid rgba(255,255,255,.19);

    border-radius:
        999px;

    background:
        rgba(6,42,27,.78);

    color:
        #fff !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1;

    backdrop-filter:
        blur(5px);
}


/* ============================================================
   14. ALBUM BODY
   ============================================================ */

.mkb-album-body{
    display:flex;

    flex-direction:
        column;

    flex:1;

    padding:
        16px 17px 17px;
}


.mkb-album-body strong{
    display:block;

    min-height:
        46px;

    margin:
        0 0 10px;

    color:
        var(--mkb-gallery-text) !important;

    font-size:
        16px !important;

    font-weight:
        750 !important;

    line-height:
        1.42 !important;
}


.mkb-album-body > span{
    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:10px;

    margin-top:auto;

    padding-top:
        11px;

    border-top:
        1px solid
        #edf1ef;

    color:
        var(--mkb-gallery-green) !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;
}


.mkb-album-body > span b{
    display:grid;

    place-items:center;

    width:25px;
    height:25px;

    border-radius:
        50%;

    background:
        #edf6f1;

    color:
        var(--mkb-gallery-green);

    font-size:
        13px;

    transition:
        transform .2s ease,
        background .2s ease;
}


.mkb-album-card:hover
.mkb-album-body > span b{
    transform:
        translateX(2px);

    background:
        #dceee5;
}


/* ============================================================
   15. MODE DETAIL ALBUM
   ============================================================ */

.mkb-gallery-album-hero{
    padding:
        42px 0 38px;
}


.mkb-gallery-back{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:
        21px;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.07);

    color:
        #f3d56d !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1.2;

    text-decoration:
        none !important;
}


.mkb-gallery-back:hover{
    background:
        rgba(255,255,255,.12);
}


/* ============================================================
   16. PHOTO GRID
   ============================================================ */

.mkb-photo-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:
        12px;
}


/* ============================================================
   17. PHOTO CARD
   ============================================================ */

.mkb-photo-card{
    position:relative;

    display:block;

    width:100%;

    aspect-ratio:
        4 / 3;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        #e2ebe6;

    box-shadow:
        0 5px 15px rgba(8,61,39,.06);

    cursor:pointer;

    appearance:none;
}


.mkb-photo-card img{
    width:100% !important;
    height:100% !important;

    display:block;

    margin:0 !important;

    object-fit:
        cover !important;

    transition:
        transform .4s ease;
}


.mkb-photo-card:hover img{
    transform:
        scale(1.055);
}


/* ============================================================
   18. PHOTO OVERLAY
   ============================================================ */

.mkb-photo-overlay{
    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            180deg,
            rgba(2,41,25,.05),
            rgba(2,41,25,.62)
        );

    opacity:0;

    transition:
        opacity .25s ease;
}


.mkb-photo-card:hover
.mkb-photo-overlay{
    opacity:1;
}


.mkb-photo-overlay span{
    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.93);

    color:
        var(--mkb-gallery-green-dark);

    font-size:
        10px;

    font-weight:
        800;
}


/* ============================================================
   19. EMPTY / ERROR STATE
   ============================================================ */

.mkb-gallery-state{
    padding:
        44px 24px;

    border:
        1px solid
        var(--mkb-gallery-border);

    border-radius:
        14px;

    background:
        #fff;

    text-align:
        center;

    box-shadow:
        var(--mkb-gallery-shadow);
}


.mkb-gallery-state strong{
    display:block;

    margin-bottom:
        7px;

    color:
        var(--mkb-gallery-text);

    font-size:
        16px;
}


.mkb-gallery-state p{
    margin:
        0 !important;

    color:
        var(--mkb-gallery-muted);

    font-size:
        13px;

    line-height:
        1.6;
}


.mkb-gallery-state-error{
    border-color:
        #efcdcd;

    background:
        #fffafa;
}


/* ============================================================
   20. LIGHTBOX
   ============================================================ */

.mkb-drive-lightbox{
    position:fixed;

    inset:0;

    z-index:
        999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;
}


.mkb-drive-lightbox[hidden]{
    display:none !important;
}


.mkb-drive-lightbox-bg{
    position:absolute;

    inset:0;

    background:
        rgba(1,10,6,.94);

    backdrop-filter:
        blur(7px);
}


.mkb-drive-lightbox figure{
    position:relative;

    z-index:2;

    max-width:
        92vw;

    margin:0;

    text-align:center;
}


.mkb-drive-lightbox figure img{
    display:block;

    max-width:
        90vw;

    max-height:
        82vh;

    margin:auto;

    border-radius:
        10px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.38);
}


.mkb-drive-lightbox figcaption{
    margin-top:
        11px;

    color:
        rgba(255,255,255,.88);

    font-size:
        12px;
}


/* ============================================================
   21. LIGHTBOX BUTTON
   ============================================================ */

.mkb-drive-lightbox-close,
.mkb-drive-lightbox-prev,
.mkb-drive-lightbox-next{
    position:fixed;

    z-index:5;

    border:
        1px solid
        rgba(255,255,255,.17) !important;

    background:
        rgba(255,255,255,.09) !important;

    color:
        #fff !important;

    cursor:pointer;

    backdrop-filter:
        blur(6px);

    transition:
        background .2s ease;
}


.mkb-drive-lightbox-close:hover,
.mkb-drive-lightbox-prev:hover,
.mkb-drive-lightbox-next:hover{
    background:
        rgba(255,255,255,.16) !important;
}


.mkb-drive-lightbox-close{
    top:18px;
    right:19px;

    width:43px;
    height:43px;

    border-radius:
        50%;

    font-size:
        25px;
}


.mkb-drive-lightbox-prev,
.mkb-drive-lightbox-next{
    top:50%;

    width:46px;
    height:58px;

    transform:
        translateY(-50%);

    border-radius:
        10px;

    font-size:
        34px;
}


.mkb-drive-lightbox-prev{
    left:17px;
}


.mkb-drive-lightbox-next{
    right:17px;
}


/* ============================================================
   22. TABLET BESAR
   ============================================================ */

@media(max-width:1024px){

    .mkb-gallery-container{
        width:
            min(100% - 34px,960px);
    }

    .mkb-album-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .mkb-photo-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* ============================================================
   23. TABLET
   ============================================================ */

@media(max-width:768px){

    .mkb-gallery-hero{
        padding:
            45px 0 41px;
    }

    .mkb-gallery-heading{
        display:block;
    }

    .mkb-gallery-heading p{
        max-width:
            none;

        margin-top:
            10px !important;

        text-align:
            left;
    }

    .mkb-gallery-content{
        padding:
            40px 0 65px;
    }

}


/* ============================================================
   24. MOBILE
   ============================================================ */

@media(max-width:600px){

    .mkb-gallery-container{
        width:
            calc(100% - 26px);
    }

    .mkb-gallery-hero{
        padding:
            36px 0 34px;
    }

    .mkb-gallery-kicker{
        margin-bottom:
            10px;

        font-size:
            9px !important;

        letter-spacing:
            1.4px;
    }

    .mkb-gallery-hero h1{
        margin-bottom:
            11px !important;

        font-size:
            32px !important;

        letter-spacing:
            -.8px !important;
    }

    .mkb-gallery-hero p{
        font-size:
            13px !important;

        line-height:
            1.65 !important;
    }

    .mkb-gallery-summary{
        margin-top:
            17px;
    }

    .mkb-gallery-summary span{
        padding:
            7px 10px;

        font-size:
            10px !important;
    }

    .mkb-gallery-content{
        padding:
            34px 0 55px;
    }

    .mkb-gallery-heading{
        margin-bottom:
            20px;
    }

    .mkb-gallery-heading h2{
        font-size:
            25px !important;
    }

    .mkb-gallery-heading p{
        font-size:
            12px !important;
    }

    .mkb-album-grid{
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .mkb-album-cover{
        aspect-ratio:
            16 / 9;
    }

    .mkb-album-body{
        padding:
            14px 15px 15px;
    }

    .mkb-album-body strong{
        min-height:
            auto;

        font-size:
            15px !important;
    }

    .mkb-photo-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            8px;
    }

    .mkb-photo-card{
        border-radius:
            9px !important;
    }

    .mkb-photo-overlay{
        display:none;
    }

    .mkb-gallery-album-hero{
        padding:
            29px 0 28px;
    }

    .mkb-gallery-back{
        margin-bottom:
            16px;
    }

    .mkb-drive-lightbox{
        padding:
            12px;
    }

    .mkb-drive-lightbox-prev,
    .mkb-drive-lightbox-next{
        width:
            38px;

        height:
            49px;

        font-size:
            29px;
    }

    .mkb-drive-lightbox-prev{
        left:5px;
    }

    .mkb-drive-lightbox-next{
        right:5px;
    }

}


/* ============================================================
   25. MOBILE KECIL
   ============================================================ */

@media(max-width:390px){

    .mkb-photo-grid{
        grid-template-columns:
            1fr 1fr;
    }

    .mkb-gallery-summary{
        gap:
            6px;
    }

}