@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Outfit:wght@400;500;700;800&display=swap');

/* Character profil sayfasiyla ayni kirik beyaz / gri arka plan tonu. */
.upgrade-rate-page { background: #f4f6fa; }
.upgrade-rate-page .ug-character-tone-breadcrumb {
    padding: 56px 0 46px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f8fb 58%, #fff3ed 100%) !important;
    border-bottom: 1px solid #e5e8ee;
}
.upgrade-rate-page .ug-character-tone-breadcrumb::before { display: none; }
.upgrade-rate-page .ug-character-tone-breadcrumb .breadcrumb-content { position: relative; z-index: 1; }
.upgrade-rate-page .ug-character-tone-breadcrumb h2 {
    color: #202735;
    text-shadow: none;
}
.upgrade-rate-page .ug-character-tone-breadcrumb h2 span { color: #ee5519; }
.upgrade-rate-page .ug-character-tone-breadcrumb .breadcrumb { justify-content: center; margin: 0; }
.upgrade-rate-page .ug-character-tone-breadcrumb .breadcrumb-item,
.upgrade-rate-page .ug-character-tone-breadcrumb .breadcrumb-item a { color: #697386; }
.upgrade-rate-page .ug-character-tone-surface {
    position: relative;
    min-height: 100vh;
    padding: 60px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 4%, rgba(238,85,25,.08), transparent 30%),
        radial-gradient(circle at 90% 72%, rgba(59,130,246,.05), transparent 34%),
        #f4f6fa;
}
.upgrade-rate-page .ug-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
}
.upgrade-rate-page .ug-ambient--top {
    top: -12%; left: -7%; width: 420px; height: 420px;
    background: rgba(238,85,25,.08);
}
.upgrade-rate-page .ug-ambient--bottom {
    right: -8%; bottom: 4%; width: 500px; height: 500px;
    background: rgba(59,130,246,.05);
}

/* Animations */
@keyframes ugFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ugGlowPulse { 0% { box-shadow: 0 0 15px var(--ugc-glow); } 50% { box-shadow: 0 0 25px var(--ugc-glow); } 100% { box-shadow: 0 0 15px var(--ugc-glow); } }

.ug-page-title { text-align:center; margin-bottom:40px; animation: ugFadeInUp 0.6s ease-out; }
.ug-page-title h2 {
    font-family:'Cinzel', serif; font-size:2.2rem; font-weight:700;
    color:#fff; margin:0 0 10px; text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.ug-page-title h2 span { color:#8b5cf6; text-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
.ug-page-title p { font-family: 'Outfit', sans-serif; font-size:14px; color:#94a3b8; margin:0; }

.ug-layout {
    display:flex; flex-direction:row; gap:40px; align-items:flex-start;
}
.ug-content { flex: 1; min-width: 0; width: 100%; }

/* Sidebar (Scrolls List) */
.ug-sidebar {
    width: 280px; flex-shrink: 0; position: sticky; top: 30px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px; padding: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: ugFadeInUp 0.6s ease-out 0.1s both;
}

@media (max-width: 992px) {
    .ug-layout { flex-direction: column; gap: 20px; }
    .ug-sidebar { width: 100%; position: static; }
    .ug-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.ug-sidebar-title {
    font-family: 'Outfit', sans-serif; font-size:12px; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; color:#cbd5e1; margin-bottom: 20px; padding-left: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 12px;
}

.ug-menu { display:flex; flex-direction:column; gap:10px; }

/* Scroll Cards */
.ug-pick-btn {
    display:flex; align-items:center; gap:12px;
    width:100%; padding:10px 14px; border-radius:12px;
    background: transparent;
    border: 1px solid transparent;
    cursor:pointer; transition: all 0.2s ease;
    text-align:left;
}
.ug-pick-btn:hover { background: rgba(255,255,255,0.03); transform: translateX(5px); }

.ug-pick-btn.active {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    border-left: 3px solid var(--ugc);
    transform: translateX(5px);
}

.ug-pick-icon-wrap {
    width: 46px; height: 46px; border-radius: 10px;
    background: #0f172a; border: 1px solid rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; position:relative; z-index:1; overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.ug-pick-icon-wrap img { width: 42px; height: 42px; object-fit:cover; }

.ug-pick-text { flex:1; min-width:0; position:relative; z-index:1; display:flex; flex-direction: column; gap: 4px; }
.ug-pick-name {
    font-family:'Outfit', sans-serif; font-size:14px; font-weight:700;
    color:#f8fafc; line-height:1.2; transition:color .2s;
}
.ug-pick-sub { font-family: 'Outfit', sans-serif; font-size: 11px; color: #f1f5f9; font-weight: 500; }
.ug-pick-btn.active .ug-pick-name { color:#fff; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.ug-pick-btn.active .ug-pick-sub { color: var(--ugc-light); }

/* Right Panel */
.ug-panel { display:none; animation:ugFadeInUp .4s ease-out; }
.ug-panel.active { display:block; }

.ug-panel-header {
    background: linear-gradient(to right, rgba(30,41,59,0.8), transparent);
    border-radius: 20px; padding: 25px 30px; margin-bottom: 25px;
    border-left: 4px solid var(--ugc);
    display: flex; align-items: center; gap: 20px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ug-ph-icon {
    width: 64px; height: 64px; border-radius: 14px; background: #000;
    border: 2px solid var(--ugc); padding: 2px;
    box-shadow: 0 0 20px var(--ugc-glow);
}
.ug-ph-icon img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.ug-ph-info h3 { font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 5px; text-shadow: 0 0 15px var(--ugc-glow); }
.ug-ph-info p { font-family: 'Outfit', sans-serif; font-size: 13px; color: #f1f5f9; margin: 0; }

/* List of Upgrade Rows */
.ug-list-container {
    display: flex; flex-direction: column; gap: 12px;
}

.ug-list-item {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.03); border-radius: 8px;
    padding: 10px 16px; transition: all 0.2s ease; position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 20px;
}
.ug-list-item::before {
    content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
    background: var(--ugc); opacity: 0.5; transition: 0.3s;
}
.ug-list-item:hover {
    background: rgba(51, 65, 85, 0.8); transform: translateX(4px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.1);
}
.ug-list-item:hover::before { opacity: 1; box-shadow: 0 0 10px var(--ugc-glow); }

.ug-li-grade {
    display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;
    min-width: 100px; flex-shrink: 0;
}
.ug-li-from, .ug-li-to {
    font-size: 14px; font-weight: 700; color: #fff;
    background: rgba(0,0,0,0.2); padding: 3px 8px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.03);
}
.ug-li-to { color: var(--ugc); font-weight: 800; text-shadow: 0 0 10px var(--ugc-glow); border-color: var(--ugc-light); }
.ug-li-grade i { font-size: 14px; color: #64748b; }

.ug-li-rate { flex: 1; }
.ug-li-rates-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.ug-li-coins {
    min-width: 120px; text-align: right; font-family: 'Outfit', sans-serif;
    font-size: 13px; font-weight: 600; color: #cbd5e1; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    background: rgba(0,0,0,0.1); padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.03);
}

@media (max-width: 768px) {
    .ug-list-item { flex-direction: column; align-items: flex-start; gap: 15px; }
    .ug-li-rates-grid { grid-template-columns: 1fr; width: 100%; gap: 10px; }
    .ug-li-rate { width: 100%; }
    .ug-li-coins { align-self: flex-start; justify-content: flex-start; }
}

/* Progress Bars */
.ug-prog-row { display: flex; flex-direction: column; gap: 4px; }
.ug-prog-label {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: #94a3b8;
}
.ug-prog-label .val { font-size: 13px; font-weight: 700; color: #fff; }

.ug-prog-track {
    width: 100%; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); overflow: hidden; position: relative;
}
.ug-prog-fill {
    height: 100%; border-radius: 3px; position: relative;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.ug-prog-fill::after {
    content:''; position:absolute; top:0; right:0; bottom:0; left:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: progShine 2s infinite linear;
}
@keyframes progShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Colors */
.bar-green { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.5); } .val-green { color: #4ade80; }
.bar-blue { background: #3b82f6; box-shadow: 0 0 10px rgba(59,130,246,0.5); } .val-blue { color: #60a5fa; }
.bar-yellow { background: #eab308; box-shadow: 0 0 10px rgba(234,179,8,0.5); } .val-yellow { color: #fde047; }
.bar-orange { background: #f97316; box-shadow: 0 0 10px rgba(249,115,22,0.5); } .val-orange { color: #fb923c; }
.bar-red { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.5); } .val-red { color: #f87171; }
.bar-gray { background: #64748b; } .val-gray { color: #f1f5f9; }

.ug-guide-block {
    background: rgba(30,41,59,0.8); border-radius: 16px; padding: 25px;
    border: 1px solid rgba(255,255,255,0.1); margin-top: 30px;
    backdrop-filter: blur(10px);
}
.ug-guide-block h4 { font-family: 'Cinzel', serif; color: #e2e8f0; font-size: 18px; margin: 0 0 15px; display: flex; align-items: center; gap: 10px; }
.ug-guide-block h4 i { color: #3b82f6; }
.ug-guide-block ul { margin: 0; padding-left: 20px; font-family: 'Outfit', sans-serif; font-size: 14px; color: #f1f5f9; display: flex; flex-direction: column; gap: 8px; }
.ug-guide-block ul li strong { color: #fff; }

.ug-empty {
    text-align: center; padding: 60px 20px; background: rgba(30,41,59,0.5);
    border-radius: 16px; border: 1px dashed rgba(255,255,255,0.1);
}
.ug-empty i { font-size: 40px; color: #475569; margin-bottom: 15px; }
.ug-empty p { font-family: 'Outfit', sans-serif; color: #f1f5f9; font-size: 15px; margin: 0; }