/* ============================================================================
   components.css — buton, rozet, form, tablo, sekme, tablo, panel, adım
   Ham renk YOKTUR. Her değer tokens.css'ten gelir.
   ========================================================================== */

/* ── Butonlar ────────────────────────────────────────────────────────────────
   TEK birincil eylem rengi: kor turuncu. Bir ekranda birden fazla dolu turuncu
   buton bulunmaz (PROJE.md 8.11). Yıkıcı eylem kasıtlı olarak zayıftır.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-5); height: 44px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 16px; height: 16px; }

/* Dolgu degradesi butonlara ozel: acik uc (#FF7D4C) uzerinde beyaz metin
   2.53:1 kaliyordu. --grad-ember-btn daha derin uctan baslar; renk hala
   marka turuncusu, kontrast AA sinirinda. */
.btn--primary {
  background: var(--grad-ember-btn); color: var(--ember-ink);
  box-shadow: var(--sh-ember-sm);
}
.btn--primary:hover { box-shadow: var(--sh-ember); filter: brightness(1.05); }

.btn--outline {
  background: var(--card); color: var(--ink); border-color: var(--rule-2);
}
.btn--outline:hover { border-color: var(--ember); color: var(--ember-deep); background: var(--ember-tint); }

.btn--ghost { background: transparent; color: var(--slate); }
.btn--ghost:hover { color: var(--ink); background: var(--mist); }

.btn--ink { background: var(--carbon); color: var(--carbon-text); }
.btn--ink:hover { background: var(--carbon-3); }

/* Vurgu bandı içinde ikincil.
   Eskiden koyu zemin içindi; koyu bantlar kalktığı için artık açık zeminde
   çalışan turuncu çerçeveli ikincil butondur. İşaretleme değişmedi. */
.btn--onDark {
  background: var(--paper); color: var(--ember-deep);
  border-color: var(--ember-edge-2);
}
.btn--onDark:hover { background: var(--ember-tint); border-color: var(--ember); }

/* Kor zeminde ikincil (turuncu bant içinde) */
.btn--onEmber { background: var(--ember-ink); color: var(--ember-lo); }
.btn--onEmber:hover { filter: brightness(.96); }

/* Yıkıcı eylem kasıtlı olarak zayıf — asla dolu kırmızı değil */
.btn--danger { background: transparent; color: var(--alarm); border-color: transparent; }
.btn--danger:hover { background: var(--alarm-bg); border-color: var(--alarm-edge); }

.btn--sm { height: 34px; padding-inline: var(--s-4); font-size: var(--fs-xs); }
.btn--lg { height: 54px; padding-inline: var(--s-6); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* Ok'lu metin bağlantısı */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--ember-deep); font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none;
}
.link-arrow .icon { transition: transform var(--t-base) var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ── Rozet ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-3); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--haze); color: var(--slate); border: 1px solid var(--rule);
  white-space: nowrap;
}
.badge--brand { background: var(--ember); color: var(--ember-ink); border-color: transparent; }
.badge--soft  { background: var(--ember-tint); color: var(--ember-deep); border-color: var(--ember-edge); }
.badge--ok    { background: var(--signal-bg); color: var(--signal); border-color: var(--signal-edge); }
.badge--warn  { background: var(--caution-bg); color: var(--caution); border-color: var(--caution-edge); }
.badge--bad   { background: var(--alarm-bg); color: var(--alarm); border-color: var(--alarm-edge); }
.badge--info  { background: var(--info-bg); color: var(--info); border-color: var(--info-edge); }
.badge--dark  { background: var(--carbon-3); color: var(--carbon-text); border-color: var(--carbon-rule); }

.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Kart ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--card-rule);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.card--pad-sm { padding: var(--s-5); }
.card--lift {
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--rule-2); }

/* ── Form ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field > label, .field-label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.field__hint { font-size: var(--fs-xs); color: var(--smoke); }
.field__err  { font-size: var(--fs-xs); color: var(--alarm); }
.field--req > label::after { content: ' *'; color: var(--ember-deep); }

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; min-width: 0;
  padding: 0 var(--s-4); height: 46px;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--field-rule); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-family: var(--font-body);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
  appearance: none; -webkit-appearance: none;
}
textarea { height: auto; padding: var(--s-3) var(--s-4); line-height: 1.6; resize: vertical; }

select {
  padding-right: var(--s-7);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ember); box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--ghost); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--field-disabled); color: var(--smoke); cursor: not-allowed;
}

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.form-grid .field--wide { grid-column: 1 / -1; }

fieldset { border: none; padding: 0; min-width: 0; }
/* legend tarayıcıda kenarlık kutusuna yerleşir; fieldset'e padding-top verince
   başlık yukarıda kalıp altında ölü boşluk bırakıyordu. float ile normal akışa
   alınır ve boşluk öngörülebilir olur. */
legend {
  float: left; width: 100%;
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700;
  color: var(--ink); letter-spacing: var(--track-tight);
  margin-bottom: var(--s-4); padding: 0;
}
legend + * { clear: both; }
.fieldset + .fieldset { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--rule); }

/* Onay kutusu / radyo — özel çizim, erişilebilir */
.field--check { flex-direction: row; align-items: flex-start; gap: var(--s-3); }
.field--check input[type="checkbox"],
.field--check input[type="radio"],
.check-input {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--field-rule); background: var(--field);
  border-radius: var(--r-xs); cursor: pointer; padding: 0;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.field--check input[type="radio"] { border-radius: 50%; }
.field--check input:checked, .check-input:checked {
  background: var(--ember); border-color: var(--ember);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.field--check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px var(--field);
}
.field--check > label { font-size: var(--fs-sm); font-weight: 400; color: var(--slate); line-height: 1.5; }
.field--check > label a { font-weight: 600; }

/* Input + buton bitişik grup */
.input-group { display: flex; gap: var(--s-3); align-items: flex-start; }
.input-group > .field { flex: 1; }
.input-group .btn { height: 46px; flex: none; }

/* ── Seçim kartı (WHMCS css-checkbox kalıbının erişilebilir hali) ─────────── */
.choice-card {
  position: relative;
  border: 1.5px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.choice-card + .choice-card { margin-top: var(--s-4); }
.choice-card > input {
  position: absolute; top: var(--s-5); left: var(--s-5);
  width: 20px; height: 20px; margin: 0; z-index: 2;
  border: 1.5px solid var(--field-rule); background: var(--field);
  border-radius: 50%; cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.choice-card > input:checked {
  background: var(--ember); border-color: var(--ember);
  box-shadow: inset 0 0 0 4px var(--card);
}
.choice-card > label {
  display: block; padding: var(--s-5) var(--s-5) var(--s-5) calc(var(--s-5) + 34px);
  cursor: pointer;
}
.choice-card:hover { border-color: var(--rule-2); }
.choice-card:has(input:checked) {
  border-color: var(--ember); background: var(--ember-tint);
  box-shadow: var(--sh-ember-sm);
}
.choice-card:has(input:focus-visible) { box-shadow: var(--ring); }

.choice-card__title {
  display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-md);
  margin-bottom: var(--s-1);
}
.choice-card__desc { display: block; font-size: var(--fs-sm); color: var(--slate); }
.choice-card__body {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  margin-top: var(--s-4);
}
/* Seçili değilken gövde soluk — hangi seçenekte olduğunuz belli olur */
.choice-card:not(:has(input:checked)) .choice-card__body { opacity: .55; }

.choice-card--inline { display: inline-flex; }
.choice-card--inline > label { padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-4) + 32px); }
.choice-card--inline > input { top: 50%; left: var(--s-4); transform: translateY(-50%); }

/* Alan adı giriş bileşiği: www. + sld + tld */
.domain-input {
  display: flex; align-items: stretch; flex: 1; min-width: 260px;
  border: 1px solid var(--field-rule); border-radius: var(--r-md);
  background: var(--field); overflow: hidden;
}
.domain-input:focus-within { border-color: var(--ember); box-shadow: var(--ring); }
.domain-input__prefix {
  display: grid; place-items: center; padding-inline: var(--s-4);
  background: var(--mist); color: var(--smoke);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  border-right: 1px solid var(--field-rule);
}
.domain-input input { border: none; border-radius: 0; background: transparent; }
.domain-input input:focus { box-shadow: none; }
.domain-input select {
  border: none; border-radius: 0; background-color: transparent;
  width: auto; min-width: 118px; border-left: 1px solid var(--field-rule);
  font-family: var(--font-mono);
}
.domain-input select:focus { box-shadow: none; }

/* ── Sekmeler ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s-1); padding: var(--s-1);
  background: var(--mist); border: 1px solid var(--rule);
  border-radius: var(--r-lg); margin-bottom: var(--s-6);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: 1; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; color: var(--slate);
  white-space: nowrap; text-align: center; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.tabs__tab:hover { color: var(--ink); text-decoration: none; }
.tabs__tab.is-active { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.tabs--pill { display: inline-flex; }
.tabs--pill .tabs__tab { flex: none; }

/* ── Filtre çipleri ──────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--card);
  font-size: var(--fs-xs); font-weight: 600; color: var(--slate);
  font-family: var(--font-mono);
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--ember); color: var(--ember-deep); }
.chip.is-active { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); }

/* ── Tablo ───────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--card); -webkit-overflow-scrolling: touch;
}
.table { min-width: 640px; font-size: var(--fs-sm); }
.table thead th {
  background: var(--mist); text-align: left;
  padding: var(--s-4) var(--s-5); white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--smoke);
  border-bottom: 1px solid var(--rule);
}
.table tbody td, .table tbody th {
  padding: var(--s-4) var(--s-5); text-align: left; vertical-align: middle;
  border-top: 1px solid var(--rule); font-weight: 400; color: var(--slate);
}
.table tbody th { color: var(--ink); font-weight: 600; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease); }
.table tbody tr:hover { background: var(--mist); }
.table .num { color: var(--ink); }
.table__actions { display: flex; gap: var(--s-2); justify-content: flex-end; }
.table-note { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--smoke); }
.table--compact tbody td, .table--compact tbody th { padding: var(--s-3) var(--s-4); }

/* ── Uyarı / bilgi kutusu ────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  border: 1px solid var(--info-edge); background: var(--info-bg);
  font-size: var(--fs-sm); color: var(--slate);
}
.alert .icon { width: 20px; height: 20px; color: var(--info); margin-top: 2px; }
.alert strong { display: block; margin-bottom: 2px; color: var(--ink); }
.alert--ok   { background: var(--signal-bg); border-color: var(--signal-edge); }
.alert--ok .icon { color: var(--signal); }
.alert--warn { background: var(--caution-bg); border-color: var(--caution-edge); }
.alert--warn .icon { color: var(--caution); }
.alert--bad  { background: var(--alarm-bg); border-color: var(--alarm-edge); }
.alert--bad .icon { color: var(--alarm); }
.alert--brand { background: var(--ember-tint); border-color: var(--ember-edge); }
.alert--brand .icon { color: var(--ember-deep); }

/* ── Adım göstergesi ─────────────────────────────────────────────────────── */
.steps-bar { background: var(--mist); border-bottom: 1px solid var(--rule); }
.steps {
  display: flex; align-items: center; gap: var(--s-2);
  padding-block: var(--s-5); overflow-x: auto; scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.steps__item {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ghost);
  white-space: nowrap;
}
.steps__item::before {
  content: attr(data-step);
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ghost);
}
.steps__sep { flex: 1; min-width: 16px; height: 1px; background: var(--rule); }
.steps__item.is-done { color: var(--slate); }
.steps__item.is-done::before {
  background: var(--signal-bg); border-color: var(--signal-edge); color: var(--signal);
}
.steps__item.is-current { color: var(--ink); }
.steps__item.is-current::before {
  background: var(--grad-ember); border-color: transparent; color: var(--ember-ink);
  box-shadow: var(--sh-ember-sm);
}

/* ── Panel kutusu (müşteri paneli ve özet blokları) ──────────────────────── */
.panel {
  background: var(--card); border: 1px solid var(--card-rule);
  border-radius: var(--r-lg); overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule);
  background: var(--mist);
}
.panel__title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700;
  color: var(--ink); letter-spacing: var(--track-tight);
}
.panel__body { padding: var(--s-5); }
.panel__body--flush { padding: 0; }
/* Uzun rozet (ör. "Hafta içi 09:00 - 18:00 · Teknik destek 7/24" = 336px)
   dar ekranda başlığın yanına sığmıyor, .panel{overflow:hidden} onu sessizce
   kırpıyordu. Dar ekranda başlık satırı sarar, rozet de metnini sardırır. */
@media (max-width: 620px) {
  .panel__head { flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
  .panel__head .badge { white-space: normal; max-width: 100%; }
}
.panel__foot {
  padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule);
  background: var(--mist); font-size: var(--fs-sm);
}
.panel--accent { border-top: 3px solid var(--ember); }

/* ── Boş durum ───────────────────────────────────────────────────────────── */
.empty {
  text-align: center; padding: var(--s-8) var(--s-5);
}
.empty__icon {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin: 0 auto var(--s-5); border-radius: var(--r-xl);
  background: var(--ember-tint); color: var(--ember-deep);
  border: 1px solid var(--ember-edge);
}
.empty__icon .icon { width: 28px; height: 28px; }
.empty h3 { margin-bottom: var(--s-2); }
.empty p { color: var(--slate); margin-bottom: var(--s-5); max-width: 44ch; margin-inline: auto; }

/* ── SSS ─────────────────────────────────────────────────────────────────── */
.faq { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.faq__item + .faq__item { border-top: 1px solid var(--rule); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--smoke); border-bottom: 2px solid var(--smoke);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-base) var(--ease), border-color var(--t-fast) var(--ease);
}
.faq__item summary:hover { background: var(--mist); color: var(--ember-deep); }
.faq__item summary:hover::after { border-color: var(--ember); }
.faq__item[open] summary { color: var(--ember-deep); background: var(--mist); }
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--ember); }
.faq__item p { padding: 0 var(--s-5) var(--s-5); color: var(--slate); font-size: var(--fs-sm); max-width: 78ch; }
.faq__item p + p { padding-top: 0; margin-top: calc(var(--s-3) * -1); }

/* ── İlerleme çubuğu ─────────────────────────────────────────────────────── */
.meter { height: 6px; border-radius: var(--r-pill); background: var(--haze); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-pill); background: var(--grad-ember); }

/* ── Ayraç ───────────────────────────────────────────────────────────────── */
.hr { height: 1px; background: var(--rule); border: none; margin-block: var(--s-6); }

/* ── Giriş animasyonu ────────────────────────────────────────────────────────
   .reveal YALNIZCA JS varsa gizlenir. JS yoksa (html.js sınıfı yoksa) her şey
   olduğu gibi görünür — içerik hiçbir koşulda kaybolmaz.
   ------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Sayfa açılış sıralaması — hero öğeleri sırayla yükselir */
.js .rise { opacity: 0; transform: translateY(14px); animation: rise-in var(--t-cine) var(--ease-out) forwards; }
.js .rise--1 { animation-delay: 40ms; }
.js .rise--2 { animation-delay: 110ms; }
.js .rise--3 { animation-delay: 180ms; }
.js .rise--4 { animation-delay: 250ms; }
.js .rise--5 { animation-delay: 320ms; }
.js .rise--6 { animation-delay: 390ms; }
.js .rise--7 { animation-delay: 460ms; }
@keyframes rise-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ── Duyarlılık ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .tabs__tab { font-size: var(--fs-xs); padding-inline: var(--s-3); }
  .choice-card > label { padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 32px); }
  .choice-card > input { top: var(--s-4); left: var(--s-4); }
  .input-group { flex-direction: column; }
  .input-group .btn { width: 100%; }
  /* flex:1 olduğu için width etkisizdi; kardeş düğme küçülmeyince kutuya
     52px kalıyordu. Satırı kırıp düğmeyi tam genişliğe alıyoruz. */
  .choice-card__body { flex-wrap: wrap; }
  .domain-input { min-width: 0; width: 100%; flex: 1 1 100%; }
  .choice-card__body > .btn { width: 100%; }
}

/* ── Küçük düzeltmeler ───────────────────────────────────────────────────── */
.steps__sep:last-child { display: none; }
.utility__badge.is-empty { background: var(--carbon-3); color: var(--carbon-mute); }

/* Yazdırmada hiçbir bölüm gizli kalmaz */
@media print {
  .js .reveal, .js .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Seçim kartı içindeki sonuç/uyarı metni — label'ın dışında durduğu için
   hizasını ayrıca vermek gerekir (sözleşme gereği label iç içe olamıyor). */
.choice-card > .field__hint,
.choice-card > .field__err {
  padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 34px);
  margin-top: calc(var(--s-2) * -1);
}
.choice-card > .field__hint:empty,
.choice-card > .field__err:empty { display: none; }

/* ── Turuncu yıkama bandı içindeki bileşenler ─────────────────────────────
   `.section--tint` zemini açık turuncudur. Kendi zemini olan bileşenler
   (kart, panel, tablo) BEYAZ kalır — yıkamanın üstünde yüzerler. Yapılacak
   tek iş, nötr gri kenarlıkları sıcak turuncu kenarlıklara çevirmek; aksi
   hâlde gri kenar turuncu zeminde kirli görünür.
   ---------------------------------------------------------------------- */
.section--tint .card,
.section--tint .panel,
.section--tint .faq,
.section--tint .table-wrap,
.section--tint .svc__card,
/* :not(.plan--pick) ŞART: öne çıkan kart dolu turuncudur; bu kural onu da
   beyaza çevirince metin beyaz kaldığı için kart görünmez oluyordu. */
.section--tint .plan:not(.plan--pick),
.section--tint .cert,
.section--tint .vds__card,
.section--tint .srv__card,
.section--tint .ladder {
  background: var(--card);
  border-color: var(--ember-edge);
}
.section--tint .panel__head,
.section--tint .panel__foot { background: var(--ember-tint); border-color: var(--ember-edge); }
.section--tint .table thead th { background: var(--ember-tint); border-color: var(--ember-edge); }
.section--tint .table tbody td,
.section--tint .table tbody th { border-color: var(--rule); }

.section--tint .chip { background: var(--paper); border-color: var(--ember-edge); }
.section--tint .badge { background: var(--paper); border-color: var(--ember-edge); }
.section--tint .btn--outline { background: var(--paper); }
.section--tint .field input,
.section--tint .field select,
.section--tint .field textarea { border-color: var(--ember-edge-2); }

/* ── Kor bant içindeki bileşenler ─────────────────────────────────────── */
.section--ember .perk > .icon,
.section--ember .svc__list .icon,
.section--ember .icon { color: var(--ember-ink); }
.section--ember .perk span,
.section--ember .perk strong,
.section--ember .stat__v,
.section--ember .stat__l { color: var(--ember-ink); }
.section--ember .stat,
.section--ember .card,
.section--ember .perk--card {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
/* Zemin sabit beyaz, metin ise var(--ink) idi: koyu temada beyaz üstüne
   beyaz yazı çıkıyordu (1.09:1). Zemin de token'a bağlandı. */
.section--ember .flow__step {
  background: var(--card);
  border-color: transparent;
}
.section--ember .flow__step strong { color: var(--ink); }
.section--ember .flow__step span { color: var(--slate); }
.section--ember .flow__n { color: var(--ember-lo); }
.section--ember .flow__step::after { background: rgba(255, 255, 255, 0.45); }
.section--ember .badge { background: rgba(255,255,255,0.2); color: var(--ember-ink); border-color: rgba(255,255,255,0.3); }

/* ── Başa dön ────────────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 60;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--grad-ember); color: var(--ember-ink);
  box-shadow: var(--sh-ember);
  transition: transform var(--t-base) var(--ease), filter var(--t-fast) var(--ease);
}
.to-top .icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.to-top:hover { transform: translateY(-3px); filter: brightness(1.06); }
.to-top[hidden] { display: none; }
@media (max-width: 768px) {
  .to-top { right: var(--s-4); bottom: var(--s-4); width: 40px; height: 40px; }
}

/* Dar sütunlarda kompakt tablo yatay kaymasın */
.table--compact { min-width: 0; }

/* Boş durum başlığı h2 de olabilir */
.empty h2 { margin-bottom: var(--s-2); }

/* Koyu bantta düz metin bağlantısı — --ember-deep karbon üstünde okunmuyor */