/* 09 · "Listedekiler neden yazıldı?" wall — artboards 9a (1440), 9b (375) */
#listedekiler{
  background:var(--white);
  color:#17202A;
  font-family:var(--font-body);
  padding:clamp(48px,calc(36.73px + 3.005vw),80px) 0 clamp(40px,calc(28.73px + 3.005vw),72px);
  overflow:hidden;
}
#listedekiler *,#listedekiler *::before,#listedekiler *::after{box-sizing:border-box}
#listedekiler .l-wrap{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:932px;margin:0 auto;padding:0 16px;
}
#listedekiler .l-title{
  margin:0;text-align:center;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,calc(24.37px + 1.502vw),46px);
  line-height:1.1;letter-spacing:-0.03em;color:#17202A;
}
#listedekiler .l-wall{
  list-style:none;margin:clamp(24px,calc(16.96px + 1.878vw),44px) 0 0;padding:0;
  width:100%;max-width:900px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;
}
#listedekiler .l-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;min-width:0}
#listedekiler .l-card{
  margin:0;min-width:0;
  border-radius:20px;background:var(--white);
  box-shadow:0 0 0 1px rgba(20,40,60,.10),0 2px 6px rgba(20,40,60,.04);
  padding:20px 22px 22px;
  display:flex;flex-direction:column;gap:14px;
}
#listedekiler .l-head{display:flex;align-items:center;gap:12px}
#listedekiler .l-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;display:block;flex:none;position:relative}
#listedekiler .l-avatar img{width:100%;height:100%;display:block;object-fit:cover;transform:scale(1.55);transform-origin:54% 54%}
#listedekiler .l-meta{display:flex;flex-direction:column;gap:2px}
#listedekiler .l-name{font-size:15px;font-weight:700;color:#17202A}
#listedekiler .l-city{font-size:13px;color:#6B7280}
#listedekiler .l-text{margin:0;font-size:16px;line-height:1.55;color:#374151}
#listedekiler .l-hl{color:var(--hl);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
#listedekiler .l-cta{margin:28px 0 0}
#listedekiler .l-btn{
  height:46px;padding:0 24px;border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#17202A 0%,#17202A 60%,rgba(0,0,0,.12) 100%),#17202A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -4px #17202A99,0 1px 2px rgba(0,0,0,.15);
  display:inline-flex;align-items:center;gap:8px;
  color:var(--white);text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:-0.01em;
  transition:transform .15s ease,box-shadow .15s ease;
}
#listedekiler .l-btn svg{width:12px;height:12px;flex:none}
#listedekiler .l-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 18px -4px #17202A99,0 1px 2px rgba(0,0,0,.15)}
#listedekiler .l-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (max-width:899px){
  #listedekiler .l-wall{grid-template-columns:1fr 1fr}
  #listedekiler .l-col:nth-child(3){grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:599px){
  #listedekiler .l-wall{grid-template-columns:1fr}
  #listedekiler .l-col:nth-child(3){grid-column:auto;display:flex}
  #listedekiler .l-card{padding:18px 18px 20px}
  #listedekiler .l-card--extra{display:none}
  #listedekiler .l-text{font-size:15px}
  #listedekiler .l-cta{margin-top:12px}
  #listedekiler .l-btn{height:44px;font-size:14px}
}

/* ---- motion (ANIM-B) ---------------------------------------------------- */
#listedekiler{position:relative;isolation:isolate}
#listedekiler .l-wall{position:relative}
/* faint slow-moving radial glow behind the grid (one continuous animation) */
#listedekiler .l-wall::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;width:min(72%,640px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,221,188,.55) 0%,rgba(255,221,188,.22) 48%,rgba(14,107,132,.04) 78%,rgba(14,107,132,0) 100%);
  transform:translate(-50%,-50%);
  display:none;
}
@media (prefers-reduced-motion:no-preference){
  #listedekiler .l-wall::before{display:block;will-change:transform;animation:l-glow 30s ease-in-out infinite}
  @keyframes l-glow{
    0%{transform:translate(-88%,-72%)}
    33%{transform:translate(-14%,-56%)}
    66%{transform:translate(-56%,-22%)}
    100%{transform:translate(-88%,-72%)}
  }
  /* reveal in reading order; JS (09-listedekiler.js) adds .l-reveal at init, .is-in when
     the wall enters, and sets --d per card; removes both once the animation has finished */
  #listedekiler .l-card.l-reveal{opacity:0;transform:translateY(22px);will-change:opacity,transform}
  #listedekiler .l-card.l-reveal.is-in{animation:l-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
  @keyframes l-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  /* hover: card lifts 6 px, avatar tilts a touch */
  #listedekiler .l-card{transition:transform .18s ease-out}
  #listedekiler .l-avatar{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
  @media (hover:hover){
    #listedekiler .l-card:not(.l-reveal):hover{transform:translateY(-6px)}
    #listedekiler .l-card:not(.l-reveal):hover .l-avatar{transform:rotate(-6deg) scale(1.06)}
  }
}