/* ==========================================================
   PHOTO VIEW PAGE
========================================================== */

.photo-view-page{

    width:100%;

    background:#fff;

    padding:20px 0 40px;

}

.photo-container{

    width:100%;

    max-width:1600px;

    margin:0 auto;

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:0;

    background:#fff;

    height:100vh;

}

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

.photo-gallery{

    background:#000;

    position:relative;

    overflow:hidden;

    min-height:700px;

    height:100vh;

}

/* ==========================================================
   RIGHT SIDEBAR
========================================================== */

.photo-sidebar{

    background:#fff;

    padding:22px;

    border-left:1px solid #ececec;

    display:flex;
    flex-direction:column;

    position:sticky;
    top:0;

    height:100vh;

    overflow-y:auto;

}

/* ==========================================================
   BACK BUTTON
========================================================== */

.photo-back{

    position:absolute;

    top:18px;

    left:22px;

    z-index:20;

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

.photo-back:hover{

    opacity:.8;

}

/* ==========================================================
   SHARE
========================================================== */

.photo-share{

    position:absolute;

    top:15px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:20;

}

.share-btn{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#fff;

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

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

    transition:.25s;

}

.share-btn:hover{

    background:#fff;

    color:#111;

}

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

.photo-viewer{

    position:relative;

    width:100%;

    height:620px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.photo-slide{

    width:100%;

    height:100%;

    position:relative;

}

.photo-slide img{

    width:100%;

    height:100%;

    object-fit:contain;

}

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

.fullscreen-btn{

    position:absolute;

    top:18px;

    right:20px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    z-index:20;

}

.fullscreen-btn:hover{

    background:#fff;

    color:#111;

}

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

.photo-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    z-index:20;

    transition:.25s;

}

.photo-nav:hover{

    background:#fff;

    color:#111;

}

.photo-nav.prev{

    left:20px;

}

.photo-nav.next{

    right:20px;

}

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

.photo-caption{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:18px 25px;

    color:#fff;

    background:linear-gradient(to top,rgba(0,0,0,.88),transparent);

}

.photo-count{

    font-size:26px;

    font-weight:700;

    margin-bottom:8px;

}

.photo-caption p{

    margin:0;

    line-height:1.6;

}

/* ==========================================================
   PHOTO THUMBNAILS
========================================================== */

.photo-thumbnails{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 20px;

    background:#000;

}

.thumb-nav{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#1d1d1d;

    color:#fff;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.thumb-nav:hover{

    background:#fff;

    color:#111;

}

.thumb-list{

    flex:1;

    display:flex;

    gap:10px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.thumb-list::-webkit-scrollbar{

    display:none;

}

.thumb{

    width:120px;

    height:70px;

    object-fit:cover;

    border:3px solid transparent;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

    opacity:.65;

}

.thumb:hover{

    opacity:1;

}

.thumb.active{

    opacity:1;

    border-color:#0d6efd;

}

/* ==========================================================
   PHOTO SIDEBAR
========================================================== */

.photo-sidebar{

    display:flex;

    flex-direction:column;

}

.photo-title{

    margin:0;

    font-size:24px;

    line-height:1.4;

    font-weight:700;

    color:#111;

}

.photo-date{

    margin-top:15px;

    font-size:14px;

    color:#777;

}

/* ==========================================================
   PHOTO DESCRIPTION
========================================================== */

.photo-description{

    position:relative;

}

.photo-description-content{

    max-height:150px;

    overflow:hidden;

    transition:max-height .35s ease;

}

.photo-description-content.expanded{

    max-height:2000px;

}

.photo-description p{

    margin:0 0 15px;

    line-height:1.8;

    font-size:16px;

    color:#444;

}

.read-more-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    padding:0;

    background:none;

    border:none;

    color:#0d6efd;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

}

.read-more-btn:hover{

    text-decoration:underline;

}

/* ==========================================================
   PHOTOGRAPHER
========================================================== */

.photo-author{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:22px;

}

.photo-author strong{

    font-size:14px;

    color:#666;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.photo-author span{

    font-size:17px;

    font-weight:600;

    color:#111;

}

/* ==========================================================
   TAGS
========================================================== */

.photo-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:35px;

}

.photo-tags a{

    padding:8px 16px;

    border-radius:30px;

    text-decoration:none;

    background:#f5f5f5;

    color:#333;

    font-size:14px;

    transition:.25s;

}

.photo-tags a:hover{

    background:#0d6efd;

    color:#fff;

}

/* ==========================================================
   FOTO TERKINI
========================================================== */

.latest-photo{

    margin-top:10px;

}

.latest-title{

    margin:0 0 20px;

    font-size:18px;

    font-weight:700;

    color:#111;

    position:relative;

    padding-left:15px;

}

.latest-title::before{

    content:"";

    position:absolute;

    left:0;

    top:2px;

    bottom:2px;

    width:5px;

    background:#0d6efd;

    border-radius:20px;

}

.latest-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

/* ==========================================================
   FOTO TERKINI ITEM
========================================================== */

.latest-item{

    display:flex;

    flex-direction:column;

    text-decoration:none;

    color:inherit;

    transition:.25s;

    height:100%;

}

.latest-item:hover{

    transform:translateX(4px);

}

.latest-thumb{

    position:relative;

    width:120px;

    height:80px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:8px;

}

.latest-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.latest-item:hover img{

    transform:scale(1.08);

}

.latest-total{

    position:absolute;

    right:8px;

    bottom:8px;

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

    color:#fff;

    font-size:12px;

    padding:4px 8px;

    border-radius:20px;

    font-weight:600;

}

.latest-info{

    margin-top:10px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.latest-info h4{

    margin:0;

    font-size:15px;

    line-height:1.5;

    color:#111;

    transition:.25s;

    /* Maksimal 3 baris */
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    overflow:hidden;
    text-overflow:ellipsis;

    /* Fallback */
    max-height:4.5em;
    word-break:break-word;

}

.latest-item:hover h4{

    color:#0d6efd;

}

/* ==========================================================
   PHOTO LIGHTBOX
========================================================== */

.photo-lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:99999;

}

.photo-lightbox.show{

    visibility:visible;

    opacity:1;

}

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

.lightbox-overlay{

    position:absolute;

    inset:0;

}

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

.lightbox-content{

    position:relative;

    width:90%;

    max-width:1300px;

    max-height:90vh;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.lightbox-content img{

    max-width:100%;

    max-height:75vh;

    object-fit:contain;

    border-radius:8px;

}

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

.lightbox-caption{

    width:100%;

    margin-top:20px;

    color:#fff;

    text-align:center;

}

.lightbox-count{

    font-size:26px;

    font-weight:700;

    margin-bottom:12px;

}

.lightbox-caption p{

    margin:0 auto;

    max-width:900px;

    line-height:1.8;

    color:#ddd;

}

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

.lightbox-close{

    position:absolute;

    top:25px;

    right:25px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:18px;

    cursor:pointer;

    z-index:10;

    transition:.25s;

}

.lightbox-close:hover{

    background:#fff;

    color:#111;

}

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

.lightbox-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.25s;

    z-index:10;

}

.lightbox-nav:hover{

    background:#fff;

    color:#111;

}

.lightbox-prev{

    left:35px;

}

.lightbox-next{

    right:35px;

}

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

.photo-lightbox.show .lightbox-content{

    animation:zoomPhoto .35s ease;

}

@keyframes zoomPhoto{

    from{

        transform:scale(.92);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

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

/* ==========================
   Laptop
========================== */

@media (max-width:1400px){

    .photo-container{

        grid-template-columns:2.3fr 1fr;

    }

    .photo-title{

        font-size:22px;

    }

}

/* ==========================
   Tablet
========================== */

@media (max-width:1024px){

    .photo-container{

        grid-template-columns:1fr;

        height:auto;

    }

    .photo-gallery{

        min-height:auto;

    }

    .photo-sidebar{

        height:auto;

        overflow:visible;

    }

    .photo-viewer{

        height:520px;

    }

    .photo-title{

        font-size:26px;

    }

}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

    .photo-view-page{

        padding:0;

    }

    .photo-viewer{

        height:300px;

    }

    .photo-back{

        top:12px;

        left:12px;

        font-size:14px;

    }

    .photo-share{

        gap:8px;

        top:12px;

    }

    .share-btn{

        width:36px;

        height:36px;

        font-size:14px;

    }

    .fullscreen-btn{

        width:36px;

        height:36px;

        right:12px;

        top:12px;

    }

    .photo-nav{

        width:42px;

        height:42px;

    }

    .photo-nav.prev{

        left:10px;

    }

    .photo-nav.next{

        right:10px;

    }

    .photo-caption{

        padding:15px;

    }

    .photo-count{

        font-size:20px;

    }

    .photo-caption p{

        font-size:14px;

        line-height:1.6;

    }

    .photo-thumbnails{

        padding:12px;

        gap:10px;

    }

    .thumb{

        width:90px;

        height:58px;

    }

    .thumb-nav{

        width:36px;

        height:36px;

    }

    .photo-sidebar{

        padding:18px;

    }

    .photo-title{

        font-size:22px;

    }

    .photo-description p{

        font-size:15px;

    }

    .latest-thumb{

        width:95px;

        height:68px;

    }

    .latest-info h4{

        font-size:14px;

    }

}

/* ==========================
   Small Mobile
========================== */

@media (max-width:480px){

    .photo-viewer{

        height:240px;

    }

    .photo-share{

        position:static;

        transform:none;

        justify-content:center;

        margin:15px 0;

    }

    .photo-back{

        position:static;

        margin:15px;

    }

    .photo-gallery{

        display:flex;

        flex-direction:column;

    }

    .photo-viewer{

        order:2;

    }

    .photo-thumbnails{

        order:3;

    }

    .photo-sidebar{

        padding:15px;

    }

    .photo-title{

        font-size:20px;

    }

    .photo-date{

        font-size:13px;

    }

    .photo-description p{

        font-size:14px;

    }

    .latest-item{

        gap:10px;

    }

    .latest-thumb{

        width:85px;

        height:60px;

    }

    .lightbox-nav{

        width:45px;

        height:45px;

    }

    .lightbox-prev{

        left:10px;

    }

    .lightbox-next{

        right:10px;

    }

    .lightbox-close{

        top:15px;

        right:15px;

        width:42px;

        height:42px;

    }

    .lightbox-count{

        font-size:20px;

    }

    .lightbox-caption p{

        font-size:14px;

        padding:0 15px;

    }

}

/* ==========================================================
   HIDE FOOTER KHUSUS HALAMAN FOTO
========================================================== */

body.photo-page footer{
    display:none !important;
}

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

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

@media (max-width:1024px){

    .photo-view-page{
        padding:0;
        background:#000;
    }

    .photo-container{
        display:block;
        height:auto;
        max-width:100%;
    }

    .photo-gallery{
        min-height:auto;
        height:auto;
    }

    .photo-sidebar{
        position:relative;
        top:auto;
        height:auto;
        overflow:visible;
        border-left:none;
        padding:22px;
        background:#fff;
    }

    .photo-viewer{
        height:55vw;
        min-height:380px;
        max-height:520px;
    }

}


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

@media (max-width:768px){

    .photo-view-page{
        padding:0;
        background:#000;
    }

    .photo-container{
        display:block;
        width:100%;
        height:auto;
    }

    .photo-gallery{

        display:flex;
        flex-direction:column;

        height:auto;
        min-height:auto;

        background:#000;

    }

    .photo-back{

        position:absolute;

        top:12px;
        left:12px;

        margin:0;

        z-index:30;

        font-size:14px;

    }

    .photo-share{

        position:absolute;

        left:50%;
        top:12px;

        transform:translateX(-50%);

        gap:6px;

        z-index:30;

    }

    .share-btn{

        width:34px;
        height:34px;

        font-size:13px;

    }

    .fullscreen-btn{

        width:34px;
        height:34px;

        top:12px;
        right:12px;

    }

    .photo-viewer{

        width:100%;

        height:260px;

        min-height:260px;

    }

    .photo-slide{

        width:100%;
        height:100%;

    }

    .photo-slide img{

        width:100%;
        height:100%;

        object-fit:contain;

    }

    .photo-nav{

        width:38px;
        height:38px;

    }

    .photo-nav.prev{

        left:10px;

    }

    .photo-nav.next{

        right:10px;

    }

    .photo-caption{

        padding:10px 15px;

    }

    .photo-count{

        font-size:18px;
        margin:0;

    }

    .photo-thumbnails{

        padding:10px;

        gap:8px;

        overflow:hidden;

    }

    .thumb-nav{

        display:none;

    }

    .thumb-list{

        width:100%;

        overflow-x:auto;

        gap:8px;

        padding-bottom:4px;

    }

    .thumb{

        width:82px;

        height:55px;

        flex-shrink:0;

    }

    .photo-sidebar{

        padding:18px;

        background:#fff;

    }

    .photo-title{

        font-size:24px;

        line-height:1.4;

    }

    .photo-date{

        font-size:13px;

    }

    .photo-description{

        margin-top:15px;

    }

    .photo-description-content{

        max-height:150px;

        overflow:hidden;

    }

    .photo-description-content.expanded{

        max-height:2000px;

    }

    .photo-description p{

        font-size:15px;

        line-height:1.7;

    }

    .photo-tags{

        gap:8px;

    }

    .photo-tags a{

        font-size:13px;

        padding:6px 12px;

    }

    .latest-list{

        grid-template-columns:repeat(2,1fr);

        gap:14px;

    }

    .latest-thumb{

        width:100%;

        height:95px;

    }

    .latest-info{

        margin-top:8px;

    }

    .latest-info h4{

        font-size:14px;

        line-height:1.45;

    }

}


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

@media (max-width:480px){

    .photo-viewer{

        height:220px;

        min-height:220px;

    }

    .photo-share{

        gap:5px;

    }

    .share-btn{

        width:30px;

        height:30px;

        font-size:12px;

    }

    .photo-back span{

        display:none;

    }

    .photo-nav{

        width:34px;

        height:34px;

    }

    .thumb{

        width:72px;

        height:48px;

    }

    .photo-sidebar{

        padding:16px;

    }

    .photo-title{

        font-size:18px;

    }

    .photo-date{

        margin-top:10px;

        font-size:12px;

    }

    .photo-author span{

        font-size:15px;

    }

    .latest-list{

        grid-template-columns:1fr 1fr;

        gap:12px;

    }

    .latest-thumb{

        height:85px;

        width:100%;

    }

    .latest-info h4{

        font-size:13px;

        -webkit-line-clamp:2;

        max-height:2.8em;

    }

    .lightbox-content{

        width:95%;

    }

    .lightbox-nav{

        width:40px;

        height:40px;

    }

    .lightbox-prev{

        left:8px;

    }

    .lightbox-next{

        right:8px;

    }

    .lightbox-close{

        width:40px;

        height:40px;

        top:10px;

        right:10px;

    }

    .lightbox-count{

        font-size:18px;

    }

}


/* ==========================================================
   HIDE FOOTER
========================================================== */

body.photo-page footer{

    display:none !important;

}

/* ==========================================================
   DARK MODE PHOTO PAGE
   Tambahkan paling bawah CSS
========================================================== */

body.dark .photo-view-page,
body.dark-mode .photo-view-page{

    background:#0f172a;

}

body.dark .photo-container,
body.dark-mode .photo-container{

    background:#0f172a;

}

body.dark .photo-sidebar,
body.dark-mode .photo-sidebar{

    background:#111827;
    border-left:1px solid #273449;

}

body.dark .photo-title,
body.dark-mode .photo-title{

    color:#f8fafc;

}

body.dark .photo-date,
body.dark-mode .photo-date{

    color:#94a3b8;

}

body.dark .photo-description,
body.dark-mode .photo-description{

    color:#cbd5e1;

}

body.dark .photo-description p,
body.dark-mode .photo-description p,

body.dark #photoDescription,
body.dark-mode #photoDescription{

    color:#cbd5e1;

}

body.dark .photo-author strong,
body.dark-mode .photo-author strong{

    color:#94a3b8;

}

body.dark .photo-author span,
body.dark-mode .photo-author span{

    color:#f8fafc;

}

body.dark hr,
body.dark-mode hr{

    border-color:#273449;

}

body.dark .photo-tags a,
body.dark-mode .photo-tags a{

    background:#1e293b;

    color:#e2e8f0;

}

body.dark .photo-tags a:hover,
body.dark-mode .photo-tags a:hover{

    background:#2563eb;

    color:#fff;

}

body.dark .latest-title,
body.dark-mode .latest-title{

    color:#fff;

}

body.dark .latest-item,
body.dark-mode .latest-item{

    color:#f1f5f9;

}

body.dark .latest-info h4,
body.dark-mode .latest-info h4{

    color:#f1f5f9;

}

body.dark .latest-item:hover h4,
body.dark-mode .latest-item:hover h4{

    color:#60a5fa;

}

body.dark .latest-total,
body.dark-mode .latest-total{

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

}

body.dark .share-btn,
body.dark-mode .share-btn{

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

    border-color:rgba(255,255,255,.15);

}

body.dark .share-btn:hover,
body.dark-mode .share-btn:hover{

    background:#2563eb;

    color:#fff;

}

body.dark .photo-nav,
body.dark-mode .photo-nav,

body.dark .thumb-nav,
body.dark-mode .thumb-nav,

body.dark .fullscreen-btn,
body.dark-mode .fullscreen-btn{

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

    color:#fff;

}

body.dark .photo-nav:hover,
body.dark-mode .photo-nav:hover,

body.dark .thumb-nav:hover,
body.dark-mode .thumb-nav:hover,

body.dark .fullscreen-btn:hover,
body.dark-mode .fullscreen-btn:hover{

    background:#2563eb;

    color:#fff;

}

body.dark .thumb.active,
body.dark-mode .thumb.active{

    border-color:#3b82f6;

}

body.dark .photo-thumbnails,
body.dark-mode .photo-thumbnails{

    background:#020617;

}

body.dark .lightbox-caption,
body.dark-mode .lightbox-caption{

    color:#fff;

}

body.dark .lightbox-count,
body.dark-mode .lightbox-count{

    color:#fff;

}

body.dark .read-more-btn,
body.dark-mode .read-more-btn{

    color:#60a5fa;

}

/* =====================================
PHOTO FEATURE LIST PAGE
TIDAK BENTROK DENGAN PHOTO VIEW PAGE
===================================== */


.photo-list-page{

    width:100%;
    background:#fff;
    padding:25px 0 40px;

}


.photo-list-container{

    max-width:1400px;
    margin:auto;
    padding:0 20px;

}


/* =====================================
FEATURE
===================================== */


.photo-list-page .photo-feature{

    display:grid;

    grid-template-columns:2.6fr 1fr;

    gap:10px;

    margin-bottom:25px;

}



.photo-list-page .photo-main{

    position:relative;

    height:500px;

    overflow:hidden;

    border-radius:8px;

}



.photo-list-page .photo-main img,
.photo-list-page .photo-side-item img,
.photo-list-page .photo-grid-card img{


    width:100%;
    height:100%;

    object-fit:cover;

}



/* OVERLAY */


.photo-list-page .photo-overlay,
.photo-list-page .grid-overlay{


    position:absolute;

    inset:0;


    background:
    linear-gradient(
        transparent 35%,
        rgba(0,0,0,.80)
    );


}



/* MAIN TITLE */


.photo-list-page .photo-main-title{


    position:absolute;

    left:20px;

    right:20px;

    bottom:20px;


    display:flex;

    align-items:center;

    gap:12px;


    color:#fff;


}



.photo-list-page .photo-main-title h1{


    margin:0;

    font-size:28px;

    line-height:1.25;

}



/* ICON */


.photo-list-page .photo-icon{


    width:45px;

    height:45px;


    background:#fff;

    color:#555;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:6px;


}



/* TOTAL */


.photo-list-page .photo-total{


    position:absolute;

    right:10px;

    bottom:10px;


    padding:5px 10px;


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

    color:#fff;


    font-size:12px;

    border-radius:4px;

}



/* =====================================
SIDE FEATURE
===================================== */


.photo-list-page .photo-side{


    display:flex;

    flex-direction:column;

    gap:8px;

}



.photo-list-page .photo-side-item{


    position:relative;

    height:134px;

    overflow:hidden;

    border-radius:6px;

    color:#fff;


}



.photo-list-page .photo-side-item h3{


    position:absolute;


    left:12px;

    right:12px;

    bottom:12px;


    margin:0;


    font-size:15px;

    line-height:1.35;


}



/* =====================================
GRID FOTO
===================================== */


.photo-list-page .photo-grid-modern{


    display:grid;

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

    gap:14px;


}



.photo-list-page .photo-grid-card{


    position:relative;


    height:180px;


    overflow:hidden;

    border-radius:6px;


    color:#fff;


}



.photo-list-page .photo-grid-card h3{


    position:absolute;


    left:10px;

    right:10px;


    bottom:12px;


    margin:0;


    font-size:14px;

    line-height:1.35;


}



.photo-list-page .grid-total{


    position:absolute;

    right:8px;

    top:8px;


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

    color:#fff;


    padding:3px 7px;


    font-size:12px;

    border-radius:3px;


}



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


@media(max-width:1024px){


.photo-list-page .photo-feature{

    grid-template-columns:1fr;

}



.photo-list-page .photo-main{

    height:380px;

}



.photo-list-page .photo-grid-modern{

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

}



}



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


@media(max-width:768px){


.photo-list-page{

    padding:15px 0;

}



.photo-list-page .photo-feature{

    grid-template-columns:1fr;

}



.photo-list-page .photo-main{

    height:300px;

}



.photo-list-page .photo-main-title h1{


    font-size:20px;

}



.photo-list-page .photo-icon{


    width:38px;

    height:38px;

}



.photo-list-page .photo-grid-modern{


    grid-template-columns:repeat(2,1fr);

    gap:10px;


}



.photo-list-page .photo-grid-card{


    height:150px;

}



}



/* =====================================
DARK MODE
===================================== */


body.dark .photo-list-page,
body.dark-mode .photo-list-page{


    background:#0f172a;


}


body.dark .photo-list-container,
body.dark-mode .photo-list-container{


    color:#fff;

}

/* =====================================
PHOTO PAGINATION
===================================== */


.photo-pagination{

display:flex;

justify-content:center;

gap:8px;

margin-top:35px;

}



.photo-pagination button{


width:38px;

height:38px;


border:none;

border-radius:50%;


background:#f1f5f9;

color:#334155;


cursor:pointer;


font-weight:600;


transition:.25s;


}



.photo-pagination button:hover,
.photo-pagination button.active{


background:#0d6efd;

color:#fff;


}



body.dark .photo-pagination button,
body.dark-mode .photo-pagination button{


background:#1e293b;

color:#fff;


}


body.dark .photo-pagination button.active,
body.dark-mode .photo-pagination button.active{


background:#2563eb;

}