@media (max-width: 768px) {
    /* Pencereleri ekran genişliğine zorla */
	
	.stat-row.main-info {
        padding: 0 5px !important;
    }
    
    #stat-name {
        max-width: 120px; /* Mobilde ismin çok yer kaplamasını önler */
    }

    .stat-window {
        width: 95vw !important;
        max-height: 90vh;
        padding: 15px;
        overflow-y: auto; /* İçerik sığmazsa pencere içinde kaydır */
    }
	
	.inventory-window {
        /* 1. Genişliği telefon ekranına göre ayarla */
        width: 100% !important; 
        
        /* 2. Boyu otomatik bırak ama orantıyı zorla */
        height: auto !important; 
        aspect-ratio: 700 / 920 !important; 
        
        /* 3. Görselin basılmasını önle, kutuya tam sığdır */
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        
        padding: 0 !important;
    }

    /* 4. Slotları pencere küçüldüğü için orantılı olarak ufalt */
    .equip-slot, .bag-slot {
        width: 13.3% !important; /* Sabit px yerine ekran genişliğine göre (vw) */
        height: 10% !important; 
    }

    /* 5. Yazıları ve başlıkları mobilde okunabilir boyuta çek */
    .inventory-header h3 {
        font-size: 0.8rem !important;
        letter-spacing: 2px !important;
    }
	
	[data-i18n="inventory_title"] {
		top: 1.3%;    /* Yukarı-aşağı */
		left: 28%;    /* Sağ-sol (Çanta kısmının ortası) */
	}

	/* 2. Başlık: TAKILAR */
	[data-i18n="inventory_title2"] {
		top: 1.3%;    /* Aynı hizada tutmak için */
		left: 76.2%;    /* Sağ tarafa, takı slotlarının üzerine hizalar */
	}

    /* 6. Altın göstergesini yukarı kaydır (Mobilde barın üzerine binmemesi için) */
    .inventory-gold-display {
        bottom: 36.8% !important;
        left: 54% !important;
		font-size: 0.9rem !important;
    }
	
	#btn-close-inventory {
    position: absolute; 
	top: 1%;
    right: 1%;
	width: 5%; 
    height: 5%;
	}
	
	#inv-char-img {
    max-width: 120% !important; /* Kutunun genişliğini asla geçme */
    max-height: 150% !important; /* Kutunun yüksekliğini asla geçme */
    width: auto;
    height: auto;
    object-fit: contain; /* Oranını bozmadan sığdır */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
    /* Görselde karakter biraz aşağıda kalsın dersen: */
    margin-bottom: 30%;
    left: 20px;
	}
	
		/* KOORDİNATLAR (Görseldeki kutulara tam oturtmak için) */
	/* Üst Sıra (Küpeler) */
	.equip-slot[data-slot="earring1"] { top: 9%; left: 60%; }
	.equip-slot[data-slot="earring2"] { top: 9%; left: 78.8%; }

	/* Orta (Kolye) */
	.equip-slot[data-slot="necklace"] { top: 23%; left: 69.5%; }

	/* Alt Orta Sıra (Yüzükler) */
	.equip-slot[data-slot="ring1"] { top: 36.8%; left: 60%; }
	.equip-slot[data-slot="ring2"] { top: 36.8%; left: 78.8%; }

	/* En Alt (Kemer) */
	.equip-slot[data-slot="belt"] { top: 50.7%; left: 69.5%; }


	/* --- SLOT KOORDİNAT KONTROL PANELİ --- */
	/* left: sağ-sol | top: yukarı-aşağı */

	/* Üst Satır (0, 1, 2, 3) */
	.bag-slot[data-index="0"] { top: 71.3%; left: 11.1%; }
	.bag-slot[data-index="1"] { top: 71.3%; left: 32.5%; }
	.bag-slot[data-index="2"] { top: 71.3%; left: 54.2%; }
	.bag-slot[data-index="3"] { top: 71.3%; left: 75.7%; }

	/* Alt Satır (4, 5, 6, 7) */
	.bag-slot[data-index="4"] { top: 84.8%; left: 11.8%; }
	.bag-slot[data-index="5"] { top: 84.8%; left: 32.5%; }
	.bag-slot[data-index="6"] { top: 84.8%; left: 54.2%; }
	.bag-slot[data-index="7"] { top: 84.8%; left: 75.7%; }
	
	.brooch-overlay { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 90px; z-index: 10; }
	.brooch-slot { width: 26px !important; height: 26px !important; background-color: rgba(0, 0, 0, 0.7); border: 1px solid #6b5c3b; border-radius: 4px; }
	.brooch-slot {position: relative !important;}
	.item-slot img {
    /* 1. Resmin oranını bozmadan sığdırır (Basılmayı önler) */
    object-fit: contain !important; 
	}
	/* ============================================================
   EXPANDED ENVANTER (I) - NİHAİ YERLEŞİM
   ============================================================ */
	.expanded-inventory .brooch-overlay { position: absolute; top: 46%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 90px; z-index: 10; }
	.expanded-inventory .brooch-slot { width: 26px !important; height: 26px !important; background-color: rgba(0, 0, 0, 0.7); border: 1px solid #6b5c3b; border-radius: 4px; }
	.expanded-inventory .brooch-slot {position: relative !important;}
	/* 1. Başlık: ENVANTER */
.expanded-inventory [data-i18n="inventory_title"] {
    top: 0.8%;    /* Yukarı-aşağı */
    left: 30%;    /* Sağ-sol (Çanta kısmının ortası) */
}

/* 2. Başlık: TAKILAR */
.expanded-inventory [data-i18n="inventory_title2"] {
    top: 0.8%;    /* Aynı hizada tutmak için */
    left: 73.2%;    /* Sağ tarafa, takı slotlarının üzerine hizalar */
}

/* 1. KAPATMA BUTONU ÖZEL AYARI */
.expanded-inventory #btn-close-inventory {
    position: absolute; 
	top: 0%;
    right: 6%;
	width: 5%; 
    height: 5%;
}

/* --- SOL TARAF: KARAKTER ALANI DÜZELTMESİ --- */
.expanded-inventory .paper-doll-left {
    position: absolute;
    /* Görseldeki siyah kutunun koordinatları (Tahmini, oynaman gerekebilir) */
    top: -24.2%;   
    left: -15%;
    /* Çerçevenin iç genişliği ve yüksekliği */
    width: 350px !important; 
    height: 480px !important;
}

.expanded-inventory .char-preview-box {
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: none !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Karakterin ayaklarını kutunun dibine yaslar */
    overflow: hidden; /* Karakter kutudan taşmasın */
}

/* KARAKTER RESMİ: Kutu ne kadarsa o kadar olur, devleşmez */
.expanded-inventory #inv-char-img {
    max-width: 60% !important; /* Kutunun genişliğini asla geçme */
    max-height: 150% !important; /* Kutunun yüksekliğini asla geçme */
    width: auto;
    height: auto;
    object-fit: contain; /* Oranını bozmadan sığdır */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
    /* Görselde karakter biraz aşağıda kalsın dersen: */
    margin-bottom: 30%;
    left: 20px;
}

/* ALTIN GÖSTERGESİ: Karakterin altındaki süslü barın tam ortasına */
.expanded-inventory .inventory-gold-display {
    position: absolute !important;
    bottom: 7% !important;
    left: 73% !important;
	font-size: 0.8rem !important;
}

.expanded-inventory .equip-slot {
    position: absolute !important; /* Koordinat sistemini aktif eder */
    width: 12% !important; 
    height: 9% !important;
    background: transparent !important;
    border: none !important;
    z-index: 100 !important; /* En üst katmana çıkar, tıklanabilir yapar */
    pointer-events: auto !important; /* Tıklanma kilidini açar */
}
.expanded-inventory .bag-slot {
    position: absolute !important; /* Koordinat sistemini aktif eder */
    width: 12% !important; 
    height: 9% !important;
    background: transparent !important;
    border: none !important;
    z-index: 100 !important; /* En üst katmana çıkar, tıklanabilir yapar */
    pointer-events: auto !important; /* Tıklanma kilidini açar */
}

/* KOORDİNATLAR (Görseldeki kutulara tam oturtmak için) */
/* Üst Sıra (Küpeler) */
.expanded-inventory .equip-slot[data-slot="earring1"] { top: 8%; left: 59.3%; }
.expanded-inventory .equip-slot[data-slot="earring2"] { top: 8%; left: 75.6%; }

/* Orta (Kolye) */
.expanded-inventory .equip-slot[data-slot="necklace"] { top: 20.5%; left: 67.4%; }

/* Alt Orta Sıra (Yüzükler) */
.expanded-inventory .equip-slot[data-slot="ring1"] { top: 32.8%; left: 59.3%; }
.expanded-inventory .equip-slot[data-slot="ring2"] { top: 32.8%; left: 75.6%; }

/* En Alt (Kemer) */
.expanded-inventory .equip-slot[data-slot="belt"] { top: 45.2%; left: 67.4%; }


/* --- SLOT KOORDİNAT KONTROL PANELİ --- */
/* left: sağ-sol | top: yukarı-aşağı */

/* Üst Satır (0, 1, 2, 3) */
.expanded-inventory .bag-slot[data-index="0"] { top: 63%; left: 15.4%; }
.expanded-inventory .bag-slot[data-index="1"] { top: 63%; left: 34.5%; }
.expanded-inventory .bag-slot[data-index="2"] { top: 63%; left: 53.7%; }
.expanded-inventory .bag-slot[data-index="3"] { top: 63%; left: 72.9%; }

/* Alt Satır (4, 5, 6, 7) */
.expanded-inventory .bag-slot[data-index="4"] { top: 74.8%; left: 15.4%; }
.expanded-inventory .bag-slot[data-index="5"] { top: 74.8%; left: 34.5%; }
.expanded-inventory .bag-slot[data-index="6"] { top: 74.8%; left: 53.7%; }
.expanded-inventory .bag-slot[data-index="7"] { top: 74.8%; left: 72.9%; }

/* --- EKSTRA SLOTLAR (Sadece 10'lu bar açıldığında görünürler) --- */
/* Bu slotlar sadece inventory.length 10 olduğunda JS ile yaratılır */
.expanded-inventory .bag-slot[data-index="8"] { top: 86.7%; left: 15.4%; }
.expanded-inventory .bag-slot[data-index="9"] { top: 86.7%; left: 34.5%; }

	.item-tooltip {
        position: fixed !important;
        top: 15% !important; /* Biraz daha yukarı aldık */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 85vw !important;
        z-index: 10000 !important;
        /* Tıklamayı geçirmeli ki oyuncu boşluğa basıp kapatabilsin */
        pointer-events: none !important; 
        background: rgba(15, 10, 5, 0.98) !important;
        border: 2px solid #ffd700 !important;
    }


    /* Tooltip açıkken herhangi bir yere dokunulursa kapansın diye 
       görünmez bir overlay ekleyebiliriz ama şimdilik manuel kapatma için: */
    .item-tooltip::after {
        content: "✕";
        position: absolute;
        top: 5px; right: 10px;
        color: #ff4d4d;
        font-weight: bold;
    }

    /* ENVANTER (I): Karakteri ve Slotları alt alta al */
    .inventory-content {
        flex-direction: column;
        gap: 15px;
    }

    .char-preview-box {
        width: 200px; /* Mobilde biraz küçült */
        height: 300px;
        min-width: 200px;
    }

    /* Çanta Slotlarını Mobilde 4 yerine 3 veya 4 (ekrana göre) sığdır */
    .bag-grid {
        grid-template-columns: repeat(4, 55px);
        padding: 10px;
    }

    /* STAT (U): Statları ve Dirençleri tek sütun yapabilirsin (isteğe bağlı) */
    .stat-grid {
        grid-template-columns: 1fr; /* Mobilde statlar alt alta */
        gap: 8px;
    }

    .res-grid {
        grid-template-columns: repeat(2, 1fr); /* Dirençler 2 sütun */
    }
 /* 1. ANA PENCERE: Oranı Koru, Basılmayı Engelle */
    .skill-book-window {
        width: 100% !important; /* Ekranın %95'i */
        height: auto !important; 
        aspect-ratio: 891 / 1021 !important; /* Görselin orijinal en-boy oranı */
        background-size: contain !important; /* Görseli kutuya tam sığdır, basma yapmaz */
        background-repeat: no-repeat !important;
        background-position: center !important;
        padding: 0 !important; /* İç boşluğu sıfırla ki koordinatlar şaşmasın */
        display: block !important; /* Absolute çocukları için ana merkez yap */
        position: relative !important;
        margin: auto;
        overflow: hidden;
    }

    /* 2. BAŞLIK VE PUANLAR: Oransal Yerleşim */
    .skill-book-header { top: 6.1% !important; }
    .skill-book-header h2 { font-size: 0.8rem !important; letter-spacing: 2px !important; }
    .skill-points-box { top: 16.5% !important; font-size: 0.75rem !important; width: 100% !important; }

    /* 3. TAB BUTONLARI: Yerlerini % ile Sabitle */
    .skill-tabs {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        display: block !important; /* Flex'i bozup serbest bırakıyoruz */
        gap: 0 !important; margin: 0 !important;
        pointer-events: none;
    }

    .tab-btn {
        position: absolute !important;
        pointer-events: auto;
        font-size: 0.55rem !important; /* Mobilde yazılar küçülmeli */
        padding: 2px 4px !important;
        letter-spacing: 0px !important;
        min-width: 18% !important; /* Buton genişliğini ekranın %18'i yap */
        text-align: center;
        background: transparent !important;
    }

    /* Tabların Görsel Üzerindeki Yerleri */
    .tab-btn:nth-child(1) { top: 16%; left: 21.5%; }
    .tab-btn:nth-child(2) { top: 16%; left: 39%; }
    .tab-btn:nth-child(3) { top: 16%; left: 56%; }
    .tab-btn:nth-child(4) { top: 16%; left: 73.5%; }

    /* 4. SKILL LIST (ORTA ALAN): % Değerlerle Pencereye Yay */
    .skill-list-container {
        position: absolute !important;
        top: 31% !important;
        left: 14.7% !important;
        width: 71% !important; /* Sağdan soldan eşit boşluk */
        height: 40% !important; /* Alt barın üzerine binmesini engeller */
        padding: 5px !important;
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        scrollbar-width: none;
		touch-action: pan-y !important; 
        -webkit-overflow-scrolling: touch; /* iOS cihazlarda akıcı kaydırma sağlar */
    }

    /* Skill Kartları İçeriği */
    .skill-book-item {
        width: 100% !important;
        padding: 6px !important;
        gap: 8px !important;
        margin-bottom: 5px !important;
        flex-direction: row;
        align-items: center !important;
		touch-action: pan-y !important; 
        /* Kart içindeki metinlerin parmakla seçilip kaydırmayı durdurmasını engeller */
        user-select: none !important; 
        -webkit-user-select: none;
    }

    .skill-book-icon {
        width: 35px !important;
        height: 35px !important;
    }

	.skill-info h4 { font-size: 0.6rem !important; margin-bottom: 2px !important; white-space: nowrap !important;}
    .skill-info p { font-size: 0.55rem !important; line-height: 1.1 !important; }
    .skill-book-item small { font-size: 0.5rem !important; margin-bottom: 2px !important; white-space: nowrap !important;}
	.skill-info, .skill-info h4, .skill-info p { pointer-events: none !important; }

    /* SKILL AÇMA BUTONU: Boyutu Özelleştirildi */
    .btn-learn-skill {
        font-size: 0.55rem !important;
        padding: 3px 6px !important;
        min-width: 40px !important;
        height: auto !important;
		pointer-events: auto !important;
        touch-action: auto !important;
    }

    .hint-text {
        font-size: 0.5rem !important;
        line-height: 1.2 !important;
        margin: 2px 0 8px 0 !important;
        opacity: 0.6;
        text-align: center;
        width: 100%;
        display: block;
    }

    /* 5. ALT BAŞLIK */
    .equipped-area-title {
        position: absolute !important;
        bottom: 17.5% !important;
        font-size: 0.7rem !important;
        width: 100%;
    }

    /* 6. KUŞANILAN SKILL BARI: % ile Çivi Gibi Çak */
    #skill-book-equipped-bar {
        position: absolute !important;
        display: block !important; /* Flex'i bozuyoruz */
        width: 100% !important; height: 100% !important;
        top: 0 !important; left: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        pointer-events: none;
    }
	
	#skill-book-equipped-bar .menu-slot img {
    /* 1. Resmin oranını bozmadan kutuya sığdır (Yayılmayı ve piksellenmeyi önler) */
    object-fit: contain !important; 
	}

    #skill-book-equipped-bar .menu-slot {
        position: absolute !important;
        pointer-events: auto;
        /* Pencerenin genişliğine göre % olarak boyut */
        width: 10.5% !important; 
        height: 20% !important; 
        background: rgba(0,0,0,0.3) !important;
        border-width: 1px !important;
    }

    /* Alt Slotların Tek Tek Konumları */
    #skill-book-equipped-bar .menu-slot:nth-child(1) { bottom: 12.8%; left: 7.5%; }
    #skill-book-equipped-bar .menu-slot:nth-child(2) { bottom: 12.8%; left: 22.4%; }
    #skill-book-equipped-bar .menu-slot:nth-child(3) { bottom: 12.8%; left: 37.5%; }
    #skill-book-equipped-bar .menu-slot:nth-child(4) { bottom: 12.8%; left: 52.5%; }
    #skill-book-equipped-bar .menu-slot:nth-child(5) { bottom: 12.8%; left: 67.4%; }
    #skill-book-equipped-bar .menu-slot:nth-child(6) { bottom: 12.8%; left: 82.4%; }

    /* Expanded (7'li) Slot Desteği */
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(1) { bottom: 12.8%; left: 5.5%; }
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(2) { bottom: 12.8%; left: 18.5%; }
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(3) { bottom: 12.8%; left: 31.5%; }
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(4) { bottom: 12.8%; left: 44.6%; }
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(5) { bottom: 12.8%; left: 57.8%; }
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(6) { bottom: 12.8%; left: 70.7%; }
    .expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(7) { bottom: 12.8%; left: 84%; }


/* 1. YETENEK KARTLARININ ÜZERİNDEKİ TIER ROZETLERİ (T1, T2 vb.) */
    .tier-badge {
        font-size: 0.45rem !important; /* Çok daha küçük bir font */
        padding: 1px 3px !important;   /* İç boşluğu daralt */
        min-width: 15px !important;    /* Rozetin genişliğini sınırla */
        height: auto !important;
        border-width: 1px !important;  /* Çerçeveyi incelt */
        bottom: 0 !important;          /* İkonun tam köşesine yapıştır */
        right: 0 !important;
    }

    /* 2. LİSTEDEKİ YORGUNLUK METNİ (Kartın altındaki "Yorgunluk: +3" yazısı) */
    /* .skill-info içindeki özel yorgunluk divini hedefliyoruz */
    .skill-info div[style*="color:#ffae00"] {
        font-size: 0.55rem !important; /* Küçük ve zarif bir boyut */
        margin-top: 2px !important;    /* Üstteki açıklama metniyle arayı daralt */
        letter-spacing: 0.5px !important;
    }
	
	/* Eşya İsmi */
    .tooltip-name {
        font-size: 0.9rem !important; /* 1.2rem'den 0.9'a indi */
        margin-bottom: 2px !important;
        letter-spacing: 0.5px !important;
    }

    /* Seviye/Tier Yazısı */
    .tooltip-tier {
        font-size: 0.65rem !important;
        margin-bottom: 4px !important;
    }

    /* Ayırıcı Çizgi */
    .stat-separator {
        margin: 4px 0 !important;
    }

    /* Stat Satırları (Str, Dex vb.) */
    .tooltip-stat-row {
        font-size: 0.7rem !important; /* Yazıları küçülttük */
        line-height: 1.2 !important;
        gap: 10px !important;
    }

    /* Stat Değerleri (Rakamlar) */
    .tooltip-val {
        font-size: 0.75rem !important;
    }

    /* Set Bonus Kutusu (Eğer varsa) */
    .set-info-box {
        padding: 5px !important;
        margin-bottom: 6px !important;
    }

    .set-header {
        font-size: 0.6rem !important;
    }

    .set-bonus-text {
        font-size: 0.55rem !important;
    }

    /* Broş uzmanlık metni */
    .item-tooltip .brooch-specialty-text {
        font-size: 8px !important;
        padding: 3px !important;
        margin-bottom: 5px !important;
    }
}