/* ==========================================================================
   05 — COMPONENTS
   Elemen yang dipakai lintas section: button, pill, judul section,
   rating bintang, kontrol slider.
   ========================================================================== */

/* ==========================================================================
   BUTTON
   ========================================================================== */

.btn {
    --btn-py: 13px;
    --btn-px: 26px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--btn-py) var(--btn-px);
    border: 1px solid transparent;
    border-radius: var(--kn-r-xs);
    font-family: var(--kn-font-display);
    font-size: var(--kn-fs-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--kn-dur) var(--kn-ease-out),
                box-shadow var(--kn-dur) var(--kn-ease),
                color var(--kn-dur) var(--kn-ease),
                border-color var(--kn-dur) var(--kn-ease),
                background-color var(--kn-dur) var(--kn-ease);
}

.btn > span { position: relative; z-index: 2; }
.btn .icon { position: relative; z-index: 2; }

.btn--sm { --btn-py: 11px; --btn-px: 20px; font-size: var(--kn-fs-2xs); }
.btn--lg { --btn-py: 15px; --btn-px: 30px; }
.btn--block { width: 100%; }

/* Panah ikut bergerak saat hover. */
.btn__arrow { transition: transform var(--kn-dur) var(--kn-ease-spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------------------------------------------------------- btn primary */
.btn--primary {
    background: var(--kn-grad-brand);
    color: var(--kn-white);
    box-shadow: var(--kn-shadow-blue);
}

/* Lapisan gradient kedua yang di-fade-in: transisi gradient jadi mulus. */
.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--kn-grad-brand-h);
    opacity: 0;
    transition: opacity var(--kn-dur) var(--kn-ease);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--kn-shadow-blue-h);
}

.btn--primary:hover::before { opacity: 1; }
.btn--primary:active { transform: translateY(0); }

/* Kilau yang melintas satu kali saat hover. */
.btn--primary::after,
.btn--light::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    z-index: 1;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-18deg);
    transition: inset-inline-start var(--kn-dur-slow) var(--kn-ease);
}

.btn--primary:hover::after,
.btn--light:hover::after { inset-inline-start: 120%; }

/* ------------------------------------------------------------ btn ghost */
.btn--ghost {
    border-color: rgba(26, 123, 240, 0.4);
    background: rgba(255, 255, 255, 0.72);
    color: var(--kn-blue-600);
    box-shadow: var(--kn-shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn--ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--kn-grad-brand);
    opacity: 0;
    transition: opacity var(--kn-dur) var(--kn-ease);
}

.btn--ghost:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: var(--kn-white);
    box-shadow: var(--kn-shadow-blue);
}

.btn--ghost:hover::before { opacity: 1; }

/* ------------------------------------------------------------ btn light */
.btn--light {
    background: var(--kn-white);
    color: var(--kn-blue-600);
    box-shadow: 0 14px 30px -14px rgba(10, 31, 71, 0.5);
}

.btn--light:hover {
    transform: translateY(-2px);
    color: var(--kn-blue-700);
    box-shadow: 0 20px 40px -14px rgba(10, 31, 71, 0.6);
}

/* ==========================================================================
   PILL / EYEBROW
   ========================================================================== */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 12px;
    border-radius: var(--kn-r-xs);
    color: var(--kn-blue-600);
    font-size: var(--kn-fs-2xs);
    font-weight: 600;
    letter-spacing: var(--kn-ls-wide);
    text-transform: uppercase;
}

.pill__dot {
    position: relative;
    width: 7px; height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--kn-blue-500);
}

.pill__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--kn-blue-500);
    animation: kn-ping 2.4s var(--kn-ease) infinite;
}

/* ==========================================================================
   SECTION HEADING
   ========================================================================== */

.section-head {
    margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
}

.section-head__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
    font-size: var(--kn-fs-h2);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-head__rule {
    display: block;
    width: clamp(28px, 6vw, 58px);
    height: 2px;
    border-radius: var(--kn-r-pill);
    background: var(--kn-grad-rule);
}

.section-head__rule:last-child { transform: scaleX(-1); }

.section-head__sub {
    margin-block-start: 10px;
    color: var(--kn-ink-500);
    font-size: var(--kn-fs-sm);
}

/* ==========================================================================
   STARS
   ========================================================================== */

.stars {
    display: inline-flex;
    gap: 2px;
    color: rgba(20, 60, 130, 0.2);
}

.stars__item { display: inline-flex; }
.stars__item.is-on { color: var(--kn-gold-500); }

/* ==========================================================================
   SLIDER
   ========================================================================== */

.slider { position: relative; }

.slider__viewport {
    overflow: hidden;
    /* padding kecil supaya shadow kartu tidak terpotong */
    margin-inline: -8px;
    padding: 8px;
}

.slider__track {
    display: flex;
    gap: var(--kn-space-5);
    transition: transform var(--kn-dur-slow) var(--kn-ease-out);
    will-change: transform;
}

.slider.is-dragging .slider__track { transition: none; cursor: grabbing; }

.slider__slide {
    flex: 0 0 calc((100% - var(--kn-space-5)) / 2);
    min-width: 0;
}

.slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--kn-space-4);
    margin-block-start: var(--kn-space-5);
}

.slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(26, 123, 240, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.66);
    color: var(--kn-blue-600);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background var(--kn-dur) var(--kn-ease),
                color var(--kn-dur) var(--kn-ease),
                transform var(--kn-dur) var(--kn-ease-spring),
                opacity var(--kn-dur) var(--kn-ease);
}

.slider__arrow:hover {
    background: var(--kn-grad-brand);
    border-color: transparent;
    color: var(--kn-white);
    transform: scale(1.08);
}

.slider__arrow[disabled] {
    opacity: 0.32;
    cursor: not-allowed;
    transform: none;
}

.slider__arrow[disabled]:hover {
    background: rgba(255, 255, 255, 0.66);
    color: var(--kn-blue-600);
    border-color: rgba(26, 123, 240, 0.28);
}

.slider__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider__dot {
    width: 8px; height: 8px;
    padding: 0;
    border-radius: 50%;
    background: rgba(26, 123, 240, 0.28);
    transition: width var(--kn-dur) var(--kn-ease-out),
                background var(--kn-dur) var(--kn-ease);
}

.slider__dot.is-active {
    width: 24px;
    border-radius: var(--kn-r-pill);
    background: var(--kn-blue-600);
}