/* interactions/global.css
   Interaction-wide shared styles (Master)
   Works with fixed 1920x1080 stage system
*/

/* ===============================
   GLOBAL DISABLED (Next lock)
   =============================== */
.disabled,
[aria-disabled="true"]{
  pointer-events:none !important;
  filter:grayscale(1) brightness(.75);
  opacity:.55;
  cursor:not-allowed;
  transition:opacity .18s ease, filter .18s ease;
}

/* ===============================
   STAGE (GLOBAL)
   - theme.service.js sets:
     --stage-bg   (background.png)
     --stage-font (theme driven)
   =============================== */
.stage{
  /* background */
  background-image: var(--stage-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ✅ stage font (theme-driven) */
  font-family: var(--stage-font, var(--font-system, "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
}

/* ===============================
   SHARED HEADER (MWP / FTW / CO...)
   - decorative header removed
   - titles use glassmorphism directly
   =============================== */
.mwp-header,
.mwp-header::before{
  display:none !important;
}

.mwp-intro-title,
.mwp-title,
.cts-intro-title,
.cts-title{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  pointer-events:auto;
  z-index:2;

  color:var(--ui-header-text, #ffffff);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* glassmorphism */
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:
    0 10px 30px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.18);

  border-radius:22px;

  /* text readability */
  text-shadow:
    0 1px 2px rgba(0,0,0,.18),
    0 2px 10px rgba(0,0,0,.12);
}

/* ===============================
   MWP TITLES
   =============================== */
.mwp-intro-title{
  left:24px;
  top:18px;

  height:58px;
  padding:0 28px;

  display:inline-flex;

  max-width:1200px;

  font-weight:900;
  font-size:38px;
  line-height:1;
}

.mwp-title{
  left:24px;
  top:84px;

  height:64px;
  padding:0 28px;

  display:inline-flex;

  max-width:1300px;

  font-weight:900;
  font-size:30px;
  line-height:1;
}

/* ===============================
   CTS HEADER TEXTS
   - same visual language
   =============================== */
.cts-intro-title{
  left:24px;
  top:18px;

  height:58px;
  padding:0 28px;

  display:inline-flex;

  max-width:1200px;

  font-weight:900;
  font-size:30px;
}

.cts-title{
  left:24px;
  top:84px;

  height:64px;
  padding:0 28px;

  display:inline-flex;

  max-width:1300px;

  font-weight:900;
  font-size:38px;
}

/* =========================================================
   ISDAR STANDARD CHECK BUTTON
   Used by: mwp, cts, co, fib
========================================================= */

.mwp-check,
.cts-check,
.co-check,
.fib-check{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:70px;
  font-family: var(--stage-font);

  width:210px;
  height:125px;

  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  border:0;
  outline:none;
  border-radius:0;

  background-color:transparent;
  box-shadow:none;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;
  pointer-events:auto;

  z-index:3;
}

.mwp-check:active,
.cts-check:active,
.co-check:active,
.fib-check:active{
  transform:translateX(-50%) scale(.98);
}

.mwp-check-text,
.cts-check-text,
.co-check-text,
.fib-check-text{
  width:160px;
  text-align:center;

  font-weight:900;
  font-size:26px;
  line-height:1;

  color:var(--ui-text);
  pointer-events:none;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ===============================
   SHARED INLINE EDIT HOVER (Editor)
   =============================== */
[data-edit]{
  outline:2px dashed transparent;
  border-radius:10px;
}
[data-edit]:hover{ outline-color:#cbd5e1; }
[data-edit].editing{
  outline-color:#2563eb !important;
  background:rgba(238, 242, 255, .65);
}

/* ===============================
   SHARED DRAG SAFETY (Player mode)
   - Dragging element stays on top
   - Lets drop targets receive pointer hits
   =============================== */
body[data-mode="player"] .is-dragging{
  z-index:9999 !important;
  pointer-events:none !important;
}

/* ===============================
   SHARED 1704x633.1 FRAME REGION (FTW/CO family)
   Optional helper classes (use if you want)
   =============================== */
.isdar-frame-1704{
  position:absolute;
  left:108px;
  top:223.5px;
  width:1704px;
  height:633.1px;
}
.isdar-inner-1704{
  position:absolute;
  left:108px;
  top:223.5px;
  width:1704px;
  height:633.1px;
  padding:54px 80px 60px 80px;
  box-sizing:border-box;
}

/* ===============================
   GLOBAL PLAYER NAV (single source)
   - play.php (or player.js) renders .isdar-nav once
   - player.js manages lock/unlock
   =============================== */
.isdar-nav{
  position:absolute;
  left:0; top:0;
  width:1920px;
  height:1080px;
  pointer-events:none; /* container kapalı: sadece butonlar tıklanır */
  z-index:9000;
}

.player-prev, .player-next{
  position:absolute;
  top:950px;
  width:100px;
  height:100px;

  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;

  pointer-events:auto; /* nav container kapalı ama buton açık */
  border:0;
  box-shadow:none;
  outline:none;
  background-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}

.player-prev{ left:1674px; background-image: var(--ui-prev-bg); }
.player-next{ left:1786px; background-image: var(--ui-next-bg); }

.player-prev:active,
.player-next:active{
  transform:scale(.98);
}

.player-prev:focus,
.player-next:focus,
.player-prev:focus-visible,
.player-next:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* ===============================
   LEGACY ENGINE NAV (safety)
   - If any engine still renders .mwp-prev/.mwp-next/.cts-prev/.cts-next,
     hide & disable them when using global player nav.
   =============================== */
body[data-nav="player"] .mwp-prev,
body[data-nav="player"] .mwp-next,
body[data-nav="player"] .cts-prev,
body[data-nav="player"] .cts-next{
  pointer-events:none !important;
  opacity:0 !important;
  transform:none !important;
}

/* ===============================
   LEGACY NAV STYLES (kept for editor/old mode)
   - These are only visible when body[data-nav] is NOT "player".
   =============================== */
.mwp-prev, .mwp-next,
.cts-prev, .cts-next{
  position:absolute;
  top:950px;
  width:100px;
  height:100px;

  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  user-select:none;

  z-index:30;
  border:0;
  box-shadow:none;
  outline:none;
  background-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}

/* legacy positions (same as player) */
.mwp-prev, .cts-prev{ left:1674px; background-image: var(--ui-prev-bg); }
.mwp-next, .cts-next{ left:1786px; background-image: var(--ui-next-bg); }

.mwp-prev:active, .mwp-next:active,
.cts-prev:active, .cts-next:active{
  transform:scale(.98);
}

/* İçindeki ok/yazı kullanılmıyorsa */
.mwp-nav-text,
.cts-nav-text{
  display:none !important;
}

/* Focus çizgilerini kapat */
.mwp-prev:focus, .mwp-next:focus,
.mwp-prev:focus-visible, .mwp-next:focus-visible,
.cts-prev:focus, .cts-next:focus,
.cts-prev:focus-visible, .cts-next:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

/* ===============================
   HIDE NAV ON INTRO / OUTRO
   (player.js bypassTypes: intro,outro)
   =============================== */
body[data-nav="player"] .slide.is-active[data-type="intro"] ~ .isdar-nav,
body[data-nav="player"] .slide.is-active[data-type="outro"] ~ .isdar-nav{
  display:none !important;
}

/* =========================================================
   ISDAR STANDARD KEYFRAMES (shared)
   ========================================================= */
@keyframes isdar-wiggleGlow{
  0%{transform:translateY(0) rotate(0deg) scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));}
  20%{transform:translateY(-2px) rotate(-2deg) scale(1.02); filter:brightness(1.08) drop-shadow(0 0 10px rgba(255,255,255,.55));}
  40%{transform:translateY(0) rotate(2deg) scale(1.02); filter:brightness(1.10) drop-shadow(0 0 14px rgba(255,255,255,.60));}
  65%{transform:translateY(-1px) rotate(-1deg) scale(1.01); filter:brightness(1.06) drop-shadow(0 0 10px rgba(255,255,255,.45));}
  100%{transform:translateY(0) rotate(0deg) scale(1); filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));}
}

@keyframes isdar-successBounce{
  0%{transform:scale(1);}
  35%{transform:scale(1.08);}
  60%{transform:scale(.98);}
  100%{transform:scale(1);}
}

/* ===============================
   PLAYER MODE – prevent selection on common texts (optional)
   CTS özel: drag/second text tıklanmasın
   =============================== */
body[data-mode="player"] .cts-drag-text,
body[data-mode="player"] .cts-second-text{
  pointer-events:none;
}

/* ===============================
   MEDIA PICKER MODAL (Editor)
   - Used by window.pickImage()
   =============================== */
.isdar-media-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  font-family:inherit;
}

.isdar-media-modal .imm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, .55); /* slate-900 */
  backdrop-filter: blur(4px);
}

.isdar-media-modal .imm-card{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:1000px;
  max-width:calc(100vw - 40px);

  height:80vh;
  max-height:900px;

  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.isdar-media-modal .imm-head{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px 0 18px;
  border-bottom:1px solid rgba(226,232,240,.9);
  background:linear-gradient(180deg, #fff, #f8fafc);
}

.isdar-media-modal .imm-title{
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
}

.isdar-media-modal .imm-x{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(203,213,225,.9);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  line-height:1;
}
.isdar-media-modal .imm-x:active{ transform:scale(.98); }
.isdar-media-modal .imm-x:focus,
.isdar-media-modal .imm-x:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

.isdar-media-modal .imm-tabs{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(226,232,240,.9);
  background:#fff;
}

.isdar-media-modal .imm-tab{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(203,213,225,.95);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
  user-select:none;
}
.isdar-media-modal .imm-tab.is-active{
  border-color:rgba(37,99,235,.55);
  background:rgba(238,242,255,.7);
}

.isdar-media-modal .imm-body{
  padding:14px;
  overflow:auto;
  flex:1;
}

.isdar-media-modal .imm-pane{ display:none; }
.isdar-media-modal .imm-pane.is-active{ display:block; }

.isdar-media-modal .imm-file{
  width:100%;
  height:44px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(203,213,225,.95);
  background:#fff;
  box-sizing:border-box;
}

.isdar-media-modal .imm-hint{
  margin-top:10px;
  font-size:13px;
  opacity:.75;
  font-weight:700;
}

.isdar-media-modal .imm-upload{
  margin-top:12px;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(37,99,235,.55);
  background:rgba(238,242,255,.7);
  cursor:pointer;
  font-weight:900;
}
.isdar-media-modal .imm-upload:active{ transform:scale(.99); }

.isdar-media-modal .imm-msg{
  margin-top:10px;
  font-weight:800;
  font-size:13px;
  color:#b91c1c; /* red-700 */
  min-height:18px;
}

/* ===============================
   Uploads library grid — SQUARE CARDS + TRASH (DOM: .imm-itemwrap + img + .imm-itempick + .imm-itemdel)
   =============================== */

.isdar-media-modal .imm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}

@media (max-width: 820px){
  .isdar-media-modal .imm-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 620px){
  .isdar-media-modal .imm-grid{ grid-template-columns:repeat(2, 1fr); }
}

/* === KARE KART === */
.isdar-media-modal .imm-itemwrap{
  position:relative;
  aspect-ratio:1 / 1;
  border:1px solid rgba(203,213,225,.95);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.isdar-media-modal .imm-itemwrap:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  border-color:rgba(37,99,235,.30);
}

/* === RESİM: her zaman kartı doldursun === */
.isdar-media-modal .imm-itemwrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}

/* === SEÇ: tüm kart tıklanabilir olsun (buton görünmez overlay) === */
.isdar-media-modal .imm-itemwrap .imm-itempick{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:1;

  /* yazı görünmesin */
  color:transparent;
  font-size:0;
}

/* === ÇÖP: sağ altta küçük ikon butonu === */
.isdar-media-modal .imm-itemwrap .imm-itemdel{
  position:absolute;
  right:10px;
  bottom:10px;

  width:36px;
  height:36px;
  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(203,213,225,.9);
  background:rgba(255,255,255,.95);
  cursor:pointer;

  box-shadow:0 6px 16px rgba(0,0,0,.18);
  z-index:2;

  /* metni gizle */
  color:transparent;
  font-size:0;

  opacity:0;
  transform:scale(.92);
  transition:
    opacity .15s ease,
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.isdar-media-modal .imm-itemwrap .imm-itemdel::before{
  content:"🗑️";
  font-size:18px;
  line-height:1;
  color:#b91c1c;
}

.isdar-media-modal .imm-itemwrap:hover .imm-itemdel{
  opacity:1;
  transform:scale(1);
}

.isdar-media-modal .imm-itemwrap .imm-itemdel:hover{
  background:#fee2e2;
  border-color:#fecaca;
}

/* =========================================================
   Editor ribbon: small screens show icon-only (hide text)
   ========================================================= */
@media (max-width: 992px){
  .isdar-btn-text{
    display:none !important;
  }
}

/* ===============================
   EDITOR TOAST (custom)
   - create_activity.php uses: <div id="toast" class="toast" ...>
   - Bootstrap .toast default is display:none -> override in editor
   =============================== */
html[data-editor="1"] #toast.toast{
  display:block !important;
}

html[data-editor="1"] *, 
html[data-editor="1"] *::before, 
html[data-editor="1"] *::after {
  animation: none !important;
  transition: none !important;
}