:root{--navy:#101c43;--teal:#159a9c;--coral:#ef6f78}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{color:var(--navy);font-family:Arial,Helvetica,sans-serif;background:#eef8f6}button,input{font:inherit}button{cursor:pointer}.experience{min-height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 23%,#fff 0,#fffaf0 31%,#e8f7f4 70%,#d9efeb 100%)}.topbar{height:76px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;gap:13px;background:#ffffffe8;border-bottom:1px solid #101c431a;backdrop-filter:blur(12px);position:relative;z-index:20}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--coral),#e84b62);font-family:Georgia,serif;font-size:26px;font-weight:800;box-shadow:0 7px 18px #ef6f7840}.topbar p{margin:0 0 2px;color:#65808a;font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}.topbar h1{margin:0;font-family:Georgia,serif;font-size:21px;line-height:1}.level{margin-left:auto;background:#e7f7f4;color:#087d7f;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:800;text-decoration:none;transition:transform .18s,box-shadow .18s}.level:hover,.level:focus-visible{transform:translateY(-1px);box-shadow:0 6px 16px rgba(8,125,127,.18);outline:2px solid rgba(8,125,127,.25);outline-offset:2px}.stage{min-height:calc(100svh - 76px);position:relative;text-align:center;padding:25px 18px 18px}.glow{position:absolute;width:min(640px,70vw);height:300px;border-radius:50%;background:#fff9c9;filter:blur(70px);opacity:.68;left:50%;top:90px;transform:translateX(-50%)}.eyebrow{position:relative;margin:0 0 8px;color:#148d8f;font-size:11px;letter-spacing:.18em;font-weight:900}.stage h2{position:relative;margin:0;font-family:Georgia,serif;font-size:clamp(28px,4vw,48px);line-height:1.05}.lead{position:relative;margin:9px auto 0;color:#617982;font-size:14px}.cast{position:relative;width:min(1180px,96vw);height:min(57vw,550px);min-height:400px;margin:2px auto 0}.character{margin:0;position:absolute;bottom:0;width:16%;height:76%;transform-origin:50% 100%;transition:transform .85s cubic-bezier(.2,.85,.22,1),filter .7s,opacity .7s,left .8s,bottom .8s}.character img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 15px 11px #223b4829)}.character figcaption{display:inline-block;transform:translateY(-13px);padding:5px 10px;border-radius:999px;background:#ffffffe0;box-shadow:0 4px 15px #294c5a1b;font-size:11px;font-weight:800;white-space:nowrap}.pos-1{left:0;transform:scale(.82);bottom:5%}.pos-2{left:11.5%;transform:scale(.9);bottom:2%}.pos-3{left:23%;transform:scale(.97)}.pos-4{left:34.5%;z-index:3}.pos-5{left:49.5%;z-index:3}.pos-6{left:61%;transform:scale(.97)}.pos-7{left:72.5%;transform:scale(.9);bottom:2%}.pos-8{left:84%;transform:scale(.82);bottom:5%}.start-button{position:absolute;z-index:10;left:50%;bottom:30px;transform:translateX(-50%);border:0;border-radius:999px;background:linear-gradient(135deg,#ef6572,#e94762);color:#fff;padding:15px 38px;font-weight:900;font-size:17px;box-shadow:0 14px 34px #df526153;transition:.2s}.start-button:hover{transform:translateX(-50%) translateY(-3px)}.start-button span{font-size:12px;margin-right:8px}.is-active .waiting{opacity:.3;filter:saturate(.65) blur(.3px);transform:scale(.7)}.is-active .active-character{z-index:8;left:42%;bottom:8%;transform:scale(1.22)}.is-active .active-character figcaption{opacity:0}.dialog{position:absolute;z-index:12;left:50%;bottom:18px;transform:translateX(-50%);width:min(650px,91vw);text-align:left;background:#fffffff5;border:1px solid #fff;border-radius:24px;padding:18px 20px 17px;box-shadow:0 22px 70px #14354538;animation:rise .5s ease-out}.speaker{display:flex;align-items:center;gap:10px;margin-bottom:10px}.speaker>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#ef6f78;color:#fff;font-family:Georgia,serif;font-weight:900}.speaker strong,.speaker small{display:block}.speaker strong{font-family:Georgia,serif;font-size:16px}.speaker small{color:#759099;font-size:10px;margin-top:2px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.speech{margin:0;white-space:pre-line;color:#334d58;font-size:14px;line-height:1.55;max-height:124px;overflow:auto}.cursor{display:inline-block;width:2px;height:1em;background:#ef6f78;margin-left:2px;vertical-align:-2px;animation:blink .7s infinite}.answer-area{margin-top:13px;padding-top:12px;border-top:1px solid #e5efed}.answer-area label{display:block;margin-bottom:7px;font-size:11px;font-weight:900;color:#147f82;text-transform:uppercase;letter-spacing:.1em}.answer-row{display:flex;gap:8px}.answer-row input{min-width:0;flex:1;border:1.5px solid #cfe3df;border-radius:12px;padding:11px 13px;color:#203d48;background:#fbfefd;outline:none}.answer-row input:focus{border-color:#21a1a3;box-shadow:0 0 0 3px #21a1a31a}.answer-row button{border:0;border-radius:12px;font-weight:900}.mic{width:43px;background:#e7f7f4;color:#118789}.mic.listening{animation:pulse 1s infinite;background:#ffdfe3;color:#dc4055}.send{padding:0 17px;background:#153f79;color:#fff}.send span{margin-left:5px}.send:disabled,.mic:disabled{opacity:.5}.feedback{margin:8px 0 0;color:#d54156;font-size:12px;font-weight:700}@keyframes rise{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes blink{50%{opacity:0}}@keyframes pulse{50%{transform:scale(1.08)}}
@media(max-width:700px){.topbar{height:64px;padding:0 15px}.brand-mark{width:36px;height:36px;border-radius:11px}.topbar h1{font-size:17px}.topbar p{display:none}.level{padding:7px 10px}.stage{min-height:calc(100svh - 64px);padding-top:17px}.stage h2{font-size:29px}.lead{font-size:13px;max-width:310px}.cast{height:calc(100svh - 175px);min-height:500px;width:100%}.character{display:none}.character.active-character,.experience:not(.is-active) .pos-4{display:block;left:50%;transform:translateX(-50%) scale(1.08);width:min(72vw,330px);height:78%;bottom:2%}.experience:not(.is-active) .pos-4 figcaption{font-size:12px}.is-active .active-character{left:50%;bottom:18%;transform:translateX(-50%) scale(1.08)}.dialog{bottom:10px;padding:15px;border-radius:20px}.speech{max-height:115px;font-size:13px}.answer-row{flex-wrap:wrap}.answer-row input{flex-basis:calc(100% - 51px)}.send{height:42px;flex:1}.start-button{bottom:24px}}
@media(min-width:701px) and (max-height:760px){.cast{height:470px}.dialog{width:620px}.speech{max-height:95px}.stage{padding-top:14px}.stage h2{font-size:34px}}

/* Konuşma turu: aktif karakter üst sahneyi, diyalog kutusu alt alanı kullanır. */
.is-active .waiting{
  opacity:.16;
  filter:saturate(.42) brightness(.68);
  transform:scale(.56);
}
.is-active .active-character{
  z-index:8;
  left:50%;
  bottom:122px;
  width:34%;
  height:calc(100% - 82px);
  transform:translateX(-50%) scale(1.08);
}
.is-active .active-character figcaption{opacity:0}
.is-active .dialog{width:min(720px,91vw)}
.speech{
  min-height:52px;
  margin:0;
  color:#334d58;
  font-family:Georgia,serif;
  font-size:clamp(20px,2.4vw,28px);
  font-weight:700;
  line-height:1.5;
  overflow:visible;
}
.sync-word{opacity:.18;transition:opacity .12s,color .12s,background .12s}
.sync-word.is-heard{opacity:1}
.sync-word.is-current{padding:2px 3px;border-radius:6px;color:#8a2737;background:#ffe1aa}

@media(max-width:700px){
  .is-active .active-character{
    display:block;
    left:50%;
    bottom:188px;
    width:min(88vw,400px);
    height:calc(100% - 155px);
    transform:translateX(-50%) scale(1.08);
  }
  .is-active .dialog{bottom:10px;padding:14px;border-radius:20px}
  .is-active .speech{min-height:43px;max-height:none;font-size:18px;line-height:1.4}
}

/* Sahnenin alt kenarında ferah bir güvenli alan bırakır. */
.start-button{bottom:clamp(30px,4vh,46px)}
.dialog{bottom:clamp(28px,4vh,46px)}

@media(max-width:700px){
  .start-button{bottom:28px}
  .dialog,.is-active .dialog{
    top:clamp(280px,38svh,330px);
    bottom:auto;
    min-height:170px;
  }
}

.answer-label{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.answer-area .answer-label label{display:inline;margin:0}
.answer-help{display:grid;width:25px;height:25px;place-items:center;border:0;border-radius:50%;color:#fff;background:#ef6f78;font-weight:900;box-shadow:0 4px 10px #ef6f7840}
.answer-help.is-speaking{animation:pulse .7s infinite alternate;background:#159a9c}
.answer-row .mic{width:auto;min-width:88px;padding:0 11px;white-space:nowrap}
.answer-row .mic span{margin-right:4px;font-size:16px}

/* Karakter görselleri için seçilen ortak, düz sahne rengi: #F2FAF7 */
.experience,.stage{background:#f2faf7}
.glow{display:none}
.stage{padding-bottom:58px}

@media(max-width:700px){
  .stage{min-height:calc(100svh - 64px + 34px);padding-bottom:72px}
  .start-button{bottom:44px}
}

@media(min-width:701px){
  .character figcaption[role="button"]{cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
  .character figcaption[role="button"]:hover,.character figcaption[role="button"]:focus-visible{transform:translateY(-16px) scale(1.06);outline:2px solid #159a9c;outline-offset:2px;background:#fff;box-shadow:0 8px 22px #173f4938}
}
.is-complete .character{opacity:1;filter:none}
.is-complete .start-button{background:linear-gradient(135deg,#159a9c,#087d7f);box-shadow:0 14px 34px #159a9c4d}

.intro-footer-nav{
  display:flex;
  justify-content:center;
  gap:12px;
  padding:30px 18px 46px;
  background:#f2faf7;
}
.intro-footer-nav a{
  display:inline-flex;
  min-width:145px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 18px;
  border:1px solid #cfe5de;
  border-radius:999px;
  color:#17664f;
  background:#fff;
  box-shadow:0 8px 22px rgba(24,91,70,.1);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.intro-footer-nav a:last-child{color:#fff;border-color:#17664f;background:#17664f}
.intro-footer-nav a:hover,.intro-footer-nav a:focus-visible{transform:translateY(-2px);box-shadow:0 12px 27px rgba(24,91,70,.17)}

@media(max-width:700px){
  .intro-footer-nav{padding:38px 16px 58px}
  .intro-footer-nav a{min-width:0;flex:1;padding:12px 10px}
}

/* Masaüstünde sekiz karakterin tamamını görünür alana kilitler. */
@media(min-width:701px){
  .cast{width:min(1120px,calc(100vw - 48px));overflow:visible}
  .character{width:14.25%}
  .pos-1{left:0}.pos-2{left:12.25%}.pos-3{left:24.5%}.pos-4{left:36.75%}
  .pos-5{left:49%}.pos-6{left:61.25%}.pos-7{left:73.5%}.pos-8{left:85.75%}
  .intro-footer-nav{
    position:relative;
    z-index:30;
    width:100%;
    min-height:116px;
    align-items:flex-start;
    border-top:1px solid #d8ebe5;
    box-shadow:0 -12px 30px rgba(29,87,70,.05);
  }
}