/* blog.css — Ofisinburada blog (liste + editoryal tekil yazı). ui.css değişkenlerini kullanır. */

/* ---------- liste ---------- */
.blog-pg{max-width:1180px}
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:30px; margin-top:6px}
.blog-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 4px 22px rgba(34,22,25,.05); transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s}
.blog-card:hover{transform:translateY(-5px); box-shadow:0 26px 44px rgba(34,22,25,.12)}
.bc-media{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--paper-deep)}
.bc-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.blog-card:hover .bc-media img{transform:scale(1.05)}
.bc-media.noimg{position:relative; background:linear-gradient(135deg,var(--wine),var(--bordo))}
.bc-media.noimg::after{content:""; position:absolute; inset:0; background:radial-gradient(130% 90% at 28% 18%, rgba(255,255,255,.12), transparent 62%)}
.bc-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.bc-meta{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-45); margin-bottom:12px}
.bc-title{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.2; letter-spacing:-.01em; margin:0 0 10px}
.bc-title a{color:var(--ink); text-decoration:none}
.bc-title a:hover{color:var(--bordo)}
.bc-exc{font-size:14px; line-height:1.65; color:var(--ink-70); margin:0 0 16px; flex:1}
.bc-more{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--bordo); text-decoration:none; margin-top:auto}
.bc-more:hover{color:var(--wine)}

/* sayfalama */
.blog-pager{display:flex; gap:8px; justify-content:center; margin:52px 0 0; flex-wrap:wrap}
.blog-pager a,.blog-pager span{min-width:40px; height:40px; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:100px; font-size:14px; color:var(--ink-70); text-decoration:none; padding:0 13px; transition:.3s}
.blog-pager a:hover{border-color:var(--ink); color:var(--ink)}
.blog-pager .current{background:var(--bordo); border-color:var(--bordo); color:#fff}
.blog-pager .dots{border:0}

/* boş durum + yazarlık CTA */
.blog-empty{max-width:620px; margin:4px 0 0; text-align:center; padding:54px 40px}
.be-mark{width:66px; height:66px; margin:0 auto 24px; border-radius:50%; display:grid; place-items:center; background:rgba(138,36,54,.08); color:var(--bordo)}
.be-mark svg{width:30px; height:30px; display:block}
.blog-empty h2{font-family:var(--serif); font-weight:400; font-size:27px; margin:0 0 12px}
.blog-empty p{font-size:15px; line-height:1.7; color:var(--ink-70); max-width:470px; margin:0 auto 26px}
.blog-cta{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:58px 0 0; padding:30px 34px; border:1px solid var(--line); border-radius:16px; background:#fff}
.blog-cta p{font-family:var(--serif); font-size:19px; line-height:1.4; color:var(--ink); margin:0; max-width:560px}

/* butonlar — home.css global .btn-solid(gümüş)/.btn-ghost(açık) kurallarını blog bileşenlerinde ez */
.blog-empty .btn-solid,.blog-cta .btn-solid{background:var(--bordo); color:#fff; border-color:transparent}
.blog-empty .btn-solid:hover,.blog-cta .btn-solid:hover{background:var(--wine); transform:translateY(-2px)}
.art-foot .btn-ghost{color:var(--ink); border-color:rgba(34,22,25,.3); background:transparent}
.art-foot .btn-ghost:hover{border-color:var(--ink); color:var(--ink)}

/* ==================== EDİTORYAL TEKİL YAZI ==================== */
.blog-single{max-width:none; padding-top:58px}

/* masthead (yazıya özel başlık) */
.art-head{max-width:880px; margin:0 auto; text-align:center}
.art-head .bs-crumb{justify-content:center; display:flex; gap:6px; font-size:12px; letter-spacing:.04em; color:var(--ink-45); margin:0 0 26px}
.art-head .bs-crumb a{color:inherit; text-decoration:none}
.art-head .bs-crumb a:hover{color:var(--ink)}
.art-head .bs-crumb .sep{opacity:.5}
.art-head .bs-crumb .cur{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.art-kick{font-size:12px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--bordo); margin:0 0 22px}
.art-title{font-family:var(--serif); font-weight:300; font-size:clamp(40px,5.6vw,72px); line-height:1.02; letter-spacing:-.022em; margin:0 0 24px}
.art-stand{font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.4vw,25px); line-height:1.5; color:var(--ink-70); max-width:700px; margin:0 auto 38px}
.art-byline{display:flex; justify-content:center; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:28px; margin-top:6px}
.art-avatar{width:48px; height:48px; border-radius:50%; background:var(--bordo); color:#fff; display:grid; place-items:center; font-family:var(--serif); font-size:21px; flex:none}
.art-by{display:flex; flex-direction:column; text-align:left; line-height:1.32}
.art-by b{font-size:14px; font-weight:600; color:var(--ink)}
.art-by span{font-size:12px; color:var(--ink-45); letter-spacing:.03em}

/* çerçeveli hero */
.art-hero{max-width:1040px; margin:46px auto 4px}
.art-hero-media{border:1px solid var(--line); border-radius:18px; overflow:hidden; aspect-ratio:16/9; max-height:540px; background:var(--paper-deep)}
.art-hero-media img{width:100%; height:100%; object-fit:cover; display:block}
.art-hero figcaption{font-size:12.5px; color:var(--ink-45); text-align:center; margin-top:14px; letter-spacing:.02em}

/* gövde + yapışkan paylaşım rayı */
.art-wrap{max-width:900px; margin:38px auto 0; display:grid; grid-template-columns:54px minmax(0,1fr); gap:46px; align-items:start}
.art-rail{position:sticky; top:104px; display:flex; flex-direction:column; align-items:center; gap:11px}
.rail-label{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); writing-mode:vertical-rl; margin-bottom:8px}

/* paylaşım butonu (ray + footer ortak) */
.sh-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink-70); display:grid; place-items:center; cursor:pointer; transition:all .25s cubic-bezier(.2,.7,.3,1); text-decoration:none; padding:0}
.sh-btn svg{width:17px; height:17px; display:block}
.sh-btn:hover{background:var(--bordo); border-color:var(--bordo); color:#fff; transform:translateY(-2px)}
.sh-btn.copied{background:#2e7d46; border-color:#2e7d46; color:#fff}

/* okuma gövdesi (post-body üstüne) */
.art-body{font-size:16.5px; line-height:1.82; color:rgba(34,22,25,.86)}
.art-body > p:first-of-type::first-letter{font-family:var(--serif); font-weight:400; font-size:66px; line-height:.72; float:left; margin:9px 13px 0 0; color:var(--bordo)}
.art-body blockquote{border-left:0; text-align:center; max-width:600px; margin:44px auto; padding:0; font-family:var(--serif); font-style:normal; font-size:clamp(22px,2.6vw,27px); line-height:1.38; color:var(--wine); letter-spacing:-.01em}
.art-body blockquote::before{content:""; display:block; width:38px; height:3px; border-radius:2px; background:var(--bordo); margin:0 auto 22px}
.art-body figure{margin:34px 0}
.art-body figure img{width:auto; height:auto; max-width:100%; max-height:400px; margin:0 auto; display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px}
.art-body figcaption{font-size:12.5px; color:var(--ink-45); text-align:center; margin-top:13px}

/* post-body ortak tipografi (art-body ile paylaşılır) */
.post-body{font-size:16.5px; line-height:1.82; color:rgba(34,22,25,.86)}
.post-body > *{margin:0 0 22px}
.post-body > *:last-child{margin-bottom:0}
.post-body h2{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.15; margin:46px 0 14px}
.post-body h3{font-family:var(--serif); font-weight:500; font-size:21px; margin:34px 0 10px}
.post-body a{color:var(--bordo); text-decoration:underline; text-underline-offset:2px}
.post-body a:hover{color:var(--wine)}
.post-body ul,.post-body ol{padding-left:24px}
.post-body li{margin:0 0 8px}
.post-body img{max-width:100%; height:auto; border-radius:12px; display:block}
.post-body blockquote p{margin:0}
.post-body strong,.post-body b{color:var(--ink); font-weight:600}

/* makale altbilgi: paylaşım + geri dön */
.art-foot{max-width:720px; margin:56px auto 0; padding-top:34px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:28px; text-align:center}
.af-share{display:flex; flex-direction:column; align-items:center; gap:15px}
.af-label{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45)}
.af-btns{display:flex; gap:12px}

/* diğer yazılar (makale sonu) */
.art-related{max-width:1180px; margin:74px auto 0; padding-top:46px; border-top:1px solid var(--line)}
.ar-head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 0 28px}
.ar-head h2{font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); letter-spacing:-.01em; margin:0}
.ar-head a{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--bordo); text-decoration:none; white-space:nowrap}
.ar-head a:hover{color:var(--wine)}
.ar-grid .bc-title{font-size:19px}

/* toast (bağlantı kopyalandı) */
.sh-toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; font-size:13px; letter-spacing:.02em; padding:12px 22px; border-radius:100px; opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; z-index:400}
.sh-toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* mobil */
@media(max-width:860px){
  .art-wrap{grid-template-columns:1fr; gap:0; max-width:640px}
  .art-rail{position:static; flex-direction:row; justify-content:center; gap:12px; margin:0 0 30px; padding-bottom:26px; border-bottom:1px solid var(--line)}
  .rail-label{writing-mode:horizontal-tb; margin:0 4px 0 0}
  .art-hero{margin-top:34px}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr; gap:22px}
  .blog-cta{flex-direction:column; align-items:flex-start}
  .art-body,.post-body{font-size:16px}
  .art-body > p:first-of-type::first-letter{font-size:56px; margin-top:7px}
}