:root {
  --bg: #EBE3D9; 
  --bg-card: #F4EFEB;
  --text-main: #231512;
  --text-title: #522B17;
  --text-muted: #6B4430;
  --accent: #907D6F;
  --line: rgba(144, 125, 111, 0.3);
  
  --env-rgb: 53, 28, 13; 
  --glass-elem-bg: rgba(var(--env-rgb), 0.65); 
  --glass-elem-text: #F4EFEB; 
  --glass-elem-border: rgba(255, 255, 255, 0.15); 
  --glass-elem-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  --nav-text-muted: rgba(244, 239, 235, 0.45);
  
  --apple-ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #3D2211; 
  --bg-card: #4A2B15;
  --text-main: #FFFFFF;
  --text-title: #FFFFFF;
  --text-muted: #D1BFA5;
  --accent: #D4A373;
  --line: rgba(255, 255, 255, 0.12);

  --env-rgb: 179, 161, 145; 
  --glass-elem-bg: rgba(var(--env-rgb), 0.65); 
  --glass-elem-text: #3D2211; 
  --glass-elem-border: rgba(255, 255, 255, 0.35); 
  --glass-elem-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  --nav-text-muted: rgba(61, 34, 17, 0.45);
  
  color-scheme: dark;
}

*, *::before, *::after { 
  box-sizing: border-box; 
  -webkit-tap-highlight-color: transparent !important; 
}

html, body { 
  transition: background-color 0.3s ease, color 0.3s ease; 
}

html { 
  scroll-behavior: smooth; 
}

body { 
  margin: 0; 
  background: var(--bg); 
  color: var(--text-main); 
  font-family: 'Karla', sans-serif; 
  font-weight: 400; 
  overflow-x: hidden; 
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
}

button, a, input, select, textarea { outline: none; }

h1, h2, h3, .serif { 
  font-family: 'Cormorant Garamond', serif; 
  font-weight: 500; 
  margin: 0; 
  color: var(--text-title); 
  transition: color 0.3s ease;
}

p { 
  line-height: 1.7; 
  color: var(--text-muted); 
  transition: color 0.3s ease;
}

a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.divider { 
  width: 1px; height: 100px; 
  background: var(--line); 
  margin: 0 auto; position: relative; z-index: 2; 
  transition: background 0.3s ease;
}
.kicker { 
  font-size: 14px; color: var(--accent); 
  letter-spacing: 0.18em; margin-bottom: 18px; 
  text-transform: uppercase; transition: color 0.3s ease; 
  font-weight: 700;
}
.section-title { 
  font-size: clamp(38px, 8vw, 50px); 
  margin-bottom: 24px; color: var(--text-main); 
  transition: color 0.3s ease;
}
.glass-box { 
  border-radius: 30px; padding: 65px 30px; 
  position: relative; overflow: hidden; 
}

.ultra-glass {
  background-color: var(--glass-elem-bg); 
  border: 1px solid var(--glass-elem-border); 
  box-shadow: var(--glass-elem-shadow); 
  color: var(--glass-elem-text); 
  backdrop-filter: blur(15px) saturate(150%) !important; 
  -webkit-backdrop-filter: blur(15px) saturate(150%) !important; 
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--apple-ease), opacity 1.5s ease, visibility 1.5s !important;
}

.low-end .ultra-glass {
  backdrop-filter: blur(6px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
}

.btn { 
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; 
  padding: 18px 46px; border-radius: 100px; font-size: 15px; font-weight: 600; 
  letter-spacing: 0.1em; text-transform: uppercase; position: relative; z-index: 10; margin-top: 20px; 
}
.btn:active { transform: scale(0.96) translateZ(0); transition: transform 0.1s ease; }
.btn.hide { opacity: 0; transform: translateY(40px) scale(0.9) translateZ(0); pointer-events: none; transition: all 1s var(--apple-ease); }
#openBtn { background-color: #7A4620; color: #F4EFEB; border: none; box-shadow: 0 8px 24px rgba(122, 70, 32, 0.3); transition: transform 0.4s var(--apple-ease); }

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@media (max-width: 480px) {
  .menu-toggle, .top-controls-pill, .bottom-nav {
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  }
}

/* Optimasi Layer GPU: will-change ditangani via JS (Opt A) */
.gpu-layer {
  transform: translateZ(0);
}

.env-paper {
  box-shadow: none !important;
}
.env-paper.up {
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}