/* Votart Studio — tek sayfa.
   Bağımlılık yok: sistem yazı tipleri, satır içi SVG, dış istek sıfır.
   İki hâl: gece (yıldız alanı, parıltı) ve gündüz (kâğıt, kabartma).
   JS yoksa sistem tercihi karar verir; JS varsa saat (19–07 gece), URL
   (?tema=gece|gunduz) ya da ziyaretçinin seçimi (theme.js).
   Renkler :root belirteçlerinde; gece bloğu iki yerde aynen (medya sorgusu
   + data-theme) — CSS'te mixin yok, kopya bilinçli. */

:root {
  color-scheme: light dark;
  --bg: #f1ebe1;
  --bg-2: #e7e0d3;
  --ink: #2b2a26;
  --muted: #6f6a60;
  --rule: rgba(43, 42, 38, .16);
  --display: #b5a98f;
  --node: #d4cab8;
  --edge: #d0c6b3;
  --star: #d4cab8;
  --warm: #d4cab8;
  --sky: 0;
  --play: paused;
  --grain: .6;
  --relief: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .95)) drop-shadow(1px 1px 0 rgba(70, 60, 45, .24));
  --emboss: -1px -1px 0 rgba(255, 255, 255, .9), 1px 1px 0 rgba(70, 60, 45, .2);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Noto Serif", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="gunduz"]) {
    --bg: #070a12;
    --bg-2: #0f1628;
    --ink: #d7dced;
    --muted: #8a93a8;
    --rule: rgba(215, 220, 237, .16);
    --display: #e9eef9;
    --node: #f3f6ff;
    --edge: rgba(214, 222, 245, .42);
    --star: #e8eefc;
    --warm: #ffd7a3;
    --sky: 1;
    --play: running;
    --grain: .18;
    --relief: drop-shadow(0 0 2px rgba(214, 222, 245, .6));
    --emboss: 0 0 16px rgba(200, 214, 255, .22);
  }
}

:root[data-theme="gece"] {
  --bg: #070a12;
  --bg-2: #0f1628;
  --ink: #d7dced;
  --muted: #8a93a8;
  --rule: rgba(215, 220, 237, .16);
  --display: #e9eef9;
  --node: #f3f6ff;
  --edge: rgba(214, 222, 245, .42);
  --star: #e8eefc;
  --warm: #ffd7a3;
  --sky: 1;
  --play: running;
  --grain: .18;
  --relief: drop-shadow(0 0 2px rgba(214, 222, 245, .6));
  --emboss: 0 0 16px rgba(200, 214, 255, .22);
}

/* ---------- zemin ---------- */

* { box-sizing: border-box; }

html {
  background: var(--bg);
  transition: background-color .8s ease;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: color .8s ease;
}

/* kâğıt dokusu: tek karo SVG gürültüsü, dış dosya yok */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 .07 .07 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  transition: opacity .8s ease;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- hero: gökyüzü ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* gece: ortada loş bir bulutsu; gündüz: düz kâğıt */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 44%, var(--bg-2), transparent 70%);
  opacity: var(--sky);
  transition: opacity .8s ease;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: var(--sky);
  transition: opacity .8s ease;
}

.sky circle {
  fill: var(--star);
  animation: nefes var(--t) ease-in-out var(--d) infinite alternate;
  animation-play-state: var(--play);
}

.sky .w { fill: var(--warm); }
/* yarıçaplar öznitelikte (r="…"): CSS `r` birimsiz Firefox'ta geçersiz —
   Chrome kabul ediyordu, Firefox daireleri 0 yaptı (2026-10-08 ölçümü) */

@keyframes nefes {
  from { opacity: .3; }
  to { opacity: 1; }
}

/* nefes süreleri ve fazları — satır içi style yok (CSP), yalnız sınıf */
.t1 { --t: 2.8s; }
.t2 { --t: 3.6s; }
.t3 { --t: 4.3s; }
.t4 { --t: 5.1s; }
.t5 { --t: 6.2s; }
.t6 { --t: 7.4s; }
.d1 { --d: 0s; }
.d2 { --d: -.9s; }
.d3 { --d: -1.7s; }
.d4 { --d: -2.6s; }
.d5 { --d: -3.4s; }
.d6 { --d: -4.1s; }
.d7 { --d: -5s; }
.d8 { --d: -5.9s; }

/* ---------- marka: yıldız kümesi hâlinde harfler ---------- */

.hero-ic {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 6rem 1.25rem 7.5rem;
  width: 100%;
}

.marka {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  font-weight: 400;
}

.mark {
  display: block;
  width: min(86vw, 46rem);
  height: auto;
  overflow: visible;
  filter: var(--relief);
  transition: filter .8s ease;
}

.mark path {
  fill: none;
  stroke: var(--edge);
  stroke-width: .14;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .8s ease;
}

.mark circle {
  fill: var(--node);
  transition: fill .8s ease;
}

/* gece: marka da nefes alır (hafif); gündüz: kabartma durur */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="gunduz"]) .mark circle {
    animation: nefes-marka var(--t) ease-in-out var(--d) infinite alternate;
  }
}

:root[data-theme="gece"] .mark circle {
  animation: nefes-marka var(--t) ease-in-out var(--d) infinite alternate;
}

@keyframes nefes-marka {
  from { opacity: .7; }
  to { opacity: 1; }
}

.studio {
  font-variant-caps: small-caps;
  letter-spacing: .5em;
  text-indent: .5em;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--display);
  text-shadow: var(--emboss);
  transition: color .8s ease, text-shadow .8s ease;
}

.lead {
  margin: 2.8rem auto 0;
  max-width: 30rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.5;
  font-style: italic;
}

/* fısıltı: saat bilgisi + gece/gündüz anahtarı — yalnız JS varken */
.whisper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4rem;
  z-index: 1;
  margin: 0;
  padding: 0 1.25rem;
  text-align: center;
  font-size: .92rem;
  color: var(--muted);
  display: none;
}

.js .whisper { display: block; }

.whisper button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 .05em;
  cursor: pointer;
  transition: border-color .3s ease;
}

.whisper button:hover,
.whisper button:focus-visible {
  border-bottom-color: var(--ink);
}

/* ---------- gövde ---------- */

main {
  position: relative;
  z-index: 1;
}

.metin,
.degerler,
.yakinda {
  max-width: 42rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.metin {
  padding-top: 7rem;
  padding-bottom: 5rem;
  font-size: clamp(1.15rem, 2vw, 1.3rem);
}

.metin p {
  margin: 0;
  max-width: 34rem;
}

.degerler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2.4rem 2rem;
  padding-top: 2.6rem;
  padding-bottom: 6rem;
  border-top: 1px solid var(--rule);
}

.degerler h2 {
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
}

.degerler p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.yakinda {
  padding-top: 5rem;
  padding-bottom: 7rem;
  text-align: center;
}

.buyuk {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--display);
  text-shadow: var(--emboss);
  transition: color .8s ease, text-shadow .8s ease;
}

footer {
  padding: 2rem 1.25rem 3rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

footer p { margin: 0; }

footer a,
.hata a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .3s ease;
}

footer a:hover,
.hata a:hover {
  border-bottom-color: currentColor;
}

/* ---------- 404 ---------- */

.hata {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
}

.hata .mark { width: min(60vw, 18rem); }
.hata p { margin: .4rem 0 0; }
.hata .marka { gap: .8rem; margin-bottom: 2.2rem; }
.hata .studio { font-size: .9rem; }

/* ---------- hareket azaltma ---------- */

@media (prefers-reduced-motion: reduce) {
  .sky circle,
  .mark circle {
    animation: none !important;
  }

  html, body, body::before, .hero::before, .sky, .mark, .mark path, .mark circle,
  .studio, .buyuk, .whisper button, footer a, .hata a {
    transition: none !important;
  }
}