/* ==========================================================================
   BLOKLAR — "güven" grubu: surec · vaatler · yorumlar · sss · cta · kurumsal-bant
   Konsept B (Pastel Editoryal). Token'lar ve ortak sınıflar temel.css'ten gelir;
   burada yalnız blok içi düzen vardır. Renkler bağlamsal --renk-* ile (koyu zeminde kendiliğinden döner).
   ========================================================================== */

/* ==========================================================================
   1. SÜREÇ — numaralı, bağlantı çizgili adımlar (mobilde dikey akış)
   ========================================================================== */
.surec__liste {
  --surec-ic: var(--s-3);
  --surec-ara: var(--s-2);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--surec-ara);
}
.surec__oge {
  position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--s-2); row-gap: var(--s-1); align-content: start;
  padding: var(--s-4) var(--surec-ic); border-radius: var(--r-lg);
  background: var(--renk-yuzey); color: var(--renk-metin);
}
.bolum--beyaz .surec__oge { box-shadow: inset 0 0 0 1px var(--renk-cizgi); }
.surec__no {
  grid-column: 1; grid-row: 1 / span 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
.surec__rakam {
  font: 300 clamp(3rem, 2.4rem + 2vw, 4.5rem)/1 var(--f-serif);
  letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--renk-baslik);
}
/* bağlantı çizgisi — mobilde rakamın altından bir sonraki karta iner */
.surec__cizgi {
  position: relative; flex: 1 1 auto; width: 1px; min-height: var(--s-3); margin-left: .7rem;
  margin-bottom: calc((var(--s-4) + var(--surec-ara)) * -1);
  background: var(--renk-cizgi-guclu);
}
.surec__oge:last-child .surec__cizgi { margin-bottom: 0; }
.surec__oge:last-child .surec__cizgi::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--renk-vurgu); transform: translate(-50%, 50%);
}
.surec__baslik { grid-column: 2; font-size: var(--fs-h3); align-self: end; padding-top: .35rem; }
.surec__metin { grid-column: 2; display: grid; gap: .6em; color: var(--renk-soluk); font-size: var(--fs-sm); line-height: 1.6; }

@media (min-width: 640px) {
  .surec__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surec__oge { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) var(--surec-ic); }
  .surec__no { grid-row: auto; flex-direction: row; align-items: center; margin-bottom: var(--s-3); }
  .surec__baslik, .surec__metin { grid-column: 1; }
  .surec__baslik { padding-top: 0; }
  /* çizgi yataya döner; bir sonraki kartın kenarına kadar uzanır */
  .surec__cizgi {
    width: auto; height: 1px; min-height: 0; margin-left: 0; margin-bottom: 0;
    margin-right: calc((var(--surec-ic) + var(--surec-ara)) * -1);
  }
  .surec__oge:nth-child(2n) .surec__cizgi,
  .surec__oge:last-child .surec__cizgi { margin-right: 0; }
  .surec__oge:last-child .surec__cizgi::after { left: auto; right: 0; bottom: auto; top: 50%; transform: translate(50%, -50%); }
}
@media (min-width: 640px) and (max-width: 1099px) {
  /* 2 sütunda tek kalan son adım tam satıra yayılır */
  .surec__liste > .surec__oge:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .surec__liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .surec__liste--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .surec__liste--3 .surec__oge:nth-child(2n) .surec__cizgi,
  .surec__liste--4 .surec__oge:nth-child(2n) .surec__cizgi { margin-right: calc((var(--surec-ic) + var(--surec-ara)) * -1); }
  .surec__liste--3 .surec__oge:nth-child(3n) .surec__cizgi,
  .surec__liste--4 .surec__oge:nth-child(4n) .surec__cizgi,
  .surec__liste .surec__oge:last-child .surec__cizgi { margin-right: 0; }
}

/* ==========================================================================
   2. VAATLER — editoryal çizgili liste, pastel köşeli ikon
   ========================================================================== */
.vaatler__liste { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--renk-cizgi-guclu); }
.vaatler__oge {
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--renk-cizgi);
}
.vaatler__baslik { font-size: var(--fs-h3); }
.vaatler__metin { display: grid; gap: .6em; max-width: 40ch; color: var(--renk-soluk); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 639px) {
  /* mobilde ikon solda, metin sağda — dikey yer kazanır */
  .vaatler__oge { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); row-gap: var(--s-1); }
  .vaatler__ikon { grid-row: 1 / span 2; }
  .vaatler__baslik, .vaatler__metin { grid-column: 2; }
  .vaatler__baslik { align-self: center; }
}
@media (min-width: 640px) {
  .vaatler__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vaatler__liste--1 { grid-template-columns: minmax(0, 1fr); }
  .vaatler__oge { padding: var(--s-5) var(--s-4) var(--s-5) 0; }
  .vaatler__oge:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--renk-cizgi); }
}
@media (min-width: 1100px) {
  .vaatler__liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vaatler__liste--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vaatler__liste--3 .vaatler__oge, .vaatler__liste--4 .vaatler__oge,
  .vaatler__liste--3 .vaatler__oge:nth-child(even), .vaatler__liste--4 .vaatler__oge:nth-child(even) {
    padding: var(--s-5) var(--s-4); border-left: 1px solid var(--renk-cizgi);
  }
  .vaatler__liste--4 .vaatler__oge { border-bottom: 0; }
  .vaatler__liste--3 .vaatler__oge:nth-child(3n+1), .vaatler__liste--4 .vaatler__oge:nth-child(4n+1) { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   3. YORUMLAR — solda puan rozeti, sağda numaralı temalar
   ========================================================================== */
.yorumlar__izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.yorumlar__rozet {
  --rozet-dekor: var(--c-dekor-parlak);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s-2); align-content: center; justify-items: start;
  padding: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); border-radius: var(--r-xl);
}
.yorumlar__rozet--pastel { background: var(--c-mist); }
.yorumlar__rozet--yuzey { background: var(--renk-yuzey); --rozet-dekor: var(--c-mist); }
.bolum--koyu .yorumlar__rozet--yuzey { --rozet-dekor: var(--renk-yuzey-yari); }
.yorumlar__rozet::after {
  content: ""; position: absolute; z-index: -1; right: -80px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%; background: var(--rozet-dekor);
}
.yorumlar__puan {
  margin: 0; font: 300 clamp(5rem, 3.5rem + 7vw, 9rem)/.9 var(--f-serif);
  letter-spacing: -.05em; font-variant-numeric: lining-nums; color: var(--renk-baslik);
}
.yorumlar__puan small { font-size: .3em; letter-spacing: 0; margin-left: .2em; color: var(--renk-soluk); }
.yorumlar__rozet .yildizlar { gap: 4px; }
.yorumlar__rozet .yildizlar .ikon { width: 22px; height: 22px; }
.yorumlar__adet { margin: 0; font-weight: 600; color: var(--renk-baslik); }
.yorumlar__tarih { margin: 0; font-size: var(--fs-xs); color: var(--renk-soluk); }
.yorumlar__dugme { margin-top: var(--s-2); }

.yorumlar__ust { margin: 0 0 var(--s-2); }
.yorumlar__liste { counter-reset: tema; border-top: 1px solid var(--renk-cizgi-guclu); }
.yorumlar__tema {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-1) var(--s-2);
  padding-block: var(--s-3); border-bottom: 1px solid var(--renk-cizgi);
}
.yorumlar__tema::before {
  counter-increment: tema; content: counter(tema, decimal-leading-zero);
  grid-row: 1 / span 3; padding-top: .2rem;
  font-family: var(--f-serif); font-style: italic; font-variant-numeric: lining-nums; color: var(--renk-soluk);
}
.yorumlar__tema-baslik { grid-column: 2; font-size: 1.3125rem; line-height: 1.25; }
.yorumlar__tema-metin { grid-column: 2; margin: 0; color: var(--renk-soluk); font-size: var(--fs-sm); }
.yorumlar__not { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--renk-soluk); max-width: 60ch; }

@media (min-width: 960px) {
  .yorumlar__izgara { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
  .yorumlar__izgara--tek { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .yorumlar__rozet { position: sticky; top: calc(var(--header-h) + var(--s-3)); }
  .yorumlar__izgara--tek .yorumlar__rozet { position: relative; top: auto; }
}

/* gerçek alıntı kartları (site.json gercek_yorumlar doluysa) */
.yorumlar__izgara + .yorumlar__alintilar { margin-top: var(--s-6); }
.yorumlar__alinti { overflow: hidden; isolation: isolate; }
.yorumlar__figur { margin: 0; display: grid; gap: var(--s-3); align-content: space-between; height: 100%; }
.yorumlar__soz { margin: 0; display: grid; gap: .7em; font-size: var(--fs-base); line-height: 1.6; color: var(--renk-metin); }
.yorumlar__soz::before {
  content: "\201C"; display: block; height: .55em; margin-bottom: var(--s-1);
  font: italic 300 4rem/1 var(--f-serif); color: var(--pastel-koyu, var(--c-sage-deep));
}
.yorumlar__soz p { margin: 0; }
.yorumlar__imza { display: grid; gap: .15rem; padding-top: var(--s-2); border-top: 1px solid var(--renk-cizgi); }
.yorumlar__ad { font-weight: 600; color: var(--renk-baslik); }
.yorumlar__alinti-tarih { font-size: var(--fs-xs); color: var(--renk-soluk); }

/* ==========================================================================
   4. SSS — <details name> akordeon, editoryal çizgili liste
   ========================================================================== */
.sss__liste { border-top: 1px solid var(--renk-cizgi-guclu); }
.sss__oge { border-bottom: 1px solid var(--renk-cizgi); }
.sss__soru {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2);
  min-height: 72px; padding-block: var(--s-3); list-style: none; cursor: pointer;
  border-radius: var(--r-sm);
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__soru::marker { content: ""; }
.sss__no { display: none; padding-top: .3rem; align-self: start; }
.sss__soru-yazi {
  font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.5rem);
  line-height: 1.25; letter-spacing: -.01em; color: var(--renk-baslik); overflow-wrap: anywhere;
}
.sss__isaret {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--renk-cizgi-guclu); color: var(--renk-vurgu);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.sss__soru:hover .sss__isaret { border-color: var(--renk-vurgu); }
.sss__oge[open] .sss__isaret { transform: rotate(45deg); background: var(--renk-vurgu); border-color: var(--renk-vurgu); color: var(--c-bg); }
.bolum--koyu .sss__oge[open] .sss__isaret { color: var(--c-brand-deep); }
.sss__cevap {
  display: grid; gap: .8em; max-width: 68ch; padding-bottom: var(--s-4);
  color: var(--renk-soluk); line-height: 1.65;
}
.sss__cevap p { margin: 0; }
@media (min-width: 768px) {
  .sss__soru { grid-template-columns: 56px minmax(0, 1fr) auto; padding-block: var(--s-4); }
  .sss__no { display: block; }
  .sss__cevap { margin-left: calc(56px + var(--s-2)); padding-bottom: var(--s-5); }
}
@media (prefers-reduced-motion: no-preference) {
  .sss__oge[open] .sss__cevap { animation: sss-ac var(--t-med) var(--ease); }
}
@keyframes sss-ac { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   5. CTA — geniş çağrı bandı (pastel ya da koyu kutu)
   ========================================================================== */
.cta__kutu {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
  padding: clamp(2rem, 1rem + 5vw, 5rem); border-radius: var(--r-xl);
  --renk-soluk: var(--c-muted-strong);
}
.cta__kutu--koyu { --renk-soluk: var(--c-on-dark-muted); }
.cta__kutu--yuzey { background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--renk-cizgi); }
.cta__kutu::before {
  content: ""; position: absolute; z-index: -1; right: -110px; top: -130px;
  width: 380px; height: 380px; border-radius: 50%; background: var(--c-dekor-daire);
}
.cta__kutu::after {
  content: ""; position: absolute; z-index: -1; left: 34%; bottom: -100px;
  width: 190px; height: 190px; border-radius: 50%; border: 28px solid var(--c-dekor-halka);
}
.cta__kutu--koyu::before { background: none; border: 64px solid var(--c-dekor-koyu-halka); }
.cta__kutu--koyu::after { border: 0; background: var(--c-dekor-koyu-daire); }
.cta__kutu--yuzey::before { background: var(--c-sage); opacity: .6; }
.cta__kutu--yuzey::after { border-color: var(--c-powder); }
.cta__govde .bolum-bas { margin-bottom: 0; }
.cta__govde .bolum-bas__baslik { max-width: 20ch; }
.cta__govde .bolum-bas__metin { max-width: 54ch; }
.cta__butonlar { margin-top: 0; }
@media (min-width: 960px) {
  .cta__kutu { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: var(--s-8); align-items: end; }
  .cta__butonlar { flex-direction: column; align-items: stretch; }
  .cta__butonlar .cta__btn { width: 100%; }
  .cta__butonlar .btn--yazi { align-self: flex-start; }
}

/* ==========================================================================
   6. KURUMSAL BANT — koyu petrol kutu, dev halka dekoru
   ========================================================================== */
.kurumsal-bant__kutu {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6);
  padding: clamp(2rem, 1rem + 5vw, 5rem); border-radius: var(--r-xl);
}
.kurumsal-bant__kutu::before {
  content: ""; position: absolute; z-index: -1; right: -120px; top: -120px;
  width: 420px; height: 420px; border-radius: 50%; border: 64px solid var(--c-dekor-koyu-halka);
}
.kurumsal-bant__kutu::after {
  content: ""; position: absolute; z-index: -1; left: 38%; bottom: -90px;
  width: 180px; height: 180px; border-radius: 50%; background: var(--c-dekor-koyu-daire);
}
.kurumsal-bant__govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.kurumsal-bant__govde .bolum-bas { margin-bottom: 0; }
.kurumsal-bant__govde .bolum-bas__ust { color: var(--renk-soluk); }
.kurumsal-bant__govde .bolum-bas__baslik { max-width: 16ch; }
.kurumsal-bant__metin { display: grid; gap: .75em; max-width: 52ch; color: var(--renk-soluk); font-size: var(--fs-lg); line-height: 1.55; }
.kurumsal-bant__metin p { margin: 0; }
.kurumsal-bant__butonlar { margin-top: var(--s-4); }
.kurumsal-bant__yan {
  display: grid; gap: var(--s-2); align-content: start; justify-items: start;
  padding: var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--renk-cizgi-guclu); background: var(--renk-yuzey);
}
.kurumsal-bant__yan-ust { color: var(--renk-soluk); }
.kurumsal-bant__yan-ad { margin: 0; font-family: var(--f-serif); font-size: var(--fs-h3); line-height: 1.15; color: var(--renk-baslik); }
.kurumsal-bant__yan-metin { margin: 0; color: var(--renk-soluk); font-size: var(--fs-sm); }
.kurumsal-bant__bag { border-bottom: 1px solid var(--renk-cizgi-guclu); }
.kurumsal-bant__bag:hover .ikon { transform: translate(2px, -2px); }
@media (min-width: 960px) {
  /* yalnız kardeş şirket: başlık solda, metin + buton sağda */
  .kurumsal-bant__kutu:not(.kurumsal-bant__kutu--ikili) .kurumsal-bant__govde {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: end;
  }
  /* özel içerik + kardeş şirket kartı */
  .kurumsal-bant__kutu--ikili { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--s-8); align-items: end; }
}

/* ==========================================================================
   YAZDIRMA
   ========================================================================== */
@media print {
  .surec__oge, .yorumlar__rozet, .cta__kutu, .kurumsal-bant__kutu, .kurumsal-bant__yan { box-shadow: none; border: 1px solid var(--renk-cizgi-guclu); background: none !important; }
  .cta__kutu, .kurumsal-bant__kutu { padding: var(--s-3); }
  .surec__cizgi, .yorumlar__dugme, .sss__isaret, .cta__kutu::before, .cta__kutu::after,
  .kurumsal-bant__kutu::before, .kurumsal-bant__kutu::after, .yorumlar__rozet::after { display: none; }
  .yorumlar__rozet { position: static; }
}