:root{
  --bg:#f6f8ff;
  --text:#1f2630;
  --muted:#6b7280;
  --brand:#ba68c8;
  --brand-d:#ab47bc;
  --card:#ffffff;
  --line:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Exo',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Global Link Styles (brand tabanlı) — LOGO HARİÇ */
a:not(.logo){
  color:var(--brand);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:0.06em;
  text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
a:not(.logo):hover{
  color:var(--brand-d);
  text-decoration-color: currentColor;
  text-decoration-thickness:0.09em;
}
a:not(.logo):active{ color:var(--brand-d); }
a:not(.logo):visited{
  color: color-mix(in srgb, var(--brand) 85%, black 10%);
}

/* Solid buton (Planları Gör) yazı sabit beyaz */
.btn {
  color:#fff !important;
  text-decoration:none !important;
}
.btn:hover {
  color:#fff !important;
}

/* Outline buton (WhatsApp) yazı sabit eflatun */
.btn-outline {
  color:var(--brand) !important;
  background:transparent;
  border:1px solid var(--brand);
  text-decoration:none !important;
}
.btn-outline:hover {
  color:var(--brand) !important; /* hover’da da eflatun kalsın */
  background:transparent;
  border-color:var(--brand);
}

/* Logo hover kapalı, sabit renk */
.logo,
.logo:hover,
.logo:active,
.logo:visited {
  color:var(--text) !important;
  text-decoration:none !important;
}
.logo span,
.logo:hover span {
  color:var(--brand) !important;
}

/* Ana menü linkleri siyah, hover’da eflatun */
nav a {
  color: var(--text) !important;
  text-decoration: none !important;
}
nav a:hover {
  color: var(--brand) !important;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.section{padding:64px 0}
.section.alt{background:#fff}

/* Header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:#fff;border-bottom:1px solid var(--line)
}
.site-header .container{
  padding:0 24px;   /* masaüstü kenar boşluğu */
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;   /* daha ferah üst/alt boşluk */
  min-height:72px;  /* header yüksekliği */
}
.logo{font-weight:700;font-size:22px;color:var(--text);text-decoration:none}
.logo span{color:var(--brand)}
nav a{color:var(--text);text-decoration:none;margin:0 10px}
nav a:hover{color:var(--brand)}
.btn-sm{padding:8px 12px;border:1px solid var(--brand);border-radius:10px}

/* Mobil menü */
.menu-toggle{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  font-size:18px;
  cursor:pointer;
}
.nav-links{display:flex;align-items:center}

/* Buttons */
.btn{
  display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:14px 20px;border-radius:12px;font-weight:600;transition:.2s ease;
  border:1px solid var(--brand)
}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn-outline{background:transparent;color:var(--brand)}
.btn-outline:hover{background:#eaf1ff}

/* Hero */
.hero{background:linear-gradient(180deg,#eef3ff,transparent)}
.hero-inner{padding:72px 0;text-align:center}
.hero h1{font-size:36px;line-height:1.2;margin:0 0 14px}
.hero h1 span{color:var(--brand)}
.hero p{max-width:760px;margin:0 auto 24px;color:var(--muted)}
.cta{display:flex;gap:12px;justify-content:center;margin-top:8px}
.trust{display:flex;gap:16px;justify-content:center;list-style:none;padding:0;margin:18px 0 0;color:var(--muted);flex-wrap:wrap}

/* Cards / grids */
.grid-3{
  display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:18px;box-shadow:0 2px 10px rgba(10,105,255,.04)
}
.card h3{margin:0 0 6px;font-size:18px}

/* Plans */
.plans{
  display:grid;gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.plan{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;position:relative
}
.plan .badge{
  position:absolute;top:-12px;left:16px;background:var(--brand);color:#fff;border-radius:999px;
  padding:6px 10px;font-size:12px;font-weight:700
}
.price{margin:8px 0 2px}
.price span{font-size:44px;font-weight:800}
.price small{color:var(--muted)}
.price-sub{margin:0 0 12px;color:var(--muted)}
.plan ul{margin:0 0 16px 18px}
.plan li{margin:6px 0}
.plan .btn{width:100%;text-align:center}
.plan.featured{border-color:var(--brand);box-shadow:0 8px 30px rgba(10,105,255,.08)}

/* About */
.about-cards{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}

/* FAQ */
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:14px 16px
}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:10px 0 0}

/* Contact */
.contact-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0}
.site-footer a{text-decoration:none;color:var(--brand)}
.site-footer a:hover{text-decoration:underline}
.note{color:var(--muted);margin-top:8px}

/* Responsive */
@media (max-width:992px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .about-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .plans{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .about-cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .footer-inner{flex-direction:column;text-align:center}

  /* Header kenar boşluğu mobil */
  .site-header .container{ padding:0 20px; }

  /* Mobil menü dropdown */
  .menu-toggle{display:block}
  .nav{position:relative}
  .nav-links{
    position:absolute;
    right:20px; 
    top:72px;  /* header yüksekliği kadar aşağı */
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    width:min(85vw,320px);
    padding:10px;
    display:none;
    flex-direction:column;
    gap:4px;
    z-index:20;
  }
  .nav-links a{
    margin:0;
    padding:10px 12px;
    border-radius:10px;
  }
  .nav-links a:hover{background:#f2f6ff}
  .nav.open .nav-links{display:flex}
}