/* =========================================================
   KC HERO – Banner Kadam Choeling Indonesia
   File   : assets/css/kc-hero.css
   Ukuran dikalibrasi dari desain asli (lebar 1440px).
   Semua ukuran teks memakai cqw, jadi ikut mengecil
   bersama gambar di semua device.
   ========================================================= */


/* =================== SECTION =================== */
#kc-hero {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--kc-nav-h, 0px) !important;   /* jarak navbar, dihitung oleh kc-hero.js */
    overflow: hidden;
    background: #fff;
}


/* =================== CAROUSEL ===================
   PENTING: .carousel-item WAJIB tetap float:left + margin-right:-100%
   (bawaan Bootstrap). Tanpa ini, saat pindah slide gambar berikutnya
   muncul di BAWAH gambar aktif lalu meloncat ke atas.
   ================================================ */
#kc-hero .carousel-inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kc-hero .carousel-item {
    float: left !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 -100% 0 0 !important;   /* slide saling menumpuk, bukan bersusun ke bawah */
    padding: 0 !important;
    backface-visibility: hidden;
}

/* Efek fade: slide lama memudar, slide baru muncul di tempat yang sama */
#kc-hero.kc-hero .carousel-fade .carousel-item {
    opacity: 0;
    transform: none !important;
    transition: opacity 0.7s ease-in-out !important;
}
#kc-hero.kc-hero .carousel-fade .carousel-item.active,
#kc-hero.kc-hero .carousel-fade .carousel-item-next.carousel-item-start,
#kc-hero.kc-hero .carousel-fade .carousel-item-prev.carousel-item-end {
    z-index: 1;
    opacity: 1;
}
#kc-hero.kc-hero .carousel-fade .active.carousel-item-start,
#kc-hero.kc-hero .carousel-fade .active.carousel-item-end {
    z-index: 0;
    opacity: 0;
}


/* =================== BINGKAI & GAMBAR =================== */
/* Bingkai = ukuran gambar; ukuran teks mengikuti lebar bingkai */
#kc-hero .kc-hero__frame {
    position: relative !important;
    width: 100% !important;
    container-type: inline-size;
}

#kc-hero .kc-hero__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: initial !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* =================== TEKS: SLIDE 1 (tengah) =================== */
#kc-hero .kc-hero__text {
    position: absolute !important;
    top: 61.4% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    background: none !important;
    z-index: 4 !important;
    pointer-events: none !important;   /* klik tembus ke panah carousel */
}

/* Montserrat Light ±36px @1440 */
#kc-hero .kc-hero__subtitle {
    display: block !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 2.53vw !important;
    font-size: 2.53cqw !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    color: #1a1a1a !important;
    margin: 0 0 0.35cqw !important;
    padding: 0 !important;
}

/* Montserrat Bold ±81px @1440 */
#kc-hero .kc-hero__title {
    display: block !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 5.63vw !important;
    font-size: 5.63cqw !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    color: #A31D2E !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =================== TEKS: SLIDE 2 (kanan bawah) =================== */
#kc-hero .kc-hero__text.kc-hero__text--bottom-right {
    top: auto !important;
    bottom: 7% !important;
    left: auto !important;
    right: 3.5cqw !important;
    width: auto !important;
    text-align: right !important;
}

#kc-hero .kc-hero__text--bottom-right .kc-hero__subtitle {
    margin: 0 !important;
    white-space: normal !important;
}


/* =================== TEKS: SLIDE 3 (tengah bawah) =================== */
#kc-hero .kc-hero__text.kc-hero__text--bottom-center {
    top: auto !important;
    bottom: 5% !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    padding: 1.5cqw 6cqw 0 !important;
    /* cahaya putih lembut agar teks kontras dengan daun di belakangnya */
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 255, 255, 0.55) 45%,
                rgba(255, 255, 255, 0) 72%) !important;
}

#kc-hero .kc-hero__text--bottom-center .kc-hero__subtitle {
    margin: 0 !important;
    white-space: normal !important;
}

/* baris tipis: seimbangkan letter-spacing saat rata tengah */
#kc-hero .kc-hero__text--bottom-center .kc-hero__line--light {
    margin-right: 0 !important;
    padding-left: 0.18em !important;
}


/* =================== AKSEN & BARIS TEKS (slide 2 & 3) =================== */
#kc-hero .kc-hero__accent {
    display: inline-block;
    width: 4.5cqw;
    height: 0.28cqw;
    min-height: 2px;
    background: #8B1A1A;
    border-radius: 2px;
    margin-bottom: 1.2cqw;
}

#kc-hero .kc-hero__line {
    display: block !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

#kc-hero .kc-hero__line--light {
    font-weight: 400 !important;
    font-size: 1.65vw !important;
    font-size: 1.65cqw !important;
    letter-spacing: 0.18em !important;
    margin-right: -0.18em !important;
    line-height: 1.3 !important;
    color: #3c3c3c !important;
    margin-bottom: 0.6cqw !important;
}

#kc-hero .kc-hero__line--strong {
    font-weight: 700 !important;
    font-size: 2.75vw !important;
    font-size: 2.75cqw !important;
    letter-spacing: 0.01em !important;
    line-height: 1.15 !important;
    color: #8B1A1A !important;
}


/* =================== TOMBOL BERGABUNG =================== */
#kc-hero .kc-hero__btn {
    display: inline-flex !important;
    align-items: center;
    gap: max(0.6cqw, 4px);
    margin-top: 1.4cqw !important;
    padding: max(0.85cqw, 5px) max(2.4cqw, 12px) !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: max(1.1cqw, 8px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    color: #fff !important;
    background: #A31D2E !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 0.5cqw 1.4cqw rgba(163, 29, 46, 0.28);
    cursor: pointer;
    position: relative;
    pointer-events: auto !important;   /* tombol tetap bisa diklik */
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

#kc-hero .kc-hero__btn-icon {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

#kc-hero .kc-hero__btn:hover,
#kc-hero .kc-hero__btn:focus-visible {
    background: #85152A !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 0.8cqw 2cqw rgba(163, 29, 46, 0.38);
}
#kc-hero .kc-hero__btn:hover .kc-hero__btn-icon {
    transform: translateX(3px);
}
#kc-hero .kc-hero__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* =================== ANIMASI MASUK =================== */
@keyframes kcFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes kcGrow {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

#kc-hero .kc-hero__accent,
#kc-hero .kc-hero__line,
#kc-hero .kc-hero__btn { opacity: 0; }

#kc-hero .carousel-item.active .kc-hero__accent {
    transform-origin: right center;
    animation: kcGrow 0.6s ease-out 0.3s forwards;
}
#kc-hero .carousel-item.active .kc-hero__text--bottom-center .kc-hero__accent {
    transform-origin: center center;
}
#kc-hero .carousel-item.active .kc-hero__line--light {
    animation: kcFadeUp 0.7s ease-out 0.5s forwards;
}
#kc-hero .carousel-item.active .kc-hero__line--strong {
    animation: kcFadeUp 0.7s ease-out 0.75s forwards;
}
#kc-hero .carousel-item.active .kc-hero__btn {
    animation: kcFadeUp 0.7s ease-out 1s forwards;
}

@media (prefers-reduced-motion: reduce) {
    #kc-hero .kc-hero__accent,
    #kc-hero .kc-hero__line,
    #kc-hero .kc-hero__btn {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
    #kc-hero.kc-hero .carousel-fade .carousel-item {
        transition: none !important;
    }
}


/* =================== KONTROL & INDIKATOR =================== */
#kc-hero .kc-hero__control {
    width: 6% !important;
    z-index: 3 !important;
}
#kc-hero .kc-hero__control span[class*="-icon"] {
    filter: invert(1) grayscale(1) brightness(0.3);
}

#kc-hero .kc-hero__indicators {
    z-index: 5 !important;
    margin-bottom: 0.8rem !important;
}
#kc-hero .kc-hero__indicators [data-bs-target] {
    background-color: #A31D2E !important;
}


/* =========================================================
   RESPONSIVE
   Posisi & proporsi teks sama persis dengan desktop
   ========================================================= */

/* Tablet & HP */
@media (max-width: 991.98px) {
    #kc-hero .kc-hero__control {
        width: 10% !important;
    }
    #kc-hero .kc-hero__control span[class*="-icon"] {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* HP */
@media (max-width: 575.98px) {
    #kc-hero .kc-hero__text.kc-hero__text--bottom-center {
        bottom: calc(5% + 10px) !important;   /* ruang untuk indikator */
    }
    #kc-hero .kc-hero__indicators {
        margin-bottom: 0.25rem !important;
    }
    #kc-hero .kc-hero__indicators [data-bs-target] {
        width: 16px !important;
        height: 2px !important;
        margin: 0 3px !important;
    }
    #kc-hero .kc-hero__control span[class*="-icon"] {
        width: 1.1rem;
        height: 1.1rem;
    }
    #kc-hero .kc-hero__accent {
        min-height: 1px;
    }
}