:root{
  --bg:#f4f7fb;--panel:#ffffff;--text:#152033;--muted:#5e6b85;--line:#dde6f2;
  --primary:#1d4ed8;--primary-2:#60a5fa;--shadow:0 18px 50px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:linear-gradient(180deg,#f6f9fc 0%,#eef4fb 100%);color:var(--text)}
a{text-decoration:none;color:inherit}
.portal-shell{max-width:1280px;margin:0 auto;padding:32px 24px 56px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 58%,#60a5fa 100%);border-radius:28px;padding:38px;box-shadow:var(--shadow);color:#fff}
.hero__inner{display:grid;grid-template-columns:1.35fr .95fr;gap:26px;position:relative;z-index:1}
.hero__glow{position:absolute;border-radius:999px;filter:blur(12px);opacity:.18}
.hero__glow--one{width:240px;height:240px;background:#ffffff;top:-60px;right:12%}
.hero__glow--two{width:180px;height:180px;background:#bfdbfe;bottom:-40px;left:8%}
.eyebrow,.section-head__eyebrow,.app-card__code,.search-panel__label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-size:52px;line-height:1.05;margin:10px 0 12px}
.hero__lead{max-width:760px;font-size:18px;line-height:1.7;margin:0 0 22px;color:rgba(255,255,255,.9)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 22px}
.hero__actions-note{font-size:14px;line-height:1.6;color:rgba(255,255,255,.88);max-width:420px}
.button-primary--light{background:#fff;color:#1d4ed8;border-color:#fff;box-shadow:0 10px 24px rgba(15,23,42,.16)}
.button-primary--light:hover{background:#eff6ff;color:#1e40af;border-color:#dbeafe}
.hero__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.stat-card{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);padding:18px 18px 16px;border-radius:20px}
.stat-card--primary{background:rgba(255,255,255,.22)}
.stat-card__label{font-size:12px;text-transform:uppercase;letter-spacing:.14em;opacity:.84}
.stat-card__value{font-size:40px;font-weight:800;line-height:1.1;margin:8px 0}
.stat-card__hint{font-size:13px;line-height:1.5;opacity:.9}
.hero__panel{display:flex;align-items:stretch}
.search-panel{width:100%;background:rgba(255,255,255,.96);color:var(--text);border-radius:24px;padding:22px;box-shadow:0 12px 36px rgba(2,6,23,.18)}
.search-panel__label{display:block;color:#31415f;margin-bottom:12px}
.search-panel__input-wrap input{width:100%;height:50px;border:1px solid #cbd7e8;border-radius:16px;padding:0 16px;font-size:16px;outline:none}
.search-panel__input-wrap input:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.16)}
.search-panel__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.filter-chip{border:1px solid #d5e0ef;background:#fff;color:#22324f;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}
.filter-chip.is-active,.filter-chip:hover{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.search-panel__meta{margin-top:14px;color:var(--muted);font-size:14px}
.portal-main{margin-top:28px}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:20px}
.section-head h2{font-size:38px;margin:8px 0 10px}
.section-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.section-head__badge{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:999px;background:#e8f0ff;color:#1d4ed8;font-weight:700}
.app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.app-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.app-card__header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.app-card__code{color:var(--muted);margin-bottom:6px}
.app-card h3{margin:0;font-size:28px;line-height:1.2}
.app-card__count{white-space:nowrap;border-radius:999px;padding:10px 14px;background:#eef4ff;color:#2145b5;font-weight:700}
.app-card__description{margin:0;color:var(--muted);line-height:1.7}
.app-card__actions{display:flex;flex-wrap:wrap;gap:10px}
.app-card__action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:999px;font-weight:700;transition:.18s ease;border:1px solid transparent}
.app-card__action--secondary{background:var(--theme-tint);color:var(--theme-primary);border-color:color-mix(in srgb, var(--theme-primary) 18%, #dbe7f3)}
.app-card__action--secondary:hover{background:var(--theme-soft);border-color:color-mix(in srgb, var(--theme-primary) 32%, #c7d6ea);transform:translateY(-1px)}
.module-list{display:grid;gap:12px}
.module-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px 18px;border:1px solid #dce5f3;border-radius:18px;background:#fbfdff;transition:.18s ease}
.module-item:hover{transform:translateY(-1px);border-color:#93c5fd;background:#f4f9ff}
.module-item__code{font-weight:800;color:#1d4ed8}
.module-item__name{font-weight:700}
.module-item__arrow{font-size:18px;color:#1d4ed8}

.app-card.is-hidden,.module-item.is-hidden{display:none !important}
@media (max-width:1100px){.hero__inner,.app-grid{grid-template-columns:1fr}.section-head{flex-direction:column;align-items:flex-start}}
@media (max-width:768px){.portal-shell{padding:16px}.hero{padding:24px;border-radius:22px}.hero h1{font-size:36px}.section-head h2{font-size:30px}.hero__stats{grid-template-columns:1fr}}


/* === THEME TOKENS FROM DB === */
.app-card,
.module-item,
.berkah-module{
  --theme-primary:#1d4ed8;
  --theme-accent:#60a5fa;
  --theme-soft:#dbeafe;
  --theme-tint:#eff6ff;
  --theme-dark:#0f172a;
}

/* aplikasi */
.app-card--cor-app-indigo{--theme-primary:#4F46E5;--theme-accent:#818CF8;--theme-soft:#E0E7FF;--theme-tint:#EEF2FF;--theme-dark:#312E81;}
.app-card--taf-app-emerald{--theme-primary:#10B981;--theme-accent:#6EE7B7;--theme-soft:#D1FAE5;--theme-tint:#ECFDF5;--theme-dark:#065F46;}
.app-card--pos-app-rose{--theme-primary:#F43F5E;--theme-accent:#FDA4AF;--theme-soft:#FFE4E6;--theme-tint:#FFF1F2;--theme-dark:#881337;}
.app-card--pro-app-green{--theme-primary:#22C55E;--theme-accent:#86EFAC;--theme-soft:#DCFCE7;--theme-tint:#F0FDF4;--theme-dark:#166534;}
.app-card--sdm-app-blue{--theme-primary:#2563EB;--theme-accent:#93C5FD;--theme-soft:#DBEAFE;--theme-tint:#EFF6FF;--theme-dark:#1E3A8A;}
.app-card--kit-app-orange{--theme-primary:#F97316;--theme-accent:#FDBA74;--theme-soft:#FFEDD5;--theme-tint:#FFF7ED;--theme-dark:#9A3412;}
.app-card--pms-app-violet{--theme-primary:#8B5CF6;--theme-accent:#C4B5FD;--theme-soft:#EDE9FE;--theme-tint:#F5F3FF;--theme-dark:#5B21B6;}
.app-card--crm-app-magenta{--theme-primary:#DB2777;--theme-accent:#F9A8D4;--theme-soft:#FCE7F3;--theme-tint:#FDF2F8;--theme-dark:#9D174D;}
.app-card--dss-app-gold{--theme-primary:#D4AF37;--theme-accent:#FDE68A;--theme-soft:#FEF3C7;--theme-tint:#FFFBEB;--theme-dark:#92400E;}

/* modul */
.module-item--cor-01-indigo,.berkah-module--cor-01-indigo{--theme-primary:#4F46E5;--theme-accent:#818CF8;--theme-soft:#E0E7FF;--theme-tint:#EEF2FF;--theme-dark:#312E81;}
.module-item--cor-02-slate,.berkah-module--cor-02-slate{--theme-primary:#334155;--theme-accent:#64748B;--theme-soft:#E2E8F0;--theme-tint:#F8FAFC;--theme-dark:#0F172A;}
.module-item--cor-03-cyan,.berkah-module--cor-03-cyan{--theme-primary:#06B6D4;--theme-accent:#67E8F9;--theme-soft:#CFFAFE;--theme-tint:#ECFEFF;--theme-dark:#164E63;}
.module-item--cor-04-amber,.berkah-module--cor-04-amber{--theme-primary:#F59E0B;--theme-accent:#FDE68A;--theme-soft:#FEF3C7;--theme-tint:#FFFBEB;--theme-dark:#92400E;}
.module-item--taf-05-emerald,.berkah-module--taf-05-emerald{--theme-primary:#10B981;--theme-accent:#6EE7B7;--theme-soft:#D1FAE5;--theme-tint:#ECFDF5;--theme-dark:#065F46;}
.module-item--taf-06-teal,.berkah-module--taf-06-teal{--theme-primary:#14B8A6;--theme-accent:#5EEAD4;--theme-soft:#CCFBF1;--theme-tint:#F0FDFA;--theme-dark:#134E4A;}
.module-item--taf-07-lime,.berkah-module--taf-07-lime{--theme-primary:#84CC16;--theme-accent:#D9F99D;--theme-soft:#ECFCCB;--theme-tint:#F7FEE7;--theme-dark:#3F6212;}
.module-item--pos-08-rose,.berkah-module--pos-08-rose{--theme-primary:#F43F5E;--theme-accent:#FDA4AF;--theme-soft:#FFE4E6;--theme-tint:#FFF1F2;--theme-dark:#881337;}
.module-item--pos-09-fuchsia,.berkah-module--pos-09-fuchsia{--theme-primary:#D946EF;--theme-accent:#F0ABFC;--theme-soft:#FAE8FF;--theme-tint:#FDF4FF;--theme-dark:#86198F;}
.module-item--pos-10-pink,.berkah-module--pos-10-pink{--theme-primary:#EC4899;--theme-accent:#F9A8D4;--theme-soft:#FCE7F3;--theme-tint:#FDF2F8;--theme-dark:#9D174D;}
.module-item--pro-11-green,.berkah-module--pro-11-green{--theme-primary:#22C55E;--theme-accent:#86EFAC;--theme-soft:#DCFCE7;--theme-tint:#F0FDF4;--theme-dark:#166534;}
.module-item--pro-12-olive,.berkah-module--pro-12-olive{--theme-primary:#65A30D;--theme-accent:#BEF264;--theme-soft:#ECFCCB;--theme-tint:#F7FEE7;--theme-dark:#365314;}
.module-item--pro-13-mint,.berkah-module--pro-13-mint{--theme-primary:#34D399;--theme-accent:#A7F3D0;--theme-soft:#D1FAE5;--theme-tint:#ECFDF5;--theme-dark:#065F46;}
.module-item--sdm-14-sky,.berkah-module--sdm-14-sky{--theme-primary:#0EA5E9;--theme-accent:#7DD3FC;--theme-soft:#E0F2FE;--theme-tint:#F0F9FF;--theme-dark:#0C4A6E;}
.module-item--sdm-15-blue,.berkah-module--sdm-15-blue{--theme-primary:#2563EB;--theme-accent:#93C5FD;--theme-soft:#DBEAFE;--theme-tint:#EFF6FF;--theme-dark:#1E3A8A;}
.module-item--sdm-16-navy,.berkah-module--sdm-16-navy{--theme-primary:#1E3A8A;--theme-accent:#60A5FA;--theme-soft:#DBEAFE;--theme-tint:#EFF6FF;--theme-dark:#172554;}
.module-item--kit-17-orange,.berkah-module--kit-17-orange{--theme-primary:#F97316;--theme-accent:#FDBA74;--theme-soft:#FFEDD5;--theme-tint:#FFF7ED;--theme-dark:#9A3412;}
.module-item--kit-18-coral,.berkah-module--kit-18-coral{--theme-primary:#FF7F50;--theme-accent:#FFDAB9;--theme-soft:#FFE4D6;--theme-tint:#FFF4EE;--theme-dark:#9A3412;}
.module-item--kit-19-red,.berkah-module--kit-19-red{--theme-primary:#DC2626;--theme-accent:#FCA5A5;--theme-soft:#FEE2E2;--theme-tint:#FEF2F2;--theme-dark:#7F1D1D;}
.module-item--pms-20-violet,.berkah-module--pms-20-violet{--theme-primary:#8B5CF6;--theme-accent:#C4B5FD;--theme-soft:#EDE9FE;--theme-tint:#F5F3FF;--theme-dark:#5B21B6;}
.module-item--pms-21-purple,.berkah-module--pms-21-purple{--theme-primary:#9333EA;--theme-accent:#E9D5FF;--theme-soft:#F3E8FF;--theme-tint:#FAF5FF;--theme-dark:#6B21A8;}
.module-item--pms-22-plum,.berkah-module--pms-22-plum{--theme-primary:#7C2D12;--theme-accent:#FDE68A;--theme-soft:#FFEDD5;--theme-tint:#FFF7ED;--theme-dark:#431407;}
.module-item--crm-23-magenta,.berkah-module--crm-23-magenta{--theme-primary:#DB2777;--theme-accent:#F9A8D4;--theme-soft:#FCE7F3;--theme-tint:#FDF2F8;--theme-dark:#9D174D;}
.module-item--crm-24-berry,.berkah-module--crm-24-berry{--theme-primary:#9D174D;--theme-accent:#F472B6;--theme-soft:#FCE7F3;--theme-tint:#FDF2F8;--theme-dark:#831843;}
.module-item--crm-25-maroon,.berkah-module--crm-25-maroon{--theme-primary:#7F1D1D;--theme-accent:#FCA5A5;--theme-soft:#FEE2E2;--theme-tint:#FEF2F2;--theme-dark:#450A0A;}
.module-item--dss-26-gold,.berkah-module--dss-26-gold{--theme-primary:#D4AF37;--theme-accent:#FDE68A;--theme-soft:#FEF3C7;--theme-tint:#FFFBEB;--theme-dark:#92400E;}
.module-item--dss-27-charcoal,.berkah-module--dss-27-charcoal{--theme-primary:#1F2937;--theme-accent:#6B7280;--theme-soft:#E5E7EB;--theme-tint:#F9FAFB;--theme-dark:#111827;}


.app-card{
  border-top:5px solid var(--theme-primary);
}
.app-card__count{
  background:var(--theme-tint);
  color:var(--theme-primary);
}
.module-item{
  border-left:4px solid var(--theme-primary);
}
.module-item__code,
.module-item__arrow{
  color:var(--theme-primary);
}
.module-item:hover{
  border-color:color-mix(in srgb, var(--theme-primary) 35%, #93c5fd);
  background:linear-gradient(135deg, var(--theme-tint), #ffffff);
}



.portal-personal{margin-bottom:28px}
.card-surface,.workspace-card,.summary-card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}
.portal-personal__hero{padding:24px 26px;margin-bottom:18px}
.portal-personal__eyebrow,.workspace-card__eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5b6c89;margin-bottom:8px}
.portal-personal__headline{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.portal-personal__headline h2{margin:0 0 8px;font-size:30px;line-height:1.2;color:#152033}
.portal-personal__headline p{margin:0;color:#5e6b85;line-height:1.7}
.portal-personal__meta-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.portal-personal__meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.portal-personal__actions{display:flex;justify-content:flex-end}
.meta-pill{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:#e8f0ff;color:#1d4ed8;font-weight:700}
.meta-pill--muted{background:#f1f5f9;color:#42526b}
.portal-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.summary-card{padding:18px 18px 16px;position:relative;overflow:hidden}
.summary-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--summary-accent,#1d4ed8)}
.summary-card--indigo{--summary-accent:#4f46e5}.summary-card--emerald{--summary-accent:#10b981}.summary-card--sky{--summary-accent:#0ea5e9}.summary-card--amber{--summary-accent:#f59e0b}
.summary-card__label{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#64748b;font-weight:700}
.summary-card__value{font-size:34px;font-weight:800;line-height:1.1;color:#152033;margin:8px 0}
.summary-card__text{font-size:14px;line-height:1.6;color:#5e6b85}
.portal-workspace{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.workspace-card{padding:22px}
.workspace-card--main{min-height:100%}
.workspace-card__head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.workspace-card__head h3{margin:0;font-size:24px;line-height:1.25;color:#152033}
.workspace-card__badge{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:#eef4ff;color:#2145b5;font-weight:700}
.quick-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.quick-access-item{border:1px solid #dce5f3;border-radius:22px;padding:18px;background:#fbfdff;display:flex;flex-direction:column;gap:10px}
.quick-access-item__top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.quick-access-item__code{font-weight:800;color:var(--theme-primary,#1d4ed8)}
.quick-access-item__app{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;background:var(--theme-tint,#eef4ff);color:var(--theme-primary,#1d4ed8);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.quick-access-item h4{margin:0;font-size:20px;line-height:1.25;color:#152033}
.quick-access-item p{margin:0;color:#5e6b85;line-height:1.7;font-size:14px}
.quick-access-item__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.quick-access-item__actions a,.button-primary,.button-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:12px;font-weight:700}
.quick-access-item__actions a,.button-secondary{background:#f8fbff;border:1px solid #dce5f3;color:#2145b5}
.button-primary{background:#1d4ed8;color:#fff;border:1px solid #1d4ed8}
.workspace-stack{display:grid;gap:18px}
.continue-module__code{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#64748b;margin-bottom:6px}
.continue-module h4{margin:0 0 10px;font-size:24px;line-height:1.2;color:#152033}
.continue-module p{margin:0;color:#5e6b85;line-height:1.7}
.continue-module__meta{display:grid;gap:10px;margin-top:14px;padding:14px 16px;border:1px solid #dce5f3;border-radius:18px;background:#f8fbff}
.continue-module__meta-item{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.continue-module__meta-item strong{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.continue-module__meta-item span{font-weight:700;color:#152033;text-align:right}
.continue-module__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.attention-list{display:grid;gap:12px}
.attention-item{border:1px solid #dde6f2;border-radius:18px;padding:16px;background:#fcfdff}
.attention-item h4{margin:0 0 8px;font-size:17px;color:#152033}
.attention-item p{margin:0;color:#5e6b85;line-height:1.6;font-size:14px}
.attention-item--info{background:#f8fbff;border-color:#dbeafe}
.workspace-empty{border:1px dashed #cbd7e8;border-radius:18px;padding:18px;background:#f8fbff}
.workspace-empty h4{margin:0 0 8px;font-size:18px;color:#152033}
.workspace-empty p{margin:0;color:#5e6b85;line-height:1.6}
.workspace-empty--compact{padding:16px}
@media (max-width:1100px){.portal-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-workspace,.quick-access-grid{grid-template-columns:1fr}.portal-personal__headline{flex-direction:column}.portal-personal__meta-wrap{align-items:flex-start}.portal-personal__meta,.portal-personal__actions{justify-content:flex-start}}
@media (max-width:768px){.portal-personal__hero,.workspace-card{padding:18px}.portal-personal__headline h2{font-size:24px}.summary-card__value{font-size:28px}.workspace-card__head h3{font-size:20px}.quick-access-item h4,.continue-module h4{font-size:20px}}

.workspace-card--favorites{grid-column:1/-1}
.quick-access-grid--favorites{grid-template-columns:repeat(3,minmax(0,1fr))}
.quick-access-item--favorite{background:linear-gradient(180deg,#fffdf6 0%,#fff9e8 100%);border-color:#f2df9b}
.quick-access-item__pin{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#fff2c2;color:#8a5a00;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.quick-access-item__actions form{display:inline-flex}
.quick-access-item__actions button{cursor:pointer}
.quick-access-item__actions button.button-secondary{appearance:none;-webkit-appearance:none;box-sizing:border-box;font:inherit;line-height:1;border:1px solid #dce5f3;background:#f8fbff;color:#2145b5;white-space:nowrap;margin:0;text-decoration:none;vertical-align:middle;min-height:40px;padding:0 14px;border-radius:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.quick-access-item__actions button.button-secondary:hover{background:#edf4ff;border-color:#b8ccec;}
.quick-access-item__actions button.button-secondary:focus-visible{outline:2px solid rgba(66,133,244,.28);outline-offset:2px;}

@media (max-width:1280px){.quick-access-grid--favorites{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.workspace-card--favorites{grid-column:auto}.quick-access-grid--favorites{grid-template-columns:1fr}}