/*
Theme Name: Website x Steroids Custom Block Theme
Theme URI: https://bird.com
Description: Ultra-clean, modern FSE Block Theme inspired by the premium Business Communication and Multi-Channel Platform of Bird.com. Powered by theme.json and Gutenberg Blocks.
Version: 1.0.0
Author: Antigravity Custom Engine
Tags: full-site-editing, block-theme, modern, clean, one-column, portfolio
Text Domain: steroids-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&display=swap');

/* ==========================================================================
   NAVIGATION & MEGA MENU SYSTEM (BIRD.COM STYLE)
   ========================================================================== */

header.wp-block-template-part,
header.wsx-block-template-part,
.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-sizing: border-box;
}

header.wp-block-template-part,
header.wsx-block-template-part {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.015);
}

.site-header {
    background: transparent;
    border: none;
    box-shadow: none;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    box-sizing: border-box;
    position: relative;
    z-index: 1; /* Di bawah nav-bar */
    pointer-events: none; /* Biarkan event lolos ke nav-bar */
}

.header-left,
.header-right {
    pointer-events: auto; /* Logo dan CTA tetap clickable */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 48px;
}

.header-nav-spacer {
    width: 400px;
    flex-shrink: 1;
    pointer-events: none; /* Biarkan event lolos ke nav di bawahnya */
}

/* Navigation bar - positioned absolute overlaying header area */
.wsx-nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    box-sizing: border-box;
    padding: 16px 24px;
    pointer-events: none;
}

.wsx-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 80px;
    display: flex;
    align-items: center;
}

/* Aktifkan pointer events cuma untuk link navigasi */
.wsx-nav-inner [class*="block-navigation-item__content"],
.wsx-nav-inner [class*="navigation-item__content"],
.wsx-nav-inner a,
.wsx-nav-inner button,
/* Juga untuk submenu yang position:fixed (keluar dari nav-bar) */
[class*="block-navigation__submenu-container"],
[class*="block-navigation__submenu-container"] * {
    pointer-events: auto !important;
}

.header-logo {
    display: flex;
    align-items: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-logo:hover {
    transform: scale(1.05);
}

.logo-svg {
    width: 32px;
    height: 32px;
    display: block;
}

.main-navigation {
    display: block;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 32px;
    margin: 0;
    padding: 0;
}

.menu-item {
    position: static; /* Allows mega menu to reference container width instead */
}

.menu-link {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    color: #09090b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.menu-link:hover {
    color: #26ccf0;
}

.arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #71717a;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-top-color 0.2s;
}

.menu-item:hover .arrow-down {
    transform: rotate(180deg);
    border-top-color: #26ccf0;
}

/* Panel Dropdown Mega Menu — now positioned relative to .wsx-nav-bar */
.megamenu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    border: none;
    border-top: 1px solid #f4f4f5;
    border-radius: 0;
    z-index: 10000;
    box-sizing: border-box;
    
    /* Micro-animation transitions */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.25s;
}

/* Invisible bridge to keep hover state active across the container padding gap */
.megamenu-panel::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    background: transparent;
}

.menu-item:hover .megamenu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.megamenu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    padding: 36px 40px;
    box-sizing: border-box;
}

/* Kolom span 2 di static megamenu */
.megamenu-column-span-2 {
    grid-column: span 2;
}

/* Item dengan deskripsi di static megamenu */
.megamenu-item-has-description .menu-link {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.megamenu-item-description {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #71717a;
    line-height: 1.4;
    display: block;
    margin: 2px 0 0 0;
    padding: 0;
}

.megamenu-column {
    display: flex;
    flex-direction: column;
}

.column-title {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #71717a;
    letter-spacing: 0.06em;
    margin: 0 0 16px 0;
    padding: 0;
}

.column-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.column-links li {
    padding: 0;
    margin: 0;
}

.column-links a {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #09090b;
    text-decoration: none;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.column-links a:hover {
    background-color: #f4f4f5;
    color: #09090b;
}

/* Styling Khusus Link Overview */
.column-links .overview {
    margin-top: 6px;
    border-top: 1px dashed #e4e4e7;
    padding-top: 8px;
}

.column-links .overview a {
    color: #a1a1aa;
    font-size: 16px;
    font-weight: 500;
}

.column-links .overview a:hover {
    color: #09090b;
}

/* Bagian Kanan Header */
.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn-login {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    color: #09090b;
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 8px 0;
}

.btn-login:hover {
    color: #26ccf0;
}

.btn-cta {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    color: #ffffff;
    background: #000000;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.btn-cta:hover {
    background: #27272a;
    transform: translateY(-1px);
}

/* ==========================================================================
   RESPONSIVE DESIGN (NAVIGATION)
   ========================================================================== */

@media (max-width: 991px) {
    .header-container {
        padding: 12px 16px;
    }
    
    .header-left {
        gap: 24px;
    }
    
    .header-nav-spacer {
        width: 250px;
    }
    
    .wsx-nav-inner {
        padding-left: 48px;
    }
    
    .wsx-nav-bar {
        padding: 12px 16px;
    }
    
    .nav-menu {
        gap: 20px;
    }
    
    .menu-link {
        font-size: 14px;
    }
    
    .megamenu-panel {
        left: 0;
        right: 0;
    }
    
    .megamenu-grid {
        padding: 24px 32px;
        gap: 24px;
    }
    
    .column-links a {
        font-size: 16px;
    }
    
    /* Responsive FSE Mega Menu - layar sedang */
    [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] {
        padding: 28px 24px !important;
        gap: 20px !important;
    }
    [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"].megamenu-column-span-2 {
        flex: 1 0 100% !important;
    }
}

@media (max-width: 767px) {
    /* Sederhanakan Navigasi di Mobile agar Tetap Elegan */
    .wsx-nav-bar {
        display: none;
    }
    
    .header-nav-spacer {
        display: none;
    }
    
    .header-right {
        gap: 16px;
    }
    
    .btn-login {
        font-size: 14px;
    }
    
    .btn-cta {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    /* Responsive FSE Mega Menu - mobile */
    [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] {
        padding: 24px 16px !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    .wsx-megamenu-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
    }
}


/* ==========================================================================
   DYNAMIC WORDPRESS FSE NAVIGATION COMPATIBILITY
   ========================================================================== */

/* 1. Font untuk semua item navigasi */
[class*="block-navigation-item__content"] {
    font-family: 'Geist', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 600 !important;
    color: #09090b !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
}
[class*="block-navigation-item__content"]:hover {
    color: #26ccf0 !important;
}

/* 2. Overlay - muncul saat submenu terbuka, di BAWAH header */
.wsx-megamenu-overlay {
    position: fixed !important;
    top: var(--wsx-header-h, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.35) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
.wsx-megamenu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. Reset parent submenu jadi static biar submenu bisa full width */
[class*="block-navigation-item"].has-child,
[class*="block-navigation-submenu"] {
    position: static !important;
}

/* 4. Hapus semua style default submenu container */
[class*="block-navigation__submenu-container"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 5. Panel submenu — target semua submenu dari nav items hover */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] {
    position: fixed !important;
    top: var(--wsx-header-h, 72px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: #ffffff !important;
    border: none !important;
    border-top: 1px solid #f4f4f5 !important;
    border-radius: 0 !important;
    z-index: 10000 !important;
    box-sizing: border-box !important;
    
    /* Default: vertical list (dropdown biasa) */
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 20px calc((100vw - min(1200px, 100vw)) / 2) !important;
}

/* Multi-kolom: submenu yang punya children di dalamnya */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]:has(> [class*="block-navigation-item"].has-child) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 40px !important;
    padding: 36px calc((100vw - min(1200px, 100vw)) / 2) !important;
}

/* Hover bridge */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]::before {
    content: '' !important;
    position: absolute !important;
    top: -30px !important;
    left: 0 !important;
    right: 0 !important;
    height: 30px !important;
    background: transparent !important;
    pointer-events: auto !important;
}

/* 6. Items dalam submenu */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Dropdown biasa (tanpa children di level 2): items full-width */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]:not(:has(> [class*="block-navigation-item"].has-child)) > [class*="block-navigation-item"] {
    width: 100% !important;
}

/* Multi-kolom: items dalam flex row */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]:has(> [class*="block-navigation-item"].has-child) > [class*="block-navigation-item"] {
    min-width: 200px !important;
    max-width: 280px !important;
    flex: 0 0 auto !important;
}

/* Link biasa di dropdown */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]:not(:has(> [class*="block-navigation-item"].has-child)) > [class*="block-navigation-item"] > [class*="block-navigation-item__content"] {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #09090b !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    pointer-events: auto !important;
    padding: 8px 12px !important;
    width: 100% !important;
    border-radius: 6px !important;
    transition: background-color 0.15s ease !important;
}
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]:not(:has(> [class*="block-navigation-item"].has-child)) > [class*="block-navigation-item"] > [class*="block-navigation-item__content"]:hover {
    background-color: #f4f4f5 !important;
    color: #09090b !important;
}

/* Item dengan children = judul kolom kategori */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"]:has(> [class*="block-navigation-item"].has-child) > [class*="block-navigation-item"].has-child > [class*="block-navigation-item__content"] {
    font-family: 'Geist', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #71717a !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 16px 0 !important;
    pointer-events: none !important;
}

/* Kolom span 2 */
[class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"].megamenu-column-span-2 {
    flex: 2 0 360px !important;
}

/* 7. Sub-menu tingkat 2 (di dalam kolom) */
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] {
    all: revert !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    transform: none !important;
}
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] {
    padding: 0 !important;
    margin: 0 !important;
}
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] [class*="block-navigation-item__content"] {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #09090b !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    transition: background-color 0.15s ease !important;
}
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] [class*="block-navigation-item__content"]:hover {
    background-color: #f4f4f5 !important;
    color: #09090b !important;
}

/* Overview */
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"].overview,
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"][class*="overview"] {
    margin-top: 6px !important;
    border-top: 1px dashed #e4e4e7 !important;
    padding-top: 8px !important;
    width: 100% !important;
}
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"].overview [class*="block-navigation-item__content"],
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"][class*="overview"] [class*="block-navigation-item__content"] {
    color: #a1a1aa !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}
[class*="block-navigation-item"].has-child > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"] > [class*="block-navigation__submenu-container"] > [class*="block-navigation-item"].overview [class*="block-navigation-item__content"]:hover {
    color: #09090b !important;
}

/* Sembunyikan ikon panah */
[class*="block-navigation__submenu-icon"],
[class*="block-navigation-submenu__toggle"] {
    display: none !important;
}


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

body.has-scroll-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-scroll-reveal .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   INFINITE BRAND SHOWCASE TICKER
   ========================================================================== */

.brands-ticker-container {
    background: #ffffff;
    padding: 60px 24px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #f4f4f5;
}

.brands-ticker-title {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #a1a1aa;
    letter-spacing: 0.08em;
    margin: 0 0 32px 0;
    padding: 0;
}

.brands-marquee {
    overflow: hidden;
    display: flex;
    width: 100%;
    position: relative;
}

.marquee-track {
    display: flex;
    gap: 80px;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
}

.brand-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    white-space: nowrap;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: #d4d4d8;
    letter-spacing: -0.03em;
    transition: color 0.2s ease, transform 0.2s ease;
    cursor: default;
    user-select: none;
}

.brand-logo span {
    color: #a9b4bd;
}

.brand-logo b {
    color: #002139;
    font-weight: 800;
}

.brand-logo:hover {
    color: #09090b;
    transform: scale(1.05);
}

.brand-logo:hover b {
    color: #0a6d86;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Loops mathematically correct at half of width containing duplicates */
        transform: translateX(calc(-50% - 40px));
    }
}


/* ==========================================================================
   DEVELOPER APIs SECTION (ROYAL BLUE BIRD STYLE)
   ========================================================================== */

.developer-section-container {
    background: #1d4ed8; /* biru seperti sebelumnya; kanvas Vanta DOTS menimpa di atasnya */
    padding: 100px 24px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.developer-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* Kanvas Vanta untuk seksi developer: penuh di belakang konten, sudut mengikuti seksi. */
.pds-dev-vanta {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Cadangan saat WebGL/efek mati: kisi titik halus, bukan bidang polos. */
    background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.4px, transparent 1.5px);
    background-size: 26px 26px;
    animation: pds-dev-drift 22s linear infinite;
}
.pds-dev-vanta.is-live {
    background-image: none;
    animation: none;
}
@keyframes pds-dev-drift {
    from { background-position: 0 0; }
    to { background-position: 26px 26px; }
}
.pds-dev-vanta canvas {
    display: block;
}

/* Repeating Horizontal Stripes */
.dev-top-lines {
    z-index: 1;
    height: 12px;
    width: 100%;
    position: absolute;
    top: -48px;
    left: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12) 60px,
        transparent 60px,
        transparent 120px
    );
    opacity: 0.8;
}

.dev-category-label {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
    margin: 0 0 24px 0;
    padding: 0;
}

.dev-header-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 24px;
}

.dev-section-title {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
}

.dev-header-buttons {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

.btn-dev-white {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #002139;
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    border: 1px solid #ffffff;
}

.btn-dev-white:hover {
    background: #f4f4f5;
    transform: translateY(-1px);
}

.btn-dev-outline {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.btn-dev-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #ffffff;
    transform: translateY(-1px);
}

.dev-section-description {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    max-width: 850px;
    margin: 0 0 64px 0;
}

/* Kisi Fitur grid - Border layout */
.dev-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
}

.dev-feature-card {
    padding: 48px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Hover lambat: putih transparan meresap pelan, tidak berkedip. */
    transition: background-color 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.7s ease;
}

.dev-feature-card:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.42);
}

/* Icon box putih */
.dev-card-icon {
    background: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a6d86;
    margin-bottom: 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.dev-svg-icon {
    width: 24px;
    height: 24px;
}

.dev-card-title {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px 0;
    padding: 0;
}

.dev-card-text {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0 0 28px 0;
    flex-grow: 1;
}

.dev-card-link {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.dev-card-link:hover {
    color: #26ccf0;
}

.dev-card-link .arrow-right {
    transition: transform 0.2s ease;
}

.dev-card-link:hover .arrow-right {
    transform: translateX(4px);
}

/* Tekstur Terminal Garis Vertikal */
.dev-card-texture {
    background: rgba(255, 255, 255, 0.015);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-terminal-texture {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 240px;
    height: 120px;
    justify-content: space-between;
    align-items: center;
}

.texture-line {
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    display: inline-block;
}


/* ==========================================================================
   RESPONSIVE DESIGN (DEVELOPER SECTION)
   ========================================================================== */

@media (max-width: 991px) {
    .developer-section-container {
        padding: 80px 24px;
    }
    
    .dev-section-title {
        font-size: 34px;
    }
    
    .dev-header-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .dev-header-buttons {
        justify-content: flex-start;
    }
    
    .dev-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dev-card-texture {
        display: none; /* Sembunyikan tekstur dekoratif di tablet agar layout rapi */
    }
    
    .dev-feature-card {
        padding: 32px;
    }
}

@media (max-width: 767px) {
    .developer-section-container {
        padding: 60px 16px;
    }
    
    .dev-section-title {
        font-size: 28px;
    }
    
    .dev-header-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .btn-dev-white, .btn-dev-outline {
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    
    .dev-section-description {
        font-size: 16px;
        margin-bottom: 40px;
    }
    
    .dev-features-grid {
        grid-template-columns: 1fr;
        border-left: none;
    }
    
    .dev-feature-card {
        padding: 24px 0;
        border-right: none;
    }
}



/* ==========================================================================
   PRE-FOOTER CTA BANNER & MEGA FOOTER SYSTEM (BIRD.COM STYLE)
   ========================================================================== */

/* 1. Pre-Footer CTA Banner */
.pre-footer-cta-container {
    background: #ffffff;
    padding: 80px 24px 40px 24px;
    box-sizing: border-box;
}

.pre-footer-cta {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background-image: url('images/pre_footer_banner.png');
    background-size: cover;
    background-position: center;
    min-height: 480px; /* Taller box */
    max-width: 1200px; /* Box limit, no longer stretching */
    margin: 0 auto; /* Centered in page container */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligned left */
    padding: 80px 80px; /* Generous padding */
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 100%); /* Fades left to right for image visibility & high readability */
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: left; /* Rata kiri */
    max-width: 650px; /* Constrained width for excellent readability */
}

.cta-heading {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 54px; /* Larger font size */
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 32px 0;
    padding: 0;
    letter-spacing: -0.02em;
}

.cta-buttons {
    display: flex;
    justify-content: flex-start; /* Buttons rata kiri */
    gap: 20px;
}

.btn-cta-blue {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #2563eb; /* Royal blue exactly as in the screenshot */
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.btn-cta-blue:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.btn-cta-white {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #09090b;
    background: #ffffff;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.btn-cta-white:hover {
    background: #f4f4f5;
    transform: translateY(-1px);
}

/* 2. Mega Footer */
.site-footer {
    background: #ffffff;
    padding: 60px 24px 80px 24px;
    border-top: 1px solid #f4f4f5;
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.footer-grid-top {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.footer-grid-bottom {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding-top: 60px;
    border-top: 1px solid #f4f4f5;
    box-sizing: border-box;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column-title {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #71717a;
    letter-spacing: 0.05em;
    margin: 0 0 20px 0;
    padding: 0;
}

.footer-column-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-column-links li {
    padding: 0;
    margin: 0;
}

.footer-column-links a {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: #3f3f46;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-block;
}

.footer-column-links a:hover {
    color: #09090b;
}

/* Styling Khusus Overview di Footer */
.footer-column-links .overview a {
    color: #09090b;
    font-weight: 600;
}

/* Newsletter Column */
.footer-newsletter-column {
    grid-column: span 1;
}

.newsletter-text {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    color: #71717a;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-input {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #e4e4e7;
    background: #ffffff;
    color: #09090b;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.newsletter-input:focus {
    border-color: #09090b;
}

.btn-newsletter-signup {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    background: #000000;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: block;
    width: 100%;
}

.btn-newsletter-signup:hover {
    background: #27272a;
}

.footer-social-section {
    margin-top: 24px;
}

.social-title {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #a1a1aa;
    margin: 0 0 12px 0;
    padding: 0;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    color: #71717a;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.social-icons a:hover {
    color: #09090b;
}

/* 3. Bottom Bar */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f4f4f5;
    padding-top: 40px;
    margin-top: 60px;
    box-sizing: border-box;
}

.copyright-text {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #71717a;
    margin: 0;
}

.footer-subtext {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #71717a;
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE DESIGN (FOOTER)
   ========================================================================== */

@media (max-width: 991px) {
    .footer-grid-top {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding-bottom: 40px;
    }
    
    .footer-grid-bottom {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding-top: 40px;
    }
    
    .cta-heading {
        font-size: 38px;
    }
    
    .pre-footer-cta {
        min-height: 380px;
        padding: 60px 40px;
    }
}

@media (max-width: 767px) {
    .pre-footer-cta-container {
        padding: 40px 16px 20px 16px;
    }
    
    .pre-footer-cta {
        padding: 40px 24px;
        min-height: auto;
    }
    
    .cta-heading {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .btn-cta-blue, .btn-cta-white {
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    
    .site-footer {
        padding: 40px 16px 60px 16px;
    }
    
    .footer-grid-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .footer-grid-bottom {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .footer-newsletter-column {
        grid-column: span 2;
        margin-top: 16px;
    }
    
    .footer-bottom-bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        margin-top: 40px;
        padding-top: 24px;
    }
}


/* ==========================================================================
   Navigasi header PDS (pengganti blok Navigation)
   Link datar karena header memakai markup HTML sendiri; gap dan tipografi
   disetel di sini supaya menu EN dan ID tampil sama rapi.
   ========================================================================== */
.wsx-nav-inner {
    gap: 22px;
}

.wsx-nav-inner a {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #09090b;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.wsx-nav-inner a:hover {
    color: #26ccf0;
}

@media (max-width: 1080px) {
    .wsx-nav-inner {
        gap: 14px;
        padding-left: 72px;
    }

    .wsx-nav-inner a {
        font-size: 13.5px;
    }
}

/* ==========================================================================
   PDS MARKETING SYSTEM v2 — header/megamenu, hero, app grid, mockup window
   Layout mengikuti pola mekari.com: hero besar + grid produk + feature
   bergambar + USP + industri + FAQ + CTA penutup.
   ========================================================================== */

.pds-main { font-family: 'Geist', system-ui, sans-serif; color: #0b2537; }
.pds-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; box-sizing: border-box; }
.pds-main * , .pds-header *, .pds-mob__panel * { box-sizing: border-box; }

/* ---------- Seksi hasil seeder selebar halaman ----------
 * Layout constrained WordPress membatasi setiap anak langsung post-content ke
 * contentSize (1200px) lewat `.is-layout-constrained > :where(:not(.alignfull))`.
 * Seksi kita adalah anak langsung, jadi tanpa aturan ini latar seksi hanya tampil
 * sebagai pita 1200px di tengah sementara hero (cover alignfull) selebar layar.
 * Yang dibuat selebar layar hanya pembungkus seksi; teksnya tetap dibatasi .pds-wrap.
 */
.is-layout-constrained > .pds-main,
.is-layout-constrained > .pds-section,
.is-layout-constrained > .pds-subnav,
.is-layout-constrained > .pds-cta,
.is-layout-constrained > .brands-ticker-container,
.is-layout-constrained > .developer-section-container {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------- Ikon (mask, mewarisi currentColor) ---------- */
.pds-ico {
    display: inline-block; width: 20px; height: 20px; flex: none;
    background-color: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}

/* ---------- Tombol ---------- */
.pds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: 'Geist', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 15px; line-height: 1;
    padding: 15px 26px; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pds-btn--sm { padding: 11px 20px; font-size: 14px; }
.pds-btn--primary { background: #26ccf0; color: #002139; box-shadow: 0 10px 24px rgba(38, 204, 240, .28); }
.pds-btn--primary:hover { background: #13b8db; transform: translateY(-1px); }
.pds-btn--ghost { border-color: #c9d6de; color: #002139; background: #fff; }
.pds-btn--ghost:hover { border-color: #002139; }
.pds-btn--dark { background: #002139; color: #fff; }
.pds-btn--dark:hover { background: #063350; }
.pds-btn--onDark { border-color: rgba(255,255,255,.35); color: #fff; }
.pds-btn--onDark:hover { background: rgba(255,255,255,.1); }

/* ==========================================================================
   HEADER + MEGA MENU (dua panel: rail kategori, isi kategori, kartu promo)
   ========================================================================== */
/* Template part membungkus header dengan <div class="wsx-block-template-part">.
   Sticky harus dipasang di pembungkus itu: .pds-header di dalamnya tidak punya
   ruang gulir sendiri (tinggi pembungkus = tinggi header), jadi sticky-nya mati. */
.wp-site-blocks > .wsx-block-template-part:first-child {
    position: sticky; top: 0; z-index: 900;
}
.pds-header {
    position: relative;
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px);
    border-bottom: 1px solid #e8eef2;
}
.pds-header__inner { max-width: 1240px; margin-inline: auto; padding: 0 24px; height: 74px; display: flex; align-items: center; gap: 6px; }
.pds-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 14px; }
.pds-logo__mark { display: block; width: 38px; height: 38px; object-fit: contain; }
.pds-logo__text { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: 12px; line-height: 1.25; color: #002139; text-transform: uppercase; letter-spacing: .07em; }

.pds-nav { display: flex; align-items: center; }
.pds-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pds-mm__item { position: static; }
.pds-mm__trigger {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: transparent;
    cursor: pointer; border-radius: 10px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: #26343d;
    transition: background-color .15s ease, color .15s ease;
}
.pds-mm__trigger:hover, .pds-mm__item.is-open .pds-mm__trigger { background: #f2f7fa; color: #002139; }
.pds-mm__chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; transition: transform .2s ease; }
.pds-mm__item.is-open .pds-mm__chev { transform: rotate(180deg); }

.pds-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Pemilih bahasa: tombol [bendera][kode] + dropdown dua bahasa */
.pds-lang { position: relative; }
.pds-lang__btn {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 8px 0 9px;
    border: 1px solid #e2eaef; border-radius: 10px; background: #fff; cursor: pointer;
    font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 700; color: #22333d; letter-spacing: .02em;
}
.pds-lang__btn:hover,
.pds-lang.is-open .pds-lang__btn { background: #f4f9fc; border-color: #c9d6de; color: #002139; }
.pds-lang__flag { display: inline-flex; }
.pds-flag { display: block; width: 20px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(2, 33, 57, .12); }
.pds-lang__chev { width: 14px; height: 14px; color: #6d7f8a; transition: transform .18s ease; }
.pds-lang.is-open .pds-lang__chev { transform: rotate(180deg); }
.pds-lang__menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 215px; padding: 6px; z-index: 30;
    background: #fff; border: 1px solid #e8eef2; border-radius: 12px; box-shadow: 0 18px 40px rgba(2, 33, 57, .14);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.pds-lang.is-open .pds-lang__menu,
.pds-lang:hover .pds-lang__menu,
.pds-lang:focus-within .pds-lang__menu { opacity: 1; visibility: visible; transform: none; }
.pds-lang__opt {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 13.5px; font-weight: 600; color: #22333d; text-decoration: none;
}
.pds-lang__opt:hover { background: #f4f9fc; }
.pds-lang__opt[aria-selected="true"] { background: #eff8fc; color: #002139; }
.pds-lang__opt span { flex: 1; }
@media (max-width: 1080px) { .pds-lang__menu { right: 0; } }

/* Panel mega menu: lebar penuh, menempel di bawah header */
/* Panel selebar viewport (edge to edge) dengan isi tetap ber-container */
.pds-mm {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid #e8eef2; box-shadow: 0 30px 50px rgba(2, 33, 57, .14);
    opacity: 0; visibility: hidden; transform: translateY(-8px); z-index: 5;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pds-mm__item.is-open > .pds-mm { opacity: 1; visibility: visible; transform: none; }
.pds-mm__inner {
    max-width: 1240px; margin: 0 auto; display: flex; min-height: 330px;
}
.pds-mm__rail { flex: 0 0 272px; border-right: 1px solid #eef3f6; padding: 18px 14px 18px 0; display: flex; flex-direction: column; gap: 2px; }
.pds-mm__tab {
    display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 14px; border: 0; border-radius: 10px;
    background: transparent; cursor: pointer; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14.5px; font-weight: 700; color: #33454f;
    transition: background-color .14s ease, color .14s ease;
}
.pds-mm__tab em { font-style: normal; font-size: 12px; font-weight: 500; color: #7c8b95; }
.pds-mm__tab:hover { background: #eef7fa; }
.pds-mm__tab.is-active { background: #fff; color: #002139; box-shadow: inset 0 0 0 1px #e8eef2, 0 10px 22px rgba(2, 33, 57, .07); }
.pds-mm__tab.is-active em { color: #0a6d86; }

.pds-mm__panes { flex: 1; min-width: 0; padding: 22px 26px; }
.pds-mm__pane[hidden] { display: none; }
.pds-mm__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin: 0; padding: 0; list-style: none; }
.pds-mm__card { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 12px; border-radius: 12px; text-decoration: none; }
.pds-mm__card:hover { background: #f4f9fb; }
.pds-mm__ico {
    grid-row: span 2; width: 34px; height: 34px; background: #0f7f9c;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 21px; mask-size: 21px; transition: background-color .15s ease;
}
.pds-mm__card:hover .pds-mm__ico { background: #002139; }
.pds-mm__card b { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14.5px; font-weight: 700; color: #002139; }
.pds-mm__card span { font-size: 12.5px; line-height: 1.45; color: #5c6b76; }
.pds-mm__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef3f6; font-size: 13px; }
.pds-mm__foot a { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-weight: 700; color: #002139; text-decoration: none; }
.pds-mm__foot a:hover { color: #0a6d86; }
.pds-mm__foot span { color: #7c8b95; }

.pds-mm__promo {
    flex: 0 0 272px; margin: 18px 0 18px 18px; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px;
    text-decoration: none; color: #fff;
    background: radial-gradient(120% 120% at 100% 0%, #00304f 0%, #002139 62%);
}
.pds-mm__kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #26ccf0; }
.pds-mm__promo b { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.3; }
.pds-mm__promo p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.pds-mm__promo a { margin-top: auto; font-size: 13px; font-weight: 700; color: #26ccf0; text-decoration: none; }
.pds-mm__promo a:hover { text-decoration: underline; }

/* Overlay gelap di belakang panel, hanya muncul saat mega menu terbuka */
.pds-mm-overlay {
    position: fixed; left: 0; right: 0; top: 74px; bottom: 0; z-index: 800;
    background: rgba(2, 33, 57, .34);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.pds-header.is-mega-open .pds-mm-overlay { opacity: 1; visibility: visible; }
.pds-header.is-mega-open { border-bottom-color: transparent; }

/* Menu seluler */
.pds-mob { display: none; position: relative; }
.pds-mob > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid #dbe5eb; border-radius: 12px; display: grid; place-content: center; gap: 4px; padding: 0 12px; }
.pds-mob > summary::-webkit-details-marker { display: none; }
.pds-mob > summary span { display: block; width: 18px; height: 2px; background: #002139; border-radius: 2px; }
.pds-mob__panel {
    position: absolute; right: -12px; top: calc(100% + 12px); width: min(380px, calc(100vw - 32px)); max-height: 74vh; overflow-y: auto;
    background: #fff; border: 1px solid #e8eef2; border-radius: 16px; box-shadow: 0 30px 60px rgba(2, 33, 57, .16); padding: 8px 18px 18px;
    font-family: 'Geist', system-ui, sans-serif;
}
.pds-mob__group { border-bottom: 1px solid #eef3f6; }
.pds-mob__group > summary { list-style: none; cursor: pointer; padding: 14px 0; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 15.5px; color: #002139; display: flex; justify-content: space-between; }
.pds-mob__group > summary::-webkit-details-marker { display: none; }
.pds-mob__group > summary::after { content: "+"; color: #26ccf0; font-weight: 700; }
.pds-mob__group[open] > summary::after { content: "\2013"; }
.pds-mob__links { display: grid; gap: 2px; padding: 0 0 12px 10px; }
.pds-mob__links a { padding: 8px 0; font-size: 14px; color: #33454f; text-decoration: none; }
.pds-mob__links a:hover { color: #002139; text-decoration: underline; }

@media (max-width: 1080px) {
    .pds-nav { display: none; }
    .pds-mob { display: block; }
    .pds-header__cta { display: none; }
    .pds-mm { display: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* WordPress menyuntik `.wp-site-blocks > * { margin-block-start: 24px }` lewat global
   styles, sehingga muncul celah putih antara menu dan hero. Hero menempel ke menu. */
.wp-site-blocks > main { margin-block-start: 0; }

/* ==========================================================================
   Hero — latar hidup. Palet sama dengan bagian aplikasi (sian + indigo di atas
   dasar putih kebiruan, kisi 72px) supaya kedua seksinya terbaca satu keluarga.
   Gerak hanya lapisan latar: tiga cahaya blur yang menggeser lambat (22-30s)
   dan kisi yang bergeser satu sel per 40 detik. Semua berhenti saat
   prefers-reduced-motion: reduce, dan lapisan ini pointer-events: none.
   ========================================================================== */
.pds-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 46px 0 0;
    border-bottom: 0;
    background:
        radial-gradient(54% 46% at 10% 0%, rgba(38, 204, 240, .16), transparent 68%),
        radial-gradient(46% 40% at 90% 2%, rgba(79, 70, 229, .12), transparent 70%),
        linear-gradient(180deg, #f8fbfe 0%, #f4f9fc 56%, #ffffff 100%);
}

.pds-hero__live {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.pds-hero > .pds-wrap { position: relative; z-index: 1; }

/* Aurora: conic-gradient yang berputar penuh, memberi kesan cahaya mengalir. */
/* Blok tepat di bawah hero ikut satu seksi, jadi gradasinya menyambung */
.pds-hero__tail {
    position: relative;
    z-index: 1;
    padding: 60px 0 84px;
}

.pds-hero__tail .pds-section__head {
    margin-bottom: 30px;
}

/* Lapisan canvas Vanta menempel paling bawah; latar CSS tetap tampil bila WebGL mati */
.pds-hero__vanta {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pds-hero__signal {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}


.pds-hero__signal canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Saat animasi aliran aktif, kisi CSS disembunyikan agar tidak dobel garis */
.has-signal .pds-hero__mesh {
    opacity: 0;
}

.pds-hero__aurora {
    position: absolute;
    inset: -45% -12%;
    background: conic-gradient(from 0deg at 50% 50%,
        rgba(38, 204, 240, .22), rgba(79, 70, 229, .18), rgba(126, 227, 247, .10),
        rgba(38, 204, 240, .22));
    filter: blur(70px);
    opacity: .55;
    animation: pds-aurora 34s linear infinite;
}

.pds-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
    opacity: .72;
    will-change: transform;
}

.pds-hero__orb--a {
    width: 520px;
    height: 520px;
    left: -140px;
    top: -180px;
    background: radial-gradient(circle at 35% 35%, #7ee3f7, rgba(126, 227, 247, 0));
    animation: pds-orb-a 22s ease-in-out infinite alternate;
}

.pds-hero__orb--b {
    width: 460px;
    height: 460px;
    right: -120px;
    top: -110px;
    background: radial-gradient(circle at 42% 40%, #a5b4fc, rgba(165, 180, 252, 0));
    animation: pds-orb-b 27s ease-in-out infinite alternate;
}

.pds-hero__orb--c {
    width: 400px;
    height: 400px;
    left: 36%;
    bottom: -240px;
    background: radial-gradient(circle at 50% 50%, #bae6fd, rgba(186, 230, 253, 0));
    animation: pds-orb-c 31s ease-in-out infinite alternate;
}

/* Kisi yang bergeser tepat satu sel, sehingga geraknya tak terasa berulang. */
.pds-hero__mesh {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(2, 33, 57, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 33, 57, .05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(82% 74% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(82% 74% at 50% 0%, #000 0%, transparent 78%);
    animation: pds-grid-pan 40s linear infinite;
}

@keyframes pds-orb-a {
    to { transform: translate3d(96px, 62px, 0) scale(1.18); }
}

@keyframes pds-orb-b {
    to { transform: translate3d(-86px, 74px, 0) scale(1.14); }
}

@keyframes pds-orb-c {
    to { transform: translate3d(62px, -68px, 0) scale(1.20); }
}

@keyframes pds-aurora {
    to { transform: rotate(360deg); }
}

@keyframes pds-grid-pan {
    to { background-position: 72px 72px, 72px 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .pds-hero__orb,
    .pds-hero__mesh,
    .pds-hero__aurora { animation: none; }
}
.pds-hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pds-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px; background: #dff6fd; color: #0a6d86; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.pds-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #26ccf0; }
.pds-hero h1 { margin: 0 0 20px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: clamp(2.3rem, 4.1vw, 3.75rem); line-height: 1.06; letter-spacing: -.02em; font-weight: 800; color: #002139; }
.pds-hero h1 em { font-style: normal; color: #0f8fb0; }
.pds-lede { margin: 0 0 28px; font-size: 17px; line-height: 1.65; color: #4a5b66; max-width: 34em; }
.pds-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.pds-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: #5c6b76; }
.pds-hero__meta li { display: flex; align-items: center; gap: 7px; }
.pds-hero__meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #26ccf0; }

.pds-hero__media { position: relative; }
.pds-float { position: absolute; background: #fff; border: 1px solid #e8eef2; border-radius: 14px; box-shadow: 0 18px 40px rgba(2, 33, 57, .14); padding: 12px 14px; font-size: 12.5px; }
.pds-float--chat { left: -26px; bottom: 46px; width: 214px; }
.pds-float--sla { right: -14px; top: -22px; width: 178px; }

/* ---------- Mockup jendela aplikasi ---------- */
.pds-window { background: #fff; border: 1px solid #e2eaf0; border-radius: 16px; box-shadow: 0 30px 70px rgba(2, 33, 57, .16); overflow: hidden; }
.pds-window__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f7fafc; border-bottom: 1px solid #eef3f6; }
.pds-window__dot { width: 9px; height: 9px; border-radius: 50%; background: #d7e1e8; }
.pds-window__dot:nth-child(1) { background: #ffb3ae; }
.pds-window__dot:nth-child(2) { background: #ffe0a3; }
.pds-window__dot:nth-child(3) { background: #b9ecd3; }
.pds-window__url { margin-left: 10px; font-size: 11px; color: #8494a0; background: #fff; border: 1px solid #eef3f6; border-radius: 999px; padding: 3px 12px; }
.pds-window__body { display: flex; min-height: 320px; }

.pds-app-side { width: 52px; flex: none; background: #002139; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; }
.pds-app-side .pds-ico { color: rgba(255,255,255,.55); }
.pds-app-side .pds-ico.is-active { color: #26ccf0; }
.pds-app-main { flex: 1; padding: 16px; min-width: 0; background: #fbfdfe; }
.pds-app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pds-app-head b { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14px; color: #002139; }
.pds-app-head small { font-size: 11px; color: #8494a0; }
.pds-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
.pds-kpi { background: #fff; border: 1px solid #e9f0f4; border-radius: 10px; padding: 9px 10px; }
.pds-kpi span { display: block; font-size: 10px; color: #8494a0; margin-bottom: 3px; }
.pds-kpi b { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 15px; color: #002139; }
.pds-kpi em { font-style: normal; font-size: 10px; font-weight: 700; color: #0f9d63; }
.pds-kpi em.is-down { color: #d2452f; }

.pds-rows { display: flex; flex-direction: column; gap: 7px; }
.pds-row { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e9f0f4; border-radius: 10px; padding: 8px 10px; }
.pds-ava { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: #0f8fb0; }
.pds-ava--alt { background: #7a5af8; }
.pds-ava--alt2 { background: #f2994a; }
.pds-row__txt { min-width: 0; flex: 1; }
.pds-row__txt b { display: block; font-size: 11.5px; color: #22333d; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pds-row__txt small { display: block; font-size: 10px; color: #8494a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pds-pill { font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #e7f7fb; color: #0a6d86; white-space: nowrap; }
.pds-pill--warn { background: #fff3dd; color: #8a5a00; }
.pds-pill--ok { background: #e4f7ec; color: #12724a; }
.pds-pill--danger { background: #fdecea; color: #a32b1a; }
.pds-pill--dark { background: #002139; color: #fff; }

/* ==========================================================================
   TRUST / STATS
   ========================================================================== */
.pds-trust { padding: 46px 0 0; text-align: center; }
.pds-trust__label { margin: 0 0 14px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #7c8b95; font-weight: 700; }
.pds-trust__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pds-trust__chips span { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 13.5px; font-weight: 600; color: #33454f; background: #fff; border: 1px solid #e6eef3; border-radius: 999px; padding: 9px 18px; }
.pds-trust__chips span b { margin-left: 7px; font-weight: 800; color: #0a6d86; }

.pds-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 44px 0 0; padding: 0; list-style: none; }
.pds-stats li { background: #fff; border: 1px solid #e8eef2; border-radius: 16px; padding: 20px; text-align: left; }
.pds-stats b { display: block; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 30px; line-height: 1; color: #002139; margin-bottom: 6px; }
.pds-stats span { font-size: 13px; line-height: 1.45; color: #5c6b76; }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.pds-section { padding: 88px 0; }
.pds-section--soft { background: #f6fafc; border-block: 1px solid #eaf1f5; }
.pds-section--dark { background: #002139; color: #fff; }
.pds-section__head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.pds-section__head h2 { margin: 0 0 14px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; color: #002139; }
.pds-section--dark .pds-section__head h2 { color: #fff; }
.pds-section__head p { margin: 0; font-size: 16px; line-height: 1.65; color: #5c6b76; }
.pds-section--dark .pds-section__head p { color: rgba(255,255,255,.72); }
.pds-section__head--left { text-align: left; margin-inline: 0; }

/* ==========================================================================
   APP GRID
   ========================================================================== */
/* ==========================================================================
   Bagian Aplikasi — latar bertekstur lembut, kartu datar (tanpa emboss),
   warna identitas aplikasi dipakai untuk tint ikon, border, bayangan, dan label.
   Warna aplikasi diisi lewat --app pada <a class="pds-app">; lihat docs/ikon-aplikasi.md.
   ========================================================================== */
.pds-section--apps {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-block: 1px solid #e7eef3;
    background:
        radial-gradient(58% 52% at 10% 0%, rgba(38, 204, 240, .14), transparent 70%),
        radial-gradient(48% 46% at 88% 6%, rgba(79, 70, 229, .10), transparent 72%),
        linear-gradient(180deg, #f8fbfe 0%, #f3f8fb 100%);
}
/* Kisi halus yang memudar dari atas, memberi kesan bidang tanpa mengganggu teks. */
.pds-section--apps::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(2, 33, 57, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 33, 57, .05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(78% 62% at 50% 0%, #000 0%, transparent 76%);
    mask-image: radial-gradient(78% 62% at 50% 0%, #000 0%, transparent 76%);
}

.pds-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.pds-app {
    --app: #2563eb;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 20px;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, color-mix(in srgb, var(--app) 5%, #ffffff) 100%);
    border: 1px solid #e6edf2;
    box-shadow: 0 1px 2px rgba(2, 33, 57, .04);
    transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease,
        border-color .24s ease, background .24s ease, opacity .24s ease;
}

/* Garis warna aplikasi di bibir atas kartu, muncul saat disorot. */
.pds-app::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--app), transparent);
    opacity: 0;
    transition: opacity .24s ease;
}

.pds-app:hover,
.pds-app:focus-visible {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--app) 40%, #e6edf2);
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--app) 8%, #ffffff) 100%);
    box-shadow: 0 2px 4px rgba(2, 33, 57, .05),
        0 22px 44px -18px color-mix(in srgb, var(--app) 45%, rgba(2, 33, 57, .40));
}

.pds-app:hover::after,
.pds-app:focus-visible::after { opacity: 1; }

.pds-app:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--app) 55%, #ffffff);
    outline-offset: 2px;
}

/* Kartu yang tidak disorot meredup sedikit supaya fokus jatuh ke satu aplikasi. */
.pds-apps:hover .pds-app:not(:hover) { opacity: .6; }
.pds-apps:focus-within .pds-app:not(:focus-within) { opacity: .6; }

/* Lencana ikon datar: tint lembut warna aplikasi + glif berwarna aplikasi. */
.pds-app__ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--app);
    background: color-mix(in srgb, var(--app) 12%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--app) 24%, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
    transition: background .24s ease, border-color .24s ease, transform .24s ease;
}

.pds-app__ico svg { width: 23px; height: 23px; }

.pds-app:hover .pds-app__ico,
.pds-app:focus-visible .pds-app__ico {
    background: color-mix(in srgb, var(--app) 20%, #ffffff);
    border-color: color-mix(in srgb, var(--app) 34%, #ffffff);
    transform: translateY(-1px) scale(1.04);
}

.pds-app b {
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    font-size: 15.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #002139;
}

.pds-app small { font-size: 13px; line-height: 1.6; color: #5c6b76; }

.pds-app__more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    color: color-mix(in srgb, var(--app) 78%, #002139);
    transition: transform .24s ease;
}

.pds-app:hover .pds-app__more,
.pds-app:focus-visible .pds-app__more { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .pds-app,
    .pds-app::after,
    .pds-app__ico,
    .pds-app__more { transition: none; }
    .pds-app:hover,
    .pds-app:focus-visible,
    .pds-app:hover .pds-app__ico,
    .pds-app:hover .pds-app__more { transform: none; }
}

/* ==========================================================================
   FEATURE ROWS (teks + screenshot)
   ========================================================================== */
.pds-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 44px 0; }
.pds-feature + .pds-feature { border-top: 1px solid #e8eef2; }
.pds-feature--flip .pds-feature__media { order: 2; }
.pds-feature__copy h3 { margin: 6px 0 14px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: clamp(1.4rem, 2.1vw, 1.95rem); line-height: 1.2; color: #002139; }
.pds-feature__copy > p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.7; color: #4a5b66; }
.pds-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0a6d86; }
.pds-ticks { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pds-ticks li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.55; color: #33454f; }
.pds-ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: #dff6fd; }
.pds-ticks li::after { content: ""; position: absolute; left: 5px; top: 9px; width: 7px; height: 4px; border-left: 2px solid #0a6d86; border-bottom: 2px solid #0a6d86; transform: rotate(-45deg); }
.pds-feature__media { position: relative; }
.pds-textlink { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 14px; color: #0a6d86; text-decoration: none; }
.pds-textlink:hover { text-decoration: underline; }

/* Inbox mockup */
.pds-inbox { display: grid; grid-template-columns: 168px minmax(0,1fr); min-height: 300px; }
.pds-inbox__list { border-right: 1px solid #eef3f6; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pds-inbox__list .pds-row { padding: 7px 8px; }
.pds-inbox__chat { padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fbfdfe; }
.pds-bubble { max-width: 84%; padding: 8px 11px; border-radius: 12px; font-size: 11.5px; line-height: 1.45; }
.pds-bubble--in { background: #fff; border: 1px solid #e9f0f4; color: #33454f; border-bottom-left-radius: 4px; }
.pds-bubble--out { align-self: flex-end; background: #002139; color: #eaf7fb; border-bottom-right-radius: 4px; }
.pds-bubble--ai { align-self: flex-end; background: #e7f7fb; color: #0a5266; border: 1px solid #cdeef7; border-bottom-right-radius: 4px; }
.pds-chat-meta { font-size: 10px; color: #93a3ad; text-align: center; margin-top: auto; }

/* Ticket table mockup */
.pds-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pds-table th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #8494a0; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #eef3f6; }
.pds-table td { padding: 9px 10px; border-bottom: 1px solid #f2f7f9; color: #33454f; }
.pds-table tr:last-child td { border-bottom: 0; }

/* CRM card mockup */
.pds-crm { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fbfdfe; }
.pds-crm__top { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e9f0f4; border-radius: 12px; padding: 14px; }
.pds-crm__top .pds-ava { width: 40px; height: 40px; font-size: 14px; }
.pds-crm__top b { display: block; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14.5px; color: #002139; }
.pds-crm__top small { font-size: 11.5px; color: #8494a0; }
.pds-timeline { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid #e9f0f4; border-radius: 12px; padding: 14px 14px 6px; }
.pds-timeline__item { position: relative; padding: 0 0 14px 18px; font-size: 11.5px; color: #4a5b66; line-height: 1.5; }
.pds-timeline__item::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #26ccf0; }
.pds-timeline__item::after { content: ""; position: absolute; left: 3.5px; top: 15px; bottom: 0; width: 1px; background: #e6eef3; }
.pds-timeline__item:last-child::after { display: none; }
.pds-timeline__item b { color: #002139; font-weight: 600; }
.pds-timeline__item span { display: block; font-size: 10px; color: #93a3ad; }

/* ==========================================================================
   USP / INDUSTRY / FAQ / CTA
   ========================================================================== */
.pds-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.pds-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.pds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.pds-card { background: #fff; border: 1px solid #e8eef2; border-radius: 16px; padding: 24px; }
.pds-card .pds-ico { color: #0f8fb0; margin-bottom: 14px; width: 24px; height: 24px; }
.pds-card h3 { margin: 0 0 8px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 16px; color: #002139; }
.pds-card p { margin: 0; font-size: 13.5px; line-height: 1.6; color: #5c6b76; }
.pds-industry { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: #fff; border: 1px solid #e8eef2; border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .16s ease, transform .16s ease; }
.pds-industry:hover { border-color: #cfe6ef; transform: translateY(-2px); }
.pds-industry .pds-ico { color: #0a6d86; width: 22px; height: 22px; }
.pds-industry b { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14.5px; color: #002139; }

.pds-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.pds-faq details { background: #fff; border: 1px solid #e8eef2; border-radius: 14px; padding: 4px 20px; }
.pds-faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 15.5px; font-weight: 700; color: #002139; display: flex; justify-content: space-between; gap: 16px; }
.pds-faq summary::-webkit-details-marker { display: none; }
.pds-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: #26ccf0; }
.pds-faq details[open] summary::after { content: "–"; }
.pds-faq p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: #4a5b66; }

.pds-cta { background: radial-gradient(120% 140% at 0% 0%, #063a58 0%, #002139 55%); color: #fff; border-radius: 24px; padding: 56px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 40px; align-items: center; }
.pds-cta h2 { margin: 0 0 14px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: clamp(1.6rem, 2.5vw, 2.3rem); line-height: 1.15; }
.pds-cta p { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.74); }
.pds-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width: 1024px) {
    .pds-hero__grid, .pds-feature, .pds-cta { grid-template-columns: minmax(0, 1fr); }
    .pds-feature { gap: 32px; }
    .pds-feature--flip .pds-feature__media { order: 0; }
    .pds-cta { padding: 40px; }
    .pds-cta__actions { justify-content: flex-start; }
    .pds-apps, .pds-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pds-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pds-float { display: none; }
}
@media (max-width: 720px) {
    .pds-section { padding: 60px 0; }
    .pds-hero { padding-top: 40px; }
    .pds-apps, .pds-grid-4, .pds-grid-3, .pds-grid-2, .pds-stats { grid-template-columns: minmax(0,1fr); }
    .pds-inbox { grid-template-columns: minmax(0,1fr); }
    .pds-inbox__list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #eef3f6; }
    .pds-inbox__list .pds-row { min-width: 150px; }
    .pds-cta { padding: 30px; border-radius: 18px; }
    .pds-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ==========================================================================
   PDS MARKETING v3 — tiga mesin komunikasi (Channels, Voice, Workflow)
   ========================================================================== */

/* ---------- Kartu mesin ---------- */
.pds-engine-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.pds-engine {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    padding: 26px; background: #fff; border: 1px solid #e8eef2; border-radius: 20px;
    text-decoration: none; color: inherit; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pds-engine:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(2,33,57,.13); border-color: #cfe6ef; }
.pds-engine__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, #26ccf0 14%, #ffffff); border: 1px solid color-mix(in srgb, #26ccf0 28%, #ffffff); color: #0a6d86; }
.pds-engine__ico .pds-ico { width: 24px; height: 24px; }
.pds-engine h3 { margin: 4px 0 0; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 20px; color: #002139; }
.pds-engine > p { margin: 0; font-size: 14px; line-height: 1.6; color: #4a5b66; }
.pds-engine ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pds-engine li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.5; color: #33454f; }
.pds-engine li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #26ccf0; }
.pds-engine__more { margin-top: auto; padding-top: 10px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 700; color: #0a6d86; }
.pds-engine--lead { border-color: #b9e6f3; box-shadow: 0 18px 44px rgba(2,33,57,.10); }

/* ---------- Chip channel ---------- */
.pds-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.pds-chips li { display: inline-flex; align-items: center; gap: 7px; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 12.5px; font-weight: 600; color: #33454f; background: #fff; border: 1px solid #e6eef3; border-radius: 999px; padding: 7px 13px; }
.pds-chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, #26ccf0); }

/* ---------- Mockup panggilan (Voice) ---------- */
.pds-call { padding: 16px; background: #fbfdfe; display: flex; flex-direction: column; gap: 12px; }
.pds-call__card { background: radial-gradient(120% 120% at 100% 0%, #06395a 0%, #002139 65%); border-radius: 14px; padding: 18px; color: #fff; display: grid; gap: 14px; }
.pds-call__top { display: flex; align-items: center; gap: 12px; }
.pds-call__ava { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #26ccf0; color: #002139; font-weight: 800; font-size: 13px; }
.pds-call__who b { display: block; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14.5px; }
.pds-call__who small { font-size: 11px; color: rgba(255,255,255,.62); }
.pds-call__timer { margin-left: auto; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 14px; color: #26ccf0; }
.pds-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.pds-wave i { display: block; width: 3px; border-radius: 2px; background: #26ccf0; height: var(--h, 30%); opacity: .85; }
.pds-call__foot { display: flex; gap: 8px; flex-wrap: wrap; }
.pds-call__btn { font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; }
.pds-call__btn--end { background: #d2452f; }
.pds-transcript { background: #fff; border: 1px solid #e9f0f4; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.pds-transcript__head { display: flex; align-items: center; justify-content: space-between; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8494a0; font-weight: 700; }
.pds-line { display: flex; gap: 9px; font-size: 11.5px; line-height: 1.5; color: #33454f; }
.pds-line b { flex: none; width: 46px; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #0a6d86; padding-top: 2px; }
.pds-line--ai b { color: #7a5af8; }

/* ---------- Mockup alur (Workflow) ---------- */
.pds-flow { padding: 18px; background: radial-gradient(#dfeaf1 1px, transparent 1px) 0 0 / 16px 16px, #fbfdfe; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pds-node { width: 84%; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #dbe9f0; border-left: 3px solid #26ccf0; border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 16px rgba(2,33,57,.06); }
.pds-node b { font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 12.5px; color: #002139; }
.pds-node small { font-size: 10.5px; color: #8494a0; }
.pds-node__tag { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #0a6d86; white-space: nowrap; }
.pds-node--cond { border-left-color: #f2994a; }
.pds-node--cond .pds-node__tag { color: #a9621a; }
.pds-node--action { border-left-color: #0f9d63; }
.pds-node--action .pds-node__tag { color: #12724a; }
.pds-arrow { width: 2px; height: 14px; background: #c9dbe4; position: relative; }
.pds-arrow::after { content: ""; position: absolute; left: -3px; bottom: -1px; border: 4px solid transparent; border-top-color: #c9dbe4; }
.pds-flow__branch { display: flex; gap: 10px; width: 100%; justify-content: center; }
.pds-flow__branch .pds-node { width: 44%; }
.pds-flow__branch .pds-node small { display: block; }

/* ---------- Daftar kapabilitas ---------- */
.pds-cap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 26px; margin: 0 0 22px; padding: 0; list-style: none; }
.pds-cap li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px dashed #e4edf2; font-size: 13.5px; line-height: 1.55; color: #33454f; }
.pds-cap b { color: #002139; font-weight: 700; }

/* ---------- Pita gelap kecil di dalam fitur ---------- */
.pds-band { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 16px 20px; margin-top: 4px; border-radius: 14px; background: #002139; color: #fff; }
.pds-band span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.86); }
.pds-band .pds-ico { width: 16px; height: 16px; color: #26ccf0; }

@media (max-width: 1024px) {
    .pds-engine-grid { grid-template-columns: minmax(0,1fr); }
    .pds-cap { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 720px) {
    .pds-flow__branch { flex-direction: column; align-items: center; }
    .pds-flow__branch .pds-node { width: 100%; }
    .pds-node { width: 100%; }
    .pds-call { padding: 12px; }
}

/* ===== Sub-navigasi halaman & langkah implementasi ===== */
.pds-subnav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid #e8eef2; }
.pds-subnav__inner { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; scrollbar-width: none; }
.pds-subnav__inner::-webkit-scrollbar { display: none; }
.pds-subnav a { flex: 0 0 auto; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 13.5px; font-weight: 600; color: #5c6b76; text-decoration: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; }
.pds-subnav a:hover, .pds-subnav a:focus-visible { background: #eef7fb; color: #002139; }
.pds-steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; counter-reset: pdsstep; }
.pds-step { position: relative; background: #fff; border: 1px solid #e8eef2; border-radius: 16px; padding: 22px 18px 18px; }
.pds-step::before { counter-increment: pdsstep; content: counter(pdsstep); position: absolute; top: -12px; left: 18px; width: 28px; height: 28px; border-radius: 50%; background: #26ccf0; color: #002139; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pds-step b { display: block; font-family: 'Geist', system-ui, -apple-system, sans-serif; font-size: 14.5px; color: #002139; margin: 6px 0 6px; }
.pds-step p { margin: 0; font-size: 13px; line-height: 1.6; color: #5c6b76; }
.pds-feature, .pds-section { scroll-margin-top: 76px; }
@media (max-width: 1024px) { .pds-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .pds-steps { grid-template-columns: minmax(0,1fr); } }

/* ===== PDS motion: reveal, paralaks, header menempel ===== */
.pds-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.22, .7, .28, 1), transform .7s cubic-bezier(.22, .7, .28, 1);
    will-change: opacity, transform;
}

.pds-reveal.is-in {
    opacity: 1;
    transform: none;
}

.pds-header {
    transition: box-shadow .25s ease, background .25s ease;
}

.pds-header.is-stuck {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 12px 32px rgba(2, 33, 57, .09);
}

[data-parallax] {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .pds-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    [data-parallax] {
        transform: none !important;
    }
}