/* ==== temel görünüm ==== */
.eg-video {
    --radius: 0;
    --gap: 10px;
    max-width: 100%;
}
.eg-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
}
.eg-stage__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.eg-play-badge {
    position: absolute;
    inset: auto auto 12px 12px;
    background: var(--bg-info);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    left: 0;
    right: 0;
    width: 50px;
    margin: auto;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    font-size: 0.9rem;
}
.eg-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1fr;
    gap: var(--gap);
    margin-top: 10px;
    padding: 0;
    list-style: none;
    margin-bottom: auto;
}
.eg-thumb {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    outline: 2px solid transparent;
    transition: .2s;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
}
.eg-thumb:hover,.eg-thumb:focus-visible{ transform:translateY(-2px); }
.eg-thumb img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; filter:grayscale(80%); }
.eg-thumb:hover img{ filter:none; }
.eg-play-sm {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--bg-info);
    color: #fff;
    border-radius: 100%;
    font-size: 0.7rem;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: 0;
    margin: auto;
}
.eg-thumb.is-active {
  pointer-events: none;
  cursor: default;
  filter: none;
  outline-color: transparent;
  opacity: 1;
}
/* ==== modal ==== */
.eg-modal[hidden]{ display:none; }
.eg-modal{ position:fixed; inset:0; z-index:9999; }
.eg-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.eg-modal__dialog{ position:absolute; inset:5% 6%; background:#000; border-radius:18px; display:flex; align-items:center; justify-content:center; }
.eg-modal__video{ width:100%; height:100%; object-fit:contain; background:#000; border-radius:12px; }
.eg-modal__close{ position:absolute; top:8px; right:10px; font-size:18px; background:#111; color:#fff; border:0; padding:8px 10px; border-radius:10px; cursor:pointer; }
.eg-nav{ position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(17,17,17,.7); color:#fff; font-size:28px; width:44px; height:56px; border-radius:10px; cursor:pointer; }
.eg-nav--prev{ left:8px; }
.eg-nav--next{ right:8px; }
@media (max-width:640px){ .eg-modal__dialog{ inset:6% 4%; } .eg-nav{ width:40px; height:52px; } }


/* BALİ VİDEO AREA */
/* === Inline Video (eg- prefix) === */
.eg-inline-video {
    --radius: 35px;
    --ratio: 16 / 9;
}
.eg-iv-stage {
    position: relative;
    aspect-ratio: var(--ratio);
    border-radius: var(--radius);
    overflow: hidden;
    background: transparent;
}
.eg-iv-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; transition:opacity .2s ease;
}
.eg-iv-play{
  position:absolute; inset:0; margin:auto; width:72px; height:72px;
  border:0; background:transparent; cursor:pointer; transition:transform .15s ease;
}
.eg-iv-play:hover{ transform:scale(1.05); }
.eg-iv-video{
  width:100%; height:100%; display:none; object-fit:cover; background:#000;
}

/* Oynarken: video görünür, poster+play gizlenir */
.eg-inline-video.is-playing .eg-iv-video{ display:block; }
.eg-inline-video.is-playing .eg-iv-poster,
.eg-inline-video.is-playing .eg-iv-play{ opacity:0; pointer-events:none; }

/* Oranı değiştirmek istersen: section[data-ratio="4/5"] { --ratio:4/5; } */
.eg-iv-yt{
  position:absolute; inset:0; width:100%; height:100%;
  display:none; background:#000; border:0;
}
.eg-inline-video.is-playing .eg-iv-yt{ display:block; }


.eg-thumbs li video {
    filter: grayscale(80%);
}

.eg-thumbs li video:hover {
    filter: grayscale(0);
    transform: translateY(-2px);
}


/* ==== temel görünüm ==== */
.eg-video-two {
    --radius: 0;
    --gap: 10px;
    max-width: 100%;
}
.eg-stage-two {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: none;
}
.eg-stage__poster-two {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.eg-play-badge-two {
    position: absolute;
    inset: auto auto 12px 12px;
    background: var(--bg-info);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    left: 0;
    right: 0;
    width: 50px;
    margin: auto;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    font-size: 0.9rem;
}
.eg-thumbs-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 1fr;
    gap: var(--gap);
    margin-top: 10px;
    padding: 0;
    list-style: none;
    margin-bottom: auto;
}
.eg-thumb-two {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    outline: 2px solid transparent;
    transition: .2s;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
}
.eg-thumb-two:hover,.eg-thumb-two:focus-visible{ transform:translateY(-2px); }
.eg-thumb-two img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; filter:grayscale(80%); }
.eg-thumb-two:hover img{ filter:none; }
.eg-play-sm-two {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--bg-info);
    color: #fff;
    border-radius: 100%;
    font-size: 0.7rem;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    bottom: 0;
    margin: auto;
}
.eg-thumb-two.is-active {
  pointer-events: none;
  cursor: default;
  filter: none;
  outline-color: transparent;
  opacity: 1;
}
/* ==== modal ==== */
.eg-modal-two[hidden]{ display:none; }
.eg-modal-two{ position:fixed; inset:0; z-index:9999; }
.eg-modal__backdrop-two{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.eg-modal__dialog-two{ position:absolute; inset:5% 6%; background:#000; border-radius:18px; display:flex; align-items:center; justify-content:center; }
.eg-modal__video-two{ width:100%; height:100%; object-fit:contain; background:#000; border-radius:12px; }
.eg-modal__close-two{ position:absolute; top:8px; right:10px; font-size:18px; background:#111; color:#fff; border:0; padding:8px 10px; border-radius:10px; cursor:pointer; }
.eg-nav-two{ position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(17,17,17,.7); color:#fff; font-size:28px; width:44px; height:56px; border-radius:10px; cursor:pointer; }
.eg-nav--prev-two{ left:8px; }
.eg-nav--next-two{ right:8px; }
@media (max-width:640px){ .eg-modal__dialog-two{ inset:6% 4%; } .eg-nav{ width:40px; height:52px; } }