/* =====================================================================
   Chrome situs — dipakai di SETIAP halaman.

   Sebelumnya enam blok <style> terpisah di dalam header.ejs,
   modules/header.block.ejs, modules/sidebar.block.ejs dan
   modules/footer.block.ejs. Isinya identik di tiap halaman, jadi ~11 KB
   dikirim ulang pada setiap page view dan tidak pernah bisa di-cache karena
   berada di dalam HTML.

   Dimuat dari <head> di header.ejs dengan ?v=<versi aplikasi>, sehingga
   express.static memberinya max-age=31536000, immutable. NAIKKAN versi
   aplikasi setelah menyunting file ini, kalau tidak browser akan menahan
   salinan lamanya selama satu tahun.
   ===================================================================== */

/* ---- Kosmetik profil (frame, nama emas, badge) ---- */
/* dari header.ejs */

  .oka-frame{padding:5px;border-radius:9999px;display:inline-block;background:linear-gradient(135deg,#ffd700,#ff8c00,#ff5f6d,#845ec2,#00c9ff,#ffd700);background-size:300% 300%;animation:oka-shimmer 6s ease infinite;box-shadow:0 4px 14px rgba(0,0,0,.15)}
  .oka-frame-img{border-color:#fff !important}
  @keyframes oka-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @media (prefers-reduced-motion:reduce){.oka-frame{animation:none}}
  .oka-gold-name{background:linear-gradient(90deg,#a67c00,#ffd700,#fff3b0,#ffd700,#a67c00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .oka-ring{border-color:#fff !important;box-shadow:0 0 0 3px #f59e0b}
  .oka-badge-tag{display:inline-flex;align-items:center;gap:.15rem;margin-left:.35rem;padding:.02rem .4rem;border-radius:9999px;background:#b45309;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4);font-size:.66rem;font-weight:800;line-height:1.5;vertical-align:middle;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.4)}
  .oka-badge-tag svg{width:10px;height:10px;flex:none}
  .oka-vip-tag{display:inline-flex;align-items:center;gap:.12rem;margin-left:.35rem;padding:.02rem .4rem;border-radius:9999px;background:linear-gradient(135deg,#f59e0b,#b45309);color:#fff;-webkit-text-fill-color:#fff;font-size:.66rem;font-weight:800;line-height:1.5;vertical-align:middle;text-shadow:0 1px 1px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.4);white-space:nowrap}
  .oka-vip-tag svg{width:11px;height:11px;flex:none}
  .dark .comment-item p.text-sm, html[data-theme="dark"] .comment-item p.text-sm { color:#e5e7eb !important }
  .dark .comment-item .text-xs, html[data-theme="dark"] .comment-item .text-xs { color:#cbd5e1 !important }
  .dark .comment-item .font-medium:not(.oka-gold-name), html[data-theme="dark"] .comment-item .font-medium:not(.oka-gold-name) { color:#f3f4f6 !important }
  .oka-prem-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .6rem;border-radius:9999px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-weight:700;font-size:.8rem;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:filter .15s;white-space:nowrap}
  .oka-prem-chip:hover{filter:brightness(1.08)}
  .oka-prem-chip svg{width:15px;height:15px;flex:none}
  .oka-prem-chip .oka-prem-plus{font-weight:800;opacity:.95;font-size:.95rem;margin-left:.05rem}
  .oka-prem-chip-lg{padding:.4rem .75rem;font-size:.85rem}
  .oka-prem-chip-lg svg{width:17px;height:17px}

/* ---- Utilitas lebar yang tidak ada di Tailwind prakompilasi ---- */
/* dari header.ejs */

  @media only screen and (min-width: 768px) {.mw-71{max-width: 71%;}.w-1215{width: 1215px;}}

/* ---- Toast (okaToast) ---- */
/* dari header.ejs */

.oka-toast-wrap{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:100000;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:92vw}
.oka-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s;max-width:440px}
.oka-toast.show{opacity:1;transform:translateY(0)}
.oka-toast.success{background:linear-gradient(135deg,#16a34a,#15803d)}
.oka-toast.error{background:linear-gradient(135deg,#dc2626,#b91c1c)}
.oka-toast.info{background:linear-gradient(135deg,#4f46e5,#4338ca)}
.oka-toast svg{width:18px;height:18px;flex:none}
.oka-modal-back{position:fixed;inset:0;z-index:100001;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s}
.oka-modal-back.show{opacity:1}
.oka-modal{background:#fff;border-radius:18px;max-width:400px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:scale(.96);transition:transform .2s}
.oka-modal-back.show .oka-modal{transform:scale(1)}
.dark .oka-modal{background:#1f2937}
.oka-modal-title{font-size:17px;font-weight:800;margin-bottom:6px;color:#111827}
.dark .oka-modal-title{color:#f9fafb}
.oka-modal-msg{font-size:14px;color:#4b5563;line-height:1.5}
.dark .oka-modal-msg{color:#d1d5db}
.oka-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.oka-modal-btn{padding:9px 18px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:filter .15s,background .15s}
.oka-modal-cancel{background:#f3f4f6;color:#374151}
.dark .oka-modal-cancel{background:rgba(255,255,255,.1);color:#e5e7eb}
.oka-modal-cancel:hover{background:#e5e7eb}
.dark .oka-modal-cancel:hover{background:rgba(255,255,255,.18)}
.oka-modal-ok{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.oka-modal-ok:hover{filter:brightness(1.08)}
.oka-modal-ok.danger{background:linear-gradient(135deg,#dc2626,#b91c1c)}

/* ---- Chip koin di header ---- */
/* dari modules_header.block.ejs */

.oka-coin-chip{position:relative;display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:9999px;background:#fffbeb;border:1px solid #fcd34d;cursor:pointer;line-height:1;transition:background-color .2s;-webkit-tap-highlight-color:transparent}
.oka-coin-chip:hover{background:#fef3c7}
.dark .oka-coin-chip{background:rgba(146,64,14,.25);border-color:rgba(217,119,6,.55)}
.dark .oka-coin-chip:hover{background:rgba(146,64,14,.45)}
.oka-coin-chip svg{width:15px;height:15px;flex:none;color:#f59e0b}
.oka-coin-chip-lg{gap:6px;padding:5px 12px 5px 9px}
.oka-coin-chip-lg svg{width:16px;height:16px}
.oka-coin-balance{font-size:12px;font-weight:600;color:#b45309;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.oka-coin-chip-lg .oka-coin-balance{font-size:13px}
.dark .oka-coin-balance{color:#fcd34d}
.oka-claim-dot{position:absolute;top:-2px;right:-1px;width:9px;height:9px;background:#ef4444;border-radius:9999px;border:1.5px solid #fff}
.dark .oka-claim-dot{border-color:#111827}
.oka-claim-dot.hidden{display:none}
.oka-reward-chip{display:inline-flex;align-items:center;justify-content:center;padding:5px;border-radius:9999px;background:#fffbeb;border:1px solid #fcd34d;color:#d97706;cursor:pointer;line-height:1;transition:background-color .2s,transform .15s;-webkit-tap-highlight-color:transparent;text-decoration:none}
.oka-reward-chip:hover{background:#fef3c7;transform:translateY(-1px)}
.dark .oka-reward-chip{background:rgba(146,64,14,.25);border-color:rgba(217,119,6,.55);color:#fcd34d}
.dark .oka-reward-chip:hover{background:rgba(146,64,14,.45)}
.oka-reward-chip svg{width:16px;height:16px;flex:none}
.oka-reward-chip-lg{padding:6px}
.oka-reward-chip-lg svg{width:17px;height:17px}
.hdr-mobile-scroll{min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.hdr-mobile-scroll::-webkit-scrollbar{display:none;height:0;width:0}
.hdr-mobile-scroll>*{flex:0 0 auto}

/* ---- Sidebar + blok kaki sidebar ---- */
/* dari modules_sidebar.block.ejs */

/* Sidebar footer block.
   Self-contained — including its own colour tokens — because this partial renders on
   every public page, most of which do not load the homepage's stylesheet. Light is the
   default; the site adds `.dark` to <html> via its theme toggle. */
#sidebar {
    --sf-line:  rgba(15,23,42,.10);
    --sf-muted: #64748b;
    --sf-text:  #0f172a;
    --sf-chip:  rgba(15,23,42,.05);
    --sf-brand: #6d4aff;
}
:root.dark #sidebar {
    --sf-line:  rgba(255,255,255,.08);
    --sf-muted: #8e97b3;
    --sf-text:  #f7f8fc;
    --sf-chip:  rgba(255,255,255,.07);
    --sf-brand: #7c5cff;
}

/* Column layout lets margin-top:auto pin the block to the bottom of the drawer. */
#sidebar > nav { display: flex; flex-direction: column; min-height: 100%; }

.pv-sidefoot { margin-top: auto; padding-top: 4px; }
.pv-sidefoot-rule { border: 0; border-top: 1px solid var(--sf-line); margin: 18px 0 14px; }

.pv-sidefoot-links {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    padding: 0 12px;
}
.pv-sidefoot-links a {
    font-size: 12.5px; color: var(--sf-muted); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .16s;
}
.pv-sidefoot-links a:hover { color: var(--sf-text); }

.pv-sidefoot-mail {
    display: block; padding: 12px 12px 0; font-size: 12.5px;
    color: var(--sf-brand); text-decoration: none;
}
.pv-sidefoot-mail:hover { text-decoration: underline; }

.pv-sidefoot-social { display: flex; gap: 10px; padding: 14px 12px 0; }
.pv-sidefoot-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 999px;
    background: var(--sf-chip); color: var(--sf-muted);
    transition: background .16s, color .16s, transform .16s;
}
.pv-sidefoot-social svg { width: 15px; height: 15px; }
.pv-sidefoot-social a:hover { background: var(--sf-brand); color: #fff; transform: translateY(-2px); }

.pv-sidefoot-addr {
    padding: 14px 12px 0; margin: 0;
    font-size: 11px; line-height: 1.55; color: var(--sf-muted);
}
.pv-sidefoot-addr span {
    display: block; font-weight: 700; color: var(--sf-text);
    margin-bottom: 2px;
}

/* Language links + Play badge, both rehomed here from the deleted page footer. */
.pv-sidefoot-langs {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    padding: 14px 12px 0; font-size: 12px;
}
.pv-sidefoot-langs a { color: var(--sf-muted); text-decoration: none; }
.pv-sidefoot-langs a:hover { color: var(--sf-text); text-decoration: underline; }
.pv-sidefoot-langs span { color: var(--sf-text); font-weight: 700; }

.pv-sidefoot-play { display: block; padding: 14px 12px 0; }
.pv-sidefoot-play img { display: block; height: 42px; width: auto; }

.pv-sidefoot-copy {
    padding: 10px 12px 4px; margin: 0;
    font-size: 11px; line-height: 1.5; color: var(--sf-muted);
}


/* ---- Banner pasang aplikasi ---- */
/* dari modules_footer.block.ejs */

    /* #floatingChatSystem sits at the bottom-right (bottom-6, 24px, z-40) and would
       otherwise land behind the bar. Lifting it by the bar's measured height keeps it
       reachable. Plain CSS rather than utilities: this must also apply to markup that
       widget injects later, and the precompiled stylesheet carries no arbitrary values.
       The floating PWA install button used to be lifted here too; it was removed from
       pwa.min.js on 2026-09-04 because the Google Play banner covers that job. */
    body.oka-appbanner-on #floatingChatSystem {
        bottom: calc(var(--oka-appbanner-h, 56px) + 12px) !important;
    }

    /* Colour states the precompiled stylesheet has no rules for: `hover:bg-emerald-400`
       and `dark:text-emerald-400` are both absent, so the CTA never lightened on hover
       and the footer hook kept its light-mode green in dark mode. */
    .oka-install-cta:hover { background-color: #34d399; }
    .dark .oka-hook { color: #34d399; }
