/* ============================================================
techblimp — TASARIM SİSTEMİ (tek kanonik kaynak / giydirme)
Gerçek WP temasının style.css çekirdeği. Drift'in sonu: tek yer.
Kaynak: mockup'ların Hasım-doğrulanmış ortak sistemi (birebir).
Kuruldu 2026-09-16 · BiDi-geçişi (logical-properties) 2026-09-18.
Fontlar sayfada ile (Google Fonts). Yön: — RTL hazır.
İÇİNDEKİLER
1) Token'lar (3 tema) + --gutter 6) Buton / chip / eyebrow
2) Reset / base 7) Ana sayfa bileşenleri
3) .wrap (ortak oluk) 8) Footer
4) Header (+ JS'siz hamburger a11y) 9) Keşif Balonu + .kesif
5) Bölüm ritmi (.sec) 10) Responsive + reduced-motion
—— Bileşen kütüphanesi (fold-in) ——
11) Makale (rv-*) 12) Tablolar 13) Nakkaş viz + rail
14) Karşılaştırma + A/B 15) Kategori 16) Rehber
17) Bileşen responsive (900/820/560) 18) RTL / BiDi düzeltmeleri
★ BiDi KAİDESİ: yön fiziksel DEĞİL mantıksal kurulur (start/end,
*-inline-*, inset-inline-*). Yeni kural eklerken left/right YAZMA;
çevrilemeyen yön-süsü varsa §18'e [dir=rtl] düzeltmesi ekle.
============================================================ */
/* 1) TOKENS */
:root{
--bg:#F4F0E6; --surface:#FBF8F1; --surface-2:#EFE9DA;
--ink:#2A2823; --ink-soft:#615A4C; --hairline:#DDD5C4;
--accent:#8F4E18; --accent-soft:#9E5A22; --accent-wash:#F1E7D6; --accent-fill:#9A531C; --on-accent:#F8F4EC;
--teal:#1E5B4F; --teal-fill:#1E5B4F; --on-teal:#F6F2E8; --teal-wash:#E4EEE9;
--good:#3F7A4B; --warn:#A9564A;
--shadow:0 1px 2px rgba(42,40,35,.04), 0 8px 24px -12px rgba(42,40,35,.16);
--serif:'Newsreader',Georgia,'Times New Roman',serif;
--sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
--r:16px; --r-sm:11px; --wrap:1080px;
--gutter:44px; /* ★ TEK KAYNAK: tüm bölümler bu oluğa oturur (hiza kuruluşça) */
}
:root:not([data-theme="light"]){ @media (prefers-color-scheme:dark){
--bg:#1A1815; --surface:#232019; --surface-2:#2C2720;
--ink:#ECE6D8; --ink-soft:#A69D8C; --hairline:#3A342A;
--accent:#DCA860; --accent-soft:#E7BE7E; --accent-wash:#3A2E1C; --accent-fill:#A86A2A; --on-accent:#F3EFE6;
--teal:#6FBBA6; --teal-fill:#2C7C6A; --on-teal:#F3EFE6; --teal-wash:#223A33;
--good:#82B181; --warn:#D08A7E;
--shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -14px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
--bg:#1A1815; --surface:#232019; --surface-2:#2C2720;
--ink:#ECE6D8; --ink-soft:#A69D8C; --hairline:#3A342A;
--accent:#DCA860; --accent-soft:#E7BE7E; --accent-wash:#3A2E1C; --accent-fill:#A86A2A; --on-accent:#F3EFE6;
--teal:#6FBBA6; --teal-fill:#2C7C6A; --on-teal:#F3EFE6; --teal-wash:#223A33;
--good:#82B181; --warn:#D08A7E;
--shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 26px -14px rgba(0,0,0,.5);
}
/* 2) RESET / BASE */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;text-wrap:balance;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:var(--accent-soft);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--accent-soft);outline-offset:2px;border-radius:4px}
button{font:inherit}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* 3) WRAP — ortak oluk (tek hiza kaynağı). .container = eklenti şablonları sözleşmesi (compare/catalog). */
.wrap,.container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* 4) HEADER */
.siteheader{border-bottom:1px solid var(--hairline);background:var(--bg);position:sticky;top:0;z-index:5}
.siteheader .inner{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{order:1;font-family:var(--serif);font-weight:600;font-size:1.36rem;letter-spacing:-.035em;display:inline-flex;align-items:center;gap:0;direction:ltr}/* logotip daima LTR (RTL'de "techblimp" tersine dönmesin) */
.brand .blimp{width:30px;height:30px;flex:none;margin-inline-end:9px}/* yalnız ikon↔yazı boşluğu; "tech"+"blimp" bitişik (tek sözcük) */
.brand .t-tech{color:var(--teal);padding-inline-end:3px} .brand .t-blimp{color:var(--accent);margin-inline-start:-.03em}
.brand:hover{text-decoration:none}
.nav{order:2;margin-inline-start:8px;font-size:.94rem}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:22px;align-items:center}
.nav a{color:var(--ink-soft)} .nav a:hover{color:var(--ink)}
.header-right{order:3;margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.lang{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);border:1px solid var(--hairline);border-radius:999px;padding:5px 11px;background:var(--surface);cursor:pointer}
.lang b{color:var(--ink)}
.hamburger{display:none;flex:none;cursor:pointer;color:var(--ink);padding:10px;margin:-4px 0;border-radius:8px;background:none;border:none;line-height:0}
.hamburger svg{width:24px;height:24px;display:block}
.navtoggle{display:none}
/* 5) BÖLÜM RİTMİ */
main .sec{padding-block:46px}
main .sec + .sec{border-top:1px solid var(--hairline)}
main .sec.hero-sec{padding-block:58px 46px}
.sec > .wrap > .eyebrow{display:block;margin-bottom:6px}
.sec h2{font-size:1.7rem;margin-bottom:6px}
.sec .sub{color:var(--ink-soft);max-width:56ch;margin-bottom:26px}
/* 6) BUTON / CHIP */
/* .btn radius:3px = BİLİNÇLİ "kusur"/imza (Cem, 2026-09-18): sistem komple radius'lu,
buton bilerek keskin-yakın. Tutarsızlık DEĞİL, kasıt — düzeltme (meta-author "." ruhu). */
.btn{font-family:var(--sans);font-weight:600;font-size:.92rem;border:none;cursor:pointer;background:var(--accent-fill);color:var(--on-accent);padding:8px 24px;border-radius:3px}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--accent-soft);border:1px solid var(--hairline)}
.btn.light{background:var(--surface);color:var(--teal)}
.chip{font-family:var(--mono);font-size:.72rem;padding:5px 10px;border-radius:999px;background:var(--accent-wash);color:var(--accent)}
.chip.muted{background:var(--surface-2);color:var(--ink-soft)}
/* 7) ANA SAYFA BİLEŞENLERİ */
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
.hero-kicker{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.05rem;color:var(--accent)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.15rem);margin:14px 0 18px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero .lead{font-size:1.12rem;color:var(--ink-soft);max-width:36ch}
.hero .ask{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.ask input{flex:1;min-width:180px;font-family:var(--sans);font-size:1rem;padding:13px 16px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface);color:var(--ink)}
.demohint{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);margin-top:8px}
.hero-aside{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:22px 22px 20px;box-shadow:var(--shadow)}
.hero-aside .eyebrow{display:block;margin-bottom:10px}
.hero-aside h3{font-size:1.15rem;margin-bottom:6px}
.hero-aside p{font-size:.92rem;color:var(--ink-soft)}
.hero-aside .mark{margin-top:14px;font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.04em}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.trio .cell{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:22px}
.trio .cell .ic{width:34px;height:34px;color:var(--accent);margin-bottom:12px}
.trio h3{font-size:1.12rem;margin-bottom:6px}
.trio p{font-size:.92rem;color:var(--ink-soft)}
.catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cat{display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:18px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cat.live{cursor:pointer} .cat.live:hover{border-color:var(--accent);transform:translateY(-1px);text-decoration:none}
.cat.coming{opacity:.6}
.cat .g{width:44px;height:44px;border-radius:12px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;flex:none}
.cat .g svg{width:24px;height:24px}
.cat .body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cat .t{font-weight:600;color:var(--ink);font-size:1rem;display:flex;align-items:center;gap:7px}
.cat .t .arrow{color:var(--accent);transition:transform .18s ease}
.cat.live:hover .t .arrow{transform:translateX(-3px)}
.cat .desc{font-size:.82rem;color:var(--ink-soft);line-height:1.4}
.cat .soon{margin-inline-start:auto;font-family:var(--mono);font-size:.64rem;color:var(--ink-soft);border:1px solid var(--hairline);border-radius:999px;padding:3px 9px}
.feature{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.feature .txt{padding:30px 30px 28px}
.feature .eyebrow{color:var(--accent-soft)}
.feature h3{font-size:1.55rem;margin:10px 0 10px}
.feature p{color:var(--ink-soft);font-size:.96rem;margin-bottom:18px}
.feature .mini{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.feature .band-tbl{border-inline-start:1px solid var(--hairline);background:var(--surface-2);padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.frow{display:flex;align-items:baseline;gap:12px;padding-bottom:11px;border-bottom:1px solid var(--hairline)}
.frow:last-of-type{border-bottom:none;padding-bottom:0}
.frow .res{font-family:var(--mono);font-weight:500;color:var(--ink);width:64px;flex:none}
.frow .card{font-weight:600;color:var(--ink);font-size:.95rem}
.frow .who{font-size:.82rem;color:var(--ink-soft)}
.frow .price{margin-inline-start:auto;font-family:var(--mono);font-size:.86rem;color:var(--accent)}
.tblcap{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);margin-top:4px;line-height:1.4}
.trust{background:var(--teal-wash);border-radius:var(--r);padding:28px 30px;display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}
.trust h3{font-size:1.3rem;color:var(--ink);margin-bottom:8px}
.trust p{font-size:.94rem;color:var(--ink-soft)}
.trust ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.trust li{display:flex;gap:10px;font-size:.9rem;color:var(--ink)}
.trust li svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:3px}
/* 8) FOOTER */
.siteftr{border-top:1px solid var(--hairline);padding-block:44px 28px;position:relative;z-index:1}
.siteftr .fmain{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px 40px}
.fbrand{min-width:0}
.fbrand .brand{font-size:1.3rem}
.fcol{display:flex;flex-direction:column;gap:10px;font-size:.9rem;min-width:0}
.fcol .eyebrow{display:block;margin-bottom:3px}
.fcol a{color:var(--ink-soft)} .fcol a:hover{color:var(--ink)}
.fbottom{margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.sign{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.03em;text-align:end;flex:none}
/* 9) KEŞİF BALONU + morsel */
main{position:relative;z-index:1}
.blimp-drift{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blimp-drift svg{position:absolute;top:0;left:0;width:32px;height:32px;opacity:.28;offset-path:path("M -80 180 C 260 560, 640 90, 900 380 C 1120 600, 820 790, 460 580 C 120 400, -260 480, -80 180");offset-rotate:auto;offset-distance:0%;animation:drift 120s linear infinite;will-change:offset-distance}
@keyframes drift{ to{offset-distance:100%} }
.kesif{display:flex;align-items:center;gap:11px;min-width:0}
.kesif-mark{background:none;border:none;cursor:pointer;padding:5px;margin:-5px;line-height:0;color:var(--accent);border-radius:8px;flex:none}
.kesif-mark svg{width:22px;height:22px;display:block}
.kesif-note{font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--ink-soft);opacity:0;transform:translateX(-5px);transition:opacity .35s ease,transform .35s ease}
.kesif:hover .kesif-note,.kesif:focus-within .kesif-note{opacity:1;transform:none}
/* 10) RESPONSIVE + reduced-motion */
@media (max-width:820px){
:root{--gutter:26px}
.hero,.feature,.trust{grid-template-columns:1fr}
.hero{gap:28px}
.trio,.catgrid{grid-template-columns:1fr 1fr}
.feature .band-tbl{border-inline-start:none;border-top:1px solid var(--hairline)}
.hero-aside{box-shadow:none;background:var(--teal-wash);border-color:transparent}
.siteftr .fmain{grid-template-columns:1fr 1fr;gap:26px} .fbrand{grid-column:1/3}
/* JS'siz hamburger (erişilebilir) */
.siteheader .inner{flex-wrap:wrap;gap:12px}
.hamburger{display:block}
.navtoggle{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.siteheader .inner:has(.navtoggle:focus-visible) .hamburger{outline:2px solid var(--accent);outline-offset:2px}
.nav{order:5;flex-basis:100%;display:none;margin:4px 0 0;border-top:1px solid var(--hairline);padding-top:6px}
.navtoggle:checked ~ .nav{display:block}
.nav-list{flex-direction:column;gap:0;align-items:stretch}
.nav a{padding:12px 2px;font-size:1rem;display:block}
}
@media (max-width:560px){
:root{--gutter:22px}
main .sec{padding-block:30px}
main .sec.hero-sec{padding-block:36px 30px}
.hero h1{font-size:clamp(1.9rem,7.5vw,2.4rem)}
.hero .ask{flex-direction:column}
.hero .ask .btn{width:100%}
.btn{min-height:44px}
.trio{grid-template-columns:1fr;gap:10px}
.trio .cell{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;padding:15px 16px;align-items:start}
.trio .cell .ic{grid-row:1/3;grid-column:1;width:26px;height:26px;margin:2px 0 0}
.trio h3{grid-column:2;margin:0;font-size:1.02rem}
.trio p{grid-column:2;margin:0;font-size:.88rem}
.catgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.catgrid .cat{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:7px;align-items:center;padding:13px}
.catgrid .cat .g{width:36px;height:36px;border-radius:10px}
.catgrid .cat .g svg{width:20px;height:20px}
.catgrid .cat .body{min-width:0}
.catgrid .cat .desc{display:none}
.catgrid .cat .t{font-size:.9rem}
.catgrid .cat .soon{grid-column:1/3;justify-self:start;margin:0}
.feature{border:none;box-shadow:none;background:transparent;border-radius:0}
.feature .txt{padding:0 0 2px}
.feature .band-tbl{padding:16px 0 0;background:transparent}
.trust{padding:22px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} .blimp-drift svg{animation:none;offset-distance:14%} }
/* ============================================================
BİLEŞEN KÜTÜPHANESİ (fold-in, 2026-09-16 gece)
Giydirme reconcile: cmptable → .vs (kıyas, A/B) · .map (rehber harita)
============================================================ */
/* 11) MAKALE SİSTEMİ (rv-*) */
.rv-head{padding-top:40px}
.rv-layout{display:grid;grid-template-columns:minmax(0,1fr) 288px;grid-auto-flow:dense;gap:46px;align-items:start;position:relative;z-index:1}
.rv-layout.solo{grid-template-columns:1fr}
.article{grid-column:1;padding:34px 0 52px;min-width:0}
.rv-rail{grid-column:2;position:sticky;top:80px;display:flex;flex-direction:column;gap:18px;padding-top:34px;min-width:0}
.qspec{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px}
.qspec .eyebrow{display:block}
.qspec dl{margin:12px 0 0}
.qspec dl > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--hairline)}
.qspec dl > div:last-child{border-bottom:none;padding-bottom:0}
.qspec dt{color:var(--ink-soft);font-size:.86rem}
.qspec dd{margin:0;font-family:var(--mono);font-size:.82rem;color:var(--ink);text-align:end}
.qspec .mk-a{color:var(--accent)} .qspec .mk-b{color:var(--teal)}
.rv-crumb{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin-bottom:18px}
.rv-crumb a{color:var(--ink-soft)} .rv-crumb b{color:var(--ink)}
.rv-title{font-size:clamp(2rem,3.8vw,2.6rem);margin-bottom:8px}
.rv-title em{font-style:italic;color:var(--accent)}
.rv-sub{color:var(--ink-soft);font-size:1.05rem;margin-bottom:18px}
.rv-sub em{font-style:italic;color:var(--accent)}
.rv-kunye{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);padding:14px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.rv-kunye .kbrand{color:var(--ink);font-weight:600}
.rv-kunye .kfor{padding:4px 10px;border-radius:999px;background:var(--accent-wash);color:var(--accent)}
.rv-essay{font-size:1.07rem;line-height:1.82;color:var(--ink);margin:24px 0}
.rv-essay p{margin-bottom:20px}
.rv-essay p.lead-p{font-size:1.2rem;line-height:1.62;color:var(--ink)}
.rv-essay em{font-style:normal;color:var(--accent);font-weight:600}
.rv-verdict{background:var(--accent-wash);border-inline-start:3px solid var(--accent);border-radius:var(--r);padding:24px 26px;margin:30px 0}
.rv-verdict .lab{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.rv-verdict p{color:var(--ink);font-size:1rem}
.rv-refhead{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--hairline);padding-top:24px;margin-top:40px}
.rv-sec{margin:34px 0}
.rv-sec > h2{font-size:1.45rem;margin-bottom:8px}
.rv-sec > .lead{color:var(--ink-soft);font-size:.98rem;margin-bottom:16px}
.rv-send{border-top:1px solid var(--hairline);padding-top:28px;margin-top:30px;font-family:var(--serif);font-style:italic;font-size:1.22rem;color:var(--ink);text-align:center;line-height:1.55}
.faq details{border-bottom:1px solid var(--hairline);padding:14px 0}
.faq details:last-child{border-bottom:none}
.faq summary{font-weight:600;color:var(--ink);cursor:pointer;font-size:.98rem}
.faq p{color:var(--ink-soft);font-size:.92rem;margin-top:9px}
.rv-ikrar{background:var(--teal-wash);border-radius:var(--r);padding:24px 26px;margin:36px 0 0}
.rv-ikrar h2{font-size:1.25rem;margin-bottom:8px}
.rv-ikrar p{color:var(--ink-soft);font-size:.92rem;margin-bottom:9px}
.rv-ikrar .src{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);margin-bottom:0}
/* 12) TABLOLAR */
.sctable,.spectable{width:100%;border-collapse:collapse;font-size:.92rem}
.sctable td,.spectable td{padding:11px 6px;border-bottom:1px solid var(--hairline);text-align:start;vertical-align:top}
.sctable tr:last-child td,.spectable tr:last-child td{border-bottom:none}
.sctable td:first-child{color:var(--ink);font-weight:500}
.sctable td:last-child{text-align:end;font-family:var(--mono);font-size:.86rem;white-space:nowrap}
.spectable td:first-child{color:var(--ink-soft);width:46%}
.spectable td:last-child{color:var(--ink);font-family:var(--mono);font-size:.85rem}
.yn-ok{color:var(--good);font-weight:600}.yn-no{color:var(--warn);font-weight:600}.yn-warn{color:var(--accent);font-weight:600}
.cmptable{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:6px}
.cmptable th,.cmptable td{padding:11px 10px;border-bottom:1px solid var(--hairline);text-align:start;vertical-align:top}
.cmptable tr:last-child td{border-bottom:none}
.cmptable thead th{font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink)}
.cmptable thead th:first-child{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:500}
.cmptable td:first-child{color:var(--ink-soft)}
.cmptable td:not(:first-child){font-family:var(--mono);font-size:.86rem;color:var(--ink)}
.cmptable.map td:first-child{color:var(--ink);font-weight:500} /* rehber "kısa harita" varyantı */
.cmptable.map td:last-child{color:var(--ink-soft)}
.tblnote{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);margin-top:8px;line-height:1.55}
/* 13) NAKKAŞ VİZ + rail adımları + klass */
.rv-viz{margin:0;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px}
.rv-viz figcaption{margin-bottom:2px;display:block}
.rv-viz svg{width:100%;height:auto;display:block;margin:12px 0 10px}
.rv-viz svg text{font-family:var(--mono);font-size:10px;fill:var(--ink-soft)}
.rv-viz .trk{fill:var(--surface-2)} .rv-viz .fil{fill:var(--accent)}
.rv-viz .fil-soft{fill:var(--accent-wash)}
.rv-viz .tick{stroke:var(--ink-soft);stroke-width:1.4}
.rv-viz .axis{stroke:var(--hairline);stroke-width:2}
.rv-viz .peer{fill:none;stroke:var(--ink-soft);stroke-width:1.6;opacity:.55}
.rv-viz .dot{fill:var(--accent)}
.rv-viz .lbl{fill:var(--ink);font-weight:600}
.rv-viz .band{fill:var(--accent-wash)}
.rv-viz .seg-off{fill:none;stroke:var(--hairline);stroke-width:1.5}
.viz-note{font-size:.84rem;color:var(--ink-soft);line-height:1.5}
.railsteps{margin:12px 0 0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:11px}
.railsteps li{counter-increment:s;position:relative;padding-inline-start:28px;font-size:.9rem;color:var(--ink);line-height:1.4}
.railsteps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--accent-wash);color:var(--accent);font-family:var(--mono);font-size:.7rem;font-weight:600;display:grid;place-items:center}
.railnote{font-size:.82rem;color:var(--ink-soft);line-height:1.5;margin-top:12px;padding-top:12px;border-top:1px solid var(--hairline)}
.klass{font-family:var(--mono);font-size:.72rem;padding:3px 10px;border-radius:999px;background:var(--accent-wash);color:var(--accent);white-space:nowrap}
/* 14) KARŞILAŞTIRMA + A/B (kehribar=A · çam-teal=B, ince markör) */
.rev-logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-family:var(--mono);font-weight:600;font-size:.8rem;background:var(--surface-2);color:var(--ink)}
.rev-logo.amd{color:#B23A2E}.rev-logo.nv{color:#3f7a2a}.rev-logo.intel{color:#2E6CB5}
.cmp-heads{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.cmp-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:9px}
.cmp-card .top{display:flex;align-items:center;gap:11px}
.cmp-card h3{font-family:var(--serif);font-size:1.18rem;color:var(--ink);line-height:1.2}
.cmp-card .cmeta{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
.lean{margin-top:14px;display:flex;flex-direction:column;gap:18px}
.lean-label{font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:9px}
.lean-gauge{display:flex;align-items:center;gap:10px}
.lean-end{font-family:var(--mono);font-size:.68rem;color:var(--ink-soft);flex:none;width:38px}
.lean-end.r{text-align:end}
.lean-bar{position:relative;flex:1;height:10px;background:var(--surface-2);border-radius:999px}
.lean-bar::before{content:"";position:absolute;inset-inline-start:50%;top:-4px;bottom:-4px;width:1px;background:var(--hairline)}
.lean-fill{position:absolute;top:0;height:10px;background:var(--accent);border-radius:999px}
.lean-fill.left{inset-inline-end:50%;background:var(--accent)} .lean-fill.right{inset-inline-start:50%;background:var(--teal)}
.lean-why{color:var(--ink-soft);font-size:.88rem;line-height:1.5;margin-top:9px}
.cmp-pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.cmp-pick .col{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:18px 20px}
.cmp-pick .col h4{font-family:var(--serif);font-weight:600;font-size:1.08rem;margin-bottom:11px;color:var(--ink)}
.cmp-pick ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cmp-pick li{font-size:.9rem;color:var(--ink);padding-inline-start:15px;position:relative}
.cmp-pick li::before{content:"·";position:absolute;inset-inline-start:3px;color:var(--accent);font-weight:700}
.cmp-card.side-a{border-top:3px solid var(--accent)} .cmp-card.side-b{border-top:3px solid var(--teal)}
.cmp-pick .col.side-a{border-top:3px solid var(--accent)} .cmp-pick .col.side-b{border-top:3px solid var(--teal)}
.cmptable.vs thead th:nth-child(2){color:var(--accent);border-bottom:2px solid var(--accent)}
.cmptable.vs thead th:nth-child(3){color:var(--teal);border-bottom:2px solid var(--teal)}
.cmptable.vs tbody td:nth-child(2){border-inline-start:3px solid var(--accent-wash)}
.cmptable.vs tbody td:nth-child(3){border-inline-start:3px solid var(--teal-wash)}
.lean-gauge .lean-end:first-child{color:var(--accent)} .lean-gauge .lean-end.r{color:var(--teal)}
/* 15) KATEGORİ */
.cathead .crumb{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin-bottom:12px}
.cathead .crumb a{color:var(--ink-soft)} .cathead .crumb a:hover{color:var(--ink)} .cathead .crumb b{color:var(--ink)}
.cathead h1{font-size:2.3rem;margin-bottom:12px}
.cathead .intro{color:var(--ink-soft);max-width:64ch;font-size:1.02rem}
.catbody{display:grid;grid-template-columns:236px 1fr}
.catbody.solo{grid-template-columns:1fr} .catbody.solo .catmain{padding-inline:0}
main .catbody-sec{padding-block:0}
.filters{border-inline-end:1px solid var(--hairline);padding-block:30px 34px;padding-inline:0 26px}
.filters .ftitle{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.filters .ftitle svg:first-child{width:15px;height:15px;color:var(--accent)}
.filters .fdemo{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);margin-bottom:16px}
.fgroup{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--hairline)}
.fgroup:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none}
.fgroup .eyebrow{display:block;margin-bottom:9px;color:var(--accent-soft)}
.opt{display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;border-radius:7px;font-size:.92rem;color:var(--ink);cursor:pointer;transition:background .15s ease}
.opt:hover{background:var(--accent-wash)}
.opt input{accent-color:var(--accent);width:16px;height:16px}
.opt .ct{margin-inline-start:auto;font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:1px 8px;min-width:22px;text-align:center}
.fcaret{display:none} .ftoggle{display:none}
.catmain{padding-block:30px 34px;padding-inline:30px 0;min-width:0}
.guide-strip{background:var(--teal-fill);color:var(--on-teal);border-radius:var(--r);padding:22px 24px;display:flex;align-items:center;gap:20px;margin-bottom:26px}
.guide-strip .gs-ic{width:38px;height:38px;flex:none;opacity:.92}
.guide-strip h3{color:inherit;font-size:1.2rem;margin-bottom:3px}
.guide-strip p{font-size:.9rem;opacity:.92}
.guide-strip .btn{margin-inline-start:auto;flex:none;white-space:nowrap}
.rev-eyebrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.rev-eyebrow .cnt{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
.revgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rev{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);padding:20px 20px 16px;display:flex;flex-direction:column;gap:13px;transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.rev::before{content:"";position:absolute;top:0;inset-inline-end:0;height:2px;width:100%;background:linear-gradient(270deg,var(--accent),var(--accent-soft));transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.15,1)}
.rev:hover{border-color:var(--accent);transform:translateY(-1px)}
.rev:hover::before{transform:scaleX(1)}
.specrow{display:flex;gap:6px;flex-wrap:wrap}
.spec{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);background:var(--surface-2);border-radius:6px;padding:3px 8px}
/* .pm (bağımsız artı/eksi) kaldırıldı — Görü düsturu (soyut özellik-tartısı = kör pazar). */
.rev-top{display:flex;align-items:center;gap:11px}
.rev-name{font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);line-height:1.2}
.rev-for{margin-inline-start:auto}
.verdict{background:var(--accent-wash);border-radius:var(--r-sm);padding:12px 14px}
.verdict .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.verdict p{font-size:.9rem;color:var(--ink)}
.rev-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:2px;flex-wrap:wrap}
.rev-price{font-family:var(--mono);font-size:.84rem;color:var(--ink)}
.rev-price span{color:var(--ink-soft);font-size:.7rem}
.rev-link{margin-inline-start:auto;font-size:.86rem;font-weight:600;color:var(--accent-soft)}
.noscore{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);display:inline-flex;gap:7px;align-items:center;margin-top:22px}
.noscore svg{width:15px;height:15px;color:var(--good)}
.fapply{display:none;width:fit-content;margin-block-start:20px;margin-inline-start:auto;padding:10px 20px;font-size:.9rem}
/* 16) REHBER */
.steps{display:flex;flex-direction:column;gap:18px;margin:24px 0}
.step{display:flex;gap:15px;align-items:flex-start}
.step .n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-wash);color:var(--accent);font-family:var(--mono);font-weight:600;display:grid;place-items:center;font-size:.92rem;margin-top:2px}
.step h3{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin-bottom:4px}
.step p{color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.rv-pm{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.rv-pm .col{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:16px 18px}
.rv-pm .col.plus{border-top:3px solid var(--good)} .rv-pm .col.minus{border-top:3px solid var(--warn)}
.rv-pm .lab{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.rv-pm .plus .lab{color:var(--good)} .rv-pm .minus .lab{color:var(--warn)}
.rv-pm ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.rv-pm li{font-size:.9rem;color:var(--ink);padding-inline-start:17px;position:relative}
.rv-pm .plus li::before{content:"+";position:absolute;inset-inline-start:0;color:var(--good);font-family:var(--mono);font-weight:600}
.rv-pm .minus li::before{content:"–";position:absolute;inset-inline-start:0;color:var(--warn);font-family:var(--mono);font-weight:600}
.mistakes{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.mistakes li{font-size:.94rem;color:var(--ink);padding-inline-start:24px;position:relative;line-height:1.55}
.mistakes li::before{content:"⚠";position:absolute;inset-inline-start:0;color:var(--warn);font-size:.82rem}
/* 17) BİLEŞEN RESPONSIVE */
@media (max-width:900px){
.rv-head{padding-top:32px}
.rv-layout{grid-template-columns:1fr;gap:0}
.rv-rail{grid-column:1;position:static;padding-top:24px;flex-direction:row;flex-wrap:wrap}
.qspec,.rv-viz{flex:1 1 240px}
.article{padding-top:22px}
}
@media (max-width:820px){
.catbody{grid-template-columns:1fr}
.filters{border-inline-end:none;border-bottom:1px solid var(--hairline);padding:18px 0}
.filters .ftitle{cursor:pointer;margin-bottom:0}
.filters .fcaret{display:inline-block;width:15px;height:15px;flex:none;margin-inline-start:auto;transition:transform .2s ease}
.filters .fwrap{display:none;margin-top:16px}
.filters .ftoggle:checked ~ .fwrap{display:block}
.filters .ftoggle:checked ~ .ftitle .fcaret{transform:rotate(180deg)}
.filters .ftoggle{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.filters:has(.ftoggle:focus-visible) .ftitle{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.catmain{padding:22px 0 30px}
.fapply{display:block}
}
@media (max-width:560px){
.article{padding-block:32px 40px}
.rv-essay{font-size:1.02rem}
.cmp-heads,.cmp-pick{grid-template-columns:1fr}
.cmptable.vs{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.cmptable.vs th,.cmptable.vs td{white-space:normal;min-width:96px}
.cmptable.map{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rv-pm{grid-template-columns:1fr}
.revgrid{grid-template-columns:1fr}
.guide-strip{flex-direction:column;align-items:flex-start;gap:14px}
.guide-strip .btn{margin-inline-start:0;width:100%;text-align:center}
.noscore{display:flex}
.rev{padding:18px}
}
/* 18) RTL / BiDi — düzenin ana ekseni logical-properties ile kendiliğinden
aynalanır; burada yalnız yön-ima eden GLİFLER ve transform-hareketleri
(mantıksal özelliğe çevrilemeyen süsler) düzeltilir. dir ""de gelir. */
[dir="rtl"] .cat .t .arrow{transform:scaleX(-1)} /* → ok RTL'de ← döner */
[dir="rtl"] .cat.live:hover .t .arrow{transform:translateX(3px) scaleX(-1)}
[dir="rtl"] .kesif-note{transform:translateX(5px)} /* açılış kayışı aynalanır */
[dir="rtl"] .rev::before{transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
/* Keşif Balonu offset-path: sabit dekoratif yörünge, okuma yönüne bağlı değil — aynalanmaz. */
/* ============================================================
19) FORM · UYARI · SAYFALAMA · BOŞ-DURUM · 404
(standart sayfalar · İletişim/dönüt · yorum formu · arama durumları)
UI kit'te ortaya çıkan eksik atomlar — logical-props (RTL-güvenli).
============================================================ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field > label{font-weight:600;font-size:.9rem;color:var(--ink)}
.field .hint{font-size:.8rem;color:var(--ink-soft)}
.field .err{font-size:.8rem;color:var(--warn)}
.input,.textarea,.select{font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-radius:10px;padding:11px 14px;width:100%}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--ink-soft);opacity:.7}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-wash)}
.field.invalid .input,.field.invalid .textarea,.field.invalid .select{border-color:var(--warn)}
.check{display:flex;align-items:flex-start;gap:9px;font-size:.94rem;color:var(--ink);cursor:pointer}
.check input{accent-color:var(--accent);width:16px;height:16px;margin-top:2px;flex:none}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.notice{display:flex;gap:11px;align-items:flex-start;border-radius:var(--r-sm);padding:13px 16px;font-size:.92rem;line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--hairline);border-inline-start:3px solid var(--hairline)}
.notice .ic{flex:none;width:18px;height:18px;margin-top:1px}
.notice.info{background:var(--accent-wash);border-color:transparent;border-inline-start-color:var(--accent)} .notice.info .ic{color:var(--accent)}
.notice.ok{background:var(--teal-wash);border-color:transparent;border-inline-start-color:var(--good)} .notice.ok .ic{color:var(--good)}
.notice.warn{border-inline-start-color:var(--warn)} .notice.warn .ic{color:var(--warn)}
.notice.err{border-inline-start-color:var(--warn)} .notice.err .ic{color:var(--warn)}
.notice a{font-weight:600}
.pagination{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:34px 0;font-family:var(--mono);font-size:.86rem}
.pagination a,.pagination span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 11px;border-radius:10px;border:1px solid var(--hairline);color:var(--ink-soft)}
.pagination a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.pagination .current{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
.pagination .dots{border:none;min-width:auto}
/* 404 — bulunamadı: balon emblemli, ortalanmış, dengeli (kaynak-kasa'da yok; tema sesiyle tasarlandı) */
.notfound{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:56px 40px}
.notfound .nf-mark{width:66px;height:66px;margin-bottom:20px}
.notfound .nf-mark svg{width:100%;height:100%;display:block}
.notfound .nf-code{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.notfound h1{font-size:clamp(1.9rem,4vw,2.5rem);margin-bottom:12px}
.notfound .nf-lead{color:var(--ink-soft);font-size:1.08rem;max-width:46ch;margin:0 auto}
.empty{text-align:center;padding:56px 20px;color:var(--ink-soft)}
.empty .ic{width:44px;height:44px;color:var(--hairline);margin:0 auto 14px;display:block}
.empty h3{font-size:1.2rem;color:var(--ink);margin-bottom:6px}
.empty p{font-size:.94rem;max-width:42ch;margin:0 auto 18px}
.notfound{text-align:center;padding:72px 20px}
.notfound .code{font-family:var(--mono);font-weight:600;font-size:clamp(3rem,10vw,5rem);color:var(--accent);line-height:1}
.notfound h1{font-size:1.6rem;margin:12px 0 8px}
.notfound p{color:var(--ink-soft);margin-bottom:22px;max-width:44ch;margin-inline:auto}
/* ============================================================
20) NAKKAŞ İKON · DİL DEĞİŞTİRİCİ · İÇERİK GÖVDESİ (.prose) ·
KÜNYE · YORUM · BREADCRUMB (finer-pass — kit zorunluları)
============================================================ */
/* İkon (Nakkaş alfabesi — sprite +