/* ============================================================================
   Redaktum landing — v4 "düzeltilmiş müsvedde" (13 Eyl 2026)
   ----------------------------------------------------------------------------
   v3 klasik SaaS kalıbıydı ve kullanıcı haklı olarak "her yerde bunun aynısı
   var" dedi. Bu sürümün kimliği ürünün kendi dünyasından geliyor: kırmızı
   kalemle düzeltilmiş bir makale sayfası.

   Üç karar bu kimliği taşıyor:
   1) KIRMIZI YALNIZCA İŞARET İÇİN. Düzeltmenin mürekkebi; düğmede, başlıkta,
      rozette kullanılmıyor. Sayfada kırmızı görünen her şey bir ölçüm notu.
   2) BAŞLIKLAR SERİF (Literata), gövde ve arayüz panelin Manrope'u. Landing
      derginin ön sayfası gibi, ürün ekranı gibi değil.
   3) KENAR PAYI GERÇEK. Sol tarafta ince bir marj çizgisi ve orada bölüm
      kodları (§1, §2…) duruyor — müsveddenin kenarına düşülen not gibi.

   Renk token'ları panelin v2 sistemiyle aynı; eklenen tek şey --mark (kırmızı).
   ============================================================================ */

:root {
  --paper: #F7F7F5;          /* kâğıt: nötr, hafif sıcak değil — soğuk gri-beyaz */
  --surface: #FFFFFF;
  --sunken: #EFF1F0;
  --ink: #0B1014;
  --ink-2: #3F4B55;
  --muted: #6A757D;
  --rule: #DCE0E0;
  --rule-strong: #C7CDCD;

  --brand: #0B7A8A;
  --brand-soft: #E2F1F3;
  --accent: #B07A2A;
  --accent-ink: #8A5E1C;
  --accent-soft: #F7EEDF;
  --live: #1F7A55;
  --live-soft: #E3F1EA;

  /* Düzeltme mürekkebi. BAŞKA HİÇBİR ŞEYDE kullanılmıyor. */
  --mark: #C03A2B;
  --mark-soft: #FBEAE7;

  --btn: #0B1014;
  --btn-hover: #232C33;
  --on-btn: #FFFFFF;

  --serif: Literata, Georgia, "Times New Roman", serif;
  --font: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --max: 66rem;
  color-scheme: light;
}

/* KOYU TEMA YOK (21 Eylül kararı): tek palet, ve "color-scheme: light"
   tarayıcıya da söylüyor — form denetimleri ve kaydırma çubuğu işletim sistemi
   koyu olsa bile açık çiziliyor. */




* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16.5px/1.65 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
svg { max-width: 100%; height: auto; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.4rem; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); line-height: 1.12; }
h2 { font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.2; }
h3 { font-size: 1.06rem; line-height: 1.3; }
p { margin: 0; }
strong { font-weight: 700; }

/* Ölçüm rakamları hep mono: ürün ölçüyor, sayfa ölçüyü gösteriyor. */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Dipnot: çekinceler metni kesmesin, aşağıda "Notlar"da dursun. */
.fn { font: 500 0.7em/1 var(--mono); color: var(--mark); text-decoration: none; vertical-align: super; padding-left: 1px; }
.fn:hover { text-decoration: underline; }

/* Dipnot rakamı 7×13 piksel — parmakla basılamaz. Görünen boyut AYNI kalıyor, basılabilir
   alan görünmez bir kutuyla büyüyor: üst simge bir cümlenin sonunda duruyor ve onu
   büyütmek metnin akışını bozardı. */
@media (pointer: coarse) {
  .fn { position: relative; }
  .fn::after { content: ""; position: absolute; inset: -14px -10px; }
}

/* ------------------------------------------------------------------ kenar payı */

/* Bölümler sol kenarda ince bir marj çizgisi taşıyor; kod o çizginin üstünde. */
.sec { border-top: 1px solid var(--rule); }
.sec > .wrap { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 2.5rem;
               padding-block: clamp(3rem, 6vw, 4.5rem); }
.sec > .wrap > .marg { border-right: 1px solid var(--rule); padding-right: 1rem; }
.marg .code { font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.06em; color: var(--muted); display: block; }
.marg .code b { display: block; color: var(--mark); font-weight: 500; }
.sec > .wrap > .body { display: grid; gap: 1.6rem; min-width: 0; }
@media (max-width: 820px) {
  .sec > .wrap { grid-template-columns: 1fr; gap: 0.9rem; }
  .sec > .wrap > .marg { border-right: 0; border-left: 2px solid var(--mark); padding: 0 0 0 0.75rem; }
  .marg .code b { display: inline; }
  .marg .code b::before { content: " "; }
}

.lede { font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }
.small { font-size: 0.92rem; color: var(--muted); max-width: 70ch; }

/* ------------------------------------------------------------------ düğmeler */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; cursor: pointer;
  font: 700 0.95rem/1 var(--font); padding: 0.9rem 1.3rem; border-radius: 4px; border: 1px solid transparent;
}
.btn-primary { background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* ------------------------------------------------------------------ üst şerit */

.top { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 10; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.wordmark { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.top .links { display: flex; align-items: center; gap: 1.3rem; font-size: 0.92rem; }
.top .links a { color: var(--ink-2); text-decoration: none; }
.top .links a:hover { color: var(--ink); }
@media (max-width: 820px) { .top .links a.hide-sm { display: none; } }
.top .links .btn { white-space: nowrap; }

/* ------------------------------------------------------------------ kahraman */

.hero { border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
              padding-block: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero .stack { display: grid; gap: 1.35rem; }
.kicker { font: 500 0.74rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kicker b { color: var(--mark); font-weight: 500; }
.hero .lede { font-size: 1.15rem; }
.hero .lede--promise { color: var(--ink); }
/* Üç kısa söz, yan yana. Aralarında YALNIZCA boşluk vardı ve satır tek bir uzun cümle gibi
   okunuyordu: "no card journals and events in one account your OJS stays the system of record".
   Her sözün başına bir im koymak, üç ayrı söz olduklarını bakar bakmaz söylüyor. */
.hero .ticks { display: flex; flex-wrap: wrap; gap: 0.35rem 1.3rem; font: 500 0.86rem/1.5 var(--mono); color: var(--muted); }
.hero .ticks span { position: relative; padding-left: 1rem; }
.hero .ticks span::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--live); font-weight: 700; }

/* ── TELEFONDA KAHRAMAN ──────────────────────────────────────────────────────────────
   Masaüstünde metin solda, kayıt defteri sağda ve ikisi birlikte okunuyor. Telefonda
   sütunlar üst üste biniyor ve geriye tek bir şey kalıyor: on bir satırlık, hiçbir yerinde
   nefes olmayan gri bir blok. Ölçüldü — 740 piksellik ekranın %45'i tek paragraf, ürünün
   görseli ise 889 pikselde, yani bir ekran aşağıda.

   Üç şey yapılıyor, üçü de aynı sebeple: bloğu hafifletmek.

   1. Punto ve satır aralığı biraz kısılıyor. Metin AYNI — mobile ayrı bir metin yazmak,
      telefondan bakana daha az şey anlatmak olurdu.
   2. Boşluklar sıkılıyor: masaüstündeki 1.35rem, iki sütun yan yanayken nefes; tek sütunda
      araya giren boşluk oluyor.
   3. Düğmeler tam genişlik ve eşit. Ayrı genişlikte iki düğme, alt alta düştüğünde
      tırtıklı bir kenar bırakıyordu; tek blok hâlinde durmaları hem düzenli hem daha kolay
      basılır. */
@media (max-width: 620px) {
  /* ÜRÜN İLK EKRANA GELİYOR.
     Masaüstünde kayıt defteri metnin sağında ve ikisi birlikte okunuyor. Telefonda sütunlar
     üst üste binince görsel 778 piksele düşüyordu: yani telefondan bakan biri, ürünün neye
     benzediğini hiç görmeden karar veriyordu.
     `display: contents` ile `.stack` kutusu ortadan kalkıyor ve çocukları doğrudan
     kahramanın ızgarasına giriyor — ancak o zaman görsel, başlıkla paragrafın ARASINA
     sıralanabiliyor. Kutuyu kaldırmak bir anlam kaybı değil: `.stack` düz bir `div`. */
  .hero .stack { display: contents; }
  .hero .wrap { gap: 1rem; }
  .hero .kicker { order: 1; }
  .hero h1 { order: 2; }
  .hero .proof-fig { order: 3; }
  .hero .lede { order: 4; }
  .hero .btn-row { order: 5; }
  .hero .ticks { order: 6; }
  .hero .lede { font-size: 1.02rem; line-height: 1.55; }
  .hero .btn-row { display: grid; gap: 0.6rem; }
  .hero .btn-row .btn { justify-content: center; }
  .hero .ticks { gap: 0.3rem 1rem; font-size: 0.8rem; }
}

/* Müsvedde: SVG olarak çizildi, her ekranda ölçüsü bozulmuyor. */
.proof-fig { margin: 0; display: grid; gap: 0.7rem; }
.proof-fig figcaption { font: 500 0.76rem/1.5 var(--mono); color: var(--muted); }
.proof-fig figcaption b { color: var(--mark); font-weight: 500; }

/* ------------------------------------------------------------------ ölçü şeridi */

.strip { border-bottom: 1px solid var(--rule); background: var(--surface); }
.strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem 2rem; padding-block: 1.35rem; }
.strip div { display: grid; gap: 0.1rem; }
.strip .v { font: 500 1.35rem/1.2 var(--mono); letter-spacing: -0.03em; color: var(--ink); }
.strip .k { font-size: 0.86rem; color: var(--muted); }

/* ------------------------------------------------------------------ iki sütun (sorun/çözüm) */

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; gap: 2rem; } }
.two > div { display: grid; gap: 0.9rem; align-content: start; }
.two h3 { font-family: var(--font); font: 600 0.74rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.two.divided > div:first-child { padding-right: 2.5rem; border-right: 1px solid var(--rule); }
@media (max-width: 760px) { .two.divided > div:first-child { padding-right: 0; border-right: 0; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); } }
.two ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; color: var(--ink-2); }
/* Madde imleri MUTLAK konumlu, grid DEĞİL.
 *
 * Eskiden her `li` iki kolonluk bir grid'di: birinci kolon im, ikinci kolon metin. Kalıbın
 * sessiz şartı, maddenin İÇİNDE tek bir metin parçası olmasıydı — çünkü grid her çocuğu ayrı
 * bir öge yapıyor. `<b>` ya da bir bağlantı içeren madde üç ögeye bölünüyor ve üçüncüsü 1 rem
 * genişliğindeki im kolonuna düşüyordu: 21 Eylül'de canlı sayfada "paying for the year is two
 * months cheaper" cümlesi kelime kelime alt alta diziliyordu.
 *
 * Dolgu + mutlak im bu şartı ortadan kaldırıyor: madde ne içerirse içersin metin normal akıyor. */
.two li { position: relative; padding-left: 1.8rem; }
.two .before li::before { content: "✗"; position: absolute; left: 0; top: 0; color: var(--mark); font-weight: 700; font-size: 0.9rem; }
.two .after li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--live); font-weight: 700; font-size: 0.9rem; }

/* ------------------------------------------------------------------ madde listesi (özellikler) */

/* Özellikler kart değil: derginin içindekiler sayfası gibi kod + satır. */
.items { display: grid; gap: 0; }
.item { display: grid; grid-template-columns: 7rem 1fr; gap: 0 1.5rem; padding: 1.15rem 0; border-top: 1px dotted var(--rule-strong); }
.item:first-child { border-top: 0; }
.item .id { font: 500 0.74rem/1.7 var(--mono); color: var(--brand); letter-spacing: 0.04em; }
.item .txt { display: grid; gap: 0.3rem; }
.item p { color: var(--ink-2); font-size: 0.97rem; }
@media (max-width: 620px) { .item { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ------------------------------------------------------------------ blok + görsel */

.block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
.block + .block { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); }
.block.flip .text { order: 2; }
@media (max-width: 860px) { .block { grid-template-columns: 1fr; } .block.flip .text { order: 0; } }
.block .text { display: grid; gap: 0.9rem; align-content: start; }
.block .text p { color: var(--ink-2); }
.block ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; color: var(--ink-2); font-size: 0.96rem; }
.block li { position: relative; padding-left: 1.6rem; }
.block li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--brand); font-family: var(--mono); font-size: 0.8rem; }

/* Mektup kâğıdı */
.letter { background: var(--surface); border: 1px solid var(--rule); box-shadow: 8px 8px 0 var(--sunken); }
.letter .head { padding: 1rem 1.2rem 0.8rem; border-bottom: 2px solid var(--accent); display: grid; gap: 0.3rem; }
.letter .ph { border: 1px dashed var(--rule-strong); padding: 0.4rem 0.6rem; font: 500 0.68rem/1.3 var(--mono); color: var(--muted); }
.letter .body { padding: 1.05rem 1.2rem 1.15rem; display: grid; gap: 0.65rem; font-size: 0.88rem; color: var(--ink-2); }
.letter .body strong { color: var(--ink); }
.letter ol { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.4rem; }
.letter .foot { padding: 0.55rem 1.2rem; border-top: 1px solid var(--rule); background: var(--sunken);
                display: flex; justify-content: space-between; gap: 0.5rem; font: 500 0.7rem/1.4 var(--mono); color: var(--muted); }

/* ------------------------------------------------------------------ tablo */

.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 16, 20, 0.12), rgba(11, 16, 20, 0)) left center / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 16, 20, 0.12), rgba(11, 16, 20, 0)) right center / 1rem 100% no-repeat scroll;
}
table.j { width: 100%; border-collapse: collapse; min-width: 40rem; font-size: 0.94rem; }
table.j caption { text-align: left; font: 500 0.74rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.6rem; }
table.j thead th { font: 600 0.8rem/1.3 var(--font); text-align: left; padding: 0.55rem 0.9rem 0.55rem 0;
                   border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); }
table.j thead th.us { color: var(--brand); }
table.j th[scope="row"] { font-weight: 600; text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; width: 26%; vertical-align: top; }
table.j td { padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; }
table.j td.us { color: var(--ink); font-weight: 600; }
table.j tbody tr:last-child td, table.j tbody tr:last-child th { border-bottom: 1.5px solid var(--ink); }

/* ------------------------------------------------------------------ fiyat */

/* Para birimi anahtarı: fiyat tablosunun üstünde, iki küçük düğme. Seçili olan yalnızca
   renkle değil KENARLIKLA da ayrılıyor — renk körü bir ziyaretçi hangi fiyata baktığını
   görebilmeli. */
/* Para birimi anahtarının kuralları 21 Eylül'de silindi: anahtar kalktı,
   ziyaretçi kendi para birimini görüyor (bkz. price.js). */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; border: 1px solid var(--rule); background: var(--surface); }
.plan { padding: 1.5rem 1.5rem 1.7rem; display: grid; gap: 0.8rem; align-content: start; border-left: 1px solid var(--rule); }
.plan:first-child { border-left: 0; }
@media (max-width: 700px) { .plan { border-left: 0; border-top: 1px solid var(--rule); } .plan:first-child { border-top: 0; } }
.plan.pick { background: var(--brand-soft); }
.plan h3 { font: 600 0.74rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.plan.pick h3 { color: var(--brand); }
.price { display: flex; align-items: baseline; gap: 0.35rem; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.price .n { font-size: 2.1rem; font-weight: 500; letter-spacing: -0.04em; }
.price .per { font-size: 0.82rem; color: var(--muted); }

/* Birim: fiyatın YANINDA değil ALTINDA ve gri değil mürekkep rengi.
 *
 * İki kartta aynı sayı duruyor (dergi başına yıllık ile konferans başına tek seferlik aynı
 * fiyat) ve birimi fiyatın yanındaki 0.82rem gri yazıya sıkıştırmak, okuyan kişiyi "bu ikisi
 * neden aynı" sorusuyla baş başa bırakıyordu. Cümle tam yazılıyor: "per journal, per year". */
/* Örnek hesap: fiyat kartlarının hemen altında, kendi kutusunda.
   Kartların içine sıkıştırılsaydı üç kartın hangisine ait olduğu belirsiz kalırdı —
   oysa anlattığı şey üçünün TOPLAMI. */
.example { border: 1px solid var(--rule); background: var(--surface); padding: 1.15rem 1.3rem;
           display: grid; gap: 0.7rem; }
.example h3 { font-family: var(--font); font-size: 0.95rem; font-weight: 700; }
.example ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; font-size: 0.95rem; color: var(--ink-2); }
.example li { position: relative; padding-left: 1.4rem; }
.example li::before { content: "+"; position: absolute; left: 0.25rem; top: 0; color: var(--brand); font-weight: 700; }
.example li b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.example p { font-size: 0.95rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 0.7rem; }
.example p span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.plan .unit { margin: -0.45rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.plan .alt { margin: 0; font-size: 0.88rem; color: var(--muted); }
.plan .alt span { color: var(--ink-2); font-weight: 600; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.93rem; color: var(--ink-2); }
.plan li { position: relative; padding-left: 1.4rem; }
.plan li::before { content: "·"; position: absolute; left: 0.25rem; top: 0; color: var(--brand); font-weight: 700; }

/* ------------------------------------------------------------------ alıntı, sss, notlar */

.pull { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.45; color: var(--ink);
        border-left: 2px solid var(--mark); padding-left: 1.25rem; max-width: 44ch; }
.pull + .by { font: 500 0.82rem/1.5 var(--mono); color: var(--muted); padding-left: 1.4rem; }

details { border-top: 1px dotted var(--rule-strong); padding: 0.95rem 0; }
details:first-of-type { border-top: 1.5px solid var(--ink); }
summary { cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--mono); color: var(--mark); }
details[open] summary::after { content: "–"; }

/* SSS başlıkları 26 piksel yüksekliğindeydi; telefonda açmak için nişan almak gerekiyordu.
   Yalnızca dokunmatikte büyüyor — masaüstünde satır aralığı zaten yeterli ve fazladan
   boşluk listeyi gereksizce uzatırdı. */
@media (pointer: coarse) {
  summary { padding-block: 0.55rem; }
}
details p { margin-top: 0.65rem; color: var(--ink-2); font-size: 0.95rem; max-width: 68ch; }

.notes { display: grid; gap: 0.6rem; font-size: 0.88rem; color: var(--muted); max-width: 70ch; }
.notes li { position: relative; padding-left: 1.9rem; }
.notes ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; counter-reset: note; }
.notes li::before { counter-increment: note; content: counter(note); position: absolute; left: 0; top: 0; font: 500 0.72rem/1.6 var(--mono); color: var(--mark); }

/* ------------------------------------------------------------------ kapanış + kolofon */

.closing { border-top: 1.5px solid var(--ink); }
.closing .wrap { padding-block: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 1.2rem; max-width: 46rem; }
.closing h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }

footer { border-top: 1px solid var(--rule); background: var(--surface); padding: 2.5rem 0 3rem; font-size: 0.9rem; color: var(--muted); }
footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; } }
footer h3 { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; }
footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; }
/* Kolofon: matbaa geleneği. Sayfanın neyle dizildiğini ve kimin işlettiğini söyler. */
footer .by { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem;
  color: var(--muted); font-size: 0.85rem; text-decoration: none; }
/* Logo, duran hâlde çevresindeki metinle aynı tonda. Marka rengini sabitlemek,
   Redaktum'un sayfasında ikinci bir marka gibi okunurdu; ayrıca gri wordmark koyu
   zeminde kaybolurdu. Renk yalnızca üstüne gelince beliriyor. */
footer .by .duokod { flex: none; }
footer .by:hover { color: var(--ink-2); text-decoration: none; }
footer .by:hover .dk-mark { fill: #1BB99B; }

.colophon { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
            font: 400 0.82rem/1.7 var(--mono); color: var(--muted); }

/* ------------------------------------------------------------------ işaretler */

/* Kırmızı işaretler açılışta çiziliyormuş gibi geliyor: sayfa önce temiz
   müsvedde, sonra düzeltilmiş hâli. Toplam süre 1,2 sn; bitince kalıyor
   (forwards). Hareketi kapatan kullanıcıda hepsi baştan görünür. */
.mk.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw 0.55s ease-out forwards; }
.mk.fade { opacity: 0; animation: mk-fade 0.4s ease-out forwards; }
.mk.stamp { opacity: 0; animation: mk-fade 0.35s ease-out forwards; }
.mk.d1 { animation-delay: 0.15s; }
.mk.d2 { animation-delay: 0.35s; }
.mk.d3 { animation-delay: 0.55s; }
.mk.d4 { animation-delay: 0.75s; }
.mk.d5 { animation-delay: 0.95s; }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }
@keyframes mk-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mk { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}

/* ------------------------------------------------------------------ 404 */

.stamped { display: grid; gap: 1.5rem; justify-items: start; padding-block: clamp(3rem, 8vw, 6rem); }
.stamped .mark-box {
  border: 2px solid var(--mark); background: var(--mark-soft); color: var(--mark);
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.12em; padding: 0.7rem 0.9rem;
  transform: rotate(-4deg);
}

/* ------------------------------------------------------------------ yazdırma */

/* Sayfa yazdırılınca belge gibi çıksın: menü, düğmeler ve kabuk gitsin,
   bağlantıların adresi yanına yazılsın, SSS cevapları açık gelsin. */
@media print {
  .top, .btn, .btn-row, .strip { display: none !important; }
  body { background: #FFF; color: #000; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }
  .sec { border-top: 1px solid #BBB; }
  .sec > .wrap { padding-block: 1.2rem; grid-template-columns: 5rem 1fr; gap: 0 1.5rem; }
  .marg .code, .marg .code b { color: #666; }
  .hero .wrap { grid-template-columns: 1fr 1fr; padding-block: 0 1.5rem; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; break-after: avoid; }
  details > p { display: block !important; }
  summary::after { content: ""; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font: 400 8pt var(--mono); color: #555; }
  .fn { color: #000; }
  footer { background: none; }
}

/* "Kutunun içindekiler" — kapalı gelen bir liste.
   Açık gelseydi konferans bölümü on bir maddelik bir duvara dönerdi ve asıl anlatılan şey
   (zincirin kendisi) o duvarın altında kalırdı. Merak eden açıyor. */
.more { border: 1px solid var(--rule); background: var(--surface); padding: 0.75rem 1rem; }
.more summary { font: 600 0.92rem/1.4 var(--font); }
.more__body { padding-top: 0.8rem; }
.more__body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem;
                 font-size: 0.93rem; color: var(--ink-2); }
.more__body li { position: relative; padding-left: 1.4rem; }
.more__body li::before { content: "·"; position: absolute; left: 0.3rem; top: 0; color: var(--brand); font-weight: 700; }
.more__body li b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ fiyat kademeleri

   Üç kart yerine iki tablo ve bir deneme kutusu (21 Eylül). Kartlar tek fiyatlı bir modeli
   anlatmak için vardı; model ölçeğe göre olunca kartın söyleyemediği şey "hangi rakam ne
   zaman" oldu. Tablo tam olarak bunu söylüyor: solda ölçü, sağda fiyat. */
/* ── FİYAT KUTUSU ─────────────────────────────────────────────────────────────────
   Tek kutu, iki bölge: üstte hesap, altta oranlar. Üç ayrı beyaz kart vardı ve bölüm
   parçalı görünüyordu — üstelik aynı rakam iki kutuda birden yazıyordu. Bölgeleri ayıran
   şey artık bir çizgi, ayrı bir kart değil. */
.price-card { background: var(--surface); border: 1px solid var(--rule); }

.price-card__calc { display: grid; gap: 1rem; padding: 1.4rem 1.5rem; }
/* `display` yazan her kural, tarayıcının `[hidden] { display: none }` kuralını eziyor.
   Betik yoksa hesap kutusu hiç çizilmemeli ve bunu söyleyen kural burada durmalı. */
.price-card__calc[hidden] { display: none; }

/* Oranlar İKİNCİ sırada ve daha sessiz bir zeminde: gizli değiller — karşılaştıran okur
   onları arıyor — ama karar veren okurun gözü önce hesaba düşüyor. */
.price-card__rates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem;
                     padding: 1.3rem 1.5rem 1.4rem; background: var(--paper);
                     border-top: 1px solid var(--rule); }
/* İki tablo arasında çizgi: aralık tek başına yetmiyordu — soldaki sağa yaslı rakam,
   sağdaki etiketin hemen yanında bitiyor ve ikisi tek tablo gibi okunuyordu. */
.price-card__rates .rate + .rate { border-left: 1px solid var(--rule); padding-left: 3rem; }
.rate { display: grid; gap: 0.6rem; align-content: start; }
.rate h3 { font: 600 0.72rem/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase;
           color: var(--muted); margin: 0; }
.rate table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rate th { text-align: left; font: 500 0.68rem/1.4 var(--mono); letter-spacing: 0.08em;
           text-transform: uppercase; color: var(--muted); padding-bottom: 0.35rem;
           border-bottom: 1px solid var(--rule); }
.rate th:last-child { text-align: right; }
.rate td { padding: 0.45rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.rate tr:last-child td { border-bottom: 0; }
.rate td:last-child { text-align: right; }
.rate .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.02rem;
           color: var(--ink); font-weight: 500; }
.rate__note { font-size: 0.85rem; color: var(--muted); margin: 0; }

/* Deneme: kart değil tek satır. Fiyatların yanında eşit ağırlıkta bir kutu olarak durması,
   ücretsiz olan şeyi fiyatlandırılmış bir kaleme benzetiyordu. */
.trial { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem;
         margin-top: 1.1rem; }
.trial p { margin: 0; flex: 1 1 22rem; font-size: 0.95rem; color: var(--ink-2); }

@media (max-width: 720px) {
  .price-card__rates { grid-template-columns: 1fr; gap: 1.4rem; }
  .price-card__rates .rate + .rate { border-left: 0; padding-left: 0;
                                     border-top: 1px solid var(--rule); padding-top: 1.4rem; }
}

/* ── HESAPLAYICININ İÇİ ───────────────────────────────────────────────────────────
   Kutunun üst bölgesi; çerçeveyi `.price-card__calc` çiziyor. Alanlar büyük ve
   dokunmatikte rahat — hesaplayan kişi burada rakam yazıyor, okumuyor. */
.calc__h { font: 600 0.74rem/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase;
           color: var(--muted); margin: 0; }

/* Üç alan yan yana; dar ekranda alt alta. `auto-fit` ile: bant alanı gizlendiğinde
   kalan ikisi boşluğu dolduruyor, ortada delik kalmıyor. */
.calc__form { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.calc__f { display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }
/* `display` yazan her kural, tarayıcının `[hidden] { display: none }` kuralını eziyor:
   bant alanı gizlendi sanılıyor, ekranda duruyordu. Gizleme kuralı görünür olanla aynı
   yerde durmalı — ayrı bir yere yazılsa, bir sonraki `display` onu da sessizce ezer. */
.calc__f[hidden] { display: none; }
.calc__f input, .calc__f select {
  font: 500 1rem/1.4 var(--font); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px; padding: 0.5rem 0.6rem; width: 100%;
}
.calc__f input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.calc__f input:focus-visible, .calc__f select:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 1px;
}

.calc__out { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.calc__out td, .calc__out th { padding: 0.55rem 0; text-align: left;
                               border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.calc__out tfoot th, .calc__out tfoot td { border-bottom: 0; border-top: 1px solid var(--rule);
                                           padding-top: 0.7rem; font-weight: 600; color: var(--ink); }
.calc__v, .calc__total { text-align: right; font-family: var(--mono);
                         font-variant-numeric: tabular-nums; color: var(--ink); }
.calc__total { font-size: 1.15rem; }

/* Birim fiyat ve kademe adı, satırın altında ve sessiz: toplamın nereden geldiğini
   söylüyor ama rakamın kendisiyle yarışmıyor. */
.calc__each { display: block; font-size: 0.82rem; color: var(--muted); }
.calc__note { font-size: 0.85rem; color: var(--muted); margin: 0; }

/* Konferans sayfasindaki bant tablosu: index'teki kademe tablosunun AYNISI, tek fark
   durdugu kutu (.plan). Iki ayri gorunum, ayni fiyat modelinin iki sayfada baska
   okunmasi demek olurdu. */
.bands { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0.2rem 0 0.4rem; }
.bands th { text-align: left; font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em;
            text-transform: uppercase; color: var(--muted); padding-bottom: 0.4rem;
            border-bottom: 1px solid var(--rule); }
.bands td { padding: 0.5rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.bands tr:last-child td { border-bottom: 0; }
.bands td:last-child { text-align: right; }
.bands .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.05rem;
            color: var(--ink); font-weight: 500; }

/* ── §6 PARA: ÜÇ İŞ ────────────────────────────────────────────────────────────────
   Bölüm yalnızca "para bizde durmuyor" diyordu — doğru ama savunma cümlesi. Tahsilatı
   kuran, bekleyeni gösteren ve mutabakatı yapan da ürün ve bunun yazması gerekiyordu.
   Üç kutu, üç cümle: kart, ekran, rapor. Kutu değil SÜTUN — bu bölümde çerçeveli bir
   kart, fiyat bölümündeki kutuyla yarışırdı. */
.money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
              margin: 1.3rem 0 1.1rem; }
.money-item { display: grid; gap: 0.4rem; align-content: start;
              border-top: 2px solid var(--ink); padding-top: 0.7rem; }
.money-item h3 { font: 600 0.72rem/1 var(--font); letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--muted); margin: 0; }
.money-item p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

@media (max-width: 720px) {
  .money-grid { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Bir RAKAMIN yerine sözcük koyunca (`Talk`) dev puntolu bir kutu çıkıyordu; o stil
   rakam için yazılmış. Bu kartın söyleyeceği şey bir fiyat değil, bir davet. */
.plan__talk { margin: 0.2rem 0 0.4rem; font-size: 0.95rem; color: var(--ink-2); }