/* Kairos — ortak stiller (efektler). Düzen/boşluk/tipografi Tailwind'de. */

:root {
  --kagit: #F6F0E6;
  --kagit-acik: #FBF7EF;
  --kagit-koyu: #EADFCD;
  --murekkep: #3B2F2A;
  --murekkep-soluk: #7A6A61;
  --kirmizi: #B23A48;
  --kirmizi-koyu: #8E2A37;
  --toz: #E9CFCB;
  --polaroid: #FBF9F4;
  --golge: 59, 47, 42;
  --yavas: cubic-bezier(.22, .61, .36, 1); /* ease-out */
}

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--kagit);
  background-image: radial-gradient(120% 80% at 50% 0%, rgba(255, 252, 245, .7), transparent 60%),
                    radial-gradient(140% 100% at 50% 110%, rgba(var(--golge), .06), transparent 60%);
  background-attachment: fixed;
  color: var(--murekkep);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Kağıt / grain dokusu */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .16 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--toz); color: var(--murekkep); }

:focus-visible {
  outline: 1.5px solid var(--kirmizi);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Yavaş belirme ---------- */
.belir {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms var(--yavas), transform 800ms var(--yavas);
}
.belir.gorundu { opacity: 1; transform: none; }

/* ---------- Kapak ---------- */
.kapak-baslik {
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .9;
}
.yunanca { letter-spacing: .32em; }
.ayrac {
  width: 2.5rem;
  height: 1px;
  background: var(--kirmizi);
  opacity: .55;
}

/* ---------- Zarf ---------- */
.zarf {
  display: block;
  width: min(100%, 300px);
  margin-inline: auto;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
}
.zarf-govde {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  perspective: 900px;
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(var(--golge), .06),
    0 4px 10px rgba(var(--golge), .07),
    0 16px 32px -10px rgba(var(--golge), .16);
  transition: transform 600ms var(--yavas), box-shadow 600ms var(--yavas);
}
.zarf:hover .zarf-govde,
.zarf:focus-visible .zarf-govde { transform: translateY(-2px); }

.zarf-ic, .zarf-mektup, .zarf-cep, .zarf-kapak { position: absolute; }
.zarf-ic {
  inset: 0;
  z-index: 1;
  border-radius: 3px;
  background: linear-gradient(180deg, #D9C8AE, #E4D5BE);
}
.zarf-mektup {
  left: 7%; right: 7%; top: 7%; bottom: 5%;
  z-index: 2;
  background: var(--kagit-acik);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(var(--golge), .12);
  display: flex;
  justify-content: center;
  padding-top: 7%;
  transition: transform 700ms var(--yavas) 300ms;
}
.zarf-cep {
  inset: 0;
  z-index: 3;
  border-radius: 3px;
  background: linear-gradient(170deg, #EDE2D0, #E6D8C2);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.zarf-cep::before { /* alt kapak (katlanma çizgileri) */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #E9DCC7, #EFE5D5);
  clip-path: polygon(0 100%, 50% 47%, 100% 100%);
  filter: drop-shadow(0 -1px 0 rgba(var(--golge), .06));
}
.zarf-kapak {
  inset: 0 0 auto 0;
  height: 60%;
  z-index: 4;
  transform-origin: 50% 0;
  filter: drop-shadow(0 2px 2px rgba(var(--golge), .12));
  transition: transform 750ms var(--yavas), z-index 0s linear 375ms;
}
.zarf-kapak::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #EFE6D6, #E3D4BC);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Mum mühür */
.muhur {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 5;
  pointer-events: none;
}
.muhur-yarim {
  position: absolute;
  inset: 0;
  transition: transform 650ms var(--yavas), opacity 650ms var(--yavas);
  filter: drop-shadow(0 1px 1px rgba(80, 20, 28, .35)) drop-shadow(0 3px 4px rgba(var(--golge), .18));
}
.muhur-yarim svg { width: 100%; height: 100%; display: block; }
.muhur-sol { clip-path: polygon(0 0, 53% 0, 47% 22%, 56% 41%, 46% 61%, 54% 80%, 49% 100%, 0 100%); }
.muhur-sag { clip-path: polygon(53% 0, 100% 0, 100% 100%, 49% 100%, 54% 80%, 46% 61%, 56% 41%, 47% 22%); }

.muhur-tam { z-index: 1; transition: none; }
.zarf.kiriliyor .muhur-tam { opacity: 0; }
.zarf.kiriliyor .muhur-sol { transform: translate(-7px, 5px) rotate(-14deg); opacity: 0; }
.zarf.kiriliyor .muhur-sag { transform: translate(8px, 7px) rotate(16deg); opacity: 0; }
.zarf.aciliyor .zarf-kapak { transform: rotateX(180deg); z-index: 1; }
.zarf.aciliyor .zarf-mektup { transform: translateY(-30%); }

/* Henüz gelmemiş an */
.zarf.soluk { cursor: default; opacity: .5; filter: saturate(.5); }
.zarf.soluk:hover .zarf-govde { transform: none; }

/* ---------- Karşılama kağıdı ---------- */
.karsilama-kagit {
  position: relative;
  background: var(--kagit-acik);
  border-radius: 2px;
  transform: rotate(-.8deg);
  box-shadow:
    0 1px 1px rgba(var(--golge), .05),
    0 6px 14px rgba(var(--golge), .07),
    0 24px 48px -16px rgba(var(--golge), .18);
  animation: zarftan-cik 1100ms var(--yavas) both;
}
.karsilama-kagit::before { /* katlama izi */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34%;
  height: 10px;
  background: linear-gradient(180deg, rgba(var(--golge), .045), rgba(255, 255, 255, .35) 50%, transparent);
  pointer-events: none;
}
@keyframes zarftan-cik {
  from { opacity: 0; transform: translateY(40px) rotate(-.8deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-.8deg); }
}

/* El yazısıyla yazılıyormuş gibi: her kelime soldan sağa mürekkeple belirir */
.el-yazisi-kelime {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: yaz var(--sure, 600ms) cubic-bezier(.45, .05, .55, .95) var(--gecikme, 0ms) forwards;
}
@keyframes yaz {
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

.kaydir-isareti {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--murekkep-soluk));
  animation: nefes 2600ms ease-in-out infinite;
}
@keyframes nefes { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }

/* ---------- Kırmızı ip zaman tüneli ---------- */
.tunel { position: relative; }
.ip-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 60px), transparent);
          mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 calc(100% - 60px), transparent);
}
.ip-svg path {
  fill: none;
  stroke: var(--kirmizi);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 1.5px 1px rgba(var(--golge), .18));
}

.kare {
  position: relative;
  list-style: none;
  padding-left: 60px; /* mobil: ip solda */
}
.kare + .kare { margin-top: 72px; }

.kare-egim {
  position: relative;
  width: min(100%, 260px);
  transform: rotate(var(--egim, 0deg));
}

/* Ahşap mandal */
.mandal {
  position: absolute;
  top: -22px;
  left: 14px;
  width: 13px;
  height: 46px;
  z-index: 3;
  transform: rotate(var(--mandal-egim, -4deg));
  border-radius: 3px 3px 2px 2px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(80, 52, 30, .35) 47%, rgba(80, 52, 30, .35) 53%, transparent 53%),
    repeating-linear-gradient(180deg, rgba(120, 80, 45, .0) 0 5px, rgba(120, 80, 45, .12) 5px 6px),
    linear-gradient(90deg, #C99B6B, #DDB688 40%, #D2A574 60%, #B98A5C);
  box-shadow:
    0 1px 1px rgba(var(--golge), .25),
    0 4px 6px -2px rgba(var(--golge), .25);
  opacity: 0;
  transition: opacity 600ms var(--yavas);
}
.mandal::after { /* metal yay */
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  top: 21px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #CFC8BE, #8E877E);
  box-shadow: 0 1px 1px rgba(var(--golge), .3);
}
.kare.gorundu .mandal { opacity: 1; }

.kare-belir {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--yavas), transform 800ms var(--yavas);
}
.kare.gorundu .kare-belir { opacity: 1; transform: none; }

/* 3D çevrilen kart */
.kare-kart {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 88 / 107; /* gerçek polaroid oranı */
  perspective: 1400px;
  cursor: pointer;
  border-radius: 2px;
}
.kare-ic {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 800ms var(--yavas);
}
.kare-kart.cevrildi .kare-ic { transform: rotateY(180deg); }
.kare-yuz {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 2px;
  box-shadow:
    0 1px 1px rgba(var(--golge), .08),
    0 3px 6px rgba(var(--golge), .07),
    0 12px 22px -4px rgba(var(--golge), .12),
    0 28px 44px -18px rgba(var(--golge), .22);
}

/* Polaroid ön yüz */
.polaroid {
  background: linear-gradient(170deg, #FDFBF7, var(--polaroid) 60%, #F4F0E8);
  padding: 5.7% 5.7% 0;
  display: flex;
  flex-direction: column;
}
.polaroid-foto {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #D9CDBE;
}
.polaroid-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.03) sepia(.06);
}
.polaroid-foto::after { /* hafif vinyet + iç gölge */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--golge), .08), inset 0 0 40px rgba(var(--golge), .18);
  pointer-events: none;
}
.polaroid-alt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  text-align: center;
}

/* Kırpmadan sığdırılan fotoğraf (geniş ekran görüntüleri vb.) */
.polaroid-foto.sigdir { background: #FEFDFB; }
.polaroid-foto.sigdir img { object-fit: contain; filter: none; }
.polaroid-foto.sigdir::after { box-shadow: inset 0 0 0 1px rgba(var(--golge), .06), inset 0 0 24px rgba(var(--golge), .06); }

/* Instax Mini: dikey kart, dikey fotoğraf (54 × 86 mm, görüntü 46 × 62 mm) */
.kare.mini .kare-egim { width: min(100%, 210px); }
.kare.mini .kare-kart { aspect-ratio: 54 / 86; }
.kare.mini .polaroid { padding: 11% 7.4% 0; }
.kare.mini .polaroid-foto { aspect-ratio: 46 / 62; }

/* Turuncu dijital tarih damgası */
.tarih-damgasi {
  position: absolute;
  right: 7%;
  bottom: 5.5%;
  z-index: 1;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .12em;
  color: #F7934C;
  opacity: .92;
  text-shadow: 0 0 1px rgba(255, 140, 60, .9), 0 0 3px rgba(240, 110, 40, .55);
  white-space: pre;
}

/* Defter kağıdı arka yüz */
.defter {
  transform: rotateY(180deg);
  --satir: 26px;
  background-color: #FAF6EE;
  background-image:
    linear-gradient(90deg, transparent 30px, rgba(178, 58, 72, .38) 30px, rgba(178, 58, 72, .38) 31px, transparent 31px),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--satir) - 1px), rgba(112, 138, 165, .30) calc(var(--satir) - 1px), rgba(112, 138, 165, .30) var(--satir));
  background-position: 0 0, 0 14px;
  padding: 14px 16px 0 40px;
  overflow: hidden;
}
.defter-yazi, .defter-tarih { line-height: var(--satir); }
.karalama-kalp {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 30px;
  height: 28px;
  transform: rotate(-10deg);
  color: var(--kirmizi);
  opacity: .85;
}

/* ---------- Kapanış ---------- */
.mektup {
  position: relative;
  background: var(--kagit-acik);
  transform: rotate(.6deg);
  border-radius: 2px;
  box-shadow:
    0 1px 1px rgba(var(--golge), .05),
    0 6px 14px rgba(var(--golge), .06),
    0 20px 40px -18px rgba(var(--golge), .2);
}

.bos-polaroid {
  position: relative;
  width: min(100%, 230px);
  aspect-ratio: 88 / 107;
  margin-inline: auto;
  transform: rotate(-2.2deg);
  border-radius: 2px;
  box-shadow:
    0 1px 1px rgba(var(--golge), .08),
    0 3px 6px rgba(var(--golge), .07),
    0 12px 22px -4px rgba(var(--golge), .12),
    0 28px 44px -18px rgba(var(--golge), .2);
}
.bos-polaroid .polaroid-foto {
  background: linear-gradient(160deg, #E7DED0, #DCCFBD);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Yarı saydam washi bant */
.washi {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%) rotate(3deg);
  z-index: 2;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px),
    rgba(233, 207, 203, .72);
  box-shadow: 0 1px 2px rgba(var(--golge), .12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
}

/* ---------- Plak (müzik) ---------- */
.plak {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  width: 52px;
  height: 52px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle, #F3E9DA 0 2px, var(--kirmizi) 2.5px 10px, transparent 10.5px),
    repeating-radial-gradient(circle, #2E2420 0 1.5px, #3A2E29 1.5px 3px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 2px 4px rgba(var(--golge), .2),
    0 10px 20px -6px rgba(var(--golge), .35);
  animation: don 5s linear infinite;
  animation-play-state: paused;
}
.plak::after { /* ışık yansıması */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 12%, rgba(255, 240, 225, .1) 18%, transparent 26% 62%, rgba(255, 240, 225, .07) 68%, transparent 76%);
}
.plak.caliyor { animation-play-state: running; }
.plak-halka {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.plak.nabiz .plak-halka { animation: nabiz 1400ms var(--yavas) 1; }
@keyframes nabiz {
  0%   { opacity: .55; box-shadow: 0 0 0 0 rgba(178, 58, 72, .45); }
  100% { opacity: 0;   box-shadow: 0 0 0 14px rgba(178, 58, 72, 0); }
}
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Geniş ekran: kartlar ipin iki yanında ---------- */
@media (min-width: 768px) {
  .kare { padding-left: 0; width: 50%; }
  .kare + .kare { margin-top: -40px; }
  .kare-egim { width: min(100%, 290px); }
  .kare.mini .kare-egim { width: min(100%, 236px); }
  .kare.sol { padding-right: 64px; }
  .kare.sol .kare-egim { margin-left: auto; }
  .kare.sag { margin-left: 50%; padding-left: 64px; }
  .kare.sol .mandal { left: auto; right: 14px; }
  .tarih-damgasi { font-size: 14px; }
}

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  .belir, .kare-belir, .mandal, .karsilama-kagit, .zarf-govde, .muhur-yarim, .zarf-kapak, .zarf-mektup {
    transition: none !important;
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .karsilama-kagit { transform: rotate(-.8deg) !important; }
  .belir, .kare-belir { opacity: 1 !important; transform: none !important; }
  .mandal { opacity: 1 !important; transform: rotate(var(--mandal-egim, -4deg)) !important; }
  .el-yazisi-kelime { animation: none !important; -webkit-mask-image: none; mask-image: none; }
  .kare-ic { transition-duration: 1ms; }
  .kaydir-isareti { animation: none; opacity: .5; }
  .plak.nabiz .plak-halka { animation: none; }
}