/* ==========================================================================
   BLOG — ŞEF NOTLARI  ·  sayfa katmanı (v50 sistemi)
   Tek aile Montserrat · eriyen katmanlı gölge · emoji yok
   ========================================================================== */

/* ---------- ortak yardımcılar ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t3d{text-shadow:0 1px 0 rgba(255,255,255,.55),0 10px 26px rgba(26,18,7,.16),0 30px 60px rgba(26,18,7,.1)}

/* ==========================================================================
   1) HERO — solda söz, sağda masaya bırakılmış iki not kartı
   ========================================================================== */
.bhero{padding-bottom:clamp(26px,3.4vw,44px);overflow:hidden}
.bhero-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.bhero-copy .display{font-weight:800;letter-spacing:-.025em;line-height:1.02}
.bhero-copy .lead{margin-top:16px;max-width:56ch}
.bhero-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;
  font-size:13.5px;font-weight:500;color:var(--ink2);
}
.bhero-meta b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;font-size:15px}
.bhero-meta .sep{width:5px;height:5px;border-radius:50%;background:var(--brass);opacity:.55;display:inline-block}

/* iki fotoğraf notu: masaya eğik bırakılmış, dururken fısıltı gibi salınır */
.bhero-notes{position:relative;height:clamp(260px,30vw,360px);min-width:0}
.bnote-pic{
  position:absolute;display:block;border-radius:20px;overflow:hidden;
  background-size:cover;background-position:center;
  border:1px solid rgba(26,18,7,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 5px rgba(26,18,7,.05),
    0 16px 34px rgba(26,18,7,.1),0 46px 92px -28px rgba(26,18,7,.2);
  transition:transform 600ms var(--e-manidar),box-shadow 500ms;
}
.bnote-pic em{
  position:absolute;left:12px;right:12px;bottom:11px;font-style:normal;
  font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--cream);
  text-shadow:0 1px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.55);
}
.bnote-pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(186deg,transparent 52%,rgba(15,10,5,.68));
}
.bnote-pic.p1{
  left:2%;top:4%;width:60%;aspect-ratio:4/5;transform:rotate(-6deg);
  animation:bnoteA 9s ease-in-out infinite;
}
.bnote-pic.p2{
  right:0;bottom:2%;width:54%;aspect-ratio:5/4;transform:rotate(5deg);z-index:2;
  animation:bnoteB 11s ease-in-out infinite;
}
@keyframes bnoteA{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-7px)}}
@keyframes bnoteB{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(4deg) translateY(6px)}}
.bhero-notes:hover .bnote-pic.p1{transform:rotate(-9deg) translate(-10px,-6px);animation:none}
.bhero-notes:hover .bnote-pic.p2{transform:rotate(8deg) translate(10px,6px);animation:none}

/* ==========================================================================
   2) KATEGORİ ÇİPLERİ — masaüstünde sarar, mobilde kaydırma şeridi
   ========================================================================== */
.bfilter-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:clamp(14px,2vw,26px);
}
.chipwrap{position:relative;flex:1;min-width:0}
.chiphint{
  display:none;position:absolute;right:-2px;top:50%;translate:0 -50%;z-index:3;
  width:30px;height:30px;border-radius:50%;background:var(--paper3);
  border:1px solid var(--line);color:var(--brass);
  align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 2px 5px rgba(26,18,7,.05),0 10px 22px rgba(26,18,7,.1);
  animation:chipnudge 2.4s ease-in-out infinite;pointer-events:none;
}
@keyframes chipnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.count-note{font-size:13px;color:var(--ink3);font-weight:600;white-space:nowrap}
.count-note b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* ==========================================================================
   3) EDİTORYAL GRID — manşet geniş, kalanlar ritimli
   ========================================================================== */
.blog-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.6vw,22px);align-items:start;
}
.blog-grid .mcard{grid-column:span 2}
.blog-grid .mcard.feat{grid-column:span 4}
.blog-grid .mcard.w{grid-column:span 2}
.blog-grid .mcard.m{grid-column:span 3}

.blog-grid .mcard{
  position:relative;border-radius:20px;overflow:hidden;display:block;
  background:var(--paper3);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 4px rgba(26,18,7,.04),
    0 12px 26px rgba(26,18,7,.08),0 40px 80px -28px rgba(26,18,7,.16);
  transition:transform 300ms var(--e-kagit),box-shadow 400ms,border-color 300ms;
}
.blog-grid .mcard .ph{position:relative;aspect-ratio:16/10;overflow:hidden}
.blog-grid .mcard.feat .ph{aspect-ratio:16/8.4}
.blog-grid .mcard .zoom{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 700ms var(--e-manidar);
}
.blog-grid .mcard:hover .zoom{transform:scale(1.06)}
.blog-grid .mcard .rtime{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--cream);
  background:rgba(15,10,5,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(216,172,92,.32);border-radius:999px;padding:5px 11px;
}
.blog-grid .mbody{
  position:relative;padding:16px 18px 44px;display:flex;flex-direction:column;gap:7px;
  background:rgba(251,247,238,.92);
}
.blog-grid .mcard .cat{
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
}
.blog-grid .mcard h3{
  font-family:var(--sans);font-weight:800;letter-spacing:-.015em;line-height:1.24;
  font-size:clamp(16px,1.35vw,19px);color:var(--ink);
}
.blog-grid .mcard.feat h3{font-size:clamp(20px,2vw,28px)}
.blog-grid .mcard .sum{font-size:13px;line-height:1.6;color:var(--ink2);font-weight:500}
.blog-grid .mcard .date{
  font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink3);margin-top:2px;
}
.blog-grid .mcard .lnk{
  position:absolute;left:18px;bottom:14px;font-size:12.5px;font-weight:800;color:var(--appetite);
  display:inline-flex;align-items:center;gap:7px;
}
.blog-grid .mcard .lnk .arr{transition:transform 300ms var(--e-kagit)}
.blog-grid .mcard:hover .lnk .arr{transform:translateX(5px)}

/* --- İMZA ESPRİ: not defterine iliştirilmiş kağıt bandı --- */
.simmer::before{
  content:"";position:absolute;z-index:4;left:50%;top:-9px;
  width:74px;height:22px;translate:-50% 0;rotate:-4deg;
  background:linear-gradient(160deg,rgba(216,172,92,.55),rgba(160,118,47,.42));
  border:1px solid rgba(160,118,47,.35);border-radius:3px;
  box-shadow:0 4px 10px rgba(26,18,7,.14),0 14px 28px -10px rgba(26,18,7,.2);
  opacity:0;transform:translateY(-10px) scale(.85);
  transition:opacity 320ms var(--e-manidar),transform 380ms var(--e-kagit);
  pointer-events:none;
}
/* bandın üzerindeki iğne deliği izi */
.simmer::after{
  content:"";position:absolute;z-index:5;left:50%;top:-1px;width:5px;height:5px;
  translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.85),rgba(120,84,30,.7));
  opacity:0;transition:opacity 320ms 60ms;pointer-events:none;
}
.simmer:hover::before{opacity:1;transform:translateY(0) scale(1)}
.simmer:hover::after{opacity:1}
.blog-grid .mcard:hover{
  transform:translateY(-6px);border-color:rgba(160,118,47,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px rgba(26,18,7,.07),
    0 26px 54px rgba(26,18,7,.13),0 70px 130px -34px rgba(160,118,47,.32);
}

/* ==========================================================================
   4) EN ÇOK OKUNANLAR — iri rakamlı numaralı liste
   ========================================================================== */
.mostread{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.mr-head{position:sticky;top:120px}
.mr-note{font-size:14px;line-height:1.65;color:var(--ink2);margin-top:14px;max-width:38ch}
.mr-list{list-style:none;margin:0;padding:0;counter-reset:mr}
.mr-list li+li{border-top:1px solid var(--line)}
.mr-list a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(14px,1.8vw,22px) 6px;text-decoration:none;position:relative;
  transition:padding-left 350ms var(--e-manidar);
}
.mr-list a::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;border-radius:14px;
  background:linear-gradient(100deg,rgba(216,172,92,.16),rgba(216,172,92,0));
  opacity:0;transition:opacity 350ms;
}
.mr-list a:hover{padding-left:16px}
.mr-list a:hover::before{opacity:1}
.mr-list .no{
  font-family:var(--sans);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(160,118,47,.55);
  font-variant-numeric:tabular-nums;transition:color 400ms,-webkit-text-stroke-color 400ms;
}
.mr-list a:hover .no{color:rgba(160,118,47,.95);-webkit-text-stroke-color:transparent}
.mr-list .tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.mr-list .tx b{font-weight:800;font-size:clamp(14px,1.2vw,16.5px);line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.mr-list .tx i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--ink3)}
.mr-list .go{color:var(--brass);font-size:17px;opacity:0;transform:translateX(-8px);transition:280ms var(--e-kagit)}
.mr-list a:hover .go{opacity:1;transform:none}

/* ==========================================================================
   5) KOYU BÜLTEN BANDI — alt çizgili form (King dili)
   ========================================================================== */
.nb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,70px);align-items:center}
.nb-form{max-width:520px;width:100%}
.nb-box{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border-bottom:1px solid rgba(245,239,228,.2);padding-bottom:8px;
  transition:border-color 350ms cubic-bezier(.215,.61,.355,1);
}
.nb-box:focus-within{border-color:var(--brass2)}
.nb-box input{
  border:0;padding:0;background:transparent;min-height:48px;width:100%;
  font-family:var(--sans);font-size:16px;font-weight:500;color:var(--cream);outline:0;
}
.nb-box input::placeholder{color:rgba(241,233,215,.45)}
.nb-arrow{
  width:36px;height:36px;border-radius:50%;border:0;background:var(--brass2);color:#151009;
  display:grid;place-items:center;cursor:pointer;overflow:hidden;
  transition:transform 300ms var(--e-kagit),background 250ms;
}
.nb-arrow:hover{background:#E7BC6C;transform:scale(1.06)}
.nb-arrow svg{width:14px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.nb-arrow:hover svg{transform:rotate(-45deg)}
.nb-msg{min-height:20px;margin-top:12px;font-size:13px;font-weight:600;line-height:1.5}
.nb-msg.ok{color:#9DBB7E}
.nb-msg.err{color:#E08B66}
.nb-note{font-size:12px;color:rgba(241,233,215,.5);margin-top:6px;font-weight:500}

/* ==========================================================================
   6) MOBİL — ayrı düzen: kartlaşma + yatay çip şeridi
   ========================================================================== */
@media (max-width:1020px){
  .bhero-grid{grid-template-columns:1fr;gap:24px}
  .bhero-notes{height:220px;order:-1;max-width:420px}
  .blog-grid{grid-template-columns:repeat(4,1fr)}
  .blog-grid .mcard,.blog-grid .mcard.w{grid-column:span 2}
  .blog-grid .mcard.feat,.blog-grid .mcard.m{grid-column:span 4}
  .mostread{grid-template-columns:1fr;gap:24px}
  .mr-head{position:static}
  .nb-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  .bfilter-row{flex-wrap:nowrap;align-items:center}
  .chipwrap{
    margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .chipbar{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-block:4px;scroll-padding-inline:var(--gut);
  }
  .chipbar::-webkit-scrollbar{display:none}
  .chipbar .chip{flex:none;scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center}
  .chiphint{display:flex}
  .count-note{display:none}

  .blog-grid{grid-template-columns:1fr;gap:14px}
  .blog-grid .mcard,.blog-grid .mcard.feat,.blog-grid .mcard.w,.blog-grid .mcard.m{grid-column:1/-1}
  .blog-grid .mcard .ph,.blog-grid .mcard.feat .ph{aspect-ratio:16/9}
  .blog-grid .mcard h3,.blog-grid .mcard.feat h3{font-size:18px}
  .blog-grid .mcard:hover{transform:none}
  .simmer::before,.simmer::after{display:none}
  .blog-grid .mcard .lnk{position:static;margin-top:8px}
  .blog-grid .mbody{padding-bottom:16px}

  .bhero-notes{height:190px}
  .mr-list a{grid-template-columns:auto 1fr;gap:14px;padding-block:14px}
  .mr-list .go{display:none}
  .nb-box input{font-size:16px}
  .nb-arrow{width:44px;height:44px}
}
@media (max-width:520px){
  .bhero-meta{font-size:12.5px;gap:9px}
}

/* ---------- erişilebilirlik: hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  .bnote-pic{animation:none;transition:none}
  .bhero-notes:hover .bnote-pic.p1,.bhero-notes:hover .bnote-pic.p2{transform:rotate(0) translate(0,0)}
  .chiphint{animation:none}
  .blog-grid .mcard:hover{transform:none}
  .blog-grid .mcard:hover .zoom{transform:none}
  .simmer:hover::before{transform:none}
}