/* ==========================================================================
   DersTeders TASARIM SİSTEMİ (ana sayfa ve modül sayfaları ortak)
   ----------------------------------------------------------------------
   Renkler mevcut token'lardır; koyu tema değerleri ürün paletidir, açık tema
   aynı bileşenlerin açık karşılığıdır. Yeni palet üretilmez.
   Bileşen öneki: ds-. Yükleme: ana sayfa ve modül sayfaları, mevcut
   stil dosyalarından SONRA.
   ========================================================================== */

/* ---------- 1) TOKEN'LAR ---------- */
:root {
  /* Koyu (varsayılan ürün paleti) */
  --ds-zemin: #0B1B20;          /* sayfa zemini */
  --ds-bolum-2: #122B34;        /* alternatif bölüm */
  --ds-hero: #0A3D4A;           /* hero / son CTA bandı (mevcut --band) */
  --ds-son: #0A3D4A;
  --ds-kart: #10262E;           /* kart zemini */
  --ds-metin: #EAF3F5;          /* ana metin */
  --ds-metin-2: #D3E3E7;        /* ikincil */
  --ds-metin-3: #A9C2C9;        /* yardımcı */
  --ds-metin-sonuk: #8FB0B8;    /* sönük: yalnız büyük metin (AA için) */
  --ds-vurgu: #3FB7CC;          /* vurgu */
  --ds-vurgu-acik: #6FD3E4;     /* açık vurgu */
  --ds-kenar: #22404A;          /* kenarlık */
  --ds-cta: #F5C542;            /* birincil CTA zemini */
  --ds-cta-metin: #0A3D4A;      /* birincil CTA metni */
  --ds-ikincil-kenar: rgba(94, 203, 222, 0.5);
  --ds-odak: #EAF3F5;           /* odak halkası */
  --ds-gölge: 0 24px 50px -32px rgba(0, 0, 0, 0.7);
  --ds-uyari-zemin: rgba(197, 146, 62, 0.10);
  --ds-uyari-kenar: rgba(197, 146, 62, 0.45);

  --ds-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ds-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ds-kapsayici: 1160px;
  --ds-bolum-bosluk: 96px;
  --ds-kenar-bosluk: 16px;      /* mobilde yan boşluk */
  --ds-kose: 16px;              /* kart köşesi */
  --ds-kose-cta: 12px;          /* buton köşesi */
  --ds-hareket: 0.2s ease;
}

[data-theme="light"] {
  /* Açık tema: aynı bileşenlerin açık karşılığı (mevcut açık token'lar) */
  --ds-zemin: #FBF9F4;
  --ds-bolum-2: #F4F0E8;
  --ds-hero: #0A3D4A;
  --ds-son: #0A3D4A;
  --ds-kart: #FFFFFF;
  --ds-metin: #12333D;
  --ds-metin-2: #1B4B5A;
  --ds-metin-3: #3D6672;
  --ds-metin-sonuk: #4F6B75;
  --ds-vurgu: #0F6B7C;
  --ds-vurgu-acik: #0A5463;
  --ds-kenar: #E2DBCB;
  --ds-ikincil-kenar: rgba(15, 107, 124, 0.45);
  --ds-odak: #0A3D4A;
  --ds-gölge: 0 24px 50px -32px rgba(10, 60, 72, 0.38);
  --ds-uyari-zemin: rgba(197, 146, 62, 0.10);
}

/* ---------- 2) TEMEL ---------- */
.ds-kapsayici {
  max-width: var(--ds-kapsayici);
  margin: 0 auto;
  padding: 0 24px;
}
.ds-bolum {
  padding: var(--ds-bolum-bosluk) 0;
  background: var(--ds-zemin);
  color: var(--ds-metin);
  font-family: var(--ds-sans);
  font-size: 16px;
  line-height: 1.6;
}
.ds-bolum--alt { background: var(--ds-bolum-2); }
.ds-bolum--son { background: var(--ds-son); }

:focus-visible {
  outline: 3px solid var(--ds-odak);
  outline-offset: 2px;
}

/* ---------- 3) NUMARALI EYEBROW + BAŞLIK ---------- */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-metin-3);
}
.ds-no {
  font-variant-numeric: tabular-nums;
  color: var(--ds-vurgu-acik);
  letter-spacing: 0.08em;
}
[data-theme="light"] .ds-no { color: var(--ds-vurgu); }

.ds-h1,
.ds-h2 {
  font-family: var(--ds-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ds-metin);
  text-wrap: balance;
}
.ds-h1 {
  font-size: clamp(3.4rem, 6.2vw, 5.6rem);   /* 88–90 px masaüstü */
  line-height: 0.98;
}
.ds-h2 {
  font-size: clamp(2.3rem, 4.2vw, 3rem);     /* 48 px masaüstü */
  line-height: 1.08;
  margin: 0 0 12px;
}
.ds-lead {
  margin: 0;
  max-width: 62ch;
  color: var(--ds-metin-2);
  font-size: 1.05rem;
}
.ds-bolum-bas {
  display: grid;
  gap: 12px;
  margin-bottom: 44px;
}

/* ---------- 4) BUTONLAR ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--ds-kose-cta);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ds-hareket), filter var(--ds-hareket), background var(--ds-hareket);
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn--birincil {
  background: var(--ds-cta);
  color: var(--ds-cta-metin);
  border: 0;
}
.ds-btn--birincil:hover { filter: brightness(1.04); }
.ds-btn--ikincil {
  background: transparent;
  color: var(--ds-vurgu-acik);
  border: 1px solid var(--ds-ikincil-kenar);
}
[data-theme="light"] .ds-btn--ikincil { color: var(--ds-vurgu); }
.ds-btn--ikincil:hover { border-color: var(--ds-vurgu-acik); }

/* ---------- 5) KARTLAR ---------- */
.ds-kart {
  background: var(--ds-kart);
  border: 1px solid var(--ds-kenar);
  border-radius: var(--ds-kose);
  padding: 26px;
  box-shadow: var(--ds-gölge);
  color: var(--ds-metin);
  min-width: 0;
}
.ds-kart--tikla {
  display: block;
  text-decoration: none;
  transition: transform var(--ds-hareket), border-color var(--ds-hareket);
}
.ds-kart--tikla:hover { transform: translateY(-2px); border-color: var(--ds-vurgu); }

/* Seviye etiketi (ör. "10. sınıf") */
.ds-seviye {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(63, 183, 204, 0.14);
  color: var(--ds-vurgu-acik);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
[data-theme="light"] .ds-seviye { color: var(--ds-vurgu-acik); background: rgba(15, 107, 124, 0.09); }

/* Meta satırı: seviye · tür · sayı */
.ds-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.86rem;
  color: var(--ds-metin-3);
}
.ds-meta > span + span::before {
  content: '·';
  margin-right: 12px;
  color: var(--ds-metin-sonuk);
}

/* İlerleme çubuğu (role="progressbar" ile birlikte kullanılır) */
.ds-ilerleme {
  height: 8px;
  border-radius: 999px;
  background: var(--ds-kenar);
  overflow: hidden;
}
.ds-ilerleme > i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--ds-vurgu);
  border-radius: inherit;
  transition: width 0.3s ease;
}

/* ---------- 6) ÇİP / FİLTRE ---------- */
.ds-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
}
.ds-cip {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ds-kenar);
  background: transparent;
  color: var(--ds-metin-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--ds-hareket), background var(--ds-hareket), color var(--ds-hareket);
}
.ds-cip:hover { border-color: var(--ds-vurgu-acik); }
.ds-cip[aria-pressed="true"] {
  background: var(--ds-vurgu);
  border-color: var(--ds-vurgu);
  color: #0A3D4A;
}
[data-theme="light"] .ds-cip[aria-pressed="true"] { color: #FFFFFF; }
.ds-cip-sayi {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* ---------- 7) ADIM KARTLARI (ekran görüntülü) ---------- */
.ds-adimlar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ds-adim {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ds-kart);
  border: 1px solid var(--ds-kenar);
  border-radius: var(--ds-kose);
  overflow: hidden;
  box-shadow: var(--ds-gölge);
}
.ds-adim-gorsel {
  margin: 0;
  aspect-ratio: 16 / 10;
  background: #06141A;
  border-bottom: 1px solid var(--ds-kenar);
  overflow: hidden;
}
.ds-adim-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}
.ds-adim-govde {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}
.ds-adim-no {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ds-vurgu-acik);
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .ds-adim-no { color: var(--ds-vurgu); }
.ds-adim h3 {
  margin: 0;
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ds-metin);
}
.ds-adim p {
  margin: 0;
  color: var(--ds-metin-2);
  font-size: 0.95rem;
}

/* ---------- 8) SAYI ŞERİTİ (referans kutusu) ---------- */
.ds-sayi-serit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1px;
  background: var(--ds-kenar);
  border: 1px solid var(--ds-kenar);
  border-radius: var(--ds-kose);
  overflow: hidden;
  box-shadow: var(--ds-gölge);
}
.ds-sayi {
  padding: 22px 24px;
  background: var(--ds-kart);
  min-width: 0;
}
.ds-sayi b {
  display: block;
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  line-height: 1.1;
  color: var(--ds-metin);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds-sayi span {
  display: block;
  font-size: 0.9rem;
  color: var(--ds-metin-3);
}

/* ---------- 9) RİSK / UYARI (bölüm gövdesinde) ---------- */
.ds-uyari {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--ds-uyari-kenar);
  background: var(--ds-uyari-zemin);
  color: var(--ds-metin-2);
  font-size: 0.95rem;
}
.ds-uyari b { color: var(--ds-metin); }
.ds-uyari-ikon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ds-cta);
  color: var(--ds-cta-metin);
  font-weight: 800;
  font-size: 0.9rem;
}

/* ---------- 10) ÖNİZLEME DİYALOĞU (sayfayı açmadan) ---------- */
dialog.ds-onizleme {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--ds-kenar);
  border-radius: var(--ds-kose);
  background: var(--ds-kart);
  color: var(--ds-metin);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  overflow: auto;
}
dialog.ds-onizleme::backdrop { background: rgba(3, 12, 15, 0.72); }
.ds-onizleme-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-kenar);
}
.ds-onizleme-ust h3 {
  margin: 0;
  font-family: var(--ds-serif);
  font-weight: 400;
  font-size: 1.6rem;
}
.ds-onizleme-kapat {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ds-kenar);
  background: transparent;
  color: var(--ds-metin);
  font-size: 1.2rem;
  cursor: pointer;
}
.ds-onizleme-gorsel { margin: 0; aspect-ratio: 16 / 10; background: #06141A; }
.ds-onizleme-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.ds-onizleme-govde { display: grid; gap: 16px; padding: 18px 20px 22px; }
.ds-onizleme-govde p { margin: 0; color: var(--ds-metin-2); }
.ds-onizleme-eylem { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 11) YASAL (footer, kısa) ---------- */
.ds-yasal {
  margin: 0;
  max-width: 80ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ds-metin-3);
}

/* ---------- 12) DUYARLI ---------- */
@media (max-width: 1024px) {
  .ds-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ds-kapsayici { padding: 0 var(--ds-kenar-bosluk); }
  .ds-sayi-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-sayi { padding: 18px 16px; }
  .ds-sayi b { font-size: 1.6rem; }
  .ds-sayi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --ds-bolum-bosluk: 64px; }
  .ds-bolum { padding: var(--ds-bolum-bosluk) 0; }
  .ds-h2 { font-size: clamp(2.1rem, 9vw, 2.5rem); }
  .ds-h1 { font-size: clamp(2.8rem, 13vw, 3.8rem); }
  .ds-adimlar { grid-template-columns: 1fr; }
  .ds-kart { padding: 20px; }
  .ds-btn { width: 100%; }
  .ds-btn.ds-btn--satir { width: auto; }
  .ds-filtre { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .ds-cip { flex: 0 0 auto; }
}

/* ---------- 13) HAREKET TERCİHİ ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-btn,
  .ds-kart--tikla,
  .ds-cip,
  .ds-ilerleme > i {
    transition: none !important;
  }
  .ds-btn:hover,
  .ds-kart--tikla:hover { transform: none; }
}

/* Filtrelenmiş kartlar: bileşen display kuralları [hidden]'ı ezmesin */
[data-grup][hidden] { display: none !important; }

/* Site altbilgisi (açık tema): şeffaf koyu zemin açık sayfada gri kalmasın; opak koyu zemin, AA metin. */
html:not([data-theme="dark"]) .site-footer { background: #0B1B20 !important; }
html:not([data-theme="dark"]) .site-footer,
html:not([data-theme="dark"]) .site-footer a { color: #D3E3E7 !important; }

/* Adım görüntüleri: tarayıcı çerçevesi (üst şerit) ve kart etkileşimi */
.ds-adim-gorsel {
  position: relative;
  padding-top: 22px;
  background: #0A1A20;
}
.ds-adim-gorsel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  background: linear-gradient(180deg, #1B3A44 0%, #132C34 100%);
  border-bottom: 1px solid rgba(111, 211, 228, 0.12);
}
.ds-adim-gorsel::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3A5F69;
  box-shadow: 12px 0 0 #3A5F69, 24px 0 0 #3A5F69;
}
.ds-adim-gorsel img {
  height: 100%;
}
.ds-adim {
  transition: transform var(--ds-hareket), border-color var(--ds-hareket);
}
.ds-adim:hover {
  transform: translateY(-3px);
  border-color: var(--ds-vurgu);
}
@media (prefers-reduced-motion: reduce) {
  .ds-adim { transition: none; }
  .ds-adim:hover { transform: none; }
}

/* ---------- 14) PROFESYONEL CİLA: kanıt satırı, güven şeridi, yardımcılar ---------- */
/* CTA altındaki tek satırlık koşul: hesap ve kurulum durumu, kaydırmadan okunur */
.ds-hero-kanit {
  margin: 16px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ds-metin-3);
}

/* Ana sayfa hero'su her temada koyu zeminli: metin renkleri temaya bağlı tokenlardan değil, sabit açık tondan gelir.
   Açık temada .ds-h1 koyu metin olup koyu zeminde kayboluyordu. */
.sd-hero .ds-h1 { color: #fff; }
.sd-hero .ds-eyebrow { color: #A9C2C9; }
.sd-hero .ds-no { color: #6FD3E4; }
.sd-hero .ds-hero-kanit { color: #A9C2C9; }

/* Güven şeridi: üç bağımsız kanıt; hero'daki sayılar burada tekrar edilmez */
.ds-kanit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ds-kanit li {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 26px;
  background: var(--ds-kart);
  border: 1px solid var(--ds-kenar);
  border-radius: var(--ds-kose);
  box-shadow: var(--ds-gölge);
}
.ds-kanit-ikon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(63, 183, 204, 0.14);
  color: var(--ds-vurgu-acik);
}
[data-theme="light"] .ds-kanit-ikon {
  background: rgba(15, 107, 124, 0.09);
  color: var(--ds-vurgu);
}
.ds-kanit-ikon svg { width: 22px; height: 22px; }
.ds-kanit h3 {
  margin: 4px 0 0;
  font-family: var(--ds-sans);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ds-metin);
}
.ds-kanit p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ds-metin-2);
}
@media (max-width: 768px) {
  .ds-kanit { grid-template-columns: 1fr; }
  .ds-kanit li { padding: 20px; }
}

/* İç sayfa girişinde kırıntı ve satır içi bağlantı (açık ve koyu temada okunur) */
.ds-kirinti { margin-top: 18px; font-size: 0.9rem; color: var(--ds-metin-3); }
.ds-kirinti a { color: var(--ds-vurgu); text-decoration: none; font-weight: 600; }
.ds-kirinti .sep { margin: 0 6px; opacity: 0.6; }
.ds-hero-link { margin-top: 20px; font-size: 0.95rem; }
.ds-satir-link { color: var(--ds-vurgu); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Yardımcılar: satır içi stil yerine sınıf */
.ds-ortala { justify-content: center; text-align: center; }
.ds-ortala-bosluk { text-align: center; margin-top: 16px; }

/* ---------- 15) İÇ SAYFA GİRİŞİ: ana sayfayla aynı ritim (kicker, serif başlık, giriş, eylemler) ---------- */
.ds-sayfa-bas {
  padding: 72px 0 48px;
  background: var(--ds-zemin);
  color: var(--ds-metin);
  font-family: var(--ds-sans);
  border-bottom: 1px solid var(--ds-kenar);
}
.ds-sayfa-bas .ds-h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
}
.ds-sayfa-bas .ds-lead { margin-top: 18px; }
/* Sayfa sonu çağrı bloğu: aynı kart dili, daha az boşluk */
.ds-sayfa-bas--kompakt { padding: 56px 0 48px; border-top: 1px solid var(--ds-kenar); border-bottom: 0; }
.ds-sayfa-bas--kompakt .ds-h2 { margin: 0 0 12px; }
@media (max-width: 640px) {
  .ds-sayfa-bas--kompakt { padding: 40px 0 32px; }
}
.ds-eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
@media (max-width: 640px) {
  .ds-sayfa-bas { padding: 48px 0 36px; }
  .ds-eylemler { flex-direction: column; }
  .ds-eylemler .ds-btn { width: 100%; }
  /* Dört bağlantılık eylem grubu telefonda 2 sütun: sayfa uzamaz, dokunma alanı 44 px kalır */
  .ds-eylemler--iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ds-eylemler--iki .ds-btn { padding: 12px 10px; font-size: 0.92rem; }
}
@media (min-width: 641px) {
  .ds-eylemler--iki .ds-btn { min-width: 0; }
}