/**
 * Mbarep Tour — Public UI v3
 * Fokus klien: paket, penawaran, bayar, hubungi
 */
:root {
    --pub-bg: #f0f9ff;
    --pub-surface: #ffffff;
    --pub-ink: #0c4a6e;
    --pub-ink-muted: #475569;
    --pub-primary: #0284c7;
    --pub-primary-dark: #0369a1;
    --pub-accent: #f97316;
    --pub-accent-hover: #ea580c;
    --pub-mist: #e0f2fe;
    --pub-border: rgba(12, 74, 110, 0.1);
    --pub-radius: 1rem;
    --pub-radius-lg: 1.35rem;
    --pub-shadow: 0 4px 24px rgba(2, 132, 199, 0.08);
    --pub-shadow-lg: 0 20px 50px rgba(2, 132, 199, 0.12);
    --pub-font: 'Work Sans', system-ui, sans-serif;
    --pub-display: 'Outfit', system-ui, sans-serif;
    --mb-navy: #0c4a6e;
    --mb-navy-mid: #075985;
    --mb-nav-accent: #38bdf8;
    --tt-primary: var(--pub-primary);
    --tt-accent: var(--pub-accent);
}

html.pub-v3 {
    scroll-behavior: smooth;
}

body.pub-v3 {
    font-family: var(--pub-font);
    color: var(--pub-ink);
    background: var(--pub-bg);
}

body.pub-v3 .tt-title,
body.pub-v3 .tt-page-title,
body.pub-v3 h1,
body.pub-v3 h2,
body.pub-v3 h3,
body.pub-v3 .pub-display {
    font-family: var(--pub-display);
    letter-spacing: -0.02em;
}

/* —— Header: lebih ringkas, CTA menonjol —— */
body.pub-v3 .mb-scroll-nav a {
    font-weight: 500;
    font-size: 0.82rem;
}

body.pub-v3 .mb-scroll-nav a.active {
    color: var(--pub-primary);
    border-bottom-color: var(--pub-accent);
}

body.pub-v3 .mb-scroll-nav-more {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--pub-ink-muted);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

body.pub-v3 .mb-scroll-nav-more:hover {
    color: var(--pub-primary);
}

body.pub-v3 .mb-brand-bar {
    background: var(--pub-surface);
}

body.pub-v3 .mb-ticker {
    background: linear-gradient(90deg, #0c4a6e 0%, #0369a1 50%, #0c4a6e 100%);
}

.pub-header-cta {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pub-accent), #fb923c);
    color: #fff !important;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.pub-header-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
    color: #fff;
}

@media (min-width: 768px) {
    .pub-header-cta { display: inline-flex; }
}

/* —— Tombol global —— */
body.pub-v3 .btn-tt-primary,
body.pub-v3 .btn-pub-primary {
    background: linear-gradient(135deg, var(--pub-primary), var(--pub-primary-dark));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.65rem 1.35rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

body.pub-v3 .btn-tt-primary:hover,
body.pub-v3 .btn-pub-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.3);
}

body.pub-v3 .btn-pub-accent {
    background: linear-gradient(135deg, var(--pub-accent), var(--pub-accent-hover));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.65rem 1.35rem;
}

body.pub-v3 .btn-pub-accent:hover { color: #fff; }

body.pub-v3 .btn-pub-ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.65rem 1.35rem;
    backdrop-filter: blur(8px);
}

body.pub-v3 .btn-pub-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.pub-v3 .btn-pub-outline {
    background: transparent;
    border: 2px solid var(--pub-primary);
    color: var(--pub-primary);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.6rem 1.25rem;
}

body.pub-v3 .btn-pub-outline:hover {
    background: var(--pub-mist);
    color: var(--pub-primary-dark);
}

/* —— Footer v3 —— */
body.pub-v3 .tt-footer {
    background: linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);
    color: rgba(255, 255, 255, 0.85);
}

body.pub-v3 .tt-footer h4,
body.pub-v3 .tt-footer h5 {
    font-family: var(--pub-display);
    color: #fff;
}

body.pub-v3 .pub-footer-cta {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--pub-radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

body.pub-v3 .pub-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.pub-v3 .pub-footer-actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s;
}

body.pub-v3 .pub-footer-actions a:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* —— Mobile bottom bar (klien) —— */
.pub-mobile-dock {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1025;
    background: var(--pub-surface);
    border-top: 1px solid var(--pub-border);
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(12, 74, 110, 0.08);
}

@media (max-width: 767.98px) {
    .pub-mobile-dock { display: flex; }
    body.pub-v3.pub-has-dock { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    body.pub-v3.pub-has-dock .mb-fab-wa { display: none; }
}

.pub-mobile-dock a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--pub-ink-muted);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: color 0.15s, background 0.15s;
}

.pub-mobile-dock a i {
    font-size: 1.1rem;
}

.pub-mobile-dock a.is-active,
.pub-mobile-dock a:hover {
    color: var(--pub-primary);
}

.pub-mobile-dock a.pub-dock-accent {
    color: var(--pub-accent);
}

/* —— Sub-page hero refresh —— */
body.pub-v3 .tt-page-hero {
    background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%);
}

body.pub-v3 .mb-pub-hero,
body.pub-v3 .tt-page-hero-bg {
    opacity: 0.25;
}

/* Section helpers */
.pub-section {
    padding: 3.5rem 0;
}

.pub-section--tight {
    padding: 2.5rem 0;
}

.pub-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pub-primary);
    margin-bottom: 0.5rem;
}

.pub-heading {
    font-size: clamp(1.5rem, 4vw, 2.15rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.pub-lead {
    color: var(--pub-ink-muted);
    font-size: 1.02rem;
    max-width: 38rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
    body.pub-v3 .btn-tt-primary:hover,
    body.pub-v3 .pub-header-cta:hover {
        transform: none;
    }
}