/*
Theme Name: BPR Emerald Mobile Theme
Description: Tema Digital Deposito bergaya mobile-first view (PPOB style) dengan warna Emerald Green.
Author: BPR Developer
Version: 1.4.2
*/

:root {
    /* Emerald (premium + bright) */
    --emerald-primary: #10b981;   /* emerald-500 */
    --emerald-dark: #065f46;      /* emerald-800 */
    --emerald-light: #d1fae5;     /* emerald-100 */
    --emerald-glow: rgba(16, 185, 129, 0.35);
    --emerald-gradient: linear-gradient(135deg, #34d399 0%, #10b981 45%, #059669 100%);
    --emerald-gradient-soft: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 35%, #34d399 100%);
    --bg-light: #f3f4f6;
    --text-dark: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;

    /* Top bar sizing (JS will update these for perfect offsets) */
    --topbar-running: 0px;
    --topbar-header: 56px;
    --topbar-height: calc(var(--topbar-running) + var(--topbar-header));
}

/* =========================
   BLOG / ARTIKEL (NEW)
   ========================= */

.page-title{
    font-size:18px;
    font-weight:800;
    margin: 5px 0 14px;
    letter-spacing: .2px;
}

.archive-desc{
    color: var(--text-muted);
    font-size: 13px;
    margin: -6px 0 14px;
}

.post-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.post-card{
    border-radius: 18px;
    overflow:hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(16,185,129,.10);
    box-shadow: 0 10px 22px rgba(2, 6, 23, .06);
}

/* Post card links */
.post-card-link,
.post-thumb-link{ display:block; text-decoration:none; color: inherit; }

.post-thumb img{
    width:100%;
    height:auto;
    display:block;
}

.post-card-body{
    padding: 14px 14px 16px;
}

.post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.post-meta i{ opacity:.9; }

.post-title{
    font-size: 16px;
    line-height:1.25;
    margin: 0 0 8px;
    font-weight: 850;
    display:block;
    color: inherit;
    text-decoration: none;
}

.post-title:hover,
.post-title:active{ color: var(--emerald-dark); }

.post-excerpt{
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.post-readmore{
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-weight: 800;
    color: var(--emerald-primary);
    font-size: 13px;
    text-decoration: none;
}

.post-readmore:hover,
.post-readmore:active{ color: var(--emerald-dark); }

.pagination-wrap{
    margin-top: 16px;
}

.pagination-wrap .nav-links,
.pagination-wrap ul{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:center;
    padding:0;
    margin:0;
    list-style:none;
}

.pagination-wrap a,
.pagination-wrap span{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(16,185,129,.20);
    background: rgba(255,255,255,.9);
    text-decoration:none;
    font-weight: 800;
    color: var(--text-dark);
}

.pagination-wrap .current{
    background: linear-gradient(135deg, rgba(16,185,129,1), rgba(5,150,105,1));
    color: #fff;
    border-color: transparent;
}

.empty-state{
    text-align:center;
    padding: 40px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.9);
    border: 1px dashed rgba(16,185,129,.25);
    color: var(--text-muted);
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 16px;
    border-radius: 14px;
    color:#fff;
    font-weight: 900;
    text-decoration:none;
    background: linear-gradient(135deg, rgba(16,185,129,1), rgba(5,150,105,1));
}

/* Single post */
.single-post{
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(16,185,129,.12);
    border-radius: 18px;
    overflow:hidden;
    box-shadow: 0 12px 26px rgba(2,6,23,.06);
}

.single-top{
    padding: 12px 14px;
    border-bottom: 1px solid rgba(16,185,129,.12);
    background: rgba(16,185,129,.04);
}

.btn-back{
    display:inline-flex;
    gap:10px;
    align-items:center;
    text-decoration:none;
    font-weight: 900;
    color: var(--text-dark);
}

.single-header{ padding: 14px 14px 6px; }
.single-title{ margin:0 0 10px; font-size: 20px; font-weight: 900; line-height:1.2; }
.single-meta{ display:flex; flex-wrap:wrap; gap:10px; color: var(--text-muted); font-size: 12px; }
.single-thumb img{ width:100%; height:auto; display:block; }
.single-content{ padding: 14px; font-size: 14px; line-height:1.7; }
.single-content h2,.single-content h3{ line-height:1.25; }
.single-content a{ color: var(--emerald-primary); font-weight:800; }
.single-footer{ padding: 0 14px 14px; }
.post-tags{ color: var(--text-muted); font-size: 12px; }
.single-nav{ display:flex; gap:12px; margin-top: 14px; }
.single-nav-item{ flex:1; }
.single-nav a{ text-decoration:none; font-weight:900; color: var(--emerald-primary); }

/* Beranda: strip artikel */
.section-head-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.section-link{
    text-decoration:none;
    font-weight: 900;
    color: var(--emerald-primary);
    font-size: 13px;
    white-space:nowrap;
}

.post-strip{
    display:flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 6px;
}

.post-strip > .post-mini{ scroll-snap-align: start; }

.post-strip::-webkit-scrollbar{ height: 6px; }
.post-strip::-webkit-scrollbar-thumb{ background: rgba(16,185,129,.25); border-radius: 999px; }

.post-mini{
    min-width: 250px;
    max-width: 250px;
    border-radius: 18px;
    overflow:hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(16,185,129,.10);
    box-shadow: 0 10px 22px rgba(2, 6, 23, .06);
}

.post-strip-dots{
    display:flex;
    justify-content:center;
    gap: 8px;
    margin-top: 10px;
}

.post-strip-dot{
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(16,185,129,.18);
    box-shadow: inset 0 0 0 1px rgba(16,185,129,.14);
    transform: scale(1);
    transition: transform .18s ease, background .18s ease;
}

.post-strip-dot.is-active{
    background: rgba(16,185,129,.75);
    transform: scale(1.25);
}

.post-mini-inner{ display:flex; gap: 12px; padding: 12px; }
.post-mini-thumb-link{ display:block; text-decoration:none; }

.post-mini-thumb{
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow:hidden;
    flex: 0 0 auto;
    background: rgba(16,185,129,.06);
    border: 1px solid rgba(16,185,129,.14);
    display:flex;
    align-items:center;
    justify-content:center;
}

.post-mini-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }

.post-mini-thumb.is-placeholder i{ font-size: 26px; color: var(--emerald-primary); opacity:.9; }

.post-mini-body{ flex:1; min-width: 0; }
.post-mini-date{ color: var(--text-muted); font-size: 11px; margin-bottom: 6px; }
.post-mini-title{
    font-weight: 900;
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 6px;
    display:block;
    color: inherit;
    text-decoration:none;
}

.post-mini-title:hover,
.post-mini-title:active{ color: var(--emerald-dark); }

.post-mini-readmore{
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-weight: 900;
    color: var(--emerald-primary);
    font-size: 12px;
    margin-top: 8px;
    text-decoration:none;
}

.post-mini-readmore:hover,
.post-mini-readmore:active{ color: var(--emerald-dark); }
.post-mini-excerpt{ color: var(--text-muted); font-size: 12px; line-height: 1.35; }

@media (min-width: 900px){
    .post-grid{ grid-template-columns: repeat(2, 1fr); }
}


/* Make the outer background follow the header theme (mobile-first feel) */
html { background-color: var(--emerald-dark); scroll-behavior: smooth; }
body {
    max-width: 480px;
    margin: 0 auto;
    background-color: #ffffff;
    min-height: 100vh;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding-top: var(--topbar-height);
    padding-bottom: 75px; /* Ruang untuk bottom nav */
}

/* Page loader removed (per request) */

/* Running Text (fixed to support floating header below it) */
.running-text-container {
    background: var(--emerald-light);
    color: var(--emerald-dark);
    font-size: 12px;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--emerald-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 120;
}
.running-text-content { display: inline-block; padding-left: 100%; animation: marquee 15s linear infinite; font-weight: 600; }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

/* Header & Logo */
.app-header {
    background: var(--emerald-dark);
    color: white;
    padding: 12px 16px;
    text-align: center;
    position: fixed;
    top: var(--topbar-running);
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 110;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, padding 0.22s ease;
}

/* Floating effect on scroll (transparent + blur, fintech feel) */
.app-header.is-floating {
    background: rgba(6, 95, 70, 0.70);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

/* Compact floating header on scroll (gives more reading space)
   JS will toggle .is-compact when user scrolls further down.
*/
.app-header.is-compact {
    padding: 7px 14px;
}
.app-header.is-compact .custom-logo-link img { max-height: 30px; }
.app-header.is-compact .site-title-text { font-size: 16px; }
.app-header.is-compact .burger-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.app-header-brand { display: flex; align-items: center; justify-content: center; width: 100%; }
.custom-logo-link img { max-height: 40px; width: auto; display: block; }
.site-title-text { font-weight: bold; font-size: 18px; margin: 0; }

/* Burger button */
.burger-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.burger-btn:active { transform: translateY(-50%) scale(0.96); }
.burger-lines {
    width: 18px;
    height: 2px;
    background: #fff;
    position: relative;
    border-radius: 2px;
}
.burger-lines::before,
.burger-lines::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}
.burger-lines::before { top: -6px; }
.burger-lines::after { top: 6px; }

/* Mobile off-canvas menu */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 999;
}
.mobile-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(86vw, 340px);
    background: #ffffff;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1000;
    box-shadow: 12px 0 30px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
}
.mobile-menu-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #ffffff, #ecfdf5);
}
.mobile-menu-title { font-weight: 800; color: var(--emerald-dark); }
.mobile-menu-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 0;
    background: rgba(16,185,129,0.12);
    color: var(--emerald-dark);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.mobile-menu-body {
    padding: 10px 10px 20px 10px;
    overflow-y: auto;
}
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-menu-list li { margin: 6px 0; }
.mobile-menu-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 700;
}
.mobile-menu-list a:hover,
.mobile-menu-list a:active {
    background: rgba(16,185,129,0.10);
    color: var(--emerald-dark);
}

body.menu-open .mobile-menu-overlay { opacity: 1; pointer-events: auto; }
body.menu-open .mobile-menu-panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-overlay,
    .mobile-menu-panel { transition: none; }
}

/* Hero Section */
.hero-section {
    background: var(--emerald-gradient);
    color: white;
    padding: 30px 20px 80px 20px; /* Padding bawah diperbesar untuk menampung banner */
    text-align: center;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.hero-section h1 { margin: 0; font-size: 22px; font-weight: 700;}
.hero-section p { margin-top: 8px; font-size: 14px; opacity: 0.95; line-height: 1.5; }

/* Tombol Hero Diperhalus (Smooth & Modern) */
.hero-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 25px; }
.btn-hero {
    background: white;
    color: var(--emerald-dark);
    padding: 14px 15px;
    border-radius: 30px; /* Bentuk pill-shape yang smooth */
    text-decoration: none;
    font-weight: 800;
    flex: 1;
    text-align: center;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Bayangan lebih lembut */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-hero:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Banner Promosi Scroll Horizontal */
.promo-banner-section {
    margin-top: -50px; /* Menarik banner ke atas area hijau proporsional */
    padding: 0 20px;
    position: relative;
    z-index: 15;
}
.promo-scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding-bottom: 15px; /* Ruang untuk efek bayangan */
    scrollbar-width: none;
}
.promo-scroll-container::-webkit-scrollbar { display: none; }
.banner-item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: block;
}
.banner-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 15px;
}

/* Quick Access */
.quick-access-wrapper { padding: 5px 20px 10px 20px; position: relative; z-index: 10; }
.quick-access-grid { background: white; border-radius: 15px; padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid var(--bg-light); }
.quick-btn { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--text-dark); font-size: 12px; font-weight: 600; }
.quick-icon { width: 50px; height: 50px; background: var(--emerald-light); color: var(--emerald-dark); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 10px; transition: background 0.3s; }
.quick-btn:active .quick-icon { background: var(--emerald-primary); color: white; }

/* Produk Promosi Card (Baru) */
.promo-produk-card {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
    border: 1px solid var(--emerald-primary);
    border-radius: 15px;
    padding: 15px;
    margin: 0 20px 20px 20px;
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: 0 6px 15px rgba(4, 120, 87, 0.08);
    transition: transform 0.2s;
}
.promo-produk-card:active { transform: scale(0.98); }
.promo-produk-icon { width: 100px; height: 100px; flex-shrink: 0; margin-right: 15px; border-radius: 12px; object-fit: contain; background: white; padding: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.promo-produk-details { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.promo-produk-title { font-size: 13px; color: var(--text-muted); margin: 0 0 4px 0; text-transform: uppercase; font-weight: 600;}
.promo-produk-nominal { font-size: 18px; font-weight: 800; color: var(--emerald-dark); margin: 0 0 5px 0; }
.promo-produk-tenor { font-size: 12px; color: var(--text-dark); margin: 0 0 10px 0; }
.promo-produk-rate { background: #fef08a; color: #b45309; padding: 5px 10px; border-radius: 8px; font-weight: 800; font-size: 14px; text-align: center; width: max-content; }

/* Sections Global & Kinerja */
.section-padding { padding: 30px 20px; border-bottom: 8px solid var(--bg-light); }
.section-title { text-align: center; font-size: 18px; margin-bottom: 25px; color: var(--emerald-dark); font-weight: 700; }
.kinerja-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.kinerja-card { background: white; padding: 20px 15px; border-radius: 15px; text-align: center; border: 1px solid var(--border-color); font-size: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.03);}
.kinerja-card i { font-size: 28px; color: var(--emerald-primary); margin-bottom: 12px; }
.kinerja-value { font-weight: 800; font-size: 15px; margin-top: 8px; color: var(--text-dark); }

/* Keunggulan & FAQ */
.keunggulan-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; padding: 20px; background: #fff; border: 1px solid var(--border-color); border-radius: 15px; }
.keunggulan-icon { background: var(--emerald-light); color: var(--emerald-primary); width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; flex-shrink: 0;}
.keunggulan-text h3 { margin: 0 0 8px 0; font-size: 15px; font-weight: 700;}
.keunggulan-text p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.faq-accordion details { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 12px; }
.faq-accordion details[open] { border-color: var(--emerald-primary); }
.faq-accordion summary { padding: 18px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; font-size: 14px; align-items: center;}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--emerald-primary); font-size: 12px;}
.faq-accordion details[open] summary::after { transform: rotate(180deg); }
.faq-accordion .faq-content { padding: 0 18px 20px 18px; font-size: 13px; color: var(--text-muted); line-height: 1.6; border-top: 1px solid var(--bg-light);}

/* CS & Gmaps */
.btn-wa { display: flex; align-items: center; justify-content: center; gap: 10px; background: #25D366; color: white; padding: 18px; border-radius: 15px; text-decoration: none; font-weight: bold; font-size: 15px; margin-top: 10px; box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3); }
.gmaps-container iframe { width: 100% !important; height: 250px !important; border-radius: 15px; border: none; }

/* Footer & Bottom Nav */
.footer-rich {
    padding: 18px 18px 8px 18px;
    background: #ffffff;
}
.footer-rich-inner {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px 14px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.04);
}
.footer-rich-inner p {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}
.footer-rich-inner p:last-child { margin-bottom: 0; }
.footer-rich-inner strong,
.footer-rich-inner b {
    color: var(--text-dark);
    font-weight: 800;
}
.footer-rich-inner a {
    color: var(--emerald-dark);
    font-weight: 700;
    text-decoration: none;
}
.footer-rich-inner a:hover { text-decoration: underline; }

.app-footer { text-align: center; padding: 25px 20px; font-size: 12px; color: var(--text-muted); background: var(--bg-light); margin-bottom: 0; }
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--emerald-gradient);
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    box-shadow: 0 -10px 25px rgba(6, 95, 70, 0.18);
    border-top: 0;
    z-index: 1000;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;

    /* Auto scale icon/label size based on visible menu count (1-5)
       Count is injected via footer.php: <nav data-count="N"> */
    --bn-icon: 20px;
    --bn-text: 10px;
    --bn-gap: 5px;
}

/* sedikit lebih besar jika menu lebih sedikit */
.bottom-nav[data-count="4"] { --bn-icon: 22px; --bn-text: 10.5px; --bn-gap: 6px; }
.bottom-nav[data-count="3"] { --bn-icon: 24px; --bn-text: 11px;  --bn-gap: 7px; }
.bottom-nav[data-count="2"] { --bn-icon: 26px; --bn-text: 12px;  --bn-gap: 8px; }
.bottom-nav[data-count="1"] { --bn-icon: 28px; --bn-text: 12px;  --bn-gap: 8px; }
.bottom-nav::before {
    /* subtle premium highlight */
    content: '';
    position: absolute;
    inset: 0;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    background: radial-gradient(120px 60px at 50% 0%, rgba(255,255,255,0.28), rgba(255,255,255,0) 70%);
    pointer-events: none;
}

/* === App-like active state: sliding indicator pill === */
.bottom-nav .bottom-nav-indicator{
    position: absolute;
    top: 6px;
    bottom: 8px;
    left: 0;
    width: 0;
    border-radius: 18px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateX(0);
    transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), width 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
    z-index: 0;
    pointer-events: none;
    will-change: transform, width;
}
.bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: var(--bn-text);
    font-weight: 700;
    gap: var(--bn-gap);
    flex: 1;
    z-index: 1;
}
.bottom-nav-item i { font-size: var(--bn-icon); }
.bottom-nav-item.active,
.bottom-nav-item:hover {
    color: #ffffff;
}
.bottom-nav-item.active::after {
    /* replaced by indicator pill for a more app-like active state */
    content: none;
}
.bottom-nav-item.active i {
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18));
}

.bottom-nav-item.active span{
    font-weight: 800;
    letter-spacing: 0.1px;
}

/* === Tap / Click Pop Interaction (Bottom Nav + Buttons) === */
.bottom-nav-item,
.bottom-nav-item i,
.bottom-nav-item svg,
.btn-primary, .btn-hero, .btn-back, .btn-wa,
button, input[type="submit"], input[type="button"], input[type="reset"],
a.wp-block-button__link, .wp-element-button,
.wpforms-submit, .fluentform button, .nf-form-content button, .wpcf7-submit {
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.bottom-nav-item.is-pressed {
    transform: translateY(-2px) scale(1.05);
    color: #ffffff;
}
.bottom-nav-item.is-pressed i,
.bottom-nav-item.is-pressed svg {
    transform: scale(1.22);
    filter: drop-shadow(0 10px 14px rgba(0,0,0,0.20));
}

/* Give a slightly bolder look while pressed */
.bottom-nav-item.is-pressed i { font-weight: 900; }

/* === Smooth page transitions (app-like) === */
.mobile-container{
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: opacity, transform;
}
body.is-page-entering .mobile-container{
    opacity: 0;
    transform: translateY(10px);
}
body.is-page-exiting .mobile-container{
    opacity: 0;
    transform: translateY(-8px);
}

/* Generic "pop" for primary buttons / clickable actions */
.is-pressed-btn {
    transform: translateY(-1px) scale(1.03);
    filter: drop-shadow(0 10px 18px rgba(6,95,70,0.18));
}

/* Pages & Form Styles */
.mobile-container { min-height: 85vh; background: #fff; }
.btn-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-muted); font-size: 13px; font-weight: 600; margin: 20px 20px 0 20px; padding: 8px 12px; background: var(--bg-light); border-radius: 8px; }
.page-title { text-align: left; color: var(--emerald-dark); font-size: 22px; font-weight: 800; margin: 15px 20px 5px 20px; padding-bottom: 15px; border-bottom: 2px solid var(--bg-light); }
.page-content { padding: 25px 20px; font-size: 14px; line-height: 1.7; color: var(--text-dark); }
/*
 * Form controls
 * NOTE: Do NOT apply the "full-width input" styling to checkbox/radio.
 * On iOS Safari a padded/100%-width checkbox ends up looking like it's pushed
 * to the right and the label alignment becomes messy.
 */
.page-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.page-content select,
.page-content textarea{
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fdfdfd;
    font-family: inherit;
    font-size: 14px;
    transition: 0.3s;
    outline: none;
}

/* Keep checkbox/radio compact & left-aligned inside page content */
.page-content input[type="checkbox"],
.page-content input[type="radio"]{
    width: auto !important;
    padding: 0 !important;
    margin: 0 10px 0 0;
    border-radius: 6px;
    /* Make the control readable on mobile (native checkbox can look too small) */
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transform-origin: left top;
    /* Fallback for some iOS builds */
    zoom: 1.25;
    accent-color: var(--emerald-primary);
}

@media (min-width: 768px){
  .page-content input[type="checkbox"],
  .page-content input[type="radio"]{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    zoom: 1;
  }
}

/* Common pattern: <label><input type="checkbox"> Text</label> */
.page-content label{
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

/* Make the checkbox statement text larger without affecting all form field labels */
.page-content label.bpr-checkbox-label{
    font-size: 15.5px;
    line-height: 1.45;
    color: #0f172a;
}

/* Prevent signature canvas from overflowing its container on iOS Chrome/Safari */
.page-content canvas{
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    display: block;
}
.page-content .signature-pad,
.page-content .signature,
.page-content .signature-wrapper,
.page-content .signature-container,
.page-content .sig-wrapper,
.page-content .sig-container,
.page-content .bpr-signature{
    max-width: 100%;
    overflow: hidden;
}
.page-content input:focus, .page-content select:focus, .page-content textarea:focus { border-color: var(--emerald-primary); box-shadow: 0 0 0 4px var(--emerald-light); }
.page-content input[type="submit"],
.page-content button {
    width: 100%;
    padding: 18px;
    background: var(--emerald-gradient);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px var(--emerald-glow);
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.page-content input[type="submit"]:active,
.page-content button:active {
    transform: scale(0.985);
    filter: brightness(0.98);
    box-shadow: 0 7px 16px rgba(16, 185, 129, 0.28);
}



/* =========================
   Plugin Table Section (Customizer + Shortcode)
   ========================= */
.bpr-plugin-section{
    margin: 18px 0 10px;
    padding: 0 14px;
}

/* Premium emerald divider (subtle separator) */
.bpr-plugin-divider{
    height: 2px;
    width: min(320px, 82%);
    margin: 14px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(16,185,129,0) 0%, rgba(16,185,129,.9) 25%, rgba(52,211,153,1) 50%, rgba(16,185,129,.9) 75%, rgba(16,185,129,0) 100%);
    box-shadow: 0 6px 18px rgba(16,185,129,.22);
}
.bpr-plugin-card{
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    border: 1px solid rgba(16,185,129,.14);
    overflow: hidden;
}
.bpr-plugin-head{
    padding: 14px 14px 10px;
    background: var(--emerald-gradient-soft);
    border-bottom: 1px solid rgba(16,185,129,.16);
}
.bpr-plugin-title{
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--emerald-dark);
}
.bpr-plugin-subtitle{
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(31,41,55,.85);
}
.bpr-plugin-content{
    padding: 12px 14px 10px;
}

/* Make plugin tables mobile-friendly + match theme */
.bpr-plugin-content{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bpr-plugin-content table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 0; /* allow form tables to fit mobile */
    table-layout: fixed;
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 14px;
    overflow: hidden;
}
.bpr-plugin-content th,
.bpr-plugin-content td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: 13px;
    vertical-align: top;
    color: var(--text-dark);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

/* Keep first column compact for checkbox/radio rows */
.bpr-plugin-content td:first-child{
    width: 56px;
    max-width: 56px;
    white-space: nowrap;
}
.bpr-plugin-content td:first-child input[type="checkbox"],
.bpr-plugin-content td:first-child input[type="radio"]{
    display: inline-block;
    margin: 0;
}
/* Ensure the second column can wrap and never overflow the viewport */
.bpr-plugin-content td:nth-child(2){
    width: auto;
    min-width: 0;
}
.bpr-plugin-content th{
    text-align: left;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(16,185,129,.12) 0%, rgba(52,211,153,.10) 60%, rgba(236,253,245,.7) 100%);
    color: var(--emerald-dark);
}
.bpr-plugin-content tr:last-child td{
    border-bottom: 0;
}
.bpr-plugin-content a{
    color: var(--emerald-primary);
    font-weight: 600;
    text-decoration: none;
}

/* =========================
   Responsive Form Tables (Shortcode Forms)
   - Keep data tables scrollable, but make form-table fluid on mobile
   ========================= */
.bpr-plugin-content table.form-table,
.bpr-plugin-content table.bpr-form-table,
.bpr-plugin-content table.bpr-shortcode-form{
    min-width: 0;
    width: 100%;
}
.bpr-plugin-content table.form-table th,
.bpr-plugin-content table.form-table td,
.bpr-plugin-content table.bpr-form-table th,
.bpr-plugin-content table.bpr-form-table td,
.bpr-plugin-content table.bpr-shortcode-form th,
.bpr-plugin-content table.bpr-shortcode-form td{
    white-space: normal;
}

/* Checkbox & radio should never be centered / stretched */
.bpr-plugin-content input[type="checkbox"],
.bpr-plugin-content input[type="radio"]{
    width: auto !important;
    max-width: none !important;
    transform: scale(1.25);
    transform-origin: left top;
    accent-color: var(--emerald-primary);
}

/* Better alignment for consent checkbox rows (common plugin patterns) */
.bpr-plugin-content .consent-row,
.bpr-plugin-content .checkbox-row,
.bpr-plugin-content .bpr-consent,
.bpr-plugin-content .bpr-checkbox{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}
.bpr-plugin-content .consent-row input[type="checkbox"],
.bpr-plugin-content .checkbox-row input[type="checkbox"],
.bpr-plugin-content .bpr-consent input[type="checkbox"],
.bpr-plugin-content .bpr-checkbox input[type="checkbox"]{
    margin-top: 3px;
}

@media (max-width: 520px){
    /* Convert form tables to stacked layout to prevent overflow on mobile */
    .bpr-plugin-content table.form-table,
    .bpr-plugin-content table.bpr-form-table,
    .bpr-plugin-content table.bpr-shortcode-form{
        border-radius: 14px;
    }
    .bpr-plugin-content table.form-table tr,
    .bpr-plugin-content table.bpr-form-table tr,
    .bpr-plugin-content table.bpr-shortcode-form tr{
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 12px;
    }
    .bpr-plugin-content table.form-table th,
    .bpr-plugin-content table.form-table td,
    .bpr-plugin-content table.bpr-form-table th,
    .bpr-plugin-content table.bpr-form-table td,
    .bpr-plugin-content table.bpr-shortcode-form th,
    .bpr-plugin-content table.bpr-shortcode-form td{
        display: block;
        width: 100%;
        padding: 0;
        border-bottom: 0;
        text-align: left;
    }
    .bpr-plugin-content table.form-table th,
    .bpr-plugin-content table.bpr-form-table th,
    .bpr-plugin-content table.bpr-shortcode-form th{
        font-weight: 800;
        color: var(--emerald-dark);
        background: transparent;
    }
    .bpr-plugin-content{
        overflow-x: hidden; /* prevent accidental sideways scroll for forms */
    }
}

.bpr-plugin-notes{
    padding: 0 14px 14px;
}
.bpr-plugin-notes ul{
    margin: 0;
    padding-left: 18px;
    color: rgba(31,41,55,.88);
    font-size: 12.5px;
    line-height: 1.55;
}
.bpr-plugin-notes li{
    margin: 6px 0;
}


/* ==================================================
   DESKTOP FIX KHUSUS HALAMAN SHORTCODE FORM
   Ganti 123 dengan page-id halaman form kamu
   ================================================== */

body.page-id-184{
  max-width: 100%;
  margin: 0;
  overflow-x: visible;
  background: var(--emerald-dark);
}

body.page-id-184 .running-text-container,
body.page-id-184 .app-header,
body.page-id-184 .bottom-nav{
  max-width: 100%;
}

@media (min-width: 992px){
  body.page-id-184 .mobile-container{
    max-width: 980px;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  }

  body.page-id-184 .page-content{
    padding: 28px 28px;
  }
}

body.page-id-184 .page-content .ff-step-titles,
body.page-id-184 .page-content .ff_steps,
body.page-id-184 .page-content .steps,
body.page-id-184 .page-content .step-tabs,
body.page-id-184 .page-content .nav-tabs{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.page-id-184 .page-content .ff-step-titles,
body.page-id-184 .page-content .steps,
body.page-id-184 .page-content .step-tabs{
  flex-wrap: wrap;
}


/* ==================================================
   DESKTOP MODE (SEMUA HALAMAN)
   Tujuan: di desktop tampil seperti screenshot (container di tengah, lebih lebar, tidak kepotong)
   Aman: tidak mengubah styling checkbox/radio/canvas
   ================================================== */

@media (min-width: 992px){
  body{
    max-width: 100%;
    margin: 0;
    overflow-x: visible;
    background: var(--emerald-dark);
  }

  .running-text-container,
  .app-header,
  .bottom-nav{
    max-width: 100%;
  }

  /* Konten utama tetap center seperti "app card" */
  .mobile-container{
    max-width: 980px;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  }

  .page-content{
    padding: 28px 28px;
  }

  /* Antisipasi step/tab form atau elemen lebar lainnya agar tidak kepotong */
  .page-content .ff-step-titles,
  .page-content .ff_steps,
  .page-content .steps,
  .page-content .step-tabs,
  .page-content .nav-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-content .ff-step-titles,
  .page-content .steps,
  .page-content .step-tabs{
    flex-wrap: wrap;
  }
}


/* ==================================================
   DESKTOP: rapikan lebar "section 8b" (footer konten) agar mengikuti lebar konten utama
   Catatan: selector dibuat aman (mencakup beberapa kemungkinan class/id)
   ================================================== */
@media (min-width: 992px){
  /* Kemungkinan ID/kelas section 8b */
  #section-8b,
  .section-8b,
  .sec-8b,
  .footer-8b,
  .footer-section-8b,
  .section8b{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Jika ada wrapper/container di dalamnya */
  #section-8b .container,
  .section-8b .container,
  .sec-8b .container,
  .footer-8b .container,
  .footer-section-8b .container,
  .section8b .container{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Antisipasi elemen Gutenberg/group yang kadang melebar */
  #section-8b .wp-block-group,
  .section-8b .wp-block-group,
  #section-8b .wp-block-columns,
  .section-8b .wp-block-columns{
    max-width: 100%;
  }
}

/* ==================================================
   DESKTOP: kunci lebar footer rich (section 8b) sesuai konten utama
   Selector tepat dari footer.php: .footer-rich + .footer-rich-inner
   ================================================== */
@media (min-width: 992px){
  .footer-rich{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer-rich-inner{
    max-width: 100%;
  }
}



/* ==================================================
   DESKTOP PREMIUM: footer rich dibuat "card" agar rapi & konsisten dengan container utama
   Hanya desktop (>= 992px). Mobile tidak berubah.
   ================================================== */
@media (min-width: 992px){
  .footer-rich{
    max-width: 980px;
    margin: 24px auto 0;
    padding: 0; /* wrapper saja */
  }

  .footer-rich-inner{
    background: rgba(255,255,255,0.98);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
    padding: 22px 26px;
  }

  /* Rapikan tipografi footer (tetap mengikuti warna theme) */
  .footer-rich-inner h1,
  .footer-rich-inner h2,
  .footer-rich-inner h3{
    margin-top: 0;
  }

  /* Jaga agar tabel/kolom/footer list tidak melebar aneh */
  .footer-rich-inner .wp-block-columns,
  .footer-rich-inner .wp-block-group,
  .footer-rich-inner .elementor-container,
  .footer-rich-inner .container{
    max-width: 100%;
  }

  /* Space aman sebelum bottom nav (kalau ada) */
  .footer-rich{
    scroll-margin-bottom: 120px;
  }
}



/* ==================================================
   DESKTOP PREMIUM v2:
   - Footer area (termasuk copyright) ikut "sama rata" dengan section card lainnya
   - Footer rich rounded atas dipaksa tampil (anti override) + clip isi
   Hanya desktop (>= 992px). Mobile tidak berubah.
   ================================================== */
@media (min-width: 992px){

  /* 1) Samakan lebar footer site / copyright dengan container utama */
  footer,
  .site-footer,
  #colophon,
  .footer,
  .footer-area{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Jika ada wrapper full-width di dalam footer */
  footer .container,
  .site-footer .container,
  #colophon .container,
  footer .footer-inner,
  .site-footer .footer-inner{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 2) Footer rich: pastikan rounded atas terlihat dan konsisten */
  .footer-rich{
    max-width: 980px;
    margin: 24px auto 0;
  }

  .footer-rich-inner{
    background: rgba(255,255,255,0.98);
    border-radius: 18px !important;
    overflow: hidden; /* supaya map/iframe/columns ikut ter-clip rounded */
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
    padding: 22px 26px;
  }

  /* Antisipasi elemen pertama menempel & menutupi radius */
  .footer-rich-inner > :first-child{
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }

  /* 3) Biar jarak antar section konsisten (map -> footer rich) */
  .footer-rich{
    padding-top: 10px;
  }
}



/* ==================================================
   DESKTOP PREMIUM v3 (ROUND ALL):
   - Footer bawah/copyright jadi card rounded & sama rata
   - Footer rich card rounded ALL sisi (atas+bawah) + clip isi (map/iframe) agar tidak kotak
   Hanya desktop (>= 992px). Mobile tidak berubah.
   ================================================== */
@media (min-width: 992px){

  /* FOOTER RICH (konten) */
  .footer-rich{
    max-width: 980px;
    margin: 24px auto 0;
  }
  .footer-rich-inner{
    background: rgba(255,255,255,0.98);
    border-radius: 18px !important;
    overflow: hidden; /* wajib: supaya iframe/map/blocks ikut rounded */
    box-shadow: 0 20px 45px rgba(0,0,0,0.14);
    padding: 22px 26px;
  }
  /* Jika ada embed iframe/map di dalam footer rich */
  .footer-rich-inner iframe,
  .footer-rich-inner embed,
  .footer-rich-inner object{
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
  }

  /* FOOTER BAWAH / COPYRIGHT (samakan lebar + rounded) */
  #colophon,
  .site-footer,
  footer.site-footer,
  footer.footer,
  footer,
  .footer-bottom,
  .footer-bottom-area,
  .footer-copyright,
  .copyright-area,
  .site-info{
    max-width: 980px;
    margin: 18px auto 28px;
  }

  /* Jadikan area copyright sebagai "card" */
  #colophon,
  .footer-bottom,
  .footer-bottom-area,
  .footer-copyright,
  .copyright-area{
    background: rgba(255,255,255,0.92) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 16px 38px rgba(0,0,0,0.10);
    padding: 14px 20px;
  }

  /* Rapikan teks copyright */
  #colophon,
  #colophon * ,
  .footer-bottom,
  .footer-bottom * ,
  .footer-copyright,
  .footer-copyright * ,
  .copyright-area,
  .copyright-area *{
    line-height: 1.5;
  }

  /* Pastikan wrapper internal tidak bikin full width lagi */
  #colophon .container,
  .site-footer .container,
  footer .container,
  .footer-bottom .container,
  .footer-copyright .container,
  .copyright-area .container{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}