/* ============================================================
   goodbyedpi.xyz · içerik/rehber sayfaları
   styles.css'ten SONRA yüklenir; aynı jetonları kullanır.
   ============================================================ */

/* ---------- sayfa başlığı ---------- */
.page{ padding:calc(72px + clamp(2rem,5vw,3.5rem)) 0 clamp(2.5rem,5vw,4rem); position:relative; }

.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .5rem;
  list-style:none; margin:0 0 1.5rem; padding:0;
  font-family:var(--fm); font-size:.75rem; color:var(--tx-fade);
}
.crumbs li{ display:inline-flex; align-items:center; gap:.5rem; }
.crumbs li:not(:last-child)::after{ content:"/"; color:rgba(255,255,255,.2); }
.crumbs a{ color:var(--tx-dim); }
.crumbs a:hover{ color:var(--v-200); }
.crumbs [aria-current]{ color:var(--v-300); }

.page__h{ max-width:24ch; }
.page__lede{
  margin:1.25rem 0 0; max-width:60ch;
  font-size:clamp(1rem,1.6vw,1.12rem); color:var(--tx-mid);
}
.page__lede strong{ color:var(--v-100); font-weight:600; }

.updated{
  display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-top:1.5rem; padding:.45rem .9rem;
  font-family:var(--fm); font-size:.735rem; color:var(--tx-dim);
  background:var(--glass); border:1px solid var(--line); border-radius:100px;
}
.updated b{ color:var(--tx-mid); font-weight:500; }
.updated__dot{
  width:6px; height:6px; border-radius:50%; background:var(--mint); flex:none;
  box-shadow:0 0 0 3px rgba(94,234,212,.18);
}

/* ---------- cevap kutusu (kullanıcı + yapay zekâ için öne çekilmiş yanıt) ---------- */
.answer{
  position:relative; margin:clamp(2rem,4vw,3rem) 0 0;
  padding:clamp(1.4rem,3vw,2rem) clamp(1.4rem,3vw,2.1rem);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(124,58,237,.2), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.015));
  border:1px solid rgba(157,99,248,.3);
  box-shadow:var(--lift), 0 0 80px -34px rgba(124,58,237,.7);
  backdrop-filter:blur(16px);
}
.answer__k{
  display:inline-block; margin-bottom:.85rem;
  font-family:var(--fm); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--v-200);
  background:rgba(157,99,248,.18); border:1px solid rgba(157,99,248,.32);
  padding:.28rem .65rem; border-radius:100px;
}
.answer p{
  margin:0; font-family:var(--fd); font-weight:500;
  font-size:clamp(1.08rem,2.1vw,1.34rem); line-height:1.5;
  letter-spacing:-.02em; color:var(--tx);
}
.answer p + p{
  margin-top:.9rem; font-family:var(--fb); font-weight:400;
  font-size:.95rem; line-height:1.66; color:var(--tx-mid); letter-spacing:-.011em;
}
.answer strong{ color:#fff; }
.answer em{ font-style:normal; color:var(--v-100); }
.answer--yes{ border-color:rgba(94,234,212,.32); }
.answer--yes .answer__k{ color:#bff3e8; background:rgba(94,234,212,.14); border-color:rgba(94,234,212,.3); }
.answer--no{ border-color:rgba(251,113,133,.3); }
.answer--no .answer__k{ color:#ffd3d9; background:rgba(251,113,133,.14); border-color:rgba(251,113,133,.3); }

/* ---------- içindekiler ---------- */
.toc{
  margin:clamp(2rem,4vw,2.75rem) 0 0; padding:1.35rem 1.5rem;
  border-radius:var(--r); background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.toc h2{
  font-size:.78rem; font-family:var(--fm); font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--tx-fade);
  margin:0 0 .9rem;
}
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:t; columns:2; column-gap:2rem; }
.toc li{ counter-increment:t; margin-bottom:.5rem; break-inside:avoid; }
.toc a{ font-size:.9rem; color:var(--tx-mid); display:inline-flex; gap:.55rem; }
.toc a::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--fm); font-size:.78rem; color:var(--v-400); flex:none;
}
.toc a:hover{ color:var(--v-100); }

/* ---------- makale gövdesi ---------- */
.prose{ margin-top:clamp(2.5rem,5vw,4rem); }
.prose > section{ margin-bottom:clamp(2.5rem,5vw,3.75rem); scroll-margin-top:90px; }
.prose h2{
  font-size:clamp(1.5rem,3vw,2.05rem); margin:0 0 1rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--line);
}
.prose h3{ font-size:1.1rem; margin:1.9rem 0 .7rem; color:var(--v-100); }
.prose h3:first-child{ margin-top:0; }
.prose p{ margin:0 0 1rem; color:var(--tx-dim); font-size:1rem; line-height:1.72; max-width:72ch; }
.prose p strong{ color:var(--tx-mid); }
.prose p em{ font-style:normal; color:var(--tx-mid); }
.prose a{ color:var(--v-200); text-decoration:underline; text-decoration-color:rgba(211,180,255,.35); text-underline-offset:3px; }
.prose a:hover{ color:var(--v-100); text-decoration-color:var(--v-200); }
.prose ul, .prose ol{ margin:0 0 1.2rem; padding-left:1.4rem; color:var(--tx-dim); max-width:70ch; }
.prose li{ margin-bottom:.55rem; line-height:1.7; }
.prose li::marker{ color:var(--v-400); }
.prose li strong{ color:var(--tx-mid); }
.prose > section > :last-child{ margin-bottom:0; }

.lead-in{ color:var(--tx-mid) !important; font-size:1.05rem !important; }

/* ---------- tanım listesi (GEO: net, tek başına anlaşılır cümleler) ---------- */
.defs{ margin:0 0 1.2rem; display:grid; gap:.8rem; }
.defs--spaced{ margin-top:1.4rem; }
.defs div{
  padding:1rem 1.2rem; border-radius:13px;
  background:rgba(255,255,255,.028); border:1px solid var(--line);
  border-left:3px solid var(--v-500);
}
.defs dt{ font-family:var(--fd); font-weight:600; font-size:.98rem; color:var(--tx); margin-bottom:.35rem; }
.defs dd{ margin:0; font-size:.93rem; color:var(--tx-dim); line-height:1.66; }

/* ---------- yöntem kartları ---------- */
.methods{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); margin-bottom:1.4rem; }
.method{
  position:relative; padding:1.4rem 1.45rem; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.014));
  border:1px solid var(--line); box-shadow:var(--lift);
  display:flex; flex-direction:column;
}
.method--best{ border-color:rgba(157,99,248,.36); box-shadow:var(--lift), 0 0 60px -26px rgba(124,58,237,.7); }
.method__tag{
  align-self:flex-start; margin-bottom:.8rem;
  font-family:var(--fm); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  padding:.26rem .6rem; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--tx-dim);
}
.method--best .method__tag{ background:rgba(157,99,248,.2); border-color:rgba(157,99,248,.36); color:var(--v-100); }
.method h3{ margin:0 0 .55rem; font-size:1.06rem; color:var(--tx); }
.method p{ margin:0 0 .9rem; font-size:.9rem; color:var(--tx-dim); line-height:1.62; max-width:none; }
.method__meta{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line); display:grid; gap:.4rem; }
.method__meta span{ display:flex; justify-content:space-between; gap:.8rem; font-size:.8rem; color:var(--tx-fade); }
.method__meta b{ font-family:var(--fm); font-size:.76rem; font-weight:500; color:var(--tx-mid); text-align:right; }
.method__meta .y{ color:#a7f3e4; }
.method__meta .n{ color:#fca5b0; }

/* ---------- zaman çizelgesi ---------- */
.timeline{ list-style:none; margin:0; padding:0 0 0 1.6rem; position:relative; }
.timeline::before{
  content:""; position:absolute; left:5px; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(180deg, var(--v-500), rgba(124,58,237,.1));
}
.timeline li{ position:relative; padding-bottom:1.5rem; }
.timeline li::before{
  content:""; position:absolute; left:-1.6rem; top:.5rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg-2); border:2px solid var(--v-400);
}
.timeline li:last-child{ padding-bottom:0; }
.timeline li.is-now::before{ background:var(--mint); border-color:var(--mint); box-shadow:0 0 0 4px rgba(94,234,212,.16); }
.timeline time{
  display:block; font-family:var(--fm); font-size:.76rem; letter-spacing:.03em;
  color:var(--v-300); margin-bottom:.3rem;
}
.timeline b{ display:block; font-family:var(--fd); font-size:1rem; color:var(--tx); margin-bottom:.3rem; }
.timeline p{ margin:0; font-size:.92rem; color:var(--tx-dim); line-height:1.65; max-width:66ch; }

/* ---------- teşhis adımları ---------- */
/* minmax(0,1fr) + min-width:0 şart: aksi halde içindeki kaydırılamaz kod
   satırı grid kolonunun min-content tabanını yükseltip satırı taşırıyor. */
.diag{
  counter-reset:d; list-style:none; margin:0 0 1.3rem; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:.8rem;
}
.diag > li{
  counter-increment:d; position:relative; min-width:0;
  padding:1.1rem 1.3rem 1.1rem 3.3rem; border-radius:13px;
  background:rgba(255,255,255,.028); border:1px solid var(--line);
  font-size:.94rem; color:var(--tx-dim); line-height:1.66; margin:0;
  overflow-wrap:break-word;
}
.diag > li .code{ max-width:100%; }
.diag > li::before{
  content:counter(d); position:absolute; left:1.1rem; top:1.05rem;
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--fm); font-size:.76rem; color:#fff;
  background:linear-gradient(180deg,var(--v-400),var(--v-600));
}
.diag b{ color:var(--tx); }
.diag code{ white-space:nowrap; }
.diag .r{ display:block; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed rgba(255,255,255,.09); font-size:.89rem; }
.diag .r b{ color:var(--v-100); }

/* ---------- ilgili sayfalar ---------- */
.related{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.related > h2{
  font-size:.78rem; font-family:var(--fm); font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--tx-fade); margin:0 0 1.1rem;
  border:0; padding:0;
}
.related__grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.rcard{
  /* flex + margin-top:auto → farklı uzunluktaki metinlerde bağlantılar hizalı kalır */
  display:flex; flex-direction:column;
  padding:1.25rem 1.35rem; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  border:1px solid var(--line); text-decoration:none;
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.rcard:hover{ border-color:rgba(157,99,248,.38); transform:translateY(-3px); box-shadow:0 0 50px -24px rgba(124,58,237,.7); }
.rcard b{ display:block; font-family:var(--fd); font-size:1rem; color:var(--tx); margin-bottom:.4rem; }
.rcard span{ display:block; font-size:.87rem; color:var(--tx-dim); line-height:1.6; }
.rcard i{ display:block; margin-top:auto; padding-top:.9rem; font-style:normal; font-size:.82rem; font-weight:600; color:var(--v-200); }

/* ---------- kaynakça ---------- */
.sources{ margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid var(--line); }
.sources h2{ font-size:.78rem; font-family:var(--fm); font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--tx-fade); margin:0 0 .9rem; border:0; padding:0; }
.sources ol{ margin:0; padding-left:1.3rem; }
.sources li{ font-size:.86rem; color:var(--tx-fade); margin-bottom:.45rem; line-height:1.6; }
.sources a{ color:var(--tx-dim); }
.sources a:hover{ color:var(--v-200); }

/* ---------- satır içi CTA ---------- */
.cta-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  margin:1.6rem 0; padding:1.3rem 1.5rem; border-radius:var(--r);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(124,58,237,.22), transparent 62%),
    rgba(255,255,255,.03);
  border:1px solid rgba(157,99,248,.26);
}
.cta-strip div{ flex:1 1 260px; min-width:0; }
.cta-strip b{ display:block; font-family:var(--fd); font-size:1.02rem; color:var(--tx); margin-bottom:.3rem; }
.cta-strip span{ font-size:.89rem; color:var(--tx-dim); line-height:1.6; }
.cta-strip .btn{ flex:none; }

/* ---------- duyarlılık ---------- */
@media (max-width:760px){
  .toc ol{ columns:1; }
  .page__h{ max-width:none; }
}

@media (max-width:640px){
  .page{ padding-top:calc(66px + 1.75rem); }
  .prose h2{ font-size:1.42rem; }
  .prose p, .prose ul, .prose ol{ font-size:.97rem; }
  .answer{ padding:1.25rem 1.2rem; }
  .toc{ padding:1.1rem 1.15rem; }
  .diag > li{ padding:1rem 1.1rem 1rem 3.1rem; }
  .timeline{ padding-left:1.45rem; }
  .timeline li::before{ left:-1.45rem; }
  .cta-strip{ padding:1.15rem 1.2rem; }
  .cta-strip .btn{ width:100%; }
  .method__meta b{ text-align:left; }
  .method__meta span{ flex-direction:column; gap:.1rem; }
}

@media print{
  .answer, .toc, .cta-strip, .related{ border:1px solid #ccc; background:none; box-shadow:none; }
}