/* =====================================================================
   Dialog "Tentang Aplikasi" (About) — tombol ikon di header + isinya.
   Berkas TERPISAH dari style.css supaya tidak terkena cache lama
   (platform tidak mengirim Cache-Control untuk berkas statis).
   Berkas ini HANYA menambah aturan baru — tidak ada aturan lama yang diubah.
   Tema mengikuti aplikasi: indigo/violet + kartu kaca.
   ===================================================================== */

:root {
    --about-lapis: rgba(28, 22, 62, .55);
}

/* ---------------- Tombol kecil di header (kanan atas) ---------------- */

.about-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: 2px;
    border-radius: 50%;
    border: 1px solid var(--garis-kuat);
    background: rgba(255, 255, 255, .85);
    color: var(--indigo-tua);
    cursor: pointer;
    transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.about-btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 18px -14px rgba(60, 40, 130, .85); }
.about-btn:active { transform: translateY(0); }
.about-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.about-btn .svg-ikon { width: 19px; height: 19px; }

/* ---------------- Lapisan & kotak dialog ---------------- */

.about-lapis {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: var(--about-lapis);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.about-lapis[hidden] { display: none; }

.about-kotak {
    width: min(1000px, 100%);
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: var(--r-besar);
    box-shadow: 0 40px 70px -36px rgba(30, 18, 90, .8);
    overflow: hidden;
    animation: aboutMuncul .22s ease-out;
}
@keyframes aboutMuncul {
    from { opacity: 0; transform: translateY(-14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .about-kotak { animation: none; }
}

.about-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    background: var(--grad);
    color: #fff;
}
.about-ikon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
}
.about-ikon .svg-ikon { width: 22px; height: 22px; color: #fff; }
.about-head-teks { min-width: 0; flex: 1; }
.about-head-teks h2 { margin: 0; font-size: 1.04rem; line-height: 1.25; color: #fff; }
.about-head-teks p { margin: 2px 0 0; font-size: .78rem; opacity: .92; color: #fff; }
.about-tutup {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
}
.about-tutup:hover { background: rgba(255, 255, 255, .32); }

/* ---------------- Isi: dua kolom (info + kartu kredit) ---------------- */

.about-isi {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    padding: 18px 20px;
    overflow-y: auto;
}
.about-kolom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.about-seksi {
    border: 1px solid var(--garis);
    border-radius: var(--r);
    padding: 14px 15px;
    background: rgba(255, 255, 255, .9);
}
.about-seksi-judul {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--indigo-tua);
}
.about-seksi-judul .svg-ikon { width: 17px; height: 17px; flex: none; color: var(--indigo); }

.about-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; }
.about-baris + .about-baris { border-top: 1px dashed var(--garis); }
.about-baris span {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700;
    flex: none;
}
.about-baris strong { font-size: .88rem; color: var(--ink); text-align: right; word-break: break-word; }

.about-teks { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--ink-2); }
.about-teks + .about-teks { margin-top: 8px; }
.about-teks .tombol { margin-top: 6px; }

/* Kebijakan privasi: kotak bergulir supaya dialog tidak terlalu panjang. */
.about-privasi {
    max-height: 230px;
    overflow-y: auto;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ink-2);
    background: rgba(79, 70, 229, .07);
    border: 1px solid rgba(79, 70, 229, .18);
    border-radius: var(--r-kecil);
    padding: 12px 13px;
}

.about-qr { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 10px; }
.about-qr img {
    width: min(220px, 100%);
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--garis);
    background: #fff;
    padding: 6px;
}
.about-qr span { font-size: .74rem; color: var(--muted); }

.about-tautan { display: flex; flex-wrap: wrap; gap: 8px; }
.about-tautan-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--garis-kuat);
    background: #fff;
    font-size: .8rem;
    font-weight: 700;
    color: var(--indigo-tua);
    text-decoration: none;
}
.about-tautan-item:hover { background: rgba(79, 70, 229, .08); }
.about-tautan-item .svg-ikon { width: 15px; height: 15px; }

/* ---------------- Kartu KREDIT (kolom kanan, gulir bawah → atas) ---------------- */

.about-kredit {
    border: 1px solid var(--garis);
    border-radius: var(--r);
    background: linear-gradient(180deg, #fbfaff, #f1eeff);
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: start;   /* jangan ikut memanjang mengikuti kolom kiri yang panjang */
}
/* Tinggi kotak gulir DIPATOK (bukan mengikuti isi): kalau tingginya mengikuti tinggi dialog,
   isi kartu kredit yang pendek tidak pernah melebihi kotaknya sehingga tidak bergulir. */
.about-kredit-viewport {
    position: relative;
    height: 380px;
    overflow: hidden;     /* gulir dijalankan animasi, bukan oleh pengguna */
    border-radius: 10px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.about-kredit-track { display: flex; flex-direction: column; gap: 14px; }
.about-kredit-track.is-gulir { animation: aboutKreditGulir var(--durasi, 40s) linear infinite; }
/* Gulir berhenti saat kursor di atas kartu supaya tulisan bisa dibaca. */
.about-kredit:hover .about-kredit-track.is-gulir { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .about-kredit-track.is-gulir { animation: none; }
}

@keyframes aboutKreditGulir {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-1 * var(--geser, 0px))); }
}

.about-kredit-isi { display: flex; flex-direction: column; gap: 12px; }
.about-kredit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--indigo-tua);
}
.about-kredit-head .svg-ikon { width: 16px; height: 16px; color: var(--violet); }
.about-kredit-item {
    background: #fff;
    border: 1px solid var(--garis);
    border-radius: 12px;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}
.about-kredit-logo { max-width: 100%; max-height: 74px; object-fit: contain; }
.about-kredit-item p { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--ink-2); }
.about-kredit-kosong { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--muted); }

/* ---------------- Kaki dialog ---------------- */

.about-kaki {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--garis);
    background: #fbfaff;
}
.about-kaki span { font-size: .74rem; color: var(--muted); }

/* ---------------- Layar sempit: satu kolom, kartu kredit di bawah ---------------- */

@media (max-width: 820px) {
    .about-isi { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
    .about-kredit-viewport { height: 220px; }
    .about-kotak { max-height: 94vh; }
    .about-head { padding: 13px 15px; }
    .about-kaki { padding: 10px 14px; }
    .about-kaki span { display: none; }   /* di ponsel sempit; tombol Tutup tetap ada */
}

/* =====================================================================
   Pengaturan → Tentang Aplikasi (daftar kartu kredit, pratinjau)
   Berkas ini juga dimuat panel tab Tentang supaya tampilan pengelolaannya
   tetap benar walau tombol Tentang dimatikan pemilik.
   ===================================================================== */

.textarea-besar { font-size: .84rem; line-height: 1.6; }

.kredit-daftar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.kredit-baris {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    border: 1px solid var(--garis);
    border-radius: var(--r);
    padding: 12px 13px;
    background: rgba(255, 255, 255, .9);
}
.kredit-kiri { display: flex; justify-content: center; }
.kredit-gambar { max-width: 92px; max-height: 68px; object-fit: contain; }
.kredit-tanpa-gambar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: rgba(79, 70, 229, .08);
    color: var(--indigo-tua);
    border: 1px dashed rgba(79, 70, 229, .35);
}
.kredit-tanpa-gambar .svg-ikon { width: 22px; height: 22px; }
.kredit-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kredit-form-bawah { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.kredit-file { min-width: 210px; flex: 1 1 210px; }
.kredit-hapus { display: flex; align-items: flex-start; }
.kredit-tambah {
    border: 1px dashed rgba(79, 70, 229, .4);
    border-radius: var(--r);
    padding: 14px;
    background: rgba(79, 70, 229, .05);
}
.kredit-tambah h3 {
    margin: 0;
    font-size: .9rem;
    color: var(--indigo-tua);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kredit-tambah h3 .svg-ikon { width: 17px; height: 17px; }

@media (max-width: 720px) {
    .kredit-baris { grid-template-columns: minmax(0, 1fr); }
    .kredit-kiri { justify-content: flex-start; }
}

/* Layar pendek: kotak kredit dipendekkan supaya seluruh dialog tetap muat. */
@media (max-height: 720px) {
    .about-kredit-viewport { height: 260px; }
}
@media (max-height: 560px) {
    .about-kredit-viewport { height: 180px; }
}

/* =====================================================================
   Posisi tombol Tentang di header
   =====================================================================
   Tombol kecil ini harus berada di pojok kanan atas dan SEJAJAR dengan logo & nama instansi.
   Bila menu kepala (nav) membungkus ke baris kedua pada lebar layar sedang, tombol yang
   diletakkan setelah nav ikut turun ke baris menu. Karena itu: tombol memakai margin-left:auto
   dan nav dibuat selalu menempati barisnya sendiri (width:100%).
   Di ponsel, jarak otomatis dilepas agar tombol tetap rapat. */
.topbar > .about-btn { margin-left: auto; }
.topbar > .nav { width: 100%; margin-left: 0; justify-content: flex-end; }

@media (max-width: 900px) {
    .topbar > .about-btn { margin-left: 4px; }
}

/* Ponsel (≤620px): sub-judul header disembunyikan & tombol sedikit diperkecil supaya
   tombol Tentang tetap di baris pertama (sejajar logo & nama), tidak jatuh sendirian. */
@media (max-width: 620px) {
    .topbar .merek-teks small { display: none; }
    /* 36px, bukan lebih kecil: tombol ini disentuh jari, dan ukuran kontrol minimum yang
       diuji tata letak adalah 36px (audit-konsultasi.js). */
    .topbar > .about-btn { width: 36px; height: 36px; }
    .topbar > .about-btn .svg-ikon { width: 18px; height: 18px; }
    .topbar .merek { min-width: 0; }
    .topbar .merek-teks { min-width: 0; }
    .topbar .merek-teks strong { max-width: 46vw; }
}

/* Ponsel sangat sempit (≤440px): header jadi GRID tiga kolom — [logo+nama][Tentang][Keluar]
   supaya tombol selalu di baris pertama. Pada flexbox, pembungkusan baris terjadi SEBELUM
   penyusutan sehingga logo/nama tidak mau menyusut dan tombolnya terdorong ke baris kedua.
   Dengan grid, kolom nama memakai minmax(0,1fr) sehingga memotong teksnya sendiri bila perlu. */
@media (max-width: 440px) {
    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }
    .topbar > .about-btn { margin-left: 0; }
    .topbar > .nav { grid-column: 1 / -1; width: auto; justify-content: flex-end; }
}

/* Tombol Tentang di halaman masuk (login.php): pojok kanan atas kartu. */
.masuk-kartu { position: relative; }
.masuk-kartu > .about-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .9);
}
.masuk-kartu > .about-btn .svg-ikon { width: 17px; height: 17px; }