@font-face {
    font-family: 'Poetsen One';
    src: url('PoetsenOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gothic725 Bd BT';
    src: url('GOTH725B.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

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

:root {
    --text-dark: #3e2723;
    --side-pillar-width: 8%;
    --side-padding-width: 9%;
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

html, body {
    overflow: hidden; /* v197: Tarayıcı kenarındaki kaydırma çubuğu titremesini engellemek için */
    width: 100%;
    height: 100%;
}

body {
    background-color: #2d2c2a; /* v139: Sultanımızın talebiyle en alt zemin boyası */
    background-image: url('zemin2.jpg'); /* v149: 3440x1440px devasa görsel */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: auto; /* Yayılmadan orijinal boyutunda kalır */
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'Gothic725 Bd BT', 'Century Gothic', Arial, sans-serif;
    touch-action: manipulation;
}
/* v146: Karartma katmanı (body::before) tamamen sıfırlandı/kaldırıldı */


.phone-screen {
    position: relative;
    width: 100%;
    min-width: 380px; /* v135: En küçük asgari genişlik */
    max-width: 580px; /* v138: Sultanımızın talebiyle 580px'e sabitlendi */
    margin: 0 auto; 
    height: 100vh;
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    touch-action: pan-y;
    background-color: transparent; /* v141: Alt zeminin (zemin2.jpg) her yerden görünmesi için */
}

/* v138/v167: Responsive Düzenleme - Oyun alanı 770px'e kadar büyür, sonrasında 580px'de sabitlenir */
@media screen and (max-width: 770px) {
    .phone-screen {
        max-width: 100%; /* Mobil/Tablet özelinde ekranı kapla */
    }
}
@media screen and (min-width: 771px) {
    .phone-screen {
        max-width: 580px; /* PC/Büyük ekranlarda merkezi kalsın */
    }
}

/* --- GANİMET SANDIĞI (GOLDEN CHEST) STİLLERİ (v172) --- */
.gold-chest {
    position: fixed;
    width: 80px; /* v179: Bir tık daha büyük (Eski: 65px) */
    height: 80px;
    z-index: 2500;
    cursor: pointer;
    background: radial-gradient(circle, #ffe082 0%, #ffc107 40%, #bf8f00 100%);
    border: 3px solid #5c3716;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), inset 0 0 10px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.8rem; /* v179: Emoji de büyüdü */
    animation: chestSpawn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
               chestGlow 1.2s infinite alternate ease-in-out; /* v179: Daha seri nabız */
    pointer-events: auto;
}

.gold-chest::after {
    content: '👑'; /* Sultanın mührü */
    font-size: 1rem;
    position: absolute;
    top: -10px;
    right: -10px;
    background: #d32f2f;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes chestSpawn {
    0% { transform: scale(0) rotate(-45deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes chestGlow {
    0% { 
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); 
        transform: translateY(0) scale(1); 
    }
    100% { 
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 215, 0, 0.3); 
        transform: translateY(-10px) scale(1.15); /* v179: Belirgin büyüme/küçülme (Pulse) */
    }
}

.chest-clicking {
    animation: chestPop 0.2s ease-out forwards !important;
}

@keyframes chestPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(0); opacity: 0; }
}

/* The dark heavy mesh at the top */
.top-mesh-bg {
    background: transparent; /* v141: Zemin görselinin alttan görünmesi için */
    height: 98px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.arma {
    height: 80px;
    margin-top: 5px;
    filter: drop-shadow(0px 2px 4px #000);
}

.logo-text {
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    color: #ffd700;
    text-shadow: 
      0 1px 0 #cc9900, 
      0 2px 0 #b38600, 
      0 3px 0 #997300, 
      0 4px 5px rgba(0,0,0,0.8);
    background: linear-gradient(to bottom, #fffde7, #fbc02d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -15px;
    letter-spacing: 2px;
    text-transform: lowercase;
}

/* The scroll below the header */
.scroll-area {
    flex: 1;
    min-height: 0; 
    position: relative;
    background-image: url('zemin1.png'); /* v153: Sultanımızın talebiyle geri yüklendi */
    background-size: 100% 100%; /* İçeriği boydan boya kaplayan yayılma efekti */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Side Custom Image Columns scaling proportionally */
.side-border {
    position: absolute;
    top: 0; bottom: 34px; /* Alt logo ile kesişmemesi için sınırlandırıldı */
    width: var(--side-pillar-width); /* JS Matematiksel hesaplamasına devredildi */
    z-index: 11;
    pointer-events: none;
    background-size: 100% 100%; /* Sünerek ekranı dikeylemesine orantılı kaplar */
    background-repeat: no-repeat;
}
.side-border.left {
    left: 0;
    background-image: url('sol-kenar.png');
}
.side-border.right {
    right: 0;
    background-image: url('sag-kenar.png');
}

/* Custom Scrollbar to hide default */
.scroll-content {
    flex: 1;
    min-height: 0; 
    /* Butonlar çok aşağı indiği/yaklaştığı için kartların aşağıya çok daha fazla scroll olabilmesi sağlandı (Kazanç Alanı Genişledi!) */
    margin-bottom: 95px; 
    overflow-y: auto;
    padding: 0 var(--side-padding-width) 30px var(--side-padding-width); 
    display: block; /* Changed from flex so elements grow indefinitely and force scroll */
    
    /* Yumuşak geçiş maskelemesi: Kutuların alt ve üst uçlarda duman gibi eriyerek silinmesi için */
    /* v154: Maskeleme kaldırıldı */
}
.scroll-content::-webkit-scrollbar { display: none; }

/* Top Money Area Custom UI */
.top-money-area {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0 0 20px 0; 
    width: 100%;
    height: 48px; /* TPA images typical height */
    position: relative;
    z-index: 5;
    /* Gölge (drop-shadow) iptal edildi */
}
.tpa-sol, .tpa-sag {
    height: 100%;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.tpa-orta {
    flex: 1;
    height: 100%;
    background-image: url('tpa-orta.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: baseline; /* Sayı ve yazıyı alt çizgide (kusursuz) bağlar */
    color: #4a2b10;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.6); 
    font-family: 'Poetsen One', sans-serif;
    padding-top: 9px; /* Baseline kullanımında görsel merkezi ortalamak için fiziksel esneme payı */
    /* Kullanıcı İsteği: Ne kadar büyük rakam (Milyar/Trilyon) gelirse gelsin, 'TL' yazısı kopup ikinci satıra düşmeyecek! */
    white-space: nowrap; 
    overflow: hidden; 
}
.money-val { 
    font-weight: 900; 
    margin-right: 2px; 
    /* clamp() Kuralı: Alan dardaysa font 1.7rem'den geriye doğru büzülerek alana sığmayı garanti eder! */
    font-size: clamp(1rem, 6vw, 1.7rem); 
    letter-spacing: 0.5px; 
}
.money-unit { 
    font-weight: 700; 
    font-size: clamp(0.7rem, 3vw, 1.0rem); /* Milyon & TL Yazıları Rakamın oranında büzülür */
    opacity: 0.85; 
}

/* Businesses container */
.businesses-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Kullanıcı isteği: kart boşluğu */
}

/* Country Card Structure */
.card-wrapper {
    position: relative;
    width: 100%;
    min-height: 110px; /* Küçültüldü (~%70) */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    transition: opacity 0.3s ease; /* Akıcı geçiş */
}
.card-wrapper.dimmed {
    opacity: 0.7; /* Para yetmiyorsa soluk durur */
}
.card-wrapper.tutorial-active {
    opacity: 1 !important; /* Rehber sırasında asla soluklaşmaz (v120) */
}

.card-wood {
    width: 100%;
    min-height: 105px; /* Küçültüldü (~%70) */
    background: linear-gradient(to bottom, #b4702b, #7f4812);
    border-radius: 21px;
    padding: 8px; /* Küçültüldü */
    box-shadow: none; /* Kutuların dış ve iç gölgeleri kaldırıldı */
    border: 3px solid #3d1c00;
    position: relative;
    z-index: 2;
}

.card-inner {
    background: linear-gradient(to bottom, #d4ab73, #b88645);
    border-radius: 15px;
    border: 1.5px dashed #5c3a21;
    padding: 8px 8px; /* Küçültüldü */
    display: flex;
    gap: 10px; /* Küçültüldü */
    box-shadow: none; /* Kutuların iç gölgeleri kaldırıldı */
}

/* Flag styling */
.country-mask {
    width: 65px; 
    height: 65px; 
    border: 3px solid #3d1c00; 
    border-radius: 8px; 
    overflow: hidden;
    position: relative;
    box-shadow: none; 
    flex-shrink: 0;
    margin-right: 15px; 
    cursor: pointer;
    transition: all 0.1s ease; /* Tıklanma sıçraması için akıcılık */
    
    /* YENİ NATIVE BUTON FORMU (Resmi background yapar, tıklanınca indirme menüsü açılamaz!) */
    background-size: calc(100% + 4px) calc(100% + 4px); /* Tıraşlanan dış 1-2px çeper korundu */
    background-position: center;
    background-repeat: no-repeat;
    outline: none; /* Focus olunca çıkan mavi telefon kutularını engeller */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
    display: block; /* Native inline whitespace engelleyici */
}
/* SAĞDAKİ BUTONUN BİREBİR AYNISI OLAN TIKLANMA EFEKTİ (Çökme ve Kan Kırmızısına Bürünesini Sağlayan Hile) */
.country-mask:active {
    transform: translateY(3px);
    filter: brightness(50%) sepia(100%) hue-rotate(335deg) saturate(500%);
}
.country-mask.flag-locked {
    filter: grayscale(100%) brightness(70%);
}
.flag-level {
    position: absolute;
    top: 50%; left: 50%; /* Yazı tam ortaya çekildi */
    transform: translate(-50%, -50%); /* Kusursuz merkez. */
    color: #4e2e2c; /* Kullanıcı Özel İsteği */
    font-weight: 900;
    font-size: 1.3rem; 
    text-shadow: none; /* Gölge Yasak */
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5); /* Okunurluk maksimizasyonu için özel Alpha Stroke */
    font-family: 'Poetsen One', sans-serif;
    pointer-events: none;
}
.flag-container:active { transform: scale(0.95); }

.middle-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top-text {
    text-align: right;
    font-weight: 600;
    color: #4e2e2c;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
    margin-bottom: 6px; 
    margin-right: 3px;
    
    /* Kullanıcı İsteği: Ne kadar büyük rakam gelirse gelsin, 'TL' yazısı alta düşmez! */
    white-space: nowrap; 
    overflow: hidden; 
    /* Alan dardaysa veya rakam aşırı şiştiyse font otomatik büzülerek kutunun içine sığar! */
    font-size: clamp(0.7rem, 3.5vw, 1.0rem); 
}

.progress-track {
    background: url('bar-zemin-p.png') left center / 100% 100% no-repeat transparent; /* Sabit duran Alt Zemin */
    border: none;
    border-radius: 0; 
    height: 28px; /* Grafiğe yakışacak ideal oyun barı kalınlığı */
    position: relative;
    box-shadow: none; /* Eskisine ait gölgeler, resmi bozmasın diye iptal edildi */
    cursor: pointer;
}
/* Dolum animasyonunu alt zemine yapışmasını önleyen güvenli zırh */
.progress-bounds {
    position: absolute;
    top: 0; bottom: 0;
    /* Ana akış çubuğu, çerçevenin kenarına (sol çizgiye) binmemesi için 5px sağa/içeri ötelendi! */
    left: 5px; 
    right: 19px; 
    pointer-events: none;
}
.progress-fill {
    height: 19px; 
    background: url('bar-zemin-a.png') left center / 100% 100% no-repeat transparent; 
    width: 0%;
    /* '1 ms takılma' (Stutter) Hatası Çözümü: 
       JS zaten requestAnimationFrame ile 60fps akıcılıkta motoru itmekte olduğundan CSS'deki width 0.1s transition kuralı onunla fiziksel bir dövüşe giriyor ve çekiştiriyordu. 
       Bu yüzden width esnemesi saf JavaScript'in kaygan/saf render motoruna bırakılmıştır! Sadece yükseklik korundu! */
    transition: height 0.1s linear; 
    border-radius: 19px; 
    box-shadow: none;
    position: absolute;
    top: 50%; 
    left: 0;
    transform: translateY(-50%); 
}
/* 'Tam Soldan Başlamama' Hatası Çözümü: progress-fill.running blokundaki (min-width: 19px) tam yuvarlak dayatması tamamen silindi, artık uç resmi doğrudan gerçek sıfır noktasında (0%) belirir! */
/* UÇ KISIM GÖRSELİ (bar-zemin-uc.png) */
.progress-fill::after {
    content: '';
    position: absolute;
    /* İkon 24px genişliğinde. Gövdeden eksi (-) 19px sağa taşırdığımızda; 19px - 24px = Geriye tam -5px kalır!
       Yani çubuğun KENDİSİ tam sıfırdan başlarken, UCU ana zeminden 5px solda doğar! */
    right: -19px; 
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 140%; /* Çubuktan bir miktar dışa/yukarı taşması dinamik hissettirir */
    background: url('bar-zemin-uc.png') center / contain no-repeat transparent;
    z-index: 10;
    pointer-events: none;
    opacity: 0; /* Bazen HTML'nin bu ucu yutmasını tamamen önlemek için display:none yerine bu güvenli hile kullanılır */
    transition: opacity 0.2s ease; /* Doğarken veya yok olurken anlık pürüzsüz yanıp/söner */
}
.progress-fill.running::after {
    opacity: 1; /* İlerleme barı aktif olduğu sürece kesin şekilde görünür yapılır */
}

/* ÇUBUK İÇİNDEKİ YAZI TASARIMI (Kullanıcı İsteği) */
.progress-text {
    position: absolute;
    top: 50%; 
    left: 12px; 
    transform: translateY(-50%);
    color: #ffeda2; 
    font-weight: 900;
    text-shadow: none; 
    
    /* Kullanıcı İsteği: Gelir çubuğunun içindeki devasa rakamlar asla ikiye bölünmez ve sığmazsa ufalır! */
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(0.45rem, 2.5vw, 0.65rem); 
    
    pointer-events: none;
    z-index: 20; 
}

.buy-button {
    width: 65px;
    height: 65px;
    background: url('kilic.png') center/100% 100% no-repeat transparent; /* Resim %100 kapsayacak şekilde zemine yayıldı */
    border: 3px solid #3d1c00; /* Geri kalan sınırları (köşeleri/kalınlığı) istendiği gibi korundu */
    border-radius: 8px;
    box-shadow: none; 
    cursor: pointer;
    display: block;
    transition: all 0.2s ease; /* Esneme animasyonu */
}
.buy-button:active {
    transform: translateY(3px);
    box-shadow: none;
}
.buy-button:disabled {
    filter: grayscale(100%); /* Pasif durumda doğrudan %100 Gri olur */
    opacity: 0.6;
    cursor: not-allowed;
}

/* SATIN ALINABİLİR (Aktif Mod) TASARIMI */
.is-affordable .buy-button {
    border-color: #5c1818;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.9); /* Dıştaki parlama değişmeden korundu */
    transform: scale(1.05); /* Seçilebilir (iri duran) kutu formu */
}
.is-affordable .buy-button:active {
    transform: scale(1) translateY(3px);
    /* Özel İstek: Tıklanınca Resmin Tonunun Bordo/Kan Kırmızısına Bürünesini Sağlayan Hile */
    filter: brightness(50%) sepia(100%) hue-rotate(335deg) saturate(500%);
}

/* Specific Ribbon exactly matching visual */
.ribbon-wood {
    position: absolute;
    bottom: -12px;
    left: 15px; 
    background-image: url('ulke-zemin.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 10px 4px 18px; /* Sol köşe resmi için 18px pay bırakılıp sağdan uzatıldı */
    min-width: 160px; /* Genişliği garantilemek için asgari ebat */
    border-radius: 0;
    color: #4a2b10; /* Kahverengi font */
    font-weight: 700; /* Basılabilir olmadığı anlarda normal incelik */
    font-size: 0.70rem; /* Daha küçük font */
    text-shadow: none; /* Gölgesiz düz isim */
    z-index: 5;
    display: flex;
    justify-content: flex-start; /* Yazı tamamen sola yaslandı */
    align-items: center;
    white-space: nowrap; /* Ülke isimleri iki satıra düşmesin */
    transition: all 0.2s ease;
}

/* SATIN ALINABİLİR - KALINLAŞMA (BOLD) EFEKTİ */
.is-affordable .ribbon-wood {
    font-weight: 900; /* Yazı BOLD oldu */
    font-size: 0.82rem; /* Seçilebilir olduğu anlaşılsın diye büyütüldü */
    color: #9c0000; /* Koyu seçilebilir kızıl tonu */
    text-shadow: 0 0 5px rgba(255,255,255,1); /* Okunurluğu artıran arkadan ince ışık/bembeyaz gölge */
}
.is-affordable .top-text {
    color: #9c0000; /* Fiyat metni de aktif moddayken kızıllaşıp vurgulanıyor */
    text-shadow: 0 0 4px rgba(255,255,255,0.7);
}

/* Bottom Nav */
.bottom-nav {
    position: absolute;
    /* Kullanıcı geri bildirimiyle Logo üzerine binen kısım 5px yukarı ötelenerek milimetrik hizalandı */
    bottom: 21px; 
    /* Butonların dış sütunların üzerine binmesini fiziksel olarak yasaklayan sınır (Duvar): */
    left: var(--side-padding-width); 
    right: var(--side-padding-width); 
    height: 80px;
    display: flex;
    justify-content: center; /* Ortaya kümelendir */
    gap: clamp(4px, 2vw, 15px); /* Aralarında boşluk var, sıkıştıkça azalıyor */
    align-items: center;
    background: transparent; 
    z-index: 20;
}

/* Bottom Logo Area */
.bottom-logo-container {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 34px;
    background: #111;
    background-image: radial-gradient(#333 15%, transparent 16%), radial-gradient(#333 15%, transparent 16%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
    border-top: none; /* Alt logonun üzerindeki çizgi de iptal edildi */
    box-shadow: none; /* Gölge iptal edildi */
}
.bottom-logo-container img {
    height: 100%;
    width: 100%;
    object-fit: fill;
}
.nav-btn {
    flex: 1 1 auto; /* Sığmazsa ezilmelerine (küçülmelerine) izin veriyoruz */
    max-width: 25%; /* Boşluklardan arta kalana tam otursunlar */
    max-height: 68px; /* Tavan yüksekliği (Eğer bol yer varsa max bu kadar irileşiler) */
    height: auto; 
    background: transparent;
    border: none;
    outline: none;
    border-radius: 0;
    box-shadow: none;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.1s ease;
}
.nav-btn img {
    max-width: 100%; /* Resim butonu yırtıp dışarı taşmasın */
    max-height: 100%; /* Orantılı küçülsün */
    width: auto;
    height: auto;
    object-fit: contain; /* En-boy oranı bozulmadan sığdırılır */
    pointer-events: none; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); /* Resmin ana hatlarına gölge */
    transition: filter 0.1s ease;
}
.nav-btn:active {
    transform: scale(0.92); /* Tıklayınca hafifçe küçülür */
}
.nav-btn:active img {
    /* Rengin daha koyu, kan kırmızısı/bordo tona dönmesi (Pembemsilik iptal edildi) */
    filter: brightness(50%) sepia(100%) hue-rotate(335deg) saturate(500%) drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}

/* Floating profits */
.floating-text {
    position: absolute;
    color: #4a2b10; /* Üst kısımdaki paranın birebir aynı kahve tonu */
    font-family: 'Poetsen One', sans-serif; /* Aynı Font */
    font-size: 1.15rem; /* İsteğinize uyarak hafifçe ufaltıldı */
    font-weight: 900;
    pointer-events: none;
    animation: floatUp 1.2s ease-out forwards;
    z-index: 50;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4); /* Siyah sınır çizgileri silindi, ana pardaki gibi sadece gölgesiz ince açık bir derinliği var */
}
@keyframes floatUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-45px); opacity: 0; }
}

#floating-texts {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 2000;
}
.coin-wrapper {
    position: absolute;
    z-index: 55;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);
}

.floating-coin {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ffecb3 0%, #ffd700 40%, #b8860b 100%);
    border: 0.8px solid #5d4037;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: coinSpin 0.4s linear infinite;
}

.floating-coin::after {
    content: '';
    width: 4px;
    height: 4px;
    border: 0.3px dashed rgba(0,0,0,0.2);
    border-radius: 50%;
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* v128: Fireworks (Havai Fişek Parçacıkları) */
.firework-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 10px currentColor;
}
.particle-anim {
    animation: particleMove 2.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes particleMove {
    0% { transform: translate(0, 0) scale(1.5); opacity: 1; }
    100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* Modals (Açılış Animasyonlu) */
.modal {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    z-index: 3000; /* v166: Uçuşan sikkelerin (2000) üzerinde kalması için yükseltildi */
    justify-content: center;
    align-items: center;
    padding: 20px;
    visibility: hidden;
    pointer-events: none;
    transition: background 0.35s ease, visibility 0.35s ease;
}
.modal.active { 
    visibility: visible; 
    background: rgba(0,0,0,0.8);
    pointer-events: auto;
}
.modal-content {
    background-image: url('zemin1.png');
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    border: 4px solid #5c3716;
    border-radius: 12px;
    width: 100%;
    height: auto; 
    max-height: 90dvh; /* v207: Genişletilmiş dikey alan korunuyor */
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* --- ANİMASYON SİHİRLERİ (Alttan Noktasal Patlama/Büyüme) --- */
    transform: scale(0.1) translateY(800px); 
    transform-origin: center bottom;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.25), opacity 0.35s ease;
}
.modal.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.modal-body {
    flex: 1; 
    overflow-y: auto; 
    min-height: 0; 
    margin: 15px 0; 
    padding: 0; /* Simetrik merkezleme için (v104) */
    scroll-behavior: smooth; 
}
.modal-body::-webkit-scrollbar { 
    width: 4px; 
}
.modal-body::-webkit-scrollbar-thumb { 
    background: rgba(92, 55, 22, 0.7); 
    border-radius: 4px; 
}

/* v207: Sadece Sultanımızın emrettiği özel modallarda gizlensin */
.no-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.close-btn {
    width: 100%; 
    height: 60px;
    margin-top: 5px; /* modal-body boşluğunu dengeler */
    background: transparent; /* Kırmızı renk temizlendi, resmin kendisi bırakıldı */
    border: none;
    outline: none;
    box-shadow: none;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.close-btn img {
    height: 100%;
    width: auto;
    object-fit: contain; /* En-boy koruma sigortası */
    pointer-events: none; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6)); 
    transition: filter 0.1s ease;
}
.close-btn:active {
    transform: scale(0.92); /* Tıklayınca küçülme (Yay) efekti */
}
.close-btn:active img {
    /* Kan kırmızı (basıldı) efekti tetiği */
    filter: brightness(50%) sepia(100%) hue-rotate(335deg) saturate(500%) drop-shadow(0 2px 3px rgba(0,0,0,0.8));
}

/* Modal (Yükseltmeler) Listesi Stilleri */
.manager-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 15px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 2px solid transparent;
    /* transition: all animasyonu iptal edilip, kayma/çökme animasyonlarına özel olarak ayrıştırıldı */
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease, 
                max-height 0.45s ease, 
                margin 0.45s ease, 
                padding 0.45s ease,
                background 0.2s ease,
                border-color 0.2s ease;
    max-height: 180px; /* CSS çökme animasyonu için tavan sigortası */
    overflow: hidden; /* Sinerken içindeki yazılar taşmasın diye */
}

/* Satın alındığında aşağı düşerek eriyen kilit sınıfı */
.manager-card.sliding-out {
    transform: translateY(120px) scale(0.9); /* Dibe doğru batma ivmesi */
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.mgr-title {
    font-size: 1.1rem;
    font-weight: 700; 
    color: #4a2b10;
    transition: all 0.2s ease;
}
.mgr-buy-btn {
    padding: 8px 14px; 
    font-weight: bold; 
    background: linear-gradient(to bottom, #d4ab73, #b88645); 
    border: 2px solid #5c3a21; 
    border-radius: 6px; 
    cursor: pointer;
    color: #3d1c00;
    transition: all 0.2s ease;
}
.mgr-buy-btn:disabled {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Seçilebilir/Alınabilir Yönetici Kartı Durumu */
.manager-card.mgr-affordable {
    background: rgba(156, 0, 0, 0.15); /* Hafif kızıl panel ışığı */
    border-color: #5c1818;
    box-shadow: inset 0 0 10px rgba(211, 47, 47, 0.3);
}
.manager-card.mgr-affordable .mgr-title {
    font-weight: 900; /* BAŞLIK BOLD OLUR */
    font-size: 1.2rem;
    color: #9c0000; /* Koyu kızıl tema */
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
}
.manager-card.mgr-affordable .mgr-buy-btn {
    background: linear-gradient(to bottom, #d32f2f, #9c0000); /* RENGİ FARKLI OLUR (Koyu Kızıl/Bordo) */
    border-color: #5c1818;
    color: #fff;
    box-shadow: 0 0 8px rgba(211,47,47,0.8);
    transform: scale(1.05); /* Tıklanabilir canlı his */
}
.manager-card.mgr-affordable .mgr-buy-btn:active {
    transform: scale(1);
}

/* PRELOADER SCREEN STYLING (v98) */
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #72b6f3;
    z-index: 10000; /* Her şeyin üstünde */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    text-align: center;
    width: 80%;
    max-width: 400px;
}

.preloader-logo {
    width: 200px;
    height: auto;
    margin-bottom: 40px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    animation: preloaderPulse 2s infinite ease-in-out;
}

@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.preloader-bar-container {
    width: 200px; /* Logo genişliği ile eşitlendi (v99) */
    margin: 0 auto; /* Merkeze hizala */
    height: 12px;
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
}

#preloader-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffd700, #ff9900);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255,165,0,0.5);
    transition: width 0.3s ease-out;
}

#preloader-percentage {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #fff;
    margin-top: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.preloader-status {
    font-family: 'Pirata One', cursive;
    color: rgba(255,255,255,0.8);
    font-size: 1rem;
    margin-top: 5px;
    letter-spacing: 1px;
}
/* --- NASIL OYNANIR (TUTORIAL) SİSTEMİ (v108) --- */
#tutorial-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 5000;
    display: none; /* JS ile açılacak */
    pointer-events: none; /* Arkadaki butonlara tıklanabilsin diye */
}

.tutorial-yeniceri {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 250px;
    height: 250px;
    background-image: url('yeniceri-tutorial-v2.png?v=118');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 5002;
    animation: tutorialBounce 2s infinite ease-in-out;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); /* Şıklık katsın diye hafif gölge (v118) */
}

.tutorial-bubble {
    position: absolute;
    bottom: 230px;
    right: 50px;
    background: white;
    padding: 15px 20px;
    border-radius: 20px;
    border: 3px solid #5c3716;
    color: #4a2b10;
    font-weight: bold;
    font-size: 1.1rem;
    max-width: 220px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    z-index: 5003;
    pointer-events: auto;
}

.tutorial-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 40px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: white transparent;
}

.tutorial-bubble::before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: 38px;
    border-width: 17px 17px 0;
    border-style: solid;
    border-color: #5c3716 transparent;
}

.tutorial-highlight {
    position: absolute;
    border: 4px solid #fbc02d;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.6), 0 0 15px #fbc02d;
    border-radius: 12px;
    z-index: 5001;
    pointer-events: none;
    transition: all 0.5s ease;
}

@keyframes tutorialBounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.tutorial-pointer {
    position: absolute;
    font-size: 3rem;
    color: #fbc02d;
    z-index: 5004;
    animation: pointerArrow 1s infinite;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

@keyframes pointerArrow {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.2) translateY(-10px); }
}