/* Tanıtım videosu: popup oynatıcı (landing + panel + affiliate) ve landing bandı. Plyr: /Assets/vendor/plyr/plyr.css (tembel yüklenir).
   Videolar telefon ekran kaydı (dikey, 9:16) olduğundan varsayılan düzen DİKEY'dir; intro-video.js gerçek oranı okuyup --iv-w/--iv-h değişkenlerini
   ve yatay videolar için .iv-band--landscape / popup'ta .ivp--portrait sınıfını ayarlar. */

html.ivp-open { overflow: hidden; }

/* ── Popup oynatıcı: her iki temada da koyu (video çerçevesi; sabit renk bilerek) ─────────────── */
dialog.ivp {
    --plyr-color-main: #00bab2;
    --plyr-video-background: #000;
    --plyr-control-radius: 10px;
    border: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    background: transparent;
    color: #fff;
    overflow: hidden;
}
dialog.ivp[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
dialog.ivp::backdrop {
    background: rgba(5, 12, 20, .84);
    backdrop-filter: blur(4px);
}
.ivp__box {
    width: min(96vw, 1100px);
    max-height: 96vh;
    max-height: 96dvh;
    display: flex;
    flex-direction: column;
    background: #0b1118;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
/* Oran bilinene dek (metadata) kutuyu gizle: genişlik sıçramasın. */
dialog.ivp.ivp--pending .ivp__box { visibility: hidden; }
/* Dikey video: kutu, video yüksekliğine (ekran - başlık çubuğu) oranlanmış genişlikte olur. */
dialog.ivp.ivp--portrait .ivp__box {
    width: min(96vw, calc((100vh - 130px) * var(--iv-w, 9) / var(--iv-h, 16)));
    width: min(96vw, calc((100dvh - 130px) * var(--iv-w, 9) / var(--iv-h, 16)));
}
.ivp__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 16px;
    min-height: 52px;
}
.ivp__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ivp__dl,
.ivp__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.ivp__dl { padding: 0 14px; }
.ivp__close { width: 36px; padding: 0; }
.ivp__dl[hidden] { display: none; }
.ivp__dl:hover,
.ivp__close:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.ivp__dl:focus-visible,
.ivp__close:focus-visible { outline: 2px solid #00bab2; outline-offset: 2px; }
.ivp__stage { background: #000; min-height: 0; }
.ivp__stage video,
.ivp__stage .plyr { display: block; width: 100%; }
.ivp__stage video { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); background: #000; }

@media (max-width: 575.98px) {
    .ivp__box { width: 100vw; border-radius: 0; max-height: 100dvh; }
    dialog.ivp.ivp--portrait .ivp__box { width: 100vw; }
    .ivp__dl span { display: none; }
    .ivp__dl { padding: 0; width: 36px; }
}

/* ── Landing bandı (hero'nun altı): solda metin, sağda dikey video kartı ─────────────────────── */
.iv-band { padding: 56px 0 24px; }
.iv-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 56px;
    max-width: 960px;
    margin: 0 auto;
}
.iv-band__head { text-align: start; }
/* styles.css .section-title: text-align:center + margin-bottom:4rem; bu sütunda başlık, lead ile aynı hizada (start) ve sıkı olmalı. */
.iv-band__head .section-title { margin: 0 0 12px; text-align: inherit; }
.iv-band__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ld-text-2, #475569);
}
.iv-band__media {
    position: relative;
    display: block;
    /* Genişlik: 320 px ile ekran yüksekliğinin %78'i (oranla çarpılmış) arasından küçüğü. Yüzde kullanılmaz: "auto" grid sütununda döngüsel olur ve 0'a çöker;
       kapsayıcıya sığma için ayrıca max-width. */
    width: min(var(--iv-max-w, 320px), calc(78vh * var(--iv-w, 9) / var(--iv-h, 16)));
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    aspect-ratio: var(--iv-w, 9) / var(--iv-h, 16);
    border-radius: 24px;
    overflow: hidden;
    background: #0b1118 center / cover no-repeat;
    box-shadow: 0 24px 60px rgba(8, 25, 40, .22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.iv-band__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0b1118;
}
.iv-band__play {
    position: absolute;
    inset-inline-end: 14px;
    inset-block-end: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 10px;
    border-radius: 999px;
    background: rgba(8, 18, 28, .74);
    backdrop-filter: blur(6px);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: transform .18s ease, background .18s ease;
}
.iv-band__play svg { flex: 0 0 auto; }
.iv-band__media:hover .iv-band__play,
.iv-band__media:focus-visible .iv-band__play { transform: scale(1.05); background: rgba(0, 186, 178, .92); }
.iv-band__media:focus-visible { outline: 3px solid #00bab2; outline-offset: 3px; }

/* Yatay video (nadir): metin üstte ortalı, video altta geniş. */
.iv-band--landscape .iv-band__grid { grid-template-columns: 1fr; gap: 26px; max-width: 960px; }
.iv-band--landscape .iv-band__head { text-align: center; max-width: 720px; margin: 0 auto; }
.iv-band--landscape .iv-band__media { --iv-max-w: 960px; margin-inline: auto; }

@media (max-width: 767.98px) {
    .iv-band { padding-top: 40px; }
    .iv-band__grid { grid-template-columns: 1fr; gap: 24px; }
    .iv-band__head { text-align: center; }
    .iv-band__media { --iv-max-w: 300px; margin-inline: auto; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .iv-band__play { transition: none; }
}