/* ============================================================
   Z ♥ S — Sebepsiz
   Tema: krem + pudra + gül kurusu, kalpler & çiçekler
   ============================================================ */

:root{
  --krem:#fff8f3;
  --pudra:#f7d9e3;
  --pudra-acik:#fdeef4;
  --gul:#e8598b;
  --koyu:#c73866;
  --orman:#2e5c43;
  --altin:#d4a95c;
  --murekkep:#4a2c3a;
  --beyaz:#ffffff;
  --golge:0 10px 34px rgba(199,56,102,.14);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Nunito',-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--sans);
  color:var(--murekkep);
  background:linear-gradient(175deg,var(--krem) 0%,#fff3ec 42%,var(--pudra-acik) 100%) fixed;
  min-height:100svh;
}
body.kilitli{overflow:hidden}
::selection{background:var(--pudra);color:var(--koyu)}
img,video{max-width:100%}

.gizli{display:none!important}

/* ---------- Yüzen taç yaprakları ---------- */
#yapraklar{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.yaprak{
  position:absolute;top:-8%;
  animation:yagmur linear infinite;
  will-change:transform;
  filter:saturate(.9);
}
@keyframes yagmur{
  0%{transform:translateY(-4vh) translateX(0) rotate(0deg)}
  100%{transform:translateY(112vh) translateX(var(--sap,24px)) rotate(340deg)}
}
.yaprak.patlama{animation:patla 1.6s ease-out forwards}
@keyframes patla{
  0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}
  100%{transform:translate(var(--px,0),var(--py,-40vh)) scale(1.1) rotate(300deg);opacity:0}
}

/* ---------- Admin ---------- */
#admin-nokta{
  position:fixed;top:calc(10px + env(safe-area-inset-top));right:12px;z-index:60;
  width:26px;height:26px;border:none;border-radius:50%;
  background:transparent;color:var(--murekkep);
  font-size:12px;opacity:.18;cursor:pointer;
}
#admin-modal{
  position:fixed;inset:0;z-index:70;
  background:rgba(74,44,58,.45);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.admin-kutu{
  background:var(--beyaz);border-radius:20px;padding:26px 24px;
  width:min(300px,100%);text-align:center;box-shadow:var(--golge);
}
.admin-kutu p{font-weight:700;margin-bottom:12px;letter-spacing:.08em}
.admin-kutu input{
  width:100%;padding:12px;text-align:center;font-size:1.4rem;letter-spacing:.4em;
  border:2px solid var(--pudra);border-radius:12px;outline:none;font-family:var(--sans);
}
.admin-kutu input:focus{border-color:var(--gul)}
.admin-kutu.hata{animation:silkelen .4s}
.sallan{animation:silkelen .45s}
@keyframes silkelen{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-8px)}
  75%{transform:translateX(8px)}
}
.admin-btnler{display:flex;gap:10px;margin-top:16px}
.admin-btnler button{
  flex:1;padding:11px;border:none;border-radius:999px;font-family:var(--sans);
  font-weight:700;font-size:.95rem;cursor:pointer;
}
#admin-vazgec{background:var(--pudra-acik);color:var(--murekkep)}
#admin-gir{background:var(--gul);color:#fff}

/* ---------- Ekranlar (countdown / kapı) ---------- */
.ekran{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:34px 22px calc(34px + env(safe-area-inset-bottom));
  text-align:center;overflow-y:auto;
  background:linear-gradient(175deg,var(--krem) 0%,#fff3ec 42%,var(--pudra-acik) 100%);
}

/* ---------- Kapı ---------- */
.kapi-sahne{position:relative;perspective:900px;margin-bottom:4px}
.kapi{
  position:relative;width:200px;height:270px;
  display:flex;
  filter:drop-shadow(0 16px 30px rgba(199,56,102,.22));
}
.kapi::before{ /* kapının ardındaki ışık */
  content:'';position:absolute;inset:6px;
  background:radial-gradient(circle at 50% 40%,#fff6c9 0%,var(--pudra) 55%,transparent 75%);
  opacity:0;transition:opacity 1.2s ease .5s;border-radius:100px 100px 10px 10px;
}
.kapi.acik::before{opacity:1}
.kapi-kanat{
  position:relative;width:50%;height:100%;z-index:2;
  background:linear-gradient(160deg,#fff,var(--pudra-acik) 60%,var(--pudra));
  border:3px solid var(--altin);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:transform 1.7s cubic-bezier(.65,0,.3,1);
  backface-visibility:hidden;
}
.kapi-kanat.sol{
  border-radius:120px 0 0 10px;border-right-width:1.5px;
  transform-origin:left center;
}
.kapi-kanat.sag{
  border-radius:0 120px 10px 0;border-left-width:1.5px;
  transform-origin:right center;
}
.kapi-kanat.sol::after,.kapi-kanat.sag::after{ /* kapı kolu */
  content:'';position:absolute;top:52%;width:9px;height:9px;border-radius:50%;
  background:var(--altin);box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.kapi-kanat.sol::after{right:8px}
.kapi-kanat.sag::after{left:8px}
.kapi-sus{font-size:34px}
.kapi-kalp{font-size:24px;animation:kalpat 1.8s ease-in-out infinite}
.kapi.acik .kapi-kanat.sol{transform:rotateY(-112deg)}
.kapi.acik .kapi-kanat.sag{transform:rotateY(112deg)}
.kapi-kilit{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  background:var(--beyaz);box-shadow:0 4px 14px rgba(74,44,58,.18);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.kapi-cicekler{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  font-size:21px;letter-spacing:2px;white-space:nowrap;
  animation:salin 5s ease-in-out infinite;z-index:4;
}
@keyframes salin{0%,100%{transform:translateX(-50%) rotate(-2deg)}50%{transform:translateX(-50%) rotate(2deg)}}
@keyframes kalpat{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}}

/* ---------- Countdown ---------- */
.cd-baslik{
  font-family:var(--serif);font-weight:600;font-style:italic;
  font-size:clamp(1.45rem,6vw,2rem);color:var(--koyu);max-width:420px;
}
.cd-alt{font-size:1.02rem;line-height:1.65;opacity:.85;max-width:380px}
.cd-alt strong{color:var(--koyu)}
.cd-sayac{display:flex;gap:10px;margin-top:6px}
.cd-kutu{
  background:rgba(255,255,255,.75);backdrop-filter:blur(8px);
  border:1.5px solid rgba(232,89,139,.18);
  border-radius:16px;padding:12px 6px 9px;min-width:66px;
  box-shadow:var(--golge);
}
.cd-kutu span{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:1.9rem;color:var(--gul);font-variant-numeric:tabular-nums;
}
.cd-kutu label{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6}
.cd-imza{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--koyu);margin-top:4px}

/* ---------- Kapı sorusu ---------- */
.kapi-soru{font-family:var(--serif);font-size:clamp(1.7rem,7vw,2.3rem);color:var(--koyu)}
.kapi-soru-alt{font-size:1.03rem;line-height:1.65;opacity:.88;max-width:380px}
.kapi-soru-alt strong{color:var(--koyu)}
.tarih-secici{display:flex;gap:8px;margin-top:4px}
.tarih-secici select{
  appearance:none;-webkit-appearance:none;
  padding:13px 16px;border:2px solid var(--pudra);border-radius:14px;
  background:var(--beyaz);font-family:var(--sans);font-weight:700;font-size:1rem;
  color:var(--murekkep);text-align:center;outline:none;
}
.tarih-secici select:focus{border-color:var(--gul)}
.buton-ana{
  border:none;border-radius:999px;padding:15px 38px;cursor:pointer;
  background:linear-gradient(135deg,var(--gul),var(--koyu));color:#fff;
  font-family:var(--sans);font-weight:800;font-size:1.05rem;letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(199,56,102,.35);
  transition:transform .15s ease;
}
.buton-ana:active{transform:scale(.96)}
.kapi-mesaj{
  min-height:2.6em;max-width:340px;font-size:.98rem;line-height:1.5;
  color:var(--koyu);font-style:italic;
}

/* ---------- Ana içerik ---------- */
#ana{animation:belirme 1.4s ease both}
@keyframes belirme{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.bolum{
  max-width:600px;margin:0 auto;padding:84px 22px;text-align:center;
}
.bolum-baslik{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.65rem,6.4vw,2.3rem);color:var(--koyu);margin-bottom:12px;
}
.bolum-alt{font-size:1.02rem;line-height:1.7;opacity:.85;margin-bottom:30px}
.bolum-alt strong{color:var(--koyu)}

/* Hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.hero-satir{
  font-family:var(--serif);font-size:clamp(1.3rem,5.6vw,1.8rem);
  line-height:1.6;color:var(--murekkep);
}
.hero-satir.vurgu-yok{opacity:.65;font-style:italic;margin-top:6px}
.hero-vurgu{
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(2rem,8.6vw,3rem);color:var(--gul);margin:18px 0 34px;
}
.hero-isimler{
  font-family:var(--serif);font-size:clamp(1.25rem,5vw,1.6rem);
  color:var(--murekkep);letter-spacing:.04em;
}
.kalp-atis{display:inline-block;animation:kalpat 1.8s ease-in-out infinite}
.hero-sayac{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:2px}
.hero-sayac span#gun-sayac{
  font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,11vw,3.6rem);
  color:var(--koyu);font-variant-numeric:tabular-nums;line-height:1;
}
.hero-sayac label{text-transform:uppercase;letter-spacing:.22em;font-size:.78rem;opacity:.6}
.hero-sayac-detay{font-size:.88rem;opacity:.55;font-style:italic}
.asagi-ok{
  position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  font-size:1.6rem;color:var(--gul);animation:zipla 1.8s ease-in-out infinite;
}
@keyframes zipla{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* Zaman tüneli */
.zaman-tuneli{position:relative;text-align:left;padding-left:44px;margin-top:8px}
.zaman-tuneli::before{
  content:'';position:absolute;left:15px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--pudra),var(--gul),var(--pudra));border-radius:2px;
}
.tunel-madde{position:relative;margin-bottom:38px}
.tunel-madde:last-child{margin-bottom:0}
.tunel-nokta{
  position:absolute;left:-44px;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--beyaz);border:2px solid var(--pudra);
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 3px 10px rgba(199,56,102,.15);
}
.tunel-tarih{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--altin);margin-bottom:4px;
}
.tunel-madde h3{font-family:var(--serif);font-size:1.25rem;color:var(--koyu);margin-bottom:6px}
.tunel-madde p{font-size:.97rem;line-height:1.65;opacity:.88}
.tunel-madde img{
  width:100%;border-radius:16px;margin-top:12px;
  box-shadow:var(--golge);display:block;
}

/* Wrapped */
.wrapped{max-width:100%;overflow:hidden}
.wrapped .bolum-baslik,.wrapped .bolum-alt{max-width:600px;margin-left:auto;margin-right:auto}
.wrapped-serit{
  display:flex;gap:14px;overflow-x:auto;padding:6px 22px 26px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wrapped-serit::-webkit-scrollbar{display:none}
.w-kart{
  flex:0 0 min(78vw,320px);scroll-snap-align:center;
  border-radius:24px;padding:34px 24px;min-height:400px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:#fff;text-align:center;box-shadow:0 14px 34px rgba(74,44,58,.22);
}
.w-ust{font-size:.86rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;opacity:.85}
.w-buyuk{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,10vw,3.6rem);line-height:1.1}
.w-alt{font-size:1rem;line-height:1.6;opacity:.95;max-width:250px}
.w-kart iframe{border-radius:14px;width:100%;max-width:260px;border:0;margin-top:8px}
.w-spotify-link{
  display:inline-block;margin-top:10px;padding:11px 22px;border-radius:999px;
  background:rgba(255,255,255,.2);color:#fff;text-decoration:none;font-weight:800;font-size:.9rem;
  border:1.5px solid rgba(255,255,255,.5);
}
.renk-1{background:linear-gradient(150deg,#e8598b,#c73866)}
.renk-2{background:linear-gradient(150deg,#c73866,#7c2148)}
.renk-3{background:linear-gradient(150deg,#d4a95c,#b07f2e)}
.renk-4{background:linear-gradient(150deg,#2e5c43,#1c3b2a)}
.renk-5{background:linear-gradient(150deg,#e88b59,#c75838)}
.renk-6{background:linear-gradient(150deg,#8b59e8,#5838c7)}
.renk-7{background:linear-gradient(150deg,#1db954,#14833b)}
.renk-8{background:linear-gradient(150deg,#4a2c3a,#2e1b24)}
.renk-9{background:linear-gradient(150deg,#59a7e8,#3874c7)}
.renk-10{background:linear-gradient(150deg,#e8598b,#8b59e8)}

/* 100 sebep */
.deste-alan{display:flex;flex-direction:column;align-items:center;gap:18px}
.sebep-kart{
  width:min(280px,80vw);height:360px;cursor:pointer;
  perspective:1100px;
}
.kart-ic{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.5,.1,.3,1.1);
}
.sebep-kart.acik .kart-ic{transform:rotateY(180deg)}
.kart-on,.kart-arka{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px;box-shadow:var(--golge);
}
.kart-on{
  background:
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.5) 0 8px,transparent 9px),
    radial-gradient(circle at 80% 85%,rgba(255,255,255,.5) 0 8px,transparent 9px),
    linear-gradient(150deg,var(--pudra),var(--gul));
  font-size:3.4rem;
}
.kart-on span{
  font-size:.8rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;opacity:.9;
}
.kart-arka{
  transform:rotateY(180deg);
  background:var(--beyaz);border:2px solid var(--pudra);
}
#sebep-no{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--altin)}
#sebep-metin{font-family:var(--serif);font-size:1.22rem;line-height:1.55;color:var(--murekkep)}
.sebep-sayac{font-size:.85rem;opacity:.6;font-variant-numeric:tabular-nums}

/* Teklif */
.teklif-tarih{
  display:inline-block;padding:7px 18px;border-radius:999px;margin-bottom:14px;
  background:var(--altin);color:#fff;font-weight:800;font-size:.85rem;letter-spacing:.1em;
}
#teklif-video{
  width:100%;border-radius:20px;box-shadow:0 16px 40px rgba(74,44,58,.3);
  background:#000;display:block;
}
.teklif-fotolar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.teklif-fotolar img{width:100%;height:100%;object-fit:cover;border-radius:16px;box-shadow:var(--golge)}
.teklif-not{
  margin-top:20px;font-family:var(--serif);font-style:italic;
  font-size:1.15rem;color:var(--koyu);
}

/* Çiçek bahçesi */
.bahce-alan{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  background:rgba(255,255,255,.55);border:1.5px dashed rgba(212,169,92,.5);
  border-radius:22px;padding:24px 16px;min-height:110px;
  align-items:center;
}
.cicek{
  font-size:28px;line-height:1;display:inline-block;
  animation:cicekAc .7s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes cicekAc{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.cicek.bugunku{
  font-size:36px;
  animation:cicekAc .9s cubic-bezier(.3,1.6,.5,1) both,parla 2.4s ease-in-out 1s infinite;
}
@keyframes parla{0%,100%{filter:drop-shadow(0 0 2px rgba(232,89,139,.35))}50%{filter:drop-shadow(0 0 10px rgba(232,89,139,.75))}}
.bahce-not{margin-top:16px;font-style:italic;opacity:.75;font-size:.95rem;line-height:1.6}

/* Sonsuz akış */
.akis{max-width:100%;padding-left:12px;padding-right:12px}
.akis .bolum-baslik,.akis .bolum-alt{max-width:600px;margin-left:auto;margin-right:auto}
.akis-kolonlar{display:flex;gap:10px;align-items:flex-start;max-width:900px;margin:0 auto}
.akis-kolon{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.akis-item{border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(74,44,58,.14);background:var(--pudra-acik)}
.akis-item img,.akis-item video{width:100%;display:block}
.akis-item.egik-a{transform:rotate(.8deg)}
.akis-item.egik-b{transform:rotate(-.8deg)}
.akis-nobetci{height:2px}
.akis-son{margin:38px auto 0;max-width:440px;font-family:var(--serif);font-size:1.08rem;line-height:1.85;color:var(--murekkep);opacity:.88}
.akis-son strong{color:var(--koyu)}

/* Hediye seçimi */
.hediye-alan{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  max-width:560px;margin:26px auto 0;
}
.hediye-kart{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 12px 16px;border-radius:18px;cursor:pointer;
  background:rgba(255,255,255,.9);border:2px solid var(--pudra);
  box-shadow:0 8px 22px rgba(199,56,102,.08);
  font-family:var(--sans);color:var(--murekkep);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.hediye-kart:active{transform:scale(.97)}
.hediye-kart.secili{
  border-color:var(--gul);
  box-shadow:0 10px 28px rgba(232,89,139,.28);
  background:linear-gradient(160deg,#fff,var(--pudra-acik));
}
.h-emoji{font-size:2rem;line-height:1}
.h-baslik{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--koyu)}
.h-aciklama{font-size:.8rem;line-height:1.5;opacity:.8}
.hediye-yaz{max-width:560px;margin:18px auto 0;display:flex;flex-direction:column;gap:12px}
.hediye-yaz.gizli{display:none}
#hediye-metin{
  width:100%;padding:14px 16px;border-radius:16px;resize:none;
  border:2px solid var(--pudra);background:rgba(255,255,255,.92);
  font-family:var(--sans);font-size:1rem;color:var(--murekkep);outline:none;
}
#hediye-metin:focus{border-color:var(--gul)}
.hediye-sonuc{
  max-width:480px;margin:22px auto 0;font-family:var(--serif);
  font-size:1.05rem;line-height:1.75;color:var(--murekkep);
}
.hediye-sonuc strong{color:var(--koyu)}

/* Final */
.final{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.final-satir{font-family:var(--serif);font-size:clamp(1.15rem,4.8vw,1.5rem);line-height:1.6}
.final-satir.kucuk{font-style:italic;color:var(--koyu)}
.final-vurgu{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.8rem,7.6vw,2.6rem);color:var(--gul);
  margin:16px 0;line-height:1.35;
}
.final-soz{font-size:1rem;line-height:1.7;opacity:.85}
.final-aydonumu{font-size:.95rem;line-height:1.6;opacity:.85}
.final-aydonumu strong{color:var(--koyu)}
.final-imza{
  margin-top:22px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,6vw,2rem);color:var(--koyu);line-height:1.5;
}
.final-imza span{font-size:1.1rem;opacity:.8}
.buton-ikincil{
  margin-top:30px;padding:12px 26px;border-radius:999px;cursor:pointer;
  background:transparent;border:2px solid var(--pudra);color:var(--koyu);
  font-family:var(--sans);font-weight:700;font-size:.92rem;
}

/* Müzik düğmesi */
#muzik-btn{
  position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;
  width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(232,89,139,.3);
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);
  color:var(--koyu);font-size:1.15rem;cursor:pointer;
  box-shadow:0 6px 18px rgba(74,44,58,.16);
  transition:background .3s,color .3s;
}
#muzik-btn.caliyor{
  background:linear-gradient(135deg,var(--gul),var(--koyu));color:#fff;
  animation:muzikNabiz 2s ease-in-out infinite;
}
@keyframes muzikNabiz{0%,100%{box-shadow:0 6px 18px rgba(199,56,102,.3)}50%{box-shadow:0 6px 26px rgba(199,56,102,.6)}}

/* ---------- Geniş ekran ---------- */
@media (min-width:700px){
  .bolum{padding:110px 22px}
  .kapi{width:230px;height:305px}
  .wrapped-serit{padding-left:calc(50vw - 170px)}
  .w-kart{flex-basis:330px}
  .teklif-fotolar{gap:14px}
}