/* =============================================================
   SuWeC-14 modern override — mobile-first
   Dimuat SETELAH Mamba/assets/css/style.css (menimpa selektif).
   Semua section & item lama dipertahankan, hanya tampilan baru.
   ============================================================= */

:root {
    --sw-navy: #0c2340;
    --sw-navy-2: #091b30;
    --sw-blue: #14508c;
    --sw-accent: #12b5cb;
    --sw-accent-2: #0e8fa3;
    --sw-gold: #f6a821;
    --sw-ink: #152536;
    --sw-muted: #5b7186;
    --sw-bg: #f4f8fb;
    --sw-radius: 16px;
    --sw-shadow: 0 10px 30px rgba(12, 35, 64, .10);
}

/* ---------- Base ---------- */
body {
    color: var(--sw-ink);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    color: var(--sw-navy);
}
section { padding: 56px 0; overflow: hidden; }
@media (min-width: 768px) {
    section { padding: 88px 0; }
}

/* ---------- Section title ---------- */
.section-title { padding-bottom: 28px; text-align: center; }
.section-title h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .3px;
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 12px;
}
.section-title h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 58px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sw-accent), var(--sw-blue));
}
.section-title p { color: var(--sw-muted); font-size: 15px; max-width: 720px; margin: 0 auto; }
@media (min-width: 768px) {
    .section-title h2 { font-size: 34px; }
}

/* ---------- Topbar ---------- */
#topbar {
    background: var(--sw-navy-2);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    padding: 8px 0;
}
#topbar a { color: rgba(255, 255, 255, .85); }
#topbar .social-links a {
    color: rgba(255, 255, 255, .6);
    padding: 0 6px;
    transition: color .2s;
}
#topbar .social-links a:hover { color: var(--sw-accent); }

/* ---------- Header ---------- */
#header {
    background: rgba(12, 35, 64, .95);
    padding: 14px 0;
    transition: all .3s ease;
}
#header.header-scrolled {
    background: rgba(9, 27, 48, .97);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
    padding: 10px 0;
}
#header .logo h1 { margin: 0; }
#header .logo h1 a {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: .5px;
    color: #fff;
}
#header .logo h1 a span { color: var(--sw-accent); }

.nav-menu ul li a {
    color: rgba(255, 255, 255, .88);
    font-weight: 500;
    border-radius: 999px;
    transition: all .2s;
}
.nav-menu ul li a:hover,
.nav-menu .active > a {
    color: #fff;
    background: rgba(18, 181, 203, .18);
}
.mobile-nav-toggle { color: #fff; }
.mobile-nav { background: var(--sw-navy-2); }
.mobile-nav.overly, .mobile-nav-overly { background: rgba(9, 27, 48, .7); }

/* ---------- Hero ---------- */
#hero { height: 100vh; min-height: 580px; }
#hero .carousel-item {
    background-size: cover;
    background-position: center;
}
#hero .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 35, 64, .82) 0%, rgba(12, 35, 64, .55) 45%, rgba(9, 20, 36, .88) 100%);
}
#hero .carousel-container { height: 100%; display: flex; align-items: center; }
#hero .carousel-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-bottom: 40px;
}
#hero .carousel-content h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
#hero .carousel-content h2 span { color: var(--sw-accent); }
.hero-theme {
    display: inline-block;
    max-width: 640px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 10px 20px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.btn-register,
.btn-get-started {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .6px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 12px 30px;
    transition: all .25s ease;
    display: inline-block;
}
.btn-register {
    color: #fff;
    background: linear-gradient(135deg, var(--sw-accent), var(--sw-blue));
    box-shadow: 0 8px 22px rgba(18, 181, 203, .38);
}
.btn-register:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18, 181, 203, .5); }
.btn-get-started {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .65);
}
.btn-get-started:hover { color: #fff; background: rgba(255, 255, 255, .14); }

.about-lists{
    padding: 20px;
}

/* Countdown */
.sw-countdown {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
.sw-countdown .cell {
    min-width: 66px;
    padding: 10px 8px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.sw-countdown .cell b {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.sw-countdown .cell span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .72);
}
@media (min-width: 768px) {
    #hero .carousel-content h2 { font-size: 44px; }
    .hero-theme { font-size: 19px; }
    .sw-countdown .cell { min-width: 84px; }
    .sw-countdown .cell b { font-size: 30px; }
}

#hero .carousel-control-prev, #hero .carousel-control-next { width: 44px; opacity: .55; }
#hero .carousel-control-prev:hover, #hero .carousel-control-next:hover { opacity: 1; }

/* ---------- About / Sambutan ---------- */
.about { background: #fff; }
.about .col-lg-3 img {
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    padding: 0 !important;
    margin: 0 auto 18px;
    display: block;
}
.about-content { padding-bottom: 0 !important; }
.about-content .icon-box,
.about .icon-box {
    background: var(--sw-card, #fff);
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    padding: 24px 20px;
    margin-bottom: 14px;
}
@media (min-width: 992px) {
    .about-content .icon-box, .about .icon-box { padding: 32px 36px; }
}
.about p { line-height: 1.75; }

/* ---------- Timeline edisi (about-lists) ---------- */
.about-lists { background: var(--sw-bg); }
.about-lists .content-item {
    background: #fff;
    background-clip: padding-box;
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    border: 8px solid transparent;
    border-top-color: var(--sw-accent);
    padding: 14px 12px;
    margin-bottom: 16px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.about-lists .content-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(12, 35, 64, .16);
}
.about-lists .content-item h4 { font-weight: 800; font-size: 17px; margin-bottom: 4px; }
.about-lists .content-item span {
    display: inline-block;
    background: rgba(18, 181, 203, .12);
    color: var(--sw-accent-2);
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    padding: 2px 14px;
    margin-bottom: 10px;
}
.about-lists .content-item p { color: var(--sw-muted); font-size: 14px; margin: 0; }
/* edisi berjalan disorot emas */
.about-lists .content-item:last-child { border-top-color: var(--sw-gold); }
.about-lists .content-item:last-child span { background: rgba(246, 168, 33, .15); color: #c07d00; }

/* ---------- Video / identitas sections ---------- */
.video-box img { border-radius: var(--sw-radius); }
.video-box .play-btn {
    background: linear-gradient(135deg, var(--sw-accent), var(--sw-blue)) !important;
    box-shadow: 0 10px 26px rgba(18, 181, 203, .45);
}

/* ---------- Counts ---------- */
.counts.section-bg { background: var(--sw-bg); }
.counts .count-box {
    background: #fff;
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    padding: 26px 16px;
    margin-bottom: 16px;
    transition: transform .25s ease;
}
.counts .count-box:hover { transform: translateY(-4px); }
.counts .count-box i {
    font-size: 30px;
    width: 62px;
    height: 62px;
    line-height: 62px;
    border-radius: 50%;
    background: rgba(18, 181, 203, .1);
    display: inline-block;
}
.counts .count-box span {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: var(--sw-navy);
    margin-top: 10px;
}
.counts .count-box p { color: var(--sw-muted); font-weight: 600; margin: 4px 0 0; }

/* ---------- Portfolio / Gallery ---------- */
.portfolio.section-bg { background: var(--sw-bg); }
#portfolio-flters li {
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
#portfolio-flters li.filter-active,
#portfolio-flters li:hover {
    background: linear-gradient(135deg, var(--sw-accent), var(--sw-blue));
    color: #fff;
}
.portfolio-wrap {
    border-radius: var(--sw-radius);
    overflow: hidden;
    box-shadow: var(--sw-shadow);
    margin-bottom: 18px;
}
.portfolio-wrap img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .35s ease;
}
.portfolio-wrap:hover img { transform: scale(1.05); }

/* ---------- Team ---------- */
.team .member {
    background: #fff;
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    overflow: hidden;
    margin-bottom: 20px;
    text-align: center;
    transition: transform .25s ease;
}
.team .member:hover { transform: translateY(-5px); }
.team .member .pic img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.team .member .member-info {
    position: static;
    background: none;
    padding: 16px 14px 20px;
}
.team .member h4 { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.team .member span { color: var(--sw-accent-2); font-size: 13px; font-weight: 600; }
.team .member .social a { color: var(--sw-muted); }
.team .member .social a:hover { color: var(--sw-accent); }
@media (max-width: 575.98px) {
    .team .member h4 { font-size: 13px; line-height: 1.35; }
    .team .member span { font-size: 11.5px; }
}

/* ---------- FAQ ---------- */
.faq.section-bg { background: var(--sw-bg); }
.faq .faq-item {
    background: #fff;
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    padding: 20px 22px;
    margin-bottom: 16px;
}
.faq .faq-item h4 {
    font-size: 16px;
    font-weight: 700;
    padding-left: 14px;
    position: relative;
    margin-bottom: 8px;
}
.faq .faq-item h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--sw-accent), var(--sw-blue));
}
.faq .faq-item p { color: var(--sw-muted); margin: 0; }

/* ---------- Contact / Registrasi form ---------- */
.contact .info-box {
    background: #fff;
    border-radius: var(--sw-radius);
    box-shadow: var(--sw-shadow);
    padding: 26px 20px;
    text-align: center;
    margin-bottom: 16px;
    transition: transform .25s ease;
}
.contact .info-box:hover { transform: translateY(-4px); }
.contact .info-box i { font-size: 30px; color: var(--sw-accent); }
.contact .info-box h3 { font-size: 17px; font-weight: 700; margin: 10px 0 6px; }
.contact .info-box p, .contact .info-box a { color: var(--sw-muted); }

.php-email-form .form-control {
    border-radius: 12px;
    border: 1px solid #dbe6ef;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}
.php-email-form .form-control:focus {
    border-color: var(--sw-accent);
    box-shadow: 0 0 0 3px rgba(18, 181, 203, .18);
}
.php-email-form select.form-control { appearance: auto; }
#registrasi .form-row > p { font-weight: 600; margin-bottom: 10px; }
@media (max-width: 575.98px) {
    #registrasi .form-row > p { font-size: 12px; line-height: 1.4; }
}
.btnx.btn-primary {
    background: linear-gradient(135deg, var(--sw-accent), var(--sw-blue));
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 8px 20px rgba(18, 181, 203, .35);
    transition: all .25s;
}
.btnx.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(18, 181, 203, .5); }
.btn.btn-success {
    background: linear-gradient(135deg, #18d26e, #0ea052);
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(24, 210, 110, .35);
}
.table { border-radius: 12px; overflow: hidden; }
.table-bordered td, .table-bordered th { border-color: #e3edf5 !important; }

/* Validasi CTA */
#validasi .info-box {
    background: linear-gradient(135deg, var(--sw-navy), var(--sw-blue));
    color: #fff;
}
#validasi .info-box i { color: var(--sw-accent); }
#validasi .info-box h3 { color: #fff; }
#validasi .info-box p { color: rgba(255, 255, 255, .82); }

/* ---------- Footer ---------- */
#footer {
    background: var(--sw-navy-2);
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}
#footer .footer-top { padding: 48px 0 28px; }
#footer h3, #footer h4 { color: #fff; font-weight: 700; }
#footer a { color: rgba(255, 255, 255, .82); }
#footer a:hover { color: var(--sw-accent); }
#footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    margin-right: 6px;
    transition: all .2s;
}
#footer .social-links a:hover { background: var(--sw-accent); color: #fff; }
#footer iframe { border-radius: var(--sw-radius) !important; max-width: 100%; }
#footer .copyright, #footer .credits { color: rgba(255, 255, 255, .55); padding: 6px 0; }

/* ---------- Back to top ---------- */
.back-to-top {
    background: linear-gradient(135deg, var(--sw-accent), var(--sw-blue));
    color: #fff;
    border-radius: 50% !important;
    box-shadow: 0 8px 20px rgba(18, 181, 203, .4);
}
.back-to-top:hover { background: var(--sw-blue); color: #fff; }

/* ---------- Utility ---------- */
.text-justify { text-align: justify; }
img.img-fluid { max-width: 100%; height: auto; }
::selection { background: rgba(18, 181, 203, .3); }