/* ===================== ICERIK BILESENLERI =====================
   Modul/blog metinlerini duz duvar olmaktan cikaran gorsel capalar. */

/* --- Genis kutular okuma sutunundan tasabilir --- */
.prose .wide{width:min(100vw - 44px, 1080px);margin-left:50%;transform:translateX(-50%)}

/* --- Istatistik seridi --- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  margin:2em 0}
.statrow div{background:var(--surface);padding:22px 18px;text-align:center}
.statrow b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:800;
  line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.statrow span{display:block;color:var(--muted);font-size:.85rem;margin-top:7px;line-height:1.45}

/* --- Numarali adimlar --- */
.steps{list-style:none;padding:0;margin:2em 0;display:grid;gap:14px;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:20px 22px 20px 62px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:0}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:20px;top:19px;
  font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:#0b1121;
  background:var(--grad);width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center}
.steps li strong{display:block;color:var(--text);font-size:1.03rem;margin-bottom:5px}
.steps li p{margin:0;color:var(--muted);font-size:.96rem}

/* --- Ozellik kartlari --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:2em 0}
.cards > div{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px 22px;transition:.2s transform,.2s border-color}
.cards > div:hover{transform:translateY(-3px);border-color:var(--border-2)}
.cards strong{display:block;color:var(--text);font-size:1rem;margin-bottom:6px}
.cards p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6}

/* --- Vurgu kutulari --- */
.callout{margin:2em 0;padding:20px 24px;border-radius:14px;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--primary);position:relative}
.callout > *:last-child{margin-bottom:0}
.callout__label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.callout--warn{border-left-color:var(--amber)}
.callout--warn .callout__label{color:var(--amber)}
.callout--good{border-left-color:var(--green)}
.callout--good .callout__label{color:var(--green)}

/* --- One cikan cumle --- */
.pull{margin:2.2em 0;padding:0 0 0 24px;border-left:3px solid transparent;
  border-image:var(--grad) 1;font-family:var(--font-display);font-size:1.3rem;line-height:1.45;
  color:var(--text);font-weight:600;letter-spacing:-.01em}

/* --- Karsilastirma (oncesi/sonrasi) --- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2em 0}
.compare > div{border-radius:14px;padding:20px 22px;border:1px solid var(--border)}
.compare__bad{background:rgba(244,114,182,.06);border-color:rgba(244,114,182,.25)}
.compare__good{background:rgba(16,185,129,.07);border-color:rgba(16,185,129,.3)}
.compare h4{margin:0 0 10px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase}
.compare__bad h4{color:#f472b6}
.compare__good h4{color:var(--green)}
.compare ul{margin:0;padding:0;list-style:none}
.compare li{padding-left:1.3em;margin-bottom:.5em;font-size:.94rem;color:var(--muted);position:relative}
.compare__bad li::before{content:"\00d7";position:absolute;left:0;color:#f472b6;font-weight:700}
.compare__good li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:700}

/* --- Etiket dizisi --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0}
.chips span{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.42em .95em}

/* --- Bolum ayirici aksan --- */
.prose .accent-strip{margin:2.4em 0;height:2px;border-radius:2px;background:var(--grad);opacity:.5}

@media(max-width:760px){
  .prose .wide{width:100%;margin-left:0;transform:none}
  .compare{grid-template-columns:1fr}
  .statrow b{font-size:1.6rem}
  .pull{font-size:1.12rem}
  .steps li{padding:18px 18px 18px 56px}
}