/* =========================
   GLOBAL
========================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", Arial, sans-serif;
    background: #ffffff;
    color: #1f2933;
    overflow-x: hidden;
    width: 100%;
}

section {
    width: 100%;
}

.hero + section {
    margin-top: 0px;
}

section + section {
    margin-top: 0px;
}

/* =========================
   NAVBAR
========================= */
.sbk-navbar {
    width: 100%;
    background: #0e1f2f;
}

.sbk-navbar-top {
    height: 5px;
    background: #f2d16b;
}

.sbk-navbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 80px;
}

.sbk-logo img {
    height: 50px;
}

.sbk-menu {
    display: flex;
    gap: 26px;
    align-items: center;
}

.sbk-menu a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
}

.sbk-menu a:hover {
    color: #f5d76e;
}

/* =========================
   DROPDOWN
========================= */
.sbk-dropdown {
    position: relative;
}

.sbk-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
}

.sbk-dropdown > a {
    cursor: pointer;
}

.sbk-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;

    background: rgba(14, 31, 47, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    min-width: 210px;
    border: 1px solid rgba(242, 209, 107, 0.6);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    display: none;
    flex-direction: column;
    z-index: 999;
}

.sbk-dropdown-menu a {
    padding: 10px 16px;
    font-size: 14px;
    color: #f5d76e;
    text-decoration: none;
    white-space: nowrap;
}

.sbk-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sbk-dropdown:hover .sbk-dropdown-menu,
.sbk-dropdown-menu:hover {
    display: flex;
}

/* =========================
   LOGIN ICON
========================= */
.sbk-login a {
    color: #ffffff;
    font-size: 22px;
    opacity: 0.15;
    text-decoration: none;
}

.sbk-login a:hover {
    opacity: 0.8;
    color: #f5d76e;
}

/* ===============================
   HERO SECTION (FULL WIDTH CARD)
================================ */

/* Pembungkus utama agar rata tengah dan lebarnya sama dengan konten bawahnya */
.hero {
    width: 100%;
    /* 1. SEKARANG BACKGROUND SECTION ABU-ABU */
    background-color: #d0d0d0;
    /* Beri sedikit spasi vertikal agar section gray terlihat jelas */
    padding: 10px 0;
    /* Hapus margin atas/bawah agar section gray menyatu ke navbar */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Hapus max-width lama agar section merentang penuh */
    max-width: none !important;
}

/* Card Slider (Putih dengan Sudut Melengkung) */
/* Card Slider (Putih dengan Sudut Melengkung, Garis Biru Emas, & Bayangan Premium) */
.hero-right {
    position: relative;
    background-color: #fff; /* Pastikan card berwarna putih */
    border-radius: 1px; /* Sudut melengkung (efek card) */
    overflow: hidden;
    height: 480px; /* Tinggi card dipertahankan */
    width: 99%; /* Card mengambil 95% lebar layar */
    max-width: 1400px;
    margin: 0 auto;
    z-index: 5; /* Pastikan card berada di atas background gray */

    /* =========================================================
       1. GARIS EMAS (Garis Utama di Luar Card)
       Kita gunakan border standard untuk garis pertama.
    ========================================================= */
    border: 1px solid #f2d16b; /* Lebar 3px, warna Emas SBK */

    /* =========================================================
       2. GARIS BIRU GANDA (Garis Tambahan & Bayangan Premium)
       Kita gunakan box-shadow menumpuk untuk membuat garis ganda
       dan bayangan premium secara bersamaan tanpa merusak layout.
    ========================================================= */
    box-shadow: 
        /* LAPISAN 1: GARIS BIRU GANDA (Garis Tipis Gelap di Luar Emas) */
        0 0 0 1px #0e1f2f,
        /* Ketebalan 1px, warna Biru Gelap SBK */ 0 0 0 3px #1a3c5a,
        /* Ketebalan total 3px, warna Biru Terang SBK */
        /* LAPISAN 2: BAYANGAN PREMIUM (Glow/Bayangan Halus) */ 0 15px 40px
            rgba(14, 31, 47, 0.25); /* Bayangan soft berwarna biru gelap */
}

/* Slider Wrapper */
.hero-slider {
    width: 100%;
    height: 480px; /* Sesuaikan dengan tinggi slider Anda */
    position: relative;
    overflow: hidden; /* CRITICAL: Ini untuk membuang gambar yang meluber */
}

.hero-track {
    display: flex;
    /* Hapus width: 100% agar track bisa memanjang mengikuti jumlah gambar */
    height: 100%;
    transition: transform 0.8s ease-in-out;
    will-change: transform; /* Memberitahu browser untuk optimasi animasi */
}

.hero-track img {
    /* Pastikan setiap gambar mengambil 100% lebar slider dan TIDAK menyusut */
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;

    flex-shrink: 0; /* Mencegah gambar menyusut saat flexbox penuh */
    /* Tambahan untuk persiapan animasi zoom */
    transform-origin: center center;
    transform: scale(1);
    will-change: transform; /* Optimasi performa animasi */
}

/* Pengaturan khusus untuk gambar dengan class .fit-image */
.hero-track img.fit-image {
    object-fit: contain;
    background-color: #ffffff; /* Tambahkan warna background agar sisa ruangnya rapi */
}

/* =========================================================
   ANIMASI SLOWMO ZOOM HERO SLIDER
========================================================= */
@keyframes slowmoZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.15);
    }
}

/* Class 'active' ini harus dipicu oleh JavaScript saat slide berganti */
.hero-track img.active {
    animation: slowmoZoom 10s ease-in-out forwards;
}
/* --- (Teks Overlay Tetap seperti Semula) --- */
/* Pastikan ini ada di public.css Anda */
.hero-overlay {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(2px);
    padding: 14px 16px 14px 22px;
    border-radius: 12px;
    max-width: 960px;
    color: #ffffff;
    z-index: 10;
}

.hero-text-overlay h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.hero-text-overlay p {
    font-size: 16px;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

/* ===============================
   LEFT COLUMN
================================ */
.hero-left {
    width: 32%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ===============================
   HERO CARD
================================ */
.hero-card {
    display: block;
    background: #000;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.hero-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

/* IMAGE */
.hero-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

/* FOOTER CARD */
.hero-card-footer {
    background: #f2d16b;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-card-footer span {
    font-weight: 700;
    font-size: 14px;
    color: #111;
}

.hero-card-footer small {
    font-size: 8px;
    font-weight: 600;
    color: #000000;
    transition:
        color 0.3s ease,
        transform 1.3s ease,
        opacity 1.3s ease;
}

.hero-card-footer small:hover {
    color: #ffffff; /* warna saat hover */
}

/* saat hover */
.hero-card:hover .hero-card-footer small {
    transform: translateX(6px);
    opacity: 0.85;
}

/* ===============================
   RIGHT COLUMN
================================
.hero-right {
    width: 68%;
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    height: 430px; 
    margin-top: 12px;
}

 HERO IMAGE
.hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}*/

/* SLIDER
/* SLIDER WRAPPER
.hero-slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* TRACK 
.hero-track {
    display: flex;
    height: 100%;
    transition: transform 0.8s ease-in-out;
}

/* IMAGE
.hero-track img {
    min-width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}*/

/* ===============================
   HERO OVERLAY
================================ */
.hero-overlay {
    position: absolute;
    bottom: 14px;
    left: 24px;

    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    padding: 14px 16px 14px 22px; /* kiri lebih besar */
    border-radius: 12px;
    max-width: 360px;
    color: #ffffff;
}

.hero-overlay::before {
    content: "";
    position: absolute;
    left: 10px; /* jarak dari kiri overlay */
    top: 18px;
    bottom: 56px; /* tinggi mengikuti teks */

    width: 3px; /* ketebalan garis */
    background: #f2d16b;
    border-radius: 2px;
}

.hero-overlay h1 {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1px;
    font-weight: 700;
}

.hero-overlay h2 {
    font-size: 10px;
    line-height: 1.3;
    margin-top: 0px;
    margin-bottom: 4px;
    font-weight: normal;
}
.hero-overlay p {
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.9;
    margin-bottom: 4px;
}

/* ===============================
   PROFIL SINGKAT
================================ */

.profile-section {
    background: #ffffff;
    padding: 70px 0 90px;
}

.profile-container {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 70px;
    align-items: center;
}

/* LEFT IMAGE */
.profile-images {
    position: relative;
}

.profile-images::before {
    content: "";
    position: absolute;
    inset: -20px;
    border: 6px solid #f3f3f3;
    z-index: 0;
}

.profile-images img {
    position: relative;
    z-index: 1;
    border-radius: 4px;
}

.img-main {
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.img-float {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 260px;
    object-fit: cover;
    border: 6px solid #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* RIGHT CONTENT */
.profile-content {
    padding-right: 30px;
}

.profile-headline {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.profile-headline .year {
    font-size: 56px;
    font-weight: 800;
    background: linear-gradient(180deg, #f2d16b, #f2d16b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-headline .divider {
    width: 2px;
    height: 55px;
    background: #f2d16b;
}

.profile-headline small {
    font-size: 11px;
    letter-spacing: 1px;
    color: #999;
    display: block;
}

.profile-headline h2 {
    font-size: 26px;
    font-weight: 700;
    margin-top: 4px;
    margin-bottom: 10px;
}

/* TEXT */
.profile-desc {
    font-size: 20px;
    line-height: 1.3;
    color: #5f5f5f;
    margin-bottom: 14px;
    font-weight: 700;
}

.profile-desc.muted {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    font-weight: 100;
}

/* STATS */
/* CONTAINER */
.profile-stats {
    display: flex;
    gap: 48px;
    margin-top: 34px;
}

/* STAT ITEM */
.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ICON + ANGKA SATU BARIS */
.stat-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ICON */
.stat-icon {
    font-size: 22px;
    color: #5b5b5b;
    display: flex;
    align-items: center;
}

/* ANGKA */
.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #f2c94c;
    line-height: 1;
}

/* GARIS PANJANG */
.stat-line {
    width: 140px; /* panjang garis */
    height: 2px;
    background: #f2c94c;
    margin: 10px 0 12px;
}

/* TEKS BAWAH */
.stat small {
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    font-weight: 500;
    max-width: 150px;
}

/* ======================
   ANIMASI ICON
====================== */

.spin-clock {
    display: inline-block;
    animation: clock-spin 1s linear infinite;
}

.fast-clock {
    display: inline-block;
    animation: clock-spin 1.5s linear infinite;
}

@keyframes clock-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.check-loop {
    font-size: 22px;
    display: inline-block;
    animation: check-loop 1.6s ease-in-out infinite;
}

@keyframes check-loop {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    25% {
        opacity: 1;
        transform: scale(1.1);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    75% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* ===============================
   SERTIFIKASI SECTION
================================ */

.sertifikasi-section {
    background: #0e1f2f;
    padding: 80px 20px 100px;
    text-align: center;
}

/* JUDUL */
.sertifikasi-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    margin-top: 10px;
    letter-spacing: 0.6px;
}

/* GARIS EMAS */
.sertifikasi-line {
    width: 60px;
    height: 3px;
    background: #f2d16b;
    margin: 12px auto 60px;
    border-radius: 2px;
}

/* WRAPPER */
.sertifikasi-box-wrapper {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

/* LOGO OVERLAP */
.sertifikasi-logo {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.sertifikasi-logo img {
    width: 54px;
    height: auto;
}

/* BOX KUNING */
.sertifikasi-box {
    background: #f7e8a5;
    padding: 54px 48px 42px;
    border-radius: 16px;
    line-height: 1.75;
    font-size: 14px;
    color: #222;
}

.sertifikasi-box p {
    margin-bottom: 18px;
}

/* VISI MISI SECTION */
.visi-misi-section {
    background: #fdf5d3;
    padding: 60px 24px;
    font-family: "Inter", sans-serif;
}

.visi-misi-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.2fr 0.8fr;
    gap: 30px;
}

/* --- KOLOM KIRI --- */
.left-column {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 24px;
}

.card-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px 35px;
    /* Hard shadow sesuai screenshot target */
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    background-color: #0e1f2f;
    color: #ffffff;
    padding: 6px 18px 6px 18px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.badge-icon svg {
    width: 28px;
    height: 20px;
    margin-right: 12px;
    color: #ffffff;
}
.section-badge span {
    font-weight: 700;
    font-size: 22px;
}

/* Container garis kuning */
.accent-content {
    border-left: 4px solid #ebd07f;
    margin-left: 5px;
    padding-left: 10px; /* Jarak teks ke garis kuning */
}

.visi-card {
    max-width: 490px;
}

/* Typography Visi */
.visi-card p {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    margin: 0;
}

/* Typography Misi */
.misi-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.misi-card li {
    position: relative;
    padding-left: 18px; /* Jarak teks ke garis kuning */
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
}

/* Bullet (Titik) Kustom */
.misi-card li::before {
    content: "•";
    position: absolute;
    left: 4px; /* Posisi titik di antara garis kuning dan teks */
    top: -1px;
    font-size: 18px;
    color: #333;
}

/* --- KOLOM KANAN (Side Boxes) --- */
.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.side-box {
    position: relative;
    text-decoration: none;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;

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

    min-height: 140px;
    text-align: center;
    transform-style: preserve-3d;

    /* Hard shadow default */
    box-shadow:
        6px 6px 0px rgba(0, 0, 0, 0.12),
        0 6px 14px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

/* === FLOATING EFFECT === */

.side-box:hover {
    transform: translateY(-30px) scale(1.04);
    box-shadow:
        24px 24px 0px rgba(0, 0, 0, 0.18),
        0 40px 70px rgba(0, 0, 0, 0.22);
    background: #0e1f2f;
}

.side-icon {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-icon svg {
    width: 40px;
    height: 40px;
    color: #111;
    stroke-width: 2;
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.side-box span {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
    max-width: 130px;
    transition: color 0.3s ease;
}

.side-box:hover span,
.side-box:hover .side-icon svg {
    color: #f2d16b; /* Kuning Emas */
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .visi-misi-wrapper {
        grid-template-columns: 1fr;
    }
    .right-column {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .side-box {
        flex: 1;
        min-width: 140px;
    }
}

/* =========================================
   RUANG LINGKUP SECTION (THEME MATCHING)
========================================= */

.ruang-lingkup-section {
    background-color: #ffffff; /* Background section bersih */
    padding: 80px 0 100px;
    font-family: "Inter", sans-serif;
    position: relative;
}

/* HEADER STYLE (Mirip Section Sertifikasi) */
.lingkup-header {
    text-align: center;
    margin-bottom: 50px;
}

.lingkup-title {
    font-size: 32px;
    font-weight: 800;
    color: #0e1f2f; /* Biru Gelap */
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lingkup-line {
    width: 70px;
    height: 4px;
    background: #f2d16b; /* Emas */
    margin: 0 auto;
    border-radius: 2px;
}

/* GRID LAYOUT */
.lingkup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 30px;
    padding: 0 10px;
}

/* CARD ITEM */
.lingkup-card {
    position: relative;
    height: 280px; /* Tinggi kartu fix agar rapi */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    border-bottom: 5px solid #0e1f2f; /* Border bawah default */
}

/* BACKGROUND IMAGE */
.lingkup-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease; /* Smooth zoom effect */
    z-index: 1;
}

/* OVERLAY WARNA TEMA (FILTER) */
.lingkup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient dari Biru Gelap Solid ke Biru Gelap Transparan */
    background: linear-gradient(
        to top,
        rgba(14, 31, 47, 0.95) 20%,
        rgba(14, 31, 47, 0.75) 100%
    );
    z-index: 2;
    transition: background 0.3s ease;
}

/* KONTEN TEKS (LAYER DEPAN) */
.lingkup-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    color: #ffffff;
}

/* ICON */
.icon-wrapper {
    font-size: 42px;
    color: #f2d16b; /* Icon Emas */
    margin-bottom: 15px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* JUDUL KARTU */
.card-title {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    color: #ffffff;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* DIVIDER KECIL */
.card-divider {
    width: 70px;
    height: 3px;
    background: #f2d16b;
    margin: 15px 0 20px; /* Atur jarak atas dan bawah */
    flex-shrink: 0; /* Tambahkan ini agar divider tidak menciut saat ruang sempit */
}

/* LIST CONTENT */
.lingkup-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* List rata kiri agar mudah dibaca */
    width: 100%;
    padding-left: 10px; /* Sedikit indentasi */
}

.lingkup-list li {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px;
    color: #e2e8f0; /* Putih agak abu agar tidak sakit mata */
    transition: color 0.3s;
}

/* Bullet Custom Emas */
.lingkup-list li::before {
    content: "•";
    color: #f2d16b;
    font-size: 18px;
    position: absolute;
    left: 0;
    top: -2px;
}

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

/* Zoom Image saat Hover */
.lingkup-card:hover .lingkup-bg {
    transform: scale(1.1); /* Gambar membesar */
}

/* Card terangkat sedikit */
.lingkup-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-bottom: 5px solid #f2d16b; /* Border bawah berubah jadi Emas */
}

/* List text jadi lebih putih terang saat hover */
.lingkup-card:hover .lingkup-list li {
    color: #ffffff;
}

/* =========================
   RESPONSIVE (Mobile)
========================= */
@media (max-width: 992px) {
    .lingkup-grid {
        grid-template-columns: 1fr; /* 1 Kolom di HP */
        gap: 40px;
    }

    .lingkup-card {
        height: auto; /* Tinggi menyesuaikan konten */
        min-height: 400px;
    }
}

/* =========================================
   1. GLOBAL LAYOUT & SECTION SETUP
   ========================================= */

.partnership-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    padding-top: 40px;
    padding-bottom: 0px;
}

/* Background Image & Overlay */
.partnership-section .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.partnership-section .bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle,
        rgba(23, 33, 60, 0.4) 0%,
        rgba(23, 33, 60, 0.95) 100%
    );
    z-index: 2;
}

.custom-container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Grid Layout 2 Kolom */
.partnership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
    padding-top: 20px;
}

.section-col {
    display: flex;
    justify-content: center;
    position: relative;
}

/* Badge Judul (MITRA & ASESOR) */
.badge-title {
    background-color: #ffe066;
    color: #000;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 8px 32px;
    border-radius: 30px;
    border: 2px solid #000;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 20;
    margin-bottom: 10px;
    text-align: center;
    display: inline-block;
}

/* Wrapper Area per Kolom */
.mitra-area,
.assesor-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Kotak Deskripsi (Transparan Hitam) */
.desc-box {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    padding: 10px 15px; /* Sedikit dirapikan */
    width: 260px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #e0e0e0;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
    position: absolute;
    z-index: 2;
}

.desc-box p {
    position: relative;
    padding-left: 10px;
    margin: 0;
}

.desc-box p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 2px;
    background: #f2d16b;
}

/* =========================================
   2. BAGIAN KIRI: MITRA (TIDAK BERUBAH)
   ========================================= */
.slider-composition-mitra {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 350px;
}

/* Frame Lengkung */
.arch-frame {
    width: 240px;
    height: 320px;
    background: #000;
    border-radius: 120px 120px 0 0;
    border: 4px solid #333;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    overflow: visible;
}

.arch-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 115px 115px 0 0;
    display: block;
    transition: opacity 0.2s ease;
}

/* Tombol Pill */
.btn-pill-black {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1a1a1a;
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid #555;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    z-index: 5;
}

.btn-pill-black:hover {
    background-color: #ffe066;
    color: #000;
    border-color: #000;
}

/* Navigasi Teks << >> */
.nav-arrow-text {
    font-size: 1.8rem;
    color: #000000;
    opacity: 0.5;
    cursor: pointer;
    font-weight: 300;
    user-select: none;
    padding: 0 20px;
    transition: transform 0.2s;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.nav-arrow-text:hover {
    font-weight: 700;
    color: #f2d16b;
    transform: scale(1.1);
}

.mitra-desc-pos {
    bottom: -115px;
    left: -20px;
}

/* =========================================
   3. BAGIAN KANAN: ASESOR (BARU - LOGIKA KARTU)
   ========================================= */

/* Container Utama Slider */
.slider-composition-assesor {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 360px;
    margin-top: 10px;
    perspective: 1000px; /* Penting untuk efek 3D */
    touch-action: pan-y; /* Agar scroll halaman vertikal tetap jalan di HP */
}

/* Style Dasar Kartu */
.card-frame {
    position: absolute;
    width: 210px;
    height: 310px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* Default posisi: Tengah, kecil, transparan (Hidden state) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
    z-index: 0;

    /* Transisi Halus (Smooth) */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* --- STATE: ACTIVE (TENGAH) --- */
.card-frame.active {
    opacity: 1;
    z-index: 20;
    transform: translate(-50%, -50%) scale(1);
    border: 3px solid #ffe066;
    pointer-events: auto;
}

/* --- STATE: PREV (KIRI) --- */
.card-frame.prev {
    opacity: 0.7;
    z-index: 10;
    /* Geser kiri 150px dari tengah */
    transform: translate(calc(-50% - 150px), -50%) scale(0.85);
    filter: grayscale(100%);
    pointer-events: auto;
}

/* --- STATE: NEXT (KANAN) --- */
.card-frame.next {
    opacity: 0.7;
    z-index: 10;
    /* Geser kanan 150px dari tengah */
    transform: translate(calc(-50% + 150px), -50%) scale(0.85);
    filter: grayscale(100%);
    pointer-events: auto;
}

/* --- STATE: HIDDEN (ANTRIAN) --- */
.card-frame.hidden {
    opacity: 0;
    z-index: 0;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none; /* Tidak bisa diklik */
}

/* Hover Effect pada kartu samping */
.card-frame.prev:hover,
.card-frame.next:hover {
    opacity: 1;
    filter: grayscale(0%);
    z-index: 8;
    transform: translate(calc(-50% - 150px), -50%) scale(0.9); /* Sedikit membesar saat hover */
}
.card-frame.next:hover {
    transform: translate(calc(-50% + 150px), -50%) scale(0.9);
}

/* Isi dalam Kartu */
.assesor-link-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.card-frame img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top center;
    border-radius: 4px;
    border-bottom: 2px solid #eee;
    background-color: #ddd;
    pointer-events: none;
}

.name-plate {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 5px;
    background-color: #fff;
    color: #333;
}

.sub-role {
    font-size: 0.7rem;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.real-name {
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

.assesor-desc-pos {
    top: -50px;
    left: -120px;
    pointer-events: none; /* Agar tidak menghalangi klik slider */
}

/* =========================================
   4. RESPONSIVE (MOBILE / TABLET)
   ========================================= */

@media (max-width: 992px) {
    .partnership-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .mitra-area,
    .assesor-area {
        margin-bottom: 20px;
    }

    /* Reset deskripsi agar flow ke bawah */
    .desc-box {
        position: static;
        margin-top: 30px;
        text-align: center;
        width: 90%;
        max-width: 400px;
        transform: none;
        pointer-events: auto;
    }

    .mitra-desc-pos,
    .assesor-desc-pos {
        left: auto;
        bottom: auto;
        top: auto;
    }

    /* Penyesuaian Slider Asesor di Tablet */
    /* Container Utama Slider */
    .slider-composition-assesor {
        position: relative;
        width: 100%;
        max-width: 450px; /* Lebar area kartu utama */
        height: 360px;
        margin-top: 10px;
        perspective: 1000px;
        touch-action: pan-y;
        /* Pastikan overflow terlihat agar kartu samping bisa "nongol" keluar */
        overflow: visible;
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 20%,
            black 80%,
            transparent
        );
        mask-image: linear-gradient(
            to right,
            transparent,
            black 20%,
            black 80%,
            transparent
        );
    }

    /* --- STATE: PREV (KIRI - Separuh Menghilang) --- */
    .card-frame.prev {
        opacity: 0.5;
        z-index: 5;
        /* Geser lebih jauh ke kiri (misal: -220px) agar terpotong layar/container */
        transform: translate(calc(-50% - 220px), -50%) scale(0.8);
        filter: grayscale(100%) blur(1px); /* Tambah sedikit blur agar fokus ke tengah */
    }

    /* --- STATE: NEXT (KANAN - Separuh Menghilang) --- */
    .card-frame.next {
        opacity: 0.5;
        z-index: 5;
        /* Geser lebih jauh ke kanan (misal: 220px) agar terpotong layar/container */
        transform: translate(calc(-50% + 220px), -50%) scale(0.8);
        filter: grayscale(100%) blur(1px);
    }

    /* Hover state mobile disamakan */
    .card-frame.prev:hover {
        transform: translate(calc(-50% - 100px), -50%) scale(0.8);
    }
    .card-frame.next:hover {
        transform: translate(calc(-50% + 100px), -50%) scale(0.8);
    }
}

@media (max-width: 480px) {
    /* Ukuran kartu lebih kecil di HP */
    .card-frame {
        width: 180px;
        height: 280px;
    }
    .card-frame img {
        height: 190px;
    }

    /* Jarak kartu prev/next lebih rapat */
    .card-frame.prev {
        transform: translate(calc(-50% - 80px), -50%) scale(0.7);
        opacity: 0.4; /* Lebih transparan agar fokus ke tengah */
    }
    .card-frame.next {
        transform: translate(calc(-50% + 80px), -50%) scale(0.7);
        opacity: 0.4;
    }

    /* Hilangkan efek hover di HP agar tidak aneh saat scroll */
    .card-frame.prev:hover,
    .card-frame.next:hover {
        transform: inherit;
    }
}

/* RESPONSIVE UNTUK MOBILE (Sangat Penting agar tidak terlalu jauh keluar layar) */
@media (max-width: 992px) {
    .card-frame.prev {
        transform: translate(calc(-50% - 180px), -50%) scale(0.7);
    }
    .card-frame.next {
        transform: translate(calc(-50% + 180px), -50%) scale(0.7);
    }
}

@media (max-width: 480px) {
    .card-frame.prev {
        transform: translate(calc(-50% - 140px), -50%) scale(0.65);
    }
    .card-frame.next {
        transform: translate(calc(-50% + 140px), -50%) scale(0.65);
    }
}

/* =========================================
   GALERI & RATING SECTION STYLES
   ========================================= */
.galeri-rating-section {
    padding: 5px 10px 25px 0; /* Jarak atas lebih kecil */
    background-color: #fff;
    border-bottom: 6px solid #202938;
}

.galeri-rating-section .custom-container {
    border-top: 5px solid #f2d16b; /* Border sekarang hanya sebatas lebar kontainer */
}

.gr-layout {
    display: flex;
    align-items: center; /* Center secara vertikal */
    justify-content: space-between;
    gap: 20px;
}

/* --- KOLOM KIRI (LABEL) --- */
.gr-left {
    flex: 0 0 15%; /* Lebar fix */
    text-align: left;
}
.gr-title {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.gr-link {
    font-size: 10px; /* Di desain terlihat sangat kecil */
    color: #94a3b8;
    text-decoration: none;
    font-weight: 600;
    margin-left: 20px;
    display: block;
    text-decoration: none;
    transition: color 0.3s;
}
.gr-link:hover {
    transform: translateX(5px);
    color: #d4af37; /* Warna Emas */
}

/* --- KOLOM TENGAH (SLIDER) --- */
.gr-center {
    flex: 1; /* Mengisi ruang sisa */
    text-align: center;
    position: relative;
    padding: 0 20px;
}
.gr-subtitle {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 8px; /* Jarak ke foto dipersempit */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000;
}

.gallery-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
}

.gallery-frame {
    width: 100%;
    max-width: 380px; /* Mengecilkan lebar sedikit agar proporsional */
    height: 220px; /* Tinggi diturunkan agar identik */
    border-radius: 12px; /* Radius sudut diperkecil agar tidak terlalu bulat */
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background: #f0f0f0;
    border: 1px solid #ddd;
}

/* Item Gambar */
.gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 450px; /* Opsional: kecilkan lebar sedikit */
    height: 220px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none; /* Mencegah hover saat tidak aktif */
}

.gallery-item.active {
    opacity: 1;
    z-index: 2;
    pointer-events: all; /* Aktifkan pointer event hanya pada gambar aktif */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Tombol Navigasi (< >) */
.nav-btn {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #000;
    transition: 0.3s;
    padding: 0 5px;
}
.nav-btn:hover {
    color: #d4af37;
    transform: scale(1.1);
}

/* OVERLAY FILTER GELAP (HOVER EFFECT) */
/* Update pada bagian GALERI & RATING SECTION */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Pastikan tinggi penuh agar flex-end bekerja */
    border-radius: 12px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.2) 70%
    ); /* Gradien agar teks lebih terbaca */
    display: flex;

    /* UBAH DARI CENTER KE FLEX-END */
    align-items: flex-end;

    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 20px; /* Jarak teks dari tepi bawah */
    color: #fff;
    pointer-events: none;
}

/* Logika: Hanya muncul saat hover pada item yg class-nya 'active' */
.gallery-item.active:hover .gallery-overlay {
    opacity: 1;
}

.overlay-text h4 {
    font-size: 18px; /* Sesuaikan ukuran jika diperlukan */
    margin-bottom: 5px;
    color: #d4af37; /* Kuning Emas */
    font-weight: 700;
}
.overlay-text p {
    font-size: 13px;
    color: #fff;
    margin: 0;
}

/* --- DIVIDER --- */
.gr-divider {
    width: 5px; /* Lebih tebal sedikit */
    height: 140px; /* Dipendekkan agar sejajar dengan tinggi konten */
    background-color: #f2d16b;
    margin: 0 40px;
    border-radius: 2px;
}

/* --- KOLOM KANAN (RATING) --- */
.gr-right {
    flex: 0 0 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.star-icon i {
    font-size: 45px;
    color: #ffce31; /* Warna Bintang Kuning */
}
.rating-number {
    font-size: 36px; /* Perkecil angka rating */
    font-weight: 800;
    color: #000;
    line-height: 1.2;
}
.rating-count {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 600;
}
.rating-stat {
    font-size: 18px;
    font-weight: 800;
    margin-top: 5px;
    color: #000;
    margin-bottom: 10px;
}
.mt-2 {
    margin-top: 10px;
}

/* RESPONSIVE TABLET/MOBILE */
@media (max-width: 992px) {
    .gr-layout {
        flex-direction: column;
        text-align: center;
    }
    .gr-divider {
        width: 100px;
        height: 4px; /* Jadi horizontal di mobile */
        margin: 30px auto;
    }
    .gr-left,
    .gr-center,
    .gr-right {
        flex: 100%;
        width: 100%;
        text-align: center;
    }
}

/* ===================================================
   SECTION KLIEN & KONTAK BOX (PENUTUP HALAMAN)
   =================================================== */

.klien-kontak-section {
    background: #ffffff;
    padding: 10px 0 1px 0;
    font-family: "Inter", sans-serif;
}

.klien-kontak-section .custom-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- BAGIAN ATAS: LOGO KLIEN --- */
.klien-wrapper {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.klien-header h3 {
    font-size: 24px;
    font-weight: 800;
    color: #0e1f2f;
    margin: 0 0 10px 0;
    text-transform: capitalize;
}

.klien-line {
    width: 50px;
    height: 4px;
    background-color: #f2d16b; /* Warna Kuning SBK */
    margin: 0 auto 35px auto;
    border-radius: 2px;
}

.klien-content-row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 80px;
}

.klien-logos {
    display: flex;
    gap: 60px; /* Jarak antar logo */
    align-items: center;
    justify-content: center;
}

.klien-link {
    display: inline-block;
    transition: all 0.3s ease;
}

.klien-link img {
    height: 55px; /* Sesuaikan tinggi logo */
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: 0.3s ease;
}

/* Efek saat logo disentuh mouse */
.klien-link:hover {
    transform: translateY(-15px);
}

.klien-link:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- FLOATING SCROLL TOP --- */
.floating-scroll-up {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #f2d16b; /* Kuning SBK */
    color: #0e1f2f; /* Biru Gelap agar kontras */
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;

    /* Default sembunyi, akan muncul via JS */
    opacity: 0;
    visibility: hidden;
}

.floating-scroll-up:hover {
    background-color: #0e1f2f;
    color: #f2d16b;
    transform: translateY(-5px);
}

/* Class untuk memunculkan tombol */
.floating-scroll-up.show {
    opacity: 1;
    visibility: visible;
}
/* Tombol Panah Atas (Kuning) */
.btn-scroll-top {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f2d16b;
    color: #ffffff;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    text-decoration: none;
    font-size: 22px;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-scroll-top:hover {
    background-color: #0e1f2f;
}

/* --- BAGIAN BAWAH: BOX BIRU KONTAK & LOKASI --- */
.contact-blue-box {
    background-color: #0e1f2f; /* Biru Gelap sesuai Navbar */
    color: #ffffff;
    padding: 45px 55px;
    margin-top: 10px;
    border-radius: 0px; /* Persegi panjang tegas sesuai screenshot */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Kolom alamat sedikit lebih lebar */
    gap: 220px;
}

/* Kolom Hubungi Kami */
.contact-item h4 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 22px 0;
    color: #ffffff;
    padding-left: 20px;
}

.contact-item .contact-row,
.location-link,
.contact-item .address-text {
    padding-left: 20px;
}

.location-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.location-link:hover h4 {
    color: #f2d16b;
}

.location-link:hover h4::after {
    opacity: 1;
}

/* Link untuk Kolom Hubungi Kami */
.link-wrap {
    text-decoration: none;
    color: inherit;
    display: block;
}

.link-wrap:hover .contact-title {
    color: #f2d16b;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
}

.icon-gold {
    color: #f2d16b;
    font-size: 18px;
    margin-top: 2px;
}

.icon-gold-pin {
    color: #f2d16b;
    margin-right: 8px;
}

.contact-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.address-text {
    font-size: 14px;
    line-height: 1.7;
    color: #cbd5e0; /* Warna teks agak terang agar nyaman dibaca */
    margin: 0;
}

/* --- RESPONSIVE UNTUK LAYAR KECIL (HP) --- */
@media (max-width: 850px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Tumpuk ke bawah */
        gap: 40px;
    }

    .klien-logos {
        gap: 30px;
        flex-wrap: wrap;
    }

    .btn-scroll-top {
        position: static;
        margin: 30px auto 0;
        transform: none;
    }

    .contact-blue-box {
        padding: 35px 25px;
    }
}

/* =========================
   FOOTER STRIP WRAPPER (FULL)
========================= */
.sbk-footer {
    width: 100%;
    background: #9fa3a7; /* abu-abu kiri & kanan */
    padding: 0;
}

/* =========================
   FOOTER BAR (CENTER)
========================= */
.sbk-footer-box {
    max-width: 1100px;
    margin: 0 auto;
    background: #0e1f2f; /* biru tua */
    padding: 14px 0;
}

/* =========================
   COPYRIGHT TEXT
========================= */
.sbk-footer-content {
    text-align: center;
    color: #9aa4af;
    font-size: 13px;
}

.sbk-footer-content strong {
    color: #ffffff;
}

/* ===============================
   SCROLL REVEAL
================================ */

.reveal {
    opacity: 0;
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

/* Arah berbeda */
.reveal-up {
    transform: translateY(50px);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.reveal-down {
    transform: translateY(-50px);
}

.reveal.show {
    opacity: 1;
    transform: translate(0, 0);
}

/* Delay kanan */
.delay-1 {
    transition-delay: 0.1s;
}
.delay-2 {
    transition-delay: 0.25s;
}
.delay-3 {
    transition-delay: 0.4s;
}