@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap");
:root{
  --brand:#e0260e;
  --brand-600:#b31818;
  --ink:#0f172a;
  --muted:#475569;
  --paper:#ffffff;
  --line:#e7eaf0;
  --radius:16px;
  --wrap:min(900px, 92vw);
}

/* Reset & Base - (isteğin doğrultusunda globalde dursun) */
#subheader{ display:none; }
#mainmenu a{ color:#b31818 !important; }
#sidebar{margin-top: 150px;}

/* Sayfa temeli */
html,#content{ margin:0; padding:0; background:var(--paper); color:var(--ink); }
body{ font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height:1.7; }

/* Konteyner */
.blog-wrap{ max-width:var(--wrap); margin: 100px auto 64px; /* hero için global offsete uyum */ padding: 0 16px; }

/* Üst başlık alanı */
.post-head{ margin: 18px 0 18px; }
.post-kicker{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: color-mix(in oklab, var(--brand), #fff 85%);
  color: var(--brand-600); font-weight:800; letter-spacing:.08em; font-size:12px;
  border:1px solid color-mix(in oklab, var(--brand), #fff 60%);
}
.post-title{
  margin:10px 0 8px; font-size: clamp(26px, 4.2vw, 40px); line-height:1.15; letter-spacing:-.01em; font-weight:800;
}
.post-sub{
  margin:0; color:var(--muted); font-size: clamp(15px, 2.2vw, 18px); max-width:75ch;
}

/* Görsel (opsiyonel) */
.post-hero{
  margin:18px 0 10px; border-radius: var(--radius); overflow:hidden; background:#f8fafc;
  border:1px solid var(--line);
}
.post-hero img{ display:block; width:100%; height:auto; object-fit:cover; }

/* Gövde */
.post-body{ margin-top: 12px; }
.post-body p{ margin: 0 0 14px; font-size: clamp(15px, 2.1vw, 17px); }
.post-body b, .post-body strong{ font-weight:700; }

/* Öne çıkan kutu */
.callout{
  border:1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand), #fff 92%), #fff);
  border-radius: var(--radius);
  padding:16px 16px;
  margin: 8px 0 16px;
}
.callout h3{ margin:0 0 6px; font-size:18px; }
.callout p{ margin:0; color:#334155; }

/* Uygulama başlığı */
.h4{
  margin: 18px 0 8px; font-weight:800; font-size: clamp(18px, 2.6vw, 22px);
}

/* Uygulama listesi */
.app-list{ list-style:none; padding:0; margin:10px 0 6px; display:grid; gap:10px; }
.app-item{
  display:grid; grid-template-columns: auto 1fr; gap:10px; align-items:start;
  padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.app-item i{
  width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; font-style:normal; font-weight:800;
  background: color-mix(in oklab, var(--brand), #fff 88%); color: var(--brand);
  border:1px solid color-mix(in oklab, var(--brand), #fff 60%);
}

/* Dip bilgi */
.meta-note{
  margin-top:10px; padding:12px; border-left:4px solid var(--brand); background:#fff; border-radius:10px;
  color:#334155; font-size:14px;
}

/* Link stili */
a.inline{
  color: var(--brand-600); border-bottom:1px solid color-mix(in oklab, var(--brand), #fff 50%); text-decoration:none;
}
a.inline:hover{ border-bottom-color: var(--brand-600); }

/* Mobil iyileştirme */
@media (max-width:480px){
  .app-item{ padding:10px; }
  #sidebar{margin-top: 0;}
}