:root {
    --orange: #ff4b00;
    --orange-2: #ff7600;
    --blue: #1757ff;
    --blue-2: #0038d6;
    --yellow: #ffc400;
    --black: #101216;
    --ink: #171a21;
    --muted: #5d6472;
    --line: #e8eaf0;
    --surface: #f5f7fb;
    --white: #ffffff;
    --shadow: 0 20px 60px rgba(25, 38, 75, 0.12);
    --radius: 24px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 82% 18%, rgba(23, 87, 255, 0.08), transparent 28rem),
        radial-gradient(circle at 10% 12%, rgba(255, 75, 0, 0.08), transparent 24rem),
        #ffffff;
    font-family: Inter, Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

body,
button,
a {
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(1480px, calc(100% - 48px));
    margin-inline: auto;
}

/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(16, 18, 22, 0.08);
    box-shadow: 0 10px 30px rgba(16, 18, 22, 0.06);
    backdrop-filter: blur(18px);
}

.nav-wrap {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 34px;
}

.brand-logo {
    min-width: 190px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 0.76;
    transform: skew(-8deg);
}

.brand-main {
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 48px;
    letter-spacing: 1px;
    color: var(--black);
}

.brand-sub {
    margin-top: 10px;
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: 18px;
    letter-spacing: 1.8px;
    color: var(--orange);
}

.main-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2vw, 38px);
}

.main-nav a {
    position: relative;
    padding: 35px 0 31px;
    color: #16181d;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.main-nav a::after {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 0;
    height: 3px;
    border-radius: 999px;
    content: "";
    background: linear-gradient(90deg, var(--orange), var(--blue));
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.btn {
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 900;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-contact {
    margin-left: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--orange), #ff2b00);
    box-shadow: 0 12px 26px rgba(255, 75, 0, 0.28);
}

.btn-icon {
    font-size: 21px;
}

.nav-toggle {
    display: none;
    margin-left: auto;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    width: 28px;
    height: 3px;
    margin: 5px 0;
    display: block;
    border-radius: 999px;
    background: var(--black);
    transition: 0.2s ease;
}

/* =========================================================
   HERO
   Sudah diperbaiki agar tidak ada sela kosong tinggi.
========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    padding: 28px 0 12px;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.95) 40%,
            rgba(239, 245, 255, 0.95) 100%
        );
}

.hero::before {
    position: absolute;
    inset: auto -10% -72% 38%;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    content: "";
    background:
        conic-gradient(
            from 180deg,
            rgba(255, 75, 0, 0.16),
            rgba(255, 196, 0, 0.1),
            rgba(23, 87, 255, 0.18),
            rgba(255, 75, 0, 0.16)
        );
    filter: blur(60px);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 2;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(560px, 1.25fr);
    align-items: center;
    gap: 24px;
}

.hero-copy {
    position: relative;
    z-index: 3;
    padding: 18px 0 22px;
}

.eyebrow {
    width: fit-content;
    margin-bottom: 18px;
    padding: 9px 16px;
    border: 1px solid #dfe3ec;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #242834;
    background: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.4px;
    box-shadow: 0 10px 30px rgba(31, 44, 77, 0.06);
}

.eyebrow span {
    color: var(--yellow);
}

.hero h1 {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(64px, 6.4vw, 102px);
    line-height: 0.86;
    letter-spacing: -1.5px;
    transform: skew(-5deg);
}

.hero h1 .orange {
    color: var(--orange);
}

.hero h1 .blue {
    color: var(--blue);
}

.hero-copy > p {
    max-width: 660px;
    margin: 24px 0;
    color: #3b414d;
    font-size: clamp(17px, 1.25vw, 21px);
}

.hero-copy strong {
    color: var(--orange);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn-primary {
    min-width: 190px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--orange), #ff2800);
    box-shadow: 0 15px 32px rgba(255, 75, 0, 0.24);
}

.btn-outline {
    min-width: 240px;
    color: var(--blue);
    border: 2px solid var(--blue);
    background: rgba(255, 255, 255, 0.86);
}

.chat-badge {
    font-size: 23px;
    line-height: 1;
}

.social-proof {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatar-stack {
    display: flex;
}

.avatar-stack span {
    width: 38px;
    height: 38px;
    margin-left: -8px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--orange));
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 7px 15px rgba(31, 44, 77, 0.18);
}

.avatar-stack span:first-child {
    margin-left: 0;
}

.proof-number {
    padding: 8px 11px;
    border-radius: 999px;
    color: #111318;
    background: var(--yellow);
    font-weight: 950;
}

.social-proof p {
    margin: 0;
    color: #59606e;
    font-size: 13px;
}

.social-proof p strong {
    color: var(--ink);
}

/* Gambar hero gabungan */
.hero-showcase.hero-main-image {
    position: relative;
    min-height: 0;
    height: auto;
    margin: 0 -72px 0 0;
    overflow: visible;
    display: flex;
    align-items: center;
    align-self: center;
    filter: drop-shadow(0 24px 32px rgba(23, 37, 76, 0.18));
}

.hero-showcase.hero-main-image img {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 4px;
}

/* =========================================================
   SERVICE CARDS
   Logo/ikon tetap dipertahankan. Hanya susunan kartu yang diubah
   agar menyerupai konsep awal.
========================================================= */

.services {
    position: relative;
    z-index: 5;
    margin-top: 0;
    padding: 10px 0 30px;
}

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

.service-card {
    position: relative;
    min-width: 0;
    min-height: 270px;
    border: 1px solid #e2e6ef;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 43% 57%;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(25, 38, 75, 0.13);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(25, 38, 75, 0.18);
}

.service-image {
    position: relative;
    min-width: 0;
    min-height: 270px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.95), transparent 55%),
        linear-gradient(180deg, #f9fafc, #eff2f8);
}

.service-image img {
    width: 100%;
    height: 100%;
    min-height: 270px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.service-icon {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    width: 56px;
    height: 56px;
    border: 4px solid #ffffff;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(16, 18, 22, 0.22);
}

.orange-card .service-icon {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
}

.blue-card .service-icon {
    background: linear-gradient(135deg, var(--blue), #0085ff);
}

.black-card .service-icon {
    background: linear-gradient(135deg, #292d35, #050505);
}

.phone-icon {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
}

.service-content {
    min-width: 0;
    padding: 22px 20px 18px;
    display: flex;
    flex-direction: column;
}

.service-heading {
    margin-bottom: 14px;
}

.service-heading h2 {
    margin: 0;
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(25px, 1.75vw, 34px);
    line-height: 0.95;
    letter-spacing: 0.2px;
    transform: skew(-4deg);
}

.orange-card h2 span {
    color: var(--orange);
}

.blue-card h2 span {
    color: var(--blue);
}

.black-card h2 span {
    color: #111318;
}

.service-heading p {
    margin: 8px 0 0;
    color: #20242c;
    font-size: 14px;
    font-weight: 800;
}

.service-content ul {
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
}

.service-content li {
    position: relative;
    padding-left: 23px;
    color: #343a46;
    font-size: 13px;
    line-height: 1.35;
}

.service-content li::before {
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    content: "✓";
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.orange-card li::before {
    background: var(--orange);
}

.blue-card li::before {
    background: var(--blue);
}

.black-card li::before {
    background: var(--black);
}

.card-button {
    width: 100%;
    min-height: 46px;
    margin-top: auto;
    padding: 0 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(18, 25, 45, 0.14);
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.card-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.orange-button {
    background: linear-gradient(135deg, var(--orange), #ff2b00);
}

.blue-button {
    background: linear-gradient(135deg, var(--blue), #0039db);
}

.black-button {
    background: linear-gradient(135deg, #23262d, #000000);
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits {
    padding: 8px 0 58px;
}

.benefit-grid {
    border: 1px solid #e4e7ee;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(25, 38, 75, 0.09);
}

.benefit-grid article {
    min-height: 112px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.benefit-grid article + article {
    border-left: 1px solid #e5e8ef;
}

.benefit-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 24px;
    font-weight: 950;
    box-shadow: 0 12px 25px rgba(31, 44, 77, 0.14);
}

.yellow {
    color: #15171b;
    background: var(--yellow);
}

.blue-bg {
    background: linear-gradient(135deg, var(--blue), #008bff);
}

.orange-bg {
    background: linear-gradient(135deg, var(--orange), #ff8400);
}

.benefit-grid h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-style: italic;
    text-transform: uppercase;
}

.benefit-grid p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

/* =========================================================
   PORTFOLIO PLACEHOLDER
========================================================= */

.placeholder-section {
    padding: 10px 0 90px;
}

.placeholder-box {
    min-height: 280px;
    padding: 48px;
    border: 2px dashed #cbd2df;
    border-radius: 26px;
    display: grid;
    place-items: center;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(255, 75, 0, 0.05), rgba(23, 87, 255, 0.06)),
        #ffffff;
}

.placeholder-box span {
    display: inline-block;
    color: var(--orange);
    font-weight: 950;
    letter-spacing: 4px;
}

.placeholder-box h2 {
    margin: 8px 0 0;
    font-size: clamp(26px, 3vw, 42px);
}

.placeholder-box p {
    max-width: 720px;
    margin: 12px 0 0;
    color: var(--muted);
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    color: #dce1eb;
    background:
        linear-gradient(135deg, rgba(23, 87, 255, 0.08), transparent 35%),
        #0b0d12;
}

.footer-grid {
    padding: 58px 0;
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 1fr;
    gap: 60px;
}

.footer-logo {
    min-width: 0;
    width: fit-content;
}

.footer-logo .brand-main {
    color: #ffffff;
}

.site-footer p {
    max-width: 430px;
    color: #9fa7b6;
}

.site-footer h3 {
    margin: 0 0 16px;
    color: #ffffff;
}

.site-footer a,
.site-footer span {
    margin: 8px 0;
    display: block;
    color: #aeb5c2;
}

.site-footer a:hover {
    color: var(--orange);
}

.footer-bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #828b9a;
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {
    .desktop-contact {
        display: none;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.12fr);
    }

    .hero-showcase.hero-main-image {
        margin-right: -28px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 250px;
        grid-template-columns: 40% 60%;
    }

    .service-image,
    .service-image img {
        min-height: 250px;
    }

}

@media (max-width: 1024px) {
    .container {
        width: min(100% - 32px, 960px);
    }

    .nav-wrap {
        min-height: 78px;
    }

    .brand-main {
        font-size: 40px;
    }

    .brand-sub {
        font-size: 15px;
    }

    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: calc(100% + 1px);
        left: 16px;
        right: 16px;
        margin: 0;
        padding: 12px;
        border: 1px solid #e3e6ed;
        border-radius: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #ffffff;
        box-shadow: 0 22px 50px rgba(16, 18, 22, 0.14);
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        padding: 14px 16px;
        border-radius: 10px;
    }

    .main-nav a::after {
        display: none;
    }

    .main-nav a:hover,
    .main-nav a.active {
        color: #ffffff;
        background: linear-gradient(135deg, var(--orange), var(--blue));
    }

    .hero {
        padding: 24px 0 8px;
    }

    .hero-grid {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hero-copy {
        padding: 8px 0 0;
    }

    .hero h1 {
        font-size: clamp(64px, 12vw, 100px);
    }

    .hero-showcase.hero-main-image {
        min-height: 0;
        margin: 4px 0 0;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 250px;
        grid-template-columns: 40% 60%;
    }

    .service-image,
    .service-image img {
        min-height: 250px;
    }

    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit-grid article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e5e8ef;
    }

    .benefit-grid article:nth-child(4) {
        border-top: 1px solid #e5e8ef;
    }
}

@media (max-width: 700px) {
    .container {
        width: min(100% - 22px, 640px);
    }

    .brand-logo {
        min-width: 150px;
    }

    .brand-main {
        font-size: 35px;
    }

    .hero {
        padding: 18px 0 5px;
    }

    .hero h1 {
        font-size: clamp(52px, 18vw, 82px);
    }

    .hero-copy > p {
        font-size: 16px;
    }

    .hero-actions {
        display: grid;
    }

    .btn {
        width: 100%;
    }

    .social-proof {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-showcase.hero-main-image {
        min-height: 0;
        margin: 2px -8px 0;
    }

    .hero-showcase.hero-main-image img {
        width: 100%;
    }

    .services {
        padding-top: 5px;
    }

    .service-card {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .service-image,
    .service-image img {
        min-height: 230px;
        height: 230px;
    }

    .service-content {
        padding: 22px 20px 20px;
    }

    .service-icon {
        top: 12px;
        left: 12px;
        width: 52px;
        height: 52px;
    }

    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .benefit-grid article + article,
    .benefit-grid article:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e5e8ef;
    }

    .placeholder-box {
        padding: 32px 22px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}
/* =========================================================
   PATCH: HALAMAN SUB-BRAND DAN KATALOG DINAMIS
========================================================= */
.business-page{--business-accent:var(--orange);--business-accent-dark:#d93700;--business-soft:#fff2eb;background:#fff}.business-theme-blue{--business-accent:var(--blue);--business-accent-dark:#003bd1;--business-soft:#edf3ff}.business-theme-black{--business-accent:#111318;--business-accent-dark:#000;--business-soft:#f0f1f3}.business-hero{position:relative;overflow:hidden;padding:56px 0 48px;background:linear-gradient(130deg,#fff 0%,var(--business-soft) 100%)}.business-hero:before{position:absolute;inset:-35% auto auto 48%;width:620px;height:620px;border-radius:50%;content:"";background:radial-gradient(circle,var(--business-accent),transparent 68%);opacity:.12;filter:blur(12px)}.business-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);align-items:center;gap:54px}.business-hero-copy{max-width:720px}.business-back{margin-bottom:32px;display:inline-flex;color:#626b78;font-size:14px;font-weight:800}.business-back:hover{color:var(--business-accent)}.business-eyebrow{width:max-content;margin:0 0 14px;padding:8px 13px;border-radius:999px;color:var(--business-accent);background:#fff;font-size:12px;font-weight:950;letter-spacing:2.4px;box-shadow:0 8px 25px rgba(20,30,50,.08)}.business-hero h1{margin:0;color:var(--business-accent);font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;font-size:clamp(58px,6vw,94px);line-height:.92;letter-spacing:.2px;transform:skew(-4deg)}.business-hero h2{max-width:680px;margin:22px 0 12px;color:#131820;font-size:clamp(28px,3.1vw,47px);line-height:1.06}.business-hero-copy>p:last-of-type{max-width:650px;margin:0;color:#4d5664;font-size:18px;line-height:1.65}.business-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:13px}.business-primary{color:#fff;background:linear-gradient(135deg,var(--business-accent),var(--business-accent-dark));box-shadow:0 15px 30px color-mix(in srgb,var(--business-accent) 24%,transparent)}.business-secondary{border:2px solid var(--business-accent);color:var(--business-accent);background:#fff}.business-hero-media{position:relative;min-height:460px;display:grid;place-items:center}.business-hero-media:after{position:absolute;inset:13% 3% 3%;border-radius:44% 56% 45% 55% / 57% 42% 58% 43%;content:"";background:linear-gradient(145deg,color-mix(in srgb,var(--business-accent) 18%,#fff),#fff);box-shadow:0 35px 70px rgba(22,31,50,.16)}.business-hero-media img{position:relative;z-index:3;width:min(100%,570px);max-height:470px;object-fit:contain;filter:drop-shadow(0 25px 28px rgba(20,25,40,.22))}.business-orbit{position:absolute;z-index:2;border:1px solid color-mix(in srgb,var(--business-accent) 40%,transparent);border-radius:50%}.orbit-one{width:390px;height:390px}.orbit-two{width:470px;height:470px;border-style:dashed;animation:business-spin 24s linear infinite}@keyframes business-spin{to{transform:rotate(360deg)}}.business-services,.product-catalog{padding:72px 0}.product-catalog{background:#f5f7fa}.business-section-head{max-width:720px;margin:0 auto 34px;text-align:center}.business-section-head>p{margin:0 0 8px;color:var(--business-accent);font-size:12px;font-weight:950;letter-spacing:3px}.business-section-head h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.08}.business-section-head span{margin-top:10px;display:block;color:#6c7481;line-height:1.55}.business-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.business-service-card{position:relative;min-height:285px;padding:28px;border:1px solid #e0e4eb;border-radius:20px;display:flex;flex-direction:column;background:#fff;box-shadow:0 15px 38px rgba(22,32,52,.07);transition:.22s ease}.business-service-card:hover{border-color:color-mix(in srgb,var(--business-accent) 48%,#ddd);transform:translateY(-6px);box-shadow:0 24px 48px rgba(22,32,52,.13)}.business-service-icon{width:58px;height:58px;margin-bottom:20px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--business-accent),var(--business-accent-dark));font-size:28px;box-shadow:0 12px 24px color-mix(in srgb,var(--business-accent) 22%,transparent)}.business-service-card h3{margin:0 0 10px;font-size:22px}.business-service-card p{margin:0;color:#626b78;line-height:1.6}.business-service-card small{margin-top:15px;color:var(--business-accent);font-weight:850}.business-service-card>a{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;color:var(--business-accent);font-weight:900}.business-empty{max-width:760px;margin:auto;padding:48px 24px;border:1px dashed #cfd5de;border-radius:20px;text-align:center;background:#fafbfc}.business-empty strong{display:block;font-size:23px}.business-empty p{margin:8px 0 20px;color:#677180}.business-empty a{padding:12px 20px;border-radius:10px;display:inline-flex;color:#fff;background:var(--business-accent);font-weight:850}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.product-card{overflow:hidden;border:1px solid #dfe4ec;border-radius:21px;display:flex;flex-direction:column;background:#fff;box-shadow:0 16px 38px rgba(20,32,53,.08);transition:.22s ease}.product-card:hover{transform:translateY(-5px);box-shadow:0 25px 48px rgba(20,32,53,.14)}.product-card.is-sold{opacity:.78}.product-image{position:relative;aspect-ratio:4/3.2;overflow:hidden;background:linear-gradient(145deg,#fff,#e9edf3)}.product-image>img{width:100%;height:100%;object-fit:cover;transition:.3s ease}.product-card:hover .product-image>img{transform:scale(1.035)}.product-placeholder{height:100%;display:grid;place-items:center;align-content:center;gap:8px;color:#798392}.product-placeholder span{font-size:67px}.product-stock{position:absolute;top:14px;right:14px;padding:7px 11px;border-radius:999px;color:#fff;background:#1c9b54;font-size:11px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.16)}.product-stock.stock-reserved{background:#d58a00}.product-stock.stock-sold{background:#cf3434}.product-copy{padding:22px;display:flex;flex:1;flex-direction:column}.product-meta{margin:0 0 7px!important;color:#77808d!important;font-size:12px!important;font-weight:800;text-transform:uppercase;letter-spacing:.5px}.product-copy h3{margin:0;font-size:23px}.product-copy>strong{margin:9px 0;color:var(--business-accent);font-size:22px}.product-copy>p{margin:0 0 18px;color:#606a77;font-size:14px;line-height:1.55}.product-copy>a{margin-top:auto;padding:12px 15px;border-radius:10px;display:flex;justify-content:space-between;color:#fff;background:linear-gradient(135deg,var(--business-accent),var(--business-accent-dark));font-weight:900}.product-sold-note{margin-top:auto;padding:12px;text-align:center;border-radius:10px;color:#8e3333;background:#ffeded;font-weight:850}.business-promise{padding:0 0 72px}.business-promise-grid{border:1px solid #e2e5eb;border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;background:#fff;box-shadow:0 15px 45px rgba(22,32,50,.07)}.business-promise article{position:relative;padding:28px}.business-promise article+article{border-left:1px solid #e2e5eb}.business-promise strong{position:absolute;right:22px;top:18px;color:color-mix(in srgb,var(--business-accent) 17%,transparent);font-size:52px;font-weight:950}.business-promise h3{position:relative;margin:0 0 8px;font-size:22px}.business-promise p{position:relative;margin:0;color:#66707d;line-height:1.55}.business-page .portfolio-section{padding-top:64px}
@media(max-width:1050px){.business-hero-grid{grid-template-columns:1fr;gap:20px}.business-hero-media{min-height:360px}.business-hero-media img{max-height:390px}.business-service-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.business-hero{padding:34px 0}.business-back{margin-bottom:24px}.business-hero h1{font-size:clamp(50px,16vw,76px)}.business-hero h2{font-size:31px}.business-hero-copy>p:last-of-type{font-size:16px}.business-actions{display:grid}.business-hero-media{min-height:300px}.business-hero-media img{max-height:320px}.orbit-one{width:250px;height:250px}.orbit-two{width:310px;height:310px}.business-services,.product-catalog{padding:52px 0}.business-service-grid,.product-grid{grid-template-columns:1fr}.business-service-card{min-height:250px}.business-promise-grid{grid-template-columns:1fr}.business-promise article+article{border-left:0;border-top:1px solid #e2e5eb}.business-page .portfolio-section{padding-top:48px}}

/* =========================================================
   PATCH V5 — IMAGE CARD UNTUK LAYANAN
========================================================= */
.business-service-grid {
    align-items: stretch;
}

.business-service-card {
    min-height: 440px;
    padding: 0;
    overflow: hidden;
}

.business-service-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(145deg, #eef1f5, var(--business-soft));
}

.business-service-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.business-service-media.is-fallback > img {
    padding: 22px 28px 8px;
    object-fit: contain;
    filter: drop-shadow(0 15px 18px rgba(25, 35, 55, 0.16));
}

.business-service-card:hover .business-service-media > img {
    transform: scale(1.045);
}

.business-service-card:hover .business-service-media.is-fallback > img {
    transform: scale(1.025);
}

.business-service-media .business-service-icon {
    position: absolute;
    z-index: 3;
    left: 22px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    margin: 0;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 15px;
    box-shadow: 0 12px 25px rgba(18, 25, 40, 0.23);
}

.business-service-body {
    min-height: 230px;
    padding: 23px 24px 24px;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.business-service-body h3 {
    margin-bottom: 9px;
}

.business-service-body p {
    margin-bottom: 0;
}

.business-service-body small {
    margin-top: 14px;
    display: block;
}

.business-service-body > a {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--business-accent);
    font-weight: 900;
}

@media (max-width: 700px) {
    .business-service-card {
        min-height: 420px;
    }

    .business-service-media {
        aspect-ratio: 16 / 9;
    }
}

/* =========================================================
   PATCH V9 — CEK STATUS SERVICE & SABLON
========================================================= */
.business-status-section {
    padding: 20px 0 72px;
    background: #fff;
}

.business-status-panel {
    position: relative;
    padding: 34px;
    border-radius: 26px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
    align-items: center;
    gap: 42px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--business-accent) 42%, transparent), transparent 28rem),
        linear-gradient(135deg, #101827, #0b1019);
    box-shadow: 0 28px 70px rgba(16, 24, 39, .18);
}

.business-status-panel::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(115deg, transparent 48%, rgba(255,255,255,.045));
}

.business-status-copy,
.business-status-form {
    position: relative;
    z-index: 2;
}

.business-status-copy > p {
    margin: 0 0 8px;
    color: var(--business-accent);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 2.8px;
}

.business-status-copy h2 {
    max-width: 680px;
    margin: 0;
    color: #fff;
    font-size: clamp(31px, 3.3vw, 48px);
    line-height: 1.06;
}

.business-status-copy > span {
    max-width: 650px;
    margin-top: 12px;
    display: block;
    color: #aeb9c9;
    line-height: 1.65;
}

.business-status-stages {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.business-status-stages > div {
    padding: 14px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.045);
}

.business-status-stages b {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--business-accent);
    font-size: 12px;
}

.business-status-stages strong {
    font-size: 12px;
    line-height: 1.3;
}

.business-status-form {
    padding: 24px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    display: grid;
    gap: 11px;
    background: rgba(255,255,255,.075);
    backdrop-filter: blur(10px);
}

.business-status-form label {
    font-size: 13px;
    font-weight: 900;
}

.business-status-form input {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 11px;
    outline: none;
    color: #fff;
    background: rgba(7, 12, 20, .62);
    font: inherit;
    font-weight: 850;
    letter-spacing: 1px;
}

.business-status-form input:focus {
    border-color: var(--business-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--business-accent) 22%, transparent);
}

.business-status-form input::placeholder {
    color: #738096;
}

.business-status-form button {
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, var(--business-accent), var(--business-accent-dark));
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.business-status-form small {
    color: #98a5b7;
    font-size: 11px;
    line-height: 1.5;
}

.business-status-form > a {
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.status-page {
    --status-accent: var(--blue);
    --status-accent-dark: var(--blue-2);
    min-height: 70vh;
    background: #f3f6fb;
}

.status-page.status-theme-orange {
    --status-accent: var(--orange);
    --status-accent-dark: #d93600;
}

.status-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 126px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--status-accent) 38%, transparent), transparent 30rem),
        linear-gradient(135deg, #111a2a, #080d15);
}

.status-hero::after {
    position: absolute;
    inset: auto -8% -240px 34%;
    height: 390px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
    transform: rotate(-8deg);
}

.status-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
    align-items: end;
    gap: 70px;
}

.status-eyebrow {
    margin: 0 0 12px;
    color: var(--status-accent);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 3px;
}

.status-hero h1 {
    margin: 0;
    font-size: clamp(46px, 6vw, 82px);
    line-height: .98;
}

.status-hero h1 span {
    color: var(--status-accent);
}

.status-hero-grid > div:first-child > p:last-child {
    max-width: 680px;
    margin: 20px 0 0;
    color: #b4becc;
    font-size: 17px;
    line-height: 1.65;
}

.status-hero-steps {
    display: grid;
    gap: 10px;
}

.status-hero-steps span {
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #d8dee8;
    background: rgba(255,255,255,.045);
    font-size: 13px;
    font-weight: 750;
}

.status-hero-steps b {
    color: var(--status-accent);
    font-size: 11px;
}

.status-lookup-section {
    position: relative;
    z-index: 3;
    margin-top: -74px;
    padding-bottom: 88px;
}

.status-lookup-layout {
    display: grid;
    grid-template-columns: 315px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.status-type-panel,
.status-main-panel {
    border: 1px solid #dfe4ec;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 65px rgba(22, 34, 57, .11);
}

.status-type-panel {
    padding: 20px;
    display: grid;
    gap: 11px;
}

.status-panel-label {
    margin: 0 0 2px;
    color: #788391;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 2px;
}

.status-type-choice {
    padding: 14px;
    border: 1px solid #e2e6ec;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 11px;
    transition: .2s ease;
}

.status-type-choice > span {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #eef2f7;
    font-size: 20px;
}

.status-type-choice strong,
.status-type-choice small {
    display: block;
}

.status-type-choice strong {
    font-size: 14px;
}

.status-type-choice small {
    margin-top: 2px;
    color: #808997;
    font-size: 11px;
}

.status-type-choice > b {
    color: #a3acb8;
}

.status-type-choice:hover,
.status-type-choice.is-active {
    border-color: var(--status-accent);
    background: color-mix(in srgb, var(--status-accent) 6%, #fff);
    transform: translateY(-2px);
}

.status-type-choice.is-active > span {
    color: #fff;
    background: var(--status-accent);
}

.status-help-card {
    margin-top: 8px;
    padding: 17px;
    border-radius: 14px;
    color: #fff;
    background: #101826;
}

.status-help-card strong {
    display: block;
    font-size: 14px;
}

.status-help-card p {
    margin: 6px 0 13px;
    color: #aeb7c6;
    font-size: 12px;
    line-height: 1.55;
}

.status-help-card a {
    color: var(--status-accent);
    font-size: 12px;
    font-weight: 900;
}

.status-main-panel {
    min-height: 520px;
    padding: 34px;
}

.status-form-head > p {
    margin: 0 0 7px;
    color: var(--status-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 2.5px;
}

.status-form-head h2 {
    margin: 0;
    font-size: clamp(29px, 3.2vw, 43px);
    line-height: 1.08;
}

.status-form-head > span {
    max-width: 770px;
    margin-top: 9px;
    display: block;
    color: #6b7482;
    line-height: 1.6;
}

.status-search-form {
    margin-top: 25px;
    padding: 20px;
    border: 1px solid #e0e5ed;
    border-radius: 17px;
    background: #f7f9fc;
}

.status-search-form > label {
    margin-bottom: 8px;
    display: block;
    font-size: 13px;
    font-weight: 900;
}

.status-search-form > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.status-search-form input {
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid #cdd5e0;
    border-radius: 10px;
    outline: none;
    background: #fff;
    font: inherit;
    font-weight: 850;
    letter-spacing: .8px;
}

.status-search-form input:focus {
    border-color: var(--status-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-accent) 13%, transparent);
}

.status-search-form button {
    min-width: 155px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--status-accent), var(--status-accent-dark));
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.status-search-form > small {
    margin-top: 8px;
    display: block;
    color: #87909d;
    font-size: 11px;
}

.status-message {
    margin-top: 18px;
    padding: 15px;
    border-radius: 13px;
    display: flex;
    gap: 12px;
}

.status-message > span {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 950;
}

.status-message strong,
.status-message p {
    display: block;
}

.status-message p {
    margin: 3px 0 0;
    font-size: 13px;
}

.status-message.is-error {
    border: 1px solid #f1b4b4;
    color: #902c2c;
    background: #fff0f0;
}

.status-message.is-error > span {
    color: #fff;
    background: #d94747;
}

.status-result-card {
    margin-top: 22px;
    padding: 25px;
    border: 1px solid #dde3eb;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(22, 34, 57, .08);
}

.status-result-card.status-processing {
    border-color: color-mix(in srgb, var(--status-accent) 42%, #dce2ea);
}

.status-result-card.status-completed {
    border-color: #9ed7b5;
}

.status-result-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.status-result-top p {
    margin: 0 0 5px;
    color: #8a93a0;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 2px;
}

.status-result-top h3 {
    margin: 0;
    color: var(--status-accent);
    font-size: 28px;
}

.status-completed .status-result-top h3 {
    color: #17864a;
}

.status-code-chip {
    padding: 9px 12px;
    border-radius: 9px;
    color: #293343;
    background: #eef2f7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .6px;
}

.status-progress {
    position: relative;
    margin: 28px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-progress::before {
    position: absolute;
    top: 18px;
    left: 16.5%;
    right: 16.5%;
    height: 3px;
    content: "";
    background: #dfe4eb;
}

.status-progress-step {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.status-progress-step > span {
    width: 38px;
    height: 38px;
    border: 3px solid #dfe4eb;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #9099a6;
    background: #fff;
    font-size: 12px;
    font-weight: 950;
}

.status-progress-step > strong {
    color: #8b95a2;
    font-size: 11px;
}

.status-progress-step.is-done > span {
    border-color: var(--status-accent);
    color: #fff;
    background: var(--status-accent);
}

.status-progress-step.is-done > strong {
    color: #303a48;
}

.status-progress-step.is-current > span {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-accent) 15%, transparent);
}

.status-order-info {
    padding: 18px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    background: #f6f8fb;
}

.status-order-info small,
.status-order-info strong {
    display: block;
}

.status-order-info small,
.status-detail-box small {
    margin-bottom: 4px;
    color: #848e9b;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.status-order-info strong {
    font-size: 14px;
}

.status-detail-box {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
}

.status-detail-box p {
    margin: 5px 0 0;
    color: #596372;
    font-size: 13px;
    line-height: 1.6;
}

.status-customer-note {
    margin-top: 14px;
    padding: 15px;
    border-radius: 14px;
    display: flex;
    gap: 12px;
    color: #30435e;
    background: color-mix(in srgb, var(--status-accent) 8%, #fff);
}

.status-customer-note > span {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--status-accent);
    font-weight: 950;
}

.status-customer-note strong {
    font-size: 13px;
}

.status-customer-note p {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.55;
}

.status-history {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e6e9ee;
}

.status-history h4 {
    margin: 0 0 12px;
    font-size: 14px;
}

.status-history > div {
    position: relative;
    padding: 0 0 15px 22px;
    display: flex;
}

.status-history > div::before {
    position: absolute;
    top: 13px;
    bottom: -4px;
    left: 5px;
    width: 1px;
    content: "";
    background: #dfe4eb;
}

.status-history > div:last-child::before {
    display: none;
}

.status-history > div > span {
    position: absolute;
    top: 4px;
    left: 0;
    width: 11px;
    height: 11px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--status-accent);
    box-shadow: 0 0 0 1px var(--status-accent);
}

.status-history p {
    margin: 0;
}

.status-history strong,
.status-history small,
.status-history em {
    display: block;
}

.status-history strong {
    font-size: 13px;
}

.status-history small {
    margin-top: 2px;
    color: #8a94a1;
    font-size: 10px;
}

.status-history em {
    margin-top: 4px;
    color: #596473;
    font-size: 12px;
    font-style: normal;
}

.status-result-footer {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #e6e9ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.status-result-footer small {
    color: #88919e;
}

.status-result-footer a {
    color: var(--status-accent);
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1120px) {
    .business-status-panel,
    .status-hero-grid {
        grid-template-columns: 1fr;
    }

    .status-hero-grid {
        gap: 30px;
    }

    .status-hero-steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .status-lookup-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }
}

@media (max-width: 820px) {
    .business-status-panel {
        padding: 25px;
        gap: 28px;
    }

    .business-status-stages,
    .status-hero-steps {
        grid-template-columns: 1fr;
    }

    .status-hero {
        padding: 52px 0 105px;
    }

    .status-lookup-layout {
        grid-template-columns: 1fr;
    }

    .status-type-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .status-panel-label,
    .status-help-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .business-status-section {
        padding-bottom: 52px;
    }

    .business-status-panel {
        padding: 20px;
        border-radius: 19px;
    }

    .business-status-stages > div {
        padding: 11px;
    }

    .status-hero h1 {
        font-size: 43px;
    }

    .status-main-panel,
    .status-type-panel {
        padding: 17px;
        border-radius: 17px;
    }

    .status-type-panel {
        grid-template-columns: 1fr;
    }

    .status-panel-label,
    .status-help-card {
        grid-column: auto;
    }

    .status-search-form > div {
        grid-template-columns: 1fr;
    }

    .status-search-form button {
        min-height: 48px;
    }

    .status-result-top,
    .status-result-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-progress-step > strong {
        font-size: 9px;
    }

    .status-order-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Patch v10: aksi nota pada hasil status */
.status-result-actions{display:flex;align-items:center;gap:12px}.status-invoice-link{padding:8px 11px;border-radius:8px;color:#fff!important;background:var(--status-accent)}@media(max-width:650px){.status-result-actions{align-items:flex-start;flex-direction:column}}

/* =========================================================
   PATCH V15 — STATUS iBOB PHONE
========================================================= */
.status-page.status-theme-phone {
    --status-accent: #1f2937;
    --status-accent-dark: #0f172a;
}
.status-page.status-theme-phone .status-type-choice.is-active {
    background: #f3f4f6;
}
.status-page.status-theme-phone .status-transaction-kind {
    border-color: #d8dde5;
    background: #f7f8fa;
}