:root {
  --primary: #008556;
  --primary2: #12a7a4;
  --success: #22b96b;
  --danger: #e94545;
  --warning: #f2b544;
  --dark: #063b2e;
  --muted: #60786e;
  --soft: #f2fbf6;
  --border: rgba(0, 132, 80, .13);
  --shadow: 0 24px 70px rgba(6, 59, 46, .12);
  --radius: 28px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--dark);
  background: #fff;
  overflow-x: hidden
}

a {
  text-decoration: none
}

.fw-800 {
  font-weight: 800
}

.text-white-75 {
  color: rgba(255, 255, 255, .75)
}

.top-strip {
  background: linear-gradient(90deg, #063b2e, #08755b)
}

.top-link {
  color: rgba(255, 255, 255, .75)
}

.top-link:hover {
  color: #fff
}

.navbar-glass {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(0, 132, 80, .08);
  transition: .25s ease
}

.navbar-glass.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 50px rgba(6, 59, 46, .08)
}

.brand-mark {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 34px rgba(6, 59, 46, .10);
  overflow: hidden
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.brand-copy {
  line-height: 1.1
}

.brand-copy strong,
.footer-brand strong {
  display: block;
  font-size: 1rem;
  color: var(--dark)
}

.footer-brand strong {
  color: #fff
}

.brand-copy small,
.footer-brand small {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em
}

.footer-brand small {
  color: rgba(255, 255, 255, .65)
}

.nav-link {
  font-weight: 750;
  color: #143b31 !important;
  padding: .72rem .95rem !important;
  border-radius: 999px
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary) !important;
  background: rgba(0, 133, 86, .08)
}

.dropdown-item {
  font-weight: 700;
  border-radius: 14px;
  padding: .72rem .95rem
}

.dropdown-item:hover {
  background: rgba(0, 133, 86, .08);
  color: var(--primary)
}

.btn {
  --bs-btn-font-weight: 750
}

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #006d47;
  --bs-btn-hover-border-color: #006d47;
  box-shadow: 0 15px 35px rgba(0, 133, 86, .22)
}

.btn-success-soft {
  background: rgba(19, 165, 106, .12);
  color: #087348
}

.btn-success-soft:hover {
  background: rgba(19, 165, 106, .18);
  color: #064f33
}

.hero-home {
  background: radial-gradient(circle at 90% 10%, rgba(18, 167, 164, .18), transparent 34%), radial-gradient(circle at 14% 12%, rgba(0, 133, 86, .16), transparent 34%), linear-gradient(180deg, #f5fffa 0%, #fff 100%)
}

.min-vh-90 {
  min-height: calc(100vh - 90px)
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(3px);
  opacity: .6
}

.orb-a {
  width: 420px;
  height: 420px;
  background: rgba(18, 167, 164, .12);
  right: -120px;
  top: 80px
}

.orb-b {
  width: 320px;
  height: 320px;
  background: rgba(0, 133, 86, .10);
  left: -120px;
  top: 160px
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 133, 86, .15);
  background: rgba(0, 133, 86, .08);
  color: var(--primary);
  font-weight: 800;
  font-size: .82rem;
  border-radius: 999px;
  padding: .52rem .9rem;
  letter-spacing: .02em
}

.eyebrow.soft {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  color: #fff
}

.gradient-text {
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.stat-card {
  padding: 1.2rem;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(6, 59, 46, .08)
}

.stat-card strong {
  display: block;
  font-size: 1.35rem
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: .88rem
}

.hero-dashboard {
  position: relative;
  max-width: 620px;
  margin: auto;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow);
  border-radius: 38px;
  padding: 2rem;
  backdrop-filter: blur(18px)
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem
}

.pulse-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 10px rgba(19, 165, 106, .13);
  display: inline-block
}

.service-stack {
  display: grid;
  gap: 1rem
}

.service-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--dark);
  transition: .25s ease
}

.service-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 45px rgba(6, 59, 46, .10);
  color: var(--dark)
}

.service-row>span {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.4rem
}

.service-row.danger>span {
  background: var(--danger)
}

.service-row.primary>span {
  background: var(--primary)
}

.service-row.success>span {
  background: var(--success)
}

.service-row div {
  flex: 1
}

.service-row small {
  display: block;
  color: var(--muted);
  line-height: 1.35
}

.floating-mini {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(6, 59, 46, .11);
  border-radius: 999px;
  padding: .8rem 1rem;
  font-weight: 800;
  display: flex;
  gap: .6rem;
  align-items: center
}

.floating-mini.one {
  left: -88px;
  top: 25%
}

.floating-mini.two {
  right: -25px;
  bottom: 16%
}

.floating-mini i {
  color: var(--primary)
}

.section-pad {
  padding: 92px 0
}

.pull-up {
  margin-top: -60px;
  position: relative;
  z-index: 2
}

.bg-soft {
  background: var(--soft)
}

.quick-card {
  position: relative;
  display: block;
  padding: 1.55rem;
  border-radius: 28px;
  background: #fff;
  color: var(--dark);
  border: 1px solid var(--border);
  box-shadow: 0 18px 55px rgba(6, 59, 46, .09);
  transition: .25s ease;
  overflow: hidden
}

.quick-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 70px rgba(6, 59, 46, .14);
  color: var(--dark)
}

.quick-icon,
.service-icon,
.facility-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff
}

.quick-icon.danger {
  background: linear-gradient(135deg, var(--danger), #ff7a66)
}

.quick-icon.success {
  background: linear-gradient(135deg, var(--success), #2ed392)
}

.quick-icon.warning {
  background: linear-gradient(135deg, var(--warning), #ffd166)
}

.quick-card p,
.facility-card p,
.feature-card p,
.service-card p,
.special-card p,
.news-card p {
  color: var(--muted);
  margin-bottom: 0
}

.quick-arrow {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  color: var(--primary)
}

.announcement-card,
.doctor-cta,
.cta-band,
.document-hero {
  border-radius: 34px;
  padding: 2rem;
  background: linear-gradient(135deg, #008556, #12a7a4);
  color: #fff;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem
}

.announcement-card .text-muted,
.doctor-cta .text-muted,
.cta-band .text-muted,
.document-hero .text-muted {
  color: rgba(255, 255, 255, .76) !important
}

.section-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem
}

.section-heading h2 {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: .9rem 0
}

.section-heading p {
  color: var(--muted);
  font-size: 1.05rem
}

.feature-card,
.facility-card,
.service-card,
.profile-card,
.service-detail-card,
.special-card,
.support-card,
.news-card,
.doctor-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 1.5rem;
  box-shadow: 0 16px 50px rgba(6, 59, 46, .07);
  transition: .25s ease
}

.feature-card:hover,
.facility-card:hover,
.service-card:hover,
.profile-card:hover,
.doctor-card:hover,
.special-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow)
}

.feature-card h5,
.facility-card h5,
.news-card h5 {
  font-weight: 800
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.1rem
}

.chip,
.clinic-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: .43rem .72rem;
  font-size: .78rem;
  font-weight: 800;
  background: rgba(0, 133, 86, .08);
  color: var(--primary)
}

.clinic-pill {
  font-size: .88rem;
  padding: .65rem .95rem
}

.clinic-pill.primary {
  background: rgba(19, 165, 106, .12);
  color: #087348
}

.pill-cloud {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap
}

.swiper {
  padding: .4rem .4rem 3rem
}

.page-hero {
  padding: 78px 0;
  background: radial-gradient(circle at 85% 10%, rgba(18, 167, 164, .18), transparent 34%), linear-gradient(180deg, #f5fffa, #fff)
}

.hero-contact-card {
  border-radius: 30px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1.6rem;
  display: grid;
  gap: .45rem;
  position: relative
}

.hero-contact-card i {
  font-size: 2.2rem;
  color: var(--primary)
}

.hero-contact-card small {
  color: var(--muted);
  font-weight: 700
}

.hero-contact-card strong {
  font-size: 1.2rem
}

.clean-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .65rem
}

.clean-list li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  color: #35544b
}

.clean-list i {
  color: var(--success);
  margin-top: .1rem
}

.service-detail-card h6 {
  font-weight: 800;
  margin-top: 1rem
}

.service-detail-card h3,
.support-card h3,
.service-card h4,
.special-card h4 {
  font-weight: 800;
  margin-bottom: 1rem
}

.special-card i {
  font-size: 2.1rem;
  color: var(--primary);
  margin-bottom: 1rem;
  display: inline-block
}

.modern-alert {
  border: 1px solid rgba(0, 133, 86, .14);
  background: rgba(0, 133, 86, .08);
  border-radius: 22px;
  color: #075a45
}

.standard-item {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 22px;
  padding: 1rem;
  display: flex;
  gap: .8rem;
  align-items: center;
  font-weight: 800;
  box-shadow: 0 10px 35px rgba(6, 59, 46, .05)
}

.standard-item i {
  color: var(--primary);
  font-size: 1.4rem
}

.doc-preview {
  display: block;
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  padding: 1rem
}

.doc-preview img {
  width: 100%;
  border-radius: 24px;
  display: block
}

.doc-preview span {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  background: rgba(6, 59, 46, .78);
  color: #fff;
  border-radius: 999px;
  padding: .72rem 1rem;
  font-weight: 800;
  backdrop-filter: blur(10px)
}

.commitment-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem
}

.commitment-list div {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-weight: 700
}

.commitment-list i {
  color: var(--success)
}

.glass-info-card {
  border-radius: 34px;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(0, 133, 86, .11), rgba(18, 167, 164, .11));
  border: 1px solid var(--border);
  display: grid;
  gap: .6rem
}

.glass-info-card i {
  font-size: 3rem;
  color: var(--primary)
}

.glass-info-card strong {
  font-size: 1.4rem
}

.glass-info-card span {
  color: var(--muted)
}


.avatar-gradient,
.doctor-avatar {
    width: 130px;
    height: 130px;
    border-radius: 22px;
    overflow: hidden; /* Penting */
    background: linear-gradient(135deg, var(--primary), var(--primary2));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.avatar-gradient img,
.doctor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.doctor-avatar {
  margin-bottom: 0;
  flex: 0 0 auto
}
.doctor-schedule{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.doctor-schedule .badge{
    padding:6px 10px;
    border-radius:20px;
    font-size:.8rem;
}
.profile-card h5 {
  font-weight: 800
}

.profile-card p {
  color: var(--muted);
  min-height: 48px
}

.filter-panel,
.doctor-toolbar {
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 16px 50px rgba(6, 59, 46, .07);
  border-radius: 30px;
  padding: 1.25rem;
  margin-bottom: 1.5rem
}

.doctor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}

.input-icon {
  position: relative
}

.input-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  z-index: 2
}

.input-icon .form-control {
  padding-left: 3rem;
  border-radius: 18px
}

.form-select-lg {
  border-radius: 18px
}

.schedule-line {
  display: flex;
  gap: .65rem;
  color: #35544b;
  margin: .45rem 0
}

.schedule-line i {
  color: var(--primary)
}

.empty-state {
  text-align: center;
  padding: 4rem 0;
  color: var(--muted)
}

.empty-state i {
  font-size: 3rem;
  color: var(--primary)
}

.news-date {
  font-size: .86rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem
}

.read-link {
  font-weight: 800;
  color: var(--primary);
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  margin-top: 1rem
}

.ppid-card {
  display: block;
  text-align: center;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.3rem;
  color: var(--dark);
  box-shadow: 0 16px 50px rgba(6, 59, 46, .07);
  transition: .25s ease
}

.ppid-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  color: var(--dark)
}

.ppid-card small {
  display: block;
  color: var(--muted);
  font-weight: 800
}

.ppid-card strong {
  display: block;
  font-size: 2rem
}

.footer-main {
  padding: 70px 0 30px;
  background: #063b2e;
  color: #fff
}

.footer-main:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(18, 167, 164, .14);
  right: -150px;
  top: -150px
}

.footer-logo {
  background: #fff
}

.footer-title {
  font-weight: 800;
  margin-bottom: 1rem
}

.footer-main a:not(.social-btn) {
  display: block;
  color: rgba(255, 255, 255, .70);
  margin: .55rem 0
}

.footer-main a:hover {
  color: #fff
}

.social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .10);
  color: #fff
}

.contact-line {
  display: flex;
  gap: .7rem;
  color: rgba(255, 255, 255, .72);
  margin: .7rem 0
}

.contact-line i {
  color: #72e2c1
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55);
  font-size: .9rem
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0, 133, 86, .35);
  display: none;
  z-index: 999
}

.back-to-top.show {
  display: grid;
  place-items: center
}

@media (max-width:991px) {

  .announcement-card,
  .doctor-cta,
  .cta-band,
  .document-hero,
  .doctor-toolbar {
    display: block
  }

  .announcement-card .btn,
  .doctor-cta .btn,
  .cta-band .btn,
  .document-hero .btn,
  .doctor-toolbar .btn {
    margin-top: 1rem
  }

  .floating-mini {
    display: none
  }

  .section-pad {
    padding: 70px 0
  }

  .pull-up {
    margin-top: 0
  }

  .brand-mark {
    width: 54px;
    height: 54px
  }

  .hero-dashboard {
    padding: 1.3rem;
    border-radius: 30px
  }
}

@media (max-width:575px) {
  .display-4 {
    font-size: 2.6rem
  }

  .quick-card,
  .feature-card,
  .facility-card,
  .service-card,
  .profile-card,
  .service-detail-card,
  .special-card,
  .support-card,
  .news-card,
  .doctor-card {
    border-radius: 24px
  }

  .top-strip {
    display: none !important
  }
}


/* Blog & Media Center */
.blog-hero {
  background: radial-gradient(circle at 10% 10%, rgba(0, 133, 86, .16), transparent 30%), radial-gradient(circle at 85% 12%, rgba(19, 165, 106, .16), transparent 32%), linear-gradient(180deg, #f5fffa, #fff)
}

.blog-spotlight {
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .68));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 2rem;
  position: relative;
  overflow: hidden
}

.blog-spotlight:before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(0, 133, 86, .12);
  right: -80px;
  top: -80px
}

.blog-spotlight h3 {
  font-weight: 800;
  margin: 1rem 0
}

.blog-spotlight p {
  color: var(--muted);
  position: relative
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 1.5rem;
  position: relative
}

.spotlight-grid div {
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 1rem;
  text-align: center
}

.spotlight-grid strong {
  display: block;
  font-size: 1.55rem;
  color: var(--primary)
}

.spotlight-grid small {
  color: var(--muted);
  font-weight: 800
}

.blog-filter-panel {
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 16px 50px rgba(6, 59, 46, .07);
  border-radius: 30px;
  padding: 1.25rem;
  margin-bottom: 1.5rem
}

.blog-filter-buttons {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content-lg-end
}

.blog-filter-buttons button {
  border: 0;
  border-radius: 999px;
  padding: .72rem 1rem;
  font-weight: 800;
  background: rgba(0, 133, 86, .08);
  color: #075a45
}

.blog-filter-buttons button.active,
.blog-filter-buttons button:hover {
  background: var(--primary);
  color: #fff
}

.blog-card {
  padding: 0;
  overflow: hidden
}

.blog-card h5,
.blog-slide-card h5 {
  padding: 0 1.35rem
}

.blog-card p,
.blog-slide-card p {
  padding: 0 1.35rem
}

.blog-card .chip-row {
  padding: 0 1.35rem
}

.blog-card .read-link {
  margin: 1.2rem 1.35rem 1.35rem
}

.blog-cover {
  min-height: 210px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  position: relative;
  overflow: hidden
}

.blog-cover:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  right: -70px;
  top: -70px
}

.blog-cover i {
  font-size: 3rem;
  position: relative
}

.blog-cover span {
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
  position: relative
}

.cover-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary2))
}

.cover-success {
  background: linear-gradient(135deg, var(--success), #2ed392)
}

.cover-danger {
  background: linear-gradient(135deg, var(--danger), #ff8b7b)
}

.cover-warning {
  background: linear-gradient(135deg, #f59e0b, #ffd166)
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  padding: 0 1.35rem;
  margin-bottom: .8rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800
}

.blog-meta span {
  display: inline-flex;
  gap: .4rem;
  align-items: center
}

.blog-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 1.35rem .8rem
}

.blog-badge.primary {
  background: rgba(0, 133, 86, .1);
  color: var(--primary)
}

.blog-badge.success {
  background: rgba(19, 165, 106, .12);
  color: #087348
}

.blog-badge.warning {
  background: rgba(245, 158, 11, .14);
  color: #9a5b00
}

.blog-slide-card {
  min-height: 100%
}

.blog-slide-card .blog-cover {
  min-height: 240px
}

.article-hero {
  padding: 70px 0 30px;
  background: radial-gradient(circle at 90% 12%, rgba(18, 167, 164, .18), transparent 35%), linear-gradient(180deg, #f5fffa, #fff)
}

.breadcrumb-modern {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 800
}

.breadcrumb-modern a {
  color: var(--primary)
}

.article-hero-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow);
  border-radius: 38px;
  padding: 1.5rem;
  backdrop-filter: blur(18px)
}

.article-hero-card .blog-cover {
  border-radius: 30px;
  min-height: 360px
}

.article-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  display: inline-block
}

.author-mini {
  display: flex;
  align-items: center;
  gap: 1rem
}

.author-mini small {
  display: block;
  color: var(--muted);
  font-weight: 700
}

.article-body-card {
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 16px 50px rgba(6, 59, 46, .07);
  border-radius: 34px;
  padding: 2rem
}

.article-body {
  font-size: 1.08rem;
  line-height: 1.9;
  color: #35544b
}

.article-body p {
  margin-bottom: 1.3rem
}

.article-body h3 {
  font-weight: 800;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--dark)
}

.article-callout {
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(0, 133, 86, .09), rgba(19, 165, 106, .09));
  border: 1px solid var(--border);
  padding: 1.4rem;
  margin: 2rem 0
}

.article-callout h5 {
  font-weight: 800
}

.article-callout ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem
}

.article-callout li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-weight: 700
}

.article-callout i {
  color: var(--success);
  margin-top: .2rem
}

.article-actions {
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
  margin-top: 1.6rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap
}

.article-sidebar {
  top: 110px;
  display: grid;
  gap: 1rem
}

.sidebar-box {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 16px 50px rgba(6, 59, 46, .07);
  border-radius: 28px;
  padding: 1.25rem
}

.sidebar-box h5 {
  font-weight: 800;
  margin-bottom: 1rem
}

.sidebar-box a {
  display: block;
  color: var(--primary);
  font-weight: 800;
  margin: .65rem 0
}

.quick-info-line {
  display: flex;
  gap: .65rem;
  color: #35544b;
  margin: .8rem 0;
  font-weight: 700
}

.quick-info-line i {
  color: var(--primary)
}

.source-box p {
  line-height: 1.55
}

@media(max-width:991px) {
  .spotlight-grid {
    grid-template-columns: 1fr
  }

  .article-hero-card .blog-cover {
    min-height: 260px
  }

  .article-body-card {
    padding: 1.25rem
  }

  .article-body {
    font-size: 1rem
  }

  .blog-filter-buttons {
    justify-content: flex-start
  }

  .blog-badge {
    margin-left: 1.1rem
  }

  .blog-meta,
  .blog-card h5,
  .blog-card p,
  .blog-card .chip-row {
    padding-left: 1.1rem;
    padding-right: 1.1rem
  }

  .blog-card .read-link {
    margin-left: 1.1rem;
    margin-right: 1.1rem
  }
}



/* ==============================
   Logo Color Refresh — RSUD Pandan Arang 2026
   Palette diambil dari logo: hijau rumah sakit, emerald, teal, dan soft medical green.
   ============================== */
:root {
  --brand-green: #008556;
  --brand-emerald: #22b96b;
  --brand-teal: #12a7a4;
  --brand-dark: #063b2e;
  --brand-soft: #f2fbf6;
  --brand-mint: #e9fff4;
  --bs-primary: var(--brand-green);
  --bs-success: var(--brand-emerald);
}

body {
  background:
    radial-gradient(circle at 0 0, rgba(34, 185, 107, .08), transparent 320px),
    radial-gradient(circle at 100% 100%, rgba(18, 167, 164, .08), transparent 360px),
    #fff;
}

.top-strip {
  background: linear-gradient(90deg, var(--brand-dark), #08755b 55%, var(--brand-teal));
}

.navbar-glass {
  background: rgba(255, 255, 255, .90);
  border-bottom: 1px solid rgba(0, 132, 80, .12);
}

.brand-mark {
  border-radius: 18px;
  border: 1px solid rgba(0, 132, 80, .14);
  box-shadow: 0 14px 38px rgba(0, 133, 86, .16);
}

.brand-mark img {
  padding: 7px;
}

.footer-logo img {
  padding: 7px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--brand-green) !important;
  background: rgba(0, 133, 86, .10);
}

.dropdown-item:hover {
  background: rgba(0, 133, 86, .10);
  color: var(--brand-green);
}

.btn-primary {
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: #006d47;
  --bs-btn-hover-border-color: #006d47;
  box-shadow: 0 16px 42px rgba(0, 133, 86, .24);
}

.btn-outline-dark {
  --bs-btn-color: var(--brand-dark);
  --bs-btn-border-color: rgba(6, 59, 46, .28);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
}

.btn-success-soft {
  background: rgba(34, 185, 107, .13);
  color: #006d47;
}

.btn-success-soft:hover {
  background: rgba(34, 185, 107, .20);
  color: #005237;
}

.hero-home,
.page-hero,
.blog-hero,
.article-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 12%, rgba(18, 167, 164, .20), transparent 34%),
    radial-gradient(circle at 10% 12%, rgba(34, 185, 107, .18), transparent 32%),
    linear-gradient(180deg, #f5fffa 0%, #fff 100%);
}

.hero-home:before,
.page-hero:before,
.blog-hero:before,
.article-hero:before {
  content: "";
  position: absolute;
  width: 154px;
  height: 154px;
  left: -74px;
  top: -74px;
  border-radius: 0 0 70px 0;
  background: linear-gradient(135deg, var(--brand-emerald), var(--brand-teal));
  opacity: .95;
  z-index: -1;
}

.hero-home:after,
.page-hero:after,
.blog-hero:after,
.article-hero:after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -86px;
  bottom: -86px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, var(--brand-teal), var(--brand-emerald));
  opacity: .85;
  z-index: -1;
}

.hero-dashboard {
  border: 1px solid rgba(0, 132, 80, .16);
  box-shadow: 0 30px 90px rgba(6, 59, 46, .14);
}

.hero-dashboard:before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: 24px;
  top: 22px;
  background: url("../img/logo-rsud-pandanarang.png") center/contain no-repeat;
  opacity: .045;
  pointer-events: none;
}

.orb-a {
  background: rgba(18, 167, 164, .12)
}

.orb-b {
  background: rgba(34, 185, 107, .12)
}

.eyebrow {
  border-color: rgba(0, 133, 86, .16);
  background: rgba(0, 133, 86, .09);
  color: var(--brand-green);
}

.gradient-text {
  background: linear-gradient(90deg, var(--brand-green), var(--brand-emerald), var(--brand-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quick-icon,
.service-icon,
.facility-icon,
.feature-icon,
.avatar-gradient,
.doctor-avatar {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-emerald), var(--brand-teal));
  color: #fff;
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}

.quick-card,
.feature-card,
.facility-card,
.service-card,
.profile-card,
.service-detail-card,
.special-card,
.support-card,
.news-card,
.doctor-card,
.blog-spotlight,
.article-body-card,
.sidebar-box {
  border-color: rgba(0, 132, 80, .12);
  box-shadow: 0 18px 55px rgba(6, 59, 46, .075);
}

.quick-card:hover,
.feature-card:hover,
.facility-card:hover,
.service-card:hover,
.profile-card:hover,
.doctor-card:hover,
.special-card:hover,
.blog-card:hover {
  box-shadow: 0 28px 80px rgba(0, 133, 86, .16);
}

.announcement-card,
.doctor-cta,
.cta-band,
.document-hero {
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 255, 255, .20), transparent 28%),
    linear-gradient(135deg, var(--brand-green), var(--brand-emerald), var(--brand-teal));
}

.chip,
.clinic-pill,
.blog-filter-buttons button {
  background: rgba(0, 133, 86, .09);
  color: var(--brand-green);
}

.clinic-pill.primary,
.blog-badge.success {
  background: rgba(34, 185, 107, .14);
  color: #006d47;
}

.modern-alert,
.glass-info-card,
.article-callout {
  border-color: rgba(0, 132, 80, .14);
  background: linear-gradient(135deg, rgba(0, 133, 86, .09), rgba(18, 167, 164, .09));
  color: #075a45;
}

.ppid-card strong,
.news-date,
.read-link,
.special-card i,
.standard-item i,
.schedule-line i,
.quick-arrow,
.hero-contact-card i,
.floating-mini i,
.sidebar-box a,
.breadcrumb-modern a,
.empty-state i {
  color: var(--brand-green);
}

.cover-primary {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-teal));
}

.cover-success {
  background: linear-gradient(135deg, var(--brand-emerald), #64d98b);
}

.cover-warning {
  background: linear-gradient(135deg, #f2b544, #ffd56d);
}

.blog-filter-buttons button.active,
.blog-filter-buttons button:hover {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-emerald));
  color: #fff;
}

.blog-badge.primary {
  background: rgba(0, 133, 86, .10);
  color: var(--brand-green);
}

.blog-spotlight:before,
.blog-cover:before {
  background: rgba(255, 255, 255, .18);
}

.footer-main {
  background:
    radial-gradient(circle at 100% 0, rgba(18, 167, 164, .22), transparent 320px),
    linear-gradient(135deg, var(--brand-dark), #064832 55%, #075f55);
}

.footer-main:before {
  background: rgba(34, 185, 107, .14);
}

.contact-line i {
  color: #72e2c1;
}

.back-to-top {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-teal));
  box-shadow: 0 18px 45px rgba(0, 133, 86, .32);
}

.section-heading h2,
.hero-home h1,
.page-hero h1,
.blog-hero h1,
.article-hero h1 {
  letter-spacing: -.035em;
}

@media(max-width:575px) {

  .hero-home:before,
  .page-hero:before,
  .blog-hero:before,
  .article-hero:before {
    width: 110px;
    height: 110px
  }

  .hero-home:after,
  .page-hero:after,
  .blog-hero:after,
  .article-hero:after {
    width: 150px;
    height: 150px
  }
}