/* ============================================================
   COMPONENTS.CSS — Dokter English
   Navbar · Footer · Cards · Carousel · FAQ · Testimoni · Forms
   ============================================================ */

/* ========================================
   TOP BAR
======================================== */
.topbar {
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    padding: .5rem 0;
    display: none;
}
@media (min-width: 768px) { .topbar { display: block; } }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; }
.topbar__left, .topbar__right { display: flex; gap: 1rem; align-items: center; }
.topbar__right a { color: #fff; text-decoration: none; transition: color var(--transition); }
.topbar__right a:hover { color: var(--secondary); }
.topbar .fa-regular,
.topbar .fa-solid,
.topbar .fa-brands { color: var(--secondary); margin-right: .25rem; }
.topbar__right .fa-brands { color: inherit; margin-right: 0; }

/* ========================================
   NAVBAR
======================================== */
#navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    z-index: 50;
    transition: box-shadow .3s;
}
#navbar.scrolled { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

.nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
}
.nav__logo img { height: 4rem; display: block; }
.nav__logo a  { display: inline-block; }

/* Desktop links */
.nav__links { display: none; gap: .25rem; align-items: center; list-style: none; }
@media (min-width: 768px) { .nav__links { display: flex; } }
.nav__links > li { position: relative; }
.nav__links a {
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    color: var(--primary);
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    display: flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
}
.nav__links a:hover { background: var(--gray-100); }
.nav__links a.active { color: var(--primary); background: var(--blue-50); }

/* Trigger dropdown (li > a langsung) — beri tanda visual bahwa ini toggle bukan link */
.nav__links .has-dropdown > a {
    user-select: none; /* tidak bisa di-select teksnya, terasa lebih seperti tombol */
}
/* Saat dropdown terbuka, trigger sedikit lebih gelap */
.nav__links .has-dropdown.open > a {
    background: var(--gray-100);
    color: var(--primary);
}

.caret { font-size: .65rem; transition: transform .2s; }
.nav__links .has-dropdown.open > a .caret { transform: rotate(180deg); }

/* Dropdown */
.nav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    min-width: 13rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0,0,0,0.13);
    border: 1px solid var(--gray-100);
    padding: .5rem;
    z-index: 100;
}
.nav__links .has-dropdown.open .nav__dropdown { display: block; }
.nav__dropdown a {
    display: block;
    padding: .6rem .875rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--primary);
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.nav__dropdown a:hover { background: var(--gray-50); }

/* CTA nav buttons */
.nav__cta-wrap  { display: flex; align-items: center; gap: .5rem; }
.nav__cta-desktop { display: none; }
@media (min-width: 768px) { .nav__cta-desktop { display: flex; } }

.nav__btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: .5rem 1.25rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.nav__btn-outline:hover { background: var(--primary); color: #fff; }

.nav__btn-solid {
    background: var(--secondary);
    color: var(--primary);
    padding: .5rem 1.25rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: background var(--transition);
    white-space: nowrap;
    border: 2px solid var(--secondary);
}
.nav__btn-solid:hover { background: var(--secondary-dk); border-color: var(--secondary-dk); }

/* Hamburger */
.nav__hamburger { display: flex; align-items: center; }
@media (min-width: 768px) { .nav__hamburger { display: none; } }
.nav__hamburger button {
    background: none; border: none; cursor: pointer;
    color: var(--primary); font-size: 1.5rem;
    transition: color var(--transition);
}
.nav__hamburger button:hover { color: var(--secondary); }

/* Mobile Menu */
#mobile-menu {
    display: none;
    background: #fff;
    border-top: 1px solid var(--gray-100);
    position: absolute;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
#mobile-menu.open { display: block; }
.mobile-menu__inner {
    padding: .5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.mobile-menu__inner a {
    display: block;
    padding: .65rem .75rem;
    color: var(--primary);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.mobile-menu__inner a:hover { background: var(--light); }
.mobile-menu__sub { display: none; padding-left: 1rem; }
.mobile-menu__sub.open { display: block; }
.mobile-menu__sub a { font-weight: 500; font-size: .85rem; color: var(--gray-600); padding: .5rem .75rem; }
.mobile-menu__sub a:hover { color: var(--primary); }
.mobile-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: .65rem .75rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
    color: var(--primary);
    transition: background var(--transition);
}
.mobile-toggle:hover { background: var(--light); }
.mobile-toggle.open .caret { transform: rotate(180deg); }
.mobile-cta-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--gray-100);
}
.mobile-cta-row a {
    text-align: center;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
}
.mobile-cta-row .m-btn-outline { border: 2px solid var(--primary); color: var(--primary); }
.mobile-cta-row .m-btn-solid   { background: var(--secondary); color: var(--primary); }

/* ========================================
   FOOTER
======================================== */
footer {
    background: var(--primary);
    color: #fff;
    padding-top: 3.5rem;
    padding-bottom: 0;
    border-top: 10px solid var(--secondary);
}
.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer__logo-wrap { display: inline-block; margin-bottom: 1.25rem; }
.footer__logo-wrap img { height: 3rem; width: auto; display: block; }
.footer__desc {
    color: rgba(255,255,255,0.65);
    font-size: .875rem;
    line-height: 1.75;
    max-width: 22rem;
    margin-bottom: 1.25rem;
}
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
    width: 2.4rem; height: 2.4rem;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.footer__social a:hover { background: var(--secondary); color: var(--primary); border-color: var(--secondary); }

.footer__col-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #fff;
    letter-spacing: .01em;
}
.footer__link-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer__link-list a {
    text-decoration: none;
    color: rgba(255,255,255,0.6);
    font-size: .875rem;
    transition: color var(--transition);
}
.footer__link-list a:hover { color: var(--secondary); }

.footer__kontak-list { list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.footer__kontak-list li {
    display: flex; align-items: flex-start; gap: .65rem;
    color: rgba(255,255,255,0.6); font-size: .875rem; line-height: 1.6;
}
.footer__kontak-list i { color: rgba(255,255,255,0.5); font-size: .875rem; margin-top: .2rem; flex-shrink: 0; width: 1rem; text-align: center; }
.footer__kontak-list a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color var(--transition); }
.footer__kontak-list a:hover { color: var(--secondary); }
.footer__jam { margin-top: .75rem; }
.footer__jam strong { color: #fff; display: block; margin-bottom: .25rem; font-size: .875rem; }
.footer__jam p { color: rgba(255,255,255,0.6); font-size: .8rem; line-height: 1.7; }

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
}
@media (min-width: 768px) {
    .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer__bottom p { color: rgba(255,255,255,0.45); font-size: .8rem; }
.footer__bottom .made-with { color: rgba(255,255,255,0.45); font-size: .8rem; }
.footer__bottom .made-with i { color: #ef4444; }

/* ========================================
   CARDS
======================================== */
.cards-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
}
.cards-carousel::-webkit-scrollbar { display: none; }
.cards-carousel .card { flex: 0 0 calc(100% - 1rem); scroll-snap-align: start; }
@media (min-width: 640px)  { .cards-carousel .card { flex: 0 0 calc(50% - .75rem); } }
@media (min-width: 1024px) { .cards-carousel .card { flex: 0 0 calc(33.333% - 1rem); } }

.card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s, border-color .3s;
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--secondary); }
.card__header {
    background: var(--primary);
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.card__header-decor {
    position: absolute;
    top: -2.5rem; right: -2.5rem;
    width: 8rem; height: 8rem;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.card__badge-fav {
    position: absolute;
    top: 0; right: 0;
    background: var(--promo);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .75rem;
    border-bottom-left-radius: var(--radius-md);
    z-index: 2;
}
.card__icon {
    font-size: 3rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    display: block;
    transition: transform .3s;
}
.card:hover .card__icon { transform: scale(1.1); }
.card__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    position: relative;
    z-index: 1;
}
.card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__desc  { color: var(--gray-600); font-size: .875rem; margin-bottom: 1.5rem; flex: 1; line-height: 1.7; }
.card__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--primary);
}
.card__features i { color: var(--secondary); margin-right: .5rem; }
.btn-card {
    display: block;
    width: 100%;
    text-align: center;
    padding: .75rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
    background: rgba(28,49,94,0.1);
    color: var(--primary);
    border: 1px solid rgba(28,49,94,0.2);
    transition: background var(--transition), color var(--transition);
}
.btn-card:hover { background: var(--primary); color: var(--secondary); }

/* === Carousel Controls === */
.carousel-wrap { position: relative; }
.carousel-btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: var(--secondary);
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background var(--transition);
    z-index: 10;
}
.carousel-btn:hover    { background: var(--dark); }
.carousel-btn:disabled { opacity: .3; pointer-events: none; }
.carousel-btn--prev    { left: -1.25rem; }
.carousel-btn--next    { right: -1.25rem; }

.carousel-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.carousel-dot  {
    width: .5rem; height: .5rem;
    border-radius: var(--radius-full);
    background: var(--gray-300);
    border: none; cursor: pointer;
    transition: background .2s, width .2s;
}
.carousel-dot.active { background: var(--primary); width: 1.5rem; }

/* ========================================
   FAQ
======================================== */
.faq__list {
    max-width: 52rem;
    margin: 0 auto 3.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.faq__item {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.faq__item.open {
    border-color: rgba(28,49,94,0.25);
    box-shadow: 0 4px 16px rgba(28,49,94,0.08);
}
.faq__question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--primary);
    transition: color var(--transition);
}
.faq-icon {
    width: 1.75rem; height: 1.75rem;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: background .2s, transform .3s;
}
.faq__item.open .faq-icon { background: var(--primary); color: var(--secondary); transform: rotate(45deg); }
.faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s;
    padding: 0 1.5rem;
}
.faq__item.open .faq__answer { max-height: 24rem; padding: 0 1.5rem 1.25rem; }
.faq__answer p { font-size: .9rem; color: var(--gray-600); line-height: 1.8; }

/* FAQ CTA Box */
.faq__cta-box {
    max-width: 52rem;
    margin: 0 auto;
    background: var(--primary);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}
@media (min-width: 768px) { .faq__cta-box { flex-direction: row; text-align: left; } }
.faq__cta-text { flex: 1; }
.faq__cta-text h3 { font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: 1.25rem; color: #fff; margin-bottom: .5rem; }
.faq__cta-text p  { color: var(--blue-200); font-size: .9rem; line-height: 1.6; }
.faq__cta-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--secondary); color: var(--primary);
    font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: .95rem;
    padding: .875rem 2rem; border-radius: var(--radius-full);
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background var(--transition), transform var(--transition);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.faq__cta-btn:hover { background: var(--secondary-dk); transform: translateY(-2px); }

/* ========================================
   TESTIMONI
======================================== */
.testi-layout { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .testi-layout { flex-direction: row; align-items: flex-start; } }

.testi-rating-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 2rem;
    min-width: 15rem;
    flex-shrink: 0;
}
.testi-rating-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--gray-400); margin-bottom: .75rem; }
.testi-rating-score { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.testi-score-num { font-family: 'Montserrat',sans-serif; font-size: 3rem; font-weight: 900; color: var(--secondary); line-height: 1; }
.testi-top-badge { background: var(--secondary); color: var(--primary); font-size: .7rem; font-weight: 700; padding: .3rem .6rem; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: .25rem; }
.testi-stars { color: var(--secondary); font-size: 1rem; display: flex; gap: .2rem; margin-bottom: .5rem; }
.testi-rating-count { color: var(--gray-400); font-size: .8rem; font-weight: 500; }

.testi-reviews-wrap { flex: 1; background: var(--gray-50); border: 1px solid var(--gray-100); border-radius: 1.25rem; padding: 2rem; position: relative; }
.testi-slider { overflow: hidden; }
.testi-slide { display: none; }
.testi-slide.active { display: block; }
.testi-reviewer { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.testi-avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--primary); color: var(--secondary); font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: .9rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testi-name { font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: .95rem; color: var(--primary); }
.testi-asal { color: var(--gray-400); font-size: .8rem; margin-top: .1rem; }
.testi-stars--right { margin-left: auto; }
.testi-stars--right i { color: var(--secondary); font-size: .875rem; }
.testi-quote { font-size: .9375rem; color: var(--gray-600); line-height: 1.8; font-style: italic; margin-bottom: 1.25rem; }
.testi-badge { display: inline-block; background: rgba(5,150,105,0.1); color: var(--success); font-size: .75rem; font-weight: 700; padding: .3rem .75rem; border-radius: var(--radius-full); border: 1px solid rgba(5,150,105,0.25); }

.testi-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; border: 1px solid var(--gray-200); color: var(--primary); font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: background var(--transition), color var(--transition); z-index: 5; }
.testi-nav:hover { background: var(--primary); color: var(--secondary); }
.testi-nav--prev { left: -1.125rem; }
.testi-nav--next { right: -1.125rem; }
.testi-dots { display: flex; gap: .4rem; margin-top: 1.5rem; }
.testi-dot { width: .45rem; height: .45rem; border-radius: var(--radius-full); background: var(--gray-200); border: none; cursor: pointer; transition: background .2s, width .2s; }
.testi-dot.active { background: var(--primary); width: 1.5rem; }

/* ========================================
   KEUNGGULAN CARDS
======================================== */
.keunggulan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px)  { .keunggulan-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .keunggulan-grid { grid-template-columns: repeat(3,1fr); } }

.keunggulan-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    transition: box-shadow .3s, transform .3s, border-color .3s;
}
.keunggulan-card:hover { box-shadow: 0 12px 32px rgba(28,49,94,0.1); transform: translateY(-4px); border-color: rgba(28,49,94,0.15); }
.keunggulan-card__icon { width: 3.25rem; height: 3.25rem; border-radius: .875rem; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: 1.25rem; color: #fff; }
.keunggulan-card h3 { font-family: 'Montserrat',sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--primary); margin-bottom: .6rem; }
.keunggulan-card p  { font-size: .875rem; color: var(--gray-500); line-height: 1.75; }

/* ========================================
   VIDEO CARDS
======================================== */
.video-carousel { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; }
.video-carousel::-webkit-scrollbar { display: none; }
.video-carousel-wrap { position: relative; }

.video-card { flex: 0 0 calc(100% - 1rem); scroll-snap-align: start; border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
@media (min-width: 640px)  { .video-card { flex: 0 0 calc(50% - .625rem); } }
@media (min-width: 1024px) { .video-card { flex: 0 0 calc(33.333% - .833rem); } }

.video-thumb { position: relative; width: 100%; padding-top: 56.25%; background: var(--primary); overflow: hidden; cursor: pointer; display: block; text-decoration: none; }
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video-thumb:hover img { transform: scale(1.05); }
.video-thumb__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); transition: background .2s; pointer-events: none; }
.video-thumb:hover .video-thumb__play { background: rgba(0,0,0,0.45); }
.video-thumb__play-btn { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform .2s, background .2s; padding-left: .2rem; }
.video-thumb:hover .video-thumb__play-btn { transform: scale(1.12); background: var(--secondary); }
.video-num-badge { position: absolute; top: .5rem; right: .75rem; font-family: 'Montserrat',sans-serif; font-size: 3rem; font-weight: 900; color: rgba(255,255,255,0.15); line-height: 1; pointer-events: none; user-select: none; }
.vt-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: rgba(255,255,255,0.5); font-size: .8rem; font-weight: 600; pointer-events: none; }

.video-card__info { padding: .875rem 1rem; }
.video-card__tag  { font-size: .7rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: .25rem; }
.video-card__title { font-family: 'Montserrat',sans-serif; font-weight: 700; font-size: .9rem; color: var(--dark); }

.vc-btn { position: absolute; top: calc(50% - 1.5rem); transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--primary); border: none; color: var(--secondary); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: background var(--transition); z-index: 10; }
.vc-btn:hover    { background: var(--dark); }
.vc-btn:disabled { opacity: .3; pointer-events: none; }
.vc-btn--prev { left: -1.25rem; }
.vc-btn--next { right: -1.25rem; }

/* ========================================
   ANGKA / STATS STRIP
======================================== */
.angka__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
@media (min-width: 768px) { .angka__grid { grid-template-columns: repeat(4,1fr); } }
.angka-item { text-align: center; padding: 1.5rem 1rem; }
.angka-item__num { font-family: 'Montserrat',sans-serif; font-size: 2.5rem; font-weight: 900; color: var(--primary); line-height: 1; margin-bottom: .25rem; }
@media (min-width: 1024px) { .angka-item__num { font-size: 3rem; } }
.angka-item__num span { color: var(--secondary); }
.angka-item__label { font-size: .85rem; color: var(--gray-500); font-weight: 500; line-height: 1.4; }

/* ========================================
   BLOG CARD
======================================== */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3,1fr); } }

.blog-card {
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s, transform .3s;
    text-decoration: none;
    color: inherit;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-card__img {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    background: var(--primary);
    overflow: hidden;
}
.blog-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__img-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-lt));
    color: rgba(255,255,255,0.3);
    font-size: 3rem;
}
.blog-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__cat  {
    display: inline-block;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--primary); background: var(--blue-50); border: 1px solid var(--blue-200);
    padding: .25rem .625rem; border-radius: var(--radius-full); margin-bottom: .75rem;
    align-self: flex-start;
}
.blog-card__title {
    font-family: 'Montserrat',sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: .625rem;
    transition: color var(--transition);
}
.blog-card:hover .blog-card__title { color: var(--primary); }
.blog-card__excerpt { font-size: .875rem; color: var(--gray-500); line-height: 1.7; flex: 1; margin-bottom: 1rem; }
.blog-card__meta  { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--gray-400); margin-top: auto; }
.blog-card__meta i { color: var(--primary); }

/* ========================================
   PROMO CARD (hero)
======================================== */
.promo-card {
    background: #fff;
    border: 4px solid var(--promo);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform .3s;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.promo-card:hover { transform: translateY(-4px); }
.promo-card__badge { position: absolute; top: 0; right: 0; background: var(--promo); color: #fff; font-size: .75rem; font-weight: 700; padding: .375rem 1rem; border-bottom-left-radius: var(--radius-md); }
.promo-card__title { font-family: 'Montserrat',sans-serif; font-size: 1.125rem; font-weight: 900; color: var(--primary); margin-bottom: .125rem; margin-top: .25rem; }
.promo-card__desc  { font-size: .875rem; color: var(--gray-600); font-weight: 500; margin-bottom: .5rem; }
.promo-card__pricing { display: flex; flex-direction: column; align-items: center; gap: .75rem; background: var(--gray-50); padding: .75rem; border-radius: var(--radius-md); }
@media (min-width: 480px) { .promo-card__pricing { flex-direction: row; } }
.promo-card__normal, .promo-card__promo { display: flex; flex-direction: column; align-items: center; flex: 1; }
.label-normal, .label-promo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.label-normal { color: var(--gray-400); }
.label-promo  { color: var(--promo); }
.price-normal { font-family: 'Montserrat',sans-serif; font-size: 1rem; font-weight: 700; color: var(--gray-400); text-decoration: line-through; }
.price-promo  { font-family: 'Montserrat',sans-serif; font-size: 1.75rem; font-weight: 900; color: var(--promo); line-height: 1; }
.btn-promo {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--secondary); color: var(--primary);
    font-family: 'Montserrat',sans-serif; font-weight: 900; font-size: .875rem;
    padding: .75rem 1.5rem; border-radius: var(--radius-full); text-decoration: none;
    transition: background var(--transition), transform var(--transition);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15); white-space: nowrap;
}
.btn-promo:hover { background: var(--secondary-dk); transform: translateY(-2px); }
.promo-countdown { margin-top: .6rem; background: rgba(220,38,38,0.08); border-radius: var(--radius-sm); padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--promo); }
.countdown-bar { flex: 1; height: 4px; background: rgba(220,38,38,0.15); border-radius: var(--radius-full); overflow: hidden; }
.countdown-bar__fill { height: 100%; width: 35%; background: var(--promo); border-radius: var(--radius-full); animation: pulse 2s ease-in-out infinite; }