/* ==========================================================================
   Tur 4: AUAR kalıpları (sahip referansı auar.io/microfactory, 11.11.2026): anlatım listesi, SSS akordeonu,
   "Daha fazlası" kartları. Yalnız bu kalıpları kullanan sayfalarda yüklenir (ctx.duzen ekStil; site.css bütçesine
   girmez): ürün sayfası (site/sablon/urun.mjs) ve ana sayfa (site/sablon/ana.mjs). Betik: site/betik/site.js
   (.anlatim). Yalnız 00-token.css belirteçleri; hareket yalnız transform ve opacity.
   ========================================================================== */

/* ---------- Anlatım listesi .anlatim (AUAR "How it works") ----------
   Solda maddeler (çizgiyle ayrılmış), sağda büyük görsel. Betikle tek madde açık, ilerleme çizgisi --sure-anlatim içinde
   dolar (yalnız scaleX), görsel çapraz geçişle değişir (yalnız opaklık). Betiksiz bütün maddeler açık. */
.anlatim {
  display: grid;
  gap: var(--space-6);
}
.anlatim__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.anlatim__madde {
  position: relative;
  padding-block: var(--space-4) var(--space-5);
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.anlatim__bas {
  margin: 0;
  font-family: var(--font-sans);
  font-stretch: var(--font-width-text);
  font-size: var(--text-h4);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}
.anlatim__dugme {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-heading);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--sure-renk) var(--ease-out);
}
.anlatim__no {
  flex: none;
  min-width: 2ch;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.anlatim__panel {
  max-width: 54ch;
  color: var(--color-text-secondary);
}
.anlatim__panel > :first-child {
  margin-top: var(--space-2);
}
.anlatim--canli .anlatim__madde:not(.anlatim__madde--etkin) .anlatim__dugme {
  color: var(--color-text-secondary);
}
.anlatim--canli .anlatim__panel:not([hidden]) {
  animation: anlatim-panel 520ms var(--ease-auar) both;
}
@keyframes anlatim-panel {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.anlatim__cizgi {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  overflow: hidden;
}
.anlatim__dolgu {
  display: block;
  height: 100%;
  background: var(--color-accent-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.anlatim--canli .anlatim__madde--etkin .anlatim__dolgu {
  transform: none;
}
.anlatim--oto .anlatim__madde--etkin .anlatim__dolgu--kos {
  transform: scaleX(0);
  animation: anlatim-dolgu var(--sure-anlatim) linear forwards;
}
.anlatim--oto.anlatim--dur .anlatim__dolgu--kos {
  animation-play-state: paused;
}
@keyframes anlatim-dolgu {
  to {
    transform: none;
  }
}
.anlatim__gorseller {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}
.anlatim__gorsel {
  margin: 0;
  min-width: 0;
}
.anlatim--cok .anlatim__gorsel {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 700ms var(--ease-auar);
}
.anlatim--cok .anlatim__gorsel--etkin {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .anlatim--canli .anlatim__dugme:hover {
    color: var(--color-nav-hover);
  }
}
@media (prefers-reduced-motion: reduce) {
  .anlatim--canli .anlatim__panel:not([hidden]) {
    animation: none;
  }
  .anlatim--cok .anlatim__gorsel {
    transition: none;
  }
}
@media (min-width: 900px) {
  .anlatim {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
  .anlatim__gorseller {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
  }
}

/* ---------- SSS akordeonu (details/summary; betik gerekmez) ---------- */
.sss__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-hair) solid var(--color-border-separator);
}
.sss__oge {
  border-bottom: var(--border-hair) solid var(--color-border-separator);
}
.sss__oge summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-3);
  color: var(--color-text-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.sss__oge summary::-webkit-details-marker {
  display: none;
}
.sss__ok {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-plate);
  background: var(--color-bg-surface);
  color: var(--color-text-heading);
  transition: transform var(--sure-acilir) var(--ease-out);
}
.sss__oge[open] .sss__ok {
  transform: rotate(180deg);
}
.sss__cevap {
  max-width: 68ch;
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
}
.sss__oge[open] .sss__cevap {
  animation: anlatim-panel 420ms var(--ease-auar) both;
}
@media (hover: hover) and (pointer: fine) {
  .sss__oge summary:hover {
    color: var(--color-nav-hover);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sss__ok,
  .sss__oge[open] .sss__cevap {
    transition: none;
    animation: none;
  }
}

/* ---------- Daha fazlası: büyük görselli kartlar (AUAR "Explore more") ---------- */
.daha__liste {
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.daha__kart {
  position: relative;
  display: grid;
  gap: var(--space-3);
}
.daha__gorsel {
  overflow: hidden;
  border-radius: var(--radius-plate);
}
.daha__ad {
  font-size: var(--text-h3);
}
.daha__ad a {
  color: inherit;
  text-decoration: none;
}
.daha__ad a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.daha__metin {
  color: var(--color-text-secondary);
}
@media (hover: hover) and (pointer: fine) {
  .daha__kart:hover .plaka {
    background: var(--color-bg-plate-hover);
  }
  .daha__kart:hover .daha__ad {
    color: var(--color-nav-hover);
  }
}
@media (min-width: 640px) {
  .daha__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .daha__liste--uc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Görselsiz anlatım listesi (ana sayfa "Teklif nasıl işler"): tek sütun */
@media (min-width: 900px) {
  .anlatim--tek {
    grid-template-columns: minmax(0, 1fr);
  }
}
.anlatim--tek .anlatim__no {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-stretch: var(--font-width-title);
  font-weight: 450;
}