/* Anasayfa stilleri — eskiden home.blade.php icinde inline idi;
   HTML boyutunu (metin/kod oranini) dusurmek icin harici dosyaya tasindi. */
  html, body { margin:0; padding:0; background: var(--sp-surface); }
  body { padding-top: 0; }

  /* React (home-part1/2.js defer) yüklenene kadar #app 0 yükseklikte kalıyordu:
     footer ilk boyamada görünür oluyor, React mount olunca ekran dışına itiliyordu
     → CLS ~0.8. Boşken viewport kadar yer ayır + hero boyutunda iskelet göster.
     NOT: #app artık SEO fallback <h1> içerdiğinden :empty eşleşmez; "mount öncesi"
     durumu tek çocuğun o h1 olmasıyla yakalanır — React render edince h1:only-child
     bozulur, iskelet kendiliğinden kaybolur. */
  #app:has(> h1:only-child) { display: block; min-height: 100vh; }
  #app:has(> h1:only-child)::before {
    content: ""; display: block;
    max-width: 1280px; height: min(560px, 72vh);
    margin: 20px auto 0; padding: 0;
    border-radius: 28px;
    background: linear-gradient(100deg, #EDF1F7 40%, #F6F8FB 50%, #EDF1F7 60%);
    background-size: 200% 100%;
    animation: sp-app-skel 1.2s linear infinite;
  }
  @media (max-width: 1320px) { #app:has(> h1:only-child)::before { margin-left: 16px; margin-right: 16px; } }

  /* ===== Anasayfa editoryal SEO rehberi (partials/home-seo-content) ===== */
  .sp-home-seo {
    margin-top: 64px;
    padding: 72px 24px;
    border-top: 1px solid var(--sp-line);
    background:
      radial-gradient(circle at 8% 3%, rgba(79, 255, 168, .13), transparent 25%),
      linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
  }
  .sp-home-seo-inner { max-width: 1280px; margin: 0 auto; }
  .sp-home-seo-hero {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
    gap: clamp(48px, 8vw, 120px);
    align-items: end;
    margin-bottom: 42px;
  }
  .sp-home-seo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--sp-blue);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .sp-home-seo-kicker span {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--sp-lime);
  }
  .sp-home-seo h2 {
    max-width: 580px;
    margin: 0;
    color: var(--sp-ink);
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.03;
    font-weight: 650;
    letter-spacing: -.045em;
  }
  .sp-home-seo-intro {
    max-width: 680px;
    margin: 0 0 2px;
    color: #59677c;
    font-size: 16px;
    line-height: 1.72;
  }
  .sp-home-seo-guides {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #dbe3ed;
    border-radius: 24px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 24px 70px -52px rgba(19, 38, 77, .5);
  }
  .sp-home-seo-guide {
    position: relative;
    min-width: 0;
    padding: 24px 24px 26px;
  }
  .sp-home-seo-guide:not(:last-child) { border-right: 1px solid #dbe3ed; }
  .sp-home-seo-guide::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--sp-blue);
    opacity: 0;
    transform: scaleX(.3);
    transition: opacity .2s ease, transform .2s ease;
  }
  .sp-home-seo-guide:hover::after { opacity: 1; transform: scaleX(1); }
  .sp-home-seo-guide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .sp-home-seo-guide-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--sp-ink);
    color: #fff;
  }
  .sp-home-seo-guide:nth-child(2) .sp-home-seo-guide-icon { background: var(--sp-blue); }
  .sp-home-seo-guide:nth-child(3) .sp-home-seo-guide-icon { background: #087f79; }
  .sp-home-seo-guide:nth-child(4) .sp-home-seo-guide-icon { background: #e8ff74; color: var(--sp-ink); }
  .sp-home-seo-guide-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sp-home-seo-guide-no {
    color: #a5b0c0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .08em;
  }
  .sp-home-seo-guide h3 {
    max-width: 420px;
    margin: 0 0 10px;
    color: var(--sp-ink);
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -.025em;
  }
  .sp-home-seo-guide p {
    max-width: 510px;
    margin: 0;
    color: #667489;
    font-size: 14px;
    line-height: 1.72;
  }
  .sp-home-seo-guide-teaser { min-height: 72px; }
  .sp-home-seo-more { margin-top: 12px; }
  .sp-home-seo-more summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--sp-blue);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .sp-home-seo-more summary::-webkit-details-marker { display: none; }
  .sp-home-seo-more summary svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
  }
  .sp-home-seo-more-close { display: none; }
  .sp-home-seo-more[open] .sp-home-seo-more-open { display: none; }
  .sp-home-seo-more[open] .sp-home-seo-more-close { display: inline; }
  .sp-home-seo-more[open] summary svg { transform: rotate(180deg); }
  .sp-home-seo-more > p {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5eaf1;
  }
  .sp-home-seo-directory {
    display: grid;
    grid-template-columns: 1.05fr repeat(3, 1fr);
    gap: 34px;
    margin-top: 22px;
    padding: 34px;
    border-radius: 24px;
    background: var(--sp-ink);
    color: #fff;
  }
  .sp-home-seo-directory-intro span {
    display: block;
    margin-bottom: 8px;
    color: var(--sp-lime);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .sp-home-seo-directory-intro h3 {
    max-width: 220px;
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.035em;
  }
  .sp-home-seo-link-group h4 {
    margin: 1px 0 14px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
  }
  .sp-home-seo-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sp-home-seo-links a {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: #cbd4e1;
    font-size: 11.5px;
    line-height: 1.2;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
  }
  .sp-home-seo-links a:hover {
    border-color: var(--sp-lime);
    background: var(--sp-lime);
    color: var(--sp-ink);
  }
  @media (max-width: 980px) {
    .sp-home-seo { padding: 56px 20px; }
    .sp-home-seo-hero { grid-template-columns: 1fr; gap: 24px; }
    .sp-home-seo-intro { max-width: 760px; }
    .sp-home-seo-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-home-seo-guide:not(:last-child) { border-right: 0; }
    .sp-home-seo-guide:nth-child(odd) { border-right: 1px solid #dbe3ed; }
    .sp-home-seo-guide:nth-child(-n+2) { border-bottom: 1px solid #dbe3ed; }
    .sp-home-seo-guide-teaser { min-height: 48px; }
    .sp-home-seo-directory { grid-template-columns: 1fr 1fr; }
    .sp-home-seo-directory-intro { grid-row: span 2; }
  }
  @media (max-width: 680px) {
    .sp-home-seo { margin-top: 40px; padding: 44px 14px; }
    .sp-home-seo-hero { gap: 18px; margin-bottom: 28px; }
    .sp-home-seo h2 { font-size: 34px; }
    .sp-home-seo-intro { font-size: 14px; line-height: 1.68; }
    .sp-home-seo-guides { grid-template-columns: 1fr; border-radius: 18px; }
    .sp-home-seo-guide { min-height: 0; padding: 24px 22px 26px; }
    .sp-home-seo-guide:nth-child(odd) { border-right: 0; }
    .sp-home-seo-guide:nth-child(-n+3) { border-bottom: 1px solid #dbe3ed; }
    .sp-home-seo-guide-head { margin-bottom: 18px; }
    .sp-home-seo-guide h3 { font-size: 19px; }
    .sp-home-seo-guide p { font-size: 13.5px; }
    .sp-home-seo-guide-teaser { min-height: 0; }
    .sp-home-seo-directory { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; border-radius: 18px; }
    .sp-home-seo-directory-intro { grid-row: auto; padding-bottom: 2px; }
    .sp-home-seo-directory-intro h3 { max-width: 280px; }
  }
  @keyframes sp-app-skel { to { background-position: -200% 0; } }

  /* =====================================================================
     SPORARA MOBILE — Desktop (>980px) HİÇ değişmez, sadece tablet/phone'a stiller uygulanır
     ===================================================================== */

  /* ---------- NAVBAR (className tabanlı, sağlam) ---------- */
  .sp-adv-nav-drawer { display: none; }
  /* Hero sekme "devamı var" göstergesi yalnızca mobilde görünür */
  .sp-hero-tabs-more { display: none; }

  @media (max-width: 980px) {
    /* Container padding küçült */
    .sp-adv-nav-inner { padding: 0 16px !important; }
    /* Search bar tablet ve altında gizlenir, sadece icon görünür */
    .sp-adv-nav-search { display: none !important; }
    .sp-adv-nav-search-icon { display: inline-flex !important; align-items: center; justify-content: center; }
    /* Meta linkleri (Kurumsal/Yardım) gizle, sadece LocaleCurrencyPicker görünsün */
    .sp-adv-nav-meta { gap: 8px !important; }
    .sp-adv-nav-meta-link { display: none !important; }
    /* Hediye Et büyük buton gizle */
    .sp-adv-nav-gift { display: none !important; }
    /* Favori gizle */
    .sp-adv-nav-fav { display: none !important; }
    /* Hamburger görünür */
    .sp-adv-nav-burger { display: inline-flex !important; align-items: center; justify-content: center; }
    /* Logo + login spacing */
    .sp-adv-nav-row1 { gap: 10px !important; padding: 10px 0 !important; }
    .sp-adv-nav-spacer { display: none !important; }

    /* Kategori barı yatay scroll */
    .sp-adv-nav-cats {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      margin: 0 -16px !important;
      padding: 8px 16px !important;
    }
    .sp-adv-nav-cats::-webkit-scrollbar { display: none; }
    .sp-adv-nav-cats > * { flex-shrink: 0 !important; white-space: nowrap !important; }
  }

  @media (max-width: 640px) {
    /* Login butonu daralt */
    .sp-adv-nav-login {
      padding: 8px 12px !important; font-size: 12.5px !important;
    }
    .sp-adv-nav-cats > a, .sp-adv-nav-cats > button {
      font-size: 12.5px !important; padding: 6px 10px !important;
    }
  }

  /* ---------- MOBİL ÇEKMECE (App-feel Drawer) ---------- */
  /* Backdrop overlay */
  .sp-adv-nav-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(10, 15, 28, 0); /* fade in */
    z-index: 998;
    transition: background 240ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
  }
  .sp-adv-nav-backdrop.open {
    background: rgba(10, 15, 28, 0.5);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  /* Drawer paneli (sağdan kayar — app-like) */
  .sp-adv-nav-drawer {
    display: none;
    position: fixed;
    top: 0; bottom: 0; right: 0;
    width: min(86vw, 380px);
    background: #fff;
    z-index: 999;
    transform: translateX(105%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: -8px 0 40px -8px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    /* iPhone notch & home indicator safe-area */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    overflow: hidden;
  }
  .sp-adv-nav-drawer.open { transform: translateX(0); }

  /* Drawer header (logo + close) */
  .sp-adv-nav-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-line);
    flex-shrink: 0;
  }
  .sp-adv-nav-drawer-logo {
    font-family: var(--font-display);
    font-weight: 700; font-size: 18px;
    letter-spacing: -0.04em; color: var(--sp-blue);
    display: inline-flex; align-items: center; gap: 3px;
  }
  .sp-adv-nav-drawer-logo .d {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sp-lime); display: inline-block;
  }
  .sp-adv-nav-drawer-close {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--sp-surface); border: 0;
    display: grid; place-items: center;
    color: var(--sp-ink); cursor: pointer;
    transition: background 140ms ease, transform 100ms ease;
  }
  .sp-adv-nav-drawer-close:hover { background: rgba(0,0,0,0.05); }
  .sp-adv-nav-drawer-close:active { transform: scale(0.92); }
  .sp-adv-nav-drawer-close svg { width: 18px; height: 18px; }

  /* Global font-size override'larının drawer'ı etkilememesi için spesifite */
  .sp-adv-nav-drawer .sp-adv-nav-drawer-list a,
  .sp-adv-nav-drawer .sp-adv-nav-drawer-search input,
  .sp-adv-nav-drawer .sp-adv-nav-drawer-actions .sp-btn-primary {
    font-size: 13.5px !important;
  }
  .sp-adv-nav-drawer .sp-adv-nav-drawer-logo { font-size: 18px !important; }
  .sp-adv-nav-drawer .sp-adv-nav-drawer-group-title { font-size: 10px !important; }
  .sp-adv-nav-drawer .sp-adv-nav-drawer-list a .badge { font-size: 9px !important; }
  .sp-adv-nav-drawer .sp-adv-nav-drawer-foot { font-size: 10px !important; }

  /* Drawer search */
  .sp-adv-nav-drawer-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-line); border-radius: 10px;
    padding: 9px 12px;
    margin: 12px 16px 6px;
    color: var(--sp-mute);
    transition: border-color 160ms ease, background 160ms ease;
  }
  .sp-adv-nav-drawer-search:focus-within {
    border-color: var(--sp-ink); background: #fff;
  }
  .sp-adv-nav-drawer-search input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-size: 13.5px; color: var(--sp-ink);
    font-family: inherit;
  }

  /* Drawer list (scroll varsa kayar) */
  .sp-adv-nav-drawer-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 10px 10px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .sp-adv-nav-drawer-group-title {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--sp-mute);
    padding: 10px 6px 4px;
  }
  .sp-adv-nav-drawer-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13.5px; font-weight: 500;
    color: var(--sp-ink);
    text-decoration: none;
    min-height: 36px;
    transition: background 140ms ease, transform 100ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-adv-nav-drawer-list a:active {
    background: rgba(0, 102, 255, 0.08);
    transform: scale(0.98);
  }
  .sp-adv-nav-drawer-list a.now {
    background: var(--sp-blue); color: #fff; font-weight: 600;
  }
  .sp-adv-nav-drawer-list a.now .ic { color: #fff; }
  .sp-adv-nav-drawer-list a .ic {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    color: var(--sp-mute);
    flex-shrink: 0;
    font-size: 14px;
  }
  .sp-adv-nav-drawer-list a .lbl { flex: 1; }
  .sp-adv-nav-drawer-list a .badge {
    padding: 1px 6px; border-radius: 999px;
    background: var(--sp-lime); color: var(--sp-ink);
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  }

  /* Drawer footer actions */
  .sp-adv-nav-drawer-actions {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--sp-line);
    flex-shrink: 0;
  }
  .sp-adv-nav-drawer-actions .sp-btn-primary {
    width: 100%;
    background: var(--sp-ink); color: #fff;
    border: 0; padding: 11px 16px;
    border-radius: 10px;
    font-weight: 600; font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 6px 16px -8px rgba(31, 67, 143, 0.35);
    transition: transform 100ms ease, box-shadow 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-adv-nav-drawer-actions .sp-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 3px 8px -4px rgba(31, 67, 143, 0.3);
  }
  .sp-adv-nav-drawer-foot {
    text-align: center;
    font-size: 10px; color: var(--sp-mute);
    margin: 10px 0 0;
  }

  /* Backdrop ve drawer'ı sadece mobilde göster */
  @media (max-width: 980px) {
    .sp-adv-nav-backdrop { display: block; }
    .sp-adv-nav-drawer   { display: flex; }
  }
  @media (min-width: 981px) {
    /* Desktop'ta kesinlikle gizle (transform bile aktif kalmasın) */
    .sp-adv-nav-backdrop, .sp-adv-nav-drawer { display: none !important; }
  }

  /* ---------- GENEL MOBİL GRID OVERRIDES ---------- */
  @media (max-width: 980px) {
    /* 5/4/3 col grid → mobile düzlemde küçült */
    [style*="grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr"] {
      grid-template-columns: 1fr 1fr !important;
      gap: 18px !important;
    }
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: 1.5fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 1.4fr 1fr"],
    [style*="grid-template-columns: 1.3fr 1fr"],
    [style*="grid-template-columns: 1.5fr 1fr"],
    [style*="grid-template-columns: 1.6fr 1fr"] { grid-template-columns: 1fr !important; }
  }

  /* ---------- TYPOGRAPHY (≤ 640px) ---------- */
  @media (max-width: 640px) {
    [style*="font-size: 84px"] { font-size: 44px !important; line-height: 1 !important; }
    [style*="font-size: 64px"] { font-size: 36px !important; }
    [style*="font-size: 54px"] { font-size: 32px !important; }
    [style*="font-size: 42px"] { font-size: 28px !important; line-height: 1.1 !important; }
    [style*="font-size: 36px"] { font-size: 24px !important; line-height: 1.15 !important; }
    [style*="font-size: 32px"] { font-size: 22px !important; }
    [style*="font-size: 30px"] { font-size: 22px !important; }
    [style*="font-size: 26px"] { font-size: 20px !important; }
    [style*="font-size: 24px"] { font-size: 18px !important; }

    /* Phone: 2 col -> 1 col */
    [style*="grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
    /* Footer columns full stack */
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Padding'leri küçült */
    [style*="padding: 56px 48px"] { padding: 32px 22px !important; }
    [style*="padding: 36px 40px"] { padding: 24px 20px !important; }
    [style*="padding: 36px 36px 28px"] { padding: 22px 20px !important; }
    [style*="padding: 28px"] { padding: 20px !important; }
    [style*="padding: '56px 28px 0'"], [style*="padding: 56px 28px 0"] { padding: 32px 16px 0 !important; }

    /* CTA butonları */
    button[style*="padding: 14px 22px"] { padding: 12px 18px !important; font-size: 14px !important; }

    /* Newsletter form */
    form[style*="grid-template-columns: 1fr auto"] {
      grid-template-columns: 1fr !important;
    }
    form[style*="grid-template-columns: 1fr auto"] input { width: 100% !important; }
  }

  @media (max-width: 380px) {
    [style*="font-size: 84px"] { font-size: 36px !important; }
    .sp-adv-nav-inner { padding: 0 12px !important; }
  }

  /* =====================================================================
     FOOTER (LimeFooter) — Desktop hiç değişmez, mobil için kompakt + accordion
     ===================================================================== */

  /* Default (desktop): caret gizli, listeler her zaman açık */
  .sp-foot-col-caret { display: none; }

  @media (max-width: 980px) {
    /* Footer container padding küçült */
    .sp-foot-inner { padding: 32px 16px 0 !important; }

    /* Newsletter kartı tek sütun, daha az padding */
    .sp-foot-news {
      grid-template-columns: 1fr !important;
      padding: 24px 20px !important;
      border-radius: 20px !important;
      gap: 18px !important;
    }
    .sp-foot-news h2 { font-size: 30px !important; line-height: 1.05 !important; }
    .sp-foot-news p { font-size: 13px !important; }

    /* Newsletter form: input + button tek sütuna düşmesin, kompakt kalsın */
    .sp-foot-news form {
      grid-template-columns: 1fr !important;
      padding: 6px !important;
      gap: 4px !important;
    }
    .sp-foot-news form input {
      padding: 10px 12px !important;
      font-size: 13.5px !important;
    }
    .sp-foot-news form button {
      width: 100%;
      padding: 11px 16px !important;
      font-size: 13.5px !important;
      justify-content: center !important;
    }

    /* === ANA SÜTUN GRİDİ === 5 col → accordion (her sütun ayrı blok) */
    .sp-foot-cols {
      grid-template-columns: 1fr !important;
      gap: 0 !important;
      padding: 24px 0 8px !important;
      margin-top: 18px !important;
    }
    /* Brand col yukarıda dursun, kompakt */
    .sp-foot-brand {
      padding-bottom: 18px !important;
      border-bottom: 1px solid var(--sp-line);
      margin-bottom: 4px;
    }
    .sp-foot-brand p { font-size: 12.5px !important; margin: 12px 0 12px !important; max-width: 100% !important; }

    /* Her kolon accordion satır */
    .sp-foot-col {
      border-bottom: 1px solid var(--sp-line);
    }
    .sp-foot-col-title {
      margin: 0 !important;
      padding: 14px 4px;
      font-size: 14px !important;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .sp-foot-col-caret {
      display: inline-flex;
      margin-left: auto;
      color: var(--sp-mute);
      transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    .sp-foot-col.open .sp-foot-col-caret { transform: rotate(180deg); }

    /* Liste başta gizli, .open ile açık */
    .sp-foot-col-list {
      max-height: 0;
      overflow: hidden;
      transition: max-height 280ms cubic-bezier(0.32, 0.72, 0, 1), padding 200ms ease;
      padding: 0 4px !important;
    }
    .sp-foot-col.open .sp-foot-col-list {
      max-height: 500px;
      padding: 0 4px 14px !important;
    }
    .sp-foot-col-list li a {
      font-size: 13px !important;
      padding: 4px 0;
    }

    /* "Popüler aramalar" 5 col → 2 col */
    .sp-foot-popular { padding: 18px 0 !important; }
    .sp-foot-popular h4 { font-size: 10.5px !important; margin: 0 0 10px !important; }
    .sp-foot-popular-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 4px 12px !important;
    }
    .sp-foot-popular-grid a { font-size: 11.5px !important; }

    /* Alt bant — copyright + pay chips + legal */
    .sp-foot-bottom {
      padding: 16px 0 20px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
      font-size: 11px !important;
    }
    .sp-foot-bottom-left {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 10px !important;
      width: 100%;
    }
    .sp-foot-pay {
      gap: 4px !important;
      flex-wrap: wrap;
    }
    .sp-foot-legal {
      gap: 14px !important;
      flex-wrap: wrap;
      font-size: 11px !important;
    }
  }

  @media (max-width: 640px) {
    /* Newsletter h2 daha da küçük */
    .sp-foot-news h2 { font-size: 26px !important; }
    .sp-foot-news h2 em { padding: 0 8px !important; border-radius: 6px !important; }

    /* Tema-seç chip'leri (newsletter alt) küçük */
    .sp-foot-news [style*="display: flex"][style*="flex-wrap: wrap"] span {
      font-size: 10.5px !important; padding: 3px 8px !important;
    }
  }

  @media (max-width: 380px) {
    .sp-foot-inner { padding: 24px 12px 0 !important; }
    .sp-foot-news { padding: 20px 16px !important; }
    .sp-foot-news h2 { font-size: 22px !important; }
    .sp-foot-popular-grid { grid-template-columns: 1fr !important; }
  }

  /* =====================================================================
     SECTIONS — Branşlar / Kamplar / Bu hafta / Kampanya (Bu hafta öne çıkan)
     Desktop hiç değişmez. Mobilde grid stack + yatay scroll + kompakt
     ===================================================================== */

  /* === Branşlar ikon grid (CategoryRow) responsive === */
  @media (max-width: 1100px) { .sp-catrow-grid { grid-template-columns: repeat(5, 1fr) !important; } }
  @media (max-width: 760px)  { .sp-catrow-grid { grid-template-columns: repeat(4, 1fr) !important; } }
  @media (max-width: 480px)  { .sp-catrow-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } }

  @media (max-width: 980px) {
    /* Genel section padding */
    .sp-section { padding: 20px 16px !important; }
    .sp-section-head { gap: 12px !important; flex-wrap: wrap !important; }

    /* === Kampanya ("Bu hafta öne çıkan fırsatlar") === */
    .sp-kampanya-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }
    .sp-kampanya-card {
      min-height: auto !important;
      padding: 24px 22px !important;
      border-radius: 20px !important;
    }
    .sp-kampanya-hero [style*="font-size: 84px"] { font-size: 56px !important; }
    .sp-kampanya-hero [style*="font-size: 24px"] { font-size: 18px !important; }
    .sp-kampanya-card [style*="font-size: 32px"],
    .sp-kampanya-card [style*="font-size: 30px"] { font-size: 22px !important; }

    /* === Branşlar (CategoryShowcase) === 3 col grid -> 2 col, hero ayrı satır */
    .sp-branslar-grid {
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: auto !important;
      grid-auto-rows: auto !important; /* inline 62px sabit satırı sıfırla — yoksa kartlar üst üste biner */
      gap: 10px !important;
      margin-top: 14px !important;
    }
    .sp-brans-card {
      grid-row: auto !important;
      min-height: 140px !important;
      padding: 16px !important;
      border-radius: 18px !important;
    }
    .sp-brans-card-hero {
      grid-column: 1 / -1 !important; /* tek başına tam genişlik */
      min-height: 170px !important;
    }
    /* Sade (mini) kartlar mobilde normal hücreye otursun — yükseklik normalin ~yarısı */
    .sp-brans-card-mini {
      grid-column: auto !important;
      min-height: 70px !important;
      padding: 0 16px !important;
    }
    .sp-brans-card [style*="font-size: 36px"] { font-size: 24px !important; }
    .sp-brans-card [style*="font-size: 22px"] { font-size: 17px !important; }
    /* Köşedeki büyük spor ikonu küçült */
    .sp-brans-card svg[width="110"] { width: 80px !important; height: 80px !important; }
    .sp-brans-card svg[width="70"] { width: 54px !important; height: 54px !important; }

    /* === Spor turu (DestinationBand) === 3 col -> tek kolon stack */
    .sp-dest-grid {
      grid-template-columns: 1fr !important;
      min-height: 0 !important;
      gap: 12px !important;
    }
    .sp-dest-grid > a, .sp-dest-grid > div > a { min-height: 150px !important; }
    .sp-dest-grid [style*="font-size: 64px"] { font-size: 40px !important; }

    /* === Kamplar (CampsBand) === 3 col -> yatay scroll snap */
    .sp-camps-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    /* === AudienceBand (Kadın/Çocuk/Aile) === 3 col -> 1 col */
    .sp-audience-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .sp-camps-grid > a {
      min-height: 240px !important;
      padding: 22px 22px !important;
      border-radius: 20px !important;
    }
    /* Başlık %20 küçük (33.6 -> 26.9), açıklama da hafif küçültülür (16.2 -> 14.5) —
       uzun Wellness başlığının Keşfet ile çakışmasını önlemek için;
       açıklama 3 satırla sınırlanır (line-clamp) ki uzun metin Keşfet'e taşmasın */
    .sp-camps-grid > a [style*="font-size: 33.6px"] { font-size: 26.9px !important; }
    .sp-camps-grid > a [style*="font-size: 16.2px"] {
      font-size: 14.5px !important; line-height: 1.3 !important;
      display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .sp-camps-grid > a [style*="font-size: 64px"] { font-size: 44px !important; }
    .sp-camps-grid > a [style*="font-size: 28px"] { font-size: 22px !important; }

    /* === FeaturedGrid ("Bu hafta · Öne çıkan aktiviteler") === 4 col -> 2 col */
    .sp-featured-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    .sp-featured-grid > article { border-radius: 18px !important; }

    /* === Blog (BlogBand) === 3 col -> 2 col */
    .sp-blog-grid {
      grid-template-columns: 1fr 1fr !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    /* Blog editoryal: manşet + liste alt alta */
    .sp-blog-edit-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
      margin-top: 16px !important;
    }
    .sp-blog-edit-grid > a { min-height: 300px !important; }
    .sp-blog-edit-grid > a h3 { font-size: 28px !important; }

    /* === Kurumsal band (CorporateBand) === 2 col -> tek kolon */
    .sp-corp-grid {
      grid-template-columns: 1fr !important;
      padding: 36px 24px !important;
      gap: 24px !important;
    }
    .sp-corp-grid h2 { font-size: 38px !important; }
  }

  @media (max-width: 640px) {
    .sp-section { padding: 18px 14px !important; }

    /* Kampanya hero — fontlar daha da küçük */
    .sp-kampanya-hero [style*="font-size: 84px"] { font-size: 42px !important; }
    .sp-kampanya-card { padding: 20px 18px !important; }

    /* Branşlar telefon: 2 col kalır ama hero full row */
    .sp-branslar-grid { gap: 8px !important; }
    .sp-brans-card { min-height: 120px !important; padding: 14px !important; }
    .sp-brans-card-mini { min-height: 62px !important; padding: 0 14px !important; }
    .sp-brans-card [style*="font-size: 36px"] { font-size: 20px !important; }
    .sp-brans-card [style*="font-size: 22px"] { font-size: 15px !important; }

    /* FeaturedGrid telefon: 2 col kalır, kartlar kompakt */
    .sp-featured-grid > article [style*="aspect-ratio: 16 / 10"],
    .sp-featured-grid > article [style*="aspectRatio:'16 / 10'"] { aspect-ratio: 4 / 3 !important; }

    /* Kamplar — emoji küçük */
    .sp-camps-grid > a [style*="font-size: 64px"] { font-size: 38px !important; }

    /* Blog telefon: tek kolon */
    .sp-blog-grid { grid-template-columns: 1fr !important; }
  }

  @media (max-width: 380px) {
    /* XS phone — featured ve branşları tek sütuna düşür */
    .sp-featured-grid,
    .sp-branslar-grid { grid-template-columns: 1fr !important; }
    .sp-brans-card-hero { grid-column: 1 / -1 !important; }
  }

  /* ---------- HeroV2 (banner + advanced search) responsive ---------- */
  @media (max-width: 980px) {
    /* Dekoratif foto plakaları metinle çakışıyor — tablet/mobilde gizle */
    .sp-hero-plate { display: none !important; }
    .sp-hero-box { min-height: 0 !important; }
    .sp-hero-copy { padding: 40px 24px 0 !important; max-width: none !important; }
    .sp-hero-copy h1 { font-size: clamp(40px, 10vw, 64px) !important; }
    .sp-hero-search { margin: 36px 20px 0 !important; }
  }
  @media (max-width: 640px) {
    .sp-hero-copy { padding: 30px 18px 0 !important; }
    .sp-hero-copy h1 { font-size: clamp(34px, 9vw, 48px) !important; }
    .sp-hero-copy p { font-size: 15px !important; }
    .sp-hero-search { margin: 26px 14px 0 !important; }
    /* Branş + şehir + buton: telefonda tek sütuna yığ */
    .sp-hero-search-grid { grid-template-columns: 1fr !important; }
    .sp-hero-search-city { border-left: 0 !important; border-top: 1px solid var(--sp-line) !important; }
    .sp-hero-search-btn { width: auto !important; height: 52px !important; }

    /* Kategori sekmeleri: çok satırlı yığın yerine tek satır, parmakla kaydırılabilir şerit. */
    .sp-hero-tabs {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-right: 56px !important; /* gösterge alanı — son sekme altına gizlenmesin */
    }
    .sp-hero-tabs::-webkit-scrollbar { display: none; }
    .sp-hero-tab {
      flex: 0 0 auto !important;
      white-space: nowrap;
      /* Mobilde alt çizgili sekme yerine hap (pill) görünümü */
      border-bottom: 0 !important;
      border-radius: 999px;
      padding: 9px 14px !important;
      margin: 0 2px 10px !important;
      gap: 6px !important;
    }
    .sp-hero-tab.is-sel {
      background: var(--sp-blue);
      color: #fff !important;
      box-shadow: 0 6px 16px -6px rgba(0,80,220,.45);
    }
    /* Sağda "devamı var" göstergesi: beyaz sönüş + minimal chevron; sona gelince kaybolur.
       Üst-sağ köşe kartın yuvarlaklığına (28px) uyar → keskin köşe olmaz. */
    .sp-hero-tabs-more {
      display: flex !important;
      position: absolute; top: 0; right: 0; bottom: 1px;
      width: 56px; align-items: center; justify-content: flex-end;
      padding-right: 12px;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 60%);
      border-top-right-radius: 28px;
      cursor: pointer;
      transition: opacity .25s;
    }
    /* Minimal: dolgu daire + gölge yok; sadece ince, soluk chevron (›) */
    .sp-hero-tabs-more .ch {
      display: grid; place-items: center;
      background: transparent; color: var(--sp-mute);
    }
    .sp-hero-tabs-more .ch svg { transform: rotate(-90deg); }
    .sp-hero-tabs-more.at-end { opacity: 0; pointer-events: none; }

    /* TrustStrip: 5 sütun telefonda taşıyor — 2 sütuna düşür, iç ayraçları düzelt */
    .sp-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .sp-trust-grid > div { min-width: 0 !important; border-right: 0 !important; padding: 18px 16px !important; }
    .sp-trust-grid > div:nth-child(odd) { border-right: 1px solid var(--sp-line) !important; }
    .sp-trust-grid > div:nth-child(n+3) { border-top: 1px solid var(--sp-line) !important; }
    .sp-trust-grid [style*="font-size: 34px"] { font-size: 27px !important; }
  }