/* ============================================================
   EduFabTech — Global Stylesheet  (v2 — editorial redesign)
   Koyu tema · serif baslik + Inter arayuz · tek vurgu rengi
   ⚠️ Degisken ve sinif adlari load-bearing — yeniden adlandirma.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Tek vurgu. Az kullanilir: logo noktasi, baglantilar, birincil eylem. */
  --brand:      #43d49b;
  --brand-2:    #7cecc0;
  --brand-dim:  rgba(67, 212, 155, .10);
  --brand-ink:  #04140d;

  /* Notr olcek — kagit hissi veren sicak-notr metin, soguk koyu zemin */
  --bg:         #0a0c11;
  --bg-2:       #0c0f15;
  --surface:    #10141c;
  --card:       #131822;
  --card-2:     #19202c;
  --border:     #1f2733;
  --border-2:   #2b3542;
  --hair:       #171d27;   /* cok ince ayirici */

  --text:       #edf0f5;
  --text-2:     #a9b4c2;
  --muted:      #6f7c8d;

  --link:       #86c8ff;
  --warn:       #e8b25c;
  --err:        #ef6a62;

  --radius:     12px;
  --radius-sm:  8px;
  --radius-pill:999px;

  --nav-h:      64px;
  --wrap:       1160px;
  --gutter:     24px;
  --t:          .18s cubic-bezier(.4,0,.2,1);

  --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column; min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.main { flex: 1 0 auto; padding-block: 44px 76px; }

/* Bolum ritmi: ince cizgiyle ayrilan bantlar */
.band { padding-block: 56px; border-top: 1px solid var(--hair); }
.band:first-child { border-top: 0; }
.band-tight { padding-block: 38px; }

/* ── Masthead ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: rgba(10,12,17,.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 100%; }

.logo {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -.015em; white-space: nowrap; line-height: 1;
}
.logo .dot { color: var(--brand); }

.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
  padding: 7px 11px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; letter-spacing: .005em;
  color: var(--text-2); transition: var(--t);
}
.nav-links a:hover { color: var(--text); background: var(--card); }
.nav-links a.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }

.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-toggle {
  display: none; background: none; border: 0; color: var(--text);
  font-size: 20px; cursor: pointer; padding: 6px 8px; line-height: 1;
}

/* ── Butonlar ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 550; white-space: nowrap;
  border: 1px solid var(--border-2); background: transparent; color: var(--text);
  cursor: pointer; transition: var(--t);
}
.btn:hover { background: var(--card); border-color: var(--border-2); }
.btn-primary {
  background: var(--brand); color: var(--brand-ink);
  border-color: transparent; font-weight: 600;
}
.btn-primary:hover { background: var(--brand-2); }
.btn-ghost { border-color: transparent; color: var(--text-2); padding-inline: 10px; }
.btn-ghost:hover { color: var(--brand); background: transparent; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }

/* ── Baslik bloklari ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.page-head { margin-bottom: 30px; max-width: 66ch; }
.page-head .eyebrow { margin-bottom: 12px; }
.page-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.1; letter-spacing: -.018em;
}
.page-sub { color: var(--text-2); margin-top: 12px; font-size: 17px; line-height: 1.65; }

/* ── Ana sayfa acilis: iki sutun ──────────────────────────── */
.opener {
  display: grid; gap: 48px; align-items: start;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
  padding-block: 18px 54px;
}
.opener h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.06; letter-spacing: -.022em;
}
.opener h1 em { font-style: italic; color: var(--brand); }
.opener .lede {
  color: var(--text-2); font-size: 18px; line-height: 1.62;
  margin-top: 20px; max-width: 52ch;
}
.opener .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

/* Sag sutun: rakam paneli */
.panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  overflow: hidden;
}
.panel-head {
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-body { padding: 6px 18px 14px; }
.figure-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hair);
}
.figure-row:last-child { border-bottom: 0; }
.figure-row .k { color: var(--text-2); font-size: 14.5px; }
.figure-row .v {
  font-family: var(--serif); font-size: 27px; font-weight: 500;
  line-height: 1; letter-spacing: -.02em;
}
.figure-row .v.zero { color: var(--muted); }
.panel-note {
  padding: 12px 18px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px; background: rgba(0,0,0,.15);
}

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim); display: inline-block;
}

/* ── Bolum dizini (numarali, cizgili) ─────────────────────── */
.index-grid {
  display: grid; gap: 0 40px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.index-item {
  display: block; padding: 24px 0; border-top: 1px solid var(--border);
  transition: var(--t);
}
.index-item:hover { border-top-color: var(--brand); }
.index-item .top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.index-item .num {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: .08em;
}
.index-item h3 {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 500;
  letter-spacing: -.012em; transition: var(--t);
}
.index-item:hover h3 { color: var(--brand); }
.index-item p { color: var(--text-2); font-size: 14.8px; line-height: 1.6; max-width: 46ch; }
.index-item .count {
  margin-top: 10px; font-family: var(--mono); font-size: 12px;
  color: var(--muted); letter-spacing: .04em;
}

/* ── Bildiri / alinti bandi ───────────────────────────────── */
.statement { display: grid; gap: 40px; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; }
.statement blockquote {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.28; letter-spacing: -.015em; font-style: italic; color: var(--text);
  border-left: 2px solid var(--brand); padding-left: 22px;
}
.statement .body { color: var(--text-2); font-size: 16.5px; line-height: 1.72; }
.statement .body p + p { margin-top: 14px; }

/* ── Kartlar (liste sayfalari) ────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; transition: var(--t);
}
a.card:hover, .card-hover:hover { border-color: var(--border-2); background: var(--card-2); }
.card h3 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 500;
  letter-spacing: -.012em; line-height: 1.28; margin-bottom: 8px;
}
.card p { color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.card-icon { font-size: 20px; line-height: 1; margin-bottom: 12px; opacity: .9; }

/* ── Kapak gorselleri ─────────────────────────────────────── */
.cover { margin: 26px 0 30px; }
.cover img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--card);
}
.cover figcaption {
  margin-top: 10px; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); letter-spacing: .02em;
}
.cover figcaption a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.cover figcaption a:hover { color: var(--brand); }

/* Kartta kapak: kartin ust kenarina yapisik, 16:9 */
.card-media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media > *:not(.card-cover) { padding-inline: 20px; }
.card-media > *:not(.card-cover):last-child { padding-bottom: 20px; }
.card-cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--border); margin-bottom: 16px;
  background: var(--card-2);
}
.card-media .row:first-of-type { margin-top: 0; }

/* ── Rozet / cip ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  background: var(--card-2); color: var(--text-2); border: 1px solid var(--border);
}
.badge-brand { background: var(--brand-dim); color: var(--brand); border-color: transparent; }
.badge-warn  { background: rgba(232,178,92,.12); color: var(--warn); border-color: transparent; }
.badge-soon  { background: transparent; color: var(--muted); }

.chip {
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 450; color: var(--text-2);
  background: transparent; border: 1px solid var(--border);
  transition: var(--t); cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--border-2); background: var(--card); }
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: transparent; font-weight: 550; }

/* ── Filtre cubugu ────────────────────────────────────────── */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 13px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.filters + .filters { margin-top: -6px; }
.filters .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-right: 6px;
}

select.select, input.input, textarea.textarea {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 11px; min-width: 150px;
}
select.select:focus, input.input:focus, textarea.textarea:focus { border-color: var(--brand); outline: none; }
.input-full { width: 100%; }

/* ── Formlar ──────────────────────────────────────────────── */
.form-page   { max-width: 620px; margin-inline: auto; }
.form-narrow { max-width: 430px; }

.form {
  display: grid; gap: 22px; padding: 30px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
  letter-spacing: -.012em; padding-bottom: 16px;
  border-bottom: 1px solid var(--hair); margin-bottom: -4px;
}

.field { display: grid; gap: 7px; }
.field label {
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--text);
}
.field small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.field-row { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }

.form .input, .form .select, .form .textarea {
  width: 100%; padding: 12px 14px; font-size: 15px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); transition: var(--t);
}
.form .input:hover, .form .select:hover, .form .textarea:hover { border-color: #3a4658; }
.form .input:focus, .form .select:focus, .form .textarea:focus {
  border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-dim); outline: none;
}
.form .input::placeholder { color: #5b6779; }
.form .textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.form .select:disabled { opacity: .45; cursor: not-allowed; }

/* Onay kutusu ayri bir satir — butonun yanina kaymasin */
.check {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: var(--text-2);
  padding: 14px 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.check:hover { border-color: var(--border-2); }
.check input { margin-top: 2px; accent-color: var(--brand); width: 17px; height: 17px; flex-shrink: 0; }
.check a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Gonder alani: ince cizgiyle ayrilmis, buton tam genislik */
.form-actions {
  display: grid; gap: 14px; padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.form-actions .btn { width: 100%; justify-content: center; padding-block: 12px; }
.form-foot { font-size: 14px; color: var(--muted); line-height: 1.8; text-align: center; }
.form-foot a { color: var(--link); }

@media (max-width: 560px) {
  .form { padding: 22px; gap: 18px; }
  .field-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Bos durum ────────────────────────────────────────────── */
.empty {
  text-align: center; padding: 54px 26px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
}
.empty .icon { font-size: 30px; margin-bottom: 14px; opacity: .8; }
.empty h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: 8px; }
.empty p { color: var(--text-2); max-width: 48ch; margin-inline: auto; font-size: 15px; }

/* ── Uyarilar ─────────────────────────────────────────────── */
.flash { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14.5px; }
.flash-ok   { background: var(--brand-dim);       color: var(--brand); }
.flash-warn { background: rgba(232,178,92,.10);   color: var(--warn); }
.flash-err  { background: rgba(239,106,98,.10);   color: var(--err); }

/* ── Alt bilgi ────────────────────────────────────────────── */
.footer { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg-2); }
.footer-in { padding-block: 48px 26px; }
.footer-grid {
  display: grid; gap: 36px 32px;
  grid-template-columns: 2.1fr 1fr 1fr 1fr;   /* auto-fit DEGIL: cokuyordu */
}
.footer .brand-col { max-width: 34ch; }
.footer .brand-col p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 12px; }
.footer h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer a { color: var(--text-2); font-size: 14.5px; transition: var(--t); }
.footer a:hover { color: var(--brand); }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  color: var(--muted); font-size: 13px;
}

/* ── Yonetim paneli ───────────────────────────────────────── */
body.admin .main { padding-block: 30px 60px; }
body.admin .wrap { max-width: 1320px; }
body.admin .page-head { margin-bottom: 22px; }
body.admin .page-title { font-size: clamp(1.6rem, 3vw, 2.1rem); }

.section-h {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500;
  letter-spacing: -.012em;
}

.stat-tile { text-align: left; }
.stat-tile .n {
  font-family: var(--serif); font-size: 2rem; font-weight: 500;
  line-height: 1; letter-spacing: -.02em;
}
.stat-tile .l {
  margin-top: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

.table-wrap {
  overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 12px 14px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--card); }
.table a { color: var(--text); font-weight: 500; }
.table a:hover { color: var(--brand); }
.table .right { text-align: right; white-space: nowrap; }
.warn-text { color: var(--warn); }

.inline-form { display: inline; }
.select-sm { min-width: 0; padding: 5px 9px; font-size: 12.5px; }

/* Makale editoru: iki sutun */
.editor { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.editor-side { display: grid; gap: 0; position: sticky; top: calc(var(--nav-h) + 20px); }

.toolbar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: -2px; }
.toolbar button {
  font: inherit; font-size: 12.5px; padding: 5px 11px; cursor: pointer;
  background: var(--card); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: var(--t);
}
.toolbar button:hover { color: var(--text); border-color: var(--border-2); }

.code-area {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  min-height: 420px; tab-size: 2;
}
.preview {
  padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-2); font-size: 16px; line-height: 1.75; color: var(--text-2);
  min-height: 420px;
}
.preview h2 { font-family: var(--serif); color: var(--text); font-size: 1.45rem; margin: 22px 0 10px; }
.preview h3 { font-family: var(--serif); color: var(--text); font-size: 1.2rem; margin: 18px 0 8px; }
.preview p { margin-bottom: 14px; }
.preview ul, .preview ol { margin: 0 0 14px 22px; }
.preview a { color: var(--link); text-decoration: underline; }
.preview blockquote {
  border-left: 2px solid var(--brand); padding-left: 16px; margin: 16px 0;
  font-style: italic; color: var(--text);
}

.ref-row {
  display: grid; gap: 8px; margin-bottom: 10px;
  grid-template-columns: 1.1fr 1.6fr 1fr 62px 1.2fr 1fr;
}
.ref-row .input { padding: 8px 10px; font-size: 13px; }

@media (max-width: 1100px) {
  .editor { grid-template-columns: 1fr; }
  .editor-side { position: static; }
  .ref-row { grid-template-columns: 1fr 1fr; }
}

/* ── Yardimcilar ──────────────────────────────────────────── */
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 26px; } .mt-4 { margin-top: 38px; }
.mb-3 { margin-bottom: 26px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.divider { height: 1px; background: var(--hair); border: 0; margin: 34px 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 20px; top: 10px; z-index: 99; padding: 10px 16px;
  background: var(--brand); color: var(--brand-ink); border-radius: var(--radius-sm);
}

/* ── Duyarli ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .opener { grid-template-columns: 1fr; gap: 34px; padding-block: 8px 38px; }
  .statement { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer .brand-col { grid-column: 1 / -1; max-width: 52ch; }
}
@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 10px; gap: 2px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; }
  .nav-links a.on { box-shadow: inset 3px 0 0 var(--brand); border-radius: var(--radius-sm); }
  .main { padding-block: 30px 56px; }
  .band { padding-block: 44px; }
  .index-grid { gap: 0 28px; }
}
@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer .brand-col { grid-column: 1 / -1; }
}