/* ============================================================
   KARAKTER PANELİ GENEL YAPILANDIRMASI (U, I, K)
   ============================================================ */
#skill-book-screen, #stat-screen, #inventory-screen {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); 
    z-index: 3000;
    display: none; 
    justify-content: center; 
    align-items: center;
}

#skill-book-screen:not(.hidden), 
#stat-screen:not(.hidden), 
#inventory-screen:not(.hidden) { 
    display: flex !important; 
}

.stat-window, .skill-book-window, .inventory-window {
    background-color: #2b2b2b;
    border: 4px solid #6b5c3b;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.95);
    padding: 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f0e68c;
}

/* X ÇIKIŞ BUTONU */
#btn-close-skill-book, #close-stat-screen {
    position: absolute; 
    top: 12px; 
    right: 12px;
    background: linear-gradient(to bottom, #8b0000, #5a0000); 
    border: 1px solid #ff4d4d; 
    color: #fff;
    width: 32px; 
    height: 32px; 
    cursor: pointer; 
    font-weight: bold;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 100;
    border-radius: 4px;
    box-shadow: 0 2px 5px #000;
}

#info-popup-content strong {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}

#info-popup-content span {
    color: #ccc;
    font-style: italic;
}

/* ============================================================
   STAT EKRANI (U) - DÜZELTİLMİŞ FONT VE RENK DÜZENİ
   ============================================================ */
.stat-row.main-info {
    display: flex !important;
    justify-content: space-between !important; /* İsmi sola, Level'ı sağa yaslar */
    align-items: baseline !important; /* Yazıların alt çizgisini hizalar */
    width: 100%;
    margin-bottom: 15px;
    flex-wrap: nowrap !important; /* Kesinlikle alt satıra geçme kuralı */
}

.stat-window {
    width: 610px;
    max-height: 85vh;
    overflow-y: auto;
	/* IE ve Edge için */
    -ms-overflow-style: none;  
    /* Firefox için */
    scrollbar-width: none;  
    background: linear-gradient(180deg, #2b2b2b 0%, #151515 100%) !important;
}
.stat-window::-webkit-scrollbar {
    display: none;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #6b5c3b;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.stat-window h2 { 
    margin: 0; 
    color: #f0e68c; 
    font-size: 1.5em; 
    text-align: center;
    flex-grow: 1; /* Başlığı ortalar */
}

/* Nickname ve Level Satırı */
.stat-main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 5px;
    margin-bottom: 5px;
}
.stat-name-group { display: flex; align-items: baseline; gap: 8px; overflow: hidden;}
#stat-name { font-family: 'Cinzel', serif; text-transform: uppercase; color: #ffd700; font-size: 1.3em; font-weight: bold; text-shadow: 2px 2px 4px #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#stat-class { font-family: 'Cinzel', serif; text-transform: uppercase; color: #ffffff !important; font-size: 0.85em; margin-left: 5px; font-weight: normal; }
#stat-level { font-family: 'Cinzel', serif; text-transform: uppercase; color: #ffd700; font-weight: bold; font-size: 1.2em; white-space: nowrap !important; flex-shrink: 0 !important; margin-left: 10px !important; }

/* XP BARI */
.xp-bar-container { position: relative; width: 100%; height: 24px; background-color: #111; border: 1px solid #555; border-radius: 12px; margin-top: 5px; overflow: hidden; box-shadow: inset 0 0 8px #000; }
.xp-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #6a0dad, #9b59b6); box-shadow: 0 0 10px #9b59b6; transition: width 0.4s; }
.xp-bar-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 0.85em; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; z-index: 2; }

/* DAĞITILABİLİR PUAN */
.stat-points-box {
    margin-top: 15px; padding-top: 15px; border-top: 1px solid #6b5c3b;
    text-align: center; font-weight: bold; color: #f0e68c; font-size: 1.1em;
}

.stat-separator { border: 0; height: 1px; width: 100%; margin: 12px 0; background: linear-gradient(to right, transparent, #6b5c3b, transparent); }

/* Exhaust */
.exhaustion-horizontal-bg {
    background-color: #111 !important;
    position: relative;
    width: 100%; /* Kapsayıcı tam genişlikte olsun */
    height: 14px;
    border-radius: 12px;
    border: 1px solid #555;
    overflow: hidden;
}

/* Yatay dolgu barları için özel kural */
.exhaustion-horizontal-bg .exhaust-fill-sari, 
.exhaustion-horizontal-bg .exhaust-fill-mor {
    height: 100% !important;
    top: 0;
    /* KRİTİK: Sola yaslanmayı ve genişlemeyi burada zorla */
    left: 0 !important; 
    transform: none !important; 
    bottom: auto !important; /* Dikeyden gelen bottom kuralını iptal et */
}

.stat-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Ortak Dolgu Sınıfları (Hem dikey hem yatay uyumlu) */
.exhaust-fill-sari, .exhaust-fill-mor {
    position: absolute;
    bottom: 0;
    left: 0;
    /* Başlangıçta 0 yapıyoruz, JS ile dolacak */
    width: 0%; 
    height: 0%;
    transition: width 0.3s ease-out, height 0.3s ease-out;
}

.exhaust-fill-sari {
    background: linear-gradient(to right, #ffd700, #ffae00);
    z-index: 1;
}

.exhaust-fill-mor {
    background: linear-gradient(to right, #6a0dad, #9b59b6);
    box-shadow: 0 0 10px #9b59b6;
    z-index: 2; /* Sarının üzerine biner */
}

#stat-exhaustion-text {
    font-size: 0.7rem;
    margin-top: 2px;
    font-family: 'Cinzel', serif;
}

/* SALDIRI / DEFANS TABLARI (Font Boyutu Düzeltildi) */
.combat-stats-row { display: flex; justify-content: space-between; gap: 20px; margin: 15px 0; }
.c-stat {
    flex: 1;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #444;
    box-shadow: inset 0 0 10px #000;
    font-weight: bold;
    padding: 8px; /* İç boşluğu azalttık */
    font-size: 0.9rem; /* Yazıyı hafif küçülttük */
}
.c-stat:first-child { background: linear-gradient(145deg, #2a0a0a, #100505); border-color: #8b0000; }
.c-stat:last-child { background: linear-gradient(145deg, #0a1a2a, #050a10); border-color: #004d8b; }

/* Değerlerin Font Boyutu (1.6'dan 1.3'e çekildi) */
.c-stat span { 
    display: block; 
    font-size: 1.3em; /* Değişiklik geldiğinde devleşmemesi için küçültüldü */
    margin-top: 5px; 
	font-family: 'Cinzel', serif; text-transform: uppercase;
}

/* ANA STATLAR (Değişiklik geldiğinde fontun sabit kalması için inherit eklendi) */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.stat-item { background: rgba(0,0,0,0.2); padding: 10px 5px; border: 1px solid #3e3221; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.stat-val-group { display: flex; align-items: center; gap: 10px; /* Sayı ile buton arasındaki boşluk */ min-width: 60px; /* Değerlerin genişliğini sabitlemek kaymayı önler */ justify-content: flex-end; flex-shrink: 0;}


#stat-str, #stat-dex, #stat-int, #stat-vit, #stat-mp, #stat-level-val {
    color: #ffd700; 
    font-weight: 900; 
    font-size: 1.1em; /* Sabit boyut */
    text-shadow: 1px 1px 0px #3e3221;
	display: inline-flex !important; /* İçindekileri (sayı ve bonus) yan yana diz */
    align-items: baseline;           /* Taban çizgisine göre hizala */
    gap: 6px;                        /* Sayı ile (+3) arasındaki boşluk */
    white-space: nowrap !important;  /* Alt satıra geçmeyi kesinlikle yasakla */
}

.stat-item label, .res-item label {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #a89373; /* Pirinç rengi */
	flex: 1; /* İsim alabileceği kadar alanı alsın */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Çok uzunsa (nadiren) sığmayan yeri üç nokta yapar */
    margin-right: 10px;
}

/* Renkli Spanların (Buff/Debuff) boyutunu ana yazıya eşitle */
.stat-item span span, .c-stat span span {
    font-size: 0.85em !important;    /* Parantez içini hafif küçültmek hizada tutmayı kolaylaştırır */
    display: inline-block;
    font-weight: inherit !important;
}

.btn-stat-plus { margin-left: 8px; background-color:#145a32; border: 1px solid #145a32; color: white; padding: 10px 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; text-transform: uppercase; font-weight: bold; font-family: 'Georgia', serif;}
.btn-stat-plus:hover:not(:disabled) { background-color: #145a00; filter: brightness(1.1); }

/* DİRENÇLER */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 5px; margin-top: 15px; }
.res-item { background: rgba(0,0,0,0.2); border: 1px solid #3e3221; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 0 5px #000; }
.res-item label { font-size: 0.75em; color: #888; margin-bottom: 2px; }
.res-item span:last-child { color: #ffd700; font-weight: bold; text-shadow: 1px 1px 0px #3e3221; font-size: 0.95em; }

.stat-footer { display: none; }

/* ============================================================
   ENVANTER (I) - NİHAİ YERLEŞİM
   ============================================================ */
.brooch-overlay { position: absolute; top: 19%; left: 36%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 90px; z-index: 10; }
.brooch-slot { width: 60px !important; height: 60px !important; background-color: rgba(0, 0, 0, 0.7); border: 1px solid #6b5c3b; border-radius: 4px; }
.brooch-slot {position: relative !important;}

/* --- ENVANTER ANA PENCERE (GÖRSEL GİYDİRME) --- */
.inventory-window {
    width: 700px !important; 
    height: 920px !important; 
    background-image: url('../images/ui/inventory.webp');
    background-size: 100% 100% !important;
    position: relative !important; /* Tüm evlatlar buraya göre dizilecek */
    display: block !important;
    padding: 0 !important;
    border: none !important;
	background-color: transparent !important; /* Gri arka planı siler */
    box-shadow: none !important;            /* Eğer varsa dış gölgeyi siler */
}

.inventory-content, 
.inventory-bag-area, 
.bag-grid,
.paper-doll-right {
    display: contents !important;
}

/* --- ENVANTER YAZISI VE ÇİZGİSİ (HEADER) --- */
.inventory-header {
    display: contents !important; /* İçindeki h3'lerin bağımsız hareket etmesini sağlar */
}

.inventory-header h3 {
    margin: 0 !important;
    font-size: 1.3rem;
    color: #f0e68c;
    letter-spacing: 5px;
    text-shadow: 2px 2px 4px #000;
}

/* 1. Başlık: ENVANTER */
[data-i18n="inventory_title"] {
    position: absolute !important;
    top: 1.1%;    /* Yukarı-aşağı */
    left: 28%;    /* Sağ-sol (Çanta kısmının ortası) */
    transform: translateX(-50%);
    margin: 0;
    font-size: 1.3rem;
    color: #f0e68c;
    letter-spacing: 5px;
    text-shadow: 2px 2px 4px #000;
    z-index: 10;
}

/* 2. Başlık: TAKILAR */
[data-i18n="inventory_title2"] {
    position: absolute !important;
    top: 1.1%;    /* Aynı hizada tutmak için */
    left: 76.4%;    /* Sağ tarafa, takı slotlarının üzerine hizalar */
    transform: translateX(-50%);
    margin: 0;
    font-size: 1.1rem; /* İstersen biraz daha küçük yapabilirsin */
    color: #f0e68c;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px #000;
    z-index: 10;
}

/* 1. KAPATMA BUTONU ÖZEL AYARI */
#btn-close-inventory {
    position: absolute; 
	top: 1%;
    right: 1%;
    background: linear-gradient(to bottom, #8b0000, #5a0000); 
    border: 1px solid #ff4d4d; 
    color: #fff;
    width: 32px; 
    height: 32px; 
    cursor: pointer; 
    font-weight: bold;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 100;
    border-radius: 4px;
    box-shadow: 0 2px 5px #000;
}

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

}

.char-preview-box {
    width: 105%;
    height: 105%;
    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 */
#inv-char-img {
    max-width: 110% !important; /* Kutunun genişliğini asla geçme */
    max-height: 110% !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 */
.inventory-gold-display {
    position: absolute !important;
    bottom: -10.2%; /* Karakter kutusunun 80px altına (barın üstüne) indirir */
    left: 95%;
    transform: translateX(-50%);
    width: 180px !important;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    border: none !important;
}

/* --- TAKI SLOTLARI (DİKEY HAREKET SORUNU ÇÖZÜLDÜ) --- */
.equip-slot, .bag-slot {
    position: absolute !important; /* Koordinat sistemini aktif eder */
    width: 95px !important; 
    height: 95px !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) */
.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: 51%; 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: 10.8%; }
.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: 10.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%; }

/* --- 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 */
.bag-slot[data-index="8"] { top: 72.5%; left: 64.6%; }
.bag-slot[data-index="9"] { top: 86.2%; left: 64.6%; }

/* ============================================================
   EXPANDED ENVANTER (I) - NİHAİ YERLEŞİM
   ============================================================ */
   .inventory-window.expanded-inventory {
    background-image: url('../images/ui/inventoryplus.webp') !important; /* Yetenekle açılan 10'lu */
}
	/* 1. Başlık: ENVANTER */
.expanded-inventory [data-i18n="inventory_title"] {
    top: 0.8%;    /* Yukarı-aşağı */
    left: 28%;    /* 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: 76.4%;    /* Sağ tarafa, takı slotlarının üzerine hizalar */
}

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

/* --- SOL TARAF: KARAKTER ALANI DÜZELTMESİ --- */
.expanded-inventory .paper-doll-left {
    position: absolute;
    /* Görseldeki siyah kutunun koordinatları (Tahmini, oynaman gerekebilir) */
    top: 8.5%;   
    left: 2.5%;
    /* Ç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: 110% !important; /* Kutunun genişliğini asla geçme */
    max-height: 110% !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: -1.2%; /* Karakter kutusunun 80px altına (barın üstüne) indirir */
    left: 95%;
    transform: translateX(-50%);
    width: 180px !important;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    border: none !important;
}

.expanded-inventory .equip-slot {
    position: absolute !important; /* Koordinat sistemini aktif eder */
    width: 95px !important; 
    height: 85px !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: 95px !important; 
    height: 85px !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 .item-slot img {
    /* 1. Resmin oranını bozmadan sığdırır (Basılmayı önler) */
    object-fit: contain !important; 
}

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

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

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

/* En Alt (Kemer) */
.expanded-inventory .equip-slot[data-slot="belt"] { top: 45%; left: 69.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: 62.9%; left: 10.8%; }
.expanded-inventory .bag-slot[data-index="1"] { top: 62.9%; left: 32.5%; }
.expanded-inventory .bag-slot[data-index="2"] { top: 62.9%; left: 54.2%; }
.expanded-inventory .bag-slot[data-index="3"] { top: 62.9%; left: 75.9%; }

/* Alt Satır (4, 5, 6, 7) */
.expanded-inventory .bag-slot[data-index="4"] { top: 74.8%; left: 10.8%; }
.expanded-inventory .bag-slot[data-index="5"] { top: 74.8%; left: 32.5%; }
.expanded-inventory .bag-slot[data-index="6"] { top: 74.8%; left: 54.2%; }
.expanded-inventory .bag-slot[data-index="7"] { top: 74.8%; left: 75.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: 10.8%; }
.expanded-inventory .bag-slot[data-index="9"] { top: 86.7%; left: 32.5%; }



/* Craft Materyali için özel Badge rengi (Metalik Gri/Mavi) */
.badge-craft { 
    background: rgba(45, 62, 80, 0.9) !important; 
    border: 1px solid #7f8c8d !important; 
    color: #ecf0f1 !important;
}

.tier-craft { color: #888 !important; } /* Materyal yazı rengi gri */

.item-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.75em;
    background: #2ecc71; /* Yeşil renkli miktar yazısı */
    color: white;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    z-index: 6;
    pointer-events: none;
    border: 1px solid rgba(0,0,0,0.5);
}

.item-tier-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 0.65em;
    background: rgba(0, 0, 0, 0.7);
    color: #ffd700;
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none; /* Tıklamayı engellemesin */
    z-index: 5;
	font-family: 'Cinzel', serif;
    font-weight: 900;
}

/* Broş slotu içindeki Tier rozeti özel ayarı */
.brooch-slot .item-tier-badge {
    font-size: 0.5rem !important;
    padding: 0px 2px !important;
    height: 12px !important;
    line-height: 12px !important;
    min-width: 15px !important;
    bottom: 0 !important;
    right: 0 !important;
}

/* İkonun kendisini biraz daha belirgin yapalım */
.brooch-slot img {
    width: 130% !important;
    height: 130% !important;
    filter: drop-shadow(0 0 2px #000);
}

/* Tier Renk Tanımlamaları */
.tier-1 { color: #dcdcdc !important; }
.tier-2 { color: #43ff64 !important; }
.tier-3 { color: #3498db !important; }
.tier-4 { color: #9b59b6 !important; }
.tier-5 { color: #ff9800 !important; }

/* Badge (Küçük Etiket) Arka Planları */
.badge-1 { background: rgba(100, 100, 100, 0.85) !important; border: 1px solid #dcdcdc; }
.badge-2 { background: rgba(20, 100, 20, 0.85) !important; border: 1px solid #43ff64; }
.badge-3 { background: rgba(0, 50, 100, 0.85) !important; border: 1px solid #3498db; }
.badge-4 { background: rgba(60, 0, 100, 0.85) !important; border: 1px solid #9b59b6; }
.badge-5 { background: rgba(120, 60, 0, 0.85) !important; border: 1px solid #ff9800; box-shadow: 0 0 5px #ff9800; }

/* Eşya Slot Çerçeveleri (Opsiyonel: İstersen slotun kenarı da parlar) */
.border-tier-4 { border-color: #9b59b6 !important; }
.border-tier-5 { border-color: #ff9800 !important; box-shadow: inset 0 0 10px rgba(255, 152, 0, 0.3) !important; }

/* ============================================================
   YETENEK KİTABI (K) - NİHAİ GÖRSEL VE MANTIK ENTEGRASYONU
   ============================================================ */

/* 1. ANA PENCERE: Boyut ve Arka Plan */
.skill-book-window {
    width: 891px !important;
    height: 1021px !important;
    background-image: url('../images/ui/skillbook.webp') !important;
    background-size: 100% 100% !important;
    background-color: transparent !important;
    border: none !important;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden;
    font-family: 'Cinzel', serif;
}

/* 2. BAŞLIK VE PUAN KUTUSU */
.skill-book-header {
    position: absolute !important;
    top: 6.5%; left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.skill-book-header h2 {
    margin: 0 !important;
    color: #f0e68c;
    font-size: 1.4rem;
    text-align: center;
    border: none !important;
    letter-spacing: 5px;
    text-shadow: 2px 2px 4px #000;
}

.skill-points-box {
    position: absolute !important;
    top: 17%; left: 15.4%;
    transform: translateX(-50%);
    width: 80%;
    background: transparent !important;
    border: none !important;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
}

/* 3. TABLAR (HER BİRİ AYRI KONTROL) */
.skill-tabs {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    display: block !important;
    pointer-events: none;
}

.tab-btn {
    position: absolute !important;
    pointer-events: auto;
    background: transparent !important; /* Arka planı komple sildik */
    border: none !important;           /* Çerçeveyi sildik */
    box-shadow: none !important;       /* Gölgeyi sildik */
    padding: 10px !important;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem !important;
    font-weight: 700;
    color: #a89373; /* Pasifken pirinç rengi */
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    text-align: center;
}

/* Aktif Sekme: Rünik Mavi Parlama */
.tab-btn.active {
    color: #9ADAE4 !important; /* İstediğin rünik mavi tonu */
    /* Yazının etrafına rünik bir parlama ekleyelim */
    text-shadow: 
        0 0 8px rgba(154, 218, 228, 0.6), 
        0 0 15px rgba(154, 218, 228, 0.4),
        2px 2px 4px #000;
    filter: brightness(1.2);
}

/* Hover Efekti (Hafif bir belirginleşme) */
.tab-btn:hover:not(.active) {
    color: #d0c0a0;
    transform: scale(1.05);
}

/* ÖRNEK KOORDİNATLAR (Buradaki % değerlerini resmine göre değiştir) */
.tab-btn:nth-child(1) { top: 16.1%; left: 23.9%; } /* GENEL */
.tab-btn:nth-child(2) { top: 16.1%; left: 41%; } /* BRUTAL/ARCANE */
.tab-btn:nth-child(3) { top: 16.1%; left: 58.5%; } /* ELEMENTAL */
.tab-btn:nth-child(4) { top: 16.1%; left: 76%; } /* NATURE */

/* 4. ORTA ALAN: YETENEK LİSTESİ VE KART MANTIĞI */
.skill-list-container {
    position: absolute !important;
    top: 28.9%; left: 15%;
    width: 70%; height: 42.5%;
    overflow-y: auto;
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    /* Scrollbar'ı gizle */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.skill-list-container::-webkit-scrollbar { display: none; }

/* YETENEK KARTI TEMELİ */
.skill-book-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(30, 30, 30, 0.85);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    transition: 0.2s;
    width: 100% !important;
    box-sizing: border-box;
}

/* MANTIK: ÖĞRENİLMİŞ (Açık) */
.skill-book-item:not(.locked) {
    border: 2px solid #43FF64; /* Yeşil çerçeve */
    box-shadow: inset 0 0 10px rgba(67, 255, 100, 0.2);
}

/* MANTIK: KİLİTLİ */
.skill-book-item.locked {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid #444;
    opacity: 0.7;
}
.skill-book-item.locked .skill-book-icon {
    filter: grayscale(100%) brightness(0.4);
}
.skill-book-item.locked .skill-info h4 {
    color: #666 !important;
}

/* MANTIK: SEÇİLİ (Sürüklemek için tıklandığında) */
.skill-book-item.selected-skill {
    border: 2px solid #ffd700 !important; /* Altın sarısı çerçeve */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2) !important;
    background: linear-gradient(90deg, rgba(93, 74, 48, 0.5), rgba(26, 21, 14, 0.7)) !important;
    transform: scale(1.02);
}

/* İÇERİK STİLLERİ */
.skill-book-icon {
    width: 55px; height: 55px;
    border: 1px solid #000;
    border-radius: 4px;
    flex-shrink: 0;
}
.skill-info h4 {
    color: #f0e68c !important;
    font-size: 1.1em;
    margin-bottom: 4px;
    text-shadow: 1px 1px 2px #000;
    text-transform: uppercase;
}
.skill-info p {
    font-size: 0.85em;
    color: #ccc;
    margin: 0;
    line-height: 1.3;
    text-transform: none; /* Açıklamalar küçük harf kalabilir */
}

/* 5. ALT BAŞLIK: KUŞANILAN YETENEKLER */

#equipped-area-container {
    position: absolute !important;
    bottom: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    height: 200px !important; /* Fiziksel bir yer ayırdık */
    display: block !important;
    background: transparent !important;
    z-index: 100 !important;
}
.equipped-area-title {
    position: absolute !important;
    bottom: 18%; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    color: #f0e68c;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.equipped-area-title::before, .equipped-area-title::after { display: none !important; }

/* 6. KUŞANILAN YETENEK BARI (EN ALT) */
#skill-book-equipped-bar {
    display: contents !important; /* Flexbox'ı iptal eder, slotları serbest bırakır */
}

/* Tüm slotlar için ortak stil */
#skill-book-equipped-bar .menu-slot {
    position: absolute !important;
    width: 80px !important; /* 891x1021 pencere için ideal boyut */
    height: 80px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid #6b5c3b !important;
    box-shadow: inset 0 0 15px #000;
    z-index: 500 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* --- SLOT KOORDİNAT KALİBRASYONU --- */
/* Buradaki rakamları görselindeki çerçevelere göre tek tek ayarla */

/* Slot A (Temel Saldırı) */
#skill-book-equipped-bar .menu-slot:nth-child(1) { 
    bottom: 31%; 
    left: 8%; 
}

/* Slot D (Temel Savunma) */
#skill-book-equipped-bar .menu-slot:nth-child(2) { 
    bottom: 31%; 
    left: 23.1%; 
}

/* Slot 1 (Özel Yetenek 1) */
#skill-book-equipped-bar .menu-slot:nth-child(3) { 
    bottom: 31%; 
    left: 38.1%; 
}

/* Slot 2 (Özel Yetenek 2) */
#skill-book-equipped-bar .menu-slot:nth-child(4) { 
    bottom: 31%; 
    left: 53.1%; 
}

/* Slot 3 (Özel Yetenek 3) */
#skill-book-equipped-bar .menu-slot:nth-child(5) { 
    bottom: 31%; 
    left: 68.2%; 
}

/* Slot 4 (Özel Yetenek 4) */
#skill-book-equipped-bar .menu-slot:nth-child(6) { 
    bottom: 31%; 
    left: 83.2%; 
}

/* Slot Hover Efekti */
#skill-book-equipped-bar .menu-slot:hover {
    border-color: #f0e68c !important;
    box-shadow: inset 0 0 15px #000, 0 0 10px rgba(240, 230, 140, 0.3);
}

/* İkonların slot içine tam oturması */
#skill-book-equipped-bar .menu-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 4px;
}

/* Slotların İçindeki Kısayol Harfleri (A, D, 1, 2...) */
#skill-book-equipped-bar .key-hint {
    position: absolute;
    top: -4px; left: -4px;
    background: #444;
    color: #fff;
    font-size: 0.7em;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #777;
    z-index: 5;
}

/* ÇIKIŞ BUTONU */
#btn-close-skill-book {
    position: absolute;
    top: 1.5%; right: 1.5%;
    z-index: 100;
}

/* ============================================================
   EXPANDED SKILL BOOK (7 SLOT MODU)
   ============================================================ */

/* 1. Yeni Görseli Giydir */
.expanded-skill-book {
    background-image: url('../images/ui/skillbookplus.webp') !important;
}

/* 2. Expanded Modunda Slotların Yeni Koordinatları (Örnek) */
/* Rakamları görselindeki yeni 7'li kutu düzenine göre ayarla */

/* Slot A */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(1) { 
    bottom: 31%; left: 5.9%; 
}
/* Slot D */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(2) { 
    bottom: 31%; left: 19%; 
}
/* Slot 1 */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(3) { 
    bottom: 31%; left: 32.1%; 
}
/* Slot 2 */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(4) { 
    bottom: 31%; left: 45.3%; 
}
/* Slot 3 */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(5) { 
    bottom: 31%; left: 58.5%; 
}
/* Slot 4 */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(6) { 
    bottom: 31%; left: 71.7%; 
}
/* Slot 5 (YENİ SLOT) */
.expanded-skill-book #skill-book-equipped-bar .menu-slot:nth-child(7) { 
    bottom: 31%; left: 84.8%; 
}

.hint-text {
    font-family: 'Cinzel', serif; /* Senin tematik fontun */
    font-size: 0.74rem; /* Masaüstü için ideal, zarif bir boyut */
    color: #a89373; /* Pirinç/Eskitilmiş altın tonu */
    opacity: 0.6; /* Bir tık şeffaf, "ikincil bilgi" hissi verir */
    text-align: center;
    margin: 5px 0 15px 0; /* Üstten az, alttan daha fazla boşluk */
    letter-spacing: 1px;
    font-style: italic;
    width: 100%;
    display: block;
    text-shadow: 1px 1px 2px #000;
}


.item-tooltip {
    position: fixed;
    pointer-events: none;
    background: rgba(10, 10, 10, 0.95);
    border: 2px solid #6b5c3b;
    border-radius: 6px;
    padding: 12px;
    z-index: 9999;
    min-width: 180px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    color: #fff;
    font-family: 'Cinzel', serif;
	transform: translateY(-100%); 
}
.tooltip-name { color: #ffd700; font-weight: bold; margin-bottom: 4px; font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px; font-size: 1.2rem;}
.tooltip-tier { color: #888; font-size: 0.85em; font-family: 'Cinzel', serif;font-style: normal; letter-spacing: 1px; }
.tooltip-stats { margin-top: 8px; line-height: 1.5; }
.tooltip-stat-row { display: flex; justify-content: space-between; gap: 20px; font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; }
.tooltip-stats div { font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 1px;}
.tooltip-val { color: #43FF64; font-family: 'Cinzel', serif; font-weight: 900;} /* Stat değerleri yeşil */

/* Reforge listesindeki stat isimleri */
.reforge-prop-card span { font-family: 'Cinzel', serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
/* Maliyet yazıları (Altın, Parça vb.) */
.reforge-costs div {font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px;}
/* Sentez ve Parçalama ekranlarındaki durum metinleri */
#fragments-status, .salvage-yield-info div { font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px;}

.item-slot.drag-over {
    border-color: #43FF64 !important;
    background-color: rgba(67, 255, 100, 0.1) !important;
    box-shadow: 0 0 15px #43FF64;
}
.item-tooltip .brooch-specialty-text {
    display: block;
    color: #ffd700 !important;
    font-style: italic;
    text-align: center;
    margin-bottom: 12px;
    padding: 6px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    
    /* BURADAN BOYUTU AYARLAYABİLİRSİN */
    font-size: 10px !important; 
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
    /* ------------------------------ */
}
.set-info-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(240, 230, 140, 0.2);
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
}

.set-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: bold;
    color: #f0e68c;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.set-progression {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.set-dot {
    width: 8px;
    height: 8px;
    background: #444;
    border-radius: 50%;
    border: 1px solid #222;
}

/* 3 ve 6 parça tamamlandığında yanan ışıklar */
.set-dot.active {
    background: #43FF64;
    box-shadow: 0 0 8px #43FF64;
    border-color: #fff;
}

.set-bonus-text {
    font-size: 0.65rem;
    color: #666;
    margin-top: 3px;
    font-style: italic;
}

.set-bonus-text.active {
    color: #43FF64;
    font-weight: bold;
    font-style: normal;
}
.stat-info-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 12px; /* Metin ile ikon arasındaki boşluk */
    background: rgba(107, 92, 59, 0.1); 
    border: 1px dashed #3e3221; 
    border-radius: 6px;
    height: 100%;
    cursor: pointer; /* Tüm kutu artık tıklanabilir */
    transition: all 0.3s ease;
}

.stat-info-text {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem; /* Stat isimlerinden biraz daha küçük ve zarif */
    color: #a89373;
    letter-spacing: 1px;
    pointer-events: none; /* Tıklamayı ikonun altındaki kutuya iletir */
}

.stat-info-trigger {
    color: #a89373;
    font-size: 1.1rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Kutuya (Container) Hover olunca her iki eleman da parlasın */
.stat-info-container:hover {
    background: rgba(107, 92, 59, 0.2);
    border-color: #ffd700;
}

.stat-info-container:hover .stat-info-text,
.stat-info-container:hover .stat-info-trigger {
    color: #ffd700;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}
/* Bilgi kutusunun içeriğini sola yaslar ve genel padding verir */
.stat-info-wrapper {
    text-align: left !important;
    padding: 0 15px 10px 15px; /* Üst padding'i (0) yaptık */
    margin-top: -5.5%; /* İçeriği yukarıdaki ana çizgiye yaklaştırır */
    width: 100%;
}

.stat-info-title {
    text-align: center !important; /* Yazıyı tam ortaya çeker */
    font-size: 1.1rem;
    margin: 0 !important;
    padding: 0;
    display: block;
    width: 100%; /* Tüm satırı kaplamasını sağlar ki tam ortalansın */
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Wrapper içindeki çizginin mesafesini daraltalım */
.stat-info-wrapper .stat-separator {
    margin: 6px 0 12px 0 !important; /* Çizginin üstündeki boşluğu iyice kıstık */
}

.stat-info-line {
    white-space: nowrap;
    margin-bottom: 6px;
    font-size: 0.85rem; /* Biraz daha kibar dursun */
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
    color: #ccc;
}
#codex-modal .stat-info-wrapper {
    margin-top: 0px !important; /* Negatif %5.5'i ezip aşağı itiyoruz */
}

/* Codex içindeki başlığın üst boşluğunu biraz daha açalım */
#codex-modal .stat-info-title {
    margin-top: 0px !important;
}
.stat-page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 12px;
    padding: 5px;
    transition: all 0.2s ease;
    user-select: none; /* Çift tıklamada yazının seçilmesini engeller */
}

/* Hoverda başlık ve ok beraber parlasın */
.stat-page-header:hover #stat-page-title,
.stat-page-header:hover #stat-page-arrow {
    color: #ffd700 !important;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
}

/* OK İKONU: Daha büyük ve akıcı bir animasyon */
#stat-page-arrow {
    font-size: 1rem;
    color: #a89373;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Zıplama efekti ekler */
}

/* BASILMA HİSSİYATI (Mekanik Çökme) */
.stat-page-header:active {
    transform: scale(0.95); /* Basınca hafifçe içeri çöker */
}

/* SAYFA 2'DEYKEN OKUN DURUMU */
.rotate-arrow {
    transform: rotate(180deg) scale(1.2) !important; /* Hem döner hem biraz büyür */
    color: #ffd700 !important;
}

#stat-tribe-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Alttaki 3 öğeyi yatayda ortalar */
    gap: 10px;
    width: 100%;
    padding: 10px 5px;
}

#stat-tribe-grid .res-item label {
    margin-right: 0 !important; /* Genel kuraldan gelen 10px'i ezer */
    padding: 0 !important;
    width: 100%;
    text-align: center;
    display: block;
}

#stat-tribe-grid .res-item {
    /* KRİTİK AYAR: 4 tanesinin tam sığması için %25'ten pay düşüyoruz */
    flex: 0 0 calc(25% - 12px); 
    
    /* 70px görselin yanlardan taşmaması için min-width */
    min-width: 85px; 
	min-height: 130px !important;
    
    display: flex;
    flex-direction: column;
    align-items: center;    /* İkon ve metni kutu içinde tam ortalar */
    justify-content: flex-start;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3e3221;
    border-radius: 6px;
    padding: 10px 2px;
    min-height: 125px;
    transition: all 0.2s ease;
	
}

/* Hover efekti (Uyum için) */
#stat-tribe-grid .res-item:hover {
    border-color: #ffd700;
    background: rgba(107, 92, 59, 0.1);
}

/* İkon, Label ve Değer sınıfları (Önceki mesajdaki gibi kalabilir) */
.tribe-icon {
    width:70px; /* 70 çok büyük gelirse 60'a çekebilirsin, 4-3'e daha iyi sığar */
    height: 70px;
    object-fit: contain;
    margin-bottom: 5px;
}

.tribe-label {
    font-size: 0.6rem !important;
    color: #a89373 !important;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    margin-bottom: 2px;
    white-space: nowrap;
}

.tribe-val {
    color: #ffd700;
    font-weight: bold;
    font-size: 0.85rem;
}
/* Kabile Değerleri Kapsayıcısı */
.tribe-stat-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 0.9rem;
}

/* SOL TARAF: Hasar (Sarı/Altın) */
.t-dmg {
    color: #ffd700 !important; 
    text-shadow: 1px 1px 2px #000;
}

/* ORTA: Ayırıcı (Gri) */
.t-sep {
    color: #666 !important;
    font-weight: normal;
    font-size: 0.7rem;
}

/* SAĞ TARAF: Savunma (Mavi) */
.t-def {
    color: #3498db !important; /* Tam olarak Dirençler sayfasındaki mavi */
    text-shadow: 1px 1px 2px #000;
}
.res-img-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* Direnç öğelerini kabile kutuları gibi merkezleyelim */
#stat-res-grid .res-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Margin-right kısıtlamasını Dirençler sayfasında da kaldıralım */
#stat-res-grid .res-item label {
    margin-right: 0 !important;
    width: 100%;
    text-align: center;
}