/* =========================================
   FONTLAR
========================================= */

/* Kullanıcının bilgisayarında yüklü olan gerçek fontları tercih et. */
@font-face {
  font-family: "Edwardian Davetiye";
  src:
    local("Edwardian Script ITC Regular"),
    local("Edwardian Script ITC");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Baskerville Davetiye";
  src:
    local("Baskerville Pro Regular"),
    local("Baskerville Pro"),
    local("Baskerville"),
    local("Baskerville Old Face");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Baskerville Davetiye";
  src:
    local("Baskerville Pro Italic"),
    local("Baskerville Italic"),
    local("Baskerville Old Face Italic");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}


/* =========================================
   RENKLER
========================================= */

:root {
--bordo: #580018;
  --bordo-koyu: #510016;
  --bordo-acik: #8b1537;
  --krem: #f2e2bd;
  --krem-acik: #fff8e9;
  --altin: #aa8752;
  --yazi: #5a0913;
  --yazi-acik: #6b1b22;
}


/* =========================================
   GENEL
========================================= */

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background-color: var(--bordo);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;

  color: var(--krem);
  background-color: var(--bordo);

  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 300;
}

body.sayfa-kilitli {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}


/* =========================================
   ZARF AÇILIŞ EKRANI
========================================= */

.acilis-ekrani {
  position: fixed;
  z-index: 200;
  inset: 0;

  display: grid;
  place-items: center;

  min-height: 100vh;
  min-height: 100svh;
  padding: 24px 16px;

  overflow: hidden;
  background-color: var(--bordo);

  transition:
    opacity 0.75s ease,
    visibility 0.75s ease;
}

.acilis-ekrani.gizleniyor {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.zarf-alani {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;

  width: min(92vw, 540px);
  padding: 0;

  color: var(--krem);
  background: transparent;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.zarf-alani:focus-visible {
  outline: 2px solid var(--krem);
  outline-offset: 12px;
}

.zarf {
  position: relative;
  display: block;

  width: min(86vw, 470px);
  aspect-ratio: 1.48 / 1;

  perspective: 1200px;
  filter: drop-shadow(0 28px 25px rgba(35, 0, 10, 0.34));
}

.zarf-arkasi,
.zarf-cebi,
.zarf-kapagi {
  position: absolute;
  inset: 0;
  display: block;
}

.zarf-arkasi {
  z-index: 1;

  background-color: var(--bordo-acik);
  border: 1px solid rgba(255, 239, 207, 0.4);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.035);
}

.zarf-cebi {
  z-index: 4;

  background:
    linear-gradient(
      30deg,
      transparent 49.5%,
      rgba(255, 244, 217, 0.14) 50%,
      transparent 50.5%
    ),
    linear-gradient(
      -30deg,
      transparent 49.5%,
      rgba(255, 244, 217, 0.14) 50%,
      transparent 50.5%
    ),
    linear-gradient(155deg, var(--bordo-acik), var(--bordo-koyu));

  border: 1px solid rgba(255, 239, 205, 0.34);

  clip-path: polygon(
    0 26%,
    50% 64%,
    100% 26%,
    100% 100%,
    0 100%
  );
}

.zarf-kapagi {
  z-index: 7;

  height: 56%;

  transform-origin: 50% 0;
  transform-style: preserve-3d;

  background-color: var(--bordo-acik);
  border-top: 1px solid rgba(255, 242, 214, 0.42);

  clip-path: polygon(0 0, 100% 0, 50% 100%);

   transition: transform 0.85s cubic-bezier(0.55, 0.02, 0.31, 0.98);

}

.muhur {
  position: absolute;
  z-index: 9;
  top: 39%;
  left: 50%;

  display: grid;
  place-items: center;

  width: 72px;
  height: 72px;

  color: #f2dca6;
  background-color: #8d1d3c;

  border: 2px solid rgba(255, 225, 155, 0.62);
  border-radius: 50%;

  box-shadow:
    0 6px 15px rgba(35, 0, 10, 0.32),
    inset 0 0 0 5px rgba(79, 0, 21, 0.22);

  font-family: "Baskerville Davetiye", "Baskervville", Georgia, serif;
  font-size: 21px;
  font-weight: 400;

  transform: translate(-50%, -50%);

  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}

.muhur i {
  margin: 0 2px;
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
}

/* Küçük kart da gerçek dantel görselinin 2:3 oranını korur. */
.mini-davetiye {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8%;

  display: block;

  width: 64%;
  aspect-ratio: 2 / 3;

  background: url("dantel0608.png") center / contain no-repeat;

  opacity: 0;
  visibility: hidden;

  transform:
    translateX(-50%)
    translateY(24%);

  filter: drop-shadow(0 13px 16px rgba(44, 0, 12, 0.27));

  transition:
    transform 1.15s cubic-bezier(0.2, 0.76, 0.2, 1) 0.35s,
    opacity 0.4s ease 0.25s,
    visibility 0s linear 0.25s;
}

.acilis-yazisi {
  min-height: 18px;

  color: var(--krem);

  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;

  transition: opacity 0.3s ease;
}

.acilis-yazisi.yazi-gizli {
  opacity: 0;
}

.zarf-alani.acik .zarf-kapagi {
  z-index: 2;
  transform: rotateX(180deg);
}

.zarf-alani.acik .muhur {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
}

.zarf-alani.acik .mini-davetiye {
  z-index: 3;

  opacity: 1;
  visibility: visible;

  transform:
    translateX(-50%)
    translateY(-53%);
}

/* =========================================
   ANA DAVETİYE ALANI
========================================= */

.site-icerigi {
  display: none;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  opacity: 0;
  background-color: var(--bordo);
}

.site-icerigi.gorunur {
  display: block;
  animation: siteGiris 0.75s ease forwards;
}

@keyframes siteGiris {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.davetiye-sahne {
  display: flex;
  justify-content: center; /* yatay ortalama */
  align-items: center;     /* dikey ortalama */

  width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;

  padding: clamp(24px, 6vh, 72px) 12px;

  overflow: visible;
  background-color: var(--bordo);
}

/*
  KRİTİK KISIM:
  - Görselin gerçek oranı 1024 × 1536, yani 2:3.
  - Kart aynı oranı korur.
  - İçerik kartın ölçüsünü değiştiremez.
  - object-fit: contain görseli kesmez veya esnetmez.
*/
.dantel-kart {
  position: relative;
  container-type: inline-size;

  flex: 0 0 auto;
  width: min(614px, calc(100vw - 24px));
  aspect-ratio: 2 / 3;

  overflow: hidden;
  filter: drop-shadow(0 28px 30px rgba(35, 0, 10, 0.38));
}

.dantel-gorsel {
  position: absolute;
  z-index: 1;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: contain;
  object-position: center;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* İçerik yalnızca görselin düz krem alanına yerleşir. */
.davetiye-icerik {
  position: absolute;
  z-index: 2;

  top: 29cqw;
  left: 13cqw;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 74cqw;
  height: 101cqw;

  /*
     ANA ARALIK KONTROLLERİ
     Her değeri ayrı ayrı değiştirebilirsin.
     cqw kullandığımız için aralıklar kartla beraber mobilde de ölçeklenir.
  */
  --aralik-isim-aile: 5.2cqw;
  --aralik-aile-metin: 5.2cqw;
  --aralik-metin-tarih: 5.2cqw;
  --aralik-tarih-mekan: 5.2cqw;
  --aralik-mekan-buton: 5.2cqw;
  --aralik-mekan-adres: 1.7cqw;

  color: var(--yazi);
  text-align: center;
}

/* Dilan & Uğur */
.isimler {
  display: flex;
  align-items: baseline;
  justify-content: center;

  width: 100%;
  margin: 0;

  color: var(--yazi);

  font-family:
    "Edwardian Davetiye",
    "Edwardian Script ITC",
    "Italianno",
    cursive;
  font-size: 10.6cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 0.9;
  white-space: nowrap;
}

.isimler span,
.isimler em {
  display: inline-block;
  margin: 0;
  font-style: normal;
  font-weight: 400;
}

.isimler em {
  font-size: 7.2cqw;
  line-height: 1;
}

/* Aile isimleri */
.aileler {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 6cqw;

  width: 72cqw;
  margin: var(--aralik-isim-aile) 0 0;
  padding: 0;

  color: var(--yazi);

  font-family: "berthold-baskerville-pro", "Baskerville Davetiye", "Baskervville", Georgia, serif;
  font-size: 3.55cqw;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  font-synthesis: none;
}

.aile {
  min-width: 0;
  text-align: center;
}

.aileler p,
.aile-isimleri,
.aile-baslik {
  margin: 0;
}

.aile-isimleri {
  overflow-wrap: anywhere;
}

/* Davet cümlesi */
.davet-metni {
  width: 72cqw;
  margin: var(--aralik-aile-metin) 0 0;

  color: var(--yazi);

  font-size: 3.75cqw;
  line-height: 1.38;
}

/* Tarih */
.tarih-saat {
  margin: var(--aralik-metin-tarih) 0 0;

  color: var(--yazi);

  font-size: 4cqw;
  line-height: 1.2;
}

/* Mekan */
.mekan {
  margin: var(--aralik-tarih-mekan) 0 0;
}

.mekan-adi {
  margin: 0;
  color: var(--yazi);
  font-size: 3.65cqw;
  line-height: 1.22;
}

.mekan-adresi {
  margin: var(--aralik-mekan-adres) 0 0;
  color: var(--yazi);
  font-size: 2.7cqw;
  line-height: 1.28;
}

/* Butonlar */
.butonlar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;

  width: 100%;
  margin: var(--aralik-mekan-buton) 0 0;
}

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 23cqw;
  min-height: 6.8cqw;
  padding: 1.7cqw 1.2cqw;

  color: var(--krem-acik);
  background-color: var(--bordo);

  border: 1px solid var(--bordo);
  border-radius: 0;

  cursor: pointer;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(7.5px, 1.55cqw, 9.5px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

.buton:hover {
  color: var(--bordo);
  background-color: transparent;
  transform: translateY(-2px);
}

.buton:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 4px;
}

.buton-cerceveli {
  color: var(--bordo);
  background-color: transparent;
}

.buton-cerceveli:hover {
  color: var(--krem-acik);
  background-color: var(--bordo);
}

/* Kart zaten viewport'a göre küçülüyor; cqw ölçüleri tüm metin ve aralıkları birlikte ölçekler. */
@media (max-width: 637px) {
  .davetiye-icerik {
    /* Telefonda aynı görsel ritmi koru. İstersen sadece bu değerleri değiştir. */
    --aralik-isim-aile: 5.2cqw;
    --aralik-aile-metin: 5.2cqw;
    --aralik-metin-tarih: 5.2cqw;
    --aralik-tarih-mekan: 5.2cqw;
    --aralik-mekan-buton: 5.2cqw;
  }
  .muhur {
  width: 64px;
  height: 64px;
  padding-bottom: 3px;
  font-size: 19px;
  line-height: 1;
}

  .isimler {
    font-size: 11cqw;
  }

  .aileler {
    column-gap: 4.5cqw;
    font-size: 3.7cqw;
  }

  .davet-metni {
    font-size: 3.9cqw;
  }

  .tarih-saat {
    font-size: 4.15cqw;
  }

  .mekan-adi {
    font-size: 3.8cqw;
  }

  .mekan-adresi {
    font-size: 2.85cqw;
  }

  .butonlar {
    gap: 2cqw;
  }

  .buton {
    width: 24.5cqw;
    min-height: 7.2cqw;
    padding: 1.7cqw 1cqw;
    font-size: clamp(7.5px, 1.8cqw, 9px);
    letter-spacing: 0.1em;
  }
}


/* =========================================
   TELEFON
========================================= */

@media (max-width: 637px) {
  html,
  body,
  .site-icerigi,
  .davetiye-sahne {
    width: 100%;
    min-width: 0;
  }

  body:not(.sayfa-kilitli) {
    overflow-x: hidden;
  }

  .site-icerigi {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .davetiye-sahne {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding-top: max(44px, env(safe-area-inset-top));
    padding-right: 12px;
    padding-bottom: max(44px, env(safe-area-inset-bottom));
    padding-left: 12px;
  }

  .dantel-kart {
    flex: 0 0 auto;
    width: min(614px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .zarf-alani {
    gap: 28px;
  }

  .zarf {
    width: min(90vw, 470px);
  }

  .muhur {
    width: 64px;
    height: 64px;
    font-size: 19px;
  }

  .acilis-yazisi {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
}


/* =========================================
   HAREKET AZALTMA
========================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Photoshop'taki Berthold Baskerville Pro */
.aileler,
.davet-metni,
.tarih-saat,
.mekan-adi,
.mekan-adresi {
  font-family: "berthold-baskerville-pro", serif;
  font-weight: 400;
  font-style: italic;
  font-synthesis: none;
}

/* Kapak açılırken tamamen arkaya geçsin */
.zarf-alani.acik .zarf-kapagi {
  z-index: 0 !important;
  transform: rotateX(180deg);
}

.zarf-arkasi {
  z-index: -100;
}

.mini-davetiye,
.zarf-alani.acik .mini-davetiye {
  z-index: 1000 !important;
}

.zarf-cebi {
  z-index: 4;
}

.muhur {
  z-index: 9;
}