/* E2CE – Base design tokens + light/dark theme + components
   - Bootstrap ile birlikte çalışır (override etmez, tamamlar)
   - Sadece CSS değişiklik; HTML’de sınıf eklemek yeterli
*/

/* ====== Tokens ====== */
:root{
    --e2-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --e2-radius: 14px;
    --e2-shadow: 0 10px 25px rgba(0,0,0,.06);
  
    /* light */
    --e2-bg: #ffffff;
    --e2-surface: #f7f7f9;
    --e2-card: #ffffff;
    --e2-text: #101114;
    --e2-muted: #61646b;
    --e2-border: #e6e7eb;
    --e2-primary: #3B82F6; /* blue-500 */
    --e2-primary-600: #2563EB;
    --e2-accent: #22c55e;  /* green-500 */
    --e2-link: #2563EB;
  }
  
  :root[data-theme="dark"]{
    --e2-bg: #0b0d12;
    --e2-surface: #10131a;
    --e2-card: #131722;
    --e2-text: #e8eaf1;
    --e2-muted: #9aa3b2;
    --e2-border: #202534;
    --e2-primary: #60A5FA;
    --e2-primary-600: #3B82F6;
    --e2-accent: #34d399;
    --e2-link: #93c5fd;
  }
  
  /* ====== Base ====== */
  html{ scroll-behavior:smooth }
  body{
    font-family: var(--e2-font-sans);
    background: var(--e2-bg);
    color: var(--e2-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* links */
  a{ color: var(--e2-link); text-decoration: none }
  a:hover{ text-decoration: underline }
  
  /* container helpers */
  .e2-container{ max-width: 1150px; margin-inline:auto; padding-inline: 1rem }
  
  /* headings */
  h1,h2,h3{ letter-spacing: -.02em }
  h1{ font-weight:800; font-size: clamp(2rem, 1.2rem + 2vw, 3rem) }
  h2{ font-weight:700; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem) }
  h3{ font-weight:700; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem) }
  
  /* text */
  .lead{ color: var(--e2-muted); font-size: 1.125rem }
  
  /* buttons */
  .e2-btn{
    display:inline-flex; align-items:center; gap:.5rem;
    background: var(--e2-primary); color: #fff; border:0;
    padding:.7rem 1rem; border-radius: var(--e2-radius);
    box-shadow: var(--e2-shadow);
    transition: transform .08s ease, filter .15s ease, background .2s ease;
  }
  .e2-btn:hover{ text-decoration:none; filter:brightness(1.05) }
  .e2-btn:active{ transform: translateY(1px) }
  .e2-btn.outline{
    background: transparent; color: var(--e2-primary); border:1px solid var(--e2-border);
  }
  .e2-btn.ghost{
    background: transparent; color: var(--e2-text);
  }
  
  /* tags / badges */
  .e2-tag{
    display:inline-block; font-size:.8rem; padding:.25rem .55rem;
    background: var(--e2-surface); color: var(--e2-muted);
    border:1px solid var(--e2-border); border-radius: 999px;
  }
  
  /* cards */
  .e2-card{
    background: var(--e2-card); border:1px solid var(--e2-border);
    border-radius: var(--e2-radius); box-shadow: var(--e2-shadow);
    overflow:hidden;
  }
  .e2-card .cover{ aspect-ratio: 16/9; width:100%; object-fit:cover; background:#000; }
  .e2-card .pad{ padding: 1rem 1rem 1.1rem }
  
  /* article body */
  .article{
    --art-w: 740px;
    max-width: var(--art-w); margin-inline:auto;
    font-size: 1.06rem; line-height: 1.75;
  }
  .article p{ margin: 1rem 0 }
  .article img{ max-width: 100%; border-radius: 10px }
  .article blockquote{
    margin:1.2rem 0; padding: .8rem 1rem;
    background: var(--e2-surface); border-left: 4px solid var(--e2-primary);
    color: var(--e2-muted)
  }
  .article h2{ margin-top: 2rem }
  .article h3{ margin-top: 1.4rem }
  .article pre, .article code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  }
  .article pre{
    background: var(--e2-surface); color: var(--e2-text);
    border:1px solid var(--e2-border); border-radius:12px; padding:1rem; overflow:auto
  }
  
  /* navbar + footer */
  .e2-nav{
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: saturate(180%) blur(8px);
    background: color-mix(in oklab, var(--e2-bg) 88%, transparent);
    border-bottom:1px solid var(--e2-border);
  }
  .e2-nav .inner{ height:60px; display:flex; align-items:center; justify-content:space-between }
  .e2-brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--e2-text) }
  .e2-nav a:hover{ text-decoration:none }
  
  .e2-footer{
    margin-top: 3rem; padding: 2.5rem 0; border-top:1px solid var(--e2-border);
    color: var(--e2-muted); background: var(--e2-surface);
  }
  
  /* grids */
  .grid{
    --gap: 18px;
    display:grid; gap: var(--gap);
  }
  .grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
  .grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  @media (max-width: 900px){
    .grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  }
  @media (max-width: 640px){
    .grid.cols-3, .grid.cols-2{ grid-template-columns: 1fr }
  }
  
  /* utilities */
  .muted{ color: var(--e2-muted) }
  .section{ margin-top: 2rem }
  .hero{
    padding: 2.2rem 0 1.2rem;
  }
  .hero .title{ margin:0 }
  .hero .subtitle{ margin:.4rem 0 0 }
  
  /* table */
  .table-e2{
    width:100%; border-collapse: collapse; font-size: .98rem;
    border:1px solid var(--e2-border); border-radius: 12px; overflow:hidden
  }
  .table-e2 th, .table-e2 td{ padding:.75rem .9rem; border-bottom:1px solid var(--e2-border) }
  .table-e2 thead th{ background: var(--e2-surface); text-align:left }
  
  /* forms */
  input[type="text"], input[type="search"], textarea, select{
    border-radius: 12px !important;
    border:1px solid var(--e2-border) !important;
    background: var(--e2-card) !important;
    color: var(--e2-text) !important;
  }