/*
    Stream Ember Launcher indirme sayfası — launcher'ın emberDark teması birebir:
    renkler plugins/vuetify.ts, ölçüler assets/styles/abstracts/tokens.css,
    zemin layout/app-shell.css, cam kart base/surfaces.css, dil seçici LocaleSwitcher.vue.
    Launcher'da tema değişirse burası da aynı değerlerle güncellenir.
*/
:root {
    /* emberDark (vuetify.ts) */
    --background: #0f1219;
    --surface: #171b26;
    --primary: #ff4d1a;
    --success: #2ec27e;
    --warning: #ffb340;
    --error: #ff5c5c;
    --on-surface: #e4e7ef;
    --on-primary: #ffffff;

    /* tokens.css */
    --se-color-shell: #0b0e14;
    --se-color-border: rgba(255, 255, 255, 0.08);
    --se-color-text-muted: #8f97a8;
    --se-gradient-ember: linear-gradient(135deg, #ff6a2a 0%, #ff3d00 100%);
    --se-glow-ember: 0 8px 24px rgba(255, 77, 26, 0.28);
    --se-radius-xs: 6px;
    --se-radius-sm: 8px;
    --se-radius-md: 12px;
    --se-radius-lg: 16px;
    --se-radius-xl: 20px;
    --se-radius-pill: 999px;
    --se-control-height: 40px;
    --se-space-1: 4px;
    --se-space-2: 8px;
    --se-space-3: 12px;
    --se-space-4: 16px;
    --se-space-5: 24px;
    --se-space-6: 32px;
    --se-text-xs: 12px;
    --se-text-sm: 13px;
    --se-text-md: 14px;
    --se-text-lg: 16px;
    --se-text-xl: 20px;
    --se-text-2xl: 24px;
    --se-surface-2: rgba(255, 255, 255, 0.04);
    --se-surface-3: rgba(255, 255, 255, 0.07);

    /* surfaces.css (cam kenar) */
    --se-glass-sheen: rgba(255, 255, 255, 0.03);
    --se-glass-edge-mid: rgba(255, 255, 255, 0.05);
    --se-glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.03) inset;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    color-scheme: dark;
}

/* Cam kenar rengi hover'da akışkan değişsin diye tipli kayıt (launcher surfaces.css ile aynı). */
@property --se-glass-edge-top {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(255, 255, 255, 0.14);
}
@property --se-glass-edge-bottom {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(255, 255, 255, 0.04);
}

* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
}
body {
    margin: 0;
    font-family: Roboto, system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans Arabic', sans-serif;
    font-size: var(--se-text-md);
    background: var(--background);
    color: var(--on-surface);
    line-height: 1.55;
}
a { color: inherit; }
img { display: block; }
.container { width: 100%; max-width: 1145px; margin: 0 auto; padding: 0 var(--se-space-4); }
.muted { color: var(--se-color-text-muted); }

/* Zemin: app-shell.css — kor / çivit ışımaları + ışık huzmesi (sabit); desen yok */
.shell-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--background);
    background-image:
        radial-gradient(900px 560px at 0% 0%, rgba(255, 77, 26, 0.14), transparent 62%),
        radial-gradient(820px 620px at 100% 100%, rgba(80, 100, 255, 0.1), transparent 62%),
        linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.025) 50%, transparent 58%);
}

/* Üst çubuk: app-bar.css (kabuk rengi, alt çizgi) */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--se-color-shell);
    border-bottom: 1px solid var(--se-color-border);
    transition: box-shadow 0.16s ease;
}
.topbar.is-scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--se-space-3); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; font-weight: 700; white-space: nowrap; }
.brand__mark { width: 32px; height: 32px; object-fit: contain; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }
.brand__ember { color: var(--primary); }
.brand__product { color: var(--se-color-text-muted); font-weight: 500; }

/* Dil seçici: LocaleSwitcher.vue (tonal birincil düğme + bayrak + yerel ad, liste menü) */
.locale { position: relative; flex: none; }
.locale__button {
    display: inline-flex;
    align-items: center;
    gap: var(--se-space-2);
    height: var(--se-control-height);
    padding: 0 var(--se-space-3);
    border: 0;
    border-radius: var(--se-radius-sm);
    background: rgba(255, 77, 26, 0.12);
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
}
.locale__button:hover, .locale__button[aria-expanded='true'] { background: rgba(255, 77, 26, 0.2); }
.locale__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locale__button .icon--sm { transition: transform 0.25s var(--ease); }
.locale__button[aria-expanded='true'] .icon--sm { transform: rotate(180deg); }
.flag { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, 0.08); }
.locale__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--se-space-2));
    z-index: 30;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--se-color-border);
    border-radius: var(--se-radius-md);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.locale__panel.is-open { opacity: 1; transform: none; }
.locale__menu {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: var(--se-space-2);
    list-style: none;
}
.locale__sheet-head, .locale__scrim { display: none; }
.locale__panel[hidden], .locale__scrim[hidden] { display: none !important; }
.locale__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--se-space-2) var(--se-space-3);
    border-radius: var(--se-radius-sm);
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s var(--ease);
}
.locale__item:hover, .locale__item:focus-visible { background: var(--se-surface-3); }
.locale__item[aria-selected='true'] { background: rgba(255, 77, 26, 0.12); color: var(--primary); }
.locale__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.locale__native { font-weight: 500; unicode-bidi: isolate; }
.locale__sub { font-size: var(--se-text-xs); color: var(--se-color-text-muted); }
.locale__check { width: 18px; height: 18px; color: var(--primary); visibility: hidden; }
.locale__item[aria-selected='true'] .locale__check, .locale__item[aria-current='page'] .locale__check { visibility: visible; }
.locale__check { flex: none; margin-inline-start: auto; }

/* Hero */
.hero { padding: 64px 0 var(--se-space-6); }
.hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 40px; }
.hero h1 { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.1; margin: var(--se-space-3) 0 var(--se-space-4); font-weight: 900; letter-spacing: -0.02em; }
.lead { font-size: var(--se-text-lg); color: var(--se-color-text-muted); margin: 0 0 var(--se-space-5); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--se-space-3); }
.meta { margin: var(--se-space-3) 0 0; font-size: var(--se-text-sm); color: var(--se-color-text-muted); min-height: 1.5em; }
.hero__art { position: relative; display: grid; place-items: center; min-height: 260px; }
.hero__art img { position: relative; width: min(280px, 60vw); height: auto; }
.glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 77, 26, 0.3), rgba(255, 61, 0, 0.1) 45%, transparent 70%); filter: blur(28px); }
.badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 var(--se-space-3);
    border-radius: var(--se-radius-pill);
    font-size: var(--se-text-xs);
    font-weight: 600;
    background: rgba(255, 77, 26, 0.14);
    color: var(--primary);
    border: 1px solid rgba(255, 77, 26, 0.32);
}

/* Düğmeler: birincil marka gradyanı (tokens.css --se-gradient-ember) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: var(--se-control-height);
    padding: 0 18px;
    border-radius: var(--se-radius-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
}
.btn--lg { height: 52px; padding: 0 var(--se-space-5); font-size: var(--se-text-lg); border-radius: var(--se-radius-md); }
.btn--primary { background: var(--se-gradient-ember); color: var(--on-primary); box-shadow: var(--se-glow-ember); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: var(--se-surface-2); border-color: rgba(255, 255, 255, 0.14); }
.btn--ghost:hover { border-color: rgba(255, 110, 60, 0.55); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.btn:focus-visible, .locale__button:focus-visible, .file:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Bölümler */
.section { padding: var(--se-space-5) 0; }
.section h2 { font-size: var(--se-text-2xl); margin: 0 0 var(--se-space-4); font-weight: 700; }
.grid, .info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--se-space-5); }

/* Cam kart: surfaces.css — yarı saydam yüzey + blur, gradyan 1px kenar, hover'da kor kenar (akışkan) */
.card {
    position: relative;
    padding: var(--se-space-5);
    border-radius: var(--se-radius-lg);
    background-color: var(--surface);
    background-image: linear-gradient(180deg, var(--se-glass-sheen), transparent 38%);
    box-shadow: var(--se-glass-shadow);
    transition: --se-glass-edge-top 0.45s var(--ease), --se-glass-edge-bottom 0.45s var(--ease), box-shadow 0.45s ease, background-color 0.45s ease;
}
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(140deg, var(--se-glass-edge-top), var(--se-glass-edge-mid) 32%, var(--se-glass-edge-mid) 68%, var(--se-glass-edge-bottom));
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.card:hover {
    --se-glass-edge-top: rgba(255, 110, 60, 0.45);
    --se-glass-edge-bottom: rgba(255, 77, 26, 0.18);
}
@media (min-width: 840px) {
    .card--glass {
        background-color: rgba(23, 27, 38, 0.66);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
}
.info h3 { margin: 0 0 6px; font-size: var(--se-text-lg); }
.info p { margin: 0; color: var(--se-color-text-muted); }

/* Platform kartları */
.platform { display: flex; flex-direction: column; gap: var(--se-space-4); }
.platform__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--se-space-3); }
.platform__icon { width: 44px; height: 44px; border-radius: var(--se-radius-md); display: grid; place-items: center; background: rgba(255, 77, 26, 0.12); }
.platform__icon svg { width: 24px; height: 24px; fill: var(--primary); }
.platform.is-soon .platform__icon { background: var(--se-surface-2); }
.platform.is-soon .platform__icon svg { fill: var(--se-color-text-muted); }
.platform__name { margin: 0; font-size: var(--se-text-lg); }
.platform__sub { margin: 0; font-size: var(--se-text-sm); }
/* Durum rozetleri renkli (status.css): hazır yeşil, yakında turuncu */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--se-radius-pill); font-size: var(--se-text-xs); font-weight: 600; white-space: nowrap; border: 1px solid; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--ready { color: var(--success); background: rgba(46, 194, 126, 0.12); border-color: rgba(46, 194, 126, 0.35); }
.chip--soon { color: var(--warning); background: rgba(255, 179, 64, 0.12); border-color: rgba(255, 179, 64, 0.35); }
.platform__files { display: flex; flex-direction: column; gap: var(--se-space-2); }
.file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--se-space-3);
    padding: var(--se-space-3) 14px;
    border-radius: var(--se-radius-md);
    background: var(--se-surface-2);
    border: 1px solid var(--se-color-border);
    text-decoration: none;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
a.file:hover { border-color: rgba(255, 110, 60, 0.55); background: var(--se-surface-3); }
.file__label { flex: 1; min-width: 0; font-weight: 500; }
.file__meta { margin-inline-start: auto; font-size: var(--se-text-xs); color: var(--se-color-text-muted); white-space: nowrap; }
.file.is-disabled { cursor: not-allowed; color: var(--se-color-text-muted); }
.file .icon { width: 18px; height: 18px; color: var(--primary); }
.file.is-disabled .icon { color: var(--warning); }

/* Sürüm notları */
.notes__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--se-space-2); margin-bottom: var(--se-space-2); }
.notes ul { margin: 0; padding-inline-start: 20px; }
.notes li { margin: var(--se-space-1) 0; }

/* Alt bilgi */
.footer { border-top: 1px solid var(--se-color-border); background: var(--se-color-shell); padding: var(--se-space-5) 0 var(--se-space-6); margin-top: var(--se-space-5); color: var(--se-color-text-muted); font-size: var(--se-text-md); }
.footer__inner { display: flex; justify-content: space-between; gap: var(--se-space-3); flex-wrap: wrap; }
.footer a { color: var(--se-color-text-muted); transition: color 0.2s var(--ease); }
.footer a:hover { color: var(--on-surface); }

/* Breakpoint ölçeği launcher ile aynı: 600 / 840 / 1145 */
@media (max-width: 1144.98px) {
    .grid, .info-grid { gap: var(--se-space-4); }
}
@media (max-width: 839.98px) {
    .grid, .info-grid, .hero__inner { grid-template-columns: 1fr; }
    .hero__art { display: none; }
    .hero { padding-top: 40px; }
    .hero h1 { font-size: 32px; }
}
@media (max-width: 599.98px) {
    .container { padding: 0 var(--se-space-4); }
    .topbar__inner { height: 56px; }
    .hero { padding: var(--se-space-6) 0 var(--se-space-4); }
    .hero h1 { font-size: 28px; }
    .lead { font-size: var(--se-text-md); margin-bottom: var(--se-space-5); }
    .section { padding: var(--se-space-4) 0; }
    .section h2 { font-size: var(--se-text-xl); }
    .card { padding: var(--se-space-4); }
    .footer__inner { flex-direction: column; align-items: flex-start; }

    /* Dil seçici: alttan açılan sayfa (Flutter showModalBottomSheet) */
    .locale__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(0, 0, 0, 0.55);
    }
    .locale:not([open]) > .locale__scrim { display: none; }
    .locale[open] > .locale__scrim { animation: locale-fade 0.3s var(--ease); }
    .locale__panel {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: 41;
        min-width: 0;
        max-height: 85vh;
        max-height: 85dvh;
        display: flex;
        flex-direction: column;
        border: 0;
        border-top: 1px solid var(--se-color-border);
        border-radius: var(--se-radius-xl) var(--se-radius-xl) 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .locale[open] > .locale__panel { display: flex; animation: locale-sheet-up 0.3s cubic-bezier(0.2, 0, 0, 1); }
    .locale__sheet-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--se-space-3);
        padding: var(--se-space-3) var(--se-space-4) 0;
    }
    .locale__panel .locale__heading { padding: var(--se-space-3) var(--se-space-5) var(--se-space-1); font-size: var(--se-text-lg); }
    .locale__handle { width: 36px; height: 4px; border-radius: var(--se-radius-pill); background: rgba(255, 255, 255, 0.24); }
    .locale__menu { max-height: none; flex: 1; padding: var(--se-space-2) var(--se-space-3) var(--se-space-4); }
    .locale__item { min-height: 52px; padding: var(--se-space-2) var(--se-space-4); }
    .locale__item .flag { width: 24px; height: 24px; }
    body:has(.locale[open]) { overflow: hidden; }

    .brand__product { display: none; }
    .locale__button { padding: 0 var(--se-space-2); gap: 6px; }
    .locale__label { max-width: 112px; }
    .hero__actions .btn { width: 100%; }
}
@keyframes locale-sheet-up { from { transform: translateY(100%); } }
@keyframes locale-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .locale[open] > .locale__panel, .locale[open] > .locale__scrim { animation: none; }
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Server-rendered language links also work without JavaScript. */
.locale summary { list-style: none; cursor: pointer; }
.locale summary::-webkit-details-marker { display: none; }
.locale:not([open]) > .locale__panel { display: none; }
.locale[open] > .locale__panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.locale__heading { display: block; padding: 16px 16px 8px; }
.locale__menu { list-style: none; margin: 0; }
a.locale__item { text-decoration: none; }
.locale__item[aria-current='page'] { background: rgba(255,77,26,.12); color: var(--primary); }
.manifest-error { padding: 16px; border: 1px solid var(--warning); border-radius: 12px; color: var(--warning); }
[dir='rtl'] .hero__text { text-align: right; }