/* interactions/multiple_choice/choose_correct_picture.css */

/* =========================================================
   CHOOSE CORRECT PICTURE – FIXED 1920x1080
   Shared styles moved to: /interactions/global.css
   - Header: .mwp-header + .mwp-intro-title + .mwp-title
   - Nav buttons: .mwp-prev / .mwp-next / .mwp-nav-text
   - [data-edit] hover styles
   ========================================================= */

/* ====== WRAP ====== */
.ccp-wrap{
  position:absolute;
  left:0; top:0;
  width:1920px;
  height:1080px;
}

/* =========================================================
   CONTENT WRAPPER (QUESTION + ANSWERS)
   ========================================================= */
.ccp-content{
  position:absolute;
  left:108px;
  top:160px;
  width:1704px;
  height:760px; /* 420 + gap + 360 */

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;

  gap:40px; /* 🔥 istediğin boşluk burada */
}

/* =========================================================
   QUESTION AREA (TEXT ONLY)
   - background: themes/{theme}/assets/question.png
   ========================================================= */
.ccp-question{
  position:relative;   /* absolute kaldır */
  width:1704px;
  height:420px;

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

.ccp-qtext{
  width:1704px;        /* ✅ tek blok, tam genişlik */
  height:420px;

  background-image: var(--mc-question-bg); /* themes/{theme}/assets/question.png */
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

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

  padding:34px 60px;
  box-sizing:border-box;

  font-weight:900;
  font-size:56px; /* ✅ JS auto-fit düşürecek */
  line-height:1.15;

  overflow:hidden;
  user-select:none;
}

/* hizalama: engine/wrap data ile */
.ccp-wrap[data-q-align="left"]   .ccp-qtext{ text-align:left; }
.ccp-wrap[data-q-align="center"] .ccp-qtext{ text-align:center; }
.ccp-wrap[data-q-align="right"]  .ccp-qtext{ text-align:right; }

/* =========================================================
   ANSWERS AREA (IMAGE ONLY, SINGLE ROW)
   - min 2 max 4
   - background: themes/{theme}/assets/drop_picture.png
   ========================================================= */
.ccp-answers{
  position:relative;  /* absolute kaldır */
  width:1704px;
  height:360px;

  display:flex;
  flex-direction:row;
  gap:26px;
  justify-content:center;
  align-items:center;
}

/* ✅ çakışan data-count justify kurallarını tamamen kaldırıyoruz */

/* =========================================================
   CHOICE CARD (THEME BG SWAP)
   - default: themes/{theme}/assets/drop_picture.png   (var: --mc-drop-pic-bg)
   - correct: themes/{theme}/assets/picture_correct.png (var: --ccp-correct-bg)
   - wrong:   themes/{theme}/assets/picture_wrong.png   (var: --ccp-wrong-bg)
   ========================================================= */
.ccp-choice{
  position:relative;
  pointer-events:auto;

  /* 🔑 sabit ebat: 2 olsa da 4 olsa da aynı */
  flex:0 0 auto;
  width:400px;
  height:320px;

  /* ✅ default */
  background-image: var(--mc-drop-pic-bg);
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:center;

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

  user-select:none;
  -webkit-user-drag:none;

  cursor:pointer;
  transform:translateZ(0);
  border-radius:18px;
}

/* ✅ Player: doğru/yanlış olunca kartın arka planı değişsin */
body[data-mode="player"] .ccp-choice.is-correct{
  background-image: var(--ccp-correct-bg) !important;
}
body[data-mode="player"] .ccp-choice.is-wrong{
  background-image: var(--ccp-wrong-bg) !important;
}

/* artık gerek yok */
.ccp-answers[data-count="2"] .ccp-choice{
  max-width:none;
}

/* click press */
.ccp-choice:active{
  transform:scale(.99);
}

/* IMAGE AREA (SAFE ZONE) */
.ccp-choice-img{
  width:100%;
  height:100%;

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

  overflow:visible; /* ✅ pseudo-element görünür */
  box-sizing:border-box;

  padding:36px;

  /* sağ üst işaret için anchor */
  position:relative;
}

/* Kırpmayı kart seviyesine taşı */
.ccp-choice{
  overflow:hidden;
}

/* iç görsel */
.ccp-choice-img img{
  display:block;
  -webkit-user-drag:none;

  /* 🔑 asıl denge burada */
  width:72%;
  height:72%;
  max-width:420px;
  max-height:240px;

  object-fit:contain;
}

/* placeholder */
.ccp-placeholder{
  font-weight:900;
  opacity:.7;
}

/* =========================================================
   SLOW WOBBLE
   ========================================================= */
@keyframes ccpWobble{
  0%   { transform: rotate(-0.6deg) translateY(0px); }
  50%  { transform: rotate(0.6deg) translateY(-1px); }
  100% { transform: rotate(-0.6deg) translateY(0px); }
}

.ccp-wrap.ccp-wobble .ccp-choice{
  animation-name: ccpWobble;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* seçilince wobble dursun */
.ccp-choice.is-selected{
  animation: none !important;
}

/* =========================================================
   EDITOR PREVIEW: doğru şık vurgusu (✓ ile seçiliyor)
   ========================================================= */
.is-correct-preview{
  outline: 5px solid rgba(34,197,94,.55);
  border-radius:18px;
}

/* Editor butonları (çöp + doğru işaret) */
.ccp-trash{
  position:absolute;
  left:12px;
  top:12px;
  width:30px;height:30px;
  border:0;border-radius:10px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  z-index:5;
}
.ccp-mark{
  position:absolute;
  right:12px;
  top:12px;
  width:30px;height:30px;
  border:0;border-radius:10px;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  font-weight:900;
  z-index:6;
}

/* =========================================================
   OPTIONAL: Anim class’ları (IsdarAnim.pulse)
   (engine’de kullanılabilir)
   ========================================================= */
.anim-correct{ animation: ccpPop 800ms ease both; }
.anim-wrong{ animation: ccpShake 650ms ease both; }
.anim-reveal{ animation: ccpGlow 700ms ease both; }

@keyframes ccpPop{
  0%   { transform:scale(.92); }
  45%  { transform:scale(1.06); }
  70%  { transform:scale(.98); }
  100% { transform:scale(1); }
}
@keyframes ccpShake{
  0%{ transform:translateX(0); }
  20%{ transform:translateX(-10px); }
  40%{ transform:translateX(10px); }
  60%{ transform:translateX(-7px); }
  80%{ transform:translateX(7px); }
  100%{ transform:translateX(0); }
}
@keyframes ccpGlow{
  0%{ transform:scale(.99); }
  50%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}

/* =========================================================
   PLAYER MODE (metin seçme güvenlik)
   ========================================================= */
body[data-mode="player"] .ccp-qtext{
  cursor:inherit;
  pointer-events:none;
}

/* choice tıklaması kart üzerinden olacak */
body[data-mode="player"] .ccp-choice{
  pointer-events:auto;
}

/* =========================================================
   PLAYER – Corner Correct/Wrong Mark (top-right, fade+scale)
   - attaches to .ccp-choice-img::after
   - triggers with .ccp-choice.is-correct / .ccp-choice.is-wrong
   ========================================================= */

/* Varsayılan: gizli */
body[data-mode="player"] .ccp-choice-img::after{
  content:"";
  position:absolute;
  right:18px;
  top:16px;

  width:90px;
  height:90px;
  border-radius:18px;

  /* artık yazı değil resim */
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;

  opacity:0;
  transform:scale(.45);
  pointer-events:none;
}

/* Animasyon */
@keyframes ccpCornerMarkIn{
  0%   { opacity:0; transform:scale(.25); }
  55%  { opacity:1; transform:scale(1.35); }
  78%  { opacity:1; transform:scale(.92); }
  100% { opacity:1; transform:scale(1); }
}

/* ✅ DOĞRU */
body[data-mode="player"] .ccp-choice.is-correct .ccp-choice-img::after{
  content:"";
  background-image: var(--ccp-correct-mark);
  animation: ccpCornerMarkIn 360ms ease-out both;
}

/* ❌ YANLIŞ – SOFT & FRIENDLY */
body[data-mode="player"] .ccp-choice.is-wrong .ccp-choice-img::after{
  content:"";
  background-image: var(--ccp-wrong-mark);
  animation: ccpCornerMarkInSoft 320ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes ccpCornerMarkInSoft{
  0%   { opacity:0; transform:scale(.35); }
  60%  { opacity:1; transform:scale(1.12); }
  100% { opacity:1; transform:scale(1); }
}

/* =========================================================
   REVIEW MODE
   - aria-disabled kullanılsın ama görsel solmasın
   ========================================================= */
.ccp-wrap[data-review-mode="1"] .ccp-choice[aria-disabled="true"],
.ccp-wrap[data-review-mode="1"] .ccp-choice.is-locked{
  opacity:1 !important;
  filter:none !important;
  cursor:default !important;
}

.ccp-wrap[data-review-mode="1"] .ccp-choice[aria-disabled="true"] .ccp-choice-img,
.ccp-wrap[data-review-mode="1"] .ccp-choice[aria-disabled="true"] .ccp-choice-img img,
.ccp-wrap[data-review-mode="1"] .ccp-choice.is-locked .ccp-choice-img,
.ccp-wrap[data-review-mode="1"] .ccp-choice.is-locked .ccp-choice-img img{
  opacity:1 !important;
  filter:none !important;
}