/*
 * ═══════════════════════════════════════════════════════════════════
 * tv.css — PT Asuransi Intra Asia
 * SEMUA tampilan khusus LAYAR TV (lebar ≥1920px) untuk SEMUA halaman
 * dikumpulkan di file ini — satu tempat kontrol.
 *
 * File ini dimuat PALING AKHIR (lihat index1.php / index2.php), jadi
 * aturan di sini menang atas semua file CSS lain.
 *
 * AMAN DIEDIT: semua rule terkunci di @media (min-width: 1920px),
 * sehingga laptop, tablet, dan HP TIDAK akan terpengaruh sama sekali.
 *
 * CARA ATUR (ubah angkanya saja):
 *   font-size    = ukuran teks
 *   line-height  = jarak antar baris (naikkan jika baris menumpuk)
 *   margin-left  = minus (mis. -250px) geser KIRI, plus geser KANAN, 0 normal
 *   Jangan hapus !important yang sudah ada — perlu untuk menang
 *   atas rule !important di file CSS lain.
 *
 * DAFTAR ISI:
 *   1. UMUM (semua halaman) — container + judul section h1-h3
 *   2. HALAMAN INDEX — banner/hero paling atas (banner.php)
 *   3. BANNER HALAMAN LAIN (.banner_man2 — contact, governance, dll)
 *   4. HALAMAN MEDIA / BERITA
 *   5. HALAMAN PRODUK
 *   6. FOOTER
 * ═══════════════════════════════════════════════════════════════════
 */

@media (min-width: 1920px) {

    /* ════════════════════════════════════════════════════════════
       1. UMUM — berlaku di SEMUA halaman
       ════════════════════════════════════════════════════════════ */

    /* Lebar area konten di TV. Lebih besar = konten makin melebar. */
    body .container {
        max-width: 1500px;               /* EDIT: lebar konten di TV */
    }

    /* Judul section & heading umum (di bawah banner).
       JANGAN taruh angka ekstrem di sini karena kena semua halaman —
       untuk banner index pakai bagian 2 di bawah. */
    h1,
    .section-title h2 {
        font-size: 48px !important;      /* EDIT: ukuran judul section */
        line-height: 70px !important;
        margin-left: 0 !important;       /* EDIT: geser kiri/kanan judul section */
        margin-right: 0 !important;
        padding-left: 0 !important;
    }

    h2 {
        font-size: 40px !important;      /* EDIT: ukuran h2 umum */
        line-height: 50px !important;
        margin-left: 0 !important;       /* EDIT: geser kiri/kanan h2 */
        margin-right: 0 !important;
        padding-left: 0 !important;
    }

    h3 {
        font-size: 30px !important;      /* EDIT: ukuran h3 umum */
        line-height: 40px !important;
        margin-left: 0 !important;       /* EDIT: geser kiri/kanan h3 */
        margin-right: 0 !important;
        padding-left: 0 !important;
    }

    /* CATATAN: sengaja TIDAK ada rule `p` global.
       p global + !important memaksa SEMUA paragraf (kartu produk, FAQ,
       footer, dll.) jadi satu ukuran dan merusak layout section. */


    /* ════════════════════════════════════════════════════════════
       2. HALAMAN INDEX — banner/hero paling atas (banner.php)
       Rule dikunci ke #hero jadi ukuran besar + geseran di sini
       TIDAK menular ke section bawah / halaman lain.
       ════════════════════════════════════════════════════════════ */

    /* Judul besar banner index */
    body.index-page #hero h1 {
        font-size: 100px !important;
        line-height: 80px !important;
        margin-left: -250px !important;  /* EDIT: geser kiri/kanan judul banner */
        margin-right: 0 !important;
    }

    /* Deskripsi banner index */
    body.index-page #hero p {
        font-size: 50px !important;
        line-height: 40px !important;    /* EDIT: naikkan (mis. 60px) jika baris terlalu rapat */
        margin-left: -250px !important;  /* EDIT: geser kiri/kanan deskripsi banner */
        margin-right: 0 !important;
    }

    /* Teks slider berjalan di banner index.
       Ukuran laptop (32px) & mobile (19px) diatur homepage.css — jangan di sini. */
    body.index-page #hero #slider li h2,
    body.index-page #hero h2 {
        font-size: 40px !important;      /* EDIT: ukuran teks slider di TV */
        margin-left: -250px !important;  /* EDIT: geser kiri/kanan teks slider */
        margin-right: 0 !important;
    }


    /* ════════════════════════════════════════════════════════════
       3. BANNER HALAMAN LAIN (.banner_man2)
       contact, governance, customer care, management, dll.
       ════════════════════════════════════════════════════════════ */

    body .banner_man {
        height: 660px;                   /* EDIT: tinggi area banner */
    }

    body .banner_man2 {
        height: 620px;                   /* EDIT: tinggi kotak biru banner */
    }

    body .huruf_banner h1,
    body .huruf_banner_contact h1 {
        font-size: 80px !important;      /* EDIT: ukuran judul banner halaman lain */
        line-height: 76px !important;
    }

    body .huruf_banner h3,
    body .huruf_banner p,
    body .huruf_banner_contact p {
        font-size: 40px !important;      /* EDIT: ukuran deskripsi banner halaman lain */
        line-height: 30px !important;    /* EDIT: naikkan jika baris menumpuk */
    }


    /* ════════════════════════════════════════════════════════════
       4. HALAMAN MEDIA / BERITA
       ════════════════════════════════════════════════════════════ */

    body .section-media-page-hero {
        height: 520px;                   /* EDIT: tinggi hero halaman media */
    }

    /* Grid kartu artikel: 4 kolom di TV (desktop biasa 3 kolom) */
    body .section-media-page-content .body-tab-media__item-box {
        grid-template-columns: repeat(4, 1fr);  /* EDIT: ganti angka 4 utk jumlah kolom */
        gap: 40px;
    }

    body .card-article-top {
        height: 240px;                   /* EDIT: tinggi gambar kartu artikel */
    }

    body .card-article-title {
        font-size: 20px;                 /* EDIT: ukuran judul kartu artikel */
        line-height: 28px;
    }

    body .card-article-desc {
        font-size: 16px;                 /* EDIT: ukuran deskripsi kartu artikel */
        line-height: 24px;
    }


    /* ════════════════════════════════════════════════════════════
       5. HALAMAN PRODUK
       ════════════════════════════════════════════════════════════ */

    body .section-product-page__jumbroton .--product-icon img {
        width: 460px;                    /* EDIT: ukuran gambar ikon produk */
        height: auto;
    }

    body .section-product-page__jumbroton .--product-name-content h2 {
        font-size: 60px !important;      /* EDIT: ukuran nama produk */
        line-height: 70px !important;
    }

    body .section-product-page__jumbroton .--product-name-content h4 {
        font-size: 34px !important;
        line-height: 44px !important;
    }

    body .section-product-page__jumbroton .--product-name-content p {
        font-size: 20px !important;
        line-height: 30px !important;
    }

    body .section-product-page__why-choose-me .get-product {
        max-width: 1000px;               /* EDIT: lebar kartu "dapatkan produk" */
    }

    body .section-product-page__why-choose-me-product .insurance-navigation {
        max-width: 1000px;
    }

    body .section-product-page__why-choose-me-content .title {
        font-size: 44px !important;
        line-height: 54px !important;
    }

    body .accordion-button2 {
        font-size: 24px !important;      /* EDIT: ukuran judul accordion */
    }

    body .accordion-body {
        font-size: 17px;                 /* EDIT: ukuran isi accordion */
        line-height: 28px;
    }


    /* ════════════════════════════════════════════════════════════
       6. FOOTER
       ════════════════════════════════════════════════════════════ */

    body footer h4 {
        font-size: 20px;                 /* EDIT: ukuran judul kolom footer */
    }

    body footer p,
    body footer a {
        font-size: 16px;                 /* EDIT: ukuran teks & link footer */
    }
}