/* ============================================================
   UUPEDIA CSS Framework v3.0.0 — Final Clean
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }

:root {
  --color-primary-900: #1e3a8a; --color-primary-800: #1e40af; --color-primary-600: #1d4ed8;
  --color-primary-200: #bfdbfe; --color-primary-100: #dbeafe; --color-primary-50: #eff6ff;
  --color-neutral-900: #111827; --color-neutral-800: #1f2937; --color-neutral-700: #374151;
  --color-neutral-600: #4b5563; --color-neutral-500: #6b7280; --color-neutral-400: #d1d5db;
  --color-neutral-300: #e5e7eb; --color-neutral-200: #f3f4f6; --color-neutral-100: #f9fafb; --color-neutral-50: #f8fafc;
  --color-success: #16a34a; --color-error: #dc2626;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --text-xs: 0.8rem; --text-sm: 0.95rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.35rem; --text-2xl: 1.6rem; --text-3xl: 2rem;
  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
  --header-gradient: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}
body { font-family: var(--font-sans); background: var(--color-neutral-50); color: var(--color-neutral-900); font-size: var(--text-base); }
a { color: var(--color-primary-600); text-decoration: underline; }
a:hover { color: var(--color-primary-800); }

/* Layout */
.uu-grid { max-width: 72rem; margin-left: auto; margin-right: auto; padding: var(--space-4); }
.uu-row-search { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-8); }
.uu-row-spacer { height: var(--space-8); clear: both; }

/* Footer — disatukan tanpa duplikasi */
.uu-footer-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: stretch;
}
.uu-footer-left {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.uu-footer-right {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
}
.uu-footer-right form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Cards & Buttons */
.card { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-6); margin-bottom: var(--space-4); }
.card .card-header { font-weight: 700; font-size: var(--text-lg); color: var(--color-primary-900); margin-bottom: var(--space-4); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: all .2s ease; border: none; text-decoration: none; color: white; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--color-primary-600); }
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost { background: transparent; border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); }
.btn-ghost:hover { background: var(--color-neutral-100); }
.input { width: 100%; padding: var(--space-3); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-lg); font-size: var(--text-base); transition: border-color .2s; background: white; }
.input:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px rgba(29,78,216,.2); }

/* Header */
.uu-header { background: var(--header-gradient); padding: 1.5rem 1rem; box-shadow: 0 4px 20px rgba(0,0,0,.15); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.uu-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.uu-logo-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.uu-logo-icon { font-size: 2.2rem; }
.uu-logo-text { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.uu-logo-sub { color: rgba(255,255,255,1); font-size: clamp(0.95rem, 2.5vw, 1.15rem); margin-top: 0.25rem; font-weight: 500; letter-spacing: 0.3px; }

/* Disclaimer */
.uu-disclaimer { border-left: 4px solid var(--color-primary-600); }
.uu-disclaimer-marquee { overflow: hidden; white-space: nowrap; }
.uu-disclaimer-marquee span { display: inline-block; animation: uu-marquee 60s linear infinite; font-size: 0.95rem; color: var(--color-neutral-800); will-change: transform; }
@keyframes uu-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.uu-disclaimer-full { white-space: normal; animation: uu-fadeIn 0.5s ease; }
.disclaimer-full-text { font-size: 1rem; color: var(--color-neutral-800); line-height: 1.6; }
@keyframes uu-fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.disclaimer-pause-btn { background: var(--color-primary-50); border: 1px solid var(--color-primary-200); border-radius: var(--radius-md); font-size: 0.9rem; cursor: pointer; padding: 0.2rem 0.5rem; color: var(--color-primary-600); transition: all 0.2s ease; }
.disclaimer-pause-btn:hover { background: var(--color-primary-100); border-color: var(--color-primary-600); }

/* Search */
.uu-search-wrap { max-width: 600px; margin-left: auto; margin-right: auto; }
.uu-search-bar { display: flex; align-items: center; }
.uu-search-input-wrap { flex: 1; position: relative; }
.uu-search-input { width: 100%; padding: .85rem 3.5rem .85rem 1.5rem; border: 2px solid var(--color-primary-200); border-radius: var(--radius-full); font-size: 1rem; transition: all .3s ease; box-shadow: 0 2px 8px rgba(0,0,0,.05); background: #fff; }
.uu-search-input:focus { outline: none; border-color: var(--color-primary-600); box-shadow: 0 4px 16px rgba(29,78,216,.2); }
.uu-search-btn { position: absolute; right: .35rem; top: .35rem; bottom: .35rem; padding: 0 1.2rem; border-radius: var(--radius-full); border: none; background: var(--color-primary-600); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all .2s ease; }
.uu-search-btn:hover { background: #1d4ed8; }
.uu-lang-btn { padding: .75rem 1rem; border-radius: 2rem; border: 2px solid var(--color-primary-200); background: #fff; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .2s ease; white-space: nowrap; min-width: 70px; display: flex; align-items: center; justify-content: center; margin-left: 0.5rem; }
.uu-lang-btn:hover { background: #f8fafc; border-color: #93c5fd; }

/* Billboard */
.uu-billboard { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; min-height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
.uu-billboard img, .uu-billboard video { width: 100%; height: auto; display: block; }
.uu-billboard-placeholder { text-align: center; padding: 1rem; animation: uu-fadeIn 0.5s ease; }

/* Category Grid */
.uu-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .uu-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.uu-cat-btn { padding: 1rem; border-radius: var(--radius-xl); border: 2px solid transparent; background: #fff; font-weight: 700; font-size: 1rem; color: var(--color-primary-900); cursor: pointer; transition: all .25s ease; box-shadow: var(--shadow-sm); text-align: center; }
.uu-cat-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary-200); }
.uu-cat-title { margin-top: 1rem; margin-bottom: 1rem; }

/* Results Table */
.uu-hasil-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.uu-hasil-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-neutral-200); font-weight: 700; color: var(--color-primary-900); }
.uu-hasil-body { padding: 1.5rem; }
.uu-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-neutral-200); }
.uu-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.uu-table thead { background: var(--color-primary-900); color: #fff; }
.uu-table th { padding: .75rem 1rem; text-align: left; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; z-index: 10; }
.uu-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--color-neutral-100); vertical-align: top; word-wrap: break-word; white-space: normal; }
.uu-table tbody tr { cursor: pointer; transition: background .15s ease; }
.uu-table tbody tr:hover { background: var(--color-neutral-100); }

/* Modal */
.uu-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 100; }
.uu-modal-content { background: #fff; border-radius: var(--radius-xl); width: 95vw; max-width: 56rem; height: 95vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px rgba(0,0,0,.3); }
.uu-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--color-neutral-200); }
.uu-modal-close { border: none; background: transparent; font-size: 1.5rem; cursor: pointer; padding: .25rem .5rem; border-radius: var(--radius-md); }
.uu-modal-close:hover { background: var(--color-neutral-100); }
.uu-modal-frame { flex: 1; border: 0; width: 100%; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* Badges */
.uu-badge { display: inline-block; padding: .25rem .75rem; border-radius: 2rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.uu-badge-berlaku { background: #dcfce7; color: #166534; }
.uu-badge-revisi { background: #fef9c3; color: #854d0e; }
.uu-badge-tidak_berlaku { background: #fee2e2; color: #991b1b; }
.uu-badge-terpengaruh_mk { background: #f3e8ff; color: #6b21a8; }
.uu-badge-diganti_baru { background: #f3f4f6; color: #1f2937; }

/* Donasi */
.uu-donasi-trigger { background: #ec4899; color: #fff; border: none; padding: .5rem 1rem; border-radius: .5rem; font-weight: 600; font-size: .85rem; cursor: pointer; }
.uu-donasi-trigger:hover { background: #db2777; }
.donasi-currency-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; border: none; color: white; text-decoration: none; transition: all 0.2s ease; }
.donasi-currency-btn.idr { background: #ef4444; }
.donasi-currency-btn.idr:hover { background: #dc2626; }
.donasi-currency-btn.usd { background: #3b82f6; }
.donasi-currency-btn.usd:hover { background: #2563eb; }

/* Misc */
.preview-summary { font-size: 0.95rem; color: var(--color-neutral-700); line-height: 1.6; background: var(--color-neutral-50); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4); }
.uu-footer-bottom { text-align: center; clear: both; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-neutral-200); }
.hidden { display: none; }
.text-center { text-align: center; }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-lg { font-size: var(--text-lg); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-primary { color: var(--color-primary-900); }
.text-gray-500 { color: var(--color-neutral-500); }
.text-gray-600 { color: var(--color-neutral-600); }
.bg-primary-50 { background: var(--color-primary-50); }
.bg-white { background: white; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-3 { padding: var(--space-3); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.rounded-lg { border-radius: var(--radius-lg); }
.border { border: 1px solid var(--color-neutral-200); }
.border-t { border-top: 1px solid var(--color-neutral-200); }
.space-y-1 > * + * { margin-top: var(--space-2); }
.w-full { width: 100%; }