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

html,body{
  height:100%;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Arial, sans-serif;
  background:#c3ff6f;
  perspective:1800px;
}

/* ✅ Arka Plan */
.background-layer{
  position:fixed;
  inset:-8%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25), transparent 60%),
    linear-gradient(135deg,#d8ff9a,#c3ff6f,#aeea55);
  z-index:-1;
  transition:transform 0.15s ease-out;
  will-change:transform;
}

/* ✅ Container */
.container{
  width:92vw;
  max-width:820px;
  padding:28px 22px;
  border-radius:24px;
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(10px);
  text-align:center;
  box-shadow:
    0 45px 90px rgba(0,0,0,0.22);
}

/* ✅ İç Sahne */
.inner-scene{
  transform-style:preserve-3d;
  transition:transform 0.15s ease-out;
  will-change:transform;
}

/* ✅ Logo */
.logo-wrapper{
  margin-bottom:12px;
}

.logo-wrapper svg{
  width:200px;
  max-width:80%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* ✅ Başlık */
h1{
  margin:20px 0 25px 0;
  font-size:22px;
}

/* ✅ Menü */
.menu{
  display:grid;
  gap:12px;
  margin-top:10px;
}

.menu a{
  padding:13px;
  border-radius:16px;
  text-decoration:none;
  font-weight:bold;
  color:#111;

  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.4);

  box-shadow:
    0 12px 25px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.7);

  transition:
    transform 0.25s cubic-bezier(.2,.6,.2,1),
    box-shadow 0.25s cubic-bezier(.2,.6,.2,1);

  will-change:transform;
}

/* ✅ Stabil Hover */
.menu a:hover{
  transform:translateY(-5px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ✅ Mobil Press */
.menu a:active{
  transform:translateY(-2px) scale(0.98);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(0,0,0,0.15);
}

.footer{
  margin-top:20px;
  font-size:14px;
}

/* ✅ Mobil */
@media (max-width:768px){
  .container{
    transform:scale(0.97);
  }

  .logo-wrapper svg{
    width:170px;
  }
}