/* =====================================================================
   OG Koleksiyon (/koleksiyon, /koleksiyon/{slug}, oyun ve şirket sayfasındaki Koleksiyon bölümü).
   og-kit.css (tema .ogk--koleksiyon: çuha yeşili + krem) ve og-profil.css'ten SONRA yüklenir; okl- öneki.
   Tasarım tuvali: https://claude.ai/artifact/FETPR9tJSzEdyYdvZYafUj (Faruk 2026-10-23: çuha yeşili, kapak kendi oranında).

   - Görseller: Ana görsel 16:9. Kutu ya da kitap kapağı kendi oranında, 16:9 sahnenin ortasında (.okl-stage).
   - Gece modu tuzakları (site.css): a:not(...) link rengini, h1-h6 başlığı, p paragrafı ezer; iki sınıflı seçici + !important.
   - Sınıf adlarında reklam, ad, ads, banner, sponsor geçmez (reklam engelleyiciler gizliyor).
   ===================================================================== */

/* ---------- Görsel sahnesi: Kutu/kapak 16:9 alanın ortasında, kendi oranında ---------- */
.okl-stage { display: flex; align-items: center; justify-content: center; background: var(--k-soft); }
[data-theme="dark"] .okl-stage { background: rgba(255, 255, 255, .06); }
.ogk .okl-stage > img.okl-box {
    width: auto; height: 84%; max-width: 88%; object-fit: contain; border-radius: .45rem;
    box-shadow: 0 .55rem 1rem rgba(0, 0, 0, .28);
}
.ogk a.ogk-card:hover .okl-stage > img.okl-box { transform: scale(1.03); }
.okl-empty { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--k-muted); font-size: 1.6rem; }

/* Manşet çerçevesi: 16:9 sahne (kutu kendi oranında) ya da 16:9 ana görsel */
.okl-frame-stage { aspect-ratio: 16 / 9; border-radius: 1.05rem; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ede7dc; }
.okl-frame-stage > img.okl-box { height: 88%; width: auto; max-width: 90%; object-fit: contain; border-radius: .5rem; box-shadow: 0 .7rem 1.3rem rgba(0, 0, 0, .3); }
.okl-frame-stage > img.okl-full { width: 100%; height: 100%; object-fit: cover; }
.okl-frame-stage > i { font-size: 2.6rem; color: #50566a; }

/* ---------- Manşet: Tür hapı, "OG öneriyor", Bir bakışta hapları ---------- */
.okl-kind { display: inline-flex; align-items: center; gap: .4rem; background: var(--k-deco); color: var(--k-on-deco); border-radius: 999px; padding: .32rem .85rem; font-size: .8rem; font-weight: 800; }
.okl-rec-hero { display: inline-flex; align-items: center; border-radius: 999px; overflow: hidden; background: #fff; color: #0f0f1a; font-size: .8rem; font-weight: 800; }
.okl-rec-hero b { background: #e30a17; color: #fff; font-family: 'Oswald', sans-serif; padding: .32rem .55rem; letter-spacing: .03em; }
.okl-rec-hero span { padding: .32rem .8rem .32rem .55rem; }

.okl-glance { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.3rem; }
.okl-glance > span { display: inline-flex; align-items: center; gap: .5rem; background: var(--k-glass); color: #fff; border-radius: 999px; padding: .45rem .95rem .45rem .5rem; font-size: .86rem; }
.okl-glance > span > i { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem; }
.okl-glance b { display: block; font-family: 'Oswald', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--k-bright); line-height: 1; }
.ogk .okl-glance small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .78); margin-top: .1rem; }
.okl-glance > span.is-key { background: var(--k-deco); color: var(--k-on-deco); }
.ogk .okl-glance > span.is-key b, .ogk .okl-glance > span.is-key small { color: var(--k-on-deco); }
.okl-glance > span.is-key > i { background: rgba(15, 15, 26, .12); }

/* Profilin "Video oyunu" bağı (og-profil .ogp-parent ile aynı biçim) */
.ogk .okl-games { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.ogk .okl-games .ogp-parent { margin: 0; }
.ogp-parent small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; opacity: .75; line-height: 1.1; }
.ogp-parent b { display: block; font-weight: 800; line-height: 1.2; }

/* ---------- OG Koleksiyon vitrini: Manşet sağında eğik kayıt kartları ---------- */
.okl-stack { position: relative; min-height: 20rem; }
.okl-stack > a { position: absolute; display: block; background: #fff; padding: .45rem; border-radius: 1.2rem; box-shadow: 0 1rem 0 -.45rem rgba(0, 0, 0, .35); transition: transform .2s ease; }
.okl-stack > a img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .85rem; }
.okl-stack > a:nth-child(1) { width: 15rem; left: 0; top: 2.4rem; transform: rotate(-7deg); }
.okl-stack > a:nth-child(2) { width: 17rem; right: 0; top: .2rem; transform: rotate(5deg); }
.okl-stack > a:nth-child(3) { width: 13rem; left: 30%; bottom: 0; transform: rotate(-2deg); z-index: 2; }
.okl-stack > a:hover { transform: rotate(0) translateY(-4px); z-index: 3; }

/* Kart altı kısa künye ve tür etiketi */
.ogk .okl-mini { display: flex; flex-wrap: wrap; gap: .25rem .55rem; font-size: .8rem; color: var(--k-muted); padding: 0 .35rem; margin-top: auto; }
.ogk .ogk-card__img .okl-cardkind { position: absolute; left: .55rem; top: auto; bottom: .55rem; z-index: 2; }
.ogk .ogk-card__img .ogp-rec { z-index: 2; }

/* ---------- Oyun sayfasındaki Koleksiyon bölümü ---------- */
.okl-sec-items { display: grid; gap: .9rem; }
.ogk .okl-sec-item { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.3rem; align-items: center; background: var(--k-surface); border: 1px solid var(--k-line); border-radius: 1.6rem; padding: .7rem 1.3rem .7rem .7rem; }
.okl-sec-item .ogk-card__img { margin: 0; }
.ogk .okl-sec-item h3 { font-size: 1.45rem; line-height: 1.15; margin: .35rem 0 .5rem; }
.ogk .okl-sec-item h3 a { color: var(--k-text) !important; text-decoration: none !important; }
.ogk .okl-sec-item h3 a:hover { color: var(--k-icon) !important; }
.okl-chips-ink { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.okl-chips-ink > span { display: inline-flex; align-items: center; gap: .3rem; background: var(--k-paper); border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; font-weight: 700; color: var(--k-text); }
.okl-chips-ink > span i { color: var(--k-icon); font-size: .8rem; }
.okl-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1.1rem; }
.okl-sec-head .ogk-h2 { margin-bottom: 0; }
.okl-sec-mark { font-size: .8rem; }

/* Kenar sütunu: "OG öneriyor" gerekçesi */
.ogk .okl-recnote { margin: .7rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--k-text); }

/* Önizleme şeridi (taslak kayıt, yalnız personel) */
.okl-preview { background: #ffc83d; color: #0f0f1a; font-weight: 700; border-radius: 999px; padding: .5rem 1rem; margin: 0 0 1rem; display: inline-block; }

/* Haber içi kart [koleksiyon slug="..."]: Stili CollectibleEmbedService içinde (okuma sayfası bu dosyayı yüklemez). */

/* ---------- Duyarlılık ---------- */
@media (max-width: 991.98px) {
    .okl-stack { min-height: 15rem; max-width: 28rem; width: 100%; margin: 0 auto; }
    .okl-stack > a:nth-child(1) { width: 11rem; }
    .okl-stack > a:nth-child(2) { width: 13rem; }
    .okl-stack > a:nth-child(3) { width: 9.5rem; }
    .ogk .okl-sec-item { grid-template-columns: minmax(0, 1fr); padding: .7rem .7rem 1.2rem; }
}
@media (max-width: 575.98px) {
    .okl-glance > span { padding: .35rem .8rem .35rem .4rem; }
    .okl-glance > span > i { width: 1.8rem; height: 1.8rem; }
    .ogk .okl-mini { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
    .okl-stack > a:hover { transform: none; }
}