/* ============================================================
   ÖĞRETİCİ + TIKLANABİLİRLİK İPUÇLARI  (ogretici.js ile birlikte çalışır)
   index.html ve oyun.html ikisi de bu dosyayı yükler.
   style.css / engine.js'e dokunmaz.
   ============================================================ */

/* cqw birimleri için sahne bir "container" olmalı.
   oyun.html'de style.css zaten yapıyor; index.html'de bu satır sağlıyor. */
#stage-frame, #stageFrame { container-type: inline-size; }

/* ---------- ÖĞRETİCİ KARTI ---------- */
.ogr-kart{
  position:absolute; z-index:45;
  width:46cqw; max-width:calc(100% - 4cqw);
  background:rgba(20,14,8,.94);
  border:1px solid #c98a2c; border-radius:.9cqw;
  box-shadow:0 1cqw 3cqw rgba(0,0,0,.65);
  padding:1.3cqw 1.7cqw 1.5cqw;
  color:#e9e2cf; text-align:left;
  font-size:clamp(13px,1.8cqw,20px); line-height:1.5;
  animation:ogrGir .35s ease both;
}
@keyframes ogrGir{
  from{ opacity:0; transform:translateY(-1cqw); }
  to{ opacity:1; transform:none; }
}

/* İçerik uzunsa kart değil, sadece içerik kayar; ✕ düğmesi kartın köşesinde sabit kalır */
.ogr-icerik{ max-height:44cqw; overflow-y:auto; }

/* konumlar — kart ortalanırken transform kullanılmıyor (giriş animasyonuyla çakışmasın diye) */
.ogr-ust-orta{ top:3cqw; left:0; right:0; margin:0 auto; }
.ogr-ust-sol { top:3cqw; left:8cqw; }
.ogr-ust-sag { top:6cqw; right:3cqw; }
.ogr-alt-orta{ bottom:3cqw; left:0; right:0; margin:0 auto; }
.ogr-orta    { top:0; bottom:0; left:0; right:0; margin:auto; height:fit-content; }

.ogr-baslik{
  color:#e3a94a; font-weight:700; letter-spacing:.02em;
  font-size:1.15em; margin:0 0 .5cqw;
}
.ogr-metin p{ margin:0 0 .55cqw; }

.ogr-kapat{
  position:absolute; top:0; right:0; padding:0; z-index:1;
  transform:translate(40%,-40%);   /* kartın sağ üst köşesinden dışarı taşar */
  width:clamp(30px,3.2cqw,42px); height:clamp(30px,3.2cqw,42px);
  border-radius:50%; background:#1c1d18; border:1px solid #c98a2c;
  color:#e3a94a; font-size:clamp(13px,1.6cqw,19px); line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ogr-kapat:hover{ background:#c98a2c; color:#171712; }

.ogr-tamam{
  display:block; margin:.9cqw 0 0 auto; min-height:28px;
  background:#c98a2c; border:none; border-radius:.5cqw;
  padding:.5cqw 1.6cqw; color:#171712; font-family:inherit;
  font-weight:700; font-size:1em; cursor:pointer;
}
.ogr-tamam:hover{ background:#e3a94a; }

/* ---------- İKON + AÇIKLAMA SATIRLARI ---------- */
.ogr-maddeler{ display:grid; grid-template-columns:1fr; gap:.8cqw 1.6cqw; margin-top:.8cqw; }
.ogr-maddeler.iki-sutun{ grid-template-columns:1fr 1fr; }
.ogr-madde{ display:flex; align-items:center; gap:.9cqw; }
.ogr-ikon{
  flex:none; width:clamp(24px,3.6cqw,46px); height:clamp(24px,3.6cqw,46px);
  object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  animation:ogrIkonNabiz 1.6s ease-in-out infinite;
}
@keyframes ogrIkonNabiz{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
.ogr-madde-metin b{ color:#e3a94a; font-weight:700; }

/* ---------- SOHBET MİNİ ÖRNEĞİ (2 tık gösterir) ---------- */
.ogr-demo{
  display:flex; align-items:center; gap:1.4cqw;
  margin-top:.8cqw; padding:.8cqw 1cqw;
  background:rgba(255,255,255,.04); border-radius:.6cqw;
}
.ogr-demo-sol{ position:relative; flex:none; }
.ogr-demo-kar{ display:block; height:clamp(46px,9cqw,110px); width:auto; object-fit:contain; }
.ogr-demo-el{
  position:absolute; right:-1.2cqw; bottom:.6cqw; width:clamp(22px,3.6cqw,44px); height:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  animation:ogrDemoEl 6s ease-in-out infinite;
}
.ogr-demo-sag{ flex:1; min-width:0; }
.ogr-demo-balon{
  background:rgba(10,10,8,.85); border:1px solid #c98a2c; border-radius:.6cqw;
  padding:.6cqw 1cqw;
}
.ogr-demo-isim{ color:#e3a94a; font-size:.92em; margin-bottom:.2cqw; }
.ogr-demo-satirlar, .ogr-demo-adim{ display:grid; }
.ogr-demo-satir, .ogr-demo-adim span{ grid-area:1/1; }
.ogr-demo-satir.a, .ogr-demo-adim .a{ animation:ogrSatirA 6s ease-in-out infinite; }
.ogr-demo-satir.b, .ogr-demo-adim .b{ animation:ogrSatirB 6s ease-in-out infinite; }
.ogr-demo-adim{ margin-top:.5cqw; font-size:.93em; color:#c98a2c; }
@keyframes ogrSatirA{ 0%,44%{ opacity:1; } 50%,94%{ opacity:0; } 100%{ opacity:1; } }
@keyframes ogrSatirB{ 0%,44%{ opacity:0; } 50%,94%{ opacity:1; } 100%{ opacity:0; } }
@keyframes ogrDemoEl{
  0%,100%{ transform:translate(0,0) scale(1); }
  4%{ transform:translate(-.4cqw,-.4cqw) scale(.82); }
  10%{ transform:translate(0,0) scale(1); }
  54%{ transform:translate(0,0) scale(1); }
  58%{ transform:translate(-.4cqw,-.4cqw) scale(.82); }
  64%{ transform:translate(0,0) scale(1); }
}

/* ---------- VURGU HALKASI (öğretici açıkken gösterilen öğe) ---------- */
.ogr-vurgu{ animation:ogrHalka 1.5s ease-in-out infinite; }
.mors-yazi-alani.ogr-vurgu{ background:rgba(227,169,74,.16); border-radius:4px; }
@keyframes ogrHalka{
  0%,100%{ box-shadow:0 0 0 2px rgba(227,169,74,.85), 0 0 4px 2px rgba(227,169,74,.25); }
  50%{ box-shadow:0 0 0 3px rgba(227,169,74,1), 0 0 16px 6px rgba(227,169,74,.5); }
}

/* ---------- KARAKTER PARILTISI ---------- */
@keyframes ogrKarakterNabiz{
  0%,100%{ filter:drop-shadow(0 0 2px rgba(227,169,74,.28)) drop-shadow(0 0 6px rgba(227,169,74,.10)) drop-shadow(0 10px 25px rgba(0,0,0,.6)); }
  50%{     filter:drop-shadow(0 0 4px rgba(227,169,74,.65)) drop-shadow(0 0 12px rgba(227,169,74,.32)) drop-shadow(0 10px 25px rgba(0,0,0,.6)); }
}
.scene-character:not(.talking){ animation:ogrKarakterNabiz 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .scene-character:not(.talking){
    animation:none;
    filter:drop-shadow(0 0 4px rgba(227,169,74,.45)) drop-shadow(0 10px 25px rgba(0,0,0,.6));
  }
  .ogr-ikon, .ogr-vurgu, .ogr-demo-el{ animation:none; }
}

/* ---------- GERİ DÜĞMESİ ---------- */
.hotspot-pulse-wrap img[src$="geri.webp"],
.nabiz-ikon-wrap img[src$="geri.webp"]{
  box-sizing:border-box; padding:7%;
  background:#1c1d18; border:1px solid #3a3b30; border-radius:9px;
  box-shadow:0 3px 10px rgba(0,0,0,.6);
}

/* ---------- "(Mekana yürünüyor...)" KATMANI ---------- */
.yuk-katman{
  position:absolute; inset:0; z-index:9999; background:#050403;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.yuk-katman.aktif{ opacity:1; pointer-events:auto; }
.yuk-metin{
  color:#e9dcc0; font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:clamp(19px,3.1cqw,35px); animation:yukNabiz 1.8s ease-in-out infinite;
}
@keyframes yukNabiz{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .yuk-metin{ animation:none; } }