:root{
  --bg:#0b0f14; --card:#101722; --muted:#a7b3c3; --text:#eaf1ff; --brand:#4da3ff;
  --stroke:#1e2a3b; --tag:#1b2433; --btn:#0b67ff; --btnText:#fff;
  --radius:16px; --space:16px;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f6f8fc; --card:#fff; --muted:#475569; --text:#0b1220; --brand:#0b67ff;
    --stroke:#e5eaf2; --tag:#eef4ff; --btn:#0b67ff; --btnText:#fff;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ====== HEADER ====== */
.blog-top{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab,var(--bg) 88%, transparent);
  border-bottom:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--space);
}
.blog-top .brand{
  font-weight:800; letter-spacing:.4px; text-decoration:none; color:var(--text);
}
.blog-top .brand:hover{ color:color-mix(in oklab,var(--text) 85%, var(--brand)); }
.blog-top nav a{
  color:var(--muted); text-decoration:none; margin-left:14px; font-weight:600;
}
.blog-top nav a:hover,.blog-top nav a:focus{ color:var(--brand); }

.skip{position:absolute; left:-9999px}
.skip:focus{
  left:8px; top:8px; background:var(--brand); color:#fff; padding:8px 10px;
  border-radius:10px; z-index:999
}

/* ====== LAYOUT & TITLES ====== */
.container{max-width:1000px; margin:28px auto; padding:0 var(--space)}
h1{
  margin:0 0 6px; font-size:clamp(1.3rem,2.2vw,1.6rem);
  letter-spacing:.2px;
}
.sub{margin:0 0 18px; color:var(--muted)}

/* ====== GRID ====== */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}
@media (min-width: 980px){
  .post-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ====== CARD ====== */
.post-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab,var(--brand) 45%, var(--stroke));
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}
@media (prefers-reduced-motion:reduce){
  .post-card,.post-card:hover{ transition:none; transform:none; }
}

.post-card .title{
  display:block; margin:0 0 6px;
  font-weight:800; font-size:1rem; line-height:1.35;
  color:var(--text); text-decoration:none;
}
.post-card .title:hover{text-decoration:underline}
.post-card .excerpt{
  margin:0 0 12px;
  color:var(--muted);
  line-height:1.55;

  /* Modern tarayıcılar */
  line-clamp: 3;

  /* Safari / eski Chromium için geri dönüş */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;
  white-space: normal;

  /* Çok eski tarayıcılar için en basit fallback */
  max-height: calc(1.55em * 3);
}

.post-card .meta{ margin:0; color:color-mix(in oklab,var(--muted) 85%, var(--text)); font-size:.86rem }

/* ====== LOADING SKELETON ====== */
.skeleton{
  height:220px; border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:
    linear-gradient(90deg,
      color-mix(in oklab,var(--card) 88%, transparent) 25%,
      color-mix(in oklab,var(--card) 70%, white) 37%,
      color-mix(in oklab,var(--card) 88%, transparent) 63%);
  background-size:400% 100%; animation:shimmer 1.1s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ====== PAGER & BUTTONS ====== */
.pager{display:flex; justify-content:center; margin:18px 0}
.btn{
  background:var(--btn); color:var(--btnText);
  border:none; padding:10px 16px; border-radius:12px; cursor:pointer;
  font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn:focus-visible{ outline:3px solid color-mix(in oklab,var(--btn) 65%, white); outline-offset:2px }

/* ====== STATES ====== */
.empty,.error{
  margin:16px 0; padding:14px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--card); color:var(--muted)
}
.error{ color:#ff7a7a }