/* ==========================================================================
   EPİK — WebAR kataloğu
   Koyu lacivert + altın. Yazı tipi sitenin kendi Bricolage Grotesque dosyaları.
   ========================================================================== */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(/assets/fonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawA1Xp.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(/assets/fonts/3y9H6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiawDVXplDs.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tanıtım sayfasının metin yazısı (OFL, kendi sunucumuzda): Hanken Grotesk. */
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(fonts/hanken-grotesk-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(fonts/hanken-grotesk-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #0b0f17;
    --kart: #111827;
    --kart-2: #172033;
    --cizgi: rgba(148, 163, 184, .16);
    --metin: #eef2f8;
    --soluk: #94a3b8;
    --silik: #64748b;
    --altin: #ffd24a;
    --altin-2: #e0a92a;
    --altin-hale: rgba(255, 210, 74, .16);
    --tehlike: #f87171;
    --uyari: #fcd34d;
    --yaricap: 18px;
    --cam: rgba(11, 15, 23, .58);
    --yazi: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color-scheme: dark;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--metin);
    font-family: var(--yazi);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(255, 210, 74, .32); color: var(--metin); }
html { scrollbar-color: #2a3346 var(--bg); accent-color: var(--altin); }
img { max-width: 100%; }
h1, h2, p { margin: 0; }

:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }

.gorunmez {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------- Üst çubuk */

.ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
}


/* ----------------------------------------------------------------- Galeri */

.galeri {
    width: min(1240px, 100%);
    margin: 0 auto;
    padding: 0 max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

/* Galeride üst çubuk yok: sayfanın üst boşluğu (çentikli ekranda güvenli alan dahil) buradan gelir. */
.giris {
    padding: max(clamp(36px, 6vw, 64px), calc(env(safe-area-inset-top) + 20px)) 0 20px;
    max-width: 660px;
}
.giris__etiket {
    margin-bottom: 10px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--altin);
}
.giris__baslik {
    font-size: clamp(2.2rem, 8vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.giris__baslik em { font-style: normal; color: var(--altin); }
/* Satır yalnız anlam öbekleri arasında kırılır ("Odanda gör" bölünmez); satıra sığmayan öbek kendi içinde kırılır. */
.giris__obek { display: inline-block; }
.giris__metin { margin-top: 14px; max-width: 52ch; color: var(--soluk); text-wrap: pretty; }

.arac {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    margin: 0 -4px 6px;
    padding: 10px 4px;
    transition: padding .2s;
}
/* Üste yapışınca kartların üstünde yüzer: yanlarda da üstteki kadar (10px) boşluk. Sınıfı galeri.js koyar. */
.arac.yapisik { padding-inline: 14px; }
.ara {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--kart);
    transition: border-color .2s, box-shadow .2s;
}
.ara:focus-within { border-color: rgba(255, 210, 74, .6); box-shadow: 0 0 0 4px var(--altin-hale); }
.ara svg { flex: none; width: 18px; height: 18px; color: var(--soluk); }
.ara input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--metin);
    font: inherit;
    font-size: 16px;
}
.ara input::placeholder { color: var(--silik); }
.ara input::-webkit-search-cancel-button { filter: invert(1) opacity(.45); }

.gruplar {
    display: flex;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.gruplar::-webkit-scrollbar { display: none; }
.grup {
    flex: none;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: transparent;
    color: var(--soluk);
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.grup:hover { color: var(--metin); border-color: rgba(148, 163, 184, .35); }
.grup[aria-pressed="true"] { background: var(--altin); border-color: var(--altin); color: #17202f; font-weight: 600; }

.izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 720px)  { .izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }

.kart[hidden] { display: none; }

.kart__bag {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    background: var(--kart);
    text-decoration: none;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s;
}
.kart__sahne {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background:
        radial-gradient(90% 65% at 50% 36%, #1f2b48 0%, rgba(17, 24, 39, 0) 72%),
        linear-gradient(180deg, #131b2c, var(--kart));
}
.kart__sahne::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 4%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 210, 74, .16), rgba(255, 210, 74, 0));
}
.kart__sahne img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.kart__metin { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.kart__ad { font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.kart__alt { color: var(--soluk); font-size: .84rem; }

@media (hover: hover) and (pointer: fine) {
    .kart__bag:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 210, 74, .45);
        box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 210, 74, .12);
    }
    .kart__bag:hover .kart__sahne img { transform: scale(1.04); }
}
.kart__bag:active { transform: scale(.985); }

.bos { padding: 56px 0; text-align: center; color: var(--soluk); }
.bos[hidden] { display: none; }

/* ----------------------------------------------------------------- Alt bilgi */

/* Alt bilgili sayfalar: içerik kısaysa (boş arama, 404) alt bilgi ekranın dibinde, uzunsa içeriğin sonunda. */
.sayfa-galeri,
.sayfa-yok,
.sayfa-ana {
    display: flex;
    flex-direction: column;
}
.alt {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    color: var(--silik);
    font-size: .85rem;
}
/* Football Star logosu: alt bilgide küçük ve soluk, üzerine gelince tam parlaklık */
.alt__imza { display: block; opacity: .7; transition: opacity .2s; }
.alt__imza:hover,
.alt__imza:focus-visible { opacity: 1; }
.alt__imza img { display: block; width: auto; height: 22px; }

/* ----------------------------------------------------------------- Düğmeler */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe08a 0%, var(--altin) 52%, var(--altin-2) 100%);
    box-shadow: 0 12px 28px -12px rgba(255, 210, 74, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
    color: #17202f;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, filter .2s ease;
}
.dugme:hover { filter: brightness(1.06); }
.dugme:active { transform: scale(.98); }
.dugme { min-height: 46px; padding: 0 22px; font-size: .95rem; }

.ikon-dugme {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--cizgi);
    border-radius: 50%;
    background: var(--cam);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ikon-dugme svg { width: 20px; height: 20px; }
.ikon-dugme[hidden] { display: none; }

/* ----------------------------------------------------------------- Ziyaretçi sayfaları: model, AR açılışı, 404 (neon)
   16 Ekim 2026'dan beri tanıtımla aynı dünya (kullanıcı: "bu sayfaları vb. neden en baştan tasarım standartlarına uygun
   olarak tasarlamadık?"): --fs-* token'ları (tanımı tanıtım bölümünde; .sayfa-model, .sayfa-ar-ac ve .sayfa-yok da
   kapsar), Saira + Hanken, neon hap düğme (.fs-dugme), neon kenarlı koyu hap ipucu ve rozet. Eski
   "Projektör Altında" sistemi (:root lacivert-altın, Bricolage) yalnız yönetim panelinde ve baskı sayfasında kaldı. */

/* --------------------------------------- Model sayfası. Telefonda üstte sahne, altta panel; 960px'ten sonra solda sahne,
   sağda 400px panel. Sahne bir gece stadı: tepeden mavi projektör, oyuncunun ayağında neon zemin ışığı, arkasından
   paketin çapraz neon şeridi geçer. */

.sayfa-model { height: 100dvh; overflow: hidden; }

.gorunum {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
}

/* Sahnenin üstünde yüzen geri ve paylaş: tanıtımın üst çubuğuyla aynı cam (yalnız okunurluk için) */
.ust--sahne {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: calc(var(--fs-b-s) + env(safe-area-inset-top)) max(var(--fs-b-s), env(safe-area-inset-right)) 0 max(var(--fs-b-s), env(safe-area-inset-left));
    pointer-events: none;
}
.ust--sahne > * { pointer-events: auto; }

/* Geri bağlantısı yönetim panelinin galerisinde de var (eski görünüm); model sayfasında neon cam hap */
.geri {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 42px;
    padding: 0 16px 0 10px;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--cam);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
}
.geri svg { width: 20px; height: 20px; }

.sayfa-model .geri,
.sayfa-model .ikon-dugme {
    height: 44px;
    border: 1px solid var(--fs-kenar-cizgi);
    background: rgba(6, 20, 40, .8);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -22px rgba(0, 0, 0, .9);
    color: var(--fs-krom);
    transition: border-color .2s ease, color .2s ease;
}
.sayfa-model .geri {
    gap: 6px;
    padding: 1px 18px 0 12px;
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-etiket);
    font-weight: 700;
    letter-spacing: var(--fs-iz-etiket);
    text-transform: uppercase;
}
.sayfa-model .ikon-dugme { width: 44px; }

.sahne {
    position: relative;
    isolation: isolate;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(34% 9% at 50% 91%, rgba(113, 248, 74, .24), transparent 72%),
        radial-gradient(75% 62% at 50% 0%, rgba(13, 134, 231, .42), rgba(13, 134, 231, .1) 55%, transparent 82%),
        linear-gradient(180deg, #071a30, var(--fs-gece) 80%);
}
/* Paketin çapraz neon şeridi: kalın ve ince, sahnenin bir kenarından öbürüne, oyuncunun arkasından; soluk tutulur,
   yıldız oyuncudur */
.sahne::before,
.sahne::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 60%;
    left: -30%;
    width: 160%;
    height: 10px;
    margin-top: -5px;
    border-radius: 5px;
    background: linear-gradient(90deg, transparent, rgba(113, 248, 74, .55) 28%, var(--fs-neon-acik) 50%, rgba(113, 248, 74, .55) 72%, transparent);
    transform: rotate(-28deg);
    filter: drop-shadow(0 0 14px rgba(113, 248, 74, .55));
    opacity: .5;
    pointer-events: none;
}
.sahne::after { top: calc(60% + 34px); height: 3px; margin-top: -1.5px; opacity: .3; }

/* 360° görünüm: modelin sunucuda çizilmiş kareleri (inc/model.php, statik/model.js); 3D dosya tarayıcıya gelmez.
   Kareler saydam zeminli 4:5; sahnenin zemini arkadan görünür. Kare, sahneyi tam kaplayan kutuda `contain` ile sığar:
   ızgarayla ortalanınca kutu boyunu genişlikten (4:5) alıp sahneden taşıyordu, masaüstünde oyuncu belden kesik
   görünüyordu (16 Ekim 2026). Görsel parmağı almaz (uzun basınca kaydet menüsü yok), sürükleme kapsayıcıda. */
.donus {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.donus.suruklu { cursor: grabbing; }
.sayfa-model .donus:focus-visible { outline: 2px solid var(--fs-camgobegi); outline-offset: -8px; border-radius: var(--fs-r); }
.donus__kare { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* Yükleniyor: ilk kare gelene kadar sahnenin ortasında neon halka; statik/model.js .yukleniyor ekler, görsel gelince (ya da
   gelmezse) kaldırır (26 Ekim 2026, kullanıcı: "yüklenirken preloader olsun, boş gözüküyor") */
.donus.yukleniyor::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 3px solid rgba(19, 215, 252, .18);
    border-top-color: var(--fs-neon);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(113, 248, 74, .45));
    animation: fs-yukleme-halka .9s linear infinite;
    pointer-events: none;
}
@keyframes fs-yukleme-halka { to { transform: rotate(360deg); } }

/* İpucu ve rozet: neon kenarlı koyu hap, büyük harf Saira */
.ipucu,
.rozetler li {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px 7px;
    border: 1px solid rgba(113, 248, 74, .55);
    border-radius: 999px;
    background: #061428;
    color: var(--fs-krom);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-etiket);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--fs-iz-etiket);
    text-transform: uppercase;
    white-space: nowrap;
}
.ipucu {
    position: absolute;
    left: 50%;
    bottom: var(--fs-b-s);
    z-index: 2;
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .6), 0 0 20px -6px rgba(113, 248, 74, .55);
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity .5s var(--fs-egri);
}
.ipucu.gizli { opacity: 0; }

.panel {
    position: relative;
    z-index: 3;
    display: grid;
    gap: var(--fs-b-s);
    padding: var(--fs-b-m) max(var(--fs-b-m), env(safe-area-inset-right)) calc(var(--fs-b-m) + env(safe-area-inset-bottom)) max(var(--fs-b-m), env(safe-area-inset-left));
    border-top: 1px solid var(--fs-kenar-cizgi);
    background: linear-gradient(180deg, #08203d, var(--fs-gece) 140px);
    box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .85);
}

/* Oyuncunun adı: tanıtımın bölüm başlığıyla aynı yazı (Saira 800, dar, büyük harf), panelin ölçüsünde */
.panel__ad,
.ar-ac__ad {
    color: var(--fs-krom);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-oyuncu);
    font-weight: 800;
    font-stretch: 84%;
    line-height: 1.04;
    letter-spacing: -.005em;
    text-transform: uppercase;
    text-wrap: balance;
}
.panel__alt { margin-top: var(--fs-b-xs); color: var(--fs-soluk); font-size: var(--fs-t-kucuk); }

.rozetler { display: flex; flex-wrap: wrap; gap: var(--fs-b-xs); margin: var(--fs-b-s) 0 0; padding: 0; list-style: none; }
.rozetler:empty { display: none; }

.durum { min-height: 1.5em; color: var(--fs-soluk); font-size: var(--fs-t-kucuk); line-height: 1.5; text-align: center; text-wrap: pretty; }
.durum:empty { display: none; }
.durum[data-tur="uyari"] { color: var(--uyari); }
.durum[data-tur="hata"] { color: var(--tehlike); }

/* Masaüstünde okutulan kartın QR'ı: ince camgöbeği kenarlı kutu; beyaz yalnız QR'ın arkasında */
.qr-kutu {
    display: flex;
    align-items: center;
    gap: var(--fs-b-s);
    padding: var(--fs-b-s);
    border: 1px solid var(--fs-kenar-cizgi);
    border-radius: var(--fs-r);
    background: rgba(7, 26, 48, .7);
}
.qr-kutu[hidden] { display: none; }
.qr-kutu img { flex: none; width: 120px; height: 120px; padding: 6px; border-radius: var(--fs-r-kucuk); background: #fff; }
.qr-kutu p { color: var(--fs-soluk); font-size: var(--fs-t-kucuk); line-height: 1.5; }
.qr-kutu strong {
    display: block;
    margin-bottom: var(--fs-b-xs);
    color: var(--fs-krom);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-etiket);
    font-weight: 700;
    letter-spacing: var(--fs-iz-etiket);
    text-transform: uppercase;
}

/* Telif ve kullanım uyarısı: model sayfasının ve AR açılış sayfasının dibinde, küçük ve silik (metin: TELIF_UYARISI) */
.telif { color: var(--fs-silik); font-size: var(--fs-t-kucuk); line-height: 1.5; text-align: center; text-wrap: pretty; }

/* Masaüstü: sahne solda, bilgi paneli sağda (tanıtımın ışıklı paneli gibi: tepeden mavi projektör) */
@media (min-width: 960px) {
    .gorunum { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: 1fr; }
    .panel {
        align-content: start;
        gap: var(--fs-b-m);
        padding: var(--fs-b-xl) var(--fs-b-l) var(--fs-b-l);
        overflow-y: auto;
        border-top: 0;
        border-left: 1px solid var(--fs-kenar-cizgi);
        background:
            radial-gradient(90% 45% at 100% 0%, rgba(13, 134, 231, .32), transparent 72%),
            linear-gradient(180deg, #0a2246, #050f1f 70%);
        box-shadow: none;
    }
    .ust--sahne { right: 400px; }
    .ipucu { bottom: var(--fs-b-m); }
    .durum, .telif { text-align: left; }
}

/* Alçak ekran (yatay telefon): panel kaydırılabilir kalsın */
@media (max-width: 959px) and (max-height: 520px) {
    .panel { max-height: 55dvh; overflow-y: auto; }
}

@media (hover: hover) {
    .sayfa-model .geri:hover,
    .sayfa-model .ikon-dugme:hover { border-color: var(--fs-neon); color: #fff; }
}

/* Bildirim (bağlantı kopyalandı): yönetim panelinde de var (eski görünüm); model sayfasında neon hap */
.bildirim {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 10;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--metin);
    color: var(--bg);
    font-size: .9rem;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.bildirim.acik { opacity: 1; transform: translate(-50%, 0); }
.sayfa-model .bildirim {
    padding: 12px 20px 11px;
    background: var(--fs-neon);
    box-shadow: 0 12px 30px -10px rgba(113, 248, 74, .55);
    color: var(--fs-murekkep);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-etiket);
    font-weight: 800;
    letter-spacing: var(--fs-iz-etiket);
    text-transform: uppercase;
}

.debug {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 64px;
    z-index: 20;
    max-height: 45dvh;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    border-radius: 12px;
    background: rgba(0, 0, 0, .78);
    color: #d1fae5;
    font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-all;
    pointer-events: none;
}

/* --------------------------------------- AR açılış (dinamik QR, iPhone/iPad). Ortada oyuncunun afişi (arkasında
   projektör, ayağında neon zemin ışığı), adı, neon "AR'da aç", kısa talimat, çizgi "3D olarak incele" ve telif. Afiş,
   içinde yalnız <img> olan rel="ar" bağlantısıdır (Quick Look şartı); ışıklar bu yüzden dış kutunun sözde öğelerinde. */

.ar-ac {
    min-height: 100dvh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--fs-b-s);
    padding: max(var(--fs-b-l), env(safe-area-inset-top)) max(var(--fs-kenar), env(safe-area-inset-right)) max(var(--fs-b-l), env(safe-area-inset-bottom)) max(var(--fs-kenar), env(safe-area-inset-left));
    overflow-x: hidden;   /* eski Safari: clip yoksa */
    overflow-x: clip;
    text-align: center;
}
/* AR bağlantısı basılı tutulunca iPhone "Bağlantıyı Kopyala / Bağlantılı Dosyayı İndir" göstermesin. */
.ar-ac, .ar-ac a, .ar-ac img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ar-ac__sahne { position: relative; isolation: isolate; width: min(62vw, 260px); margin-bottom: var(--fs-b-xs); }
.ar-ac__sahne::before,
.ar-ac__sahne::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.ar-ac__sahne::before {
    z-index: -2;
    top: -35%;
    left: -60%;
    width: 220%;
    height: 130%;
    background: radial-gradient(closest-side, rgba(13, 134, 231, .4), rgba(13, 134, 231, .12) 55%, transparent);
}
.ar-ac__sahne::after {
    z-index: -1;
    right: 6%;
    bottom: 1%;
    left: 6%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(113, 248, 74, .34), transparent);
}
.ar-ac__model { display: block; }
.ar-ac__model img { display: block; width: 100%; height: auto; }
.ar-ac__dugme,
.ar-ac__alt { width: min(100%, 320px); }
.ar-ac__metin { max-width: 32ch; color: var(--fs-soluk); font-size: var(--fs-t-metin); line-height: var(--fs-sa-metin); text-wrap: pretty; }
.ar-ac .telif { max-width: 36ch; margin-top: var(--fs-b-s); }

/* --------------------------------------- 404: tanıtımın üst çubuğu ve alt bilgisiyle; ortada başlık (son
   kelimesi neon), kısa metin ve tek neon düğme. Arkada tepeden projektör ve ışıklı paneldeki gibi eğik neon şerit.
   Geçişsiz model sayfası da bunu görür (model yokmuş gibi). */

.fs-yok {
    position: relative;
    isolation: isolate;
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    overflow: hidden;   /* eski Safari: clip yoksa */
    overflow: clip;
    padding: var(--fs-b-xl) max(var(--fs-kenar), env(safe-area-inset-right)) var(--fs-b-xl) max(var(--fs-kenar), env(safe-area-inset-left));
    text-align: center;
}
/* Projektör sayfanın zemininde, ekranın en tepesinden: üst çubuğun arkasından da geçer, ana bölümün üst kenarında
   kesilmez (16 Ekim 2026: kullanıcı "shadow üste doğru uzayabilirdi, kesilmek yerine"). */
body.sayfa-yok {
    background:
        radial-gradient(65% 60% at 50% 0%, rgba(13, 134, 231, .36), rgba(13, 134, 231, .09) 58%, transparent 85%),
        var(--fs-gece);
}
.fs-yok::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 80%;
    left: -10%;
    width: 120%;
    height: 10px;
    margin-top: -5px;
    border-radius: 5px;
    background: linear-gradient(90deg, transparent, var(--fs-neon) 35%, var(--fs-neon-acik) 62%, var(--fs-neon) 82%, transparent);
    transform: rotate(-14deg);
    filter: drop-shadow(0 0 16px rgba(113, 248, 74, .6));
    opacity: .45;
    pointer-events: none;
}
.fs-yok .fs-baslik { max-width: 14ch; }
.fs-yok .fs-yazi { margin-inline: auto; }
.fs-yok .fs-eylem { justify-content: center; }

/* ----------------------------------------------------------------- QR sayfası */

.qr-sayfa { width: min(1100px, 100%); margin: 0 auto; padding: 24px 16px 48px; }
.qr-sayfa__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.qr-sayfa__ust h1 { margin-top: 18px; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.qr-sayfa__ust p { margin-top: 6px; max-width: 60ch; color: var(--soluk); }
.qr-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.qr-kart {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 18px 14px 14px;
    border: 1px solid var(--cizgi);
    border-radius: 16px;
    background: var(--kart);
    text-align: center;
    break-inside: avoid;
}
.qr-kart img { width: 180px; height: 180px; padding: 8px; border-radius: 12px; background: #fff; }
.qr-kart__ad { margin-top: 8px; font-weight: 600; }
.qr-kart__adres { color: var(--soluk); font-size: .82rem; }
.qr-kart__indir { margin-top: 6px; color: var(--altin); font-size: .82rem; }

@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff; color: #000; }
    .qr-sayfa { width: auto; padding: 0; }
    .qr-sayfa__ust .dugme, .qr-kart__indir { display: none; }
    .qr-sayfa__ust p { color: #444; }
    .qr-izgara { grid-template-columns: repeat(3, 1fr); gap: 8mm; }
    .qr-kart { border: 1px dashed #bbb; background: #fff; padding: 6mm 4mm; }
    .qr-kart img { width: 42mm; height: 42mm; padding: 0; }
    .qr-kart__adres { color: #444; font-size: 7.5pt; white-space: nowrap; letter-spacing: -.01em; }
}

/* ----------------------------------------------------------------- Tanıtım sayfası (/epik/) */
/* Football Star: neon arena (15 Ekim 2026; kurallar DESIGN.md'de). Paketin dünyası (gece laciverti, stadyum ışığı mavisi,
   çapraz neon yeşil şeritler, krom beyaz yazı) ve ürünün kendisi olan AR'ın arayüz dili: elde kart fotoğraflarının üstünde
   telefon kamerasının gördüğünü işaretleyen neon köşeler; yuvarlak
   köşeli ışıklı paneller ve hap düğmeler. Başlık Saira (büyük harf), metin Hanken Grotesk; marka müşterinin logosu. Tek
   hareket anı: girişte kart paketin ağzından yükselir (bir kez). Işıklar ve şeritler kapsayıcıda kesilmez.
   ÖLÇÜ SİSTEMİ: tüm boşluklar, yazı boyları, köşeler ve simge boyları .sayfa-ana'daki token'lardan gelir; bölümlerde başka
   değer kullanılmaz (kullanıcı: "her şey her yerde son derece tutarlı olmalı"). Tek istisna giriş başlığı ve vaadidir: boyları
   metin sütununun genişliğine göre ölçeklenir (iki satırda kalsınlar diye). */

/* Saira: OFL, kendi sunucumuzda; genişlik (font-stretch) ve kalınlık eksenli tek dosya. */
@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-display: swap;
    src: url(fonts/saira-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Saira";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-display: swap;
    src: url(fonts/saira-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Neon dünyanın token'ları: tanıtım, model sayfası, AR açılışı ve 404 (16 Ekim 2026'dan beri hepsi aynı standartta) */
.sayfa-ana,
.sayfa-model,
.sayfa-ar-ac,
.sayfa-yok {
    /* Renkler paketin kendisinden örneklendi (epik-araclar/kaynak/_paket/paket.png) */
    --fs-gece: #040d1a;                 /* zemin: paketin en koyu laciverti */
    --fs-gece-2: #071a30;               /* yükseltilmiş yüzey */
    --fs-mavi: #0d86e7;                 /* stadyum ışığı */
    --fs-camgobegi: #13d7fc;            /* ikincil vurgu ve çizgiler (STAR'ın mavi ucu) */
    --fs-neon: #71f84a;                 /* birincil vurgu (KARTLARI yazısı, çapraz şeritler) */
    --fs-neon-acik: #a8ff8a;
    --fs-krom: #eef4ff;                 /* yazı */
    --fs-soluk: #a9bbd9;                /* ikincil yazı (zeminde ~10:1) */
    --fs-silik: #6f86ab;                /* küçük bilgi (zeminde ~5:1) */
    --fs-cizgi: rgba(19, 215, 252, .17);
    --fs-kenar-cizgi: rgba(19, 215, 252, .2);   /* panel ve fotoğraf kenarı */
    --fs-murekkep: #03140a;             /* neon üstündeki yazı */
    --fs-baslik: "Saira", "Hanken Grotesk", system-ui, sans-serif;
    --fs-yazi: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-egri: cubic-bezier(.16, 1, .3, 1);   /* üstel yavaşlama: tüm geçişler */

    /* Kapsayıcı */
    --fs-kap: 1400px;
    --fs-kenar: clamp(20px, 4vw, 56px);
    --fs-olcu: 580px;                                 /* sütun içindeki içerik blokları (liste) en fazla */
    --fs-olcu-metin: 36em;                            /* metin satırı en fazla: paragraflar ve soru cevapları */

    /* Boşluk ölçeği: yalnız bunlar */
    --fs-b-xs: 8px;                                   /* simge ↔ yazı, rozetler arası, başlık ↔ açıklama (liste içinde) */
    --fs-b-s: 16px;                                   /* panel listelerinde öğe arası, simge kutusu ↔ metin, düğmeler arası */
    --fs-b-m: 24px;                                   /* başlık ↔ paragraf, panel iç boşluğu, düz listelerde öğe arası */
    --fs-b-l: 32px;                                   /* paragraf ↔ düğme */
    --fs-b-xl: clamp(40px, 4.4vw, 64px);              /* başlık bloğu ↔ içerik; tek sütunda görsel ↔ metin */
    --fs-b-bolum: clamp(112px, 14vw, 192px);          /* bölümler arası: her bölümün üstünde, aynı */
    --fs-b-sutun: clamp(48px, 6.4vw, 112px);          /* yan yana iki sütun arası */
    --fs-ic-sahne: clamp(32px, 5vw, 72px);            /* ışıklı panelin iç boşluğu */
    --fs-tasma: clamp(48px, 9vw, 140px);              /* kapalı pakette kutunun panelden taşan kısmı (bölüm üstüne eklenir; masaüstünde 0) */

    /* Yazı ölçeği: yalnız bunlar (giriş başlığı ve vaadi aşağıda, sütuna göre) */
    --fs-t-baslik: clamp(2.6rem, 1.3rem + 4.4vw, 5.5rem);   /* bölüm başlığı (h2): her bölümde, kapanışta da aynı */
    --fs-t-ara: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);     /* ara başlık (h3), soru, oyuncu adı, film notu */
    --fs-t-oyuncu: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);    /* oyuncunun adı başlıkken: model sayfası paneli, AR açılışı */
    --fs-t-metin: clamp(1.06rem, 1rem + .25vw, 1.25rem);    /* tüm metin: paragraf, adım, bilgi, cevap */
    --fs-t-dugme: 1.06rem;                                   /* düğme */
    --fs-t-etiket: .86rem;                                   /* büyük harf etiket: menü, küçük düğme */
    --fs-t-kucuk: .92rem;                                    /* not, uyarı, alt bilgi */
    --fs-sa-metin: 1.6;                                      /* metin satır aralığı */
    --fs-iz-etiket: .12em;                                   /* büyük harf etiketlerin harf aralığı */

    /* Köşe ve simge */
    --fs-r: clamp(18px, 2vw, 26px);                   /* fotoğraf ve panel (adım, soru) */
    --fs-r-buyuk: clamp(28px, 3.4vw, 48px);           /* ışıklı panel, film karesi */
    --fs-r-kucuk: 14px;                               /* simge kutusu */
    --fs-ikon: 48px;                                  /* simgeli listede simge kutusu (adımlar, paket bilgileri) */

    --fs-ust-boy: 56px;                               /* üst çubuğun (app bar) yüksekliği */
    --fs-ust-pay: 88px;                               /* sayfa içi atlamada başlık, çubuğun ~32px altında */
    background: var(--fs-gece);
    color: var(--fs-krom);
    font-family: var(--fs-yazi);
    caret-color: var(--fs-neon);
    interpolate-size: allow-keywords;
}
html:has(.sayfa-ana, .sayfa-model, .sayfa-ar-ac, .sayfa-yok) { background: #040d1a; scrollbar-color: #1d4f82 #040d1a; accent-color: #71f84a; }
.sayfa-ana ::selection,
.sayfa-model ::selection,
.sayfa-ar-ac ::selection,
.sayfa-yok ::selection { background: rgba(113, 248, 74, .32); color: #fff; }
.sayfa-ana :focus-visible,
.sayfa-model :focus-visible,
.sayfa-ar-ac :focus-visible,
.sayfa-yok :focus-visible { outline: 2px solid var(--fs-camgobegi); outline-offset: 4px; }
.sayfa-ana h3,
.sayfa-ana figure { margin: 0; }
/* Sayfa içi bağlantı bölümün üst boşluğunu atlayıp içeriğe iner (betik de bu payı okur: statik/anasayfa.js) */
#kart, #qr, #oyun, #film, #sss { scroll-margin-top: calc(var(--fs-ust-pay) - var(--fs-b-bolum)); }
#paket { scroll-margin-top: calc(var(--fs-ust-pay) - var(--fs-b-bolum) - var(--fs-tasma)); }
.sayfa-ana section[tabindex="-1"]:focus { outline: none; }

/* Taşan ışıklar (çapraz şeritler, geniş film karesi) yatay kaydırma açmasın */
.fs { overflow-x: clip; }

.fs-giris,
.fs-bolum,
.fs-alt__ic {
    width: 100%;
    max-width: calc(var(--fs-kap) + 2 * var(--fs-kenar));
    margin-right: auto;
    margin-left: auto;
    padding-right: max(var(--fs-kenar), env(safe-area-inset-right));
    padding-left: max(var(--fs-kenar), env(safe-area-inset-left));
}

/* ----------------------------------------- Üst çubuk (app bar): ekranın tepesinde, kenardan kenara; içi içerik genişliğinde ve
   bölümlerle aynı hizada. Sayfanın başında saydam: logo ve menü doğrudan zeminde durur. Kaydırınca koyu, bulanık zemin
   (arkasından kayan içerik yalnız okunurluk için bulanıklaşır) ve alt bilgideki gibi ince alt çizgi belirir; kaydırmaya
   bağlı animasyonu desteklemeyen tarayıcıda ikisi hep görünür. Yüzen, kenarlıklı hap 20 Ekim 2026'da kalktı (kullanıcı:
   "tek header kötü gözüküyor"). İçinde logo ve sayfa içi menü; AR'ı açan düğme yok (16 Ekim 2026). Menünün gizlendiği dar
   ekranda logo ortada; menü görününce kendi auto boşluğuyla sağa, logo sola yaslanır. */
.fs-ust {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: env(safe-area-inset-top) max(var(--fs-kenar), env(safe-area-inset-right)) 0 max(var(--fs-kenar), env(safe-area-inset-left));
    background: rgba(4, 13, 26, .78);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
.fs-ust::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--fs-cizgi) 20%, var(--fs-cizgi) 80%, transparent);
}
@supports (animation-timeline: scroll()) {
    .fs-ust { animation-name: fs-ust-zemin; }
    .fs-ust::after { animation-name: fs-ust-cizgi; }
    .fs-ust,
    .fs-ust::after {
        animation-duration: auto;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: scroll(root);
        animation-range: 0px 80px;
    }
}
@keyframes fs-ust-zemin { from { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@keyframes fs-ust-cizgi { from { opacity: 0; } }
.fs-ust__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-b-l);
    max-width: var(--fs-kap);
    height: var(--fs-ust-boy);
    margin: 0 auto;
}
.fs-marka { display: inline-flex; flex: none; align-items: center; min-height: 44px; }
.fs-marka img { display: block; width: auto; height: 24px; }
.fs-ust__menu { display: none; gap: var(--fs-b-l); margin-left: auto; }
.fs-ust__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fs-soluk);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-etiket);
    font-weight: 700;
    letter-spacing: var(--fs-iz-etiket);
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease;
}

/* ----------------------------------------- Düğme: neon hap; ışığı altına düşer */
.fs-dugme {
    --dolgu: var(--fs-neon);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: var(--fs-b-xs);
    min-height: 58px;
    padding: 1px 32px 0;
    border: 0;
    border-radius: 999px;
    background: var(--dolgu);
    color: var(--fs-murekkep);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-dugme);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 30px -10px rgba(113, 248, 74, .55);
    transition: transform .15s ease, box-shadow .3s var(--fs-egri), background-color .2s ease, color .2s ease;
}
.fs-dugme:active { transform: translateY(1px) scale(.985); }
.fs-dugme--cizgi { --dolgu: transparent; color: var(--fs-krom); box-shadow: inset 0 0 0 1.5px var(--fs-camgobegi); }
.fs-dugme--tam { width: 100%; }
.fs-dugme svg { flex: none; width: 22px; height: 22px; }
.fs-dugme:disabled { cursor: default; opacity: .6; }
.fs-dugme[hidden] { display: none; }


/* ----------------------------------------- Yazı */
/* Bölüm başlığı: dar Saira, büyük harf (lang="tr": ı→I, i→İ doğru; yabancı adlar lang="en"); vurgu düz neon. Her bölümde aynı. */
.fs-baslik {
    color: var(--fs-krom);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-baslik);
    font-weight: 800;
    font-stretch: 84%;
    line-height: 1.04;   /* Türkçe büyük harf: Ç/Ş çengeli ve İ/Ö/Ü noktaları komşu satıra değmesin */
    letter-spacing: -.005em;
    text-transform: uppercase;
    text-wrap: balance;
}
.fs-baslik em { color: var(--fs-neon); font-style: normal; }
/* Metin: her yerde aynı boy ve satır aralığı */
.fs-yazi {
    max-width: var(--fs-olcu-metin);
    color: var(--fs-soluk);
    font-size: var(--fs-t-metin);
    line-height: var(--fs-sa-metin);
    text-wrap: pretty;
}
.fs-baslik + .fs-yazi { margin-top: var(--fs-b-m); }
.fs-yazi + .fs-yazi { margin-top: var(--fs-b-s); }
.fs-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-b-s); margin-top: var(--fs-b-l); }
/* Ara başlık (h3) ve liste içi açıklama: simgeli liste */
.fs-liste h3 {
    align-self: end;
    color: var(--fs-krom);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-ara);
    font-weight: 700;
    line-height: 1.25;
}
.fs-liste p {
    align-self: start;
    margin-top: 0;   /* başlık ve açıklaması bir arada: aralarında yalnız satır aralığının payı */
    color: var(--fs-soluk);
    font-size: var(--fs-t-metin);
    line-height: var(--fs-sa-metin);
    text-wrap: pretty;
}

/* ----------------------------------------- Giriş: solda vaat, sağda paket (telefonda paket üstte) */
.fs-giris {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: start;
    gap: var(--fs-b-xl);
    padding-top: var(--fs-b-xl);   /* altında pay yok: sonraki bölüme aralık her bölüm arası gibi yalnız --fs-b-bolum */
}
.fs-giris__metin { min-width: 0; container-type: inline-size; }
.fs-giris__baslik { margin: 0; font-family: var(--fs-baslik); text-transform: uppercase; }
.fs-giris__satir {
    display: block;
    font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.75rem);
    font-size: clamp(3.25rem, 15cqi, 8rem);   /* metin sütununa göre: "KARTINI OKUT." sütunun ~%94'ü; sorgu yoksa üstteki */
    font-weight: 800;
    font-stretch: 80%;
    line-height: 1.04;   /* .9'da "AÇ,"ın çengeli alttaki "OKUT"a değiyordu */
    letter-spacing: -.01em;
    text-wrap: balance;
}
.fs-giris__vaat {
    display: block;
    margin-top: var(--fs-b-s);
    color: var(--fs-neon);
    font-size: clamp(1.3rem, .95rem + 1.35vw, 2.15rem);
    font-size: clamp(1.35rem, 5.2cqi, 2.6rem);   /* masaüstünde tek satır */
    font-weight: 700;
    font-stretch: 96%;
    line-height: 1.1;
    letter-spacing: .015em;
    text-wrap: balance;
}
.fs-giris__yazi { margin-top: var(--fs-b-m); }

.fs-sahne {
    position: relative;
    isolation: isolate;
    display: grid;
    order: -1;
    justify-items: center;
}
/* Paketin arkasından geçen çapraz neon şerit (paketin kendi şeritleri gibi); biri kalın, biri ince. Şerit paketin ortasından
   (sütunun %50'si, %64'ü) geçer: sol ucu (--sol) metne varmadan söner; sağ ucu (--sag) kapsayıcıda kesilmez, ekranın
   kenarına kadar uzayıp yavaşça söner (taşan kısmı .fs'nin yatay kırpması keser). */
.fs-sahne::before,
.fs-sahne::after {
    --sol: clamp(260px, 32vw, 440px);
    --sag: 1800px;
    content: "";
    position: absolute;
    z-index: -1;
    top: 64%;
    left: calc(50% - var(--sol));
    width: calc(var(--sol) + var(--sag));
    height: 12px;
    margin-top: -6px;
    border-radius: 6px;
    background: linear-gradient(90deg, transparent, var(--fs-neon) calc(var(--sol) * .55), var(--fs-neon-acik) var(--sol),
        var(--fs-neon) calc(var(--sol) + 260px), rgba(113, 248, 74, .45) calc(var(--sol) + 900px), transparent);
    transform: rotate(-32deg);
    transform-origin: var(--sol) 50%;
    filter: drop-shadow(0 0 16px rgba(113, 248, 74, .6));
    opacity: .85;
    pointer-events: none;
}
.fs-sahne::after { top: calc(64% + 44px); height: 3px; margin-top: -1.5px; opacity: .55; }

/* Kutu (22 Ekim 2026; 15 Ekim'den beri folyo paketti, kullanıcı: "kartlar kutusu böyle olcak"): kartların gerçek kutusu,
   CSS 3B. Ön yüz müşterinin kutu tasarımı (statik/ana/kutu*.webp); yan yüz (paketin gecesi, logo) burada çizilir. Sağdan
   bakılır: sağ yan yüz görünür. Kapalı kutuya (#paket) hafif yukarıdan bakılır, üstte kapak. Açık kutuda (giriş) göz kutunun
   ağzı hizasındadır, kutunun içi görünmez (yukarıdan bakınca arka duvar ön yüzün üstünde koyu bir şerit gibi duruyordu;
   kullanıcı: "kutunun üstünde garip bir şey var"); içinden yelpaze gibi üç kart yükselir. Kartlar ön yüzle arka duvar
   arasında durur, alt kısımlarını ön yüz saklar (3B derinlik; kırpma yok). --en kutunun genişliği, --d derinliği. */
.fs-kutu {
    --en: clamp(220px, 60vw, 310px);
    --d: calc(var(--en) * .24);
    position: relative;
    width: var(--en);
    aspect-ratio: 2 / 3;
    perspective: calc(var(--en) * 4.5);
    perspective-origin: 85% -35%;   /* sağdan ve hafif yukarıdan: yan yüz ve kapak görünür */
}
.fs-kutu--acik {
    margin-top: calc(var(--en) * .38);   /* kartların kutudan çıkan kısmına üstte yer */
    perspective-origin: 85% 0;           /* göz ağız hizasında: kutunun içi görünmez */
}
.fs-kutu__govde {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(-20deg);
}
.fs-kutu__on {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: .8% / .5%;
    background: var(--fs-gece-2);
}
/* Sağ yan yüz: sağ kenardan geriye, derinlik kadar. Paketin gecesi; üstünde dik duran logo, ön kenarında ince ışık */
.fs-kutu__yan {
    position: absolute;
    top: 0;
    left: 100%;
    display: grid;
    place-items: center;
    width: var(--d);
    height: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, #0d2f5e, #071c3a 55%, #050f22);
    box-shadow: inset 2px 0 0 rgba(19, 215, 252, .6), inset 0 1.5px 0 rgba(19, 215, 252, .35);
    transform: rotateY(90deg);
    transform-origin: 0 50%;
}
.fs-kutu__yan img { flex: none; width: calc(var(--en) * 1.1); max-width: none; height: auto; transform: rotate(-90deg); filter: drop-shadow(0 0 6px rgba(19, 215, 252, .35)); }
/* Kartlar: aynı boyda (kutu genişliğinin %56'sı), her biri kendi derinliğinde (--z × --d); alt ortalarının çevresinde döner.
   Önde Lamine Yamal (-3°, %43'ü ağızdan yukarıda); arkasında Arda Güler sola, Mbappé sağa açılır (±13°, %37'si yukarıda).
   Yan kartların dış kenarı ağız hizasında kutunun içinde kalır (kart duvardan geçmez), iç köşeleri Yamal'ın arkasında. */
.fs-kutu__kart {
    --z: -.3;
    --x: 0%;
    --y: -43%;
    --r: -3deg;
    position: absolute;
    top: 0;
    left: 22%;
    width: 56%;
    height: auto;
    border-radius: 3.4% / 2.3%;
    transform: translateZ(calc(var(--d) * var(--z))) translate(var(--x), var(--y)) rotate(var(--r));
    transform-origin: 50% 100%;
    filter: drop-shadow(0 -6px 22px rgba(113, 248, 74, .2)) drop-shadow(0 14px 24px rgba(0, 0, 0, .5));
    animation: fs-kutu-kart 1.25s var(--fs-egri) .3s both;
}
.fs-kutu__kart--sol { --z: -.55; --x: -10%; --y: -37%; --r: -13deg; animation-delay: .4s; }
.fs-kutu__kart--sag { --z: -.8; --x: 10%; --y: -37%; --r: 13deg; animation-delay: .5s; }
/* Hareket anı: kartlar kutunun içinden (tepeleri ağzın %2 altında) düz yükselir, yelpaze gibi açılarak yerine oturur */
@keyframes fs-kutu-kart {
    from { transform: translateZ(calc(var(--d) * var(--z))) translate(var(--x), 2%) rotate(0deg); }
}
/* Kapak (kapalı kutu): üst kenardan geriye */
.fs-kutu__kapak {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--d);
    background: linear-gradient(180deg, #0c2a52, var(--fs-gece));
    box-shadow: inset 0 -1.5px 0 rgba(19, 215, 252, .45);
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
}
/* Stadyum ışığı: kutunun üstünden vuran mavi (closest-side radyal; kapsayıcıda kesilmez) ve zemine düşen camgöbeği */
.fs-kutu::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 28%;
    left: 50%;
    width: 400%;
    height: 240%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(13, 134, 231, .34), rgba(13, 134, 231, .14) 48%, rgba(13, 134, 231, .04) 76%, transparent);
    pointer-events: none;
}
.fs-kutu::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -18%;
    bottom: -7%;
    left: -18%;
    height: 22%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(19, 215, 252, .3), rgba(13, 134, 231, .1) 55%, transparent);
    pointer-events: none;
}

/* ----------------------------------------- Bölümler: her bölümün üstünde aynı boşluk (--fs-b-bolum). Kapalı pakette paket
   panelden taştığı için taşan kısım bu boşluğa eklenir: görünen aralık yine aynı kalır. */
.fs-bolum { padding-top: var(--fs-b-bolum); }
.fs-kapali { padding-top: calc(var(--fs-b-bolum) + var(--fs-tasma)); }

/* İki sütun: kartın önü (görsel solda) ve arkası (görsel sağda). Telefonda önce görsel. */
.fs-ikili { display: grid; gap: var(--fs-b-xl); align-items: center; }
.fs-metin { min-width: 0; }

/* ----------------------------------------- AR görüşü: elde kart fotoğrafı, telefon kamerasının gördüğü gibi. Üstünde neon
   köşeler (kameranın tanıdığı alan); konumlar fotoğrafın yüzdesi (inc/anasayfa.php).
   Arkasında sahne ışığı ve çapraz neon şerit: uzun kuyruğu ekranın kenarına kadar uzar; metne bakan ucu da fotoğrafın
   dışına uzanır, yavaşça söner (metnin arkasında çok soluk kalır). */
.fs-ar {
    --kol: clamp(18px, 3.4vw, 28px);   /* köşe kolunun boyu */
    position: relative;
    isolation: isolate;
    justify-self: center;
    width: 100%;
    max-width: 560px;
}
.fs-ar__foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--fs-r);
    background: var(--fs-gece-2);
    box-shadow: 0 0 0 1px var(--fs-kenar-cizgi), 0 40px 80px -30px rgba(0, 0, 0, .75);
}
.fs-ar__isik {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 240%;
    height: 170%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(13, 134, 231, .34), rgba(13, 134, 231, .12) 50%, transparent);
    pointer-events: none;
}
.fs-ar::before,
.fs-ar::after {
    --kisa: clamp(320px, 40vw, 640px);   /* metne bakan uç (16 Ekim: kullanıcı biraz daha uzasın dedi) */
    --uzun: 1800px;
    content: "";
    position: absolute;
    z-index: -1;
    top: 62%;
    height: 12px;
    margin-top: -6px;
    border-radius: 6px;
    filter: drop-shadow(0 0 16px rgba(113, 248, 74, .6));
    opacity: .85;
    pointer-events: none;
}
.fs-ar::after { top: calc(62% + 44px); height: 3px; margin-top: -1.5px; opacity: .55; }
/* Kartın önü solda: şeridin uzun kuyruğu sola, aşağı */
.fs-on .fs-ar::before,
.fs-on .fs-ar::after {
    left: calc(50% - var(--uzun));
    width: calc(var(--uzun) + var(--kisa));
    background: linear-gradient(90deg, transparent, rgba(113, 248, 74, .45) calc(var(--uzun) - 900px), var(--fs-neon) calc(var(--uzun) - 260px),
        var(--fs-neon-acik) var(--uzun), var(--fs-neon) calc(var(--uzun) + var(--kisa) * .3), rgba(113, 248, 74, .35) calc(var(--uzun) + var(--kisa) * .65), transparent);
    transform: rotate(-28deg);
    transform-origin: var(--uzun) 50%;
}
/* Kartın arkası sağda: uzun kuyruk sağa, aşağı */
.fs-arka .fs-ar::before,
.fs-arka .fs-ar::after {
    left: calc(50% - var(--kisa));
    width: calc(var(--kisa) + var(--uzun));
    background: linear-gradient(90deg, transparent, rgba(113, 248, 74, .35) calc(var(--kisa) * .35), var(--fs-neon) calc(var(--kisa) * .7),
        var(--fs-neon-acik) var(--kisa), var(--fs-neon) calc(var(--kisa) + 260px), rgba(113, 248, 74, .45) calc(var(--kisa) + 900px), transparent);
    transform: rotate(28deg);
    transform-origin: var(--kisa) 50%;
}
.fs-arka .fs-ar { --kol: clamp(14px, 2.6vw, 22px); }
.fs-ar__kose {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: var(--kol);
    height: var(--kol);
    border: 0 solid var(--fs-neon);
    filter: drop-shadow(0 0 6px rgba(113, 248, 74, .75));
    pointer-events: none;
}
.fs-ar__kose--1 { border-width: 3px 0 0 3px; border-top-left-radius: 10px; }
.fs-ar__kose--2 { translate: -100% 0; border-width: 3px 3px 0 0; border-top-right-radius: 10px; }
.fs-ar__kose--3 { translate: 0 -100%; border-width: 0 0 3px 3px; border-bottom-left-radius: 10px; }
.fs-ar__kose--4 { translate: -100% -100%; border-width: 0 3px 3px 0; border-bottom-right-radius: 10px; }

/* ----------------------------------------- Panel: sorular (köşe, kenar, zemin, iç boşluk) */
.fs-soru {
    border: 1px solid var(--fs-kenar-cizgi);
    border-radius: var(--fs-r);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(13, 134, 231, .2), transparent 60%),
        linear-gradient(160deg, #0b2547, #061428 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .25s ease;
}

/* ----------------------------------------- Simgeli liste: kapalı paketin üç bilgisi, panelsiz. Satırlar arası --fs-b-l; solda
   --fs-ikon simge kutusu (14px köşe, neon iç kenar), yanında ara başlık ve hemen altında metin (ek boşluk yok). */
.fs-liste { display: grid; gap: var(--fs-b-l); max-width: var(--fs-olcu); margin: var(--fs-b-xl) 0 0; padding: 0; list-style: none; }
.fs-liste li { display: grid; grid-template-columns: var(--fs-ikon) minmax(0, 1fr); column-gap: var(--fs-b-s); }
.fs-liste__simge {
    display: grid;
    grid-row: span 2;
    align-self: center;
    place-items: center;
    width: var(--fs-ikon);
    height: var(--fs-ikon);
    border-radius: var(--fs-r-kucuk);
    background: linear-gradient(135deg, rgba(113, 248, 74, .16), rgba(19, 215, 252, .08));
    color: var(--fs-neon);
    box-shadow: inset 0 0 0 1.5px rgba(113, 248, 74, .55);
}
.fs-liste__simge svg { width: 24px; height: 24px; }

/* ----------------------------------------- Işıklı panel: kapalı paket. Paketin gecesi, tepeden mavi projektör,
   dipte neon; içinden geçen çapraz şeritler köşeleri taşmasın diye kendi kırpılmış katmanında (__isik). İç boşluk her
   yanda --fs-ic-sahne. */
.fs-panel {
    position: relative;
    isolation: isolate;
    padding: var(--fs-ic-sahne);
    border: 1px solid var(--fs-kenar-cizgi);
    border-radius: var(--fs-r-buyuk);
    background:
        radial-gradient(70% 90% at 78% 0%, rgba(13, 134, 231, .5), transparent 70%),
        radial-gradient(60% 60% at 85% 100%, rgba(113, 248, 74, .16), transparent 70%),
        linear-gradient(160deg, #0a2246, #050f1f 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 60px 120px -60px rgba(0, 0, 0, .85);
}
.fs-panel__isik {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.fs-panel__isik::before,
.fs-panel__isik::after {
    content: "";
    position: absolute;
    top: 80%;
    left: -10%;
    width: 120%;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, transparent, var(--fs-neon) 35%, var(--fs-neon-acik) 62%, var(--fs-neon) 82%, transparent);
    transform: rotate(-14deg);
    filter: drop-shadow(0 0 14px rgba(113, 248, 74, .6));
    opacity: .5;
}
.fs-panel__isik::after { top: calc(80% + 36px); height: 3px; opacity: .38; }

/* ----------------------------------------- Kapalı paket: telefonda ve tablette kutu metnin üstünde, panelin üstünden
   --fs-tasma kadar taşar; taşma bölümün üstüne eklendiği için önceki bölümle aralık --fs-b-bolum kalır. Masaüstünde solda
   başlık ve üç bilgi, sağda kutu panelin içinde, metinle dikeyde ortalı (taşma yok). */
.fs-kapali__sahne { display: grid; gap: var(--fs-b-xl); }
.fs-kapali__paket {
    order: -1;
    justify-self: center;
}
/* Panelden --fs-tasma kadar taşar. .sayfa-ana figure { margin: 0 } daha özgül olduğu için bu kural da öyle yazılır (22 Ekim
   2026'ya kadar taşma hiç uygulanmıyordu: bölümün üstünde boş bir şerit kalıyordu). */
.sayfa-ana .fs-kapali__paket { margin-top: calc((var(--fs-ic-sahne) + var(--fs-tasma)) * -1); }
.fs-kapali__paket.fs-kutu { --en: clamp(200px, 56vw, 300px); }
.fs-kapali__paket .fs-kutu__govde { transform: rotateZ(-4deg) rotateY(-22deg); }   /* paket gibi -4° eğik */

/* ----------------------------------------- Oyun: kartlarla oynanan Football Star oyunu (oyun.futbolkarti.com). Kartın önü gibi
   iki sütun (.fs-ikili .fs-on). Görsel AR görüşünün kutusunda (.fs-ar: ışık, şerit, neon köşeler); fotoğraf yerine gerçek
   kartlardan yelpaze deste. Kartlar kendi altlarındaki aynı noktanın çevresinde döner (dönme merkezi kartın %180'i), ortadaki
   önde ve büyük. Kart ürün olduğu için basılı kart köşesi ve yalnız koyu gölge (parıltı yok). */
.fs-oyun__deste { position: relative; aspect-ratio: 1 / 1; }
.fs-oyun__kart {
    position: absolute;
    top: 22.5%;
    left: 33%;
    width: 34%;
    height: auto;
    border-radius: 3.4% / 2.3%;
    transform: rotate(var(--a));
    transform-origin: 50% 180%;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6));
}
.fs-oyun__kart--on { top: 18.5%; left: 31%; width: 38%; }

/* ----------------------------------------- Film: kapsayıcı genişliğinde (taşmaz), geniş ekranda 2:1, dar ekranda 16:9;
   yuvarlak köşeli ışık çerçeveli kare. Film 16:9 gelirse kareye kırpılmadan sığar (yanlarda çerçevenin rengi). */
.fs-film__ust { max-width: 44em; margin-right: auto; margin-left: auto; text-align: center; }   /* başlık ortalı */
.fs-film__kare {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin-top: var(--fs-b-xl);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1.5px solid transparent;
    border-radius: var(--fs-r-buyuk);
    background:
        linear-gradient(#050f1f, #050f1f) padding-box,
        linear-gradient(135deg, var(--fs-neon), rgba(19, 215, 252, .6) 35%, rgba(19, 215, 252, .14) 65%, rgba(19, 215, 252, .45)) border-box;
    box-shadow: 0 60px 120px -60px rgba(13, 134, 231, .6);
}
/* Yer tutucu afiş: paketin görseli, oyuncunun şutu ortada, karartılmış */
.fs-film__afis {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
    opacity: .55;
}
.fs-film__kare::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(60% 70% at 50% 50%, rgba(4, 13, 26, .1), rgba(4, 13, 26, .82)),
        linear-gradient(180deg, rgba(4, 13, 26, .15), rgba(4, 13, 26, .7));
    pointer-events: none;
}
.fs-film__bekle {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--fs-b-m);
    padding: var(--fs-b-m);
    text-align: center;
}
/* Oynat: AR işaretleriyle aynı dil (koyu zemin, neon halka, neon çizim, ışık) */
.fs-film__oynat {
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 104px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(4, 13, 26, .62);
    color: var(--fs-neon);
    box-shadow: inset 0 0 0 1.5px var(--fs-neon), 0 0 32px -6px rgba(113, 248, 74, .6), 0 20px 50px -12px rgba(0, 0, 0, .6);
}
.fs-film__oynat svg { width: 42%; height: auto; filter: drop-shadow(0 0 8px rgba(113, 248, 74, .6)); }
.fs-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050f1f; }
/* Film yüklenince kare her genişlikte filmin oranında (16:9): masaüstündeki 2:1 kare videonun iki yanında boşluk bırakırdı. */
.fs-film__kare.fs-film__kare--video { aspect-ratio: 16 / 9; }

/* Denetimsiz film (19 Ekim 2026, kullanıcı: "video controlleri filan neden var kaldiralim onlari da"): sessiz, döngüde;
   bölüm ekrana gelince oynar, çıkınca durur (statik/anasayfa.js). Dokununca durur ya da sürer; görünen düğme yok. */
.fs-film__kare--video .fs-film__video { cursor: pointer; }

/* ----------------------------------------- Sorular: başlık üstte, iki sütunda 4 + 4; her soru panelde. Panel listesi:
   öğeler ve sütunlar arası --fs-b-s; soru satırı ara başlık boyunda, cevap metin boyunda, iç boşluk --fs-b-m. */
.fs-sss__baslik { text-align: center; }   /* film başlığı gibi ortalı */
.fs-sss__sutunlar { display: grid; gap: var(--fs-b-s); margin-top: var(--fs-b-xl); }
.fs-sss__liste { display: grid; align-content: start; gap: var(--fs-b-s); }
.fs-soru[open] { border-color: rgba(113, 248, 74, .5); }
.fs-soru summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-b-m);
    padding: var(--fs-b-m);
    border-radius: var(--fs-r);
    color: var(--fs-krom);
    font-family: var(--fs-baslik);
    font-size: var(--fs-t-ara);
    font-weight: 700;
    line-height: 1.25;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
}
.fs-soru summary::-webkit-details-marker { display: none; }
.fs-soru[open] summary { color: var(--fs-neon); }
.fs-soru__simge {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(113, 248, 74, .6);
    transition: background-color .25s ease;
}
.fs-soru__simge::before,
.fs-soru__simge::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 1px;
    background: var(--fs-neon);
    transition: transform .35s var(--fs-egri), background-color .25s ease;
}
.fs-soru__simge::after { transform: rotate(90deg); }
.fs-soru[open] .fs-soru__simge { background: var(--fs-neon); }
.fs-soru[open] .fs-soru__simge::before,
.fs-soru[open] .fs-soru__simge::after { background: var(--fs-murekkep); }
.fs-soru[open] .fs-soru__simge::after { transform: rotate(0deg); }
.fs-soru p {
    max-width: var(--fs-olcu-metin);
    padding: 0 var(--fs-b-m) var(--fs-b-m);
    color: var(--fs-soluk);
    font-size: var(--fs-t-metin);
    line-height: var(--fs-sa-metin);
    text-wrap: pretty;
}
/* Açılış yumuşak (destekleyen tarayıcıda; desteklemeyende anında açılır) */
.fs-soru::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .4s var(--fs-egri), content-visibility .4s allow-discrete;
}
.fs-soru[open]::details-content { block-size: auto; }

/* ----------------------------------------- Sayfanın sonu ve alt bilgi: son bölümün altında --fs-b-xl */
.fs > :last-child { padding-bottom: var(--fs-b-xl); }

.fs-alt { position: relative; }
.fs-alt::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--fs-cizgi) 20%, var(--fs-cizgi) 80%, transparent);
}
.fs-alt__ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fs-b-s) var(--fs-b-m);
    padding-top: var(--fs-b-m);
    padding-bottom: calc(var(--fs-b-m) + env(safe-area-inset-bottom));
}
.fs-alt p { color: var(--fs-silik); font-size: var(--fs-t-kucuk); }
.fs-marka--alt img { height: 20px; }

/* ----------------------------------------- Üzerine gelme yalnız fareli cihazlarda (dokunmatikte takılı kalmasın) */
@media (hover: hover) {
    .fs-ust__menu a:hover { color: var(--fs-krom); }
    .fs-dugme:hover { --dolgu: var(--fs-neon-acik); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 38px -10px rgba(113, 248, 74, .7); }
    .fs-dugme--cizgi:hover { --dolgu: rgba(113, 248, 74, .08); color: #fff; box-shadow: inset 0 0 0 1.5px var(--fs-neon), 0 12px 30px -14px rgba(113, 248, 74, .5); }
    .fs-soru:hover { border-color: rgba(113, 248, 74, .45); }
    .fs-soru summary:hover { color: #fff; }
    .fs-soru[open] summary:hover { color: var(--fs-neon-acik); }
}

/* ----------------------------------------- Geniş ekran */
@media (min-width: 900px) {
    .fs-ust__menu { display: flex; }
    .fs-sss__sutunlar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .fs-film__kare { aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
    .sayfa-ana, .sayfa-yok { --fs-ust-boy: 64px; --fs-ust-pay: 100px; }
    .fs-marka img { height: 27px; }
    .fs-giris {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
        align-items: center;
        column-gap: var(--fs-b-sutun);
    }
    .fs-sahne { order: 0; margin-top: calc(var(--fs-b-m) * -1); }   /* paket ve kart biraz yukarıda */
    .fs-kutu--acik { --en: clamp(300px, 28vw, 410px); }
    /* Kart bölümleri: görsel 5, metin 6; iki bölümde aynı, fotoğraflar eşit boyda */
    .fs-ikili { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--fs-b-sutun); }
    .fs-ikili--ters { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .fs-ikili .fs-ar { justify-self: start; }
    .fs-ikili--ters .fs-ar { justify-self: end; }
    /* Kapalı paket: kutu panelin içinde, metinle dikeyde ortalı; taşmaz (22 Ekim 2026, kullanıcı: "kutu çok yukarıda değil mi".
       9vw'lik taşma kutuyu metnin çok üstüne çıkarıyordu; menüden gelince üstü çubuğun altında kalıyordu) */
    .sayfa-ana { --fs-tasma: 0px; }
    .fs-kapali__sahne { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; column-gap: var(--fs-b-sutun); }
    .fs-kapali__paket.fs-kutu { --en: clamp(260px, 24vw, 340px); order: 0; align-self: center; }
    .sayfa-ana .fs-kapali__paket { margin-top: 0; }
}
@media (max-width: 1023.98px) {
    .fs-ikili--ters .fs-ar { order: -1; }
}

/* Paneldeki model listesi ve baskı sayfası: yönetime dönüş */
.giris .geri { margin-bottom: 22px; }
.qr-sayfa__geri { margin-bottom: 8px; }
.qr-sayfa__geri a { color: var(--soluk); text-decoration: none; }
@media print { .qr-sayfa__geri { display: none; } }