/* =============================================================================
   Operasyonlar: filtre çubuğu ve öne çıkan vaka kartı. Kart (.pg-op) ve medya diyaloğu (.pg-lightbox)
   services.css'te (hizmet detayı da kullanır). Tek video P1'in paylaşılan video diyaloğunda açılır.
   ============================================================================= */

/* Filtre */
.pg-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.pg-filter .chip { min-height: 44px; padding-inline: 1rem; text-decoration: none; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.pg-filter .chip:hover { border-color: var(--brand, #0862be); color: var(--brand, #0862be); }
.pg-filter .chip.active, .pg-filter .chip[aria-current="true"] { color: #fff; background: var(--primary, #0d1b2a); border-color: var(--primary, #0d1b2a); }
.pg-filter .chip:focus-visible { outline: 3px solid var(--focus, #0862be); outline-offset: 2px; }
.pg-filter-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary, #0d1b2a);
    background: var(--bg-section, #eef3f8);
}
.pg-filter .chip.active .pg-filter-n, .pg-filter .chip[aria-current="true"] .pg-filter-n { color: var(--primary, #0d1b2a); background: var(--accent, #ef7f1a); }
@media (max-width: 575.98px) {
    .pg-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5); padding: 0.25rem calc(var(--bs-gutter-x, 1.5rem) * 0.5); scrollbar-width: none; }
    .pg-filter::-webkit-scrollbar { display: none; }
    .pg-filter .chip { flex: none; }
}

/* Öne çıkan vaka (ilk videolu vaka): tam genişlik, 16:9 poster + oynat */
.pg-op--feature .pg-op-media { aspect-ratio: 16 / 9; }
.pg-op--feature .pg-op-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; font-size: 2.6rem; }
.pg-op--feature .pg-op-title { font-size: var(--fs-h3, 1.5rem); letter-spacing: var(--tracking-tight, -0.02em); }
@media (min-width: 992px) {
    .pg-op--feature { flex-direction: row; }
    .pg-op--feature .pg-op-media { flex: 0 0 62%; }
    .pg-op--feature .pg-op-body { justify-content: center; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
    .pg-op--feature .pg-op-vessels { margin-top: 0.5rem; }
}