@charset "utf-8";

/* =====================================================================
   kampus.al — tanıtım sayfası
   Tasarım dili: "Mürekkep" (kampus-al-mobile/docs/design-language.md)
   Token'lar mobil uygulamanın gerçek theme dosyalarından birebir alındı:
     src/theme/colors.ts · tokens.ts · theme.ts · fonts.ts
   Kural özeti: sarı = sinyal (bölge başına en fazla bir tane, asla zemin
   ve asla metin), tek zengin obje (gölge bütçesi yalnız hero telefona),
   diğer her şey düz + hairline kenar, tek tip ailesi.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Token'lar — açık tema (theme.ts → ROLES.light + BRAND)
   --------------------------------------------------------------- */
:root {
  /* Marka — şema değişmez (theme.ts → BRAND) */
  --ink: #2b2423;
  --yellow: #fbcc00;
  --on-yellow: #2b2423;
  --on-ink: #ffffff;
  --on-ink-muted: rgba(255, 255, 255, 0.62);
  --on-ink-hairline: rgba(255, 255, 255, 0.12);

  /* Etisan spektrumu — yalnız kategori kodu (colors.ts → palette.category) */
  --cat-blue: #246cb4;
  --cat-green: #a6be1a;
  --cat-magenta: #df0c76;
  --cat-red: #dc0d15;
  --cat-yellow: #fbcc00;

  /* Rol renkleri — açık tema (theme.ts → ROLES.light) */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f5f3f1;
  --fg: #2b2423;
  --fg-muted: #756b66; /* beyazda 5.18:1 · #F5F3F1 üstünde 4.68:1 → AA */
  --fg-tertiary: #9a918b; /* YALNIZ grafik/ayraç — 3.09:1, metin için değil */
  --border: #e7e3e0;
  --border-soft: #f1efe9;
  --hairline: rgba(43, 36, 35, 0.08);
  --ink-soft: #f1efe9;
  --seal: rgba(43, 36, 35, 0.22); /* mühür yuvası (kesikli çerçeve) */

  /* Bant ve o bandın üstündeki kart. Açık temada kart banttan AÇIK olur;
     koyu temada aynı ilişkiyi korumak için ikisi yer değiştirir (her ikisi de token). */
  --band-alt: var(--surface-alt);
  --card-on-alt: var(--surface);

  /* Yükseklik — bütçenin tamamı hero telefona (design-language §4) */
  --elev-hero: 0 10px 28px rgba(43, 36, 35, 0.16);
  --hero-bezel: transparent;

  /* Geometri (tokens.ts → radii) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Ritim (tokens.ts → spacing, 4pt ızgara) */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-2xl: 32px;

  /* Sütun tavanları ve kenar boşluğu (tokens.ts → layout, design-language §11) */
  --w-content: 720px;
  --w-wide: 960px;
  --gutter: 16px;

  /* Tipografi — akışkan ölçek, tek aile */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-h1: clamp(31px, 7.4vw, 54px);
  --t-h2: clamp(21px, 4.4vw, 30px);
  --t-lede: clamp(16px, 3.2vw, 19px);
  --t-body: clamp(15px, 2.6vw, 16px);
  --t-caption: 13px;
  --t-overline: 11px;

  color-scheme: light dark;
}

@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 840px) {
  :root {
    --gutter: 32px;
  }
}

/* ---------------------------------------------------------------
   2. Token'lar — koyu tema (theme.ts → ROLES.dark)
   Koyu zeminde gölge görünmez: zengin obje kenara döner (§12 deseni).
   --------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141110;
    --surface: #1e1a17;
    --surface-alt: #26201c;
    --fg: #f5f3f1;
    --fg-muted: rgba(245, 243, 241, 0.62);
    --fg-tertiary: rgba(245, 243, 241, 0.4);
    --border: rgba(255, 255, 255, 0.12);
    --border-soft: rgba(255, 255, 255, 0.07);
    --hairline: rgba(255, 255, 255, 0.08);
    --ink-soft: rgba(255, 255, 255, 0.08);
    --seal: rgba(255, 255, 255, 0.22);

    --band-alt: var(--surface);
    --card-on-alt: var(--surface-alt);

    --elev-hero: none;
    --hero-bezel: rgba(255, 255, 255, 0.14);
  }
}

/* ---------------------------------------------------------------
   3. Tip ailesi — kendi sunucumuzdan (fonts.ts ile aynı aile)
   Hiçbir dış istek yok: Google Fonts / CDN kullanılmaz.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-500Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-700Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------
   4. Taban
   --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

p,
figure,
figcaption {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--s-md) var(--s-lg);
  background: var(--yellow);
  color: var(--on-yellow);
  border-radius: 0 0 var(--r-md) 0;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  left: 0;
}

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

/* ---------------------------------------------------------------
   5. Düzen ilkelleri — "genişlik arttıkça satır uzamaz, sütun ortalanır"
   --------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--content {
  max-width: var(--w-content);
}

.band {
  padding-block: clamp(56px, 11vw, 96px);
}

.band--alt {
  background: var(--band-alt);
}

.band--alt .feature,
.band--alt .contact li {
  background: var(--card-on-alt);
}

/* Bir bant içinde arka arkaya gelen bölümler */
.stack {
  display: grid;
  gap: clamp(40px, 7vw, 64px);
}

.overline {
  margin-bottom: var(--s-sm);
  color: var(--fg-muted);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-head {
  max-width: 46ch;
  margin-bottom: var(--s-2xl);
}

.section-head h2 {
  font-size: var(--t-h2);
}

.section-head p {
  margin-top: var(--s-md);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* Marka yazısı — uygulamadaki hâliyle birebir: ink "kampus" + SARI NOKTA + soluk "al".
   Sarı yalnız noktada yaşar; §8 "beyaz üstünde sarı metin" yasağı böylece delinmez ve
   "al" okunur bir kontrastta kalır (fgMuted). */
.wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
}

.wordmark b {
  font-weight: inherit;
}

.wordmark .dot {
  color: var(--yellow);
}

.wordmark .tld {
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   6. Başlık
   --------------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--hairline);
}

.site-head .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-lg);
  min-height: 64px;
}

.site-head .mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-head .mark img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.site-head nav a {
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-head nav a:hover {
  color: var(--fg);
}

/* ---------------------------------------------------------------
   7. Hero — sayfanın tek zengin objesi telefondur
   --------------------------------------------------------------- */
.hero {
  padding-block: clamp(40px, 9vw, 80px) clamp(56px, 11vw, 96px);
}

.hero__grid {
  display: grid;
  gap: clamp(36px, 7vw, 56px);
  align-items: center;
}

.hero__copy {
  max-width: 30ch;
}

.hero h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.hero .lede {
  max-width: 42ch;
  margin-top: var(--s-xl);
  color: var(--fg-muted);
  font-size: var(--t-lede);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero .note {
  max-width: 42ch;
  margin-top: var(--s-xl);
  padding-top: var(--s-xl);
  border-top: 1px dashed var(--border); /* perfore hat — koçan/fiş vernaküleri */
  color: var(--fg-muted);
  font-size: var(--t-caption);
  line-height: 1.6;
}

/* Bölgenin TEK sarı sinyali: yayın durumu */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  margin-bottom: var(--s-xl);
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-full);
  background: var(--yellow);
  color: var(--on-yellow);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--on-yellow);
}

/* ---------------------------------------------------------------
   8. Telefon
   --------------------------------------------------------------- */
.phone {
  width: 100%;
  max-width: 268px;
  margin-inline: auto;
  padding: 9px;
  border: 1px solid var(--hero-bezel);
  border-radius: 30px;
  background: var(--ink);
  box-shadow: var(--elev-hero);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 21px;
}

/* ---------------------------------------------------------------
   9. Özellikler
   --------------------------------------------------------------- */
.feature-grid {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: 1fr;
}

.feature {
  padding: var(--s-xl);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.feature h3 {
  margin-top: var(--s-lg);
  font-size: 16.5px;
  letter-spacing: -0.015em;
}

.feature p {
  margin-top: var(--s-sm);
  color: var(--fg-muted);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Mühür yuvası — ikonu saran kesikli çerçeve (design-language §6.4) */
.seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--ink-soft);
  color: var(--fg);
}

.seal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--seal);
  border-radius: 9px;
}

.seal svg {
  width: 21px;
  height: 21px;
}

/* ---------------------------------------------------------------
   10. Ekran rafı
   --------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 208px;
  gap: var(--s-lg);
  overflow-x: auto;
  padding-block-end: var(--s-md);
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--fg-tertiary) transparent;
}

@media (min-width: 600px) {
  .rail {
    grid-auto-columns: 232px;
  }
}

.rail > li {
  scroll-snap-align: start;
}

.shot {
  height: 100%;
  padding: var(--s-md);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  background: var(--surface-alt);
}

.shot figcaption {
  padding: var(--s-lg) var(--s-xs) var(--s-xs);
}

.shot b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.shot span {
  display: block;
  min-height: 2.9em; /* iki satır yer ayrılır: raftaki kartlar aynı yükseklikte durur */
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: var(--t-caption);
  line-height: 1.45;
}

.rail-note {
  margin-top: var(--s-lg);
  color: var(--fg-muted);
  font-size: var(--t-caption);
}

/* ---------------------------------------------------------------
   11. Koşul notu — ekranın içinde kalıcı bir durum (Notice, §12)
   Düz yüzey, kenar ve gölge yok, ton yok.
   --------------------------------------------------------------- */
.notice {
  padding: var(--s-xl);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}

.band--alt .notice {
  background: var(--card-on-alt);
  border: 1px solid var(--border);
}

.notice h2 {
  margin-bottom: var(--s-md);
  font-size: 16.5px;
}

.notice p {
  color: var(--fg-muted);
  font-size: 14.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.notice p + p {
  margin-top: var(--s-md);
}

/* ---------------------------------------------------------------
   12. Destek
   --------------------------------------------------------------- */
.contact {
  display: grid;
  gap: var(--s-lg);
}

.contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-lg);
  padding: var(--s-lg) var(--s-xl);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.contact .seal {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.contact .seal::after {
  inset: 3px;
  border-radius: 8px;
}

.contact .seal svg {
  width: 18px;
  height: 18px;
}

.contact .label {
  display: block;
  color: var(--fg-muted);
  font-size: var(--t-overline);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact a,
.contact .value {
  display: block;
  margin-top: 3px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.contact a {
  text-decoration-color: var(--fg-tertiary);
  text-underline-offset: 3px;
}

.contact a:hover {
  text-decoration-color: currentColor;
}

.contact .value {
  font-weight: 500;
  color: var(--fg-muted);
}

@media (min-width: 600px) {
  .contact {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact li:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------
   13. Alt bilgi — mürekkep yüzey, Etisan spektrum şeridi
   --------------------------------------------------------------- */
.site-foot {
  background: var(--ink);
  color: var(--on-ink);
}

.spectrum {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 4px;
}

.spectrum i:nth-child(1) {
  background: var(--cat-blue);
}
.spectrum i:nth-child(2) {
  background: var(--cat-green);
}
.spectrum i:nth-child(3) {
  background: var(--cat-magenta);
}
.spectrum i:nth-child(4) {
  background: var(--cat-red);
}
.spectrum i:nth-child(5) {
  background: var(--cat-yellow);
}

.site-foot .shell {
  display: grid;
  gap: var(--s-xl);
  padding-block: clamp(36px, 7vw, 56px);
}

.site-foot .wordmark {
  color: var(--on-ink);
}

.site-foot .wordmark .tld {
  color: var(--on-ink-muted);
}

.site-foot .legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
}

.site-foot .legal a {
  font-size: 14px;
  font-weight: 600;
  text-decoration-color: var(--on-ink-muted);
  text-underline-offset: 3px;
}

.site-foot .legal a:hover {
  text-decoration-color: currentColor;
}

.site-foot .company {
  padding-top: var(--s-xl);
  border-top: 1px solid var(--on-ink-hairline);
  color: var(--on-ink-muted);
  font-size: var(--t-caption);
  line-height: 1.6;
}

.site-foot .company a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   14. Geniş ekran
   --------------------------------------------------------------- */
/* Telefonda üst üste, geniş ekranda ikon solda satır düzeni — sütun ORTALANIR,
   satır uzamaz (design-language §11). 4 dar sütun yerine 2 rahat sütun. */
@media (min-width: 600px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-lg);
    align-items: start;
  }

  .feature .seal {
    grid-row: 1 / span 2;
  }

  .feature h3 {
    grid-column: 2;
    margin-top: 3px;
  }

  .feature p {
    grid-column: 2;
  }
}

@media (min-width: 840px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(48px, 6vw, 88px);
  }

  .hero__copy {
    max-width: none;
  }

  .phone {
    max-width: 300px;
  }

  .site-foot .shell {
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--s-2xl);
  }

  .site-foot .legal {
    justify-content: flex-end;
  }

  .site-foot .company {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------
   15. Hareket — sistem "hareketi azalt" derse hiçbir şey oynamaz
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}