/* One system: ink text, white surfaces, Carisinyal blue only for the mark and actions. */
:root {
  --mainBrand: #0058c4;
  --topBrand: #0058c4;
  --topBrandRgb: 0, 88, 196;
  --popBrand: #0058c4;
  --ctaMain: #0058c4;
  --linkColor: #0058c4;
  --linkColorHeader: #0e2240;
  --introBoxLink: #0058c4;
  --introBoxText: #24364f;
  --introBoxMeta: #5c7190;
  --mainFg: #0e2240;
  --mainFgRgb: 14, 34, 64;
  --mainBg: #eef3fa;
  --mainBgRgb: 238, 243, 250;
  --borderRadius: 16px;
  --meta: #5c7190;
  --metaLight: #5c7190;
  --metaAlt: #5c7190;
  --gray50: #f7f9fc;
  --gray100: #f4f7fb;
  --gray150: #e7f0fb;
  --gray200: #e7f0fb;
  --gray250: #d7e3f2;
  --gray300: #d7e3f2;
  --gray400: #c5d4e8;
  --gray500: #5c7190;
  --gray700: #3d5270;
  --gray800: #0e2240;
  --brandLight1: #8eb4e8;
  --brandLight3: #e7f0fb;
  --brandLight4: #d7e3f2;
  --brandLight5: #d7e3f2;
  --brandLight6: #eef3fa;
  --brandLight7: #eef3fa;
  --brandLight8: #eef3fa;
  --brandLight9: #d7e3f2;
  --brandLight10: #f7f9fc;
  --brandLight11: #e7f0fb;
  --brandLight12: #e7f0fb;
  --positiveGreener: #0e3f86;
  --positiveGreenerDark: #0e3f86;
  --positiveGreenerLight: #e7f0fb;
  --positive: #0e3f86;
  --positiveLight: #e7f0fb;
}

html,
body,
#main-body,
#mainContent,
.bg-main-bg {
  background: #eef3fa !important;
  color: #0e2240;
}

#site-header {
  background: transparent !important;
  padding: 14px 0 0;
}
#site-header .bg-main-brand {
  background: #fff !important;
  color: #0e2240 !important;
  border: 1px solid #d7e3f2 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#site-header .bg-main-brand a,
#site-header .bg-main-brand button,
#site-header .bg-main-brand span {
  color: #3d5270 !important;
  font-weight: 600;
}
#site-header .bg-main-brand a[aria-current="page"],
#site-header .bg-main-brand a[aria-label="Carisinyal"] {
  color: #0e2240 !important;
}
.cs-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: min(228px, 56vw);
  border-radius: 10px;
}
#site-header input,
#site-header form {
  background: #eef3fa !important;
  color: #0e2240 !important;
  border-radius: 999px !important;
}
#site-header input::placeholder { color: #5c7190 !important; }

.ranking-only { padding-top: 22px !important; }
.ranking-title { align-items: flex-end !important; margin-bottom: 6px !important; }
.ranking-title h1 {
  color: #0e2240 !important;
  font-size: 34px !important;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.12;
}
.ranking-title h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: #0058c4;
}
.ranking-title > span {
  background: #e7f0fb;
  color: #0e3f86 !important;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px !important;
  font-weight: 700;
}
.inner-container.md_Desc,
#alternative-list ~ p,
.ranking-only .md_Desc {
  color: #24364f !important;
}
.ranking-only a { color: #0058c4; }

nav[aria-label="Panduan"] {
  margin: 8px 0 20px;
  padding-top: 18px;
  border-top: 1px solid #d7e3f2;
}
nav[aria-label="Panduan"] p {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c7190;
}
nav[aria-label="Panduan"] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ranking-only p.page-links {
  display: block;
  width: 100%;
  margin-top: 18px;
  font-weight: 700;
}

#alternative-list > .review-kicker,
#app-love678::before {
  color: #5c7190 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
#alternative-list > ol > li,
#alternative-list .border-brand-light4,
#alternative-list .bg-custom-gray50 {
  background: #fff !important;
  border: 1px solid #d7e3f2 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
#alternative-list h2 {
  color: #0e2240 !important;
  font-weight: 700;
  letter-spacing: -.03em;
}
#alternative-list h4 {
  color: #5c7190 !important;
  letter-spacing: .08em;
}
#alternative-list .md_Desc,
#alternative-list .md_Desc p {
  color: #24364f !important;
}
#app-love678 {
  outline: none;
  border-top: 3px solid #0058c4 !important;
}

/* Every tag on a card uses the same chip. */
#alternative-list ul span,
#alternative-list ul a {
  background: #e7f0fb !important;
  color: #0e3f86 !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

#alternative-list button.w-full {
  background: #0058c4 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700;
}
#alternative-list a[title="Buka situs"] button,
#alternative-list a[title="Buka situs"] button svg,
#alternative-list button.w-full svg {
  color: #fff !important;
  fill: currentColor;
}

#alternative-list .text-meta,
#alternative-list .text-meta-light,
#alternative-list [class*="text-meta"] {
  color: #5c7190 !important;
}

@media (max-width: 767px) {
  .cs-logo {
    height: 34px;
    width: auto !important;
    max-width: 148px;
  }
  #site-header a[aria-label="Carisinyal"] {
    min-width: 0;
    max-width: 156px;
  }
  #site-header [data-testid="headerLinks"] nav {
    display: none !important;
  }
  .ranking-title h1 { font-size: 26px !important; }
  #site-header { padding-top: 0; }
  #site-header .bg-main-brand {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}