:root{
  --bg:#0d0610;
  --bg-soft:#190b20;
  --card:rgba(255,255,255,.08);
  --text:#fff7fb;
  --muted:#d7c1cb;
  --pink:#ff4f8b;
  --pink-2:#ff91b8;
  --pink-3:#ffd0df;
  --border:rgba(255,255,255,.12);
  --shadow:0 30px 90px rgba(0,0,0,.38);
}

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

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  font-family:'Montserrat',sans-serif;
  background:
    radial-gradient(circle at top,#2a1034 0,#120817 38%,#0b060d 100%);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}

button,
input{
  font:inherit;
}

a{
  text-decoration:none;
  color:inherit;
}

.hidden{
  display:none !important;
}

/* ----------------------------
   ŞİFRE EKRANI
----------------------------- */

.login-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,79,139,.20),transparent 34%),
    radial-gradient(circle at 85% 85%,rgba(174,67,255,.18),transparent 36%),
    linear-gradient(135deg,#0c050e,#1a0a20 48%,#0f0612);
}

.login-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
}

.login-glow{
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.28;
}

.glow-one{
  background:#ff4f8b;
  top:-70px;
  left:-70px;
}

.glow-two{
  background:#8f55ff;
  right:-80px;
  bottom:-80px;
}

.login-card{
  position:relative;
  z-index:2;
  width:min(460px,100%);
  padding:48px 38px;
  text-align:center;
  border:1px solid var(--border);
  border-radius:32px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.105),
    rgba(255,255,255,.055)
  );
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
}

.lock-icon{
  width:72px;
  height:72px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:30px;
  background:linear-gradient(135deg,#ff4f8b,#ff80ac);
  box-shadow:0 14px 40px rgba(255,79,139,.35);
}

.mini-title{
  text-transform:uppercase;
  letter-spacing:2.4px;
  color:var(--pink-2);
  font-size:11px;
  font-weight:800;
}

.login-card h1{
  margin:8px 0 10px;
  font-size:clamp(36px,8vw,52px);
  line-height:1;
}

.login-card h1 span{
  display:block;
  margin-top:8px;
  font-family:'Great Vibes',cursive;
  color:#ffc0d5;
  font-weight:400;
}

.login-text{
  color:var(--muted);
  margin-bottom:24px;
}

.password-wrap{
  position:relative;
  margin-bottom:14px;
}

.password-wrap input{
  width:100%;
  height:56px;
  padding:0 54px 0 18px;
  color:#fff;
  outline:none;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  background:rgba(0,0,0,.16);
  transition:.25s;
}

.password-wrap input::placeholder{
  color:#b8a4ad;
}

.password-wrap input:focus{
  border-color:rgba(255,79,139,.65);
  box-shadow:0 0 0 4px rgba(255,79,139,.10);
}

.password-wrap button{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:19px;
}

.error-message{
  min-height:24px;
  margin-top:12px;
  color:#ff9fbf;
  font-size:13px;
  font-weight:600;
}

/* ----------------------------
   BUTONLAR
----------------------------- */

.btn{
  border:none;
  border-radius:999px;
  padding:14px 24px;
  font-weight:800;
  cursor:pointer;
  transition:.25s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn.primary{
  background:linear-gradient(135deg,var(--pink),#ff6aa2);
  color:#fff;
  box-shadow:0 12px 35px rgba(255,79,139,.30);
}

.btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(255,79,139,.40);
}

.btn.ghost{
  color:#fff;
  border:1px solid var(--border);
  background:rgba(255,255,255,.075);
  backdrop-filter:blur(10px);
}

.btn.ghost:hover{
  background:rgba(255,255,255,.13);
}

.btn.full{
  width:100%;
}

.btn.small{
  padding:11px 18px;
  font-size:13px;
}

/* ----------------------------
   HERO
----------------------------- */

.hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:110px 7% 80px;
  background:
    url('https://images.unsplash.com/photo-1518199266791-5375a83190b7?auto=format&fit=crop&w=1900&q=85')
    center/cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(12,5,14,.42),rgba(12,5,14,.90)),
    radial-gradient(circle at center,transparent 0,rgba(8,3,10,.15) 35%,rgba(8,3,10,.55) 100%);
}

.navbar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  padding:24px 7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent);
}

.brand{
  font-family:'Great Vibes',cursive;
  font-size:36px;
}

.nav-links{
  display:flex;
  gap:26px;
  font-size:13px;
  font-weight:700;
}

.nav-links a{
  opacity:.85;
  transition:.25s;
}

.nav-links a:hover{
  opacity:1;
  color:var(--pink-2);
}

.music-btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:10px 15px;
  border-radius:999px;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:860px;
  text-align:center;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:11px;
  font-weight:800;
  color:var(--pink-2);
  margin-bottom:12px;
}

.hero h1{
  font-size:clamp(48px,8vw,96px);
  line-height:1.02;
  letter-spacing:-3px;
  margin-bottom:24px;
}

.hero h1 span{
  display:block;
  font-family:'Great Vibes',cursive;
  font-weight:400;
  color:#ffb6cf;
}

.hero-text{
  max-width:700px;
  margin:0 auto 30px;
  color:#f1dfe7;
  font-size:17px;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}

.scroll-indicator{
  position:absolute;
  z-index:2;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  font-size:32px;
  animation:bounce 1.8s infinite;
}

@keyframes bounce{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,9px)}
}

/* ----------------------------
   GENEL BÖLÜMLER
----------------------------- */

.section{
  position:relative;
  padding:100px 7%;
}

.section.alt{
  background:rgba(255,255,255,.025);
}

.section-heading{
  max-width:760px;
  margin:0 auto 48px;
  text-align:center;
}

.section-heading p{
  color:var(--pink-2);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  font-weight:800;
}

.section-heading h2{
  margin-top:8px;
  font-size:clamp(34px,5vw,56px);
}

/* ----------------------------
   TEK FOTOĞRAF - TAM ORTA
----------------------------- */

.photo-section{
  overflow:hidden;
}

.single-photo-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.single-photo-card{
  position:relative;
  width:min(520px,100%);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 30px 80px rgba(0,0,0,.38),
    0 0 50px rgba(255,79,139,.10);
  background:rgba(255,255,255,.05);
}

.single-photo-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .6s ease;
}

.single-photo-card:hover img{
  transform:scale(1.035);
}

.single-photo-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,rgba(0,0,0,.72),transparent 48%);
  pointer-events:none;
}

.photo-shine{
  position:absolute;
  inset:-40%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    120deg,
    transparent 45%,
    rgba(255,255,255,.14) 50%,
    transparent 55%
  );
  transform:translateX(-70%) rotate(10deg);
  transition:transform .8s ease;
}

.single-photo-card:hover .photo-shine{
  transform:translateX(70%) rotate(10deg);
}


.single-photo-card figcaption{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  padding:20px;
  text-align:center;
}

.single-photo-card figcaption strong{
  display:block;
  font-size:20px;
}

.single-photo-card figcaption span{
  display:block;
  margin-top:5px;
  color:#ead6df;
  font-size:13px;
}

/* ==================================
   TELEFON İÇİN ÖZEL CSS
   mobile.css
================================== */

@media screen and (max-width: 600px) {

    /* GENEL */
    body {
        overflow-x: hidden;
    }

    /* NAVBAR */
    .navbar {
        padding: 15px 18px;
    }

    .brand {
        font-size: 27px;
    }

    .nav-links {
        display: none;
    }

    .music-btn {
        font-size: 11px;
        padding: 8px 12px;
    }


    /* ANA SAYFA */
    .hero {
        min-height: 100vh;
        padding: 100px 20px 70px;
    }

    .hero-content {
        width: 100%;
    }

    .eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero h1 {
        font-size: 42px;
        line-height: 1.05;
        letter-spacing: -1px;
    }

    .hero h1 span {
        font-size: 48px;
        margin-top: 8px;
    }

    .hero-text {
        font-size: 14px;
        line-height: 1.7;
        padding: 0 5px;
    }


    /* BUTONLAR */
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        font-size: 13px;
        padding: 13px 18px;
    }


    /* BÖLÜM BAŞLIKLARI */
    .section {
        padding: 65px 18px;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading p {
        font-size: 9px;
    }

    .section-heading h2 {
        font-size: 30px;
    }


    /* ==============================
       TEK FOTOĞRAF
    ============================== */
/* TELEFONDA FOTOĞRAF ÜZERİNDEKİ YAZI */
@media screen and (max-width: 600px) {

    /* Fotoğrafın üstündeki yazı alanı */
    .single-photo-card figcaption {
        padding: 10px;
        bottom: 5px;
        text-align: center;
    }

    /* Büyük yazı */
    .single-photo-card figcaption strong {
        font-size: 13px;
        line-height: 1.2;
    }

    /* Altındaki küçük yazı */
    .single-photo-card figcaption span {
        font-size: 8px;
        line-height: 1.3;
        margin-top: 2px;
    }
}
    .single-photo-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .single-photo-card {
        width: 100%;
        max-width: 340px;
        aspect-ratio: 4 / 5;

        margin: 0 auto;

        border-radius: 22px;
    }

    .single-photo-card img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        display: block;
    }


    /* FOTOĞRAF ÜZERİNDEKİ YAZI */

    .single-photo-card figcaption {
        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        padding: 14px 10px;

        text-align: center;
    }

    /* Büyük yazı */
    .single-photo-card figcaption strong {
        display: block;

        font-size: 14px;
        line-height: 1.3;
    }

    /* Küçük açıklama */
    .single-photo-card figcaption span {
        display: block;

        margin-top: 3px;

        font-size: 9px;
        line-height: 1.4;
    }


    /* ==============================
       SAYAÇ
    ============================== */

    .countdown-box {
        padding: 30px 12px;
        border-radius: 22px;
    }

    .countdown-box h2 {
        font-size: 27px;
    }

    .countdown {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .countdown div {
        padding: 17px 5px;
    }

    .countdown strong {
        font-size: 28px;
    }

    .countdown span {
        font-size: 10px;
    }

    .countdown-note {
        font-size: 11px;
    }


    /* ==============================
       MEKTUP
    ============================== */

    .letter-card {
        padding: 28px 20px;
        border-radius: 23px;
    }

    .letter-card h2 {
        font-size: 38px;
    }

    .letter-card p {
        font-size: 13px;
        line-height: 1.8;
    }

    .letter-card .signature {
        font-size: 30px;
    }


    /* ==============================
       SEVİYOR / SEVMİYOR ÇİÇEĞİ
    ============================== */

    .flower-panel {
        grid-template-columns: 1fr;

        padding: 20px 10px 28px;

        gap: 5px;
    }

    .flower-area {
        min-height: 350px;
    }

    .flower {
        transform: scale(0.78);
    }

    .flower-status {
        font-size: 15px;
        min-height: 65px;
    }

    .flower-content .btn {
        font-size: 12px;
        padding: 11px 17px;
    }


    /* ==============================
       SÜRPRİZ
    ============================== */

    .surprise-card {
        padding: 32px 18px;
        border-radius: 23px;
    }

    .surprise-card h2 {
        font-size: 28px;
    }

    .surprise-card p {
        font-size: 12px;
    }

    .surprise-message {
        font-size: 14px;
    }


    /* ==============================
       ŞİFRE EKRANI
    ============================== */

    .login-screen {
        padding: 18px;
    }

    .login-card {
        width: 100%;

        padding: 32px 20px;

        border-radius: 25px;
    }

    .login-card h1 {
        font-size: 35px;
    }

    .login-card h1 span {
        font-size: 42px;
    }

    .login-text {
        font-size: 12px;
    }

    .password-wrap input {
        height: 52px;
        font-size: 13px;
    }

    .login-card .btn {
        font-size: 13px;
    }


    /* FOOTER */
    footer {
        padding: 22px 15px;

        font-size: 10px;
    }

}

/* ----------------------------
   GERİ SAYIM
----------------------------- */

.countdown-section{
  padding-top:70px;
  padding-bottom:90px;
}

.countdown-box{
  max-width:1000px;
  margin:0 auto;
  padding:52px 28px;
  text-align:center;
  border-radius:32px;
  border:1px solid var(--border);
  background:
    linear-gradient(135deg,rgba(255,79,139,.14),rgba(255,255,255,.05));
  box-shadow:var(--shadow);
}

.countdown-box h2{
  margin-bottom:28px;
  font-size:clamp(34px,5vw,52px);
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.countdown div{
  padding:22px 10px;
  border-radius:22px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(10px);
}

.countdown strong{
  display:block;
  font-size:clamp(32px,5vw,46px);
  line-height:1.1;
  color:#fff;
}

.countdown span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.countdown-note{
  margin-top:22px;
  color:#f0dce5;
  font-size:14px;
}

/* ----------------------------
   MEKTUP
----------------------------- */

.letter-card{
  max-width:900px;
  margin:auto;
  padding:54px;
  border-radius:32px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}

.letter-card h2{
  margin-bottom:22px;
  font-family:'Great Vibes',cursive;
  font-size:clamp(42px,6vw,64px);
  font-weight:400;
  color:var(--pink-3);
}

.letter-card p{
  color:#ead9e1;
  font-size:17px;
  margin-bottom:16px;
}

.letter-card .signature{
  margin-top:28px;
  margin-bottom:0;
  font-family:'Great Vibes',cursive;
  color:#fff;
  font-size:38px;
}

/* ----------------------------
   ÇİÇEK
----------------------------- */

.flower-section{
  overflow:hidden;
}

.flower-panel{
  max-width:1000px;
  margin:auto;
  padding:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:45px;
  border:1px solid var(--border);
  border-radius:32px;
  background:
    linear-gradient(135deg,rgba(255,79,139,.10),rgba(255,255,255,.045));
  box-shadow:var(--shadow);
}

.flower-area{
  min-height:440px;
  display:grid;
  place-items:center;
}

.flower{
  position:relative;
  width:300px;
  height:390px;
}

.flower-center{
  position:absolute;
  top:112px;
  left:50%;
  z-index:10;
  width:80px;
  height:80px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:28px;
  background:radial-gradient(circle,#ffd66b,#f5a623);
  box-shadow:0 10px 35px rgba(245,166,35,.28);
}

.petal{
  position:absolute;
  top:57px;
  left:50%;
  width:62px;
  height:125px;
  margin-left:-31px;
  border-radius:60% 60% 48% 48%;
  transform-origin:50% 95%;
  background:
    linear-gradient(180deg,#fffef8 0%,#ffe7f0 68%,#ffc3d8 100%);
  box-shadow:
    inset 0 -8px 18px rgba(255,79,139,.10),
    0 8px 18px rgba(0,0,0,.12);
  transition:
    opacity .45s ease,
    transform .55s ease,
    filter .4s ease;
}

.petal.removed{
  opacity:0;
  filter:blur(1px);
  transform:
    var(--petal-rotation)
    translateY(-85px)
    scale(.45)
    rotate(45deg);
  pointer-events:none;
}

.p1{ --petal-rotation:rotate(0deg); transform:rotate(0deg); }
.p2{ --petal-rotation:rotate(32.7deg); transform:rotate(32.7deg); }
.p3{ --petal-rotation:rotate(65.4deg); transform:rotate(65.4deg); }
.p4{ --petal-rotation:rotate(98.1deg); transform:rotate(98.1deg); }
.p5{ --petal-rotation:rotate(130.8deg); transform:rotate(130.8deg); }
.p6{ --petal-rotation:rotate(163.5deg); transform:rotate(163.5deg); }
.p7{ --petal-rotation:rotate(196.2deg); transform:rotate(196.2deg); }
.p8{ --petal-rotation:rotate(228.9deg); transform:rotate(228.9deg); }
.p9{ --petal-rotation:rotate(261.6deg); transform:rotate(261.6deg); }
.p10{ --petal-rotation:rotate(294.3deg); transform:rotate(294.3deg); }
.p11{ --petal-rotation:rotate(327deg); transform:rotate(327deg); }

.stem{
  position:absolute;
  top:180px;
  left:50%;
  width:13px;
  height:190px;
  transform:translateX(-50%);
  border-radius:10px;
  background:linear-gradient(90deg,#2f8d4f,#54b56b);
}

.leaf{
  position:absolute;
  top:255px;
  width:70px;
  height:38px;
  background:linear-gradient(135deg,#4fb467,#267c45);
}

.leaf-left{
  left:76px;
  border-radius:70% 10% 70% 10%;
  transform:rotate(-20deg);
}

.leaf-right{
  right:76px;
  border-radius:10% 70% 10% 70%;
  transform:rotate(20deg);
}

.flower-content{
  text-align:center;
}

.flower-status{
  min-height:82px;
  margin-bottom:20px;
  color:#f2dfe7;
  font-size:20px;
  font-weight:700;
}

.flower-content .btn{
  margin:5px;
}

/* ----------------------------
   SÜRPRİZ
----------------------------- */

.surprise-section{
  text-align:center;
}

.surprise-card{
  max-width:720px;
  margin:auto;
  padding:50px 30px;
  border:1px solid var(--border);
  border-radius:32px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,79,139,.08));
  box-shadow:var(--shadow);
}

.surprise-card h2{
  font-size:clamp(34px,5vw,48px);
  margin-bottom:10px;
}

.surprise-card > p:not(.eyebrow){
  margin-bottom:20px;
  color:var(--muted);
}

.surprise-message{
  display:none;
  margin-top:24px;
  padding:22px;
  border-radius:20px;
  color:#ffe8f1;
  background:rgba(255,255,255,.06);
  font-size:18px;
}

.surprise-message.show{
  display:block;
  animation:fadeIn .5s ease;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* ----------------------------
   KALPLER + FOOTER
----------------------------- */

footer{
  padding:30px;
  text-align:center;
  color:#bea8b3;
  border-top:1px solid rgba(255,255,255,.08);
}

.hearts{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  overflow:hidden;
}

.heart{
  position:absolute;
  bottom:-30px;
  color:rgba(255,124,169,.68);
  animation:floatUp linear forwards;
}

@keyframes floatUp{
  to{
    transform:translateY(-115vh) rotate(360deg);
    opacity:0;
  }
}

/* ----------------------------
   MOBİL
----------------------------- */

@media(max-width:900px){
  .nav-links{
    display:none;
  }

  .flower-panel{
    grid-template-columns:1fr;
    gap:10px;
    padding:32px 24px;
  }

  .flower-area{
    min-height:400px;
  }

  .letter-card{
    padding:38px 26px;
  }

  .hero h1{
    letter-spacing:-1px;
  }
}

@media(max-width:600px){
  .countdown{
    grid-template-columns:repeat(2,1fr);
  }

  .countdown-box{
    padding:36px 16px;
  }

  .navbar{
    padding:18px 20px;
  }

  .brand{
    font-size:30px;
  }

  .hero{
    padding:110px 20px 75px;
  }

  .hero-text{
    font-size:15px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .section{
    padding:76px 20px;
  }

  .single-photo-card{
    width:min(390px,100%);
    border-radius:25px;
  }

  .single-photo-card figcaption{
    padding:22px 18px;
  }

  .login-card{
    padding:38px 22px;
  }

  .flower-panel{
    padding:24px 12px 30px;
  }

  .flower{
    transform:scale(.88);
  }

  .flower-status{
    font-size:17px;
  }

  .letter-card p{
    font-size:15px;
  }
}