/* ===== App-wide styles (public) - clean white / Apple-inspired, navy + gold accent ===== */
:root {
    --app-primary: #1f3a68;
    --app-primary-dark: #16294d;
    --app-primary-soft: rgba(31, 58, 104, .09);
    --app-gold: #c4a15c;
    --app-bg: #ffffff;
    --app-text: #1d1d1f;
    --app-muted: #6e6e73;
    --app-border: rgba(0, 0, 0, .08);
    --app-canvas: #f5f5f7;
    --app-radius: 18px;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--app-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.public-page { background: var(--app-bg); }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--app-text);
    letter-spacing: -0.01em;
}

.text-primary { color: var(--app-primary) !important; }
.text-muted { color: var(--app-muted) !important; }

/* ---- Buttons: soft, pill-friendly, Apple-like ---- */
.btn { border-radius: 14px; padding: .55rem 1.1rem; font-weight: 500; transition: all .18s ease; }
.btn-lg { border-radius: 980px; padding: .75rem 1.6rem; }
.rounded-pill { border-radius: 980px !important; }

.btn-primary { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--app-primary-dark); border-color: var(--app-primary-dark); color: #fff; box-shadow: 0 6px 16px rgba(31, 58, 104, .3); transform: translateY(-1px); }
.btn-outline-primary { color: var(--app-primary); border-color: var(--app-primary); }
.btn-outline-primary:hover { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.btn-outline-dark, .btn-outline-secondary { color: var(--app-text); border-color: rgba(0, 0, 0, .28); }
.btn-outline-dark:hover, .btn-outline-secondary:hover { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .35); color: var(--app-text); }
.btn-light { background: rgba(0, 0, 0, .04); border-color: transparent; }
.btn-light:hover { background: rgba(0, 0, 0, .08); border-color: transparent; }

.form-control, .form-select { border-radius: 12px; }
.form-control:focus, .form-select:focus, .btn:focus, .form-check-input:focus { box-shadow: 0 0 0 4px rgba(31, 58, 104, .18); border-color: var(--app-primary); }

/* ---- Brand / header ---- */
.brand-text { font-family: 'Playfair Display', serif; font-size: 1.4rem; letter-spacing: .2px; color: var(--app-text); }
.site-header { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--app-border); position: sticky; top: 0; z-index: 1020; }
.site-header .nav-link { color: var(--app-text); font-size: .9rem; font-weight: 500; padding: .4rem .6rem; }
.site-header .nav-link:hover { color: var(--app-primary); }

/* ---- Hero: white canvas, huge tight headline ---- */
.hero-section { position: relative; background: radial-gradient(1200px 500px at 50% -80px, rgba(31, 58, 104, .14), transparent 65%), #fff; overflow: hidden; padding: 96px 0 88px; }
.hero-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--app-text); }
.hero-subtitle { max-width: 640px; font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--app-muted); }
.hero-note { max-width: 560px; opacity: .9; color: var(--app-muted); }

/* Foto tema di hero + strip galeri tema */
.hero-tema-strip { max-width: 920px; margin-left: auto; margin-right: auto; }
.hero-tema-photo { background: var(--app-canvas); }
.hero-tema-photo img { aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .35s ease; }
.hero-tema-photo:hover img { transform: scale(1.06); }

/* Efek ketik ("seolah mengetik") untuk tulisan di landing */
[data-typing] { min-height: 1.2em; }
[data-typing].is-typing::after {
    content: '';
    display: inline-block;
    width: .07em;
    height: .95em;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--app-gold, #c4a15c);
    animation: js-type-caret 0.9s steps(1) infinite;
}
@keyframes js-type-caret {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- Sections ---- */
section { scroll-margin-top: 90px; }
.event-type-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border: 1px solid var(--app-border); }
.event-type-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .08); border-color: rgba(0, 0, 0, .14); }
.event-emoji { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .08)); }

.feature-card { border-radius: var(--app-radius); background: #fff; border: 1px solid var(--app-border); transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .07); }
.feature-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--app-primary-soft); color: var(--app-gold); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

.card { border-radius: var(--app-radius); }
.theme-card, .how-card, .pricing-card { border-radius: var(--app-radius); }
.theme-card { transition: transform .18s ease, box-shadow .18s ease; }
.theme-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .09) !important; }
.theme-thumb { position: relative; height: 215px; overflow: hidden; background: linear-gradient(135deg, var(--tc1, #8e9aaf), var(--tc2, #c5cdd8)); }
.theme-thumb-shade { position: absolute; inset: 0; background: linear-gradient(135deg, var(--tc1, #8e9aaf), transparent 58%, var(--tc2, #c5cdd8)); z-index: 0; }
.theme-thumb .theme-img, .theme-thumb .theme-placeholder { position: relative; z-index: 1; }
.theme-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.theme-thumb-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5)); opacity: 0; transition: opacity .25s ease; }
.theme-thumb-actions { position: absolute; inset: 0; z-index: 3; opacity: 0; transition: opacity .25s ease; }
.theme-card:hover .theme-img { transform: scale(1.055); }
.theme-card:hover .theme-thumb-overlay { opacity: 1; }
.theme-card:hover .theme-thumb-actions { opacity: 1; }

.how-card { background: #fff; border: 1px solid var(--app-border); }
.how-step { opacity: .5; font-family: 'Poppins', sans-serif; color: var(--app-gold); }

.pricing-card { border: 1px solid var(--app-border); background: #fff; transition: transform .18s ease, box-shadow .18s ease; }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .08); }

/* ---- CTA ---- */
.cta-section { background: var(--app-canvas); color: var(--app-text); border-top: 1px solid var(--app-border); }
.cta-section h2 { color: var(--app-text); }
.cta-sub { color: var(--app-muted); opacity: 1; }

/* ---- Accordion ---- */
.accordion-item { border: 1px solid var(--app-border); border-radius: 14px !important; overflow: hidden; }
.accordion-button { background: #fff; color: var(--app-text); font-weight: 500; }
.accordion-button:not(.collapsed) { background: var(--app-primary-soft); color: var(--app-primary); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }

/* ---- Page hero (sub pages) ---- */
.page-hero { background: var(--app-canvas); border-bottom: 1px solid var(--app-border); }
.page-hero h1, .page-hero .h1, .page-hero .h3 { color: var(--app-text); }

/* ---- Footer: light like Apple ---- */
.site-footer { background: var(--app-canvas); color: var(--app-muted); border-top: 1px solid var(--app-border); }
.site-footer h5, .site-footer h6 { color: var(--app-text); }
.site-footer a { color: var(--app-muted); }
.site-footer a:hover { color: var(--app-primary); }
.social-icon { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--app-border); display: inline-flex; align-items: center; justify-content: center; color: var(--app-muted); }
.social-icon:hover { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }

/* ---- Auth ---- */
.auth-section { min-height: 70vh; }
.auth-section .container { border-radius: var(--app-radius); }
.divider-text { display: flex; align-items: center; gap: 12px; color: var(--app-muted); }
.divider-text::before, .divider-text::after { content: ''; flex: 1; border-top: 1px solid var(--app-border); }

/* ---- Auth split (photo kiri, form kanan) - full width, no card ---- */
.auth-section { min-height: 70vh; display: flex; background: #fff; overflow: hidden; }
.auth-section .row { flex: 1 1 auto; }
.auth-full { width: 100%; margin: 0; }
.auth-showcase { position: relative; min-height: 70vh; }
.auth-showcase::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,28,.42) 0%, rgba(8,14,28,.16) 45%, rgba(8,14,28,.65) 100%); }
.auth-showcase-brand { position: relative; z-index: 1; padding: 2.5rem 2.5rem 0; filter: drop-shadow(0 2px 10px rgba(255,255,255,.65)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.auth-showcase-text { position: relative; z-index: 1; padding: 0 2.5rem; }
.auth-showcase-footer { position: relative; z-index: 1; margin-top: 2.5rem; }
.auth-showcase-title { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 16px rgba(255,255,255,.9), 0 0 34px rgba(255,255,255,.55); }
.auth-showcase-subtitle { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.45), 0 0 12px rgba(255,255,255,.7); }
.auth-form-panel { min-height: 70vh; display: flex; align-items: center; }
.auth-form-inner { width: 100%; max-width: 420px; margin: 0 auto; padding: 2rem 1.5rem; }

.avatar-circle { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; background: var(--app-primary); color: #fff; }

/* ---- Toast / misc ---- */
.cookie-alert .toast-body { background: #fff; }
.badge { font-weight: 500; border-radius: 999px; }

/* ---- Mobile/tablet: floating bottom nav (like a phone menu / floating footer) ---- */
.site-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; pointer-events: none; }
.site-mobile-bar { display: flex; justify-content: space-between; align-items: center; gap: .3rem; margin: 0 auto; max-width: 560px; padding: .5rem; border-radius: 20px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--app-border); box-shadow: 0 14px 34px rgba(31, 58, 104, .18); pointer-events: auto; }
.site-mobile-tile { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .2rem; border-radius: 14px; color: var(--app-text); text-decoration: none; font-size: .7rem; font-weight: 500; line-height: 1.05; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: center; }
.site-mobile-tile i { font-size: 1.2rem; color: var(--app-primary); }
.site-mobile-tile span { display: block; width: 100%; text-align: center; line-height: 1.05; }
.site-mobile-tile:hover { background: rgba(31, 58, 104, .06); color: var(--app-primary); }
.site-mobile-tile-primary { background: var(--app-primary); border-color: var(--app-primary); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 58, 104, .28); }
.site-mobile-tile-primary i { color: #fff; }
.site-mobile-tile-primary:hover { background: var(--app-primary-dark); border-color: var(--app-primary-dark); color: #fff; }
body { padding-bottom: 0; }
@media (max-width: 991px) {
    body { padding-bottom: 112px; }
}
.site-auth-wrap { position: relative; }
.site-auth-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1060; min-width: 230px; gap: .5rem; padding: .6rem; border-radius: 14px; background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--app-border); box-shadow: 0 18px 44px rgba(31, 58, 104, .22); visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.site-auth-2col { display: flex; }
.site-auth-stack { display: flex; flex-direction: column; }
.site-auth-popover.show { visibility: visible; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .site-auth-popover { transition: none; }
}
@media (max-width: 380px) {
    .site-mobile-tile { font-size: .64rem; padding: .5rem .15rem; }
    .site-mobile-tile i { font-size: 1.1rem; }
}

/* ---- Small screens ---- */
@media (max-width: 767px) {
    .site-header .container { gap: .5rem; }
    .hero-section { padding: 56px 1rem 52px; }
    .hero-title { letter-spacing: -0.02em; }
    .hero-cta { flex-wrap: wrap; }
    .section-block { padding: 48px 0; }
    .cookie-alert { min-width: 0 !important; max-width: calc(100vw - 2rem); margin: 1rem auto 0 !important; inset: 0 !important; }
    #loginModal .modal-dialog { margin: 1rem; }
    .site-footer .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}