/* ==== extracted from templates/hakkinda.html (T2.5) ==== */

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-size: var(--bp-text-md);
    line-height: 1.7;
    min-height: 100vh;
  }
  header {
    background: var(--bp-surface);
    border-bottom: 1px solid var(--bp-border);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index:var(--bp-z-dropdown);
  }
  .page-title { font-size: var(--bp-text-2xl); font-weight: 700; color: var(--bp-text); }

  .container { max-width: var(--bp-container-860); margin: 0 auto; padding: 36px 24px 48px; }

  .prose h2 {
    font-size: var(--bp-text-xl); font-weight: 700; color: var(--bp-text);
    margin: 32px 0 14px;
    padding-bottom: 8px;
  }
  .prose h3 {
    font-size: var(--bp-text-md); font-weight: 700; color: var(--bp-text);
    margin: 20px 0 8px;
  }
  .prose p  { color: var(--bp-text2); margin-bottom: 12px; }
  .prose ul { color: var(--bp-text2); margin: 8px 0 12px 20px; }
  .prose li { margin-bottom: 6px; }
  .prose strong { color: var(--bp-text); }

  /* Hero */
  .hero {
    background: linear-gradient(135deg, rgba(31,111,235,.08) 0%, rgba(63,185,80,.05) 100%);
    border: 1px solid rgba(31,111,235,.2);
    border-radius:var(--bp-radius-xl);
    padding: 28px 28px 24px;
    margin-bottom: 8px;
  }
  .hero-title {
    font-size: var(--bp-text-26);
    font-weight: 800;
    color: var(--bp-text);
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .hero-title span { color: var(--bp-accent-cyan); }
  .hero-sub {
    color: var(--bp-text3);
    font-size: var(--bp-text-15);
    margin-bottom: 20px;
    line-height: 1.6;
  }
  .hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .hero-tag {
    background: var(--bp-border-subtle);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-20);
    padding: 4px 14px;
    font-size: var(--bp-text-sm);
    font-weight: 600;
    color: var(--bp-accent-cyan);
  }

  /* Stats row */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 20px 0 8px;
  }
  .stat-box {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius:var(--bp-radius-md);
    padding: 14px 16px;
    text-align: center;
  }
  .stat-num { font-size: var(--bp-text-22); font-weight: 800; color: var(--bp-accent-cyan); }
  .stat-lbl { font-size: var(--bp-text-xs); color: var(--bp-text3); margin-top: 3px; }

  /* Feature cards */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin: 14px 0;
  }
  .feature-card {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius:var(--bp-radius-md);
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .feature-icon { font-size: var(--bp-text-2xl); flex-shrink: 0; margin-top: 1px; }
  .feature-title { font-size: var(--bp-text-base); font-weight: 700; color: var(--bp-text); }
  .feature-desc  { font-size: var(--bp-text-sm); color: var(--bp-text3); margin-top: 3px; line-height: 1.5; }

  /* Tech grid */
  .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    margin: 14px 0;
  }
  .tech-card {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius:var(--bp-radius-md);
    padding: 12px 14px;
  }
  .tech-name { font-size: var(--bp-text-base); font-weight: 700; color: var(--bp-text); }
  .tech-desc { font-size: var(--bp-text-sm); color: var(--bp-text3); margin-top: 3px; }

  /* Market coverage — tek kart (BIST100) kaldı, r33: repeat(auto-fill) boş grid sütunu bırakıyordu */
  .market-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0;
    max-width: 420px;
  }
  .market-card {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius:var(--bp-radius-md);
    padding: 14px 16px;
  }
  .market-card-title {
    font-size: var(--bp-text-base); font-weight: 700; color: var(--bp-text);
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  }
  .market-card ul { margin-left: 0; list-style: none; }
  .market-card li { font-size: var(--bp-text-sm); color: var(--bp-text3); padding: 8px 0; }

  /* Methodology box */
  .method-box {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-left: 3px solid var(--bp-brand);
    border-radius:var(--bp-radius-md);
    padding: 16px 18px;
    margin: 14px 0;
  }
  .method-formula {
    font-family: var(--bp-font-mono);
    font-size: var(--bp-text-base);
    color: var(--bp-accent-cyan);
    background: rgba(31,111,235,.08);
    border-radius: var(--bp-radius-4);
    padding: 10px 14px;
    margin: 8px 0;
    line-height: 1.8;
  }

  /* Roadmap */
  .roadmap-list {
    list-style: none;
    margin: 12px 0 !important;
  }
  .roadmap-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    color: var(--bp-text2);
    font-size: var(--bp-text-base);
  }
  .rl-done    { color: var(--bp-al); font-size: var(--bp-text-md); flex-shrink: 0; }
  .rl-wip     { color: var(--bp-gold); font-size: var(--bp-text-md); flex-shrink: 0; }
  .rl-todo    { color: var(--bp-text3); font-size: var(--bp-text-md); flex-shrink: 0; }

  /* Warning box */
  .warning-box {
    background: rgba(210,153,34,.06);
    border: 1px solid rgba(210,153,34,.3);
    border-radius:var(--bp-radius-md);
    padding: 16px 18px;
    margin: 14px 0;
  }
  .warning-box p { color: var(--bp-text2); margin-bottom: 8px; }
  .warning-box p:last-child { margin-bottom: 0; }

  footer {
    text-align: center;
    padding: 20px;
    font-size: var(--bp-text-sm);
    color: var(--bp-text3);
    margin-top: 32px;
  }
  footer a { color: var(--bp-text3); text-decoration: none; }
  footer a:hover { color: var(--bp-text); }

  @media (max-width: 600px) {
    .container { padding: 16px 16px 32px; }
    .hero { padding: 20px 16px; }
    .hero-title { font-size: var(--bp-text-2xl); }
  }