/* ============================================================
   GLASS — efek "liquid glass" ala iOS + tombol, chip, kartu, input
   ============================================================ */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  -webkit-backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
  backdrop-filter: blur(24px) saturate(1.7) brightness(1.05);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.03),
    inset 0 0 22px rgba(255,255,255,.025),
    0 12px 40px rgba(0,0,0,.45);
  isolation: isolate;
}
/* kilau yang mengikuti kursor */
.glass::after, .card::after, .stat::after, .proj::after, .tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(220px circle at var(--sx, 50%) var(--sy, 0%), rgba(255,255,255,.13), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
  mix-blend-mode: plus-lighter;
}
.glass:hover::after, .card:hover::after, .stat:hover::after, .proj:hover::after, .tile:hover::after { opacity: 1; }

/* sudut "squircle" iOS di browser yang mendukung */
@supports (corner-shape: squircle) {
  .card, .stat, .proj, .tile, .cc__panel, .spot__panel, .lb__sheet { corner-shape: squircle; }
}

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 18px; border-radius: 12px;
  font: 400 13px/1 var(--font-body); letter-spacing: .01em; white-space: nowrap;
  transition: transform .35s var(--spring), background .25s, border-color .25s, box-shadow .25s, color .25s;
  will-change: transform;
}
.btn:active { transform: scale(.95); }
.btn--solid { background: #f4f4f5; color: #0a0a0a; font-weight: 500; box-shadow: 0 6px 24px rgba(255,255,255,.12); }
.btn--solid:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 34px rgba(255,255,255,.22); }
.btn--ghost { border: 1px solid var(--line-2); background: rgba(255,255,255,.02); color: var(--fg); }
.btn--ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.btn--wide { width: 100%; height: 48px; border-radius: 15px; background: rgba(255,255,255,.1); color: var(--fg); border: 1px solid var(--line); font-size: 14px; }
.btn--wide:hover { background: rgba(255,255,255,.17); transform: translateY(-1px); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Chip ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 400 11px/1 var(--font-mono); padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--fg-2); transition: transform .35s var(--spring), background .25s; }
.chip:hover { transform: translateY(-2px) scale(1.04); background: rgba(255,255,255,.1); }

/* ---------- Kartu umum ---------- */
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid var(--line); border-radius: 28px;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.4);
}
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -.005em; line-height: 1.2; }
.card__sub { margin-top: 6px; font-size: 12.5px; color: var(--fg-3); }
.card__label { margin: 22px 0 10px; font-size: 12px; color: var(--fg-3); }

/* ---------- Input ---------- */
.field, .input, .upload {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px;
  color: var(--fg-3); transition: border-color .25s, background .25s, box-shadow .25s;
}
.field { padding: 0 16px; min-height: 48px; margin-top: 12px; }
.field--area { align-items: flex-start; padding-top: 14px; }
.field input, .field textarea, .input { width: 100%; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 13.5px; font-weight: 300; }
.field textarea { resize: none; min-height: 110px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--fg-3); }
.input { padding: 0 16px; min-height: 46px; border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 14px; margin-top: 12px; }
.input--area { padding: 14px 16px; resize: none; min-height: 96px; line-height: 1.55; }
.field:focus-within, .input:focus { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(255,255,255,.06); color: var(--fg); }
.field.is-error, .input.is-error { border-color: #ff453a; animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.upload { padding: 0 16px; min-height: 46px; margin-top: 12px; margin-bottom: 12px; font-size: 12.5px; cursor: pointer; }
.upload:hover { background: rgba(255,255,255,.07); color: var(--fg); }