.marketing-contact { text-align: center; margin: 8px 0 0; font-size: 13px; line-height: 1.5; } .marketing-contact a { display: block; font-weight: 600; text-decoration: none; } /* ========================================================== PROMO — SINGLE FINAL RULE ========================================================== - hanya area promo yang horizontal - halaman tetap vertical - gambar asli tidak crop - tinggi mengikuti rasio asli - slide dapat digeser kanan/kiri - slide pertama/terakhir dapat berada di tengah ========================================================== */ #promo-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; align-items: flex-start !important; gap: 20px !important; overflow-x: auto !important; overflow-y: hidden !important; /* * Ruang awal/akhir untuk memungkinkan * slide pertama dan terakhir berada di tengah. */ padding-left: max(20px, calc((100% - 420px) / 2)) !important; padding-right: max(20px, calc((100% - 420px) / 2)) !important; margin: 0 !important; scroll-snap-type: none !important; scroll-behavior: auto !important; overscroll-behavior-x: contain !important; overscroll-behavior-y: auto !important; touch-action: pan-x pan-y !important; scrollbar-width: thin; contain: inline-size !important; } /* ========================================================== SLIDE ========================================================== */ /* ========================================================== KARTU ========================================================== */ #promo-container > .promo-image-card > .promo-only-card { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; transform: none !important; } /* ========================================================== GAMBAR ASLI ========================================================== */ #promo-container .promo-banner-img { display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: none !important; /* * Tidak ada fixed height. * Tidak ada crop. * Rasio asli gambar dipertahankan. */ object-fit: initial !important; object-position: initial !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 18px !important; box-sizing: border-box !important; transform: none !important; } /* Matikan transform/hover yang mungkin berasal dari sistem kartu lama. */ #promo-container .promo-image-card:hover, #promo-container .promo-only-card:hover, #promo-container .promo-banner-img:hover { transform: none !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 768px) { #promo-container { width: 100% !important; max-width: 100% !important; gap: 16px !important; padding-left: 20px !important; padding-right: 20px !important; overflow-x: auto !important; overflow-y: hidden !important; touch-action: pan-x pan-y !important; scroll-snap-type: none !important; } #promo-container > .promo-image-card > .promo-only-card { width: 100% !important; height: auto !important; aspect-ratio: auto !important; overflow: visible !important; } #promo-container .promo-banner-img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; margin-left: auto !important; margin-right: auto !important; object-fit: initial !important; } } /* ========================================================== BODY ========================================================== */ html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } body { touch-action: auto !important; } /* Promo bawah lama */ #full-promo-bottom, .full-promo-container { display: none !important; } /* ========================================================= PROMO OVERRIDE — 260PX / SWIPE / FULL IMAGE / NO CROP ========================================================= */ #promo-container { width: 100% !important; max-width: none !important; display: flex !important; flex-direction: row !important; gap: 20px !important; overflow-x: auto !important; overflow-y: visible !important; padding: 10px 24px 30px 30px !important; margin: 0 !important; box-sizing: border-box !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } #promo-container::-webkit-scrollbar { display: none !important; } #promo-container > .promo-image-card { width: 260px !important; min-width: 260px !important; max-width: 260px !important; flex: 0 0 260px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; transform-style: flat !important; perspective: none !important; } #promo-container > .promo-image-card .promo-only-card { width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; transform-style: flat !important; perspective: none !important; } #promo-container > .promo-image-card .promo-banner-img { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* HP sangat kecil */ @media (max-width: 320px) { #promo-container > .promo-image-card { width: 230px !important; min-width: 230px !important; max-width: 230px !important; flex-basis: 230px !important; } #promo-container > .promo-image-card .promo-only-card, #promo-container > .promo-image-card .promo-banner-img { width: 230px !important; min-width: 230px !important; max-width: 230px !important; } } /* ========================================================= END PROMO OVERRIDE ========================================================= */ /* ========================================================= FINAL PROMO WIDTH FIX Override 420px → 260px Swipe kanan/kiri tetap aktif ========================================================= */ #promo-container > .promo-image-card { width: 260px !important; min-width: 260px !important; max-width: 260px !important; flex: 0 0 260px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; transform: none !important; transform-style: flat !important; perspective: none !important; } #promo-container > .promo-image-card > .promo-only-card { width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; overflow: hidden !important; transform: none !important; transform-style: flat !important; perspective: none !important; } #promo-container > .promo-image-card .promo-banner-img { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; transform: none !important; } /* HP sangat kecil */ @media (max-width: 320px) { #promo-container > .promo-image-card { width: 230px !important; min-width: 230px !important; max-width: 230px !important; flex-basis: 230px !important; } #promo-container > .promo-image-card > .promo-only-card, #promo-container > .promo-image-card .promo-banner-img { width: 230px !important; min-width: 230px !important; max-width: 230px !important; } } /* ========================================================= END FINAL PROMO WIDTH FIX ========================================================= */ /* ========================================================== FAQ BUTTON - NAIK DARI BOTTOM NAV ANDROID ========================================================== */ @media (max-width: 767px) { #faqButton { position: relative !important; top: -30px !important; } } /* ========================================================== PROMO MOBILE - CENTER CARD ========================================================== */ @media (max-width: 767px) { #promo-container { display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; /* ruang agar card pertama bisa benar-benar center */ padding-left: calc((100vw - 260px) / 2) !important; padding-right: calc((100vw - 260px) / 2) !important; box-sizing: border-box !important; } #promo-container > .promo-image-card { flex: 0 0 260px !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; scroll-snap-align: center !important; margin: 0 !important; } #promo-container > .promo-image-card .promo-only-card { width: 260px !important; min-width: 260px !important; max-width: 260px !important; } #promo-container > .promo-image-card .promo-banner-img { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; margin: 0 auto !important; } } /* HP sangat kecil */ @media (max-width: 320px) { #promo-container { padding-left: calc((100vw - 230px) / 2) !important; padding-right: calc((100vw - 230px) / 2) !important; } #promo-container > .promo-image-card { flex-basis: 230px !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; } #promo-container > .promo-image-card .promo-only-card, #promo-container > .promo-image-card .promo-banner-img { width: 230px !important; min-width: 230px !important; max-width: 230px !important; } } /* ========================================================== MOBILE PATCH — RAPATKAN PROMO KE BAGIAN WHATSAPP/FOOTER Tidak mengubah ukuran, posisi horizontal, atau swipe card ========================================================== */ @media (max-width: 600px) { /* Buang ruang kosong ekstra di bawah area promo */ #promo-container { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Kurangi jarak antara akhir main/promo dan section berikutnya */ main.container:has(#promo-container) { margin-bottom: 20px !important; } } /* ========================================================== FINAL LANDSCAPE PROMO — CLEAN Landscape center horizontal. Tinggi mengikuti rasio gambar. Tidak crop. Tidak mengubah portrait. Swipe tetap aktif. ========================================================== */ @media (max-width: 600px) { #promo-container > .promo-image-card.landscape-promo { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 260px !important; align-self: center !important; box-sizing: border-box !important; transform: none !important; perspective: none !important; } #promo-container > .promo-image-card.landscape-promo > .promo-only-card { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; transform: none !important; perspective: none !important; } #promo-container > .promo-image-card.landscape-promo .promo-banner-img { display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; object-fit: contain !important; object-position: center center !important; transform: none !important; } } /* HP sangat kecil */ @media (max-width: 320px) { #promo-container > .promo-image-card.landscape-promo { width: 230px !important; min-width: 230px !important; max-width: 230px !important; flex-basis: 230px !important; } } /* ========================================================== END FINAL LANDSCAPE PROMO — CLEAN ========================================================== */ /* ========================================================== LANDSCAPE CENTER — VERTICAL REFERENCE AREA Hanya landscape. Portrait tidak disentuh. Gambar tetap 260px dan tidak crop. ========================================================== */ @media (max-width: 600px) { /* * Area promo memiliki tinggi minimum yang cukup * untuk menjadi bidang referensi vertikal. */ #promo-container { align-items: center !important; } /* * Landscape tetap mempunyai lebar asli 260px. * Tingginya mengikuti rasio gambar. */ #promo-container > .promo-image-card.landscape-promo { align-self: center !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 260px !important; margin: 0 !important; padding: 0 !important; display: block !important; transform: none !important; box-sizing: border-box !important; } #promo-container > .promo-image-card.landscape-promo > .promo-only-card { width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; transform: none !important; box-sizing: border-box !important; } #promo-container > .promo-image-card.landscape-promo .promo-banner-img { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; box-sizing: border-box !important; } } /* HP sangat kecil */ @media (max-width: 320px) { #promo-container > .promo-image-card.landscape-promo, #promo-container > .promo-image-card.landscape-promo > .promo-only-card, #promo-container > .promo-image-card.landscape-promo .promo-banner-img { width: 230px !important; min-width: 230px !important; max-width: 230px !important; } #promo-container > .promo-image-card.landscape-promo { flex-basis: 230px !important; } } /* ========================================================== END LANDSCAPE CENTER ========================================================== */ /* ========================================================== AUTO FRAME LANDSCAPE — MYREPUBLIC STYLE ---------------------------------------------------------- Landscape : otomatis diberi frame Portrait : tidak disentuh Image : tidak crop Image : tetap utuh ========================================================== */ @media (max-width: 600px) { /* * Frame landscape. * Lebar frame dibuat sedikit lebih besar daripada gambar * supaya gambar benar-benar berada di dalam frame. */ #promo-container > .promo-image-card.landscape-promo { width: 300px !important; min-width: 300px !important; max-width: 300px !important; flex: 0 0 300px !important; display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; position: relative !important; /* * Frame utama MyRepublic. */ background: radial-gradient( circle at 50% 45%, rgba(255,255,255,.10), transparent 48% ), linear-gradient( 145deg, #401060 0%, #65218a 48%, #3a0757 100% ) !important; border-radius: 24px !important; padding: 42px 20px 48px !important; overflow: hidden !important; box-shadow: 0 12px 30px rgba(65, 15, 100, .28), inset 0 0 0 1px rgba(255,255,255,.16) !important; box-sizing: border-box !important; } /* * Glow border. */ #promo-container > .promo-image-card.landscape-promo::before { content: "" !important; position: absolute !important; inset: 14px !important; border-radius: 18px !important; border: 2px solid rgba(255,255,255,.72) !important; box-shadow: 0 0 8px rgba(255,255,255,.65), 0 0 18px rgba(214,85,255,.72), inset 0 0 16px rgba(214,85,255,.22) !important; pointer-events: none !important; z-index: 0 !important; } /* * Logo / branding bagian atas. */ #promo-container > .promo-image-card.landscape-promo::after { content: "🚀 MyRepublic" !important; position: absolute !important; top: 12px !important; left: 0 !important; right: 0 !important; text-align: center !important; color: #ffffff !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: .2px !important; text-shadow: 0 0 8px rgba(255,255,255,.8), 0 0 16px rgba(226,82,255,.8) !important; z-index: 2 !important; pointer-events: none !important; } /* * Isi kartu. */ #promo-container > .promo-image-card.landscape-promo > .promo-only-card { position: relative !important; z-index: 1 !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; display: block !important; background: transparent !important; border-radius: 18px !important; overflow: visible !important; box-sizing: border-box !important; transform: none !important; } /* * Gambar tetap utuh. */ #promo-container > .promo-image-card.landscape-promo .promo-banner-img { display: block !important; width: 260px !important; min-width: 260px !important; max-width: 260px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; border-radius: 16px !important; box-shadow: 0 5px 18px rgba(0,0,0,.24) !important; transform: none !important; box-sizing: border-box !important; } } /* * HP sangat kecil. */ @media (max-width: 320px) { #promo-container > .promo-image-card.landscape-promo { width: 270px !important; min-width: 270px !important; max-width: 270px !important; flex-basis: 270px !important; padding-left: 15px !important; padding-right: 15px !important; } #promo-container > .promo-image-card.landscape-promo > .promo-only-card, #promo-container > .promo-image-card.landscape-promo .promo-banner-img { width: 240px !important; min-width: 240px !important; max-width: 240px !important; } } /* ========================================================== END AUTO FRAME LANDSCAPE ========================================================== */