/* =========================================================================
   DIALOG & TOAST GAYA iOS - BERKAS KANONIK
   -------------------------------------------------------------------------
   Dipasang lewat partial partials/ios-alert.php, bukan <link> manual.
   Jangan menyalin aturan ini ke halaman mana pun.
   ========================================================================= */

/* -- Modal kecil ---------------------------------------------------------- */
.ios-dialog-latar{
    position:fixed; inset:0; z-index:1080;
    background:rgba(45,27,78,.42);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; transition:opacity .22s ease;
}
.ios-dialog-latar.tampil{ opacity:1; }

.ios-dialog{
    width:min(340px,100%);
    background:#fff; border-radius:22px;
    box-shadow:0 30px 70px -18px rgba(45,27,78,.5);
    padding:28px 24px 20px;
    text-align:center;
    transform:scale(.88); opacity:0;
    transition:transform .24s cubic-bezier(.2,.9,.3,1.2), opacity .24s ease;
}
.ios-dialog-latar.tampil .ios-dialog{ transform:scale(1); opacity:1; }

.ios-dialog-ikon{
    width:66px; height:66px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:2rem; margin-bottom:16px;
}
.ios-dialog-ikon.success{ background:rgba(22,163,74,.12);  color:#16A34A; }
.ios-dialog-ikon.error  { background:rgba(220,38,38,.12);  color:#DC2626; }
.ios-dialog-ikon.warning{ background:rgba(234,88,12,.12);  color:#EA580C; }
.ios-dialog-ikon.info   { background:rgba(37,99,235,.12);  color:#2563EB; }
.ios-dialog-ikon.question{background:rgba(124,58,237,.12); color:#7C3AED; }

.ios-dialog h3{
    font-size:1.08rem; font-weight:800; margin:0 0 8px;
    color:#2D1B4E; line-height:1.35;
}
.ios-dialog p{
    font-size:.93rem; color:#6B6480; margin:0 0 20px;
    line-height:1.6; word-break:break-word;
}
.ios-dialog-tombol{ display:flex; gap:10px; }
.ios-dialog-tombol button{
    flex:1; border:none; border-radius:14px;
    padding:13px 18px; min-height:48px;
    font-size:.94rem; font-weight:700; cursor:pointer;
    font-family:inherit;
    transition:filter .18s ease, transform .12s ease;
}
.ios-dialog-tombol button:active{ transform:scale(.97); }
.ios-dialog-ok{
    background:linear-gradient(135deg,#4C1D95,#7C3AED); color:#fff;
}
.ios-dialog-ok.bahaya{ background:linear-gradient(135deg,#B91C1C,#EF4444); }
.ios-dialog-ok:hover{ filter:brightness(1.08); }
.ios-dialog-batal{ background:#F1EDFA; color:#6B6480; }
.ios-dialog-batal:hover{ background:#E6DEF7; }

/* -- Toast ---------------------------------------------------------------- */
.ios-toast-tumpuk{
    position:fixed; top:18px; right:18px; z-index:1090;
    display:flex; flex-direction:column; gap:10px;
    pointer-events:none;
    max-width:min(360px,calc(100vw - 36px));
}
.ios-toast{
    display:flex; align-items:flex-start; gap:12px;
    background:#fff; border-radius:16px;
    padding:14px 18px;
    /* Bayangan JATUH, bukan neumorphic dua sisi: toast melayang di atas isi
       halaman apa pun, sorotan terang di kiri-atas akan terbaca sebagai kabut. */
    box-shadow:0 14px 34px -10px rgba(45,27,78,.32);
    border-left:4px solid #7C3AED;
    font-size:.92rem; font-weight:600; color:#2D1B4E;
    pointer-events:auto;
    transform:translateX(120%); opacity:0;
    transition:transform .3s cubic-bezier(.2,.9,.3,1.1), opacity .3s ease;
}
.ios-toast.tampil{ transform:translateX(0); opacity:1; }
.ios-toast.pergi{ transform:translateX(120%); opacity:0; }
.ios-toast i{ font-size:1.2rem; margin-top:1px; flex:0 0 auto; }
.ios-toast.success{ border-left-color:#16A34A; } .ios-toast.success i{ color:#16A34A; }
.ios-toast.error  { border-left-color:#DC2626; } .ios-toast.error i{ color:#DC2626; }
.ios-toast.warning{ border-left-color:#EA580C; } .ios-toast.warning i{ color:#EA580C; }
.ios-toast.info   { border-left-color:#2563EB; } .ios-toast.info i{ color:#2563EB; }

/* -- Responsif ------------------------------------------------------------ */
@media (max-width:575.98px){
    .ios-toast-tumpuk{ top:auto; bottom:18px; left:14px; right:14px; max-width:none; }
    .ios-toast{ transform:translateY(140%); }
    .ios-toast.tampil{ transform:translateY(0); }
    .ios-toast.pergi{ transform:translateY(140%); }
    .ios-dialog{ width:100%; }
    .ios-dialog-tombol{ flex-direction:column-reverse; }
}

/* -- Aksesibilitas -------------------------------------------------------- */
:root[data-kontras="tinggi"] .ios-dialog,
:root[data-kontras="tinggi"] .ios-toast{
    background:#000 !important; color:#fff !important; border:2px solid #fff !important;
}
:root[data-kontras="tinggi"] .ios-dialog h3,
:root[data-kontras="tinggi"] .ios-dialog p{ color:#fff !important; }
:root[data-kontras="tinggi"] .ios-dialog-ok{ background:#FFD500 !important; color:#000 !important; }

:root[data-kontras="gelap"] .ios-dialog,
:root[data-kontras="gelap"] .ios-toast{ background:#221A3A; color:#E9E4F5; }
:root[data-kontras="gelap"] .ios-dialog h3{ color:#F5F2FF; }
:root[data-kontras="gelap"] .ios-dialog p{ color:#A99FC4; }
:root[data-kontras="gelap"] .ios-dialog-batal{ background:#2B2149; color:#A99FC4; }

:root[data-gerak="diam"] .ios-dialog,
:root[data-gerak="diam"] .ios-toast,
:root[data-gerak="diam"] .ios-dialog-latar{ transition:none; }

@media (prefers-reduced-motion: reduce){
    .ios-dialog,.ios-toast,.ios-dialog-latar{ transition:none; }
}