/* GRABEN tasarım sistemi — palet: Deep Blue / Concerto / Glacial Salt / Ocean City.
   Veri-okuma odaklı: açık zemin, mavi mürekkep, tek sıcak vurgu (kiremit) yalnız
   negatif/anomali semantiği için. Hareket grameri: 2 easing, 3 süre, tek eksen (Y). */

:root {
  /* Tema paleti */
  --derin: #2A4D88;        /* Deep Blue — marka, bağlantı, birincil seri */
  --derin-koyu: #1E3A69;
  --gece: #16263F;         /* footer zemini */
  --okyanus: #7C94B8;      /* Ocean City — ikincil seri, rozetler */
  --buzul: #B1BBC8;        /* Glacial Salt — çizgi, sessiz seri */
  --konserto: #D9D9D8;     /* Concerto — bant zemini */
  --zemin: #F4F4F2;
  --kutu: #FCFCFB;
  --murekkep: #1C2A42;
  --soluk: #56677F;
  --cizgi: #C9D0DA;
  --cizgi-acik: #E1E5EA;
  --kiremit: #9C4A2F;      /* tek işlevsel sıcak vurgu: düşüş, anomali, çıkış */
  --kiremit-acik: rgba(156, 74, 47, .07);
  --derin-acik: rgba(42, 77, 136, .06);

  /* Hareket grameri */
  --gir: cubic-bezier(.16, 1, .3, 1);       /* girişler */
  --gec: cubic-bezier(.65, 0, .35, 1);      /* çıkış ve geçişler */
  --sure-mikro: 250ms;
  --sure-temel: 700ms;
  --sure-makro: 1300ms;

  --font-baslik: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-govde: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--murekkep); background: var(--zemin);
  font: 400 16px/1.65 var(--font-govde);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { max-width: 1080px; margin: 0 auto; padding: 0 20px 48px; }

a { color: var(--derin); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--derin-koyu); }
:focus-visible { outline: 2px solid var(--derin); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(124, 148, 184, .35); }

h1, h2, h3 { font-family: var(--font-baslik); color: var(--murekkep); }
h1 { font-size: 1.8rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
h2 { font-size: 1.35rem; font-weight: 600; margin-top: 2.4rem;
     border-bottom: 1px solid var(--cizgi); padding-bottom: .4rem; letter-spacing: -.005em; }
h3 { font-size: .95rem; margin: .2rem 0 .8rem; color: var(--soluk); font-weight: 600; }

.atla { position: absolute; left: -999px; top: 0; background: var(--derin); color: #fff;
  padding: 8px 14px; z-index: 99; border-radius: 0 0 6px 0; }
.atla:focus { left: 0; }

/* ---- Üst başlık ---- */
.ust {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center;
  padding: 12px 22px; border-bottom: 1px solid var(--cizgi-acik);
  background: color-mix(in srgb, var(--zemin) 85%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  view-transition-name: ust-baslik;
}
@supports not (background: color-mix(in srgb, #fff 85%, transparent)) {
  .ust { background: rgba(244, 244, 242, .92); }
}
.marka { display: flex; align-items: center; gap: 11px;
  font-family: var(--font-baslik); font-weight: 700; letter-spacing: .05em;
  text-decoration: none; color: var(--derin); font-size: 1.12rem; }
.marka-isaret { display: block; }
.marka-metin span { display: block; color: var(--soluk); font-family: var(--font-govde);
  font-weight: 400; font-size: .68rem; letter-spacing: .02em; margin-top: -2px; }
.ust nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ust nav a { position: relative; text-decoration: none; color: var(--murekkep); font-size: .92rem; }
.ust nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--derin); transform: scaleX(0); transform-origin: left;
  transition: transform var(--sure-mikro) var(--gir);
}
.ust nav a:hover { color: var(--derin); }
.ust nav a:hover::after { transform: scaleX(1); }

/* ---- Kahraman (ana sayfa) + graben kesiti ---- */
.kahraman {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(3rem, 7vh, 5.5rem) 0 0; overflow: clip;
  background: linear-gradient(180deg, var(--zemin) 0%, #EDEFEE 100%);
}
.kahraman-ic { max-width: 1080px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.ustyazi { color: var(--okyanus); font-family: var(--font-baslik); font-weight: 500;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.kahraman h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12;
  letter-spacing: -.025em; font-weight: 600; margin: 0 0 1.1rem; max-width: 24ch; }
.kahraman .giris { max-width: 58ch; color: var(--soluk); font-size: 1.02rem; margin: 0 0 2rem; }

.satir-sar { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.satir { display: block; }
html.js .kahraman .satir { transform: translateY(112%); animation: satir-gir .9s var(--gir) forwards; }
html.js .kahraman .satir-sar:nth-child(2) .satir { animation-delay: 90ms; }
@keyframes satir-gir { to { transform: translateY(0); } }

.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin: 0 0 clamp(2rem, 6vh, 4rem); }
.kart { background: var(--kutu); border: 1px solid var(--cizgi-acik); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(28, 42, 66, .04); }
.kart b { display: block; font-family: var(--font-baslik); font-weight: 600;
  font-size: 1.75rem; color: var(--derin); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.kart span { color: var(--soluk); font-size: .84rem; }

.graben-kesit { display: block; width: 100%; height: clamp(150px, 26vh, 280px); margin-top: -2rem; }
.graben-kesit .blok { will-change: transform; }
html.js .graben-kesit .katman { opacity: 0; transform: translateY(26px);
  animation: katman-gir var(--sure-makro) var(--gir) forwards; }
html.js .graben-kesit .omuz { animation-delay: 120ms; }
html.js .graben-kesit .blok { animation-delay: 300ms; }
html.js .graben-kesit .faylar { opacity: 0; animation: fay-gir var(--sure-temel) var(--gir) 700ms forwards; }
@keyframes katman-gir { to { opacity: 1; transform: translateY(0); } }
@keyframes fay-gir { to { opacity: 1; } }
.kesit-not { position: absolute; right: 22px; bottom: 10px; z-index: 2; color: #fff;
  opacity: .55; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---- Bölümler, ızgara, grafik kutuları ---- */
.izgara-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.izgara-2 > * { min-width: 0; }
@media (max-width: 760px) { .izgara-2 { grid-template-columns: 1fr; } }
.grafik-kutu { background: var(--kutu); border: 1px solid var(--cizgi-acik); border-radius: 10px;
  padding: 16px; margin-top: 1rem; box-shadow: 0 1px 2px rgba(28, 42, 66, .04); }

#harita { height: 460px; border: 1px solid var(--cizgi); border-radius: 10px; }
.maplibregl-popup-content { font-family: var(--font-govde); border-radius: 8px; }

/* ---- Tablolar ---- */
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.liste th, .liste td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi-acik); text-align: left; }
.liste thead th { font-family: var(--font-baslik); font-weight: 600; font-size: .8rem;
  letter-spacing: .03em; color: var(--soluk); background: var(--zemin);
  position: sticky; top: 70px; box-shadow: 0 1px 0 var(--cizgi); z-index: 5; }
.liste tbody tr:hover td { background: var(--derin-acik); }
th.s, td.s { text-align: right; font-variant-numeric: tabular-nums; }
.kimlik th { text-align: left; color: var(--soluk); font-weight: 600;
  padding: 6px 12px 6px 0; vertical-align: top; white-space: nowrap; }
.kimlik td { padding: 6px 0; }
/* veri/ sayfası: CSV önizleme tabloları — mavi tema başlık + indirme butonu */
.tablo-kaydir.kaydir-hep { overflow-x: auto; }  /* veri tabloları her genişlikte kayar */
.veri-tablo thead th { background: var(--derin); color: #fff; font-weight: 700;
  letter-spacing: .02em; box-shadow: none; white-space: nowrap; position: static; }
.veri-tablo td { white-space: nowrap; }
.veri-ust { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.indir-buton { display: inline-block; padding: 8px 18px; background: var(--derin);
  color: #fff; border-radius: 7px; text-decoration: none; font-weight: 600;
  font-size: .9rem; font-family: var(--font-baslik); }
.indir-buton:hover { background: var(--derin-koyu); color: #fff; }

/* clip kaydırma konteyneri oluşturmaz: geniş ekranda sticky thead çalışmayı sürdürür.
   Dar ekranda auto'ya döner; tablo yataya kayar (sticky o genişlikte devre dışı). */
.tablo-kaydir { overflow-x: clip; }
@media (max-width: 760px) {
  .tablo-kaydir { overflow-x: auto; }
  .tablo-kaydir .liste thead th { position: static; }
}

.filtre { display: flex; align-items: center; gap: 10px; margin: .8rem 0 1rem; }
.filtre input { flex: 1; max-width: 380px; padding: 9px 14px; font: inherit; font-size: .92rem;
  color: var(--murekkep); background: var(--kutu); border: 1px solid var(--cizgi);
  border-radius: 8px; transition: border-color var(--sure-mikro) var(--gir); }
.filtre input:focus { outline: none; border-color: var(--derin); box-shadow: 0 0 0 3px var(--derin-acik); }
.filtre .sonuc { color: var(--soluk); font-size: .84rem; font-variant-numeric: tabular-nums; }

/* ---- Rozet, not, izler ---- */
.rozet { font-size: .7rem; padding: 2px 9px; border-radius: 10px; margin-left: 6px;
  vertical-align: middle; background: rgba(124, 148, 184, .18); color: var(--derin); }
.rozet.gri { background: var(--konserto); color: var(--soluk); }
.not { color: var(--soluk); font-size: .85rem; }
.dipnot-liste { list-style: none; padding: 0; margin: .7rem 0 0; }
.dipnot-liste li { margin: .3rem 0; padding-left: 1.4rem; text-indent: -1.4rem; }
.dipnot-liste b { font-weight: 600; color: var(--murekkep); }
.iz { margin-top: 1.4rem; font-size: .88rem; color: var(--soluk); }
.iz a { color: var(--soluk); }
.hata-bildir { margin-top: 2.5rem; padding: 14px 16px; background: var(--kiremit-acik);
  border-left: 3px solid var(--kiremit); border-radius: 4px; }
.duz-metin { max-width: 74ch; }
.duz-metin ul { padding-left: 1.3rem; margin: .6rem 0 1.2rem; }
.duz-metin li { margin: .35rem 0; }
.duz-metin code { font-size: .88em; padding: 1px 5px; border-radius: 4px;
  background: rgba(124, 148, 184, .16); }

/* ---- Alt bilgi ---- */
.alt { border-top: 1px solid var(--cizgi); margin-top: 4rem;
  background: var(--gece); color: var(--buzul); }
.alt-ic { max-width: 1080px; margin: 0 auto; padding: 34px 20px 40px; }
.alt-marka { display: flex; align-items: center; gap: 11px;
  font-family: var(--font-baslik); font-weight: 700; letter-spacing: .05em;
  color: #fff; font-size: 1.05rem; margin: 0 0 .8rem; }
.alt-marka img { display: block; }
.alt p { max-width: 82ch; margin: .5rem 0; font-size: .84rem; line-height: 1.6; }
.alt a { color: #DCE3EC; }
.alt a:hover { color: #fff; }

/* ---- Rapor sayfası ---- */
.rapor-baslik { padding-top: 2.2rem; }
.rapor-baslik .ust-not { color: var(--okyanus); font-family: var(--font-baslik); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: .2rem; }
.rapor-baslik h1 { margin: .1rem 0 .4rem; font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -.015em; }
.rapor-baslik .alt-not { color: var(--soluk); font-size: .9rem; }
.ozet-kutu { background: var(--kutu); border: 1px solid var(--cizgi-acik);
  border-left: 4px solid var(--derin); border-radius: 10px; padding: 6px 22px 14px; margin-top: 1.5rem; }
.ozet-kutu h2 { border: none; margin-top: 1rem; }
.ozet-kutu li { margin: .5rem 0; }
.rapor p { max-width: 76ch; }
.lig td.cf-yuksek { color: var(--derin); font-weight: 600; }
.lig td.cf-dusuk { color: var(--kiremit); font-weight: 600; }
.lig td span[title] { cursor: help; color: var(--soluk); }

/* ---- Hareket: görünüme girişler ---- */
html.js .gir { opacity: 0; transform: translateY(18px);
  transition: opacity var(--sure-temel) var(--gir), transform var(--sure-temel) var(--gir); }
html.js .gir.goster { opacity: 1; transform: none; }
html.js .gir-maske { transform: none; clip-path: inset(0 0 100% 0);
  transition: opacity var(--sure-temel) var(--gir), clip-path var(--sure-temel) var(--gir); }
html.js .gir-maske.goster { clip-path: inset(-10% 0 -10% 0); }
html.js .gir-grup > * { opacity: 0; transform: translateY(16px);
  transition: opacity var(--sure-temel) var(--gir), transform var(--sure-temel) var(--gir); }
html.js .gir-grup.goster > * { opacity: 1; transform: none; }
html.js .gir-grup.goster > :nth-child(2) { transition-delay: 90ms; }
html.js .gir-grup.goster > :nth-child(3) { transition-delay: 180ms; }
html.js .gir-grup.goster > :nth-child(4) { transition-delay: 270ms; }
html.js .gir-grup.goster > :nth-child(5) { transition-delay: 360ms; }

/* ---- Sayfa geçişleri (View Transitions) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-cik 240ms var(--gec) both; }
::view-transition-new(root) { animation: vt-gir 460ms var(--gir) both; }
@keyframes vt-cik { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-gir { from { opacity: 0; transform: translateY(8px); } }

/* ---- Dar ekran ---- */
@media (max-width: 640px) {
  .ust { position: static; padding: 10px 16px; }
  .ust nav { gap: 10px 14px; }
  .ust nav a { font-size: .85rem; }
  .marka span { font-size: .62rem; }
  .liste thead th { top: 0; }
  h1 { font-size: 1.5rem; }
}

/* ---- Azaltılmış hareket: son kareler anında, kısa opaklık kalır ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .kahraman .satir { transform: none; animation: none; }
  html.js .graben-kesit .katman, html.js .graben-kesit .faylar { opacity: 1; transform: none; animation: none; }
  html.js .gir, html.js .gir-grup > * { transform: none;
    transition: opacity var(--sure-mikro) linear; }
  html.js .gir-maske { clip-path: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; }
}

/* ---- Baskı (rapor PDF'i buradan üretilir — bozma) ---- */
@media print {
  .ust nav, .hata-bildir, .atla, .filtre { display: none; }
  .ust { position: static; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html { font-size: 12px; }  /* rem tabanı — tüm ölçek baskıda birlikte küçülür */
  body { font: 400 1rem/1.45 var(--font-govde); background: #fff; }
  main { max-width: none; padding: 0 4mm; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.05rem; margin-top: 1.3rem; padding-bottom: .25rem; }
  h3 { font-size: .85rem; }
  .rapor p { max-width: none; }
  .rapor-baslik { padding-top: .4rem; }
  .ozet-kutu { padding: 2px 16px 8px; margin-top: .8rem; }
  .ozet-kutu li { margin: .25rem 0; }
  .grafik-kutu { padding: 8px; margin-top: .6rem; }
  .izgara-2 { gap: 10px; }
  .not { font-size: .78rem; }
  section { break-inside: auto; }
  .grafik-kutu, .ozet-kutu { break-inside: avoid; box-shadow: none; }
  .tablo-kaydir { overflow-x: visible; }
  table, .lig { break-inside: auto; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .liste thead th { position: static; box-shadow: none; }
  .lig th, .lig td { padding: 3px 6px; }
  a { color: var(--murekkep); text-decoration: none; }
  .alt { background: #fff; color: var(--soluk); }
  .alt-marka { color: var(--murekkep); }
  .alt a { color: var(--soluk); }
  /* Reveal durumları baskıda daima görünür */
  .gir, .gir-maske, .gir-grup > *, .satir, .graben-kesit .katman, .graben-kesit .faylar {
    opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important;
  }
}