/* TheGamifyClass.com — video kartları, oynatıcı penceresi, yüzen "Nasıl kullanılır?" düğmesi */
.vsec{ --acc:#38d9e0; --acc2:#e43550; max-width:1180px; margin:0 auto; padding:34px 20px 8px; scroll-margin-top:70px; }
.vsec-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.vsec-logo{ width:64px; height:64px; object-fit:contain; flex:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.vsec-title{ margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem); }
.vsec-title span{ background:linear-gradient(90deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vsec-blurb{ margin:2px 0 0; color:var(--neutral-muted,#8b8b93); font-size:.95rem; max-width:620px; }
.vsec-links{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.vchip{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.8rem; color:var(--neutral-text,#e9e9ec); background:rgba(255,255,255,.04); cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
.vchip:hover,.vchip:focus-visible{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); }
.vchip.is-on{ background:linear-gradient(90deg,rgba(228,53,80,.35),rgba(56,217,224,.35)); border-color:rgba(255,255,255,.5); }
.vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),300px)); gap:18px; justify-content:start; }
.vcard{ position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.vcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--acc),var(--acc2)); z-index:2; }
.vcard:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.28); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.vcard[hidden]{ display:none; }
.vthumb{ position:relative; display:block; width:100%; padding:0; border:0; background:#000; cursor:pointer; aspect-ratio:16/9; overflow:hidden; }
.vthumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease,filter .35s ease; }
.vcard:hover .vthumb img{ transform:scale(1.04); filter:brightness(1.08); }
.vplay{ position:absolute; left:50%; top:50%; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; background:rgba(10,10,12,.62); border:2px solid rgba(255,255,255,.85); backdrop-filter:blur(4px); display:grid; place-items:center; transition:transform .2s,background .2s; }
.vplay::after{ content:""; margin-left:4px; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; }
.vthumb:hover .vplay,.vthumb:focus-visible .vplay{ transform:scale(1.1); background:linear-gradient(135deg,var(--acc2),var(--acc)); border-color:#fff; }
.vdur{ position:absolute; right:10px; bottom:10px; padding:2px 8px; border-radius:6px; background:rgba(0,0,0,.78); font-size:.76rem; font-weight:600; letter-spacing:.02em; }
.vbody{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.vrole{ align-self:flex-start; padding:3px 10px; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--acc); }
.vbody h3{ margin:0; font-family:'Space Grotesk',sans-serif; font-size:1.08rem; line-height:1.3; }
.vbody p{ margin:0; color:var(--neutral-muted,#8b8b93); font-size:.88rem; flex:1; }
.vlinks{ display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; font-size:.82rem; font-weight:600; }
.vlinks a{ color:var(--acc); }
.vlinks a:hover{ text-decoration:underline; }
.vtools{ max-width:1180px; margin:0 auto; padding:6px 20px 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center; position:sticky; top:0; z-index:5; background:linear-gradient(180deg,var(--neutral-bg,#0a0a0c) 70%,transparent); padding-bottom:12px; padding-top:12px; }
.vnote{ color:var(--neutral-muted,#8b8b93); font-size:.82rem; margin-left:auto; }
.vchan{ max-width:1180px; margin:34px auto 10px; padding:0 20px; }
.vchan-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:18px 22px; border-radius:18px; background:linear-gradient(90deg,rgba(228,53,80,.16),rgba(56,217,224,.12)); border:1px solid rgba(255,255,255,.14); }
.vchan-in strong{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; }
.vbtn{ display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; background:#e43550; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.88rem; border:0; cursor:pointer; transition:transform .15s,filter .15s; }
.vbtn:hover{ transform:translateY(-2px); filter:brightness(1.1); }
/* ana sayfa şeridi */
.vstrip{ max-width:1180px; margin:10px auto 0; padding:34px 20px 10px; }
.vstrip-head{ display:flex; align-items:end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.vstrip-head h2{ margin:0; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.3rem,3vw,1.8rem); }
.vstrip-head p{ margin:4px 0 0; color:var(--neutral-muted,#8b8b93); font-size:.92rem; }
.vstrip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:14px; }
.vmini{ position:relative; display:grid; place-items:center; padding-bottom:26px; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--acc) 38%,#0a0a0c),#0a0a0c 78%); aspect-ratio:16/10; transition:transform .2s,border-color .2s; }
.vmini:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.35); }
.vmini img{ width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.vmini span{ position:absolute; left:0; right:0; bottom:0; padding:22px 12px 10px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.86)); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.vmini span::before{ content:"▶"; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e43550; font-size:.6rem; padding-left:2px; }
/* kurallar sayfası düğmesi */
.vrule-btn{ display:inline-flex; align-items:center; gap:8px; margin:6px 0 14px; padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.28); color:inherit; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.85rem; cursor:pointer; text-decoration:none; transition:background .15s,transform .15s; }
.vrule-btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
/* araç kartlarındaki "Videoyu izle" düğmesi */
.card-video{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.78rem; cursor:pointer; transition:background .15s,transform .15s,border-color .15s; }
.card-video:hover,.card-video:focus-visible{ background:#e43550; border-color:#e43550; transform:translateY(-1px); }
/* oynatıcı penceresi */
.tgc-modal{ position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(4,5,10,.82); backdrop-filter:blur(6px); }
.tgc-modal.is-open{ display:flex; animation:tgcfade .2s ease-out; }
@keyframes tgcfade{ from{opacity:0} to{opacity:1} }
.tgc-modal-box{ position:relative; width:min(1000px,100%); border-radius:18px; overflow:hidden; background:#0a0a0c; border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 80px rgba(0,0,0,.7); }
.tgc-modal-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; font-family:'Space Grotesk',sans-serif; font-weight:600; color:#e9e9ec; font-size:.95rem; }
.tgc-modal-bar a{ color:#38d9e0; font-size:.8rem; text-decoration:none; font-weight:600; }
.tgc-modal-x{ border:0; background:rgba(255,255,255,.1); color:#fff; width:34px; height:34px; border-radius:50%; font-size:1.05rem; cursor:pointer; flex:none; }
.tgc-modal-x:hover{ background:rgba(255,255,255,.22); }
.tgc-modal-frame{ position:relative; aspect-ratio:16/9; background:#000; }
.tgc-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tgc-tabs{ display:flex; gap:8px; padding:0 14px 10px; flex-wrap:wrap; }
/* yüzen düğme (oyun sayfalarında) */
.tgc-fab{ position:fixed; left:14px; bottom:14px; z-index:9990; display:flex; align-items:center; gap:4px; font-family:'Space Grotesk',system-ui,sans-serif; }
.tgc-fab-main{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(10,12,22,.86); color:#fff; font-weight:700; font-size:.82rem; cursor:pointer; backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.45); transition:transform .15s,background .15s; }
.tgc-fab-main:hover{ transform:translateY(-2px); background:rgba(228,53,80,.85); }
.tgc-fab-x{ border:0; width:24px; height:24px; border-radius:50%; background:rgba(10,12,22,.75); color:#cfd3e6; font-size:.7rem; cursor:pointer; }
.tgc-pop{ position:absolute; left:0; bottom:48px; display:none; flex-direction:column; gap:6px; padding:8px; border-radius:14px; background:rgba(10,12,22,.95); border:1px solid rgba(255,255,255,.2); min-width:210px; box-shadow:0 12px 34px rgba(0,0,0,.55); }
.tgc-pop.is-open{ display:flex; }
.tgc-pop button,.tgc-pop a{ border:0; text-align:left; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.07); color:#fff; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; text-decoration:none; }
.tgc-pop button:hover,.tgc-pop a:hover{ background:rgba(255,255,255,.18); }
@media (max-width:640px){ .vsec-links{ margin-left:0; } .vnote{ margin-left:0; width:100%; } .tgc-fab{ left:8px; bottom:8px; } }
@media (prefers-reduced-motion:reduce){ .vcard,.vthumb img,.vplay,.vmini{ transition:none !important; } .tgc-modal.is-open{ animation:none; } }

/* v2 — kompakt yatay kartlar: solda küçük resim, sağda metin; tek kart satırı doldurmaz */
.vgrid{ grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),500px)); gap:14px; justify-content:start; }
.vcard{ display:grid; grid-template-columns:228px 1fr; border-radius:14px; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.vcard:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.vthumb{ aspect-ratio:16/9; height:auto; align-self:center; }
.vplay{ width:40px; height:40px; margin:-20px 0 0 -20px; border-width:2px; }
.vplay::after{ margin-left:3px; border-width:7px 0 7px 12px; }
.vdur{ right:6px; bottom:6px; padding:1px 6px; font-size:.7rem; }
.vbody{ padding:12px 14px; gap:5px; justify-content:center; }
.vrole{ padding:2px 8px; font-size:.64rem; }
.vbody h3{ font-size:.96rem; }
.vbody p{ font-size:.8rem; line-height:1.4; flex:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vlinks{ margin-top:2px; font-size:.78rem; }
.vsub{ margin:20px 2px 10px; font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; line-height:1.3; color:var(--acc); }
.vsub small{ font-weight:500; opacity:.75; color:var(--neutral-muted,#8b8b93); }
@media (max-width:520px){
  .vcard{ grid-template-columns:1fr; }
  .vthumb{ aspect-ratio:16/9; height:auto; }
  .vplay{ width:52px; height:52px; margin:-26px 0 0 -26px; }
}