/* =========================================================
qarpusai — kimlik J2 "Silik"
Token + bilesen katmani. Kaynak: DESIGN.md (yanindaki dosya).
Kural kitabi: C:\2.beyin\qarpusOS\600-Arsenal\Brand\KIMLIK-J2.md
Kullanim:
...
Yazi tipleri ile yuklenir; burada @import YOK (render'i bloklar).
Secenekler (tek tek ac, hepsini birden acma):
data-opt~="izgara" -> J2a, 1 px kilcal izgara
data-font="familjen" -> J2b, Familjen Grotesk
data-opt~="filigran" -> J2c, dilim filigrani
data-mode="capture" -> cekim modu (callout + details + ust menu gizli, 11 px -> 13 px)
data-doku="off" -> nokta dokusunu kapat
Kart yok, golge yok, gradyan yok. Kose 0-2 px. Kirmizi yalniz 3 yerde.
========================================================= */
:root{
/* --- renk: katmanlar --- */
--qa-plaka:#231D1F; /* ust cubuk + sol menu (en koyu) */
--qa-sayfa:#2E2729; /* sayfa zemini */
--qa-band:#372F32; /* band / raf — bir doz acik */
--qa-kutu-hover:#3B4136; /* link kutusu hover zemini (#55B052 %14 + band) */
/* --- renk: metin --- */
--qa-metin:#F5EEEF; /* birinci okuma katmani */
--qa-ikincil:#BBADB1; /* log, kaynak, menu, kucuk etiket */
/* --- renk: cizgi --- */
--qa-cizgi:#82757A; /* sayfa ve plaka uzerinde >=3,0 */
--qa-cizgi-band:#84767B; /* band uzerinde >=3,0 */
/* --- renk: anlam --- */
--qa-primary:#55B052; /* TEK aksan — dogrulandi / one cikan */
--qa-uyari:#F13251; /* kirmizi — YAZI DEGIL. 3 yer + maskot */
--qa-kutu-yazi:#1A1C1F; /* yesil zemin uzerindeki yazi — secim rengi (6,28) */
/* --- renk: grafik --- */
--qa-cekirdek:#1E1618; /* eski cekirdek tonu (artik kullanilmiyor) */
--qa-damla:#1E1618; /* cekirdek damlasi dolgusu (koyu) */
--qa-filigran:#46343A; /* yalniz data-opt~="filigran" */
/* --- yazi ailesi --- */
--qa-sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
--qa-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
/* --- olcek: 5 basamak, ara boy yok --- */
--qa-t-11:11px; /* etiket, log, kod, rozet, not */
--qa-t-13:13px; /* govde — taban */
--qa-t-15:15px; /* lede, kapanis, wordmark */
--qa-t-20:20px; /* baslik */
--qa-t-30:30px; /* kahraman sayi */
--qa-lh:1.6; /* taban satir yuksekligi */
/* --- bosluk --- */
--qa-blok:34px; /* bloklar arasi */
--qa-dolgu:30px; /* icerik dolgusu */
--qa-oluk:22px; /* kenar sutunu <-> icerik */
--qa-blok-dar:26px; /* <=760px */
--qa-dolgu-dar:16px; /* <=760px */
/* --- kose: 0-2 px --- */
--qa-r-none:0;
--qa-r-sm:1px;
--qa-r-md:2px;
/* --- iskelet olculeri --- */
--qa-ust:44px; /* ust cubuk yuksekligi */
--qa-menu:200px; /* sol menu genisligi */
--qa-icerik:880px; /* icerik sutunu azami */
--qa-kenar:92px; /* kenar sutunu (marj damgasi) */
/* --- varliklar --- */
--qa-maskot:url("mascot.png");
/* --doku.js tarafindan yazilir; yoksa duz zemin */
--qa-doku:none;
}
/* ---------- temel reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
/* ---------- kok: .qa ---------- */
.qa{
background-color:var(--qa-sayfa);
background-image:var(--qa-doku);
color:var(--qa-metin);
font-family:var(--qa-sans);
font-size:var(--qa-t-13);
line-height:var(--qa-lh);
scroll-margin-top:calc(var(--qa-ust) + 2px);
}
.qa :focus-visible{outline:2px solid var(--qa-primary);outline-offset:2px}
/* =========================================================
1) UST CUBUK — plaka katmani
========================================================= */
.qa-top{
height:var(--qa-ust);
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:0 22px;
background-color:var(--qa-plaka);background-image:var(--qa-doku);
border-bottom:1px solid var(--qa-cizgi);
}
.qa-brand{display:flex;align-items:center;gap:9px;min-width:0}
.qa-word{
font-weight:600;font-size:var(--qa-t-15);line-height:1;
letter-spacing:-.015em;color:var(--qa-metin);
}
.qa-dot{width:6px;height:6px;background:var(--qa-primary);display:block;flex:none}
.qa-mascot{width:22px;height:24px;display:block;flex:none;margin-left:1px;object-fit:contain}
/* maskotu ![]()
yerine CSS ile basmak istersen: */
.qa-mascot-css{
background-image:var(--qa-maskot);background-size:contain;
background-repeat:no-repeat;background-position:center;
}
.qa-nav{display:flex;gap:20px;flex-wrap:wrap;min-width:0}
.qa-link{font-size:var(--qa-t-13);color:var(--qa-ikincil);text-decoration:none;white-space:nowrap}
/* =========================================================
2) ISKELET — sol menu + icerik
========================================================= */
.qa-shell{display:grid;grid-template-columns:var(--qa-menu) 1fr;align-items:stretch}
.qa-side{
background-color:var(--qa-plaka);background-image:var(--qa-doku);
border-right:1px solid var(--qa-cizgi);
padding:16px 0 26px;min-width:0;
}
.qa-sidetitle{font-size:var(--qa-t-11);font-weight:600;color:var(--qa-ikincil);padding:0 18px 10px}
.qa-list{display:flex;flex-direction:column}
.qa-item{
display:flex;align-items:center;
font-size:var(--qa-t-13);line-height:30px;height:30px;padding:0 18px;
color:var(--qa-ikincil);border-left:2px solid transparent;text-decoration:none;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qa-kod{font-family:var(--qa-mono);font-size:var(--qa-t-11);margin-right:10px;color:var(--qa-ikincil)}
/* aktif satir: kirmizi cizgi (3 yerden biri) + metin rengine yukselme + hairline */
.qa-item.on{
border-left-color:var(--qa-uyari);color:var(--qa-metin);font-weight:500;
box-shadow:inset 0 1px 0 var(--qa-cizgi),inset 0 -1px 0 var(--qa-cizgi);
}
.qa-item.on .qa-kod{color:var(--qa-metin)}
/* dilim ilerleme — 4/7 */
.qa-ilerleme{
display:flex;align-items:center;gap:10px;
margin-top:18px;padding:14px 18px 0;border-top:1px solid var(--qa-cizgi);
}
.qa-dilim{display:block;flex:none}
.qa-oran{font-family:var(--qa-mono);font-size:var(--qa-t-11);color:var(--qa-ikincil)}
/* icerik sutunu + kenar sutunu izgarasi */
.qa-content{
max-width:var(--qa-icerik);
padding:var(--qa-dolgu) var(--qa-dolgu) var(--qa-blok);
display:flex;flex-direction:column;gap:var(--qa-blok);min-width:0;
}
.qa-g{display:grid;grid-template-columns:var(--qa-kenar) 1fr;gap:0 var(--qa-oluk);align-items:start}
/* katman bantlari — kutu degil, tam genislik duz yuzey */
.qa-band{
background:var(--qa-band);
margin:0 calc(-1 * var(--qa-dolgu));padding:24px var(--qa-dolgu);
position:relative;overflow:hidden;
}
.qa-band > .qa-g{position:relative}
.qa-raf{
background:var(--qa-band);
margin:0 calc(-1 * var(--qa-dolgu));padding:22px var(--qa-dolgu);
}
/* =========================================================
3) KENAR SUTUNU + LOG SATIRI
========================================================= */
.qa-mg{padding-top:4px;min-width:0}
.qa-log{
font-family:var(--qa-mono);font-size:var(--qa-t-11);line-height:1.55;
color:var(--qa-ikincil);overflow-wrap:anywhere;
}
/* =========================================================
4) BASLIK + LEDE
========================================================= */
.qa-h2{
margin:0;font-weight:600;font-size:var(--qa-t-20);line-height:1.25;
letter-spacing:-.015em;color:var(--qa-metin);text-wrap:balance;
}
.qa-lede{margin:10px 0 0;font-size:var(--qa-t-15);line-height:var(--qa-lh);max-width:48ch;color:var(--qa-metin)}
/* =========================================================
5) SAYI SATIRI + KAYNAK SATIRI — band katmani
Uc hucre. Dorde cikarma. Kaynak satiri ZORUNLU.
========================================================= */
.qa-nums{display:grid;grid-template-columns:repeat(3,1fr)}
.qa-num{padding:0 20px;min-width:0}
.qa-num:first-child{padding-left:0}
.qa-num + .qa-num{border-left:1px solid var(--qa-cizgi-band)}
.qa-n{
font-weight:600;font-size:var(--qa-t-30);line-height:1.15;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--qa-metin);overflow-wrap:anywhere;
}
.qa-nl{margin-top:6px;font-size:var(--qa-t-13);font-weight:500;color:var(--qa-primary);line-height:1.45}
.qa-src{
font-family:var(--qa-mono);font-size:var(--qa-t-11);line-height:1.55;color:var(--qa-ikincil);
margin-top:18px;padding-top:12px;border-top:1px solid var(--qa-cizgi-band);
}
/* =========================================================
6) KARSILASTIRMA CUBUGU — sayfa katmani, yatak plaka
Modeller RENKLE DEGIL ROZETLE ayrilir. Yesil = one cikan.
========================================================= */
.qa-cmp{display:flex;flex-direction:column;gap:10px}
.qa-cmp-t{font-size:var(--qa-t-11);font-weight:500;color:var(--qa-ikincil);margin-bottom:4px}
.qa-row{display:grid;grid-template-columns:104px 1fr 58px 68px;align-items:center;gap:14px}
.qa-badge{
font-size:var(--qa-t-11);border:1px solid var(--qa-cizgi);border-radius:var(--qa-r-md);
padding:2px 8px;color:var(--qa-ikincil);white-space:nowrap;justify-self:start;line-height:1.5;
}
.qa-track{
display:block;height:8px;background:var(--qa-plaka);
border:1px solid var(--qa-cizgi);border-radius:var(--qa-r-sm);overflow:hidden;
}
.qa-fill{display:block;height:100%;background:var(--qa-cizgi)}
.qa-fill.on{background:var(--qa-primary)}
.qa-val{
font-family:var(--qa-mono);font-size:var(--qa-t-13);
font-variant-numeric:tabular-nums;text-align:right;color:var(--qa-metin);
}
.qa-tag{font-size:var(--qa-t-11);color:var(--qa-primary);white-space:nowrap}
/* =========================================================
7) CALLOUT CIFTI — raf katmani. Ikisi birlikte gelir ya da hic gelmez.
========================================================= */
.qa-cos{display:grid;grid-template-columns:1fr 1fr;gap:var(--qa-oluk)}
.qa-co{border-left:2px solid;padding-left:14px}
.qa-co-t{display:flex;align-items:center;gap:7px;font-size:var(--qa-t-11);font-weight:600;line-height:1.5}
.qa-co p{margin:4px 0 0;font-size:var(--qa-t-13);line-height:var(--qa-lh);color:var(--qa-metin)}
.qa-co-dikkat{border-left-color:var(--qa-uyari)} /* kirmizinin 2. yeri */
.qa-co-dikkat .qa-co-t{color:var(--qa-metin)}
.qa-co-ok{border-left-color:var(--qa-primary)}
.qa-co-ok .qa-co-t{color:var(--qa-primary)}
/* =========================================================
8) CEKIRDEK DAMLASI — madde isareti
========================================================= */
.qa-damla{
width:5px;height:8px;flex:none;display:inline-block;background:var(--qa-damla);
border-radius:50% 50% 48% 48% / 66% 66% 34% 34%;
transform:rotate(-8deg);box-shadow:0 0 0 1px var(--qa-cizgi-band);
}
/* =========================================================
9) KABUK YAYI AYRACI + "bizde boyle cikti" KAPANISI
Gozlem <= 14 kelime, hukum yok.
========================================================= */
.qa-arc{display:block;width:100%;height:7px;overflow:visible;color:var(--qa-cizgi)}
.qa-cikti{margin-top:20px}
.qa-cikti-l{font-family:var(--qa-mono);font-size:var(--qa-t-11);color:var(--qa-primary);display:block}
.qa-cikti-t{margin:6px 0 0;font-size:var(--qa-t-15);line-height:var(--qa-lh);max-width:52ch;color:var(--qa-metin)}
/* =========================================================
10) DETAILS — palet/kontrast dokumu. Varsayilan KAPALI, kutusuz.
========================================================= */
.qa-det{border-top:1px solid var(--qa-cizgi);padding-top:14px}
.qa-det summary{
list-style:none;cursor:pointer;font-size:var(--qa-t-11);color:var(--qa-ikincil);
display:flex;align-items:center;gap:9px;
}
.qa-det summary::-webkit-details-marker{display:none}
.qa-det summary::before{content:"+";font-family:var(--qa-mono);font-size:var(--qa-t-13);line-height:1;color:var(--qa-cizgi)}
.qa-det[open] summary::before{content:"\2212"}
.qa-det summary:hover{color:var(--qa-metin)}
.qa-palrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.qa-palname{width:74px;flex:none;font-size:var(--qa-t-11);color:var(--qa-ikincil)}
.qa-chip{
display:inline-flex;align-items:center;gap:6px;font-family:var(--qa-mono);
font-size:var(--qa-t-11);font-variant-numeric:tabular-nums;color:var(--qa-ikincil);
}
.qa-chip i{width:12px;height:12px;display:block;border-radius:var(--qa-r-md);border:1px solid var(--qa-cizgi)}
.qa-note{margin:14px 0 0;font-size:var(--qa-t-11);line-height:1.65;color:var(--qa-ikincil);max-width:76ch}
.qa-note b{font-family:var(--qa-mono);font-weight:500;color:var(--qa-metin);font-variant-numeric:tabular-nums}
/* =========================================================
11) LINK KUTUSU — "kart yok" kuralinin TEK istisnasi
Yalniz baglantilari icin; icerik karti hala yasak.
Olculer avenox.lol DNA'sindan (dna-avenox-linkkart.json),
renk ve karakter J2'den: gold yok, serif yok, GOLGE YOK, kose 2 px.
Dizilim: [16 px ikon] [ad / mono hedef] [not] [cekirdek damlasi]
========================================================= */
.qa-kutular{display:grid;gap:8px}
.qa-kutu{
display:flex;align-items:center;gap:12px;
min-height:56px;padding:10px 16px;
background:var(--qa-band);
border:1px solid var(--qa-cizgi-band);
border-radius:var(--qa-r-md);
color:var(--qa-metin);text-decoration:none;
transition:background-color .15s ease,border-color .15s ease,transform .15s ease;
touch-action:manipulation;-webkit-tap-highlight-color:rgba(85,176,82,.20);
}
.qa-kutu-ikon{width:16px;height:16px;flex:none;display:block;color:var(--qa-ikincil)}
.qa-kutu-ic{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.qa-kutu-ad{font-size:var(--qa-t-15);font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.qa-kutu-hedef{
font-family:var(--qa-mono);font-size:var(--qa-t-13);line-height:1.4;
color:var(--qa-ikincil);overflow-wrap:anywhere;
}
.qa-kutu-not{font-size:var(--qa-t-13);line-height:1.4;color:var(--qa-ikincil);text-align:right;flex:0 1 auto;min-width:0}
/* sag kenardaki isaret: referanstaki okun yerini tutar; halkasi ikincil renkte okunur */
.qa-kutu .qa-damla{flex:none;margin-left:4px;box-shadow:0 0 0 1px var(--qa-ikincil)}
/* geri bildirim: zemin silik yesile doner, cerceve yesillenir, basinca 1 px iner.
KUTULAR ESIT — birincil/dolgulu kutu yok. */
.qa-kutu:hover{background:var(--qa-kutu-hover);border-color:var(--qa-primary)}
.qa-kutu:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.qa-kutu{transition:none}}
/* --- video kutusu: genis link kutusu turevi (kucuk resim + baslik + mono meta) --- */
.qa-kutu--video{align-items:flex-start;gap:14px;padding:12px 14px;min-height:0}
.qa-kutu-thumb{
width:160px;height:90px;flex:none;object-fit:cover;display:block;
border:1px solid var(--qa-cizgi-band);border-radius:var(--qa-r-md);
background:var(--qa-plaka);
}
.qa-kutu--video .qa-kutu-ad{line-height:1.4}
.qa-kutu--video .qa-kutu-hedef{margin-top:5px}
/* repo kutusu: video kutusunun ALTINDA ayri, kucuk, cerceveli baglanti */
.qa-kutu--repo{
display:inline-flex;min-height:0;padding:5px 10px;gap:8px;
font-family:var(--qa-mono);font-size:var(--qa-t-11);color:var(--qa-ikincil);
}
.qa-kutu--repo:hover{color:var(--qa-metin)}
/* gezinme kutusu: ayni listede ama ondan 8 px ayrik durur */
.qa-kutu--gezinme{margin-top:8px}
/* =========================================================
12) TERMINAL — deney penceresi (D duzeninin hero sahnesi)
Plaka zemin, kilcal cerceve, ICINDE YALNIZ MONO VERI.
Sayi gosterdigi icin ALTINDA .qa-src kaynak satiri ZORUNLU.
Acilis sirasi: tek sefer, <= 1,2 sn, sonra sessizlik.
========================================================= */
.qa-terminal{
background:var(--qa-plaka);background-image:var(--qa-doku);
border:1px solid var(--qa-cizgi);border-radius:var(--qa-r-md);
overflow:hidden;
}
.qa-terminal-bar{
display:flex;align-items:center;gap:7px;height:24px;padding:0 14px;
border-bottom:1px solid var(--qa-cizgi);
}
.qa-terminal-bar i{display:block;width:9px;height:1px;background:var(--qa-cizgi)}
.qa-terminal-govde{padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.qa-terminal-satir{
margin:0;font-family:var(--qa-mono);font-size:var(--qa-t-13);line-height:1.7;
color:var(--qa-metin);white-space:pre;font-variant-numeric:tabular-nums;
}
.qa-imlec{
display:inline-block;width:8px;height:14px;background:var(--qa-primary);
vertical-align:-2px;margin-left:4px;
}
/* =========================================================
SECENEK: data-opt~="izgara" (J2a)
Menu listesi, sayi blogu ve callout cifti 1 px kilcal izgaraya oturur.
Sayfa geneline cerceve YOK — yalniz bu uc blok.
UYARI: menu hucreleri plaka yerine band rengine gecer, kontrastlar duser.
========================================================= */
.qa[data-opt~="izgara"] .qa-list{display:grid;gap:1px;background:var(--qa-cizgi-band)}
.qa[data-opt~="izgara"] .qa-item{background:var(--qa-band)}
.qa[data-opt~="izgara"] .qa-item.on{box-shadow:none}
.qa[data-opt~="izgara"] .qa-nums{gap:1px;background:var(--qa-cizgi-band)}
.qa[data-opt~="izgara"] .qa-num,
.qa[data-opt~="izgara"] .qa-num:first-child{padding:16px 18px;background:var(--qa-band)}
.qa[data-opt~="izgara"] .qa-num + .qa-num{border-left:0}
/* kaynak satiri izgaranin disinda kalir, yalniz hucre dolgusuyla hizalanir */
.qa[data-opt~="izgara"] .qa-src{padding-left:18px;padding-right:18px}
.qa[data-opt~="izgara"] .qa-cos{gap:1px;background:var(--qa-cizgi-band)}
.qa[data-opt~="izgara"] .qa-co{background:var(--qa-band);padding:16px 18px 16px 14px}
/* =========================================================
SECENEK: data-font="familjen" (J2b)
Ayni 5 basamak. Familjen daha genis oturur: harf izi gevser, 600 yerine 700.
Renk degismez — kontrast tablosu ayni kalir.
========================================================= */
.qa[data-font="familjen"]{--qa-sans:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif}
.qa[data-font="familjen"] .qa-word,
.qa[data-font="familjen"] .qa-h2{font-weight:700;letter-spacing:-.01em}
.qa[data-font="familjen"] .qa-n{font-weight:700;letter-spacing:-.015em}
.qa[data-font="familjen"] .qa-sidetitle,
.qa[data-font="familjen"] .qa-co-t{font-weight:500}
/* =========================================================
SECENEK: data-opt~="filigran" (J2c)
Yalniz band uzerinde, band'in overflow:hidden'i kirpar. Kontrast <= 1,15.
========================================================= */
.qa-fili{display:none}
.qa[data-opt~="filigran"] .qa-band .qa-fili{
display:block;position:absolute;right:-18px;top:50%;transform:translateY(-50%);
width:216px;height:auto;pointer-events:none;color:var(--qa-filigran);
}
/* =========================================================
CEKIM MODU: data-mode="capture"
Callout cifti, details ve ust menu gizli. 11 px basamagi 13 px'e cikar.
Video karesinde 11 px okunmaz. Hedef <= 90 kelime.
========================================================= */
.qa[data-mode="capture"] .qa-cos,
.qa[data-mode="capture"] .qa-det,
.qa[data-mode="capture"] .qa-nav{display:none}
.qa[data-mode="capture"] .qa-log,
.qa[data-mode="capture"] .qa-kod,
.qa[data-mode="capture"] .qa-oran,
.qa[data-mode="capture"] .qa-src,
.qa[data-mode="capture"] .qa-cikti-l,
.qa[data-mode="capture"] .qa-cmp-t,
.qa[data-mode="capture"] .qa-badge,
.qa[data-mode="capture"] .qa-tag,
.qa[data-mode="capture"] .qa-sidetitle{font-size:var(--qa-t-13)}
/* =========================================================
KUCUK EKRAN
========================================================= */
@media (max-width:760px){
.qa-shell{grid-template-columns:1fr}
.qa-side{padding:10px 0 8px;border-right:0;border-bottom:1px solid var(--qa-cizgi)}
.qa-sidetitle{padding:0 var(--qa-dolgu-dar) 8px}
.qa-list{flex-direction:row;overflow-x:auto}
.qa-item{border-left:0;border-bottom:2px solid transparent;height:auto;line-height:1.45;padding:7px 13px}
.qa-item.on{border-left-color:transparent;border-bottom-color:var(--qa-uyari);box-shadow:none}
.qa-ilerleme{margin-top:10px;padding-top:12px}
.qa-content{padding:22px var(--qa-dolgu-dar) var(--qa-blok-dar);gap:var(--qa-blok-dar)}
.qa-band{margin:0 calc(-1 * var(--qa-dolgu-dar));padding:20px var(--qa-dolgu-dar)}
.qa-raf{margin:0 calc(-1 * var(--qa-dolgu-dar));padding:18px var(--qa-dolgu-dar)}
.qa-g{grid-template-columns:1fr;gap:10px}
.qa-mg{padding-top:0}
.qa-nums{grid-template-columns:1fr;gap:16px}
.qa-num{padding:0}
.qa-num + .qa-num{border-left:0;border-top:1px solid var(--qa-cizgi-band);padding-top:14px}
.qa-row{grid-template-columns:96px 1fr 56px;gap:10px}
.qa-row .qa-tag{grid-column:2 / -1}
.qa-cos{grid-template-columns:1fr;gap:16px}
.qa-top{height:auto;padding:9px var(--qa-dolgu-dar);flex-wrap:wrap;gap:9px}
/* link kutusu: not alt satira iner, kutu daralir */
.qa-kutu{flex-wrap:wrap;padding:9px 13px;gap:10px}
.qa-kutu-not{flex:1 0 100%;text-align:left;order:3}
.qa[data-opt~="izgara"] .qa-list{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
.qa[data-opt~="izgara"] .qa-item{border-bottom:0}
.qa[data-opt~="izgara"] .qa-item.on{border-bottom:0;border-left:2px solid var(--qa-uyari)}
.qa[data-opt~="izgara"] .qa-num,
.qa[data-opt~="izgara"] .qa-num + .qa-num{padding:16px 18px;border-top:0}
}