/* ===========================================================
   INDEX 1 · LIGHT · KIRMIZI AĞIRLIKLI
   Tüm sayfa açık zemine alındı; kırmızı (crimson + bordo)
   bolca öne çıkıyor. Code snippet, ticker, footer kontrast için
   dark kalır. Hero animasyonu minimal tek nefes.
   =========================================================== */

/* ====== Base ====== */
html,body{background:#f3ece0 !important;color:#1a1612 !important}

/* Animated cream + red ambient backdrop */
body::before{
  content:""; position:fixed; inset:-3%; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse 1100px 800px at 22% 15%, rgba(220,38,38,.22), transparent 60%),
    radial-gradient(ellipse 900px 700px at 82% 25%, rgba(127,29,29,.20), transparent 65%),
    radial-gradient(ellipse 800px 600px at 60% 85%, rgba(190,24,93,.14), transparent 60%),
    radial-gradient(ellipse 700px 600px at 8% 90%, rgba(220,38,38,.16), transparent 60%),
    linear-gradient(180deg, #f3ece0 0%, #f7efde 50%, #efe7d6 100%);
  background-size:140% 140%, 130% 130%, 130% 130%, 120% 120%, 100% 100%;
  background-position:22% 15%, 82% 25%, 60% 85%, 8% 90%, 0 0;
  animation:redBreath 28s ease-in-out infinite alternate !important;
  filter:none;
}
@keyframes redBreath{
  0%   { background-position: 22% 15%, 82% 25%, 60% 85%, 8% 90%, 0 0; filter:saturate(1) }
  50%  { background-position: 26% 20%, 78% 28%, 64% 80%, 12% 86%, 0 0; filter:saturate(1.08) }
  100% { background-position: 24% 18%, 80% 22%, 62% 88%, 10% 88%, 0 0; filter:saturate(1.05) }
}

/* paper grain — daha açık tonda */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.45;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.40  0 0 0 0 0.30  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:auto;
  mask-image:none;-webkit-mask-image:none;
}
.bg-grain{display:none !important}

::selection{background:#dc2626;color:#fff}

/* ====== HEADER · light glass ====== */
.site-header{
  background:rgba(243,236,224,.78) !important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(220,38,38,.14) !important;
}
.site-header.scrolled{
  background:rgba(247,239,222,.92) !important;
  border-color:rgba(220,38,38,.25) !important;
  box-shadow:0 8px 30px -12px rgba(127,20,20,.18);
}

/* ====== TOPBAR · dark contrast strip ====== */
.topbar{
  background:linear-gradient(180deg,#0a0a0a 0%,#141416 100%);
  border-bottom:1px solid rgba(220,38,38,.22);
  font-size:12.5px;
  max-height:42px;
  overflow:hidden;
  transition:max-height .3s ease,opacity .25s ease,border-color .3s ease;
  position:relative;
}
.topbar::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(220,38,38,.5) 50%,transparent 100%);
  opacity:.6;
}
.site-header.scrolled .topbar{
  max-height:0;opacity:0;border-bottom-color:transparent;
}
.topbar-inner{
  display:flex;justify-content:space-between;align-items:center;
  height:42px;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px}
.topbar a{
  color:#a1a1aa !important;
  font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.2px;
  transition:color .2s;
}
.topbar a:hover{color:#fafafa !important}
.topbar a > i{color:#ef4444;font-size:11px}
.topbar-divider{
  width:1px;height:14px;background:rgba(255,255,255,.12);
  display:inline-block;
}
.topbar-right > a{
  position:relative;padding:0 2px;
}
.topbar-right > a + a::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:1px;height:12px;background:rgba(255,255,255,.10);
}
.topbar-social{
  display:flex;gap:6px;margin-left:6px;padding-left:14px;
  border-left:1px solid rgba(255,255,255,.10);
}
.topbar-social a{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  justify-content:center;font-size:10.5px;
  padding:0;gap:0;
}
.topbar-social a > i{color:#d4d4d8;font-size:10.5px}
.topbar-social a:hover{
  background:rgba(220,38,38,.18);
  border-color:rgba(220,38,38,.40);
  transform:translateY(-1px);
}
.topbar-social a:hover > i{color:#fca5a5}
@media(max-width:900px){
  .topbar{display:none}
}

.brand{color:#0a0a0a !important;gap:0 !important}
.brand small{color:#7f1d1d !important}
/* SVG logo (header) — %10 küçültülmüş */
.brand-logo{
  height:34px;width:auto;display:block;
  transition:transform .25s ease;
}
.brand:hover .brand-logo{transform:scale(1.03)}
@media(max-width:640px){.brand-logo{height:29px}}
/* Eski text marka parçalarını gizle (artık SVG'de var) */
.brand .brand-mark,.brand > span{display:none !important}
/* Footer için: dark bg, beyaz logo varyantı zaten markup'tan geliyor */
.footer .brand-logo{height:38px}
.nav-links a{color:#3f3a32 !important}
.nav-links a:hover{color:#7f1d1d !important}
.nav-item .dropdown{
  background:#ffffff !important;
  border:1px solid rgba(220,38,38,.20) !important;
  box-shadow:0 30px 70px -20px rgba(127,20,20,.25) !important;
}
.nav-item .dropdown::before{background:#ffffff !important;border-color:rgba(220,38,38,.20) !important}
.nav-item .dropdown a{color:#262626 !important}
.nav-item .dropdown a:hover{background:rgba(220,38,38,.08) !important;color:#7f1d1d !important}
.nav-item .dropdown a small{color:#71717a !important}
.lang-pill{background:rgba(255,255,255,.7) !important;border-color:rgba(220,38,38,.18) !important;color:#3f3f3f !important}
.menu-toggle{background:rgba(255,255,255,.7) !important;border-color:rgba(220,38,38,.20) !important;color:#0a0a0a !important}
.drawer{background:rgba(243,236,224,.97) !important;color:#0a0a0a !important}
.drawer a{color:#0a0a0a !important;border-bottom-color:rgba(220,38,38,.15) !important}
.drawer-close{background:#fff !important;color:#0a0a0a !important;border-color:rgba(220,38,38,.20) !important}

/* ====== Buttons ====== */
.btn-primary{
  background:linear-gradient(120deg,#dc2626 0%,#7f1d1d 100%) !important;
  color:#fff !important;
  box-shadow:0 16px 40px -10px rgba(220,38,38,.55),0 6px 16px rgba(220,38,38,.30) !important;
}
.btn-primary:hover{box-shadow:0 22px 56px -12px rgba(220,38,38,.65),0 8px 22px rgba(220,38,38,.40) !important}
.btn-secondary{color:#0a0a0a !important;border-color:#0a0a0a !important;background:transparent !important}
.btn-secondary:hover{background:#0a0a0a !important;color:#fff !important}
.btn-ghost{background:rgba(255,255,255,.6) !important;border-color:rgba(220,38,38,.20) !important;color:#0a0a0a !important}
.btn-ghost:hover{background:rgba(220,38,38,.10) !important;border-color:rgba(220,38,38,.40) !important;color:#7f1d1d !important}

/* ====== HERO · light + minimal animation ====== */
.hero{padding:190px 0 130px !important}
@media(max-width:768px){.hero{padding:150px 0 90px !important}}
@keyframes heroBreathe{
  0%,100%{ opacity:.65; transform:translateX(-50%) scale(1) }
  50%   { opacity:.95; transform:translateX(-50%) scale(1.06) }
}
.hero::before{
  background:radial-gradient(ellipse 900px 580px at 50% 0%, rgba(220,38,38,.32), transparent 70%) !important;
  filter:blur(70px) !important;
  width:1100px !important;height:600px !important;
  top:-140px !important;left:50% !important;
  transform:translateX(-50%) scale(1);
  animation:heroBreathe 9s ease-in-out infinite !important;
}
.hero::after{
  background:radial-gradient(ellipse 700px 480px at 50% 100%, rgba(127,29,29,.22), transparent 70%) !important;
  filter:blur(60px) !important;
  bottom:-200px !important;right:auto !important;left:50% !important;
  width:900px !important;height:500px !important;
  transform:translateX(-50%);
  animation:none !important;
}
.hero-grid-bg{
  background-image:
    linear-gradient(115deg,transparent 0%,transparent 49.5%,rgba(220,38,38,.05) 49.5%,rgba(220,38,38,.05) 50.5%,transparent 50.5%),
    linear-gradient(115deg,transparent 0%,transparent 79.5%,rgba(220,38,38,.03) 79.5%,rgba(220,38,38,.03) 80.5%,transparent 80.5%),
    linear-gradient(115deg,transparent 0%,transparent 19.5%,rgba(220,38,38,.03) 19.5%,rgba(220,38,38,.03) 20.5%,transparent 20.5%) !important;
  animation:none !important;
}

.hero h1{color:#0a0a0a !important}
.hero h1 .strike{
  text-decoration-color:#dc2626 !important;
  color:#a8a08c !important;
}
.hero h1 .gradient-text{
  background:linear-gradient(120deg,#dc2626 0%,#b91c1c 50%,#7f1d1d 100%) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
  animation:none !important;
}
.hero-sub{color:#3f3a32 !important}
.hero-sub strong{color:#0a0a0a !important}

.eyebrow{
  background:rgba(220,38,38,.10) !important;
  border-color:rgba(220,38,38,.30) !important;
  color:#7f1d1d !important;
}
.eyebrow .live-dot{background:#dc2626 !important;animation:pulseDot 2.4s ease-in-out infinite !important}

.trust-row{color:#3f3a32 !important}
.trust-row .stars{color:#d97706 !important}
.avatars > div{border-color:#fbf6ed !important}

/* op-card light */
.op-card{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 30px 60px -20px rgba(127,20,20,.22),0 10px 26px -8px rgba(127,20,20,.10) !important;
}
.op-head{
  background:linear-gradient(135deg,#fef2f2 0%,#fff 100%) !important;
  border-bottom-color:#ecdfd9 !important;
}
.op-title{color:#0a0a0a !important}
.op-title small{color:#71717a !important}
.op-mode{
  background:rgba(220,38,38,.10) !important;
  color:#7f1d1d !important;
  border-color:rgba(220,38,38,.25) !important;
}
.op-mode .dot{background:#dc2626 !important;animation:none !important;opacity:.85}
.op-section-label{color:#71717a !important}
.op-feed{
  background:#fbf6ed !important;
  border-color:#ecdfd9 !important;
  /* sol-border :nth-child renkleri orijinal kalmalı; sadece diğer kenarlar değişti */
  animation:none !important;opacity:1 !important;transform:none !important;
}
.op-feed-action{color:#71717a !important}
.op-feed-text{color:#1a1612 !important}
.op-feed-text strong{color:#7f1d1d !important}
.op-feed-time{color:#a3a3a3 !important}
.op-orb{animation:none !important;box-shadow:0 8px 30px rgba(220,38,38,.40) !important}
.op-footer{
  background:linear-gradient(135deg,rgba(220,38,38,.10),rgba(127,29,29,.06)) !important;
  border:1px solid rgba(220,38,38,.20) !important;
  color:#1a1612 !important;
}

.float-pill{
  background:#ffffff !important;
  border:1.5px solid #7f1d1d !important;
  box-shadow:5px 5px 0 #7f1d1d !important;
  color:#0a0a0a !important;
  animation:none !important;opacity:1 !important;transform:none !important;
}

/* ====== Section heads — koyu metin ====== */
.section-head h2{color:#0a0a0a !important}
.section-head h2 .accent{
  background:linear-gradient(120deg,#dc2626 0%,#7f1d1d 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.section-head p{color:#3f3a32 !important}
.section-head p strong{color:#0a0a0a !important}
.section-eyebrow{
  background:rgba(220,38,38,.10) !important;
  color:#7f1d1d !important;
  border-color:rgba(220,38,38,.30) !important;
}

/* ====== VS section · light ====== */
.vs-wrap{
  background:linear-gradient(180deg, rgba(243,236,224,.45) 0%, rgba(247,239,222,.25) 100%) !important;
  border-top:1px solid rgba(220,38,38,.18) !important;
  border-bottom:1px solid rgba(220,38,38,.12) !important;
  backdrop-filter:none !important;
}
.vs-wrap::before{
  background:radial-gradient(ellipse 700px 500px at 50% 0%, rgba(220,38,38,.14), transparent 70%) !important;
}
.vs-wrap::after{display:none !important}

.vs-team{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 8px 28px -10px rgba(127,20,20,.10) !important;
  color:#1a1612 !important;
}
.vs-team-title{color:#71717a !important}
.vs-team-headline{color:#0a0a0a !important}
.vs-team-cost{color:#b91c1c !important}
.vs-team.win{
  background:linear-gradient(160deg,#fff5f3 0%,#ffffff 60%) !important;
  border-color:rgba(220,38,38,.40) !important;
  box-shadow:0 24px 60px -25px rgba(220,38,38,.35),0 8px 20px -6px rgba(220,38,38,.18) !important;
}
.vs-team.win .vs-team-headline{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.vs-team.win .vs-team-cost{color:#16a34a !important}
.vs-team.win p{color:#262626 !important}
.vs-team.win p strong{color:#0a0a0a !important}
.role-list{}
.role-item{
  background:#fbf6ed !important;
  border-color:#ecdfd9 !important;
  color:#3f3f3f !important;
}
.role-item i{color:#dc2626 !important}
.vs-circle{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  color:#fff !important;
  box-shadow:0 0 0 8px rgba(220,38,38,.10),0 22px 50px rgba(220,38,38,.40) !important;
}
.win-badge{background:rgba(220,38,38,.10) !important;border-color:rgba(220,38,38,.30) !important}
.win-badge .num{background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;color:#fff !important}
.win-badge .lbl{color:#0a0a0a !important}

/* ====== While-grid (Otonom mod cards) · light ====== */
.while-card{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 6px 24px -8px rgba(127,20,20,.10),0 1px 0 rgba(255,255,255,.7) inset !important;
}
.while-card:hover{
  border-color:rgba(220,38,38,.40) !important;
  box-shadow:0 30px 60px -25px rgba(220,38,38,.30),0 6px 18px rgba(220,38,38,.10) !important;
}
.while-card::before{opacity:.10 !important}
.while-icon{
  background:rgba(220,38,38,.08) !important;
  border-color:rgba(220,38,38,.18) !important;
}
.while-tag{
  background:rgba(22,163,74,.10) !important;
  border-color:rgba(22,163,74,.25) !important;
  color:#15803d !important;
}
.while-tag .dot{background:#16a34a !important}
.while-card h3{color:#0a0a0a !important}
.while-card p{color:#3f3a32 !important}
.while-card p strong{color:#0a0a0a !important}

/* ====== OS Grid · light ====== */
.os-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbf6ed 100%) !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 6px 24px -8px rgba(127,20,20,.10),0 1px 0 rgba(255,255,255,.7) inset !important;
}
.os-card:hover{
  border-color:rgba(220,38,38,.45) !important;
  box-shadow:0 30px 60px -25px rgba(220,38,38,.30) !important;
}
.os-card::before{opacity:.18 !important}
.os-icon{
  background:rgba(220,38,38,.08) !important;
  color:var(--os-accent,#dc2626) !important;
  border-color:rgba(220,38,38,.18) !important;
}
.os-card h3{color:#0a0a0a !important}
.os-card p{color:#525252 !important}
.os-card p strong{color:#0a0a0a !important}
.os-link{color:#7f1d1d !important}
.os-link:hover{color:#dc2626 !important}

/* OS section'ı zaten section--light olarak işaretlendi; o sınıf altında renkler alttaki rules ile zaten doğru */

/* ====== Code block · DARK kalsın (kontrast) ====== */
.code-block{box-shadow:0 30px 60px -20px rgba(127,20,20,.30) !important}

/* ====== Compare (önce/sonra) · light ====== */
.compare-col{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 8px 28px -10px rgba(127,20,20,.10) !important;
}
.compare-col h3{color:#0a0a0a !important}
.compare-list li{color:#262626 !important;border-bottom-color:#f1e6dc !important}
.compare-list li strong{color:#0a0a0a !important}
.compare-tag{
  background:rgba(0,0,0,.05) !important;
  color:#525252 !important;
  border-color:rgba(0,0,0,.08) !important;
}
.compare-cost{
  background:#fbf6ed !important;
  border-color:#ecdfd9 !important;
  color:#3f3f3f !important;
}
.compare-cost .big{color:#0a0a0a !important}
.compare-col.after{
  background:linear-gradient(160deg,#fff5f3 0%,#ffffff 60%) !important;
  border-color:rgba(220,38,38,.40) !important;
  box-shadow:0 24px 60px -25px rgba(220,38,38,.35) !important;
}
.compare-col.after .compare-tag{
  background:rgba(220,38,38,.10) !important;
  color:#7f1d1d !important;
  border-color:rgba(220,38,38,.30) !important;
}
.compare-col.after .compare-cost{
  background:rgba(220,38,38,.08) !important;
  border-color:rgba(220,38,38,.20) !important;
  color:#7f1d1d !important;
}
.compare-col.after .compare-cost .big{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.compare-col.before .compare-list li i{color:#b91c1c !important}
.compare-col.after .compare-list li i{color:#16a34a !important}

/* ====== Stats · light kırmızı vurgu ====== */
.stats{
  background:linear-gradient(180deg, rgba(255,247,243,.6), rgba(255,235,235,.6) 50%, rgba(255,247,243,.6)) !important;
  border-top:1px solid rgba(220,38,38,.20) !important;
  border-bottom:1px solid rgba(220,38,38,.20) !important;
}
.stats::before{
  background:
    radial-gradient(ellipse 600px 220px at 25% 50%, rgba(220,38,38,.18), transparent 70%),
    radial-gradient(ellipse 600px 220px at 75% 50%, rgba(127,29,29,.16), transparent 70%) !important;
}
.stats::after{display:none !important}
.stat-num{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.stat-lbl{color:#3f3a32 !important;font-weight:700}

/* ====== Audiences · light ====== */
.aud-card{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  color:#0a0a0a !important;
  box-shadow:0 6px 24px -8px rgba(127,20,20,.08) !important;
}
.aud-card:hover{
  background:#fff5f3 !important;
  border-color:rgba(220,38,38,.40) !important;
  box-shadow:0 28px 56px -25px rgba(220,38,38,.30) !important;
}
.aud-icon{
  background:rgba(220,38,38,.08) !important;
  border-color:rgba(220,38,38,.18) !important;
}
.aud-card strong{color:#0a0a0a !important}
.aud-card span{color:#525252 !important}

/* ====== Testimonials section already gets section--light section--blush ====== */
/* Ek sıkı kuralları korumak için aşağıda muhafaza */
.section--light .testi{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 10px 32px -12px rgba(127,20,20,.12) !important;
}
.section--light .testi:hover{
  border-color:rgba(220,38,38,.40) !important;
  box-shadow:0 28px 60px -25px rgba(220,38,38,.30) !important;
}
.section--light .testi .stars{color:#e0a000 !important}
.section--light .testi-quote{color:#262626 !important}
.section--light .testi-quote strong{color:#0a0a0c !important}
.section--light .testi-author{border-top-color:#ecdfd9 !important}
.section--light .testi-meta strong{color:#0a0a0c !important}
.section--light .testi-meta span{color:#71717a !important}
.section--light .testi-result{
  background:rgba(220,38,38,.07) !important;
  border-color:rgba(220,38,38,.20) !important;
  color:#7f1d1d !important;
}
.section--light .testi-result .num{color:#0a0a0c !important}
.section--light .testi-avatar{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  color:#fff !important;
}

/* ====== FAQ · light ====== */
.faq-item{
  background:#ffffff !important;
  border:1px solid #ecdfd9 !important;
  box-shadow:0 4px 18px -6px rgba(127,20,20,.06) !important;
}
.faq-item.open{
  border-color:rgba(220,38,38,.40) !important;
  box-shadow:0 18px 40px -16px rgba(220,38,38,.25) !important;
}
.faq-q{color:#0a0a0a !important}
.faq-q i{
  background:rgba(220,38,38,.10) !important;
  color:#7f1d1d !important;
}
.faq-item.open .faq-q i{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  color:#fff !important;
}
.faq-a p{color:#3f3a32 !important}
.faq-a p strong{color:#0a0a0a !important}

/* ====== Final CTA · büyük kırmızı poster ====== */
.final-cta{
  background:radial-gradient(ellipse 1100px 700px at 50% 30%, rgba(220,38,38,.18) 0%, rgba(247,239,222,.5) 60%, rgba(243,236,224,.85) 100%) !important;
  border-top:1px solid rgba(220,38,38,.30) !important;
  color:#0a0a0a !important;
}
.final-cta::before{
  background-image:
    linear-gradient(rgba(220,38,38,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(220,38,38,.06) 1px,transparent 1px) !important;
}
.final-cta::after{
  background:radial-gradient(circle, rgba(220,38,38,.30), transparent 70%) !important;
}
.final-cta h2{color:#0a0a0a !important}
.final-cta h2 .accent{
  background:linear-gradient(120deg,#dc2626,#7f1d1d) !important;
  -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;
}
.final-cta p{color:#3f3a32 !important}
.final-cta p strong{color:#0a0a0a !important}
.final-checks{color:#3f3a32 !important}
.final-checks span i{color:#16a34a !important}
.final-cta .btn-secondary{color:#0a0a0a !important;border-color:#0a0a0a !important}
.final-cta .btn-secondary:hover{background:#0a0a0a !important;color:#fff !important}

/* ====== Ticker · DARK kalsın (kırmızı kontrast bandı) ====== */
/* Footer da dark kalır — gurizon.css'teki orijinal kalıyor */

/* ===========================================================
   HERO RIGHT · SERVICE ROTATOR
   Minimal animasyon — 4 hizmet sırayla highlight oluyor.
   Toplam döngü 14s, her hizmet ~3s aktif.
   =========================================================== */
.svc-card{
  position:relative;
  background:#ffffff;
  border:1px solid #ecdfd9;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(127,20,20,.22), 0 10px 26px -8px rgba(127,20,20,.10);
  max-width:480px;margin:0 auto;
}
.svc-head{
  padding:18px 22px;
  background:linear-gradient(135deg,#fef2f2 0%,#ffffff 100%);
  border-bottom:1px solid #ecdfd9;
  display:flex;align-items:center;gap:12px;
}
.svc-orb{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(120deg,#dc2626,#7f1d1d);
  color:#fff;display:grid;place-items:center;font-size:14px;flex-shrink:0;
  box-shadow:0 8px 20px rgba(220,38,38,.40);
}
.svc-titles strong{
  display:block;font:800 14.5px/1.15 'Manrope';color:#0a0a0a;letter-spacing:-.005em
}
.svc-titles small{
  display:block;font:600 11px/1 'JetBrains Mono';color:#71717a;margin-top:4px;letter-spacing:.3px
}

.svc-list{padding:14px;display:flex;flex-direction:column;gap:4px}

.svc{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:14px;border-radius:14px;
  border:1px solid transparent;background:transparent;
  animation:svcCycle 14s cubic-bezier(.4,0,.2,1) infinite;
}
.svc:nth-child(1){animation-delay:0s}
.svc:nth-child(2){animation-delay:-10.5s}
.svc:nth-child(3){animation-delay:-7s}
.svc:nth-child(4){animation-delay:-3.5s}

@keyframes svcCycle{
  0%, 1%   { background:transparent; border-color:transparent }
  3%, 22%  { background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.20) }
  25%,100% { background:transparent; border-color:transparent }
}

.svc-ic{
  width:44px;height:44px;border-radius:12px;
  background:#fbf6ed;border:1px solid #ecdfd9;
  display:grid;place-items:center;
  color:#a3a3a3;font-size:16px;flex-shrink:0;
  animation:svcIc 14s cubic-bezier(.4,0,.2,1) infinite;
}
.svc:nth-child(1) .svc-ic{animation-delay:0s}
.svc:nth-child(2) .svc-ic{animation-delay:-10.5s}
.svc:nth-child(3) .svc-ic{animation-delay:-7s}
.svc:nth-child(4) .svc-ic{animation-delay:-3.5s}
@keyframes svcIc{
  0%, 1%   { background:#fbf6ed; border-color:#ecdfd9; color:#a3a3a3; transform:scale(1); box-shadow:none }
  3%, 22%  {
    background:linear-gradient(120deg,#dc2626,#7f1d1d);
    border-color:rgba(220,38,38,.45);
    color:#ffffff;
    transform:scale(1.06);
    box-shadow:0 8px 20px rgba(220,38,38,.40);
  }
  25%,100% { background:#fbf6ed; border-color:#ecdfd9; color:#a3a3a3; transform:scale(1); box-shadow:none }
}

.svc-meta{flex:1;min-width:0}
.svc-name{
  display:block;font:800 11px/1 'JetBrains Mono';
  letter-spacing:1.4px;color:#71717a;margin-bottom:5px;
  animation:svcName 14s cubic-bezier(.4,0,.2,1) infinite;
}
.svc:nth-child(1) .svc-name{animation-delay:0s}
.svc:nth-child(2) .svc-name{animation-delay:-10.5s}
.svc:nth-child(3) .svc-name{animation-delay:-7s}
.svc:nth-child(4) .svc-name{animation-delay:-3.5s}
@keyframes svcName{
  0%, 1%   { color:#71717a }
  3%, 22%  { color:#7f1d1d }
  25%,100% { color:#71717a }
}
.svc-desc{
  display:block;font-size:13.5px;line-height:1.4;font-weight:500;color:#1a1612;
}

.svc-arrow{
  font-size:12px;color:#d4cdba;flex-shrink:0;
  animation:svcArrow 14s cubic-bezier(.4,0,.2,1) infinite;
}
.svc:nth-child(1) .svc-arrow{animation-delay:0s}
.svc:nth-child(2) .svc-arrow{animation-delay:-10.5s}
.svc:nth-child(3) .svc-arrow{animation-delay:-7s}
.svc:nth-child(4) .svc-arrow{animation-delay:-3.5s}
@keyframes svcArrow{
  0%, 1%   { color:#d4cdba; transform:translateX(0) }
  3%, 22%  { color:#dc2626; transform:translateX(4px) }
  25%,100% { color:#d4cdba; transform:translateX(0) }
}

.svc-foot{
  padding:14px 22px;
  background:linear-gradient(135deg,rgba(220,38,38,.10),rgba(127,29,29,.05));
  border-top:1px solid #ecdfd9;
  font:700 12.5px/1.4 'Manrope';color:#1a1612;
  text-align:center;letter-spacing:-.005em;
}
.svc-foot i{color:#dc2626;margin-right:4px}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  body::before,.hero::before{animation:none !important}
  .svc,.svc-ic,.svc-name,.svc-arrow{animation:none !important}
  /* Reduced motion için ilk hizmeti sabit aktif tut */
  .svc:nth-child(1){background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.20)}
  .svc:nth-child(1) .svc-ic{
    background:linear-gradient(120deg,#dc2626,#7f1d1d);
    border-color:rgba(220,38,38,.45);color:#fff;
  }
  .svc:nth-child(1) .svc-name{color:#7f1d1d}
  .svc:nth-child(1) .svc-arrow{color:#dc2626}
}