/* ==========================================================
   style.css — Doç. Dr. Mehmet Ali YILDIRIM Akademik Web Sitesi
   TASARIM: Neomorfizm (Yumuşak Kabartma) + Tarihçi kimliği (lacivert/altın)
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ===================== TOKENS ===================== */
:root {
  /* Neomorfik açık tema */
  --bg:           #e0e5ec;
  --bg-card:      #e0e5ec;
  --bg-nav:       rgba(224,229,236,0.85);
  --bg-hero:      #e0e5ec;
  --sh-dark:      #b8bec7;
  --sh-light:     #ffffff;

  /* Tarihçi kimlik renkleri */
  --primary:      #23405c;   /* lacivert/çini */
  --primary-mid:  #35597a;
  /* Vurgu rengi: logodaki mavi. Logo ölçüldüğünde baskın ton 217° kraliyet
     mavisi çıktı (#002868 ve komşuları). Vurgu, --primary'den ayrışsın diye
     aynı tonun daha canlı/açık hâli seçildi. Değişken adı geçmişten kalma
     "gold"; sitenin 44 yerinde kullanıldığı için yeniden adlandırılmadı. */
  --gold:         #1552a8;
  --gold-soft:    #2f74cd;
  --bordeaux:     #6E1F2A;

  --text:         #2d3b4a;
  --text-mid:     #4c5b6b;
  --text-muted:   #7a8899;
  --border-light: rgba(122,136,153,0.14);

  /* Neomorfik gölge setleri */
  --nm-out:       9px 9px 18px var(--sh-dark), -9px -9px 18px var(--sh-light);
  --nm-out-sm:    5px 5px 10px var(--sh-dark), -5px -5px 10px var(--sh-light);
  --nm-out-lg:    14px 14px 28px var(--sh-dark), -14px -14px 28px var(--sh-light);
  --nm-in:        inset 6px 6px 12px var(--sh-dark), inset -6px -6px 12px var(--sh-light);
  --nm-in-sm:     inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);

  --radius:       22px;
  --radius-sm:    14px;
  --nav-h:        88px;   /* logo büyütüldüğü için yükseltildi (eski: 72px) */
  --trans:        0.3s ease;
}

[data-theme="dark"] {
  --bg:           #2a2f38;
  --bg-card:      #2a2f38;
  --bg-nav:       rgba(42,47,56,0.88);
  --bg-hero:      #2a2f38;
  --sh-dark:      #1e2229;
  --sh-light:     #363d48;

  --primary:      #7fb0d8;
  --primary-mid:  #9cc4e6;
  /* Karanlık temada vurgu, --primary'den (#7fb0d8) belirgin şekilde DAHA
     PARLAK seçildi; yakın tutulsaydı ikisi birbirine karışırdı. */
  --gold:         #8ec2ff;
  --gold-soft:    #aed4ff;
  --bordeaux:     #c66574;

  --text:         #dbe2ea;
  --text-mid:     #aeb9c6;
  --text-muted:   #7f8b99;
  --border-light: rgba(255,255,255,0.05);
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.72;
  transition: background var(--trans), color var(--trans);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Çok hafif Selçuklu yıldız deseni (neomorfik zeminde neredeyse görünmez) */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%2323405c' fill-opacity='0.014'%3E%3Cpolygon points='60,10 68,32 92,32 72,46 80,70 60,56 40,70 48,46 28,32 52,32'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ===================== LAYOUT ===================== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ===================== NAVBAR ===================== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: var(--bg-nav);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  z-index: 1000; transition: box-shadow var(--trans), background var(--trans);
}
.navbar.scrolled { box-shadow: 0 6px 20px rgba(122,136,153,0.25); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 20px; }

.nav-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem; font-weight: 700; color: var(--primary);
  text-decoration: none; white-space: nowrap; letter-spacing: 0.01em;
}
.nav-brand span.gold { color: var(--gold); }

/* Menü: gruplu açılır menü (Yayınlar ▾ / Akademik ▾) */
.nav-links { display: flex; list-style: none; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a, .nav-sub-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 15px; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mid);
  text-decoration: none; border: none; background: transparent; cursor: pointer;
  border-radius: 10px; font-family: inherit; transition: all var(--trans);
}
.nav-links a:hover, .nav-sub-btn:hover { color: var(--primary); background: rgba(122,136,153,0.1); }
.nav-links > li > a.active { color: var(--gold); }
.nav-sub-btn .caret { font-size: 0.7rem; transition: transform var(--trans); }
.has-sub { position: relative; }
.has-sub.open .caret { transform: rotate(180deg); }

.nav-sub {
  display: none; position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 230px; list-style: none; padding: 8px;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: 0 16px 34px rgba(30,40,52,0.18); z-index: 1100;
}
.has-sub:hover .nav-sub, .has-sub.open .nav-sub { display: block; }
.nav-sub a { padding: 10px 14px; border-radius: 10px; font-size: 0.78rem; width: 100%; }
.nav-sub a.active { color: var(--gold); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--bg); box-shadow: none;
  cursor: pointer; color: var(--text-mid); transition: all var(--trans); font-size: 1rem;
}
.btn-icon:hover { color: var(--gold); border-color: var(--gold-soft); }
.nav-menu-btn { display: none; }

/* ===================== SVG İKONLAR (tek renk) ===================== */
.ic {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
  vertical-align: -0.16em; stroke-width: 1.7;
}
/* meta satırlarındaki ikonlar biraz soluk, hizalı */
.sc-meta .ic, .card-meta .ic { width: 15px; height: 15px; vertical-align: -0.22em; opacity: 0.85; }
.sc-item-title .ic { display: none; }
/* sekme butonlarındaki ikon */
.tab-btn .ic { width: 17px; height: 17px; vertical-align: -0.24em; margin-right: 3px; }
/* iletişim ikon kutusu */
.contact-icon .ic { width: 22px; height: 22px; }
/* zaman çizelgesi düğümü */
.tl-dot .ic { width: 24px; height: 24px; }
/* idari liste ikonları */
.admin-role .ic { width: 16px; height: 16px; vertical-align: -0.2em; margin-right: 4px; color: var(--gold-soft); }
.admin-years .ic { width: 13px; height: 13px; vertical-align: -0.18em; margin-right: 2px; opacity: 0.7; }
/* hero buton ikonu */
.hero-actions .ic { width: 18px; height: 18px; vertical-align: -0.2em; margin-right: 6px; }

@media (max-width: 960px) {
  .nav-menu-btn { display: flex; }
  /* Zemin OPAK: yarı saydam + bulanıklık, arkadaki yazı ve görsellerle
     karışıp menüyü okunmaz hâle getiriyordu. Ayrıca alta gölge eklendi ki
     menü sayfadan ayrıştığı belli olsun. */
  .nav-links {
    display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px 24px 24px; border-bottom: 1px solid var(--border-light);
    box-shadow: 0 14px 28px rgba(30, 40, 52, 0.18);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-sub-btn { width: 100%; padding: 11px 14px; font-size: 0.88rem; }
  .nav-sub-btn { pointer-events: none; color: var(--text-muted); font-size: 0.72rem; }
  .nav-sub-btn .caret { display: none; }
  .nav-sub {
    display: block; position: static; min-width: 0; padding: 0 0 6px 14px;
    background: transparent; border: none; box-shadow: none;
  }
  .nav-brand { font-size: 1.05rem; }
  /* Menü açıkken üst çubuk da opak (bkz. main.js → menuDurumu) */
  .navbar.menu-acik {
    background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* ===================== SECTION ===================== */
.section { padding: 84px 0; }


.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Sağdan sırayla giriş (hero istatistik kartları) */
.reveal-right { transform: translateX(60px); }
.reveal-right.visible { transform: translateX(0); }

/* ===================== SECTION TITLE ===================== */
.section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800; color: var(--primary);
  margin-bottom: 14px; display: flex; align-items: center; gap: 16px;
  letter-spacing: -0.01em;
}
.section-title .s-icon {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 16px; box-shadow: var(--nm-out-sm);
  font-size: 1.3rem; flex-shrink: 0;
}
.section-divider {
  width: 64px; height: 5px; border-radius: 100px; background: var(--bg);
  box-shadow: var(--nm-in-sm); margin-bottom: 44px; position: relative;
}
.section-divider::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 100px; background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  box-shadow: 0 0 12px 1px rgba(183,138,52,0.5);
}

/* ===================== HERO ===================== */
#hero {
  min-height: 100vh; display: flex; align-items: center;
  background: #ffffff; padding-top: var(--nav-h); position: relative; overflow: hidden;
}
.hero-ornament { display: none; }

.hero-inner { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: center; }

.hero-inner-centered { display: flex; justify-content: center; }
.hero-inner-centered .hero-content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 760px;
}

/* Hero: solda bilgiler, sağda video + bio */
.hero-inner-split { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: 36px; align-items: start; }
.hero-video-col { display: flex; flex-direction: column; }

/* Hero videosu — kart/çerçeve olmadan, sayfayla bütünleşik */
.hero-video { width: 100%; max-width: none; }
.hero-video video {
  display: block; width: 100%; height: auto;
  background: transparent; mix-blend-mode: multiply;
}
.hero-video-col .hero-bio { max-width: none; margin-top: 20px; margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .hero-video video { mix-blend-mode: normal; }
}
:root[data-theme="dark"] .hero-video video { mix-blend-mode: normal; }

@media (max-width: 960px) {
  .hero-inner-split { grid-template-columns: 1fr; gap: 30px; }
  .hero-inner-split .hero-content { padding-top: 0; }
}

.hero-photo-wrap { width: 190px; height: 190px; margin-bottom: 30px; }
.hero-photo, .hero-photo-placeholder {
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--bg); box-shadow: var(--nm-out-lg);
  display: flex; align-items: center; justify-content: center;
}
.hero-inner-split .hero-photo-wrap {
  width: min(100%, 340px); height: min(100%, 340px);
  aspect-ratio: 1 / 1; margin-bottom: 34px;
}
.hero-inner-split .hero-photo,
.hero-inner-split .hero-photo-placeholder { width: 100%; height: 100%; }
.hero-photo { object-fit: cover; }
.hero-photo-placeholder {
  font-family: 'Cormorant Garamond', serif; font-size: 3.4rem; font-weight: 700;
  color: var(--primary); letter-spacing: 0.02em;
}

.hero-eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 100px; background: var(--bg); box-shadow: var(--nm-in-sm);
}

.hero-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.3rem, 5.2vw, 3.7rem); font-weight: 700; color: var(--primary);
  line-height: 1.12; margin-bottom: 10px;
}
.hero-name em { font-style: italic; color: var(--gold); }
.hero-subtitle { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-style: italic; color: var(--text-mid); margin-bottom: 4px; }
.hero-uni { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 26px; }
.hero-bio { font-size: 1rem; color: var(--text-mid); line-height: 1.85; max-width: 600px; margin-bottom: 30px; }

.tags-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  font-size: 0.76rem; font-weight: 600; border-radius: 100px;
  background: var(--bg); box-shadow: var(--nm-out-sm); color: var(--primary);
  transition: all var(--trans);
}
.tag:hover { box-shadow: var(--nm-in-sm); color: var(--gold); }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--primary); background: var(--bg); box-shadow: var(--nm-out);
  border-radius: 14px; text-decoration: none; border: none; cursor: pointer; transition: all var(--trans);
}
.btn-primary:hover { color: var(--gold); }
.btn-primary:active { box-shadow: var(--nm-in); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-mid);
  background: var(--bg); box-shadow: var(--nm-out-sm); border: none;
  border-radius: 14px; text-decoration: none; cursor: pointer; transition: all var(--trans);
}
.btn-outline:hover { color: var(--primary); }
.btn-outline:active { box-shadow: var(--nm-in-sm); }

/* Hero aside — stats */
.hero-aside { display: flex; flex-direction: column; gap: 20px; }
.stat-card {
  background: var(--bg); border-radius: var(--radius); padding: 24px 22px;
  text-align: center; box-shadow: var(--nm-out); transition: all var(--trans);
  border: none; cursor: pointer; color: inherit; font-family: inherit;
}
.stat-card:hover { box-shadow: var(--nm-in); transform: translateY(-2px); }
.stat-number { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.stat-icon { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--gold); }
.stat-icon .ic { width: 30px; height: 30px; stroke-width: 1.5; }
.stat-label { font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-aside { flex-direction: row; flex-wrap: wrap; }
  .stat-card { flex: 1; min-width: 130px; }
}

/* ===================== CARDS GRID ===================== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.cards-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }

/* Base neomorphic card — yatay layout, büyük sağ görsel */
.card {
  background: var(--bg); border-radius: var(--radius); padding: 32px;
  box-shadow: var(--nm-out); position: relative; transition: all var(--trans); outline: none;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 36px;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--nm-out-lg); }
.card:focus-visible { box-shadow: var(--nm-in); }

.card-left { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.card-right { flex-shrink: 0; text-align: center; min-width: 160px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 20px; background: rgba(0,0,0,0.05); }
.card-stat-number { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-weight: 700; color: rgba(0,0,0,0.8); line-height: 1; }
.card-stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0,0,0,0.5); }

.card-accent-bar { display: none; }

.card-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 100px; margin-bottom: 14px;
  background: var(--bg); box-shadow: var(--nm-in-sm);
}
.badge-primary   { color: var(--primary); }
.badge-gold      { color: var(--gold); }
.badge-bordeaux  { color: var(--bordeaux); }
.badge-green     { color: #2f855a; }
.badge-inter     { color: var(--primary-mid); }
.badge-national  { color: var(--bordeaux); }

.card-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.22rem; font-weight: 600;
  color: var(--primary); line-height: 1.35; margin-bottom: 9px;
}
.card-sub { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin-bottom: 6px; }
.card-meta { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-meta span { display: flex; align-items: center; gap: 4px; }
.card-meta .sep { opacity: 0.4; }
.card-body-text { font-size: 0.88rem; color: var(--text-mid); line-height: 1.7; margin-top: 14px; }

/* Expandable */
.card-expand-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold); background: var(--bg); box-shadow: var(--nm-out-sm);
  border: none; border-radius: 100px; padding: 7px 16px; cursor: pointer; transition: all var(--trans);
}
.card-expand-btn:hover { color: var(--primary); }
.card-expand-btn.open { box-shadow: var(--nm-in-sm); }
.card-expandable { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
.card-expandable.open { max-height: 300px; }
.card-expandable-inner {
  margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--bg); box-shadow: var(--nm-in-sm);
  font-size: 0.86rem; color: var(--text-mid); line-height: 1.7;
}

/* Book cover — neomorphic pressed frame */
.book-cover {
  width: 100%; height: 165px; border-radius: var(--radius-sm);
  background: var(--bg); box-shadow: var(--nm-in);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; position: relative; overflow: hidden;
}
.book-cover-spine { display: none; }
.book-cover-icon { font-size: 2.8rem; }
.book-year-badge {
  position: absolute; bottom: 12px; right: 14px;
  font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold);
}

/* ===================== ARTICLES TABS ===================== */
.tabs { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.tab-btn {
  padding: 11px 24px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border: none; border-radius: 100px; background: var(--bg); box-shadow: var(--nm-out-sm);
  color: var(--text-muted); cursor: pointer; transition: all var(--trans);
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active { color: var(--primary); box-shadow: var(--nm-in-sm); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Article card — horizontal */
.articles-list { display: flex; flex-direction: column; gap: 18px; }
.article-card {
  display: flex; gap: 22px; align-items: flex-start;
  background: var(--bg); border-radius: var(--radius-sm); padding: 22px 26px;
  box-shadow: var(--nm-out-sm); transition: all var(--trans); position: relative;
}
.article-card:hover { transform: translateX(5px); box-shadow: var(--nm-out); }
.article-number {
  font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700;
  color: var(--gold); min-width: 42px; text-align: center; line-height: 1;
  padding-top: 4px;
}
.article-body { flex: 1; }
.article-title { font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; font-weight: 600; color: var(--primary); line-height: 1.35; margin-bottom: 7px; }
.article-journal { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.article-details { font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.article-details a { color: var(--primary); text-decoration: none; }
.article-details a:hover { color: var(--gold); }

/* ===================== TIMELINE ===================== */
.timeline { position: relative; padding: 20px 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 8px;
  border-radius: 100px; background: var(--bg); box-shadow: var(--nm-in-sm);
  transform: translateX(-50%);
}
.timeline-item { display: grid; grid-template-columns: 1fr 70px 1fr; margin-bottom: 44px; align-items: center; }
.timeline-item:nth-child(odd) .tl-card  { grid-column: 1; text-align: right; padding-right: 42px; }
.timeline-item:nth-child(odd) .tl-node  { grid-column: 2; }
.timeline-item:nth-child(odd) .tl-space { grid-column: 3; }
.timeline-item:nth-child(even) .tl-space { grid-column: 1; }
.timeline-item:nth-child(even) .tl-node  { grid-column: 2; }
.timeline-item:nth-child(even) .tl-card  { grid-column: 3; text-align: left; padding-left: 42px; }

.tl-node { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.tl-dot {
  width: 54px; height: 54px; border-radius: 50%; background: var(--bg);
  box-shadow: var(--nm-out); display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; transition: all var(--trans); color: var(--gold);
}
.tl-dot.color-primary { color: var(--primary); }
.tl-dot.color-bordeaux { color: var(--bordeaux); }
.tl-dot.color-bordeaux, .tl-dot.color-primary { box-shadow: var(--nm-out); }
.tl-year { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; color: var(--gold); white-space: nowrap; letter-spacing: 0.01em; }

/* Timeline kartlarında genel fade'i devre dışı bırak — büyük hâl net görünsün */
.timeline-item.reveal { opacity: 1; transform: none; }

.tl-card-inner {
  background: var(--bg); border-radius: var(--radius-sm); padding: 18px 22px;
  box-shadow: var(--nm-out-sm); display: inline-block; max-width: 330px;
  transform: scale(1.9); transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--trans);
}
.timeline-item.visible .tl-card-inner { transform: scale(1); }
.tl-card-inner:hover { box-shadow: var(--nm-out); transform: scale(1) translateY(-3px); }
.tl-card-inner.has-pdf { cursor: pointer; text-decoration: none; color: inherit; }
.tl-card-inner.has-pdf:hover { box-shadow: var(--nm-out); transform: scale(1) translateY(-3px); border-color: var(--gold-soft); }
.tl-title { font-family: 'Cormorant Garamond', serif; font-size: 1.08rem; font-weight: 600; color: var(--primary); margin-bottom: 5px; }
.tl-desc { font-size: 0.83rem; color: var(--text-mid); line-height: 1.65; }
.tl-pdf-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gold);
}
.tl-pdf-link .ic { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .timeline::before { left: 26px; }
  .timeline-item, .timeline-item:nth-child(even), .timeline-item:nth-child(odd) {
    display: flex; flex-direction: row; gap: 20px; align-items: flex-start; margin-bottom: 30px;
  }
  .tl-card, .timeline-item:nth-child(odd) .tl-card, .timeline-item:nth-child(even) .tl-card {
    grid-column: unset; text-align: left; padding: 0; flex: 1;
  }
  .tl-space { display: none !important; }
  .tl-node { flex-shrink: 0; }
  .tl-card-inner { max-width: 100%; display: block; }
}

/* ===================== STATUS BADGE ===================== */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg); box-shadow: var(--nm-in-sm);
}
.status-done    { color: #2f855a; }
.status-ongoing { color: var(--primary-mid); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ===================== ADMIN / COUNCILS ===================== */
.two-col-section { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 760px) { .two-col-section { grid-template-columns: 1fr; } }

.admin-list { display: flex; flex-direction: column; gap: 16px; }
.admin-item {
  background: var(--bg); border-radius: var(--radius-sm); padding: 16px 22px;
  box-shadow: var(--nm-out-sm); transition: all var(--trans);
}
.admin-item:hover { box-shadow: var(--nm-in-sm); }
.admin-role { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--primary); }
.admin-years { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

.thesis-type-ml, .thesis-type-phd { }

/* ===================== CONTACT ===================== */
#contact { background: var(--bg-hero); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; max-width: 640px; }
.contact-item {
  display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--nm-out-sm);
  transition: all var(--trans);
}
.contact-item:hover { box-shadow: var(--nm-out); }
.contact-icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--bg); box-shadow: var(--nm-in-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.contact-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.contact-value { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.contact-value a { color: var(--primary); text-decoration: none; }
.contact-value a:hover { color: var(--gold); }

/* ===================== FOOTER ===================== */
footer {
  padding: 44px 0 40px; text-align: center; font-size: 0.8rem; color: var(--text-muted);
  border-top: 1px solid var(--border-light); margin-top: 40px;
}
.footer-brand {
  display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.3rem;
  font-weight: 700; color: var(--primary); margin-bottom: 8px;
}

/* ===================== SCROLL TOP ===================== */
#scroll-top {
  position: fixed; right: 26px; bottom: 26px; width: 48px; height: 48px;
  border: 1px solid var(--border-light); border-radius: 14px; background: var(--bg); box-shadow: none;
  color: var(--gold); font-size: 1rem; cursor: pointer; z-index: 900;
  opacity: 0; pointer-events: none; transition: all var(--trans);
}
#scroll-top.visible { opacity: 1; pointer-events: auto; }
#scroll-top:hover { color: var(--primary); border-color: var(--gold-soft); }
#scroll-top:active { box-shadow: none; }

/* ==========================================================
   KOYU BÖLÜMLER (Kitaplar'dan itibaren) + SHOWCASE BİLEŞENİ
   Referans: sol tarafta numaralı liste, sağda büyük sahne
   ========================================================== */
@keyframes slideExpand {
  0%, 100% { width: 24px; opacity: 0.5; }
  50% { width: 110px; opacity: 1; }
}
.section-divider { animation: slideExpand 2.8s ease-in-out infinite; }

/* Koyu bölüm arkaplanları */
#books        { background: #000000; }
#encyclopedia { background: #4D3333; }
#articles     { background: #140040; }
#papers       { background: #700707; }
#projects     { background: linear-gradient(150deg, #101d18 0%, #1c3229 100%); }
#courses      { background: linear-gradient(150deg, #141221 0%, #262040 100%); }
#theses       { background: linear-gradient(150deg, #0e1c22 0%, #1a3540 100%); }
#admin        { background: linear-gradient(150deg, #1c1610 0%, #302718 100%); }
#editorships  { background: linear-gradient(150deg, #1b1016 0%, #33202a 100%); }
#citations    { background: linear-gradient(150deg, #121a12 0%, #223522 100%); }
#media        { background: linear-gradient(150deg, #101722 0%, #1e2c42 100%); }

/* Koyu bölümlerde başlık/divider/sekme görünürlüğü */
#books .section-title, #encyclopedia .section-title, #articles .section-title,
#papers .section-title, #projects .section-title, #courses .section-title,
#theses .section-title, #admin .section-title, #editorships .section-title,
#citations .section-title, #media .section-title { color: #f2f5f8; }

#books .s-icon, #encyclopedia .s-icon, #articles .s-icon,
#papers .s-icon, #projects .s-icon, #courses .s-icon,
#theses .s-icon, #admin .s-icon, #editorships .s-icon,
#citations .s-icon, #media .s-icon {
  background: rgba(255,255,255,0.07); box-shadow: none;
  border: 1px solid rgba(255,255,255,0.12);
}

#books .section-divider, #encyclopedia .section-divider, #articles .section-divider,
#papers .section-divider, #projects .section-divider, #courses .section-divider,
#theses .section-divider, #admin .section-divider, #editorships .section-divider,
#citations .section-divider, #media .section-divider {
  background: rgba(255,255,255,0.08); box-shadow: none;
}

#books .tabs, #encyclopedia .tabs, #articles .tabs, #theses .tabs, #media .tabs, #courses .tabs { background: rgba(255,255,255,0.06); box-shadow: none; }
#books .tab-btn, #encyclopedia .tab-btn, #articles .tab-btn, #theses .tab-btn, #media .tab-btn, #courses .tab-btn { color: rgba(255,255,255,0.55); }
#books .tab-btn.active, #encyclopedia .tab-btn.active, #articles .tab-btn.active, #theses .tab-btn.active, #media .tab-btn.active, #courses .tab-btn.active {
  color: #fff; box-shadow: none; background: rgba(255,255,255,0.12); border-radius: 12px;
}
#books .tab-btn:hover, #encyclopedia .tab-btn:hover, #articles .tab-btn:hover, #theses .tab-btn:hover, #media .tab-btn:hover, #courses .tab-btn:hover { color: #fff; }

#encyclopedia .card-body-text, #citations .card-body-text { color: rgba(255,255,255,0.65); }

/* İdari bölümü koyu zeminde */
#admin .section-title { color: #f2f5f8; }
#admin .admin-item { background: rgba(255,255,255,0.06); box-shadow: none; border: 1px solid rgba(255,255,255,0.08); }
#admin .admin-role { color: #eef2f6; }
#admin .admin-years { color: rgba(255,255,255,0.5); }

/* ---------- SHOWCASE ---------- */
.showcase {
  display: grid; grid-template-columns: 360px 1fr;
  border-radius: 20px; overflow: hidden;
  background: rgba(8, 12, 16, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  min-height: 560px;
}

.sc-list { overflow-y: auto; max-height: 640px; background: rgba(0,0,0,0.35); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
.sc-item {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.sc-item:hover { background: rgba(255,255,255,0.05); }
.sc-item.active { background: rgba(255,255,255,0.09); border-left-color: var(--gold-soft); }
.sc-num {
  font-family: 'Manrope', sans-serif; font-size: 1.7rem; font-weight: 800;
  color: rgba(255,255,255,0.22); line-height: 1; min-width: 44px; transition: color 0.25s;
}
.sc-item.active .sc-num { color: var(--gold-soft); }
.sc-item-text { flex: 1; min-width: 0; }
.sc-item-title {
  display: block; color: #f2f5f8; font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sc-item-sub { display: block; color: rgba(255,255,255,0.42); font-size: 0.73rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-item-year { color: rgba(255,255,255,0.35); font-size: 0.74rem; font-weight: 600; flex-shrink: 0; }

.sc-stages { position: relative; }
.sc-stage {
  display: none; flex-direction: column; justify-content: center;
  min-height: 560px; height: 100%; padding: 60px 64px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(160deg, rgba(255,255,255,0.03), rgba(0,0,0,0.35));
}
.sc-stage.active { display: flex; animation: scFade 0.45s ease; }
@keyframes scFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Sahne fotoğrafı (varsa) — yoksa sadece yazı görünür */
.sc-photo {
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center;
}
.sc-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,10,14,0.88) 0%, rgba(6,10,14,0.55) 55%, rgba(6,10,14,0.25) 100%);
}
.sc-badge {
  display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%;
  padding: 8px 20px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.25);
  color: #e8eef4; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 24px;
}
.sc-badge::before { content: ''; width: 26px; height: 1px; background: rgba(255,255,255,0.5); flex-shrink: 0; }
.sc-title {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.08;
  color: #ffffff; text-transform: uppercase; letter-spacing: 0.01em;
  margin-bottom: 20px; max-width: 620px; position: relative; z-index: 1;
}
.sc-body {
  color: rgba(255,255,255,0.72); font-size: 0.96rem; line-height: 1.85;
  max-width: 540px; position: relative; z-index: 1;
}
.sc-meta {
  display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px;
  color: rgba(255,255,255,0.5); font-size: 0.8rem; position: relative; z-index: 1;
}
.sc-meta a { color: var(--gold-soft); text-decoration: none; font-weight: 700; }
.sc-meta a:hover { text-decoration: underline; }

.sc-issues {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
}
.sc-issues a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 700; color: var(--gold-soft); text-decoration: none;
}
.sc-issues a:hover { text-decoration: underline; }
.sc-issues .ic { width: 13px; height: 13px; }
.sc-cite-stat {
  font-family: 'Cormorant Garamond', serif; font-size: 4.4rem; font-weight: 700;
  color: #fff; line-height: 1;
}
.sc-cite-stat small { display: block; font-family: 'Manrope', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 10px; }

/* ---------- DÜZ GÖRÜNÜM: başlık ikonları yok, gölge yok ---------- */
.section-title .s-icon { display: none; }

.showcase { box-shadow: none; }

/* Sekmeler: gölge yerine alt çizgili sade stil */
#books .tabs, #encyclopedia .tabs, #articles .tabs, #theses .tabs, #media .tabs, #courses .tabs {
  background: transparent; box-shadow: none; padding: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,0.14); gap: 6px; margin-bottom: 30px;
}
#books .tab-btn, #encyclopedia .tab-btn, #articles .tab-btn, #theses .tab-btn, #media .tab-btn, #courses .tab-btn {
  background: transparent; box-shadow: none; border-radius: 0;
  padding: 13px 20px; position: relative;
}
#books .tab-btn.active, #encyclopedia .tab-btn.active, #articles .tab-btn.active, #theses .tab-btn.active, #media .tab-btn.active, #courses .tab-btn.active {
  background: transparent; box-shadow: none; border-radius: 0; color: #fff;
}
#books .tab-btn.active::after, #encyclopedia .tab-btn.active::after, #articles .tab-btn.active::after,
#theses .tab-btn.active::after, #media .tab-btn.active::after, #courses .tab-btn.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  border-radius: 100px 100px 0 0;
}

/* Atıflar bölümündeki not metni */
#citations .card-body-text { color: rgba(255,255,255,0.65); }

/* İletişim ve footer: gölgesiz düz kutular */
#contact .section-divider { box-shadow: none; background: rgba(122,136,153,0.15); animation: none; }
#contact .contact-item { box-shadow: none; border: 1px solid var(--border-light); }
#contact .contact-item:hover { box-shadow: none; border-color: var(--gold-soft); }
#contact .contact-icon { box-shadow: none; border: 1px solid var(--border-light); }
#contact .contact-map-placeholder { box-shadow: none; border: 1px solid var(--border-light); }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; min-height: 0; }
  .sc-list { max-height: 300px; order: 2; }
  .sc-stage { min-height: 420px; padding: 40px 28px; }
  .sc-art { font-size: 9rem; opacity: 0.08; }
}

/* ===================== RESPONSIVE (genel) ===================== */
@media (max-width: 960px) {
  .section { padding: 60px 0; }
  .two-col-section { grid-template-columns: 1fr; gap: 34px; }
  .contact-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 60px 1fr; }
  .tl-space { display: none; }
}
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .cards-grid, .cards-grid-2 { grid-template-columns: 1fr; }
}

/* Hakemli Makaleler: özel renk paleti (arkaplan #140040, metin #F2E6DF) */
#articles .section-title,
#articles .sc-item-title,
#articles .sc-title { color: #F2E6DF; }
#articles .tl-desc,
#articles .sc-item-sub,
#articles .sc-item-year,
#articles .sc-body,
#articles .sc-meta { color: rgba(242,230,223,0.68); }
#articles .sc-badge { border-color: rgba(242,230,223,0.3); background: rgba(0,0,0,0.25); color: #F2E6DF; }
#articles .sc-num { color: rgba(242,230,223,0.28); }
#articles .sc-item.active .sc-num { color: var(--gold-soft); }

/* Kitaplar & Bölümler: özel renk paleti (arkaplan #000000, metin #FFFFFF) */
#books .section-title,
#books .sc-item-title,
#books .sc-title { color: #FFFFFF; }
#books .tl-desc,
#books .sc-item-sub,
#books .sc-item-year,
#books .sc-body,
#books .sc-meta,
#books .card-body-text { color: rgba(255,255,255,0.68); }
#books .sc-badge { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #FFFFFF; }
#books .sc-num { color: rgba(255,255,255,0.28); }
#books .sc-item.active .sc-num { color: var(--gold-soft); }
#books .tabs { background: rgba(255,255,255,0.06); }
#books .tab-btn { color: rgba(255,255,255,0.55); }
#books .tab-btn.active { color: #FFFFFF; }

/* Ansiklopedi Maddeleri: özel renk paleti (arkaplan #4D3333, metin #FFFFFF) */
#encyclopedia .section-title,
#encyclopedia .sc-item-title,
#encyclopedia .sc-title { color: #FFFFFF; }
#encyclopedia .tl-desc,
#encyclopedia .sc-item-sub,
#encyclopedia .sc-item-year,
#encyclopedia .sc-body,
#encyclopedia .sc-meta,
#encyclopedia .card-body-text { color: rgba(255,255,255,0.72); }
#encyclopedia .sc-badge { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #FFFFFF; }
#encyclopedia .sc-num { color: rgba(255,255,255,0.28); }
#encyclopedia .sc-item.active .sc-num { color: var(--gold-soft); }

/* Bildiriler: özel renk paleti (arkaplan #700707, metin #FFFFFF) */
#papers .section-title,
#papers .sc-item-title,
#papers .sc-title { color: #FFFFFF; }
#papers .tl-desc,
#papers .sc-item-sub,
#papers .sc-item-year,
#papers .sc-body,
#papers .sc-meta,
#papers .card-body-text { color: rgba(255,255,255,0.72); }
#papers .sc-badge { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #FFFFFF; }
#papers .sc-num { color: rgba(255,255,255,0.28); }
#papers .sc-item.active .sc-num { color: var(--gold-soft); }


/* ==========================================================
   LOGO — üst menü ve sayfa altı
   Logo tek renkli (lacivert) bir armadır; karanlık temada zeminle
   karışmaması için beyaz siluete çevrilir.
   ========================================================== */
.nav-brand { display: inline-flex; align-items: center; }
.nav-brand-text { white-space: nowrap; }

/* Logo artık ayrı bir düğme: tıklanınca tanıtım videosu oynar.
   Menü çubuğu (--nav-h) logoyu rahat alacak şekilde yükseltildi. */
.nav-inner { gap: 14px; }
.nav-logo-btn {
  padding: 0; border: none; background: none; line-height: 0;
  cursor: pointer; flex-shrink: 0; border-radius: 50%;
  transition: transform var(--trans), filter var(--trans);
}
.nav-logo-btn:hover { transform: scale(1.06); }
.nav-logo-btn:active { transform: scale(0.97); }
.nav-logo-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.nav-logo {
  width: 68px; height: 68px; flex-shrink: 0;
  object-fit: contain; display: block;
}
.footer-logo {
  display: block; width: 64px; height: 64px; margin: 0 auto 14px;
  object-fit: contain; opacity: 0.92;
}
[data-theme="dark"] .nav-logo,
[data-theme="dark"] .footer-logo { filter: brightness(0) invert(1); opacity: 0.9; }

@media (max-width: 520px) {
  :root { --nav-h: 76px; }
  .nav-logo { width: 56px; height: 56px; }
  .nav-inner { gap: 10px; padding: 0 16px; }
  /* Büyütülmüş logo + uzun unvan dar ekrana sığmıyordu (375 px'te 44 px
     taşma, ad kesiliyordu). Unvan gizlenir, ad kalır; yine de yer yetmezse
     üç noktayla kesilir — asla çubuğun dışına taşmaz. */
  #nav-brand-prefix { display: none; }
  .nav-brand { min-width: 0; overflow: hidden; }
  .nav-brand-text { display: block; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================
   AÇILIŞ PERDESİ (intro videosu)
   Varsayılan KAPALI; yalnızca intro.js <html>'e .intro-acik eklerse görünür.
   Böylece betik çalışmazsa perde takılı kalmaz.
   ========================================================== */
.intro { display: none; }

html.intro-acik { overflow: hidden; }
html.intro-acik .intro {
  display: flex; position: fixed; inset: 0; z-index: 5000;
  align-items: center; justify-content: center;
  background: var(--bg);
  /* Perde biraz gecikmeli söner ki videonun logoya çekilişi görünsün. */
  opacity: 1; transition: opacity 0.45s ease 0.25s;
}
.intro.intro-kapaniyor { opacity: 0; pointer-events: none; }

/* Ekranı doldurur. Eskiden 1100 pikselle sınırlıydı ve büyük ekranlarda
   ortada küçük kalıp yanları boş bırakıyordu. Videonun kenar renkleri
   kareden kareye değiştiği için "zemini videoya uydurma" yolu işe
   yaramazdı; tek doğru çözüm görüntüyü kadraja yaymak. */
.intro-video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.6, 0.02, 0.35, 1),
              opacity 0.5s ease 0.12s;
  will-change: transform, opacity;
}

.intro-skip {
  position: absolute; right: 24px; bottom: 24px;
  padding: 9px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); background: var(--bg);
  color: var(--text-mid); font-family: inherit; font-size: 0.78rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; box-shadow: var(--nm-out-sm); transition: color var(--trans), border-color var(--trans);
}
.intro-skip:hover { color: var(--primary); border-color: var(--gold-soft); }

/* Hareket hassasiyeti açıksa perde hiç görünmesin (intro.js de engeller;
   bu, betik öncesi bir kare bile sızmasın diye ikinci güvencedir). */
@media (prefers-reduced-motion: reduce) {
  html.intro-acik { overflow: auto; }
  html.intro-acik .intro { display: none; }
}

/* ==========================================================
   AKADEMİK VE SOSYAL PROFİL BAĞLANTILARI (hero)
   Yalnızca ikon; metin yok. Site diline uygun neomorfik yuvarlak düğmeler.
   ========================================================== */
/* Hero'nun alt dolgusu tanımlı değildi (yalnızca padding-top vardı). İçerik
   ekrandan uzunsa bölüm büyüyor ve profil ikonları beyaz/gri sınırına
   dayanıyordu; #hero'daki overflow:hidden de neomorfik gölgeyi kesiyordu.
   Alt dolgu, ekran yüksekliği ne olursa olsun nefes payı bırakır. */
#hero { padding-bottom: 48px; }

.hero-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 24px;
}
.hero-link {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--text-muted);
  background: var(--bg); box-shadow: var(--nm-out-sm);
  text-decoration: none;
  transition: color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.hero-link svg { width: 20px; height: 20px; display: block; }

/* Resmî marka işareti olanlar kendi renginde durur. Academia'nın koyu grisi
   karanlık temada zeminle karışacağı için orada açık tona geçer
   (--marka-koyu). Diğer markaların renkleri her iki temada da okunur. */
.hero-link-marka { color: var(--marka); }
[data-theme="dark"] .hero-link-marka { color: var(--marka-koyu, var(--marka)); }

.hero-link:hover { transform: translateY(-2px); box-shadow: var(--nm-out); }
.hero-link:not(.hero-link-marka):hover { color: var(--gold); }
.hero-link:active { transform: translateY(0); box-shadow: var(--nm-in-sm); }
.hero-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Akademik grubu sosyal gruptan ayıran ince çizgi */
.hero-links-ayrac {
  width: 1px; height: 22px; margin: 0 4px;
  background: var(--border-light); flex-shrink: 0;
}

@media (max-width: 520px) {
  .hero-links { gap: 8px; }
  .hero-link { width: 36px; height: 36px; }
  .hero-link svg { width: 18px; height: 18px; }
}

/* ==========================================================
   KAYNAK GÖSTERME (künye) — düğme ve pencere
   ========================================================== */
.atif-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--border-light); background: transparent;
  color: var(--text-mid); font-family: inherit; font-size: inherit;
  cursor: pointer; transition: color var(--trans), border-color var(--trans);
}
.atif-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.atif-btn:hover { color: var(--gold); border-color: var(--gold-soft); }
.atif-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

html.atif-acik { overflow: hidden; }
.atif-pencere { position: fixed; inset: 0; z-index: 4000; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.atif-pencere[hidden] { display: none; }
.atif-arka { position: absolute; inset: 0; background: rgba(20, 26, 34, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.atif-kutu {
  position: relative; width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(20, 26, 34, 0.3);
  padding: 24px 26px 20px;
}
.atif-ust { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.atif-ust h3 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem;
  color: var(--primary); margin: 0 0 4px;
}
.atif-eser { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.atif-kapat {
  margin-left: auto; flex-shrink: 0; width: 34px; height: 34px;
  border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg);
  color: var(--text-muted); cursor: pointer; font-size: 0.9rem; transition: all var(--trans);
}
.atif-kapat:hover { color: var(--bordeaux); border-color: var(--bordeaux); }

.atif-satir {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px;
  align-items: start; padding: 14px 0; border-top: 1px solid var(--border-light);
}
.atif-stil {
  grid-column: 1 / -1; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold);
}
.atif-metin {
  font-size: 0.88rem; line-height: 1.7; color: var(--text);
  word-break: break-word; user-select: all;
}
.atif-metin-kod {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.78rem;
  white-space: pre-wrap; background: rgba(122,136,153,0.08);
  padding: 10px 12px; border-radius: 10px;
}
.atif-kopyala {
  flex-shrink: 0; padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--border-light); background: var(--bg);
  color: var(--text-mid); font-family: inherit; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all var(--trans);
}
.atif-kopyala:hover { color: var(--primary); border-color: var(--gold-soft); }
.atif-kopyala.atif-kopyalandi { color: #2e7d32; border-color: #2e7d32; }

.atif-uyari {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-light);
  font-size: 0.74rem; line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 560px) {
  .atif-kutu { padding: 18px 18px 16px; }
  .atif-satir { grid-template-columns: 1fr; }
  .atif-kopyala { justify-self: start; }
}

/* Resim tabanlı kurum logoları (YÖK, Web of Science).
   Kendi renklerini taşırlar; sitenin metin rengine uymazlar.
   YÖK arması geniş oranlı olduğu için düğmenin genişliğini kullanır. */
.hero-link-resim {
  width: 24px; height: 24px; object-fit: contain; display: block;
}
/* Web of Science armasının bir parçası siyahtır ve karanlık zeminde
   kaybolur. Karanlık temada logolara açık bir zemin verilir; marka
   renkleri korunur, yalnızca arkalarına bir plaka konur. */
[data-theme="dark"] .hero-link-resim {
  background: rgba(255, 255, 255, 0.93);
  border-radius: 50%; padding: 3px;
  width: 26px; height: 26px;
}

@media (max-width: 520px) {
  .hero-link-resim { width: 21px; height: 21px; }
  [data-theme="dark"] .hero-link-resim { width: 23px; height: 23px; }
}

/* Biyografi metni iki yana yaslı. Türkçede yaslama kelime aralarında
   "nehir" oluşturabildiği için heceleme açık (html lang="tr" olduğundan
   tarayıcı Türkçe heceleme sözlüğünü kullanır). Hizalama panelden
   değiştirilebilir; buradaki değer yalnızca varsayılandır. */
.hero-bio {
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* ==========================================================
   HERO VİDEOSU — çerçeve ve filigran
   ----------------------------------------------------------
   Video, krem/parşömen zeminli suluboya bir çizim. Beyaz hero bölümünün
   üzerinde bu krem alan dikdörtgen bir leke gibi duruyordu ("çerçeve").
   Maske ile kenarlar sayfaya doğru eritiliyor.

   Sağ alt köşede üretim aracının filigranı var. Video multiply ile beyaz
   zemine karıştığından, üzerine konan BEYAZ bir yumuşak yama görünmez
   kalırken filigranı örtüyor. Hero her iki temada da beyaz olduğu için
   (#hero { background:#ffffff }) yama karanlık temada da doğru çalışır.
   ========================================================== */
.hero-video { position: relative; }

.hero-video video {
  -webkit-mask-image: radial-gradient(118% 110% at 48% 45%, #000 60%, transparent 95%);
          mask-image: radial-gradient(118% 110% at 48% 45%, #000 60%, transparent 95%);
}

/* NOT: Sağ alt köşedeki filigranı örtmek için buraya yumuşak bir beyaz
   yama konmuştu. Zeminde açık renkli bir leke olarak göründüğü için
   kaldırıldı. Videoda filigran varsa artık görünür; gerekirse videonun
   kendisini filigransız bir sürümle değiştirmek daha temiz sonuç verir. */

/* ==========================================================
   ZAMAN ÇİZELGESİ — kitap sayfası açılışı
   ----------------------------------------------------------
   Kartlar ortadaki çizgiyi (kitap sırtı) eksen alarak açılır: soldaki
   kartlar sağ kenarından, sağdakiler sol kenarından menteşelidir. Kapalı
   hâlde sayfa sırta katlanmış (yaklaşık 90°), açıkken düz durur.

   Animasyon TEK YÖNLÜ DEĞİLDİR: görünürden çıkınca .visible sınıfı
   kaldırılır ve kart yeniden kapanır (bkz. main.js → initTimelineReveal).
   ========================================================== */
.timeline-item { margin-bottom: 14px; }

/* YERLEŞİM DÜZELTMESİ — her ikinci satırın iki kat yüksek olması
   Izgara çocukları DOM sırasıyla yerleşir ve otomatik yerleştirme geriye
   dönmez. Çift öğelerde kart 3. sütuna atandığı için ondan SONRA gelen
   nokta 2. sütuna yerleşemiyor, alt satıra düşüyordu; satır yüksekliği
   kart + nokta kadar oluyordu (ölçümde tam 102 piksel fazlalık, yani
   nokta sütununun boyu). Böylece boşluklar 22 / 124 / 22 / 124 diye
   gidiyordu. Üçünü de aynı satıra sabitlemek bunu bitirir. */
.timeline-item > * { grid-row: 1; }

.tl-card { perspective: 1100px; }

.tl-card-inner {
  /* Eski büyüyerek gelme efektinin yerini menteşe alıyor. */
  transform: none;
  backface-visibility: hidden;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease,
              box-shadow var(--trans);
}

/* --- kapalı hâl --- */
.timeline-item:nth-child(odd) .tl-card-inner {
  transform-origin: right center;
  transform: rotateY(-92deg);
  opacity: 0;
}
.timeline-item:nth-child(even) .tl-card-inner {
  transform-origin: left center;
  transform: rotateY(92deg);
  opacity: 0;
}

/* --- açık hâl (kapalı kurallardan SONRA gelmeli: özgüllük eşit) --- */
.timeline-item.visible .tl-card-inner {
  transform: rotateY(0deg);
  opacity: 1;
}
.timeline-item.visible .tl-card-inner:hover {
  transform: rotateY(0deg) translateY(-3px);
  box-shadow: var(--nm-out);
}

@media (max-width: 760px) {
  /* Dar ekranda kartlar tek sütunda ve çizgi solda; hepsi soldan açılır.
     Özgün mobil kural :nth-child içerdiği için daha özgül; aralığı
     ezebilmek adına aynı biçimde yazılıyor. Tek sütunda kartlar alt alta
     geldiğinden masaüstündeki 14 pikselden biraz geniş bırakıldı. */
  .timeline-item,
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) { margin-bottom: 18px; }
  .timeline-item:nth-child(odd) .tl-card-inner,
  .timeline-item:nth-child(even) .tl-card-inner {
    transform-origin: left center;
    transform: rotateY(70deg);
  }
  .timeline-item.visible .tl-card-inner { transform: rotateY(0deg); }
}

/* Hareket hassasiyeti açıksa döndürme yok; yalnızca yumuşak geçiş. */
@media (prefers-reduced-motion: reduce) {
  .timeline-item:nth-child(odd) .tl-card-inner,
  .timeline-item:nth-child(even) .tl-card-inner {
    transform: none; opacity: 0;
  }
  .timeline-item.visible .tl-card-inner { transform: none; opacity: 1; }
}

/* ==========================================================
   KARANLIK TEMA — hero zemini
   #hero arka planı sabit #ffffff idi; tema koyuya alındığında sayfanın
   üst kısmı beyaz kalıyordu. Videonun multiply karışımı karanlık temada
   zaten kapatıldığı için (aşağıdaki mevcut kural) koyu zemin sorun çıkarmaz.
   ========================================================== */
[data-theme="dark"] #hero { background: var(--bg); }


/* ==========================================================
   YAYINLAR — KİTAPLIK DÜZENİ
   ----------------------------------------------------------
   Yayınlar raflarda kitap sırtı olarak dizilir; sırta tıklanınca eser
   raftan çıkıp açılır (solda kapak, sağda künye). Çizim: kitaplik.js
   ========================================================== */
.raf { margin-bottom: 34px; }
.raf:last-child { margin-bottom: 0; }
.raf-baslik {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--primary);
}
.raf-sayi {
  font-family: 'Manrope', sans-serif; font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.raf-govde {
  position: relative; display: flex; align-items: flex-end; gap: 7px;
  padding: 26px 18px 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.raf-govde::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  min-width: 100%; border-radius: 4px; background: var(--bg); box-shadow: var(--nm-out-sm);
}

/* ---- Kitap sırtı ---- */
.sirt {
  position: relative; flex: 0 0 auto;
  width: var(--kalinlik, 44px); height: var(--boy, 210px);
  border: none; padding: 12px 4px 10px; cursor: pointer;
  border-radius: 3px 5px 5px 3px;
  background: linear-gradient(90deg,
              rgba(0,0,0,.28) 0%, rgba(0,0,0,.06) 12%,
              rgba(255,255,255,.14) 55%, rgba(0,0,0,.22) 100%),
              var(--sirt-renk, #23405c);
  color: #f4efe2;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  box-shadow: 2px 3px 8px rgba(20,26,34,.28);
  transform-origin: bottom center;
  transition: transform .34s cubic-bezier(.2,.8,.3,1), box-shadow .34s ease, filter .34s ease;
}
.sirt:hover { transform: translateY(-14px) rotate(-1.2deg); box-shadow: 4px 10px 20px rgba(20,26,34,.34); filter: brightness(1.08); }
.sirt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sirt-yazi {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem; font-weight: 600; line-height: 1.15; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.sirt-yil {
  font-family: 'Manrope', sans-serif; font-size: 0.58rem; font-weight: 700;
  opacity: .85; letter-spacing: .04em;
  border-top: 1px solid rgba(255,255,255,.35); padding-top: 5px; width: 60%; text-align: center;
}

/* ---- Açılan kitap ----
   z-index 3900: künye penceresi (4000) bunun ÜSTÜNDE açılmalı. */
html.kitap-acik { overflow: hidden; }
.kitap-katman {
  position: fixed; inset: 0; z-index: 3900; display: flex;
  align-items: center; justify-content: center; padding: 24px;
}
.kitap-katman[hidden] { display: none; }
.kitap-arka {
  position: absolute; inset: 0; background: rgba(16,22,30,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s ease;
}
.kitap-katman.acildi .kitap-arka { opacity: 1; }
.kitap-kapat {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; font-size: 1rem;
}
.kitap-kapat:hover { background: rgba(255,255,255,.22); }
.kitap-sahne { position: relative; perspective: 2200px; z-index: 2; }

/* Önce kitap öne gelir, SONRA sağ sayfa açılır; ikisi üst üste binerse
   açılış takılıyormuş gibi görünüyor. */
.kitap {
  display: flex; align-items: stretch; transform-style: preserve-3d;
  transform: translateY(22px) scale(.9); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.9,.3,1), opacity .4s ease;
}
.kitap-katman.acildi .kitap { transform: none; opacity: 1; }

.kitap-kapak, .kitap-sayfa { width: min(46vw, 360px); height: min(74vh, 500px); overflow: hidden; }

.kitap-kapak {
  position: relative; border-radius: 6px 2px 2px 6px;
  background: var(--kapak-renk, #23405c);
  box-shadow: inset -14px 0 22px rgba(0,0,0,.32), -6px 8px 26px rgba(16,22,30,.4);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px 26px; color: #f4efe2;
}
.kitap-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kitap-kapak-yazi { position: relative; z-index: 1; }
.kitap-kapak-yazi h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
/* Kapak koyu mavi zeminlidir; çizgi her temada AÇIK kalmalı ki görünsün. */
.kitap-kapak-cizgi { width: 46px; height: 3px; background: #9fc6f5; margin: 12px 0; position: relative; z-index: 1; }
.kitap-kapak-alt { position: relative; z-index: 1; font-size: .78rem; opacity: .9; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* Sağ sayfa TAM -90°'den açılır: daha fazlası sayfanın arka yüzünü
   gösteriyor ve başlangıçta takılma gibi görünüyordu. */
.kitap-sayfa {
  border-radius: 2px 6px 6px 2px; background: #fbf8f1;
  box-shadow: inset 16px 0 26px rgba(120,100,60,.16), 8px 10px 30px rgba(16,22,30,.34);
  padding: 34px 32px; overflow-y: auto; color: #2c2a24;
  transform-origin: left center; transform: rotateY(-90deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
  transition: transform 1s cubic-bezier(.25,.85,.3,1) .45s;
}
.kitap-katman.acildi .kitap-sayfa { transform: rotateY(0deg); }
[data-theme="dark"] .kitap-sayfa { background: #efe9dc; }

/* Künye sayfası her iki temada da KREM zeminlidir; buradaki renkler bu
   yüzden tema değişkenine bağlanmaz, sabit koyu mavi kullanılır. */
.ks-tur { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #1552a8; margin-bottom: 10px; }
.ks-baslik { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; line-height: 1.3; color: #23405c; margin-bottom: 14px; }
.ks-satir { display: flex; gap: 10px; font-size: .84rem; line-height: 1.6; margin-bottom: 7px; }
.ks-etiket { flex: 0 0 96px; color: #8a8578; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.ks-deger { flex: 1; }
.ks-ayrac { height: 1px; background: rgba(0,0,0,.1); margin: 18px 0; }
.ks-eylem { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.ks-btn, .kitap-sayfa .atif-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px;
  border-radius: 9px; border: 1px solid rgba(0,0,0,.18); background: transparent;
  color: #23405c; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.ks-btn:hover, .kitap-sayfa .atif-btn:hover { border-color: #1552a8; color: #0f3f85; }

@media (max-width: 820px) {
  .kitap { flex-direction: column; }
  .kitap-kapak, .kitap-sayfa { width: min(88vw, 420px); }
  .kitap-kapak { height: 190px; border-radius: 6px 6px 0 0; }
  .kitap-sayfa {
    height: min(52vh, 420px); border-radius: 0 0 6px 6px;
    transform-origin: top center; transform: rotateX(90deg);
  }
  .kitap-katman.acildi .kitap-sayfa { transform: rotateX(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sirt, .kitap, .kitap-sayfa, .kitap-arka { transition-duration: .01ms !important; }
  .kitap-sayfa { transform: none; }
}

/* ==========================================================
   KİTAPLIK — koyu zeminli yayın bölümlerinde okunabilirlik
   ----------------------------------------------------------
   #books (siyah), #encyclopedia (kahve), #articles (mor) ve #papers
   (bordo) koyu zeminlidir. Raf başlığı sitenin lacivert vurgusunu
   kullandığı için bu zeminlerde neredeyse görünmüyordu; burada açık
   renge alınır. Aynı gerekçeyle raf tahtası da açık gri neomorfik
   çubuk yerine ince, yarı saydam bir çizgiye dönüşür.
   ========================================================== */
#books .raf-baslik, #encyclopedia .raf-baslik,
#articles .raf-baslik, #papers .raf-baslik {
  color: #f2f5f8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

#books .raf-govde::after, #encyclopedia .raf-govde::after,
#articles .raf-govde::after, #papers .raf-govde::after {
  height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .22);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}

/* Sırtlar koyu zeminde daha net ayrışsın diye kenarları hafifçe
   aydınlatılır; aksi hâlde siyah bölümde kitap kenarları kayboluyor. */
#books .sirt, #encyclopedia .sirt, #articles .sirt, #papers .sirt {
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .5),
              0 0 0 1px rgba(255, 255, 255, .1);
}