/* ══════════════════════════════════════════════════════════════════════
   ECOCAM — güvenlik kamera ve alarm sistemleri

   TASARIM YÖNÜ: "kontrol odası". Site, firmanın sattığı şeyin diliyle
   konuşuyor — grafit zemin, kamera nişangâhı köşe çerçeveleri, yavaş
   tarama çizgisi, kayıt göstergesi. Süs için değil: ziyaretçi daha
   başlıkta ne iş yapıldığını hissediyor.

   RENK: markanın kendi kızılı (logodaki ECO) tek vurgu rengi.
   Jenerik "teknoloji mavisi" bilerek kullanılmadı.

   YAZI TİPİ: dışarıdan font çekilmiyor. Sistem yazı tipleri, sıkı harf
   aralığı ve sert boyut kontrastıyla karakter kazandırılıyor — tek bir
   dış istek bile yok, site anında açılıyor.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Zemin katmanları — koyudan açığa */
  --zemin: #0a0b0d;
  --zemin-2: #101115;
  --yuzey: #141519;
  --yuzey-2: #1a1c21;

  /* Kızıl — markanın rengi */
  --kizil: #c8102e;
  --kizil-parlak: #e8253f;
  --kizil-koyu: #8e0f22;

  /* Metin */
  --metin: #f4f5f7;
  --metin-2: #a8adb6;
  --metin-3: #6d727b;

  --cizgi: rgba(255, 255, 255, 0.08);
  --cizgi-parlak: rgba(255, 255, 255, 0.16);

  --en: 1240px;
  --yumusak: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Temel ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Satır içi simgeler için VARSAYILAN boyut.
   NEDEN: boyutu verilmeyen bir SVG, esnek kabın tamamını doldurur. Bento
   kartlarındaki "Ayrıntılar" oku bu yüzden ekran boyunda çizilmiş ve
   kartları şişirmişti. Aşağıdaki özel kurallar bunu gerektiği yerde ezer. */
svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Izgara zemin — bütün sayfanın altında duran ince monitör dokusu.
   Radyal maske ile kenarlara doğru söndürülüyor ki gürültü yapmasın. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--cizgi) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 75%);
  opacity: 0.55;
}

.kabuk { position: relative; z-index: 1; }

.sinir {
  width: min(100% - 2.5rem, var(--en));
  margin-inline: auto;
}

/* ── Ortak parçalar ────────────────────────────────────────────────── */

/* Kamera nişangâhı köşeleri — sitenin imza motifi.
   Kart, görsel ve bölüm başlıklarında tekrarlanıyor. */
.kose {
  position: relative;
}
.kose::before,
.kose::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--kizil);
  opacity: 0.7;
  transition: opacity 0.4s var(--yumusak), width 0.4s var(--yumusak), height 0.4s var(--yumusak);
  pointer-events: none;
}
.kose::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.kose::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.kose:hover::before,
.kose:hover::after { width: 22px; height: 22px; opacity: 1; }

.etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.etiket::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--kizil);
}

.bolum { padding: clamp(4.5rem, 9vw, 8rem) 0; }

.bolum-basi { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bolum-basi h2 {
  margin: 1rem 0 0;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.bolum-basi p {
  margin: 0.9rem 0 0;
  max-width: 54ch;
  color: var(--metin-2);
  font-size: 1.05rem;
}

/* Düğmeler */
.dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s var(--yumusak);
  white-space: nowrap;
}
.dugme-birincil {
  background: var(--kizil);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.5);
}
.dugme-birincil:hover {
  background: var(--kizil-parlak);
  box-shadow: 0 8px 30px -8px rgba(200, 16, 46, 0.8);
  transform: translateY(-2px);
}
.dugme-ikincil {
  background: transparent;
  color: var(--metin);
  border-color: var(--cizgi-parlak);
}
.dugme-ikincil:hover {
  border-color: var(--kizil);
  background: rgba(200, 16, 46, 0.08);
}

/* ── Üst çubuk ─────────────────────────────────────────────────────── */

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 11, 13, 0.75);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.ust.kaydı { border-bottom-color: var(--cizgi); background: rgba(10, 11, 13, 0.92); }

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 74px;
}
/* Logo METİN olarak kuruluyor, görsel olarak değil.
   NEDEN: özgün logo dosyasında "ECO" koyu kızıl, alt yazı ise açık gri.
   Koyu zeminde ilki kayboluyor, ikincisi hiç okunmuyordu. Metin kilidi
   hem her zaman okunur, hem her ölçekte keskin, hem de tek bir istek
   bile getirmiyor. Görsel dosya favicon olarak duruyor. */
.logo {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1;
}
.logo-isim {
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #e7e9ec;
}
.logo-isim b {
  font-weight: 800;
  color: var(--kizil-parlak);
}
.logo-alt {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.alt .logo-isim { font-size: 1.6rem; }

.menu { display: flex; align-items: center; gap: 2rem; }
.menu a {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--metin-2);
  transition: color 0.25s;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1.5px;
  background: var(--kizil);
  transition: width 0.3s var(--yumusak);
}
.menu a:hover { color: var(--metin); }
.menu a:hover::after { width: 100%; }

.ust-aksiyon { display: flex; align-items: center; gap: 0.9rem; }

.menu-dugmesi {
  display: none;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--metin);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ── Kahraman ──────────────────────────────────────────────────────── */

.kahraman {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

/* Zeminde yavaşça dönen kızıl ışıma — kamera lensi hissi */
.kahraman::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200, 16, 46, 0.16) 0%, transparent 62%);
  pointer-events: none;
  animation: nefes 9s ease-in-out infinite;
}
@keyframes nefes {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(0.95); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.kahraman-izgara {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.kahraman h1 {
  margin: 1.4rem 0 0;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.kahraman h1 em {
  font-style: normal;
  position: relative;
  color: var(--kizil-parlak);
}
/* Vurgulu kelimenin altında nişangâh çizgisi */
.kahraman h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 3px;
  background: linear-gradient(90deg, var(--kizil), transparent);
}

.kahraman-metin > p {
  margin: 1.5rem 0 0;
  max-width: 50ch;
  color: var(--metin-2);
  font-size: 1.12rem;
}

.kahraman-aksiyon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cizgi);
}
.rozet {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--metin-2);
}
.rozet svg { width: 17px; height: 17px; color: var(--kizil); flex-shrink: 0; }

/* Kahraman görseli — kamera monitörü gibi çerçevelenmiş */
.kahraman-gorsel {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
}
.kahraman-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) contrast(1.08) brightness(0.82);
}
/* Görselin üstüne koyu degrade — metin okunurluğu ve gece hissi */
.kahraman-gorsel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 11, 13, 0.85) 0%, transparent 55%),
    linear-gradient(to right, rgba(10, 11, 13, 0.5) 0%, transparent 40%);
  pointer-events: none;
}

/* Yavaş tarama çizgisi — kamera görüntüsü izlenimi */
.tarama {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 2;
  background: linear-gradient(to bottom, transparent, rgba(200, 16, 46, 0.14), transparent);
  animation: tara 5.5s linear infinite;
  pointer-events: none;
}
@keyframes tara {
  0% { top: -90px; }
  100% { top: 100%; }
}

/* Kayıt göstergesi */
.kayit {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  background: rgba(10, 11, 13, 0.7);
  backdrop-filter: blur(6px);
  border: 1px solid var(--cizgi);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--metin-2);
}
.kayit i {
  width: 7px;
  height: 7px;
  background: var(--kizil-parlak);
  border-radius: 50%;
  animation: yanip 1.6s ease-in-out infinite;
}
@keyframes yanip { 0%, 100% { opacity: 1; } 50% { opacity: 0.18; } }

/* Görselin köşelerindeki nişangâh */
.nisan {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.nisan.sol-ust { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.nisan.sag-ust { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.nisan.sol-alt { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.nisan.sag-alt { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* ── Sayılar şeridi ────────────────────────────────────────────────── */

.sayilar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--cizgi);
}
.sayi {
  padding: 2.2rem 1.5rem;
  text-align: center;
  border-right: 1px solid var(--cizgi);
}
.sayi:last-child { border-right: 0; }
.sayi b {
  display: block;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--metin);
}
.sayi span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--metin-3);
}

/* ── Hizmetler (bento) ─────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.hizmet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 2.2rem;
  background: var(--zemin-2);
  overflow: hidden;
  transition: background 0.4s var(--yumusak);
}
.hizmet.genis { grid-column: span 2; }
.hizmet:hover { background: var(--yuzey); }

/* Üzerine gelince soldan sağa geçen kızıl ince çizgi */
.hizmet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--kizil), transparent);
  transition: width 0.55s var(--yumusak);
}
.hizmet:hover::before { width: 100%; }

.hizmet-simge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cizgi);
  color: var(--kizil);
  transition: border-color 0.35s, background 0.35s;
}
.hizmet:hover .hizmet-simge {
  border-color: rgba(200, 16, 46, 0.5);
  background: rgba(200, 16, 46, 0.1);
}
.hizmet-simge svg { width: 21px; height: 21px; }

.hizmet h3 {
  margin: 0.4rem 0 0;
  font-size: 1.18rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.hizmet p {
  margin: 0;
  color: var(--metin-2);
  font-size: 0.94rem;
  line-height: 1.6;
}
.hizmet-bag {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--metin-3);
  transition: color 0.3s, gap 0.3s;
}
.hizmet:hover .hizmet-bag { color: var(--kizil-parlak); gap: 0.8rem; }

/* ── Süreç ─────────────────────────────────────────────────────────── */

.surec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: adim;
}
.adim {
  position: relative;
  padding-top: 2.6rem;
  border-top: 1px solid var(--cizgi);
}
/* Basamak numarasının üstündeki nokta ve ona bağlanan çizgi */
.adim::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--kizil);
}
.adim b {
  position: absolute;
  top: 1.1rem;
  left: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--kizil);
  font-variant-numeric: tabular-nums;
}
.adim h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.adim p { margin: 0; color: var(--metin-2); font-size: 0.92rem; }

/* ── Neden biz ─────────────────────────────────────────────────────── */

.neden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.neden-kutu {
  padding: 2rem;
  background: var(--zemin-2);
  transition: background 0.35s;
}
.neden-kutu:hover { background: var(--yuzey); }
.neden-kutu h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.neden-kutu p { margin: 0; color: var(--metin-2); font-size: 0.92rem; }

/* ── Yorumlar ──────────────────────────────────────────────────────── */

.yorumlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
}
.yorum {
  padding: 2rem;
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  transition: border-color 0.35s, transform 0.35s var(--yumusak);
}
.yorum:hover { border-color: var(--cizgi-parlak); transform: translateY(-4px); }
.yorum p {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--metin);
}
.yorum footer { display: flex; flex-direction: column; gap: 0.15rem; }
.yorum b { font-size: 0.92rem; font-weight: 600; }
.yorum span { font-size: 0.84rem; color: var(--metin-3); }

/* ── Çağrı bölümü ──────────────────────────────────────────────────── */

.cagri {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem);
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  overflow: hidden;
  text-align: center;
}
.cagri::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(200, 16, 46, 0.18), transparent 70%);
  pointer-events: none;
}
.cagri > * { position: relative; }
.cagri h2 {
  margin: 1rem auto 0;
  max-width: 20ch;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.cagri p { margin: 1rem auto 0; max-width: 48ch; color: var(--metin-2); }
.cagri-aksiyon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

/* ── İletişim ──────────────────────────────────────────────────────── */

.iletisim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.iletisim-kutu { padding: 2rem; background: var(--zemin-2); }
.iletisim-kutu .etiket { margin-bottom: 0.8rem; }
.iletisim-kutu p { margin: 0; font-size: 1rem; line-height: 1.6; }
.iletisim-kutu a:hover { color: var(--kizil-parlak); }

/* ── Alt bilgi ─────────────────────────────────────────────────────── */

.alt {
  padding: clamp(3rem, 5vw, 4.5rem) 0 0;
  border-top: 1px solid var(--cizgi);
}
.alt-izgara {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.alt-izgara h4 {
  margin: 0 0 1.1rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metin-3);
}
.alt-izgara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.alt-izgara li a { font-size: 0.92rem; color: var(--metin-2); transition: color 0.25s; }
.alt-izgara li a:hover { color: var(--kizil-parlak); }
.alt-tanim { margin: 1rem 0 0; max-width: 38ch; color: var(--metin-2); font-size: 0.92rem; }

.alt-son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--cizgi);
  font-size: 0.85rem;
  color: var(--metin-3);
}

/* Pekin Dijital imzası */
.imza {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--cizgi);
  transition: border-color 0.35s, background 0.35s;
}
.imza:hover { border-color: var(--cizgi-parlak); background: rgba(255, 255, 255, 0.03); }
.imza img { height: 20px; width: auto; opacity: 0.85; transition: opacity 0.3s; }
.imza:hover img { opacity: 1; }
.imza div { display: flex; flex-direction: column; line-height: 1.25; }
.imza small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin-3); }
.imza b { font-size: 0.86rem; font-weight: 600; color: var(--metin-2); }

/* ── Sabit çağrı çubuğu (mobil) ────────────────────────────────────── */

.sabit-cagri {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 1px;
  background: var(--cizgi);
  border-top: 1px solid var(--cizgi);
}
.sabit-cagri a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--zemin-2);
  font-size: 0.92rem;
  font-weight: 600;
}
.sabit-cagri a.ana { background: var(--kizil); color: #fff; }
.sabit-cagri svg { width: 17px; height: 17px; }

/* ── Hizmet alt sayfası ────────────────────────────────────────────── */

.hizmet-sayfa { padding: clamp(3rem, 6vw, 5rem) 0 0; }
.geri {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--metin-3);
  transition: color 0.25s, gap 0.25s;
}
.geri:hover { color: var(--kizil-parlak); gap: 0.8rem; }
.hizmet-sayfa h1 {
  margin: 1.4rem 0 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.hizmet-sayfa .ozet {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  font-size: 1.12rem;
  color: var(--metin-2);
}
.ozellikler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.ozellik {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.5rem;
  background: var(--zemin-2);
  font-size: 0.95rem;
}
.ozellik svg { width: 18px; height: 18px; color: var(--kizil); flex-shrink: 0; margin-top: 2px; }

.diger-hizmetler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
}
.diger {
  padding: 1.5rem;
  background: var(--zemin-2);
  transition: background 0.3s;
}
.diger:hover { background: var(--yuzey); }
.diger b { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; }
.diger span { font-size: 0.88rem; color: var(--metin-3); }

/* ── Görünüme girince beliren ──────────────────────────────────────── */

.bel {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--yumusak), transform 0.7s var(--yumusak);
}
.bel.gorundu { opacity: 1; transform: none; }

/* ── Duyarlı ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .kahraman-izgara { grid-template-columns: 1fr; }
  .kahraman-gorsel { aspect-ratio: 16 / 10; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .hizmet.genis { grid-column: span 2; }
  .surec { grid-template-columns: repeat(2, 1fr); }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .menu { display: none; }
  .menu-dugmesi { display: flex; }
  .ust-aksiyon .dugme { display: none; }
  .bento { grid-template-columns: 1fr; }
  .hizmet.genis { grid-column: span 1; }
  .sayilar { grid-template-columns: repeat(2, 1fr); }
  .sayi:nth-child(2) { border-right: 0; }
  .sayi:nth-child(-n + 2) { border-bottom: 1px solid var(--cizgi); }
  .surec { grid-template-columns: 1fr; }
  .alt-izgara { grid-template-columns: 1fr; }
  .sabit-cagri { display: flex; }
  body { padding-bottom: 56px; }
}

/* Açılır menü */
.gezinti-katman {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  padding: 6rem 2rem 2rem;
  gap: 0.5rem;
  background: rgba(10, 11, 13, 0.97);
  backdrop-filter: blur(20px);
}
.gezinti-katman.acik { display: flex; }
.gezinti-katman a {
  padding: 1rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--cizgi);
}
.gezinti-kapat {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--metin);
  cursor: pointer;
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kes */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bel { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}