:root {
  --scene: url('warrior-atmosphere.png');
  --world: #0d0a06;
  --scene-veil: #100b07e8;
  --panel-edge: #120d08ed;
  --panel-center: #1c140ced;
  --scene-accent: #ebc075;
  --scene-glow: #c99a5333;
  --mist: #d9bc8a;
  --scene-filter: grayscale(1) sepia(.9) saturate(.78) contrast(1.04);
  --gold: #ebc075;
  --gold-light: #f4dfb2;
  --gold-dark: #a57e41;
  --text: #c6bba4;
}
:root[data-theme="dragon"] {
  --scene: url('themes/dragon.png');
}
:root[data-theme="ice"] {
  --scene: url('themes/ice.png');
}
:root[data-theme="forest"] {
  --scene: url('themes/forest.png');
}
:root[data-theme="temple"] {
  --scene: url('themes/temple.png');
}
body { background: var(--world); }
.atmosphere { background: radial-gradient(ellipse at 50% 30%,var(--scene-glow),transparent 70%),var(--world); }
.atmosphere-art {
  inset: -3%;
  background: linear-gradient(90deg,transparent,var(--scene-veil) 32%,var(--scene-veil) 68%,transparent),var(--scene) center / cover;
  opacity: .69;
  filter: var(--scene-filter);
  animation: world-drift 38s ease-in-out infinite alternate;
}
[data-theme="warrior"] .atmosphere-art { opacity: .52; }
@keyframes world-drift { from { transform: scale(1.015) translate3d(-.5%,0,0); } to { transform: scale(1.065) translate3d(.5%,-1%,0); } }
.hero-art {
  background: linear-gradient(0deg,var(--panel-center),transparent 85%),linear-gradient(90deg,var(--scene-veil),transparent 50%,var(--scene-veil)),var(--scene) center 28% / cover;
  opacity: .76;
  filter: var(--scene-filter);
}
.intro::before { background: radial-gradient(ellipse at 50% 33%,var(--scene-glow),transparent 57%),linear-gradient(180deg,transparent,var(--scene-veil) 70%,transparent); }
.blok { background: linear-gradient(90deg,var(--panel-edge),var(--panel-center) 50%,var(--panel-edge)); }
.topbar { background: linear-gradient(180deg,var(--panel-center),var(--panel-edge)); }
.intro h1 em,.intro-kicker,.chapter-label { color: var(--scene-accent); }
.hero-halo { border-color: var(--scene-accent); opacity: .35; }
.hero-badges { color: #d8cdbb; }
.sky-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 6% 75%,var(--scene-glow),transparent 42%),radial-gradient(ellipse at 95% 20%,var(--scene-glow),transparent 35%); animation: sky-breathe 12s ease-in-out infinite alternate; }
@keyframes sky-breathe { from { opacity: .3; transform: scale(1); } to { opacity: 1; transform: scale(1.14); } }
.weather-mist { position: absolute; width: 140%; height: 65%; left: -20%; bottom: -15%; opacity: .11; filter: blur(27px); background: radial-gradient(ellipse at 25% 70%,var(--mist),transparent 39%),radial-gradient(ellipse at 76% 67%,var(--mist),transparent 38%); animation: mist-drift 29s ease-in-out infinite alternate; }
@keyframes mist-drift { from { transform: translate3d(-8%,3%,0) scale(1); } to { transform: translate3d(8%,-3%,0) scale(1.1); } }
[data-theme="dragon"] .embers i { background: #f1cf8b; box-shadow: 0 0 11px 2px #d29b46a6; }
[data-theme="ice"] .embers i { top: -25px; bottom: auto; width: var(--size); height: var(--size); background: #f5e7cf; box-shadow: 0 0 5px #e6c58a77; animation-name: snow-fall; }
@keyframes snow-fall { 0% { opacity: 0; transform: translate3d(0,0,0); } 8% { opacity: .8; } 85% { opacity: .65; } 100% { opacity: 0; transform: translate3d(var(--drift),110vh,0); } }
[data-theme="forest"] .embers i { top: var(--y); bottom: auto; width: var(--size); height: var(--size); background: #f4d994; box-shadow: 0 0 8px 2px #dfac558c; animation-name: firefly-dance; animation-timing-function: ease-in-out; }
[data-theme="forest"] .embers i:nth-child(3n) { background: #fff0c9; box-shadow: 0 0 9px 2px #e7bf7477; }
@keyframes firefly-dance { 0%,100% { opacity: .05; transform: translate3d(0,0,0); } 25% { opacity: .85; transform: translate3d(18px,-26px,0); } 55% { opacity: .2; transform: translate3d(var(--drift),-8px,0); } 80% { opacity: .75; transform: translate3d(-9px,20px,0); } }
.theme-picker { margin: 0 0 42px; padding: 23px 22px 14px; border: 1px solid #e6bd7340; border-radius: 4px; background: linear-gradient(135deg,#d4a65d0a,#08080755); box-shadow: inset 0 1px #e6bd7312; }
.theme-picker-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.theme-picker-heading .chapter-label { text-align: left; margin: 0 0 5px; font-size: 8px; letter-spacing: .18em; }
.theme-picker h2 { margin: 0; font: 500 23px/1.3 Beaufort,Georgia,serif; color: #f7e8c8; }
.motion-toggle { display: flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 37px; padding: 8px 11px; border: 1px solid #e6bd7340; border-radius: 4px; background: #08070666; color: #d3c2a8; font: 600 10px 'Segoe UI',sans-serif; cursor: pointer; }
.motion-toggle[aria-pressed="true"] > span:first-child { color: #dabc7d; text-shadow: 0 0 9px #f0c16966; }
.motion-toggle[aria-pressed="false"] > span:first-child { color: #8d8577; }
.motion-toggle:disabled { opacity: .6; cursor: default; }
.theme-options { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.theme-option { display: block; min-width: 0; padding: 0 0 12px; text-align: left; border: 1px solid #b18a4d50; border-radius: 3px; background: #09080777; color: #d8ccb7; cursor: pointer; overflow: hidden; transition: border-color .2s,box-shadow .2s,transform .2s; }
.theme-option:hover { transform: translateY(-3px); border-color: #edd0989c; }
.theme-option[aria-pressed="true"] { border-color: #f0ca83; background: linear-gradient(180deg,#98692c16,#4a321821); box-shadow: 0 0 0 1px #edc5814a,0 0 20px #c98e3514; }
.theme-option:focus-visible,.motion-toggle:focus-visible { outline: 2px solid #ffe4ab; outline-offset: 4px; }
.theme-preview { position: relative; display: block; height: 99px; margin-bottom: 11px; overflow: hidden; border-bottom: 1px solid #dfb36a24; background: #0c0a08; }
.theme-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%,#08080780); pointer-events: none; }
.theme-preview img { width: 100%; height: 100%; object-fit: cover; opacity: .88; filter: var(--scene-filter); transition: transform .5s,opacity .3s; }
.theme-option:hover img { transform: scale(1.05); opacity: 1; }
.theme-number { position: absolute; z-index: 1; top: 7px; left: 8px; color: #f3e2bd; font: 600 9px 'Segoe UI',sans-serif; text-shadow: 0 1px 4px #000; }
.theme-selected { position: absolute; z-index: 1; display: none; top: 7px; right: 8px; width: 19px; height: 19px; place-items: center; background: #efd19a; color: #1a1009; font: 800 12px 'Segoe UI',sans-serif; border-radius: 50%; }
.theme-option[aria-pressed="true"] .theme-selected { display: grid; }
.theme-option strong,.theme-option small { display: block; margin: 0 11px; }
.theme-option strong { color: #f4e2bf; font: 600 15px/1.4 Beaufort,Georgia,serif; }
.theme-option small { margin-top: 3px; color: #ab9e8c; font: 10px/1.4 'Segoe UI',sans-serif; }
.theme-current { margin: 13px 0 0; color: #a59884; font-size: 10px; text-align: center; }
.theme-current strong { color: #e7c993; font-weight: 600; }
[data-motion="off"] .atmosphere *,[data-motion="off"] .hero-halo,[data-motion="off"] .site-main-logo,[data-motion="off"] .button-gold::after,[data-motion="off"] .system-section.is-visible { animation: none !important; }
[data-motion="off"] .embers { display: none; }
@media (max-width: 760px) { .theme-picker { padding: 18px 15px 13px; } .theme-options { gap: 9px; grid-template-columns: repeat(3,minmax(0,1fr)); } .theme-preview { height: 82px; } .theme-option strong { font-size: 14px; } .theme-option small { font-size: 9px; } .theme-picker h2 { font-size: 22px; } }
@media (max-width: 580px) { .theme-options { grid-template-columns: repeat(2,minmax(0,1fr)); } .theme-options .theme-option:last-child { grid-column: 1 / -1; } .theme-preview { height: 89px; } .theme-picker-heading { align-items: flex-start; } .theme-picker-heading .chapter-label { max-width: 150px; line-height: 1.7; font-size: 7px; } .theme-picker h2 { font-size: 19px; } .motion-toggle { padding: 8px; font-size: 9px; } .theme-option small { font-size: 9px; } }
@media (max-width: 480px) { .topbar nav { gap: 12px; } .topbar nav a:nth-child(2) { display: inline; } .topbar nav a[href="#sistemler"] { display: none; } .theme-picker { padding: 17px 11px 12px; } .theme-picker-heading { gap: 8px; } .theme-preview { height: 77px; } .theme-option strong,.theme-option small { margin-left: 9px; margin-right: 7px; } }
@media (max-width: 350px) { .topbar nav a[href="#ozellikler"] { display: none; } .theme-picker-heading { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .atmosphere *, .theme-option,.theme-preview img { animation: none !important; transition: none !important; } .embers { display: none; } }