/* ══════════════════════════════════════════════════════════════
   Geri sayim — gorunum
   Renkler tek yerden gelir: asagidaki dort tema arasinda ust bardaki
   secici ile gecilir. Her renk "R, G, B" uclusu olarak tanimli;
   boylece hem duz hem yari saydam (rgba) kullanimda ayni degeri paylasir.
   ══════════════════════════════════════════════════════════════ */

/* ── Varsayilan tema: Mor & Lavanta ──────────────────────────── */
:root {
  --zemin:    18, 10, 26;
  --gul:      179, 136, 255;   /* ana vurgu (mor) */
  --lavanta:  201, 167, 255;
  --seftali:  150, 160, 255;   /* menekse mavisi */
  --altin:    226, 200, 160;
  --mercan:   200, 120, 230;   /* koyu vurgu (kalpler) */
  --turkuaz:  150, 190, 255;
  --nane:     180, 150, 255;
  --krem:     245, 240, 255;
}

/* ── Gece Mavisi & Altin ─────────────────────────────────────── */
:root[data-tema="mavi"] {
  --zemin:    8, 14, 30;
  --gul:      255, 214, 140;   /* ana vurgu (altin) */
  --lavanta:  140, 190, 255;
  --seftali:  255, 190, 120;
  --altin:    255, 222, 150;
  --mercan:   90, 140, 240;    /* kral mavisi */
  --turkuaz:  120, 210, 255;
  --nane:     210, 195, 130;
  --krem:     245, 246, 255;
}

/* ── Turkuaz & Nane ──────────────────────────────────────────── */
:root[data-tema="turkuaz"] {
  --zemin:    6, 22, 26;
  --gul:      80, 210, 220;     /* ana vurgu (turkuaz) */
  --lavanta:  120, 235, 190;
  --seftali:  100, 200, 255;
  --altin:    200, 235, 150;
  --mercan:   40, 185, 190;
  --turkuaz:  90, 220, 235;
  --nane:     130, 235, 190;
  --krem:     240, 255, 252;
}

/* ── Altin & Sampanya ────────────────────────────────────────── */
:root[data-tema="altin"] {
  --zemin:    26, 16, 8;
  --gul:      245, 220, 175;    /* ana vurgu (sampanya) */
  --lavanta:  255, 214, 150;
  --seftali:  240, 195, 140;
  --altin:    255, 225, 160;
  --mercan:   220, 170, 110;    /* bronz */
  --turkuaz:  235, 215, 180;
  --nane:     230, 220, 170;
  --krem:     255, 248, 238;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: rgb(var(--zemin));
  color: rgb(var(--krem));
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  font-family: "Jost", "Segoe UI", system-ui, sans-serif;
  transition: background 0.6s ease;
}


/* ── Kosedeki ses ac/kapa butonu ──────────────────────────────── */

.sesTus {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index: 9;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: rgb(var(--krem));
  background: rgba(var(--krem), 0.06);
  border: 1px solid rgba(var(--krem), 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sesTus:hover { transform: scale(1.08); background: rgba(var(--krem), 0.13); }

.sesTus svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  fill-rule: evenodd;
}
.sesTus .hoparlor { stroke: none; }
.sesTus .dalga { fill: none; }
.sesTus .capraz { display: none; }

/* Ses acikken kucuk dalga nabzi */
.sesTus:not(.kapali) .dalga { animation: sesDalga 1.6s ease-in-out infinite; }
.sesTus:not(.kapali) .d2 { animation-delay: 0.2s; }

@keyframes sesDalga {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.35; }
}

/* Kapaliyken dalgalar sonuk, uzerinde capraz cizgi */
.sesTus.kapali { color: rgba(var(--krem), 0.55); }
.sesTus.kapali .dalga { display: none; }
.sesTus.kapali .capraz { display: block; }


/* ── Arka plan: agir agir dolasan yumusak isik bulutlari ──────── */

.aurora {
  position: fixed;
  inset: -25%;
  z-index: 0;
  filter: blur(95px);
  opacity: 0.52;
  pointer-events: none;
}

.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: dolas 32s ease-in-out infinite;
}

.aurora i:nth-child(1) {
  width: 48vmax; height: 48vmax; top: 4%; left: 2%;
  background: radial-gradient(circle, rgb(var(--gul)) 0%, transparent 66%);
}
.aurora i:nth-child(2) {
  width: 44vmax; height: 44vmax; top: 32%; left: 52%;
  background: radial-gradient(circle, rgb(var(--lavanta)) 0%, transparent 66%);
  animation-duration: 40s; animation-direction: reverse;
}
.aurora i:nth-child(3) {
  width: 38vmax; height: 38vmax; top: 54%; left: 16%;
  background: radial-gradient(circle, rgb(var(--seftali)) 0%, transparent 66%);
  animation-duration: 36s; animation-delay: -14s;
}
.aurora i:nth-child(4) {
  width: 32vmax; height: 32vmax; top: 10%; left: 66%;
  background: radial-gradient(circle, rgb(var(--altin)) 0%, transparent 66%);
  animation-duration: 46s; animation-delay: -7s; animation-direction: reverse;
}

@keyframes dolas {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(8vw, -6vh) scale(1.14); }
  66%  { transform: translate(-6vw, 5vh) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Bulutlarin uzerine koyu vinyet — rakamlar okunakli kalsin */
.vinyet {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 64% 54% at 50% 48%,
              rgba(var(--zemin), 0.55), rgba(var(--zemin), 0.9) 62%, rgb(var(--zemin)) 88%);
}

#zerre {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Ince film greni — sahneye hafif bir doku katar. */
.gren {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  animation: grenOynat 0.9s steps(3) infinite;
}

@keyframes grenOynat {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1.5%); }
  66%  { transform: translate(1.5%, -2%); }
  100% { transform: translate(0, 0); }
}


/* ── Sayac ───────────────────────────────────────────────────── */

.sahne {
  position: relative;
  z-index: 3;
  animation: acilis 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes acilis {
  from { opacity: 0; transform: translateY(16px) scale(0.98); filter: blur(8px); }
  to   { opacity: 1; transform: none;                         filter: blur(0); }
}

.ustyazi {
  font-family: "Fredoka", "Jost", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 3.4vw, 25px);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-align: center;
  color: rgba(var(--gul), 0.6);
  margin-bottom: clamp(18px, 3.4vh, 40px);
  animation: fisilti 6s ease-in-out infinite;
}

@keyframes fisilti {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.92; }
}

.sayac {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 3.2vw, 38px);
}

.birim {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(66px, 17vw, 158px);
}

.kutu {
  display: grid;
  justify-items: center;
  animation: nefes 4.5s ease-in-out infinite;
}

@keyframes nefes {
  0%, 100% { filter: drop-shadow(0 0 18px var(--isik)); }
  46%      { filter: drop-shadow(0 0 44px var(--isik)); }
}

.rakam {
  grid-area: 1 / 1;
  text-align: center;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: clamp(62px, 18vw, 172px);
  line-height: 0.98;
  letter-spacing: 0.005em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(175deg, rgb(var(--krem)) 8%, rgb(var(--krem)) 34%, var(--renk) 114%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cubuk {
  width: 74%;
  max-width: 100px;
  height: 1.5px;
  margin: clamp(14px, 2.4vh, 26px) 0 clamp(11px, 1.8vh, 18px);
  border-radius: 2px;
  background: rgba(var(--krem), 0.09);
  overflow: hidden;
}

.cubuk i {
  display: block;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(var(--krem), 0.2), var(--renk));
  box-shadow: 0 0 10px var(--isik);
}

.etiket {
  font-size: clamp(8.5px, 1.5vw, 11px);
  font-weight: 400;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--renk);
  opacity: 0.72;
}

/* Sutunlar arasindaki kucuk kalp */
.ayrac {
  font-size: clamp(11px, 1.7vw, 17px);
  line-height: 1;
  margin-top: clamp(47px, 13.8vw, 132px);
  color: rgba(var(--mercan), 0.55);
  text-shadow: 0 0 16px rgba(var(--mercan), 0.5);
  animation: ayracKalbi 4s ease-in-out infinite;
}

.ayrac:nth-of-type(4) { animation-delay: 0.45s; }
.ayrac:nth-of-type(6) { animation-delay: 0.9s; }

@keyframes ayracKalbi {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  10%      { transform: scale(1.35); opacity: 1; }
  22%      { transform: scale(1.05); opacity: 0.7; }
  32%      { transform: scale(1.2);  opacity: 0.85; }
  50%      { transform: scale(1);    opacity: 0.55; }
}

.sus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 18px);
  margin-top: clamp(22px, 4vh, 46px);
}

.sus i {
  display: block;
  width: clamp(38px, 9vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--seftali), 0.4));
}
.sus i:last-child {
  background: linear-gradient(90deg, rgba(var(--seftali), 0.4), transparent);
}

.sus span {
  font-size: clamp(9px, 1.4vw, 12px);
  line-height: 1;
  color: rgba(var(--mercan), 0.6);
  text-shadow: 0 0 14px rgba(var(--mercan), 0.5);
}

@media (max-width: 520px) {
  .ayrac { display: none; }
  .aurora { filter: blur(66px); }
}

.rakam.giris { animation: gir 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rakam.cikis { animation: cik 0.7s cubic-bezier(0.55, 0, 0.35, 1) both; }

@keyframes gir {
  from { opacity: 0; transform: translateY(0.34em) scale(0.95); filter: blur(6px); }
  to   { opacity: 1; transform: none;                           filter: blur(0); }
}
@keyframes cik {
  from { opacity: 1; transform: none;                            filter: blur(0); }
  to   { opacity: 0; transform: translateY(-0.34em) scale(1.05); filter: blur(6px); }
}


/* ── Kutlama ─────────────────────────────────────────────────── */

.sahne.gizle {
  animation: dagil 1.2s cubic-bezier(0.55, 0, 0.35, 1) both;
  pointer-events: none;
}

@keyframes dagil {
  from { opacity: 1; transform: none;                          filter: blur(0); }
  to   { opacity: 0; transform: translateY(-38px) scale(1.14); filter: blur(16px); }
}

.parla {
  position: fixed;
  inset: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%,
              rgb(var(--krem)) 0%, rgb(var(--gul)) 42%, transparent 78%);
}
.parla.calis { animation: parlama 1.6s ease-out both; }

@keyframes parlama {
  0%   { opacity: 0; }
  8%   { opacity: 0.8; }
  100% { opacity: 0; }
}

#fisek {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#fisek.acik { opacity: 1; }

.kutlama {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 24px clamp(100px, 16vh, 180px);
  text-align: center;
  pointer-events: none;
}
.kutlama.acik { display: flex; }

.kutlama::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 50% 40% at 50% 50%,
              rgba(var(--zemin), 0.84), rgba(var(--zemin), 0.46) 56%, transparent 78%);
}

.satir {
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 6.6vw, 50px);
  line-height: 1.24;
  letter-spacing: 0.02em;
  animation: isilti 5s ease-in-out infinite;
}

@keyframes isilti {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(var(--seftali), 0.32)); }
  50%      { filter: drop-shadow(0 0 46px rgba(var(--gul), 0.55)); }
}

/* Isim: zarif el yazisi, sahnenin merkezi */
.isim {
  font-family: "Great Vibes", "Fredoka", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(68px, 20vw, 158px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: clamp(2px, 0.8vh, 14px) 0 clamp(4px, 1vh, 16px);
  animation: isimIsiltisi 4.5s ease-in-out infinite;
}

@keyframes isimIsiltisi {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(var(--gul), 0.48)); }
  46%      { filter: drop-shadow(0 0 66px rgba(var(--lavanta), 0.72)); }
}

.isim .harf {
  background: linear-gradient(168deg, rgb(var(--krem)) 10%, rgb(var(--gul)) 52%, rgb(var(--lavanta)) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  /* El yazisi fontlarda son harfin kuyrugu ilerleme genisliginin disina
     tasar; yatay pay boyama kutusunu genisletir, negatif margin yerlesimi korur. */
  padding: 0.3em 0.28em 0.28em;
  margin: -0.3em -0.28em -0.28em;
}

.altyazi {
  font-family: "Great Vibes", "Fredoka", cursive;
  font-size: clamp(22px, 5.6vw, 44px);
  line-height: 1.3;
  color: rgba(var(--krem), 0.92);
  text-shadow: 0 0 26px rgba(var(--mercan), 0.5);
  animation: gel 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gel {
  from { opacity: 0; transform: translateY(18px); filter: blur(9px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

.harf {
  display: inline-block;
  white-space: pre;
  background: linear-gradient(180deg, rgb(var(--krem)) 22%, rgb(var(--altin)) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.3em 0 0.28em;
  margin: -0.3em 0 -0.28em;
  animation: harfGel 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes harfGel {
  from { opacity: 0; transform: translateY(0.4em) rotate(4deg) scale(0.82); filter: blur(11px); }
  to   { opacity: 1; transform: none;                                      filter: blur(0); }
}

/* Cizilmis pasta (emoji yerine) */
.pasta {
  margin-top: clamp(10px, 1.8vh, 22px);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.45));
  animation: pastaGel 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             zipla 3.2s ease-in-out infinite;
}
.pasta svg {
  display: block;
  width: clamp(104px, 26vw, 178px);
  height: auto;
}

@keyframes pastaGel {
  from { opacity: 0; transform: translateY(26px) scale(0.5); }
  to   { opacity: 1; transform: none; }
}

@keyframes zipla {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  30%      { transform: translateY(-11px) rotate(-3deg); }
  60%      { transform: translateY(-3px)  rotate(3deg); }
}

/* Mum alevi titresimi */
.alev {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: alevOynat 0.5s ease-in-out infinite alternate;
}
.alev:nth-of-type(2) { animation-delay: 0.12s; }
.alev:nth-of-type(3) { animation-delay: 0.24s; }

@keyframes alevOynat {
  from { transform: scale(1, 1)      translateX(0); }
  to   { transform: scale(0.86, 1.12) translateX(0.4px); }
}


/* ── Mesaj kartlari ──────────────────────────────────────────── */

.kartYuva {
  position: fixed;
  left: 50%;
  bottom: clamp(76px, 12vh, 108px);
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  min-height: clamp(54px, 8vh, 76px);
  width: min(90vw, 640px);
  pointer-events: none;
}

.kart {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(11px, 1.6vh, 16px) clamp(20px, 4vw, 32px);
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-size: clamp(17px, 4.4vw, 26px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(var(--krem), 0.95);
  background: rgba(var(--gul), 0.06);
  border: 1px solid rgba(var(--gul), 0.16);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(var(--krem), 0.14);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .kart { white-space: normal; text-align: center; border-radius: 26px; }
}

.kart::before {
  content: "♥";
  flex-shrink: 0;
  font-size: 0.74em;
  line-height: 1;
  color: rgb(var(--mercan));
  text-shadow: 0 0 18px rgba(var(--mercan), 0.9);
  animation: kartKalbi 1.5s ease-in-out infinite;
}

@keyframes kartKalbi {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.22); }
  26%      { transform: scale(1.02); }
  38%      { transform: scale(1.12); }
}

.kart::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg,
              transparent 34%, rgba(var(--krem), 0.09) 48%, transparent 62%);
  background-size: 280% 100%;
  animation: parilti 7s ease-in-out infinite;
}

@keyframes parilti {
  0%        { background-position: 190% 0; }
  55%, 100% { background-position: -90% 0; }
}

.kart.girer { animation: kartGir 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.kart.cikar { animation: kartCik 0.66s cubic-bezier(0.55, 0, 0.35, 1) both; }

@keyframes kartGir {
  from { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(7px); }
  to   { opacity: 1; transform: none;                         filter: blur(0); }
}
@keyframes kartCik {
  from { opacity: 1; transform: none;                          filter: blur(0); }
  to   { opacity: 0; transform: translateY(-18px) scale(1.03); filter: blur(7px); }
}


/* Sag alttaki imza */
.imza {
  position: fixed;
  right: clamp(20px, 4vw, 46px);
  bottom: calc(clamp(16px, 2.6vh, 34px) + env(safe-area-inset-bottom));
  z-index: 5;
  font-family: "Great Vibes", cursive;
  font-size: clamp(20px, 4.2vw, 34px);
  color: rgba(var(--krem), 0.78);
  text-shadow: 0 0 22px rgba(var(--mercan), 0.45);
  pointer-events: none;
  animation: gel 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.aurora.kutlama {
  opacity: 0.3;
  transition: opacity 3s ease;
}


/* ── Test tusu ───────────────────────────────────────────────── */

.testTus {
  position: fixed;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 9;
  display: none;
  padding: 11px 21px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--krem), 0.7);
  background: rgba(var(--gul), 0.07);
  border: 1px solid rgba(var(--gul), 0.18);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.testTus.acik { display: block; }
.testTus:hover {
  color: rgb(var(--krem));
  background: rgba(var(--gul), 0.15);
  border-color: rgba(var(--gul), 0.38);
}


/* ── Hareket hassasiyeti ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sahne, .kutu, .aurora i, .rakam.giris, .rakam.cikis, .satir, .isim,
  .harf, .altyazi, .pasta, .parla, .kart, .kart::before, .kart::after,
  .imza, .ustyazi, .gren, .alev {
    animation: none !important;
  }
  #zerre, .gren { display: none; }
  .harf, .altyazi, .pasta, .kart, .imza, .ustyazi { opacity: 1; }
}