/* ==========================================================================
   03 NAVIGASI — kerangka aplikasi: sidebar mengambang, bilah atas,
   Dynamic Island, tab bar mengambang (HP), dock, judul besar halaman.
   ========================================================================== */

.ios-app { position: relative; }

.ios-skip {
    position: fixed; top: 8px; left: 8px; z-index: 999;
    padding: 10px 14px; border-radius: 10px;
    background: var(--ios-ink); color: var(--ios-bg) !important;
    transform: translateY(-200%);
    transition: transform var(--t-fast);
}
.ios-skip:focus { transform: none; }

/* ---------- Area konten ---------- */
.ios-main {
    position: relative;
    z-index: var(--z-base);
    min-height: 100dvh;
    padding: calc(var(--safe-t) + 76px) var(--sp-7) var(--sp-9) calc(var(--side-w) + 28px + var(--sp-7));
    transition: padding-left var(--t-slow) var(--ease-out);
}
.ios-page { max-width: var(--content-max); margin: 0 auto; min-width: 0; animation: ios-masuk-halaman var(--t-slow) var(--ease-out); }
html.ios-side-mini .ios-main { padding-left: calc(var(--side-rail) + 28px + var(--sp-7)); }

/* ---------- Judul halaman (navigation bar iOS) ---------- */
.ios-navhead {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
    min-width: 0;
}
.ios-navhead-text { flex: 1 1 280px; min-width: 0; }
.ios-navhead-text .ios-large-title { overflow-wrap: break-word; }
.ios-navhead-sub { margin: 6px 0 0; color: var(--ios-ink-3); font-size: var(--fs-callout); }
.ios-navhead-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ios-back {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 36px; margin: 0 0 6px -6px; padding: 0 8px 0 2px;
    border-radius: 10px;
    color: var(--ios-emerald-2) !important;
    font-size: var(--fs-body); font-weight: 400;
    text-decoration: none !important;
}
.ios-back:hover { background: var(--ios-emerald-soft); }
.ios-back .ios-ic { width: 22px; height: 22px; }
.ios-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-foot); color: var(--ios-ink-3); margin-bottom: 4px; }
.ios-crumb a { color: var(--ios-ink-3); }

/* ==========================================================================
   SIDEBAR mengambang (desktop / tablet)
   ========================================================================== */
.ios-side {
    position: fixed;
    z-index: var(--z-nav);
    top: 14px; bottom: 14px; left: 14px;
    width: var(--side-w);
    display: flex; flex-direction: column;
    border-radius: var(--r-2xl);
    padding: 14px 10px 10px;
    transition: width var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
    overflow: hidden;
}
.ios-side-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; min-width: 0; }
.ios-side-head .ios-appicon { --size: 40px; }
.ios-side-brand { min-width: 0; flex: 1; }
.ios-side-brand strong { display: block; font-size: var(--fs-headline); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-side-brand span { display: block; font-size: var(--fs-cap); color: var(--ios-ink-3); }
.ios-side-collapse {
    width: 32px; height: 32px; flex: none; border: 0; border-radius: 10px;
    background: transparent; color: var(--ios-ink-3);
    display: grid; place-items: center;
}
.ios-side-collapse:hover { background: var(--ios-gray-bg); color: var(--ios-ink); }

.ios-side-search { margin: 0 4px 10px; }
.ios-side-search .ios-input { min-height: 36px; font-size: var(--fs-sub); padding-top: 6px; padding-bottom: 6px; }

.ios-side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 2px 8px; scrollbar-width: thin; scrollbar-color: var(--ios-sep-strong) transparent; }
.ios-side-group + .ios-side-group { margin-top: 14px; }
.ios-side-group-label { font-size: var(--fs-cap); font-weight: 600; color: var(--ios-ink-3); padding: 0 12px 6px; white-space: nowrap; }
.ios-side-link {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-height: 42px;
    padding: 5px 8px;
    border-radius: 13px;
    color: var(--ios-ink) !important;
    font-size: var(--fs-callout); font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.ios-side-link .ios-tile { --size: 30px; border-radius: 8px; }
.ios-side-link span.lbl { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ios-side-link:hover { background: color-mix(in srgb, var(--ios-ink) 5%, transparent); }
.ios-side-link:active { transform: scale(.98); }
.ios-side-link[aria-current="page"] {
    background: var(--glass-row-bg);
    box-shadow: var(--glass-hi), var(--sh-1);
    font-weight: 600;
}
/* Penanda aktif: batang lime pendek di kiri, satu-satunya pemakaian lime di navigasi. */
.ios-side-link[aria-current="page"]::before {
    content: "";
    position: absolute; left: -6px; top: 50%;
    width: 4px; height: 18px; margin-top: -9px;
    border-radius: 4px;
    background: var(--ios-lime);
}
.ios-side-foot { border-top: .5px solid var(--ios-sep); padding: 10px 4px 2px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ios-side-foot .ios-avatar { --size: 34px; }
.ios-side-user { flex: 1; min-width: 0; }
.ios-side-user strong { display: block; font-size: var(--fs-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-side-user a { font-size: var(--fs-cap); color: var(--ios-ink-3); }

/* Mode ringkas (rail) */
html.ios-side-mini:not(.ios-side-full) .ios-side { width: var(--side-rail); }
html.ios-side-mini:not(.ios-side-full) .ios-side :is(.ios-side-brand, .ios-side-search, .ios-side-group-label, .lbl, .ios-side-user, .ios-side-extra) { display: none; }
html.ios-side-mini:not(.ios-side-full) .ios-side-head { flex-direction: column; }
html.ios-side-mini:not(.ios-side-full) .ios-side-link { justify-content: center; padding: 6px; }
html.ios-side-mini:not(.ios-side-full) .ios-side-link .ios-tile { --size: 36px; border-radius: 10px; }
html.ios-side-mini:not(.ios-side-full) .ios-side-foot { justify-content: center; }

/* ==========================================================================
   BILAH ATAS: jam (bilah status), Dynamic Island, tombol cepat
   ========================================================================== */
.ios-statusbar {
    position: fixed;
    z-index: var(--z-island);
    top: 0; left: 0; right: 0;
    height: calc(var(--safe-t) + 56px);
    padding: var(--safe-t) 20px 0;
    display: none;          /* hanya di HP */
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    font-weight: 600;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.ios-statusbar > * { pointer-events: auto; position: relative; }
/* Latar buram di belakang jam & tombol: tanpa ini isi halaman yang digulir
   tembus ke belakang tombol menu dan angka besar bertumpuk dengan jam. */
.ios-statusbar::before {
    content: "";
    position: absolute;
    inset: 0 0 -18px;
    background: color-mix(in srgb, var(--ios-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-mask-image: linear-gradient(#000 62%, transparent);
    mask-image: linear-gradient(#000 62%, transparent);
    pointer-events: none;
}
.ios-statusbar-ind { display: flex; align-items: center; gap: 6px; }
/* Tombol di bilah status HP: 40px supaya mudah disentuh di sebelah island. */
.ios-sb-btn { width: 40px; height: 40px; }
.ios-sb-btn .ios-ic { width: 20px; height: 20px; }
.ios-statusbar-ind .ios-ic { width: 17px; height: 17px; }

.ios-topbtns {
    position: fixed;
    z-index: var(--z-island);
    top: calc(var(--safe-t) + 14px);
    right: 18px;
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: var(--r-pill);
}
.ios-topbtn {
    position: relative;
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--ios-ink);
    display: grid; place-items: center;
    transition: background-color var(--t-fast), transform var(--t-fast);
}
.ios-topbtn:hover { background: color-mix(in srgb, var(--ios-ink) 7%, transparent); }
.ios-topbtn:active { transform: scale(.9); }
.ios-topbtn .ios-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 5px; }

/* ---------- Dynamic Island ---------- */
.ios-island {
    position: fixed;
    z-index: var(--z-island);
    top: calc(var(--safe-t) + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 196px;
    height: 40px;
    border-radius: 22px;
    background: #000;
    color: #f4f6f4;
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .55), inset 0 0 0 .5px rgba(255, 255, 255, .08);
    overflow: hidden;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    transition:
        width var(--t-slow) var(--ease-island),
        height var(--t-slow) var(--ease-island),
        border-radius var(--t-slow) var(--ease-island),
        top var(--t-slow) var(--ease-island);
}
html[data-mode="dark"] .ios-island { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14), 0 10px 28px -10px rgba(0, 0, 0, .8); }
.ios-island-compact {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 8px 0 10px;
    transition: opacity var(--t-base) var(--ease-out);
}
.ios-island-lead, .ios-island-trail { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ios-island-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; flex: none; }
.ios-island-dot.is-off { background: #ff6a5f; }
.ios-island-dot.is-busy { background: #ffad4a; }
.ios-island .ios-tile { --size: 26px; border-radius: 50%; }
.ios-island-panel {
    position: absolute;
    inset: 0;
    padding: 18px 20px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out);
}
/* Mengembang: tekan pulau. */
.ios-island.is-open {
    width: min(380px, calc(100vw - 20px));
    height: var(--island-h, 236px);
    border-radius: 34px;
}
.ios-island.is-open .ios-island-compact { opacity: 0; pointer-events: none; }
.ios-island.is-open .ios-island-panel { opacity: 1; pointer-events: auto; transition-delay: 90ms; }
/* Aktivitas: pulau melebar sebentar membawa pesan (transaksi berhasil, dll.). */
.ios-island.is-activity { width: min(340px, calc(100vw - 20px)); height: 56px; border-radius: 30px; }
.ios-island.is-activity .ios-island-compact { opacity: 0; }
.ios-island-act {
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px 0 10px;
    opacity: 0; pointer-events: none;
    transition: opacity var(--t-base);
}
.ios-island.is-activity .ios-island-act { opacity: 1; transition-delay: 100ms; }
.ios-island-act .ios-tile { --size: 36px; border-radius: 50%; }
.ios-island-act strong { display: block; font-size: 14px; }
.ios-island-act > span:not(.ios-tile) span { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-island-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ios-island-cell {
    border-radius: 18px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .08);
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.ios-island-cell strong { display: block; font-size: 13px; font-weight: 600; }
.ios-island-cell > span:not(.ios-tile) { min-width: 0; }
.ios-island-cell > span:not(.ios-tile) span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-island-cell > div { min-width: 0; }
.ios-island-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ios-island-head strong { font-size: 15px; }
.ios-island-head time { font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   TAB BAR mengambang (HP) dan DOCK (Home Screen)
   ========================================================================== */
.ios-tabbar {
    position: fixed;
    z-index: var(--z-tabbar);
    left: 12px; right: 12px;
    bottom: calc(var(--safe-b) + 10px);
    height: var(--tabbar-h);
    display: none;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px;
    border-radius: 34px;
}
.ios-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 26px;
    color: var(--ios-ink-2) !important;
    font-size: 10.5px; font-weight: 600;
    text-decoration: none !important;
    min-width: 0;
    transition: color var(--t-fast), background-color var(--t-base) var(--ease-out), transform var(--t-fast);
    -webkit-tap-highlight-color: transparent;
    border: 0; background: transparent; font-family: inherit;
}
.ios-tab .ios-ic { width: 24px; height: 24px; transition: transform var(--t-base) var(--ease-spring); }
.ios-tab:active { transform: scale(.92); }
.ios-tab[aria-current="page"] { color: var(--ios-emerald-2) !important; background: color-mix(in srgb, var(--ios-ink) 7%, transparent); }
.ios-tab[aria-current="page"] .ios-ic { transform: translateY(-1px) scale(1.06); }
.ios-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ios-dock {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 2.4vw, 22px);
    padding: 12px 16px;
    border-radius: 34px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}
.ios-dock .ios-app-icon .ios-app-name { display: none; }
.ios-dock .ios-app-icon:hover .ios-tile { transform: translateY(-6px) scale(1.08); }

/* ==========================================================================
   IKON APLIKASI (Home Screen, App Library, Dock)
   ========================================================================== */
.ios-app-icon {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    text-decoration: none !important;
    color: var(--ios-ink) !important;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
}
.ios-app-icon .ios-tile {
    --size: clamp(56px, 6.2vw, 68px);
    transition: transform var(--t-base) var(--ease-spring), filter var(--t-fast);
}
.ios-app-icon:hover .ios-tile { transform: translateY(-3px); }
.ios-app-icon:active .ios-tile { transform: scale(.88); filter: brightness(.88); }
.ios-app-icon:focus-visible { outline: none; }
.ios-app-icon:focus-visible .ios-tile { outline: 3px solid var(--ios-emerald); outline-offset: 3px; }
.ios-app-name {
    font-size: 12px; font-weight: 500;
    letter-spacing: -.005em;
    max-width: 84px;
    text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--ios-bg) 70%, transparent);
}
.ios-app-icon .ios-count { position: absolute; top: -6px; right: calc(50% - 40px); }

/* Ikon aplikasi POS itu sendiri (logo baru) */
.ios-appicon {
    --size: 44px;
    width: var(--size); height: var(--size);
    flex: none;
    border-radius: var(--r-tile);
    display: block;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 14px -6px rgba(8, 80, 50, .55);
}

/* ---------- Dynamic Island: tombol ringkas dan Musik Toko (3 Nov 2026) ----------
   Pulau sekarang <div>; bagian ringkasnya tombol tersendiri supaya panel boleh
   memuat tombol musik. Pemutar musik seluruhnya ada di pulau: video mini,
   kendali, cari, dan daftar lagu (tanpa tab atau jendela baru). */
button.ios-island-compact { border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.ios-island-compact:focus-visible { outline: 2px solid var(--ios-emerald); outline-offset: -2px; border-radius: inherit; }

/* Tiga batang bergerak = lagu sedang diputar. */
.ios-island-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.ios-island.is-musik .ios-island-eq { display: inline-flex; }
.ios-island-eq i { width: 3px; height: 100%; border-radius: 2px; background: #ff7ab8; transform-origin: bottom; animation: ios-eq 900ms ease-in-out infinite alternate; }
.ios-island-eq i:nth-child(2) { animation-delay: -300ms; }
.ios-island-eq i:nth-child(3) { animation-delay: -600ms; }
@keyframes ios-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ios-island-eq i { animation: none; transform: scaleY(.7); } }
html[data-gerak="kurang"] .ios-island-eq i { animation: none; transform: scaleY(.7); }

/* Ada lagu: pulau ringkas sedikit melebar untuk video mini di kiri; tulisan
   "Tersambung" disembunyikan (titik koneksi tetap ada). */
.ios-island.has-video:not(.is-open):not(.is-activity) { width: 214px; }
.ios-island.has-video .ios-island-compact { padding-left: 64px; }
.ios-island.has-video #iosIslandKoneksi { display: none; }

/* Video mini: position:fixed di atas pulau; letaknya diatur musik-island.js
   (atau oleh bingkai /ruang). Tidak menerima klik supaya menekan pulau tetap
   membuka panel. */
.ios-island-video {
    position: fixed; z-index: calc(var(--z-island) + 1);
    left: -999px; top: -999px; width: 50px; height: 28px;
    border-radius: 9px; overflow: hidden; background: #111;
    pointer-events: none;
    transition: opacity 160ms var(--ease-out);
}
.ios-island-video[hidden] { display: none; }
.ios-island-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ios-island-video.is-geser { opacity: 0; }

.ios-island-musik {
    display: flex; align-items: center; gap: 10px;
    margin-top: 10px; padding: 8px 8px 8px 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    min-width: 0;
}
.ios-island-sampul, .mdf-video {
    flex: none; display: grid; place-items: center;
    border-radius: 8px; overflow: hidden;
    background: var(--tile-pink, #e0457b); color: #fff;
}
.ios-island-sampul { width: 64px; height: 36px; }
.ios-island-sampul .ios-ic, .mdf-video .ios-ic { width: 18px; height: 18px; }
.ios-island-lagu { flex: 1; min-width: 0; }
.ios-island-lagu strong, .ios-island-lagu span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-island-lagu strong { font-size: 13px; font-weight: 600; }
.ios-island-lagu span { font-size: 11.5px; color: rgba(255, 255, 255, .72); }
.ios-island-musik-tombol { display: flex; align-items: center; gap: 2px; flex: none; }
.ios-island-musik-tombol button {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; background: transparent; color: #fff; cursor: pointer;
    transition: background-color var(--t-fast), transform var(--t-fast);
}
.ios-island-musik-tombol button:hover { background: rgba(255, 255, 255, .12); }
.ios-island-musik-tombol button:active { transform: scale(.9); }
.ios-island-musik-tombol button:focus-visible, .ios-island-mdaftar :focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ios-island-musik-tombol button.is-utama { background: #fff; color: #000; }
.ios-island-musik-tombol .ios-ic { width: 18px; height: 18px; }
.ios-island-musik-tombol button[hidden] { display: none; }
:is(.ios-island-musik, .mdf-kendali) .ikon-jeda,
:is(.ios-island-musik, .mdf-kendali)[data-main="1"] .ikon-putar { display: none; }
:is(.ios-island-musik, .mdf-kendali)[data-main="1"] .ikon-jeda { display: block; }

/* ---------- Tampilan daftar lagu di dalam pulau ---------- */
.ios-island.is-open.is-musik-daftar { width: min(410px, calc(100vw - 20px)); }
.ios-island-mdaftar[hidden], .ios-island-ringkas[hidden] { display: none; }
.ios-island-mdaftar { display: grid; gap: 10px; }
.mdf-atas { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mdf-ikon {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.mdf-ikon .ios-ic { width: 18px; height: 18px; }
.mdf-video { width: 96px; height: 54px; }
.mdf-kendali { justify-content: flex-start; gap: 4px; }
.mdf-vol { flex: 1; display: flex; align-items: center; gap: 8px; margin-left: 8px; color: rgba(255, 255, 255, .72); min-width: 0; }
.mdf-vol input { flex: 1; min-width: 0; accent-color: #ff7ab8; }
.mdf-cari { display: flex; gap: 6px; }
.mdf-cari input {
    flex: 1; min-width: 0; height: 36px; padding: 0 12px;
    border-radius: 12px; border: 0;
    background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 14px;
}
.mdf-cari input::placeholder { color: rgba(255, 255, 255, .5); }
.mdf-cari input:focus { outline: 2px solid #ff7ab8; outline-offset: 0; }
.mdf-cari button {
    height: 36px; padding: 0 14px; border-radius: 12px; border: 0;
    background: #fff; color: #000; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mdf-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.mdf-seg button {
    flex: 1; height: 28px; border: 0; border-radius: 9px;
    background: transparent; color: rgba(255, 255, 255, .72);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.mdf-seg button[aria-selected="true"] { background: rgba(255, 255, 255, .18); color: #fff; }
.mdf-seg button[hidden] { display: none; }
.mdf-status { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .72); }
.mdf-status:empty { display: none; }
.mdf-lagu {
    list-style: none; margin: 0 -6px; padding: 0;
    max-height: min(44vh, 330px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.mdf-item {
    width: 100%;
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 6px; border: 0; border-radius: 10px;
    background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.mdf-item:hover { background: rgba(255, 255, 255, .08); }
.mdf-item img { width: 48px; height: 27px; border-radius: 5px; object-fit: cover; background: rgba(255, 255, 255, .08); }
.mdf-item-teks { min-width: 0; }
.mdf-item-teks strong, .mdf-item-teks span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdf-item-teks strong { font-size: 13px; font-weight: 600; }
.mdf-item-teks span { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.mdf-durasi { font-size: 11.5px; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.mdf-item[aria-current="true"] .mdf-item-teks strong { color: #ff9cc9; }
.mdf-item.is-gagal { opacity: .45; }

@media (max-width: 767px) {
    .ios-island.has-video:not(.is-open):not(.is-activity) { width: 150px; }
    .ios-island.has-video .ios-island-compact { padding-left: 52px; }
}

/* Logo toko unggahan pemilik: bentuknya bebas (persegi panjang, transparan),
   jadi dipasang di atas pelat putih dan tidak terpotong/gepeng. */
.ios-appicon--toko {
    object-fit: contain;
    background: #fff;
    padding: 3px;
    border-radius: 11px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ios-ink) 10%, transparent);
}

/* Ujung bawah daftar menu memudar: menu yang tidak muat terlihat bisa
   digulir, bukan terpotong oleh kartu Paket / avatar di bawahnya. */
.ios-side-scroll {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
    padding-bottom: 18px;
}