/* ═══════════════════════════════════════════════════════════════════════════
   ivs-buttons — the house CTA button, one source (rule-wajib/tombol.md).
   ─────────────────────────────────────────────────────────────────────────
   Loaded globally (app.blade.php + app-blank.blade.php, after ivs-tokens).
   Legacy pages are untouched: nothing here styles an existing legacy class.

   Anatomy
     .ivs-btn            base: label voice (Inter 0.72rem/600/.14em uppercase),
                         3px corners, colour transition. No colours of its own.
     .ivs-btn--primary   solid olive-700, hover olive-900 — the house primary.
     .ivs-btn--outline   hairline olive-500, hover fills olive-700.
     .ivs-btn--ghost     for buttons ON A PHOTOGRAPH: white hairline over a
                         dark wash, hover turns ivory.
     .ivs-btn--sheen     opt-in hover polish: lift + shadow + light sweep
                         (the tour subnav CTA's gesture).

   A section may deliberately override colours (e.g. the Co-Create solid
   button reverses 900→700 to sit on its photo) — keep such overrides in the
   page stylesheet, at equal or higher specificity, loaded after this file.
   Sizes are contextual: pages override padding freely; the base padding is
   only a sensible default for new work.
   ═══════════════════════════════════════════════════════════════════════════ */

.ivs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    font-family: var(--v5-font-label, 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* House button shape (rule-wajib/tombol.md). */
    border-radius: 3px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.ivs-btn:hover,
.ivs-btn:focus-visible { text-decoration: none; }

/* ── Primary: solid olive ── */
.ivs-btn--primary {
    background: var(--v5-olive-700, #4a5e2f);
    color: #fff;
}
.ivs-btn--primary:hover,
.ivs-btn--primary:focus-visible {
    background: var(--v5-olive-900, #33421f);
    color: #fff;
}

/* ── Outline: hairline that fills on hover ── */
.ivs-btn--outline {
    border: 1px solid var(--v5-olive-500, #6b8051);
    color: var(--v5-olive-700, #4a5e2f);
}
.ivs-btn--outline:hover,
.ivs-btn--outline:focus-visible {
    background: var(--v5-olive-700, #4a5e2f);
    border-color: var(--v5-olive-700, #4a5e2f);
    color: #fff;
}

/* ── Ghost: on a photograph — white hairline over a dark wash ── */
.ivs-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(20, 19, 15, 0.28);
    color: #fff;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.ivs-btn--ghost:hover,
.ivs-btn--ghost:focus-visible {
    background: var(--v5-ivory, #faf9f6);
    border-color: var(--v5-ivory, #faf9f6);
    color: var(--v5-olive-900, #33421f);
}

/* ── Sheen: opt-in hover polish (lift + light sweep) ── */
.ivs-btn--sheen {
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
                transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.3s ease;
}
.ivs-btn--sheen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: translateX(-220%) skewX(-18deg);
    pointer-events: none;
}
@media (hover: hover) {
    .ivs-btn--sheen:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(74, 94, 47, 0.26);
    }
    .ivs-btn--sheen:hover::after { animation: ivs-btn-sheen 0.8s ease; }
}
@keyframes ivs-btn-sheen {
    from { transform: translateX(-220%) skewX(-18deg); }
    to   { transform: translateX(320%)  skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ivs-btn { transition: none; }
    .ivs-btn--sheen::after { display: none; }
}