/* ============================================================================
   KUYUMCUODASI.COM - Ana Stil Dosyası
   Görsel tasarıma birebir sadık, yüksek okunabilirlikli ve mobil uyumlu arayüz
   ============================================================================ */

:root {
    --bg-body: #faf8f4;
    --bg-card: #ffffff;
    --bg-header: #141824;
    --gold-light: #ffe082;
    --gold-main: #d8a63a;
    --gold-dark: #b68018;
    --text-dark: #111827;
    --text-body: #374151;
    --text-muted: #6b7280;
    --border-soft: #ece6da;
    --up-green: #16a34a;
    --down-red: #dc2626;
    --shadow-card: 0 4px 18px rgba(17, 24, 39, 0.045);
    --shadow-hover: 0 8px 26px rgba(182, 128, 24, 0.12);
    --radius-card: 14px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-dark);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================================
   1. ÜST MENÜ (HEADER)
   ============================================================================ */
.site-header {
    background: linear-gradient(180deg, #171c29 0%, #111520 100%);
    border-bottom: 1px solid rgba(216, 166, 58, 0.25);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
    gap: 18px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.brand-diamond {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-text-wrap {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.gold-txt {
    color: #e6b84c;
    font-weight: 800;
}

.white-txt {
    color: #ffffff;
    font-weight: 700;
}

.brand-subtitle {
    font-size: 9.5px;
    letter-spacing: 1.2px;
    color: #9ca3af;
    font-weight: 600;
    margin-top: 2px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 8px;
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.nav-link svg {
    color: #d8a63a;
    flex-shrink: 0;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.nav-link.active {
    background: linear-gradient(135deg, #e5b94e 0%, #c89429 100%);
    color: #141824;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(216, 166, 58, 0.35);
}

.nav-link.active svg {
    color: #141824;
}

/* Sağ İl Arama Kutusu */
.header-search-wrap {
    position: relative;
    width: 220px;
    flex-shrink: 0;
}

.header-search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 7px 14px;
    gap: 8px;
    transition: border-color 0.2s, background 0.2s;
}

.header-search-box:focus-within {
    border-color: #e5b94e;
    background: rgba(255, 255, 255, 0.12);
}

.search-icon {
    color: #9ca3af;
    flex-shrink: 0;
}

.header-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 13.5px;
    width: 100%;
}

.header-search-input::placeholder {
    color: #9ca3af;
}

.header-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border-soft);
    max-height: 320px;
    overflow-y: auto;
    display: none;
    z-index: 1100;
}

.header-search-results.open {
    display: block;
}

.search-res-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #1f2937;
}

.search-res-item:last-child {
    border-bottom: none;
}

.search-res-item:hover {
    background: #fdf8ed;
    color: #9a690d;
}

.search-res-live {
    font-size: 11px;
    color: #16a34a;
    font-weight: 600;
}

/* ============================================================================
   2. HERO ALANI
   ============================================================================ */
.hero-section {
    position: relative;
    background-color: #0b0d13;
    background-image:
        linear-gradient(90deg, rgba(8, 10, 15, 0.97) 0%, rgba(10, 12, 18, 0.90) 43%, rgba(12, 14, 20, 0.28) 76%, rgba(12, 14, 20, 0.10) 100%),
        url('/assets/img/hero-gold-banner.jpg');
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(216, 166, 58, 0.35);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 38px;
    padding-bottom: 38px;
}

.hero-text-box {
    max-width: 650px;
}

.hero-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.18;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.hero-title-gold {
    background: linear-gradient(90deg, #ffe082 0%, #e5b548 55%, #d49826 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 15.5px;
    color: #d1d5db;
    line-height: 1.55;
    margin-bottom: 24px;
    font-weight: 400;
}

.hero-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 540px;
}

.hero-select-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 10px;
    height: 50px;
    padding: 0 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-pin-icon {
    flex-shrink: 0;
    margin-right: 10px;
}

.hero-city-select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    padding-right: 24px;
}

.hero-chevron-icon {
    position: absolute;
    right: 14px;
    pointer-events: none;
}

.btn-gold-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #e2b449 0%, #c69126 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(198, 145, 38, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-gold-hero:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(198, 145, 38, 0.55);
}

/* ============================================================================
   3. ANLIK FİYAT KARTLARI (7 KART)
   ============================================================================ */
.ticker-cards-section {
    margin-top: 18px;
    margin-bottom: 18px;
}

.ticker-cards-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.ticker-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 13px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-card);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ticker-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: #dfc07c;
}

.ticker-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-fx-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6e3ba 0%, #dfc07c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5b062;
}

.fx-sym {
    font-size: 20px;
    font-weight: 800;
    color: #5a3e07;
}

.ticker-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ticker-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticker-card-price {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
    margin: 2px 0;
    white-space: nowrap;
}

.ticker-card-change {
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
}

.chg-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
}

.chg-up {
    color: var(--up-green);
}

.chg-down {
    color: var(--down-red);
}

.chg-flat {
    color: #6b7280;
}

.chg-amt {
    color: #6b7280;
    font-weight: 500;
    font-size: 11px;
}

/* ============================================================================
   4. ANA 3 SÜTUNLU BÖLÜM (HARİTA + EN ÇOK ARANAN İLLER + DÖVİZ TABLOSU)
   ============================================================================ */
.main-dashboard-section {
    margin-bottom: 20px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1.08fr;
    gap: 18px;
    align-items: stretch;
}

.dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.dash-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 17.5px;
    font-weight: 800;
    color: #111827;
}

.btn-pill-gold {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #deb148 0%, #c59128 100%);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
}

.btn-pill-gold:hover {
    opacity: 0.93;
    transform: translateY(-1px);
}

/* Türkiye Haritası Stilleri */
.map-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.turkey-map-wrapper {
    position: relative;
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.turkey-svg-map {
    width: 100%;
    height: auto;
    max-height: 340px;
    overflow: visible;
}

.turkey-svg-map g.map-province path {
    fill: #edd8ad;
    stroke: #ffffff;
    stroke-width: 1.1px;
    cursor: pointer;
    transition: fill 0.18s ease, transform 0.18s ease;
}

.turkey-svg-map g.map-province.has-live-feed path {
    fill: #e3c27d;
}

.turkey-svg-map g.map-province:hover path,
.turkey-svg-map g.map-province.active-province path {
    fill: #c38822 !important;
}

/* Harita Üzerindeki Yüzen Beyaz Fiyat Kartı */
.map-floating-card {
    position: absolute;
    top: 14px;
    left: 52px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #e7decb;
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 225px;
    max-width: 265px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.14);
    z-index: 20;
    pointer-events: auto;
    transition: opacity 0.15s ease;
}

.mfc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f3efe6;
}

.mfc-city {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}

.mfc-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    background: #fef3c7;
    color: #92400e;
}

.mfc-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mfc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    gap: 10px;
}

.mfc-row span {
    color: #6b7280;
    font-weight: 500;
}

.mfc-row strong {
    color: #111827;
    font-weight: 800;
}

.mfc-chamber-info {
    font-size: 11.5px;
    color: #4b5563;
    line-height: 1.45;
}

.mfc-chamber-info strong {
    display: block;
    color: #111827;
    margin-bottom: 3px;
}

.mfc-footer-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #b68018;
}

.map-legend-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3efe6;
    font-size: 11.5px;
    color: #6b7280;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.live-dot {
    background: #c38822;
}

.info-dot {
    background: #edd8ad;
    border: 1px solid #d4b87c;
}

/* Orta Sütun: En Çok Aranan İller */
.popular-cities-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.popular-city-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #f3efe6;
    background: #fdfcf9;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.popular-city-row:hover {
    background: #fdf7e7;
    border-color: #dfc07c;
    transform: translateX(2px);
}

.city-thumb-box {
    width: 56px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.city-plate-badge {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.city-short-code {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.85;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.city-row-info {
    flex: 1;
    min-width: 0;
}

.city-row-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #111827;
    line-height: 1.2;
}

.city-row-prices {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-row-prices strong {
    color: #374151;
    font-weight: 700;
}

.city-row-arrow {
    color: #9ca3af;
    flex-shrink: 0;
}

.popular-cities-footer {
    margin-top: 14px;
}

.btn-full-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 9px;
    background: linear-gradient(135deg, #deb148 0%, #c59128 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.btn-full-gold:hover {
    opacity: 0.94;
}

/* Sağ Sütun: Döviz Kurları Tablosu */
.link-see-all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #b68018;
}

.link-see-all:hover {
    color: #8f620c;
}

.fx-table-wrap {
    flex: 1;
    overflow-x: auto;
}

.fx-mini-table {
    width: 100%;
    border-collapse: collapse;
}

.fx-mini-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    padding: 8px 6px;
    border-bottom: 1px solid #f0ece1;
}

.fx-mini-table td {
    padding: 11px 6px;
    border-bottom: 1px solid #f5f2ea;
    font-size: 13px;
    vertical-align: middle;
}

.fx-mini-table tr:last-child td {
    border-bottom: none;
}

.fx-name-cell {
    display: flex;
    align-items: center;
    gap: 9px;
}

.fx-flag-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.fx-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fx-label-text {
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

.num-col {
    text-align: right !important;
}

.fx-val {
    font-weight: 600;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.fx-sell {
    font-weight: 700;
    color: #111827;
}

/* ============================================================================
   5. ALT 4 KATEGORİ KARTI
   ============================================================================ */
.feature-boxes-section {
    margin-bottom: 26px;
}

.feature-boxes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.feature-box {
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.fb-gold {
    background: #fbf5e6;
    border-color: #f2e3be;
}

.fb-green {
    background: #eefaf3;
    border-color: #d1f2df;
}

.fb-blue {
    background: #eff6ff;
    border-color: #dbeafe;
}

.fb-purple {
    background: #f5f3ff;
    border-color: #ede9fe;
}

.fb-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fb-icon-gold {
    background: linear-gradient(135deg, #e2b347, #c58f24);
}

.fb-icon-green {
    background: linear-gradient(135deg, #2ec46f, #18994f);
}

.fb-icon-blue {
    background: linear-gradient(135deg, #4f94f8, #2563eb);
}

.fb-icon-purple {
    background: linear-gradient(135deg, #a77bf9, #7c3aed);
}

.fb-dollar-sign {
    color: #ffffff;
    font-size: 23px;
    font-weight: 800;
}

.fb-title {
    font-size: 16.5px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 5px;
}

.fb-desc {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.45;
    margin-bottom: 10px;
}

.fb-link {
    font-size: 13px;
    font-weight: 700;
}

.fb-link-gold { color: #b68018; }
.fb-link-green { color: #15803d; }
.fb-link-blue { color: #1d4ed8; }
.fb-link-purple { color: #6d28d9; }

/* ============================================================================
   6. 81 İL SEO REHBERİ BÖLÜMÜ
   ============================================================================ */
.seo-provinces-section {
    margin-bottom: 36px;
}

.seo-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.seo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f2ede2;
}

.seo-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}

.seo-section-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}

.seo-tab-buttons {
    display: flex;
    gap: 8px;
}

.seo-tab-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #e5dec9;
    background: #faf8f4;
    font-size: 12.5px;
    font-weight: 700;
    color: #4b5563;
    cursor: pointer;
}

.seo-tab-btn.active {
    background: #141824;
    color: #e6b84c;
    border-color: #141824;
}

.seo-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 8px;
}

.seo-links-grid.hidden {
    display: none;
}

.seo-pill-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #f0ece1;
    background: #fdfcf9;
    font-size: 12.5px;
    color: #374151;
}

.seo-pill-link:hover,
.seo-pill-link.active-pill {
    border-color: #d8a63a;
    background: #fdf7e7;
    color: #111827;
}

.pill-plate {
    background: #f3efe6;
    color: #6b5a3e;
    font-weight: 800;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 5px;
}

.seo-pill-link.has-live .pill-plate {
    background: #fef3c7;
    color: #92400e;
}

.pill-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pill-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================================================
   7. ALT SAYFALAR (TABLOLAR, DETAY KARTLARI, BREADCRUMB)
   ============================================================================ */
.subpage-hero {
    background: linear-gradient(135deg, #161b28 0%, #10141f 100%);
    color: #ffffff;
    padding: 32px 0;
    border-bottom: 2px solid rgba(216, 166, 58, 0.3);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.breadcrumb a:hover {
    color: #e6b84c;
}

.breadcrumb strong {
    color: #e6b84c;
}

.subpage-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 8px;
}

.subpage-subtitle {
    font-size: 14.5px;
    color: #d1d5db;
    max-width: 850px;
}

.subpage-content {
    padding: 28px 0 44px;
}

.content-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 22px;
    box-shadow: var(--shadow-card);
}

.mt-24 {
    margin-top: 24px;
}

.content-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2ede2;
}

.content-card-title {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}

.card-sub-note {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}

.source-tag {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 99px;
    background: #f3efe6;
    color: #6b5a3e;
}

.source-tag.live-tag {
    background: #dcfce7;
    color: #15803d;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7280;
    background: #faf8f4;
    padding: 11px 12px;
    border-bottom: 1px solid #ebe5d8;
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid #f3efe6;
    font-size: 13.5px;
    vertical-align: middle;
}

.data-table tr:hover td {
    background: #fdfaf2;
}

.highlight-row td {
    background: #fef9e7 !important;
}

.sell-strong {
    color: #111827;
    font-weight: 800;
}

.muted-num {
    color: #6b7280;
}

.time-col {
    font-size: 12px;
    color: #6b7280;
}

.sub-chamber-label {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 400;
    margin-top: 2px;
}

.table-btn-sm {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 6px;
    background: #f3efe6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

.table-btn-sm:hover,
.btn-gold-sm {
    background: #d8a63a;
    color: #ffffff;
}

/* Odak Altın Kartı (/gram-altin, /ceyrek-altin vb.) */
.focus-gold-banner {
    background: linear-gradient(135deg, #171c29 0%, #22293a 100%);
    color: #ffffff;
    border-radius: var(--radius-card);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border: 1px solid rgba(216, 166, 58, 0.4);
}

.focus-badge {
    display: inline-block;
    background: rgba(216, 166, 58, 0.2);
    color: #ffe082;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    margin-bottom: 8px;
}

.focus-gold-name {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 14px;
}

.focus-price-pair {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.fp-box {
    display: flex;
    flex-direction: column;
}

.fp-label {
    font-size: 12px;
    color: #9ca3af;
}

.fp-val {
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
}

.fp-sell-box .fp-val {
    color: #ffe082;
}

.focus-trend-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    padding: 16px 20px;
    border-radius: 10px;
}

.ft-stat {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #9ca3af;
}

.ft-stat strong {
    font-size: 15px;
    color: #ffffff;
    margin-top: 2px;
}

.txt-up { color: var(--up-green) !important; font-weight: 700; }
.txt-down { color: var(--down-red) !important; font-weight: 700; }

/* İl Detay ve Oda Detay Stilleri */
.city-hero-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.city-badges-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.plate-pill, .region-pill, .type-pill {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.plate-pill {
    background: #d8a63a;
    color: #141824;
}

.btn-outline-gold {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 9px;
    border: 1px solid #d8a63a;
    color: #ffe082;
    font-size: 13px;
    font-weight: 700;
}

.btn-outline-gold:hover {
    background: #d8a63a;
    color: #141824;
}

.city-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.city-Highlight-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-left: 4px solid #d8a63a;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.ch-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7280;
}

.ch-sell {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 4px 0;
}

.ch-buy {
    font-size: 12px;
    color: #6b7280;
}

.chamber-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cd-item {
    background: #faf8f4;
    border: 1px solid #f0ece1;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.cd-full {
    grid-column: 1 / -1;
}

.cd-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.cd-val {
    font-size: 14.5px;
    color: #111827;
}

.cd-val a {
    color: #b68018;
    text-decoration: underline;
}

.cd-note {
    font-size: 13.5px;
    color: #374151;
}

.chamber-only-notice {
    border-left: 4px solid #d8a63a;
    background: #fffdf7;
}

.notice-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.province-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.prov-info-card {
    background: #fdfcf9;
    border: 1px solid #eee8da;
    border-radius: 11px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prov-info-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.plate-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border-radius: 6px;
    background: #141824;
    color: #e6b84c;
    font-size: 12px;
    font-weight: 800;
}

.prov-info-name {
    font-size: 15px;
    font-weight: 800;
}

.prov-type-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.type-oda { background: #fef3c7; color: #92400e; }
.type-dernek { background: #e0e7ff; color: #1e40af; }
.type-esob { background: #f3f4f6; color: #4b5563; }

.prov-chamber-title {
    font-size: 12.5px;
    color: #4b5563;
    margin-bottom: 6px;
}

.prov-meta-line {
    font-size: 12px;
    color: #374151;
    margin-bottom: 10px;
}

.prov-card-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid #f0ece1;
    font-size: 12px;
    font-weight: 700;
}

.link-sm-gold { color: #b68018; }
.link-sm-muted { color: #6b7280; }

.chamber-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.cs-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}

.cs-stat strong {
    font-size: 18px;
    color: #ffe082;
}

.cs-stat span {
    font-size: 12px;
    color: #d1d5db;
}

.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-btn {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid #e5dec9;
    background: #faf8f4;
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
    cursor: pointer;
}

.filter-btn.active {
    background: #141824;
    color: #e6b84c;
    border-color: #141824;
}

.live-screen-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    padding: 3px 9px;
    border-radius: 99px;
}

.ext-site-link {
    color: #b68018;
    font-weight: 600;
    font-size: 12.5px;
}

.btn-group-inline {
    display: inline-flex;
    gap: 6px;
}

.prose-box p {
    margin-bottom: 14px;
    color: #374151;
    font-size: 14.5px;
}

.prose-box h3 {
    font-size: 17px;
    margin: 18px 0 8px;
    color: #111827;
}

.prose-box ul {
    margin-left: 20px;
    color: #374151;
    font-size: 14px;
}

.prose-box li {
    margin-bottom: 8px;
}

/* ============================================================================
   8. FOOTER
   ============================================================================ */
.site-footer {
    background: #121621;
    color: #9ca3af;
    padding: 48px 0 28px;
    border-top: 2px solid rgba(216, 166, 58, 0.3);
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-desc {
    font-size: 13px;
    line-height: 1.6;
    margin: 14px 0;
    color: #9ca3af;
}

.bot-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: #d1d5db;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}

.footer-heading {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 14px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.footer-links a:hover {
    color: #e6b84c;
}

.footer-bottom {
    padding-top: 22px;
    text-align: center;
    font-size: 12.5px;
    color: #6b7280;
}

/* ============================================================================
   9. RESPONSIVE (TABLET & MOBİL UYUMLULUK)
   ============================================================================ */
@media (max-width: 1280px) {
    .ticker-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
    .map-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 992px) {
    .header-inner {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 20px;
    }
    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .feature-boxes-grid,
    .footer-top-grid,
    .chamber-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .hero-title {
        font-size: 26px;
    }
    .hero-search-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .ticker-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-grid,
    .feature-boxes-grid,
    .footer-top-grid,
    .chamber-detail-grid,
    .chamber-stats-bar {
        grid-template-columns: 1fr;
    }
    .map-floating-card {
        position: static;
        max-width: 100%;
        margin-top: 12px;
    }
    .adv-summary-grid,
    .legal-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   10. GELİŞMİŞ İLLER ARASI KARŞILAŞTIRMA, TREND & VOLATİLİTE MERKEZİ
   ============================================================================ */
.adv-analytics-section {
    padding: 8px 0 42px;
}

.adv-card {
    border: 1px solid #e6dec8;
    background: #ffffff;
}

.adv-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    color: #b68018;
    background: #fef6e0;
    border: 1px solid #f2deab;
    padding: 3px 9px;
    border-radius: 99px;
    margin-bottom: 6px;
}

.adv-product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.adv-tab-btn {
    padding: 8px 13px;
    border-radius: 8px;
    border: 1px solid #e5dec9;
    background: #faf8f4;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
}

.adv-tab-btn:hover {
    border-color: #d8a63a;
    color: #111827;
}

.adv-tab-btn.active {
    background: linear-gradient(135deg, #161b28, #242b3d);
    color: #ffe082;
    border-color: #161b28;
    box-shadow: 0 3px 8px rgba(20, 24, 36, 0.18);
}

.adv-compare-panel,
.adv-trend-panel {
    display: none;
}

.adv-compare-panel.active,
.adv-trend-panel.active {
    display: block;
}

.adv-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.adv-stat-box {
    background: #faf8f3;
    border: 1px solid #ede6d6;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.adv-stat-box.highlight-green {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.adv-stat-box.highlight-gold {
    background: #fefce8;
    border-color: #fde68a;
}

.adv-stat-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b7280;
}

.adv-stat-val {
    font-size: 19px;
    font-weight: 800;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.adv-stat-box.highlight-green .adv-stat-val {
    color: #15803d;
}

.adv-stat-box.highlight-gold .adv-stat-val {
    color: #a16207;
}

.adv-stat-sub {
    font-size: 12px;
    color: #4b5563;
}

.adv-stat-sub a {
    font-weight: 700;
    color: #111827;
    text-decoration: underline;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    border-radius: 6px;
    background: #f3efe6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
}

.current-prov-highlight td {
    background: #fef9c3 !important;
}

.spread-pill {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: #374151;
    background: #f4f1ea;
    padding: 3px 8px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.spread-pill small {
    color: #6b7280;
    font-weight: 600;
}

.diff-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.diff-above {
    background: #fff7ed;
    color: #c2410c;
}

.diff-below {
    background: #ecfdf5;
    color: #047857;
}

.diff-neutral {
    background: #f3f4f6;
    color: #4b5563;
}

.range-meter-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.range-meter-track {
    width: 100%;
    height: 7px;
    background: #eee8d8;
    border-radius: 99px;
    overflow: hidden;
}

.range-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #16a34a 0%, #eab308 60%, #dc2626 100%);
    border-radius: 99px;
}

.range-meter-caption {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
}

.low-col {
    color: #b91c1c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.high-col {
    color: #15803d;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.trend-signal-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.signal-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
}

.sig-bull {
    background: #dcfce7;
    color: #15803d;
}

.sig-bear {
    background: #fee2e2;
    color: #b91c1c;
}

.sig-flat {
    background: #f3f4f6;
    color: #4b5563;
}

.sample-pill {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b5a3e;
    background: #f3efe6;
    padding: 3px 8px;
    border-radius: 99px;
}

/* ============================================================================
   11. YASAL UYARI KUTUSU (SPK & 5362 TESK MEVZUATI)
   ============================================================================ */
.legal-disclaimer-box {
    background: #fffdf8;
    border: 1px solid #e7d8b1;
    border-left: 5px solid #c99426;
    border-radius: var(--radius-card);
    padding: 22px 24px;
    box-shadow: var(--shadow-card);
}

.legal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0e6cc;
}

.legal-icon {
    font-size: 26px;
    line-height: 1;
}

.legal-title {
    font-size: 16.5px;
    font-weight: 800;
    color: #111827;
}

.legal-subtitle {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 2px;
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.legal-item h4 {
    font-size: 13.5px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 6px;
}

.legal-item p {
    font-size: 12.5px;
    line-height: 1.58;
    color: #4b5563;
}

/* ============================================================================
   12. FOOTER DİNAMİK FAVORİ ARAMA KELİMELERİ BULUTU & YASAL BAR
   ============================================================================ */
.footer-keywords-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(216, 166, 58, 0.22);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 32px;
}

.footer-keywords-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fk-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    color: #ffe082;
    background: rgba(216, 166, 58, 0.18);
    padding: 2px 8px;
    border-radius: 99px;
    margin-bottom: 4px;
}

.fk-title {
    font-size: 15px;
    font-weight: 700;
    color: #f3f4f6;
}

.fk-sub {
    font-size: 12px;
    color: #9ca3af;
}

.footer-keywords-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fk-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #d1d5db;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.16s ease;
}

.fk-tag:hover {
    background: rgba(216, 166, 58, 0.18);
    border-color: #d8a63a;
    color: #ffe082;
    transform: translateY(-1px);
}

.fk-tag-live {
    border-color: rgba(216, 166, 58, 0.28);
}

.fk-icon {
    font-size: 11px;
    opacity: 0.75;
}

.footer-legal-bar {
    margin-top: 24px;
    padding: 14px 18px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    line-height: 1.55;
    color: #9ca3af;
}

.footer-legal-bar strong {
    color: #e6b84c;
}

/* ============================================================================
   13. YAPAY ZEKA & SEO DİNAMİK SIKÇA SORULAN SORULAR (FAQ ACCORDION)
   ============================================================================ */
.faq-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-details-item {
    border: 1px solid #ece5d5;
    border-radius: 10px;
    background: #fcfbf8;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.faq-details-item[open] {
    border-color: #d8a63a;
    background: #ffffff;
}

.faq-summary-question {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
    cursor: pointer;
    user-select: none;
}

.faq-summary-question::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    color: #b68018;
    font-size: 16px;
    transition: transform 0.2s ease;
}

.faq-details-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer-body {
    padding: 0 18px 15px;
    font-size: 13.5px;
    line-height: 1.62;
    color: #374151;
    border-top: 1px solid #f5f0e4;
    padding-top: 12px;
}

/* ============================================================================
   14. DETAY SAYFALARI TABLO BAĞLANTILARI & HİZALAMA İYİLEŞTİRMELERİ
   ============================================================================ */
.plate-city-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    text-decoration: none;
}

.plate-city-link:hover strong {
    color: #b68018;
}

.plate-city-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.table-item-link {
    color: #111827;
    text-decoration: none;
    display: inline-block;
}

.table-item-link:hover strong {
    color: #b68018;
}

.sub-code-tag {
    display: block;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.chamber-table-name {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.phone-link {
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
}

.phone-link:hover {
    color: #b68018;
}

.table-btn-sm {
    white-space: nowrap;
}

/* ============================================================================
   15. TÜM SAYFALARDA ÜST CANLI GÜNCELLEME TARİHİ & SAATİ BANDI
   ============================================================================ */
.live-freshness-bar {
    background: #10131d;
    border-bottom: 1px solid rgba(216, 166, 58, 0.22);
    padding: 7px 0;
    font-size: 12px;
    color: #d1d5db;
}

.lfb-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.lfb-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lfb-label {
    color: #9ca3af;
    font-weight: 600;
}

.lfb-time strong {
    color: #ffe082;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lfb-note {
    color: #9ca3af;
    font-size: 11.5px;
}

.lfb-prov-pill {
    background: rgba(216, 166, 58, 0.18);
    border: 1px solid rgba(216, 166, 58, 0.35);
    color: #ffe082;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
}

.lfb-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lfb-mini-rate {
    color: #d1d5db;
    text-decoration: none;
    font-size: 11.5px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.lfb-mini-rate strong {
    color: #ffffff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lfb-mini-rate:hover {
    border-color: #d8a63a;
    color: #ffe082;
}