/* Jaisandar 454 · ЖІӨ видео блогы — бір ойнатқыш, тақырып және формат батырмалары */
.gdp-videos{--c:#2bd4a4;margin:22px 0 26px;padding:24px;border-radius:26px;background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 55%),linear-gradient(135deg,#0b1016,#141c26);color:#f3f6f8;box-shadow:0 24px 60px rgba(5,12,18,.28);transition:background .4s}
.gv-head{margin:0 0 18px}
.gv-k{display:inline-block;font:800 11px/1 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c);background:rgba(255,255,255,.07);padding:6px 10px;border-radius:999px}
.gv-head h2{margin:10px 0 6px;font:800 clamp(20px,2.4vw,28px)/1.15 Inter,"Segoe UI",Arial,sans-serif;color:#fff}
.gv-head p{margin:0;color:#aab6c0;font:500 13.5px/1.5 Inter,Arial,sans-serif;max-width:760px}
.gv-wrap{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-areas:"player tabs" "player fmt" "player info" "player act" "player .";grid-template-rows:auto auto auto auto 1fr;gap:14px 26px;align-items:start}
.gv-tabs{grid-area:tabs;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gv-tab{--c:#2bd4a4;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;text-align:left;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;border-radius:16px;padding:12px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.gv-tab:hover{background:rgba(255,255,255,.07)}
.gv-tab.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1px var(--c)}
.gv-tab:focus-visible,.gv-fb:focus-visible,.gv-btn:focus-visible,.gv-play:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gv-flags{display:flex;flex:none}
.gv-flags img{width:auto;height:20px;border-radius:5px;box-shadow:0 0 0 2px #121922;position:relative}
.gv-flags img+img{margin-left:-14px}
.gv-tt{display:flex;flex-direction:column;gap:3px;min-width:0}
.gv-tt{max-width:100%}.gv-tt b{font:800 14.5px/1.15 Inter,Arial,sans-serif;overflow-wrap:anywhere}
.gv-tt small{font:600 11.5px/1 Inter,Arial,sans-serif;color:#8d9aa5}
.gv-fmt{grid-area:fmt;display:inline-grid;grid-template-columns:1fr 1fr;justify-self:start;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.gv-fb{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:#aab6c0;border-radius:10px;padding:9px 16px;font:700 13px/1 Inter,Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.gv-fb svg{width:18px;height:18px;fill:currentColor}
.gv-fb.on{background:#fff;color:#0b0f14}
.gv-player{grid-area:player;min-width:0}
.gv-stage{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:#0b0f14;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.gv-stage canvas{display:block;width:100%;height:100%;cursor:pointer}
.gv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#0b0f14;font:400 24px/1 Arial,sans-serif;padding-left:5px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:opacity .2s,transform .2s}
.gdp-videos.is-play .gv-play{opacity:0;padding-left:0}
@media(hover:hover){.gdp-videos.is-play .gv-stage:hover .gv-play{opacity:.9}}
.gv-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.gv-wait{position:absolute;inset:auto 0 46% 0;text-align:center;color:#aab6c0;font:600 13px/1.3 Inter,Arial,sans-serif;padding:0 20px}
.gdp-videos.is-wait .gv-play{display:none}
.gv-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.gv-bar i{display:block;height:100%;width:0;background:var(--c)}
.gv-info{grid-area:info}
.gv-desc{margin:0 0 6px;color:#dce3e8;font:500 14px/1.5 Inter,Arial,sans-serif}
.gv-src{margin:0;color:#8d9aa5;font:500 12px/1.4 Inter,Arial,sans-serif}
.gv-act{grid-area:act;display:flex;gap:10px;flex-wrap:wrap}
.gv-btn{flex:0 1 auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:12px;padding:12px 18px;font:700 13px/1 Inter,Arial,sans-serif;cursor:pointer}
.gv-btn.pri{background:var(--c);border-color:transparent;color:#071a14}
.gv-btn:hover{filter:brightness(1.1)}
@media(max-width:820px){
  .gdp-videos{padding:16px;border-radius:20px;margin:16px 0}
  .gv-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"tabs" "fmt" "player" "info" "act";grid-template-rows:none;gap:12px}
  .gv-tabs{gap:6px}
  .gv-tab{flex-direction:column;align-items:flex-start;gap:7px;padding:10px 9px;border-radius:14px}
  .gv-tt b{font-size:12.5px;line-height:1.15}
  .gv-tt small{font-size:11px}
  .gv-flags img{width:auto;height:17px}
  .gv-fmt{justify-self:stretch}
  .gv-player{width:100%;max-width:420px;justify-self:center}
  .gv-act{display:grid;grid-template-columns:1fr 1fr}
  .gv-btn{padding:12px 8px}
}
