:root{--kb-yellow:#FFC72C;--kb-orange:#F58220;--kb-black:#1F1F1F;--kb-dark:#111111;--kb-gray:#5F6368;--kb-soft:#8b8f94;--border:#E7E1D3;--shadow:0 10px 25px rgba(0,0,0,.08);--shadow-soft:0 6px 18px rgba(0,0,0,.05)}
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#fffdf7 0%,#fff7e8 100%);color:var(--kb-black);line-height:1.6}
a{color:inherit}
img{max-width:100%}
.container{width:92%;max-width:1280px;margin:auto}
header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #f1e5c6;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:12px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;max-width:220px}
.brand-badge{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--kb-yellow),var(--kb-orange));color:var(--kb-dark);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;box-shadow:var(--shadow);flex-shrink:0}
.brand-text h1{font-size:17px;line-height:1.1;color:var(--kb-dark);white-space:nowrap}
.brand-text p{font-size:11px;color:var(--kb-gray);margin-top:2px;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:none;cursor:pointer;padding:10px 14px;border-radius:12px;font-weight:700;transition:.25s ease;font-size:13px;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--kb-orange),#ff9a33);color:#fff;box-shadow:var(--shadow)}
.btn-secondary{background:var(--kb-black);color:#fff}
.btn-light{background:#fff3cc;color:var(--kb-black);border:1px solid #f0d98f}
.btn-dark{background:var(--kb-black);color:#fff;border:1px solid var(--kb-black);box-shadow:var(--shadow)}
.btn-dark:hover{background:#000;color:#fff;border-color:#000}
.btn-nav{background:#f0d98f;color:var(--kb-black);border:1px solid #f0d98f;box-shadow:none}
.btn-nav:hover{background:#f3dfa4;color:var(--kb-black)}
.btn-nav.is-active{background:#ff9a33;color:#fff;border-color:#ff9a33;box-shadow:var(--shadow)}
.btn-nav.is-active:hover{background:#ff9a33;color:#fff}
.hero{padding:34px 0 28px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.hero-card{background:linear-gradient(135deg,#fff7db,#ffffff);border:1px solid #f2e2af;border-radius:26px;padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.label{display:inline-block;background:var(--kb-black);color:#fff;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.4px;margin-bottom:16px}
.hero-card h2{font-size:38px;line-height:1.15;margin-bottom:14px;color:var(--kb-dark)}
.hero-card h2 span{color:var(--kb-orange)}
.hero-card p{color:var(--kb-gray);font-size:17px;max-width:720px;margin-bottom:20px}
.point-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.pill{background:#fff;border:1px solid #f2dfaa;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--kb-black)}
.summary-box{background:linear-gradient(180deg,#1d1d1d,#111111);color:#fff;border-radius:26px;padding:28px;box-shadow:var(--shadow)}
.summary-box h3{font-size:24px;margin-bottom:14px;color:var(--kb-yellow)}
.summary-box p{color:#e6e6e6;font-size:15px;margin-bottom:14px}
.summary-list{display:grid;gap:10px;margin-top:18px}
.summary-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);padding:14px 16px;border-radius:16px}
.summary-item strong{display:block;color:#fff;margin-bottom:4px}
.summary-item span{font-size:14px;color:#d6d6d6}
.quick-nav{padding:2px 0 26px}
.quick-nav-wrap{display:flex;gap:12px;flex-wrap:wrap}
.quick-link{background:#fff;border:1px solid #ecdcae;padding:12px 16px;border-radius:999px;text-decoration:none;color:var(--kb-black);font-weight:700;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.04);transition:.2s ease}
.quick-link:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.quick-link.active{background:linear-gradient(135deg,var(--kb-orange),#ff9a33);color:#fff;border-color:var(--kb-orange)}
.content{padding:18px 0 50px}
.content-grid{display:grid;grid-template-columns:minmax(240px,280px) minmax(0,1fr);gap:26px;align-items:start}
.sidebar{position:sticky;top:90px;background:#fff;border:1px solid var(--border);border-radius:24px;padding:20px;box-shadow:var(--shadow);max-height:calc(100vh - 110px);overflow:hidden}
.sidebar h3{margin-bottom:6px}
.sidebar p{font-size:14px;color:var(--kb-soft);margin-bottom:12px}
.nav-list{display:grid;gap:10px;position:relative;padding-left:18px;max-height:calc(100vh - 220px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-list::-webkit-scrollbar{display:none}
.nav-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#fff;border-radius:999px}
.nav-list a{display:block;text-decoration:none;color:var(--kb-black);font-weight:700;border:1px solid #f0e3bc;background:#fff8e7;padding:12px 14px;border-radius:14px;position:relative;transition:.25s ease}
.nav-list a:hover{transform:translateX(2px)}
.nav-list a.active{background:linear-gradient(135deg,#fff3d6,#fff0c2);color:var(--kb-dark);border-color:#f3c86a;box-shadow:0 8px 18px rgba(245,130,32,.15)}
.nav-list a.active::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--kb-orange),var(--kb-yellow));border-radius:999px}
.main-panels{display:grid;gap:22px}
.panel{background:#fff;border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:var(--shadow)}
.panel-head h2{font-size:28px;line-height:1.2}
.panel-sub{font-size:14px;color:var(--kb-gray);max-width:720px}
.panel-body{display:grid;gap:16px}
.block{background:#fffaf0;border:1px solid #f1e2b7;padding:18px;border-radius:18px}
.block h4{margin-bottom:8px;font-size:18px}
.block p,.block li,.block td,.block th{font-size:15px;color:#333}
.block ul,.block ol{padding-left:20px}
.block table{width:100%;border-collapse:collapse;overflow:hidden}
.block table th,.block table td{padding:10px;border:1px solid #ddd}
.block table th{background:#f5f5f5}
.footer-note{margin-top:12px;padding:18px;border:1px dashed #e1c875;background:#fff5d8;border-radius:18px;font-size:14px}
.home-panel{overflow:hidden}
.home-head{margin-bottom:20px}
.home-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:stretch}
.home-copy{display:grid;gap:16px}
.home-highlight-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.home-highlight-card{background:linear-gradient(180deg,#fffaf0,#fff);border:1px solid #f1e2b7;padding:18px;border-radius:18px;box-shadow:var(--shadow-soft)}
.home-highlight-card h4{font-size:16px;margin-bottom:8px;color:var(--kb-dark)}
.home-highlight-card p{font-size:14px;color:#444}
.home-image-card{background:linear-gradient(180deg,#fff7db,#ffffff);border:1px solid #f2e2af;border-radius:24px;padding:16px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;min-height:420px}
.home-image{width:100%;height:100%;max-height:560px;object-fit:cover;border-radius:18px;display:block}
.home-tools{display:grid;gap:16px}
.home-program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.program-card{display:block;text-decoration:none;background:#fff;border:1px solid #edd9a7;border-radius:18px;padding:18px;box-shadow:var(--shadow-soft);transition:.2s ease}
.program-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.program-card.hidden{display:none}
.program-card-badge{display:inline-flex;align-items:center;gap:8px;background:#fff3cc;border:1px solid #f0d98f;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;margin-bottom:12px}
.program-card h3{font-size:18px;line-height:1.3;margin-bottom:6px}
.program-card p{font-size:14px;color:#4d5359}
.program-empty{display:none;padding:16px;border-radius:16px;border:1px dashed #e1c875;background:#fff9e7;font-size:14px;color:#5d5d5d}
.program-empty.show{display:block}
.page-utility{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.page-back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-decoration:none;color:var(--kb-black);background:#fff3cc;padding:10px 14px;border-radius:999px;border:1px solid #f0d98f}
.page-chip{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.35px}
.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:14px;padding:12px 16px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--kb-orange),#ff9a33);color:#fff;box-shadow:var(--shadow);transition:.25s ease}
.accordion-header:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.accordion-header::after{content:"▼";font-size:12px}
.accordion-header.open::after{content:"▲"}
.accordion-body{display:none;padding:14px;margin-top:12px;background:#fff;border-radius:12px;border:1px solid #eee}
body:not([data-page="home"]) .hero,body:not([data-page="home"]) .quick-nav{display:none}
body:not([data-page="home"]) .content{padding:30px 0 50px}
body:not([data-page="home"]) .content-grid{grid-template-columns:minmax(0,1fr)}
body:not([data-page="home"]) .sidebar{display:none}
body:not([data-page="home"]) .main-panels{max-width:100%}
@media (max-width:1100px){.content-grid{grid-template-columns:minmax(220px,250px) minmax(0,1fr);gap:20px}.sidebar{top:80px;padding:18px}.home-hero-grid{grid-template-columns:1fr}.home-highlight-grid{grid-template-columns:1fr}.home-image-card{min-height:320px}}
@media (max-width:980px){.hero-grid,.content-grid,.home-program-grid{grid-template-columns:1fr}.sidebar{position:relative;top:0;max-height:none;overflow:visible}.nav-list{max-height:none;overflow:visible}}
@media (max-width:640px){header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}.topbar{display:grid;grid-template-columns:1fr;gap:10px;padding:10px 0;align-items:start}.brand{gap:10px;align-items:center}.brand-badge{width:42px;height:42px;border-radius:12px;font-size:15px}.brand-text h1{font-size:15px;line-height:1.15}.brand-text p{font-size:11px;margin-top:2px;line-height:1.2}.top-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.btn{width:100%;min-height:40px;padding:10px 8px;border-radius:10px;font-size:12px;line-height:1.15;text-align:center;white-space:normal;word-break:break-word}.hero-card h2{font-size:30px}.panel{padding:20px}.page-utility{align-items:flex-start;justify-content:flex-start;flex-direction:column}}

.pamphlet-layout{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:22px;align-items:start}
.pamphlet-form-card p{font-size:14px;color:#444;margin-bottom:16px}
.pamphlet-form-grid{display:grid;gap:14px}
.pamphlet-selector{margin:0 0 16px}
.pamphlet-selector-title{font-size:13px;font-weight:700;color:var(--kb-dark);margin:0 0 10px}
.pamphlet-selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px}
.pamphlet-option-btn{appearance:none;border:1px solid #e6d4a6;background:#fff;border-radius:14px;padding:8px;cursor:pointer;text-align:center;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.pamphlet-option-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.pamphlet-option-btn.is-active{border-color:var(--kb-orange);box-shadow:0 0 0 3px rgba(245,130,32,.15)}
.pamphlet-option-btn img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;margin-bottom:6px}
.pamphlet-option-btn span{display:block;font-size:12px;font-weight:600;color:#444;line-height:1.2}
.field-group{display:grid;gap:8px;font-size:14px;font-weight:700;color:var(--kb-dark)}
.pamphlet-input{width:100%;padding:14px 16px;border:1px solid #e6d4a6;border-radius:14px;font-size:15px;outline:none;transition:border-color .2s ease, box-shadow .2s ease;background:#fff}
.pamphlet-input:focus{border-color:var(--kb-orange);box-shadow:0 0 0 4px rgba(245,130,32,.12)}
.pamphlet-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pamphlet-preview-card{background:linear-gradient(180deg,#fff7db,#fff);border:1px solid #f2e2af;border-radius:24px;padding:18px;box-shadow:var(--shadow)}
.pamphlet-preview-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:14px;margin-bottom:12px;color:#444;flex-wrap:wrap}
.pamphlet-preview-head strong{font-size:16px;color:var(--kb-dark)}
.pamphlet-canvas-wrap{display:flex;justify-content:center}
.pamphlet-canvas{position:relative;width:min(100%,660px);aspect-ratio:1654/2339;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.pamphlet-template-image{width:100%;height:100%;object-fit:cover;display:block}
.pamphlet-fill{position:absolute;bottom:4.8%;height:6.6%;display:flex;flex-direction:column;justify-content:center;color:#111}
.pamphlet-fill-name{left:13.3%;width:36%}
.pamphlet-fill-phone{left:50.2%;width:39%}
.fill-value{font-size:clamp(13px,1.55vw,22px);font-weight:800;line-height:1.15;word-break:break-word}
@media (max-width:980px){.pamphlet-layout{grid-template-columns:1fr}}

.section-action-bar{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap;margin:18px 0 20px}
.pamphlet-fill-stacked{text-align:center;align-items:center}
.fill-value-name,.fill-value-phone{width:100%}

/* ─── Language Switcher ─── */
.lang-switcher{display:flex;gap:4px;align-items:center;margin-left:auto;margin-right:12px}
.lang-btn{padding:6px 12px;border:1px solid #e6d4a6;border-radius:8px;background:#fff;color:var(--kb-black);font-size:12px;font-weight:700;cursor:pointer;transition:.2s ease;letter-spacing:.3px}
.lang-btn:hover{background:#fff3cc;border-color:#f0d98f}
.lang-btn.active{background:linear-gradient(135deg,var(--kb-orange),#ff9a33);color:#fff;border-color:var(--kb-orange);box-shadow:0 2px 8px rgba(245,130,32,.25)}
@media (max-width:640px){.lang-switcher{margin-left:0;margin-right:0;order:-1;justify-self:end}.topbar{display:grid;grid-template-columns:1fr auto;gap:8px}.lang-switcher{grid-column:2;grid-row:1}.brand{grid-column:1;grid-row:1;max-width:none}.top-actions{grid-column:1 / -1;grid-row:2;flex-wrap:wrap}.brand-badge{width:36px;height:36px;border-radius:10px;font-size:14px}.brand-text h1{font-size:15px}.brand-text p{font-size:10px}}

/* ─── Employee Search Form (inside summary-box) ─── */
.emp-search-form{display:grid;gap:12px}
.emp-field{display:grid;gap:8px}
.emp-label{font-size:10px;font-weight:700;color:var(--kb-yellow);letter-spacing:.3px;text-transform:uppercase}
.emp-select{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,.15);border-radius:12px;font-size:14px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);outline:none;transition:border-color .2s ease,box-shadow .2s ease;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;cursor:pointer}
.emp-select option{color:#111;background:#fff}
.emp-select:focus{border-color:var(--kb-yellow);box-shadow:0 0 0 3px rgba(255,199,44,.2)}
.emp-search-btn{width:100%;margin-top:4px;padding:12px;font-size:15px;border-radius:14px}

/* ─── Employee Search Results ─── */
.emp-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:18px}
.emp-result-card{background:#fffaf0;border:1px solid #f1e2b7;border-radius:16px;padding:16px 18px;transition:.2s ease}
.emp-result-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.emp-result-name{font-size:16px;font-weight:700;color:var(--kb-dark);margin-bottom:8px}
.emp-result-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;border-top:1px solid rgba(0,0,0,.04)}
.emp-result-label{color:var(--kb-gray);font-weight:600;flex-shrink:0}
.emp-result-value{color:var(--kb-dark);text-align:right;word-break:break-all;flex:1}
.emp-empty{padding:24px;text-align:center;color:var(--kb-gray);font-size:15px;background:#fff9e7;border:1px dashed #e1c875;border-radius:16px}
.emp-actions{display:flex;gap:4px;flex-shrink:0}
.emp-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #edd9a7;border-radius:8px;background:#fff3cc;cursor:pointer;font-size:14px;text-decoration:none;transition:.2s ease;padding:0}
.emp-action-btn:hover{background:var(--kb-orange);border-color:var(--kb-orange);transform:scale(1.1)}
@media (max-width:640px){.emp-results-grid{grid-template-columns:1fr}}

/* ── Login & Install Popups ── */
.login-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.login-popup,.install-popup{background:#fff;border-radius:24px;padding:36px 32px;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:popupIn .3s ease}
@keyframes popupIn{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.login-title{font-size:24px;font-weight:800;color:var(--kb-dark);margin-bottom:20px;text-align:center}
.login-label{display:block;font-size:14px;font-weight:700;color:var(--kb-dark);margin-bottom:6px}
.login-input{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:14px;font-size:16px;outline:none;transition:border-color .2s}
.login-input:focus{border-color:var(--kb-orange)}
.login-helper{font-size:13px;color:var(--kb-soft);margin-top:8px}
.login-msg{font-size:14px;font-weight:700;margin-top:10px;min-height:20px;text-align:center}
.login-msg-ok{color:#2e7d32}
.login-msg-err{color:#c62828}
.login-btn{width:100%;margin-top:16px;padding:14px;font-size:16px;border-radius:14px}
.login-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.install-popup{max-width:540px}
.install-section{margin-bottom:18px}
.install-section h4{font-size:16px;font-weight:800;color:var(--kb-orange);margin-bottom:6px}
.install-section ol{padding-left:20px;font-size:14px;color:var(--kb-dark);line-height:1.8}
.disclaimer-icon{font-size:40px;text-align:center;margin-bottom:8px;color:var(--kb-orange)}
.disclaimer-body{font-size:14px;line-height:1.8;color:var(--kb-dark);text-align:justify;background:#fff9f0;border-left:4px solid var(--kb-orange);border-radius:10px;padding:16px 18px;margin:12px 0 24px}
@media(max-width:600px){.login-popup,.install-popup{padding:28px 20px;max-width:100%;border-radius:20px}.login-title{font-size:20px}}


.quick-group,.sidebar-group,.program-group{display:grid;gap:10px}
.quick-group{padding:12px 14px;border:1px solid #ecdcb2;border-radius:18px;background:#fffaf0;min-width:min(280px,100%)}
.quick-group-title,.sidebar-group-title{font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--kb-orange);text-transform:uppercase}
.quick-group-links{display:flex;gap:8px;flex-wrap:wrap}
.sidebar-group{padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:14px}
.sidebar-group:last-child{padding-bottom:0;border-bottom:none;margin-bottom:0}
.program-group{margin-bottom:22px}
.program-group-head h3{font-size:16px;font-weight:800;color:var(--kb-dark);margin-bottom:2px;letter-spacing:.3px;text-transform:uppercase}
#program-grid{display:grid;gap:18px}
.program-card.hidden{display:none}

.section-action-bar .btn-dark{background:var(--kb-black);color:#fff;border:1px solid var(--kb-black)}
.section-action-bar .btn-dark:hover{background:#000;color:#fff;border-color:#000}


.category-program-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.category-card{text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:180px}
.category-card h3{margin-bottom:10px}
.home-tools-category-only{gap:0}
.category-page-body .footer-note{margin-bottom:18px}
@media (max-width:1100px){.category-program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.category-program-grid{grid-template-columns:1fr}.category-card{min-height:auto}}

/* Supabase dynamic program banner/material styling */
.program-banner-wrap {
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(245,130,32,.22);
  background: #fff8e6;
  box-shadow: 0 14px 28px rgba(15,23,42,.08);
}
.program-banner-img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff8e6;
}
.material-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* News Feed / dynamic banner slider */
.eg-slider{width:100%;margin:0 0 20px;border-radius:24px;overflow:hidden;border:1px solid rgba(245,130,32,.22);background:linear-gradient(180deg,#fff7db,#fff);box-shadow:var(--shadow);position:relative}
.eg-slider-track{position:relative;width:100%;min-height:360px;background:#fff8e6}
.eg-slide{display:none;position:relative;width:100%;min-height:360px}
.eg-slide.is-active{display:block}
.eg-slide-picture{display:block;width:100%}
.eg-slide-img{display:block;width:100%;height:min(58vw,560px);min-height:360px;object-fit:contain;background:#fff8e6}
.eg-slide-caption{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(17,17,17,.78);color:#fff;border-radius:18px;padding:14px 16px;backdrop-filter:blur(8px)}
.eg-slide-caption strong{display:block;font-size:17px;line-height:1.25;margin-bottom:4px;color:var(--kb-yellow)}
.eg-slide-caption span{display:block;font-size:13px;line-height:1.45;color:#f3f3f3}
.eg-slider-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;background:#fffaf0;border-top:1px solid #f1e2b7}
.eg-slider-btn{width:34px;height:34px;border-radius:999px;border:1px solid #f0d98f;background:#fff3cc;color:var(--kb-black);font-size:24px;line-height:1;cursor:pointer;font-weight:800}
.eg-slider-dots{display:flex;gap:8px;align-items:center;justify-content:center}
.eg-slider-dot{width:9px;height:9px;border-radius:999px;border:none;background:#d8c796;cursor:pointer;transition:.2s ease}
.eg-slider-dot.is-active{width:26px;background:var(--kb-orange)}
@media (max-width:640px){.eg-slider{border-radius:18px}.eg-slider-track,.eg-slide{min-height:260px}.eg-slide-img{height:72vw;min-height:260px}.eg-slide-caption{position:static;border-radius:0;background:#111}.eg-slide-caption strong{font-size:15px}.eg-slide-caption span{font-size:12px}.eg-slider-controls{padding:10px}.eg-slider-btn{width:32px;height:32px}}

/* Enhanced Employee Login */
.login-popup-wide{max-width:640px;max-height:92vh;overflow:auto}
.login-subtitle{font-size:14px;color:var(--kb-soft);text-align:center;margin:-10px 0 18px;line-height:1.5}
.login-popup-wide .login-label{margin-top:14px}
.terms-box{margin-top:16px;border:1px solid var(--border);border-radius:14px;background:#fff7f0;overflow:hidden}
.terms-box summary{cursor:pointer;font-weight:800;color:var(--kb-dark);padding:14px 16px;list-style:none}
.terms-box summary::-webkit-details-marker{display:none}
.terms-box summary:after{content:'+';float:right;font-weight:900;color:var(--kb-orange)}
.terms-box[open] summary:after{content:'–'}
.terms-content{padding:0 16px 16px;max-height:260px;overflow:auto;font-size:13px;line-height:1.55;color:#333;background:#fff}
.terms-content h3{font-size:15px;margin:14px 0 4px;color:var(--kb-dark)}
.terms-content h4{font-size:13px;margin:0 0 12px;color:var(--kb-orange)}
.terms-content ul{padding-left:20px;margin:8px 0 12px}
.consent-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;line-height:1.45;color:var(--kb-dark);font-weight:700}
.consent-check input{margin-top:3px;min-width:18px;min-height:18px;accent-color:var(--kb-orange)}
@media(max-width:600px){.login-popup-wide{max-height:94vh}.terms-content{max-height:220px}}

.auto-password-box{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-top:14px}
.generated-password-input{font-weight:800;letter-spacing:.08em;background:#f8fafc}
.copy-password-btn{border:0;background:var(--kb-dark);color:#fff;border-radius:14px;padding:13px 16px;font-weight:800;cursor:pointer;white-space:nowrap;margin-bottom:31px}
.copy-password-btn:disabled{opacity:.45;cursor:not-allowed}
.copy-password-btn:not(:disabled):hover{filter:brightness(.95)}
@media(max-width:600px){.auto-password-box{grid-template-columns:1fr}.copy-password-btn{width:100%;margin-bottom:0}}

/* Mobile Friendly Login Enhancement - Easy Sales */
.login-overlay{
  min-height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.login-popup-wide{
  overscroll-behavior:contain;
}
.generated-password-input{
  text-transform:lowercase;
}
@media (max-width: 768px){
  .login-overlay{
    align-items:flex-start;
    justify-content:center;
    padding:12px;
  }
  .login-popup,
  .install-popup,
  .login-popup-wide{
    width:100%;
    max-width:100%;
    margin:8px auto 18px;
    padding:22px 18px;
    border-radius:20px;
    max-height:none;
    box-shadow:0 14px 38px rgba(0,0,0,.22);
  }
  .login-title{
    font-size:21px;
    line-height:1.2;
    margin-bottom:8px;
  }
  .login-subtitle{
    font-size:13px;
    margin:0 0 14px;
  }
  .login-popup-wide .login-label{
    margin-top:12px;
  }
  .login-input{
    min-height:48px;
    padding:13px 14px;
    font-size:16px;
    border-radius:13px;
  }
  .login-helper{
    font-size:12px;
    line-height:1.45;
  }
  .auto-password-box{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:12px;
  }
  .copy-password-btn,
  .login-btn{
    min-height:48px;
    width:100%;
    padding:13px 14px;
    border-radius:13px;
    font-size:15px;
    margin-bottom:0;
  }
  .terms-box{
    margin-top:14px;
    border-radius:13px;
  }
  .terms-box summary{
    padding:13px 14px;
    font-size:14px;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .terms-box summary:after{
    float:none;
    flex-shrink:0;
  }
  .terms-content{
    max-height:34dvh;
    padding:0 14px 14px;
    font-size:12.5px;
    line-height:1.55;
  }
  .terms-content h3{
    font-size:14px;
    line-height:1.3;
  }
  .terms-content h4{
    font-size:12px;
  }
  .consent-check{
    gap:9px;
    font-size:12.5px;
    line-height:1.45;
    padding:10px 0 0;
  }
  .consent-check input{
    min-width:20px;
    min-height:20px;
  }
  .login-msg{
    font-size:13px;
    line-height:1.35;
  }
}
@media (max-width: 380px){
  .login-overlay{padding:8px}
  .login-popup,.install-popup,.login-popup-wide{padding:18px 14px;border-radius:18px}
  .login-title{font-size:19px}
  .login-input,.copy-password-btn,.login-btn{min-height:46px;font-size:15px}
  .login-helper,.consent-check,.terms-content{font-size:12px}
}
@media (max-height: 680px) and (max-width: 768px){
  .login-popup,.install-popup,.login-popup-wide{margin-top:0;margin-bottom:10px}
  .terms-content{max-height:28dvh}
}

/* Register/Login unified access - Easy Sales */
.auth-card{max-width:680px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f3f4f6;border-radius:16px;padding:6px;margin:14px 0 18px}
.auth-tab{border:0;border-radius:12px;padding:12px 14px;font-weight:800;cursor:pointer;background:transparent;color:var(--kb-soft);transition:all .2s ease}
.auth-tab.active{background:#fff;color:var(--kb-dark);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.auth-panel{display:none}
.auth-panel.active{display:block}
.auth-panel-heading{background:#fff7ed;border:1px solid rgba(245,130,32,.22);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.auth-panel-heading h3{margin:0 0 4px;font-size:16px;color:var(--kb-dark)}
.auth-panel-heading p{margin:0;font-size:13px;line-height:1.45;color:var(--kb-soft)}
@media(max-width:600px){
  .auth-card{max-width:100%}
  .auth-tabs{position:sticky;top:0;z-index:2;margin-top:8px}
  .auth-tab{min-height:46px;font-size:14px}
  .auth-panel-heading{padding:12px 13px}
  .auth-panel-heading h3{font-size:15px}
  .auth-panel-heading p{font-size:12px}
}


/* Easy Sales Auth Split Layout - Login Left / Register Right */
.auth-split-card{width:min(1180px,calc(100vw - 32px));max-width:1180px;max-height:94dvh;overflow:auto;padding:28px}.auth-split-header{text-align:center;margin-bottom:18px}.auth-split-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr);gap:20px;align-items:start}.auth-split-grid .auth-panel{display:block!important;border:1px solid rgba(15,23,42,.08);border-radius:22px;background:#fff;padding:20px;box-shadow:0 12px 32px rgba(15,23,42,.08);min-width:0}.auth-panel-left{position:sticky;top:0}.auth-heading-login{background:#f8fafc;border-color:rgba(15,23,42,.10)}.auth-heading-register{background:#fff7ed;border-color:rgba(245,130,32,.22)}.auth-panel-heading{display:flex;align-items:flex-start;gap:12px}.auth-step-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;border-radius:999px;background:var(--kb-orange);color:#fff;font-weight:900;font-size:14px}.auth-panel-left .auth-step-badge{background:var(--kb-dark)}.auth-tabs{display:none!important}.auth-split-grid .auto-password-box{grid-template-columns:1fr}.auth-split-grid .copy-password-btn{width:100%;margin-bottom:0}.auth-split-grid .terms-content{max-height:210px}@media(max-width:900px){.login-overlay{align-items:flex-start;padding:10px}.auth-split-card{width:100%;max-width:100%;max-height:none;padding:18px 14px;border-radius:20px;margin:0 auto 12px}.auth-split-header{text-align:left;margin-bottom:14px}.auth-split-grid{grid-template-columns:1fr;gap:14px}.auth-panel-left{position:static;order:1}.auth-panel-right{order:2}.auth-split-grid .auth-panel{padding:16px;border-radius:18px}.auth-panel-heading{padding:12px;border-radius:14px}.auth-step-badge{width:28px;height:28px;min-width:28px}.auth-split-grid .terms-content{max-height:30dvh}}@media(max-width:420px){.auth-split-card{padding:14px 10px}.auth-split-grid .auth-panel{padding:14px 12px}.auth-panel-heading{gap:9px}}


/* Easy Sales Auth Split Layout - Login Left / Register Right */
.auth-split-card{width:min(1180px,calc(100vw - 32px));max-width:1180px;max-height:94dvh;overflow:auto;padding:28px}.auth-split-header{text-align:center;margin-bottom:18px}.auth-split-grid{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr);gap:20px;align-items:start}.auth-split-grid .auth-panel{display:block!important;border:1px solid rgba(15,23,42,.08);border-radius:22px;background:#fff;padding:20px;box-shadow:0 12px 32px rgba(15,23,42,.08);min-width:0}.auth-panel-left{position:sticky;top:0}.auth-heading-login{background:#f8fafc;border-color:rgba(15,23,42,.10)}.auth-heading-register{background:#fff7ed;border-color:rgba(245,130,32,.22)}.auth-panel-heading{display:flex;align-items:flex-start;gap:12px}.auth-step-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;border-radius:999px;background:var(--kb-orange);color:#fff;font-weight:900;font-size:14px}.auth-panel-left .auth-step-badge{background:var(--kb-dark)}.auth-tabs{display:none!important}.auth-split-grid .auto-password-box{grid-template-columns:1fr}.auth-split-grid .copy-password-btn{width:100%;margin-bottom:0}.auth-split-grid .terms-content{max-height:210px}@media(max-width:900px){.login-overlay{align-items:flex-start;padding:10px}.auth-split-card{width:100%;max-width:100%;max-height:none;padding:18px 14px;border-radius:20px;margin:0 auto 12px}.auth-split-header{text-align:left;margin-bottom:14px}.auth-split-grid{grid-template-columns:1fr;gap:14px}.auth-panel-left{position:static;order:1}.auth-panel-right{order:2}.auth-split-grid .auth-panel{padding:16px;border-radius:18px}.auth-panel-heading{padding:12px;border-radius:14px}.auth-step-badge{width:28px;height:28px;min-width:28px}.auth-split-grid .terms-content{max-height:30dvh}}@media(max-width:420px){.auth-split-card{padding:14px 10px}.auth-split-grid .auth-panel{padding:14px 12px}.auth-panel-heading{gap:9px}}

/* Register/Login Choice Flow - Mobile Friendly */
.auth-choice-card{
  max-width:760px;
  width:min(760px, calc(100vw - 32px));
  max-height:94dvh;
  overflow:auto;
}
.auth-choice-panel[hidden],
.auth-single-panel[hidden]{display:none!important}
.auth-choice-panel{text-align:center}
.auth-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:22px;
}
.auth-choice-btn{
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  padding:24px 18px;
  background:#fff;
  color:var(--kb-dark);
  cursor:pointer;
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.auth-choice-btn:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(15,23,42,.14);border-color:rgba(245,130,32,.35)}
.auth-choice-btn strong{font-size:22px;font-weight:900}
.auth-choice-btn small{font-size:13px;line-height:1.45;color:var(--kb-soft);max-width:230px}
.auth-choice-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  min-height:34px;
  border-radius:999px;
  background:#fff7ed;
  color:var(--kb-orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.auth-choice-login .auth-choice-icon{background:#f8fafc;color:var(--kb-dark)}
.auth-single-panel:not([hidden]){display:block!important}
.auth-single-panel{margin-top:4px}
.auth-back-btn{
  border:0;
  background:#f8fafc;
  color:var(--kb-dark);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  margin-bottom:14px;
}
.auth-back-btn:hover{background:#eef2f7}
.auth-single-panel .auto-password-box{grid-template-columns:1fr}
.auth-single-panel .copy-password-btn{width:100%;margin-bottom:0}
.auth-single-panel .terms-content{max-height:230px}
@media(max-width:640px){
  .login-overlay{align-items:flex-start;padding:10px}
  .auth-choice-card{width:100%;max-width:100%;max-height:none;border-radius:20px;padding:20px 14px;margin:0 auto 12px}
  .auth-choice-panel{text-align:left}
  .auth-choice-grid{grid-template-columns:1fr;gap:12px;margin-top:16px}
  .auth-choice-btn{min-height:132px;padding:20px 14px;align-items:flex-start;text-align:left}
  .auth-choice-btn strong{font-size:20px}
  .auth-choice-btn small{font-size:12.5px;max-width:100%}
  .auth-choice-icon{min-width:78px;min-height:30px;font-size:11px}
  .auth-panel-heading{padding:12px;border-radius:14px}
  .auth-single-panel .terms-content{max-height:32dvh}
  .login-input{min-height:46px;font-size:16px}
  .login-btn,.copy-password-btn{min-height:48px}
  .consent-check{align-items:flex-start;font-size:12px;line-height:1.45}
  .consent-check input{width:22px;height:22px;min-width:22px}
}
@media(max-width:380px){
  .auth-choice-card{padding:16px 10px}
  .auth-choice-btn{border-radius:18px}
}

/* Auth Language Selector - Mobile Friendly */
.auth-language-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:16px;
  background:rgba(248,250,252,.9);
}
.auth-language-label{
  font-size:12px;
  font-weight:800;
  color:#475569;
  white-space:nowrap;
}
.auth-language-select{
  min-height:38px;
  border:1px solid rgba(148,163,184,.45);
  border-radius:12px;
  padding:7px 12px;
  font-weight:800;
  color:#0f172a;
  background:#fff;
  outline:none;
}
.auth-language-select:focus{
  border-color:rgba(245,130,32,.8);
  box-shadow:0 0 0 3px rgba(245,130,32,.16);
}
@media (max-width:768px){
  .auth-language-row{
    justify-content:space-between;
    align-items:stretch;
    gap:8px;
    margin-bottom:12px;
  }
  .auth-language-label{
    display:flex;
    align-items:center;
    font-size:11.5px;
  }
  .auth-language-select{
    flex:1;
    max-width:170px;
    min-height:42px;
    font-size:13px;
  }
}
@media (max-width:420px){
  .auth-language-row{
    flex-direction:column;
  }
  .auth-language-select{
    width:100%;
    max-width:100%;
  }
}

/* Final Auth Mobile Friendly + Choice Flow */
#login-overlay.login-overlay{overflow-y:auto;-webkit-overflow-scrolling:touch;}
.auth-choice-card{box-sizing:border-box;}
.auth-choice-btn,.login-btn,.copy-password-btn,.auth-back-btn{touch-action:manipulation;}
.login-input{min-height:46px;}
.terms-box{overflow:hidden;}
.terms-content{overflow:auto;-webkit-overflow-scrolling:touch;}
@media(max-width:768px){#login-overlay.login-overlay{align-items:flex-start;justify-content:center;padding:10px;}.login-popup.auth-choice-card{width:100%;max-width:100%;max-height:none;margin:0 auto 16px;padding:18px 14px;border-radius:20px;}.login-title{font-size:22px;line-height:1.2;}.login-subtitle,.login-helper,.login-msg{font-size:13px;line-height:1.45;}.auth-choice-grid{grid-template-columns:1fr!important;gap:12px;}.auth-choice-btn{width:100%;min-height:118px;padding:18px 14px;border-radius:18px;}.auth-single-panel .auth-panel-heading{display:flex;gap:10px;padding:12px;border-radius:14px;}.login-label{font-size:13px;}.login-input,.login-btn,.copy-password-btn{width:100%;font-size:15px;}.auto-password-box{display:grid!important;grid-template-columns:1fr!important;gap:10px;}.terms-content{max-height:34dvh;font-size:12.5px;line-height:1.5;padding-right:4px;}.consent-check{align-items:flex-start;gap:10px;font-size:13px;line-height:1.45;}.consent-check input{min-width:20px;min-height:20px;margin-top:2px;}}
@media(max-width:380px){.login-popup.auth-choice-card{padding:14px 10px;}.login-title{font-size:20px;}.auth-choice-btn strong{font-size:18px;}}

/* Header Cari Staff + summary box target */
.summary-box{scroll-margin-top:92px}
.summary-box.summary-box-focus{outline:3px solid #ff9a33;box-shadow:0 0 0 6px rgba(255,154,51,.18), var(--shadow)}
@media (max-width:640px){
  .summary-box{scroll-margin-top:142px}
  .top-actions .btn-nav{white-space:nowrap;word-break:normal;font-size:12px;padding:10px 6px}
}


/* Wealth + Create Pamflet Mobile Friendly Patch */
.category-page-body .home-program-grid{align-items:stretch;}
.pamphlet-preview-card,.pamphlet-form-card{min-width:0;}
.pamphlet-preview-stage{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;}
.pamphlet-preview-shell{max-width:100%;}
.pamphlet-template-img{width:100%;height:auto;display:block;}
@media (max-width:768px){
  .app-header{position:sticky;top:0;z-index:50;align-items:flex-start;gap:10px;padding:8px 12px;}
  .brand{min-width:0;}
  .brand-title{font-size:15px;line-height:1.15;}
  .brand-subtitle{font-size:10px;}
  .top-actions{width:100%;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .top-actions .btn{flex:0 0 auto;min-height:38px;font-size:12px;padding:9px 10px;}
  .container{padding:14px 10px;}
  .panel{border-radius:20px;padding:16px 12px;}
  .page-utility{gap:10px;align-items:flex-start;}
  .panel-head h2,.panel h2{font-size:24px;line-height:1.15;}
  .footer-note{font-size:13px;line-height:1.5;}
  .home-program-grid{grid-template-columns:1fr!important;gap:12px;}
  .program-card{min-height:auto;padding:18px 16px;}
  .pamphlet-layout{grid-template-columns:1fr!important;gap:16px;}
  .pamphlet-form-grid{grid-template-columns:1fr!important;}
  .pamphlet-actions{display:grid;grid-template-columns:1fr;gap:10px;}
  .pamphlet-actions .btn{width:100%;justify-content:center;}
  .pamphlet-selector-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pamphlet-overlay-text{font-size:clamp(10px,3.2vw,14px);}
}
@media (max-width:420px){
  .panel-head h2,.panel h2{font-size:22px;}
  .page-back-link,.page-chip{font-size:12px;padding:9px 12px;}
  .pamphlet-selector-grid{grid-template-columns:1fr;}
}

/* EASY SALES FINAL PATCH - Restore old mobile home header/menu layout */
@media (max-width:640px){
  header .container.topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"brand lang" "menu menu" !important;
    align-items:center !important;
    gap:12px 10px !important;
    padding:14px 0 16px !important;
  }
  header .brand{
    grid-area:brand !important;
    min-width:0 !important;
    max-width:none !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  header .brand-badge{
    width:52px !important;
    height:52px !important;
    border-radius:14px !important;
    font-size:18px !important;
    flex:0 0 52px !important;
  }
  header .brand-text{min-width:0 !important;}
  header .brand-text h1{
    font-size:18px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  header .brand-text p{
    font-size:12px !important;
    line-height:1.2 !important;
    margin-top:2px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  header .lang-switcher{
    grid-area:lang !important;
    display:flex !important;
    gap:8px !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin:0 !important;
    order:0 !important;
  }
  header .lang-btn{
    min-width:48px !important;
    min-height:42px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    font-size:14px !important;
    font-weight:800 !important;
  }
  header .top-actions{
    grid-area:menu !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 12px !important;
    overflow:visible !important;
    padding:0 !important;
    margin:0 !important;
  }
  header .top-actions .btn,
  header .top-actions .btn-nav{
    width:100% !important;
    min-height:80px !important;
    border-radius:14px !important;
    padding:14px 8px !important;
    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    white-space:normal !important;
    word-break:normal !important;
    text-align:center !important;
  }
}
@media (max-width:390px){
  header .brand-badge{width:46px !important;height:46px !important;flex-basis:46px !important;font-size:16px !important;}
  header .brand-text h1{font-size:16px !important;}
  header .brand-text p{font-size:11px !important;}
  header .lang-btn{min-width:42px !important;min-height:38px !important;font-size:13px !important;padding:7px 8px !important;}
  header .top-actions .btn,header .top-actions .btn-nav{min-height:74px !important;font-size:14px !important;}
}

/* EASY SALES PATCH - Mobile header compact like old screenshot */
@media (max-width:640px){
  header .container.topbar{
    gap:10px 8px !important;
    padding:12px 0 14px !important;
  }
  header .top-actions{
    gap:8px 10px !important;
  }
  header .top-actions .btn,
  header .top-actions .btn-nav{
    min-height:48px !important;
    height:48px !important;
    border-radius:12px !important;
    padding:8px 8px !important;
    font-size:13px !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}
@media (max-width:390px){
  header .top-actions .btn,
  header .top-actions .btn-nav{
    min-height:46px !important;
    height:46px !important;
    font-size:13px !important;
  }
}


/* EASY SALES V3.1 - Mobile category header alignment
   Keep Kembali button and category chip aligned to left on all category/detail pages. */
@media (max-width:768px){
  .page-utility{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
    gap:8px;
    margin-bottom:12px;
  }
  .page-utility .page-back-link,
  .page-utility .page-chip{
    align-self:flex-start;
    margin-left:0;
    margin-right:auto;
  }
  .panel-head,
  .panel-head > div{
    text-align:left;
  }
}

/* KPI Cross-Sell Point PDF Live Preview */
.pdf-live-preview-block{margin:18px 0 20px;padding:18px;border-radius:22px;background:#fff;border:1px solid rgba(75,25,91,.12);box-shadow:0 14px 34px rgba(15,23,42,.08)}
.pdf-preview-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}
.pdf-preview-head h4{margin:0 0 6px;font-size:18px;color:var(--kb-dark)}
.pdf-preview-head p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.pdf-preview-open{width:auto;white-space:nowrap}
.pdf-preview-frame-wrap{width:100%;height:min(78vh,820px);border-radius:18px;overflow:hidden;border:1px solid rgba(15,23,42,.12);background:#f8fafc}
.pdf-preview-frame{width:100%;height:100%;border:0;background:#fff}
.pdf-page-preview-grid{display:none;gap:14px;margin-top:16px}
.pdf-page-card{margin:0;border:1px solid rgba(15,23,42,.12);border-radius:18px;background:#f8fafc;overflow:hidden;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.pdf-page-card img{display:block;width:100%;height:auto;background:#fff}
.pdf-page-label{padding:10px 12px;font-weight:800;font-size:12px;color:var(--kb-dark);background:#fff;border-bottom:1px solid rgba(15,23,42,.08)}
@media (max-width:768px){.pdf-live-preview-block{padding:14px;border-radius:18px}.pdf-preview-head{display:grid;grid-template-columns:1fr;gap:10px}.pdf-preview-open{width:100%}.pdf-preview-frame-wrap{display:none}.pdf-page-preview-grid{display:grid;grid-template-columns:1fr}.pdf-page-card{border-radius:16px}.pdf-preview-head h4{font-size:16px}.pdf-preview-head p{font-size:12px}}

/* Cross-Sell Point PDF live preview dropdown */
.pdf-preview-dropdown{width:100%}
.pdf-preview-dropdown summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;user-select:none}
.pdf-preview-dropdown summary::-webkit-details-marker{display:none}
.pdf-preview-dropdown summary::after{content:'⌄';font-size:14px;line-height:1;transition:transform .2s ease}
.pdf-preview-dropdown[open] summary::after{transform:rotate(180deg)}
.pdf-preview-content{margin-top:16px}
.pdf-preview-frame-wrap{width:100%;height:82vh;border-radius:18px;overflow:hidden;border:1px solid rgba(75,25,91,.16);background:#fff}
.pdf-preview-frame{width:100%;height:100%;border:0;display:block;background:#fff}
@media (max-width:768px){
  .pdf-preview-toggle{width:100%;min-height:48px}
  .pdf-preview-frame-wrap{display:block;height:72vh;border-radius:14px}
  .pdf-preview-head h4{font-size:16px}
  .pdf-preview-head p{font-size:12px}
}

/* Cross-Sell Point KPI live preview menggunakan WEBP lokal agar ringan dan mobile friendly */
.kpi-webp-preview{
  width:100%;
  max-height:82vh;
  overflow:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:14px;
  border:1px solid rgba(75,25,91,.16);
  border-radius:18px;
  background:#f8fafc;
  -webkit-overflow-scrolling:touch;
}
.kpi-webp-page{
  margin:0 auto;
  width:min(100%,980px);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.kpi-webp-page img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:768px){
  .kpi-webp-preview{
    max-height:72vh;
    padding:8px;
    gap:12px;
    border-radius:14px;
  }
  .kpi-webp-page{
    width:100%;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(15,23,42,.08);
  }
}


/* Promo Kartu multipage pamphlet preview */
.pamphlet-canvas-wrap-multipage{display:block;max-height:78vh;overflow:auto;padding:4px 8px 8px;}
.pamphlet-multipage-stack{display:grid;gap:18px;justify-items:center;}
.pamphlet-page-preview{width:min(100%,520px);height:auto;aspect-ratio:auto;overflow:hidden;position:relative;}
.pamphlet-page-preview.pamphlet-page-first{aspect-ratio:var(--page-aspect-ratio,auto);}
.pamphlet-page-preview .pamphlet-template-image{width:100%;height:100%;object-fit:contain;display:block;}
.pamphlet-page-preview.pamphlet-page-first .pamphlet-template-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
@media (max-width:768px){.pamphlet-canvas-wrap-multipage{max-height:none;overflow:visible;padding:0}.pamphlet-page-preview{width:100%;border-radius:14px}}

/* Employee search result page - mobile friendly */
body[data-page="employee-search"] .content-grid{grid-template-columns:1fr}
body[data-page="employee-search"] .main-panels{width:100%;min-width:0}
body[data-page="employee-search"] .panel{max-width:100%}
body[data-page="employee-search"] .emp-result-card{min-width:0}
body[data-page="employee-search"] .emp-result-row{align-items:flex-start}
body[data-page="employee-search"] .emp-actions{display:inline-flex;gap:6px;flex-shrink:0}

@media (max-width:640px){
  body[data-page="employee-search"] .content{padding:14px 0}
  body[data-page="employee-search"] .container{width:100%;padding-left:14px;padding-right:14px}
  body[data-page="employee-search"] .panel{padding:18px 14px;border-radius:18px}
  body[data-page="employee-search"] .page-utility{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  body[data-page="employee-search"] .page-back-link{padding:10px 16px;font-size:14px}
  body[data-page="employee-search"] .page-chip{font-size:12px;white-space:nowrap}
  body[data-page="employee-search"] .panel-head h2{font-size:28px;line-height:1.1}
  body[data-page="employee-search"] .panel-sub{font-size:14px;line-height:1.35}
  body[data-page="employee-search"] .emp-results-grid{grid-template-columns:1fr;gap:12px;margin-top:14px}
  body[data-page="employee-search"] .emp-result-card{padding:14px;border-radius:16px;width:100%;box-sizing:border-box}
  body[data-page="employee-search"] .emp-result-name{font-size:18px;line-height:1.25}
  body[data-page="employee-search"] .emp-result-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px;padding:9px 0;font-size:14px}
  body[data-page="employee-search"] .emp-result-label{font-size:13px;line-height:1.25}
  body[data-page="employee-search"] .emp-result-value{text-align:left;word-break:break-word;overflow-wrap:anywhere;line-height:1.35}
  body[data-page="employee-search"] .emp-action-btn{width:34px;height:34px;min-width:34px}
}

@media (max-width:380px){
  body[data-page="employee-search"] .emp-result-row{grid-template-columns:1fr;gap:5px}
  body[data-page="employee-search"] .emp-actions{margin-top:2px}
}


/* STAR CASA FINAL MOBILE + PRINT FIX */
html{overflow-x:clip;}body{max-width:100%;overflow-x:clip;}
body[data-page="simulasi-starcasa"] .starcasa-sim-page{overflow-x:clip;}
body[data-page="simulasi-starcasa"] .starcasa-layout,
body[data-page="simulasi-starcasa"] .starcasa-layout > *,
body[data-page="simulasi-starcasa"] .starcasa-hero,
body[data-page="simulasi-starcasa"] .starcasa-hero > *{min-width:0;max-width:100%;}
body[data-page="simulasi-starcasa"] .sim-card{min-width:0;max-width:100%;}
body[data-page="simulasi-starcasa"] .table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media(max-width:768px){
  body[data-page="simulasi-starcasa"] .content{padding-top:14px;padding-bottom:110px;}
  body[data-page="simulasi-starcasa"] .starcasa-sim-page > .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box;
  }
  body[data-page="simulasi-starcasa"] .starcasa-page-utility{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin-bottom:12px;
    flex-wrap:wrap;
  }
  body[data-page="simulasi-starcasa"] .page-back-link,
  body[data-page="simulasi-starcasa"] .page-chip{
    width:auto;
    max-width:100%;
    min-height:36px;
    padding:8px 12px;
    font-size:12px;
    line-height:1.15;
    white-space:nowrap;
  }
  body[data-page="simulasi-starcasa"] .starcasa-hero{
    display:grid;
    grid-template-columns:1fr !important;
    gap:12px;
    margin-bottom:14px;
  }
  body[data-page="simulasi-starcasa"] .starcasa-hero-card{
    width:100%;
    border-radius:22px;
    padding:22px 20px;
  }
  body[data-page="simulasi-starcasa"] .starcasa-hero-card h2{
    font-size:24px;
    line-height:1.15;
    margin-bottom:10px;
  }
  body[data-page="simulasi-starcasa"] .starcasa-hero-card p{
    font-size:14px;
    line-height:1.55;
  }
  body[data-page="simulasi-starcasa"] .starcasa-note{
    width:100%;
    border-radius:20px;
    padding:18px;
  }
  body[data-page="simulasi-starcasa"] .starcasa-layout{
    display:grid;
    grid-template-columns:1fr !important;
    gap:14px;
    align-items:start;
  }
  body[data-page="simulasi-starcasa"] .sim-card{
    width:100%;
    border-radius:20px;
    padding:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  body[data-page="simulasi-starcasa"] .sim-card h3{
    font-size:20px;
    line-height:1.2;
  }
  body[data-page="simulasi-starcasa"] .sim-muted{
    font-size:13px;
    line-height:1.45;
    margin-bottom:14px;
  }
  body[data-page="simulasi-starcasa"] .sim-grid-2,
  body[data-page="simulasi-starcasa"] .sim-actions,
  body[data-page="simulasi-starcasa"] .result-grid,
  body[data-page="simulasi-starcasa"] .split-box{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  body[data-page="simulasi-starcasa"] .sim-input,
  body[data-page="simulasi-starcasa"] .sim-select{
    min-height:44px;
    border-radius:13px;
    font-size:14px;
    padding:11px 12px;
  }
  body[data-page="simulasi-starcasa"] .result-card{
    border-radius:16px;
    padding:14px;
  }
  body[data-page="simulasi-starcasa"] .result-card strong{
    font-size:18px;
    word-break:break-word;
  }
  body[data-page="simulasi-starcasa"] .sim-section-title{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin:12px 0 10px;
  }
  body[data-page="simulasi-starcasa"] .sim-section-title h4{
    font-size:16px;
  }
  body[data-page="simulasi-starcasa"] .sim-section-title .btn{
    width:100%;
  }
  body[data-page="simulasi-starcasa"] .table-wrap{
    border-radius:14px;
  }
  body[data-page="simulasi-starcasa"] .sim-table{
    min-width:620px;
  }
  body[data-page="simulasi-starcasa"] .sim-table th,
  body[data-page="simulasi-starcasa"] .sim-table td{
    padding:9px 10px;
    font-size:12px;
  }
}
@media(max-width:390px){
  body[data-page="simulasi-starcasa"] .starcasa-sim-page > .container{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  body[data-page="simulasi-starcasa"] .sim-card{
    padding:16px 14px;
  }
  body[data-page="simulasi-starcasa"] .starcasa-hero-card{
    padding:20px 18px;
  }
  body[data-page="simulasi-starcasa"] .sim-table{
    min-width:580px;
  }
}

/* Preserve PDF print background and theme */
@media print{
  *{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    color-adjust:exact !important;
  }
  html,body{
    background:#f8f5ef !important;
  }
  body[data-page="simulasi-starcasa"]{
    background:#f8f5ef !important;
  }
}



/* ============================================================
   HEADER FIXED GLOBAL PATCH — V3.6
   Memastikan header sticky/fixed di semua halaman & breakpoint.
   overflow-x:clip dipakai agar sticky tidak rusak.
   ============================================================ */

/* Force sticky pada semua breakpoint */
html { overflow-x: clip; }
body { overflow-x: clip; }

header,
body > header,
#app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #f1e5c6 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  width: 100% !important;
  left: 0 !important;
}

/* Pastikan tidak ada halaman spesifik yang hide atau unset header */
body[data-page] > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Mobile: tetap sticky */
@media (max-width: 768px) {
  header,
  body > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  /* Cegah konten naik di bawah header */
  body > header + * {
    overflow-anchor: none;
  }
}

@media (max-width: 480px) {
  header,
  body > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
}

/* Print: sembunyikan header */
@media print {
  header, body > header { display: none !important; }
}

/* Override inline style pada simulasi-starcasa yang pakai sticky:999 */
body[data-page="simulasi-starcasa"] > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Overflow fix untuk page simulasi agar tabel bisa scroll horizontal
   tanpa merusak sticky header */
body[data-page="simulasi-starcasa"] .starcasa-sim-page,
body[data-page="simulasi-starcombo"] .starcombo-sim-page,
body[data-page="simulasi-kredit"] .sim-kredit-page {
  overflow-x: visible !important;
}
body[data-page="simulasi-starcasa"] .table-wrap,
body[data-page="simulasi-starcombo"] .table-wrap,
body[data-page="simulasi-kredit"] .table-wrap {
  overflow-x: auto !important;
}

/* =====================================================
   PROMO KARTU ONLY
   Adjustment Nama & HP agar masuk ke dalam white box
===================================================== */

body[data-program="promo-kartu"] .pamphlet-fill{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  z-index:5;
  color:#111;
  pointer-events:none;
}

body[data-program="promo-kartu"] .pamphlet-fill-name,
body[data-program="promo-kartu"] .pamphlet-fill-phone{
  position:relative;
  left:auto;
  width:100%;
  text-align:center;
}

body[data-program="promo-kartu"] .fill-value{
  font-size:clamp(13px,1.6vw,22px);
  font-weight:900;
  line-height:1.15;
  word-break:break-word;
  width:100%;
  text-align:center;
  display:block;
}

body[data-program="promo-kartu"] .fill-value-name{
  margin-bottom:4px;
}

@media (max-width:768px){
  body[data-program="promo-kartu"] .fill-value{
    font-size:clamp(11px,3vw,16px);
  }
}


/* ============================================================
   SCRIPT STEP CARDS — Layout untuk halaman Script per Program
   Digunakan oleh script-star-combo.html, script-star-casa.html,
   script-star-cashback.html, script-kpr.html
   ============================================================ */

.script-step{
  display:grid;
  gap:14px;
}

.script-step-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  background:linear-gradient(135deg,var(--kb-orange),#ff9a33);
  color:#fff;
  font-weight:700;
  font-size:12px;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(245,130,32,.25);
  width:fit-content;
}

.script-step-quote{
  position:relative;
  background:#fff;
  border:1px solid #f0d98f;
  border-left:5px solid var(--kb-orange);
  border-radius:14px;
  padding:32px 20px 18px;
  font-size:15.5px;
  line-height:1.7;
  color:#222;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  font-style:normal;
  margin-top:10px;
}

.script-step-quote::before{
  content:"\201C";
  position:absolute;
  top:-12px;
  left:18px;
  font-size:40px;
  line-height:1;
  color:var(--kb-orange);
  font-family:Georgia,serif;
  background:#fffaf0;
  padding:4px 8px 0;
  border-radius:6px;
}

.script-step-highlight{
  background:linear-gradient(135deg,#fff7db,#ffe9b8);
  border:1px solid #f0d98f;
  border-radius:14px;
  padding:16px 18px;
  font-size:14.5px;
  line-height:1.65;
  color:#3d2c00;
}

.script-step-highlight strong{
  color:var(--kb-dark);
}

.script-step-note{
  background:#f9f4e6;
  border:1px dashed #e1c875;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  color:#5a4a1f;
  line-height:1.55;
}

.script-step-note strong{
  color:var(--kb-dark);
}

/* ── Comparison cards (vs Tabungan Biasa, vs Deposito, dll) ── */

.script-compare{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}

.script-compare-card{
  background:#fff;
  border:1px solid #ecd9a8;
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:.2s ease;
}

.script-compare-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.script-compare-card h5{
  font-size:14px;
  font-weight:800;
  color:var(--kb-orange);
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:2px solid #fff3cc;
}

.script-compare-card p{
  font-size:14px;
  line-height:1.6;
  color:#333;
}

/* ── Response cards (Tertarik / Belum Mau) ── */

.script-response{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}

.script-response-card{
  background:#fff;
  border:1px solid #e7e1d3;
  border-radius:14px;
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.script-response-card h5{
  font-size:14px;
  font-weight:800;
  color:var(--kb-dark);
  margin-bottom:10px;
}

.script-response-card p{
  font-size:14px;
  line-height:1.6;
  color:#333;
}

.script-response-positive{
  border-color:#bfe5c2;
  background:linear-gradient(180deg,#f1faf2,#ffffff);
}

.script-response-positive h5{
  color:#1f7a36;
}

.script-response-neutral{
  border-color:#f0d98f;
  background:linear-gradient(180deg,#fffaf0,#ffffff);
}

.script-response-neutral h5{
  color:#8a5b00;
}

/* ── FAQ block (Star Cashback) ── */

.script-faq{
  background:#fff;
  border:1px solid #e7e1d3;
  border-radius:14px;
  padding:16px;
  margin-top:4px;
}

.script-faq h5{
  font-size:14px;
  font-weight:800;
  color:var(--kb-dark);
  margin-bottom:12px;
}

.script-faq-item{
  background:#fffaf0;
  border:1px solid #f1e2b7;
  border-radius:10px;
  padding:10px 12px;
  font-size:13.5px;
  line-height:1.55;
  color:#333;
  margin-bottom:8px;
}

.script-faq-item:last-child{
  margin-bottom:0;
}

.script-faq-item strong{
  color:var(--kb-dark);
}

/* ── Special chip color for SCRIPT category pages ── */

body[data-page^="script-"] .page-chip{
  background:linear-gradient(135deg,var(--kb-orange),#ff9a33);
}

/* ── Print-friendly: rapikan saat dicetak ── */

@media print{
  .script-step-quote,
  .script-step-highlight,
  .script-step-note,
  .script-compare-card,
  .script-response-card,
  .script-faq{
    box-shadow:none;
    page-break-inside:avoid;
  }
}

/* ── Mobile tweaks ── */

@media (max-width:640px){
  .script-step-quote{
    padding:28px 14px 16px;
    font-size:14.5px;
  }
  .script-step-quote::before{
    font-size:32px;
    top:-10px;
    left:12px;
    padding:3px 6px 0;
  }
  .script-step-highlight,
  .script-step-note{
    padding:13px 14px;
    font-size:14px;
  }
  .script-compare,
  .script-response{
    grid-template-columns:1fr;
  }
}

/* ── Password Toggle (Show/Hide) ─────────────────────────────────── */
.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrap .login-input {
  padding-right: 48px;
  width: 100%;
}
.toggle-password-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.toggle-password-btn:hover {
  color: var(--kb-orange, #F58220);
  background: rgba(245,130,32,0.08);
}
.toggle-password-btn:focus-visible {
  outline: 2px solid var(--kb-orange, #F58220);
  outline-offset: 2px;
}
.eye-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* ── Simulasi group header: title case (not ALL CAPS) ─────────────── */
.program-group[data-group="simulasi"] .program-group-head h3,
.btn-nav[data-i18n="nav.simulasi"],
[data-i18n="nav.simulasi"] {
  text-transform: none;
}

/* ─── Tabungan Product Cards ─── */
.tabungan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:8px}
.tabungan-card{display:flex;flex-direction:column;background:#fff;border:1px solid #edd9a7;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .22s ease,box-shadow .22s ease;text-decoration:none;color:inherit}
.tabungan-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.13)}
.tabungan-card-accent{height:5px;background:linear-gradient(90deg,var(--kb-orange),var(--kb-yellow))}
.tabungan-card-body{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column}
.tabungan-card-badge{display:inline-flex;align-items:center;gap:6px;background:#fff3cc;border:1px solid #f0d98f;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--kb-black);margin-bottom:10px;letter-spacing:.3px}
.tabungan-card h3{font-size:17px;line-height:1.3;margin-bottom:6px;color:var(--kb-dark)}
.tabungan-card-tagline{font-size:13px;color:var(--kb-gray);margin-bottom:14px;font-style:italic}
.tabungan-card-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.tabungan-chip{background:#fffaf0;border:1px solid #f1e2b7;border-radius:8px;padding:5px 10px;font-size:12px;color:var(--kb-dark)}
.tabungan-chip strong{color:var(--kb-orange);font-weight:700}
.tabungan-card-benefits{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px}
.tabungan-card-benefits li{font-size:13px;color:#444;padding-left:18px;position:relative;line-height:1.45}
.tabungan-card-benefits li::before{content:'✓';position:absolute;left:0;color:var(--kb-orange);font-weight:700}
.tabungan-fasil-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.tabungan-fasil-tag{background:#f0f4ff;border:1px solid #d0d9f5;border-radius:6px;padding:3px 8px;font-size:11px;color:#3d5fa0;font-weight:600}
.tabungan-card-footer{margin-top:auto;padding-top:14px;border-top:1px solid #f1e2b7}
.tabungan-card-cta{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--kb-orange)}
.tabungan-card-cta .arrow{background:linear-gradient(135deg,var(--kb-orange),#ff9a33);color:#fff;width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:16px;transition:transform .2s ease}
.tabungan-card:hover .tabungan-card-cta .arrow{transform:translateX(4px)}
.tabungan-page-header{padding:0 0 24px}
.tabungan-stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.tabungan-stat{background:linear-gradient(135deg,#fff7db,#fff);border:1px solid #f2e2af;border-radius:16px;padding:14px 20px;text-align:center;min-width:110px}
.tabungan-stat-num{font-size:26px;font-weight:900;color:var(--kb-orange);line-height:1;margin-bottom:4px}
.tabungan-stat-label{font-size:11px;color:var(--kb-gray);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
@media(max-width:640px){.tabungan-grid{grid-template-columns:1fr}}

/* ─── Tabungan Detail Pages ─── */
.detail-page-wrap{padding:28px 0 60px}
.detail-top-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.back-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;text-decoration:none;color:var(--kb-black);background:#fff3cc;padding:10px 18px;border-radius:999px;border:1px solid #f0d98f;transition:.2s ease}
.back-btn:hover{background:#ffe58a;transform:translateX(-2px)}
.detail-chip-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detail-badge{display:inline-flex;align-items:center;gap:6px;background:#fff3cc;border:1px solid #f0d98f;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700}
.detail-prod-id{background:#111;color:#fff;border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.4px}
.detail-hero{display:grid;grid-template-columns:1fr 360px;gap:22px;margin-bottom:28px;align-items:start}
.detail-hero-main{background:linear-gradient(135deg,#fff7db,#fff);border:1px solid #f2e2af;border-radius:26px;padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.detail-hero-main h2{font-size:30px;line-height:1.2;margin-bottom:6px;color:var(--kb-dark)}
.detail-hero-main h2 span{color:var(--kb-orange)}
.detail-tagline{font-size:16px;color:var(--kb-gray);font-style:italic;margin-bottom:18px}
.detail-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.detail-chip{background:#fff;border:1px solid #f1e2b7;border-radius:12px;padding:8px 14px;font-size:13px}
.detail-chip strong{color:var(--kb-orange);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:1px}
.detail-sidebar-box{background:linear-gradient(180deg,#1d1d1d,#111);color:#fff;border-radius:26px;padding:24px;box-shadow:var(--shadow)}
.detail-sidebar-box h3{font-size:16px;color:var(--kb-yellow);margin-bottom:14px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.detail-fasil-list{display:grid;gap:8px}
.detail-fasil-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:12px;font-size:13px;color:#e6e6e6}
.detail-fasil-item::before{content:'✦';color:var(--kb-yellow);font-size:11px}
.detail-sections{display:grid;gap:18px}
.detail-section{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:var(--shadow-soft)}
.detail-section-title{font-size:13px;font-weight:800;color:var(--kb-orange);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.detail-section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,#f1e2b7,transparent)}
.detail-benefit-list{list-style:none;padding:0;display:grid;gap:8px}
.detail-benefit-list li{padding:10px 14px 10px 42px;background:#fffaf0;border:1px solid #f1e2b7;border-radius:12px;font-size:14px;color:#333;position:relative;line-height:1.5}
.detail-benefit-list li::before{content:'✓';position:absolute;left:14px;top:11px;color:var(--kb-orange);font-weight:900;font-size:14px}
.doc-badge-grid{display:flex;flex-wrap:wrap;gap:8px}
.doc-badge{background:#f0f4ff;border:1px solid #c5d4f5;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;color:#3d5fa0}
.doc-section{margin-bottom:14px}
.doc-section-label{font-size:12px;font-weight:700;color:var(--kb-gray);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.script-box{background:linear-gradient(135deg,#fff7db,#fff);border:1px solid #f2e2af;border-radius:16px;padding:18px}
.script-step{display:flex;gap:12px;margin-bottom:10px;align-items:flex-start}
.script-step:last-child{margin-bottom:0}
.script-num{background:var(--kb-orange);color:#fff;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.script-step-body strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--kb-gray);margin-bottom:3px}
.script-step-body p{font-size:14px;color:#333;line-height:1.5;font-style:italic}
@media(max-width:900px){.detail-hero{grid-template-columns:1fr}}
@media(max-width:640px){.detail-hero-main h2{font-size:24px}.detail-top-bar{flex-direction:column;align-items:flex-start}}

/* ════════════════════════════════════════════════════
   Script Pages — Enhanced Mobile View (v3.12)
   Applies to: script-star-combo, script-star-cashback,
               script-star-casa, script-kpr
   ════════════════════════════════════════════════════ */

/* Hero grid: stack on mobile */
body[data-page^="script-"] .hero-grid,
body[data-page^="script-"] .content-grid {
  grid-template-columns: 1fr;
}

body[data-page^="script-"] .summary-box {
  border-radius: 20px;
}

/* Override: single-column layout for script pages always */
body[data-page^="script-"] .content-grid {
  grid-template-columns: minmax(0,1fr);
}

body[data-page^="script-"] .sidebar {
  display: none !important;
}

/* panel-body spacing */
body[data-page^="script-"] .panel-body {
  gap: 20px;
}

/* block titles spacing */
body[data-page^="script-"] .block h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--kb-dark);
  margin-bottom: 10px;
  padding: 8px 0 8px 14px;
  border-left: 4px solid var(--kb-orange);
  background: #fffaf0;
  border-radius: 0 10px 10px 0;
}

/* ── Mobile: max-width 768px tweaks for script pages ── */
@media (max-width:768px){
  body[data-page^="script-"] .hero{
    padding: 16px 0;
  }
  body[data-page^="script-"] .hero-card{
    padding: 18px 16px;
    border-radius: 18px;
  }
  body[data-page^="script-"] .hero-card h2{
    font-size: 20px;
    line-height: 1.3;
  }
  body[data-page^="script-"] .summary-box{
    padding: 18px 16px;
    border-radius: 18px;
  }
  body[data-page^="script-"] .summary-box h3{
    font-size: 18px;
    margin-bottom: 10px;
  }
  body[data-page^="script-"] .panel{
    padding: 18px 14px;
    border-radius: 18px;
  }
  body[data-page^="script-"] .panel-head h2{
    font-size: 20px;
    line-height: 1.3;
  }
  body[data-page^="script-"] .block h4{
    font-size: 14px;
    padding: 7px 12px;
  }
  body[data-page^="script-"] .script-step-quote{
    font-size: 13.5px;
    padding: 28px 12px 14px;
    line-height: 1.7;
  }
  body[data-page^="script-"] .script-step-highlight{
    font-size: 13.5px;
    padding: 12px 13px;
  }
  body[data-page^="script-"] .script-step-note{
    font-size: 13px;
    padding: 10px 12px;
  }
  body[data-page^="script-"] .script-compare,
  body[data-page^="script-"] .script-response{
    grid-template-columns: 1fr;
  }
  body[data-page^="script-"] .script-compare-card,
  body[data-page^="script-"] .script-response-card{
    padding: 14px 13px;
    border-radius: 12px;
  }
  body[data-page^="script-"] .script-compare-card h5,
  body[data-page^="script-"] .script-response-card h5{
    font-size: 13px;
    margin-bottom: 8px;
  }
  body[data-page^="script-"] .script-compare-card p,
  body[data-page^="script-"] .script-response-card p{
    font-size: 13px;
  }
  body[data-page^="script-"] .script-faq{
    padding: 13px 12px;
    border-radius: 12px;
  }
  body[data-page^="script-"] .script-faq-item{
    font-size: 12.5px;
    padding: 9px 11px;
  }
  body[data-page^="script-"] .page-utility{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
  }
  body[data-page^="script-"] .page-back-link{
    font-size: 13px;
    padding: 7px 14px;
  }
  body[data-page^="script-"] .page-chip{
    font-size: 11px;
  }
}

@media (max-width: 480px){
  body[data-page^="script-"] .hero-card h2{
    font-size: 18px;
  }
  body[data-page^="script-"] .script-step-quote{
    font-size: 13px;
    border-radius: 12px;
  }
  body[data-page^="script-"] .script-step-badge{
    font-size: 11px;
    padding: 5px 10px;
  }
  body[data-page^="script-"] .hero-grid{
    gap: 14px;
  }
  body[data-page^="script-"] .content-grid{
    padding: 0;
  }
}

/* ==========================================================
   SCRIPT PAGES MOBILE HARDENING — v3.12-mobile-script-fix
   Scope: script-star-combo, script-star-cashback, script-star-casa, script-kpr
   Purpose: improve mobile readability, prevent horizontal overflow, and keep cards compact.
========================================================== */
body[data-page^="script-"]{
  overflow-x:hidden;
}

body[data-page^="script-"] .container,
body[data-page^="script-"] .content-grid,
body[data-page^="script-"] .main-panels,
body[data-page^="script-"] .panel,
body[data-page^="script-"] .panel-body,
body[data-page^="script-"] .block,
body[data-page^="script-"] .script-step,
body[data-page^="script-"] .script-step-quote,
body[data-page^="script-"] .script-step-highlight,
body[data-page^="script-"] .script-step-note,
body[data-page^="script-"] .script-compare-card,
body[data-page^="script-"] .script-response-card,
body[data-page^="script-"] .script-faq{
  min-width:0;
  max-width:100%;
}

body[data-page^="script-"] .content{
  padding-top:22px;
}

body[data-page^="script-"] .panel-head{
  display:grid;
  gap:8px;
}

body[data-page^="script-"] .panel-sub,
body[data-page^="script-"] .block p,
body[data-page^="script-"] .block li,
body[data-page^="script-"] .script-step-quote,
body[data-page^="script-"] .script-step-highlight,
body[data-page^="script-"] .script-step-note,
body[data-page^="script-"] .script-compare-card p,
body[data-page^="script-"] .script-response-card p,
body[data-page^="script-"] .script-faq-item{
  overflow-wrap:anywhere;
  word-break:normal;
}

body[data-page^="script-"] .block{
  overflow:hidden;
}

body[data-page^="script-"] .block table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:768px){
  body[data-page^="script-"] .container{
    width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  body[data-page^="script-"] header .topbar{
    padding:10px 0;
    gap:8px;
  }

  body[data-page^="script-"] .brand{
    min-width:0;
    max-width:58vw;
  }

  body[data-page^="script-"] .brand-badge{
    width:36px;
    height:36px;
    border-radius:12px;
    font-size:14px;
  }

  body[data-page^="script-"] .brand-text{
    min-width:0;
  }

  body[data-page^="script-"] .brand-text h1{
    font-size:14px;
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body[data-page^="script-"] .brand-text p{
    display:none;
  }

  body[data-page^="script-"] .top-actions{
    flex:1 1 auto;
    justify-content:flex-end;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  body[data-page^="script-"] .top-actions::-webkit-scrollbar{
    display:none;
  }

  body[data-page^="script-"] .top-actions .btn,
  body[data-page^="script-"] .lang-btn,
  body[data-page^="script-"] .btn{
    min-height:34px;
    padding:8px 10px;
    font-size:12px;
    border-radius:10px;
  }

  body[data-page^="script-"] .content{
    padding:16px 0 34px;
  }

  body[data-page^="script-"] .content-grid{
    gap:14px;
  }

  body[data-page^="script-"] .main-panels{
    gap:14px;
  }

  body[data-page^="script-"] .panel{
    padding:14px 12px;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }

  body[data-page^="script-"] .panel-head h2{
    font-size:19px;
    line-height:1.25;
    letter-spacing:-.2px;
  }

  body[data-page^="script-"] .panel-sub{
    font-size:12.5px;
    line-height:1.45;
  }

  body[data-page^="script-"] .panel-body{
    gap:12px;
  }

  body[data-page^="script-"] .block{
    padding:12px;
    border-radius:14px;
  }

  body[data-page^="script-"] .block h4{
    font-size:13.5px;
    line-height:1.35;
    margin-bottom:8px;
    padding:8px 10px;
  }

  body[data-page^="script-"] .script-step{
    gap:10px;
  }

  body[data-page^="script-"] .script-step-badge{
    font-size:10.5px;
    line-height:1.2;
    padding:6px 10px;
    letter-spacing:.25px;
  }

  body[data-page^="script-"] .script-step-quote{
    margin-top:4px;
    padding:24px 12px 13px;
    font-size:13.5px;
    line-height:1.62;
    border-left-width:4px;
  }

  body[data-page^="script-"] .script-step-quote::before{
    top:-9px;
    left:10px;
    font-size:30px;
    padding:2px 6px 0;
  }

  body[data-page^="script-"] .script-step-highlight,
  body[data-page^="script-"] .script-step-note{
    padding:11px 12px;
    font-size:12.8px;
    line-height:1.55;
  }

  body[data-page^="script-"] .script-compare,
  body[data-page^="script-"] .script-response{
    grid-template-columns:1fr !important;
    gap:10px;
  }

  body[data-page^="script-"] .script-compare-card,
  body[data-page^="script-"] .script-response-card,
  body[data-page^="script-"] .script-faq{
    padding:12px;
    border-radius:13px;
  }

  body[data-page^="script-"] .script-compare-card h5,
  body[data-page^="script-"] .script-response-card h5,
  body[data-page^="script-"] .script-faq h5{
    font-size:12.8px;
    line-height:1.35;
    margin-bottom:7px;
  }

  body[data-page^="script-"] .script-compare-card p,
  body[data-page^="script-"] .script-response-card p,
  body[data-page^="script-"] .script-faq-item{
    font-size:12.8px;
    line-height:1.52;
  }

  body[data-page^="script-"] .page-utility{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
    gap:8px;
    margin-bottom:12px;
  }

  body[data-page^="script-"] .page-back-link,
  body[data-page^="script-"] .page-chip{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

@media (max-width:380px){
  body[data-page^="script-"] .container{
    padding-left:10px;
    padding-right:10px;
  }

  body[data-page^="script-"] .brand{
    max-width:54vw;
  }

  body[data-page^="script-"] .brand-text h1{
    max-width:36vw;
    font-size:13px;
  }

  body[data-page^="script-"] .panel{
    padding:12px 10px;
  }

  body[data-page^="script-"] .panel-head h2{
    font-size:18px;
  }

  body[data-page^="script-"] .script-step-quote,
  body[data-page^="script-"] .script-step-highlight,
  body[data-page^="script-"] .script-step-note,
  body[data-page^="script-"] .script-compare-card p,
  body[data-page^="script-"] .script-response-card p,
  body[data-page^="script-"] .script-faq-item{
    font-size:12.5px;
  }
}


/* ==========================================================
   SCRIPT PAGES MOBILE DESIGN MATCH — v3.12-script-design-ref
   Reference: CONTOH DESIGN SCRIPT.pdf page 1
   Scope: script-star-combo, script-star-cashback, script-star-casa, script-kpr
   Purpose: make the four script pages visually closer to the provided mobile reference:
            compact header, 2x2 navigation, rounded content card, full-width back and script pill,
            readable script quote cards, and no horizontal overflow.
========================================================== */
body[data-page^="script-"]{
  background:linear-gradient(180deg,#ffffff 0%,#fffaf0 100%);
}

body[data-page^="script-"] header{
  border-bottom:1px solid #f5ecd6;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}

body[data-page^="script-"] .content > .container{
  background:#ffffff;
  border:1px solid #f4e7c8;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

body[data-page^="script-"] .panel{
  box-shadow:none;
}

body[data-page^="script-"] .page-back-link{
  background:#fff3cc;
  border-color:#f2dda1;
  color:#1f1f1f;
}

body[data-page^="script-"] .page-chip{
  background:linear-gradient(135deg,#ff8b1f,#ff9f39);
  color:#fff;
  border:none;
  box-shadow:0 8px 18px rgba(245,130,32,.18);
}

body[data-page^="script-"] .panel-head h2{
  color:#111;
  font-weight:900;
}

body[data-page^="script-"] .script-step{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

body[data-page^="script-"] .script-step-badge{
  display:inline-flex;
  width:max-content;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#ff8b1f,#ff9f39);
  border-radius:14px;
  box-shadow:0 8px 16px rgba(245,130,32,.15);
}

body[data-page^="script-"] .script-step-quote{
  background:#fff;
  border:1px solid #f1e3bf;
  border-left:4px solid #ff8b1f;
  box-shadow:0 8px 18px rgba(0,0,0,.035);
}

body[data-page^="script-"] .script-step-note{
  background:#fff8df;
  border:1px solid #eedca6;
  color:#3b3320;
}

body[data-page^="script-"] .script-step-highlight{
  background:#fffaf0;
  border:1px solid #f0dfb2;
}

@media (max-width:768px){
  body[data-page^="script-"]{
    background:#ffffff;
  }

  body[data-page^="script-"] header .container.topbar{
    width:100%;
    padding:12px 12px 10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px 10px;
    align-items:center;
  }

  body[data-page^="script-"] .brand{
    max-width:none;
    min-width:0;
    gap:10px;
  }

  body[data-page^="script-"] .brand-badge{
    width:48px;
    height:48px;
    border-radius:13px;
    font-size:17px;
    box-shadow:0 8px 18px rgba(245,130,32,.15);
  }

  body[data-page^="script-"] .brand-text h1{
    max-width:none;
    font-size:19px;
    font-weight:900;
    letter-spacing:-.2px;
    white-space:nowrap;
  }

  body[data-page^="script-"] .brand-text p{
    display:none;
  }

  body[data-page^="script-"] .lang-switcher{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin:0;
  }

  body[data-page^="script-"] .lang-btn{
    width:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border-radius:12px;
    font-size:13px;
    font-weight:900;
    background:#fff;
    border:1px solid #f0e2c2;
    color:#111;
    box-shadow:0 5px 14px rgba(0,0,0,.04);
  }

  body[data-page^="script-"] .lang-btn.active{
    background:linear-gradient(135deg,#ff8b1f,#ff9f39);
    border-color:#ff8b1f;
    color:#fff;
    box-shadow:0 8px 18px rgba(245,130,32,.18);
  }

  body[data-page^="script-"] .top-actions{
    grid-column:1 / -1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    overflow:visible;
  }

  body[data-page^="script-"] .top-actions .btn,
  body[data-page^="script-"] .top-actions a.btn{
    width:100%;
    min-height:55px;
    border-radius:13px;
    padding:12px 8px;
    font-size:13px;
    font-weight:900;
    line-height:1.15;
    text-align:center;
    white-space:normal;
    background:#f6df91;
    border:1px solid #efd584;
    color:#111;
    box-shadow:none;
  }

  body[data-page^="script-"] .top-actions .btn.is-active,
  body[data-page^="script-"] .top-actions a.btn.is-active,
  body[data-page^="script-"] .top-actions .btn-primary,
  body[data-page^="script-"] .top-actions .btn-nav.is-active{
    background:linear-gradient(135deg,#ff8b1f,#ff9f39);
    border-color:#ff8b1f;
    color:#fff;
    box-shadow:0 8px 18px rgba(245,130,32,.16);
  }

  body[data-page^="script-"] .content{
    padding:16px 0 36px;
  }

  body[data-page^="script-"] .content > .container{
    width:calc(100% - 24px);
    padding:12px;
    border-radius:22px;
    background:#fff;
  }

  body[data-page^="script-"] .panel{
    padding:0;
    border:none;
    background:transparent;
    border-radius:0;
  }

  body[data-page^="script-"] .page-utility{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:14px;
  }

  body[data-page^="script-"] .page-back-link,
  body[data-page^="script-"] .page-chip{
    width:100%;
    min-height:44px;
    justify-content:center;
    text-align:center;
    border-radius:999px;
  }

  body[data-page^="script-"] .page-back-link{
    font-size:13px;
    font-weight:800;
  }

  body[data-page^="script-"] .page-chip{
    font-size:12px;
    letter-spacing:.3px;
  }

  body[data-page^="script-"] .panel-head{
    margin-bottom:14px;
    gap:4px;
  }

  body[data-page^="script-"] .panel-head h2{
    font-size:22px;
    line-height:1.18;
    letter-spacing:-.3px;
  }

  body[data-page^="script-"] .panel-sub{
    font-size:13px;
    line-height:1.45;
    color:#4f5357;
  }

  body[data-page^="script-"] .panel-body{
    gap:18px;
  }

  body[data-page^="script-"] .block{
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
    overflow:visible;
  }

  body[data-page^="script-"] .block h4{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
    padding:0 0 0 13px;
    min-height:34px;
    background:transparent;
    border-left:4px solid #ff8b1f;
    border-radius:0;
    font-size:18px;
    line-height:1.2;
    font-weight:900;
    color:#111;
  }

  body[data-page^="script-"] .script-step{
    gap:9px;
  }

  body[data-page^="script-"] .script-step-badge{
    margin-left:0;
    padding:10px 14px;
    min-height:38px;
    border-radius:14px;
    font-size:12px;
  }

  body[data-page^="script-"] .script-step-quote{
    position:relative;
    margin-top:0;
    padding:28px 14px 15px;
    border-radius:12px;
    font-size:12.8px;
    line-height:1.72;
  }

  body[data-page^="script-"] .script-step-quote::before{
    top:-6px;
    left:12px;
    font-size:30px;
    line-height:1;
    color:#ff8b1f;
    background:#fff;
  }

  body[data-page^="script-"] .script-step-note,
  body[data-page^="script-"] .script-step-highlight{
    border-radius:10px;
    padding:13px 14px;
    font-size:12.8px;
    line-height:1.6;
  }
}

@media (max-width:390px){
  body[data-page^="script-"] header .container.topbar{
    padding-left:10px;
    padding-right:10px;
  }

  body[data-page^="script-"] .brand-badge{
    width:44px;
    height:44px;
    font-size:16px;
  }

  body[data-page^="script-"] .brand-text h1{
    font-size:17px;
  }

  body[data-page^="script-"] .lang-btn{
    width:39px;
    min-width:39px;
    min-height:39px;
    font-size:12px;
  }

  body[data-page^="script-"] .top-actions{
    gap:8px;
  }

  body[data-page^="script-"] .top-actions .btn,
  body[data-page^="script-"] .top-actions a.btn{
    min-height:52px;
    font-size:12px;
  }

  body[data-page^="script-"] .content > .container{
    width:calc(100% - 18px);
    padding:10px;
  }

  body[data-page^="script-"] .panel-head h2{
    font-size:20px;
  }

  body[data-page^="script-"] .block h4{
    font-size:16px;
  }
}

/* ============================================================
   PAMFLET PRINT OVERLAY — In-page print, no popup window
   Solusi untuk iOS Safari/Chrome yang memblokir window.open
   ============================================================ */
#pamflet-print-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #f5f5f5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#pamflet-print-toolbar {
  position: sticky;
  top: 0;
  z-index: 100000;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#pamflet-print-toolbar .ptb-title {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: #fff;
}
#pamflet-print-toolbar button {
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
#pamflet-print-now { background: #F58220; color: #fff; }
#pamflet-print-now:active { background: #d96e10; }
#pamflet-print-close { background: #444; color: #fff; }
#pamflet-print-close:active { background: #222; }
#pamflet-print-pages {
  padding: 20px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pamflet-print-page {
  width: 100%;
  max-width: 794px; /* A4 width at 96dpi */
  position: relative;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.pamflet-print-page img {
  width: 100%;
  height: auto;
  display: block;
}
.pamflet-print-fill {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 3px;
  pointer-events: none;
}
.pamflet-print-fill-val {
  font-size: clamp(10px, 1.8vw, 16px);
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
  color: #111;
  width: 100%;
  text-align: center;
  display: block;
}

/* When printing: hide everything except pages */
@media print {
  body[data-page="create-pamflet"] > *:not(#pamflet-print-overlay) { display: none !important; }
  body[data-page="create-pamflet"] #pamflet-print-overlay {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    background: #fff !important;
  }
  body[data-page="create-pamflet"] #pamflet-print-toolbar { display: none !important; }
  body[data-page="create-pamflet"] #pamflet-print-pages {
    padding: 0 !important;
    gap: 0 !important;
  }
  body[data-page="create-pamflet"] .pamflet-print-page {
    max-width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    page-break-after: always;
    break-after: page;
  }
  .pamflet-print-page:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
}

@media (max-width: 600px) {
  #pamflet-print-toolbar { padding: 10px 12px; gap: 8px; }
  #pamflet-print-toolbar button { padding: 8px 12px; font-size: 12px; }
  #pamflet-print-pages { padding: 12px 8px 32px; }
}


/* ============================================================
   STAR SERU — Mobile View Fix
   Ensures tables, hero, and content are properly mobile-friendly
   ============================================================ */

/* Force hero grid to single column on mobile for star-seru */
@media (max-width: 980px) {
  body[data-page="star-seru"] .hero-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="star-seru"] .summary-box {
    border-radius: 20px;
  }
}

/* Table horizontal scroll on mobile */
body[data-page="star-seru"] table {
  min-width: 0 !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  body[data-page="star-seru"] .hero-card h2 {
    font-size: 26px;
  }
  body[data-page="star-seru"] .hero-card p {
    font-size: 14px;
  }
  body[data-page="star-seru"] .panel {
    padding: 16px;
  }
  body[data-page="star-seru"] .block div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }
  body[data-page="star-seru"] table {
    font-size: 11px !important;
    min-width: 420px !important;
  }
  body[data-page="star-seru"] th,
  body[data-page="star-seru"] td {
    padding: 5px 4px !important;
    font-size: 11px !important;
  }
  body[data-page="star-seru"] .section-action-bar {
    flex-direction: column;
    gap: 8px;
  }
  body[data-page="star-seru"] .section-action-bar .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 380px) {
  body[data-page="star-seru"] table {
    min-width: 320px !important;
  }
}


/* ============================================================
   FINAL FIX 20260525 — STAR SERU mobile + Promo Kartu fill box
   ============================================================ */
body[data-page="star-seru"] .content-grid{
  align-items:start;
}
body[data-page="star-seru"] .main-panels{
  min-width:0;
}
body[data-page="star-seru"] .block{
  overflow-wrap:anywhere;
}
body[data-page="star-seru"] .block table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  white-space:nowrap;
}
@media (max-width: 768px){
  body[data-page="star-seru"] .content-grid{
    grid-template-columns:1fr !important;
  }
  body[data-page="star-seru"] .sidebar{
    position:relative !important;
    top:auto !important;
    width:100%;
  }
  body[data-page="star-seru"] .hero{
    padding-top:18px;
  }
  body[data-page="star-seru"] .hero-card,
  body[data-page="star-seru"] .summary-box,
  body[data-page="star-seru"] .panel{
    border-radius:18px;
  }
}
body[data-program="promo-kartu"] .pamphlet-fill,
body[data-program="promo-kartu"] .pamflet-print-fill{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:4px !important;
  padding:0 5% !important;
  box-sizing:border-box !important;
}
body[data-program="promo-kartu"] .fill-value,
body[data-program="promo-kartu"] .pamflet-print-fill-val{
  width:100% !important;
  text-align:center !important;
  line-height:1.15 !important;
}


/* ═══════════════════════════════════════════════════
   DOWNLOAD GUIDE POPUP — muncul sebelum halaman login
   ═══════════════════════════════════════════════════ */
.dg-overlay{z-index:10001!important}
.dg-card{background:#fff;border-radius:24px;padding:28px 28px 24px;width:100%;max-width:480px;box-shadow:0 24px 64px rgba(0,0,0,.22);animation:popupIn .3s ease;max-height:92vh;overflow-y:auto;scrollbar-width:thin}
.dg-lang-row{display:flex;justify-content:flex-end;gap:6px;margin-bottom:16px}
.dg-lang-pill{padding:4px 14px;border-radius:999px;border:1.5px solid #e5e5e5;background:#f8f8f8;font-size:12px;font-weight:700;cursor:pointer;color:#aaa;transition:all .15s;line-height:1.7}
.dg-lang-pill.dg-lang-active{background:var(--kb-orange);border-color:var(--kb-orange);color:#fff}
.dg-icon-wrap{display:flex;justify-content:center;margin-bottom:12px}
.dg-title{font-size:17px;font-weight:800;color:var(--kb-dark);text-align:center;line-height:1.35;margin-bottom:6px}
.dg-subtitle{font-size:13px;color:#888;text-align:center;line-height:1.5;margin-bottom:18px}
.dg-os-tabs{display:flex;border-radius:12px;overflow:hidden;border:1.5px solid #f0ece4;margin-bottom:14px}
.dg-os-tab{flex:1;padding:9px 0;border:none;background:#f8f6f2;font-size:13px;font-weight:700;cursor:pointer;color:#bbb;display:flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,color .15s;line-height:1}
.dg-os-tab.dg-os-active{background:var(--kb-orange);color:#fff}
.dg-steps-wrap{background:#fff9f2;border-radius:14px;padding:14px 16px;border:1.5px solid #ffe4bc;margin-bottom:18px}
.dg-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.dg-steps li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--kb-dark)}
.dg-num{min-width:24px;height:24px;border-radius:50%;background:var(--kb-orange);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.dg-step-text b{color:var(--kb-orange)}
.dg-btn{width:100%;font-size:15px;font-weight:800;padding:13px}
@media(max-width:520px){.dg-card{padding:20px 16px 18px;border-radius:20px;max-height:96vh}.dg-title{font-size:15px}.dg-btn{font-size:14px;padding:11px}}

/* ═══ Simulation In-Page Print Overlay: same flow as Create Pamflet ═══ */
#simulation-print-overlay{display:none;position:fixed;inset:0;z-index:99999;background:#f5f5f5;overflow:auto;color:#111;font-family:inherit;}
#simulation-print-toolbar{position:sticky;top:0;z-index:100000;background:#1a1a1a;color:#fff;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 18px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#simulation-print-toolbar .ptb-title{flex:1;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#simulation-print-toolbar button{border:0;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
#simulation-print-now{background:#F58220;color:#fff}#simulation-print-close{background:#444;color:#fff}
#simulation-print-pages{padding:24px 16px 48px;display:grid;gap:18px;justify-items:center}
.simulation-print-page{width:210mm;min-height:297mm;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.14);border-radius:2px;padding:14mm;box-sizing:border-box;overflow:hidden}
.simulation-print-doc-header{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:2px solid #f0c24a;padding-bottom:12px;margin-bottom:14px}
.simulation-print-doc-header h2{margin:2px 0 4px;font-size:22px;line-height:1.2;color:#111}.simulation-print-doc-header p{margin:0;color:#666;font-size:12px}.simulation-print-kicker{font-weight:900;color:#F58220;font-size:12px;text-transform:uppercase;letter-spacing:.35px}.simulation-print-logo{width:44px;height:44px;border-radius:12px;background:#ffbf00;color:#111;display:grid;place-items:center;font-weight:1000;font-size:16px}.sim-print-input-summary{border:1px solid #f0dfad;background:#fffaf0;border-radius:16px;padding:12px 14px;margin-bottom:14px}.sim-print-input-summary h4{margin:0 0 10px;font-size:14px}.sim-print-input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sim-print-input-item{background:#fff;border:1px solid #f2e4c5;border-radius:12px;padding:8px 10px}.sim-print-input-item span{display:block;color:#777;font-size:10px;font-weight:800;text-transform:uppercase}.sim-print-input-item strong{display:block;margin-top:3px;font-size:12px;color:#111;word-break:break-word}.simulation-print-content{box-shadow:none!important;border:0!important;padding:0!important;background:#fff!important}.simulation-print-content .sim-muted{color:#555!important}.simulation-print-content .table-wrap{overflow:visible!important}.simulation-print-content table{width:100%!important;min-width:0!important}.simulation-print-content th,.simulation-print-content td{font-size:10px!important;padding:6px 7px!important}.simulation-print-content .result-grid,.simulation-print-content .sma-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.simulation-print-content .result-card{padding:10px!important}.simulation-print-content .result-card strong{font-size:15px!important}.simulation-print-content .disclaimer{font-size:10px!important;margin-top:12px!important}
@media(max-width:760px){#simulation-print-toolbar{padding:10px 12px;gap:8px}#simulation-print-toolbar button{padding:8px 10px;font-size:12px}#simulation-print-pages{padding:12px 8px 32px}.simulation-print-page{width:100%;min-height:auto;padding:16px}.sim-print-input-grid{grid-template-columns:1fr}.simulation-print-doc-header h2{font-size:18px}}
@media print{@page{size:A4 portrait;margin:0}body.simulation-print-mode > *:not(#simulation-print-overlay){display:none!important}body.simulation-print-mode #simulation-print-overlay{display:block!important;position:static!important;inset:auto!important;overflow:visible!important;background:#fff!important}body.simulation-print-mode #simulation-print-toolbar{display:none!important}body.simulation-print-mode #simulation-print-pages{display:block!important;padding:0!important;margin:0!important}body.simulation-print-mode .simulation-print-page{width:210mm!important;min-height:297mm!important;margin:0!important;padding:12mm!important;box-shadow:none!important;border-radius:0!important;break-after:page;page-break-after:always}body.simulation-print-mode .simulation-print-page:last-child{break-after:auto;page-break-after:auto}body.simulation-print-mode *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}

/* Simulation PDF result-only print fix - 20260525 */
.simulation-print-result-only{padding:10mm!important;min-height:297mm!important;}
.simulation-print-result-only .simulation-print-content{box-shadow:none!important;border:0!important;padding:0!important;background:#fff!important;width:100%!important;max-width:100%!important;}
.simulation-print-result-only .simulation-print-doc-header,.simulation-print-result-only .sim-print-input-summary{display:none!important;}
.simulation-print-result-only h2,.simulation-print-result-only h3{font-size:17px!important;line-height:1.15!important;margin:0 0 4px!important;color:#111!important;}
.simulation-print-result-only h4{font-size:12px!important;line-height:1.15!important;margin:7px 0 5px!important;color:#111!important;}
.simulation-print-result-only p,.simulation-print-result-only .sim-muted{font-size:9.5px!important;line-height:1.25!important;margin:0 0 6px!important;color:#555!important;}
.simulation-print-result-only .result-grid,.simulation-print-result-only .sma-result-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin:0 0 6px!important;}
.simulation-print-result-only .result-card{padding:7px 8px!important;border-radius:7px!important;break-inside:avoid!important;page-break-inside:avoid!important;}
.simulation-print-result-only .result-card span{font-size:7.5px!important;line-height:1.12!important;letter-spacing:0!important;}
.simulation-print-result-only .result-card strong{font-size:12px!important;line-height:1.15!important;margin-top:2px!important;word-break:break-word!important;}
.simulation-print-result-only .sim-section-title{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:6px!important;margin:6px 0 4px!important;}
.simulation-print-result-only .table-wrap{overflow:visible!important;border-radius:6px!important;margin:0 0 5px!important;}
.simulation-print-result-only table{width:100%!important;min-width:0!important;table-layout:auto!important;border-collapse:collapse!important;}
.simulation-print-result-only th,.simulation-print-result-only td{font-size:7.2px!important;line-height:1.15!important;padding:3px 4px!important;white-space:normal!important;}
.simulation-print-result-only .disclaimer{font-size:7.8px!important;line-height:1.2!important;margin-top:6px!important;padding:6px 7px!important;border-radius:6px!important;}
.simulation-print-result-only .compare-section{margin-top:5px!important;}
@media print{
  body.simulation-print-mode .simulation-print-page.simulation-print-result-only{width:210mm!important;min-height:297mm!important;padding:10mm!important;overflow:hidden!important;}
  body.simulation-print-mode .simulation-print-result-only .simulation-print-content{transform-origin:top left!important;}
}