@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/bayi-varlik/poppins-400-latin.3dc5d0c52428.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/bayi-varlik/poppins-400-latinext.1fae5e73d278.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/bayi-varlik/poppins-500-latin.289e0afc8be7.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/bayi-varlik/poppins-500-latinext.f8f0c28661c8.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/bayi-varlik/poppins-600-latin.872e86291859.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/bayi-varlik/poppins-600-latinext.72efc6a32cfd.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  --b2b-surface:#ffffff;
  --b2b-ink:#181c32;
  --b2b-ink-soft:#3f4254;
  --b2b-input-ink:#5e6278;
  --b2b-placeholder:#a1a5b7;
  --b2b-muted:#b5b5c3;
  --b2b-solid:#f5f8fa;
  --b2b-solid-active:#eef3f7;
  --b2b-line:#e4e6ef;
  --b2b-line-soft:#eff2f5;
  --b2b-primary:rgb(23 181 157);
  --b2b-primary-deep:rgb(13 133 116);
  --b2b-primary-active:#454545;
  --b2b-danger:#f1416c;
  --b2b-danger-ink:#912741;
  --b2b-danger-soft:#fcd9e2;
  --b2b-danger-line:#fbc6d3;
  --b2b-ok:#50cd89;
  --b2b-ok-ink:#205237;
  --b2b-ok-soft:#dcf5e7;
  --b2b-ok-line:#cbf0dc;
  --b2b-warn-ink:#665000;
  --b2b-warn-soft:#fff4cc;
  --b2b-warn-line:#ffeeb3;
  --b2b-radius:.475rem;
  --b2b-radius-lg:.625rem;
  --b2b-shadow:0 .1rem 1rem .25rem rgba(0, 0, 0, .05);
  --b2b-block-gap:2.5rem;
  --b2b-card-pad:2.5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:12px;overflow-x:hidden}
@media (min-width:992px){html{font-size:13px}}
body{
  margin:0;background:var(--b2b-surface);color:var(--b2b-ink);
  font-family:Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:1rem;font-weight:400;
  line-height:1.5;-webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0 0 .5rem;font-weight:600;line-height:1.2;color:var(--b2b-ink)}
h1{font-size:1.75rem}
h2{font-size:1.5rem;margin-top:2.5rem}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.25rem}
li{margin:.25rem 0}
/* Eski portal bağlantıların altını çizmiyor (`a{color:#17B59D;text-decoration:none}`) ve o
   korunuyor. Renk bir basamak koyu: referansın `#17B59D`si beyaz üstünde 2,58:1 ve WCAG AA küçük
   metin için 4,5 istiyor; `--b2b-primary-deep` (#0D8574) aynı tonun 4,54:1 veren en açık hâli.
   Ölçüm ve gerekçe `src/ui/tokens.ts` ile `docs/b2b/tasarim-referansi-2026-09-12.md`de. */
a{color:var(--b2b-primary-deep);text-decoration:none;transition:color .2s ease}
a:hover,a:focus{color:var(--b2b-primary-active)}
strong{font-weight:600}
code{font-size:.9em;background:var(--b2b-solid);border-radius:.325rem;padding:.1rem .3rem}
pre{
  margin:0 0 1rem;padding:1rem;overflow-x:auto;
  background:var(--b2b-solid);border-radius:var(--b2b-radius);
}
pre code{background:none;padding:0}
.muted{color:var(--b2b-placeholder)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--b2b-primary-deep);outline-offset:2px}


.b2b-auth{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.5rem;
  background-image:url(/bayi-varlik/sketchy-1-14.82c6d7d00b11.png);
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  background-attachment:scroll;
}
@media (min-width:992px){
  .b2b-auth{padding-bottom:5rem;background-attachment:fixed}
}
.b2b-auth__brand{display:block;max-width:100%;margin-bottom:3rem}
/* Ölçü **genişlikten** veriliyor, yükseklikten değil: eski portal `height:60px` yazıyor ve 390
   piksellik ekranda logo sayfanın dolgusunun dışına taşıyor (ölçüldü: kap 330 piksel, logo 342,84).
   `height` + `max-width:100%` ikilisi ise taşmayı kapatırken **oranı bozuyor** — logo 330x60
   çiziliyor, yani yüzde 4 yanlış. Genişlik verilip yükseklik `auto` bırakıldığında masaüstünde
   birebir aynı ölçü (343x60) çıkıyor, telefonda logo küçülüyor ve oran hiç bozulmuyor. */
.b2b-auth__brand img{display:block;width:343px;max-width:100%;height:auto}
.b2b-card{
  width:100%;max-width:500px;
  background:var(--b2b-surface);border-radius:var(--b2b-radius);box-shadow:var(--b2b-shadow);
  padding:var(--b2b-card-pad);
}
@media (min-width:992px){:root{--b2b-card-pad:3.75rem}}
.b2b-card--wide{max-width:550px}
.b2b-card__head{text-align:center;margin-bottom:2.5rem}
.b2b-card__head h1{margin:0 0 .75rem}
.b2b-card__lede{
  margin:0;font-size:1.25rem;font-weight:500;color:var(--b2b-muted);
}
.b2b-card__lede a{font-weight:600}
/* Kartın açılış cümlesi (kayıt ve başvuru ekranlarındaki giriş paragrafı) ile ilk alan arasındaki
   boşluk referansın alan ritmiyle aynı olsun: paragrafın kendi 1rem'i o ritmi kırıyordu. */
.b2b-card > p,.b2b-panel > p:first-of-type{margin-bottom:2.5rem}
/* Kayıt sayfası eski portalda iki sütun: solda logo ve girişe dönüş bağlantısı, sağda kart. */
.b2b-split{min-height:100vh;display:flex;flex-direction:column}
.b2b-split__aside{
  display:flex;flex-direction:column;justify-content:center;
  padding:2.5rem 2.5rem 0;
}
.b2b-split__aside img{display:block;width:114px;max-width:100%;height:auto;
  margin-bottom:2.5rem}
.b2b-split__aside p{
  margin:0;font-size:1.25rem;font-weight:500;
}
.b2b-split__main{display:flex;justify-content:center;padding:2.5rem}
@media (min-width:992px){
  .b2b-split{flex-direction:row;align-items:stretch}
  /* İki sütun **eşit değil** ve bu referansın kendi davranışı: eski portal iki sütuna da
     `flex:1 1 auto` veriyor, yani taban genişlik içeriğin kendisi. Kartı taşıyan sağ sütun
     doğal olarak geniş kalıyor (ölçülen: sol 499,2 / sağ 780,8 piksel). `flex:1 1 0` yazılsaydı
     sütunlar yarı yarıya olur ve kart 96 piksel sağa kayardı. */
  .b2b-split__aside{flex:1 1 auto;padding:3.75rem;align-items:flex-start}
  .b2b-split__aside img{width:229px;margin-bottom:3.75rem}
  .b2b-split__main{flex:1 1 auto;align-items:center;padding:2.5rem}
}
/* Kartın soldaki sütundan nefes payı — eski portalın `ms-xl-20`si (5rem = 65 piksel). */
@media (min-width:1200px){.b2b-split__main .b2b-card{margin-left:5rem}}
/* Kayıt sayfasında düğme **tam genişlikte değil**: referansta `text-center` içinde, kendi
   genişliğinde ve ortalanmış. Girişte tam genişlikte (`w-100`) ve ikisi de korunuyor —
   referansın iki sayfası bu konuda birbirinden farklı ve her sayfa kendi ölçüsünü alıyor. */
.b2b-actions{text-align:center}


.b2b-topbar{background:var(--b2b-surface);border-bottom:1px solid var(--b2b-line)}
.b2b-topbar__inner{
  max-width:78rem;margin:0 auto;padding:1rem 2.5rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
}
.b2b-topbar__brand{display:flex;align-items:center}
.b2b-topbar__brand img{display:block;width:229px;max-width:100%;height:auto}
.b2b-topbar nav{display:flex;flex-wrap:wrap;gap:.5rem}
.b2b-topbar nav a{
  padding:.5rem .9rem;border-radius:var(--b2b-radius);
  font-size:1.075rem;font-weight:500;color:var(--b2b-ink-soft);
}
.b2b-topbar nav a:hover{background:var(--b2b-solid);color:var(--b2b-primary-deep)}
.b2b-topbar nav a[aria-current="page"]{
  background:var(--b2b-solid);color:var(--b2b-primary-deep);font-weight:600;
}
.b2b-topbar__right{
  margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  font-size:1.075rem;color:var(--b2b-placeholder);
}
.b2b-main{max-width:78rem;margin:0 auto;padding:2.5rem 2.5rem 5rem}
.b2b-main > h1{margin-bottom:2.5rem}
.b2b-panel{
  background:var(--b2b-surface);border-radius:var(--b2b-radius);box-shadow:var(--b2b-shadow);
  padding:2.5rem;margin-bottom:2.5rem;
}
.b2b-panel > *:last-child{margin-bottom:0}
.b2b-panel > h2:first-child,.b2b-panel > h3:first-child{margin-top:0}
.b2b-status{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 0 2.5rem}


.form{margin:0}
.field{margin-bottom:var(--b2b-block-gap)}
.field__label{
  display:block;margin-bottom:.5rem;
  font-size:1.075rem;font-weight:600;color:var(--b2b-ink);
}
.input,select,textarea{
  display:block;width:100%;
  min-height:calc(1.5em + 1.65rem + 2px);padding:.825rem 1.5rem;
  font-family:inherit;font-size:1.15rem;font-weight:500;
  line-height:1.5;color:var(--b2b-input-ink);
  background:var(--b2b-solid);border:1px solid var(--b2b-solid);border-radius:var(--b2b-radius-lg);
  appearance:none;transition:color .2s ease,background-color .2s ease;
}
textarea{min-height:7rem;resize:vertical}
.input::placeholder,textarea::placeholder{color:var(--b2b-placeholder);opacity:1}
.input:hover,.input:focus,.input:active,textarea:focus,select:focus{
  background:var(--b2b-solid-active);border-color:var(--b2b-solid-active);outline-offset:2px;
}
.input--error,.field--error .input{border-color:var(--b2b-danger)}
/* Dolu düğmenin **kenarlığı yok** ve dolgusu bir piksel fazla: eski portalın kendi kuralı
   (`.btn:not(.btn-outline)...{border:0;padding:calc(.75rem + 1px) calc(1.5rem + 1px)}`). Sebebi
   ölçülebilir: kenarlıklı ve kenarlıksız düğmeler böyle **aynı** yüksekliği tutuyor. Kenarlığı
   olduğu gibi bırakıp dolguyu da kopyalayınca düğme 47,86 piksel çıkıyordu; referans 45,86 ve fark
   tam olarak iki kenarlık. Tasarım testi bunu yakaladı. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:calc(.825rem + 1px) calc(1.75rem + 1px);
  font-family:inherit;font-size:1.15rem;font-weight:500;
  line-height:1.5;text-align:center;cursor:pointer;
  color:#fff;background:var(--b2b-primary);border:0;
  border-radius:var(--b2b-radius-lg);
  transition:color .2s ease,background-color .2s ease,border-color .2s ease;
}
.btn:hover,.btn:focus,.btn:active{color:#fff;background:var(--b2b-primary-active)}
.btn--block{width:100%}
/* Çerçeveli düğme kenarlığını taşıyor, o yüzden dolgusundan o bir piksel geri alınıyor. */
.btn--outline{
  padding:.825rem 1.75rem;
  color:var(--b2b-ink-soft);background:var(--b2b-surface);border:1px solid var(--b2b-line);
}
.btn--outline:hover,.btn--outline:focus{
  color:#fff;background:var(--b2b-primary-active);border-color:var(--b2b-primary-active);
}
.btn--ghost{color:var(--b2b-primary-deep);background:none}
.btn--ghost:hover,.btn--ghost:focus{color:#fff;background:var(--b2b-primary-active)}
.btn--sm{padding:calc(.55rem + 1px) calc(1rem + 1px);font-size:.95rem}
.btn--outline.btn--sm{padding:.55rem 1rem}
.btn--lg{padding:calc(1rem + 1px) calc(2.25rem + 1px)}
form.inline{display:inline-flex;align-items:center;gap:.5rem;margin:0}
/* Anahtar üretme satırı: etiket alanı ve düğme yan yana, dar ekranda alt alta. */
.form--inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}
.form--inline .field{flex:1 1 18rem;margin-bottom:0}


.notice{
  margin:0 0 2.5rem;padding:1rem 1.25rem;
  border:1px solid transparent;border-radius:var(--b2b-radius);font-weight:500;
}
.notice > *:last-child{margin-bottom:0}
.notice--error{
  color:var(--b2b-danger-ink);background:var(--b2b-danger-soft);border-color:var(--b2b-danger-line);
}
.notice--success{
  color:var(--b2b-ok-ink);background:var(--b2b-ok-soft);border-color:var(--b2b-ok-line);
}
/* Alanın altındaki hata cümlesi aynı sınıfı taşıyor ama bir kutu değil, bir satır. */
.field .notice{margin:.5rem 0 0;padding:0;border:0;background:none;
  color:var(--b2b-danger-ink);font-size:.95rem}
.badge{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .8rem;
  border-radius:var(--b2b-radius-lg);
  font-size:.95rem;font-weight:600;white-space:nowrap;
  color:var(--b2b-ink-soft);background:var(--b2b-solid);
}
.badge--ok{color:var(--b2b-ok-ink);background:var(--b2b-ok-soft)}
.badge--warn{color:var(--b2b-warn-ink);background:var(--b2b-warn-soft)}
.badge--danger{color:var(--b2b-danger-ink);background:var(--b2b-danger-soft)}
.badge--solid{color:#fff;background:var(--b2b-primary)}
.table-scroll{overflow-x:auto;margin:0 0 2.5rem;
  border:1px solid var(--b2b-line);border-radius:var(--b2b-radius);background:var(--b2b-surface)}
.table{width:100%;border-collapse:collapse;color:var(--b2b-ink)}
.table thead th{
  padding:.75rem 1rem;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--b2b-line);
  font-size:.95rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--b2b-muted);
}
.table td{padding:.75rem 1rem;border-bottom:1px solid var(--b2b-line-soft);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--b2b-solid)}
@media (max-width:40rem){
  .table--stacked thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .table--stacked tr{display:block;padding:.75rem;border-bottom:1px solid var(--b2b-line-soft)}
  .table--stacked td{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;
    border:0;text-align:right}
  .table--stacked td::before{content:attr(data-label);flex-shrink:0;text-align:left;
    font-weight:500;color:var(--b2b-ink-soft)}
}