/* 
 * LENTERA: JEJAK BUDAYA DI ERA DIGITAL
 * Visual System & Editorial Aesthetics - Gallery Monochrome Light Theme
 * Conforms to Antislop-UI: Pure Clean Whites, Neutral Slates, Crisp Radii, Flat Elevation, No AI-Slop Orange/Amber
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --color-bg-base: #ffffff;
  --color-surface: #ffffff;
  --color-surface-hover: #f8f9fa;
  --color-border-subtle: #e5e7eb;
  --color-border-focus: #71717a;
  --color-text-primary: #18181b;
  --color-text-secondary: #3f3f46;
  --color-text-muted: #71717a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
  overflow-x: hidden;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* Aksesibilitas Keyboard (R-32: Tegas, Obsidian Focus) */
:focus-visible {
  outline: 2px solid #18181b !important;
  outline-offset: 3px !important;
}

#global-search-input,
#global-search-input:focus,
#global-search-input:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Custom Scrollbar - Neutral Slate Monochrome */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f4f4f5;
}
::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 2px;
  border: 1px solid #e4e4e7;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

/* Header Navbar - Latar Putih Bersih & Solid */
#main-navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Tipografi Kuratorial */
.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Kartu Editorial: Solid, Datar (Tanpa Drop Shadow Mengambang), Sudut Tegas (R-11, R-12) */
.card-editorial {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.card-editorial:hover {
  border-color: var(--color-border-focus);
  background-color: var(--color-surface-hover);
}

/* Bingkai Rancakan Dudukan Gamelan (Kayu Jati Beraksen Perunggu) */
.rancakan-frame {
  background: #1c1917;
  border: 1px solid #292524;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

/* Bilah Gamelan Perunggu */
.gamelan-bilah {
  position: relative;
  background: linear-gradient(180deg, #a8a29e 0%, #78716c 60%, #44403c 100%);
  border: 1px solid #d6d3d1;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.08s ease;
  user-select: none;
}

.gamelan-bilah:hover {
  filter: brightness(1.15);
}

.gamelan-bilah:active,
.gamelan-bilah.active-strike {
  transform: translateY(2px) !important;
  filter: brightness(1.25);
  background: linear-gradient(180deg, #e7e5e4 0%, #a8a29e 60%, #57534e 100%) !important;
}

/* Pasak Bilah */
.bilah-pin {
  width: 7px;
  height: 7px;
  background: #e4e4e7;
  border-radius: 50%;
  border: 1px solid #27272a;
}

/* Kanvas Mori Batik */
#batik-canvas {
  touch-action: none;
  cursor: crosshair;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

/* Wadah Gambar Fotografi */
.cultural-img-wrap {
  position: relative;
  overflow: hidden;
  background-color: #f4f4f5;
}

.cultural-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cultural-card:hover .cultural-img-wrap img {
  transform: scale(1.03);
}