/*==================================================
    PORTFOLIO
==================================================*/

.portfolio{

    padding:120px 0;
    background:#F8FAFC;

}

.portfolio-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin:60px 0;

}

.filter-btn{

    padding:14px 28px;
    border-radius:50px;
    border:1px solid var(--border);
    background:#fff;
    cursor:pointer;
    transition:.35s;

}

.filter-btn.active,
.filter-btn:hover{

    background:var(--primary);
    color:#fff;
    border-color:var(--primary);

}

.portfolio-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.portfolio-card{

    position:relative;
    overflow:hidden;
    border-radius:24px;
    cursor:pointer;
    background:#fff;
    box-shadow:var(--shadow);

    aspect-ratio: 4 / 3;
    width: 100%;

    transition:
        opacity .3s ease,
        transform .3s ease,
        box-shadow .35s ease;

}

.portfolio-card:hover img{

    transform:scale(1.08);

}

.portfolio-overlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
        to top,
        rgba(15,23,42,.9),
        transparent
    );

    opacity:0;
    transition:.35s;

}

.portfolio-overlay h3{

    color:#fff;

}

.portfolio-overlay p{

    color:#CBD5E1;

}

/* ==========================================
   PORTFOLIO ASPECT RATIO 9:16 (PORTRAIT)
=========================================== */

/* Class khusus untuk kartu 9:16 */
.portfolio-card.vertical .portfolio-image-wrapper,
.portfolio-item.vertical .portfolio-image-wrapper {
    aspect-ratio: 9 / 16;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.portfolio-card.vertical img,
.portfolio-card.vertical video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar/video memenuhi area 9:16 dengan rapi */
}

/* ==========================================
   PENYESUAIAN MODAL POPUP UNTUK 9:16
=========================================== */

/* Agar modal tidak terlalu tinggi melebihi layar di PC/Desktop */
.portfolio-modal .modal-image-wrapper.vertical {
    max-height: 75vh;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
}

.portfolio-modal .modal-image-wrapper.vertical img,
.portfolio-modal .modal-image-wrapper.vertical video {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/*==================================================
    MODAL
==================================================*/

.portfolio-modal{

    position:fixed;
    inset:0;

    background:rgba(15,23,42,.75);
    backdrop-filter:blur(10px);

    display:flex;
    justify-content:center;
    align-items:center;

    visibility:hidden;
    opacity:0;

    transition:.35s;

    z-index:99999; /* Ubah dari 9999 menjadi 99999 */

}

.portfolio-modal.active{

    visibility:visible;
    opacity:1;

}

.portfolio-modal-content{

    width:95%;
    max-width:1100px;
    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    display:grid;
    grid-template-columns:1.1fr 1fr;

}

.modal-image-wrapper{

    min-height:650px;

}

.modal-image{

    width:100%;
    height:100%;
    object-fit:cover;

}

.modal-info{

    padding:50px;

}

.close-modal{

    position:absolute;
    top:20px;
    right:20px;

    width:50px;
    height:50px;

    border:none;
    border-radius:50%;

    background:#ffffff;
    color:#0F172A;

    font-size:22px;
    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    transition:.3s;

    z-index:1000;

}

.close-modal:hover{

    background:var(--primary);
    color:#fff;
    transform:rotate(90deg) scale(1.08);

}

/*==================================================
    PORTFOLIO FILTER ANIMATION
==================================================*/

.portfolio-card{

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

}

.portfolio-overlay{

    transform:translateY(20px);

    transition:

        opacity .35s,

        transform .35s;

}

/* Sesudah (Benar) */
.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.view-project{

    margin-top:18px;

    padding:12px 18px;

    border:none;

    border-radius:12px;

    background:#fff;

    color:var(--primary);

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}

.view-project:hover{

    transform:translateX(6px);

}

/*==================================================
    PAGINATION STYLING
==================================================*/
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-btn:hover:not(:disabled) {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.page-btn.active {
    background-color: #0f172a; /* Warna tombol aktif */
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}