/* ============================================
   PT. SAMUDRA 16 — Maritime Company Profile
   Palette diambil dari logo: hijau, biru, merah
   ============================================ */

:root {
    --clr-green: #2E9E4B;
    --clr-green-dark: #1F7A38;
    --clr-blue: #2196E8;
    --clr-blue-dark: #0B6BB8;
    --clr-red: #E63946;
    --clr-red-dark: #B72C38;

    --clr-navy: #0A1E3F;
    /* deep sea */
    --clr-navy-2: #0F2A54;
    --clr-teal: #0B4C6B;
    --clr-sand: #F4F7FB;
    --clr-ink: #0A1E3F;
    --clr-mute: #6b7a90;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --radius: 14px;
    --shadow-sm: 0 2px 12px rgba(10, 30, 63, .06);
    --shadow-md: 0 12px 40px rgba(10, 30, 63, .10);
    --shadow-lg: 0 24px 60px rgba(10, 30, 63, .18);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    font-family: var(--font-body);
    color: var(--clr-ink);
    background: #fff;
    overflow-x: hidden;
    max-width: 100%;
}

/* .section,
section,
.container,
.container-fluid {
    max-width: 100%;
} */

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 {
    font-weight: 900;
}

a {
    text-decoration: none;
}



/* ---------- Brand Logo (image) ---------- */
.brand-img {
    height: 42px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
}

.navbar-brand:hover .brand-img {
    transform: scale(1.05);
}

.brand-img-lg {
    height: 56px;
}

.brand-text {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.2;
}

.brand-text strong {
    color: var(--clr-navy);
    font-weight: 900;
    letter-spacing: .5px;
    font-size: .95rem;
}

.footer-samudra .brand-text strong {
    color: #fff;
}

/* Navbar scrolled — logo sedikit mengecil */
.navbar-samudra.scrolled .brand-img {
    height: 36px;
}

@media (max-width: 576px) {
    .brand-img {
        height: 36px;
    }

    .brand-text strong {
        font-size: .8rem;
    }
}

/* ---------- Navbar ---------- */
.navbar-samudra {
    padding: 1rem 0;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all .35s ease;
    border-bottom: 1px solid rgba(10, 30, 63, .06);
}

.navbar-samudra.scrolled {
    padding: .5rem 0;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow-sm);
}

.navbar-samudra .nav-link {
    color: var(--clr-navy) !important;
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem 1rem !important;
    position: relative;
}

.navbar-samudra .nav-link.active,
.navbar-samudra .nav-link:hover {
    color: var(--clr-blue) !important;
}

.navbar-samudra .nav-link.active::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .2rem;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-green), var(--clr-blue), var(--clr-red));
    border-radius: 2px;
}

.navbar-samudra .dropdown-menu {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    margin-top: .5rem !important;
}

.navbar-samudra .dropdown-item {
    border-radius: 10px;
    padding: .55rem .8rem;
    font-size: .92rem;
}

.navbar-samudra .dropdown-item:hover {
    background: var(--clr-sand);
    color: var(--clr-blue);
}

.btn-samudra-outline {
    border: 2px solid var(--clr-navy);
    color: var(--clr-navy);
    font-weight: 600;
    border-radius: 999px;
    transition: all .3s;
}

.btn-samudra-outline:hover {
    background: var(--clr-navy);
    color: #fff;
    transform: translateY(-2px);
}

.btn-samudra {
    background: var(--clr-blue);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    border: 0;
    transition: all .3s;
}

.btn-samudra:hover {
    background: var(--clr-blue-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(33, 150, 232, .35);
}

/* ================================================
   HERO — first impression maritim
   ================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    background: linear-gradient(180deg, #0A1E3F 0%, #0F2A54 40%, #0B4C6B 100%);
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
}

/* Bintang / gelembung */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(2px 2px at 80% 40%, rgba(255, 255, 255, .4), transparent),
        radial-gradient(1.5px 1.5px at 40% 60%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(1px 1px at 85% 70%, rgba(255, 255, 255, .6), transparent);
    animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
    from {
        opacity: .4;
    }

    to {
        opacity: 1;
    }
}

/* Sun/moon glow */
.hero-glow {
    position: absolute;
    top: 15%;
    right: 8%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 150, .35) 0%, rgba(255, 180, 90, .12) 40%, transparent 70%);
    filter: blur(20px);
    animation: float-slow 8s ease-in-out infinite alternate;
}

/* Bubbles */
.bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bubble {
    position: absolute;
    bottom: -50px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    animation: rise linear infinite;
}

.bubble:nth-child(1) {
    left: 10%;
    width: 14px;
    height: 14px;
    animation-duration: 12s;
}

.bubble:nth-child(2) {
    left: 25%;
    width: 22px;
    height: 22px;
    animation-duration: 15s;
    animation-delay: 2s;
}

.bubble:nth-child(3) {
    left: 45%;
    width: 10px;
    height: 10px;
    animation-duration: 10s;
    animation-delay: 4s;
}

.bubble:nth-child(4) {
    left: 65%;
    width: 26px;
    height: 26px;
    animation-duration: 18s;
    animation-delay: 1s;
}

.bubble:nth-child(5) {
    left: 80%;
    width: 16px;
    height: 16px;
    animation-duration: 14s;
    animation-delay: 5s;
}

.bubble:nth-child(6) {
    left: 90%;
    width: 12px;
    height: 12px;
    animation-duration: 11s;
    animation-delay: 3s;
}

@keyframes rise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110vh) translateX(30px);
        opacity: 0;
    }
}

/* Ship silhouette */
.hero-ship {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    opacity: .95;
    animation: ship-rock 4s ease-in-out infinite alternate;
    z-index: 2;
}

@keyframes ship-rock {
    0% {
        transform: translateX(-50%) rotate(-1.5deg) translateY(0);
    }

    100% {
        transform: translateX(-52%) rotate(1.5deg) translateY(-6px);
    }
}

@keyframes float-slow {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

/* Waves layered */
.hero-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    z-index: 1;
    pointer-events: none;
}

.hero-waves svg {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
}

.wave-1 {
    animation: wave 10s linear infinite;
    opacity: .5;
}

.wave-2 {
    animation: wave 14s linear infinite reverse;
    opacity: .35;
    bottom: -10px !important;
}

.wave-3 {
    animation: wave 20s linear infinite;
    opacity: .8;
    bottom: -20px !important;
}

@keyframes wave {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Hero content */
.hero-content {
    position: relative;
    z-index: 5;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}

.hero-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-red);
    box-shadow: 0 0 12px var(--clr-red);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: .6;
    }
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin: 1.2rem 0 1.5rem;
}

.hero h1 .accent {
    background: linear-gradient(90deg, var(--clr-green), #7cd984, var(--clr-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}

.hero p.lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .8);
    max-width: 560px;
    margin-bottom: 2rem;
}

.hero-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.hero-stat .num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 900;
    background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .6));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-stat .lbl {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, .6);
}

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    z-index: 5;
    animation: bounce 2s ease-in-out infinite;
}

.scroll-cue i {
    display: block;
    font-size: 1.3rem;
    margin-top: .3rem;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* Carousel controls */
.hero-carousel-controls {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    z-index: 6;
}

.hero-carousel-controls button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    background: transparent;
    transition: all .3s;
    padding: 0;
}

.hero-carousel-controls button.active {
    background: #fff;
    border-color: #fff;
    height: 30px;
    border-radius: 8px;
}

/* ================================================
   SECTIONS
   ================================================ */
.section {
    padding: 6rem 0;
    position: relative;
}

.section-alt {
    background: var(--clr-sand);
}

.section-eyebrow {
    display: inline-block;
    font-size: .8rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--clr-blue);
    font-weight: 600;
    margin-bottom: 1rem;
    position: relative;
    padding-left: 40px;
}

.section-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-green), var(--clr-blue));
}

.section-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: 1rem;
    color: var(--clr-navy);
}

.section-lead {
    color: var(--clr-mute);
    font-size: 1.05rem;
    max-width: 640px;
}

/* ---------- Direktur preview ---------- */
.direktur-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 3rem;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.direktur-card::before {
    content: '"';
    position: absolute;
    top: -30px;
    right: 20px;
    font-family: var(--font-display);
    font-size: 12rem;
    color: var(--clr-blue);
    opacity: .08;
    line-height: 1;
}

.direktur-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-blue), var(--clr-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    font-family: var(--font-display);
    font-weight: 900;
    border: 4px solid #fff;
    box-shadow: var(--shadow-md);
}

.direktur-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--clr-navy);
}

/* ---------- Pelayanan cards ---------- */
.service-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all .4s cubic-bezier(.2, .9, .3, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(10, 30, 63, .05);
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-green), var(--clr-blue), var(--clr-red));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.service-card:hover::after {
    transform: scaleX(1);
}

.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(33, 150, 232, .12), rgba(46, 158, 75, .12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--clr-blue);
    margin-bottom: 1.2rem;
}

.service-card h4 {
    font-size: 1.15rem;
    margin-bottom: .6rem;
    color: var(--clr-navy);
}

.service-card p {
    color: var(--clr-mute);
    font-size: .93rem;
    margin: 0;
}

/* ================================================
   ACHIEVEMENT CARDS — Halaman Prestasi
   ================================================ */

.aw-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    box-shadow: 0 2px 12px rgba(10, 30, 63, .05);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.aw-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(10, 30, 63, .13);
}

/* ── Image area ── */
.aw-img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
    flex-shrink: 0;
}

.aw-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.aw-card:hover .aw-img {
    transform: scale(1.05);
}

/* Fallback icon jika gambar tidak ada */
.aw-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
}

.aw-img-fallback i {
    font-size: 4rem;
    color: rgba(255, 255, 255, .25);
}

/* Year badge — top left */
.aw-year-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--clr-red, #E63946);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 4px 12px;
    border-radius: 20px;
    line-height: 1.4;
}

/* Category badge — top right */
.aw-kategori-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(10, 30, 63, .7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.4;
}

/* ── Card body ── */
.aw-body {
    padding: 1.4rem 1.4rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.aw-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-navy, #0A1E3F);
    margin: 0;
    line-height: 1.35;
}

.aw-issuer {
    font-size: .78rem;
    font-weight: 600;
    color: var(--clr-blue, #2196E8);
    display: flex;
    align-items: center;
    gap: .25rem;
}

.aw-desc {
    font-size: .84rem;
    color: #4b5563;
    line-height: 1.65;
    margin: .25rem 0 0;
    flex: 1;
}

/* ── Meta row (date + location) ── */
.aw-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(10, 30, 63, .07);
    margin-top: auto;
}

.aw-meta-item {
    font-size: .76rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: .3rem;
}



.aw-meta-item i {
    color: var(--clr-navy, #0A1E3F);
    opacity: .5;
    font-size: .8rem;
}

/* ── Zoom hint on hover ── */
.aw-img-wrap {
    cursor: pointer;
}

.aw-zoom-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 30, 63, .0);
    transition: background .25s;
    pointer-events: none;
}

.aw-zoom-hint i {
    font-size: 2rem;
    color: #fff;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s, transform .25s;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
}

.aw-card:hover .aw-zoom-hint {
    background: rgba(10, 30, 63, .25);
}

.aw-card:hover .aw-zoom-hint i {
    opacity: 1;
    transform: scale(1);
}

/* ── Lightbox Overlay ── */
.aw-lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 15, 30, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.aw-lb-overlay.aw-lb-active {
    opacity: 1;
    pointer-events: all;
}

.aw-lb-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 2;
}

.aw-lb-close:hover {
    background: rgba(255, 255, 255, .25);
}

.aw-lb-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    max-width: 90vw;
    max-height: 90vh;
}

.aw-lb-img {
    max-width: 100%;
    max-height: 78vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
    transform: scale(.92);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.aw-lb-overlay.aw-lb-active .aw-lb-img {
    transform: scale(1);
}

.aw-lb-caption {
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    text-align: center;
    margin: 0;
    max-width: 500px;
    line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .aw-img-wrap {
        height: 160px;
    }

    .aw-body {
        padding: 1.1rem 1.1rem 1.3rem;
    }

    .aw-title {
        font-size: .95rem;
    }
}


/* ================================================
   NEWS — Shared
   ================================================ */

/* Category badge */
.news-cat-badge {
    display: inline-block;
    background: var(--clr-blue, #2196E8);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.5;
}

/* ================================================
   NEWS CARD (list & home)
   ================================================ */
.news-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(10, 30, 63, .07);
    box-shadow: 0 2px 12px rgba(10, 30, 63, .05);
    transition: transform .3s, box-shadow .3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(10, 30, 63, .12);
}

/* Thumbnail */
.news-thumb-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-blue, #2196E8), var(--clr-navy, #0A1E3F));
    flex-shrink: 0;
}

.news-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.news-card:hover .news-thumb-img {
    transform: scale(1.06);
}

.news-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clr-blue, #2196E8), var(--clr-navy, #0A1E3F));
}

.news-thumb-fallback i {
    font-size: 3rem;
    color: rgba(255, 255, 255, .2);
}

.news-thumb-wrap .news-cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Card body */
.news-body {
    padding: 1.4rem 1.4rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.news-date {
    font-size: .75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.news-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-navy, #0A1E3F);
    margin: 0;
    line-height: 1.4;
}

.news-body p {
    font-size: .85rem;
    color: #6b7280;
    flex: 1;
    margin: 0;
    line-height: 1.6;
}

.news-link {
    color: var(--clr-blue, #2196E8);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    transition: color .2s;
}

.news-link:hover {
    color: var(--clr-navy, #0A1E3F);
}

/* ================================================
   NEWS LIST — Featured card (first article)
   ================================================ */
.news-featured {
    display: flex;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    box-shadow: 0 4px 24px rgba(10, 30, 63, .08);
    margin-bottom: .5rem;

    /* Batasi tinggi agar tidak full layar */
    max-height: 340px;
}

.news-featured-img-wrap {
    position: relative;
    width: 45%;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-blue, #2196E8), var(--clr-navy, #0A1E3F));
}

.news-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.news-featured:hover .news-featured-img {
    transform: scale(1.04);
}

.news-featured-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-featured-fallback i {
    font-size: 5rem;
    color: rgba(255, 255, 255, .15);
}

.news-featured-img-wrap .news-cat-badge {
    position: absolute;
    top: 16px;
    left: 16px;
}

.news-featured-body {
    flex: 1;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .65rem;
    overflow: hidden; /* cegah teks overflow saat tinggi dibatasi */
}

.news-featured-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--clr-navy, #0A1E3F);
    line-height: 1.35;
    margin: 0;

    /* Clamp judul agar tidak melar ke bawah */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-featured-excerpt {
    font-size: .88rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
    flex: 1;

    /* Clamp excerpt */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 767px) {
    .news-featured {
        flex-direction: column;
        max-height: none; /* mobile: biarkan natural */
    }

    .news-featured-img-wrap {
        width: 100%;
        height: 200px;
    }

    .news-featured-body {
        padding: 1.25rem;
    }

    .news-featured-title {
        font-size: 1.1rem;
    }
}

/* ================================================
   NEWS DETAIL
   ================================================ */

/* Article content */
.news-detail-content {
    font-size: .97rem;
    color: #374151;
    line-height: 1.85;
}

.news-detail-content p {
    margin-bottom: 1.25rem;
}

/* Photo gallery */
.news-detail-gallery {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(10, 30, 63, .08);
}

.news-gallery-heading {
    font-size: .95rem;
    font-weight: 700;
    color: var(--clr-navy, #0A1E3F);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.news-gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #e5eaf0;
}

.news-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.news-gallery-item:hover img {
    transform: scale(1.07);
}

.news-gallery-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5eaf0;
}

.news-gallery-fallback i {
    font-size: 2.5rem;
    color: #9ca3af;
}

.news-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 63, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
}

.news-gallery-item:hover .news-gallery-overlay {
    opacity: 1;
}

.news-gallery-overlay i {
    font-size: 1.8rem;
    color: #fff;
}

/* ── Gallery Lightbox ── */
.ng-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    z-index: 1050;
}

.ng-lightbox-backdrop.active {
    display: block;
}

.ng-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1051;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.ng-lightbox.active {
    display: flex;
}

.ng-lightbox-inner {
    max-width: 860px;
    width: 100%;
    text-align: center;
}

.ng-lightbox-inner img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    display: block;
    margin: 0 auto;
}

.ng-lightbox-caption {
    margin-top: 1rem;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    font-weight: 600;
}

.ng-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.ng-lightbox-close:hover {
    background: rgba(255, 255, 255, .25);
}

/* ================================================
   HOME — Marquee Clients
   ================================================ */
.clients-marquee {
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.clients-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.home-client-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 150px;
    height: 68px;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .09);
    border-radius: 12px;
    padding: 10px 20px;
    transition: box-shadow .2s, transform .2s;
}

.home-client-badge:hover {
    box-shadow: 0 6px 20px rgba(10, 30, 63, .1);
    transform: translateY(-2px);
}

.home-client-badge img {
    max-height: 38px;
    max-width: 110px;
    object-fit: contain;
    filter: grayscale(50%);
    transition: filter .3s;
    display: block;
}

.home-client-badge:hover img {
    filter: grayscale(0%);
}

.home-client-fallback {
    display: none;
    font-size: .82rem;
    font-weight: 700;
    color: var(--clr-navy);
    white-space: nowrap;
}


/* ================================================
   HALAMAN PELANGGAN — Stats Bar
   ================================================ */
.pg-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    border-radius: 16px;
    padding: 2rem 1rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 16px rgba(10, 30, 63, .06);
}

.pg-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 2.5rem;
    gap: .25rem;
}

.pg-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--clr-navy);
    line-height: 1;
}

.pg-stat-lbl {
    font-size: .78rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
}

.pg-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(10, 30, 63, .1);
}

@media (max-width: 576px) {
    .pg-stat-divider {
        display: none;
    }

    .pg-stat {
        padding: .75rem 1.5rem;
    }
}

/* ================================================
   GALLERY ACTIVITY
   ================================================ */

/* ── Filter Tabs ── */
.ga-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(10, 30, 63, .08);
}

.ga-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem 1.1rem;
    border-radius: 30px;
    border: 1.5px solid rgba(10, 30, 63, .15);
    background: #fff;
    color: #4b5563;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.ga-tab:hover {
    border-color: var(--clr-blue, #2196E8);
    color: var(--clr-blue, #2196E8);
}

.ga-tab.active {
    background: var(--clr-navy, #0A1E3F);
    border-color: var(--clr-navy, #0A1E3F);
    color: #fff;
}

/* ── Category Section ── */
.ga-section {
    margin-bottom: 3.5rem;
}

.ga-section:last-child {
    margin-bottom: 0;
}

.ga-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ga-section-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), var(--clr-blue, #2196E8));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ga-section-icon i {
    font-size: 1.3rem;
    color: #fff;
}

.ga-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--clr-navy, #0A1E3F);
    margin: 0;
    line-height: 1.2;
}

.ga-section-count {
    font-size: .75rem;
    color: #9ca3af;
    font-weight: 500;
}

/* ── Photo Item ── */
.ga-item {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .07);
    box-shadow: 0 2px 8px rgba(10, 30, 63, .05);
    transition: transform .2s, box-shadow .2s;
}

.ga-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(10, 30, 63, .13);
}

.ga-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, #e8eef5, #d0dce8);
}

.ga-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.ga-item:hover .ga-img-wrap img {
    transform: scale(1.07);
}

.ga-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
}

.ga-fallback i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, .2);
}

.ga-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 63, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
}

.ga-item:hover .ga-overlay {
    opacity: 1;
}

.ga-overlay i {
    font-size: 1.8rem;
    color: #fff;
}

.ga-caption {
    padding: .55rem .75rem .65rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--clr-navy, #0A1E3F);
    line-height: 1.4;
    background: #fff;
}

/* ── Lightbox ── */
.ga-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 1050;
}

.ga-lightbox-backdrop.active {
    display: block;
}

.ga-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1051;
    align-items: center;
    justify-content: center;
    padding: 2rem 5rem;
}

.ga-lightbox.active {
    display: flex;
}

.ga-lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    max-width: 860px;
    width: 100%;
}

.ga-lightbox-inner img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    display: block;
}

.ga-lightbox-meta {
    text-align: center;
}

.ga-lightbox-caption {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.4;
}

.ga-lightbox-category {
    color: rgba(255, 255, 255, .5);
    font-size: .78rem;
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Close */
.ga-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.ga-lightbox-close:hover {
    background: rgba(255, 255, 255, .25);
}

/* Prev / Next */
.ga-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.ga-lightbox-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.ga-prev {
    left: 1.25rem;
}

.ga-next {
    right: 1.25rem;
}

@media (max-width: 576px) {
    .ga-lightbox {
        padding: 1.5rem;
    }

    .ga-lightbox-nav {
        display: none;
    }

    .ga-lightbox-inner img {
        max-height: 65vh;
    }

    .ga-tabs {
        gap: .35rem;
    }

    .ga-tab {
        font-size: .76rem;
        padding: .38rem .85rem;
    }
}


/* ================================================
   HALAMAN PELANGGAN — Client Cards
   ================================================ */
.pg-client-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    box-shadow: 0 2px 12px rgba(10, 30, 63, .05);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pg-client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(10, 30, 63, .12);
}

.pg-client-logo-wrap {
    background: #f8f9fc;
    border-bottom: 1px solid rgba(10, 30, 63, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    position: relative;
    padding: 24px;
}

.pg-client-logo-img {
    max-height: 80px;
    max-width: 150px;
    width: 100%;
    object-fit: contain;
}

.pg-client-logo-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-navy), var(--clr-teal, #0B4C6B));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-client-logo-icon span {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.pg-since-badge {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--clr-navy);
    opacity: .4;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pg-client-body {
    padding: 1.25rem 1.25rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.pg-client-sector {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--clr-blue, #2196E8);
}

.pg-client-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-navy);
    margin: 0;
    line-height: 1.3;
}

.pg-client-desc {
    font-size: .82rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;

}



@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ---------- Page hero (untuk halaman selain home) ---------- */
.page-hero {
    padding: 10rem 0 5rem;
    background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-teal) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23ffffff' fill-opacity='.03' d='M0,30 Q15,15 30,30 T60,30'/%3E%3C/svg%3E");
}

.page-hero .wave-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
}

.page-hero .wave-bottom svg {
    width: 100%;
    height: 100%;
}

.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: .8rem;
    position: relative;
}

.page-hero .breadcrumb {
    position: relative;
}

.page-hero .breadcrumb a {
    color: rgba(255, 255, 255, .7);
}

.page-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, .4);
}

.page-hero .breadcrumb-item.active {
    color: #fff;
}

/* ================================================
   CERTIFICATE CARDS — Halaman Sertifikat
   ================================================ */

/* ── Card ── */
.cert-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    box-shadow: 0 2px 12px rgba(10, 30, 63, .05);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(10, 30, 63, .12);
}

/* ── Image area ── */
.cert-img-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f4f8, #dce6f0);
    flex-shrink: 0;
}

.cert-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.cert-card:hover .cert-img {
    transform: scale(1.05);
}

/* Fallback */
.cert-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f0f7, #c8dcea);
}

.cert-img-fallback i {
    font-size: 3.5rem;
    color: var(--clr-green, #2E9E4B);
    opacity: .35;
}

/* Hover overlay */
.cert-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 63, .55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    opacity: 0;
    transition: opacity .25s;
}

.cert-card:hover .cert-overlay {
    opacity: 1;
}

.cert-overlay i {
    font-size: 2rem;
    color: #fff;
}

.cert-overlay span {
    font-size: .8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── Card body ── */
.cert-body {
    padding: 1.25rem 1.4rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border-top: 3px solid var(--clr-green, #2E9E4B);
}

.cert-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-navy, #0A1E3F);
    margin: 0;
    line-height: 1.3;
}

.cert-about {
    font-size: .83rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

/* ── Meta rows ── */
.cert-meta {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(10, 30, 63, .06);
    margin-top: auto;
}

.cert-meta-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .77rem;
    color: #4b5563;
}

.cert-meta-row i {
    color: var(--clr-green, #2E9E4B);
    font-size: .8rem;
    flex-shrink: 0;
}

/* ================================================
   LIGHTBOX
   ================================================ */
.cert-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    z-index: 1050;
}

.cert-lightbox-backdrop.active {
    display: block;
}

.cert-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1051;
    align-items: center;
    justify-content: center;
    padding: 2rem 5rem;
}

.cert-lightbox.active {
    display: flex;
}

.cert-lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 700px;
    width: 100%;
}

.cert-lightbox-inner img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    display: block;
}

/* Caption below image */
.cert-lightbox-info {
    text-align: center;
}

.cert-lightbox-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.cert-lightbox-sub {
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
    margin-top: .25rem;
}

/* Close button */
.cert-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.cert-lightbox-close:hover {
    background: rgba(255, 255, 255, .25);
}

/* Prev / Next */
.cert-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.cert-lightbox-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.cert-prev {
    left: 1.25rem;
}

.cert-next {
    right: 1.25rem;
}

@media (max-width: 576px) {
    .cert-lightbox {
        padding: 1.5rem;
    }

    .cert-lightbox-nav {
        display: none;
    }

    .cert-lightbox-inner img {
        max-height: 60vh;
    }
}

/* ---------- Tim ---------- */
.team-card {
    text-align: center;
    background: #fff;
    padding: 2rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all .3s;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.team-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.4rem;
    background: linear-gradient(135deg, var(--clr-blue), var(--clr-navy));
}

.team-card:nth-child(3n+1) .team-avatar {
    background: linear-gradient(135deg, var(--clr-green), var(--clr-teal));
}

.team-card:nth-child(3n+2) .team-avatar {
    background: linear-gradient(135deg, var(--clr-blue), var(--clr-navy));
}

.team-card:nth-child(3n+3) .team-avatar {
    background: linear-gradient(135deg, var(--clr-red), var(--clr-red-dark));
}

.team-name {
    font-size: 1.05rem;
    color: var(--clr-navy);
    margin-bottom: .2rem;
}

.team-role {
    color: var(--clr-mute);
    font-size: .88rem;
}

/* ================================================
   LOWONGAN / CAREER
   ================================================ */

/* ── Job Card ── */
.job-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(10, 30, 63, .08);
    border-left: 4px solid var(--clr-blue, #2196E8);
    box-shadow: 0 2px 10px rgba(10, 30, 63, .05);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, border-left-color .25s;
}

.job-card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 28px rgba(10, 30, 63, .11);
    border-left-color: var(--clr-red, #E63946);
}

/* Thumbnail */
.job-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
}

.job-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.job-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-thumb-fallback i {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, .3);
}

/* Info */
.job-info {
    flex: 1;
    min-width: 0;
}

.job-info h5 {
    color: var(--clr-navy, #0A1E3F);
    margin-bottom: .3rem;
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .8rem;
    color: #6b7280;
}

.job-meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.job-meta i {
    color: var(--clr-blue, #2196E8);
    font-size: .85rem;
}

/* Actions */
.job-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}

.badge-type {
    background: rgba(33, 150, 232, .1);
    color: var(--clr-blue, #2196E8);
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-intern {
    background: rgba(46, 158, 75, .1);
    color: var(--clr-green, #2E9E4B);
}

.job-detail-link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--clr-blue, #2196E8);
    display: flex;
    align-items: center;
    gap: .3rem;
    transition: color .2s;
}

.job-card:hover .job-detail-link {
    color: var(--clr-navy, #0A1E3F);
}

@media (max-width: 576px) {
    .job-card {
        flex-wrap: wrap;
    }

    .job-thumb {
        width: 56px;
        height: 56px;
    }

    .job-actions {
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
}

/* ================================================
   JOB MODAL
   ================================================ */
.job-modal-content {
    border-radius: 18px;
    overflow: hidden;
    border: none;
}

/* Photo header — side by side */
.job-modal-photos {
    display: flex;
    height: 220px;
    overflow: hidden;
}

.job-modal-photo-wrap {
    flex: 1;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
    position: relative;
}

.job-modal-photo-wrap+.job-modal-photo-wrap {
    border-left: 2px solid #fff;
}

.job-modal-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Modal body */
.job-modal-body {
    padding: 2rem 2rem 1.75rem;
    position: relative;
}

/* Close button */
.job-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(10, 30, 63, .07);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: .95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-navy, #0A1E3F);
    transition: background .2s;
}

.job-modal-close:hover {
    background: rgba(10, 30, 63, .14);
}

/* Head */
.job-modal-head {
    margin-bottom: 1.25rem;
}

.job-modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--clr-navy, #0A1E3F);
    margin: .5rem 0 0;
    line-height: 1.3;
}

/* Meta grid */
.job-modal-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem 1rem;
    background: #f8f9fc;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.jm-meta-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.jm-meta-item>i {
    font-size: 1rem;
    color: var(--clr-blue, #2196E8);
    margin-top: .15rem;
    flex-shrink: 0;
}

.jm-meta-item div {
    display: flex;
    flex-direction: column;
}

.jm-meta-item small {
    font-size: .68rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.jm-meta-item strong {
    font-size: .85rem;
    color: var(--clr-navy, #0A1E3F);
    font-weight: 600;
    line-height: 1.35;
}

@media (max-width: 576px) {
    .job-modal-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .job-modal-photos {
        height: 160px;
    }

    .job-modal-body {
        padding: 1.4rem;
    }

    .job-modal-title {
        font-size: 1.15rem;
    }
}

/* Sections */
.job-modal-section {
    margin-bottom: 1.25rem;
}

.job-modal-section-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--clr-navy, #0A1E3F);
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid rgba(10, 30, 63, .07);
}

.job-modal-section p {
    font-size: .88rem;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

.job-modal-list {
    padding-left: 1.2rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.job-modal-list li {
    font-size: .87rem;
    color: #4b5563;
    line-height: 1.55;
}

/* Footer */
.job-modal-footer {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(10, 30, 63, .07);
    margin-top: .5rem;
}

/* ── Foto modal clickable ── */
.job-modal-photo-wrap {
    position: relative;
    cursor: zoom-in;
}

.job-modal-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 63, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
}

.job-modal-photo-wrap:hover .job-modal-photo-overlay {
    opacity: 1;
}

.job-modal-photo-overlay i {
    font-size: 2rem;
    color: #fff;
}

/* ── Job Photo Lightbox ── */
.jm-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .95);
    z-index: 1100;
}

.jm-lightbox-backdrop.active {
    display: block;
}

.jm-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1101;
    align-items: center;
    justify-content: center;
    padding: 2rem 5rem;
}

.jm-lightbox.active {
    display: flex;
}

.jm-lb-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 900px;
    width: 100%;
}

.jm-lb-inner img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    display: block;
}

.jm-lb-caption {
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}

.jm-lb-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1102;
}

.jm-lb-close:hover {
    background: rgba(255, 255, 255, .25);
}

.jm-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1102;
}

.jm-lb-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.jm-lb-prev {
    left: 1.25rem;
}

.jm-lb-next {
    right: 1.25rem;
}

@media (max-width: 576px) {
    .jm-lightbox {
        padding: 1.5rem;
    }

    .jm-lb-nav {
        display: none;
    }

    .jm-lb-inner img {
        max-height: 65vh;
    }
}

/* ================================================
   TEAM GALLERY
   ================================================ */

/* ── Grid card ── */
.tg-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .07);
    box-shadow: 0 2px 8px rgba(10, 30, 63, .05);
    transition: transform .2s, box-shadow .2s;
}

.tg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(10, 30, 63, .13);
}

.tg-thumb {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
}

.tg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.tg-card:hover .tg-thumb img {
    transform: scale(1.07);
}

/* Fallback */
.tg-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clr-navy, #0A1E3F), #0B4C6B);
}

.tg-fallback i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, .2);
}

/* Hover overlay */
.tg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 63, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
}

.tg-card:hover .tg-overlay {
    opacity: 1;
}

.tg-overlay i {
    font-size: 2rem;
    color: #fff;
}

/* Title below thumb */
.tg-title {
    padding: .65rem .85rem .75rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--clr-navy, #0A1E3F);
    line-height: 1.4;
    background: #fff;
}

/* ================================================
   LIGHTBOX
   ================================================ */
.tg-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 1050;
}

.tg-lightbox-backdrop.active {
    display: block;
}

.tg-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1051;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.tg-lightbox.active {
    display: flex;
}

.tg-lightbox-inner {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.tg-lightbox-inner img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    display: block;
    margin: 0 auto;
}

.tg-lightbox-caption {
    margin-top: 1rem;
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Close button */
.tg-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.tg-lightbox-close:hover {
    background: rgba(255, 255, 255, .25);
}

/* Prev / Next buttons */
.tg-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1052;
}

.tg-lightbox-nav:hover {
    background: rgba(255, 255, 255, .25);
}

.tg-prev {
    left: 1.25rem;
}

.tg-next {
    right: 1.25rem;
}

@media (max-width: 576px) {
    .tg-lightbox-nav {
        display: none;
    }

    .tg-lightbox-inner img {
        max-height: 65vh;
    }
}

/* ================================================
   BRANCH OFFICES
   ================================================ */

/* ── Map wrapper ── */
.branch-map-wrapper {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(10, 30, 63, .08);
    box-shadow: 0 4px 24px rgba(10, 30, 63, .08);
}

.branch-map-header {
    background: #fff;
    border-bottom: 1px solid rgba(10, 30, 63, .07);
    padding: 1rem 1.5rem;
}

.branch-map-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.branch-map-header h5 {
    font-size: .95rem;
    font-weight: 700;
    color: #0A1E3F;
    margin: 0 0 2px;
}

.branch-map-header h5 i {
    color: #2196E8;
}

.branch-map-header p {
    font-size: .78rem;
    color: #9ca3af;
    margin: 0;
}

#branchMap {
    width: 100%;
    height: 460px;
}

@media (max-width: 576px) {
    #branchMap {
        height: 300px;
    }
}

/* ── Branch Card ── */
.branch-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    box-shadow: 0 2px 12px rgba(10, 30, 63, .05);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.branch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(10, 30, 63, .11);
}

/* ── HQ Card ── */
.branch-card-hq {
    flex-direction: row;
    border-left: 4px solid #2196E8;
    min-height: 280px;
}

.branch-hq-img-wrap {
    position: relative;
    width: 360px;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0A1E3F, #0B4C6B);
}

.branch-hq-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.branch-card-hq:hover .branch-hq-img {
    transform: scale(1.05);
}

.branch-hq-img-fallback {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0A1E3F, #0B4C6B);
}

.branch-hq-img-fallback i {
    font-size: 4rem;
    color: rgba(255, 255, 255, .15);
}

.branch-hq-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #2196E8;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

@media (max-width: 767px) {
    .branch-card-hq {
        flex-direction: column;
    }

    .branch-hq-img-wrap {
        width: 100%;
        height: 220px;
    }
}

/* ── Card Body ── */
.branch-body {
    padding: 1.6rem 1.8rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
}

.branch-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9ca3af;
}

.branch-label-hq {
    color: #2196E8;
}

.branch-city {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0A1E3F;
    margin: 0;
    line-height: 1.3;
}

.branch-city i {
    color: #E63946;
}

/* ── Info Rows ── */
.branch-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(10, 30, 63, .06);
    border-bottom: 1px solid rgba(10, 30, 63, .06);
    margin: .25rem 0;
}

.branch-info-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .82rem;
    color: #4b5563;
    line-height: 1.5;
}

.branch-info-row i {
    color: #2196E8;
    opacity: .6;
    font-size: .85rem;
}

/* ---------- Org Chart Image ---------- */
.org-chart-wrapper {
    background: #fff;
    border: 1px solid rgba(10, 30, 63, .08);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 20px rgba(10, 30, 63, .06);
    text-align: center;
}

.org-chart-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

.org-chart-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 5rem 2rem;
    color: #9ca3af;
}

.org-chart-fallback i {
    font-size: 4rem;
    opacity: .4;
}

.org-chart-fallback p {
    font-size: 1rem;
    margin: 0;
    color: #6b7280;
}

.org-chart-fallback small {
    font-size: .8rem;
    color: #9ca3af;
}

.visitor-stats-bar {
    padding: 56px 0 60px;
    position: relative;
    background: #fff;
}

.visitor-stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 32px;
    background: rgba(0, 0, 0, .12);
}

.vsb-inner {
    display: block;
}

.vsb-eyebrow-line {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vsb-eyebrow-line::before,
.vsb-eyebrow-line::after {
    content: '';
    flex: 1;
    max-width: 80px;
    height: 0.5px;
    background: rgba(0, 0, 0, .15);
}

.vsb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 16px;
    overflow: hidden;
    max-width: 640px;
    margin: 0 auto;
}

.vsb-cell {
    padding: 28px 20px 24px;
    text-align: center;
    position: relative;
    background: #fff;
}

.vsb-cell+.vsb-cell::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(0, 0, 0, .08);
}

.vsb-num {
    font-size: 2rem;
    font-weight: 700;
    color: #0A1E3F;
    line-height: 1;
    letter-spacing: -.03em;
    display: block;
    margin-bottom: 6px;
}

.vsb-period {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 500;
}

.vsb-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #aaa;
    font-size: 12px;
}

/* pulse & existing .vsb-dot-live tetap sama */

@media (max-width: 600px) {
    .vsb-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .vsb-cell:nth-child(3) {
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

    .vsb-cell:nth-child(4) {
        border-top: 1px solid rgba(0, 0, 0, .08);
    }

    .vsb-cell:nth-child(3)::before {
        display: none;
    }
}

/* ==============================================
   WHATSAPP BOT WIDGET
   ============================================== */

.wa-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* --- Chat Window --- */
.wa-window {
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;
    display: none;
    flex-direction: column;
    transform-origin: bottom right;
    animation: waSlideIn .25s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.wa-window.wa-open {
    display: flex;
}

@keyframes waSlideIn {
    from {
        opacity: 0;
        transform: scale(.85) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header */
.wa-header {
    background: #25D366;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    position: relative;
    flex-shrink: 0;
}

.wa-status-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a3f7b5;
    border: 2px solid #25D366;
}

.wa-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wa-header-info strong {
    color: #fff;
    font-size: .9rem;
    line-height: 1.2;
}

.wa-header-info span {
    color: rgba(255, 255, 255, .8);
    font-size: .72rem;
}

.wa-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s;
}

.wa-close:hover {
    color: #fff;
}

/* Body */
.wa-body {
    padding: 16px;
    background: #f0f2f5;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Messages */
.wa-msg {
    background: #fff;
    border-radius: 0 10px 10px 10px;
    padding: 10px 13px;
    font-size: .84rem;
    color: #111;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    max-width: 92%;
}

.wa-msg p {
    margin: 0 0 4px;
}

.wa-msg p:last-child {
    margin-bottom: 0;
}

.wa-msg-out {
    background: #d9fdd3;
    border-radius: 10px 0 10px 10px;
    align-self: flex-end;
    color: #111;
}

/* Quick replies */
.wa-quick-replies {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wa-qr {
    background: #fff;
    border: 1.5px solid #25D366;
    color: #128C7E;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
    line-height: 1.4;
}

.wa-qr:hover {
    background: #25D366;
    color: #fff;
}

/* Footer */
.wa-footer {
    background: #f0f2f5;
    border-top: 1px solid #e5e5e5;
    padding: 8px 16px;
    font-size: .7rem;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- FAB Button --- */
.wa-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, .45);
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

.wa-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .55);
}

.wa-fab:active {
    transform: scale(.96);
}

/* Badge notif */
.wa-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #E63946;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    animation: waBounce .6s ease infinite alternate;
}

.wa-badge.wa-badge-hide {
    display: none;
}

/* Typing indicator */
.wa-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    width: fit-content;
}

.wa-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #aaa;
    animation: waDot .9s ease infinite;
}

.wa-typing span:nth-child(2) {
    animation-delay: .15s;
}

.wa-typing span:nth-child(3) {
    animation-delay: .30s;
}

@keyframes waDot {

    0%,
    80%,
    100% {
        transform: scale(.7);
        opacity: .4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Action buttons */
.wa-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.wa-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #25D366;
    color: #fff;
    border-radius: 20px;
    padding: 9px 16px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}

.wa-btn-wa:hover {
    background: #1ebe5d;
    color: #fff;
}

.wa-btn-wa i {
    font-size: 1rem;
}

.wa-btn-back {
    background: none;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: .78rem;
    color: #888;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.wa-btn-back:hover {
    border-color: #aaa;
    color: #555;
}

/* Scroll body */
.wa-body {
    max-height: 320px;
    overflow-y: auto;
}

.wa-body ul {
    margin: 6px 0 4px 0;
    padding-left: 18px;
    font-size: .82rem;
}

.wa-body ul li {
    margin-bottom: 3px;
}

.wa-body a {
    color: #128C7E;
}

@keyframes waBounce {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.18);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .wa-widget {
        bottom: 18px;
        right: 16px;
    }

    .wa-window {
        width: calc(100vw - 32px);
    }
}



/* ================================================
   FOOTER
   ================================================ */
.footer-samudra {
    background: var(--clr-navy);
    color: #fff;
    position: relative;
    margin-top: 4rem;
}

.footer-wave {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 80px;
    transform: translateY(-99%);
    line-height: 0;
}

.footer-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.footer-wave svg path {
    fill: var(--clr-navy);
}

.footer-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: #fff;
    margin-bottom: 1.2rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: .5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
    transition: color .2s;
}

.footer-links a:hover {
    color: var(--clr-blue);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    margin-right: .5rem;
    transition: all .3s;
}

.social-links a:hover {
    background: var(--clr-blue);
    transform: translateY(-3px);
}

/* ================================================
   Responsive
   ================================================ */
@media (max-width: 992px) {
    .hero-carousel-controls {
        display: none;
    }

    .hero-ship {
        width: 160px;
        bottom: 25%;
    }

    .hero-glow {
        width: 180px;
        height: 180px;
    }

    .navbar-samudra {
        background: rgba(255, 255, 255, .98);
    }

    .navbar-samudra .navbar-collapse {
        padding-top: 1rem;
    }

    .direktur-card {
        padding: 2rem;
    }

    .section {
        padding: 4rem 0;
    }
}

@media (max-width: 576px) {
    .hero-stats {
        gap: 1.5rem;
    }

    .hero-stat .num {
        font-size: 1.8rem;
    }

    .job-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ================================================
   HERO PHOTO CAROUSEL (v2) — dengan foto & panah
   ================================================ */
.hero-photo {
    position: relative;
    min-height: 100vh;
    background: var(--clr-navy);
    overflow: hidden;
    color: #fff;
}

.hero-photo .carousel,
.hero-photo .carousel-inner,
.hero-photo .carousel-item {
    height: 100vh;
    min-height: 620px;
}

.hero-photo .carousel-item {
    position: relative;
}

/* Background foto per slide */
.hero-photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.05);
    animation: kenburns 12s ease-out infinite alternate;
}

.carousel-item.active .hero-photo-bg {
    animation-play-state: running;
}

@keyframes kenburns {
    from {
        transform: scale(1.05) translateX(0);
    }

    to {
        transform: scale(1.15) translateX(-2%);
    }
}

/* Overlay gelap gradient — teks tetap terbaca (merata, sedikit vignette) */
.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(10, 30, 63, .55) 0%, rgba(10, 30, 63, .75) 100%),
        linear-gradient(180deg, rgba(10, 30, 63, .4) 0%, transparent 30%, rgba(10, 30, 63, .8) 100%);
}

/* Placeholder fallback ketika foto belum ada */
.hero-photo-bg {
    background-color: var(--clr-navy);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(33, 150, 232, .3), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(46, 158, 75, .2), transparent 50%),
        linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-teal) 100%);
}

/* Konten teks di atas foto */
.carousel-caption-custom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding-top: 120px;
    /* offset navbar */
    padding-bottom: 200px;
    /* ruang untuk stats, kapal & ombak */
    text-align: center;
    right: auto;
    left: auto;
}

.carousel-caption-custom .container {
    max-width: 900px;
}

.carousel-caption-custom .row {
    justify-content: center;
}

.carousel-caption-custom .col-lg-8 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 780px;
    text-align: center;
}

.carousel-caption-custom .lead {
    margin-left: auto;
    margin-right: auto;
}

.carousel-caption-custom .d-flex {
    justify-content: center;
}

.hero-photo h1 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin: 1.2rem 0 1.5rem;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .4);
    font-family: var(--font-display);
    font-weight: 900;
}

.hero-photo h1 .accent {
    background: linear-gradient(90deg, #7cd984, var(--clr-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}

.hero-photo .lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .9);
    max-width: 560px;
    margin-bottom: 2rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

/* Panah navigasi — kiri & kanan */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all .3s ease;
    padding: 0;
}

.hero-nav:hover {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 30px rgba(33, 150, 232, .5);
}

.hero-nav-prev {
    left: 2rem;
}

.hero-nav-next {
    right: 2rem;
}

/* Dots indicators */
.hero-dots {
    bottom: 200px !important;
    z-index: 8;
    gap: .6rem;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.hero-dots button {
    width: 40px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .4) !important;
    border: 0 !important;
    opacity: 1 !important;
    transition: all .3s;
    margin: 0 4px !important;
}

.hero-dots button.active {
    background: linear-gradient(90deg, var(--clr-green), var(--clr-blue), var(--clr-red)) !important;
    width: 60px !important;
}

/* Progress bar bawah */
.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, .1);
    z-index: 8;
}

.hero-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--clr-green), var(--clr-blue), var(--clr-red));
    animation: progressFill 6s linear infinite;
}

@keyframes progressFill {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Stats bar — di bawah carousel */
.hero-stats-wrapper {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 6;
}

.hero-photo .hero-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding: 1.5rem 2rem;
    background: rgba(10, 30, 63, .6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    margin: 0;
}

.hero-photo .hero-stat {
    border: 0;
    padding: 0;
}

/* Waves di hero photo */
.hero-photo .hero-waves {
    z-index: 3;
    height: 180px;
}

/* Bubbles override */
.hero-photo .bubbles {
    z-index: 2;
}

/* ================================================
   DIREKTUR PORTRAIT — Highlighted foto
   ================================================ */
.direktur-portrait {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 24px 40px 0;
}

.portrait-frame {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(10, 30, 63, .25),
        0 10px 30px rgba(10, 30, 63, .15);
    background: linear-gradient(135deg, var(--clr-navy), var(--clr-teal));
    z-index: 2;
    transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}

.direktur-portrait:hover .portrait-frame {
    transform: translateY(-6px);
}

.portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 8s ease-out;
}

.direktur-portrait:hover .portrait-frame img {
    transform: scale(1.08);
}

/* Fallback ketika foto belum ada — inisial jadi placeholder */
.portrait-frame.no-image::after {
    content: 'B';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 10rem;
    font-weight: 900;
    color: rgba(255, 255, 255, .15);
}

.portrait-frame.no-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23ffffff' fill-opacity='.05' d='M0,20 Q10,10 20,20 T40,20'/%3E%3C/svg%3E");
}

/* Decorative accent — kotak2 warna logo (green & red) */
.portrait-accent {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 6px solid;
    border-radius: 12px;
    z-index: 1;
}

.portrait-accent-tl {
    top: 0;
    left: -24px;
    border-color: var(--clr-green);
    animation: floatY 4s ease-in-out infinite alternate;
}

.portrait-accent-br {
    bottom: 0;
    right: -24px;
    border-color: var(--clr-red);
    animation: floatY 4s ease-in-out infinite alternate-reverse;
}

@keyframes floatY {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

/* Badge floating — info direktur */
.portrait-badge {
    position: absolute;
    bottom: 30px;
    right: -20px;
    background: #fff;
    padding: 1rem 1.4rem;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(10, 30, 63, .2);
    display: flex;
    align-items: center;
    gap: .8rem;
    z-index: 3;
    border-left: 4px solid var(--clr-blue);
}

.portrait-badge i {
    font-size: 1.8rem;
    color: var(--clr-blue);
}

.portrait-badge small {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--clr-mute);
}

.portrait-badge strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--clr-navy);
}

/* Quote & signature untuk section direktur di home */
.direktur-quote-inline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--clr-navy);
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid var(--clr-red);
    margin: 1.5rem 0;
}

.direktur-signature {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: 1.5rem;
}

.direktur-signature strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--clr-navy);
}

.direktur-signature span {
    color: var(--clr-mute);
    font-size: .9rem;
}

/* Outline button variant untuk hero (light) */
.btn-samudra-outline-light {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, .7);
    color: #fff !important;
    font-weight: 600;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    transition: all .3s;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.btn-samudra-outline-light:hover {
    background: #fff;
    color: var(--clr-navy) !important;
    transform: translateY(-2px);
}

/* Responsive tweaks */
@media (max-width: 992px) {
    .hero-nav {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .hero-nav-prev {
        left: .75rem;
    }

    .hero-nav-next {
        right: .75rem;
    }

    .hero-dots {
        bottom: 240px !important;
    }

    .hero-photo .hero-stats {
        gap: 1.5rem;
        padding: 1rem 1.2rem;
    }

    .hero-photo .hero-stat .num {
        font-size: 1.8rem;
    }

    .portrait-badge {
        right: 10px;
        padding: .7rem 1rem;
    }

    .portrait-accent {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 576px) {
    .carousel-caption-custom {
        padding-bottom: 240px;
    }

    .hero-stats-wrapper {
        bottom: 20px;
    }

    .hero-photo .hero-stats {
        gap: 1rem;
    }

    .hero-photo .hero-stat .num {
        font-size: 1.4rem;
    }

    .hero-photo .hero-stat .lbl {
        font-size: .7rem;
    }

    .direktur-portrait {
        padding: 20px 20px 30px 0;
    }

    .portrait-accent-tl {
        left: -12px;
        width: 60px;
        height: 60px;
    }

    .portrait-accent-br {
        right: -12px;
        width: 60px;
        height: 60px;
    }

    .direktur-quote-inline {
        font-size: 1.1rem;
        padding-left: 1.2rem;
    }
}

/* ================================================
   KAPAL BERAYUN di hero-photo (revive dari v1)
   ================================================ */
.hero-photo .hero-ship {
    position: absolute;
    bottom: 180px;
    /* di atas stats bar & ombak */
    right: 8%;
    /* di sisi kanan, tidak menutupi teks tengah */
    left: auto;
    transform: none;
    width: 200px;
    z-index: 4;
    /* di depan ombak, di belakang teks */
    opacity: .95;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .4));
    animation: ship-rock-v2 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes ship-rock-v2 {
    0% {
        transform: rotate(-2deg) translateY(0);
    }

    100% {
        transform: rotate(2deg) translateY(-8px);
    }
}

/* Text shadow lebih kuat karena background bervariasi */
.hero-photo h1,
.hero-photo .lead,
.hero-photo .hero-eyebrow {
    text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}

.hero-eyebrow {
    margin-top: .5rem;
    display: inline-flex;
}

/* Responsive kapal */
@media (max-width: 992px) {
    .hero-photo .hero-ship {
        width: 140px;
        right: 5%;
        bottom: 240px;
        opacity: .7;
    }
}

@media (max-width: 576px) {
    .hero-photo .hero-ship {
        width: 100px;
        right: 3%;
        bottom: 300px;
        opacity: .55;
    }
}

/* ================================================
   PRELOADER — Ship sailing intro
   ================================================ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(180deg, #0A1E3F 0%, #0F2A54 50%, #0B4C6B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    animation: preloaderFadeOut 1s ease-in-out 3s forwards;
}

/* Bintang berkelap-kelip di background */
.preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 15% 20%, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1px 1px at 30% 40%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1px 1px at 75% 35%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(2px 2px at 85% 25%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1px 1px at 45% 50%, rgba(255, 255, 255, .4), transparent);
    animation: twinkle 3s ease-in-out infinite alternate;
}

/* Ocean di bawah */
.preloader-ocean {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    z-index: 1;
}

.preloader-wave {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
}

.preloader-wave-1 {
    animation: waveMove 6s linear infinite;
    opacity: .8;
}

.preloader-wave-2 {
    animation: waveMove 9s linear infinite reverse;
    opacity: .6;
    bottom: -15px;
}

.preloader-wave-3 {
    animation: waveMove 4s linear infinite;
    opacity: .9;
    bottom: -25px;
}

@keyframes waveMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Kapal — sail-in dari kiri ke tengah, lalu naik-turun */
.preloader-ship-wrap {
    position: absolute;
    bottom: 32%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: shipSailIn 2s cubic-bezier(.2, .8, .3, 1) forwards;
}

.preloader-ship {
    width: 180px;
    display: block;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, .5));
    animation: shipRock 2.5s ease-in-out .8s infinite alternate;
    transform-origin: center bottom;
}

@keyframes shipSailIn {
    0% {
        left: -25%;
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        left: 50%;
        opacity: 1;
    }
}

@keyframes shipRock {
    0% {
        transform: rotate(-3deg) translateY(0);
    }

    100% {
        transform: rotate(3deg) translateY(-6px);
    }
}

/* Percikan air kecil */
.preloader-splash {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.preloader-splash span {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, .7);
    border-radius: 50%;
    animation: splash 1.5s ease-in-out infinite;
}

.preloader-splash span:nth-child(2) {
    animation-delay: .2s;
}

.preloader-splash span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes splash {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .7;
    }

    50% {
        transform: translateY(-12px) scale(1.4);
        opacity: 1;
    }
}

/* Konten teks & progress */
.preloader-content {
    position: relative;
    z-index: 5;
    text-align: center;
    color: #fff;
    margin-bottom: 8%;
    opacity: 0;
    animation: contentFadeIn 1s ease-out 1.2s forwards;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preloader-logo {
    height: 70px;
    width: auto;
    margin-bottom: 1rem;
    /* jadikan logo putih. hapus jika logo sudah warna */
    opacity: .95;
}

.preloader-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 900;
    letter-spacing: .15em;
    margin-bottom: .3rem;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.preloader-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: .95rem;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 1.5rem;
    letter-spacing: .05em;
}

/* Progress bar */
.preloader-bar {
    width: 240px;
    height: 3px;
    background: rgba(255, 255, 255, .15);
    border-radius: 999px;
    overflow: hidden;
    margin: 0 auto;
}

.preloader-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--clr-green), var(--clr-blue), var(--clr-red));
    border-radius: 999px;
    animation: barFill 2.5s ease-out .5s forwards;
}

@keyframes barFill {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* Fade out preloader */
@keyframes preloaderFadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* State kelas "loaded" (dipicu JS setelah window.load) — fallback jika CSS animasi selesai duluan */
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s ease;
}

/* Lock scroll saat preloader aktif */
body.preloading {
    overflow: hidden;
    height: 100vh;
}

/* Fade in body content setelah preloader */
body.preloading main,
body.preloading .navbar-samudra,
body.preloading .footer-samudra {
    opacity: 0;
}

body.loaded main,
body.loaded .navbar-samudra,
body.loaded .footer-samudra {
    opacity: 1;
    transition: opacity 1s ease .3s;
}

/* Responsive */
@media (max-width: 576px) {
    .preloader-ship {
        width: 130px;
    }

    .preloader-logo {
        height: 55px;
    }

    .preloader-bar {
        width: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preloader {
        animation-duration: .3s;
        animation-delay: 1s;
    }

    .preloader-ship,
    .preloader-wave-1,
    .preloader-wave-2,
    .preloader-wave-3 {
        animation: none;
    }
}

/* ================================================
   HERO CAROUSEL — Full height mobile fix
   ================================================ */

/* Gunakan 100dvh (dynamic viewport height) agar pas di browser mobile
   yang punya address bar. Fallback ke 100svh lalu 100vh */
.hero-photo,
.hero-photo .carousel,
.hero-photo .carousel-inner,
.hero-photo .carousel-item {
    height: 100dvh;
    min-height: 100dvh;
}

@supports not (height: 100dvh) {

    .hero-photo,
    .hero-photo .carousel,
    .hero-photo .carousel-inner,
    .hero-photo .carousel-item {
        height: 100svh;
        min-height: 100svh;
    }
}

@supports not (height: 100svh) {

    .hero-photo,
    .hero-photo .carousel,
    .hero-photo .carousel-inner,
    .hero-photo .carousel-item {
        height: 100vh;
        min-height: 100vh;
    }
}

/* Pastikan section setelah hero tidak ada gap */
.hero-photo+.section,
.hero-photo+section {
    position: relative;
    z-index: 1;
}

/* ── Mobile: sesuaikan posisi elemen dalam carousel ── */
@media (max-width: 576px) {

    /* Caption lebih ke tengah-atas secara vertikal */
    .carousel-caption-custom {
        padding-top: 100px;
        padding-bottom: 220px;
        justify-content: center;
    }

    /* Stats bar tetap nempel di bawah */
    .hero-stats-wrapper {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    .hero-photo .hero-stats {
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        gap: 0;
        padding: .85rem 1rem;
        justify-content: space-around;
    }

    .hero-photo .hero-stat {
        flex: 1;
        text-align: center;
        padding: 0 .25rem;
        border-right: 1px solid rgba(255, 255, 255, .1);
    }

    .hero-photo .hero-stat:last-child {
        border-right: none;
    }

    .hero-photo .hero-stat .num {
        font-size: 1.25rem;
    }

    .hero-photo .hero-stat .lbl {
        font-size: .58rem;
        letter-spacing: .04em;
        line-height: 1.3;
    }

    /* Dots lebih tinggi sedikit dari stats bar */
    .hero-dots {
        bottom: 72px !important;
    }

    /* Waves lebih pendek */
    .hero-photo .hero-waves {
        height: 100px;
    }

    /* Ship kecil di pojok */
    .hero-photo .hero-ship {
        width: 80px;
        right: 2%;
        bottom: 130px;
        opacity: .35;
    }
}

@media (min-width: 577px) and (max-width: 991px) {

    .carousel-caption-custom {
        padding-bottom: 220px;
    }

    .hero-dots {
        bottom: 180px !important;
    }

    .hero-stats-wrapper {
        bottom: 20px;
    }
}