/* Giriş yapılmış uygulamanın kabuğu ve sayfa düzeni.
 *
 * `customer/css/customer.css` içindeydi. Giriş ve kayıt sayfaları müşteri
 * klasöründen çıkıp köke taşınınca yanlış oldu: tek bir giriş ekranı dört
 * rolü de karşılıyor, ve o ekran müşteri yüzeyinin stil dosyasına bağlı
 * olamaz. Düzeltmen, partner ve yönetici yüzeyleri de aynı kabuğu
 * kullanacak — her biri onu yeniden yazsaydı, dördü birbirinden ayrışırdı.
 *
 * Burada olmayan şey: bir yüzeye özgü hiçbir şey. Sipariş listesi, teklif
 * paneli ve dosya alanı `customer/css/customer.css` içinde kaldı.
 */

/* ── Kabuk ────────────────────────────────────────────────────────────── */

.cw-app {
  --cw-strip-h: 4.5rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cw-page);
}

/* Şeridin altı: solda panel, sağda sayfa. Panel taşımayan sayfalar
 * (kimlik sayfaları, inceleme masası) bunu kullanmaz; `main` doğrudan
 * kabuğun içinde durur ve aynı kurallarla ortalanır. Tam genişlik: panel
 * pencerenin sol kenarından başlar. */
.cw-app__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* İçeriğin ölçüsü public yüzeyin `.cw-wrap`'i ile AYNI: 84rem — bir liste
 * genişlikten faydalanır ama 1700 piksellik bir satır okunmaz. Panelin
 * yanında kalan alanda ortalanır.
 *
 * Kelime işaretinin yeri bu ölçüye bağlı DEĞİL (D-056): şerit tam
 * genişlik ve işaret kenardan sabit payda duruyor; public başlık da öyle.
 * Bir kabuğun işi sabit durmak — sayfa değişince başlığın yer
 * değiştirmesi, ziyaretçiye başka bir siteye geçtiğini söyler — ve bunu
 * sağlayan şey artık ortak sütun değil, ortak kenar payı. */
.cw-app__main {
  flex: 1;
  width: 100%;
  min-width: 0;
  max-width: 84rem;
  margin: 0 auto;
  padding: 2.5rem clamp(1rem, 3vw, 2.25rem) 5rem;
}

/* Bir panelin satırları kendi sayfası (#225, `shared/js/panel-pages.js`):
 * başka bir satırın bölümü burada çizilmiyor. `hidden` değil, çünkü o bir
 * bölümün kendi kuralı ve ikisi birbirini ezmemeli. */
.cw-app__main [data-away] {
  display: none;
}

/* Üst çubuk: D-060'tan beri kâğıt beyazı, yan panelle aynı (D-047'de
 * lacivert-950'ydi); koyu modda gece kabuğunun şerit tonu. Hangisi olacağına
 * tokens.mode.css karar veriyor.
 *
 * İçindeki her şey — kelime işareti, sekmeler, dil kutusu, sessiz düğmeler —
 * bileşenin kendi açık-zemin rengiyle geliyor ve burada üst çubuğun rengine
 * çevriliyor. Bileşenler `:where()` içinde, değiştirici kazansın diye. */
.cw-appbar {
  border-bottom: 1px solid var(--cw-top-line);
  background: var(--cw-top-bg);
  color: var(--cw-top-fg);
  /* Yapışık, panelle birlikte (D-056): panel şeridin altında kalan alanı
   * dolduruyor ve sayfa kayarken ikisi de yerinde duruyor. Şerit kaysaydı
   * panel yukarı çıkıp altında 4.5rem boşluk bırakırdı. Boyu sabit
   * (`--cw-strip-h`, kabukta tanımlı) ki panel nereden başlayacağını
   * bilsin; çekmece (z 20) şeridin (z 10) üstünde. */
  position: sticky;
  top: 0;
  z-index: 10;
}

.cw-appbar :where(.cw-lockup--inline, .cw-wordmark) {
  color: var(--cw-top-fg);
}

/* İşaret eylem renginde: açıkta lacivert, koyuda coral (D-060). Kelime
 * işareti yazı renginde kalır. */
.cw-appbar .cw-lockup--inline :where(.cw-mark) {
  color: var(--cw-action-bg);
}

/* `:where()` DEĞİL: `button.css`'teki `.cw-btn--quiet:hover:not(:disabled)`
 * (0,3,0) ve sıfır özgüllüklü bir üst çubuk kuralı ona yenilir — üstüne
 * gelince yazı lacivert-600'e dönüp lacivert-950'de kayboluyordu. Kural
 * bir bileşenin değiştiricisini eziyor, o yüzden ondan daha özgül olmak
 * zorunda; `check_design`'ın yasakladığı şey çıplak eleman, sınıf değil. */
.cw-appbar .cw-btn--quiet,
.cw-appbar .cw-btn--quiet:hover:not(:disabled) {
  color: var(--cw-top-fg);
}

/* Dil kutusu üst çubuğun renginde. Zemin saydam DEĞİL: açılır listeyi
 * kendisi çizen tarayıcılar (Windows/Linux Chrome, Firefox) `color`'ı
 * miras alıp saydam zemini beyaza çeviriyor, ve liste beyaz üstüne beyaz
 * çıkıyordu. Seçenekler kendi renklerini ayrıca alıyor. */
.cw-appbar .cw-locale {
  border-color: var(--cw-top-control);
  /* Yalnızca renk: kısaltma, field.css'in çizdiği oku da silerdi. */
  background-color: var(--cw-top-bg);
  color: var(--cw-top-fg);
}

.cw-appbar .cw-locale :where(option) {
  background: var(--cw-card);
  color: var(--cw-text);
}

/* Mod anahtarı: sessiz bir düğme, ama bastığında ne olacağını söylüyor.
 * `aria-pressed` koyu moddayken true; görünüm ondan değil yazısından
 * geliyor ("Koyu mod" / "Açık mod"), çünkü anahtarın hedefi okunmalı. */
.cw-mode {
  font-weight: 500;
}

/* Şerit, tam genişlik (D-056). Sayfa linkleri artık burada değil, sol
 * panelde; şeritte kimlik (kelime işareti) ve oturum (isim, dil, mod,
 * hesap, çıkış) kalıyor. Payları public başlığınkiyle (`.cw-header__inner`)
 * birebir aynı — 0.75rem dikey, aynı clamp yatay — ki kelime işareti public
 * sayfadan girişe, girişten uygulamaya geçerken ne yana ne yukarı kaysın.
 * Maketteki 52 piksellik ince hâl denendi; public başlıkla boy farkı
 * bütünlüğü bozuyordu ve public'in boyu seçildi. */
.cw-appbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
  /* Şeridin alt çizgisi dâhil tam 4.5rem; panel oradan başlıyor. */
  min-height: calc(var(--cw-strip-h) - 1px);
  /* 0.75rem: şeritteki düğmeler 44 piksel (D-060) ve 1rem payla şerit 77
   * piksele çıkıyordu; panel 72'den başlıyor. */
  padding: 0.75rem clamp(1rem, 3vw, 2.25rem);
}

.cw-appbar__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-data);
  color: var(--cw-top-muted);
}

/* Dar ekranda paneli açan düğme. Geniş ekranda yok: panel zaten görünür. */
.cw-appbar__menu {
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--cw-top-control);
  border-radius: 6px;
  background: none;
  color: var(--cw-top-fg);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  font-weight: 500;
  cursor: pointer;
}

@media (max-width: 55.99rem) {
  .cw-appbar__menu {
    display: inline-flex;
  }

  /* Kelime işareti solda, menü düğmesi sağda, oturum satırı altta. Üç
   * parça tek satıra sığmıyor ve sığdırmaya çalışan hâli bir kez 526
   * piksele taştı.
   *
   * Yalnızca menü düğmesi olan şeritte: kimlik sayfalarının şeridinde tek
   * bir dil kutusu var ve o kelime işaretinin satırında kalmalı — zorla
   * sarmalanan hâli onu ikinci satıra, sola yaslı düşürüyordu. */
  .cw-appbar .cw-lockup--inline {
    margin-right: auto;
  }

  .cw-appbar__menu ~ .cw-appbar__who {
    flex: 1 1 100%;
  }

  /* Oturum satırı tek satırda kalsın diye isim telefonda yok: dil, mod,
   * hesap ve çıkış 390 piksele sığıyor, isimle birlikte üç satıra
   * bölünüyordu. İsim en az iş gören parça — kimin girdiğini zaten
   * Hesabım söylüyor. */
  .cw-appbar__name {
    display: none;
  }
}

/* ── İki sütunlu sayfa ────────────────────────────────────────────────── */

/* Form solda, "sırada ne var" sağda.
 *
 * Form tek başına ortadaydı ve sayfanın kalanı boştu. Boşluk bir tasarım
 * tercihi olabilir — ama burada değildi: bir ziyaretçi bu sayfada hesap
 * açarken ürünün ne yaptığını henüz bilmiyor olabilir, ve o soruyu
 * cevaplayacak metin zaten var. Boşluğu dolduran şey süs değil, okuması
 * gereken şey.
 *
 * Dar ekranda tek sütun, ve form ÖNCE: hesap açmaya gelen biri için asıl iş
 * o, açıklama ikinci.
 *
 * Üç sayfa da kullanıyor — giriş, kayıt ve yeni sipariş. Adı `cw-auth` idi ve
 * yeni sipariş sayfası da aynı düzene ihtiyaç duyunca yanlış oldu: bir sınıf
 * adı, ait olduğu sayfayı değil yaptığı işi söylemeli. */
.cw-split {
  width: 100%;
  padding: 3rem 0 4rem;
  display: grid;
  gap: 3rem;
  align-items: start;
}

/* Kimlik sayfaları: tek sütun, dar, ve ORTADA.
 *
 * Bir yan sütunu vardı — belgeye ne olacağının dört adımı — ve orada yanlıştı.
 * Giriş ekranı bir tanıtım yeri değil: oraya gelen ya zaten müşteri ve
 * siparişine bakmak istiyor, ya da kaydolmaya gelmiş ve ürünü public sayfada
 * okumuş. "Sırada ne var" listesi, yeni sipariş sayfasında — belgeyi tam
 * yüklerken — kendi yerinde duruyor.
 *
 * Ortada, sola yaslı değil: tek bir dar sütun sola yaslandığında sayfanın
 * sağı boş kalıyor. Ortalanmış bir form ise boş görünmüyor, odaklanmış
 * görünüyor — çünkü sayfada okunacak başka bir şey de yok. */
.cw-auth {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

/* Ekranda dikey olarak da ortada.
 *
 * Sütun sayfanın üstünden başlayıp altında büyük bir boşluk bırakıyordu: dar
 * bir form, geniş bir gri alanın sol üst köşesine yapıştığında sayfa
 * bitmemiş görünüyor. Görsel ağırlık ekranın ortasındayken görünmüyor. */
.cw-app__main--centred {
  display: grid;
  place-content: center;
  padding-top: 3rem;
  padding-bottom: 5rem;
}

/* Form bir YÜZEY üstünde, gri zeminin üstünde serbest değil.
 *
 * Alanlar ve düğme düz zemine dizildiğinde sayfa "boş" okunuyordu — ortada
 * bir nesne yok, birbiriyle ilgisiz parçalar var. Beyaz bir panel onları tek
 * bir şeye çeviriyor, ve sipariş kartlarıyla aynı yüzey dili: ton farkı,
 * gölge değil (bkz. `components/card.css`).
 *
 * Başlık ve alt cümle panelin DIŞINDA: onlar sayfanın kim olduğunu söylüyor,
 * panel ise yapılacak işi taşıyor. */
.cw-auth__panel {
  margin-top: 1.75rem;
  padding: 1.75rem 1.75rem 1.5rem;
}

/* Kartın arkasından çıkan iki kâğıt, sol altta filigran işaret, kartın
 * altında kilit satırı (D-047 kimlik işi, maket B′).
 *
 * Yan sütun bir kez kaldırılmıştı ve haklı olarak: "sırada ne var" listesi
 * giriş ekranında bir tanıtımdı. Bu o değil — okunacak cümlesi yok. Ana
 * sayfanın hero'sundaki belge çizimi, kimin sayfası olduğunu söylüyor;
 * form yine tek başına ortada ve o hâl doğruydu.
 *
 * Kâğıtlar `.cw-auth`'a göre konumlu ve kartın ARKASINDA: kart `z-index`
 * alıyor, kâğıtlar almıyor. Konum kartın değil sütunun kenarına bağlı,
 * çünkü kartın yüksekliği sayfadan sayfaya değişiyor (giriş, kayıt, parola)
 * ve kâğıdın nereden çıktığı değişmemeli. Dar ekranda yok: 26rem'lik sütunun
 * dışına taşan bir kâğıt, 390 pikselde yatay kaydırma demek. */
/* Sahne: kartı (ya da "zaten girişlisiniz" kutusunu) ve arkasındaki
 * kâğıtları taşıyan kap. Kâğıtlar buna göre konumlu, sütuna değil: sütunun
 * üstünde başlık ve alt cümle var ve boyları sayfadan sayfaya (giriş,
 * kayıt, parola) değişiyor — sütuna göre konan kâğıt kısa bir sayfada
 * başlığın altına giriyordu. Sahne kartla başlıyor, kartla bitiyor. */
.cw-auth__stage {
  position: relative;
}

.cw-auth__panel {
  position: relative;
  z-index: 1;
  /* Beyaz kâğıtların önünde duruyor: kart kenarını çizgiyle korur (D-060). */
  border-color: var(--cw-line);
}

.cw-auth__paper {
  display: none;
}

.cw-auth__sheet {
  position: absolute;
  width: 11.5rem;
  /* Tek başına duran kâğıt; `.cw-proof` içindeki flex payı burada yok. */
  flex: none;
  box-shadow: var(--cw-shadow-sheet-front);
}

.cw-auth__sheet--source {
  left: -5rem;
  top: 0.5rem;
  transform: rotate(-4deg);
}

.cw-auth__sheet--target {
  right: -4.5rem;
  /* Sahnenin alt dolgusunun içinde (geniş ekranda 2.5rem): `bottom` dolgu
   * kutusuna göre, ve -1.75rem kâğıdı dolguyla birlikte aşağı itip köşesini
   * kilit satırının üstüne taşıyordu. Kartın altına göre yeri aynı. */
  bottom: 0.75rem;
  transform: rotate(5deg);
}

/* Kilit satırı kartın altında, ortada: ana sayfanın alt bilgisindeki
 * `.cw-descriptor` ile aynı yazı; burada yalnızca yerleşim. */
.cw-auth__descriptor {
  display: block;
  margin-top: 1.5rem;
  text-align: center;
  color: var(--cw-text-faint);
}

/* Filigran: zeminden bir basamak koyu (ground-100, koyuda 800), PENCERENİN
 * sol alt köşesinde, kısmen dışarıda. Kabuk kırpıyor, `main` değil: main
 * 84rem'de ortalanıyor ve geniş ekranda iki yanında pay bırakıyor — ona
 * göre konan işaret köşeye 84 piksel kala duruyordu. Süs, `mark.js`
 * `aria-hidden` çiziyor. */
.cw-app--auth {
  position: relative;
  overflow: hidden;
}

/* Köşeden taşan büyük işaret — maket B′'deki duruş. Köşeye YASLI olması
 * şart: işaret -18° dönük ve sol alt lobu ekranın dışında kalıyor; sola
 * fazla itilirse görünen parça soldan boşlukla başlıyor ve köşedeki bir
 * filigran yerine ortada yüzen iki lob kalıyor. Sol pay küçük, alt pay
 * büyük — kesilen kısım alttan. */
.cw-auth__mark {
  display: none;
  position: absolute;
  left: -1rem;
  bottom: -9rem;
  color: var(--cw-sunken);
  pointer-events: none;
}

.cw-auth__mark :where(svg) {
  display: block;
}

@media (min-width: 44rem) {
  .cw-auth__paper,
  .cw-auth__mark {
    display: block;
  }

  /* Sahne en az kâğıtların boyunda: kâğıtlardan kısa bir kart ("zaten
   * girişlisiniz", "bağlantı gönderildi", parola formu) kâğıtları kartın
   * altındaki bağlantıların ve kilit satırının üstüne taşırıyordu (B1).
   * Kart üstte, başlığın hemen altında; boşluk yalnızca kartın altında —
   * ortalamak başlığın altına bir boşluk açıyordu. */
  .cw-auth__stage {
    min-height: 17rem;
    /* Sağdaki kâğıt bu dolgunun içinde bitiyor (`.cw-auth__sheet--target`):
     * döndürülmüş köşesine yer, ki altında ne gelirse gelsin (bağlantılar ya
     * da, onlar gizliyken, kilit satırı) köşenin altında kalsın. */
    padding-bottom: 2.5rem;
  }


}

/* "Parolanızı mı unuttunuz", "hesabınız yok mu": kartın altında, ortada
 * (D-060, onaylanan maket). Kartın içi yalnızca formun kendisi. */
.cw-auth__links {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  color: var(--cw-text-muted);
  text-align: center;
}

.cw-auth__link {
  margin: 0;
}

/* Bağlantılar kâğıtların önünde (konumlu). Temel kuraldan SONRA: önce
 * durduğunda aynı ağırlıktaki temel kural onu eziyordu. */
@media (min-width: 44rem) {
  .cw-auth__links {
    position: relative;
    z-index: 1;
    margin-top: 0.25rem;
  }
}

/* Formun tek eylemi kartın tam genişliğinde: yapılacak tek iş o. "Zaten
 * girişlisiniz" kutusunun iki düğmesi yan yana kalıyor. */
.cw-auth__panel .cw-form > .cw-form__actions .cw-btn {
  width: 100%;
}

/* Sola yaslı DEĞİL, kendi ölçüsü de yok: kabuğun genişliğini iki sütuna
 * bölüyor. Kendi `max-width`'i olduğunda — 60rem, kabuk 84rem iken — geniş
 * bir ekranda sağda garantili bir ölü alan kalıyordu ve sayfa "her şey solda"
 * diye okunuyordu.
 *
 * Satır uzunluğu sütunun değil İÇERİĞİN işi: form 26rem'de duruyor, yan
 * sütunun metni kendi ölçüsünde. Sütunlar genişliği paylaşıyor, metin
 * okunabilir kalıyor. */
/* İki sütun, bitişik, ve blok ORTADA.
 *
 * Bu üçüncü deneme ve ilk ikisi aynı şeyin iki ucuydu. Kabuk 84rem — bir
 * sipariş LİSTESİ için doğru ölçü, çünkü liste genişlikten faydalanıyor. Bir
 * form sayfası o genişliği dolduramıyor: sütunları kenarlara yaslarsan
 * ortada, bir kenara yaslarsan yanda boşluk kalıyor. İkisi de "unutulmuş"
 * duruyor.
 *
 * Çözüm sütunları germek değil, bloğu KÜÇÜLTMEK: 28 + 32 + 4 = 64rem, tam
 * oturuyor, içinde boşluk yok. Kalan yer bloğun iki yanına eşit dağılıyor —
 * ve eşit dağılan boşluk kenar boşluğudur, göze boşluk olarak görünmez.
 *
 * Başlık kelime işaretinin hizasından kayıyor, evet. Giriş ve kayıt
 * sayfaları da öyle ve orada doğru görünüyor: odaklanmış tek bir iş varsa
 * sayfa onun etrafında toplanır. Kabuğun kendisi — başlık çubuğu — her
 * sayfada aynı yerde duruyor, ve sabit durması gereken o. */
@media (min-width: 56rem) {
  .cw-split {
    max-width: 64rem;
    margin: 0 auto;
    grid-template-columns: minmax(0, 28rem) minmax(0, 32rem);
    gap: 4rem;
  }
}

/* Girişli kabukta sütunlar 14.5rem'lik panelin yanında: 56rem bir pencerede
 * form sütunu 275 piksele iniyor, dosya satırı ve ipucu sarıyordu (#160).
 * Orada iki sütun, panelle birlikte sığdıkları 70rem'den. */
@media (min-width: 56rem) and (max-width: 69.99rem) {
  .cw-app__body .cw-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

.cw-split__main > * {
  max-width: 30rem;
}

.cw-split__main {
  min-width: 0;
}

/* Yan sütun (D-060): yükseltilmiş bir yüzey, gölgesiz — formla yarışan bir
 * kart değil, yanında duran bir not. */
.cw-aside {
  min-width: 0;
  align-self: start;
  padding: 1.5rem 1.6rem;
  border-radius: 18px;
  background: var(--cw-raised);
}

.cw-aside__title {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-h2);
  font-weight: 400;
  line-height: var(--cw-lh-h2);
}

.cw-aside__steps {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.1rem;
  counter-reset: aside;
}

.cw-aside__steps :where(li) {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  line-height: var(--cw-lh-ui);
  color: var(--cw-text-muted);
  counter-increment: aside;
}

.cw-aside__steps :where(li)::before {
  content: counter(aside);
  font-family: var(--cw-font-serif);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1;
  color: var(--cw-text-muted);
}

.cw-aside__steps :where(strong) {
  display: block;
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-ui-title);
  font-weight: 600;
  color: var(--cw-text);
}

/* Motor adımı — D-028: coral tam olarak bir şeyi işaretliyor, ve o şey
 * yapay zekâ. Public sayfadaki "how it works" ile aynı işaret. */
.cw-aside__steps :where(li).cw-aside__machine::before {
  color: var(--cw-accent-text);
}

.cw-aside__note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cw-line);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

/* Başlık ve altındaki tek cümle. Kimlik sayfalarının kendi biçimi değil —
 * yeni sipariş sayfası da aynı çifti kullanıyor, ve `cw-auth__` öneki onu
 * girmediği bir bölüme ait gösteriyordu. */
.cw-title {
  margin-bottom: 0.6rem;
}

.cw-lead {
  color: var(--cw-text-muted);
  margin-bottom: 2rem;
}

/* Tek sütunlu bir form, sayfanın genişliğini almaz: 890 piksel boyunda bir
 * alanda etiket solda, imleç sağda kalıyor ve göz her satırda o mesafeyi
 * yeniden kat ediyor. Bu sayfalar zaten `.cw-split` içinde dar; bu, o
 * kolonun dışında duran formlar için. */
.cw-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 40rem;
}

.cw-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.cw-form__aside {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cw-line);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
}

/* İstek sonucu — formun altındaki canlı bölgeye düşen ileti. */
.cw-result {
  margin-top: 1.25rem;
}

/* Sayfa başlığı ve o sayfanın tek eylemi, aynı satırda. Düğme başlığın
 * altında ayrı bir paragraf olarak duruyordu: başlıkla listeyi birbirinden
 * ayırıyor ve sayfanın üçüncü bir bölümü gibi okunuyordu.
 *
 * `wrap`: Türkçede başlık uzuyor, ve dar bir ekranda düğmenin alta inmesi
 * doğru olan. */
.cw-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* A lead under the page head sits right under it, as under `.cw-title`. */
.cw-pagehead:has(+ .cw-lead) {
  margin-bottom: 0.6rem;
}

/* "Daha eskileri" düğmesinin durduğu yer. Müşteri yüzeyinin dosyasındaydı ve
 * partner yüzeyi de aynı işaretlemeyi kullanınca yanlış oldu — sayfalanan her
 * liste bu düğmeyi taşıyor, ve bir yüzeye ait değil. */
.cw-more {
  margin-top: 1.25rem;
}

/* ── Sol panel · kabuktaki gezinme (D-056) ────────────────────────────── */
/*
 * Sayfa linkleri üst çubuğun ortasında duruyordu: studio'da üç, yönetimde
 * altı, müşteri ve partnerde hiç. Bir satır metin, bir çubuğun ortasında,
 * gezinme olarak okunmuyordu. Şimdi şeridin altında, içeriğin solunda, beyaz
 * bir panel: her satır bir ikon ve bir ad; bulunulan sayfa `aria-current`
 * ile işaretli ve görünen hâli tek kaynaktan geliyor.
 *
 * Renkler rol: kart, çizgi, seçim. Koyu modda kart ground-850'ye, seçim
 * coral-400'e döner (D-047) ve bu dosya onu bilmez.
 *
 * İnceleme masası panel taşımaz — kanvas genişliğe muhtaç ve geri yolu
 * sayfanın kendi başlığında. Hesap sayfası taşır ama satırlarını elle
 * yazamaz: dört rolün ortak sayfası, hangi satırları göstereceğini oturum
 * söyleyince `account.js` çizer.
 */
/* Panel pencerenin sol kenarından başlar, kart renginde, sağında çizgi.
 * Sol payı, satırdaki ikon şeritteki işaretin tam altına gelsin diye
 * şeridin yan payından türetilir: o pay eksi satırın kendi payı. */
.cw-side {
  --cw-side-inset: calc(clamp(1rem, 3vw, 2.25rem) - 0.75rem);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: calc(13.75rem + var(--cw-side-inset));
  padding: 1.25rem 0.75rem 1.25rem var(--cw-side-inset);
  border-right: 1px solid var(--cw-line);
  background: var(--cw-side-bg);
  /* Şeridin altında kalan alan kadar ve yapışık: uzun bir sayfada (hesap,
   * partner) panel sayfayla birlikte uzuyor ve dipteki Hesabım sayfanın en
   * altına, görünmeyen bir yere kayıyordu. Şimdi panel şeritten pencerenin
   * dibine kadar; sayfa kayarken şeritle birlikte yerinde durur, dibi her
   * zaman ekranın dibinde — en üstteyken de. `flex-start` şart: `stretch`
   * paneli gövde boyuna açar ve yapışacak yer bırakmaz. */
  position: sticky;
  top: var(--cw-strip-h);
  align-self: flex-start;
  height: calc(100vh - var(--cw-strip-h));
  overflow: auto;
}

/* Panelin başındaki rol etiketi ve satırlar arasındaki grup başlığı: aynı
 * yazı (§7 etiket), farklı boşluk. */
.cw-side__role,
.cw-side__group {
  margin: 0 0.75rem 0.5rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-label);
  line-height: var(--cw-lh-label);
  font-weight: 600;
  letter-spacing: var(--cw-tracking-label);
  text-transform: uppercase;
  color: var(--cw-text-faint);
}

.cw-side__group {
  margin-top: 1rem;
  margin-bottom: 0.375rem;
}

.cw-side__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  font-weight: 500;
  line-height: var(--cw-lh-ui);
  color: var(--cw-text-muted);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.cw-side__item:hover {
  color: var(--cw-text);
  background: var(--cw-sunken);
}

/* İkon satırın rengini alır, ama bir ton soluk: ad okunur, ikon tanınır.
 * Seçili satırda ikisi aynı renk. */
.cw-side__icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--cw-text-faint);
}

/* Bulunulan sayfa: seçim yıkaması, seçim rengi ve solda 3 piksellik şerit.
 * Bugünkü sekmenin alt çizgisinin dikey hâli. */
.cw-side__item[aria-current="page"] {
  color: var(--cw-selected);
  font-weight: 600;
  background: var(--cw-selected-wash);
}

.cw-side__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--cw-side-inset));
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  /* Coral bir vurgu rengi artık (D-060): bulunulan sayfanın şeridi. */
  background: var(--cw-accent);
}

.cw-side__item[aria-current="page"] .cw-side__icon {
  color: inherit;
}

/* Sistem'in yanındaki işaret: işçi durdu ya da motor takıldı (#170). Hangi
 * sayfada olunursa olunsun görünsün diye menüde; ne olduğu Sistem'de. */
.cw-side__mark {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cw-state-danger);
}

/* Panelin dibi: Hesabım. Bir sayfa, yani gidilecek bir yer — şeritte
 * oturum düğmelerinin arasında duruyordu ve oraya ait değildi. Sayfa
 * satırlarından bir çizgiyle ayrı ve en altta, çünkü işin parçası değil.
 * İnceleme masasının şeridinde yok: oraya giden yol panelden geri dönmek.
 * Koyu mod şeritte kalır: bir yer değil, bir anahtar. */
.cw-side__foot {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cw-line);
}

/* Çekmecenin kapatma düğmesi: yalnızca dar ekranda var. */
.cw-side__close {
  display: none;
}

/* Dar ekran: panel bir çekmece. Kapalıyken yok; açıkken soldan 18.75rem,
 * sayfanın üstünde, sağında yarı saydam bir perde. Perde panelin kendi
 * `::after`'ı — ayrı bir eleman değil, ve panelin kendi alanını örtmesin
 * diye panelin bittiği yerden başlıyor. Perdeye tıklamak panele tıklamak
 * demek; `menu.js` hedef panelin kendisiyse kapatıyor. Perdenin rengi
 * şeridinki, saydamlığı burada: `check_design` ham renk de `color-mix`
 * de kabul etmiyor. */
@media (max-width: 55.99rem) {
  .cw-side {
    display: none;
  }

  .cw-side--open {
    --cw-side-inset: 0.75rem;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    /* Geniş ekran kuralının `height: calc(100vh - 4.5rem)`'i buraya
     * sızıyordu ve `top` + `bottom` yerine o kazanıyordu: çekmece 72 piksel
     * kısa kalıyor, altında perdesiz bir şerit sayfa görünüyordu. `height`
     * tek başına yetmez: `align-self: flex-start` de sızıyor ve mutlak
     * konumlu bir kutunun `auto` boyunu içeriğe göre ölçtürüyor — `auto`
     * hizada `top` + `bottom` kutuyu gerer. */
    height: auto;
    align-self: auto;
    left: 0;
    z-index: 20;
    width: min(18.75rem, 85vw);
    overflow: auto;
    box-shadow: var(--cw-shadow-sheet-front);
  }

  .cw-side--open::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: min(18.75rem, 85vw);
    right: 0;
    /* Kendi rolü (D-060): şerit artık beyaz, ve şeridin rengini okuyan perde
     * sayfayı karartmıyordu. */
    background: var(--cw-scrim);
    opacity: 0.45;
  }

  .cw-side__close {
    display: inline-flex;
    align-self: flex-end;
    margin: -0.5rem 0 0.5rem;
  }

  /* Çekmece açıkken perdenin arkasındaki sayfa kaymasın (#160); sınıfı
   * `menu.js` gövdeye yazıp siliyor. */
  .cw-drawer-open {
    overflow: hidden;
  }
}

/* ── Bölümler ve satır listeleri ──────────────────────────────────────── */
/*
 * `partner/css/partner.css` içindeydi. Yönetim yüzeyinin dört sayfası da aynı
 * iskeleti kullanınca yanlış oldu — ve denetim yakaladı: bir sayfanın
 * kullandığı sınıfı yüklemediğini söyleyen kural. Başlıklı bir bölüm ve
 * satırlardan oluşan bir liste, bir yüzeye değil uygulamaya ait.
 */

.cw-block {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cw-line);
}

.cw-block__lead {
  margin-top: 0.5rem;
  max-width: var(--cw-measure);
  color: var(--cw-text-muted);
}

.cw-empty-line {
  margin-top: 1.25rem;
  color: var(--cw-text-muted);
  max-width: var(--cw-measure);
}

/* ── Satır listeleri ──────────────────────────────────────────────────── */

@media (min-width: 44rem) {
}

@media (min-width: 44rem) {
}

/* ── Bir kaydın başlığı ───────────────────────────────────────────────── */
/*
 * Geri bağlantısı, dosya adı, üstbilgi satırı. Müşteri yüzeyinin dosyasındaydı
 * ve yönetim sipariş sayfası da aynısını kullanınca taşındı.
 */
.cw-back {
  margin-bottom: 1.25rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
}

/* Başlık ve rozet aynı satırda; dar ekranda rozet alta iniyor. Dosya adı
 * uzun olabiliyor ve kırpılmıyor — müşterinin kendi verdiği ad, ve iki
 * benzer belgeyi birbirinden ayıran tek şey o. */
.cw-orderhead {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.cw-orderhead :where(h1) {
  overflow-wrap: anywhere;
}

.cw-orderhead__note {
  margin-top: 0.75rem;
  max-width: var(--cw-measure);
}

.cw-orderhead + .cw-order__meta,
.cw-orderhead .cw-order__meta {
  margin-top: 0.45rem;
}

.cw-order__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.3rem;
  font-family: var(--cw-font-figures);
  font-size: var(--cw-text-data);
  font-variant-numeric: var(--cw-numeric-tabular);
  color: var(--cw-text-muted);
}

/* ── Rakamlar ─────────────────────────────────────────────────────────── */
/*
 * Bir sayfanın en üstündeki birkaç rakam: sayfanın açılma sebebi olan cevap,
 * en büyük yazıyla. Altındaki her şey o cevabın dayanağı.
 *
 * Partner yüzeyindeydi, sonra yönetim panosu da aynı şeyi istedi. İkinci
 * kopya yazılmadan buraya taşındı — `check_design.py` zaten yakalamıştı:
 * panonun yüklediği hiçbir dosyada bu sınıflar yoktu.
 */
.cw-figures {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

/* Kaç tane varsa o kadar sütun. Sabit üç sütun, partner yüzeyinin üç rakamı
 * için yazılmıştı; panonun dört rakamı 3+1 diye sarıyor ve sonuncusu tek
 * başına kalıyordu. `auto-fit`, sayıyı bilmeyi gerektirmiyor. */
@media (min-width: 44rem) {
  .cw-figures {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
  }
}

/* Bir kart: zemin, kenar ve köşe `.cw-card`'dan (`cw-card cw-figure`, #350). */
.cw-figure {
  padding: 1.35rem 1.5rem;
}

.cw-figure__label {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-label);
  font-weight: 600;
  letter-spacing: var(--cw-tracking-label);
  text-transform: uppercase;
  color: var(--cw-text-muted);
}

/* Serif ve büyük: okunacak tek sayı bu. `tabular-nums`, çünkü üçü alt alta
 * ya da yan yana duruyor ve hizasız rakamlar karşılaştırmayı bozuyor. */
.cw-figure__value {
  margin-top: 0.5rem;
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-h1);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: var(--cw-numeric-tabular);
  color: var(--cw-text);
}

.cw-figure__note {
  margin-top: 0.5rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-data);
  line-height: var(--cw-lh-data);
  color: var(--cw-text-muted);
}

/* Lacivert bantta (D-060): sayfanın asıl cevabı olan rakam — partnerin,
 * entegratörün ve düzeltmenin bekleyen payı, panonun "şu an burada"sı.
 * Renkler `.cw-on-feature` kapsamından geliyor; etiket bandın tek mercanı.
 *
 * Zemin burada yeniden yazılıyor: `.cw-card`'ın ve `.cw-figure`'ın
 * `--cw-card`'ı token dosyasından sonra yükleniyor, ve kapsamın içinde o kart
 * bandın yükseltilmiş tonu — bant değil (customer.css'teki öne çıkan sipariş
 * de aynı sebeple). Token katmanının bileşeni yenmesi yerine bileşen kendi
 * bandını söylüyor (#353). */
.cw-figure--feature {
  background: var(--cw-feature);
}

/* Kâğıtta da bant: yazıcı zeminleri atınca (Chrome'un varsayılanı) bandın
 * beyaz mürekkebi beyaz kâğıtta kalırdı — bekleyen tutar, bir kez
 * gösterilen anahtar, karar bandı. */
@media print {
  .cw-on-feature {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.cw-figure--feature .cw-figure__label {
  color: var(--cw-accent-text);
}

/* ── Araç çubuğu ─────────────────────────────────────────────────────── */
/* Bir listenin başlığı ve girişi solda, listeyi süzen alan sağda. Dar
 * ekranda alan alta iner. */
.cw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}

.cw-toolbar__text {
  flex: 1 1 28rem;
  min-width: 0;
}

/* Başlığın yanındaki tek alan: süzgeç (partnerin kapısı), pencere
 * (yöneticinin aralığı). Form genişliğinde bir seçim kutusu burada bir
 * başlık gibi okunurdu. İki sayfa bir kural (#363). */
.cw-toolbar__field {
  flex: 0 1 18rem;
  min-width: 14rem;
}

/* ── Tek satırlık form ──────────────────────────────────────────────────
 * Bir ya da iki alan ve düğmesi aynı satırda, bir kartın içinde: kod
 * istemek, anahtar yapmak, adres eklemek. Düğme alanın KUTUSUYLA aynı
 * satırda: alanlar formun satırlarını paylaşıyor (subgrid) — etiket, kutu,
 * yardım, hata — ve düğme kutunun satırında. İki satıra kayan bir etiket
 * kutuları birlikte aşağı iter, düğme de onlarla iner.
 *
 * Yan yana dizilmek, bölümün kendi genişliğine bakıyor, pencereninkine
 * değil: yan panel açıkken de dar kalan kartta her şey alt alta, düğme
 * alanların altında. Kap işaretlemede açıkça (`cw-container`, #351): bir
 * `:has()` seçicisi formu saran bir eleman eklenince ya da `:has()` olmayan
 * bir tarayıcıda kabı kaybediyordu. */
.cw-container {
  container-type: inline-size;
}

/* Zemin, kenar, köşe ve pay `.cw-card`'dan (işaretlemede ikisi birden, #350). */
.cw-form--card {
  margin-top: 1.5rem;
}

.cw-form--inline {
  max-width: 48rem;
}

/* Only where subgrid and `:has()` exist: without subgrid the four shared
 * rows spread the field's height and the button leaves the box's line;
 * without `:has()` (Firefox 115 ESR) the two-field form's third column is
 * lost and the button lands between the fields. Stacked instead. */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
@container (min-width: 40rem) {
  .cw-form--inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, auto);
    column-gap: 1rem;
    row-gap: 0;
  }

  /* İki alan: anahtarın adı ve kodu. */
  .cw-form--inline:has(> .cw-field:not([hidden]) ~ .cw-field:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  /* `min-width: 0`: a select is as wide as its longest option, and a field
   * that kept that width would push the button out of the card. */
  .cw-form--inline > .cw-field {
    display: grid;
    min-width: 0;
    grid-row: 1 / span 4;
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 0;
  }

  /* `.cw-field`'ın 0.35rem'i, satırlar paylaşılınca her parçanın kendi
   * payı oluyor. Etiketin altı kutuya, kutunun altı yardıma. */
  .cw-form--inline > .cw-field > .cw-field__label {
    align-self: end;
    margin-bottom: 0.35rem;
  }

  .cw-form--inline > .cw-field > :not(.cw-field__label, .cw-field__input, .cw-field__select) {
    margin-top: 0.35rem;
  }

  .cw-form--inline > .cw-field > :is(.cw-field__input, .cw-field__select) {
    min-width: 0;
    width: 100%;
  }

  .cw-form--inline > .cw-form__actions {
    grid-row: 2;
    grid-column: -2;
    align-self: center;
    margin-top: 0;
  }
}
}

/* The button's column is `auto`: "Sending…" in place of "Make a key"
 * changed its width, and the fields beside it moved (#360). The button
 * holds its other label too, invisible and with no height — what it says
 * while sending, and what it said before (`busy()` keeps it) — so its width
 * is the wider of the two in both states. */
.cw-form--inline > .cw-form__actions > .cw-btn[data-busy-label] {
  flex-direction: column;
  gap: 0;
}

.cw-form--inline > .cw-form__actions > .cw-btn[data-busy-label]::after {
  content: attr(data-busy-label);
  /* Empty alternative text: never part of the button's name. */
  content: attr(data-busy-label) / "";
  height: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
}

.cw-form--inline > .cw-form__actions > .cw-btn[data-busy-label][aria-busy="true"]::after {
  content: attr(data-idle-label);
  content: attr(data-idle-label) / "";
}

/* ── Ödeme hesabı ─────────────────────────────────────────────────────
 * Paranın gittiği yer, tek bir kart (`cw-card cw-payout`): simge, durum
 * cümlesi, düğme. */
.cw-payout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1.5rem;
}

.cw-payout__icon {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 3rem;
  border-radius: 8px;
  background: var(--cw-sunken);
  color: var(--cw-text-muted);
}

.cw-payout__state {
  max-width: var(--cw-measure);
}

.cw-payout__open {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Üç sütun, bölümün kendi genişliği yetince (yan panel açıkken pencere
 * genişken de sütun dar olabiliyor; kap yukarıda, tek satırlık formla
 * birlikte). */
@container (min-width: 44rem) {
  .cw-payout {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .cw-payout__open {
    grid-column: auto;
  }
}

/* ── Seçenek grubu — hesap sayfasının görünüm seçimi (D-060) ───────────
 * Bir fieldset ve radyo düğmeleri: tarayıcının kendi alan çerçevesi yok,
 * seçenekler yan yana, her biri 44 piksellik bir hedef. */
.cw-choice {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cw-choice :where(legend) {
  padding: 0;
}

.cw-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cw-choice__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border: 1.5px solid var(--cw-line-strong);
  border-radius: 999px;
  background: var(--cw-card);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  cursor: pointer;
}

.cw-choice__option:has(input:checked) {
  border-color: var(--cw-selected);
  background: var(--cw-selected-wash);
  font-weight: 600;
}

.cw-choice__option :where(input) {
  margin: 0;
  accent-color: var(--cw-action-bg);
}

/* ── Sabit cevap (`pinnedAnswer`, form.js) ─────────────────────────────
 * Bir satırdaki düğmenin sonucu, pencerenin altına sabit: uzun listede de
 * görünüyor ve hiçbir satırı kaydırmıyor — listenin üstünde dolup boşalan
 * bir kutu, satırları parmağın altından kaydırıyordu (havuz, 2026-10-23;
 * İşim, #370). Boşken görünmüyor. */
.cw-pinned {
  position: fixed;
  inset: auto 1rem 1rem;
  /* Under the phone's drawer (20), over the page. */
  z-index: 10;
  display: grid;
  justify-items: center;
  /* The empty space around the line passes clicks through; the line itself
   * takes a tap (and closes), so a tap on it never reaches a hidden button. */
  pointer-events: none;
}

.cw-pinned__line:not(:empty) {
  pointer-events: auto;
  cursor: pointer;
}

.cw-pinned__line {
  margin: 0;
  max-width: 36rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--cw-line);
  border-radius: 12px;
  background: var(--cw-card);
  box-shadow: var(--cw-shadow-sheet);
}

/* Empty, it shows nothing but stays in the accessibility tree: a live region
 * that is not there when it fills is often not announced. */
.cw-pinned__line:empty {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

.cw-pinned__line--done {
  color: var(--cw-state-success-text);
}

.cw-pinned__line--danger {
  color: var(--cw-state-danger-text);
}

@media print {
  .cw-pinned {
    display: none;
  }
}