:root{
  --mor:#7c3aed;
  --pembe:#ec4899;
  --turuncu:#f59e0b;
  --sari:#fde047;
  --mavi:#38bdf8;
  --cam:#ffffffd8;
  --yazi:#0f172a;
  --golge:0 18px 40px rgba(15,23,42,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  color:var(--yazi);
  background:linear-gradient(180deg,#8ddcff 0%,#b29cff 35%,#f6b3dd 70%,#fde68a 100%);
  min-height:100vh;
  overflow-x:hidden;
}
button,input{font-family:inherit}
.bg-shape{
  position:fixed;border-radius:999px;background:#fff5;filter:blur(5px);pointer-events:none;z-index:0;
  animation: floaty 8s ease-in-out infinite;
}
.s1{width:120px;height:120px;top:40px;left:30px}
.s2{width:180px;height:180px;top:90px;right:30px;animation-delay:1.2s}
.s3{width:80px;height:80px;top:35%;left:22%;animation-delay:2.5s}
.s4{width:140px;height:140px;bottom:80px;right:18%;animation-delay:.6s}
.s5{width:90px;height:90px;bottom:20px;left:50px;animation-delay:1.7s}
@keyframes floaty {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
.app{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.logo-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{width:min(100%,560px);height:auto}
.maker-badge{
  display:flex;align-items:center;gap:10px;background:var(--cam);padding:10px 14px;border-radius:999px;
  border:4px solid #fff;box-shadow:var(--golge);font-weight:800
}
.maker-badge img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.start-btn,.send-btn,.small-btn,.intro-btn{
  border:none;cursor:pointer;font-weight:900;border-radius:22px;box-shadow:0 10px 0 rgba(0,0,0,.12);
  transition:transform .12s ease, filter .2s ease;
}
.start-btn:hover,.send-btn:hover,.small-btn:hover,.intro-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.start-btn,.intro-btn{background:linear-gradient(135deg,#fde047,#f59e0b);color:#8a1c88;padding:16px 24px;font-size:20px}
.send-btn{background:linear-gradient(135deg,#86efac,#22c55e);color:#14532d;padding:16px 24px;font-size:20px}
.small-btn{background:linear-gradient(135deg,#bae6fd,#38bdf8);color:#0c4a6e;padding:10px 14px;font-size:14px}
.start-btn:disabled,.send-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.grid{display:grid;grid-template-columns:1.45fr .9fr;gap:24px;margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card,.panel{
  background:var(--cam);border:4px solid #fff;border-radius:34px;box-shadow:var(--golge);backdrop-filter: blur(8px);
}
.stat{padding:16px}
.stat h3{margin:0 0 8px;font-size:14px}
.stat .v{font-size:30px;font-weight:900}
.stat1{background:linear-gradient(135deg,#fde68a,#fdba74)}
.stat2{background:linear-gradient(135deg,#fbcfe8,#ddd6fe)}
.stat3{background:linear-gradient(135deg,#bae6fd,#7dd3fc)}
.stat4{background:linear-gradient(135deg,#fecdd3,#fda4af)}
.game{padding:22px}
.headline{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.word-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:var(--pembe);margin-bottom:8px}
.word-pill{
  display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(90deg,var(--pembe),var(--mor));color:white;padding:14px 20px;border-radius:28px;
  font-size:clamp(30px,6vw,54px);font-weight:900;box-shadow:0 12px 30px rgba(124,58,237,.22)
}
.next-letter{
  min-width:148px;text-align:center;padding:14px 16px;background:linear-gradient(135deg,#86efac,#4ade80);
  border-radius:28px;border:4px solid #fff;box-shadow:var(--golge)
}
.next-letter small{display:block;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#166534}
.next-letter strong{display:block;font-size:46px;color:#14532d;margin-top:2px}
.input-row{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:18px}
#kelimeGirdisi{
  width:100%;padding:18px 20px;font-size:20px;font-weight:800;border-radius:26px;border:4px solid #bae6fd;background:#f0f9ff;outline:none
}
#kelimeGirdisi:focus{border-color:var(--pembe)}
.feedback{margin-top:16px;padding:14px 16px;border-radius:24px;border:4px solid #fff;font-weight:800;min-height:60px;display:flex;align-items:center}
.feedback.info{background:#e0f2fe;color:#075985}
.feedback.ok{background:#dcfce7;color:#166534}
.feedback.err{background:#ffe4e6;color:#be123c}
.feedback.end{background:#fef3c7;color:#b45309}
.panel{padding:18px}
.panel h2{margin:0 0 14px;color:var(--pembe);font-size:24px}
.rule-list{margin:0;padding-left:18px}
.rule-list li{margin-bottom:10px;font-weight:700}
.learn-card{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;border:4px solid #fff;border-radius:26px;
  padding:14px;background:linear-gradient(135deg,#cffafe,#f5d0fe)
}
.learn-card .mini-photo{width:86px;height:110px;object-fit:cover;border-radius:18px;border:4px solid #fff}
.learn-word{font-size:30px;font-weight:900;color:#a21caf;text-transform:lowercase}
.learn-tr{font-weight:800;color:#0f766e;margin-top:6px}
.learn-ex{margin-top:6px;font-weight:700}
.progress-wrap{height:20px;border-radius:999px;background:#e0f2fe;border:4px solid #fff;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,#e879f9,#fb7185,#facc15);width:0;transition:width .25s ease}
.rows .row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding:13px 16px;
  border:4px solid #fff;border-radius:22px;background:linear-gradient(90deg,#cffafe,#ede9fe);font-weight:800
}
.chain{
  max-height:320px;overflow:auto;padding:12px;border:4px solid #fff;border-radius:24px;background:#f0f9ff;
  display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start
}
.tag{
  border-radius:999px;padding:8px 12px;background:linear-gradient(90deg,#f9a8d4,#fde68a);border:4px solid #fff;
  color:#a21caf;font-weight:900
}
.side-mascot{
  margin-top:12px;display:flex;justify-content:center
}
.side-mascot img{
  width:100%;max-width:240px;border-radius:30px;border:5px solid #fff;box-shadow:var(--golge);object-fit:cover
}
#tepkiOverlay,#harikaOverlay,#intro{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:20;
}
#tepkiOverlay.show,#harikaOverlay.show,#intro.show{display:flex}
.overlay-bg{position:absolute;inset:0;background:rgba(15,23,42,.34);backdrop-filter:blur(4px)}
.tepki-card,.harika-card,.intro-card{
  position:relative;z-index:1;background:var(--cam);border:5px solid #fff;border-radius:34px;box-shadow:var(--golge);
}
.tepki-card{padding:16px;text-align:center;max-width:min(92vw,430px)}
.tepki-card img{width:min(100%,340px);border-radius:24px;border:4px solid #fff}
.tepki-card h3{margin:12px 0 4px;font-size:34px}
.tepki-card p{margin:0;font-weight:800}
.show-pop{animation: pop .45s ease}
@keyframes pop{
  0%{transform:scale(.7);opacity:0}
  70%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.harika-card{
  padding:18px;text-align:center;width:min(92vw,520px)
}
.harika-title{
  font-size:48px;font-weight:900;line-height:1;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.18);
  background:linear-gradient(135deg,#f97316,#ef4444);display:inline-block;padding:12px 20px;border-radius:28px;border:4px solid #fff
}
.harika-sub{margin:10px 0 14px;font-size:22px;font-weight:900;color:#8a1c88}
.harika-video{width:100%;max-height:360px;border-radius:26px;border:4px solid #fff;background:#000}
.harika-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.harika-gif{width:120px;border-radius:18px;border:4px solid #fff}
#intro{background:linear-gradient(180deg,#7dd3fc 0%,#b29cff 40%,#f9a8d4 75%,#fde68a 100%)}
.intro-card{
  width:min(94vw,760px);padding:28px;text-align:center;overflow:hidden
}
.intro-logo{width:min(100%,560px)}
.intro-sub{font-size:22px;font-weight:800;color:#475569;margin:10px auto 18px;max-width:560px}
.intro-photos{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:14px 0 20px}
.intro-photos img{width:170px;height:220px;object-fit:cover;border-radius:26px;border:5px solid #fff;box-shadow:var(--golge)}
.pulse{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
.sparkles{
  position:absolute;inset:0;pointer-events:none;background:
    radial-gradient(circle at 12% 18%, #fff7 0 3px, transparent 4px),
    radial-gradient(circle at 82% 22%, #fff8 0 3px, transparent 4px),
    radial-gradient(circle at 18% 74%, #fff8 0 3px, transparent 4px),
    radial-gradient(circle at 76% 78%, #fff7 0 3px, transparent 4px),
    radial-gradient(circle at 48% 12%, #fff8 0 3px, transparent 4px);
  animation: twinkle 2.8s linear infinite;
}
@keyframes twinkle{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}
.footer-note{margin-top:10px;font-size:13px;font-weight:700;color:#475569}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .input-row{grid-template-columns:1fr}
  .topbar{align-items:stretch}
  .start-btn{width:100%}
}
@media (max-width: 480px){
  .stats{grid-template-columns:1fr}
  .maker-badge{width:100%;justify-content:center}
  .intro-photos img{width:130px;height:170px}
}