/* TrendHub — font bölümü. Yalnızca font sayfalarında yüklenir (site.css'in üstüne). CSP gereği şablonlarda style="…" yok:
   kendi fontuyla çizilen öğeler [data-ff] taşır, font-family'yi assets/site/fonts.js atar (yüklenene dek site yazı tipi görünür). */

/* ---- rozet, kart, ızgara ---- */
.fbadge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--ink2);white-space:nowrap;background:#fff}
.fbadge--info{border-color:#E9C9B8;background:#FFF4EE;color:#8A3A14}
[data-ff]{transition:opacity .2s}
[data-ff]:not(.is-on){opacity:.82}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--ink)}
.fgrid--3{border-top-color:var(--line)}
.fcard{position:relative;display:grid;align-content:space-between;gap:14px;min-height:148px;padding:22px 0 18px;border-bottom:1px solid var(--line);min-width:0}
.fcard__link{text-decoration:none;display:block;min-width:0}
.fcard__link::after{content:"";position:absolute;inset:0}
.fcard__name{display:block;font-size:34px;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere;color:var(--ink)}
.fcard:hover .fcard__name{color:var(--cobalt)}
.fcard__meta{display:flex;flex-wrap:wrap;min-width:0;align-items:center;gap:4px 14px;font-size:13.5px;color:var(--mut)}
.fcard__meta a{position:relative;z-index:1;color:var(--ink2);font-weight:600;text-decoration:none}
.fcard__meta a:hover{text-decoration:underline}
.fcard__meta .fbadge{margin-left:auto}
.fgrid>.ad{grid-column:1/-1;margin:0;border-radius:0;border-left:0;border-bottom:1px solid var(--line);background:none;padding:18px 0}
.frow__aa{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--paper);font-size:24px;line-height:1;color:var(--ink)}
.frow .trow__meta{gap:6px}

/* ---- dizin ---- */

.ffilters{display:grid;gap:14px;padding:0 0 6px}
.ffilters__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ffilters__q{display:flex;align-items:center;gap:10px;flex:1 1 320px;min-width:0;height:50px;padding:0 6px 0 16px;border:1.5px solid var(--ink);border-radius:10px;color:var(--mut);background:#fff}
.ffilters__q:focus-within{color:var(--ink);box-shadow:0 0 0 3px var(--ice)}
.ffilters__q input{flex:1;min-width:0;height:44px;border:0;background:none;font-size:16.5px;outline:0}
.ffilters__find{flex:0 0 auto;height:38px;padding:0 16px;border:0;border-radius:7px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:700;cursor:pointer}
.ffilters__find:hover{background:#17306b}
.ffilters .filters__sort select{height:50px;padding:0 10px;border-radius:10px;min-width:150px}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchips a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.fchips a:hover{border-color:var(--ink)}
.fchips a span{font-size:12.5px;font-weight:600;color:var(--mut)}
.fchips a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.fchips a[aria-current] span{color:#C9D2E6}
.fonts__count{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:18px 0 12px;font-size:14.5px;color:var(--mut)}
.fonts__count b{color:var(--ink)}
.fonts__on{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:var(--ice);color:var(--ink);font-weight:600;text-decoration:none}
.fonts__on:hover{background:#d3dcf5}
.fonts__on span{font-size:16px;line-height:1}
.fonts__clear{color:var(--ink2)}
.fbrowse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:64px 0 72px}
.fbrowse__note h3{font-size:15px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:10px}
.fbrowse__note p{font-size:14.5px;line-height:1.55;color:var(--ink2)}

/* ---- font sayfası başlığı ---- */
.fhead h1{font-weight:400;letter-spacing:-.01em;line-height:1.05;font-size:clamp(44px,6.4vw,84px)}
.fhead h1:not(.is-on){font-weight:800;letter-spacing:-.045em}
.fhead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:18px;font-size:14.5px;color:var(--mut)}
.fhead__meta a{color:var(--ink);font-weight:600}
.fhead .btn small{font-weight:500;font-size:12.5px;opacity:.75;margin-left:8px}
.fhead__card img{border-radius:12px;border:0}
.facts dd span+span::before{content:""}

/* ---- deneme alanı ---- */
.tester{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.tester__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.tester__c{display:flex;align-items:center;gap:8px;white-space:nowrap}
.tester__c input[type=range]{width:118px;accent-color:var(--ink)}
.tester__c select{height:32px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13.5px}
.tester__c output{min-width:44px;font-variant-numeric:tabular-nums;color:var(--mut)}
.tester__k{display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.tester__k input{accent-color:var(--ink);width:16px;height:16px}
.tester__reset{margin-left:auto;border:0;background:none;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:.25em;cursor:pointer;padding:6px 0}
.tester__stage{padding:28px 20px;transition:background .2s,color .2s}
.tester__text{display:block;width:100%;min-height:1.2em;border:0;outline:0;resize:none;overflow:hidden;background:none;color:inherit;font-size:64px;line-height:1.15;padding:0;font-family:inherit}
.tester__text:focus-visible{outline:0;box-shadow:0 2px 0 var(--signal)}
.tester__colors{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:1 1 100%;padding-top:10px;border-top:1px solid var(--line)}
.tester__sw{display:flex;flex-wrap:wrap;gap:6px}
.tester__chip{width:34px;height:34px;border:1px solid rgba(11,26,58,.18);border-radius:8px;font-size:15px;line-height:1;cursor:pointer;padding:0}
.tester__chip[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.tester__chip:focus-visible,.tester__swap:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.tester__pick{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.tester__pick input{width:34px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.tester__swap{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:16px;cursor:pointer}
.tester__cr{font-variant-numeric:tabular-nums;color:var(--mut);white-space:nowrap}
.tester__cr.is-low{color:#B42318;font-weight:600}
.tester>.fine{margin:0;padding:10px 16px 12px;border-top:1px solid var(--line)}
.fspec{margin-top:28px}
.fspec img{width:100%;border-radius:12px}
.fspec figcaption{font-size:12.5px;color:var(--mut);margin-top:8px}

/* ---- stiller, glifler ---- */
.fstyles li{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:20px;padding:12px 0;border-top:1px solid var(--line)}
.fstyles li:first-child{border-top:0;padding-top:0}
.fstyles__n{font-size:14px;font-weight:600}
.fstyles__n small{font-weight:400;color:var(--mut);margin-left:4px;font-variant-numeric:tabular-nums}
.fstyles__s{font-size:28px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.glyphs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.glyphs__grid span{display:grid;place-items:center;height:58px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:26px;line-height:1;cursor:default}
.glyphs__grid span:hover,.glyphs__grid span.is-on{background:var(--ink);color:#fff}
.glyphs__more{display:flex;align-items:center;gap:18px;margin-top:16px;min-height:44px}
.glyphs__out{font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums}

/* ---- lisans kutusu ---- */
.lic{border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.lic__name{display:grid;gap:4px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.lic__name b{font-size:18px}
.lic__name span{font-size:13.5px;color:var(--mut);overflow-wrap:anywhere}
.lic__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.lic h3{font-size:14px;font-weight:700;margin-bottom:10px}
.lic li{position:relative;padding:0 0 9px 22px;font-size:15px;line-height:1.5;color:var(--ink2)}
.lic li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%}
.lic__yes li::before{background:#1E8E5A}
.lic__terms li::before{background:var(--signal)}
.lic .fine a{color:var(--ink2)}
.lic--info{background:#FFF9F5;border-color:#F0D6C8}
.lic--info p+p{margin-top:12px}

/* ---- eşleşmeler, kod, indirme şeridi ---- */
.pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pair{display:grid;align-content:start;gap:8px}
.pair__demo{padding:20px;border-radius:12px;background:var(--paper);min-height:190px}
.pair__h{font-size:27px;line-height:1.15;margin-bottom:10px;overflow-wrap:anywhere}
.pair__b{font-size:15px;line-height:1.55;color:var(--ink2)}
.pair h3{font-size:17px;margin-top:6px}
.pair h3 small{font-size:13px;font-weight:400;color:var(--mut);margin-left:6px}
.pair>p{font-size:14.5px;line-height:1.5;color:var(--ink2)}
.code{margin:16px 0 22px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.code__head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13px;color:var(--mut)}
.code__head button{border:0;background:none;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:.25em;padding:4px 0}
.code pre{margin:0;padding:16px;overflow-x:auto;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);tab-size:2}
.fdl{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:8px;padding:28px 30px;border-radius:14px;background:var(--ink);color:#fff}
.fdl h2{font-size:24px;letter-spacing:-.02em}
.fdl p{margin-top:6px;color:#C4CEE4;font-size:15px}

/* ---- /fonts/try ---- */
.tryhead{padding-bottom:22px}
.tryform{display:block}
.ftest--try{margin:0 0 0;padding:24px 28px 20px}
.js .tryform__go{display:none}
.ftest__ghost{flex:0 0 auto;height:62px;padding:0 22px;border:1.5px solid rgba(255,255,255,.55);border-radius:10px;background:none;color:#fff;font-size:15.5px;font-weight:700;cursor:pointer}
.ftest__ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.ftest__ghost:focus-visible{outline:2px solid #fff;outline-offset:2px}
.trybar{position:sticky;top:var(--hd);z-index:5;display:grid;gap:12px;margin-top:18px;padding:12px 0;background:#fff;border-bottom:1px solid var(--ink)}
.trybar__note{font-size:15px;color:var(--ink2)}
.trybar__tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.trybar .filters__sort select{height:40px;border-radius:8px}
.trybar__size{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--mut)}
.trybar__size input{width:130px;accent-color:var(--ink)}
.trybar__size output{min-width:2.4em;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{height:38px;min-width:44px;padding:0 12px;border:0;border-right:1px solid var(--line);background:#fff;color:var(--ink);font-size:14.5px;font-weight:600;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg button:focus-visible,.trybar__btn:focus-visible,.tryrow__pin:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
.trybar__btn{height:40px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:14.5px;font-weight:600;cursor:pointer}
.trybar__btn[aria-expanded=true]{border-color:var(--ink);background:var(--paper)}
.trybar__pins{display:inline-flex;align-items:center;gap:8px;height:40px;margin-left:auto;padding:0 16px;border-radius:8px;background:var(--signal);color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none}
.trybar__pins:hover{background:#ff7a47}
.trybar__pins b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:12.5px}
.tryform__colors{padding-top:10px}
.trycount{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:16px 0 4px;font-size:14.5px;color:var(--mut)}
.trycount b{color:var(--ink)}
.trycount__tip{margin-left:auto}
.trylist{display:flex;flex-direction:column;margin-bottom:8px}
.tryrow{position:relative;padding:22px 0 16px;border-bottom:1px solid var(--line)}
.tryrow.is-pinned{order:-1;background:linear-gradient(90deg,var(--ice),transparent 60%);margin-inline:-14px;padding-inline:14px;border-radius:10px 0 0 10px}
.tryrow__link{display:block;text-decoration:none;color:var(--ink)}
.tryrow__link::after{content:"";position:absolute;inset:0}
.tryrow__sample{display:block;font-size:44px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.25em}
.trylist[data-case=upper] .tryrow__sample{text-transform:uppercase}
.trylist[data-case=lower] .tryrow__sample{text-transform:lowercase}
.tryrow:hover .tryrow__sample{color:var(--cobalt)}
.trylist.is-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.trylist.is-grid .tryrow__sample{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.trylist.is-grid .tryrow{display:grid;align-content:space-between;gap:10px;min-height:170px}
.trylist.is-grid .tryrow--ad{grid-column:1/-1;min-height:0}
.trylist.is-grid .tryrow.is-pinned{margin-inline:0;padding-inline:12px;border-radius:10px;background:var(--ice)}
/* /fonts/try renkleri: seçilen çift her örneğe bant olarak uygulanır (JS --try-fg / --try-bg değişkenlerini listeye yazar); varsayılan çiftte görünüm değişmez */
.trylist.is-tinted .tryrow__sample{padding:14px 18px;border-radius:10px;color:var(--try-fg);background:var(--try-bg);transition:background .2s,color .2s}
.trylist.is-tinted .tryrow:hover .tryrow__sample{color:var(--try-fg);box-shadow:0 0 0 2px var(--cobalt)}
.tryrow__act{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;margin-left:auto}
.tryrow__act a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:.25em}
.tryrow__pin{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:600;cursor:pointer}
.tryrow__pin i{font-style:normal}
.tryrow__pin:hover{border-color:var(--ink)}
.tryrow__pin[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tryrow__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:8px;font-size:13.5px;color:var(--mut)}
.tryrow__meta b{color:var(--ink);font-weight:700}
.tryrow--ad{padding:0;border-bottom:1px solid var(--line)}
.tryrow--ad .ad{margin:14px 0}
.tryform__note{margin-bottom:64px}

/* ---- indirme sayfası ---- */
.fget .phead h1{font-weight:400;letter-spacing:-.01em}

.fget__files tbody th{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;overflow-wrap:anywhere}
.fget .sec:first-child{border-top:0;padding-top:0}

/* ---- ana sayfa şeridi ---- */
.fstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.fstrip a{display:grid;align-content:space-between;gap:10px;min-height:128px;padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;min-width:0}
.fstrip a:hover{background:var(--paper)}
.fstrip b{font-weight:400;font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.fstrip small{font-size:12.5px;color:var(--mut)}

@media (max-width:1040px){
  .trylist.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .fgrid,.fbrowse,.pairs,.lic__cols{grid-template-columns:minmax(0,1fr)}
  .fbrowse{gap:32px;margin:48px 0}
  .fcard{min-height:0;padding:18px 0 16px}
  .fcard__name{font-size:30px}
  .ffilters__top{gap:10px 12px}
  .ffilters__q{flex-basis:100%}
  .ffilters .filters__sort{flex:1 1 44%;min-width:0}
  .ffilters .filters__sort select{flex:1;min-width:0;height:46px}
  .fchips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 6px;scrollbar-width:none}
  .fchips::-webkit-scrollbar{display:none}
  .tester__bar{gap:10px 16px;padding:12px}
  .tester__c{flex:1 1 100%;justify-content:space-between}
  .tester__c input[type=range]{flex:1;width:auto;max-width:60%}
  .tester__reset{margin-left:0}
  .tester__stage{padding:22px 14px}
  .fstyles li{grid-template-columns:minmax(0,1fr);gap:4px}
  .fstyles__s{font-size:24px}
  .glyphs__grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .glyphs__grid span{height:48px;font-size:22px}
  .lic{padding:18px 16px}
  .fdl{padding:22px 20px}
  .fdl .btn{width:100%;justify-content:center}
  .trybar{position:static}
  .ftest--try{padding:20px 18px 16px}
  .trybar .filters__sort{flex:1 1 100%}
  .trybar .filters__sort select{flex:1;min-width:0}
  .trybar__size{flex:1 1 100%}
  .trybar__size input{flex:1;width:auto}
  .trybar__pins{margin-left:0;flex:1 1 100%;justify-content:center}
  .trycount__tip{margin-left:0;flex-basis:100%}
  .tryrow__sample{font-size:34px;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  .ftest--try .ftest__in{flex:1 1 0;min-width:0}
  .ftest__ghost{height:54px;padding:0 14px;font-size:14.5px}
  .tryrow__act{flex-basis:100%;margin-left:0;margin-top:6px}
  .trylist.is-grid{grid-template-columns:minmax(0,1fr)}
  .trylist.is-grid .tryrow{min-height:0}
  .fstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fhead .thead__act .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){[data-ff],.tester__stage{transition:none}}
.fget__body{max-width:820px;margin-bottom:72px}

/* ---- deneme alanı: örnek metin çipleri + bağlantılı alt satır (FontSample) ---- */
.tester__samples{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mut)}
.tester__samples>span{margin-right:4px}
.tester__s{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.tester__s:hover{border-color:var(--ink);color:var(--ink)}
.tester__s[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tester__promo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.tester__promo a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.3em;overflow-wrap:anywhere}
.tester__spon{font-size:12px;font-weight:600;color:var(--mut);border:1px solid var(--line);border-radius:4px;padding:1px 6px;white-space:nowrap}

/* ---- koleksiyon sayfası (/fonts/for/…) ve dizini ---- */
.colhead{padding-bottom:28px}
.colhead h1,.colhead .phead__lead{max-width:none}
.colhead__meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:16px;font-size:14px;color:var(--mut)}
.colstage{margin:0 0 44px;border-radius:14px;background:var(--paper);color:var(--ink);overflow:hidden;transition:background .2s,color .2s}
.colstage__text{padding:56px 40px 44px;font-size:clamp(40px,8.2vw,112px);line-height:1.04;overflow-wrap:anywhere;min-height:2.2em}
.colstage figcaption{padding:12px 40px 14px;font-size:13px;opacity:.78;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 22%,transparent)}
.colbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;margin-bottom:52px}
.colbody__text p{max-width:68ch;font-size:17.5px;line-height:1.62;color:var(--ink2)}
.colbody__text p+p{margin-top:14px}
.colbody__side h2{font-size:15px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--ink);margin-bottom:10px}
.colbody__side p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.colbody__side p+p{margin-top:18px}
.collist{border-top:1px solid var(--ink)}
.colrow{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:6px 48px;align-items:start;padding:26px 0 22px;border-bottom:1px solid var(--line)}
.colrow__sample{grid-column:1/-1;font-size:52px;line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.18em;color:var(--ink);margin-bottom:10px}
.colrow__txt h2{font-size:21px;letter-spacing:-.015em;line-height:1.25}
.colrow__txt h2 a{text-decoration:none}
.colrow__txt h2 a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.25em}
.colrow__why{margin-top:6px;max-width:62ch;font-size:16px;line-height:1.5;color:var(--ink2)}
.colrow__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px;font-size:13.5px;color:var(--mut)}
.colrow__meta>a:first-child{color:var(--ink2);font-weight:600;text-decoration:none}
.colrow__meta .more{flex-basis:100%;text-align:right}
.colrow__show{border:0;background:none;padding:4px 0;font-size:13.5px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.colrow__show[aria-pressed=true]{color:var(--cobalt)}
.colrow--ad{display:block;padding:0}
.colrow--ad .ad{margin:14px 0}
.collist__note{margin:14px 0 56px}
.colsec{max-width:860px;margin-bottom:24px}
.colmore{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.colmore__rel ul{columns:2;column-gap:32px;margin-bottom:12px}
.colgroup{margin-bottom:52px}
.colgroup>h2{font-size:15px;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.colitem{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 84px;gap:8px 36px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);position:relative}
.colitem h3{font-size:21px;letter-spacing:-.015em;line-height:1.25}
.colitem h3 a{text-decoration:none}
.colitem h3 a::after{content:"";position:absolute;inset:0}
.colitem:hover h3 a{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.25em}
.colitem__txt p{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--mut)}
.colitem__faces{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;font-size:26px;line-height:1.2;color:var(--ink);overflow:hidden;max-height:2.4em}
.colitem__faces span{white-space:nowrap}
.colitem__n{font-size:13.5px;color:var(--mut);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fcols{margin:8px 0 40px;padding:18px 0 4px;border-top:1px solid var(--ink)}
.fcols__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.fcols__head h2{font-size:15px;font-weight:700}
.fcols ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.fcols li{border-bottom:1px solid var(--line)}
.fcols li a{display:block;padding:11px 0;font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.fcols li a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.25em}
.fin{display:grid;gap:0;border-top:1px solid var(--line)}
.fin li{padding:12px 0;border-bottom:1px solid var(--line)}
.fin a{font-size:16.5px;font-weight:600;text-decoration:none}
.fin a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.25em}
.fin p{margin-top:2px;font-size:14.5px;color:var(--mut);line-height:1.45}
@media (max-width:1040px){
  .colbody{grid-template-columns:minmax(0,1fr);gap:28px}
  .colrow{grid-template-columns:minmax(0,1fr)}
  .colrow__meta{justify-content:flex-start;margin-top:8px}
  .colrow__meta .more{flex-basis:auto;text-align:left;margin-left:auto}
  .colitem{grid-template-columns:minmax(0,1fr) 84px}
  .colitem__faces{grid-column:1/-1;grid-row:2;font-size:22px}
  .fcols ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .tester__samples{padding:10px 12px}
  .tester__promo{padding:10px 12px}
  .colstage{margin-bottom:32px;border-radius:12px}
  .colstage__text{padding:36px 18px 28px}
  .colstage figcaption{padding:10px 18px 12px}
  .colbody{margin-bottom:36px}
  .colbody__text p{font-size:16.5px}
  .colrow{padding:20px 0 18px}
  .colrow__sample{font-size:36px}
  .colrow__meta .more{margin-left:0;flex-basis:100%}
  .colmore,.fcols ul{grid-template-columns:minmax(0,1fr)}
  .colmore__rel ul{columns:1}
  .colitem{grid-template-columns:minmax(0,1fr);gap:8px}
  .colitem__n{text-align:left;grid-row:auto}
  .colitem__faces{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.colstage{transition:none}}

/* Yerel yazı önizlemesi (Arap yazısı vb.): fontun kendi harfleriyle tek satır */
.fnative{margin:26px 0 6px;padding:26px 28px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.fnative__text{font-size:clamp(30px,5.2vw,58px);line-height:1.7;color:var(--ink);margin:0;overflow-wrap:anywhere}
.fnative figcaption{margin-top:10px;font:13.5px/1.4 var(--sans);color:#5F6B85}

/* Dizin: deneme paneli (yazdıkça kartlar yazılan metne döner) */
.ftest{display:grid;gap:18px;margin:-8px 0 40px;padding:30px 34px 24px;border-radius:14px;background:var(--ink);color:#fff}
.ftest__kick{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFB59A}
.ftest h2{margin-top:6px;font-size:clamp(24px,3.1vw,36px);line-height:1.08;letter-spacing:-.03em;font-weight:800;color:#fff}
.ftest__row{display:flex;flex-wrap:wrap;gap:12px}
.ftest__in{flex:1 1 380px;min-width:0}
.ftest__in input{width:100%;height:62px;padding:0 20px;border:2px solid #fff;border-radius:10px;background:#fff;color:var(--ink);font-size:22px;font-weight:500}
.ftest__in input::placeholder{color:#6B7690;font-weight:400}
.ftest__in input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(255,90,31,.35)}
.ftest__go{flex:0 0 auto;height:62px;padding:0 26px;border:0;border-radius:10px;background:var(--signal);color:var(--ink);font-size:16.5px;font-weight:700;cursor:pointer;transition:background .15s}
.ftest__go:hover{background:#ff7a47}
.ftest__go:focus-visible,.ftest__chip:focus-visible,.ftest__clear:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ftest__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;color:#C9D2E6}
.ftest__chip,.ftest__clear{height:32px;padding:0 13px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:none;color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.ftest__chip:hover,.ftest__clear:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.ftest__clear{border-style:dashed}
.ftest__out{margin-left:auto;color:#fff;font-weight:600}
.fgrid.is-typing .fcard__meta::before{content:attr(data-fam);order:-1;flex-basis:100%;color:var(--ink);font-size:15px;font-weight:700}
.fgrid.is-typing .fcard__name{overflow-wrap:anywhere}
@media (max-width:640px){
  .ftest{margin:-4px 0 30px;padding:22px 18px 18px;border-radius:12px;gap:14px}
  .ftest__in{flex-basis:100%}
  .ftest__in input{height:54px;font-size:18px;padding:0 16px}
  .ftest__go{width:100%;height:52px}
  .ftest__out{margin-left:0;flex-basis:100%}
}

/* ---- kart: Details bağlantısı ---- */
.fcard__more{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;height:28px;margin-left:10px;padding:0 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.fcard__more span{transition:transform .15s}
.fcard:hover .fcard__more,.fcard__more:focus-visible{border-color:var(--ink);background:var(--ink);color:#fff}
.fcard:hover .fcard__more span{transform:translateX(3px)}
.fcard__meta .fbadge+.fcard__more{margin-left:0}
.fcard__meta{flex-wrap:nowrap}
.fcard__meta>a,.fcard__meta>.fbadge{flex:0 0 auto}
.fcard__meta>span:not(.fbadge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgrid.is-typing .fcard__meta{flex-wrap:wrap}
.tryrow__more{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:700;text-decoration:none !important}
.tryrow__more:hover{border-color:var(--ink);background:var(--ink);color:#fff !important}

/* ---- dizin: koleksiyon kartları ---- */
.colcards{margin:14px 0 44px}
.colcards ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.colcard{position:relative;display:grid;align-content:space-between;gap:14px;min-height:150px;padding:18px 20px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.colcard:hover{border-color:var(--ink);box-shadow:0 6px 20px rgba(11,26,58,.07)}
.colcard__link{display:grid;gap:12px;text-decoration:none;color:var(--ink)}
.colcard__link::after{content:"";position:absolute;inset:0}
.colcard__faces{display:flex;flex-wrap:nowrap;align-items:baseline;gap:18px;height:34px;overflow:hidden;font-size:25px;line-height:34px;color:var(--ink2);white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.colcard b{font-size:16.5px;line-height:1.3;letter-spacing:-.01em}
.colcard__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;color:var(--mut)}
.colcard__meta a{position:relative;z-index:1;color:var(--ink);font-weight:600;text-underline-offset:.25em}

/* ---- /fonts/try: koleksiyon etiketleri ---- */
.trysets{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;font-size:14px}
.trysets::-webkit-scrollbar{display:none}
.trysets>span{flex:0 0 auto;color:var(--mut);margin-right:2px}
.trysets a{flex:0 0 auto;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.trysets a:hover{background:var(--ice)}
.trysets a[aria-current]{background:var(--ink);color:#fff}
.trysets a.trysets__all{background:none;text-decoration:underline;text-underline-offset:.25em}

/* ---- indirme sayfası ---- */
.getbox{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 48px;margin:4px 0 28px;padding:40px 44px;border-radius:16px;background:var(--ink);color:#fff}
.getbox__kick{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFB59A}
.getbox.is-done .getbox__kick{color:#8EE6B4}
.getbox h1{margin-top:10px;font-size:clamp(38px,6vw,68px);line-height:1.05;font-weight:400;letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.getbox__meta{margin-top:12px;font-size:15px;color:#C9D2E6}
.getbox__file{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:20px;padding:10px 16px;border:1px solid rgba(255,255,255,.22);border-radius:10px;font-size:14.5px;color:#C9D2E6}
.getbox__file b{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.getbox__state{margin-top:20px;min-height:1.5em;font-size:17px;line-height:1.5;color:#fff}
.getbox__state b{font-variant-numeric:tabular-nums}
.getbox__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.getbox__now{display:inline-flex;align-items:center;height:54px;padding:0 26px;border-radius:10px;background:var(--signal);color:var(--ink);font-size:16.5px;font-weight:700;text-decoration:none;transition:background .15s}
.getbox__now:hover{background:#ff7a47}
.getbox__now:focus-visible,.getbox__back:focus-visible{outline:2px solid #fff;outline-offset:3px}
.getbox__now[aria-disabled=true]{background:rgba(255,255,255,.18);color:#fff;pointer-events:none}
.getbox__back{color:#fff;font-size:15px;font-weight:600;text-underline-offset:.25em}
.getbox__ring{position:relative;display:grid;place-items:center;align-content:center;width:188px;height:188px}
.getbox__ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.getbox__track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.getbox__prog{fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset 1s linear,stroke .3s}
.getbox.is-loading .getbox__prog{transition:stroke-dashoffset .25s linear}
.getbox.is-done .getbox__prog{stroke:#4FD08B}
.getbox__ring b{font-size:64px;line-height:1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.getbox.is-loading .getbox__ring b{font-size:44px}
.getbox__ring span{margin-top:6px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C9D2E6}
.getsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:44px;counter-reset:none}
.getsteps li{display:flex;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:12px}
.getsteps li>b{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ice);color:var(--ink);font-size:15px}
.getsteps h2{font-size:16px;letter-spacing:-.01em}
.getsteps p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.gettry__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:14px}
.gettry__in{flex:1 1 300px;min-width:0}
.gettry__in input{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--ink);border-radius:10px;font-size:17px;background:#fff}
.gettry__sample{margin:18px 0 10px;padding:22px 24px;border-radius:12px;background:var(--paper);font-size:56px;line-height:1.2;color:var(--ink);overflow-wrap:anywhere;min-height:1.2em}
.getmore{margin:0 0 52px}
.getmore__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--ink)}
.getmore__cols li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.getmore__cols a{font-size:15.5px;font-weight:600;text-decoration:none;color:var(--ink)}
.getmore__cols a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.25em}
.getmore__cols span{flex:0 0 auto;font-size:13px;color:var(--mut)}
.getmore .fgrid{margin-top:4px}
@media (prefers-reduced-motion:reduce){.getbox__prog{transition:none}}
@media (max-width:1040px){
  .colcards ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .getmore__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .getbox{grid-template-columns:minmax(0,1fr);padding:28px 22px;gap:22px}
  .getbox__ring{width:132px;height:132px;justify-self:start;order:-1}
  .getbox__ring b{font-size:44px}
  .getbox.is-loading .getbox__ring b{font-size:30px}
  .getbox__ring span{font-size:10.5px;letter-spacing:.08em}
  .getbox__now{width:100%;justify-content:center}
  .getsteps{grid-template-columns:minmax(0,1fr)}
  .gettry__sample{font-size:38px;padding:18px}
}
@media (max-width:640px){
  .colcards ul,.getmore__cols{grid-template-columns:minmax(0,1fr)}
  .colcard{min-height:0}
  .fcard__more{margin-left:auto}
}
@media (hover:none){.fcard__more{border-color:var(--ink)}}