/* =====================================================================
   BİLEŞENLER
   =====================================================================
   Maketteki tasarımın kod karşılığı. Masaüstünde tablo, mobilde kart —
   ikisi AYNI veriyi gösteriyor, sıkıştırma yok.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ÜST BAR
   --------------------------------------------------------------------- */
.ust {
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ust__ic {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 60px;
}

.marka {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.marka:hover { text-decoration: none; }
.marka__nokta { color: var(--vurgu); }

.ust__menu {
  display: flex;
  gap: var(--s-6);
  font-size: var(--fs-md);
  font-weight: 500;
}
.ust__menu a { color: var(--ink-3); }
.ust__menu a:hover { color: var(--ink); text-decoration: none; }
.ust__menu a[aria-current="page"] { color: var(--ink); }

.bakiye {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 6px 13px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
  white-space: nowrap;
}
.bakiye__etiket { font-size: var(--fs-xs); color: var(--ink-3); }
.bakiye__tutar  { font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------------
   DÜĞMELER
   --------------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 8px 17px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dugme:hover { border-color: var(--cizgi-guclu); text-decoration: none; }

.dugme--birincil {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: var(--vurgu-yazi);
}
.dugme--birincil:hover { filter: brightness(1.07); border-color: var(--vurgu); }

.dugme--sade { background: none; border-color: transparent; color: var(--ink-2); font-weight: 500; }
.dugme--kucuk { min-height: 32px; padding: 5px 12px; font-size: var(--fs-xs); }

.dugme[disabled] { opacity: .45; cursor: not-allowed; }

/* Tema seçici: yalnızca ikon, kare, dokunma hedefi tam. */
.tema-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
  color: var(--ink-2);
  cursor: pointer;
}
.tema-dugme:hover { border-color: var(--cizgi-guclu); color: var(--ink); }
/* Hangi ikonun görüneceğini tema belirliyor: koyu temada güneş
   (aydınlatmayı teklif ediyor), açık temada ay. */
.tema-dugme__ay, :root[data-theme="dark"] .tema-dugme__gunes { display: block; }
.tema-dugme__gunes, :root[data-theme="dark"] .tema-dugme__ay { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-dugme__gunes { display: block; }
  :root:not([data-theme="light"]) .tema-dugme__ay { display: none; }
}

/* ---------------------------------------------------------------------
   SAYFA BAŞLIĞI
   --------------------------------------------------------------------- */
.sayfa { padding: var(--s-7) 0 var(--s-12); }

.basi {
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}

.canli {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.canli__nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
/* Veri bayatladıysa nokta uyarı rengine dönüyor: "canlı" yazıp
   yarım saat eski veri göstermek, hiç göstermemekten kötü. */
.canli.is-bayat .canli__nokta { background: var(--uyari); }

.lede {
  max-width: 68ch;
  margin-bottom: var(--s-5);
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.55;
}

/* ---------------------------------------------------------------------
   SÜZGEÇ ÇUBUĞU
   --------------------------------------------------------------------- */
.suzgec {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.arama {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-grow: 1;
  max-width: 340px;
  min-width: 200px;
  padding: 0 13px;
  height: 42px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
}
.arama:focus-within { border-color: var(--vurgu); }
.arama input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-sm);
}
.arama svg { flex: none; color: var(--ink-3); }

.secim {
  height: 42px;
  padding: 0 34px 0 13px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  /* Yerleşik oku gizleyip kendi okumuzu çiziyoruz: tarayıcılar
     arasında çok farklı görünüyor. */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23868d9c' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
:root[data-theme="dark"] .secim {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23798593' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 6.5L8 10.5L12 6.5'/%3E%3C/svg%3E");
}

/* Onay kutusu bir etiketin içinde; tamamı tıklanabilir. */
.onay {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.onay input { accent-color: var(--vurgu); width: 15px; height: 15px; }
.onay.is-acik {
  border-color: var(--vurgu-cizgi);
  background: var(--vurgu-soft);
  color: var(--ink);
}

.sirala {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
}
.sirala a {
  padding: 6px 13px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-3);
}
.sirala a:hover { color: var(--ink); text-decoration: none; }
.sirala a.is-aktif {
  background: var(--yuzey);
  color: var(--ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   BORSA TABLOSU — masaüstü
   --------------------------------------------------------------------- */
.borsa {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
  overflow: hidden;
}

.borsa__basi,
.borsa__satir {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 140px 112px 96px 152px 100px;
  gap: var(--s-3);
  align-items: center;
  padding: 0 var(--s-4);
}

.borsa__basi {
  height: 40px;
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey-2);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 700;
}
.borsa__basi a { color: inherit; }
.borsa__basi a:hover { color: var(--ink); text-decoration: none; }

.borsa__satir {
  height: 52px;
  border-bottom: 1px solid var(--cizgi-soft);
}
.borsa__satir:last-child { border-bottom: 0; }
.borsa__satir:hover { background: var(--yuzey-2); }

.servis {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.servis__rozet {
  width: 28px; height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--yuzey-2);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.servis__ad { font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; }

.ulke { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ulke__kod {
  flex: none;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--yuzey-2);
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
}
.ulke__ad { font-size: 14px; color: var(--ink-2); }

.fiyat { font-size: var(--fs-md); font-weight: 700; }

.stok { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
.stok.is-az { color: var(--uyari); }

/* TESLİM ORANI — bizi rakiplerden ayıran sütun.
   Çubuk + sayı birlikte: çubuk tek bakışta, sayı kesin bilgi. */
.oran {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
}
.oran__cubuk {
  width: 62px; height: 5px;
  flex: none;
  border-radius: 3px;
  background: var(--cubuk-zemin);
  overflow: hidden;
}
.oran__dolu { display: block; height: 5px; border-radius: 3px; background: var(--ok); }
.oran__sayi { font-size: 14.5px; font-weight: 700; min-width: 42px; text-align: right; color: var(--ok); }

.oran.is-orta .oran__dolu, .oran.is-orta .oran__sayi { background: var(--uyari); color: var(--uyari); }
.oran.is-orta .oran__dolu { background: var(--uyari); }
.oran.is-kotu .oran__dolu { background: var(--hata); }
.oran.is-kotu .oran__sayi { color: var(--hata); }

/* Ölçülmemiş oran: çubuk hiç çizilmiyor. Boş çubuk "sıfır" gibi
   okunurdu; oysa ölçülmemiş ile kötü aynı şey değil. */
.oran.is-yok .oran__cubuk { display: none; }
.oran.is-yok .oran__sayi  { color: var(--ink-3); font-weight: 500; }

.borsa__eylem { display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------------------
   BORSA KARTLARI — mobil
   Masaüstündeki tablo burada satır satır karta dönüşüyor. Aynı beş
   veri; hiçbiri kırpılmıyor.
   --------------------------------------------------------------------- */
.borsa-kartlar { display: none; flex-direction: column; gap: 9px; }

.bk {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 14px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
}
.bk__ust { display: flex; align-items: center; gap: 11px; }
.bk__orta { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.bk__fiyat { font-size: 18px; font-weight: 700; white-space: nowrap; }
.bk__alt { display: flex; align-items: center; gap: var(--s-3); }
.bk__olcu { display: flex; align-items: center; gap: var(--s-2); flex-grow: 1; flex-wrap: wrap; }
.bk__al { flex: none; min-width: 78px; min-height: var(--dokunma); }

/* ---------------------------------------------------------------------
   BOŞ DURUM
   --------------------------------------------------------------------- */
.bos {
  padding: var(--s-12) var(--s-6);
  text-align: center;
  border: 1px dashed var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
}
.bos h2 { margin-bottom: var(--s-2); font-size: var(--fs-lg); }
.bos p  { color: var(--ink-3); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------
   UYARI ŞERİDİ
   --------------------------------------------------------------------- */
.serit {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--uyari);
  border-radius: var(--r-md);
  background: var(--uyari-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
}
.serit svg { flex: none; margin-top: 2px; color: var(--uyari); }

/* ---------------------------------------------------------------------
   SAYFALAMA
   --------------------------------------------------------------------- */
.sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.sayfalama__bilgi { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------------------------------------------------------------------
   DİPNOT
   --------------------------------------------------------------------- */
.dipnot {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------
   ALT BİLGİ
   --------------------------------------------------------------------- */
.alt {
  border-top: 1px solid var(--cizgi);
  background: var(--yuzey);
  padding: var(--s-8) 0;
  margin-top: var(--s-12);
}
.alt__ic {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.alt a { color: var(--ink-3); }
.alt a:hover { color: var(--ink); }

/* =====================================================================
   DAR EKRAN
   Tablo gizleniyor, kartlar açılıyor. Sekiz sütunu sıkıştırmak yerine
   satırı yeniden kuruyoruz — maketteki karar.
   ===================================================================== */
@media (max-width: 900px) {
  .borsa { display: none; }
  .borsa-kartlar { display: flex; }

  .ust__menu { display: none; }
  .arama { max-width: none; }

  /* Süzgeçler yatay kaydırılıyor: ekranın üstünü yemesinler. */
  .suzgec {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--s-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .suzgec::-webkit-scrollbar { display: none; }
  .suzgec > * { flex: none; }
  .arama { flex: 1 0 240px; }

  .sirala { order: 99; }
}

@media (max-width: 560px) {
  .basi h1 { font-size: var(--fs-xl); }
  .lede { font-size: var(--fs-sm); }
}

/* ---------------------------------------------------------------------
   FORM KUTUSU — giriş ve kayıt
   --------------------------------------------------------------------- */
.form-kutu {
  width: 100%;
  max-width: 420px;
  margin: var(--s-10) auto;
  padding: var(--s-8);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge);
}

.form { display: grid; gap: var(--s-4); margin-top: var(--s-6); }

.alan { display: grid; gap: 6px; }
.alan > span { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.alan small  { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.5; }

.girdi {
  width: 100%;
  min-height: var(--dokunma);
  padding: 10px 13px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
  color: var(--ink);
  outline: none;
}
.girdi:focus { border-color: var(--vurgu); }

.dugme--genis { width: 100%; min-height: 46px; }

.uyari-kutu {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hata);
  border-radius: var(--r-md);
  background: var(--hata-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------
   SİPARİŞ EKRANI
   --------------------------------------------------------------------- */
.siparis {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 560px;
  margin-top: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge);
}

.siparis__ust { display: flex; align-items: center; gap: var(--s-3); }

.rozet {
  padding: 5px 11px;
  border-radius: var(--r-tam);
  background: var(--uyari-soft);
  color: var(--uyari);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.rozet.is-ok { background: var(--ok-soft); color: var(--ok); }

/* İPTAL VE HATA KIRMIZI: ikisinde de beklenecek bir şey kalmadı.
   Varsayılan rozet turuncu ("bekleniyor") ve iptal edilmiş bir sipariş
   o renkte kalınca ekran, olmayan bir şeyi bekliyormuş gibi
   görünüyordu. */
.rozet.is-kotu { background: var(--hata-soft); color: var(--hata); }

/* Tamamlanmış sipariş nötr: olan olmuş, dikkat çekmesine gerek yok. */
.rozet.is-bitti { background: var(--yuzey-2); color: var(--ink-3); }

.kutu {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey-2);
}
.kutu--ok { background: var(--ok-soft); border-color: var(--ok-cizgi); }

.kutu__etiket {
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-3);
}
.kutu__etiket--ok { color: var(--ok); }

.kutu__satir { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }

.numara { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }

/* Kod ekranın en büyük öğesi: elinde telefonla başka bir uygulamaya
   kod girecek biri tek bakışta okusun. */
.kod { font-size: 42px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; }

.sayim { display: flex; align-items: baseline; gap: var(--s-3); }
.sayim__sure { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }

.cubuk { display: block; height: 6px; border-radius: 3px; background: var(--cubuk-zemin); overflow: hidden; }
.cubuk__dolu { display: block; height: 6px; border-radius: 3px; background: var(--uyari); }

.sms {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-4);
  margin-top: var(--s-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey-2);
}
.sms__basi { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-xs); }
.sms__metin { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }

.siparis__eylem { display: flex; gap: var(--s-3); }

.ozet-satir {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--cizgi-soft);
  font-size: var(--fs-sm);
}

/* İKİ SÜTUNLU SİPARİŞ DÜZENİ
   =====================================================================
   Önceden tek 560px sütun vardı ve geniş ekranda sağ taraf tamamen
   boştu. Sol sütun sabit kalıyor (kod okunacak yer; genişletmek
   rakamları savururdu), sağ sütun kalan yeri alıyor.

   900px altında tek sütuna düşüyor ve yan içerik ASIL İŞİN ALTINA
   geçiyor: dar ekranda numara ve kod her zaman önce gelmeli. */
.siparis-duzen {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(260px, 1fr);
  align-items: start;
  gap: var(--s-6);
}

.siparis-yan {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.yan-kutu {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--cizgi-soft);
  border-radius: var(--r-lg);
  background: var(--yuzey);
}

.yan-kutu__basi {
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Adımlar numaralı: sıra bilgisi burada anlamın parçası. */
.adimlar {
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-2);
}
.adimlar li + li { margin-top: 7px; }

/* Yan sütundaki tıklanabilir satır — diğer açık siparişler. */
.yan-satir {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--cizgi-soft);
  color: inherit;
  font-size: var(--fs-xs);
}
.yan-satir:first-of-type { border-top: 0; padding-top: 0; }
.yan-satir:hover { text-decoration: none; }
.yan-satir:hover strong { color: var(--vurgu); }

.servis__rozet--kucuk {
  width: 30px; height: 30px;
  font-size: var(--fs-2xs);
  flex: none;
}

/* Yan sütundaki kural kutuları alt alta — orada genişlik yok. */
.siparis-yan .kural + .kural { margin-top: var(--s-3); }
.siparis-yan .kural {
  border: 0;
  border-top: 1px solid var(--cizgi-soft);
  border-radius: 0;
  padding: var(--s-3) 0 0;
  background: none;
}
.siparis-yan .kural:first-of-type { border-top: 0; padding-top: 0; }

@media (max-width: 900px) {
  .siparis-duzen { grid-template-columns: minmax(0, 1fr); }
  .siparis-yan { max-width: 560px; }
}

.kural {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--s-4);
  border: 1px solid var(--cizgi-soft);
  border-radius: var(--r-lg);
  background: var(--yuzey);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.kural__sure { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }

@media (max-width: 560px) {
  .siparis { padding: var(--s-4); border-radius: var(--r-lg); }
  .kod { font-size: 36px; }
  .numara { font-size: 22px; }
  .kutu__satir .dugme { width: 100%; min-height: var(--dokunma); }
}

/* ---------------------------------------------------------------------
   HESAP EKRANI
   --------------------------------------------------------------------- */
.hesap-ust {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-8);
}

.kart {
  padding: var(--s-6);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
}

.bakiye-buyuk {
  margin-top: var(--s-3);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.yukleme + .yukleme { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--cizgi-soft); }
.yukleme__basi { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }

.paketler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: var(--s-2);
}

/* Paket bir düğme: her biri kendi tutarıyla formu gönderiyor.
   Ayrı bir "tutar seç + gönder" adımı, tek tıkla yapılabilecek
   şeyi ikiye bölerdi. */
.paket {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  padding: var(--s-3);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey-2);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
/* Shopier paketleri <button> değil <a>: ödemeyi biz başlatmıyoruz,
   müşteri doğrudan ürün sayfasına gidiyor. Bağlantı olarak da düğme
   gibi görünmesi için metin süsü ve rengi sıfırlanıyor. */
a.paket { text-decoration: none; color: inherit; }

.paket:hover { border-color: var(--vurgu); background: var(--vurgu-soft); }
.paket.is-hediyeli { border-color: var(--vurgu-cizgi); }
.paket__tutar  { font-size: var(--fs-lg); font-weight: 700; }
.paket__hediye { font-size: var(--fs-2xs); font-weight: 600; color: var(--ok); }

.bolum-basi { margin: var(--s-8) 0 var(--s-4); font-size: var(--fs-lg); }

.liste {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
  overflow: hidden;
}

.liste__satir {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--cizgi-soft);
  color: var(--ink);
}
.liste__satir:last-child { border-bottom: 0; }
a.liste__satir:hover { background: var(--yuzey-2); text-decoration: none; }

@media (max-width: 900px) {
  .hesap-ust { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   KURULUM KONSOLU
   Sitenin geri kalanına benzemiyor ve benzemesi de gerekmiyor:
   burası bir alet, bir ekran değil.
   --------------------------------------------------------------------- */
.konsol {
  max-height: 460px;
  margin: 0 0 var(--s-5);
  padding: var(--s-4) var(--s-5);
  overflow: auto;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  white-space: pre;
}

.durum-nokta {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
}
.durum-nokta.is-kotu { background: var(--hata); }
.durum-kotu { color: var(--hata); font-weight: 600; }

.gorevler { display: grid; gap: var(--s-2); }
.gorev {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: var(--s-4);
}
.gorev .dugme { width: 100%; }

@media (max-width: 640px) {
  .gorev { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------------------------------------------------------------------
   YARDIM
   Sorular sıklığa göre dizili; bir destek sayfasının işi en çok
   sorulanı en üste koymak.
   --------------------------------------------------------------------- */
.yardim { display: grid; gap: var(--s-3); max-width: 76ch; }

.sss {
  padding: var(--s-5);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
}
.sss__soru  { margin-bottom: var(--s-2); font-size: var(--fs-md); font-weight: 700; }
.sss__cevap { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ---------------------------------------------------------------------
   SÖZLEŞME ONAY KUTUSU  (.kabul)

   SINIF ADI `.onay` DEĞİL — ve bunun bir sebebi var.
   İlk yazımda `.onay` kullanmıştım; o ad borsa süzgecindeki stok
   kutusunda ZATEN kullanılıyordu ve bu blok dosyada daha sonra
   geldiği için onu eziyordu. Süzgeçteki kutu hap biçimini,
   kenarlığını ve yüksekliğini kaybetti — hiçbir hata vermeden,
   yalnızca bozuk görünerek.

   Ödeme düğmelerinin HEMEN ÜSTÜNDE: onayın neyi kapsadığı, tıklanacak
   şeyle aynı bakışta görünmeli. Kutu küçültülmüyor ve soluklaştırılmıyor
   — okunmasını istemediğimiz bir şey değil.
   --------------------------------------------------------------------- */
.kabul {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-3) 0;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.5;
  cursor: pointer;
}

.kabul input {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--vurgu);
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   HUKUKİ BELGE

   Uzun metin. Ölçü satır uzunluğu: 70 karakterden geniş bir sözleşme
   metni okunmuyor ve okunmayan sözleşme, olmayan sözleşmeye yakın.
   --------------------------------------------------------------------- */
.belge { max-width: 72ch; }

.belge h2 {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--fs-md);
  font-weight: 700;
}
.belge h2:first-child { margin-top: 0; }

.belge p,
.belge li {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.65;
}

.belge p  { margin-bottom: var(--s-3); }
.belge ul { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.belge li { margin-bottom: var(--s-2); }
.belge strong { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------
   KURULUM KONSOLU — KAYIT LİSTESİ

   Sunucuda terminal yok; bu liste günlüğü okumanın tek yolu. Bu
   yüzden okunabilirliği süslemeden önce geliyor: tek aralıklı yazı,
   seviyeye göre renk, uzun satırlarda kaydırma.
   --------------------------------------------------------------------- */
.konsol--kayit {
  display: grid;
  gap: 1px;
  max-height: 420px;
  overflow-y: auto;
  font-size: var(--fs-2xs);
}

.kayit {
  display: grid;
  grid-template-columns: 96px 52px 1fr;
  gap: var(--s-2);
  padding: 4px 6px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  line-height: 1.5;
}

.kayit__zaman  { color: var(--ink-3); }
.kayit__seviye { font-weight: 700; }
.kayit__mesaj  { word-break: break-word; }

.kayit--hata  { background: color-mix(in srgb, var(--hata) 12%, transparent); }
.kayit--hata  .kayit__seviye { color: var(--hata); }
.kayit--uyari { background: color-mix(in srgb, var(--uyari) 12%, transparent); }
.kayit--uyari .kayit__seviye { color: var(--uyari); }
.kayit--bilgi .kayit__seviye { color: var(--ink-3); }

@media (max-width: 560px) {
  .kayit { grid-template-columns: 1fr; gap: 0; }
  .kayit__zaman, .kayit__seviye { display: inline; margin-right: 6px; }
}

/* ---------------------------------------------------------------------
   BAYRAK VE SERVİS GÖRSELİ

   Bayrak bir emoji. Windows'ta bayrak yazı tipi yok ve orada iki harf
   ("GB") çıkıyor — bu yüzden kutu, harf çifti geldiğinde de düzgün
   dursun diye sabit ölçülü ve ortalanmış. Kaza gibi değil, rozet gibi
   görünüyor.
   --------------------------------------------------------------------- */
.bayrak {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  border-radius: var(--r-sm);
  font-size: 17px;
  line-height: 1;
  /* Emoji yazı tipleri önce: gövde yazı tipi bazı sistemlerde
     bayrağı kendi (boş) glifiyle çiziyor. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Harf rozeti — ISO ya da servis kısaltması */
.ulke__kod {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--yuzey-2);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .04em;
}

/* SERVİS ROZETİ — ton koddan geliyor (--h), doygunluk ve parlaklık
   sabit. Böylece hiçbir rozet diğerinden baskın değil ve iki temada
   da okunuyor. */
.servis__rozet {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: hsl(var(--h, 210) 62% 46%);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .02em;
}

.servis__logo {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--yuzey-2);
}

/* ---------------------------------------------------------------------
   ARANABİLİR SEÇİM KUTUSU

   Yerli <select> gizleniyor ama DOM'da kalıyor: değer onun üzerinde
   duruyor ve form onu gönderiyor.
   --------------------------------------------------------------------- */
.zsecim { position: relative; display: inline-block; min-width: 168px; }

.zsecim__gizli {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.zsecim__dugme {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
  color: var(--ink);
  font-size: var(--fs-xs);
  text-align: left;
  cursor: pointer;
}
.zsecim__dugme:hover { border-color: var(--ink-3); }
.zsecim.is-dolu .zsecim__dugme { border-color: var(--vurgu); }

.zsecim__metin {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zsecim__ok { flex: 0 0 auto; color: var(--ink-3); }

.zsecim__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  width: max(100%, 260px);
  padding: var(--s-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
  box-shadow: 0 12px 32px rgb(0 0 0 / .22);
}
.zsecim.is-yukari .zsecim__panel { top: auto; bottom: calc(100% + 4px); }

.zsecim__ara {
  width: 100%;
  padding: 7px 10px;
  margin-bottom: var(--s-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--zemin);
  color: var(--ink);
  font-size: var(--fs-xs);
}
.zsecim__ara:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: transparent; }

.zsecim__liste {
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.zsecim__oge {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.zsecim__oge:hover,
.zsecim__oge.is-imlec  { background: var(--yuzey-2); }
.zsecim__oge.is-secili { color: var(--vurgu); font-weight: 600; }

.zsecim__logo { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }

.zsecim__bos {
  padding: 10px 8px;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}

/* Mobilde panel tam genişlik: 260px sabit bir kutu dar ekranda
   taşıyor ve sağ kenarı kesiliyor. */
@media (max-width: 560px) {
  .zsecim        { min-width: 0; flex: 1 1 46%; }
  .zsecim__panel { width: min(92vw, 340px); }
}

/* Dosyadan gelen bayrak. Emoji sürümüyle aynı kutuya oturuyor ki
   ikisi arasında geçiş yapıldığında satır kaymasın. */
.bayrak--img {
  width: 26px;
  height: 20px;
  border-radius: var(--r-sm);
  object-fit: cover;
  /* İnce çerçeve: beyaz ağırlıklı bayraklar (Japonya, Polonya) açık
     temada zeminle birleşiyordu. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12);
}
.zsecim__oge .bayrak--img { width: 22px; height: 17px; }

/* ---------------------------------------------------------------------
   HIZLI KISAYOLLAR

   Süzgecin üstünde, en çok istenen servislere tek tıkla gitmek için.
   Yatay kaydırılabilir: dar ekranda sekiz öğeyi alt alta yığmak
   listeyi ekranın dışına itiyordu.
   --------------------------------------------------------------------- */
.hizli {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hizli::-webkit-scrollbar { display: none; }

.hizli__etiket {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hizli__oge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--yuzey);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hizli__oge:hover { border-color: var(--ink-3); text-decoration: none; }

.hizli__oge.is-aktif {
  border-color: var(--vurgu);
  background: color-mix(in srgb, var(--vurgu) 12%, transparent);
  color: var(--vurgu);
}

/* Kısayoldaki rozet/logo satırdakinden küçük: burada isim asıl,
   görsel yalnızca tanıma ipucu. */
.hizli__oge .servis__rozet,
.hizli__oge .servis__logo { width: 21px; height: 21px; border-radius: 6px; font-size: 9px; }

/* ---------------------------------------------------------------------
   DESTEK YAZIŞMASI

   Sohbet düzeni: üyenin mesajı sağda ve vurgulu, yöneticininki solda.
   Kim yazdığı tek bakışta belli olmalı — destek yazışmasında en sık
   sorulan soru bu.
   --------------------------------------------------------------------- */
.yazisma { display: grid; gap: var(--s-3); }

.mesaj {
  max-width: 82%;
  padding: 10px 13px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
}

.mesaj--uye {
  margin-left: auto;
  border-color: color-mix(in srgb, var(--vurgu) 35%, transparent);
  background: color-mix(in srgb, var(--vurgu) 8%, transparent);
}

.mesaj__basi {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 4px;
  font-size: var(--fs-2xs);
}
.mesaj__basi strong { font-size: var(--fs-xs); }

.mesaj__govde {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
  /* Uzun ve boşluksuz bir dize (bir kimlik, bir bağlantı) kutuyu
     taşırıyordu; kırılmasına izin veriyoruz. */
  overflow-wrap: anywhere;
}

@media (max-width: 560px) { .mesaj { max-width: 92%; } }

/* ---------------------------------------------------------------------
   ONAY KUTUSU — kendi işareti

   Yerli kutu görsel olarak gizli ama DOM'da ve odaklanabilir: ekran
   okuyucu ve klavye için gerekli. Görünen şey aşağıdaki kare.

   `:has()` ile ANINDA tepki veriyor. Önceden durum yalnızca sunucudan
   gelen `is-acik` ile belliydi, yani tıklandığında form gönderilene
   kadar hiçbir şey değişmiyordu.
   --------------------------------------------------------------------- */
.onay input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.onay__isaret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border: 1.5px solid var(--cizgi);
  border-radius: 5px;
  background: var(--zemin);
  color: transparent;
}

.onay:has(input:checked),
.onay.is-acik {
  border-color: var(--vurgu-cizgi);
  background: var(--vurgu-soft);
  color: var(--ink);
}

.onay:has(input:checked) .onay__isaret,
.onay.is-acik .onay__isaret {
  border-color: var(--vurgu);
  background: var(--vurgu);
  color: #fff;
}

/* Klavyeyle gezen biri kutunun nerede olduğunu görmeli — girdi gizli
   olduğu için odak halkasını işaretin üstünde gösteriyoruz. */
.onay:has(input:focus-visible) .onay__isaret {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   CANLI SÜZGEÇ — yükleniyor durumu

   Liste silinmiyor, soluklaşıyor: boş bir alan "sonuç yok" gibi
   görünüyor ve her tuşta ekranın zıplamasına yol açıyordu.
   --------------------------------------------------------------------- */
#sonuclar { transition: opacity .12s ease; }
#sonuclar.is-yukleniyor { opacity: .45; pointer-events: none; }

.suzgec.is-yukleniyor .arama { position: relative; }

.suzgec.is-yukleniyor .arama::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  border: 2px solid var(--cizgi);
  border-top-color: var(--vurgu);
  border-radius: 50%;
  animation: donuyor .7s linear infinite;
}

@keyframes donuyor { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .suzgec.is-yukleniyor .arama::after { animation-duration: 2s; }
  #sonuclar { transition: none; }
}

/* ---------------------------------------------------------------------
   SATIN ALMA DİYALOĞU (SweetAlert2)
   ---------------------------------------------------------------------
   Kütüphane kendi renklerini getiriyor ve olduğu gibi bırakılınca
   diyalog sitenin dışından gelmiş gibi duruyor — koyu temada ise beyaz
   bir kutu olarak patlıyordu. Burada yalnızca renk ve kenar
   değişkenlerini kendi belirteçlerimize bağlıyoruz; yerleşimine ve
   davranışına dokunmuyoruz.

   Düğmeler `buttonsStyling: false` ile sitenin `.dugme` sınıfını
   kullanıyor (bkz. al.js): iki ayrı düğme görünümü taşımanın anlamı
   yok, biri değişince diğeri geride kalırdı.
   --------------------------------------------------------------------- */
.swal-iyi {
  background: var(--yuzey);
  color: var(--ink);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
}

.swal-iyi .swal2-title { color: var(--ink); font-size: var(--fs-lg); }
.swal-iyi .swal2-html-container { color: var(--ink-2); }

/* Onay ekranındaki ürün adı — diyalogda okunan ilk şey bu olmalı. */
.swal-ad {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
}

/* Tutar satırları: etiket solda, rakam sağda. Rakamları alt alta
   hizalamak "yeter mi" sorusunu bakışta cevaplatıyor. */
.swal-satir {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: 6px 0;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--cizgi);
}
.swal-satir strong { font-variant-numeric: tabular-nums; color: var(--ink); }

/* İşlem sonrası kalan bakiye — sonuç satırı, üsttekilerden ayrılıyor. */
.swal-satir--sonuc { border-top-width: 2px; font-weight: 600; }

.swal-iyi .swal2-actions { gap: var(--s-2); }

/* SweetAlert2 tost — sağ üstte, kendiliğinden kapanan kısa bildirim.
   Başarı için diyalog kullanmıyoruz: kullanıcı zaten istediğini elde
   etti, önüne kapatılacak bir kutu koymanın anlamı yok. */
.swal-tost { padding: 10px 14px; }
.swal-tost .swal2-title { font-size: var(--fs-sm); font-weight: 600; margin: 0; }

/* ---------------------------------------------------------------------
   KOD BLOĞU — API belgesi
   ---------------------------------------------------------------------
   Adı `.kod-blok`, `.kod` DEĞİL: `.kod` zaten sipariş ekranındaki 42px
   doğrulama kodunu çiziyor. Bu projede aynı sınıf adını iki anlamda
   kullanmanın bedeli bir kez ödendi (`.onay` süzgeç hapını ezmişti).

   Yatay kaydırma kendi kabında: uzun curl satırları sayfanın tamamını
   kaydırılabilir yapmamalı.
   --------------------------------------------------------------------- */
.kod-blok {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey-2);
  overflow-x: auto;
  font-family: var(--font-num, monospace);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-2);
}
.kod-blok code { white-space: pre; }

/* ---------------------------------------------------------------------
   TEKRAR AL — son alınan servisler
   ---------------------------------------------------------------------
   `.hizli` şeridinden ayrı bir bileşen: o, herkese aynı popüler
   servisleri gösteren tek satırlık bir kaydırma şeridi. Bu ise
   KİŞİYE ÖZEL ve içinde fiyat ile bir satın alma düğmesi taşıyor —
   aynı sınıfa sıkıştırmak, iki farklı işi tek kurala bağlamak olurdu.

   Izgara: dar ekranda tek sütun, geniş ekranda yan yana. Yatay
   kaydırma YOK; satın alma düğmesi kaydırma içinde kalırsa dokunmatik
   cihazda yanlışlıkla basılıyor.
   --------------------------------------------------------------------- */
.tekrar { margin-bottom: var(--s-4); }

.tekrar__etiket {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tekrar__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-2);
}

.tekrar__oge {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border: 1px solid var(--vurgu-cizgi);
  border-radius: var(--r-lg);
  background: var(--vurgu-soft);
}

.tekrar__ad {
  font-weight: 600;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tekrar__fiyat { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }