/* This file ONLY affects index.html (body.home-page). It won't touch player.html etc. */

body.home-page{
  /* leave existing styles.css untouched; just prevent fixed bars overlapping content */
  padding-top: 56px;
  padding-bottom: 76px;
}

/* Hide the old "Merhaba / Ödül / Ebeveyn" block on HOME only (kept in HTML, just not shown) */
body.home-page .topbar{ display:none !important; }

/* Fixed transparent top icons */
body.home-page .homeTop{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  background:transparent;
  z-index:9999;
  pointer-events:none; /* allow hero buttons etc behind, except actual buttons */
}
body.home-page .homeTop *{ pointer-events:auto; }

body.home-page .homeTop__btn{
  width:38px;
  height:38px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  cursor:pointer;
}
body.home-page .homeTop__btn img{
  width:22px;
  height:22px;
}

body.home-page .homeTop__right{
  display:flex;
  align-items:center;
  gap:10px;
}

body.home-page .homeTop__pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:999px;
  text-decoration:none;
  color:#111;
  font-weight:700;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
body.home-page .homeTop__pill img{ width:20px; height:20px; }

/* Bottom nav (HOME only) */
body.home-page .homeNav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:64px;
  background:#fff;
  display:flex;
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -6px 20px rgba(0,0,0,.14);
  z-index:9999;
}
body.home-page .homeNav__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-decoration:none;
  color:#111;
  font-weight:700;
  font-size:12px;
}
body.home-page .homeNav__item img{ width:22px; height:22px; }


/* === Kids Gate (YouTube Kids style) === */
#kidsGateOverlay{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.22);
  z-index:100000;
  pointer-events:auto;
}
#kidsGateOverlay.isOpen{ display:flex; }
.kgGateCard{
  width:min(520px, 100%);
  background:#fff;
  border-radius:22px;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  overflow:hidden;
  pointer-events:auto;
}
.kgGateHead{ text-align:center; padding:18px 18px 8px; }
.kgGateMascot{ width:92px; height:92px; object-fit:contain; margin:0 auto 8px; display:block; }
.kgGateTitle{ margin:0; font-size:22px; }
.kgGateSub{ margin:6px 0 0; color:#666; font-size:13px; }
.kgGateStep{ padding:14px 18px 18px; }
.kgBtnRow{ display:flex; gap:12px; }
.kgBtn{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 14px;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  z-index:1;
}
.kgBtnBlack{ background:#111; color:#fff; }
.kgBtnGold{
  background:linear-gradient(180deg,#ffda4d,#ffb400);
  color:#111;
}
.kgBtnGoogle{
  background:#fff;
  color:#111;
  border:2px solid #e7e7e7;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.kgBtnGoogle:disabled{ opacity:.55; cursor:not-allowed; }
.kgGIcon{
  width:26px; height:26px; border-radius:8px;
  background:#fff;
  border:1px solid #eee;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
}
.kgLink{
  margin:10px auto 0;
  display:block;
  background:transparent;
  border:none;
  color:#333;
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
}
.kgLabel{ display:block; font-weight:900; margin-bottom:8px; }
.kgInput{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:2px solid #eee;
  outline:none;
  font-size:15px;
}
.kgInput:focus{ border-color:#ffd24a; box-shadow:0 0 0 4px rgba(255,210,74,.25); }
.kgDivider{ height:1px; background:#eee; margin:14px 0; }
.kgSmall{ color:#666; font-size:12px; margin-top:8px; text-align:center; }
.kgTiny{ color:#999; font-size:12px; }
.kgGateFoot{ padding:10px 18px 14px; border-top:1px solid #f2f2f2; text-align:center; }

.kgPills{ display:flex; gap:10px; margin-top:10px; }
.kgPill{
  flex:1;
  padding:10px 10px;
  border-radius:999px;
  border:2px solid #e9e9e9;
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.kgPill.isOn{
  border-color:#ffcf3a;
  background:rgba(255,207,58,.22);
}

.kgAvGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:10px;
}
.kgAv{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:999px;
}
.kgAv img{
  width:64px; height:64px;
  border-radius:999px;
  object-fit:cover;
  border:3px solid transparent;
}
.kgAv.isSel img{
  border-color:#ffcf3a;
  box-shadow:0 0 0 6px rgba(255,207,58,.25), 0 0 18px rgba(255,180,0,.35);
  animation:kgPulse 1.1s ease-in-out infinite;
}
@keyframes kgPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.04); }
}

/* === Age filtering (3-5 only cartoons) === */
body.age-3-5 #activitiesGrid,
body.age-3-5 #kidsMp3Dock,
body.age-3-5 #rewardCount,
body.age-3-5 #rewardCountWrap,
body.age-3-5 #oyunlar,
body.age-3-5 #sarkilar,
body.age-3-5 .homeNav__item[href="reward.html"],
body.age-3-5 .homeNav__item[href="#oyunlar"],
body.age-3-5 .homeNav__item[href="#sarkilar"]{
  display:none !important;
}

/* Gate: child help info box */
.kgInfoBox{
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 14px;
  line-height: 1.35;
  font-size: 14px;
  color: #222;
  margin: 6px 0 12px;
}