/* ==================================================
   01. ROOT & RESET
   SPENSA 98 PHOTO ARCHIVE
================================================== */

/* Reset */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Theme */

:root{

    /* Brand */

    --primary:#0A3D9B;
    --primary-dark:#062A73;
    --primary-light:#2F7BFF;
    --secondary:#FFFFFF;

    /* Background */

    --background:#EEF4FF;
    --surface:#FFFFFF;

    /* Text */

    --text:#1B2B4A;
    --text-light:#64748B;

    /* Border */

    --border:#D8E6FF;

    /* Shadow */

    --shadow-sm:0 4px 12px rgba(10,61,155,.08);
    --shadow-md:0 10px 24px rgba(10,61,155,.14);
    --shadow-lg:0 18px 40px rgba(10,61,155,.20);

    /* Radius */

    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;

    /* Animation */

    --speed-fast:.20s;
    --speed-normal:.30s;
    --speed-slow:.45s;

    /* Header */

    --header-height:82px;

    /* Viewer */

    --viewer-bg:rgba(0,0,0,.95);

}

/* HTML */

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

/* Body */

body{

    font-family:'Inter',sans-serif;

    background:
    linear-gradient(
        180deg,
        #F6F9FF 0%,
        #EEF4FF 100%
    );

    color:var(--text);

    line-height:1.6;

    overflow-x:hidden;

    min-height:100vh;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

/* Images */

img{

    display:block;

    max-width:100%;

    user-select:none;

    -webkit-user-drag:none;

}

/* Links */

a{

    color:inherit;

    text-decoration:none;

}

/* Button */

button{

    font:inherit;

    cursor:pointer;

    border:none;

    outline:none;

}

/* Input */

input{

    font:inherit;

    outline:none;

}

/* List */

ul,
ol{

    list-style:none;

}

/* Selection */

::selection{

    background:var(--primary);

    color:#fff;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ECEFF3;

}

::-webkit-scrollbar-thumb{

    background:#B8C2D1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* Utility */

.hidden{

    display:none !important;

}

.fade{

    transition:all var(--speed-normal) ease;

}

/* ==================================================
   02. HEADER
   SPENSA 98 PHOTO ARCHIVE
================================================== */

.header{

    position:sticky;

    top:0;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    width:100%;

    min-height:var(--header-height);

    padding:14px 24px;

    background:
    linear-gradient(
        135deg,
        #0A3D9B,
        #1A63E8,
        #0A3D9B
    );

    color:white;

    box-shadow:var(--shadow-md);

}

/* ==================================================
   NAVIGATION MENU
================================================== */

.nav-menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    overflow-x:auto;

    white-space:nowrap;

    padding:12px 20px;

    background:#ffffff;

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    scrollbar-width:none;

}


.nav-menu::-webkit-scrollbar{

    display:none;

}


.nav-menu a{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:9px 18px;

    border-radius:30px;

    background:#EEF4FF;

    color:var(--primary-dark);

    font-weight:600;

    font-size:14px;

    transition:.25s;

}


.nav-menu a:hover,
.nav-menu a.active{

    background:var(--primary);

    color:white;

    transform:translateY(-2px);

}


/* HP */

@media(max-width:768px){

    .nav-menu{

        justify-content:flex-start;

        padding:10px 14px;

    }


    .nav-menu a{

        font-size:13px;

        padding:8px 14px;

    }

}

/* ==========================
   BRAND
========================== */

.brand{

    display:flex;

    align-items:center;

    gap:16px;

    min-width:0;

}

/* ==========================
   LOGO
========================== */

.logo{

    width:60px;

    height:60px;

    object-fit:contain;

    flex-shrink:0;

    transition:transform var(--speed-normal);

}

.logo:hover{

    transform:scale(1.05);

}

/* ==========================
   TITLE
========================== */

.brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

}

.brand h1{

    font-size:1.6rem;

    font-weight:800;

    color:white;

    letter-spacing:.6px;

}

.brand p{

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

    font-size:.92rem;

}

/* ==========================
   PHOTO COUNT
========================== */

.photo-count{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-width:80px;

    padding:10px 16px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        #2F7BFF,
        #0A3D9B
    );

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

    box-shadow:0 8px 24px rgba(0,40,120,.35);

}

.photo-count span{

    color:white;

}

.photo-count small{

    color:#DCE8FF;

}

/* ==========================
   HEADER SHRINK
   (dipakai nanti oleh JS)
========================== */

.header.shrink{

    min-height:64px;

    padding:10px 20px;

}

.header.shrink .logo{

    width:46px;

    height:46px;

}

.header.shrink .brand h1{

    font-size:1.25rem;

}

.header.shrink .brand p{

    font-size:.80rem;

}

.header.shrink .photo-count{

    padding:8px 14px;

}

.header.shrink .photo-count span{

    font-size:1.45rem;

}

/* ==========================
   HOVER
========================== */

.header:hover{

    box-shadow:var(--shadow-md);

}

/* ==================================================
   03. GALLERY
   SPENSA 98 PHOTO ARCHIVE
================================================== */

/* ==========================
   MAIN
========================== */

main{

    width:100%;

    max-width:1800px;

    margin:auto;

    padding:22px;

}

/* ==========================
   GALLERY
========================== */

.gallery{

    column-count:5;

    column-gap:18px;

    width:100%;

}

/* Desktop */

@media (max-width:1600px){

    .gallery{

        column-count:4;

    }

}

/* Laptop */

@media (max-width:1200px){

    .gallery{

        column-count:3;

    }

}

/* Tablet */

@media (max-width:768px){

    .gallery{

        column-count:2;

        column-gap:12px;

    }

}

/* HP kecil */

@media (max-width:480px){

    .gallery{

        column-count:2;

        column-gap:10px;

    }

}

/* ==========================
   CARD
========================== */

.photo-card{

    position:relative;

    width:100%;

    margin-bottom:18px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:20px;

    background:white;

    border:1px solid #D9E6FF;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

/* ==========================
   IMAGE
========================== */

.photo-card img{

    display:block;

    width:100%;

    height:auto;

    cursor:pointer;

    border-radius:18px;

    transition:
        transform .35s ease,
        filter .35s ease;

    background:#ECECEC;

}

/* ==========================
   HOVER
========================== */

.photo-card:hover{

    transform:translateY(-6px);

    border-color:#2F7BFF;

    box-shadow:

    0 20px 42px rgba(10,61,155,.18);

}

.photo-card:hover img{

    transform:scale(1.04);

}

/* ==========================
   OVERLAY
========================== */

.photo-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.15),
        transparent 40%
    );

    opacity:0;

    transition:.30s;

    pointer-events:none;

}

.photo-card:hover::after{

    opacity:1;

}

/* ==========================
   LOADING
========================== */

.photo-card img:not([src]){

    min-height:240px;

}

/* ==========================
   IMAGE LOADED
========================== */

.photo-card.loaded img{

    animation:fadePhoto .45s ease;

}

/* ==========================
   SKELETON
========================== */

.photo-card.loading{

    min-height:220px;

    background:linear-gradient(
        90deg,
        #ececec 25%,
        #f7f7f7 37%,
        #ececec 63%
    );

    background-size:400% 100%;

    animation:skeleton 1.4s infinite;

}

/* ==========================
   BADGE
========================== */

.photo-card .badge{

    position:absolute;

    top:10px;

    right:10px;

    padding:6px 10px;

    border-radius:30px;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-size:12px;

    backdrop-filter:blur(6px);

    opacity:0;

    transition:.25s;

}

.photo-card:hover .badge{

    opacity:1;

}

/* ==========================
   TAP EFFECT MOBILE
========================== */

.photo-card:active{

    transform:scale(.98);

}

/* ==========================
   PREVENT DRAG
========================== */

.photo-card img{

    -webkit-user-drag:none;

    user-select:none;

}

/* ==========================
   FADE ANIMATION
========================== */

@keyframes fadePhoto{

    from{

        opacity:0;

        transform:scale(.97);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================
   SKELETON ANIMATION
========================== */

@keyframes skeleton{

    0%{

        background-position:100% 0;

    }

    100%{

        background-position:-100% 0;

    }

}

/* ==================================================
   04. VIEWER (FULLSCREEN)
   SPENSA 98 PHOTO ARCHIVE
================================================== */

/* ==========================
   FULLSCREEN
========================== */

.viewer{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(

    180deg,

    #04152F,

    #072456,

    #000814

    );

    z-index:99999;

}

.viewer.show{

    display:flex;

    opacity:1;

}

/* ==========================
   CONTENT
========================== */

.viewer-content{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;

}

/* ==========================
   IMAGE
========================== */

#viewerImage{

    max-width:96vw;

    max-height:82vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:10px;

    user-select:none;

    -webkit-user-drag:none;

    transform:scale(1);

    transition:
        opacity .25s,
        transform .25s;

}

/* ==========================
   FADE
========================== */

.viewer.show #viewerImage{

    animation:viewerFade .25s ease;

}

/* ==========================
   CAPTION
========================== */

.caption{

    position:static;

    margin-top:18px;

    margin-bottom:18px;

    max-width:90%;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-size:14px;

    text-align:center;

    backdrop-filter:blur(8px);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ==========================
   CLOSE BUTTON
========================== */

.close-btn{

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

    backdrop-filter:blur(10px);

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

}

.close-btn:hover{

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

}

/* ===========================
   VIEWER TOOLBAR
=========================== */

.viewer-toolbar{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:12px;
    width:100%;
    flex-wrap:nowrap;

}

.tool-btn{

    flex:1;
    min-width:0;

    height:44px;

    padding:0 12px;

    border-radius:999px;

    background:#ffffff;

    color:#0A3D9B;

    font-weight:600;

    font-size:14px;

    white-space:nowrap;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

    transition:
        background .25s,
        color .25s,
        transform .2s;

}

.tool-btn:hover{

    background:#0A3D9B;
    color:#fff;
    transform:translateY(-2px);

}

.tool-btn:active{

    transform:scale(.96);

}

@media (max-width:768px){

    .viewer-toolbar{

        gap:6px;

    }

    .tool-btn{

        height:40px;

        padding:0 6px;

        font-size:13px;

    }

}

/* ==========================
   LOADING
========================== */

.viewer.loading #viewerImage{

    opacity:.4;

}

/* ==========================
   MOBILE
========================== */

@media (max-width:768px){

    #viewerImage{

        max-width:100vw;

        max-height:88vh;

        border-radius:0;

    }

    .nav{

        width:46px;

        height:46px;

        font-size:24px;

    }

    .prev{

        left:8px;

    }

    .next{

        right:8px;

    }

    .close-btn{

        top:10px;

        right:10px;

        width:42px;

        height:42px;

        font-size:24px;

    }

}

/* ==========================
   ANIMATION
========================== */

@keyframes viewerFade{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==================================================
   05. BUTTONS & FLOATING ACTION
   SPENSA 98 PHOTO ARCHIVE
================================================== */

/* ==========================
   BACK TO TOP
========================== */

.top-button{

    position:fixed;

    right:24px;

    bottom:24px;

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:

    linear-gradient(

    180deg,

    #2F7BFF,

    #0A3D9B

    );

    color:white;

    box-shadow:

    0 12px 30px rgba(10,61,155,.35);

}

.top-button.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.top-button:hover{

    transform:translateY(-4px);

    background:var(--primary-light);

}

/* ==========================
   LOADING BUTTON
========================== */

.button-loading{

    pointer-events:none;

    opacity:.6;

}

/* ==================================================
   07. ANIMATION
   SPENSA 98 PHOTO ARCHIVE
================================================== */

/* ==========================
   FADE IN
========================== */

.fade-in{

    animation:fadeIn .45s ease both;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
   ZOOM IN
========================== */

.zoom-in{

    animation:zoomIn .30s ease both;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================
   PHOTO HOVER
========================== */

.photo-card{

    will-change:transform;

}

.photo-card:hover{

    transform:translateY(-4px);

}

.photo-card:hover img{

    transform:scale(1.04);

}

/* ==========================================
   COLLECTION
========================================== */

.collection-section{

    width:min(1200px,95%);
    margin:30px auto;

}

.collection-scroll{

    display:flex;
    justify-content:center;
    align-items:stretch;
    flex-wrap:wrap;
    gap:22px;

}

.collection-card{

    width:300px;

    text-decoration:none;

    color:inherit;

    border-radius:18px;

    overflow:hidden;

    background:#fff;

    border:1px solid #DCE7FF;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    transition:.28s;

}

.collection-card:hover{

    transform:translateY(-6px);

    box-shadow:0 16px 34px rgba(11,61,145,.22);

}

.collection-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

}

.collection-info{

    padding:16px;

}

.collection-info h3{

    margin:0 0 8px;

    color:#0b3d91;

    font-size:18px;

    font-weight:700;

}

.collection-info p{

    margin:0;

    color:#666;

    font-size:14px;

    line-height:1.5;

}

/* ==========================
   TABLET
========================== */

@media (max-width:900px){

    .collection-card{

        width:280px;

    }

}

/* ==========================
   MOBILE
========================== */

@media (max-width:640px){

    .collection-scroll{

        gap:16px;

    }

    .collection-card{

        width:100%;
        max-width:380px;

    }

}

/* ==========================
   IMAGE LOADED
========================== */

.photo-card img{

    opacity:1;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.photo-card img.loaded{

    opacity:1;

}

/* ==========================
   VIEWER IMAGE
========================== */

#viewerImage{

    animation:viewerOpen .25s ease;

}

@keyframes viewerOpen{

    from{

        opacity:0;

        transform:scale(.96);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ==========================
   SPINNER
========================== */

.spinner{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================
   FLOAT BUTTON
========================== */

.top-button{

    transition:
        transform .25s,
        opacity .25s,
        background .25s;

}

.top-button:hover{

    transform:translateY(-5px);

}

/* ==========================
   BUTTON EFFECT
========================== */

button{

    transition:
        background .25s,
        color .25s,
        transform .20s;

}

button:active{

    transform:scale(.96);

}

/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#EAF2FF;

}

::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

    180deg,

    #2F7BFF,

    #0A3D9B

    );

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#083480;

}

/* ==========================
   REDUCE MOTION
========================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:url("logo.png") center center no-repeat;

    background-size:650px;

    opacity:.025;

    pointer-events:none;

    z-index:-1;

}
.search-box{
    max-width:700px;
    margin:18px auto;
    padding:0 16px;
}

.search-box input{
    width:100%;
    padding:13px 16px;
    border:1px solid #d6d6d6;
    border-radius:12px;
    font-size:15px;
    outline:none;
    transition:.25s;
    box-sizing:border-box;
}

.search-box input:focus{
    border-color:#0b3d91;
    box-shadow:0 0 0 3px rgba(11,61,145,.15);
}