/* AUTO-GENERATED — edit the sources, then run build-css.sh. */

/* ====== 00-tokens.css ====== */
/* ============================================================
   NND Design Tokens — SINGLE SOURCE OF TRUTH
   All colour / spacing / typography / border values live here.
   Never repeat a raw hex/px anywhere else; always use var(--...).
   Palette blends a clean neutral base with faint paper warmth
   (modern x retro). Change a value here → it propagates site-wide.
   ============================================================ */
:root {
  /* Surfaces & ground */
  --bg-page:      #edece7;   /* outer ground: calm neutral, faint warmth */
  --surface:      #ffffff;   /* main, card: clean white (modern) */
  --surface-2:    #faf9f6;   /* slightly raised / secondary surface */
  --bg-soft:      #f4f3ee;   /* header, light box */
  --bg-footer:    #edece6;
  --bg-quote:     #f7f6f2;
  --hairline:     #ece9e1;   /* thin modern divider (instead of hard border) */

  /* Text — warm-neutral charcoal */
  --ink:          #2c2b28;   /* body */
  --ink-muted:    #57554e;
  --ink-soft:     #7d7a70;
  --ink-strong:   #17160f;   /* link hover */

  /* Link & accent (max 1 accent) */
  --link:         #2f66c8;   /* classic blue */
  --link-hover:   var(--ink-strong);
  --accent:       #2f6cb0;   /* ink-blue accent (desaturated) */
  --accent-dark:  #244f83;
  --on-accent:    #fbfbf8;

  /* Borders — visible, warm-neutral */
  --border:       #d7d5cb;
  --border-soft:  #e4e2d8;
  --border-input: #b6b3a6;
  --border-strong:#a8a598;   /* hard-shadow / emphasis border */

  /* Status colours (semantic — separate from accent) */
  --highlight:    #ffeb3b;   /* warning yellow */
  --success-bg:   #dcedc8;
  --success:      green;
  --danger:       red;
  --comment-bg:   #edf9e1;
  --comment-border:#cfdebe;
  --msg-bg:       #e3f1d4;

  /* Signature spot accent — "proofreader red" (marks/emphasis only) */
  --mark:         #b23a2e;   /* vermilion; rare use */
  --mark-bg:      #f7e9e6;

  /* Shape — soft medium radius */
  --radius:       0.5rem;   /* 8px  — 4 ızgarası */
  --radius-sm:    0.25rem;  /* 4px  */
  --radius-lg:    1rem;     /* 16px */
  --radius-pill:  999px;
  --maxw:         1040px;

  /* CONTROL SIZE SCALE — shared rhythm for button/input/select/checkbox */
  /* 4 ızgarasına hizalı, rem — md yüksekliği 44px: önerilen dokunma hedefi */
  --control-h-sm: 2.25rem; --control-px-sm: 0.75rem; --control-fs-sm: var(--text-sm);
  --control-h-md: 2.75rem; --control-px-md: 1rem;    --control-fs-md: 1rem;
  --control-h-lg: 3.25rem; --control-px-lg: 1.25rem; --control-fs-lg: var(--text-lg);
  /* active (default md) — components override this trio via a size modifier */
  --control-h: var(--control-h-md); --control-px: var(--control-px-md); --control-fs: var(--control-fs-md);

  /* Motion */
  --motion-fast: .1s ease; --motion-normal: .18s ease;

  /* Spacing scale — 4px ızgarası, REM cinsinden (16px kök tabanı).
     rem: kullanıcı tarayıcı yazı boyutunu büyütünce boşluklar da büyür (erişilebilirlik).
     Kök boyut responsive (≥800px'te 1.125rem) → boşluk tipografiyle birlikte ölçeklenir.
     Elle px yazma; daima bu token'ları kullan. */
  --space-05: 0.125rem; /* 2px — yalnız optik mikro düzeltme */
  --space-15: 0.375rem; /* 6px — yarım adım */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;

  /* Typography scale (modular) */
  --text-xs: .78rem; --text-sm: .875rem; --text-base: 1rem;
  --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.8rem; --text-3xl: 2.4rem;
  --lh-tight: 1.25; --lh-body: 1.6;
  --weight-normal: 400; --weight-medium: 500; --weight-bold: 700;

  /* Shadow scale — soft layered elevation */
  --shadow-1: 0 1px 2px rgba(24,20,10,.05);
  --shadow-2: 0 2px 8px -2px rgba(24,20,10,.10);
  --shadow-elev: 0 1px 2px rgba(24,20,10,.04), 0 6px 16px -6px rgba(24,20,10,.12);  /* card */
  --shadow-menu: 0 10px 30px -8px rgba(24,20,10,.18), 0 2px 6px rgba(24,20,10,.06); /* dropdown/modal */
  --shadow-button: 0 1px 2px rgba(24,20,10,.08);
  --shadow-hard: 2px 2px 0 var(--border-strong);   /* retro hard-shadow — letter tile only (spice) */
  --top-light: inset 0 1px 0 rgba(255,255,255,.35);  /* letterpress top highlight (subtle) */

  /* Focus ring — SINGLE SOURCE, identical on every interactive element */
  --focus-ring: 0 0 0 3px rgba(47,108,176,.35);
  --focus-line: 2px solid var(--accent);

  /* Z-index scale (systemic layers) */
  --z-nav: 100; --z-dropdown: 200; --z-sticky: 300; --z-overlay: 800; --z-modal: 900; --z-toast: 1000;

  /* Font families */
  --font-body:    -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-quote:   Georgia,"Times New Roman",serif;
  --font-display: "Fraunces",Georgia,"Times New Roman",serif;  /* SIGNATURE: headwords / display serif */
}

/* ====== 10-base.css ====== */
/* ===== RESET + BASE + ELEMENTS ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
fieldset, img, legend { border: 0; }

html {
  font-size: 16px;
  font-family: var(--font-body);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
}
body { line-height: 1.6em; font-weight: 400; color: var(--ink); background-color: var(--bg-page); }
select { background-color: var(--bg-page); }

article, aside, footer, header, header img, header svg, label, main { display: block; }

a { background-color: transparent; color: var(--link); text-decoration: none; }
a:active, a:hover { outline: 0; color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.2; margin: .5em 0; }
h1 { font-size: 1.6em; } h2 { font-size: 1.5em; } h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; } h5 { font-size: 1.2em; }
p { margin: 5px 0 10px; }

ol, ul { padding-left: 25px; }
ul { list-style-type: square; }
ol li, ul li { line-height: 1.8rem; }

pre {
  overflow: auto; font-family: var(--font-mono); padding: 10px; font-size: 1em;
  border: 1px solid var(--border-soft); background-color: #fafafa;
}

table {
  width: 100%; border-collapse: collapse; border-spacing: 0;
  border: 1px solid var(--border); margin-bottom: 1em;
}
td, th { padding: 5px; text-align: left; }
th { background-color: var(--border-soft); }
tr { border-bottom: 1px solid var(--border); }
tr:hover { background-color: var(--bg-quote); }

label { margin-bottom: .3em; }
label.noblock { padding: 4px 6px; margin: .2em 0; }
input, select, textarea {
  color: inherit; font: inherit; padding: .5em; margin: 0 5px 5px 0;
  border: 1px solid var(--border-input); box-shadow: inset 0 1px 3px var(--border);
  border-radius: var(--radius); display: inline-block; font-size: 100%;
  line-height: normal; max-width: 100%;
}
select { font-size: 100%; height: 2.5em; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { height: auto; }
.comcon, textarea { overflow: auto; }

@media print { .social { display: none; } }

/* ====== 20-layout.css ====== */
/* ===== LAYOUT: grid, header, main, footer, nav, breadcrumb ===== */
.row:after { content: ""; clear: both; display: block; }
[class*=col-] { padding: 1px; float: left; width: 100%; }
.comments, footer .row, .c-header .row, main { max-width: var(--maxw); margin: 0 auto; }

/* FAZ-2.5: çıplak `header` seçicisi TÜM <header> öğelerine sızıyordu — DS'in
   <header class="c-entry"> (kelime başlığı) ve <header class="c-dialog__head">
   bileşenleri site başlığı zemini/paddingi alıyordu. Site başlığına kapsandı. */
.c-header { z-index: 1; }
.c-header form { margin: 0; }
.c-header #kelime { margin: 0; }
.c-header .list-horizontal { margin-top: 6px; text-align: center; font-size: .9rem; }
.c-header .list-horizontal a { color: var(--ink) !important; }

main {
  background-color: var(--surface); padding: 10px 20px 40px;
  min-height: 550px; word-wrap: break-word;
}

footer {
  font-size: .9rem; padding: 15px 0; background-color: var(--bg-footer);
  border-top: 1px solid var(--border); margin-top: 21px; color: var(--ink-muted);
}
footer ul li { line-height: 1.5rem; }
footer .logo { width: 265px; height: 45px; }

.breadcrumb {
  margin-bottom: 5px; min-height: 27px; font-size: .875em;
  color: var(--ink-muted); border-bottom: 1px solid var(--border);
}
.breadcrumb div { display: inline-block; margin: 2px; }

/* Mobil nav (off-canvas) */
.toggle { display: none; width: 40px; height: 40px; left: 6px; top: 12px; position: absolute; }
.toggle:after {
  content: ''; display: block; width: 27px; height: 3px; background: var(--ink-soft);
  margin: 5px; box-shadow: 0 8px 0 var(--ink-soft), 0 16px 0 var(--ink-soft);
}
nav .list-vertical { display: inline-block; overflow: auto; }

/* Listeler */
.list-horizontal, .list-vertical { list-style-type: none; }
.list-horizontal li { display: inline-block; }
.list-horizontal li a { padding: 2px; }
.list-vertical li { width: 100%; }
.list-vertical li a { display: block; padding: 2px 0; }
.list-horizontal li a:before, .list-vertical li a:before {
  content: "\00bb"; padding-right: 5px; color: #bbb;
}
.liste4 { margin: 10px 0; }
.liste4 li { float: left; width: 25%; }

/* ===== RESPONSIVE ===== */
@media (min-width: 800px) {
  html { font-size: 1.125rem; }
  .col-1{width:8.33%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}
  .col-5{width:41.66%}.col-6{width:50%}.col-7{width:58.33%}.col-8{width:66.66%}
  .col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}
  .col-7-10{width:70%}.col-3-10{width:30%}
  form, label { margin: 5px 0; }
  .button, .form, button { padding: .5em 1em; }
  [class*=col-] { padding: 5px; }
  .word { min-width: 33%; }
}
@media (max-width: 799px) {
  /* FAZ-2.5: `nav { position:fixed }` KALDIRILDI — her <nav>'ı (breadcrumb dahil)
     sayfadan koparıp içeriğin üstüne bindiriyordu. Alt çubuk kendi konumunu yönetir. */
  .toggle { position: fixed; }
  html { font-size: 1rem; }
  header [class*=col-] { padding: 5px 0; }
  .m2 { width: 50%; }
  .liste4 li { width: 100%; float: none; }
  .word { min-width: 48%; }
  header img, header svg { margin: 0 auto; }
  /* FAZ-2.5: 2018 off-canvas nav kuralları KALDIRILDI — her <nav>'ı ekran dışına itiyordu
     (c-altbar/c-nav dahil). Mobil gezinme artık .c-altbar (alt çubuk). */
}
@media (max-width: 480px) {
  .inb { display: block; }
  .logo { max-width: 70%; }
  .social { display: block; text-align: center; }
  .autocomplete { width: 100%; text-align: center; }
  header #kelime { width: 80%; margin: 0 auto; }
  .autocomplete-items { left: 5%; right: 0; width: 80%; text-align: left; }
  h1,h2,h3,h4,h5,h6 { line-height: 1.4; margin: 10px 0; }
  h1 { font-size: 1.4em; } h2 { font-size: 1.3em; } h3,h4,h5 { font-size: 1.2em; }
  td, th { padding: 4px 3px; }
}

/* ====== 30-components.css ====== */
/* ===== BİLEŞENLER ===== */

/* Buton */
.button, button {
  overflow: visible; font: inherit; letter-spacing: 1px; border: 0; line-height: normal;
  white-space: nowrap; padding: .5em; color: var(--on-accent); background-color: var(--accent);
  border-radius: var(--radius); font-size: 100%; text-align: center;
}
.button, button, select { text-transform: none; display: inline-block; }
.toggle, button, html input[type=button], input[type=submit] { cursor: pointer; }
.button:focus, .button:hover { opacity: .9; }

/* Arama butonu (ikon) */
.btnArama {
  min-width: 32px; background-position: center !important; background-repeat: no-repeat !important;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACHElEQVRYR+3Wy+tNURTA8c/PY+CVx0RmlOSZkEjKiPwDDCTPKImxJCUDygzlGfIa8BeQgQy8YiAKUQxNRESSV6v20e127t3nHPf6TX67bt06e6313es9YJDPwCDbNwRQ1QNTsQUrMQvj8BnPcRPn8bZJOHMAo3EYOzCii4EfOIE9+FoHpBvAZNzAfISBq7iMx/iACViEdViPkXiC1XhXFaITQLz8bjL+AmvxtIvS2biGOQliWVVPdAI4il0I48vxvsKLJuIO5uIYdleQKS3DSLhXSXgBnlVRlO7MTB4Yhhl4k5Mt88AB7McFbM4pKPl+GttwMOnpqqIM4B6WppK71QBgBW7jQdJTG+AjxmNSyva6DGNTj/iU9NQG+ImIYfx+17We7n9PZZnVURaCXnngC8IbtT1wH0t6kAOPsLgJQGTvvh5UwSHsbQIwLfWBiP/CTAds11/0geGI/6+bAITMcez8h054Mg2wnP2OC8kYRD+Yh5dYU2EWXEfMhDgxuDYgKqp2EhYCU9Ksj94e0zAm4RVEchWVUkzDMBbTsPXE3Y05iNw+EJ44gu2IuBYn8qNV9hfOpJ1ha8u9LEQOoNA1PW1Eq5KbR+FbypHYiM6mxA19p9IsKGS7QlQFaI9jbEcRlrJTC6IpQJXcquSJfgEEYJknLqbE/PuAfgK0Q0SibsKlVvf1G6CAiI35Ic61x+5/ADRuRLlE68n3IQ/8AUVecCGKkZUDAAAAAElFTkSuQmCC');
}

/* Autocomplete */
.autocomplete { position: relative; width: 90%; display: inline-block; }
.autocomplete-items {
  position: absolute; box-shadow: 0 4px 10px 0 rgba(0,0,0,.25);
  border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 12px; right: 0; width: 80%;
}
.autocomplete-items div {
  padding: 4px; cursor: pointer; background-color: var(--surface);
  border-bottom: 1px solid var(--border-soft); font-size: 90%;
}
.autocomplete-items div a, .autocomplete-items div a:active, .autocomplete-items div a:visited { color: var(--ink-strong); }
.autocomplete-items div:hover { background-color: var(--bg-soft); }
.autocomplete-active { background-color: var(--accent-dark) !important; }
.autocomplete-active a { color: var(--on-accent) !important; }

/* Kelime rozeti */
.word { display: inline-block; padding: 4px; vertical-align: top; }
.word:before { content: "\00bb"; padding-right: 5px; color: #bbb; }

/* Kutu / mesaj / durum */
.kutu { background-color: var(--surface); padding: 10px; border-radius: var(--radius); }
.mesaj { padding: 10px; margin: 15px 0; border-radius: var(--radius); }
.rounded { border-radius: var(--radius); }
.uyari { background-color: var(--highlight); }
.basarili { background-color: var(--success-bg); color: #000; }
.basarili p, .uyari p { padding: 5px 0; margin: 0; }
.ikon { font-size: 2rem; vertical-align: bottom; }

/* Anlam / okunuş */
.anlami { font-size: 1.125rem; padding: 5px 0; }
.okunus { font-size: .8rem; color: var(--ink-muted); vertical-align: bottom; margin-right: 5px; }
.bayrak { margin-right: 5px; vertical-align: middle; }
.oynat { padding: 8px 12px !important; background-color: var(--border-soft); font-size: .875rem; }

/* Favori */
#favekle { color: #000; margin: 5px 0; font-size: .875rem; }
#favekle a { padding: 6px 10px; border-radius: 5px; }

/* Alıntı (blockquote) */
blockquote { background: var(--bg-quote); border-radius: 5px; padding-bottom: 5px; }
blockquote p { padding: 5px; font-family: var(--font-quote); margin: 0; }
blockquote p::before { content: '\201C'; }
blockquote p::after { content: '\201D'; }
cite { color: var(--ink-muted); margin-left: 15px; font-size: .875rem; }

/* Yorumlar */
.comments { padding: 10px 0; }
.comments legend { color: var(--ink-soft); font-weight: 500; font-style: italic; font-size: .9rem; }
.comcon {
  background-color: var(--comment-bg); border-radius: var(--radius); padding: 10px; margin: 5px 0;
  border: 1px solid var(--comment-border);
}
.comaut { font-weight: 600; }
.comcon .date { color: var(--ink-muted); font-size: 85%; float: right; }
.comcon p { border-top: 1px dashed var(--border-soft); clear: left; }
.comments form {
  margin: 15px 0; background-color: #fafafa; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
#message { background-color: var(--msg-bg); padding: 10px; }

/* Sosyal paylaşım */
.social { margin: 5px 0; }
.share-on-twitter { background: #41B7D8; }
.share-on-facebook { background: #3B5997; }
.share-on-googleplus { background: #D64937; }
.social a:hover { color: var(--on-accent); text-shadow: none; }
.social .button { font-size: 80%; margin-right: 4px; text-shadow: 0 1px 2px #333; }
.social .scount {
  border: 1px solid #aaa; margin-right: 4px; padding: 7px 4px; font-size: 85%;
  background-color: #f5f5f5; color: var(--ink-muted);
}

/* ====== 50-composition.css ====== */
/* ===== COMPOSITION / LAYOUT PRIMITIVES (CUBE CSS "composition")
   Reusable layout wrappers instead of ad-hoc margins. ===== */

/* Stack: vertical rhythm — consistent gap between children */
.l-stack > * { margin-block: 0; }
.l-stack > * + * { margin-block-start: var(--stack-space, var(--space-3)); }
.l-stack--tight { --stack-space: var(--space-2); }
.l-stack--wide  { --stack-space: var(--space-5); }

/* Cluster: inline group (tags, buttons) — wraps, aligns */
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-space, var(--space-2)); align-items: center; }
.l-cluster--between { justify-content: space-between; }

/* Grid: auto responsive columns (instead of flex-math) */
.l-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 220px), 1fr)); }

/* Center: content width + horizontal centring + side padding */
.l-center { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-4); }

/* Box: bordered box (composition level) */
.l-box { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* Sidebar: content + aside (wraps to stacked on mobile) */
.l-sidebar { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.l-sidebar > .l-sidebar__main { flex: 1 1 60%; min-width: 60%; }
.l-sidebar > .l-sidebar__aside { flex: 1 1 260px; }

/* ====== components/alert.css ====== */
/* Alert — FAZ-2.5 yeniden tasarım.
   ESKİ: soluk zemin + 3px sol şerit + gölge. Sol şerit yaygın bir "üretilmiş arayüz"
   klişesi; kaldırıldı. YENİ: semantik renk artık DOLU İKON ROZETİNDE yaşıyor — kararlı,
   okunur, imza tipografimizle uyumlu. Gölge yok (alert yüzen bir katman değil). */
.c-alert {
  --_bg: var(--surface-2); --_ink: var(--ink); --_border: var(--hairline); --_icon: var(--ink-soft);
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--_bg); color: var(--_ink);
  border: 1px solid var(--_border);
  border-radius: var(--radius);
  margin: var(--space-3) 0;
}

/* Dolu rozet: rengi taşıyan asıl öğe */
.c-alert__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--_icon); color: #fff;
}
.c-alert__icon .c-icon { width: 15px; height: 15px; }

.c-alert__body { flex: 1 1 auto; min-width: 0; line-height: var(--lh-body); padding-top:var(--space-05); }
.c-alert__title {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-base); letter-spacing: -.01em; margin-bottom:1px; color: var(--ink);
}
.c-alert__text { font-size: var(--text-sm); color: var(--ink-muted); }
.c-alert__text > :last-child { margin-bottom:0; }
/* Başlıksız alert = tek satırlık mesaj: tam mürekkep, normal boyut */
.c-alert:not(:has(.c-alert__title)) .c-alert__text { color: var(--_ink); font-size: 1rem; }
.c-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.c-alert__close {
  flex: none; margin:-2px -6px 0 0; padding:var(--space-1); border: 0; background: transparent;
  color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm); line-height: 0;
}
.c-alert__close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.c-alert__close:focus-visible { outline: var(--focus-line); outline-offset: 1px; }

/* Tonlar — zemin çok hafif, kenarlık tonun kendi renginden (nötr gri değil) */
.c-alert--info    { --_bg: #f2f7fc; --_border: #d5e3f4; --_icon: var(--accent); }
.c-alert--success { --_bg: #f1f8f2; --_border: #cfe6d3; --_icon: #2e8b57; }
.c-alert--warning { --_bg: #fdf8ec; --_border: #eeddb4; --_icon: #a9761a; }
.c-alert--danger  { --_bg: #fdf0ee; --_border: #f0cac3; --_icon: var(--mark); }

/* ====== components/app-shell.css ====== */
/* FAZ-2.5 — App Shell: sol gezinme + kişisel merkez.
   İki mod: --tam (topluluk/hesap: etiketli nav) · --ray (sözlük: ince ikon rayı).
   Araştırma kararı: sol=kişisel/gezinme; sözlükte içerik-öncelikli kalır (SEO/CWV). */

/* ---- İskelet: ÜÇ KOLON (sol nav · içerik · sağ keşif) ----
   Kabuk, ekranın kenar boşluklarını kullanır: main dar konteynerden çıkar,
   içerik ortada okunur genişlikte kalır. */
/* Ölçü: X/Twitter modeli — sol 240 + içerik + sağ 300 ≈ 1280px tavan.
   Kenar boşluklarını kullanır ama ekran büyüdükçe sonsuz genişlemez. */
:root { --shell-maxw: 1280px; }

main:has(> .l-shell) {
  max-width: none; padding-left: var(--space-4); padding-right: var(--space-4);
}
/* Kabuk varken üst/alt şeritler de AYNI genişliğe hizalanır */
body:has(.l-shell) header .row,
body:has(.l-shell) footer .row {
  max-width: var(--shell-maxw); padding: 0 var(--space-4);
}

.l-shell { display: block; max-width: var(--shell-maxw); margin-inline: auto; }
.l-shell__nav { display: block; }   /* sol nav HER ZAMAN görünür */
.l-shell__rail { display: none; }
.l-shell__main { min-width: 0; }

/* Mobil/tablet: iki sütun birden sığmaz → sol nav yerine sabit ALT ÇUBUK.
   Sağ ray içeriğin altına iner (aşağıda). */
@media (max-width: 999px) {
  .l-shell__nav { display: none; }
  main:has(> .l-shell) { padding-bottom:84px; }   /* alt çubuk içeriği örtmesin */
}

@media (min-width: 1000px) {
  .l-shell {
    display: grid; gap: var(--space-5); align-items: start;
    grid-template-areas: "nav main rail";
  }
  .l-shell--tam { grid-template-columns: 224px minmax(0, 1fr) 0; }
  .l-shell--ray { grid-template-columns: 56px  minmax(0, 1fr) 0; }
  /* sağ ray varsa üçüncü kolon açılır (X ölçüsü: ~240 / içerik / ~300) */
  .l-shell--tam.l-shell--sag { grid-template-columns: 224px minmax(0, 1fr) 300px; }
  .l-shell--ray.l-shell--sag { grid-template-columns: 56px  minmax(0, 1fr) 300px; }

  /* içerikten NET ayrım (NNG) — kolonlar birbirine karışmasın */
  .l-shell__nav {
    grid-area: nav; display: block; position: sticky; top: var(--space-3);
    border-right: 1px solid var(--hairline); padding-right: var(--space-3);
  }
  .l-shell__main { grid-area: main; }
  .l-shell__rail {
    grid-area: rail; display: block; position: sticky; top: var(--space-3);
    border-left: 1px solid var(--hairline); padding-left: var(--space-4);
  }
  .l-shell--ray .l-shell__nav { padding-right: var(--space-2); }
}

/* Sağ ray dar ekranda içeriğin ALTINA iner (gizlenmez) */
@media (max-width: 999px) {
  .l-shell__rail { display: block; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
}

/* ---- Nav ---- */
.c-nav { display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.c-nav__group { display: grid; gap:1px; }
.c-nav__grouplabel {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); padding:0 var(--space-2) var(--space-1);
}
.c-nav__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding:var(--space-2) var(--space-2); border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none; line-height: 1.2;
  border-left: 2px solid transparent;
}
.c-nav__item:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
/* Aktif sayfa şüpheye yer bırakmaz (dolgu + sol kenar) */
.c-nav__item.is-active { background: var(--bg-soft); color: var(--ink); font-weight: var(--weight-medium); border-left-color: var(--mark); }
.c-nav__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.c-nav__icon { flex: none; display: inline-flex; color: var(--ink-soft); }
.c-nav__item.is-active .c-nav__icon { color: var(--mark); }
.c-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-nav__badge {
  flex: none; font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-soft); background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding:0 var(--space-15);
}
.c-nav__cta { margin-top: var(--space-1); }
.c-nav__cta .c-button { width: 100%; justify-content: center; }

/* ---- Ray modu: yalnız ikon (etiket erişilebilir kalır) ---- */
.c-nav--ray .c-nav__label,
.c-nav--ray .c-nav__grouplabel,
.c-nav--ray .c-nav__badge,
.c-nav--ray .c-nav__cta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-nav--ray .c-nav__item { justify-content: center; padding:var(--space-2) 0; border-left-width: 0; border-radius: var(--radius); }
.c-nav--ray .c-nav__item.is-active { background: var(--mark-soft, var(--bg-soft)); }
.c-nav--ray .c-nav__group { gap:var(--space-05); }


/* ---- Mobil alt çubuk (bottom bar) ---- */
.c-altbar { display: none; }
@media (max-width: 999px) {
  .c-altbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--border-soft);
    padding:var(--space-1) var(--space-05) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px -8px rgba(0,0,0,.35);
  }
  .c-altbar__item {
    display: grid; justify-items: center; gap:var(--space-05);
    padding:var(--space-15) var(--space-05); border-radius: var(--radius-sm);
    color: var(--ink-soft); font-size: 10px; line-height: 1.15; text-align: center;
    min-height: 46px;                     /* dokunma hedefi */
  }
  .c-altbar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .c-altbar__item:hover, .c-altbar__item:focus-visible { text-decoration: none; color: var(--ink); }
  .c-altbar__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .c-altbar__item.is-active { color: var(--mark); font-weight: var(--weight-medium); }
  .c-altbar__item.is-active .c-icon { color: var(--mark); }
  /* "Sor" — ortadaki birincil eylem */
  .c-altbar__item--cta .c-icon {
    background: var(--mark); color: #fff; border-radius: 50%;
    padding:var(--space-1); width: 29px; height: 29px; box-sizing: border-box;
  }
  .c-altbar__item--cta { color: var(--ink); }
}

/* ---- Sağ keşif rayı (gündem / trend) ---- */
.c-rail { display: grid; gap: var(--space-5); }
.c-rail__block { display: grid; gap: var(--space-2); }
.c-rail__title {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin:0; font-weight: 400;
}
.c-rail__item { display: grid; gap:var(--space-05); padding: var(--space-2) 0; border-bottom: 1px dotted var(--hairline); }
.c-rail__item:last-child { border-bottom: 0; }
.c-rail__item:hover { text-decoration: none; }
.c-rail__item-t { font-size: var(--text-sm); color: var(--link); line-height: 1.3; }
.c-rail__item:hover .c-rail__item-t { text-decoration: underline; }
.c-rail__item-m { font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); }
.c-rail__chips { display: flex; flex-wrap: wrap; gap:var(--space-1); }
/* Dar ekranda ray yatay okunur bloklara döner */
@media (max-width: 999px) {
  .c-rail { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4) var(--space-5); }
}

/* ---- Kişisel merkez sayfaları ---- */
.c-merkez__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.c-merkez__stats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-5); }
.c-stat {
  display: grid; gap:1px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); min-width: 96px;
}
.c-stat__n { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1; }
.c-stat__l { font-size: var(--text-xs); color: var(--ink-soft); }
.c-stat--mark .c-stat__n { color: var(--mark); }

/* Kaydedilen/katkı listeleri */
.c-merkez-list { display: grid; gap: var(--space-2); }
.c-merkez-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface);
}
.c-merkez-item__t { font-family: var(--font-display); font-weight: 600; color: var(--link); }
.c-merkez-item__d { flex: 1 1 260px; min-width: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.c-merkez-item__m { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.c-merkez__empty { padding: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--ink-muted); text-align: center; }
.c-merkez__empty p { margin: 0 0 var(--space-3); }

/* ====== components/auth.css ====== */
/* FAZ-2.5 — Auth (giriş / kayıt) ekranları. Split layout: solda form kartı, sağda değer önerisi.
   İmza Lexicon stiliyle uyumlu; mobilde tek kolon. */

.c-auth { display: grid; gap: var(--space-5); align-items: start; margin: var(--space-4) 0; }
@media (min-width: 860px) { .c-auth { grid-template-columns: minmax(340px, 440px) 1fr; gap: var(--space-7); } }

/* Form kartı */
.c-auth__card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg, 12px); padding: var(--space-5); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 32px -20px rgba(0,0,0,.25); }
.c-auth__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -.015em; margin:0 0 var(--space-1); }
.c-auth__sub { color: var(--ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.c-auth__card .c-field { margin-bottom: var(--space-3); }
.c-auth__submit { width: 100%; justify-content: center; }
.c-auth__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm); }

/* "veya" ayracı */
.c-auth__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--ink-soft); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; }
.c-auth__divider::before, .c-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Google butonu kabı (GIS iframe'i ortala) */
/* Google butonu bir <iframe>; genisligini GIS belirliyor. Dar ekranda tasmasin
   diye kap sinirliyor (data-width kaldirildi, yuzde desteklenmiyor). */
.c-auth__google { display: flex; justify-content: center; min-height: 40px; max-width: 100%; overflow: hidden; }
.c-auth__google > div, .c-auth__google iframe { max-width: 100%; }

/* Sağ panel — değer önerisi (letterpress) */
.c-auth__aside { padding: var(--space-4) 0; }
.c-auth__aside-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 var(--space-2); position: relative; padding-bottom: var(--space-2); }
.c-auth__aside-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 44px; height: 3px; background: var(--mark); border-radius: 2px; }
.c-auth__perks { list-style: none; margin: var(--space-4) 0 0; padding:0; display: grid; gap: var(--space-3); }
.c-auth__perk { display: flex; gap: var(--space-3); align-items: flex-start; }
.c-auth__perk .c-icon { flex: none; margin-top:var(--space-05); color: var(--mark); }
.c-auth__perk b { display: block; font-weight: var(--weight-medium); color: var(--ink); }
.c-auth__perk span { font-size: var(--text-sm); color: var(--ink-muted); }
.c-auth__stat { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); margin-top: var(--space-4); }

/* Şifre gücü/eşleşme yardımcıları */
.c-auth .c-field__help--err { color: var(--danger, #b23a2a); }

/* ====== components/avatar.css ====== */
/* Avatar — user image or initials */
.c-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1; user-select: none;
}
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar--sm { width: 28px; height: 28px; font-size: .75rem; }
.c-avatar--lg { width: 56px; height: 56px; font-size: 1.35rem; }

/* ====== components/badge.css ====== */
/* Badge — compact status label */
.c-badge {
  display: inline-flex; align-items: center; gap:var(--space-1); padding:1px var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-medium);
  line-height: 1.6; background: var(--bg-soft); color: var(--ink-muted);
}
.c-badge--info    { background: #eef4fb; color: var(--accent-dark); }
.c-badge--success { background: #eef7ee; color: #217a45; }
.c-badge--warning { background: #fdf6e5; color: #916a08; }
.c-badge--danger  { background: #fcecea; color: #8f2c22; }
.c-badge--accent  { background: var(--accent); color: var(--on-accent); }
.c-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ====== components/breadcrumb.css ====== */
/* Breadcrumb */
.c-breadcrumb { font-size: .875rem; color: var(--ink-muted); padding:var(--space-15) 0; border-bottom: 1px solid var(--border); margin-bottom:var(--space-2); }
.c-breadcrumb__link { color: var(--link); }
.c-breadcrumb__separator { margin:0 var(--space-15); color: var(--ink-soft); }
.c-breadcrumb__current { color: var(--ink); }

/* ====== components/button.css ====== */
/* Button — letterpress quality: crisp edge + top-light + soft depth;
   lifts on hover, presses in on active. Accessible + variant-driven. */
.c-button {
  --_bg: var(--surface); --_ink: var(--ink); --_border: var(--border-input);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h-md); padding:0 var(--control-px-lg);
  border: 1px solid var(--_border); border-radius: var(--radius-sm);
  background: var(--_bg); color: var(--_ink);
  font: inherit; font-size: var(--control-fs-md); font-weight: var(--weight-medium); letter-spacing: .2px; line-height: 1;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-button), var(--top-light);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, border-color .15s ease;
}
.c-button:hover { transform: translateY(-1px); box-shadow: var(--shadow-2), var(--top-light); text-decoration: none; }
.c-button:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,.14); }
.c-button:focus-visible { outline: var(--focus-line); outline-offset: 2px; }
.c-button[disabled], .c-button[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none;
}
.c-button .c-icon { width: 1.15em; height: 1.15em; }

/* Variants (colour contract via --_bg / --_ink / --_border) */
.c-button--primary   { --_bg: var(--accent); --_ink: var(--on-accent); --_border: var(--accent-dark); }
.c-button--primary:hover { --_bg: var(--accent-dark); }
.c-button--secondary { --_bg: var(--surface); --_ink: var(--ink); --_border: var(--border-input); }
.c-button--secondary:hover { --_bg: var(--bg-soft); }
.c-button--danger    { --_bg: var(--mark); --_ink: #fff; --_border: #8f2c22; }
.c-button--ghost     { --_bg: transparent; --_border: transparent; --_ink: var(--ink); box-shadow: none; }
.c-button--ghost:hover { --_bg: var(--bg-soft); box-shadow: none; transform: none; }
.c-button--link      { --_bg: transparent; --_border: transparent; --_ink: var(--link); box-shadow: none; min-height: auto; padding:var(--space-05) var(--space-1); }
.c-button--link:hover { text-decoration: underline; transform: none; box-shadow: none; }

/* Sizes (shared control scale) */
.c-button--sm { min-height: var(--control-h-sm); padding:0 var(--control-px-md); font-size: var(--control-fs-sm); }
.c-button--md { min-height: var(--control-h-md); font-size: var(--control-fs-md); }
.c-button--lg { min-height: var(--control-h-lg); padding:0 var(--control-px-lg); font-size: var(--control-fs-lg); }

/* Icon-only (square, aria-label required) */
.c-button--icon { padding:0; width: var(--control-h-md); }
.c-button--icon.c-button--sm { width: var(--control-h-sm); }
.c-button--icon.c-button--lg { width: var(--control-h-lg); }

/* Full width */
.c-button--block { display: flex; width: 100%; }

/* Loading state */
.c-button--loading { color: transparent !important; pointer-events: none; position: relative; }
.c-button--loading::after {
  content: ""; position: absolute; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--_ink);
  animation: c-spin .7s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .c-button { transition: none; }
  .c-button--loading::after { animation-duration: 1.6s; }
}

/* Global `a:hover{color:var(--link-hover)}` (10-base) href tabanlı butonun rengini eziyordu
   → buton kendi mürekkebini korur (birincil butonda siyah metin hatası). */
.c-button:link, .c-button:visited, .c-button:hover, .c-button:active { color: var(--_ink); }

/* ====== components/card.css ====== */
/* Card — modern soft card: thin divider + soft elevation + rounded + breathing room */
.c-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-elev);
  padding: var(--space-4) var(--space-5); margin: var(--space-4) 0;
}
.c-card--plain  { border: 0; padding:0; background: transparent; box-shadow: none; }
.c-card--accent { border-color: var(--accent); box-shadow: var(--shadow-elev); }
.c-card__title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.c-card__body > :last-child { margin-bottom:0; }

/* ====== components/choice.css ====== */
/* Choice — checkbox & radio (native hidden, custom visual box) */
.c-choice { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; min-height: 24px; padding:var(--space-05) 0; font-size: 1rem; }
.c-choice__body { display: flex; flex-direction: column; }
.c-choice__help { color: var(--ink-soft); font-size: var(--text-xs); }

/* Accessible native input — transparent, over the visual box */
.c-choice__input { position: absolute; top: 4px; left: 0; width: 20px; height: 20px; margin:0; opacity: 0; cursor: pointer; }

/* Visual box */
.c-choice__box {
  flex: none; position: relative; width: 20px; height: 20px; margin-top:var(--space-05);
  border: 1.5px solid var(--border-input); background: var(--surface);
  border-radius: var(--radius-sm); transition: border-color .12s ease, background-color .12s ease;
}
.c-choice--radio .c-choice__box { border-radius: var(--radius-pill); }

/* Hover / focus */
.c-choice:hover .c-choice__input:not(:disabled) ~ .c-choice__box { border-color: var(--accent); }
.c-choice__input:focus-visible ~ .c-choice__box { outline: var(--focus-line); outline-offset: 2px; }

/* Checked — accent filled */
.c-choice__input:checked ~ .c-choice__box { background: var(--accent); border-color: var(--accent-dark); }
/* checkbox tick (SVG) */
.c-choice--checkbox .c-choice__input:checked ~ .c-choice__box::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center/13px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 8.5 7 11.5 12 5'/></svg>");
}
/* radio dot */
.c-choice--radio .c-choice__input:checked ~ .c-choice__box::after {
  content: ""; position: absolute; inset: 0; margin:auto; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

/* Disabled */
.c-choice--disabled { opacity: .55; cursor: not-allowed; }
.c-choice--disabled .c-choice__input { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .c-choice__box { transition: none; } }

/* ====== components/chrome.css ====== */
/* FAZ-2.5 — Site kabuğu: header + footer. App-shell diliyle uyumlu
   (aynı hairline'lar, mono etiketler, display tipografi). */

/* ---- Header ---- */
.c-header {
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  padding:0; margin-bottom:0; position: relative; z-index: 20;
}
.c-header__bar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0; flex-wrap: wrap;
}
.c-header__brand { display: grid; gap:0; line-height: 1.05; flex: none; text-decoration: none; }
.c-header__brand:hover { text-decoration: none; }
.c-header__word {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -.015em; color: var(--ink);
}
.c-header__sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mark);
}
.c-header__search { flex: 1 1 320px; margin:0; min-width: 0; }
.c-header__search .autocomplete { display: flex; gap:var(--space-15); align-items: center; }
.c-header__search #kelime { flex: 1 1 auto; width: auto; margin:0; }
.c-header__acc { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.c-header__link {
  display: inline-flex; align-items: center; gap:var(--space-1);
  color: var(--ink-muted); font-size: var(--text-sm); padding:var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
.c-header__link:hover { color: var(--ink); background: var(--bg-soft); text-decoration: none; }
@media (max-width: 640px) {
  .c-header__bar { gap: var(--space-2); }
  .c-header__search { order: 3; flex-basis: 100%; }
  .c-header__acc { margin-left:auto; }
}

/* ---- Footer ---- */
.c-footer {
  background: var(--bg-footer); border-top: 1px solid var(--hairline);
  color: var(--ink-muted); margin-top: var(--space-5); padding: var(--space-4) 0 var(--space-3);
  font-size: var(--text-sm);
}
.c-footer__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .c-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-5); } }

.c-footer__wordmark {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
  color: var(--ink); letter-spacing: -.015em;
}
.c-footer__wordmark:hover { text-decoration: none; color: var(--mark); }
.c-footer__tagline { margin:var(--space-1) 0 0; font-style: italic; line-height: 1.45; font-size: var(--text-xs); }
.c-footer__stat { margin:var(--space-1) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }

.c-footer__social { display: flex; gap:var(--space-15); margin-top: var(--space-3); }
.c-footer__soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--hairline); border-radius: 50%;
  color: var(--ink-soft); background: var(--surface);
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.c-footer__soc:hover { color: var(--mark); border-color: var(--mark); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .c-footer__soc { transition: none; } }

.c-footer__title {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--space-2); font-weight: 400;
}
.c-footer__list { list-style: none; margin:0; padding:0; display: grid; gap:var(--space-05); }
.c-footer__list li { width: auto; line-height: 1.4; }
.c-footer__list a { color: var(--ink-muted); }
.c-footer__list a:hover { color: var(--link); }
/* eski » işaretlerini bu listede kullanma */
.c-footer__list a::before { content: none; }

.c-footer__bottom {
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--hairline); font-size: var(--text-xs); color: var(--ink-soft);
}

/* Yasal metin (üyelik sözleşmesi vb.) — okunur genişlik + numaralı maddeler */
.c-legal { max-width: 68ch; line-height: var(--lh-body); color: var(--ink); }
.c-legal ol { padding-left:1.4em; display: grid; gap: var(--space-3); }
.c-legal li { line-height: 1.55; }
.c-legal br + br { display: none; }

/* ---- Birleşik arama önerileri (kelime + soru + araç) ---- */
.c-arama-oneri {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-menu); overflow: hidden;
}
.c-arama-oneri.is-acik { display: block; }
/* Grup başlığı: tip bilgisi burada duruyor — satırlarda rozet YOK.
   Yapışkan değil; liste kısa (en fazla 6+3+3 satır). */
.c-arama-oneri__grup {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg-soft);
  border-bottom: 1px solid var(--hairline);
}
.c-arama-oneri__grup:not(:first-child) { border-top: 1px solid var(--hairline); }
.c-arama-oneri__grup .c-icon { flex: none; opacity: .7; }

.c-arama-oneri__satir {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--ink); text-decoration: none;
}
.c-arama-oneri__satir:hover, .c-arama-oneri__satir.is-sec { background: var(--bg-soft); text-decoration: none; }
.c-arama-oneri__ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-arama-oneri__alt { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }

/* ====== components/dialog.css ====== */
/* Dialog / modal — native <dialog> (behaviour in js/ds.js) */
.c-dialog {
  /* margin:auto ŞART: 10-base.css'teki `* { margin:0 }` reset'i, tarayıcının
     <dialog> için verdiği `margin:auto` ortalamasını eziyordu → modal sol üste
     yapışıyordu. Burada geri veriyoruz; :modal'da inset:0 olduğu için iki eksende
     de ortalar. */
  margin: auto;
  padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-menu);
  background: var(--surface); color: var(--ink); max-width: 30rem; width: calc(100% - 2rem);
  /* uzun içerik ekranı taşırmasın — başlık/foot sabit kalsın, gövde kaysın */
  max-height: calc(100dvh - 4rem);
}
/* display YALNIZCA [open] içinde: çıplak .c-dialog'a display:flex vermek, kapalı
   <dialog>'un UA `display:none` kuralını ezip modalı sayfada görünür bırakıyor. */
.c-dialog[open] { display: flex; flex-direction: column; }
.c-dialog[open] { animation: c-dialog-in 140ms cubic-bezier(.16,1,.3,1); }
@keyframes c-dialog-in { from { opacity: 0; transform: translateY(.5rem) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .c-dialog[open] { animation: none; } }
.c-dialog::backdrop { background: rgba(24,20,10,.45); }
.c-dialog__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hairline); }
.c-dialog__title { margin:0; font-size: var(--text-lg); }
.c-dialog__close { flex: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); padding:var(--space-1); border-radius: var(--radius-sm); line-height: 0; }
.c-dialog__close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.c-dialog__close:focus-visible { outline: var(--focus-line); outline-offset: 1px; }
.c-dialog__body { padding: var(--space-5); line-height: var(--lh-body); overflow-y: auto; }
.c-dialog__foot { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--hairline); }

/* ====== components/entry-sections.css ====== */
/* FAZ-1 — Rich entry sections (madde bölümleri): the presentation layer for
   kelime_zengin data (etymology, synonyms, translations, derived words, related
   entries, examples, usage). Built on the signature Lexicon/Letterpress style. */

/* Section wrapper */
.c-entry-section { margin: var(--space-5) 0; }
.c-entry-section__head {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding-bottom: var(--space-1); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--hairline); position: relative;
}
.c-entry-section__head::before {
  content: ""; position: absolute; bottom: -1px; left: 0; width: 40px; height: 2px;
  background: var(--mark); border-radius: 2px;
}
.c-entry-section__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); margin:0; color: var(--ink); letter-spacing: -.01em; }
.c-entry-section__count { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); }
.c-entry-section__body { line-height: var(--lh-body); }
.c-entry-section__body > :last-child { margin-bottom:0; }

/* Meta row (syllables / letter count) — monospace data */
.c-entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-2) 0 var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); }
.c-entry-meta__item { display: inline-flex; align-items: baseline; gap:var(--space-15); }
.c-entry-meta__val { color: var(--ink); font-weight: var(--weight-medium); }

/* Translations — language code + word chips */
.c-translations { display: flex; flex-direction: column; gap: var(--space-2); }
.c-translations__row { display: flex; gap: var(--space-3); align-items: baseline; }
.c-translations__code { flex: none; min-width: 3.2em; font-variant: small-caps; letter-spacing: .06em; font-weight: var(--weight-medium); color: var(--ink-muted); }
.c-translations__words { display: flex; flex-wrap: wrap; gap:var(--space-1); }

/* Related entries (çapraz / ters başvuru) — word + short definition */
.c-related { display: grid; gap: var(--space-3); }
.c-related--cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.c-related__item { padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface-2); }
.c-related__word { display: block; font-family: var(--font-display); font-weight: 600; color: var(--link); margin-bottom:var(--space-05); }
.c-related__def { color: var(--ink-muted); font-size: var(--text-sm); }
.c-related__def--clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Prose sections (etymology, usage) */
.c-entry-prose { color: var(--ink); }
.c-entry-prose--quote { font-family: var(--font-quote); color: var(--ink-muted); border-left: 2px solid var(--border); padding-left: var(--space-3); }

/* Section source badge alignment */
.c-entry-section__head .c-badge { align-self: center; margin-left:auto; }

/* Per-sense examples (nested under the definition — lexicography standard).
   The definition's own citations live here; "more examples" collapses natively. */
.c-sense-examples { margin: var(--space-2) 0 0; }
/* Mevcut ornek tablosu blockquote'ları (p+cite) — örnek stiliyle hizalanır */
.c-sense-examples > blockquote { margin: var(--space-2) 0 0; padding: var(--space-1) 0 var(--space-1) var(--space-3); border-left: 2px solid var(--border); font-family: var(--font-quote); color: var(--ink-muted); }
.c-sense-examples > blockquote p { margin:0; }
.c-sense-examples > blockquote cite { display: block; font-size: var(--text-sm); color: var(--ink-soft); font-style: normal; margin-top:var(--space-05); }
.c-more-ex { margin-top: var(--space-1); }
.c-more-ex > summary { list-style: none; display: inline-flex; align-items: center; gap:var(--space-1); color: var(--link); font-size: var(--text-sm); cursor: pointer; padding:var(--space-05) 0; }
.c-more-ex > summary::-webkit-details-marker { display: none; }
.c-more-ex > summary::before { content: "▸"; color: var(--ink-soft); transition: transform var(--motion-fast); }
.c-more-ex[open] > summary::before { transform: rotate(90deg); }

/* Sense footer: understated vote + a discreet ⋮ overflow menu, both right-aligned.
   No repeated "örnek ekle" text; actions live behind the kebab. Text stays the focus. */
.c-senses__foot { display: flex; align-items: center; justify-content: flex-end; gap:var(--space-05); margin-top: var(--space-2); }
.c-sense-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding:0; border: 0; background: transparent; color: var(--ink-soft); border-radius: var(--radius-sm); cursor: pointer; line-height: 0; transition: color var(--motion-fast), background-color var(--motion-fast); }
.c-sense-menu-btn .c-icon { width: 16px; height: 16px; }
.c-sense-menu-btn:hover, .c-sense-menu-btn[aria-expanded="true"] { background: var(--bg-soft); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .c-sense-menu-btn { transition: none; } }
/* Upvote — SADECE beğeni (downvote yok). Pill; beğeninceye kadar muted, sonra accent. */
.c-upvote { display: inline-flex; align-items: center; gap:var(--space-1); padding:var(--space-05) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast); }
.c-upvote .c-icon { width: 14px; height: 14px; }
.c-upvote:hover { border-color: var(--accent); color: var(--accent); }
.c-upvote--on { border-color: var(--accent); color: var(--accent); background: #eef4fb; }
.c-upvote__count { font-family: var(--font-mono); font-weight: var(--weight-medium); }
/* Kullanıcı örneği + upvote satırı (örnek metninin altında, sağda) */
.c-example__foot { display: flex; justify-content: flex-end; margin: 0 0 var(--space-2); }

/* Contribute footer — subtle, at the very end of the entry (never competes with content) */
.c-contribute { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.c-contribute__label { color: var(--ink-soft); font-size: var(--text-sm); margin-right: var(--space-1); }

/* Quiet inline "add" affordance under a section */
.c-section-add { margin-top: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .c-upvote { transition: none; } }

/* Frequency / level badge row under the headword */
.c-entry-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }

/* Phrases — idioms/proverbs (deyim & atasözü): term + short gloss */
.c-phrases { display: grid; gap: var(--space-2); }
.c-phrases__item { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.c-phrases__term { flex: none; font-weight: var(--weight-medium); color: var(--link); }
.c-phrases__gloss { color: var(--ink-muted); font-size: var(--text-sm); }

/* Interlink kelime bulutu (mevcut linkOlustur çıktısı — Türemiş Kelimeler) */
.c-inline-words { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); line-height: var(--lh-body); }

/* İlişkili Kelimeler — mevcut interlink blokları (h3 + ol) bölüm içinde derli toplu */
.c-related-legacy h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin: var(--space-3) 0 var(--space-1); }
.c-related-legacy h3:first-child { margin-top:0; }
.c-related-legacy ol { margin: 0 0 var(--space-2); padding-left:1.4em; color: var(--ink-muted); font-size: var(--text-sm); }

/* Semantic hierarchy (üst / alt kavram) */
.c-hier { display: grid; gap: var(--space-2); }
.c-hier__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.c-hier__label { flex: none; min-width: 6.5em; font-size: var(--text-sm); color: var(--ink-soft); }
.c-hier__words { display: flex; flex-wrap: wrap; gap:var(--space-1); }

/* Empty state — community contribution hook */
.c-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-size: var(--text-sm); }

/* Tool integration chips (araç entegrasyonu) */
.c-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-tools__link { display: inline-flex; align-items: center; gap:var(--space-15); padding:var(--space-15) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); transition: border-color var(--motion-fast); }
.c-tools__link:hover { border-color: var(--accent); text-decoration: none; }
.c-tools__link .c-icon { color: var(--ink-soft); }

/* Q&A / discussion teaser (FAZ-2 bridge) */
.c-qa-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); }
.c-qa-teaser__text { flex: 1 1 240px; color: var(--ink-muted); }

/* ====== components/entry.css ====== */
/* SIGNATURE: Entry header — letterpress dictionary headword header.
   NOT: Bu panelin zemini eskiden KAZAEN geliyordu (çıplak `header{}` kuralı DS'in
   <header class="c-entry"> öğesine sızıyordu) — bu yüzden yatay padding'i yoktu.
   Sızıntı kapatıldı; panel artık KASITLI ve düzgün iç boşluklu. */
.c-entry {
  margin: var(--space-2) 0 var(--space-5);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
@media (max-width: 640px) { .c-entry { padding: var(--space-3) var(--space-4); } }
.c-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
/* Sesli okunuş düğmesi (ds.js SpeechSynthesis) */
.c-entry__audio { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding:0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--accent); cursor: pointer; transition: background-color var(--motion-fast), color var(--motion-fast); }
.c-entry__audio:hover { background: var(--bg-soft); }
.c-entry__audio.is-speaking { background: var(--accent); color: var(--on-accent); border-color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) { .c-entry__audio { transition: none; } }
.c-entry__word {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 6vw, var(--text-3xl)); line-height: 1.05;
  color: var(--ink); margin:0; letter-spacing: -.01em;
}
.c-entry__word-suffix { font-weight: 400; font-size: .42em; color: var(--ink-soft); letter-spacing: 0; white-space: nowrap; }
.c-entry__meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); color: var(--ink-muted); font-size: var(--text-sm); }
.c-entry__pron { font-family: var(--font-mono); }
.c-entry__pos { font-style: italic; }
.c-entry__lang { font-variant: small-caps; letter-spacing: .04em; }
.c-entry__dot { color: var(--border-strong); }
.c-entry__syllables { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-1); }
/* Signature rule: clean hairline + short accent segment at the start (modern-retro touch) */
.c-entry__rule { position: relative; margin-top: var(--space-3); border-top: 1px solid var(--hairline); }
.c-entry__rule::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--mark); border-radius: 2px; }

/* ====== components/field.css ====== */
/* Field — form field wrapper (composition): label + control + help + error.
   Shared by input/select/textarea and checkbox/radio groups. */
.c-field { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-3) 0; max-width: 480px; border: 0; padding:0; min-inline-size: 0; }
.c-field--block { max-width: none; }
.c-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
legend.c-field__label { padding:0; margin-bottom: var(--space-1); }
.c-field__star { color: var(--mark); }

/* Control box + affix slots */
.c-field__control { position: relative; display: flex; align-items: center; }
.c-field__leading, .c-field__trailing { position: absolute; display: inline-flex; align-items: center; color: var(--ink-soft); pointer-events: none; }
.c-field__leading { left: 12px; } .c-field__trailing { right: 12px; }
.c-field__action { position: absolute; right: 6px; display: inline-flex; align-items: center; }  /* interactive */
.c-field__group { display: flex; flex-direction: column; gap: var(--space-2); }

/* Help / error / success */
.c-field__help { color: var(--ink-soft); font-size: var(--text-xs); }
.c-field__error { color: var(--mark); font-size: var(--text-xs); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap:var(--space-1); }
.c-field__success { color: #2e9e5b; font-size: var(--text-xs); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap:var(--space-1); }

/* Footer row (e.g. character counter, right-aligned) */
.c-field__foot { display: flex; justify-content: flex-end; }
.c-field__counter { color: var(--ink-soft); font-size: var(--text-xs); font-family: var(--font-mono); }

/* Size scale — wrapper sets --control-*, control consumes it */
.c-field--sm { --control-h: var(--control-h-sm); --control-px: var(--control-px-sm); --control-fs: var(--control-fs-sm); }
.c-field--md { --control-h: var(--control-h-md); --control-px: var(--control-px-md); --control-fs: var(--control-fs-md); }
.c-field--lg { --control-h: var(--control-h-lg); --control-px: var(--control-px-lg); --control-fs: var(--control-fs-lg); }

/* ====== components/icon.css ====== */
/* Icon — currentColor, aligned to text */
.c-icon { display: inline-block; vertical-align: -.15em; flex: none; }
.c-button .c-icon { vertical-align: middle; }

/* ====== components/input.css ====== */
/* Input — input / select / textarea control (consumes size tokens) */
.c-input {
  width: 100%; min-height: var(--control-h); padding:0 var(--control-px);
  border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--control-fs); color: var(--ink); background: var(--surface);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  -webkit-appearance: none; appearance: none;
}
textarea.c-input { min-height: 96px; padding:var(--space-3) var(--control-px); resize: vertical; line-height: var(--lh-body); }
.c-input::placeholder { color: var(--ink-soft); opacity: 1; }
.c-input:hover { border-color: var(--border-strong); }
.c-input:focus-visible, .c-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.c-input:disabled { opacity: .6; cursor: not-allowed; background: var(--bg-soft); }
.c-input[readonly] { background: var(--bg-soft); }

/* affix padding */
.c-field__control--leading .c-input { padding-left:38px; }
.c-field__control--trailing .c-input { padding-right:38px; }

/* Select — custom caret */
.c-input--select {
  cursor: pointer; padding-right:38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237d7a70' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Error state */
.c-field--invalid .c-input { border-color: var(--mark); }
.c-field--invalid .c-input:focus { box-shadow: 0 0 0 3px rgba(178,58,46,.28); }

/* Success state */
.c-field--valid .c-input { border-color: #2e9e5b; }
.c-field--valid .c-input:focus { box-shadow: 0 0 0 3px rgba(46,158,91,.25); }

/* Loading — trailing spinner */
.c-input__spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-input); border-top-color: var(--accent);
  animation: c-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .c-input { transition: none; }
  .c-input__spinner { animation-duration: 1.6s; }
}

/* ====== components/katki-form.css ====== */
/* FAZ-3 — Katkı formları (kelime-ekle / anlam-ekle ORTAK stilleri).
   İkisi de aynı işi yapar: kelime + anlam. Tek fark hangi durumda çalıştıkları. */

.c-katkiform { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .c-katkiform { grid-template-columns: minmax(0,1fr) 260px; } }

.c-katkiform__bas { grid-column: 1 / -1; }
.c-katkiform__bas h1 { margin: 0 0 var(--space-1); }
.c-katkiform__alt { color: var(--ink-muted); margin: 0; max-width: 62ch; }

.c-katkiform__form {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--space-5); margin: 0;
}
.c-katkiform__gonder {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline);
}
.c-katkiform__not { color: var(--ink-soft); font-size: var(--text-xs); }

/* Yan panel — karşı akışa köprü */
.c-katkiform__yan {
  padding: var(--space-4); border: 1px dashed var(--border);
  border-radius: var(--radius); background: var(--surface-2);
}
.c-katkiform__yanbas { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin: 0 0 var(--space-2); }
.c-katkiform__yan p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-3); }

/* ---- Canlı kelime kontrolü ---- */
.c-kalan { margin-bottom: var(--space-4); }
.c-kalan__sonuc {
  margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.5;
  color: var(--ink-muted); min-height: 1px;
}
.c-kalan__sonuc:empty { display: none; }
.c-kalan__sonuc--ok,
.c-kalan__sonuc--uyari {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid;
}
.c-kalan__sonuc--ok    { background: #f1f8f2; border-color: #cfe6d3; }
.c-kalan__sonuc--uyari { background: #fdf8ec; border-color: #eeddb4; }
.c-kalan__sonuc strong { color: var(--ink); }
.c-kalan__benzer { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-soft); }
.c-kalan__oneri {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--link);
  border-radius: var(--radius-pill); padding: var(--space-05) var(--space-2);
  font: inherit; font-size: var(--text-xs); cursor: pointer; margin: 2px;
}
.c-kalan__oneri:hover { border-color: var(--accent); }

/* ---- Çoklu anlam ---- */
.c-anlamlar { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.c-anlamlar__baslik {
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink);
}
.c-anlamlar__liste { display: grid; gap: var(--space-2); }
.c-anlam-satir { display: flex; align-items: flex-start; gap: var(--space-2); }
.c-anlam-satir__no {
  flex: none; width: 1.6em; padding-top: var(--space-2);
  font-family: var(--font-display); font-weight: 600; color: var(--mark);
  text-align: right; font-size: var(--text-sm);
}
.c-anlam-satir textarea { flex: 1 1 auto; min-width: 0; }
.c-anlam-satir__sil {
  flex: none; margin-top: var(--space-1); padding: var(--space-1);
  border: 0; background: transparent; color: var(--ink-soft);
  border-radius: var(--radius-sm); cursor: pointer; line-height: 0;
}
.c-anlam-satir__sil:hover { background: var(--bg-soft); color: var(--mark); }
.c-anlamlar__ekle {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px dashed var(--border); background: transparent; color: var(--link);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.c-anlamlar__ekle:hover { border-color: var(--accent); background: var(--surface-2); }

/* ====== components/letter.css ====== */
/* SIGNATURE: Letter tile — Scrabble / crossword motif */
.c-letter {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; box-sizing: content-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-hard);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  line-height: 1; user-select: none;
}
.c-letter__value { position: absolute; right: 3px; bottom: 1px; font-family: var(--font-mono); font-size: .6em; color: var(--ink-soft); font-weight: 400; }
.c-letter--sm { font-size: .8rem; }
.c-letter--lg { font-size: 1.5rem; }
.c-letter-row { display: inline-flex; flex-wrap: wrap; gap:var(--space-1); align-items: center; }
.c-letter-row__space { width: .6em; }
/* Boş taş — bulmacada bilinmeyen harf (girdi değil, gösterim) */
.c-letter--bos { background: var(--surface-2); border-style: dashed; color: transparent; }

/* ====== components/menu.css ====== */
/* Menu / dropdown (behaviour in js/ds.js) */
.c-menu { position: relative; display: inline-block; }
.c-menu__list {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 180px; z-index: var(--z-dropdown);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-menu); padding:var(--space-1); display: none;
}
.c-menu--end .c-menu__list { left: auto; right: 0; }
.c-menu__toggle[aria-expanded="true"] + .c-menu__list { display: block; }
.c-menu__item {
  display: flex; align-items: center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--ink); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; width: 100%;
  background: transparent; border: 0; text-align: left; font-family: inherit;
}
.c-menu__item:hover { background: var(--bg-soft); text-decoration: none; }
.c-menu__item:focus-visible { outline: var(--focus-line); outline-offset: -2px; }
.c-menu__sep { height: 1px; background: var(--hairline); margin:var(--space-1) 0; }

/* ====== components/pagination.css ====== */
/* Pagination */
.c-pagination { display: flex; flex-wrap: wrap; gap:var(--space-1); align-items: center; list-style: none; padding:0; margin: var(--space-4) 0; }
.c-pagination__link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding:0 var(--space-2);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--link); font-size: var(--text-sm); transition: background-color var(--motion-fast);
}
.c-pagination__link:hover { background: var(--bg-soft); text-decoration: none; }
.c-pagination__link:focus-visible { outline: var(--focus-line); outline-offset: 2px; }
.c-pagination__link--current { background: var(--accent); color: var(--on-accent); border-color: var(--accent-dark); font-weight: var(--weight-medium); }
.c-pagination__link--disabled { opacity: .45; pointer-events: none; }
.c-pagination__gap { padding:0 var(--space-1); color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .c-pagination__link { transition: none; } }

/* ====== components/qa.css ====== */
/* FAZ-2 — Q&A (soru/cevap) sunum katmanı. İmza Lexicon stiliyle uyumlu. */

/* Soru başlığı + meta */
.c-qa { margin: var(--space-3) 0 var(--space-5); }
.c-qa__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, var(--text-2xl)); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--space-3); }
.c-qa__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.c-qa__stat { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); }
.c-qa__body { line-height: var(--lh-body); color: var(--ink); font-size: var(--text-lg); }
.c-qa__body > :first-child { margin-top:0; }
.c-qa__tags { display: flex; flex-wrap: wrap; gap:var(--space-15); margin-top: var(--space-4); }

/* Cevap listesi (2.c) */
.c-answers { margin-top: var(--space-6); }
.c-answer { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.c-answer--kabul { background: linear-gradient(90deg, #eef7f1, transparent 60%); border-radius: var(--radius); padding-left: var(--space-3); }
.c-answer__vote { flex: none; display: flex; flex-direction: column; align-items: center; gap:var(--space-05); }
.c-answer__body { flex: 1 1 auto; line-height: var(--lh-body); color: var(--ink); }
.c-answer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-soft); }
.c-answer__author { font-weight: var(--weight-medium); color: var(--ink-muted); }
.c-answer__accept { display: inline-flex; align-items: center; gap:var(--space-1); font-size: var(--text-sm); color: #2e9e5b; }
.c-answer__accept-btn { display: inline-flex; align-items: center; gap:var(--space-1); border: 1px solid var(--hairline); background: transparent; border-radius: var(--radius-pill); padding:var(--space-05) var(--space-3); font-size: var(--text-xs); color: var(--ink-soft); cursor: pointer; }
.c-answer__accept-btn:hover { border-color: #2e9e5b; color: #2e9e5b; }

/* Soruya bağlı sözlük kelimeleri (2.e) */
.c-qa__words { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ink-soft); }
.c-qa__words-label { margin-right:var(--space-1); }

/* Kelime maddesindeki "Sorular" bloğu — bağlı soru mini-listesi (2.e) */
.c-qa-mini { display: flex; flex-direction: column; gap:var(--space-05); padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: var(--space-2); }
.c-qa-mini:hover { border-color: var(--accent); text-decoration: none; background: var(--surface-2); }
.c-qa-mini__title { font-weight: var(--weight-medium); color: var(--link); }
.c-qa-mini__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }

/* Soru listesi / feed (2.g) */
.c-qa-list { display: grid; gap: var(--space-2); }
.c-qa-card { display: flex; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.c-qa-card__stats { flex: none; display: flex; flex-direction: column; gap: var(--space-2); min-width: 64px; text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-soft); }
.c-qa-card__stat b { display: block; color: var(--ink); font-size: var(--text-lg); font-weight: 600; }
.c-qa-card__main { flex: 1 1 auto; min-width: 0; }
.c-qa-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--link); margin:0 0 var(--space-1); }
.c-qa-card__excerpt { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-qa-card__foot { display: flex; flex-wrap: wrap; gap:var(--space-15) var(--space-3); align-items: center; margin-top: var(--space-2); }
.c-qa-card__by { font-size: var(--text-xs); color: var(--ink-soft); }
.c-qa-card__stat--empty b { color: var(--accent); }

/* Feed sıralama sekmeleri (gerçek link) + kategori kısayolları */
.c-qa-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.c-qa-tab { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom:-1px; }
.c-qa-tab:hover { color: var(--ink); text-decoration: none; }
.c-qa-tab--on { color: var(--ink); font-weight: var(--weight-medium); border-bottom-color: var(--mark); }
.c-qa-cats { display: flex; flex-wrap: wrap; gap:var(--space-15); margin: var(--space-2) 0 var(--space-1); }
.c-tag--on { border-color: var(--accent); color: var(--accent); background: #eef4fb; }

/* Takip/bırak düğmesi (2.h) */
.c-takip-btn { display: inline-flex; align-items: center; gap:var(--space-1); padding:var(--space-1) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast); }
.c-takip-btn:hover { border-color: var(--accent); color: var(--accent); }
.c-takip-btn--on { border-color: var(--accent); color: var(--accent); background: #eef4fb; }
.c-takip-btn .c-icon { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .c-takip-btn { transition: none; } }

/* ====== components/reklam.css ====== */
/* Reklam kapları — içerikten net ayrılır, yer önceden ayrılır (CLS yok).
   Cihaz kapısı burada: masaüstü birimi mobilde display:none olur ve ds.js onu
   push ETMEZ (görünmeyen reklamı yüklemek AdSense açısından sorunlu). */

.c-reklam {
  position: relative;
  margin: var(--space-6) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  text-align: center;
  /* boş kalırsa kocaman boşluk olmasın diye ölçülü rezervasyon */
  min-height: 7.5rem;
}
.c-reklam__etiket {
  position: absolute; top: var(--space-1); left: 0;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.c-reklam .adsbygoogle { margin-top: var(--space-3); }

/* Sağ ray birimi — 300px kolona tam oturur, sticky */
.c-reklam--ray {
  margin: var(--space-5) 0 0; padding-top: var(--space-3);
  min-height: 15.625rem; text-align: left;   /* 250px taban; birim 300x600 gelirse kendi buyur */
}
.c-reklam--yapiskan { position: sticky; top: var(--space-4); }

/* Yazı içi birimler biraz daha dar rezervasyon (fluid, içeriğe göre büyür) */
.c-reklam--yazi-ici-1, .c-reklam--yazi-ici-2 { min-height: 9rem; }

/* ---- CİHAZ KAPISI ---- */
.c-reklam--masaustu { display: none; }
.c-reklam--mobil    { display: block; }
@media (min-width: 1000px) {
  .c-reklam--masaustu { display: block; }
  .c-reklam--mobil    { display: none; }
}

/* Feed içi birim — soru kartlarının arasında, kart ritmini bozmadan */
.c-reklam--feed { margin: var(--space-4) 0; min-height: 8rem; }

@media print { .c-reklam { display: none; } }

/* ====== components/segmented.css ====== */
/* Segmented control — mutually exclusive options in one strip (radio-based) */
.c-segmented { display: inline-flex; padding:var(--space-05); gap:var(--space-05); background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.c-segmented__item { position: relative; display: inline-flex; }
.c-segmented__input { position: absolute; inset: 0; margin:0; opacity: 0; cursor: pointer; }
.c-segmented__label {
  display: inline-flex; align-items: center; gap:var(--space-1); padding:var(--space-1) var(--space-3);
  border-radius: calc(var(--radius-sm) - 2px); font-size: var(--text-sm); color: var(--ink-muted);
  cursor: pointer; white-space: nowrap; transition: background-color var(--motion-fast), color var(--motion-fast);
}
.c-segmented__input:hover ~ .c-segmented__label { color: var(--ink); }
.c-segmented__input:checked ~ .c-segmented__label { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); font-weight: var(--weight-medium); }
.c-segmented__input:focus-visible ~ .c-segmented__label { outline: var(--focus-line); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .c-segmented__label { transition: none; } }

/* ====== components/sense.css ====== */
/* SIGNATURE: Numbered senses — hanging indent + prominent numbers */
.c-senses { list-style: none; margin: var(--space-3) 0; padding:0; counter-reset: sense; }
.c-senses__item {
  counter-increment: sense; position: relative;
  padding-left:2.2em; margin: 0 0 var(--space-3); line-height: var(--lh-body);
}
.c-senses__item::before {
  content: counter(sense); position: absolute; left: 0; top: .05em;
  font-family: var(--font-display); font-weight: 600; font-size: .95em; color: var(--mark);
  width: 1.6em; text-align: right;
}
.c-senses__label { font-style: italic; color: var(--ink-soft); font-size: var(--text-sm); }
.c-senses__text { color: var(--ink); }
.c-senses__example { margin: var(--space-2) 0 0; padding: var(--space-1) 0 var(--space-1) var(--space-3); border-left: 2px solid var(--border); background: transparent; font-family: var(--font-quote); color: var(--ink-muted); border-radius: 0; }

/* ====== components/skeleton.css ====== */
/* Skeleton — shimmer placeholder for loading content */
.c-skeleton {
  display: block; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--surface-2) 37%, var(--bg-soft) 63%);
  background-size: 400% 100%; animation: c-shimmer 1.4s ease infinite;
}
@keyframes c-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.c-skeleton--text  { height: .8em; margin:.35em 0; }
.c-skeleton--title { height: 1.4em; width: 50%; margin:.3em 0; }
.c-skeleton--circle { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .c-skeleton { animation: none; } }

/* ====== components/sosyal.css ====== */
/* FAZ-3 (sosyal) — katkı şeridi, canlı iz, katkıcı profilleri.
   İlke: sessiz ve dürüst. İçeriğin önüne geçmez, uydurma canlılık göstermez. */

/* ---- Katkı şeridi (kelime sayfası) ---- */
.c-katki {
  display: grid; gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}
.c-katki__satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.c-katki__etiket {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); flex: none;
}
.c-katki__kisiler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.c-katki__kisi { font-weight: var(--weight-medium); color: var(--link); }
.c-katki__rol { color: var(--ink-soft); font-size: var(--text-xs); }
.c-katki__ayrac { color: var(--border-strong); }

/* Ortak hedef satırı — katkı çağrısı */
.c-katki__satir--gorev { color: var(--ink-muted); }
.c-katki__satir--gorev .c-icon { color: var(--mark); flex: none; }
.c-katki__satir--gorev strong { color: var(--ink); }
.c-katki__cta {
  margin-left: auto; border: 1px solid var(--hairline); background: var(--surface);
  color: var(--link); font: inherit; font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); cursor: pointer;
}
.c-katki__cta:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
@media (max-width: 640px) { .c-katki__cta { margin-left: 0; } }

/* ---- Canlı iz (sağ ray) ---- */
.c-canli__sayi { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
.c-canli__sayi strong { color: var(--ink); font-family: var(--font-mono); }
.c-canli__nokta {
  width: var(--space-2); height: var(--space-2); border-radius: 50%;
  background: #2e8b57; flex: none; animation: c-canli-nabiz 2.4s ease-in-out infinite;
}
@keyframes c-canli-nabiz { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .c-canli__nokta { animation: none; } }
.c-canli__etiket { font-size: var(--text-xs); color: var(--ink-soft); margin: 0 0 var(--space-2); line-height: 1.45; }
.c-canli__etiket strong { color: var(--ink); font-family: var(--font-mono); }

/* ---- Katkıcı profili ---- */
.c-profil { margin: var(--space-3) 0 var(--space-4); }
.c-profil__ad { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -.015em; margin: 0; }
.c-profil__meta { color: var(--ink-soft); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.c-profil__bio { color: var(--ink-muted); margin: var(--space-2) 0 0; max-width: 60ch; }

/* ---- Katkıcı listesi ---- */
.c-user-list { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: var(--space-4) 0; }
@media (min-width: 620px)  { .c-user-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .c-user-list { grid-template-columns: 1fr 1fr 1fr; } }
.c-user {
  display: grid; gap: var(--space-05);
  padding: var(--space-3); border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--surface);
}
.c-user:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: none; }
.c-user__ad { font-family: var(--font-display); font-weight: 600; color: var(--link); }
.c-user__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }

/* ---- Kaydet düğmesi (kelime kartı içinde) ---- */
.c-kaydet {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.c-kaydet:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.c-kaydet--on { border-color: var(--mark); color: var(--mark); background: var(--mark-bg, var(--surface-2)); }
.c-kaydet .c-icon { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .c-kaydet { transition: none; } }
/* Kart eylem yuvası — kelimenin sağında, başlıkla aynı hizada */
.c-entry__actions { margin-left: auto; align-self: center; display: flex; gap: var(--space-2); }
@media (max-width: 560px) { .c-entry__actions { margin-left: 0; width: 100%; } }

/* ====== components/switch.css ====== */
/* Switch / toggle — on/off setting (distinct from checkbox) */
.c-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; min-height: 24px; font-size: 1rem; }
.c-switch__input { position: absolute; width: 40px; height: 24px; margin:0; opacity: 0; cursor: pointer; }
.c-switch__track {
  position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-pill);
  background: var(--border-input); transition: background-color var(--motion-fast);
}
.c-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-1); transition: transform var(--motion-fast);
}
.c-switch__input:checked ~ .c-switch__track { background: var(--accent); }
.c-switch__input:checked ~ .c-switch__track .c-switch__thumb { transform: translateX(16px); }
.c-switch__input:focus-visible ~ .c-switch__track { outline: var(--focus-line); outline-offset: 2px; }
.c-switch__body { display: flex; flex-direction: column; }
.c-switch__help { color: var(--ink-soft); font-size: var(--text-xs); }
.c-switch--disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .c-switch__track, .c-switch__thumb { transition: none; } }

/* ====== components/table.css ====== */
/* Table — styled data table (scrolls inside its own wrapper on overflow) */
.c-table-wrap { overflow-x: auto; margin: var(--space-3) 0; }
.c-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); border: 0; }
.c-table th, .c-table td { padding:var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--hairline); }
.c-table thead th { color: var(--ink-muted); font-weight: var(--weight-medium); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.c-table tbody tr { transition: background-color var(--motion-fast); }
.c-table tbody tr:hover { background: var(--bg-soft); }
.c-table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.c-table--compact th, .c-table--compact td { padding:var(--space-1) var(--space-2); }
@media (prefers-reduced-motion: reduce) { .c-table tbody tr { transition: none; } }

/* ====== components/tabs.css ====== */
/* Tabs — WAI-ARIA tab pattern (behaviour in js/ds.js) */
.c-tabs__list { display: flex; flex-wrap: wrap; gap:var(--space-05); border-bottom: 1px solid var(--hairline); }
.c-tabs__tab {
  appearance: none; border: 0; background: transparent; margin:0 0 -1px; padding:var(--space-2) var(--space-4);
  font: inherit; font-weight: var(--weight-medium); color: var(--ink-muted); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color var(--motion-fast);
}
.c-tabs__tab:hover { color: var(--ink); }
.c-tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.c-tabs__tab:focus-visible { outline: var(--focus-line); outline-offset: 2px; }
.c-tabs__panel { padding: var(--space-3) 0; }
@media (prefers-reduced-motion: reduce) { .c-tabs__tab { transition: none; } }

/* ====== components/tag.css ====== */
/* Tag / word chip — modern soft chip (not retro) */
.c-tag {
  display: inline-flex; align-items: center; gap:var(--space-1);
  padding:var(--space-05) var(--space-3); margin:var(--space-05); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--link);
  font-size: var(--text-sm); line-height: 1.4; transition: background-color .12s ease, border-color .12s ease;
}
.c-tag:hover { background: var(--surface); border-color: var(--accent); text-decoration: none; }
.c-tag--pill   { border-radius: var(--radius-pill); padding:var(--space-05) var(--space-3); }
.c-tag--number { font-family: var(--font-mono); color: var(--ink-muted); }
.c-tag--mark   { border-color: var(--mark); color: var(--mark); }
.c-tag--muted  { background: var(--bg-soft); color: var(--ink-muted); }

/* Word list (cloud) */
.c-word-list { display: flex; flex-wrap: wrap; gap:var(--space-1); margin: var(--space-2) 0; }

/* ====== components/toast.css ====== */
/* Toast — geçici bildirim (client: window.nndToast; server: nnd_toast). js/ds.js
   FAZ-2.5: her ton için DOYGUN RENKLİ ZEMİN kaldırıldı (koca renkli slab kaba duruyordu).
   Zemin tek ve nötr; semantik renk küçük bir noktada yaşıyor — alert'teki mantığın aynısı. */
.c-toasts {
  position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 340px;
}
.c-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--ink); color: var(--surface);
  box-shadow: var(--shadow-menu);
  font-size: var(--text-sm); line-height: 1.4;
  animation: c-toast-in .25s ease;
}
/* Ton işareti: küçük dolu nokta (zemin hep nötr kalır) */
.c-toast::before {
  content: ""; flex: none; width: var(--space-2); height: var(--space-2);
  border-radius: 50%; margin-top: .38em; background: currentColor; opacity: .55;
}
.c-toast--info::before    { background: #7fb2e8; opacity: 1; }
.c-toast--success::before { background: #6cc38d; opacity: 1; }
.c-toast--warning::before { background: #e3b969; opacity: 1; }
.c-toast--danger::before  { background: #e88b80; opacity: 1; }

@keyframes c-toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
.c-toast--out { opacity: 0; transform: translateY(var(--space-2)); transition: opacity .25s ease, transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .c-toast { animation: none; } }

/* ====== components/tooltip.css ====== */
/* Tooltip — CSS-only (hover + keyboard focus). For rich content use a popover instead. */
.c-tooltip { position: relative; display: inline-flex; }
.c-tooltip__bubble {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); font-size: var(--text-xs); line-height: 1.4;
  padding:var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); z-index: var(--z-overlay);
}
.c-tooltip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--ink);
}
.c-tooltip:hover .c-tooltip__bubble, .c-tooltip:focus-within .c-tooltip__bubble { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .c-tooltip__bubble { transition: none; } }

/* ====== 40-utilities.css ====== */
/* ===== UTILITIES (nadir, son çare) ===== */
.center { text-align: center; }
.inb, .noblock { display: inline-block; }
.border { border: 1px solid var(--border); }
.full-width { width: 100%; }
.temizle { clear: both; }
.golge { box-shadow: 0 1px 4px 0 rgba(0,0,0,.25); }
main.golge, main { box-shadow: 0 1px 4px 0 rgba(0,0,0,.25); }

.margin10 { margin: 10px 0; }
.margin20 { margin: 20px 0; }
.margin10a { display: block; margin: 10px auto; }
.marginl10 { margin-left: 10px; }
.pad10t { padding: 10px 0; }

.gri { color: var(--ink-soft); }
.yesil { color: var(--success); }
.kirmizi { color: var(--danger); }
.bgsari { background-color: var(--highlight); }
.bg-gri { background-color: var(--bg-soft); }

.slogan { font-size: .9rem; color: var(--border); }
.logo { max-width: 100%; height: auto; margin-top: 3px; }

time, ul .date { color: var(--ink-muted); font-size: 85%; display: block; }
#favekle, cite { font-size: .875rem; }

/* ====== 45-retro.css ====== */
/* ===== RETRO "SPICE" (measured retro over a modern base) =====
   Modern soft-elevation instead of heavy borders; retro only as character touches. */

/* Classic web: links underline on hover (retro touch) */
a:hover { text-decoration: underline; }

/* main: modern card — soft elevation + thin divider + rounded corners */
main {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
}

/* Header: thin modern divider (old 2px heavy border removed) */
.c-header { border-bottom: 1px solid var(--hairline); }

/* "Data" fields in monospace — retro + functional (spice, limited) */
.okunus, .c-tag--number, .comcon .date { font-family: var(--font-mono); }

/* Retro highlighter for the warning yellow (measured) */
.uyari, .bgsari { box-shadow: inset 0 -2px 0 rgba(0,0,0,.05); }

/* NOTE: old "double-rule under every heading" removed — modern, clean headings.
   The retro rule signature survives only on the entry header (.c-entry__rule). */

/* ====== 55-signature.css ====== */
/* ===== SIGNATURE TYPOGRAPHY =====
   Headings in the display serif (Fraunces) — a dictionary/lexicon feel. Body stays sans. */
main h1, main h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
main h3 { font-family: var(--font-display); font-weight: 600; }
.slogan { font-family: var(--font-quote); font-style: italic; }

/* The entry headword is already serif; its h1 is exempt from the rule (own style) */
.c-entry__word { letter-spacing: -.01em; }