/* ═══════════════════════════════════════════════════════════════════
   mt-anim.css — MinerTown site animasyonlari (11.10.2026 animasyon)
   Kadir'in onayladigi 13 animasyonun ORTAK stilleri. Davranis
   assets/js/mt-anim.js'te (window.MTAnim); API ve kullanim orada.
   Onizleme kaynagi: /root/site-yedek/animasyon (animasyon-sablon.html,
   ekle2.py, ekle2.js).

   KURALLAR
   ⚠ Butun siniflar `mt-` onekli; Tailwind sinifi yok (tw.css statik).
   ⚠ Hicbir sey istirahatte GIZLENMEZ: JS calismazsa ya da hata verirse
     icerik oldugu gibi gorunur. Gizleme yalniz bir animasyonun ilk
     karesinde (fill-mode both) olur, animasyon bitince sinif kalkar.
   ⚠ Hareketler `transform` yerine tek tek `translate` / `rotate` /
     `scale` ozellikleriyle yazildi: ogenin KENDI transform'u (Tailwind
     -translate-y-1/2, hover scale) ezilmesin, ustune eklensin.
   ⚠ style.css'teki genel reduce kurali (animation-duration .001ms) sonsuz
     animasyonlari titretir; o yuzden asagidaki reduce blogu her seyi
     `animation: none !important` ile ACIKCA kapatir.
   ⚠ Renkler style.css token'larindan: --accent (#FACC15), --accent-hover
     (#FDE047), --font-display (Monocraft). .b3 renkleri --c-yuz/--c-derin/
     --c-rim (kirinti JS'te bunlari okur).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --mt-sari: var(--accent, #FACC15);
    --mt-sari-acik: #FEF08A;
    --mt-xp: #7CFC5A;                     /* Minecraft XP yesili (onizlemedeki --yesil) */
    --mt-font: var(--font-display, 'Monocraft', 'Montserrat', ui-monospace, monospace);
    --mt-mc-golge: 2px 2px 0 rgba(0, 0, 0, .78);   /* oyun ici yazi golgesi */
}

/* Ekran okuyucu icin gorunmez canli bolge (MTAnim.duyur) */
.mt-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.mt-gizle { display: none !important; }

/* ── ortak tam ekran parcacik katmani (4 havai fisek, 9 kirinti, 10, 12) ── */
.mt-katman {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100000;                      /* promo modali (10000) ve toast'larin (99999) da ustunde */
}
.mt-katman.mt-fisek { z-index: 99990; }
.mt-katman[hidden] { display: none !important; }

/* ═══ 2 — kaydirinca belir ═══════════════════════════════════════════
   Yalniz `from` karesi: bitis ogenin KENDI opakligi/konumu (opacity-80 gibi
   bir oge bir an %100'e sicramaz). ⚠ Kendi `animation`i olan ogeye koyma:
   bu sinif kalkinca onunki bastan oynar — sarmalayiciya koy. */
@keyframes mtBelir {
    from { opacity: 0; translate: 0 18px; }
}
.mt-belir-oyna {
    animation: mtBelir .6s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--mt-s, 0) * 110ms);
}

/* ═══ 3 — market: suzulen urun gorseli + indirimli kartta blok blok isik ═══ */
@keyframes mtSuzul {
    0%, 100% { translate: 0 0;    rotate: -3deg; }
    50%      { translate: 0 -7px; rotate: 3deg; }
}
.mt-suzul { animation: mtSuzul 2.8s ease-in-out infinite; }
/* istege bagli: yerdeki esya golgesi (ogenin kendi filter'i varsa KOYMA, ezer) */
.mt-suzul-golge { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .5)); }

/* Kart position'siz ise kutuphane bunu verir. (0,2,0): tek Tailwind sinifini yener. */
[data-mt-parilti].mt-parilti-kap { position: relative; isolation: isolate; overflow: hidden; }
.mt-parilti {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 3;                           /* kartin USTUNDE (gorsel/ic zeminler isigi yutmasin); tiklamayi engellemez */
    pointer-events: none;
    border-radius: inherit;
    /* sert duraklar: isik suzulmez, blok blok yanar (style.css .b3__yuz::after ile ayni dil) */
    background-image: linear-gradient(100deg,
        transparent 38%,
        rgba(255, 255, 255, .07) 38%, rgba(255, 255, 255, .07) 43%,
        transparent 43%, transparent 47%,
        rgba(250, 204, 21, .16) 47%, rgba(250, 204, 21, .16) 53%,
        transparent 53%, transparent 57%,
        rgba(255, 255, 255, .06) 57%, rgba(255, 255, 255, .06) 61%,
        transparent 61%);
    background-size: 300% 100%;
    background-position: 175% 0;
    background-repeat: no-repeat;
    animation: mtParilti 4.5s steps(18, end) infinite;
}
@keyframes mtParilti {
    0%, 62% { background-position: 175% 0; }
    100%    { background-position: -75% 0; }
}

/* ═══ 5 — IP kopyalaninca XP kuresi (<html>'e fixed eklenir) ═════════
   11.10.2026 animasyon: body'de zoom:1.08 var (index.php >=1024px); body'ye
   eklenince left/top 1.08 ile carpilip kure butondan kayiyordu. .mt-arti ve
   parcacik canvas'i (.mt-katman) da ayni nedenle koke eklenir. */
.mt-xp {
    position: fixed;
    z-index: 100001;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mt-font);
    font-weight: 900;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .3px;
    color: var(--mt-xp);
    text-shadow: var(--mt-mc-golge);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -100%);
}
.mt-xp::before {
    content: "";
    flex: none;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 35% 35%, #E8FFB0, var(--mt-xp) 45%, #2F8F12 80%);
    box-shadow: 0 0 10px var(--mt-xp);
}
.mt-xp.mt-atla { animation: mtXpAtla 1.2s cubic-bezier(.2, .8, .3, 1) forwards; }
.mt-xp.mt-xp-sabit { opacity: 1; transform: translate(-50%, calc(-100% - 8px)); }
@keyframes mtXpAtla {
    0%   { opacity: 0; transform: translate(-50%, calc(-100% + 6px)) scale(.6); }
    18%  { opacity: 1; transform: translate(-50%, calc(-100% - 6px)) scale(1.15); }
    32%  {             transform: translate(-50%, calc(-100% - 2px)) scale(1); }
    75%  { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
    100% { opacity: 0; transform: translate(-50%, calc(-100% - 28px)); }
}

/* ═══ 6 — siralama kursusu: sira 2 → 1 → 3 ═════════════════════════════ */
@keyframes mtYuksel {
    from { scale: 1 0; }
}
[data-mt-kursu].mt-yuksel .mt-kursu-blok {
    transform-origin: 50% 100%;
    animation: mtYuksel .7s cubic-bezier(.2, .9, .3, 1.2) both;
}
[data-mt-kursu].mt-yuksel [data-mt-basamak="2"] .mt-kursu-blok { animation-delay: .05s; }
[data-mt-kursu].mt-yuksel [data-mt-basamak="1"] .mt-kursu-blok { animation-delay: .35s; }
[data-mt-kursu].mt-yuksel [data-mt-basamak="3"] .mt-kursu-blok { animation-delay: .65s; }
[data-mt-kursu].mt-yuksel .mt-kursu-ust { animation: mtBelir .5s ease both; }
[data-mt-kursu].mt-yuksel [data-mt-basamak="2"] .mt-kursu-ust { animation-delay: .45s; }
[data-mt-kursu].mt-yuksel [data-mt-basamak="1"] .mt-kursu-ust { animation-delay: .75s; }
[data-mt-kursu].mt-yuksel [data-mt-basamak="3"] .mt-kursu-ust { animation-delay: 1.05s; }

/* tac parlamasi (ogenin kendi filter'ini ezer) */
.mt-tac {
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, .8));
    animation: mtTacParla 2.2s ease-in-out infinite;
}
@keyframes mtTacParla {
    50% { filter: drop-shadow(0 0 14px rgba(250, 204, 21, 1)); translate: 0 -2px; }
}

/* ═══ 7 — sayfa gecis cizgisi (kutuphane body basina ekler) ═══════════ */
#mt-gecis {
    position: fixed;
    top: 0; left: 0; right: 0;
    box-sizing: border-box;
    height: calc(3px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 9999;
    pointer-events: none;
}
#mt-gecis i {
    display: block;
    height: 3px;
    width: 0;
    background: var(--mt-sari);
    box-shadow: 0 0 10px rgba(250, 204, 21, .7);
    opacity: 0;
}
#mt-gecis.mt-dol i { opacity: 1; width: 80%; transition: width 1.6s cubic-bezier(.2, .7, .2, 1); }
#mt-gecis.mt-gel i { opacity: 1; width: 80%; transition: none; }
#mt-gecis.mt-bit i { opacity: 0; width: 100%; transition: width .2s ease, opacity .3s ease .2s; }

/* ═══ 8 — 3D skin (skinview3d canvas'i) ═══════════════════════════════ */
.mt-skin-cv {
    display: block;
    max-width: 100%;
    cursor: grab;
    touch-action: pan-y;                  /* OrbitControls 'none' yaziyor; JS de pan-y'ye ceker */
}
.mt-skin-cv:active { cursor: grabbing; }
.mt-skin-cv:not(.mt-hazir) { display: none; }      /* skin yuklenene kadar 2D gorsel kalir */
.mt-skin-gizli { display: none !important; }

/* ═══ 10 — creeper'li 404 ═════════════════════════════════════════════ */
.mt-404-alan { overflow: hidden; min-height: 150px; }
[data-mt-404].mt-404-kap, .mt-404-alan.mt-404-kap { position: relative; }
[data-mt-404-rakam] > span { display: inline-block; }
.mt-404-zemin {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14px;
    background:
        repeating-linear-gradient(90deg, #5FAE36 0 6px, #4E9A2C 6px 12px) top / 100% 5px no-repeat,
        repeating-linear-gradient(90deg, #6B4A2F 0 8px, #5E412A 8px 14px, #7A5537 14px 20px);
    pointer-events: none;
}
.mt-404-yol { position: absolute; right: 6%; bottom: 14px; pointer-events: none; }
.mt-404-yol canvas {
    display: block;
    width: 32px; height: 104px;
    image-rendering: pixelated;
    transform-origin: 50% 100%;
}
.mt-404-tss {
    position: absolute;
    right: calc(6% - 14px);
    bottom: 124px;
    font-family: var(--mt-font);
    font-size: 12px;
    line-height: 1.2;
    color: #FFFFFF;
    background: rgba(0, 0, 0, .65);
    padding: 3px 7px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}
.mt-404-tss.mt-gor { opacity: 1; animation: mtTitre .12s steps(2, end) infinite; }
@keyframes mtTitre { 50% { translate: 1px 0; } }

/* ═══ 11 — saate gore gokyuzu ═════════════════════════════════════════
   ⚠ Sozlesmede z-index 0 yaziyordu; -1 + kapsayicida isolation secildi:
     boylece kapsayicinin position'siz icerigi de gokyuzunun USTUNDE kalir
     (z 0 olsaydi konumsuz yazilar gokyuzunun altinda kalirdi). Konumlu
     icerik (relative z-10 vb.) iki durumda da ustte. */
[data-mt-gok].mt-gok-kap { position: relative; isolation: isolate; }
[data-mt-gok].mt-gok-izole { isolation: isolate; }
.mt-gok {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    --mt-tepe: #3F7D2A; --mt-tepe-on: #2F6620;
}
.mt-gok[data-vakit="sabah"] { --mt-tepe: #4D7A35; --mt-tepe-on: #3A6328; }
.mt-gok[data-vakit="aksam"] { --mt-tepe: #3B2F47; --mt-tepe-on: #2A2236; }
.mt-gok[data-vakit="gece"]  { --mt-tepe: #121C2C; --mt-tepe-on: #0A1220; }
.mt-gok > div { position: absolute; }
.mt-gok-k { top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 1.4s ease; }
.mt-gok-sabah  { background: linear-gradient(#7DB0EE, #F3B9A6 70%, #FFDCA6); }
.mt-gok-gunduz { background: linear-gradient(#4E95EC, #8CC4FF 62%, #CFE8FF); }
.mt-gok-aksam  { background: linear-gradient(#2C2B5E, #9E4479 45%, #EE8A4C 80%, #FFC66E); }
.mt-gok-gece   { background: linear-gradient(#04050D, #0B1131 60%, #18214B); }
.mt-gok[data-vakit="sabah"] .mt-gok-sabah,
.mt-gok[data-vakit="gunduz"] .mt-gok-gunduz,
.mt-gok[data-vakit="aksam"] .mt-gok-aksam,
.mt-gok[data-vakit="gece"] .mt-gok-gece { opacity: 1; }

.mt-gok-yildizlar { top: 0; right: 0; bottom: 30%; left: 0; opacity: 0; transition: opacity 1.4s ease; }
.mt-gok[data-vakit="aksam"] .mt-gok-yildizlar { opacity: .3; }
.mt-gok[data-vakit="gece"] .mt-gok-yildizlar { opacity: 1; }
.mt-gok-yildizlar i {
    position: absolute;
    display: block;
    width: 2px; height: 2px;
    background: #FFFFFF;
    animation: mtPirilti 2.6s ease-in-out infinite;
}
.mt-gok-yildizlar i.mt-iri { width: 3px; height: 3px; }
/* gunduz/sabah yildizlar gorunmuyor: 46 animasyonu bosuna dondurme */
.mt-gok[data-vakit="sabah"] .mt-gok-yildizlar i,
.mt-gok[data-vakit="gunduz"] .mt-gok-yildizlar i { animation: none; }
@keyframes mtPirilti { 50% { opacity: .2; } }

.mt-gok-gunes, .mt-gok-ay {
    width: 36px; height: 36px;
    transform: translate(-50%, -50%);
    transition: left 1.6s cubic-bezier(.4, 0, .2, 1), top 1.6s cubic-bezier(.4, 0, .2, 1),
                opacity 1.2s ease, background-color 1.4s ease, box-shadow 1.4s ease;
}
.mt-gok-gunes { left: 50%; top: 18%; background: #FFF7B0; box-shadow: inset 0 0 0 6px #FFE45C, 0 0 26px 6px rgba(255, 236, 120, .55); }
.mt-gok[data-vakit="sabah"] .mt-gok-gunes { left: 14%; top: 62%; }
.mt-gok[data-vakit="aksam"] .mt-gok-gunes { left: 86%; top: 64%; background: #FFD08A; box-shadow: inset 0 0 0 6px #FF9F43, 0 0 30px 8px rgba(255, 140, 60, .5); }
.mt-gok[data-vakit="gece"] .mt-gok-gunes { left: 100%; top: 115%; opacity: 0; }
.mt-gok-ay {
    left: 8%; top: 115%; opacity: 0;
    background:
        linear-gradient(#B9C3D4, #B9C3D4) 8px 7px / 8px 8px no-repeat,
        linear-gradient(#B9C3D4, #B9C3D4) 22px 19px / 6px 6px no-repeat,
        linear-gradient(#C9D1DF, #C9D1DF) 9px 23px / 5px 5px no-repeat,
        #E4EAF4;
    box-shadow: 0 0 22px 4px rgba(200, 215, 255, .35);
}
.mt-gok[data-vakit="gece"] .mt-gok-ay { left: 72%; top: 22%; opacity: 1; }

/* bulutlar: `left` yerine transform kayar (her karede yerlesim hesaplanmasin) */
.mt-gok-bulut {
    left: -140px;
    width: 96px; height: 14px;
    background: #FFFFFF;
    opacity: .92;
    animation: mtBulut linear infinite;
    transition: background-color 1.4s ease, opacity 1.4s ease;
}
.mt-gok-bulut::before {
    content: "";
    position: absolute;
    left: 22px; top: -11px;
    width: 46px; height: 11px;
    background: inherit;
}
.mt-gok-b1 { top: 24%; animation-duration: 80s;  animation-delay: -34s; }
.mt-gok-b2 { top: 64%; width: 70px;  animation-duration: 110s; animation-delay: -82s; }
.mt-gok-b2::before { left: 14px; width: 30px; }
.mt-gok-b3 { top: 13%; width: 124px; animation-duration: 140s; animation-delay: -18s; }
.mt-gok-b3::before { left: 30px; width: 60px; }
.mt-gok[data-vakit="sabah"] .mt-gok-bulut { background: #FFF1EA; }
.mt-gok[data-vakit="aksam"] .mt-gok-bulut { background: #F4BFAE; opacity: .82; }
.mt-gok[data-vakit="gece"] .mt-gok-bulut  { background: #36405F; opacity: .55; }
@keyframes mtBulut {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 140px)); }
}

/* iki kat bloklu tepe silueti */
.mt-gok-tepe {
    left: 0; right: 0; bottom: 0;
    height: clamp(56px, 20%, 140px);
    background: var(--mt-tepe);
    transition: background-color 1.4s ease;
    clip-path: polygon(0 100%, 0 40%, 8% 40%, 8% 24%, 18% 24%, 18% 46%, 30% 46%, 30% 14%, 38% 14%, 38% 30%, 52% 30%, 52% 50%, 62% 50%, 62% 20%, 74% 20%, 74% 36%, 86% 36%, 86% 10%, 94% 10%, 94% 30%, 100% 30%, 100% 100%);
}
.mt-gok-tepe.mt-gok-on {
    height: clamp(30px, 11%, 76px);
    background: var(--mt-tepe-on);
    clip-path: polygon(0 100%, 0 30%, 12% 30%, 12% 50%, 24% 50%, 24% 20%, 40% 20%, 40% 45%, 58% 45%, 58% 10%, 70% 10%, 70% 40%, 84% 40%, 84% 25%, 100% 25%, 100% 100%);
}
/* ekran disindayken dur (JS ekler) */
.mt-gok.mt-gok-dur *, .mt-gok.mt-gok-dur *::before { animation-play-state: paused !important; }

/* gokyuzu ustundeki yazi okunsun: 3px blok golge + 1px kontur.
   ⚠ bg-clip-text ile saydam yapilmis gradyan yaziya VERME: golge harfin icinden gorunur. */
.mt-gok-yazi {
    text-shadow:
        3px 3px 0 rgba(0, 0, 0, .7),
        -1px -1px 0 rgba(0, 0, 0, .5), 1px -1px 0 rgba(0, 0, 0, .5),
        -1px 1px 0 rgba(0, 0, 0, .5), 1px 1px 0 rgba(0, 0, 0, .5);
}

/* ═══ 12 — bakiye artinca altin ═══════════════════════════════════════ */
.mt-bakiye-parla { animation: mtBakiyeParla .9s ease; }
@keyframes mtBakiyeParla {
    25% { text-shadow: 0 0 14px rgba(250, 204, 21, .95), 0 0 3px rgba(254, 240, 138, .9); }
}
.mt-arti {
    position: fixed;
    z-index: 100001;
    pointer-events: none;
    font-family: var(--mt-font);
    font-weight: 900;
    font-size: 13px;
    line-height: 1.2;
    color: var(--mt-xp);
    text-shadow: var(--mt-mc-golge);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-100%, -100%);
}
.mt-arti.mt-uc { animation: mtArtiUc 1.3s ease-out forwards; }
@keyframes mtArtiUc {
    0%   { opacity: 0; transform: translate(-100%, calc(-100% + 10px)); }
    20%  { opacity: 1; transform: translate(-100%, -100%); }
    100% { opacity: 0; transform: translate(-100%, calc(-100% - 24px)); }
}

/* ═══ HAREKETI AZALT ══════════════════════════════════════════════════
   Hareket tamamen durur, icerik eksiksiz kalir: XP mesaji sabit gorunur,
   bakiyenin yeni degeri dogrudan yazilir (JS), bulutlar yerinde durur. */
@media (prefers-reduced-motion: reduce) {
    .mt-belir-oyna,
    [data-mt-kursu].mt-yuksel .mt-kursu-blok,
    [data-mt-kursu].mt-yuksel .mt-kursu-ust,
    .mt-suzul, .mt-parilti, .mt-tac, .mt-bakiye-parla,
    .mt-404-tss, .mt-404-yol canvas,
    .mt-gok, .mt-gok *, .mt-gok *::before,
    #mt-gecis i {
        animation: none !important;
        transition: none !important;
    }
    .mt-parilti, .mt-arti { display: none !important; }
    .mt-xp {
        opacity: 1 !important;
        animation: none !important;
        transform: translate(-50%, calc(-100% - 8px)) !important;
    }
    .mt-gok .mt-gok-bulut { transform: none !important; }
    .mt-gok .mt-gok-b1 { left: 8%; }
    .mt-gok .mt-gok-b2 { left: 68%; }
    .mt-gok .mt-gok-b3 { left: 40%; }
}