/* =========================================================
   MyRobin Care — Custom CSS Help Center Zoho Desk (tema Elegant)
   UI/UX mengikuti E-KB (Pusat Informasi CS)
   Tempel di: Help Center Customization → Customize → CSS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Token E-KB
   navy-900 #0F2A3E   navy-800 #153A52
   teal-600 #0F8C7C   teal-500 #14A392   teal-100 #E3F5F1
   amber-500 #F2A93B  cream-50 #F7F9F8
   ink-700  #1E2B32   ink-500  #5B6B72   line #E1E8E7      */

/* ---------- 1. Dasar ---------- */
body, #container, #mainContainer {
  background: #F7F9F8 !important;
}
body, input, textarea, button, select, #container, .Link__link {
  font-family: 'Inter', sans-serif !important;
  color: #1E2B32;
  line-height: 1.5;
}
.Header__searchTitle, .Header__name, .ContentBox__headerMid,
.ListHeader__header2, .Footer__footerQus, h1, h2, h3 {
  font-family: 'Baloo Thambi 2', 'Inter', sans-serif !important;
}

/* ---------- 2. Header putih + menu kapsul (seperti E-KB) ---------- */
.Header__header, .Header__homeContent {
  background: linear-gradient(135deg, #0F2A3E, #153A52 60%, #0F8C7C) !important;
}
.Header__header::before, .Header__header::after,
.Header__homeContent::before, .Header__homeContent::after {
  display: none !important;
}
.Header__navbar {
  background: #FFFFFF !important;
  opacity: 1 !important;
  border-bottom: 1px solid #E1E8E7 !important;
  box-shadow: none !important;
}
.Header__name {
  color: #0F2A3E !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.Header__menuList {
  background: #F7F9F8 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  gap: 2px;
}
.Header__tabsTab {
  border: 0 !important;
  box-shadow: none !important;
}
.Header__tabs__link {
  color: #5B6B72 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  transition: .15s;
}
.Header__tabs__link:hover {
  color: #0F2A3E !important;
}
.Header__active .Header__tabs__link {
  background: #0F2A3E !important;
  color: #FFFFFF !important;
}
/* Masuk, Daftar, dan pilihan bahasa (sebelumnya putih, tidak terbaca) */
.Header__menuTab a:not(.Header__tabs__link),
.Header__menuTab span, .Header__tabsTabAlign, .LoginDetail__LogoutDetail a {
  color: #5B6B72 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.Header__menuTab a:not(.Header__tabs__link):hover,
.LoginDetail__LogoutDetail a:hover {
  color: #0F2A3E !important;
}
.Header__menuTab svg, .Header__menuTab .Icon__icon {
  color: #5B6B72 !important;
  fill: #5B6B72 !important;
}
.Header__active .Header__tabs__link,
.Header__active .Header__tabs__link * {
  color: #FFFFFF !important;
}
.Header__menu, .Header__menuicon { color: #0F2A3E !important; }

/* ---------- 3. Hero gradasi (ukuran & jarak asli Zoho dipertahankan) ---------- */
.Header__searchSection, #headerContent {
  background: transparent !important;
}
.Header__searchTitle {
  color: #FFFFFF !important;
  font-size: clamp(30px, 4.4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
.Header__description {
  color: rgba(255, 255, 255, .8) !important;
  font-size: 15px !important;
}

/* Kolom cari: kotak putih sudut 14px, tombol teal */
.SearchContainer__globalSearch {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18) !important;
  overflow: visible !important;
}
.Input__headerSearch {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: #1E2B32 !important;
}
.SearchContainer__searchIcon,
.SearchContainer__searchIcon.commonStyle__zt3BrandBg {
  background: #14A392 !important;
  border-radius: 10px !important;
}
.SearchContainer__searchIcon:hover {
  background: #0F8C7C !important;
}
.SearchContainer__searchIcon .Icon__icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ---------- 4. Kartu menu (gaya cat-card E-KB) ---------- */
.ContentBox__boxInnerHome {
  background: #FFFFFF !important;
  border: 1px solid #E1E8E7 !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
  box-shadow: none !important;
  transition: .15s;
}
.ContentBox__boxInnerHome:hover {
  border-color: #14A392 !important;
  box-shadow: 0 6px 16px rgba(15, 42, 62, .08) !important;
  transform: translateY(-1px);
}
.ContentBox__headerMid, .ContentBox__headerMid a {
  color: #0F2A3E !important;
  font-weight: 700 !important;
}
.ContentBox__boxInnerHome:hover .ContentBox__headerMid a {
  color: #0F8C7C !important;
}

/* ---------- 5. Judul bagian, link, tombol ---------- */
.ListHeader__header2 {
  color: #0F2A3E !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}
.Link__link, .TopicListWidget__listLink, #mainContainer a {
  color: #0F2A3E !important;
  font-weight: 600;
}
.Link__link:hover, .TopicListWidget__listLink:hover, #mainContainer a:hover {
  color: #0F8C7C !important;
}
.commonStyle__zt3BrandBg {
  background-color: #0F2A3E !important;   /* tombol utama navy, seperti E-KB */
}

/* ---------- 6. Footer ---------- */
.Footer__footerBg {
  background: #0F2A3E !important;
}
.Footer__footerQus {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 21px !important;
}
.Footer__footerDescription {
  color: rgba(255, 255, 255, .75) !important;
  font-size: 13.5px !important;
}
.Button__footerBtn {
  background: #14A392 !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 12px 20px !important;
}
.Button__footerBtn:hover {
  background: #0F8C7C !important;
}
.Footer__footerCopyrigt {
  display: none !important;   /* sembunyikan "Didukung oleh Zoho Desk" */
}

/* ---------- 7. Widget "Chat CS MyRobin" ----------
   Kotak teal muda + tombol navy (seperti tombol "Lihat Semua" di E-KB)
---------------------------------------------------------- */
#mainContainer div:has(a[href*="s.id/csmyr"]):not(:has(div a[href*="s.id/csmyr"])) {
  background: #E3F5F1 !important;
  border: 1px solid #E1E8E7 !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
}
#mainContainer a[href*="s.id/csmyr"] {
  display: inline-block !important;
  background: #0F2A3E !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  padding: 11px 22px !important;
  border-radius: 9px !important;
  margin-top: 8px !important;
  transition: .15s;
}
#mainContainer a[href*="s.id/csmyr"]:hover {
  background: #0F8C7C !important;
  color: #FFFFFF !important;
}

/* ---------- 8. Kolom cari di halaman dalam (Masuk, Tiket, Artikel) ---------- */
[class*="earchIcon"]:not(.commonStyle__zt3BrandBg) .Icon__icon {
  color: #14A392 !important;
  fill: #14A392 !important;
}
.SearchContainer__downArrow {
  color: #14A392 !important;
  border-top-color: #14A392 !important;
}

/* ---------- 9. Widget SalesIQ lama disembunyikan ----------
   Panel chat SalesIQ tampil kosong (tidak ada kolom ketik), jadi
   disembunyikan agar mitra memakai widget "Chat CS MyRobin".
   Hapus blok ini kalau SalesIQ sudah aktif kembali.
---------------------------------------------------------- */
#zsiq_float, .zsiq_floatmain, #zsiq_chatwindow, .zls-sptwndw,
[id^="zsiq"], [class^="zsiq"] {
  display: none !important;
}

/* ---------- 10. Running text ----------
   Berlaku untuk Custom widget yang berisi link penanda "#info-cs"
   (contoh: .../portal/id/signin#info-cs pada kata "Selengkapnya").
   Kecepatan: ubah angka 25s. Kalau teks panjang terpotong sebelum
   habis, perbesar angka -130% (misalnya -180%).
---------------------------------------------------------- */
#mainContainer div:has(a[href*="#info-cs"]):not(:has(div a[href*="#info-cs"])) {
  overflow: hidden !important;
  white-space: nowrap !important;
  background: #F2A93B !important;
  color: #4A340A !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  padding: 10px 0 !important;
  animation: runningText 25s linear infinite;
}
#mainContainer div:has(a[href*="#info-cs"]):not(:has(div a[href*="#info-cs"])) * {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: inherit;
}
#mainContainer div:has(a[href*="#info-cs"]):not(:has(div a[href*="#info-cs"])):hover {
  animation-play-state: paused;   /* berhenti saat disentuh/disorot */
}
#mainContainer a[href*="#info-cs"] {
  color: #0F2A3E !important;
  text-decoration: underline !important;
}
@keyframes runningText {
  from { text-indent: 100%; }
  to   { text-indent: -130%; }
}
@media (prefers-reduced-motion: reduce) {
  #mainContainer div:has(a[href*="#info-cs"]):not(:has(div a[href*="#info-cs"])) {
    animation: none !important;
    white-space: normal !important;
    text-indent: 0 !important;
    padding: 10px 16px !important;
  }
}

/* ---------- 11. Tombol chat ASAP (pojok kanan bawah) ----------
   Warna teal terang + efek denyut, dan balon teks "Hai Kak, chat
   dengan CS di sini" saat widget tertutup.
---------------------------------------------------------- */
#zohohc-asap-web-button {
  background: #14A392 !important;
  overflow: visible !important;
  /* animation bawaan Zoho (yang memunculkan tombol) tidak diganggu */
}
/* Efek denyut lewat lapisan terpisah */
#zohohc-asap-web-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: asapPulse 2s ease-out infinite;
}
#zohohc-asap-web-button svg,
#zohohc-asap-web-button svg path {
  fill: #FFFFFF !important;
}
#zohohc-asap-web-button.zd-launcher-close__app::before {
  content: "Hai Kak, chat dengan CS di sini \1F44B";
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #FFFFFF;
  color: #0F2A3E;
  font: 600 13px/1.3 'Inter', sans-serif;
  white-space: nowrap;
  padding: 10px 14px;
  border: 1px solid #E1E8E7;
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 8px 24px rgba(15, 42, 62, .18);
  pointer-events: none;
}
@keyframes asapPulse {
  0%   { box-shadow: 0 0 0 0 rgba(20, 163, 146, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(20, 163, 146, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 163, 146, 0); }
}
@media (max-width: 480px) {
  #zohohc-asap-web-button.zd-launcher-close__app::before {
    font-size: 12px;
    padding: 8px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #zohohc-asap-web-button::after { animation: none !important; }
}

/* ---------- 12. Opsional — aktifkan setelah diputuskan ----------
   Sembunyikan menu Komunitas:
   #portal_tabCommunity { display: none !important; }
---------------------------------------------------------- */