/* =============================================================================
   Anasayfa bölümleri — Carousel Slider (cs-), Müşteri Yorumları (my-), Referans Bandı (rb-),
   Form Bölümü (fb-), Blog Kartları (bk-) + ortak çentikli çerçeve (cb) ve karusel (kr-).
   Font ve renkler SİSTEMDEN: font miras (seçili font çifti; h2/h3 başlık fontunu kendiliğinden alır),
   renkler tema token'ları (--accent, --text, --muted, --bg, --surface, --border). Koyu zemin = --text.
   Bölüm başlıkları vitrin.css'teki .kv-ust yapısını kullanır (aynı ölçüler).
   ========================================================================== */

/* ─── Çentikli çerçeve: sol üstte yükselen tırnak, sol altta içe kavis ─── */
.cb {
    --cb-cent: 64px;
    position: relative; isolation: isolate; overflow: hidden;
    -webkit-clip-path: polygon(0 36px, 0.69px 28.98px, 2.74px 22.22px, 6.07px 16px, 10.54px 10.54px, 16px 6.07px, 22.22px 2.74px, 28.98px 0.69px, 36px 0, 196px 0, 208.38px 0.93px, 219.14px 3.55px, 228.54px 7.56px, 236.85px 12.69px, 244.35px 18.66px, 251.31px 25.19px, 258px 32px, 264.69px 38.81px, 271.65px 45.34px, 279.15px 51.31px, 287.46px 56.44px, 296.86px 60.45px, 307.62px 63.07px, 320px 64px, 100% 64px, 100% 100%, 320px 100%, 307.62px calc(100% - 0.93px), 296.86px calc(100% - 3.55px), 287.46px calc(100% - 7.56px), 279.15px calc(100% - 12.69px), 271.65px calc(100% - 18.66px), 264.69px calc(100% - 25.19px), 258px calc(100% - 32px), 251.31px calc(100% - 38.81px), 244.35px calc(100% - 45.34px), 236.85px calc(100% - 51.31px), 228.54px calc(100% - 56.44px), 219.14px calc(100% - 60.45px), 208.38px calc(100% - 63.07px), 196px calc(100% - 64px), 28.98px calc(100% - 64.69px), 22.22px calc(100% - 66.74px), 16px calc(100% - 70.07px), 10.54px calc(100% - 74.54px), 6.07px calc(100% - 80px), 2.74px calc(100% - 86.22px), 0.69px calc(100% - 92.98px), 0 calc(100% - 100px));
    clip-path: polygon(0 36px, 0.69px 28.98px, 2.74px 22.22px, 6.07px 16px, 10.54px 10.54px, 16px 6.07px, 22.22px 2.74px, 28.98px 0.69px, 36px 0, 196px 0, 208.38px 0.93px, 219.14px 3.55px, 228.54px 7.56px, 236.85px 12.69px, 244.35px 18.66px, 251.31px 25.19px, 258px 32px, 264.69px 38.81px, 271.65px 45.34px, 279.15px 51.31px, 287.46px 56.44px, 296.86px 60.45px, 307.62px 63.07px, 320px 64px, 100% 64px, 100% 100%, 320px 100%, 307.62px calc(100% - 0.93px), 296.86px calc(100% - 3.55px), 287.46px calc(100% - 7.56px), 279.15px calc(100% - 12.69px), 271.65px calc(100% - 18.66px), 264.69px calc(100% - 25.19px), 258px calc(100% - 32px), 251.31px calc(100% - 38.81px), 244.35px calc(100% - 45.34px), 236.85px calc(100% - 51.31px), 228.54px calc(100% - 56.44px), 219.14px calc(100% - 60.45px), 208.38px calc(100% - 63.07px), 196px calc(100% - 64px), 28.98px calc(100% - 64.69px), 22.22px calc(100% - 66.74px), 16px calc(100% - 70.07px), 10.54px calc(100% - 74.54px), 6.07px calc(100% - 80px), 2.74px calc(100% - 86.22px), 0.69px calc(100% - 92.98px), 0 calc(100% - 100px));
}
.cb-kap { position: relative; z-index: 1; }

/* ─── Bant birleşimleri — kesikler sayfa zeminini (beyaz) değil komşu bandı göstersin ───
   1) Alt kesikli bandın (breadcrumb / çentikli bant) ardından gelen çentikli bant: üst tırnağı düzleşir ve kesiğin
      altına girer (--cb-cent kadar yukarı); öndeki bant üstte kalır → kesikten sonraki bandın zemini görünür.
   2) Zeminli (gri) bölüm + çentikli bant: gri bölüm tırnak yüksekliği kadar uzayıp bandın altına girer → tırnağın
      yanındaki kesik gri görünür. Boşluklar değişmez (uzama = negatif pay).
   3) Breadcrumb + gri bölüm: gri bölüm breadcrumb'ın altına girer → alt kesik gri görünür. */
:root { --cb-c: 64px; }
.is-bc + .cb, .cb + .cb {
    margin-top: calc(-1 * var(--cb-cent));
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 320px 100%, 307.62px calc(100% - 0.93px), 296.86px calc(100% - 3.55px), 287.46px calc(100% - 7.56px), 279.15px calc(100% - 12.69px), 271.65px calc(100% - 18.66px), 264.69px calc(100% - 25.19px), 258px calc(100% - 32px), 251.31px calc(100% - 38.81px), 244.35px calc(100% - 45.34px), 236.85px calc(100% - 51.31px), 228.54px calc(100% - 56.44px), 219.14px calc(100% - 60.45px), 208.38px calc(100% - 63.07px), 196px calc(100% - 64px), 28.98px calc(100% - 64.69px), 22.22px calc(100% - 66.74px), 16px calc(100% - 70.07px), 10.54px calc(100% - 74.54px), 6.07px calc(100% - 80px), 2.74px calc(100% - 86.22px), 0.69px calc(100% - 92.98px), 0 calc(100% - 100px));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 320px 100%, 307.62px calc(100% - 0.93px), 296.86px calc(100% - 3.55px), 287.46px calc(100% - 7.56px), 279.15px calc(100% - 12.69px), 271.65px calc(100% - 18.66px), 264.69px calc(100% - 25.19px), 258px calc(100% - 32px), 251.31px calc(100% - 38.81px), 244.35px calc(100% - 45.34px), 236.85px calc(100% - 51.31px), 228.54px calc(100% - 56.44px), 219.14px calc(100% - 60.45px), 208.38px calc(100% - 63.07px), 196px calc(100% - 64px), 28.98px calc(100% - 64.69px), 22.22px calc(100% - 66.74px), 16px calc(100% - 70.07px), 10.54px calc(100% - 74.54px), 6.07px calc(100% - 80px), 2.74px calc(100% - 86.22px), 0.69px calc(100% - 92.98px), 0 calc(100% - 100px));
}
.is-bc:has(+ .cb), .cb:has(+ .cb), .is-bc:has(+ .is-bolum--acik) { z-index: 1; }
#main-content > .is-bolum--acik:has(+ .cb) { margin-bottom: calc(-1 * var(--cb-c)); }
#main-content > .is-bolum--acik:has(+ .cb)::after { content: ""; display: block; height: var(--cb-c); }
.is-bc + .is-bolum--acik { margin-top: calc(-1 * var(--cb-c)); }
.is-bc + .is-bolum--acik::before { content: ""; display: block; height: var(--cb-c); }
/* 4) Breadcrumb + siyah vitrin bölümü (iç sayfa kategori karuseli): bölüm breadcrumb'ın altına girer → alt kesik siyah.
      Pay = kesiğin en derin yeri (sol köşe kavisi: masaüstü 100px, ≤767px 60px), yoksa köşede açık şerit kalır. */
.is-bc:has(+ .kv) { z-index: 1; }
.is-bc + .kv { --bc-pay: 100px; margin-top: calc(-1 * var(--bc-pay)); padding-top: calc(var(--bc-pay) + 40px); }
@media (max-width: 767.98px) { .is-bc + .kv { --bc-pay: 60px; } }
/* 5) Siyah vitrin bölümü + kapanış bandı: ikisi de siyah, aradaki boşluk tek bölüm gibi dengeli kalsın */
.kv + .is-cta { padding-top: 8px; }
/* Siyah vitrin + koyu bant: kesirli konumda aradan açık zemin çizgisi sızmasın */
.kv + .cb { margin-top: -1px; }

/* Kart şekli (kenarlar yuvarlak, sol altta çentik) */
.cb-kart-sekil {
    -webkit-clip-path: polygon(calc(100% - 20px) 0, calc(100% - 14.82px) 0.68px, calc(100% - 10px) 2.68px, calc(100% - 5.86px) 5.86px, calc(100% - 2.68px) 10px, calc(100% - 0.68px) 14.82px, 100% 20px, 100% calc(100% - 20px), calc(100% - 0.68px) calc(100% - 14.82px), calc(100% - 2.68px) calc(100% - 10px), calc(100% - 5.86px) calc(100% - 5.86px), calc(100% - 10px) calc(100% - 2.68px), calc(100% - 14.82px) calc(100% - 0.68px), calc(100% - 20px) 100%, 152px 100%, 145.55px calc(100% - 0.63px), 140.07px calc(100% - 2.37px), 135.38px calc(100% - 5px), 131.26px calc(100% - 8.3px), 127.53px calc(100% - 12.04px), 124px calc(100% - 16px), 120.47px calc(100% - 19.96px), 116.74px calc(100% - 23.7px), 112.62px calc(100% - 27px), 107.93px calc(100% - 29.63px), 102.45px calc(100% - 31.37px), 96px calc(100% - 32px), 14.82px calc(100% - 32.68px), 10px calc(100% - 34.68px), 5.86px calc(100% - 37.86px), 2.68px calc(100% - 42px), 0.68px calc(100% - 46.82px), 0 calc(100% - 52px), 0 20px, 0.68px 14.82px, 2.68px 10px, 5.86px 5.86px, 10px 2.68px, 14.82px 0.68px, 20px 0);
    clip-path: polygon(calc(100% - 20px) 0, calc(100% - 14.82px) 0.68px, calc(100% - 10px) 2.68px, calc(100% - 5.86px) 5.86px, calc(100% - 2.68px) 10px, calc(100% - 0.68px) 14.82px, 100% 20px, 100% calc(100% - 20px), calc(100% - 0.68px) calc(100% - 14.82px), calc(100% - 2.68px) calc(100% - 10px), calc(100% - 5.86px) calc(100% - 5.86px), calc(100% - 10px) calc(100% - 2.68px), calc(100% - 14.82px) calc(100% - 0.68px), calc(100% - 20px) 100%, 152px 100%, 145.55px calc(100% - 0.63px), 140.07px calc(100% - 2.37px), 135.38px calc(100% - 5px), 131.26px calc(100% - 8.3px), 127.53px calc(100% - 12.04px), 124px calc(100% - 16px), 120.47px calc(100% - 19.96px), 116.74px calc(100% - 23.7px), 112.62px calc(100% - 27px), 107.93px calc(100% - 29.63px), 102.45px calc(100% - 31.37px), 96px calc(100% - 32px), 14.82px calc(100% - 32.68px), 10px calc(100% - 34.68px), 5.86px calc(100% - 37.86px), 2.68px calc(100% - 42px), 0.68px calc(100% - 46.82px), 0 calc(100% - 52px), 0 20px, 0.68px 14.82px, 2.68px 10px, 5.86px 5.86px, 10px 2.68px, 14.82px 0.68px, 20px 0);
}

/* ─── Başlık varyantları (.kv-ust ile aynı ölçüler) ─── */
.kv-ust--sol { margin: 0; max-width: 760px; text-align: left; }
.kv-ust--sol .kv-aciklama { margin-left: 0; }
.kv-ust--koyu .kv-etiket { color: color-mix(in srgb, var(--accent) 62%, #fff); }
.kv-ust--koyu .kv-baslik {
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 42%, #fff) 0%, #fff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kv-ust--koyu .kv-aciklama { color: rgba(255, 255, 255, .8); }

/* ─── Karusel (kaydırmalı iz + oklar) ─── */
.kr-iz {
    --kr-bosluk: 20px;
    display: flex; gap: var(--kr-bosluk); margin: 0; padding: 0; list-style: none;
    overflow: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kr-iz::-webkit-scrollbar { display: none; }
.kr-oge { flex: 0 0 var(--kr-gen, 100%); min-width: 0; scroll-snap-align: start; }
.kr-oklar { display: flex; gap: 11px; flex-shrink: 0; }
.kr-ok {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    cursor: pointer; transition: background-color .2s ease, transform .2s ease;
}
.kr-ok svg { width: 20px; height: 20px; }
.kr-ok:active { transform: scale(.94); }
.kr-ok:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kr--tasmaz .kr-oklar { display: none; }
.kr-ok--acik { background: rgba(255, 255, 255, .2); color: #fff; }
.kr-ok--acik:hover { background: rgba(255, 255, 255, .32); }
.kr-ok--koyu { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.kr-ok--koyu:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }

/* ═══ 1) CAROUSEL SLIDER — koyu çentikli bölüm, çentikli görsel kartlar ═══ */
.cs { padding: calc(var(--cb-cent) + 112px) 0 calc(var(--cb-cent) + 44px); background: var(--text); color: #fff; }
.cs .kr-iz { --kr-gen: calc((100% - 3 * var(--kr-bosluk)) / 4); margin-top: 40px; }
/* Başlık satırı: solda başlık, sağ köşede buton (header'daki .eh-cta btn btn-primary ile aynı görünüm — header-hero.css) */
.cs-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cs-buton { flex-shrink: 0; }
.cs-buton:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cs-kart {
    position: relative; display: block; overflow: hidden; aspect-ratio: 330 / 450;
    background: color-mix(in srgb, #fff 9%, var(--text)); color: #fff; text-decoration: none;
}
.cs-kart picture { display: contents; }
.cs-kart img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1); transition: transform .8s ease-out;
}
/* Başlık açık görsellerde de okunsun: üstten koyu geçiş */
.cs-kart::before {
    content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 42%; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
}
.cs-kart-ad { position: absolute; z-index: 2; top: 20px; left: 20px; right: 20px; margin: 0; font-size: 20px; line-height: 1.4; font-weight: 500; color: #fff; }
a.cs-kart { cursor: zoom-in; }   /* görsel Fancybox'ta büyür */
a.cs-kart:hover img, a.cs-kart:focus-visible img { transform: scale(1.05); }
a.cs-kart:focus-visible { outline: none; }
a.cs-kart:focus-visible::after { content: ""; position: absolute; z-index: 3; inset: 4px; border: 2px solid #fff; border-radius: 16px; }
.cs-alt { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; min-height: 44px; }
.cs-dipnot { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.cs-alt .kr-oklar { margin-left: auto; }

/* ═══ 2) MÜŞTERİ YORUMLARI — ortalı başlık, yorum kartları, ortada oklar ═══ */
.my { padding: 80px 0 40px; background: var(--bg); color: var(--text); }
.my .kr-iz { --kr-gen: min(540px, 86%); margin-top: 40px; }
.my-kart {
    display: flex; flex-direction: column; gap: 20px; height: 100%; margin: 0; padding: 30px;
    border-radius: 16px; background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.my-kim { display: flex; align-items: flex-start; gap: 15px; }
.my-avatar { display: block; flex-shrink: 0; width: 44px; height: 44px; border-radius: 4px; object-fit: cover; }
.my-kim picture { display: contents; }
.my-harf { display: grid; place-items: center; font-size: 18px; font-weight: 600; color: #fff; background: var(--accent); }
.my-kimlik { display: block; min-width: 0; }
.my-ad {
    margin: 0; font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--text);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.my-unvan { display: block; margin: 2px 0 0; font-size: 11px; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.my-yorum { margin: 0; }
.my-yorum p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.my .kr-oklar { justify-content: center; margin-top: 32px; }

/* ═══ 3) REFERANS BANDI — üstte etiket + çizgi, altında TAM GENİŞLİK 2 sıra kayan logo şeridi ═══
   Üst sıra sola, alt sıra sağa akar (altyazı gibi). İz = aynı grup iki kez; -%50 kayınca başa sarar, dikiş görünmez.
   Hız sabit: süre = gruptaki logo sayısı (--rb-n, cshtml) × --rb-adim. Üzerine gelince / odakta durur. */
.rb { --rb-bosluk: 12px; --rb-gen: 180px; --rb-adim: 2.6s; padding: 40px 0 80px; background: var(--bg); color: var(--text); }
.rb-etiket {
    display: flex; align-items: center; gap: 24px; margin: 0 0 18px;
    font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--text);
}
.rb-etiket::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.rb-logolar { display: flex; flex-direction: column; }
.rb-satir {
    overflow: hidden; padding-block: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.rb-iz {
    display: flex; width: max-content; will-change: transform;
    animation: rb-sola calc(var(--rb-n, 16) * var(--rb-adim)) linear infinite;
}
.rb-satir--sag .rb-iz { animation-name: rb-saga; }
.rb-satir:hover .rb-iz, .rb-satir:focus-within .rb-iz { animation-play-state: paused; }
/* padding-right = boşluk → iki grup arası da aynı aralık, -%50 tam bir grup eder */
.rb-grup { display: flex; flex: 0 0 auto; gap: var(--rb-bosluk); margin: 0; padding: 0 var(--rb-bosluk) 0 0; list-style: none; }
.rb-grup > li { flex: 0 0 var(--rb-gen); }
@keyframes rb-sola { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes rb-saga { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* Logolar: eşit genişlikte çerçeveli kutular, logo kutunun ortasında ve RENKLİ (Referanslar sayfasıyla aynı görünüm). */
.rb-logo {
    display: flex; align-items: center; justify-content: center; height: 84px; padding: 14px 18px; line-height: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rb-logo picture { display: contents; }
.rb-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 50px; object-fit: contain; }
a.rb-logo:hover, a.rb-logo:focus-visible { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .35); transform: translateY(-2px); opacity: 1; }
a.rb-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ═══ 4) FORM BÖLÜMÜ — çentikli çerçeve + arka plan görseli; solda cam panel, sağda form kartı ═══
   KOMPAKT: masaüstünde bölüm tek ekrana sığar (≈820px) — dar dikey boşluklar, ikon başlığın yanında, 3 satırlık mesaj. */
.fb {
    padding: calc(var(--cb-cent) + 40px) 0 calc(var(--cb-cent) + 32px); color: var(--text);
    /* Görsel yoksa: sistem renklerinden koyu geçiş */
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, var(--text)) 0%, var(--text) 100%);
}
.fb-bg-kap { position: absolute; inset: 0; z-index: 0; }
.fb-bg-kap picture { display: contents; }
.fb-bg-kap img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }

/* Sol: koyu cam panel */
.fb-sol {
    display: flex; flex-direction: column; padding: 32px; border-radius: 16px; color: #fff;
    background: color-mix(in srgb, var(--text) 42%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.fb-etiket { margin: 0 0 10px; font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.fb-baslik { margin: 0; max-width: 460px; font-size: clamp(28px, 1.6vw + 16px, 40px); line-height: 1; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.fb-giris { margin: 12px 0 0; max-width: 460px; font-size: 15px; line-height: 1.45; color: #fff; }
.fb-alt { margin-top: auto; padding-top: 28px; }
.fb-cizgi { height: 1px; margin: 0 0 22px; border: 0; background: rgba(255, 255, 255, .25); opacity: 1; }
.fb-aciklama { margin: 0; font-size: 15px; line-height: 1.45; color: #fff; }
.fb-liste { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fb-liste li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; color: #fff; }
.fb-liste svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: color-mix(in srgb, var(--accent) 55%, #fff); }
.fb-iletisim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.fb-kutu {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 4px;
    background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fb-kutu-etiket { font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.fb-kutu-deger { font-size: 16px; line-height: 1.4; font-weight: 500; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.fb-kutu-deger:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Sağ: form kartı */
.fb-sag { padding: 30px 32px 32px; border-radius: 16px; background: color-mix(in srgb, var(--text) 3%, var(--surface)); color: var(--text); }
/* İkon başlığın yanında (tek satır) */
.fb-sag-ust { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fb-ikon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; color: var(--text); }
.fb-ikon svg { width: 32px; height: 32px; }
.fb-sag-baslik { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 500; text-align: center; color: var(--text); }
.fb-sag-aciklama { max-width: 540px; margin: 8px auto 0; font-size: 15px; line-height: 1.4; text-align: center; color: var(--muted); }
.fb-durum { margin: 18px 0 0; padding: 12px 16px; border-radius: 8px; font-size: 15px; line-height: 1.5; }
.fb-durum--ok { color: #146c43; background: rgba(25, 135, 84, .1); border: 1px solid rgba(25, 135, 84, .3); }
.fb-durum--hata { color: #b02a37; background: rgba(220, 53, 69, .08); border: 1px solid rgba(220, 53, 69, .3); }
.fb-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 20px; }
.fb-alan { min-width: 0; }
.fb-alan--tam { grid-column: 1 / -1; }
.fb-label { display: block; margin: 0 0 4px; font-size: 11px; line-height: 1.3; font-weight: 500; text-transform: uppercase; color: var(--text); }
.fb-girdi {
    display: block; width: 100%; min-height: 44px; padding: 9px 14px; font: inherit; font-size: 16px; line-height: 1.5;
    color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none;
}
.fb-girdi::placeholder { color: var(--muted); opacity: 1; }
.fb-girdi:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
textarea.fb-girdi { min-height: 92px; resize: vertical; }
select.fb-girdi {
    padding-right: 44px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%);
    background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.fb-not { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.fb-gonder.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px; font-size: 16px; font-weight: 500; line-height: 1.1; border-radius: 999px; }
.fb-gonder svg { width: 18px; height: 18px; transition: transform .2s ease; }
.fb-gonder:hover svg { transform: translateX(3px); }
.fb-guard { display: contents; }
.fb-guard > * { grid-column: 1 / -1; }
/* Honeypot: görsel olarak gizli, ekran okuyucudan da saklı */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══ 5) BLOG KARTLARI — açık çentikli bölüm, solda başlık sağda tümü butonu, 3 kart ═══ */
.bk { padding: calc(var(--cb-cent) + 112px) 0 calc(var(--cb-cent) + 72px); background: color-mix(in srgb, var(--text) 3%, var(--bg)); color: var(--text); }
.bk-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bk-tumu {
    display: inline-flex; align-items: center; flex-shrink: 0; padding: 15px 26px; font-size: 16px; line-height: 1.1; font-weight: 500;
    color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06); transition: box-shadow .2s ease, transform .2s ease, color .2s ease;
}
.bk-tumu:hover { color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.bk-tumu:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bk .kr-iz { --kr-gen: calc((100% - 3 * var(--kr-bosluk)) / 4); margin-top: 30px; }
.bk-kart { position: relative; height: 100%; }
.bk-gorsel { position: relative; overflow: hidden; aspect-ratio: 413 / 450; background: color-mix(in srgb, var(--text) 7%, transparent); }
.bk-gorsel picture { display: contents; }
.bk-gorsel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease-out; }
.bk-kart:hover .bk-gorsel img, .bk-kart:focus-within .bk-gorsel img { transform: scale(1.05); }
.bk-etiket {
    position: absolute; z-index: 1; top: 15px; left: 10px; max-width: calc(100% - 40px); padding: 8px 15px;
    font-size: 12px; line-height: 1.3; text-transform: uppercase; color: var(--text); background: var(--surface); border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-baslik { margin: 22px 0 0; font-size: 20px; line-height: 1.4; font-weight: 500; }
.bk-baslik a { color: var(--text); text-decoration: none; }
.bk-baslik a::after { content: ""; position: absolute; inset: 0; }
.bk-baslik a:hover { color: var(--accent); }
.bk-kart:has(.bk-baslik a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 12px; }
.bk-baslik a:focus-visible { outline: none; }
.bk-ozet {
    margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ─── Duyarlılık ─── */
@media (max-width: 1199.98px) {
    .cs .kr-iz { --kr-gen: calc((100% - 2 * var(--kr-bosluk)) / 3); }
    .bk .kr-iz { --kr-gen: calc((100% - 2 * var(--kr-bosluk)) / 3); }
}
@media (max-width: 991.98px) {
    .cs .kr-iz { --kr-gen: calc((100% - var(--kr-bosluk)) / 2); }
    .bk .kr-iz { --kr-gen: calc((100% - var(--kr-bosluk)) / 2.2); }
    .fb-izgara { grid-template-columns: minmax(0, 1fr); }
    .fb-alt { padding-top: 28px; }
}
@media (max-width: 767.98px) {
    :root { --cb-c: 36px; }
    .is-bc + .cb, .cb + .cb {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 172px 100%, 164.41px calc(100% - 0.52px), 157.82px calc(100% - 1.99px), 152.06px calc(100% - 4.25px), 146.96px calc(100% - 7.14px), 142.36px calc(100% - 10.5px), 138.1px calc(100% - 14.17px), 134px calc(100% - 18px), 129.9px calc(100% - 21.83px), 125.64px calc(100% - 25.5px), 121.04px calc(100% - 28.86px), 115.94px calc(100% - 31.75px), 110.18px calc(100% - 34.01px), 103.59px calc(100% - 35.48px), 96px calc(100% - 36px), 19.32px calc(100% - 36.46px), 14.82px calc(100% - 37.83px), 10.67px calc(100% - 40.04px), 7.03px calc(100% - 43.03px), 4.04px calc(100% - 46.67px), 1.83px calc(100% - 50.82px), 0.46px calc(100% - 55.32px), 0 calc(100% - 60px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 172px 100%, 164.41px calc(100% - 0.52px), 157.82px calc(100% - 1.99px), 152.06px calc(100% - 4.25px), 146.96px calc(100% - 7.14px), 142.36px calc(100% - 10.5px), 138.1px calc(100% - 14.17px), 134px calc(100% - 18px), 129.9px calc(100% - 21.83px), 125.64px calc(100% - 25.5px), 121.04px calc(100% - 28.86px), 115.94px calc(100% - 31.75px), 110.18px calc(100% - 34.01px), 103.59px calc(100% - 35.48px), 96px calc(100% - 36px), 19.32px calc(100% - 36.46px), 14.82px calc(100% - 37.83px), 10.67px calc(100% - 40.04px), 7.03px calc(100% - 43.03px), 4.04px calc(100% - 46.67px), 1.83px calc(100% - 50.82px), 0.46px calc(100% - 55.32px), 0 calc(100% - 60px));
    }
    .cb {
        --cb-cent: 36px;
        -webkit-clip-path: polygon(0 24px, 0.46px 19.32px, 1.83px 14.82px, 4.04px 10.67px, 7.03px 7.03px, 10.67px 4.04px, 14.82px 1.83px, 19.32px 0.46px, 24px 0, 96px 0, 103.59px 0.52px, 110.18px 1.99px, 115.94px 4.25px, 121.04px 7.14px, 125.64px 10.5px, 129.9px 14.17px, 134px 18px, 138.1px 21.83px, 142.36px 25.5px, 146.96px 28.86px, 152.06px 31.75px, 157.82px 34.01px, 164.41px 35.48px, 172px 36px, 100% 36px, 100% 100%, 172px 100%, 164.41px calc(100% - 0.52px), 157.82px calc(100% - 1.99px), 152.06px calc(100% - 4.25px), 146.96px calc(100% - 7.14px), 142.36px calc(100% - 10.5px), 138.1px calc(100% - 14.17px), 134px calc(100% - 18px), 129.9px calc(100% - 21.83px), 125.64px calc(100% - 25.5px), 121.04px calc(100% - 28.86px), 115.94px calc(100% - 31.75px), 110.18px calc(100% - 34.01px), 103.59px calc(100% - 35.48px), 96px calc(100% - 36px), 19.32px calc(100% - 36.46px), 14.82px calc(100% - 37.83px), 10.67px calc(100% - 40.04px), 7.03px calc(100% - 43.03px), 4.04px calc(100% - 46.67px), 1.83px calc(100% - 50.82px), 0.46px calc(100% - 55.32px), 0 calc(100% - 60px));
        clip-path: polygon(0 24px, 0.46px 19.32px, 1.83px 14.82px, 4.04px 10.67px, 7.03px 7.03px, 10.67px 4.04px, 14.82px 1.83px, 19.32px 0.46px, 24px 0, 96px 0, 103.59px 0.52px, 110.18px 1.99px, 115.94px 4.25px, 121.04px 7.14px, 125.64px 10.5px, 129.9px 14.17px, 134px 18px, 138.1px 21.83px, 142.36px 25.5px, 146.96px 28.86px, 152.06px 31.75px, 157.82px 34.01px, 164.41px 35.48px, 172px 36px, 100% 36px, 100% 100%, 172px 100%, 164.41px calc(100% - 0.52px), 157.82px calc(100% - 1.99px), 152.06px calc(100% - 4.25px), 146.96px calc(100% - 7.14px), 142.36px calc(100% - 10.5px), 138.1px calc(100% - 14.17px), 134px calc(100% - 18px), 129.9px calc(100% - 21.83px), 125.64px calc(100% - 25.5px), 121.04px calc(100% - 28.86px), 115.94px calc(100% - 31.75px), 110.18px calc(100% - 34.01px), 103.59px calc(100% - 35.48px), 96px calc(100% - 36px), 19.32px calc(100% - 36.46px), 14.82px calc(100% - 37.83px), 10.67px calc(100% - 40.04px), 7.03px calc(100% - 43.03px), 4.04px calc(100% - 46.67px), 1.83px calc(100% - 50.82px), 0.46px calc(100% - 55.32px), 0 calc(100% - 60px));
    }
    .cb-kart-sekil {
        -webkit-clip-path: polygon(calc(100% - 16px) 0, calc(100% - 11.86px) 0.55px, calc(100% - 8px) 2.14px, calc(100% - 4.69px) 4.69px, calc(100% - 2.14px) 8px, calc(100% - 0.55px) 11.86px, 100% 16px, 100% calc(100% - 16px), calc(100% - 0.55px) calc(100% - 11.86px), calc(100% - 2.14px) calc(100% - 8px), calc(100% - 4.69px) calc(100% - 4.69px), calc(100% - 8px) calc(100% - 2.14px), calc(100% - 11.86px) calc(100% - 0.55px), calc(100% - 16px) 100%, 116px 100%, 110.93px calc(100% - 0.47px), 106.63px calc(100% - 1.78px), 102.94px calc(100% - 3.75px), 99.7px calc(100% - 6.22px), 96.78px calc(100% - 9.03px), 94px calc(100% - 12px), 91.22px calc(100% - 14.97px), 88.3px calc(100% - 17.78px), 85.06px calc(100% - 20.25px), 81.37px calc(100% - 22.22px), 77.07px calc(100% - 23.53px), 72px calc(100% - 24px), 11.86px calc(100% - 24.55px), 8px calc(100% - 26.14px), 4.69px calc(100% - 28.69px), 2.14px calc(100% - 32px), 0.55px calc(100% - 35.86px), 0 calc(100% - 40px), 0 16px, 0.55px 11.86px, 2.14px 8px, 4.69px 4.69px, 8px 2.14px, 11.86px 0.55px, 16px 0);
        clip-path: polygon(calc(100% - 16px) 0, calc(100% - 11.86px) 0.55px, calc(100% - 8px) 2.14px, calc(100% - 4.69px) 4.69px, calc(100% - 2.14px) 8px, calc(100% - 0.55px) 11.86px, 100% 16px, 100% calc(100% - 16px), calc(100% - 0.55px) calc(100% - 11.86px), calc(100% - 2.14px) calc(100% - 8px), calc(100% - 4.69px) calc(100% - 4.69px), calc(100% - 8px) calc(100% - 2.14px), calc(100% - 11.86px) calc(100% - 0.55px), calc(100% - 16px) 100%, 116px 100%, 110.93px calc(100% - 0.47px), 106.63px calc(100% - 1.78px), 102.94px calc(100% - 3.75px), 99.7px calc(100% - 6.22px), 96.78px calc(100% - 9.03px), 94px calc(100% - 12px), 91.22px calc(100% - 14.97px), 88.3px calc(100% - 17.78px), 85.06px calc(100% - 20.25px), 81.37px calc(100% - 22.22px), 77.07px calc(100% - 23.53px), 72px calc(100% - 24px), 11.86px calc(100% - 24.55px), 8px calc(100% - 26.14px), 4.69px calc(100% - 28.69px), 2.14px calc(100% - 32px), 0.55px calc(100% - 35.86px), 0 calc(100% - 40px), 0 16px, 0.55px 11.86px, 2.14px 8px, 4.69px 4.69px, 8px 2.14px, 11.86px 0.55px, 16px 0);
    }
    .cs, .bk { padding-top: calc(var(--cb-cent) + 64px); padding-bottom: calc(var(--cb-cent) + 40px); }
    .fb { padding-top: calc(var(--cb-cent) + 32px); padding-bottom: calc(var(--cb-cent) + 32px); }
}
@media (max-width: 575.98px) {
    .cs .kr-iz { --kr-gen: 82%; }
    .bk .kr-iz { --kr-gen: 86%; }
    .my { padding-top: 56px; }
    .my .kr-iz { --kr-gen: 90%; }
    .my-kart { padding: 24px; }
    .my-yorum p { font-size: 16px; }
    .cs-alt { flex-wrap: wrap; }
    .cs-ust, .bk-ust { flex-direction: column; align-items: flex-start; }
    .fb-sol, .fb-sag { padding: 28px 22px; }
    .fb-form, .fb-iletisim { grid-template-columns: minmax(0, 1fr); }
    .rb { --rb-bosluk: 8px; --rb-gen: 132px; }
    .rb-etiket { gap: 16px; margin-bottom: 12px; font-size: 18px; }
    .rb-satir { padding-block: 4px; }
    .rb-logo { height: 68px; padding: 10px 12px; }
    .rb-logo img { max-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .kr-iz { scroll-behavior: auto; }
    .cs-kart img, .bk-gorsel img, .kr-ok, .bk-tumu, .fb-gonder svg, .rb-logo { transition: none; }
    /* Kayma yok: tek grup, elle yatay kaydırılır */
    .rb-iz { animation: none; }
    .rb-grup[aria-hidden="true"] { display: none; }
    .rb-satir { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ═══ Duyarlılık / kompaktlık ═══ */
@media (max-width: 575.98px) {
    .cs, .bk { padding-top: calc(var(--cb-cent) + 48px); padding-bottom: calc(var(--cb-cent) + 32px); }
    .rb { padding: 24px 0 56px; }
}
@media (pointer: coarse) {
    .fb-kutu-deger { padding-block: 4px; }
}

/* ═══ Anasayfa — Makine Parkuru tanıtımı (mp-*) ═══
   Kategori Vitrini'nin çerçevesini paylaşır (vitrin.css: .kv-cerceve / .kv-govde) → içerik header hizasında (--kenar),
   ince çizgili kapalı kutu (çizgiler metin renginin %10'u). Solda metin hücresi (üst yazı + başlık + açıklama +
   butonlar), sağda büyük görsel (KENDİ RENGİYLE; bölümün üzerine gelince hafif büyür), altında numaralı yetenek
   kutuları — kutularda numara, başlık (2 satırlık yer) ve metin yazı uzunluğundan bağımsız aynı hizada. */
.mp {
    --kv-cizgi: color-mix(in srgb, var(--text) 10%, transparent);
    position: relative; margin-top: 0; padding: clamp(56px, 5vw, 88px) 0; background: var(--bg); color: var(--text);
}
.mp .kv-govde { border-top: 1px solid var(--kv-cizgi); border-left: 1px solid var(--kv-cizgi); }
.mp-ust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: 1px solid var(--kv-cizgi); border-right: 1px solid var(--kv-cizgi); }
.mp-etiket { color: var(--muted); }
.mp-metin {
    grid-column: span 6; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    min-height: 560px; padding: 48px; border-right: 1px solid var(--kv-cizgi);
}
.mp-ust--tek .mp-metin { grid-column: 1 / -1; min-height: 0; border-right: 0; }
.mp-baslik {
    margin: 0; font-size: clamp(2rem, 4.2vw, 4.25rem); line-height: .9; font-weight: 700; letter-spacing: -.03em;
    text-transform: uppercase; color: var(--text); overflow-wrap: break-word;
}
.mp-aciklama { margin: 24px 0 0; max-width: 520px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.mp-butonlar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.mp-buton.btn { padding: 12px 24px; font-size: 15px; font-weight: 500; }
.mp-link {
    display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.2; font-weight: 500;
    letter-spacing: .25em; text-transform: uppercase; color: var(--muted);
}
.mp-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
.mp-link:hover, .mp-link:focus-visible { color: var(--text); }
.mp-link:hover svg { transform: translateX(3px); }

.mp-gorsel { grid-column: span 6; position: relative; display: block; min-height: 560px; overflow: hidden; background: var(--bg); }
.mp-gorsel picture { position: absolute; inset: 0; display: block; }
.mp-gorsel img {
    display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1);
    transition: transform .6s ease-out;
}
.mp-ust:hover .mp-gorsel img { transform: scale(1.02); }
/* Sağ üstte ok kutusu (link olduğunda); üzerine gelince renkler döner, ok düzleşir */
.mp-ok {
    position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 64px; height: 64px;
    background: var(--bg); color: var(--text); transition: background-color .3s ease, color .3s ease;
}
.mp-ok svg { width: 22px; height: 22px; transform: rotate(-45deg); transition: transform .3s ease; }
.mp-gorsel:hover .mp-ok { background: var(--text); color: var(--bg); }
.mp-gorsel:hover .mp-ok svg { transform: none; }
/* Sol altta etiket kutusu (zemin rengiyle "kesik köşe") */
.mp-gorsel-yazi {
    position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px;
    max-width: calc(100% - 32px); padding: 20px 24px; background: var(--bg);
}
.mp-gorsel-etiket { font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }
.mp-gorsel-baslik { font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; color: var(--text); }

/* Yetenek kutuları: numara, başlık ve metin ÜSTTEN dizilir; başlık 2 satırlık yer ayırır → tek satırlık başlıkta
   da metin aynı yükseklikten başlar (kutular yazı uzunluğundan bağımsız standart). */
.mp-kutular { --mp-adet: 4; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--mp-adet), minmax(0, 1fr)); }
.mp-kutular--1 { --mp-adet: 1; }
.mp-kutular--2 { --mp-adet: 2; }
.mp-kutular--3 { --mp-adet: 3; }
.mp-kutu {
    display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 220px; padding: 32px 40px 36px;
    border-right: 1px solid var(--kv-cizgi); border-bottom: 1px solid var(--kv-cizgi);
}
.mp-no { margin-bottom: 32px; font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: .25em; color: var(--muted); }
.mp-deger { font-size: clamp(32px, 2.4vw + 10px, 52px); line-height: .9; font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.mp-kutu-baslik {
    min-height: 2em; margin: 0;
    font-size: clamp(18px, .6vw + 13px, 24px); line-height: 1; font-weight: 700; letter-spacing: -.02em;
    text-transform: uppercase; color: var(--text); overflow-wrap: break-word;
}
.mp-kutu-metin { margin: 0; max-width: 300px; font-size: 13px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1199.98px) {
    .mp-metin { min-height: 480px; padding: 32px; }
    .mp-gorsel { min-height: 480px; }
    .mp-kutu { padding: 28px 32px 30px; }
}
/* Tablet: metin üstte, görsel altta tam genişlik; kutular 2 sütun */
@media (max-width: 991.98px) {
    .mp-metin, .mp-gorsel { grid-column: 1 / -1; }
    .mp-metin { min-height: 0; border-right: 0; border-bottom: 1px solid var(--kv-cizgi); }
    .mp-gorsel { min-height: 0; aspect-ratio: 16 / 10; }
    .mp-kutular:not(.mp-kutular--1) { --mp-adet: 2; }
}
@media (max-width: 767.98px) {
    .mp { padding: 48px 0; }
    .mp-metin { gap: 28px; padding: 24px 20px 28px; }
}
@media (max-width: 575.98px) {
    .mp-aciklama { font-size: 15px; }
    .mp-kutu { min-height: 0; gap: 8px; padding: 20px 16px 24px; }
    .mp-no { margin-bottom: 16px; }
    .mp-kutu-metin { font-size: 12px; }
    .mp-ok { width: 48px; height: 48px; }
    .mp-gorsel-yazi { padding: 14px 16px; }
}
@media (pointer: coarse) {
    .mp-link { padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-gorsel img, .mp-ok, .mp-ok svg, .mp-link svg { transition: none; }
    .mp-ust:hover .mp-gorsel img { transform: none; }
}

/* ═══ Bölüm geçişleri — çerçeveli bölümler (.kv vitrin, .mp makine parkuru) ═══
   Aralarında boşluk yok: yalnız üstteki tam çizgi ayırır, soldaki etiket sütunu kesintisiz akar (çizgi bir alttaki ince
   çizginin üstüne biner → çift çizgi olmaz). Ardından koyu bant (.cb: .cs / .fb / .bk) gelirse SEKMESİZ, düz üst kenarla
   doğrudan başlar (referanstaki sert geçiş); alt çentiği bant zinciri için korunur — şekil .cb + .cb ile aynı, yalnız
   negatif margin yok. Sekme payı (--cb-cent) üst boşluktan düşülür, yoksa başlığın üstünde fazladan koyu alan kalır. */
.mp + .mp { padding-top: 0; }
.kv + .cb, .mp + .cb {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 320px 100%, 307.62px calc(100% - 0.93px), 296.86px calc(100% - 3.55px), 287.46px calc(100% - 7.56px), 279.15px calc(100% - 12.69px), 271.65px calc(100% - 18.66px), 264.69px calc(100% - 25.19px), 258px calc(100% - 32px), 251.31px calc(100% - 38.81px), 244.35px calc(100% - 45.34px), 236.85px calc(100% - 51.31px), 228.54px calc(100% - 56.44px), 219.14px calc(100% - 60.45px), 208.38px calc(100% - 63.07px), 196px calc(100% - 64px), 28.98px calc(100% - 64.69px), 22.22px calc(100% - 66.74px), 16px calc(100% - 70.07px), 10.54px calc(100% - 74.54px), 6.07px calc(100% - 80px), 2.74px calc(100% - 86.22px), 0.69px calc(100% - 92.98px), 0 calc(100% - 100px));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 320px 100%, 307.62px calc(100% - 0.93px), 296.86px calc(100% - 3.55px), 287.46px calc(100% - 7.56px), 279.15px calc(100% - 12.69px), 271.65px calc(100% - 18.66px), 264.69px calc(100% - 25.19px), 258px calc(100% - 32px), 251.31px calc(100% - 38.81px), 244.35px calc(100% - 45.34px), 236.85px calc(100% - 51.31px), 228.54px calc(100% - 56.44px), 219.14px calc(100% - 60.45px), 208.38px calc(100% - 63.07px), 196px calc(100% - 64px), 28.98px calc(100% - 64.69px), 22.22px calc(100% - 66.74px), 16px calc(100% - 70.07px), 10.54px calc(100% - 74.54px), 6.07px calc(100% - 80px), 2.74px calc(100% - 86.22px), 0.69px calc(100% - 92.98px), 0 calc(100% - 100px));
}
.kv + .cs, .mp + .cs, .kv + .bk, .mp + .bk { padding-top: 112px; }
.kv + .fb, .mp + .fb { padding-top: 40px; }
@media (max-width: 767.98px) {
    .kv + .cb, .mp + .cb {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 172px 100%, 164.41px calc(100% - 0.52px), 157.82px calc(100% - 1.99px), 152.06px calc(100% - 4.25px), 146.96px calc(100% - 7.14px), 142.36px calc(100% - 10.5px), 138.1px calc(100% - 14.17px), 134px calc(100% - 18px), 129.9px calc(100% - 21.83px), 125.64px calc(100% - 25.5px), 121.04px calc(100% - 28.86px), 115.94px calc(100% - 31.75px), 110.18px calc(100% - 34.01px), 103.59px calc(100% - 35.48px), 96px calc(100% - 36px), 19.32px calc(100% - 36.46px), 14.82px calc(100% - 37.83px), 10.67px calc(100% - 40.04px), 7.03px calc(100% - 43.03px), 4.04px calc(100% - 46.67px), 1.83px calc(100% - 50.82px), 0.46px calc(100% - 55.32px), 0 calc(100% - 60px));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 172px 100%, 164.41px calc(100% - 0.52px), 157.82px calc(100% - 1.99px), 152.06px calc(100% - 4.25px), 146.96px calc(100% - 7.14px), 142.36px calc(100% - 10.5px), 138.1px calc(100% - 14.17px), 134px calc(100% - 18px), 129.9px calc(100% - 21.83px), 125.64px calc(100% - 25.5px), 121.04px calc(100% - 28.86px), 115.94px calc(100% - 31.75px), 110.18px calc(100% - 34.01px), 103.59px calc(100% - 35.48px), 96px calc(100% - 36px), 19.32px calc(100% - 36.46px), 14.82px calc(100% - 37.83px), 10.67px calc(100% - 40.04px), 7.03px calc(100% - 43.03px), 4.04px calc(100% - 46.67px), 1.83px calc(100% - 50.82px), 0.46px calc(100% - 55.32px), 0 calc(100% - 60px));
    }
    .kv + .cs, .mp + .cs, .kv + .bk, .mp + .bk { padding-top: 64px; }
    .kv + .fb, .mp + .fb { padding-top: 32px; }
}
@media (max-width: 575.98px) {
    .kv + .cs, .mp + .cs, .kv + .bk, .mp + .bk { padding-top: 48px; }
}