/* ============================================
   ShiftCV Blog — temiz, okunabilir, SEO/marka uyumlu
   ============================================ */
:root{
  --pr:#2563eb; --pr2:#7c3aed; --cy:#06b6d4;
  --ink:#0f172a; --txt:#1e293b; --muted:#64748b; --line:#e2e8f0;
  --bg:#f8fafc; --card:#ffffff; --dark:#0b1120;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:18px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--pr); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ── Header ── */
.bl-header{
  background:var(--dark); border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky; top:0; z-index:20;
}
.bl-header-in{
  max-width:1080px; margin:0 auto; padding:.7rem 1.2rem;
  display:flex; align-items:center; gap:1rem;
}
.bl-brand{display:flex; align-items:center; gap:.55rem; font-weight:800; color:#fff; font-size:1.15rem}
.bl-brand:hover{text-decoration:none}
.bl-brand .logo{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#8b5cf6,#06b6d4); display:flex; align-items:center; justify-content:center}
.bl-brand .logo svg{width:18px; height:18px}
.bl-brand b{color:#fff} .bl-brand span{color:#22d3ee}
.bl-nav{margin-left:auto; display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
.bl-nav a{color:#cbd5e1; font-size:.92rem; font-weight:500}
.bl-nav a:hover{color:#fff; text-decoration:none}
.bl-cta-top{background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff!important; padding:.5rem 1rem; border-radius:50px; font-weight:700}

/* ── Article ── */
.bl-wrap{max-width:var(--maxw); margin:0 auto; padding:2.2rem 1.2rem 3rem}
.bl-crumb{font-size:.83rem; color:var(--muted); margin-bottom:1.4rem}
.bl-crumb a{color:var(--muted)} .bl-crumb a:hover{color:var(--pr)}
.bl-tag{display:inline-block; background:#eef2ff; color:#4338ca; font-size:.72rem; font-weight:700; padding:.2rem .7rem; border-radius:50px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:.9rem}
.bl-wrap h1{font-size:2.3rem; line-height:1.18; color:var(--ink); font-weight:800; letter-spacing:-.5px; margin:.2rem 0 .7rem}
.bl-meta{display:flex; gap:1rem; align-items:center; font-size:.86rem; color:var(--muted); margin-bottom:1.8rem; flex-wrap:wrap}
.bl-meta .dot{width:4px; height:4px; border-radius:50%; background:#cbd5e1}
.bl-lead{font-size:1.22rem; line-height:1.65; color:#334155; font-weight:500; margin:0 0 1.8rem; padding-left:1.1rem; border-left:4px solid var(--cy)}
.bl-article h2{font-size:1.55rem; color:var(--ink); font-weight:800; letter-spacing:-.3px; margin:2.4rem 0 .9rem; padding-top:.4rem}
.bl-article h3{font-size:1.2rem; color:var(--ink); font-weight:700; margin:1.8rem 0 .6rem}
.bl-article p{margin:0 0 1.15rem}
.bl-article ul,.bl-article ol{margin:0 0 1.3rem; padding-left:1.3rem}
.bl-article li{margin:.45rem 0}
.bl-article strong{color:var(--ink)}
.bl-article blockquote{margin:1.6rem 0; padding:1rem 1.3rem; background:#f1f5f9; border-left:4px solid var(--pr2); border-radius:0 8px 8px 0; color:#334155; font-style:italic}
.bl-table{width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.95rem}
.bl-table th,.bl-table td{border:1px solid var(--line); padding:.6rem .8rem; text-align:left}
.bl-table th{background:#f1f5f9; font-weight:700; color:var(--ink)}
.bl-table tr:nth-child(even) td{background:#fafbfc}

/* ── CTA kutusu ── */
.bl-cta{
  background:linear-gradient(135deg,#1e293b,#0f172a); border:1px solid rgba(124,58,237,.3);
  border-radius:16px; padding:1.6rem 1.7rem; margin:2.2rem 0; text-align:center;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
}
.bl-cta h3{color:#fff; font-size:1.3rem; margin:0 0 .4rem}
.bl-cta p{color:#cbd5e1; margin:0 0 1.1rem; font-size:1rem}
.bl-cta a.btn{display:inline-block; background:linear-gradient(135deg,#2563eb,#7c3aed); color:#fff; font-weight:700; padding:.8rem 1.8rem; border-radius:50px; font-size:1.02rem}
.bl-cta a.btn:hover{text-decoration:none; transform:translateY(-1px); box-shadow:0 8px 22px rgba(37,99,235,.4)}
.bl-cta small{display:block; color:#94a3b8; margin-top:.7rem; font-size:.82rem}

/* ── FAQ ── */
.bl-faq{margin-top:1rem}
.bl-faq details{border:1px solid var(--line); border-radius:10px; padding:.2rem 1.1rem; margin-bottom:.7rem; background:var(--card)}
.bl-faq summary{font-weight:700; color:var(--ink); cursor:pointer; padding:.85rem 0; list-style:none; font-size:1.02rem}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary::after{content:'+'; float:right; color:var(--pr); font-weight:700; font-size:1.3rem; line-height:1}
.bl-faq details[open] summary::after{content:'–'}
.bl-faq details[open] summary{border-bottom:1px solid var(--line)}
.bl-faq p{padding:.9rem 0 .4rem; margin:0; color:#334155}

/* ── İlgili / araç linkleri ── */
.bl-related{margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid var(--line)}
.bl-related h2{font-size:1.25rem; margin:0 0 1rem}
.bl-toolgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem}
.bl-toolcard{display:block; border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; background:var(--card); transition:.18s}
.bl-toolcard:hover{text-decoration:none; border-color:var(--pr); transform:translateY(-2px); box-shadow:0 6px 18px rgba(37,99,235,.12)}
.bl-toolcard b{display:block; color:var(--ink); font-size:1.02rem; margin-bottom:.2rem}
.bl-toolcard span{color:var(--muted); font-size:.88rem}

/* ── Blog index ── */
.bl-hero{background:linear-gradient(135deg,#0b1120,#1e1b4b); color:#fff; padding:3rem 1.2rem 2.6rem; text-align:center}
.bl-hero h1{font-size:2.4rem; font-weight:800; margin:0 0 .6rem; color:#fff; letter-spacing:-.5px}
.bl-hero p{font-size:1.15rem; color:#cbd5e1; max-width:600px; margin:0 auto}
.bl-list{max-width:1080px; margin:0 auto; padding:2.4rem 1.2rem 3rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.4rem}
.bl-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); transition:.2s}
.bl-card:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 14px 36px rgba(15,23,42,.12); border-color:#c7d2fe}
.bl-card .thumb{height:140px; background:linear-gradient(135deg,#8b5cf6,#06b6d4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem}
.bl-card .body{padding:1.2rem 1.3rem 1.4rem}
.bl-card .bl-tag{margin-bottom:.6rem}
.bl-card h2{font-size:1.2rem; color:var(--ink); margin:0 0 .5rem; line-height:1.3; font-weight:700}
.bl-card p{color:var(--muted); font-size:.94rem; margin:0 0 .9rem; line-height:1.6}
.bl-card .more{color:var(--pr); font-weight:700; font-size:.9rem}

/* ── Footer ── */
.bl-footer{background:var(--dark); color:#94a3b8; padding:2rem 1.2rem; text-align:center; font-size:.88rem; margin-top:2rem}
.bl-footer a{color:#cbd5e1; margin:0 .6rem}
.bl-footer .row{margin-bottom:.8rem}

@media(max-width:600px){
  body{font-size:17px}
  .bl-wrap h1{font-size:1.85rem}
  .bl-hero h1{font-size:1.9rem}
  .bl-article h2{font-size:1.35rem}
  .bl-nav{display:none}
}