:root {
  --bg: #000;
  --glass: rgba(10, 16, 22, 0.55);
  --border: rgba(255, 255, 255, 0.1);
  --muteborder: rgba(255, 255, 255, 0.06);
  --text: #eaf6ff;
  --muted: #b7c9d6;
  --cyan: #1e90ff; /* ana mavi */
  --ink: #001018;
  --btn: #1e90ff; /* buton rengi */
  --btn-hover: #1565c0; /* hover */
  --ring: #1e90ff80; /* mavi glow */
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
  transition: background 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s ease;
}
.logo img {
  height: 42px;
  display: block;
}

.nav--clear {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.nav--glass {
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--cyan);
  text-shadow: 0 0 12px #3fd7ff55, 0 0 24px #3fd7ff33;
  filter: drop-shadow(0 8px 28px #3fd7ff22);
}

/* Menü ortada */
.nav-menu {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0 auto;
}
.nav-menu a {
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  opacity: 0.92;
  transition: opacity 0.15s ease, color 0.2s ease;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  border-radius: 2px;
}
.nav-menu a:hover {
  opacity: 1;
}
.nav-menu a:hover::after {
  transform: scaleX(1);
}

/* Sağ: Demolar + Hamburger */
.actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-demo {
  --p: 12px 20px;
  padding: var(--p);
  border-radius: 999px;
  text-decoration: none;
  background: var(--btn);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(34, 198, 255, 0.35), 0 0 0 0 var(--ring);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.btn-demo:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(34, 198, 255, 0.45), 0 0 0 10px var(--ring);
}

.btn-primary {
  display: inline-block;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 14px 44px rgba(37, 196, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.btn-primary:hover {
  background: var(--btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(37, 196, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--muteborder);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ===== HERO (video + overlay) ===== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05) brightness(0.65);
  transform: scale(1.01);
  z-index: 0;
}
/* Üstte mavi glow, altta şeffafa açılan koyuluk: siyah şerit yok */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% -10% -10%;
  background: radial-gradient(
      80rem 80rem at 60% 45%,
      #00d4ff22 0%,
      transparent 45%
    ),
    radial-gradient(60rem 40rem at 20% -10%, #00e6ff2b 0%, transparent 55%),
    radial-gradient(120rem 70rem at 50% 120%, transparent 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* üstte hafif koyuluk, ALTA DOĞRU TAM ŞEFFAF */
  background: linear-gradient(
    180deg,
    rgba(0, 10, 16, 0.35) 0%,
    rgba(0, 10, 16, 0.28) 45%,
    rgba(0, 10, 16, 0.15) 70%,
    rgba(0, 10, 16, 0) 100%
  );
  pointer-events: none;
}

.hero-center {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 26px;
  padding-top: 76px;
}

/* Başlıklar */
.title {
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(34px, 5.2vw, 60px);
  letter-spacing: 0.01em;
}
.title span {
  display: inline-block;
  margin-top: 10px;
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 600;
  color: var(--cyan);
}
.title #typing-title {
  color: var(--cyan);
}

.subtitle {
  max-width: 920px;
  font-weight: 600;
  font-size: clamp(15px, 1.55vw, 20px);
  letter-spacing: 0.01em;
  color: var(--cyan); /* Yazılım çözümleri tonu ile uyumlu */
}

.neon-text {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(107, 220, 255, 0.75),
    0 0 20px rgba(107, 220, 255, 0.55), 0 0 30px rgba(107, 220, 255, 0.45);
}

/* ===== REFERANSLAR (hero ÜZERİNDE, tamamen şeffaf) ===== */
/* BUNUN ÇALIŞMASI İÇİN #referanslar, <header class="hero"> İÇİNDE OLMALI */
/* ===== Referanslar Slider – her zaman renkli logo ===== */
#referanslar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 0;
  background: transparent !important;
  z-index: 3;
  overflow: hidden;
}

#referanslar .slider,
#referanslar .slide-track,
#referanslar .slide {
  background: transparent !important;
}

/* Ölçüler/animasyon */
:root {
  --w: 140px;
  --h: 45px;
  --n: 6;
  --t: 40s;
}

#referanslar .slider {
  height: var(--h);
  width: 100%;
  position: relative;
  overflow: hidden;
}

#referanslar .slide-track {
  display: flex;
  width: calc(var(--w) * var(--n) * 3);
  animation: scroll var(--t) linear infinite;
}

#referanslar .slide {
  flex: 0 0 var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* LOGOLAR HER ZAMAN RENKLİ */
#referanslar .slide img,
#referanslar .slide a img {
  max-width: calc(var(--w) - 24px);
  max-height: calc(var(--h) - 15px);
  object-fit: contain;
  filter: none !important; /* gri filtreyi kesin kaldır */
  -webkit-filter: none !important; /* Safari için */
  transition: transform 0.25s; /* filtreye transition yok */
}

/* Hover’da filtre DEĞİŞMESİN */
#referanslar .slide:hover img,
#referanslar .slide a:hover img {
  filter: none !important;
  -webkit-filter: none !important;
  transform: scale(1.04); /* istersen büyümeyi de kaldırabilirsin */
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--w) * var(--n)));
  }
}

/* WhatsApp FAB */
.whats {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.whats:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
}

/* Bildirim balonu */
.wa-notify {
  position: fixed;
  right: 22px;
  bottom: 88px;
  background: var(--cyan);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
  transform: translateY(20px);
  z-index: 59;
}
.wa-notify.show {
  opacity: 1;
  transform: translateY(0);
}

/* Typing imleci sadece typing-sub’ta */
.typing-cursor::after {
  content: "|";
  margin-left: 3px;
  color: var(--cyan);
  animation: blink 0.7s infinite;
}
@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Mobil */
.demo-cta {
  display: none;
}
@media (max-width: 1060px) {
  .nav-menu {
    display: none;
  }
  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-menu.open {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    flex-direction: column;
    gap: 0;
    background: rgba(0, 0, 0, 0.92);
    border-top: 1px solid var(--muteborder);
    backdrop-filter: blur(10px);
  }
  .nav-menu.open li {
    border-bottom: 1px solid var(--muteborder);
  }
  .nav-menu.open a {
    display: block;
    padding: 16px 24px;
  }

  .actions .btn-demo {
    display: none;
  }
  .nav-menu.open .demo-cta {
    display: block;
    border-bottom: none;
    padding: 12px 16px 18px;
  }
  .nav-menu.open .demo-cta a {
    display: block;
    text-align: center;
    margin: 8px 16px;
    background: var(--btn);
    color: var(--ink);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(34, 198, 255, 0.35);
    text-decoration: none;
    font-weight: 800;
    padding: 12px 20px;
  }
  .nav-menu.open .demo-cta a:hover {
    background: var(--btn-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-demo,
  .btn-primary,
  .nav-menu a::after {
    transition: none;
  }
  .navbar {
    transition: none;
  }
}

/* === Tema renkleri (Yazılım Çözümleri ile aynı ton) === */
:root {
  --accent: #1e88e5; /* Yazılım çözümleri metninin rengi */
}

/* Hero içinde yazı rengi eşitleme */
.title #typing-title {
  color: var(--accent);
}

/* Sizi Arayalım butonu aynı renkte */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 14px 28px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(30, 136, 229, 0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary:hover {
  background: #1565c0;
  box-shadow: 0 10px 28px rgba(21, 101, 192, 0.32);
  transform: translateY(-1px);
}

/* ====== Referanslar (en altta) ====== */
/* Boyut/tempo değişkenleri */
:root {
  --w: 140px; /* hücre genişliği  */
  --h: 45px; /* şerit yüksekliği */
  --n: 6; /* tek set logo sayısı */
  --t: 40s; /* tur süresi */
}

#referanslar {
  background: transparent; /* şeffaf arka plan */
  padding: 20px 0;
  overflow: hidden;

  position: absolute; /* hero’nun üstüne bindir */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10; /* videonun üstünde */
}

.slider {
  height: var(--h);
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider {
  height: var(--h);
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* 3 set olduğundan toplam genişlik w*n*3 */
.slide-track {
  display: flex;
  width: calc(var(--w) * var(--n) * 3);
  animation: scroll var(--t) linear infinite;
}

.slide {
  flex: 0 0 var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  max-width: calc(var(--w) - 24px);
  max-height: calc(var(--h) - 15px);
  object-fit: contain;
  filter: grayscale(1) brightness(0.9);
  transition: 0.25s;
  pointer-events: none;
}
.slide:hover img {
  filter: grayscale(0) brightness(1.05) drop-shadow(0 0 4px #002237);
  transform: scale(1.04);
}

/* 1 turda tam 1 set sola kaydır */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--w) * var(--n)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-track {
    animation: none;
  }
}

/* ===== HAKKIMIZDA ===== */

#hakkimizda {
  background: #fff;
  color: #000;
  padding: 100px 40px;
  --btn: #1e90ff; /* Tüm buton ve başlık renkleri artık lacivert */
  --ink: #ffffff;
}
.about-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}
.about-text {
  flex: 1 1 500px;
  text-align: left;
}
.about-media {
  flex: 1 1 500px;
  display: flex;
  justify-content: center;
}

.about-kicker {
  color: var(--btn);
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
}
.about-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.5;
  color: #000;
}
.about-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 18px;
}
.about-text p:last-of-type {
  margin-bottom: 30px;
}

.about-cta {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* CTA buton */
.about-btn {
  padding: 14px 28px;
  border: 2px solid var(--btn);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--btn);
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.35s ease;
}
.about-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: -1;
}
.about-btn:hover {
  color: #000; /* Hover olunca yazı siyah */
  border-color: var(--btn);
  box-shadow: 0 0 12px var(--btn), 0 0 24px var(--btn), 0 0 36px var(--btn);
}
.about-btn:hover::before {
  transform: scaleX(1);
}

/* Video kutusu */
.about-video {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}
.about-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Boyut/tempo değişkenleri */
:root {
  --w: 140px; /* her hücrenin genişliği  */
  --h: 45px; /* şerit yüksekliği       */
  --n: 6; /* TEK set içindeki logo sayısı (1. set) */
  --t: 40s; /* tur süresi              */
}

#referanslar {
  background: #000;
  padding: 40px 0;
  overflow: hidden;
}
.slider {
  height: var(--h);
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Track: toplam genişlik = (w * n * 2)  (çünkü iki set var) */
.slide-track {
  display: flex;
  width: calc(var(--w) * var(--n) * 2);
  animation: scroll var(--t) linear infinite;
}

/* Hücre: sabit genişlik; margin/padding yok -> boşluk olmaz */
.slide {
  flex: 0 0 var(--w);
  height: var(--h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  max-width: calc(var(--w) - 24px);
  max-height: calc(var(--h) - 15px);
  object-fit: contain;
  filter: grayscale(1) brightness(0.9);
  transition: 0.25s;
  pointer-events: none; /* hover parlamasını istersen kaldır */
}
.slide:hover img {
  filter: grayscale(0) brightness(1.05) drop-shadow(0 0 4px #002237);
  transform: scale(1.04);
}

/* Dikişsiz akış: 1 turda tam 1. set kadar sola kaydır */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--w) * var(--n)));
  }
}

/* Erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
  .slide-track {
    animation: none;
  }
}

/* Açık mavimsi ton (bizim maviye yakın) */
:root {
  --btn-soft: #8ec6ff;
}

.services {
  background: #002237;
  color: var(--text);
  padding: 72px 18px;
}
.services .wrap {
  max-width: 1240px;
  margin: 0 auto;
}
.services .kicker {
  color: #1e90ff;
  font-weight: 800;
  font-size: clamp(22px, 3.4vw, 36px);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.services .lead {
  text-align: center;
  font-size: clamp(18px, 2.2vw, 24px);
  color: #eaf6ff;
  opacity: 0.95;
  margin-bottom: 46px;
}

/* Liste */
.srv-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.srv-item {
  border-bottom: 1px solid var(--muteborder);
  padding-bottom: 22px;
}
.srv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.srv-num {
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  min-width: 40px;
}
.srv-title {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
  color: #1e90ff;
}
.srv-toggle {
  background: none;
  border: 1px solid var(--btn);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #1e90ff;
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.srv-toggle:hover {
  background: #1e90ff;
  color: #fff;
}

/* Gövde */
.srv-body {
  display: none;
  margin-top: 14px;
  font-size: 15px;
  color: rgba(234, 246, 255, 0.9);
  line-height: 1.6;
}
.srv-item.active .srv-body {
  display: block;
}

/* Minimalist görselli kartlar */
/* === Kart boyutlarını her satırda eşitle === */
/* Masaüstü: 4 sütun (her biri aynı genişlikte) */
.srv-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr)); /* 4 eşit sütun */
  gap: 16px;
  margin-top: 18px;
  place-items: stretch; /* kartlar aynı yüksekliğe otursun */
}

/* Kartların yüksekliği de aynı kalsın */
.srv-card {
  aspect-ratio: 16 / 9; /* Yazılım Geliştirme ile aynı oran */
  height: 180px; /* sabit yükseklik -> tutarlı görünüm */
  max-height: 180px; /* taşmayı engelle */
}

/* Görsel overlay ve çerçeve minimalist kalsın */
.srv-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--muteborder);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.25s, filter 0.25s, transform 0.2s, box-shadow 0.25s;
}
.srv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.1) contrast(0.95) brightness(0.8);
  z-index: 0;
}
.srv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
  z-index: 0;
}
.srv-card .label {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.srv-card:hover {
  border-color: var(--btn);
  box-shadow: 0 0 10px var(--ring);
  transform: translateY(-2px);
  filter: saturate(1.05);
}

/* Tablet: 2 sütun */
@media (max-width: 1100px) {
  .srv-cards {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .srv-card,
  .srv-card {
    height: 180px;
  }
}

/* Mobil: 1 sütun */
@media (max-width: 640px) {
  .srv-cards {
    grid-template-columns: 1fr;
  }
  .srv-card {
    height: 180px;
  }
}

/* Responsive */
@media (max-width: 820px) {
  .srv-title {
    font-size: 17px;
  }
  .srv-num {
    font-size: 18px;
  }
}

.srv-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.srv-card {
  position: relative;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
}

.srv-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* kutuyu doldur, kırpabilir */
  object-position: center;
}

.srv-card .label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

#demo-banner {
  background: linear-gradient(90deg, #1e90ff, #1565c0);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

#demo-banner .marquee {
  display: inline-flex;
  min-width: 200%; /* 2 kopya yan yana */
  animation: scroll-left 25s linear infinite;
}

#demo-banner .marquee span {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 40px;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ===== SADECE #demo-form İÇİN ===== */

#demo-form {
  background: #fff;
  padding: 60px 20px;
  font-family: "Montserrat", sans-serif;
}

#demo-form .df-container {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

#demo-form .df-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 28px;
  color: #1b2430;
}
#demo-form .df-title b {
  color: #1e90ff;
}

/* Grid */
#demo-form .df-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
#demo-form .col-2 {
  grid-column: 1/-1;
}

#demo-form input[type="text"],
#demo-form input[type="email"],
#demo-form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
}
#demo-form input:focus {
  border-color: #1e90ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.25);
}

/* Telefon alanı */
#demo-form .df-phone {
  display: flex;
  align-items: center;
  gap: 8px;
}
#demo-form .df-flag img {
  width: 22px;
  height: auto;
  border-radius: 2px;
}
#demo-form .df-phone input {
  flex: 1;
}

/* Dropdown + Textarea */
#demo-form label {
  color: #000;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

#demo-form select,
#demo-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  margin-top: 6px;
  background: #fff;
}
#demo-form .df-alert {
  padding: 12px 16px;

  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
}
#demo-form .df-alert.success {
  background: #e6f9f0;
  color: #067d4d;
  border: 1px solid #a6e3c4;
}
#demo-form .df-alert.error {
  background: #fde8e8;
  color: #c62828;
  border: 1px solid #f5b5b5;
}

#demo-form .df-alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
#demo-form .df-alert.success {
  background: #e6f9f0;
  color: #067d4d;
  border: 1px solid #a6e3c4;
}
#demo-form .df-alert.error {
  background: #fde8e8;
  color: #c62828;
  border: 1px solid #f5b5b5;
}

/* Select yazı rengi */
#demo-form select {
  color: #002237;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%231E90FF' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
#demo-form select option[value=""] {
  color: #6b7280; /* placeholder gri */
}
#demo-form select:focus,
#demo-form textarea:focus {
  border-color: #1e90ff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.25);
}
#demo-form textarea {
  min-height: 90px;
  resize: vertical;
  color: #002237;
}

/* Upload */
#demo-form .df-upload {
  margin: 18px 0;
  padding: 16px;
  border: 2px dashed #cfd6de;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
}
#demo-form .df-upload p {
  margin-bottom: 8px;
  font-weight: 600;
  color: #1b2430;
}

/* KVKK */
#demo-form .df-kvkk {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  margin: 12px 0;
}
#demo-form .df-kvkk a {
  color: #1e90ff;
  text-decoration: none;
}

/* reCAPTCHA */
#demo-form .df-recaptcha {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Button */
#demo-form .df-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: #1e90ff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}
#demo-form .df-btn:hover {
  background: #1565c0;
}
/* KVKK label'ını yatay hizala (genel label kuralını geçersiz kılar) */
#demo-form label.df-kvkk {
  display: flex;
  flex-direction: row; /* sütun yerine satır */
  align-items: center; /* kutucuk + yazıyı dikey ortala */
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  margin: 12px 0;
}
#demo-form label.df-kvkk input[type="checkbox"] {
  margin: 0; /* default boşluğu sıfırla */
  flex-shrink: 0; /* kutucuk daralmasın */
}
/* (İsteğe bağlı) metin tek satırda kalsın */
#demo-form label.df-kvkk span {
  display: inline;
}

/* Responsive */
@media (max-width: 768px) {
  #demo-form .df-grid {
    grid-template-columns: 1fr;
  }
}

:root {
  --bg: #002237;
  --text: #eaf6ff;
  --muted: #b7c9d6;
  --cyan: #1e90ff;
  --btn: #1e90ff;
  --ring: #1e90ff80;
}

#blog-pairs {
  background: var(--bg);
  color: var(--text);
  padding: 80px 18px;
}
.bp-head {
  text-align: center;
  margin-bottom: 46px;
}
.bp-kicker {
  color: var(--cyan);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.bp-title {
  font-size: 22px;
  font-weight: 600;
}

.bp-viewport {
  max-width: 1140px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.bp-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  scroll-snap-align: start;
}

.bp-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
.bp-card .thumb {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
}
.bp-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bp-card .name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}

/* META alanı: kategori + tarih */
.bp-card .meta {
  display: flex;
  align-items: center;
  gap: 12px; /* kategori ↔ tarih boşluğu */
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.bp-card .meta a,
.bp-card .meta .cat {
  color: var(--cyan) !important;
  font-weight: 700;
  text-decoration: none;
}
.bp-card .meta .date {
  opacity: 0.9;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.bp-card .desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.55;
}
.bp-card .btn {
  padding: 10px 18px;
  border: 1px solid var(--btn);
  border-radius: 6px;
  color: var(--btn);
  text-decoration: none;
  font-size: 14px;
}
.bp-card .btn:hover {
  background: var(--btn);
  color: #fff;
  box-shadow: 0 0 0 6px var(--ring);
}

.bp-arrows {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  justify-content: center;
}
.bp-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--btn);
  background: none;
  color: var(--btn);
  font-size: 22px;
  cursor: pointer;
}
.bp-arrow:hover {
  background: var(--btn);
  color: #fff;
  box-shadow: 0 0 0 6px var(--ring);
}

@media (max-width: 1024px) {
  .bp-slide {
    grid-template-columns: 1fr;
  }
  .bp-card {
    grid-template-columns: 1fr;
  }
  .bp-card .thumb {
    height: 220px;
  }
}
@media (max-width: 480px) {
  .bp-card .meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===== SADECE #iletisim-section İÇİN ===== */
#iletisim-section {
  --brand: #1e90ff; /* ana mavi */
  --ink: #01274e; /* koyu yazı */
  --muted: #555; /* gri yazı */
  --bg: #fff; /* arka plan beyaz */
  --panel: #fff; /* kutucuklar beyaz */
  --line: rgba(0, 0, 0, 0.1);

  background: var(--bg);
  color: var(--ink);
  padding: 72px 18px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

/* GRID */
#iletisim-section .il-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.75fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 992px) {
  #iletisim-section .il-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Sol kutu (container) */
#iletisim-section .il-box {
  position: relative;
  border-radius: 18px;
  padding: 20px;
  background: #fff;
  z-index: 0;
  overflow: hidden;
}
#iletisim-section .il-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(30, 144, 255, 0) 0%,
    rgba(30, 144, 255, 1) 25%,
    rgba(30, 144, 255, 0) 50%,
    rgba(30, 144, 255, 1) 75%,
    rgba(30, 144, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: neonBorder 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(30, 144, 255, 0.55));
}

/* Başlık ve açıklama */
#iletisim-section .il-title {
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--brand);
  margin: 4px 6px 0 6px;
}
#iletisim-section .il-desc {
  color: var(--muted);
  margin: 0 6px 10px 6px;
  font-size: 15px;
}

/* İLETİŞİM KARTLARI */
#iletisim-section .il-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 3 sütun */
  gap: 14px;
}
@media (max-width: 992px) {
  #iletisim-section .il-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  #iletisim-section .il-cards {
    grid-template-columns: 1fr;
  }
}

#iletisim-section .il-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: 0.25s;
}
#iletisim-section .il-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 12px rgba(30, 144, 255, 0.25);
  transform: translateY(-1px);
}
#iletisim-section .il-card i {
  color: var(--brand);
  font-size: 20px;
  flex: 0 0 24px;
}
#iletisim-section .il-card-title {
  font-weight: 800;
  font-size: 16px;
}
#iletisim-section .il-card-text {
  color: #333;
  font-size: 14px;
  margin-top: 2px;
}

/* FORM */
#iletisim-section .il-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
#iletisim-section .il-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  #iletisim-section .il-row {
    grid-template-columns: 1fr;
  }
}

#iletisim-section .il-form input,
#iletisim-section .il-form textarea {
  width: 100%;
  color: #01274e;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
#iletisim-section .il-form input::placeholder,
#iletisim-section .il-form textarea::placeholder {
  color: #888;
}

#iletisim-section .il-form input:focus,
#iletisim-section .il-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 8px rgba(30, 144, 255, 0.35);
}

/* GÖNDER BUTONU */
#iletisim-section .btn-primary {
  align-self: flex-start;
  background: var(--brand);
  border: none;
  color: #fff;
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
#iletisim-section .btn-primary:hover {
  filter: brightness(1.1);
}
#iletisim-section .btn-primary:active {
  transform: translateY(1px);
}

/* Form alertleri */
.df-alert {
  padding: 12px 18px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 16px;
}

.df-alert.success {
  background: #e6f9ed;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.df-alert.error {
  background: #fbeaea;
  color: #842029;
  border: 1px solid #f5c2c7;
}

/* HARİTA */
#iletisim-section .il-map {
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 18px;
  padding: 10px;
  z-index: 0;
  overflow: hidden;
}
#iletisim-section .il-map::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(30, 144, 255, 0) 0%,
    rgba(30, 144, 255, 1) 25%,
    rgba(30, 144, 255, 0) 50%,
    rgba(30, 144, 255, 1) 75%,
    rgba(30, 144, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: neonBorder 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(30, 144, 255, 0.55));
}
#iletisim-section .il-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 14px;
  display: block;
  min-height: 420px;
}

@media (max-width: 992px) {
  #iletisim-section .il-map iframe {
    min-height: 340px;
  }
}

/* Neon animasyonu */
@keyframes neonBorder {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* KVKK: yan yana ve sola hizala (her şeyi bastır) */
#iletisim-section .il-form label.df-kvkk {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  width: 100% !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important; /* dikey yazı olmasın */
  margin: 2px 0 0 !important;
}

#iletisim-section .il-form .df-kvkk__cb {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#iletisim-section .il-form .df-kvkk__text {
  display: inline-block !important;
  white-space: normal !important; /* harf harf kırılmayı engelle */
  max-width: 100%;
}

#iletisim-section .il-form .df-kvkk__link {
  color: var(--brand, #1e90ff);
  font-weight: 600;
  text-decoration: underline;
}
#iletisim-section .il-form .df-kvkk__link:hover {
  text-decoration: none;
}

/* === FOOTER === */
#site-footer {
  background: #002237;
  color: var(--muted, #b7c9d6);
  padding: 50px 20px 20px;
  font-size: 14px;
}
#site-footer .ft-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 960px) {
  #site-footer .ft-wrap {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  #site-footer .ft-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Sol sütun */
.ft-col h3.ft-logo {
  font-size: 20px;
  font-weight: 900;
  color: #1e90ff; /* ana mavi */
  margin-bottom: 10px;
}
.ft-col h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #eaf6ff; /* açık yazı */
}
.ft-about {
  color: #b7c9d6;
  font-size: 13px;
  line-height: 1.5;
}

/* Linkler */
.ft-links,
.ft-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-links a {
  color: #b7c9d6;
  text-decoration: none;
  transition: 0.2s;
}
.ft-links a:hover {
  color: #1e90ff;
}

/* İletişim */
.ft-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b7c9d6;
}
.ft-contact i {
  color: #1e90ff;
}

/* Mobil: İletişim ortala */
@media (max-width: 600px) {
  .ft-contact {
    align-items: center;
    text-align: center;
  }
  .ft-contact li {
    justify-content: center;
  }
}

/* Sosyal */
.ft-social {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}
@media (max-width: 600px) {
  .ft-social {
    justify-content: center;
  }
}
.ft-social a {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #111;
  color: #1e90ff;
  transition: 0.25s;
}
.ft-social a:hover {
  background: #1e90ff;
  color: #001018;
}

/* Alt */
.ft-bottom {
  margin-top: 30px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
  font-size: 13px;
  color: #777;
}

/*KVKK*/
/* KVKK satırı – checkbox solda, metin yan yana */

.df-kvkk__cb {
  margin: 0;
  order: 0 !important; /* başka stiller sağa atmasın */
  flex: 0 0 auto;
}
.df-kvkk__text {
  color: #475569;
}
.df-kvkk__link {
  color: #0d6efd; /* mavi */
  text-decoration: none;
  font-weight: 600;
}
.df-kvkk__link:hover {
  text-decoration: underline;
}
.df-kvkk__link:visited {
  color: #0d6efd;
} /* mor olmasın */