/* BKE - geri yükleme (mevcut assets isimleriyle uyumlu) */
:root{
  --bg:#f5f6fa;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --shadow:0 14px 40px rgba(15,23,42,.10);
  --r:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* HERO */
.hero{position:relative;height:320px;overflow:hidden;background:#000}
.hero__video{width:100%;height:100%;object-fit:cover;display:block}
.hero__text{position:absolute;left:16px;right:16px;bottom:14px;color:#fff;text-shadow:0 10px 28px rgba(0,0,0,.45)}
.hero__text h1{margin:0;font-size:22px;font-weight:1000}
.hero__text p{margin:6px 0 0;font-size:12px;opacity:.9}
.hero__btn{
  position:absolute;top:14px;width:40px;height:40px;border-radius:999px;border:none;
  background:rgba(255,255,255,.18);backdrop-filter:blur(4px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;
}
.hero__btn--left{left:14px}
.hero__btn--right{right:14px}

/* TOPBAR */
.topbar{
  margin:-18px 14px 0;
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.topbar__left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar__avatar{width:40px;height:40px;border-radius:999px;background:#fde68a;display:flex;align-items:center;justify-content:center;font-weight:1000}
.topbar__hello{font-weight:1000}
.topbar__sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.topbar__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.pill{display:flex;align-items:center;gap:8px;background:#e9e7ff;color:#1f2937;border-radius:999px;padding:8px 10px;font-weight:900;font-size:12px;text-decoration:none}
.pill__num{background:#fff;border-radius:999px;padding:2px 8px}
.pill--ghost{background:#fff;border:1px solid rgba(15,23,42,.08)}

/* WRAP */
.wrap{padding:14px}
.section{margin-top:14px}
.h2{margin:0;font-size:18px;font-weight:1000}
.p{margin:6px 0 0;color:var(--muted);font-size:12px}

/* GRID 2x2 (Etkinlik / Oyun) */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.tile{display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#000;aspect-ratio:1/1}
.tile img{width:100%;height:100%;object-fit:cover;display:block}

/* FLIP CARD (Etkinlikler) */
.flipCard{
  border:none;padding:0;background:transparent;cursor:pointer;
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
}
.flipCard__inner{
  position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .6s ease;
}
.flipCard__face{
  position:absolute;inset:0;backface-visibility:hidden;
}
.flipCard__face img{width:100%;height:100%;object-fit:cover;display:block}
.flipCard__back{transform:rotateY(180deg)}
.flipCard.isFlipped .flipCard__inner{transform:rotateY(180deg)}
.cardsGrid .flipCard{aspect-ratio:1/1}

/* WIDE (Çizgi Filmler) */
.wide{display:block;text-decoration:none;color:inherit;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.wide__media{position:relative;background:#000}
.wide__v{width:100%;height:190px;object-fit:cover;display:block;background:#000}
.wide__badge{position:absolute;left:14px;top:14px;width:42px;height:42px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:1000}
.wide__body{padding:12px}
.wide__title{font-weight:1000}
.wide__desc{margin-top:4px;color:var(--muted);font-size:12px}
.sp{height:12px}

/* GALERİ */
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:2px 0 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-top:12px}
.hitem{flex:0 0 auto;width:72%;max-width:340px;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;background:#000;box-shadow:var(--shadow)}
.hitem img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* Kısa Videolar (Home Grid) - DİKEY 3/4 */
.shortGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
.shortTile{display:block;border-radius:18px;overflow:hidden;box-shadow: var(--shadow);background:#000;aspect-ratio:3/4;}
.shortTile__video{width:100%;height:100%;object-fit:cover;display:block;background:#000}

/* SONGS */
.song{margin-top:12px}
.song__row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:12px}
.song__row + .song__row{margin-top:10px}
.song__btn{width:44px;height:44px;border-radius:999px;border:none;background:rgba(15,23,42,.06);cursor:pointer;font-size:18px}
.song__title{font-weight:1000}
.song__sub{margin-top:2px;color:var(--muted);font-size:12px}
.mini{margin-top:12px;display:flex;align-items:center;gap:10px;background:rgba(17,24,39,.92);color:#fff;border-radius:var(--r);padding:10px 12px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.mini__t{font-weight:900;font-size:12px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini__p{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:999px;width:38px;height:38px;cursor:pointer}
.mini__r{flex:1}

/* Celebrate overlay */
.celebrate{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:80}
.celebrate__card{background:#fff;border-radius:22px;padding:18px 18px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.celebrate__stars{font-size:22px}
.celebrate__text{margin-top:8px;font-weight:1000}

/* FIX: ödül sayfasında yatay taşmayı engelle */
body.kgRewardPage{ overflow-x:hidden; }


/* === HERO FIX (overlay + readability) === */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 45%, rgba(0,0,0,.65));
  pointer-events:none;
}
.hero__text{
  max-width:70%;
}
.hero__text h1{
  font-size:28px;
  line-height:1.1;
}
.hero__text p{
  font-size:14px;
  opacity:.95;
}
@media (min-width:768px){
  .hero{height:420px}
  .hero__text h1{font-size:36px}
}