/* ==========================================================================
   AZT PROFESYONEL SİTE YÖNETİMİ - CSS DOSYASI
   Son Güncelleme: Orijinal Boyutlar ve Kusursuz Akıllı Kartlar
   ========================================================================== */

/* ================= 1. KÖK DEĞİŞKENLER ================= */
:root {
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a; 
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #1e40af; 
  --primary2: #3b82f6; 
  --accent: #0f172a; 
  --radius: 16px; 
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  --shadow2: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(139, 115, 85, 0.10), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, rgba(68, 64, 60, 0.08), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, #fafafa 55%, var(--bg) 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(900px 520px at 20% 35%, rgba(139, 115, 85, 0.08), transparent 60%),
    radial-gradient(900px 520px at 80% 55%, rgba(68, 64, 60, 0.06), transparent 62%),
    radial-gradient(1000px 700px at 50% 95%, rgba(139, 115, 85, 0.05), transparent 65%);
}

.container { width: min(1100px, 92%); margin-inline: auto; }


/* ================= 2. HEADER & NAV (SaaS Cam Efekti) ================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 245, 244, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(31, 41, 55, 0.10);
  transition: padding .25s ease, box-shadow .25s ease, background .25s ease;
}

.header--scrolled {
  background: rgba(245, 245, 244, 0.88);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.header__inner { display: flex; align-items: center; gap: 18px; padding: 16px 0; transition: padding .25s ease; }
.header--scrolled .header__inner { padding: 10px 0; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand__logo { height: 52px; width: auto; }
.brand__name { font-weight: 900; font-size: 15px; letter-spacing: -0.2px; }
.brand__tag { font-size: 12px; color: var(--muted); margin-top: 2px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav a {
  position: relative; text-decoration: none; font-weight: 700; font-size: 14px;
  color: rgba(31, 41, 55, 0.88); padding: 6px 0; transition: color 0.25s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary2));
  border-radius: 2px; transition: width .25s ease;
}
.nav a:hover { color: var(--primary); }
.nav a:hover::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: 10px; }
.header .btn { padding: 10px 16px; border-radius: 999px; font-size: 14px; }
.header .btn--ghost { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(31, 41, 55, 0.12); }
.header .btn--ghost:hover { background: #f5f5f4; }
.header .btn--primary { box-shadow: 0 8px 22px rgba(111, 90, 67, 0.24); }

.nav__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  border-radius: 14px; border: 1px solid var(--line); background: #fff;
}
.nav__toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; border-radius: 2px; }


/* ================= 3. BUTONLAR (Shine Efekti vs) ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 18px; border-radius: 16px; font-weight: 800; font-size: 14.5px;
  border: 1px solid var(--line); background: #ffffff; color: var(--text);
  text-decoration: none; position: relative; overflow: hidden; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.btn--block { width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  border: none; color: #ffffff; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
}

.btn--primary::after {
  content: ""; position: absolute; inset: -40% -60%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-40%) rotate(12deg);
  transition: transform .6s ease; pointer-events: none;
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--primary2), var(--primary2));
  color: #ffffff; transform: translateY(-2px); filter: brightness(1.03);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.35);
}
.btn--primary:hover::after { transform: translateX(40%) rotate(12deg); }

.btn--ghost { background: #ffffff; }
.btn--ghost:hover {
  background: #f5f5f4; border-color: var(--primary); color: var(--text);
  transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}


/* ================= 4. HERO ALANI (Açılış Ekranı) ================= */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh; 
  padding: 120px 0 100px; 
  display: flex;
  align-items: center;
  background-image: url("assets/hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.80) 45%, rgba(15, 23, 42, 0.40) 100%);
}

.hero .container { position: relative; z-index: 1; }

.hero__grid { display: grid; grid-template-columns: 1fr 420px; gap: 50px; align-items: center; }

.hero__content { max-width: 600px; }
.hero__content h1 { color: #ffffff; font-size: 42px; line-height: 1.2; margin-bottom: 20px; }
.hero__content .lead { color: #cbd5e1; font-size: 18px; line-height: 1.6; }
.hero__content .badge {
  display: inline-block; background: rgba(255, 255, 255, 0.1); color: #60a5fa;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px; border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 20px;
}

.hero__cta .btn--ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; }
.hero__cta .btn--ghost:hover { background: rgba(255, 255, 255, 0.2); border-color: #ffffff; color: #ffffff; }

.hero__card {
  background: #ffffff; border-radius: 20px; padding: 30px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  position: relative; max-width: 560px;
}
.hero__cardTop h3 { color: #0f172a; font-size: 24px; margin-bottom: 8px; }
.hero__cardTop p { color: #64748b; font-size: 14px; margin-bottom: 24px; }


/* ================= 5. HAKKIMIZDA (APPLE / STRIPE TARZI SAAS TASARIMI) ================= */
.section { padding: 80px 0; background-color: #fafafa; position: relative; z-index: 10; }
.section--ambient { background-color: #f8fafc; }

/* Arka Plandaki Modern Işık Parlamaları (Auralar) */
.about-saas {
  position: relative;
  overflow: hidden;
}
.about-saas::before {
  content: ""; position: absolute; width: 520px; height: 520px; left: -120px; top: 80px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, rgba(59,130,246,0.00) 68%);
  filter: blur(10px); pointer-events: none;
}
.about-saas::after {
  content: ""; position: absolute; width: 480px; height: 480px; right: -120px; bottom: 40px;
  background: radial-gradient(circle, rgba(15,23,42,0.10) 0%, rgba(15,23,42,0.00) 68%);
  filter: blur(12px); pointer-events: none;
}
.about-saas .container { position: relative; z-index: 2; }

/* Üst Kısım: Başlık ve İstatistikler Düzeni */
.about-saas__hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 30px;
}

/* Şeffaf ve Şık Üst Etiket (Eyebrow) */
.about-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(148,163,184,0.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: 1.1px; margin-bottom: 18px;
}

/* Ana Başlık */
.about-saas__intro h2 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-weight: 800;
  max-width: 760px;
  color: #0f172a;
}
.about-saas__intro h2 span {
  display: block;
  background: linear-gradient(135deg, #0f172a 0%, #1e40af 55%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-lead {
  max-width: 640px; margin: 0;
  font-size: 18px; line-height: 1.8; color: #475569;
}

/* Sağ Üstteki Cam Efektli (Glassmorphism) Kart */
.about-saas__stats { display: grid; gap: 18px; }
.about-glass-card {
  padding: 26px; border-radius: 28px;
  background: rgba(255,255,255,0.72); border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 20px 45px rgba(15,23,42,0.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.about-glass-card .stat-kicker {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 800; color: #64748b; margin-bottom: 10px;
}
.about-glass-card strong {
  display: block; font-size: 34px; line-height: 1.05; letter-spacing: -1.5px;
  color: #0f172a; margin-bottom: 10px;
}
.about-glass-card p { margin: 0; color: #475569; line-height: 1.7; font-size: 15px; }

/* 4'lü Mini İstatistik Izgarası */
.about-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.about-metric-card {
  padding: 20px; border-radius: 22px;
  background: rgba(255,255,255,0.78); border: 1px solid rgba(226,232,240,0.9);
  box-shadow: 0 12px 30px rgba(15,23,42,0.05);
}
.about-metric-card strong { display: block; font-size: 15px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.about-metric-card span { display: block; color: #64748b; font-size: 14px; line-height: 1.6; }

/* Orta Kısım: Kalite Politikası İçin Dev Lüks Kart */
.about-story-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px; align-items: start;
  padding: 38px; margin-top: 18px; border-radius: 32px;
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,64,175,0.94));
  box-shadow: 0 28px 70px rgba(15,23,42,0.24);
  border: 1px solid rgba(255,255,255,0.08);
}
.story-badge {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
  color: #bfdbfe; font-size: 13px; font-weight: 800; letter-spacing: 1px; margin-bottom: 18px;
}
.about-story-card__left h3 {
  margin: 0; color: #ffffff;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2; letter-spacing: -1px;
  max-width: 440px;
}
.about-story-card__right p { margin: 0 0 16px; color: #dbeafe; font-size: 15px; line-height: 1.7; }
.about-story-card__right p:last-child { margin-bottom: 0; }

/* Alt Kısım: 3'lü Değer Kartları (Hedef, Misyon, Vizyon) */
.about-feature-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.about-feature-card {
  padding: 28px; border-radius: 28px;
  background: rgba(255,255,255,0.82); border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 16px 36px rgba(15,23,42,0.06);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.about-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(15,23,42,0.10); border-color: rgba(59,130,246,0.30);
}
.feature-icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(30,64,175,0.10), rgba(96,165,250,0.18));
  color: var(--primary); font-size: 20px;
}
.about-feature-card h3 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.6px; color: #0f172a; font-weight: 800; }
.about-feature-card p { margin: 0; color: #64748b; line-height: 1.6; font-size: 15px; }

/* Mobil Uyumlar */
@media (max-width: 980px) {
  .about-saas__hero, .about-story-card, .about-feature-grid { grid-template-columns: 1fr; }
  .about-mini-grid { grid-template-columns: 1fr 1fr; }
  .about-saas__intro h2 { letter-spacing: -1px; }
}
@media (max-width: 640px) {
  .about-mini-grid { grid-template-columns: 1fr; }
  .about-story-card, .about-feature-card, .about-glass-card { padding: 22px; }
  .about-lead { font-size: 16px; }
}

/* =========================
   PREMIUM ABOUT BACKGROUND
   ========================= */

.about-premium{
  position:relative;
  background:#020617;
  color:white;
  overflow:hidden;
}

.about-premium::before{
  content:"";
  position:absolute;

  bottom:-250px;
  left:-200px;

  width:900px;
  height:600px;

  background:radial-gradient(
    circle,
    rgba(96,165,250,0.9) 0%,
    rgba(59,130,246,0.6) 35%,
    rgba(37,99,235,0.4) 55%,
    transparent 70%
  );

  filter:blur(140px);
  opacity:0.8;

  pointer-events:none;
}

.about-premium::after{
  content:"";
  position:absolute;

  top:40%;
  right:-200px;

  width:700px;
  height:500px;

  background:radial-gradient(
    circle,
    rgba(56,189,248,0.7) 0%,
    rgba(59,130,246,0.4) 40%,
    transparent 70%
  );

  filter:blur(120px);
  opacity:0.6;

  pointer-events:none;
}
/* ================= 6. HİZMETLER (KUSURSUZ AKILLI KARTLAR & SAAS EFEKTİ) ================= */
.services-split { display: grid; grid-template-columns: 320px 1fr; gap: 60px; max-width: 1450px; margin: 0 auto; width: 95%; align-items: start; }
.services-left { position: sticky; top: 120px; }

/* Kartların birbirinden bağımsız uzamasını sağlar */
.services-right { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
  align-items: start; 
}

/* KART ANA İSKELETİ: Orijinal Boyut + SaaS Giriş Animasyonu */
.minimal-card {
  position: relative;
  min-height: 420px; 
  height: auto;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  flex-direction: column; 
  border: none;
  
  /* --- SAAS GİRİŞ ANİMASYONU BAŞLANGIÇ DURUMU --- */
  opacity: 0;
  translate: 0 60px; 
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
  
  transition-property: opacity, translate, transform, box-shadow;
  transition-duration: 0.8s, 0.8s, 0.4s, 0.4s;
  transition-timing-function: ease-out, ease-out, cubic-bezier(0.16, 1, 0.3, 1), ease;
}

.minimal-card.goster {
  opacity: 1;
  translate: 0 0;
}

.services-right .minimal-card:nth-child(1) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
.services-right .minimal-card:nth-child(2) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
.services-right .minimal-card:nth-child(3) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
.services-right .minimal-card:nth-child(4) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
.services-right .minimal-card:nth-child(5) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
.services-right .minimal-card:nth-child(6) { transition-delay: 0.4s, 0.4s, 0s, 0s; }
.services-right .minimal-card:nth-child(7) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
.services-right .minimal-card:nth-child(8) { transition-delay: 0.4s, 0.4s, 0s, 0s; }
.services-right .minimal-card:nth-child(9) { transition-delay: 0.5s, 0.5s, 0s, 0s; }

.minimal-card.goster:not(.expanded):hover { 
  transform: translateY(-10px); 
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4); 
}

.minimal-card.goster:not(.expanded):hover .card-overlay {
  background: linear-gradient(to top, rgba(15,23,42,0.98) 0%, rgba(15,23,42,0.7) 60%, rgba(15,23,42,0.3) 100%);
}

.card-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.4) 60%, transparent 100%);
  transition: all 0.4s ease;
}

.card-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: flex-end; 
  flex-grow: 1; 
  padding: 34px 34px 70px 34px; 
  color: #fff;
}

.minimal-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }

/* ================= İŞTE YENİ SİHİR BURADA ================= */
/* Öndeki kısa özet yazısını seçer ve animasyon ekler */
.minimal-card .card-content > p { 
  font-size: 15px; margin: 0; color: rgba(255,255,255,0.85); line-height: 1.5; text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 100px;
  opacity: 1;
  overflow: hidden;
}

/* KART AÇILDIĞINDA: O kısa ve tekrar eden özet yazısı eriyerek yok olur! */
.minimal-card.expanded .card-content > p {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}
/* ========================================================== */

.card-details-wrapper {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.5s ease;
}

/* Aradaki kesik çizgiyi kaldırdık, çünkü artık sadece uzun yazı var */
.card-details-inner { 
  padding-top: 0; 
  border-top: none; 
}

.minimal-card.expanded { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4); }
.minimal-card.expanded .card-overlay {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

/* Uzun yazının başlıkla arasına şık bir boşluk bıraktık */
.minimal-card.expanded .card-details-wrapper { 
  max-height: 800px; 
  margin-top: 16px;
  opacity: 1;
}

/* Şık Liste */
.modal-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.modal-list li { position: relative; padding-left: 36px; color: #fff; font-size: 14px; line-height: 1.6; }
.modal-list li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: 0; color: var(--primary); font-size: 12px;
  background: #fff; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
}

/* Aşağı Ok Butonu */
.card-expand-btn {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
  color: #fff; display: grid; place-items: center; transition: all 0.4s ease;
}
.minimal-card.expanded .card-expand-btn { transform: translateX(-50%) rotate(180deg); background: var(--primary); border-color: var(--primary); }

/* Açılır Kart İçindeki Özel Bilgi Notu */
.service-note {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(59, 130, 246, 0.12); /* Hafif şeffaf lüks mavi zemin */
  border-left: 3px solid #3b82f6; /* Sol tarafta mavi vurgu çizgisi */
  border-radius: 6px;
  color: #bae6fd; /* Okunabilir açık mavi/beyaz tonu */
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.service-note i {
  color: #38bdf8;
  font-size: 14px;
  margin-top: 2px;
}

/* ================= 7. DİĞER BİLEŞENLER (Orijinal Kod) ================= */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.step { display: flex; gap: 12px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06); }
.step__no { width: 36px; height: 36px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; display: grid; place-items: center; font-weight: 900; }
.step p { margin: 6px 0 0; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.stat { background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06); }
.stat__num { font-size: 26px; font-weight: 900; }
.stat__label { color: var(--muted); margin-top: 6px; }

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.quote { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08); }
.quote p { margin: 0; color: var(--text); }
.quote__by { margin-top: 10px; color: var(--muted); font-weight: 800; }

.accordion { display: grid; gap: 10px; }
.acc { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06); }
.acc__btn { width: 100%; text-align: left; padding: 14px 16px; border: 0; background: transparent; font-weight: 900; cursor: pointer; color: var(--text); }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.acc__panel p { margin: 0; padding: 12px 16px; color: var(--muted); }

/* form alanları */
.miniForm { display: grid; gap: 10px; }
.miniForm label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input, textarea { width: 100%; padding: 12px; border-radius: 14px; border: 1px solid var(--line); outline: none; background: #ffffff; font-size: 14px; color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; }
input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact__form label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.infoBox { background: rgba(255, 255, 255, 0.80); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06); }
.infoBox p { margin: 8px 0; color: var(--muted); }
.infoActions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mapBox { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.80); padding: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06); }
.mapBox__placeholder { height: 180px; border-radius: 14px; display: grid; place-items: center; color: var(--muted); background: rgba(139, 115, 85, 0.06); border: 1px dashed rgba(139, 115, 85, 0.28); }


/* ================= 8. FOOTER & YÜZEN BUTON (Orijinal Kod) ================= */
.footer { padding: 18px 0; background: #1f1f1f; color: #f5f5f4; position: relative; z-index: 10; }
.footer__inner { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.footer__links a { color: #d6d3d1; text-decoration: none; margin-left: 10px; font-weight: 800; font-size: 13px; }
.footer__links a:hover { color: var(--primary2); }

.floating { position: fixed; right: 18px; bottom: 18px; padding: 12px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; text-decoration: none; font-weight: 900; box-shadow: 0 14px 34px rgba(37, 99, 235, 0.25); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; z-index: 9999; }
.floating:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(37, 99, 235, 0.40); filter: brightness(1.05); }


/* ================= 9. ANİMASYONLAR (Saas Reveal & Yüklenme) ================= */
[data-reveal] { opacity: 0; transform: translateY(22px) scale(0.985); filter: blur(10px); transition: opacity 1.05s cubic-bezier(.16, 1, .3, 1), transform 1.05s cubic-bezier(.16, 1, .3, 1), filter 1.05s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform, filter; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

body:not(.is-loaded) .hero__content, body:not(.is-loaded) .hero__card { opacity: 0; transform: translateY(14px); }
body.is-loaded .hero__content { animation: saasUp .65s ease forwards; }
body.is-loaded .hero__card { animation: saasUp .70s ease forwards; animation-delay: .10s; }
body.is-loaded .hero__cta .btn:nth-child(1) { animation: saasUp .65s ease forwards; animation-delay: .16s; opacity: 0; }
body.is-loaded .hero__cta .btn:nth-child(2) { animation: saasUp .65s ease forwards; animation-delay: .22s; opacity: 0; }
@keyframes saasUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }


/* ================= 10. MOBİL UYUM (@media SORGULARI - Düzeltildi) ================= */
@media (max-width: 1200px) {
  .services-right { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  /* hero bölümünün mobil yapışkanlık iptali */
  .hero { position: relative; height: auto; min-height: 100vh; padding-top: 100px; padding-bottom: 60px; z-index: 1; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__content { text-align: center; margin: 0 auto; }
  .hero__card { width: 100%; max-width: 100%; margin-top: 12px;}
  
  /* mobilde hızlı teklif formunun soluk kalmasını önler */
  .hero-form, .hero__form, .quote-form { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; }

  /* hakkımızda mobilde alt alta */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-img-wrap { padding: 0; }
  .about-badge { bottom: -20px; right: auto; left: 20px; }
  .about-img-wrap img { height: 320px; }

  /* hizmetler başlık üstte, kartlar altta */
  .services-split { grid-template-columns: 1fr; gap: 40px; }
  .services-left { position: static; text-align: center; }
  
  /* Mobilde parmakla dokunup kaydırırken kartların havaya kalkmasını iptal eder (AÇIK KARTLARI BOZMAZ) */
  .services-right .minimal-card:not(.expanded):hover,
  .services-right .minimal-card:not(.expanded):active {
    transform: translateY(0) scale(1) !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15) !important;
  }
  
  /* iOS ve Android'de yatay kaydırmanın donanımsal olarak kusursuz akması için */
  .services-right {
    -webkit-overflow-scrolling: touch !important; 
    overscroll-behavior-x: contain !important; 
    touch-action: pan-x pan-y !important; 
  }
}

@media (max-width: 920px) {
  /* mobil menü ikonu */
  .nav__toggle { display: block; }
  
  /* ================= BÜTÜNLEŞİK ÇEKMECE MENÜ (Header'a yapışık) ================= */
  .nav { 
    position: absolute; 
    top: 100%; left: 0; right: 0; margin-top: 0; 
    background: rgba(255, 255, 255, 0.98); 
    border-top: 1px solid var(--line); 
    border-bottom: 1px solid var(--line); 
    border-radius: 0 0 24px 24px; 
    padding: 10px 5% 24px; 
    display: none; 
    flex-direction: column; 
    gap: 2px; 
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2); 
  }
  
  .nav a { 
    display: block; width: 100%; padding: 14px 16px; 
    background: transparent; border: none; border-radius: 12px; 
    font-size: 15px; font-weight: 700; color: var(--text);
    text-align: left !important; 
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav a::after { display: none; }
  .nav a:active, .nav a:hover { background: #f1f5f9; color: var(--primary); }
  
  .header__actions { display: none; }
  .contact, .stats, .quotes { grid-template-columns: 1fr; }
  body { background-attachment: scroll; }
}

@media (max-width: 768px) {
  /* Mobilde Kartların Yatay Kaydırma (Swipe) Efekti */
  .services-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    padding-bottom: 24px;
    margin: 0 -5%; padding-left: 5%; padding-right: 5%;
    -ms-overflow-style: none; scrollbar-width: none; 
  }
  .services-right::-webkit-scrollbar { display: none; }

  .services-right .minimal-card {
    flex: 0 0 85% !important; 
    scroll-snap-align: center; 
    /* Mobil boyutu da orijinal 420px yapıldı */
    height: auto !important; 
    min-height: 420px !important; 
  }
}

@media (max-width: 600px) {
  .services-right { grid-template-columns: 1fr; }
}

/* ================= EFSANEVİ MOBİL APP DENEYİMİ (Pulse Efekti) ================= */
@keyframes luksPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  70% { box-shadow: 0 0 0 18px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.floating { animation: luksPulse 2.5s infinite; }

/* ================= PREMIUM CİLALAMA & DETAYLAR ================= */
.btn:active, .saas-modal__close:active { transform: scale(0.96) translateY(0) !important; transition: transform 0.1s ease !important; }

@keyframes levitate { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } }
.about-img-wrap { animation: levitate 6s ease-in-out infinite; }

@keyframes levitate-reverse { 0% { transform: translateY(0px); } 50% { transform: translateY(8px); } 100% { transform: translateY(0px); } }
.about-badge { animation: levitate-reverse 5s ease-in-out infinite; }

.hero__content .badge { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.3); }
.hero__content .badge::before {
  content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg); animation: badgeShine 4s infinite;
}
@keyframes badgeShine { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }

.stat__num { background: linear-gradient(135deg, var(--primary), #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; transition: transform 0.3s ease, filter 0.3s ease; }
.stat:hover .stat__num { transform: scale(1.08); filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.3)); }
.stat { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important; }
.stat:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12) !important; border-color: rgba(37, 99, 235, 0.2) !important; }

input, textarea { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; }
input:focus, textarea:focus { transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(37, 99, 235, 0.25) !important; border-color: var(--primary) !important; }

.acc { position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.acc::before { content: ""; position: absolute; left: -1px; top: 10%; height: 80%; width: 3px; background: linear-gradient(to bottom, var(--primary), var(--primary2)); border-radius: 4px; opacity: 0; transform: scaleY(0); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.acc:hover::before, .acc:focus-within::before { opacity: 1; transform: scaleY(1); }
.acc:hover { transform: translateX(4px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

::selection { background: rgba(37, 99, 235, 0.15); color: var(--primary); }
::-moz-selection { background: rgba(37, 99, 235, 0.15); color: var(--primary); }

.btn--primary { position: relative; z-index: 1; }
.btn--primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1; filter: blur(14px); opacity: 0.4; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.btn--primary:hover::before { opacity: 0.75; transform: scale(1.1); }

.footer__socials { display: flex; gap: 12px; align-items: center; }
.footer__socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #f5f5f4; font-size: 18px; text-decoration: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.footer__socials a:hover { transform: translateY(-5px); background: var(--primary); color: #ffffff; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4); }
.footer__socials a:hover .fa-instagram { background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.contact-socials { margin-top: 24px; padding-top: 18px; border-top: 1px dashed rgba(0, 0, 0, 0.08); }
.socials-title { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.socials-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.socials-wrap a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #ffffff; border: 1px solid var(--line); color: var(--muted); font-size: 20px; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.socials-wrap a:hover { transform: translateY(-5px); color: #ffffff; border-color: transparent; }
.socials-wrap .soc-wa:hover { background: #25D366; box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3); }
.socials-wrap .soc-ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 10px 20px rgba(214, 36, 159, 0.3); }
.socials-wrap .soc-fb:hover { background: #1877F2; box-shadow: 0 10px 20px rgba(24, 119, 242, 0.3); }
.socials-wrap .soc-in:hover { background: #0A66C2; box-shadow: 0 10px 20px rgba(10, 102, 194, 0.3); }

/* ==========================================================================
   HAKKIMIZDA BÖLÜMÜ İÇİN DAHA YUMUŞAK KARANLIK MOD (SOFT DARK)
   (Siyahın boğuculuğu alındı, lüks gece mavisi-slate eklendi)
   ========================================================================== */

.about-saas {
  /* Zift siyahı yerine lüks gece mavisi (Slate-900) */
  background-color: #0f172a !important; 
}

/* Çapraz ışıkların şiddeti zemine uyumlu hale getirildi */
.about-saas::before {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 68%) !important;
}
.about-saas::after {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 68%) !important;
}

/* --- Yazılar ve Etiketler --- */
.about-eyebrow {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #38bdf8 !important;
}

.about-saas__intro h2 { color: #f8fafc !important; }

.about-saas__intro h2 span {
  background: linear-gradient(135deg, #ffffff 0%, #bae6fd 55%, #38bdf8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.about-lead { color: #cbd5e1 !important; }

/* --- Cam Kartların Renkleri (Bir tık daha aydınlık şeffaflık) --- */
.about-glass-card, .about-metric-card, .about-feature-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.about-glass-card strong, .about-metric-card strong, .about-feature-card h3 {
  color: #f8fafc !important;
}

.about-glass-card p, .about-metric-card span, .about-feature-card p {
  color: #94a3b8 !important;
}

.about-glass-card .stat-kicker { color: #38bdf8 !important; }

.feature-icon {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
}

/* --- Kalite Politikası Kartı (Lacivert Geçişli) --- */
.about-story-card {
  background: linear-gradient(135deg, rgba(30,64,175,0.2), rgba(15,23,42,0.6)) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

.story-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #bae6fd !important;
}

.about-story-card__left h3 { color: #f8fafc !important; }
.about-story-card__right p { color: #e0e7ff !important; }

/* ==========================================================================
   İLETİŞİM BÖLÜMÜ İÇİN YUMUŞAK KARANLIK MOD (SOFT DARK)
   (Yapıyı bozmadan sadece arka plan, ışıklar ve renkler ezilir)
   ========================================================================== */

#contact {
  position: relative;
  overflow: hidden;
  background-color: #0f172a !important; /* Lüks gece mavisi zemin */
}

/* --- Sağ ve Sol Köşelerden Vuran Turkuaz/Mavi Işıklar --- */
#contact::before {
  content: ""; position: absolute; width: 600px; height: 600px; left: -150px; bottom: -100px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 68%) !important;
  filter: blur(20px); pointer-events: none; z-index: 0;
}

#contact::after {
  content: ""; position: absolute; width: 500px; height: 500px; right: -100px; top: -50px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 68%) !important;
  filter: blur(20px); pointer-events: none; z-index: 0;
}

#contact .container {
  position: relative;
  z-index: 2;
}

/* --- Başlık Renkleri --- */
#contact .section__head h2 { color: #f8fafc !important; }
#contact .section__head p { color: #94a3b8 !important; }

/* --- İletişim, Harita ve Sosyal Medya Kutuları (Koyu Cam Efekti) --- */
#contact .infoBox,
#contact .mapBox,
#contact .socials-wrap a {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

/* --- Kutu İçi Yazılar --- */
#contact .infoBox h3 { color: #f8fafc !important; }
#contact .infoBox p { color: #cbd5e1 !important; }
#contact .infoBox p strong { color: #38bdf8 !important; /* Turkuaz vurgu */ }

/* --- Sosyal Medya --- */
#contact .socials-title { color: #94a3b8 !important; }
#contact .socials-wrap a { color: #94a3b8 !important; }
#contact .socials-wrap a:hover { 
  color: #ffffff !important; 
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

/* --- Form Alanları (Karanlık Moda Uygun Giriş Kutuları) --- */
#contact .contact__form label span { color: #cbd5e1 !important; }

#contact input, 
#contact textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

/* Form içine yazılan silik yazılar (Placeholder) */
#contact input::placeholder, 
#contact textarea::placeholder {
  color: #64748b !important;
}

/* Forma tıklanınca yanan turkuaz ışık */
#contact input:focus, 
#contact textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

#contact .miniForm__note { color: #64748b !important; }

/* ================= BİZİ TAKİP EDİN (ORİJİNAL FAVİCON / APP ICON GÖRÜNÜMÜ) ================= */
#contact .socials-wrap {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Orijinal ikonların dış kutusu (Telefon uygulaması / Favicon gibi) */
#contact .socials-wrap a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important; /* Uygulama ikonlarındaki o orijinal yuvarlak köşe */
  border: none !important; /* Dış çizgiyi kaldırdık, orijinal logo hissi versin */
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

/* İkonların içi orijinalinde olduğu gibi bembeyaz olacak */
#contact .socials-wrap a i {
  color: #ffffff !important;
  font-size: 24px;
  /* Daha önce instagram için verdiğimiz yazıyı boyama kodunu iptal ediyoruz */
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* --- MARKA ORİJİNAL FAVİCON RENKLERİ (ZEMİNE UYGULANDI) --- */
#contact .socials-wrap .soc-wa { background: #25D366 !important; }
#contact .socials-wrap .soc-fb { background: #1877F2 !important; }
#contact .socials-wrap .soc-in { background: #0A66C2 !important; }
#contact .socials-wrap .soc-ig { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; 
}

/* Üzerlerine gelindiğinde kendi orijinal renkleriyle şık bir parlama yaparlar */
#contact .socials-wrap a:hover {
  transform: translateY(-4px) scale(1.05);
}
#contact .socials-wrap .soc-wa:hover { box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4) !important; }
#contact .socials-wrap .soc-fb:hover { box-shadow: 0 10px 20px rgba(24, 119, 242, 0.4) !important; }
#contact .socials-wrap .soc-ig:hover { box-shadow: 0 10px 20px rgba(214, 36, 159, 0.4) !important; }
#contact .socials-wrap .soc-in:hover { box-shadow: 0 10px 20px rgba(10, 102, 194, 0.4) !important; }

/* ================= ORİJİNAL WHATSAPP BUTONU ================= */
.btn--whatsapp {
  background: #25D366 !important; /* WhatsApp Orijinal Yeşili */
  border: 1px solid #20b858 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* İçindeki İkon Ayarı */
.btn--whatsapp i {
  color: #ffffff !important;
  font-size: 1.3em;
  margin-right: 8px;
}

/* Üzerine Gelindiğinde (Hover) Parlama ve Yükselme Efekti */
.btn--whatsapp:hover {
  background: #20b858 !important; /* Bir tık daha koyu, tok yeşil */
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.4) !important;
  color: #ffffff !important;
}

/* ================= HAKKIMIZDA BÖLÜMÜ YAZILARI İÇİN YAVAŞLATILMIŞ SAAS EFEKTİ ================= */
/* Sadece Hakkımızda bölümünü hedefler, sitenin diğer yerlerini bozmaz */

#about [data-reveal] {
  opacity: 0;
  filter: blur(16px); /* İlk başta normalden çok daha soluk ve bulanık başlar */
  transform: translateY(35px) scale(0.98); /* Biraz daha aşağıdan, derinden gelir */
  
  /* Animasyon süresi 1 saniyeden 1.8 saniyeye çıkarıldı (Çok daha ağır ve lüks) */
  transition-property: opacity, filter, transform;
  transition-duration: 1.8s; 
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* Pürüzsüz yavaşlama eğrisi */
}

/* Ekrana girip görünür olduğunda çalışacak netleşme kodu */
#about [data-reveal].is-visible {
  opacity: 1;
  filter: blur(0); /* Pırıl pırıl bir netliğe kavuşur */
  transform: translateY(0) scale(1);
}

/* ================= PAZARLAMA ODAKLI GENİŞ PAKETLER ================= */

/* Kartların enine büyümesi için container genişletildi */
.package-container { width: min(1350px, 96%) !important; }

.marketing-pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr; /* Premium kart bilerek bir tık daha geniş */
  gap: 30px;
  align-items: stretch;
}

.m-pricing-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  padding: 44px 36px; /* İç boşluklar artırıldı, enine daha ferah */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  
  /* HIZ DÜZELTMESİ: Hantal geçiş yerine akıcı ve seri geçiş */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  will-change: transform, box-shadow;
}

.m-pricing-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

/* Başlık ve Açıklamalar */
.mp-head { margin-bottom: 30px; }
.mp-head h3 { font-size: 28px; font-weight: 800; color: #0f172a; margin: 0 0 12px; letter-spacing: -0.5px; }
.mp-head p { font-size: 15.5px; color: #64748b; line-height: 1.6; margin: 0; min-height: 52px; }

/* Gövde ve Listeler */
.mp-body { flex-grow: 1; margin-bottom: 40px; }
.mp-includes { 
  font-size: 13px; font-weight: 800; color: #3b82f6; 
  text-transform: uppercase; letter-spacing: 0.5px; 
  margin-bottom: 20px; padding-bottom: 12px; 
  border-bottom: 1px solid #e2e8f0; 
}

.mp-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.mp-body ul li { display: flex; align-items: flex-start; gap: 14px; }
.mp-body ul li i { 
  color: #3b82f6; font-size: 14px; margin-top: 2px; 
  background: rgba(59, 130, 246, 0.1); 
  border-radius: 50%; width: 24px; height: 24px; 
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
}
.mp-body ul li span { font-size: 15px; color: #334155; line-height: 1.5; font-weight: 500; }

.mp-footer { margin-top: auto; }


/* ================= BİLİNÇALTI MANİPÜLASYONU: VIP PREMIUM KART ================= */
.mp-vip-focus {
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%); /* Lüks Gece Mavisi ve Koyu Mor Karışımı */
  border: 2px solid #8b5cf6; /* Parlak Mor VIP Çerçeve */
  box-shadow: 0 25px 60px -10px rgba(139, 92, 246, 0.35);
  position: relative;
  z-index: 2;
  transform: scale(1.04); /* Diğerlerinden bilinçli olarak devasa durur */
  
  /* HIZ DÜZELTMESİ: VIP kart için akıcı ve seri geçiş */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  will-change: transform, box-shadow;
}

.mp-vip-focus:hover { 
  box-shadow: 0 35px 70px -15px rgba(139, 92, 246, 0.5); 
  border-color: #a78bfa; 
  transform: scale(1.04) translateY(-6px) !important;
}

.mp-badge-vip {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b, #fbbf24); /* Altın Sarısı Lüks Rozet */
  color: #451a03; padding: 8px 20px; border-radius: 999px; width: max-content;
  font-size: 13px; font-weight: 900; letter-spacing: 1px;
  box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4);
}

/* VIP Kart İçi Yazı Renkleri */
.mp-vip-focus .mp-head h3 { color: #ffffff; }
.mp-vip-focus .mp-head p { color: #cbd5e1; }
.mp-includes-vip {
  font-size: 13.5px; font-weight: 800; color: #a78bfa; 
  text-transform: uppercase; letter-spacing: 0.5px; 
  margin-bottom: 20px; padding-bottom: 12px; 
  border-bottom: 1px solid rgba(255,255,255,0.1); 
}

/* VIP Kart İkonları Altın Sarısı ve Mor Parlar */
.mp-vip-focus .mp-body ul li i { background: rgba(139, 92, 246, 0.25); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.5); }
.mp-vip-focus .mp-body ul li span { color: #f8fafc; font-size: 15.5px; }

/* Mobilde Uyum */
@media (max-width: 1100px) {
  .marketing-pricing-grid { grid-template-columns: 1fr; max-width: 600px; margin: 40px auto 0; gap: 50px; }
  .mp-vip-focus { transform: scale(1) !important; }
  .mp-vip-focus:hover { transform: translateY(-6px) !important; }
}

/* ================= PAKETLER BÖLÜMÜ ARKA PLANI (NOKTALI GRID & VIP SPOTLIGHT) ================= */
#packages {
  position: relative;
  overflow: hidden;
  background-color: #f8fafc !important; /* Çok açık, ferah bir gri/beyaz tonu */
  
  /* İnce Noktalı Lüks Teknoloji Deseni (SaaS Grid) */
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  z-index: 1;
}

/* 1. VIP KARTININ ARKASINDAN VURAN ALTIN/MOR PROJEKTÖR IŞIĞI */
#packages::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  right: -150px; /* Tam sağdaki Premium kartın arkasına hizalandı */
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(245, 158, 11, 0.08) 35%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

/* 2. SOL TARAFA DENGELEYİCİ HAFİF MAVİ IŞIK (Boş kalmaması için) */
#packages::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  left: -200px;
  bottom: -100px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

/* İçeriğin ışıkların ve desenin üstünde net kalması için */
#packages .container {
  position: relative;
  z-index: 2;
}

/* ================= MODERN REFERANSLAR BÖLÜMÜ (İSTATİSTİKLER & YORUMLAR) ================= */

/* --- İstatistik Kartları (Ferah ve Animasyonlu) --- */
.ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.ref-stat-card {
  background: #ffffff;
  padding: 40px 20px;
  border-radius: 32px;
  text-align: center;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ref-stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

/* İstatistik İkonları */
.stat-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

/* ================= HAREKETLİ RAKAMLAR (SİTE RENGİ VE PARLAK YAPI) ================= */
.stat-number {
  font-size: 56px;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1;
  letter-spacing: -2px;

  /* Düz siyah yerine sitenin lüks kurumsal mavisi (Gradient) */
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; /* Renk geçişinin rakamlara tam oturması için */
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- Müşteri Yorumları (Lüks Gece Mavisi Konsepti) --- */
.ref-quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.ref-quote-card {
  background: #0f172a; /* İletişim ve Hakkımızda bölümüyle uyumlu lüks karanlık zemin */
  padding: 44px;
  border-radius: 32px;
  border: 1px solid #1e293b;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.ref-quote-card:hover {
  transform: translateY(-5px);
  border-color: #38bdf8;
}

/* Yorum İkonu ve Yazılar */
.quote-icon {
  font-size: 36px;
  color: #38bdf8;
  opacity: 0.3;
  margin-bottom: 24px;
}

.ref-quote-card p {
  font-size: 18px;
  line-height: 1.7;
  color: #cbd5e1;
  font-style: italic;
  margin-bottom: 24px;
}

.quote-author strong {
  color: #38bdf8;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --- Mobil Uyumluluk --- */
@media (max-width: 980px) {
  .ref-stats-grid { grid-template-columns: 1fr; gap: 20px; }
  .ref-quotes-grid { grid-template-columns: 1fr; gap: 20px; }
  .stat-number { font-size: 46px; }
}

/* ================= SABİT ARAMA BUTONU VE NABIZ EFEKTİ ================= */
.floating-phone-btn {
  position: fixed;
  /* Teklif al butonunun yüksekliğine göre burayı ayarlayabilirsin (Genelde 90px tam üstüne oturur) */
  bottom: 90px; 
  right: 30px; /* Teklif al butonu ile aynı hizada olması için sağ boşluk */
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #3b82f6, #1e40af); /* Sitenin lüks kurumsal mavisi */
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

/* Hafif Nabız (Pulse) Animasyonu - Arkadan yayılan lüks ışık dalgası */
.floating-phone-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(59, 130, 246, 0.4);
  border-radius: 50%;
  z-index: -1;
  animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.floating-phone-btn:hover {
  transform: scale(1.1) translateY(-4px);
  background: linear-gradient(135deg, #1e40af, #0f172a); /* Üzerine gelince koyulaşır */
  box-shadow: 0 10px 25px rgba(30, 64, 175, 0.5);
}

.floating-phone-btn:hover::before {
  animation: none; /* Üzerine gelince dalga durur, lüks bir sessizlik olur */
}

/* Nabız Dalga Animasyonu Matematiği */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Mobilde sağ alt köşe çok dar olacağı için biraz daha küçültebiliriz */
@media (max-width: 768px) {
  .floating-phone-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
    right: 20px;
    bottom: 80px; /* Mobilde Teklif al butonuna göre bu rakamı biraz düşürebilirsin */
  }
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .services-split {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .services-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 20px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 30px !important;
  }

  .services-right .minimal-card {
    flex: 0 0 85% !important;
    scroll-snap-align: center !important;
    min-height: 420px !important;
    height: auto !important;
    transform: none !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .services-right .minimal-card:hover,
  .services-right .minimal-card:active,
  .services-right .minimal-card.expanded,
  .services-right .minimal-card.expanded:hover,
  .services-right .minimal-card.expanded:active {
    transform: none !important;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15) !important;
  }
}

/* ================= APPLE STYLE COMPARISON TABLE ================= */
.comparison-section {
  background: #ffffff;
  padding: 100px 0;
}

.comp-title {
  font-size: 42px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.comp-title span { color: #1e40af; }

.comparison-container {
  overflow-x: auto;
  margin-top: 40px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
  background: #fff;
  border: 1px solid #e2e8f0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  min-width: 800px; /* Mobilde kaydırma yapabilmek için */
}

/* Başlık Satırı */
.comparison-table thead th {
  padding: 30px 20px;
  background: #f8fafc;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  border-bottom: 2px solid #e2e8f0;
}

.comparison-table .feature-col {
  text-align: left;
  padding-left: 40px;
  width: 35%;
}

.comparison-table .package-col.active {
  background: #eff6ff; /* Plus paketi öne çıkarmak için hafif mavi */
  color: #1e40af;
  position: relative;
}

/* Kategori Başlıkları */
.category-row td {
  background: #f1f5f9;
  text-align: left;
  padding: 15px 40px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

/* İçerik Satırları */
.comparison-table tbody tr td {
  padding: 20px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 15px;
  color: #334155;
  font-weight: 500;
  transition: background 0.2s;
}

.comparison-table tbody tr:hover td {
  background: #fafafa;
}

.comparison-table tbody tr td:first-child {
  text-align: left;
  padding-left: 40px;
  font-weight: 600;
  color: #0f172a;
}

/* İkonlar ve Metinler */
.comparison-table .fa-check {
  color: #10b981;
  font-size: 18px;
}

.comparison-table td:contains("—") {
  color: #cbd5e1;
}

/* Bilgi Notu */
.comparison-note {
  margin: 30px 40px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 16px;
  border-left: 4px solid #3b82f6;
  display: flex;
  gap: 15px;
  align-items: center;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

.comparison-note i {
  font-size: 20px;
  color: #3b82f6;
}

/* Mobil Kaydırma İpucu */
@media (max-width: 768px) {
  .comparison-container {
    margin-left: -5%;
    margin-right: -5%;
    border-radius: 0;
  }
  .comp-title { font-size: 32px; }
}

/* ================= HEADER (ÜST MENÜ) DENGELİ GENİŞLETME VE ORTALAMA ================= */

/* Aşırı genişliği alıp en ideal Apple/SaaS genişliğine (1280px) ayarlıyoruz */
.header .container {
  width: min(1280px, 96%);
}

/* Menü linklerini sağa yaslamak yerine TAM ORTAYA (merkeze) hizalar */
.nav {
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap; /* Yazıların alt satıra inmesini engeller */
}

/* Logodaki alt yazının daralıp alt satıra inmesini engeller */
.brand__text, .brand__tag {
  white-space: nowrap;
}



/* ================= MODERN GRID WHY US ================= */
.modern-grid-why {
  background-color: #ffffff;
  padding: 100px 0;
}

.modern-why-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.modern-why-header h2 {
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

/* Başlıktaki renkli kısım */
.modern-why-header h2 span {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-line {
  width: 60px;
  height: 4px;
  background: #3b82f6;
  margin: 0 auto;
  border-radius: 2px;
}

/* 3 Kolonlu Izgara Sistemi */
.modern-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid #f1f5f9;
  padding-top: 40px;
}

.modern-why-item {
  position: relative;
  transition: transform 0.3s ease;
}

.modern-why-item:hover {
  transform: translateY(-5px);
}

.modern-index {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #3b82f6;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.modern-why-item h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.modern-why-item p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

/* Mobil için 1 veya 2 kolona düşürme */
@media (max-width: 1024px) {
  .modern-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .modern-why-grid { grid-template-columns: 1fr; gap: 30px; }
  .modern-why-header h2 { font-size: 32px; }
}

/* ================= NEDEN AZT - SAF EDİTORYAL LÜKS LİSTE ================= */

.modern-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; 
}

.modern-why-list li {
  font-size: 15px;
  color: #475569; /* Okuması en rahat, yormayan gri-mavi ton */
  line-height: 1.7;
  position: relative;
  padding-left: 20px; /* Çizgi için zarif bir boşluk */
}

/* Nokta veya ok yerine, çok elit duran editoryal kısa çizgi (Dash) */
.modern-why-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: #3b82f6; /* Sitenin kurumsal mavisi */
  font-weight: 800;
}

/* Fosforlu arka plan İPTAL. Sadece tok bir font kalınlığı ve net bir gece mavisi */
.highlight-premium {
  color: #0f172a; /* Çok koyu, asil lacivert */
  font-weight: 800; /* Ekstra kalınlık ile gözü direkt buraya çeker */
  background: transparent; /* Arka plan boyası tamamen sıfırlandı */
  padding: 0;
}

/* Çakışmayı önlemek için eski p etiketlerini gizliyoruz */
.modern-why-item p {
  display: none;
}

/* ================= NEDEN AZT - DERİN VE SOLUKTAN GELME (SİNEMATİK) EFEKTİ ================= */

#why-azt [data-reveal] {
  opacity: 0;
  filter: blur(24px); /* İlk başta çok yoğun bir bulanıklık (solukluk) */
  transform: translateY(40px) scale(0.96); /* Daha derinden ve hafif küçük başlar */
  
  /* Geçiş süresini 1.6 saniyeye çıkararak o ağır ve lüks hissi veriyoruz */
  transition-property: opacity, filter, transform;
  transition-duration: 1.6s; 
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* Pürüzsüz frenleme efekti */
}

/* Sayfa o bölüme geldiğinde netleşme anı */
#why-azt [data-reveal].is-visible {
  opacity: 1;
  filter: blur(0); /* Bulanıklık sıfırlanır, cam gibi netleşir */
  transform: translateY(0) scale(1);
}

/* ================= MOBİL HEADER (MENÜ TAŞMA) KESİN ÇÖZÜM ================= */
@media (max-width: 991px) {
  
  /* 1. Header içindeki ana yapıyı sağlama alıyoruz */
  .header__inner {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  /* 2. Logo ve Yazıların olduğu kapsayıcıyı esnek ama sınırlı yapıyoruz */
  .brand {
    flex: 1; 
    min-width: 0; /* SİHİRLİ KOD: Flexbox'ta metin taşmasını bu engeller */
    margin-right: 15px; /* Butonla arasına nefes boşluğu koyarız */
  }

  .brand__text {
    min-width: 0; 
    overflow: hidden;
  }

  /* 3. Çok uzun olan yazıyı kesme, alt satıra şık bir şekilde indir */
  .brand__name {
    font-size: 14px !important; /* İki satırda kaba durmaması için yarım tık küçülttük */
    white-space: normal !important; /* SİHİRLİ KOD: Alt satıra inmesine izin verir */
    overflow: visible !important; /* Gizlemeyi tamamen iptal eder */
    text-overflow: clip !important; /* 3 noktayı (...) kaldırır */
    line-height: 1.3 !important; /* İki satır olunca satır aralığını şık gösterir */
    padding-right: 5px !important; /* Butona çok yapışmasın diye pay */
  }

  /* 4. Mobilde o alttaki uzun gri slogana yer yok, kalabalık yapmasın diye gizliyoruz */
  .brand__tag {
    display: none !important; 
  }

  /* 5. Hamburger Menü Butonunu korumaya alıyoruz */
  .nav__toggle {
    flex-shrink: 0 !important; /* Asla ezilmesin, küçülmesin */
    display: flex !important; /* Görünür olduğundan emin oluyoruz */
  }
} 

/* ================= MOBİL HAMBURGER MENÜ (LEŞ TASARIMI SIFIRLAMA) ================= */
@media (max-width: 991px) {
  
  /* Butonun Dış Kutusu: Kusursuz bir kare ve yumuşak köşeler */
  .nav__toggle {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important; /* Apple tarzı lüks kıvrım */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 0 0 auto !important; /* En sağa yaslar */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important; /* Zarif bir derinlik */
    cursor: pointer !important;
  }

  /* Butonun İçindeki 3 Çizgi (Kusursuz Ortalama) */
  .nav__toggle span {
    position: relative !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background-color: #0f172a !important; /* Koyu lacivert/siyah */
    border-radius: 4px !important;
    margin: 2.5px 0 !important; /* Çizgiler arası eşit boşluk */
    transition: all 0.3s ease-in-out !important;
    
    /* Eski bozuk ayarları sıfırlıyoruz */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* (Opsiyonel) Menü açıkken çarpı işaretine dönüşme animasyonu varsa bozulmasın diye: */
  .nav__toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .nav__toggle.is-active span:nth-child(2) {
    opacity: 0 !important;
  }
  .nav__toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

/* ================= TAVANA ÇİVİLENMİŞ (FIXED) KESİN ÇÖZÜM ================= */
.header {
  position: fixed !important; /* Ekranın neresinde olursan ol asla yerinden kıpırdamaz */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important; /* Tüm ekranı kaplamasını garanti ederiz */
  z-index: 9999 !important; /* Sitedeki diğer her şeyin üstünde uçar */
  
  /* Lüks Cam Efekti (Apple Stili Arka Plan) */
  background-color: rgba(248, 250, 252, 0.90) !important; 
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; 
}

/* ================= MOBİLDE HİZMET KARTLARI SAAS EFEKTİ İPTALİ ================= */
@media (max-width: 1024px) {
  .services-right .minimal-card {
    opacity: 1 !important; /* Kartları direkt görünür yapar, saydamlıktan çıkmayı beklemez */
    translate: 0 0 !important; /* Aşağıdan yukarı doğru kayma hareketini sıfırlar */
    transition-delay: 0s !important; /* Sırayla gelme gecikmelerini iptal eder */
  }
}