/* ============ Sesli dinle vurgusu + etkileşim animasyonları ============ */

/* Okunan kelime ve altında kayan altın çizgi */
.content p span.w { transition: color .25s, background-color .25s; border-radius: 3px; }
.content p span.w.now { color: #2a1c10; background-color: rgba(232, 196, 110, .35); box-shadow: 0 0 0 2px rgba(232, 196, 110, .35); }
.rbar {
  position: absolute; height: 3px; border-radius: 3px; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(90deg, #c9962e, #f0d49e, #c9962e); box-shadow: 0 0 10px rgba(240, 200, 110, .9);
  transition: left .22s cubic-bezier(.3,.7,.3,1), top .3s cubic-bezier(.3,.7,.3,1), width .22s ease, opacity .3s;
}
.rbar.show { opacity: 1; }
.toptools .pill .eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.toptools .pill .eq i { width: 3px; background: currentColor; border-radius: 1px; animation: eq .8s ease-in-out infinite; }
.toptools .pill .eq i:nth-child(2) { animation-delay: .2s; } .toptools .pill .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 12px; } }

/* Yarım sayfanın altına yerleşen resimli görev */
.inline-task { border-top: 1px dashed #bca37c; padding-top: 10px; height: auto; }
.inline-task .ribbon span { font-size: 11px; padding: 3px 20px 4px; }
.inline-task h3 { font-size: 1.2em; }
.inline-task h3::after { display: none; }
.inline-task .say { min-height: 40px; }
.inline-task .say .avatar { width: 40px; height: 40px; }
.inline-task .say .bubble { font-size: 14px; padding: 5px 10px; }
.inline-task .scene { min-height: 120px; }

/* Adım göstergesi (ör. 1/3) */
.steps { position: absolute; right: 8px; top: 8px; z-index: 6; display: flex; gap: 5px; padding: 5px 8px; border-radius: 999px; background: rgba(30, 24, 30, .55); backdrop-filter: blur(3px); }
.steps i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #f3e1b0; transition: background .3s, transform .3s; }
.steps i.on { background: #f0cf7e; transform: scale(1.15); }

/* Uçan kalpler, ışık parçacıkları */
.fx-heart, .fx-spark { position: absolute; z-index: 8; pointer-events: none; }
.fx-heart { width: 22px; height: 20px; }
.fx-spark { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(#fff8d6, #f2c85a 60%, transparent 70%); box-shadow: 0 0 8px #ffd56b; }
.fx-text { position: absolute; z-index: 8; pointer-events: none; font-family: var(--hand, cursive); font-size: 22px; color: #fff4d0; text-shadow: 0 2px 6px rgba(0,0,0,.6); white-space: nowrap; }

/* Raftan çıkan kitap */
.flybook { position: absolute; z-index: 9; transform-style: preserve-3d; perspective: 900px; }
.flybook .cv, .flybook .pg { position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; }
.flybook .pg { background: linear-gradient(90deg, #e9dcc0, #fbf3df 8%, #f6ead0); box-shadow: inset 6px 0 10px -6px rgba(0,0,0,.4), 0 18px 30px rgba(0,0,0,.45); display: grid; place-items: center; text-align: center; padding: 10%; font-family: var(--hand, cursive); color: #6b4a2b; font-size: clamp(12px, 1.6vw, 18px); line-height: 1.3; }
.flybook .cv { transform-origin: left center; backface-visibility: hidden; background: linear-gradient(90deg, #4f2b19 0 7%, #7a4426 7%, #8a4f2c); border: 1px solid #3a1f10; box-shadow: inset 0 0 0 4px #7a4426, inset 0 0 0 5px #d8b45c, 0 14px 24px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #f0cf7e; font-family: Georgia, serif; letter-spacing: 2px; font-size: clamp(11px, 1.5vw, 17px); text-shadow: 0 1px 0 #3a1f10; }
.flybook .cv b { font-weight: 400; font-size: 1.35em; }
.flybook .cv small { font-size: .7em; opacity: .85; margin-top: 6px; }
.flybook .glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(rgba(255, 226, 150, .55), transparent 65%); z-index: -1; animation: halo 2s ease-in-out infinite; }

/* Sandık ışık huzmesi */
.rays { position: absolute; left: 50%; top: 40%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); opacity: 0; z-index: 4; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 160, .55) 0 8deg, transparent 8deg 22deg); border-radius: 50%;
  mask: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); transition: opacity .8s, transform 1.2s cubic-bezier(.2,1.2,.4,1); }
.pic.swap .rays { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: rays 12s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.keyholes { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 8px; justify-content: center; z-index: 6; }

/* Işık yayılması (Çıra) */
.lightup { position: absolute; z-index: 3; width: 10%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(rgba(255, 240, 170, .95), rgba(255, 210, 90, .45) 35%, transparent 70%); animation: lightup 2.2s ease-out forwards; }
@keyframes lightup { 0% { width: 4%; opacity: 0; } 30% { opacity: 1; } 100% { width: 70%; opacity: .55; } }

/* Sürüklenen jeton uçuşu ve "doğru yer" */
.token.fly { transition: left .6s cubic-bezier(.3,1.3,.5,1), top .6s cubic-bezier(.3,1.3,.5,1), transform .6s, opacity .4s .5s; }
.spot.drop-target.over { transform: translate(-50%, -50%) scale(1.25); }
.tok-label { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-size: 11px; color: #fff6dc; text-shadow: 0 1px 3px #000; white-space: nowrap; font-family: var(--ui, sans-serif); pointer-events: none; }

/* İp çizilerek ilerlesin */
.draw { stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawLine 1.4s ease forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.pulse-dot { animation: travel 1.6s ease-in-out infinite; }

/* Kelime oyunu: harf uçarak yerine */
.slot-l.pop { animation: popIn .35s cubic-bezier(.3,1.6,.5,1) both; }
.tile:not(.used):hover { transform: translateY(-3px) rotate(-2deg); }
.tile { transition: transform .15s; }

/* Tüy süzülerek iner */
.feather-fall { animation: fall 3.2s ease-in-out both, sway 1.6s ease-in-out infinite; }
@keyframes fall { from { top: -30%; } to { top: 20%; } }
@keyframes sway { 0%,100% { transform: rotate(-10deg) translateX(-6px); } 50% { transform: rotate(10deg) translateX(6px); } }

/* Rüzgar çizgileri */
.wind-line { position: absolute; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff8e6, transparent); z-index: 5; pointer-events: none; animation: gust .7s ease-out forwards; }
@keyframes gust { from { transform: translateX(-60%); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(160%); opacity: 0; } }
.task { position: relative; }
.inline-task .skip { top: 6px; }
.inline-task .say { margin-bottom: 2px; }

/* Seslendirme oynatıcısı (alt çubukta) */
.player { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid #b79c6540; border-radius: 999px; background: #1d1a2488; color: #e3d0ad; font-family: var(--ui); }
.player .pb { min-width: 32px; height: 32px; border-radius: 50%; color: #e3d0ad; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.player .pb small { position: absolute; font-size: 8px; bottom: 4px; }
.player .pb:hover { background: #ffffff14; }
.player .pb.play { background: #dcb974; color: #2d2a33; font-size: 13px; width: 36px; height: 36px; }
.player input[type=range] { accent-color: #dcb974; cursor: pointer; }
.player #pSeek { flex: 1; min-width: 60px; }
.player .ptime { font-size: 11px; color: #b6a487; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player .vol { display: inline-flex; align-items: center; gap: 2px; }
.player #pVol { width: 70px; }
@media (max-width: 860px) { .player .vol #pVol { display: none; } .player .ptime { display: none; } .player { gap: 4px; padding: 2px 6px; } }