/* SIM-LAUNDRY — tema "Aqua Neon" 2026: oklch, light-dark(), @layer, nesting, container queries, scroll-driven & view transitions */
@layer base, theme, layout, components, pages;
@view-transition { navigation: auto; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

@layer base {
  :root {
    color-scheme: light dark;
    --brand: oklch(.68 .15 220); --brand2: oklch(.56 .22 290); --mint: oklch(.84 .14 172);
    --bg: light-dark(oklch(.975 .014 215), oklch(.16 .035 258));
    --surface: light-dark(oklch(1 0 0 / .74), oklch(.25 .04 258 / .6));
    --solid: light-dark(oklch(1 0 0), oklch(.22 .035 258));
    --field: light-dark(oklch(1 0 0), oklch(.19 .03 258));
    --line: light-dark(oklch(.9 .02 225), oklch(.35 .04 258));
    --text: light-dark(oklch(.24 .045 258), oklch(.95 .012 225));
    --muted: light-dark(oklch(.5 .03 250), oklch(.75 .03 240));
    --glow: 0 14px 44px -14px color-mix(in oklch, var(--brand) 60%, transparent);
    --r: 1.25rem;
    --grad: linear-gradient(135deg, var(--brand), var(--brand2));
  }
  :root[data-theme=light] { color-scheme: light; }
  :root[data-theme=dark] { color-scheme: dark; }
  * { -webkit-tap-highlight-color: transparent; }
  html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
  body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text); min-height: 100dvh; overflow-x: clip;
    background:
      radial-gradient(60rem 38rem at 85% -10%, color-mix(in oklch, var(--brand) 26%, transparent), transparent 70%),
      radial-gradient(50rem 34rem at -10% 20%, color-mix(in oklch, var(--brand2) 20%, transparent), transparent 70%),
      radial-gradient(40rem 30rem at 60% 110%, color-mix(in oklch, var(--mint) 20%, transparent), transparent 70%),
      var(--bg);
    background-attachment: fixed;
    &::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
      background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 46px 46px; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%); }
  }
  h1, h2, h3, h4, h5 { text-wrap: balance; letter-spacing: -.02em; font-weight: 800; }
  p { text-wrap: pretty; }
  a { color: var(--brand); text-decoration: none; }
  ::selection { background: color-mix(in oklch, var(--brand) 40%, transparent); }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: .5rem; }
}

@layer theme {
  /* Bootstrap dikalibrasi ke token tema */
  .bg-light, .bg-white { background: var(--surface) !important; }
  .text-muted { color: var(--muted) !important; }
  .text-primary { color: var(--brand) !important; }
  .card, .list-group-item { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 color-mix(in oklch, white 40%, transparent) inset; }
  .list-group-item { border-radius: .8rem !important; margin-bottom: .4rem; }
  .form-control, .form-select { background-color: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: .8rem; padding-block: .55rem;
    &::placeholder { color: var(--muted); opacity: .8; }
    &:focus { background-color: var(--field); color: var(--text); border-color: var(--brand); box-shadow: 0 0 0 .25rem color-mix(in oklch, var(--brand) 22%, transparent); } }
  .form-select-sm, .form-control-sm { border-radius: .65rem; }
  textarea.form-control { field-sizing: content; min-height: 5rem; }
  .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
  label { font-weight: 500; }
  .btn { border-radius: .85rem; font-weight: 600; transition: transform .15s, box-shadow .2s, filter .2s; &:active { transform: scale(.97); } }
  .btn-primary, .btn-success, .btn-danger { border: 0; color: #fff; box-shadow: var(--glow); &:hover { filter: brightness(1.1); color: #fff; } }
  .btn-primary { background: var(--grad); }
  .btn-success { background: linear-gradient(135deg, oklch(.68 .17 160), oklch(.6 .15 190)); }
  .btn-danger { background: linear-gradient(135deg, oklch(.64 .22 20), oklch(.56 .22 350)); }
  .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-light, .btn-soft {
    background: color-mix(in oklch, var(--brand) 9%, transparent); border: 1px solid var(--line); color: var(--text);
    &:hover { background: color-mix(in oklch, var(--brand) 20%, transparent); border-color: var(--brand); color: var(--text); } }
  .btn-outline-success:hover { border-color: oklch(.68 .17 160); } .btn-outline-danger:hover { border-color: oklch(.64 .22 20); }
  .btn-icon { display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: .85rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1.2rem; cursor: pointer; }
  .badge { border-radius: 2rem; padding: .4em .8em; font-weight: 600; &.bg-primary, &.bg-info { background: var(--grad) !important; color: #fff; } }
  .alert { border-radius: 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); backdrop-filter: blur(14px);
    &.alert-success { border-color: oklch(.7 .15 160); background: color-mix(in oklch, oklch(.7 .15 160) 16%, var(--surface)); }
    &.alert-danger { border-color: oklch(.65 .2 25); background: color-mix(in oklch, oklch(.65 .2 25) 14%, var(--surface)); }
    &.alert-warning { border-color: oklch(.8 .15 85); background: color-mix(in oklch, oklch(.8 .15 85) 16%, var(--surface)); }
    &.alert-info { border-color: var(--brand); background: color-mix(in oklch, var(--brand) 14%, var(--surface)); } }
  .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); --bs-table-hover-bg: color-mix(in oklch, var(--brand) 8%, transparent); color: var(--text);
    th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; white-space: nowrap; }
    td, th { padding: .65rem .8rem; vertical-align: middle; }
    tr:hover > td { background: color-mix(in oklch, var(--brand) 6%, transparent); }
    &.bg-white { border-radius: 1rem; overflow: hidden; backdrop-filter: blur(14px); }
    tr.table-warning > td { background: color-mix(in oklch, oklch(.82 .15 85) 22%, transparent); } }
  .table-responsive { border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
  hr { border-color: var(--line); opacity: 1; }
  .btn-close { filter: light-dark(none, invert(1)); }
  .collapsing, .collapse { }
}

@layer layout {
  .wrap { inline-size: min(1160px, 100% - 2.5rem); margin-inline: auto; }
  /* ===== Staf: sidebar + konten ===== */
  .shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh;
    @media (min-width: 992px) { grid-template-columns: 276px minmax(0, 1fr); } }
  .side { --bs-offcanvas-bg: var(--solid); --bs-offcanvas-color: var(--text); --bs-offcanvas-width: 280px;
    padding: 1.1rem; gap: 1rem; flex-direction: column; border-inline-end: 1px solid var(--line); background: var(--surface);
    @media (min-width: 992px) { position: sticky; top: 0; height: 100dvh; display: flex !important; backdrop-filter: blur(22px) saturate(1.5); }
    @media (max-width: 991.98px) { background: var(--solid); overflow-y: auto; } }
  .side-head { display: flex; justify-content: space-between; align-items: center; padding: .25rem .4rem; }
  .side-nav { display: grid; gap: .15rem; overflow-y: auto; flex: 1; align-content: start; scrollbar-width: thin;
    a { display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; border-radius: .9rem; color: var(--muted); font-weight: 600; font-size: .93rem; transition: background .2s, color .2s, translate .2s;
      i { font-size: 1.1rem; }
      &:hover { background: color-mix(in oklch, var(--brand) 12%, transparent); color: var(--text); translate: 3px 0; }
      &.on { background: var(--grad); color: #fff; box-shadow: var(--glow); } } }
  .side-foot { display: grid; gap: .8rem; padding-top: .9rem; border-top: 1px solid var(--line);
    .who { display: flex; align-items: center; gap: .7rem; small { display: block; color: var(--muted); text-transform: capitalize; } }
    .avatar { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; } }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--surface); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
  .main { min-inline-size: 0; container: main / inline-size; }
  .content { padding: clamp(1rem, 3vw, 2.2rem); overflow-x: auto; animation: rise .5s both;
    > h4:first-child, > div > h4:first-child { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-block-end: 1.1rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; inline-size: fit-content; } }
  .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
  .brand-logo { max-inline-size: 150px; object-fit: contain; border-radius: .5rem; }
  .brand-name { font-size: 1.05rem; }
  /* ===== Publik ===== */
  .pubnav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(22px) saturate(1.6); background: color-mix(in oklch, var(--bg) 62%, transparent); border-bottom: 1px solid var(--line);
    .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; padding-block: .7rem; }
    nav { align-items: center; gap: .4rem; flex-basis: 100%; padding-block: .6rem; flex-direction: column; align-items: stretch;
      a:not(.btn) { color: var(--text); font-weight: 600; padding: .5rem .9rem; border-radius: .8rem; &:hover { background: color-mix(in oklch, var(--brand) 12%, transparent); } }
      @media (min-width: 992px) { flex-basis: auto; flex-direction: row; padding: 0; } } }
  .pubfoot { margin-block-start: 5rem; padding-block: 2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem;
    .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } }
  .bubbles { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
    i { position: absolute; inset-block-end: -80px; inset-inline-start: var(--x); inline-size: var(--s); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff9, color-mix(in oklch, var(--brand) 25%, transparent) 60%); border: 1px solid color-mix(in oklch, var(--brand) 40%, transparent);
      animation: float var(--d) linear var(--w) infinite; } }
}

@layer components {
  .glass { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(18px) saturate(1.4); }
  .neon { position: relative; isolation: isolate;
    &::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; z-index: -1; pointer-events: none;
      background: conic-gradient(from var(--ang), transparent 55%, var(--brand), var(--brand2), transparent 95%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 7s linear infinite; } }
  .stat { padding: 1.2rem 1.3rem; display: flex; gap: 1rem; align-items: center; transition: translate .25s, box-shadow .25s;
    &:hover { translate: 0 -4px; box-shadow: var(--glow); }
    .ico { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; flex: none; border-radius: 1rem; background: var(--grad); color: #fff; font-size: 1.3rem; box-shadow: var(--glow); }
    .lbl { color: var(--muted); font-size: .82rem; font-weight: 600; }
    .val { font-size: clamp(1.15rem, 2.6cqi, 1.6rem); font-weight: 800; letter-spacing: -.02em; } }
  .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 2rem; font-size: .85rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line);
    &::before { content: ""; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: oklch(.65 .2 25); }
    &.is-open::before { background: oklch(.75 .2 150); box-shadow: 0 0 0 0 oklch(.75 .2 150 / .6); animation: ping 1.8s infinite; } }
  .stepper { display: flex; flex-wrap: wrap; gap: .5rem;
    span { padding: .35rem .8rem; border-radius: 2rem; font-size: .8rem; font-weight: 600; border: 1px dashed var(--line); color: var(--muted); &.done { background: var(--grad); color: #fff; border-style: solid; border-color: transparent; } } }
}

@layer pages {
  /* ===== Landing ===== */
  .hero { padding-block: clamp(2.5rem, 8vw, 6rem); display: grid; gap: 3rem; align-items: center;
    @media (min-width: 992px) { grid-template-columns: 1.1fr .9fr; }
    h1 { font-size: clamp(2.3rem, 6.4vw, 4.4rem); line-height: 1.02; margin-block: 1rem; em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } }
    .lead { font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--muted); max-inline-size: 52ch; }
    .cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 1.6rem; .btn { padding: .8rem 1.4rem; } } }
  .washer { inline-size: min(80vw, 360px); aspect-ratio: 1; margin-inline: auto; border-radius: 2.4rem; padding: 1.5rem; display: grid; place-items: center; position: relative; box-shadow: var(--glow); animation: bob 5s ease-in-out infinite;
    &::after { content: ""; position: absolute; inset-block-start: 1.1rem; inset-inline: 1.5rem; block-size: .6rem; border-radius: 1rem; background: linear-gradient(90deg, var(--brand) 0 20%, var(--line) 20% 100%); opacity: .8; }
    .door { inline-size: 80%; aspect-ratio: 1; border-radius: 50%; border: 12px solid color-mix(in oklch, var(--brand) 40%, var(--solid)); position: relative; overflow: hidden; margin-block-start: 1.2rem;
      background: color-mix(in oklch, var(--bg) 80%, black); box-shadow: inset 0 0 40px #0006, var(--glow);
      .water { position: absolute; inset-inline-start: -50%; inset-block-start: 46%; inline-size: 200%; aspect-ratio: 1; border-radius: 42%; background: color-mix(in oklch, var(--brand) 70%, transparent); animation: spinw 8s linear infinite;
        &.b { background: color-mix(in oklch, var(--brand2) 40%, transparent); animation-duration: 12s; animation-direction: reverse; } }
      &::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 28% 22%, #fff9, transparent 38%); }
      b { position: absolute; z-index: 1; inset-block-end: 10%; inline-size: 12px; aspect-ratio: 1; border-radius: 50%; background: #fff8; animation: rise-b 4s ease-in infinite; &:nth-of-type(1) { inset-inline-start: 30%; } &:nth-of-type(2) { inset-inline-start: 52%; animation-delay: 1.3s; inline-size: 18px; } &:nth-of-type(3) { inset-inline-start: 68%; animation-delay: 2.4s; } } } }
  .section { padding-block: clamp(2.5rem, 6vw, 4.5rem);
    .sec-head { text-align: center; max-inline-size: 640px; margin: 0 auto 2.5rem; h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); } p { color: var(--muted); } } }
  .grid-auto { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
  .svc { padding: 1.5rem; transition: translate .25s, box-shadow .25s; &:hover { translate: 0 -6px; box-shadow: var(--glow); }
    .ico { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 1rem; background: color-mix(in oklch, var(--brand) 16%, transparent); color: var(--brand); font-size: 1.4rem; margin-block-end: 1rem; }
    h3 { font-size: 1.15rem; } .price { font-size: 1.5rem; font-weight: 800; color: var(--brand); small { font-size: .8rem; color: var(--muted); font-weight: 600; } } }
  .step { padding: 1.5rem; position: relative; counter-increment: s;
    &::before { content: "0" counter(s); position: absolute; inset-block-start: .8rem; inset-inline-end: 1.1rem; font-size: 2.6rem; font-weight: 800; color: color-mix(in oklch, var(--brand) 18%, transparent); }
    .ico { font-size: 1.8rem; color: var(--brand); } }
  .steps { counter-reset: s; }
  .hours { padding: 1.3rem; display: grid; gap: .35rem;
    .row-d { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-radius: .9rem; font-weight: 500;
      &.today { background: var(--grad); color: #fff; font-weight: 700; box-shadow: var(--glow); }
      &.closed span:last-child { color: oklch(.65 .2 25); } &.today.closed span:last-child { color: #fff; } } }
  .split { display: grid; gap: 1.5rem; @media (min-width: 900px) { grid-template-columns: 1fr 1fr; } }
  .panel { padding: clamp(1.2rem, 3vw, 2rem); }
  .auth { min-block-size: 78dvh; display: grid; place-items: center; padding-block: 2rem; }
  .auth .panel { inline-size: min(440px, 100%); }
  .narrow { inline-size: min(720px, 100% - 2rem); margin: 2rem auto; display: grid; gap: 1.2rem; }
  .reveal { animation: rise .7s both; }
  @supports (animation-timeline: view()) { .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } }
  /* Pengaturan */
  .hrow { display: grid; grid-template-columns: 90px 1fr; gap: .6rem .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--line);
    @media (min-width: 700px) { grid-template-columns: 100px 120px 1fr 1fr; }
    .times { display: contents; } .form-check { margin: 0; }
    &:has(.x:checked) input[type=time] { opacity: .35; pointer-events: none; } }
  .imgprev { display: grid; place-items: center; inline-size: 96px; block-size: 96px; border-radius: 1rem; border: 1px dashed var(--line); background: var(--field); overflow: hidden; img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } }
}

@keyframes rise { from { opacity: 0; translate: 0 24px; } }
@keyframes float { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .9; } 100% { translate: 20px -115dvh; opacity: 0; } }
@keyframes spin { to { --ang: 360deg; } }
@keyframes spinw { to { rotate: 360deg; } }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes rise-b { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 100% { translate: 0 -150px; opacity: 0; } }
@keyframes ping { 70% { box-shadow: 0 0 0 .6rem oklch(.75 .2 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(.75 .2 150 / 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .side, .topbar, .bubbles, .pubnav, .pubfoot { display: none !important; } body { background: #fff; color: #000; } .shell { display: block; } }