/* ============================================================================
   GostBenefitItem — ikon kutulu güven maddesi.

   SIRA HER ZAMAN: kutu → başlık → açıklama, alt alta (kullanıcı, 2026-09-25,
   ekran görüntüsü: "yazılar iconun altında, açıklamaların üstünde olacak").
   Eskiden kutu satır içi bloktu ve başlığın ondan sonra yeni satıra
   geçeceği varsayılıyordu; mağazada başlık satır içi aktı — kısa başlık
   kutunun SAĞINA oturdu, uzun başlığın bir kelimesi yanda, biri altta
   kaldı. Kök artık dikey esnek kutu: her çocuk kendi satırında (esnek öğe
   satır içi olsa da bloklaşır), dışarıdan gelen bir görüntü kuralı sırayı
   bozamaz. Metin hizası yine üst şeritten `text-align` mirasıyla gelir;
   kutunun yatay konumu --gbi-mark-inline (varsayılan ortada; sola hizalı
   şerit "0 auto" verir).

   Kenarlık ve ayırıcı çizgi YOK (kullanıcı kuralı: gri çizgi asla). Madde
   yalnızca renkli kutu + tipografiyle ayrışır.

   Kutu kenarı `--gbi-tile`; ikon, kutunun %44'ü (108px kutuda ≈48px).
   ========================================================================= */

.cc_n2k0mxzk_soTBl7VoMF .gbi {
  --gbi-tile: clamp(88px, 7.6vw, 108px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Bağlantılı madde (link prop'u dolu): kök <a>. Renk ve hizalama div'deki
   gibi üst şeritten miras kalır; alt çizgi yok. Odak halkası köşeleri
   kutuyla aynı yuvarlaklıkta (.g-focusable). */
.cc_n2k0mxzk_soTBl7VoMF .gbi--linked {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--g-radius-media);
  -webkit-tap-highlight-color: transparent;
}

/* Kutu + arkasındaki ikinci kutu için taşıyıcı. `isolation` ile kendi
   katman bağlamını kurar: `::before`'un z-index -1'i bölüm zemininin altına
   değil, yalnızca ön kutunun altına iner. */
.cc_n2k0mxzk_soTBl7VoMF .gbi-mark {
  position: relative;
  isolation: isolate;
  display: block;
  flex: none;
  width: var(--gbi-tile);
  height: var(--gbi-tile);
  margin-bottom: var(--g-space-5);
  margin-inline: var(--gbi-mark-inline, auto);
}

/* Arka kutu: soluk camgöbeği, sağ alta kaymış ve hafif dönük. Durağan hâlde
   bile görünen tek imza ayrıntısı; hover'da yelpazenin ikinci kanadı olur.
   Kaydırma + dönüş kutunun altında en fazla ≈11px taşar — margin-bottom
   (20px) başlıkla arasını açık tutar. */
.cc_n2k0mxzk_soTBl7VoMF .gbi-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--g-radius-media);
  /* Beyaz zeminde seçilsin diye camgöbeğinin açık tonu (inceleme bulgusu:
     --g-surface-cool beyazla ~1.1:1, gri bir kenar gibi okunuyordu). */
  background: var(--g-cool);
  opacity: 0.55;
  transform: translate(5px, 6px) rotate(6deg);
  transition:
    transform var(--g-dur-slow) var(--g-ease),
    background-color var(--g-dur) var(--g-ease),
    opacity var(--g-dur) var(--g-ease);
}

/* Ön kutu. Köşe, aynı sayfadaki kategori ikon kutularıyla aynı medya köşesi.
   `--gbi-tint` yalnızca accentColor girilmişse index.tsx'ten gelir. */
.cc_n2k0mxzk_soTBl7VoMF .gbi-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--g-radius-media);
  background: var(--gbi-tint, var(--g-cool));
  color: var(--g-ink);
  transition:
    transform var(--g-dur-slow) var(--g-ease),
    background-color var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}

.cc_n2k0mxzk_soTBl7VoMF .gbi-icon {
  display: block;
  width: calc(var(--gbi-tile) * 0.44);
  height: calc(var(--gbi-tile) * 0.44);
  transition: transform var(--g-dur-slow) var(--g-ease);
}

/* SVG dışarıdan (SVG prop'undan) geldiği için sınıf verilemiyor; ölçü burada
   sabitlenir. normalizeSvg sabit width/height'ı söktüğü için %100 kutuyu
   doldurur.
   Çizgi kalınlığı viewBox biriminde ve ikonla birlikte büyür: 1.4 → 48px
   ikonda ≈2.8px. Aynı sayfadaki kategori ikonlarının görünen kalınlığıyla
   (≈2.6–3.9px) eşleşir. Kural yalnızca SVG KÖKÜNE yazılır: kökteki
   `stroke-width` niteliğini ezer, ama tek tek path'lere bilinçli verilmiş
   kalınlıklara dokunmaz.
   `pointer-events: none`: SVG içindeki <title> tarayıcı ipucu olarak
   açılmasın (ikon zaten aria-hidden). */
.cc_n2k0mxzk_soTBl7VoMF .gbi-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
  pointer-events: none;
}

/* Başlık rengi bölümün textColor'ından miras alır (varsayılan --g-ink). */
.cc_n2k0mxzk_soTBl7VoMF .gbi-title {
  display: block;
  margin: 0;
  font-size: var(--g-fs-h3);
  line-height: var(--g-lh-tight);
  font-weight: var(--g-w-medium);
  letter-spacing: var(--g-track-h3);
  color: inherit;
  overflow-wrap: break-word;
  transition: color var(--g-dur) var(--g-ease);
}

/* En fazla iki satır — uzun bir politika metni bandın ritmini bozmasın. */
.cc_n2k0mxzk_soTBl7VoMF .gbi-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: var(--g-space-2) 0 0;
  font-size: var(--g-fs-meta);
  line-height: 1.5;
  font-weight: var(--g-w-regular);
  color: var(--g-ink-2);
}

/* ---------- Hover (yalnızca imleçli aygıt) ----------
   Renk değişimi her durumda; hareket aşağıdaki ayrı blokta ve yalnızca
   hareket azaltma tercihi YOKSA. Dokunmatikte hover takılı kalmaz.
   Hover zemini accentColor'dan bağımsız olarak --g-cool-deep: camgöbeği
   temanın "aktif / seçili" durum rengi, her madde aynı duruma koyulaşır. */
@media (hover: hover) and (pointer: fine) {
  .cc_n2k0mxzk_soTBl7VoMF .gbi:hover .gbi-tile {
    background: var(--g-cool-deep);
    color: var(--g-bg);
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi:hover .gbi-mark::before {
    background: var(--g-cool);
    opacity: 1;
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi:hover .gbi-title {
    color: var(--g-cool-deep);
  }
}

/* Yelpaze: ön kutu kalkıp sola döner, arka kutu sağa açılır. İkon ön kutunun
   dönüşünü geri alır (dik kalır) ve hafifçe büyür. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cc_n2k0mxzk_soTBl7VoMF .gbi:hover .gbi-tile {
    transform: translateY(-6px) rotate(-5deg);
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi:hover .gbi-icon {
    transform: rotate(5deg) scale(1.08);
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi:hover .gbi-mark::before {
    transform: translate(8px, 3px) rotate(12deg);
  }
}

/* ---------- 768–1023: üçlü sıralar ---------- */

@media (max-width: 1023px) {
  .cc_n2k0mxzk_soTBl7VoMF .gbi {
    --gbi-tile: 92px;
  }
}

/* ---------- <768: ikili sıralar ----------
   72px kutuda ikon ≈32px; kalınlık 1.6'ya döner (≈2.1px), yoksa çizgi
   incelip silikleşiyor. */

@media (max-width: 767px) {
  .cc_n2k0mxzk_soTBl7VoMF .gbi {
    --gbi-tile: 72px;
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi-mark {
    margin-bottom: var(--g-space-4);
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi-mark::before {
    transform: translate(4px, 5px) rotate(6deg);
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi-icon svg {
    stroke-width: 1.6;
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi-title {
    font-size: var(--g-fs-body);
  }

  .cc_n2k0mxzk_soTBl7VoMF .gbi-desc {
    margin-top: var(--g-space-1);
  }
}