/* ================================================================ pages/customer-care.css — PT Asuransi Intra Asia Halaman: customer-care-center*.php (8 halaman) Mobile-first. Base = smartphone. Breakpoints: 481 | 769 | 992 Menggantikan: inline ' ================================================================ */ /* ============================================================ HERO BANNER — heights banner-hero.css @max-width:991px zero-kan height/padding dengan !important. Aturan mobile di sini tidak berkonflik karena banner-hero.css hanya zero-kan height di <=991px, sedangkan di sini kita set desktop height di @min-width:992px. ============================================================ */ .banner_man { z-index: 2; border: 0; width: 100%; height: auto; box-sizing: border-box; } .banner_man2 { border: 0; width: 100%; height: auto; background: #4d9cd3; } @media (min-width: 992px) { .banner_man { height: 560px; padding-bottom: 50px; } .banner_man2 { height: 520px; } } /* ============================================================ HERO TEXT color diurus banner-hero.css (.banner_man2 .huruf_banner h3 { color:#fff }). ============================================================ */ .banner_man2 .huruf_banner h3 { text-align: justify; } /* ============================================================ SECTION CONTENT PADDING — berikan breathing room di mobile ============================================================ */ .section-customer-care-page .section-customer-care-page-content { padding: 0 10px; } @media (min-width: 992px) { .section-customer-care-page .section-customer-care-page-content { padding: 64px 112px; } } /* ============================================================ TIPOGRAFI SECTION — mobile base, restore di desktop ============================================================ */ .section-customer-care-page .--customer-care-how-to-claim-header h1, .section-customer-care-page .--customer-care-how-to-claim-header h2 { font-size: 24px; line-height: 1.3; } .section-customer-care-page .--customer-care-how-to-claim-header p, .section-customer-care-page .--customer-care-how-to-claim-content p, .section-customer-care-page .--customer-care-how-to-claim-content li { font-size: 14px; } .section-customer-care-page .--customer-care-how-to-claim-tracker .step-title { font-size: 16px; } .section-customer-care-page .table th, .section-customer-care-page .table td { font-size: 13px; white-space: nowrap; } @media (min-width: 992px) { .section-customer-care-page .--customer-care-how-to-claim-header h1, .section-customer-care-page .--customer-care-how-to-claim-header h2 { font-size: 32px; line-height: 1.25; } .section-customer-care-page .--customer-care-how-to-claim-header p, .section-customer-care-page .--customer-care-how-to-claim-content p, .section-customer-care-page .--customer-care-how-to-claim-content li { font-size: 16px; line-height: 1.6; } .section-customer-care-page .--customer-care-how-to-claim-tracker .step-title { font-size: 18px; line-height: 1.5; } .section-customer-care-page .table th, .section-customer-care-page .table td { font-size: 15px; line-height: 1.45; white-space: normal; } } /* ============================================================ FAQ (customer-care-center-faq.php) ============================================================ */ .ccfaq-wrap { padding: 8px 0 0; } .ccfaq-title { font-size: 26px; font-weight: 700; color: #0c2e5b; margin-bottom: 14px; line-height: 1.1; } .ccfaq-accordion { border: 1px solid #d9d9d9; border-radius: 16px; overflow: hidden; background: #fff; } .ccfaq-accordion .accordion-item { border: 0; border-top: 1px solid #e5e5e5; overflow: hidden; } .ccfaq-accordion .accordion-item:first-child { border-top: 0; } .ccfaq-accordion .accordion-button { background: #fff; color: #0f2745; font-weight: 700; font-size: 16px; box-shadow: none; padding: 16px; width: 100%; margin-left: 0; text-align: left; white-space: normal; word-break: break-word; overflow-wrap: anywhere; } .ccfaq-accordion .accordion-header { width: auto; } .ccfaq-accordion .accordion-button:not(.collapsed) { color: #3295d2; background: #fff; } .ccfaq-accordion .accordion-button::after { background-size: 1.15rem; } .ccfaq-accordion .accordion-body { border-top: 1px solid #ececec; color: #516986; font-size: 14px; line-height: 1.6; padding: 16px; word-break: break-word; overflow-wrap: anywhere; } .ccfaq-accordion .accordion-body * { max-width: 100%; white-space: normal; } .ccfaq-accordion .accordion-body p:last-child { margin-bottom: 0; } @media (min-width: 992px) { .ccfaq-wrap { padding: 16px 8px 0; } .ccfaq-title { font-size: 34px; margin-bottom: 18px; } .ccfaq-accordion .accordion-button { font-size: 20px; padding: 20px 26px; } .ccfaq-accordion .accordion-body { font-size: 16px; padding: 24px 30px; } } /* ============================================================ CEK POLIS (customer-care-center-cekPolis.php) ============================================================ */ .cek-polis-wrap { background: #ffffff; border-radius: 18px; padding: 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); } .cek-polis-wrap h1 { font-size: 22px; line-height: 1.1; margin-bottom: 18px; color: #0f2f4f; font-weight: 700; } .cek-polis-label { margin-bottom: 8px; display: block; color: #193a5b; font-size: 18px; } .cek-polis-form-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 20px; } .cek-polis-form-row input { flex: 1; min-width: 0; height: 54px; border-radius: 16px; border: 1px solid #d4d7db; padding: 0 20px; font-size: 26px; color: #0f2f4f; background: #ffffff; } .cek-polis-form-row input:focus { outline: none; border-color: #5ca8dc; box-shadow: 0 0 0 2px rgba(76, 146, 203, 0.15); } .btn-cek-polis { border: 0; background: #2f94d4; color: #ffffff; border-radius: 38px; height: 54px; width: 100%; min-width: 0; padding: 0 30px; font-size: 30px; line-height: 1; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 8px 20px rgba(26, 117, 178, 0.28); } .btn-cek-polis:focus { outline: none; } .btn-cek-polis .arrow { font-size: 28px; line-height: 1; } .cek-polis-result { margin-top: 8px; border: 1px solid #d7dce1; border-radius: 16px; padding: 18px 22px 12px; color: #36516d; } .cek-polis-result p { margin-bottom: 10px; font-size: 16px; line-height: 1.4; color: #3e5871; } .cek-polis-result .period { border-top: 1px solid #d7dce1; margin-top: 8px; padding-top: 12px; display: flex; align-items: center; gap: 10px; color: #29445f; } .cek-polis-result .period-icon { font-size: 24px; line-height: 1; } .cek-polis-result .result-empty { margin-bottom: 0; color: #6c7f92; } @media (min-width: 992px) { .cek-polis-wrap { padding: 28px; } .cek-polis-form-row { flex-direction: row; align-items: center; gap: 14px; } .cek-polis-form-row input { height: 66px; font-size: 22px; } .btn-cek-polis { height: 66px; width: auto; min-width: 180px; font-size: 20px; } .btn-cek-polis .arrow { font-size: 20px; } } /* ============================================================ DAFTAR BENGKEL (customer-care-center-daftar-bengkel.php) ============================================================ */ .--customer-care-daftar-bengkel-table .table thead th { vertical-align: middle; border-color: #fdd405; } .--customer-care-daftar-bengkel-table .workshop-row td { background-color: #f7f7f7; vertical-align: middle; } .--customer-care-daftar-bengkel-table .detail-row td { background-color: #dbe6ef; padding: 14px 18px; } .--customer-care-daftar-bengkel-table .detail-grid { display: grid; grid-template-columns: 1fr; row-gap: 4px; column-gap: 12px; } .--customer-care-daftar-bengkel-table .toggle-detail { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: #2a95d6; font-size: 18px; line-height: 1; padding: 0; } .--customer-care-daftar-bengkel-table .toggle-detail:focus { outline: none; box-shadow: none; } .--customer-care-daftar-bengkel-table .workshop-address { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .--customer-care-daftar-bengkel-table .pagination-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .--customer-care-daftar-bengkel-table .pagination-wrap button { border: 1px solid #d1d5db; background: #ffffff; padding: 6px 12px; border-radius: 4px; font-size: 14px; line-height: 1.3; color: #1f2937; } .--customer-care-daftar-bengkel-table .pagination-wrap button.active { background: #009cea; border-color: #009cea; color: #ffffff; } .--customer-care-daftar-bengkel-table .pagination-wrap button:disabled { opacity: 0.5; cursor: not-allowed; } .--customer-care-daftar-bengkel-table .table-message { margin-top: 12px; color: #1f2937; font-size: 14px; } @media (max-width: 991px) { /* Cegah tabel meluber (perlu scroll horizontal) di layar HP: paksa lebar 100%, izinkan teks membungkus, kecilkan font/padding. */ .--customer-care-daftar-bengkel-table .table { width: 100%; } .--customer-care-daftar-bengkel-table .table th, .--customer-care-daftar-bengkel-table .table td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; font-size: 13px; padding: 8px 10px; } } @media (min-width: 992px) { .--customer-care-daftar-bengkel-table .detail-grid { grid-template-columns: 160px 1fr; row-gap: 8px; } .--customer-care-daftar-bengkel-table .workshop-address { align-items: center; } } /* ============================================================ MEKANISME PENGADUAN (customer-care-center-mekanisme-pengaduan.php) ============================================================ */ .--customer-care-how-to-claim-header { padding: 20px 20px 0 20px; } .--customer-care-how-to-claim-header h2 { font-size: 24px; margin-bottom: 8px; color: black; } .--customer-care-how-to-claim-body { padding: 16px; color: black; font-size: 14px; line-height: 1.7; } .--customer-care-how-to-claim-body ol, .--customer-care-how-to-claim-body ul { padding-left: 25px; margin-bottom: 15px; } .--customer-care-how-to-claim-body li { margin-bottom: 5px; color: black; } .--customer-care-how-to-claim-body p { color: black; margin-bottom: 10px; } .contact-link { display: inline-flex; align-items: center; text-decoration: none; color: #007bff; gap: 8px; margin-right: 0; font-size: 13px; } .contact-link:hover { text-decoration: underline; color: #0056b3; } .contact-link i { font-size: 16px; } .contact-wrapper { display: flex; align-items: center; gap: 20px; margin-top: 10px; flex-wrap: wrap; } @media (min-width: 992px) { .--customer-care-how-to-claim-header h2 { font-size: 24px; } .--customer-care-how-to-claim-body { padding: 20px; font-size: 20px; } .contact-link { font-size: 14px; margin-right: 20px; } } /* ============================================================ PROVIDER (customer-care-center-provider.php) ============================================================ */ .--customer-care-daftar-provider-table .table thead th { vertical-align: middle; border-color: #fdd405; } .--customer-care-daftar-provider-table .provider-row td { background-color: #f7f7f7; vertical-align: middle; } .--customer-care-daftar-provider-table .detail-row td { background-color: #dbe6ef; padding: 14px 18px; white-space: normal; } .--customer-care-daftar-provider-table .detail-grid { display: grid; grid-template-columns: 1fr; row-gap: 4px; column-gap: 12px; } .--customer-care-daftar-provider-table .tpa-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .--customer-care-daftar-provider-table .toggle-detail { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: #2a95d6; font-size: 18px; line-height: 1; padding: 0; } .--customer-care-daftar-provider-table .toggle-detail:focus { outline: none; box-shadow: none; } .--customer-care-daftar-provider-table .pagination-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 8px; background: #eef2f5; border-radius: 8px; } .--customer-care-daftar-provider-table .pagination-wrap button { border: 1px solid #d1d5db; background: #ffffff; width: 38px; height: 38px; border-radius: 8px; font-size: 16px; line-height: 1; color: #1f2937; display: inline-flex; align-items: center; justify-content: center; } .--customer-care-daftar-provider-table .pagination-wrap button.page-number, .--customer-care-daftar-provider-table .pagination-wrap button.page-ellipsis { font-size: 16px; line-height: 1; } .--customer-care-daftar-provider-table .pagination-wrap button.page-ellipsis { cursor: default; background: #ffffff; border-color: #d1d5db; } .--customer-care-daftar-provider-table .pagination-wrap button.active { background: #3498db; border-color: #3498db; color: #ffffff; } .--customer-care-daftar-provider-table .pagination-wrap button:disabled { opacity: 0.5; cursor: not-allowed; } .--customer-care-daftar-provider-table .table-message { margin-top: 12px; color: #1f2937; font-size: 14px; } @media (max-width: 991px) { /* Cegah tabel meluber (perlu scroll horizontal) di layar HP: paksa lebar 100%, izinkan teks membungkus, kecilkan font/padding. */ .--customer-care-daftar-provider-table .table { width: 100%; } .--customer-care-daftar-provider-table .table th, .--customer-care-daftar-provider-table .table td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; font-size: 13px; padding: 8px 10px; } } @media (min-width: 992px) { .--customer-care-daftar-provider-table .detail-grid { grid-template-columns: 170px 1fr; row-gap: 8px; } .--customer-care-daftar-provider-table .tpa-wrap { align-items: center; } .--customer-care-daftar-provider-table .pagination-wrap button { width: 42px; height: 42px; font-size: 18px; } .--customer-care-daftar-provider-table .pagination-wrap button.page-number, .--customer-care-daftar-provider-table .pagination-wrap button.page-ellipsis { font-size: 18px; } } /* ============================================================ PUBLIKASI PENGADUAN (customer-care-center-publikasi-pengaduan.php) ============================================================ */ .publikasi-list { padding: 10px 20px; } .publikasi-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 15px; border-bottom: 1px solid #e0e0e0; background-color: #fff; } .publikasi-item:last-child { border-bottom: none; } .publikasi-left { display: flex; align-items: center; gap: 10px; color: black; font-size: 13px; } .publikasi-left i { font-size: 16px; color: #0a9edd; min-width: 20px; } .btn-unduh { background-color: #0a9edd; color: white; padding: 6px 16px; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 12px; white-space: nowrap; transition: background-color 0.2s; } .btn-unduh:hover { background-color: #0880b8; color: white; text-decoration: none; } @media (min-width: 992px) { .publikasi-left { gap: 15px; font-size: 15px; } .publikasi-left i { font-size: 20px; } .btn-unduh { padding: 8px 25px; font-size: 14px; } }