/* =========================================
   1. MEVCUT YAPI
   ========================================= */
.bkv-wrapper{position:relative; overflow: hidden;}

/* --- TABS --- */
.bkv-tabs{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
}
.bkv-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  padding:10px 18px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}
.bkv-tab.is-active{
  background:linear-gradient(135deg, rgba(59,130,246,1), rgba(29,78,216,1));
  border-color:rgba(59,130,246,.6);
  box-shadow:0 10px 30px rgba(59,130,246,.25);
}

/* --- CAROUSEL --- */
.bkv-carousel{
  display:flex;
  gap:18px;
  overflow-x:hidden;
  padding:10px 6px 30px; 
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bkv-carousel::-webkit-scrollbar{display:none}

.bkv-card{
  flex:0 0 256px;
  border-radius:20px;
  height:288px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  cursor:pointer;
  transform:translateZ(0);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bkv-card:hover{
  transform:translateY(-3px) scale(1.02);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.bkv-card.is-hidden{display:none !important;}

/* Thumb & Play */
.bkv-thumb{
  position:relative;
  height:140px;
  background:#1f3b74;
}
.bkv-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:56px;
  height:56px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  display:grid;
  place-items:center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.18);
}
.bkv-play svg{
  width:28px;
  height:28px;
  stroke:#fff;
}

/* Card Body */
.bkv-card__body{padding:16px; flex:1; display:flex; flex-direction:column; justify-content:center}
.bkv-card__title{
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin-bottom:6px;
}
.bkv-card__meta{
  font-size:14px;
  color:rgba(255,255,255,.65);
}

/* =========================================
   2. MODAL TASARIMI
   ========================================= */

.bkv-modal {
  position: fixed;
  inset: 0;
  display: none;
  /* Z-index çok yüksek tutulmalı */
  z-index: 2147483647 !important; 
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bkv-modal.is-open { display: flex; }

/* Overlay */
.bkv-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
}

/* Modal Content */
.bkv-modal__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 700px;
  background: #161e2e;
  border-radius: 12px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  color: #fff;
  overflow: hidden;
  animation: bkvFadeIn 0.3s ease-out;
  display: flex;
  flex-direction: column;
  height: auto; 
  min-height: 350px; 
}

@keyframes bkvFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Close Button */
.bkv-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  padding: 0;
}
.bkv-modal__close:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* Modal Body */
.bkv-modal__body {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
}

.bkv-video-slot { width: 100%; }
.bkv-video-slot iframe,
.bkv-video-slot video {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
}

/* Placeholder */
.bkv-placeholder {
  width: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bkv-ph-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.2);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.bkv-ph-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transform: translateX(2px);
}

.bkv-ph-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px;
}

.bkv-ph-meta {
  font-size: 16px;
  color: #94a3b8;
  margin-bottom: 10px;
}

.bkv-ph-text {
  font-size: 14px;
  color: #64748b;
  margin-top: 5px;
}

/* --- MOBİL UYUMLULUK VE FIXLER --- */

/* Modal açıldığında sayfanın kaymasını engelle */
body.bkv-modal-open { 
    overflow: hidden !important; 
    height: 100vh;
}

@media (max-width: 768px) {
    .bkv-modal__content { 
        width: 100%; 
        max-width: 100%;
        margin: 0; 
    }
    .bkv-ph-title { font-size: 20px; }
    .bkv-ph-icon { width: 70px; height: 70px; }
    .bkv-modal__close { width: 44px; height: 44px; }
}