/* Paylasilan bilesenler: gezinme, rozet, kart, telefon cercevesi, alt kunye. */

/* Genel kapsayici */
.wrap { max-width: var(--olcu); margin: 0 auto; padding: 0 var(--s-5); }

/* --- iceriğe atla --- */
/* Klavye/ekran okuyucu kullanicisi icin: odaklanana kadar ekran disinda,
   odaklaninca gorunur olur. Hedef #main -- her sayfanin <main>'inde var. */
.skip {
    position: absolute; left: var(--s-3); top: -60px; z-index: 10;
    background: var(--ink1); color: var(--bg);
    padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
    font-weight: var(--fw-label); transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s-3); }

/* --- gezinme --- */
.nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4);
    max-width: var(--olcu); margin: 0 auto;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
}
/* ⚠️ 360 px'te marka (132 px) + gezinme baglantilari (249-254 px, dile gore)
   tek satirda 396-402 px genislik istiyor -- 360 px'lik govde genisligi (dolgu
   dusuldukten sonra 312 px) buna hicbir zaman yetmiyor. Olculdu: EN 396.4 px,
   TR 401.6 px, ikisi de 480 px esiginin epey altinda kaliyor. Kirpma ya da
   gizleme yerine ikinci satira SARDIRILIYOR -- marka her zaman gorunur kalir
   ve dort hedefin (Oyunlar/Studio, Studyo, Destek, dil degistirici) hicbiri
   erisilemez olmuyor. */
@media (max-width: 520px) {
    .nav { flex-wrap: wrap; row-gap: var(--s-3); }
}
.brand { display: flex; align-items: center; gap: var(--s-2); }
.brand:hover { text-decoration: none; }
.mark { width: 22px; height: 22px; color: var(--ink1); flex: 0 0 auto; }
.wordmark { font-weight: var(--fw-brand); letter-spacing: .145em; font-size: 14px; }
.wordmark-soft { color: var(--ink3); font-weight: var(--fw-medium); }
.wordmark-sm { font-size: 12px; }
.nav-links { display: flex; align-items: center; gap: var(--s-5); font-size: 13px; color: var(--ink2); }
.nav-links a:hover { color: var(--ink1); }
/* ⚠️ ink3 DEGIL ink2 -- bu etkilesimli bir gezinme kontrolu (dil degistirici),
   etiket ya da dekoratif metin degil. ink3 4.5 esiginin altinda kalirdi. */
.lang-switch {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 2px var(--s-2); font-size: 12px; color: var(--ink2);
}

/* --- etiket / baslik --- */
.label { font-size: 11px; letter-spacing: .22em; font-weight: var(--fw-label); color: var(--ink3); }
.label-live { color: var(--live); }
.label-gold { color: var(--gold); }
.label-epic { color: var(--tier-epic); }
.label-rare { color: var(--tier-rare); }
.lede { color: var(--ink2); }

/* --- magaza rozeti --- */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* ⚠️ opacity YOK -- ink2 (7.1:1) ustune .6 opaklik olculdu ve bg'ye karsi
   ~3.35:1'e dusuyordu (11 px, 4.5 esiginin altinda). Sonugu ink2'nin
   KENDI tonuyla veriliyor, opaklikla degil -- olculen 7.49:1. */
.badge {
    display: flex; flex-direction: column; line-height: 1.35;
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    padding: var(--s-2) var(--s-4); font-size: 11px; color: var(--ink2);
}
.badge b { color: var(--ink1); font-size: 14px; font-weight: var(--fw-label); }

/* --- rozet --- */
.pill {
    display: inline-block; border-radius: var(--r-sm);
    padding: 3px var(--s-2); font-size: 10px; letter-spacing: .16em;
    font-weight: var(--fw-bold); color: var(--tier-ink); background: var(--live);
}

/* --- kart --- */
.card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.card-ghost {
    border: 1px dashed var(--line); border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink3); font-size: 14px; padding: var(--s-6);
}

/* --- katman rozetleri --- */
.tiers { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tier {
    font-size: 10px; letter-spacing: .1em; font-weight: var(--fw-bold);
    padding: 4px var(--s-2); border-radius: var(--r-sm); color: var(--tier-ink);
}
.tier-rare { background: var(--tier-rare); }
.tier-epic { background: var(--tier-epic); }
.tier-supreme { background: var(--tier-supreme); }
.tier-legendary { background: var(--tier-legendary); }

/* --- telefon cercevesi --- */
/* ⚠️ Ekran goruntulerinin dordu 780x1688 (oran .462), match.png ise 708x1341
   (oran .528) -- proje sahibinin dogrudan verdigi farkli boyutlu tek kare.
   Cerceveye COKUNLUK orani sabitleniyor (cogunluk degeri) ve img
   object-fit: cover ile kirpilarak dolduruyor -- boylece uc telefon yan
   yanayken hicbiri digerinden kisa cikmiyor, kaynak goruntu de bozulmuyor. */
.phone {
    border: 2px solid var(--line-strong); border-radius: var(--r-lg);
    overflow: hidden; background: var(--bg); flex: 0 0 auto;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
    aspect-ratio: 780 / 1688;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- alt kunye --- */
.foot {
    display: flex; flex-wrap: wrap; gap: var(--s-4);
    justify-content: space-between; align-items: flex-end;
    max-width: var(--olcu); margin: 0 auto;
    padding: var(--s-6) var(--s-5);
    border-top: 1px solid var(--line);
}
.foot-meta { color: var(--ink3); font-size: 13px; margin-top: var(--s-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: 13px; color: var(--ink2); }