@font-face { font-family: 'Newsreader'; font-weight: 700; font-display: swap; src: url(/fonts/newsreader-tr.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(/fonts/nunito-tr.woff2) format('woff2'); }

:root {
  --gok-1: #160d2b;
  --gok-2: #2d1b52;
  --gok-3: #5f4596;
  --gok-4: #c3abea;
  --murekkep: #1c1031;
  --krem: #f6eedf;
  --krem-koyu: #e9dcc4;
  --pembe: #ffc4e0;
  --pembe-koyu: #ff9fcb;
  --pencere: #ffbf5e;
  --yay: cubic-bezier(.34, 1.56, .64, 1);

  /* koyu (gece) */
  --baslik-renk: var(--krem);
  --baslik-golge: 0 6px 0 rgba(28, 16, 49, .55), 0 0 40px rgba(195, 171, 234, .35);
  --soru-renk: var(--pembe);
  --alt-renk: #e4d8f7;
  --vurgu-renk: var(--pembe);
  --bulut-renk: #7c62b4;
  --bulut-saydam: .13;
  --tepe-uzak: #3a2763;
  --zemin-on: #1c1031;
  --cati: #33263f;
  --cati-isik: #6f5b84;
  --pen: #ffbf5e;
  --pen-cizgi: #6e5232;
}
:root[data-theme="light"] {
  --baslik-renk: #1c1031;
  --baslik-golge: 0 6px 0 rgba(255, 255, 255, .7);
  --soru-renk: #ff5fa2;
  --alt-renk: #1f2d4a;
  --vurgu-renk: #d6337a;
  --bulut-renk: #ffffff;
  --bulut-saydam: .92;
  --tepe-uzak: #7cc47a;
  --zemin-on: #4f9e4a;
  --cati: #c8553d;
  --cati-isik: #e88a6c;
  --pen: #d6eefc;
  --pen-cizgi: #6a7f8f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--gok-1); }
:root[data-theme="light"] { background: #5fb7ec; }
body {
  min-height: 100svh;
  color: var(--krem);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- gök ---------- */
.gok-katman { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .9s ease; }
.gok-katman.gece { background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 42%, var(--gok-3) 76%, var(--gok-4) 100%); }
.gok-katman.gunduz { background: linear-gradient(180deg, #4fa9e6 0%, #86cdf5 45%, #c4ebff 78%, #fff4d9 100%); opacity: 0; }
:root[data-theme="light"] .gok-katman.gunduz { opacity: 1; }

.gunes {
  position: fixed; z-index: 0; pointer-events: none;
  top: clamp(56px, 10vh, 110px); left: clamp(16px, 9vw, 160px);
  width: clamp(90px, 12vw, 150px); aspect-ratio: 1;
  opacity: 0; transform: translateY(40px) scale(.8);
  transition: opacity .9s ease, transform .9s var(--yay);
}
.gunes svg { width: 100%; height: 100%; display: block; }
.gunes .isinlar { transform-origin: 100px 100px; animation: don-yavas 30s linear infinite; }
@keyframes don-yavas { to { transform: rotate(360deg); } }
:root[data-theme="light"] .gunes { opacity: 1; transform: none; }
/* gün batımı / gün doğumu katmanı (tema geçişinde kısa süre görünür) */
.gok-katman.aksam { background: linear-gradient(180deg, #2f2462 0%, #8d4a86 38%, #e9746a 66%, #ffb35c 86%, #ffe0a0 100%); opacity: 0; }
.ay {
  position: fixed; z-index: 0; pointer-events: none;
  top: clamp(56px, 10vh, 110px); right: clamp(16px, 9vw, 160px);
  width: clamp(80px, 10vw, 130px); aspect-ratio: 1;
  filter: drop-shadow(0 0 24px rgba(255, 244, 214, .45));
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform .9s var(--yay);
}
.ay svg { width: 100%; height: 100%; display: block; }
:root[data-theme="light"] .ay { opacity: 0; transform: translateY(40px) scale(.8); }
/* geçiş animasyonu sırasında CSS geçişleri kapalı, hareketi JS yönetir */
:root.gecis .gunes, :root.gecis .ay, :root.gecis .gok-katman { transition: none; }

#gok { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.bulutlar { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bulut {
  position: absolute; left: -260px; width: 220px; height: 56px;
  background: var(--bulut-renk); border-radius: 60px; opacity: var(--bulut-saydam);
  animation: suzul linear infinite;
  transition: background-color .9s ease, opacity .9s ease;
}
.bulut::before, .bulut::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.bulut::before { width: 90px; height: 90px; left: 34px; top: -46px; }
.bulut::after { width: 120px; height: 120px; left: 92px; top: -64px; }
.b1 { top: 22%; animation-duration: 95s; animation-delay: -30s; }
.b2 { top: 48%; transform: scale(.7); animation-duration: 120s; animation-delay: -80s; }
.b3 { top: 12%; transform: scale(.5); animation-duration: 140s; animation-delay: -10s; }
:root:not([data-theme="light"]) .b2 { opacity: .1; }
:root:not([data-theme="light"]) .b3 { opacity: .09; }
@keyframes suzul { to { left: 110%; } }

#sehir { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: min(30vh, 280px); z-index: 1; pointer-events: none; overflow: visible; }
#sehir .tepe-uzak { fill: var(--tepe-uzak); transition: fill .9s ease; }
#sehir .zemin-on { fill: var(--zemin-on); transition: fill .9s ease; }
#sehir .cati { fill: var(--cati); transition: fill .9s ease; }
#sehir .cati-isik { fill: var(--cati-isik); transition: fill .9s ease; }
#sehir .pen { fill: var(--pen); stroke: var(--pen-cizgi); transition: fill .6s ease, opacity .6s ease, stroke .9s ease; }
:root:not([data-theme="light"]) #sehir .pen.sonuk { fill: #4a3a5e; opacity: .55; }
#sehir .bina { transform-box: fill-box; transform-origin: 50% 100%; }
#sehir .agac { transform-box: fill-box; transform-origin: 50% 100%; animation: sallan 5s ease-in-out infinite alternate; }
@keyframes sallan { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

#kizil { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 80% at 50% 100%, rgba(255,120,40,.85), rgba(200,40,50,.55) 45%, rgba(80,10,30,.35) 80%); mix-blend-mode: normal; }
#sehir .bina.yanik rect, #sehir .bina.yanik path, #sehir .bina.yanik circle { fill: #3a2a2c; stroke: #1c1031; }

#efekt { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#karanlik { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: #0b0618; opacity: 0; }
#flas { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: #fff; opacity: 0; }

/* ---------- üst çubuk: tema + simüle et ---------- */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
  pointer-events: none;
}
.ust > * { pointer-events: auto; }

.sol { display: flex; gap: 10px; align-items: flex-start; }
.ses-dugme {
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--murekkep); background: var(--krem);
  border: 3px solid var(--murekkep); border-radius: 50%;
  box-shadow: 0 4px 0 var(--murekkep);
  cursor: pointer; padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ses-dugme svg { width: 22px; height: 22px; }
.ses-dugme .carpi { display: none; }
.ses-dugme.kapali .dalgalar { display: none; }
.ses-dugme.kapali .carpi { display: block; }
.ses-dugme:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--murekkep); }
.ses-dugme:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.tema-sec {
  display: inline-flex; padding: 4px; gap: 2px;
  background: var(--krem); border: 3px solid var(--murekkep); border-radius: 999px;
  box-shadow: 0 4px 0 var(--murekkep);
}
.tema-sec button {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 900; color: var(--murekkep);
  background: transparent; border: 0; border-radius: 999px;
  padding: 7px 12px; cursor: pointer;
  transition: background-color .25s ease, transform .2s var(--yay);
  -webkit-tap-highlight-color: transparent;
}
.tema-sec button svg { width: 18px; height: 18px; }
.tema-sec button[aria-pressed="true"] { background: var(--pembe); box-shadow: inset 0 0 0 2px var(--murekkep); }
.tema-sec button:active { transform: scale(.94); }
.tema-sec button:focus-visible, .sim button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.sim {
  background: var(--krem); color: var(--murekkep);
  border: 3px solid var(--murekkep); border-radius: 22px;
  box-shadow: 0 4px 0 var(--murekkep);
  min-width: 168px; overflow: hidden;
}
.sim-baslik {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 900; color: var(--murekkep);
  background: var(--pembe); border: 0; border-bottom: 3px solid var(--murekkep);
  padding: 10px 14px; cursor: default;
}
.sim-baslik .ok { width: 18px; height: 18px; display: none; transition: transform .3s var(--yay); }
.sim-liste { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.sim-liste button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--murekkep); text-align: left;
  background: transparent; border: 0; border-radius: 14px;
  padding: 8px 10px; cursor: pointer;
  transition: background-color .2s ease, transform .2s var(--yay);
  -webkit-tap-highlight-color: transparent;
}
.sim-liste button svg { width: 22px; height: 22px; flex: none; transition: transform .35s var(--yay); }
@media (hover: hover) {
  .sim-liste button:hover { background: #fff4e0; }
  .sim-liste button:hover svg { transform: scale(1.18) rotate(-8deg); }
}
.sim-liste button:active { transform: scale(.96); }
.sim-liste button.aktif { background: var(--pembe); }
.sim.mesgul .sim-liste button:not(.aktif) { opacity: .45; cursor: wait; }

@media (max-width: 980px) {
  .sim { min-width: 0; border-radius: 20px; }
  .sim-baslik { cursor: pointer; border-bottom-width: 0; padding: 9px 14px; }
  .sim-baslik .ok { display: block; }
  .sim-liste { display: none; }
  .sim.acik .sim-baslik { border-bottom-width: 3px; }
  .sim.acik .sim-baslik .ok { transform: rotate(180deg); }
  .sim.acik .sim-liste { display: grid; }
  .tema-sec button span { display: none; }
  .tema-sec button { padding: 8px 10px; }
}

/* ---------- içerik ---------- */
main {
  position: relative; z-index: 3;
  max-width: 600px; margin: 0 auto;
  padding: clamp(28px, 6vh, 72px) 16px calc(min(30vh, 280px) + 24px);
  padding-top: max(clamp(28px, 6vh, 72px), 70px);
  text-align: center;
}

.baslik {
  margin: 0;
  font-family: 'Newsreader', Georgia, serif; font-weight: 700;
  font-size: clamp(52px, 15vw, 100px); line-height: 1; letter-spacing: .01em; white-space: nowrap;
  color: var(--baslik-renk);
  text-shadow: var(--baslik-golge);
  animation: belir .9s var(--yay) both;
  transition: color .9s ease;
}
.soru { display: inline-block; color: var(--soru-renk); animation: zipla 2.4s var(--yay) infinite; transform-origin: 50% 90%; }
@keyframes zipla {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(-14px) rotate(8deg); }
  82% { transform: translateY(0) rotate(-4deg); }
}

.alt {
  margin: 16px auto 26px; max-width: 30em;
  font-size: clamp(16px, 4.2vw, 19px); line-height: 1.5; color: var(--alt-renk); transition: color .9s ease;
  animation: belir .9s .12s var(--yay) both;
}
.alt em { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-style: normal; color: var(--vurgu-renk); }

@keyframes belir { from { opacity: 0; transform: translateY(18px) scale(.97); } }

/* ---------- kart ---------- */
.kart {
  position: relative; text-align: left;
  background: var(--krem); color: var(--murekkep);
  border: 3px solid var(--murekkep); border-radius: 28px;
  box-shadow: 0 8px 0 var(--murekkep), 0 24px 60px rgba(10, 4, 24, .45);
  padding: 26px 24px 22px;
  animation: belir .9s .24s var(--yay) both;
}

/* ---------- hesaplar ---------- */
.sosyal {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  animation: belir .9s .18s var(--yay) both;
}
.sosyal a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 900; color: var(--murekkep); text-decoration: none;
  background: var(--krem); border: 3px solid var(--murekkep); border-radius: 999px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 4px 0 var(--murekkep);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sosyal svg { width: 24px; height: 24px; flex: none; transition: transform .35s var(--yay); }
@media (hover: hover) {
  .sosyal a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--murekkep); }
  .sosyal a:hover svg { transform: scale(1.15) rotate(-8deg); }
  .sosyal .yt:hover { background: #ffe1df; }
  .sosyal .tt:hover { background: #dff7f6; }
  .sosyal .ig:hover { background: #fde3f0; }
}
.sosyal a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--murekkep); }
.sosyal a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 420px) {
  .sosyal { gap: 8px; }
  .sosyal a { font-size: 14px; padding: 7px 12px 7px 8px; gap: 6px; }
  .sosyal svg { width: 20px; height: 20px; }
}

.etiket { display: block; font-weight: 900; font-size: 18px; margin: 0 0 10px; }
.etiket.kucuk { font-size: 15px; margin-top: 18px; }
.istege { font-weight: 600; opacity: .55; }

.alan { position: relative; }
textarea, input[type=text] {
  width: 100%; display: block;
  font: inherit; font-size: 17px; font-weight: 700; color: var(--murekkep);
  background: #fffaf1;
  border: 3px solid var(--murekkep); border-radius: 18px;
  padding: 14px 16px;
  box-shadow: inset 0 3px 0 var(--krem-koyu);
  outline: none;
  transition: box-shadow .2s ease, transform .2s var(--yay);
}
textarea { resize: none; min-height: 104px; padding-bottom: 30px; line-height: 1.4; }
textarea::placeholder, input::placeholder { color: #9b8db0; font-weight: 600; transition: opacity .3s ease; }
textarea.degisiyor::placeholder { opacity: 0; }
textarea:focus, input[type=text]:focus { box-shadow: inset 0 3px 0 var(--krem-koyu), 0 0 0 4px var(--pembe); }
.sayac { position: absolute; right: 14px; bottom: 9px; font-size: 13px; font-weight: 800; color: #9b8db0; font-variant-numeric: tabular-nums; }
.sayac.dolu { color: #d6336c; }

.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- düğme ---------- */
.dugme {
  margin-top: 20px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 19px; font-weight: 900; color: var(--murekkep);
  background: var(--pembe);
  border: 3px solid var(--murekkep); border-radius: 999px;
  padding: 15px 22px;
  box-shadow: 0 6px 0 var(--murekkep);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dugme-ikon { width: 22px; height: 22px; transition: transform .35s var(--yay); }
@media (hover: hover) {
  .dugme:hover { background: var(--pembe-koyu); transform: translateY(-2px); box-shadow: 0 8px 0 var(--murekkep); }
  .dugme:hover .dugme-ikon { transform: translate(3px, -3px) rotate(-6deg); }
}
.dugme:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--murekkep); }
.dugme:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.dugme[disabled] { cursor: progress; opacity: .8; }
.dugme.yukleniyor .dugme-ikon { animation: titre .5s ease-in-out infinite alternate; }
@keyframes titre { to { transform: translate(4px, -4px); } }
.dugme.ikincil { background: #fffaf1; margin-top: 18px; width: auto; padding: 12px 24px; font-size: 17px; }

.kunye { margin: 18px auto 0; max-width: 34em; font-size: 11px; line-height: 1.5; color: var(--alt-renk); opacity: .6; }

.mesaj { min-height: 1.4em; margin: 12px 0 0; font-size: 15px; font-weight: 800; text-align: center; color: #c2255c; }

.kart.salla { animation: salla .45s ease; }
@keyframes salla { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- teşekkür ---------- */
.tesekkur { text-align: center; padding: 8px 0 4px; }
.tesekkur:not([hidden]) { animation: belir .7s var(--yay) both; }
.tesekkur h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 34px; margin: 10px 0 8px; }
.tesekkur p { margin: 0; font-size: 17px; line-height: 1.5; color: #4b3d63; }
.yildiz-rozet { width: 84px; height: 84px; margin: 0 auto; animation: don 1s var(--yay) both; }
.yildiz-rozet svg { width: 100%; height: 100%; display: block; }
@keyframes don { from { transform: scale(0) rotate(-120deg); } }

.dip { margin-top: 26px; font-size: 14px; color: #cbbbe8; opacity: .85; }
.dip strong { font-family: 'Newsreader', Georgia, serif; font-weight: 700; color: var(--krem); }

@media (max-width: 420px) {
  .kart { padding: 22px 18px 18px; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* site altı */
.alt-baglanti { margin: 14px 0 0; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 14px; font-weight: 800; }
.alt-baglanti a { color: var(--alt-renk); text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.alt-baglanti a:hover { opacity: 1; }


.hakkinda { margin: 26px auto 0; max-width: 34em; text-align: center; color: var(--alt-renk); }
.hakkinda h2 { font-size: 15px; font-weight: 800; margin: 0 0 6px; opacity: .85; }
.hakkinda p { font-size: 13px; line-height: 1.55; margin: 0; opacity: .75; }