/* =========================================================
   PUSAT DALTON
   ARTICLE DETAIL SYSTEM
   Premium Industrial / Corporate
   Compatible with:
   Artikel/cara-memilih-tangga-aluminium/index.html

   File location:
   /Artikel/artikel-detail.css
   ========================================================= */


/* =========================================================
   01. DETAIL PAGE FOUNDATION
   ========================================================= */

.pd-detail-page {
    --pd-blue: #0b5ed7;
    --pd-blue-dark: #083b82;
    --pd-blue-deep: #062e68;
    --pd-blue-soft: #eef5ff;

    --pd-orange: #f97316;
    --pd-orange-dark: #ea580c;

    --pd-text: #172033;
    --pd-text-soft: #536176;
    --pd-muted: #6b7280;

    --pd-border: #dce4ee;
    --pd-border-soft: #e9eef5;

    --pd-bg: #f6f8fb;
    --pd-white: #ffffff;

    --pd-shadow-sm:
        0 4px 18px rgba(15, 23, 42, 0.06);

    --pd-shadow-md:
        0 12px 35px rgba(15, 23, 42, 0.08);

    color: var(--pd-text);
    background: var(--pd-bg);
}


/* =========================================================
   02. CONTAINER
   ========================================================= */

.pd-detail-page .pd-detail-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   03. BREADCRUMB
   ========================================================= */

.pd-detail-page .pd-breadcrumb {
    background: #ffffff;
    border-bottom: 1px solid var(--pd-border-soft);
}

.pd-detail-page .pd-breadcrumb .pd-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;

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

    gap: 8px;

    min-height: 52px;

    font-size: 13px;
    color: var(--pd-muted);
}

.pd-detail-page .pd-breadcrumb a {
    color: var(--pd-blue);
    text-decoration: none;
    font-weight: 600;

    transition:
        color 0.2s ease;
}

.pd-detail-page .pd-breadcrumb a:hover {
    color: var(--pd-blue-dark);
}

.pd-detail-page .pd-breadcrumb span {
    color: #9aa5b5;
}


/* =========================================================
   04. ARTICLE HERO
   ========================================================= */

.pd-detail-page .pd-detail-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0a438f 0%,
            #0b4fa5 48%,
            #08366f 100%
        );

    color: #ffffff;

    isolation: isolate;
}


/* Decorative circle */

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

    position: absolute;

    width: 420px;
    height: 420px;

    right: -170px;
    top: -230px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* Second decorative circle */

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

    position: absolute;

    width: 270px;
    height: 270px;

    right: -110px;
    bottom: -190px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    pointer-events: none;
}


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

    max-width: 850px;

    padding:
        78px 0
        82px;
}


/* =========================================================
   05. HERO LABEL
   ========================================================= */

.pd-detail-page .pd-detail-label {
    display: inline-flex;

    align-items: center;

    padding: 7px 13px;

    margin-bottom: 20px;

    border: 1px solid rgba(255, 255, 255, 0.24);

    border-radius: 999px;

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

    color: rgba(255, 255, 255, 0.92);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   06. HERO H1
   ========================================================= */

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

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        36px,
        5vw,
        62px
    );

    line-height: 1.06;

    letter-spacing: -0.045em;

    font-weight: 800;
}


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

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

    margin: 24px 0 0;

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

    font-size: 16px;

    line-height: 1.8;

    font-weight: 400;
}


/* =========================================================
   08. ARTICLE MAIN SECTION
   ========================================================= */

.pd-detail-page .pd-detail-section {
    padding: 70px 0 90px;
}


/* =========================================================
   09. ARTICLE + SIDEBAR GRID
   ========================================================= */

.pd-detail-page .pd-detail-layout {
    display: grid;

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

    gap: 42px;

    align-items: start;
}


/* =========================================================
   10. ARTICLE CONTENT
   ========================================================= */

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

    padding: 42px 46px;

    background: var(--pd-white);

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

    border-radius: 18px;

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


/* =========================================================
   11. ARTICLE INTRO
   ========================================================= */

.pd-detail-page .pd-detail-intro {
    margin-bottom: 30px;
}

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

    color: #4f5d73;

    font-size: 16px;

    line-height: 1.85;
}

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

.pd-detail-page .pd-detail-intro strong {
    color: var(--pd-blue-dark);

    font-weight: 700;
}


/* =========================================================
   12. TABLE OF CONTENTS
   ========================================================= */

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

    padding: 24px 26px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f4f8fd 100%
        );

    border: 1px solid #dbe7f5;

    border-radius: 14px;
}


.pd-detail-page .pd-detail-toc-title {
    display: block;

    margin-bottom: 14px;

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

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.02em;
}


.pd-detail-page .pd-detail-toc ol {
    margin: 0;

    padding-left: 21px;
}


.pd-detail-page .pd-detail-toc li {
    margin: 7px 0;

    padding-left: 2px;
}


.pd-detail-page .pd-detail-toc a {
    color: #3f4f66;

    font-size: 14px;

    line-height: 1.6;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


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

    text-decoration: underline;
}


/* =========================================================
   13. ARTICLE TYPOGRAPHY
   ========================================================= */

.pd-detail-page .pd-detail-content h2 {
    margin: 46px 0 15px;

    color: #14213d;

    font-size: 27px;

    line-height: 1.25;

    letter-spacing: -0.02em;

    font-weight: 800;
}


.pd-detail-page .pd-detail-content h2:first-of-type {
    margin-top: 0;
}


.pd-detail-page .pd-detail-content h3 {
    margin: 28px 0 10px;

    color: #183b6b;

    font-size: 20px;

    line-height: 1.35;

    font-weight: 750;
}


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

    color: #536176;

    font-size: 15.5px;

    line-height: 1.85;
}


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


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

    font-weight: 650;

    text-decoration: none;
}


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

    text-decoration: underline;
}


/* =========================================================
   14. INFO BOX
   ========================================================= */

.pd-detail-page .pd-detail-info {
    margin: 32px 0;

    padding: 22px 24px;

    background: #f5f9ff;

    border: 1px solid #d6e5f7;

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

    border-radius: 12px;
}


.pd-detail-page .pd-detail-info strong {
    display: block;

    margin-bottom: 8px;

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

    font-size: 15px;

    font-weight: 800;
}


.pd-detail-page .pd-detail-info p {
    margin: 0;

    font-size: 14.5px;
}


/* =========================================================
   15. TABLE
   ========================================================= */

.pd-detail-page .pd-detail-table-wrapper {
    width: 100%;

    margin: 32px 0;

    overflow-x: auto;

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

    border-radius: 12px;
}


.pd-detail-page .pd-detail-table {
    width: 100%;

    min-width: 580px;

    border-collapse: collapse;

    background: #ffffff;
}


.pd-detail-page .pd-detail-table th {
    padding: 15px 17px;

    background: #edf4fc;

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

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

    text-align: left;

    font-size: 13px;

    font-weight: 800;
}


.pd-detail-page .pd-detail-table td {
    padding: 15px 17px;

    color: #536176;

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

    font-size: 14px;

    line-height: 1.6;

    vertical-align: top;
}


.pd-detail-page .pd-detail-table tbody tr:last-child td {
    border-bottom: 0;
}


.pd-detail-page .pd-detail-table tbody tr:hover {
    background: #fafcff;
}


/* =========================================================
   16. RELATED ARTICLE
   ========================================================= */

.pd-detail-page .pd-detail-related {
    margin: 42px 0;

    padding: 27px 29px;

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #f1f6fc
        );

    border:
        1px solid
        #d9e5f2;

    border-radius: 14px;
}


.pd-detail-page .pd-detail-related-label {
    display: block;

    margin-bottom: 9px;

    color: var(--pd-orange-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.pd-detail-page .pd-detail-related h3 {
    margin: 0 0 9px;

    color: #173963;

    font-size: 21px;
}


.pd-detail-page .pd-detail-related p {
    margin-bottom: 17px;

    font-size: 14px;
}


.pd-detail-page .pd-detail-related ul {
    margin: 0;

    padding-left: 20px;
}


.pd-detail-page .pd-detail-related li {
    margin: 8px 0;
}


.pd-detail-page .pd-detail-related a {
    font-size: 14px;
}


/* =========================================================
   17. PRODUCT LINKS
   ========================================================= */

.pd-detail-page .pd-detail-product-links {
    display: grid;

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

    gap: 12px;

    margin: 24px 0 38px;
}


.pd-detail-page .pd-detail-product-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 16px 18px;

    background: #ffffff;

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

    border-radius: 11px;

    color: #23405f !important;

    font-size: 14px;

    line-height: 1.45;

    text-decoration: none !important;

    box-shadow:
        0 3px 12px
        rgba(15, 23, 42, 0.04);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


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

    border-color:
        var(--pd-blue);

    box-shadow:
        0 9px 22px
        rgba(11, 94, 215, 0.11);

    color:
        var(--pd-blue) !important;
}


.pd-detail-page .pd-detail-product-link > span:last-child {
    flex: 0 0 auto;

    color: var(--pd-blue);

    font-size: 18px;

    font-weight: 700;
}


/* =========================================================
   18. FAQ
   ========================================================= */

.pd-detail-page .pd-detail-faq {
    margin-top: 50px;
}


.pd-detail-page .pd-detail-faq h2 {
    margin-bottom: 20px;
}


.pd-detail-page .pd-detail-faq-item {
    margin-bottom: 12px;

    padding: 21px 23px;

    background: #ffffff;

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

    border-radius: 12px;
}


.pd-detail-page .pd-detail-faq-item h3 {
    margin: 0 0 8px;

    color: #173963;

    font-size: 16px;

    line-height: 1.45;
}


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

    color: #59677b;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   19. PRODUCT CTA
   ========================================================= */

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

    padding: 40px 42px;

    background:
        linear-gradient(
            135deg,
            #083b82,
            #0b5ed7
        );

    border-radius: 18px;

    color: #ffffff;

    box-shadow:
        0 15px 35px
        rgba(8, 59, 130, 0.18);
}


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

    margin-bottom: 10px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


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

    color: #ffffff;

    font-size: 28px;

    line-height: 1.25;
}


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

    margin: 0;

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

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   20. CTA BUTTONS
   ========================================================= */

.pd-detail-page .pd-detail-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 24px;
}


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

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 20px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 750;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


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


.pd-detail-page .pd-detail-button-primary {
    background: #ffffff;

    color: #0b4fa5 !important;
}


.pd-detail-page .pd-detail-button-primary:hover {
    background: #f2f6fb;
}


.pd-detail-page .pd-detail-button-outline {
    border:
        1px solid
        rgba(255, 255, 255, 0.45);

    color: #ffffff !important;

    background:
        rgba(255, 255, 255, 0.06);
}


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

    border-color:
        rgba(255, 255, 255, 0.7);
}


/* =========================================================
   21. BOTTOM NAVIGATION
   ========================================================= */

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

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

    gap: 14px;

    margin-top: 35px;

    padding-top: 28px;

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


.pd-detail-page .pd-detail-bottom-link {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 17px 18px;

    background: #f8fafc;

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

    border-radius: 11px;
}


.pd-detail-page .pd-detail-bottom-link > span {
    color: #8a96a8;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.pd-detail-page .pd-detail-bottom-link a {
    color: #234b78;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   22. SIDEBAR
   ========================================================= */

.pd-detail-page .pd-detail-sidebar {
    min-width: 0;

    position: sticky;

    top: 95px;
}


.pd-detail-page .pd-detail-sidebar-grid {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


.pd-detail-page .pd-detail-sidebar-box {
    padding: 22px;

    background: #ffffff;

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

    border-radius: 14px;

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


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

    margin-bottom: 8px;

    color: var(--pd-orange-dark);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.pd-detail-page .pd-detail-sidebar-box h3 {
    margin: 0 0 10px;

    color: #173963;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 800;
}


.pd-detail-page .pd-detail-sidebar-box p {
    margin: 0;

    color: #647187;

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   23. SIDEBAR LINKS
   ========================================================= */

.pd-detail-page .pd-detail-sidebar-links {
    list-style: none;

    margin: 0;

    padding: 0;
}


.pd-detail-page .pd-detail-sidebar-links li {
    border-bottom:
        1px solid
        var(--pd-border-soft);
}


.pd-detail-page .pd-detail-sidebar-links li:last-child {
    border-bottom: 0;
}


.pd-detail-page .pd-detail-sidebar-links a {
    display: block;

    padding: 11px 0;

    color: #43546a;

    font-size: 13px;

    line-height: 1.55;

    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}


.pd-detail-page .pd-detail-sidebar-links a:hover {
    padding-left: 5px;

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


/* =========================================================
   24. FOOTER
   ========================================================= */

.pd-detail-page .pd-footer {
    margin-top: 0;
}


/* =========================================================
   25. RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1024px) {

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

        gap: 25px;
    }

    .pd-detail-page .pd-detail-content {
        padding: 34px 32px;
    }

    .pd-detail-page .pd-detail-hero-inner {
        padding:
            65px 0
            70px;
    }

    .pd-detail-page .pd-detail-sidebar-box {
        padding: 19px;
    }
}


/* =========================================================
   26. RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 820px) {

    .pd-detail-page .pd-detail-container {
        width: min(
            100% - 30px,
            720px
        );
    }


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

        gap: 28px;
    }


    .pd-detail-page .pd-detail-sidebar {
        position: static;
    }


    .pd-detail-page .pd-detail-sidebar-grid {
        display: grid;

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

        gap: 14px;
    }


    .pd-detail-page .pd-detail-hero-inner {
        padding:
            55px 0
            60px;
    }


    .pd-detail-page .pd-detail-hero h1 {
        font-size: clamp(
            34px,
            8vw,
            48px
        );
    }


    .pd-detail-page .pd-detail-product-links {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   27. RESPONSIVE SMALL MOBILE
   ========================================================= */

@media (max-width: 560px) {

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


    .pd-detail-page .pd-breadcrumb .pd-container {
        width: calc(100% - 24px);

        min-height: 48px;

        font-size: 11px;
    }


    .pd-detail-page .pd-detail-hero-inner {
        padding:
            45px 0
            50px;
    }


    .pd-detail-page .pd-detail-label {
        margin-bottom: 15px;

        padding: 6px 10px;

        font-size: 9px;
    }


    .pd-detail-page .pd-detail-hero h1 {
        font-size: 32px;

        line-height: 1.08;

        letter-spacing: -0.035em;
    }


    .pd-detail-page .pd-detail-hero-description {
        margin-top: 18px;

        font-size: 13px;

        line-height: 1.7;
    }


    .pd-detail-page .pd-detail-section {
        padding:
            38px 0
            55px;
    }


    .pd-detail-page .pd-detail-content {
        padding:
            26px 20px;

        border-radius: 14px;
    }


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

        line-height: 1.8;
    }


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

        font-size: 23px;
    }


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


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

        line-height: 1.8;
    }


    .pd-detail-page .pd-detail-toc {
        padding:
            19px 18px;

        margin:
            25px 0
            32px;
    }


    .pd-detail-page .pd-detail-toc a {
        font-size: 13px;
    }


    .pd-detail-page .pd-detail-info {
        padding:
            18px 18px;
    }


    .pd-detail-page .pd-detail-related {
        padding:
            21px 19px;
    }


    .pd-detail-page .pd-detail-product-cta {
        padding:
            28px 21px;

        border-radius: 14px;
    }


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


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


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


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


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


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

.pd-detail-page a:focus-visible {
    outline:
        3px solid
        rgba(11, 94, 215, 0.35);

    outline-offset: 3px;

    border-radius: 5px;
}


/* =========================================================
   29. REDUCED MOTION
   ========================================================= */

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

    .pd-detail-page *,
    .pd-detail-page *::before,
    .pd-detail-page *::after {
        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }
}