:root{
  --ink:#1B1233;
  --ink-soft:#2E2150;
  --paper:#FFF6EA;
  --paper-alt:#FFECD6;
  --card-line: rgba(27,18,51,0.10);

  --sueda:#2FBF71;   /* yeşil */
  --hilal:#9D5CFF;   /* mor */
  --lidya:#FF5FA8;   /* pembe */
  --zoktay:#3E8EFF;  /* mavi */
  --mina:#FF4757;    /* kırmızı */
  --esin:#FFC93C;    /* sarı */

  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Mulish", system-ui, sans-serif;
  --mono: "Space Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); margin:0; color:var(--ink);}
p{margin:0;}
a{color:inherit;}
button{font-family:var(--body); cursor:pointer;}
::selection{background:var(--lidya); color:#fff;}
:focus-visible{outline:3px solid var(--zoktay); outline-offset:3px; border-radius:6px;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:"✦"; color:var(--lidya);}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,246,234,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
}
.logo{
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--ink);
  padding:4px 6px;
}
.logo .dot{
  width:10px; height:10px; border-radius:50%;
  background:conic-gradient(var(--sueda),var(--hilal),var(--lidya),var(--zoktay),var(--mina),var(--esin),var(--sueda));
  animation:spin 4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.navlinks{display:flex; gap:4px; list-style:none; margin:0; padding:0;}
.navlinks a{
  text-decoration:none; font-weight:700; font-size:0.88rem;
  padding:8px 12px; border-radius:999px; color:var(--ink-soft);
}
  .navlinks a:hover{background:var(--paper-alt); color:var(--ink);}
  .navlinks a.active{background:var(--paper-alt); color:var(--ink);}
.navtoggle{display:none; background:none; border:none; font-size:1.4rem;}
@media (max-width:760px){
  .navlinks{
    position:fixed; inset:60px 12px auto 12px; flex-direction:column;
    background:var(--paper); border:1px solid var(--card-line); border-radius:16px;
    padding:10px; box-shadow:0 12px 30px rgba(27,18,51,0.15);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s;
  }
  .navlinks.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .navlinks a{padding:12px 14px;}
  .navtoggle{display:block;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(157,92,255,0.35), transparent 60%),
    radial-gradient(50% 45% at 85% 10%, rgba(255,95,168,0.30), transparent 60%),
    radial-gradient(45% 40% at 60% 90%, rgba(62,142,255,0.25), transparent 60%),
    var(--ink);
  color:#fff;
  padding:64px 0 84px;
}
.hero::before{ /* spotlight beams */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(255,255,255,0.06) 0%, transparent 8%),
    linear-gradient(115deg, rgba(255,255,255,0.05) 0%, transparent 6%);
}
.stars{position:absolute; inset:0; pointer-events:none; opacity:0.5;}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;}}

.hero-eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:#F4C9E4; display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  font-weight:800; line-height:1.02;
  background:linear-gradient(95deg,#fff 10%, var(--lidya) 45%, var(--esin) 65%, var(--zoktay) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{margin-top:16px; font-size:1.05rem; color:#E7DEFF; max-width:46ch;}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.badge{
  font-weight:800; font-size:0.85rem; padding:9px 14px; border-radius:999px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; gap:6px;
}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.btn{
  border:none; border-radius:999px; padding:13px 22px; font-weight:800; font-size:0.95rem;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:linear-gradient(95deg, var(--lidya), var(--hilal)); color:#fff; box-shadow:0 10px 24px rgba(157,92,255,0.35);}
.btn-ghost{background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.35);}
.btn-dark{background:var(--ink); color:#fff;}

/* floating holo card in hero */
.hero-card-stage{display:flex; justify-content:center;}
.mini-card{
  width:220px; aspect-ratio:3/4.2; border-radius:22px; position:relative;
  background:
    conic-gradient(from 120deg, var(--sueda), var(--hilal), var(--lidya), var(--zoktay), var(--mina), var(--esin), var(--sueda));
  padding:5px;
  animation:float 5s ease-in-out infinite;
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-14px) rotate(2deg);}}
.mini-card-inner{
  width:100%; height:100%; border-radius:18px; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
}
.mini-card-inner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 45%, transparent 60%);
  animation:shine 3.2s linear infinite;
}
@keyframes shine{0%{transform:translateX(-120%) rotate(8deg);} 100%{transform:translateX(120%) rotate(8deg);}}
.mini-card-inner span{font-family:var(--display); font-weight:800; color:#fff; font-size:1.05rem; z-index:1;}
.mini-card-inner small{font-family:var(--mono); font-size:0.65rem; letter-spacing:.1em; color:#D9CBFF; z-index:1;}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.marquee-track{display:inline-block; padding:12px 0; animation:scroll 26s linear infinite;}
.marquee-track span{font-family:var(--mono); font-size:0.82rem; letter-spacing:0.08em; margin:0 22px; opacity:0.85;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- SECTIONS ---------- */
section.block{padding:76px 0;}
.block-head{max-width:640px; margin:0 auto 40px; text-align:center;}
.block-head h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-top:10px;}
.block-head p{margin-top:12px; color:var(--ink-soft); font-size:1rem;}

/* ---------- MEMBER CARDS ---------- */
.members-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
@media (max-width:760px){.members-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.members-grid{grid-template-columns:1fr;}}

.card3d{ perspective:1200px; }
.card3d-inner{
  position:relative; width:100%; aspect-ratio:3/4.1;
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1);
  border-radius:20px; cursor:pointer;
}
.card3d.flipped .card3d-inner{transform:rotateY(180deg);}
.face{
  position:absolute; inset:0; border-radius:20px; backface-visibility:hidden;
  display:flex; flex-direction:column; padding:20px; overflow:hidden;
}
.face-front{
  color:#fff; justify-content:flex-end;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,0.35), transparent 55%),
    var(--m-color);
  box-shadow:0 16px 34px rgba(27,18,51,0.20);
}
.face-front::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(130deg, transparent 35%, rgba(255,255,255,0.45) 48%, transparent 62%);
  transform:translateX(-130%);
  transition:transform .5s;
}
.card3d:hover .face-front::before{transform:translateX(130%);}
.face-front .initial{
  position:absolute; top:14px; left:16px; font-family:var(--display); font-weight:800;
  font-size:2.4rem; opacity:0.35;
}
.face-front .name{font-family:var(--display); font-weight:800; font-size:1.2rem;}
.face-front .role{font-family:var(--mono); font-size:0.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:0.9; margin-top:4px;}
.face-front .taphint{position:absolute; top:14px; right:16px; font-size:0.7rem; font-family:var(--mono); opacity:0.75;}

.face-back{
  background:var(--paper); border:2px solid var(--m-color); transform:rotateY(180deg);
  justify-content:center; gap:10px; text-align:center; align-items:center;
}
.face-back .chip{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--m-color); color:#fff; padding:6px 12px; border-radius:999px; font-weight:700;
}
.face-back .fact{font-size:0.9rem; color:var(--ink-soft);}
.face-back .name2{font-family:var(--display); font-weight:800; font-size:1.05rem;}

/* ---------- QUIZ ---------- */
.quiz-card{
  max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--card-line);
  border-radius:24px; padding:32px; box-shadow:0 20px 40px rgba(27,18,51,0.08);
}
.quiz-progress{display:flex; gap:6px; margin-bottom:22px;}
.quiz-progress i{flex:1; height:6px; border-radius:999px; background:var(--paper-alt);}
.quiz-progress i.done{background:linear-gradient(90deg, var(--lidya), var(--hilal));}
.q-title{font-family:var(--display); font-weight:800; font-size:1.25rem; margin-bottom:18px;}
.q-options{display:grid; gap:10px;}
.q-option{
  text-align:left; padding:14px 16px; border-radius:14px; border:2px solid var(--card-line);
  background:var(--paper); font-weight:700; font-size:0.95rem; transition:.15s;
}
.q-option:hover{border-color:var(--hilal); background:#fff;}
.quiz-result{display:none; text-align:center;}
.quiz-result.show{display:block;}
.quiz-body.hide{display:none;}
.result-badge{
  width:110px; height:110px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:2.2rem; color:#fff;
  background:var(--m-color, var(--lidya));
  box-shadow:0 14px 30px rgba(27,18,51,0.25);
}
.result-title{font-family:var(--display); font-weight:800; font-size:1.5rem;}
.result-fact{color:var(--ink-soft); margin-top:10px; max-width:44ch; margin-left:auto; margin-right:auto;}
.retake{margin-top:22px;}

/* ---------- GAMES ---------- */
.games-grid{display:grid; grid-template-columns:1fr; gap:44px;}
.game-panel{
  background:#fff; border:1px solid var(--card-line); border-radius:24px; padding:28px;
  box-shadow:0 16px 30px rgba(27,18,51,0.06);
}
.game-panel-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.game-panel-head h3{font-size:1.3rem;}
.stat{
  font-family:var(--mono); font-size:0.8rem; background:var(--paper-alt); padding:8px 14px; border-radius:999px; font-weight:700;
}

/* memory game */
.memo-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:440px; margin:0 auto;
}
@media (max-width:480px){.memo-grid{grid-template-columns:repeat(3,1fr);}}
.memo-cell{ perspective:800px; aspect-ratio:1; }
.memo-cell-inner{
  width:100%; height:100%; position:relative; transform-style:preserve-3d;
  transition:transform .45s; border-radius:12px;
}
.memo-cell.open .memo-cell-inner, .memo-cell.matched .memo-cell-inner{transform:rotateY(180deg);}
.memo-face{
  position:absolute; inset:0; border-radius:12px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:1.3rem;
}
.memo-back{background:linear-gradient(135deg, var(--hilal), var(--zoktay)); color:#fff; font-size:1.4rem;}
.memo-front{background:var(--mc,var(--lidya)); color:#fff; transform:rotateY(180deg);}
.memo-cell.matched .memo-front{opacity:0.55;}
.memo-cell button{
  all:unset; display:block; width:100%; height:100%; cursor:pointer;
  position:absolute; inset:0; z-index:2;
}
.memo-controls{display:flex; justify-content:center; margin-top:18px;}

/* song of the day */
.song-banner{
  background:linear-gradient(95deg, var(--hilal), var(--lidya));
  color:#fff; text-align:center; padding:14px 24px;
  font-weight:700; font-size:0.95rem;
}
.song-banner strong{font-family:var(--display); font-weight:800;}

/* mini arcade games */
.arcade-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px;}
@media (max-width:700px){.arcade-grid{grid-template-columns:1fr;}}
.arcade-canvas{
  width:100%; max-width:420px; height:260px; display:block; margin:0 auto;
  background:var(--ink); border-radius:16px; border:2px solid var(--card-line);
  touch-action:none; cursor:pointer;
}
.arcade-hint{
  text-align:center; font-size:0.85rem; color:var(--ink-soft); margin-top:10px;
}
.arcade-score{font-family:var(--mono); font-size:0.8rem; background:var(--paper-alt); padding:8px 14px; border-radius:999px; font-weight:700;}

/* rhythm lanes */
.rhythm-wrap{max-width:420px; margin:0 auto;}
.rhythm-lanes{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.rhythm-lane{
  position:relative; height:200px; border-radius:12px; overflow:hidden;
  background:var(--ink); border:2px solid var(--card-line);
}
.rhythm-target{
  position:absolute; left:0; right:0; bottom:28px; height:4px;
  background:linear-gradient(90deg, var(--lidya), var(--esin));
  box-shadow:0 0 12px var(--lidya);
}
.rhythm-note{
  position:absolute; left:50%; width:36px; height:36px; margin-left:-18px;
  border-radius:50%; top:-36px; transition:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.rhythm-lane button{
  all:unset; position:absolute; inset:0; cursor:pointer; z-index:2;
}
.rhythm-lane.hit .rhythm-target{animation:rhythmFlash .25s;}
@keyframes rhythmFlash{0%,100%{opacity:1;} 50%{opacity:0.3; transform:scaleY(2);}}
.rhythm-keys{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px;
}
.rhythm-key-btn{
  --lane-color: var(--hilal);
  font-family:var(--mono); font-size:0.72rem; font-weight:700; text-align:center;
  color:var(--ink-soft); background:var(--paper); border:2px solid var(--card-line);
  border-radius:12px; padding:14px 6px; min-height:48px; touch-action:manipulation;
  user-select:none; -webkit-tap-highlight-color:transparent; transition:transform .08s, background .08s, border-color .08s;
}
.rhythm-key-btn:hover{border-color:var(--lane-color); color:var(--ink);}
.rhythm-key-btn:active{
  transform:scale(0.94); background:var(--lane-color); color:#fff; border-color:var(--lane-color);
}
.win-msg{
  text-align:center; font-weight:800; margin-top:16px; color:var(--sueda); display:none;
}
.win-msg.show{display:block;}

/* painting canvas */
.paint-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px;}
.swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px var(--card-line);
  cursor:pointer; padding:0;
}
.swatch.active{box-shadow:0 0 0 3px var(--ink);}
.paint-toolbar input[type=range]{accent-color:var(--hilal);}
#paintCanvas{
  width:100%; max-width:640px; height:380px; display:block; margin:0 auto;
  background:#fff; border-radius:16px; border:2px dashed var(--card-line); touch-action:none;
}
.paint-actions{display:flex; justify-content:center; gap:10px; margin-top:14px;}

/* ---------- CHANNEL ---------- */
.channel-panel{
  background:var(--ink); color:#fff; border-radius:28px; padding:36px; display:grid;
  grid-template-columns:1fr 1fr; gap:30px; align-items:center; overflow:hidden; position:relative;
}
@media (max-width:800px){.channel-panel{grid-template-columns:1fr;}}
.channel-panel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 90% 0%, rgba(255,95,168,0.25), transparent 60%);
}
.channel-info{position:relative;}
.channel-info h3{color:#fff; font-size:1.5rem; margin-top:10px;}
.channel-info p{color:#D9CBFF; margin-top:12px;}
.yt-frame-wrap{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:#000;}
.yt-frame-wrap iframe{width:100%; height:100%; border:0;}

/* ---------- FOOTER / SECRET ---------- */
footer{padding:50px 0 70px; text-align:center;}
.heart-btn{
  background:none; border:none; font-size:1.4rem; padding:10px; border-radius:50%;
}
footer p{color:var(--ink-soft); font-size:0.85rem; margin-top:10px;}

.secret-modal{
  position:fixed; inset:0; background:rgba(27,18,51,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
  opacity:0; pointer-events:none; transition:.2s;
}
.secret-modal.show{opacity:1; pointer-events:auto;}
.secret-box{
  background:var(--paper); border-radius:24px; padding:36px; max-width:380px; text-align:center;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.secret-box .emoji{font-size:2.4rem;}
.secret-box h3{margin-top:10px;}
.secret-box p{margin-top:10px; color:var(--ink-soft);}

.confetti{position:fixed; top:-10px; z-index:200; border-radius:2px; pointer-events:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- SUBPAGE HERO ---------- */
.page-hero{
  background:var(--ink); color:#fff; padding:48px 0 56px; text-align:center;
}
.page-hero h1{
  font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800;
  background:linear-gradient(95deg,#fff 10%, var(--lidya) 50%, var(--esin) 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.page-hero p{margin-top:12px; color:#D9CBFF; max-width:50ch; margin-left:auto; margin-right:auto;}

/* ---------- GAME HUB CARDS ---------- */
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:760px){.hub-grid{grid-template-columns:1fr;}}
.hub-card{
  background:#fff; border:1px solid var(--card-line); border-radius:20px; padding:24px;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 12px 24px rgba(27,18,51,0.06); transition:transform .15s;
}
.hub-card:hover{transform:translateY(-4px);}
.hub-card .icon{font-size:2.2rem;}
.hub-card h3{font-size:1.15rem;}
.hub-card p{font-size:0.9rem; color:var(--ink-soft);}

/* ---------- RHYTHM PAGE ---------- */
.rhythm-page{max-width:720px; margin:0 auto;}
.song-picker{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; justify-content:center;}
.song-pick{
  border:2px solid var(--card-line); background:var(--paper); border-radius:999px;
  padding:8px 14px; font-weight:700; font-size:0.85rem; cursor:pointer;
}
.song-pick.active{border-color:var(--hilal); background:#fff;}
.song-pick:hover{border-color:var(--lidya);}
.yt-player-wrap{
  border-radius:16px; overflow:hidden; margin-bottom:18px;
  background:#000; aspect-ratio:16/9; max-width:480px; margin-left:auto; margin-right:auto;
}
.yt-player-wrap iframe{width:100%; height:100%; border:0;}
.rhythm-status{
  text-align:center; font-family:var(--mono); font-size:0.82rem; color:var(--ink-soft);
  margin-top:10px; min-height:1.4em;
}
.rhythm-status.perfect{color:var(--sueda); font-weight:800;}
.rhythm-status.miss{color:var(--mina); font-weight:800;}
.rhythm-lane.perfect .rhythm-target{background:var(--sueda); box-shadow:0 0 16px var(--sueda);}
.rhythm-lane.miss .rhythm-target{background:var(--mina);}

/* ---------- VOLLEYBALL ---------- */
.vball-wrap{max-width:480px; margin:0 auto;}
.vball-canvas{
  width:100%; height:320px; display:block; border-radius:16px;
  border:2px solid var(--card-line); touch-action:none; cursor:pointer;
  background:#87CEEB;
}