/* =========================================================
   TIJARAH LANDING PAGE
   ========================================================= */

:root {
    --tijarah-yellow: #cce2bd;
    --tijarah-yellow-dark: #cce2bd;
    --tijarah-yellow-soft: #eaf1e5;
    --tijarah-navy: #343851;
    --tijarah-navy-dark: #343851;
    --tijarah-blue: #343851;
    --tijarah-white: #ffffff;
    --tijarah-bg: #f8f9fd;
    --tijarah-text: #343851;
    --tijarah-muted: #343851;
    --border: #e3e9e6;
    --shadow: 0 10px 35px rgba(34, 112, 90, .09);
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--tijarah-text);
    background: white;
}

a {
    text-decoration: none;
}

.container {
    width: min(1420px, calc(100% - 80px));
    margin: auto;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    height: 84px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #f0f0f4;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

.navbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    color: var(--tijarah-navy);
    width: 260px;
}

.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.brand-text {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

    .brand-text strong {
        font-size: 27px;
        line-height: 27px;
    }

    .brand-text span {
        font-size: 11px;
        font-weight: 600;
    }


.main-menu {
    display: flex;
    justify-content: center;
    gap: 42px;
    flex: 1;
}

    .main-menu a {
        color: #343851;
        font-size: 14px;
        font-weight: 600;
        padding: 30px 0 25px;
        position: relative;
    }

        .main-menu a:hover,
        .main-menu a.active {
            color: var(--tijarah-navy);
        }

            .main-menu a.active::after {
                content: "";
                height: 3px;
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 17px;
                border-radius: 20px;
                background: var(--tijarah-yellow);
            }


.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.language {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-right: 10px;
    color: var(--tijarah-navy);
    font-size: 14px;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 8px;
    transition: .2s ease;
}

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

.btn-login {
    min-width: 100px;
    height: 45px;
    border: 1px solid var(--tijarah-navy);
    color: var(--tijarah-navy);
}

.btn-client {
    min-width: 145px;
    height: 45px;
    gap: 8px;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy-dark);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 30% 60%, rgba(34, 112, 90,.20), transparent 28% ), linear-gradient( 110deg, #fffef7 0%, #ffffff 46%, #f5f7f6 100% );
}

    .hero::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        background: rgba(34, 112, 90,.12);
        border-radius: 50%;
        right: -180px;
        top: -230px;
    }

.hero-grid {
    min-height: 540px;
    display: grid;
    grid-template-columns: .95fr 1.25fr;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 2;
}


.hero-content {
    padding: 60px 0;
}

.hero-badge,
.section-label {
    display: inline-block;
    padding: 7px 15px;
    background: var(--tijarah-yellow-soft);
    color: var(--tijarah-navy);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
}

.hero h1 {
    margin: 18px 0;
    font-size: clamp(42px, 4vw, 65px);
    line-height: 1.02;
    letter-spacing: -2px;
    color: var(--tijarah-navy);
}

    .hero h1 span {
        color: var(--tijarah-yellow-dark);
    }

.hero-description {
    max-width: 610px;
    font-size: 17px;
    line-height: 1.55;
    color: #343851;
}


.hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 26px;
}

.btn-primary {
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    padding: 15px 27px;
    box-shadow: 0 10px 24px rgba(255,199,0,.22);
}

.btn-outline {
    border: 1px solid #eaf4ee;
    color: var(--tijarah-navy);
    background: white;
    padding: 15px 30px;
}


.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 600;
}

.check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tijarah-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tijarah-navy);
    margin-right: 6px;
}


/* =========================================================
   LAPTOP / DASHBOARD MOCKUP
   ========================================================= */

.hero-visual {
    position: relative;
}

.hero-note {
    position: absolute;
    right: 0;
    top: -55px;
    color: var(--tijarah-navy);
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.4;
    transform: rotate(-5deg);
}


.laptop {
    position: relative;
}

.laptop-screen {
    height: 380px;
    background: #343851;
    border: 13px solid #343851;
    border-radius: 18px 18px 7px 7px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px 1fr;
    box-shadow: 0 25px 60px rgba(20,27,72,.25);
}

.laptop-base {
    width: 108%;
    height: 19px;
    position: relative;
    left: -4%;
    border-radius: 3px 3px 20px 20px;
    background: linear-gradient( #d8d9dd, #73838a );
}


.mock-sidebar {
    background: linear-gradient( 180deg, var(--tijarah-navy), #343851 );
    color: white;
}

.mock-brand {
    padding: 17px;
    background: var(--tijarah-navy-dark);
    font-weight: 800;
}

.mock-menu {
    padding: 10px 16px;
    font-size: 11px;
    opacity: .88;
}

    .mock-menu.active {
        background: var(--tijarah-yellow);
        color: var(--tijarah-navy-dark);
        font-weight: 800;
    }


.mock-main {
    background: #f5f7f6;
    padding: 14px;
}

.mock-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 13px;
    color: var(--tijarah-navy);
    font-size: 11px;
}

.mock-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.mock-card {
    min-height: 75px;
    padding: 10px;
    background: white;
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(20,20,50,.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mock-card small {
        font-size: 8px;
    }

    .mock-card strong {
        font-size: 12px;
        color: var(--tijarah-navy);
    }

    .mock-card span {
        font-size: 7px;
    }

.positive {
    color: #1ba765;
}

.danger {
    color: #f25b49 !important;
}


.dashboard-content {
    display: grid;
    grid-template-columns: 1.6fr .9fr;
    gap: 10px;
    margin-top: 10px;
}

.chart-card,
.sales-card {
    background: white;
    border-radius: 8px;
    padding: 12px;
    height: 180px;
}

.chart-title {
    font-size: 10px;
    font-weight: 700;
}

.chart {
    height: 130px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 7px;
    border-bottom: 1px solid #e3e9e6;
    padding: 15px;
}

    .chart div {
        flex: 1;
        max-width: 24px;
        background: linear-gradient( 90deg, var(--tijarah-yellow) 50%, var(--tijarah-navy) 50% );
        border-radius: 3px 3px 0 0;
    }

.sales-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
}

.sales-card div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    font-size: 8px;
}


/* =========================================================
   BUSINESS TYPES
   ========================================================= */

.business-types {
    background: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.business-grid {
    min-height: 100px;
    display: grid;
    grid-template-columns: repeat(8,1fr) 1.35fr 1.35fr 1.35fr;
    align-items: center;
    gap: 8px;
}

.business-item {
    text-align: center;
    color: var(--tijarah-navy);
}

    .business-item div {
        width: 40px;
        height: 40px;
        margin: 0 auto 7px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--tijarah-yellow);
    }

    .business-item span {
        font-size: 10px;
        font-weight: 600;
    }


.stat {
    border-left: 1px solid #ddd;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
}

    .stat strong {
        color: var(--tijarah-navy);
        font-size: 18px;
    }

    .stat span {
        color: var(--tijarah-muted);
        font-size: 10px;
    }


/* =========================================================
   FEATURES
   ========================================================= */

.features {
    background: #fafbfe;
    padding: 40px 0;
}

.feature-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 55px;
    align-items: center;
}

.feature-intro h2,
.testimonial-title h2 {
    color: var(--tijarah-navy);
    font-size: 32px;
    line-height: 1.02;
    margin: 13px 0;
}

.feature-intro p,
.testimonial-title p {
    color: var(--tijarah-muted);
    line-height: 1.5;
    font-size: 13px;
}

.btn-small-outline {
    border: 1px solid var(--tijarah-yellow-dark);
    color: var(--tijarah-navy);
    padding: 10px 17px;
    margin-top: 5px;
    font-size: 12px;
}


.feature-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 13px;
}

.feature-card {
    min-height: 100px;
    background: white;
    border: 1px solid #f0f1f5;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    gap: 13px;
    box-shadow: var(--shadow);
}

.feature-icon {
    min-width: 46px;
    height: 46px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

    .feature-icon.yellow {
        background: #cce2bd;
    }

    .feature-icon.blue {
        background: #e3e9e6;
    }

    .feature-icon.purple {
        background: #e3e9e6;
    }

.feature-card h3 {
    margin: 3px 0 7px;
    font-size: 13px;
    color: var(--tijarah-navy);
}

.feature-card p {
    margin: 0;
    color: var(--tijarah-muted);
    font-size: 10px;
    line-height: 1.5;
}


/* =========================================================
   TESTIMONIAL
   ========================================================= */

.testimonials {
    background: linear-gradient( 90deg, #fffdf0, #ffffff );
    padding: 25px 0;
}

.testimonial-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 55px;
    align-items: center;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.testimonial-card {
    background: white;
    padding: 17px;
    border-radius: 10px;
    display: flex;
    gap: 13px;
    box-shadow: var(--shadow);
}

.avatar {
    min-width: 55px;
    height: 55px;
    border-radius: 9px;
    background: var(--tijarah-navy);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.testimonial-card p {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.5;
}

.testimonial-card strong {
    display: block;
    color: var(--tijarah-navy);
    font-size: 11px;
}

.testimonial-card span {
    font-size: 9px;
    color: var(--tijarah-muted);
}

.stars {
    color: #cce2bd;
    margin-top: 7px;
    letter-spacing: 2px;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.bottom-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 110deg, var(--tijarah-navy-dark), var(--tijarah-blue) );
    color: white;
}

    .bottom-cta::before {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border: 20px solid var(--tijarah-yellow);
        border-radius: 50%;
        left: -120px;
        top: -100px;
        opacity: .9;
    }

.cta-inner {
    min-height: 125px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

    .cta-inner h2 {
        margin: 0 0 8px;
        font-size: 22px;
    }

    .cta-inner p {
        margin: 0;
        color: #e3e9e6;
        font-size: 13px;
    }

.cta-buttons {
    display: flex;
    gap: 15px;
}

.btn-yellow {
    padding: 14px 26px;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
}

.btn-dark-outline {
    padding: 14px 26px;
    border: 1px solid white;
    color: white;
}


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

@media (max-width: 1200px) {

    .container {
        width: calc(100% - 40px);
    }

    .main-menu {
        gap: 20px;
    }

    .business-grid {
        grid-template-columns: repeat(4,1fr);
        padding: 25px 0;
    }

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


@media (max-width: 900px) {

    .main-menu {
        display: none;
    }

    .navbar-inner {
        justify-content: space-between;
    }

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

    .hero-content {
        padding-bottom: 10px;
    }

    .hero-visual {
        padding-bottom: 50px;
    }

    .hero-note {
        display: none;
    }

    .feature-layout,
    .testimonial-layout {
        grid-template-columns: 1fr;
    }

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

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 0;
        gap: 20px;
    }
}


@media (max-width: 650px) {

    .container {
        width: calc(100% - 28px);
    }

    .brand {
        width: auto;
    }

    .brand-text span {
        display: none;
    }

    .language,
    .btn-login {
        display: none;
    }

    .btn-client {
        min-width: auto;
        padding: 0 15px;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-buttons {
        flex-direction: column;
    }

        .hero-buttons .btn {
            width: 100%;
        }

    .laptop-screen {
        height: 280px;
        grid-template-columns: 95px 1fr;
    }

    .mock-menu {
        font-size: 8px;
        padding: 8px;
    }

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

    .dashboard-content {
        display: none;
    }

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

    .stat {
        border: none;
        text-align: center;
        padding: 15px;
    }

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

    .cta-buttons {
        width: 100%;
        flex-direction: column;
    }

        .cta-buttons .btn {
            width: 100%;
        }
}


/* =========================================================
   PRICING PAGE
   ========================================================= */

.pricing-page {
    background: #fff;
}

/* HERO */

.pricing-hero {
    position: relative;
    overflow: hidden;
    padding: 75px 0 125px;
    background: radial-gradient( circle at 10% 10%, rgba(34, 112, 90, .22), transparent 25% ), radial-gradient( circle at 90% 30%, rgba(34, 112, 90, .08), transparent 25% ), linear-gradient( 180deg, #fffef7, #f8f9fd );
}

    .pricing-hero::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border: 55px solid rgba(34, 112, 90, .13);
        border-radius: 50%;
        right: -140px;
        top: -150px;
    }

.pricing-heading {
    position: relative;
    z-index: 2;
    max-width: 850px;
    text-align: center;
}

    .pricing-heading h1 {
        margin: 16px 0;
        font-size: 48px;
        line-height: 1.1;
        letter-spacing: -1.5px;
        color: var(--tijarah-navy);
    }

        .pricing-heading h1 span {
            color: var(--tijarah-yellow-dark);
        }

    .pricing-heading > p {
        max-width: 700px;
        margin: auto;
        font-size: 16px;
        line-height: 1.6;
        color: var(--tijarah-muted);
    }

.billing-info {
    margin-top: 27px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    color: var(--tijarah-navy);
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   PACKAGE CARDS
   ========================================================= */

.pricing-section {
    position: relative;
    margin-top: -70px;
    padding-bottom: 75px;
    z-index: 5;
}

.pricing-grid {
    max-width: 1120px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.price-card {
    position: relative;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(34, 112, 90, .09);
    transition: .25s ease;
}

    .price-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 25px 65px rgba(34, 112, 90, .15);
    }

    .price-card.popular {
        border: 2px solid var(--tijarah-yellow);
        transform: translateY(-12px);
        box-shadow: 0 25px 65px rgba(34, 112, 90, .15);
    }

        .price-card.popular:hover {
            transform: translateY(-18px);
        }

.popular-label {
    position: absolute;
    top: -14px;
    right: 25px;
    padding: 7px 15px;
    border-radius: 30px;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
}

.price-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--tijarah-yellow-soft);
    font-size: 25px;
}

.price-card h2 {
    margin: 18px 0 7px;
    color: var(--tijarah-navy);
    font-size: 25px;
}

.package-description {
    min-height: 63px;
    margin: 0;
    color: var(--tijarah-muted);
    font-size: 12px;
    line-height: 1.55;
}


/* PRICE */

.price {
    margin: 25px 0 22px;
    color: var(--tijarah-navy);
}

    .price > span {
        vertical-align: top;
        font-size: 15px;
        font-weight: 700;
    }

    .price strong {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .price small {
        color: var(--tijarah-muted);
        font-size: 12px;
    }

.price-divider {
    height: 1px;
    background: #eee;
    margin-bottom: 20px;
}

.feature-title {
    margin-bottom: 15px;
    color: var(--tijarah-navy);
    font-size: 12px;
    font-weight: 800;
}

.price-features {
    min-height: 235px;
    padding: 0;
    margin: 0 0 25px;
    list-style: none;
}

    .price-features li {
        padding: 7px 0;
        color: #343851;
        font-size: 12px;
    }

        .price-features li::first-letter {
            color: var(--tijarah-yellow-dark);
        }


/* BUTTON */

.price-button {
    width: 100%;
    height: 48px;
}

    .price-button.outline {
        border: 1px solid var(--tijarah-navy);
        color: var(--tijarah-navy);
        background: white;
    }

        .price-button.outline:hover {
            background: var(--tijarah-navy);
            color: white;
        }

    .price-button.primary {
        background: var(--tijarah-yellow);
        color: var(--tijarah-navy);
        box-shadow: 0 10px 25px rgba(34, 112, 90, .30);
    }


/* =========================================================
   CUSTOM MODULE
   ========================================================= */

.module-section {
    padding: 70px 0;
    background: linear-gradient( 180deg, #fafbfe, #fff );
}

.module-heading {
    max-width: 650px;
    margin: 0 auto 40px;
    text-align: center;
}

    .module-heading h2 {
        margin: 14px 0 8px;
        color: var(--tijarah-navy);
        font-size: 34px;
    }

    .module-heading p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 14px;
        line-height: 1.6;
    }


/* MODULE GRID */

.module-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 1100px;
    margin: auto;
}

.module-card {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #fff;
    border: 1px solid #f5f7f6;
    border-radius: 12px;
    box-shadow: 0 7px 25px rgba(32, 40, 91, .05);
    transition: .2s;
}

    .module-card:hover {
        border-color: var(--tijarah-yellow);
        transform: translateY(-2px);
    }

.module-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 21px;
}

    .module-icon.yellow {
        background: #cce2bd;
    }

    .module-icon.blue {
        background: #e3e9e6;
    }

    .module-icon.purple {
        background: #e3e9e6;
    }

.module-content h3 {
    margin: 0 0 5px;
    color: var(--tijarah-navy);
    font-size: 13px;
}

.module-content p {
    margin: 0;
    max-width: 330px;
    color: var(--tijarah-muted);
    font-size: 10px;
    line-height: 1.5;
}

.module-price {
    min-width: 95px;
    text-align: right;
}

    .module-price strong {
        display: block;
        color: var(--tijarah-navy);
        font-size: 13px;
    }

    .module-price span {
        color: var(--tijarah-muted);
        font-size: 9px;
    }


/* CUSTOM PACKAGE */

.custom-package {
    max-width: 1100px;
    margin: 25px auto 0;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(34, 112, 90, .8);
    border-radius: 14px;
    background: linear-gradient( 90deg, #fffbea, #ffffff );
}

    .custom-package h3 {
        margin: 0 0 5px;
        color: var(--tijarah-navy);
        font-size: 17px;
    }

    .custom-package p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 11px;
    }


/* =========================================================
   SUBSCRIPTION BENEFIT
   ========================================================= */

.subscription-benefit {
    padding: 70px 0;
    background: white;
}

.benefit-heading {
    text-align: center;
    margin-bottom: 35px;
}

    .benefit-heading h2 {
        margin: 12px 0;
        color: var(--tijarah-navy);
        font-size: 32px;
    }

.benefit-grid {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.benefit-item {
    padding: 25px;
    text-align: center;
    border-radius: 13px;
    background: #fafbfe;
    border: 1px solid #f5f7f6;
}

    .benefit-item > div {
        width: 55px;
        height: 55px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow-soft);
        font-size: 23px;
    }

    .benefit-item h3 {
        margin: 15px 0 7px;
        color: var(--tijarah-navy);
        font-size: 14px;
    }

    .benefit-item p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 11px;
        line-height: 1.55;
    }


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

@media (max-width: 900px) {

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .price-card.popular {
        transform: none;
    }

        .price-card.popular:hover {
            transform: translateY(-7px);
        }

    .price-features {
        min-height: auto;
    }

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

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


@media (max-width: 650px) {

    .pricing-hero {
        padding-top: 50px;
    }

    .pricing-heading h1 {
        font-size: 36px;
    }

    .billing-info {
        flex-direction: column;
        gap: 10px;
    }

    .module-card {
        grid-template-columns: 48px 1fr;
    }

    .module-price {
        grid-column: 2;
        text-align: left;
    }

    .custom-package {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

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


/* =========================================================
   LOGIN CLIENT
   ========================================================= */

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: white;
}


/* LEFT PANEL */

.login-brand-panel {
    min-height: 100vh;
    position: relative;
    padding: 45px clamp(50px, 7vw, 120px);
    overflow: hidden;
    background: radial-gradient( circle at 20% 90%, rgba(34, 112, 90, .15), transparent 30% ), linear-gradient( 135deg, #343851, #343851 );
    color: white;
}


    .login-brand-panel::before {
        content: "";
        position: absolute;
        width: 480px;
        height: 480px;
        border: 75px solid rgba(34, 112, 90, .08);
        border-radius: 50%;
        right: -240px;
        top: -180px;
    }


    .login-brand-panel::after {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        background: var(--tijarah-yellow);
        border-radius: 50%;
        left: -110px;
        bottom: -100px;
        opacity: .8;
    }


.login-logo {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    width: fit-content;
    color: white;
}


    .login-logo img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        margin-right: 12px;
    }


    .login-logo div {
        display: flex;
        flex-direction: column;
    }


    .login-logo strong {
        font-size: 28px;
    }


    .login-logo span {
        font-size: 10px;
        opacity: .85;
    }


.login-promo {
    max-width: 580px;
    position: absolute;
    z-index: 5;
    left: clamp(50px, 7vw, 120px);
    top: 50%;
    transform: translateY(-50%);
}


.login-label {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 20px;
    background: rgba(34, 112, 90, .15);
    color: var(--tijarah-yellow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
}


.login-promo h1 {
    margin: 20px 0;
    max-width: 520px;
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1.04;
    letter-spacing: -2px;
}


    .login-promo h1 span {
        color: var(--tijarah-yellow);
    }


.login-promo > p {
    max-width: 500px;
    color: #e3e9e6;
    font-size: 15px;
    line-height: 1.65;
}


/* BENEFITS */

.login-benefits {
    margin-top: 35px;
    display: grid;
    gap: 18px;
}


    .login-benefits > div {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }


        .login-benefits > div > span {
            min-width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--tijarah-yellow);
            color: var(--tijarah-navy);
            font-weight: 900;
        }


    .login-benefits p {
        margin: 0;
        color: #eaf4ee;
        font-size: 12px;
    }


    .login-benefits strong {
        display: block;
        margin-bottom: 3px;
        color: white;
        font-size: 13px;
    }


/* =========================================================
   RIGHT LOGIN
   ========================================================= */

.login-form-panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background: radial-gradient( circle at 90% 5%, rgba(34, 112, 90,.12), transparent 25% ), #fff;
}


.login-box {
    width: 100%;
    max-width: 470px;
}


.mobile-login-logo {
    display: none;
}


.login-header {
    margin-bottom: 28px;
}


    .login-header h2 {
        margin: 0 0 8px;
        color: var(--tijarah-navy);
        font-size: 34px;
        letter-spacing: -1px;
    }


    .login-header p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 13px;
        line-height: 1.6;
    }


/* SELECTED PACKAGE */

.selected-package {
    margin-bottom: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(34, 112, 90, .7);
    border-radius: 11px;
    background: #fffdf0;
}


.selected-package-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--tijarah-yellow);
    font-size: 19px;
}


.selected-package span {
    display: block;
    margin-bottom: 2px;
    color: var(--tijarah-muted);
    font-size: 10px;
}


.selected-package strong {
    color: var(--tijarah-navy);
    font-size: 14px;
}


/* GOOGLE */

.google-login-button {
    width: 100%;
    height: 55px;
    border: 1px solid #e3e9e6;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    color: #343851;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 7px 25px rgba(27,35,82,.06);
    transition: .2s ease;
}


    .google-login-button:hover {
        transform: translateY(-2px);
        border-color: var(--tijarah-yellow);
        box-shadow: 0 12px 30px rgba(27,35,82,.10);
    }


.google-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #ddd;
    color: #5b608a;
    font-size: 18px;
    font-weight: 900;
}


/* SECURITY */

.login-security {
    margin-top: 15px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #f7f8fc;
}


    .login-security p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 10px;
        line-height: 1.5;
    }


/* DIVIDER */

.login-divider {
    margin: 28px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}


    .login-divider span {
        height: 1px;
        background: #e3e9e6;
    }


    .login-divider small {
        color: #73838a;
        font-size: 9px;
        font-weight: 700;
    }


/* INFO */

.login-info {
    display: grid;
    gap: 11px;
}


    .login-info div {
        color: #343851;
        font-size: 11px;
    }


    .login-info span {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow-soft);
        color: var(--tijarah-navy);
        font-size: 10px;
        font-weight: 900;
    }


/* FOOTER */

.login-footer {
    margin-top: 35px;
    padding-top: 18px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}


    .login-footer a {
        color: var(--tijarah-navy);
        font-size: 11px;
        font-weight: 700;
    }


/* RESPONSIVE */

@media (max-width: 850px) {

    .login-page {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        padding: 30px 20px;
    }

    .mobile-login-logo {
        margin-bottom: 50px;
        display: flex;
        align-items: center;
        color: var(--tijarah-navy);
        font-size: 23px;
    }

        .mobile-login-logo img {
            width: 50px;
            margin-right: 8px;
        }
}

.auth-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fafbfe;
}

    .auth-loading img {
        width: 90px;
    }

    .auth-loading h2 {
        margin: 15px 0 5px;
        color: var(--tijarah-navy);
    }

    .auth-loading p {
        color: var(--tijarah-muted);
    }

/* =========================================================
   TIJARAH CLIENT AREA
   ========================================================= */

.client-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 255px 1fr;
    background: #f6f7fb;
}


/* SIDEBAR */

.client-sidebar {
    position: fixed;
    width: 255px;
    height: 100vh;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient( 180deg, #343851, #343851 );
    color: white;
    z-index: 100;
}


.client-brand {
    height: 85px;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.08);
}


    .client-brand img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        margin-right: 10px;
    }


    .client-brand div {
        display: flex;
        flex-direction: column;
    }


    .client-brand strong {
        font-size: 23px;
    }


    .client-brand span {
        margin-top: -2px;
        color: #eaf4ee;
        font-size: 9px;
    }


/* MENU */

.client-menu {
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.client-menu-label {
    padding: 0 12px 8px;
    color: #73838a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}


    .client-menu-label.second {
        margin-top: 25px;
    }


.client-menu a {
    min-height: 45px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    color: #e3e9e6;
    font-size: 12px;
    font-weight: 600;
    transition: .2s;
}


    .client-menu a > span {
        width: 24px;
        text-align: center;
    }


    .client-menu a:hover {
        background: rgba(255,255,255,.06);
        color: white;
    }


    .client-menu a.active {
        background: var(--tijarah-yellow);
        color: var(--tijarah-navy-dark);
        font-weight: 800;
    }


/* SUPPORT */

.client-sidebar-bottom {
    margin-top: auto;
    padding: 15px;
}


.sidebar-help {
    padding: 17px;
    border-radius: 11px;
    background: rgba(255,255,255,.07);
    text-align: center;
}


    .sidebar-help > div {
        width: 38px;
        height: 38px;
        margin: auto auto 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow);
        font-size: 17px;
    }


    .sidebar-help strong {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
    }


    .sidebar-help span {
        display: block;
        margin-bottom: 12px;
        color: #eaf4ee;
        font-size: 9px;
        line-height: 1.5;
    }


    .sidebar-help a {
        display: block;
        padding: 8px;
        border-radius: 6px;
        background: white;
        color: var(--tijarah-navy);
        font-size: 9px;
        font-weight: 800;
    }


/* =========================================================
   MAIN
   ========================================================= */

.client-main {
    grid-column: 2;
    min-width: 0;
}


.client-header {
    height: 85px;
    padding: 0 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #e3e9e6;
}


    .client-header h1 {
        margin: 0 0 3px;
        color: var(--tijarah-navy);
        font-size: 21px;
    }


    .client-header p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 10px;
    }


/* USER */

.client-user {
    display: flex;
    align-items: center;
    gap: 10px;
}


.notification {
    width: 38px;
    height: 38px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f6f7fb;
}


.client-avatar {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    font-size: 15px;
    font-weight: 900;
}


.client-user-info {
    display: flex;
    flex-direction: column;
}


    .client-user-info strong {
        color: var(--tijarah-navy);
        font-size: 11px;
    }


    .client-user-info span {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--tijarah-muted);
        font-size: 8px;
    }


.user-arrow {
    color: var(--tijarah-muted);
}


/* =========================================================
   CONTENT
   ========================================================= */

.client-content {
    padding: 30px 35px 50px;
    max-width: 1500px;
}


/* WELCOME */

.dashboard-welcome {
    min-height: 160px;
    position: relative;
    padding: 30px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient( 110deg, #343851, #343851 );
    color: white;
}


    .dashboard-welcome::after {
        content: "";
        position: absolute;
        width: 270px;
        height: 270px;
        right: -100px;
        top: -140px;
        border: 45px solid rgba(34, 112, 90,.13);
        border-radius: 50%;
    }


.welcome-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(34, 112, 90,.15);
    color: var(--tijarah-yellow);
    font-size: 8px;
    font-weight: 800;
}


.dashboard-welcome h2 {
    margin: 0 0 7px;
    font-size: 25px;
}


.dashboard-welcome p {
    margin: 0;
    color: #e3e9e6;
    font-size: 11px;
}


.welcome-decoration {
    position: relative;
    z-index: 2;
    margin-right: 40px;
    font-size: 70px;
    transform: rotate(-8deg);
}


/* SUMMARY */

.dashboard-summary {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}


.summary-card {
    min-height: 105px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #f5f7f6;
    border-radius: 12px;
    background: white;
    box-shadow: 0 5px 18px rgba(28,35,82,.04);
}


.summary-icon {
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 19px;
}


    .summary-icon.yellow {
        background: #cce2bd;
    }

    .summary-icon.blue {
        background: #e3e9e6;
    }

    .summary-icon.purple {
        background: #e3e9e6;
    }

    .summary-icon.green {
        background: #dff7e9;
    }


.summary-card > div:last-child {
    display: flex;
    flex-direction: column;
}


.summary-card span {
    color: var(--tijarah-muted);
    font-size: 9px;
}


.summary-card strong {
    margin: 3px 0;
    color: var(--tijarah-navy);
    font-size: 19px;
}


.summary-card small {
    color: #73838a;
    font-size: 8px;
}


.summary-card .account-active {
    color: #20a56a;
    font-size: 15px;
}


/* PANELS */

.dashboard-columns {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1.6fr .8fr;
    gap: 20px;
}


.dashboard-panel {
    background: white;
    border: 1px solid #e3e9e6;
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(28,35,82,.035);
}


.panel-header {
    min-height: 70px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}


    .panel-header h3 {
        margin: 0 0 3px;
        color: var(--tijarah-navy);
        font-size: 13px;
    }


    .panel-header p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 9px;
    }


    .panel-header > a {
        color: var(--tijarah-navy);
        font-size: 9px;
        font-weight: 800;
    }


/* EMPTY */

.empty-service,
.empty-transaction {
    min-height: 230px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.empty-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tijarah-yellow-soft);
    font-size: 23px;
}


.empty-service h3,
.empty-transaction h3 {
    margin: 12px 0 5px;
    color: var(--tijarah-navy);
    font-size: 13px;
}


.empty-service p,
.empty-transaction p {
    margin: 0 0 15px;
    color: var(--tijarah-muted);
    font-size: 9px;
}


/* ACCOUNT */

.account-data {
    padding: 10px 20px;
}


    .account-data > div {
        padding: 11px 0;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #f0f0f3;
    }


    .account-data span {
        margin-bottom: 3px;
        color: var(--tijarah-muted);
        font-size: 8px;
    }


    .account-data strong {
        color: var(--tijarah-navy);
        font-size: 10px;
    }


.edit-profile {
    display: block;
    padding: 15px 20px;
    color: var(--tijarah-navy);
    font-size: 9px;
    font-weight: 800;
}


/* TRANSACTION */

.transaction-panel {
    margin-top: 20px;
}


.empty-transaction {
    min-height: 150px;
}


    .empty-transaction > div {
        color: var(--tijarah-navy);
        font-size: 28px;
    }


/* RESPONSIVE */

@media (max-width: 1100px) {

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


@media (max-width: 850px) {

    .client-page {
        display: block;
    }

    .client-sidebar {
        display: none;
    }

    .client-main {
        width: 100%;
    }

    .client-header {
        padding: 0 20px;
    }

    .client-content {
        padding: 20px;
    }

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


@media (max-width: 600px) {

    .client-user-info,
    .user-arrow {
        display: none;
    }

    .dashboard-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-welcome {
        padding: 25px;
    }

    .welcome-decoration {
        display: none;
    }
}

/* =========================================================
   TIJARAH CHECKOUT
   ========================================================= */

.checkout-page {
    min-height: 100vh;
    background: #f7f8fc;
}

.checkout-header {
    height: 80px;
    background: white;
    border-bottom: 1px solid #e3e9e6;
}

.checkout-navbar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-brand {
    display: flex;
    align-items: center;
    color: var(--tijarah-navy);
}

    .checkout-brand img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        margin-right: 10px;
    }

    .checkout-brand div {
        display: flex;
        flex-direction: column;
    }

    .checkout-brand strong {
        font-size: 22px;
    }

    .checkout-brand span {
        font-size: 9px;
        font-weight: 600;
    }

.checkout-secure {
    padding: 9px 14px;
    border-radius: 8px;
    background: #f6f7fb;
    color: var(--tijarah-navy);
    font-size: 10px;
    font-weight: 700;
}


/* MAIN */

.checkout-main {
    padding: 45px 0 70px;
}

.checkout-container {
    max-width: 1180px;
}

.checkout-title {
    margin-bottom: 30px;
}

    .checkout-title h1 {
        margin: 12px 0 7px;
        color: var(--tijarah-navy);
        font-size: 32px;
    }

    .checkout-title p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 12px;
    }


/* GRID */

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 365px;
    gap: 25px;
    align-items: start;
}


/* CARD */

.checkout-left {
    display: grid;
    gap: 18px;
}

.checkout-card {
    overflow: hidden;
    background: white;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(34, 112, 90,.04);
}

.checkout-card-header {
    min-height: 75px;
    padding: 17px 22px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #eef0f4;
}

.checkout-number {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    font-size: 12px;
    font-weight: 900;
}

.checkout-card-header h2 {
    margin: 0 0 3px;
    color: var(--tijarah-navy);
    font-size: 14px;
}

.checkout-card-header p {
    margin: 0;
    color: var(--tijarah-muted);
    font-size: 9px;
}


/* CLIENT */

.checkout-client {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-avatar {
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tijarah-navy);
    color: white;
    font-weight: 900;
}

.checkout-client-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .checkout-client-info strong {
        color: var(--tijarah-navy);
        font-size: 12px;
    }

    .checkout-client-info span {
        margin-top: 3px;
        color: var(--tijarah-muted);
        font-size: 9px;
    }

.checkout-verified {
    padding: 6px 10px;
    border-radius: 20px;
    background: #e5f8ee;
    color: #15965b;
    font-size: 8px;
    font-weight: 800;
}


/* PACKAGE */

.checkout-package {
    padding: 22px;
}

.checkout-package-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.checkout-package-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkout-package-icon,
.summary-package-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--tijarah-yellow-soft);
    font-size: 21px;
}

.checkout-package-name span {
    color: var(--tijarah-muted);
    font-size: 8px;
    font-weight: 700;
}

.checkout-package-name h3 {
    margin: 2px 0 0;
    color: var(--tijarah-navy);
    font-size: 18px;
}

.checkout-package-top > a {
    color: var(--tijarah-navy);
    font-size: 9px;
    font-weight: 800;
}

.checkout-description {
    margin: 18px 0;
    color: var(--tijarah-muted);
    font-size: 10px;
    line-height: 1.6;
}

.checkout-feature-title {
    margin-bottom: 10px;
    color: var(--tijarah-navy);
    font-size: 10px;
    font-weight: 800;
}

.checkout-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

    .checkout-features div {
        color: #343851;
        font-size: 9px;
    }

    .checkout-features span {
        width: 19px;
        height: 19px;
        margin-right: 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow-soft);
        color: var(--tijarah-navy);
        font-size: 8px;
        font-weight: 900;
    }


/* SUBSCRIPTION */

.subscription-option {
    margin: 20px 22px;
    padding: 17px;
    display: flex;
    align-items: center;
    border: 1px solid #e3e9e6;
    border-radius: 10px;
}

    .subscription-option.active {
        border-color: var(--tijarah-yellow);
        background: #fffdf3;
    }

.radio-circle {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    padding: 4px;
    border: 2px solid var(--tijarah-yellow-dark);
    border-radius: 50%;
}

    .radio-circle span {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
        background: var(--tijarah-yellow-dark);
    }

.subscription-option > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

    .subscription-option > div:nth-child(2) strong {
        color: var(--tijarah-navy);
        font-size: 11px;
    }

    .subscription-option > div:nth-child(2) span {
        color: var(--tijarah-muted);
        font-size: 8px;
    }

.subscription-price {
    text-align: right;
}

    .subscription-price strong {
        display: block;
        color: var(--tijarah-navy);
        font-size: 12px;
    }

    .subscription-price span {
        color: var(--tijarah-muted);
        font-size: 8px;
    }


/* SUMMARY */

.checkout-summary {
    position: sticky;
    top: 20px;
}

.checkout-summary-card {
    padding: 23px;
    background: white;
    border: 1px solid #e3e9e6;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(34, 112, 90,.07);
}

    .checkout-summary-card > h2 {
        margin: 0 0 20px;
        color: var(--tijarah-navy);
        font-size: 16px;
    }

.summary-package {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .summary-package strong {
        display: block;
        color: var(--tijarah-navy);
        font-size: 12px;
    }

    .summary-package span {
        color: var(--tijarah-muted);
        font-size: 8px;
    }

.checkout-line {
    height: 1px;
    margin: 20px 0;
    background: #f5f7f6;
}

.checkout-price-row {
    margin: 11px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--tijarah-muted);
    font-size: 9px;
}

    .checkout-price-row strong {
        color: var(--tijarah-navy);
        font-size: 10px;
    }

    .checkout-price-row .free {
        color: #1aa164;
    }

.checkout-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .checkout-total > div {
        display: flex;
        flex-direction: column;
    }

    .checkout-total span {
        color: var(--tijarah-navy);
        font-size: 10px;
        font-weight: 800;
    }

    .checkout-total small {
        margin-top: 2px;
        color: var(--tijarah-muted);
        font-size: 8px;
    }

    .checkout-total > strong {
        color: var(--tijarah-navy);
        font-size: 20px;
    }

.checkout-button {
    width: 100%;
    height: 50px;
    margin-top: 22px;
    border: none;
    border-radius: 8px;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s;
}

    .checkout-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(34, 112, 90,.3);
    }

.checkout-security {
    margin-top: 14px;
    display: flex;
    gap: 7px;
    color: var(--tijarah-muted);
}

    .checkout-security p {
        margin: 0;
        font-size: 8px;
        line-height: 1.5;
    }

.checkout-help {
    margin-top: 13px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: var(--tijarah-navy);
    color: white;
}

    .checkout-help > div:first-child {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow);
    }

    .checkout-help strong {
        display: block;
        margin-bottom: 2px;
        font-size: 10px;
    }

    .checkout-help span {
        display: block;
        color: #eaf4ee;
        font-size: 8px;
    }


/* RESPONSIVE */

@media (max-width: 900px) {

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

    .checkout-summary {
        position: static;
    }
}

@media (max-width: 600px) {

    .checkout-main {
        padding-top: 30px;
    }

    .checkout-title h1 {
        font-size: 27px;
    }

    .checkout-features {
        grid-template-columns: 1fr;
    }

    .checkout-verified {
        display: none;
    }

    .subscription-option {
        align-items: flex-start;
    }
}

/* =========================================================
   TIJARAH INVOICE - MODERN
   ========================================================= */

.invoice-page {
    min-height: 100vh;
    background: radial-gradient( circle at 50% 0%, rgba(34, 112, 90, .05), transparent 25% ), #f7f8fc;
}


.invoice-main {
    padding: 25px 20px 60px;
}


.invoice-container {
    width: 100%;
    max-width: 1180px;
    margin: auto;
}


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

.invoice-success {
    padding: 0 0 30px;
    text-align: center;
}


.invoice-hourglass {
    width: 64px;
    height: 64px;
    margin: auto auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eaf1e5;
    font-size: 25px;
}


.invoice-waiting {
    color: #bd8500;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
}


.invoice-success h1 {
    margin: 10px 0 5px;
    color: var(--tijarah-navy);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
}


.invoice-success p {
    margin: 0;
    color: #343851;
    font-size: 12px;
}


/* =========================================================
   INVOICE CARD
   ========================================================= */

.invoice-card-modern {
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(34, 112, 90, .07);
}


/* HEADER */

.invoice-card-top {
    min-height: 95px;
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e3e9e6;
}


.invoice-label {
    display: block;
    margin-bottom: 4px;
    color: #343851;
    font-size: 9px;
    font-weight: 800;
}


.invoice-card-top h2 {
    margin: 0;
    color: var(--tijarah-navy);
    font-size: 23px;
    font-weight: 800;
}


.invoice-status-pending {
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 30px;
    background: #cce2bd;
    color: #a87000;
    font-size: 10px;
    font-weight: 900;
}


/* =========================================================
   META INFORMATION
   ========================================================= */

.invoice-meta {
    padding: 18px 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    border-bottom: 1px solid #e3e9e6;
    background: #fbfcff;
}


.invoice-meta-item {
    display: flex;
    align-items: center;
    gap: 13px;
}


.meta-icon {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 18px;
}


    .meta-icon.blue {
        background: #e3e9e6;
    }


    .meta-icon.purple {
        background: #e3e9e6;
        color: #5b608a;
    }


    .meta-icon.green {
        background: #ddf8ed;
        color: #009d68;
    }


.invoice-meta-item > div:last-child {
    display: flex;
    flex-direction: column;
}


.invoice-meta-item span {
    margin-bottom: 2px;
    color: #73838a;
    font-size: 9px;
}


.invoice-meta-item strong {
    color: var(--tijarah-navy);
    font-size: 11px;
}


.invoice-meta-item small {
    margin-top: 2px;
    color: #73838a;
    font-size: 9px;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.invoice-product {
    padding: 16px 20px 18px;
}


.invoice-product-header {
    min-height: 35px;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 2.4fr 1fr .6fr 1fr;
    align-items: center;
    border-radius: 7px;
    background: #f3f5f9;
    color: #343851;
    font-size: 9px;
    font-weight: 800;
}


.invoice-product-row {
    min-height: 68px;
    padding: 10px 15px;
    display: grid;
    grid-template-columns: 2.4fr 1fr .6fr 1fr;
    align-items: center;
    border-bottom: 1px solid #e3e9e6;
}


.invoice-product-name {
    display: flex;
    align-items: center;
    gap: 13px;
}


.product-box-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eaf1e5;
    color: #b47d00;
    font-size: 23px;
    font-weight: 900;
}


.invoice-product-name > div:last-child {
    display: flex;
    flex-direction: column;
}


.invoice-product-name strong {
    color: var(--tijarah-navy);
    font-size: 11px;
}


.invoice-product-name span {
    margin-top: 3px;
    color: #73838a;
    font-size: 9px;
}


.invoice-cell {
    color: #343851;
    font-size: 10px;
}


    .invoice-cell.strong {
        color: var(--tijarah-navy);
        font-weight: 800;
    }


/* =========================================================
   TOTAL
   ========================================================= */

.invoice-total-area {
    width: 405px;
    margin: 10px 0 0 auto;
}


.invoice-total-row {
    min-height: 34px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #343851;
    font-size: 10px;
}


    .invoice-total-row strong {
        color: var(--tijarah-navy);
    }


.invoice-grand-total {
    min-height: 48px;
    margin-top: 3px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 7px;
    background: linear-gradient( 90deg, #e3e9e6, #f5f7f6 );
    color: var(--tijarah-navy);
    font-size: 11px;
    font-weight: 800;
}


    .invoice-grand-total strong {
        font-size: 21px;
    }


/* =========================================================
   PAYMENT CARD
   ========================================================= */

.invoice-payment-card {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid #e3e9e6;
    border-radius: 15px;
    background: white;
    box-shadow: 0 10px 35px rgba(34, 112, 90,.05);
}


.payment-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}


.payment-heading-icon {
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cce2bd;
    color: #ad7900;
    font-size: 19px;
    font-weight: 900;
}


.payment-heading span {
    color: #b57c00;
    font-size: 8px;
    font-weight: 900;
}


.payment-heading h2 {
    margin: 2px 0;
    color: var(--tijarah-navy);
    font-size: 16px;
}


.payment-heading p {
    margin: 0;
    color: #343851;
    font-size: 9px;
}


/* PAYMENT OPTIONS */

.invoice-payment-options {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}


.invoice-payment-option {
    min-height: 62px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e3e9e6;
    border-radius: 9px;
    background: white;
}


.payment-option-icon {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 18px;
}


    .payment-option-icon.bank {
        background: #e3e9e6;
    }


    .payment-option-icon.qris {
        background: #dcf7e9;
        color: #069762;
    }


    .payment-option-icon.va {
        background: #e3e9e6;
        color: #5b608a;
    }


.payment-option-name {
    display: flex;
    flex-direction: column;
    flex: 1;
}


    .payment-option-name strong {
        color: var(--tijarah-navy);
        font-size: 10px;
    }


    .payment-option-name span {
        margin-top: 2px;
        color: #73838a;
        font-size: 8px;
    }


.payment-soon {
    padding: 5px 10px;
    border-radius: 20px;
    background: #f5f7f6;
    color: #343851;
    font-size: 7px;
    font-weight: 800;
}


/* INFO */

.payment-information {
    min-height: 50px;
    margin-top: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: linear-gradient( 90deg, #e3e9e6, #e3e9e6 );
}


.information-icon {
    min-width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #5b608a;
    color: white;
    font-family: Georgia, serif;
    font-size: 14px;
    font-weight: 900;
}


.payment-information > div:last-child {
    display: flex;
    flex-direction: column;
}


.payment-information strong {
    color: var(--tijarah-navy);
    font-size: 9px;
}


.payment-information span {
    margin-top: 2px;
    color: #343851;
    font-size: 8px;
}


/* =========================================================
   ACTION BUTTON
   ========================================================= */

.invoice-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.invoice-btn-back,
.invoice-btn-history {
    min-height: 38px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
    transition: .2s;
}


.invoice-btn-back {
    border: 1px solid #eaf4ee;
    color: #343851;
    background: white;
}


.invoice-btn-history {
    min-width: 185px;
    background: var(--tijarah-navy);
    color: white;
}


    .invoice-btn-back:hover,
    .invoice-btn-history:hover {
        transform: translateY(-2px);
    }


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

@media (max-width: 800px) {

    .invoice-meta {
        grid-template-columns: 1fr;
    }

    .invoice-payment-options {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .invoice-main {
        padding: 20px 12px 40px;
    }

    .invoice-success h1 {
        font-size: 27px;
    }

    .invoice-card-top {
        padding: 18px;
    }

        .invoice-card-top h2 {
            font-size: 17px;
        }

    .invoice-product-header {
        display: none;
    }

    .invoice-product-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .invoice-total-area {
        width: 100%;
    }

    .invoice-actions {
        flex-direction: column;
        gap: 10px;
    }

    .invoice-btn-back,
    .invoice-btn-history {
        width: 100%;
    }
}

/* =========================================================
   CLIENT TRANSACTIONS
   ========================================================= */

.transaction-title {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

    .transaction-title h2 {
        margin: 10px 0 4px;
        color: var(--tijarah-navy);
        font-size: 25px;
    }

    .transaction-title p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 10px;
    }

.transaction-buy-button {
    min-height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.transaction-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.transaction-summary-card {
    min-height: 100px;
    padding: 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #e3e9e6;
    border-radius: 12px;
    background: white;
    box-shadow: 0 5px 18px rgba(34, 112, 90, .04);
}

.transaction-summary-icon {
    min-width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: var(--tijarah-navy);
    font-size: 16px;
    font-weight: 900;
}

    .transaction-summary-icon.blue {
        background: #e3e9e6;
    }

    .transaction-summary-icon.yellow {
        background: #cce2bd;
    }

    .transaction-summary-icon.green {
        background: #dcf7e9;
        color: #119b62;
    }

    .transaction-summary-icon.purple {
        background: #e3e9e6;
        color: #5b608a;
    }

.transaction-summary-card > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.transaction-summary-card span {
    color: var(--tijarah-muted);
    font-size: 8px;
}

.transaction-summary-card strong {
    margin: 3px 0;
    color: var(--tijarah-navy);
    font-size: 20px;
}

.transaction-summary-card .transaction-money {
    font-size: 15px;
}

.transaction-summary-card small {
    color: #73838a;
    font-size: 8px;
}


/* =========================================================
   LIST CARD
   ========================================================= */

.transaction-list-card {
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 13px;
    background: white;
    box-shadow: 0 7px 25px rgba(34, 112, 90, .04);
}


/* TOOLBAR */

.transaction-toolbar {
    min-height: 82px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid #e3e9e6;
}

    .transaction-toolbar h3 {
        margin: 0 0 3px;
        color: var(--tijarah-navy);
        font-size: 13px;
    }

    .transaction-toolbar p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 8px;
    }

.transaction-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transaction-search {
    width: 220px;
    height: 37px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e3e9e6;
    border-radius: 7px;
    background: #fff;
}

    .transaction-search span {
        color: #73838a;
    }

    .transaction-search input {
        width: 100%;
        border: none;
        outline: none;
        background: transparent;
        color: var(--tijarah-navy);
        font-family: inherit;
        font-size: 9px;
    }

.transaction-filter select {
    height: 37px;
    padding: 0 28px 0 10px;
    border: 1px solid #e3e9e6;
    border-radius: 7px;
    outline: none;
    background: white;
    color: #343851;
    font-family: inherit;
    font-size: 9px;
}

.transaction-filter button {
    height: 37px;
    padding: 0 15px;
    border: none;
    border-radius: 7px;
    background: var(--tijarah-navy);
    color: white;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.reset-filter {
    color: var(--tijarah-navy);
    font-size: 8px;
    font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.transaction-table-header,
.transaction-table-row {
    display: grid;
    grid-template-columns: 1.65fr 1.2fr .9fr .85fr 1.1fr .55fr;
    gap: 12px;
    align-items: center;
}

.transaction-table-header {
    min-height: 38px;
    padding: 0 20px;
    background: #f5f7f6;
    color: #343851;
    font-size: 8px;
    font-weight: 800;
}

.transaction-table-row {
    min-height: 72px;
    padding: 10px 20px;
    border-bottom: 1px solid #eef0f4;
    transition: .15s;
}

    .transaction-table-row:last-child {
        border-bottom: none;
    }

    .transaction-table-row:hover {
        background: #fcfcfe;
    }


/* INVOICE */

.transaction-invoice {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.transaction-invoice-icon {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #eaf1e5;
    color: #a97700;
    font-size: 14px;
}

.transaction-invoice > div:last-child,
.transaction-package,
.transaction-date {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.transaction-invoice strong {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tijarah-navy);
    font-size: 9px;
}

.transaction-invoice span,
.transaction-package span,
.transaction-date span {
    margin-top: 3px;
    color: #73838a;
    font-size: 7px;
}


/* PACKAGE */

.transaction-package strong,
.transaction-date strong {
    color: #343851;
    font-size: 9px;
}


/* VALUE */

.transaction-value {
    color: var(--tijarah-navy);
    font-size: 10px;
    font-weight: 800;
}


/* STATUS */

.transaction-status {
    width: fit-content;
    padding: 6px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    font-size: 7px;
    font-weight: 800;
}

    .transaction-status.pending {
        background: #eaf1e5;
        color: #a67500;
    }

    .transaction-status.paid {
        background: #dcf7e9;
        color: #128c59;
    }

    .transaction-status.failed {
        background: #ffe3e1;
        color: #c44940;
    }

    .transaction-status.cancelled {
        background: #eeeeF3;
        color: #343851;
    }


/* ACTION */

.transaction-action {
    text-align: right;
}

    .transaction-action a {
        color: var(--tijarah-navy);
        font-size: 8px;
        font-weight: 800;
    }


/* =========================================================
   EMPTY
   ========================================================= */

.transaction-empty {
    min-height: 300px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .transaction-empty > div {
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow-soft);
        color: var(--tijarah-navy);
        font-size: 22px;
    }

    .transaction-empty h3 {
        margin: 13px 0 5px;
        color: var(--tijarah-navy);
        font-size: 14px;
    }

    .transaction-empty p {
        max-width: 330px;
        margin: 0 0 16px;
        color: var(--tijarah-muted);
        font-size: 9px;
        line-height: 1.6;
    }


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

@media (max-width: 1100px) {

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

    .transaction-list-card {
        overflow-x: auto;
    }

    .transaction-toolbar,
    .transaction-table-header,
    .transaction-table-body {
        min-width: 900px;
    }
}

@media (max-width: 650px) {

    .transaction-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .transaction-summary-grid {
        grid-template-columns: 1fr;
    }

    .transaction-buy-button {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   TIJARAH - ABOUT PAGE
   ========================================================= */

.about-page {
    background: #fff;
    color: var(--tijarah-text);
}

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

/* HERO */

.about-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 78% 32%, rgba(34, 112, 90, .18), transparent 28%), linear-gradient(115deg, #fffdf0 0%, #fff 48%, #f5f7f6 100%);
}

.about-hero-content {
    min-height: 540px;
    display: grid;
    grid-template-columns: 1fr .9fr;
    align-items: center;
    gap: 65px;
}

.about-badge,
.about-section-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 30px;
    background: var(--tijarah-yellow-soft);
    color: var(--tijarah-navy);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.about-hero-text h1 {
    margin: 20px 0;
    max-width: 610px;
    color: var(--tijarah-navy);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.13;
    letter-spacing: -1.8px;
}

    .about-hero-text h1 span,
    .about-intro-content h2 span {
        color: #cce2bd;
    }

.about-hero-text > p {
    max-width: 560px;
    color: var(--tijarah-muted);
    font-size: 15px;
    line-height: 1.8;
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.about-btn-primary,
.about-btn-outline {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 23px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    transition: transform .2s ease;
}

    .about-btn-primary:hover,
    .about-btn-outline:hover {
        transform: translateY(-2px);
    }

.about-btn-primary {
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
}

.about-btn-outline {
    border: 1px solid #eaf4ee;
    background: #fff;
    color: var(--tijarah-navy);
}

/* HERO VISUAL */

.about-hero-visual {
    min-height: 390px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-visual-circle {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: #cce2bd;
    opacity: .6;
}

.about-product-card {
    position: relative;
    z-index: 2;
    width: min(330px, 100%);
    padding: 30px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    background: linear-gradient(145deg, #343851, #343851);
    color: #fff;
    box-shadow: 0 28px 60px rgba(34, 112, 90,.25);
    transform: rotate(-3deg);
}

.about-product-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 15px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

    .about-product-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.about-product-card h2 {
    margin: 0;
    font-size: 32px;
}

.about-product-card > p {
    margin: 5px 0 0;
    color: #e3e9e6;
    font-size: 12px;
}

.about-product-divider {
    height: 1px;
    margin: 22px 0;
    background: rgba(255,255,255,.18);
}

.about-product-features {
    display: grid;
    gap: 12px;
}

    .about-product-features div {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
    }

    .about-product-features span {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow);
        color: var(--tijarah-navy);
        font-weight: 900;
    }

.about-floating-label {
    position: absolute;
    z-index: 3;
    right: -5px;
    bottom: 25px;
    padding: 13px 18px;
    border-radius: 10px;
    background: #fff;
    color: var(--tijarah-navy);
    box-shadow: var(--shadow);
    font-size: 11px;
    font-weight: 800;
}

/* INTRODUCTION */

.about-introduction {
    padding: 95px 0;
}

.about-intro-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 90px;
}

.about-intro-visual {
    min-height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: linear-gradient(140deg, #eaf1e5, #f5f7f6);
}

.about-intro-panel {
    width: min(350px, calc(100% - 40px));
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 60px rgba(34, 112, 90,.15);
}

.about-intro-panel-top {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    background: var(--tijarah-navy);
}

.about-panel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tijarah-yellow);
}

.about-intro-panel-top strong {
    margin-left: auto;
    color: #fff;
    font-size: 9px;
    letter-spacing: .5px;
}

.about-intro-panel-body {
    padding: 27px;
    text-align: center;
}

.about-intro-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--tijarah-yellow-soft);
    font-size: 28px;
}

.about-intro-panel-body h3 {
    margin: 0 0 8px;
    color: var(--tijarah-navy);
    font-size: 19px;
}

.about-intro-panel-body p {
    color: var(--tijarah-muted);
    font-size: 11px;
    line-height: 1.6;
}

.about-intro-progress {
    height: 7px;
    margin: 20px 0;
    border-radius: 20px;
    background: #f5f7f6;
}

    .about-intro-progress span {
        width: 75%;
        height: 100%;
        display: block;
        border-radius: inherit;
        background: var(--tijarah-yellow);
    }

.about-intro-mini-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

    .about-intro-mini-cards div {
        padding: 12px 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        border-radius: 8px;
        background: #f5f7f6;
    }

    .about-intro-mini-cards strong {
        color: var(--tijarah-navy);
        font-size: 11px;
    }

    .about-intro-mini-cards span {
        color: var(--tijarah-muted);
        font-size: 9px;
    }

.about-intro-content h2 {
    margin: 17px 0;
    color: var(--tijarah-navy);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.2;
}

.about-intro-content > p {
    color: var(--tijarah-muted);
    font-size: 13px;
    line-height: 1.9;
}

.about-intro-highlights {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

    .about-intro-highlights div {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .about-intro-highlights span {
        width: 23px;
        height: 23px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--tijarah-yellow-soft);
        color: var(--tijarah-navy);
        font-size: 11px;
        font-weight: 900;
    }

    .about-intro-highlights strong {
        color: var(--tijarah-navy);
        font-size: 12px;
    }

/* VISION */

.about-vision {
    padding: 85px 0;
    background: #f7f8fc;
}

.about-section-heading {
    max-width: 680px;
    margin: 0 auto 35px;
    text-align: center;
}

    .about-section-heading h2 {
        margin: 13px 0 9px;
        color: var(--tijarah-navy);
        font-size: clamp(27px, 3vw, 37px);
    }

    .about-section-heading p {
        margin: 0;
        color: var(--tijarah-muted);
        font-size: 13px;
        line-height: 1.7;
    }

.about-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.about-vision-card {
    padding: 30px;
    border: 1px solid #e3e9e6;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow);
}

.about-vision-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tijarah-yellow-soft);
    color: var(--tijarah-navy);
    font-size: 28px;
}

.about-vision-card > span {
    color: #bd9000;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.about-vision-card h3 {
    margin: 9px 0;
    color: var(--tijarah-navy);
    font-size: 20px;
}

.about-vision-card p {
    margin: 0;
    color: var(--tijarah-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* BENEFITS */

.about-benefits {
    padding: 85px 0;
}

.about-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.about-benefit-card {
    padding: 24px;
    border: 1px solid #e3e9e6;
    border-radius: 13px;
    background: #fff;
    box-shadow: var(--shadow);
}

.about-benefit-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 22px;
}

    .about-benefit-icon.yellow {
        background: #cce2bd;
    }

    .about-benefit-icon.blue {
        background: #e3e9e6;
    }

    .about-benefit-icon.purple {
        background: #e3e9e6;
    }

    .about-benefit-icon.green {
        background: #def6e9;
    }

.about-benefit-card h3 {
    margin: 0 0 9px;
    color: var(--tijarah-navy);
    font-size: 15px;
}

.about-benefit-card p {
    margin: 0;
    color: var(--tijarah-muted);
    font-size: 11px;
    line-height: 1.7;
}

/* DEVELOPER */

.about-developer {
    padding: 75px 0;
    background: linear-gradient(110deg, #343851, #343851);
    color: #fff;
}

.about-developer-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 70px;
}

.about-developer-label {
    color: var(--tijarah-yellow);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.about-developer h2 {
    margin: 14px 0;
    font-size: clamp(28px, 3vw, 40px);
}

    .about-developer h2 span {
        color: var(--tijarah-yellow);
    }

.about-developer p {
    max-width: 570px;
    color: #e3e9e6;
    font-size: 12px;
    line-height: 1.9;
}

.about-developer-button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 0 19px;
    border-radius: 8px;
    background: var(--tijarah-yellow);
    color: var(--tijarah-navy);
    font-size: 11px;
    font-weight: 800;
}

.about-developer-visual {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 20px;
    background: rgba(255,255,255,.06);
}

.about-developer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--tijarah-yellow);
    letter-spacing: 5px;
}

    .about-developer-logo span {
        font-size: 45px;
        font-weight: 900;
    }

    .about-developer-logo strong {
        color: #fff;
        font-size: 22px;
        letter-spacing: 9px;
    }

.about-developer-caption {
    color: #e3e9e6;
    font-size: 10px;
}

/* CTA */

.about-cta {
    padding: 60px 0;
    background: #eaf1e5;
}

.about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

    .about-cta-inner > div > span {
        color: #aa8000;
        font-size: 10px;
        font-weight: 900;
    }

.about-cta h2 {
    margin: 9px 0;
    color: var(--tijarah-navy);
    font-size: clamp(25px, 3vw, 34px);
}

.about-cta p {
    margin: 0;
    color: var(--tijarah-muted);
    font-size: 12px;
}

.about-cta-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 23px;
    border-radius: 9px;
    background: var(--tijarah-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

/* RESPONSIVE */

@media (max-width: 950px) {
    .about-hero-content,
    .about-intro-grid,
    .about-developer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .about-hero-content {
        padding-top: 65px;
        padding-bottom: 50px;
    }

    .about-intro-grid .about-intro-visual {
        order: 2;
    }

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

@media (max-width: 650px) {
    .about-page .container {
        width: calc(100% - 28px);
    }

    .about-hero-text h1 {
        font-size: 37px;
    }

    .about-hero-visual {
        min-height: 360px;
    }

    .about-floating-label {
        right: 0;
        bottom: 0;
    }

    .about-introduction,
    .about-vision,
    .about-benefits,
    .about-developer {
        padding: 55px 0;
    }

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

    .about-cta-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .about-cta-button {
        width: 100%;
    }
}

/* =========================================================
   ABOUT - AMZA STUDIO DEVELOPER
   ========================================================= */

.about-developer-amza {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
    background: radial-gradient( circle at 75% 40%, #343851 0%, transparent 36% ), linear-gradient( 120deg, #343851 0%, #343851 100% );
    color: #fff;
}

.about-amza-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
}

/* =========================================================
   CONTENT
   ========================================================= */

.about-amza-label {
    color: #cce2bd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.about-amza-content h2 {
    max-width: 540px;
    margin: 20px 0;
    color: #fff;
    font-size: clamp(34px, 3.5vw, 48px);
    font-weight: 800;
    line-height: 1.15;
}

    .about-amza-content h2 span {
        display: block;
        color: #cce2bd;
    }

.about-amza-content > p {
    max-width: 550px;
    margin-bottom: 16px;
    color: #e3e9e6;
    font-size: 15px;
    line-height: 1.7;
}

/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.about-amza-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 28px 0;
}

.about-amza-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-amza-highlight-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.about-amza-highlight > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.about-amza-highlight span {
    color: #e3e9e6;
    font-size: 11px;
}

.about-amza-highlight strong {
    color: #fff;
    font-size: 12px;
}

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

.about-amza-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    border-radius: 12px;
    background: #cce2bd;
    color: #343851;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s ease;
}

    .about-amza-button:hover {
        background: #cce2bd;
        color: #343851;
        transform: translateY(-2px);
    }

/* =========================================================
   LOGO VISUAL
   ========================================================= */

.about-amza-visual {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-amza-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

    .about-amza-circle.circle-one {
        width: 440px;
        height: 440px;
        background: rgba(79, 124, 190, .13);
    }

    .about-amza-circle.circle-two {
        width: 350px;
        height: 350px;
        background: rgba(98, 147, 210, .13);
    }

/* LOGO CARD */

.about-amza-logo-card {
    position: relative;
    z-index: 2;
    width: 310px;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 34px;
    background: #5b608a;
    box-shadow: 0 25px 65px rgba(0, 0, 0, .2);
}

.about-amza-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* FLOATING TEXT */

.about-amza-visual-caption {
    position: absolute;
    z-index: 3;
    top: 95px;
    right: -20px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.5;
    transform: rotate(-8deg);
}

.about-amza-quote {
    position: absolute;
    z-index: 3;
    right: -15px;
    bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px 20px;
    border-radius: 15px;
    background: rgba(76, 115, 186, .35);
    backdrop-filter: blur(10px);
}

    .about-amza-quote > span {
        color: #fff;
        font-size: 32px;
        line-height: 1;
    }

    .about-amza-quote p {
        margin: 0;
        color: #fff;
        font-size: 12px;
        line-height: 1.5;
    }

/* =========================================================
   AMZA STUDIO VALUES
   ========================================================= */

.about-amza-values {
    padding: 75px 0 60px;
    background: #fbfcff;
}

.about-amza-values-heading {
    margin-bottom: 35px;
    text-align: center;
}

    .about-amza-values-heading > span {
        color: #cce2bd;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .about-amza-values-heading h2 {
        margin: 12px 0 8px;
        color: #343851;
        font-size: clamp(27px, 3vw, 38px);
        font-weight: 800;
    }

    .about-amza-values-heading p {
        margin: 0;
        color: #343851;
        font-size: 13px;
    }

/* VALUE CARDS */

.about-amza-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.about-amza-value-card {
    min-height: 135px;
    padding: 20px 17px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid #e3e9e6;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(20, 38, 83, .04);
}

.about-amza-value-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 21px;
}

    .about-amza-value-icon.yellow {
        background: #eaf1e5;
        color: #cce2bd;
    }

    .about-amza-value-icon.blue {
        background: #e3e9e6;
        color: #5b608a;
    }

    .about-amza-value-icon.green {
        background: #def8e9;
        color: #139a5a;
    }

    .about-amza-value-icon.purple {
        background: #e3e9e6;
        color: #5b608a;
    }

.about-amza-value-card h3 {
    margin: 4px 0 7px;
    color: #343851;
    font-size: 12px;
    font-weight: 800;
}

.about-amza-value-card p {
    margin: 0;
    color: #343851;
    font-size: 11px;
    line-height: 1.6;
}

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

.about-amza-values-cta {
    min-height: 100px;
    margin-top: 22px;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-radius: 15px;
    background: linear-gradient( 100deg, #eaf1e5, #fff9e8 );
}

    .about-amza-values-cta h3 {
        margin: 0 0 6px;
        color: #343851;
        font-size: 16px;
    }

    .about-amza-values-cta p {
        margin: 0;
        color: #343851;
        font-size: 11px;
        line-height: 1.6;
    }

    .about-amza-values-cta a {
        min-height: 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0 22px;
        border-radius: 25px;
        background: #343851;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        text-decoration: none;
    }

        .about-amza-values-cta a:hover {
            background: #343851;
            color: #fff;
        }

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

@media (max-width: 1100px) {

    .about-amza-grid {
        gap: 30px;
    }

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

    .about-amza-visual-caption {
        right: 0;
    }

    .about-amza-quote {
        right: 0;
    }
}

@media (max-width: 800px) {

    .about-amza-grid {
        grid-template-columns: 1fr;
    }

    .about-amza-visual {
        min-height: 390px;
    }

    .about-amza-content h2 {
        font-size: 36px;
    }

    .about-amza-visual-caption {
        right: 5%;
    }

    .about-amza-quote {
        right: 5%;
    }
}

@media (max-width: 600px) {

    .about-developer-amza {
        padding: 55px 0;
    }

    .about-amza-content h2 {
        font-size: 32px;
    }

    .about-amza-content > p {
        font-size: 13px;
    }

    .about-amza-highlights {
        flex-direction: column;
        gap: 14px;
    }

    .about-amza-visual {
        min-height: 330px;
    }

    .about-amza-circle.circle-one {
        width: 300px;
        height: 300px;
    }

    .about-amza-circle.circle-two {
        width: 260px;
        height: 260px;
    }

    .about-amza-logo-card {
        width: 230px;
        height: 230px;
        border-radius: 25px;
    }

    .about-amza-visual-caption {
        top: 0;
        right: 0;
        font-size: 11px;
    }

    .about-amza-quote {
        right: 0;
        bottom: 0;
        padding: 12px;
    }

        .about-amza-quote p {
            font-size: 10px;
        }

    .about-amza-values {
        padding: 55px 0;
    }

    .about-amza-values-grid {
        grid-template-columns: 1fr;
    }

    .about-amza-values-cta {
        flex-direction: column;
        align-items: flex-start;
    }

        .about-amza-values-cta a {
            width: 100%;
        }
}
/* =========================================================
   FAQ PAGE
   ========================================================= */

.faq-page {
    background: #fff;
    color: #343851;
}

.faq-container {
    width: min(1080px, calc(100% - 40px));
    margin: 0 auto;
}

/* HERO */

.faq-hero {
    padding: 85px 20px 75px;
    text-align: center;
    background: radial-gradient( circle at 50% 0%, rgba(34, 112, 90, .23), transparent 42% ), linear-gradient( 180deg, #fffdf4 0%, #f5f7f6 100% );
}

.faq-hero-badge {
    display: inline-flex;
    padding: 9px 17px;
    border-radius: 30px;
    background: #cce2bd;
    color: #9a7100;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.faq-hero h1 {
    margin: 22px 0 14px;
    color: #343851;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.2;
}

    .faq-hero h1 span {
        display: block;
        color: #cce2bd;
    }

.faq-hero p {
    max-width: 630px;
    margin: 0 auto;
    color: #343851;
    font-size: 14px;
    line-height: 1.8;
}

/* SEARCH */

.faq-search-box {
    width: min(580px, 100%);
    height: 55px;
    margin: 30px auto 0;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e3e9e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(23,43,89,.07);
}

    .faq-search-box span {
        color: #73838a;
        font-size: 26px;
    }

    .faq-search-box input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #343851;
        font: inherit;
        font-size: 13px;
    }

        .faq-search-box input::placeholder {
            color: #73838a;
        }

/* CONTENT */

.faq-content {
    padding: 75px 0 85px;
}

.faq-content-heading {
    max-width: 670px;
    margin: 0 auto 30px;
    text-align: center;
}

    .faq-content-heading > span {
        color: #bb8b00;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .faq-content-heading h2 {
        margin: 12px 0 10px;
        color: #343851;
        font-size: clamp(26px, 3vw, 35px);
        font-weight: 800;
    }

    .faq-content-heading p {
        margin: 0;
        color: #343851;
        font-size: 13px;
        line-height: 1.7;
    }

/* CATEGORIES */

.faq-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.faq-category {
    min-height: 39px;
    padding: 0 18px;
    border: 1px solid #e3e9e6;
    border-radius: 25px;
    background: #fff;
    color: #343851;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

    .faq-category:hover {
        border-color: #cce2bd;
        color: #343851;
    }

    .faq-category.active {
        border-color: #cce2bd;
        background: #cce2bd;
        color: #343851;
    }

/* ACCORDION */

.faq-list {
    max-width: 850px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.faq-item {
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(23,43,89,.035);
    transition: border-color .2s, box-shadow .2s;
}

    .faq-item:hover {
        border-color: #eaf4ee;
    }

    .faq-item.is-open {
        border-color: #cce2bd;
        box-shadow: 0 9px 25px rgba(23,43,89,.07);
    }

.faq-question {
    width: 100%;
    min-height: 67px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 17px;
    border: 0;
    background: transparent;
    color: #343851;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.faq-number {
    flex-shrink: 0;
    color: #cce2bd;
    font-size: 11px;
    font-weight: 900;
}

.faq-question-text {
    flex: 1;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

.faq-chevron {
    width: 29px;
    height: 29px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f7f6;
    color: #343851;
    font-size: 21px;
    font-weight: 400;
    transition: background .2s;
}

.faq-item.is-open .faq-chevron {
    background: #cce2bd;
}

.faq-answer {
    padding: 0 23px 20px 50px;
}

    .faq-answer p {
        margin: 0 0 10px;
        color: #343851;
        font-size: 12px;
        line-height: 1.9;
    }

        .faq-answer p:last-child {
            margin-bottom: 0;
        }

    .faq-answer a {
        color: #343851;
        font-weight: 800;
        text-decoration: underline;
    }

/* EMPTY */

.faq-empty {
    max-width: 850px;
    margin: 0 auto;
    padding: 45px 20px;
    text-align: center;
}

.faq-empty-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cce2bd;
    color: #343851;
    font-size: 25px;
    font-weight: 900;
}

.faq-empty h3 {
    margin: 0 0 8px;
    color: #343851;
    font-size: 17px;
}

.faq-empty p {
    margin: 0;
    color: #343851;
    font-size: 12px;
}

/* CONTACT */

.faq-contact {
    padding: 0 0 80px;
    background: #fff;
}

.faq-contact-card {
    padding: 30px 35px;
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 17px;
    background: linear-gradient(110deg, #343851, #343851);
    color: #fff;
}

.faq-contact-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    font-size: 26px;
}

.faq-contact-text {
    flex: 1;
}

    .faq-contact-text > span {
        color: #cce2bd;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .8px;
    }

    .faq-contact-text h2 {
        margin: 6px 0;
        color: #fff;
        font-size: 23px;
    }

    .faq-contact-text p {
        max-width: 530px;
        margin: 0;
        color: #e3e9e6;
        font-size: 12px;
        line-height: 1.7;
    }

.faq-contact-button {
    min-height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-radius: 9px;
    background: #cce2bd;
    color: #343851;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

    .faq-contact-button:hover {
        background: #cce2bd;
        color: #343851;
    }

/* RESPONSIVE */

@media (max-width: 768px) {
    .faq-hero {
        padding: 60px 12px;
    }

    .faq-content {
        padding: 55px 0;
    }

    .faq-contact-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }

    .faq-contact-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .faq-container {
        width: calc(100% - 28px);
    }

    .faq-question {
        padding: 14px;
        gap: 10px;
    }

    .faq-question-text {
        font-size: 12px;
    }

    .faq-answer {
        padding: 0 15px 17px 37px;
    }

    .faq-category {
        padding: 0 12px;
        font-size: 10px;
    }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-page {
    background: #fff;
    color: #343851;
}

.contact-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

/* HERO */

.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 95px;
    background: radial-gradient( circle at 80% 15%, rgba(34, 112, 90, .13), transparent 35% ), linear-gradient(120deg, #343851, #343851);
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.contact-badge {
    display: inline-flex;
    padding: 8px 16px;
    border: 1px solid rgba(34, 112, 90, .4);
    border-radius: 30px;
    background: rgba(34, 112, 90, .12);
    color: #cce2bd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.contact-hero h1 {
    margin: 22px 0 15px;
    color: #fff;
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.2;
}

    .contact-hero h1 span {
        display: block;
        color: #cce2bd;
    }

.contact-hero p {
    max-width: 630px;
    margin: 0 auto;
    color: #e3e9e6;
    font-size: 14px;
    line-height: 1.8;
}

/* CONTENT */

.contact-section {
    padding: 75px 0 90px;
    background: #f5f7f6;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: start;
    gap: 55px;
}

.contact-section-label,
.contact-form-heading > span {
    color: #b88a00;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.contact-info h2 {
    margin: 14px 0 15px;
    color: #343851;
    font-size: clamp(28px, 3vw, 37px);
    font-weight: 800;
    line-height: 1.2;
}

    .contact-info h2 span {
        display: block;
        color: #cce2bd;
    }

.contact-info-description {
    max-width: 440px;
    margin-bottom: 28px;
    color: #343851;
    font-size: 13px;
    line-height: 1.9;
}

/* INFO ITEMS */

.contact-info-list {
    display: grid;
    gap: 15px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px;
    border: 1px solid #e3e9e6;
    border-radius: 13px;
    background: #fff;
}

.contact-info-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #eaf1e5;
    color: #343851;
    font-size: 22px;
}

.contact-info-item h3 {
    margin: 2px 0 6px;
    color: #343851;
    font-size: 13px;
    font-weight: 800;
}

.contact-info-item p,
.contact-info-item a {
    margin: 0;
    color: #343851;
    font-size: 12px;
    line-height: 1.7;
}

.contact-info-item a {
    color: #343851;
    font-weight: 700;
    text-decoration: none;
}

    .contact-info-item a:hover {
        text-decoration: underline;
    }

/* QUICK LINKS */

.contact-info-note {
    margin-top: 24px;
    padding: 22px;
    border-radius: 14px;
    background: #eaf1e5;
}

    .contact-info-note strong {
        color: #343851;
        font-size: 14px;
    }

    .contact-info-note p {
        margin: 8px 0 15px;
        color: #343851;
        font-size: 12px;
        line-height: 1.7;
    }

.contact-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    .contact-quick-links a {
        color: #343851;
        font-size: 12px;
        font-weight: 800;
        text-decoration: none;
    }

        .contact-quick-links a:hover {
            text-decoration: underline;
        }

/* FORM CARD */

.contact-form-card {
    padding: 34px;
    border: 1px solid #e3e9e6;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(23, 43, 89, .07);
}

.contact-form-heading {
    margin-bottom: 25px;
}

    .contact-form-heading h2 {
        margin: 10px 0 7px;
        color: #343851;
        font-size: 28px;
        font-weight: 800;
    }

    .contact-form-heading p {
        margin: 0;
        color: #343851;
        font-size: 12px;
        line-height: 1.7;
    }

/* FORM FIELDS */

.contact-form {
    display: grid;
    gap: 18px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .contact-field label {
        color: #343851;
        font-size: 12px;
        font-weight: 800;
    }

    .contact-field input,
    .contact-field textarea {
        width: 100%;
        padding: 13px 14px;
        border: 1px solid #e3e9e6;
        border-radius: 9px;
        outline: none;
        background: #fff;
        color: #343851;
        font: inherit;
        font-size: 12px;
        transition: border-color .2s, box-shadow .2s;
    }

    .contact-field textarea {
        min-height: 140px;
        resize: vertical;
    }

        .contact-field input:focus,
        .contact-field textarea:focus {
            border-color: #cce2bd;
            box-shadow: 0 0 0 3px rgba(34, 112, 90, .16);
        }

        .contact-field input::placeholder,
        .contact-field textarea::placeholder {
            color: #73838a;
        }

.contact-field-error,
.contact-validation-summary {
    color: #bd3030;
    font-size: 11px;
}

    .contact-validation-summary:empty {
        display: none;
    }

.contact-alert-success {
    margin-bottom: 20px;
    padding: 13px 15px;
    border: 1px solid #b8e7ca;
    border-radius: 9px;
    background: #eaf9f0;
    color: #17663a;
    font-size: 12px;
    line-height: 1.6;
}

/* SUBMIT */

.contact-submit-button {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 9px;
    background: #cce2bd;
    color: #343851;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

    .contact-submit-button:hover {
        background: #cce2bd;
        transform: translateY(-1px);
    }

.contact-form-note {
    margin: -4px 0 0;
    color: #73838a;
    font-size: 11px;
    line-height: 1.7;
    text-align: center;
}

/* RESPONSIVE */

@media (max-width: 850px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 600px) {
    .contact-container {
        width: calc(100% - 28px);
    }

    .contact-hero {
        padding: 60px 0 70px;
    }

    .contact-section {
        padding: 45px 0 65px;
    }

    .contact-form-card {
        padding: 22px 17px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
    }
}

/* NAVBAR DESKTOP */

.tijarah-public-header {
    position: relative;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #e3e9e6;
}

.tijarah-public-nav {
    width: min(1280px, calc(100% - 32px));    
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    
}

.tijarah-public-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #343851;
    font-weight: 800;
    text-decoration: none;
}

    .tijarah-public-brand img {
        width: 50px;
        height: 42px;
        object-fit: contain;
    }

.tijarah-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .tijarah-nav-links a {
        color: #343851;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .tijarah-nav-links .tijarah-nav-button {
        padding: 10px 18px;
        border-radius: 9px;
        background: #cce2bd;
    }

.tijarah-nav-toggle {
    display: none;
}

/* NAVBAR HP */

@media (max-width: 768px) {

    .tijarah-public-nav {
        min-height: 66px;
        flex-wrap: wrap;
        gap: 0;
    }

    .tijarah-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        border: 1px solid #e3e9e6;
        border-radius: 9px;
        background: #fff;
        color: #343851;
        font-size: 23px;
        cursor: pointer;
    }

    .tijarah-nav-links {
        display: none;
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 0 18px;
        background: #fff;
    }

        .tijarah-nav-links.is-open {
            display: flex;
        }

        .tijarah-nav-links a {
            display: block;
            padding: 13px 12px;
            border-radius: 8px;
        }

            .tijarah-nav-links a:hover {
                background: #f5f7f6;
            }

        .tijarah-nav-links .tijarah-nav-button {
            margin-top: 10px;
            text-align: center;
            background: #cce2bd;
        }
}

/* LOGOUT NAVBAR */

.tijarah-logout-form {
    margin: 0;
}

.tijarah-logout-button {
    min-height: 39px;
    padding: 0 18px;
    border: 1px solid #e6c8c8;
    border-radius: 9px;
    background: #fff1f1;
    color: #b42323;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease;
}

    .tijarah-logout-button:hover {
        background: #ffe0e0;
    }

/* TAMPILAN HP */

@media (max-width: 768px) {
    .tijarah-logout-form {
        width: 100%;
        margin-top: 10px;
    }

    .tijarah-logout-button {
        display: block;
        width: 100%;
        min-height: 43px;
        text-align: center;
    }
}
/* LOGOUT DI SIDEBAR CLIENT */

.client-sidebar-logout-form {
    width: 100%;
    margin: 0;
}

.client-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #d94a4a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease;
}

    .client-sidebar-logout:hover {
        background: #fff0f0;
        color: #b42323;
    }

/* Navbar dan hero memakai lebar kontainer yang sama */
.tijarah-public-nav,
.hero > .container {
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Hilangkan padding tambahan yang bisa menggeser isi navbar */
.tijarah-public-nav {
    padding-left: 0;
    padding-right: 0;
}

/* Pastikan isi hero dimulai dari sisi kiri kontainer */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
}

.hero-content {
    min-width: 0;
}

/* Tampilan HP */
@media (max-width: 900px) {
    .tijarah-public-nav,
    .hero > .container {
        width: calc(100% - 32px);
    }

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

/* =========================================================
   HALAMAN SEMUA FITUR
   ========================================================= */

.features-page {
    color: #343851;
    background: #fff;
}

.features-hero {
    padding: 85px 0;
    text-align: center;
    background: linear-gradient(135deg, #fffdf0, #f5f7f6);
}

.features-eyebrow,
.features-heading > span {
    display: inline-block;
    color: #b58a00;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
}

.features-hero h1 {
    max-width: 780px;
    margin: 18px auto;
    color: #343851;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 900;
    line-height: 1.2;
}

    .features-hero h1 span {
        color: #cce2bd;
    }

.features-hero p {
    max-width: 650px;
    margin: 0 auto;
    color: #343851;
    font-size: 15px;
    line-height: 1.8;
}

.features-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 28px;
    padding: 0 25px;
    border-radius: 10px;
    background: #cce2bd;
    color: #343851;
    font-weight: 800;
    text-decoration: none;
}

    .features-hero-button:hover {
        background: #cce2bd;
        color: #343851;
    }

.features-section {
    padding: 80px 0;
}

.features-heading {
    margin-bottom: 35px;
    text-align: center;
}

    .features-heading h2 {
        margin: 12px 0;
        color: #343851;
        font-size: clamp(27px, 3vw, 38px);
        font-weight: 900;
    }

    .features-heading p {
        color: #343851;
        font-size: 14px;
    }

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

.features-card {
    padding: 28px;
    border: 1px solid #e3e9e6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(23, 43, 89, .04);
    transition: transform .2s, box-shadow .2s;
}

    .features-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(23, 43, 89, .09);
    }

.features-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 13px;
    background: #eaf1e5;
    color: #343851;
    font-size: 26px;
    font-weight: 800;
}

.features-card h3 {
    margin: 0 0 10px;
    color: #343851;
    font-size: 18px;
    font-weight: 800;
}

.features-card p {
    margin: 0;
    color: #343851;
    font-size: 13px;
    line-height: 1.8;
}

.features-cta {
    padding: 0 0 80px;
}

.features-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 35px;
    border-radius: 18px;
    background: #343851;
}

    .features-cta-inner span {
        color: #cce2bd;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 1px;
    }

    .features-cta-inner h2 {
        margin: 10px 0;
        color: #fff;
        font-size: 25px;
        font-weight: 800;
    }

    .features-cta-inner p {
        margin: 0;
        color: #e3e9e6;
        font-size: 13px;
    }

    .features-cta-inner > a {
        flex-shrink: 0;
        padding: 14px 22px;
        border-radius: 10px;
        background: #cce2bd;
        color: #343851;
        font-size: 13px;
        font-weight: 800;
        text-decoration: none;
    }

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .features-hero {
        padding: 60px 0;
    }

    .features-section {
        padding: 55px 0;
    }

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

    .features-cta-inner {
        padding: 25px;
    }

        .features-cta-inner > a {
            width: 100%;
            text-align: center;
        }
}

/* =========================================================
   HERO - PERBAIKAN POSISI TEKS DAN MOCKUP
   ========================================================= */

.hero-grid > .hero-content,
.hero-grid > .hero-visual {
    min-width: 0;
}

/* Area visual kanan */
.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* Teks: Satu Aplikasi untuk Semua... */
.hero-visual-heading {
    position: relative;
    z-index: 2;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width: max-content;
    max-width: 100%;
    margin: 0 20px 28px 0;
    color: #343851;
    font-size: clamp(17px, 1.7vw, 26px);
    font-weight: 800;
    font-style: italic;
    line-height: 1.25;
    text-align: left;
    transform: rotate(-5deg);
}

    /* Garis kuning di bawah teks */
    .hero-visual-heading::after {
        content: "";
        display: block;
        width: 100%;
        height: 4px;
        margin-top: 8px;
        border-radius: 5px;
        background: #cce2bd;
    }

/* Mockup dashboard tetap berada di bawah teks */
.hero-dashboard {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}

/* Teks dekoratif bawah */
.hero-visual-caption {
    position: relative;
    z-index: 2;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    align-self: flex-end;
    margin: 24px 20px 0 0;
    color: #343851;
    font-size: clamp(15px, 1.4vw, 21px);
    font-weight: 800;
    font-style: italic;
    line-height: 1.3;
    text-align: right;
    transform: rotate(-5deg);
}

    .hero-visual-caption::after {
        content: "";
        display: block;
        width: 100%;
        height: 4px;
        margin-top: 8px;
        border-radius: 5px;
        background: #cce2bd;
    }

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

@media (max-width: 900px) {

    .hero-visual-heading {
        margin-right: 15px;
        margin-bottom: 25px;
        font-size: 20px;
    }

    .hero-visual-caption {
        margin-top: 20px;
        margin-right: 15px;
        font-size: 17px;
    }
}

@media (max-width: 480px) {

    .hero-visual-heading {
        margin-right: 10px;
        margin-bottom: 22px;
        font-size: 16px;
    }

    .hero-visual-caption {
        margin-top: 18px;
        margin-right: 10px;
        font-size: 14px;
    }
}

.tijarah-public-nav,
.hero > .container {
    width: min(1400px, calc(100% - 48px));
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .tijarah-public-nav,
    .hero > .container {
        width: calc(100% - 32px);
    }
}

/* =====================================================
   CLIENT SIDEBAR - MOBILE
   ===================================================== */

/* Tombol menu tidak tampil pada desktop */
.client-mobile-menu-button,
.client-sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {

    /* Tombol pembuka sidebar */
    .client-mobile-menu-button {
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 1200;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 14px;
        border: 0;
        border-radius: 10px;
        background: #343851;
        color: #fff;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    }

    /* Sidebar disembunyikan di luar layar */
    #clientSidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1300;
        display: block;
        width: min(280px, 85vw);
        height: 100dvh;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .25s ease;
        /*background: #fff;*/
        box-shadow: 10px 0 30px rgba(0, 0, 0, .12);
    }

        /* Sidebar muncul saat tombol menu ditekan */
        #clientSidebar.is-open {
            transform: translateX(0);
        }

    /* Latar belakang gelap */
    .client-sidebar-overlay.is-open {
        position: fixed;
        inset: 0;
        z-index: 1250;
        display: block;
        background: rgba(10, 20, 45, .5);
    }

    /* Konten dashboard menggunakan lebar layar HP */
    .client-main,
    .client-main-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
    }
}

/* =====================================================
   PERBAIKAN TOMBOL MENU AGAR TIDAK MENUTUPI JUDUL
   ===================================================== */

@media (max-width: 768px) {

    /* Sediakan ruang untuk tombol menu di atas konten */
    .client-main,
    .client-main-content {
        padding-top: 72px;
    }

    /* Posisi tombol menu */
    .client-mobile-menu-button {
        top: 14px;
        left: 16px;
    }
}

.client-mobile-header {
    display: none;
}

@media (max-width: 768px) {

    .client-mobile-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
    }

        .client-mobile-header h1 {
            margin: 0;
            font-size: 24px;
            color: #343851;
        }

        .client-mobile-header .client-mobile-menu-button {
            position: static;
            flex-shrink: 0;
        }
}

@media (max-width: 768px) {
    #clientSidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1300;
        display: block;
        width: min(280px, 85vw);
        height: 100dvh;
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .25s ease;
        /* Tidak mengubah warna background sidebar asli */
        box-shadow: 10px 0 30px rgba(0, 0, 0, .12);
    }

        #clientSidebar.is-open {
            transform: translateX(0);
        }
}

/* Warna tombol Logout pada sidebar Client */
#clientSidebar .client-logout,
#clientSidebar .client-logout button,
#clientSidebar .client-logout a {
    color: #ffffff;
}

    /* Jika ikon Logout menggunakan SVG */
    #clientSidebar .client-logout svg {
        color: #ffffff;
        stroke: currentColor;
    }

/* =========================================
   PILIHAN AKUN PADA HALAMAN LOGIN
   ========================================= */

.login-role-section {
    width: 100%;
    margin-bottom: 24px;
}

    .login-role-section h2 {
        margin: 0 0 8px;
        color: #343851;
        font-size: 26px;
        font-weight: 800;
    }

    .login-role-section > p {
        margin: 0 0 22px;
        color: #343851;
        font-size: 14px;
    }

.login-role-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.login-role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 175px;
    padding: 20px;
    border: 2px solid #e3e9e6;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

    .login-role-card:hover {
        border-color: #cce2bd;
    }

    .login-role-card:has(input:checked) {
        border-color: #cce2bd;
        background: #fffbea;
    }

    .login-role-card input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .login-role-card:has(input:focus-visible) {
        outline: 3px solid #343851;
        outline-offset: 3px;
    }

.login-role-icon {
    font-size: 28px;
}

.login-role-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .login-role-text strong {
        color: #343851;
        font-size: 16px;
    }

    .login-role-text small {
        color: #343851;
        font-size: 12px;
        line-height: 1.5;
    }

.login-role-check {
    position: absolute;
    top: 14px;
    right: 14px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #cce2bd;
    color: #343851;
    font-size: 13px;
    font-weight: 800;
}

.login-role-card:has(input:checked) .login-role-check {
    display: flex;
}

@media (max-width: 480px) {
    .login-role-options {
        grid-template-columns: 1fr;
    }

    .login-role-card {
        min-height: auto;
    }
}

/* =====================================================
   DASHBOARD PEMBELI TIJARAH
   ===================================================== */

.buyer-page {
    min-height: 100vh;
    background: #f5f7f6;
    color: #343851;
}

.buyer-header {
    background: #fff;
    border-bottom: 1px solid #e3e9e6;
}

.buyer-header-inner {
    width: min(1280px, calc(100% - 40px));
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 36px;
}

.buyer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #343851;
    font-size: 24px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.buyer-brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #cce2bd;
    color: #343851;
    font-size: 24px;
}

.buyer-brand-dot {
    color: #cce2bd;
}

.buyer-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 520px;
    padding: 0 16px;
    border: 1px solid #e3e9e6;
    border-radius: 12px;
    background: #f5f7f6;
}

    .buyer-search > span {
        font-size: 25px;
        color: #73838a;
    }

    .buyer-search input {
        width: 100%;
        min-width: 0;
        height: 44px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #343851;
        font: inherit;
    }

.buyer-header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}

.buyer-cart-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #f5f7f6;
    color: #343851;
    cursor: pointer;
}

.buyer-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 20px;
    background: #cce2bd;
    color: #343851;
    font-size: 11px;
    font-weight: 800;
}

.buyer-account {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.buyer-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #343851;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.buyer-main {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 34px 0 20px;
}

.buyer-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 260px;
    padding: 42px 52px;
    border-radius: 24px;
    background: #343851;
    color: #fff;
    overflow: hidden;
}

.buyer-eyebrow {
    color: #cce2bd;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.buyer-welcome h1 {
    margin: 12px 0;
    color: #fff;
    font-size: clamp(26px, 3vw, 39px);
    line-height: 1.2;
}

.buyer-welcome p {
    margin: 0 0 24px;
    color: #e3e9e6;
    font-size: 14px;
}

.buyer-primary-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 19px;
    border-radius: 10px;
    background: #cce2bd;
    color: #343851;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.buyer-welcome-art {
    flex-shrink: 0;
}

.buyer-art-circle {
    display: grid;
    place-items: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #343851;
}

.buyer-section {
    padding: 46px 0;
}

.buyer-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.buyer-section-kicker {
    color: #bd9400;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.buyer-section-heading h2 {
    margin: 8px 0;
    font-size: 28px;
}

.buyer-section-heading p {
    margin: 0;
    color: #73838a;
    font-size: 13px;
}

.buyer-demo-badge {
    padding: 7px 12px;
    border-radius: 20px;
    background: #eaf1e5;
    color: #846400;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.buyer-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.buyer-category {
    padding: 10px 17px;
    border: 1px solid #e3e9e6;
    border-radius: 10px;
    background: #fff;
    color: #343851;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .buyer-category.is-active {
        border-color: #343851;
        background: #343851;
        color: #fff;
    }

.buyer-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.buyer-product-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(23, 43, 89, .035);
}

    .buyer-product-card[hidden] {
        display: none;
    }

.buyer-product-image {
    display: grid;
    place-items: center;
    height: 190px;
}

    .buyer-product-image span {
        font-size: 75px;
    }

.buyer-product-image-blue {
    background: #e3e9e6;
}

.buyer-product-image-peach {
    background: #fff0e7;
}

.buyer-product-image-yellow {
    background: #eaf1e5;
}

.buyer-product-image-purple {
    background: #f5f7f6;
}

.buyer-product-info {
    padding: 20px;
}

.buyer-product-category {
    color: #bd9400;
    font-size: 11px;
    font-weight: 800;
}

.buyer-product-info h3 {
    margin: 9px 0;
    color: #343851;
    font-size: 16px;
}

.buyer-product-info p {
    min-height: 38px;
    margin: 0;
    color: #73838a;
    font-size: 12px;
    line-height: 1.6;
}

.buyer-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 18px;
}

    .buyer-product-bottom strong {
        color: #343851;
        font-size: 15px;
    }

.buyer-add-cart {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: #cce2bd;
    color: #343851;
    font-size: 23px;
    font-weight: 700;
    cursor: pointer;
}

.buyer-empty {
    padding: 30px;
    border-radius: 12px;
    background: #fff;
    color: #343851;
    text-align: center;
}

.buyer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid #e3e9e6;
    color: #73838a;
    font-size: 12px;
}

.buyer-logout {
    border: 0;
    background: transparent;
    color: #343851;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 1000px) {
    .buyer-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buyer-header-inner {
        gap: 18px;
    }
}

@media (max-width: 650px) {
    .buyer-header-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 15px 0;
    }

    .buyer-brand {
        font-size: 21px;
    }

    .buyer-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .buyer-account-name {
        display: none;
    }

    .buyer-main {
        padding-top: 20px;
    }

    .buyer-welcome {
        min-height: 0;
        padding: 30px 24px;
    }

    .buyer-welcome-art {
        display: none;
    }

    .buyer-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .buyer-product-image {
        height: 130px;
    }

        .buyer-product-image span {
            font-size: 54px;
        }

    .buyer-product-info {
        padding: 13px;
    }

        .buyer-product-info h3 {
            font-size: 13px;
        }

    .buyer-product-bottom {
        flex-wrap: wrap;
    }

        .buyer-product-bottom strong {
            font-size: 12px;
        }

    .buyer-section-heading h2 {
        font-size: 23px;
    }

    .buyer-footer {
        flex-wrap: wrap;
    }
}

/* ==========================================
   UKURAN FONT DASHBOARD PENJUAL
   ========================================== */

.seller-dashboard {
    font-size: 15px;
    line-height: 1.6;
}

    /* Judul halaman */
    .seller-dashboard h1 {
        font-size: clamp(26px, 2.4vw, 32px);
        line-height: 1.25;
    }

    /* Judul bagian dan panel */
    .seller-dashboard h2 {
        font-size: 22px;
        line-height: 1.35;
    }

    .seller-dashboard h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    /* Teks umum, menu, dan tombol */
    .seller-dashboard p,
    .seller-dashboard a,
    .seller-dashboard button,
    .seller-dashboard label,
    .seller-dashboard input,
    .seller-dashboard select,
    .seller-dashboard textarea {
        font-size: 15px;
    }

    /* Angka dan label pada kartu statistik */
    .seller-dashboard .stat-card,
    .seller-dashboard .stats-card,
    .seller-dashboard .dashboard-card {
        font-size: 15px;
    }

    /* Tabel transaksi */
    .seller-dashboard table {
        font-size: 14px;
    }

    .seller-dashboard th,
    .seller-dashboard td {
        padding: 12px 14px;
        line-height: 1.5;
    }

    /* Teks sekunder tetap terbaca */
    .seller-dashboard small {
        font-size: 13px;
    }

/* Tampilan HP */
@media (max-width: 768px) {
    .seller-dashboard {
        font-size: 15px;
    }

        .seller-dashboard h1 {
            font-size: 25px;
        }

        .seller-dashboard h2 {
            font-size: 20px;
        }

        .seller-dashboard h3 {
            font-size: 17px;
        }

        .seller-dashboard table {
            font-size: 13px;
        }
}

/* RIWAYAT TRANSAKSI PENJUAL */

.seller-dashboard table {
    font-size: 15px;
}

    .seller-dashboard table th {
        font-size: 14px;
        font-weight: 700;
    }

    .seller-dashboard table td {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Teks status transaksi */
    .seller-dashboard table .badge,
    .seller-dashboard table .status,
    .seller-dashboard table .status-badge {
        font-size: 13px;
    }

    /* Tombol aksi di dalam tabel */
    .seller-dashboard table a,
    .seller-dashboard table button {
        font-size: 14px;
    }

@media (max-width: 768px) {
    .seller-dashboard table {
        font-size: 14px;
    }

        .seller-dashboard table th,
        .seller-dashboard table td {
            font-size: 14px;
        }
}

/* =====================================================
   HALAMAN LAYANAN SAYA - PENJUAL
   ===================================================== */

.client-services-page {
    width: 100%;
    min-width: 0;
    color: #343851;
}

.services-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.services-eyebrow {
    color: #b48c00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.services-heading h1 {
    margin: 8px 0;
    font-size: 30px;
    font-weight: 800;
}

.services-heading p,
.services-detail-heading p {
    margin: 0;
    color: #73838a;
    font-size: 15px;
}

.services-change-package {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: #cce2bd;
    color: #343851;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.services-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 34px;
    border-radius: 20px;
    background: #343851;
    color: #fff;
}

.services-summary-label {
    color: #cce2bd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.services-package-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

    .services-package-line h2 {
        margin: 0;
        color: #fff;
        font-size: 30px;
    }

.services-status {
    padding: 7px 12px;
    border-radius: 20px;
    background: #cce2bd;
    color: #343851;
    font-size: 12px;
    font-weight: 800;
}

.services-summary-content > p {
    margin: 14px 0 25px;
    color: #e3e9e6;
    font-size: 15px;
}

.services-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
}

    .services-summary-meta > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .services-summary-meta span {
        color: #eaf4ee;
        font-size: 13px;
    }

    .services-summary-meta strong {
        color: #fff;
        font-size: 16px;
    }

.services-summary-art {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #343851;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.services-card,
.services-detail {
    border: 1px solid #e3e9e6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(23, 43, 89, .04);
}

.services-card {
    padding: 24px;
}

.services-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #eaf1e5;
    color: #343851;
    font-size: 23px;
    font-weight: 800;
}

.services-card h3 {
    margin: 0 0 9px;
    font-size: 18px;
}

.services-card p {
    min-height: 48px;
    margin: 0 0 17px;
    color: #73838a;
    font-size: 14px;
    line-height: 1.6;
}

.services-card strong,
.services-card a {
    color: #343851;
    font-size: 16px;
    font-weight: 800;
}

.services-detail {
    padding: 26px;
}

.services-detail-heading h2 {
    margin: 0 0 7px;
    font-size: 22px;
}

.services-detail-table-wrap {
    width: 100%;
    margin-top: 22px;
    overflow-x: auto;
}

.services-detail-table {
    width: 100%;
    border-collapse: collapse;
}

    .services-detail-table th,
    .services-detail-table td {
        padding: 15px 12px;
        border-bottom: 1px solid #f5f7f6;
        font-size: 15px;
        text-align: left;
    }

    .services-detail-table th {
        width: 35%;
        color: #73838a;
        font-weight: 600;
    }

    .services-detail-table td {
        color: #343851;
        font-weight: 700;
    }

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .services-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .services-summary {
        padding: 25px;
    }

    .services-summary-art {
        display: none;
    }

    .services-package-line h2 {
        font-size: 25px;
    }

    .services-detail {
        padding: 18px;
    }

    .services-detail-table th,
    .services-detail-table td {
        font-size: 14px;
    }
}

/* =========================================================
   LAYANAN SAYA - SOFT UI
   ========================================================= */

.services-soft {
    width: 100%;
    min-width: 0;
    padding: 26px;
    border-radius: 24px;
    background: #f5f7f6;
    color: #343851;
    font-size: 15px;
}

/* HEADER */

.services-soft-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
}

.services-soft-eyebrow {
    color: #bd9200;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.services-soft-heading h1 {
    margin: 7px 0 5px;
    color: #343851;
    font-size: 32px;
    font-weight: 800;
}

.services-soft-heading p {
    margin: 0;
    color: #73838a;
    font-size: 15px;
}

.services-soft-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid #cce2bd;
    border-radius: 12px;
    background: linear-gradient(180deg, #cce2bd, #cce2bd);
    color: #343851;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 13px rgba(227, 174, 35, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .services-soft-primary:hover {
        color: #343851;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(227, 174, 35, .2);
    }

/* HERO */

.services-soft-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 245px;
    padding: 30px 34px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(115deg, #343851 0%, #343851 70%, #5b608a 100%);
    color: #fff;
}

    .services-soft-hero::before {
        content: "";
        position: absolute;
        right: -90px;
        top: -150px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(13, 29, 65, .18);
    }

    .services-soft-hero::after {
        content: "";
        position: absolute;
        right: 130px;
        bottom: -200px;
        width: 400px;
        height: 280px;
        border-radius: 50%;
        background: rgba(255, 230, 155, .95);
        transform: rotate(-18deg);
    }

.services-soft-hero-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.services-soft-hero-label {
    color: #cce2bd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.services-soft-package-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 13px 0;
}

    .services-soft-package-row h2 {
        margin: 0;
        color: #fff;
        font-size: 29px;
        font-weight: 800;
    }

.services-soft-package-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 30px;
    background: #cce2bd;
    color: #343851;
    font-size: 12px;
    font-weight: 800;
}

.services-soft-hero-content > p {
    margin: 0 0 24px;
    color: #e3e9e6;
    font-size: 15px;
}

.services-soft-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.services-soft-date {
    display: flex;
    align-items: center;
    gap: 11px;
}

.services-soft-date-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .17);
    color: #fff;
}

    .services-soft-date-icon svg {
        width: 22px;
        height: 22px;
    }

.services-soft-date > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.services-soft-date small {
    color: #e3e9e6;
    font-size: 12px;
}

.services-soft-date strong {
    color: #fff;
    font-size: 15px;
}

/* ILUSTRASI HERO */

.services-soft-hero-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 230px;
    height: 190px;
}

.services-soft-art-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}

.services-soft-document {
    position: relative;
    width: 205px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 14px rgba(13, 29, 65, .18));
}

/* KARTU INFORMASI */

.services-soft-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.services-soft-card {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    min-width: 0;
    padding: 22px;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(35, 66, 119, .035);
}

.services-soft-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

    .services-soft-card-icon svg {
        width: 23px;
        height: 23px;
    }

.services-soft-icon-green {
    background: #e4f8e9;
    color: #24834b;
}

.services-soft-icon-blue {
    background: #e3e9e6;
    color: #5b608a;
}

.services-soft-icon-yellow {
    background: #eaf1e5;
    color: #b57c00;
}

.services-soft-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.services-soft-card h3 {
    margin: 3px 0 8px;
    color: #343851;
    font-size: 18px;
    font-weight: 800;
}

.services-soft-card p {
    min-height: 43px;
    margin: 0 0 15px;
    color: #73838a;
    font-size: 14px;
    line-height: 1.6;
}

.services-soft-card-value {
    margin-top: auto;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f5f7f6;
    color: #343851;
    font-size: 15px;
    font-weight: 800;
}

.services-soft-payment-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: auto;
    padding: 12px 18px;
    border-radius: 10px;
    background: #eaf1e5;
    color: #343851;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

    .services-soft-payment-link:hover {
        background: #cce2bd;
        color: #343851;
    }

/* DETAIL LANGGANAN */

.services-soft-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr);
    gap: 22px;
    padding: 22px;
    border: 1px solid #e3e9e6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(35, 66, 119, .035);
}

.services-soft-detail-main {
    min-width: 0;
}

.services-soft-detail-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.services-soft-detail-icon {
    display: grid;
    place-items: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #e3e9e6;
    color: #5b608a;
}

    .services-soft-detail-icon svg {
        width: 23px;
        height: 23px;
    }

.services-soft-detail-title h2 {
    margin: 0 0 5px;
    color: #343851;
    font-size: 21px;
    font-weight: 800;
}

.services-soft-detail-title p {
    margin: 0;
    color: #73838a;
    font-size: 13px;
}

.services-soft-detail-table-wrap {
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 13px;
}

.services-soft-detail-table {
    width: 100%;
    border-collapse: collapse;
}

    .services-soft-detail-table th,
    .services-soft-detail-table td {
        padding: 15px 17px;
        border-bottom: 1px solid #e3e9e6;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
    }

    .services-soft-detail-table tr:last-child th,
    .services-soft-detail-table tr:last-child td {
        border-bottom: 0;
    }

    .services-soft-detail-table th {
        width: 38%;
        color: #343851;
        font-weight: 600;
    }

    .services-soft-detail-table td {
        color: #343851;
        font-weight: 800;
    }

.services-soft-status-value {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 20px;
    background: #fff0ef;
    color: #bd4545;
    font-size: 12px;
    font-weight: 800;
}

/* PANEL UPGRADE */

.services-soft-upgrade {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 25px 22px;
    border-radius: 15px;
    background: linear-gradient(145deg, #f5f7f6, #e3e9e6);
    text-align: center;
}

.services-soft-upgrade-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 17px;
    border-radius: 50%;
    background: #e3e9e6;
    color: #5b608a;
}

    .services-soft-upgrade-icon svg {
        width: 30px;
        height: 30px;
    }

.services-soft-upgrade h3 {
    margin: 0 0 10px;
    color: #343851;
    font-size: 18px;
    font-weight: 800;
}

.services-soft-upgrade p {
    max-width: 310px;
    margin: 0 0 20px;
    color: #73838a;
    font-size: 14px;
    line-height: 1.6;
}

.services-soft-upgrade .services-soft-primary {
    width: 100%;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .services-soft-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-soft-detail {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .services-soft {
        padding: 15px;
        border-radius: 15px;
    }

    .services-soft-heading {
        align-items: flex-start;
        flex-direction: column;
    }

        .services-soft-heading h1 {
            font-size: 27px;
        }

    .services-soft-hero {
        padding: 25px 20px;
    }

    .services-soft-package-row h2 {
        font-size: 24px;
    }

    .services-soft-hero-art {
        display: none;
    }

    .services-soft-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .services-soft-card {
        padding: 19px;
    }

    .services-soft-detail {
        padding: 16px;
    }

    .services-soft-detail-table th,
    .services-soft-detail-table td {
        padding: 12px 10px;
        font-size: 13px;
    }
}

/* =====================================================
   LAYOUT PENJUAL - HALAMAN LAYANAN SAYA
   ===================================================== */

.services-layout {
    display: flex;
    min-height: 100vh;
    background: #f7f9fd;
    color: #343851;
}

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

    /* SIDEBAR */

    .services-layout .seller-sidebar {
        position: sticky;
        top: 0;
        display: flex;
        flex: 0 0 250px;
        flex-direction: column;
        width: 250px;
        height: 100vh;
        overflow-y: auto;
        padding: 25px 14px 18px;
        background: linear-gradient(180deg, #343851, #343851);
        color: #fff;
    }

    .services-layout .seller-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 10px 35px;
        color: #fff;
        text-decoration: none;
    }

    .services-layout .seller-brand-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #cce2bd;
        color: #343851;
        font-size: 25px;
        font-weight: 900;
    }

    .services-layout .seller-sidebar-brand > span:last-child {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .services-layout .seller-sidebar-brand strong {
        color: #fff;
        font-size: 22px;
        font-weight: 900;
    }

    .services-layout .seller-sidebar-brand small {
        color: #eaf4ee;
        font-size: 12px;
    }

    .services-layout .seller-sidebar-caption {
        display: block;
        margin: 0 14px 13px;
        color: #73838a;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

    .services-layout .seller-sidebar-caption-secondary {
        margin-top: 26px;
    }

    .services-layout .seller-sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .services-layout .seller-nav-link {
        display: flex;
        align-items: center;
        gap: 13px;
        width: 100%;
        min-height: 45px;
        padding: 11px 14px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: #e3e9e6;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background .2s ease, color .2s ease;
    }

        .services-layout .seller-nav-link svg {
            flex-shrink: 0;
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .services-layout .seller-sidebar-nav a.seller-nav-link:hover {
        background: rgba(255, 255, 255, .09);
        color: #fff;
    }

    .services-layout .seller-nav-link.is-active {
        background: #cce2bd;
        color: #343851;
        font-weight: 800;
    }

    .services-layout .seller-nav-disabled {
        opacity: .55;
        cursor: default;
    }

    .services-layout .seller-sidebar-bottom {
        margin-top: auto;
        padding-top: 22px;
    }

        .services-layout .seller-sidebar-bottom form {
            margin: 0;
        }

    .services-layout .seller-logout,
    .services-layout .seller-logout span,
    .services-layout .seller-logout svg {
        color: #fff;
    }

        .services-layout .seller-logout:hover {
            background: rgba(255, 255, 255, .09);
        }

    /* KONTEN UTAMA */

    .services-layout .seller-main {
        flex: 1;
        min-width: 0;
    }

    /* HEADER */

    .services-layout .seller-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-height: 78px;
        padding: 15px 28px;
        border-bottom: 1px solid #e3e9e6;
        background: #fff;
    }

    .services-layout .seller-topbar-left,
    .services-layout .seller-topbar-right {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
    }

    .services-layout .seller-topbar-right {
        justify-content: flex-end;
        margin-left: auto;
    }

    .services-layout .seller-topbar-title {
        color: #343851;
        font-size: 21px;
        font-weight: 800;
    }

    .services-layout .seller-notification-button {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border: 1px solid #e3e9e6;
        border-radius: 12px;
        background: #fff;
        color: #343851;
        cursor: pointer;
    }

        .services-layout .seller-notification-button svg,
        .services-layout .seller-menu-button svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .services-layout .seller-account {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
    }

    .services-layout .seller-account-avatar {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 43px;
        height: 43px;
        border-radius: 50%;
        background: #cce2bd;
        color: #343851;
        font-size: 17px;
        font-weight: 900;
    }

    .services-layout .seller-account-details {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

        .services-layout .seller-account-details strong {
            overflow: hidden;
            color: #343851;
            font-size: 14px;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .services-layout .seller-account-details small {
            overflow: hidden;
            color: #73838a;
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* Tombol menu HP disembunyikan pada desktop */

    .services-layout .seller-menu-button {
        display: none;
    }

    .services-layout .seller-sidebar-overlay[hidden] {
        display: none;
    }

/* RESPONSIVE */

@media (max-width: 768px) {

    .services-layout .seller-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1300;
        width: min(280px, 85vw);
        height: 100dvh;
        transform: translateX(-105%);
        transition: transform .25s ease;
        box-shadow: 10px 0 30px rgba(0, 0, 0, .12);
    }

        .services-layout .seller-sidebar.is-open {
            transform: translateX(0);
        }

    .services-layout .seller-sidebar-overlay:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 1250;
        display: block;
        background: rgba(10, 20, 45, .5);
    }

    .services-layout .seller-menu-button {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: #f5f7f6;
        color: #343851;
        cursor: pointer;
    }

    .services-layout .seller-topbar {
        gap: 12px;
        min-height: 68px;
        padding: 12px 16px;
    }

    .services-layout .seller-topbar-title {
        font-size: 17px;
    }

    .services-layout .seller-topbar-right {
        gap: 9px;
    }

    .services-layout .seller-account-details {
        display: none;
    }

    .services-layout .seller-account-avatar {
        width: 36px;
        height: 36px;
    }

    .services-layout .seller-notification-button {
        width: 36px;
        height: 36px;
    }
}

/* =====================================================
   RIWAYAT TRANSAKSI — TABEL SOFT & FONT LEBIH BESAR
   ===================================================== */

/* Kartu pembungkus tabel */
.transaction-list-card {
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(27, 49, 92, 0.04);
}

/* Header kolom */
.transaction-table-header {
    background: #f5f7f6;
    border-bottom: 1px solid #e3e9e6;
}

    .transaction-table-header > div {
        color: #343851;
        font-size: 16px !important;
        font-weight: 800;
    }

/* Baris transaksi */
.transaction-table-row {
    min-height: 118px;
    border-bottom: 1px solid #e3e9e6;
    background: #ffffff;
}

    .transaction-table-row:last-child {
        border-bottom: none;
    }

    .transaction-table-row:hover {
        background: #fcfdff;
    }

/* Nomor invoice */
.transaction-invoice strong {
    color: #343851;
    font-size: 17px !important;
    font-weight: 800;
    line-height: 1.45;
}

/* Nama layanan dan tanggal */
.transaction-package strong,
.transaction-date strong {
    color: #343851;
    font-size: 17px !important;
    font-weight: 800;
    line-height: 1.45;
}

/* Teks keterangan di bawah data utama */
.transaction-invoice span,
.transaction-package span,
.transaction-date span {
    font-size: 14px !important;
    line-height: 1.5;
}

/* Total pembayaran */
.transaction-value {
    color: #343851;
    font-size: 19px !important;
    font-weight: 800;
    white-space: nowrap;
}

/* =====================================================
   BADGE STATUS — FONT DIPERBESAR
   ===================================================== */

.transaction-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.4;
    white-space: nowrap;
}

    /* Ikon titik / centang di dalam badge */
    .transaction-status > span {
        font-size: 17px !important;
        font-weight: 900;
        line-height: 1;
    }

    /* Menunggu Pembayaran */
    .transaction-status.pending {
        background: #eaf1e5;
        color: #8c6200;
    }

    /* Lunas */
    .transaction-status.paid {
        background: #ddf8ec;
        color: #087a4b;
    }

    /* Gagal */
    .transaction-status.failed {
        background: #ffe5e5;
        color: #b42323;
    }

    /* Dibatalkan */
    .transaction-status.cancelled {
        background: #f5f7f6;
        color: #343851;
    }

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

@media (max-width: 768px) {
    .transaction-table-header > div {
        font-size: 14px !important;
    }

    .transaction-invoice strong,
    .transaction-package strong,
    .transaction-date strong {
        font-size: 15px !important;
    }

    .transaction-value {
        font-size: 17px !important;
    }

    .transaction-status {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px !important;
    }
}
/* =========================================
   INFORMASI AKUN — FONT LEBIH BESAR
   ========================================= */

/* Judul kartu */
.account-info-card h2,
.account-info-card h3 {
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1.35;
}

/* Deskripsi di bawah judul */
.account-info-card .account-info-description {
    font-size: 17px !important;
    line-height: 1.6;
}

/* Label: Nama Client, Email, Nama Toko, Bergabung */
.account-info-card .account-info-label {
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.5;
}

/* Nilai: nama, alamat email, nama toko, tanggal */
.account-info-card .account-info-value {
    font-size: 17px !important;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Jarak antarbaris informasi */
.account-info-card .account-info-row {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Tombol Edit Profil */
.account-info-card .account-edit-link {
    font-size: 18px !important;
    font-weight: 800;
}

/* =====================================================
   DASHBOARD CLIENT - INFORMASI AKUN
   Font lebih besar dan lebih mudah dibaca
   ===================================================== */

/* Judul Informasi Akun */
.seller-dashboard .account-panel .panel-header h3 {
    margin: 0 0 8px;
    color: #343851;
    font-size: 25px !important;
    font-weight: 800;
    line-height: 1.35;
}

/* Deskripsi: Informasi Client Tijarah */
.seller-dashboard .account-panel .panel-header p {
    margin: 0;
    color: #343851;
    font-size: 17px !important;
    font-weight: 400;
    line-height: 1.6;
}

/* Pembungkus seluruh informasi akun */
.seller-dashboard .account-panel .account-data {
    padding: 8px 30px 0;
}

    /* Setiap baris: Nama Client, Email, Nama Toko, Bergabung */
    .seller-dashboard .account-panel .account-data > div {
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 19px 0;
        border-bottom: 1px solid #e3e9e6;
    }

        /* Hilangkan garis pemisah pada baris terakhir */
        .seller-dashboard .account-panel .account-data > div:last-child {
            border-bottom: none;
        }

        /* Label informasi akun */
        .seller-dashboard .account-panel .account-data > div > span {
            display: block;
            color: #343851;
            font-size: 15px !important;
            font-weight: 500;
            line-height: 1.5;
        }

        /* Nilai informasi akun */
        .seller-dashboard .account-panel .account-data > div > strong {
            display: block;
            color: #343851;
            font-size: 18px !important;
            font-weight: 750;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }

/* Tombol Edit Profil */
.seller-dashboard .account-panel .edit-profile {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 20px 30px 26px;
    color: #343851;
    font-size: 19px !important;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .seller-dashboard .account-panel .edit-profile:hover {
        color: #cce2bd;
    }

/* Tampilan HP */
@media (max-width: 768px) {

    .seller-dashboard .account-panel .panel-header h3 {
        font-size: 22px !important;
    }

    .seller-dashboard .account-panel .panel-header p {
        font-size: 15px !important;
    }

    .seller-dashboard .account-panel .account-data {
        padding: 6px 20px 0;
    }

        .seller-dashboard .account-panel .account-data > div {
            padding: 16px 0;
        }

            .seller-dashboard .account-panel .account-data > div > span {
                font-size: 14px !important;
            }

            .seller-dashboard .account-panel .account-data > div > strong {
                font-size: 16px !important;
            }

    .seller-dashboard .account-panel .edit-profile {
        margin: 18px 20px 24px;
        font-size: 17px !important;
    }
}

/* =====================================================
   PROFIL SAYA — TIJARAH CLIENT
   ===================================================== */

.profile-page {
    width: 100%;
    min-width: 0;
    color: #343851;
}

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

/* JUDUL */

.profile-heading {
    margin-bottom: 24px;
}

.profile-eyebrow {
    color: #b68b00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.profile-heading h2 {
    margin: 8px 0 7px;
    color: #343851;
    font-size: 29px;
    font-weight: 800;
}

.profile-heading p {
    margin: 0;
    color: #73838a;
    font-size: 15px;
    line-height: 1.6;
}

/* NOTIFIKASI BERHASIL */

.profile-alert-success {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 17px;
    border: 1px solid #bcebd2;
    border-radius: 12px;
    background: #e9fbf1;
    color: #146c42;
    font-size: 15px;
    font-weight: 700;
}

/* RINGKASAN PROFIL */

.profile-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    padding: 24px 28px;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    background: linear-gradient(115deg, #fff, #f5f7f6);
    box-shadow: 0 7px 24px rgba(35, 66, 119, .035);
}

.profile-summary-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 19px;
    background: linear-gradient(145deg, #cce2bd, #cce2bd);
    color: #343851;
    font-size: 29px;
    font-weight: 900;
}

.profile-summary-info {
    min-width: 0;
}

.profile-summary-label {
    color: #a17a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.profile-summary-info h3 {
    margin: 5px 0;
    color: #343851;
    font-size: 23px;
    font-weight: 800;
}

.profile-summary-info p {
    margin: 0;
    color: #73838a;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.profile-summary-badge {
    margin-left: auto;
    padding: 9px 14px;
    border-radius: 999px;
    background: #e3e9e6;
    color: #5b608a;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* GRID */

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
    align-items: start;
    gap: 22px;
}

.profile-card {
    min-width: 0;
    padding: 26px;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(35, 66, 119, .035);
}

.profile-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
}

.profile-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: #eaf1e5;
    color: #9a7000;
    font-size: 23px;
    font-weight: 800;
}

.profile-card-icon-blue {
    background: #e3e9e6;
    color: #5b608a;
}

.profile-card-heading h3 {
    margin: 0 0 5px;
    color: #343851;
    font-size: 21px;
    font-weight: 800;
}

.profile-card-heading p {
    margin: 0;
    color: #73838a;
    font-size: 14px;
    line-height: 1.5;
}

/* FORM */

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.profile-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-field-full {
    grid-column: 1 / -1;
}

.profile-field label {
    margin-bottom: 9px;
    color: #343851;
    font-size: 14px;
    font-weight: 800;
}

.profile-input {
    width: 100%;
    min-height: 47px;
    padding: 12px 14px;
    border: 1px solid #e3e9e6;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #343851;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .profile-input:focus {
        border-color: #5b608a;
        box-shadow: 0 0 0 3px rgba(71, 125, 207, .12);
    }

.profile-input-readonly {
    background: #f5f7fb;
    color: #73838a;
    cursor: not-allowed;
}

.profile-textarea {
    min-height: 110px;
    resize: vertical;
}

.profile-field small {
    margin-top: 7px;
    color: #73838a;
    font-size: 12px;
    line-height: 1.5;
}

.profile-field-error {
    margin-top: 6px;
    color: #c03939;
    font-size: 12px;
}

.profile-validation-summary {
    color: #c03939;
    font-size: 13px;
}

    .profile-validation-summary:empty {
        display: none;
    }

/* TOMBOL */

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #e3e9e6;
}

.profile-button-secondary,
.profile-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 0 19px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.profile-button-secondary {
    border: 1px solid #e3e9e6;
    background: #fff;
    color: #343851;
}

    .profile-button-secondary:hover {
        background: #f5f7fb;
        color: #343851;
    }

.profile-button-primary {
    border: 1px solid #cce2bd;
    background: linear-gradient(180deg, #cce2bd, #cce2bd);
    color: #343851;
}

    .profile-button-primary:hover {
        background: #cce2bd;
        color: #343851;
    }

/* INFORMASI AKUN */

.profile-account-data > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px 0;
    border-bottom: 1px solid #e3e9e6;
}

    .profile-account-data > div:first-child {
        padding-top: 0;
    }

    .profile-account-data > div:last-child {
        border-bottom: 0;
    }

.profile-account-data span {
    color: #73838a;
    font-size: 14px;
}

.profile-account-data strong {
    color: #343851;
    font-size: 16px;
    font-weight: 800;
}

.profile-security-note {
    margin-top: 20px;
    padding: 18px;
    border-radius: 12px;
    background: #f5f7f6;
}

    .profile-security-note strong {
        color: #343851;
        font-size: 15px;
        font-weight: 800;
    }

    .profile-security-note p {
        margin: 8px 0 0;
        color: #73838a;
        font-size: 13px;
        line-height: 1.6;
    }

/* RESPONSIVE */

@media (max-width: 1050px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .profile-heading h2 {
        font-size: 25px;
    }

    .profile-summary {
        flex-wrap: wrap;
        padding: 20px;
    }

    .profile-summary-avatar {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        font-size: 24px;
    }

    .profile-summary-info h3 {
        font-size: 19px;
    }

    .profile-summary-badge {
        margin-left: 0;
    }

    .profile-card {
        padding: 20px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-form-actions {
        justify-content: stretch;
    }

    .profile-button-secondary,
    .profile-button-primary {
        flex: 1;
    }
}

/* =====================================================
   TIJARAH CLIENT — PUSAT BANTUAN
   ===================================================== */

.help-page {
    width: 100%;
    min-width: 0;
    color: #343851;
}

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

/* HERO */

.help-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 265px;
    padding: 35px 40px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(115deg, #343851, #343851);
    color: #fff;
}

    .help-hero::before {
        content: "";
        position: absolute;
        right: -80px;
        top: -130px;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .055);
    }

.help-hero-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.help-eyebrow {
    color: #cce2bd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.help-hero h2 {
    margin: 11px 0 10px;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
}

.help-hero p {
    max-width: 590px;
    margin: 0 0 25px;
    color: #e3e9e6;
    font-size: 15px;
    line-height: 1.65;
}

.help-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 610px;
    min-height: 53px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 12px;
    background: #fff;
    color: #73838a;
    box-shadow: 0 8px 22px rgba(13, 29, 65, .1);
}

    .help-search svg {
        flex-shrink: 0;
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .help-search input {
        width: 100%;
        min-width: 0;
        height: 51px;
        padding: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: #343851;
        font: inherit;
        font-size: 15px;
    }

        .help-search input::placeholder {
            color: #73838a;
        }

.help-hero-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 150px;
}

.help-headset-icon {
    display: grid;
    place-items: center;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 32px;
    background: rgba(255, 255, 255, .12);
    font-size: 65px;
    transform: rotate(-8deg);
}

/* SECTION */

.help-section {
    margin-top: 32px;
}

.help-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 19px;
}

.help-section-label {
    color: #b68b00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.help-section-heading h3 {
    margin: 7px 0;
    color: #343851;
    font-size: 23px;
    font-weight: 800;
}

.help-section-heading p {
    margin: 0;
    color: #73838a;
    font-size: 15px;
    line-height: 1.6;
}

.help-all-faq {
    color: #5b608a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

/* KARTU PANDUAN */

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

.help-guide-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border: 1px solid #e3e9e6;
    border-radius: 17px;
    background: #fff;
    color: #343851;
    text-decoration: none;
    box-shadow: 0 7px 24px rgba(35, 66, 119, .035);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .help-guide-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 26px rgba(35, 66, 119, .08);
    }

.help-guide-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 14px;
    font-size: 25px;
}

.help-icon-yellow {
    background: #eaf1e5;
}

.help-icon-blue {
    background: #e3e9e6;
}

.help-icon-green {
    background: #e3f8eb;
}

.help-guide-card h4 {
    margin: 0 0 9px;
    color: #343851;
    font-size: 19px;
    font-weight: 800;
}

.help-guide-card p {
    flex: 1;
    margin: 0 0 20px;
    color: #73838a;
    font-size: 14px;
    line-height: 1.65;
}

.help-guide-link {
    color: #5b608a;
    font-size: 14px;
    font-weight: 800;
}

/* FAQ */

.help-faq-list {
    overflow: hidden;
    border: 1px solid #e3e9e6;
    border-radius: 17px;
    background: #fff;
}

.help-faq-item {
    border-bottom: 1px solid #e3e9e6;
}

    .help-faq-item:last-child {
        border-bottom: 0;
    }

    .help-faq-item[hidden] {
        display: none;
    }

    .help-faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 21px 24px;
        color: #343851;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.5;
        cursor: pointer;
        list-style: none;
    }

        .help-faq-item summary::-webkit-details-marker {
            display: none;
        }

        .help-faq-item summary > span {
            display: grid;
            place-items: center;
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #f5f7f6;
            color: #5b608a;
            font-size: 20px;
            font-weight: 500;
            transition: transform .2s ease;
        }

    .help-faq-item[open] summary > span {
        transform: rotate(45deg);
        background: #eaf1e5;
        color: #8c6200;
    }

.help-faq-answer {
    padding: 0 24px 22px;
    color: #343851;
    font-size: 15px;
    line-height: 1.75;
}

    .help-faq-answer a {
        color: #5b608a;
        font-weight: 800;
        text-decoration: none;
    }

.help-faq-empty {
    margin-top: 15px;
    padding: 25px;
    border: 1px dashed #e3e9e6;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

    .help-faq-empty[hidden] {
        display: none;
    }

    .help-faq-empty strong {
        color: #343851;
        font-size: 17px;
    }

    .help-faq-empty p {
        margin: 8px 0 0;
        color: #73838a;
        font-size: 14px;
    }

/* KONTAK */

.help-contact {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding: 25px 28px;
    border: 1px solid #e3e9e6;
    border-radius: 18px;
    background: linear-gradient(115deg, #f5f7f6, #e3e9e6);
}

.help-contact-icon {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: #e3e9e6;
    font-size: 29px;
}

.help-contact-text {
    flex: 1;
    min-width: 0;
}

    .help-contact-text h3 {
        margin: 0 0 7px;
        color: #343851;
        font-size: 20px;
        font-weight: 800;
    }

    .help-contact-text p {
        margin: 0;
        color: #73838a;
        font-size: 14px;
        line-height: 1.6;
    }

.help-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 19px;
    border: 1px solid #cce2bd;
    border-radius: 11px;
    background: linear-gradient(180deg, #cce2bd, #cce2bd);
    color: #343851;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

    .help-contact-button:hover {
        background: #cce2bd;
        color: #343851;
    }

/* RESPONSIVE */

@media (max-width: 950px) {
    .help-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-hero-art {
        display: none;
    }
}

@media (max-width: 650px) {
    .help-hero {
        padding: 28px 21px;
    }

        .help-hero h2 {
            font-size: 26px;
        }

    .help-guide-grid {
        grid-template-columns: 1fr;
    }

    .help-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .help-faq-item summary {
        padding: 18px;
        font-size: 15px;
    }

    .help-faq-answer {
        padding: 0 18px 18px;
        font-size: 14px;
    }

    .help-contact {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .help-contact-button {
        width: 100%;
    }
}

/* ==========================================
   SIDEBAR — HUBUNGI SUPPORT
   ========================================== */

.seller-dashboard .sidebar-help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 25px 20px;
    border-radius: 18px;
    background: #343851;
    color: #ffffff;
    text-align: center;
}

    .seller-dashboard .sidebar-help .sidebar-help-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        margin-bottom: 20px;
        border-radius: 50%;
        background: #cce2bd;
        font-size: 27px;
    }

    .seller-dashboard .sidebar-help > strong {
        margin-bottom: 10px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 800;
    }

    .seller-dashboard .sidebar-help > span {
        margin-bottom: 20px;
        color: #e3e9e6;
        font-size: 14px;
        line-height: 1.6;
    }

    .seller-dashboard .sidebar-help .sidebar-help-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 58px;
        padding: 12px;
        border-radius: 11px;
        background: #ffffff;
        color: #343851;
        font-size: 21px;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
        transition: background 0.2s ease, transform 0.2s ease;
    }

        .seller-dashboard .sidebar-help .sidebar-help-button:hover {
            background: #cce2bd;
            color: #343851;
            transform: translateY(-2px);
        }

/* Tujuan scroll pada halaman Bantuan */
.help-contact#hubungi-support {
    scroll-margin-top: 30px;
}