/* İletişim (TASARIM-PLANI 3.7; metinler kaynak/metin/iletisim.md, ortak.md > form). Sahibi P12. WebGL yok.
   İmza "İki ofis, bir hat": tek hat şeması dilinde gelen hat, bara ve iki fider. Hat talep formundan gelir (masaüstünde
   form kartının kenarına değer), baraya bağlanır, fiderler iki ofis kartına gider. Çizgiler CSS'tir, kartlar metindir;
   JS'siz, WebGL'siz ve hareket azaltmada aynı okunur. Yalnız sunucu başarı yanıtında iletisim.js bölüme data-enerji koyar:
   0,9 sn'lik tek altın darbe (gelen hat → bara → fiderler) ve kısa "Ulaştı" damgası. Hata durumunda hat yanmaz.
   Yalnız token değişkenleri; yeni renk yok. */

.ilt-ana {
  --ilt-bosluk: var(--space-16);   /* sütun aralığı: gelen hat bu aralığı geçip form kartına değer */
  --sema-pay: 96px;                /* kartlarla bara arasındaki şerit (masaüstünde sağda) */
  --bara-x: 32px;                  /* baranın şeridin dış kenarına uzaklığı */
  --dugum-bosluk: var(--space-4);  /* iki ofis kartı arası */
  --hat-renk: var(--graphite-400);
  --hat-enerji: var(--olcu-enerji);
}
#icerik > .ilt-ana { padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 120px); }
.ilt-izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ilt-bosluk); align-items: start; }
.ilt-sol { display: grid; gap: var(--space-10); min-width: 0; }
.ilt-sag { min-width: 0; }
/* Hat şeması formu doldururken görünür kalsın: geniş (≥ 1000) ve yeterince yüksek (≥ 700) pencerede sütun yapışkandır; 860 px altında
   sütun ölçekli (sıkı) yerleşimle sığdırılır. Daha kısa ya da dar pencerede yapışkanlık yoktur; başarıda hat, gönder düğmesinin
   üstündeki mini tek hatla gösterilir (iletisim.js aynı koşulu kullanır: ANA_HAT). */
@media (min-width: 1000px) and (min-height: 700px) { .ilt-sol { position: sticky; top: 96px; } }

/* ---------- 2 · Ofislerimiz ve hat ---------- */
.ilt-ofisler { display: grid; }
.ilt-lead { margin-top: var(--space-4); max-width: 40ch; font-size: 17px; line-height: 28px; color: var(--ink-secondary); }
.ilt-sema { position: relative; margin-top: var(--space-8); padding-right: var(--sema-pay); }
.ilt-dugumler { display: grid; grid-auto-rows: 1fr; gap: var(--dugum-bosluk); margin: 0; padding: 0; list-style: none; }
.ilt-ofis { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.ilt-ofis-ad { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ilt-ofis-yer { display: block; font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }
.ilt-adres { font-style: normal; font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
/* Düğüm: fiderin karta bağlandığı nokta */
.ilt-ofis::after { content: ""; position: absolute; z-index: 2; top: 50%; right: -6px; width: 12px; height: 12px; margin-top: -6px; box-sizing: border-box; border: 2px solid var(--graphite-500); border-radius: 50%; background: var(--surface-card); }

/* Çizgiler: dinlenmede grafit; ::before enerji dolgusu (başlangıçta ölçek 0, enerjilenince 1) */
.ilt-fider, .ilt-bara, .ilt-gelen { position: absolute; display: block; background: var(--hat-renk); }
.ilt-fider { top: 50%; left: 100%; width: calc(var(--sema-pay) - var(--bara-x)); height: 2px; margin-top: -1px; }
.ilt-bara { right: var(--bara-x); top: calc((100% - var(--dugum-bosluk)) / 4); bottom: calc((100% - var(--dugum-bosluk)) / 4); width: 6px; margin-right: -3px; border-radius: 3px; background: var(--graphite-700); }
.ilt-gelen { top: 50%; left: calc(100% - var(--bara-x)); width: calc(var(--bara-x) + var(--ilt-bosluk)); height: 2px; margin-top: -1px; }
.ilt-fider::before, .ilt-bara::before, .ilt-gelen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hat-enerji); transform: scaleX(0); transform-origin: 100% 50%; }
.ilt-bara::before { background: var(--gold-600); transform: scaleY(0); transform-origin: 50% 50%; }
/* Kesici (kare) ve gelen hattın form tarafındaki bağlantı ucu */
.ilt-kesici { position: absolute; z-index: 1; left: 50%; top: 50%; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--graphite-600); border-radius: 2px; background: var(--surface-card); transform: translate(-50%, -50%); }
.ilt-uc { position: absolute; z-index: 1; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; box-sizing: border-box; border: 2px solid var(--graphite-500); border-radius: 50%; background: var(--surface-card); }

.ilt-gelen-etiket { display: none; }

/* Damga: yer ayrılmış, başarıya kadar görünmez. Kısa tutulur ("Ulaştı" ve gönderim saati): tam cümle durum kutusundadır ve ekran okuyucu
   durumu oradan okur (damga aria-hidden), böylece aynı cümle iki kez görünmez. */
.ilt-damga, .ilt-mini-damga { position: relative; justify-self: end; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; margin-top: var(--space-5); padding: 6px 18px 6px 8px; border: 1.5px solid var(--olcu-enerji); border-radius: var(--radius-full); background: var(--gold-50); font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); visibility: hidden; scroll-margin-top: 96px; }
.ilt-damga-saat { padding-left: var(--space-3); border-left: 1.5px solid var(--gold-200); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-secondary); }
.ilt-damga-saat:empty { display: none; }
/* Onay halkası (mühür taklidi değil): halka ve tik */
.ilt-damga::before, .ilt-mini-damga::before { content: ""; flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--gold-600); border-radius: 50%; background: var(--surface-card); }
.ilt-damga::after, .ilt-mini-damga::after { content: ""; position: absolute; left: 16px; top: 50%; width: 11px; height: 6px; margin-top: -5px; border-left: 2.5px solid var(--gold-600); border-bottom: 2.5px solid var(--gold-600); transform: rotate(-45deg); }

/* Kısa pencerede (700–859 px) şema ve damga yapışkan sütuna sığsın: boşluk ve yazı ölçeği küçülür (içerik aynı) */
@media (min-width: 1000px) and (min-height: 700px) and (max-height: 859px) {
  .ilt-ana { --dugum-bosluk: var(--space-3); --sema-pay: 84px; }
  .ilt-sol { gap: var(--space-5); top: 92px; }
  .ilt-ofisler .h2 { font-size: 32px; line-height: 1.1; }
  .ilt-lead { margin-top: var(--space-2); font-size: 15px; line-height: 22px; }
  .ilt-sema { margin-top: var(--space-4); }
  .ilt-ofis { gap: 2px; padding: var(--space-3) var(--space-5); }
  .ilt-ofis-ad { font-size: 17px; line-height: 22px; }
  .ilt-ofis-yer { font-size: 14px; line-height: 20px; }
  .ilt-adres { font-size: 14px; line-height: 21px; }
  .ilt-damga { min-height: 40px; margin-top: var(--space-3); }
  .ilt-kanallar { gap: var(--space-1) var(--space-6); padding-top: var(--space-4); }
  .ilt-kanal dd { font-size: 17px; line-height: 24px; }
  .ilt-kanal a { min-height: 40px; }
}

/* ---------- Mini tek hat: dar (< 1000 px) ya kısa (< 700 px) pencerede başarı anı gönder düğmesinin üstünde ----------
   Ana şema bu pencerede ekran dışında kalabildiğinden, gelen hat → bara → 2 fider → 2 ofis (120 px) burada çizilir; darbe
   düğmenin hemen üstünden geçer. Başarıya kadar yer kaplamaz (display: none); iletisim.js data-goster ve data-enerji verir. */
.ilt-mini { display: none; position: relative; max-width: 460px; margin: var(--space-4) 0 var(--space-3); }
@media (max-width: 999px), (max-height: 699px) { .ilt-mini[data-goster] { display: block; } }
.ilt-mini-hat { position: absolute; background: var(--hat-renk); }
.ilt-mini-hat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hat-enerji); transform: scaleX(0); transform-origin: 0 50%; }
.ilt-mini-gelen { left: 0; top: 47px; width: 34%; height: 2px; }
.ilt-mini-bara { left: 34%; top: 22px; width: 6px; height: 54px; margin-left: -3px; border-radius: 3px; background: var(--graphite-700); }
.ilt-mini-bara::before { background: var(--gold-600); transform: scaleY(0); transform-origin: 50% 50%; }
.ilt-mini-fider { left: 34%; width: 22%; height: 2px; }
.ilt-mini-fider--1 { top: 21px; }
.ilt-mini-fider--2 { top: 74px; }
.ilt-mini-dugum { position: absolute; left: 56%; transform: translateY(-50%); padding: 3px 12px 3px 10px; border: 1.5px solid var(--graphite-500); border-radius: var(--radius-full); background: var(--surface-card); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ilt-mini-dugum--1 { top: 22px; }
.ilt-mini-dugum--2 { top: 75px; }
.ilt-mini-damga { justify-self: auto; margin: 100px 0 0; }
.ilt-mini[data-enerji] :is(.ilt-mini-gelen, .ilt-mini-fider)::before { transform: scaleX(1); }
.ilt-mini[data-enerji] .ilt-mini-bara::before { transform: scaleY(1); }
.ilt-mini[data-enerji] .ilt-mini-gelen::before { animation: ilt-dol-x 300ms cubic-bezier(.45, 0, .55, 1) backwards; }
.ilt-mini[data-enerji] .ilt-mini-bara::before { animation: ilt-dol-y 250ms linear 300ms backwards; }
.ilt-mini[data-enerji] .ilt-mini-fider::before { animation: ilt-dol-x 350ms var(--ease-etiket) 550ms backwards; }
.ilt-mini[data-enerji] .ilt-mini-dugum { border-color: var(--gold-600); background: var(--gold-50); transition: border-color 150ms linear 880ms, background-color 150ms linear 880ms; }
@media (prefers-reduced-motion: reduce) { .ilt-mini[data-enerji] .ilt-mini-dugum { transition: none; } }
html.hareket-yok .ilt-mini[data-enerji] .ilt-mini-dugum { transition: none; }

/* ---------- Enerjilenme: gelen hat 0–300 ms → bara 300–550 ms → fiderler 550–900 ms; damga 600 ms'te iner (darbenin son üçte biriyle örtüşür; başarıdan 1 sn sonra damga görünür) ---------- */
@keyframes ilt-dol-x { from { transform: scaleX(0); } }
@keyframes ilt-dol-y { from { transform: scaleY(0); } }
@keyframes ilt-damga { from { opacity: 0; transform: scale(1.15) rotate(-4deg); } }
@keyframes ilt-isil { from { box-shadow: 0 0 0 0 var(--gold-200); } 40% { box-shadow: 0 0 0 5px var(--gold-200); } to { box-shadow: 0 0 0 0 transparent; } }
[data-enerji] .ilt-gelen::before, [data-enerji] .ilt-fider::before { transform: scaleX(1); }
[data-enerji] .ilt-bara::before { transform: scaleY(1); }
[data-enerji] .ilt-gelen::before { animation: ilt-dol-x 300ms cubic-bezier(.45, 0, .55, 1) backwards; }
[data-enerji] .ilt-bara::before { animation: ilt-dol-y 250ms linear 300ms backwards; }
[data-enerji] .ilt-fider::before { animation: ilt-dol-x 350ms var(--ease-etiket) 550ms backwards; }
[data-enerji] .ilt-kesici { border-color: var(--gold-600); background: var(--gold-100); transition: border-color 120ms linear 150ms, background-color 120ms linear 150ms; }
[data-enerji] .ilt-fider .ilt-kesici { transition-delay: 720ms; }
[data-enerji] .ilt-uc { border-color: var(--gold-600); background: var(--gold-300); }
[data-enerji] .ilt-ofis::after { border-color: var(--gold-600); background: var(--gold-300); transition: border-color 150ms linear 880ms, background-color 150ms linear 880ms; }
[data-enerji] .ilt-ofis { border-color: var(--gold-300); transition: border-color 200ms linear 880ms; }
.ilt-ofis::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
[data-enerji] .ilt-ofis::before { animation: ilt-isil 700ms ease-out 880ms; }
[data-enerji] :is(.ilt-damga, .ilt-mini-damga) { visibility: visible; animation: ilt-damga var(--sure-damga) cubic-bezier(.2, 1.3, .4, 1) 600ms backwards; }
@media (prefers-reduced-motion: reduce) {
  [data-enerji] .ilt-gelen::before, [data-enerji] .ilt-bara::before, [data-enerji] .ilt-fider::before,
  [data-enerji] .ilt-ofis::before, [data-enerji] :is(.ilt-damga, .ilt-mini-damga), .ilt-mini[data-enerji] .ilt-mini-hat::before { animation: none; }
  [data-enerji] .ilt-kesici, [data-enerji] .ilt-ofis, [data-enerji] .ilt-ofis::after { transition: none; }
}
html.hareket-yok [data-enerji] .ilt-gelen::before, html.hareket-yok [data-enerji] .ilt-bara::before, html.hareket-yok [data-enerji] .ilt-fider::before,
html.hareket-yok [data-enerji] .ilt-ofis::before, html.hareket-yok [data-enerji] :is(.ilt-damga, .ilt-mini-damga), html.hareket-yok .ilt-mini[data-enerji] .ilt-mini-hat::before { animation: none; }

/* ---------- 3 · İletişim bilgileri ---------- */
.ilt-kanallar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin: 0; padding-top: var(--space-8); border-top: 1px solid var(--line); }
.ilt-kanal { display: grid; gap: 2px; min-width: 0; }
.ilt-kanal dt { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.ilt-kanal dd { margin: 0; min-width: 0; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 500; overflow-wrap: anywhere; }
.ilt-kanal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--green-300); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ilt-kanal a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
.ilt-kanal a:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }

/* ---------- Form kartı: görüşmeye hazırlık + talep formu ---------- */
.ilt-kart { position: relative; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.ilt-hazirlik { margin-bottom: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--pus-gok); }
.ilt-hazirlik-baslik { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ilt-hazirlik-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.ilt-hazirlik-liste li { position: relative; padding-left: 24px; font-size: 15px; line-height: 23px; color: var(--ink-secondary); }
.ilt-hazirlik-liste li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ilt-form .alan .yardim { max-width: 62ch; }
.ilt-form .alan > .onay { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-secondary); }
.ilt-form .onay a { color: var(--link); text-underline-offset: 3px; }
.ilt-form .dugmeler { margin-top: var(--space-2); }
.ilt-gonder { height: 52px; padding-inline: 28px; font-size: 15px; }
.ilt-form .form-durum a { color: var(--link); }
.ilt-kvkk { margin-top: var(--space-4); padding-inline: var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.ilt-kvkk a { color: var(--ink-secondary); text-underline-offset: 3px; }

/* ---------- Dar ekran: şema dikey, iki düğüm; bara solda, gelen hat alttan gelir ---------- */
@media (max-width: 999px) {
  .ilt-ana { --sema-pay: 44px; --bara-x: 12px; }
  .ilt-izgara { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .ilt-sema { padding-right: 0; padding-left: var(--sema-pay); }
  .ilt-ofis::after { right: auto; left: -6px; }
  .ilt-fider { left: auto; right: 100%; }
  .ilt-fider::before { transform-origin: 0 50%; }
  .ilt-bara { right: auto; left: var(--bara-x); margin-right: 0; margin-left: -3px; }
  .ilt-bara::before { transform-origin: 50% 100%; }
  /* Gelen hat: alttaki kartın hizasından aşağı iner ve "Talep formu ↓" etiketiyle biter (hat formdan gelir; damga başarıya kadar yer kaplamaz) */
  .ilt-sol { gap: calc(var(--space-12) + var(--space-2)); }
  .ilt-gelen { top: calc(100% - (100% - var(--dugum-bosluk)) / 4); left: var(--bara-x); width: 2px; height: calc((100% - var(--dugum-bosluk)) / 4 + 30px); margin: 0 0 0 -1px; }
  .ilt-gelen-etiket { display: block; position: absolute; left: 14px; bottom: -11px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .01em; color: var(--ink-secondary); white-space: nowrap; }
  .ilt-gelen-etiket::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .ilt-gelen::before { transform: scaleY(0); transform-origin: 50% 100%; }
  [data-enerji] .ilt-gelen::before { transform: scaleY(1); animation-name: ilt-dol-y; }
  .ilt-uc { right: auto; left: 50%; top: auto; bottom: -5px; margin: 0 0 0 -5px; }
  .ilt-damga { display: none; justify-self: start; margin-left: var(--sema-pay); }
  [data-enerji] .ilt-damga { display: inline-flex; }
  .ilt-hazirlik-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ilt-ofis { padding: var(--space-4) var(--space-5); }
  .ilt-kanallar { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .ilt-kart { margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-lg); }
  .ilt-hazirlik { padding: var(--space-4) var(--space-5); }
  .ilt-gonder { width: 100%; }
}