/* ============================================================
   Akıllı Saha — responsive.css
   Global responsive override layer. Loaded LAST on every real page.
   Amaç: mobil (320px) -> 4K (3840px) arası tutarlı yerleşim,
   mobil menü onarımı, geniş ekran konteyneri, taşma güvenliği.
   ============================================================ */

/* ---------- 0. Genel taşma / medya güvenliği ---------- */
html, body { max-width: 100%; }
img, svg, video, iframe, canvas, audio, object, embed {
  max-width: 100%;
}
img, video, canvas { height: auto; }
/* Geniş tablo ve grid'ler kendi kutusunda kayar, sayfa gövdesi kaymaz */
.table-responsive, .as-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }

/* ---------- 1. Geniş ekran konteyneri (2K / 4K) ---------- */
/* Bootstrap 4'te xxl yok; büyük ekranlarda içerik 1140px'te kalıp
   kenarlarda dev boşluk bırakıyordu. Kademeli genişletiyoruz. */
@media (min-width: 1600px) { .container { max-width: 1440px; } }
@media (min-width: 2000px) { .container { max-width: 1620px; } }
@media (min-width: 2560px) { .container { max-width: 1840px; } }
@media (min-width: 3200px) { .container { max-width: min(2400px, 74vw); } }
/* Çok büyük ekranda gövde metnini bir tık büyüt (okunabilirlik) */
@media (min-width: 2560px) { body { font-size: 15px; } }
@media (min-width: 3200px) { body { font-size: 16.5px; } }

/* ============================================================
   2. ANASAYFA HERO SLIDER — her ekrana uyumlu
   ============================================================ */

/* Özellik-listesi başlığı (slide 2/3): her özellik kendi satırında.
   Inline "·" ayracı hero genişliğinde daima bir satır kenarına düşüyordu. */
.hero-unit__title.as-title-list { line-height: 1.14 !important; }
.hero-unit__title.as-title-list .as-seg { display: block; white-space: nowrap; }
@media (min-width: 1200px) {
  .as-hero-unit-content .hero-unit__title.as-title-list { font-size: clamp(34px, 3vw, 52px) !important; }
}
.as-hero-unit-content .hero-unit__title {
  overflow-wrap: break-word;
  hyphens: none;
}

/* --- Yükseklik: akışkan ama makul sınırlar --- */
.as-hero-slider-wrapper {
  height: clamp(520px, 72vh, 760px) !important;
  min-height: 480px !important;
}
@media (min-width: 1200px) {
  .as-hero-slider-wrapper { height: clamp(600px, 76vh, 860px) !important; }
}
@media (min-width: 1600px) {
  .as-hero-slider-wrapper { height: clamp(680px, 74vh, 960px) !important; }
}
@media (min-width: 2560px) {
  .as-hero-slider-wrapper { height: clamp(820px, 68vh, 1180px) !important; }
}

/* --- Geniş ekran (≥1200): hero metin bloğu ve thumb şeridi, alttaki
   .container ile AYNI genişliğe hizalansın (2K/4K'da kayma olmasın) --- */
@media (min-width: 1200px) {
  .as-hero-slide-container,
  .as-hero-thumbs-wrapper .container {
    width: min(1140px, 100% - 30px) !important;
    max-width: min(1140px, 100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 0 15px !important;
  }
  .as-hero-thumbs-wrapper .container { transform: none !important; left: auto !important; }
  .as-hero-unit-content { width: min(640px, 54%) !important; }
  .as-hero-unit-content .hero-unit__title { font-size: clamp(44px, 3.6vw, 68px) !important; }
}
@media (min-width: 1600px) {
  .as-hero-slide-container,
  .as-hero-thumbs-wrapper .container { width: 1440px !important; max-width: 1440px !important; }
}
@media (min-width: 2000px) {
  .as-hero-slide-container,
  .as-hero-thumbs-wrapper .container { width: 1620px !important; max-width: 1620px !important; }
  .as-hero-unit-content { width: min(760px, 46%) !important; }
  .as-hero-unit-content .hero-unit__subtitle { font-size: 20px !important; }
  .as-hero-unit-content .hero-unit__title { font-size: clamp(60px, 3.4vw, 92px) !important; }
  .as-hero-actions .btn { font-size: 14px !important; padding: 14px 26px !important; }
}
@media (min-width: 2560px) {
  .as-hero-slide-container,
  .as-hero-thumbs-wrapper .container { width: 1840px !important; max-width: 1840px !important; }
  .as-hero-thumb .posts__title { font-size: 16px !important; }
}
@media (min-width: 3200px) {
  .as-hero-slide-container,
  .as-hero-thumbs-wrapper .container { width: min(2400px, 74vw) !important; max-width: min(2400px, 74vw) !important; }
}

/* --- Tablet yatay / küçük dizüstü (992–1199) --- */
@media (min-width: 992px) and (max-width: 1199px) {
  .as-hero-unit-content { width: min(600px, 62%) !important; }
  .as-hero-unit-content .hero-unit__title { font-size: clamp(36px, 4.4vw, 52px) !important; }
}

/* --- Tablet portre (768–991) --- */
@media (min-width: 768px) and (max-width: 991px) {
  .as-hero-slider-wrapper { --as-hero-thumbs-h: 116px; height: clamp(520px, 64vh, 640px) !important; }
  .as-hero-unit-content { width: min(560px, 84%) !important; }
  .as-hero-unit-content .hero-unit__subtitle { font-size: 13px !important; }
  .as-hero-unit-content .hero-unit__title { font-size: clamp(32px, 5.2vw, 46px) !important; margin-bottom: 22px !important; }
  .as-hero-unit-content .hero-unit__desc { font-size: 15px !important; }
}

/* --- Mobil (≤767) — sadeleştirilmiş, okunur slider --- */
@media (max-width: 767px) {
  .as-hero-slider-wrapper {
    --as-hero-thumbs-h: 74px !important;
    height: clamp(440px, 82vh, 600px) !important;
    min-height: 420px !important;
  }
  .as-hero-slide-container {
    align-items: center !important;
    padding: 0 20px !important;
  }
  .as-hero-unit-content { width: 100% !important; }
  .as-hero-unit-content .hero-unit__subtitle {
    font-size: 11px !important;
    letter-spacing: .12em !important;
    margin: 0 0 10px !important;
  }
  .as-hero-unit-content .hero-unit__title {
    font-size: clamp(24px, 7.4vw, 34px) !important;
    line-height: 1.08 !important;
    margin: 0 0 18px !important;
  }
  .as-hero-unit-content .hero-unit__desc { display: none !important; }
  .as-hero-actions .btn {
    min-width: 0 !important;
    width: auto !important;
    font-size: 12px !important;
    padding: 12px 20px !important;
  }

  /* Thumbs: 3 eşit sütun, kısa etiket + numara, dokunmatik dostu */
  .as-hero-thumbs-wrapper {
    background: linear-gradient(0deg, rgba(4,10,13,.98), rgba(4,10,13,.82)) !important;
  }
  .as-hero-thumbs-grid {
    display: flex !important;
    overflow: hidden !important;      /* sağdaki gri kayma şeridini kaldır */
    width: 100% !important;
  }
  .as-hero-thumb {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    opacity: .55;
  }
  .as-hero-thumb:last-child { border-right: 0 !important; }
  .as-hero-thumb.is-active { opacity: 1; }
  .as-hero-thumb .posts__inner {
    padding: 12px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 5px !important;
    min-height: var(--as-hero-thumbs-h) !important;
  }
  .as-hero-thumb .posts__cat { margin: 0 !important; }
  .as-hero-thumb .posts__cat-label {
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    line-height: 1.2 !important;
  }
  .as-hero-thumb.is-active .posts__cat-label { color: var(--as-accent, #75ff11) !important; }
  .as-hero-thumb .posts__title,
  .as-hero-thumb .posts__date { display: none !important; }
  .as-hero-thumb::before { height: 2px !important; }
}
@media (max-width: 380px) {
  .as-hero-unit-content .hero-unit__title { font-size: clamp(21px, 8vw, 28px) !important; }
  .as-hero-thumb .posts__cat-label { font-size: 9px !important; }
}

/* ---------- 3. Bölüm / tipografi akışkanlığı ---------- */
.section { padding: clamp(48px, 6vw, 96px) 0; }
@media (max-width: 480px) {
  .section-heading { display: block; }
  .section-note { text-align: left; margin-top: 14px; max-width: 100%; }
}

/* cards-grid küçük ekran kademeleri (site.css'i tamamlar) */
@media (max-width: 1200px) and (min-width: 821px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}
/* placeholder-card: küçük ekranda numara-boşluğunu daralt */
@media (max-width: 900px) {
  .placeholder-card__num { padding-bottom: 14px; }
  .placeholder-card { min-height: 0; }
}
@media (max-width: 767px) {
  .cards-grid { grid-template-columns: 1fr !important; gap: 12px; }
}

/* ---------- 4a. Masaüstü header logosu (dikey) — header alanının içinde kalsın ----------
   Alchemists şablonunda dikey logo (166x192) bar'ın üstüne/altına taşacak
   şekilde konumlandırılmış. Header bölgesine sığdırıyoruz. */
@media (min-width: 992px) {
  /* Logo, header__secondary + header__primary çubuklarının toplam yüksekliğini
     kaplasın; üst/alt ve iç boşluklarıyla birlikte hizalı dursun. */
  .header__secondary, .header__primary { overflow: visible; }
  .header-logo {
    top: auto !important;
    bottom: 0 !important;
    left: 8px !important;
    height: var(--as-logo-span, 150px);
    padding: 16px 0 14px !important;   /* üst/alt nefes payı */
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    transform: none !important;
  }
  .header-logo__img {
    width: auto !important;
    height: 100% !important;
    max-height: none !important;
    max-width: 128px !important;       /* menüye girmesin */
    object-fit: contain;
    object-position: left center;
  }
}
@media (min-width: 1200px) {
  .header-logo { left: 15px !important; }   /* .container iç boşluğu ile hizalı */
}

/* ---------- 4. Mobil header: yatay logo, barın dikey ortasında ---------- */
@media (max-width: 991px) {
  /* .header-mobile__inner yüksekliği 100px; burger/arama top:~40px.
     Logoyu 100px barın dikey ortasına SABİT px ile al — `.header-mobile__logo`
     `.header-mobile`'ın çocuğu; arama kutusu açılınca kapsayıcı uzuyor,
     `top:50%` kullanılırsa logo aşağı kayıyordu. Sabit `top` ile yerinde kalır. */
  .header-mobile__logo {
    top: 38px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    line-height: 0;
  }
  .header-mobile__logo-img {
    width: auto !important;
    height: 24px !important;
    max-height: 24px !important;
    max-width: 56vw !important;
    object-fit: contain;
  }
}
@media (max-width: 380px) {
  .header-mobile__logo-img { height: 20px !important; max-height: 20px !important; }
}

/* ---------- 5. Mobil menü onarımı ---------- */
@media (max-width: 991px) {
  /* Drawer'ı biraz genişlet, güvenli alanları koru */
  .main-nav {
    width: min(320px, 86vw) !important;
    transform: translateX(calc(-1 * min(320px, 86vw))) !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .site-wrapper--has-overlay .main-nav { transform: translateX(0) !important; }

  /* Sistem megamenüsü: JS 'as-open' ekleyince aç */
  .main-nav__list > li > .main-nav__megamenu { display: none; }
  .main-nav__list > li.as-open > .main-nav__megamenu { display: block !important; }

  /* has-children oku: JS eklediği .as-has-sub için ok göster + döndür */
  .main-nav__list > li.as-has-sub > a {
    position: relative;
    padding-right: 46px;
  }
  .main-nav__list > li.as-has-sub > a::after {
    content: "";
    position: absolute;
    right: 22px; top: 50%;
    width: 9px; height: 9px;
    margin-top: -6px;
    border-right: 2px solid #75ff11;
    border-bottom: 2px solid #75ff11;
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  .main-nav__list > li.as-open.as-has-sub > a::after {
    transform: rotate(-135deg);
  }

  /* Megamenü içeriği mobilde tek sütun, okunur */
  .main-nav__list .main-nav__megamenu {
    background-color: #23262b !important;
    padding: 6px 0 12px !important;
  }
  .main-nav__list .main-nav__megamenu > ul,
  .main-nav__list .main-nav__megamenu > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }
  /* Drawer'da tek tutarlı sol kenar (başlıkların solundaki boşluk gitsin) */
  .main-nav .main-nav__list > li > a { padding: 14px 18px !important; }
  .main-nav__list .main-nav__megamenu .main-nav__title {
    color: #fff !important;
    font: 700 10px/1 "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 14px 18px 8px !important;
  }
  .main-nav__list .main-nav__megamenu ul li a {
    display: block;
    padding: 9px 18px !important;
    font-size: 11px;
    color: #b6bcc2 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
  }
  .main-nav__list .main-nav__megamenu ul li a:hover { color: #75ff11 !important; }

  /* Menü kartları (küçük görselli): mobilde 2 sütun, görsel + metin hizalı.
     Genel 'ul li a' padding'i buradaki başlık/thumb linklerine sızmasın. */
  .main-nav__list .main-nav__megamenu .posts--simple-list {
    padding: 6px 18px 2px !important;
  }
  .main-nav__list .main-nav__megamenu .posts__item {
    display: grid !important;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .main-nav__list .main-nav__megamenu .posts__item + .posts__item {
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
  /* global-header.js runtime style'ı (height:100px, width:auto, overflow:hidden,
     max-width:none) mobilde görselleri kırpıyordu — burada tamamen eziyoruz. */
  .main-nav__list .main-nav__megamenu .as-mega-mini-thumb {
    height: auto !important;
    width: 84px !important;
    min-width: 0 !important;
    max-width: 84px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
  }
  .main-nav__list .main-nav__megamenu .as-mega-mini-thumb a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .main-nav__list .main-nav__megamenu .as-mega-mini-thumb img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 72px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .main-nav__list .main-nav__megamenu .posts__inner {
    display: block !important;
    padding: 0 !important;
    min-width: 0;
  }
  .main-nav__list .main-nav__megamenu .posts__cat { margin: 0 0 6px !important; }
  .main-nav__list .main-nav__megamenu .posts__title { margin: 0 !important; }
  .main-nav__list .main-nav__megamenu .posts__title a {
    display: block !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    letter-spacing: .02em;
  }
  .main-nav__list .main-nav__megamenu .posts__date {
    display: block;
    margin-top: 5px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #7d858c !important;
    text-transform: none;
  }

  /* Mobil ekstra linkler (global-header.js markup'ında .as-m-only) */
  .main-nav__list > li.as-m-only { display: block; }
  .main-nav__list > li.as-m-only:first-of-type { border-top: 4px solid #75ff11; margin-top: 6px; }
  .main-nav__list > li.as-m-only > a { color: #cfd4d9; }
  .main-nav__list > li.as-m-only.as-m-accent > a { color: #75ff11; }

  /* Kapatma (X) butonu */
  .main-nav .main-nav__back { display: block; }

  /* Drawer açıkken sosyal linkler görünür kalsın */
  .main-nav .social-links--main-nav {
    display: flex !important;
    gap: 6px;
    padding: 4px 18px 20px;
  }
  .main-nav .social-links--main-nav .social-links__item { display: inline-block !important; }
  /* Fikir Ver toggle mobilde gizli kalır (zaten global-header runtime CSS'te) */
}

/* Desktop'ta mobil-ekstra li'ler ve kapatma butonu gizli */
@media (min-width: 992px) {
  .main-nav__list > li.as-m-only { display: none !important; }
  .main-nav__back { display: none !important; }
}

/* Hero başlık segmentleri kelime ortasından kırılmasın */
.as-hero-unit-content .hero-unit__title > span { white-space: nowrap; }

/* ---------- 6. Header primary — orta ekran taşma ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .header__primary-inner { gap: 12px; }
  .main-nav__list > li > a { padding-left: 13px; padding-right: 13px; font-size: 11px; }
  .main-nav .social-links--main-nav { margin-left: 6px; }
}

/* ---------- 7. Genel responsive polisajı ---------- */

/* 7a. Yatay taşma güvenlik ağı — sticky'yi bozmayan 'clip' */
@media (max-width: 991px) {
  html, body { overflow-x: clip; }
}

/* 7b. Tablet portre + altı (≤991) */
@media (max-width: 991px) {
  .section-heading { display: block; }
  .section-note { text-align: left; margin-top: 12px; max-width: 100%; }
  .page-heading .container,
  .page-hero .container { padding-top: 8px; padding-bottom: 8px; }
  /* Yatay flex dizileri sarsın */
  [class$="__flow"], [class$="__switch"], [class$="-flow"] { flex-wrap: wrap !important; }
}

/* 7c. Tablet portre (768–991) tipografi */
@media (min-width: 768px) and (max-width: 991px) {
  .section { padding: clamp(44px, 6vw, 72px) 0; }
  .page-heading__title, .page-hero h1 { font-size: clamp(30px, 5vw, 44px); }
}

/* 7d. Mobil (≤767) */
@media (max-width: 767px) {
  .page-heading__title, .page-hero h1 { font-size: clamp(24px, 7vw, 38px); }
  .breadcrumb, .page-heading__breadcrumb { font-size: 10px; }
  .content-card, .card__content { padding: clamp(16px, 5vw, 32px); }
  .card__header { padding: clamp(14px, 4vw, 22px); }
  .row { margin-left: -8px; margin-right: -8px; }
  .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
  /* Form ızgaraları tek sütun */
  .as-contact-form__grid,
  .as-partner-form__grid,
  .as-idea-fields { grid-template-columns: 1fr !important; }
  /* Karşılaştırma / çok sütunlu özel grid'ler tek sütun */
  [class*="formation-switch"],
  [class*="league-flow"],
  [class*="engine__flow"],
  [class*="transition__flow"] { grid-template-columns: 1fr !important; }

  /* Şablon .btn-lg'nin devasa yatay padding'i (80px) mobilde metni 2–3 satıra
     böyüyor. Dar ekranda makul padding + tek satır. */
  .btn-lg { padding-left: 30px !important; padding-right: 30px !important; white-space: nowrap; }
  /* Tek başına duran büyük CTA butonları mobilde tam genişlik + tek satır */
  .as-overview-academy .text-lg-right .btn-lg,
  .as-overview-academy .btn-lg { display: block; width: 100%; text-align: center; }
}

/* 7e. Küçük mobil (≤380) */
@media (max-width: 380px) {
  .btn, .btn-sm { letter-spacing: .02em; }
  .container, .row > [class*="col-"] { padding-left: 14px; padding-right: 14px; }
}

/* 7f. Çok geniş ekran — içerik seyrek kalmasın */
@media (min-width: 2000px) {
  .section { padding: clamp(80px, 5vw, 140px) 0; }
  .section-title { font-size: clamp(40px, 2.6vw, 60px); }
}

/* mac-analizi / sistem sabit-kolon küçük grid'ler taşmasın */
@media (max-width: 640px) {
  .as-match-item, .as-system-league-card__row { min-width: 0; }
  .alc-match-best { margin-left: 0; margin-right: 0; }
}

/* mac-analizi maç başlığı (event-header) — tablet + mobilde taşmayı önle */
@media (max-width: 991px) {
  .alc-event-header--layout-2 .alc-event-team__logo-alt { display: none !important; }
  .alc-event-competitors { gap: 6px; }
  .alc-event-team__details { min-width: 0; }
  .alc-event-team__name { overflow-wrap: anywhere; white-space: normal; }
  .alc-event-team__logo { width: 46px !important; height: 46px !important; flex: 0 0 auto; overflow: hidden; }
  .alc-teams-legend__team-logo { max-height: 40px !important; width: auto !important; }
}
@media (max-width: 767px) {
  .alc-event-competitors { gap: 4px; }
  .alc-event-team { flex-wrap: wrap; }
  .alc-event-team__details { padding: 0 6px !important; }
  .alc-event-team__name { font-size: 12px !important; line-height: 1.15 !important; }
  .alc-event-team__logo { width: 34px !important; height: 40px !important; }
  .alc-event-team__score { font-size: 30px !important; }
  .alc-event-header__content .container,
  .alc-event-header__top .container,
  .alc-event-header__bottom .container { padding-left: 14px; padding-right: 14px; }
  /* Maç İstatistikleri başlığı: mobilde başlık üstte, logolar+buton altta */
  .alc-teams-legend { flex-wrap: wrap; }
  .alc-teams-legend__info { margin-left: 0 !important; width: 100%; margin-top: 12px; justify-content: flex-start; }
  .alc-teams-legend__teams { margin-bottom: 0 !important; }
  .alc-teams-legend__team-logo { max-height: 34px !important; }
  .alc-teams-legend__teams + .btn { margin-left: 14px !important; }
}
@media (max-width: 400px) {
  .alc-event-team__name { font-size: 11px !important; }
  .alc-event-team__score { font-size: 26px !important; }
}

/* Maç Akışı timeline: mobilde yatay kaydırılabilir — görünür ince scrollbar */
@media (max-width: 767px) {
  .card .game-timeline-wrapper { margin-left: -14px; margin-right: -14px; }
  .game-timeline-wrapper {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #75ff11 #e4e7ed;
  }
  .game-timeline-wrapper::-webkit-scrollbar { height: 4px; }
  .game-timeline-wrapper::-webkit-scrollbar-track { background: #e4e7ed; }
  .game-timeline-wrapper::-webkit-scrollbar-thumb { background: #75ff11; border-radius: 2px; }
  .game-timeline--adaptive { min-width: 600px; }
}

/* ---------- 9. Ek onarımlar (2026-08 cila turu) ---------- */

/* 9a. mac-analizi Aksiyonlar sekmesi — dakika dakika anlatım tablosu
   mobilde taşarsa kendi kutusunda kaysın. */
@media (max-width: 767px) {
  .alc-match-commentary-wrapper .card__content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .alc-match-commentary { min-width: 320px; }
}

/* 9b. Mobil menüdeki "Fikir Ver" satırı yeşil vurgu ile dursun */
@media (max-width: 991px) {
  .main-nav__list > li.as-m-idea > a { color: #75ff11; }
}

/* ============================================================
   10. TASARIM TUTARLILIĞI (2026-08 — tek marka rengi + primary buton)
   Her sayfada en son yüklendiği için burada normalize ediliyor.
   ============================================================ */

/* Marka yeşili tokenları:
   --as-accent      #75ff11  → dolgu, kenarlık, ikon, KOYU zemin üstü metin, odak halkası
   --as-accent-text #2e7d12  → AÇIK zemin üstünde metin/link (WCAG AA ~5:1) */

/* 10a. Primary buton kimliği — marka yeşili zemin + koyu yazı.
   .btn-outline hariç (şeffaf kalmalı). */
.btn-primary:not(.btn-outline),
.btn-primary:not(.btn-outline):link,
.btn-primary:not(.btn-outline):visited {
  background-color: #75ff11 !important;
  border-color: #75ff11 !important;
  color: #10241a !important;
}
.btn-primary:not(.btn-outline):hover,
.btn-primary:not(.btn-outline):focus,
.btn-primary:not(.btn-outline):active {
  background-color: #8bff3a !important;
  border-color: #8bff3a !important;
  color: #10241a !important;
}
/* Outline + primary birlikte: şeffaf zemin, açık sayfalarda okunur koyu yeşil */
.btn-outline.btn-primary {
  background-color: transparent !important;
  border-color: #2e7d12 !important;
  color: #2e7d12 !important;
}
.btn-outline.btn-primary:hover,
.btn-outline.btn-primary:focus {
  background-color: #2e7d12 !important;
  border-color: #2e7d12 !important;
  color: #fff !important;
}

/* 10b. Eyebrow / kicker — tek harf aralığı; renk zemine göre.
   KOYU bağlam (ana sayfa hero + section, 404): parlak #75ff11. */
.section-kicker,
.hero__kicker,
.as-error-kicker {
  color: #75ff11 !important;
  letter-spacing: .1em;
}
/* AÇIK bağlam (sistem / academy / partner / mac-izle / odeme kartları): koyu yeşil. */
.as-overview-kicker,
.as-overview-section-head > span,
.as-compare-kicker,
.as-tourn-kicker,
.as-squad-kicker,
.as-watch-entry__kicker,
.as-analysis-purchase-card__kicker,
.as-match-stats-cta__copy > span,
.as-pilot__kicker,
.as-directory-cta__kicker,
.as-directory-beta__kicker,
.as-academy-note__type,
.as-leagues-kicker {
  color: #2e7d12 !important;
  letter-spacing: .1em;
}

/* 10c. Açık zeminde yeşil METİN/LINK → okunur koyu yeşil.
   (Dolgu/kenarlık/ikon-çip #75ff11 kalır; onlar ayrı kurallarda.) */
.as-simple-page .as-simple-copy a:not(.btn),
.as-contact-form-lead a,
.as-contact-form__note a {
  color: #2e7d12;
}

/* 10d. Odak görünürlüğü (klavye) — her yerde belirgin halka. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid #2e7d12 !important;
  outline-offset: 2px !important;
}
/* Koyu zeminlerde parlak yeşil halka daha görünür */
.header a:focus-visible,
.main-nav a:focus-visible,
.pushy-panel a:focus-visible,
.pushy-panel button:focus-visible,
#as-global-footer a:focus-visible,
.hero a:focus-visible,
.page-hero a:focus-visible,
.as-skip-link:focus {
  outline-color: #75ff11 !important;
}

/* 10e. "İçeriğe geç" atlama linki */
.as-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: #10241a;
  color: #75ff11;
  padding: 10px 16px;
  font: 700 12px/1 "Montserrat", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.as-skip-link:focus { left: 0; }

/* 10f. Mobilde metin butonları için makul dokunma yüksekliği */
@media (max-width: 767px) {
  .btn-xs {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* 10g. Küçük ekran taşma cilası */
@media (max-width: 400px) {
  .as-error-number { font-size: 90px !important; }
}
.as-hero-thumb .posts__cat-label { white-space: nowrap; }

/* 10h. Absolüt köşe numaraları başlığa binmesin */
.as-fc-calibration__card h4,
.as-bests-card h5,
.as-overview-step h4 { padding-right: 34px; }

/* 10i. Sayfa yolu (breadcrumb) şeridi — bespoke hero'su olan sayfalar için */
.as-crumbs {
  background: #0f171c;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font: 600 11px/1 "Montserrat", Arial, sans-serif;
}
.as-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.as-crumbs li { display: inline-flex; align-items: center; color: #8b969d; }
.as-crumbs li + li::before { content: "›"; margin-right: 8px; color: #55636b; }
.as-crumbs a { color: #aeb8be; text-decoration: none; }
.as-crumbs a:hover { color: #75ff11; }
.as-crumbs [aria-current="page"] { color: #eef1f3; }
@media (max-width: 767px) { .as-crumbs ol { padding: 10px 0; font-size: 10px; } }

/* ---------- 8. Erişilebilirlik ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 11. Form durum kutusu (.as-form-status) ----------
   Vendor .alert deseni sol tarafa 60px'lik mutlak konumlu ikon şeridi + 85px
   padding koyuyor. Sayfa CSS'leri padding'i ezince metin ikonun altında kalıyordu.
   Burada tüm formlarda tutarlı, kompakt bir rozet + doğru iç boşluk sağlanır. */
.as-form-status.alert {
  padding: 13px 16px 13px 46px !important;
  color: #31404b;
  border-radius: 4px !important;
  border: 1px solid transparent;
  font-size: 12.5px;
  line-height: 1.6;
}
.as-form-status.alert::before {
  width: 22px !important;
  height: 22px !important;
  top: 12px !important;
  bottom: auto !important;
  left: 14px !important;
  border-radius: 50% !important;
  background-size: 11px 10px !important;
}
.as-form-status.alert-success {
  background: #f1fbe8 !important;
  border-color: #cdeeb0 !important;
  color: #356b12 !important;
}
.as-form-status.alert-success::before { background-color: #3fae2a !important; }
.as-form-status.alert-danger {
  background: #fdf0f0 !important;
  border-color: #f3cccc !important;
  color: #a33a3a !important;
}
.as-form-status.alert-danger::before { background-color: #d64545 !important; }
.as-form-status.alert-warning {
  background: #fff8e8 !important;
  border-color: #f0e0b0 !important;
  color: #8a6d1a !important;
}
.as-form-status[hidden] { display: none !important; }

/* ---------- 12. Sekmeli vitrin sayfalarının kategori navigasyonu (mobil) -------
   Şablonun `.content-filter` deseni ≤991px'de yalnızca aktif sekmeyi gösterip
   "…" (toggle) ile DİKEY açıyor → 100px+ yüksekliğinde tek, boş görünen bir
   buton + açılınca alt alta dev bloklar. /sistem/, /oyuncu/*, /takim/*,
   /mac-analizi/ hepsi bu desende. Mobilde tüm sekmeleri her zaman görünür,
   yatay kaydırmalı kompakt bir şeride çeviriyoruz. */
@media (max-width: 767px) {
  .content-filter { border-bottom: 1px solid #e4e7ed; }
  .content-filter__toggle { display: none !important; }

  .content-filter > .container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #75ff11 transparent;
  }
  .content-filter > .container::-webkit-scrollbar { height: 3px; -webkit-appearance: none; }
  .content-filter > .container::-webkit-scrollbar-thumb { background: #75ff11; }

  .content-filter__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: -webkit-max-content;
    width: max-content;
    min-width: 100%;
    border: 0 !important;
  }
  .content-filter__item,
  .content-filter__item:not(.content-filter__item--active) {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
  }
  .content-filter__link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 46px !important;
    padding: 0 15px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
  }
  .content-filter__link::before { display: none !important; }
  .content-filter__link small { display: none !important; }
  .content-filter__item--active .content-filter__link {
    border-bottom-color: #75ff11 !important;
    color: #1e2730 !important;
  }
  .as-system-primary-filter .as-system-tab-icon {
    height: auto !important;
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* Alt sekme şeridi: aktif sekme görünür şekilde konumlansın */
  .as-system-subnav-shell .container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .as-system-subnav.is-active { scroll-snap-type: x proximity; }
  .as-system-subtab { scroll-snap-align: start; }

  /* Yatay kaydırmalı tablolar (ör. FC Kart pozisyon ağırlıkları): mobilde
     kaydırılabildiğini belli eden kalıcı ince şerit + kart kenarına yaslama */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #75ff11 transparent;
  }
  .table-responsive::-webkit-scrollbar { height: 4px; -webkit-appearance: none; }
  .table-responsive::-webkit-scrollbar-thumb { background: #75ff11; border-radius: 4px; }
}

/* ==========================================================================
   13. Mobil menü açıkken arka planın "silik sızması" / footer'ın yukarı
       kaymasi. Şablon `.site-wrapper--has-overlay`'i `position:absolute +
       height:100vh + overflow:hidden` yapıyor; bazı tarayıcılarda (özellikle
       sayfa aşağı kaydırılmışken) footer bloğu üstte hayalet gibi görünüyordu.
       Çözüm: sarmalayıcıyı yerinde bırak, kaydırmayı `body` üzerinden kilitle,
       menü örtüsünü tam opak yap.
   ========================================================================== */
@media (max-width: 991px) {
  .site-wrapper--has-overlay,
  .site-wrapper--has-overlay-pushy {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .site-wrapper--has-overlay .site-overlay,
  .site-wrapper--has-overlay-pushy .site-overlay {
    background-color: #14181c !important;   /* tam opak: arka plan sızmasın */
  }
}