/* ============================================================
   UTILITY CSS — pengganti Tailwind CDN
   Hanya berisi class yang benar-benar dipakai di halaman ini
   ============================================================ */

/* ===== Reset (minimal Preflight pengganti Tailwind) ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: transparent; border: 0; font: inherit; color: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: none; }
table { border-collapse: collapse; }
address { font-style: normal; }

/* ===== Display ===== */
.block        { display: block; }
.inline-flex  { display: inline-flex; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ===== Flex ===== */
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1 1 0%; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.place-items-center { place-items: center; }
.shrink-0     { flex-shrink: 0; }
.self-end     { align-self: flex-end; }
.self-start   { align-self: flex-start; }
.ml-auto      { margin-left: auto; }

/* ===== Grid ===== */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===== Gap ===== */
.gap-px  { gap: 1px; }
.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-2\.5{ gap: 0.625rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-7   { gap: 1.75rem; }
.gap-8   { gap: 2rem; }
.gap-10  { gap: 2.5rem; }
.gap-12  { gap: 3rem; }
.gap-16  { gap: 4rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-7 { row-gap: 1.75rem; }

/* ===== Max Width ===== */
.max-w-xs         { max-width: 20rem; }
.max-w-md         { max-width: 28rem; }
.max-w-xl         { max-width: 36rem; }
.max-w-2xl        { max-width: 42rem; }
.max-w-3xl        { max-width: 48rem; }
.max-w-5xl        { max-width: 64rem; }
.max-w-\[1320px\] { max-width: 1320px; }
.max-w-\[480px\]  { max-width: 480px; }
.mx-auto          { margin-left: auto; margin-right: auto; }

/* ===== Width & Height ===== */
.w-full  { width: 100%; }
.w-px    { width: 1px; }
.w-2     { width: 0.5rem; }
.w-7     { width: 1.75rem; }
.w-9     { width: 2.25rem; }
.w-10    { width: 2.5rem; }
.w-12    { width: 3rem; }
.w-16    { width: 4rem; }
.w-max   { width: max-content; }
.h-full  { height: 100%; }
.h-px    { height: 1px; }
.h-2     { height: 0.5rem; }
.h-7     { height: 1.75rem; }
.h-9     { height: 2.25rem; }
.h-10    { height: 2.5rem; }
.h-12    { height: 3rem; }
.h-16    { height: 4rem; }
.h-\[72px\]    { height: 72px; }

/* ===== Aspect Ratio ===== */
.aspect-\[4\/5\] { aspect-ratio: 4/5; }
.aspect-\[4\/3\] { aspect-ratio: 4/3; }
.aspect-\[3\/4\] { aspect-ratio: 3/4; }

/* ===== Position ===== */
.relative    { position: relative; }
.absolute    { position: absolute; }
.fixed       { position: fixed; }
.inset-0     { inset: 0; }
.inset-x-0   { left: 0; right: 0; }
.top-0       { top: 0; }
.top-4       { top: 1rem; }
.-top-4      { top: -1rem; }
.right-1\.5  { right: 0.375rem; }
.right-4     { right: 1rem; }
.-right-4    { right: -1rem; }
.left-4      { left: 1rem; }
.bottom-1\.5 { bottom: 0.375rem; }

/* ===== Z-index ===== */
.z-50 { z-index: 50; }
.z-60 { z-index: 60; }
.z-70 { z-index: 70; }

/* ===== Overflow ===== */
.overflow-hidden   { overflow: hidden; }

/* ===== Padding ===== */
.p-6    { padding: 1.5rem; }
.p-7    { padding: 1.75rem; }
.p-8    { padding: 2rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem;    padding-right: 1rem; }
.px-6   { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-3   { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-6   { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.py-10  { padding-top: 2.5rem;   padding-bottom: 2.5rem; }
.py-24  { padding-top: 6rem;     padding-bottom: 6rem; }
.pt-1   { padding-top: 0.25rem; }
.pt-8   { padding-top: 2rem; }
.pt-\[112px\] { padding-top: 112px; }
.pb-0\.5{ padding-bottom: 0.125rem; }
.pb-1   { padding-bottom: 0.25rem; }
.pb-16  { padding-bottom: 4rem; }
.pb-24  { padding-bottom: 6rem; }
.pl-6   { padding-left: 1.5rem; }

/* ===== Margin ===== */
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-7  { margin-top: 1.75rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }

/* ===== Space ===== */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* ===== Text Size ===== */
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16px\] { font-size: 16px; }
.text-\[17px\] { font-size: 17px; }
.text-\[40px\] { font-size: 40px; }
.text-\[44px\] { font-size: 44px; }
.text-\[52px\] { font-size: 52px; }
.text-\[56px\] { font-size: 56px; }
.text-\[68px\] { font-size: 68px; }
.text-\[72px\] { font-size: 72px; }
.text-\[74px\] { font-size: 74px; }

/* ===== Font Weight ===== */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-display  { font-family: 'Playfair Display', Georgia, serif; }
.italic        { font-style: italic; }

/* ===== Line Height ===== */
.leading-none      { line-height: 1; }
.leading-tight     { line-height: 1.25; }
.leading-\[0\.98\] { line-height: 0.98; }
.leading-\[1\.02\] { line-height: 1.02; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.55\] { line-height: 1.55; }
.leading-\[1\.6\]  { line-height: 1.6; }
.leading-\[1\.65\] { line-height: 1.65; }

/* ===== Letter Spacing ===== */
.tracking-\[-0\.02em\]  { letter-spacing: -0.02em; }
.tracking-\[-0\.025em\] { letter-spacing: -0.025em; }
.tracking-\[0\.06em\]   { letter-spacing: 0.06em; }
.tracking-\[0\.12em\]   { letter-spacing: 0.12em; }
.tracking-\[0\.16em\]   { letter-spacing: 0.16em; }
.tracking-\[0\.18em\]   { letter-spacing: 0.18em; }
.tracking-\[0\.22em\]   { letter-spacing: 0.22em; }
.tracking-\[0\.24em\]   { letter-spacing: 0.24em; }
.tracking-\[0\.28em\]   { letter-spacing: 0.28em; }

/* ===== Text Transform & Align ===== */
.uppercase  { text-transform: uppercase; }
.text-center{ text-align: center; }
.text-right { text-align: right; }
.break-all  { word-break: break-all; }
.not-italic { font-style: normal; }

/* ===== Text Colors ===== */
.text-white         { color: #fff; }
.text-white\/50     { color: rgba(255,255,255,0.5); }
.text-white\/60     { color: rgba(255,255,255,0.6); }
.text-white\/65     { color: rgba(255,255,255,0.65); }
.text-white\/70     { color: rgba(255,255,255,0.7); }
.text-white\/75     { color: rgba(255,255,255,0.75); }
.text-white\/80     { color: rgba(255,255,255,0.8); }
.text-white\/85     { color: rgba(255,255,255,0.85); }
.text-slate-400     { color: #94a3b8; }
.text-slate-500     { color: #64748b; }
.text-slate-600     { color: #475569; }
.text-\[var\(--ink\)\]     { color: var(--ink); }
.text-\[var\(--ink-dim\)\] { color: var(--ink-dim); }
.text-white\/40     { color: rgba(255,255,255,0.4); }

/* ===== Backgrounds ===== */
.bg-white              { background-color: #fff; }
.bg-white\/90          { background-color: rgba(255,255,255,0.9); }
.bg-emerald-500        { background-color: #10b981; }
.bg-\[var\(--bg\)\]      { background-color: var(--bg); }
.bg-\[var\(--bg-soft\)\] { background-color: var(--bg-soft); }
.bg-\[var\(--dark\)\]    { background-color: var(--dark); }
.bg-\[var\(--ink\)\]     { background-color: var(--ink); }
.bg-\[var\(--line\)\]    { background-color: var(--line); }

/* ===== Borders ===== */
.border   { border-width: 1px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-y { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; }
.border-transparent   { border-color: transparent; }
.border-white         { border-color: #fff; }
.border-white\/10     { border-color: rgba(255,255,255,0.1); }
.border-white\/15     { border-color: rgba(255,255,255,0.15); }
.border-white\/30     { border-color: rgba(255,255,255,0.3); }
.border-white\/40     { border-color: rgba(255,255,255,0.4); }
.border-\[var\(--line\)\] { border-color: var(--line); }

/* ===== Border Radius ===== */
.rounded-full     { border-radius: 9999px; }
.rounded-2xl      { border-radius: 1rem; }
.rounded-\[2rem\] { border-radius: 2rem; }
.rounded-\[1\.5rem\]  { border-radius: 1.5rem; }
.rounded-\[1\.25rem\] { border-radius: 1.25rem; }
.rounded-\[1rem\]     { border-radius: 1rem; }

/* ===== Shadow & Effects ===== */
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.transition    { transition-property: color,background-color,border-color,opacity,box-shadow,transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.opacity-70    { opacity: 0.7; }
.pointer-events-none { pointer-events: none; }

/* ===== Image ===== */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ===== Hover ===== */
.hover\:opacity-60:hover    { opacity: 0.6; }
.hover\:bg-slate-100:hover  { background-color: #f1f5f9; }
.hover\:border-white:hover  { border-color: #fff; }
.hover\:text-white\/70:hover{ color: rgba(255,255,255,0.7); }
.hover\:opacity-70:hover    { opacity: 0.7; }

/* ===== Responsive sm: 640px ===== */
@media (min-width: 640px) {
  .sm\:block        { display: block; }
  .sm\:inline-flex  { display: inline-flex; }
  .sm\:col-span-1   { grid-column: span 1; }
  .sm\:col-span-2   { grid-column: span 2; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sm\:text-\[58px\]{ font-size: 58px; }
}

/* ===== Responsive md: 768px ===== */
@media (min-width: 768px) {
  .md\:flex           { display: flex; }
  .md\:flex-row       { flex-direction: row; }
  .md\:hidden         { display: none; }
  .md\:inline-flex    { display: inline-flex; }
  .md\:items-center   { align-items: center; }
  .md\:justify-between{ justify-content: space-between; }
  .md\:grid-cols-2    { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3    { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* ===== Responsive lg: 1024px ===== */
@media (min-width: 1024px) {
  .lg\:flex           { display: flex; }
  .lg\:block          { display: block; }
  .lg\:hidden         { display: none; }
  .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-12   { grid-template-columns: repeat(12,minmax(0,1fr)); }
  .lg\:col-span-4     { grid-column: span 4; }
  .lg\:col-span-5     { grid-column: span 5; }
  .lg\:col-span-6     { grid-column: span 6; }
  .lg\:col-span-7     { grid-column: span 7; }
  .lg\:col-span-8     { grid-column: span 8; }
  .lg\:col-start-8    { grid-column-start: 8; }
  .lg\:px-10          { padding-left: 2.5rem; padding-right: 2.5rem; }
  .lg\:p-10           { padding: 2.5rem; }
  .lg\:p-7            { padding: 1.75rem; }
  .lg\:py-32          { padding-top: 8rem;  padding-bottom: 8rem; }
  .lg\:py-36          { padding-top: 9rem;  padding-bottom: 9rem; }
  .lg\:pt-\[140px\]   { padding-top: 140px; }
  .lg\:pb-24          { padding-bottom: 6rem; }
  .lg\:pb-20          { padding-bottom: 5rem; }
  .lg\:pl-6           { padding-left: 1.5rem; }
  .lg\:border-l       { border-left-width: 1px; border-left-style: solid; }
  .lg\:border-white\/10 { border-color: rgba(255,255,255,0.1); }
  .lg\:mb-16          { margin-bottom: 4rem; }
  .lg\:mb-20          { margin-bottom: 5rem; }
  .lg\:mb-14          { margin-bottom: 3.5rem; }
  .lg\:ml-auto        { margin-left: auto; }
  .lg\:gap-5          { gap: 1.25rem; }
  .lg\:gap-10         { gap: 2.5rem; }
  .lg\:gap-16         { gap: 4rem; }
  .lg\:text-2xl       { font-size: 1.5rem; line-height: 2rem; }
  .lg\:text-3xl       { font-size: 1.875rem; line-height: 2.25rem; }
  .lg\:text-\[40px\]  { font-size: 40px; }
  .lg\:text-\[56px\]  { font-size: 56px; }
  .lg\:text-\[64px\]  { font-size: 64px; }
  .lg\:text-\[68px\]  { font-size: 68px; }
  .lg\:text-\[72px\]  { font-size: 72px; }
  .lg\:text-\[74px\]  { font-size: 74px; }
  .lg\:text-\[96px\]  { font-size: 96px; }
}