:root{
  --bg:#f5fff9;
  --dark:#0f3d2e;
  --accent:#1aa66a;
  --accent2:#1b7cff;
  --card:#ffffff;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ 
  scroll-behavior:smooth;
  overflow-x: hidden;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#123;
  overflow-x: hidden;
  width: 100%;
}

/* NAV */
nav{
  position: fixed;
  top:0;
  left:0;
  right:0;
  width: 100%;
  z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
}

.nav-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.menu-toggle{
  display:none;
  padding: 8px 12px;
  border:none;
  background: transparent;
  color: var(--dark);
  font-size: 24px;
  font-weight:700;
  cursor:pointer;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.menu-toggle:hover{
  background: rgba(0,0,0,.05);
}

.nav-logo-link{
  text-decoration: none;
}

.menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:12px 16px;
  flex: 1;
}

.menu a{
  text-decoration:none;
  color: var(--dark);
  font-weight:600;
  padding:8px 10px;
  border-radius: 10px;
}
.menu a[href="#"]{
  pointer-events: auto;
  cursor: default;
}
.menu a[href="#"]:hover::after,
.menu a[href="#"]::before{
  display: none !important;
  content: none !important;
}

.menu a:hover{
  background: rgba(26,166,106,.12);
}

.logo-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(135deg, rgba(26,166,106,.22), rgba(27,124,255,.24));
  padding:8px 14px;
  border-radius: 999px;
  font-weight:800;
  letter-spacing: .5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.logo-badge:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  background: linear-gradient(135deg, rgba(26,166,106,.28), rgba(27,124,255,.30));
}
.logo-icon{
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}
.logo-badge:hover .logo-icon{
  transform: scale(1.05);
}
.logo-text{
  text-transform: uppercase;
  font-size: 15px;
}

/* HEADER */


.hero{
  width: 100%;
  height: 670px; /* yüksekliği ayarlayabilirsin */
  margin-top: 60px;
  background-image: url("hero.webp");
  background-size: cover;       /* resmi doldurur */
  background-position: center;  /* ortalar */
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgb(64, 190, 26);
  position: relative;
}

/* Yazının okunması için koyu overlay */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
/* Hero'dan background'a smooth geçiş - alttan kesme */
.hero::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  /* Üstte tamamen şeffaf, altta sadece arka plan rengine doğru geçiş.
     Böylece siyah çizgi olmadan yumuşak bir geçiş sağlanır. */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    var(--bg) 100%
  );
  z-index: 1;
}

.hero-content{
  position: relative;
  z-index: 2;
}

.hero h1{
  font-size: 80px;
  margin: 0;
}

.hero p{
  color: #e9fbf2;
  font-size: 50px;
  margin-top: 10px;
}

.spark{
  position:absolute;
  font-size: 28px;
  opacity: .22;
}

/* SECTIONS */
section{
  padding: 26px 14px 34px;
  /* Sticky menü yüksekliği için offset; anchor'a kayarken üstten biraz boşluk bırak */
  scroll-margin-top: 90px;
}
.section-strip{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap:10px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(26,166,106,.48), rgba(26,166,106,.62));
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  box-sizing: border-box;
}
.section-strip span:first-child{
  font-weight: 900;
  font-size: 18px;
  color: #053326;
}

.section-content{
  max-width: 1100px;
  margin: 0 auto;
}

.card-container{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 16px;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  width: min(520px, 100%);
  border: 1px solid rgba(0,0,0,.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

.card.small{ width: 260px; }
.card.tip{ width: 260px; }

.card-info h3{
  margin: 0 0 8px;
  color: var(--dark);
}
.card-info p{
  margin: 6px 0;
  color: rgba(0,0,0,.72);
}

.photo-container{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}
.photo-img{
  width: 160px;
  height: 160px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.photo-placeholder{
  width: 160px;
  height: 120px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px dashed rgba(0,0,0,.15);
  background: rgba(26,166,106,.06);
  color: rgba(0,0,0,.55);
  font-weight:700;
}

/* videos */
.video-container{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  justify-content:center;
}
.video{
  width: min(360px, 100%);
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.04);
}
.video iframe{
  width:100%;
  height:100%;
}

/* image row placeholder */
.image-row{
  margin-top: 16px;
  display:flex;
  justify-content:center;
  gap: 12px;
}
.img-box{
  width: 120px;
  height: 90px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  background: rgba(27,124,255,.08);
  border: 1px solid rgba(0,0,0,.04);
}

/* Experiment mini actions */
.mini-actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
button{
  border:none;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--dark);
  color: #fff;
  font-weight: 800;
}
button:hover{ opacity:.92; }

.muted{ color: rgba(0,0,0,.55); }

/* Smart callout */
.callout{
  margin-top: 14px;
  background: rgba(26,166,106,.10);
  border: 1px solid rgba(26,166,106,.18);
  padding: 12px 14px;
  border-radius: 14px;
}

/* Quiz */
.quiz{ background: #e9fbf2; }
.center{ text-align:center; }

.cardquiz{
  width: min(520px, 100%);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  border: 1px solid rgba(0,0,0,.04);
}
.cardquiz h3{ margin:0 0 10px; color: var(--dark); }
label{ display:inline-block; margin: 6px 0; }

.quiz-result-container{
  margin-top: 16px;
  text-align:center;
}
#restart-quiz-btn{ display:none; background: var(--accent2); }
.quiz-result{ margin-top: 10px; font-weight: 800; }

/* Game */
.game-wrap{
  display:flex;
  justify-content:center;
  margin: 12px 0;
}
.rooms-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 520px;
}
.room{
  background: #f7f7f7;
  border-radius: 18px;
  padding: 12px 10px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.room-icon{
  font-size: 34px;
  margin-bottom: 6px;
}
.room-name{
  font-weight: 700;
  color: var(--dark);
  font-size: 14px;
}
.room-state{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,.6);
}
.room.on{
  background: #fffbe0;
  box-shadow: 0 14px 30px rgba(255,193,7,.35);
}
.room.on .room-state{
  color: #c67b00;
}
.room:active{
  transform: scale(.96);
}
#gameOverMessage{
  display:none;
  color: #b00020;
  font-weight: 900;
  text-align:center;
}
#restart-btn{ display:none; background: var(--accent); }
.name-input{
  margin-top: 10px;
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.name-input input{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  width: 220px;
}

/* Footer */
footer{
  text-align:center;
  padding: 18px 12px;
  color: rgba(0,0,0,.55);
}

/* Responsive nav */
@media (max-width: 860px){
  nav{
    flex-direction: column;
    align-items: stretch;
  }
  .nav-header{
    width: 100%;
  }
  .menu-toggle{ 
    display: block;
  }
  .menu{
    padding: 0;
  }
  .menu-items{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap: 6px;
    background: rgba(255,255,255,.98);
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .menu-items.open{ display:flex; }
}