/* ================================================================
   homepage-theme-platform.css
   Theme khusus vanJogja Platform — Indigo + Amber
   ================================================================ */

/* ── Platform Hero ─────────────────────────────────────────────── */
.ph-hero {
    background: linear-gradient(135deg, var(--espresso,#1E3A5F) 0%, color-mix(in srgb, var(--espresso,#1E3A5F) 85%, #0EA5E9 15%) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 5rem 1.5rem 6rem;
}
.ph-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 80% 40%, color-mix(in srgb, var(--brass,#F59E0B) 18%, transparent), transparent);
    pointer-events: none;
}
.ph-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}
/* Copy */
.ph-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass,#F59E0B);
    font-weight: 600;
    margin-bottom: 1.25rem;
    background: rgba(245,158,11,.12);
    padding: .35rem .85rem;
    border-radius: 99px;
    border: 1px solid rgba(245,158,11,.3);
    width: fit-content;
}
.ph-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brass,#F59E0B);
    animation: phPulse 2s ease-in-out infinite;
}
@keyframes phPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(1.3); }
}
.ph-title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.25rem;
    color: #fff;
    letter-spacing: -.02em;
}
.ph-title em {
    font-style: normal;
    color: var(--brass,#F59E0B);
    background: linear-gradient(90deg, var(--brass,#F59E0B), #FCD34D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ph-title strong {
    font-weight: 800;
}
.ph-desc {
    font-size: 1.05rem;
    color: rgba(255,255,255,.8);
    line-height: 1.7;
    margin: 0 0 2rem;
    max-width: 480px;
}
.ph-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.ph-stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.ph-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brass,#F59E0B);
    line-height: 1;
    font-family: var(--font-display, system-ui, sans-serif);
}
.ph-stat-label {
    font-size: .72rem;
    color: rgba(255,255,255,.65);
    letter-spacing: .04em;
}
.ph-stat-div {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,.2);
}
.ph-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.ph-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.75rem;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.ph-cta:hover { transform: translateY(-2px); }
.ph-cta-primary {
    background: var(--brass,#F59E0B);
    color: #1E3A5F;
    box-shadow: 0 4px 20px rgba(245,158,11,.4);
}
.ph-cta-primary:hover {
    background: #FCD34D;
    box-shadow: 0 6px 28px rgba(245,158,11,.5);
}
.ph-cta-secondary {
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
}
.ph-cta-secondary:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5);
}
.ph-trust {
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}

/* ── Browser Mockup ────────────────────────────────────────────── */
.ph-hero-visual {
    position: relative;
}
.ph-browser {
    background: #1A2744;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
    transition: transform .4s ease;
}
.ph-browser:hover {
    transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
}
.ph-browser-bar {
    background: #253154;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.ph-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ph-dot-r { background: #FF5F57; }
.ph-dot-y { background: #FEBC2E; }
.ph-dot-g { background: #28C840; }
.ph-url-bar {
    flex: 1;
    margin-left: .5rem;
    background: rgba(255,255,255,.07);
    border-radius: 6px;
    padding: .3rem .75rem;
    font-size: .72rem;
    color: rgba(255,255,255,.55);
    font-family: monospace;
}
.ph-url-hl { color: var(--brass,#F59E0B); }
.ph-browser-screen {
    background: #f8faff;
    min-height: 320px;
    position: relative;
    overflow: hidden;
}
/* Mock navbar */
.ph-mock-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e8f0fe;
}
.ph-mock-logo {
    width: 60px;
    height: 10px;
    background: linear-gradient(90deg, var(--espresso,#1E3A5F), color-mix(in srgb,var(--espresso,#1E3A5F) 70%,transparent));
    border-radius: 4px;
}
.ph-mock-nav-links {
    display: flex;
    gap: .5rem;
}
.ph-mock-nav-links span {
    width: 28px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 3px;
}
/* Mock hero */
.ph-mock-hero {
    display: flex;
    gap: .75rem;
    padding: 1rem 1rem .75rem;
    background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
}
.ph-mock-hero-text { flex: 1; display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.ph-mock-h1 { height: 10px; width: 85%; background: var(--espresso,#1E3A5F); border-radius: 3px; opacity: .8; }
.ph-mock-h2 { height: 10px; width: 65%; background: var(--espresso,#1E3A5F); border-radius: 3px; opacity: .5; }
.ph-mock-p { height: 7px; width: 90%; background: #94a3b8; border-radius: 3px; }
.ph-mock-btn { height: 18px; width: 60px; background: var(--brass,#F59E0B); border-radius: 4px; margin-top: .2rem; }
.ph-mock-hero-img {
    width: 72px;
    height: 60px;
    background: linear-gradient(135deg, var(--espresso,#1E3A5F) 0%, var(--brass,#F59E0B) 100%);
    border-radius: 8px;
    flex-shrink: 0;
    opacity: .7;
}
/* Mock produk grid */
.ph-mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .75rem 1rem 1rem;
}
.ph-mock-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.ph-mock-card-img {
    height: 44px;
    background: linear-gradient(135deg, #C7D2FE, #818CF8);
}
.ph-mock-card-img-2 { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.ph-mock-card-img-3 { background: linear-gradient(135deg, #BBF7D0, #34D399); }
.ph-mock-card-line {
    margin: .35rem .4rem .2rem;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
}
.ph-mock-card-line-sm { width: 60%; margin-top: 0; }
/* Live badge */
.ph-live-badge {
    position: absolute;
    top: .65rem;
    right: .65rem;
    background: #DCFCE7;
    color: #15803D;
    font-size: .65rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #BBF7D0;
}
.ph-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    animation: phLivePulse 1.5s ease-in-out infinite;
}
@keyframes phLivePulse {
    0%,100% { opacity: 1; }
    50% { opacity: .4; }
}
/* Floating cards */
.ph-float-card {
    position: absolute;
    background: #fff;
    border-radius: 10px;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    font-size: .78rem;
    animation: phFloat 4s ease-in-out infinite;
    z-index: 2;
}
.ph-float-1 { bottom: -12px; left: -20px; animation-delay: 0s; }
.ph-float-2 { top: 20px; right: -20px; animation-delay: 2s; }
@keyframes phFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.ph-float-icon { font-size: 1.1rem; }
.ph-float-label { font-weight: 700; color: #0F172A; line-height: 1.2; }
.ph-float-sub { color: #64748B; font-size: .68rem; }
/* Wave */
.ph-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}
.ph-wave svg { width: 100%; height: 80px; display: block; }

/* Responsive */
@media (max-width: 900px) {
    .ph-hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .ph-hero-visual { display: none; }
    .ph-hero { padding: 4rem 1.5rem 5rem; }
}
@media (max-width: 480px) {
    .ph-cta-group { flex-direction: column; }
    .ph-cta { justify-content: center; }
    .ph-stats { gap: 1rem; }
}

/* ── Platform Navbar overrides ─────────────────────────────────── */
.theme-homepage-platform .nav-main {
    background: rgba(30,58,95,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.theme-homepage-platform .nav-logo { color: #fff; }
.theme-homepage-platform .nav-link { color: rgba(255,255,255,.8); }
.theme-homepage-platform .nav-link:hover { color: var(--brass,#F59E0B); }
.theme-homepage-platform .nav-cta {
    background: var(--brass,#F59E0B) !important;
    color: var(--espresso,#1E3A5F) !important;
    font-weight: 700;
}
.theme-homepage-platform .nav-cta:hover {
    background: #FCD34D !important;
}

/* ── Trust section override ────────────────────────────────────── */
.theme-homepage-platform .trust-section {
    background: var(--espresso,#1E3A5F);
    color: #fff;
}
.theme-homepage-platform .trust-section .trust-icon { background: rgba(245,158,11,.15); }
.theme-homepage-platform .trust-section .trust-icon svg { color: var(--brass,#F59E0B); }

/* ── CTA section override ─────────────────────────────────────── */
.theme-homepage-platform .cta-section {
    background: linear-gradient(135deg, var(--espresso,#1E3A5F), color-mix(in srgb,var(--espresso,#1E3A5F) 80%,#0EA5E9));
}