/* ═════════════════════════════════════════════════════════════════════════════
   MAIN STYLESHEET - 127 Tangguh
   Used by: index, contact, services, insights, insight-detail
   ════════════════════════════════════════════════════════════════════════════ */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ══ Navbar ══ */

#navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#navbar.scrolled {
    background-color: #ffffff;
    box-shadow: 0 1px 28px rgba(11, 31, 59, 0.09);
}

#navbar.scrolled .nav-link {
    color: #374151;
}

#navbar.scrolled .logo-text {
    color: #0B1F3B;
}

#navbar.scrolled .logo-sub {
    color: #6b7280;
}

#navbar.scrolled .ham-line {
    background-color: #0B1F3B;
}

#navbar.scrolled .nav-cta {
    background-color: #1F4FFF !important;
}

.nav-link {
    position: relative;
    transition: color 0.2s;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1F4FFF;
    transition: width 0.25s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active::after {
    width: 100%;
}


/* ══ Mobile menu ══ */

#mobile-menu {
    display: none;
}

#mobile-menu.open {
    display: block;
}


/* ══ Scroll reveal ══ */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.d1 {
    transition-delay: 0.10s;
}

.d2 {
    transition-delay: 0.20s;
}

.d3 {
    transition-delay: 0.30s;
}

.d4 {
    transition-delay: 0.40s;
}

.d5 {
    transition-delay: 0.50s;
}


/* ══ Buttons ══ */

.btn-prim {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-prim:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(31, 79, 255, 0.38);
}

.btn-ghost {
    transition: background 0.2s;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* ══ Cards ══ */

.card-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 60px rgba(11, 31, 59, 0.10);
}


/* solution card */

.sol-card {
    border: 1px solid #e5e7eb;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.sol-card:hover {
    transform: translateY(-4px);
    border-color: #3B82F6;
    box-shadow: 0 18px 48px rgba(59, 130, 246, 0.10);
}

.sol-icon {
    transition: background-color 0.25s;
}

.sol-card:hover .sol-icon {
    background-color: #1F4FFF;
}

.sol-card:hover .sol-icon svg {
    color: #ffffff;
}

.sol-icon svg {
    transition: color 0.25s;
}

.sol-arrow {
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
}

.sol-card:hover .sol-arrow {
    opacity: 1;
    transform: translateX(3px);
}


/* tech card */

.tech-card {
    border: 1px solid #e5e7eb;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.tech-card:hover {
    border-color: #1F4FFF;
    box-shadow: 0 12px 40px rgba(31, 79, 255, 0.07);
}


/* insight card */

.ins-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ins-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(11, 31, 59, 0.12);
}

.ins-card:hover .ins-title {
    color: #1F4FFF;
}

.ins-title {
    transition: color 0.2s;
}


/* ══ Section badge ══ */

.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3B82F6;
    padding: 0.25rem 0.8rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 999px;
}


/* ══ Gradient text ══ */

.grad-text {
    background: linear-gradient(135deg, #3B82F6 0%, #1F4FFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ══ Hero ══ */

.hero-bg {
    background: linear-gradient(135deg, #071629 0%, #0B1F3B 55%, #071629 100%);
}


/* ══ Float animation ══ */

@keyframes float-slow {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

.float-anim {
    animation: float-slow 7s ease-in-out infinite;
}


/* ══ SVG node pulse ══ */

@keyframes npulse {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

.np0 {
    animation: npulse 3.0s ease-in-out infinite;
}

.np1 {
    animation: npulse 3.5s ease-in-out 0.4s infinite;
}

.np2 {
    animation: npulse 4.0s ease-in-out 0.9s infinite;
}

.np3 {
    animation: npulse 3.2s ease-in-out 1.3s infinite;
}

.np4 {
    animation: npulse 3.8s ease-in-out 0.6s infinite;
}

.np5 {
    animation: npulse 3.3s ease-in-out 1.0s infinite;
}


/* ══ CTA section ══ */

.cta-bg {
    background: linear-gradient(135deg, #071629 0%, #0B1F3B 50%, #071629 100%);
    position: relative;
    overflow: hidden;
}

.cta-bg::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(31, 79, 255, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

.cta-bg::after {
    content: '';
    position: absolute;
    bottom: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
    pointer-events: none;
}


/* ══ Footer link ══ */

.flink {
    transition: color 0.2s;
}

.flink:hover {
    color: #3B82F6;
}


/* ══ Scrollbar ══ */

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1F4FFF;
    border-radius: 3px;
}


/* ══ Service Card (services.html) ══ */

.svc-card {
    border: 1px solid #e5e7eb;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.svc-card:hover {
    transform: translateY(-4px);
    border-color: #3B82F6;
    box-shadow: 0 18px 48px rgba(59, 130, 246, 0.10);
}

.svc-icon {
    transition: background-color 0.25s;
}

.svc-card:hover .svc-icon {
    background-color: #1F4FFF;
}

.svc-card:hover .svc-icon svg {
    color: #ffffff;
}

.svc-icon svg {
    transition: color 0.25s;
}


/* detail card */

.detail-card {
    border: 1px solid #e5e7eb;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.detail-card:hover {
    border-color: #1F4FFF;
    box-shadow: 0 12px 40px rgba(31, 79, 255, 0.07);
}


/* process step */

.step-line {
    position: absolute;
    top: 24px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 1px;
    background: linear-gradient(90deg, #e5e7eb 0%, transparent 100%);
}


/* ══ Tab active indicator ══ */

.tab-btn {
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: #1F4FFF;
    border-bottom-color: #1F4FFF;
}


/* ══ Service Panel ══ */

.svc-panel {
    display: none;
}

.svc-panel.active {
    display: block;
}


/* ══ Form Inputs (contact.html) ══ */

.form-input {
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.form-input:focus {
    border-color: #1F4FFF;
    box-shadow: 0 0 0 3px rgba(31, 79, 255, 0.10);
}

.form-input::placeholder {
    color: #9ca3af;
}


/* ══ FAQ ══ */

.faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer {
    max-height: 300px;
}

.faq-item .faq-icon {
    transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}


/* ══ Success Message ══ */

#form-success {
    display: none;
}


/* ══ Map Placeholder ══ */

.map-bg {
    background: linear-gradient(135deg, #0d2244 0%, #0B1F3B 60%, #0d2a50 100%);
}


/* ══ Contact Info Card ══ */

.info-card {
    border: 1px solid #e5e7eb;
    transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.info-card:hover {
    border-color: #3B82F6;
    box-shadow: 0 16px 48px rgba(31, 79, 255, 0.08);
    transform: translateY(-3px);
}


/* ══ Insight Cards (insights.html) ══ */

.ins-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ins-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(11, 31, 59, 0.12);
}

.ins-card:hover .ins-title {
    color: #1F4FFF;
}

.ins-title {
    transition: color 0.2s;
}


/* ══ Featured Card ══ */

.feat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(11, 31, 59, 0.12);
}

.feat-card:hover .ins-title {
    color: #1F4FFF;
}


/* ══ Category Filter Tabs ══ */

.cat-tab {
    transition: color 0.2s, background 0.2s;
    color: #6B7280;
    border-bottom: 2px solid transparent;
}

.cat-tab:hover {
    color: #1F4FFF;
}

.cat-tab.active {
    color: #1F4FFF;
    border-bottom-color: #1F4FFF;
}


/* ══ Pagination ══ */

.page-btn {
    transition: all 0.2s ease;
}

.page-btn:hover:not(.active):not(:disabled) {
    background: #F3F4F6;
    color: #1F4FFF;
}

.page-btn.active {
    background: #1F4FFF;
    color: #ffffff;
}

.fl-wrapper {
    z-index: 999!important;
}