/*
 * Tanıtım / giriş sayfası (landing.html) — "Mimari çizgi" tasarımı.
 *
 * landing.css ve theme-light.css Hesap sayfasıyla ortaktır; bu dosya yalnız
 * `body.home` altında geçerlidir ve onların üzerine yazar. Yazı tipleri
 * sitenin kendi sunucusundan gelir (fonts/fonts.css; CSP font-src 'self').
 *
 * Okunabilirlik (göz yorgunluğu) ölçütleri — boyutlar bunlara göre seçildi:
 *   - Gövde yazısı 16 px; daha küçüğü yalnız ikincil notlarda (13–14 px).
 *   - Satır aralığı gövdede 1,5–1,6 (WCAG 1.4.12).
 *   - Satır uzunluğu 50–75 karakter (max-width ~ 60–70ch).
 *   - Başlıklar gövdeden yumuşak adımlarla büyür (16 → 18 → 22 → 30 → 40);
 *     aşırı iri başlık göze sıçrama yaptırır, ilk ekranı tek başına doldurur.
 *   - İlk ekranda (1366 × 768) başlık, kısa açıklama ve giriş formu birlikte
 *     görünür; odak için tek büyük görsel, soluk arka plan ızgarası.
 *
 * Koyu tema: renkler aşağıdaki değişkenlerle değişir; bina çizimi ve amblem
 * açık renkli bir "çizim kâğıdı" üzerinde kalır (çizim açık zemin için).
 */

body.home {
  --h-bg: #f4f6f8;
  --h-surface: #ffffff;
  --h-ink: #102a43;
  --h-text: #33475b;
  --h-muted: #52667a;
  --h-line: #dce3ea;
  --h-line-strong: #b8c6d3;
  --h-grid: #ebf0f4;
  --h-accent: #1f6fb2;
  --h-accent-hover: #16548a;
  --h-err: #c2410c;
  --h-on-accent: #ffffff;
  --h-band: #102a43;
  --h-note-bg: #eef4fa;
  --h-note-line: #cfe0ee;
  --h-err-text: #9a3412;
  --h-err-bg: #fff1e8;
  --h-err-line: #f5c3a3;
  --h-display: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  --h-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --h-mono: "IBM Plex Mono", ui-monospace, monospace;
  --h-pad: 48px;
}

html[data-theme] body.home {
  display: block;
  min-height: 100vh;
  background: var(--h-bg);
  color: var(--h-ink);
  font-family: var(--h-body);
  line-height: 1.5;
}

body.home a {
  color: var(--h-accent);
}

body.home a:hover {
  color: var(--h-accent-hover);
}

/* ————— Başlık ————— */
.home-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  padding: 0 var(--h-pad);
  display: flex;
  align-items: center;
  gap: 36px;
  background: var(--h-surface);
  border-bottom: 1px solid var(--h-line);
}

.home-logo img {
  display: block;
  height: 42px;
  width: auto;
}

.home-nav {
  display: flex;
  gap: 28px;
  flex-grow: 1;
  font-size: 15px;
  font-weight: 500;
}

body.home .home-nav a {
  color: var(--h-ink);
  text-decoration: none;
}

body.home .home-nav a:hover {
  color: var(--h-accent);
}

body.home .home-tkgm-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--h-muted);
  text-decoration: none;
}

body.home .home-tkgm-link:hover {
  color: var(--h-accent);
}

/* ————— İlk ekran ————— */
.home-hero {
  padding: 32px var(--h-pad) 48px;
  display: grid;
  /* Çizim ve amblem solda; başlık, yazılar ve giriş sağda. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "visual text"
    "visual auth";
  column-gap: 56px;
  row-gap: 24px;
  align-items: start;
  background-color: var(--h-bg);
  background-image:
    linear-gradient(var(--h-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--h-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

.home-hero-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Tamamı büyük harf ve eş aralıklı yazı yavaş okunur: normal yazım. */
.home-kicker {
  font-size: 14px;
  font-weight: 600;
  color: var(--h-accent);
}

.home-hero h1 {
  max-width: 22ch;
  font-family: var(--h-display);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.home-lead {
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--h-text);
}

.home-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.home-steps li {
  padding: 6px 12px;
  background: var(--h-surface);
  border: 1px solid var(--h-line);
  border-radius: 999px;
}

.home-hero-auth {
  grid-area: auth;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-fineprint {
  max-width: 420px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--h-muted);
}

.home-hero-visual {
  grid-area: visual;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.home-emblem {
  display: block;
  width: 220px;
  height: auto;
  /* Amblemin beyaz zemini ızgaralı arka planla kaynaşsın. */
  mix-blend-mode: multiply;
}

.home-hero-svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* ————— Giriş kartı (landing.css formlarının açık sürümü) ————— */
body.home .landing-auth-card {
  position: static;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  background: var(--h-surface);
  border: 1px solid var(--h-line);
  border-radius: 16px;
  box-shadow: none;
}

body.home .landing-auth-title {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--h-ink);
}

body.home .landing-form {
  gap: 14px;
}

body.home .landing-form label {
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--h-ink);
}

body.home .landing-form input[type="text"],
body.home .landing-form input[type="email"],
body.home .landing-form input[type="password"],
body.home .landing-form input[type="tel"] {
  height: 42px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 16px;
  color: var(--h-ink);
  background: var(--h-surface);
  border: 1px solid var(--h-line-strong);
  border-radius: 10px;
}

body.home .landing-form input:focus {
  outline: 2px solid var(--h-accent);
  outline-offset: 1px;
  border-color: var(--h-accent);
}

body.home .landing-btn {
  min-height: 44px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
}

body.home .landing-btn.primary {
  background: var(--h-accent);
  color: var(--h-on-accent);
  border: 0;
}

body.home .landing-btn.primary:hover {
  background: var(--h-accent-hover);
}

body.home .landing-btn.secondary {
  background: var(--h-surface);
  color: var(--h-ink);
  border: 1px solid var(--h-ink);
}

body.home .landing-link {
  color: var(--h-accent);
  font-size: 14px;
}

body.home .landing-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--h-muted);
}

.home-auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: var(--h-muted);
}

body.home .home-strong {
  font-weight: 600;
}

body.home .landing-consents,
body.home .landing-otp {
  background: var(--h-bg);
  border: 1px solid var(--h-line);
  border-radius: 10px;
}

body.home .landing-form .landing-check {
  font-size: 13px;
  font-weight: 400;
  color: var(--h-text);
}

/* landing.css bu etiketi blok yapıyor; alan diğerleri gibi etiketin altında. */
body.home .landing-otp label {
  display: flex;
}

body.home .landing-note {
  font-size: 13px;
  color: var(--h-text);
  background: var(--h-note-bg);
  border: 1px solid var(--h-note-line);
  text-align: left;
}

body.home .landing-error {
  color: var(--h-err-text);
  background: var(--h-err-bg);
  border: 1px solid var(--h-err-line);
}

/* ————— Bölümler ————— */
.home-section {
  padding: 56px var(--h-pad);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-section h2,
.home-gml h2 {
  font-family: var(--h-display);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-section-lead {
  max-width: 70ch;
  margin-top: -12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--h-text);
}

.home-how {
  background: var(--h-surface);
}

.home-cards {
  display: grid;
  gap: 24px;
}

.home-cards-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mülk sahipleri: kartların altında tek satır çağrı ve üye ol düğmesi */
.home-owners-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.home-owners-cta p {
  font-size: 16px;
  font-weight: 600;
}

body.home .home-owners-cta .landing-btn {
  width: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.home-cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.home-card {
  padding: 22px;
  background: var(--h-surface);
  border: 1px solid var(--h-line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-card svg {
  color: var(--h-accent);
}

.home-card h3 {
  font-size: 18px;
  font-weight: 600;
}

.home-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--h-text);
}

.home-card-featured {
  border: 2px solid var(--h-accent);
}

.home-card-soon {
  border-style: dashed;
  border-color: var(--h-line-strong);
}

.home-tag {
  font-family: var(--h-mono);
  font-size: 13px;
  color: var(--h-muted);
}

.home-card-featured .home-tag {
  color: var(--h-accent);
}

.home-subhead {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: -12px;
}

.home-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 15px;
}

.home-chips li {
  padding: 6px 12px;
  background: var(--h-bg);
  border-radius: 8px;
}

/* Tapu ve kadastro (arama motorları için de görünür metin) */
.home-gml {
  padding: 56px var(--h-pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  background: var(--h-band);
  color: #ffffff;
}

.home-gml > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-gml h2 {
  font-size: 26px;
}

.home-gml p {
  max-width: 65ch;
  font-size: 16px;
  line-height: 1.6;
  color: #c9d6e2;
}

.home-gml p.landing-trademark {
  font-size: 13px;
  color: #9fb3c8;
}

.home-security {
  flex-direction: row;
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 48px;
}

.home-security > svg {
  flex-shrink: 0;
  color: var(--h-accent);
}

.home-security > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 70ch;
}

.home-security h2 {
  font-family: var(--h-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

.home-security p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--h-text);
}

.home-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
}

.home-footer {
  padding: 24px var(--h-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--h-muted);
  background: var(--h-surface);
  border-top: 1px solid var(--h-line);
}

/* ————— Koyu tema ————— */
html[data-theme="dark"] body.home {
  --h-bg: #0e1a26;
  --h-surface: #15263a;
  --h-ink: #e6edf3;
  --h-text: #c3cfdb;
  --h-muted: #9fb0c3;
  --h-line: #2a4260;
  --h-line-strong: #3a5677;
  --h-grid: #13233a;
  --h-accent: #7cc4ff;
  --h-accent-hover: #b3dcff;
  --h-on-accent: #0e1a26;
  --h-band: #0a1520;
  --h-note-bg: #13283f;
  --h-note-line: #2a4a6e;
  --h-err-text: #fdba8c;
  --h-err-bg: #3a2412;
  --h-err-line: #7c3f14;
}

/* Çizim ve amblem açık zemin için hazırlandı: koyu temada kâğıt üzerinde. */
html[data-theme="dark"] .home-hero-visual {
  padding: 20px;
  background: #f4f6f8;
  border-radius: 20px;
}

html[data-theme="dark"] body.home .landing-form input[type="text"],
html[data-theme="dark"] body.home .landing-form input[type="email"],
html[data-theme="dark"] body.home .landing-form input[type="password"],
html[data-theme="dark"] body.home .landing-form input[type="tel"] {
  background: var(--h-bg);
}

.home-header .theme-toggle {
  flex-shrink: 0;
}

/* ————— Dar ekranlar ————— */
@media (max-width: 1100px) {
  .home-hero h1 {
    font-size: 36px;
  }

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

@media (max-width: 900px) {
  body.home {
    --h-pad: 16px;
  }

  .home-header {
    height: 56px;
    gap: 16px;
  }

  .home-logo img {
    height: 36px;
  }

  .home-nav {
    display: none;
  }

  body.home .home-tkgm-link {
    margin-left: auto;
    font-size: 13px;
  }

  .home-hero {
    padding-top: 28px;
    grid-template-columns: minmax(0, 1fr);
    /* Telefonda asıl işlem (giriş) çizimin altında kaybolmasın. */
    grid-template-areas:
      "text"
      "auth"
      "visual";
    row-gap: 20px;
  }

  .home-hero-text {
    gap: 16px;
  }

  .home-kicker {
    font-size: 12px;
  }

  .home-hero h1 {
    font-size: 28px;
    line-height: 1.2;
  }

  .home-lead {
    font-size: 16px;
  }

  .home-emblem {
    width: 180px;
  }

  body.home .landing-auth-card {
    max-width: none;
    padding: 22px;
  }

  .home-section,
  .home-gml {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .home-section h2,
  .home-gml h2 {
    font-size: 24px;
  }

  .home-cards-2,
  .home-cards-3,
  .home-cards-4,
  .home-gml {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-gml {
    gap: 20px;
  }

  .home-security {
    flex-direction: column;
  }
}