/* ═══════════════════════════════════════════════════════════════
   FORUMCAD — HOME PAGE (editorial drafting-sheet layout)
   Scoped under .home so it only affects the homepage.
   Palette: Blueprint (engineering blue + warm stone, light-only).
   System: one aligned 1160px column; ink overlays on imagery;
   Space Mono for data labels; Archivo for display type.
   Grid math: every grid fills exactly — no empty cells, no orphans.
   ═══════════════════════════════════════════════════════════════ */

.home {
  --home-max: 1160px;
  --home-gutter: clamp(20px, 5vw, 60px);
  --home-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Home-scoped contrast overrides: darker than the global --muted/--amber
     so body text and data labels meet AA on the light tinted backgrounds. */
  --home-muted: #4A4640;
  --home-amber: #8A520F;
}

/* ── ALIGNED COLUMN: every section content snaps to the same rails ── */
.home .section-inner,
.home .hub-grid,
.home .mozaik,
.home .articles-grid,
.home .projeler-grid,
.home .consulting-inner,
.home .section-header,
.home .footer-top,
.home .footer-bottom {
  max-width: var(--home-max);
  margin-left: auto;
  margin-right: auto;
}
/* Rail padding: content starts on the 1160px rail at wide viewports,
   falls back to the gutter below 1280px. Used by full-bleed bands
   (hero, categories) whose children are direct body-level grids. */
.home .hero,
.home .categories {
  padding-left: max(var(--home-gutter), calc((100vw - var(--home-max)) / 2));
  padding-right: max(var(--home-gutter), calc((100vw - var(--home-max)) / 2));
}
.home footer { padding-left: var(--home-gutter); padding-right: var(--home-gutter); }

/* ═══════════════════════════════════════════════════════════
   HERO — split: display copy left, drafting-sheet panel right
   ═══════════════════════════════════════════════════════════ */
.home .hero {
  min-height: 0;
  padding-top: 150px;
  padding-bottom: 96px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(31, 78, 121, 0.10), transparent 60%),
    linear-gradient(180deg, var(--rose-soft) 0%, var(--surface) 100%);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* subtle blueprint grid backdrop */
.home .hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(31, 78, 121, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 78, 121, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}
.home .hero-bg-text,
.home .hero-glow { display: none; }

.home .hero-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
}
.home .hero-eyebrow::before {
  content: ''; width: 40px; height: 2px; background: var(--brand);
}
.home .hero h1 {
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.04; margin-bottom: 24px; max-width: 640px;
  text-wrap: balance;
}
.home .hero h1 em { color: var(--brand); }
.home .hero h1 .outline {
  -webkit-text-stroke: 2px rgba(31, 78, 121, 0.6);
  color: transparent;
}
.home .hero-desc {
  font-size: 17px; line-height: 1.7; color: var(--home-muted);
  max-width: 520px; margin-bottom: 36px;
}
.home .hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.home .btn-primary {
  background: var(--brand); color: var(--surface);
  padding: 15px 34px; font-family: 'Archivo', sans-serif;
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; text-decoration: none; border-radius: var(--radius-md);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.home .btn-primary:hover {
  background: var(--brand-deep); transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 78, 121, 0.22);
}
.home .btn-primary:active { transform: translateY(0) scale(0.98); }
.home .btn-ghost {
  color: var(--home-muted); font-size: 14px; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.2s;
}
.home .btn-ghost:hover { color: var(--text); }
.home .btn-ghost::after { content: '→'; font-size: 18px; }

/* Hero data panel (right) — drafting sheet: mono labels, hairline rules */
.home .hero-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px;
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
  position: relative;
  z-index: 1;
}
.home .hero-panel::before {
  content: 'SHT-01';
  position: absolute; top: 12px; right: 16px;
  font-family: 'Space Mono', monospace;
  font-size: 9px; letter-spacing: 2px; color: rgba(31, 78, 121, 0.35);
}
.home .hero-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.home .hero-panel-title {
  font-family: 'Space Mono', monospace;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--text);
}
.home .hero-panel-live {
  font-family: 'Space Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--success);
  display: inline-flex; align-items: center; gap: 6px;
}
.home .hero-panel-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); animation: home-pulse 1.6s infinite;
}
@keyframes home-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
.home .hero-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  position: static; flex-direction: row; margin: 0;
}
.home .hero-stat {
  text-align: left; border-right: none;
  background: var(--rose-soft); border-radius: var(--radius-md); padding: 18px;
}
.home .hero-stat:nth-child(2) { background: var(--sage-soft); }
.home .hero-stat:nth-child(3) { background: var(--sage-soft); }
.home .hero-stat:nth-child(4) { background: var(--rose-soft); }
.home .hero-stat-val {
  font-family: 'Archivo', sans-serif;
  font-size: 30px; font-weight: 600; color: var(--brand); line-height: 1;
  display: block; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.home .hero-stat-label {
  font-family: 'Space Mono', monospace;
  font-size: 13px; color: var(--home-muted);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.home .hero-panel-foot {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--home-muted); line-height: 1.6;
}
.home .hero-panel-foot strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   CATEGORIES — mono index strip (01 / 02 / …)
   ═══════════════════════════════════════════════════════════ */
.home .categories {
  counter-reset: cat-index;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--surface);
}
.home .categories::-webkit-scrollbar { display: none; }
.home .cat-item {
  padding: 10px 16px; font-family: 'Space Mono', monospace;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--home-muted); cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.home .cat-item::before {
  content: counter(cat-index, decimal-leading-zero);
  counter-increment: cat-index;
  font-size: 9px; color: rgba(31, 78, 121, 0.4);
  transition: color 0.2s;
}
.home .cat-item:hover, .home .cat-item.active {
  color: var(--text); border-color: var(--border);
  background: var(--rose-soft);
}
.home .cat-item:hover::before, .home .cat-item.active::before { color: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   SECTION scaffolding — headers snap to the same rails as grids
   ═══════════════════════════════════════════════════════════ */
.home .section { padding: 72px var(--home-gutter); }
.home .section--sand { background: var(--sand); }
.home .section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 36px;
}
.home .section-title {
  font-size: clamp(30px, 4vw, 44px); line-height: 1;
  text-wrap: balance;
}
.home .section-title span { color: var(--brand); }
.home .section-link {
  font-family: 'Space Mono', monospace;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--brand); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: gap 0.2s var(--home-ease);
}
.home .section-link:hover { gap: 10px; }
.home .section-link::after { content: '→'; }
.home .section-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--brand); letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 12px;
}
.home .section-eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   FEATURED HUBS — bento grid: full-width lead + 3 equal
   4 items → 1 full row + 3-col row = exact fill
   ═══════════════════════════════════════════════════════════ */
.home .hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* direct body child: constrain to rails minus gutters so cards never
     touch the screen edge below 1160px, and stay on the shared rail above */
  width: min(calc(100% - 2 * var(--home-gutter)), var(--home-max));
  margin-left: auto;
  margin-right: auto;
  /* breathing room below the categories strip and above the next section */
  margin-top: 48px;
  margin-bottom: 72px;
}
.home .hub-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 20px; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: 30px 30px 24px;
  border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: transform 0.3s var(--home-ease), box-shadow 0.3s var(--home-ease);
}
.home .hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.10);
}
.home .hub-card--rose { background: var(--rose-soft); }
.home .hub-card--sage { background: var(--sage-soft); }
/* lead card spans the full first row */
.home .hub-card--featured {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center; gap: 40px;
}
.home .hub-card--featured .hub-body { max-width: 640px; }
.home .hub-card--featured .hub-title { font-size: 28px; }
.home .hub-card--featured .hub-desc { font-size: 14px; }
/* lead card gets a mono sheet number in the corner */
.home .hub-card--featured::after {
  content: 'SHT-02';
  position: absolute; top: 30px; right: 30px;
  font-family: 'Space Mono', monospace;
  font-size: 10px; letter-spacing: 2px; color: rgba(31, 78, 121, 0.35);
}
.home .hub-glow {
  position: absolute; top: -70px; right: -50px; width: 240px; height: 240px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(31, 78, 121, 0.12) 0%, transparent 65%);
}
.home .hub-tag {
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.home .hub-tag::before { content: ''; width: 18px; height: 2px; background: var(--brand); }
.home .hub-title {
  font-family: 'Archivo', sans-serif; font-size: 21px; font-weight: 600;
  text-transform: uppercase; line-height: 1.1; color: var(--text); margin-bottom: 8px;
}
.home .hub-desc { font-size: 13px; color: var(--home-muted); line-height: 1.55; }
.home .hub-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px;
}
.home .hub-stat {
  font-family: 'Space Mono', monospace;
  font-size: 13px; color: var(--home-muted);
}
.home .hub-stat strong { color: var(--home-amber); font-weight: 700; }
.home .hub-cta {
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
  background: var(--text); color: var(--surface);
  padding: 9px 18px; border-radius: var(--radius-sm);
  transition: background 0.2s;
}
.home .hub-card:hover .hub-cta { background: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   POPÜLER KONULAR — 6-item mosaic, exact fill:
   3×3 grid; lead 2×2 top-left; 2 tiles right column; 3 tiles bottom row
   [ ana ][ ana ][ i2 ]
   [ ana ][ ana ][ i3 ]
   [ i4 ][ i5 ][ i6 ]
   ═══════════════════════════════════════════════════════════ */
.home .populer-section { background: var(--surface); padding: 72px var(--home-gutter); }
.home .mozaik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  height: 620px;
}
.home .mozaik-item.ana { grid-row: span 2; grid-column: span 2; }
.home .mozaik-item { border-radius: var(--radius-lg); }

/* ink overlay — text always sits on dark ink, never dark-on-dark */
.home .mozaik-item::after {
  background: linear-gradient(160deg, rgba(28, 27, 26, 0.25) 0%, rgba(28, 27, 26, 0.88) 100%);
}
.home .mozaik-kat { color: #F6EBDD; font-size: 13px; letter-spacing: 1.5px; }
.home .mozaik-kat::before { background: #F6EBDD; }
.home .mozaik-baslik { color: #FFFFFF; }
.home .mozaik-tarih { color: rgba(255, 255, 255, 0.85); font-size: 13px; }
.home .mozaik-arrow { background: #FFFFFF; color: var(--text); }
.home .mozaik-placeholder { color: rgba(255, 255, 255, 0.12); }
.home .mozaik-item.ana .mozaik-baslik {
  font-size: 26px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.home .mozaik-item:not(.ana) .mozaik-baslik {
  font-size: 15px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   SON MAKALELER — uniform 3-col grid, no oversized featured cell
   ═══════════════════════════════════════════════════════════ */
.home .articles-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home .article-card { border-radius: var(--radius-lg); padding: 32px; }
.home .article-cover { margin: -32px -32px 0; }
/* Readability floor: category/meta/tag labels ≥ 13px Space Mono */
.home .article-cat { font-size: 13px; letter-spacing: 1.5px; }
.home .article-meta { font-size: 13px; letter-spacing: 1px; }
.home .article-tag { font-size: 13px; letter-spacing: 1px; }

/* ═══════════════════════════════════════════════════════════
   ÖNE ÇIKAN PROJELER — 2 columns, featured spans 2 rows:
   [ featured ][ i2 ]
   [ featured ][ i3 ]  = exact fill, no empty cells
   ═══════════════════════════════════════════════════════════ */
.home .projeler-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}
.home .proje-kart {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.3s var(--home-ease), box-shadow 0.3s var(--home-ease);
}
.home .proje-kart:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.12);
}
.home .proje-kart--featured { aspect-ratio: auto; grid-row: span 2; }
.home .proje-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--rose-soft);
  transition: transform 0.4s ease;
}
.home .proje-kart:hover .proje-img { transform: scale(1.04); }
/* ink overlay bottom — white text on dark, always readable */
.home .proje-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 44px 20px 16px;
  background: linear-gradient(transparent, rgba(28, 27, 26, 0.92));
}
.home .proje-kat {
  font-family: 'Space Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #F6EBDD; margin-bottom: 4px;
}
.home .proje-baslik {
  font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 600;
  text-transform: uppercase; color: #FFFFFF; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.home .proje-kart--featured .proje-baslik { font-size: 18px; -webkit-line-clamp: 3; }
.home .proje-maliyet {
  font-family: 'Space Mono', monospace;
  font-size: 13px; color: rgba(255, 255, 255, 0.85); margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   DANIŞMANLIK
   ═══════════════════════════════════════════════════════════ */
.home .consulting { background: var(--rose-soft); border-top: 1px solid var(--border); }
.home .consulting-inner { gap: 16px; }
.home .consulting-card { border-radius: var(--radius-lg); padding: 38px 32px; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .home .hero { grid-template-columns: 1fr; padding-top: 130px; }
  .home .hero-panel { max-width: 520px; }
  .home .hub-card--featured { flex-direction: column; align-items: flex-start; gap: 0; }
  .home .hub-grid { grid-template-columns: 1fr 1fr; }
  /* mosaic: lead full-width, pairs below, last tile full-width = exact fill */
  .home .mozaik {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .home .mozaik-item { height: 200px; }
  .home .mozaik-item.ana { height: 280px; grid-column: 1 / -1; grid-row: span 1; }
  .home .mozaik-item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .home .section { padding: 52px var(--home-gutter); }
  .home .populer-section { padding: 52px var(--home-gutter); }
  .home .hub-grid { grid-template-columns: 1fr; }
  .home .hub-card--featured { grid-column: 1 / -1; }
  .home .articles-grid { grid-template-columns: 1fr; }
  .home .consulting-inner { grid-template-columns: 1fr; }
  .home .hero-stats { grid-template-columns: 1fr 1fr; }
  .home .projeler-grid { grid-template-columns: 1fr; }
  .home .proje-kart--featured { grid-row: span 1; aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) {
  .home .hero-stats { grid-template-columns: 1fr; }
  .home .mozaik { grid-template-columns: 1fr; }
  .home .mozaik-item.ana { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════
   FONT + CONTRAST — home-scoped overrides
   Body copy uses Archivo (uniform-stroke sans) for a cohesive
   editorial voice; low-contrast text inherited from style.css is
   darkened to meet AA.
   ═══════════════════════════════════════════════════════════ */
.home {
  font-family: 'Archivo', sans-serif;
}
.home .hero-desc,
.home .hub-desc,
.home .article-excerpt,
.home .consulting-desc,
.home .mozaik-tarih,
.home .article-meta,
.home .empty-state {
  font-family: 'Archivo', sans-serif;
}
.home .article-excerpt { color: var(--home-muted); }
.home .article-meta { color: var(--home-muted); }
.home .consulting-desc { color: var(--home-muted); }
.home .empty-state { color: var(--home-muted); }
.home .consulting-card.dark .consulting-desc { color: rgba(255, 255, 255, 0.85); }