/*
 * Xudbin Market bileşenleri.
 *
 * Sayfa ritmi markadan geliyor: beyaz bölümlerle ağ gradyanlı bölümler
 * dönüşümlü, bölüm arası 96px, kartlar 20px yuvarlak ve turkuaza boyalı
 * yumuşak gölgeyle yüzüyor, dokunulan her şey tam hap.
 *
 * Hareket kullanıcıya bir şey söylediği yerde var: giriş dizisi, numune
 * şeridi, plakanın palet döngüsü, kart kaldırma, açılır cevaplar.
 */

/* ======================================================================
   KAMPANYA ŞERİDİ VE ÜST BAŞLIK
   ====================================================================== */

.promo {
  background: var(--coal-deep);
  color: rgb(237 235 236 / 0.8);
  font-size: var(--t-caption);
}

.promo__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding-block: var(--s2);
  text-align: center;
}

/* Kesik köşe: kartın panel biçimi, en küçük ölçekte. */
.promo__tag {
  padding: 3px var(--s3);
  background: var(--brand-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  clip-path: none; border-radius: 6px;
}

.promo b { color: #fff; }
.promo a { color: #fff; font-weight: 600; }

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--masthead-bg, rgb(255 255 255 / 0.82));
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}

/* Kaydırınca başlık zeminden ayrılıyor: nerede olduğunuzu söyleyen
   geri bildirim, süs değil. ui.js bir gözcü elemanla açıp kapıyor. */
.masthead.is-stuck { border-block-end-color: var(--rule); box-shadow: var(--shadow-sm); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  /* Sabit: --masthead-h ui.js'te başlığın ölçülen yüksekliğine eşitleniyor;
     buraya bağlansaydı menü kapanınca başlık küçülemezdi. */
  min-height: 72px;
}

/* Marka kilidi: logo + ürün adı (xudbin market) + alt şerit. */
.mark {
  display: flex;
  align-items: end;
  gap: 10px;
  flex: none;
  text-decoration: none;
}

/* Xudbin logosu (panelle aynı dört kare). */
.mark__glyph { display: block; width: auto; height: 32px; margin-block-end: -2px; }

/* Künyede işaret biraz büyür. */
.colophon .mark__glyph { height: 42px; }

/*
 * Kilit: Xudbin logosu + ürün adı (xudbin market). İkisi aynı
 * satırda, ürün adı işaretin x-yüksekliğine oturuyor. Alt satır kartın
 * "YAZILIM TEKNOLOJİLERİ" şeridinin karşılığı.
 */
.mark__name {
  display: grid;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--ink);
}

.mark__sub {
  font-family: var(--font);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.colophon .mark__name { color: #fff; }
.colophon .mark__sub { color: var(--coal-muted); }
.coal .mark__name { color: #fff; }
.coal .mark__sub { color: var(--coal-muted); }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-inline: auto;
  font-size: var(--t-small);
}

.masthead__nav a {
  position: relative;
  white-space: nowrap;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-touch);
  color: var(--ink-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}

.masthead__nav a:hover { color: var(--brand-text); background: var(--brand-soft); }
.masthead__nav a.is-on { color: var(--brand-text); background: var(--brand-soft); font-weight: 600; }

/* --- Gezinmede açılır grup --- */

/*
 * "Nasıl çalışır" ve "Sık sorulanlar" tek başlıkta toplandı. Yedi öğelik
 * menü 1280 pikselin altında ikinci satıra düşüyordu; iki satırlık başlık
 * bozuk demek. Gruplama öğe sayısını altıya indiriyor ve iki sayfa yine
 * tek tıkla erişilebiliyor.
 */
.navdrop { position: relative; display: inline-flex; }

.navdrop__btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--s2) var(--s4);
  border: 0;
  border-radius: var(--r-touch);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}

.navdrop__btn:hover,
.navdrop.is-open .navdrop__btn { color: var(--brand-text); background: var(--brand-soft); }
.navdrop__btn.is-on { color: var(--brand-text); background: var(--brand-soft); font-weight: 600; }

.navdrop__caret { font-size: 0.6em; color: var(--muted); transition: transform var(--t-micro) var(--ease); }
.navdrop.is-open .navdrop__caret { transform: rotate(180deg); }

.navdrop__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 50%;
  z-index: var(--z-float);
  display: grid;
  gap: 2px;
  min-width: 260px;
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}

.navdrop__menu[hidden] { display: none; }

.navdrop__menu a {
  display: flex;
  align-items: start;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-touch);
  color: var(--ink);
  text-decoration: none;
}

.navdrop__menu a > i { margin-block-start: 3px; width: 16px; color: var(--muted); text-align: center; }
.navdrop__menu a span { display: grid; gap: 1px; }
.navdrop__menu a b { font-weight: 600; }
.navdrop__menu a span { font-size: var(--t-caption); color: var(--muted); }
.navdrop__menu a b { font-size: var(--t-small); color: var(--ink); }
.navdrop__menu a:hover { background: var(--brand-soft); }
.navdrop__menu a:hover > i, .navdrop__menu a:hover b { color: var(--brand-text); }
.navdrop__menu a.is-on b { color: var(--brand-text); }

/* Altı öğe 1120 pikselin altında yine sıkışıyor; yazı ve iç boşluk daralıyor. */
@media (max-width: 1119px) {
  .masthead__nav { gap: 0; font-size: var(--t-caption); }
  .masthead__nav a,
  .navdrop__btn { padding-inline: var(--s3); white-space: nowrap; }
  .masthead__inner { gap: var(--s4); }
}

.masthead__end { display: flex; align-items: center; gap: var(--s3); flex: none; }
.masthead__end .btn--text { font-size: var(--t-small); color: var(--ink-soft); }
.masthead__end .btn--text:hover { color: var(--brand-text); }

/* Tema düğmesiyle tek satır 1280 pikselin altında sığmıyor: menü kendi satırına iner. */
@media (max-width: 1279px) {
  .masthead__inner { flex-wrap: wrap; padding-block: var(--s3); row-gap: var(--s2); }
  .masthead__end { margin-inline-start: auto; }

  .masthead__nav {
    order: 3;
    flex: 1 0 100%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .masthead__nav::-webkit-scrollbar { display: none; }

  /*
   * Sağ kenarda solma. Menü yatay kayıyor ama kesilen son kelime
   * "bozuk" gibi okunuyordu; solma devamı olduğunu söylüyor.
   */
  .masthead__inner::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 40px;
    height: 52px;
    background: linear-gradient(to left, var(--surface) 30%, transparent);
    pointer-events: none;
  }

  .masthead__inner { position: relative; }
  /* Açılır grup bir düğme, bağlantı değil: mobil kuralı onu da kapsasın,
     yoksa "Nasıl çalışır" iki satıra kırılıyor. */
  .masthead__nav a,
  .navdrop__btn { white-space: nowrap; }

  /* Yatay kayan menüde açılır liste ekranın dışına taşmasın. */
  .navdrop { position: static; }
  .navdrop__menu { inset-inline: var(--gutter) auto; transform: none; min-width: 0; width: calc(100% - var(--gutter) * 2); }
  .mark__sub { display: none; }
}

/* ======================================================================
   BÖLÜM RİTMİ
   ====================================================================== */

.band { padding-block: var(--s9); }
.band--tight { padding-block: var(--s8); }

@media (max-width: 767px) {
  .band { padding-block: var(--s8); }
  .band--tight { padding-block: var(--s7); }
}

/* Bölüm başlığı ortalanmış: markanın bölüm başlıkları da öyle. */
.head {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  margin-block-end: var(--s8);
  text-align: center;
}

/* Her bölüm başlığının üstünde vurgu çizgisi. */
.head::before {
  content: "";
  width: 68px;
  height: 5px;
  background: var(--brand);
  clip-path: none; border-radius: 6px;
}

.head--row::before { display: none; }

.head p { max-width: 56ch; color: var(--muted); }

/* Sol hizalı varyant: liste ve ızgara başlıklarında, yanında bağlantıyla. */
.head--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  justify-items: stretch;
  gap: var(--s5);
  text-align: start;
}

.head--row p { margin-block-start: var(--s3); }
.head--row > div { min-width: 0; }
.head--row .btn { flex: none; }

.page-head { padding-block: var(--s9) var(--s7); text-align: center; }
.page-head .badge { margin-block-end: var(--s4); }
.page-head p { margin-inline: auto; margin-block-start: var(--s4); max-width: 58ch; color: var(--muted); }

.dark { background: var(--coal-deep); color: rgb(255 255 255 / 0.76); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .head p { color: rgb(255 255 255 / 0.66); }

/* ======================================================================
   GİRİŞ
   ====================================================================== */

.hero { position: relative; overflow: hidden; padding-block: var(--s9) var(--s8); }

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: var(--s8);
  align-items: center;
}

.hero h1 {
  margin-block-start: var(--s5);
  font-size: var(--t-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}


/* Vurgulu kelime vurgu renginde. Gradyan yok: kimlik tek renk. */
.hero h1 em { font-style: normal; color: var(--brand); }

.hero__lead {
  margin-block-start: var(--s5);
  max-width: 44ch;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s7); }

/* Üç küçük güvence, ikonlu. Markanın giriş altındaki şeridiyle aynı. */
.hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  margin: var(--s7) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.hero__marks li { display: flex; align-items: center; gap: var(--s2); }
.hero__marks i { color: var(--brand); font-size: 0.95rem; }

/* --- Giriş slider'ı --------------------------------------------------- */

/*
 * Tek kare yerine sıra. Katalogda birden fazla site olduğunu ilk ekranda
 * göstermenin en kısa yolu; ziyaretçi kaydırmadan çeşitliliği görüyor.
 *
 * Kareler ÜST ÜSTE duruyor (hepsi aynı ızgara gözünde), bu yüzden yükseklik
 * en uzun slayta göre sabit kalıyor ve geçişte sayfa zıplamıyor.
 */
.show { position: relative; display: grid; gap: var(--s5); }

.show__stage { display: grid; }

.show__slide {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--s4);
  align-content: start;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--t-macro) var(--ease-out),
              transform var(--t-macro) var(--ease-out),
              visibility 0s linear var(--t-macro);
}

.show__slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.show__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--wash);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 16 / 10;
  transition: transform var(--t-macro) var(--ease-out), box-shadow var(--t-macro) var(--ease-out);
}

.show__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.show__slide:hover .show__frame,
.show__slide:focus-visible .show__frame {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgb(27 26 28 / 0.1), 0 34px 60px -20px rgb(27 26 28 / 0.5);
}

/* Künye kartı: adı, kaç rengi olduğu ve fiyatı. Karenin üstünde yarı
   saydam dururken ekran görüntüsünün üstünde okunmuyordu. */
.show__tag {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: fit-content;
  padding: var(--s3) var(--s5);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-size: var(--t-small);
  white-space: nowrap;
  clip-path: none; border-radius: 6px;
}

.show__tag .data { font-weight: 700; color: var(--brand-text); }
.show__tag .data.muted { font-weight: 500; color: var(--muted); }

/* Noktalar. Hangi karede olduğunuzu söylüyor ve tıklanabiliyor. */
.show__dots { display: flex; gap: var(--s2); }

.show__dot {
  width: 26px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgb(237 235 236 / 0.24);
  cursor: pointer;
  transition: background var(--t-normal) var(--ease), width var(--t-normal) var(--ease-out);
}

.show__dot:hover { background: rgb(237 235 236 / 0.45); }
.show__dot.is-on { width: 40px; background: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .show__slide { transition: opacity 1ms linear, visibility 0s; transform: none; }
}

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .hero { padding-block: var(--s8) var(--s7); }
  .show__tag { font-size: var(--t-caption); padding-inline: var(--s4); }
}

/* ======================================================================
   FİYAT BANDI
   ====================================================================== */

/*
 * Girişin hemen altında tek satırlık cevap: ne kadar ve karşılığında ne
 * alıyorsunuz. Rakam katalogdaki en düşük fiyattan geliyor.
 */
.worth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s6) var(--s8);
  padding-block: var(--s7);
  border-block-end: 1px solid var(--rule);
}

.worth__price { flex: none; }

.worth__n {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  font-variation-settings: "wdth" 84;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--brand-deep);
}

.worth__n span { font-size: 0.55em; color: var(--brand); }
.worth__k { margin-block-start: var(--s2); color: var(--muted); font-size: var(--t-small); }

.worth__list {
  display: grid;
  gap: var(--s3);
  flex: 1 1 340px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.worth__list li {
  display: flex;
  align-items: start;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--muted);
}

.worth__list i { flex: none; margin-block-start: 3px; color: var(--brand); }
.worth__list b { color: var(--ink); font-weight: 600; }
.worth .btn { flex: none; }

@media (max-width: 767px) {
  .worth { gap: var(--s5); padding-block: var(--s6); }
  .worth .btn { width: 100%; }
}

/* ======================================================================
   NUMUNE IZGARASI VE PLAKA
   ====================================================================== */

/* min(): 340 pikselden dar ekranda sütun ekrandan taşmasın (320 px telefon). */
.specimens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(278px, 100%), 1fr)); gap: var(--s5); }
.specimens--wide { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

.plate {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-normal) var(--ease-out),
              box-shadow var(--t-normal) var(--ease-out),
              border-color var(--t-normal) var(--ease);
}

.plate:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow-lift); }

.plate__frame { position: relative; overflow: hidden; background: var(--wash); aspect-ratio: 16 / 11; }

/* Kesik üst-sağ köşe: kartın panel biçimi. Gölgeyi bozmasın diye kırpma
   yerine kartın zemin rengiyle çizilmiş bir üçgen. */
.plate__frame::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  border-inline-start: var(--chamfer) solid transparent;
  border-block-start: var(--chamfer) solid var(--surface);
}
.plate__shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Palet döngüsü kareleri. plates.js bunları ilk temasta oluşturuyor. */
.plate__shot--alt { position: absolute; inset: 0; opacity: 0; transition: opacity 280ms var(--ease); }
.plate:hover .plate__shot--alt[data-active],
.plate:focus-visible .plate__shot--alt[data-active] { opacity: 1; }

/* Üzerine gelince "beş rengi var" ipucu beliriyor: hareketin ne anlama
   geldiğini söylüyor. */
.plate__hint {
  position: absolute;
  inset-block-end: var(--s3);
  inset-inline-start: var(--s3);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--s3);
  border-radius: var(--r-touch);
  background: rgb(15 17 17 / 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}

.plate:hover .plate__hint, .plate:focus-visible .plate__hint { opacity: 1; transform: none; }

.plate__empty { display: grid; place-items: center; height: 100%; color: var(--faint); font-size: var(--t-caption); }

.plate__body { display: grid; gap: var(--s3); padding: var(--s5); }

.plate__caption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.plate__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.plate:hover .plate__name { color: var(--brand-text); }
.plate__cat { color: var(--muted); font-size: var(--t-caption); white-space: nowrap; }

.plate__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--rule);
  font-size: var(--t-caption);
}

.plate__price { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.plate__price--soon { font-family: var(--font); font-size: var(--t-caption); font-weight: 500; color: var(--muted); }

/* Palet çipleri. Bilgi taşıyor: kaç renk seçeneği var ve hangileri. */
.chips { display: inline-flex; align-items: center; gap: 5px; }
.chip { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.85), 0 0 0 1px rgb(27 26 28 / 0.14); }
.chips__count { margin-inline-start: var(--s2); color: var(--muted); }

/* ======================================================================
   ÖZELLİK KARTLARI
   ====================================================================== */

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s5); }

.feat {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-normal) var(--ease-out), box-shadow var(--t-normal) var(--ease-out);
}

.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.feat__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-block-end: var(--s2);
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 1.1rem;
}

.feat--warm .feat__icon { background: var(--brand-soft); color: var(--brand-text); }
.feat p { font-size: var(--t-small); color: var(--muted); }

/* ======================================================================
   MESLEK KARTLARI
   ====================================================================== */

.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: var(--s4); }

.job {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-touch);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-normal) var(--ease-out),
              border-color var(--t-micro) var(--ease);
}

.job:hover { transform: translateY(-2px); border-color: var(--brand-line); box-shadow: var(--shadow-card); }

.job__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 0.875rem;
}

.job__text { display: grid; min-width: 0; }
.job__name { font-weight: 600; font-size: var(--t-small); }
.job__count { color: var(--muted); font-size: var(--t-caption); }
.job--soon .job__icon { background: var(--wash); color: var(--muted); }
.jobs__note { margin: var(--s6) auto 0; text-align: center; color: var(--muted); font-size: var(--t-small); }

/* ======================================================================
   AKIŞ: gerçek bir sıra olduğu için numaralı
   ====================================================================== */

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); margin: 0; padding: 0; list-style: none; }

.flow__step {
  position: relative;
  padding: var(--s6);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 0.04);
}

.flow__n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block-end: var(--s4);
  border-radius: 50%;
  background: var(--brand-deep);
  box-shadow: var(--glow-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
}

.flow__step h3 { color: #fff; }
.flow__step p { margin-block-start: var(--s2); font-size: var(--t-small); color: rgb(255 255 255 / 0.66); }

/* Adımlar arası bağlantı: kartların arasındaki kesikli çizgi. Sırayı
   gösteriyor, süs değil. */
.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--s6) + 21px);
  inset-inline-start: 100%;
  width: var(--s5);
  border-block-start: 2px dotted rgb(255 255 255 / 0.24);
}

@media (max-width: 1023px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__step:nth-child(2)::after { display: none; }
}

@media (max-width: 559px) {
  .flow { grid-template-columns: 1fr; }
  .flow__step::after { display: none !important; }
}

/* ======================================================================
   SİZE ÖZEL: yan yana iki sütun
   ====================================================================== */

.custom__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
.custom h2 { max-width: 18ch; }
.custom__copy p { margin-block-start: var(--s5); max-width: 52ch; color: var(--ink-soft); }

.custom__list { display: grid; gap: var(--s3); margin: var(--s6) 0 0; padding: 0; list-style: none; }

.custom__list li {
  display: flex;
  align-items: start;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.custom__list i { flex: none; margin-block-start: 3px; color: var(--brand); }
.custom__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s7); }

/*
 * Sağ sütun: marka görseli üstte, işin şartları altta. Görsel "size özel
 * yapım"ın ne demek olduğunu gösteriyor; altındaki üç satır da ticari
 * çerçeveyi. Önceki hâli üç satır düz metindi ve sol sütunun yanında
 * boş duruyordu.
 */
.offer {
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.offer__shot { position: relative; margin: 0; background: var(--coal-deep); }
.offer__shot img { width: 100%; display: block; }

/* Kimliğin kesik köşesi: görselin sağ üstünde, kart zemininin renginde. */
.offer__shot::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  border-inline-start: var(--chamfer) solid transparent;
  border-block-start: var(--chamfer) solid var(--surface);
}

.offer__facts { margin: 0; padding: var(--s5) var(--s6); }

.offer__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
  padding-block: var(--s4);
}

.offer__row + .offer__row { border-block-start: 1px solid var(--rule); }

.offer__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 0.875rem;
}

.offer__facts dt { color: var(--muted); font-size: var(--t-caption); font-weight: 600; }

.offer__facts dd {
  margin: 3px 0 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.offer__foot {
  display: flex;
  align-items: start;
  gap: var(--s3);
  margin: 0;
  padding: var(--s4) var(--s6) var(--s5);
  border-block-start: 1px solid var(--rule);
  background: var(--paper);
  font-size: var(--t-caption);
  color: var(--muted);
}

.offer__foot i { margin-block-start: 2px; color: var(--brand); }

@media (max-width: 559px) {
  .offer__facts { padding-inline: var(--s5); }
  .offer__foot { padding-inline: var(--s5); }
}

@media (max-width: 1023px) { .custom__inner { grid-template-columns: 1fr; gap: var(--s7); } }

/* ======================================================================
   SORULAR
   ====================================================================== */

.qa { display: grid; gap: var(--s3); max-width: 800px; margin-inline: auto; }

.qa details {
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-normal) var(--ease);
}

.qa details[open] { border-color: var(--brand-line); box-shadow: var(--shadow-card); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-soft)
    linear-gradient(var(--brand-text), var(--brand-text)) center / 11px 2px no-repeat;
  box-shadow: inset 0 0 0 1px var(--brand-line);
  transition: transform var(--t-normal) var(--ease);
}

.qa summary::before {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--s6) + 12px);
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background: var(--brand-text);
  transition: transform var(--t-normal) var(--ease), opacity var(--t-micro) var(--ease);
}

.qa details { position: relative; }
.qa details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.qa details[open] summary { color: var(--brand-text); }
.qa p { padding: 0 var(--s6) var(--s6); color: var(--muted); font-size: var(--t-small); }

/* ======================================================================
   KAPANIŞ DAVETİ
   ====================================================================== */

.invite {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: var(--s5);
  margin-block: var(--s9);
  padding: var(--s9) var(--s7);
  border-radius: var(--r-card);
  background: var(--coal-deep);
  color: rgb(255 255 255 / 0.74);
  text-align: center;
}

/* Koyu kartın içinde markanın turkuaz lekesi: sayfa boyunca kullanılan
   ağ gradyanının koyu karşılığı. */
.invite::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 14%, rgb(255 255 255 / 0.03) 14% 36%, transparent 36%),
    linear-gradient(248deg, transparent 0 56%, rgb(229 82 93 / 0.1) 56% 80%, transparent 80%);
  pointer-events: none;
}

.invite > * { position: relative; }
.invite h2 { max-width: 20ch; color: #fff; }
.invite p { max-width: 52ch; }
.invite__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-block-start: var(--s3); }

/* ======================================================================
   KÜNYE
   ====================================================================== */

.colophon { background: var(--coal-deep); color: rgb(255 255 255 / 0.66); }
.colophon__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s7); padding-block: var(--s9) var(--s7); }
.colophon .mark__name { color: #fff; }

.colophon .mark__sub { color: rgb(255 255 255 / 0.5); }
.colophon__brand p { margin-block-start: var(--s4); max-width: 34ch; font-size: var(--t-small); }

.colophon__social { display: flex; gap: var(--s2); margin-block-start: var(--s5); }

.colophon__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  text-decoration: none;
  transition: background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease-out);
}

.colophon__social a:hover { background: var(--brand-deep); transform: translateY(-2px); }

.colophon__col { display: grid; align-content: start; gap: var(--s3); }
.colophon__title { margin-block-end: var(--s2); color: #fff; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; }
.colophon__col a { width: fit-content; color: rgb(255 255 255 / 0.62); font-size: var(--t-small); text-decoration: none; }
.colophon__col a:hover { color: #fff; }
.colophon__col a i { width: 16px; margin-inline-end: var(--s2); color: var(--brand); }

.colophon__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--t-caption);
  color: rgb(255 255 255 / 0.5);
}

@media (max-width: 899px) { .colophon__inner { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (max-width: 559px) { .colophon__inner { grid-template-columns: 1fr; } }

/* ======================================================================
   SÜZGEÇ ÇUBUĞU
   ====================================================================== */

.sift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-touch);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sift__group { flex: 1 1 170px; min-width: 0; }
.sift__group:first-child { flex: 2 1 230px; }
.sift .field { min-height: 44px; border-radius: var(--r-touch); }
.sift__count { margin-inline-start: auto; padding-inline: var(--s3); color: var(--muted); font-size: var(--t-small); white-space: nowrap; }
.sift__clear { flex: none; padding-inline: var(--s2); font-size: var(--t-caption); }

/* JavaScript çalışıyorsa "Uygula" gereksiz: seçim değişince form gidiyor. */
.sift.is-auto .sift__go { display: none; }

@media (max-width: 899px) {
  .sift { border-radius: var(--r-card); }
  .sift .field { border-radius: var(--r-field); }
  .sift__count { margin-inline-start: 0; flex: 1 0 100%; text-align: center; }
}

/* ======================================================================
   BOŞ DURUM
   ====================================================================== */

.nothing {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s10) var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.nothing__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-block-end: var(--s2);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 1.5rem;
}

.nothing h2 { font-size: 1.5rem; }
.nothing p { max-width: 44ch; color: var(--muted); }
.nothing .btn { margin-block-start: var(--s3); }

/* ======================================================================
   ÜRÜN SAYFASI
   ====================================================================== */

.crumb { padding-block: var(--s6) 0; font-size: var(--t-caption); color: var(--muted); }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--brand-text); }

.lede { padding-block: var(--s5) var(--s7); }
.lede h1 { max-width: 20ch; }
.lede__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-block-start: var(--s4); }
.lede__text { margin-block-start: var(--s5); max-width: 62ch; font-size: 1.0625rem; color: var(--ink-soft); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s3);
  border-radius: var(--r-touch);
  background: var(--wash);
  color: var(--ink-soft);
  font-size: var(--t-caption);
  font-weight: 600;
}

.tag--warn { background: var(--brand-soft); color: var(--brand-text); }

.sheet { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s8); align-items: start; padding-block-end: var(--s9); }

.sheet__plate { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--wash); box-shadow: var(--shadow-card); }
.sheet__plate img { width: 100%; transition: opacity var(--t-normal) var(--ease); }
.sheet__plate img.is-swapping { opacity: 0; }

/* Palet seçici: küçük resim şeridinin yerini alıyor ve bilgi taşıyor. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s5); }

.swatches__b {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-touch);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--t-caption);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), box-shadow var(--t-normal) var(--ease);
}

.swatches__b:hover { border-color: var(--brand); color: var(--brand-text); }
.swatches__b.is-on { border-color: var(--brand); color: var(--brand-text); box-shadow: 0 0 0 1px var(--brand), var(--glow-brand); }
.swatches__dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.85), 0 0 0 1px rgb(27 26 28 / 0.14); }
.swatches__note { margin-block-start: var(--s3); font-size: var(--t-caption); color: var(--muted); }

.handset { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s8); align-items: center; margin-block-start: var(--s9); }
.handset__screen { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--wash); box-shadow: var(--shadow-card); }
.handset__screen img { width: 100%; }
.handset h2 { font-size: 1.75rem; }
.handset p { margin-block-start: var(--s4); color: var(--muted); }

@media (max-width: 767px) { .handset { grid-template-columns: 1fr; gap: var(--s5); } .handset__screen { max-width: 240px; } }

.block { margin-block-start: var(--s9); }
.block > h2 { font-size: 1.75rem; }
.block__lead { margin-block-start: var(--s4); color: var(--muted); font-size: var(--t-small); }
.block > p { margin-block-start: var(--s4); color: var(--ink-soft); }

.feature { margin-block-start: var(--s6); }
.feature__t { color: var(--brand-text); font-size: var(--t-caption); font-weight: 700; }
.feature__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3) var(--s5); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.feature__list li { display: flex; align-items: start; gap: var(--s2); font-size: var(--t-small); color: var(--ink-soft); }
.feature__list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; flex: none; margin-block-start: 2px; color: var(--brand); font-size: 0.7rem; }

/* Bölüm ızgarası: uzun listenin satır satır çizgilenmiş hâlinin yerine. */
.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }

.cell {
  display: grid;
  gap: var(--s1);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.cell__name { font-weight: 600; font-size: var(--t-small); }
.cell__meta { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--t-caption); }

/* --- Satın alma sütunu --- */

.buy {
  position: sticky;
  inset-block-start: calc(var(--masthead-h) + var(--s5));
  padding: var(--s7);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.buy__price { display: flex; align-items: baseline; gap: var(--s2); font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.buy__price--soon { font-size: 1.5rem; }
.buy__cur { font-size: 1.5rem; color: var(--muted); }
.buy > p { margin-block-start: var(--s3); font-size: var(--t-caption); color: var(--muted); }
.buy__cta { width: 100%; margin-block-start: var(--s5); }
.buy__note { margin-block-start: var(--s4); font-size: var(--t-caption); color: var(--muted); }
.buy__rule { height: 1px; margin-block: var(--s6); background: var(--rule); }
.buy__h { margin-block-end: var(--s4); font-size: 1rem; }

.buy__opts { margin: 0; }
.buy__opts dt { font-size: var(--t-small); font-weight: 600; }
.buy__opts dd { display: grid; gap: 3px; margin: var(--s1) 0 var(--s5); }
.buy__opts dd:last-of-type { margin-block-end: 0; }
.buy__delta { font-weight: 700; font-size: var(--t-small); color: var(--brand-text); }
.buy__opts dd .data { font-size: var(--t-caption); color: var(--muted); }

.buy__facts { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.buy__facts dt { padding-block: var(--s3); border-block-end: 1px solid var(--rule); font-size: var(--t-small); color: var(--muted); }
.buy__facts dd { margin: 0; padding-block: var(--s3); border-block-end: 1px solid var(--rule); font-size: var(--t-small); font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) { .sheet { grid-template-columns: 1fr; gap: var(--s7); } .buy { position: static; } }

/* ======================================================================
   PAYLAŞILAN LİSTELER VE FORM PARÇALARI
   ====================================================================== */

.stack { display: grid; gap: var(--s5); align-content: start; }
.stack--tight { gap: var(--s3); }

.facts { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }

.facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) var(--s5);
  border-block-end: 1px solid var(--rule);
  font-size: var(--t-small);
}

.facts li:last-child { border-block-end: 0; }
.facts li > span:first-child { color: var(--muted); }
.facts li > span:last-child { text-align: end; font-weight: 500; }
.facts a { color: var(--ink); font-weight: 600; text-decoration: none; }
.facts a:hover { color: var(--brand-text); text-decoration: underline; }

.facts--split { columns: 2; column-gap: var(--s5); border: 0; border-radius: 0; background: none; overflow: visible; }
.facts--split li { break-inside: avoid; margin-block-end: var(--s2); border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--surface); }

@media (max-width: 767px) { .facts--split { columns: 1; } }

.prose-list { margin: var(--s3) 0 0; padding-inline-start: var(--s5); color: var(--ink-soft); }
.prose-list li { margin-block-end: var(--s2); }

.table { width: 100%; margin-block-start: var(--s4); border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { padding: var(--s3) var(--s4); border-block-end: 1px solid var(--rule); text-align: start; vertical-align: top; }
.table th { color: var(--muted); font-weight: 700; font-size: var(--t-caption); }

/* --- Seçim kartı --- */

.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s3);
  padding: var(--s5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-panel);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-normal) var(--ease);
}

.choice + .choice { margin-block-start: var(--s3); }
.choice:hover { border-color: var(--brand-line); }
.choice:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--glow-brand); }
.choice input[type="radio"], .choice input[type="checkbox"] { width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--brand); }
.choice__title { font-weight: 600; }
.choice:has(input:checked) .choice__title { color: var(--brand-text); }
.choice__note { grid-column: 2; font-size: var(--t-small); color: var(--muted); line-height: 1.55; }

/* --- Form alanı sarmalı --- */

.fld { display: grid; gap: var(--s2); }
.fld + .fld { margin-block-start: var(--s4); }
.fld label { font-size: var(--t-small); font-weight: 600; }

.fld input:not([type="checkbox"]):not([type="radio"]),
.fld select,
.fld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
}

.fld textarea { min-height: 120px; padding-block: var(--s3); line-height: 1.55; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(229 82 93 / 0.2); }
.fld__help { font-size: var(--t-caption); color: var(--muted); }
.fld__help ul { margin: var(--s1) 0 0; padding-inline-start: var(--s5); }

/*
 * Blok akış. Daha önce flex idi ve metin düğümleri ile içindeki bağlantı
 * ayrı ayrı flex ögesi olup yan yana sütunlara dağılıyordu.
 */
.notice {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--brand-line);
  border-inline-start-width: 3px;
  border-radius: var(--r-panel);
  background: var(--brand-soft);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-soft);
}

.notice > i:first-child { margin-inline-end: var(--s2); color: var(--brand-deep); }

.notice a { color: var(--brand-text); font-weight: 600; }
.notice--bad { border-color: #eec3c2; background: var(--err-soft); color: var(--err); }
.notice--good { border-color: #bfe3c9; background: var(--ok-soft); color: var(--ok); }
.notice--warn { border-color: #fadfb4; background: var(--warn-soft); color: var(--warn); }

/* ======================================================================
   SİPARİŞ AKIŞI
   ====================================================================== */

.order__h1 { margin-block-end: var(--s6); }

.review__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }

.review__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-block-end: 1px solid var(--rule);
  font-size: var(--t-small);
}

.review__item:last-child { border-block-end: 0; }
.review__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.review__item.is-untouched { color: var(--muted); }
.review__item.is-untouched .review__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.review__state { white-space: nowrap; color: var(--muted); font-size: var(--t-caption); }

/* --- Durum çubuğu --- */

.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; list-style: none; }

.steps__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding-block-start: var(--s6);
  color: var(--muted);
  font-size: var(--t-caption);
  text-align: center;
}

.steps__item::before { content: ""; position: absolute; inset-block-start: 8px; inset-inline: 0; height: 2px; background: var(--rule); }
.steps__item:first-child::before { inset-inline-start: 50%; }
.steps__item:last-child::before { inset-inline-end: 50%; }
.steps__dot { position: absolute; inset-block-start: 0; width: 18px; height: 18px; border: 2px solid var(--rule-strong); border-radius: 50%; background: var(--surface); }
.steps__item.is-done { color: var(--ink); }
.steps__item.is-done .steps__dot { background: var(--brand); border-color: var(--brand); }
.steps__item.is-done::before { background: var(--brand); }
.steps__item.is-now { color: var(--brand-text); font-weight: 700; }
.steps__item.is-now .steps__dot { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

.howto { display: grid; gap: var(--s3); margin: var(--s5) 0 0; padding-inline-start: var(--s5); color: var(--ink-soft); }
.howto li { padding-inline-start: var(--s1); font-size: var(--t-small); }
.howto li::marker { color: var(--brand); font-weight: 700; }
.howto code, .legal__body code { padding: 2px 6px; border-radius: 6px; background: var(--wash); font-size: 0.88em; }

.support { display: grid; gap: var(--s2); justify-items: start; margin-block-start: var(--s6); padding: var(--s5); border-radius: var(--r-panel); background: var(--brand-soft); }
.support__title { font-weight: 700; }
.support p { font-size: var(--t-small); color: var(--ink-soft); }
.support .btn { margin-block-start: var(--s2); }

.receipt { max-width: 680px; margin-inline: auto; display: grid; gap: var(--s5); }
.receipt__head { display: grid; justify-items: center; gap: var(--s4); text-align: center; }

.receipt__check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 1.75rem;
}

.receipt__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s5); }
.receipt .block { margin-block-start: var(--s4); }
.sheet--roomy { padding-block-start: var(--s8); }
.block--first { margin-block-start: 0; }

/* ======================================================================
   İLETİŞİM KARTLARI
   ====================================================================== */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5); }

.card {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s7);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-normal) var(--ease-out), box-shadow var(--t-normal) var(--ease-out), border-color var(--t-micro) var(--ease);
}

a.card:hover { transform: translateY(-4px); border-color: var(--brand-line); box-shadow: var(--shadow-lift); }

.card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-block-end: var(--s2); border-radius: 14px; background: var(--brand-soft); color: var(--brand-text); font-size: 1.1rem; }
.card h2 { font-size: 1.1875rem; }
.card p { font-size: var(--t-small); color: var(--muted); }
.card .data { color: var(--brand-text); font-weight: 700; }

/* ======================================================================
   GİRİŞ VE KAYIT
   ====================================================================== */

/*
 * İki panel. Sol panel ürünü hatırlatıyor, sağ panel işi yaptırıyor.
 * Sol paneldeki kare katalogdan gerçek bir site; temsilî görsel ya da
 * uydurma müşteri yorumu konmadı.
 */
.auth {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  max-width: 980px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.auth--wide { max-width: 1100px; }

/*
 * Yan panel içeriği dikeyde ortalanıyor. Önce güvenceler dibe itiliyordu;
 * kayıt formu uzun olduğu için görselle güvenceler arasında kocaman bir
 * boşluk kalıyordu.
 */
.auth__side {
  --auth-pad: var(--s7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s6);
  padding: var(--s8) var(--auth-pad);
}

.auth__side-lead { font-size: 1.0625rem; color: rgb(237 235 236 / 0.86); }

/* Kare panelden taşıyor: sayfanın içine bakılan bir pencere gibi durup
   paneli düz bir renk alanı olmaktan çıkarıyor. */
.auth__shot {
  margin-inline-end: calc(var(--s7) * -1);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-start-start-radius: var(--r-panel);
  border-end-start-radius: var(--r-panel);
  box-shadow: var(--shadow-float);
}

.auth__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

.auth__marks { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }

.auth__marks li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: rgb(237 235 236 / 0.74);
}

.auth__marks i { width: 18px; color: var(--brand); text-align: center; }

.auth__main { --auth-pad: var(--s7); padding: var(--s8) var(--auth-pad); }
.auth__head h1 { font-size: 1.875rem; }
.auth__head p { margin-block-start: var(--s3); font-size: var(--t-small); color: var(--muted); }
.auth__form { margin-block-start: var(--s6); }
.auth__form > .notice { margin-block-end: var(--s5); }
.auth__form .btn { margin-block-start: var(--s6); }

/*
 * Alan grubu başlığı. Kayıt formu yedi alan; gruplanmadığında tek bir
 * uzun sütun oluyor ve nerede olduğunuz kayboluyor.
 */
.auth__legend {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-block: var(--s6) var(--s4);
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 600;
}

.auth__legend::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.auth__form > .auth__legend:first-of-type { margin-block-start: 0; }

.auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.auth__pair .fld + .fld { margin-block-start: 0; }

.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-start: var(--s5); }
.auth__foot { margin-block-start: var(--s5); font-size: var(--t-small); color: var(--muted); text-align: center; }
.auth__foot a { color: var(--brand-text); font-weight: 600; }

/* Onay kutusu. Etiket metni sarmalanabildiği için kutu üste hizalı. */
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; cursor: pointer; font-size: var(--t-small); }
.check--block { align-items: start; margin-block-start: var(--s6); }
.check--block span { line-height: 1.55; color: var(--ink-soft); }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-deep); }
.check--block input { margin-block-start: 2px; }
.check a { color: var(--brand-text); font-weight: 600; }

.fld__err { font-size: var(--t-caption); color: var(--err); }

@media (max-width: 899px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { --auth-pad: var(--s6); order: 2; gap: var(--s5); padding: var(--s7) var(--auth-pad); }
  .auth__shot { margin-inline-end: calc(var(--auth-pad) * -1); }
  .auth__main { padding: var(--s7) var(--s6); }
}

@media (max-width: 479px) {
  .auth__main, .auth__side { --auth-pad: var(--s5); padding: var(--s6) var(--auth-pad); }
  .auth__pair { grid-template-columns: 1fr; }
  .auth__shot { display: none; }
  .auth__shot--brand { display: block; }
}

/* Sayaç şeridi. */
.tallies { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }

.tally { display: grid; gap: var(--s1); padding: var(--s5) var(--s6); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.tally__n { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tally__k { color: var(--muted); font-size: var(--t-caption); }

@media (max-width: 639px) { .tallies { grid-template-columns: 1fr; } }

/* ======================================================================
   KURUMSAL METİNLER
   ====================================================================== */

.legal { max-width: 800px; margin-inline: auto; }
.legal__head { text-align: center; }
.legal__head h1 { margin-block: var(--s4); }
.legal__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-block: var(--s6) var(--s8); }

.legal__nav a {
  padding: 8px var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-touch);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--t-caption);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}

.legal__nav a:hover { border-color: var(--brand-line); color: var(--brand-text); }
.legal__nav a.is-on { border-color: transparent; background: var(--brand-deep); color: #fff; box-shadow: var(--glow-brand); }

.legal__body { padding: var(--s8); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.legal__body > p:first-child { color: var(--ink-soft); }
.legal__body section { margin-block-start: var(--s7); }
.legal__body h2 { margin-block-end: var(--s4); font-size: 1.375rem; }
.legal__body p { margin-block-end: var(--s3); color: var(--ink-soft); }
.legal__body a { color: var(--brand-text); font-weight: 600; }

@media (max-width: 639px) { .legal__body { padding: var(--s5); } }

/* Eski ad köprüleri: birkaç şablonda hâlâ kullanılıyor. */
.opening__lead { margin-block-start: var(--s5); max-width: 54ch; font-size: 1.0625rem; color: var(--ink-soft); }
.opening__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ======================================================================
   AYRINTILAR
   ====================================================================== */

.hero__copy { max-width: 40rem; min-width: 0; }
.sheet__aside { min-width: 0; }
.review { display: grid; gap: var(--s4); }
.review__name { min-width: 0; }
.steps__label { display: block; max-width: 14ch; }
.swatches__t { white-space: nowrap; }

/*
 * Dar ekranda kampanya şeridi üç satıra çıkıyor ve girişten önce ekranın
 * dörtte birini yiyordu. Sondaki bağlantı gizleniyor: aynı eylem üst
 * başlıktaki düğmede zaten var.
 */
@media (max-width: 767px) {
  .promo__inner { gap: var(--s2); padding-block: 6px; font-size: var(--t-caption); }
  .promo__inner a { display: none; }
  .promo b { font-weight: 600; }
}

/* Dar ekranda giriş başlığı biraz küçülüyor ki iki satırda kalsın. */
@media (max-width: 559px) {
  .hero { padding-block: var(--s7) var(--s6); }
  .hero__actions .btn { width: 100%; }
  .invite { margin-block: var(--s7); padding: var(--s7) var(--s5); }
  .invite__actions .btn { width: 100%; }
}


/* Sipariş formunun yan sütunu: ürün künyesi ve fiyat, satın alma kartıyla
   aynı yüzeyde. Düz metin olarak duruyordu ve formla aynı ağırlıktaydı. */
.sheet__aside > .stack {
  position: sticky;
  inset-block-start: calc(var(--masthead-h) + var(--s5));
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.sheet__aside > .stack h2 { font-size: 1.25rem; }
.sheet__aside > .stack > p { margin: 0; font-size: var(--t-caption); color: var(--muted); }

@media (max-width: 1023px) { .sheet__aside > .stack { position: static; } }

/* ======================================================================
   HESAP BÖLÜMÜ
   ====================================================================== */

.acct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s8) var(--s6);
}

.acct__who { display: flex; align-items: center; gap: var(--s5); min-width: 0; }

/* Baş harf halkası. Avatar yüklenmiyor; sahte profil fotoğrafı koymak
   yerine kullanıcının kendi harfi duruyor. */
.acct__ring {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}

.acct__who h1 { font-size: 1.75rem; }
.acct__mail { margin-block-start: 2px; color: var(--muted); font-size: var(--t-small); }
.acct__out { flex: none; }

/* Sekmeler: üç ekran aynı yerin parçası. */
.tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--rule); }
.tabs::-webkit-scrollbar { display: none; }

.tabs a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-micro) var(--ease);
}

.tabs a i { font-size: 0.9em; }
.tabs a:hover { color: var(--ink); }
.tabs a.is-on { color: var(--brand-text); font-weight: 600; }

.tabs a.is-on::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: var(--s4);
  height: 2px;
  background: var(--brand-deep);
}

/* Sayaç kartlarına ikon eklendi: rakam tek başına neyi saydığını
   söylemiyordu, başlık da altta kalıyordu. */
.tally { position: relative; }

.tally__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-block-end: var(--s3);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 0.875rem;
}

/* --- Satır listesi: sipariş dökümü --- */

.rows { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-normal) var(--ease);
}

.row:hover { border-color: var(--brand-line); box-shadow: var(--shadow-card); }
.row__main { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; text-decoration: none; }
.row__name { font-weight: 600; }
.row:hover .row__name { color: var(--brand-text); }
.row__sub { color: var(--muted); font-size: var(--t-caption); }
.row__num { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Durum rozeti. Dolgu nötr, yalnızca kenarlık ve metin renkleniyor;
   listede yan yana altı renkli dolgu gürültü yapıyordu. */
.state {
  flex: none;
  padding: 4px var(--s3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-touch);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--t-caption);
  font-weight: 600;
  white-space: nowrap;
}

.state--new { border-color: var(--brand-line); color: var(--brand-text); }
.state--in_review,
.state--building { border-color: #e6d3a8; color: var(--warn); }
.state--delivered { border-color: #bfe3c9; color: var(--ok); }
.state--closed { border-color: var(--rule-strong); color: var(--muted); }
.state--cancelled { border-color: #eec3c2; color: var(--err); }
.state--approval { border-color: var(--brand-line); color: var(--brand-text); }
.state--rejected { border-color: #eec3c2; color: var(--err); }

@media (max-width: 639px) {
  .acct { padding-block: var(--s7) var(--s5); }
  .acct__ring { width: 48px; height: 48px; font-size: 1.25rem; }
  .acct__who h1 { font-size: 1.375rem; }
  .acct__out { width: 100%; }
  .acct__out .btn { width: 100%; }
  .row { gap: var(--s3); }
  .row__num { margin-inline-start: auto; }
}

/* --- Üst başlıktaki hesap menüsü --- */

.who { position: relative; }

.who__btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s3) 5px 5px;
  border: 1px solid transparent;
  border-radius: var(--r-touch);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}

.who__btn:hover, .who.is-open .who__btn { background: var(--surface); border-color: var(--rule); }

.who__ring {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-text);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 800;
}

.who__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who__caret { font-size: 0.6rem; color: var(--muted); transition: transform var(--t-micro) var(--ease); }
.who.is-open .who__caret { transform: rotate(180deg); }

.who__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: var(--z-float);
  display: grid;
  min-width: 220px;
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.who__menu[hidden] { display: none; }

.who__menu a,
.who__menu button {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  border: 0;
  border-radius: var(--r-touch);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-small);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.who__menu i { width: 16px; color: var(--muted); text-align: center; }
.who__menu a:hover, .who__menu button:hover { background: var(--brand-soft); color: var(--brand-text); }
.who__menu a:hover i, .who__menu button:hover i { color: var(--brand); }

.who__menu form { margin-block-start: var(--s2); padding-block-start: var(--s2); border-block-start: 1px solid var(--rule); }

.auth__forgot { font-size: var(--t-caption); }

@media (max-width: 639px) { .who__name { display: none; } }

/* --- Hatalı alan işareti --- */

/*
 * Hata METNİ formda değil, sağ üstteki bildirimde. Burada yalnızca hangi
 * kutunun düzeltileceği gösteriliyor; yedi alanlık kayıt formunda bu
 * olmadan kullanıcı hatayı arıyordu.
 */
.fld.is-bad input,
.fld.is-bad select,
.fld.is-bad textarea,
.fld.is-bad .field { border-color: var(--err); }

.fld.is-bad input:focus,
.fld.is-bad select:focus,
.fld.is-bad textarea:focus { box-shadow: 0 0 0 3px rgb(180 35 58 / 0.18); }

.check.is-bad input { outline: 2px solid var(--err); outline-offset: 2px; }

/*
 * Marka görseli.
 *
 * Katalog karesi panelin SAĞ kenarından taşacak şekilde kurgulanmıştı
 * (tek taraflı negatif kenar boşluğu). Marka görseli tam bir kompozisyon
 * olduğu için aynı kurgu onu sağa kaymış gösteriyordu. Burada iki
 * kenardan da taşıyor: panel genişliğini tam dolduruyor ve ortalanıyor.
 */
/*
 * Taşma payı sabit bir değerden değil, yan panelin O ANDAKİ iç
 * boşluğundan okunuyor. Sabit yazıldığında dar ekranda iç boşluk 24
 * pikselken taşma 48 kalıyor ve görsel sayfayı yatay kaydırıyordu.
 */
.auth__shot--brand {
  margin-inline: calc(var(--auth-pad, var(--s7)) * -1);
  margin-block: var(--s3);
  border-inline: 0;
  border-radius: 0;
}

.auth__shot--brand img {
  width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: var(--coal-deep);
}

/* --- Müşterinin kendi taslak kartı --- */

/*
 * Plakanın üzerinde bir silme düğmesi var. Düğme bağlantının İÇİNE
 * konulamıyor: iç içe tıklanabilir öge klavyeyle gezilemez hâle geliyor.
 * Bu yüzden kart bir sarmal, içinde bağlantı ve ayrı bir form duruyor.
 */
.plate--own { position: relative; }
.plate--own .plate__open { display: block; text-decoration: none; color: inherit; }

.plate__del {
  position: absolute;
  inset-block-start: var(--s3);
  inset-inline-end: var(--s3);
  opacity: 0;
  transition: opacity var(--t-normal) var(--ease);
}

.plate--own:hover .plate__del,
.plate__del:focus-within { opacity: 1; }

.plate__del button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: var(--r-touch);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8125rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease);
}

.plate__del button:hover { background: var(--err); border-color: var(--err); color: #fff; }

/* Dokunmatik ekranda hover yok: düğme hep görünür. */
@media (hover: none) { .plate__del { opacity: 1; } }

/* ======================================================================
   HATA SAYFALARI
   ====================================================================== */

/*
 * Hata sayfası bir çıkmaz değil, bir yol ayrımı. Ne olduğunu söylüyor ve
 * ziyaretçinin gitmek isteyeceği yeri veriyor. Kod büyük değil: ziyaretçi
 * 404'ün ne demek olduğuyla ilgilenmiyor, nereye gideceğiyle ilgileniyor.
 */
.gone {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  min-height: 58vh;
  align-content: center;
  padding-block: var(--s9);
  text-align: center;
}

.gone__code {
  margin: 0;
  color: var(--faint);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.gone h1 { max-width: 18ch; }
.gone__lead { max-width: 46ch; color: var(--muted); }
.gone__acts { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-block-start: var(--s3); }

.gone__help {
  margin-block-start: var(--s5);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--rule);
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--t-caption);
}

.gone__help a { color: var(--brand-text); font-weight: 600; }

@media (max-width: 559px) {
  .gone { padding-block: var(--s8); }
  .gone__acts { width: 100%; }
  .gone__acts .btn { flex: 1 1 auto; }
}

/* --- Fiyat kalemleri: tek seferlik ile yinelenen ayrımı --- */

.buy__parts {
  display: grid;
  gap: 5px;
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-block-start: 1px solid var(--rule);
  list-style: none;
  font-size: var(--t-caption);
}

.buy__parts li { display: flex; justify-content: space-between; gap: var(--s3); color: var(--muted); }
.buy__parts .data { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* "her yıl" / "tek seferlik" işareti: rakamın yanında, rakamdan sessiz. */
.buy__parts i,
.facts__when {
  margin-inline-start: 5px;
  font-style: normal;
  font-weight: 500;
  font-size: 0.9em;
  color: var(--muted);
}

.facts__when { display: inline-block; }

/* --- Paket kademesi açıklaması --- */

.tiers {
  margin-block-start: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.tiers summary {
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--brand-text);
  list-style: none;
}

.tiers summary::-webkit-details-marker { display: none; }
.tiers summary::before { content: "＋ "; color: var(--muted); }
.tiers[open] summary::before { content: "－ "; }

.tiers dl { display: grid; gap: var(--s4); margin: var(--s5) 0 0; }
.tiers div { display: grid; gap: 2px; }
.tiers dt { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
.tiers dt a { color: var(--ink); text-decoration: none; }
.tiers dt a:hover { color: var(--brand-text); text-decoration: underline; }
.tiers dd { margin: 0; font-size: var(--t-small); color: var(--muted); }
.tiers dd b { color: var(--ink-soft); font-weight: 600; }
.tiers > p { margin-block-start: var(--s4); font-size: var(--t-caption); color: var(--faint); }

@media (min-width: 768px) { .tiers dl { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s7); } }

/* Kararını vermiş alıcının kısa yolu: ana eylemden sessiz, ama görünür. */
.buy__direct {
  display: block;
  margin-block-start: var(--s3);
  font-size: var(--t-caption);
  color: var(--muted);
  text-align: center;
}

.buy__direct:hover { color: var(--brand-text); }

/* Meslek dizini kendi sayfasında daha geniş nefes alıyor. */
.jobs--page { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/*
 * Az ürünle ızgara seyrek durmasın.
 *
 * Dört sütunda beşinci kart tek başına ikinci satıra düşüyor ve satırın
 * dörtte üçü boş kalıyordu. Kategori sayfalarında daha belirgindi: iki
 * ürünlü kategoride iki kart soldan başlayıp sağı boş bırakıyordu.
 *
 * `:has()` ile kart sayısına göre sütun sayısı düşüyor. Destek yoksa
 * varsayılan ızgara geçerli kalıyor, düzen bozulmuyor.
 */
.specimens:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 520px); }
.specimens:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.specimens:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .specimens:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .specimens:has(> :last-child:nth-child(2)),
  .specimens:has(> :last-child:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
}

/* Vazgeçme talebi: bulunması kolay, yanlışlıkla basılması zor. */
.giveup summary {
  cursor: pointer;
  font-size: var(--t-caption);
  color: var(--muted);
  list-style: none;
}

.giveup summary::-webkit-details-marker { display: none; }
.giveup summary:hover { color: var(--ink); }
.giveup form { display: grid; gap: var(--s3); margin-block-start: var(--s4); }
.giveup label { font-size: var(--t-caption); color: var(--muted); }
.giveup textarea { font: inherit; font-size: var(--t-small); }
.giveup .data { font-size: var(--t-caption); }

/* ======================================================================
   İÇERİK SAYFALARI
   ====================================================================== */

/* --- Derin adımlar: her adımın iki tarafı --- */

.steps-deep { display: grid; gap: var(--s8); margin: 0; padding: 0; list-style: none; }

.steps-deep > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.steps-deep__n {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
}

.steps-deep__body { min-width: 0; }
.steps-deep__body h2 { font-size: 1.375rem; }
.steps-deep__lead { margin-block: var(--s3) var(--s5); max-width: 62ch; color: var(--ink-soft); }

.steps-deep__two { display: grid; gap: var(--s5) var(--s7); }
.steps-deep__two h3 { margin-block-end: var(--s3); font-size: var(--t-small); color: var(--muted); }

/* Onay listesi: iddia değil, madde. */
.ticks { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }

.ticks li {
  position: relative;
  padding-inline-start: var(--s5);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ticks li::before {
  content: "\f00c";
  position: absolute;
  inset-inline-start: 0;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7em;
  color: var(--brand);
}

/* --- İki teslim şeklinin karşılaştırması --- */

.versus { display: grid; gap: var(--s5); }

.versus__col {
  display: grid;
  gap: var(--s4);
  align-content: start;
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.versus__col h3 { display: flex; align-items: center; gap: var(--s3); font-size: 1.125rem; }
.versus__col h3 i { color: var(--brand); }
.versus__price { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--brand-text); }
.versus__price i { font-style: normal; font-weight: 500; color: var(--muted); }

.versus__who {
  margin: 0;
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--rule);
  font-size: var(--t-caption);
  color: var(--muted);
}

/* --- Paket merdiveni --- */

.ladder { display: grid; gap: var(--s4); }

.ladder__step {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.ladder__step h3 { font-size: 1.0625rem; }
.ladder__who { margin: 0; font-size: var(--t-caption); font-weight: 600; color: var(--brand-text); }
.ladder__what { margin: 0; font-size: var(--t-small); color: var(--muted); }
.ladder__step .btn { justify-self: start; margin-block-start: var(--s2); font-size: var(--t-caption); }

/* --- Sık sorulanlar: konuya göre --- */

/*
 * Başlık ile akordeon aynı sütunda duruyor. Akordeon kendi genişliğini
 * ortalanmış 800 pikselden alıyor; başlık sayfa genişliğinde kalınca
 * ikisi bağlantısız iki blok gibi görünüyordu.
 */
.faq { display: grid; gap: var(--s7); }
.faq > section { width: 100%; max-width: 800px; margin-inline: auto; }
.faq h2 { margin-block-end: var(--s4); font-size: 1.25rem; }
.faq .qa { max-width: none; margin-inline: 0; }
.faq .qa p a { color: var(--brand-text); font-weight: 600; }

/* --- Hakkımızda girişi --- */

.about-hero { padding-block: var(--s9); }

.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
}

.about-hero__copy h1 { margin-block: var(--s4) 0; font-size: clamp(2rem, 4vw, 2.75rem); }
.about-hero__lead { margin-block-start: var(--s5); color: rgb(237 235 236 / 0.72); }

.about-hero__marks {
  display: grid;
  gap: var(--s3);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.about-hero__marks li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: rgb(237 235 236 / 0.78);
}

.about-hero__marks i { width: 18px; color: var(--brand); text-align: center; }

.about-hero__shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}

.about-hero__shot img { width: 100%; display: block; }

/* --- Sayı şeridi --- */

.numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.numbers > div { display: grid; gap: var(--s1); padding: var(--s5); background: var(--surface); }

.numbers b {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--brand-deep);
}

.numbers span { font-size: var(--t-small); color: var(--muted); }

/* --- İnandıklarımız --- */

.beliefs { display: grid; gap: var(--s5); }

.beliefs article {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
}

.beliefs__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-text);
}

.beliefs h3 { font-size: 1.0625rem; }
.beliefs p { margin: 0; font-size: var(--t-small); color: var(--muted); }

/* --- Yöntem satırları --- */

.method { display: grid; gap: 0; }

.method__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s5);
  border-block-start: 1px solid var(--rule);
}

.method__row:last-child { border-block-end: 1px solid var(--rule); }

.method__k {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
}

.method__row p { margin: 0; color: var(--ink-soft); }

@media (min-width: 768px) {
  .steps-deep__two { grid-template-columns: 1fr 1fr; }
  .versus { grid-template-columns: 1fr 1fr; }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beliefs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .about-hero { padding-block: var(--s8); }
  .about-hero__inner { grid-template-columns: 1fr; gap: var(--s6); }
}

@media (max-width: 639px) {
  .steps-deep > li { grid-template-columns: 1fr; gap: var(--s4); }
  .steps-deep__n { width: 38px; height: 38px; font-size: 1rem; }
  .method__row { grid-template-columns: 1fr; gap: var(--s2); }
  .numbers b { font-size: 1.875rem; }
}

/* ======================================================================
   TELEFON: DOKUNMA VE OKUNURLUK
   ====================================================================== */

/*
 * İki kural, ikisi de ölçülerek konuldu.
 *
 * Dokunma hedefi 44 piksel. Parmak fare değil; 37 piksellik bir menü
 * bağlantısı masaüstünde rahat, telefonda ıskalanıyor.
 *
 * En küçük yazı 12 piksel. Altındaki boyutlar telefonda okunmuyor ve
 * iOS Safari 16 pikselin altındaki form alanlarına odaklanınca sayfayı
 * kendiliğinden yakınlaştırıyor.
 */
@media (max-width: 1023px) {
  .masthead__nav a,
  .navdrop__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .navdrop__menu a { min-height: 48px; align-items: center; }

  /* Metin düğmesi: masaüstünde satır içi, telefonda dokunulabilir. */
  .btn--text {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding-inline: 2px;
  }

  /* Künye bağlantıları sık ve yan yana; aralarını açmak yanlış basmayı
     azaltıyor. */
  .colophon__col a { min-height: 40px; display: inline-flex; align-items: center; }

  /* Onay kutusu ve seçim düğmesi büyüyor; etiket zaten tıklanabilir. */
  .check input,
  .choice input[type="radio"],
  .choice input[type="checkbox"] { width: 22px; height: 22px; }

  /* En küçük yazı 13 piksel (--t-caption). */
  .promo__tag,
  .data.muted,
  .fld__help,
  .where { font-size: var(--t-caption); }

  /* iOS form alanına odaklanınca yakınlaştırmasın. */
  .field,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="search"], select, textarea { font-size: 16px; }
}

/* Marka kilidi dokunmatikte de rahat tıklanmalı. */
@media (max-width: 1023px) {
  .mark { min-height: 44px; align-items: center; }
}

@media (max-width: 1023px) {
  /* Künyedeki daire ikonlar ve yasal sayfa menüsü. */
  .colophon__social a { width: 44px; height: 44px; }
  .legal__nav a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Açılır kutu başlığı: tek satır metin, dokunulacak yüzeyi yok. */
  .tiers summary,
  .qa summary,
  .giveup summary { min-height: 44px; display: flex; align-items: center; }

  /* Palet düğmeleri ürün sayfasının ana etkileşimi. */
  .swatches__b { min-height: 44px; }

  /* Fiyat kaleminin "her yıl" işareti okunmuyordu. */
  .buy__parts i, .facts__when { font-size: var(--t-caption); }
}

/*
 * Slider noktalarının DOKUNMA YÜZEYİ büyük, ÇUBUĞU ince.
 *
 * Önce dolgu ile denendi ve bozuldu: `box-sizing: border-box` yüzünden
 * 5 piksellik yükseklik 40 piksellik dolguyu taşıyamıyor, öge büyüyor ve
 * içerik kutusu sıfırlanıyordu. Çubuk artık bir sözde ögede; düğmenin
 * kendisi şeffaf bir 44 piksellik hedef.
 */
.show__dot {
  position: relative;
  width: 26px;
  height: 44px;
  background: none;
  border-radius: 0;
}

.show__dot::before {
  content: "";
  position: absolute;
  inset-block: calc(50% - 2.5px) auto;
  inset-inline: 0;
  height: 5px;
  border-radius: 3px;
  background: rgb(237 235 236 / 0.24);
  transition: background var(--t-normal) var(--ease);
}

.show__dot:hover { background: none; }
.show__dot:hover::before { background: rgb(237 235 236 / 0.45); }
.show__dot.is-on { width: 40px; background: none; }
.show__dot.is-on::before { background: var(--brand); }

@media (max-width: 1023px) {
  .show__dots { gap: var(--s2); }
}

@media (max-width: 1023px) {
  /* Kırıntı yolu bir gezinme aracı, düz metin değil. */
  .crumb a { min-height: 36px; display: inline-flex; align-items: center; }

  /* Onay kutusu WCAG'ın 24 piksel alt sınırına çıkıyor. */
  .check input,
  .choice input[type="radio"],
  .choice input[type="checkbox"] { width: 24px; height: 24px; }

  /* Seçim kutusu diğer alanlarla aynı yükseklikte olmalı. */
  select.field { min-height: 44px; }

}

/* --- Telefonda başlık yüksekliği --- */

/*
 * Telefonda içerikten önce 250 pikselden fazla kabuk vardı: iki satırlık
 * kampanya şeridi, marka satırı, düğme satırı ve menü satırı.
 *
 * Şerit kısalıyor ve "Siteleri görün" düğmesi gizleniyor. Düğme menüdeki
 * "Siteler" ile aynı yere gidiyordu; telefonda iki kez göstermek satır
 * kazandırmıyor, satır götürüyordu.
 */
.promo__short { display: none; }

@media (max-width: 767px) {
  .promo__long { display: none; }
  .promo__short { display: inline; }
  .promo__inner > a { display: none; }

  .masthead__end .btn--small { display: none; }
  .masthead__inner { gap: var(--s3) var(--s4); }
}

@media (max-width: 359px) {
  .promo { display: none; }
}

/*
 * Çok dar ekranda (320 piksel) uzun etiketli düğmeler kutusunu taşırıyordu.
 * Düğme küçülebilir ve gerekirse iki satıra kırılır; taşmak yerine sarmak
 * her zaman daha iyi.
 */
@media (max-width: 359px) {
  .btn {
    min-width: 0;
    max-width: 100%;
    padding-inline: var(--s4);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .buy__cta, .hero__actions .btn, .invite__actions .btn { width: 100%; }
}

/*
 * 320 piksellik ekranda giriş başlığı kutusunu taşıyordu: "İnternetteki"
 * kelimesi tek parça ve o punto ile 307 piksel geliyor, sütun ise 280.
 * `.hero` taşanı kırptığı için harfler kesiliyordu.
 *
 * Punto küçülüyor ve sütun içeriğinden daralabiliyor. Kelime kırma son
 * çare olarak açık: kırpmaktansa tireleyip göstermek iyidir.
 */
/*
 * Suçlu başlık değil, slider künyesiydi.
 *
 * Giriş tek sütuna indiğinde metin ile slider AYNI ızgara sütununu
 * paylaşıyor ve sütunun asgari genişliği ikisinin en genişinden geliyor.
 * `.show__tag` "Dietisyen Site 1 ⬤⬤⬤⬤⬤ 10.000 ₺" satırını `nowrap` ile
 * tek satırda tutuyordu; 307 piksellik bu asgari ölçü bütün sütunu
 * şişirip giriş metnini ve düğmeleri ekranın dışına itiyordu.
 *
 * Künye artık dar ekranda sarıyor. Sütun içeriğinden daralabildiği için
 * başlık da düğmeler de ekranın içinde kalıyor.
 */
.hero__copy,
.show,
.show__slide { min-width: 0; }

@media (max-width: 479px) {
  .show__tag {
    width: auto;
    flex-wrap: wrap;
    white-space: normal;
    gap: var(--s2) var(--s3);
  }
}

@media (max-width: 359px) {
  .hero h1 { font-size: 1.75rem; }
  .hero h1,
  .hero__lead { overflow-wrap: break-word; }
}

/* ======================================================================
   ÖDEME, TESLİM İLERLEMESİ, ALAN ADI
   ====================================================================== */

.pay__card {
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pay__card .fld + .fld,
.pay__row .fld + .fld { margin-block-start: 0; }
.pay__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }

.pay__demo p { margin: 0; }
.pay__cards { display: grid; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.pay__cards li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  font-size: var(--t-small);
}
.pay__cards code { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* Teslim ilerlemesi: biten adım yeşil nokta, çalışan adım nabız atar. */
.progress { display: grid; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.progress__item {
  position: relative;
  padding-inline-start: var(--s6);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.progress__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok);
}
.progress__item.is-now { color: var(--ink); font-weight: 600; }
.progress__item.is-now::before {
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
  animation: progress-pulse 1.4s var(--ease) infinite;
}
.progress__item.is-bad { color: var(--err); }
.progress__item.is-bad::before { background: var(--err); }

@keyframes progress-pulse {
  50% { box-shadow: 0 0 0 7px var(--brand-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .progress__item.is-now::before { animation: none; }
}

.secret {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2) var(--s5);
  margin: var(--s4) 0;
  padding: var(--s5);
  border: 1px dashed var(--brand-line);
  border-radius: var(--r-card);
  background: var(--brand-soft);
}
.secret dt { color: var(--muted); font-size: var(--t-small); }
.secret dd { margin: 0; }
.secret code { font-size: 1rem; overflow-wrap: anywhere; user-select: all; }

.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-block-start: var(--s4); }
.actions-row form { margin: 0; }

.wrap-x { overflow-x: auto; }

.dns { width: 100%; margin-block-start: var(--s4); border-collapse: collapse; font-size: var(--t-small); }
.dns th,
.dns td { padding: var(--s3); border-block-end: 1px solid var(--rule); text-align: start; vertical-align: top; }
.dns th { color: var(--muted); font-weight: 600; }
.dns code { overflow-wrap: anywhere; user-select: all; }

.domainform { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); margin-block-start: var(--s4); }
.domainform .fld { flex: 1 1 240px; }
.domainform--tight { margin-block-start: 0; align-items: center; }
.domainform--tight .field { flex: 1 1 240px; width: auto; }
.domainform .dlookup { flex: 1 1 100%; }

/* Alan adı sorgusunun sonucu: durum satırı ve tıklanır öneriler. */
.dlookup:empty { display: none; }
.dlookup { display: grid; gap: var(--s2); margin-block-start: var(--s2); font-size: var(--t-small); }
.dlookup p { margin: 0; }
.dlookup__note { color: var(--muted); font-size: var(--t-caption); }
.dlookup__status { font-weight: 600; }
.dlookup__status.is-available { color: var(--ok); }
.dlookup__status.is-taken { color: var(--err); }
.dlookup__status.is-unknown { color: var(--muted); }
.dlookup__picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.dlookup__pick {
  font: inherit; font-size: var(--t-caption); cursor: pointer;
  min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
}
.dlookup__pick:hover, .dlookup__pick:focus-visible { border-color: var(--brand); color: var(--brand-text); }
.dlookup__pick.is-available { border-color: var(--brand-line); }
.choice.is-off { opacity: .55; }
.choice.is-off .choice__title { text-decoration: line-through; }

/* Revize talepleri. */
.rev { display: grid; gap: var(--s2); padding-block: var(--s3); }
.rev + .rev { border-top: 1px solid var(--rule); }
.rev p { margin: 0; }
.rev__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.rev--past .quote { color: var(--muted); }
.quote { margin: 0; padding-inline-start: var(--s3); border-inline-start: 2px solid var(--rule-strong); overflow-wrap: anywhere; }
.state--rev-awaiting_payment, .state--rev-requested { border-color: #e6d3a8; color: var(--warn); }
.state--rev-in_progress { border-color: var(--brand-line); color: var(--brand-text); }
.state--rev-done { border-color: #bfe3c9; color: var(--ok); }
.state--rev-declined, .state--rev-cancelled { color: var(--muted); }

.buy__second { margin-block-start: var(--s3); }

/* ======================================================================
   XUDBIN KİMLİĞİ — logo ve marka kilidi
   Logo panelle aynı: 45° döndürülmüş dört kare, lal kırmızısı. Ad IBM Plex
   Sans; "market" ikincil ağırlıkta.
   ====================================================================== */
.mark__glyph { color: var(--brand-deep); height: 30px; width: 30px; margin-block-end: 0; }
.colophon .mark__glyph, .coal .mark__glyph { color: var(--brand); height: 34px; width: 34px; }
.rail__logo, .gate-card__mark .mark__glyph { color: var(--brand); }
.mark { align-items: center; }
.mark__name { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variation-settings: normal; gap: 3px; }
.mark__name em { font-style: normal; font-weight: 500; color: var(--muted); }
.colophon .mark__name em, .coal .mark__name em { color: var(--coal-muted); }
.mark__sub { letter-spacing: 0.14em; }
.mark__title { display: block; white-space: nowrap; }
.mark__name { gap: 4px; }

/* Xudbin Panel bağlantısı: market menüsünde ayrı bir ürüne gidildiğini belli eder. */
.masthead__nav .nav-xudbin { color: var(--muted); }
.masthead__nav .nav-xudbin::after { content: "↗"; margin-inline-start: 4px; font-size: 0.8em; }

/* Ürün sayfası: üç katman, hazır değilse özel siteye yol */
.buy__custom { margin-block-start: var(--s4); font-size: var(--t-caption); color: var(--muted); display: flex; gap: 8px; align-items: baseline; }
.buy__custom i { color: var(--brand-text); }
.buy__custom a { color: var(--brand-text); font-weight: 600; }

/* Satış kapalıyken ön kayıt */
.waitlist { margin-block-start: var(--s4); padding: var(--s4); border: 1px solid var(--rule, #e5e3e2); border-radius: 12px; }
.waitlist__label { font-weight: 600; }
.waitlist__row { display: flex; gap: 8px; }
.waitlist__row .field { flex: 1; min-width: 0; }
.waitlist__note { font-size: var(--t-caption); }

/* --- Hesap: Sitelerim kartları --- */
.sitecards { display: grid; gap: var(--s4); }
.sitecard { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: var(--s5); padding: var(--s4); border: 1px solid var(--rule); border-radius: 12px; background: var(--paper, transparent); }
.sitecard__shot { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 8px; background: var(--wash); }
.sitecard__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; display: block; }
.sitecard__name { margin: 0 0 var(--s2); font-size: 1.125rem; }
.sitecard__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); }
.sitecard__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s3); font-size: var(--t-small, 0.875rem); }
.sitecard__facts dt { color: var(--muted); }
.sitecard__facts dd { margin: 0; }
.sitecard__renew { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.sitecard__acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 640px) { .sitecard { grid-template-columns: 1fr; } }

/* --- Talep anketi ("Satışa açılsak alır mıydınız?") --- */
.poll { max-inline-size: 760px; margin-inline: auto; padding: var(--s5) var(--s5); border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); }
.poll__form { display: grid; gap: var(--s4); }
.poll__form > .badge { justify-self: start; }
.poll__q { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.poll__lead { margin: 0; font-size: 1.0625rem; }
.poll__why { margin: 0; font-size: var(--t-small); }
.poll__set { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.poll__set legend { padding: 0; margin-block-end: var(--s2); font-weight: 600; }
.poll__opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.poll__opt { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; }
.poll__opt:hover { border-color: var(--brand-line); }
.poll__opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.poll__opt input { accent-color: var(--brand); margin: 0; }
.poll__opt input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.poll__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.poll__row .field, .poll__email .field { min-height: 44px; }
.poll__email { display: grid; gap: var(--s2); font-weight: 600; }
.poll__email .muted { font-weight: 400; }
.poll__form > .btn { justify-self: start; }
.poll__note { margin: 0; font-size: var(--t-caption); }
.poll__note a { padding-block: 10px; }
.poll__done { display: flex; gap: var(--s3); align-items: flex-start; }
.poll__done > i { font-size: 1.5rem; color: var(--brand); margin-block-start: 2px; }
.poll__done p { margin: 0; }
.poll__title { font-weight: 600; font-size: 1.125rem; }
.poll-page__more { text-align: center; margin-block-start: var(--s4); }
.buy__poll { margin-block-start: var(--s3); inline-size: 100%; justify-content: center; }
@media (max-width: 560px) {
  .poll { padding: var(--s4); }
  .poll__row { grid-template-columns: 1fr; }
  .poll__opt { flex: 1 1 100%; border-radius: 12px; }
  .poll__form > .btn { justify-self: stretch; justify-content: center; }
}
.callout { padding: var(--s3) var(--s4); border: 1px solid var(--brand-line); border-radius: 12px; background: var(--surface); }

/* --- Bakım modu --- */
.maint { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); background: var(--paper); color: var(--ink); }
.maint__box { max-inline-size: 560px; display: grid; gap: var(--s4); text-align: center; justify-items: center; }
.maint__box h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.2; }
.maint__text p { margin: 0 0 var(--s3); color: var(--muted); }
.maint__actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.maint-banner { margin: 0; padding: 10px var(--s4); text-align: center; font-size: var(--t-small); background: var(--brand-soft, #fbe9eb); color: var(--ink); border-bottom: 1px solid var(--brand-line); }
.maint-banner--staff { background: #b4233a; color: #fff; border-color: #8f1b2e; }
.maint-banner--staff a { color: #fff; text-decoration: underline; }