/* Datalab — İnteraktiv AI Təcrübəsi: nümunə saytlar galereyası
 * Robot hero-nun altında (index.php). motionsites tipli grid + split preview modal. */

.dl-aishow{background:#070b16;color:#fff;padding:88px 0 96px;position:relative;overflow:hidden}
.dl-aishow::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:80px 80px;pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.dl-aishow .container{position:relative;z-index:1;max-width:3400px;width:94vw}
.dl-aishow-head{max-width:920px;margin:0 0 50px}
.dl-aishow-kicker{display:inline-flex;align-items:center;gap:8px;color:#7ce4c2;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.dl-aishow-kicker i{width:16px;height:16px}
.dl-aishow-head h2{margin:16px 0 14px;font-size:clamp(30px,3.6vw,46px);line-height:1.1;color:#fff;font-weight:800}
.dl-aishow-head p{margin:0;color:#aab6cc;font-size:19px;line-height:1.65}

.dl-aishow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:28px}

/* ---- Card ---- */
.dl-aishow-card{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid #1c2740;border-radius:16px;
  background:#0c1424;overflow:hidden;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease}
.dl-aishow-card-open{position:absolute;z-index:3;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.dl-aishow-card-open:focus-visible{outline:3px solid #7ce4c2;outline-offset:-4px;border-radius:16px}
.dl-aishow-card:hover{transform:translateY(-8px);border-color:#3a4d70;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.dl-aishow-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b1220;border-bottom:1px solid #16223a}
.dl-aishow-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.dl-aishow-video-preview,.dl-aishow-mvideo{position:absolute;inset:0;width:100%;height:100%;display:block}
.dl-aishow-mvideo{object-fit:cover;background:#0b1220;opacity:0;transition:opacity .25s ease}
.dl-aishow-video-preview.is-playing .dl-aishow-mvideo{opacity:1}
.dl-aishow-video-play{position:absolute;z-index:4;left:50%;top:50%;display:grid;place-items:center;width:58px;height:58px;padding:0;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(8,14,26,.82);border:1px solid #4b6d9e;color:#fff;
  box-shadow:0 12px 35px rgba(0,0,0,.42);cursor:pointer;transition:transform .2s ease,opacity .2s ease}
.dl-aishow-video-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.dl-aishow-video-play i{width:22px;height:22px}
.dl-aishow-video-preview.is-loading .dl-aishow-video-play{opacity:.55;pointer-events:none}
.dl-aishow-video-preview.is-playing .dl-aishow-video-play{opacity:0;pointer-events:none}
.dl-aishow-card:hover .dl-aishow-thumb img{transform:scale(1.05)}
.dl-aishow-poster{animation:dlAishowPosterDrift 9s ease-in-out infinite alternate;will-change:transform}

/* generik lazy placeholder (xüsusi poster olmayan ağır saytlar üçün) */
.dl-aishow-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at 50% 38%,#16233c,#0b1220);color:#fff;text-align:center;padding:16px}
.dl-aishow-ph-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-bottom:6px;
  background:rgba(124,228,194,.12);border:1px solid #2b6f57;color:#7ce4c2}
.dl-aishow-ph-ico i{width:22px;height:22px}
.dl-aishow-ph b{font-size:18px;font-weight:700;color:#f2f6ff}
.dl-aishow-ph span{font-size:13px;color:#8493ab}
.dl-aishow-ph.is-animated{isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#0b1220 0%,#14213a 50%,#0b1220 100%);background-size:220% 220%;animation:dlAishowPosterFlow 8s ease-in-out infinite}
.dl-aishow-ph.is-animated::before,.dl-aishow-ph.is-animated::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.dl-aishow-ph.is-animated::before{width:190px;height:190px;border-radius:50%;left:18%;top:12%;background:radial-gradient(circle,rgba(124,228,194,.2),rgba(106,92,255,.04) 58%,transparent 72%);filter:blur(2px);animation:dlAishowPosterOrb 6s ease-in-out infinite alternate}
.dl-aishow-ph.is-animated::after{inset:-55% -20%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.07) 49%,transparent 56%);transform:translateX(-45%);animation:dlAishowPosterScan 5.5s ease-in-out infinite}
.dl-aishow-ph.is-animated .dl-aishow-ph-ico{animation:dlAishowPosterPulse 2.4s ease-in-out infinite}
@keyframes dlAishowPosterDrift{from{transform:scale(1.01) translate3d(-.5%,0,0)}to{transform:scale(1.07) translate3d(.8%,-.7%,0)}}
@keyframes dlAishowPosterFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes dlAishowPosterOrb{from{transform:translate3d(-18px,12px,0) scale(.9)}to{transform:translate3d(72px,-14px,0) scale(1.2)}}
@keyframes dlAishowPosterScan{0%,18%{transform:translateX(-55%)}72%,100%{transform:translateX(55%)}}
@keyframes dlAishowPosterPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,228,194,.12)}50%{transform:scale(1.08);box-shadow:0 0 0 12px rgba(124,228,194,0)}}
@media (prefers-reduced-motion:reduce){.dl-aishow-poster,.dl-aishow-ph.is-animated,.dl-aishow-ph.is-animated::before,.dl-aishow-ph.is-animated::after,.dl-aishow-ph.is-animated .dl-aishow-ph-ico{animation:none!important}}

/* live iframe preview (desktop-də render olunub kiçildilir) */
.dl-aishow-frame{position:absolute;inset:0;overflow:hidden;background:#0b1220}
.dl-aishow-frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none;background:#0b1220}
.dl-aishow-card .dl-aishow-frame::after{content:"";position:absolute;inset:0}

.dl-aishow-live{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:20px;background:rgba(8,14,26,.72);backdrop-filter:blur(6px);border:1px solid #2b6f57;
  color:#8ff0cf;font-size:12px;font-weight:700;letter-spacing:.02em}
.dl-aishow-live i{width:7px;height:7px;border-radius:50%;background:#33e0a1;box-shadow:0 0 0 0 rgba(51,224,161,.6);animation:dlAishowPulse 1.8s infinite}
.dl-aishow-live.is-lazy{border-color:#5a4b2b;color:#ffcf87}
.dl-aishow-live.is-lazy i{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;animation:none;font-size:12px;display:inline-flex}
@keyframes dlAishowPulse{0%{box-shadow:0 0 0 0 rgba(51,224,161,.55)}70%{box-shadow:0 0 0 8px rgba(51,224,161,0)}100%{box-shadow:0 0 0 0 rgba(51,224,161,0)}}

.dl-aishow-hover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(7,11,22,.05),rgba(7,11,22,.55));opacity:0;transition:opacity .3s ease}
.dl-aishow-card:hover .dl-aishow-hover{opacity:1}
.dl-aishow-view{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:30px;
  background:rgba(12,20,36,.85);backdrop-filter:blur(6px);border:1px solid #3a557f;color:#fff;font-size:14px;font-weight:600;
  transform:translateY(8px);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.dl-aishow-card:hover .dl-aishow-view{transform:none}
.dl-aishow-view i{width:16px;height:16px}

.dl-aishow-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.dl-aishow-meta-txt b{display:block;font-size:16px;font-weight:700;color:#f2f6ff}
.dl-aishow-meta-txt span{display:block;margin-top:2px;font-size:13px;color:#8493ab}
.dl-aishow-likes{flex:none;display:inline-flex;align-items:center;gap:6px;color:#9aa8c0;font-size:13px;font-weight:600}
.dl-aishow-likes i{width:14px;height:14px;color:#f0748f}

.dl-aishow-note{display:flex;align-items:center;gap:10px;margin-top:32px;color:#8493ab;font-size:14px}
.dl-aishow-note i{width:16px;height:16px;color:#7ce4c2;flex:none}

/* ---- Split preview modal (motionsites tipli) ---- */
.dl-aishow-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:32px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.dl-aishow-modal.is-open{opacity:1;visibility:visible}
.dl-aishow-modal-backdrop{position:absolute;inset:0;background:rgba(4,7,14,.8);backdrop-filter:blur(8px)}
.dl-aishow-modal-panel{position:relative;z-index:1;display:grid;grid-template-columns:320px minmax(0,1fr);
  width:min(1100px,100%);max-height:calc(100vh - 64px);
  background:#0d1526;border:1px solid #24314a;border-radius:18px;overflow:hidden;box-shadow:0 50px 130px rgba(0,0,0,.65);
  transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.dl-aishow-modal.is-open .dl-aishow-modal-panel{transform:none}

.dl-aishow-close{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  background:rgba(16,23,40,.7);border:1px solid #2a3a56;color:#cdd8ea;cursor:pointer;transition:background .2s ease}
.dl-aishow-close:hover{background:#22314c}
.dl-aishow-close i{width:18px;height:18px}

.dl-aishow-modal-info{display:flex;flex-direction:column;padding:34px 30px;border-right:1px solid #1a2740;min-width:0}
.dl-aishow-modal-cat{color:#7ce4c2;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dl-aishow-modal-info h3{margin:12px 0 0;font-size:28px;line-height:1.15;font-weight:800;color:#f4f8ff}
.dl-aishow-modal-desc{margin:16px 0 0;color:#aab6cc;font-size:15px;line-height:1.65}
.dl-aishow-modal-likes{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;color:#c2cde0;font-size:14px}
.dl-aishow-modal-likes i{width:16px;height:16px;color:#f0748f}
.dl-aishow-modal-likes b{color:#f4f8ff;font-weight:700}
.dl-aishow-modal-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:28px}
.dl-aishow-locked{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:12px;
  background:#12213c;border:1px dashed #35507a;color:#9fb0c9;font-size:14px;font-weight:600;cursor:not-allowed}
.dl-aishow-locked i{width:16px;height:16px;color:#ffb457}
.dl-aishow-enroll{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:12px;
  background:linear-gradient(135deg,#6a5cff,#8b5cf6);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.dl-aishow-enroll:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(106,92,255,.4);color:#fff}
.dl-aishow-enroll i{width:16px;height:16px}

.dl-aishow-modal-preview{position:relative;aspect-ratio:16/10;background:#0b1220;overflow:hidden}
.dl-aishow-modal-preview img{width:100%;height:100%;object-fit:cover;display:block}
.dl-aishow-modal-preview .dl-aishow-frame{position:absolute;inset:0}
.dl-aishow-modal-preview .dl-aishow-frame iframe{pointer-events:auto}

@media (max-width:991px){
  .dl-aishow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-aishow-modal-panel{grid-template-columns:1fr;max-height:calc(100vh - 48px);overflow:auto}
  .dl-aishow-modal-info{order:2;border-right:0;border-top:1px solid #1a2740}
  .dl-aishow-modal-preview{order:1}
  .dl-aishow-modal-actions{margin-top:20px}
}
@media (max-width:575px){
  .dl-aishow{padding:60px 0 68px}
  .dl-aishow-grid{grid-template-columns:1fr;gap:18px}
  .dl-aishow-head h2{font-size:28px}
  .dl-aishow-head p{font-size:17px}
  .dl-aishow-modal{padding:0}
  .dl-aishow-modal-panel{max-height:100vh;height:100%;border-radius:0;border:0}
  .dl-aishow-modal-info{padding:24px 22px}
}