/* Atölye (playground) sayfası */
.atolye-sayfa { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; }
.atolye-sayfa .ust { flex: 0 0 auto; }
.menu a.aktif-sayfa { color: var(--or); }
.atolye { position: relative; flex: 1; min-height: 0; }
.sahne-atolye { position: absolute; inset: 0; }
.sahne-atolye canvas { display: block; width: 100%; height: 100%; }

.secimler {
  position: absolute; left: 16px; top: 14px; right: 16px; display: flex; gap: 14px; flex-wrap: wrap;
  pointer-events: none;
}
.secim-grup {
  pointer-events: auto; background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px);
  border-radius: 14px; padding: 8px 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); max-width: 100%;
}
.secim-grup small { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gri); font-weight: 700; margin: 0 2px 6px; }
.murekkepler { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; max-width: min(640px, calc(100vw - 52px)); padding-bottom: 2px; }
.murekkep {
  flex: 0 0 auto; border: 0; background: var(--lt); border-radius: 999px; padding: 5px 10px 5px 6px;
  font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.murekkep i { width: 16px; height: 16px; border-radius: 50%; background: var(--r); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); position: relative; }
.murekkep i.sedef::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--s), transparent 70%); }
.murekkep.aktif { background: var(--blk); color: #fff; }
.murekkep small { display: none; }
.mekanlar { display: flex; gap: 6px; }
.mekanlar button { border: 0; background: var(--lt); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.mekanlar button.aktif { background: var(--blk); color: #fff; }
.gorunum button { border: 0; background: var(--lt); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.gorunum button:hover { background: var(--blk); color: #fff; }
.rehber .kamera-ipucu { font-size: 12px; color: var(--gri); margin-top: 4px; }

/* kontroller listesi */
.kontroller { display: none; }
.kontrol { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 12.5px; line-height: 1.35; margin: 0 2px; }
.kontrol dt { font-weight: 700; color: var(--blk); white-space: nowrap; }
.kontrol dd { color: #4a4748; }
.kontrol.dokunmatik { display: none; }
@media (hover: none) { .kontrol.fare { display: none; } .kontrol.dokunmatik { display: grid; } }
.rehber.kompakt .kamera-ipucu { display: none; }

.rehber {
  position: absolute; left: 50%; bottom: 16px; translate: -50% 0; width: min(560px, calc(100% - 32px));
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-radius: 18px;
  padding: 14px 18px 14px; box-shadow: 0 8px 30px rgba(30, 28, 29, .16);
}
/* yazarken kart küçülür: kâğıt görünsün */
.rehber.kompakt .adim-noktalari, .rehber.kompakt #rehber-metin { display: none; }
.rehber.kompakt { padding: 10px 14px; }
.rehber.kompakt .rehber-bas h1 { font-size: 16px; }
.rehber.kompakt .murekkep-kalem { margin-top: 6px; }
.rehber.kompakt .rehber-eylem { margin-top: 8px; }
.adim-noktalari { list-style: none; display: flex; gap: 6px; margin-bottom: 10px; }
.adim-noktalari li { flex: 1; height: 4px; border-radius: 4px; background: var(--cizgi); }
.adim-noktalari li.tamam { background: var(--blk); }
.adim-noktalari li.simdi { background: var(--or); }
.rehber-bas { display: flex; align-items: center; gap: 10px; }
.rehber-no { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--or); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; }
.rehber h1 { font-size: 19px; font-weight: 800; }
.rehber p { margin-top: 6px; font-size: 14.5px; color: #3b3839; line-height: 1.45; }
.gosterge, .murekkep-kalem { margin-top: 10px; }
.gosterge[hidden], .murekkep-kalem[hidden] { display: none; }
.gosterge-ust { display: flex; justify-content: space-between; font-size: 13px; color: var(--gri); font-weight: 600; }
.gosterge-ust b { color: var(--blk); }
.gosterge-cubuk { height: 8px; border-radius: 8px; background: var(--lt); overflow: hidden; margin-top: 4px; }
.gosterge-cubuk span { display: block; height: 100%; width: 0; background: var(--or); border-radius: 8px; transition: width .12s; }
.murekkep-kalem span:first-child { font-size: 12.5px; color: var(--gri); font-weight: 600; }
.murekkep-kalem .gosterge-cubuk span { background: var(--blk); }
.rehber-eylem { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.rehber-eylem .dugme { padding: 9px 16px; font-size: 14px; }
.rehber-eylem [hidden] { display: none; }
.baglanti { border: 0; background: none; color: var(--gri); font-size: 13.5px; text-decoration: underline; margin-left: auto; }
.baglanti:hover { color: var(--or); }

.bildirim {
  position: absolute; left: 50%; top: 92px; translate: -50% 0; background: var(--blk); color: #fff;
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  transition: opacity .3s; max-width: calc(100% - 32px); text-align: center;
}
.bildirim[hidden] { display: block; opacity: 0; pointer-events: none; }

.resim-onizleme { position: fixed; inset: 0; z-index: 50; background: rgba(20, 18, 19, .82); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; }
.resim-onizleme figure { background: #fff; border-radius: 16px; padding: 12px; width: min(520px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.resim-onizleme img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 8px; -webkit-touch-callout: default; }
.resim-onizleme figcaption { font-size: 13.5px; color: var(--gri); }
.resim-onizleme div { display: flex; gap: 8px; }

.atolye-yukleme { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--fon); transition: opacity .4s; }
.atolye-yukleme.bitti { opacity: 0; pointer-events: none; }
.atolye-yukleme[hidden] { display: none; }
.atolye-yukleme small { color: var(--gri); }


/* ---------- masaüstü: seçimler solda dikey panel ---------- */
@media (min-width: 900px) {
  .secimler {
    top: 16px; bottom: 16px; left: 16px; right: auto; width: 292px;
    flex-direction: column; flex-wrap: nowrap; gap: 10px; overflow-y: auto; scrollbar-width: thin;
  }
  .secim-grup { width: 100%; flex: 0 0 auto; padding: 10px 12px; }
  .murekkepler { flex-direction: column; gap: 4px; max-width: none; overflow-x: visible; overflow-y: auto; max-height: 30vh; padding: 0 2px 0 0; }
  .murekkep { width: 100%; border-radius: 10px; padding: 6px 10px 6px 8px; font-size: 13px; justify-content: flex-start; }
  .murekkep small { display: inline; margin-left: auto; font-weight: 600; color: var(--gri); font-size: 11.5px; }
  .murekkep.aktif small { color: rgba(255, 255, 255, .7); }
  .mekanlar { flex-wrap: wrap; }
  .kontroller { display: block; }
  .rehber .kamera-ipucu { display: none; }   /* kontroller panelde yazıyor */
  /* rehber kartı ve bildirim: sol panelin sağında kalan alanın ortası */
  .rehber, .bildirim { left: calc(324px + (100% - 324px) / 2); }
  .rehber { width: min(560px, calc(100% - 356px)); }
  .bildirim { top: 20px; }
}

@media (max-width: 720px) {
  .secimler { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .secim-grup { padding: 6px 8px; }
  .secim-grup small { display: none; }
  .murekkepler { max-width: calc(100vw - 32px); }
  .rehber { bottom: 8px; width: calc(100% - 16px); padding: 12px 14px; }
  .rehber h1 { font-size: 17px; }
  .rehber p { font-size: 13.5px; }
  .bildirim { top: 104px; font-size: 13px; }
}