/* 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-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: 16px;
  line-height: 1.6;
  -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: 11px; 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: 11px; 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: 15px; letter-spacing: -.01em;
}
.logo-alt {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
  font-size: 8px; letter-spacing: .46em; 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-ink); 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: 11px; 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-paper);
}

/* ═══════════ 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); }

.gezinti { display: flex; align-items: center; justify-content: flex-end; gap: var(--b3); font-size: 12px; }
.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; }
.baslik-tel { flex: none; font-size: 11px; white-space: nowrap; border-left: 1px solid var(--dl-line); padding-left: var(--b3); }

.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: .06em; text-transform: uppercase;
  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: 12px; }

.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: 12px; 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: 1 1 520px; 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: 17px; 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: 11px; 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: 13px; 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: 15px; letter-spacing: 0; margin-left: 5px; color: var(--dl-muted); }
.sayi-ad { font-size: 14px; margin-top: var(--b2); line-height: 1.45; }
.sayi-kaynak {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em;
  color: var(--dl-muted); margin-top: var(--b2);
}
.kaynak-not {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; 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: 14px; 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: 12px;
  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: 14px; 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: 11px; 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: 14px; 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: 11px; 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: 12px; color: var(--dl-muted); margin-left: 4px; letter-spacing: 0; }
.olcum-ad { font-size: 13px; 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: 11px; letter-spacing: .05em;
  color: var(--dl-muted);
}
.olcum-bos {
  padding: var(--b6) var(--b4); font-size: 14px; 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: 11px;
  letter-spacing: .2em; color: var(--dl-cobalt-tx); margin-bottom: var(--b3);
}
.adim h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.adim p { font-size: 14px; 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: 11px; line-height: 1.55;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dl-cobalt-tx); margin: 0;
}
.gunluk-kayit h3 { font-size: 18px; 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: 14px; 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: 18px; font-weight: 600; }
.kisi .rol {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dl-cobalt-tx); margin: var(--b1) 0 0;
}
.kisi p { font-size: 14px; 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: 14px;
}
.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: 11px; 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: 15px;
}
.alan input:focus, .alan textarea:focus { border-color: var(--dl-cobalt-lt); }
.alan textarea { resize: vertical; }
.hata { font-size: 13px; 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: 12px; 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: 13px; 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: 11px; letter-spacing: .2em; text-transform: uppercase; color: #B9B7AE; margin: 0; }

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

@media (max-width: 900px) {
  :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: 17px; line-height: 1.35; color: var(--dl-ink);
}
.aski-ozet { grid-column: 1; display: block; font-size: 14px; 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: 10px;
  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: 15px; 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: 11px;
  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: 17px; color: var(--dl-ink); }
.aski-cagri p { font-size: 15px; line-height: 1.75; margin: var(--b3) 0 0; }
@media (max-width: 640px) {
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .mobil-iletisim {
    position: fixed; z-index: 60; inset: auto 0 0;
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 54px; padding-bottom: env(safe-area-inset-bottom);
    background: var(--dl-ink); border-top: 1px solid var(--dl-paper);
  }
  .mobil-iletisim a {
    display: flex; align-items: center; justify-content: center; min-height: 54px;
    color: var(--dl-paper); font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
    font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  }
  .mobil-iletisim a + a { border-left: 1px solid #2E3968; }
  .mobil-iletisim a:focus-visible { outline-color: var(--dl-cobalt); outline-offset: -4px; }
  .mobil-iletisim a:hover { color: var(--dl-cobalt); }
  .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: 12.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: 12.5px !important; letter-spacing: .07em !important; }
  .aski-tus { font-size: 11.5px !important; letter-spacing: .08em !important; }
  .sayi-ad { font-size: 15px; }
  .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: 14px; }
}

/* İ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: 13px; 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:15px; 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:13px; 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. */
.cark-cizim:focus { 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: 13px; font-weight: 600;
  letter-spacing: .08em; pointer-events: none; text-transform: uppercase;
}

.cark-orta-alt {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  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: 14.5px; 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: 12px;
  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: 12.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;
}