/* =============================================
   SiteBul.pro — modernleştirme katmanı (2026-10-23)
   style.css (Metalik Mavi: zemin #080d14, vurgu #2d7dd2, üst menü) olduğu gibi duruyor; bu dosya üstüne yazar:
   sistem fontu (H3, Google Fonts kaldırıldı), okunur metin kontrastı ve 16px gövde (V3), odak çerçeveleri ve
   azaltılmış hareket (V7), parlak gradient yerine düz buton (V1), yeni bileşenler (sabit buton, benzer siteler,
   A–Z dizin, sorumlu oyun notu, popup).
   ============================================= */

:root {
  --sb-bg: #080d14;
  --sb-surface: #0a1020;
  --sb-surface-2: #0e1828;
  --sb-line: #162035;
  --sb-line-2: #1e3050;
  --sb-accent: #2d7dd2;
  --sb-accent-2: #5ba3e8;
  --sb-head: #eef2fc;
  --sb-text: #a9b8cf;
  --sb-muted: #7d90ad;
  --sb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

html { font-family: var(--sb-font); font-size: 16px; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { background: var(--sb-bg); color: #c8d4e8; }
button, input, .sbp-nav-trigger, .sbp-hero-search, .sbp-filter-btn, .sbp-btn-primary, .sbp-page-btn, .sbp-main-btn,
.sbp-sp-btn-lg, .sbp-sp-btn, .sbp-sp-card-btn { font-family: var(--sb-font); }

/* ── Erişilebilirlik (V7) ── */
.sbp-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--sb-accent); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.sbp-skip:focus { top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sb-accent-2); outline-offset: 2px; border-radius: 6px;
}
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Header ── */
.sbp-logo-icon { height: 28px; width: 28px; margin-right: 8px; border-radius: 6px; }
.sbp-nav-links > a, .sbp-nav-trigger { color: #8197b6; }
.sbp-nav-links > a[aria-current="page"] { color: #e8eef8; background: #10182a; }
.sbp-nav-menu a { color: #8fa3c0; }
.sbp-nav-menu a[aria-current="page"] { color: #fff; background: #162035; }
.sbp-nav-trigger svg { transition: transform .15s; }
.sbp-nav-dropdown.open .sbp-nav-trigger svg { transform: rotate(180deg); }
.sbp-nav-cta { display: inline-flex; align-items: center; gap: 6px; }
.sbp-nav-telegram { display: inline-flex; align-items: center; gap: 6px; }
.sbp-mobile-toggle { color: #a9b8cf; }
.sbp-mobile-sidebar nav a { color: #8fa3c0; font-size: 15px; }

/* ── Hero ── */
.sbp-hdesc { color: #8197b6; }
.sbp-hdesc strong { color: var(--sb-accent-2); font-weight: 700; }
.sbp-stat-l { color: #6f84a3; font-size: 11px; }
.sbp-hero-search { font-size: 16px; }
.sbp-hero-search::-webkit-search-cancel-button { display: none; }

/* ── Filtre çubuğu / kartlar ── */
.sbp-filter-btn { color: #8197b6; font-size: 13px; padding: 6px 14px; }
.sbp-filter-count { color: #6f84a3; }
.sbp-toolbar-left h2 { font-size: 20px; letter-spacing: -.3px; }
.sbp-section-sub, .sbp-page-info { color: #6f84a3; }
.sbp-section-sponsors { padding-bottom: 0; }
.sbp-card-name { font-size: 16px; margin-bottom: 6px; line-height: 1.25; }
.sbp-card-name a { color: inherit; }
.sbp-card-name a:hover { color: var(--sb-accent-2); }
.sbp-card-desc { color: #8197b6; font-size: 14px; }
.sbp-card-logo { height: 52px; }
.sbp-btn-primary, .sbp-btn-secondary { font-size: 13px; padding: 10px 14px; }
.sbp-btn-secondary { color: #a9b8cf; }
.sbp-site-card:hover { transform: none; }
.sbp-search-empty p { color: #8197b6; }

/* ── İç sayfa ── */
.sbp-breadcrumb { font-size: 13px; color: #4f6584; }
.sbp-breadcrumb a { color: #6f84a3; }
.sbp-breadcrumb a:hover { color: #a9b8cf; }
.sbp-breadcrumb .current { color: #a9b8cf; }
.sbp-breadcrumb .sep { color: #34486a; }
.sbp-site-name { font-size: clamp(24px, 3.4vw, 32px); }
.sbp-site-short { font-size: 15px; color: #8fa3c0; max-width: 720px; }
.sbp-main-btn { font-size: 16px; }
.sbp-updated { font-size: 13px; color: #6f84a3; margin: 0; }
.sbp-campaign { display: flex; align-items: flex-start; gap: 8px; max-width: 720px; margin: -4px 0 16px; padding: 10px 14px; font-size: 14px; color: #a9b8cf; background: var(--sb-surface-2); border: 1px solid var(--sb-line); border-radius: 10px; }
.sbp-campaign svg { flex-shrink: 0; margin-top: 3px; color: var(--sb-accent-2); }
.sbp-campaign strong { color: #e8eef8; }
.sbp-ch { gap: 12px; padding: 16px 20px; }
.sbp-ct { font-size: 15px; color: #dfe7f5; letter-spacing: -.1px; }
.sbp-ctag { color: #6f84a3; white-space: nowrap; }
a.sbp-ctag:hover { color: var(--sb-accent-2); }
.sbp-content { min-width: 0; }

/* Okuma metni (V3): 16px, rahat satır aralığı, yeterli kontrast */
.sbp-review-content { font-size: 16px; line-height: 1.8; color: var(--sb-text); padding: 22px 24px; overflow-wrap: anywhere; }
.sbp-review-content > :first-child { margin-top: 0; }
.sbp-review-content h2 { font-size: 21px; color: var(--sb-head); letter-spacing: -.3px; margin: 30px 0 12px; line-height: 1.3; }
.sbp-review-content h3 { font-size: 18px; color: #dfe7f5; margin: 24px 0 10px; line-height: 1.35; }
.sbp-review-content h4 { font-size: 16px; color: #c8d4e8; }
.sbp-review-content p { margin-bottom: 14px; }
.sbp-review-content strong { color: #dfe7f5; }
.sbp-review-content td { color: var(--sb-text); }
.sbp-review-content ul li, .sbp-review-content ol li { margin-bottom: 7px; }

/* SSS */
.sbp-fq { font-size: 15px; padding: 16px 20px; color: #dfe7f5; }
.sbp-fq-icon { color: #4f6584; }
.sbp-fa { font-size: 15px; color: var(--sb-text); line-height: 1.75; padding: 0 20px 16px; }

/* ── Sponsor listeleri (V6: tek parça, sabit sıra) ── */
ol.sbp-sp-card-grid, ol.sbp-sp-inline-list { list-style: none; margin: 0; }
.sbp-sp-card { transition: border-color .15s; }
.sbp-sp-card:hover { transform: none; }
.sbp-sp-card-logo { width: 100px; height: 48px; object-fit: contain; }
.sbp-sp-card-logo-txt { margin: 0 auto; }
.sbp-sp-card-name { font-size: 14px; }
.sbp-sp-card-name a, .sbp-sp-name a { color: inherit; }
.sbp-sp-card-name a:hover, .sbp-sp-name a:hover { color: var(--sb-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.sbp-sp-card-bonus { font-size: 13px; color: var(--sb-accent-2); }
.sbp-sp-card-btn { font-size: 13px; padding: 9px 10px; display: block; color: #fff; }
.sbp-sp-card-btn:hover { opacity: .9; }
.sbp-sp-row-inline { border-bottom-color: var(--sb-line); }
.sbp-sp-logo-img-lg { width: 70px; height: 40px; object-fit: contain; }
.sbp-sp-logo-img-lg-txt, .sbp-sp-card-logo-txt, .sbp-sp-logo-img-txt {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 40px;
  background: var(--sb-surface-2); border: 1px solid var(--sb-line); border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--sb-accent-2);
}
.sbp-sp-name { font-size: 15px; color: #dfe7f5; }
.sbp-sp-bonus { font-size: 13px; color: var(--sb-accent-2); }
.sbp-sp-btn-lg { font-size: 13px; padding: 9px 18px; }
.sbp-sp-where { color: #6f84a3; font-size: 13px; }
.sbp-sp-note { margin: 0; padding: 12px 20px 16px; font-size: 12.5px; line-height: 1.6; color: #6f84a3; border-top: 1px solid var(--sb-line); }
.sbp-sp-note a { color: var(--sb-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.sbp-muted { padding: 18px 20px; color: #8197b6; font-size: 14px; }

/* Editörün Tavsiyesi: parlayan gradient yerine düz amber buton (V1) */
.sbp-featured-card-btn { background: #d98a07 !important; box-shadow: none; }
.sbp-featured-ct svg { color: #f59e0b; fill: #f59e0b; }

/* ── Benzer siteler / önceki-sonraki (T9) ── */
.sbp-related { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; padding: 16px; margin: 0; }
.sbp-related a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sb-surface-2); border: 1px solid var(--sb-line); border-radius: 9px; font-size: 14px; font-weight: 600; color: #c8d4e8; transition: border-color .15s, color .15s; min-height: 46px; }
.sbp-related a:hover { border-color: rgba(45,125,210,.45); color: #fff; }
.sbp-related img { width: 40px; height: 28px; object-fit: contain; flex-shrink: 0; }
.sbp-related-ic { width: 40px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--sb-accent-2); background: var(--sb-bg); border-radius: 6px; flex-shrink: 0; }
.sbp-prevnext { display: flex; justify-content: space-between; gap: 10px; padding: 0 16px 16px; }
.sbp-prevnext a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--sb-line); border-radius: 9px; color: #c8d4e8; font-size: 14px; font-weight: 600; max-width: 48%; }
.sbp-prevnext a:hover { border-color: rgba(45,125,210,.45); }
.sbp-prevnext a[rel="next"] { text-align: right; margin-left: auto; }
.sbp-prevnext small { display: block; font-size: 11px; font-weight: 600; color: #6f84a3; text-transform: uppercase; letter-spacing: .4px; }

/* ── A–Z dizin ── */
.sbp-az-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sbp-az-letters a { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; background: var(--sb-surface-2); border: 1px solid var(--sb-line); border-radius: 8px; font-size: 14px; font-weight: 700; color: #a9b8cf; }
.sbp-az-letters a:hover { border-color: var(--sb-accent); color: #fff; }
.sbp-az-group { scroll-margin-top: 76px; }
.sbp-az-list { list-style: none; columns: 4 180px; column-gap: 24px; padding: 16px 20px; margin: 0; }
.sbp-az-list li { break-inside: avoid; padding: 3px 0; }
.sbp-az-list a { font-size: 15px; color: #a9b8cf; }
.sbp-az-list a:hover { color: var(--sb-accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* ── Ana sayfa tanıtım ── */
.sbp-about .sbp-review-content a, .sbp-review-content a { color: var(--sb-accent-2); }

/* ── Sorumlu oyun (K4) ── */
.sbp-rg-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 12px; }
.sbp-rg-note p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #8197b6; }
.sbp-rg-note a, .sbp-footer-warn a { color: var(--sb-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.sbp-18plus { color: #a9b8cf; border-color: var(--sb-line-2); font-size: 11px; flex-shrink: 0; }

/* ── Footer ── */
.sbp-footer-logo-icon { width: 26px; height: 26px; border-radius: 6px; }
.sbp-footer nav h2 { font-size: 11px; font-weight: 700; color: #6f84a3; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.sbp-footer nav a { font-size: 14px; color: #8197b6; }
.sbp-footer nav a:hover { color: #dfe7f5; }
.sbp-footer-desc { color: #7d90ad; font-size: 14px; }
.sbp-footer-desc + .sbp-footer-desc { margin-top: 8px; }
.sbp-footer-desc a { color: var(--sb-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.sbp-footer-warn { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0 18px; border-top: 1px solid var(--sb-surface-2); }
.sbp-footer-warn p { margin: 0; font-size: 13px; line-height: 1.6; color: #7d90ad; }
.sbp-footer-bottom, .sbp-footer-legal a { color: #6f84a3; font-size: 12px; }

/* ── Sabit "Siteye Git" çubuğu (V4, yalnızca mobil) ── */
.sbp-sticky-cta { display: none; }
@media (max-width: 768px) {
  .sbp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(10,16,32,.97); border-top: 1px solid var(--sb-line); transform: translateY(110%); transition: transform .2s ease; }
  .sbp-sticky-cta.show { transform: translateY(0); }
  .sbp-sticky-cta span { font-weight: 800; color: #e8eef8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbp-sticky-cta .sbp-main-btn { padding: 10px 20px; font-size: 15px; flex-shrink: 0; }
  .sbp-inner-top { flex-direction: column; }
  .sbp-site-logo { width: 140px; height: 56px; }
  .sbp-cta-row .sbp-main-btn { width: 100%; justify-content: center; }
  .sbp-review-content { padding: 18px 16px; font-size: 16px; }
  .sbp-ch { padding: 14px 16px; }
  .sbp-sp-row-inline { padding: 12px 14px; }
  .sbp-sp-logo-img-lg { width: 56px; }
  .sbp-related { grid-template-columns: 1fr 1fr; padding: 12px; }
  .sbp-az-list { columns: 2 140px; }
  .sbp-prevnext a { max-width: none; flex: 1; }
  .sbp-filters-bar { top: 58px; }
}

/* ── Betlink popup (A5) ── */
.sbp-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.7); }
.sbp-popup-box { position: relative; max-width: 480px; width: 100%; }
.sbp-popup-box img { width: 100%; height: auto; border-radius: 12px; display: block; }
.sbp-popup-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sb-line-2); background: var(--sb-surface); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
@media (max-width: 520px) { .sbp-popup-close { top: 6px; right: 6px; } }