/*!
 * accordion.css v1.3.0
 * Accessible accordion — critical/behavioural styles + opt-in card look.
 * Colours, fonts, borders and spacing come from the Webflow Designer + RC
 * tokens; the card variant below is a sensible default you can override.
 *
 * v1.3.0 — MİNİMAL ACTIVE STATE (tasarım isteği): açık kartta zemin
 * dolgusu ve metin rengi değişimi kaldırıldı — vurgu yalnız kenarlık
 * renginde. Hover'daki metin renklenmesi de aynı sadelik için kalktı;
 * hover ipucu yalnız kenarlığın koyulaşması.
 * https://github.com/roicool/sestek
 */

/* ── Trigger (header button) ─────────────────────────────────── */
.accordion__trigger,
[data-accordion-trigger] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing--4, 1rem);
  /* Reset native button chrome so Designer styles win */
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Visible keyboard focus — accessibility */
[data-accordion-trigger]:focus-visible {
  outline: 2px solid var(--brand-primary--500, #5983f8);
  outline-offset: 2px;
}

/* ── Panel — height is GSAP-driven; overflow clips during animation ── */
[data-accordion-panel] {
  height: 0;
  overflow: hidden;
  /* No CSS transition — GSAP owns the height tween so it can settle to auto */
  will-change: height;
}

/* ── Icon — rotates when its item is open (cosmetic, CSS-driven) ── */
[data-accordion-icon] {
  flex: 0 0 auto;
  transition: transform var(--accordion-icon-speed, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
}

.is-open > [data-accordion-trigger] [data-accordion-icon],
[data-accordion-item].is-open [data-accordion-trigger] [data-accordion-icon] {
  transform: rotate(180deg);
}

/* ── Kart görünümü (opt-in): root'a data-accordion-card ekle ──────
   Her item ayrı bir kart olur; aralarında boşluk, çerçeve, yuvarlak
   köşe. Renk/kenarlık token'lardan gelir, Designer'dan ezebilirsin. */
[data-accordion-card] {
  display: flex;
  flex-direction: column;
  gap: var(--accordion-card-gap, 0.75rem);
}

[data-accordion-card] [data-accordion-item] {
  background: var(--surface--base, #fff);
  border: 1px solid var(--border--color-border-base, #e6e6e6);
  border-radius: var(--accordion-card-radius, 14px);
  overflow: hidden;               /* açılışta içerik köşeden taşmaz */
  transition: border-color 0.35s ease, background 0.35s ease;
}

/* Hover ipucu: yalnız kenarlık koyulaşır (minimal) */
@media (hover: hover) {
  [data-accordion-card] [data-accordion-item]:hover {
    border-color: var(--border--color-border-strong, #d0d0d0);
  }
}

/* Açık kart — MİNİMAL: yalnız kenarlık marka rengine döner.
   Zemin, metin rengi ve gölge DEĞİŞMEZ. */
[data-accordion-card] [data-accordion-item].is-open {
  border-color: var(--brand-primary--500, #EC008C);
}

/* Kart içi boşluklar — trigger ve içerik. Panel'e ASLA padding verme
   (0'a animate ediliyor); içerik padding'i content wrapper'a gelir. */
[data-accordion-card] [data-accordion-trigger] {
  padding: var(--accordion-pad-y, 1.15rem) var(--accordion-pad-x, 1.35rem);
  transition: color 0.25s ease;
}
[data-accordion-card] [data-accordion-content] {
  padding: 0 var(--accordion-pad-x, 1.35rem) var(--accordion-pad-y, 1.15rem);
  color: var(--color-text--muted, #555);
}

/* İkon rozeti (kart modunda daha belirgin) */
[data-accordion-card] [data-accordion-icon] {
  color: var(--brand-primary--500, #EC008C);
}

/* ── İçerik reveal başlangıç durumu (JS bunu GSAP'la sürer;
      JS gelmeden önce içerik gizli kalmasın diye kapalı item'da
      is-open yokken panel zaten height:0, görünmez) ─────────────── */
[data-accordion-content] { will-change: opacity, transform; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-accordion-panel],
  [data-accordion-icon],
  [data-accordion-card] [data-accordion-item],
  [data-accordion-content] {
    will-change: auto;
    transition: none !important;
  }
}