/* ClickKasir 3.0 final visual effects: subtle, scoped, non-layout changing */
:root {
  --ck-effect-shadow-soft: 0 14px 34px rgba(15, 23, 42, .08);
  --ck-effect-shadow-lift: 0 20px 46px rgba(15, 23, 42, .12);
  --ck-effect-ring: 0 0 0 1px rgba(37, 99, 235, .08), 0 14px 34px rgba(37, 99, 235, .08);
}

.rs-app-topbar,
.rs-public-topbar,
.rs-auth-topbar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

.rs-app-sidebar,
.rs-app-topbar,
.rs-public-topbar,
.rs-card,
.rs-data-card,
.rs-kpi-card,
.rs-summary-card,
.rs-dashboard-card,
.rs-auth-card,
.ck2-water-card,
.ck2-water-price,
.ck2-water-testimonial,
.ck2-water-contact-card,
.modal-content {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

.rs-card:hover,
.rs-data-card:hover,
.rs-dashboard-card:hover,
.rs-auth-card:hover,
.ck2-water-card:hover,
.ck2-water-price:hover,
.ck2-water-testimonial:hover,
.ck2-water-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ck-effect-shadow-lift);
}

.rs-kpi-card,
.rs-summary-card {
  position: relative;
  overflow: hidden;
}

.rs-kpi-card::after,
.rs-summary-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 42%, transparent 58%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}

.rs-kpi-card:hover,
.rs-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ck-effect-ring);
}

.rs-kpi-card:hover::after,
.rs-summary-card:hover::after {
  transform: translateX(120%);
}

.rs-btn,
.btn,
button:not(.btn-close) {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.rs-btn:hover,
.btn:hover,
button:not(.btn-close):hover {
  transform: translateY(-1px);
}

.rs-btn:active,
.btn:active,
button:not(.btn-close):active {
  transform: translateY(0);
}

.rs-app-sidebar__link,
.rs-nav-link,
.rs-menu-link,
.ck2-water-nav__link {
  transition: color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.rs-app-sidebar__link:hover,
.rs-nav-link:hover,
.rs-menu-link:hover,
.ck2-water-nav__link:hover {
  transform: translateX(2px);
}

.table tbody tr,
.rs-table tbody tr {
  transition: background-color .18s ease, box-shadow .18s ease;
}

.table tbody tr:hover,
.rs-table tbody tr:hover {
  background-color: rgba(37, 99, 235, .035);
}

.form-control:focus,
.form-select:focus,
.rs-form-control:focus,
.rs-form-select:focus {
  box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .12);
}

.rs-avatar,
.rs-user-avatar,
.rs-topbar-avatar,
.ck2-water-brand__mark {
  transition: transform .2s ease, box-shadow .2s ease;
}

.rs-avatar:hover,
.rs-user-avatar:hover,
.rs-topbar-avatar:hover,
.ck2-water-brand__mark:hover {
  transform: scale(1.035);
}

.ck2-water-hero__visual,
.ck2-water-hero__panel,
.ck2-water-hero__image {
  transition: transform .35s ease, box-shadow .35s ease;
}

.ck2-water-hero__visual:hover,
.ck2-water-hero__panel:hover {
  transform: translateY(-3px);
}

.ck2-water-hero::before {
  animation: ckHeroGlow 9s ease-in-out infinite alternate;
}

@keyframes ckHeroGlow {
  from { opacity: .72; transform: translate3d(0,0,0) scale(1); }
  to { opacity: .92; transform: translate3d(0,-8px,0) scale(1.015); }
}

.modal.fade .modal-dialog {
  transition: transform .22s ease-out, opacity .22s ease-out;
  transform: translateY(10px) scale(.985);
}

.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .rs-card:hover,
  .rs-data-card:hover,
  .rs-dashboard-card:hover,
  .rs-auth-card:hover,
  .rs-kpi-card:hover,
  .rs-summary-card:hover,
  .ck2-water-card:hover,
  .ck2-water-price:hover,
  .ck2-water-testimonial:hover,
  .ck2-water-contact-card:hover,
  .ck2-water-hero__visual:hover,
  .ck2-water-hero__panel:hover,
  .rs-btn:hover,
  .btn:hover,
  button:not(.btn-close):hover {
    transform: none;
  }
}

/* Mobile GPU guard: cegah glitch garis/artefak di Chrome Android saat background + glass + SVG chart dirender bersamaan. */
@media (max-width: 767.98px) {
  body.rs-public-body,
  body.rs-auth-body,
  body.rs-app-body,
  body.rs-instalasi-body {
    background-attachment: scroll !important;
    background-size: cover !important;
  }

  .rs-global-topbar,
  .rs-global-footer,
  .rs-app-sidebar,
  .rs-app-topbar,
  .rs-app-footer,
  .rs-public-topbar,
  .rs-auth-topbar,
  .ck2-water-topbar__inner,
  .rs-card,
  .card,
  .rs-page-header,
  .rs-section-card,
  .rs-data-card,
  .rs-dashboard-card,
  .rs-kpi-card,
  .rs-summary-card,
  .rs-shortcut-card,
  .rs-admin-table-card,
  .rs-product-card,
  .rs-pos-product,
  .rs-auth-card,
  .modal-content,
  .offcanvas,
  .dropdown-menu,
  .rs-pos-cart-panel,
  .rs-pos-detail-modal,
  .ck2-water-card,
  .ck2-water-price,
  .ck2-water-testimonial,
  .ck2-water-contact-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    transition-property: background-color, border-color, color, opacity !important;
    will-change: auto !important;
  }

  html[data-rs-theme="terang"] .rs-app-sidebar,
  html[data-rs-theme="terang"] .rs-app-topbar,
  html[data-rs-theme="terang"] .rs-page-header,
  html[data-rs-theme="terang"] .rs-app-footer,
  html[data-rs-theme="terang"] .rs-card,
  html[data-rs-theme="terang"] .card,
  html[data-rs-theme="terang"] .rs-data-card,
  html[data-rs-theme="terang"] .rs-dashboard-card,
  html[data-rs-theme="terang"] .rs-kpi-card,
  html[data-rs-theme="terang"] .rs-summary-card,
  html[data-rs-theme="terang"] .modal-content,
  html[data-rs-theme="terang"] .offcanvas,
  html[data-rs-theme="terang"] .dropdown-menu {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(226, 232, 240, .86) !important;
  }

  html[data-rs-theme="gelap"] .rs-app-sidebar,
  html[data-rs-theme="gelap"] .rs-app-topbar,
  html[data-rs-theme="gelap"] .rs-page-header,
  html[data-rs-theme="gelap"] .rs-app-footer,
  html[data-rs-theme="gelap"] .rs-card,
  html[data-rs-theme="gelap"] .card,
  html[data-rs-theme="gelap"] .rs-data-card,
  html[data-rs-theme="gelap"] .rs-dashboard-card,
  html[data-rs-theme="gelap"] .rs-kpi-card,
  html[data-rs-theme="gelap"] .rs-summary-card,
  html[data-rs-theme="gelap"] .modal-content,
  html[data-rs-theme="gelap"] .offcanvas,
  html[data-rs-theme="gelap"] .dropdown-menu {
    background: rgba(12, 12, 14, .90) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }

  .rs-kpi-card::before,
  .rs-kpi-card::after,
  .rs-summary-card::before,
  .rs-summary-card::after,
  .rs-card::before,
  .rs-card::after,
  .rs-page-header::before,
  .rs-page-header::after,
  .rs-wave-chart::before {
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }

  .rs-wave-chart,
  .rs-wave-chart svg,
  .rs-wave-chart__line,
  .rs-wave-chart__glow,
  .rs-wave-chart__point circle,
  .rs-wave-chart__tooltip {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  .rs-wave-chart {
    background: rgba(255, 255, 255, .58) !important;
    overflow: hidden !important;
    contain: paint;
  }

  html[data-rs-theme="gelap"] .rs-wave-chart {
    background: rgba(255, 255, 255, .07) !important;
  }

  .rs-card:hover,
  .rs-data-card:hover,
  .rs-dashboard-card:hover,
  .rs-auth-card:hover,
  .rs-kpi-card:hover,
  .rs-summary-card:hover,
  .rs-quick-link:hover,
  .rs-btn:hover,
  .btn:hover,
  button:not(.btn-close):hover {
    transform: none !important;
  }
}