/* ==========================================================================
   Lotus Heykel · alt sayfalar
   --------------------------------------------------------------------------
   Ana sayfa bir scroll deneyimi; bunlar okunacak sayfalar. Aynı jetonlar, aynı
   künye şeması, aynı tipografi tabanı. Scroll motoru burada yalnızca giriş
   açılışları için kullanılıyor (`flow` aktları + data-sc-in), sahne yok.
   ========================================================================== */

body { background: var(--sc-canvas); }

.page { padding-top: var(--bar-h); }

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

/* ------------------------------------------------------------- sayfa başı --
   Tam ekran değil. Alt sayfada tam ekran bir hero, okumaya gelen ziyaretçiye
   ödenmiş bir scroll vergisidir. */
.phero {
  padding-block: clamp(var(--sc-8), 11vh, var(--sc-10)) var(--sc-7);
  border-bottom: 1px solid var(--sc-hairline);
}
.phero__kicker {
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 var(--sc-4);
}
.phero__title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
  max-width: 18ch;
}
.phero__lede {
  margin: var(--sc-5) 0 0;
  max-width: 56ch;
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  color: var(--sc-ink);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- bölümler -- */
.sec { padding-block: clamp(var(--sc-8), 9vh, var(--sc-10)); }
.sec + .sec { border-top: 1px solid var(--sc-hairline); }
.sec__title {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  text-wrap: balance;
  margin: 0 0 var(--sc-5);
}
.sec__body { max-width: 58ch; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sec__body + .sec__body { margin-top: var(--sc-4); }

/* ------------------------------------------------------- hizmet blokları --
   Zikzak en fazla iki ardışık: üçüncüde düzen ailesi değişiyor, yoksa sayfa
   kendini tekrar eden bir şeride döner. */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--sc-6), 5vw, var(--sc-9));
  align-items: center;
}
.svc + .svc { margin-top: clamp(var(--sc-8), 9vh, var(--sc-10)); }
.svc:nth-of-type(even) .svc__media { order: 2; }
.svc__media { margin: 0; }
.svc__media img {
  width: 100%; height: auto;
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3);
}
.svc__name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 400;
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-4);
}
.svc__body { max-width: 46ch; color: var(--sc-ink-soft); font-size: var(--sc-t-base); margin: 0 0 var(--sc-5); }

/* Küçük hizmetler: blok değil, iki sütunlu yoğun bir liste. Aynı künye şeması,
   ama fotoğrafı olmayan bir hizmete tam blok vermek boşluk üretirdi. */
.mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(var(--sc-5), 3vw, var(--sc-7));
}
.mini__item { margin: 0; }
.mini__item img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  margin-bottom: var(--sc-4);
}
.mini__name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 400;
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-3);
}

/* ---------------------------------------------------------------- galeri --
   Üç eşit sütun değil: asimetrik, ilk öğe geniş. */
.gal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(var(--sc-4), 2vw, var(--sc-6));
}
.gal__item { margin: 0; position: relative; border-radius: var(--sc-r-md); overflow: clip; background: var(--sc-surface); }
.gal__item--wide { grid-column: span 2; }
@media (max-width: 720px) { .gal__item--wide { grid-column: span 1; } }
.gal__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gal__item figcaption {
  padding: var(--sc-4);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  border-top: 1px solid var(--sc-hairline);
}

/* ---------------------------------------------------------------- adımlar --
   Kart yok. Boşlukta düz tipografi ve tek saç çizgisi.
   li'nin üç çocuğu var (::before, h3, p); iki sütunlu bir grid'de otomatik
   yerleşim p'yi sayaç sütununa atar ve paragraf kelime başına bir satıra iner.
   İkisi de açıkça ikinci sütuna. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--sc-5);
  padding-block: var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
  counter-increment: step;
}
.steps li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  color: var(--sc-accent);
  line-height: 1.2;
}
.steps h3 {
  grid-column: 2;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 400;
  letter-spacing: var(--sc-track-snug);
  margin: 0 0 var(--sc-3);
}
.steps p { grid-column: 2; margin: 0; max-width: 54ch; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }

/* ----------------------------------------------------------------- form --- */
.form { display: grid; gap: var(--sc-5); max-width: 34rem; }
.field { display: grid; gap: var(--sc-2); }
.field label {
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-sm);
  padding: var(--sc-3) var(--sc-4);
  color: var(--sc-ink);
  font-size: var(--sc-t-sm);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--sc-ink-soft); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }

.btn {
  justify-self: start;
  display: inline-block;
  font-family: inherit;
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent-ink);
  background: var(--sc-accent);
  border: 0;
  text-decoration: none;
  padding: var(--sc-3) var(--sc-6);
  border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e2);
  cursor: pointer;
  transition: filter 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.08); } }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.note {
  border-left: 1px solid var(--sc-accent);
  padding-left: var(--sc-4);
  max-width: 52ch;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}

/* --------------------------------------------------------------- alt bilgi -- */
.sfoot {
  border-top: 1px solid var(--sc-hairline);
  padding-block: var(--sc-8) var(--sc-7);
}
.sfoot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: clamp(var(--sc-6), 4vw, var(--sc-8));
}
.sfoot__mark img { height: 1.6rem; width: auto; margin-bottom: var(--sc-4); }
.sfoot__tag { font-size: var(--sc-t-base); color: var(--sc-ink-soft); max-width: 34ch; margin: 0; }
.sfoot h2 {
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-4);
  font-weight: 500;
}
.sfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.sfoot li { font-size: var(--sc-t-sm); }
.sfoot a { color: var(--sc-ink); text-decoration: none; }
.sfoot a:hover { text-decoration: underline; }
/* Sosyal bağlantılar: marka simgesi aksan renginde, yazı mürekkep renginde.
   Simge tek başına bırakılmadı; yanında adı da yazıyor. */
.sfoot__sos { display: inline-flex; align-items: center; gap: var(--sc-3); }
.sfoot__sos svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--sc-accent); }
.sfoot__adres { color: var(--sc-ink-soft); line-height: 1.55; max-width: 26ch; }
.sfoot__legal {
  margin-top: var(--sc-8);
  padding-top: var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ------------------------------------------------------------- açılışlar --
   Alt sayfalarda scroll motoru KULLANILMIYOR ve bu bilinçli.

   Motorun `data-sc-in` mekanizması içeriği `opacity: 0` ile başlatıp
   IntersectionObserver ile açıyor. Bir scroll deneyiminde doğru olan bu; okunmak
   ve aranmak için var olan bir hizmet sayfasında değil. Script yüklenmezse,
   engellenirse veya hata verirse sayfanın yarısı kalıcı olarak boş kalır. Bir
   içerik sayfasının içeriği hiçbir koşulda JS'e bağlı olmamalı.

   Yerine CSS scroll-driven animasyon: destekleyen tarayıcıda aynı yükselme,
   desteklemeyende içerik doğrudan görünür. Her iki durumda da JS'siz. */
/* Animasyon YALNIZCA konumu sürüyor, opaklığı değil ve bu ölçülmüş bir karardan
   sonra böyle.

   Önce opaklık da animasyondaydı. Ölçünce şu çıktı: `entry` aralığı,
   viewport'tan UZUN bir blokta hiç tamamlanmıyor, çünkü blok hiçbir zaman
   tamamen "girmiş" olmuyor. Sonuç, iniş ekranındaki ilk hizmet bloğunun
   0.749 opaklıkta takılıp orada kalmasıydı: okuyucunun asla net göremediği
   metin.

   Konum dekorasyondur, opaklık anlaşılırlığı taşır. Animasyon tamamlansa da
   tamamlanmasa da, hangi tarayıcıda olursa olsun, içerik her zaman tam
   okunur. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc, .mini__item, .gal__item, .steps li {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 42%;
    }
    @keyframes rise-in {
      from { transform: translate3d(0, 16px, 0); }
      to   { transform: none; }
    }
  }
}

/* ----------------------------------------------------------------- mobil -- */
@media (max-width: 860px) {
  .phero__title { font-size: var(--sc-t-2xl); }
  .phero__lede { font-size: var(--sc-t-base); }
  .svc { grid-template-columns: 1fr; gap: var(--sc-5); }
  .svc:nth-of-type(even) .svc__media { order: 0; }
  .steps li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sc-4); }
}

/* ------------------------------------------------------------------ harita --
   Google'ın verdiği gömme 600x450 sabit ölçülü; öyle bırakılırsa dar ekranda
   sayfayı yatay taşırır. Sarmalayıcı oranı tutuyor, iframe onu dolduruyor. */
.map {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sc-r-md);
  overflow: clip;
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .map { aspect-ratio: 4 / 3; } }

/* ================================================================== ÜRÜNLER ==
   build.mjs'nin ürettiği sayfalar. Kart yok: her ürün bir bağlantı, görsel ve
   üç satır. Aynı künye şeması, aynı düğme. */

/* süzgeç */
.ufiltre { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-bottom: var(--sc-7); }
.ufiltre__b {
  font: inherit; font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); background: none;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill);
  padding: var(--sc-2) var(--sc-4); cursor: pointer;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ufiltre__b:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); } }
.ufiltre__b.is-on { color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent); }

/* ızgara: asimetrik değil ama eşit de değil; ilk satır geniş kart alabilir */
.ugrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: clamp(var(--sc-5), 3vw, var(--sc-7));
}
.ukart {
  display: grid; gap: var(--sc-2);
  text-decoration: none; color: inherit;
  border-radius: var(--sc-r-md);
  transition: transform 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ukart:hover { transform: translateY(-3px); } }
/* Süzgeç hidden özniteliğiyle gizliyor; display:grid tarayıcı kuralını ezdiği için
   burada açıkça kapatılmalı. Yoksa süzgeç hiçbir şeyi gizlemez. */
.ukart[hidden] { display: none; }
.ukart__gorsel {
  display: block; aspect-ratio: 4 / 5; overflow: clip;
  border-radius: var(--sc-r-md); background: var(--sc-surface);
  box-shadow: var(--sc-e2);
}
.ukart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .ukart:hover .ukart__gorsel img { transform: scale(1.03); } }
.ukart__kat {
  margin-top: var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.ukart__ad {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 400;
  letter-spacing: var(--sc-track-snug); line-height: 1.15;
}
.ukart__fiyat { font-size: var(--sc-t-sm); color: var(--sc-ink); }
.ukart__fiyat small { color: var(--sc-ink-soft); font-size: 0.85em; }
.ubos { color: var(--sc-ink-soft); }

/* ürün sayfası */
.ucrumb {
  padding-top: var(--sc-5);
  display: flex; gap: var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.ucrumb a { color: var(--sc-ink-soft); text-decoration: none; }
.ucrumb a:hover { color: var(--sc-ink); }

.urun {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(var(--sc-6), 5vw, var(--sc-9));
  align-items: start;
}
.ugal { display: grid; gap: var(--sc-3); }
.ugal__ana { margin: 0; border-radius: var(--sc-r-md); overflow: clip; background: var(--sc-surface); box-shadow: var(--sc-e3); }
.ugal__ana img { width: 100%; height: auto; }
.ugal__kucuk { display: flex; gap: var(--sc-2); flex-wrap: wrap; }
.ugal__k {
  width: 4.5rem; aspect-ratio: 1; padding: 0; border: 2px solid transparent;
  border-radius: var(--sc-r-sm); overflow: clip; background: var(--sc-surface); cursor: pointer;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.ugal__k img { width: 100%; height: 100%; object-fit: cover; }
.ugal__k.is-on { border-color: var(--sc-accent); }

.urun__ad {
  font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); font-weight: 400;
  line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight);
  text-wrap: balance; margin: 0 0 var(--sc-4);
}
.urun__ozet { max-width: 46ch; color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.5; margin: 0 0 var(--sc-5); }
.urun__fiyat { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xl); }
.urun__fiyat strong { font-weight: 500; }
.urun__not { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.urun__cta { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-bottom: var(--sc-7); }
.btn--ghost { color: var(--sc-ink); background: none; border: 1px solid var(--sc-hairline-strong); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { filter: none; border-color: var(--sc-ink-soft); } }

@media (max-width: 860px) {
  .urun { grid-template-columns: 1fr; }
  .urun__ad { font-size: var(--sc-t-2xl); }
}

/* ========================================================= SEPET ve ÖDEME ==
   Ürün sayfasındaki adet + sepete ekle, sepet (sepet.html) ve ödeme
   (siparis.html). Hepsini build.mjs üretir, davranış sepet.js'de.
   Düzen Shopify'ınki: solda iş, sağda yapışkan özet; telefonda tek sütun. */

/* ---- ortak parçalar ------------------------------------------------------ */

/* adet seçici */
.stepper {
  display: inline-grid; grid-template-columns: 2.5rem 3rem 2.5rem;
  width: max-content; justify-self: start;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill);
  background: var(--sc-surface); overflow: clip;
}
.stepper button {
  font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink-soft);
  background: none; border: 0; cursor: pointer; height: 2.6rem;
  transition: color var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out);
}
.stepper button:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.stepper input {
  width: 100%; height: 2.6rem; text-align: center; font: inherit; font-size: var(--sc-t-sm);
  color: var(--sc-ink); background: none; border: 0;
  -moz-appearance: textfield; font-variant-numeric: tabular-nums;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: -2px; }

/* tutar listesi: sepette ve ödemede aynı şema */
.tutar { margin: var(--sc-5) 0 0; display: grid; gap: var(--sc-3); }
.tutar > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4); font-size: var(--sc-t-sm); }
.tutar dt { color: var(--sc-ink-soft); }
.tutar dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tutar__son {
  margin-top: var(--sc-2); padding-top: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
}
.tutar__son dt { color: var(--sc-ink); font-size: var(--sc-t-base); }
.tutar__son dd small {
  color: var(--sc-ink-soft); font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide); margin-right: var(--sc-2);
}
.tutar__son dd strong {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 400;
  letter-spacing: var(--sc-track-snug);
}

/* güven listesi: onay kutusu değil, bilgi. */
.guven {
  list-style: none; margin: var(--sc-5) 0 0; padding: 0;
  display: grid; gap: var(--sc-2);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.5;
}
.guven li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--sc-2); }
.guven li::before {
  content: ""; width: 5px; height: 5px; margin-top: 0.5em;
  border-radius: 50%; background: var(--sc-accent);
}

/* ---- ürün sayfası: adet + sepete ekle ------------------------------------ */
.urun__al { display: grid; gap: var(--sc-4); margin-bottom: var(--sc-4); }
.urun__adet { display: grid; gap: var(--sc-2); }
.urun__adet label {
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.urun__al .urun__cta { margin-bottom: 0; }
.urun__al .btn { font: inherit; font-size: var(--sc-t-sm); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.urun__sor { margin: 0 0 var(--sc-7); font-size: var(--sc-t-sm); }

/* ---- sepet sayfası ------------------------------------------------------- */
.sp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  gap: clamp(var(--sc-6), 4vw, var(--sc-8));
  align-items: start;
}
.sp__ana { display: grid; gap: var(--sc-6); min-width: 0; }
.sp__liste { list-style: none; margin: 0; padding: 0; display: grid; }

.sp__satir {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto auto;
  gap: var(--sc-4) clamp(var(--sc-4), 3vw, var(--sc-6));
  align-items: center;
  padding-block: var(--sc-5);
  border-bottom: 1px solid var(--sc-hairline);
}
.sp__satir:first-child { border-top: 1px solid var(--sc-hairline); }
.sp__gorsel {
  display: block; width: 6rem; aspect-ratio: 4 / 5; overflow: clip;
  border-radius: var(--sc-r-sm); background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
}
.sp__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .sp__gorsel:hover img { transform: scale(1.04); } }
.sp__bilgi { display: grid; gap: var(--sc-1); min-width: 0; }
.sp__kat {
  margin: 0; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.sp__ad {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2;
  color: var(--sc-ink); text-decoration: none; text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) { .sp__ad:hover { color: var(--sc-accent); } }
.sp__birim { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.sp__birim small { font-size: 0.9em; }
.sp__adet { display: grid; justify-items: center; gap: var(--sc-2); }
.sp__sil {
  font: inherit; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; color: var(--sc-ink-soft);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.25em;
}
.sp__sil:hover { color: var(--sc-ink); }
.sp__tutar {
  margin: 0; justify-self: end; white-space: nowrap;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.sp__devam { justify-self: start; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-decoration: none; }
.sp__devam:hover { color: var(--sc-ink); }

.sp__yan { position: sticky; top: calc(var(--bar-h) + var(--sc-5)); }
.sp__kart {
  padding: clamp(var(--sc-5), 3vw, var(--sc-6));
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2);
}
.sp__kart-ad {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 400;
  letter-spacing: var(--sc-track-snug); margin: 0;
}
.sp__btn { display: block; width: 100%; margin-top: var(--sc-5); text-align: center; padding-block: var(--sc-4); }
.sp__sor { margin: var(--sc-5) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.sp__sor a { color: var(--sc-accent); }

/* boş sepet */
.sp__bos { padding-block: var(--sc-7) var(--sc-8); max-width: 44ch; }
.sp__bos-ikon { width: 2.5rem; height: 2.5rem; color: var(--sc-accent); display: block; margin-bottom: var(--sc-4); }
.sp__bos-ad {
  font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 400;
  letter-spacing: var(--sc-track-tight); margin: 0 0 var(--sc-4);
}
.sp__bos-cta { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* telefonda ekrana sabit toplam çubuğu: özet kartı listenin altında kalıyor ve
   "ödemeye geç" ilk ekranda hiç görünmüyordu. */
.sp__bar { display: none; }
@media (max-width: 860px) {
  .sp { grid-template-columns: 1fr; gap: var(--sc-6); padding-bottom: 5.5rem; }
  .sp__yan { position: static; }
  /* Telefonda dört sütun sığmıyor: görsel iki satır boyunca solda, sağda üstte
     ürün, altta adet ile tutar yan yana. "Kaldır" adet seçicinin altına iner,
     çünkü aynı satırda dördü birden 390px'e sığmıyor. */
  .sp__satir {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    grid-template-areas: "gorsel bilgi bilgi" "gorsel adet tutar";
    column-gap: var(--sc-4); row-gap: var(--sc-4);
    align-items: start;
  }
  .sp__gorsel { grid-area: gorsel; width: 5rem; }
  .sp__bilgi { grid-area: bilgi; }
  .sp__adet { grid-area: adet; justify-items: start; gap: var(--sc-2); }
  .sp__tutar { grid-area: tutar; justify-self: end; align-self: center; font-size: var(--sc-t-base); }
  .sp__bar {
    position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
    padding: var(--sc-3) var(--sc-gutter);
    padding-bottom: calc(var(--sc-3) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--sc-hairline);
  }
  .sp__bar[hidden] { display: none; }
  .sp__bar-tutar { display: grid; gap: 2px; min-width: 0; }
  .sp__bar-tutar span { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
  .sp__bar-tutar strong {
    font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  .sp__bar .btn { padding-inline: var(--sc-5); }
}

/* ---- ödeme sayfası ------------------------------------------------------- */
.co {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem);
  align-items: start;
  min-height: calc(100vh - var(--bar-h));
}
.co__form, .co__bos, .co__tesekkur-ic {
  padding: clamp(var(--sc-6), 5vw, var(--sc-8)) clamp(var(--sc-5), 5vw, var(--sc-8));
  justify-self: end; width: min(100%, 42rem);
}
.co__bos { grid-column: 1 / -1; justify-self: center; text-align: center; }

/* adım göstergesi */
.co__adim { margin-bottom: var(--sc-6); }
.co__adim ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.co__adim li { display: flex; align-items: center; gap: var(--sc-3); }
.co__adim li + li::before { content: "\203A"; color: var(--sc-hairline-strong); }
.co__adim a { color: inherit; text-decoration: none; }
.co__adim a:hover { color: var(--sc-ink); }
.co__adim .is-ok, .co__adim .is-ok a { color: var(--sc-accent); }
.co__adim [aria-current="step"] { color: var(--sc-ink); }

.co__baslik {
  font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); font-weight: 400;
  line-height: var(--sc-leading-tight); letter-spacing: var(--sc-track-tight);
  margin: 0 0 var(--sc-7); text-wrap: balance;
}
.co__baslik:focus { outline: none; }
.co__h {
  display: flex; align-items: center; gap: var(--sc-3);
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 400;
  letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-4);
}
/* Numara: adımların kaç tane olduğunu ve nerede olunduğunu söylüyor. */
.co__no {
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border: 1px solid var(--sc-accent); border-radius: 50%;
  font-family: var(--sc-font-text); font-size: 0.72rem; color: var(--sc-accent);
}
.co__blok { display: grid; gap: var(--sc-4); margin-bottom: var(--sc-7); }
.co__blok .field label small { color: var(--sc-ink-soft); text-transform: none; letter-spacing: 0; margin-left: var(--sc-1); }
.co__satir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.co__satir--3 { grid-template-columns: 1fr 1fr 7rem; }
@media (max-width: 480px) { .co__satir, .co__satir--3 { grid-template-columns: 1fr; } }

.co__yollar { display: grid; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); overflow: clip; }
.co__yol {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sc-2) var(--sc-3); align-items: center;
  padding: var(--sc-4); cursor: pointer; background: var(--sc-surface);
  border-top: 1px solid var(--sc-hairline);
  transition: background var(--sc-d-fast) var(--sc-ease-out);
}
.co__yol:first-child { border-top: 0; }
.co__yol input { accent-color: var(--sc-accent); margin: 0; }
.co__yol:has(input:checked) { background: color-mix(in oklab, var(--sc-accent) 10%, var(--sc-surface)); }
.co__yol-ad { font-size: var(--sc-t-sm); color: var(--sc-ink); }
.co__yol-ad small { color: var(--sc-ink-soft); margin-left: var(--sc-2); }
.co__yol-acik { grid-column: 2; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; display: none; }
.co__yol:has(input:checked) .co__yol-acik { display: block; }
.co__yol.is-off { cursor: not-allowed; }
.co__yol.is-off .co__yol-ad { color: var(--sc-ink-soft); }
.co__btn { display: block; width: 100%; text-align: center; padding-block: var(--sc-4); font-size: var(--sc-t-base); }
.co__form .note { margin-top: var(--sc-4); }

/* özet: sağ sütun, farklı zemin, yapışkan */
.co__ozet { background: var(--sc-surface); border-left: 1px solid var(--sc-hairline); align-self: stretch; }
.co__ozet-ic {
  position: sticky; top: var(--bar-h);
  padding: clamp(var(--sc-6), 5vw, var(--sc-8)) clamp(var(--sc-5), 4vw, var(--sc-7));
  width: min(100%, 27rem);
}
.co__ozet-ad {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 400;
  letter-spacing: var(--sc-track-snug); margin: 0 0 var(--sc-5);
  padding-bottom: var(--sc-4); border-bottom: 1px solid var(--sc-hairline);
}
.co__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.co__satir-urun { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--sc-4); align-items: center; }
.co__kucuk { position: relative; display: block; width: 4rem; aspect-ratio: 4 / 5; }
.co__kucuk img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--sc-r-sm); background: var(--sc-canvas); border: 1px solid var(--sc-hairline);
}
.co__kucuk b {
  position: absolute; top: -0.5rem; right: -0.5rem;
  min-width: 1.4rem; height: 1.4rem; padding-inline: 0.35rem;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 500; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
}
.co__urun-ad { font-size: var(--sc-t-sm); line-height: 1.35; display: grid; gap: 2px; min-width: 0; }
.co__urun-ad small { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.co__urun-tutar { font-size: var(--sc-t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co__duzenle {
  display: inline-block; margin-top: var(--sc-4);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); text-decoration: underline; text-underline-offset: 0.25em;
}
.co__duzenle:hover { color: var(--sc-ink); }
.co__ozet .guven { padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); margin-top: var(--sc-6); }

/* telefon: özet üstte, açılır-kapanır */
.co__mobil { display: none; }
@media (max-width: 860px) {
  .co { grid-template-columns: 1fr; min-height: 0; }
  .co__ozet { display: none; }
  .co__mobil { display: block; background: var(--sc-surface); border-bottom: 1px solid var(--sc-hairline); }
  .co__mobil summary {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4);
    padding: var(--sc-4) var(--sc-gutter); cursor: pointer; list-style: none;
    font-size: var(--sc-t-sm); color: var(--sc-accent);
  }
  .co__mobil summary::-webkit-details-marker { display: none; }
  .co__mobil-ad::after { content: " \25BE"; }
  .co__mobil[open] .co__mobil-ad::after { content: " \25B4"; }
  .co__mobil summary strong {
    font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 400;
    color: var(--sc-ink); font-variant-numeric: tabular-nums;
  }
  .co__mobil-ic { padding: 0 var(--sc-gutter) var(--sc-5); }
  .co__form, .co__bos, .co__tesekkur-ic { justify-self: stretch; width: auto; padding-inline: var(--sc-gutter); }
}

/* teşekkür */
.co__tesekkur { grid-column: 1 / -1; }
.co__tesekkur-ic { justify-self: center; width: min(100%, 46rem); }
.co__tik {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: 50%; margin-bottom: var(--sc-5);
  background: color-mix(in oklab, var(--sc-accent) 18%, transparent);
  color: var(--sc-accent);
}
.co__tik svg { width: 1.5rem; height: 1.5rem; }
.co__adimlar {
  list-style: none; counter-reset: adim; margin: var(--sc-6) 0 0; padding: 0;
  display: grid; gap: var(--sc-5);
}
.co__adimlar li {
  counter-increment: adim;
  display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--sc-4);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6;
}
.co__adimlar li::before {
  content: counter(adim);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong);
  font-size: 0.75rem; color: var(--sc-ink);
}
.co__adimlar strong { color: var(--sc-ink); font-weight: 500; }
.co__tekrar { display: inline-block; margin-top: var(--sc-3); }
.co__no-metin {
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--sc-accent);
}

.co__havale {
  margin: var(--sc-7) 0; padding: clamp(var(--sc-5), 3vw, var(--sc-6));
  border: 1px solid var(--sc-accent); border-radius: var(--sc-r-md);
  background: color-mix(in oklab, var(--sc-accent) 8%, var(--sc-surface));
}
.co__havale .co__h { margin-bottom: var(--sc-4); }
.iban { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: grid; gap: var(--sc-3); }
.iban li {
  display: grid; gap: var(--sc-1) var(--sc-4);
  grid-template-columns: 1fr auto; align-items: center;
  padding: var(--sc-3) var(--sc-4);
  background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
  border-radius: var(--sc-r-sm);
}
.iban__banka {
  grid-column: 1 / -1;
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.iban__no { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-size: var(--sc-t-sm); }
.iban__kopya {
  font: inherit; font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
  color: var(--sc-ink-soft); background: none; border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-pill); padding: 0.25em 0.8em; cursor: pointer; white-space: nowrap;
}
.iban__kopya:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }