/* Sayfaya ozel yerlesim. */

/* ================= genel bolum ================= */
.section { padding: var(--s-8) 0; border-top: 1px solid var(--line); }

/* ================= ana sayfa: hero ================= */
.hero { background: linear-gradient(115deg, var(--bg) 38%, var(--pitch-deep)); }
.hero-grid {
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: var(--s-7); align-items: center;
    padding-top: var(--s-8); padding-bottom: var(--s-8);
}
.hero-title { font-size: clamp(34px, 5vw, 52px); margin: var(--s-4) 0 var(--s-3); }
.hero-lede { max-width: 40ch; font-size: 17px; }
.hero .badges { margin-top: var(--s-5); }
.hero-more { margin-top: var(--s-4); font-size: 14px; color: var(--live); }

.hero-shots { display: flex; align-items: center; justify-content: center; min-width: 0; }
.phone-main { width: 168px; z-index: 2; }
.phone-side { width: 132px; opacity: .9; }
.hero-shots .phone-side:first-child { transform: rotate(-5deg) translateY(14px); margin-right: -18px; }
.hero-shots .phone-side:last-child { transform: rotate(5deg) translateY(14px); margin-left: -18px; }

/* ================= ana sayfa: oyunlar ================= */
.games-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-4); margin-top: var(--s-4);
}
.game-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); }
.game-card:hover { background: var(--panel-lit); text-decoration: none; }
.game-thumb {
    width: 56px; height: 56px; border-radius: var(--r-md); flex: 0 0 auto;
    background: linear-gradient(160deg, var(--pitch-lit), var(--pitch-deep));
}
.game-body { display: flex; flex-direction: column; }
.game-name { font-weight: var(--fw-label); font-size: 16px; }
.game-kind { color: var(--ink3); font-size: 13px; }

/* ================= ana sayfa: studyo ================= */
.studio-title { font-size: clamp(22px, 3vw, 30px); margin: var(--s-3) 0 var(--s-3); }
.studio-text { max-width: 56ch; }

/* ================= mobil ================= */
@media (max-width: 780px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .hero-shots { order: -1; }
    .phone-main { width: 136px; }
    .phone-side { width: 108px; }
    .section { padding: var(--s-7) 0; }
}

/* ================= ozellik satiri ================= */
.feature {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s-7); align-items: center;
}
.feature-title { font-size: clamp(22px, 3vw, 30px); margin: var(--s-3) 0 var(--s-3); }
.feature-text { max-width: 46ch; margin-bottom: var(--s-3); }
.feature-strong { color: var(--ink1); font-weight: var(--fw-label); }
.feature-note { color: var(--ink3); font-size: 14px; }
.feature-art { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.feature-phone { width: 190px; }
.feature-flip .feature-art { order: -1; }

.online-art { gap: var(--s-5); }
.online-phone { width: 148px; }
.online-link {
    width: 46px; height: 2px; background: var(--live); flex: 0 0 auto; position: relative;
}
.online-link::before, .online-link::after {
    content: ''; position: absolute; top: 50%; width: 8px; height: 8px;
    margin-top: -4px; border-radius: 50%; background: var(--live);
}
.online-link::before { left: -4px; }
.online-link::after { right: -4px; }

/* ================= sayi ================= */
.stat { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-4); }
.stat-num { font-size: 34px; font-weight: var(--fw-bold); color: var(--live); line-height: 1; }
.stat-label { font-size: 11px; letter-spacing: .12em; color: var(--ink3); font-weight: var(--fw-label); }

/* ================= kadro ================= */
.squad-head {
    display: flex; flex-wrap: wrap; gap: var(--s-4);
    justify-content: space-between; align-items: flex-end;
}
.squad-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: var(--s-3); margin-top: var(--s-6);
}
.squad-face { width: 100%; height: auto; }

/* ================= kapanis ================= */
.closing { background: linear-gradient(115deg, var(--pitch-deep), var(--bg)); }
.closing-inner { text-align: center; }
.closing-inner .lede { margin-top: var(--s-3); }
.closing-badges { justify-content: center; margin-top: var(--s-5); }

@media (max-width: 780px) {
    .feature-flip .feature-art { order: 0; }
    .feature-phone { width: 160px; }
    .online-phone { width: 124px; }
    .squad-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* ================= belge sayfalari ================= */
.doc { padding: var(--s-8) 0; }
.doc-inner { max-width: 68ch; }
.doc-title { font-size: clamp(28px, 4vw, 38px); }
.doc-date { color: var(--ink3); font-size: 13px; margin-top: var(--s-2); }
.doc-lede { font-size: 17px; margin-top: var(--s-5); }
.doc-h { font-size: 19px; margin-top: var(--s-7); }
.doc-p { color: var(--ink2); margin-top: var(--s-3); }
.doc-list { color: var(--ink2); margin-top: var(--s-3); }
.doc-list li { margin-top: var(--s-2); }
.doc-link { color: var(--live); }
.support-mail { font-size: 22px; font-weight: var(--fw-label); margin-top: var(--s-2); }