/* FairSole – görsel katman (site.css'in üstüne). Yalnızca FairSole sayfalarında yüklenir. */
@font-face{font-family:"Bricolage";font-weight:500 800;font-stretch:75% 100%;font-display:swap;src:url(fonts/bricolage.woff) format("woff")}

:root{--lantern:#E3A72F;--fjord:#2F5D73;--frost:#E9EFF2;--display:"Bricolage","Inter Display",Inter,system-ui,sans-serif}

/* Başlıklar: dar, kutu etiketi gibi */
.cond,.lead,.seo h1,.how h2,.cats h2,.guides h2,.amzpicks h2,.related h2,.prose h2{font-family:var(--display);font-stretch:80%;font-weight:700;letter-spacing:-.005em}
.lead{font-size:clamp(44px,6.6vw,84px);line-height:.95;max-width:11ch;margin:18px 0 18px}
.seo h1{font-size:clamp(36px,5.4vw,60px);line-height:.98;max-width:18ch}
.how h2,.cats h2,.guides h2,.related h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:14px}
.prose h2{font-size:clamp(24px,2.8vw,32px);line-height:1.05}

/* Hero: kemerli pencere – sitenin tek “gösterişli” öğesi */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;margin:6px 0 28px}
.hero-txt{padding-bottom:6px}
.hero .pitch{flex-direction:column;gap:8px;font-size:16px;margin-bottom:0}
.hero-art{position:relative;aspect-ratio:5/4;border-radius:260px 260px 26px 26px;overflow:hidden;background:var(--frost);box-shadow:inset 0 0 0 1px rgb(27 42 53/.08)}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero-art{aspect-ratio:16/11;border-radius:160px 160px 22px 22px;order:2}
}

/* Kullanım kutucukları: sahne küçük resmi */
.cats ul{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.cats a{padding:0;overflow:hidden;gap:0}
.cats .thumb{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 70%;border-bottom:1px solid var(--line)}
.cats .ctxt{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px}
.cats .ctxt span{font-size:13px;color:var(--muted)}

/* Rehber kartları: kapak sahnesi */
.gcards a{padding:0;overflow:hidden;gap:0}
.gcards .cover{display:block;width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;object-position:50% 80%;border-bottom:1px solid var(--line);background:var(--frost)}
.gcards .gtxt{display:flex;flex-direction:column;gap:6px;padding:14px 18px 18px;font-size:inherit;color:inherit;line-height:inherit}
.gcards .gtxt strong{font-family:var(--display);font-stretch:85%;font-size:19px;line-height:1.12;font-weight:700}
.gcards .gtxt span{font-size:14px;color:var(--muted);line-height:1.45}
.gcards a:hover .cover{filter:saturate(1.15)}

/* Rehber sayfası afişi */
.gbanner{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 85%;border-radius:22px;margin:6px 0 26px;background:var(--frost)}
@media (max-width:640px){.gbanner{aspect-ratio:16/9;border-radius:16px}}

/* Fiyat alarmı: fener sarısı vurgu */
.alertbox{border-color:var(--lantern)!important;border-width:2px!important}
.alertbox svg{color:var(--lantern)}

/* Odak görünürlüğü */
a:focus-visible,button:focus-visible{outline:3px solid var(--lantern);outline-offset:2px}

@media (prefers-color-scheme:dark){
  :root{--frost:#1D2731}
  .hero-art{box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
}