/* ==========================================================================
   ABOUT US - OCEAN BLUE & EMERALD GREEN LUXURY THEME
   ========================================================================== */

/* Font & Base Smoothness */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* 1. Jumbotron / Hero Mini dengan Gradasi Mewah */
.about-hero {
    background: linear-gradient(135deg, #0a192f 0%, #0f343e 50%, #134e4a 100%);
    border-bottom: 3px solid #10b981;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* Efek Cahaya Latar Belakang (Ambient Light) */
.about-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 60%);
    transform: rotate(-15deg);
    pointer-events: none;
}

.about-hero h1 {
    color: #ffffff;
    font-weight: 800;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.about-hero p {
    background: linear-gradient(to right, #38bdf8, #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* 2. Kartu Legalitas Perusahaan (Glassmorphism & Border Gradasi) */
.legal-card {
    background: linear-gradient(145deg, #0f172a, #1e293b) !important;
    border: none !important;
    border-left: 5px solid #10b981 !important;
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.2);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.legal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.25);
    border-left-color: #0ea5e9 !important;
}

/* 3. Kartu Visi & Misi */
.vision-mission-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
}

.vision-mission-card:hover {
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.08);
}

.icon-gradient-circle {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
}

/* 4. Kartu Tim Eksekutif (Executive Team) */
.team-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #0ea5e9, #10b981);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.team-icon-avatar {
    display: inline-block;
    background: #f0fdf4;
    padding: 22px;
    border-radius: 50%;
    color: #10b981;
    border: 2px solid rgba(16, 185, 129, 0.1);
    transition: all 0.4s ease;
}

.team-card:hover .team-icon-avatar {
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.3);
    border-color: transparent;
}

/* 5. Grid Komitmen Operasional (8 Commitments) */
.commitment-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 24px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.commitment-card:hover {
    background: linear-gradient(to bottom right, #ffffff, #f0fdfa);
    border-color: #34d399 !important;
    transform: scale(1.02);
}

.commitment-number {
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Highlighted Last Card */
.commitment-highlight {
    background: linear-gradient(135deg, #0f172a 0%, #0f343e 100%) !important;
}

/* 6. Alur Kerja INCOTERMS CIF Workflow */
.workflow-box {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}

.workflow-step {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 18px !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.workflow-step:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
}

.workflow-arrow {
    color: #10b981 !important;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   ANIMASI ELEMENT (Font Awesome Utilities)
   ========================================================================== */
.animate-spin-slow {
    animation: fa-spin 8s infinite linear;
}
.animate-pulse-slow {
    animation: fa-pulse 3s infinite linear;
}

@media (max-width: 768px) {
    .workflow-arrow {
        transform: rotate(90deg);
        margin: 8px 0;
    }
    .about-hero {
        padding: 50px 0;
    }
}
/* ==========================================================================
   EXCLUSIVE IMAGE ZOOM EFFECT (2 SECONDS)
   ========================================================================== */
/* ==========================================================================
   EXCLUSIVE OVAL IMAGE ZOOM EFFECT (REFERENCING image_e57c6a.png)
   ========================================================================== */
.zoomable-profile {
    width: 130px;
    height: 175px; /* Dibuat lebih tinggi agar membentuk oval vertikal */
    object-fit: cover;
    border-radius: 50%; /* Membuat bentuk oval sempurna mengikuti rasio */
    border: 3px solid #dfb76c; /* Warna emas premium sesuai referensi */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: #ffffff;
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Efek saat foto diklik dan membesar selama 2 detik */
.zoomable-profile.active-zoom {
    transform: scale(2.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: #34d399; /* Berubah menjadi hijau emerald saat di-zoom */
    position: relative;
    z-index: 10;
    cursor: zoom-out;
}

/* Pembungkus foto untuk memastikan transisi zoom tidak terpotong kontainer */
.profile-container {
    position: relative;
    overflow: visible;
    display: inline-block;
    margin-bottom: 1rem;
}
/* --- UTILITY UNTUK MENGGESER FOTO DALAM OVAL --- */

/* Foto 1: Contoh geser lebih ke atas */
.pas-foto-ceo {
    object-position: 50% 20%; /* Angka kedua (20%) menggeser foto ke atas agar wajah pas */
}

/* Foto 2: Contoh geser lebih ke bawah atau tengah sempurna */
.pas-foto-legal {
    object-position: 50% 65%; /* Tengah-tengah (Default) */
}

/* Foto 3: Contoh jika posisi wajah terlalu ke atas, kita turunkan */
.pas-foto-quality {
    object-position: 50% 65%; /* Menggeser foto agak ke bawah */
}
/* Foto 4: Contoh jika posisi wajah terlalu ke atas, kita turunkan */
.pas-foto-logistic {
    object-position: 50% 65%; /* Menggeser foto agak ke bawah */
}






.workflow-section{
    padding:90px 0;
    background:#faf8f4;
    overflow:visible;
}

.workflow-wrapper{
    position:relative;
}

.workflow{
    overflow:hidden;
    mask-image:linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );
}

.workflow-wrapper{
    overflow-x:auto;
}

.workflow-track{
    display:flex;
    align-items:center;
    width:max-content;
    animation:workflowMove 45s linear infinite;
}
.workflow:hover .workflow-track{
    animation-play-state:paused;
}

@keyframes workflowMove{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}

.workflow-item{
    width:190px;
    text-align:center;
    flex-shrink:0;
}

.circle{
    width:75px;
    height:75px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#d4b06f,#b88d44);
    color:#fff;
    font-weight:700;
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(200,169,106,.35);
    transition:.4s;
}

.workflow-item:hover .circle{
    transform:translateY(-8px) scale(1.08);
    box-shadow:0 15px 35px rgba(200,169,106,.5);
}

.workflow-item h6{
    margin-top:15px;
    color:#191970;
    font-weight:600;
    font-size:15px;
}

.arrow{
    width:80px;
    height:4px;
    background:#c8a96a;
    position:relative;
    flex-shrink:0;
}

.arrow::after{
    content:'';
    position:absolute;
    right:-2px;
    top:50%;
    transform:translateY(-50%);
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:15px solid #c8a96a;
}

.workflow-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#c8a96a;
    color:#fff;
    z-index:5;
    cursor:pointer;
    transition:.3s;
}

.workflow-btn:hover{
    background:#b88d44;
    transform:translateY(-50%) scale(1.08);
}

.left{
    left:10px;
	display: none !important;
}
}

.right{
    right:10px;
	display: none !important;
}
}

@media(max-width:768px){

    .workflow-item{
        width:150px;
    }

    .circle{
        width:60px;
        height:60px;
        font-size:18px;
    }

    .arrow{
        width:45px;
    }

    .workflow-track{
        animation-duration:35s;
    }
}
.dap-workflow-header{
    text-align: center;
	color: #191970;
    padding: 30px 15px;
}

.dap-workflow-header h2{
    color: #ffd700; /* emas terang */
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.dap-workflow-header p{
    color: #ffcc66; /* emas lembut untuk subjudul */
    font-size: 16px;
    margin: 0;
    letter-spacing: 0.5px;
}
@keyframes workflowScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}
.video-container {
    /* MENINGKATKAN UKURAN */
    width: 120px; /* Diperbesar dari 75px */
    height: 120px; /* Diperbesar dari 75px */
    
    margin: auto;
    
    /* MENYESUAIKAN RADIUS SUDUT agar proporsional */
    border-radius: 24px; /* Diperbesar dari 16px */
    
    overflow: hidden; /* Penting agar video tetap terpotong rapi sesuai radius */
    border: 2px solid #d4af37;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    
    /* MENAMBAH SPASI KE TEKS DI BAWAHNYA */
    margin-bottom: 15px;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan video memenuhi area tanpa distorsi */
}

/* Efek saat di-hover */
.workflow-item:hover .video-container {
    transform: translateY(-10px) scale(1.05); /* Sedikit disesuaikan untuk ukuran baru */
    border-color: #ffffff;
    box-shadow: 0 20px 45px rgba(212, 175, 55, 0.4); /* Shadow lebih lembut dan menyebar */
}
.team-section-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Sesuaikan tinggi sesuai kebutuhan */
    padding: 80px 0;
    overflow: hidden;
}

/* Video Background */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video memenuhi area tanpa terdistorsi */
    z-index: -1;
}

/* Overlay gelap agar teks (yang berwarna gelap) tetap terbaca di atas video */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85); /* Overlay putih semi-transparan */
    z-index: 0;
}

.relative-content {
    position: relative;
    z-index: 1;
}

/* Sedikit sentuhan mewah untuk team-card */
.team-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* Efek kaca */
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: 0.4s;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}