/* Mükellef360 — SSS sol paneli (W13, bloklar/sss/render.php). Önek msq.
   Masaüstü: solda yapışkan sütun = konu ekranı (canlı sahne + açık soru izleyicisi) + ayrı, kompakt iletişim kartı; sağda akordeon.
   ≤991: ekran → sorular → iletişim kartı (yan sütun display:contents). İzleyiciyi script.js sürer (m360:sekme olayı). */

.faq-holder.msq { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 40px; align-items: start; }
.faq-holder.msq--tek { grid-template-columns: minmax(0, 1fr); }
.msq-yan { --mavi: #0088e8; --derin: #0b5fb0; --lac: #102840; --gri: #5b6b7d; --out: cubic-bezier(.22, 1, .36, 1);
  position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* konu ekranı */
.msq-ekran { position: relative; padding: 10px; border-radius: 26px; background: linear-gradient(160deg, #10325a, #0a1f38 60%, #081a2f);
  border: 1px solid rgba(159, 210, 255, .18); box-shadow: 0 40px 70px -40px rgba(11, 95, 176, .65), 0 0 0 6px rgba(0, 136, 232, .05);
  transition: transform .5s var(--out), box-shadow .5s var(--out); }
.msq-ekran:hover { transform: translateY(-3px); box-shadow: 0 48px 80px -40px rgba(11, 95, 176, .75), 0 0 0 6px rgba(0, 136, 232, .08); }
.msq-ekran-bas { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; color: #c3d2e2; font-size: 13px; }
.msq-noktalar3 { display: flex; gap: 6px; }
.msq-noktalar3 i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.msq-noktalar3 i:first-child { background: #ff7b6b; } .msq-noktalar3 i:nth-child(2) { background: #ffc35a; } .msq-noktalar3 i:last-child { background: #4fd18b; }
.msq-ekran-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; letter-spacing: .01em; }
.msq-ekran-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 136, 232, .18); color: #9fd2ff; font-size: 12px; font-weight: 600; }
.msq-ekran-rozet i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #33b5ff; }
.msq-ekran-rozet i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid #33b5ff; opacity: 0; animation: msq-nabiz 2.2s var(--out) infinite; }
.msq-ekran-govde { overflow: hidden; border-radius: 18px; }
.msq-ekran-govde .msh { border-radius: 18px; }

/* açık soru izleyicisi */
.msq-izci { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(159, 210, 255, .12); }
.msq-izci-no { flex: none; display: flex; align-items: baseline; color: #6f88a3; font-size: 13px; font-variant-numeric: tabular-nums; }
.msq-izci-no b { min-width: 1.1ch; color: #fff; font-size: 24px; line-height: 1; font-weight: 700; }
.msq-izci-ic { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msq-izci-ic small { color: #6f88a3; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.msq-izci-soru { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #e6eef7; font-size: 14px; line-height: 1.4; font-weight: 500;
  transition: opacity .25s, transform .4s var(--out); }
.msq-izci-soru.is-degis { opacity: 0; transform: translateY(6px); }
.msq-izci-sira { flex: none; display: flex; gap: 6px; }
.msq-izci-sira i { width: 8px; height: 8px; border-radius: 8px; background: rgba(159, 210, 255, .25); cursor: pointer; transition: width .45s var(--out), background .3s; }
.msq-izci-sira i:hover { background: rgba(159, 210, 255, .55); }
.msq-izci-sira i.is-on { width: 22px; background: linear-gradient(90deg, #33b5ff, #5fe0ea); }

/* iletişim kartı: kompakt, ayrı */
.msq-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 20px;
  border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #9fd2ff, #e3edf7 45%, #ffd2ad) border-box;
  box-shadow: 0 20px 40px -32px rgba(11, 95, 176, .55); transition: transform .45s var(--out), box-shadow .45s var(--out); }
.msq-cta:hover { transform: translateY(-2px); box-shadow: 0 26px 46px -30px rgba(11, 95, 176, .65); }
.msq-cta-ic { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: #fff;
  background: linear-gradient(145deg, #2aa3ff, var(--mavi) 55%, var(--derin)); box-shadow: 0 10px 20px -10px rgba(0, 136, 232, .8); }
.msq-cta-ic svg { width: 100%; height: 100%; }
.msq-cta-ic i { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #e16e0a; border: 2px solid #fff; }
.msq-cta-ic i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(225, 110, 10, .5); opacity: 0; animation: msq-nabiz 2.4s var(--out) infinite; }
.msq-cta-ic-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msq-cta-ic-metin b { color: var(--lac); font-size: 16px; line-height: 1.3; font-weight: 600; }
.msq-cta-ic-metin small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--gri); font-size: 13px; line-height: 1.45; }
.msq-cta-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 18px; border-radius: 999px; background: var(--lac); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .3s, box-shadow .4s; }
.msq-cta-btn svg { width: 16px; height: 16px; transition: transform .4s var(--out); }
.msq-cta-btn:hover { background: var(--mavi); color: #fff; box-shadow: 0 12px 24px -12px rgba(0, 136, 232, .9); }
.msq-cta-btn:hover svg { transform: translateX(4px); }

@keyframes msq-nabiz { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }

@media (max-width: 991px) {
  .faq-holder.msq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .msq-yan { display: contents; }
  .msq-ekran { order: 0; width: 100%; max-width: 600px; justify-self: center; }
  .faq-holder.msq > .faq-card-wrapper { order: 1; }
  .msq-cta { order: 2; }
}
@media (max-width: 479px) {
  .msq-ekran { padding: 8px; border-radius: 22px; }
  .msq-izci-sira { display: none; }
  .msq-cta { grid-template-columns: auto minmax(0, 1fr); }
  .msq-cta-btn { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .msq-yan *, .msq-yan *::before, .msq-yan *::after, .msq-ekran, .msq-cta { animation: none !important; transition: none !important; }
}