/* =====================================================================
   Dijital Okul köprü sayfası — /dijital-okul/ · /en/digital-school/ · /de/digitale-schule/
   Tipografi: Cinzel (display) · Cormorant Garamond italic (editorial) · Inter (body)
   Renk: altın rgba(240,187,61) yalnız vurgu · teal rgba(90,182,183) yalnız aksan
   Akış: 4 adım yatay (≥900px), dar ekranda dikey — saf CSS, JS yok.
   ===================================================================== */
.ds { --ds-col: 1100px; --ds-hair: rgba(241, 240, 235, 0.12); --ds-gold: rgba(240, 187, 61, 1); --ds-teal: rgba(90, 182, 183, 1); }

.ds-section {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(56px, 8vh, 96px) clamp(1rem, 4vw, 2rem);
}
.ds-section > * { width: 100%; max-width: var(--ds-col); }
.ds-section--tint {
  background: rgba(13, 48, 94, 0.2);
  border-top: 1px solid rgba(90, 182, 183, 0.1);
  border-bottom: 1px solid rgba(90, 182, 183, 0.1);
}

.ds-eyebrow {
  margin: 0 0 0.75rem; font-family: var(--font-body); font-size: var(--fs-eyebrow, 0.78rem);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ds-teal);
}
.ds-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; }
.ds-h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.18; }
.ds-h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.ds-sub {
  margin: 1rem auto 0; max-width: 62ch; font-family: var(--font-editorial); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.45; color: var(--color-text-secondary, rgba(241, 240, 235, 0.82));
}

/* --- Hero --- */
.ds-hero { padding-top: clamp(84px, 14vh, 150px); position: relative; }
.ds-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 187, 61, 0.12), transparent 60%);
}

/* --- CTA'lar --- */
.ds-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; justify-content: center; align-items: center; margin-top: 2rem; }
.ds-btn {
  display: inline-block; padding: 0.9rem 1.6rem; border-radius: 999px; font-family: var(--font-body);
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.02em; text-decoration: none;
  transition: transform var(--duration-fast, 160ms) var(--ease-cinematic, ease), filter var(--duration-fast, 160ms);
}
.ds-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.ds-btn--primary { background: var(--ds-gold); color: #0b1220; }
.ds-btn--ghost { border: 1px solid rgba(240, 187, 61, 0.55); color: var(--ds-gold); }
.ds-link { color: var(--ds-teal); text-decoration: none; font-family: var(--font-body); font-weight: 500; }
.ds-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- b) 4 adım, yatay akış --- */
.ds-steps {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; text-align: left;
}
.ds-step {
  position: relative; padding: 1.4rem 1.3rem 1.2rem;
  border: 1px solid var(--ds-hair); border-radius: 18px; background: rgba(8, 16, 30, 0.5);
}
.ds-step__n { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--ds-gold); }
.ds-step__t { margin: 0.5rem 0 0.4rem; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.ds-step__d { margin: 0; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; color: var(--color-text-secondary, rgba(241, 240, 235, 0.82)); }
.ds-where { margin: 0.9rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; }
.ds-where__label { color: var(--color-text-tertiary, rgba(241, 240, 235, 0.55)); letter-spacing: 0.04em; }
.ds-tag {
  display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; font-family: var(--font-body);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.ds-tag--www { border: 1px solid rgba(90, 182, 183, 0.5); color: var(--ds-teal); }
.ds-tag--ds { border: 1px solid rgba(240, 187, 61, 0.55); color: var(--ds-gold); }
/* dikey akış oku (dar ekran) */
.ds-step:not(:last-child)::after {
  content: "↓"; position: absolute; left: 50%; bottom: -1.15rem; transform: translateX(-50%);
  color: var(--ds-gold); font-size: 1rem; line-height: 1;
}
@media (min-width: 900px) {
  .ds-steps { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .ds-step:not(:last-child)::after {
    content: "→"; left: auto; right: -1.25rem; bottom: auto; top: 50%; transform: translateY(-50%); font-size: 1.15rem;
  }
}

/* --- c) İçeride ne var --- */
.ds-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.2rem; text-align: left; }
@media (min-width: 640px) { .ds-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ds-grid { grid-template-columns: repeat(3, 1fr); } }
.ds-card { padding: 1.4rem 1.3rem; border: 1px solid var(--ds-hair); border-radius: 18px; background: rgba(8, 16, 30, 0.5); display: flex; flex-direction: column; gap: 0.5rem; }
.ds-card__t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.ds-card__d { margin: 0; font-family: var(--font-body); font-size: 0.96rem; line-height: 1.55; color: var(--color-text-secondary, rgba(241, 240, 235, 0.82)); }
.ds-card .ds-link { margin-top: auto; font-size: 0.92rem; }

/* --- Fiyat bloğu (pricing.ts) --- */
.ds-price { margin-top: 3rem; padding: 2rem clamp(1rem, 3vw, 2rem); border: 1px solid rgba(240, 187, 61, 0.3); border-radius: 22px; background: rgba(8, 16, 30, 0.55); }
.ds-price__row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .ds-price__row { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; } }
.ds-price__item { padding: 1.1rem 1rem; border: 1px solid var(--ds-hair); border-radius: 14px; display: flex; flex-direction: column; gap: 0.35rem; }
.ds-price__item--hl { border-color: rgba(240, 187, 61, 0.55); box-shadow: 0 0 0 1px rgba(240, 187, 61, 0.18); }
.ds-price__name { font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--color-text-secondary, rgba(241, 240, 235, 0.82)); }
.ds-price__val { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ds-gold); }
.ds-price__vat { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--color-text-tertiary, rgba(241, 240, 235, 0.55)); }
.ds-price__cohort { margin: 0.4rem 0 0; font-family: var(--font-editorial); font-style: italic; font-size: 1.05rem; }
.ds-price__links { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: center; }
.ds-price__note { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--color-text-tertiary, rgba(241, 240, 235, 0.55)); }

/* --- d) SSS --- */
.ds-faq { margin-top: 2rem; text-align: left; max-width: 760px; }
.ds-faq__item { border-top: 1px solid var(--ds-hair); padding: 0.2rem 0; }
.ds-faq__item:last-child { border-bottom: 1px solid var(--ds-hair); }
.ds-faq__q { cursor: pointer; padding: 1rem 0; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; list-style: none; position: relative; padding-right: 2rem; }
.ds-faq__q::-webkit-details-marker { display: none; }
.ds-faq__q::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); color: var(--ds-gold); font-size: 1.3rem; line-height: 1; }
.ds-faq__item[open] .ds-faq__q::after { content: "−"; }
.ds-faq__a { margin: 0 0 1.1rem; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: var(--color-text-secondary, rgba(241, 240, 235, 0.82)); }

/* --- e) Kapanış --- */
.ds-end { padding-bottom: clamp(72px, 10vh, 120px); }
.ds-brand { margin: 2rem 0 0; font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.4rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-gold); }

@media (prefers-reduced-motion: reduce) { .ds-btn { transition: none; } .ds-btn:hover { transform: none; } }