/* --- VARIABEL TEMA & DASAR --- */
:root {
  --bc: 69 56 58 !important;
  --n: 69 56 58 !important;
  --nc: 255 248 246 !important;
  --p: 230 184 194 !important;
  --pc: 255 255 255 !important;
  --suc: 255 255 255 !important;
  --erc: 255 255 255 !important;
  --b1: 255 248 246 !important;
  --in: 65 105 224 !important;
  --s: 140 74 88 !important;
  --sc: 255 255 255 !important;
  --a: 140 74 88 !important;
  --ac: 255 255 255 !important;
  --su: 27 163 3 !important;
  --wa: 240 147 66 !important;
  --er: 245 86 74 !important;
  --mul: #e6b8c2 !important;
  --swiper-theme-color: #e6b8c2 !important;
  --btn-radius: 0.75rem !important;
  --grid-gap-x: 16px !important;
  --grid-gap-y: 16px !important;
  --xs-grid-gap-x: 8px !important;
  --xs-grid-gap-y: 8px !important;
  --rounded-box: 8px !important;
}

[data-theme='appbar'] {
  --nc: 255 255 255 !important;
}

[data-theme='footer'] {
  --nc: 255 255 255 !important;
  --b1: 255 255 255 !important;
}

/* --- RESET & GAYA DASAR --- */
*, ::backdrop, :after, :before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #3b82f680;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}

*, :after, :before {
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
}

:after, :before {
  --tw-content: "";
}

:host, html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

body {
  line-height: inherit;
  margin: 0;
  overflow-x: hidden; /* Mencegah layar bergeser ke samping di ponsel kecil */
}

/* --- KELAS UTILITY & MEDIA QUERIES CONTAINER --- */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 600px) {
  .container { max-width: 600px; }
}
@media (min-width: 960px) {
  .container { max-width: 960px; }
}
@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}

/* --- ATURAN KHUSUS RESPONSIF PONSEL KECIL (< 480px) --- */
@media (max-width: 480px) {
  /* Memastikan container memiliki padding samping yang aman */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Mencegah elemen berukuran lebar tetap (fixed width) melampaui lebar layar HP */
  .w-\[300px\], .w-\[310px\], .w-\[388px\], .w-\[460px\], .w-\[700px\], .w-\[180px\], .w-\[178px\] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Menyesuaikan jarak padding/margin besar agar pas di layar kecil */
  .px-12, .px-10, .px-\[20\%\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .mx-8, .mx-4 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
}

/* --- RESET & KELAS UTILITY TAILWIND --- */
.max-h-96 { max-height: 24rem; }
.max-h-\[250px\] { max-height: 250px; }
.max-h-\[30vh\] { max-height: 30vh; }
.max-h-\[320px\] { max-height: 320px; }
.max-h-\[334px\] { max-height: 334px; }
.max-h-\[50\%\] { max-height: 50%; }
.max-h-\[50vh\] { max-height: 50vh; }
.max-h-\[calc\(100\%-48px\)\] { max-height: calc(100% - 48px); }
.max-h-\[calc\(100dvh-2rem\)\] { max-height: calc(100dvh - 2rem); }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

.min-h-10 { min-height: 2.5rem; }
.min-h-11 { min-height: 2.75rem; }
.min-h-14 { min-height: 3.5rem; }
.min-h-24 { min-height: 6rem; }
.min-h-36 { min-height: 9rem; }
.min-h-7 { min-height: 1.75rem; }
.min-h-8 { min-height: 2rem; }
.min-h-9 { min-height: 2.25rem; }
.min-h-\[104px\] { min-height: 104px; }
.min-h-\[50dvh\] { min-height: 50dvh; }
.min-h-dvh { min-height: 100dvh; }
.min-h-screen { min-height: 100vh; }

.w-0 { width: 0; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-1\/4 { width: 25%; }
.w-1\/5 { width: 20%; }
.w-1\/6 { width: 16.666667%; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-2 { width: .5rem; }
.w-2\.5 { width: .625rem; }
.w-2\/3 { width: 66.666667%; }
.w-2\/5 { width: 40%; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-28 { width: 7rem; }
.w-3 { width: .75rem; }
.w-3\/4 { width: 75%; }
.w-3\/5 { width: 60%; }
.w-32 { width: 8rem; }
.w-4 { width: 1rem; }
.w-4\/5 { width: 80%; }
.w-44 { width: 11rem; }
.w-5 { width: 1.25rem; }
.w-56 { width: 14rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-\[178px\] { width: 178px; }
.w-\[180px\] { width: 180px; }
.w-\[1px\] { width: 1px; }
.w-\[20px\] { width: 20px; }
.w-\[300px\] { width: 300px; }
.w-\[30px\] { width: 30px; }
.w-\[310px\] { width: 310px; }
.w-\[33vw\] { width: 33vw; }
.w-\[388px\] { width: 388px; }
.w-\[460px\] { width: 460px; }
.w-\[60px\] { width: 60px; }
.w-\[700px\] { width: 700px; }
.w-\[90\%\] { width: 90%; }
.w-\[calc\(100dvh-2rem\)\] { width: calc(100dvh - 2rem); }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-full { width: 100%; }
.w-max { width: max-content; }
.w-screen { width: 100vw; }

.min-w-36 { min-width: 9rem; }
.min-w-40 { min-width: 10rem; }
.min-w-48 { min-width: 12rem; }
.min-w-\[20px\] { min-width: 20px; }
.min-w-\[256px\] { min-width: 256px; }
.min-w-\[50\%\] { min-width: 50%; }
.min-w-\[64px\] { min-width: 64px; }
.min-w-\[72px\] { min-width: 72px; }
.min-w-full { min-width: 100%; }

.max-w-32 { max-width: 8rem; }
.max-w-40 { max-width: 10rem; }
.max-w-52 { max-width: 13rem; }
.max-w-64 { max-width: 16rem; }
.max-w-\[300px\] { max-width: 300px; }
.max-w-\[320px\] { max-width: 320px; }
.max-w-\[343px\] { max-width: 343px; }
.max-w-\[480px\] { max-width: 480px; }
.max-w-\[50\%\] { max-width: 50%; }
.max-w-\[512px\] { max-width: 512px; }
.max-w-\[60\%\] { max-width: 60%; }
.max-w-\[64px\] { max-width: 64px; }
.max-w-\[768px\] { max-width: 768px; }
.max-w-\[90\%\] { max-width: 90%; }
.max-w-\[90vh\] { max-width: 90vh; }
.max-w-\[calc\(100dvh-2rem\)\] { max-width: calc(100dvh - 2rem); }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }
.max-w-screen-lg { max-width: 1280px; }
.max-w-screen-md { max-width: 960px; }
.max-w-screen-sm { max-width: 600px; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }
.flex-grow, .grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.basis-0 { flex-basis: 0px; }
.origin-top-left { transform-origin: top left; }

/* Transform & Translate classes */
.\!-translate-x-1\/2 { --tw-translate-x: -50%!important; }
.\!-translate-x-1\/2, .\!-translate-y-full { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important; }
.\!-translate-y-full { --tw-translate-y: -100%!important; }
.\!translate-y-\[calc\(-50\%\+24px\)\] { --tw-translate-y: calc(-50% + 24px) !important; }
.\!translate-y-\[calc\(-50\%\+24px\)\], .\!translate-y-full { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important; }
.\!translate-y-full { --tw-translate-y: 100%!important; }
.-translate-x-1\/2 { --tw-translate-x: -50%; }
.-translate-x-1\/2, .-translate-x-\[28px\] { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-x-\[28px\] { --tw-translate-x: -28px; }
.-translate-y-1\/2 { --tw-translate-y: -50%; }
.-translate-y-1\/2, .-translate-y-4 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-y-4 { --tw-translate-y: -1rem; }
.-translate-y-\[28px\] { --tw-translate-y: -28px; }
.-translate-y-\[28px\], .-translate-y-full { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-y-full { --tw-translate-y: -100%; }
.translate-x-1\/2 { --tw-translate-x: 50%; }
.translate-x-1\/2, .translate-x-4 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-4 { --tw-translate-x: 1rem; }
.translate-x-\[28px\] { --tw-translate-x: 28px; }
.translate-x-\[28px\], .translate-x-full { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-full { --tw-translate-x: 100%; }
.translate-y-0 { --tw-translate-y: 0px; }
.translate-y-0, .translate-y-1 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-y-1 { --tw-translate-y: .25rem; }
.translate-y-1\/2 { --tw-translate-y: 50%; }
.translate-y-1\/2, .translate-y-6 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-y-6 { --tw-translate-y: 1.5rem; }
.translate-y-\[28px\] { --tw-translate-y: 28px; }
.rotate-180, .translate-y-\[28px\] { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-180 { --tw-rotate: 180deg; }

.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; }
.scale-0, .scale-110 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
.scale-50 { --tw-scale-x: .5; --tw-scale-y: .5; }
.scale-50, .scale-75 { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.scale-75 { --tw-scale-x: .75; --tw-scale-y: .75; }
.scale-95 { --tw-scale-x: .95; --tw-scale-y: .95; }
.scale-95, .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

/* Border & Border-left */
.border-l { border-left-width: 1px; }

/* --- TAMBAHAN ATURAN RESPONSIF KHUSUS PONSEL KECIL (< 480px) --- */
@media (max-width: 480px) {
  /* Memaksa elemen dengan lebar tetap besar agar menyesuaikan layar HP */
  .w-\[300px\], .w-\[310px\], .w-\[388px\], .w-\[460px\], .w-\[700px\], .w-\[180px\], .w-\[178px\] {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .max-w-\[300px\], .max-w-\[320px\], .max-w-\[343px\], .max-w-\[480px\], .max-w-\[512px\], .max-w-\[768px\] {
    max-width: 100% !important;
  }
}

/* --- UTILITY KELAS CSS (BORDER, BACKGROUND, PADDING, TYPOGRAPHY) --- */
.border-r { border-right-width: 1px; }
.border-t, .border-t-\[1px\] { border-top-width: 1px; }
.border-dashed { border-style: dashed; }
.border-none { border-style: none; }
.border-\[\#E7EAEC\] { --tw-border-opacity: 1; border-color: rgb(231 234 236 / var(--tw-border-opacity, 1)); }
.border-\[\#FFFFFF\] { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); }
.border-\[\#b3c3f3\] { --tw-border-opacity: 1; border-color: rgb(179 195 243 / var(--tw-border-opacity, 1)); }
.border-\[currentColor\] { border-color: currentColor; }
.border-accent { --tw-border-opacity: 1; border-color: rgb(var(--a) / var(--tw-border-opacity, 1)); }
.border-accent\/20 { border-color: rgb(var(--a) / 0.2); }
.border-base-100 { --tw-border-opacity: 1; border-color: rgb(var(--b1) / var(--tw-border-opacity, 1)); }
.border-base-100\/10 { border-color: rgb(var(--b1) / 0.1); }
.border-base-content { --tw-border-opacity: 1; border-color: rgb(var(--bc) / var(--tw-border-opacity, 1)); }
.border-base-content\/10 { border-color: rgb(var(--bc) / 0.1); }
.border-base-content\/60 { border-color: rgb(var(--bc) / 0.6); }
.border-black\/10 { border-color: #0000001a; }
.border-black\/\[0\.08\] { border-color: #00000014; }
.border-error { --tw-border-opacity: 1; border-color: rgb(var(--er) / var(--tw-border-opacity, 1)); }
.border-error\/20 { border-color: rgb(var(--er) / 0.2); }
.border-error\/5 { border-color: rgb(var(--er) / 0.05); }
.border-info { --tw-border-opacity: 1; border-color: rgb(var(--in) / var(--tw-border-opacity, 1)); }
.border-neutral { --tw-border-opacity: 1; border-color: rgb(var(--n) / var(--tw-border-opacity, 1)); }
.border-neutral\/10 { border-color: rgb(var(--n) / 0.1); }
.border-neutral\/20 { border-color: rgb(var(--n) / 0.2); }
.border-neutral\/5 { border-color: rgb(var(--n) / 0.05); }
.border-primary { --tw-border-opacity: 1; border-color: rgb(var(--p) / var(--tw-border-opacity, 1)); }
.border-primary\/10 { border-color: rgb(var(--p) / 0.1); }
.border-primary\/5 { border-color: rgb(var(--p) / 0.05); }
.border-secondary { --tw-border-opacity: 1; border-color: rgb(var(--s) / var(--tw-border-opacity, 1)); }
.border-success { --tw-border-opacity: 1; border-color: rgb(var(--su) / var(--tw-border-opacity, 1)); }
.border-transparent { border-color: transparent; }
.border-warning { --tw-border-opacity: 1; border-color: rgb(var(--wa) / var(--tw-border-opacity, 1)); }
.border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); }
.border-white\/80 { border-color: #fffc; }
.border-b-base-content\/10 { border-bottom-color: rgb(var(--bc) / 0.1); }
.border-b-neutral-200 { --tw-border-opacity: 1; border-bottom-color: rgb(229 229 229 / var(--tw-border-opacity, 1)); }
.border-b-slate-300 { --tw-border-opacity: 1; border-bottom-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); }
.border-r-neutral\/80 { border-right-color: rgb(var(--n) / 0.8); }
.border-t-neutral-200 { --tw-border-opacity: 1; border-top-color: rgb(229 229 229 / var(--tw-border-opacity, 1)); }
.border-t-transparent { border-top-color: transparent; }
.border-opacity-75 { --tw-border-opacity: 0.75; }

/* ==========================================
   1. DEFINISI VARIABEL WARNA (MUDAH DIGANTI)
   ========================================== */
:root {
  /* Warna Hex Custom */
  --color-whatsapp: #0f172a;      /* #06C755 */
  --color-blue-dark: #f8fafc;    /* #3051B3 */
  --color-blue-light: #f8fafc;  /* #4169E0 */
  --color-gray-light: #f8fafc9; /* #d1d5db */
  --color-bg-soft: #f8fafc;    /* #ecf0fc */
  --color-bg-clean: #f8fafc;   /* #f7f8f8 */

  /* Warna Standar & DaisyUI */
  --tw-bg-opacity: 1;
}

/* ==========================================
   2. BACKGROUND KELAS UTAMA
   ========================================== */

/* Custom Hex Backgrounds */
.bg-\[\#06C755\] { background-color: rgb(var(--color-whatsapp) / var(--tw-bg-opacity)); }
.bg-\[\#3051B3\] { background-color: rgb(var(--color-blue-dark) / var(--tw-bg-opacity)); }
.bg-\[\#4169E0\] { background-color: rgb(var(--color-blue-light) / var(--tw-bg-opacity)); }
.bg-\[\#d1d5db\] { background-color: rgb(var(--color-gray-light) / var(--tw-bg-opacity)); }
.bg-\[\#ecf0fc\] { background-color: rgb(var(--color-bg-soft) / var(--tw-bg-opacity)); }
.bg-\[\#f7f8f8\] { background-color: rgb(var(--color-bg-clean) / var(--tw-bg-opacity)); }

/* Theme / DaisyUI Backgrounds */
.bg-accent { background-color: rgb(var(--a) / var(--tw-bg-opacity)); }
.bg-accent\/5 { background-color: rgb(var(--a) / 0.05); }

.bg-base-100 { background-color: rgb(var(--b1) / var(--tw-bg-opacity)); }
.bg-base-100\/20 { background-color: rgb(var(--b1) / 0.2); }
.bg-base-100\/30 { background-color: rgb(var(--b1) / 0.3); }
.bg-base-100\/50 { background-color: rgb(var(--b1) / 0.5); }
.bg-base-100\/70 { background-color: rgb(var(--b1) / 0.7); }
.bg-base-100\/90 { background-color: rgb(var(--b1) / 0.9); }

.bg-base-content { background-color: rgb(var(--bc) / var(--tw-bg-opacity)); }
.bg-base-content\/5 { background-color: rgb(var(--bc) / 0.05); }
.bg-base-content\/40 { background-color: rgb(var(--bc) / 0.4); }
.bg-base-content\/50 { background-color: rgb(var(--bc) / 0.5); }

/* Hitam & Transparansi Hitam */
.bg-black { background-color: rgb(0 0 0 / var(--tw-bg-opacity)); }
.bg-black\/5  { background-color: rgba(0, 0, 0, 0.05); }
.bg-black\/10 { background-color: rgba(0, 0, 0, 0.1); }
.bg-black\/15 { background-color: rgba(0, 0, 0, 0.15); }
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.2); }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
.bg-black\/90 { background-color: rgba(0, 0, 0, 0.9); }

.bg-current { background-color: currentColor; }
.bg-transparent { background-color: initial; }

/* ==========================================
   DEFINISI KODE WARNA (UBAH DI SINI)
   ========================================== */
:root, [data-theme] {
  --color-error: #ef4444;   /* Contoh warna error (#ffffff / kode lainnya) */
  --color-info: #3abff8;    /* Contoh warna info */
  --color-neutral: #8c4a58; /* Contoh warna neutral 2a323d*/
  --color-primary: #570df8; /* Contoh warna primary */
  --color-secondary: #28b13d; /* #00f049 Contoh warna secondary */
  --color-success: #36d399; /* Contoh warna success */
  --color-warning: #fbbd23; /* Contoh warna warning */

  --tw-bg-opacity: 1;
}

/* ==========================================
   STATUS & UI STATES
   ========================================== */
.bg-error { background-color: var(--color-error); }
.bg-error\/5 { background-color: color-mix(in srgb, var(--color-error) 5%, transparent); }
.bg-error\/20 { background-color: color-mix(in srgb, var(--color-error) 20%, transparent); }

.bg-info { background-color: var(--color-info); }

.bg-neutral { background-color: var(--color-neutral); }
.bg-neutral-800 { background-color: rgb(38 38 38 / var(--tw-bg-opacity)); }
.bg-neutral\/5 { background-color: color-mix(in srgb, var(--color-neutral) 5%, transparent); }
.bg-neutral\/10 { background-color: color-mix(in srgb, var(--color-neutral) 10%, transparent); }
.bg-neutral\/15 { background-color: color-mix(in srgb, var(--color-neutral) 15%, transparent); }
.bg-neutral\/30 { background-color: color-mix(in srgb, var(--color-neutral) 30%, transparent); }
.bg-neutral\/50 { background-color: color-mix(in srgb, var(--color-neutral) 50%, transparent); }

.bg-primary { background-color: var(--color-primary); }
.bg-primary\/5 { background-color: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.bg-primary\/20 { background-color: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.bg-primary\/30 { background-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.bg-primary\/90 { background-color: color-mix(in srgb, var(--color-primary) 90%, transparent); }

.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-content { background-color: rgb(var(--sc) / var(--tw-bg-opacity)); }

.bg-stone-400 { background-color: rgb(168 162 158 / var(--tw-bg-opacity)); }
.bg-gray-200 { background-color: rgb(229 231 235 / var(--tw-bg-opacity)); }
.bg-gray-600 { background-color: rgb(75 85 99 / var(--tw-bg-opacity)); }

.bg-success { background-color: var(--color-success); }
.bg-success\/5 { background-color: color-mix(in srgb, var(--color-success) 5%, transparent); }

.bg-warning { background-color: var(--color-warning); }

/* Putih & Transparansi Putih */
.bg-white { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white\/75 { background-color: rgba(255, 255, 255, 0.75); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }

/* ==========================================
   3. PROPERTI PENDUKUNG (OPACITY & GRADIENT)
   ========================================== */
.bg-opacity-5  { --tw-bg-opacity: 0.05; }
.bg-opacity-10 { --tw-bg-opacity: 0.1; }
.bg-opacity-20 { --tw-bg-opacity: 0.2; }

.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-base-100 { 
  --tw-gradient-from: rgb(var(--b1) / 1) var(--tw-gradient-from-position); 
  --tw-gradient-to: rgb(var(--b1) / 0) var(--tw-gradient-to-position); 
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 
}

.bg-cover { background-size: cover; }
.bg-center { background-position: 50%; }
.bg-no-repeat { background-repeat: no-repeat; }

/* Stroke & Object */
.stroke-current { stroke: currentColor; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-bottom { object-position: bottom; }
.object-top { object-position: top; }

/* Padding Utilities */
.p-0 { padding: 0; }
.p-0\.5 { padding: 0.125rem; }
.p-1 { padding: 0.25rem; }
.p-10 { padding: 2.5rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-\[2px\] { padding: 2px; }
.p-\[5\%\] { padding: 5%; }
.p-px { padding: 1px; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-11 { padding-left: 2.75rem; padding-right: 2.75rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-\[20\%\] { padding-left: 20%; padding-right: 20%; }
.px-\[calc\(var\(--xs-grid-gap-x\,8px\)\/2\)\] { padding-left: calc(var(--xs-grid-gap-x, 8px) / 2); padding-right: calc(var(--xs-grid-gap-x, 8px) / 2); }

.py-0 { padding-bottom: 0; padding-top: 0; }
.py-0\.5 { padding-bottom: 0.125rem; padding-top: 0.125rem; }
.py-1 { padding-bottom: 0.25rem; padding-top: 0.25rem; }
.py-10 { padding-bottom: 2.5rem; padding-top: 2.5rem; }
.py-12 { padding-bottom: 3rem; padding-top: 3rem; }
.py-14 { padding-bottom: 3.5rem; padding-top: 3.5rem; }
.py-16 { padding-bottom: 4rem; padding-top: 4rem; }
.py-2 { padding-bottom: 0.5rem; padding-top: 0.5rem; }
.py-20 { padding-bottom: 5rem; padding-top: 5rem; }
.py-3 { padding-bottom: 0.75rem; padding-top: 0.75rem; }
.py-4 { padding-bottom: 1rem; padding-top: 1rem; }
.py-5 { padding-bottom: 1.25rem; padding-top: 1.25rem; }
.py-6 { padding-bottom: 1.5rem; padding-top: 1.5rem; }
.py-8 { padding-bottom: 2rem; padding-top: 2rem; }
.py-\[10\%\] { padding-bottom: 10%; padding-top: 10%; }
.py-\[calc\(var\(--xs-grid-gap-y\,8px\)\/2\)\] { padding-bottom: calc(var(--xs-grid-gap-y, 8px) / 2); padding-top: calc(var(--xs-grid-gap-y, 8px) / 2); }

.pb-0 { padding-bottom: 0; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-14 { padding-bottom: 3.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-32 { padding-bottom: 8rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-52 { padding-bottom: 13rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-\[3px\] { padding-bottom: 3px; }
.pb-\[var\(--xs-sizer-aspect-ratio\)\] { padding-bottom: var(--xs-sizer-aspect-ratio); }

.pl-1 { padding-left: 0.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-64 { padding-left: 16rem; }
.pl-7 { padding-left: 1.75rem; }
.pl-8 { padding-left: 2rem; }
.pl-9 { padding-left: 2.25rem; }

.pr-10 { padding-right: 2.5rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-6 { padding-right: 1.5rem; }

.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-14 { padding-top: 3.5rem; }
.pt-16 { padding-top: 4rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-24 { padding-top: 6rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }

/* Typography & Font Settings */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-sans { font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-\[32px\] { font-size: 32px; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-h1-bold { font-weight: 700; font-size: 2rem; line-height: 2.25rem; }
.text-h1-default { font-size: 2rem; line-height: 2.25rem; font-weight: 400; }
.text-h2-bold { font-weight: 700; font-size: 1.5rem; line-height: 1.75rem; }
.text-h2-medium { font-size: 1.5rem; line-height: 1.75rem; font-weight: 500; }
.text-h2-semibold { font-size: 1.5rem; font-weight: 600; line-height: 1.75rem; }
.text-h3-bold { font-weight: 700; font-size: 1.25rem; line-height: 1.5rem; }
.text-h3-default { font-size: 1.25rem; line-height: 1.5rem; font-weight: 400; }
.text-h3-medium { font-weight: 500; font-size: 1.25rem; line-height: 1.5rem; }
.text-h3-semibold { font-weight: 600; font-size: 1.25rem; line-height: 1.5rem; }
.text-h4-bold { font-weight: 700; font-size: 1rem; line-height: 1.25rem; }
.text-h4-default { font-size: 1rem; line-height: 1.25rem; font-weight: 400; }
.text-h4-medium { font-weight: 500; font-size: 1rem; line-height: 1.25rem; }
.text-h4-semibold { font-weight: 600; font-size: 1rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-p-bold { font-size: 0.875rem; font-weight: 700; line-height: 1rem; }
.text-p-caption { font-size: 0.75rem; font-weight: 400; line-height: 0.875rem; }
.text-p-caption-medium { font-size: 0.75rem; font-weight: 500; line-height: 0.875rem; }
.text-p-default { font-weight: 400; font-size: 0.875rem; line-height: 1rem; }
.text-p-medium { font-size: 0.875rem; line-height: 1rem; font-weight: 500; }
.text-p-semibold { font-size: 0.875rem; font-weight: 600; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-xxs { font-size: 0.625rem; font-weight: 400; line-height: 0.6875rem; }

.font-black { font-weight: 900; }
.font-bold { font-weight: 700; }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.italic { font-style: italic; }
.not-italic { font-style: normal; }

.leading-4 { line-height: 1rem; }
.leading-\[1\.5\] { line-height: 1.5; }
.leading-tight { line-height: 1.25; }

.tracking-\[var\(--button-letter-spacing\)\] { letter-spacing: var(--button-letter-spacing); }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.\!text-transparent { color: transparent !important; }

/* --- TAMBAHAN ATURAN RESPONSIF PONSEL KECIL (< 480px) --- */
@media (max-width: 480px) {
  /* Menyesuaikan padding besar agar tidak merusak tata letak layar HP */
  .px-10, .px-11, .px-12, .px-\[20\%\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .py-10, .py-12, .py-14, .py-16, .py-20, .py-\[10\%\] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  .pl-64 {
    padding-left: 1rem !important;
  }
  
  /* Ukuran font heading besar dikecilkan sedikit secara proporsional di mobile */
  .text-h1-bold, .text-h1-default {
    font-size: 1.5rem !important;
    line-height: 1.85rem !important;
  }
  
  .text-h2-bold, .text-h2-medium, .text-h2-semibold {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
  }
}

/* =================================================================
   1. TEXT COLORS (WARNA TEKS)
   ================================================================ */
.text-\[\#111827\] { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }
.text-\[\#121D3D\] { --tw-text-opacity: 1; color: rgb(18 29 61 / var(--tw-text-opacity, 1)); }
.text-\[\#1BA303\] { --tw-text-opacity: 1; color: rgb(27 163 3 / var(--tw-text-opacity, 1)); }
.text-\[\#333333\] { --tw-text-opacity: 1; color: rgb(51 51 51 / var(--tw-text-opacity, 1)); }
.text-\[\#6b7280\] { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
.text-\[\#A10E4F\] { --tw-text-opacity: 1; color: rgb(161 14 79 / var(--tw-text-opacity, 1)); }
.text-\[\#F5564A\] { --tw-text-opacity: 1; color: rgb(245 86 74 / var(--tw-text-opacity, 1)); }

/* Semantic & DaisyUI Colors */
.text-accent            { --tw-text-opacity: 1; color: rgb(var(--a) / var(--tw-text-opacity, 1)); }
.text-accent-content    { --tw-text-opacity: 1; color: rgb(var(--ac) / var(--tw-text-opacity, 1)); }
.text-base-100          { --tw-text-opacity: 1; color: rgb(var(--b1) / var(--tw-text-opacity, 1)); }
.text-base-content      { --tw-text-opacity: 1; color: rgb(var(--bc) / var(--tw-text-opacity, 1)); }
.text-error             { --tw-text-opacity: 1; color: rgb(var(--er) / var(--tw-text-opacity, 1)); }
.text-error-content     { --tw-text-opacity: 1; color: rgb(var(--erc) / var(--tw-text-opacity, 1)); }
.text-info              { --tw-text-opacity: 1; color: rgb(var(--in) / var(--tw-text-opacity, 1)); }
.text-info-content      { --tw-text-opacity: 1; color: rgb(var(--inc) / var(--tw-text-opacity, 1)); }
.text-neutral           { --tw-text-opacity: 1; color: rgb(var(--n) / var(--tw-text-opacity, 1)); }
.text-neutral-500       { --tw-text-opacity: 1; color: rgb(115 115 115 / var(--tw-text-opacity, 1)); }
.text-neutral-content   { --tw-text-opacity: 1; color: rgb(var(--nc) / var(--tw-text-opacity, 1)); }
.text-primary           { --tw-text-opacity: 1; color: rgb(var(--p) / var(--tw-text-opacity, 1)); }
.text-primary-content   { --tw-text-opacity: 1; color: rgb(var(--pc) / var(--tw-text-opacity, 1)); }
.text-secondary         { --tw-text-opacity: 1; color: rgb(var(--s) / var(--tw-text-opacity, 1)); }
.text-secondary-content { --tw-text-opacity: 1; color: rgb(var(--sc) / var(--tw-text-opacity, 1)); }
.text-success           { --tw-text-opacity: 1; color: rgb(var(--su) / var(--tw-text-opacity, 1)); }
.text-success-content   { --tw-text-opacity: 1; color: rgb(var(--suc) / var(--tw-text-opacity, 1)); }
.text-warning           { --tw-text-opacity: 1; color: rgb(var(--wa) / var(--tw-text-opacity, 1)); }
.text-warning-content   { --tw-text-opacity: 1; color: rgb(var(--wac) / var(--tw-text-opacity, 1)); }

/* Standard Colors */
.text-black     { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); }
.text-gray-400  { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); }
.text-gray-500  { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
.text-white     { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-inherit   { color: inherit; }

/* Opacity Modifiers (Text & General) */
.text-base-content\/30 { color: rgb(var(--bc) / 0.3); }
.text-base-content\/40 { color: rgb(var(--bc) / 0.4); }
.text-base-content\/60 { color: rgb(var(--bc) / 0.6); }
.text-base-content\/80 { color: rgb(var(--bc) / 0.8); }
.text-base-content\/90 { color: rgb(var(--bc) / 0.9); }

.text-black\/40 { color: #0006; }
.text-black\/60 { color: #0009; }
.text-black\/80 { color: #000c; }

.text-error\/60 { color: rgb(var(--er) / 0.6); }
.text-error\/90 { color: rgb(var(--er) / 0.9); }
.text-neutral\/80 { color: rgb(var(--n) / 0.8); }
.text-primary\/40 { color: rgb(var(--p) / 0.4); }

.text-opacity-50 { --tw-text-opacity: 0.5; }
.text-opacity-60 { --tw-text-opacity: 0.6; }
.text-opacity-70 { --tw-text-opacity: 0.7; }

/* =================================================================
   2. TEXT DECORATION & PLACEHOLDER
   ================================================================ */
.underline { text-decoration-line: underline; }
.line-through { text-decoration-line: line-through; }
.placeholder-neutral\/50::placeholder { color: rgb(var(--n) / 0.5); }

/* =================================================================
   3. OPACITY & BLEND MODE
   ================================================================ */
.\!opacity-0 { opacity: 0 !important; }
.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-100 { opacity: 1; }

.bg-blend-normal { background-blend-mode: normal; }

/* =================================================================
   4. BOX SHADOWS
   ================================================================ */
.\!shadow-none {
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.shadow {
  --tw-shadow: #0003 0px 3px 1px -2px, #00000024 0px 2px 2px 0px, #0000001f 0px 1px 5px 0px;
  --tw-shadow-colored: 0px 3px 1px -2px var(--tw-shadow-color), 0px 2px 2px 0px var(--tw-shadow-color), 0px 1px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-card {
  --tw-shadow: 0px 2px 15px -3px #121d3d1a, 0px 4px 6px -4px #121d3d1a;
  --tw-shadow-colored: 0px 2px 15px -3px var(--tw-shadow-color), 0px 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 #0000000d;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: #0003 0px 3px 3px -2px, #00000024 0px 3px 4px 0px, #0000001f 0px 1px 8px 0px;
  --tw-shadow-colored: 0px 3px 3px -2px var(--tw-shadow-color), 0px 3px 4px 0px var(--tw-shadow-color), 0px 1px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: #0003 0px 3px 5px -1px, #00000024 0px 5px 8px 0px, #0000001f 0px 1px 14px 0px;
  --tw-shadow-colored: 0px 3px 5px -1px var(--tw-shadow-color), 0px 5px 8px 0px var(--tw-shadow-color), 0px 1px 14px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: #0003 0px 3px 5px -1px, #00000024 0px 6px 10px 0px, #0000001f 0px 1px 18px 0px;
  --tw-shadow-colored: 0px 3px 5px -1px var(--tw-shadow-color), 0px 6px 10px 0px var(--tw-shadow-color), 0px 1px 18px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* =================================================================
   5. OUTLINE, FILTERS & BACKDROP FILTERS
   ================================================================ */
.outline { outline-style: solid; }

.filter,
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; }

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-md {
  --tw-blur: blur(12px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-sm {
  --tw-blur: blur(4px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.contrast-50 {
  --tw-contrast: contrast(0.5);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-brightness-110 {
  --tw-backdrop-brightness: brightness(1.1);
}

/* =================================================================
   1. BACKDROP FILTERS & BRIGHTNESS
   ================================================================ */
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-brightness-50 {
  --tw-backdrop-brightness: brightness(0.5);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-brightness-110 {
  --tw-backdrop-brightness: brightness(1.1);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-brightness-125 {
  --tw-backdrop-brightness: brightness(1.25);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-contrast-\[0\.9\] {
  --tw-backdrop-contrast: contrast(0.9);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* =================================================================
   2. TRANSITIONS, DURATIONS & EASINGS
   ================================================================ */
.transition {
  transition-duration: 0.15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-all {
  transition-duration: 0.15s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors {
  transition-duration: 0.15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-opacity {
  transition-duration: 0.15s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
  transition-duration: 0.15s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-\[background-color\,border-color\,color\,filter\,backdrop-filter\] {
  transition-duration: 0.15s;
  transition-property: background-color, border-color, color, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-\[transform\,opacity\] {
  transition-duration: 0.15s;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Durations */
.duration-100 { transition-duration: 0.1s; }
.duration-150 { transition-duration: 0.15s; }
.duration-200 { transition-duration: 0.2s; }
.duration-300 { transition-duration: 0.3s; }
.duration-500 { transition-duration: 0.5s; }
.duration-\[250ms\] { transition-duration: 0.25s; }
.duration-\[7000ms\] { transition-duration: 7s; }

/* Easings */
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* =================================================================
   3. UTILITIES & MISCELLANEOUS
   ================================================================ */
.will-change-transform { will-change: transform; }
.forced-color-adjust-none { forced-color-adjust: none; }
.[overflow-wrap\:anywhere] { overflow-wrap: anywhere; }

/* Mask Properties */
.[-webkit-mask-position\:center] { -webkit-mask-position: center; }
.[-webkit-mask-repeat\:no-repeat] { -webkit-mask-repeat: no-repeat; }
.[-webkit-mask-size\:contain] { -webkit-mask-size: contain; }
.[mask-position\:center] { -webkit-mask-position: center; mask-position: center; }
.[mask-repeat\:no-repeat] { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.[mask-size\:contain] { -webkit-mask-size: contain; mask-size: contain; }

/* Placeholder */
.placeholder\:text-\[\#c4c7cc\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(196 199 204 / var(--tw-text-opacity, 1));
}

/* =================================================================
   4. PSEUDO-ELEMENTS (BEFORE & AFTER)
   ================================================================ */
/* Before */
.before\:absolute::before { content: var(--tw-content); position: absolute; }
.before\:inset-0::before { content: var(--tw-content); inset: 0; }
.before\:bg-primary::before { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(var(--p) / var(--tw-bg-opacity, 1)); }
.before\:opacity-25::before { content: var(--tw-content); opacity: 0.25; }

/* After */
.after\:pointer-events-none::after { content: var(--tw-content); pointer-events: none; }
.after\:absolute::after { content: var(--tw-content); position: absolute; }
.after\:inset-0::after { content: var(--tw-content); inset: 0; }
.after\:bottom-0::after { content: var(--tw-content); bottom: 0; }
.after\:left-0::after { content: var(--tw-content); left: 0; }
.after\:-mb-\[2px\]::after { content: var(--tw-content); margin-bottom: -2px; }
.after\:w-full::after { content: var(--tw-content); width: 100%; }
.after\:scale-x-0::after {
  content: var(--tw-content);
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:border-b-2::after { content: var(--tw-content); border-bottom-width: 2px; }
.after\:border-\[var\(--underline-color\)\]::after { content: var(--tw-content); border-color: var(--underline-color); }
.after\:transition-colors::after {
  content: var(--tw-content);
  transition-duration: 0.15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.after\:transition-transform::after {
  content: var(--tw-content);
  transition-duration: 0.15s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.after\:duration-100::after { content: var(--tw-content); transition-duration: 0.1s; }
.after\:duration-200::after { content: var(--tw-content); transition-duration: 0.2s; }
.after\:ease-in-out::after { content: var(--tw-content); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.after\:content-\[\"\"\]::after { --tw-content: ""; content: var(--tw-content); }

/* =================================================================
   5. STRUCTURAL PSEUDO-CLASSES (FIRST-CHILD & LAST-CHILD)
   ================================================================ */
.first\:pl-0:first-child { padding-left: 0; }
.first\:text-base-content:first-child { --tw-text-opacity: 1; color: rgb(var(--bc) / var(--tw-text-opacity, 1)); }

.last\:mb-0:last-child { margin-bottom: 0; }
.last\:mb-4:last-child { margin-bottom: 1rem; }
.last\:mr-0:last-child { margin-right: 0; }
.last\:mr-2:last-child { margin-right: 0.5rem; }
.last\:border-b-0:last-child { border-bottom-width: 0; }
.last\:border-none:last-child { border-style: none; }
.last\:pb-0:last-child { padding-bottom: 0; }
.last\:pr-0:last-child { padding-right: 0; }

/* =================================================================
   6. HOVER STATES
   ================================================================ */
.hover\:flex-\[1\.2\]:hover { flex: 1.2; }
.hover\:cursor-pointer:hover { cursor: pointer; }

/* Scale Hover */
.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.03\]:hover {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[120\%\]:hover {
  --tw-scale-x: 120%;
  --tw-scale-y: 120%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Background Hover */
.hover\:bg-\[var\(--menu-bg-color\)\]:hover { background-color: var(--menu-bg-color); }
.hover\:bg-accent:hover { --tw-bg-opacity: 1; background-color: rgb(var(--a) / var(--tw-bg-opacity, 1)); }
.hover\:bg-accent\/20:hover { background-color: rgb(var(--a) / 0.2); }
.hover\:bg-black\/5:hover { background-color: #0000000d; }
.hover\:bg-error\/20:hover { background-color: rgb(var(--er) / 0.2); }
.hover\:bg-neutral:hover { --tw-bg-opacity: 1; background-color: rgb(var(--n) / var(--tw-bg-opacity, 1)); }
.hover\:bg-neutral\/20:hover { background-color: rgb(var(--n) / 0.2); }
.hover\:bg-primary:hover { --tw-bg-opacity: 1; background-color: rgb(var(--p) / var(--tw-bg-opacity, 1)); }
.hover\:bg-primary\/20:hover { background-color: rgb(var(--p) / 0.2); }
.hover\:bg-secondary:hover { --tw-bg-opacity: 1; background-color: rgb(var(--s) / var(--tw-bg-opacity, 1)); }
.hover\:bg-secondary\/20:hover { background-color: rgb(var(--s) / 0.2); }
.hover\:bg-transparent:hover { background-color: initial; }
.hover\:bg-warning:hover { --tw-bg-opacity: 1; background-color: rgb(var(--wa) / var(--tw-bg-opacity, 1)); }
.hover\:bg-warning\/20:hover { background-color: rgb(var(--wa) / 0.2); }

/* Text Hover */
.hover\:text-\[var\(--menu-text-color\)\]:hover { color: var(--menu-text-color); }
.hover\:text-accent-content:hover { --tw-text-opacity: 1; color: rgb(var(--ac) / var(--tw-text-opacity, 1)); }
.hover\:text-neutral-content:hover { --tw-text-opacity: 1; color: rgb(var(--nc) / var(--tw-text-opacity, 1)); }
.hover\:text-primary:hover { --tw-text-opacity: 1; color: rgb(var(--p) / var(--tw-text-opacity, 1)); }
.hover\:text-primary-content:hover { --tw-text-opacity: 1; color: rgb(var(--pc) / var(--tw-text-opacity, 1)); }
.hover\:text-secondary:hover { --tw-text-opacity: 1; color: rgb(var(--s) / var(--tw-text-opacity, 1)); }
.hover\:text-secondary-content:hover { --tw-text-opacity: 1; color: rgb(var(--sc) / var(--tw-text-opacity, 1)); }
.hover\:text-warning-content:hover { --tw-text-opacity: 1; color: rgb(var(--wac) / var(--tw-text-opacity, 1)); }

/* Shadow & Filter Hover */
.hover\:shadow:hover {
  --tw-shadow: #0003 0px 3px 1px -2px, #00000024 0px 2px 2px 0px, #0000001f 0px 1px 5px 0px;
  --tw-shadow-colored: 0px 3px 1px -2px var(--tw-shadow-color), 0px 2px 2px 0px var(--tw-shadow-color), 0px 1px 5px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
  --tw-shadow: #0003 0px 3px 3px -2px, #00000024 0px 3px 4px 0px, #0000001f 0px 1px 8px 0px;
  --tw-shadow-colored: 0px 3px 3px -2px var(--tw-shadow-color), 0px 3px 4px 0px var(--tw-shadow-color), 0px 1px 8px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-90:hover {
  --tw-brightness: brightness(0.9);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:backdrop-brightness-125:hover {
  --tw-backdrop-brightness: brightness(1.25);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Hover Pseudo Elements */
.hover\:after\:scale-x-100:hover::after {
  content: var(--tw-content);
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:after\:bg-black\/10:hover::after {
  background-color: #0000001a;
  content: var(--tw-content);
}

/* =================================================================
   7. FOCUS & ACTIVE STATES
   ================================================================ */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:outline:focus-visible { outline-style: solid; }
.focus-visible\:outline-2:focus-visible { outline-width: 2px; }
.focus-visible\:outline-offset-2:focus-visible { outline-offset: 2px; }
.focus-visible\:outline-\[\#06C755\]:focus-visible { outline-color: #06c755; }

.active\:after\:bg-black\/30:active::after { background-color: #0000004d; content: var(--tw-content); }

/* =================================================================
   8. GROUP HOVER UTILITIES
   ================================================================ */
.group:hover .group-hover\:visible { visibility: visible; }
.group:hover .group-hover\:block { display: block; }
.group:hover .group-hover\:flex { display: flex; }
.group:hover .group-hover\:mb-2 { margin-bottom: 0.5rem; }
.group:hover .group-hover\:mt-4 { margin-top: 1rem; }
.group:hover .group-hover\:h-12 { height: 3rem; }
.group:hover .group-hover\:h-7 { height: 1.75rem; }
.group:hover .group-hover\:h-auto { height: auto; }
.group:hover .group-hover\:opacity-0 { opacity: 0; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:text-neutral-content { --tw-text-opacity: 1; color: rgb(var(--nc) / var(--tw-text-opacity, 1)); }

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-90 {
  --tw-scale-x: 0.9;
  --tw-scale-y: 0.9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* =================================================================
   9. MEDIA QUERIES (RESPONSIVE & ACCESSIBILITY)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:animate-none { animation: none; }
}

@media (min-width: 600px) {
  .sm\:bottom-\[10\%\] { bottom: 10%; }
  .sm\:left-\[10\%\] { left: 10%; }
  .sm\:right-\[10\%\] { right: 10%; }
}

/* =================================================================
   1. GLOBAL, HELPER & UTILITY CLASSES (MOBILE & DEFAULT)
   ================================================================ */
.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.text-preline {
  white-space: pre-line;
}
.text-preline:not(.text-preline--nofix):first-line {
  line-height: 0px;
}

.pa-page, .py-page {
  padding-bottom: 64px;
  padding-top: 16px;
}

@media (max-width: 1072px) {
  .pa-page, .px-page {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.lines-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lines-2, .lines-3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.lines-2 { -webkit-line-clamp: 2; }
.lines-3 { -webkit-line-clamp: 3; }

.soldout .p-img { background: #0006; }
.soldout img { opacity: 0.4; }
.soldout img.absolute { display: none; }

.tutorial__arrow {
  animation: arrow-bounce 1s ease infinite;
  position: absolute;
  z-index: 6;
}

.tutorial__overlay {
  box-shadow: 0 0 1px 1px #21212199, 0 0 0 4000px #21212180;
  position: absolute;
  z-index: 5;
}

.hor-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

dl.dl--horizontal {
  display: flex;
  flex-flow: row wrap;
}
dl.dl--horizontal dd, 
dl.dl--horizontal dt {
  flex: 1 1 50%;
  margin-bottom: 16px;
}
dl.dl--horizontal dd { text-align: right; }

.p-input .p-input__control {
  cursor: pointer;
  height: 100%;
  outline: none;
  width: 100%;
}
.p-input:not(.p-input--nolabel) .p-input__control { padding-top: 12px; }
.p-input:not(.p-input--nolabel) textarea.p-input__control { padding-top: 22px; }

.page-section { margin-bottom: 24px; }
.page-section:not(.page-section--my-0):not(.mt-0) { margin-top: 24px; }
.page-section--flush, .page-section--my-0 + .page-section { margin-top: 0; }

@media (max-width: 1032px) {
  .page-section__content .grid-spacing-sm {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (min-width: 1073px) and (max-width: 1284px) {
  .page-section--nav-px .page-section__content:not(.max-w-screen-lg) {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.page-section__header {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
}

/* =================================================================
   2. QUILL EDITOR STYLING
   ================================================================ */
.quill-editor-v2 h1 { font-size: 32px; line-height: 36px; }
.quill-editor-v2 h2 { font-size: 24px; line-height: 28px; }
.quill-editor-v2 h3 { font-size: 20px; line-height: 24px; }
.quill-editor-v2 h4 { font-size: 16px; line-height: 20px; }
.quill-editor-v2 h1, .quill-editor-v2 h2, .quill-editor-v2 h3, .quill-editor-v2 h4 {
  line-height: 130%;
  margin: 0;
}
.quill-editor-v2 p { line-height: 200%; margin-bottom: 0; }
.quill-editor-v2 { line-height: 150%; }
.quill-editor-v2 img { display: inline; max-width: 100%; }
.quill-editor-v2 div.ql-video { height: 25vh; width: 100%; }
.text-preline p > br { display: none; }
.p-quill:after { clear: both; content: ""; display: block; }

.quill-editor-v2 ol, .quill-editor-v2 ul {
  list-style: inherit;
  list-style-position: outside;
  padding: inherit;
  padding-left: 1em;
}
.quill-editor-v2 ol { list-style: decimal; list-style-position: outside; }
.quill-editor-v2 ol li[data-list=bullet] { list-style-type: none; }
.quill-editor-v2 ol li[data-list=bullet]:before {
  content: "-";
  display: inline-block;
  list-style-type: none;
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
  white-space: nowrap;
  width: 1.2em;
}
.quill-editor-v2 p:empty:before { content: ""; }
.quill-editor-v2 .ql-indent-1 { padding-left: 3em; }
.quill-editor-v2 li.ql-indent-1 { padding-left: 4.5em; }
.quill-editor-v2 .ql-indent-2 { padding-left: 6em; }
.quill-editor-v2 li.ql-indent-2 { padding-left: 7.5em; }
.quill-editor-v2 .ql-indent-3 { padding-left: 9em; }
.quill-editor-v2 li.ql-indent-3 { padding-left: 10.5em; }
.quill-editor-v2 .ql-indent-4 { padding-left: 12em; }
.quill-editor-v2 li.ql-indent-4 { padding-left: 13.5em; }
.quill-editor-v2 .ql-indent-5 { padding-left: 15em; }
.quill-editor-v2 li.ql-indent-5 { padding-left: 16.5em; }
.quill-editor-v2 .ql-indent-6 { padding-left: 18em; }
.quill-editor-v2 li.ql-indent-6 { padding-left: 19.5em; }
.quill-editor-v2 .ql-indent-7 { padding-left: 21em; }
.quill-editor-v2 li.ql-indent-7 { padding-left: 22.5em; }
.quill-editor-v2 .ql-indent-8 { padding-left: 24em; }
.quill-editor-v2 li.ql-indent-8 { padding-left: 25.5em; }
.quill-editor-v2 .ql-indent-9 { padding-left: 27em; }
.quill-editor-v2 li.ql-indent-9 { padding-left: 28.5em; }
.quill-editor-v2 p > span[style*=font-size] { display: inline-block; line-height: 150%; }

/* =================================================================
   3. ANIMATIONS & KEYFRAMES
   ================================================================ */
.shake-shack {
  animation-duration: 2s;
  animation-iteration-count: 30;
  animation-name: burger;
  animation-timing-function: ease-in-out;
}
.rubberBand { animation: rubberBand 2s ease infinite; }
.flash { animation: flash 2s infinite; }
.shakeX { animation: shakeX 2s infinite; }
.shakeY { animation: shakeY 2s infinite; }
.swing { animation: swing 2s infinite; }
.tada { animation: tada 2s infinite; }
.wobble { animation: wobble 2s infinite; }
.jello { animation: jello 2s infinite; }
.heartBeat { animation: heartBeat 1.5s ease infinite; }
.pulse { animation: pulse 1.5s infinite; }

.animate-slide-up {
  animation: slide-up 0.25s ease;
  animation-fill-mode: backwards;
}
.animate-to-top { transform: translateY(40px); }
.animate-to-bottom { transform: translateY(-40px); }
.animate-to-left { transform: translate(40px); }
.animate-to-right { transform: translate(-40px); }
.animate-fade-in--active,
.animate-to-bottom--active,
.animate-to-left--active,
.animate-to-right--active,
.animate-to-top--active {
  transition: all 0.5s ease-out;
}
.animate-fade-in, .animate-to-bottom, .animate-to-left, .animate-to-right, .animate-to-top {
  opacity: 0;
}
.animate-zoom-in { transform: scale(1.2); }
.animate-zoom-in--active { transition: all 1.1s ease-out; }
.animate-fade-in--active,
.animate-to-bottom--active,
.animate-to-left--active,
.animate-to-right--active,
.animate-to-top--active,
.animate-zoom-in--active {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--animation-order) * 0.1s + 0.2s);
}

.running-text {
  animation: scrolling-text 30s linear infinite;
}

@keyframes arrow-bounce {
  0%, 50%, to { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}
@keyframes burger {
  0% { transform: translate(0); }
  6.5% { transform: translate(-7px) rotateY(-10deg); }
  18.5% { transform: translate(6px) rotateY(8deg); }
  31.5% { transform: translate(-4px) rotateY(-6deg); }
  43.5% { transform: translate(3px) rotateY(4deg); }
  50% { transform: translate(0); }
}
@keyframes rubberBand {
  0% { transform: scaleX(1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scaleX(1); }
}
@keyframes flash {
  0%, to { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes shakeX {
  0%, to { transform: translate(0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px); }
  20%, 40%, 60%, 80% { transform: translate(10px); }
}
@keyframes shakeY {
  0%, to { transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
  20%, 40%, 60%, 80% { transform: translateY(10px); }
}
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  to { transform: rotate(0); }
}
@keyframes tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  to { transform: scale(1) rotate(0); }
}
@keyframes wobble {
  0% { transform: translate(0); }
  15% { transform: translate(-25%) rotate(-5deg); }
  30% { transform: translate(20%) rotate(3deg); }
  45% { transform: translate(-15%) rotate(-3deg); }
  60% { transform: translate(10%) rotate(2deg); }
  75% { transform: translate(-5%) rotate(-1deg); }
  to { transform: translate(0); }
}
@keyframes jello {
  0%, to { transform: translate(0); }
  25% { transform: translate(-25%) skew(-15deg); }
  50% { transform: translate(20%) skew(10deg); }
  75% { transform: translate(-10%) skew(-5deg); }
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
@keyframes pulse {
  0%, to { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scrolling-text {
  0% { transform: translate(100%); }
  to { transform: translate(-100%); }
}

/* =================================================================
   4. SWIPER CAROUSEL STYLING
   ================================================================ */
:root { --swiper-theme-color: #007aff; --swiper-navigation-size: 44px; }
:host { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 1; }

.swiper {
  display: block;
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper { flex-direction: column; }
.swiper-wrapper {
  box-sizing: content-box;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  width: 100%;
  z-index: 1;
}
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translateZ(0); }
.swiper-horizontal { touch-action: pan-y; }
.swiper-vertical { touch-action: pan-x; }
.swiper-slide { display: block; flex-shrink: 0; height: 100%; position: relative; transition-property: transform; width: 100%; }
.swiper-slide-invisible-blank { visibility: hidden; }
.swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; }
.swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; }
.swiper-backface-hidden .swiper-slide { backface-visibility: hidden; transform: translateZ(0); }
.swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; }
.swiper-3d .swiper-wrapper { transform-style: preserve-3d; }
.swiper-3d { perspective: 1200px; }
.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide { transform-style: preserve-3d; }
.swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; }
.swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; }
.swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; }
.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-slides-offset-before);
  scroll-margin-inline-start: var(--swiper-slides-offset-before);
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:last-child { margin-inline-end: var(--swiper-slides-offset-after); }
.swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; }
.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-slides-offset-before);
  scroll-margin-block-start: var(--swiper-slides-offset-before);
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:last-child { margin-block-end: var(--swiper-slides-offset-after); }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; }
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; }
.swiper-css-mode.swiper-centered > .swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999; }
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); }
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100%; }

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10;
}
.swiper-3d .swiper-slide-shadow { background: #00000026; }
.swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(270deg, rgba(0,0,0,.5), transparent); }
.swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(90deg, rgba(0,0,0,.5), transparent); }
.swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(0deg, rgba(0,0,0,.5), transparent); }
.swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent); }

.swiper-lazy-preloader {
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top: 4px solid transparent;
  box-sizing: border-box;
  height: 42px; left: 50%;
  margin-left: -21px; margin-top: -21px;
  position: absolute; top: 50%;
  transform-origin: 50%; width: 42px; z-index: 10;
}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s linear infinite;
}
.swiper-lazy-preloader-white { --swiper-preloader-color: #fff; }
.swiper-lazy-preloader-black { --swiper-preloader-color: #000; }
@keyframes swiper-preloader-spin { 0% { transform: rotate(0); } to { transform: rotate(1turn); } }

.swiper-button-next, .swiper-button-prev {
  align-items: center; color: var(--swiper-navigation-color, var(--swiper-theme-color));
  cursor: pointer; display: flex; height: var(--swiper-navigation-size);
  justify-content: center; position: absolute; width: var(--swiper-navigation-size); z-index: 10;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { cursor: auto; opacity: .35; pointer-events: none; }
.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { cursor: auto; opacity: 0; pointer-events: none; }
.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important; }
.swiper-button-next ::slotted(svg), .swiper-button-next svg, .swiper-button-prev ::slotted(svg), .swiper-button-prev svg {
  fill: currentColor; height: 100%; object-fit: contain; pointer-events: none; transform-origin: center; width: 100%;
}
.swiper-button-lock { display: none; }
.swiper-button-next, .swiper-button-prev {
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  top: var(--swiper-navigation-top-offset, 50%);
}
.swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; }
.swiper-button-prev .swiper-navigation-icon, .swiper-button-prev ::slotted(.swiper-navigation-icon) { transform: rotate(180deg); }
.swiper-button-next { left: auto; right: var(--swiper-navigation-sides-offset, 4px); }
.swiper-horizontal .swiper-button-next, .swiper-horizontal .swiper-button-prev {
  margin-left: 0; margin-top: calc(0px - var(--swiper-navigation-size) / 2); top: var(--swiper-navigation-top-offset, 50%);
}
.swiper-horizontal .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; }
.swiper-horizontal .swiper-button-next { left: auto; right: var(--swiper-navigation-sides-offset, 4px); }
.swiper-horizontal .swiper-button-prev .swiper-navigation-icon { transform: rotate(180deg); }
.swiper-horizontal.swiper-rtl .swiper-button-prev .swiper-navigation-icon { transform: rotate(0); }

.swiper-pagination { position: absolute; text-align: center; transform: translateZ(0); transition: opacity .3s; z-index: 10; }
.swiper-pagination.swiper-pagination-hidden { opacity: 0; }
.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; }
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px); left: 0; top: var(--swiper-pagination-top, auto); width: 100%;
}
.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  display: inline-block;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
}
button.swiper-pagination-bullet { appearance: none; border: none; box-shadow: none; margin: 0; padding: 0; }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }
.swiper-pagination-bullet:only-child { display: none !important; }
.swiper-pagination-bullet-active { background: var(--swiper-pagination-color, var(--swiper-theme-color)); opacity: var(--swiper-pagination-bullet-opacity, 1); }

/* =================================================================
   5. SPECIAL ATTRIBUTES & ELEMENT SELECTORS
   ================================================================ */
[&::-webkit-details-marker]:hidden::-webkit-details-marker { display: none; }
[&::-webkit-inner-spin-button]:m-0::-webkit-inner-spin-button { margin: 0; }
[&::-webkit-inner-spin-button]:appearance-none::-webkit-inner-spin-button { appearance: none; }
[&::-webkit-outer-spin-button]:m-0::-webkit-outer-spin-button { margin: 0; }
[&::-webkit-outer-spin-button]:appearance-none::-webkit-outer-spin-button { appearance: none; }
[&>svg]:h-12 > svg { height: 3rem; }
[&>svg]:w-12 > svg { width: 3rem; }
[&[type='number']]:[-moz-appearance:textfield][type=number] { -moz-appearance: textfield; }
[&_.quill-editor-v2_p]:mb-4 .quill-editor-v2 p { margin-bottom: 1rem; }
[&_a]:underline a { text-decoration-line: underline; }
[&_input]:bg-transparent input { background-color: initial; }
[&_input]:text-p-default input { font-size: 0.875rem; font-weight: 400; line-height: 1rem; }
[&_select]:bg-transparent select { background-color: initial; }
[&_svg]:h-6 svg { height: 1.5rem; }
[&_svg]:w-6 svg { width: 1.5rem; }
[&_textarea]:bg-transparent textarea { background-color: initial; }

/* =================================================================
   6. RESPONSIVE BREAKPOINTS (sm, md, lg) & DARK MODE
   ================================================================ */

/* Small Screens / Mobile Up (min-width: 600px) */
@media (min-width: 600px) {
  .sm\:top-\[10\%\] { top: 10%; }
  .sm\:mx-auto { margin-left: auto; margin-right: auto; }
  .sm\:my-4 { margin-bottom: 1rem; margin-top: 1rem; }
  .sm\:mb-10 { margin-bottom: 2.5rem; }
  .sm\:mb-14 { margin-bottom: 3.5rem; }
  .sm\:mb-4 { margin-bottom: 1rem; }
  .sm\:ml-3 { margin-left: 0.75rem; }
  .sm\:mt-0 { margin-top: 0; }
  .sm\:mt-1 { margin-top: 0.25rem; }
  .sm\:line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
  .sm\:grid { display: grid; }
  .sm\:list-item { display: list-item; }
  .sm\:hidden { display: none; }
  .sm\:aspect-\[var\(--aspect-ratio\)\] { aspect-ratio: var(--aspect-ratio); }
  .sm\:aspect-auto { aspect-ratio: auto; }
  .sm\:h-\[136px\] { height: 136px; }
  .sm\:h-\[190px\] { height: 190px; }
  .sm\:h-\[240px\] { height: 240px; }
  .sm\:h-\[454px\] { height: 454px; }
  .sm\:h-\[600px\] { height: 600px; }
  .sm\:h-\[694px\] { height: 694px; }
  .sm\:h-full { height: 100%; }
  .sm\:max-h-\[30vh\] { max-height: 30vh; }
  .sm\:max-h-\[448px\] { max-height: 448px; }
  .sm\:max-h-full { max-height: 100%; }
  .sm\:w-1\/2 { width: 50%; }
  .sm\:w-1\/3 { width: 33.333333%; }
  .sm\:w-1\/4 { width: 25%; }
  .sm\:w-1\/5 { width: 20%; }
  .sm\:w-1\/6 { width: 16.666667%; }
  .sm\:w-2\/3 { width: 66.666667%; }
  .sm\:w-2\/5 { width: 40%; }
  .sm\:w-3\/4 { width: 75%; }
  .sm\:w-3\/5 { width: 60%; }
  .sm\:w-36 { width: 9rem; }
  .sm\:w-4\/5 { width: 80%; }
  .sm\:w-48 { width: 12rem; }
  .sm\:w-\[262px\] { width: 262px; }
  .sm\:w-fit { width: fit-content; }
  .sm\:w-full { width: 100%; }
  .sm\:min-w-64 { min-width: 16rem; }
  .sm\:max-w-\[512px\] { max-width: 512px; }
  .sm\:max-w-\[600px\] { max-width: 600px; }
  .sm\:cursor-auto { cursor: auto; }
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-normal { justify-content: normal; }
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:justify-center { justify-content: center; }
  .sm\:gap-0 { gap: 0; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-x-\[var\(--grid-gap-x\)\] { column-gap: var(--grid-gap-x); }
  .sm\:gap-y-\[var\(--grid-gap-y\)\] { row-gap: var(--grid-gap-y); }
  .sm\:whitespace-nowrap { white-space: nowrap; }
  .sm\:border-b-0 { border-bottom-width: 0; }
  .sm\:p-0 { padding: 0; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:p-14 { padding: 3.5rem; }
  .sm\:p-8 { padding: 2rem; }
  .sm\:px-0 { padding-left: 0; padding-right: 0; }
  .sm\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .sm\:px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
  .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:px-\[calc\(var\(--grid-gap-x\,16px\)\/2\)\] { padding-left: calc(var(--grid-gap-x, 16px) / 2); padding-right: calc(var(--grid-gap-x, 16px) / 2); }
  .sm\:py-3 { padding-bottom: 0.75rem; padding-top: 0.75rem; }
  .sm\:py-4 { padding-bottom: 1rem; padding-top: 1rem; }
  .sm\:py-5 { padding-bottom: 1.25rem; padding-top: 1.25rem; }
  .sm\:py-\[calc\(var\(--grid-gap-y\,16px\)\/2\)\] { padding-bottom: calc(var(--grid-gap-y, 16px) / 2); padding-top: calc(var(--grid-gap-y, 16px) / 2); }
  .sm\:pb-16 { padding-bottom: 4rem; }
  .sm\:pb-\[var\(--sizer-aspect-ratio\)\] { padding-bottom: var(--sizer-aspect-ratio); }
  .sm\:pl-\[112px\] { padding-left: 112px; }
  .sm\:pt-0 { padding-top: 0; }
  .sm\:pt-12 { padding-top: 3rem; }
  .sm\:text-left { text-align: left; }
  .sm\:text-right { text-align: right; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-\[64px\] { font-size: 64px; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-h1-medium { font-weight: 500; font-size: 2rem; line-height: 2.25rem; }
  .sm\:text-h1-semibold { font-weight: 600; font-size: 2rem; line-height: 2.25rem; }
  .sm\:text-h3-default { font-size: 1.25rem; font-weight: 400; line-height: 1.5rem; }
  .sm\:text-h4-default { font-weight: 400; font-size: 1rem; line-height: 1.25rem; }
  .sm\:text-h4-semibold { font-weight: 600; font-size: 1rem; line-height: 1.25rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-p-default { font-weight: 400; font-size: 0.875rem; line-height: 1rem; }
  .sm\:text-p-medium { font-size: 0.875rem; line-height: 1rem; font-weight: 500; }
  .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:font-normal { font-weight: 400; }
  .sm\:text-base-content { --tw-text-opacity: 1; color: rgb(var(--bc) / var(--tw-text-opacity, 1)); }
  .sm\:opacity-0 { opacity: 0; }
}

/* Medium Screens / Tablets (min-width: 960px) */
@media (min-width: 960px) {
  .md\:bottom-16 { bottom: 4rem; }
  .md\:bottom-4 { bottom: 1rem; }
  .md\:left-2 { left: 0.5rem; }
  .md\:left-4 { left: 1rem; }
  .md\:right-2 { right: 0.5rem; }
  .md\:right-4 { right: 1rem; }
  .md\:top-auto { top: auto; }
  .md\:-order-1 { order: -1; }
  .md\:order-2 { order: 2; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
  .md\:mx-8 { margin-left: 2rem; margin-right: 2rem; }
  .md\:mx-auto { margin-left: auto; margin-right: auto; }
  .md\:mb-0 { margin-bottom: 0; }
  .md\:mr-2 { margin-right: 0.5rem; }
  .md\:mr-6 { margin-right: 1.5rem; }
  .md\:mt-4 { margin-top: 1rem; }
  .md\:mt-6 { margin-top: 1.5rem; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:aspect-\[var\(--row-aspect-ratio\)\] { aspect-ratio: var(--row-aspect-ratio); }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:w-1\/4 { width: 25%; }
  .md\:w-1\/5 { width: 20%; }
  .md\:w-1\/6 { width: 16.666667%; }
  .md\:w-2\/3 { width: 66.666667%; }
  .md\:w-2\/5 { width: 40%; }
  .md\:w-3\/4 { width: 75%; }
  .md\:w-3\/5 { width: 60%; }
  .md\:w-4\/5 { width: 80%; }
  .md\:w-\[256px\] { width: 256px; }
  .md\:w-\[72px\] { width: 72px; }
  .md\:w-auto { width: auto; }
  .md\:w-fit { width: fit-content; }
  .md\:w-full { width: 100%; }
  .md\:max-w-\[640px\] { max-width: 640px; }
  .md\:max-w-screen-lg { max-width: 1280px; }
  .md\:max-w-screen-md { max-width: 960px; }
  .md\:flex-1 { flex: 1 1 0%; }
  .md\:shrink-0 { flex-shrink: 0; }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-nowrap { flex-wrap: nowrap; }
  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:gap-0 { gap: 0; }
  .md\:gap-4 { gap: 1rem; }
  .md\:self-start { align-self: flex-start; }
  .md\:rounded-lg { border-radius: 0.5rem; }
  .md\:border { border-width: 1px; }
  .md\:p-0 { padding: 0; }
  .md\:p-3 { padding: 0.75rem; }
  .md\:p-4 { padding: 1rem; }
  .md\:px-0 { padding-left: 0; padding-right: 0; }
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .md\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
  .md\:px-28 { padding-left: 7rem; padding-right: 7rem; }
  .md\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .md\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:py-2 { padding-bottom: 0.5rem; padding-top: 0.5rem; }
  .md\:py-4 { padding-bottom: 1rem; padding-top: 1rem; }
  .md\:py-6 { padding-bottom: 1.5rem; padding-top: 1.5rem; }
  .md\:py-8 { padding-bottom: 2rem; padding-top: 2rem; }
  .md\:pb-4 { padding-bottom: 1rem; }
  .md\:pb-8 { padding-bottom: 2rem; }
  .md\:pt-14 { padding-top: 3.5rem; }
  .md\:pt-4 { padding-top: 1rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-\[64px\] { font-size: 64px; }
  .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .md\:text-h1-bold { font-size: 2rem; font-weight: 700; line-height: 2.25rem; }
  .md\:text-h3-default { font-weight: 400; font-size: 1.25rem; line-height: 1.5rem; }
  .md\:text-h3-medium { font-size: 1.25rem; line-height: 1.5rem; font-weight: 500; }
  .md\:text-h4-bold { font-weight: 700; font-size: 1rem; line-height: 1.25rem; }
  .md\:text-h4-default { font-size: 1rem; line-height: 1.25rem; font-weight: 400; }
  .md\:text-h4-semibold { font-size: 1rem; font-weight: 600; line-height: 1.25rem; }
  .md\:text-p-default { font-weight: 400; font-size: 0.875rem; line-height: 1rem; }
  .md\:text-p-semibold { font-size: 0.875rem; line-height: 1rem; font-weight: 600; }
  .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .md\:leading-\[70px\] { line-height: 70px; }
  .md\:shadow-lg {
    --tw-shadow: #0003 0px 3px 5px -1px, #00000024 0px 5px 8px 0px, #0000001f 0px 1px 14px 0px;
    --tw-shadow-colored: 0px 3px 5px -1px var(--tw-shadow-color), 0px 5px 8px 0px var(--tw-shadow-color), 0px 1px 14px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

/* Large Screens / Desktops (min-width: 1280px) */
@media (min-width: 1280px) {
  .lg\:mb-6 { margin-bottom: 1.5rem; }
  .lg\:mb-8 { margin-bottom: 2rem; }
  .lg\:mt-6 { margin-top: 1.5rem; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-1\/4 { width: 25%; }
  .lg\:w-1\/5 { width: 20%; }
  .lg\:w-1\/6 { width: 16.666667%; }
  .lg\:w-2\/3 { width: 66.666667%; }
  .lg\:w-2\/5 { width: 40%; }
  .lg\:w-3\/4 { width: 75%; }
  .lg\:w-3\/5 { width: 60%; }
  .lg\:w-4\/5 { width: 80%; }
  .lg\:w-full { width: 100%; }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:p-0 { padding: 0; }
  .lg\:px-0 { padding-left: 0; padding-right: 0; }
  .lg\:pt-6 { padding-top: 1.5rem; }
}

@media (min-width: 1264px) {
  .mx-anti-arrows {
    margin-left: -52px;
    margin-right: -52px;
    max-width: 100vw;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .dark\:bg-pink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
  }
}

/* =================================================================
   1. SWIPER PAGINATION, PROGRESSBAR & ZOOM COMPONENTS
   ================================================================ */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, left .2s;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, right .2s;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  transform-origin: left top;
  width: 100%;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
  width: 100%;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical > .swiper-pagination-progressbar {
  height: 100%;
  left: 0;
  top: 0;
  width: var(--swiper-pagination-progressbar-size, 4px);
}

.swiper-pagination-lock {
  display: none;
}

.swiper-zoom-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.swiper-zoom-container > canvas,
.swiper-zoom-container > img,
.swiper-zoom-container > svg {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper-free-mode > .swiper-wrapper {
  margin: 0 auto;
  transition-timing-function: ease-out;
}

.p-swiper .swiper-slide.swiper-slide--space {
  margin-right: var(--grid-gap-x, 16) !important;
}

@media (max-width: 600px) {
  .p-swiper .swiper-slide.swiper-slide--space {
    margin-right: var(--xs-grid-gap-x, 16) !important;
  }
}


/* =================================================================
   2. APP STATE, THEMES & GLOBAL SETTINGS
   ================================================================ */
.p-app--editing .btn:not(.editor--clickable),
.p-app--editing .editor--clickable *,
.p-app--editing .p-dropdown__activator:not(.editor--clickable),
.p-app--editing a:not(.editor--clickable) {
  pointer-events: none;
}

.editor--clickable {
  pointer-events: auto;
}

:root, [data-theme] {
  /* Ubah kode warna latar belakang (--b1) dan teks (--bc) di sini */
  --b1: #f8fafc; /* Kode warna background utama */
  --bc: #0f172a; /* Kode warna teks utama */

  /* Properti Opasitas */
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;

  /* Terapkan ke elemen */
  background-color: var(--b1);
  color: var(--bc);
}

body {
  letter-spacing: var(--body-letter-spacing);
}

.grecaptcha-badge {
  visibility: hidden;
}

.white {
  background: #fff !important;
}


/* =================================================================
   3. LAYOUT, CONTAINERS & UI ELEMENTS (E-COMMERCE COMPONENTS)
   ================================================================ */
.bottom-container {
  bottom: 0;
  left: 50%;
  max-width: 480px;
  position: fixed !important;
  transform: translate(-50%);
  width: 100%;
  z-index: 5;
}

.img-cover {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.touch-indicator {
  background: #00000052;
  border-radius: 2px !important;
  height: 4px;
  left: 50%;
  position: absolute;
  top: 4px;
  transform: translate(-50%);
  width: 80px;
}

.touch-indicator--dark {
  background: #ffffff52;
}

.profile-picture {
  border-radius: 50%;
  font-size: 40px;
  font-weight: 300;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  width: 48px;
}

@media (max-width: 1263px) {
  .profile-picture {
    height: 64px;
    line-height: 64px;
    width: 64px;
  }
}

.flat-card {
  align-items: center;
  border: 1px solid rgb(var(--n) / .1);
  border-radius: 4px;
}

.flat-card:not(.p-0) {
  padding: 8px 16px;
}

.flat-card.bg-error {
  background: #ffe5e5 !important;
  background-color: #ffe5e5 !important;
}

dt {
  color: #0006;
  font-size: 12px;
  line-height: 16px;
}

dd {
  font-weight: 500;
  margin-bottom: 16px;
}

.fade-top {
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent, transparent);
}


/* =================================================================
   4. INTERACTIVE BUTTONS & SWIPE EFFECTS
   ================================================================ */
.p-btn.swipe > * {
  z-index: 1;
}

.p-btn.swipe.secondary-btn.filled-btn,
.p-btn.swipe.secondary-btn.outline-btn {
  overflow: hidden;
  position: relative;
  transition: color .15s ease-in-out;
}

.p-btn.swipe.secondary-btn.filled-btn:not(.disabled) {
  background-color: transparent;
}

@media (pointer: fine) {
  .p-btn.swipe.secondary-btn.filled-btn:hover {
    border-color: rgb(var(--s)) !important;
    color: rgb(var(--s)) !important;
  }
  
  .p-btn.swipe.secondary-btn.outline-btn:hover {
    background-color: transparent;
    border-color: rgb(var(--s));
  }
  
  .p-btn.swipe.secondary-btn.filled-btn:hover:before {
    left: 100%;
  }
  
  .p-btn.swipe.secondary-btn.outline-btn:hover:before {
    left: 0;
  }
}

.p-btn.swipe.secondary-btn.filled-btn:not(.disabled):before,
.p-btn.swipe.secondary-btn.outline-btn:not(.disabled):before {
  background-color: rgb(var(--s));
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: left .25s ease-in-out;
  width: 100%;
}

.p-btn.swipe.secondary-btn.filled-btn:before {
  left: 0;
}

.p-btn.swipe.secondary-btn.outline-btn:before {
  left: -100%;
}