/* =====================================================================
   SİTE STİLLERİ — ziyaretçi tarafı
   Tüm renk/boşluk değerleri tokens.css'ten gelir.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SIFIRLAMA
   --------------------------------------------------------------------- */

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

* { margin: 0; }

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

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* `hidden` özniteliği HER ZAMAN gizlesin. Tarayıcının kendi
   `[hidden]{display:none}` kuralı en zayıf olandır; sınıfında `display`
   yazan bir öğe (ör. `.dugme{display:inline-flex}`) hidden yapılsa bile
   ekranda kalıyordu. */
[hidden] { display: none !important; }

/* Sayılar hizalı — dosya boyutları ve tarihler alt alta dizilsin */
.sayi, time, .dosya-bilgi, td.sayi {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   2. TİPOGRAFİ
   --------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }

p { text-wrap: pretty; }

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--accent-hover); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ---------------------------------------------------------------------
   3. ERİŞİLEBİLİRLİK
   --------------------------------------------------------------------- */

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

/* Klavye kullanıcıları için içeriğe atlama bağlantısı */
.atla {
  position: absolute;
  left: -9999px;
  top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-md);
  z-index: 100;
}

.atla:focus {
  left: var(--sp-4);
  color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   4. DÜZEN
   --------------------------------------------------------------------- */

.kap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.kap-dar   { max-width: var(--w-text); }
.kap-orta  { max-width: var(--w-orta); }
.kap-genis { max-width: var(--w-wide); }

.icerik {
  flex: 1;
  padding-block: var(--sp-12) var(--sp-16);
}

.bolum + .bolum { margin-top: var(--sp-16); }

/* ---------------------------------------------------------------------
   5. ÜST MENÜ
   Sabit değil — sayfayla birlikte kayar, okumayı bölmez.
   --------------------------------------------------------------------- */

.ust-cubuk {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.ust-cubuk__ic {
  max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.marka {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.marka:hover { color: var(--text); }

.menu {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
}

.menu a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast);
}

.menu a:hover { color: var(--text); }

.menu a[aria-current="page"] {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

/* Tema anahtarı */
.tema-dugme {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.tema-dugme:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.tema-dugme svg { width: 18px; height: 18px; }

.ust-cubuk__araclar { display: flex; align-items: center; gap: var(--sp-2); }

/* Dil düğmesi — tema düğmesinin solunda, aynı boyut ve davranış */
.dil-dugme {
  display: grid;
  place-items: center;
  min-width: 36px; height: 36px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.dil-dugme:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Güneş/ay ikonları — hangisinin görüneceğini tema belirler */
.tema-dugme .ikon-ay   { display: block; }
.tema-dugme .ikon-gunes { display: none; }

:root[data-tema="koyu"] .tema-dugme .ikon-ay    { display: none; }
:root[data-tema="koyu"] .tema-dugme .ikon-gunes { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .tema-dugme .ikon-ay    { display: none; }
  :root:not([data-tema="acik"]) .tema-dugme .ikon-gunes { display: block; }
}

/* ---------------------------------------------------------------------
   6. ALT BİLGİ
   --------------------------------------------------------------------- */

.alt-bilgi {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-8);
  margin-top: auto;
}

.alt-bilgi__ic {
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}

.alt-bilgi a {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.alt-bilgi a:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------------
   7. BUTONLAR
   --------------------------------------------------------------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  /* .girdi ile aynı: form satırlarında yan yana geldiklerinde birinin
     4px kısa kalması gözle görülür bir dengesizlik yaratıyordu. */
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.dugme svg { width: 16px; height: 16px; flex-shrink: 0; }

.dugme--birincil {
  background: var(--accent);
  color: #fff;
}

.dugme--birincil:hover { background: var(--accent-hover); color: #fff; }

.dugme--ikincil {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent-text);
}

.dugme--ikincil:hover { background: var(--accent-soft); color: var(--accent-text); }

.dugme--sade {
  background: var(--bg);
  border-color: var(--border-strong);
  color: var(--text);
}

.dugme--sade:hover { background: var(--bg-hover); color: var(--text); }

.dugme--kilit {
  background: var(--bg);
  border-color: var(--lock);
  color: var(--lock);
}

.dugme--kilit:hover { background: var(--lock-soft); color: var(--lock); }

/* Kilitli toplu indirme — dolu kırmızı, "şifre isteyecek" uyarısı taşır.
   Kilit rengi (kehribar) durum bildirir; bu ise bir EYLEM tuşudur. */
.dugme--kilitli-indir {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--danger-uzeri);
}

.dugme--kilitli-indir:hover {
  background: var(--danger);
  color: var(--danger-uzeri);
  filter: brightness(0.92);
}

.dugme--tehlike {
  background: var(--danger);
  color: #fff;
}

.dugme--tam { width: 100%; }

.dugme[disabled], .dugme[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Yalnızca ikon içeren küçük buton (indirme oku, anahtar) */
.ikon-dugme {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}

.ikon-dugme:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
}

.ikon-dugme--indir { color: var(--unlock); border-color: var(--unlock); }
.ikon-dugme--indir:hover { background: var(--unlock-soft); }

.ikon-dugme--kilit { color: var(--lock); border-color: var(--lock); }
.ikon-dugme--kilit:hover { background: var(--lock-soft); color: var(--lock); }

.ikon-dugme svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   8. ROZETLER
   --------------------------------------------------------------------- */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.rozet--teknoloji { background: var(--accent-soft); color: var(--accent-text); }
.rozet--acik      { background: var(--unlock-soft); color: var(--unlock); }
.rozet--kilitli   { background: var(--lock-soft);   color: var(--lock); }
.rozet--gizli     { background: var(--hidden-soft); color: var(--hidden); }
.rozet--durum     { background: var(--success-soft); color: var(--success); }
.rozet--notr      { background: var(--bg-hover); color: var(--text-muted); }

.rozet svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------
   9. KARTLAR
   --------------------------------------------------------------------- */

.kart {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.kart__govde { padding: var(--sp-5); }

/* Proje kapağı — 3:4 DİKEY.
   Oran tek yerden verilir ki liste kartı, proje sayfası ve paneldeki
   önizleme birbirinden ayrışmasın. `object-fit: cover` sayesinde farklı
   oranda yüklenmiş eski görseller de kırpılarak aynı çerçeveye oturur. */
.kapak {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* Proje sayfasındaki kapak: dikey olduğu için tam genişlik verilmez,
   yoksa 860px'lik kapta 1150px yüksekliğinde bir duvar oluyor. */
.kapak--tekil {
  max-width: 320px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.kart--baglanti {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.kart--baglanti:hover {
  border-color: var(--accent);
  box-shadow: var(--sh-sm);
  color: inherit;
}

.izgara {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---------------------------------------------------------------------
   10. DOSYA AĞACI — sitenin kalbi
   --------------------------------------------------------------------- */

.agac {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Klasör satırı — açılır/kapanır */
.klasor {
  border-bottom: 1px solid var(--border);
}

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

.klasor__baslik {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 0;
  text-align: start;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: background var(--t-fast);
}

.klasor__baslik:hover { background: var(--bg-hover); }

.klasor__ok {
  width: 16px; height: 16px;
  color: var(--text-faint);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}

.klasor__baslik[aria-expanded="true"] .klasor__ok { transform: rotate(90deg); }

.klasor__ikon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.klasor__baslik[aria-expanded="true"] .klasor__ikon { color: var(--accent); }

.klasor__ad { flex: 1; }

.klasor__sayi {
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
}

.klasor__icerik {
  padding: 0 var(--sp-4) var(--sp-4) var(--sp-10);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.klasor__icerik[hidden] { display: none; }

/* Belge bloğu — anlatı katmanı */
.belge {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

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

/* Belge satırı: [ok] [başlık bağlantısı] [dosya sayısı]
   Ok ile başlık ayrı hedeflerdir — ok dosyaları açar, başlık belgenin
   kendi sayfasına gider. Biri diğerinin tıklama alanını yutmamalı. */
.belge__ust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.belge__ac {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.belge__ac:hover { background: var(--bg-hover); color: var(--text); }

/* Dosyası olmayan belgede ok yok — başlıklar yine de hizalı dursun */
.belge__ac--bos { cursor: default; }

.belge__baslik {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  color: var(--accent-text);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}

.belge__baslik:hover { text-decoration: underline; }
.belge__baslik svg { width: 18px; height: 18px; flex-shrink: 0; }

.belge__ozet {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  margin-top: var(--sp-1);
  padding-inline-start: calc(28px + var(--sp-2));
}

.belge__dosyalar {
  margin-top: var(--sp-3);
  padding-inline-start: calc(28px + var(--sp-2));
}

.belge__dosyalar[hidden] { display: none; }

/* Dosya satırı */
.dosya {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}

.dosya:hover { background: var(--bg-hover); }

.dosya__kilit { width: 16px; height: 16px; flex-shrink: 0; }
.dosya__kilit--acik   { color: var(--unlock); }
.dosya__kilit--kapali { color: var(--lock); }
.dosya__kilit--gizli  { color: var(--hidden); }

.dosya__ad {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dosya__bilgi {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Toplu indirme satırı */
.agac__toplu {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.agac__toplu-ad { flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------------
   11. ZAMAN ÇİZELGESİ — ana sayfa otobiyografisi
   --------------------------------------------------------------------- */

.cizelge {
  position: relative;
  padding-inline-start: var(--sp-10);
}

/* Dikey hat */
.cizelge::before {
  content: "";
  position: absolute;
  inset-block: var(--sp-2) 0;
  inset-inline-start: 7px;
  width: 1px;
  background: var(--border);
}

.olay {
  position: relative;
  padding-bottom: var(--sp-12);
}

.olay:last-child { padding-bottom: 0; }

/* Hat üzerindeki nokta */
.olay::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--sp-10) * -1 + 4px);
  top: var(--sp-2);
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}

.olay__yil {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-1);
}

.olay__baslik {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-2);
}

.olay__metin {
  color: var(--text);
}

.olay__metin p + p { margin-top: var(--sp-4); }

.olay__gorsel {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.olay__gorsel img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* Görselli olay iki sütun: görsel bir yanda, yazı diğer yanda.
   Görsel metnin ALTINDA dururken hem sıkışıyor hem de satır genişliğinin
   yarısını boş bırakıyordu; kendi sütununda daha büyük gösterilebiliyor. */
.olay--gorselli {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.olay--gorselli .olay__gorsel { grid-area: 1 / 1; }
.olay--gorselli .olay__govde  { grid-area: 1 / 2; }

/* Panelden seçilen ters yerleşim — görsel sağda */
.olay--sagda .olay__gorsel { grid-area: 1 / 2; }
.olay--sagda .olay__govde  { grid-area: 1 / 1; }
.olay--sagda { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }

/* Dar ekranda yan yana durmaz: önce yazı, sonra görsel */
@media (max-width: 700px) {
  .olay--gorselli,
  .olay--sagda { grid-template-columns: 1fr; gap: var(--sp-4); }

  .olay--gorselli .olay__govde,
  .olay--sagda   .olay__govde  { grid-area: 1 / 1; }

  .olay--gorselli .olay__gorsel,
  .olay--sagda   .olay__gorsel { grid-area: 2 / 1; max-width: 320px; }
}

/* ---------------------------------------------------------------------
   12. PROFİL BLOĞU
   --------------------------------------------------------------------- */

.profil {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.profil__foto {
  width: 120px; height: 120px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-subtle);
}

.profil__ad { font-size: var(--fs-4xl); letter-spacing: -0.02em; }

.profil__unvan {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.profil__tanitim {
  margin-top: var(--sp-4);
}

/* ---------------------------------------------------------------------
   12b. ÖZGEÇMİŞ SAYFASI
   --------------------------------------------------------------------- */

.ozgecmis-ust {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border);
}

.cv-indir {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.cv-indir .dugme { justify-content: flex-start; }

/* Önceki CV sürümleri — indirme butonlarının altında, kapalı gelir */
.cv-onceki { margin-top: var(--sp-1); }
.cv-onceki summary { cursor: pointer; text-align: center; }
.cv-onceki summary:hover { color: var(--text); }
.cv-onceki ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
}
.cv-onceki li { display: flex; gap: var(--sp-2); align-items: baseline; }
.cv-onceki li span { flex: 1; color: var(--text-muted); }
.cv-onceki a { color: var(--accent-text); }

.cv-bolum { margin-top: var(--sp-12); }

.cv-bolum__baslik {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--accent-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}

/* Zaman çizelgesi tipi madde: solda tarih, sağda içerik */
.cv-madde {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.cv-madde:last-child { margin-bottom: 0; }

.cv-madde__tarih {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.cv-madde__baslik {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  margin-bottom: 2px;
}

.cv-madde__baslik a { color: inherit; text-decoration: none; }
.cv-madde__baslik a:hover { color: var(--accent-text); }

.cv-madde__kurum {
  font-size: var(--fs-sm);
  color: var(--accent-text);
  margin-bottom: var(--sp-2);
}

.cv-madde__metin {
  font-size: var(--fs-sm);
  color: var(--text);
}

.cv-madde__metin ul {
  margin: 0;
  padding-inline-start: var(--sp-5);
}

.cv-madde__metin li { margin-bottom: var(--sp-1); }
.cv-madde__metin p + p { margin-top: var(--sp-2); }

.cv-liste {
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-sm);
}

.cv-liste li { margin-bottom: var(--sp-2); }

@media (max-width: 640px) {
  .cv-madde {
    grid-template-columns: 1fr;
    gap: var(--sp-1);
  }
  .cv-indir { width: 100%; }
}

/* ---------------------------------------------------------------------
   Projeler — liste görünümü (panelden seçilir)
   Solu vurgu renkli satırlar: başlık + rol rozeti, tarih · kurum,
   özet, açılır dosya listesi, #etiketler. Renkler tema değişkenlerinden.
   --------------------------------------------------------------------- */

.proje-liste { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Kapak görseli varsa solda dikey küçük görsel (kapaklar 3:4 yüklenir) */
.proje-satir--kapakli {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.proje-satir__kapak {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-hover);
}

.proje-satir__kapak img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--t-base);
}

.proje-satir__kapak:hover img { transform: scale(1.03); }

.proje-satir__govde { min-width: 0; }

.proje-satir {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-8);
}

.proje-satir__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.proje-satir__baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
}

.proje-satir__baslik h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  margin: 0;
}

.proje-satir__baslik h2 a { color: var(--text); text-decoration: none; }
.proje-satir__baslik h2 a:hover { color: var(--accent-text); }

.proje-satir__rol {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  background: var(--accent-text);
  color: var(--bg);
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  white-space: nowrap;
}

.proje-satir__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.proje-satir__ozet {
  margin: var(--sp-3) 0 0;
  color: var(--text);
  line-height: var(--lh-loose);
  max-width: none;
}

/* Açılır dosya listesi */
.proje-dosyalar { margin-top: var(--sp-5); }

.proje-dosyalar summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--t-fast);
  user-select: none;
}

.proje-dosyalar summary::-webkit-details-marker { display: none; }
.proje-dosyalar summary:hover { border-color: var(--accent); }
.proje-dosyalar summary svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }

.proje-dosyalar__sayi {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--accent-soft);
  color: var(--accent-text);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}

.proje-dosyalar__ok { transition: transform var(--t-fast); }
.proje-dosyalar[open] .proje-dosyalar__ok { transform: rotate(180deg); }

/* İçerik: proje sayfasındaki ağacın aynısı (.agac / .klasor / .dosya) */
.proje-dosyalar__agac {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Çok dosyalı projelerde sayfa uzamasın — ağaç kendi içinde kayar */
  max-height: 28rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.proje-dosyalar__tumu {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--accent-text);
}

/* Etiketler */
.proje-satir__etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.proje-satir__etiketler span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px var(--sp-2);
}

@media (max-width: 640px) {
  .proje-satir { padding: var(--sp-5) var(--sp-4); }
  /* Dar ekranda kapak başlığın solunda küçük dikey görsel. Kapaklar 3:4
     dikey yüklendiği için yatay şeride kırpmak roketi ortadan kesiyordu.
     Gövde `display: contents` ile açılır: başlık kapağın yanına, özet,
     dosya ağacı ve etiketler alta tam genişlikte yerleşir. */
  .proje-satir--kapakli {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--sp-3) var(--sp-4);
  }
  .proje-satir--kapakli .proje-satir__govde { display: contents; }
  .proje-satir--kapakli .proje-satir__kapak { grid-column: 1; grid-row: 1; }
  .proje-satir--kapakli .proje-satir__ust {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
  }
  .proje-satir--kapakli .proje-satir__ozet,
  .proje-satir--kapakli .proje-dosyalar,
  .proje-satir--kapakli .proje-satir__etiketler { grid-column: 1 / -1; }
  .proje-satir--kapakli .proje-satir__ozet { margin-top: 0; }
  .proje-satir__meta { white-space: normal; }
  .proje-dosyalar summary { display: flex; }
}

/* ---------------------------------------------------------------------
   13. BELGE OKUMA SAYFASI
   --------------------------------------------------------------------- */

.yol {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.yol a { color: var(--text-muted); text-decoration: none; }
.yol a:hover { color: var(--accent-text); }
.yol__ayrac { color: var(--text-faint); }

/* Panelden girilen zengin metin */
.metin { max-width: var(--w-text); }

/* Proje açıklaması sayfa kabının tamamını kullanır. 680px'lik okuma
   sütunu, 860px'lik kabın içinde sağda boş bir şerit bırakıyordu —
   altındaki ekip kartları tam genişlikte olduğu için göze batıyordu. */
.metin--genis { max-width: none; }

.metin > * + * { margin-top: var(--sp-4); }

/* Metinden sonra gelen ilk bölüm başlığı metne yapışmasın.
   `.bolum + .bolum` yalnızca ARDIŞIK bölümler arasında çalışır; ilk
   bölüm bir metin bloğunu izlediğinde hiç boşluk kalmıyordu. */
.metin + .bolum { margin-top: var(--sp-6); }

.metin h2 { margin-top: var(--sp-10); }
.metin h3 { margin-top: var(--sp-8); }

.metin ul, .metin ol { padding-inline-start: var(--sp-6); }
.metin li + li { margin-top: var(--sp-2); }

/*
  Zengin metin paragrafları iki yana yaslanır.

  `hyphens: auto` ŞART, süs değil. Türkçe eklemeli bir dil; "yapılandırılmış",
  "değerlendireceğiz" gibi uzun kelimeler satır sonuna sığmayınca bir alt
  satıra iniyor ve geride kelimeler arası kocaman boşluklar bırakıyor. Sayfada
  bu boşluklar alt alta gelip dikey "ırmaklar" oluşturuyor. Tireleme, kelimeyi
  bölerek satırı doldurmayı mümkün kılıyor ve yaslama düzgün duruyor.
  <html lang="tr"> tanımlı olduğu için tarayıcı Türkçe hece sözlüğünü kullanır.

  Yalnızca akıcı metne uygulanır: başlıklar, tablo hücreleri, rozetler ve
  düğmeler dışarıda — kısa metinde yaslama okumayı bozar.
*/
.metin p,
.metin li,
.metin blockquote,
.olay__metin p,
.olay__metin li,
.profil__tanitim p,
.cv-madde__metin p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/*
  Dar ekranda yaslama bırakılır. Telefonda satıra dört beş kelime düşüyor;
  o satırı iki yana germek, tireleme olsa bile kelimeler arasını açıyor.
  Sola yaslı hâli orada belirgin biçimde daha okunaklı.
*/
@media (max-width: 30rem) {
  .metin p,
  .metin li,
  .metin blockquote,
  .olay__metin p,
  .olay__metin li,
  .profil__tanitim p,
  .cv-madde__metin p {
    text-align: start;
  }
}

/* İçerik görselleri. Genişlik ve hizalama panelde satır içi style olarak
   yazılır (editor.js); buradaki kurallar yalnızca çerçeveyi ve taşmayı
   kontrol eder — yazarın verdiği ölçüyü ezmez. */
.metin img {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  max-width: 100%;
  height: auto;
}

/* Yana yaslanmış görsel metin bloğundan taşmasın. Temizleme YALNIZCA
   kabın sonunda yapılır — paragraflara koyulursa metin görselin yanından
   akamaz, hizalama da anlamsızlaşırdı. */
.metin::after { content: ''; display: table; clear: both; }

.metin figure { margin-block: var(--sp-8); }

.metin figcaption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-top: var(--sp-3);
}

.metin blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--sp-4);
  color: var(--text-muted);
}

/*
  Tablolar dar ekranda sayfayı yana kaydırmasın: kendi içinde kaysın.
  `display:block` olmadan `overflow-x` tabloda çalışmaz — tablo yerleşimi
  taşmayı görmezden gelir.
*/
.metin table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

/* Hücreler kaymadan okunsun; başlık satırı bölünmesin */
.metin th { white-space: nowrap; }

.metin th, .metin td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: start;
}

.metin th { font-weight: var(--fw-semi); }

/* Belge sayfasının altındaki dosya kutusu */
.dosya-kutusu {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
  max-width: var(--w-text);
}

/* Belge altındaki dosya kutusu, projedeki ağaçla aynı bileşenleri kullanır
   (.agac / .klasor__baslik / .klasor__icerik); ayrı bir başlık stili yok. */

/* ---------------------------------------------------------------------
   13b. İLETİŞİM SAYFASI
   --------------------------------------------------------------------- */

/* Sayfanın hedefi: TEK EKRANA sığmak, kaydırma gerektirmemek.
   Bunun için dikey boşluklar burada daraltılıyor. */
.iletisim-sayfa .alan { margin-bottom: var(--sp-3); }

/* Sayfa çerçevesinin üst/alt nefesi de kısılıyor. :has desteklenmeyen
   eski bir tarayıcıda kural düşer, sayfa yalnızca biraz uzar. */
.icerik:has(.iletisim-sayfa) { padding-block: var(--sp-8); }

/* İki alanı yan yana koyan satır — dar ekranda alt alta iner */
.ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 560px) {
  .ikili { grid-template-columns: 1fr; gap: 0; }
}

/* Mesaj kutusu ekran boyuna göre esner: alçak ekranda küçülür, yüksek
   ekranda büyür. Sabit `rows` her iki uçta da yanlış boyu veriyordu. */
.girdi--esnek {
  height: clamp(88px, 18vh, 190px);
  resize: vertical;
}

.iletisim-duzen {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-8);
  align-items: start;
}

.iletisim-kutu {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

.iletisim-satir {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.iletisim-satir:last-child { border-bottom: 0; padding-bottom: 0; }

.iletisim-satir__ikon {
  width: 18px; height: 18px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.iletisim-satir__ikon svg { width: 100%; height: 100%; }

@media (max-width: 768px) {
  .iletisim-duzen {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ---------------------------------------------------------------------
   14. FORMLAR
   --------------------------------------------------------------------- */

.alan { margin-bottom: var(--sp-5); }

.alan__etiket {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.girdi {
  width: 100%;
  padding: var(--sp-3);
  min-height: 44px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--t-fast);
}

.girdi:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.girdi::placeholder { color: var(--text-faint); }

textarea.girdi { min-height: 140px; resize: vertical; line-height: var(--lh-base); }

.girdi--hata {
  border-color: var(--danger);
}

.alan__hata {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--danger);
  margin-top: var(--sp-2);
}

.alan__ipucu {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

/* ---------------------------------------------------------------------
   14b. ARAMA
   --------------------------------------------------------------------- */

.arama-kutu {
  display: flex;
  gap: var(--sp-2);
  position: relative;
}

.arama-kutu .girdi { padding-inline-start: 40px; }

.arama-kutu__ikon {
  position: absolute;
  inset-inline-start: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-faint);
  pointer-events: none;
}

/* Yazdıkça arama: sağ uçta dönen küçük halka. Yalnızca istek
   sürerken görünür — boştayken yer kaplamaz, dikkat dağıtmaz. */
.arama-kutu__durum {
  position: absolute;
  inset-inline-end: var(--sp-3);
  top: 50%;
  width: 15px; height: 15px;
  margin-top: -8px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}

.arama-kutu__durum--calisiyor {
  opacity: 1;
  animation: arama-doner .7s linear infinite;
}

@keyframes arama-doner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .arama-kutu__durum--calisiyor { animation: none; }
}

.arama-sonuc {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.arama-sonuc:hover { color: inherit; }
.arama-sonuc:hover .arama-sonuc__baslik { color: var(--accent-text); }

.arama-sonuc__tur { flex-shrink: 0; align-self: flex-start; margin-top: 3px; }
.arama-sonuc__govde { flex: 1; min-width: 0; }

/* Blok, flex DEĞİL: flex kabında her metin parçası ayrı bir öğe olur ve
   aralarına `gap` girer — <mark> ile vurgulanan kelime cümleden kopuyordu.
   Kilit ikonu satır içi durduğu için hizalamaya da gerek kalmıyor. */
.arama-sonuc__baslik {
  display: block;
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

.arama-sonuc__baslik .dosya__kilit {
  display: inline-block;
  vertical-align: -2px;
  margin-inline-start: var(--sp-2);
}

.arama-sonuc__ust {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.arama-sonuc__ozet {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-2);
  line-height: var(--lh-base);
}

mark {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 2px;
  /* DİKKAT: yatay `padding` VERİLMEZ. Dolgu, vurgunun hemen ardından
     gelen harfleri iterek "Rok eti" gibi kopuk bir görüntü yaratıyordu.
     Aynı nefesi düzeni bozmayan yatay kutu gölgesiyle alıyoruz. */
  padding: 0;
  box-shadow: 2px 0 0 var(--accent-soft), -2px 0 0 var(--accent-soft);
  /* Vurgu satır sonunda bölünürse iki parça da aynı görünsün */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Üst menüdeki arama bağlantısı */
.menu__ara {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--text-muted);
  border-radius: var(--r-md);
}

.menu__ara:hover { background: var(--bg-hover); color: var(--text); }
.menu__ara svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------
   15. BİLDİRİMLER
   --------------------------------------------------------------------- */

.bildirim {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.bildirim svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

.bildirim--basari { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.bildirim--hata   { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.bildirim--uyari  { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.bildirim--bilgi  { background: var(--bg-subtle);    border-color: var(--border);  color: var(--text-muted); }

/* ---------------------------------------------------------------------
   16. MODAL — şifre girişi
   --------------------------------------------------------------------- */

.ortu {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  z-index: 50;
}

.ortu[hidden] { display: none; }

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  width: 100%;
  max-width: 440px;
  padding: var(--sp-6);
  position: relative;
}

.modal__kapat {
  position: absolute;
  top: var(--sp-3); inset-inline-end: var(--sp-3);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--text-faint);
  border-radius: var(--r-md);
  cursor: pointer;
}

.modal__kapat:hover { background: var(--bg-hover); color: var(--text); }

.modal__ikon {
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--lock-soft);
  color: var(--lock);
}

.modal__ikon svg { width: 24px; height: 24px; }

.modal__baslik {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  text-align: center;
}

.modal__aciklama {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.modal__dosya {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

.modal__dipnot {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.modal__dipnot svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* Şifre alanı — göz ikonu içinde */
.sifre-alan { position: relative; }

.sifre-alan .girdi { padding-inline-end: 44px; }

.sifre-goz {
  position: absolute;
  inset-inline-end: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: none;
  color: var(--text-faint);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.sifre-goz:hover { color: var(--text); }
.sifre-goz svg { width: 16px; height: 16px; }

/* İkon duruma göre değişir: şifre gizliyken "göster" (açık göz),
   görünürken "gizle" (üstü çizili göz). Tek ikon kaldığında düğmeye
   basmak hiçbir şey yapmıyormuş gibi görünüyordu. */
.sifre-goz__kapali { display: none; }
.sifre-goz--gosteriliyor .sifre-goz__acik   { display: none; }
.sifre-goz--gosteriliyor .sifre-goz__kapali { display: block; }
.sifre-goz--gosteriliyor { color: var(--accent); }

/* E-posta bağlantısı: tıklayınca panoya kopyalanır (eposta.js).
   İmleç kopyalanabilir olduğunu belli etsin, onay kısa süre yeşil kalsın. */
a[href^="mailto:"] { cursor: copy; }

.eposta--kopyalandi {
  color: var(--success) !important;
  font-weight: var(--fw-medium);
}

/* ---------------------------------------------------------------------
   16b. GÖRSEL BÜYÜTECİ

   Tıklanabilir görseller <button> içine alınır; düğme görünmez kalmalı,
   yalnızca imleç ve hafif bir yakınlaşma tıklanabilirliği belli etsin.
   --------------------------------------------------------------------- */

.buyut {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
  border-radius: inherit;
  overflow: hidden;
}

.buyut img {
  display: block;
  width: 100%;
  transition: transform var(--t-base);
}

.buyut:hover img { transform: scale(1.02); }

/* Profil fotoğrafı yuvarlak ve sabit ölçüde — düğme onu sarmalı, germemeli */
.buyut--yuvarlak {
  width: auto;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.buyut--yuvarlak img { width: auto; }

.buyut:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Metnin içindeki görseller tıklanınca TEK BAŞINA büyür (buyutec.js
   bunları kendiliğinden bulur). İmleç bunu belli etmeli. */
.buyutulebilir { cursor: zoom-in; }

/* ---------------------------------------------------------------------
   PROJE EKİBİ

   Orta yol: kart düzeni 20 kişide sayfayı şişiriyordu, tek satıra sıkışık
   hâli ise okunamayacak kadar yoğundu. Şimdi ad ile görev alt alta ama
   çerçeve ince, dolgu dar ve baş harf dairesi yok. 20 kişi geniş ekranda
   üç sütunda ~7 satır tutuyor.

   Fotoğraf tutulmuyor — kimsenin görselini barındırma sorumluluğu
   doğmasın ve liste sade kalsın diye.
   --------------------------------------------------------------------- */

.ekip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
}

.ekip__kisi {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  line-height: var(--lh-snug);
  min-width: 0;
}

.ekip__ad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.ekip__ad { color: var(--accent-text); }
a.ekip__ad:hover { text-decoration: underline; }

a.ekip__ad svg {
  width: 11px; height: 11px;
  flex-shrink: 0;
  opacity: .55;
}

.ekip__gorev {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 1px;
  overflow-wrap: anywhere;
}

/* --- Tam ekran pencere --- */

.buyutec {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  background: transparent;
  overflow: hidden;
}

.buyutec::backdrop {
  background: rgb(0 0 0 / .88);
  backdrop-filter: blur(2px);
}

.buyutec__ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  width: 100%;
  height: 100%;
  padding: var(--sp-12) var(--sp-5);
  cursor: zoom-out;
}

/* Görsel kendi doğal boyutundan büyütülmez — bulanıklaşmasın */
.buyutec__gorsel {
  max-width: min(100%, 1400px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  cursor: default;
  transition: opacity var(--t-fast);
}

.buyutec__gorsel--yukleniyor { opacity: .35; }

.buyutec__yazi {
  color: #fff;
  font-size: var(--fs-sm);
  text-align: center;
  max-width: var(--w-text);
  cursor: default;
}

.buyutec__yazi[hidden] { display: none; }

.buyutec__kapat,
.buyutec__ok {
  position: fixed;
  display: grid;
  place-items: center;
  border: 0;
  background: rgb(255 255 255 / .12);
  color: #fff;
  cursor: pointer;
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}

.buyutec__kapat:hover,
.buyutec__ok:hover { background: rgb(255 255 255 / .28); }

.buyutec__kapat:focus-visible,
.buyutec__ok:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.buyutec__kapat {
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  width: 44px; height: 44px;
  font-size: 26px;
  line-height: 1;
}

.buyutec__ok {
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
}

.buyutec__ok svg { width: 24px; height: 24px; }
.buyutec__ok--geri  { inset-inline-start: var(--sp-4); }
.buyutec__ok--ileri { inset-inline-end: var(--sp-4); }
.buyutec__ok[hidden] { display: none; }

.buyutec__sayac {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline: 0;
  text-align: center;
  color: rgb(255 255 255 / .75);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.buyutec__sayac[hidden] { display: none; }

/* Pencere açıkken arka sayfa kaymasın */
body.buyutec-acik { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .buyut:hover img { transform: none; }
}

@media (max-width: 640px) {
  .buyutec__ic { padding: var(--sp-10) var(--sp-3); }
  .buyutec__gorsel { max-height: 70vh; }

  /* Dar ekranda oklar görselin üstünü kapatmasın — alta iner */
  .buyutec__ok {
    inset-block-start: auto;
    inset-block-end: var(--sp-12);
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   17. YARDIMCI SINIFLAR
   --------------------------------------------------------------------- */

.gri     { color: var(--text-muted); }
.kucuk   { font-size: var(--fs-sm); }
.minik   { font-size: var(--fs-xs); }
.kalin   { font-weight: var(--fw-semi); }
.orta    { text-align: center; }
.satir   { display: flex; align-items: center; gap: var(--sp-3); }
.satir--dagit { justify-content: space-between; }
.sarmal  { flex-wrap: wrap; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

.bos-durum {
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   18. MOBİL — DESIGN.md'deki üç kalıp
   --------------------------------------------------------------------- */

@media (max-width: 640px) {

  /* 1. Menü isim altına iner — hamburger yok */
  .ust-cubuk__ic {
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    row-gap: var(--sp-2);
  }

  .marka { order: 1; }
  .ust-cubuk__araclar { order: 2; margin-inline-start: auto; }

  .menu {
    order: 3;
    width: 100%;
    gap: var(--sp-5);
    padding-top: var(--sp-1);
  }

  /* 2. Dosya satırı iki satıra bölünür */
  .dosya {
    flex-wrap: wrap;
    row-gap: var(--sp-1);
    padding-block: var(--sp-3);
  }

  .dosya__ad { flex-basis: calc(100% - 28px); }

  .dosya__bilgi {
    flex: 1;
    padding-inline-start: 28px;
  }

  /* Dar ekranda yana yaslanmış görsel metni sıkıştırır — tam genişliğe al */
  .metin img[style*="float"] {
    float: none !important;
    width: 100% !important;
    margin: var(--sp-4) 0 !important;
  }

  /* 3. Dokunma hedefleri büyür, girintiler daralır */
  .klasor__icerik { padding-inline: var(--sp-3) var(--sp-3); }
  .belge__dosyalar,
  .belge__ozet { padding-inline-start: 0; }

  .icerik { padding-block: var(--sp-8) var(--sp-12); }

  /* Mobilde tipografi bir kademe daha küçülür — dar ekranda
     masaüstü ölçeği iri durur ve satır başına düşen kelime azalır. */
  body { font-size: 0.875rem; line-height: 1.6; }   /* 14px */

  .profil__ad     { font-size: 1.375rem; }          /* 22px */
  h1              { font-size: 1.3125rem; }         /* 21px */
  h2              { font-size: 1.125rem; }          /* 18px */
  h3, .olay__baslik { font-size: 1.0625rem; }       /* 17px */
  .profil__unvan  { font-size: var(--fs-base); }

  .dosya__ad, .dosya__bilgi, .belge__ozet { font-size: 0.8125rem; }

  .profil { gap: var(--sp-4); }
  .profil__foto { width: 80px; height: 80px; }

  .cizelge { padding-inline-start: var(--sp-8); }
  .olay::before { inset-inline-start: calc(var(--sp-8) * -1 + 4px); }

  .alt-bilgi__ic {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }

  .izgara { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Proje kartı telefonda yatay: solda küçük 3:4 kapak, sağda metin.
     Tam genişlik dikey kapak her kartı ekran boyu bir görsele çeviriyor,
     yatay çekilmiş kapakları da anlamsızca kırpıyordu. */
  .kart--kapakli {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-4);
  }

  .kart--kapakli .kapak {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
  }

  .kart--kapakli .kart__govde { padding: 0; }

  .kart__ozet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .izgara { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   19. YAZDIRMA
   --------------------------------------------------------------------- */

@media print {
  .ust-cubuk, .alt-bilgi, .tema-dugme, .dugme, .ikon-dugme { display: none; }
  body { color: #000; background: #fff; }
  .kap { max-width: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}

/* ---------------------------------------------------------------------
   Arşiv ağacındaki videolar
   --------------------------------------------------------------------- */

.video-satir {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.video-satir:last-child { border-bottom: 0; }

/* Kapak + oynat düğmesi — tıklanınca yerine iframe geçer */
.video-ac {
  position: relative;
  flex: 0 0 auto;
  width: 128px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-subtle);
  cursor: pointer;
  line-height: 0;
}

.video-satir__kapak {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.video-satir__oynat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  transition: background var(--t-fast);
}

.video-ac:hover .video-satir__oynat { background: rgba(0, 0, 0, .12); }
.video-satir__oynat svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

.video-satir__govde { flex: 1; min-width: 0; }
.video-satir__ad { display: block; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.video-satir__not { display: block; font-size: var(--fs-sm); color: var(--text-muted); }

.video-satir__kaynak {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Kapağın yerine geçen oynatıcı */
.video-cerceve {
  flex: 0 0 auto;
  width: min(480px, 100%);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #000;
}

@media (max-width: 600px) {
  .video-satir { flex-wrap: wrap; }
  .video-ac { width: 100%; }
  .video-cerceve { width: 100%; }
}