/* BERTUKANG APP DESIGN SYSTEM v2
   Based on Logo Option B: shield + spray bottle lowercase b + brush + pruning shears + wrench
   Theme: Bertubi corporate green to dark blue gradient
*/
:root{
  --bk-navy:#1a2744;
  --bk-navy-dark:#111b33;
  --bk-navy-mid:#243358;
  --bk-navy-light:#2f4270;
  --bk-teal:#1e7a5e;
  --bk-teal-mid:#2a9970;
  --bk-teal-light:#4db890;
  --bk-mint-bg:#e6f4ef;
  --bk-silver:#b0bec5;
  --bk-bg:#f4f6f9;
  --bk-card:#ffffff;
  --bk-border:#dde4ed;
  --bk-text:#1a2744;
  --bk-muted:#8a9ab0;
  --bk-radius:14px;
  --bk-shadow:0 8px 28px rgba(26,39,68,.12);
  --bk-font:'Barlow',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bk-font-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --bk-grad-brand:linear-gradient(150deg,#4db890 0%,#1e7a5e 38%,#1a2744 100%);
  --bk-grad-hero:linear-gradient(160deg,#111b33 0%,#1a2744 52%,#1e7a5e 100%);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--bk-font);background:var(--bk-bg);color:var(--bk-text)}
.bk-app-shell{min-height:100dvh;background:var(--bk-bg);padding-bottom:72px}
.bk-header{position:sticky;top:0;z-index:50;background:var(--bk-grad-hero);color:#fff;padding:14px 16px;box-shadow:var(--bk-shadow)}
.bk-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em}
.bk-brand img{width:38px;height:38px;border-radius:10px}
.bk-brand-title{font-family:var(--bk-font-display);font-size:24px;line-height:1}
.bk-brand-sub{font-size:11px;color:var(--bk-teal-light);letter-spacing:.08em}
.bk-card{background:var(--bk-card);border:1px solid var(--bk-border);border-radius:var(--bk-radius);box-shadow:0 2px 10px rgba(26,39,68,.08);padding:16px}
.bk-section-title{font-family:var(--bk-font-display);font-size:22px;font-weight:800;letter-spacing:.02em;margin:0 0 10px}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font-weight:800;text-decoration:none;cursor:pointer}
.bk-btn-primary{background:var(--bk-navy);color:#fff}
.bk-btn-teal{background:linear-gradient(135deg,var(--bk-teal),var(--bk-teal-light));color:#fff}
.bk-btn-soft{background:var(--bk-mint-bg);color:var(--bk-teal);border:1px solid #9fdeca}
.bk-input{width:100%;border:1px solid var(--bk-border);border-radius:12px;padding:12px 14px;font:inherit;background:#fff;color:var(--bk-text)}
.bk-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:66px;background:#fff;border-top:1px solid var(--bk-border);display:flex;justify-content:space-around;align-items:center;box-shadow:0 -8px 24px rgba(26,39,68,.08);z-index:60}
.bk-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--bk-muted);text-decoration:none}
.bk-nav-item.active{color:var(--bk-teal)}
.bk-badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800}
.bk-badge-teal{background:var(--bk-mint-bg);color:var(--bk-teal)}
.bk-splash{min-height:100dvh;display:grid;place-items:center;background:var(--bk-grad-hero);color:#fff;text-align:center}
.bk-splash-logo{width:42vw;max-width:220px;border-radius:24px}
@media (prefers-color-scheme: dark){
  :root{--bk-bg:#0d1526;--bk-card:#111b33;--bk-border:#243358;--bk-text:#e8ecf4;--bk-muted:#9aabc2}
  .bk-bottom-nav{background:#111b33}
  .bk-input{background:#111b33;color:#e8ecf4}
}


/* =============================================================
   BERTUKANG PREMIUM NAMECARD THEME v4
   Source: revised from app direction board, simplified premium icon system,
   and Bertubi green-wave corporate namecard theme.
   ============================================================= */
:root {
  --bk-premium-navy: #0E1D36;
  --bk-premium-green: #148A6E;
  --bk-premium-green-2: #1E9A78;
  --bk-premium-soft-green: #EAF7F1;
  --bk-premium-light: #F5F7FA;
  --bk-premium-white: #fff;
  --bk-premium-border: #DDE6E3;
  --bk-premium-text: #0E1D36;
  --bk-premium-muted: #637381;
  --bk-premium-shadow: 0 12px 30px rgba(14,29,54,.10);
  --bk-premium-radius: 20px;
  --bk-premium-wave: linear-gradient(135deg, #148A6E 0%, #1E9A78 100%);
}
.bk-premium-page { background: linear-gradient(180deg,#fff 0%,#f6faf8 100%); color: var(--bk-premium-text); }
.bk-wave-header { position:relative; overflow:hidden; background:#fff; border-radius:0 0 28px 28px; padding:22px 18px 34px; box-shadow:0 4px 18px rgba(14,29,54,.06); }
.bk-wave-header::after { content:""; position:absolute; right:-18%; top:-86px; width:72%; height:180px; background:var(--bk-premium-wave); border-radius:0 0 0 100%; transform:rotate(-5deg); opacity:.98; }
.bk-wave-header::before { content:""; position:absolute; right:0; top:52px; width:56%; height:2px; background:#b6d88c; border-radius:999px; transform:rotate(-8deg); z-index:1; opacity:.75; }
.bk-premium-card { background:#fff; border:1px solid var(--bk-premium-border); border-radius:var(--bk-premium-radius); box-shadow:var(--bk-premium-shadow); }
.bk-premium-service-card { background:#fff; border:1px solid var(--bk-premium-border); border-radius:18px; padding:14px 10px; text-align:center; box-shadow:0 8px 20px rgba(14,29,54,.07); transition:.18s ease; }
.bk-premium-service-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(14,29,54,.12); border-color:#b7d9ce; }
.bk-premium-service-card img { width:56px; height:56px; object-fit:contain; display:block; margin:0 auto 8px; }
.bk-premium-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:14px; border:0; background:linear-gradient(135deg,#148A6E 0%, #1E9A78 100%); color:#fff; font-weight:800; text-decoration:none; box-shadow:0 10px 22px rgba(20,138,110,.24); }
.bk-premium-btn-outline { background:#fff; color:#148A6E; border:1.5px solid #148A6E; box-shadow:none; }
.bk-premium-search { height:46px; border:1px solid var(--bk-premium-border); border-radius:16px; background:#fff; padding:0 14px; display:flex; align-items:center; gap:10px; box-shadow:0 5px 14px rgba(14,29,54,.05); }
.bk-premium-bottom-nav { background:#fff; border-top:1px solid var(--bk-premium-border); box-shadow:0 -10px 24px rgba(14,29,54,.07); }
.bk-premium-bottom-nav .active, .bk-premium-active { color:#148A6E; }