/*---------------------------------------
  SRIKANDI KEDIRI
  Warna pink, kuning, putih di atas template Tiya.
-----------------------------------------*/
:root {
  --primary-color:              #e83e8c;
  --secondary-color:            #c2185b;
  --section-bg-color:           #fff0f6;
  --custom-btn-bg-color:        #ffc91f;
  --custom-btn-bg-hover-color:  #ffe07a;
  --link-hover-color:           #ffc91f;
  --dark-color:                 #2b1a20;
  --p-color:                    #6b5a60;
  --btn-ink:                    #4a2a00;
}

a:hover { color: var(--primary-color); }
.custom-btn, .custom-btn:hover { color: var(--btn-ink); }
.custom-border-btn { color: var(--secondary-color); border-color: var(--secondary-color); }
.custom-border-btn:hover { background: var(--custom-btn-bg-color); color: var(--btn-ink); }

.navbar-brand, .navbar-brand:hover { max-width: none; color: var(--dark-color); }
.navbar .navbar-brand-image { filter: none; }
.sticky-wrapper.is-sticky .navbar { background-color: var(--secondary-color); }

.hero-section { background-image: linear-gradient(135deg, #f06aa6, var(--primary-color)); }
.section-overlay { background: linear-gradient(rgba(194, 24, 91, .55), rgba(194, 24, 91, .3) 30%, rgba(194, 24, 91, .6)); }
/* Slideshow sebagai latar buram di belakang tulisan */
.hero-section { overflow: hidden; }
.hero-latar { position: absolute; inset: 0; z-index: 0; }
.hero-latar .carousel-inner, .hero-latar .carousel-item, .hero-latar img { height: 100%; }
.hero-latar img { width: 100%; object-fit: cover; filter: blur(2px); transform: scale(1.03); }
.hero-caption { color: var(--white-color); }
.hero-section h1, .hero-section h2, .hero-caption { text-shadow: 0 2px 12px rgba(120, 10, 60, .45); }
.custom-btn-group .btn { vertical-align: middle; }
/* Satu gelombang tipis di bawah agar gambar latar tetap terlihat */
.hero-section .container + svg { height: 60px; width: 100%; }
.hero-nav { position: absolute; top: 50%; z-index: 23; width: 52px; height: 52px; border: 2px solid var(--white-color); border-radius: 50%; background: rgba(255, 255, 255, .2); color: var(--white-color); font-size: 22px; line-height: 1; transform: translateY(-50%); }
.hero-nav:hover { background: var(--custom-btn-bg-color); border-color: var(--custom-btn-bg-color); color: var(--btn-ink); }
.hero-nav--prev { left: 24px; }
.hero-nav--next { right: 24px; }

.section-bg-image { background-image: linear-gradient(120deg, var(--primary-color), #ffc91f); }
.ttd-time { background: var(--white-color); border-radius: var(--border-radius-medium); padding: 14px 8px; text-align: center; }
.ttd-time span { display: block; color: var(--p-color); font-size: 15px; }
.ttd-time strong { color: var(--secondary-color); font-size: var(--h3-font-size); line-height: 1.2; }

.membership-section h2 span { color: var(--primary-color); }
.table-responsive td { font-size: 16px; color: var(--p-color); }
.fine { font-size: 14px; }
.membership-form .form-control { margin-bottom: 12px; }
.results { margin-bottom: 18px; }
.results:empty { margin-bottom: 0; }
.hint { color: var(--white-color); font-size: 15px; margin: -4px 0 0 20px; }
.res { background: var(--white-color); border-radius: var(--border-radius-medium); padding: 16px 20px; margin-bottom: 8px; }
.res h5 { font-size: 15px; letter-spacing: 0; margin-bottom: 0; }
.res p { font-size: 15px; margin-bottom: 0; }
.res .res__big { color: var(--secondary-color); font-size: var(--h3-font-size); font-weight: var(--font-weight-bold); line-height: 1.2; }
.res__big small { color: var(--p-color); font-size: 14px; font-weight: var(--font-weight-normal); }
.res__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-block; border-radius: var(--border-radius-large); padding: 2px 12px; font-size: 13px; font-weight: var(--font-weight-medium); }
.pill[data-tone="ok"] { background: #e3f6ec; color: #116a45; }
.pill[data-tone="warn"] { background: #fff3c9; color: #7a5200; }
.pill[data-tone="bad"] { background: #ffe0e6; color: #b3123f; }
/* Skala IMT 14 sampai 30: batas 17, 18,5, 25, dan 27 */
.gauge { position: relative; height: 8px; margin: 10px 0 12px; border-radius: 10px; background: linear-gradient(90deg, #e5484d 0 18.75%, #ffc91f 18.75% 28.13%, #4cbb8a 28.13% 68.75%, #ffc91f 68.75% 81.25%, #e5484d 81.25%); }
.gauge i { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--white-color); border: 4px solid var(--secondary-color); transform: translate(-50%, -50%); }

.custom-form .form-control:focus, .custom-form .form-control:hover { border-color: var(--primary-color); }
.custom-form button[type="submit"] { color: var(--btn-ink); font-weight: var(--font-weight-bold); }
.kartu-submit { height: calc(3.5rem + 2px); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--secondary-color); font-weight: var(--font-weight-bold); text-decoration: underline; }
.alert-kartu { background: #ffe0e6; color: #b3123f; border-radius: var(--border-radius-medium); padding: 14px 20px; }
.custom-block-date, .custom-block-date-wrap strong { color: var(--white-color); }
.kartu-profil h4 { margin-bottom: 2px; }
.kartu-profil p { margin-bottom: 0; }
.kartu-nomor { display: inline-block; background: var(--custom-btn-bg-color); color: var(--btn-ink); border-radius: var(--border-radius-large); padding: 6px 18px; font-weight: var(--font-weight-bold); letter-spacing: .5px; }
.kartu-baris { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.kartu-baris .custom-block-span { min-width: 80px; margin-right: 0; }
.kartu-baris p { margin-bottom: 0; font-size: 16px; }

.edu-tabs { display: flex; justify-content: center; gap: 10px; }
.poster-btn { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; }
.poster-btn:hover .custom-block-icon { opacity: 1; }
.poster { display: flex; flex-direction: column; min-height: 340px; padding: 30px; border-radius: var(--border-radius-medium); }
.poster--pink { background: linear-gradient(150deg, var(--primary-color), var(--secondary-color)); }
.poster--pink h4, .poster--pink li, .poster--pink p, .poster--pink span { color: var(--white-color); }
.poster--yellow { background: var(--custom-btn-bg-color); }
.poster--yellow h4, .poster--yellow li, .poster--yellow p, .poster--yellow span { color: #3a2400; }
.poster--rose { background: var(--white-color); border: 2px solid var(--primary-color); }
.poster--rose li, .poster--rose p, .poster--rose span { color: var(--dark-color); }
.poster--rose h4 { color: var(--secondary-color); }
.poster span { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.poster h4 { font-weight: var(--font-weight-bold); margin: 6px 0 14px; }
.poster ul { flex: 1; margin: 0 0 14px; padding-left: 20px; }
.poster li { font-size: 16px; margin-bottom: 4px; }
.poster p { font-size: 15px; margin: 0; }
.video-card .ratio { border-radius: var(--border-radius-medium); overflow: hidden; background: linear-gradient(135deg, var(--primary-color), var(--custom-btn-bg-color)); }
.video-card button { border: 0; padding: 0; background: none; }
.video-card img { width: 100%; height: 100%; object-fit: cover; }
.video-card .bi-play-circle-fill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 56px; color: var(--white-color); }
.video-card h4 { margin: 12px 0 0; }
.video-card p { font-size: 15px; }

.site-footer .navbar-brand { color: var(--secondary-color); }
.site-footer p a { color: var(--white-color); text-decoration: underline; }
.copyright-text { font-size: 14px; margin-top: 16px; }
.modal-content { border: 0; border-radius: var(--border-radius-medium); }

@media screen and (max-width: 991px) {
  .navbar-brand, .navbar-brand:hover { color: var(--white-color); }
  .site-footer .navbar-brand { color: var(--secondary-color); }
  .hero-section { height: auto; min-height: 670px; padding-top: 110px; padding-bottom: 150px; }
}

@media screen and (min-width: 992px) {
  .navbar .navbar-brand, .navbar .navbar-brand:hover { color: var(--white-color); }
}

@media screen and (max-width: 575px) {
  .hero-nav { top: auto; bottom: 76px; width: 44px; height: 44px; font-size: 18px; transform: none; }
  .hero-nav--prev { left: 16px; }
  .hero-nav--next { right: 16px; }
  .poster { min-height: 0; }
}

/* Gelombang hanya di beranda; pengingat berupa pita lurus selebar halaman */
.hero-section { margin-bottom: 0; }
.section-bg-image { margin-bottom: 0; padding-top: 60px; padding-bottom: 60px; }
.section-bg-image-block { text-align: center; }

@media screen and (max-width: 991px) {
  .hero-section { margin-bottom: 82px; }
  .section-bg-image { padding-top: 40px; padding-bottom: 40px; }
}

@media screen and (max-width: 767px) {
  .hero-section .cd-words-wrapper { display: block; text-align: center; }
  .hero-section .cd-words-wrapper b { right: 0; width: 100%; }
}

/* Beranda penuh satu layar, dengan gelombang tipis di atas tempat menu */
.hero-section { height: 100vh; min-height: 560px; }
.hero-section > .hero-gel-atas { top: 0; height: 120px; width: 100%; }

@media screen and (max-width: 991px) {
  .hero-section { height: auto; min-height: 600px; padding-top: 80px; }
  .hero-section > .hero-gel-atas { height: 40px; }
}

/* Menu selalu di atas pita pink yang sama, sebelum maupun sesudah digulir */
.navbar { background-color: var(--secondary-color); min-height: 92px; }
.sticky-wrapper { z-index: 30; }
.poster-gambar { display: block; width: 100%; border-radius: var(--border-radius-medium); }
.btn-masuk { flex: none; margin: 0 12px 0 auto; padding: 7px 16px; border-radius: var(--border-radius-large); background: var(--white-color); color: var(--secondary-color); font-size: 15px; font-weight: var(--font-weight-bold); }
.btn-masuk:hover, .btn-masuk:focus { background: #ffc91f; color: #4a2a00; }
.navbar .navbar-brand-image { width: 60px; height: 60px; padding: 2px; border-radius: 50%; background: var(--white-color); object-fit: contain; }
.navbar-brand-text { bottom: 0; font-size: var(--h4-font-size); letter-spacing: .5px; }
.site-footer .navbar-brand-image { width: 72px; height: 72px; }
.hero-section > .hero-gel-atas { top: 91px; height: 44px; }

@media screen and (max-width: 991px) {
  .navbar { min-height: 82px; padding-top: 11px; padding-bottom: 11px; }
  .navbar .navbar-brand-image { width: 56px; height: 56px; }
  .hero-section > .hero-gel-atas { top: -1px; height: 36px; }
}

/* Jam minum: yang terdekat cerah, lainnya buram */
.ttd-time { transition: filter .3s, opacity .3s, transform .3s, background .3s; }
.ttd-time:not(.is-dekat) { filter: blur(1.5px); opacity: .6; }
.ttd-time.is-dekat { background: var(--custom-btn-bg-color); box-shadow: 0 8px 20px rgba(194, 24, 91, .3); transform: scale(1.05); }
.ttd-time.is-dekat span, .ttd-time.is-dekat strong { color: var(--btn-ink); }

/* Kartu SRIKANDI ringkas dan di tengah */
.kartu-section { padding-top: 56px; padding-bottom: 56px; }
.kartu-section p { margin-bottom: 8px; }
.kartu-section .custom-form .form-control { margin-bottom: 12px; }
.kartu-catatan { font-size: 15px; }
.kartu-section .custom-block { padding: 20px; }
.kartu-section .custom-block-date-wrap { padding: 14px 16px; }
.kartu-section .custom-block-date { font-size: var(--h3-font-size); }

/* Media edukasi */
#section_5 { padding-top: 64px; padding-bottom: 64px; }
#posterGrid > div { display: flex; }
.poster-btn { height: 100%; }
.poster { height: 100%; }
.edu-pager { display: flex; justify-content: center; align-items: center; gap: 16px; }
.edu-pager span { color: var(--p-color); min-width: 44px; text-align: center; }
.edu-pager .btn:disabled { opacity: .4; }
#panelVideo .video-card { height: 100%; }

/* Footer ringkas */
.site-footer { padding: 28px 0; background: var(--secondary-color); text-align: center; }
.site-footer p, .site-footer a { color: var(--white-color); }
.site-footer a:hover { color: var(--custom-btn-bg-color); }
.foot-karya { font-size: var(--h5-font-size); font-weight: var(--font-weight-bold); margin-bottom: 4px; }
.foot-catatan { font-size: 15px; margin-bottom: 8px; }
.site-footer .copyright-text { font-size: 13px; margin-top: 0; }

@media screen and (max-width: 991px) {
  .kartu-section { padding-top: 40px; padding-bottom: 40px; }
  #section_5 { padding-top: 44px; padding-bottom: 44px; }
  .site-footer { padding: 24px 0; }
}

/* Dua kartu logo lomba di kiri dan kanan footer */
.foot-logo { display: flex; align-items: center; justify-content: center; gap: 20px; }
.foot-logo img { width: 96px; height: 96px; object-fit: contain; }

.hero-section .hero-sistem { color: var(--white-color); font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); text-shadow: 0 2px 12px rgba(120, 10, 60, .45); }

@media screen and (min-width: 992px) {
  .navbar .navbar-collapse { order: 1; }
  .btn-masuk { order: 2; margin: 0 0 0 20px; }
}