/* Daylak Dijital — marka sistemi MARKA_KILAVUZU.md v2'den birebir uygulandı.
   v2: kobalt mavi + kırık beyaz zemin, yuvarlak köşe + yumuşak gölge dili.
   Gradyan yok — düz zemin + gölge. */

:root {
  --dl-ink:       #101A3C;
  --dl-ink-2:     #1E2A55;
  --dl-cobalt:    #2647FF;
  --dl-cobalt-lt: #7D95FF;
  --dl-cobalt-tx: #1B34C4;
  --dl-signal:    #00D3A7;
  /* Kehribar: logo ve imleç için. Beyaz zeminde okunsun diye sarının
     kendisi değil koyu tonu alındı; saf sarı zeminde kayboluyor. */
  --dl-kehribar:    #8F5E12;
  --dl-sari:        #F5B301;
  --tel-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25 11.4 11.4 0 003.6.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.6a1 1 0 01-.25 1l-2.22 2.2z'/%3E%3C/svg%3E");
  --dl-kehribar-ac: #C08A22;
  --dl-paper:     #FAFBFF;
  --dl-paper-2:   #FFFFFF;
  --dl-line:      #E3E7F5;
  --dl-muted:     #6A7091;
  --dl-body:      #3D4360;

  /* Boşluk ölçeği — kılavuzdaki değerler dışına çıkılmaz. */
  --b1: 6px;  --b2: 10px; --b3: 14px; --b4: 18px; --b5: 22px;
  --b6: 26px; --b7: 36px; --b8: 44px; --b9: 56px; --b10: 64px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,26,60,.04), 0 2px 8px rgba(16,26,60,.05);
  --shadow-md: 0 8px 24px rgba(16,26,60,.10);

  --kap: 1200px;
  --yan: 64px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--dl-paper);
  color: var(--dl-body);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Varsayılan tarayıcı mavisi hiçbir yerde görünmemeli. */
a { color: var(--dl-cobalt-tx); text-decoration: none; transition: color 120ms; }
a:hover { color: var(--dl-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--dl-cobalt-tx); outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { color: var(--dl-ink); margin: 0; }

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 var(--yan); }

.mono { font-family: 'IBM Plex Mono', monospace; }

.etiket {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dl-muted); margin: 0;
}

.gizli-metin {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dl-ink); color: var(--dl-paper); padding: var(--b3) var(--b5);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase;
}
.atla:focus { left: 0; color: var(--dl-paper); }

/* ═══════════ KELİME LOGOSU ═══════════ */

.logo-tek { display: flex; align-items: center; gap: 13px; color: var(--dl-ink); }
.logo-tek:hover { color: var(--dl-ink); }
.logo-ad {
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 700;
  font-size: 15.5px; letter-spacing: -.01em;
}
.logo-alt {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 13px; letter-spacing: .40em; color: var(--dl-muted);
}
.logo-tek.negatif, .logo-tek.negatif .logo-ad { color: var(--dl-paper); }
.logo-tek.negatif .logo-alt { color: #9AA0BE; }

/* İmleç: 1.2 sn'de bir keskin yanıp söner, yumuşak geçiş yok. */
.imlec {
  display: inline-block; width: 5px; height: 10px;
  background: var(--dl-sari); margin-left: -6px;
  animation: dl-caret 1.2s steps(1, end) infinite;
}
@keyframes dl-caret { 0%, 48% { opacity: 1 } 52%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .imlec { animation: none; opacity: 1; } }

.logo-yigin { display: flex; flex-direction: column; align-items: flex-start; }
.logo-yigin .logo-ad.buyuk { font-size: 44px; line-height: 1; }
.logo-yigin .logo-alt.buyuk { font-size: 13px; margin-top: 10px; }
/* İmleç "dijital"in hemen sağında durur — sabit bir kaydırma değeriyle
   konumlanınca harf aralığı değiştiğinde yazının üstüne biniyordu. */
.logo-satir { display: flex; align-items: center; margin-top: 10px; }
.logo-yigin .logo-alt.buyuk { margin-top: 0; }
.logo-yigin .imlec.buyuk {
  width: 6px; height: 12px; margin: 0; background: var(--dl-sari);
}

/* ═══════════ BAŞLIK ═══════════ */

.basluk {
  position: sticky; top: 0; z-index: 50;
  background: var(--dl-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}
.basluk.kaydi { border-bottom-color: var(--dl-line); }
.basluk-ic { display: flex; align-items: center; justify-content: space-between; gap: var(--b4); padding-block: var(--b4); }

/* Yazılar büyütülünce menü öğeleri ikişer satıra bölünmüştü. Bölünme
   engellendi, aralık daraltıldı; punto 15px'in altına düşürülmedi. */
.gezinti {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--b2); font-size: 13px;
}
.gezinti > a { white-space: nowrap; }
.gezinti a { color: var(--dl-body); }
.gezinti a:hover { color: var(--dl-ink); }
.gezinti a[aria-current="page"] { color: var(--dl-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* Başlıktaki telefon 11px'ti ve menünün yanında kayboluyordu; oysa
   sayfadaki en değerli hareket onu aramak. Büyütüldü, çerçeveye alındı
   ve başına telefon simgesi kondu. */
.baslik-tel {
  flex: none; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--dl-ink);
  border: 1.5px solid var(--dl-ink); border-radius: var(--r-pill);
  padding: 6px 13px 6px 11px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 140ms, color 140ms;
}
.baslik-tel::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: var(--tel-ikon) center/contain no-repeat;
          mask: var(--tel-ikon) center/contain no-repeat;
}
.baslik-tel:hover { background: var(--dl-ink); color: #fff; text-decoration: none; }

.mobil-iletisim { display: none; }

.tus-murekkep {
  background: var(--dl-cobalt); color: #fff;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  border: 0; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background 120ms, box-shadow 120ms, transform 120ms;
}
.tus-murekkep:hover { background: var(--dl-ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tus-murekkep.buyuk { padding: 14px 28px; font-size: 13.5px; }

.tus-cizgi {
  border: 1.5px solid var(--dl-ink); color: var(--dl-ink);
  padding: 12.5px 25px; border-radius: var(--r-pill);
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.tus-cizgi:hover { background: var(--dl-ink); color: var(--dl-paper); box-shadow: var(--shadow-md); }

.menu-tus {
  display: none; position: relative;
  background: none; border: 1px solid var(--dl-line); border-radius: var(--r-sm);
  width: 42px; height: 38px; cursor: pointer; padding: 0;
}
.menu-tus span {
  display: block; width: 18px; height: 1.5px; background: var(--dl-ink);
  margin: 3.5px auto; transition: transform 120ms, opacity 120ms;
}
.menu-tus[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-tus[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-tus[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ═══════════ HERO ═══════════ */
/* Koyu zemin + canlı ağ animasyonu: dijital iş yaptığımızı anlatan tek yer burası.
   Arka plan canvas ile çiziliyor (script.js), reduced-motion'da duruyor. */

.hero {
  position: relative; overflow: hidden;
  background: var(--dl-ink);
  padding-block: var(--b9);
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(38,71,255,.08);
}
.hero-ic { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--b7); }
.hero-metin { flex: 0 1 360px; min-width: 0; }
.hero h1 { color: var(--dl-paper); font-size: clamp(38px, 4.7vw, 64px); max-width: 18ch; }
.hero .hero-alt { color: #C3CAE6; }

h1 {
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 700;
  /* Kılavuz 1.05 diyor; Türkçe'de Ö/ğ/İ işaretleri o satır aralığında
     üst satıra değiyor. En küçük düzeltme 1.12 ile yapıldı. */
  font-size: clamp(34px, 5.4vw, 72px); line-height: 1.12; letter-spacing: -.02em;
}
.hero-alt { font-size: 15.5px; max-width: 46ch; margin: var(--b5) 0 0; }
.hero-tuslar { display: flex; flex-wrap: wrap; gap: var(--b3); margin-top: var(--b7); }

/* Koyu zeminde ikincil çizgi buton okunur kalmalı. */
.hero .tus-cizgi { border-color: rgba(255,255,255,.34); color: var(--dl-paper); }
.hero .tus-cizgi:hover { background: rgba(255,255,255,.10); border-color: var(--dl-paper); color: var(--dl-paper); }
.hero .canli { color: #9AA4CC; }
.hero-kanit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b2) var(--b5); margin-top: var(--b6); }
.hero-kanit .canli { margin: 0; }
.hero-kaynak {
  margin: 0; color: #9AA4CC; font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; letter-spacing: .04em;
}

/* İç sayfalar: ana sayfadaki marka dili korunur, gereksiz kahraman görseli yoktur. */
.sayfa-baslik { padding-block: var(--b10) var(--b9); border-bottom: 1px solid var(--dl-line); }
.sayfa-baslik h1 { max-width: 17ch; margin-top: var(--b3); }
.dar { max-width: 820px; }
.metin-liste { margin: var(--b5) 0; padding-left: 1.25em; }
.metin-liste li { margin: var(--b2) 0; }
.iletisim-kisa { background: var(--dl-ink); color: #E8E6DE; padding-block: var(--b8); }
.iletisim-kisa h2 { color: var(--dl-paper); }
.iletisim-kisa a { color: var(--dl-cobalt); text-decoration: underline; text-underline-offset: 3px; }
.iletisim-kisa p { margin: var(--b3) 0 0; }
.hizmet-ozet .tus-kucuk { display: inline-flex; align-items: center; margin-top: var(--b4); min-height: 44px; }

.canli {
  display: flex; align-items: center; gap: var(--b2); margin: var(--b6) 0 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--dl-muted);
}
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--dl-signal);
         flex: none; align-self: flex-start; margin-top: 7px; }

/* ═══════════ SAYI ŞERİDİ ═══════════ */

.serit-sayi {
  background: var(--dl-paper); color: var(--dl-ink);
  padding-block: var(--b9);
}
.serit-sayi .etiket { color: var(--dl-muted); }
.sayi-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--b3);
  margin-top: var(--b6);
}
.sayi-kutu {
  background: var(--dl-paper-2); padding: var(--b6) var(--b5);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--dl-cobalt);
  transition: box-shadow 120ms, transform 120ms;
}
.sayi-kutu:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sayi-buyuk {
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.05; letter-spacing: -.02em; color: var(--dl-ink);
}
.sayi-buyuk .birim { font-size: 15.5px; letter-spacing: 0; margin-left: 5px; color: var(--dl-muted); }
.sayi-ad { font-size: 14.5px; margin-top: var(--b2); line-height: 1.45; }
.sayi-kaynak {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .06em;
  color: var(--dl-muted); margin-top: var(--b2);
}
.kaynak-not {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .06em;
  color: var(--dl-muted); margin: var(--b4) 0 0;
}

/* ═══════════ BÖLÜM ═══════════ */

.bolum { padding-block: var(--b10); }
.bolum-alt { background: var(--dl-paper-2); border-block: 1px solid var(--dl-line); }
.bolum-baslik {
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -.01em;
  margin-top: var(--b3);
}
.bolum-giris { max-width: 68ch; margin: var(--b4) 0 0; }

/* Hizmetler — gölgeli, yuvarlak köşeli kart ızgarası. */
.hizmet-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--b4);
  margin-top: var(--b7);
}
.hizmet {
  background: var(--dl-paper-2); padding: var(--b6);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--dl-cobalt);
  transition: box-shadow 120ms, transform 120ms;
}
.hizmet:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hizmet h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin-top: var(--b3); }
.hizmet p { font-size: 14.5px; line-height: 1.55; margin: var(--b2) 0 0; }
.hizmet ul { margin: var(--b3) 0 0; padding: 0; list-style: none; }
.hizmet li {
  font-family: 'IBM Plex Mono', monospace; font-size: 13.5px;
  color: var(--dl-muted); padding: 3px 0;
}
.hizmet li::before { content: "— "; color: var(--dl-cobalt-tx); }

/* ═══════════ İŞ / REFERANS SATIRI ═══════════ */

.is-liste { margin-top: var(--b7); display: flex; flex-direction: column; gap: var(--b4); }
.isler-devam { margin: var(--b7) 0 0; }
.isler-devam .tus-cizgi { display: inline-flex; align-items: center; }
.is {
  background: var(--dl-paper-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--b7);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--b7);
  transition: box-shadow 120ms;
}
.is:hover { box-shadow: var(--shadow-md); }
.is-bas h3 { font-size: 24px; font-weight: 600; line-height: 1.25; }
.is-alt { font-size: 14.5px; color: var(--dl-muted); margin: var(--b1) 0 0; }
.rozet-liste { display: flex; flex-wrap: wrap; gap: var(--b1); margin-top: var(--b3); }
.rozet {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dl-ink);
  border: 1px solid var(--dl-line); border-radius: var(--r-pill);
  padding: 4px 11px; background: var(--dl-paper);
}
.puan {
  display: flex; align-items: baseline; gap: var(--b2); margin-top: var(--b4);
  font-family: 'IBM Plex Mono', monospace; font-size: 14.5px; color: var(--dl-body);
}
.puan b { font-family: 'Oswald', system-ui, sans-serif; font-size: 20px; color: var(--dl-ink); }
.is-tuslar { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b5); }
.tus-kucuk {
  border: 1.5px solid var(--dl-ink); color: var(--dl-ink); background: var(--dl-paper);
  padding: 10px 16px; border-radius: var(--r-pill);
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.tus-kucuk:hover { background: var(--dl-ink); color: var(--dl-paper); box-shadow: var(--shadow-sm); }
.tus-kucuk.yok {
  border-color: var(--dl-line); color: var(--dl-muted); cursor: default; pointer-events: none;
}

/* Ölçüm tablosu — sayılar mono. */
.olcum { border-radius: var(--r-md); background: var(--dl-paper-2); box-shadow: var(--shadow-sm); overflow: hidden; }
.olcum-bas {
  padding: var(--b3) var(--b4); border-bottom: 1px solid var(--dl-line);
  display: flex; justify-content: space-between; align-items: center; gap: var(--b3);
  flex-wrap: wrap;
}
/* Sütun sayısı sabit (4 / 2): auto-fit'te son satır yarım kalınca ızgaranın
   çizgi zemini boş hücre gibi görünüyordu. Hücre sayısı script.js'te 4'ün
   katına tamamlanır, 2 de 4'ü böldüğü için mobilde de boşluk kalmaz. */
.olcum-satirlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--dl-line); }
@media (max-width: 1100px) { .olcum-satirlar { grid-template-columns: repeat(2, 1fr); } }
.olcum-hucre { background: var(--dl-paper); padding: var(--b4); }
.olcum-deger {
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -.01em; color: var(--dl-ink); line-height: 1.15;
}
.olcum-deger .birim { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 13.5px; color: var(--dl-muted); margin-left: 4px; letter-spacing: 0; }
.olcum-ad { font-size: 13.5px; line-height: 1.4; margin-top: var(--b1); }
.olcum-not {
  padding: var(--b3) var(--b4); border-top: 1px solid var(--dl-line);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .05em;
  color: var(--dl-muted);
}
.olcum-bos {
  padding: var(--b6) var(--b4); font-size: 14.5px; color: var(--dl-muted);
}

/* ═══════════ ADIMLAR ═══════════ */

.adim-liste {
  list-style: none; margin: var(--b7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--b4);
  counter-reset: adim;
}
.adim {
  background: var(--dl-paper-2); padding: var(--b6); counter-increment: adim;
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.adim::before {
  content: counter(adim, decimal-leading-zero);
  display: block; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  letter-spacing: .2em; color: var(--dl-cobalt-tx); margin-bottom: var(--b3);
}
.adim h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.adim p { font-size: 14.5px; line-height: 1.55; margin: var(--b2) 0 0; }

/* ═══════════ OPERASYON GÜNLÜĞÜ ═══════════ */

.gunluk-liste {
  list-style: none; margin: var(--b7) 0 0; padding: 0;
  border-top: 1px solid var(--dl-line);
}
.gunluk-kayit {
  border-bottom: 1px solid var(--dl-line); padding: var(--b6) 0;
  display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  column-gap: var(--b7); align-items: start;
}
.gunluk-tarih {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.55;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dl-cobalt-tx); margin: 0;
}
.gunluk-kayit h3 { font-size: 17px; font-weight: 600; line-height: 1.3; }
.gunluk-kayit h3, .gunluk-kayit > p:not(.gunluk-tarih) { grid-column: 2; }
.gunluk-kayit > p:not(.gunluk-tarih) { font-size: 14.5px; line-height: 1.55; margin: var(--b2) 0 0; }

/* ═══════════ ESKİ EKİP KARTLARI ═══════════ */

.ekip-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--b4);
  margin-top: var(--b7);
}
.kisi { background: var(--dl-paper-2); padding: var(--b6); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.kisi h3 { font-size: 17px; font-weight: 600; }
.kisi .rol {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dl-cobalt-tx); margin: var(--b1) 0 0;
}
.kisi p { font-size: 14.5px; line-height: 1.55; margin: var(--b3) 0 0; }

/* ═══════════ TEKLİF ═══════════ */

.teklif { background: var(--dl-ink); color: #E8E6DE; padding-block: var(--b10); }
.teklif-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b10); }
.teklif h2, .teklif .logo-ad { color: var(--dl-paper); }
.teklif .logo-alt { color: #9AA0BE; }
.teklif-metin { max-width: 46ch; margin: var(--b6) 0 0; }
.teklif a { color: var(--dl-cobalt-lt); }
.teklif a:hover { color: var(--dl-paper); }

.iletisim-liste { list-style: none; margin: var(--b7) 0 0; padding: 0; }
.iletisim-liste li {
  display: flex; gap: var(--b3); align-items: baseline;
  padding: var(--b3) 0; border-top: 1px solid #2E3968;
  font-family: 'IBM Plex Mono', monospace; font-size: 14.5px;
}
.iletisim-liste .etiket { color: #7A81A6; min-width: 84px; }

.teklif-form { display: flex; flex-direction: column; gap: var(--b4); }
.alan { display: flex; flex-direction: column; gap: var(--b1); }
.alan label {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: #9AA0BE;
}
.alan input, .alan textarea {
  background: var(--dl-ink-2); border: 1px solid #2E3968; border-radius: var(--r-sm);
  color: var(--dl-paper); padding: 12px 14px;
  font-family: 'Open Sans', system-ui, sans-serif; font-size: 15.5px;
}
.alan input:focus, .alan textarea:focus { border-color: var(--dl-cobalt-lt); }
.alan textarea { resize: vertical; }
.hata { font-size: 13.5px; color: var(--dl-cobalt-lt); margin: 0; min-height: 0; }
.hata:empty { display: none; }

.tus-acik {
  align-self: flex-start;
  background: var(--dl-paper); color: var(--dl-ink); border: 0; border-radius: var(--r-pill);
  padding: 14px 26px; cursor: pointer;
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase;
  transition: background 120ms;
}
.tus-acik:hover { background: #FFFFFF; }
.tus-acik[disabled] { opacity: .55; cursor: default; }
.form-durum { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; margin: 0; }
.form-durum.iyi { color: var(--dl-signal); }
.form-durum.kotu { color: var(--dl-cobalt-lt); }

/* ═══════════ ALT BİLGİ ═══════════ */

.alt { background: var(--dl-ink-2); padding-block: var(--b6); }
.alt-ic { display: flex; align-items: center; justify-content: space-between; gap: var(--b5); flex-wrap: wrap; }
.telif { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #B9B7AE; margin: 0; }

/* ═══════════ ≤900px: TEK KOLON ═══════════ */

@media (max-width: 1140px) {
  :root { --yan: 22px; }

  .menu-tus { display: block; }
  .baslik-tel { display: none; }
  .gezinti {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dl-paper); border-bottom: 1px solid var(--dl-line);
    padding: var(--b3) var(--yan) var(--b5);
    display: none;
  }
  .gezinti.acik { display: flex; }
  .gezinti a { padding: var(--b3) 0; border-top: 1px solid var(--dl-line); }
  .gezinti .tus-murekkep { margin-top: var(--b3); text-align: center; border-top: 0; }

  .hero { padding-block: var(--b8) var(--b7); }
  .hero-ic { flex-direction: column; align-items: flex-start; gap: var(--b7); }
  /* 64px altına düşmediği sürece zeminli sürüm kalır; küçülünce tek renge geçilir. */
  /* Mobilde amblem basligin ustune aliniyordu (order:-1); sayfa deveyle
     aciliyor, ne is yaptigimiz asagi kaliyordu. Telefonda amblem gizlenir:
     zaten ust bardaki logoda ve alt bilgide duruyor. */
  .is { grid-template-columns: 1fr; gap: var(--b6); }
  .gunluk-kayit { grid-template-columns: 1fr; row-gap: var(--b2); }
  .gunluk-kayit h3, .gunluk-kayit > p:not(.gunluk-tarih) { grid-column: auto; }
  .gunluk-kayit > p:not(.gunluk-tarih) { margin-top: 0; }
  .teklif-ic { grid-template-columns: 1fr; gap: var(--b8); }
  .bolum { padding-block: var(--b8); }
  .serit-sayi { padding-block: var(--b8); }
  .logo-yigin .logo-ad.buyuk { font-size: 34px; }
}

@media (max-width: 420px) {
  .sayi-buyuk { font-size: 30px; }
}

@media print {
  .basluk, .menu-tus, .teklif-form, .hero-tuslar, .is-tuslar { display: none; }
  body { background: #fff; }
}

/* ══════════ ASKI — akordeon ══════════ */
.aski-liste { margin-top: var(--b5); }
.aski-kayit {
  border: 1px solid var(--dl-line); background: var(--dl-paper-2); margin-bottom: var(--b3);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.aski-kayit[open] { border-color: var(--dl-cobalt-lt); box-shadow: var(--shadow-md); }
.aski-kayit summary {
  list-style: none; cursor: pointer; padding: var(--b4) var(--b5);
  display: grid; grid-template-columns: 1fr auto; gap: var(--b3); align-items: start;
}
.aski-kayit summary::-webkit-details-marker { display: none; }
.aski-baslik {
  grid-column: 1; display: block; font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--dl-ink);
}
.aski-ozet { grid-column: 1; display: block; font-size: 14.5px; line-height: 1.5; margin-top: 7px; }
.aski-tus {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--dl-ink); border-radius: var(--r-pill); padding: 5px 11px; color: var(--dl-ink);
}
.aski-kayit[open] .aski-tus { background: var(--dl-ink); color: var(--dl-paper); }
.aski-govde { padding: 0 var(--b5) var(--b5); }
.aski-govde p { font-size: 15.5px; line-height: 1.75; margin: 0 0 var(--b3); }
.aski-govde p:last-child { margin-bottom: 0; }
.aski-kaynak {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px;
  color: var(--dl-muted); border-top: 1px solid var(--dl-line);
  padding-top: var(--b3); margin-top: var(--b4) !important;
}
.aski-cagri { margin-top: var(--b5); border-top: 3px solid var(--dl-cobalt); background: var(--dl-paper-2); padding: var(--b5); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.aski-cagri h3 { font-family: 'Oswald', system-ui, sans-serif; font-weight: 700; font-size: 15.5px; color: var(--dl-ink); }
.aski-cagri p { font-size: 15.5px; line-height: 1.75; margin: var(--b3) 0 0; }
@media (max-width: 640px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  /* Alt çubuk lacivert zeminde soluk yazıydı; sayfanın koyu bölümleriyle
     aynı renkte olduğu için gözden kaçıyordu. Her iki eylem kendi rengine
     boyandı: arama kobalt, WhatsApp yeşil — sitede zaten o iki renk
     kullanılıyor, yeni renk eklenmedi. */
  .mobil-iletisim {
    position: fixed; z-index: 60; inset: auto 0 0;
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 58px; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 18px rgba(16, 26, 60, .28);
  }
  .mobil-iletisim a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 58px; color: #fff;
    font-family: 'IBM Plex Mono', monospace; font-size: 15px;
    font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  }
  .mobil-iletisim a:first-child { background: var(--dl-cobalt); }
  .mobil-iletisim a:last-child  { background: #1FA463; }
  .mobil-iletisim a:active { filter: brightness(.92); }
  .mobil-iletisim a:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
  .aski-kayit summary { grid-template-columns: 1fr; }
  .aski-tus { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--b3); }
}

/* ══════════ MOBIL OKUNURLUK ══════════
   Mono katmani kucuk punto + genis harf araligi ile yazilmis. Masaustunde
   sorun degil; telefonda siliniyor. 640px altinda punto buyur, aralik kisilir.
   Kontrast ayrica --dl-muted uzerinden yukseltildi. */
@media (max-width: 640px) {
  .etiket,
  .kaynak-not,
  .sayi-kaynak,
  .mono,
  .rozet,
  .olcum-not,
  .olcum-bas .etiket,
  .gunluk-tarih,
  .aski-kaynak,
  .telif {
    font-size: 13.5px !important;
    letter-spacing: .07em !important;
    line-height: 1.6;
  }
  /* dugme ve etiket yazilari da 11px'ti; mobilde okunmuyordu */
  .tus-kucuk, .tus-murekkep, .alan label { font-size: 13.5px !important; letter-spacing: .07em !important; }
  .aski-tus { font-size: 13px !important; letter-spacing: .08em !important; }
  .sayi-ad { font-size: 15.5px; }
  .olcum-ad { font-size: 13.5px; }
  .hizmet li { font-size: 13.5px; }

  /* dokunma hedefleri: 40 -> 44 */
  .tus-kucuk { min-height: 44px; display: inline-flex; align-items: center; }
  .menu-tus  { min-height: 44px; min-width: 44px; }
  .gezinti a { min-height: 44px; display: flex; align-items: center; }
}

/* Referans kartinda rozetlerin ne oldugunu soyleyen etiket */
.rozet-baslik { margin: var(--b4) 0 var(--b2); color: var(--dl-muted); }

/* ══════════ MOBILDE ISLETME ADI ══════════
   Uzun referans listesinde kaydiran gozun ismi yakalamasi icin: mono yazi,
   daha buyuk punto, ustunde kalin ayrac. 640px altinda gecerli. */
@media (max-width: 640px) {
  .is-bas h3 {
    font-size: 23px;
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--dl-ink);
    border-top: 3px solid var(--dl-ink);
    padding-top: var(--b4);
    margin-top: var(--b2);
  }
  .is-alt { font-size: 14.5px; }
}

/* İletişim bloğu: aynı numara iki satırda tekrar ediyordu. Numara yerine
   iki eylem düğmesi — biri arama, biri WhatsApp. */
.iletisim-tuslar { display: flex; gap: 12px; flex-wrap: wrap; padding: var(--b3) 0; }
.iletisim-tuslar a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 20px; text-decoration: none; min-height: 44px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; transition: background 120ms, color 120ms, box-shadow 120ms;
}
/* .teklif a { color:var(--dl-cobalt-lt) } kurali dugmelerin kendi rengini
   eziyordu; ozgulluk yukseltildi. */
.teklif .iletisim-tuslar a.tus-ara,
.iletisim-tuslar a.tus-ara { background: var(--dl-cobalt); color: #fff; }
.teklif .iletisim-tuslar a.tus-ara:hover,
.iletisim-tuslar a.tus-ara:hover { background: #FFFFFF; color: var(--dl-ink); box-shadow: var(--shadow-sm); }
.teklif .iletisim-tuslar a.tus-wa,
.iletisim-tuslar a.tus-wa { background: #1FA463; color: #FFFFFF; }
.teklif .iletisim-tuslar a.tus-wa:hover,
.iletisim-tuslar a.tus-wa:hover { background: #17834E; color: #FFFFFF; box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .iletisim-tuslar a { flex: 1 1 100%; justify-content: center; } }

/* Basliktaki 'Ilk inceleme' dugmesi: .gezinti a kurali dugmenin kendi rengini
   eziyordu (yazi #3A3A33, zemin #0A0A0A -> kontrast 1.4, okunmuyor).
   Dugme menunun icinde de kendi rengini korur. */
.gezinti a.tus-murekkep,
.gezinti a.tus-murekkep:link,
.gezinti a.tus-murekkep:visited { color: #fff; }
.gezinti a.tus-murekkep:hover { color: #fff; background: var(--dl-ink); }


/* ══════════ FORM BAL KÜPÜ ══════════
   Netlify'ın netlify-honeypot alanı. Ekran okuyucudan da klavyeden de
   çıkarılır; yalnız otomatik gönderim yapan betikler doldurur. */


.dar h2.bolum-baslik { margin-top: var(--b8); }
.dar h3 { margin-top: var(--b5); margin-bottom: var(--b2); font-size: 1.05rem; }

/* Vaka özetleri: Sorun / yapılan işlem / doğrulama / mevcut aşama */
.vaka-liste { display:flex; flex-direction:column; gap:var(--b6); margin-top:var(--b5); }
.vaka { border-top:3px solid var(--dl-cobalt); background:var(--dl-paper-2); padding:var(--b5); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.vaka h3 { font-family:'Oswald', system-ui, sans-serif; font-weight:700; font-size:19px; margin:0 0 var(--b3); }
.vaka p { margin:0 0 var(--b2); font-size:15.5px; line-height:1.65; }
.vaka p:last-child { margin-bottom:0; color:var(--dl-muted); }
.vaka code { font-family:'IBM Plex Mono',monospace; font-size:13.5px; background:var(--dl-line); padding:1px 5px; }

/* ═══════════ SİSTEM ÇARKI ═══════════
   Üç hizmeti ayrı kart yerine tek halka olarak gösterir: "üç ayrı iş değil,
   üç parça" cümlesinin görsel karşılığı.

   İlerlemeli geliştirme: bu blok yalnız JavaScript çarkı kurduğunda görünür.
   Betik yüklenmezse .hizmet-ozet ızgarası olduğu gibi kalır ve hiçbir içerik
   kaybolmaz. */

.cark-alan { display: none; }
.cark-acik .cark-alan { display: grid; }
.cark-acik .hizmet-ozet { display: none; }

.cark-alan {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--b9); align-items: center; margin-top: var(--b8);
}

.cark-cizim { width: 100%; max-width: 560px; margin-inline: auto; display: block; overflow: visible; }
.cark-alan { position: relative; }
.cark-panel { position: relative; z-index: 1; }
/* Odak çerçevesi yalnız klavye içindir ve daireye oturur: kare çerçeve
   çarkın etrafında kutu gibi duruyordu. */
/* Odak çerçevesi yalnız klavyeyle gezen için. Dokunmatikte iki kez
   dokunmak dilimi odaklıyor ve etrafına kare çerçeve çiziliyordu; dilimler
   tabindex taşıdığı için dış çerçeveyi kapatmak yetmedi, iç öğeler de
   kapatıldı. Klavye kullanıcısının gördüğü :focus-visible halkası duruyor. */
/* Dilimlerde odak halkası HİÇ çizilmiyor. Klavye gezinmesi çarkın kendisi
   üzerinden ok tuşlarıyla yapılıyor, tek tek dilime geçilmiyor; dolayısıyla
   dilimde görünür odağa ihtiyaç yok. Dokunmatikte iki kez dokunmak dilimi
   odaklıyor ve etrafına kare çerçeve çiziliyordu — sadece :focus kapatmak
   yetmedi, programatik odak da :focus-visible sayılıyor. */
.cark-cizim:focus,
.cark-dilim:focus, .cark-dilim:focus-visible,
.cark-uzanti:focus, .cark-uzanti:focus-visible { outline: none; }
.cark-cizim:focus-visible {
  outline: 3px solid var(--dl-cobalt); outline-offset: 8px;
  border-radius: 50%;
}

.cark-iz { stroke: #EDF0FA; }

/* Dilimler artık kalemle değil DOLU yolla çiziliyor (bkz. serit() in script.js):
   kalemin kalınlığı sabit ve ucu yuvarlaktır, sivri uç ancak dolu şeritle olur.
   Bu yüzden burada stroke-width yok, opacity ve dönüşüm var. */
/* Dilimler DOLU şekil (bkz. dilimYolu() in script.js) — kalem değil.
   Referans WebFX çarkındaki dört köşesi yuvarlatılmış halka dilimi böyle
   elde ediliyor; stroke ile ya da sivrilen uçla mümkün değil. */
.cark-dilim {
  cursor: pointer;
  opacity: .55;
  transform-origin: 186px 190px;
  transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.7,.3,1);
}
.cark-dilim:hover { opacity: .82; }
.cark-dilim.secili { opacity: 1; transform: scale(1.035); }

/* Yön okları halkanın DIŞINDA, çevrede dönen bir yörüngede.
   Dilimin gövdesine oturduklarında durağan bir süs gibi okunuyorlardı;
   çarkın döndüğü hissini çevrede dolaşan hareket veriyor. */
.cark-yorunge { pointer-events: none; }
.cark-yorunge-iz {
  stroke: #C9D2EA; stroke-width: 1;
  stroke-dasharray: 2 9; opacity: .55;
}
.cark-yorunge-ok { fill: #8C99BD; }
.cark-donen {
  transform-origin: 186px 190px;
  animation: ckDonus 26s linear infinite;
}
@keyframes ckDonus { to { transform: rotate(360deg); } }

/* Uzantı: her dilimin kendi çizgisi var, yalnız AKTİF olan açılır. */
.cark-uzanti { opacity: 0; transition: opacity 260ms ease; }
.cark-uzanti.acik { opacity: 1; }
.cark-uzanti-cizgi {
  stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
}
.cark-uzanti.acik .cark-uzanti-cizgi { animation: ckCizgi 420ms ease-out forwards; }
@keyframes ckCizgi { to { stroke-dashoffset: 0; } }
.cark-uzanti-alan { opacity: 0; transition: opacity 300ms ease; }
.cark-uzanti.acik .cark-uzanti-alan { opacity: 1; }

.cark-etiket {
  font-family: 'Oswald', system-ui, sans-serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: .08em; pointer-events: none; text-transform: uppercase;
}

.cark-orta-alt {
  font-family: 'IBM Plex Mono', monospace; font-size: 13.5px;
  fill: var(--dl-muted); text-anchor: middle; letter-spacing: .16em;
}
.cark-madalyon { pointer-events: none; }

.cark-panel {
  background: var(--dl-paper-2); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); border-top: 3px solid var(--dl-cobalt);
  padding: var(--b7); min-height: 280px; position: relative; z-index: 1;
}
.cark-panel.cark-renk-0 { border-top-color: #207DE9; }
.cark-panel.cark-renk-1 { border-top-color: #00BFA0; }
.cark-panel.cark-renk-2 { border-top-color: #6B7CFF; }
.cark-panel h3 { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0; }
.cark-panel p { font-size: 15px; line-height: 1.6; margin: var(--b3) 0 0; }
.cark-panel ul { margin: var(--b4) 0 0; padding: 0; list-style: none; }
.cark-panel li {
  font-family: 'IBM Plex Mono', monospace; font-size: 13.5px;
  color: var(--dl-muted); padding: 4px 0;
}
.cark-panel li::before { content: "— "; color: var(--dl-cobalt-tx); }
.cark-panel .tus-kucuk {
  display: inline-flex; align-items: center; margin-top: var(--b5); min-height: 44px;
}

.cark-panel.yenilendi { animation: carkBelir 220ms ease-out; }
@keyframes carkBelir {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cark-panel.yenilendi { animation: none; }
  .cark-dilim, .cark-uzanti, .cark-uzanti-alan { transition: none; }
  .cark-donen { animation: none; }
  .cark-dilim.secili { transform: none; }
  /* Uzantı çizilmez ama GÖRÜNÜR kalır: bilgi taşıyor, süs değil. */
  .cark-uzanti.acik .cark-uzanti-cizgi { animation: none; stroke-dashoffset: 0; }
}

/* Dar ekranda halka üstte, panel altta. */
@media (max-width: 880px) {
  .cark-alan { grid-template-columns: 1fr; gap: var(--b6); }
  .cark-cizim { max-width: 380px; }
  .cark-panel { min-height: 0; padding: var(--b6); }
  /* Dar ekranda panel çarkın ALTINDA. Uzantı çizgisi sağa doğru uzandığı
     için boşluğa sarkıyordu (390 px görüntüsünde görüldü). Panel zaten
     hemen altta olduğundan uzantıya gerek yok. */
  .cark-uzantilar { display: none; }
}

/* ═══════════ BÖLÜM VE BAŞLIK HİYERARŞİSİ ═══════════
   Sorun (ölçüldü, 27 Ağustos 2026): sayfada bir bölümün nerede bitip
   ötekinin nerede başladığı görünmüyordu. Üç sebep vardı:

   1. Dönüşümlü zeminler #FAFBFF ve #FFFFFF idi — aradaki fark gözle
      seçilmiyor, yani dönüşüm hiç olmamış gibi duruyordu.
   2. Bölüm başlığı en fazla 28px'ti; gövde metni 16px olduğu için başlık
      "başlık" gibi okunmuyordu.
   3. İşletme kartları beyaz zemin üstünde beyazdı; bir işletmeden ötekine
      geçiş yalnız 1px gölgeyle belliydi.

   Aşağısı bu üçünü sırayla karşılıyor. Renk sistemi değişmiyor, yalnız
   var olan tokenler daha belirgin kullanılıyor. */

/* 1 — zemin farkı görünür olsun */
.bolum-alt {
  background: #EEF1FA;
  border-block: 1px solid #DFE4F2;
}

/* 2 — başlık gerçekten başlık olsun; üstündeki etiket ona bağlansın */
.bolum-baslik {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-top: var(--b2);
}
.etiket {
  color: var(--dl-cobalt-tx);
  font-weight: 600;
}
/* Etiketin önüne kısa bir çizgi: bölümün başladığı yeri işaretler. */
.bolum > .kap > .etiket::before,
.sayfa-baslik > .kap > .etiket::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; margin-right: var(--b2);
  background: var(--dl-cobalt);
}

/* 3 — bir işletmeden ötekine geçtiğin belli olsun */
.is-liste { gap: var(--b7); }
.is {
  border: 1px solid var(--dl-line);
  border-left: 4px solid var(--dl-cobalt);
  box-shadow: var(--shadow-md);
}
.is-bas h3 {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 600;
  letter-spacing: -.01em;
}

/* Bölümler arası nefes: üst üste binen iki bölüm birbirine yapışmasın. */
.bolum { padding-block: calc(var(--b10) + var(--b4)); }

@media (max-width: 720px) {
  .bolum { padding-block: var(--b9); }
  .is { border-left-width: 3px; }
}

/* Birlikte çalışılan süre — işletme adının hemen altında, güven veren
   tek satır. Rakam veri.js'teki başlangıç tarihinden hesaplanır. */
.is-sure {
  display: inline-block; margin: var(--b2) 0 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 13.5px;
  color: var(--dl-kehribar); font-weight: 600;
  border: 1px solid var(--dl-kehribar); border-radius: var(--r-pill);
  padding: 3px 12px; letter-spacing: .02em;
}


/* ═══════════ MENÜ HER GENİŞLİKTE HAMBURGER ═══════════
   Bağlantılar başlık şeridinde yan yana durmuyor artık; hepsi hamburgerin
   arkasında. Sebep: altı bağlantı şeridi dolduruyor, telefon ve çağrı
   düğmesi arada kayboluyordu.

   "İlk inceleme" düğmesi menünün DIŞINA alındı: sayfadaki en değerli
   hareket hamburgerin arkasına saklanmamalı. */

.menu-tus { display: block; }

.gezinti {
  position: absolute; inset: 100% 0 auto 0;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--dl-paper);
  border-bottom: 1px solid var(--dl-line);
  box-shadow: var(--shadow-md);
  padding: var(--b3) var(--yan) var(--b5);
  display: none;
  z-index: 40;
}
.gezinti.acik { display: flex; }
.gezinti > a {
  padding: var(--b3) 0;
  border-top: 1px solid var(--dl-line);
  font-size: 16px;
}
.gezinti > a:first-child { border-top: 0; }

.basluk { position: relative; }
/* Hamburger sağ gruba itilir: logo solda, menü + çağrı + telefon sağda. */
.basluk-ic { gap: var(--b3); justify-content: flex-start; }
.baslik-tus { margin-left: auto; order: 2; }
.baslik-tel { order: 3; }
.menu-tus { order: 4; }

/* Dar ekranda başlık kalabalıklaşmasın: çağrı düğmesi kısalır, telefon
   numarası zaten alt şeritteki hızlı iletişim çubuğunda duruyor. */
@media (max-width: 760px) {
  /* Dar ekranda başlıkta logo + hamburger kalır. Çağrı düğmesi ve telefon
     çıkarıldı: 390 px'te düğme logonun üstüne biniyor, hamburger de ekranın
     dışına taşıyordu. Aynı iki eylem sayfanın altındaki sabit çubukta zaten
     duruyor (Ara / WhatsApp), yani hiçbir şey kaybolmuyor. */
  .baslik-tus { display: none; }
  .baslik-tel { display: none; }
  .menu-tus { margin-left: auto; }
}

/* ═══════════ İLK İNCELEME FORMU ═══════════
   Rakiplerin 14'ünde form var, bizde yoktu. Form, mesai dışında gelen
   talebi yakalayan tek kanal.

   Telefon ZORUNLU, e-posta hiç sorulmuyor: bu işte dönüş telefonla oluyor.
   En çok işe yarayan bilgiyi isteğe bağlı bırakmak, formu süs yapar.

   Gönderim Netlify Forms üzerinden; sunucu tarafı yok. sirket-adi alanı
   bot tuzağı: insan görmez, dolduran bot elenir. */

.teklif-sag { min-width: 0; }
.form {
  background: var(--dl-paper-2); border-radius: var(--r-lg);
  padding: var(--b7); box-shadow: var(--shadow-md); color: var(--dl-body);
}
.form-baslik {
  font-family: 'Oswald', system-ui, sans-serif; font-weight: 600;
  font-size: 24px; line-height: 1.2; color: var(--dl-ink); margin: 0;
}
.form-alt { font-size: 15px; margin: var(--b2) 0 var(--b5); color: var(--dl-muted); }

.gizli-alan { position: absolute; left: -9999px; }

.form-satir { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--b4); }
.form-satir label {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dl-muted);
}
.form-satir label span { color: var(--dl-cobalt-tx); }
.form-satir input, .form-satir select, .form-satir textarea {
  font-family: inherit; font-size: 16px; color: var(--dl-ink);
  background: var(--dl-paper); border: 1.5px solid var(--dl-line);
  border-radius: var(--r-sm); padding: 11px 13px; width: 100%;
  min-height: 46px;                       /* dokunma hedefi */
  transition: border-color 120ms, box-shadow 120ms;
}
.form-satir textarea { min-height: 92px; resize: vertical; }
.form-satir input:focus-visible,
.form-satir select:focus-visible,
.form-satir textarea:focus-visible {
  outline: none; border-color: var(--dl-cobalt);
  box-shadow: 0 0 0 3px rgba(38, 71, 255, .16);
}
.form-satir input::placeholder, .form-satir textarea::placeholder { color: #9AA0BE; }

.form-gonder { width: 100%; justify-content: center; margin-top: var(--b2); border: 0; cursor: pointer; }
.form-kvkk { font-size: 13px; color: var(--dl-muted); margin: var(--b4) 0 0; line-height: 1.55; }

@media (max-width: 900px) {
  .form { padding: var(--b6); }
}

/* ═══════════ ÇARK HERO'DA ═══════════
   Çark ilk ekrana taşındı; hero paragrafının yerini aldı. Paragraf işi
   anlatmaya çalışıyordu, çark aynı işi göstererek anlatıyor ve tıklanabilir.

   Sistem bölümü çark oradan çıkınca içeriksiz kalıyor, bu yüzden JavaScript
   çalıştığında gizleniyor. Çalışmazsa üç hizmet kartı orada durmaya devam
   eder — içerik hiçbir durumda kaybolmuyor. */

.hero-cark { flex: 1 1 820px; min-width: 0; }
.cark-heroda #sistemBolumu { display: none; }

/* Hero içindeki çark koyu zeminde: panel beyaz kalır, halka aynı. */
/* Geniş ekranda panel çarkın SAĞINDA durur; bağlantı çizgisi de bu düzen
   için tasarlandı, orada görünür kalır. Dar ekranda panel altına iner ve
   çizgi boşluğa gideceği için gizlenir. */
.hero-cark .cark-alan {
  /* Çark SVG'sinin görüş alanı bağlantı çizgisini de kapsıyor; halkanın
     okunur büyüklükte durması için sütun geniş tutuluyor. */
  grid-template-columns: minmax(0, 460px) minmax(320px, 1fr);
  gap: var(--b3); margin-top: 0; align-items: center;
}
.hero-cark .cark-cizim { max-width: 460px; }

@media (max-width: 1180px) {
  .hero-cark .cark-alan { grid-template-columns: 1fr; }
  .hero-cark .cark-cizim { max-width: 340px; }
  .hero-cark .cark-uzantilar { display: none; }
}
.hero-cark .cark-panel { padding: var(--b6); min-height: 0; }
.hero-cark .cark-iz { stroke: rgba(255,255,255,.10); }
.hero-cark .cark-orta-alt { fill: var(--dl-muted); }

@media (max-width: 900px) {
  /* Dar ekranda hero dikey ortalanınca metinle çark arasında büyük bir
     boşluk kalıyordu; içerik yukarı toplanıyor. */
  .hero-ic { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  /* .hero-metin dikey düzende de esniyordu (flex: 1 1 520px) ve kalan
     yüksekliği kendine alıp çarkı aşağı itiyordu. */
  .hero-metin { flex: 0 0 auto; }
  .hero-ic { gap: var(--b5); }
  .hero-cark { flex: 0 0 auto; margin-top: var(--b4); }
  .hero-cark .cark-cizim { max-width: 250px; }
  .hero { min-height: 0; padding-block: var(--b9) var(--b8); }
}

.ust-bosluk{margin-top:26px}