/********** Template CSS — Catur Manunggal (v2, modernized) **********/

:root {
    /* Color tokens */
    --navy-950: #081426;
    --navy-900: #0B1E3D;
    --navy-800: #122B52;
    --steel-700: #2C5F8A;
    --steel-500: #4C7DAA;
    --steel-300: #9FBBD6;
    --amber-500: #E8A33D;
    --amber-400: #F2B75A;
    --paper-50: #F4F6F9;
    --paper-100: #E9EEF4;
    --white: #FFFFFF;
    --ink-900: #10192B;
    --ink-600: #4B5A72;
    --line: rgba(11, 30, 61, 0.10);

    /* legacy aliases used by existing markup */
    --primary: var(--steel-700);
    --secondary: var(--navy-900);
    --light: var(--paper-50);
    --dark: var(--navy-950);

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
    font-family: var(--font-body);
    color: var(--ink-900);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .display-4, .display-3 {
    font-family: var(--font-display);
    color: var(--navy-900);
    letter-spacing: -0.01em;
}

.text-primary { color: var(--steel-700) !important; }
.bg-primary { background-color: var(--navy-900) !important; }
.btn-primary { background-color: var(--amber-500) !important; border-color: var(--amber-500) !important; color: var(--navy-950) !important; }
.btn-primary:hover { background-color: var(--amber-400) !important; border-color: var(--amber-400) !important; }

/* utility mono for document codes / stats */
.mono-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-700);
    background: var(--paper-100);
    border: 1px solid var(--line);
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    display: inline-block;
}

/********** Buttons / basics (kept from base template) **********/
.btn { font-weight: 700; transition: .35s ease; }
.btn:hover { box-shadow: 0 10px 20px -8px rgba(11,30,61,0.35); transform: translateY(-2px); }
.btn-square { width: 36px; height: 36px; }
.btn-sm-square { width: 28px; height: 28px; }
.btn-lg-square { width: 46px; height: 46px; }
.btn-square, .btn-sm-square, .btn-lg-square { padding-left: 0; padding-right: 0; text-align: center; }

.back-to-top {
    position: fixed; display: none; right: 24px; bottom: 24px;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--navy-900); color: var(--white);
    align-items: center; justify-content: center;
    box-shadow: 0 8px 24px -6px rgba(11,30,61,0.5);
    z-index: 99;
}
/* ===========================
   NAVBAR CUSTOM
=========================== */

.navbar-custom{
    background:#fff;
    border-bottom:1px solid rgba(11,30,61,.08);
    position:relative;
    z-index:999;
}

.navbar-custom::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--amber-500),var(--steel-700));
}

.navbar-custom .navbar-brand h2{
    font-family:var(--font-display);
    color:var(--navy-900);
    font-weight:700;
}

.navbar-custom .navbar-brand h2 span{
    color:var(--steel-700);
}

.navbar-custom .brand-mark{
    width:45px;
    height:45px;
    border-radius:10px;
    background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* ===========================
   MENU
=========================== */

.navbar-custom .navbar-nav .nav-link{
    font-family:var(--font-display);
    position:relative;
    margin-left:30px;
    padding:30px 0;
    font-size:16px;
    font-weight:600;
    color:var(--navy-900);
    outline:none;
    border:none;
    background:none;
    transition:.35s;
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link.active{
    color:var(--steel-700);
}

.navbar-custom .navbar-nav .nav-link:focus,
.navbar-custom .navbar-nav .nav-link:focus-visible{
    outline:none;
    box-shadow:none;
}

/* Garis bawah */

@media (min-width:992px){

    .navbar-custom .navbar-nav .nav-link::before{
        position:absolute;
        content:"";
        width:0;
        height:3px;
        bottom:22px;
        left:50%;
        background:var(--amber-500);
        border-radius:50px;
        transition:.35s;
    }

    .navbar-custom .navbar-nav .nav-link:hover::before,
    .navbar-custom .navbar-nav .nav-link.active::before{
        width:100%;
        left:0;
    }

}

/* ===========================
   DROPDOWN
=========================== */

.navbar-custom .dropdown-menu{
    border:none;
    border-top:3px solid var(--steel-700);
    border-radius:12px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.navbar-custom .dropdown-item{
    font-weight:500;
    transition:.3s;
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item.active{
    color:var(--steel-700);
    background:rgba(44,95,138,.08);
    padding-left:25px;
}

/* ===========================
   BUTTON CTA
=========================== */

.nav-btn-contact{
    background:var(--amber-500)!important;
    color:var(--navy-950)!important;
    border-radius:50px!important;
    padding:12px 26px!important;
    margin-left:25px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(232,163,61,.35);
    transition:.3s;
}

.nav-btn-contact:hover{
    background:var(--amber-400)!important;
    color:var(--navy-950)!important;
    transform:translateY(-2px);
}

.nav-btn-contact.active{
    background:var(--navy-900)!important;
    color:#fff!important;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:991.98px){

    .navbar-custom .navbar-nav{
        margin-top:20px;
    }

    .navbar-custom .navbar-nav .nav-link{
        margin-left:0;
        padding:12px 0;
    }

    .nav-btn-contact{
        margin:15px 0 0;
        display:block;
        text-align:center;
    }

}

.nav-btn-contact::before,
.nav-btn-contact:hover::before,
.nav-btn-contact.active::before{
    display:none !important;
}
/* ====== RESPONSIVE / LAYOUT FIXES (kept, extended) ====== */

/* Hero */
.hero-header {
    position: relative;
    min-height: 62vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--navy-950);
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 768px) { .hero-header { min-height: 82vh; } }

.hero-header .blueprint-grid {
    position: absolute; inset: 0; z-index: 0; opacity: 0.35;
    background-image:
        linear-gradient(rgba(159,187,214,0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(159,187,214,0.14) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 40%, black 10%, transparent 75%);
}

.hero-header .hero-glow {
    position: absolute; z-index: 0; right: -10%; top: -20%;
    width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
    background: radial-gradient(circle, rgba(44,95,138,0.55) 0%, rgba(44,95,138,0) 70%);
    filter: blur(10px);
}

.hero-header .container { position: relative; z-index: 1; }

.hero-header h1 { font-size: 1.9rem; line-height: 1.2; color: var(--white); }
@media (min-width: 576px) { .hero-header h1 { font-size: 2.7rem; } }
@media (min-width: 992px) { .hero-header h1 { font-size: 3.5rem; } }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-400);
    margin-bottom: 1rem;
}
.hero-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-400); box-shadow: 0 0 0 4px rgba(232,163,61,0.2); }

.hero-header .fs-4 { font-size: 1.05rem !important; color: var(--steel-300); }
@media (min-width: 768px) { .hero-header .fs-4 { font-size: 1.25rem !important; } }

.hero-cta { flex-wrap: wrap; gap: 0.75rem; }
.hero-cta .btn { width: 100%; margin: 0 !important; }
@media (min-width: 576px) { .hero-cta .btn { width: auto; } }

.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.25rem; }
.hero-badges .mono-tag { background: rgba(255,255,255,0.06); border-color: rgba(159,187,214,0.3); color: var(--steel-300); }

/* Feature / info boxes */
.info-box {
    border-radius: 1rem;
    min-height: 140px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 0.75rem; text-align: center;
    background: var(--paper-50);
    border: 1px solid var(--line);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.info-box:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(11,30,61,0.35); border-color: var(--steel-300); }
.info-box i { color: var(--steel-700); }

/* Tilt frame for about image */
.tilt-frame { perspective: 1200px; }
.tilt-frame .tilt-inner {
    transform-style: preserve-3d;
    transition: transform .2s ease-out;
    will-change: transform;
    border-radius: 1rem;
    box-shadow: 0 30px 60px -30px rgba(11,30,61,0.45);
}
.floating-spec {
    position: absolute; left: -1.25rem; bottom: -1.25rem;
    background: var(--white); border-radius: 0.75rem; padding: 1rem 1.25rem;
    box-shadow: 0 20px 40px -18px rgba(11,30,61,0.4);
    border: 1px solid var(--line);
    z-index: 2;
}
.floating-spec .num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--navy-900); line-height: 1; }
.floating-spec .label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }

/* Service cards — 3D tilt */
.service-item {
    position: relative;
    min-height: 260px;
    padding: 2.25rem 1.75rem;
    border-radius: 1rem;
    background: var(--paper-50);
    border: 1px solid var(--line);
    transform-style: preserve-3d;
    transition: transform .18s ease-out, box-shadow .3s ease, border-color .3s ease;
    will-change: transform;
}
.service-item:hover { box-shadow: 0 26px 50px -24px rgba(11,30,61,0.4); border-color: var(--steel-300); }
@media (max-width: 575.98px) { .service-item { min-height: auto; padding: 2rem 1.25rem; } }

.service-item .svc-code {
    position: absolute; top: 1.25rem; right: 1.5rem;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
    color: var(--steel-500); letter-spacing: .06em;
}

.service-icon {
    width: 58px; height: 58px; min-width: 58px; border-radius: 14px;
    background: linear-gradient(145deg, var(--steel-700), var(--navy-900));
    display: flex; align-items: center; justify-content: center;
    transform: translateZ(30px);
    box-shadow: 0 12px 20px -10px rgba(11,30,61,0.5);
}

/* Contact */
.contact-panel {
    position: relative;
    background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--steel-700) 140%);
    overflow: hidden;
}
.contact-panel .blueprint-grid {
    position: absolute; inset: 0; opacity: 0.18;
    background-image: linear-gradient(rgba(159,187,214,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(159,187,214,0.25) 1px, transparent 1px);
    background-size: 40px 40px;
}
.contact-info h5 { font-size: 1rem; word-break: break-word; color: var(--white); }
@media (min-width: 768px) { .contact-info h5 { font-size: 1.1rem; } }
.contact-info i { color: var(--amber-400); }

.hours-card {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.97);
    border-radius: 1rem;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55);
}

/* Signature element — verified-partnership seal */
.seal {
    width: 96px; height: 96px; margin: 0 auto 1.25rem;
    position: relative;
}
.seal svg { width: 100%; height: 100%; animation: seal-spin 26s linear infinite; }
@keyframes seal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.seal .seal-check {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: var(--amber-500);
}

/* SOP / Workflow timeline */
.sop-track { position: relative; }
.sop-track::before {
    content: ""; position: absolute; top: 46px; left: 0; right: 0; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
    display: none;
}
@media (min-width: 992px) { .sop-track::before { display: block; } }

.sop-step { position: relative; z-index: 1; }
.sop-step .sop-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--white); border: 2px solid var(--steel-300);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; color: var(--steel-700);
    box-shadow: 0 10px 24px -14px rgba(11,30,61,0.4);
}
.sop-step .sop-index { font-family: var(--font-mono); font-size: 0.72rem; color: var(--steel-500); letter-spacing: .08em; }

/* Testimonial */
.testimonial-item { padding: 1rem; }
.testimonial-item img { width: 90px; height: 90px; object-fit: cover; border: 3px solid var(--paper-100); }
.testimonial-item .fs-4 { font-size: 1.1rem !important; color: var(--ink-900); }
@media (min-width: 768px) { .testimonial-item .fs-4 { font-size: 1.3rem !important; } }

/* Partnership cards — 3D tilt */
.partner-card {
    position: relative;
    border-radius: 1rem;
    transform-style: preserve-3d;
    transition: transform .18s ease-out, box-shadow .3s ease;
    will-change: transform;
    background: var(--white);
    border-top: 3px solid var(--amber-500) !important;
}
.partner-card:hover { box-shadow: 0 26px 50px -24px rgba(11,30,61,0.35); }
.partner-card img { height: 70px; object-fit: contain; transform: translateZ(24px); }
@media (min-width: 768px) { .partner-card img { height: 90px; } }

/* Gallery */
.gallery-card { overflow: hidden; border-radius: 1rem; border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease; }
.gallery-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(11,30,61,0.3); }
.gallery-card .img-wrap { overflow: hidden; }
.gallery-card img { transition: transform .5s ease; }
.gallery-card:hover img { transform: scale(1.06); }

@media (max-width: 575.98px) {
    .display-4 { font-size: 1.9rem; }
    .display-3 { font-size: 2.1rem; }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/********** carousels (kept, restyled) **********/
.price-carousel { padding: 0 45px 45px 45px; }
.price-carousel .owl-nav { margin-top: 35px; width: 100%; text-align: center; display: flex; justify-content: center; }
.price-carousel .owl-nav .owl-prev, .price-carousel .owl-nav .owl-next {
    position: relative; margin: 0 5px; width: 45px; height: 45px;
    display: flex; align-items: center; justify-content: center;
    color: var(--steel-700); background: var(--white); font-size: 20px; border-radius: 45px;
    box-shadow: 0 8px 20px -10px rgba(11,30,61,0.3);
    transition: .35s;
}
.price-carousel .owl-nav .owl-prev:hover, .price-carousel .owl-nav .owl-next:hover { color: var(--white); background: var(--navy-900); }

.testimonial-carousel .owl-dots { margin-top: 15px; display: flex; align-items: center; justify-content: center; }
.testimonial-carousel .owl-dot { position: relative; display: inline-block; margin: 0 5px; width: 12px; height: 12px; background: var(--paper-100); border: 2px solid var(--steel-300); border-radius: 20px; transition: .35s; }
.testimonial-carousel .owl-dot.active { width: 28px; background: var(--amber-500); border-color: var(--amber-500); }
.testimonial-carousel .owl-item img { width: 90px; height: 90px; }

/********** Font Awesome (cdnjs) — font-display override **********
    Lighthouse flags Font Awesome's webfonts (loaded from cdnjs) for
    missing font-display, causing invisible-icon flashes while the
    font downloads. cdnjs' own stylesheet does not set font-display,
    so we redeclare the same @font-face rules here with swap.

    IMPORTANT: this block must be loaded AFTER the Font Awesome
    <link> tag (e.g. this style.css should be enqueued after the FA
    CDN link in your layout) so these rules take precedence.

    Also verify the version number in the src URLs below matches the
    Font Awesome version your layout actually links to (check the
    cdnjs URL in your <link> tag), and confirm whether you're on
    Font Awesome 5 ("Font Awesome 5 Free" / "Font Awesome 5 Brands")
    or Font Awesome 6 ("Font Awesome 6 Free" / "Font Awesome 6 Brands") —
    adjust the font-family names accordingly if you're on v6.
********************************************************************/
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.woff2") format("woff2");
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-brands-400.woff2") format("woff2");
}