/* ═══════════════════════════════════════════════
   cudezyazilim — İç sayfa bileşenleri

   Sadece YENİ sınıflar. style.css içindeki hiçbir kural
   değiştirilmez; buradaki her şey aynı tasarım
   değişkenlerini (--c1, --grad, --ease…) kullanır.
   ═══════════════════════════════════════════════ */

.subpage{ padding-top:var(--nav-h) }

/* ── Breadcrumb ────────────────────────────── */
.crumbs{ padding:18px 0 0; font-size:.82rem; color:var(--text-faint) }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line-strong) }
.crumbs a{ color:var(--text-dim); transition:color .25s }
.crumbs a:hover{ color:var(--c1) }

/* ── Sayfa başlığı ─────────────────────────── */
.phero{
  position:relative; padding:clamp(34px,5vw,60px) 0 clamp(40px,6vw,72px);
  overflow:hidden; isolation:isolate;
}
.phero::before{
  content:""; position:absolute; inset:-40% -20% auto -20%; height:150%; z-index:-1;
  background:
    radial-gradient(45% 55% at 22% 18%, rgba(123,97,255,.22), transparent 70%),
    radial-gradient(38% 46% at 78% 8%, rgba(94,231,255,.14), transparent 72%);
  pointer-events:none;
}
.phero__title{
  font-size:clamp(2rem,5.4vw,3.7rem); line-height:1.06; font-weight:700;
  letter-spacing:-.038em; max-width:19ch;
}
.phero__lead{ margin-top:20px; max-width:62ch }
.phero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px }

/* ── Bölüm başlıkları ──────────────────────── */
.sec--tight{ padding:clamp(46px,6.5vw,84px) 0 }
.sec-title--sm{
  font-size:clamp(1.55rem,3.6vw,2.5rem); line-height:1.1;
  letter-spacing:-.032em; margin-bottom:22px;
}
.sec--tight .lead{ margin-bottom:26px }

/* ── Metin blokları ────────────────────────── */
.prose{ max-width:74ch }
.prose p{ color:var(--text-dim); margin-bottom:16px; font-size:1rem; line-height:1.72 }
.prose p:last-child{ margin-bottom:0 }
.prose strong{ color:var(--text); font-weight:600 }
.prose a{ color:var(--c1); border-bottom:1px solid rgba(94,231,255,.32) }
.prose a:hover{ border-bottom-color:var(--c1) }
.prose h3{
  font-size:1.16rem; font-weight:640; letter-spacing:-.025em;
  margin:30px 0 10px; color:var(--text);
}
.prose ul,.prose ol{ margin:0 0 18px; display:grid; gap:9px }
.prose ul li{ position:relative; padding-left:22px; color:var(--text-dim) }
.prose ul li::before{
  content:""; position:absolute; left:2px; top:.6em; width:6px; height:6px;
  border-radius:50%; background:var(--grad);
}
.prose ol{ counter-reset:n }
.prose ol li{ counter-increment:n; position:relative; padding-left:30px; color:var(--text-dim) }
.prose ol li::before{
  content:counter(n) "."; position:absolute; left:0; top:0;
  color:var(--c1); font-weight:600; font-size:.9rem;
}

/* ── Geniş tik listesi ─────────────────────── */
.ticks--wide{ grid-template-columns:1fr; gap:13px; max-width:80ch }
@media(min-width:760px){ .ticks--wide{ display:grid; grid-template-columns:1fr 1fr; gap:13px 34px } }
.ticks--wide li{ font-size:.97rem }

/* ── Adım listesi ──────────────────────────── */
.steplist{ display:grid; gap:18px; counter-reset:s; max-width:82ch }
.steplist li{ display:flex; gap:18px; align-items:flex-start }
.stepn{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font-size:.85rem; font-weight:700;
  color:#0a0a0c; background:var(--grad);
}
.steplist b{ display:block; font-size:1.05rem; font-weight:640; letter-spacing:-.024em; margin-bottom:5px }
.steplist p{ color:var(--text-dim); font-size:.95rem; line-height:1.65 }

/* ── Kart ızgarası ─────────────────────────── */
.pcards{ display:grid; gap:18px; grid-template-columns:1fr }
@media(min-width:700px){ .pcards{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1080px){ .pcards{ grid-template-columns:repeat(3,1fr) } }
.pcard{
  padding:24px 22px 26px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.pcard:hover{ border-color:rgba(123,97,255,.4); background:var(--surface-2); transform:translateY(-3px) }
.pcard h3{ font-size:1.05rem; font-weight:640; letter-spacing:-.025em; margin-bottom:8px }
.pcard p{ font-size:.92rem; color:var(--text-dim); line-height:1.65 }

/* ── Tablo ─────────────────────────────────── */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
.ptable{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px }
.ptable th{
  text-align:left; padding:13px 14px; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); font-weight:600;
  border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
.ptable td{ padding:14px; border-bottom:1px solid var(--line); color:var(--text-dim); vertical-align:top }
.ptable tbody tr:hover td{ background:var(--surface) }
.ptable td:first-child{ color:var(--text); font-weight:550 }

/* ── Not kutusu ────────────────────────────── */
.pnote{
  border-left:3px solid var(--c2); background:rgba(123,97,255,.07);
  padding:18px 22px; border-radius:0 var(--r-sm) var(--r-sm) 0; max-width:80ch;
}
.pnote p{ color:var(--text-dim); font-size:.95rem; line-height:1.7 }
.pnote--warn{ border-left-color:#ffb84d; background:rgba(255,184,77,.07) }
.pnote--ok{ border-left-color:var(--c1); background:rgba(94,231,255,.07) }

/* ── İlgili sayfalar ───────────────────────── */
.related{ display:grid; gap:14px; grid-template-columns:1fr }
@media(min-width:700px){ .related{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1080px){ .related{ grid-template-columns:repeat(3,1fr) } }
.related a{
  display:block; padding:20px 22px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.related a:hover{ border-color:rgba(94,231,255,.45); background:var(--surface-2); transform:translateY(-3px) }
.related b{ display:block; font-size:1rem; font-weight:620; letter-spacing:-.022em; margin-bottom:5px }
.related span{ font-size:.88rem; color:var(--text-dim) }

/* ── CTA bandı ─────────────────────────────── */
.ctaband{
  padding:clamp(56px,8vw,100px) 0; text-align:center;
  border-top:1px solid var(--line);
  background:
    radial-gradient(50% 70% at 50% 0%, rgba(123,97,255,.20), transparent 72%),
    var(--bg-2);
}
.ctaband h2{ font-size:clamp(1.6rem,4vw,2.5rem); font-weight:700; letter-spacing:-.035em }
.ctaband p{ margin-top:14px; color:var(--text-dim); font-size:1rem }
.ctaband__btns{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:28px }
.ctaband__nap{ margin-top:22px; font-size:.9rem }
.ctaband__nap a{ color:var(--c1) }

/* ── Footer sütunları ──────────────────────── */
.fcols{ display:grid; gap:28px 40px; grid-template-columns:1fr }
@media(min-width:560px){ .fcols{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px){ .fcols{ grid-template-columns:repeat(3,1fr) } }
.fcol__h{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:12px; font-weight:600;
}
.fcol ul{ display:grid; gap:9px }
.fcol a{ font-size:.88rem; color:var(--text-dim); transition:color .25s }
.fcol a:hover{ color:var(--text) }
.footer__nap{ margin-top:14px; font-size:.88rem }
.footer__nap a{ color:var(--text-dim) }
.footer__nap a:hover{ color:var(--c1) }

/* ── Mobil hızlı iletişim ──────────────────── */
.fab{ position:fixed; right:16px; bottom:16px; z-index:90; display:grid; gap:10px }
.fab__btn{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:rgba(10,10,14,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.9);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.fab__btn:hover{ transform:translateY(-2px); border-color:var(--c1) }
.fab__btn svg{ width:23px; height:23px }
.fab__btn--wa{ color:#4ade80 }
.fab__btn--tel{ color:var(--c1) }
@media(min-width:900px){ .fab{ display:none } }

/* ── Vaka çalışması / referans ─────────────── */
.caselist{ display:grid; gap:20px; grid-template-columns:1fr }
@media(min-width:820px){ .caselist{ grid-template-columns:repeat(2,1fr) } }
.case{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.case:hover{ border-color:rgba(123,97,255,.45); transform:translateY(-4px) }
.case__media{ aspect-ratio:16/10; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-3) }
.case__media img{ width:100%; height:100%; object-fit:cover }
.case__body{ padding:24px 24px 26px; flex:1; display:flex; flex-direction:column; gap:9px }
.case__tag{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c1); font-weight:600 }
.case__body h3{ font-size:1.2rem; font-weight:650; letter-spacing:-.026em }
.case__body p{ font-size:.93rem; color:var(--text-dim); line-height:1.65; flex:1 }
.case__more{ font-size:.88rem; color:var(--c1); font-weight:600 }

/* ── Blog listesi ──────────────────────────── */
.postlist{ display:grid; gap:16px; max-width:88ch }
.postlist a{
  display:block; padding:24px 26px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.postlist a:hover{ border-color:rgba(94,231,255,.45); background:var(--surface-2); transform:translateX(4px) }
.postlist b{ display:block; font-size:1.1rem; font-weight:640; letter-spacing:-.026em; margin-bottom:7px }
.postlist p{ font-size:.92rem; color:var(--text-dim); line-height:1.6 }
.postlist .meta{ margin-top:10px; font-size:.78rem; color:var(--text-faint) }

/* ── Makale ────────────────────────────────── */
.article{ max-width:74ch }
.article__meta{
  display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  font-size:.84rem; color:var(--text-faint); margin-bottom:30px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.toc{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); padding:20px 24px; margin-bottom:34px;
}
.toc p{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
        color:var(--text-faint); margin-bottom:11px; font-weight:600 }
.toc ol{ display:grid; gap:8px; counter-reset:t }
.toc li{ counter-increment:t; position:relative; padding-left:26px }
.toc li::before{ content:counter(t); position:absolute; left:0; color:var(--c1); font-size:.82rem; font-weight:600 }
.toc a{ font-size:.92rem; color:var(--text-dim) }
.toc a:hover{ color:var(--c1) }

/* ── Fiyat faktörleri ──────────────────────── */
.factors{ display:grid; gap:12px; max-width:80ch }
.factors li{
  padding:16px 20px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface);
  font-size:.94rem; color:var(--text-dim);
}
.factors b{ color:var(--text); font-weight:620 }

/* ── Erişilebilirlik ───────────────────────── */
@media(prefers-reduced-motion:reduce){
  .pcard,.related a,.postlist a,.case,.fab__btn{ transition:none }
}

/* ── İletişim sayfası ──────────────────────── */
.contactgrid{ display:grid; gap:34px; grid-template-columns:1fr; align-items:start }
@media(min-width:920px){ .contactgrid{ grid-template-columns:1.25fr .85fr; gap:48px } }
.contactside h2{ font-size:1.2rem; font-weight:640; letter-spacing:-.026em; margin-bottom:18px }
.napbox{ display:grid; gap:16px }
.napbox li{ font-size:.94rem; color:var(--text-dim); line-height:1.6 }
.napbox span{
  display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:3px; font-weight:600;
}
.napbox a{ color:var(--c1) }
.contactside__note{ margin-top:22px; font-size:.86rem; color:var(--text-faint); line-height:1.6 }
.form__legal{ margin-top:8px; font-size:.8rem; color:var(--text-faint); line-height:1.6 }
.form__legal a{ color:var(--c1) }
/* honeypot: gerçek kullanıcıya görünmez, ekran okuyucudan da gizli */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ── Galeri ve alıntı ──────────────────────── */
.gallery{ display:grid; gap:16px; grid-template-columns:1fr }
@media(min-width:620px){ .gallery{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .gallery{ grid-template-columns:repeat(3,1fr) } }
.gallery figure{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--bg-3) }
.gallery img{ width:100%; height:auto; display:block; aspect-ratio:656/820; object-fit:cover }
.gallery figcaption{ padding:11px 14px; font-size:.8rem; color:var(--text-faint) }
.quote{
  border-left:3px solid var(--c1); padding:18px 24px; margin:0 0 16px;
  background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0; max-width:76ch;
}
.quote p{ color:var(--text); font-size:1rem; line-height:1.7; margin:0 }
.quote cite{ display:block; margin-top:10px; font-style:normal; font-size:.86rem; color:var(--text-faint) }

/* WebP picture sarmalayıcıları */
.gallery picture{ display:block }
.case__media picture{ display:block; width:100%; height:100% }
.case__media img{ width:100%; height:100%; object-fit:cover; display:block }