/* ==== kalite-a.css ==== */
/* Kalite katmanı A (tasarim-v2): #services ve #standalone-services.
   Her hizmet kartının üstünde o sistemin küçük, "Örnek" çipli arayüz parçası.
   Fikir: Synthflow'daki mor sahne paneli + beyaz uygulama penceresi, küçük
   ölçekte. Pencere kartın içinde, alt kenarı sahneden taşar gibi kesilir.
   Durum değişimi (kalite-a.js) yalnız opacity/transform ile oynar.
   Kural: data-durum="bas" yoksa mini arayüz SON hâliyle durur. Böylece
   dokunmatik, azaltılmış hareket ve JS'siz ziyaretçi bitmiş sahneyi görür. */

/* ------------------------------------------------ Bölüm başı: başlık solda, açıklama sağda */
@media (min-width: 900px) {
  #services .block-inner,
  #standalone-services .block-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: end;
  }
  #services .block-inner > .eyebrow,
  #standalone-services .block-inner > .eyebrow { grid-column: 1; justify-self: start; }
  #services .block-inner > .block-h2,
  #standalone-services .block-inner > .block-h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  #services .block-inner > .block-lede,
  #standalone-services .block-inner > .block-lede {
    grid-column: 2; grid-row: 2;
    justify-self: end;
    margin: 0;
    max-width: 460px;
    padding-bottom: 6px;
  }
  #services .block-inner > .grid,
  #standalone-services .block-inner > .grid,
  #standalone-services .block-inner > .price-foot { grid-column: 1 / -1; }
  #services .block-inner > .grid,
  #standalone-services .block-inner > .grid { margin-top: 56px; }
}

/* ------------------------------------------------ Sahne ve pencere */
.mini {
  position: relative;
  margin: 0 0 4px;
  height: 212px;
  padding: 18px 16px 0;
  overflow: hidden;
  /* Mor sahne: marka gradyanı + sağ alttan açılan ince yay çizgileri */
  background:
    repeating-radial-gradient(circle at 105% 120%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 18px),
    linear-gradient(135deg, #39106e 0%, #6108d6 58%, #740aff 100%);
}
.mini-pencere {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 7px 7px 0 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 18px 40px -18px rgba(18, 0, 50, 0.65);
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--ink);
  text-align: left;
}
/* Pencere sahnenin altından taşar gibi kesilir. Kesik yer yumuşak solar,
   satır yarıda kalmış gibi değil, liste devam ediyor gibi okunur. */
.mini-pencere { position: relative; }
.mini-pencere::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
  pointer-events: none;
}
.mini-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
}
.mini-baslik {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mini-cip {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--brand);
  background: rgba(116, 10, 255, 0.08);
  padding: 4px 6px;
}
.mini-govde { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; min-height: 0; }
.mini b, .mini i { font-style: normal; }
.m-ad { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-ad b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ad i, .m-ad > .m-iki { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.m-tik { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* İki durumlu metin: a = başlangıç, b = son. Aynı ızgara hücresinde üst üste,
   genişlik ikisinin büyüğü olduğu için durum değişince yerleşim kaymaz. */
.m-iki { display: inline-grid; }
.m-iki > .m-a, .m-iki > .m-b { grid-area: 1 / 1; transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
.m-iki > .m-a { opacity: 0; transform: translateY(-3px); }
.m-iki > .m-b { opacity: 1; transform: none; }
.mini[data-durum="bas"] .m-iki > .m-a { opacity: 1; transform: none; }
.mini[data-durum="bas"] .m-iki > .m-b { opacity: 0; transform: translateY(4px); }

/* ------------------------------------------------ 01 Gelir: talep puanlanır ve atanır */
.m-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line-2);
}
.m-satir.m-yeni { border-top: 0; padding-top: 0; }
.m-puan {
  justify-self: end;
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 6px;
  color: #fff;
  background: var(--brand);
}
.m-puan.m-iki { justify-items: end; color: inherit; background: none; padding: 0; }
.m-puan.m-iki > .m-a { color: var(--ink-3); border: 1px dashed rgba(20, 24, 38, 0.22); padding: 2px 6px; }
.m-puan.m-iki > .m-b { color: #fff; background: var(--brand); padding: 3px 7px; }
.m-puan-orta { color: var(--brand-2); background: rgba(116, 10, 255, 0.12); }
.m-puan-dusuk { color: var(--ink-2); background: var(--bg-2); }
.m-atama { margin: -2px 0 2px; font-size: 10.5px; color: var(--brand); }
.m-atama .m-a { color: var(--ink-3); }
.m-atama .m-b::before { content: "↳ "; }

/* ------------------------------------------------ 02 Operasyon: onay akışı */
.m-akis { gap: 0; position: relative; padding-top: 10px; }
.m-akis::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--line);
}
.m-adim { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 5px 0; }
.m-kutu {
  position: relative;
  z-index: 1;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  background: #fff;
  color: #fff;
}
/* Dolgu ayrı katman: renk geçişi yerine opacity ile yanar (paint yok) */
.m-kutu::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.m-kutu .m-tik { position: relative; transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); }
.m-bitti .m-kutu, .m-onay .m-kutu { border-color: var(--brand); }
.m-bitti .m-kutu::before, .m-onay .m-kutu::before { opacity: 1; }
.m-onay .m-ad > .m-iki { color: var(--brand); }
.m-sonraki .m-kutu { border-color: var(--brand); }
.m-sonraki .m-kutu .m-tik { opacity: 0; }
.mini[data-durum="bas"] .m-onay .m-kutu { border-style: dashed; }
.mini[data-durum="bas"] .m-onay .m-kutu::before { opacity: 0; }
.mini[data-durum="bas"] .m-onay .m-tik { opacity: 0; transform: scale(0.4); }
.mini[data-durum="bas"] .m-onay .m-ad > .m-iki { color: var(--ink-3); }
.mini[data-durum="bas"] .m-sonraki { opacity: 0.55; }
.mini[data-durum="bas"] .m-sonraki .m-kutu { border-color: var(--ink-3); }
.m-sonraki { transition: opacity 320ms var(--ease-out) 120ms; }

/* ------------------------------------------------ 03 Finans: ödeme satırları eşleşir */
.m-odeme {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px solid var(--line-2);
}
.m-kaynak { color: var(--ink-2); }
.m-tutar { font-family: var(--font-mono); font-size: 10.5px; font-feature-settings: "tnum" 1; white-space: nowrap; }
.m-fatura { justify-self: end; font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); white-space: nowrap; }
.m-odeme .m-tik { color: var(--brand); }
.m-acik .m-tik { transition: opacity 260ms var(--ease-out) 140ms, transform 360ms var(--ease-out) 140ms; }
.m-acik .m-fatura { justify-items: end; }
.mini[data-durum="bas"] .m-acik .m-tik { opacity: 0; transform: scale(0.4); }
.m-acik .m-fatura > .m-a { color: var(--ink-2); border: 1px dashed rgba(20, 24, 38, 0.25); padding: 1px 5px; }
.m-kapanis { margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--brand); }
.m-kapanis .m-a { color: var(--ink-2); font-weight: 500; }

/* ------------------------------------------------ 04 Asistan: kaynaklı cevap */
.m-sohbet { gap: 7px; }
.m-soru {
  align-self: flex-end;
  max-width: 86%;
  font-size: 11px;
  line-height: 1.35;
  padding: 5px 8px;
  border-radius: 10px 10px 2px 10px;
  background: var(--bg-2);
  color: var(--ink);
}
.m-cevap {
  align-self: flex-start;
  max-width: 94%;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 8px 7px;
  border-radius: 10px 10px 10px 2px;
  background: rgba(116, 10, 255, 0.06);
  border: 1px solid rgba(116, 10, 255, 0.12);
}
.m-kaynakli { align-items: start; }
.m-belge { justify-self: start; font-family: var(--font-mono); font-size: 9.5px; color: var(--brand); background: #fff; border: 1px solid rgba(116, 10, 255, 0.2); padding: 2px 5px; }
.m-belge::before { content: "↗ "; }
.m-alinti { font-size: 10px; line-height: 1.4; color: var(--ink-2); padding-left: 7px; border-left: 2px solid var(--brand); }
.m-alinti mark { background: rgba(116, 10, 255, 0.14); color: var(--ink); padding: 0 1px; }

/* ------------------------------------------------ Tekil hizmetler: daha hafif, açık sahne */
.mini.mini-acik {
  height: 198px;
  margin: -8px 0 4px;
  background:
    repeating-radial-gradient(circle at 105% 120%, rgba(116, 10, 255, 0.06) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, #f6f1ff 0%, #fbf9ff 100%);
  border: 1px solid rgba(116, 10, 255, 0.10);
}
.mini-acik .mini-pencere { box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(57, 16, 110, 0.35); }
.m-yanit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-2);
}
.m-yanit:last-child { border-bottom: 0; }
.m-yanit .m-ad i { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.m-etiket { font-size: 10px; padding: 3px 7px; color: var(--brand-2); background: rgba(116, 10, 255, 0.08); white-space: nowrap; }
.m-etiket-ana { color: #fff; background: var(--brand); }
.m-etiket-sonra { color: var(--ink-2); background: var(--bg-2); }

/* Tarayıcı penceresi: boş site iskeleti, sahte müşteri sitesi değil */
.m-tarayici .mini-ust { gap: 10px; justify-content: flex-start; }
.m-tarayici .mini-cip { margin-left: auto; }
.m-noktalar { display: flex; gap: 4px; }
.m-noktalar i { width: 7px; height: 7px; border-radius: 50%; background: #e2dfe8; }
.m-adres {
  flex: 0 1 200px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  background: var(--bg-2);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-iskelet { gap: 10px; padding: 10px 12px; }
.m-iskelet i { display: block; background: #ecebf1; border-radius: 2px; }
.m-isk-nav { display: flex; gap: 8px; align-items: center; }
.m-isk-nav i { width: 22px; height: 4px; }
.m-isk-nav .m-logo { width: 34px; height: 8px; margin-right: auto; background: var(--navy); opacity: 0.85; }
.m-isk-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.m-isk-metin { display: flex; flex-direction: column; gap: 5px; }
.m-isk-metin .m-h1 { height: 8px; width: 92%; background: #cfcbd9; }
.m-isk-metin .m-p { height: 4px; width: 100%; margin-top: 2px; }
.m-isk-metin .m-kisa { width: 64%; }
.m-isk-metin .m-dugme { width: 52px; height: 12px; margin-top: 4px; background: var(--brand); border-radius: 2px; }
.m-iskelet .m-isk-gorsel { height: 52px; background: linear-gradient(135deg, #e9e0ff, #d8c6ff); }
.m-isk-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m-isk-kartlar i { height: 18px; background: var(--bg-2); border: 1px solid var(--line-2); }

/* Tekil hizmet kartları paketlerden hafif okunsun: rakam bir kademe küçük */
#standalone-services .price-amount { font-size: 46px; }
#standalone-services .price-currency { font-size: 24px; padding-top: 6px; }

/* ------------------------------------------------ Dar ekran */
@media (max-width: 720px) {
  .mini { height: 206px; padding: 14px 12px 0; margin-bottom: 0; }
  .mini.mini-acik { height: 196px; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mini *, .mini *::before { transition: none !important; }
}

/* ==== kalite-b.css ==== */
/* Kalite katmanı B (tasarim-v2): #process ve #pricing.
   Kaynak fikirler: Bilder "How your imagery gets made" (adım sekmesi + o adımın
   belgesi), Synthflow BELL (mor sahne + beyaz pencere), Rosie "Everything in X,
   plus" ve "All plans include", Designjoy güvence karoları, YZK güncelleme
   tarihi. Sekme davranışı WAI-ARIA APG Tabs deseni (kalite-b.js).
   Hareket yalnız transform/opacity, kullanıcı tıklayınca. kalite.css'teki
   .akis-cip ("Örnek" çipi) aynen kullanılır, o dosyaya dokunulmadı. */

/* ------------------------------------------------------------ Adımlar */
.adim {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.adim-sol { position: relative; padding-left: 28px; }
@media (min-width: 861px) { .adim-sol { position: sticky; top: 120px; } }

/* Dikey ray: seçili adıma kadar mor dolar (scaleY, compositor) */
.adim-ray { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); overflow: hidden; }
.adim-ray-dolu {
  position: absolute; inset: 0;
  background: var(--brand);
  transform-origin: top;
  transform: scaleY(0.25);
  transition: transform 520ms var(--ease-out);
}

.adim-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adim-liste li { margin: 0; }
.adim-sekme {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  row-gap: 6px;
  width: 100%;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adim-liste li:last-child .adim-sekme { border-bottom: 1px solid var(--line); }
.adim-sekme .process-num { grid-row: 1 / span 2; margin: 5px 0 0; color: var(--ink-3); transition: color 0.3s; }
.adim-ad { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink-3); transition: color 0.3s; }
.adim-sure { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.adim-sekme[aria-selected="true"] .process-num { color: var(--brand); }
.adim-sekme[aria-selected="true"] .adim-ad { color: var(--ink); }
.adim-sekme[aria-selected="true"] .adim-sure { color: var(--ink-2); }
@media (hover: hover) {
  .adim-sekme:hover .adim-ad { color: var(--ink-2); }
  .adim-sekme[aria-selected="true"]:hover .adim-ad { color: var(--ink); }
}
.adim-sekme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Paneller: JS hazırsa aynı hücrede üst üste durur. Yükseklik en uzun panelden
   gelir, sekme değişince sayfa zıplamaz. Seçili olmayan panel görünmez ve
   odak almaz (visibility). */
.adim-hazir .adim-sag { display: grid; }
.adim-hazir .adim-panel { grid-area: 1 / 1; }
.adim-hazir .adim-panel:not(.acik):not(.cikiyor) { visibility: hidden; }
.adim-panel + .adim-panel { margin-top: 48px; }
.adim-hazir .adim-panel + .adim-panel { margin-top: 0; }
.adim-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

.adim-metin { max-width: 640px; margin-bottom: 28px; }
.adim-metin .process-h { margin: 0 0 10px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.adim-metin p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.adim-metin .adim-kalan { margin-top: 16px; font-size: 15px; color: var(--ink); font-weight: 500; }
.adim-kalan-et { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--brand); margin-right: 8px; }

/* Mor sahne + beyaz belge penceresi */
.adim-sahne {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 48px;
  background: radial-gradient(120% 100% at 88% 0%, #9b4dff 0%, #740aff 42%, #5607c2 100%);
}
.adim-sahne::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: repeating-radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 34px);
  pointer-events: none;
}
.belge {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 32px 64px -24px rgba(24, 0, 72, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.belge-ust { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.belge-ikon {
  flex: none;
  width: 30px;
  height: 30px;
  background:
    linear-gradient(var(--brand), var(--brand)) 9px 10px / 12px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) 9px 14px / 12px 1.5px no-repeat,
    linear-gradient(var(--brand), var(--brand)) 9px 18px / 8px 1.5px no-repeat,
    rgba(116, 10, 255, 0.08);
}
.belge-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.belge-ad b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.belge-ad small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.belge-cip { margin-left: auto; flex: none; }

.belge-satirlar { margin: 0; padding: 4px 20px; }
.belge-satir { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.belge-satir:last-child { border-bottom: 0; }
.belge-satir dt { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.belge-satir dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.belge-vurgu { background: rgba(116, 10, 255, 0.08); color: var(--brand-2); font-weight: 500; padding: 2px 8px; }
.belge-hap { display: inline-block; border: 1px solid var(--brand); color: var(--brand); font-size: 12px; font-weight: 500; padding: 1px 10px; }

.belge-iki { display: grid; grid-template-columns: 3fr 2fr; border-bottom: 1px solid var(--line); }
.belge-kutu { padding: 16px 20px; }
.belge-kutu + .belge-kutu { border-left: 1px solid var(--line); }
.belge-et { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
.belge-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.belge-liste li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.45; }
.belge-liste li::before { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 500; }
.belge-arti li::before { content: "+"; color: var(--brand); }
.belge-eksi li { color: var(--ink-2); }
.belge-eksi li::before { content: "\2212"; color: var(--ink-3); }
.belge-alt { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.belge-alt > div { padding: 14px 20px; }
.belge-alt > div + div { border-left: 1px solid var(--line); }
.belge-alt dt { font-size: 12.5px; color: var(--ink-3); }
.belge-alt dd { margin: 4px 0 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; font-feature-settings: "tnum" 1; }

.belge-log { list-style: none; margin: 0; padding: 4px 20px; }
.belge-log li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; line-height: 1.45; }
.belge-log li:last-child { border-bottom: 0; }
.belge-no { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.belge-durum { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; color: var(--brand); background: rgba(116, 10, 255, 0.07); white-space: nowrap; }
.belge-duzeldi .belge-durum { color: #fff; background: var(--navy); }
.belge-ozet { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); background: #faf7ff; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--brand-2); }

/* Devir belgesi: işaretli kutular */
.belge-tikli dt { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 14px; }
.belge-tikli dt::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.belge-tikli dd { color: var(--ink-2); }
.belge-tikli .belge-satir { grid-template-columns: minmax(0, 1fr) auto; }

/* Telefon: adımlar üstte yatay kayan seçici */
@media (max-width: 860px) {
  .adim { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .adim-sol { padding-left: 0; }
  .adim-ray { display: none; }
  .adim-liste {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--container-pad));
    padding: 2px var(--container-pad) 4px;
    scroll-padding: 0 var(--container-pad);
  }
  .adim-liste::-webkit-scrollbar { display: none; }
  .adim-liste li { flex: 0 0 auto; scroll-snap-align: start; }
  .adim-sekme,
  .adim-liste li:last-child .adim-sekme {
    grid-template-columns: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    width: auto;
    max-width: 230px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #fff;
  }
  .adim-sekme .process-num { grid-row: auto; margin: 0; }
  .adim-ad { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adim-sure { grid-column: 1 / -1; }
  .adim-sekme[aria-selected="true"] { border-color: var(--brand); background: rgba(116, 10, 255, 0.04); }
  .adim-metin { margin-bottom: 20px; }
  .adim-metin .process-h { font-size: 21px; }
  .adim-sahne { min-height: 0; padding: 24px 14px; }
  .belge-ust { padding: 14px 16px; }
  .belge-satirlar, .belge-log { padding: 2px 16px; }
  .belge-satir { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 11px 0; }
  .belge-tikli .belge-satir { grid-template-columns: minmax(0, 1fr); }
  .belge-tikli dd { padding-left: 26px; }
  .belge-iki { grid-template-columns: minmax(0, 1fr); }
  .belge-kutu { padding: 14px 16px; }
  .belge-kutu + .belge-kutu { border-left: 0; border-top: 1px solid var(--line); }
  .belge-alt > div { padding: 12px 16px; }
  .belge-alt dd { font-size: 16px; }
  .belge-log li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; }
  .belge-durum { grid-column: 2; justify-self: start; }
  .belge-ozet { padding: 11px 16px; }
}

/* ------------------------------------------------------------ Fiyatlar */
.price-kim { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.price-card-enterprise .price-kim { color: rgba(255, 255, 255, 0.78); }
.price-arti {
  margin: 12px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.price-arti + .price-list { margin-top: -8px; border-top: 0; padding-top: 0; }

.paket-ortak { margin-top: 28px; }
.paket-serit {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 28px;
  background: #fff;
  border: 1px solid var(--line);
}
.paket-serit-et { flex: none; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.paket-serit-liste { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.paket-serit-liste li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--ink-2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3l2.8 2.8L12.5 4.9' fill='none' stroke='%23740aff' stroke-width='1.8'/%3E%3C/svg%3E") 0 50% / 15px no-repeat;
}
.paket-guvence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 0;
}
.guvence { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-content: start; padding: 28px; background: #fff; }
.guvence > :not(.guvence-ikon) { grid-column: 2; }
.guvence-ikon {
  grid-row: 1 / span 3;
  width: 40px;
  height: 40px;
  position: relative;
  background: rgba(116, 10, 255, 0.07);
}
.guvence-iade::before { content: "€"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 500; color: var(--brand); }
.guvence-iptal::before { content: ""; position: absolute; left: 14px; top: 14px; width: 12px; height: 12px; border: 2px solid var(--brand); box-sizing: border-box; }
.guvence-h { margin: 0 0 8px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.guvence p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 520px; }
.guvence-link { justify-self: start; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--brand); }
.guvence-link .arrow { display: inline-block; transition: transform 180ms var(--ease-out); }
@media (hover: hover) { .guvence-link:hover .arrow { transform: translateX(3px); } }
.paket-tarih { margin: 14px 0 0; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

@media (max-width: 860px) {
  .paket-serit { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .paket-serit-liste { flex-direction: column; gap: 8px; }
  .paket-guvence { grid-template-columns: minmax(0, 1fr); }
  .guvence { padding: 22px 20px; column-gap: 14px; grid-template-columns: 36px minmax(0, 1fr); }
  .guvence-ikon { width: 36px; height: 36px; }
  .guvence-iptal::before { left: 12px; top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .adim-ray-dolu, .adim-ad, .adim-sekme .process-num, .guvence-link .arrow { transition: none; }
}

/* ==== kalite-c.css ==== */
/* Kalite katmanı, c ajanı: #for-who, #receptionist, #studio.
   Kaynaklar: sekme + tek panel düzeni Goodcall "use case" sekmeleri ve Bilder
   sektör listesi, WAI-ARIA APG Tabs örneği (w3c/aria-practices). Sohbet
   balonlarının sırayla belirmesi Magic UI AnimatedList fikrinin (MIT) tek
   seferlik, transform/opacity'li vanilla portu. Hareket yalnız transform ve
   opacity, azaltılmış harekette hepsi kapanır. */

/* ------------------------------------------------------------ ortak "Örnek" çipi */
.c-ornek {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--brand);
  background: rgba(116, 10, 255, 0.07);
  padding: 3px 8px;
  white-space: nowrap;
}
.c-ornek-koyu { color: #fff; background: rgba(255, 255, 255, 0.16); }

/* ============================================================ SEKTÖR SEÇİCİ */
.sektor {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}
.sektor-liste {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  background: #fafafc;
  border-right: 1px solid var(--line);
}
/* Seçili sekmenin arkasındaki beyaz dil: panelle birleşir (sağ kenarı
   ayırıcı çizginin üstüne biner). Yalnız translateY ile kayar. */
.sektor-gosterge {
  position: absolute;
  top: 0;
  left: 0;
  right: -1px;
  height: 52px;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 2px 0 0 var(--brand);
  transform: translateY(14px);
  transition: transform 360ms var(--ease-out);
  pointer-events: none;
}
.sektor-sekme {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 15px 24px 15px 26px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.sektor-no {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--ease-out);
}
.sektor-sekme[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.sektor-sekme[aria-selected="true"] .sektor-no { color: var(--brand); }
.sektor-sekme:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
@media (hover: hover) {
  .sektor-sekme:hover { color: var(--ink); }
}

/* Paneller aynı ızgara hücresinde üst üste durur. Gizli olan görünmez ama
   yer kaplar, böylece sektör değişince bölüm yüksekliği oynamaz. */
.sektor-paneller { display: grid; min-width: 0; }
.sektor-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 48px;
  align-items: start;
  padding: 44px 48px 44px;
  min-width: 0;
}
.sektor-panel[hidden] { display: grid; visibility: hidden; pointer-events: none; }

.sektor-metin { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sektor-metin .cell-num { align-self: flex-start; margin-bottom: 6px; }
.sektor-metin h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 560px;
  text-wrap: balance;
}
.sektor-metin > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 560px; }
.sektor-metin .cell-list { margin-top: 8px; gap: 10px; }
.sektor-metin .cell-list li { font-size: 14.5px; }
.sektor-metin .niche-foot {
  margin: 10px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 560px;
}
.sektor-metin .cell-link { min-height: 0; margin: 2px 0 0; }

/* Sektöre özgü örnek ekran */
.sektor-ornek {
  margin: 0;
  padding: 16px 18px 6px;
  background: #faf8ff;
  border: 1px solid rgba(116, 10, 255, 0.12);
  box-shadow: 0 24px 48px -36px rgba(57, 16, 110, 0.35);
}
.sektor-ornek-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sektor-ornek-baslik { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.sektor-satirlar { list-style: none; margin: 0; padding: 0; }
.sektor-satir {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "saat ne" ". durum";
  column-gap: 10px;
  row-gap: 6px;
  padding: 12px 0;
  border-top: 1px solid rgba(116, 10, 255, 0.10);
}
.sektor-saat { grid-area: saat; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.sektor-ne { grid-area: ne; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.sektor-durum {
  grid-area: durum;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  color: var(--brand-2);
  background: rgba(116, 10, 255, 0.08);
}
.sektor-durum::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sektor-satir[data-durum="yeni"] .sektor-durum { color: #fff; background: var(--brand); }
.sektor-satir[data-durum="bekle"] .sektor-durum { color: var(--ink-2); background: #efeff3; }

/* Panel değişimi: giren panel 6px aşağıdan gelir, satırları sırayla
   oturur. Çıkan panel hızla söner (ikisi aynı hücrede, çapraz geçiş). */
@keyframes sektorGir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sektorSatir { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes sektorCik { from { opacity: 1; } to { opacity: 0; } }
.sektor-panel.sektor-giris .sektor-metin { animation: sektorGir 320ms var(--ease-out) both; }
.sektor-panel.sektor-giris .sektor-ornek { animation: sektorGir 360ms var(--ease-out) 60ms both; }
.sektor-panel.sektor-giris .sektor-satir { animation: sektorSatir 340ms var(--ease-out) both; }
.sektor-panel.sektor-giris .sektor-satir:nth-child(1) { animation-delay: 140ms; }
.sektor-panel.sektor-giris .sektor-satir:nth-child(2) { animation-delay: 200ms; }
.sektor-panel.sektor-giris .sektor-satir:nth-child(3) { animation-delay: 260ms; }
.sektor-panel[hidden].sektor-cikis { visibility: visible; animation: sektorCik 150ms linear both; }

@media (max-width: 1180px) {
  .sektor { grid-template-columns: 260px minmax(0, 1fr); }
  .sektor-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 36px 40px; }
  .sektor-ornek { max-width: 480px; }
}

/* Telefon ve dar tablet: yatay kayan çip çubuğu + altta panel */
@media (max-width: 820px) {
  .sektor { display: block; border: 0; background: none; }
  .sektor-liste {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--container-pad));
    padding: 2px var(--container-pad) 6px;
    background: none;
    border: 0;
    scroll-padding: 0 var(--container-pad);
  }
  .sektor-liste::-webkit-scrollbar { display: none; }
  .sektor-gosterge { display: none; }
  .sektor-sekme {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 14px;
    white-space: nowrap;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    scroll-snap-align: start;
  }
  .sektor-sekme[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
  .sektor-sekme[aria-selected="true"] .sektor-no { color: rgba(255, 255, 255, 0.72); }
  .sektor-sekme:focus-visible { outline-offset: 2px; }
  .sektor-paneller { margin-top: 14px; border: 1px solid var(--line); background: #fff; }
  .sektor-panel { padding: 24px 20px 26px; gap: 24px; }
  /* Telefonda paneller doğal boyunda: kısa sektörün altında boşluk kalmaz.
     Çubuk panelin üstünde olduğu için okurun gördüğü yer oynamaz. */
  .sektor-panel[hidden] { display: none; }
  .sektor-ornek { max-width: none; padding: 14px 14px 4px; }
}

/* ============================================================ RESEPSİYON ÖRNEĞİ */
.rsp {
  position: relative;
  margin: 0 0 56px;
  padding: 26px 32px 34px;
  color: #fff;
  background:
    radial-gradient(110% 80% at 88% -10%, rgba(176, 122, 255, 0.55) 0%, rgba(176, 122, 255, 0) 60%),
    linear-gradient(140deg, #740aff 0%, #6108d6 48%, #39106e 100%);
  overflow: hidden;
  isolation: isolate;
}
/* İnce ızgara dokusu: sahneye derinlik verir, durağandır */
.rsp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.rsp-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; margin-bottom: 18px; }
.rsp-tekrar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.38);
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.rsp-tekrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .rsp-tekrar:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }
}
.rsp-izgara { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px; align-items: stretch; }

.rsp-sohbet, .rsp-ozet {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(20, 0, 60, 0.6);
}
.rsp-sohbet { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rsp-sohbet-ust { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rsp-avatar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--brand); background: rgba(116, 10, 255, 0.09);
}
.rsp-kim { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rsp-kim b { font-size: 14.5px; font-weight: 500; }
.rsp-kim small { font-size: 12px; color: var(--ink-3); }
.rsp-mesajlar {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f6f3fb;
}
.rsp-m {
  max-width: 80%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px 12px;
  padding: 9px 12px 7px;
  font-size: 14px;
  line-height: 1.45;
}
.rsp-m p { margin: 0; }
.rsp-saat { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.rsp-gelen { align-self: flex-start; background: #fff; border: 1px solid var(--line-2); border-radius: 2px 14px 14px 14px; transform-origin: 0 100%; }
.rsp-giden { align-self: flex-end; background: #ebe1ff; border-radius: 14px 2px 14px 14px; transform-origin: 100% 100%; }
.rsp-sonuc {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 13px 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-2);
  background: #fff;
  border: 1px solid rgba(116, 10, 255, 0.32);
  border-radius: 999px;
}
.rsp-sonuc svg { color: var(--brand); }

/* "Yazıyor" göstergesi: sıradaki asistan balonunun yerinde belirir */
.rsp-yaziyor {
  position: absolute;
  top: 0;
  right: 18px;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: #ebe1ff;
  border-radius: 14px 2px 14px 14px;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.rsp-yaziyor i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-2); opacity: 0.35; }
.rsp-yaziyor.rsp-yaz-acik { opacity: 1; }
.rsp-yaziyor.rsp-yaz-acik i { animation: rspNokta 900ms ease-in-out infinite; }
.rsp-yaziyor.rsp-yaz-acik i:nth-child(2) { animation-delay: 150ms; }
.rsp-yaziyor.rsp-yaz-acik i:nth-child(3) { animation-delay: 300ms; }
@keyframes rspNokta { 0%, 100% { opacity: 0.3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.rsp-ozet { padding: 20px 22px 18px; min-width: 0; }
.rsp-ozet-baslik { margin: 0 0 16px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rsp-sayilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.rsp-sayilar > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 12px 12px 14px; background: #fff; }
.rsp-sayilar dt { font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.rsp-sayilar dd { margin: 0; font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rsp-sayac { display: inline-block; transform-origin: 0 100%; }
.rsp-liste-baslik { margin: 20px 0 4px; font-size: 12px; color: var(--ink-3); }
.rsp-liste { list-style: none; margin: 0; padding: 0; }
.rsp-liste li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line-2);
  font-size: 13.5px;
  line-height: 1.4;
}
.rsp-kanal { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.rsp-etiket { font-size: 11px; padding: 2px 8px; border-radius: 999px; color: var(--ink-2); background: #efeff3; white-space: nowrap; }
.rsp-etiket-yeni { color: #fff; background: var(--brand); }

/* Oynatma durumları (kalite-c.js). .rsp-hazir: henüz görünmeyen parçalar. */
.rsp.rsp-hazir .rsp-m,
.rsp.rsp-hazir .rsp-sonuc { opacity: 0; transform: translateY(8px) scale(0.97); }
.rsp.rsp-hazir .rsp-yeni { opacity: 0; transform: translateY(-6px); }
.rsp .rsp-m, .rsp .rsp-sonuc, .rsp .rsp-yeni {
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.rsp.rsp-hazir .rsp-gor { opacity: 1; transform: none; }
@keyframes rspPop { 0% { transform: none; } 40% { transform: scale(1.22); } 100% { transform: none; } }
.rsp-sayac.rsp-pop { animation: rspPop 520ms var(--ease-out); }
.rsp-yeni.rsp-gor { background: linear-gradient(90deg, rgba(116, 10, 255, 0.06), transparent 70%); }

@media (max-width: 960px) {
  .rsp-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .rsp { margin-bottom: 40px; padding: 16px 14px 18px; }
  .rsp-ust { margin-bottom: 14px; }
  .rsp-izgara { gap: 14px; }
  .rsp-mesajlar { padding: 16px 12px 18px; }
  .rsp-m { max-width: 88%; font-size: 13.5px; }
  .rsp-yaziyor { right: 12px; }
  .rsp-ozet { padding: 16px 14px 12px; }
  .rsp-sayilar dd { font-size: 24px; }
  .rsp-sayilar > div { padding: 10px 8px 12px; }
  .rsp-liste li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .rsp-kanal { grid-column: 1 / -1; }
}

/* ============================================================ STÜDYO SÜRECİ */
.stu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 20px; margin: 0 0 56px; align-items: stretch; }
.stu-akis { margin: 0; padding: 18px 24px 24px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.stu-ust { display: flex; justify-content: space-between; margin-bottom: 18px; }
.stu-adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stu-adim { position: relative; padding: 0 22px; min-width: 0; }
.stu-adim:first-child { padding-left: 0; }
.stu-adim:last-child { padding-right: 0; }
.stu-adim + .stu-adim { border-left: 1px dashed rgba(116, 10, 255, 0.22); }
/* Adımlar arasındaki ok: kesikli çizginin üstünde küçük bir ok başı */
.stu-adim + .stu-adim::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--brand);
  border-right: 1.5px solid var(--brand);
  background: #fff;
  transform: rotate(45deg);
}
.stu-adim-baslik { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.stu-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px; color: #fff; background: var(--brand);
}
.stu-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 34px; height: 34px;
  color: var(--brand); background: #fff; border: 1px solid rgba(116, 10, 255, 0.16);
}
.stu-dosya {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  padding: 12px;
  background: #faf8ff;
  border: 1px solid rgba(116, 10, 255, 0.12);
}
.stu-dosya .stu-durum { grid-column: 2; justify-self: start; }
.stu-dosya-ad { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stu-dosya-ad b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.stu-dosya-ad small { font-size: 12px; color: var(--ink-3); }
.stu-durum {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1.3; white-space: nowrap;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  color: var(--brand-2); background: rgba(116, 10, 255, 0.08);
}
.stu-durum::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.stu-sahne[data-durum="kontrol"] .stu-durum { color: var(--brand); background: #fff; box-shadow: inset 0 0 0 1px rgba(116, 10, 255, 0.35); }
.stu-sahne[data-durum="sira"] .stu-durum { color: var(--ink-3); background: #f0f0f3; }
.stu-sahneler { list-style: none; margin: 0; padding: 0; }
.stu-sahne { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.stu-sahne:first-child { border-top: 0; padding-top: 0; }
.stu-sahne-ad { font-size: 13.5px; line-height: 1.35; color: var(--ink); }
/* Küçük sahne simgeleri: yalnız CSS kutuları, fotoğraf değil */
.stu-kucuk { position: relative; width: 30px; height: 30px; overflow: hidden; background: #f1f0f5; }
.stu-kucuk i { position: absolute; display: block; }
.stu-kucuk-fon i { left: 11px; top: 8px; width: 8px; height: 13px; background: #6108d6; box-shadow: 0 9px 4px -4px rgba(0, 0, 0, 0.18); }
.stu-kucuk-salon { background: linear-gradient(180deg, #efe6ff 0 62%, #d9c9f5 62%); }
.stu-kucuk-salon i { left: 6px; top: 14px; width: 18px; height: 6px; background: #6108d6; border-radius: 2px 2px 0 0; }
.stu-kucuk-kis { background: linear-gradient(180deg, #e9ecf6, #ffffff); }
.stu-kucuk-kis i { left: 11px; top: 9px; width: 8px; height: 13px; background: #39106e; }
.stu-kucuk-kis::before, .stu-kucuk-kis::after { content: ""; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #b9a6e0; top: 5px; left: 5px; box-shadow: 16px 3px 0 #b9a6e0, 6px 15px 0 #c9bbe8, 18px 17px 0 #c9bbe8; }
.stu-kucuk-video { background: #39106e; }
.stu-kucuk-video i { left: 12px; top: 10px; width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.stu-klasor { padding: 12px 12px 10px; background: #faf8ff; border: 1px solid rgba(116, 10, 255, 0.12); }
.stu-klasor-ad { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.stu-klasor-ad b { font-size: 13.5px; font-weight: 500; }
.stu-dosyalar { list-style: none; margin: 0; padding: 0 0 0 4px; }
.stu-dosyalar li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.stu-dosyalar svg { flex: 0 0 auto; color: var(--ink-3); }
.stu-not { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(116, 10, 255, 0.12); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--brand-2); }

.stu-yok { padding: 22px 24px 14px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.stu-yok-baslik { margin: 0 0 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.stu-yok ul { list-style: none; margin: 0; padding: 0; }
.stu-yok li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.stu-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-top: 0;
  color: var(--brand); background: rgba(116, 10, 255, 0.08);
}

@media (max-width: 1180px) {
  .stu { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .stu { margin-bottom: 40px; gap: 14px; }
  .stu-akis { padding: 16px 16px 18px; }
  .stu-adimlar { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stu-adim, .stu-adim:first-child, .stu-adim:last-child { padding: 0; }
  .stu-adim + .stu-adim { border-left: 0; border-top: 1px dashed rgba(116, 10, 255, 0.22); margin-top: 18px; padding-top: 18px; }
  .stu-adim + .stu-adim::before { top: -4px; left: 22px; transform: rotate(135deg); }
  .stu-yok { padding: 18px 16px 8px; }
}

/* ============================================================ azaltılmış hareket */
@media (prefers-reduced-motion: reduce) {
  .sektor-gosterge, .sektor-sekme, .rsp-tekrar { transition: none; }
  .sektor-panel.sektor-giris .sektor-metin,
  .sektor-panel.sektor-giris .sektor-ornek,
  .sektor-panel.sektor-giris .sektor-satir,
  .sektor-panel[hidden].sektor-cikis { animation: none; }
  .sektor-panel[hidden].sektor-cikis { visibility: hidden; }
  .rsp .rsp-m, .rsp .rsp-sonuc, .rsp .rsp-yeni { transition: none; }
  .rsp-yaziyor { display: none; }
  .rsp-sayac.rsp-pop { animation: none; }
}

/* Studio tek paket (11-05): iki aylık plan yerine tek seferlik 175 € fotoğraf
   paketi. Tek kart bölüm genişliğinde, maddeler masaüstünde iki sütun. */
.stu-tek { display: block; }
.stu-tek .price-card { max-width: none; }
@media (min-width: 900px) {
  .stu-tek .price-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* ==== kalite-d.css ==== */
/* Kalite katmanı D (tasarim-v2): SSS, iletişim, blog, kapanış ikilisi, alt bilgi.
   style.css ve kalite.css'e dokunmaz, gerektiğinde daha özgül seçiciyle ezer.
   Hareket yalnız kullanıcıya cevaptır (tıklama, imleç) ve yalnız transform ile
   opacity'dir. Tek istisna SSS cevabının açılışı: tıklamayla, 300 ms'lik
   grid-template-rows geçişi (yükseklik ölçmeden açılan tek hafif yol).
   Kaynaklar dosya başında değil, ilgili blokta yazılı. */

/* ------------------------------------------------------------ Ortak: kişi */
/* Fotoğraf yok. Kişinin yerine favicon'daki mor karonun aynısı: B harfi. */
/* Harfli kare (koca "B") 11-05'te Berke'nin isteğiyle kalktı: AI şablonu gibi duruyordu.
   İsim ve unvan sade, solda ince mor çizgiyle. */
.kisi { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 12px; border-left: 2px solid var(--brand); }
.kisi-harf {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  background:
    radial-gradient(circle at 26% 16%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #9442ff 0%, #740aff 52%, #4a00b4 100%);
}
.kisi-yazi { min-width: 0; }
.kisi-ad { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }
.kisi-rol { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; }

/* ============================================================ SSS
   Synthflow/Goodcall kalıbı: başlık dar sol kolonda, sorular ortada.
   Designjoy kalıbı: sağda kaydırırken sabit kalan görüşme kartı. */
.sss-izgara {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr) 320px;
  gap: 32px 64px;
  align-items: start;
}
.sss-bas .block-h2 { font-size: clamp(30px, 2.7vw, 40px); margin-bottom: 0; }
#faq .faq-list { max-width: none; margin: 0; border-top: 1px solid var(--line); }
#faq .faq-item .faq-q {
  padding: 22px 48px 22px 0;
  transition: color 200ms var(--ease-out);
  outline-offset: 4px;
}
#faq .faq-item .faq-q:hover { color: var(--brand); }
/* Artı işareti açılınca 45 derece döner ve çarpıya dönüşür (transform). */
#faq .faq-item .faq-q::after,
#faq .faq-item[open] .faq-q::after {
  content: "+";
  top: 50%;
  right: 6px;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 22px;
  transition: transform 300ms var(--ease-out);
}
#faq .faq-item.sss-acik .faq-q::after,
#faq .faq-item[open]:not(.sss-hazir) .faq-q::after { transform: rotate(45deg); }

/* Yumuşak açılış: cevap kalite-d.js ile .sss-kap > .sss-ic içine alınır.
   0fr → 1fr satır geçişi içerik yüksekliğini ölçmeden açar. Metin ayrıca
   opacity + transform ile yerine oturur. */
.sss-kap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.sss-ic { overflow: hidden; min-height: 0; }
.sss-kap .faq-a {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
  max-width: 64ch;
}
.faq-item.sss-acik .sss-kap { grid-template-rows: 1fr; }
.faq-item.sss-acik .sss-kap .faq-a { opacity: 1; transform: none; transition-delay: 60ms; }

/* Yapışkan kart */
.sss-kart {
  position: sticky;
  top: 104px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sss-kart::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 40px;
  height: 2px;
  background: var(--brand);
}
.sss-kart-metin { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sss-kart-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background 180ms var(--ease-out);
}
.sss-kart-dugme:hover { background: var(--brand-2); }
.sss-kart-dugme .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
.sss-kart-dugme:hover .arrow { transform: translate(2px, -2px); }
.sss-kart-wa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  color: var(--ink);
}
.wa-ikon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--brand); }
.sss-kart-wa-yazi { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.sss-kart-no { font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sss-kart-wa:hover .sss-kart-no { color: var(--brand); }

@media (max-width: 1180px) {
  .sss-izgara { grid-template-columns: minmax(0, 1fr) 280px; }
  .sss-bas { grid-column: 1 / -1; }
  .sss-bas .block-h2 { font-size: clamp(30px, 3.6vw, 44px); }
}
@media (max-width: 820px) {
  .sss-izgara { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sss-kart { position: static; }
  #faq .faq-item .faq-q { font-size: 17px; padding-right: 40px; }
}

/* ============================================================ İLETİŞİM
   Framewear/Bilder kalıbı: solda kiminle konuşacağınız, sağda form. */
#contact .contact-copy .block-lede { margin-bottom: 28px; }
@media (min-width: 1081px) {
  #contact .contact-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}
.kim {
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kim-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kim-yanit {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand);
  background: rgba(116, 10, 255, 0.07);
  padding: 5px 10px;
}
.kim-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(116, 10, 255, 0.16); }
.kim-not { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.kim-bilgi {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.kim-bilgi dt { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.kim-bilgi dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.kim-bilgi dd a { font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(116, 10, 255, 0.3); transition: color 180ms var(--ease-out); }
.kim-bilgi dd a:hover { color: var(--brand); }
.kim-sehir { display: block; color: var(--ink-2); font-size: 13px; }
.kim-soz { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kim-soz li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2); }
/* Onay işareti: iki kenarlı döndürülmüş kutu */
.kim-soz li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
}

/* İlgi çipleri: mesaj kutusunun ilk satırını yazan yardımcı (yeni alan değil) */
.ilgi { display: flex; flex-direction: column; gap: 10px; }
.ilgi[hidden] { display: none; }
.ilgi-baslik { margin: 0; font-size: 13px; color: var(--ink-2); }
.ilgi-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.ilgi-cip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
/* Seçilince mor dolgu merkezden büyür (transform), metin beyaza döner. */
.ilgi-cip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brand);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.ilgi-cip:hover { border-color: rgba(116, 10, 255, 0.4); color: var(--ink); }
.ilgi-cip[aria-pressed="true"] { border-color: var(--brand); color: #fff; }
.ilgi-cip[aria-pressed="true"]::before { opacity: 1; transform: none; }
.ilgi-cip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 600px) {
  .kim { padding: 18px 16px; }
  .kim-bilgi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kim-soz { flex-direction: column; }
}

/* ============================================================ BLOG
   Goodcall kart düzeni, stok fotoğraf yerine tipografik kapak. */
#blog .blog-list {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
#blog .post-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 26px;
  overflow: hidden;
}
#blog .post-card > .post-title,
#blog .post-card > .post-excerpt,
#blog .post-card > .post-cta { margin-left: 28px; margin-right: 28px; }
#blog .post-card > .post-cta { margin-top: auto; }
#blog .post-card .post-title { font-size: 20px; }
.yazi-kapak {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 24px;
  min-height: 220px;
  padding: 22px 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: #fff;
  background: linear-gradient(160deg, #9442ff 0%, #740aff 52%, #4a00b4 100%);
}
#blog .post-card:nth-child(2) .yazi-kapak { background: linear-gradient(160deg, #5a1aa8 0%, #39106e 60%, #250a49 100%); }
#blog .post-card:nth-child(3) .yazi-kapak { background: linear-gradient(160deg, #7a2bff 0%, #6108d6 55%, #43069a 100%); }
#blog .post-card:nth-child(4) .yazi-kapak { background: linear-gradient(160deg, #4b1590 0%, #39106e 50%, #1f0840 100%); }
/* Magic UI DotPattern fikri, statik: sağ üstte sönen nokta ızgarası */
.yazi-kapak::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000, transparent 70%);
}
.yazi-cip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.yazi-sozler {
  margin-top: auto;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 15ch;
  text-wrap: balance;
  transition: transform 320ms var(--ease-out);
}
#blog .yazi-kapak .post-meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
}
#blog .post-card:hover .yazi-sozler { transform: translateY(-3px); }
@media (max-width: 760px) {
  #blog .blog-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .yazi-kapak { min-height: 160px; padding: 18px 18px 16px; }
  #blog .post-card > .post-title,
  #blog .post-card > .post-excerpt,
  #blog .post-card > .post-cta { margin-left: 18px; margin-right: 18px; }
  #blog .post-card .post-title { font-size: 18px; }
}

/* ============================================================ KAPANIŞ İKİLİSİ
   İki mor yarı kalır. Cila: statik nokta ızgarası, imleci izleyen yumuşak
   ışık (yalnız transform, kalite-d.js), parlaklık filtresi yerine opacity. */
.cta-split .cta-split-tile:hover { filter: none; }
.cta-split-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 100% 100%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 100% 100%, #000, transparent 72%);
}
.cta-split-blue { background: linear-gradient(160deg, #8a2dff 0%, #740aff 45%, #5d06cf 100%); }
.cta-split-navy { background: linear-gradient(160deg, #4a1590 0%, #39106e 50%, #280b4f 100%); }
.cta-isik {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 65%);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  will-change: transform;
}
.cta-split-tile.isik-acik .cta-isik { opacity: 1; }
.cta-split .cta-split-action {
  align-self: flex-start;
  gap: 14px;
  padding: 8px 8px 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  transition: border-color 220ms var(--ease-out);
}
.cta-split .cta-split-action .arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: #fff;
  color: var(--brand);
}
.cta-split-navy .cta-split-action .arrow { color: var(--navy); }
.cta-split-tile:hover .cta-split-action { border-color: rgba(255, 255, 255, 0.7); }
.cta-split-tile:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* ============================================================ ALT BİLGİ */
.foot-serit {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  padding: 16px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.foot-serit a { transition: color 180ms var(--ease-out); }
.foot-serit a:hover { color: var(--brand); }
.foot-serit-etiket { color: var(--ink-3); margin-right: 6px; }

/* Retell kalıbı: en altta yarısı kesik dev kelime işareti.
   Logo karosunun gradyanı (favicon.svg: #9442FF, #740AFF, #4A00B4). */
.foot { padding-bottom: 0; overflow: hidden; }
.foot-dev {
  --dev-boy: clamp(68px, 18.6vw, 300px);
  max-width: var(--container);
  margin: 48px auto 0;
  height: calc(var(--dev-boy) * 0.64);
  overflow: hidden;
  font-size: var(--dev-boy);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.foot-dev-yazi,
.foot-dev-harf {
  font-weight: 600;
  letter-spacing: -0.055em;
  background: linear-gradient(180deg, #9442ff 0%, #740aff 38%, #4a00b4 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.foot-dev-yazi { display: block; margin-left: -0.05em; }
.foot-dev-yazi.bolundu { background: none; }
/* Harf kutusu yanlara 0.04em taşar ki gradyan glif kenarında kesilmesin.
   Net ilerleme yine -0.055em: soldan -0.04, sağdan -0.095. */
.foot-dev-harf { display: inline-block; letter-spacing: 0; padding: 0 0.04em; margin: 0 -0.095em 0 -0.04em; }
@media (max-width: 820px) {
  .foot-serit { flex-direction: column; gap: 6px; }
  .foot-dev { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .sss-kap, .sss-kap .faq-a, #faq .faq-item .faq-q::after, .yazi-sozler, .ilgi-cip::before { transition: none; }
  .cta-isik { display: none; }
}

/* ==== kalite-g.css ==== */
/* ==========================================================================
   kalite-g.css: erişilebilirlik ve telefon cilası (bütün ana sayfa)
   Diğer dosyalara dokunmadan, daha özgül seçicilerle ezer. Ölçüm araçları:
   axe-core 4 (yerel), WCAG 2.2 AA (1.4.3 kontrast, 2.4.7 odak, 2.5.8 hedef
   boyutu), dokunma hedefi için Apple/Material 44 px kuralı.
   ========================================================================== */

/* --- 1. Kontrast ---------------------------------------------------------
   Üçüncül gri #9398a3 beyazda 2,89:1, #f5f5f7 zeminde 2,65:1 ölçüldü (axe,
   53 düğüm). AA için 4,5:1 gerekir. #676c77: beyazda 5,27, #f5f5f7'de 4,84,
   açık lavanta (#f3eefe) üstünde 4,63. Hiyerarşi korunur: --ink-2 (#5a5a64)
   hâlâ daha koyu, başlıklar (#202020) çok daha koyu. */
:root { --ink-3: #676c77; }

/* Koyu lavanta zeminlerde (#ebe1ff giden mesaj balonu, #f0f0f3 "Sırada"
   rozeti) yeni gri bile 4,2'de kalıyor, ikincil griye geçer (5,4+). */
.rsp-giden .rsp-saat,
.stu-sahne[data-durum="sira"] .stu-durum { color: var(--ink-2); }

/* Mor üstü yarı saydam beyaz: %60 beyaz #740aff üstünde 3,0, %72 3,85.
   12 px metin için yetmez. %88 beyaz morda 5,6, lacivertte 12+. */
.cta-split-eyebrow { color: rgba(255, 255, 255, 0.88); }
#blog .yazi-kapak .post-meta { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 820px) {
  .sektor-sekme[aria-selected="true"] .sektor-no { color: rgba(255, 255, 255, 0.9); }
}

/* --- 2. Odak halkası ------------------------------------------------------
   Form alanlarında odak yalnız 1 px kenar rengi ve %10 mor gölgeydi, gri
   kenarla zor ayrılıyordu. Klavye odağında belirgin 3 px halka. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(116, 10, 255, 0.32);
  outline: none;
}

/* Masaüstü dil düğmeleri 23 px boyundaydı. WCAG 2.5.8 alt sınırı 24 px. */
.nav .lang-switch button { min-height: 26px; }

/* WCAG 2.4.11 odak örtülmesi: Shift+Tab ile yukarı gezerken tarayıcı odaklı
   öğeyi pencerenin en üstüne kaydırıyor, öğe sabit menünün (72 px) altında
   kalıyordu. 1440 px'te 10 öğe ölçüldü (blog kartları, form alanları, kapanış
   karoları). Kaydırma payı menü boyu + nefes. Bağlantı tıklamasındaki yumuşak
   kaydırma (script.js) kendi ofsetini scrollTo ile verir, bundan etkilenmez. */
html { scroll-padding-top: 96px; }

/* --- 3. Azaltılmış hareket ------------------------------------------------
   style.css'teki reduce kuralı ".block-h2.reveal" (0,2,0) iken açılış kuralı
   ".js .block-h2.reveal" (0,3,0). Kazanan açılış kuralı olduğu için hareket
   istemeyen ziyaretçi de 51 açılış öğesinin 47'sini gözlemci tetikleyene
   kadar görünmez (opacity 0) görüyordu, içerik kayarak beliriyordu. */
@media (prefers-reduced-motion: reduce) {
  /* !important bilerek: açılış kuralları dosyalara dağılmış, özgüllükleri
     (0,2,0) ile (0,4,0) arasında değişiyor. Erişilebilirlik ezmesi hepsini
     tek yerden kapatmalı. */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- 4. Yatay kayan seçiciler: kenar ipucu --------------------------------
   Süreç ve sektör sekmeleri telefonda yatay kayıyor. Sağda yarım kalan
   sekme tek ipucuydu, beyaz zeminde kesik kenar "taşma hatası" gibi de
   okunabiliyor. kalite-g.js kaydırma konumuna göre kay-sol / kay-sag
   sınıfı verir, kenar yumuşakça söner. Maske yalnız sınıf değişince
   yeniden çizilir, kaydırma sırasında her kare değil. */
@media (max-width: 860px) {
  .adim-liste.kay-sag { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .adim-liste.kay-sol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .adim-liste.kay-sol.kay-sag { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }

  /* Süreç sekmesi adı "Ücretsiz ön görüşme (..." diye kesiliyordu. İki
     satıra kadar kırılır, bütün sekmeler aynı boyda kalır. */
  .adim-liste li { display: flex; }
  .adim-sekme,
  .adim-liste li:last-child .adim-sekme { max-width: 210px; min-height: 44px; align-content: start; }
  .adim-ad {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
  }
}
@media (max-width: 820px) {
  .sektor-liste.kay-sag { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .sektor-liste.kay-sol { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .sektor-liste.kay-sol.kay-sag { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
}

/* Klavyeyle gezilirken maske kalkar: odaklı sekme kenarda solup halkası
   kesilmesin. Ok tuşu kullanan kişinin kaydırma ipucuna ihtiyacı yok. */
@media (max-width: 860px) {
  .adim-liste:has(:focus-visible),
  .sektor-liste:has(:focus-visible) { -webkit-mask-image: none !important; mask-image: none !important; }
}

/* --- 5. Dokunma hedefleri (telefon ve tablet) ----------------------------
   390 px ölçümünde 23 hedef 44 px altındaydı. Cümle içindeki bağlantılar
   (alt bilgi yasal metni, "takvimi yeni sekmede açın") WCAG istisnası,
   onlara dokunulmadı. Yerleşim kaymasın diye görünen boy aynı kalıp
   dokunma alanı dolgu + eksi kenar boşluğuyla büyütüldü. */
@media (max-width: 860px) {
  .sektor-sekme { min-height: 44px; }
  .rsp-tekrar { min-height: 44px; }
  .ilgi-cip { min-height: 44px; }

  /* Logo: görünen boy 33 px, dokunma alanı 44 px. */
  .nav .brand,
  .foot .brand { padding-block: 6px; margin-block: -6px; }

  /* "İade koşulları →": 20 px yüksekti. */
  .guvence-link { padding-block: 12px; margin-block: 0 -12px; }

  /* İletişim kartındaki WhatsApp numarası: 18 px yüksekti. */
  .kim-bilgi dd a { display: inline-block; padding-block: 13px; margin-block: -13px; }

  /* Alt bilgi şeridi: 21 px yüksek ve 10 px aralıklı iki bağlantı alt
     alta duruyordu, eksi boşlukla büyütmek alanları üst üste bindirirdi.
     Sütuna dizilir, her satır 44 px. */
  .foot-serit { flex-direction: column; gap: 0; padding-block: 8px; }
  .foot-serit > a,
  .foot-serit > span { min-height: 44px; display: flex; align-items: center; }
}

/* Alt bilgi sütunları: style.css telefonda bağlantıya 12 px dolgu verip 44 px
   hedef yapmış, ama sütundaki 14 px aralık da duruyor. Satır adımı 59 px
   oluyor, alt bilgi 360 px'te üç ekran sürüyordu. Hedef 44 px kalır, aralık
   sıfırlanır, başlık altına küçük nefes. */
@media (max-width: 820px) {
  .foot-col { gap: 0; }
  .foot-col .foot-h { margin-bottom: 4px; }
}

/* Telefonda kart altındaki ikincil bağlantılar ("Ya da ücretsiz kapsam görüşmesi
   ayarla") 22 px yükseklikteydi. Parmak için en az 44 px. */
@media (max-width: 720px) {
  .price-actions .btn-flat { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ==== kalite-gecis.css ==== */
/* Geçiş katmanı (11-05). Berke: "geçişlere, kaliteye, ruha odaklan".
   Mevcut görünüm ve çizgi aynı. Yalnız hareketin kalitesi değişir.
   Kaynaklar: Lenis (darkroomengineering/lenis, MIT), React Bits SplitText
   ve Magnet fikirleri (vanilla). Hareket yalnız transform/opacity. */

/* Lenis'in kendi sınıfları (paket CSS'i). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Bölüm başlığı: script.js'in genel "aşağıdan soluklaşma" efekti yerine
   kelimeler bir maskenin içinden sırayla yükselir. Başlık kutusu sabit durur. */
.js .block-h2.reveal:has(.kl) { opacity: 1; transform: none; transition: none; }
.kl {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Türkçe ş, ç, ğ, y kuyrukları maskeye takılmasın. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.kl-i {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.block-h2.in .kl-i { transform: none; }

/* Başlıktan sonra açıklama, sonra kartlar gelsin: tek bir koreografi. */
.js .block-h2.reveal:has(.kl) ~ .block-lede.reveal,
.js .block-head .block-lede.reveal { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .kl-i { transform: none; transition: none; }
}