/* ---------------------------------------------------------------
   Sofart — drafting-sheet theme (koyu: gece paftası · açık: beyaz pafta)
   Palette (koyu tema varsayılan; açık tema :root[data-theme="light"] ile döner):
     ink        #17171A   page ground          → açıkta kâğıt #F0EEE6
     surface    #151517   raised panels        → açıkta #F9F8F3
     hairline   rgba(236,235,227,.10)          → açıkta grafit çizgiler
     gold       #EAB807   brand accent (from logo) — iki temada da AYNI
     gold-deep  #8F7106   hover / pressed
     bone       #ECEBE3   primary text         → açıkta mürekkep #181712
     putty      #A8A79D   secondary text
     accent     metin/ince çizgi vurgusu: koyuda gold, açıkta koyultulmuş altın #7A6005
                (açık zeminde #EAB807 ve #8F7106 küçük yazıda okunmaz — AA için
                koyultuldu; dolgular her yerde gold kalır)
   Değişken adları koyu temaya göredir: açık temada --ink kâğıt, --bone mürekkeptir.
   Type: Poppins (display + body, self-hosted) · IBM Plex Mono (annotation)
---------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #17171a;
  --surface: #202024;
  --hairline: rgba(236, 235, 227, 0.1);
  --hairline-strong: rgba(236, 235, 227, 0.22);
  --gold: #eab807;
  --gold-deep: #8f7106;
  --bone: #ecebe3;
  --putty: #a8a79d;
  --accent: var(--gold);
  --accent-strong: #f6ca20;
  --header-bg: rgba(23, 23, 26, 0.97);
  --ok: #7fbf7a;
  --warn: #e8a13d;
  --err: #e8674d;
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --container: 1200px;
  --container-detail: 1160px;
  --header-h: 64px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink: #f0eee6;
  --surface: #f9f8f3;
  --hairline: rgba(24, 23, 18, 0.14);
  --hairline-strong: rgba(24, 23, 18, 0.32);
  --bone: #181712;
  --putty: #605f54;
  /* #8F7106 açık zeminde ~4.0:1 kalıyordu (AA altı) — küçük mono etiketler
     için ~5.2:1 veren koyultulmuş altın; dolgu rengi --gold değişmez */
  --accent: #7a6005;
  --accent-strong: #6f5805;
  --header-bg: rgba(240, 238, 230, 0.97);
  --ok: #3c7a36;
  --warn: #8a5a10;
  --err: #b23a24;
}

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

html { scroll-padding-top: calc(var(--header-h) + 16px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  body { transition: background-color 0.25s ease, color 0.25s ease; }
}

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* inherited, so it reaches every admin-entered text field rendered on the public
     site (titles, excerpts, body content, ...) without listing each one by hand —
     a single long unbroken string (no spaces) can no longer push a card/column past
     its boundary. .post-body/.basket-summary/etc. already had their own copy of
     this; kept as harmless belt-and-suspenders rather than deduped, low value churn. */
  overflow-wrap: break-word;
  word-break: break-word;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold); color: #171204; }

.skip-link {
  position: absolute;
  top: -100%;
  left: 24px;
  z-index: 100;
  background: var(--gold);
  color: #171204;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 10px 18px;
}

.skip-link:focus-visible { top: 8px; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* İçerik/detay sayfaları (Serbest, Etkinlik, Kurs) — ana site çerçevesinden biraz
   dar, ama tek bir paylaşılan sistem; .container'ın üstüne eklenir, tek başına kullanılmaz */
.container-detail { max-width: var(--container-detail); }

/* ---------- annotation / utility type ---------- */

.eyebrow,
.dim-label,
.course-step,
.course-meta,
.tb-label,
.fact dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 20px; width: auto; }
:root[data-theme="light"] .brand-logo { content: url("assets/logo-black-small.png"); }

.site-nav {
  display: none;
  gap: 28px;
  margin-left: auto;
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--putty);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-nav a:hover { color: var(--bone); }

/* Sepet ikonu ve tema düğmesi aynı kare ikon-düğme kalıbını paylaşır ve .nav-utility
   içinde tek bir yardımcı küme olarak gruplanır (dar boşluk — .header-inner'ın genel
   32px'inden ayrı). Dar ekranda sağa itme işini KÜME üstlenir (auto margin); geniş
   ekranda bu işi .site-nav yapar, kümenin margin'i sıfırlanır. */
.nav-utility {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (min-width: 800px) {
  /* geniş ekranda sağa itme işini .site-nav yapar; auto margin boşluğu tek yerden gelsin */
  .nav-utility { margin-left: 0; }
}

.nav-cart,
.theme-toggle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--putty);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-cart { position: relative; }

.nav-cart:hover,
.theme-toggle:hover { color: var(--bone); border-color: var(--hairline-strong); }

.nav-cart svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.nav-cart .nav-badge { position: absolute; top: 2px; right: 2px; }

.theme-toggle svg { transition: transform 0.35s ease; }

:root[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }

.nav-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.2s ease;
}

.nav-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 799.98px) {
  .nav-open .site-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    margin: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 24px 16px;
  }
  .nav-open .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .nav-open .site-nav a:last-child { border-bottom: 0; }
}

@media (min-width: 800px) {
  .site-nav { display: flex; align-items: center; }
  .nav-toggle { display: none; }
}

/* Dar ekran hesap menüsü: bağlantılar hamburger menüde düz listelenir; hover ile
   açılan pafta (flyout) ve tetikleyicisi (.nav-user) yalnızca geniş ekranda kalır */
.site-nav .nav-mobile-only { display: none; }

@media (max-width: 799.98px) {
  .site-nav .nav-mobile-only { display: block; }
  .site-nav .nav-user { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-gold { background: var(--gold); color: #171204; }
.btn-gold:hover { background: #f6ca20; }

.btn-ghost { border-color: var(--hairline-strong); color: var(--bone); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: 72px;
  overflow: hidden;
}

/* drafting-paper grid, fading toward the fold */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 70% 0%, rgba(0,0,0,.5), transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, rgba(0,0,0,.5), transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
  padding-bottom: 56px;
}

.hero-copy .eyebrow { margin-bottom: 20px; color: var(--accent); }

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  text-wrap: balance;
}

.lede {
  font-size: 1.075rem;
  color: var(--putty);
  max-width: 46ch;
  margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-drawing { margin: 0; }
.axon { width: 100%; max-width: 520px; height: auto; display: block; margin-inline: auto; }

.axon path,
.axon circle {
  stroke: var(--accent);
  stroke-width: 1.4;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.axon .p-light { stroke: color-mix(in srgb, var(--bone) 28%, transparent); stroke-width: 1; }

.axon .p-anno path,
.axon .p-anno circle { stroke: color-mix(in srgb, var(--bone) 40%, transparent); stroke-width: 1; }

.axon .p-anno .dot { fill: var(--accent); stroke: none; }

.axon text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  fill: var(--putty);
  stroke: none;
}

/* ---------- dimension rule (section divider) ---------- */

.dim-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}

.dim-rule::before,
.dim-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.dim-tick {
  width: 1px;
  height: 14px;
  background: var(--hairline-strong);
  transform: rotate(24deg);
}

.dim-label { white-space: nowrap; }

/* ---------- fact strip ---------- */

.fact-strip {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--hairline);
  margin-bottom: 72px;
}

.fact {
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
}

.fact:last-child { border-bottom: 0; }

.fact dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 6px;
}

@media (min-width: 720px) {
  .fact-strip { grid-template-columns: repeat(3, 1fr); }
  .fact { border-bottom: 0; border-right: 1px solid var(--hairline); }
  .fact:last-child { border-right: 0; }
}

/* ---------- sections ---------- */

.section { padding-bottom: 96px; }

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.section-head {
  max-width: 56ch;
  margin: 24px 0 48px;
}

.section-head p { color: var(--putty); margin-bottom: 16px; }
.section-head p:last-child { margin-bottom: 0; }

/* Bölüm başlığı + aksonometrik çizim yan yana — hero-grid'in bölüm içindeki
   karşılığı, aynı 6fr/5fr oranıyla. Dar ekranda tek sütuna iner ve çizim
   metnin altına geçer; .axon kendi max-width'iyle ortalanır. */
.section-figure-grid {
  display: grid;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}

.section-figure-grid .section-head { margin-bottom: 0; }

.section-figure { margin: 0; }

@media (min-width: 900px) {
  .section-figure-grid { grid-template-columns: 6fr 5fr; gap: 64px; }
}

/* Kurslar kataloğunun teslim-türüne-özel tanıtım metni uzun formda (birden
   fazla paragraf + ara başlıklar) geliyor — standart 56ch teaser kolonu bunun
   için dar kalır, event-body-main/legal ile aynı 68ch okuma genişliğine çıkar. */
.course-list-head { max-width: 68ch; }

.course-list-head p { margin-bottom: 16px; }
.course-list-head p:last-child { margin-bottom: 0; }

/* ---------- katlanır metin (uzun paragrafları başlangıçta gizleyen editöryal blok) ----------
   Hem hero'daki "devamını oku" paragraf bloğu hem de kurslar sayfasının ara
   başlıkları için. Taban davranış <details>'in kendi native aç/kapa'sı (JS'siz
   ve azaltılmış hareket tercihinde de böyle kalır); yükseklik kayması script.js'te
   Web Animations API ile eklenir (.copy-fold elemanının kendi yüksekliği 0↔içerik
   arasında animasyonlanır, script bunu üstlendiğinde <details>'in native aç/kapa
   tıklamasını devre dışı bırakır) — burada ek bir CSS geçişi GEREKMEZ, ikisi aynı
   anda çalışırsa çift animasyon olur. */
.copy-fold {
  border-top: 1px solid var(--hairline);
  margin: 20px 0;
}

.copy-fold summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease;
}

.copy-fold summary::-webkit-details-marker { display: none; }

.copy-fold[open] summary,
.copy-fold summary:hover { color: var(--accent); }

.copy-fold summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--putty);
  transition: transform 0.4s ease, color 0.3s ease;
}

.copy-fold[open] summary::after {
  color: var(--accent);
  transform: rotate(405deg);
}

.copy-fold-body-in { overflow: hidden; }

.copy-fold-body-in > * { margin-top: 16px; }
.copy-fold-body-in > :last-child { margin-bottom: 4px; }

/* Kurslar sayfasında <summary> bir ara başlık yerine geçer (h3 diliyle) */
.copy-fold--heading summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

/* Hero'daki katlanır blokta <summary> düz bir "devamını oku" etiketidir */
.copy-fold--plain summary {
  color: var(--putty);
  font-size: 0.95rem;
}

.quote-block {
  margin: 0 0 16px;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  color: var(--bone);
  font-style: italic;
  font-size: 1.125em;
}
.quote-block:last-child { margin-bottom: 0; }

/* ---------- error pages (bulunamayan pafta) ---------- */

.error-section { padding-top: 24px; }

.error-sheet {
  position: relative;
  border: 1px solid var(--hairline-strong);
  padding: clamp(36px, 7vw, 88px) clamp(24px, 5vw, 56px);
  text-align: center;
  overflow: hidden;
}

/* çizim kâğıdı ızgarası, üstten aşağı soluyor */
.error-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(110% 80% at 50% 0%, rgba(0, 0, 0, .55), transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, rgba(0, 0, 0, .55), transparent 72%);
  pointer-events: none;
}

.error-sheet > * { position: relative; }

.error-eyebrow { color: var(--accent); }

.error-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 22vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
  color: var(--bone);
}

.error-code span { color: var(--accent); }

.error-lede {
  color: var(--putty);
  max-width: 48ch;
  margin: 16px auto 32px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* community split */

.split {
  display: grid;
  gap: 48px;
  margin-top: 24px;
}

.split-head p { color: var(--putty); max-width: 44ch; margin-bottom: 16px; }
.split-head p:last-child { margin-bottom: 0; }

.program-list { list-style: none; }

.program-list li {
  padding: 20px 0 20px 24px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}

.program-list li:first-child { border-top: 1px solid var(--hairline); }

.program-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 28px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
}

.program-list h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.program-list p { color: var(--putty); font-size: 0.95rem; }

@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 6fr; gap: 72px; }
  .split-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---------- courses ---------- */

.course-grid {
  display: grid;
  gap: 20px;
}

.course-card {
  --cut: 22px;
  --card-ink: #171204;
  position: relative;
  background: var(--hairline-strong); /* shows through as the chamfered 1px border */
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

/* inner surface, 1px inside the chamfered outline */
.course-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--surface);
  clip-path: polygon(
    calc(var(--cut) - 1px) 0, 100% 0,
    100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%,
    0 100%, 0 calc(var(--cut) - 1px)
  );
}

/* gold fill that expands from the top-left cut corner on hover */
.course-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: rgba(234, 184, 7, 0.95);
  clip-path: circle(0% at var(--cut) var(--cut));
}

.course-card > * {
  position: relative;
  z-index: 1;
}

.course-card:hover,
.course-card:focus-within {
  background: var(--gold);
}

.course-card:hover::after,
.course-card:focus-within::after {
  clip-path: circle(150% at var(--cut) var(--cut));
}

/* text flips to dark ink so it stays readable on the gold fill */
.course-card:hover :is(h2, h3),
.course-card:focus-within :is(h2, h3),
.course-card:hover .course-link,
.course-card:focus-within .course-link {
  color: var(--card-ink);
}

.course-card:hover .course-step,
.course-card:focus-within .course-step,
.course-card:hover .course-format-label,
.course-card:focus-within .course-format-label {
  color: rgba(23, 18, 4, 0.8);
}

.course-card:hover .course-desc,
.course-card:focus-within .course-desc,
.course-card:hover .course-meta,
.course-card:focus-within .course-meta {
  color: rgba(23, 18, 4, 0.72);
}

.course-card:hover .course-foot,
.course-card:focus-within .course-foot {
  border-color: rgba(23, 18, 4, 0.3);
}

.course-card:hover .course-link:hover,
.course-card:hover .course-link:focus-visible {
  color: #000;
}

.course-card:hover .course-link:focus-visible,
.course-card:focus-within .course-link:focus-visible {
  outline-color: var(--card-ink);
}

.course-step { color: var(--accent); margin-bottom: 18px; }

.course-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  margin-bottom: 10px;
}

/* flex:1 içindeki kartı doldurup .course-foot'u alta iter — ızgaradaki farklı
   uzunluktaki açıklamalar arasında altlıklar hizalı kalır */
.course-desc { color: var(--putty); font-size: 0.95rem; margin-bottom: 20px; flex: 1; }

.course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

.course-link {
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--accent);
  padding: 12px 0;
  white-space: nowrap;
}

.course-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }

.course-meta { letter-spacing: 0.08em; }

/* Kart altlığında rozetlerin değil, kendi satırının altında — uzun metin
   kısa rozetlerle aynı flex satırında sıkışıp hizayı bozmasın diye ayrılır */
.course-card-meta { display: block; margin-top: 10px; }

@media (min-width: 860px) {
  .course-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- why band ---------- */

.why-band {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  background: var(--surface);
  padding: 40px 32px;
  margin-top: 24px;
  max-width: 780px;
}

.why-band p { color: var(--putty); max-width: 56ch; margin-bottom: 16px; }
.why-band p:last-child { margin-bottom: 0; }

.why-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 24px;
}

.why-list li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  padding-left: 16px;
  position: relative;
}

.why-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* ---------- title block footer ---------- */

.title-block {
  border-top: 1px solid var(--hairline-strong);
  padding: 56px 0 32px;
}

.tb-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--hairline);
}

.tb-cell {
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
}

.tb-cell:last-child { border-bottom: 0; }

.tb-brand p { color: var(--putty); font-size: 0.9rem; margin-top: 14px; }
.tb-logo { height: 26px; width: auto; }
:root[data-theme="light"] .tb-logo { content: url("assets/logo-black-small.png"); }

.tb-value {
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 6px;
}

.tb-value a { color: var(--bone); text-decoration: none; }
.tb-value a:hover { color: var(--accent); }

.tb-links { display: flex; flex-direction: column; gap: 4px; }

.tb-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.tb-meta > span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--bone);
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.tb-footnote {
  font-size: 0.8rem;
  color: var(--putty);
  margin-top: 20px;
}

@media (min-width: 900px) {
  .tb-grid {
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    grid-template-rows: auto auto;
  }
  .tb-brand { grid-row: 1 / 3; border-right: 1px solid var(--hairline); }
  .tb-cell { border-bottom: 0; }
  .tb-cell:nth-child(2), .tb-cell:nth-child(3), .tb-cell:nth-child(4) {
    border-bottom: 1px solid var(--hairline);
  }
  .tb-cell:nth-child(3) { border-inline: 1px solid var(--hairline); }
  .tb-cell:nth-child(5) { grid-column: 2; grid-row: 2; }
  .tb-meta {
    grid-column: 3 / 5;
    grid-row: 2;
    border-left: 1px solid var(--hairline);
  }
}

/* ---------- hero layout on wide screens ---------- */

@media (min-width: 900px) {
  .hero { padding-top: 96px; }
  .hero-grid { grid-template-columns: 6fr 5fr; gap: 64px; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Aksonometrik çizimlerin çizilme animasyonu.

     Başlangıç durumu (çizgiler çizilmemiş, açıklamalar görünmez) ile animasyonun
     kendisi bilerek AYRI kurallara bölündü: animasyon `.axon.in` sınıfına bağlı
     olduğu için sınıf kalkınca animasyon iptal olur ve öğeler bu başlangıç
     durumuna geri döner — sınıf yeniden eklendiğinde animasyon baştan oynar.
     Kaydırıldıkça tekrar oynamasını sağlayan mekanizma budur (script.js'teki
     IntersectionObserver sınıfı ekler/çıkarır).

     JS yokken sınıf hiç eklenmeyeceği için animasyon `html:not(.js)` dalından
     oynar: sayfa açılışında bir kez, eskisi gibi. `prefers-reduced-motion`
     durumunda bu bloğun tamamı devre dışıdır, çizim doğrudan tam hâliyle görünür. */
  .axon path,
  .axon circle {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .axon .p-fade,
  .axon .p-anno text,
  .axon .p-anno .dot { opacity: 0; }

  html:not(.js) .axon path,
  html:not(.js) .axon circle,
  .js .axon.in path,
  .js .axon.in circle {
    animation: draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
  }

  html:not(.js) .axon .p-fade,
  .js .axon.in .p-fade {
    animation-name: draw, fade-in;
    animation-duration: 1.1s, 0.6s;
    animation-delay: var(--d, 0s), var(--d, 0s);
    animation-fill-mode: forwards, forwards;
  }

  html:not(.js) .axon .p-anno text,
  html:not(.js) .axon .p-anno .dot,
  .js .axon.in .p-anno text,
  .js .axon.in .p-anno .dot {
    animation-name: fade-in;
    animation-duration: 0.6s;
    animation-delay: var(--d, 0s);
    animation-fill-mode: forwards;
  }

  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .js .reveal.in { opacity: 1; transform: none; }

  .course-card::after {
    transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .course-card :is(h2, h3),
  .course-card .course-step,
  .course-card .course-desc,
  .course-card .course-meta,
  .course-card .course-link {
    transition: color 0.35s ease, border-color 0.35s ease;
  }

  .course-card .course-foot { transition: border-color 0.35s ease; }
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- auth & app chrome ---------- */

/* flash message under the header, styled as a drawing revision note */
.flash {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  background: var(--surface);
  padding: 12px 16px;
  margin-top: 20px;
}

/* Bildirim düzeyleri: temel .flash nötr/başarı (altın), varyantlar durum rengini alır.
   Özellikle ödeme hatası başarıyla aynı görünmesin diye eklendi. */
.flash--ok { border-left-color: var(--ok); color: var(--ok); }
.flash--warn { border-left-color: var(--warn); color: var(--warn); }
.flash--error { border-left-color: var(--err); color: var(--err); }

/* .site-nav .nav-user: tetikleyici artık bağlantı — genel .site-nav a kuralını ezmek için */
.site-nav .nav-user {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.nav-logout button {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--putty);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-logout button:hover { color: var(--bone); }

@media (max-width: 799.98px) {
  .nav-open .site-nav .nav-user { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .nav-open .site-nav .nav-logout { padding: 12px 0; }
}

/* auth pages */

.auth-section { padding-top: 24px; }

.auth-panel {
  max-width: 460px;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  background: var(--surface);
  padding: 40px 32px;
  margin-top: 24px;
}

.auth-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.auth-lede { color: var(--putty); font-size: 0.95rem; margin-bottom: 32px; }

.field { margin-bottom: 20px; }

/* DOĞRUDAN çocuk seçici bilerek kullanılır: .field'ın kendi başlık etiketini
   hedefler. Düz "descendant" seçici olsaydı, içine gömülü onay kutusu
   gruplarındaki (.field-check, ör. .type-grid/.field-fieldset içinde) label'ları
   da eşleyip display:block ile .field-check'in flex hizalamasını (kutu+metin)
   bozardı — künye rolleri "Yeni rol" panelinde tam olarak bu yaşanıyordu. */
.field > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 8px;
}

.field input,
.field select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  transition: border-color 0.15s ease;
}

.field input:hover,
.field select:hover { border-color: color-mix(in srgb, var(--bone) 35%, transparent); }
.field input:focus,
.field select:focus { outline: none; border-color: var(--accent); }
.field select { cursor: pointer; }
.field input:disabled { color: var(--putty); cursor: not-allowed; }

.field-error {
  font-size: 0.85rem;
  color: var(--warn);
  margin-top: 6px;
}

.field-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--putty);
  margin-bottom: 24px;
  cursor: pointer;
  min-height: 44px;
}

/* accent-color tarayıcıya göre işaretli kutuyu her zaman altın dolgulu
   göstermeyebiliyor — kontrolü elden bırakmamak için kutu tamamen elle
   çizilir (appearance:none + :checked'te altın dolgu + elle çizilmiş tik).
   Boyut em tabanlıdır: bağlam yalnızca font-size'ı değiştirerek ölçekler
   (bkz. .perm-grid/.type-grid), tik işareti orantılı kalır. */
.field-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  /* .field input, .field select (genel metin/seçim kutusu kuralı) da düz
     "input" olduğu için bu onay kutusunu eşler ve padding/min-height/width
     sızdırırdı (kare yerine 30×44 gibi bir dikdörtgene sebep oluyordu) —
     kutu modelinin HER parçası burada açıkça sıfırlanır, sızıntıya yer kalmaz */
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  padding: 0;
  font-size: 16px;
  flex: none;
  margin: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  background-color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.field-check input[type="checkbox"]:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

.field-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.28em;
  top: 0.06em;
  width: 0.26em;
  height: 0.5em;
  border: solid #171204;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-submit { width: 100%; }

.auth-alt {
  font-size: 0.9rem;
  color: var(--putty);
  margin-top: 24px;
}

.auth-alt a { color: var(--accent); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* giriş formunda "Beni hatırla" ile aynı satırda, sağa yaslı "Şifremi unuttum" */
.auth-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.auth-check-row .field-check { margin-bottom: 0; }

.auth-forgot {
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
  padding: 12px 0;
}

.auth-forgot:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- admin panel ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-section { padding-top: 24px; }

.admin-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.admin-facts { margin-bottom: 48px; }

.admin-subtitle { font-size: 1.3rem; font-weight: 700; margin: 48px 0 8px; }

/* Panel içinde ilk öğe olan ara başlık üst boşluğunu bırakır (eski satır içi stil yerine) */
.admin-subtitle--flush { margin-top: 0; }

/* Liste süzgeçleri: üye arama, sipariş durumu — tablo üstünde tek satır */
.admin-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.admin-filter-input { flex: 1 1 220px; max-width: 340px; }

/* kurs sayfası: kupon uygula (önizleme) + indirimli fiyat */
.coupon-apply { max-width: 360px; margin-bottom: 18px; }

.coupon-apply-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 8px;
}

.coupon-apply-row { display: flex; gap: 8px; }

.coupon-apply-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  transition: border-color 0.15s ease;
}

.coupon-apply-row input:hover { border-color: color-mix(in srgb, var(--bone) 35%, transparent); }
.coupon-apply-row input:focus { outline: none; border-color: var(--accent); }
.coupon-apply-row .btn {
  white-space: nowrap;
  background: none;
  border-color: var(--accent);
  color: var(--accent);
}

.coupon-apply-row .btn:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.coupon-applied {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ok);
  margin-bottom: 16px;
}

.coupon-applied a { color: var(--putty); }
.coupon-applied a:hover { color: var(--bone); }
.coupon-error { margin-bottom: 16px; }

.course-price-off { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.price-was { font-size: 1.1rem; font-weight: 500; color: var(--putty); text-decoration: line-through; }
.price-now { color: var(--accent); }

.price-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 3px 8px;
  align-self: center;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
}

/* Sütunlar bilerek dar tutulup taşma önlendiğinde (ör. iadeler tablosu): kayan
   çerçeve gerekmez ve overflow gizli kalırsa gerekçe hover-kartı kırpılır */
.admin-table-wrap--fit { overflow: visible; }

.admin-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline-strong);
  background: var(--surface);
}

.admin-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: var(--surface); }

.role-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
  border: 1px solid var(--hairline-strong);
  padding: 3px 10px;
  white-space: nowrap;
}

.role-badge.role-admin { color: var(--accent); border-color: var(--accent); }
.role-badge.role-editor { color: var(--bone); border-color: var(--bone); }

/* üyeler tablosunda satır içi ad/rol düzenleme alanları */
.cell-input,
.cell-select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  padding: 8px 10px;
  min-height: 36px;
  max-width: 220px;
}

.cell-input:focus-visible,
.cell-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cell-select { cursor: pointer; }

/* sürükle-bırak sıralama (kitap sayfaları + videolar) — satırın tamamı tutulabilir,
   girdi/düğme/bağlantı kendi imlecini korur (JS de oralardan sürükleme başlatmaz) */
.drag-row { cursor: grab; }
.drag-row:active { cursor: grabbing; }
.drag-row.dragging { opacity: 0.45; }

.drag-handle {
  display: inline-flex;
  vertical-align: middle;
  color: var(--putty);
  margin-right: 12px;
  user-select: none;
  -webkit-user-select: none;
}

.page-order-form {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.page-order-form .btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* kurs düzenleme sayfasında çöp bölümü başlığı */
.admin-trash-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--putty);
  margin-top: 36px;
}

.cell-action { text-align: right; }

.btn-remove {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--putty);
  background: none;
  border: 1px solid var(--hairline-strong);
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-remove:hover { color: var(--err); border-color: var(--err); }

.cell-empty { color: var(--putty); text-align: center; padding: 32px 20px; }

/* admin toolbar — hafif bir sekme şeridi (kutu değil): tek alt çizgi, aktif
   durum dolgu değil ince altın alt çizgiyle gösterilir. İçerik/Ticaret'in
   açılır menüsü artık ayrı, gölgeli "yüzen" bir panel — tetikleyiciye
   yapışık bir kutu değil. <details> doğal olarak JS'siz çalışır; hover ile
   açma ve "aynı anda tek grup" script.js'te ilerici bir katman. Menünün
   açık/kapalı hâli ile "bu bölümdeyim" vurgusu (is-active) BİLEREK ayrı
   kavramlar — biri geçici etkileşim, diğeri kalıcı konum bilgisi. */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--hairline);
  margin: 8px 0 32px;
}

.admin-nav-link,
.admin-nav-trigger {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
  text-decoration: none;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.admin-nav-link:hover, .admin-nav-trigger:hover { color: var(--bone); }
.admin-nav-link.is-active,
.admin-nav-trigger.is-active { color: var(--accent); border-color: var(--accent); }

/* <summary>'nin varsayılan üçgen imi kaldırılır — kendi .nav-caret'imiz kullanılır */
.admin-nav-trigger { list-style: none; }
.admin-nav-trigger::-webkit-details-marker { display: none; }
.admin-nav-trigger::marker { content: ""; }

.admin-nav-dropdown { position: relative; }
.admin-nav-dropdown[open] .admin-nav-trigger { color: var(--bone); }
.admin-nav-dropdown[open] .nav-caret { transform: rotate(180deg); }

/* Yüzen panel: tetikleyiciden küçük bir boşlukla ayrılır + gölge — pafta
   panellerinin hairline'ı korunur, ama köşeler her zamanki gibi keskin kalır */
.admin-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  padding: 6px;
}

.admin-nav-dropdown[open] .admin-nav-menu { animation: admin-nav-menu-in 0.14s ease; }

@keyframes admin-nav-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-nav-dropdown[open] .admin-nav-menu { animation: none; }
}

.admin-nav-menu a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--putty);
  text-decoration: none;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.admin-nav-menu a:hover { color: var(--bone); background: var(--ink); }

/* İçerik menüsü içi grup başlığı — tıklanamaz pafta etiketi (mono, küçük, altın) */
.admin-nav-group-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 14px 4px;
  margin: 0;
}

.admin-nav-group-label:first-child { padding-top: 4px; }

/* Aktif sayfa: video-item.active ile aynı dil (ince altın şerit + surface dolgu) —
   menü açık olsun ya da olmasın geçerli, açık kalmaya zorlamaz */
.admin-nav-menu a.is-active {
  color: var(--accent);
  background: var(--ink);
  box-shadow: inset 2px 0 0 var(--gold);
}

@media (max-width: 640px) {
  /* Dar ekranda üst seviye öğeler alt alta dizilir, menü kendi tetikleyicisinin
     hemen altında tam genişlikte akışın içinde açılır (yan yana taşma olmaz) */
  .admin-toolbar { flex-direction: column; align-items: stretch; border-bottom: 0; }
  .admin-nav-link, .admin-nav-trigger { border-bottom: 1px solid var(--hairline); margin-bottom: 0; }
  .admin-nav-menu {
    position: static;
    box-shadow: none;
    border-width: 1px 0 0;
    min-width: 0;
    animation: none;
  }
}

/* admin course list & forms */

.admin-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.admin-head-row .section-head { margin-bottom: 32px; }

.admin-link { color: var(--accent); text-decoration: none; }
.admin-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.cell-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* "Detay" bir görüntüleme bağlantısı — bitişik Kaydet/Sil düğmelerinden ayrışsın */
.cell-detail { font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.cell-detail:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sonuçlanmış talebin küçük künyesi (kim · ne zaman) */
.cell-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--putty); white-space: nowrap; }

/* uzun değerler (kullanıcı adı, ürün adı, gerekçe) satır yüksekliğini artıracak
   şekilde ikinci satıra sarmasın — tek satırda kesilir, tam metin title'da durur */
.cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-nowrap { white-space: nowrap; }

/* iadeler tablosu: sipariş + iade tarihi tek sütunda dikey hiyerarşi — birincil
   (iade) kalın üstte, ikincil (sipariş) soluk altta */
.cell-dates { white-space: nowrap; line-height: 1.4; }
.date-primary { font-weight: 700; color: var(--bone); }
.date-secondary { font-size: 0.75rem; color: var(--putty); }

/* Gerekçe: tek satırda kesilir, üzerine gelince tam metni gösteren yüzen kart
   açılır — pafta panelleriyle aynı dil (hairline + ince altın üst çizgi) */
.cell-reason { max-width: 240px; }

/* .reason-wrap TAŞMAYI GİZLEMEZ — kırpma yalnızca .reason-trigger'da olur.
   Popover, .reason-trigger'ın İÇİNDE olsaydı onun overflow:hidden'ı tarafından
   (position:absolute olsa dahi) kırpılırdı; bu yüzden ikisi de .reason-wrap'ın
   kardeşidir, kırpma yapmayan o konumlanır. */
.reason-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  cursor: default;
}

.reason-trigger {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px dotted var(--hairline-strong);
}

.reason-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-top: 2px solid var(--gold);
  color: var(--bone);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.reason-wrap:hover .reason-popover,
.reason-wrap:focus .reason-popover,
.reason-wrap:focus-within .reason-popover { display: block; }

/* satır aksiyonları: üç nokta ile açılan kompakt menü (admin-nav-dropdown ile
   aynı <details> deseni) — Onayla/Reddet/iyzico/Manuel artık bitişik düğmeler
   yerine tek bir simgenin altında toplanır, sütun genişliği sabit kalır */
.action-menu { position: relative; display: inline-block; }

.action-menu-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline-strong);
  background: none;
  color: var(--bone);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.action-menu-trigger::-webkit-details-marker { display: none; }
.action-menu-trigger::marker { content: ""; }

.action-menu-trigger:hover,
.action-menu[open] .action-menu-trigger { color: var(--accent); border-color: var(--accent); }

.action-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  padding: 6px;
}

.action-menu-panel form { display: contents; }

.action-menu-item {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bone);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.action-menu-item:hover { color: var(--accent); background: var(--ink); }
.action-menu-item--danger { color: var(--err); }
.action-menu-item--danger:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }

/* İade talebi — sipariş satırında açılır küçük form */
.refund-request summary { cursor: pointer; display: inline-block; }
.refund-request[open] summary { margin-bottom: 10px; }
.refund-form { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.refund-form textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--bone);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-body);
  font-size: 0.85rem;
  resize: vertical;
}
.refund-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.refund-form .btn { align-self: flex-start; }

.btn-edit {
  font-family: var(--font-body); /* button öğeleri yazı tipini miras almaz */
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bone);
  background: none; /* button öğelerinde tarayıcının beyaz zemini görünmesin */
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--hairline-strong);
  padding: 8px 14px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.btn-edit:hover { color: var(--accent); border-color: var(--accent); }

.admin-form-panel {
  max-width: 960px;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  background: var(--surface);
  padding: 40px 32px;
  margin-top: 8px;
}

/* Düzenleme çalışma alanları (Serbest editörü, kitap yönetimi) — standart admin
   formundan (960px) daha geniş, kamu detay sayfalarıyla aynı ölçüde
   (.container-detail); .admin-form-panel'in yanına eklenir, onu değiştirmez. */
.admin-workspace { max-width: var(--container-detail); }

/* İzin matrisi çok kalabalıksa (çok sayıda izin ailesi) standart 960px form
   panelinden daha geniş çalışma alanı — sayfa başlığıyla aynı genişlik */
.admin-form-panel--wide { max-width: var(--container-detail); }

.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.field textarea:hover { border-color: color-mix(in srgb, var(--bone) 35%, transparent); }
.field textarea:focus { outline: none; border-color: var(--accent); }

.label-hint { text-transform: none; letter-spacing: 0.02em; opacity: 0.75; }

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}

@media (min-width: 640px) {
  .field-row { grid-template-columns: 2fr 1fr; }
}

.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* single course page */

.course-single { padding-top: 24px; }

.course-single-step { color: var(--accent); margin-bottom: 16px; }

.course-single-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.course-single-lede { color: var(--putty); font-size: 1.05rem; max-width: 42ch; margin-bottom: 14px; }

.course-single-meta { display: block; margin-bottom: 28px; }

.course-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
  text-decoration: none;
  margin-top: 28px;
  padding: 8px 0;
}

.course-back:hover { color: var(--accent); }

/* Sayfa başındaki geri bağlantısı — course-back'in üst boşluksuz eşi (yönetim ekranları) */
.page-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
  text-decoration: none;
  padding: 8px 0;
}

.page-back:hover { color: var(--accent); }

.course-single-h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.course-single-about { margin-top: 40px; }

.course-single-point { color: var(--bone); font-size: 0.98rem; }

.course-single-para { color: var(--putty); margin-bottom: 18px; max-width: 62ch; }

/* payments */

.course-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: 24px;
}

.enrolled-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
}

/* .badge-* takma adları: rol dışı durumlar için genel rozet renkleri (components/badge) */
.role-badge.status-paid,
.role-badge.status-published,
.role-badge.badge-ok { color: var(--ok); border-color: var(--ok); }
.role-badge.status-failed,
.role-badge.badge-err { color: var(--err); border-color: var(--err); }
.role-badge.status-pending,
.role-badge.badge-warn { color: var(--warn); border-color: var(--warn); }
.role-badge.badge-accent { color: var(--accent); border-color: var(--accent); }

/* ---------- ders kitabı görüntüleyici ---------- */

.book-viewer { padding-bottom: 40px; }

.book-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.book-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.book-reader {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--putty);
}

.book-reader span { color: var(--bone); }

.book-stage {
  display: flex;
  justify-content: center;
  perspective: 2600px;
}

.book {
  position: relative;
  width: min(92vw, 1024px);
  aspect-ratio: 3 / 2; /* yan yana iki 3:4 sayfa */
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.book::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -3.5%;
  height: 7%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.sheet.flipped { transform: rotateY(-180deg); }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.face.back { transform: rotateY(180deg); }

.book-page {
  background: linear-gradient(105deg, rgba(14, 14, 15, 0.06), transparent 9%), #f3efe4;
  box-shadow: inset 0 0 0 1px rgba(26, 25, 24, 0.08);
}

.face.back.book-page {
  background: linear-gradient(255deg, rgba(14, 14, 15, 0.06), transparent 9%), #f3efe4;
}

.book-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.book-cover {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.cover-frame {
  position: absolute;
  inset: 6% 8%;
  border: 1px solid rgba(234, 184, 7, 0.4);
  padding: 7%;
  display: flex;
  flex-direction: column;
}

.cover-brand {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 1.4vw, 0.9rem);
  letter-spacing: 0.34em;
  color: var(--accent);
}

.cover-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.6vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-top: auto;
  text-wrap: balance;
}

.cover-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 1.1vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  margin-top: 0.8em;
  margin-bottom: auto;
}

.cover-sub-bottom { margin-top: auto; margin-bottom: 0; }

.book-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6%;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 0, 0, 0.14) 48%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.14) 52%,
    transparent
  );
  pointer-events: none;
  z-index: 500; /* yaprak z-index'leri yaprak sayısına göre artar — sırt hep üstte kalsın */
}

.book-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.book-counter {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  min-width: 15ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.book-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--putty);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 28px;
}

.book-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 100;
}

.book-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* kitap yönetimi (admin) */
.book-panel { margin-top: 32px; }
.book-upload-form { margin-bottom: 24px; }
.book-empty-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--putty);
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition-duration: 0.01s; }
  .book-toast { transition: none; }
}

.book-toolbar .btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* kitap tam ekran — :is() bağışlayıcıdır: :fullscreen'i tanımayan eski tarayıcılarda
   kural düşmez, .book-fs-fallback sahte tam ekran sınıfı çalışmaya devam eder */

.book-shell {
  --book-chrome-h: 170px; /* tam ekranda araç çubuğu + ipucuna ayrılan yükseklik */
}

.book-shell:is(:fullscreen, .book-fs-fallback) {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

/* Fullscreen API olmayan tarayıcılarda (ör. iPhone Safari) sahte tam ekran */
.book-shell.book-fs-fallback {
  position: fixed;
  inset: 0;
  z-index: 90;
}

/* Tam ekranda kitabı yükseklik belirler: 3/2 oran korunarak en büyük boyut */
.book-shell:is(:fullscreen, .book-fs-fallback) .book {
  width: min(94vw, calc((100vh - var(--book-chrome-h)) * 1.5));
}

.book-shell:is(:fullscreen, .book-fs-fallback) .book-toolbar { margin-top: 22px; }
.book-shell:is(:fullscreen, .book-fs-fallback) .book-hint { margin-bottom: 0; }

/* kitap araç çubuğu düğmeleri: siyah zemin, beyaz yazı, eliptik kenar */

.book-toolbar .btn {
  background: #000;
  color: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0 26px;
  cursor: pointer;
}

.book-toolbar .btn:hover {
  background: #000;
  /* zemin her temada siyah — vurgu değil, her zaman parlak altın */
  border-color: var(--gold);
  color: var(--gold);
}

.book-toolbar .btn:focus-visible {
  border-radius: 999px;
}

/* ---------- video dersler ---------- */

.video-viewer { padding-bottom: 40px; }

.video-layout {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .video-layout { grid-template-columns: 1fr 320px; align-items: start; }
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--hairline);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ekran kaydını caydıran izleyici kimliği — oynatıcının üzerinde durur */
.video-watermark {
  position: absolute;
  right: 12px;
  bottom: 44px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(236, 235, 227, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 5;
}

.video-now {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--putty);
  margin-top: 12px;
}

.video-list {
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
}

.video-list-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}

.video-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
  min-height: 44px;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.video-item:last-child { border-bottom: 0; }
.video-item:hover { background: var(--surface); }

.video-item.active {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--gold);
}

.video-item-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.video-item-title { line-height: 1.4; }

/* video yükleme (admin) */
.video-upload-progress {
  margin-top: 16px;
  border: 1px solid var(--hairline);
  position: relative;
  height: 28px;
}

.video-upload-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--gold-deep);
  transition: width 0.2s ease;
}

.video-upload-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--bone);
  line-height: 28px;
  padding-inline: 10px;
}

.video-item-resume {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--putty);
  margin-top: 2px;
}

.video-item.active .video-item-resume { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .video-upload-bar { transition: none; }
}

/* ---------- bildirimler ---------- */

.nav-notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--gold);
  color: #171204;
  padding: 1px 6px;
  line-height: 1.5;
}

.notifications-section { padding-bottom: 56px; }

.notifications-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--putty);
  border: 1px solid var(--hairline);
  padding: 28px 24px;
  margin-top: 24px;
}

.notification-list {
  list-style: none;
  border: 1px solid var(--hairline);
  margin-top: 24px;
}

.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}

.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { background: var(--surface); box-shadow: inset 2px 0 0 var(--gold); }

.notification-title { font-weight: 600; color: var(--bone); }

.notification-new {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px;
  margin-right: 8px;
  vertical-align: middle;
}

.notification-text { color: var(--putty); font-size: 0.9rem; margin-top: 2px; }

.notification-time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--putty);
  margin-top: 6px;
}

.notification-link { white-space: nowrap; }

@media (max-width: 560px) {
  .notification-item { flex-direction: column; align-items: flex-start; }
}

/* kullanıcı menüsü — başlık altına tam genişlikte açılan pafta (flyout) */

.nav-user:hover,
.nav-user[aria-expanded="true"] { color: var(--bone); }

.nav-caret {
  font-size: 0.8rem;
  color: var(--putty);
  transition: transform 0.24s ease;
}

.nav-user[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--hairline-strong);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.nav-flyout.open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.nav-flyout-grid {
  display: grid;
  gap: 40px 72px;
  padding-top: 40px;
  padding-bottom: 64px;
}

@media (min-width: 800px) {
  .nav-flyout-grid { grid-template-columns: auto auto 1fr; }
}

.nav-flyout-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 14px;
}

.nav-flyout-big {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.nav-flyout-big:hover { color: var(--accent); }

.nav-flyout .nav-logout { margin: 0; }

.nav-flyout-small {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--putty);
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.15s ease;
}

.nav-flyout-small:hover { color: var(--bone); }

.nav-flyout-small.unread {
  color: var(--bone);
  padding-left: 10px;
  box-shadow: inset 2px 0 0 var(--gold);
}

.nav-flyout-more { color: var(--accent); margin-top: 10px; }
.nav-flyout-more:hover { color: var(--accent-strong); }

.nav-flyout-empty {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--putty);
  padding: 5px 0;
}

/* açıkken sayfanın kalanı karartılıp bulanıklaştırılır */
.nav-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s;
  z-index: 40;
}

.nav-backdrop.open {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 799.98px) {
  .nav-user { padding: 12px 0; width: 100%; }
  .nav-flyout-grid { padding-top: 28px; padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-flyout, .nav-backdrop, .nav-caret, .theme-toggle svg { transition: none; }
}

/* ---------- kurs listesi (kurslar sayfası) — dikey cetvel ---------- */

.course-list {
  display: grid;
  gap: 24px;
  margin-top: 8px;
}

/* satırlar course-card sınıfını taşır: pahlı köşe ve altın dolgu oradan gelir,
   burada yalnızca geniş yatay yerleşim tanımlanır */
.course-row {
  display: grid;
  gap: 16px 40px;
  padding: 32px 28px;
}

.course-row .course-step { margin-bottom: 0; }

.course-row-main h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  margin-bottom: 10px;
}

.course-row-main .course-desc { max-width: 620px; }

.course-row-main .course-points {
  margin-bottom: 0;
  max-width: 620px;
}

.course-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.course-list-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--putty);
  border: 1px solid var(--hairline);
  padding: 28px 24px;
  margin-top: 24px;
}

@media (min-width: 860px) {
  .course-row { grid-template-columns: 110px 170px 1fr auto; }
  .course-row-side {
    align-items: flex-end;
    justify-content: space-between;
    text-align: right;
  }
}

/* ---------- account hub (Hesabım) ---------- */

.account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.account-panel {
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--gold);
  background: var(--surface);
  padding: 28px 28px 24px;
}

.account-panel-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 18px;
}

.account-tiles-label { margin-top: 40px; }

.account-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.account-info-row:first-of-type { padding-top: 0; }
.account-info-row:last-of-type { border-bottom: 0; }

.account-info dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--putty);
}

.account-info dd {
  text-align: right;
  font-weight: 500;
  word-break: break-word;
}

.account-panel-link {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
}

.account-panel-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.account-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.account-tile {
  display: block;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--bone);
}

@media (prefers-reduced-motion: no-preference) {
  .account-tile { transition: border-color 0.2s ease, background 0.2s ease; }
}

.account-tile:hover {
  border-color: var(--hairline-strong);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
}

.account-tile-title {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.account-tile-desc {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--putty);
}

/* Çıkış kutucuğu bir POST formu — diğer kutucuklarla birebir aynı görünür */
.account-tile-logout { padding: 0; }

.account-tile-button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.account-notes { display: flex; flex-direction: column; }

.account-note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--putty);
}

@media (prefers-reduced-motion: no-preference) {
  .account-note { transition: color 0.2s ease; }
}

.account-note:hover { color: var(--bone); }

.account-note.unread {
  color: var(--bone);
  padding-left: 10px;
  box-shadow: inset 2px 0 0 var(--gold);
}

.account-note-title { font-weight: 500; font-size: 0.9rem; }

.account-note-time {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--putty);
  white-space: nowrap;
}

.account-note-empty {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--putty);
  padding: 6px 0;
}

@media (min-width: 860px) {
  .account-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .account-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- legal & content pages ---------- */

.legal-container { max-width: 820px; }

.legal h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 24px 0 8px;
  text-wrap: balance;
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 36px;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 36px 0 12px;
}

.legal p { color: var(--putty); margin-bottom: 16px; max-width: 68ch; }
.legal strong { color: var(--bone); font-weight: 600; }

.legal ul {
  color: var(--putty);
  margin: 0 0 16px;
  padding-left: 20px;
  max-width: 68ch;
}

.legal li { margin-bottom: 8px; }

.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal a:hover { text-decoration: underline; }

.legal-facts {
  list-style: none;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 8px 20px;
  margin: 8px 0 20px;
}

.legal-facts li {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--bone);
  font-size: 0.92rem;
}

.legal-facts li:last-child { border-bottom: 0; }

.legal-facts li span {
  flex: 0 0 38%;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
}

/* iletişim formu */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }

.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  resize: vertical;
  min-height: 140px;
  transition: border-color 0.15s ease;
}

.field textarea:hover { border-color: color-mix(in srgb, var(--bone) 35%, transparent); }
.field textarea:focus { outline: none; border-color: var(--accent); }

.contact-aside .legal-facts { margin-top: 0; }
.contact-aside .legal-facts li { flex-direction: column; gap: 4px; }
.contact-aside .legal-facts li span { flex: none; }

@media (min-width: 760px) {
  .contact-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

/* ---------- cookie consent banner ---------- */

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-top: 3px solid var(--gold);
  padding: 16px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.cookie-banner[hidden] { display: none; }

.cookie-text {
  flex: 1 1 300px;
  font-size: 0.85rem;
  color: var(--putty);
  margin: 0;
}

.cookie-text a { color: var(--accent); text-underline-offset: 3px; }
.cookie-text a:hover { text-decoration: underline; }

.cookie-accept { flex: 0 0 auto; white-space: nowrap; }

@media (min-width: 640px) {
  .cookie-banner { left: auto; max-width: 480px; }
}

/* ---------- events ---------- */

.event-group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 8px 0 20px;
}

.event-group-past { margin-top: 56px; }

.event-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.event-list.is-past { opacity: 0.78; }

.event-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--surface);
  text-decoration: none;
  color: var(--bone);
}

@media (prefers-reduced-motion: no-preference) {
  .event-card { transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
}

/* Etkinlik VE Serbest listeleri aynı .event-card'ı paylaşır — tek kural her ikisini
   de kapsar. Hafif büyüme + gölge = "tıklanabilir" geri bildirimi; :focus-visible
   klavyeyle gezinen kullanıcıya da aynı ipucunu verir (kart kendisi <a>). */
.event-card:hover,
.event-card:focus-visible {
  border-color: var(--hairline-strong);
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Kart her zaman .reveal'a da sahip; ekrana girdikten sonra (.in eklenince)
   ".js .reveal.in{transform:none}" üç sınıflık (0,3,0) özgüllüğüyle yukarıdaki
   iki sınıflık (0,2,0) hover kuralını SESSİZCE eziyordu — büyüme hiç görünmüyordu
   (gölge ayrı bir özellik olduğundan etkileniyordu, bu yüzden yalnızca gölge
   görünüyordu). Aynı değer burada dört parçalık bir seçiciyle tekrarlanır ki
   kart ekrana girdikten SONRA da büyüme çalışsın. */
.event-card.reveal.in:hover,
.event-card.reveal.in:focus-visible {
  transform: scale(1.02);
}

.event-card:hover .event-card-body h3,
.event-card:focus-visible .event-card-body h3 { color: var(--accent); }

.event-card-poster {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}

.event-card-poster img { width: 100%; height: 100%; object-fit: cover; }

.event-card-noposter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--putty);
}

.event-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }

.event-card-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.event-card-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.event-card-excerpt { color: var(--putty); font-size: 0.9rem; }

.event-card-place {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--putty);
}

/* single event */
.preview-note {
  border: 1px solid var(--warn);
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  margin-bottom: 24px;
}

.event-head { max-width: 760px; margin-bottom: 32px; }

.event-date-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.event-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.event-badge.is-past { border-color: var(--putty); color: var(--putty); }

.event-head h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.event-lede { color: var(--putty); font-size: 1.05rem; max-width: 60ch; }
.event-actions { margin-top: 20px; }

.event-posters { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 36px; }

.event-poster {
  display: block;
  max-width: 360px;
  border: 1px solid var(--hairline);
  background: var(--ink);
}

.event-poster img { width: 100%; height: auto; }

.event-facts { margin-bottom: 40px; }

.event-body-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }

.event-body-main p { color: var(--putty); margin-bottom: 16px; max-width: 68ch; }

.event-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 32px 0 12px;
}

.event-side-btn { width: 100%; margin-top: 4px; }

.event-online { color: var(--putty); font-size: 0.92rem; margin-bottom: 12px; }
.event-venue { font-weight: 600; margin-bottom: 4px; }
.event-address { color: var(--putty); font-size: 0.9rem; margin-bottom: 14px; }

.event-map {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline);
  margin-bottom: 12px;
}

.event-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.event-map-link,
.event-apply-alt {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
}

.event-map-link:hover,
.event-apply-alt:hover { text-decoration: underline; text-underline-offset: 3px; }

.event-side .account-panel + .account-panel { margin-top: 20px; }

@media (min-width: 860px) {
  .event-body-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

/* admin: poster yöneticisi */
.field-fieldset {
  border: 1px solid var(--hairline);
  padding: 20px;
  margin-bottom: 20px;
}

.field-fieldset legend {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  padding: 0 8px;
}

/* künye rolleri (Pafta A-11): içerik türü seçimi — kompakt yan yana kutucuklar,
   "tüm türlerde" durumu ayrı bir satır olarak değil, aynı kutunun BAŞLIĞI olarak
   gösterilir ki ilişki net olsun (eskiden kutucukların ALTINDA kopuk duruyordu) */
.type-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.type-editor-caption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
}

.type-editor-caption strong { color: var(--accent); font-weight: 600; }

.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.type-grid .field-check {
  min-height: 36px;
  margin-bottom: 0;
  gap: 8px;
  font-size: 0.85rem;
}

.type-grid .field-check input { font-size: 30px; }

.cell-types { min-width: 240px; }

.poster-manager {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.poster-item { border: 1px solid var(--hairline); background: var(--ink); }
.poster-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.poster-item form { padding: 8px; text-align: center; }

.poster-upload { max-width: none; margin-top: 8px; }

/* başvuru formu modalı */
.apply-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.apply-modal[hidden] { display: none; }

.apply-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.apply-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(640px, 96vw);
  height: min(86vh, 820px);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-top: 3px solid var(--gold);
}

.apply-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--putty);
}

.apply-modal-close {
  background: none;
  border: 0;
  color: var(--bone);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.apply-modal-close:hover { color: var(--accent); }

.apply-modal-frame { flex: 1; width: 100%; border: 0; background: #fff; }

body.modal-open { overflow: hidden; }

/* ---------- event hero + poster carousel ---------- */

.event-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.event-hero-media { max-width: 420px; }

@media (min-width: 800px) {
  .event-hero { grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
  .event-hero-main { align-self: center; }
  .event-hero-media { max-width: none; }
}

.event-carousel { position: relative; }

.event-carousel-viewport {
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink);
}

.event-carousel-track { display: flex; }

@media (prefers-reduced-motion: no-preference) {
  .event-carousel-track { transition: transform 0.35s ease; }
}

.event-carousel-slide { flex: 0 0 100%; }
.event-carousel-slide img { width: 100%; height: auto; display: block; }

.event-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  border: 1px solid var(--hairline-strong);
  color: var(--bone);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.event-carousel-btn:hover { border-color: var(--accent); color: var(--accent); }
.event-carousel-btn.is-prev { left: 8px; }
.event-carousel-btn.is-next { right: 8px; }

.event-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

.event-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  background: none;
  border-radius: 50%;
  cursor: pointer;
}

.event-carousel-dot[aria-current="true"] { background: var(--accent); border-color: var(--accent); }

@media (min-width: 720px) {
  .event-facts { grid-template-columns: repeat(4, 1fr); }
}

/* admin: afiş sürükle-sırala */
.poster-item { position: relative; }

.poster-item-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--hairline);
}

.poster-drag { display: inline-flex; color: var(--putty); cursor: grab; }
.poster-drag:active { cursor: grabbing; }
.poster-no { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--putty); }
.poster-item.dragging { opacity: 0.5; }

/* paylaşılan tam boy görsel örtüsü (afişler + Serbest içerik görselleri) —
   örtü her zaman koyu, metin/oklar beyaz */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox[hidden] { display: none; }

.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); }

.lightbox-img {
  position: relative;
  max-width: min(94vw, 1100px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 20px;
  z-index: 2;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-nav:hover { color: var(--gold); }
.lightbox-nav.is-prev { left: 20px; }
.lightbox-nav.is-next { right: 20px; }

/* ---------- sepet (basket) ---------- */

.basket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 860px) {
  .basket-grid { grid-template-columns: 1fr 320px; }
}

.basket-owned,
.basket-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--putty);
}

.basket-tag { color: var(--accent); }

.basket-summary {
  border: 1px solid var(--hairline);
  padding: 24px;
  overflow-wrap: break-word;
}

.basket-coupon-form label { display: block; margin-bottom: 8px; font-size: 0.9rem; }
.basket-coupon-applied { margin-bottom: 16px; }
.basket-coupon-applied p { margin-bottom: 8px; }

.basket-totals { margin: 20px 0; border-top: 1px solid var(--hairline); }

.basket-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.basket-totals dt { color: var(--putty); }
.basket-totals dd { font-variant-numeric: tabular-nums; }
.basket-discount dd { color: var(--accent); }

.basket-total {
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}

.basket-total dt { color: var(--bone); }

.basket-pay { width: 100%; }

/* ---------- kurs kontenjanı (üst sınır + "son kontenjanlar" rozeti) ---------- */

.course-capacity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.course-single-meta + .course-capacity { margin-top: -16px; }

.course-capacity-figure {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--putty);
}

.capacity-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gold);
  color: #171204;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Kart vurgusunda zemin altına dönünce rozet ters çevrilir (altın üstünde altın kalmasın) */
.course-card:hover .capacity-badge,
.course-card:focus-within .capacity-badge {
  background: #171204;
  color: var(--gold);
}

.course-card:hover .course-capacity-figure,
.course-card:focus-within .course-capacity-figure {
  color: rgba(23, 18, 4, 0.72);
}

/* ---------- otomatik promosyonlar (kampanya bandı + notlar) ---------- */

/* Ana sayfa kampanya bandı: kurs ızgarasının üstünde, pafta diliyle */
.promo-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-bottom: 40px;
}

.promo-card {
  background: var(--surface);
  padding: 20px 24px;
}

.promo-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 10px 0 6px;
}

.promo-card .capacity-badge + h3 { margin-top: 12px; }

.promo-card p {
  color: var(--putty);
  font-size: 0.9rem;
  margin: 0;
}

/* Kurs detayında kampanya notu (fiyatın altında) */
.promo-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: -16px 0 24px;
  font-size: 0.92rem;
}

.promo-note-desc { color: var(--putty); }

/* Sepette kampanya kutusu — kupon kutusuyla aynı dil */
.basket-promo p { margin: 0; }
.basket-promo .promo-note-desc {
  font-size: 0.85rem;
  margin-top: 4px;
}


/* ---------- kitap içindekiler (bölüm → kısım → sayfa) ---------- */

/* Dar ekranda gizli çekmece, geniş ekranda kalıcı yan panel (aşağıdaki media) */
.book-toc {
  display: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 18px 16px 22px;
}

.book-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.book-toc-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--putty);
}

/* Kapat düğmesi yalnızca çekmece kipinde görünür */
.book-toc-close {
  display: none;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--hairline);
  color: var(--bone);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.book-toc-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.book-toc details { border-top: 1px solid var(--hairline); }

.book-toc summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 4px;
  cursor: pointer;
  list-style: none;
}

.book-toc summary::-webkit-details-marker { display: none; }

/* Açık/kapalı işareti: teknik çizim diline uygun artı/eksi */
.book-toc summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--putty);
}

.book-toc details[open] > summary::after { content: "\2212"; }

.toc-chapter > summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.toc-section { margin-left: 12px; }

.toc-section > summary {
  font-size: 0.82rem;
  min-height: 40px;
}

.toc-no {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--putty);
}

/* Geçerli sayfanın dalı: bölüm ve kısım başlığı vurgulanır */
.book-toc details.current > summary { color: var(--accent); }
.book-toc details.current > summary .toc-no { color: var(--accent); }

.toc-pages {
  list-style: none;
  margin: 0 0 10px;
  padding-left: 18px;
  border-left: 1px solid var(--hairline);
}

.toc-page {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 9px 8px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--putty);
  cursor: pointer;
}

.toc-page:hover { color: var(--bone); }

.toc-page.active {
  color: var(--accent);
  border-left-color: var(--accent);
}

.toc-page-no { font-size: 0.64rem; }

/* Geniş ekran: kalıcı yan panel, kitapla yan yana */
@media (min-width: 1100px) {
  .book-shell {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .book-toc {
    display: block;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  #bookTocToggle { display: none; }
}

/* Dar ekran: araç çubuğundaki İçindekiler düğmesi soldan çekmece açar */
@media (max-width: 1099.98px) {
  .book-shell.toc-open .book-toc {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 95;
    overflow-y: auto;
    border-right: 1px solid var(--hairline-strong);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  }

  .book-shell.toc-open .book-toc-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Tam ekran: panel varsayılan gizli, İçindekiler düğmesi geri gelir ve çekmece açar */
.book-shell:is(:fullscreen, .book-fs-fallback) .book-toc { display: none; }

.book-shell:is(:fullscreen, .book-fs-fallback) .book-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.book-shell:is(:fullscreen, .book-fs-fallback) #bookTocToggle { display: inline-block; }

.book-shell:is(:fullscreen, .book-fs-fallback).toc-open .book-toc {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  z-index: 95;
  overflow-y: auto;
  border-right: 1px solid var(--hairline-strong);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
}

.book-shell:is(:fullscreen, .book-fs-fallback).toc-open .book-toc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- kitap yönetimi: bölüm/kısım/sayfa ağacı ---------- */

.book-chapter-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* Tek satır ekleme formu: ad + düğme yan yana */
.field-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.field-inline input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
}

/* Kısım sayfaları: yüzlerce sayfada ekran şişmesin diye katlanır blok */
.book-admin-section {
  border: 1px solid var(--hairline);
  margin-top: 18px;
}

.book-admin-section > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.book-admin-section > summary::-webkit-details-marker { display: none; }

.book-admin-section > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--putty);
}

.book-admin-section[open] > summary::after { content: "\2212"; }

.book-admin-section[open] > summary { border-bottom: 1px solid var(--hairline); }

.book-admin-section > :not(summary) { margin-left: 16px; margin-right: 16px; }

.book-admin-section > form:last-child,
.book-admin-section > p:last-child { margin-bottom: 16px; }

.book-section-no {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.book-section-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--putty);
}

/* Sıra kaydet + seçilenleri taşı yan yana */
.book-section-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.page-move-form,
.cell-move-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-move-form select,
.cell-move-form select {
  max-width: 240px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 8px 10px;
}

.cell-check { width: 36px; text-align: center; }

.cell-check input[type="checkbox"] { accent-color: var(--gold); }

/* ---------- sayfalama (özel Türkçe görünüm — pagination/sofart) ---------- */

.pagination {
  display: flex;
  border: 1px solid var(--hairline);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 32px;
}

.pagination-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--putty);
  text-decoration: none;
  padding: 10px 16px;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  border-right: 1px solid var(--hairline);
  transition: color 0.15s ease;
}

.pagination-link:last-child { border-right: 0; }

a.pagination-link:hover { color: var(--bone); }

.pagination-link.is-active {
  color: var(--accent);
  background: var(--surface);
}

.pagination-link.is-disabled { opacity: 0.45; }

/* ---------- mesafeli satış onayı (ödeme öncesi zorunlu kutucuk) ---------- */

.purchase-terms {
  align-items: flex-start;
  font-size: 0.85rem;
  margin-bottom: 16px;
  max-width: 52ch;
}

.purchase-terms input {
  flex-shrink: 0;
  margin-top: 4px;
}

.purchase-terms a { color: var(--accent); text-underline-offset: 3px; }
.purchase-terms a:hover { text-decoration: underline; }

.purchase-terms-error { margin: -8px 0 16px; }

/* ---------- Serbest İçerikler (post yazıları + künye) ---------- */

/* tek yazı sayfası: genişlik tamamen .container-detail'den gelir (1160px) —
   burada ayrı/dar bir sütun kurulmaz, editoryal bir yayın gibi tüm çerçeveyi kullanır.
   Kapak+başlık ikilisi Etkinlik ayrıntı sayfasıyla AYNI basamak/oranları izler (bkz.
   .event-hero): dar ekranda alt alta, geniş ekranda yan yana. Etkinlik'ten farklı
   olarak metin bloğu dikey ortalanmaz — üst kenarı görselle hizalanır (align-items:
   start, satır içi), tıpkı bir dergi makalesinin başlığı gibi; dikey ortalama
   tanıtım/hero şeridi hissi verir, burada kaçınılan tam da bu. */
.post-header { text-align: left; }
.post-header h1 { margin: 10px 0 14px; }

/* Kısa açıklama bilerek gövdeden daha dar — dergi girişi gibi bir tipografik vurgu */
.post-lede {
  color: var(--putty);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
}

.post-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

/* Sabit dikey (4:5, ~400x500) editoryal çerçeve — kapak oranı ne olursa olsun
   aynı kutuyu doldurur (object-fit:cover): yatay görsel küçülüp kaybolmaz,
   dikey görsel doğal dolar, hiçbirinde bozulma/boş şerit olmaz. Mobilde (tek
   sütun) görsel metnin ÜSTÜNDE görünür (order:-1) — kaynak sırası (başlık önce,
   künye/erişilebilirlik akışı için) değişmez, yalnızca görsel sıra numarası. */
.post-hero-media {
  order: -1;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
}

.post-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in; /* içerik görselleriyle aynı — lightbox tetikleyicisi */
}

@media (min-width: 800px) {
  /* .event-hero'yla birebir aynı basamak/oranlar — iki ayrıntı sayfası aynı dilde okunur.
     .post-hero-main için align-self BİLEREK yok: satır varsayılanı (start) korunur. */
  .post-hero { grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
  .post-hero-media { order: 0; max-width: none; } /* mobildeki order:-1 geri alınır — metin sol, görsel sağ */
}

.post-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

.post-body p {
  margin: 0 0 1.1em;
  line-height: 1.75;
}

/* Görsele tıklayınca lightbox açılır (public/script.js) — imleç dışında ekstra
   vurgu/animasyon yok, minimal kalır */
.post-body figure img { cursor: zoom-in; }

/* künye bloğu: pafta antedi gibi hairline çerçeveli, rol grupları mono etiketli */
.post-credits {
  margin-top: 40px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  padding: 20px 24px;
}

.post-credits-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.post-credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px 24px;
  margin: 0;
}

.post-credits-group dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 6px;
}

.post-credits-group dd {
  margin: 0 0 3px;
  font-size: 0.95rem;
  color: var(--bone);
}

.post-back { margin-top: 32px; }

/* ---------- yükleme kutusu (dropzone) — boş/dolu tek bileşen ---------- */
/* resources/views/components/upload-dropzone.blade.php + public/upload-dropzone.js.
   Gerçek <input type="file"> kutunun TAMAMINI kaplar (opacity:0, position:absolute) —
   tıklama, sürükle-bırak ve klavye erişimi tarayıcının kendi davranışıdır. Boş/dolu
   içerik katmanları pointer-events:none'dır ki olaylar hep girdiye düşsün; yalnızca
   Değiştir/Kaldır düğmeleri (.upload-dropzone-actions) üstte, bağımsız tıklanabilir. */
.upload-dropzone {
  position: relative;
  border: 1px dashed var(--hairline-strong);
  background: var(--ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.upload-dropzone.is-dragover {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--ink));
}

.upload-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.upload-dropzone-input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.upload-dropzone-preview[hidden] { display: none; }

.upload-dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  padding: 24px;
  text-align: center;
  pointer-events: none;
}

.upload-dropzone-empty[hidden] { display: none; }

.upload-dropzone-icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--putty);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.upload-dropzone-text { font-size: 0.9rem; color: var(--putty); }
.upload-dropzone-browse { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.upload-dropzone-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  pointer-events: none;
}

.upload-dropzone-thumb {
  flex: none;
  width: 96px;
  height: 96px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  overflow: hidden;
}

.upload-dropzone-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.upload-dropzone-meta { min-width: 0; flex: 1; }

.upload-dropzone-filename {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-dropzone-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: 10px;
  pointer-events: auto;
}

/* sözlük tablolarında dar sayı girdisi (kategori/rol sırası) */
.cell-input--num { max-width: 90px; }

/* ---------- Serbest zengin içerik (okuma + editör ortak dili) ---------- */

/* Yazı gövdesindeki zengin öğeler — editör yüzeyi de aynı kuralları paylaşır.
   Genişlik burada değil, çerçeve seviyesinde (.container-detail / editör
   yüzeyi) belirlenir — metin bloğu kendi kolonunu açmaz, çerçeveyi doldurur. */
.post-body h2,
.post-body h3,
.editor-surface .ProseMirror h2,
.editor-surface .ProseMirror h3 {
  margin: 1.6em 0 0.6em;
  line-height: 1.25;
}

.post-body h2, .editor-surface .ProseMirror h2 { font-size: 1.45rem; }
.post-body h3, .editor-surface .ProseMirror h3 { font-size: 1.15rem; }

.post-body blockquote,
.editor-surface .ProseMirror blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
  color: var(--putty);
}

.post-body ul, .post-body ol,
.editor-surface .ProseMirror ul,
.editor-surface .ProseMirror ol {
  margin: 0 0 1.1em;
  padding-left: 26px;
  line-height: 1.75;
}

.post-body hr,
.editor-surface .ProseMirror hr {
  border: 0;
  border-top: 1px solid var(--hairline-strong);
  margin: 2em 0;
}

.post-body a { color: var(--accent); text-underline-offset: 3px; }
.post-body a:hover { text-decoration: underline; }

.post-body figure,
.editor-surface .ProseMirror figure {
  margin: 1.8em 0;
  border: 1px solid var(--hairline-strong);
}

/* Sondaki kayan (float) figure çerçeveyi çökertmesin diye her iki kapsayıcı da temizlenir */
.post-body::after,
.editor-surface .ProseMirror::after {
  content: "";
  display: table;
  clear: both;
}

.post-body figure img,
.editor-surface .ProseMirror figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.post-body figcaption,
.editor-surface .ProseMirror figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--putty);
  padding: 8px 12px;
  border-top: 1px solid var(--hairline);
}

/* ---------- Serbest içerik editörü (Tiptap, pafta dili) ---------- */

.post-editor { margin-top: 4px; }

/* Kompakt, ikon öncelikli araç çubuğu — Word/Docs'un etkileşim modeli, Sofart'ın çizgi diliyle */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 2px;
  border: 1px solid var(--hairline-strong);
  border-bottom: 0;
  background: var(--surface);
  padding: 4px;
}

.editor-group {
  display: flex;
  align-items: center;
  gap: 1px;
  padding-right: 6px;
  margin-right: 6px;
  border-right: 1px solid var(--hairline);
}

.editor-group:last-of-type { border-right: 0; padding-right: 0; margin-right: 0; }

.editor-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--putty);
  background: none;
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}

.editor-toolbar button:hover { color: var(--bone); background: var(--ink); }
.editor-toolbar button:disabled { opacity: 0.35; cursor: default; }
.editor-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor-toolbar button.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--ink);
}

.editor-toolbar .icon,
.editor-context .icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editor-style-select {
  height: 30px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
}

.editor-style-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--putty);
  margin-left: auto;
}

.editor-note.is-error { color: var(--err); }

/* Bağlama duyarlı alanlar: bağlantı adresi / görsel alt metni */
.editor-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hairline-strong);
  border-bottom: 0;
  background: var(--surface);
  padding: 8px 10px;
}

/* display:flex üstteki kuralda her zaman yazılır — [hidden]'ın tarayıcı
   varsayılanını (display:none) author CSS her koşulda ezer, bu yüzden burada
   AÇIKÇA tekrarlanmadan hidden özniteliği görsel olarak hiçbir şey yapmaz. */
.editor-context[hidden] { display: none; }

.editor-context label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--putty);
  white-space: nowrap;
}

.editor-context input {
  flex: 1;
  min-width: 200px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
  padding: 8px 10px;
}

.editor-context input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor-context input.is-invalid { border-color: var(--err); }

/* Görsel bağlam paneli: alt metin satırı + yerleşim satırı (hiza/sarma/boyut) alt alta */
.editor-context--image {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Yüzen görsel araç çubuğu (Word/Notion deseni) — konumu post-editor.js
   tarafından seçili görsele göre hesaplanır (position:fixed, top/left); yalnızca
   burada üst düzey (sabit araç çubuğunun/paftanın üstünde) görünmesi gerekir. */
.editor-context--floating {
  position: fixed;
  z-index: 70;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  border-bottom: 1px solid var(--hairline-strong);
  box-shadow: 0 2px 0 var(--hairline-strong);
}

.editor-context--floating input {
  flex: none;
  min-width: 0;
  width: 200px;
}

.editor-context-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Görsel hizası + sarma düğmeleri, araç çubuğu ikon düğmeleriyle aynı dil */
.editor-context-row button[data-img-align],
.editor-wrap-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--putty);
  background: none;
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
}

.editor-context-row button[data-img-align]:hover,
.editor-wrap-toggle:hover { color: var(--bone); background: var(--ink); }

.editor-context-row button[data-img-align].is-active,
.editor-wrap-toggle.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--ink);
}

.editor-wrap-toggle:disabled { opacity: 0.35; cursor: default; }
.editor-context-row button[data-img-align]:focus-visible,
.editor-wrap-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor-width-stepper { margin-left: auto; }
.editor-width-stepper button:disabled { opacity: 0.35; cursor: default; }

.editor-width-value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--bone);
  min-width: 34px;
  text-align: center;
}

/* Yazım yüzeyi — çevresindeki form alanının tamamını doldurur, ayrı bir dar
   sütun açmaz (yayın sayfasıyla aynı ilke: genişlik çerçeveden gelir) */
/* Sabit başlangıç yüksekliğinde belge çalışma alanı: uzun içerik SAYFAYI değil
   kendi içini kaydırır; köşedeki yerleşik tarayıcı tutamacıyla dikey olarak
   yeniden boyutlandırılabilir (resize:vertical, textarea'daki gibi). Araç
   çubuğu bu elemanın DIŞINDA olduğu için (bkz. edit.blade.php) iç kaydırmadan
   etkilenmez, her zaman erişilebilir kalır. */
.editor-surface .ProseMirror {
  height: 700px;
  min-height: 220px;
  max-height: 80vh;
  resize: vertical;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 28px;
  border: 1px solid var(--hairline-strong);
  background: var(--ink);
  color: var(--bone);
  line-height: 1.75;
  outline: none;
  overflow-wrap: break-word;
  word-break: break-word;
}

.editor-surface .ProseMirror:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor-surface .ProseMirror p { margin: 0 0 1.1em; }

/* Boş editör yer tutucusu (Placeholder eklentisi data-placeholder basar) */
.editor-surface .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--putty);
  opacity: 0.7;
}

/* Boş resim altyazısı ipucu — kayda girmez, yalnızca editörde görünür */
.editor-surface .ProseMirror figcaption:empty::before {
  content: "Alt yazı ekle (isteğe bağlı)…";
  color: var(--putty);
  opacity: 0.6;
}

.editor-surface .ProseMirror figure.ProseMirror-selectednode,
.editor-surface .ProseMirror .ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.editor-surface .ProseMirror-dropcursor { border-color: var(--gold); }

/* JS editörü devralana dek ham HTML yedeği görünür kalır */
.post-editor textarea {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Hizalama — sınıf tabanlı (satır içi stil yasak); sol = varsayılan, sınıfsız */
.post-body .align-center,
.editor-surface .ProseMirror .align-center { text-align: center; }

.post-body .align-right,
.editor-surface .ProseMirror .align-right { text-align: right; }

.post-body .align-justify,
.editor-surface .ProseMirror .align-justify { text-align: justify; }

/* Görsel genişlik basamakları (yüzde) — hepsi varsayılan olarak ortalanır;
   figure--small/figure--medium eski içerikle uyum için 40%/70%'e eşdeğer tutulur. */
.post-body figure.figure--small,
.editor-surface .ProseMirror figure.figure--small,
.post-body figure.figure--w40,
.editor-surface .ProseMirror figure.figure--w40 { max-width: 40%; }

.post-body figure.figure--medium,
.editor-surface .ProseMirror figure.figure--medium,
.post-body figure.figure--w70,
.editor-surface .ProseMirror figure.figure--w70 { max-width: 70%; }

.post-body figure.figure--w20, .editor-surface .ProseMirror figure.figure--w20 { max-width: 20%; }
.post-body figure.figure--w30, .editor-surface .ProseMirror figure.figure--w30 { max-width: 30%; }
.post-body figure.figure--w50, .editor-surface .ProseMirror figure.figure--w50 { max-width: 50%; }
.post-body figure.figure--w60, .editor-surface .ProseMirror figure.figure--w60 { max-width: 60%; }
.post-body figure.figure--w80, .editor-surface .ProseMirror figure.figure--w80 { max-width: 80%; }
.post-body figure.figure--w90, .editor-surface .ProseMirror figure.figure--w90 { max-width: 90%; }

.post-body figure[class*="figure--"],
.editor-surface .ProseMirror figure[class*="figure--"] {
  margin-left: auto;
  margin-right: auto;
}

/* Blok hizası — sarma YOKKEN görseli sütun içinde sola/sağa yaslar (float yok) */
.post-body figure.align-left:not(.wrap),
.editor-surface .ProseMirror figure.align-left:not(.wrap) { margin-left: 0; margin-right: auto; }

.post-body figure.align-right:not(.wrap),
.editor-surface .ProseMirror figure.align-right:not(.wrap) { margin-left: auto; margin-right: 0; }

/* Metni sar (Word'ün "Wrap Text"i) — figure kayar, sonraki paragraflar yanından akar */
.post-body figure.align-left.wrap,
.editor-surface .ProseMirror figure.align-left.wrap {
  float: left;
  margin: 4px 24px 12px 0;
}

.post-body figure.align-right.wrap,
.editor-surface .ProseMirror figure.align-right.wrap {
  float: right;
  margin: 4px 0 12px 24px;
}

@media (max-width: 640px) {
  .post-body figure[class*="figure--"],
  .editor-surface .ProseMirror figure[class*="figure--"] { max-width: 100%; }

  /* Dar ekranda sarma da anlamını yitirir — görsel tam genişlikte, normal akışta */
  .post-body figure.wrap,
  .editor-surface .ProseMirror figure.wrap {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Yeniden boyutlandırma tutamacı — yalnızca editörde, seçili görselde görünür */
.editor-surface .ProseMirror figure .figure-resize-handle {
  display: none;
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--ink);
  cursor: nwse-resize;
}

.editor-surface .ProseMirror figure {
  position: relative;
}

.editor-surface .ProseMirror figure.ProseMirror-selectednode .figure-resize-handle {
  display: block;
}

/* Görsel boyut düğmeleri (bağlam alanında) — araç çubuğu düğmeleriyle aynı dil */
.editor-sizes {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}

.editor-sizes button {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--putty);
  background: none;
  border: 1px solid transparent;
  padding: 7px 9px;
  min-height: 32px;
  cursor: pointer;
}

.editor-sizes button:hover { color: var(--bone); }
.editor-sizes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.editor-sizes button.is-active {
  color: var(--accent);
  border-color: var(--accent);
}

/* Görsel boru hattı — <x-picture> bileşeninin sarmalayıcısı düzene karışmaz:
   içindeki img, eski <img> ile birebir aynı kutuda yaşar; mevcut tüm
   ".xyz img" seçicileri ve esnek düzenler değişiklik gerektirmez */
picture { display: contents; }

/* ============ video bölümleri (teslim türleri geçişi) ============ */

/* İzleyici kenar çubuğunda bölüm başlığı — yalnızca 2+ bölümde basılır */
.video-chapter-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 14px 16px 6px;
  border-bottom: 1px solid var(--hairline);
}

/* Derslerim: teslim türü grup başlığı (Canlı Kurslar / Video Kurslar / Kitaplar) */
.library-group-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--putty);
  margin-top: 40px;
}

.library-group-title:first-of-type {
  margin-top: 8px;
}

/* ============ kurs teslim türü keşfi (nav dropdown + filtre + ana sayfa) ============ */

/* Ana menü "Kurslar" açılır menüsü — tetikleyici .site-nav a ile aynı tipografi,
   normal bir bağlantı gibi okunur; panel .hover-dropdown JS katmanıyla (script.js)
   fareyle üzerine gelince açılır, <details> sayesinde JS'siz de tıklama/klavye çalışır. */
/* display:flex + align-items:center: <details>'in kendi kutusu, içindeki 0.9rem'lik
   <summary>'e değil kalıtılan 16px kök yazı tipine göre satır yüksekliği kurduğundan
   diğer .site-nav bağlantılarından birkaç piksel daha uzun oluyordu — bu, tetikleyiciyi
   satırda hafifçe kaydırıyordu. Flex ile kutu doğrudan <summary>'e sıkı sarılır. */
.site-nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* Keşfet, .site-nav-mega'yı .nav-flyout gibi tetikleyiciye değil header'a göre tam
   genişlikte konumlandırır — sarmalayıcının kendi konumlama bağlamı burada iptal edilir */
.site-nav-mega-wrap { position: static; }

.site-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--putty);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.site-nav-trigger::-webkit-details-marker { display: none; }
.site-nav-trigger::marker { content: ""; }

.site-nav-trigger:hover { color: var(--bone); }
.site-nav-trigger.is-active { color: var(--accent); }
.site-nav-dropdown[open] .nav-caret { transform: rotate(180deg); }

/* Yüzen panel — admin-nav-menu ile aynı görsel dil (hairline + gölge, keskin köşe) */
.site-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  padding: 6px;
}

.site-nav-dropdown[open] .site-nav-menu { animation: admin-nav-menu-in 0.14s ease; }

@media (prefers-reduced-motion: reduce) {
  .site-nav-dropdown[open] .site-nav-menu { animation: none; }
}

.site-nav-menu a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--putty);
  text-decoration: none;
  padding: 10px 12px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav-menu a:hover { color: var(--bone); background: var(--ink); }

.site-nav-menu a.is-active {
  color: var(--accent);
  background: var(--ink);
  box-shadow: inset 2px 0 0 var(--gold);
}

@media (max-width: 799.98px) {
  /* Dar ekranda menü tetikleyicinin altında düz akışta, girintili bir alt liste
     olarak açılır — .nav-open .site-nav a zaten üst seviye linklerle aynı
     padding/hairline'ı otomatik uygular (submenü linkleri de birer .site-nav a) */
  .site-nav-trigger { padding: 12px 0; border-bottom: 1px solid var(--hairline); }

  .site-nav-menu {
    position: static;
    box-shadow: none;
    border-width: 0;
    min-width: 0;
    padding: 0 0 0 16px;
    animation: none;
  }
}

/* Keşfet mega-menüsü — .nav-flyout (hesap paneli) ile birebir aynı görsel dil VE
   birebir aynı iki-katmanlı yapı: .site-nav-mega tam genişlikte zemin (nav-flyout'un
   kendisi gibi, .container TAŞIMAZ — taşısaydı max-width zemini de sıkıştırırdı),
   genişlik sınırlaması yalnızca İÇERİDEKİ .container.discover-grid'de (nav-flyout-grid
   ile aynı desen). .site-nav-mega-wrap konumlama bağlamını iptal ettiğinden panel
   tetikleyiciye değil .site-header'a göre konumlanır (nav-flyout ile aynı taban). */
.site-nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--hairline-strong);
  padding-top: 40px;
  padding-bottom: 64px;
}

.site-nav-dropdown[open] .site-nav-mega { animation: admin-nav-menu-in 0.14s ease; }

@media (prefers-reduced-motion: reduce) {
  .site-nav-dropdown[open] .site-nav-mega { animation: none; }
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 40px 56px;
}

.discover-col { display: flex; flex-direction: column; }

/* Biz Kimiz paftası: .discover-grid'in tek sütunlu kardeşi — aynı .site-nav-mega
   zemini içinde, aynı .site-nav-mega a tipografisini ve mobil çöküş desenini
   paylaşır (aşağıdaki paylaşılan seçicilere bkz.), yalnızca ızgara/sütun sayısı
   farklıdır. Gelecekte tek sütunlu başka bir alt menü gerekirse bu sınıf aynen
   kullanılabilir. */
.about-grid { display: flex; flex-direction: column; }

/* Sütun başlığı — .nav-flyout-label ile aynı dil (mono, küçük, putty), tıklanamaz */
.discover-col-title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--putty);
  margin: 0 0 14px;
}

/* Bağlantılar .nav-flyout-big ile birebir aynı tipografi ve davranış */
.site-nav-mega a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.site-nav-mega a:hover { color: var(--accent); }

.site-nav-mega a.is-active {
  color: var(--accent);
  padding-left: 10px;
  box-shadow: inset 3px 0 0 var(--gold);
}

@media (max-width: 799.98px) {
  /* Dar ekranda tek sütuna iner: sütunlar alt alta yığılan bölümler olur —
     tetikleyicinin altında düz akışta girintili, kompakt liste (site-nav-menu ile
     aynı desen; hesap panelinin büyük tipografisi yalnızca masaüstü paftasında) */
  .site-nav-mega {
    position: static;
    background: none;
    border-bottom-width: 0;
    padding: 0;
    animation: none;
  }

  .discover-grid {
    display: block;
    padding: 0 0 0 16px;
  }

  /* .about-grid zaten display:flex (grid değil) — mobilde yalnızca aynı girinti gerekir */
  .about-grid { padding: 0 0 0 16px; }

  .discover-col { margin-top: 4px; }

  .discover-col-title {
    font-size: 0.62rem;
    margin: 0 0 2px;
  }

  .site-nav-mega a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--putty);
    padding: 9px 10px;
  }

  .site-nav-mega a:hover { color: var(--bone); background: var(--ink); }

  .site-nav-mega a.is-active {
    background: var(--ink);
    box-shadow: inset 2px 0 0 var(--gold);
  }
}

/* Kurs listesi: teslim türü sekmeleri — admin araç çubuğuyla aynı "hafif şerit"
   dili (kutu değil, tek alt çizgi + ince altın aktif çizgisi); CourseDelivery::cases()
   döngüsünden gelir, yeni bir tür eklenince sekme kendiliğinden büyür */
.delivery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin: 24px 0 32px;
}

.delivery-tab {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--putty);
  text-decoration: none;
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.delivery-tab:hover { color: var(--bone); }
.delivery-tab.is-active { color: var(--accent); border-color: var(--accent); }

/* Ana sayfa: teslim biçimi keşif kartları — kataloğu tekrar etmez, yalnızca
   CourseDelivery::cases() üzerinden süzülmüş kurs listesine yönlendirir */
.format-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 40px;
}

@media (min-width: 860px) {
  .format-grid { grid-template-columns: repeat(3, 1fr); }
}

.format-card {
  display: block;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  background: var(--surface);
  padding: 28px 24px;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.format-card:hover { border-color: var(--hairline-strong); background: var(--ink); }

.format-card h3 { color: var(--bone); margin-bottom: 8px; }
.format-card p { color: var(--putty); max-width: 42ch; margin-bottom: 16px; }

/* ============ kurs kapağı + teslim türü etiketi ============ */

/* Teslim türü etiketi (CourseDelivery::label()) — küçük mono/büyük harf metin,
   video-chapter-label/library-group-title ile aynı dil; renkli rozet DEĞİL */
.course-format-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.course-format-label--hero { font-size: 0.78rem; margin-bottom: 10px; }

/* Kart kapağı (ana sayfa ızgarası) — pahlı köşe .course-card'ın clip-path'inden
   miras alınır (negatif kenar boşluğu köşeye kadar taşar, aynı 1px iç payı
   ::before'la aynı hizada kalır ki ince altın/hairline çerçeve görünür kalsın).
   .course-card > * kuralı position:relative + z-index:1'i bedava sağlar. */
.course-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
  margin: -27px -27px 20px -27px;
}

.course-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.course-card-nocover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--putty);
}

/* Sıra kartı kapağı (kurs listesi + Derslerim) — mobilde geniş bant (metinden
   önce), 860px üstünde .course-row'un ilk sütunu (kare küçük görsel) */
.course-row-media {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--ink);
}

.course-row-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.course-row-nocover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: var(--putty);
}

@media (min-width: 860px) {
  .course-row-media { aspect-ratio: 1 / 1; }
}

/* Kurs detay kahramanı (.split-head'in ilk öğesi) — event-hero/post-hero-media
   ile aynı 16:9 editoryal bant dili, ama iki sütunlu split'i bozmadan başlığın
   ÜSTÜNDE tek sütun içinde durur */
.course-hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline-strong);
  overflow: hidden;
  background: var(--ink);
  margin-bottom: 24px;
}

.course-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.course-hero-nocover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.35em;
  color: var(--putty);
}

/* ============ kurs teslim türü kimlik rozeti ============ */

/* Kart altlığında birden çok etiket/rozet yan yana sarılır (sağa hizalı,
   eski tek span'in yerini alır — link solda, rozetler/meta sağda kalır) */
.course-foot-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Kimlik rozeti — .capacity-badge ile AYNI dolu altın/koyu mürekkep tarifi
   (sitenin mevcut "belirgin rozet" dili), yalnızca biraz daha büyük ve
   nefes payı geniş: "yardımcı metin" değil "kimlik" hissi için. LIVE/VIDEO/BOOK
   arasında renk farkı YOK — yalnızca CourseDelivery::label() metni değişir. */
.course-delivery-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gold);
  color: #171204;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.course-card-badge { margin-bottom: 10px; }

/* Detay kahramanında biraz daha iri — başlığın üstündeki tek güçlü öğe */
.course-hero-badge {
  font-size: 0.8rem;
  padding: 7px 14px;
  margin-bottom: 18px;
}

/* Kart altın dolgusuyla hover'da bütünleşince rozet tersine döner (altın
   üstünde altın kalmasın) — .capacity-badge'in hover kuralıyla aynı ilke */
.course-card:hover .course-delivery-badge,
.course-card:focus-within .course-delivery-badge {
  background: #171204;
  color: var(--gold);
}

/* ============================================================
   EKİBİMİZ + PROFİL ALANLARI
   Ekip kartı .event-card'ın kenarlık/zemin VE hover (büyüme+gölge) dilini
   paylaşır — ayrı bir sınıftır (üye profili sayfası yok, kart TIKLANABİLİR
   DEĞİLDİR) ama görsel geri bildirim aynıdır. Izgara .event-list'ten gelir
   (saf yerleşim, yeniden yazılmaz). Fotoğraf oranı kartlardaki 3/4 portre
   oranıyla aynıdır.
   ============================================================ */

.team-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--bone);
}

@media (prefers-reduced-motion: no-preference) {
  .team-card { transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
}

/* .event-card:hover ile birebir aynı değerler. team-card odaklanabilir bir
   tetikleyici İÇERMEZ (bağlantı değil), bu yüzden yalnızca :hover — event-card'ın
   :focus-visible ve .reveal.in özgüllük düzeltmesi burada uygulanamaz/gerekmez. */
.team-card:hover {
  border-color: var(--hairline-strong);
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.team-card:hover .team-card-body h2 { color: var(--accent); }

.team-card-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}

.team-card-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Fotoğrafı olmayan editör: kırık görsel yerine sakin bir kelime işareti
   (etkinlik/kurs kartlarındaki yedekle aynı) */
.team-card-nophoto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--putty);
}

.team-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }

.team-card-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }

/* Rol etiketi kartların künye/eyebrow dilini kullanır (mono, aralıklı, altın) */
.team-card-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.team-card-bio { color: var(--putty); font-size: 0.9rem; }

/* Öğrenim satırı: okul + durum bir ÇİFTTİR, geniş ekranda yan yana okunur;
   dar ekranda alt alta yığılır (tek sütun, ayrı kural gerekmez) */
.education-row {
  display: grid;
  gap: 0 16px;
  padding-bottom: 4px;
}

@media (min-width: 640px) {
  .education-row { grid-template-columns: 1fr 220px; }
}

/* ---------- roller & izinler (Pafta A-12) ---------- */
/* İzin matrisi: grup başına hairline çerçeveli fieldset (mevcut .field-fieldset) —
   her grup (içerik türü) TAM sütun genişliğinde, gruplar YAN YANA dizilmez, alt
   alta akar. Grup içinde her izin kendi satırında; yalnızca bir temel iznin
   ".../updateOthers" veya ".../deleteOthers" eşleniği (.perm-row) aynı satırda
   yan yana durur — geri kalanı (view/publish/tek başına delete) tam genişlik. */
.perm-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 8px 0 24px;
}

.perm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.perm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.perm-row--full { grid-template-columns: 1fr; }

.perm-grid .field-check {
  min-height: 40px;
  margin-bottom: 0;
}

.perm-grid .field-check input { font-size: 19px; }


/* ---------- denetim kaydı temizliği (Pafta A-13) ----------
   Modal, etkinlik başvuru modalının (.apply-modal) diliyle aynıdır: sabit örtü,
   altın üst çizgili panel, sağ üstte × kapatma. Fark, içeriğin iframe değil bir
   form olması ve panelin KAYDIRILABİLİR olmasıdır (süzgeç listesi uzayabilir).
   Silme eylemi tek yerde kırmızıdır: --err zaten projenin tehlike belirteci
   (.btn-remove:hover, .action-menu-item--danger) — altın accent kuralı bozulmaz,
   kırmızı burada süs değil anlam taşır. */
.admin-filter--inline { margin-bottom: 0; }

.cleanup-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cleanup-modal[hidden] { display: none; }

.cleanup-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.cleanup-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 96vw);
  max-height: min(88vh, 900px);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-top: 3px solid var(--err);
}

.cleanup-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--putty);
}

.cleanup-modal-close {
  background: none;
  border: 0;
  color: var(--bone);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.cleanup-modal-close:hover { color: var(--err); }

.cleanup-modal-body {
  overflow-y: auto;
  padding: 20px 20px 24px;
}

.cleanup-modal-body .field-fieldset { margin-bottom: 16px; }

.cleanup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}

@media (min-width: 560px) {
  .cleanup-grid { grid-template-columns: 1fr 1fr; }
}

/* Süzgeç kutucukları: izin matrisiyle (.perm-grid) aynı kompakt dil */
.cleanup-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

@media (min-width: 560px) {
  .cleanup-checks { grid-template-columns: 1fr 1fr; }
}

.cleanup-checks .field-check {
  min-height: 40px;
  margin-bottom: 0;
}

.cleanup-checks .field-check input { font-size: 19px; }

/* Önizleme sonucu — yalnızca "Önizle" sonrası basılır */
.cleanup-preview {
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid var(--err);
}

.cleanup-preview-count {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--putty);
  margin-bottom: 14px;
}

.cleanup-preview-count strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--bone);
}

.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--err) 84%, #000); }