/* ============================================
   iOS Framework v1.1
   Prefix: ios-
   + Avatar, Slider, Statistics, MDI Icons
   ============================================ */

/* ---------- 1. RESET / NORMALIZE ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  color: var(--ios-label);
  background: var(--ios-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; outline: none; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--ios-blue); text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 2. THEME VARIABLES ---------- */
:root {
  /* Colors */
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-red: #ff3b30;
  --ios-orange: #ff9500;
  --ios-yellow: #ffcc00;
  --ios-purple: #af52de;
  --ios-pink: #ff2d55;
  --ios-teal: #5ac8fa;
  --ios-indigo: #5856d6;
  --ios-gray: #8e8e93;

  /* Semantic */
  --ios-label: #000;
  --ios-label-2: rgba(60,60,67,0.6);
  --ios-label-3: rgba(60,60,67,0.3);
  --ios-bg: #f2f2f7;
  --ios-bg-elevated: #fff;
  --ios-separator: rgba(60,60,67,0.29);
  --ios-fill: rgba(120,120,128,0.12);
  --ios-fill-2: rgba(120,120,128,0.16);

  /* Radius */
  --ios-radius-sm: 6px;
  --ios-radius: 10px;
  --ios-radius-lg: 14px;
  --ios-radius-pill: 980px;

  /* Spacing */
  --ios-space-1: 4px;
  --ios-space-2: 8px;
  --ios-space-3: 12px;
  --ios-space-4: 16px;
  --ios-space-5: 20px;
  --ios-space-6: 24px;
  --ios-space-8: 32px;

  /* Shadow */
  --ios-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --ios-shadow: 0 4px 16px rgba(0,0,0,0.12);
  --ios-shadow-lg: 0 12px 40px rgba(0,0,0,0.18);

  /* Motion */
  --ios-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ios-duration: 0.25s;
}
/*
@media (prefers-color-scheme: dark) {
  :root {
    --ios-label: #fff;
    --ios-label-2: rgba(235,235,245,0.6);
    --ios-label-3: rgba(235,235,245,0.3);
    --ios-bg: #000;
    --ios-bg-elevated: #1c1c1e;
    --ios-separator: rgba(84,84,88,0.65);
    --ios-fill: rgba(120,120,128,0.36);
    --ios-fill-2: rgba(120,120,128,0.32);
  }
} */

/* ---------- 3. GRID SYSTEM ---------- */
.ios-container {
  width: 100%;
  padding-inline: var(--ios-space-4);
  margin-inline: auto;
  max-width: 1200px;
}

.ios-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--ios-space-2) * -1);
}

[class*="ios-col"] {
  padding-inline: var(--ios-space-2);
  width: 100%;
}

.ios-col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.ios-col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.ios-col-3  { flex: 0 0 25%;      max-width: 25%; }
.ios-col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.ios-col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.ios-col-6  { flex: 0 0 50%;      max-width: 50%; }
.ios-col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.ios-col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.ios-col-9  { flex: 0 0 75%;      max-width: 75%; }
.ios-col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.ios-col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.ios-col-12 { flex: 0 0 100%;     max-width: 100%; }

@media (min-width: 640px) {
  .ios-col-sm-6  { flex: 0 0 50%; max-width: 50%; }
  .ios-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1024px) {
  .ios-col-lg-3  { flex: 0 0 25%; max-width: 25%; }
  .ios-col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .ios-col-lg-6  { flex: 0 0 50%; max-width: 50%; }
  .ios-col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

/* ---------- 4. TYPOGRAPHY ---------- */
.ios-title-1 { font-size: 34px; font-weight: 700; letter-spacing: 0.37px; }
.ios-title-2 { font-size: 28px; font-weight: 700; letter-spacing: 0.36px; }
.ios-title-3 { font-size: 22px; font-weight: 600; letter-spacing: -0.26px; }
.ios-headline { font-size: 17px; font-weight: 600; }
.ios-body     { font-size: 17px; font-weight: 400; }
.ios-subhead  { font-size: 15px; font-weight: 400; }
.ios-footnote { font-size: 13px; font-weight: 400; color: var(--ios-label-2); }
.ios-caption  { font-size: 12px; font-weight: 400; color: var(--ios-label-2); }

.ios-text-center { text-align: center; }
.ios-text-right  { text-align: right; }
.ios-text-muted  { color: var(--ios-label-2); }
.ios-text-primary { color: var(--ios-blue); }
.ios-text-success { color: var(--ios-green); }
.ios-text-danger  { color: var(--ios-red); }
.ios-text-warning { color: var(--ios-orange); }

/* ---------- 5. BUTTONS ---------- */
.ios-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ios-space-2);
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  border: none;
  border-radius: var(--ios-radius);
  background: var(--ios-fill);
  color: var(--ios-label);
  cursor: pointer;
  transition: all var(--ios-duration) var(--ios-ease);
  user-select: none;
  white-space: nowrap;
}
.ios-btn:hover   { filter: brightness(0.96); }
.ios-btn:active  { transform: scale(0.97); opacity: 0.85; }
.ios-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ios-btn-primary { background: var(--ios-blue); color: #fff; }
.ios-btn-success { background: var(--ios-green); color: #fff; }
.ios-btn-danger  { background: var(--ios-red); color: #fff; }
.ios-btn-warning { background: var(--ios-orange); color: #fff; }

.ios-btn-outline {
  background: transparent;
  color: var(--ios-blue);
  border: 1.5px solid var(--ios-blue);
}
.ios-btn-ghost {
  background: transparent;
  color: var(--ios-blue);
}

.ios-btn-sm { padding: 6px 12px; font-size: 14px; border-radius: var(--ios-radius-sm); }
.ios-btn-lg { padding: 14px 24px; font-size: 19px; border-radius: var(--ios-radius-lg); }
.ios-btn-pill { border-radius: var(--ios-radius-pill); padding-inline: 22px; }
.ios-btn-block { display: flex; width: 100%; }

/* ---------- 6. FORMS ---------- */
.ios-input,
.ios-select,
.ios-textarea {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 17px;
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
  border: 1px solid var(--ios-separator);
  border-radius: var(--ios-radius);
  transition: border-color var(--ios-duration) var(--ios-ease),
              box-shadow var(--ios-duration) var(--ios-ease);
}
.ios-input:focus,
.ios-select:focus,
.ios-textarea:focus {
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
}
.ios-textarea { min-height: 100px; resize: vertical; }

.ios-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-label-2);
  margin-bottom: 6px;
}
.ios-field { margin-bottom: var(--ios-space-4); }

/* Switch */
.ios-switch { position: relative; display: inline-block; width: 51px; height: 31px; }
.ios-switch input { opacity: 0; width: 0; height: 0; }
.ios-switch-slider {
  position: absolute; inset: 0;
  background: var(--ios-fill-2);
  border-radius: var(--ios-radius-pill);
  transition: background var(--ios-duration) var(--ios-ease);
  cursor: pointer;
}
.ios-switch-slider::before {
  content: "";
  position: absolute;
  height: 27px; width: 27px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--ios-duration) var(--ios-ease);
}
.ios-switch input:checked + .ios-switch-slider { background: var(--ios-green); }
.ios-switch input:checked + .ios-switch-slider::before { transform: translateX(20px); }

/* Checkbox & Radio */
.ios-checkbox,
.ios-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 17px;
}
.ios-checkbox input,
.ios-radio input { display: none; }

.ios-checkbox-mark,
.ios-radio-mark {
  width: 22px; height: 22px;
  border: 2px solid var(--ios-label-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ios-duration) var(--ios-ease);
  flex-shrink: 0;
}
.ios-checkbox-mark { border-radius: 6px; }
.ios-radio-mark    { border-radius: 50%; }

.ios-checkbox input:checked + .ios-checkbox-mark {
  background: var(--ios-blue);
  border-color: var(--ios-blue);
}
.ios-checkbox input:checked + .ios-checkbox-mark::after {
  content: "";
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.ios-radio input:checked + .ios-radio-mark {
  border-color: var(--ios-blue);
}
.ios-radio input:checked + .ios-radio-mark::after {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ios-blue);
}

/* ---------- 7. CARDS ---------- */
.ios-card {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-lg);
  padding: var(--ios-space-4);
  box-shadow: var(--ios-shadow-sm);
  margin-bottom: var(--ios-space-4);
}
.ios-card-title { font-size: 17px; font-weight: 600; margin-bottom: var(--ios-space-3); }
.ios-card-body  { font-size: 15px; color: var(--ios-label-2); }
.ios-card-flush { padding: 0; overflow: hidden; }

/* ---------- 8. LISTS ---------- */
.ios-list {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
}
.ios-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--ios-space-4);
  border-bottom: 1px solid var(--ios-separator);
  cursor: pointer;
  transition: background var(--ios-duration) var(--ios-ease);
}
.ios-list-item:last-child { border-bottom: none; }
.ios-list-item:hover { background: var(--ios-fill); }
.ios-list-item::after {
  content: "›";
  color: var(--ios-label-3);
  font-size: 20px;
  font-weight: 300;
}
.ios-list-item.ios-no-arrow::after { display: none; }

.ios-list-item-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.ios-list-item-icon .mdi {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #fff;
  font-size: 17px;
  background: var(--ios-blue);
  flex-shrink: 0;
}
.ios-list-item-icon .mdi.mdi-green  { background: var(--ios-green); }
.ios-list-item-icon .mdi.mdi-red    { background: var(--ios-red); }
.ios-list-item-icon .mdi.mdi-orange { background: var(--ios-orange); }
.ios-list-item-icon .mdi.mdi-purple { background: var(--ios-purple); }
.ios-list-item-icon .mdi.mdi-gray   { background: var(--ios-gray); }

/* ---------- 9. BADGES & ALERTS ---------- */
.ios-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--ios-radius-pill);
  background: var(--ios-fill-2);
  color: var(--ios-label);
}
.ios-badge-primary { background: var(--ios-blue); color: #fff; }
.ios-badge-success { background: var(--ios-green); color: #fff; }
.ios-badge-danger  { background: var(--ios-red); color: #fff; }
.ios-badge-warning { background: var(--ios-orange); color: #fff; }

.ios-alert {
  padding: 12px var(--ios-space-4);
  border-radius: var(--ios-radius);
  background: var(--ios-fill);
  font-size: 15px;
  margin-bottom: var(--ios-space-3);
  border-left: 4px solid var(--ios-gray);
}
.ios-alert-primary { border-color: var(--ios-blue); }
.ios-alert-success { border-color: var(--ios-green); }
.ios-alert-danger  { border-color: var(--ios-red); }
.ios-alert-warning { border-color: var(--ios-orange); }

.ios-alert-icon { display: flex; align-items: flex-start; gap: 10px; }
.ios-alert-icon .mdi { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

/* ---------- 10. NAVBAR ---------- */
.ios-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--ios-space-4);
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--ios-separator);
}
/* @media (prefers-color-scheme: dark) {
  .ios-navbar { background: rgba(28,28,30,0.72); }
} */
.ios-navbar-title { font-size: 17px; font-weight: 600; }
.ios-navbar-link  { font-size: 17px; color: var(--ios-blue); }

/* ---------- 11. MODAL ---------- */
.ios-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ios-space-4);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ios-duration) var(--ios-ease),
              visibility var(--ios-duration) var(--ios-ease);
}
.ios-modal-backdrop.ios-open { opacity: 1; visibility: visible; }

.ios-modal {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-lg);
  width: 100%;
  max-width: 340px;
  box-shadow: var(--ios-shadow-lg);
  transform: scale(0.9);
  opacity: 0;
  transition: transform var(--ios-duration) var(--ios-ease),
              opacity var(--ios-duration) var(--ios-ease);
  overflow: hidden;
}
.ios-modal-backdrop.ios-open .ios-modal { transform: scale(1); opacity: 1; }

.ios-modal-header {
  padding: var(--ios-space-4);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 1px solid var(--ios-separator);
}
.ios-modal-body {
  padding: var(--ios-space-4);
  font-size: 15px;
  text-align: center;
  color: var(--ios-label-2);
}
.ios-modal-footer {
  display: flex;
  border-top: 1px solid var(--ios-separator);
}
.ios-modal-footer .ios-btn {
  flex: 1;
  border-radius: 0;
  background: transparent;
  color: var(--ios-blue);
  padding: 14px;
}
.ios-modal-footer .ios-btn + .ios-btn {
  border-left: 1px solid var(--ios-separator);
}
.ios-modal-footer .ios-btn:hover { background: var(--ios-fill); }

/* ---------- 12. LOADING ---------- */
.ios-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ios-duration) var(--ios-ease);
}
.ios-loading-overlay.ios-open { opacity: 1; visibility: visible; }

.ios-spinner {
  width: 44px; height: 44px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ios-spin 0.8s linear infinite;
}
@keyframes ios-spin { to { transform: rotate(360deg); } }

.ios-loading-box {
  background: rgba(0,0,0,0.75);
  padding: 24px;
  border-radius: var(--ios-radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
}

/* ---------- 13. TOAST ---------- */
.ios-toast-wrap {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.ios-toast {
  padding: 10px 18px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 14px;
  border-radius: var(--ios-radius-pill);
  box-shadow: var(--ios-shadow);
  opacity: 0;
  transform: translateY(-10px);
  transition: all var(--ios-duration) var(--ios-ease);
}
.ios-toast.ios-show { opacity: 1; transform: translateY(0); }
.ios-toast-success { background: var(--ios-green); }
.ios-toast-danger  { background: var(--ios-red); }
.ios-toast-warning { background: var(--ios-orange); }
.ios-toast-info    { background: var(--ios-blue); }

/* ============================================
   14. AVATAR
   ============================================ */
.ios-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ios-fill-2);
  color: var(--ios-label-2);
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}
.ios-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sizes */
.ios-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.ios-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.ios-avatar    { /* default 44 */ }
.ios-avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.ios-avatar-xl { width: 88px; height: 88px; font-size: 32px; }

/* Colors (background saat pakai inisial) */
.ios-avatar-primary { background: var(--ios-blue); color: #fff; }
.ios-avatar-success { background: var(--ios-green); color: #fff; }
.ios-avatar-danger  { background: var(--ios-red); color: #fff; }
.ios-avatar-warning { background: var(--ios-orange); color: #fff; }
.ios-avatar-purple  { background: var(--ios-purple); color: #fff; }
.ios-avatar-pink    { background: var(--ios-pink); color: #fff; }
.ios-avatar-teal    { background: var(--ios-teal); color: #fff; }
.ios-avatar-gray    { background: var(--ios-gray); color: #fff; }

/* Rounded (bukan full circle) */
.ios-avatar-rounded { border-radius: var(--ios-radius); }
.ios-avatar-square  { border-radius: var(--ios-radius-sm); }

/* Status indicator */
.ios-avatar-status::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ios-bg-elevated);
  background: var(--ios-gray);
  box-sizing: content-box;
}
.ios-avatar-status.ios-status-online::after  { background: var(--ios-green); }
.ios-avatar-status.ios-status-offline::after { background: var(--ios-gray); }
.ios-avatar-status.ios-status-busy::after    { background: var(--ios-red); }
.ios-avatar-status.ios-status-away::after    { background: var(--ios-orange); }

/* Badge count di pojok */
.ios-avatar-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ios-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ios-bg-elevated);
  box-sizing: content-box;
}

/* Avatar Group (overlap) */
.ios-avatar-group {
  display: inline-flex;
  align-items: center;
}
.ios-avatar-group .ios-avatar {
  border: 2px solid var(--ios-bg-elevated);
  margin-left: -12px;
}
.ios-avatar-group .ios-avatar:first-child { margin-left: 0; }
.ios-avatar-group .ios-avatar-more {
  background: var(--ios-fill-2);
  color: var(--ios-label-2);
  font-size: 12px;
}

/* ============================================
   15. SLIDER / CAROUSEL
   ============================================ */
.ios-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--ios-radius-lg);
  background: var(--ios-bg-elevated);
  user-select: none;
  touch-action: pan-y;
}

.ios-slider-track {
  display: flex;
  transition: transform var(--ios-duration) var(--ios-ease);
  will-change: transform;
}
.ios-slider.no-transition .ios-slider-track { transition: none; }

.ios-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.ios-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Caption overlay */
.ios-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.ios-slide-caption-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ios-slide-caption-desc {
  font-size: 13px;
  opacity: 0.85;
}

/* Aspect ratios */
.ios-slider-16x9  .ios-slide { aspect-ratio: 16 / 9; }
.ios-slider-4x3   .ios-slide { aspect-ratio: 4 / 3; }
.ios-slider-1x1   .ios-slide { aspect-ratio: 1 / 1; }
.ios-slider-21x9  .ios-slide { aspect-ratio: 21 / 9; }

/* Dots indicator */
.ios-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.ios-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all var(--ios-duration) var(--ios-ease);
  border: none;
  padding: 0;
}
.ios-slider-dot.ios-active {
  background: #fff;
  width: 22px;
  border-radius: 4px;
}
/* Varian dot di luar gambar */
.ios-slider-dots-outside {
  position: static;
  margin-top: 12px;
}
.ios-slider-dots-outside .ios-slider-dot { background: var(--ios-fill-2); }
.ios-slider-dots-outside .ios-slider-dot.ios-active { background: var(--ios-blue); }

/* Navigation arrows */
.ios-slider-prev,
.ios-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--ios-label);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
  box-shadow: var(--ios-shadow-sm);
  transition: all var(--ios-duration) var(--ios-ease);
  opacity: 0.9;
}
.ios-slider-prev { left: 10px; }
.ios-slider-next { right: 10px; }
.ios-slider-prev:hover,
.ios-slider-next:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.ios-slider-prev:active,
.ios-slider-next:active { transform: translateY(-50%) scale(0.95); }

/* Varian tanpa border radius */
.ios-slider-flat { border-radius: 0; }

/* ============================================
   16. STATISTICS / STATS CARD
   ============================================ */
.ios-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ios-space-3);
}

.ios-stat {
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-radius-lg);
  padding: var(--ios-space-4);
  box-shadow: var(--ios-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform var(--ios-duration) var(--ios-ease);
}
.ios-stat:hover { transform: translateY(-2px); }

.ios-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ios-stat-label {
  font-size: 13px;
  color: var(--ios-label-2);
  font-weight: 500;
}
.ios-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--ios-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ios-fill);
  color: var(--ios-blue);
  font-size: 20px;
  flex-shrink: 0;
}
.ios-stat-icon.mdi-blue   { background: rgba(0,122,255,0.12);  color: var(--ios-blue); }
.ios-stat-icon.mdi-green  { background: rgba(52,199,89,0.12);  color: var(--ios-green); }
.ios-stat-icon.mdi-red    { background: rgba(255,59,48,0.12);  color: var(--ios-red); }
.ios-stat-icon.mdi-orange { background: rgba(255,149,0,0.12);  color: var(--ios-orange); }
.ios-stat-icon.mdi-purple { background: rgba(175,82,222,0.12); color: var(--ios-purple); }
.ios-stat-icon.mdi-teal   { background: rgba(90,200,250,0.12); color: var(--ios-teal); }

.ios-stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.ios-stat-value-sm { font-size: 22px; }

.ios-stat-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ios-label-2);
  font-weight: 500;
}
.ios-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 600;
}
.ios-stat-trend.up   { color: var(--ios-green); }
.ios-stat-trend.down { color: var(--ios-red); }

/* Varian horizontal */
.ios-stat-horizontal {
  flex-direction: row;
  align-items: center;
}
.ios-stat-horizontal .ios-stat-body { flex: 1; }

/* Varian gradient (premium) */
.ios-stat-gradient {
  color: #fff;
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
  border: none;
}
.ios-stat-gradient .ios-stat-label,
.ios-stat-gradient .ios-stat-footer { color: rgba(255,255,255,0.85); }
.ios-stat-gradient .ios-stat-icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.ios-stat-gradient-green {
  background: linear-gradient(135deg, var(--ios-green), var(--ios-teal));
}
.ios-stat-gradient-danger {
  background: linear-gradient(135deg, var(--ios-red), var(--ios-orange));
}
.ios-stat-gradient-purple {
  background: linear-gradient(135deg, var(--ios-purple), var(--ios-pink));
}

/* ============================================
   17. MDI ICONS INTEGRATION
   ============================================ */
.mdi {
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}

.ios-icon-xs { font-size: 14px !important; }
.ios-icon-sm { font-size: 18px !important; }
.ios-icon    { font-size: 22px !important; }
.ios-icon-lg { font-size: 28px !important; }
.ios-icon-xl { font-size: 36px !important; }

.ios-icon-blue   { color: var(--ios-blue); }
.ios-icon-green  { color: var(--ios-green); }
.ios-icon-red    { color: var(--ios-red); }
.ios-icon-orange { color: var(--ios-orange); }
.ios-icon-purple { color: var(--ios-purple); }
.ios-icon-gray   { color: var(--ios-gray); }
.ios-icon-muted  { color: var(--ios-label-2); }

.ios-btn .mdi {
  font-size: 1.15em;
  margin-right: 6px;
}
.ios-btn .mdi:only-child,
.ios-btn .mdi:last-child:not(:first-child) {
  margin-right: 0;
}
.ios-btn-icon {
  padding: 10px;
  min-width: 42px;
}
.ios-btn-icon .mdi { margin: 0; }

.ios-input-group { position: relative; display: block; }
.ios-input-group .ios-input { padding-left: 40px; }
.ios-input-group .ios-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ios-label-2);
  font-size: 20px;
  pointer-events: none;
}

.ios-badge .mdi {
  font-size: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}

.ios-navbar-link .mdi { font-size: 24px; }

.ios-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ios-blue);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--ios-duration) var(--ios-ease);
}
.ios-icon-btn:hover  { background: var(--ios-fill); }
.ios-icon-btn:active { transform: scale(0.92); }

/* ============================================
   18. UTILITIES
   ============================================ */
.ios-flex   { display: flex; }
.ios-inline-flex { display: inline-flex; }
.ios-block  { display: block; }
.ios-hidden { display: none !important; }
.ios-items-center   { align-items: center; }
.ios-justify-center { justify-content: center; }
.ios-justify-between { justify-content: space-between; }
.ios-flex-col { flex-direction: column; }
.ios-flex-wrap { flex-wrap: wrap; }
.ios-gap-1 { gap: var(--ios-space-1); }
.ios-gap-2 { gap: var(--ios-space-2); }
.ios-gap-3 { gap: var(--ios-space-3); }
.ios-gap-4 { gap: var(--ios-space-4); }

.ios-mt-2 { margin-top: var(--ios-space-2); }
.ios-mt-4 { margin-top: var(--ios-space-4); }
.ios-mb-2 { margin-bottom: var(--ios-space-2); }
.ios-mb-4 { margin-bottom: var(--ios-space-4); }
.ios-p-4  { padding: var(--ios-space-4); }

.ios-rounded    { border-radius: var(--ios-radius); }
.ios-rounded-lg { border-radius: var(--ios-radius-lg); }
.ios-shadow     { box-shadow: var(--ios-shadow); }

.ios-fade-in { animation: ios-fadeIn 0.3s var(--ios-ease); }
@keyframes ios-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive helper */
@media (max-width: 639px) {
  .ios-hide-mobile { display: none !important; }
}
@media (min-width: 640px) {
  .ios-hide-desktop { display: none !important; }
}
/* ============================================
   19. FIXED NAVBAR
   ============================================ */
.ios-navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

/* Body offset agar konten tidak tertutup navbar fixed */
body.ios-has-navbar {
  padding-top: 56px;
}

/* Ukuran tinggi navbar konsisten */
.ios-navbar {
  min-height: 56px;
}

/* Navbar transparan (opsional) */
.ios-navbar-transparent {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent;
}
.ios-navbar-transparent .ios-navbar-title,
.ios-navbar-transparent .ios-navbar-link {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Navbar berubah saat scroll */
.ios-navbar-scroll {
  transition: background var(--ios-duration) var(--ios-ease),
              box-shadow var(--ios-duration) var(--ios-ease);
}
.ios-navbar-scroll.ios-scrolled {
  box-shadow: 0 1px 12px rgba(0,0,0,0.08);
}


/* ============================================
   20. FIXED TABBAR
   ============================================ */
.ios-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--ios-separator);
}
/* @media (prefers-color-scheme: dark) {
  .ios-tabbar { background: rgba(28,28,30,0.85); }
} */

body.ios-has-tabbar {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.ios-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ios-gray);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ios-duration) var(--ios-ease);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.ios-tab-item .mdi {
  font-size: 24px;
  line-height: 1;
}
.ios-tab-item:hover { color: var(--ios-label-2); }
.ios-tab-item.ios-active { color: var(--ios-blue); }

/* Tab dengan badge */
.ios-tab-item .ios-tab-badge {
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ios-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tab style dengan pill background (opsional) */
.ios-tabbar-pill .ios-tab-item.ios-active {
  color: var(--ios-blue);
}


/* ============================================
   21. SIDENAV (Drawer)
   ============================================ */
.ios-sidenav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ios-duration) var(--ios-ease),
              visibility var(--ios-duration) var(--ios-ease);
}
.ios-sidenav-backdrop.ios-open {
  opacity: 1;
  visibility: visible;
}

.ios-sidenav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  max-width: 82%;
  background: var(--ios-bg-elevated);
  z-index: 1200;
  transform: translateX(-100%);
  transition: transform var(--ios-duration) var(--ios-ease);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ios-sidenav.ios-open {
  transform: translateX(0);
}

/* Varian kanan */
.ios-sidenav-right {
  left: auto;
  right: 0;
  transform: translateX(100%);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.ios-sidenav-right.ios-open { transform: translateX(0); }

/* Varian lebar */
.ios-sidenav-sm { width: 220px; }
.ios-sidenav-lg { width: 340px; }

/* Header */
.ios-sidenav-header {
  padding: var(--ios-space-5) var(--ios-space-4);
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo));
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--ios-space-3);
}
.ios-sidenav-header .ios-avatar {
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.ios-sidenav-header-info {
  flex: 1;
  min-width: 0;
}
.ios-sidenav-header-title {
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ios-sidenav-header-subtitle {
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section label */
.ios-sidenav-section {
  padding: var(--ios-space-4) var(--ios-space-4) var(--ios-space-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ios-label-3);
}

/* Menu item */
.ios-sidenav-menu {
  padding: var(--ios-space-2) var(--ios-space-2) var(--ios-space-4);
}
.ios-sidenav-item {
  display: flex;
  align-items: center;
  gap: var(--ios-space-3);
  padding: 10px var(--ios-space-3);
  margin-bottom: 2px;
  border-radius: var(--ios-radius);
  font-size: 15px;
  font-weight: 500;
  color: var(--ios-label);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ios-duration) var(--ios-ease);
}
.ios-sidenav-item:hover { background: var(--ios-fill); }
.ios-sidenav-item .mdi {
  font-size: 22px;
  color: var(--ios-label-2);
  flex-shrink: 0;
}
.ios-sidenav-item.ios-active {
  background: rgba(0,122,255,0.12);
  color: var(--ios-blue);
}
.ios-sidenav-item.ios-active .mdi { color: var(--ios-blue); }

/* Badge pada item */
.ios-sidenav-item .ios-sidenav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ios-fill-2);
  color: var(--ios-label-2);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ios-sidenav-item.ios-active .ios-sidenav-badge {
  background: var(--ios-blue);
  color: #fff;
}

/* Divider */
.ios-sidenav-divider {
  height: 1px;
  background: var(--ios-separator);
  margin: var(--ios-space-2) var(--ios-space-4);
}

/* Footer */
.ios-sidenav-footer {
  margin-top: auto;
  padding: var(--ios-space-4);
  border-top: 1px solid var(--ios-separator);
  font-size: 12px;
  color: var(--ios-label-2);
  text-align: center;
}

/* Sidenav mini variant (icon only) */
.ios-sidenav-mini .ios-sidenav-item {
  justify-content: center;
  padding: 12px;
}
.ios-sidenav-mini .ios-sidenav-item span:not(.mdi) { display: none; }

/* Disable scroll saat sidenav terbuka */
body.ios-sidenav-locked {
  overflow: hidden;
}

/* ============================================
   22. COLOR PALETTE — APPLE STYLE
   ============================================ */
:root {
  /* ---------- Apple System Colors (Light) ---------- */
  --ios-red:        #ff3b30;
  --ios-orange:     #ff9500;
  --ios-yellow:     #ffcc00;
  --ios-green:      #34c759;
  --ios-mint:       #00c7be;
  --ios-teal:       #30b0c7;
  --ios-cyan:       #32ade6;
  --ios-blue:       #007aff;
  --ios-indigo:     #5856d6;
  --ios-purple:     #af52de;
  --ios-pink:       #ff2d55;
  --ios-brown:      #a2845e;
  --ios-gray:       #8e8e93;

  /* ---------- Gray Scale ---------- */
  --ios-gray-1:     #8e8e93;
  --ios-gray-2:     #aeaeb2;
  --ios-gray-3:     #c7c7cc;
  --ios-gray-4:     #d1d1d6;
  --ios-gray-5:     #e5e5ea;
  --ios-gray-6:     #f2f2f7;

  /* ---------- iPhone Named Colors ---------- */
  --ios-starlight:  #f5f1e8;
  --ios-midnight:   #1c1c1e;
  --ios-space-gray: #4a4a4c;
  --ios-silver:     #e0e0e0;
  --ios-gold:       #e8c79a;
  --ios-graphite:   #4b4b4b;
  --ios-sierra-blue:#9bb5cc;
  --ios-alpine-green:#556b5d;
  --ios-pacific-blue:#2e5b7e;
  --ios-deep-purple: #58516d;
  --ios-rose-gold:  #e6c4b8;
  --ios-coral:      #f08080;
  --ios-yellow-iphone:#f5de6e;
  --ios-product-red:#c8102e;
  --ios-ultramarine: #4258a5;
  --ios-teal-iphone: #8fd0d0;
  --ios-lavender:   #d8cbe8;
  --ios-sage:       #a5b5a0;
  --ios-titanium:   #8c8c8e;
  --ios-natural-titanium:#a5a5a2;
  --ios-desert-titanium:#c2b0a0;

  /* ---------- Pastel Palette ---------- */
  --ios-pastel-red:    #ffcccc;
  --ios-pastel-orange: #ffe0b3;
  --ios-pastel-yellow: #fff5b8;
  --ios-pastel-green:  #c8f0d0;
  --ios-pastel-mint:   #b8ebe6;
  --ios-pastel-teal:   #b8dbe5;
  --ios-pastel-cyan:   #b8e2f2;
  --ios-pastel-blue:   #c2dcff;
  --ios-pastel-indigo: #c5c4ee;
  --ios-pastel-purple: #e0c8f0;
  --ios-pastel-pink:   #ffc8d5;
  --ios-pastel-brown:  #d8c5aa;
  --ios-pastel-gray:   #e0e0e5;

  /* ---------- Neon / Vivid Palette ---------- */
  --ios-neon-red:    #ff1744;
  --ios-neon-orange: #ff6d00;
  --ios-neon-yellow: #ffea00;
  --ios-neon-green:  #00e676;
  --ios-neon-mint:   #1de9b6;
  --ios-neon-cyan:   #00e5ff;
  --ios-neon-blue:   #2979ff;
  --ios-neon-indigo: #3d5afe;
  --ios-neon-purple: #d500f9;
  --ios-neon-pink:   #f50057;

  /* ---------- Gradient Presets ---------- */
  --ios-gradient-blue:    linear-gradient(135deg, #007aff, #5856d6);
  --ios-gradient-green:   linear-gradient(135deg, #34c759, #00c7be);
  --ios-gradient-red:     linear-gradient(135deg, #ff3b30, #ff9500);
  --ios-gradient-purple:  linear-gradient(135deg, #af52de, #ff2d55);
  --ios-gradient-sunset:  linear-gradient(135deg, #ff9500, #ff2d55, #af52de);
  --ios-gradient-ocean:   linear-gradient(135deg, #32ade6, #00c7be);
  --ios-gradient-forest:  linear-gradient(135deg, #34c759, #5856d6);
  --ios-gradient-aurora:  linear-gradient(135deg, #00e5ff, #d500f9);
  --ios-gradient-peach:   linear-gradient(135deg, #ffcc80, #f08080);
  --ios-gradient-midnight:linear-gradient(135deg, #1c1c1e, #4a4a4c);
}

/* Dark mode override */
/* @media (prefers-color-scheme: dark) {
  :root {
    --ios-starlight:  #d8d4cc;
    --ios-midnight:   #0a0a0c;
    --ios-silver:     #a0a0a0;
    --ios-pastel-red:    #7a3333;
    --ios-pastel-orange: #7a5522;
    --ios-pastel-yellow: #7a6d22;
    --ios-pastel-green:  #337a44;
    --ios-pastel-mint:   #227a70;
    --ios-pastel-teal:   #22657a;
    --ios-pastel-cyan:   #226e80;
    --ios-pastel-blue:   #22558a;
    --ios-pastel-indigo: #44428a;
    --ios-pastel-purple: #703d8a;
    --ios-pastel-pink:   #8a3348;
    --ios-pastel-brown:  #6a5540;
    --ios-pastel-gray:   #4a4a52;
  }
} */


/* ============================================
   23. TEXT COLOR CLASSES
   ============================================ */
.ios-text-red      { color: var(--ios-red); }
.ios-text-orange   { color: var(--ios-orange); }
.ios-text-yellow   { color: var(--ios-yellow); }
.ios-text-green    { color: var(--ios-green); }
.ios-text-mint     { color: var(--ios-mint); }
.ios-text-teal     { color: var(--ios-teal); }
.ios-text-cyan     { color: var(--ios-cyan); }
.ios-text-blue     { color: var(--ios-blue); }
.ios-text-indigo   { color: var(--ios-indigo); }
.ios-text-purple   { color: var(--ios-purple); }
.ios-text-pink     { color: var(--ios-pink); }
.ios-text-brown    { color: var(--ios-brown); }
.ios-text-gray     { color: var(--ios-gray); }

.ios-text-starlight  { color: var(--ios-starlight); }
.ios-text-midnight   { color: var(--ios-midnight); }
.ios-text-space-gray { color: var(--ios-space-gray); }
.ios-text-silver     { color: var(--ios-silver); }
.ios-text-gold       { color: var(--ios-gold); }
.ios-text-graphite   { color: var(--ios-graphite); }
.ios-text-sierra-blue{ color: var(--ios-sierra-blue); }
.ios-text-alpine-green{color: var(--ios-alpine-green); }
.ios-text-pacific-blue{color: var(--ios-pacific-blue); }
.ios-text-deep-purple{ color: var(--ios-deep-purple); }
.ios-text-rose-gold  { color: var(--ios-rose-gold); }
.ios-text-coral      { color: var(--ios-coral); }
.ios-text-lavender   { color: var(--ios-lavender); }
.ios-text-sage       { color: var(--ios-sage); }
.ios-text-titanium   { color: var(--ios-titanium); }
.ios-text-product-red{ color: var(--ios-product-red); }
.ios-text-ultramarine{ color: var(--ios-ultramarine); }


/* ============================================
   24. BACKGROUND COLOR CLASSES
   ============================================ */
.ios-bg-red      { background: var(--ios-red); }
.ios-bg-orange   { background: var(--ios-orange); }
.ios-bg-yellow   { background: var(--ios-yellow); }
.ios-bg-green    { background: var(--ios-green); }
.ios-bg-mint     { background: var(--ios-mint); }
.ios-bg-teal     { background: var(--ios-teal); }
.ios-bg-cyan     { background: var(--ios-cyan); }
.ios-bg-blue     { background: var(--ios-blue); }
.ios-bg-indigo   { background: var(--ios-indigo); }
.ios-bg-purple   { background: var(--ios-purple); }
.ios-bg-pink     { background: var(--ios-pink); }
.ios-bg-brown    { background: var(--ios-brown); }
.ios-bg-gray     { background: var(--ios-gray); }

.ios-bg-starlight  { background: var(--ios-starlight); }
.ios-bg-midnight   { background: var(--ios-midnight); color: #fff; }
.ios-bg-space-gray { background: var(--ios-space-gray); color: #fff; }
.ios-bg-silver     { background: var(--ios-silver); }
.ios-bg-gold       { background: var(--ios-gold); }
.ios-bg-graphite   { background: var(--ios-graphite); color: #fff; }
.ios-bg-sierra-blue{ background: var(--ios-sierra-blue); }
.ios-bg-alpine-green{background: var(--ios-alpine-green); color: #fff; }
.ios-bg-pacific-blue{background: var(--ios-pacific-blue); color: #fff; }
.ios-bg-deep-purple{ background: var(--ios-deep-purple); color: #fff; }
.ios-bg-rose-gold  { background: var(--ios-rose-gold); }
.ios-bg-coral      { background: var(--ios-coral); }
.ios-bg-lavender   { background: var(--ios-lavender); }
.ios-bg-sage       { background: var(--ios-sage); }
.ios-bg-titanium   { background: var(--ios-titanium); color: #fff; }
.ios-bg-product-red{ background: var(--ios-product-red); color: #fff; }
.ios-bg-ultramarine{ background: var(--ios-ultramarine); color: #fff; }

/* Pastel background */
.ios-bg-pastel-red    { background: var(--ios-pastel-red); }
.ios-bg-pastel-orange { background: var(--ios-pastel-orange); }
.ios-bg-pastel-yellow { background: var(--ios-pastel-yellow); }
.ios-bg-pastel-green  { background: var(--ios-pastel-green); }
.ios-bg-pastel-mint   { background: var(--ios-pastel-mint); }
.ios-bg-pastel-teal   { background: var(--ios-pastel-teal); }
.ios-bg-pastel-cyan   { background: var(--ios-pastel-cyan); }
.ios-bg-pastel-blue   { background: var(--ios-pastel-blue); }
.ios-bg-pastel-indigo { background: var(--ios-pastel-indigo); }
.ios-bg-pastel-purple { background: var(--ios-pastel-purple); }
.ios-bg-pastel-pink   { background: var(--ios-pastel-pink); }
.ios-bg-pastel-brown  { background: var(--ios-pastel-brown); }
.ios-bg-pastel-gray   { background: var(--ios-pastel-gray); }

/* Neon background */
.ios-bg-neon-red    { background: var(--ios-neon-red); color: #fff; }
.ios-bg-neon-orange { background: var(--ios-neon-orange); color: #fff; }
.ios-bg-neon-yellow { background: var(--ios-neon-yellow); color: #000; }
.ios-bg-neon-green  { background: var(--ios-neon-green); color: #000; }
.ios-bg-neon-mint   { background: var(--ios-neon-mint); color: #000; }
.ios-bg-neon-cyan   { background: var(--ios-neon-cyan); color: #000; }
.ios-bg-neon-blue   { background: var(--ios-neon-blue); color: #fff; }
.ios-bg-neon-indigo { background: var(--ios-neon-indigo); color: #fff; }
.ios-bg-neon-purple { background: var(--ios-neon-purple); color: #fff; }
.ios-bg-neon-pink   { background: var(--ios-neon-pink); color: #fff; }

/* Subtle / tinted background (soft) */
.ios-bg-soft-red    { background: rgba(255,59,48,0.12); color: var(--ios-red); }
.ios-bg-soft-orange { background: rgba(255,149,0,0.12); color: var(--ios-orange); }
.ios-bg-soft-yellow { background: rgba(255,204,0,0.18); color: #a07c00; }
.ios-bg-soft-green  { background: rgba(52,199,89,0.12); color: var(--ios-green); }
.ios-bg-soft-mint   { background: rgba(0,199,190,0.12); color: var(--ios-mint); }
.ios-bg-soft-teal   { background: rgba(48,176,199,0.12); color: var(--ios-teal); }
.ios-bg-soft-cyan   { background: rgba(50,173,230,0.12); color: var(--ios-cyan); }
.ios-bg-soft-blue   { background: rgba(0,122,255,0.12); color: var(--ios-blue); }
.ios-bg-soft-indigo { background: rgba(88,86,214,0.12); color: var(--ios-indigo); }
.ios-bg-soft-purple { background: rgba(175,82,222,0.12); color: var(--ios-purple); }
.ios-bg-soft-pink   { background: rgba(255,45,85,0.12); color: var(--ios-pink); }
.ios-bg-soft-gray   { background: rgba(142,142,147,0.12); color: var(--ios-gray); }


/* ============================================
   25. GRADIENT BACKGROUND CLASSES
   ============================================ */
.ios-bg-gradient-blue     { background: var(--ios-gradient-blue); color: #fff; }
.ios-bg-gradient-green    { background: var(--ios-gradient-green); color: #fff; }
.ios-bg-gradient-red      { background: var(--ios-gradient-red); color: #fff; }
.ios-bg-gradient-purple   { background: var(--ios-gradient-purple); color: #fff; }
.ios-bg-gradient-sunset   { background: var(--ios-gradient-sunset); color: #fff; }
.ios-bg-gradient-ocean    { background: var(--ios-gradient-ocean); color: #fff; }
.ios-bg-gradient-forest   { background: var(--ios-gradient-forest); color: #fff; }
.ios-bg-gradient-aurora   { background: var(--ios-gradient-aurora); color: #fff; }
.ios-bg-gradient-peach    { background: var(--ios-gradient-peach); color: #fff; }
.ios-bg-gradient-midnight { background: var(--ios-gradient-midnight); color: #fff; }


/* ============================================
   26. BORDER COLOR CLASSES
   ============================================ */
.ios-border        { border: 1px solid var(--ios-separator); }
.ios-border-red    { border: 1.5px solid var(--ios-red); }
.ios-border-orange { border: 1.5px solid var(--ios-orange); }
.ios-border-green  { border: 1.5px solid var(--ios-green); }
.ios-border-blue   { border: 1.5px solid var(--ios-blue); }
.ios-border-purple { border: 1.5px solid var(--ios-purple); }
.ios-border-pink   { border: 1.5px solid var(--ios-pink); }
.ios-border-gray   { border: 1.5px solid var(--ios-gray); }


/* ============================================
   27. COLORED BUTTON VARIANTS
   ============================================ */
.ios-btn-red      { background: var(--ios-red); color: #fff; }
.ios-btn-orange   { background: var(--ios-orange); color: #fff; }
.ios-btn-yellow   { background: var(--ios-yellow); color: #000; }
.ios-btn-green    { background: var(--ios-green); color: #fff; }
.ios-btn-mint     { background: var(--ios-mint); color: #fff; }
.ios-btn-teal     { background: var(--ios-teal); color: #fff; }
.ios-btn-cyan     { background: var(--ios-cyan); color: #fff; }
.ios-btn-blue     { background: var(--ios-blue); color: #fff; }
.ios-btn-indigo   { background: var(--ios-indigo); color: #fff; }
.ios-btn-purple   { background: var(--ios-purple); color: #fff; }
.ios-btn-pink     { background: var(--ios-pink); color: #fff; }
.ios-btn-brown    { background: var(--ios-brown); color: #fff; }

.ios-btn-starlight  { background: var(--ios-starlight); color: #3a3528; }
.ios-btn-midnight   { background: var(--ios-midnight); color: #fff; }
.ios-btn-sierra-blue{ background: var(--ios-sierra-blue); color: #fff; }
.ios-btn-gold       { background: var(--ios-gold); color: #4a3520; }
.ios-btn-rose-gold  { background: var(--ios-rose-gold); color: #4a2a20; }
.ios-btn-coral      { background: var(--ios-coral); color: #fff; }
.ios-btn-lavender   { background: var(--ios-lavender); color: #3a2a4a; }
.ios-btn-sage       { background: var(--ios-sage); color: #fff; }
.ios-btn-product-red{ background: var(--ios-product-red); color: #fff; }
.ios-btn-ultramarine{ background: var(--ios-ultramarine); color: #fff; }

/* Gradient button */
.ios-btn-gradient-blue   { background: var(--ios-gradient-blue);   color: #fff; }
.ios-btn-gradient-green  { background: var(--ios-gradient-green);  color: #fff; }
.ios-btn-gradient-red    { background: var(--ios-gradient-red);    color: #fff; }
.ios-btn-gradient-purple { background: var(--ios-gradient-purple); color: #fff; }
.ios-btn-gradient-sunset { background: var(--ios-gradient-sunset); color: #fff; }
.ios-btn-gradient-ocean  { background: var(--ios-gradient-ocean);  color: #fff; }
.ios-btn-gradient-aurora { background: var(--ios-gradient-aurora); color: #fff; }

/* Outline buttons per warna */
.ios-btn-outline-red    { background: transparent; color: var(--ios-red);    border: 1.5px solid var(--ios-red); }
.ios-btn-outline-green  { background: transparent; color: var(--ios-green);  border: 1.5px solid var(--ios-green); }
.ios-btn-outline-blue   { background: transparent; color: var(--ios-blue);   border: 1.5px solid var(--ios-blue); }
.ios-btn-outline-purple { background: transparent; color: var(--ios-purple); border: 1.5px solid var(--ios-purple); }
.ios-btn-outline-orange { background: transparent; color: var(--ios-orange); border: 1.5px solid var(--ios-orange); }
.ios-btn-outline-pink   { background: transparent; color: var(--ios-pink);   border: 1.5px solid var(--ios-pink); }
.ios-btn-outline-teal   { background: transparent; color: var(--ios-teal);   border: 1.5px solid var(--ios-teal); }
.ios-btn-outline-gray   { background: transparent; color: var(--ios-gray);   border: 1.5px solid var(--ios-gray); }


/* ============================================
   28. COLORED BADGE VARIANTS
   ============================================ */
.ios-badge-red      { background: var(--ios-red); color: #fff; }
.ios-badge-orange   { background: var(--ios-orange); color: #fff; }
.ios-badge-yellow   { background: var(--ios-yellow); color: #000; }
.ios-badge-green    { background: var(--ios-green); color: #fff; }
.ios-badge-mint     { background: var(--ios-mint); color: #fff; }
.ios-badge-teal     { background: var(--ios-teal); color: #fff; }
.ios-badge-cyan     { background: var(--ios-cyan); color: #fff; }
.ios-badge-blue     { background: var(--ios-blue); color: #fff; }
.ios-badge-indigo   { background: var(--ios-indigo); color: #fff; }
.ios-badge-purple   { background: var(--ios-purple); color: #fff; }
.ios-badge-pink     { background: var(--ios-pink); color: #fff; }
.ios-badge-brown    { background: var(--ios-brown); color: #fff; }
.ios-badge-gray     { background: var(--ios-gray); color: #fff; }

.ios-badge-starlight  { background: var(--ios-starlight); color: #3a3528; }
.ios-badge-midnight   { background: var(--ios-midnight); color: #fff; }
.ios-badge-gold       { background: var(--ios-gold); color: #4a3520; }
.ios-badge-rose-gold  { background: var(--ios-rose-gold); color: #4a2a20; }
.ios-badge-lavender   { background: var(--ios-lavender); color: #3a2a4a; }
.ios-badge-sage       { background: var(--ios-sage); color: #fff; }
.ios-badge-coral      { background: var(--ios-coral); color: #fff; }
.ios-badge-titanium   { background: var(--ios-titanium); color: #fff; }

/* Soft / tinted badge */
.ios-badge-soft-red    { background: rgba(255,59,48,0.15);  color: var(--ios-red); }
.ios-badge-soft-orange { background: rgba(255,149,0,0.15);  color: var(--ios-orange); }
.ios-badge-soft-green  { background: rgba(52,199,89,0.15);  color: var(--ios-green); }
.ios-badge-soft-blue   { background: rgba(0,122,255,0.15);  color: var(--ios-blue); }
.ios-badge-soft-purple { background: rgba(175,82,222,0.15); color: var(--ios-purple); }
.ios-badge-soft-pink   { background: rgba(255,45,85,0.15);  color: var(--ios-pink); }
.ios-badge-soft-gray   { background: rgba(142,142,147,0.15);color: var(--ios-gray); }


/* ============================================
   29. COLORED ALERT VARIANTS
   ============================================ */
.ios-alert-red      { border-left-color: var(--ios-red);    background: rgba(255,59,48,0.08); }
.ios-alert-orange   { border-left-color: var(--ios-orange); background: rgba(255,149,0,0.08); }
.ios-alert-yellow   { border-left-color: var(--ios-yellow); background: rgba(255,204,0,0.12); }
.ios-alert-green    { border-left-color: var(--ios-green);  background: rgba(52,199,89,0.08); }
.ios-alert-mint     { border-left-color: var(--ios-mint);   background: rgba(0,199,190,0.08); }
.ios-alert-teal     { border-left-color: var(--ios-teal);   background: rgba(48,176,199,0.08); }
.ios-alert-cyan     { border-left-color: var(--ios-cyan);   background: rgba(50,173,230,0.08); }
.ios-alert-blue     { border-left-color: var(--ios-blue);   background: rgba(0,122,255,0.08); }
.ios-alert-indigo   { border-left-color: var(--ios-indigo); background: rgba(88,86,214,0.08); }
.ios-alert-purple   { border-left-color: var(--ios-purple); background: rgba(175,82,222,0.08); }
.ios-alert-pink     { border-left-color: var(--ios-pink);   background: rgba(255,45,85,0.08); }
.ios-alert-gray     { border-left-color: var(--ios-gray);   background: rgba(142,142,147,0.08); }


/* ============================================
   30. COLORED CARD / STAT VARIANTS
   ============================================ */
.ios-card-tinted-red    { background: rgba(255,59,48,0.08);  border: 1px solid rgba(255,59,48,0.2); }
.ios-card-tinted-green  { background: rgba(52,199,89,0.08);  border: 1px solid rgba(52,199,89,0.2); }
.ios-card-tinted-blue   { background: rgba(0,122,255,0.08);  border: 1px solid rgba(0,122,255,0.2); }
.ios-card-tinted-purple { background: rgba(175,82,222,0.08); border: 1px solid rgba(175,82,222,0.2); }
.ios-card-tinted-orange { background: rgba(255,149,0,0.08);  border: 1px solid rgba(255,149,0,0.2); }
.ios-card-tinted-pink   { background: rgba(255,45,85,0.08);  border: 1px solid rgba(255,45,85,0.2); }

.ios-card-starlight { background: var(--ios-starlight); color: #3a3528; }
.ios-card-midnight  { background: var(--ios-midnight);  color: #fff; }
.ios-card-gold      { background: var(--ios-gold);      color: #4a3520; }
.ios-card-rose-gold { background: var(--ios-rose-gold); color: #4a2a20; }
.ios-card-lavender  { background: var(--ios-lavender);  color: #3a2a4a; }
.ios-card-sage      { background: var(--ios-sage);      color: #fff; }
.ios-card-coral     { background: var(--ios-coral);     color: #fff; }
.ios-card-titanium  { background: var(--ios-titanium);  color: #fff; }

/* Colored stat icon */
.ios-stat-icon.mdi-red    { background: rgba(255,59,48,0.12);  color: var(--ios-red); }
.ios-stat-icon.mdi-orange { background: rgba(255,149,0,0.12);  color: var(--ios-orange); }
.ios-stat-icon.mdi-yellow { background: rgba(255,204,0,0.18);  color: #a07c00; }
.ios-stat-icon.mdi-green  { background: rgba(52,199,89,0.12);  color: var(--ios-green); }
.ios-stat-icon.mdi-mint   { background: rgba(0,199,190,0.12);  color: var(--ios-mint); }
.ios-stat-icon.mdi-teal   { background: rgba(48,176,199,0.12); color: var(--ios-teal); }
.ios-stat-icon.mdi-cyan   { background: rgba(50,173,230,0.12); color: var(--ios-cyan); }
.ios-stat-icon.mdi-blue   { background: rgba(0,122,255,0.12);  color: var(--ios-blue); }
.ios-stat-icon.mdi-indigo { background: rgba(88,86,214,0.12);  color: var(--ios-indigo); }
.ios-stat-icon.mdi-purple { background: rgba(175,82,222,0.12); color: var(--ios-purple); }
.ios-stat-icon.mdi-pink   { background: rgba(255,45,85,0.12);  color: var(--ios-pink); }
.ios-stat-icon.mdi-gray   { background: rgba(142,142,147,0.12);color: var(--ios-gray); }

/* Avatar warna tambahan */
.ios-avatar-starlight { background: var(--ios-starlight); color: #3a3528; }
.ios-avatar-midnight  { background: var(--ios-midnight);  color: #fff; }
.ios-avatar-gold      { background: var(--ios-gold);      color: #4a3520; }
.ios-avatar-rose-gold { background: var(--ios-rose-gold); color: #4a2a20; }
.ios-avatar-lavender  { background: var(--ios-lavender);  color: #3a2a4a; }
.ios-avatar-sage      { background: var(--ios-sage);      color: #fff; }
.ios-avatar-coral     { background: var(--ios-coral);     color: #fff; }
.ios-avatar-titanium  { background: var(--ios-titanium);  color: #fff; }
.ios-avatar-indigo    { background: var(--ios-indigo);    color: #fff; }
.ios-avatar-brown     { background: var(--ios-brown);     color: #fff; }
.ios-avatar-mint      { background: var(--ios-mint);      color: #fff; }
.ios-avatar-cyan      { background: var(--ios-cyan);      color: #fff; }
.ios-avatar-yellow    { background: var(--ios-yellow);    color: #000; }
.ios-avatar-silver    { background: var(--ios-silver);    color: #3a3528; }
.ios-avatar-graphite  { background: var(--ios-graphite);  color: #fff; }

/* Gradient avatar */
.ios-avatar-gradient-blue   { background: var(--ios-gradient-blue);   color: #fff; }
.ios-avatar-gradient-purple { background: var(--ios-gradient-purple); color: #fff; }
.ios-avatar-gradient-sunset { background: var(--ios-gradient-sunset); color: #fff; }
.ios-avatar-gradient-aurora { background: var(--ios-gradient-aurora); color: #fff; }
.ios-avatar-gradient-ocean  { background: var(--ios-gradient-ocean);  color: #fff; }
.ios-avatar-gradient-forest { background: var(--ios-gradient-forest); color: #fff; }


/* ============================================
   31. COLOR SWATCH (untuk showcase)
   ============================================ */
.ios-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: var(--ios-space-3);
}
.ios-swatch {
  border-radius: var(--ios-radius);
  overflow: hidden;
  box-shadow: var(--ios-shadow-sm);
  transition: transform var(--ios-duration) var(--ios-ease);
}
.ios-swatch:hover { transform: translateY(-3px); }
.ios-swatch-color {
  height: 60px;
  width: 100%;
}
.ios-swatch-label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
}


/* ============================================
   32. JS HELPER: iosColor(name) — via CSS var lookup
   (dipakai oleh helper JS di bawah)
   ============================================ */
   /* ============================================
      33. TABS (Identifier-based)
      ============================================ */

   /* ---------- Base ---------- */
   .ios-tabs {
     position: relative;
     display: flex;
     background: var(--ios-fill);
     border-radius: var(--ios-radius);
     padding: 3px;
     gap: 2px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }
   .ios-tabs::-webkit-scrollbar { display: none; }

   .ios-tab {
     flex: 1;
     min-width: fit-content;
     white-space: nowrap;
     padding: 8px 16px;
     font-size: 14px;
     font-weight: 500;
     color: var(--ios-label-2);
     background: transparent;
     border: none;
     border-radius: calc(var(--ios-radius) - 3px);
     cursor: pointer;
     transition: all var(--ios-duration) var(--ios-ease);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     user-select: none;
   }
   .ios-tab .mdi { font-size: 18px; }
   .ios-tab:hover { color: var(--ios-label); }
   .ios-tab.ios-active {
     background: var(--ios-bg-elevated);
     color: var(--ios-label);
     font-weight: 600;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
   }
   .ios-tab:disabled,
   .ios-tab.ios-disabled {
     opacity: 0.4;
     cursor: not-allowed;
   }

   /* ---------- Underline Style ---------- */
   .ios-tabs-underline {
     background: transparent;
     border-radius: 0;
     padding: 0;
     border-bottom: 1px solid var(--ios-separator);
     gap: 0;
   }
   .ios-tabs-underline .ios-tab {
     border-radius: 0;
     padding: 12px 16px;
     background: transparent;
     box-shadow: none;
     position: relative;
   }
   .ios-tabs-underline .ios-tab.ios-active {
     background: transparent;
     box-shadow: none;
     color: var(--ios-blue);
   }
   .ios-tabs-underline .ios-tab.ios-active::after {
     content: "";
     position: absolute;
     left: 12px;
     right: 12px;
     bottom: -1px;
     height: 2px;
     background: var(--ios-blue);
     border-radius: 2px;
   }

   /* ---------- Pill Style ---------- */
   .ios-tabs-pill {
     background: transparent;
     padding: 0;
     gap: 8px;
   }
   .ios-tabs-pill .ios-tab {
     border-radius: var(--ios-radius-pill);
     border: 1.5px solid var(--ios-separator);
     background: var(--ios-bg-elevated);
     padding: 6px 18px;
     font-size: 14px;
   }
   .ios-tabs-pill .ios-tab.ios-active {
     background: var(--ios-blue);
     color: #fff;
     border-color: var(--ios-blue);
     box-shadow: none;
   }

   /* ---------- Colored variants ---------- */
   .ios-tabs-blue   .ios-tab.ios-active { color: var(--ios-blue); }
   .ios-tabs-green  .ios-tab.ios-active { color: var(--ios-green); }
   .ios-tabs-red    .ios-tab.ios-active { color: var(--ios-red); }
   .ios-tabs-purple .ios-tab.ios-active { color: var(--ios-purple); }
   .ios-tabs-orange .ios-tab.ios-active { color: var(--ios-orange); }
   .ios-tabs-pink   .ios-tab.ios-active { color: var(--ios-pink); }

   .ios-tabs-underline.ios-tabs-blue   .ios-tab.ios-active::after { background: var(--ios-blue); }
   .ios-tabs-underline.ios-tabs-green  .ios-tab.ios-active::after { background: var(--ios-green); }
   .ios-tabs-underline.ios-tabs-red    .ios-tab.ios-active::after { background: var(--ios-red); }
   .ios-tabs-underline.ios-tabs-purple .ios-tab.ios-active::after { background: var(--ios-purple); }

   /* ---------- Tab Content ---------- */
   .ios-tab-content {
     padding: var(--ios-space-4) 0;
   }
   .ios-tab-pane {
     display: none;
     animation: ios-fadeIn 0.25s var(--ios-ease);
   }
   .ios-tab-pane.ios-active { display: block; }

   /* ---------- Badge di dalam tab ---------- */
   .ios-tab .ios-tab-badge {
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
     border-radius: 9px;
     background: var(--ios-red);
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }

   /* ---------- Full width ---------- */
   .ios-tabs-block { width: 100%; }
   .ios-tabs-block .ios-tab { flex: 1; }

   /* ---------- Scrollable ---------- */
   .ios-tabs-scroll {
     justify-content: flex-start;
   }
   .ios-tabs-scroll .ios-tab {
     flex: 0 0 auto;
   }

   /* ---------- Vertical tabs ---------- */
   .ios-tabs-vertical {
     flex-direction: column;
     align-items: stretch;
     width: 180px;
     background: transparent;
     padding: 0;
     gap: 4px;
   }
   .ios-tabs-vertical .ios-tab {
     justify-content: flex-start;
     border-radius: var(--ios-radius);
     padding: 10px 14px;
     background: transparent;
   }
   .ios-tabs-vertical .ios-tab.ios-active {
     background: rgba(0,122,255,0.12);
     color: var(--ios-blue);
     box-shadow: none;
   }