<section class="hero">
  <div class="container hero-inner">
    <div class="hero-text">
      <h1 class="site-title">Mucize — Net Başlık</h1>
      <p class="lead">Kısa, güçlü bir alt başlık. Netlik, amaç ve çağrı içerir.</p>
      <div class="hero-ctas">
        <a class="btn btn-primary" href="#about">Başla</a>
        <a class="btn btn-secondary" href="#contact">İletişime Geç</a>
      </div>
    </div>

    <div class="hero-media" aria-hidden="true">
      <div class="hero-visual" role="img" aria-label="Hero görsel alanı"></div>
    </div>
  </div>
</section>

<section class="features" id="about">
  <div class="container">
    <ul class="feature-list" role="list">
      <li class="feature">
        <h3>Vizyon</h3>
        <p>Kısa açıklama: ne yaptığınız, neden farklı olduğunuz.</p>
      </li>
      <li class="feature">
        <h3>Yaklaşım</h3>
        <p>Bilim + Vicdan. Sistem tasarımı ve sorumluluk odağı.</p>
      </li>
      <li class="feature">
        <h3>Sonuç</h3>
        <p>Net çıktılar: neler sağlanır, hangi değer üretilir.</p>
      </li>
    </ul>
  </div>
</section>

<section class="about-brief">
  <div class="container">
    <div class="about-grid">
      <div>
        <h2>Kim olduğumuz</h2>
        <p>Burada kısa bir paragraf: misyon, etik yaklaşım ve temel taahhüt.</p>
      </div>
      <div>
        <h2>Ne yapıyoruz</h2>
        <p>Kısa madde: sistem tasarımı, etik çekirdek, insan merkezli teknoloji.</p>
      </div>
    </div>
  </div>
</section>

<section class="cta" id="contact">
  <div class="container">
    <div class="cta-inner">
      <h2>Hazırsanız başlayalım</h2>
      <p>Kısa çağrı metni: bir adım atın, bağlantıya tıklayın.</p>
      <a class="btn btn-primary" href="mailto:info@YOUR_DOMAIN_HERE">İletişim</a>
    </div>
  </div>
</section>

<footer class="site-footer" role="contentinfo">
  <div class="container footer-inner">
    <div class="footer-left">
      <a class="footer-logo" href="/">Mucize</a>
      <p class="small">Adalet • Merhamet • Denge • Empati</p>
    </div>

    <nav class="footer-nav" aria-label="Footer navigation">
      <ul>
        <li><a href="#about">Hakkında</a></li>
        <li><a href="#contact">İletişim</a></li>
        <li><a href="/privacy-policy">Gizlilik</a></li>
      </ul>
    </nav>

    <div class="footer-right">
      <p class="small">© <span class="year">2025</span> Mucize. Tüm hakları saklıdır.</p>
    </div>
  </div>
</footer>

<style>
:root{
  --accent-1:#0f62fe;
  --accent-2:#0062a3;
  --bg:#ffffff;
  --muted:#6b7280;
  --text:#0f1724;
  --on-accent:#ffffff;
  --max-width:1320px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px;width:100%}

/* HERO — tam genişlik (full-bleed) */
.hero{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:var(--on-accent);
  padding:clamp(40px,8vh,120px) 0;
  overflow:hidden;
}
.hero-inner{display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap}
.hero-text{flex:1 1 540px;min-width:260px}
.site-title{margin:0;font-weight:700;line-height:1.02;font-size:clamp(28px,6vw,56px)}
.lead{margin:18px 0 24px;color:rgba(255,255,255,0.92);font-size:clamp(15px,2.2vw,18px);max-width:58ch}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:transform .12s ease,box-shadow .12s ease}
.btn:focus{outline:2px solid #fff;outline-offset:3px}
.btn-primary{background:rgba(255,255,255,0.12);color:var(--on-accent);backdrop-filter:blur(4px)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(2,6,23,0.35)}
.btn-secondary{background:rgba(255,255,255,0.08);color:var(--on-accent)}

.hero-media{flex:0 0 420px;min-width:220px;display:flex;align-items:center;justify-content:center}
.hero-visual{width:100%;height:220px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(0,0,0,0.06));box-shadow:inset 0 -20px 40px rgba(0,0,0,0.12)}

/* Features */
.features{padding:48px 0;background:var(--bg);color:var(--text)}
.feature-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{background:#fff;border-radius:10px;padding:22px;box-shadow:0 6px 22px rgba(12,16,20,0.06)}
.feature h3{margin:0 0 8px}
.feature p{margin:0;color:var(--muted)}

/* About */
.about-brief{padding:36px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* CTA */
.cta{padding:40px 0;background:linear-gradient(180deg,rgba(15,98,254,0.06),rgba(0,98,163,0.03))}
.cta-inner{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta .btn-primary{background:var(--accent-1);color:#fff;padding:12px 20px;border-radius:10px}

/* Footer */
.site-footer{padding:26px 0;background:#071024;color:#9aa7b9}
.footer-inner{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-left .footer-logo{font-weight:700;color:#fff;text-decoration:none}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.footer-nav a{color:inherit;text-decoration:none;opacity:0.95}
.small{font-size:13px;color:var(--muted)}

/* Responsive */
@media (max-width:980px){
  .hero-inner{padding:0 20px}
  .hero-media{order:3;width:100%}
  .hero-visual{height:180px}
  .feature-list{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .feature-list{grid-template-columns:1fr}
  .site-title{font-size:28px}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Utility */
a:focus{outline:3px solid rgba(0,0,0,0.08);outline-offset:3px}
</style>