/* =====================================================
   BETRACOM ARTICLE
   NAVY PREMIUM DESIGN
===================================================== */

:root {

    --navy: #081b33;
    --navy-dark: #04101f;
    --navy-light: #0d2d50;

    --blue: #0b5ea8;
    --blue-soft: #edf5fc;

    --white: #ffffff;
    --off-white: #f6f8fb;

    --text: #14263a;
    --muted: #718096;

    --border: #e3e9ef;

    --gold: #c7a35d;

    --shadow:
        0 25px 70px rgba(8, 27, 51, .10);

    --radius: 20px;
}


/* =====================================================
   RESET
===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--off-white);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.8;
}

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

a {
    color: inherit;
}


/* =====================================================
   PROGRESS
===================================================== */

.article-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
}

.article-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width .1s linear;
}


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

.article-hero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(11, 94, 168, .35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #04101f 0%,
            #081b33 55%,
            #0d2d50 100%
        );

    color: var(--white);

    padding:
        110px 24px
        100px;
}


.article-hero::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;

    right: -150px;
    top: -150px;
}


.article-hero::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border: 1px solid rgba(199,163,93,.18);
    border-radius: 50%;

    right: 100px;
    bottom: -180px;
}


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

    max-width: 1120px;
    margin: auto;
}


.hero-category {
    display: inline-flex;

    padding: 8px 15px;

    border:
        1px solid
        rgba(199,163,93,.45);

    color: #e3c77f;

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

    letter-spacing: .16em;

    border-radius: 50px;

    margin-bottom: 25px;
}


.hero-inner h1 {

    max-width: 980px;

    font-size:
        clamp(38px, 5vw, 68px);

    line-height: 1.12;

    letter-spacing: -.035em;

    font-weight: 800;
}


.hero-inner h1 span {
    color: #d8b96d;
}


.hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 35px;

    color:
        rgba(255,255,255,.72);

    font-size: 14px;
}


.meta-item {

    display: flex;

    align-items: center;

    gap: 9px;
}


.meta-item svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =====================================================
   WRAPPER
===================================================== */

.article-wrapper {

    max-width: 1180px;

    margin:
        -55px auto
        80px;

    position: relative;

    z-index: 3;
}


/* =====================================================
   FEATURED IMAGE
===================================================== */

.featured-image {

    position: relative;

    height: 570px;

    overflow: hidden;

    border-radius:
        var(--radius);

    background: var(--navy);

    box-shadow:
        0 30px 80px
        rgba(4,16,31,.22);
}


.featured-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease;
}


.featured-image:hover img {
    transform: scale(1.025);
}


.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(4,16,31,.7)
        );
}


.image-caption {

    position: absolute;

    left: 35px;
    bottom: 28px;

    color: white;

    font-size: 14px;

    font-weight: 600;
}


/* =====================================================
   ARTICLE LAYOUT
===================================================== */

.article-layout {

    display: grid;

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

    gap: 70px;

    background: var(--white);

    padding:
        75px 70px;

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


/* =====================================================
   SIDEBAR
===================================================== */

.article-sidebar {

    position: relative;
}


.sidebar-card {

    padding:

        0 0
        25px;

    margin-bottom: 28px;

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


.sidebar-label {

    display: block;

    color: var(--muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .16em;

    margin-bottom: 7px;
}


.sidebar-card strong {

    display: block;

    color: var(--navy);

    font-size: 25px;

    line-height: 1.2;

    margin-bottom: 3px;
}


.sidebar-card p {

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;
}


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

.article-content {

    max-width: 780px;
}


.article-content p {

    font-size: 17px;

    line-height: 1.95;

    color: #3b4b5c;

    margin-bottom: 25px;
}


.article-intro {

    position: relative;

    margin-bottom: 35px;
}


.article-intro p {

    color: var(--navy);

    font-size: 23px;

    line-height: 1.7;

    font-weight: 600;

    margin: 0;
}


.intro-line {

    display: block;

    width: 55px;

    height: 4px;

    background: var(--gold);

    margin-bottom: 20px;
}


.article-content h2 {

    color: var(--navy);

    font-size: 31px;

    line-height: 1.3;

    margin:
        55px 0
        20px;

    letter-spacing: -.02em;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.article-highlight {

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 25px;

    margin:
        40px 0;

    border:
        1px solid
        rgba(11,94,168,.12);

    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #edf5fc
        );

    border-radius: 16px;
}


/* =====================================================
   HIGHLIGHT ICON
===================================================== */

.highlight-icon {

    flex-shrink: 0;

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--navy);

    color: var(--gold);

    font-size: 30px;

    border-radius: 14px;
}


.highlight-icon i {

    font-size: 30px;

    line-height: 1;

}


/* =====================================================
   HIGHLIGHT TEXT
===================================================== */

.article-highlight span {

    display: block;

    color: var(--muted);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;
}


.article-highlight strong {

    display: block;

    color: var(--navy);

    font-size: 24px;

    line-height: 1.3;
}


.article-highlight p {

    font-size: 14px;

    margin: 2px 0 0;
}


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

.contact-grid {

    display: grid;

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

    gap: 18px;

    margin:
        30px 0
        45px;
}


.contact-card {

    padding: 27px;

    background: #f8fafc;

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

    border-radius: 15px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.contact-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(8,27,51,.08);
}


.contact-card > span {

    display: block;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;

    color: var(--muted);

    margin-bottom: 15px;
}


.contact-card a {

    display: block;

    color: var(--navy);

    text-decoration: none;

    font-weight: 700;

    font-size: 15px;

    margin-top: 7px;
}


.contact-card a:hover {
    color: var(--blue);
}


.contact-card small {

    color: var(--muted);

    font-size: 12px;
}


/* =====================================================
   SCHEDULE
===================================================== */

.schedule-box {

    display: flex;

    gap: 25px;

    align-items: center;

    padding: 30px;

    margin:
        35px 0
        60px;

    background: var(--navy);

    color: white;

    border-radius: 18px;

    box-shadow:
        0 20px 45px
        rgba(8,27,51,.15);
}


.schedule-number {

    font-size: 44px;

    font-weight: 800;

    color: rgba(255,255,255,.16);
}


.schedule-content > span {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .15em;

    color: #d8b96d;
}


.schedule-content h3 {

    font-size: 25px;

    margin:
        3px 0
        8px;
}


.schedule-content a {

    display: inline-flex;

    gap: 8px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;
}


.schedule-content a:hover {
    color: #d8b96d;
}


/* =====================================================
   GALLERY
===================================================== */

.gallery-section {
    margin-top: 65px;
}


.section-heading > span {

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .18em;
}


.section-heading h2 {

    margin:
        5px 0
        25px;

    font-size: 32px;
}


.article-gallery {

    display: grid;

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

    gap: 15px;
}


.gallery-item {

    height: 250px;

    overflow: hidden;

    border-radius: 14px;

    background: var(--navy);
}


.gallery-large {

    grid-column: span 2;

    height: 390px;
}


.gallery-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.gallery-item:hover img {
    transform: scale(1.05);
}


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

.article-cta {

    position: relative;

    overflow: hidden;

    margin-top: 45px;

    padding:
        70px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(11,94,168,.45),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );

    color: white;

    border-radius: 20px;
}


.article-cta::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border:
        1px solid
        rgba(199,163,93,.15);

    border-radius: 50%;

    right: -100px;
    bottom: -170px;
}


.cta-content {

    position: relative;

    z-index: 2;

    max-width: 760px;
}


.cta-content > span {

    color: #d8b96d;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .15em;
}


.cta-content h2 {

    font-size:
        clamp(35px, 5vw, 55px);

    line-height: 1.15;

    margin:
        10px 0
        15px;
}


.cta-content p {

    color:
        rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.8;

    max-width: 700px;

    margin-bottom: 28px;
}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    padding:
        15px 22px;

    background: white;

    color: var(--navy);

    text-decoration: none;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 800;

    transition: .3s ease;
}


.cta-button:hover {

    background: #d8b96d;

    transform:
        translateY(-3px);
}


.cta-button span {
    font-size: 20px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.article-navigation {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    margin-top: 20px;
}


.article-nav-back,
.article-nav-next {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 25px;

    background: white;

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

    border-radius: 15px;

    text-decoration: none;

    transition: .3s ease;
}


.article-nav-next {
    justify-content: flex-end;

    text-align: right;
}


.article-nav-back:hover,
.article-nav-next:hover {

    border-color:
        rgba(11,94,168,.3);

    box-shadow:
        0 15px 35px
        rgba(8,27,51,.07);

    transform:
        translateY(-3px);
}


.nav-arrow {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    background: var(--navy);

    color: white;

    border-radius: 50%;

    font-size: 20px;
}


.article-navigation small {

    display: block;

    color: var(--muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .15em;
}


.article-navigation strong {

    display: block;

    color: var(--navy);

    font-size: 14px;

    margin-top: 3px;
}


/* =====================================================
   BACK TO TOP
===================================================== */

.back-top {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: var(--navy);

    color: white;

    font-size: 20px;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px);

    transition: .3s ease;

    z-index: 999;
}


.back-top.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


.back-top:hover {
    background: var(--blue);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .article-hero {

        padding:
            90px 25px
            90px;
    }


    .article-wrapper {

        margin:
            -40px 20px
            60px;
    }


    .article-layout {

        grid-template-columns: 1fr;

        gap: 30px;

        padding:
            50px 40px;
    }


    .article-sidebar {

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 15px;
    }


    .sidebar-card {

        margin: 0;

        border: none;

        padding: 18px;

        background: #f7f9fb;

        border-radius: 12px;
    }


    .sidebar-card strong {
        font-size: 20px;
    }


    .featured-image {
        height: 470px;
    }

}


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

@media (max-width: 600px) {

    .article-hero {

        padding:
            75px 20px
            75px;
    }


    .hero-inner h1 {

        font-size: 37px;

        line-height: 1.16;
    }


    .hero-meta {

        display: grid;

        gap: 12px;

        margin-top: 25px;
    }


    .article-wrapper {

        margin:
            -30px 10px
            45px;
    }


    .featured-image {

        height: 330px;

        border-radius: 15px;
    }


    .image-caption {

        left: 20px;
        bottom: 18px;

        font-size: 12px;
    }


    .article-layout {

        padding:
            35px 20px;

        gap: 25px;

        border-radius: 15px;
    }


    .article-sidebar {

        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .sidebar-card {

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 14px;
    }


    .sidebar-card p {
        margin-left: auto;
    }


    .article-content p {

        font-size: 16px;

        line-height: 1.85;
    }


    .article-intro p {

        font-size: 20px;

        line-height: 1.6;
    }


    .article-content h2 {

        font-size: 27px;

        margin-top: 42px;
    }


    .article-highlight {

        padding: 20px;

        align-items: flex-start;
    }


    .highlight-icon {

        width: 58px;
        height: 58px;

        font-size: 11px;
    }


    .article-highlight strong {
        font-size: 21px;
    }


    .contact-grid {

        grid-template-columns: 1fr;

    }


    .schedule-box {

        padding: 23px;

        gap: 15px;
    }


    .schedule-number {
        font-size: 30px;
    }


    .schedule-content h3 {
        font-size: 21px;
    }


    .article-gallery {

        grid-template-columns:
            1fr;
    }


    .gallery-large {

        grid-column: auto;

        height: 280px;
    }


    .gallery-item {

        height: 230px;
    }


    .article-cta {

        padding:
            45px 25px;

        border-radius: 15px;
    }


    .cta-content h2 {
        font-size: 38px;
    }


    .article-navigation {

        grid-template-columns:
            1fr;
    }


    .article-nav-next {

        justify-content: flex-start;

        text-align: left;

        flex-direction: row-reverse;
    }


    .back-top {

        right: 16px;
        bottom: 16px;

        width: 44px;
        height: 44px;
    }

}
/* =====================================================
   ARTIKEL LAINNYA
===================================================== */

.related-articles {
    margin-top: 75px;
}


/* HEADER */

.related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 30px;
}


.related-label {
    display: block;

    color: #0b5ea8;

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

    letter-spacing: .18em;

    margin-bottom: 7px;
}


.related-header h2 {
    margin: 0;

    color: #081b33;

    font-size: 34px;
    line-height: 1.2;

    letter-spacing: -.025em;
}


.related-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #081b33;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    padding-bottom: 7px;

    border-bottom:
        1px solid #c7a35d;

    transition: .3s ease;
}


.related-all span {
    font-size: 19px;

    transition: transform .3s ease;
}


.related-all:hover {
    color: #0b5ea8;
}


.related-all:hover span {
    transform: translateX(5px);
}


/* GRID */

.related-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;
}


/* CARD */

.related-card {
    display: block;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #e1e7ed;

    border-radius: 18px;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 12px 35px
        rgba(8, 27, 51, .055);

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


.related-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(11, 94, 168, .25);

    box-shadow:
        0 22px 50px
        rgba(8, 27, 51, .12);
}


/* IMAGE */

.related-image {
    position: relative;

    height: 215px;

    overflow: hidden;

    background: #081b33;
}


.related-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .65s ease;
}


.related-card:hover
.related-image img {
    transform: scale(1.06);
}


/* IMAGE DARK OVERLAY */

.related-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(4, 16, 31, .65)
        );

    pointer-events: none;
}


/* NUMBER */

.related-number {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 10px;

    background:
        rgba(8, 27, 51, .88);

    color: #d8b96d;

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

    letter-spacing: .08em;

    backdrop-filter: blur(8px);
}


/* CONTENT */

.related-content {
    padding: 24px 24px 26px;
}


.related-meta {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}


.related-meta span {
    color: #718096;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.related-meta span:first-child {
    color: #0b5ea8;
}


.related-content h3 {
    color: #081b33;

    font-size: 20px;

    line-height: 1.4;

    letter-spacing: -.015em;

    margin: 0 0 12px;
}


.related-content p {
    color: #718096;

    font-size: 14px;

    line-height: 1.7;

    margin: 0 0 20px;
}


/* READ */

.related-read {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #081b33;

    font-size: 13px;

    font-weight: 800;

    border-top:
        1px solid #e7ebef;

    padding-top: 16px;
}


.related-read span {
    color: #0b5ea8;

    font-size: 17px;

    transition:
        transform .3s ease;
}


.related-card:hover
.related-read span {
    transform: translateX(5px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

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

}


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

@media (max-width: 600px) {

    .related-articles {
        margin-top: 50px;
    }


    .related-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .related-header h2 {
        font-size: 29px;
    }


    .related-all {
        font-size: 13px;
    }


    .related-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .related-image {
        height: 220px;
    }


    .related-content {
        padding:
            21px 20px 23px;
    }


    .related-content h3 {
        font-size: 19px;
    }

}