/* =========================================================
   PUSAT DALTON — ARTICLE DETAIL
   PREMIUM INDUSTRIAL / CORPORATE EDITION
   Matched specifically to the uploaded HTML structure

   File:
   artikel-detail.css

   Works with:
   - style.css
   - artikel.css
   - current article-detail HTML

   No Bootstrap
   No Tailwind
   No JavaScript dependency
   Responsive
   WordPress / Static HTML safe
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    --pd-blue: #0b5ed7;
    --pd-blue-dark: #084298;
    --pd-blue-deep: #061b3a;

    --pd-navy: #071a33;
    --pd-navy-2: #0b2344;
    --pd-navy-3: #102f56;

    --pd-orange: #f47c20;
    --pd-orange-dark: #d96108;

    --pd-white: #ffffff;
    --pd-surface: #f7f9fc;
    --pd-surface-2: #eef3f8;

    --pd-border: #dfe6ef;
    --pd-border-light: #e9eef5;

    --pd-text: #182334;
    --pd-text-soft: #536174;
    --pd-text-muted: #7a8798;

    --pd-success: #16845b;

    --pd-radius-sm: 10px;
    --pd-radius-md: 16px;
    --pd-radius-lg: 22px;
    --pd-radius-xl: 28px;

    --pd-shadow-sm:
        0 4px 16px rgba(7, 26, 51, 0.06);

    --pd-shadow-md:
        0 14px 40px rgba(7, 26, 51, 0.09);

    --pd-shadow-lg:
        0 24px 70px rgba(7, 26, 51, 0.14);

    --pd-container-width: 1240px;

    --pd-transition:
        220ms cubic-bezier(.2, .65, .3, 1);
}


/* =========================================================
   02. SAFE BASE
   ========================================================= */

.site-header,
.pd-breadcrumb,
.pd-detail-hero,
.pd-detail-section,
.site-footer {
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.pd-container,
.pd-detail-container {
    width: min(
        calc(100% - 40px),
        var(--pd-container-width)
    );

    margin-inline: auto;
}

.pd-detail-container {
    position: relative;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.96);

    border-bottom:
        1px solid rgba(223, 230, 239, 0.9);

    box-shadow:
        0 4px 24px rgba(7, 26, 51, 0.055);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-inner {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;
}


/* =========================================================
   04. LOGO
   ========================================================= */

.site-logo {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--pd-navy);

    text-decoration: none;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.025em;

    white-space: nowrap;

    transition:
        color var(--pd-transition),
        transform var(--pd-transition);
}

.site-logo::before {
    content: "";

    width: 11px;
    height: 30px;

    display: block;

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            var(--pd-blue),
            var(--pd-orange)
        );

    box-shadow:
        0 5px 14px rgba(11, 94, 215, 0.2);
}

.site-logo:hover {
    color: var(--pd-blue);
    transform: translateY(-1px);
}


/* =========================================================
   05. MAIN NAVIGATION
   ========================================================= */

.main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
}

.main-navigation a {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 42px;

    padding:
        0 13px;

    color: #455468;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    border-radius: 10px;

    transition:
        color var(--pd-transition),
        background var(--pd-transition);
}

.main-navigation a::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    bottom: 4px;

    height: 2px;

    border-radius: 99px;

    background: var(--pd-blue);

    transform:
        scaleX(0);

    transform-origin: center;

    transition:
        transform var(--pd-transition);
}

.main-navigation a:hover {
    color: var(--pd-blue);

    background:
        rgba(11, 94, 215, 0.055);
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
    transform: scaleX(1);
}

.main-navigation a.active {
    color: var(--pd-blue);

    background:
        rgba(11, 94, 215, 0.07);
}


/* =========================================================
   06. BREADCRUMB
   ========================================================= */

.pd-breadcrumb {
    background:
        #f7f9fc;

    border-bottom:
        1px solid var(--pd-border-light);
}

.pd-breadcrumb .pd-container {
    min-height: 50px;

    display: flex;
    align-items: center;

    gap: 9px;

    overflow: hidden;

    white-space: nowrap;
}

.pd-breadcrumb a,
.pd-breadcrumb span {
    font-size: 12px;
    line-height: 1.4;
}

.pd-breadcrumb a {
    color: var(--pd-blue);

    text-decoration: none;
    font-weight: 600;

    transition:
        color var(--pd-transition);
}

.pd-breadcrumb a:hover {
    color: var(--pd-orange);
}

.pd-breadcrumb span {
    color: #9aa6b5;
}

.pd-breadcrumb span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   07. HERO
   ========================================================= */

.pd-detail-hero {
    position: relative;

    overflow: hidden;

    color: var(--pd-white);

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(11, 94, 215, 0.34),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(244, 124, 32, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #05152e 0%,
            #071d3b 48%,
            #0b2d55 100%
        );
}

.pd-detail-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events: none;
}

.pd-detail-hero::after {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -180px;
    bottom: -300px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 0 60px rgba(255,255,255,.018),
        0 0 0 120px rgba(255,255,255,.012);

    pointer-events: none;
}

.pd-detail-hero-inner {
    position: relative;
    z-index: 2;

    max-width: 920px;

    padding:
        90px 0
        96px;
}


/* =========================================================
   08. HERO LABEL
   ========================================================= */

.pd-detail-label {
    display: inline-flex;
    align-items: center;

    min-height: 32px;

    padding:
        0 12px;

    margin-bottom: 24px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 999px;

    background:
        rgba(255,255,255,.07);

    color: #dceaff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .14em;

    backdrop-filter: blur(8px);
}

.pd-detail-label::before {
    content: "";

    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 50%;

    background:
        var(--pd-orange);

    box-shadow:
        0 0 0 5px rgba(244,124,32,.11);
}


/* =========================================================
   09. HERO H1
   ========================================================= */

.pd-detail-hero h1 {
    max-width: 920px;

    margin:
        0 0 24px;

    color: #ffffff;

    font-size:
        clamp(34px, 5vw, 64px);

    line-height:
        1.04;

    letter-spacing:
        -0.045em;

    font-weight:
        800;

    text-wrap:
        balance;
}

.pd-detail-hero-description {
    max-width: 720px;

    margin: 0;

    color:
        rgba(235, 243, 255, 0.82);

    font-size:
        clamp(16px, 1.7vw, 19px);

    line-height: 1.75;

    font-weight: 400;
}


/* =========================================================
   10. ARTICLE SECTION
   ========================================================= */

.pd-detail-section {
    background:
        var(--pd-surface);

    padding:
        76px 0
        100px;
}

.pd-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    align-items: start;

    gap: 58px;
}


/* =========================================================
   11. ARTICLE CONTENT
   ========================================================= */

.pd-detail-content {
    min-width: 0;

    padding:
        52px 58px 60px;

    background:
        var(--pd-white);

    border:
        1px solid var(--pd-border-light);

    border-radius:
        var(--pd-radius-xl);

    box-shadow:
        var(--pd-shadow-md);
}


/* =========================================================
   12. INTRO
   ========================================================= */

.pd-detail-intro {
    position: relative;

    margin-bottom: 38px;

    padding:
        4px 0 8px 24px;

    border-left:
        3px solid var(--pd-blue);
}

.pd-detail-intro p {
    margin:
        0 0 15px;

    color:
        var(--pd-text-soft);

    font-size: 17px;

    line-height: 1.82;
}

.pd-detail-intro p:last-child {
    margin-bottom: 0;
}

.pd-detail-content strong {
    color:
        var(--pd-navy);

    font-weight: 750;
}


/* =========================================================
   13. TABLE OF CONTENTS
   ========================================================= */

.pd-detail-toc {
    position: relative;

    margin:
        34px 0 54px;

    padding:
        26px 28px;

    background:
        linear-gradient(
            145deg,
            #f7faff,
            #eef4fb
        );

    border:
        1px solid #dce7f3;

    border-radius:
        var(--pd-radius-lg);
}

.pd-detail-toc::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    border-radius:
        22px 0 0 22px;

    background:
        linear-gradient(
            180deg,
            var(--pd-blue),
            var(--pd-orange)
        );
}

.pd-detail-toc-title {
    margin-bottom: 17px;

    color:
        var(--pd-navy);

    font-size: 14px;

    font-weight: 800;

    letter-spacing:
        .02em;
}

.pd-detail-toc ol {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px 28px;

    margin: 0;

    padding-left: 22px;
}

.pd-detail-toc li {
    padding-left: 4px;

    color:
        var(--pd-text-muted);

    font-size: 13px;

    line-height: 1.55;
}

.pd-detail-toc a {
    color:
        var(--pd-text-soft);

    text-decoration: none;

    font-weight: 600;

    transition:
        color var(--pd-transition);
}

.pd-detail-toc a:hover {
    color:
        var(--pd-blue);
}


/* =========================================================
   14. ARTICLE TYPOGRAPHY
   ========================================================= */

.pd-detail-content h2 {
    position: relative;

    margin:
        68px 0 22px;

    padding-left:
        18px;

    color:
        var(--pd-navy);

    font-size:
        clamp(25px, 3vw, 34px);

    line-height:
        1.2;

    letter-spacing:
        -.035em;

    font-weight:
        800;
}

.pd-detail-content h2::before {
    content: "";

    position: absolute;

    top: 4px;
    bottom: 4px;
    left: 0;

    width: 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--pd-blue),
            var(--pd-orange)
        );
}

.pd-detail-content h3 {
    margin:
        34px 0 13px;

    color:
        var(--pd-navy-2);

    font-size:
        18px;

    line-height:
        1.4;

    font-weight:
        750;
}

.pd-detail-content p {
    margin:
        0 0 20px;

    color:
        var(--pd-text-soft);

    font-size:
        16px;

    line-height:
        1.82;
}

.pd-detail-content a {
    color:
        var(--pd-blue);

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;

    transition:
        color var(--pd-transition);
}

.pd-detail-content a:hover {
    color:
        var(--pd-orange);
}


/* =========================================================
   15. LISTS
   ========================================================= */

.pd-detail-content ul {
    margin:
        16px 0 30px;

    padding:
        0;

    list-style: none;
}

.pd-detail-content ul li {
    position: relative;

    margin-bottom: 11px;

    padding:
        12px 16px 12px 42px;

    color:
        var(--pd-text-soft);

    background:
        #f8fafc;

    border:
        1px solid #e8edf3;

    border-radius:
        12px;

    font-size:
        15px;

    line-height:
        1.6;

    transition:
        transform var(--pd-transition),
        border-color var(--pd-transition),
        box-shadow var(--pd-transition);
}

.pd-detail-content ul li::before {
    content: "";

    position: absolute;

    left: 17px;
    top: 18px;

    width: 8px;
    height: 8px;

    border-radius:
        50%;

    background:
        var(--pd-orange);

    box-shadow:
        0 0 0 5px rgba(244,124,32,.10);
}

.pd-detail-content ul li:hover {
    transform:
        translateX(3px);

    border-color:
        #d6e2ef;

    box-shadow:
        var(--pd-shadow-sm);
}


/* =========================================================
   16. HIGHLIGHT BOX
   ========================================================= */

.pd-detail-highlight {
    position: relative;

    overflow: hidden;

    margin:
        32px 0 40px;

    padding:
        28px 30px 28px 34px;

    background:
        linear-gradient(
            135deg,
            #f3f8ff,
            #edf4fb
        );

    border:
        1px solid #d9e5f1;

    border-radius:
        var(--pd-radius-lg);

    color:
        var(--pd-text-soft);

    font-size:
        15px;

    line-height:
        1.75;

    box-shadow:
        0 10px 30px rgba(7,26,51,.045);
}

.pd-detail-highlight::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            var(--pd-blue),
            var(--pd-orange)
        );
}

.pd-detail-highlight strong {
    color:
        var(--pd-navy);

    font-size:
        16px;

    font-weight:
        800;
}


/* =========================================================
   17. COMPARISON HIGHLIGHT
   Based on actual #perbandingan structure
   ========================================================= */

#perbandingan + p + .pd-detail-highlight {
    background:
        linear-gradient(
            145deg,
            #061b3a,
            #0b2d55
        );

    border-color:
        rgba(255,255,255,.08);

    color:
        rgba(235,243,255,.82);

    box-shadow:
        0 20px 50px rgba(7,26,51,.16);
}

#perbandingan + p + .pd-detail-highlight::before {
    background:
        linear-gradient(
            180deg,
            var(--pd-orange),
            #ffb15c
        );
}

#perbandingan + p + .pd-detail-highlight strong {
    display: inline-block;

    margin-top: 3px;

    color:
        #ffffff;

    font-size:
        20px;
}

#perbandingan + p + .pd-detail-highlight br + strong {
    color:
        #ffffff;
}


/* =========================================================
   18. INTERNAL SEO LINK HIGHLIGHT
   ========================================================= */

#industri + p + p + p + p + .pd-detail-highlight {
    background:
        linear-gradient(
            135deg,
            #fff8f2,
            #fffdf9
        );

    border-color:
        #f3dfcf;
}

#industri + p + p + p + p + .pd-detail-highlight::before {
    background:
        var(--pd-orange);
}

#industri + p + p + p + p + .pd-detail-highlight strong {
    color:
        var(--pd-orange-dark);
}

#industri + p + p + p + p + .pd-detail-highlight a {
    display: inline-block;

    margin-top: 5px;

    font-weight:
        700;
}


/* =========================================================
   19. FAQ
   ========================================================= */

.pd-detail-faq {
    display:
        grid;

    gap:
        12px;

    margin:
        28px 0 20px;
}

.pd-detail-faq-item {
    position: relative;

    padding:
        23px 25px;

    background:
        #ffffff;

    border:
        1px solid var(--pd-border);

    border-radius:
        var(--pd-radius-md);

    box-shadow:
        0 4px 14px rgba(7,26,51,.035);

    transition:
        border-color var(--pd-transition),
        box-shadow var(--pd-transition),
        transform var(--pd-transition);
}

.pd-detail-faq-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;
    bottom: 16px;

    width: 3px;

    border-radius:
        999px;

    background:
        var(--pd-blue);

    opacity: 0;

    transition:
        opacity var(--pd-transition);
}

.pd-detail-faq-item:hover {
    transform:
        translateY(-2px);

    border-color:
        #cbd9e8;

    box-shadow:
        var(--pd-shadow-sm);
}

.pd-detail-faq-item:hover::before {
    opacity: 1;
}

.pd-detail-faq-item h3 {
    position: relative;

    margin:
        0 0 10px;

    padding-right:
        28px;

    color:
        var(--pd-navy);

    font-size:
        16px;

    line-height:
        1.5;

    font-weight:
        750;
}

.pd-detail-faq-item h3::after {
    content: "+";

    position: absolute;

    right: 0;
    top: -2px;

    color:
        var(--pd-blue);

    font-size:
        22px;

    font-weight:
        500;
}

.pd-detail-faq-item p {
    margin:
        0;

    color:
        var(--pd-text-soft);

    font-size:
        14px;

    line-height:
        1.75;
}


/* =========================================================
   20. CONCLUSION
   ========================================================= */

.pd-detail-content h2:not([id]) {
    margin-top:
        68px;
}


/* =========================================================
   21. CTA
   ========================================================= */

.pd-detail-product-cta {
    position: relative;

    overflow: hidden;

    margin:
        72px 0 0;

    padding:
        48px 44px;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(11,94,215,.38),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06172f,
            #0a2d55
        );

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:
        var(--pd-radius-xl);

    box-shadow:
        0 24px 60px rgba(7,26,51,.18);
}

.pd-detail-product-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .12;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size:
        38px 38px;

    pointer-events: none;
}

.pd-detail-product-cta > * {
    position: relative;
    z-index: 1;
}

.pd-detail-product-cta-label {
    display: inline-block;

    margin-bottom:
        13px;

    color:
        #ffad65;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}

.pd-detail-product-cta h2 {
    margin:
        0 0 15px;

    padding:
        0;

    color:
        #ffffff;

    font-size:
        clamp(27px, 3vw, 38px);

    line-height:
        1.15;

    letter-spacing:
        -.035em;
}

.pd-detail-product-cta h2::before {
    display:
        none;
}

.pd-detail-product-cta p {
    max-width:
        650px;

    margin:
        0 0 28px;

    color:
        rgba(235,243,255,.78);

    font-size:
        15px;

    line-height:
        1.75;
}


/* =========================================================
   22. CTA BUTTONS
   ========================================================= */

.pd-detail-buttons {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        11px;
}

.pd-detail-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        0 21px;

    border:
        1px solid transparent;

    border-radius:
        11px;

    text-decoration:
        none !important;

    font-size:
        13px;

    font-weight:
        750;

    transition:
        transform var(--pd-transition),
        background var(--pd-transition),
        border-color var(--pd-transition),
        box-shadow var(--pd-transition);
}

.pd-detail-button:hover {
    transform:
        translateY(-2px);
}

.pd-detail-button-primary {
    color:
        #ffffff !important;

    background:
        var(--pd-orange);

    box-shadow:
        0 10px 24px rgba(244,124,32,.25);
}

.pd-detail-button-primary:hover {
    background:
        var(--pd-orange-dark);

    box-shadow:
        0 14px 28px rgba(244,124,32,.3);
}

.pd-detail-button-outline {
    color:
        #ffffff !important;

    background:
        rgba(255,255,255,.055);

    border-color:
        rgba(255,255,255,.22);
}

.pd-detail-button-outline:hover {
    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(255,255,255,.38);
}


/* =========================================================
   23. BOTTOM ARTICLE NAVIGATION
   ========================================================= */

.pd-detail-bottom-nav {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;

    margin:
        42px 0 0;

    padding-top:
        28px;

    border-top:
        1px solid var(--pd-border);
}

.pd-detail-bottom-link {
    min-width:
        0;

    padding:
        18px 20px;

    background:
        #f8fafc;

    border:
        1px solid var(--pd-border-light);

    border-radius:
        var(--pd-radius-md);

    transition:
        border-color var(--pd-transition),
        background var(--pd-transition),
        transform var(--pd-transition);
}

.pd-detail-bottom-link:last-child {
    text-align:
        right;
}

.pd-detail-bottom-link:hover {
    transform:
        translateY(-2px);

    background:
        #ffffff;

    border-color:
        #cddae8;
}

.pd-detail-bottom-link span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--pd-text-muted);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;
}

.pd-detail-bottom-link a {
    color:
        var(--pd-navy);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1.5;
}

.pd-detail-bottom-link a:hover {
    color:
        var(--pd-blue);
}


/* =========================================================
   24. SIDEBAR
   ========================================================= */

.pd-detail-sidebar {
    position:
        sticky;

    top:
        100px;

    display:
        grid;

    gap:
        16px;

    min-width:
        0;
}

.pd-detail-sidebar-card {
    position:
        relative;

    padding:
        25px;

    background:
        #ffffff;

    border:
        1px solid var(--pd-border);

    border-radius:
        var(--pd-radius-lg);

    box-shadow:
        var(--pd-shadow-sm);

    overflow:
        hidden;
}

.pd-detail-sidebar-card::before {
    content: "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--pd-blue),
            var(--pd-orange)
        );
}

.pd-detail-sidebar-label {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--pd-blue);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}

.pd-detail-sidebar-card h2 {
    margin:
        0 0 10px;

    color:
        var(--pd-navy);

    font-size:
        19px;

    line-height:
        1.3;

    letter-spacing:
        -.025em;
}

.pd-detail-sidebar-card p {
    margin:
        0;

    color:
        var(--pd-text-soft);

    font-size:
        13px;

    line-height:
        1.7;
}


/* =========================================================
   25. SIDEBAR LIST
   ========================================================= */

.pd-detail-sidebar-card ul {
    display:
        grid;

    gap:
        7px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.pd-detail-sidebar-card li {
    position:
        relative;

    padding:
        10px 12px 10px 30px;

    color:
        var(--pd-text-soft);

    background:
        #f7f9fc;

    border:
        1px solid #edf1f5;

    border-radius:
        9px;

    font-size:
        12px;

    font-weight:
        600;
}

.pd-detail-sidebar-card li::before {
    content:
        "✓";

    position:
        absolute;

    left:
        11px;

    top:
        9px;

    color:
        var(--pd-blue);

    font-size:
        12px;

    font-weight:
        800;
}


/* =========================================================
   26. SIDEBAR BUTTON
   ========================================================= */

.pd-detail-sidebar-button {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    margin-top:
        18px;

    padding:
        0 16px;

    color:
        #ffffff !important;

    background:
        var(--pd-blue);

    border-radius:
        10px;

    text-decoration:
        none !important;

    font-size:
        12px;

    font-weight:
        750;

    box-shadow:
        0 8px 20px rgba(11,94,215,.18);

    transition:
        transform var(--pd-transition),
        background var(--pd-transition),
        box-shadow var(--pd-transition);
}

.pd-detail-sidebar-button:hover {
    transform:
        translateY(-2px);

    background:
        var(--pd-blue-dark);

    box-shadow:
        0 12px 25px rgba(11,94,215,.25);
}


/* =========================================================
   27. FOOTER
   ========================================================= */

.site-footer {
    color:
        rgba(235,243,255,.72);

    background:
        #06162c;

    border-top:
        1px solid rgba(255,255,255,.05);
}

.footer-inner {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(200px, .7fr);

    gap:
        60px;

    padding:
        64px 0 46px;
}

.footer-brand strong {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;

    letter-spacing:
        -.02em;
}

.footer-brand p {
    max-width:
        440px;

    margin:
        0;

    color:
        rgba(235,243,255,.58);

    font-size:
        13px;

    line-height:
        1.75;
}

.footer-links {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;
}

.footer-links a {
    color:
        rgba(235,243,255,.65);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color var(--pd-transition),
        transform var(--pd-transition);
}

.footer-links a:hover {
    color:
        #ffffff;

    transform:
        translateX(3px);
}

.footer-bottom {
    padding:
        20px 0;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:
        rgba(235,243,255,.4);

    font-size:
        11px;

    line-height:
        1.5;
}


/* =========================================================
   28. FOCUS ACCESSIBILITY
   ========================================================= */

.site-header a:focus-visible,
.pd-detail-content a:focus-visible,
.pd-detail-button:focus-visible,
.pd-detail-sidebar-button:focus-visible {
    outline:
        3px solid rgba(11,94,215,.3);

    outline-offset:
        3px;

    border-radius:
        6px;
}


/* =========================================================
   29. TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .pd-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            280px;

        gap:
            32px;
    }

    .pd-detail-content {
        padding:
            44px 42px 52px;
    }

    .pd-detail-hero-inner {
        padding:
            76px 0 82px;
    }

    .main-navigation {
        gap:
            2px;
    }

    .main-navigation a {
        padding:
            0 9px;

        font-size:
            12px;
    }
}


/* =========================================================
   30. TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 850px) {

    .pd-container,
    .pd-detail-container {
        width:
            min(
                calc(100% - 32px),
                var(--pd-container-width)
            );
    }

    .header-inner {
        min-height:
            68px;

        gap:
            18px;
    }

    .site-logo {
        font-size:
            17px;
    }

    .main-navigation {
        overflow-x:
            auto;

        scrollbar-width:
            none;

        justify-content:
            flex-start;
    }

    .main-navigation::-webkit-scrollbar {
        display:
            none;
    }

    .pd-detail-layout {
        grid-template-columns:
            1fr;
    }

    .pd-detail-sidebar {
        position:
            static;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pd-detail-sidebar-card:last-child {
        grid-column:
            1 / -1;
    }

    .pd-detail-toc ol {
        grid-template-columns:
            1fr;
    }

    .footer-inner {
        grid-template-columns:
            1fr 1fr;

        gap:
            40px;
    }
}


/* =========================================================
   31. MOBILE
   ========================================================= */

@media (max-width: 640px) {

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

    .header-inner {
        min-height:
            62px;

        align-items:
            center;
    }

    .site-logo {
        font-size:
            15px;
    }

    .site-logo::before {
        width:
            8px;

        height:
            24px;
    }

    .main-navigation {
        max-width:
            58vw;
    }

    .main-navigation a {
        min-height:
            38px;

        padding:
            0 8px;

        font-size:
            11px;
    }

    .pd-breadcrumb .pd-container {
        min-height:
            44px;

        gap:
            7px;
    }

    .pd-breadcrumb a,
    .pd-breadcrumb span {
        font-size:
            10px;
    }

    .pd-detail-hero-inner {
        padding:
            58px 0 62px;
    }

    .pd-detail-label {
        margin-bottom:
            18px;

        font-size:
            8px;
    }

    .pd-detail-hero h1 {
        font-size:
            clamp(31px, 10vw, 43px);

        line-height:
            1.07;
    }

    .pd-detail-hero-description {
        font-size:
            14px;

        line-height:
            1.7;
    }

    .pd-detail-section {
        padding:
            42px 0 58px;
    }

    .pd-detail-content {
        padding:
            30px 22px 38px;

        border-radius:
            20px;
    }

    .pd-detail-intro {
        padding-left:
            17px;
    }

    .pd-detail-intro p {
        font-size:
            15px;

        line-height:
            1.75;
    }

    .pd-detail-toc {
        margin:
            28px 0 42px;

        padding:
            21px 20px;
    }

    .pd-detail-toc ol {
        padding-left:
            19px;
    }

    .pd-detail-toc li {
        font-size:
            12px;
    }

    .pd-detail-content h2 {
        margin-top:
            48px;

        font-size:
            25px;

        padding-left:
            15px;
    }

    .pd-detail-content h2::before {
        width:
            4px;
    }

    .pd-detail-content h3 {
        font-size:
            17px;
    }

    .pd-detail-content p {
        font-size:
            14px;

        line-height:
            1.78;
    }

    .pd-detail-content ul li {
        padding:
            11px 13px 11px 36px;

        font-size:
            13px;
    }

    .pd-detail-content ul li::before {
        left:
            13px;
    }

    .pd-detail-highlight {
        padding:
            23px 21px 23px 25px;

        font-size:
            13px;
    }

    .pd-detail-highlight strong {
        font-size:
            15px;
    }

    #perbandingan + p + .pd-detail-highlight strong {
        font-size:
            18px;
    }

    .pd-detail-faq-item {
        padding:
            19px 18px;
    }

    .pd-detail-faq-item h3 {
        font-size:
            14px;

        padding-right:
            25px;
    }

    .pd-detail-faq-item p {
        font-size:
            13px;
    }

    .pd-detail-product-cta {
        margin-top:
            52px;

        padding:
            32px 23px;

        border-radius:
            20px;
    }

    .pd-detail-product-cta h2 {
        font-size:
            28px;
    }

    .pd-detail-product-cta p {
        font-size:
            13px;
    }

    .pd-detail-buttons {
        flex-direction:
            column;
    }

    .pd-detail-button {
        width:
            100%;
    }

    .pd-detail-bottom-nav {
        grid-template-columns:
            1fr;

        gap:
            10px;
    }

    .pd-detail-bottom-link:last-child {
        text-align:
            left;
    }

    .pd-detail-sidebar {
        grid-template-columns:
            1fr;
    }

    .pd-detail-sidebar-card:last-child {
        grid-column:
            auto;
    }

    .footer-inner {
        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            46px 0 34px;
    }

    .footer-links {
        display:
            grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            10px;
    }
}


/* =========================================================
   32. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .main-navigation {
        max-width:
            53vw;
    }

    .main-navigation a {
        padding:
            0 6px;

        font-size:
            10px;
    }

    .site-logo {
        font-size:
            13px;
    }

    .pd-detail-hero h1 {
        font-size:
            30px;
    }

    .pd-detail-content {
        padding:
            26px 18px 34px;
    }

    .pd-detail-toc {
        padding:
            19px 17px;
    }

    .pd-detail-sidebar-card {
        padding:
            21px;
    }
}


/* =========================================================
   33. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* =========================================================
   34. PRINT
   ========================================================= */

@media print {

    .site-header,
    .pd-breadcrumb,
    .pd-detail-sidebar,
    .pd-detail-product-cta,
    .pd-detail-bottom-nav,
    .site-footer {
        display:
            none !important;
    }

    .pd-detail-section {
        padding:
            0;
    }

    .pd-detail-layout {
        display:
            block;
    }

    .pd-detail-content {
        border:
            0;

        box-shadow:
            none;

        padding:
            0;
    }

    .pd-detail-content h2 {
        break-after:
            avoid;
    }
}