/* ═══════════ NİDA'YA ÖZEL 🌸 ═══════════ */
:root {
  --pembe-acik: #ffe4ef;
  --pembe: #ffb6d1;
  --pembe-koyu: #e75d92;
  --gul: #d6336c;
  --bordo: #9c2b5a;
  --krem: #fff8fa;
  --altin: #d4a94e;
  --mor-gece: #1a1035;
  --yazi: #5a3a48;
  --font-el: 'Great Vibes', cursive;
  --font-baslik: 'Playfair Display', serif;
  --font-govde: 'Quicksand', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-govde);
  background: var(--krem);
  color: var(--yazi);
  overflow-x: hidden;
}

.gizli { display: none !important; }

/* ═══════════ KİLİT EKRANI ═══════════ */
.kilit-ekran {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(231, 93, 146, .18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(107, 58, 156, .22) 0%, transparent 50%),
    linear-gradient(160deg, #0f0820 0%, #1a1035 40%, #0d1a2e 100%);
  transition: opacity 1.4s ease, visibility 1.4s;
  overflow: hidden;
}

.kilit-ekran.kayboluyor {
  opacity: 0;
  visibility: hidden;
}

.kilit-parcaciklar {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kilit-parcacik {
  position: absolute;
  border-radius: 50%;
  animation: kilitYildiz linear infinite;
  background: rgba(255, 255, 255, .7);
}

@keyframes kilitYildiz {
  0%   { opacity: 0; transform: scale(0); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-20px); }
}

.kilit-icerik {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 560px;
  animation: yumusakGiris 1.2s ease both;
}

.kilit-sir-rozet {
  display: inline-block;
  background: rgba(231, 93, 146, .18);
  border: 1px solid rgba(231, 93, 146, .4);
  color: #ffb6d1;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: .45rem 1.4rem;
  border-radius: 999px;
  margin-bottom: 1.8rem;
  backdrop-filter: blur(6px);
  animation: nabiz 3s ease-in-out infinite;
}

.kilit-kilit-ikon {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  animation: kilitSallan 4s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 0 22px rgba(231, 93, 146, .5));
}

@keyframes kilitSallan {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%       { transform: rotate(8deg) scale(1.08); }
}

.kilit-baslik {
  font-family: var(--font-el);
  font-size: clamp(2.8rem, 8vw, 4.8rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 0 40px rgba(231, 93, 146, .5);
}

.kilit-alt {
  font-size: clamp(.95rem, 2.5vw, 1.15rem);
  color: rgba(255, 200, 220, .8);
  margin-bottom: 2.6rem;
  line-height: 1.6;
}

.kilit-sayac-kutu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.kilit-sayac-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  backdrop-filter: blur(8px);
  min-width: 80px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .3s;
}

.kilit-sayac-item:hover { transform: translateY(-4px); }

.kilit-sayi {
  font-family: var(--font-baslik);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 20px rgba(231, 93, 146, .7);
  transition: transform .15s;
}

.kilit-sayi.degisti {
  animation: sayiAtla .25s ease;
}

@keyframes sayiAtla {
  0%   { transform: translateY(-8px); opacity: .4; }
  100% { transform: translateY(0);    opacity: 1; }
}

.kilit-etiket {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 182, 209, .7);
}

.kilit-iki-nokta {
  font-family: var(--font-baslik);
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .3);
  margin-bottom: 1.6rem;
  animation: nabiz 1s ease-in-out infinite;
}

.kilit-tarih-not {
  font-size: clamp(.88rem, 2.2vw, 1rem);
  color: rgba(255, 182, 209, .9);
  font-style: italic;
  letter-spacing: .5px;
  margin-bottom: .5rem;
}

.kilit-gizli-not {
  font-size: .78rem;
  color: rgba(255, 255, 255, .3);
  letter-spacing: 1px;
  animation: nabiz 4s ease-in-out infinite;
}

/* Mobil */
@media (max-width: 480px) {
  .kilit-sayac-item { min-width: 64px; padding: .9rem 1rem; border-radius: 14px; }
  .kilit-iki-nokta { font-size: 1.4rem; margin-bottom: 1.2rem; }
}

/* ═══════════ GİRİŞ KAPISI ═══════════ */

.giris {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffdeeb 0%, #ffc2d9 40%, #ff9ec4 100%);
  transition: opacity 1.2s ease, visibility 1.2s;
}

.giris.kapandi { opacity: 0; visibility: hidden; }

.giris-icerik {
  text-align: center;
  padding: 2rem;
  z-index: 2;
  animation: yumusakGiris 1.2s ease both;
}

.zarf {
  font-size: 5rem;
  margin-bottom: 1rem;
  animation: sallan 2.4s ease-in-out infinite;
}

.giris-baslik {
  font-family: var(--font-el);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--bordo);
  font-weight: 400;
  margin-bottom: .8rem;
}

.giris-alt {
  font-size: 1.1rem;
  color: var(--gul);
  margin-bottom: 2.2rem;
  letter-spacing: .5px;
}

.giris-btn {
  font-family: var(--font-govde);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--pembe-koyu), var(--gul));
  border: none;
  border-radius: 999px;
  padding: 1rem 2.8rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(214, 51, 108, .4);
  transition: transform .3s ease, box-shadow .3s ease;
  animation: nabiz 2s ease-in-out infinite;
}

.giris-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 40px rgba(214, 51, 108, .55);
}

/* ═══════════ GENEL BÖLÜM ═══════════ */
section { padding: 6rem 1.5rem; position: relative; }

.bolum-baslik {
  font-family: var(--font-baslik);
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
  color: var(--bordo);
  margin-bottom: .6rem;
}

.bolum-baslik.acik { color: #fff; }

.bolum-alt {
  text-align: center;
  font-size: 1.1rem;
  color: var(--pembe-koyu);
  margin-bottom: 3rem;
}

/* Kaydırınca belirme */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}

.reveal.goster {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════ HERO ═══════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 20% 10%, #ffd3e5 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, #ffc9de 0%, transparent 55%),
    linear-gradient(180deg, #fff0f6 0%, #ffe0ec 60%, #ffd1e3 100%);
  overflow: hidden;
}

.hero-icerik { position: relative; z-index: 2; max-width: 720px; }

.hero-ust {
  font-size: 1.1rem;
  letter-spacing: 3px;
  color: var(--gul);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-baslik {
  font-family: var(--font-baslik);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--bordo);
  line-height: 1.15;
}

.hero-isim {
  font-family: var(--font-el);
  font-size: clamp(4rem, 11vw, 7.5rem);
  font-weight: 400;
  color: var(--gul);
  display: inline-block;
  animation: isikSac 3s ease-in-out infinite;
}

.hero-yas { margin: 1.2rem 0; }

.yas-rakam {
  display: inline-block;
  font-family: var(--font-baslik);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, var(--pembe-koyu), var(--gul));
  width: clamp(4.6rem, 11vw, 7rem);
  height: clamp(4.6rem, 11vw, 7rem);
  line-height: clamp(4.6rem, 11vw, 7rem);
  border-radius: 24px;
  margin: 0 .4rem;
  box-shadow: 0 12px 30px rgba(214, 51, 108, .35);
  animation: zipla 2.6s ease-in-out infinite;
}

.yas-rakam:nth-child(2) { animation-delay: .25s; }

.hero-alt { font-size: 1.15rem; margin-bottom: 2rem; }

.hero-foto-cerceve {
  width: min(300px, 70vw);
  margin: 0 auto;
  border-radius: 160px 160px 24px 24px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 24px 60px rgba(156, 43, 90, .3);
  transform: rotate(-2deg);
  transition: transform .5s ease;
}

.hero-foto-cerceve:hover { transform: rotate(0deg) scale(1.03); }

.hero-foto-cerceve img { width: 100%; display: block; }

.asagi-ok {
  font-size: 2.4rem;
  color: var(--gul);
  margin-top: 2rem;
  cursor: pointer;
  animation: asagiIn 1.8s ease-in-out infinite;
}

/* Lilyum yağmuru */
.lilyum-yagmur, .giris-lilyumlar {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.lilyum {
  position: absolute;
  top: -80px;
  will-change: transform;
  animation: lilyumDus linear infinite;
  filter: drop-shadow(0 4px 8px rgba(214, 51, 108, .18));
}

/* Lilyum yağmuru yalnızca romantik bölümlerde; içerik yaprakların üstünde kalsın */
.zaman-cizgisi,
.mektup,
.final-icerik,
.hikaye .bolum-baslik,
.hikaye .bolum-alt,
.mektup-bolum .bolum-baslik {
  position: relative;
  z-index: 2;
}

/* Tıklayınca fırlayan lilyumlar */
.lilyum-firla {
  position: fixed;
  pointer-events: none;
  z-index: 1600;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 10px rgba(214, 51, 108, .3));
}

@keyframes lilyumDus {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); }
  25%  { transform: translateY(25vh) translateX(4vw) rotate(90deg); }
  50%  { transform: translateY(52vh) translateX(-3vw) rotate(200deg); }
  75%  { transform: translateY(78vh) translateX(3vw) rotate(290deg); }
  100% { transform: translateY(115vh) translateX(-2vw) rotate(380deg); }
}

/* ═══════════ SAYILAR ═══════════ */
.sayilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  background: linear-gradient(180deg, #ffd1e3, var(--krem));
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.sayi-kart {
  background: #fff;
  border-radius: 24px;
  padding: 2rem 2.4rem;
  text-align: center;
  min-width: 180px;
  box-shadow: 0 14px 36px rgba(214, 51, 108, .12);
  border: 1px solid #ffe0ec;
  transition: transform .35s ease, box-shadow .35s ease;
}

.sayi-kart:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(214, 51, 108, .22);
}

.sayi {
  display: block;
  font-family: var(--font-baslik);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--gul);
}

.sayi.sonsuz { animation: nabiz 2s ease-in-out infinite; }

.sayi-etiket { font-size: .95rem; font-weight: 600; color: var(--yazi); }

/* ═══════════ HİKAYE / ZAMAN ÇİZGİSİ ═══════════ */
.hikaye { background: var(--krem); max-width: 100%; }

.zaman-cizgisi {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  padding-left: 0;
}

.zaman-cizgisi::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--pembe), var(--gul));
  border-radius: 3px;
}

.zaman-nokta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 3rem;
  position: relative;
}

.zaman-nokta:nth-child(odd) { flex-direction: row; }
.zaman-nokta:nth-child(even) { flex-direction: row-reverse; }

.zaman-ikon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  background: #fff;
  border: 3px solid var(--pembe-koyu);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(214, 51, 108, .2);
}

.zaman-kart {
  width: calc(50% - 60px);
  background: #fff;
  border-radius: 20px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 12px 32px rgba(214, 51, 108, .12);
  border: 1px solid #ffe0ec;
}

.zaman-kart h3 {
  font-family: var(--font-baslik);
  color: var(--gul);
  margin-bottom: .5rem;
  font-size: 1.3rem;
}

.zaman-kart p { line-height: 1.65; font-size: .98rem; }

/* ═══════════ ÖZELLİKLER ═══════════ */
.ozellikler { background: linear-gradient(180deg, var(--krem), #ffe9f2); }

.ozellik-kartlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
  max-width: 1100px;
  margin: 0 auto;
}

.ozellik-kart {
  flex: 1 1 280px;
  max-width: 340px;
  background: #fff;
  border-radius: 28px;
  padding: 2.4rem 2rem;
  text-align: center;
  box-shadow: 0 14px 36px rgba(214, 51, 108, .12);
  border: 1px solid #ffe0ec;
  transition: transform .35s ease, box-shadow .35s ease;
}

.ozellik-kart:hover {
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: 0 24px 52px rgba(214, 51, 108, .22);
}

.ozellik-ikon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: inline-block;
  animation: sallan 3s ease-in-out infinite;
}

.ozellik-kart h3 {
  font-family: var(--font-baslik);
  font-size: 1.45rem;
  color: var(--bordo);
  margin-bottom: .8rem;
}

.ozellik-kart p { line-height: 1.7; font-size: .98rem; }

/* ═══════════ KOMİK KÖŞE ═══════════ */
.komik {
  background:
    radial-gradient(ellipse at 10% 20%, rgba(255, 214, 232, .8) 0%, transparent 50%),
    linear-gradient(160deg, #fff3c4 0%, #ffe9f2 55%, #ffd9e8 100%);
}

.polaroidler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem;
  max-width: 1150px;
  margin: 0 auto 2.5rem;
}

.polaroid {
  background: #fff;
  padding: 14px 14px 18px;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(90, 58, 72, .22);
  transform: rotate(var(--donme, 0deg));
  transition: transform .4s ease, box-shadow .4s ease, z-index 0s;
  width: min(250px, 80vw);
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.08);
  box-shadow: 0 26px 60px rgba(90, 58, 72, .32);
  z-index: 5;
}

.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}

.polaroid figcaption {
  font-size: .9rem;
  text-align: center;
  padding-top: 12px;
  font-weight: 600;
  color: var(--yazi);
}

.komik-not {
  text-align: center;
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--bordo);
}

/* ═══════════ AZİZ KÖŞESİ ═══════════ */
.aziz { background: linear-gradient(180deg, #ffd9e8, #fce4ef); }

.aziz-icerik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.aziz-foto {
  position: relative;
  width: min(320px, 85vw);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(156, 43, 90, .3);
  transform: rotate(2deg);
  transition: transform .4s ease;
}

.aziz-foto:hover { transform: rotate(0) scale(1.03); }

.aziz-foto img { width: 100%; display: block; }

.aziz-rozet {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .92);
  color: var(--gul);
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.aziz-metin { max-width: 460px; }

.aziz-metin h3 {
  font-family: var(--font-baslik);
  font-size: 1.6rem;
  color: var(--bordo);
  margin-bottom: .8rem;
}

.aziz-metin > p { line-height: 1.7; margin-bottom: 1.2rem; }

.aziz-liste { list-style: none; margin-bottom: 1.4rem; }

.aziz-liste li {
  padding: .45rem 0;
  border-bottom: 1px dashed var(--pembe);
  font-size: .98rem;
}

.aziz-imza {
  font-family: var(--font-el);
  font-size: 1.6rem;
  color: var(--gul);
}

/* ═══════════ YILDIZLAR ═══════════ */
.yildizlar {
  background: var(--mor-gece);
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#yildizCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.yildiz-icerik {
  position: relative;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  padding: 0 1.5rem;
}

.yildiz-metin {
  color: #e8dff5;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  line-height: 1.9;
  margin-bottom: 2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.yildiz-ipucu {
  color: #b8a5e0;
  font-size: .95rem;
  animation: nabiz 2.4s ease-in-out infinite;
}

/* ═══════════ GALERİ ═══════════ */
.galeri { background: var(--krem); }

.galeri-izgara {
  columns: 4 260px;
  column-gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}

.galeri-izgara a {
  display: block;
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(214, 51, 108, .12);
  transition: transform .35s ease, box-shadow .35s ease;
  break-inside: avoid;
}

.galeri-izgara a:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 40px rgba(214, 51, 108, .28);
}

.galeri-izgara img {
  width: 100%;
  display: block;
  background: #ffe4ef;
  min-height: 120px;
}

.galeri-videolar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.galeri-videolar video {
  width: min(420px, 90vw);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(214, 51, 108, .2);
  background: #000;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(26, 16, 53, .94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}

.lightbox.acik { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: none;
  font-size: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s;
  backdrop-filter: blur(4px);
}

.lightbox-btn:hover { background: rgba(255, 255, 255, .28); }

.lightbox-onceki { left: 18px; }
.lightbox-sonraki { right: 18px; }

.lightbox-kapat {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.lightbox-kapat:hover { background: rgba(255, 255, 255, .28); }

/* ═══════════ PASTA ═══════════ */
.pasta-bolum {
  background: linear-gradient(180deg, var(--krem), #ffe4ef);
  text-align: center;
}

.pasta {
  position: relative;
  width: 300px;
  margin: 3.5rem auto 2rem;
}

.pasta-kat {
  margin: 0 auto;
  border-radius: 14px;
  position: relative;
}

.pasta-kat-1 {
  width: 150px;
  height: 62px;
  background: linear-gradient(180deg, #ff9ec4, #e75d92);
  border-radius: 14px 14px 0 0;
}

.pasta-kat-1::after, .pasta-kat-2::after, .pasta-kat-3::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background:
    radial-gradient(circle at 12px 0, #fff8fa 13px, transparent 14px),
    radial-gradient(circle at 40px 0, #fff8fa 15px, transparent 16px),
    radial-gradient(circle at 70px 0, #fff8fa 12px, transparent 13px),
    radial-gradient(circle at 100px 0, #fff8fa 15px, transparent 16px),
    radial-gradient(circle at 130px 0, #fff8fa 13px, transparent 14px),
    radial-gradient(circle at 160px 0, #fff8fa 14px, transparent 15px),
    radial-gradient(circle at 190px 0, #fff8fa 12px, transparent 13px),
    radial-gradient(circle at 220px 0, #fff8fa 15px, transparent 16px),
    radial-gradient(circle at 250px 0, #fff8fa 13px, transparent 14px);
}

.pasta-kat-2 {
  width: 210px;
  height: 68px;
  background: linear-gradient(180deg, #fdc5db, #f08bb4);
}

.pasta-kat-3 {
  width: 270px;
  height: 74px;
  background: linear-gradient(180deg, #ff9ec4, #e75d92);
}

.pasta-tabak {
  width: 300px;
  height: 16px;
  background: linear-gradient(180deg, #fff, #f3d3e0);
  border-radius: 999px;
  margin: 0 auto;
  box-shadow: 0 14px 30px rgba(214, 51, 108, .25);
}

.mumlar {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-bottom: 4px;
}

.mum {
  position: relative;
  width: 34px;
  height: 72px;
  background: repeating-linear-gradient(45deg, #fff 0 6px, #ffb6d1 6px 12px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mum span {
  font-family: var(--font-baslik);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bordo);
}

.alev {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 24px;
  background: radial-gradient(ellipse at 50% 70%, #ffd54d 0%, #ff9d2e 60%, transparent 75%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: alevTitre .35s ease-in-out infinite alternate;
  transition: opacity .5s ease, transform .5s ease;
}

.alev::before {
  content: '';
  position: absolute;
  inset: 25% 30%;
  background: radial-gradient(#fff8e1, #ffd54d);
  border-radius: inherit;
}

.mum.sondu .alev {
  opacity: 0;
  transform: translateX(-50%) translateY(-14px) scale(.3);
}

.mum.sondu::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  width: 4px;
  height: 22px;
  background: linear-gradient(180deg, transparent, #bbb);
  opacity: .8;
  border-radius: 50%;
  animation: duman 1.6s ease-out forwards;
}

.ufle-btn {
  font-family: var(--font-govde);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--pembe-koyu), var(--gul));
  border: none;
  border-radius: 999px;
  padding: .95rem 2.4rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(214, 51, 108, .35);
  transition: transform .3s ease;
}

.ufle-btn:hover { transform: translateY(-3px) scale(1.04); }

.dilek-mesaj {
  margin-top: 1.8rem;
  font-family: var(--font-baslik);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--bordo);
  line-height: 1.8;
  animation: yumusakGiris 1s ease both;
}

/* ═══════════ MEKTUP ═══════════ */
.mektup-bolum { background: #ffe4ef; }

.mektup {
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fffdf7, #fff6ee);
  border-radius: 8px;
  padding: clamp(1.8rem, 5vw, 3.2rem);
  box-shadow: 0 24px 60px rgba(156, 43, 90, .2);
  position: relative;
  line-height: 2;
  font-size: 1.02rem;
}

.mektup::before {
  content: '💌';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.6rem;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

.mektup p { margin-bottom: 1.2rem; }

.mektup-hitap {
  font-family: var(--font-el);
  font-size: 2.2rem;
  color: var(--gul);
}

.mektup-imza {
  font-family: var(--font-el);
  font-size: 1.9rem;
  color: var(--gul);
  text-align: right;
  margin-top: 1.6rem;
}

/* ═══════════ FİNAL ═══════════ */
.final {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 100%, #ff9ec4 0%, transparent 60%),
    linear-gradient(180deg, #ffe4ef, #ffc2d9);
  overflow: hidden;
}

.final-ust {
  font-size: 1.15rem;
  letter-spacing: 2px;
  color: var(--bordo);
  margin-bottom: .6rem;
}

.final-baslik {
  font-family: var(--font-el);
  font-size: clamp(3.4rem, 10vw, 7rem);
  color: var(--gul);
  font-weight: 400;
  margin-bottom: 1rem;
  animation: isikSac 3s ease-in-out infinite;
}

.final-alt { font-size: 1.2rem; margin-bottom: 2.4rem; }

/* ═══════════ MÜZİK KUTUSU ═══════════ */
.muzik-kutu {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .45rem .95rem .45rem .45rem;
  box-shadow: 0 10px 30px rgba(156, 43, 90, .25);
  border: 1px solid #ffd1e3;
}

.muzik-kutu button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--pembe-koyu), var(--gul));
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform .3s;
}

.muzik-kutu button:hover { transform: scale(1.1); }

.muzik-kutu.caliyor button  { animation: don 3s linear infinite; }
.muzik-kutu.bekliyor button { animation: nabiz .9s ease-in-out infinite; opacity: .75; }
.muzik-kutu.bekliyor #muzikAd::after { content: ' — dokun ▶'; color: var(--gul); }

#muzikAd {
  font-size: .82rem;
  font-weight: 600;
  color: var(--bordo);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════ KONFETİ ═══════════ */
#konfetiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1500;
}

/* ═══════════ KALP İZİ ═══════════ */
.kalp-iz {
  position: fixed;
  pointer-events: none;
  z-index: 900;
  font-size: 14px;
  animation: kalpUc 1.1s ease-out forwards;
}

/* ═══════════ ALINTI ŞERİDİ ═══════════ */
.alinti-serit {
  overflow: hidden;
  background: linear-gradient(135deg, var(--pembe-koyu) 0%, var(--gul) 50%, var(--bordo) 100%);
  padding: 1.1rem 0;
  position: relative;
  z-index: 10;
}

.alinti-serit::before,
.alinti-serit::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.alinti-serit::before {
  left: 0;
  background: linear-gradient(to right, var(--pembe-koyu), transparent);
}

.alinti-serit::after {
  right: 0;
  background: linear-gradient(to left, var(--bordo), transparent);
}

.alinti-iz {
  display: flex;
  gap: 0;
  white-space: nowrap;
  animation: seritKay 42s linear infinite;
  will-change: transform;
}

.alinti-iz span {
  display: inline-block;
  padding: 0 3.2rem;
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: clamp(.92rem, 2vw, 1.15rem);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.2);
  position: relative;
}

.alinti-iz span::after {
  content: '·';
  position: absolute;
  right: 0;
  color: rgba(255,255,255,.4);
}

@keyframes seritKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════ ÖZEL ANLAR SLIDER ═══════════ */
.anlar-bolum {
  background: linear-gradient(180deg, #fff0f6, #ffe4ef);
  padding: 5rem 1.5rem 6rem;
  overflow: hidden;
}

.anlar-slider {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(156, 43, 90, .28);
  background: #000;
  aspect-ratio: 4/3;
  touch-action: pan-y;
}

.anlar-slaytlar {
  display: flex;
  height: 100%;
  transition: transform .7s cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}

.anlar-slayt {
  min-width: 100%;
  position: relative;
  overflow: hidden;
}

.anlar-slayt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}

.anlar-slayt.aktif img {
  transform: scale(1.06);
}

.anlar-alt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 2rem 1.6rem;
  background: linear-gradient(to top, rgba(26,16,53,.88) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
}

.anlar-yazi {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
  line-height: 1.55;
  animation: yumusakGiris .6s ease both;
}

.anlar-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s, transform .25s;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anlar-btn:hover {
  background: rgba(255,255,255,.38);
  transform: translateY(-50%) scale(1.1);
}

.anlar-onceki { left: 14px; }
.anlar-sonraki { right: 14px; }

.anlar-noktalar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .55rem;
  z-index: 5;
}

.anlar-nokta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  transition: background .3s, transform .3s;
  padding: 0;
}

.anlar-nokta.aktif {
  background: #fff;
  transform: scale(1.35);
}

@media (max-width: 680px) {
  .anlar-slider { aspect-ratio: 3/4; border-radius: 20px; }
  .anlar-btn { width: 42px; height: 42px; font-size: 1.5rem; }
  .alinti-serit::before,
  .alinti-serit::after { width: 60px; }
}

/* ═══════════ 3D FOTO KÜPİ ═══════════ */
.kup-bolum {
  background: linear-gradient(180deg, #ffe9f2, #ffd1e3);
  text-align: center;
  padding: 5rem 1.5rem 6rem;
}

.kup-sahne {
  perspective: 900px;
  width: 260px;
  height: 260px;
  margin: 2.5rem auto 1.5rem;
  cursor: grab;
}

.kup-sahne:active { cursor: grabbing; }

.kup {
  width: 260px;
  height: 260px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  transition: transform 0s;
  will-change: transform;
}

.kup-yuz {
  position: absolute;
  width: 260px;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  border: 5px solid rgba(255,255,255,.9);
  box-shadow: 0 0 30px rgba(214,51,108,.25);
  backface-visibility: hidden;
}

.kup-yuz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.kup-yuz.on   { transform: translateZ(130px); }
.kup-yuz.arka { transform: rotateY(180deg) translateZ(130px); }
.kup-yuz.sol  { transform: rotateY(-90deg) translateZ(130px); }
.kup-yuz.sag  { transform: rotateY(90deg) translateZ(130px); }
.kup-yuz.ust  { transform: rotateX(90deg) translateZ(130px); }
.kup-yuz.alt  { transform: rotateX(-90deg) translateZ(130px); }

.kup-ipucu {
  color: var(--gul);
  font-size: .95rem;
  font-weight: 600;
  animation: nabiz 2.4s ease-in-out infinite;
  margin-top: .5rem;
}

/* ═══════════ POLAROID DUVARI ═══════════ */
.pduvar-bolum {
  background: linear-gradient(160deg, #fff8e7 0%, #fff0f6 100%);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

.pduvar {
  position: relative;
  width: 100%;
  height: 560px;
  max-width: 1280px;
  margin: 0 auto;
  touch-action: none;
}

.pd-kart {
  position: absolute;
  left: var(--pd-x);
  top: var(--pd-y);
  transform: rotate(var(--pd-r));
  z-index: var(--pd-z);
  background: #fff;
  padding: 12px 12px 14px;
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(90,58,72,.22), 0 2px 6px rgba(0,0,0,.12);
  width: min(190px, 42vw);
  cursor: grab;
  transition: box-shadow .2s, transform .15s;
  user-select: none;
  touch-action: none;
}

.pd-kart:active { cursor: grabbing; }

.pd-kart.surukle {
  box-shadow: 0 22px 50px rgba(90,58,72,.38);
  transform: rotate(calc(var(--pd-r) * .5)) scale(1.05);
  z-index: 100 !important;
  transition: none;
}

.pd-kart img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  pointer-events: none;
}

.pd-kart p {
  text-align: center;
  padding-top: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--yazi);
  pointer-events: none;
}

/* pin iğnesi */
.pd-kart::before {
  content: '📌';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

/* ═══════════ KAZI KAZAN ═══════════ */
.kazi-bolum {
  background: linear-gradient(180deg, #ffe4ef, var(--krem));
  text-align: center;
  padding: 5rem 1.5rem 6rem;
}

.kazi-kart {
  position: relative;
  width: min(360px, 88vw);
  height: min(260px, 55vw);
  margin: 2rem auto 1.5rem;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 54px rgba(156,43,90,.3);
  cursor: crosshair;
}

.kazi-mesaj {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff0f6, #ffd9e8);
  gap: .6rem;
  z-index: 0;
}

.kazi-emoji { font-size: 2.6rem; }

.kazi-yazi {
  font-family: var(--font-baslik);
  font-style: italic;
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  color: var(--bordo);
  line-height: 1.8;
}

#kaziCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
}

.kazi-sur {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-baslik);
  font-size: 1.4rem;
  font-style: italic;
  color: rgba(255,255,255,.7);
  pointer-events: none;
  z-index: 3;
  animation: nabiz 2s ease-in-out infinite;
}

.kazi-sifirla-btn {
  font-family: var(--font-govde);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--pembe-koyu), var(--gul));
  border: none;
  border-radius: 999px;
  padding: .75rem 2rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(214,51,108,.35);
  transition: transform .3s;
  margin-top: .5rem;
}

.kazi-sifirla-btn:hover { transform: translateY(-2px) scale(1.04); }

/* ═══════════ TYPEWRİTER MEKTUP ═══════════ */
.mektup p.tw-gizli { opacity: 0; }
.mektup p.tw-goster { animation: yumusakGiris .8s ease forwards; }

/* ═══════════ ANİMASYONLAR ═══════════ */
@keyframes yumusakGiris {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sallan {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

@keyframes nabiz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes zipla {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes isikSac {
  0%, 100% { text-shadow: 0 0 18px rgba(214, 51, 108, .25); }
  50% { text-shadow: 0 0 42px rgba(214, 51, 108, .55); }
}

@keyframes asagiIn {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: .5; }
}

@keyframes alevTitre {
  from { transform: translateX(-50%) scale(1) rotate(-2deg); }
  to { transform: translateX(-52%) scale(1.08) rotate(2deg); }
}

@keyframes duman {
  from { opacity: .8; transform: translateY(0) scaleY(1); }
  to { opacity: 0; transform: translateY(-26px) scaleY(1.8); }
}

@keyframes don {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes kalpUc {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-46px) scale(1.6); }
}

/* ═══════════ TABLET (max 900px) ═══════════ */
@media (max-width: 900px) {
  .ozellik-kartlar { gap: 1.2rem; }
  .ozellik-kart { flex: 1 1 240px; }

  .aziz-icerik { gap: 2rem; }
  .aziz-metin { max-width: 100%; }

  .polaroidler { gap: 1.4rem; }
  .polaroid { width: min(220px, 70vw); }

  .anlar-slider { aspect-ratio: 3/4; }

  .kup-sahne,
  .kup { width: 220px; height: 220px; }
  .kup-yuz { width: 220px; height: 220px; }
  .kup-yuz.on   { transform: translateZ(110px); }
  .kup-yuz.arka { transform: rotateY(180deg) translateZ(110px); }
  .kup-yuz.sol  { transform: rotateY(-90deg) translateZ(110px); }
  .kup-yuz.sag  { transform: rotateY(90deg) translateZ(110px); }
  .kup-yuz.ust  { transform: rotateX(90deg) translateZ(110px); }
  .kup-yuz.alt  { transform: rotateX(-90deg) translateZ(110px); }

  .pduvar { height: 480px; }
}

/* ═══════════ MOBİL (max 680px) ═══════════ */
@media (max-width: 680px) {

  /* Genel */
  section { padding: 3.5rem 1rem; }

  .bolum-baslik { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .bolum-alt { font-size: 1rem; margin-bottom: 2rem; }

  /* Giriş */
  .giris-baslik { font-size: clamp(1.9rem, 8vw, 3rem); }
  .giris-alt { font-size: .95rem; }
  .giris-btn { font-size: 1rem; padding: .85rem 2.2rem; }

  /* Hero */
  .hero { padding: 2rem 1rem 3rem; min-height: 100svh; }
  .hero-ust { font-size: .85rem; letter-spacing: 2px; }
  .hero-baslik { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-isim { font-size: clamp(3rem, 12vw, 5rem); }
  .yas-rakam {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    width: clamp(3.6rem, 13vw, 5rem);
    height: clamp(3.6rem, 13vw, 5rem);
    line-height: clamp(3.6rem, 13vw, 5rem);
    border-radius: 16px;
  }
  .hero-alt { font-size: 1rem; }
  .hero-foto-cerceve { width: min(260px, 80vw); }

  /* Sayılar */
  .sayilar { gap: 1rem; padding: 3rem 1rem; }
  .sayi-kart { min-width: 140px; padding: 1.4rem 1.6rem; border-radius: 18px; }
  .sayi { font-size: 2.4rem; }
  .sayi-etiket { font-size: .85rem; }

  /* Alıntı Şeridi */
  .alinti-iz span { font-size: .82rem; padding: 0 1.8rem; }
  .alinti-serit::before,
  .alinti-serit::after { width: 50px; }

  /* Hikaye / Zaman Çizgisi */
  .zaman-cizgisi::before { left: 22px; }
  .zaman-nokta,
  .zaman-nokta:nth-child(even) {
    flex-direction: row;
    padding-left: 58px;
  }
  .zaman-ikon {
    left: 22px;
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
  }
  .zaman-kart {
    width: 100%;
    padding: 1.2rem 1.3rem;
    border-radius: 16px;
  }
  .zaman-kart h3 { font-size: 1.1rem; }
  .zaman-kart p { font-size: .9rem; }

  /* Sen Böylesin */
  .ozellikler { padding: 3.5rem 1rem; }
  .ozellik-kartlar { gap: 1rem; }
  .ozellik-kart {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 1.8rem 1.5rem;
    border-radius: 20px;
  }
  .ozellik-ikon { font-size: 2.4rem; }
  .ozellik-kart h3 { font-size: 1.25rem; }
  .ozellik-kart p { font-size: .92rem; }

  /* 3D Küp */
  .kup-bolum { padding: 3.5rem 1rem 4rem; }
  .kup-sahne,
  .kup { width: 200px; height: 200px; }
  .kup-yuz { width: 200px; height: 200px; }
  .kup-yuz.on   { transform: translateZ(100px); }
  .kup-yuz.arka { transform: rotateY(180deg) translateZ(100px); }
  .kup-yuz.sol  { transform: rotateY(-90deg) translateZ(100px); }
  .kup-yuz.sag  { transform: rotateY(90deg) translateZ(100px); }
  .kup-yuz.ust  { transform: rotateX(90deg) translateZ(100px); }
  .kup-yuz.alt  { transform: rotateX(-90deg) translateZ(100px); }
  .kup-ipucu { font-size: .88rem; }

  /* Komik Köşe — Polaroidler */
  .komik { padding: 3.5rem 1rem; }
  .polaroidler { gap: 1rem; }
  .polaroid {
    width: min(180px, 42vw);
    padding: 10px 10px 14px;
  }
  .polaroid figcaption { font-size: .8rem; padding-top: 8px; }

  /* Aziz Köşesi */
  .aziz { padding: 3.5rem 1rem; }
  .aziz-icerik { gap: 1.6rem; flex-direction: column; align-items: center; }
  .aziz-foto { width: min(280px, 85vw); }
  .aziz-metin { max-width: 100%; text-align: center; }
  .aziz-metin h3 { font-size: 1.35rem; }
  .aziz-liste { text-align: left; }
  .aziz-imza { font-size: 1.4rem; }

  /* Yıldızlar */
  .yildizlar { min-height: 80svh; padding: 3rem 1rem; }
  .yildiz-metin { font-size: 1rem; line-height: 1.8; }
  .yildiz-ipucu { font-size: .85rem; }

  /* Galeri */
  .galeri { padding: 3.5rem 1rem; }
  .galeri-izgara { columns: 2 130px; column-gap: 10px; }
  .galeri-izgara a { margin-bottom: 10px; border-radius: 10px; }
  .galeri-videolar video {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  /* Lightbox */
  .lightbox-btn { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-onceki { left: 8px; }
  .lightbox-sonraki { right: 8px; }

  /* Polaroid Duvarı — mobilde sabit boyut yerine ızgara */
  .pduvar-bolum { padding: 3.5rem 1rem 4rem; }
  .pduvar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    height: auto;
    padding: 1rem;
  }
  .pd-kart {
    position: static !important;
    left: unset !important;
    top: unset !important;
    transform: rotate(var(--pd-r)) !important;
    width: 100% !important;
    cursor: default;
    transition: box-shadow .3s, transform .3s;
  }
  .pd-kart:active { transform: scale(.97) !important; }
  .pd-kart.surukle {
    transform: scale(1.04) !important;
    z-index: 5 !important;
  }

  /* Pasta */
  .pasta-bolum { padding: 3.5rem 1rem; }
  .pasta { width: 260px; }
  .pasta-tabak { width: 260px; }
  .pasta-kat-1 { width: 130px; }
  .pasta-kat-2 { width: 180px; }
  .pasta-kat-3 { width: 230px; }

  /* Kazı Kazan */
  .kazi-bolum { padding: 3.5rem 1rem; }
  .kazi-kart {
    width: 90vw;
    height: 54vw;
    min-height: 200px;
  }
  .kazi-yazi { font-size: clamp(.92rem, 3.5vw, 1.1rem); }

  /* Özel Anlar Slider */
  .anlar-bolum { padding: 3.5rem 0 4rem; }
  .anlar-slider { border-radius: 0; aspect-ratio: 3/4; }
  .anlar-yazi { font-size: .95rem; }
  .anlar-btn { width: 40px; height: 40px; font-size: 1.4rem; }
  .anlar-onceki { left: 8px; }
  .anlar-sonraki { right: 8px; }

  /* Mektup */
  .mektup-bolum { padding: 3.5rem 1rem; }
  .mektup { padding: 1.6rem 1.3rem 1.6rem; border-radius: 6px; font-size: .95rem; }
  .mektup-hitap { font-size: 1.8rem; }
  .mektup-imza { font-size: 1.5rem; }

  /* Final */
  .final { min-height: 80svh; padding: 3rem 1rem; }
  .final-baslik { font-size: clamp(2.8rem, 12vw, 5rem); }
  .final-alt { font-size: 1rem; }

  /* Müzik kutusu */
  .muzik-kutu {
    bottom: 14px;
    right: 14px;
    padding: .35rem .7rem .35rem .35rem;
  }
  .muzik-kutu button { width: 38px; height: 38px; font-size: 1rem; }
  #muzikAd { font-size: .75rem; max-width: 130px; }
}

/* ═══════════ KÜÇÜK MOBİL (max 400px) ═══════════ */
@media (max-width: 400px) {
  .pduvar { grid-template-columns: 1fr; }
  .pd-kart { transform: rotate(0deg) !important; }
  .polaroid { width: min(160px, 44vw); }
  .aziz-foto { width: min(240px, 90vw); }
  .kup-sahne,
  .kup { width: 175px; height: 175px; }
  .kup-yuz { width: 175px; height: 175px; }
  .kup-yuz.on   { transform: translateZ(87px); }
  .kup-yuz.arka { transform: rotateY(180deg) translateZ(87px); }
  .kup-yuz.sol  { transform: rotateY(-90deg) translateZ(87px); }
  .kup-yuz.sag  { transform: rotateY(90deg) translateZ(87px); }
  .kup-yuz.ust  { transform: rotateX(90deg) translateZ(87px); }
  .kup-yuz.alt  { transform: rotateX(-90deg) translateZ(87px); }
}