.utility-bar{display:none}

.public-site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:120;
    width:100%;
    background:
        linear-gradient(180deg, rgba(226,232,240,.98) 0%, rgba(241,245,249,.94) 100%) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    border-bottom:1px solid rgba(148,163,184,.38) !important;
    box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
    will-change:background, box-shadow;
    transition:
        background .42s ease,
        box-shadow .42s ease,
        border-color .42s ease,
        backdrop-filter .42s ease,
        -webkit-backdrop-filter .42s ease,
        transform .42s ease !important;
}
.public-site-header::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    background:
        radial-gradient(circle at 8% 10%, rgba(149,180,0,.20), transparent 34%),
        radial-gradient(circle at 92% 6%, rgba(11,30,75,.11), transparent 32%),
        linear-gradient(90deg, rgba(226,232,240,.62), rgba(248,250,252,.42)) !important;
    opacity:var(--public-header-overlay-opacity, 1) !important;
    transition:opacity .42s ease !important;
}
.public-site-header.is-scrolled,
.public-site-header[data-state="scrolled-white"],
body.public-header-scrolled .public-site-header{
    background:rgba(255,255,255,.98) !important;
    border-bottom-color:rgba(226,232,240,.98) !important;
    box-shadow:0 18px 42px rgba(15,23,42,.12) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}
.public-site-header.is-scrolled::before,
.public-site-header[data-state="scrolled-white"]::before,
body.public-header-scrolled .public-site-header::before{
    opacity:0 !important;
}
.public-site-header__inner{
    max-width:1480px;
    min-height:112px;
    margin:0 auto;
    padding:0 34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}
.public-brand{display:flex;align-items:center;gap:16px;color:#0b1e4b;flex-shrink:0}
.public-brand__icon{
    min-width:70px;
    width:70px;
    height:70px;
    border-radius:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#95b400 0%,#d7e36b 100%);
    color:#0b1e4b;
    font-weight:900;
    font-size:22px;
    box-shadow:0 14px 28px rgba(149,180,0,.20);
    transition:transform .42s ease, box-shadow .42s ease;
}
.public-brand__text{display:flex;flex-direction:column;gap:4px}
.public-brand__text strong{font-size:34px;line-height:1;font-weight:900;letter-spacing:-.6px}
.public-brand__text small{font-size:13px;color:#64748b;font-weight:800;letter-spacing:.02em}
.public-main-nav{display:flex;align-items:center;gap:42px;justify-content:center;flex:1}
.public-main-nav a{position:relative;color:#334155;font-size:17px;font-weight:800;padding:10px 0}
.public-main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:#95b400;transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.public-main-nav a:hover,.public-main-nav a.active{color:#0f172a}
.public-main-nav a:hover::after,.public-main-nav a.active::after{transform:scaleX(1)}
.public-header-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.public-header-meta{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;font-size:13px;font-weight:800}
.public-login-btn{display:inline-flex;align-items:center;justify-content:center;min-width:118px;min-height:50px;padding:0 22px;border-radius:999px;background:#0b1e4b;color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 20px rgba(11,30,75,.16)}
.public-login-btn:hover{background:#102a67;color:#fff}
.public-nav-toggle{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;font-weight:800}
.public-topbar{display:none}

.topbar{background:#0b173a;color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.16)}
.topbar-legal{height:auto;padding:0 0}
.topbar-inner{max-width:1880px;margin:0 auto;height:64px;display:flex;align-items:center;gap:16px;padding:0 18px}
.legal-brand-wrap{min-width:auto;display:none}
.legal-version{display:none}
.legal-nav-actions{justify-content:center;gap:28px;flex:1}
.legal-export-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.nav-link-legal{position:relative;display:inline-flex;align-items:center;height:64px;font-size:14px;color:#f8fafc;font-weight:700;opacity:.92}
.nav-link-legal:hover,.nav-link-legal.active{opacity:1;color:#fff}
.nav-link-legal::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;border-radius:999px;background:#facc15;transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.nav-link-legal:hover::after,.nav-link-legal.active::after{transform:scaleX(1)}
.legal-export-link{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.12)}
.legal-export-link:hover{background:rgba(255,255,255,.14)}
.topbar-user{display:inline-flex;align-items:center;height:43px;padding:0 12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:700;border-radius:6px;text-transform:capitalize}

.public-site-header .public-brand__icon,
.public-site-header .public-login-btn,
.public-site-header .public-header-meta{
    transition:
        transform .42s ease,
        box-shadow .42s ease,
        background .42s ease,
        border-color .42s ease !important;
}
.public-site-header.is-scrolled .public-brand__icon,
.public-site-header[data-state="scrolled-white"] .public-brand__icon,
body.public-header-scrolled .public-site-header .public-brand__icon{
    transform:scale(.95) !important;
    box-shadow:0 10px 22px rgba(149,180,0,.14) !important;
}
.public-site-header.is-scrolled .public-header-meta,
.public-site-header[data-state="scrolled-white"] .public-header-meta,
body.public-header-scrolled .public-site-header .public-header-meta{
    background:#ffffff !important;
    border-color:#e2e8f0 !important;
}

.landing-floating-support{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:125;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.floating-support-btn{
    position:relative;
    width:70px;
    height:70px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 36px rgba(15,23,42,.20);
    border:2px solid rgba(255,255,255,.72);
    text-decoration:none;
}
.floating-support-btn__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    border-radius:999px;
    color:#fff;
    font-size:18px;
    font-weight:900;
    letter-spacing:.04em;
}
.floating-support-btn__icon svg{
    width:34px;
    height:34px;
    display:block;
}
.floating-support-btn--ai .floating-support-btn__icon svg{
    width:36px;
    height:36px;
}
.floating-support-btn__label{
    position:absolute;
    right:84px;
    top:50%;
    transform:translateY(-50%);
    white-space:nowrap;
    min-height:38px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:rgba(2,6,23,.88);
    color:#fff;
    font-size:13px;
    font-weight:800;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
}
.floating-support-btn:hover .floating-support-btn__label,
.floating-support-btn:focus-visible .floating-support-btn__label{
    opacity:1;
    transform:translateY(-50%) translateX(-4px);
}
.floating-support-btn--ai .floating-support-btn__icon{
    background:linear-gradient(135deg,#0b1e4b 0%,#1d4ed8 100%);
}
.floating-support-btn--wa .floating-support-btn__icon{
    background:linear-gradient(135deg,#16a34a 0%,#25d366 100%);
}

@media (max-width: 1180px){
    .public-site-header__inner{min-height:98px;padding:14px 18px;gap:14px;flex-wrap:wrap;justify-content:center}
    .public-brand{width:100%;justify-content:center}
    .public-main-nav{order:3;width:100%;gap:24px;flex-wrap:wrap}
    .public-header-actions{width:100%;justify-content:center}
}
@media (max-width: 860px){
    .public-nav-toggle{display:inline-flex}
    .public-site-header__inner{justify-content:space-between;align-items:center}
    .public-brand{width:auto;justify-content:flex-start}
    .public-header-actions{width:auto;justify-content:flex-end}
    .public-header-meta{display:none}
    .public-main-nav{display:none;order:4;width:100%;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.98);border:1px solid #e2e8f0;box-shadow:0 18px 38px rgba(15,23,42,.10)}
    .public-main-nav.is-open{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
    .public-main-nav a{font-size:15px}
}
@media (max-width: 720px){
    .public-site-header__inner{min-height:92px;padding:12px 16px}
    .public-brand__icon{min-width:58px;width:58px;height:58px;border-radius:18px;font-size:18px}
    .public-brand__text strong{font-size:24px}
    .public-brand__text small{font-size:12px}
    .public-login-btn{min-height:44px;min-width:96px;padding:0 16px;font-size:14px}
    .landing-floating-support{right:12px;bottom:12px;gap:10px}
    .floating-support-btn{width:58px;height:58px}
    .floating-support-btn__icon{font-size:14px}
    .floating-support-btn__label{display:none}
}


/* v18.32: fixed header offset for landing section navigation */
#hero,
#fitur,
#template,
#kontak{
    scroll-margin-top:calc(var(--public-header-height, 112px) + 22px) !important;
}
.public-main-nav a[data-section-target]{
    cursor:pointer !important;
}


/* v18.33 Direct section navigation reliability */
.public-main-nav a[data-section-target],
.public-brand[data-section-target]{
    pointer-events:auto !important;
    cursor:pointer !important;
}
#hero,#fitur,#template,#kontak{
    scroll-margin-top:calc(var(--public-header-height, 112px) + 26px) !important;
}
body.guest-body{
    overflow-y:auto !important;
}
.app-body.with-public-navbar{
    overflow:visible !important;
}