/* Project: PT Lautan Teduh Interniaga - Budaya Perusahaan
   Style: Split-Screen Interactive Slide
*/

* { box-sizing: border-box; }
body { 
    margin: 0; 
    padding: 0; 
    font-family: 'IBM Plex Sans', sans-serif; 
    overflow: hidden; 
    background-color: #000; 
}

/* =========================================
   GLOBAL UI ELEMENTS (KIRI)
   ========================================= */
/* Update Gaya Tombol Kembali */
.btn-home {
    position: fixed; 
    top: 30px; 
    left: 30px; 
    z-index: 100;
    background: #ffffff; 
    color: #333; 
    text-decoration: none;
    padding: 12px 24px; 
    font-size: 12px; 
    font-weight: 700;
    letter-spacing: 1px; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    overflow: hidden; /* Penting agar slide warna tidak keluar kotak */
    transition: color 0.4s ease; /* Transisi warna teks */
}

/* Elemen untuk Slide Biru Yamaha */
.btn-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a3673; /* Biru Yamaha */
    z-index: -1; /* Posisikan di bawah teks */
    transform: scaleX(0); /* Sembunyi di kiri (lebar 0) */
    transform-origin: left; /* Titik mulai animasi dari KIRI */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Efek Saat Hover */
.btn-home:hover {
    color: #ffffff; /* Ubah teks jadi putih agar kontras */
}

.btn-home:hover::before {
    transform: scaleX(1); /* Lebarkan slide biru memenuhi tombol */
}

/* Pastikan Ikon & Teks Berada di Atas Slide */
.btn-home i, .btn-home span {
    position: relative;
    z-index: 1;
}
.culture-nav {
    position: fixed; top: 50%; left: 50px; transform: translateY(-50%);
    z-index: 100; list-style: none; padding: 0; margin: 0;
}
.culture-nav li { margin-bottom: 25px; }
.culture-nav a {
    color: rgba(255, 255, 255, 0.5); text-decoration: none;
    font-size: 18px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; transition: all 0.3s ease;
}
.culture-nav a:hover, .culture-nav a.active { color: #ffffff; }

/* =========================================
   SLIDE SYSTEM (ANIMASI SPLIT SCREEN)
   ========================================= */
.slide-wrap { position: relative; width: 100vw; height: 100vh; }

.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.6s ease;
}
.slide.active { z-index: 5; opacity: 1; visibility: visible; pointer-events: auto; }

.slide-picture {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Efek Awal */
    transform: translateY(-100%); 
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 2;
}
.slide-picture::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
}

.slide-content {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8% 10%;
    color: #fff;
    /* Efek Awal */
    transform: translateY(100%); 
    transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}
/* Trigger Animasi: Saat class .active ditambahkan */
.slide.active .slide-picture,
.slide.active .slide-content {
    transform: translateY(0) !important;
}

/* Tambahkan delay sedikit pada bagian kanan agar gerakannya terlihat bersahutan */
.slide.active .slide-content {
    transition-delay: 0.1s;
}

.val-icon {
    font-size: 380px; /* Ukuran sangat besar */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg); /* Posisi di tengah dan sedikit miring */
    opacity: 0.07;/* Sangat transparan/tipis */
    z-index: 0; /* Di belakang teks */
    pointer-events: none; /* Agar tidak bisa diklik */
    margin-bottom: 0;
    filter: blur(1px); /* Sedikit sentuhan blur agar lebih menyatu */
}
/* Pastikan konten teks berada di depan ikon */
.content-main {
    position: relative;
    z-index: 2;
}

.val-title {
    position: relative;
    z-index: 2;
    /* Tambahkan sedikit bayangan halus agar teks lebih menonjol */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.val-desc { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.8; margin-bottom: 40px; opacity: 0.9; }

.btn-key-expand {
    display: inline-block; padding: 15px 35px; border: 1px solid #ffffff;
    color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; align-self: flex-start;
    transition: 0.3s; background: transparent; cursor: pointer;
}
.btn-key-expand:hover { background: #ffffff; color: #000000; }

/* =========================================
   PANEL DETAIL PERILAKU KUNCI (SLIDE DARI KANAN)
   ========================================= */
.content-key {
    position: absolute; top: 0; right: -100%; width: 100%; height: 100%;
    padding: 8% 10%;
    display: flex; flex-direction: column; justify-content: center;
    transition: right 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
}
.content-key.open { right: 0; }
.content-key-title { font-size: 32px; font-weight: 700; margin-bottom: 20px; }
.content-key .separator { width: 60px; height: 3px; background: #fff; margin-bottom: 30px; }
.content-key-desc { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.8; margin-bottom: 40px; }
.content-key-desc ul { padding-left: 20px; }
.content-key-desc li { margin-bottom: 10px; }

/* Gaya Tombol Aksi (Dinamis) */
.btn-key-action {
    display: inline-block;
    padding: 12px 35px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s;
    background: transparent;
}

.btn-key-action:hover {
    background: #ffffff;
    color: #1a3673; /* Warna teks saat hover (Biru Yamaha) */
}

/* Tombol Close (X) */
.btn-key-close {
    position: absolute;
    top: 40px;
    right: 40px;
    color: #ffffff;
    font-size: 30px;
    text-decoration: none;
    transition: 0.3s;
    z-index: 11;
}

.btn-key-close:hover {
    transform: scale(1.1);
    opacity: 0.8;
}
/* =========================================
   STAGGERED CONTENT ANIMATION (UPGRADE)
   ========================================= */
/* 1. Sembunyikan elemen teks saat slide belum aktif */
.content-main .val-title,
.content-main .val-desc,
.content-main .btn-key-expand {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 2. Animasi ikon latar belakang agar sedikit membesar (Zoom-in halus) */
.content-main .val-icon {
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.8);
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 3. Munculkan elemen secara berurutan saat slide .active (Delay bertingkat) */
.slide.active .content-main .val-icon {
    transform: translate(-50%, -50%) rotate(-10deg) scale(1); /* Ikon membesar normal */
}

.slide.active .content-main .val-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s; /* Judul muncul pertama */
}

.slide.active .content-main .val-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s; /* Deskripsi muncul kedua */
}

.slide.active .content-main .btn-key-expand {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s; /* Tombol muncul terakhir */
}
/* Container untuk membungkus tombol agar bersebelahan */
.btn-action-wrapper {
    display: flex;
    gap: 15px; /* Jarak antar tombol */
    margin-top: 30px;
    flex-wrap: wrap; /* Agar aman di layar sangat kecil */
}

/* Penyesuaian tombol agar lebarnya proporsional */
.btn-key-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px; /* Lebar minimal agar terlihat seimbang */
    padding: 12px 25px;
    text-align: center;
    flex: 0 1 auto; /* Lebar mengikuti konten tapi tetap fleksibel */
}

/* Memberikan kesan visual berbeda untuk tombol Kembali (opsional) */
.btn-close-trigger {
    border-color: rgba(255, 255, 255, 0.5); /* Lebih tipis agar tidak terlalu dominan */
    opacity: 0.8;
}

.btn-close-trigger:hover {
    opacity: 1;
    border-color: #fff;
}
/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    .slide-picture { width: 100%; }
    .slide-content { width: 100%; background: rgba(0,0,0,0.85) !important; padding: 10% 8%; }
    .culture-nav { display: none; }
    .val-icon { font-size: 70px; }
    .val-title { font-size: 36px; }

    .slide-wrap {
        height: 100vh; /* Fallback untuk HP lama */
        height: 100dvh !important; /* Tinggi dinamis akurat untuk HP modern */
    }
    /* --- 1. Tombol Kembali (Home) --- */
    .btn-home {
        top: 20px; 
        left: 20px; 
        padding: 10px 12px; 
        font-size: 10px; /* Menyembunyikan teks */
    }
    .btn-home span { display: none; }
    .btn-home i { font-size: 16px; }

    /* --- 2. Background Gambar Fullscreen --- */
    .slide-picture {
        width: 100%;
        height: 100%; /* Memenuhi seluruh layar HP */
        z-index: 1;
    }
    
    /* Filter gelap agar teks putih di atas gambar mudah dibaca */
    .slide-picture::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.75) !important; 
    }

    /* --- 3. Area Konten Teks --- */
    .slide-content {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 0;
        /* Matikan warna solid background agar gambar di belakang terlihat */
        background: transparent !important; 
        z-index: 2;
    }

    .content-main {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /* Padding bawah dibesarkan agar teks tidak menabrak titik navigasi */
        padding: 20px 25px 140px 25px !important; 
    }

    /* --- 4. Ikon Tengah & Tipografi --- */
    .val-icon {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        font-size: 70px !important; /* Diperbesar dan ditegaskan seperti gambar referensi */
        opacity: 1 !important;
        color: #ffffff;
        margin-bottom: 20px;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)); /* Efek timbul */
    }
    
    /* Override animasi desktop agar ikon muncul dengan normal di HP */
    .slide.active .content-main .val-icon {
        transform: scale(1) !important;
    }

    .val-title {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 1px;
        margin-bottom: 15px;
        text-shadow: none;
    }

    .val-desc {
        font-size: 13.5px;
        line-height: 1.6;
        opacity: 0.9;
        margin-bottom: 0; /* Jarak bawah dimatikan karena ada titik navigasi */
    }

    /* --- 5. Navigasi Titik (Dots Slider) --- */
    /* Mengubah menu teks menjadi titik-titik elegan ala aplikasi */
    .culture-nav {
        display: flex !important;
        position: absolute;
        bottom: 110px !important;
        left: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 0;
        background: transparent;
        transform: none;
        z-index: 10;
        overflow: visible;
    }
    .culture-nav li { margin: 0; }
    .culture-nav a {
        font-size: 0 !important; /* Sembunyikan teksnya */
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        border: none;
        display: block;
        transition: 0.3s;
    }
    .culture-nav a.active {
        background: #ffffff;
        transform: scale(1.5); /* Titik membesar jika aktif */
    }
    /* =========================================
    TOMBOL NEXT & PREV SLIDE
    ========================================= */
    .nav-arrow {
        position: absolute;
        top: 45%; /* Posisikan sedikit di atas tengah layar agar tidak menabrak teks */
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.4); /* Lingkaran gelap transparan */
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 100; /* Harus di atas semua konten slide */
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .nav-arrow:hover {
        background: rgba(255, 255, 255, 0.9);
        color: #000000;
        transform: translateY(-50%) scale(1.1);
    }

    .nav-prev { left: 15px; }
    .nav-next { right: 15px; }

    /* Sembunyikan tombol saat panel PRINSIP KERJA terbuka agar tidak tumpang tindih */
    .nav-arrow.hide {
        opacity: 0;
        visibility: hidden;
    }
    /* --- 6. Bottom Bar (Tombol PRINSIP KERJA) --- */
    .btn-key-expand {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.15); /* Efek Kaca (Glassmorphism) */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        border-top: 1px solid rgba(255,255,255,0.3);
        padding: 25px 15px calc(25px + env(safe-area-inset-bottom)) 15px !important;
        
        /* Membuat potongan sudut meruncing di bagian tengah atas */
        clip-path: polygon(0 20px, 50% 0, 100% 20px, 100% 100%, 0 100%);
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #fff;
        font-weight: 700;
        letter-spacing: 2px;
    }
    
    /* Menambahkan ikon panah (chevron) kecil di atas teks */
    .btn-key-expand::before {
        content: '\f106'; /* Kode FontAwesome untuk panah ke atas */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 16px;
    }

    /* --- 7. Panel Detail (Muncul dari Bawah / Bottom Sheet) --- */
    .content-key {
        top: 100% !important; /* Posisikan tersembunyi di bawah layar */
        right: 0 !important;
        transition: top 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        padding: 40px 25px !important;
        text-align: center;
    }
    
    /* Memicu panel naik ke atas menutupi layar */
    .content-key.open {
        top: 0 !important; 
    }

    .content-key-title { font-size: 24px; }
    .content-key .separator { margin: 0 auto 20px auto; }
    .content-key-desc {
        font-size: 13.5px;
        text-align: left;
        display: inline-block;
    }
    
    .btn-key-close {
        top: 20px;
        right: 20px;
        font-size: 26px;
    }

    /* Susunan tombol di dalam panel (Atas-Bawah) */
    .btn-action-wrapper {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 20px;
    }
    .btn-key-action {
        width: 100%;
        padding: 12px;
        font-size: 12px;
    }
    /* --- 6. Bottom Bar (Tombol PRINSIP KERJA) --- */
    .btn-key-expand {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        
        /* KUNCI UTAMA: Memanggil warna dinamis dari PHP */
        background-color: var(--btn-color) !important; 
        
        /* Matikan efek kaca (glassmorphism) */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        
        border: none;
        border-top: 1px solid rgba(255,255,255,0.3);
        padding: 25px 15px 15px 15px;
        
        /* Membuat potongan sudut meruncing di bagian tengah atas */
        clip-path: polygon(0 20px, 50% 0, 100% 20px, 100% 100%, 0 100%);
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #fff;
        font-weight: 700;
        letter-spacing: 2px;
    }
    
    /* Menambahkan ikon panah (chevron) kecil di atas teks */
    .btn-key-expand::before {
        content: '\f106'; /* Kode FontAwesome untuk panah ke atas */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 16px;
    }
}