/* kavurucu-kart.css — ana sayfa "Kavurucuysan" bölümü (.kvr), 27 Eki 2026.
 * Onaylı föy website/lab/ana-kavurucu-lab.html?v=1&b=2'den taşındı (brif/2026-10-27-anasayfa-kavurucu.md):
 * Ramp "One platform" ızgarası, her kartta panonun kendi penceresi (Hesap · Fiyat · Bugün · Piyasa · Kavruk).
 * Bütün kurallar .kvr altında: kart içi sınıf adları (sat · son · on · ust …) sitenin başka yerlerinde de var. Mavi yok. */
.kvr .izg{grid-template-columns:repeat(6,1fr)}
.kvr .kt.M,.kvr .kt.AY{grid-column:span 3}
.kvr .kt.Y,.kvr .kt.C,.kvr .kt.K{grid-column:span 2}
.kvr{--self:#141413;--m:#141413;--g:#6A6963;--z:#F4F3F0;background:#141413;color:#fff;padding:104px 48px 96px;font-family:var(--font-b)}
.kvr .k-ic{max-width:1248px;margin:0 auto}
.kvr .ust{margin:0 0 14px;font:500 16px/1.3 var(--font-b);color:#BDBDBD}
.kvr h2{margin:0;max-width:20ch;font:600 clamp(32px,3.6vw,50px)/1.06 var(--font-b);letter-spacing:-.045em}
.kvr h2 span{color:#8C8C8C}
.kvr .eyl{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.kvr .d1,.kvr .d2{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:999px;font:600 16px var(--font-b);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.kvr .d1{background:#fff;color:#141413}
.kvr .d2{background:#2A2927;color:#fff}
.kvr .izg{display:grid;gap:20px;margin-top:56px}
.kvr .kt{position:relative;overflow:hidden;border-radius:16px;background:#1E1D1B;min-height:440px;display:flex;flex-direction:column;text-decoration:none;color:#fff;isolation:isolate}
.kvr .kt::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgb(64,64,68) 1px,transparent 1.4px) 0 0/12px 12px;-webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 60%,transparent);mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 60%,transparent)}
.kvr .kt .bas{display:flex;justify-content:space-between;gap:16px;padding:28px 28px 0}
.kvr .kt h3{margin:0;max-width:17ch;font:600 22px/1.2 var(--font-b);letter-spacing:-.02em}
.kvr .kt h3 span{color:#8C8C8C;font-weight:500}
.kvr .ok{flex:none;width:44px;height:44px;margin:-6px -10px 0 0;padding:0;border:0;border-radius:8px;background:none;display:grid;place-items:center;color:#BDBDBD;cursor:pointer;transition:color .15s ease,transform .16s ease-out}
.kvr .ok svg{width:16px;height:16px;fill:currentColor;grid-area:1/1}
.kvr .ok .i-oyna,.kvr .ok.oyna .i-dur{display:none}
.kvr .ok.oyna .i-oyna{display:block}
.kvr .ok:active{transform:scale(.97)}
.kvr .ok:focus-visible{outline:2px solid #fff;outline-offset:-4px}
/* farenin olduğu cihazda düğme görünmez: kart imleç üstündeyken zaten durur (Çağkan 27 Eki 2026: "webte gerek yok imleç üzerine
   gelince durduğu için"). Klavyeyle gelen için yine çıkar: fare olmayan tek durdurma yolu bu (WCAG 2.2.2). */
@media (hover:hover) and (pointer:fine){.kvr .ok{opacity:0;pointer-events:none}.kvr .ok:focus-visible{opacity:1;pointer-events:auto}}
.kvr .sen{color:var(--self)}
.kvr .dip{margin-top:8px;font:400 12px/1.4 var(--font-b);color:var(--g)}
.kvr .sat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:9px 0}
.kvr .sat+.sat{border-top:1px solid #E2E0DA}
.kvr .alt{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;margin-top:28px;font:400 15px/1.5 var(--font-b);color:rgba(255,255,255,.62)}
.kvr .alt b{color:#fff;font-weight:600}
.kvr .pw-kap{flex:1;margin:28px 0 0 28px;position:relative;min-height:0;overflow:hidden;border-radius:12px 0 0 0}
.kvr .pw{position:absolute;left:0;top:0;width:760px;height:520px;zoom:var(--k,1);background:#F4F3F0;color:#141413;border-radius:12px 0 0 0;overflow:hidden;font:400 13px/1.4 var(--font-b);transform-origin:0 0}
.kvr .pw-ust{display:flex;align-items:center;gap:12px;height:40px;padding:0 18px;background:#141413;color:#fff;font-size:13px}
.kvr .pw-ust b{font-weight:650;letter-spacing:-.02em}
.kvr .pw-ust span{color:rgba(255,255,255,.62)}
.kvr .pw-ust .m{color:#fff}
.kvr .pw-ust em{margin-left:auto;font-style:normal;font-size:11px;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:3px 9px}
.kvr .pw-sek{display:flex;gap:6px;align-items:center;margin:12px 18px 0;padding:4px;background:#EAE8E3;border-radius:12px;font-size:13px}
.kvr .pw-sek span{flex:1;padding:7px 12px;border-radius:9px;color:#4A4A4A}
.kvr .pw-sek span.on{background:#fff;color:#141413;font-weight:600;box-shadow:0 1px 2px rgba(20,20,19,.08)}
.kvr .pw-ic{position:absolute;left:18px;right:18px;top:96px;bottom:0;overflow:hidden}
.kvr .pw-ic .kay{position:absolute;left:0;right:0;top:0}
.kvr .pp{background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:14px;padding:16px 18px}
.kvr .pp h4{margin:0 0 2px;font:600 13px var(--font-b)}
.kvr .pp .alt{margin:0 0 12px;color:#6A6963;font-size:12px}
.kvr .gr{border:1px solid rgba(20,20,19,.12);border-radius:12px;margin-bottom:12px}
.kvr .gr .bs{display:grid;grid-template-columns:repeat(3,1fr);font-size:11.5px;color:#4A4A4A;border-bottom:1px solid rgba(20,20,19,.10)}
.kvr .gr .bs span{padding:8px 10px;text-align:right}
.kvr .gr .gd{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:7px}
.kvr .inp{position:relative;height:32px;border-radius:11px;background:#F1F0EC;border:1px solid rgba(20,20,19,.08);display:flex;align-items:center;justify-content:flex-end;padding:0 12px;font:500 14px var(--font-b);font-variant-numeric:tabular-nums}
.kvr .inp.ph{color:#9A9891}
.kvr .inp.odak{background:#fff;border-color:#141413;box-shadow:0 0 0 1px #141413}
.kvr .inp .yaz::after{content:"";display:inline-block;width:1.5px;height:15px;background:#141413;margin-left:1px;vertical-align:-2px;opacity:0}
.kvr .inp.odak .yaz::after{opacity:1;animation:pwYan 1s steps(1) infinite}
@keyframes pwYan{50%{opacity:0}}
.kvr .gb{font:600 12px var(--font-b);margin:2px 0 6px}
.kvr .son{position:absolute;right:0;top:0;width:262px}
.kvr .son .b1{font:600 30px/1.1 var(--font-b);letter-spacing:-.03em}
.kvr .son .b1 small{font:400 12px var(--font-b);color:#4A4A4A;letter-spacing:0}
.kvr .son .sat{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-top:1px solid rgba(20,20,19,.08);font-size:13px}
.kvr .son .sat b{font-weight:650;font-variant-numeric:tabular-nums}
.kvr .son .ser2{position:relative;height:50px;margin:18px 0 6px}
.kvr .son .ser2 .e{position:absolute;left:0;right:0;top:16px;height:1px;background:#C9C7C1}
.kvr .son .ser2 i{position:absolute;top:10px;width:2px;height:13px;background:#141413}
.kvr .son .ser2 i.s{top:2px;height:29px;width:3px;margin-left:-1px;background:#141413}
.kvr .son .ser2 i.md2{top:10px;height:13px;background:#9A9891}
.kvr .son .ser2 i.mal{top:13px;width:7px;height:7px;margin-left:-3px;background:#141413;border-radius:1px}
.kvr .son .ser2 .et2{position:absolute;top:34px;font:500 10.5px var(--font-b);transform:translateX(-50%);white-space:nowrap;color:#6A6963}
.kvr .son .ser2 .et2.s{color:#141413;font-weight:600;top:-14px}
.kvr .bekle{display:inline-flex;gap:3px;vertical-align:middle}
.kvr .bekle i{width:4px;height:4px;border-radius:50%;background:#9A9891;animation:pwNok 1s infinite}
.kvr .bekle i:nth-child(2){animation-delay:.15s}
.kvr .bekle i:nth-child(3){animation-delay:.3s}
@keyframes pwNok{0%,100%{opacity:.25}50%{opacity:1}}
.kvr .pw .imlec{position:absolute;left:0;top:0;width:18px;height:23px;z-index:5;filter:drop-shadow(0 2px 3px rgba(20,20,19,.25))}
.kvr .ay-sol{position:absolute;left:0;top:0;width:200px}
.kvr .ay-sol .ki{padding:9px 10px;border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12.5px}
.kvr .ay-sol .ki small{grid-column:1/-1;color:#6A6963;font-size:11px}
.kvr .ay-sol .ki b{font-weight:500;font-variant-numeric:tabular-nums}
.kvr .ay-sol .ki.on{background:#fff;box-shadow:0 1px 2px rgba(20,20,19,.08),0 0 0 1px rgba(20,20,19,.06)}
.kvr .ay-sag{position:absolute;left:214px;right:0;top:0}
.kvr .ozt{display:grid;grid-template-columns:1.1fr 1fr .8fr;border:1px solid rgba(20,20,19,.08);border-radius:12px;background:#fff;margin-bottom:10px}
.kvr .ozt>div{padding:10px 12px;border-left:1px solid rgba(20,20,19,.08);min-height:62px}
.kvr .ozt>div:first-child{border-left:0}
.kvr .ozt small{display:block;font-size:11px;color:#6A6963}
.kvr .ozt b{display:block;font:600 22px/1.15 var(--font-b);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kvr .ozt span{font-size:11px;color:#4A4A4A}
.kvr .tb{background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:12px;overflow:hidden;font-size:12.5px}
.kvr .tb .r{display:grid;grid-template-columns:1.1fr 1.2fr 90px 58px 52px;align-items:center;padding:0 12px;height:40px;border-top:1px solid rgba(20,20,19,.07)}
.kvr .tb .r.bas{height:30px;border-top:0;background:#F1F0EC;color:#4A4A4A;font-size:11px}
.kvr .tb .r.ben{box-shadow:inset 3px 0 0 #141413;background:#F6F5F2;font-weight:600}
.kvr .tb .r b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.kvr .tb .r .g{text-align:right;color:#4A4A4A}
.kvr .tb .nk{position:relative;height:100%}
.kvr .tb .nk i{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#B9B7B1}
.kvr .tb .r.ben .nk i{background:#141413;width:9px;height:9px;margin:-4.5px 0 0 -4.5px}
.kvr .tb .nk::after{content:"";position:absolute;left:var(--md,54%);transition-property:opacity,transform,left;top:0;bottom:0;width:1.5px;background:#4A4A4A;opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity .3s,transform .6s cubic-bezier(.23,1,.32,1)}
.kvr .tb.mdon .nk::after{opacity:1;transform:none}
.kvr .tb .r:nth-child(2) .nk::after{transition-delay:0s}
.kvr .tb .r:nth-child(3) .nk::after{transition-delay:.06s}
.kvr .tb .r:nth-child(4) .nk::after{transition-delay:.12s}
.kvr .tb .r:nth-child(5) .nk::after{transition-delay:.18s}
.kvr .tb .r:nth-child(6) .nk::after{transition-delay:.24s}
.kvr .tb .r:nth-child(7) .nk::after{transition-delay:.3s}
.kvr .kvw{position:absolute;left:0;top:0;width:400px;height:520px;zoom:var(--k,1);background:#F4F3F0;color:#141413;border-radius:12px 0 0 0;overflow:hidden;font:400 13px/1.45 var(--font-b)}
.kvr .kvw .kvw-b{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border-bottom:1px solid rgba(20,20,19,.08)}
.kvr .kvw .kvw-b .ms{width:40px;height:47px;flex:none}
.kvr .kvw .kvw-b .ms svg{width:100%;height:100%;margin:0}   /* svg.kv: yüz katmanları ve nefes kavruk.css'ten; home.css .kv çip satırının boşluğu sıfırlanır */
.kvr .kvw .kvw-b b{display:block;font:600 15px var(--font-b)}
.kvr .kvw .kvw-b small{color:#6A6963;font-size:11.5px}
.kvr .kvw .kvw-b em{margin-left:auto;font-style:normal;font-size:12px;border:1px solid rgba(20,20,19,.15);border-radius:999px;padding:5px 11px;background:#fff}
.kvr .kvw .gv{position:absolute;left:14px;right:14px;top:92px;bottom:70px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden}
.kvr .kvw .cps{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.kvr .kvw .bk{align-self:flex-start;max-width:88%;background:#fff;border-radius:14px 14px 14px 4px;padding:9px 12px;box-shadow:0 1px 2px rgba(20,20,19,.06)}
.kvr .kvw .bk small{display:block;font:500 10.5px var(--font-b);color:#6A6963;margin-bottom:2px}
.kvr .kvw .bs{align-self:flex-end;max-width:80%;background:#141413;color:#fff;border-radius:14px 14px 4px 14px;padding:9px 12px}
.kvr .kvw .cp{align-self:flex-start;border:1px solid rgba(20,20,19,.15);background:#fff;border-radius:999px;padding:6px 12px;font:500 12px var(--font-b)}
.kvr .kvw .gr2{position:absolute;left:12px;right:12px;bottom:12px;height:44px;border-radius:14px;background:#fff;border:1px solid rgba(20,20,19,.10);display:flex;align-items:center;padding:0 6px 0 14px;color:#9A9891;font-size:13px}
.kvr .kvw .gr2 i{margin-left:auto;width:32px;height:32px;border-radius:50%;background:#141413;display:grid;place-items:center;color:#fff;font:600 15px var(--font-b);font-style:normal}
.kvr .kvw .imlec{position:absolute;left:0;top:0;width:18px;height:23px;z-index:5;filter:drop-shadow(0 2px 3px rgba(20,20,19,.25))}
.kvr .kvw .bk .yz b{font-weight:650}
@media (max-width:760px){
.kvr .pw-kap{flex:none;height:var(--ph,470px);margin:20px 0 0 16px}
.kvr .pw{width:400px;height:600px}
.kvr .pw-ust span:not(.m){display:none}
.kvr .pw-sek span{padding:7px 6px;text-align:center}
.kvr .pw .son{left:0;right:0;width:auto;padding:12px 14px}
.kvr .pw .son .sat:nth-of-type(4){display:none}
.kvr .pw .son .ser2{margin:10px 0 0}
.kvr .pw .son .sat{padding:6px 0}
.kvr .pw.pw-m .kay{top:262px}
.kvr .pw.pw-m .kay .pp{width:auto!important}
.kvr .ay-sol{left:0;right:0;width:auto;display:flex;gap:6px;overflow:hidden}
.kvr .ay-sol .gb{display:none}
.kvr .ay-sol .ki{flex:none;width:176px;padding:6px 9px}
.kvr .ay-sag{left:0;top:62px}
.kvr .tb .r{grid-template-columns:1.25fr 64px 44px 48px}
.kvr .tb .r>span:nth-child(2){display:none}
}
.kvr .pw.pw-k{width:400px;height:560px}
.kvr .pw-k .pw-ust span:not(.m){display:none}
.kvr .pw-k .pw-sek span{padding:7px 6px;text-align:center}
.kvr .bg-bas{margin:2px 2px 10px}
.kvr .bg-bas b{display:block;font:650 20px/1.1 var(--font-b);letter-spacing:-.02em}
.kvr .bg-bas small{color:#6A6963;font-size:12px}
.kvr .k3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.kvr .k3>div{background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:12px;padding:9px 10px;min-height:66px}
.kvr .k3 small{display:block;font-size:10.5px;color:#4A4A4A}
.kvr .k3 b{display:block;font:650 19px/1.2 var(--font-b);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kvr .k3 span{font-size:10.5px;color:#6A6963}
.kvr .km{background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:12px;padding:12px}
.kvr .km h5{margin:0 0 4px;font:650 14px/1.3 var(--font-b)}
.kvr .km .alt2{color:#4A4A4A;font-size:12.5px;margin:0 0 10px}
.kvr .km .gb2{display:flex;gap:8px;align-items:baseline;font:600 12px var(--font-b);padding-bottom:6px;border-bottom:1px solid rgba(20,20,19,.10);margin:8px 0 4px}
.kvr .km .gb2 span{font-weight:400;color:#6A6963}
.kvr .km .br{display:grid;grid-template-columns:76px 1fr 86px;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.kvr .km .br i{display:block;height:7px;border-radius:2px;background:#EAE8E3;position:relative;overflow:hidden}
.kvr .km .br i b{position:absolute;left:0;top:0;bottom:0;background:#6A6963;border-radius:2px;transform-origin:left}
.kvr .km .br.in i b{background:#B42318}
.kvr .km .br em{font-style:normal;text-align:right;color:#4A4A4A;font-variant-numeric:tabular-nums;font-size:11.5px}
.kvr .km .acik{grid-column:1/-1;font-size:11.5px;color:#4A4A4A;background:#F6F5F2;border-radius:8px;padding:6px 8px;display:none}
.kvr .km .kur{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(20,20,19,.10);font:600 12px var(--font-b)}
.kvr .km .kur small{display:block;font-weight:400;color:#6A6963;font-size:11px}
.kvr .km .kur span.d{border:1px solid rgba(20,20,19,.2);border-radius:10px;padding:7px 14px;background:#fff;white-space:nowrap}
.kvr .km .kur span.d.on{background:#141413;color:#fff;border-color:#141413}
.kvr .gir{background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.kvr .gir .gb3{font:600 12.5px var(--font-b);margin-bottom:8px}
.kvr .gir .gb3 span{font-weight:400;color:#6A6963}
.kvr .gir .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kvr .gir small{display:block;font-size:10.5px;color:#4A4A4A}
.kvr .gir b{display:block;font:650 19px/1.2 var(--font-b);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kvr .gir span{font-size:10.5px;color:#6A6963}
.kvr .gir .yk{font-style:normal;color:#141413;font-size:9px;margin-right:2px}
.kvr .sit{background:#fff;border:1px solid rgba(20,20,19,.08);border-radius:12px;padding:9px 12px;font-size:12px;line-height:1.45;color:#4A4A4A}
.kvr .sit b{color:#141413;font-weight:600;margin-right:4px}
.kvr .sit .nk2{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6A6963;margin-right:6px;vertical-align:1px}
@media (max-width:760px){
.kvr{padding:64px 16px 56px}
.kvr h2{font-size:32px}
.kvr .izg{grid-template-columns:1fr!important;gap:14px;margin-top:36px}
.kvr .izg>*{grid-column:auto!important}
.kvr .kt{min-height:0}
.kvr .kt .bas{padding:22px 20px 0}
.kvr .kt h3{font-size:20px}
.kvr .alt{flex-direction:column}
}