/* NunWorks marka sistemi — bileşen katmanı.
   tokens.css'ten SONRA yüklenir; burada HİÇBİR ham renk/ölçü yoktur, yalnız token.

   Sınıf adları BİLEREK mevcut Türkçe adlar (.dugme/.kart/.kutu/.rozet/.ust/.alt/.icerik):
   iki sitenin Razor markup'ı TEK SATIR değişmeden yeni dile geçsin diye. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--nun-font);
    font-size: var(--nun-fs-base);
    line-height: var(--nun-lh);
    color: var(--nun-text);
    background: var(--nun-bg);
    -webkit-font-smoothing: antialiased;
}

.icerik { max-width: var(--nun-container); margin: 0 auto; padding: 0 var(--nun-sp-5); }

/* ——— Başlıklar ——— */
h1, h2, h3 { font-weight: 700; line-height: var(--nun-lh-tight); color: var(--nun-text); margin: 0 0 var(--nun-sp-3); }
h1 { font-size: var(--nun-fs-2xl); letter-spacing: var(--nun-tracking-tight); }
h2 { font-size: var(--nun-fs-xl); }
h3 { font-size: var(--nun-fs-lg); }
.alt-baslik { color: var(--nun-text-soft); font-size: var(--nun-fs-lg); line-height: var(--nun-lh); }
.bos { color: var(--nun-text-soft); }

a { color: var(--nun-text); text-underline-offset: 2px; }
a:hover { color: var(--nun-accent-hover); }

/* ——— Üst bant / footer ———
   Lacivert bant ÖLDÜ: krom aydınlık ve nötr, dikkat içerikte kalır. */
.ust { background: var(--nun-bg); border-bottom: 1px solid var(--nun-border); }
.ust-icerik { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--nun-sp-6); }
/* Marka kilidi: işaret + iki tonlu wordmark (logo-brief.md bölüm 10/B).
   Ölçüler mutlak piksel DEĞİL, kuraldan türer — yazı boyu değişince oran korunur:
     · işaret yüksekliği = wordmark büyük-harf yüksekliğinin 1,4 katı
       (Manrope cap-height ≈ 0,72em → 0,72 × 1,4 ≈ 1em)
     · aralık = 1,5x, x = nokta çapı = işaret yüksekliğinin 18/78'i ≈ 0,231em
       → 1,5 × 0,231 ≈ 0,35em
   İşaret gömülü SVG'dir ve rengi currentColor'dan alır: koyu/açık zemin için ayrı varlık yok. */
.marka {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--nun-text);
    font-size: var(--nun-fs-xl);
    letter-spacing: var(--nun-tracking-tight);
    text-decoration: none;
}
.marka .isaret { height: 1em; width: auto; flex: none; }

/* İki ton: "Nun" tam opak, "Works" soluk. Bozulması yanlış kullanım maddesi 11'dir. */
.marka-yazi { font-weight: 800; }
.marka-yazi span { color: var(--nun-text-soft); font-weight: 400; }

/* Marka adından sonra gelen niteleyici ("Portal" gibi) — kilidin parçası değil, ekidir. */
.marka-ek { color: var(--nun-text-soft); font-weight: 400; }
.ust nav { display: flex; align-items: center; gap: var(--nun-sp-6); }
.ust nav a { color: var(--nun-text-soft); text-decoration: none; font-size: var(--nun-fs-sm); }
.ust nav a:hover { color: var(--nun-text); }
.kullanici { color: var(--nun-text-soft); font-size: var(--nun-fs-sm); margin-right: var(--nun-sp-1); }

.alt { border-top: 1px solid var(--nun-border); padding: var(--nun-sp-5) 0; color: var(--nun-text-soft); font-size: var(--nun-fs-sm); }

/* Footer künye + yasal linkler (14 Ağu 2026 — sanal POS uyum seti): künye solda,
   yasal sütun sağda; imza satırı tam genişlikte dipte. Dar ekranda alt alta sarar. */
.alt-icerik { display: flex; justify-content: space-between; gap: var(--nun-sp-6); flex-wrap: wrap; }
.alt-kunye { display: flex; flex-direction: column; gap: 2px; }
.alt-kunye b { color: var(--nun-text); font-weight: 600; }
.alt-kunye a { color: var(--nun-text-soft); }
.alt-kunye a:hover { color: var(--nun-text); }
.alt-yasal { display: flex; flex-direction: column; gap: var(--nun-sp-1); }
.alt-yasal a { color: var(--nun-text-soft); text-decoration: none; }
.alt-yasal a:hover { color: var(--nun-text); text-decoration: underline; }
.alt-imza { flex-basis: 100%; padding-top: var(--nun-sp-3); border-top: 1px solid var(--nun-border-soft); }

/* ——— Düğmeler ———
   birincil = koyu nötr dolgu / ikincil = çerçeve / sade = çerçevesiz. */
.dugme {
    display: inline-block;
    background: var(--nun-accent);
    color: var(--nun-text-invert) !important;
    padding: var(--nun-sp-2) var(--nun-sp-5);
    border: 1px solid var(--nun-accent);
    border-radius: var(--nun-r-md);
    font: inherit;
    font-size: var(--nun-fs-sm);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.dugme:hover { background: var(--nun-accent-hover); border-color: var(--nun-accent-hover); }
.dugme:focus-visible { outline: 2px solid var(--nun-focus); outline-offset: 2px; }
.dugme:disabled, .dugme[aria-disabled="true"] { background: var(--nun-n-400); border-color: var(--nun-n-400); cursor: not-allowed; }

.dugme.ikincil { background: var(--nun-n-0); color: var(--nun-text) !important; border-color: var(--nun-border); }
.dugme.ikincil:hover { background: var(--nun-surface-soft); border-color: var(--nun-n-400); }
.dugme.sade { background: transparent; color: var(--nun-text-soft) !important; border-color: transparent; }
.dugme.sade:hover { background: var(--nun-selected); color: var(--nun-text) !important; }
.dugme.gri { background: var(--nun-n-600); border-color: var(--nun-n-600); }

.dugme.buyuk { padding: var(--nun-sp-3) var(--nun-sp-8); font-size: var(--nun-fs-base); }
.dugme.kucuk { padding: var(--nun-sp-1) var(--nun-sp-3); font-size: var(--nun-fs-xs); }

.baglanti-dugme { background: none; border: 0; color: var(--nun-text-soft); font: inherit; font-size: var(--nun-fs-sm); cursor: pointer; padding: 0; }
.baglanti-dugme:hover { color: var(--nun-text); text-decoration: underline; }
.cikis-form { display: flex; align-items: center; margin: 0; }

/* ——— Kart ——— */
.kart {
    background: var(--nun-n-0);
    border: 1px solid var(--nun-border);
    border-radius: var(--nun-r-lg);
    padding: var(--nun-sp-6);
}
.kart h3 { margin: 0 0 var(--nun-sp-2); }
.kart p  { margin: 0; color: var(--nun-text-soft); font-size: var(--nun-fs-sm); }
.kart.yumusak { background: var(--nun-surface-soft); }

/* ——— Form ——— */
form label { display: block; margin-bottom: var(--nun-sp-4); font-size: var(--nun-fs-sm); color: var(--nun-text-soft); }
form input, form textarea, form select {
    display: block;
    width: 100%;
    margin-top: var(--nun-sp-1);
    padding: var(--nun-sp-2) var(--nun-sp-3);
    font: inherit;
    font-size: var(--nun-fs-sm);
    color: var(--nun-text);
    background: var(--nun-n-0);
    border: 1px solid var(--nun-border);
    border-radius: var(--nun-r-md);
}
form input::placeholder, form textarea::placeholder { color: var(--nun-n-500); }
form input:focus, form textarea:focus, form select:focus { outline: 2px solid var(--nun-focus); outline-offset: 0; border-color: transparent; }
form button { margin-top: var(--nun-sp-2); }

fieldset { border: 1px solid var(--nun-border); border-radius: var(--nun-r-md); margin: 0 0 var(--nun-sp-4); padding: var(--nun-sp-3) var(--nun-sp-4); }
legend { color: var(--nun-text-soft); font-size: var(--nun-fs-sm); padding: 0 var(--nun-sp-1); }
.onay-kutusu { display: flex; align-items: center; gap: var(--nun-sp-2); margin: var(--nun-sp-2) 0; color: var(--nun-text); }
.onay-kutusu input { display: inline-block; width: auto; margin: 0; }
.satir-form { display: inline-flex; gap: var(--nun-sp-2); align-items: center; margin: 0; white-space: nowrap; }
.satir-form input.kisa { width: 110px; display: inline-block; margin: 0; padding: var(--nun-sp-1) var(--nun-sp-2); font-size: var(--nun-fs-xs); }

.dar { max-width: 560px; margin: var(--nun-sp-10) auto var(--nun-sp-16); }

/* ——— Geri bildirim kutusu ——— */
.kutu { padding: var(--nun-sp-4); border-radius: var(--nun-r-md); margin-bottom: var(--nun-sp-5); font-size: var(--nun-fs-sm); border: 1px solid transparent; }
.kutu.basari { background: var(--nun-success-bg); border-color: var(--nun-success-border); color: var(--nun-success-text); }
.kutu.uyari  { background: var(--nun-warning-bg); border-color: var(--nun-warning-border); color: var(--nun-warning-text); }
.kutu.hata   { background: var(--nun-danger-bg);  border-color: var(--nun-danger-border);  color: var(--nun-danger-text); }
.kutu code { background: var(--nun-n-0); border: 1px solid var(--nun-border); border-radius: var(--nun-r-sm); padding: 2px var(--nun-sp-2); font-family: var(--nun-font-mono); font-size: var(--nun-fs-xs); }

/* ——— Tablo (portal listeleri) ——— */
table { width: 100%; border-collapse: collapse; font-size: var(--nun-fs-sm); }
th { text-align: left; color: var(--nun-text-soft); font-weight: 600; border-bottom: 1px solid var(--nun-border); padding: var(--nun-sp-2) var(--nun-sp-3); }
td { border-bottom: 1px solid var(--nun-border-soft); padding: var(--nun-sp-2) var(--nun-sp-3); }
tbody tr:hover td { background: var(--nun-surface-soft); }
td.kirpik { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ——— Bölümler (editoryal katman) ———
   Marka "derinlik yarışı" diyor: sıkışık özellik ızgarasıyla anlatılmaz.
   Bu katmanın tek işi TİPOGRAFİK NEFES — geniş boşluk, dar okuma kolonu, sakin başlık. */

/* Bölüm DİKEY boşluğun sahibidir, yatay boşluğun DEĞİL — yatay dolgu `.icerik`in işidir.
   Bu ayrım iki kullanımı birden mümkün kılar:
     <section class="icerik bolum">        → sıradan bölüm (tek etiket)
     <section class="bolum"><div class="icerik">  → tam genişlikte zeminli bant
   `padding: X 0` yazılsaydı ikinci sınıf birincinin yatay dolgusunu ezer, mobilde
   içerik ekran kenarına yapışırdı. */
.bolum { padding-top: var(--nun-sp-16); padding-bottom: var(--nun-sp-16); }
.bolum + .bolum { border-top: 1px solid var(--nun-border-soft); }
.kolon-dar { max-width: 680px; }              /* okuma kolonu — satır boyu 60-75 karakter */
.kolon-orta { max-width: 780px; margin: 0 auto; }

/* Aynı ayrım kahraman için de geçerli (yukarıdaki gerekçe). */
.kahraman { padding-top: var(--nun-sp-16); padding-bottom: var(--nun-sp-12); }
.kahraman h1 {
    font-size: var(--nun-fs-3xl);
    font-weight: 800;
    letter-spacing: var(--nun-tracking-tight);
    line-height: var(--nun-lh-tight);
    max-width: 720px;
    margin: 0 0 var(--nun-sp-5);
}
.kahraman .alt-baslik { max-width: 620px; margin: 0 0 var(--nun-sp-8); }
.kahraman-dugmeler { display: flex; gap: var(--nun-sp-3); flex-wrap: wrap; }

/* "Bir ERP değildir. Bir CRM değildir..." — markanın asli retorik aracı.
   Satırlar tek tek okunsun diye liste DEĞİL, ayrı satırlar hâlinde dizilir. */
.degildir { list-style: none; margin: 0 0 var(--nun-sp-8); padding: 0; }
.degildir li {
    font-size: var(--nun-fs-xl);
    font-weight: 600;
    line-height: 1.45;
    color: var(--nun-n-500);
    padding: var(--nun-sp-1) 0;
}
.degildir li:last-child { color: var(--nun-text-soft); }

/* Kreşendo: dört soru bir merdivendir — ilk üçü soluk, SONUNCUSU tam koyu.
   Alt başlıktaki tekil "bir soru" odur; diğerleri ona çıkan basamaklardır.
   Sıra ve ağırlık KURALDIR, biçim tercihi değil (pages/neden-nunworks.md).
   "Bir ERP değildir…" listesi bu değiştiriciyi KULLANMAZ — orada dördü de eşit soluktur. */
.degildir.kresendo li:last-child { color: var(--nun-text); }

/* Bölümü bitiren kalın cümle. `.degildir`den sonra gelmek ZORUNDA değildir —
   soru bloğundan sonra da, kapanış bölümünde de aynı ağırlıkta durur. */
.sonuc {
    font-size: var(--nun-fs-xl);
    font-weight: 700;
    line-height: 1.45;
    color: var(--nun-text);
    max-width: 680px;
    margin: 0;
}
.degildir + .sonuc { margin-top: 0; }

/* Soluk gövde içinde vurgulanan parça tam koyu olur. */
.alt-baslik strong { color: var(--nun-text); font-weight: 600; }

/* Manifesto/alıntı — sayfanın sesini alçalttığı yer. Tırnak yok, sol çizgi yok:
   ayrım yalnız boşluk ve ölçüyle kurulur. */
.manifesto { background: var(--nun-surface-soft); }
.manifesto .soru {
    font-size: var(--nun-fs-2xl);
    font-weight: 700;
    line-height: var(--nun-lh-tight);
    letter-spacing: var(--nun-tracking-tight);
    margin: 0 0 var(--nun-sp-6);
}
.manifesto p { font-size: var(--nun-fs-lg); line-height: 1.75; color: var(--nun-text-soft); margin: 0 0 var(--nun-sp-4); max-width: 680px; }
.manifesto .imza { font-size: var(--nun-fs-sm); color: var(--nun-n-500); margin-top: var(--nun-sp-6); }

.slogan {
    font-size: var(--nun-fs-2xl);
    font-weight: 800;
    letter-spacing: var(--nun-tracking-tight);
    line-height: var(--nun-lh-tight);
    color: var(--nun-text);
    margin: 0;
}
.slogan span { color: var(--nun-n-500); font-weight: 400; display: block; font-size: var(--nun-fs-lg); letter-spacing: 0; margin-top: var(--nun-sp-3); }

/* ——— Rezerve koltuk sözleşmesinin görsel dili ———
   Ürünün kendi ilkesi: her yeteneğin yeri bugünden bellidir, inşası talebe bağlıdır.
   Üç durum ve karşılıkları SABİTTİR; sayfalar bunları yeniden tanımlamaz.
   TARİH hiçbir yerde yazılmaz (voice.md/5) — rezerve olanın altyazısı "yeri hazır"dır. */

.durum {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex: none;
}
.durum.dolu { background: var(--nun-accent); }                              /* bugün çalışıyor */
.durum.satin { background: transparent; border: 2px solid var(--nun-n-700); } /* satın alınır */
.durum.rezerve { background: transparent; border: 2px dashed var(--nun-n-400); } /* yeri hazır */

.rezerve-kart {
    background: transparent;
    border: 1.5px dashed var(--nun-n-400);
    border-radius: var(--nun-r-lg);
    padding: var(--nun-sp-6);
}
.rezerve-kart h3,
.rezerve-kart .ad { color: var(--nun-n-700); }

/* "yeri hazır" etiketi — küçük, sessiz, her zaman aynı biçimde. */
.rezerve-etiket {
    font-size: var(--nun-fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nun-n-500);
}

/* ——— Rozet ——— */
.rozet { display: inline-block; padding: 2px var(--nun-sp-3); border-radius: var(--nun-r-pill); font-size: var(--nun-fs-xs); font-weight: 600; border: 1px solid transparent; }
.rozet.onay     { background: var(--nun-success-bg); border-color: var(--nun-success-border); color: var(--nun-success-text); }
.rozet.bekliyor { background: var(--nun-warning-bg); border-color: var(--nun-warning-border); color: var(--nun-warning-text); }
.rozet.red      { background: var(--nun-danger-bg);  border-color: var(--nun-danger-border);  color: var(--nun-danger-text); }
.rozet.notr     { background: var(--nun-surface); border-color: var(--nun-border); color: var(--nun-text-soft); }