/* MAREVIQ Panel bicemi (tasarim 6.1, 10. is "Arayuz kabugu").
   Tokenlar mareviqcoffee.com sitesinden gelir (altin #d4af37, koyu
   zemin, Fraunces baslik + Inter govde).

   TEMA: acik ve koyu tema vardir, VARSAYILAN SISTEM AYARIDIR
   (prefers-color-scheme). Tema degistirici yoktur; telefonun kendi
   ayari neyse panel de odur.

   MOBIL ONCELIKLI: once dar ekran yazilir, genis ekran @media ile
   eklenir. 390px genisliginde YATAY KAYMA OLMAMALIDIR; genis olabilen
   tek oge tablodur ve o kendi kabinda kayar.

   CSP (tasarim 8.5): satir ici script ve style YOKTUR; her sey burada.
   Fontlar depoda durur, CDN kullanilmaz. */

/* ------------------------------------------------------------ fontlar */
/* Turkce icin latin + latin-ext birlikte gerekir: g-brevi (U+011F),
   s-cedilla (U+015F) ve buyuk I-nokta (U+0130) latin-ext icindedir. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../font/fraunces-latin.069cb90e11a3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../font/fraunces-latin-ext.a04d353989ad.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../font/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../font/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------ tokenlar */
:root {
  --y0: #101010;
  --y1: #161616;
  --y2: #1e1e1e;
  --y3: #f6f4f1;
  --altin: #d4af37;
  --kirmizi: #c8553d;
  --yesil: #4f8a5b;
  --mavi: #3f6f9c;

  --zemin: var(--y3);
  --metin: var(--y0);
  --kart: #ffffff;
  --soluk: #5b5b5b;
  --kenar: rgba(16, 16, 16, 0.16);
  --alan-zemin: #ffffff;
  --vurgu-zemin: rgba(212, 175, 55, 0.12);
  --serit: rgba(16, 16, 16, 0.04);

  --baslik-font: "Fraunces", Georgia, serif;
  --govde-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --yuvarlak: 10px;
  --alt-yukseklik: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: var(--y0);
    --metin: var(--y3);
    --kart: var(--y1);
    --soluk: #a3a3a3;
    --kenar: rgba(246, 244, 241, 0.16);
    --alan-zemin: var(--y2);
    --vurgu-zemin: rgba(212, 175, 55, 0.14);
    --serit: rgba(246, 244, 241, 0.04);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--govde-font);
  font-size: 16px;
  line-height: 1.6;
  /* 390px'te yatay kayma olmasin: tasan tek oge tablodur, o da kendi
     kabinda kayar (.tablo). */
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--baslik-font);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.12rem; margin: 26px 0 10px; }
h3 { font-size: 1rem; margin: 18px 0 8px; }

a { color: var(--altin); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

/* Klavyeyle gezinenler icin ilk baglanti: icerige atla. */
.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--altin);
  color: var(--y0);
  z-index: 60;
}
.atla:focus { left: 0; }

/* --------------------------------------------------------- dar kabuk */
/* Giris, parola degisimi, iki adimli dogrulama ve hata sayfalari. */
.dar-govde {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.kart {
  width: 100%;
  max-width: 30rem;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: 14px;
  padding: 32px 24px;
}

.marka {
  margin: 0 0 16px;
  letter-spacing: 0.32em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--altin);
}

.dip {
  margin: 20px 0 0;
  font-size: 0.78rem;
  color: var(--soluk);
}

/* ------------------------------------------------------- panel kabugu */
.ust {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--kart);
  border-bottom: 1px solid var(--kenar);
}

.ust-marka {
  font-family: var(--baslik-font);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--metin);
  text-decoration: none;
  white-space: nowrap;
}
.ust-marka-ek { color: var(--soluk); font-weight: 400; }
/* Y7c (A2): ust cubuktaki dokunma hedefleri en az 44 px (360 px olcumu:
   marka baglantisi 26 px, Cikis 41 px genislikti). */
.ust-marka { display: inline-flex; align-items: center; min-height: 44px; }

.ust-sag {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ust-kisi {
  font-size: 0.86rem;
  color: var(--soluk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ust-cikis { font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.ust-cikis:hover { text-decoration: underline; }
/* O5 (Y7b): cikis POST formudur; dugme baglanti gibi gorunur. */
.ust-cikis-form { display: inline-flex; margin: 0; }
button.ust-cikis, .bag-dugme {
  background: none; border: 0; padding: 0 4px; margin: 0; color: inherit; font: inherit;
  cursor: pointer; min-height: 44px; text-decoration: underline;
}
button.ust-cikis { text-decoration: none; font-size: 0.9rem; min-width: 44px; }

.kabuk { display: flex; align-items: flex-start; }

/* Sol menu yalnizca genis ekranda (asagida @media ile acilir). */
.yan-menu { display: none; }

.govde {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 62rem;
  margin: 0 auto;
  padding: 20px 16px calc(var(--alt-yukseklik) + 28px);
}

.sayfa-basi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
}
.sayfa-eylem { display: flex; flex-wrap: wrap; gap: 8px; }

/* ----------------------------------------------------- alt gezinme */
.alt-gezinme {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  background: var(--kart);
  border-top: 1px solid var(--kenar);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.alt-bag {
  flex: 1 1 0;
  min-width: 0;
  /* Dokunma hedefi en az 44px (tasarim 6.3). */
  min-height: var(--alt-yukseklik);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  color: var(--soluk);
  text-decoration: none;
  font-size: 0.76rem;
  text-align: center;
  border-top: 2px solid transparent;
}
.alt-bag .alt-ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alt-bag.etkin {
  color: var(--metin);
  border-top-color: var(--altin);
  background: var(--vurgu-zemin);
  font-weight: 600;
}

/* ------------------------------------------------------------ formlar */
.alan { margin: 0 0 16px; min-width: 0; }

.alan label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.alan input[type="text"],
.alan input[type="email"],
.alan input[type="password"],
.alan input[type="number"],
.alan input[type="date"],
.alan input[type="month"],
.alan input[type="tel"],
.alan input[type="url"],
.alan input[type="file"],
.alan select,
.alan textarea,
.arama-kutu {
  width: 100%;
  max-width: 100%;
  padding: 12px;
  font: inherit;
  color: var(--metin);
  background: var(--alan-zemin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
}

.alan textarea { min-height: 96px; resize: vertical; }

.alan input:focus-visible,
.alan select:focus-visible,
.alan textarea:focus-visible,
.arama-kutu:focus-visible,
.dugme:focus-visible,
.cip:focus-visible,
.sekme:focus-visible,
a:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 2px;
}

.alan-hatali input,
.alan-hatali select,
.alan-hatali textarea { border-color: var(--kirmizi); }

.alan-hata {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--kirmizi);
}

.yardim {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--soluk);
}

/* Iki sutunlu alan izgarasi; dar ekranda kendiliginden tek sutuna duser. */
.alan-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 18px;
}

.onay {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
}
.onay label { font-size: 0.9rem; font-weight: 500; }

.form-dip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 22px;
}

/* Dokunma hedefi en az 44px (tasarim 6.3, erisilebilirlik). */
.dugme {
  display: inline-block;
  min-height: 44px;
  padding: 11px 20px;
  font: inherit;
  font-weight: 600;
  color: var(--y0);
  background: var(--altin);
  border: 1px solid var(--altin);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.dugme:hover { filter: brightness(1.08); }
.dugme[disabled] { opacity: 0.55; cursor: progress; }

.dugme-ikincil {
  color: var(--metin);
  background: transparent;
  border-color: var(--kenar);
}

.dugme-tehlike { color: #fff; background: var(--kirmizi); border-color: var(--kirmizi); }

.dugme-kucuk {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* --------------------------------------------------------- bildirimler */
.bildirimler { list-style: none; margin: 0 0 18px; padding: 0; }

.bildirim {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  border-left: 4px solid var(--soluk);
  background: rgba(128, 128, 128, 0.12);
  font-size: 0.92rem;
}

.bildirim-success { border-left-color: var(--yesil); }
.bildirim-warning { border-left-color: var(--altin); }
.bildirim-error { border-left-color: var(--kirmizi); }
.bildirim-info { border-left-color: var(--mavi); }

/* htmx bildirim seridi: ekranin altinda, alt gezinmenin uzerinde. */
.bildirim-serit {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--alt-yukseklik) + 12px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.bildirim-serit .bildirim {
  margin: 0;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-left-width: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: opacity 0.35s ease;
}
.bildirim-soluyor { opacity: 0; }

.hata-kutusu {
  margin: 0 0 18px;
  padding: 12px 14px 12px 32px;
  border-radius: 8px;
  border-left: 4px solid var(--kirmizi);
  background: rgba(200, 85, 61, 0.12);
  color: var(--metin);
  font-size: 0.92rem;
}

.uyari {
  padding: 12px 14px;
  margin: 0 0 18px;
  border-radius: 8px;
  border-left: 4px solid var(--altin);
  background: rgba(212, 175, 55, 0.12);
  font-size: 0.92rem;
}

/* ------------------------------------------------------------ icerik */
.aciklama { color: var(--soluk); }
.ipucu { margin: 16px 0 0; font-size: 0.85rem; color: var(--soluk); }
.adimlar { margin: 0 0 18px; padding-left: 20px; color: var(--soluk); font-size: 0.92rem; }

.qr {
  display: block;
  margin: 0 auto 18px;
  width: 220px;
  height: 220px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px;
}

.anahtar {
  margin: 0 0 18px;
  padding: 10px 12px;
  background: rgba(128, 128, 128, 0.12);
  border-radius: 8px;
  text-align: center;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

.ayrinti { margin: 0 0 20px; font-size: 0.85rem; color: var(--soluk); }

.kod-listesi {
  list-style: none;
  margin: 0 0 22px;
  padding: 16px;
  background: rgba(128, 128, 128, 0.12);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  text-align: center;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

.ozet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0 0 22px;
  font-size: 0.95rem;
}
.ozet dt { color: var(--soluk); }
.ozet dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Tablolar dar ekranda kendi kabinda yatay kayar; sayfa kaymaz. */
.tablo {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

.tablo th, .tablo td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--kenar);
  vertical-align: top;
}
.tablo th { color: var(--soluk); font-weight: 600; white-space: nowrap; }
.tablo tbody tr:hover { background: var(--serit); }
.tablo .sag { text-align: right; }

/* --------------------------------------------------- kart listesi (mobil) */
.kayit-liste { display: grid; gap: 10px; margin: 0 0 20px; }

.kayit-kart {
  display: block;
  padding: 14px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.kayit-kart:hover { border-color: var(--altin); }

.kayit-ad {
  font-weight: 600;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.kayit-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.84rem;
  color: var(--soluk);
}
.kayit-arsiv { opacity: 0.6; }

/* ------------------------------------------------------------- rozetler */
.rozet {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--altin);
  color: var(--y0);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.rozet-sessiz { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); }
.rozet-aday { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); }
.rozet-iletisimde { background: var(--mavi); color: #fff; }
.rozet-teklif_geldi { background: var(--altin); color: var(--y0); }
.rozet-anlasildi { background: var(--yesil); color: #fff; }
.rozet-elendi { background: var(--kirmizi); color: #fff; }
.rozet-pasif { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); }

/* ----------------------------------------------------- cipler ve filtre */
.cip-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--kenar);
  background: var(--kart);
  color: var(--metin);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}
/* Y7b/C: satis rolleri telefonda calisir; cipler ve kucuk dugmeler 44 px. */
.satis-govde .cip,
.satis-govde .dugme-kucuk { min-height: 44px; }

.cip.etkin {
  border-color: var(--altin);
  background: var(--vurgu-zemin);
  font-weight: 600;
}
.cip-sayi { color: var(--soluk); font-size: 0.8rem; }

.filtre-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin: 0 0 14px;
}
.filtre-satir .alan { margin: 0; flex: 1 1 180px; }

.arama-sarmal { position: relative; margin: 0 0 14px; }

/* htmx gostergesi: yalnizca istek surerken gorunur. */
.yukleniyor { display: none; font-size: 0.82rem; color: var(--soluk); }
.htmx-request .yukleniyor { display: inline; }
.htmx-request.yukleniyor { display: inline; }

/* ------------------------------------------------------------- sekmeler */
.sekme-serit {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--kenar);
  overflow-x: auto;
  /* Sekme seridi kendi icinde kayar; sayfa kaymaz. */
  scrollbar-width: thin;
}

.sekme {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: var(--soluk);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-size: 0.92rem;
}
.sekme.etkin {
  color: var(--metin);
  border-bottom-color: var(--altin);
  font-weight: 600;
}
.sekme-sayi {
  font-size: 0.75rem;
  color: var(--soluk);
  background: var(--serit);
  border-radius: 999px;
  padding: 0 6px;
}

/* ----------------------------------------------------------- bos durum */
.bos-durum {
  padding: 28px 18px;
  text-align: center;
  border: 1px dashed var(--kenar);
  border-radius: var(--yuvarlak);
  background: var(--kart);
  margin: 0 0 20px;
}
.bos-baslik { margin: 0 0 6px; font-weight: 600; }
.bos-aciklama { margin: 0 0 14px; color: var(--soluk); font-size: 0.9rem; }

/* ------------------------------------------------------- gecmis akisi */
.gecmis-akis { display: grid; gap: 10px; margin: 0 0 20px; }

.gecmis-satir {
  padding: 12px 14px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  border-left: 3px solid var(--kenar);
}
.gecmis-E { border-left-color: var(--yesil); }
.gecmis-G { border-left-color: var(--altin); }
.gecmis-S { border-left-color: var(--kirmizi); }

.gecmis-basi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  font-size: 0.86rem;
  color: var(--soluk);
  margin-bottom: 6px;
}
.gecmis-kisi { color: var(--metin); font-weight: 600; }

.gecmis-alanlar { display: grid; gap: 4px; margin: 0; font-size: 0.9rem; }
.gecmis-alan {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.gecmis-ad { color: var(--soluk); }
.gecmis-eski { text-decoration: line-through; opacity: 0.75; overflow-wrap: anywhere; }
.gecmis-yeni { font-weight: 600; overflow-wrap: anywhere; }
.gecmis-gizli { color: var(--soluk); font-style: italic; }

/* ------------------------------------------------------------ belgeler */
.belge-liste { display: grid; gap: 10px; margin: 0 0 20px; }
.belge-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
}
.belge-ad { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.belge-bilgi { font-size: 0.82rem; color: var(--soluk); }

/* --------------------------------------------------- hizli iletisim */
.hizli-serit { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

/* ============================================== Bugün, gorevler, talepler */
/* 16, 18 ve 19. isler. Renk TEK BASINA anlam tasimaz: her durumun ayrica
   metin rozeti vardir (erisilebilirlik, tasarim 6.3). */

/* Teklif talebi durumlari */
.rozet-taslak { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); }
.rozet-gonderildi { background: var(--mavi); color: #fff; }
.rozet-yanit_bekleniyor { background: var(--mavi); color: #fff; }
.rozet-iptal { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); }

/* Gorev durumlari */
.rozet-acik { background: var(--mavi); color: #fff; }
.rozet-tamamlandi { background: var(--yesil); color: #fff; }

/* Geciken is: kirmizi rozet + "gecikti" METNI birlikte. */
.rozet-geciken { background: var(--kirmizi); color: #fff; }

/* Oncelik: kucuk sayi = acil. */
.rozet-oncelik-1 { background: var(--kirmizi); color: #fff; }
.rozet-oncelik-2 { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); }
.rozet-oncelik-3 { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); }

/* Bugün ekrani grup basliklari */
.bugun-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--kenar);
}
.bugun-baslik.bugun-geciken { border-bottom-color: var(--kirmizi); }
.bugun-baslik.bugun-bugun { border-bottom-color: var(--altin); }

/* Geciken satir sol kenarindan isaretlenir. */
.bugun-satir { border-left: 3px solid transparent; }
.kayit-kart.bugun-geciken { border-left: 3px solid var(--kirmizi); }
.bugun-satir .hizli-serit { margin: 10px 0 0; }
.bugun-satir form { display: inline; }

/* Yonetici sistem karti */
.sistem-kart {
  padding: 14px 16px;
  margin: 0 0 22px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
}
.sistem-kart h2 { margin: 0 0 10px; font-size: 1rem; }
.sistem-kart .ozet { margin: 0; font-size: 0.9rem; }
.sistem-kart .ipucu { margin: 10px 0 0; }

/* Teklif talebinde urun secimi: onay kutusu + kg, telefonda tek sutun. */
.urun-secim { display: grid; gap: 8px; margin: 0 0 20px; }
.urun-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 12px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
}
.urun-satir .onay { margin: 0; flex: 1 1 200px; }
.urun-satir .alan { margin: 0; display: flex; align-items: center; gap: 8px; }
.urun-satir .alan label { margin: 0; color: var(--soluk); font-weight: 400; }
.urun-satir .alan input { width: 7rem; }

/* ===================================================== fiyat girisi (20) */
/* Kaynak ayrimi RENKTEN BAGIMSIZDIR (tasarim 6.3): kenarlik turu ve
   rozet METNI de degisir, boylece renk gormeyen de ayirt eder.

   Iki ad kumesi ayni bicemi paylasir:
     kaynak-teklif / kaynak-portal / kaynak-site   karsilastirma matrisi
     kaynak-resmi_teklif / ...                     fiyat formu ve ayrinti
   Matris sinif adlari tasarim 13.3'teki HTML testinin bekledigi
   adlardir ve DEGISTIRILEMEZ. */
.kaynak-teklif,
.kaynak-resmi_teklif {
  background: var(--y2);
  color: var(--y3);
  border: 1px solid var(--kenar);
  font-weight: 700;
}
.kaynak-portal,
.kaynak-isletme_portali {
  background: transparent;
  color: var(--metin);
  border: 1px solid var(--kenar);
  font-weight: 400;
}
.kaynak-site,
.kaynak-site_perakende {
  background: transparent;
  color: var(--soluk);
  border: 1px dashed var(--kenar);
  font-style: italic;
}

.kaynak-secim .cip { min-height: 44px; padding: 10px 16px; font-weight: 600; }

.fiyat-satir {
  padding: 14px 16px;
  margin: 0 0 16px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
}
.fiyat-satir h3 { margin: 0 0 12px; color: var(--soluk); font-size: 0.9rem; }

.onizleme-sarmal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
}
.fiyat-onizleme {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--vurgu-zemin);
  font-size: 0.92rem;
}
.onizleme-deger { font-weight: 700; }
.onizleme-etiket { color: var(--soluk); font-size: 0.85rem; }

/* Fiyat gecmisinde bakilan satir vurgulanir. */
.tablo .satir-etkin { background: var(--vurgu-zemin); }

/* Hizli takip secenekleri: gercek gonderme dugmeleri (CSP, satir ici
   betik yok). Fieldset gorsel olarak sade tutulur. */
.hizli-takip {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
}
.hizli-takip legend { padding: 0 6px; font-size: 0.85rem; color: var(--soluk); }
.hizli-takip .hizli-serit { margin: 8px 0 0; }

/* ============================ karsilastirma matrisi (22, 23, 24) ======== */
/* Ekran ekran gorunur: dar ekranda KARTLAR, genis ekranda CIZELGE.
   "gorunum=tablo" anahtari telefonda da cizelgeyi acar (tasarim 6.3). */
.matris-sarmal { margin: 0 0 24px; }

.matris-cizelge-kap { display: none; }
.matris-kartlar { display: block; }

.matris-sarmal.matris-gorunum-tablo .matris-cizelge-kap {
  display: block;
  overflow: auto;
  max-height: 78vh;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
}
.matris-sarmal.matris-gorunum-tablo .matris-kartlar { display: none; }

/* Lejant her zaman gorunur (tasarim 6.3). */
.lejant {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--soluk);
}
.lejant-teklif { background: var(--y2); color: var(--y3); }
.lejant-portal { background: transparent; color: var(--metin); border: 1px solid var(--kenar); }
.lejant-site { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); font-style: italic; }
.lejant-en-iyi { background: var(--altin); color: var(--y0); }
.lejant-suresi-gecti { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); text-decoration: line-through; }
.lejant-ozet { margin-left: auto; }

/* Ekran okuyucuya baslik, gozle gorunmez. */
.gizli-baslik {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.matris-cizelge { border-collapse: separate; border-spacing: 0; width: 100%; }
.matris-cizelge th,
.matris-cizelge td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--kenar);
  border-right: 1px solid var(--kenar);
  vertical-align: top;
  text-align: left;
  min-width: 11rem;
}

/* Yapiskan baslik satiri ve ilk sutun (tasarim 6.3). */
.matris-cizelge thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--kart);
  font-size: 0.85rem;
}
.matris-cizelge .yapiskan-sutun,
.matris-cizelge .yapiskan-kose {
  position: sticky;
  left: 0;
  background: var(--kart);
  font-weight: 600;
  min-width: 12rem;
}
.matris-cizelge .yapiskan-kose { z-index: 3; }
.matris-cizelge .yapiskan-sutun { z-index: 1; }

.matris-hucre { font-size: 0.9rem; }
.matris-hucre.bos { color: var(--soluk); }
.hucre-ana { display: block; font-size: 1.02rem; font-weight: 700; }
.hucre-rozetler { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.hucre-alt { display: block; font-size: 0.8rem; color: var(--soluk); margin-top: 2px; }
.hucre-dip { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--soluk); }
.fark { color: var(--soluk); font-size: 0.85rem; }

/* "Ayrinti" dugmesi hucre icinde sade durur ama 44px dokunma hedefi
   korunur (erisilebilirlik). */
.hucre-dugme {
  margin-top: 6px;
  min-height: 44px;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.78rem;
  color: var(--soluk);
  background: transparent;
  border: 1px solid var(--kenar);
  border-radius: 6px;
  cursor: pointer;
}
.hucre-dugme:hover { color: var(--metin); border-color: var(--altin); }

/* EN IYI: altin 2px cerceve + "En iyi" METIN rozeti (renk tek basina
   anlam tasimaz). Altin zemin uzerinde metin --y0'dir; kontrast
   yuksektir. */
.matris-hucre.en-iyi,
.fiyat-kart.en-iyi {
  border: 2px solid var(--altin);
  background: var(--vurgu-zemin);
}
.rozet-en-iyi { background: var(--altin); color: var(--y0); }

/* KDV durumu tedarikciden TEYIT EDILMEMIS fiyat (Y5 denetimi).
   Matriste baska mavi rozet yoktur: kaynak rozetleri koyu/seffaf/kesik,
   "En iyi" altindir. Bu yuzden dolu mavi tek basina ayirt edilir.
   Yine de RENGE GUVENILMEZ: rozetin metni de "KDV doğrulanmadı" yazar
   (tasarim 6.3, renkten bagimsiz ayrim). Beyaz uzerine mavi her iki
   temada da yuksek kontrastlidir. */
.rozet-kdv-supheli,
.lejant-kdv-supheli {
  background: var(--mavi);
  color: #fff;
  font-weight: 700;
}

/* Site daha dusuk: ince altin KESIK cizgi; en iyi SAYILMAZ. */
.matris-hucre.site-daha-dusuk,
.fiyat-kart.site-daha-dusuk { border: 1px dashed var(--altin); }

/* Suresi gecmis: soluk ve desenli zemin. */
.matris-hucre.suresi-gecti,
.fiyat-kart.suresi-gecti {
  opacity: 0.65;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 6px,
    rgba(128, 128, 128, 0.14) 6px, rgba(128, 128, 128, 0.14) 12px
  );
}

/* Mobil kartlar */
.urun-cipleri { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.urun-cipleri .cip { flex: 0 0 auto; }
.fiyat-kart { margin: 0 0 10px; }
.kart-fiyat { margin: 6px 0; font-size: 1.25rem; font-weight: 700; }

/* Hucre cekmecesi */
.hucre-cekmecesi:empty { display: none; }
.cekmece {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--kart);
  border: 1px solid var(--altin);
  border-radius: var(--yuvarlak);
}
.cekmece h3 { margin: 0 0 10px; }

.sutun-secici { margin: 0 0 14px; }
.sutun-secici summary { cursor: pointer; padding: 8px 0; font-size: 0.9rem; }
.sutun-secici .cip { cursor: pointer; }
.sutun-secici .cip input { margin-right: 6px; }

@media (min-width: 601px) {
  .matris-cizelge-kap {
    display: block;
    overflow: auto;
    max-height: 78vh;
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
  }
  .matris-kartlar { display: none; }
}

/* ================================================================== */
/* Genis ekran: sol menu acilir, alt gezinme gizlenir.                */
/* ================================================================== */
@media (min-width: 900px) {
  .yan-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 57px;
    flex: 0 0 210px;
    padding: 20px 10px;
    border-right: 1px solid var(--kenar);
    min-height: calc(100vh - 57px);
  }

  .yan-bag {
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--soluk);
    text-decoration: none;
    font-size: 0.94rem;
  }
  .yan-bag:hover { background: var(--serit); color: var(--metin); }
  .yan-bag.etkin {
    background: var(--vurgu-zemin);
    color: var(--metin);
    font-weight: 600;
  }

  .yan-ayrac {
    height: 1px;
    background: var(--kenar);
    margin: 10px 8px;
  }

  .alt-gezinme { display: none; }

  .govde { padding: 26px 24px 60px; }

  .bildirim-serit {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 26rem;
    max-width: calc(100vw - 40px);
  }

  h1 { font-size: 1.6rem; }
}

/* Cok dar telefonlar (360px ve alti). */
@media (max-width: 420px) {
  .kart { padding: 24px 18px; }
  .kod-listesi { grid-template-columns: 1fr; }
  .ust-kisi { display: none; }
  .alt-bag { font-size: 0.72rem; }
}

/* Hareket azaltma tercihi. */
@media (prefers-reduced-motion: reduce) {
  .bildirim-serit .bildirim { transition: none; }
}

/* ======================================================= satis agi (Y6) */
/* Agac kademesi girinti ile gosterilir; telefonda girinti kucuk kalir ki
   kart dar ekrana sigsin. */
.ag-kademe-1 { margin-left: 12px; border-left: 3px solid var(--kenar); }
.ag-kademe-2 { margin-left: 24px; border-left: 3px solid var(--kenar); }
.ag-kademe-3, .ag-kademe-4, .ag-kademe-5 { margin-left: 32px; border-left: 3px dashed var(--kenar); }
.ag-ok { color: var(--soluk); margin-right: 4px; }
@media (min-width: 900px) {
  .ag-kademe-1 { margin-left: 28px; }
  .ag-kademe-2 { margin-left: 56px; }
  .ag-kademe-3, .ag-kademe-4, .ag-kademe-5 { margin-left: 80px; }
}

/* Ortak durumlari: renk tek basina anlam tasimaz, rozet metni de yazar. */
.rozet-ortak-aday { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); }
.rozet-ortak-onay_bekliyor { background: var(--altin); color: var(--y0); }
.rozet-ortak-aktif { background: var(--yesil); color: #fff; }
.rozet-ortak-askida { background: transparent; color: var(--metin); border: 1px solid var(--kirmizi); }
.rozet-ortak-ayrildi { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); text-decoration: line-through; }

/* ======================================================= musteriler (Y6) */
.rozet-musteri-aday { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); }
.rozet-musteri-gorusuluyor { background: var(--mavi); color: #fff; }
.rozet-musteri-aktif { background: var(--yesil); color: #fff; }
.rozet-musteri-pasif { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); }
.rozet-musteri-kara_liste { background: var(--kirmizi); color: #fff; }

/* ======================================================= fiyatlama (Y7) */
/* "örnek değer, değiştirilecek": kurucunun henuz dokunmadigi rakam. Renk
   tek basina anlam tasimaz; rozet metni de yazar. */
.rozet-ornek { background: var(--mavi); color: #fff; font-weight: 700; white-space: normal; }
.fiyat-deger { font-size: 1.05rem; font-weight: 700; margin: 0 4px; }
.tavan-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.tavan-hucre {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--kenar);
  border-radius: 8px;
  min-width: 0;
}
.tavan-kanal { flex: 1 1 100%; font-size: 0.8rem; color: var(--soluk); }

/* ======================================================= siparis (Y7/S9) */
/* 360 px genislikte YATAY KAYMA YOK: her satir sarilir, sabit genislik yok.
   Dokunma hedefleri en az 44 px. */
.rozet-siparis-taslak { background: transparent; color: var(--soluk); border: 1px dashed var(--kenar); }
.rozet-siparis-onay_bekliyor { background: var(--altin); color: var(--y0); }
.rozet-siparis-onaylandi,
.rozet-siparis-sevke_hazir { background: var(--yesil); color: #fff; }
.rozet-siparis-uretimde,
.rozet-siparis-sevk_edildi,
.rozet-siparis-kismen_teslim { background: var(--mavi); color: #fff; }
.rozet-siparis-teslim_edildi { background: transparent; color: var(--metin); border: 1px solid var(--yesil); }
.rozet-siparis-iptal { background: transparent; color: var(--soluk); border: 1px solid var(--kenar); text-decoration: line-through; }

.sku-cipleri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sku-cipleri .cip { min-height: 44px; padding: 8px 12px; }
/* Betik yoksa cipler ise yaramaz; gizlenir, butun satirlar gorunur. */
.siparis-form:not(.betikli) .sku-cipleri { display: none; }
.siparis-form.betikli .sku-satir.sku-bos { display: none; }

.sepet { display: grid; gap: 10px; margin: 0 0 16px; }
.sku-satir {
  padding: 12px;
  background: var(--kart);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  min-width: 0;
}
.sku-baslik { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; }
.sku-ad { font-weight: 600; overflow-wrap: anywhere; flex: 1 1 160px; min-width: 0; }
.sku-fiyat { font-weight: 700; white-space: nowrap; }
.ipucu-satir { font-weight: 400; font-size: 0.78rem; color: var(--soluk); }
.sku-kontrol { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.adet-kutu { display: flex; align-items: center; gap: 6px; }
.adim-dugme {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--metin);
  background: var(--alan-zemin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
  cursor: pointer;
}
.adet-girdi {
  width: 4.5rem;
  min-height: 44px;
  padding: 8px;
  font: inherit;
  text-align: center;
  color: var(--metin);
  background: var(--alan-zemin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
}
.iskonto-kutu { display: flex; flex-direction: column; gap: 2px; }
.iskonto-kutu label { font-size: 0.78rem; color: var(--soluk); }
.iskonto-girdi {
  width: 5rem;
  min-height: 44px;
  padding: 8px;
  font: inherit;
  color: var(--metin);
  background: var(--alan-zemin);
  border: 1px solid var(--kenar);
  border-radius: 8px;
}
.satir-tutari { margin-left: auto; font-weight: 700; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.iskonto-oneri { margin: 6px 0 0; font-size: 0.8rem; color: var(--soluk); }
.tavan-uyari { color: var(--kirmizi); font-weight: 600; }
.bayi-satis { margin: 8px 0 0; }

.siparis-toplam {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--vurgu-zemin);
  border-radius: var(--yuvarlak);
}
.siparis-toplam > div { display: flex; justify-content: space-between; gap: 10px; }
.siparis-genel { font-size: 1.1rem; font-weight: 700; }
.tahmini-etiket { margin: 4px 0 0; font-weight: 700; color: var(--kirmizi); }
.siparis-dugmeleri .dugme { flex: 1 1 140px; }
.siparis-dugmeleri form { display: contents; }
.iptal-kutu { margin: 16px 0; }
.iptal-kutu summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--soluk); }

/* ============================================== cevrimdisi taslak (Y7/S10) */
.cakisma-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 20px; }
.cakisma-surum { padding: 14px; background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--yuvarlak); min-width: 0; }
.cakisma-surum h2 { margin-top: 0; }
.cakisma-liste { margin: 0 0 12px; padding-left: 18px; }
.cevrimdisi-serit { border-left-color: var(--kirmizi); }
.taslak-bildirim { margin: 0 0 16px; }
.taslak-bildirim a { font-weight: 600; }

/* ============================================== onay kuyrugu (Y7/S11) */
.ust-bildirim { font-size: 0.9rem; text-decoration: none; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.onay-kapi { border-left: 4px solid var(--kirmizi); background: rgba(200, 85, 61, 0.12); padding: 12px 14px; border-radius: 8px; margin: 0 0 16px; }
.onay-kapi-acik { border-left-color: var(--yesil); background: rgba(79, 138, 91, 0.12); }
.marj-negatif { color: var(--kirmizi); font-weight: 700; }
.bildirim-okunmamis { border-left: 3px solid var(--altin); }
.bildirim-satir form { display: inline; }

/* ------------------------------------------------ yazdirilabilir form (Y8) */
/* Tedarikciye giden siparis formu: panel kabugu yok, acik zemin, A4. */
.form-sayfasi {
  margin: 0;
  padding: 16px;
  background: #fff;
  color: #111;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
.form-arac {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto 16px;
}
.form-kagit { max-width: 760px; margin: 0 auto; }
.form-ust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid #111;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.form-ust h1 { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; margin: 0 0 4px; }
.form-ust p, .form-iki p { margin: 0 0 2px; }
.form-marka { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.form-kucuk { font-size: 0.85rem; color: #444; }
.form-uyari { color: #9a2f1c; font-weight: 600; }
.form-iki {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 560px) { .form-iki { grid-template-columns: 1fr 1fr; } }
.form-kagit h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
.form-tablo { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 0.9rem; }
.form-tablo th, .form-tablo td { border: 1px solid #999; padding: 6px; text-align: left; vertical-align: top; }
.form-tablo .sayi { text-align: right; white-space: nowrap; }
.form-talimat { padding-left: 20px; margin: 0 0 16px; }
.form-alt { border-top: 1px solid #999; padding-top: 8px; font-size: 0.8rem; color: #444; }
.form-alt code { overflow-wrap: anywhere; }
@media print {
  .form-arac { display: none; }
  .form-sayfasi { padding: 0; font-size: 11pt; }
  .form-kagit { max-width: none; }
  @page { size: A4; margin: 15mm; }
}

/* ======================================================= sevkiyat ve kargo (Y8) */
.acilir { margin: 12px 0; padding: 0 12px; background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--yuvarlak); }
.acilir > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.acilir[open] > summary { margin-bottom: 8px; }
.acilir > form { padding-bottom: 12px; }
.alan-grubu { margin: 0 0 12px; padding: 8px 12px 0; border: 1px solid var(--kenar); border-radius: var(--yuvarlak); min-width: 0; }
.alan-grubu legend { padding: 0 4px; font-weight: 600; }
.parti-satiri { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
@media (min-width: 560px) { .parti-satiri { grid-template-columns: 2fr 1fr 1.4fr; } }
.satir-ici-form { display: inline-block; margin: 6px 0 0; }
.duz-liste { margin: 0 0 16px; padding-left: 18px; overflow-wrap: anywhere; }
.duz-liste li { margin: 0 0 4px; }
.durum-cizelgesi { list-style: none; margin: 0 0 20px; padding: 0; border-left: 2px solid var(--kenar); }
.durum-cizelgesi li { position: relative; margin: 0 0 10px; padding-left: 16px; color: var(--soluk); }
.durum-cizelgesi li::before {
  content: ""; position: absolute; left: -7px; top: 0.35em;
  width: 12px; height: 12px; border-radius: 50%; background: var(--kart); border: 2px solid var(--kenar);
}
.durum-cizelgesi li.durum-gecildi { color: var(--metin); }
.durum-cizelgesi li.durum-gecildi::before { background: var(--altin); border-color: var(--altin); }
.durum-cizelgesi li.durum-simdiki { font-weight: 700; }
.form-tablo-kap { overflow-x: auto; margin-bottom: 16px; }
.form-tablo-kap .form-tablo { margin-bottom: 0; }
@media print { .form-tablo-kap { overflow: visible; } }
/* Y8: uzun metin (takip adresi kalibi gibi) kart icinde kirilir; 360 px'te yatay kayma yok. */
.kayit-alt > span { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------ Y9c/A3: 360 px duzeltmeleri */
/* Radyo ve onay kutusu secenekleri: blok, alt alta, en az 44 px dokunma hedefi. */
.secim-etiketi { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.secim-etiketi input { flex: none; width: 20px; height: 20px; margin: 0; }
/* Kart icinde uzun uyari metni (rozet tek satirdir, dar ekranda tasar). */
.kayit-uyari { margin: 6px 0 0; font-size: 0.84rem; font-weight: 600; color: var(--kirmizi); overflow-wrap: anywhere; }
.cari-tutar { font-weight: 700; white-space: nowrap; }
.cari-aciklama { flex-basis: 100%; }

/* ------------------------------------------------ musteri takip sayfasi (Y8/S19) */
.takip-baglanti code { display: block; padding: 10px; background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--yuvarlak); overflow-wrap: anywhere; }
.takip-sayfasi { margin: 0; background: var(--zemin); color: var(--metin); font-family: "Inter", system-ui, sans-serif; }
.takip-kap { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; }
.takip-marka { font-family: "Fraunces", Georgia, serif; font-size: 1.1rem; color: var(--altin); margin: 0 0 4px; letter-spacing: 0.04em; }
.takip-kap h1 { font-family: "Fraunces", Georgia, serif; margin: 0 0 16px; }
.takip-no { font-weight: 600; }
.takip-kart { margin: 0 0 12px; padding: 14px; background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--yuvarlak); }
.takip-kart h2 { margin: 0 0 6px; font-size: 1rem; }
.takip-kart p { margin: 0 0 6px; }
.takip-durum { font-size: 1.1rem; font-weight: 700; }
.takip-kart .dugme { margin-top: 6px; }
.takip-alt { margin-top: 24px; font-size: 0.85rem; color: var(--soluk); }

/* Y9: para ekranlari (Param, prim, cari). Mobil once: 360 px'te iki sutun. */
.para-kartlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
@media (min-width: 900px) { .para-kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.para-kart {
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  padding: 10px 12px;
  background: var(--kart);
  min-width: 0;
}
.para-etiket { margin: 0; color: var(--soluk); font-size: 0.8rem; }
.para-deger { margin: 4px 0 0; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.para-alt { margin: 4px 0 0; color: var(--soluk); font-size: 0.78rem; }

/* Y9c: tutar onizlemesi (js/tutar.js): kayittan once cozulen tutar. */
.tutar-onizleme { margin: 6px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--soluk); }
.tutar-onizleme:empty { display: none; }
.tutar-hata { color: var(--kirmizi); }
.bilgi-kutu { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--kenar); border-left: 3px solid var(--altin); border-radius: var(--yuvarlak); background: var(--kart); }

/* Y10/C6: hedef programi (kurucu kademe formu) ve portal "Hedefim" cubuklari. */
.kademe-alan { margin: 12px 0; padding: 8px 12px; border: 1px solid var(--kenar); border-radius: var(--yuvarlak); background: var(--kart); min-width: 0; }
.kademe-alan legend { font-weight: 600; padding: 0 4px; }
.alan-onay label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.alan-onay input[type="checkbox"] { min-width: 20px; min-height: 20px; margin-top: 2px; }
.hedef-ay { margin: 0 0 10px; }
.hedef-ay p { margin: 0 0 4px; font-size: 0.9rem; }
.hedef-ay meter { display: block; width: 100%; height: 14px; }