:root{
  --bg:#ffffff;--text:#0b1220;--muted:#5b6b8a;--brand:#0b57d0;--accent:#e7f0ff;
  --radius:16px;--shadow:0 10px 30px rgba(11,87,208,.08);
}

/* --- Video Galeri --- */
.video-wrap{margin:48px auto 24px;max-width:1100px;padding:0 16px;}
.video-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.video-head h2{margin:0;font-size:clamp(22px,3vw,32px);color:var(--text);}
.video-head small{color:var(--muted);}

/* 3-2-1 kolon (dikey reel'ler için ferah aralık) */
.video-grid{
  display:grid;
  grid-template-columns:1fr;  /* mobil */
  gap:24px;
}
@media (min-width:680px){
  .video-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* tablet */
}
@media (min-width:1000px){
  .video-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* desktop */
}

/* DİKEY KARTLAR (reel) */
.vcard{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--accent);box-shadow:var(--shadow);cursor:pointer;
  aspect-ratio:9/16;                 /* dikey görünüm */
  transition:transform .15s ease, box-shadow .15s ease;
}
.vcard:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.10); }

.vthumb{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  background:linear-gradient(135deg,#f2f6ff,#e7f0ff);
}

.vbadge{
  position:absolute;left:12px;top:12px;
  background:rgba(11,87,208,.9);color:#fff;font-size:12px;letter-spacing:.2px;
  padding:6px 10px;border-radius:999px;font-weight:700;
}

.vplay{position:absolute;inset:0;display:grid;place-items:center;}
.vplay span{
  width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(2px);
  display:grid;place-items:center;
}
.vplay svg{width:22px;height:22px;fill:#fff;}

/* --- Modal (dikey videoya uygun genişlik) --- */
.vmodal{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;
  padding:20px;z-index:9999;
}
.vmodal.active{display:flex;}

/* portre videoda genişlik çok büyümesin */
.vmodal-box{
  width:min(100%, 620px); /* masaüstünde 620px civarı çerçeve */
  background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,.5);
}
@media (max-width:680px){
  .vmodal-box{ width:min(100%, 480px); }
}

.vmodal video{
  width:100%;height:auto;display:block;background:#000;
  max-height:86vh; /* taşma yok */
}

.vclose{
  position:absolute;right:22px;top:22px;
  background:#000000a6;color:#fff;border:0;border-radius:12px;
  padding:8px 12px;font-weight:700;cursor:pointer;
}

/* Responsive ince ayar */
@media(max-width:680px){
  .video-wrap{margin:36px auto 18px;padding:0 12px;}
}