/* =====================================================================
   Medasi — temel katman: tokenler, sıfırlama, tipografi, yerleşim ızgarası.

   Palet medasi.com.tr'nin bugünkü paletidir: lacivert zemin, tek vurgu
   olarak teal, yumuşak geçişlerde mint. Ölçek genişletildi (her renk için
   ara adımlar, koyu tema, anlamsal takma adlar) ama ton değişmedi.

   Fonlar Portal'ın kendi font ailesidir: Figtree (başlık/arayüz),
   Noto Sans (uzun metin), IBM Plex Mono (künye ve sayı). Hepsi kendi
   sunucumuzdan; CSP `font-src 'self'` ile uyumlu.
   ===================================================================== */

@font-face {
  font-family: 'Figtree';
  src: url('../font/figtree-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Medasi';
  src: url('../font/notosans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Medasi';
  src: url('../font/notosans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono Medasi';
  src: url('../font/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- */
/* Tokenler                                                          */
/* ---------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Lacivert — zemin ve koyu yüzeyler */
  --lacivert-950: #070d17;
  --lacivert-900: #0b1220;
  --lacivert-850: #0f1b2d;
  --lacivert-800: #102a43;
  --lacivert-700: #1c3a57;
  --lacivert-600: #2a4d6e;
  --lacivert-500: #3d6486;

  /* Teal — tek vurgu ekseni.
     `--teal-750` yalnız dolgulu vurgu düğmesi için var: beyaz yazı teal-700
     üzerinde 4,09:1 kalıyor ve AA eşiğini geçmiyordu; bu ton 5,7:1 veriyor. */
  --teal-800: #086b62;
  --teal-750: #0a7469;
  --teal-700: #0c8d80;
  --teal-600: #10b3a3;
  --teal-500: #2bc4b4;
  --teal-400: #4fd6c7;
  --teal-200: #a7ece2;
  --teal-100: #d6f4ef;

  /* Mint — yumuşak arka vurgu */
  --mint: #ddfbf3;
  --mint-soft: #effbf7;

  /* Nötr */
  --beyaz: #ffffff;
  --tuval: #f7fafc;
  --yuzey: #ffffff;
  --yuzey-sessiz: #eef5f6;
  --murekkep: #101828;
  --murekkep-yumusak: #1d2939;
  /* Metin tonları açık zeminde 4.5:1'in altına inmiyor: #8a96a3 künye ve
     ikincil satırlarda 2.87 kalıyordu. Sıralama korunuyor, tonlar koyulaştı. */
  --sessiz: #526078;
  --soluk: #667085;
  --cizgi: #e5e7eb;
  --cizgi-yumusak: #eef1f4;

  /* Durum — Portal'ın kontrast garantili durum renkleri.
     Parlak yeşil/amber (#16a34a, #f59e0b) rozet zemininde 2.9 ve 2.0
     kalıyordu; bu tonlar kendi yumuşak zeminlerinde 4.5'in üstünde. */
  --yayinda: #137a50;
  --beta: #955100;
  --yakinda: #4f46e5;
  --hata: #b9362b;

  /* Fonksiyon kimlikleri — Portal'ın canlı kodundaki fiil renkleri
     (p_section.dart). Her fiilin kendi zeminiyle kontrastı 4.5:1 üzerinde
     tutulacak şekilde seçilmiş; değiştirilmemeli.
     Sitede yalnız küçük yüzeylerde (rozet, ikon karosu, kimlik rayı)
     kullanılır; sayfa zemini hep lacivert/teal kalır. */
  --fiil-coz: #4164b7;
  --fiil-coz-yumusak: #e9eeff;
  --fiil-tekrar: #8d6621;
  --fiil-tekrar-yumusak: #fff0cf;
  --fiil-uret: #8358b4;
  --fiil-uret-yumusak: #f7eeff;
  --fiil-osce: #2b7a55;
  --fiil-osce-yumusak: #def5e9;
  --fiil-sozlu: #297689;
  --fiil-sozlu-yumusak: #ddf3f7;
  --fiil-sor: #6862b9;
  --fiil-sor-yumusak: #f1efff;
  --fiil-odak: #ab5339;
  --fiil-odak-yumusak: #ffeee8;
  --fiil-vaka: #357b32;
  --fiil-vaka-yumusak: #e3f5df;

  /* Disiplin kimlik izi — Portal'daki PDiscipline accent'leri. */
  --dal-tip: #2b6cb0;
  --dal-dis: #7a4fa3;
  --dal-veteriner: #2c7a62;
  --dal-hemsirelik: #a04a67;
  --dal-ftr: #8a641f;

  /* Anlamsal takma adlar — bileşenler doğrudan ham rengi kullanmaz. */
  --zemin: var(--tuval);
  --zemin-kart: var(--yuzey);
  --zemin-sessiz: var(--yuzey-sessiz);
  --metin: var(--murekkep);
  --metin-ikincil: var(--sessiz);
  --metin-ucuncul: var(--soluk);
  --kenar: var(--cizgi);
  --kenar-yumusak: var(--cizgi-yumusak);
  /* Metin ve bağlantı rengi olarak kullanıldığı için teal-700 değil teal-750:
     ilki açık zeminde 3.9:1 kalıyor. Parlak ton yalnız odak halkası, hover ve
     dekoratif yüzeylerde. */
  --vurgu: var(--teal-750);
  --vurgu-parlak: var(--teal-600);
  --vurgu-zemin: var(--teal-100);
  --ters-zemin: var(--lacivert-900);
  --ters-metin: #e8eef6;
  --ters-metin-ikincil: #9db0c6;
  --ters-kenar: rgba(255, 255, 255, 0.12);

  /* Tipografi */
  --f-baslik: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-metin: 'Noto Sans Medasi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'Plex Mono Medasi', ui-monospace, 'SF Mono', Menlo, monospace;

  --o-mikro: 0.75rem;
  --o-kucuk: 0.8125rem;
  --o-etiket: 0.875rem;
  --o-govde: 1.0625rem;
  --o-govde-buyuk: 1.1875rem;
  --o-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --o-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --o-h2: clamp(1.625rem, 1.35rem + 1.4vw, 2.375rem);
  --o-h1: clamp(2.125rem, 1.55rem + 2.9vw, 3.875rem);
  --o-dev: clamp(2.75rem, 1.8rem + 4.4vw, 5.25rem);

  --satir-siki: 1.08;
  --satir-baslik: 1.22;
  --satir-govde: 1.68;
  --aralik-siki: -0.028em;
  --aralik-dev: -0.038em;

  /* Boşluk */
  --b1: 0.25rem;
  --b2: 0.5rem;
  --b3: 0.75rem;
  --b4: 1rem;
  --b5: 1.5rem;
  --b6: 2rem;
  --b7: 2.75rem;
  --b8: 3.5rem;
  --b9: 5rem;
  --b-bolum: clamp(4rem, 8vw, 7.5rem);

  /* Yuvarlama — Portal'ın ölçeğiyle aynı (4/8/12/16/24 + hap).
     Ara değer (11, 13 gibi) kullanılmaz; hap yalnız gerçek çip ve rozette. */
  --y1: 4px;
  --y2: 8px;
  --y3: 12px;
  --y4: 16px;
  --y5: 24px;
  --y-hap: 999px;

  /* Gölge — lacivert tonlu, nötr gri değil */
  --g1: 0 1px 2px rgba(11, 18, 32, 0.06);
  --g2: 0 4px 14px rgba(11, 18, 32, 0.07);
  --g3: 0 14px 40px rgba(11, 18, 32, 0.09);
  --g4: 0 28px 70px rgba(11, 18, 32, 0.14);
  --g-odak: 0 0 0 3px rgba(16, 179, 163, 0.35);

  /* Hareket — ilk altı süre ve üç eğri Portal'ın p_motion.dart'ından birebir.
     Sahne/anlatım süreleri (--h-sahne, --h-cizim) yalnız tanıtım sitesine
     ait; uygulama içinde bu kadar uzun hareket yok. */
  --h-anlik: 100ms;
  --h-durum: 160ms;
  --h-acilim: 220ms;
  --h-rota: 240ms;
  --h-tabaka: 280ms;
  --h-faz: 330ms;
  --h-sahne: 620ms;
  --h-cizim: 1400ms;
  --e-giris: cubic-bezier(0.215, 0.61, 0.355, 1);
  --e-cikis: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --e-standart: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Yerleşim */
  --genislik: 1180px;
  --genislik-dar: 940px;
  --genislik-okuma: 720px;
  --oluk: clamp(20px, 5vw, 40px);
  --baslik-yuksekligi: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: var(--lacivert-950);
    --zemin-kart: #0d1626;
    --zemin-sessiz: #111d31;
    --metin: #e8eef6;
    --metin-ikincil: #9db0c6;
    --metin-ucuncul: #8496ae;

    /* Durum renkleri koyu temada ters yönde çalışır: rozet zemini koyulaşınca
       metnin açılması gerekiyor. Açık temadaki koyu tonlar burada okunmuyordu. */
    --yayinda: #66d39b;
    --beta: #f1b35b;
    --yakinda: #a5b4fc;
    --hata: #ff8d82;
    --kenar: rgba(255, 255, 255, 0.1);
    --kenar-yumusak: rgba(255, 255, 255, 0.06);
    --vurgu: var(--teal-500);
    --vurgu-parlak: var(--teal-400);
    --vurgu-zemin: rgba(16, 179, 163, 0.16);
    --ters-zemin: #060b14;
    --mint: rgba(16, 179, 163, 0.1);
    --mint-soft: rgba(16, 179, 163, 0.06);
    --g1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --g2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --g3: 0 14px 40px rgba(0, 0, 0, 0.5);
    --g4: 0 28px 70px rgba(0, 0, 0, 0.6);
  }
}

/* ---------------------------------------------------------------- */
/* Sıfırlama                                                         */
/* ---------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--baslik-yuksekligi) + 1.5rem);
}

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--f-metin);
  font-size: var(--o-govde);
  line-height: var(--satir-govde);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--vurgu-parlak);
  outline-offset: 3px;
  border-radius: var(--y1);
}

::selection {
  background: var(--teal-200);
  color: var(--lacivert-900);
}

hr {
  border: 0;
  border-top: 1px solid var(--kenar);
  margin-block: var(--b6);
}

/* ---------------------------------------------------------------- */
/* Tipografi                                                         */
/* ---------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-baslik);
  font-weight: 640;
  line-height: var(--satir-baslik);
  letter-spacing: var(--aralik-siki);
  text-wrap: balance;
  color: var(--metin);
}

h1 {
  font-size: var(--o-h1);
  line-height: var(--satir-siki);
  letter-spacing: var(--aralik-dev);
  font-weight: 680;
}
h2 {
  font-size: var(--o-h2);
}
h3 {
  font-size: var(--o-h3);
}
h4 {
  font-size: var(--o-h4);
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 660;
  color: var(--metin);
}

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

/* Sayılar hizalı dursun — puan, yüzde, tarih tablolarında kayma olmaz. */
.rakam,
table td,
time {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* Yerleşim ilkelleri                                                */
/* ---------------------------------------------------------------- */

.kap {
  width: min(100% - var(--oluk) * 2, var(--genislik));
  margin-inline: auto;
}

.kap--dar {
  width: min(100% - var(--oluk) * 2, var(--genislik-dar));
  margin-inline: auto;
}

.kap--okuma {
  width: min(100% - var(--oluk) * 2, var(--genislik-okuma));
  margin-inline: auto;
}

.bolum {
  padding-block: var(--b-bolum);
  position: relative;
}

.bolum--sik {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.bolum--sessiz {
  background: var(--zemin-sessiz);
}

.bolum--mint {
  background: linear-gradient(180deg, var(--mint-soft), transparent 70%);
}

.bolum--ters {
  background: var(--ters-zemin);
  color: var(--ters-metin);
}

.bolum--ters h1,
.bolum--ters h2,
.bolum--ters h3,
.bolum--ters h4 {
  color: var(--ters-metin);
}

.izgara {
  display: grid;
  gap: var(--b5);
}

.izgara--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.izgara--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.izgara--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .izgara--3,
  .izgara--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .izgara--2,
  .izgara--3,
  .izgara--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.yigin {
  display: flex;
  flex-direction: column;
  gap: var(--b4);
}

.satir {
  display: flex;
  align-items: center;
  gap: var(--b3);
  flex-wrap: wrap;
}

.gizli-gorsel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.atla {
  position: absolute;
  inset-inline-start: var(--b4);
  top: -100px;
  z-index: 100;
  background: var(--lacivert-900);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--y2);
  transition: top var(--h-rota) var(--e-giris);
}

.atla:focus {
  top: var(--b3);
}