/* 113sec blog — paylasimli stil */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --black:#0a0a0a; --white:#f2f0eb; --off:#111; --line:rgba(242,240,235,0.07);
  --line2:rgba(242,240,235,0.13); --muted:rgba(242,240,235,0.55); --muted2:rgba(242,240,235,0.3);
  --blue:#1c71d8; --blue-dim:rgba(28,113,216,0.1);
  --fd:'Bebas Neue',sans-serif; --fb:'DM Sans',sans-serif; --fm:'DM Mono',monospace;
}
html,body { background:var(--black); color:var(--white); font-family:var(--fb); -webkit-font-smoothing:antialiased; }

/* NAV */
.bn { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px 56px; background:rgba(10,10,10,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.bn-l { font-family:var(--fd); font-size:24px; letter-spacing:3px; color:var(--white); text-decoration:none; }
.bn-lb { color:var(--blue); }
.bn-c { font-family:var(--fm); font-size:11px; color:var(--muted); text-decoration:none; letter-spacing:1.5px; text-transform:uppercase; }
.bn-c:hover { color:var(--white); }
.bn-cta { font-family:var(--fm); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--black); background:var(--white); padding:10px 22px; text-decoration:none; transition:background .2s; }
.bn-cta:hover { background:var(--blue); color:var(--white); }

/* HERO */
.bh { position:relative; height:480px; overflow:hidden; }
.bh-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45; }
.bh::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.85) 70%, var(--black) 100%); }
.bh-inner { position:absolute; inset:0; max-width:880px; margin:0 auto; padding:0 56px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:56px; z-index:2; }
.bh-cat { font-family:var(--fm); font-size:11px; color:var(--blue); letter-spacing:3px; text-transform:uppercase; margin-bottom:18px; }
.bh-t { font-family:var(--fd); font-size:clamp(38px,6vw,72px); line-height:1.05; letter-spacing:1px; max-width:780px; margin-bottom:24px; }
.bh-m { display:flex; gap:24px; font-family:var(--fm); font-size:11px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; }
.bh-d::before { content:'\00B7  '; color:var(--blue); }

/* ARTICLE */
.ba { max-width:760px; margin:0 auto; padding:80px 56px 60px; font-size:17px; line-height:1.85; color:rgba(242,240,235,0.85); }
.ba p { margin-bottom:24px; }
.ba h2 { font-family:var(--fd); font-size:32px; line-height:1.15; letter-spacing:1px; color:var(--white); margin:48px 0 20px; border-top:1px solid var(--line); padding-top:32px; }
.ba h3 { font-family:var(--fb); font-size:20px; font-weight:600; color:var(--white); margin:36px 0 16px; }
.ba ul, .ba ol { margin:16px 0 24px 24px; padding-left:8px; }
.ba li { margin-bottom:8px; }
.ba strong { color:var(--white); font-weight:500; }
.ba a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.ba blockquote { margin:32px 0; padding:18px 24px; border-left:2px solid var(--blue); background:rgba(28,113,216,0.06); font-style:italic; color:var(--white); }
.bf { margin:48px -56px; }
.bf img { width:100%; height:auto; display:block; opacity:.85; }

/* CTA */
.bc { max-width:760px; margin:60px auto; padding:48px 56px; background:rgba(28,113,216,0.06); border:1px solid rgba(28,113,216,0.2); text-align:center; }
.bc h3 { font-family:var(--fd); font-size:32px; letter-spacing:1px; color:var(--white); margin-bottom:14px; }
.bc p { font-size:15px; color:var(--muted); margin-bottom:24px; }
.bc-btn { display:inline-block; font-family:var(--fm); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--black); background:var(--white); padding:14px 28px; text-decoration:none; transition:background .2s,color .2s; }
.bc-btn:hover { background:var(--blue); color:var(--white); }

/* FOOTER */
.bft { display:flex; align-items:center; justify-content:space-between; padding:32px 56px; border-top:1px solid var(--line); margin-top:0; }
.bft-l { font-family:var(--fd); font-size:18px; letter-spacing:3px; color:var(--white); }
.bft-r { display:flex; gap:24px; }
.bft-r a { font-family:var(--fm); font-size:10px; color:var(--muted); text-decoration:none; letter-spacing:1.5px; text-transform:uppercase; }
.bft-r a:hover { color:var(--white); }
.bft-c { font-family:var(--fm); font-size:10px; color:var(--muted2); letter-spacing:1px; }

/* BLOG INDEX */
.bx { max-width:1240px; margin:0 auto; padding:80px 56px; }
.bx-h { font-family:var(--fd); font-size:64px; letter-spacing:2px; margin-bottom:14px; color:var(--white); }
.bx-s { font-size:16px; color:var(--muted); margin-bottom:60px; max-width:600px; }
.bx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bx-c { background:var(--off); border:1px solid var(--line); transition:border-color .25s,transform .25s; text-decoration:none; color:inherit; display:block; }
.bx-c:hover { border-color:var(--blue); transform:translateY(-2px); }
.bx-c img { width:100%; height:200px; object-fit:cover; opacity:.65; transition:opacity .3s; display:block; }
.bx-c:hover img { opacity:.95; }
.bx-cb { padding:22px 24px 28px; }
.bx-ct { font-family:var(--fm); font-size:10px; color:var(--blue); letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.bx-cn { font-family:var(--fb); font-size:18px; font-weight:500; color:var(--white); line-height:1.35; margin-bottom:10px; }
.bx-cd { font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.bx-cm { display:flex; gap:14px; font-family:var(--fm); font-size:10px; color:var(--muted2); letter-spacing:1.5px; text-transform:uppercase; }

@media(max-width:900px) {
  .bn { padding:14px 20px; }
  .bn-l { font-size:18px; }
  .bn-c { display:none; }
  .bh { height:360px; }
  .bh-inner { padding:0 24px 40px; }
  .ba { padding:50px 24px; }
  .bf { margin:36px -24px; }
  .bc { padding:36px 24px; }
  .bft { flex-direction:column; gap:18px; padding:24px; text-align:center; }
  .bx { padding:50px 24px; }
  .bx-h { font-size:42px; }
  .bx-grid { grid-template-columns:1fr; }
}