/* ================================
   BuDemekNe - style.css (tam sürüm)
   ================================ */

/* ---- Tema değişkenleri ---- */
:root{
  --bg:#0b0c10;
  --card:#111318;
  --text:#e6e8f0;
  --muted:#9aa3b2;
  --brand:#6ee7ff;
  --accent:#a78bfa;
  --border:#1a1e2a;
}

/* ---- Reset / temel ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* ---- Genel layout ---- */
.container{max-width:940px;margin:0 auto;padding:0 20px}

/* =========================
   HEADER (tek satır – kompakt)
   ========================= */
.site-header{
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid #1c1f26;
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(8px);
}
.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  min-height:60px;
}

/* Logo + marka birlikte, tek anchor */
.brand{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800; font-size:22px; line-height:1;
}
.brand:hover{text-decoration:none}
.brand .dot{color:var(--accent)}
.brand .logo{
  width:34px; height:34px; object-fit:contain;
  filter: drop-shadow(0 0 6px #6ee7ff80);
}

/* Menü */
.nav{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.nav a{
  color:var(--text); opacity:.85; font-weight:600;
  transition:opacity .15s ease,color .15s ease;
}
.nav a:hover{opacity:1; color:var(--brand)}
/* Küçük ekranlarda menüyü biraz sıkıştır */
@media (max-width:640px){
  .header-flex{gap:16px; padding:12px 0}
  .brand{font-size:20px}
  .brand .logo{width:28px;height:28px}
  .nav{gap:16px}
}

/* =========================
   HERO / arama
   ========================= */
.hero{padding:40px 0 28px}
.hero h1{font-size:36px;margin:0 0 6px}
.hero p{margin:0 0 10px;color:var(--muted)}
.search{margin-top:12px;display:flex;gap:8px}
.search input{
  flex:1; padding:10px 12px; border-radius:10px;
  border:1px solid #242838; background:#0f1117; color:#fff;
}
.search button{
  padding:10px 14px; border-radius:10px; border:1px solid #2b3040;
  background:#151826; color:#fff; cursor:pointer;
}
.search button:hover{background:#171a2a}

/* =========================
   Kart ızgarası / içerik
   ========================= */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:6px
}
.card h3{margin:0 0 4px; font-size:18px}
.meta{color:var(--muted); font-size:13px; margin-top:-6px}
.badge{
  display:inline-block; padding:2px 8px; border:1px solid #2a3040;
  border-radius:999px; font-size:12px; color:var(--muted)
}
.more{margin-top:10px}

/* =========================
   Yazı sayfası
   ========================= */
.post{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:20px; margin-top:20px
}
.post h1{margin:0 0 6px}
.breadcrumb{color:var(--muted); font-size:13px; margin:0 0 8px}
.content p{margin:0 0 12px}

/* =========================
   Footer
   ========================= */
.site-footer{
  margin-top:30px; border-top:1px solid var(--border);
  color:var(--muted)
}
.site-footer .container{padding:18px 20px}

/* =========================
   Yardımcı
   ========================= */
h2{margin:16px 0 10px}
.hidden{display:none!important}
/* ===== Modal ===== */
.modal.hidden{display:none}
.modal{position:fixed; inset:0; z-index:50}
.modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.modal__dialog{
  position:relative; z-index:1;
  max-width:820px; margin:6vh auto; padding:0 16px;
}
.modal .post{
  max-height:80vh; overflow:auto; /* uzun içerikte scroll */
}
.modal__close{
  position:absolute; top:10px; right:24px;
  border:1px solid var(--border); background:#151826; color:#e6e8f0;
  padding:6px 10px; border-radius:10px; cursor:pointer;
}
body.modal-open{overflow:hidden} /* arka plan scroll’u kilitle */