:root {
  --navy: #10243a;
  --navy-800: #16314e;
  --navy-900: #0b1a2b;
  --orange: #f97316;
  --orange-dark: #ea6a0b;
  --amber: #ffb84d;
  --bg: #ffffff;
  --bg-alt: #f4f7fa;
  --text: #233447;
  --muted: #5d6f83;
  --border: #e3e9f0;
  --green: #25d366;
  --radius: 14px;
  --navy-rgb: 16, 36, 58;
  --card: #ffffff;
  /* Turuncu tonu artik SABIT degil, temadan turetilir: her temada
     hover/parlama/dodruz kendi vurgu rengini kullanir. */
  --orange-rgb: 249, 115, 22;
  --orange-soft: #fff7ed;
  --orange-line: #fed7aa;
  --orange-ink: #9a3412;
  --orange-faint: #fffbf5;
  --deep: #10243a;
  --header-bg: rgba(255, 255, 255, 0.92);
  --badge: #fff3e6;
  --badge-2: #ffe4c9;
  --success: #15803d;
  --danger: #dc2626;
  --shadow: 0 12px 34px rgba(var(--navy-rgb), 0.10);
  --shadow-sm: 0 4px 14px rgba(var(--navy-rgb), 0.08);
  --font-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head: 'Sora', 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Mobilde yan menu (transform ile ekran disina itiliyor) yatay kaydirilma
     ile geri gorunuyordu. overflow-x: clip bunu durdurur; hidden'dan farkli
     olarak kaydirma konteyneri OLUSTURMAZ, bu yuzden position: sticky
     baslik bozulmaz. */
  overflow-x: clip;
}

body {
  font-family: var(--font-base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: clip;
}

/* Kaydırma kilidi `body.menu-open` altında `position: fixed` ile yapılır
   (JS `top: -scrollY` verir, kapanışta konum geri yüklenir). Gövdeye
   `height: 100%` YAZILMAZ: `.header` doğrudan `body`'nin çocuğu olduğu
   için yapışkanlık alanı gövdenin kutusuyla sınırlanır ve 886px'ten
   sonra başlık yapışmayı bırakıyordu (ölçüldü: scroll 2000'de top -1187).
   Admin panelinde aynı satır var ama orada `.sidebar` `#appView`
   içinde, o yüzden sorun yaşanmıyor — paneli referans alıp siteye
   kopyalamak tuzağa çevirdi. */

/* clip desteklemeyen eski tarayicilar icin yedek. Sadece body'ye yazilir:
   body'den viewport'a yayildigi icin sticky header bozulmaz. */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

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

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.72; cursor: wait; transform: none; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 8px 20px rgba(var(--orange-rgb), 0.35); }
.btn--primary:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn--wa { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); }
.btn--wa:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ---------- Topbar ---------- */
.topbar { background: var(--navy-900); color: #dbe6f0; font-size: 0.85rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; gap: 10px; flex-wrap: wrap; }
.topbar__right { display: flex; gap: 18px; }
.topbar__right a:hover { color: var(--amber); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, var(--orange), var(--amber));
  color: #fff; font-family: var(--font-head); font-weight: 800;
  display: grid; place-items: center; font-size: 1.1rem;
}
.brand__text { font-family: var(--font-head); font-size: 1.1rem; color: var(--navy); line-height: 1.15; }
.brand__text strong { display: block; }
.brand--footer .brand__text { color: #fff; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav a:not(.btn) { font-weight: 500; font-size: 0.95rem; color: var(--text); }
.nav a:not(.btn):hover { color: var(--orange); }
.nav__cta { padding: 11px 18px; font-size: 0.9rem; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--navy); border-radius: 3px; transition: 0.3s; }
.nav-backdrop { display: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.topbar :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.cta :where(a, button):focus-visible,
.footer :where(a, button):focus-visible { outline-color: var(--amber); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--orange-rgb),0.25), transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy) 60%, var(--navy-800));
  color: #fff;
  padding: 90px 0 150px;
}
.hero__overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 820px; }
.hero__tag {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  font-size: 0.85rem; font-weight: 600; color: var(--amber); margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15; letter-spacing: -0.5px;
}
/* Turuncu vurgu SADECE .vurgu taşıyan parçaya uygulanır. Önceden
   `.hero h1 span` idi; başlıktaki her parça panelden düzenlenebilmesi için
   <span> ile sarıldığında turuncuya bozuluyordu. */
.hero h1 .vurgu { color: var(--orange); }
.hero__sub { margin-top: 18px; max-width: 640px; font-size: 1.1rem; color: #c6d3e0; }
.hero__actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__ticks { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.92rem; color: var(--amber); }
.hero__ticks li { display: flex; align-items: center; gap: 7px; }

.hero__statbar {
  position: absolute; left: 0; right: 0; bottom: -64px;
}
.hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px 12px; text-align: center; color: var(--text);
}
.hero__stats div { border-right: 1px solid var(--border); padding: 0 12px; }
.hero__stats div:last-child { border-right: none; }
.hero__stats strong { display: block; font-family: var(--font-head); font-size: 1.9rem; color: var(--navy); }
.hero__stats span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Bölüm başlıkları ---------- */
.section { padding: 100px 0; }
.section--alt { background: var(--bg-alt); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section__label {
  display: inline-block; color: var(--orange); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px;
}
.section__head h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--navy); margin-bottom: 12px; }
.section__head p { color: var(--muted); }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Hizmet kartları ---------- */
.service-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform 0.25s, box-shadow 0.25s;
  display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.service-card__icon {
  width: 58px; height: 58px; border-radius: 14px; font-size: 1.7rem;
  background: linear-gradient(135deg, var(--badge), var(--badge-2)); display: grid; place-items: center; margin-bottom: 18px;
}
.service-card h3 { font-family: var(--font-head); font-size: 1.25rem; color: var(--navy); margin-bottom: 10px; }
.service-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 16px; }
.service-card__price {
  display: inline-block; background: var(--badge); color: var(--orange); font-weight: 700;
  border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; margin-bottom: 12px;
}
.service-card ul { margin-bottom: 20px; }
.service-card li { color: var(--text); font-size: 0.92rem; padding: 5px 0; padding-left: 24px; position: relative; }
.service-card li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.service-card__link { margin-top: auto; font-weight: 600; color: var(--orange); }
.service-card__link:hover { color: var(--orange-dark); }

.extra-strip {
  margin-top: 28px; background: var(--deep); color: #dbe6f0; text-align: center;
  border-radius: var(--radius); padding: 16px 20px; font-size: 0.95rem;
}
.extra-strip span { color: var(--amber); font-weight: 700; }

/* ---------- Özellikler ---------- */
.feature {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
.feature__num { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--orange); display: block; margin-bottom: 10px; }
.feature h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--navy); margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Süreç ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; padding-top: 46px; box-shadow: var(--shadow-sm);
}
.step__n {
  position: absolute; top: -22px; left: 26px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--orange); color: #fff; font-family: var(--font-head);
  font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(var(--orange-rgb),0.4);
}
.step h3 { font-family: var(--font-head); color: var(--navy); margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Galeri ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery__item { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); position: relative; }
.gallery__item--wide { grid-column: span 2; }
.gallery__ph {
  aspect-ratio: 4/3; background: linear-gradient(135deg, var(--navy-800), var(--navy));
  color: #8aa2bd; display: grid; place-items: center; font-size: 0.85rem; font-family: monospace;
}
.gallery__item--wide .gallery__ph { aspect-ratio: 21/9; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px;
  background: linear-gradient(transparent, rgba(11,26,43,0.85)); color: #fff; font-size: 0.85rem; font-weight: 500;
}

/* ---------- Yorumlar ---------- */
.quote {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); position: relative;
}
.quote::before { content: "“"; font-size: 3.4rem; color: var(--orange); font-family: var(--font-head); line-height: 1; display: block; margin-bottom: -6px; }
.quote p { font-size: 0.97rem; margin-bottom: 16px; }
.quote footer { font-weight: 600; color: var(--navy); }
.quote footer span { color: var(--muted); font-weight: 400; }

/* ---------- CTA bandı ---------- */
.cta {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  padding: 64px 0; color: #fff;
}
.cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta h2 { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px; }
.cta p { color: #c6d3e0; }
.cta__btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- İletişim ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: start; }
.contact__info {
  background: var(--deep); color: #dbe6f0; border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.contact__info h3 { font-family: var(--font-head); color: #fff; margin-bottom: 20px; font-size: 1.2rem; }
.contact__info li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.95rem; }
.contact__info li:last-child { border-bottom: none; }
.contact__info strong { color: #fff; }
.contact__info a:hover { color: var(--amber); }
.contact__note { margin-top: 18px; background: rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; font-size: 0.88rem; }

.contact__form {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm);
  scroll-margin-top: 92px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__form label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--navy); margin: 14px 0 6px; }
.contact__form input,
.contact__form select,
.contact__form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg-alt);
  transition: border 0.2s, box-shadow 0.2s;
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 2px;
  border-color: var(--orange); box-shadow: 0 0 0 3px rgba(var(--orange-rgb),0.15); background: var(--card);
}
.form__privacy { font-size: 0.8rem; color: var(--muted); margin: 14px 0; }
.form__success { color: var(--success); font-weight: 600; margin-top: 12px; }
.form__error { color: var(--danger); font-weight: 600; margin-top: 12px; }
#formSuccess, #formError { padding: 15px 17px; border: 1px solid; border-radius: 10px; line-height: 1.55; }
#formSuccess { background: rgba(21,128,61,0.10); border-color: rgba(21,128,61,0.42); }
#formError { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.40); }
#formSuccess:focus, #formError:focus { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 12px; padding: 18px 22px; box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--navy); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--orange); font-weight: 700; transition: 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 12px; color: var(--muted); font-size: 0.95rem; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color: #c6d3e0; padding: 56px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 34px; }
.footer h4 { color: #fff; font-family: var(--font-head); margin-bottom: 14px; font-size: 1rem; }
.footer ul li { padding: 5px 0; font-size: 0.92rem; }
.footer a:hover { color: var(--amber); }
.footer__social { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.footer__social a[hidden] { display: none; }
.footer__social a:hover { background: rgba(255,255,255,0.1); border-color: var(--amber); transform: translateY(-2px); }
.footer__social a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.footer__social svg { width: 23px; height: 23px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 10px; font-size: 0.85rem;
}
.footer__bottom > :last-child { text-align: right; }
.footer__credit { text-align: center; }
.footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__credit a:hover { color: var(--amber); }

/* ---------- WhatsApp FAB ---------- */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; background: var(--green);
  display: grid; place-items: center; font-size: 1.7rem; color: #fff;
  box-shadow: 0 10px 24px rgba(37,211,102,0.45);
  transition: transform 0.2s, opacity 0.2s, visibility 0s linear 0.2s;
}
.wa-fab--form-visible { opacity: 0; visibility: hidden; pointer-events: none; }
/* Logo artık tek yollu, 24'lük viewBox'lı dolu ikon. Mürekkep kutuyu
   TAMEN dolduruyor (ölçüldü: 0–24, üstte de altta da 0 birim boşluk,
   merkez kayması 0px) — bu yüzden düzeltme kaydırması GEREKMIYOR.
   Önceki el yazımı dış hat logoda 2px'lik translateY vardı; o ikon
   değiştiği için kaldırıldı, yoksa yeni logo 2px aşağıda dururdu. */
.wa-fab__icon { width: 32px; height: 32px; color: #fff; }
.wa-fab:hover { transform: scale(1.1); }

/* ---------- Yukarı çık düğmesi ---------- */
.back-to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: var(--orange);
  box-shadow: 0 10px 24px rgba(var(--orange-rgb), 0.32);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s, background 0.2s;
}
.back-to-top.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.25s, transform 0.25s, visibility 0s, background 0.2s;
}
.menu-open .back-to-top { opacity: 0; visibility: hidden; pointer-events: none; }
.back-to-top svg { width: 26px; height: 26px; }
.back-to-top.is-visible:hover { background: var(--orange-dark); transform: translateY(-3px); }
.back-to-top:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* ---------- Telefon ikonu ----------
   Eskiden 📞 emoji olarak yazılıydı. Emojinin mürekkep konumu İŞLETİM
   SİSTEMİNE ve emoji fontına bağlı (Windows'ta macOS'tan farklı çiziliyor),
   bu yüzden CSS ile tam ortalanması garanti edilemiyordu. SVG'nin mürekkep
   kutusu ölçülebilir olduğu için her yerde birebir hizalama yapılabilir.
   Kapsayıcıları flex + align-items:center olduğundan ikon metinle aynı
   orta eksende durur. */
.icon-tel {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
  fill: currentColor; display: block;
}
/* Üst bilgi çubuğundaki telefon bağlantısı: ikon + yazı yan yana, ortalı */
.topbar__tel {
  display: inline-flex; align-items: center; gap: 0.4em;
}

/* ---------- Animasyon ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s, transform 0.7s; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Panelden liste boşaltılırsa (SSS, yorum, süreç...) gösterilen not. */
.bos-not { color: var(--muted); text-align: center; padding: 18px 0; grid-column: 1 / -1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; }
}

@media (max-width: 860px) {
  /* ⚠️ ZORUNLU — silme. Başlıktaki `backdrop-filter: blur(8px)`, `filter`
     gibi davranıp İÇİNDEKİ `position: fixed` öğeler için konumlandırma
     bağlamı oluşturuyor. Mobil yan menü bu başlığın içinde olduğu için
     viewport'a değil başlığa göre konumlanıyor; başlık üst çubuğun
     altında `top: 38px` durduğundan menü 38px aşağıdan başlıyor ve altı
     ekran dışına taşıyor (ölçüldü: üst boşluk 38px, alt taşma 38px,
     `backdrop-filter: none` iken ikisi de 0).
     Menüyü DOM'da başlığın dışına taşımak masaüstü düzenini bozuyor
     (`.nav` masaüstünde başlık içinde yatay sırada), bu yüzden mobilde
     bulanıklığı kapatıp arka planı opak yapıyoruz. Bulanık cam mobilde
     zaten zayıf görünüyor ve telefonlarda ayrıca pahalı. */
  .header { backdrop-filter: none; background: var(--card); }
  /* Kaydırma kilidi. Gövde `position: fixed` ile ekrana çivileniyor ve
     `top` JS tarafından `-scrollY` yapılıyor; böylece sayfa hem
     kaymıyor hem de MENÜ AÇILINCA TEPEYE ATMIYOR (ölçüldü: sadece
     `overflow: hidden` ile konum 500'den 0'a düşüyordu, menü kapanınca
     eski yere dönülmüyordu). Kapanışta `window.scrollTo` ile konum geri
     verilir. `overscroll-behavior: none` aşağı çekme (pull-to-refresh)
     ve lastik bant etkisini de keser. */
  body.menu-open {
    position: fixed; left: 0; right: 0; width: 100%;
    overflow: hidden; overscroll-behavior: none;
  }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); height: 100vh; height: 100dvh; overflow-y: auto;
    /* Panel içinde kaydırmak arkadaki sayfaya sıçramasın. */
    overscroll-behavior: contain;
    background: var(--card); flex-direction: column; align-items: flex-start;
    padding: max(88px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom)); gap: 8px;
    box-shadow: -20px 0 60px rgba(0,0,0,0.2);
    /* Kapaliyken gizli: yatay kaydirma ile ekrana girdikten sonra
       gorunup kaydirilabilir olmasin, tab ile de odlege gelmesin. */
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.35s, visibility 0.35s; z-index: 100;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav a:not(.btn) { display: flex; align-items: center; min-height: 48px; width: 100%; padding: 8px 10px; border-radius: 8px; }
  .nav a:not(.btn):hover { background: var(--bg-alt); }
  .nav .mode-toggle { width: 100%; height: auto; min-height: 48px; display: flex; justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; font: inherit; font-weight: 600; text-align: left; }
  .nav .mode-toggle__label { display: inline; }
  .nav__cta { width: 100%; margin-top: 12px; }
  .nav-toggle { display: flex; z-index: 110; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .nav-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 90; width: 100%;
    /* Panelle AYNI viewport birimi kullanılmalı. Panel 100dvh, arka plan
       %100% idi; ikisi farklı yükseklikte olunca mobilde panelin altında
       karartılmamış bir şerit (boşluk) kalıyordu. */
    height: 100vh; height: 100dvh;
    border: 0; background: rgba(11, 26, 43, 0.52); backdrop-filter: blur(2px);
  }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .topbar__left { display: none; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero__stats div { border: none; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 76px 0 190px; }
  .section { scroll-margin-top: 76px; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 68px; }
  .container, .container--narrow { width: min(100% - 32px, 520px); }
  .topbar { font-size: 0.85rem; }
  .topbar__inner { min-height: 38px; justify-content: center; padding: 5px 0; }
  .topbar__right { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .topbar__right a { min-height: 44px; display: inline-flex; align-items: center; }
  .header__inner { height: 64px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__text { font-size: 1rem; }
  .hero { padding: 58px 0 178px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.7rem); letter-spacing: -0.04em; }
  .hero h1 br { display: none; }
  .hero__tag { font-size: 0.85rem; padding: 7px 12px; margin-bottom: 18px; }
  .hero__sub { font-size: 1rem; margin-top: 14px; }
  .hero__actions { margin-top: 22px; gap: 10px; }
  .hero__actions .btn { width: 100%; min-height: 48px; white-space: normal; text-align: center; }
  .hero__ticks { gap: 10px 16px; font-size: 0.84rem; margin-top: 22px; }
  .hero__statbar { bottom: -56px; }
  .hero__stats { padding: 18px 8px; gap: 12px 4px; }
  .hero__stats div { padding: 0 4px; }
  .hero__stats strong { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .hero__stats span { display: block; font-size: 0.82rem; line-height: 1.35; }
  .section { padding: 58px 0; }
  .section__head { margin-bottom: 30px; }
  .section__head h2 { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  .grid { gap: 16px; }
  .grid--3, .grid--4, .steps, .gallery { grid-template-columns: 1fr; }
  .service-card, .feature, .step, .quote { padding: 22px; }
  .service-card__link { display: inline-flex; align-items: center; min-height: 44px; }
  .extra-strip { padding: 14px 16px; }
  .gallery__item--wide { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer ul li { padding: 0; }
  .footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact { gap: 16px; }
  .contact__info, .contact__form { padding: 22px; }
  .contact__form { scroll-margin-top: 76px; }
  .form-row { gap: 0; }
  .contact__form input, .contact__form select, .contact__form textarea { font-size: 16px; }
  .contact__form .btn { width: 100%; min-height: 48px; }
  .cta { padding: 48px 0; }
  .cta__btns { width: 100%; }
  .cta__btns .btn { width: 100%; min-height: 48px; }
  .wa-fab { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .back-to-top { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .footer__bottom { grid-template-columns: 1fr; text-align: center; }
  .footer__bottom > :last-child { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   KOYU MOD (masaustu)
   - Yalnizca ziyaretci dugmesiyle acilir, localStorage'da tutulur.
   - Bu blok :root ve #themeVars (marka paleti) ile AYNI veya daha
     yuksek specificity tasidigi icin paleti ezer; marka renkleri
     (--orange, --amber, --green) korunur, yalnizca yuzeyler ve
     yazi renkleri degisir.
   ========================================================= */

/* Acma/kapatma dugmesi - "Ucretsiz Teklif"in saginda */
.mode-toggle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  border-radius: 50%; color: var(--navy);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.mode-toggle:hover { background: var(--bg-alt); border-color: var(--orange); color: var(--orange); }
.mode-toggle:active { transform: scale(0.93); }
.mode-toggle svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.mode-toggle__label { display: none; }
.mode-toggle__moon { display: block; }
.mode-toggle__sun { display: none; }
html[data-mode="dark"] .mode-toggle__moon { display: none; }
html[data-mode="dark"] .mode-toggle__sun { display: block; }

/* Koyu mod düğmesi yalnızca gerçekten kullanılabilirken görünür. Karar
   artık index.html'e sunucu tarafından gömülür (ilk boyamadan önce
   bilinir), ama data-dark-ready yine de güvenlik ağıdır: karar
   gelmezse düğme yanlış yerde belirmez. */
html:not([data-dark-ready]) .mode-toggle,
.mode-toggle[hidden],
html[data-dark-off] .mode-toggle { display: none; }

html { color-scheme: light; }
html[data-mode="dark"] {
  color-scheme: dark;

  --navy: #e6edf6;          /* basliklar ve hamburger cubuklari açarır */
  --bg: #0b131d;
  --bg-alt: #111c29;
  --card: #16222f;
  --border: #26384c;
  --text: #dbe5f0;
  --muted: #93a6bd;
  --deep: #080f17;          /* koyu paneller (iletisim, serit) */
  --header-bg: rgba(11, 19, 29, 0.92);
  --badge: #33240f;
  --badge-2: #432f12;
  --navy-rgb: 2, 6, 12;    /* golgeler koyu kalsin */
  --success: #4ade80;
  --danger: #f87171;
  --orange-soft: #241a10;
  --orange-line: #3f2b16;
  --orange-ink: #fdba74;
  --orange-faint: #1a1410;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.38);
}

/* Koyu modda ayri ele alinmasi gereken yerler */
html[data-mode="dark"] .gallery__ph {
  background: linear-gradient(135deg, #1a2735, #0e1824);
  color: #7d92a8;
}
html[data-mode="dark"] .topbar { background: #060c14; }
html[data-mode="dark"] .footer { background: #060c14; }
html[data-mode="dark"] .hero {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--orange-rgb),0.18), transparent 55%),
    linear-gradient(160deg, #060c14, #0d1826 60%, #16222f);
}
html[data-mode="dark"] .cta { background: linear-gradient(160deg, #14202e, #0a121c); }
html[data-mode="dark"] .contact__note { background: rgba(255,255,255,0.06); }
html[data-mode="dark"] .wa-fab { box-shadow: 0 10px 24px rgba(0,0,0,0.55); }