/* =========================================================================
   IKON GAYA iOS - BERKAS KANONIK
   -------------------------------------------------------------------------
   Satu-satunya sumber kebenaran ikon berwarna di portal publik BK FAI.
   JANGAN menyalin aturan di bawah ke CSS halaman; cukup pakai kelasnya.

   Pemakaian:
     <span class="ios-icon ios-icon-lg ungu"><i class="bi bi-heart-pulse-fill"></i></span>

   Ukuran : ios-icon-sm (40px) · -md (52px) · -lg (68px) · -xl (88px)
   Warna  : ungu · nila · lavender · merah-muda · biru · hijau · jingga ·
            merah · toska · abu
   Varian : .ios-icon--lembut (ubin pastel, glyph berwarna - untuk daftar padat)
            .ios-icon--timbul (berdiri sendiri sebagai tombol)

   Setiap ubin memakai gradasi 135 derajat + dua bayangan: bayangan jatuh
   berwarna senada (memberi kesan melayang khas iOS) dan sorotan putih tipis
   di dalam tepi atas (memberi kesan permukaan cembung).
   ========================================================================= */

.ios-icon{
    --ii-1:#7C3AED;            /* warna gradasi awal  */
    --ii-2:#A855F7;            /* warna gradasi akhir */
    --ii-ukuran:52px;
    --ii-radius:16px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:var(--ii-ukuran);
    height:var(--ii-ukuran);
    border-radius:var(--ii-radius);
    background:linear-gradient(135deg,var(--ii-1) 0%,var(--ii-2) 100%);
    color:#fff;
    line-height:1;
    position:relative;
    isolation:isolate;
    box-shadow:
        0 8px 18px -6px color-mix(in srgb,var(--ii-1) 60%,transparent),
        inset 0 1px 0 rgba(255,255,255,.45);
    transition:transform .2s ease, box-shadow .2s ease;
}

/* Kilau lembut di seperempat atas - meniru permukaan ikon aplikasi iOS. */
.ios-icon::after{
    content:'';
    position:absolute;
    inset:1px 1px auto 1px;
    height:42%;
    border-radius:calc(var(--ii-radius) - 2px) calc(var(--ii-radius) - 2px) 50% 50%/
                  calc(var(--ii-radius) - 2px) calc(var(--ii-radius) - 2px) 22px 22px;
    background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));
    pointer-events:none;
    z-index:1;
}

.ios-icon > i,
.ios-icon > svg{
    position:relative;
    z-index:2;
    font-size:calc(var(--ii-ukuran) * .46);
}

/* -- Ukuran ------------------------------------------------------------- */
.ios-icon-sm{ --ii-ukuran:40px; --ii-radius:12px; }
.ios-icon-md{ --ii-ukuran:52px; --ii-radius:16px; }
.ios-icon-lg{ --ii-ukuran:68px; --ii-radius:20px; }
.ios-icon-xl{ --ii-ukuran:88px; --ii-radius:26px; }

/* -- Palet -------------------------------------------------------------- */
/* Ungu keluarga psikologi dipakai sebagai warna utama; sisanya pendukung
   agar kartu berderet tidak terbaca sebagai satu blok warna yang sama. */
.ios-icon.ungu       { --ii-1:#6D28D9; --ii-2:#A855F7; }
.ios-icon.nila       { --ii-1:#4F46E5; --ii-2:#818CF8; }
.ios-icon.lavender   { --ii-1:#8B5CF6; --ii-2:#C4B5FD; }
.ios-icon.merah-muda { --ii-1:#DB2777; --ii-2:#F472B6; }
.ios-icon.biru       { --ii-1:#2563EB; --ii-2:#60A5FA; }
.ios-icon.toska      { --ii-1:#0D9488; --ii-2:#5EEAD4; }
.ios-icon.hijau      { --ii-1:#15803D; --ii-2:#4ADE80; }
.ios-icon.jingga     { --ii-1:#EA580C; --ii-2:#FDBA74; }
.ios-icon.merah      { --ii-1:#DC2626; --ii-2:#FCA5A5; }
.ios-icon.abu        { --ii-1:#475569; --ii-2:#94A3B8; }

/* -- Varian lembut: ubin pastel, glyph berwarna -------------------------- */
/* Untuk daftar panjang (tanya jawab, butir layanan) agar halaman tidak
   dipenuhi blok warna pekat. */
.ios-icon--lembut{
    background:linear-gradient(135deg,
        color-mix(in srgb,var(--ii-1) 16%,#fff) 0%,
        color-mix(in srgb,var(--ii-2) 22%,#fff) 100%);
    color:var(--ii-1);
    box-shadow:
        0 6px 14px -8px color-mix(in srgb,var(--ii-1) 45%,transparent),
        inset 0 1px 0 rgba(255,255,255,.8);
}
.ios-icon--lembut::after{ opacity:.5; }

/* -- Varian timbul: ikon yang berfungsi sebagai tombol -------------------- */
.ios-icon--timbul{ cursor:pointer; }
.ios-icon--timbul:hover{
    transform:translateY(-2px);
    box-shadow:
        0 14px 24px -8px color-mix(in srgb,var(--ii-1) 65%,transparent),
        inset 0 1px 0 rgba(255,255,255,.45);
}
.ios-icon--timbul:active{
    transform:translateY(0) scale(.96);
    box-shadow:
        0 4px 10px -6px color-mix(in srgb,var(--ii-1) 55%,transparent),
        inset 0 2px 5px rgba(0,0,0,.18);
}

/* Kartu yang membesarkan ikonnya saat disorot. */
.ios-icon-hover:hover .ios-icon,
.kartu-layanan:hover .ios-icon{
    transform:translateY(-3px) scale(1.04);
}

/* -- Ikon di dalam lingkaran (foto profil pengganti, lencana) ------------- */
.ios-icon.bulat{ border-radius:50%; }
.ios-icon.bulat::after{ border-radius:50% 50% 40% 40%/50% 50% 30% 30%; }

/* -- Aksesibilitas & gerak ----------------------------------------------- */
/* Mode kontras tinggi: gradasi diratakan agar rasio kontras glyph terjaga. */
:root[data-kontras="tinggi"] .ios-icon{
    background:var(--ii-1);
    box-shadow:0 0 0 2px #000;
}
:root[data-kontras="tinggi"] .ios-icon::after{ display:none; }

:root[data-gerak="diam"] .ios-icon,
:root[data-gerak="diam"] .ios-icon--timbul:hover{
    transition:none;
    transform:none;
}

@media (prefers-reduced-motion: reduce){
    .ios-icon{ transition:none; }
    .ios-icon--timbul:hover{ transform:none; }
}

/* Layar sempit: ubin diperkecil supaya dua kartu tetap muat sebaris. */
@media (max-width:575.98px){
    .ios-icon-lg{ --ii-ukuran:56px; --ii-radius:17px; }
    .ios-icon-xl{ --ii-ukuran:68px; --ii-radius:20px; }
}