/* ============================================================
   COMPONENTS.CSS - Butonlar, Formlar, Bildirimler
   ============================================================ */

/* --- LOADER --- */
#initial-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: #1a1a1a; display: flex; justify-content: center; align-items: center;
    z-index: 9999; transition: opacity 0.5s ease-out;
}
#initial-loader.fade-out { opacity: 0; pointer-events: none; }
.loader-content { text-align: center; color: #b52b2b; }
.pulsing-logo { width: 80px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }

/* --- FORMLAR --- */
.controls-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
    margin-bottom: 20px; background: #1e1e1e; padding: 15px;
    border-radius: 6px; border: 1px solid #333;
}
.full-width { grid-column: 1 / -1; }
.form-group label { display: block; margin-bottom: 5px; color: #aaa; font-size: 0.9em; }
select, input[type="text"] {
    width: 100%; padding: 10px; background-color: #2b2b2b;
    border: 1px solid #444; color: #fff; border-radius: 4px; font-size: 1em;
}
select:focus, input:focus { outline: none; border-color: #b52b2b; }
.mini-select { margin-top: 10px; padding: 6px; font-size: 0.9em; }
.embedded-select { 
    background: #1a1a1a; border: 1px solid #b52b2b; color: #fff; 
    padding: 5px; border-radius: 4px; width: 100%; 
    margin-top: 5px; margin-bottom: 10px;
}
.level-slider { width: 100%; cursor: pointer; margin-top: 5px; }

/* --- BUTONLAR --- */
.control-panel {
    margin-top: auto; padding-top: 20px; border-top: 1px solid #333;
    display: flex; justify-content: space-between;
}
.btn { 
    padding: 10px 25px; border: none; border-radius: 4px; cursor: pointer; 
    font-size: 1em; transition: background 0.2s; color: #fff; 
}
.btn-primary { background-color: #b52b2b; }
.btn-primary:hover:not(:disabled) { background-color: #d63d3d; }
.btn-secondary { background-color: #444; }
.btn-secondary:hover:not(:disabled) { background-color: #555; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- TOAST BİLDİRİM --- */
.toast-notification {
    position: fixed; bottom: 30px; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(30, 30, 30, 0.95); color: #fff;
    padding: 12px 30px; border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6); border: 1px solid #b52b2b;
    z-index: 9999; font-size: 0.95em; opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: flex; align-items: center; gap: 10px;
}
.toast-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* --- MOBİL FAB BUTTON --- */
.mobile-sheet-toggle {
    display: none; /* Mobilde görünür olur */
}
/* ============================================================
   WIZARD TIMELINE (Sınıf İlerleme Ekranı)
   ============================================================ */

.timeline-area {
    position: relative;
    margin-top: 20px;
}

.level-stream {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Seviye Kartı (Konteyner) */
.level-card {
    display: flex;
    gap: 15px;
    background-color: #2b2b2b;
    padding: 15px;
    border-radius: 6px;
    border-left: 5px solid #b52b2b; /* Sol taraftaki kızıl çizgi */
    transition: transform 0.2s;
}

.level-card:hover {

    transform: translateX(5px);
}

/* Seviye Numarası Rozeti */
.level-badge {
    background-color: #222;
    color: #b52b2b;
    font-size: 1.5em;
    font-weight: bold;
    min-width: 60px; /* Sabit genişlik */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
    height: auto;
    align-self: stretch; /* Kart boyunca uzasın */
}

/* Özellikler Listesi */
.features-list {
    flex: 1;
}

.feature-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #383838;
}

.feature-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.feature-item h4 {
    margin: 0 0 5px 0;
    color: #ddd;
    font-size: 1.1em;
}

.feature-text {
    color: #aaa;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Alt Sınıf (Subclass) Vurgusu */
.subclass-item {
    background: rgba(181, 43, 43, 0.05);
    padding: 10px;
    border-radius: 4px;
    border-left: 2px solid #b52b2b;
}

.subclass-tag {
    font-size: 0.7em;
    background: #b52b2b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Seçim Kutuları (Choice Wrapper) */
.choice-wrapper {
    background: #1a1a1a;
    padding: 15px;
    margin-top: 15px;
    border-radius: 4px;
    border: 1px dashed #444;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choice-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.choice-result {
    border: 1px solid #333; 
    border-radius: 8px;
    padding: 15px 10px 5px 15px; 
    border-left: 2px solid #4dabf7;

}

.choice-result strong {
    margin: 0 0 8px 0; 
    color: #4dabf7; 
    font-size: 0.9em; 
    font-weight: bold; 
    letter-spacing: 0.5px; 
    
    margin-bottom: 15px; 
    padding-bottom: 15px;

}

.choice-result p {
    color: #aaa;
    line-height: 1.6;
    font-size: 0.95em;

}


/* Büyü Linkleri */
.dnd-link {
    color: #8ab4f8;
    cursor: pointer;
    border-bottom: 1px dotted #8ab4f8;
}

a.dnd-link.spell-link {
    color: #a855f7;
    text-decoration: none;
    border-bottom: 1px dotted #a855f7;
    transition: all 0.2s;
}

a.dnd-link.spell-link:hover {
    color: #d8b4fe;
    border-bottom: 1px solid #d8b4fe;
    background-color: rgba(168, 85, 247, 0.1);
    border-radius: 4px;
}

/* Alt Sınıf (Subclass) Seçim Kutusu */
.subclass-selection-box {
    background: linear-gradient(135deg, rgba(181, 43, 43, 0.1), rgba(0, 0, 0, 0));
    border: 1px solid #b52b2b;
    border-radius: 6px;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
    box-shadow: 0 0 10px rgba(181, 43, 43, 0.2);
}

.selection-label {
    display: block;
    color: #e67e22;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1.1em;
}

/* ============================================================
   AVATAR SEÇİM GALERİSİ
   ============================================================ */
.selected-avatar-preview {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
.selected-avatar-preview img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #b52b2b;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(181, 43, 43, 0.4);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    background: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
    max-height: 200px;
    overflow-y: auto;
}

.avatar-option {
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.2s;
    opacity: 0.7;
}

.avatar-option:hover {
    opacity: 1;
    transform: scale(1.1);
}

.avatar-option.selected {
    border-color: #b52b2b;
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(181, 43, 43, 0.5);
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   BÜYÜK AVATAR GALERİSİ
   ============================================================ */

/* Ana Konteyner: Sadece temel renk ve yapı, boyut/kenarlık yok */
.avatar-gallery-container {
    background: #151515;
    border-radius: 8px;
    /* Eski padding, border ve animation satırları BURADAN SİLİNDİ */
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* İçerik Izgarası */
.avatar-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    max-height: 400px; 
    overflow-y: auto;  
    padding-right: 5px;
}

/* Scrollbar Tasarımı */
.avatar-grid-large::-webkit-scrollbar { width: 8px; }
.avatar-grid-large::-webkit-scrollbar-track { background: #111; }
.avatar-grid-large::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

.avatar-option img {
    width: 100%;
    aspect-ratio: 1/1; /* Kare olması için */
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: #000;
}

/* --- BOŞ DURUM (EMPTY STATE) TASARIMI --- */
.empty-selection-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    margin-top: 20px;
    border: 2px dashed #333; /* Kesikli zarif bir çizgi */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    color: #666;
    animation: fadeIn 0.5s ease-out;
}

.empty-icon {
    font-size: 4em;
    margin-bottom: 15px;
    opacity: 0.3;
    color: #b52b2b; /* Tema rengimiz */
    animation: float 3s ease-in-out infinite; /* Hafifçe süzülme efekti */
}

.empty-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #888;
    margin-bottom: 5px;
}

.empty-desc {
    font-size: 0.9em;
    color: #555;
    max-width: 300px;
}

/* Süzülme Animasyonu */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Konsept Sayfası Makyajı */
.concept-hero {
    text-align: center;
    margin-bottom: 20px;
}

.hero-avatar-frame {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    padding: 5px;
    border: 2px solid #b52b2b; /* Kızıl Çerçeve */
    box-shadow: 0 0 20px rgba(181, 43, 43, 0.3); /* Arkadan vuran kızıl ışık */
    background: #111;
    position: relative;
}

.hero-avatar-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.hero-input-group input {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    border-bottom: 2px solid #333;
    background: transparent;
    color: #fff;
    border-radius: 0;
    padding: 10px;
    width: 80%;
    transition: border-color 0.3s;
}

.hero-input-group input:focus {
    outline: none;
    border-bottom-color: #b52b2b;
}

.hero-input-group input::placeholder {
    color: #444;
    font-weight: normal;
    font-style: italic;
}

/* --- YENİ EKLENEN STİLLER (ANIMASYON & MAKYAJ) --- */

/* 1. Kızıl "Görünüm Değiştir" Butonu */
.btn-crimson-outline {
    background: transparent;
    border: 1px solid #b52b2b; /* Kızıl çerçeve */
    color: #e2b3b3; /* Hafif soluk kızıl yazı */
    padding: 10px 20px;
    border-radius: 25px; /* Daha yuvarlak */
    font-size: 0.95em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(181, 43, 43, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 20px 0;
}

.btn-crimson-outline:hover {
    background: rgba(181, 43, 43, 0.1); /* Üzerine gelince hafif dolgu */
    color: #fff;
    box-shadow: 0 0 15px rgba(181, 43, 43, 0.4); /* Parlama efekti */
    transform: translateY(-2px);
}

/* Çekmece Mantığı: Kapalıyken her şey 0 olmalı */
.gallery-drawer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;          /* Kapalıyken iç boşluk yok */
    border: none;        /* Kapalıyken kenarlık yok */
    margin-bottom: 0;    /* Kapalıyken dış boşluk yok */
    
    /* Tüm özellikler geçişli olsun */
    transition: max-height 0.5s ease-in-out, 
                opacity 0.4s ease-in-out, 
                padding 0.4s ease, 
                margin 0.4s ease;
}

/* Açık Durum: Her şeyi geri getiriyoruz */
.gallery-drawer.open {
    max-height: 500px;   /* Yeterince büyük bir alan */
    opacity: 1;
    padding: 10px;       /* İç boşluk geri geldi */
    border: 1px solid #333; /* Kenarlık geri geldi */
    margin-bottom: 15px;    /* Dış boşluk geri geldi */
}

/* 3. Büyük & Kızıl İsim Girişi */
.hero-input-group input {
    text-align: center;
    font-size: 1.6em !important; /* DAHA BÜYÜK */
    font-weight: bold;
    border: none;
    border-bottom: 2px solid #444;
    background: transparent;
    color: #b52b2b !important; /* KIZIL RENK */
    border-radius: 0;
    padding: 10px;
    width: 90%;
    transition: all 0.3s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero-input-group input:focus {
    outline: none;
    border-bottom-color: #b52b2b;
    color: #ff4d4d !important; /* Odaklanınca daha parlak */
}

.hero-input-group input::placeholder {
    color: #444;
    font-size: 0.7em; /* Placeholder daha küçük dursun */
    font-weight: normal;
    font-style: italic;
    vertical-align: middle;
}

/* 4. Seed (Kayıt) Yükleme Alanı */
.seed-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #666;
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s;
    user-select: none;
}

.seed-trigger:hover {
    color: #b52b2b;
}

.seed-trigger span {
    font-size: 1em; /* Yazı büyütüldü */
    font-weight: 600;
    letter-spacing: 0.5px;
}

.seed-icon-svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    opacity: 0.7;
}
/* --- SÜRÜKLE BIRAK PUAN SİSTEMİ --- */

.pool-container {
    background: #1a1a1a;
    border: 2px dashed #444;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 25px;
    min-height: 80px;
    transition: background 0.3s;
}

.pool-container:hover { border-color: #666; }

.pool-label {
    text-align: center; color: #666; font-size: 0.8em; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;
}

.pool-slots {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

/* Puan Topu (Orb) */
.score-orb {
    width: 50px; height: 50px;
    background: radial-gradient(circle at 30% 30%, #b52b2b, #7a1d1d);
    color: white;
    font-weight: bold; font-size: 1.3em;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    cursor: grab;
    user-select: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid #d45d5d;
}

.score-orb:active { cursor: grabbing; transform: scale(1.1); }
.score-orb.selected { 
    box-shadow: 0 0 15px #ff4d4d; border-color: #fff; transform: scale(1.1); z-index: 10;
}

.score-orb.placed {
    width: 100%; height: 100%;
    border-radius: 8px; /* Yuvaya oturunca kareleşsin */
    background: #2b2b2b;
    border: 2px solid #b52b2b;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Stat Yuvaları Grid */
.stat-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Mobilde alt alta, masaüstünde yan yana */
    gap: 15px;
}

.stat-slot-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}

.stat-name {
    color: #aaa; font-weight: bold; margin-bottom: 8px; font-size: 1.1em;
}

.drop-zone {
    width: 60px; height: 60px;
    background: #0f0f0f;
    border: 2px solid #333;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
}

.drop-zone.target-active { border-color: #666; border-style: dashed; }
.drop-zone.target-active:hover { border-color: #b52b2b; background: rgba(181, 43, 43, 0.1); }

.empty-socket {
    width: 10px; height: 10px; background: #222; border-radius: 50%;
}

.stat-calc {
    font-size: 0.8em; color: #666; margin-bottom: 5px;
}
.bonus-pill { color: #4caf50; }
.total-score { color: #eee; font-weight: bold; }

.mod-display {
    background: #222; border: 1px solid #444; color: #fff;
    padding: 2px 10px; border-radius: 10px; font-weight: bold; font-size: 1.1em;
}

/* Modal Stilleri */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(0,0,0,0.8); z-index: 20000;
    display: flex; justify-content: center; align-items: center;
}
.modal-window {
    background: #1e1e1e; width: 90%; max-width: 500px;
    border-radius: 8px; border: 1px solid #444; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.modal-header {
    background: #252525; padding: 15px; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-content { max-height: 70vh; overflow-y: auto; }

/* Envanter Özel */
.gold-pouch {
    background: rgba(255, 215, 0, 0.05); border: 1px solid #665c26;
    padding: 10px; border-radius: 6px; margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.gold-input { width: 100px; text-align: right; color: #ffd700; border-color: #665c26; }

.equip-section { margin-bottom: 20px; }
.weapon-list-scroll {
    max-height: 400px; overflow-y: auto; border: 1px solid #333; border-radius: 4px;
}
.weapon-item {
    padding: 8px 12px; border-bottom: 1px solid #2a2a2a; cursor: pointer;
    display: flex; justify-content: space-between; transition: background 0.2s;
}
.weapon-item:hover { background: #2a2a2a; }
.weapon-item.selected { background: #b52b2b; color: white; }
.w-meta { font-size: 0.8em; opacity: 0.7; }

/* Saldırı Kartları (Actions Tab) */
.attack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.attack-card {
    background: #252525; border: 1px solid #444; border-radius: 6px;
    padding: 10px; text-align: center;
}
.atk-top { border-bottom: 1px solid #333; padding-bottom: 5px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
.atk-name { font-weight: bold; font-size: 0.9em; color: #eee; }
.atk-bonus { color: #4caf50; font-weight: bold; }
.atk-btm { font-size: 0.85em; color: #aaa; display: flex; justify-content: center; gap: 5px; }



/* Switch Toggle Stili */
.prof-toggle-wrapper {
    margin-left: 10px;
    display: flex; align-items: center;
}

.prof-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.prof-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444; /* Pasif renk */
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px; width: 12px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* Aktif (Seçili) Durum */
input:checked + .slider {
    background-color: #b52b2b; /* Tema rengimiz */
}

input:checked + .slider:before {
    transform: translateX(16px);
}

/* --- Level Slider (Seviye Kaydırıcısı) - Yeni Stil --- */

/* 1. Slider Genel Yapısı */
input[type=range].level-slider {
  -webkit-appearance: none; /* Chrome, Safari, Opera, Edge */
  -moz-appearance: none;    /* Firefox */
  appearance: none;

  width: 100%;
  background: transparent;
  margin: 10px 0;
  cursor: pointer;
  margin-top: 19px;
}

input[type=range].level-slider:focus {
  outline: none;
}

/* 2. Kaydırma Çubuğu (Track - Yol) */
/* Chrome, Safari, Opera */
input[type=range].level-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #1a1a1a; /* Çok koyu gri zemin */
  border: 1px solid #444; /* Hafif çerçeve */
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* Firefox */
input[type=range].level-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* 3. Tutamaç (Thumb - Yuvarlak Kısım) */

/* Chrome, Safari */
input[type=range].level-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  
  /* İSTENİLEN RENKLER (Varsayılan Hal) */
  background: #333333; /* İçi Koyu Gri */
  border: 3px solid #bbbbbb; /* Çerçevesi Açık Gri */
  
  margin-top: -10px; /* Ortalamak için */
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.2s ease; /* Yumuşak geçiş efekti */
}

/* Firefox */
input[type=range].level-slider::-moz-range-thumb {
  height: 26px;
  width: 26px;
  border: none;
  border-radius: 50%;
  
  /* İSTENİLEN RENKLER */
  background: #333333;
  border: 3px solid #bbbbbb;
  
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.2s ease;
}

/* 4. Efektler (Hover ve Active) */

/* Fare üzerine gelince (Hover) - Hafif parlasın */
input[type=range].level-slider:hover::-webkit-slider-thumb {
  border-color: #ffffff; /* Çerçeve beyaza döner */
  transform: scale(1.05);
}
input[type=range].level-slider:hover::-moz-range-thumb {
  border-color: #ffffff;
  transform: scale(1.05);
}

/* TIKLANINCA / SÜRÜKLENİNCE (Active) - Kızıl Olsun */
input[type=range].level-slider:active::-webkit-slider-thumb {
  background: #b52b2b; /* Kızıl (D&D kırmızısı) */
  border-color: #ff8c8c; /* Çerçeve hafif açık kırmızıya dönsün */
  transform: scale(1.2); /* Biraz büyüsün */
  box-shadow: 0 0 10px rgba(181, 43, 43, 0.6); /* Kızıl bir parlama ekle */
}

input[type=range].level-slider:active::-moz-range-thumb {
  background: #b52b2b;
  border-color: #ff8c8c;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(181, 43, 43, 0.6);
}

@media (max-width: 800px) {
    .mobile-sheet-toggle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; bottom: 25px; left: 50%;
        transform: translateX(-50%); width: 60px; height: 60px;
        background-color: #b52b2b; color: white; border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0,0,0,0.6); cursor: pointer; z-index: 2000;
        transition: transform 0.2s, background-color 0.2s;
    }
    .mobile-sheet-toggle:active { transform: translateX(-50%) scale(0.95); background-color: #d63d3d; }
    .mobile-sheet-toggle svg { width: 28px; height: 28px; fill: #fff; }

       .level-card {
        flex-direction: column;
    }

    .level-badge {
        width: 100%;
        min-width: auto;
        min-height: auto;
        background-color: transparent;
        box-shadow: none;
        border-bottom: 1px solid #444;
        border-radius: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 0 5px 0;
        margin-bottom: 8px;
        font-size: 1.1rem;
        color: #b52b2b;
    }

    .level-badge::before {
        content: "SEVİYE ";
        color: #888;
        font-size: 0.8em;
        margin-right: 6px;
        font-weight: normal;
        letter-spacing: 1px;
    }
}