/*cake.css*/
/* ============================
   🎂 CARTOON REALISTIC CAKE
============================ */

.cake-wrapper{
  position: relative;
  width: 300px;
  height: 300px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation: cakeIn 1.2s cubic-bezier(.2,.9,.2,1);
}

@keyframes cakeIn{
  from{ transform: translateY(40px) scale(.9); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.cake-plate{
  width: 260px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg,#f4f7ff,#cfd8ee);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.8),
              0 14px 30px rgba(0,0,0,.25);
}

.cake-top{
  position:absolute;
  bottom:180px;
  width: 230px;
  height: 60px;
  border-radius: 30px;
  background: linear-gradient(180deg,#fff0f7,#ffd6ea);
  box-shadow: inset 0 10px 0 rgba(255,255,255,.8);
  overflow:hidden;
}

.cake-top::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 50%, #ff5fa2 0 3px, transparent 4px),
    radial-gradient(circle at 40% 30%, #ffd166 0 3px, transparent 4px),
    radial-gradient(circle at 60% 60%, #6ee7ff 0 3px, transparent 4px),
    radial-gradient(circle at 80% 40%, #2ee59d 0 3px, transparent 4px);
}

.cake-drip{
  position:absolute;
  bottom:160px;
  width: 220px;
  height: 40px;
  background: #ffd6ea;
  clip-path: polygon(
    0 0,100% 0,100% 60%,90% 65%,82% 55%,72% 75%,62% 55%,
    52% 75%,42% 55%,32% 75%,22% 55%,12% 65%,0 60%
  );
}

/* ============================
   🕯️ CANDLES
============================ */

.candle-layer{
  position:absolute;
  bottom:210px;
  width: 220px;
  height: 80px;
  display:flex;
  justify-content:space-around;
  pointer-events:none;
}

.candle{
  width:14px;
  height:48px;
  border-radius:8px;
  position:relative;
  opacity:0;
  box-shadow: 0 10px 16px rgba(0,0,0,.18);
}

.candle.show{
  animation: candleDrop 1.8s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes candleDrop{
  0%{ transform: translateY(-160px); opacity:0; }
  100%{ transform: translateY(0); opacity:1; }
}
/* renkler: mavi, turuncu, kırmızı, mavi, sarı */
.candle.blue   { background: linear-gradient(180deg,#ffffff,#6ee7ff); }
.candle.orange { background: linear-gradient(180deg,#ffffff,#ff8a3d); }
.candle.red    { background: linear-gradient(180deg,#ffffff,#ff3b57); }
.candle.yellow { background: linear-gradient(180deg,#ffffff,#ffd166); }

.candle::after{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  width:3px;
  height:8px;
  background:#333;
  border-radius:2px;
}

.flame{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  width:14px;
  height:20px;
  background:
    radial-gradient(circle at 40% 30%,#fff,#ffd166 40%,#ff5fa2 70%);
  border-radius: 50% 50% 50% 50%;
  filter: drop-shadow(0 0 14px rgba(255,209,102,.6));
  animation: flame 0.35s ease-in-out infinite alternate;
  opacity:1;
  transition: opacity 1.6s ease;
}

@keyframes flame{
  from{ transform:translateX(-50%) scale(0.95); }
  to{ transform:translateX(-50%) scale(1.05); }
}

.candle.off .flame{
  opacity:0;
}
/* ============================
   🎂 CAKE CUT GAP
============================ */

.cake-split-wrapper{
  position:absolute;
  bottom:30px;
  width:220px;
  height:160px;
  display:flex;
  justify-content:center;
  align-items:stretch;
  z-index:1;
}

.cake-half{
  width:50%;
  height:100%;
  background: linear-gradient(180deg,#ff9bd0,#ff5fa2);
  border-radius: 28px;
  box-shadow:
    inset 0 12px 0 rgba(255,255,255,.35),
    inset 0 -18px 28px rgba(0,0,0,.08);
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}

/* başlangıçta birleşik görünsün (gap görünmez) */
.cake-half.left{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
  transform: translateX(7px);
}
.cake-half.right{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  transform: translateX(-7px);
}

.cake-gap{
  width:14px;
  opacity:0;                   /* başlangıçta görünmesin */
  transition: opacity .8s ease;
  background: linear-gradient(180deg,#000,#222,#000);
  clip-path: polygon(
    40% 0%, 60% 0%,
    55% 10%, 65% 20%, 45% 30%, 60% 40%,
    45% 55%, 65% 70%, 50% 85%, 60% 100%,
    40% 100%, 50% 85%, 35% 70%, 55% 55%,
    35% 40%, 55% 30%, 35% 20%, 45% 10%
  );
  box-shadow:
    inset 0 0 8px rgba(0,0,0,.8),
    0 0 6px rgba(0,0,0,.5);
}

.cake-split-wrapper.cut .cake-gap{ opacity:1; }
.cake-split-wrapper.cut .left{ transform: translateX(-10px); }
.cake-split-wrapper.cut .right{ transform: translateX(10px); }
/* ============================
   💨 WIND BLOW EFFECT
============================ */

.candle.wind .flame{
  animation:
    flameWindRTL 0.6s ease-in-out infinite,
    flameFade 1.4s ease forwards;
  transform-origin: bottom center;
}

@keyframes flameWindRTL{
  0%{   transform:translateX(-50%) rotate(0deg)  scale(1); }
  40%{  transform:translateX(-50%) rotate(-18deg) scale(.95); }
  70%{  transform:translateX(-50%) rotate(-26deg) scale(.9); }
  100%{ transform:translateX(-50%) rotate(-30deg) scale(.85); }
}

@keyframes flameFade{
  0%{ opacity:1; }
  100%{ opacity:0; }
}

/* hafif rüzgar izi */
.wind-wave{
  position:absolute;
  top:120px;
  right:-60px;
  width:180px;
  height:40px;
  border-radius:50%;
  background: linear-gradient(270deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  filter: blur(12px);
  animation: windMoveRTL 1.6s ease forwards;
  pointer-events:none;
}

@keyframes windMoveRTL{
  from{ transform: translateX(0); opacity:.6; }
  to{   transform: translateX(-420px); opacity:0; }
}

/* smoke puff */
.smoke{
  position:absolute;
  top:-28px;
  left:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);
  transform: translateX(-50%);
  animation: smokeUp 1.4s ease forwards;
  pointer-events:none;
}

@keyframes smokeUp{
  0%{ transform:translateX(-50%) translateY(0) scale(.6); opacity:.0; }
  15%{ opacity:.55; }
  100%{ transform:translateX(-50%) translateY(-26px) scale(1.2); opacity:0; }
}
/* ============================
   🍰 CAKE SLICE
============================ */

.cake-slice{
  position:absolute;
  width:120px;
  height:100px;
  background: linear-gradient(180deg,#ff9bd0,#ff5fa2);
  border-radius: 0 28px 28px 0;
  box-shadow:
    inset 0 10px 0 rgba(255,255,255,.35),
    0 20px 40px rgba(0,0,0,.25);
  top:50%;
  right:-160px;
  transform: translateY(-50%) rotate(-6deg);
  opacity:0;
  animation: sliceEnter 2.6s cubic-bezier(.2,.9,.2,1) forwards;
}

/* krem üst */
.cake-slice::before{
  content:"";
  position:absolute;
  top:-24px;
  left:0;
  width:100%;
  height:28px;
  background: linear-gradient(180deg,#fff0f7,#ffd6ea);
  border-radius: 30px 30px 0 0;
}

/* iç katman */
.cake-slice::after{
  content:"";
  position:absolute;
  left:0;
  top:28px;
  width:100%;
  height:18px;
  background:
    repeating-linear-gradient(
      90deg,
      #ffd166,
      #ffd166 6px,
      #ff8fab 6px,
      #ff8fab 12px
    );
  opacity:.7;
}

@keyframes sliceEnter{
  0%{
    transform: translateY(-50%) translateX(0) rotate(-8deg);
    opacity:0;
  }

  40%{
    opacity:1;
  }

  100%{
    transform: translateY(-50%) translateX(-260px) rotate(0deg);
    opacity:1;
  }
}
/* ============================
   🍽️ TABLE SCENE
============================ */

.table{
  position:absolute;
  bottom:18%;
  left:50%;
  transform:translateX(-50%);
  width:70%;
  height:120px;
  border-radius:24px;
  background: #6b3f2a;        /* kahverengi */
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: none;  
  -webkit-backdrop-filter: none;
}

.table::before,
.table::after{
  display:none !important;     /* varsa cam/shine katmanlarını kapat */
}
.plate{
  position:absolute;
  bottom:18px;
  width:140px;
  height:60px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.plate.left{ left:10%; }
.plate.right{ right:10%; }

.slice-on-plate{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:54px;
  height:38px;
  border-radius:14px;
  background:rgba(255,255,255,.35);
}


@keyframes tableIn{
  from{
    transform: translateY(220px);
  }
  to{
    transform: translateY(0);
  }
}

/* plates */

.plate{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  background: radial-gradient(circle,#fff,#eaeaea);
  box-shadow:
    inset 0 6px 12px rgba(0,0,0,.15),
    0 10px 25px rgba(0,0,0,.25);
  top:-50px;
  opacity:0;
}

.plate.left{
  left:60px;
  animation: plateLeft 1.8s ease forwards;
}

.plate.right{
  right:60px;
  animation: plateRight 1.8s ease forwards;
}

@keyframes plateLeft{
  from{
    transform: translateX(-120px);
    opacity:0;
  }
  to{
    transform: translateX(0);
    opacity:1;
  }
}

@keyframes plateRight{
  from{
    transform: translateX(120px);
    opacity:0;
  }
  to{
    transform: translateX(0);
    opacity:1;
  }
}

/* slice on plate */

.slice-on-plate{
  position:absolute;
  width:70px;
  height:60px;
  background: linear-gradient(180deg,#ff9bd0,#ff5fa2);
  border-radius: 0 20px 20px 0;
  top:-30px;
  left:15px;
  opacity:0;
  animation: sliceDrop 1.4s ease forwards;
}

@keyframes sliceDrop{
  from{
    transform: translateY(-80px) rotate(-10deg);
    opacity:0;
  }
  to{
    transform: translateY(0) rotate(0);
    opacity:1;
  }
}
/* ============================
   ✉️ LETTER SCENE
============================ */

.envelope{
  position:absolute;
  width:300px;           /* 🔥 DAHA BÜYÜK */
  height:200px;
  position:relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  top:10%;
  left:30%;
  transform:translate(-50%,-50%);
  overflow:hidden;
  cursor:pointer;
}

.envelope::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:65px;
  background:#f5f5f5;
  clip-path: polygon(0 0,100% 0,50% 100%);
  transform-origin: top;
  transition: transform 1s ease;
}

.envelope.open::before{
  transform: rotateX(180deg);
}

.paper{
  width:300px;           /* 🔥 daha geniş */
  height:180px;
  padding:22px 20px;

  background:#fff;
  border-radius:14px;

  position:absolute;
  left:50%;
  top:62%;               /* 🔥 AŞAĞI ALDIK */

  transform:translate(-50%, -50%) scale(.9);
  opacity:0;

  transition: all .65s ease;
  box-shadow:0 22px 48px rgba(0,0,0,.28);
}

/* açılınca */

.paper.show{
  transform:translate(-50%, -65%) scale(1);
  opacity:1;
}

/* plane dönüşü */

.paper.fold{
  transform:translate(-50%, -65%) scale(.65) rotateZ(12deg);
  opacity:.85;
}

/* yazı */

.paper-text{
  font-size:17px;
  font-weight:600;
  line-height:1.45;
  color:#222;
  text-align:center;
  font-family: var(--font);

  opacity:0;
  animation: paperTextFade 1.2s ease forwards;
  animation-delay:.6s;
}

@keyframes paperTextFade{
  to{ opacity:1; }
}

.scene-fade{
  animation: sceneFadeOut .9s ease forwards;
}

@keyframes sceneFadeOut{
  to{
    opacity:0;
    transform: scale(.96);
  }
}
/* Slice sahnesinde tüm pastayı gizle, sadece dilim görünsün */
.cake-wrapper.only-slice .cake-top,
.cake-wrapper.only-slice .cake-drip,
.cake-wrapper.only-slice .cake-split-wrapper,
.cake-wrapper.only-slice .candle-layer,
.cake-wrapper.only-slice .cake-plate{
  opacity:0;
  pointer-events:none;
}



/* ============================
   🍰 CUT CAKE TOP CREAM
============================ */

.cake-cut-cream{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  height:26px;
  background:linear-gradient(
    to bottom,
    #fff0f6,
    #ffd6e8
  );
  border-radius:0 0 22px 22px;
  z-index:6;

  clip-path: polygon(
    0% 0%,
    6% 20%,
    12% 0%,
    18% 20%,
    24% 0%,
    30% 20%,
    36% 0%,
    42% 20%,
    48% 0%,
    54% 20%,
    60% 0%,
    66% 20%,
    72% 0%,
    78% 20%,
    84% 0%,
    90% 20%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}
/* ============================
   🕯️ Slice üstü 2 mini mum
============================ */

.cake-slice{
  overflow: visible; /* mumlar yukarı taşsın */
}

.slice-mini-candles{
  position:absolute;
  top:-54px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:16px;
  z-index:10;
}

.slice-mini-candle{
  width:8px;
  height:26px;
  border-radius:3px;
  background: linear-gradient(#fff, #ffd1dc);
  position:relative;
  box-shadow: 0 8px 12px rgba(0,0,0,.18);
}

.slice-mini-flame{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:10px;
  border-radius:50%;
  background: radial-gradient(circle, #fff6a3 0%, #ff9800 60%, transparent 72%);
  animation: flameFlicker 0.7s infinite alternate;
}

@keyframes flameFlicker{
  from{ transform:translateX(-50%) scale(1); opacity:1; }
  to{ transform:translateX(-50%) scale(1.25); opacity:.75; }
}

/* ============================
   🍰 Tabaktaki dilimin üstüne krema
============================ */
.slice-on-plate{
  overflow: visible;
}

/* krem üst */
.slice-on-plate::before{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  width:100%;
  height:16px;
  background: linear-gradient(180deg,#fff0f7,#ffd6ea);
  border-radius: 18px 18px 0 0;

  clip-path: polygon(
    0% 0%,
    8% 25%,
    16% 0%,
    24% 25%,
    32% 0%,
    40% 25%,
    48% 0%,
    56% 25%,
    64% 0%,
    72% 25%,
    80% 0%,
    88% 25%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

/* ============================
   🕯️ Tabaktaki dilimin üstüne 2 mini mum (daha küçük)
============================ */
.slice-on-plate .slice-mini-candles{
  top:-34px;
  gap:12px;
  transform: translateX(-50%) scale(.85);
}


/* ============================
   🍽️ TABLE STRUCTURE
============================ */

.table{
  position:absolute;
  bottom:22%;
  left:50%;
  transform:translateX(-50%);
  width:360px;
  height:120px;
  z-index:4;
}

.table-top{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:60px;
  background:#6b4026;
  border-radius:18px;
  box-shadow:0 10px 0 #4a2a18;
  display:flex;
  justify-content:space-around;
  align-items:center;
}

/* --- LEGS --- */

.table-leg{
  position:absolute;
  top:100%; 
  margin-top:0px; 
  width:22px;
  height:70px;
  background:#4a2a18;
  border-radius:0 0 16px 16px;
}
/* ÖN AYAKLAR */
.table-leg.front{
  width:26px;
  height:110px;          /* 🔥 daha uzun */
  z-index:3;
}

/* ARKA AYAKLAR — perspektif */
.table-leg.back{
  width:18px;
  height:80px;
  opacity:0.75;
  z-index:1;
}

.table-leg.front.left{
  left:40px;
}

.table-leg.front.right{
  right:40px;
}

.table-leg.back.left{
  left:30px;
}

.table-leg.back.right{
  right:30px;
}