/* ==========================================================================
   Sibel Çataklı — Atölye ve Galeri
   Ortak stil dosyası: tema renkleri, tipografi, menü ve yardımcı sınıflar.
   Tema: <html data-theme="dark|light">  (varsayılan: dark)
   ========================================================================== */

/* ---- Tema renkleri ---- */
:root,
:root[data-theme="dark"] {
  --bg: #141412;
  --surface: #1B1B18;
  --fg: #ECE8E0;
  --muted: #A9A398;
  --line: rgba(236, 232, 224, .14);
  --accent: #D1A65A;
  --btnbg: #ECE8E0;
  --btnfg: #141412;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #EAE8E2;
  --surface: #F4F2EE;
  --fg: #1A1917;
  --muted: #58544C;
  --line: rgba(26, 25, 23, .14);
  --accent: #8A6220;
  --btnbg: #1A1917;
  --btnfg: #F5F4F0;
  color-scheme: light;
}
/* Beyaz galeri duvarı bölümleri (iki modda da sabit) */
:root {
  --wall: #FFFFFF;
  --wallfg: #1A1917;
  --wallmuted: #5C5850;
  --wallline: rgba(26, 25, 23, .12);
  --wallaccent: #8A6220;
}

/* ---- Temel ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Jost, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
section[id] { scroll-margin-top: 24px; }

/* ---- Tema düğmesi ikonları ---- */
:root[data-theme="dark"] .icon-moon,
:root[data-theme="light"] .icon-sun { display: none; }

/* ---- Form bildirimi ---- */
.form-note { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--muted); }
.form-note[data-state="ok"] { color: var(--accent); }
.form-note[data-state="error"] { color: #C0533A; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Sayfa bileşenleri ---- */
a{color:inherit}a:hover{color:inherit;opacity:.75}
.sc-hero{background-color:#11110E;background-image:linear-gradient(90deg, rgba(12,12,10,.92) 0%, rgba(12,12,10,.72) 42%, rgba(12,12,10,.25) 75%, rgba(12,12,10,.45) 100%), linear-gradient(180deg, rgba(12,12,10,0) 60%, rgba(12,12,10,.85) 100%), url(../img/hero-arka-plan.jpg);background-size:cover;background-position:center}
.sc-row::-webkit-scrollbar{height:6px}
.sc-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:6px}
.sc-nav a.sc-link{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;color:rgba(243,239,231,.78);text-decoration:none;font-size:15px;letter-spacing:.01em;transition:background .2s ease,color .2s ease}
.sc-nav a.sc-link:hover{color:#FFFFFF;background:rgba(255,255,255,.08);opacity:1}
.sc-nav a.sc-link[aria-current="page"]{background:#F6F3EC;color:#141412;font-weight:500;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 16px rgba(0,0,0,.28)}
.sc-caps::-webkit-scrollbar{display:none}
button:focus-visible,a:focus-visible{outline:2px solid #D1A65A;outline-offset:3px}
.sc-hero-about{background-color:#11110E;background-image:linear-gradient(90deg, rgba(12,12,10,.93) 0%, rgba(12,12,10,.75) 45%, rgba(12,12,10,.35) 100%), linear-gradient(180deg, rgba(12,12,10,0) 55%, rgba(12,12,10,.9) 100%), url(../img/atolye.jpg);background-size:cover;background-position:center 40%}
/* ---- Hareket hassasiyeti ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}