/* Fenmoor Roleplay -- magaza temasi.
   Oyun ici arayuzle ayni dil: siyah zemin, altin cizgi, serifli
   basliklar. Acik tema ayni paletin tersi -- parsomen/krem zemin. */

:root {
    --altin: #e8c874;
    --altin-koyu: #b89440;
    --bg: #0d0b12;
    --bg-2: #141019;
    --kart: #17131f;
    --kart-ust: #1e1828;
    --cizgi: #2c2438;
    --metin: #ece7e0;
    --sonuk: #9a9186;
    --vurgu: #7c5cff;
    --hata: #ff8a8a;
    --golge: 0 10px 30px rgba(0, 0, 0, .45);

    /* Arka plan gorselinin uzerine serilen perde. Gorsel tek basina
       birakilirsa uzerindeki yazi okunmuyor; perde hem kontrasti
       kurtariyor hem de sayfanin altina dogru koyulasip icerigi one
       cikariyor. */
    --perde: linear-gradient(180deg,
        rgba(13, 11, 18, .74) 0%,
        rgba(13, 11, 18, .90) 45%,
        rgba(13, 11, 18, .97) 100%);
}

html[data-tema="acik"] {
    --altin: #9a7420;
    --altin-koyu: #7a5a10;
    --bg: #f6f1e6;
    --bg-2: #efe8d8;
    --kart: #fffdf8;
    --kart-ust: #f8f2e6;
    --cizgi: #ded2b8;
    --metin: #2a2318;
    --sonuk: #6d6252;
    --hata: #a02020;
    --golge: 0 8px 24px rgba(90, 70, 30, .12);

    /* Acik temada ayni gorsel cok yogun perdeyle duruyor: mumlu kutuphane
       koyu bir sahne, acik zeminde ancak silik bir doku olarak ise
       yariyor. Tamamen kaldirmak yerine boyle birakmak iki tema
       arasinda kimlik surekliligi sagliyor. */
    --perde: linear-gradient(180deg,
        rgba(246, 241, 230, .90) 0%,
        rgba(246, 241, 230, .95) 50%,
        rgba(246, 241, 230, .98) 100%);
}

* { box-sizing: border-box; }

/* hidden niteligi HER ZAMAN kazansin.
   Tarayicinin kendi stil dosyasi [hidden] icin display:none diyor, ama
   yazarin verdigi herhangi bir display bunu eziyor. Satin alma penceresine
   "display: grid" verildigi icin pencere hidden olmasina ragmen ekranda
   kaliyor ve KAPANMIYORDU. Kural burada, tek yerde, kalici olarak
   duzeltiliyor -- ileride eklenecek her gizlenebilir kutu icin de gecerli. */
[hidden] { display: none !important; }

body {
    margin: 0;
    color: var(--metin);
    font: 16px/1.65 system-ui, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;

    /* Uc katman: en ustte perde, altinda mumlu kutuphane gorseli, en
       altta duz renk (gorsel inmezse sayfa yine de dogru gorunsun).
       "fixed" sayfayi kaydirinca gorselin sabit kalmasini sagliyor --
       icerik gorselin uzerinde suzuluyormus gibi duruyor. */
    background-color: var(--bg);
    background-image: var(--perde), url("/arkaplan.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .01em; }

a { color: inherit; text-decoration: none; }

.sinir { width: min(1120px, 92vw); margin-inline: auto; }

/* ==================================================================
   GIRIS SAHNESI
   Karanlik -> korlar suzulur -> gozler acilir -> asa hareketi ->
   ekrana buyu carpar -> site acilir.  Toplam ~3.6 saniye.

   Tamami CSS/SVG: hic gorsel dosyasi yok, yani ek indirme yok ve
   yavas baglantida da ayni hizda calisiyor.
   ================================================================== */
.giris {
    position: fixed; inset: 0; z-index: 200;
    background: #05040a;
    display: grid; place-items: center;
    overflow: hidden;
    animation: girisKapan .5s ease 3.15s forwards;
}
@keyframes girisKapan { to { opacity: 0; visibility: hidden; } }

.giris-sahne { position: relative; width: min(520px, 86vw); aspect-ratio: 2 / 1; }

/* --- karanlikta suzulen korlar --- */
.kor {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: #e8c874; opacity: 0;
    box-shadow: 0 0 8px 2px rgba(232, 200, 116, .75);
    animation: korSuzul 3s ease-out forwards;
}
.kor-1 { left: 12%; top: 70%; animation-delay: .15s; }
.kor-2 { left: 78%; top: 78%; animation-delay: .45s; }
.kor-3 { left: 32%; top: 88%; animation-delay: .75s; }
.kor-4 { left: 62%; top: 64%; animation-delay: 1.05s; }
.kor-5 { left: 88%; top: 40%; animation-delay: .95s; }
@keyframes korSuzul {
    0%   { opacity: 0;  transform: translateY(30px) scale(.5); }
    25%  { opacity: .9; }
    70%  { opacity: .5; }
    100% { opacity: 0;  transform: translateY(-90px) scale(1.3); }
}

/* --- gozler --- */
.yuz {
    position: absolute; left: 50%; top: 34%;
    transform: translate(-50%, -50%);
    display: flex; gap: clamp(28px, 7vw, 52px);
}
.goz {
    width: clamp(34px, 8vw, 58px); height: clamp(13px, 3vw, 20px);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 50% 45%, #fff6dc 0%, #f0cf82 28%, #a97c22 62%, #2a1c06 100%);
    opacity: 0;
    box-shadow: 0 0 22px 6px rgba(232, 200, 116, .28);
    animation: gozAc 1.1s ease-out .35s forwards, gozKirp .18s ease 1.65s, gozParla .5s ease 2.25s;
}
.goz .bebek {
    position: absolute; left: 50%; top: 50%;
    width: 26%; height: 68%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #120b02;
}
.goz.sol  { transform: rotate(-7deg); position: relative; }
.goz.sag  { transform: rotate(7deg);  position: relative; }

@keyframes gozAc {
    0%   { opacity: 0; transform: scaleY(.05); filter: brightness(.4); }
    60%  { opacity: 1; transform: scaleY(1);   filter: brightness(1); }
    100% { opacity: 1; transform: scaleY(1); }
}
@keyframes gozKirp { 50% { transform: scaleY(.08); } }
@keyframes gozParla {
    50% { filter: brightness(2.4); box-shadow: 0 0 46px 16px rgba(232, 200, 116, .6); }
}

/* --- asa hareketi --- */
.asa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.asa-iz {
    fill: none; stroke: #e8c874; stroke-width: 2.5; stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(232, 200, 116, .9));
    stroke-dasharray: 620; stroke-dashoffset: 620;
    animation: izCiz .85s cubic-bezier(.3, 0, .2, 1) 1.45s forwards,
               izSol .5s ease 2.3s forwards;
}
@keyframes izCiz { to { stroke-dashoffset: 0; } }
@keyframes izSol { to { opacity: 0; } }

.asa-ucu {
    fill: #fff8e4; opacity: 0;
    filter: drop-shadow(0 0 10px #e8c874);
    animation: ucGoster .85s ease 1.45s forwards;
}
@keyframes ucGoster { 0% { opacity: 0; } 12% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

/* --- ekrana carpan buyu --- */
.patlama {
    position: absolute; left: 50%; top: 34%;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffdf6 0%, #ffe9b0 30%, #e8c874 55%, rgba(232,200,116,0) 72%);
    opacity: 0;
    animation: buyuGel .8s cubic-bezier(.55, 0, .3, 1) 2.38s forwards;
}
@keyframes buyuGel {
    0%   { opacity: 0;   transform: scale(.4); }
    18%  { opacity: 1;   transform: scale(1.6); }
    100% { opacity: .96; transform: scale(90); }
}

.halka {
    position: absolute; left: 50%; top: 34%;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border: 2px solid rgba(232, 200, 116, .9); border-radius: 50%;
    opacity: 0;
    animation: halkaAc .7s ease-out 2.42s forwards;
}
@keyframes halkaAc {
    0%   { opacity: .9; transform: scale(.3); }
    100% { opacity: 0;  transform: scale(16); border-width: .5px; }
}

.giris-yazi {
    position: absolute; bottom: 12%; left: 0; right: 0;
    text-align: center; margin: 0;
    font-family: Georgia, serif; font-size: clamp(13px, 2.4vw, 17px);
    letter-spacing: .5em; text-indent: .5em; color: #e8c874;
    opacity: 0;
    animation: yaziGel 1.4s ease .9s forwards;
}
@keyframes yaziGel { 0% { opacity: 0; letter-spacing: .9em; } 60% { opacity: .85; } 100% { opacity: 0; } }

.giris-atla {
    position: absolute; right: 22px; bottom: 20px;
    background: none; border: 1px solid rgba(232, 200, 116, .35);
    color: rgba(232, 200, 116, .75);
    padding: 7px 15px; border-radius: 20px;
    font: inherit; font-size: 12px; letter-spacing: .08em; cursor: pointer;
}
.giris-atla:hover { border-color: #e8c874; color: #e8c874; }

/* Site icerigi: giris bitince yukaridan suzulerek gelsin */
body.giris-var main, body.giris-var .ust, body.giris-var .alt { opacity: 0; }
body.giris-bitti main, body.giris-bitti .ust, body.giris-bitti .alt {
    animation: icerikGel .7s ease forwards;
}
@keyframes icerikGel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hareket hassasiyeti olan kullanicilar icin: sahne hic oynatilmiyor.
   Bu bir nezaket degil erisilebilirlik gerekliligi -- vestibuler
   rahatsizligi olan biri icin buyuyen parlak bir patlama bas donmesi
   ve mide bulantisi yapabiliyor. */
@media (prefers-reduced-motion: reduce) {
    .giris { display: none; }
    body.giris-var main, body.giris-var .ust, body.giris-var .alt { opacity: 1; }
    body.giris-bitti main, body.giris-bitti .ust, body.giris-bitti .alt { animation: none; }
}

/* ---------------------------------------------------------- ust bar */
.ust {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; justify-content: space-between; height: 66px; }

.marka { display: flex; align-items: center; gap: 11px; }
.marka-isaret { color: var(--altin); font-size: 22px; }
.marka b { display: block; font-size: 15px; letter-spacing: .22em; }
.marka small { display: block; font-size: 9px; letter-spacing: .42em; color: var(--sonuk); }

.ust nav { display: flex; align-items: center; gap: 22px; }
.ust nav a { font-size: 14px; color: var(--sonuk); transition: color .15s; }
.ust nav a:hover { color: var(--altin); }

.tema {
    background: none; border: 1px solid var(--cizgi); color: var(--altin);
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
.tema:hover { border-color: var(--altin); }

/* --------------------------------------------------------- kahraman */
.kahraman {
    padding: 84px 0 68px;
    /* Arka plan gorseli buradan gorunsun diye duz zemin kaldirildi;
       yalnizca ustten gelen altin isik huzmesi kaldi. */
    background: radial-gradient(ellipse 70% 100% at 50% 0%,
        color-mix(in srgb, var(--altin) 13%, transparent), transparent 70%);
    border-bottom: 1px solid var(--cizgi);
}
.kucuk-baslik {
    color: var(--altin); font-size: 11px; letter-spacing: .3em;
    text-transform: uppercase; margin: 0 0 16px;
}
.kahraman h1 { font-size: clamp(30px, 5.2vw, 52px); line-height: 1.15; margin: 0 0 20px; }
.aciklama { color: var(--sonuk); max-width: 62ch; margin: 0 0 28px; }
.aciklama.dar { max-width: 58ch; }
.aciklama b { color: var(--metin); }

/* ---------------------------------------------------------- dugmeler */
.dugme {
    display: inline-block; padding: 12px 26px; border-radius: 7px;
    border: 1px solid var(--altin-koyu); background: transparent; color: var(--altin);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: transform .12s, box-shadow .18s, background .18s;
}
.dugme:hover { transform: translateY(-1px); box-shadow: 0 5px 18px color-mix(in srgb, var(--altin) 22%, transparent); }
.dugme.birincil {
    background: linear-gradient(180deg, var(--altin), var(--altin-koyu));
    color: #17120a; border-color: transparent;
}
html[data-tema="acik"] .dugme.birincil { color: #fffdf6; }
.dugme.genis { width: 100%; }

/* ------------------------------------------------------------ bolum */
.bolum { padding: 62px 0; }
.bolum h2 {
    font-size: 26px; margin: 0 0 26px; padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi);
}

/* ------------------------------------------------------------ izgara */
.izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.bos { color: var(--sonuk); }

.urun {
    background: linear-gradient(180deg, var(--kart-ust), var(--kart));
    border: 1px solid var(--cizgi); border-radius: 11px;
    padding: 22px; display: flex; flex-direction: column; gap: 11px;
    position: relative; transition: border-color .18s, transform .14s, box-shadow .2s;
}
.urun:hover { border-color: var(--altin-koyu); transform: translateY(-3px); box-shadow: var(--golge); }
.urun h3 { margin: 0; font-size: 19px; }
.urun p { margin: 0; color: var(--sonuk); font-size: 14px; flex: 1; }
.urun .fiyat { color: var(--altin); font-size: 23px; font-weight: 700; font-family: Georgia, serif; }
.rozet {
    position: absolute; top: 14px; right: 14px;
    background: var(--altin); color: #17120a;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px;
}
html[data-tema="acik"] .rozet { color: #fffdf6; }

.dipnot { color: var(--sonuk); font-size: 13px; margin-top: 20px; }

/* ----------------------------------------------------------- adimlar */
.adimlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.adimlar li { display: flex; gap: 14px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 10px; padding: 20px; }
.adimlar span {
    flex: 0 0 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--altin-koyu); color: var(--altin);
    display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.adimlar b { display: block; margin-bottom: 4px; }
.adimlar p { margin: 0; color: var(--sonuk); font-size: 14px; }
.adimlar code { background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--altin); font-size: 13px; }

/* ------------------------------------------------------------ sorgu */
.sorgu { display: flex; gap: 10px; flex-wrap: wrap; }
.sorgu input {
    flex: 1 1 260px; background: var(--kart); border: 1px solid var(--cizgi);
    color: var(--metin); padding: 12px 14px; border-radius: 7px; font: inherit; font-size: 15px;
}
.sorgu input:focus { outline: none; border-color: var(--altin); }
.sonuc {
    margin-top: 18px; background: var(--kart); border: 1px solid var(--cizgi);
    border-radius: 9px; padding: 18px;
}
.sonuc dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.sonuc dt { color: var(--sonuk); font-size: 13px; }
.sonuc dd { margin: 0; font-weight: 600; }

/* ----------------------------------------------------------- pencere */
.pencere {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(0, 0, 0, .72);
    display: grid; place-items: center; padding: 20px;
}
.pencere-kutu {
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 13px;
    padding: 30px; width: min(460px, 100%); position: relative;
    max-height: 90vh; overflow-y: auto; box-shadow: var(--golge);
}
.pencere-kutu h3 { margin: 0 0 6px; font-size: 22px; }
.pencere-kutu .fiyat { color: var(--altin); font-size: 26px; font-weight: 700; font-family: Georgia, serif; margin: 12px 0 22px; }
.kapat {
    position: absolute; top: 12px; right: 14px; background: none; border: 0;
    color: var(--sonuk); font-size: 26px; line-height: 1; cursor: pointer;
}
.kapat:hover { color: var(--altin); }

#satin-form label { display: block; margin-bottom: 18px; font-size: 13px; color: var(--sonuk); }
#satin-form input {
    display: block; width: 100%; margin-top: 6px;
    background: var(--bg); border: 1px solid var(--cizgi); color: var(--metin);
    padding: 11px 13px; border-radius: 7px; font: inherit; font-size: 15px;
}
#satin-form input:focus { outline: none; border-color: var(--altin); }
#satin-form small { display: block; margin-top: 5px; font-size: 12px; color: var(--sonuk); opacity: .8; }

.hata { color: var(--hata); font-size: 14px; margin: 0 0 14px; }

.basari { text-align: center; }
.basari .isaret { font-size: 42px; color: var(--altin); }
.basari code {
    display: inline-block; background: var(--bg); border: 1px solid var(--cizgi);
    padding: 9px 15px; border-radius: 7px; color: var(--altin);
    font-size: 17px; letter-spacing: .06em; margin: 10px 0;
}

/* -------------------------------------------------------------- alt */
.alt {
    border-top: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--bg-2) 72%, transparent);
    padding: 34px 0; margin-top: 40px;
}
.alt-ic p { margin: 0 0 6px; font-size: 14px; }
.sonuk { color: var(--sonuk); font-size: 13px !important; }

/* ==================================================================
   2026-08-17 -- GORSEL DERINLIK
   Sahip "cok basic goruyor" dedi. Eksik olan sey renk degil KIMLIKTI:
   sayfa bir dizi kutudan ibaretti. Asagidakiler oyunun kendi gorsel
   diline (altin cerceve, kose parantezleri, susleme cizgileri, mum
   isigi) sayfada karsilik uretiyor.
   ================================================================== */

/* --- yukselen korlar (arka plandaki mum sahnesinin devami) --- */
.korlar {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
html[data-tema="acik"] .korlar { opacity: .35; }

.ust, main, .alt { position: relative; z-index: 2; }

/* --- arma --- */
.arma { width: 38px; height: 38px; flex: 0 0 38px; }
.arma.kucuk { width: 30px; height: 30px; flex-basis: 30px; }
.arma-halka { fill: none; stroke: var(--altin); stroke-width: 1.4; opacity: .55; }
.arma-halka-ic { fill: none; stroke: var(--altin); stroke-width: .7; opacity: .3; }
.arma-yildiz { fill: var(--altin); }
.marka:hover .arma-yildiz { filter: drop-shadow(0 0 6px var(--altin)); }
.marka-yazi { display: block; }

/* --- sunucu durum rozeti --- */
.durum-rozet {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--cizgi); border-radius: 20px;
    padding: 5px 13px 5px 10px;
    font-size: 12px; color: var(--sonuk); white-space: nowrap;
}
.durum-rozet .nokta {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sonuk); flex: 0 0 7px;
}
.durum-rozet.acik { border-color: color-mix(in srgb, #4fd18b 45%, transparent); color: #7fe0ac; }
.durum-rozet.acik .nokta { background: #4fd18b; animation: nabiz 2s ease-in-out infinite; }
.durum-rozet.kapali { border-color: color-mix(in srgb, #d16060 40%, transparent); color: #e08b8b; }
.durum-rozet.kapali .nokta { background: #d16060; }
@keyframes nabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 139, .55); }
    50%      { box-shadow: 0 0 0 5px rgba(79, 209, 139, 0); }
}

/* --- kahraman --- */
.kahraman-ic { max-width: 780px; }
.kahraman h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.altin-yazi {
    background: linear-gradient(100deg, var(--altin) 0%, #fff2cd 42%, var(--altin-koyu) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.dugme-sira { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- istatistik seridi --- */
.serit {
    border-block: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--bg-2) 62%, transparent);
    backdrop-filter: blur(3px);
}
.serit-ic {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px; background: var(--cizgi);
}
.serit-kutu {
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    padding: 22px 18px; text-align: center;
}
.serit-kutu b {
    display: block; font-family: Georgia, serif; font-size: 25px;
    color: var(--altin); line-height: 1.2;
}
.serit-kutu span {
    display: block; margin-top: 3px; font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--sonuk);
}

/* --- bolum basligi + susleme --- */
.bolum-basi { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.bolum-basi h2 { margin: 0; padding: 0; border: 0; white-space: nowrap; }
.susleme { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cizgi), transparent); }
.susleme:first-child { background: linear-gradient(90deg, transparent, var(--cizgi)); }
.susleme:last-child  { background: linear-gradient(90deg, var(--cizgi), transparent); }

.aciklama.orta { margin-inline: auto; text-align: center; }

/* --- kategori sekmeleri --- */
.kategoriler { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.kategori {
    background: none; border: 1px solid var(--cizgi); color: var(--sonuk);
    padding: 7px 17px; border-radius: 20px; cursor: pointer;
    font: inherit; font-size: 13px; transition: .16s;
}
.kategori:hover { border-color: var(--altin-koyu); color: var(--metin); }
.kategori.secili {
    border-color: var(--altin); color: var(--altin);
    background: color-mix(in srgb, var(--altin) 10%, transparent);
}

/* --- urun kartlarina altin kose parantezleri --- */
.urun { overflow: hidden; }
.urun::before, .urun::after {
    content: ''; position: absolute; width: 15px; height: 15px;
    border-color: var(--altin); opacity: 0; transition: opacity .2s;
    pointer-events: none;
}
.urun::before { top: 9px; left: 9px; border-top: 1px solid; border-left: 1px solid; }
.urun::after { bottom: 9px; right: 9px; border-bottom: 1px solid; border-right: 1px solid; }
.urun:hover::before, .urun:hover::after { opacity: .85; }

.urun .urun-ust {
    display: flex; align-items: center; gap: 10px;
    color: var(--altin); font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase;
}
.urun .urun-ust::after { content: ''; flex: 1; height: 1px; background: var(--cizgi); }

/* --- kaydirinca beliren ogeler --- */
.belir { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.belir.gorundu { opacity: 1; transform: none; }

/* --- alt --- */
.alt-ic { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.alt-marka { display: flex; align-items: center; gap: 12px; }
.alt-marka b { font-size: 13px; letter-spacing: .2em; }
.alt-marka p { margin: 2px 0 0; }
.alt-not { max-width: 46ch; }
.alinti {
    text-align: center; margin: 26px 0 0; padding-top: 20px;
    border-top: 1px solid var(--cizgi);
    font-family: Georgia, serif; font-style: italic;
    color: var(--sonuk); font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .belir { opacity: 1; transform: none; transition: none; }
    .durum-rozet.acik .nokta { animation: none; }
    .korlar { display: none; }
}

@media (max-width: 640px) {
    .durum-rozet { display: none; }
    .serit-kutu { padding: 16px 12px; }
    .serit-kutu b { font-size: 21px; }
    .bolum-basi { gap: 12px; }
    .ust nav { gap: 14px; }
    .ust nav a { display: none; }
    .kahraman { padding: 56px 0 46px; }

    /* iOS Safari "background-attachment: fixed"i dogru islemiyor --
       gorsel ya donuyor ya da kaydirirken titriyor. Mobilde sabitleme
       kapatiliyor, gorsel sayfayla birlikte kayiyor. */
    body { background-attachment: scroll, scroll; }
}