/* ============================================================
 * arkhaion.css — Consolidated front-end styles
 * 2026-05-27
 *
 * Sections:
 *  1.  ANIMATIONS
 *  2.  ANGELOS — Index
 *  3.  ANGELOS — Show (article detail)
 *  4.  FLOATING PANEL
 *  5.  SYMPOSION — Index
 *  6.  SYMPOSION — Show (package detail)
 *  7.  SYMPOSION — Register Box (partial)
 *  8.  SYMPOSION — Register Modal (partial)
 *  9.  THESAUROS — Shared header + subnav
 * 10.  THESAUROS — Home (index) overrides (.th-header--home)
 * 11.  THESAUROS — Literature list
 * 12.  THESAUROS — Genre / Genre2 (creator + work lists)
 * 13.  THESAUROS — Work detail
 * 14.  THESAUROS — Read (text viewer)
 * ============================================================ */


/* ── 1. ANIMATIONS ──────────────────────────────────────────── */
/* @keyframes fadeup is defined in style.css — not duplicated here */

@keyframes pulse {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.2); }
}

/* ============================================
   MYTHOLOGY — VAZOLAR
   ============================================ */

.myt-potterias-wrap {
    margin-top: 60px;
    margin-bottom: 60px;
}

.myt-potterias-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e6;
}

.myt-potterias-title {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--black);
}

.myt-potterias-all {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--purple-600);
    text-decoration: none;
}

.myt-potterias-all:hover {
    text-decoration: underline;
}

.myt-potterias-count {
    color: #999;
    font-size: .9rem;
}

.myt-potterias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.myt-pot-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.myt-pot-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background: #f0ede8;
}

.myt-pot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.myt-pot-card:hover .myt-pot-img {
    transform: scale(1.04);
}

.myt-pot-info {
    padding: 0 2px;
}

.myt-pot-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: .9rem;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 600px) {
    .myt-potterias-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================
   MYTHOLOGY
   ============================================ */

.myt-body {
    background: var(--white);
    min-height: 60vh;
    padding: 60px 0 100px;
}

.myt-list-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

.myt-row {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e6;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}

.myt-row:hover {
    background: #f5f5f3;
    padding-left: 8px;
    margin-left: -8px;
    padding-right: 8px;
}

.myt-name {
    font-family: 'Unbounded', sans-serif;
    font-size: .85rem;
    color: var(--black);
    white-space: nowrap;
    min-width: 180px;
}

.myt-spot {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.myt-empty {
    color: #aaa;
    font-style: italic;
    padding: 40px 0;
}

/* Detay sayfası */
.myt-detail-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

.myt-detail-header {
    margin-bottom: 40px;
    border-bottom: 2px solid var(--black);
    padding-bottom: 24px;
}

.myt-detail-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.8rem;
    margin: 0 0 8px;
    color: var(--black);
}

.myt-detail-greek {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: #666;
    display: block;
    margin-bottom: 12px;
}

.myt-detail-spot {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: #444;
    margin: 12px 0 0;
    font-style: italic;
}

.myt-detail-description {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.85;
    color: #222;
    margin-bottom: 60px;
}

/* Silenos */
.myt-silenos-wrap {
    background: #f7f6f2;
    border-left: 3px solid var(--purple-600);
    padding: 32px 36px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 60px;
}

.myt-silenos-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.myt-silenos-title {
    font-family: 'Unbounded', sans-serif;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--purple-600);
}

.myt-silenos-tabs {
    display: flex;
    gap: 8px;
}

.myt-sil-btn {
    background: none;
    border: 1px solid #ccc;
    padding: 5px 14px;
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    cursor: pointer;
    border-radius: 4px;
    color: #666;
    transition: all .15s;
}

.myt-sil-btn.active,
.myt-sil-btn:hover {
    background: var(--purple-600);
    border-color: var(--purple-600);
    color: #fff;
}

.myt-sil-content {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333;
}


/* ── 2. ANGELOS — INDEX ─────────────────────────────────────── */

.ang-header {
  background: var(--black);
  padding: 110px 40px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ang-header::before {
  content: 'ANGELOS';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 200;
  color: rgba(250,250,248,.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .1em;
}
.ang-header-inner { position: relative; z-index: 1; }
.ang-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 88px);
  color: var(--white);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeup .8s .3s forwards;
}
.ang-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 2vw, 19px);
  color: rgba(250,250,248,.45);
  opacity: 0;
  animation: fadeup .8s .5s forwards;
}

/* Top menu (also used in thesauros/genre) */
.ang-topmenu {
  background: var(--black);
  border-top: 1px solid rgba(250,250,248,.06);
  border-bottom: 1px solid rgba(250,250,248,.06);
  padding: 0 40px;
  position: sticky;
  top: 56px;
  z-index: 50;
}
.ang-topmenu-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 48px;
}
.ang-type-tabs {
  display: flex;
  border-right: 1px solid rgba(250,250,248,.08);
  padding-right: 24px;
  margin-right: 0;
}
.ang-type-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(250,250,248,.35);
  padding: 16px 14px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.ang-type-tab:hover { color: rgba(250,250,248,.7); }
.ang-type-tab.active {
  color: var(--purple-200);
  border-bottom-color: var(--purple-400);
}
.ang-cat-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.ang-cat-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(250,250,248,.35);
  padding: 16px 12px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.ang-cat-tab:hover { color: rgba(250,250,248,.7); }
.ang-cat-tab.active {
  color: var(--purple-200);
  border-bottom-color: var(--purple-400);
}
.ang-ancient-date {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.ang-ancient-month { color: var(--purple-200); }
.ang-ancient-day   { color: rgba(250,250,248,.5); }
.ang-ancient-fest  { color: rgba(250,250,248,.3); font-style: italic; }

/* Body */
.ang-body {
  background: var(--white);
  padding: 48px 40px 100px;
}
.ang-body-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.ang-main    { background: var(--white); padding: 0; }
.ang-sidebar { background: var(--gray-100); padding: 0; }

/* Category badge */
.ang-cat-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--purple-400);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ang-cat-badge::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--purple-400);
}
.ang-cat-badge.small { font-size: 8px; }

/* Post meta */
.ang-post-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-400);
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Featured article */
.ang-featured {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  transition: background .2s;
}
.ang-featured:hover { background: var(--gray-100); }
.ang-featured-img-wrap { overflow: hidden; }
.ang-featured-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.ang-featured:hover .ang-featured-img { transform: scale(1.02); }
.ang-featured-body { padding: 28px 32px; }
.ang-featured-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 12px;
}
.ang-featured-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1.65;
  margin-bottom: 16px;
}
.ang-featured-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
  display: flex;
  gap: 16px;
}

/* Article groups */
.ang-group { border-bottom: 1px solid var(--gray-200); }
.ang-big {
  display: flex;
  gap: 0;
  text-decoration: none;
  padding: 24px 32px;
  transition: background .2s;
  border-bottom: 1px dashed var(--gray-200);
}
.ang-big:hover { background: var(--gray-100); }
.ang-big-img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 20px;
}
.ang-big-body { flex: 1; }
.ang-big-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 8px;
}
.ang-big-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gray-400);
  line-height: 1.6;
}

/* 3-col block */
.ang-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border-bottom: 1px dashed var(--gray-200);
}
.ang-three-card {
  background: var(--white);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.ang-three-card:hover { background: var(--gray-100); }

/* 2-col block */
.ang-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-200);
}
.ang-two-card {
  background: var(--white);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.ang-two-card:hover { background: var(--gray-100); }

.ang-card-img  { width: 100%; height: 160px; object-fit: cover; display: block; }
.ang-card-body { padding: 16px 20px; }
.ang-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 6px;
}
.ang-two-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gray-400);
  line-height: 1.55;
}

/* Right sidebar — short items */
.ang-short {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  transition: background .2s;
}
.ang-short:hover    { background: var(--white); }
.ang-short-img      { width: 100%; height: 140px; object-fit: cover; display: block; }
.ang-short-body     { padding: 16px 20px; }
.ang-short-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 6px;
}
.ang-short-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--gray-400);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .ang-body-inner { grid-template-columns: 1fr; }
  .ang-three      { grid-template-columns: 1fr; }
  .ang-two        { grid-template-columns: 1fr; }
  .ang-big        { flex-direction: column; }
  .ang-big-img    { width: 100%; margin-right: 0; margin-bottom: 16px; }
}
@media (max-width: 768px) {
  .ang-header        { padding: 90px 20px 40px; }
  .ang-topmenu       { padding: 0 20px; top: 56px; }
  .ang-body          { padding: 32px 20px 80px; }
  .ang-featured-body { padding: 20px; }
  .ang-featured-img  { height: 220px; }
  .ang-big           { padding: 16px 20px; }
}


/* ── 3. ANGELOS — SHOW ──────────────────────────────────────── */

.as-hero {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background: var(--black);
}
.as-hero.no-image { height: 320px; }
.as-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  filter: grayscale(15%);
}
.as-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,17,16,.1) 0%,
    rgba(17,17,16,.5) 50%,
    rgba(17,17,16,.95) 100%
  );
  z-index: 1;
}
.as-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 0 60px 48px;
  max-width: 1100px;
}
.as-breadcrumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,248,.3);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.as-breadcrumb a {
  color: rgba(250,250,248,.3);
  text-decoration: none;
  transition: color .2s;
}
.as-breadcrumb a:hover   { color: var(--purple-200); }
.as-breadcrumb-current   { color: rgba(250,250,248,.55); }
.as-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 12px 0;
  opacity: 0;
  animation: fadeup .8s .3s forwards;
}
.as-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,250,248,.4);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeup .8s .5s forwards;
}
.as-meta-item { color: rgba(250,250,248,.4); }
.as-meta-sep  { color: rgba(250,250,248,.2); }

.as-body {
  background: var(--white);
  padding: 64px 40px 100px;
}
.as-body-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}
.as-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--gray-700);
  line-height: 1.7;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 36px;
}
.as-content {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gray-700);
  line-height: 1.85;
}
.as-content p  { margin-bottom: 20px; }
.as-content h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  color: var(--black);
  margin: 36px 0 16px;
}
.as-content h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--black);
  margin: 28px 0 12px;
}
.as-event-box {
  border: 1px solid var(--gray-200);
  padding: 24px 28px;
  margin: 36px 0;
}
.as-event-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 16px;
}
.as-event-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.as-event-row:last-child { border-bottom: none; }
.as-event-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.as-event-val {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--black);
}
.as-source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.as-source-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray-400);
}
/* RESOLVED: full version — letter-spacing + transition (angelos/show) */
.as-source-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--purple-600);
  text-decoration: none;
  transition: color .2s;
}
.as-source-link:hover { color: var(--purple-400); }

.as-sidebar {
  position: sticky;
  top: 80px;
}
.as-sidebar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 20px;
}
.as-related { margin-bottom: 24px; }
.as-related-card {
  display: flex;
  gap: 0;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--gray-200);
  margin-bottom: 8px;
  transition: background .2s;
}
.as-related-card:hover { background: var(--gray-100); }
.as-related-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.as-related-body { padding: 14px 16px; }
.as-related-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 6px;
}
.as-back-btn {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray-400);
  border: 1px solid var(--gray-200);
  padding: 12px 16px;
  text-align: center;
  border-radius: 2px;
  transition: all .2s;
}
.as-back-btn:hover {
  border-color: var(--purple-400);
  color: var(--purple-400);
}

@media (max-width: 900px) {
  .as-body-inner { grid-template-columns: 1fr; gap: 40px; }
  .as-sidebar    { position: static; }
}
@media (max-width: 768px) {
  .as-hero         { height: 380px; }
  .as-hero-content { padding: 0 24px 32px; }
  .as-body         { padding: 40px 20px 80px; }
  .as-title        { font-size: 28px; }
}


/* ── 4. FLOATING PANEL ──────────────────────────────────────── */

.fp-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: rgba(17,17,16,.92);
  border: 1px solid rgba(127,119,221,.3);
  border-radius: 4px;
  padding: 16px;
  backdrop-filter: blur(12px);
  width: 320px;
  transition: all .2s;
}
.fp-indicators {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  align-items: center;
}
.fp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(127,119,221,.3);
  cursor: pointer;
  transition: background .2s;
}
.fp-dot.active { background: var(--purple-400); }
.fp-arrow {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(250,250,248,.4);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  transition: color .2s;
  line-height: 1;
}
.fp-arrow:hover { color: var(--purple-200); }
.fp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 12px;
}
.fp-tab        { display: none; }
.fp-tab.active { display: block; }
.fp-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.fp-nav-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,250,248,.5);
  text-decoration: none;
  padding: 7px 8px;
  border: 1px solid rgba(250,250,248,.08);
  border-radius: 2px;
  transition: all .15s;
  text-align: center;
}
.fp-nav-btn:hover,
.fp-nav-btn.active {
  background: rgba(127,119,221,.2);
  border-color: rgba(127,119,221,.3);
  color: var(--purple-200);
}
.fp-mask-active {
  background: rgba(127,119,221,.1);
  border: 1px solid rgba(127,119,221,.2);
  padding: 10px 12px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.fp-mask-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--white);
  line-height: 1.2;
}
.fp-mask-demos {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--purple-200);
  margin-top: 3px;
}
.fp-mask-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.fp-mask-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(250,250,248,.1);
  color: rgba(250,250,248,.4);
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 2px;
  text-align: left;
  transition: all .15s;
}
.fp-mask-btn:hover {
  border-color: rgba(127,119,221,.3);
  color: var(--purple-200);
}
.fp-user-links {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(250,250,248,.08);
}
.fp-user-link {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,250,248,.4);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
}
.fp-user-link:hover        { color: var(--purple-200); }
.fp-user-link.logout:hover { color: #b43c3c; }
.fp-login-btn {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--purple-600);
  color: var(--white);
  padding: 10px;
  border-radius: 2px;
  margin-bottom: 10px;
  transition: background .2s;
}
.fp-login-btn:hover { background: var(--purple-400); }
.fp-login-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(250,250,248,.3);
  line-height: 1.5;
  text-align: center;
}
.fp-no-mask {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(250,250,248,.4);
  margin-bottom: 10px;
  line-height: 1.5;
}
.fp-create-mask-btn {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(127,119,221,.4);
  color: var(--purple-200);
  padding: 10px;
  border-radius: 2px;
  transition: all .2s;
}
.fp-create-mask-btn:hover { background: rgba(127,119,221,.15); }
.fp-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(250,250,248,.06);
}
.fp-setting-key {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,248,.4);
}
.fp-lang-btns { display: flex; gap: 4px; }
.fp-lang-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  background: transparent;
  border: 1px solid rgba(250,250,248,.15);
  color: rgba(250,250,248,.4);
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.fp-lang-btn:hover,
.fp-lang-btn.active {
  background: rgba(127,119,221,.2);
  border-color: rgba(127,119,221,.35);
  color: var(--purple-200);
}

@media (max-width: 768px) {
  .fp-wrap { bottom: 12px; right: 12px; width: 190px; }
}


/* ── 5. SYMPOSION — INDEX ───────────────────────────────────── */

.sy-header {
  background: var(--black);
  padding: 120px 40px 80px;
  position: relative;
  overflow: hidden;
}
.sy-header::before {
  content: 'SYMPOSION';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 200;
  color: rgba(250,250,248,.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .1em;
}
.sy-header-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sy-page-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 88px);
  color: var(--white);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeup .8s .4s forwards;
}
.sy-page-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(250,250,248,.5);
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeup .8s .6s forwards;
}
.sy-filter {
  display: inline-flex;
  gap: 8px;
  background: rgba(250,250,248,.05);
  border: 1px solid rgba(250,250,248,.1);
  border-radius: 3px;
  padding: 6px;
  opacity: 0;
  animation: fadeup .8s .8s forwards;
}
.sy-filter-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: rgba(250,250,248,.4);
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 2px;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sy-filter-btn.active,
.sy-filter-btn:hover {
  background: rgba(127,119,221,.2);
  color: var(--purple-200);
}

/* Patika badges */
.patika-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.patika-dot.agora    { background: var(--purple-400); }
.patika-dot.anarkhia { background: #c47a3a; }
.patika-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.patika-badge.agora {
  background: rgba(127,119,221,.12);
  color: var(--purple-400);
  border: 1px solid rgba(127,119,221,.25);
}
.patika-badge.anarkhia {
  background: rgba(196,122,58,.1);
  color: #c47a3a;
  border: 1px solid rgba(196,122,58,.25);
}

/* Sections */
.sy-section {
  background: var(--white);
  padding: 80px 40px;
}
.sy-section.sy-past {
  background: var(--gray-100);
  padding: 64px 40px 100px;
}
.sy-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.sy-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sy-past-label {
  color: var(--gray-400);
  padding-top: 8px;
  border-top: 1px solid var(--gray-200);
}
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--purple-400);
  display: inline-block;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--purple-400);
  animation: pulse 2s ease-out infinite;
}
.sy-group        { margin-bottom: 64px; }
.sy-group-header { margin-bottom: 28px; }
.sy-group-meta   { margin-bottom: 12px; }
.sy-group-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 10px;
}
.sy-group-desc {
  font-family: var(--font-serif);
    font-family: optima-lt-pro;
  font-style: italic;
  font-size: 14px;
  color: var(--gray-400);
  line-height: 1.6;
  max-width: 640px;
}

/* Package cards */
.sy-packages {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.sy-package-card {
  background: var(--white);
  padding: 28px 32px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background .2s;
  position: relative;
  overflow: hidden;
}
.sy-package-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--purple-400);
  transition: height .3s;
}
.sy-package-card:hover          { background: var(--gray-100); }
.sy-package-card:hover::before  { height: 100%; }
.sy-package-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.sy-package-info { flex: 1; }
.sy-package-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 8px;
}
.sy-package-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
    font-family: optima-lt-pro;
  color: var(--gray-400);
  line-height: 1.55;
}
.sy-package-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--gray-200);
  transition: color .2s, transform .2s;
  flex-shrink: 0;
  margin-top: 2px;
}
.sy-package-card:hover .sy-package-arrow {
  color: var(--purple-400);
  transform: translateX(4px);
}
.sy-package-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.sy-meta-item {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sy-meta-icon { color: var(--purple-200); font-size: 11px; }

/* Past grid */
.sy-past-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  margin-bottom: 40px;
}
.sy-past-card {
  background: var(--gray-100);
  padding: 24px 28px;
  text-decoration: none;
  transition: background .2s;
}
.sy-past-card:hover { background: var(--white); }
.sy-past-patika {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sy-past-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 10px;
}
.sy-past-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* Pagination */
.sy-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.sy-page-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  background: var(--white);
  padding: 8px 14px;
  border-radius: 2px;
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
}
.sy-page-btn:hover,
.sy-page-btn.active {
  background: var(--purple-600);
  border-color: var(--purple-600);
  color: var(--white);
}
.sy-page-btn.disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.nav-links a.active { color: var(--purple-200) !important; }

@media (max-width: 768px) {
  .sy-header          { padding: 100px 20px 60px; }
  .sy-section         { padding: 56px 20px; }
  .sy-section.sy-past { padding: 48px 20px 80px; }
  .sy-filter          { flex-wrap: wrap; justify-content: center; }
  .sy-package-card    { padding: 20px; }
  .sy-package-footer  { gap: 14px; }
  .sy-past-grid       { grid-template-columns: 1fr; }
  .sy-group-title     { font-size: 26px; }
}


/* ── 6. SYMPOSION — SHOW ────────────────────────────────────── */

.sd-hero {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: var(--black);
}
.sd-hero.no-image { height: 380px; }
.sd-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .55;
  filter: grayscale(20%);
}
.sd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,17,16,.2) 0%,
    rgba(17,17,16,.5) 50%,
    rgba(17,17,16,.92) 100%
  );
  z-index: 1;
}
.sd-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 0 60px 48px;
  max-width: 1100px;
}
.sd-breadcrumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,248,.35);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sd-breadcrumb a {
  color: rgba(250,250,248,.35);
  text-decoration: none;
  transition: color .2s;
}
.sd-breadcrumb a:hover  { color: var(--purple-200); }
.sd-breadcrumb-current  { color: rgba(250,250,248,.6); }
.sd-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.sd-seans-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,248,.4);
}
.sd-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 64px);
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  opacity: 0;
  animation: fadeup .8s .3s forwards;
}
.sd-narrator {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--purple-200);
  opacity: 0;
  animation: fadeup .8s .5s forwards;
}
.sd-body {
  background: var(--white);
  padding: 64px 40px 100px;
}
.sd-body-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 64px;
  align-items: start;
}
.sd-description {
  font-family: var(--font-serif);
    font-family:'optima-lt-pro';
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-700);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 48px;
}

.sd-description div, ul{
    margin:15px 0px;
}
.sd-description div, ul, li{
    margin:15px 0px 0px 15px;
}

.sd-block-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 28px;
}

/* Seances */
.sd-seances           { display: flex; flex-direction: column; }
.sd-seance {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--gray-100);
  position: relative;
}
.sd-seance:first-of-type { padding-top: 0; }
.sd-seance.past          { opacity: .55; }
.sd-seance-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gray-200);
  min-width: 28px;
  padding-top: 3px;
}
.sd-seance-body   { flex: 1; }
.sd-seance-header { margin-bottom: 12px; }
.sd-seance-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sd-seance-upcoming {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(127,119,221,.12);
  color: var(--purple-400);
  border: 1px solid rgba(127,119,221,.25);
  padding: 3px 8px;
  border-radius: 2px;
}
.sd-seance-done {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
  background: var(--gray-100);
  padding: 3px 8px;
  border-radius: 2px;
}
.sd-seance-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--gray-700);
}
.sd-seance-dur {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray-400);
  letter-spacing: .06em;
}
.sd-seance-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--black);
  line-height: 1.25;
}
.sd-seance-content {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1.7;
  margin-top: 8px;
}

/* Sidebar */
.sd-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sd-register-box {
  border: 1px solid var(--gray-200);
  padding: 32px;
  background: var(--white);
}
.sd-register-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 24px;
}
.sd-next-seance {
  background: var(--gray-100);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sd-next-seance.ended { opacity: .5; }
.sd-next-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.sd-next-date {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--black);
  line-height: 1.2;
}
.sd-next-hour {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--purple-400);
  letter-spacing: .08em;
}
.sd-register-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
}
.sd-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}
.sd-info-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.sd-info-val {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--black);
}
.sd-register-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--purple-600);
  color: var(--white);
  padding: 16px;
  border: none;
  cursor: pointer;
  transition: background .2s;
  border-radius: 2px;
  margin-bottom: 12px;
}
.sd-register-btn:hover:not(.disabled) { background: var(--purple-400); }
.sd-register-btn.disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
.sd-register-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gray-400);
  line-height: 1.5;
  text-align: center;
}
.sd-siblings {
  border: 1px solid var(--gray-200);
  padding: 28px 32px;
}
.sd-sibling-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  transition: all .15s;
}
.sd-sibling-card:last-child                  { border-bottom: none; }
.sd-sibling-card:hover .sd-sibling-name      { color: var(--purple-600); }
.sd-sibling-card:hover .sd-sibling-arrow     { color: var(--purple-400); transform: translateX(3px); }
.sd-sibling-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--black);
  transition: color .15s;
  line-height: 1.3;
}
.sd-sibling-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gray-200);
  transition: color .15s, transform .15s;
  flex-shrink: 0;
  margin-left: 12px;
}

@media (max-width: 900px) {
  .sd-body-inner { grid-template-columns: 1fr; gap: 40px; }
  .sd-sidebar    { position: static; }
}
@media (max-width: 768px) {
  .sd-hero         { height: 420px; }
  .sd-hero-content { padding: 0 24px 36px; }
  .sd-body         { padding: 40px 20px 80px; }
  .sd-title        { font-size: 32px; }
  .sd-register-box { padding: 24px; }
  .sd-siblings     { padding: 20px 24px; }
}


/* ── 7. SYMPOSION — REGISTER BOX (partial) ──────────────────── */

.sd-flash {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 12px 16px;
  border-radius: 2px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.sd-flash.success {
  background: rgba(127,119,221,.08);
  border: 1px solid rgba(127,119,221,.2);
  color: var(--purple-600);
}
.sd-flash.info {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.sd-flash.error {
  background: rgba(180,60,60,.06);
  border: 1px solid rgba(180,60,60,.2);
  color: #b43c3c;
}
.sd-registered-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(127,119,221,.08);
  border: 1px solid rgba(127,119,221,.2);
  padding: 14px 20px;
  border-radius: 2px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-600);
}
.sd-registered-icon { font-size: 14px; color: var(--purple-400); }
.sd-cancel-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--gray-200);
  color: var(--gray-400);
  padding: 10px;
  cursor: pointer;
  border-radius: 2px;
  margin-bottom: 12px;
  transition: all .2s;
}
.sd-cancel-btn:hover { border-color: #b43c3c; color: #b43c3c; }


/* ── 8. SYMPOSION — REGISTER MODAL (partial) ────────────────── */

.sy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,16,.75);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.sy-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.sy-modal {
  background: var(--white);
  width: 100%;
  max-width: 440px;
  padding: 48px 40px;
  position: relative;
  transform: translateY(16px);
  transition: transform .25s;
}
.sy-modal-overlay.open .sy-modal { transform: translateY(0); }
.sy-modal-close {
  position: absolute;
  top: 16px; right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.sy-modal-close:hover { color: var(--black); }
.sy-modal-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 8px;
}
.sy-modal-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 28px;
}
.sy-modal-header { margin-bottom: 8px; }
.sy-modal-field  { margin-bottom: 20px; }
.sy-modal-field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
  display: block;
  margin-bottom: 8px;
}
.sy-optional { color: var(--gray-200); text-transform: none; letter-spacing: 0; }
.sy-modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--black);
  border-radius: 2px;
  outline: none;
  transition: border-color .2s;
}
.sy-modal-input:focus { border-color: var(--purple-400); }
.sy-modal-btn {
  width: 100%;
  padding: 14px;
  background: var(--purple-600);
  color: var(--white);
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background .2s;
  margin-bottom: 16px;
  margin-top: 8px;
}
.sy-modal-btn:hover { background: var(--purple-400); }
.sy-modal-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gray-400);
  line-height: 1.6;
  text-align: center;
}
.sy-flash {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 12px 16px;
  border-radius: 2px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.sy-flash.error {
  background: rgba(180,60,60,.06);
  border: 1px solid rgba(180,60,60,.2);
  color: #b43c3c;
}
.sy-flash.info {
  background: rgba(127,119,221,.08);
  border: 1px solid rgba(127,119,221,.2);
  color: var(--purple-600);
}

@media (max-width: 480px) {
  .sy-modal { padding: 36px 24px; }
}


/* ── 9. THESAUROS — SHARED HEADER + SUBNAV ─────────────────── */

.th-header-block { background: var(--black); }

/* RESOLVED: master = _thesauros_header version (110px 40px 56px) */
.th-header {
  background: var(--black);
  padding: 110px 40px 56px;
  position: relative;
  overflow: hidden;
}
.th-header::before {
  content: 'ΘΗΣΑΥΡΟΣ';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(60px, 10vw, 160px);
  font-weight: 200;
  color: rgba(250,250,248,.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .1em;
}
/* RESOLVED: master = 860px version */
.th-header-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* RESOLVED: flex-wrap: wrap included (more compatible) */
.th-breadcrumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250,250,248,.3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.th-breadcrumb a {
  color: rgba(250,250,248,.3);
  text-decoration: none;
  transition: color .2s;
}
.th-breadcrumb a:hover { color: var(--purple-200); }
/* RESOLVED: master = clamp(40px,6vw,80px) + margin-bottom:16px */
.th-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--white);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeup .8s .3s forwards;
}
/* RESOLVED: master = clamp(15px,2vw,19px), no line-height */
.th-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 2vw, 19px);
  color: rgba(250,250,248,.45);
  opacity: 0;
  animation: fadeup .8s .5s forwards;
}

/* Subnav */
.th-subnav {
  border-top: 1px solid rgba(250,250,248,.06);
  position: relative;
  left: calc((100% - 1100px) / 2);
  max-width: 1100px;
}
.th-subnav-inner {
  float: left;
  padding: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 0;
  justify-content: flex-start;
}
.th-subnav-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(250,250,248,.35);
  padding: 16px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.th-subnav-link:hover { color: rgba(250,250,248,.7); }
.th-subnav-link.active {
  color: var(--purple-200);
  border-bottom-color: var(--purple-400);
}

@media (max-width: 768px) {
  /* RESOLVED: master mobile = 90px 20px 40px (_thesauros_header) */
  .th-header       { padding: 90px 20px 40px; }
  .th-subnav       { padding: 0 16px; overflow-x: auto; left: 0; max-width: 100%; }
  .th-subnav-inner { min-height: 44px; }
  .th-subnav-link  { padding: 12px 10px; font-size: 9px; }
}


/* ── 10. THESAUROS — HOME OVERRIDES (.th-header--home) ─────── */
/* Used on thesauros/index.blade.php only                        */
/* Blade: <section class="th-header th-header--home">           */

.th-header--home {
  padding: 120px 40px 80px;
  text-align: center;
}
.th-header--home .th-header-inner {
  max-width: 700px;
}
.th-header--home .th-title {
  font-size: clamp(48px, 7vw, 96px);
  margin-bottom: 20px;
}
.th-header--home .th-subtitle {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

/* Index page section cards */
.th-sections {
  background: var(--white);
  padding: 64px 40px 100px;
}
.th-sections-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.th-sections-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.th-section-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
    border: 1px solid #e0e0dd;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--white);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.th-section-card:hover {
    border-color: var(--purple-600);
    box-shadow: 0 4px 20px rgba(83,74,183,.1);
    transform: translateY(-2px);
}
.th-section-icon {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    color: var(--purple-600);
    line-height: 1;
}
/*
.th-section-card {
  background: var(--white);
  padding: 40px 48px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 40px;
  transition: background .2s;
  position: relative;
  overflow: hidden;
}
.th-section-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--purple-400);
  transition: height .3s;
}
.th-section-card:hover          { background: var(--gray-100); }
.th-section-card:hover::before  { height: 100%; }
.th-section-icon {
  font-family: var(--font-serif);
  font-size: 48px;
  color: var(--purple-200);
  line-height: 1;
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  opacity: .6;
}
*/
.th-section-body  { flex: 1; }
/*
.th-section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 10px;
}
*/
.th-section-title {
    font-family: 'Unbounded', sans-serif;
    font-size: .85rem;
    color: var(--black);
    margin: 0;
}
/*
.th-section-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--gray-400);
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 600px;
}
.th-section-meta {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-400);
}
*/
.th-section-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.th-section-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
}

.th-section-meta span {
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    color: #999;
    background: #f5f5f3;
    padding: 3px 8px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .th-sections-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .th-sections-grid {
        grid-template-columns: 1fr;
    }
}
.th-section-arrow {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--gray-200);
  flex-shrink: 0;
  transition: color .2s, transform .2s;
}
.th-section-card:hover .th-section-arrow {
  color: var(--purple-400);
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .th-header--home  { padding: 90px 20px 56px; }
  .th-sections      { padding: 40px 20px 80px; }
  .th-section-card  { padding: 28px 24px; gap: 20px; }
  .th-section-icon  { font-size: 36px; width: 44px; }
  .th-section-desc  { font-size: 15px; }
}


/* ── 11. THESAUROS — LITERATURE LIST ───────────────────────── */

.th-body {
  background: var(--white);
  padding: 64px 40px 100px;
}
.th-body-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.th-genre-block { background: var(--white); }
.th-genre-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  transition: background .2s;
  position: relative;
  overflow: hidden;
}
.th-genre-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--purple-400);
  transition: height .3s;
}
.th-genre-header:hover          { background: var(--gray-100); }
.th-genre-header:hover::before  { height: 100%; }
.th-genre-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.th-genre-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--black);
  line-height: 1;
}
.th-genre-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.th-genre-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--gray-200);
  transition: color .2s, transform .2s;
}
.th-genre-header:hover .th-genre-arrow {
  color: var(--purple-400);
  transform: translateX(4px);
}
.th-genre-samples {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--gray-200);
  padding: 0;
}
.th-sample-card {
  flex: 1;
  background: var(--gray-100);
  padding: 16px 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .2s;
  min-width: 0;
}
.th-sample-card:hover { background: var(--white); }
.th-sample-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--black);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-sample-author {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-sample-more {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-400);
  text-decoration: none;
  padding: 16px 20px;
  background: var(--gray-100);
  white-space: nowrap;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.th-sample-more:hover { background: var(--white); color: var(--purple-600); }

@media (max-width: 768px) {
  .th-body          { padding: 40px 20px 80px; }
  .th-genre-header  { padding: 20px 24px; }
  .th-genre-samples { flex-wrap: wrap; }
  .th-sample-card   { flex: 1 1 40%; }
  .th-sample-more   { width: 100%; text-align: center; }
}


/* ── 12. THESAUROS — GENRE / CREATOR + WORK LISTS ──────────── */

.th-creator-block {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.th-creator-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 36px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.th-creator-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.th-creator-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--black);
  line-height: 1;
}
.th-creator-dates {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--gray-400);
}
.th-creator-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-400);
}
.th-works-list { display: flex; flex-direction: column; }
.th-work-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 36px 14px 48px;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-100);
  transition: background .15s;
  gap: 24px;
}
.th-work-row:last-child { border-bottom: none; }
.th-work-row:hover      { background: var(--gray-100); }
.th-work-row:hover .th-work-arrow { color: var(--purple-400); transform: translateX(3px); }
.th-work-titles {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.th-work-orig {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--black);
}
.th-work-eng {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--gray-400);
}
.th-work-tr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--gray-400);
}
.th-work-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.th-work-genre {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-200);
}
.th-work-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gray-200);
  transition: color .15s, transform .15s;
}

@media (max-width: 768px) {
  .th-creator-header                         { padding: 20px 20px 12px; }
  .th-work-row                               { padding: 12px 20px; }
  .th-work-eng, .th-work-tr, .th-work-genre  { display: none; }
}


/* ── 13. THESAUROS — WORK DETAIL ────────────────────────────── */

.th-work-subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250,250,248,.35);
  margin-bottom: 12px;
}
.th-work-author {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--purple-200);
  opacity: 0;
  animation: fadeup .8s .5s forwards;
}
.th-work-dates {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(250,250,248,.3);
}
.th-work-body {
  background: var(--white);
  padding: 56px 40px 100px;
}
.th-work-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
}
.tw-read-section {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-200);
}
.th-block-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 20px;
}
.tw-version-select { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-version-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--purple-600);
  color: var(--white);
  padding: 14px 24px;
  border-radius: 2px;
  transition: background .2s;
}
.tw-version-btn:hover { background: var(--purple-400); }
.tw-translator {
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(250,250,248,.6);
  text-transform: none;
}
.tw-char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  margin-bottom: 40px;
}
.tw-char-item {
  background: var(--white);
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--black);
}

/* Sidebar */
.th-work-sidebar { position: sticky; top: 80px; }
.th-info-box {
  border: 1px solid var(--gray-200);
  padding: 24px 28px;
  margin-bottom: 16px;
}
.th-info-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 16px;
}
.th-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  gap: 12px;
}
.th-info-row:last-child { border-bottom: none; }
.th-info-key {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-400);
  flex-shrink: 0;
}
.th-info-val {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--black);
  text-align: right;
}
/* RESOLVED: work.blade.php version — text-align: right */
.th-urn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--gray-400);
  word-break: break-all;
  text-align: right;
}
/* RESOLVED: include transition: all .15s */
.th-sibling-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  transition: all .15s;
}
.th-sibling-link:last-child { border-bottom: none; }
.th-sibling-link span:first-child {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--black);
  transition: color .15s;
}
.th-sibling-link:hover span:first-child { color: var(--purple-600); }
.th-sib-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-200);
}

@media (max-width: 900px) {
  .th-work-inner   { grid-template-columns: 1fr; gap: 40px; }
  .th-work-sidebar { position: static; }
}
@media (max-width: 768px) {
  .th-work-body { padding: 40px 20px 80px; }
}


/* ── 14. THESAUROS — READ (text viewer) ─────────────────────── */

.tr-layout-full {
    display: block;
}

.tr-layout-full .tr-content {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.tr-lang-bar {
  display: flex;
    flex-wrap: wrap;
    gap: 8px;
  margin-bottom: 28px;
  padding: 10px;
  border-bottom: 0 solid var(--gray-200);
  background-color: var(--gray-100);
}
.tr-lang-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray-400);
  padding: 6px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  transition: all .15s;
}
.tr-lang-btn:hover  { border-color: var(--purple-400); color: var(--purple-600); }
.tr-lang-btn.active {
  background: var(--purple-600);
  border-color: var(--purple-600);
  color: var(--white);
}
.tr-workbar {
  background: var(--black);
  border-bottom: 1px solid rgba(250,250,248,.08);
  padding: 0 40px;
  position: sticky;
  top: 56px;
  z-index: 50;
  display: none;
}
.tr-workbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  gap: 24px;
}
.tr-workbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tr-back {
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(250,250,248,.4);
  text-decoration: none;
  transition: color .2s;
  padding: 4px 8px;
}
.tr-back:hover { color: var(--purple-200); }
.tr-work-info  { display: flex; flex-direction: column; gap: 2px; }
.tr-work-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--white);
}
.tr-work-author {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,248,.35);
}
.tr-version-tabs { display: flex; gap: 0; }
.tr-version-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(250,250,248,.35);
  padding: 16px 14px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.tr-version-tab:hover  { color: rgba(250,250,248,.7); }
.tr-version-tab.active { color: var(--purple-200); border-bottom-color: var(--purple-400); }

.tr-body {
  background: var(--white);
  padding: 48px 40px 100px;
  min-height: 60vh;
}
/*
.tr-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}
.tr-sidenav { position: sticky; top: 120px; }
*/
.tr-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
}

.tr-layout-full {
    grid-template-columns: 1fr;
    max-width: 860px;
}

.tr-sidenav {
    position: sticky;
    top: 120px;
}
.tr-sidenav-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 12px;
  padding-left: 12px;
}
.tr-side-btn {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray-400);
  padding: 9px 12px;
  border-left: 2px solid transparent;
  transition: all .15s;
}
.tr-side-btn:hover  { color: var(--gray-700); border-left-color: var(--gray-200); }
.tr-side-btn.active {
  color: var(--purple-600);
  border-left-color: var(--purple-400);
  background: rgba(127,119,221,.05);
}

/* Text content */
.tr-section-title {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px double #ccc;
}
.tr-section-title h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-size: 1.4em;
  color: var(--black);
}
.parshomen-sayfa {
  font-family: 'Georgia', serif;
  color: #222;
  line-height: 1.7;
}
.satirci-left {
  float: left;
  width: 22%;
  text-align: right;
  font-weight: bold;
  color: #555;
  padding-right: 15px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 20px;
}
.satirci-right {
  float: left;
  width: 78%;
  text-align: left;
  padding-left: 15px;
  border-left: 1px solid #f0f0f0;
  box-sizing: border-box;
  position: relative;
}
.tr-subtype-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: italic;
  color: var(--gray-400);
  font-weight: normal;
  letter-spacing: .05em;
}
.tr-line-num {
  position: absolute;
  right: 10px;
  color: #aaa;
  font-size: 0.75em;
  font-family: Arial;
}
.tr-empty {
  text-align: center;
  padding: 60px 0;
  color: #999;
  font-style: italic;
}

/* Pagination */
.tr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-200);
}
.tr-page-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  padding: 10px 20px;
  border-radius: 2px;
  transition: all .15s;
}
.tr-page-btn:hover    { background: var(--purple-600); border-color: var(--purple-600); color: var(--white); }
.tr-page-btn.disabled { opacity: .3; pointer-events: none; }
.tr-page-info {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gray-400);
}

@media (max-width: 900px) {
  .tr-layout        { grid-template-columns: 1fr; gap: 0; }
  .tr-sidenav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 24px;
  }
  .tr-sidenav-label { width: 100%; padding-left: 0; }
  .tr-side-btn {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 6px 10px;
    background: var(--gray-100);
    border-radius: 2px;
  }
  .tr-side-btn.active {
    background: rgba(127,119,221,.1);
    border-bottom-color: var(--purple-400);
  }
}
@media (max-width: 768px) {
  .tr-body         { padding: 32px 20px 80px; }
  .tr-workbar      { padding: 0 16px; }
  .tr-work-author  { display: none; }
  .satirci-left    { width: 100%; text-align: left; padding-right: 0; }
  .satirci-right   { width: 100%; padding-left: 0; border-left: none; }
  .tr-line-num     { position: relative; display: inline-block; float: right; right: 0; }
}




/* ============================================
   OIKOS
   ============================================ */

.ok-body {
    background: var(--white);
    min-height: 60vh;
    padding: 60px 0 100px;
}

.ok-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

.ok-welcome {
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e8e8e6;
}

.ok-welcome-name {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.4rem;
    color: var(--black);
    margin: 0 0 6px;
}

.ok-welcome-email {
    font-family: 'DM Mono', monospace;
    font-size: .8rem;
    color: #999;
    margin: 0;
}

.ok-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.ok-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px;
    border: 1px solid #e0e0dd;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s;
}

.ok-summary-card:hover {
    border-color: var(--purple-600);
    transform: translateY(-2px);
}

.ok-summary-num {
    font-family: 'Unbounded', sans-serif;
    font-size: 2rem;
    color: var(--purple-600);
    line-height: 1;
    margin-bottom: 8px;
}

.ok-summary-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #666;
}

.ok-section {
    margin-bottom: 48px;
}

.ok-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e6;
}

.ok-section-title {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--black);
}

.ok-section-btn {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--purple-600);
    text-decoration: none;
}

.ok-section-btn:hover {
    text-decoration: underline;
}

.ok-prosopa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0ee;
}

.ok-prosopa-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ok-prosopa-name {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    color: var(--black);
}

.ok-prosopa-slug {
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    color: #aaa;
}

.ok-prosopa-badge {
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    color: var(--purple-600);
    border: 1px solid var(--purple-600);
    padding: 2px 8px;
    border-radius: 4px;
}

.ok-empty {
    padding: 40px 0;
    text-align: center;
}

.ok-empty p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: #aaa;
    margin-bottom: 16px;
}

.ok-empty-btn {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--purple-600);
    text-decoration: none;
    border: 1px solid var(--purple-600);
    padding: 8px 20px;
    border-radius: 4px;
    transition: all .2s;
}

.ok-empty-btn:hover {
    background: var(--purple-600);
    color: #fff;
}


/* ============================================
   OIKOS — FORM & ALERTS
   ============================================ */

.ok-alert {
    padding: 14px 20px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
}

.ok-alert--success {
    background: #f0faf0;
    border: 1px solid #c3e6cb;
    color: #2d6a2d;
}

.ok-alert--error {
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    color: #8b1a1a;
}

.ok-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ok-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ok-form-label {
    font-family: 'Unbounded', sans-serif;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #666;
}

.ok-form-input {
    border: 1px solid #e0e0dd;
    border-radius: 6px;
    padding: 12px 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--black);
    background: var(--white);
    outline: none;
    transition: border-color .2s;
}

.ok-form-input:focus {
    border-color: var(--purple-600);
}

.ok-form-input--disabled {
    background: #f5f5f3;
    color: #aaa;
    cursor: not-allowed;
}

.ok-form-hint {
    font-family: 'Cormorant Garamond', serif;
    font-size: .9rem;
    color: #aaa;
}

.ok-form-actions {
    padding-top: 8px;
}

.ok-btn-primary {
    background: var(--black);
    color: var(--white);
    border: none;
    padding: 12px 32px;
    font-family: 'Unbounded', sans-serif;
    font-size: .75rem;
    letter-spacing: .08em;
    cursor: pointer;
    border-radius: 4px;
    transition: background .2s;
}

.ok-btn-primary:hover {
    background: var(--purple-600);
}

/* ============================================
   OIKOS — MOBİL
   ============================================ */

@media (max-width: 768px) {
    .ok-wrap {
        padding: 0 16px;
    }

    .ok-body {
        padding: 40px 0 80px;
    }

    .ok-welcome-name {
        font-size: 1.1rem;
    }

    .ok-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ok-summary-num {
        font-size: 1.6rem;
    }

    .ok-prosopa-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .ok-summary-grid {
        grid-template-columns: 1fr;
    }

    .ok-btn-primary {
        width: 100%;
        text-align: center;
    }
}


/* ============================================
   OIKOS — KİMLİK LİSTESİ
   ============================================ */

.ok-prosopa-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0ee;
}

.ok-prosopa-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0ede8;
    flex-shrink: 0;
}

.ok-prosopa-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ok-prosopa-agora-name {
    font-family: 'Unbounded', sans-serif;
    font-size: .85rem;
    color: var(--black);
}

.ok-prosopa-agora-slug {
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    color: #aaa;
}

.ok-prosopa-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.ok-prosopa-tag {
    font-family: 'DM Mono', monospace;
    font-size: .65rem;
    color: #666;
    border: 1px solid #ddd;
    padding: 2px 8px;
    border-radius: 4px;
}

.ok-prosopa-tag--primary {
    color: var(--purple-600);
    border-color: var(--purple-600);
}

.ok-prosopa-tag--animal {
    color: #888;
    border-color: #ccc;
}

@media (max-width: 480px) {
    .ok-prosopa-card {
        gap: 14px;
    }

    .ok-prosopa-avatar {
        width: 44px;
        height: 44px;
    }
}


/* ============================================
   OIKOS — KİMLİK OLUŞTURMA
   ============================================ */

.ok-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
}

.ok-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    color: #aaa;
    flex-shrink: 0;
}

.ok-step--active {
    border-color: var(--purple-600);
    color: var(--purple-600);
    font-weight: 700;
}

.ok-step--done {
    background: var(--purple-600);
    border-color: var(--purple-600);
    color: #fff;
}

.ok-step-line {
    flex: 1;
    height: 2px;
    background: #ddd;
}

.ok-step-line--done {
    background: var(--purple-600);
}

.ok-step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 32px;
}

/* Bölge seçimi */
.ok-region-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ok-region-card {
    padding: 28px 20px;
    border: 1px solid #e0e0dd;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s;
}

.ok-region-card:hover {
    border-color: var(--purple-600);
    transform: translateY(-2px);
}

.ok-region-name {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    color: var(--black);
}

/* Harf filtresi */
.ok-littera-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 32px;
}

.ok-littera-btn {
    padding: 6px 12px;
    border: 1px solid #e0e0dd;
    border-radius: 4px;
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    color: #666;
    text-decoration: none;
    transition: all .15s;
}

.ok-littera-btn:hover,
.ok-littera-btn.active {
    background: var(--purple-600);
    border-color: var(--purple-600);
    color: #fff;
}

/* İsim grid */
.ok-name-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.ok-name-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    border: 1px solid #e0e0dd;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}

.ok-name-card:hover {
    border-color: var(--purple-600);
}

.ok-name-latin {
    font-family: 'Unbounded', sans-serif;
    font-size: .7rem;
    color: var(--black);
}

.ok-name-greek {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    color: #888;
}

@media (max-width: 768px) {
    .ok-region-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ok-name-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .ok-region-grid {
        grid-template-columns: 1fr;
    }

    .ok-name-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ok-steps {
        margin-bottom: 24px;
    }
    
}




/* ============================================
   OIKOS — DEMOS SEÇİMİ
   ============================================ */

.ok-wrap--wide {
    max-width: 900px;
}

.ok-demos-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ok-demos-filter-btn {
    padding: 8px 20px;
    border: 1px solid #e0e0dd;
    border-radius: 4px;
    background: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #666;
    cursor: pointer;
    transition: all .15s;
}

.ok-demos-filter-btn:hover,
.ok-demos-filter-btn.active {
    background: var(--purple-600);
    border-color: var(--purple-600);
    color: #fff;
}

.ok-phyle-block {
    margin-bottom: 32px;
}

.ok-phyle-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 2px solid var(--black);
    margin-bottom: 8px;
}

.ok-phyle-name {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    color: var(--black);
}

.ok-phyle-greek {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #888;
}

.ok-demos-list {
    display: flex;
    flex-direction: column;
}

.ok-demos-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0ee;
    transition: background .15s;
}

.ok-demos-row:hover {
    background: #f9f9f7;
}

.ok-demos-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ok-demos-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--black);
}

.ok-demos-region {
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    color: #aaa;
    background: #f5f5f3;
    padding: 2px 8px;
    border-radius: 4px;
}

.ok-demos-select {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--purple-600);
    text-decoration: none;
    white-space: nowrap;
}

.ok-demos-select:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .ok-demos-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}


/* ============================================
   OIKOS — TANRI SEÇİMİ
   ============================================ */

.ok-god-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0ee;
    transition: background .15s;
    gap: 20px;
}

.ok-god-row:hover {
    background: #f9f9f7;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0 -8px;
}

.ok-god-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ok-god-name {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    color: var(--black);
}

.ok-god-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #888;
    font-style: italic;
}

/* ============================================
   OIKOS — FORMAT & ONAY
   ============================================ */

.ok-format-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ok-format-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0ee;
    gap: 20px;
    transition: background .15s;
}

.ok-format-row:hover {
    background: #f9f9f7;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0 -8px;
}

.ok-format-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ok-format-slug {
    font-family: 'DM Mono', monospace;
    font-size: .9rem;
    color: var(--black);
}

.ok-format-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    color: #aaa;
    font-style: italic;
}

/* Onay kartı */
.ok-confirm-card {
    border: 1px solid #e0e0dd;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

.ok-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0ee;
}

.ok-confirm-row:last-child {
    border-bottom: none;
}

.ok-confirm-row--highlight {
    background: var(--black);
}

.ok-confirm-row--highlight .ok-confirm-label {
    color: #aaa;
}

.ok-confirm-row--highlight .ok-confirm-value {
    color: var(--white);
}

.ok-confirm-label {
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    color: #999;
    min-width: 140px;
    padding-top: 3px;
}

.ok-confirm-value {
    font-family: 'Unbounded', sans-serif;
    font-size: .8rem;
    color: var(--black);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ok-confirm-value--big {
    font-size: 1rem;
    color: var(--white);
}

.ok-confirm-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    color: #888;
    font-weight: 400;
}

.ok-confirm-form {
    margin-top: 8px;
}

@media (max-width: 480px) {
    .ok-confirm-row {
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px;
    }

    .ok-confirm-label {
        min-width: unset;
    }
}



/* ── 15. KHAIRE ─────────────────────────────────────────────── */

/* Header */
.kh-header-block {
  background: var(--black);
}
.kh-header {
  background: var(--black);
  padding: 110px 40px 56px;
  position: relative;
  overflow: hidden;
}
.kh-header::before {
  content: 'ΧΑΙΡΕ';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 200;
  color: rgba(250,250,248,.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .1em;
}
.kh-header-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.kh-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--white);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeup .8s .3s forwards;
}
.kh-subnav {
  border-top: 1px solid rgba(250,250,248,.06);
  position: relative;
  left: calc((100% - 1100px) / 2);
  max-width: 1100px;
}
.kh-subnav-inner {
  float: left;
  display: flex;
  align-items: center;
  min-height: 48px;
  gap: 0;
}
.kh-subnav-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(250,250,248,.35);
  padding: 16px;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.kh-subnav-link:hover { color: rgba(250,250,248,.7); }
.kh-subnav-link.active {
  color: var(--purple-200);
  border-bottom-color: var(--purple-400);
}

/* Body */
.kh-body {
  background: var(--white);
  padding: 48px 40px 100px;
  min-height: 60vh;
}

.kh-read-more {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--purple-400);
  cursor: pointer;
  transition: color .15s;
}
.kh-read-more:hover { color: var(--purple-600); }


.kh-layout {
  max-width: 640px;
  margin: 0 auto;
}

/* Compose kutusu */
.kh-compose {
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 32px;
  background: var(--white);
}
.kh-compose-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.kh-compose-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--purple-600);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kh-compose-input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--black);
  line-height: 1.6;
  min-height: 48px;
  padding: 6px 0;
  background: transparent;
}
.kh-compose-input::placeholder {
  color: var(--gray-200);
}

/* Görsel önizleme */
.kh-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-left: 52px;
}
.kh-preview-thumb {
  position: relative;
  width: 80px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}
.kh-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kh-preview-remove {
  position: absolute;
  top: 2px; right: 4px;
  background: rgba(17,17,16,.6);
  border: none;
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 2px;
}

/* Link önizleme */
.kh-link-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gray-100);
  border-radius: 4px;
  margin-bottom: 12px;
  margin-left: 52px;
}
.kh-link-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.kh-link-preview span:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gray-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.kh-link-remove {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color .15s;
}
.kh-link-remove:hover { color: var(--black); }

/* Toolbar */
.kh-compose-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  margin-left: 52px;
}
.kh-compose-actions {
  display: flex;
  gap: 4px;
}
.kh-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--purple-400);
  padding: 6px 8px;
  border-radius: 4px;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
}
.kh-action-btn:hover {
  background: rgba(127,119,221,.08);
  color: var(--purple-600);
}
.kh-submit-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--purple-600);
  color: var(--white);
  border: none;
  padding: 8px 20px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s;
}
.kh-submit-btn:hover { background: var(--purple-400); }

/* Feed */
.kh-feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.kh-post {
  background: var(--white);
  padding: 24px 28px;
  transition: background .15s;
}
.kh-post:hover { background: #fafaf9; }

/* Post header */
.kh-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
}
.kh-post-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kh-post-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.kh-post-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--black);
}
.kh-post-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--gray-400);
}
.kh-delete-form { margin-left: auto; }
.kh-delete-btn {
  background: none;
  border: none;
  color: var(--gray-200);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color .15s;
}
.kh-delete-btn:hover { color: #b43c3c; }

/* Post body */
.kh-post-body {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--black);
  line-height: 1.7;
  margin-bottom: 16px;
  white-space: pre-wrap;
}

/* Görseller — tek */
.kh-post-images { margin-bottom: 4px; }
.kh-single-image {
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-100);
}
.kh-single-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Carousel */
.kh-carousel {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-100);
  aspect-ratio: 4 / 3;
}
.kh-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .3s ease;
}
.kh-carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}
.kh-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kh-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(17,17,16,.45);
  border: none;
  color: var(--white);
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  line-height: 1;
}
.kh-carousel-btn:hover { background: rgba(17,17,16,.75); }
.kh-carousel-btn.prev { left: 10px; }
.kh-carousel-btn.next { right: 10px; }
.kh-carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.kh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250,250,248,.4);
  cursor: pointer;
  transition: background .2s;
}
.kh-dot.active { background: var(--white); }

/* Link kartı */
.kh-link-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s;
  margin-bottom: 4px;
}
.kh-link-card:hover { border-color: var(--purple-400); }
.kh-link-card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.kh-link-card-body {
  padding: 14px 16px;
  background: var(--gray-100);
}
.kh-link-card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--black);
  line-height: 1.35;
  margin-bottom: 6px;
}
.kh-link-card-url {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--gray-400);
}

/* Share kartı */
.kh-share-card {
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
  background: var(--gray-100);
}
.kh-share-card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.kh-share-card-body { padding: 14px 16px; }
.kh-share-card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--black);
  line-height: 1.35;
  margin-bottom: 8px;
}
.kh-share-card-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple-600);
  text-decoration: none;
  transition: color .15s;
}
.kh-share-card-link:hover { color: var(--purple-400); }

/* Empty + Pagination */
.kh-empty {
  background: var(--white);
  padding: 60px;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--gray-400);
}
.kh-pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* Flash mesajları */
.kh-flash {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 12px 16px;
  border-radius: 2px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.kh-flash.success {
  background: rgba(127,119,221,.08);
  border: 1px solid rgba(127,119,221,.2);
  color: var(--purple-600);
}
.kh-flash.error {
  background: rgba(180,60,60,.06);
  border: 1px solid rgba(180,60,60,.2);
  color: #b43c3c;
}

/* Responsive */
@media (max-width: 768px) {
  .kh-header        { padding: 90px 20px 40px; }
  .kh-subnav        { padding: 0 16px; overflow-x: auto; left: 0; max-width: 100%; }
  .kh-subnav-inner  { min-height: 44px; }
  .kh-subnav-link   { padding: 12px 10px; font-size: 9px; }
  .kh-body          { padding: 32px 20px 80px; }
  .kh-compose       { padding: 16px 18px; }
  .kh-post          { padding: 18px 20px; }
  .kh-layout        { max-width: 100%; }
}









/* ── 16. DOCS — İçerik stilleri ────────────────────────────── */

/* Kod bloğu */
.doc-code {
  background: #f5f5f3;
  border: 1px solid #e0e0dd;
  border-left: 3px solid var(--purple-400);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: .85rem;
  color: #333;
  line-height: 1.7;
  overflow-x: auto;
  margin: 20px 0;
  white-space: pre;
}

/* Bilgi kutusu */
.doc-note {
  background: rgba(127,119,221,.06);
  border: 1px solid rgba(127,119,221,.2);
  border-left: 3px solid var(--purple-400);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
  margin: 20px 0;
}

/* Uyarı kutusu */
.doc-warning {
  background: rgba(196,122,58,.06);
  border: 1px solid rgba(196,122,58,.25);
  border-left: 3px solid #c47a3a;
  border-radius: 0 4px 4px 0;
  padding: 16px 20px;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
  margin: 20px 0;
}

/* Alıntı / önemli metin */
.doc-quote {
  border-left: 3px solid var(--gray-200);
  padding: 12px 20px;
  margin: 20px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: #666;
  line-height: 1.7;
}

/* Etiket / badge */
.doc-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin: 0 2px;
}
.doc-badge--purple {
  background: rgba(127,119,221,.12);
  color: var(--purple-600);
  border: 1px solid rgba(127,119,221,.25);
}
.doc-badge--dark {
  background: var(--black);
  color: var(--white);
}
.doc-badge--gray {
  background: #f0f0ee;
  color: #666;
  border: 1px solid #e0e0dd;
}

/* Ayırıcı */
.doc-divider {
  border: none;
  border-top: 1px solid #e8e8e6;
  margin: 32px 0;
}

/* Satır içi vurgu */
.doc-inline {
  font-family: var(--font-mono);
  font-size: .85em;
  background: #f0f0ee;
  border: 1px solid #e0e0dd;
  border-radius: 3px;
  padding: 1px 6px;
  color: #444;
}




/* ── 17. DOCS ───────────────────────────────────────────────── */

/* Header */
.dc-header-block { background: var(--black); }
.dc-header {
  background: var(--black);
  padding: 110px 40px 56px;
  position: relative;
  overflow: hidden;
}
.dc-header::before {
  content: 'DOCS';
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 200;
  color: rgba(250,250,248,.03);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .1em;
}
.dc-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.dc-breadcrumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(250,250,248,.3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dc-breadcrumb a {
  color: rgba(250,250,248,.3);
  text-decoration: none;
  transition: color .2s;
}
.dc-breadcrumb a:hover { color: var(--purple-200); }
.dc-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  color: var(--white);
  line-height: 1;
  margin-bottom: 0;
  opacity: 0;
  animation: fadeup .8s .3s forwards;
}

/* Body */
.dc-body {
  background: var(--white);
  padding: 56px 40px 100px;
  min-height: 60vh;
}
.dc-body-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

/* Sidebar */
.dc-sidebar {
  position: sticky;
  top: 80px;
}
.dc-sidebar-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin-bottom: 16px;
  padding-left: 12px;
}
.dc-nav-parent {
  margin-bottom: 8px;
}
.dc-nav-parent-link {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray-400);
  padding: 8px 12px;
  border-left: 2px solid #e5e5e5;
  transition: all .15s;
}
.dc-nav-parent-link:hover { color: var(--black); }
.dc-nav-parent-link.active {
  color: var(--purple-600);
  border-left-color: var(--purple-400);
  background: rgba(127,119,221,.05);
}
.dc-nav-children {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}
.dc-nav-child-link {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  text-decoration: none;
  color: var(--gray-400);
  padding: 6px 12px;
  border-left: 1px solid var(--gray-200);
  transition: all .15s;
}
.dc-nav-child-link:hover { color: var(--black); border-left-color: var(--gray-400); }
.dc-nav-child-link.active {
  color: var(--purple-600);
  border-left-color: var(--purple-400);
}

/* Index kartları */
.dc-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.dc-index-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s;
}
.dc-index-card:hover {
  border-color: var(--purple-400);
  transform: translateY(-2px);
}
.dc-index-card-title {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black);
}
.dc-index-card-desc {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
}
.dc-index-card-count {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--purple-400);
  letter-spacing: .08em;
  margin-top: auto;
}

/* İçerik alanı */
.dc-content h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-200);
}
.dc-content h2 {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple-400);
  margin: 40px 0 16px;
}
.dc-content h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--black);
  margin: 28px 0 12px;
}
.dc-content p {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 16px;
}
.dc-content ul,
.dc-content ol {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 16px;
  padding-left: 24px;
}
.dc-content li { margin-bottom: 6px; }
.dc-content a {
  color: var(--purple-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(127,119,221,.3);
  transition: border-color .15s;
}
.dc-content a:hover { border-bottom-color: var(--purple-600); }

/* Alt sayfa listesi (ana başlık içinde) */
.dc-children-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  margin-top: 40px;
}
.dc-child-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  padding: 18px 24px;
  text-decoration: none;
  transition: background .15s;
}
.dc-child-row:hover { background: var(--gray-100); }
.dc-child-row:hover .dc-child-arrow { color: var(--purple-400); transform: translateX(3px); }
.dc-child-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--black);
}
.dc-child-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gray-200);
  transition: color .15s, transform .15s;
}

/* Responsive */
@media (max-width: 900px) {
  .dc-body-inner { grid-template-columns: 1fr; gap: 32px; }
  .dc-sidebar    { position: static; }
}
@media (max-width: 768px) {
  .dc-header { padding: 90px 20px 40px; }
  .dc-body   { padding: 32px 20px 80px; }
}




/* ARKHON */

.ok-arkhon-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

	.sero-container{
		display: flex; gap:30px; text-align: right; border-bottom:1px solid #e5e5e5; margin-bottom:10px; padding:30px 0px
	}

	.sero-left{
		width:calc(29% - 0px); font-family:Sarabun; font-size:14px; font-weight:500;position: relative; /* Bu da gerekebilir, içerik için */
  z-index: 1;
	}

	.sero-right{
		width:calc(69% - 0px); text-align: left; font-family:Sarabun; font-size:14px; font-weight:300
	}

	.sero-center-left{
		width:calc(1% - 0px); border-right:1px dashed #ccc;
	}

	.sero-center-right{
		width:calc(1% - 0px); border-right:1px dashed #ccc;
	}


	 .home-list-group{
		 display: flex; justify-content: space-between; border-bottom:1px dashed #ccc; padding: 10px;
	 } 
	 
	 .home-list-group-left{
		 width:40%; text-align: left; font-variant:small-caps
	 }
	 
	 .home-list-group-center{
		 width:5%; text-align: center;
	 }
	 
	 .home-list-group-right{
		 width:55%; text-align: left;
	 }

	.left-act-btn{
		margin:2px 0px; border-bottom:1px dashed #000; background-color:black; padding:10px 25px; display: inline-block; text-decoration:none; cursor:pointer; width: auto;
		align-self: end; color:white; border-bottom-left-radius:25px; border-top-left-radius:25px;
	}

	.left-act-btn:hover{
		text-decoration:none;
		background-color:#444;
		color:white;
		border-bottom:1px dashed #444;
	}

	.polites-left-btn{
		margin:2px 0px; border-bottom:1px dashed #ccc; padding:10px 25px; display: inline-block; text-decoration:none; cursor:pointer; width: auto;
		align-self: end; color:black; border-bottom-left-radius:25px; border-top-left-radius:25px;
	}

	.polites-left-btn:hover{
		text-decoration:none;
		background-color:#444;
		color:white;
		border-bottom:1px dashed #444;
	}
	  
	  
	.polites-left-act-btn{
		margin:2px 0px; border-bottom:1px dashed #000; background-color:black; padding:10px 25px; display: inline-block; text-decoration:none; cursor:pointer; width: auto;
		align-self: end; color:white; border-bottom-left-radius:25px; border-top-left-radius:25px;
	}

	.polites-left-act-btn:hover{
		text-decoration:none;
		background-color:#444;
		color:white;
		border-bottom:1px dashed #444;
	}

.polites-content-title{
	font-weight:800; font-size:18px;  padding:0px 0px 14px 0px
}



/* SVG ICONS */

.icon-mask-left svg {
  width: 80px;
  height: 80px;
	color: #000;
	vertical-align: middle;
	display: inline-flex;
  align-items: center;
  gap: 20px;
	margin-left:20px;
	
}

.icon-mask-title svg {
  width: 30px;
  height: 30px;
	color: #000;
	vertical-align: middle;
	display: inline-flex;
  align-items: center;
  gap: 20px;
	margin-left:20px;
	
}


.icon-gift-green svg {
  width: 30px;
  height: 30px;
	color: #000;
	vertical-align: middle;
	display: inline-flex;
  align-items: center;
  gap: 20px;
	margin-left:20px;
	
}