/* ==========================================================================
   01 DASAR — reset ringan, tipografi, wallpaper, material kaca.
   Namespace kelas baru: .ios-*  (tidak bertabrakan dengan kelas lama).
   ========================================================================== */

html[data-ui="ios26"] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--ios-bg);
}

html[data-ui="ios26"] body {
    margin: 0;
    min-height: 100dvh;
    background: var(--ios-bg);
    color: var(--ios-ink);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.42;
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
    overflow-x: hidden;
}

html[data-ui="ios26"] *,
html[data-ui="ios26"] *::before,
html[data-ui="ios26"] *::after { box-sizing: border-box; }

/* Kursor dan fokus: diatur sekali di sini (R-39, R-32). */
html[data-ui="ios26"] :is(a[href], button, summary, select, label[for], [role="button"], [role="tab"], [role="switch"], input[type="checkbox"], input[type="radio"]) { cursor: pointer; }
html[data-ui="ios26"] :is(button, input, select, textarea)[disabled] { cursor: not-allowed; }
html[data-ui="ios26"] :focus { outline: none; }
html[data-ui="ios26"] :focus-visible {
    outline: 2px solid var(--ios-emerald);
    outline-offset: 2px;
    border-radius: inherit;
}
/* Kolom isian sudah punya cincin fokus sendiri (box-shadow mengikuti sudut
   bulatnya). Garis outline tambahan di atasnya tampil sebagai kotak ganda
   yang terlihat rusak, terutama pada kolom yang langsung terfokus. */
html[data-ui="ios26"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--sh-focus);
}
html[data-ui="ios26"] ::selection { background: var(--ios-emerald-soft); }

/* :where() = kekhususan nol, supaya komponen (widget, baris, tile berupa <a>)
   menentukan warnanya sendiri tanpa harus melawan aturan tautan dasar. */
:where(html[data-ui="ios26"]) :where(a) { color: var(--ios-emerald-2); text-decoration: none; }
:where(html[data-ui="ios26"]) :where(p, li, td, span) > :where(a):hover { text-decoration: underline; text-underline-offset: 2px; }
:where(html[data-ui="ios26"]) :where(img) { max-width: 100%; height: auto; }
/* Atribut hidden selalu menang atas display komponen. */
html[data-ui="ios26"] [hidden] { display: none !important; }

/* ---------- Tipografi ---------- */
.ios-display { font-family: var(--font-round); font-size: var(--fs-display); font-weight: 600; letter-spacing: -.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.ios-large-title { font-size: var(--fs-large); font-weight: 700; letter-spacing: -.028em; line-height: 1.12; margin: 0; }
.ios-title-1 { font-size: var(--fs-title-1); font-weight: 700; letter-spacing: -.024em; line-height: 1.15; margin: 0; }
.ios-title-2 { font-size: var(--fs-title-2); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.ios-title-3 { font-size: var(--fs-title-3); font-weight: 600; letter-spacing: -.017em; line-height: 1.25; margin: 0; }
.ios-headline { font-size: var(--fs-headline); font-weight: 600; letter-spacing: -.017em; }
.ios-body { font-size: var(--fs-body); }
.ios-callout { font-size: var(--fs-callout); }
.ios-sub { font-size: var(--fs-sub); color: var(--ios-ink-3); }
.ios-foot { font-size: var(--fs-foot); color: var(--ios-ink-3); }
.ios-cap { font-size: var(--fs-cap); color: var(--ios-ink-3); letter-spacing: 0; }
.ios-section-label {
    font-size: var(--fs-foot);
    font-weight: 500;
    color: var(--ios-ink-3);
    text-transform: uppercase;
    letter-spacing: .02em;      /* sedikit, seperti header grup iOS; bukan tracking lebar */
    margin: 0 0 var(--sp-2) var(--sp-4);
}
.ios-num, .ios-money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.ios-money-xl { font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.ios-money-lg { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.ios-text-2 { color: var(--ios-ink-2); }
.ios-text-3 { color: var(--ios-ink-3); }
.ios-text-accent { color: var(--ios-emerald-2); }
.ios-text-red { color: var(--ios-red-ink); }
.ios-text-green { color: var(--ios-green-ink); }
.ios-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ios-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ios-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   WALLPAPER — digambar CSS, tanpa berkas gambar (ringan di HP kasir).
   Dipilih di Pengaturan > Wallpaper, disimpan per perangkat.
   ========================================================================== */
.ios-wall {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--ios-bg);
    overflow: hidden;
}
.ios-wall::before,
.ios-wall::after { content: ""; position: absolute; inset: -10%; }

/* 1. Aurora emerald (bawaan) */
html[data-wall="aurora"] .ios-wall::before { background: var(--grad-aurora); }
html[data-wall="aurora"] .ios-wall::after {
    background: radial-gradient(60% 40% at 80% 85%, rgba(181, 229, 80, .22), transparent 70%);
}
/* 2. Gelombang cair */
html[data-wall="cair"] .ios-wall::before {
    background:
        radial-gradient(140% 60% at 0% 100%, rgba(11, 138, 90, .55), transparent 55%),
        radial-gradient(120% 60% at 100% 0%, rgba(63, 209, 207, .45), transparent 55%),
        linear-gradient(160deg, #e9f6ee, #d5efe6 50%, #f2f7d9);
}
html[data-wall="cair"][data-mode="dark"] .ios-wall::before {
    background:
        radial-gradient(140% 60% at 0% 100%, rgba(11, 138, 90, .5), transparent 55%),
        radial-gradient(120% 60% at 100% 0%, rgba(15, 143, 154, .4), transparent 55%),
        linear-gradient(160deg, #03140d, #021612 50%, #0d1404);
}
/* 3. Gelombang kaca lembut */
html[data-wall="kaca"] .ios-wall::before {
    background:
        repeating-radial-gradient(circle at 70% 120%, rgba(255, 255, 255, .0) 0 38px, rgba(255, 255, 255, .45) 40px 41px, rgba(255, 255, 255, 0) 43px 80px),
        linear-gradient(170deg, #eef3ef, #dde9e2 60%, #e8efd6);
}
html[data-wall="kaca"][data-mode="dark"] .ios-wall::before {
    background:
        repeating-radial-gradient(circle at 70% 120%, rgba(255, 255, 255, 0) 0 38px, rgba(255, 255, 255, .06) 40px 41px, rgba(255, 255, 255, 0) 43px 80px),
        linear-gradient(170deg, #0b100d, #0a1410 60%, #10140a);
}
/* 4. Monokrom minimal */
html[data-wall="mono"] .ios-wall::before { background: var(--grad-white-silver); }
html[data-wall="mono"][data-mode="dark"] .ios-wall::before { background: var(--grad-black-graphite); }
/* 5. Ambient gelap (tetap gelap di mode terang pun, seperti wallpaper malam) */
html[data-wall="malam"] .ios-wall::before {
    background:
        radial-gradient(80% 60% at 20% 10%, rgba(47, 208, 139, .32), transparent 60%),
        radial-gradient(70% 60% at 90% 90%, rgba(100, 120, 255, .22), transparent 60%),
        #050807;
}
/* 6. Ambient terang */
html[data-wall="pagi"] .ios-wall::before {
    background:
        radial-gradient(90% 70% at 85% 0%, rgba(255, 214, 120, .45), transparent 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(181, 229, 80, .4), transparent 60%),
        #f8f6ee;
}

/* Wallpaper malam membuat kaca di atasnya ikut gelap supaya teks terbaca. */
html[data-wall="malam"]:not([data-mode="dark"]) .ios-lock,
html[data-wall="malam"]:not([data-mode="dark"]) .ios-home-clock { color: #fff; }

/* ==========================================================================
   MATERIAL KACA
   Tujuh material sesuai master prompt 3.3. Semua punya cadangan padat untuk
   peramban tanpa backdrop-filter dan untuk Mode Hemat Efek.
   ========================================================================== */
.ios-mat-ultra, .ios-mat-std, .ios-mat-frost, .ios-mat-tint,
.ios-mat-float, .ios-mat-overlay, .ios-mat-row {
    border: .5px solid var(--glass-line);
    box-shadow: var(--glass-hi), var(--sh-2);
}
.ios-mat-ultra   { background: var(--glass-ultra-bg);   -webkit-backdrop-filter: var(--glass-ultra-blur);   backdrop-filter: var(--glass-ultra-blur); }
.ios-mat-std     { background: var(--glass-std-bg);     -webkit-backdrop-filter: var(--glass-std-blur);     backdrop-filter: var(--glass-std-blur); }
.ios-mat-frost   { background: var(--glass-frost-bg);   -webkit-backdrop-filter: var(--glass-frost-blur);   backdrop-filter: var(--glass-frost-blur); box-shadow: var(--glass-hi), var(--sh-4); }
.ios-mat-tint    { background: var(--glass-tint-bg);    -webkit-backdrop-filter: var(--glass-tint-blur);    backdrop-filter: var(--glass-tint-blur); }
.ios-mat-float   { background: var(--glass-float-bg);   -webkit-backdrop-filter: var(--glass-float-blur);   backdrop-filter: var(--glass-float-blur); box-shadow: var(--glass-hi), var(--sh-3); }
.ios-mat-overlay { background: var(--glass-overlay-bg); -webkit-backdrop-filter: var(--glass-overlay-blur); backdrop-filter: var(--glass-overlay-blur); box-shadow: var(--glass-hi), var(--sh-4); }
.ios-mat-row     { background: var(--glass-row-bg);     -webkit-backdrop-filter: var(--glass-tint-blur);    backdrop-filter: var(--glass-tint-blur); box-shadow: var(--glass-hi), var(--sh-1); }
/* Deep glass: island dan kontrol gelap di atas apa pun. */
.ios-mat-deep {
    background: rgba(8, 10, 9, .86);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    color: #f4f6f4;
    border: .5px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--sh-3);
}

/* Cadangan padat. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ios-mat-ultra, .ios-mat-std, .ios-mat-tint, .ios-mat-float, .ios-mat-row { background: var(--ios-bg); }
    .ios-mat-frost, .ios-mat-overlay { background: var(--ios-bg-2); }
}
/* Mode Hemat Efek (Control Center): blur dimatikan, permukaan dibuat padat.
   Untuk HP kasir yang lambat saat keranjang panjang. */
html[data-efek="hemat"] [class*="ios-mat-"],
html[data-efek="hemat"] .ios-glass {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html[data-efek="hemat"] .ios-mat-ultra, html[data-efek="hemat"] .ios-mat-std,
html[data-efek="hemat"] .ios-mat-tint, html[data-efek="hemat"] .ios-mat-float,
html[data-efek="hemat"] .ios-mat-row { background: var(--ios-bg); }
html[data-efek="hemat"] .ios-mat-frost, html[data-efek="hemat"] .ios-mat-overlay { background: var(--ios-bg-2); }
@media (prefers-reduced-transparency: reduce) {
    [class*="ios-mat-"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .ios-mat-ultra, .ios-mat-std, .ios-mat-tint, .ios-mat-float, .ios-mat-row { background: var(--ios-bg); }
}

/* Kilau spekular di tepi atas kaca: ciri Liquid Glass. */
.ios-spec { position: relative; isolation: isolate; }
.ios-spec::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%);
    mix-blend-mode: soft-light;
    z-index: -1;
}
html[data-mode="dark"] .ios-spec::after { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 38%); mix-blend-mode: normal; }

/* Jaring pengaman HP: satu elemen yang terlalu lebar tidak boleh membuat
   browser memperlebar (memperkecil) seluruh halaman. Kalau itu terjadi,
   lembar bawah & bilah yang menempel di bawah jatuh di luar layar
   ("terpotong di bawah"). `clip` (bukan hidden) supaya posisi sticky tetap jalan. */
html[data-ui="ios26"], html[data-ui="ios26"] body { overflow-x: clip; }