.swiper-button-next.pdc_op_category {
    right: 0 !important;
    width: auto !important;
}

#clr_op_category .swiper-button-next:after,
.swiper-button-prev:after,
.swiper-button-next:after,
#hp_type_solusi .swiper-button-next:after {
    content: '' !important;
}

#clr_op_category .swiper-button-next {
    top: 21px;
}

#clr_op_products .swiper-pagination {
    position: static;
    margin-top: 2rem;
}

.clr_hp_tren_item_wrapper {
    opacity: 0;
    transform: translateX(0);
}

.clr_hp_tren_item_wrapper.left.animate {
    animation: slideInFromRight 1.2s ease-in-out forwards;
}

.clr_hp_tren_item_wrapper.right.animate {
    animation: slideInFromLeft 1.2s ease-in-out forwards;
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.navbar_link_wrapper.product:hover .navbar_popup_hover_wrapper.product,
.navbar_link_wrapper.about:hover .navbar_popup_hover_wrapper.about,
.navbar_link_wrapper.relations:hover .navbar_popup_hover_wrapper.relations {
    opacity: 100%;
    max-height: calc(90vh - 7rem);
}

.navbar_popup_link.tatakelola:hover #popup_tatakelola {
    display: flex;
}

.button:hover .image.product.front,
.button.button-white-shadow:hover .image.product.front,
.button.product:hover .image.product.front {
    display: none;
    opacity: 0;
    transition: all 400ms;
}

.button:hover .image.product.behind,
.button.button-white-shadow:hover .image.product.behind,
.button.product:hover .image.product.behind {
    display: block;
    opacity: 1;
    transition: all 400ms;
}

.button .image.product.front {
    display: block;
    opacity: 1;
    transition: all 400ms;
}

.button .image.product.behind {
    display: none;
    opacity: 0;
    transition: all 400ms;
}

.dropdown.calculator .list,
.dropdown.calculator::after {
    margin-top: -6px;
}

.hi_tkp_bp_hero_wrapper img {
    height: 100%;
}

.hi_tkp_dk_item:hover .hi_tkp_dk_item_anim,
.abt_hp_personel_item:hover .hi_tkp_dk_item_anim {
    height: 100%;
    transition: all .4s;
}

.swiper-pagination-bullet-active {
    background-color: #00685F;
}

.swiper-pagination-bullet {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 8px;
}

.w-container {
    max-width: none !important;
}

.w-input,
.w-select {
    font-size: 18px;
}

.w-input:focus,
.w-select:focus {
    border-color: var(--footer-green-avian) !important;
}

.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.line-clamp-2 {
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    -webkit-line-clamp: 3;
}

label.error {
    color: red;
    font-size: 12px;
    font-weight: 500;
    margin-top: 0px;
}

.w-input.error {
    border-color: red;
}

#target-select-list {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s, opacity 0.3s ease;
}

#target-select-list.open {
    display: flex;
    opacity: 1;
    visibility: visible;
}

 .nice-select {
     border-top: 0px;
     border-left: 0px;
     border-right: 0px;
     border-bottom: 1px solid #0006;
     -webkit-tap-highlight-color: transparent;
     line-height: 150%;
     box-sizing: border-box;
     clear: both;
     padding: .5rem 2rem .5rem .2rem;
     position: relative;
     text-align: left !important;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     white-space: nowrap;
     border-radius: 0px;
     background: white;
 }

.nice-select:hover {
    background: var(--white-avian) !important;
    border-color: #0006;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-color: var(--footer-green-avian);
}

.nice-select:after {
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    border-right: 2px solid rgba(0, 0, 0, 0.4);
    content: '';
    display: block;
    height: 7px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 7px;
}

.nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    background-color: var(--white-avian);
    color: var(--black-avian);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    /*overflow: hidden;*/
    /*custom*/
    overflow-x: clip;
    overflow-y: auto;
    white-space: normal;
    /*custom*/
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    max-height: 200px;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
}

.nice-select .list:hover .option:not(:hover) {
    background: var(--white-avian);
    color: var(--black-avian);
}

.nice-select .option {
    cursor: pointer;
    font-weight: 500;
    line-height: 1.5em;
    list-style: none;
    min-height: 0;
    outline: none;
    padding: .5rem 1rem;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.nice-select .option:first-child {
    /*display: none;*/
}

span.current {
    color: var(--black-avian);
    font-weight: 500;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    background-color: var(--light-green-avian);
    color: var(--black-avian);
}

.nice-select .option.selected {
    color: var(--white-avian);
    font-weight: 500;
}

.nice-select .option:hover {
    color: var(--black-avian);
}

.nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

.pii_ahi_select {
    border-radius: 5px;
    padding-left: 1rem;
    padding-right: 4rem;
}

.pii_ahi_select:hover {
    background-color: #e0e6df !important;
}

.pii_ahi_select .option:hover,
.pii_ahi_select .option.focus,
.pii_ahi_select .option.selected.focus {
    background-color: var(--white-avian);
    color: var(--light-green-avian);
}

.pii_ahi_select::before {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--footer-green-avian);
    content: '';
    display: block;
    height: 38px;
    margin-top: 0px;
    pointer-events: none;
    position: absolute;
    right: 0;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 42px;
}

.pii_ahi_select::after {
    border-bottom: 2px solid var(--white-avian) !important;
    border-right: 2px solid var(--white-avian) !important;
    right: 17px !important;
    margin-top: -5.5px;
}

.kar_tp_order span.current,
.pii_ahi_select span.current {
    display: inline-block;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kar_tp_order .option:hover,
.kar_tp_order .option.focus,
.kar_tp_order .option.selected.focus,
.kar_tp_select .option:hover,
.kar_tp_select .option.focus,
.kar_tp_select .option.selected.focus {
    background-color: var(--white-avian);
    color: var(--light-green-avian);
}

.kar_tp_select {
    padding: .5rem 2rem .5rem 3rem;
    height: 100% !important;
}

.kar_tp_select::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.kar_tp_select::after {
    top: 49% !important;
    right: 17px !important;
}

.kar_tp_select.kar_bp::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b2394d211e01fdf571663_Icon%20Perusahaan(1).png');
}

.kar_tp_select.kar_posisi::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b23949b9ce253c9406bf0_Icon%20Posisi.png');
}

.kar_tp_select.kar_lokasi::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b2394eb0f79da8ddbbcab_Icon%20Lokasi.png');
}

.kar_tp_select.kar_perusahaan::before {
    background-image: url('https://cdn.prod.website-files.com/67ca9fcedad121f487cfe4cd/681b23944849620e339a7405_Icon%20Perusahaan.png');
}

.kar_tp_select .current {
    line-height: 165%;
}

.kar_tp_order::after {
    top: 7px !important;
}

.kar_tp_order {
    line-height: 135%;
}

.hi_tkp_dk_item_img {
    object-position: center top;
    aspect-ratio: 443 / 477;
    width: 100%;
    margin-top: -2.3rem;
    display: flex;
    position: relative;
    overflow: hidden;
}

.hi_tkp_dk_item_bg_wrapper {
    display: flex;
    position: relative;
    padding-left: .5rem;
    padding-right: .5rem;
}

.hi_tkp_dk_item_img img {
    object-position: center top;
}

.hi_tkp_sticky {
    box-shadow: 0 16px 8px #0002;
}

.objectfit_contain {
    object-fit: contain !important;
}

.psd_map_list_item.is-active .certif_ac_chevron {
    transform: rotate(90deg);
}
.psd_map_list_item.is-active .certif_folder_icon.front {
    opacity: 0;
}
.psd_map_list_item.is-active .certif_folder_icon.back {
    opacity: 1;
}

.hi_tkp_dk_item_img.personel {
    max-width: 15rem;
    width: 100%;
    margin-top: 0;
}

.hi_tkp_dk_item_img img {
    object-position: center top;
}

@media only screen and (max-width: 767px) {
    .grid.news p:first-of-type {
        font-size: 16px;
    }

    .grid.news p:last-of-type {
        font-size: 12px;
    }

    .certif_ac_item_last p,
    .certif_iso_container .certif_iso_item div:nth-child(2) {
        margin-top: -.3rem;
    }

    .certif_iso_container .certif_iso_item.psd_map_list_item.child-2 {
        align-items: start;
    }

    .swiper-pagination-bullet {
        width: 1rem !important;
        height: 1rem !important;
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 4px !important;
    }
}

@media only screen and (max-width: 991px) {
    .w-input,
    .w-select {
        font-size: 16px;
    }

    .hi_tkp_dk_item_bg_wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media only screen and (min-width: 767px) {
    html.lenis {
        height: auto;
    }

    .lenis.lenis-smooth {
        scroll-behavior: auto;
    }

    .lenis.lenis-smooth [data-lenis-prevent] {
        overscroll-behavior: contain;
    }

    .lenis.lenis-stopped {
        overflow: hidden;
    }
}

/* Kolom Agenda di tabel Kegiatan Komite Perusahaan (lihat
   Umum::teksDenganDaftarBernomor): daftar bernomor manual ("1. ...", "2. ...")
   dirender jadi <ol><li> yang rapi, supaya baris yang membungkus (wrap) tetap
   menjorok ke bawah teks, bukan balik ke margin kiri. */
.teks_daftar_bernomor {
    text-align: left;
}

.teks_daftar_bernomor p,
.teks_daftar_bernomor ol {
    margin: 0 0 0.5rem 0;
    padding-left: 0;
}

.teks_daftar_bernomor ol {
    list-style: none;
}

/* Hanging indent lewat flexbox (bukan text-indent negatif yang nilainya
   ditebak): kolom nomor (.teks_daftar_bernomor_nomor) lebarnya menyesuaikan
   render aslinya sendiri, jadi baris pertama tiap item tetap rata kiri
   sejajar paragraf biasa, DAN baris lanjutan yang wrap (di dalam
   .teks_daftar_bernomor_isi) sejajar presisi dengan baris pertama —
   presisi untuk nomor 1 digit ("1.") maupun 2 digit ("10.") sekaligus. */
.teks_daftar_bernomor li {
    display: flex;
    margin-bottom: 0.35rem;
}

.teks_daftar_bernomor_nomor {
    flex: 0 0 auto;
    padding-right: 0.4em;
}

.teks_daftar_bernomor_isi {
    flex: 1 1 auto;
    min-width: 0;
}

.teks_daftar_bernomor p:last-child,
.teks_daftar_bernomor ol:last-child,
.teks_daftar_bernomor li:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Isi rich text dari editor BackOffice (TinyMCE)
   ==========================================================================
   Dipakai lewat Umum::teksKaya() — profil personel, keterangan jabatan,
   pengalaman, dan pesan sambutan. Isinya HTML utuh (<p>, <ul>, <strong>),
   jadi jaraknya diatur di sini, bukan lewat <br><br> di blade.

   Disasar spesifik ke .teks_kaya supaya <p>/<ul> lain di halaman — yang
   memang sengaja tanpa margin (lihat avianbrands.css) — tidak ikut berubah. */
.teks_kaya p,
.teks_kaya ul,
.teks_kaya ol,
.teks_kaya table,
.teks_kaya blockquote {
    margin: 0 0 0.75rem 0;
}

.teks_kaya ul,
.teks_kaya ol {
    padding-left: 1.25rem;
}

.teks_kaya ul {
    list-style: disc;
}

.teks_kaya ol {
    list-style: decimal;
}

.teks_kaya li {
    margin-bottom: 0.25rem;
}

.teks_kaya h1,
.teks_kaya h2,
.teks_kaya h3,
.teks_kaya h4,
.teks_kaya h5,
.teks_kaya h6 {
    margin: 1rem 0 0.5rem 0;
}

.teks_kaya img {
    max-width: 100%;
    height: auto;
}

.teks_kaya a {
    text-decoration: underline;
}

/* Margin terakhir dibuang supaya jarak antar blok tetap ditentukan wadahnya
   (mis. gap flex di .hi_tkp_detail_top_description), bukan menumpuk. */
.teks_kaya > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Perbaikan responsive mobile — lihat docs/responsive-mobile-plan.md
   ========================================================================== */

/* M5 — Tombol "Unduh Dokumen" di rincian produk. Dulu kolomnya ditulis inline
   per halaman (".25fr" per dokumen, tanpa media query) sehingga menimpa aturan
   mobile Webflow dan tombol tinggal ~104px di layar 375px. Kolom kini mengikuti
   jumlah dokumen secara otomatis; di mobile tombol memenuhi lebar. */
.pdd_button_wrapper {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 16rem));
}

.button.product.document .pdd_product_compare_img {
    flex: none;
}

@media screen and (max-width: 479px) {
    .pdd_button_wrapper {
        grid-template-columns: 1fr;
    }
}

/* M2 — Grafik informasi keuangan (laba rugi, posisi keuangan, rasio
   keuangan). Desktop: dua kartu 30rem per baris. Di <= 991px dua kartu tidak
   muat, dan `.hi_tkp_dk_grid { width: fit-content }` milik Webflow membuat grid
   melebar lalu terpusat di luar layar (grafik ke-2 tiap baris tak terlihat).
   Di layar sempit kartu disusun satu kolom selebar wadah. */
.grafik_keuangan_kartu {
    max-width: 30rem;
    padding: 2rem 1.5rem;
    margin-bottom: 50px;
}

@media screen and (max-width: 991px) {
    .grafik_keuangan,
    .grafik_keuangan .abt_hp_management,
    .grafik_keuangan .abt_hp_management_item {
        width: 100%;
    }

    .hi_tkp_dk_grid.grafik_keuangan {
        gap: 1.5rem;
    }

    .grafik_keuangan .abt_hp_management {
        overflow: visible;
        padding: 0;
    }

    .grafik_keuangan .abt_hp_management_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .grafik_keuangan_kartu {
        width: 100%;
        margin-bottom: 0;
    }

    .grafik_keuangan_kartu img {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 479px) {
    .grafik_keuangan_kartu {
        padding: 1rem;
    }
}

/* M4 — Tabel materi presentasi & laporan keuangan. Tiap sel punya
   `padding: 20px` inline sehingga 5 kolom melebihi layar dan kolom FY
   terpotong. Wadah bisa digeser sebagai pengaman; di mobile padding sel
   dirapatkan (perlu !important karena padding ditulis inline per sel). */
.tabel_gulir {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 767px) {
    .tabel_responsif th,
    .tabel_responsif td {
        padding: 12px 6px !important;
    }

    .tabel_responsif th:first-child,
    .tabel_responsif td:first-child {
        padding-left: 12px !important;
    }

    .tabel_responsif th:not(:first-child) {
        width: auto !important;
    }
}

/* M3 — Pagination (keterbukaan informasi, press release, koleksi warna).
   Deret nomor dirender dalam satu baris flex tanpa wrap; dengan 10 nomor
   lebarnya ~550px sehingga halaman awal/akhir dan tombol prev/next terpotong.
   Jumlah nomor dikurangi lewat onEachSide(1) di pemanggil; di mobile deret
   boleh turun baris sebagai pengaman. */
@media screen and (max-width: 479px) {
    .hi_ki_pr_pagination {
        grid-column-gap: .5rem;
    }

    .hi_ki_pr_pagination_number_wrapper {
        flex-wrap: wrap;
        justify-content: center;
        grid-column-gap: .25rem;
        grid-row-gap: .25rem;
    }

    .hi_ki_pr_pagination .clr_collection_pagination {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* M8 — Teks rata kiri-kanan (justify) di kolom sempit menimbulkan celah antar
   kata yang lebar. Desktop tetap justify; di mobile & tablet dirata kiri (T4:
   di tablet kolom 2-up seperti UNGC/BEI di /keberlanjutan hanya ~330px).
   !important diperlukan karena sebagian ditulis di <style> halaman (dimuat
   setelah file ini) atau inline style="" (termasuk isi dari editor WYSIWYG). */
@media screen and (max-width: 991px) {
    .text-align-justify,
    .text-align-justify-portrait,
    .certif_gls_text,
    .kbt_hp_commitment_text,
    .article-content p,
    .teks_kaya p,
    [style*="text-align: justify"],
    [style*="text-align:justify"] {
        text-align: left !important;
    }
}

/* M9 — Target sentuh. Panah slider (11–27px), swatch warna (24px) dan tautan
   "Lihat Lebih Lanjut" (tinggi 21px) terlalu kecil untuk jari. Area klik
   diperluas lewat ::before transparan; ukuran visual tidak berubah. */
@media screen and (max-width: 767px) {
    .swiper-button-next::before,
    .swiper-button-prev::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);
    }

    a.hp_color {
        position: relative;
    }

    a.hp_color::before {
        content: '';
        position: absolute;
        inset: -6px;
    }

    .button.button--secondary {
        position: relative;
    }

    .button.button--secondary::before {
        content: '';
        position: absolute;
        inset: -12px 0;
    }
}

/* M10 — Teks di bawah 12px di mobile: label "BARU" kartu produk (11.2px) dan
   badge jumlah di pusat distribusi (10px). Judul hero keberlanjutan diatur
   inline di view-nya (max(12px, 3vw)). */
@media screen and (max-width: 479px) {
    .font_size_rp {
        font-size: 12px;
    }

    /* <style> halaman kategori/solusi/rincian produk memakai 0.7em !important. */
    .product_label .product_label_text {
        font-size: 12px !important;
    }
}

/* M7 — Kartu personel struktur organisasi (dewan komisaris, direksi, komite,
   sekretaris perusahaan, unit audit internal). Di mobile Webflow menderetkan
   kartu ke samping dalam wadah overflow tanpa petunjuk geser, sehingga hanya
   kartu pertama yang terlihat. Di <= 767px kartu disusun grid 2 kolom;
   `display: contents` meleburkan potongan per-3 (chunk) ke dalam satu grid. */
@media screen and (max-width: 767px) {
    .abt_hp_management.daftar_personel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        justify-items: stretch;
        gap: 1rem;
        width: 100%;
        overflow: visible;
    }

    .daftar_personel > .abt_hp_management_item {
        display: contents;
    }

    /* Kartu komite membawa id Webflow yang sama (#w-node-…) dengan
       grid-area 1/1/2/3, sehingga semuanya menumpuk di satu sel. */
    .abt_hp_management.daftar_personel .hi_tkp_dk_item {
        grid-area: auto !important;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* Di ponsel kecil (320px) kolom ~137px: kata jabatan panjang ("Pengembangan")
   + padding kartu bisa melebihi kolom. */
@media screen and (max-width: 479px) {
    .abt_hp_management.daftar_personel .hi_tkp_dk_item {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .daftar_personel .hi_tkp_dk_item_description p {
        overflow-wrap: anywhere;
    }

    .daftar_personel .hi_tkp_dk_item_description p.text_gray {
        font-size: 14px;
    }
}

/* M11 — Nilai di kartu skor keberlanjutan berupa <h1> dari editor (24px).
   Nilai pendek ("17,3") pas, tetapi nilai panjang ("Percentile Rank Top 11%
   (Advanced)") jadi berat di kartu selebar layar ponsel — juga di tablet (T4),
   tempat kartu tersusun dua kolom ~330px. */
@media screen and (max-width: 991px) {
    .kbt_hp_performance_item_inside h1 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
}

/* ==========================================================================
   Perbaikan responsive tablet portrait — lihat docs/responsive-tablet-plan.md
   Rentang tablet Webflow: 768–991px (breakpoint ≤ 767 sudah ditangani blok
   mobile di atas). Tablet besar (iPad Pro 12.9" portrait, 1024px) memakai
   tata letak desktop, jadi T5–T7 & T9 juga menyasar 992–1199px. T4 berupa
   perluasan M8 & M11 di blok mobile ke <= 991px.
   ========================================================================== */

/* T1 — Footer. Di <= 767px Webflow menyusun empat kolom menu footer jadi grid
   2×2, tetapi di 768–991px masih satu baris flex: kolom ~150px, judul pecah
   ("Tentang / Kami", "Terhubung / Dengan Kami"). Grid 2×2 dipakai juga di sini. */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .footer_right_wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column-gap: 2rem;
        grid-row-gap: 2.5rem;
    }
}

/* T2 — Kartu personel (manajemen Tentang Kami, dewan komisaris, direksi,
   komite, sekretaris, unit audit internal). Di 768–991px Webflow membuat tiap
   potongan per-3 selebar isinya (`width: max-content`, kartu 288px): baris
   direksi jadi 960px dan terpotong di kedua sisi, kartu komite meluap ke kanan
   tanpa petunjuk geser. Seperti M7, potongan dileburkan (`display: contents`),
   lalu kartu disusun 3 per baris dan baris terakhir tetap di tengah seperti
   desktop. */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .abt_hp_management.daftar_personel {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 1.5rem 1rem;
        width: 100%;
        overflow: visible;
    }

    .daftar_personel > .abt_hp_management_item {
        display: contents;
    }

    /* Sama seperti M7: id Webflow yang sama (#w-node-…) membawa grid-area. */
    .abt_hp_management.daftar_personel .hi_tkp_dk_item {
        grid-area: auto !important;
        flex: 0 0 calc((100% - 2rem) / 3);
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* T3 — Kartu lowongan (temukan pekerjaan, program magang). Di <= 991px Webflow
   memakai kolom `1fr .5fr`: logo perusahaan dapat 2/3 lebar kartu, isi hanya
   ~230px. Ditambah baris judul yang dikunci 4.75rem, judul 3–4 baris menimpa
   tabel Lokasi/Bidang/Kebutuhan. Logo dikecilkan, isi diperlebar, dan tombol
   pindah ke bawah isi. Tinggi baris judul jadi minimum (bukan tetap) di semua
   lebar: di desktop judul dua baris pun nyaris menyentuh tabel. */
.kar_tp_job_content_grid,
.kar_tp_job_content_grid.kar_tp_job_seemore {
    grid-template-rows: minmax(4.75rem, auto) auto;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .kar_tp_job_item_content {
        grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
        align-items: start;
    }

    .kar_tp_job_button {
        grid-column: 2;
    }
}

/* T5 — Navbar desktop di 992–1199px (mis. iPad Pro 12.9" portrait 1024px).
   Delapan menu 18px dengan padding 1rem butuh ~1068px; di wadah ~927px logo
   (flex-shrink) tergencet jadi 47×16px. Logo dikunci lebarnya, menu dirapatkan
   dan diperkecil sedikit agar sebagian besar label muat satu baris. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar_logo_wrapper {
        flex: none;
        width: 8rem;
    }

    .navbar_link {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .navbar_link > p {
        font-size: 16px;
    }
}

/* T6 — Rincian produk (/produk/{slug}) di 992px ke atas. Grid Webflow
   `auto 1fr`: `1fr` tidak menyusut di bawah lebar min-content isinya (deret
   ikon keunggulan, tombol, video → 832px), sehingga kolom kanan meluap sampai
   1321px di 1024px dan 1331px di 1280px — teks deskripsi & tombol Kalkulator
   terpotong. `minmax(0, 1fr)` membuat kolom kanan mengikuti sisa lebar. */
.pdd_product_container.grid.pdd_product {
    grid-template-columns: auto minmax(0, 1fr);
}

/* Di 992–1199px kolom gambar 25rem (termasuk padding kiri 4rem) menyisakan
   ~480px untuk isi: ikon keunggulan berdesakan, tombol "Lihat Warna" pecah.
   Tiga kolom tombol tetap (165px) juga terlalu sempit untuk ikon + label. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .pdd_product_left {
        width: 20rem;
        padding-left: 1rem;
    }

    .pdd_product_button {
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        grid-column-gap: 1rem;
    }
}

/* T7 — Grid kartu desktop yang meluap di 992–1199px. Trek `1fr` milik Webflow
   tidak menyusut di bawah lebar min-content kartu, sehingga:
   - daftar produk (/produk, kategori, solusi, temukan): 3 kartu 224px + gap
     3rem melebihi kolom kanan, grid keluar 14–33px dari wadah;
   - #LebihBerwarna: 3 kartu 304px + gap 3rem → kartu ke-3 terpotong;
   - koleksi warna / daftar warna: 6 kartu ~178px → kolom ke-6 keluar layar.
   Jumlah kolom desktop dipertahankan; trek dibuat bisa menyusut dan gap
   dirapatkan. Di <= 991px aturan Webflow sendiri yang berlaku. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .pda_product_item_wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-column-gap: 1.5rem;
    }

    .kar_lb_item_wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-column-gap: 1.5rem;
    }

    .grid.grid_clr_item.gap_xxsmall {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* T8 — "Personel Inti" (Tentang Kami Avian) & "Ahli R&D" (Avian Innovation
   Center). Di <= 991px Webflow menjadikannya baris geser (`overflow: auto`,
   scrollbar disembunyikan): di tablet tiga kartu pas selebar layar sehingga
   kartu ke-4 dst. tak terlihat sama sekali dan tidak ada petunjuk geser
   (di ponsel kartu terpotong sebagian, jadi petunjuknya ada). Di tablet kartu
   dibungkus 3 per baris, baris terakhir di tengah. `width: auto` inline di
   wrapper Personel Inti membuat lebarnya ikut isi (1168px) → perlu !important. */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .abt_hp_personel_wrapper,
    .abt_aic_ahli_wrapper {
        flex-wrap: wrap;
        justify-content: center;
        width: 100% !important;
        overflow: visible;
    }

    .abt_hp_personel_wrapper > .abt_hp_personel_item,
    .abt_aic_ahli_wrapper > .abt_hp_personel_item {
        flex: 0 0 calc((100% - 4rem) / 3);
        max-width: none;
    }
}

/* T9 — Kontrol peta "Avian Brands Peduli" di /keberlanjutan. Versi non-mobile
   (dipakai juga oleh iPad, yang mengirim user-agent desktop) memakai grid
   inline `auto 160px 652px`; di tablet kolom legenda 652px melewati layar dan
   chip "Edukasi" terpotong — begitu juga di 1024–1199px (iPad Pro portrait).
   Di <= 1199px: lokasi + "Lihat Semua" di baris pertama, legenda selebar
   penuh di baris kedua (perlu !important karena kolom ditulis inline). */
@media screen and (max-width: 1199px) {
    #controls[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) 160px !important;
    }

    #controls[style*="grid-template-columns"] > :last-child {
        grid-column: 1 / -1;
    }

    #controls #legend {
        flex-wrap: wrap;
    }
}