/* ====================================================
   FANTAZI — KOLEKSİYON / ÜRÜN LİSTELEME
   Üstte yatay filtre çubuğu (Filtrele + Sırala + Görünüm),
   tam genişlik gap-0 ürün grid + daha fazla yükle.
   ==================================================== */
.kol { padding: var(--space-32) 0 var(--space-64); }

/* ====================================================
   ALT KATEGORİ ŞERİDİ — yuvarlak görsel + etiket
   Taşan kısım hesabım tabbar'ı gibi sürükle-kaydır (scrollbar gizli).
   ==================================================== */
/* Sol kenarı .container ile hizalamak için: dış sarmalayıcı sol padding'i
   container mantığıyla hesaplar (100% = viewport, scrollbar hariç), sağ = 0. */
/* Görünür alanı N.5 kolona bölerek son öğeyi HER genişlikte yarım bırakır
   → "devamı var" hissi. Görünür genişlik = min(viewport, container-max) - sol boşluk.
   Kolon adedi (--sc-cols) kadar tam + yarım öğe görünür. */
.subcats {
  --sc-cols: 9.5;   /* masaüstünde görünen öğe: 9 tam + yarım */
  --sc-gap: var(--space-16);
  --sc-pad: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  --sc-view: calc(min(100%, var(--container-max) + 2 * var(--container-pad)) - var(--sc-pad));
  /* öğe genişliği: görünür alan / kolon, ama her öğeden bir gap düşülür */
  --sc-item: calc((var(--sc-view) - var(--sc-cols) * var(--sc-gap)) / var(--sc-cols));
  border-bottom: 1px solid var(--renk-cizgi);
  padding-left: var(--sc-pad);
}
.subcats__scroll {
  display: flex; gap: var(--sc-gap);
  padding-top: var(--space-24); padding-bottom: var(--space-24);
  padding-left: 0; padding-right: 0;
  overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.subcats__scroll::-webkit-scrollbar { display: none; }
.subcats__scroll.is-dragging { cursor: grabbing; }

.subcat {
  flex: 0 0 var(--sc-item); width: var(--sc-item);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-10);
  text-align: center; color: var(--renk-metin);
  -webkit-user-drag: none; user-select: none;
}
/* Dikdörtgen görsel, hafif köşe yuvarlaması */
.subcat__img {
  width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  transition: var(--transition); display: block;
}
.subcat__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.subcat:hover .subcat__img { border-color: var(--renk-nude); box-shadow: 0 4px 14px rgba(36,31,32,.12); }
.subcat__label { font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1.25; transition: color var(--transition); }
.subcat:hover .subcat__label { color: var(--renk-marka); }

/* Tablet: biraz daha az kolon */
@media (min-width: 990px) and (max-width: 1199px) {
  .subcats { --sc-cols: 6.5; }
}

@media (max-width: 989px) {
  .subcats {
    --sc-cols: 4.5;   /* mobilde görünen öğe: 4 tam + yarım */
    --sc-gap: var(--space-12);
    --sc-pad: var(--container-pad-mob);
    --sc-view: calc(100% - var(--sc-pad));
  }
  .subcats__scroll { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .subcat__label { font-size: var(--fs-12); }
}

/* --- Filtre çubuğu (tam genişlik + sticky) ---
   top'u header'a 1px bindiriyoruz ki aralarında boşluk/sızma olmasın. */
.filterbar {
  position: sticky; top: calc(var(--sticky-top) - 1px); z-index: 50;
  background: var(--renk-beyaz);
  border-bottom: 1px solid var(--renk-cizgi);
  margin-bottom: var(--space-24);
}
.filterbar__inner {
  display: flex; align-items: center; gap: var(--space-12);
  padding-top: var(--space-14); padding-bottom: var(--space-14);   /* yatay padding .container'dan */
}
.filterbar__count { font-size: var(--fs-14); color: var(--renk-metin-soft); }
.filterbar__count b { color: var(--renk-koyu); }
.filterbar__spacer { flex: 1; }

/* --- Ortak çubuk butonu (Filtrele / Sırala) --- */
.fbar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--space-10) var(--space-16);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--renk-metin);
  cursor: pointer; white-space: nowrap; transition: var(--transition);
}
.fbar-btn:hover { border-color: var(--renk-nude); color: var(--renk-koyu); }
.fbar-btn .icon { width: 16px; height: 16px; color: var(--renk-metin-soft); transition: var(--transition); }
.fbar-btn:hover .icon { color: var(--renk-koyu); }
/* Filtrele üzerindeki aktif sayaç rozeti */
.fbar-btn__count {
  background: var(--renk-koyu); color: var(--renk-beyaz);
  font-size: var(--fs-11); font-weight: var(--fw-bold); line-height: 1;
  border-radius: 999px; padding: 3px 6px; min-width: 18px; text-align: center;
}
.fbar-btn.has-value { background: var(--renk-koyu); border-color: var(--renk-koyu); color: var(--renk-beyaz); }
.fbar-btn.has-value .icon { color: var(--renk-beyaz); }

/* --- Sırala dropdown --- */
.fdrop { position: relative; }
.fdrop.is-open .fbar-btn { border-color: var(--renk-koyu); color: var(--renk-koyu); }
.fdrop.is-open .fbar-btn .icon:last-child { transform: rotate(180deg); }
.fdrop__panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 190px;
  background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--space-8);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fdrop.is-open .fdrop__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.fdrop__panel--right { left: auto; right: 0; }

/* Sıralama menüsü — ikonlu satırlar */
.sortmenu { min-width: 300px; padding: 0; overflow: hidden; }
.sortmenu__head { display: none; }   /* masaüstünde gizli, mobilde sheet başlığı */
.sortopt {
  display: flex; align-items: center; gap: var(--space-14);
  width: 100%; padding: var(--space-16) var(--space-20);
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--renk-metin);
  transition: var(--transition);
}
.sortopt + .sortopt { border-top: 1px solid var(--renk-cizgi); }
.sortopt .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--renk-koyu); }
.sortopt:hover { background: var(--renk-soft); }
.sortopt.is-active { color: var(--renk-marka); font-weight: var(--fw-semibold); }
.sortopt.is-active .icon { color: var(--renk-marka); }

/* --- Görünüm segment (grid boyutu) --- */
.viewseg { display: inline-flex; border: 1px solid var(--renk-cizgi); border-radius: var(--radius); overflow: hidden; background: var(--renk-soft); }
.viewseg__btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  color: var(--renk-metin-soft); transition: var(--transition);
}
.viewseg__btn + .viewseg__btn { border-left: 1px solid var(--renk-cizgi); }
.viewseg__btn .icon { width: 17px; height: 17px; }
.viewseg__btn:hover { color: var(--renk-koyu); }
.viewseg__btn.is-active { background: var(--renk-koyu); color: var(--renk-beyaz); }

/* --- Panel içi seçenekler (dropdown + drawer ortak) --- */
.fopt { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-10) var(--space-8); border-radius: 6px; cursor: pointer; font-size: var(--fs-14); }
.fopt:hover { background: var(--renk-soft); }
.fopt input { width: 16px; height: 16px; accent-color: var(--renk-koyu); flex-shrink: 0; }
.fopt__swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(26, 20, 22, .22); flex-shrink: 0; }
/* Beden kutuları */
.fsize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.fsize { padding: var(--space-10); text-align: center; font-size: var(--fs-13); font-weight: var(--fw-semibold); border: 1px solid var(--renk-cizgi); border-radius: 8px; background: var(--renk-soft); cursor: pointer; transition: var(--transition); color: var(--renk-metin); }
.fsize:hover { border-color: var(--renk-nude); }
.fsize.is-active { background: var(--renk-koyu); border-color: var(--renk-koyu); color: var(--renk-beyaz); }
/* Fiyat aralığı */
.fprice { display: flex; align-items: center; gap: var(--space-10); }
.fprice input { flex: 1; min-width: 0; padding: var(--space-10) var(--space-12); border: 1px solid var(--renk-cizgi); border-radius: 8px; background: var(--renk-soft); font-family: var(--font); outline: none; }
.fprice input:focus { border-color: var(--renk-koyu); }
.fprice span { color: var(--renk-metin-soft); }

/* --- Filtre drawer (sağdan, favoriler gibi) --- */
.fdrawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; }
.fdrawer::before {
  content: ""; position: absolute; inset: 0; background: rgba(36,31,32,.4);
  opacity: 0; transition: opacity .3s ease;
}
.fdrawer.is-open { visibility: visible; }
.fdrawer.is-open::before { opacity: 1; }
.fdrawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw;
  background: var(--renk-beyaz); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.fdrawer.is-open .fdrawer__panel { transform: translateX(0); box-shadow: -8px 0 40px rgba(36,31,32,.14); }
.fdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-20) var(--space-24); border-bottom: 1px solid var(--renk-cizgi); }
.fdrawer__head h3 { font-size: var(--fs-18); font-family: var(--font-baslik); }
.fdrawer__close { width: 38px; height: 38px; border-radius: var(--radius-full); border: 1px solid var(--renk-cizgi); background: var(--renk-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--renk-metin); transition: var(--transition); }
.fdrawer__close:hover { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }
.fdrawer__close .icon { width: 16px; height: 16px; }
.fdrawer__body { flex: 1; overflow-y: auto; padding: var(--space-20) var(--space-24); }
.fgroup { padding-bottom: var(--space-20); margin-bottom: var(--space-20); border-bottom: 1px solid var(--renk-cizgi); }
.fgroup:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fgroup__title { font-size: var(--fs-14); font-weight: var(--fw-bold); color: var(--renk-koyu); margin-bottom: var(--space-10); }
.fdrawer__foot { display: flex; gap: var(--space-12); padding: var(--space-16) var(--space-24);  }
.fdrawer__foot .btn { flex: 1; }

/* Aktif filtre rozetleri — tek satır, sürükle-kaydır (hesabım menüsü gibi).
   Scrollbar gizli; fareyle sürüklenerek / parmakla kaydırılarak gezilir. */
.active-filters {
  display: flex; align-items: center; gap: var(--space-8);
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  margin-bottom: var(--space-20);
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  cursor: grab; user-select: none;
}
.active-filters::-webkit-scrollbar { display: none; }
.active-filters.is-dragging { cursor: grabbing; }
.active-filters:empty { display: none; }
.afilter {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px var(--space-12); background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius-pill); font-size: var(--fs-13); line-height: 1; color: var(--renk-metin);
  white-space: nowrap;
}
.afilter button { background: none; border: none; cursor: pointer; color: var(--renk-metin-soft); display: flex; padding: 0; }
.afilter button:hover { color: var(--renk-marka); }
.afilter .icon { width: 13px; height: 13px; }
/* "Tümünü temizle" en solda, scroll'da kaybolmasın diye sola yapışık kalır */
.afilter--clear {
  flex-shrink: 0; position: sticky; left: 0; z-index: 1;
  color: var(--renk-marka); font-weight: var(--fw-semibold); cursor: pointer;
  background: var(--renk-beyaz); border: none; white-space: nowrap;
  padding-right: var(--space-12); margin-right: var(--space-6);
}

/* ====================================================
   ÜRÜN GRID — tam genişlik, gap 0
   Görünüm sınıfları grid boyutunu değiştirir.
   Masaüstü:  az=2 · orta=4 · cok=6 (6'lıda sadece görsel)
   Mobil:     az=1 · orta=2 · cok=3
   ==================================================== */
.kol-grid { display: grid; gap: 0; }
.kol-grid.view-az   { grid-template-columns: repeat(2, 1fr); }
.kol-grid.view-orta { grid-template-columns: repeat(4, 1fr); }
.kol-grid.view-cok  { grid-template-columns: repeat(6, 1fr); }

/* Ürün kartı (pcard) stilleri components.css'e taşındı (koleksiyon + ürün detay ortak). */

/* "Çok kolon" görünümde sadece görseller (body + varyant + sepete-ekle gizli) */
.kol-grid.view-cok .pcard__body { display: none; }
.kol-grid.view-cok .pcard__variant { display: none; }
.kol-grid.view-cok .pcard__add { display: none; }
.kol-grid.view-cok .pcard:hover .pcard__dots { bottom: var(--space-10); }   /* buton yok, noktalar normal konumda */

/* Daha fazla yükle */
.kol-more { text-align: center; margin-top: var(--space-44); }
.kol-more__btn { padding: var(--space-14) var(--space-44); }
.kol-more__info { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-bottom: var(--space-16); }

/* Boş sonuç */
.kol-empty { text-align: center; padding: var(--space-64) var(--space-20); grid-column: 1 / -1; }
.kol-empty__ic { width: 64px; height: 64px; margin: 0 auto var(--space-16); border-radius: var(--radius-full); background: var(--renk-soft); border: 1px solid var(--renk-cizgi); display: flex; align-items: center; justify-content: center; color: var(--renk-marka); }
.kol-empty strong { display: block; font-size: var(--fs-18); color: var(--renk-koyu); margin-bottom: var(--space-8); }
.kol-empty p { color: var(--renk-metin-soft); }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1200px) {
  .kol-grid.view-orta { grid-template-columns: repeat(3, 1fr); }
  .kol-grid.view-cok  { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 989px) {
  /* Mobil görünüm boyutları */
  .kol-grid.view-az   { grid-template-columns: 1fr; }
  .kol-grid.view-orta { grid-template-columns: repeat(2, 1fr); }
  .kol-grid.view-cok  { grid-template-columns: repeat(3, 1fr); }
  /* Filtre çubuğu: sayaç solda görünür kalsın, butonlar sağda sığsın */
  .filterbar__inner { gap: var(--space-8); }
  .filterbar__count { display: inline; flex-shrink: 0; }
  .fbar-btn { padding: var(--space-10) var(--space-12); }
  .viewseg__btn { width: 36px; height: 36px; }

  /* --- Sıralama: mobilde alttan açılan sheet (hesabım gibi) --- */
  .fdrop { position: static; }
  /* Arka planı karartan overlay */
  .fdrop.is-open::before {
    content: ""; position: fixed; inset: 0; z-index: 900;
    background: rgba(36,31,32,.4);
    animation: fdrop-fade .25s ease;
  }
  @keyframes fdrop-fade { from { opacity: 0; } to { opacity: 1; } }

  .sortmenu {
    position: fixed; left: 0; right: 0; top: auto; z-index: 910;
    /* Floating pill'in üst kenarının hemen üstüne otur (son seçenek pill'in altında kalmasın) */
    bottom: calc(var(--botnav-gap) + var(--botnav-h) + var(--space-8) + env(safe-area-inset-bottom, 0));
    width: auto; min-width: 0;
    border: none; border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(36,31,32,.18);
    padding-bottom: var(--space-8);
    transform: translateY(calc(100% + var(--botnav-gap) + var(--botnav-h) + var(--space-8)));   /* kapalıyken tamamen alta gizli */
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    opacity: 1; visibility: hidden;
  }
  .fdrop.is-open .sortmenu { transform: translateY(0); visibility: visible; }

  /* Sheet başlığı */
  .sortmenu__head {
    display: flex; align-items: center; position: relative;
    padding: var(--space-20) var(--space-20) var(--space-14);
    border-bottom: 1px solid var(--renk-cizgi);
  }
  .sortmenu__handle {
    position: absolute; top: var(--space-8); left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px; background: var(--renk-cizgi);
  }
  .sortmenu__head strong { font-size: var(--fs-16); font-family: var(--font-baslik); }
  .sortmenu__close {
    margin-left: auto; width: 34px; height: 34px; border-radius: var(--radius-full);
    border: 1px solid var(--renk-cizgi); background: var(--renk-soft); cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--renk-metin);
  }
  .sortmenu__close .icon { width: 15px; height: 15px; }

  /* Sheet satırları biraz daha ferah */
  .sortopt { padding: var(--space-16) var(--space-20); font-size: var(--fs-15); }
}

/* ====================================================
   SEO ANLATIM — dönüşümlü görsel/metin satırları (.seo-story)
   12 kolon grid üstünde: satır 1 ve 3 → metin sol / görsel sağ,
   satır 2 → görsel sol / metin sağ. Görseller şimdilik gradient
   placeholder; gerçek görsel gelince .seo-story__tile'a
   background-image verilir.
   ==================================================== */
.seo-story { padding-top: 30px; padding-bottom: 30px; border-top: 1px solid var(--renk-cizgi); }

/* --- Blokların 12 kolonda yerleşimi (masaüstü) --- */
/* grid-row buradan kaldırıldı — sabit 1/2/3 4. satırdan itibaren çakışma
   yaratıyordu. Gerçek grid-row artık koleksiyon.php'de $gridRow = $i+1
   inline style ile veriliyor, bu class'lar sadece grid-column/margin belirler. */
.seo-story .grid-12 { row-gap: 60px; }
.seo-story__text--1 { grid-column: 1 / 7;  align-self: center; }
.seo-story__media--1 { grid-column: 7 / 13; align-self: center; }
.seo-story__media--2 { grid-column: 1 / 7;  align-self: center; }
.seo-story__text--2 { grid-column: 7 / 13; align-self: center; }
.seo-story__text--3 { grid-column: 1 / 7;  align-self: center; }
.seo-story__media--3 { grid-column: 7 / 13; align-self: center; }

/* --- Metin tarafı = PROSE bloğu ---
   İçerik CKEditor'dan class'sız düz HTML olarak gelir; bu yüzden TÜM stiller
   ana kapsayıcı .seo-story__text üzerinden (eleman seçicilerle) tanımlanır.
   Editorde h2/p/ul/ol/a/strong/em/blockquote ne yazılırsa otomatik biçimlenir. */

/* İlk/son elemanın dış boşluğu bloğu bozmasın */
.seo-story__text > *:first-child { margin-top: 0; }
.seo-story__text > *:last-child { margin-bottom: 0; }

/* Başlıklar */
.seo-story__text h2 {
  font-family: var(--font-baslik);
  font-size: var(--fs-28);
  color: var(--renk-metin);
  line-height: 1.2;
  margin: 0 0 var(--space-16);
}
.seo-story__text h3 { font-size: var(--fs-18); color: var(--renk-metin); margin: var(--space-24) 0 var(--space-10); }
.seo-story__text h4 { font-size: var(--fs-16); color: var(--renk-metin); font-weight: var(--fw-semibold); margin: var(--space-20) 0 var(--space-8); }

/* Paragraf + satır içi */
.seo-story__text p {
  color: var(--renk-metin-soft);
  font-size: var(--fs-15);
  line-height: 1.8;
  margin: 0 0 var(--space-16);
}
.seo-story__text strong, .seo-story__text b { color: var(--renk-metin); font-weight: var(--fw-semibold); }
.seo-story__text em, .seo-story__text i { font-style: italic; }
/* Prose linkleri (editor içeriği). CTA kartı hariç — o kendi stilinde. */
.seo-story__text a:not(.seo-story__cta) { color: var(--renk-marka); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition); }
.seo-story__text a:not(.seo-story__cta):hover { color: var(--renk-koyu); }

/* Listeler — editorden gelen düz <ul>/<ol>, gül çizgili madde stili */
.seo-story__text ul, .seo-story__text ol {
  list-style: none; padding: 0;
  margin: var(--space-6) 0 var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-14);
  counter-reset: seo-ol;
}
.seo-story__text li {
  position: relative; padding-left: var(--space-20);
  color: var(--renk-metin); font-size: var(--fs-15); line-height: 1.5;
}
/* <ul> → gül çizgi işaretçisi */
.seo-story__text ul > li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 5px; height: 20px; border-radius: 3px; background: var(--renk-marka);
}
/* <ol> → numara işaretçisi (aynı gül tonunda) */
.seo-story__text ol > li { counter-increment: seo-ol; }
.seo-story__text ol > li::before {
  content: counter(seo-ol); position: absolute; left: 0; top: 0;
  color: var(--renk-marka); font-weight: var(--fw-bold); font-size: var(--fs-14); line-height: 1.5;
}

/* Alıntı (editorde blockquote) */
.seo-story__text blockquote {
  margin: var(--space-20) 0; padding: var(--space-14) var(--space-20);
  border-left: 3px solid var(--renk-nude); background: var(--renk-soft);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--renk-metin); font-style: italic;
}
.seo-story__text blockquote p:last-child { margin-bottom: 0; }

/* CTA / fiyat kartı — sitedeki yüzey sistemine uygun (soft zemin + çizgi).
   Editor içeriğinin (prose) hemen ardından geldiği için üstten net boşluk. */
.seo-story__cta {
  display: flex; align-items: center; gap: var(--space-16);
  margin-top: var(--space-24);
  padding: var(--space-14) var(--space-16);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius); text-decoration: none;
  transition: var(--transition);
}
.seo-story__cta:hover { background: var(--renk-beyaz); border-color: var(--renk-nude); box-shadow: var(--shadow-hover); }
.seo-story__cta-ic {
  width: 52px; height: 52px; min-width: 52px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--renk-koyu); color: var(--renk-beyaz);
}
.seo-story__cta-ic .icon { width: 22px; height: 22px; }
.seo-story__cta-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.seo-story__cta-body strong { color: var(--renk-marka); font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.seo-story__cta-body em { color: var(--renk-metin-soft); font-style: normal; font-size: var(--fs-13); }
.seo-story__cta-arrow {
  width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); color: var(--renk-marka);
}
.seo-story__cta-arrow .icon { width: 18px; height: 18px; }

/* --- Görsel tarafı: 2x2 kolaj + overlay --- */
.seo-story__media { position: relative; }
.seo-story__collage {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--space-14); aspect-ratio: 1 / 1;
}
.seo-story__collage--alt { grid-template-rows: 1.15fr .85fr; }
.seo-story__tile { border-radius: var(--radius); background-size: cover; background-position: center; }
/* Geçici placeholder gradientler — sitenin şarap/gül/nude tonlarında */
.seo-story__tile--a { background: linear-gradient(150deg, var(--renk-nude), var(--renk-marka)); }
.seo-story__tile--b { background: linear-gradient(150deg, var(--renk-marka), var(--renk-koyu)); }
.seo-story__tile--c { background: linear-gradient(150deg, var(--renk-nude-koyu), var(--renk-koyu-2)); }
.seo-story__tile--d { background: linear-gradient(150deg, var(--renk-soft), var(--renk-nude)); }

/* Ortadaki arama kutusu overlay */
.seo-story__search {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: var(--space-12);
  width: min(78%, 360px); padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-pill); background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi); box-shadow: var(--shadow-hover);
  color: var(--renk-metin); font-size: var(--fs-14); font-weight: var(--fw-semibold);
}
.seo-story__search > .icon { width: 18px; height: 18px; color: var(--renk-metin-soft); }
.seo-story__search > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-story__search-arrow { color: var(--renk-metin-soft); }

/* Güven rozeti overlay (2. ve 3. satır) */
.seo-story__badge {
  position: absolute; left: 50%; bottom: var(--space-18); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-10);
  padding: var(--space-12) var(--space-18); border-radius: var(--radius-pill);
  background: var(--renk-beyaz); border: 1px solid var(--renk-cizgi); box-shadow: var(--shadow-hover);
  color: var(--renk-metin); font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap;
}
.seo-story__badge .icon { width: 18px; height: 18px; color: var(--renk-marka); }

/* --- Mobil (6 kolon): her satır tam genişlik, görsel her zaman üstte --- */
@media (max-width: 989px) {
  .seo-story { padding-top: 30px; padding-bottom: 30px; }
  .seo-story__text h2 { font-size: var(--fs-24); }
  /* Tüm bloklar tam genişlik (6 kolon), her biri kendi otomatik satırında.
     Masaüstündeki inline grid-row (aynı satırda yan yana durmak için) mobilde
     iptal edilmeli — yoksa text+media aynı grid-row'da üst üste biner.
     Sıralama artık sadece inline order (koleksiyon.php'de üretilen) ile belirlenir. */
  .seo-story__text, .seo-story__media { grid-column: 1 / 7; grid-row: auto !important; margin-top: 0; }
  .seo-story__text { margin-bottom: var(--space-32); }
  .seo-story .grid-12 { row-gap: var(--space-16); }
  .seo-story__collage { aspect-ratio: 16 / 11; margin-bottom: var(--space-20); }
}

/* ====================================================
   SSS — kategoriye özel soru/cevap akordeonu (.faq)
   2 kolon (masaüstü), tek kolon (mobil). FAQPage JSON-LD
   schema'sı ile birlikte render edilir (bkz. koleksiyon.php).
   ==================================================== */
.faq { padding-top: 30px; padding-bottom: 30px; border-top: 1px solid var(--renk-cizgi); }
.faq__title { font-family: var(--font-baslik); font-size: var(--fs-28); color: var(--renk-metin); text-align: center; margin: 0 0 var(--space-32); }
/* İki ayrı sütun container'ı (JS ile doldurulur, bkz. koleksiyon.js) —
   CSS grid/column-count'ta bir öğe açılınca satır/sütun dengesi yeniden
   hesaplanıp diğer öğeler yer değiştiriyordu. Sabit iki container ile
   her sütun DOM'da gerçekten ayrı, birbirini hiç etkilemez. */
.faq__grid { display: flex; gap: var(--space-20); align-items: flex-start; }
.faq__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-14); }
.faq-item { border: 1px solid var(--renk-cizgi); border-radius: var(--radius); background: var(--renk-beyaz); overflow: hidden; }
.faq-item__q {
  width: 100%; display: flex; align-items: center; gap: var(--space-14);
  padding: var(--space-16) var(--space-20); background: none; border: none; cursor: pointer;
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--renk-metin); text-align: left;
}
.faq-item__q-ic {
  width: 32px; height: 32px; min-width: 32px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--renk-soft); color: var(--renk-marka);
}
.faq-item__q-ic .icon { width: 16px; height: 16px; }
.faq-item__q-text { flex: 1; }
.faq-item__chev { color: var(--renk-metin-soft); flex: 0 0 auto; transition: transform var(--transition); }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }
.faq-item__a { padding: 0 var(--space-20) var(--space-16); color: var(--renk-metin-soft); font-size: var(--fs-14); line-height: 1.7; }
.faq-item__a p { margin: 0; }

@media (max-width: 989px) {
  .faq__grid { flex-direction: column; }
  .faq { padding-top: 30px; padding-bottom: 30px; }
  .faq__title { font-size: var(--fs-24); }
}