:root{
  --bk-primary:#0d6efd;
  --bk-muted:#6c757d;
  --ribbon-bg:#ffd84d;   /* masaüstü şerit arka planı */
  --ribbon-text:#111;    /* masaüstü şerit yazı rengi */
}

html,body{scroll-behavior:smooth}
body{
  font-feature-settings:"cv02","cv03","cv04","cv11";
  background:linear-gradient(180deg,#f7fbff 0%,#ffffff 40%,#f9fbff 100%)
}

.navbar .navbar-brand{letter-spacing:.2px}

/* ---------------- Hero ---------------- */
.hero-wrap{position:relative}
.gradient-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(13,110,253,.12), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(111,66,193,.10), transparent 60%),
    linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
  pointer-events:none;
}
.shadow-hero{
  box-shadow:0 1rem 3rem rgba(13,110,253,.15), 0 .5rem 1rem rgba(0,0,0,.08)
}

/* — Mobilde: yeşil hap rozet — */
.free-badge{
  display:inline-block; padding:.5rem .85rem; border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:0 0 .8rem rgba(22,163,74,.45);
  animation:pulse 1.9s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 .0rem rgba(22,163,74,.35)}
  50%{box-shadow:0 0 0 .6rem rgba(22,163,74,.15)}
  100%{box-shadow:0 0 0 .0rem rgba(22,163,74,.0)}
}

/* ---------------- Kartlar ---------------- */
.feature.card{
  border:1px solid rgba(13,110,253,.15);
  transition:transform .15s ease, box-shadow .15s ease
}
.feature.card:hover{
  transform:translateY(-2px);
  box-shadow:0 .5rem 1rem rgba(13,110,253,.12)
}
.ssscard.card{border:1px solid rgba(0,0,0,.06)}

/* ---------------- Galeri görselleri ---------------- */
.galeri{
  width:100%; height:auto; border-radius:.75rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
  background:#f6f8ff; object-fit:cover; cursor:pointer
}

/* ---------------- Footer ---------------- */
footer a{color:inherit}
footer a:hover{color:var(--bk-primary)}

/* Küçük optimizasyonlar */
img{content-visibility:auto}

/* ---------------- Hero CTA revizyonu ---------------- */
.cta{margin-top:12px}
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .8rem; border-radius:999px;
  font-weight:700; font-size:.9rem;
  box-shadow:0 .6rem 1.25rem rgba(25,135,84,.18)
}
.chip-success{
  color:#fff;
  background:linear-gradient(135deg,#34c759 0%, #28a745 100%)
}
.cta-group{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px; margin-top:10px
}
.btn-cta{
  border-radius:12px; padding:.7rem 1.1rem;
  font-weight:700; letter-spacing:.1px; min-width:120px;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease
}
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 .55rem 1.1rem rgba(0,0,0,.08) }
.btn-cta.btn-outline-success{ border-color:#22b35a; color:#22b35a }
.btn-cta.btn-outline-success:hover{ background:#22b35a; color:#fff }
.btn-whatsapp{ border:1px solid #25D366; color:#1fae54 }
.btn-whatsapp:hover{ background:#25D366; color:#fff; border-color:#25D366 }

/* — Yerleşim: mobilde ortala — */
@media (max-width:576px){
  #hero .col-lg-6:first-child{text-align:center}
  .cta{display:inline-block; text-align:center}
  .cta-group{justify-content:center}
}

/* — Masaüstünde: “İlk 30 gün ücretsiz!” sarı şerit — */
@media (min-width:992px){
  /* rozet yerine tam genişlikte şerit */
  .cta .free-badge,
  .cta .chip-success{
    display:block; width:100%; text-align:center;
    background:var(--ribbon-bg);
    color:var(--ribbon-text);
    border-radius:12px;
    padding:.65rem 1rem;
    font-weight:800; letter-spacing:.2px;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.06);
    margin:6px 0 12px 0;
  }
  /* rozet içindeki svg’yi gizle, iki yanda yıldız verelim */
  .cta .chip-success svg{display:none}
  .cta .chip-success::before,
  .cta .chip-success::after{
    content:"★"; font-size:.95rem; line-height:1;
    color:var(--ribbon-text); opacity:.9; margin:0 .35rem
  }
  .cta-group{gap:14px}
}

/* ---------------- Hızlı iletişim kartı ---------------- */
.contact-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid rgba(13,110,253,.12);
  box-shadow:0 .5rem 1rem rgba(13,110,253,.08);
  border-radius:1rem; padding:1.25rem
}
.contact-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.5rem .25rem; color:#2b2b2b
}
.contact-item svg{flex:0 0 20px; opacity:.85}
.contact-item a{color:inherit; text-decoration:none}
.contact-item a:hover{color:var(--bk-primary); text-decoration:underline}

/* ===== Modern Footer ===== */
.footer-modern{background:#0b1620;color:#e9eef6}
.footer-modern .ft-title{font-weight:700; letter-spacing:.2px; margin-bottom:.6rem}
.footer-modern .ft-links{list-style:none; padding:0; margin:0}
.footer-modern .ft-links li{margin:.35rem 0}
.footer-modern .ft-links a{color:#cfd8e3; text-decoration:none}
.footer-modern .ft-links a:hover{color:#fff; text-decoration:underline}

.footer-modern .ft-contacts{list-style:none; padding:0; margin:0}
.footer-modern .ft-contacts li{display:flex; align-items:center; gap:.25rem; margin:.35rem 0}
.footer-modern .ft-contacts a{color:#cfd8e3; text-decoration:none}
.footer-modern .ft-contacts a:hover{color:#fff; text-decoration:underline}

.footer-modern .ft-social{background:linear-gradient(90deg,#6f42c1 0%, #0d6efd 100%)}
.footer-modern .social{display:inline-flex; width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center; background:rgba(255,255,255,.15); color:#fff; font-size:18px}
.footer-modern .social:hover{background:rgba(255,255,255,.25); color:#fff}
.border-white-10{--bs-border-opacity:.1; border-color:rgba(255,255,255,.1)!important}

/* Küçük ekranda aralıklar */
@media (max-width:576px){
  .footer-modern .ft-title{margin-top:.75rem}
}