/* ==========================================================================
   Üyelik Seviyeleri: web menü levels ve mobil user_levels sayfası, profil seviye satırı (19.09.2026)
   Seviye rengi --cl-color ile gelir (panelde seçilir).
   ========================================================================== */
.cl-page { --cl-ink: #2b2118; --cl-muted: #8a7258; --cl-line: #eadfcd; --cl-soft: #fbf6ee; max-width: 720px; margin: 0 auto; color: var(--cl-ink); }
.cl-empty { padding: 30px 0; text-align: center; color: var(--cl-muted); }

.cl-hero {
    --cl-color: #8a7258;
    position: relative; display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; padding: 22px 22px 20px;
    border-radius: 18px; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, var(--cl-color) 0%, color-mix(in srgb, var(--cl-color) 70%, #000) 100%);
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .55);
}
.cl-hero::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); pointer-events: none;
}
.cl-hero-label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cl-hero-title { font-size: clamp(26px, 6vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; }
.cl-hero-spend { font-size: 14px; opacity: .92; }
.cl-hero-spend b { font-weight: 800; }
.cl-progress { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.cl-progress span { display: block; height: 100%; border-radius: 999px; background: #fff; }
.cl-hero-next { font-size: 13.5px; font-weight: 600; }
.cl-hero-guest { color: var(--cl-ink); background: var(--cl-soft); border: 1px solid var(--cl-line); box-shadow: none; align-items: flex-start; }
.cl-hero-guest::after { display: none; }
.cl-hero-guest .cl-hero-title { font-size: 18px; text-transform: none; letter-spacing: 0; }

.cl-list { position: relative; margin: 0; padding: 0; list-style: none; }
.cl-list::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--cl-line); }
.cl-item { --cl-color: #8a7258; position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.cl-dot {
    position: relative; z-index: 1; flex: 0 0 24px; width: 24px; height: 24px; margin-top: 12px; border-radius: 50%;
    background: #fff; border: 4px solid var(--cl-color);
}
.cl-item.is-current .cl-dot { background: var(--cl-color); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cl-color) 22%, transparent); }
.cl-item-body {
    flex: 1 1 auto; min-width: 0; padding: 14px 16px; border: 1px solid var(--cl-line); border-radius: 14px; background: #fff;
}
.cl-item.is-current .cl-item-body { border-color: var(--cl-color); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .5); }
.cl-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-item-title { font-size: 17px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-color); }
.cl-chip { padding: 2px 9px; border-radius: 999px; background: var(--cl-color); color: #fff; font-size: 11.5px; font-weight: 700; }
.cl-item-range { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--cl-muted); font-variant-numeric: tabular-nums; }
.cl-item-range small { font-size: 12px; font-weight: 600; }
.cl-item-text { margin-top: 8px; font-size: 14px; line-height: 1.55; }
.cl-item-text p { margin: 0 0 6px; }
.cl-item-text p:last-child { margin-bottom: 0; }
.cl-note { margin: 4px 0 0; font-size: 12.5px; color: var(--cl-muted); text-align: center; }

/* Profil ve üst menü: ad soyadın altında seviye */
.cl-badge {
    --cl-color: #8a7258;
    display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--cl-color) 14%, #fff); color: var(--cl-color) !important;
    font-size: 12px; font-weight: bold !important; text-transform: uppercase; text-decoration: none !important; line-height: 1.4;
}
.cl-badge:hover { background: color-mix(in srgb, var(--cl-color) 22%, #fff); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .cl-hero { background: var(--cl-color); }
    .cl-badge { background: rgba(0, 0, 0, .06); }
}