@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    /* Brand Colors */
    --brand-red: #ea2129;
    --brand-dark: #222222;
    --brand-darker: rgb(23, 23, 23);
    --brand-gray: #333333;

    /* Text Colors — tidak terlalu kontras, cocok untuk dark background */
    --text-primary:   #f1f1f1;   /* teks utama, soft white */
    --text-secondary: #b0b0b0;   /* teks sekunder, abu muted */
    --text-muted:     #787878;   /* teks kecil / placeholder */
    --text-faint:     #4f4f4f;   /* teks sangat redup / disabled */
    --text-accent:    #e05a60;   /* aksen merah brand, lebih soft dari --brand-red */
    --text-accent-dim:#9e3038;   /* aksen merah gelap / subtle link */
    --text-on-red:    #ffd6d7;   /* teks di atas background --brand-red */
    --text-on-dark:   #cccccc;   /* teks di atas --brand-dark / --brand-gray */

    /* ── Bootstrap Token Overrides ── */

    /* Primary → brand-red */
    --bs-primary:            #ea2129;
    --bs-primary-rgb:        234, 33, 41;
    --bs-primary-bg-subtle:  #3a0a0c;
    --bs-primary-border-subtle: #7a1115;
    --bs-primary-text-emphasis: #f08589;

    /* Secondary → brand-gray */
    --bs-secondary:          #333333;
    --bs-secondary-rgb:      51, 51, 51;
    --bs-secondary-bg-subtle: #1a1a1a;
    --bs-secondary-border-subtle: #444444;
    --bs-secondary-text-emphasis: #b0b0b0;

    /* Dark → brand-dark */
    --bs-dark:               #222222;
    --bs-dark-rgb:           34, 34, 34;
    --bs-dark-bg-subtle:     #111111;
    --bs-dark-border-subtle: #333333;
    --bs-dark-text-emphasis: #cccccc;

    /* Danger → brand-red (alias) */
    --bs-danger:             #ea2129;
    --bs-danger-rgb:         234, 33, 41;
    --bs-danger-bg-subtle:   #3a0a0c;
    --bs-danger-border-subtle: #7a1115;
    --bs-danger-text-emphasis: #f08589;

    /* Body (dark theme) */
    --bs-body-bg:            #222222;
    --bs-body-color:         #f1f1f1;
    --bs-body-color-rgb:     241, 241, 241;

    /* Surface / emphasis */
    --bs-emphasis-color:     #f1f1f1;
    --bs-emphasis-color-rgb: 241, 241, 241;
    --bs-secondary-color:    #b0b0b0;
    --bs-secondary-color-rgb:176, 176, 176;
    --bs-tertiary-color:     #787878;
    --bs-tertiary-color-rgb: 120, 120, 120;
    --bs-tertiary-bg:        #2c2c2c;
    --bs-secondary-bg:       #2a2a2a;

    /* Border */
    --bs-border-color:        #3a3a3a;
    --bs-border-color-translucent: rgba(255,255,255,0.1);

    /* Link */
    --bs-link-color:          #ea2129;
    --bs-link-color-rgb:      234, 33, 41;
    --bs-link-hover-color:    #c41820;
    --bs-link-hover-color-rgb:196, 24, 32;

    /* Focus ring */
    --bs-focus-ring-color:    rgba(234, 33, 41, 0.35);
    --bs-focus-ring-width:    0.25rem;

    /* Form */
    --bs-form-check-input-checked-bg-color:    #ea2129;
    --bs-form-check-input-checked-border-color:#ea2129;
    --bs-form-check-input-focus-box-shadow:    0 0 0 0.25rem rgba(234,33,41,0.35);

    /* Navbar */
    --bs-navbar-active-color: #ea2129;
    --bs-navbar-brand-color:  #f1f1f1;
    --bs-navbar-color:        #b0b0b0;

    /* Nav tabs / pills */
    --bs-nav-link-color:      #b0b0b0;
    --bs-nav-link-hover-color:#f1f1f1;
    --bs-nav-pills-link-active-bg: #ea2129;

    /* Pagination */
    --bs-pagination-active-bg:          #ea2129;
    --bs-pagination-active-border-color:#ea2129;
    --bs-pagination-active-color:       #fff;
    --bs-pagination-bg:                 #222222;
    --bs-pagination-color:              #b0b0b0;
    --bs-pagination-border-color:       #3a3a3a;
    --bs-pagination-hover-bg:           #333333;
    --bs-pagination-hover-color:        #f1f1f1;
    --bs-pagination-hover-border-color: #444444;

    /* Badge / highlight */
    --bs-highlight-bg:        #3a0a0c;

    /* Card */
    --bs-card-bg:             #2a2a2a;
    --bs-card-border-color:   #3a3a3a;
    --bs-card-cap-bg:         #242424;

    /* Dropdown */
    --bs-dropdown-bg:              #2a2a2a;
    --bs-dropdown-border-color:    #3a3a3a;
    --bs-dropdown-link-color:      #b0b0b0;
    --bs-dropdown-link-hover-bg:   #333333;
    --bs-dropdown-link-hover-color:#f1f1f1;
    --bs-dropdown-link-active-bg:  #ea2129;
    --bs-dropdown-link-active-color:#fff;

    /* Modal */
    --bs-modal-bg:            #2a2a2a;
    --bs-modal-border-color:  #3a3a3a;
    --bs-modal-header-bg:     #222222;
    --bs-modal-footer-bg:     #222222;

    /* Toast / Popover / Tooltip */
    --bs-toast-bg:            rgba(34,34,34,0.92);
    --bs-toast-border-color:  rgba(255,255,255,0.1);
    --bs-popover-bg:          #2a2a2a;
    --bs-popover-border-color:#3a3a3a;
    --bs-tooltip-bg:          #333333;
    --bs-tooltip-color:       #f1f1f1;

    /* Input / Form control */
    --bs-input-bg:                  #2a2a2a;
    --bs-input-color:               #f1f1f1;
    --bs-input-border-color:        #3a3a3a;
    --bs-input-focus-border-color:  #ea2129;
    --bs-input-focus-box-shadow:    0 0 0 0.25rem rgba(234,33,41,0.3);
    --bs-input-placeholder-color:   #787878;
    --bs-input-disabled-bg:         #1e1e1e;
    --bs-input-disabled-border-color:#2e2e2e;

    /* Table */
    --bs-table-bg:              transparent;
    --bs-table-striped-bg:      rgba(255,255,255,0.03);
    --bs-table-hover-bg:        rgba(255,255,255,0.05);
    --bs-table-border-color:    #3a3a3a;
    --bs-table-color:           #f1f1f1;
}

.bg-brand-red {
    background-color: var(--brand-red);
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}

.bg-brand-darker {
    background-color: var(--brand-darker);
}

.bg-brand-gray {
    background-color: var(--brand-gray);
}

.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-faint {
    color: var(--text-faint);
}

.text-accent {
    color: var(--text-accent);
}

.text-accent-dim {
    color: var(--text-accent-dim);
}

.text-on-red {
    color: var(--text-on-red);
}





/* Bootstrap Overrides */

/* btn-primary → brand-red */
.btn-primary {
    --bs-btn-bg:                 #ea2129;
    --bs-btn-border-color:       #ea2129;
    --bs-btn-color:              #fff;
    --bs-btn-hover-bg:           #c41820;
    --bs-btn-hover-border-color: #b01520;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #a81319;
    --bs-btn-active-border-color:#9e1018;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   234, 33, 41;
    --bs-btn-disabled-bg:        #ea2129;
    --bs-btn-disabled-border-color: #ea2129;
}

/* btn-outline-primary → brand-red outline */
.btn-outline-primary {
    --bs-btn-color:              #ea2129;
    --bs-btn-border-color:       #ea2129;
    --bs-btn-hover-bg:           #ea2129;
    --bs-btn-hover-border-color: #ea2129;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #c41820;
    --bs-btn-active-border-color:#c41820;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   234, 33, 41;
}

/* btn-secondary → brand-gray */
.btn-secondary {
    --bs-btn-bg:                 #333333;
    --bs-btn-border-color:       #333333;
    --bs-btn-color:              #f1f1f1;
    --bs-btn-hover-bg:           #444444;
    --bs-btn-hover-border-color: #444444;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #555555;
    --bs-btn-active-border-color:#555555;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   51, 51, 51;
    --bs-btn-disabled-bg:        #333333;
    --bs-btn-disabled-border-color: #333333;
}

/* btn-outline-secondary → brand-gray outline */
.btn-outline-secondary {
    --bs-btn-color:              #aaaaaa;
    --bs-btn-border-color:       #333333;
    --bs-btn-hover-bg:           #333333;
    --bs-btn-hover-border-color: #333333;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #444444;
    --bs-btn-active-border-color:#444444;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   51, 51, 51;
}

/* btn-dark → brand-dark */
.btn-dark {
    --bs-btn-bg:                 #222222;
    --bs-btn-border-color:       #222222;
    --bs-btn-color:              #f1f1f1;
    --bs-btn-hover-bg:           #333333;
    --bs-btn-hover-border-color: #333333;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #444444;
    --bs-btn-active-border-color:#444444;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   34, 34, 34;
    --bs-btn-disabled-bg:        #222222;
    --bs-btn-disabled-border-color: #222222;
}

/* btn-outline-dark → brand-dark outline */
.btn-outline-dark {
    --bs-btn-color:              #f1f1f1;
    --bs-btn-border-color:       #222222;
    --bs-btn-hover-bg:           #222222;
    --bs-btn-hover-border-color: #222222;
    --bs-btn-hover-color:        #f1f1f1;
    --bs-btn-active-bg:          #333333;
    --bs-btn-active-border-color:#333333;
    --bs-btn-active-color:       #f1f1f1;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   34, 34, 34;
}

/* btn-danger → brand-red (alias) */
.btn-danger {
    --bs-btn-bg:                 #ea2129;
    --bs-btn-border-color:       #ea2129;
    --bs-btn-color:              #fff;
    --bs-btn-hover-bg:           #c41820;
    --bs-btn-hover-border-color: #b01520;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #a81319;
    --bs-btn-active-border-color:#9e1018;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   234, 33, 41;
    --bs-btn-disabled-bg:        #ea2129;
    --bs-btn-disabled-border-color: #ea2129;
}

/* btn-outline-danger → brand-red outline */
.btn-outline-danger {
    --bs-btn-color:              #ea2129;
    --bs-btn-border-color:       #ea2129;
    --bs-btn-hover-bg:           #ea2129;
    --bs-btn-hover-border-color: #ea2129;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #c41820;
    --bs-btn-active-border-color:#c41820;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   234, 33, 41;
}

/* btn-light → muted on dark bg */
.btn-light {
    --bs-btn-bg:                 #3a3a3a;
    --bs-btn-border-color:       #3a3a3a;
    --bs-btn-color:              #f1f1f1;
    --bs-btn-hover-bg:           #4a4a4a;
    --bs-btn-hover-border-color: #4a4a4a;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #5a5a5a;
    --bs-btn-active-border-color:#5a5a5a;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   58, 58, 58;
}

/* btn-outline-light */
.btn-outline-light {
    --bs-btn-color:              #f1f1f1;
    --bs-btn-border-color:       #555555;
    --bs-btn-hover-bg:           #3a3a3a;
    --bs-btn-hover-border-color: #555555;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-bg:          #4a4a4a;
    --bs-btn-active-border-color:#555555;
    --bs-btn-active-color:       #fff;
    --bs-btn-active-shadow:      inset 0 3px 5px rgba(0,0,0,0.3);
    --bs-btn-focus-shadow-rgb:   85, 85, 85;
}

/* btn-link */
.btn-link {
    --bs-btn-color:       #ea2129;
    --bs-btn-hover-color: #c41820;
    --bs-btn-active-color:#a81319;
    color: var(--brand-red);
    text-decoration: none;
}
.btn-link:hover,
.btn-link:focus {
    color: #c41820;
    text-decoration: underline;
}

/* Form Controls — focus & state overrides */
.form-control:focus,
.form-control-plaintext:focus {
    border-color: #ea2129;
    box-shadow: none;
    outline: none;
}

.form-select:focus {
    border-color: #ea2129;
    box-shadow: none;
    outline: none;
}

.form-check-input:focus {
    border-color: #ea2129;
    box-shadow: none;
    outline: none;
}

.form-check-input:checked {
    background-color: #ea2129;
    border-color: #ea2129;
}

.form-check-input:checked:focus {
    box-shadow: none;
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: none;
}
.form-range:focus::-moz-range-thumb {
    box-shadow: none;
}
.form-range::-webkit-slider-thumb {
    background-color: #ea2129;
}
.form-range::-moz-range-thumb {
    background-color: #ea2129;
}

.input-group-text {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #b0b0b0;
}

/* End */


.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Poppins", sans-serif;
    background-color: var(--brand-dark);
    color: #f1f1f1;
    overflow-x: hidden;
}

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

.content-wrapper {
    padding: 50px 0px;
    background: linear-gradient(
        to bottom,
        rgb(20, 20, 20) 40%,
        rgba(0, 0, 0, 1) 100%
    );
}

.top-logo {
    height: 48px;
}

.nav-blur {
    background-color: rgba(30, 30, 32, 0.3) !important;
    backdrop-filter: saturate(280%) blur(10px);
}

#main-top-nav .nav-list li {
    list-style: none;
}

#main-top-nav .nav-link {
    color: #fbfbfb;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.3s ease;
}

#main-top-nav .nav-link:hover {
    color: #ffffff;
    font-weight: 400;
}
#main-top-nav .icon-search .material-symbols-outlined,
#main-top-nav .icon-menu .material-symbols-outlined {
    font-size: 2rem;
    color: #5e5e5e;
    cursor: pointer;
    transition: color 0.3s ease;
}

#main-top-nav .icon-search:hover .material-symbols-outlined,
#main-top-nav .icon-menu:hover .material-symbols-outlined {
    color: #ffffff;
}
.btn-sign-in {
    color: #fbfbfb;
    padding: 6px 24px;
    font-size: 1rem;
    font-weight: 300;

    background-color: transparent;
    border: 1px solid #fbfbfb;
    border-radius: 4px;
}

.btn-sign-in:hover {
    background-color: #fbfbfb;
    color: var(--brand-dark);
    font-weight: 300;
}

/* Footer */
.hero-shade {
    background: linear-gradient(
        to bottom,
        rgb(13 13 13 / 20%) 0%,
        rgb(0 0 0) 100%
    );
}

.banner-shade {
    background: linear-gradient(
        to bottom,
        rgb(0 0 0) 0%,
        rgb(0 0 0) 30%,
        rgba(0, 0, 0, 0.856) 100%
    );
}

.logistic-img {
    width: auto;
    height: 2rem;
}
/* End Footer */

/* ---- Utils ---- */

/* Sizing Class */
.size-4 {
    width: 1rem;
    height: 1rem;
}

.size-5 {
    width: 1.25rem;
    height: 1.25rem;
}

.size-6 {
    width: 1.5rem;
    height: 1.5rem;
}

.size-7 {
    width: 1.75rem;
    height: 1.75rem;
}

.size-8 {
    width: 2rem;
    height: 2rem;
}
/* End Sizing Class */

/* Responsive Class */
.footer-img-nsa {
    width: auto;
    height: 50px;
}
.footer-img-text {
    width: auto;
    height: 50px;
}

.f-title {
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 12px;
}
.f-link {
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 6px 0;
    font-size: 11px;
}

@media (min-width: 576px) {
    .footer-img-nsa {
        max-width: 20%;
        height: auto;
    }
    .footer-img-text {
        max-width: 25%;
        height: auto;
    }

    .f-title {
        font-size: 20px;
        text-decoration: underline;
        text-underline-offset: 12px;
    }
    .f-link {
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 6px 0;
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .f-title {
        font-size: 20px;
        text-decoration: underline;
        text-underline-offset: 12px;
    }
    .f-link {
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 6px 0;
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    .footer-img-nsa {
        max-width: 40%;
        height: auto;
    }
    .footer-img-text {
        max-width: 45%;
        height: auto;
    }

    .f-title {
        font-size: 20px;
        text-decoration: underline;
        text-underline-offset: 12px;
    }
    .f-link {
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 6px 0;
        font-size: 14px;
    }
}
/* End Responsive Class */

/* ---- End Utils ---- */