/* ============================================================ RSIA MAHATI RECRUITMENT - FINAL UI ============================================================ */ :root { --mahati-teal: #168da3; --mahati-teal-dark: #117f94; --mahati-coral: #e88d86; --mahati-navy: #172238; --mahati-blue: #2868c5; --mahati-peach: #ffd9d2; } /* ============================================================ GLOBAL - JANGAN ADA HORIZONTAL SCROLL ============================================================ */ html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; } * { box-sizing: border-box; } /* ============================================================ TOP CONTACT BAR ============================================================ */ .topbar, .top-bar, .contact-bar { background: #ffd8d1 !important; } /* ============================================================ NAVBAR ============================================================ */ .navbar { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .navbar-container, .nav-container, .nav-inner { width: 100% !important; max-width: 1450px !important; margin: 0 auto !important; padding-left: 40px !important; padding-right: 40px !important; } /* ============================================================ LOGO ============================================================ */ .brand { display: flex !important; align-items: center !important; flex-shrink: 0 !important; } .brand-logo { width: 78px !important; height: 78px !important; object-fit: contain !important; object-position: center !important; } .brand-text { margin-left: 12px !important; } .brand-title { color: #647b86 !important; white-space: nowrap !important; } .brand-subtitle { color: #82919a !important; } /* ============================================================ NAV MENU ============================================================ */ .nav-links { display: flex !important; align-items: center !important; gap: 28px !important; white-space: nowrap !important; } .nav-links a { white-space: nowrap !important; } /* ============================================================ LOGIN & DAFTAR ============================================================ */ .login-btn, .btn-login { border-color: var(--mahati-teal) !important; color: var(--mahati-teal) !important; } .register-btn, .btn-register, .btn-primary { background: var(--mahati-teal) !important; border-color: var(--mahati-teal) !important; color: white !important; } .register-btn:hover, .btn-register:hover, .btn-primary:hover { background: var(--mahati-teal-dark) !important; } /* ============================================================ HERO ============================================================ */ .hero { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } .hero-container, .hero-inner { width: 100% !important; max-width: 1450px !important; margin: 0 auto !important; } /* ============================================================ LABEL RECRUITMENT SAMA DENGAN TOMBOL DAFTAR SEBAGAI PELAMAR ============================================================ */ .hero-badge, .recruitment-badge, .hero-label { background: var(--mahati-teal) !important; color: #ffffff !important; border-color: var(--mahati-teal) !important; } /* ============================================================ JUDUL HERO ============================================================ */ .hero-title { margin: 0 !important; color: var(--mahati-navy) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -2.5px !important; max-width: 720px !important; overflow-wrap: normal !important; word-break: normal !important; } /* RSIA MAHATI */ .hero-title span { display: block !important; color: var(--mahati-teal) !important; margin-top: 5px !important; white-space: nowrap !important; } /* ============================================================ HERO IMAGE / SLIDER ============================================================ */ .hero-right, .hero-image, .hero-slider, .hero-carousel { width: 100% !important; max-width: 760px !important; display: flex !important; justify-content: center !important; align-items: center !important; overflow: visible !important; } /* gambar sekitar 75% dari area */ .hero-right img, .hero-image img, .hero-slider img, .hero-carousel img { width: 75% !important; max-width: 760px !important; height: auto !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } /* Kalau slider menggunakan wrapper */ .swiper, .swiper-container, .carousel, .slider { overflow: visible !important; } .swiper-slide { display: flex !important; justify-content: center !important; align-items: center !important; } /* ============================================================ HERO GRID ============================================================ */ .hero-grid, .hero-content { width: 100% !important; max-width: 1450px !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ DESKTOP 100% ============================================================ */ @media (min-width: 1400px) { .hero-grid, .hero-content { grid-template-columns: minmax(520px, 0.95fr) minmax(600px, 1.05fr) !important; gap: 35px !important; } .hero-title { font-size: 76px !important; } .hero-right img, .hero-image img, .hero-slider img, .hero-carousel img { width: 75% !important; } } /* ============================================================ LAPTOP ============================================================ */ @media (max-width: 1399px) and (min-width: 1151px) { .navbar-container, .nav-container, .nav-inner { padding-left: 28px !important; padding-right: 28px !important; } .nav-links { gap: 20px !important; } .hero-grid, .hero-content { gap: 20px !important; } .hero-title { font-size: 66px !important; letter-spacing: -2px !important; } .hero-right img, .hero-image img, .hero-slider img, .hero-carousel img { width: 75% !important; } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1150px) { .navbar-container, .nav-container, .nav-inner { padding-left: 22px !important; padding-right: 22px !important; } .nav-links { gap: 15px !important; } .hero-title { font-size: 54px !important; letter-spacing: -1.5px !important; } .hero-title span { white-space: normal !important; } .hero-right img, .hero-image img, .hero-slider img, .hero-carousel img { width: 78% !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 768px) { .brand-logo { width: 58px !important; height: 58px !important; } .brand-title { font-size: 20px !important; } .brand-subtitle { font-size: 9px !important; } .hero-title { font-size: 42px !important; line-height: 1.04 !important; letter-spacing: -1px !important; } .hero-title span { white-space: normal !important; } .hero-right img, .hero-image img, .hero-slider img, .hero-carousel img { width: 88% !important; } } /* ============================================================ MOBILE KECIL ============================================================ */ @media (max-width: 480px) { .hero-title { font-size: 34px !important; } .hero-right img, .hero-image img, .hero-slider img, .hero-carousel img { width: 92% !important; } } /* ============================================================ FINAL RSIA MAHATI RECRUITMENT UI ============================================================ */ html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; } /* ============================================================ HERO ============================================================ */ .hero { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .hero-inner { width: min(1400px, 92%) !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* ============================================================ HERO GRID ============================================================ */ .hero-grid { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; align-items: center !important; gap: 45px !important; box-sizing: border-box !important; } /* ============================================================ JUDUL ============================================================ */ .hero-title { margin: 0 !important; font-size: clamp(52px, 5.1vw, 76px) !important; line-height: 1.00 !important; letter-spacing: -2.8px !important; font-weight: 800 !important; color: #182235 !important; max-width: 650px !important; } /* RSIA MAHATI */ .hero-title span { display: block !important; margin-top: 8px !important; color: #168ba2 !important; } /* Kalau menggunakan class highlight */ .hero-title .highlight, .hero-title .primary, .hero-title .brand, .hero-title .blue { color: #168ba2 !important; } /* ============================================================ BADGE ============================================================ */ .hero-badge, .hero-eyebrow, .badge { background: #168ba2 !important; color: #ffffff !important; border-color: #168ba2 !important; box-shadow: 0 8px 22px rgba(22,139,162,.18) !important; } /* ============================================================ DESKRIPSI ============================================================ */ .hero-description { max-width: 680px !important; font-size: 19px !important; line-height: 1.65 !important; color: #52708d !important; } /* ============================================================ SLIDER / GAMBAR ============================================================ */ .hero-visual, .hero-slider, .slider-container, .hero-image-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; box-sizing: border-box !important; } /* PENTING: Gambar hanya sekitar 75%. Tidak lagi memenuhi seluruh area kanan. */ .hero-visual img, .hero-slider img, .slider-container img, .hero-image-wrapper img { width: 75% !important; max-width: 75% !important; height: auto !important; max-height: 560px !important; object-fit: contain !important; object-position: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ SLIDE ============================================================ */ .slide, .slides, .hero-slide, .slider, .carousel-item { overflow: visible !important; box-sizing: border-box !important; } /* ============================================================ TOMBOL ============================================================ */ .btn-primary, .hero-actions .btn-primary { background: #168ba2 !important; border-color: #168ba2 !important; color: #ffffff !important; } .btn-primary:hover, .hero-actions .btn-primary:hover { background: #11788d !important; border-color: #11788d !important; } /* ============================================================ NAVBAR ============================================================ */ .navbar, .navbar-inner, .nav-inner, .header-inner { box-sizing: border-box !important; max-width: 100% !important; } /* Jangan membuat navbar melebar */ .nav-menu { max-width: 100% !important; gap: 28px !important; } .nav-menu a { white-space: nowrap !important; } /* ============================================================ LOGO ============================================================ */ .brand-logo { width: 72px !important; height: 72px !important; object-fit: contain !important; display: block !important; } /* ============================================================ LAPTOP ============================================================ */ @media (max-width: 1200px) { .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; gap: 30px !important; } .hero-title { font-size: 58px !important; } .hero-description { font-size: 18px !important; } .hero-visual img, .hero-slider img, .slider-container img, .hero-image-wrapper img { width: 75% !important; max-width: 75% !important; } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr !important; gap: 30px !important; } .hero-title { font-size: 55px !important; } .hero-visual img, .hero-slider img, .slider-container img, .hero-image-wrapper img { width: 75% !important; max-width: 75% !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 650px) { .hero { min-height: auto !important; padding-bottom: 50px !important; } .hero-inner { width: 92% !important; } .hero-grid { grid-template-columns: 1fr !important; gap: 25px !important; } .hero-title { font-size: 42px !important; line-height: 1.03 !important; letter-spacing: -1.5px !important; } .hero-description { font-size: 16px !important; line-height: 1.55 !important; } .hero-visual img, .hero-slider img, .slider-container img, .hero-image-wrapper img { width: 88% !important; max-width: 88% !important; max-height: none !important; } .brand-logo { width: 55px !important; height: 55px !important; } } /* ============================================================ NO HORIZONTAL SCROLL ============================================================ */ body, main, section { max-width: 100vw !important; box-sizing: border-box !important; } /* ========================================================== FINAL THEME - RSIA MAHATI ========================================================== */ /* ---------------------------------------------------------- LOGO HEADER ---------------------------------------------------------- */ .brand-logo { width: 115px !important; height: 82px !important; max-width: 115px !important; object-fit: contain !important; object-position: center !important; flex-shrink: 0 !important; } /* Area brand supaya logo tidak terlalu mepet */ .brand { display: flex !important; align-items: center !important; gap: 18px !important; min-width: 350px !important; } /* ---------------------------------------------------------- JUDUL HERO ---------------------------------------------------------- */ .hero-title { color: #182235 !important; } /* Bergabung */ .hero-title { color: #182235 !important; } /* Jika RSIA MAHATI menggunakan span */ .hero-title span { color: #1595ab !important; } /* ---------------------------------------------------------- WARNA JUDUL BERGABUNG / BERSAMA ---------------------------------------------------------- */ /* Pecah warna menggunakan background gradient agar tetap bisa bekerja walaupun HTML hanya satu teks */ .hero-title { background: linear-gradient( 180deg, #182235 0%, #182235 31%, #e58f8c 32%, #e58f8c 64%, #1595ab 65%, #1595ab 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; } /* Pastikan span RSIA MAHATI tetap teal */ .hero-title span { -webkit-text-fill-color: #1595ab !important; color: #1595ab !important; } /* ---------------------------------------------------------- BADGE RECRUITMENT RSIA MAHATI Sama dengan tombol Daftar sebagai Pelamar ---------------------------------------------------------- */ .hero-badge, .recruitment-badge, .hero-label, .hero-kicker { background: #1595ab !important; color: #ffffff !important; border-color: #1595ab !important; box-shadow: 0 12px 25px rgba(21,149,171,.20) !important; } /* Jika badge menggunakan elemen tertentu */ [class*="badge"] { border-radius: 999px; } /* ---------------------------------------------------------- TOMBOL DAFTAR ---------------------------------------------------------- */ .hero-actions a:first-child, .btn-primary, .primary-btn { background: #1595ab !important; border-color: #1595ab !important; color: #ffffff !important; } .hero-actions a:first-child:hover, .btn-primary:hover, .primary-btn:hover { background: #117f92 !important; border-color: #117f92 !important; } /* ---------------------------------------------------------- TOMBOL LOGIN ---------------------------------------------------------- */ .btn-login, .login-btn { color: #1595ab !important; border-color: #1595ab !important; } /* ---------------------------------------------------------- RESPONSIVE LOGO ---------------------------------------------------------- */ @media (max-width: 1150px) { .brand { min-width: 280px !important; gap: 12px !important; } .brand-logo { width: 90px !important; height: 68px !important; max-width: 90px !important; } } @media (max-width: 768px) { .brand { min-width: 0 !important; gap: 10px !important; } .brand-logo { width: 72px !important; height: 58px !important; max-width: 72px !important; } } /* ---------------------------------------------------------- HILANGKAN MENU YANG TIDAK DIPAKAI ---------------------------------------------------------- */ .navbar a[href*="#karir"], .navbar a[href*="#faq"], .navbar a[href*="#lowongan"], .navbar a[href*="/lowongan"], .navbar a[href*="lowongan"] { display: none !important; } /* ========================================================== FINAL OVERRIDE - RSIA MAHATI COLOR + LOGO ========================================================== */ /* ========================================================== HERO TITLE ========================================================== */ /* BERGABUNG - NAVY */ .hero-title .hero-title-bergabung { color: #182235 !important; display: block; margin-top: 0; } /* BERSAMA - CORAL RSIA */ .hero-title .hero-title-bersama { color: #E58B88 !important; display: block; margin-top: 6px; } /* RSIA MAHATI - BIRU UTAMA */ .hero-title .hero-title-mahati { color: #2564C1 !important; display: block; margin-top: 6px; } /* ========================================================== BADGE RECRUITMENT SAMA DENGAN TOMBOL DAFTAR SEBAGAI PELAMAR ========================================================== */ .badge { background: #168FA5 !important; color: #ffffff !important; border: none !important; box-shadow: 0 12px 25px rgba(22, 143, 165, 0.18) !important; } /* ========================================================== LOGO HEADER ========================================================== */ .brand-logo { width: 105px !important; height: auto !important; max-width: 105px !important; max-height: 80px !important; object-fit: contain !important; border: none !important; outline: none !important; box-shadow: none !important; display: block !important; } /* Jika logo berada di dalam link */ .brand-logo-link, .brand-logo-link:focus, .brand-logo-link:hover, .brand-logo-link:active { border: none !important; outline: none !important; box-shadow: none !important; } /* ========================================================== AREA BRAND ========================================================== */ .brand { display: flex !important; align-items: center !important; gap: 18px !important; } /* ========================================================== NAMA RSIA MAHATI DI HEADER ========================================================== */ .brand-name { color: #607D8B !important; } .brand-tagline { color: #78909C !important; } /* ========================================================== RESPONSIVE LOGO ========================================================== */ @media (max-width: 1150px) { .brand-logo { width: 90px !important; max-width: 90px !important; max-height: 70px !important; } .brand { gap: 14px !important; } } @media (max-width: 768px) { .brand-logo { width: 75px !important; max-width: 75px !important; max-height: 60px !important; } .brand { gap: 10px !important; } } /* ========================================================== HILANGKAN OUTLINE / KOTAK HITAM PADA GAMBAR ========================================================== */ img.brand-logo:focus, img.brand-logo:active { outline: none !important; border: none !important; } /* ========================================================== JAGA AGAR TIDAK ADA HORIZONTAL SCROLL ========================================================== */ html, body { overflow-x: hidden !important; } /* ========================================================== FINAL OVERRIDE - JUDUL RECRUITMENT RSIA MAHATI ========================================================== */ /* Judul utama */ .hero-title { color: #182235 !important; } /* BERGABUNG - Navy */ .hero-title .hero-title-bergabung { display: block !important; color: #182235 !important; margin-top: 0 !important; } /* BERSAMA - Coral/Pink RSIA */ .hero-title .hero-title-bersama { display: block !important; color: #E58B86 !important; margin-top: 6px !important; } /* RSIA MAHATI - Biru RSIA */ .hero-title .hero-title-mahati { display: block !important; color: #286BC5 !important; margin-top: 6px !important; } /* ========================================================== BADGE RECRUITMENT Samakan dengan tombol "Daftar sebagai Pelamar" ========================================================== */ .badge { background: #1693A8 !important; color: #FFFFFF !important; border-color: #1693A8 !important; } /* ========================================================== LOGO HEADER - LEBIH BESAR ========================================================== */ .brand-logo { border: none !important; box-shadow: none !important; background: transparent !important; } .brand-logo img { width: 115px !important; max-width: 115px !important; height: auto !important; max-height: 80px !important; object-fit: contain !important; border: none !important; box-shadow: none !important; } /* Jika logo menggunakan class lain */ .navbar-brand img, .brand img, .logo img { border: none !important; box-shadow: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1150px) { .brand-logo img { width: 100px !important; max-width: 100px !important; } } @media (max-width: 768px) { .brand-logo img { width: 85px !important; max-width: 85px !important; } .hero-title .hero-title-bergabung, .hero-title .hero-title-bersama, .hero-title .hero-title-mahati { margin-top: 0 !important; } } /* ========================================================== LOGO HEADER - FINAL ========================================================== */ .brand-logo { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } .brand-logo img { width: 180px !important; max-width: 180px !important; height: auto !important; max-height: 100px !important; object-fit: contain !important; border: none !important; outline: none !important; box-shadow: none !important; } /* kemungkinan class logo lain */ .navbar-brand img, .brand img, .logo img { border: none !important; outline: none !important; box-shadow: none !important; object-fit: contain !important; } /* ============================================================ FINAL OVERRIDE - HERO TITLE RSIA MAHATI ============================================================ */ /* BERGABUNG - NAVY */ .hero-title span.hero-title-bergabung, .hero-title .hero-title-bergabung { display: block !important; color: #182235 !important; } /* BERSAMA - CORAL / PINK */ .hero-title span.hero-title-bersama, .hero-title .hero-title-bersama { display: block !important; color: #E58B86 !important; } /* RSIA MAHATI - BLUE */ .hero-title span.hero-title-mahati, .hero-title .hero-title-mahati { display: block !important; color: #286BC5 !important; } /* ============================================================ LOGO HEADER ============================================================ */ .brand-logo { width: 140px !important; max-width: 140px !important; height: auto !important; object-fit: contain !important; } /* Kalau logo menggunakan img langsung di brand */ .brand img.brand-logo { width: 140px !important; max-width: 140px !important; height: auto !important; object-fit: contain !important; } /* ============================================================ BADGE RECRUITMENT ============================================================ */ .badge { background: #1593A8 !important; color: #ffffff !important; } /* ============================================================ RESPONSIVE LOGO ============================================================ */ @media (max-width: 1150px) { .brand-logo, .brand img.brand-logo { width: 120px !important; max-width: 120px !important; } } @media (max-width: 768px) { .brand-logo, .brand img.brand-logo { width: 100px !important; max-width: 100px !important; } } /* ============================================================ FORCE COLOR FIX Mematikan gradient/text-fill dari CSS sebelumnya ============================================================ */ /* ------------------------------------------------------------ BERGABUNG ------------------------------------------------------------ */ .hero-title .hero-title-bergabung, .hero-title span.hero-title-bergabung, .hero-title-line.hero-title-bergabung { color: #182235 !important; -webkit-text-fill-color: #182235 !important; background: none !important; background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* ------------------------------------------------------------ BERSAMA ------------------------------------------------------------ */ .hero-title .hero-title-bersama, .hero-title span.hero-title-bersama, .hero-title-line.hero-title-bersama { color: #E58B86 !important; -webkit-text-fill-color: #E58B86 !important; background: none !important; background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* ------------------------------------------------------------ RSIA MAHATI ------------------------------------------------------------ */ .hero-title .hero-title-mahati, .hero-title span.hero-title-mahati, .hero-title-line.hero-title-mahati { color: #286BC5 !important; -webkit-text-fill-color: #286BC5 !important; background: none !important; background-image: none !important; background-color: transparent !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* ------------------------------------------------------------ PASTIKAN TITLE TIDAK MEMAKAI GRADIENT ------------------------------------------------------------ */ .hero-title, .hero-title-line { background-image: none !important; } /* ------------------------------------------------------------ LOGO HEADER ------------------------------------------------------------ */ .brand-logo, .brand img.brand-logo { width: 140px !important; max-width: 140px !important; height: auto !important; object-fit: contain !important; } /* ------------------------------------------------------------ BADGE ------------------------------------------------------------ */ .badge { background: #1593A8 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ============================================================ RSIA MAHATI - FINAL COLOR THEME ============================================================ */ .hero-title .hero-title-bergabung, .hero-title span.hero-title-bergabung { color: #1597A8 !important; display: block !important; } .hero-title .hero-title-bersama, .hero-title span.hero-title-bersama { color: #E58B86 !important; display: block !important; } .hero-title .hero-title-mahati, .hero-title span.hero-title-mahati { color: #5B7485 !important; display: block !important; } /* Pastikan gradient / warna lama tidak ikut */ .hero-title, .hero-title span, .hero-title-line { -webkit-text-fill-color: initial !important; text-shadow: none !important; } /* ============================================================ LOGO HEADER ============================================================ */ .brand-logo, .header-logo, .navbar-logo { width: 140px !important; max-width: 140px !important; height: auto !important; object-fit: contain !important; } /* ========================================================== RSIA MAHATI - FINAL CONCEPT COLOR ========================================================== */ h1.hero-title { color: inherit !important; } /* BERGABUNG */ h1.hero-title span.hero-title-bergabung { display: block !important; color: #182235 !important; -webkit-text-fill-color: #182235 !important; background: none !important; background-image: none !important; } /* BERSAMA */ h1.hero-title span.hero-title-bersama { display: block !important; color: #E58B86 !important; -webkit-text-fill-color: #E58B86 !important; background: none !important; background-image: none !important; } /* RSIA MAHATI */ h1.hero-title span.hero-title-mahati { display: block !important; color: #286BC5 !important; -webkit-text-fill-color: #286BC5 !important; background: none !important; background-image: none !important; } /* ========================================================== LOGO HEADER - LEBIH BESAR ========================================================== */ .brand-logo, header .brand-logo, .navbar .brand-logo, .logo img, .brand img { width: 140px !important; height: auto !important; max-width: 140px !important; object-fit: contain !important; } /* Jangan membuat kotak/background pada logo */ .logo, .brand-logo { background: transparent !important; border: none !important; box-shadow: none !important; } /* ========================================================== WARNA THEME ========================================================== */ .badge { background: #1596AD !important; } .hero-primary, .btn-primary, button.hero-primary { background: #1596AD !important; border-color: #1596AD !important; } .hero-primary:hover, .btn-primary:hover { background: #12869B !important; } .hero-secondary { color: #1596AD !important; border-color: #1596AD !important; } /* ========================================================== BACKGROUND ========================================================== */ .hero-section, .hero, #home { background-color: #F8FBFD !important; } /* ========================================================= FINAL CONCEPT COLOR - RSIA MAHATI ========================================================= */ /* HAPUS EFEK GRADIENT / WARNA LAMA */ h1.hero-title span.hero-title-line { background: none !important; background-image: none !important; text-shadow: none !important; } /* ========================================================= BERGABUNG TEAL - SAMA DENGAN WARNA BADGE ========================================================= */ h1.hero-title span.hero-title-bergabung, h1.hero-title .hero-title-bergabung { color: #1596AD !important; -webkit-text-fill-color: #1596AD !important; background: none !important; background-image: none !important; } /* ========================================================= BERSAMA CORAL / SALMON ========================================================= */ h1.hero-title span.hero-title-bersama, h1.hero-title .hero-title-bersama { color: #E9827E !important; -webkit-text-fill-color: #E9827E !important; background: none !important; background-image: none !important; } /* ========================================================= RSIA MAHATI SLATE BLUE / ABU BIRU ========================================================= */ h1.hero-title span.hero-title-mahati, h1.hero-title .hero-title-mahati { color: #587384 !important; -webkit-text-fill-color: #587384 !important; background: none !important; background-image: none !important; } /* ========================================================= BADGE ========================================================= */ .badge { background: #1596AD !important; } /* ========================================================= TOMBOL UTAMA ========================================================= */ .hero-primary, .btn-primary { background: #1596AD !important; border-color: #1596AD !important; } .hero-primary:hover, .btn-primary:hover { background: #12869A !important; } /* ========================================================= TOMBOL SECONDARY ========================================================= */ .hero-secondary { color: #1596AD !important; border-color: #1596AD !important; } /* ========================================================= PANAH CAROUSEL ========================================================= */ .hero-carousel button, .carousel-control, .slider-arrow { color: #1596AD !important; } /* ========================================================= LOGO ========================================================= */ .brand-logo, .logo img, .brand img { width: 140px !important; max-width: 140px !important; height: auto !important; object-fit: contain !important; } /* ============================================================ HEADER FINAL - RSIA MAHATI ============================================================ */ /* ------------------------------------------------------------ HAPUS KOTAK / BORDER HITAM DI AREA BRAND ------------------------------------------------------------ */ .brand-info, .brand-text, .brand-content, .logo-text, .header-brand, .brand, .brand-logo-wrap { border: none !important; outline: none !important; box-shadow: none !important; } /* ------------------------------------------------------------ LOGO RSIA MAHATI ------------------------------------------------------------ */ .brand-logo { width: 145px !important; height: auto !important; max-width: 145px !important; object-fit: contain !important; } /* ------------------------------------------------------------ AREA LOGO + NAMA RS ------------------------------------------------------------ */ .brand, .header-brand, .brand-wrapper { display: flex !important; align-items: center !important; gap: 24px !important; } /* ------------------------------------------------------------ NAMA RSIA MAHATI ------------------------------------------------------------ */ .brand-text h1, .brand-info h1, .logo-text h1, .brand-title { margin: 0 !important; padding: 0 !important; border: none !important; outline: none !important; font-size: 30px !important; line-height: 1.15 !important; font-weight: 700 !important; } /* ------------------------------------------------------------ SUBTITLE RUMAH SAKIT IBU DAN ANAK ------------------------------------------------------------ */ .brand-text p, .brand-info p, .logo-text p, .brand-subtitle { margin: 6px 0 0 0 !important; padding: 0 !important; border: none !important; outline: none !important; font-size: 16px !important; line-height: 1.3 !important; } /* ------------------------------------------------------------ PASTIKAN TIDAK ADA BORDER HITAM PADA CHILD ELEMENT ------------------------------------------------------------ */ .brand * , .header-brand * , .brand-info * , .brand-text * { outline-color: transparent !important; } /* ------------------------------------------------------------ DESKTOP ------------------------------------------------------------ */ @media (min-width: 769px) { .brand-logo { width: 145px !important; max-width: 145px !important; } .brand-text h1, .brand-info h1, .logo-text h1, .brand-title { font-size: 30px !important; } .brand-text p, .brand-info p, .logo-text p, .brand-subtitle { font-size: 16px !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 768px) { .brand-logo { width: 105px !important; max-width: 105px !important; } .brand, .header-brand, .brand-wrapper { gap: 12px !important; } .brand-text h1, .brand-info h1, .logo-text h1, .brand-title { font-size: 22px !important; } .brand-text p, .brand-info p, .logo-text p, .brand-subtitle { font-size: 12px !important; } } /* ============================================================ RSIA MAHATI - FINAL SLIDER IMAGE FIX Gambar harus tetap DI DALAM bingkai slider. Mengikuti lebar bingkai + zoom/crop proporsional. ============================================================ */ /* Container slider */ .hero-slider, .hero-carousel, .slider-container, .carousel-container, .image-slider, .hero-image-slider { position: relative !important; overflow: hidden !important; } /* Semua slide */ .hero-slider .slide, .hero-carousel .slide, .slider-container .slide, .carousel-container .slide, .image-slider .slide, .hero-image-slider .slide { position: relative !important; overflow: hidden !important; } /* Bingkai gambar */ .hero-slider .slide img, .hero-carousel .slide img, .slider-container .slide img, .carousel-container .slide img, .image-slider .slide img, .hero-image-slider .slide img { display: block !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; } /* Jika gambar berada langsung di elemen bingkai */ .hero-slider img[src*="mahati"], .hero-carousel img[src*="mahati"], .slider-container img[src*="mahati"], .carousel-container img[src*="mahati"], .image-slider img[src*="mahati"], .hero-image-slider img[src*="mahati"] { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; object-position: center center !important; } /* Tombol Lihat Gambar */ .rsia-view-image-btn { position: absolute !important; right: 14px !important; bottom: 14px !important; z-index: 999 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 13px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.96) !important; color: #148fa5 !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 5px 18px rgba(0,0,0,.15) !important; text-decoration: none !important; } .rsia-view-image-btn:hover { background: #ffffff !important; transform: translateY(-1px) !important; } /* Modal lihat gambar */ .rsia-image-modal { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: none; align-items: center !important; justify-content: center !important; padding: 30px !important; background: rgba(0,0,0,.78) !important; } .rsia-image-modal.active { display: flex !important; } .rsia-image-modal img { display: block !important; max-width: 92vw !important; max-height: 88vh !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 12px !important; box-shadow: 0 20px 70px rgba(0,0,0,.45) !important; } .rsia-image-modal-close { position: absolute !important; top: 18px !important; right: 22px !important; width: 42px !important; height: 42px !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.95) !important; color: #148fa5 !important; font-size: 24px !important; font-weight: 700 !important; cursor: pointer !important; } @media (max-width: 768px) { .hero-slider .slide img, .hero-carousel .slide img, .slider-container .slide img, .carousel-container .slide img, .image-slider .slide img, .hero-image-slider .slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } .rsia-view-image-btn { right: 10px !important; bottom: 10px !important; padding: 7px 10px !important; font-size: 11px !important; } } /* ============================================================ FINAL SLIDER FIX - RSIA MAHATI GAMBAR WAJIB MASUK KE DALAM BINGKAI ============================================================ */ .slider { position: relative !important; width: 100% !important; max-width: 620px !important; height: 465px !important; overflow: hidden !important; border-radius: 24px !important; box-sizing: border-box !important; isolation: isolate !important; } /* Setiap slide mengisi bingkai */ .slider .slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; display: none !important; border-radius: 24px !important; box-sizing: border-box !important; } /* Hanya slide aktif yang tampil */ .slider .slide.active { display: block !important; } /* GAMBAR */ .slider .slide img { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: cover !important; object-position: center center !important; border-radius: 24px !important; box-sizing: border-box !important; } /* Pastikan elemen tambahan tidak membuat gambar keluar */ .slider .slide > * { box-sizing: border-box !important; } /* Tombol View Gambar tetap di dalam bingkai */ .slider .view-image-btn, .slider .slide button { position: absolute !important; left: 50% !important; bottom: 18px !important; transform: translateX(-50%) !important; z-index: 20 !important; white-space: nowrap !important; } /* Tombol navigasi */ .slider .slider-btn { z-index: 30 !important; } /* Dots */ .slider .slider-dots { z-index: 30 !important; } /* ------------------------------------------------------------ TABLET ------------------------------------------------------------ */ @media (max-width: 900px) { .slider { max-width: 100% !important; height: 440px !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 600px) { .slider { width: 100% !important; max-width: 100% !important; height: 420px !important; border-radius: 20px !important; } .slider .slide { border-radius: 20px !important; } .slider .slide img { border-radius: 20px !important; } } /* ------------------------------------------------------------ HP KECIL ------------------------------------------------------------ */ @media (max-width: 420px) { .slider { height: 380px !important; } }