.hu-kart{position:relative;width:100%;max-width:540px;aspect-ratio:4/5;margin-left:auto;border-radius:26px;overflow:hidden;
background:#3D9BEE;box-shadow:0 30px 60px -44px rgba(10,10,10,.45)}
/* sahne: görsel ile balon aynı kutuda. Geniş ekranda kartın kendisi (kart 4:5, görsel 4:5); tek sütunda kartı kaplayan 4:5 kutu */
.hu-sahne{position:absolute;inset:0}
.hu-sahne>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 28 Eyl sahnesi: düz mavi gök, hero'nun vadisi kartı boydan boya kaplar (göğü saydam; bulutlar kenarda kesilmesin diye cover),
ortada sayfanın aleti vadinin dibinde (Dört iş'teki çizim).
Alet genişliği: boyu kartın %60'ı kadar (kart 4:5, genişlik = %75 × en/boy), çok geniş alet (mühür) kart eninin %80'inde sınırlanır */
.hu-gok{position:absolute;inset:0;background:#2F94EF url(https://medya.piktram.com/s/cimen/vadi-2400.c011bcbcea.webp) 50% 100%/cover no-repeat}
.hu-alet{position:absolute;left:50%;bottom:8%;width:min(calc(75% * var(--oran)),80%);aspect-ratio:var(--oran);translate:-50% 0}
.hu-alet svg{display:block;width:100%;height:100%;overflow:visible}
/* balon aletin tepesinde, kuyruğu ortada aşağı bakar; konum alete göre (--ax), kart kırpılsa da aletle birlikte kalır */
.hu-balon-yer{position:absolute;left:var(--ax,50%);bottom:calc(100% + 14px);translate:-50% 0;z-index:2}
.hu-balon-yer .hu-balon{position:relative;display:block;transform-origin:50% 100%}
.hu-balon-yer .hu-balon::after{left:calc(50% - 7px)}
.hu-alet::after{content:"";position:absolute;left:18%;right:18%;bottom:-3%;height:6%;border-radius:50%;background:rgba(110,25,0,.4);
filter:blur(6px);z-index:-1}
.hu-balon{position:absolute;z-index:2;padding:11px 16px;border-radius:16px;background:#fff;border:2px solid #0A0A0A;
font:600 15.5px "Outfit",sans-serif;color:#0A0A0A;white-space:nowrap;transform-origin:14% 100%;
opacity:0;transform:scale(.7);animation:hu-balon .55s cubic-bezier(.34,1.56,.64,1) 1.1s forwards,hu-sal 4.2s ease-in-out 1.8s infinite}
.hu-balon::after{content:"";position:absolute;left:18px;bottom:-9px;width:14px;height:14px;background:#fff;
border-right:2px solid #0A0A0A;border-bottom:2px solid #0A0A0A;transform:rotate(45deg) skew(8deg,8deg)}
@keyframes hu-gir{to{opacity:1;transform:none}}
@keyframes hu-balon{to{opacity:1;transform:none}}
@keyframes hu-sal{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* tek sütunda (Burak 25 Eyl: "genişliği fullde duracak, yükseklik olarak sadece ekrana göre değişecek"): kart metin sütununun tam
eninde, boyu metinden kalan alan (sarmalayıcı flex:1, en az 120px); görsel oranla küçülmez, kırpılır. Container sorgusu olmayan
eski tarayıcıda sahne kartın kendisi, görsel object-position ile kırpılır */
@media(max-width:1023px){
.hu-kart{position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;margin:0}
.hu-sahne>img{object-position:50% calc(var(--ust) * 100%)}
}
/* sahne kartı kaplayan 4:5 kutu (object-fit:cover'ın hesabı; nesne çubuğun altına düşecekse biraz büyür): görsel olabildiğince yukarı
kayar, balonun üstü kesilmez. Balon sahnenin içinde, görselle birlikte kayar: nesnenin yanında kalır */
@supports (width:1cqw){@media(max-width:1023px){
.hu-kart{container-type:size}
.hu-sahne{--hs:max(max(125.000cqw,100cqh),min(calc(var(--gizli,0px) * var(--k1)),calc((100cqh - var(--gizli,0px)) * var(--k2))));inset:auto;height:var(--hs);width:calc(var(--hs) * 0.8);left:calc((100cqw - var(--hs) * 0.8) * var(--ox,.5));
top:max(calc(100cqh - var(--hs)),calc(var(--hs) * var(--ust) * -1))}
}}
@media(max-width:560px){.hu-balon{font-size:14px}}
@media(prefers-reduced-motion:reduce){.hu-balon{animation:none;opacity:1;transform:none}}
/* metin sütununun hizasında (ortada kartın köşesine yapışıyordu) */
/* 28 Eyl (Halil: "bok gibi gözüküyor"): ortalanmadı, Burak'ın yeri; yazı üstte ok altta sola yaslı dağınık duruyordu, artık ok solda
yazı sağda tek satır (DOM sırası aynı: yazı, ok; row-reverse) */
.hz-asagi{position:absolute;left:max(24px,calc((100% - 1152px) / 2));bottom:clamp(20px,3.4svh,36px);z-index:2;
display:flex;flex-direction:row-reverse;align-items:center;gap:12px;text-decoration:none;font-family:"Outfit",sans-serif;
color:rgba(10,10,10,.55);font-size:13.5px;font-weight:500;transition:opacity .4s,color .2s}
.hz-asagi[data-gizli="1"]{opacity:0;pointer-events:none}
.hz-asagi i{display:grid;place-items:center;width:42px;height:42px;border-radius:9999px;color:#0A0A0A;
box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18);transition:background .2s,color .2s,box-shadow .2s}
.hz-asagi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
animation:hz-in 1.9s cubic-bezier(.22,1,.36,1) infinite}
.hz-asagi:hover{color:#0A0A0A}
.hz-asagi:hover i{background:#0A0A0A;color:#fff;box-shadow:none}
.hz-asagi:focus-visible{outline:none}
.hz-asagi:focus-visible i{box-shadow:0 0 0 2px #4895F7}
@keyframes hz-in{0%{transform:translateY(-5px);opacity:0}30%,65%{opacity:1}100%{transform:translateY(6px);opacity:0}}
#hz-devam{scroll-margin-top:72px}
@media(max-width:1023px){.hz-asagi{display:none}}
@media(prefers-reduced-motion:reduce){.hz-asagi svg{animation:none}}
.hu-bolum{padding:28px 0;min-height:480px;--gizli:0px}
.hu-izgara{display:flex;flex-direction:column;flex:1;min-height:0;gap:24px}
.hu-spot{font-size:16px}
.hu-sahne-kap{position:relative;flex:none;height:clamp(250px, calc((100vw - 48px) * .97), 420px)}
@media(min-width:768px){
.hu-bolum{padding:48px 0 40px;height:calc(max(max(calc(var(--tam-gorunur) - 72px), 480px), calc(var(--tam-gorunur) - 72px + var(--tam-bant))) + var(--tam-devam) + 40px);--gizli:calc(72px + max(max(calc(var(--tam-gorunur) - 72px), 480px), calc(var(--tam-gorunur) - 72px + var(--tam-bant))) + var(--tam-devam) - var(--tam-gorunur))}
.hu-izgara{gap:36px}
.hu-sahne-kap{flex:1;min-height:120px;height:auto}
}
@media(min-width:1024px){
.hu-bolum{padding:72px 0;height:auto;min-height:calc(100svh - 80px);--gizli:initial}
.hu-izgara{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center;flex:0 1 auto;min-height:auto}
.hu-spot{font-size:18px}
.hu-sahne-kap{flex:0 1 auto;min-height:auto}
}
.hyr{position:relative;background:#fff;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(72px,8vw,112px) 0;
-webkit-font-smoothing:antialiased;overflow-x:clip}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.hyr{padding-top:56px;padding-bottom:56px}}
.hyr *{box-sizing:border-box}
.hyr-ic{max-width:1200px;margin:0 auto;padding:0 24px}
.hyr-h2{margin:0;max-width:900px;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.hyr-h2 span{display:block}
.hyr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* yarış: kutu yok; şerit adları başlıkla aynı sol hizada */
.hyr-yaris{position:relative;margin-top:clamp(32px,3.6vw,48px)}
.hyr-izgara{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-areas:"ead eyol" "yad yyol";column-gap:24px;row-gap:16px;
align-items:center}
.hyr-ad{margin:0;font-size:15px;font-weight:500;line-height:1.3;color:rgba(10,10,10,.52)}
.hyr-ad.eski{grid-area:ead}
.hyr-ad.yeni{grid-area:yad;display:flex;align-items:center}
.hyr-ad.yeni svg{display:block;height:24px;width:auto}
/* şerit: tezgâh rengi yol; iç iz her yanda aynı boşlukla, parçalar izin yüzdesiyle */
.hyr-yol{position:relative;height:84px;border-radius:18px;background:#F4F3F0}
.hyr-yol.eski{grid-area:eyol}
.hyr-yol.yeni{grid-area:yyol}
.hyr-iz{position:absolute;inset:10px}
.hyr-p{position:absolute;top:0;bottom:0;left:calc(var(--b) * 1%);width:calc(var(--u) * 1%);display:flex;align-items:center;padding:0 14px;
border-radius:12px;background:#fff;font-size:15px;line-height:1.2;overflow:hidden}
.hyr-p span{display:block;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.eski .hyr-p{border:1.5px dashed rgba(10,10,10,.28);background:#FBFAF8;color:rgba(10,10,10,.55);font-weight:500}
.yeni .hyr-p{box-shadow:inset 0 0 0 1.5px #0A0A0A;color:#0A0A0A;font-weight:600}
/* eski yolun sonu: kesik kenarlı boş kutu (aralık ya da hâlâ süren iş), içinde sonuç */
.hyr-kuyruk{position:absolute;top:0;bottom:0;left:calc(var(--b) * 1%);right:0;display:flex;align-items:center;justify-content:center;
padding:0 12px;border-radius:12px;border:1.5px dashed rgba(10,10,10,.3);font-size:clamp(17px,1.6vw,23px);font-weight:600;
letter-spacing:-.015em;line-height:1.15;color:rgba(10,10,10,.46);text-align:center}
.hyr-kuyruk span{text-wrap:balance}
/* bitiş: çıkartma + etiket, sonra coral çizgi ve sondaki yazı */
.hyr-son{position:absolute;top:0;bottom:0;left:calc(var(--b) * 1%);right:0;display:flex;align-items:center;gap:14px;padding-left:10px}
.hyr-cik-kap{position:relative;z-index:3;display:block;flex:none}
.hyr-cik{position:relative;display:block;width:96px;height:96px;border:7px solid #fff;border-radius:21px;overflow:hidden;background:#fff;
box-shadow:0 22px 40px -22px rgba(10,10,10,.55),0 0 0 1px rgba(10,10,10,.05);rotate:4deg;transition:rotate .5s cubic-bezier(.22,1,.36,1)}
.hyr-yaris:hover .hyr-cik{rotate:0deg}
.hyr-cik img{display:block;width:100%;height:100%;object-fit:cover}
.hyr-etiket{flex:none;margin:0;font-size:clamp(17px,1.6vw,23px);font-weight:600;letter-spacing:-.015em;line-height:1.15;white-space:nowrap}
.hyr-hat{position:relative;flex:1 1 auto;min-width:24px;height:24px;display:flex;align-items:center}
.hyr-hat svg{display:block;width:100%;height:24px;overflow:visible}
.hyr-hat svg.dikey{display:none}
.hyr-hat path{fill:none;stroke:#FF5E4A;stroke-width:2.5;stroke-dasharray:6 8;stroke-linecap:round}
.hyr-hat.post{justify-content:space-evenly}
.hyr-hat.post svg{position:absolute;inset:0}
.hyr-post{position:relative;flex:none;width:22px;height:22px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px #0A0A0A}
.hyr-post::after{content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:9999px;background:#FF5E4A}
.hyr-sonra{flex:0 1 auto;margin:0;max-width:200px;font-size:15px;font-weight:600;line-height:1.25;color:#C73A27;text-wrap:balance}
/* son gün çizgisi: iki şeridi keser; adı üst şeridin üstünde */
.hyr-sinir{position:absolute;z-index:4;left:calc(var(--b) * 1%);top:-17px;bottom:-17px;width:0;border-left:1.5px dashed rgba(10,10,10,.5)}
.hyr-sinir b{position:absolute;left:0;bottom:calc(100% + 4px);translate:-50% 0;white-space:nowrap;font-size:12.5px;font-weight:600;
color:rgba(10,10,10,.6);padding:3px 9px;border-radius:9999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,10,10,.14)}
.yeni .hyr-sinir b{display:none}
/* örtü: iz'in henüz yaşanmamış kısmı; sol kenarı oynatma çizgisi. Sabit hızla çekilir (iki şeritte aynı). Anahtar kare tek, yön
değişkenle (yatayda sağa, telefonda aşağı): kırılım değişince yarış baştan oynamaz */
.hyr-ortu-kap{position:absolute;inset:0;z-index:2;border-radius:12px;overflow:hidden;pointer-events:none}
.hyr-ortu{--ox:100%;--oy:0%;position:absolute;inset:0;background:#F4F3F0;transform:translate(0,0)}
.hyr-ortu::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#0A0A0A;opacity:.7}
[data-gor="1"] .hyr-ortu{animation:hyr-cek 3.6s linear 0.35s both}
@keyframes hyr-cek{to{transform:translate(var(--ox),var(--oy))}}
/* bitiş anı: çıkartma büyükten yapışır, sonra süzülür (ekran dışında durur) */
[data-gor="0"] .hyr-cik-kap,[data-gor="0"] .hyr-etiket{opacity:0}
[data-gor="1"] .hyr-cik-kap{animation:hyr-yapis .65s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--t)}
[data-gor="1"] .hyr-etiket{animation:hyr-gel .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--t) + .15s)}
[data-gor="1"] .hyr-post{animation:hyr-pat .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--t)}
[data-gor="1"] .hyr-cik{animation:hyr-suz 7s ease-in-out infinite;animation-delay:calc(var(--t) + .8s)}
[data-ekranda="0"] .hyr-cik{animation-play-state:paused}
@keyframes hyr-yapis{0%{opacity:0;transform:scale(1.5) rotate(10deg)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hyr-gel{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes hyr-pat{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes hyr-suz{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* ── tablet: şeritler yatay kalır, adlar şeridin üstüne çıkar; son cümle şeride sığmadığı için şeridin altında ── */
@media(max-width:1023px) and (min-width:640px){
.hyr-izgara{grid-template-columns:minmax(0,1fr);grid-template-areas:"ead" "eyol" "yad" "yyol";row-gap:10px}
.hyr-ad.yeni{margin-top:10px}
.hyr-yol{height:76px}
.hyr-p{padding:0 10px;font-size:14px}
.hyr-cik{width:80px;height:80px;border-width:6px}
.hyr-yaris{padding-bottom:34px}
.hyr-sonra{position:absolute;right:0;top:calc(100% + 22px);max-width:none;white-space:nowrap}
[data-gor="0"] .hyr-sonra{opacity:0}
[data-gor="1"] .hyr-sonra{animation:hyr-gel .5s cubic-bezier(.22,1,.36,1) both;animation-delay:3.95s}
}
/* ── telefon: iki sütun, zaman yukarıdan aşağı ── */
@media(max-width:639px){
.hyr-ic{padding:0 20px}
.hyr-h2 span{display:inline}
.hyr-izgara{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ead yad" "eyol yyol";column-gap:10px;row-gap:12px;
align-items:end}
.hyr-ad{font-size:14px}
.hyr-ad.yeni svg{height:20px}
.hyr-yol{height:clamp(420px,112vw,500px);border-radius:16px}
.hyr-iz{inset:8px}
.hyr-p{top:calc(var(--b) * 1%);height:calc(var(--u) * 1% - 6px);bottom:auto;left:0;right:0;width:auto;align-items:flex-start;
padding:10px 11px;font-size:13px}
.hyr-kuyruk{top:calc(var(--b) * 1%);bottom:0;left:0;right:0;padding:10px;font-size:17px}
.hyr-son{top:calc(var(--b) * 1%);bottom:4px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 2px 0}
.hyr-cik{width:64px;height:64px;border-width:5px;border-radius:16px}
.hyr-etiket{font-size:17px;white-space:normal}
.hyr-hat{flex:1 1 auto;width:24px;height:auto;min-height:24px;margin-left:14px;flex-direction:column}
.hyr-hat svg.yatay{display:none}
.hyr-hat svg.dikey{display:block;width:24px;height:100%}
.hyr-hat.post{justify-content:space-evenly;align-items:center}
.hyr-sonra{max-width:none;font-size:13.5px}
.hyr-sinir{left:-13px;right:-13px;top:calc(var(--b) * 1%);bottom:auto;width:auto;height:0;border-left:0;border-top:1.5px dashed rgba(10,10,10,.5)}
.hyr-sinir b{left:auto;right:8px;bottom:4px;translate:0 0}
.hyr-ortu{--ox:0%;--oy:100%}
.hyr-ortu::before{left:0;right:0;top:0;bottom:auto;width:auto;height:2px}
}
@media(max-width:380px){
.hyr-p{padding:9px 9px;font-size:12.5px}
.hyr-kuyruk{font-size:16px;padding:8px}
}
@media(prefers-reduced-motion:reduce){
.hyr-ortu-kap{display:none}
[data-gor] .hyr-cik-kap,[data-gor] .hyr-etiket,[data-gor] .hyr-post,[data-gor] .hyr-sonra{opacity:1;animation:none!important}
[data-gor] .hyr-cik{animation:none!important}
}
.yc{position:relative;background:#FCFBFA;color:#0A0A0A;font-family:"Outfit",sans-serif;-webkit-font-smoothing:antialiased;
padding:clamp(72px,8vw,112px) 0}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.yc{padding-top:56px;padding-bottom:56px}}
.yc *{box-sizing:border-box}
.yc-ic{max-width:1200px;margin:0 auto;padding:0 24px}
/* başlık: açıklama başlığın altında (§1), T1 sağda alta hizalı; dar ekranda alta iner */
.yc-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.yc-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.yc-h2 i{font-style:normal;color:#4895F7}
.yc-giris{margin:14px 0 0;max-width:560px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.yc-bas-cta{flex:none;padding-bottom:2px}
/* çıkartma: 7px beyaz kenar (küçükte 5), 18-22px köşe, eğim, yumuşak gölge; üstüne gelince düzelir ve 4px kalkar */
.yc-cik{display:block;flex:none;width:var(--cg,112px);border:7px solid #fff;border-radius:20px;overflow:hidden;background:#fff;
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);rotate:var(--egim,0deg);
transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1),scale .55s cubic-bezier(.34,1.56,.64,1),opacity .35s}
.yc-cik.k{border-width:5px;border-radius:18px}
.yc-kirp{display:block;width:100%;height:auto;aspect-ratio:1}
/* rota */
.yc-rota{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
.yc-rota-iz{fill:none;stroke:rgba(10,10,10,.2);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round}
.yc-rota-yol{fill:none;stroke:#4895F7;stroke-width:2.5;stroke-dasharray:6 9;stroke-linecap:round}
/* durak: numaralı; çizgi varınca maviye dolar */
.yc-durak{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9999px;
background:#FCFBFA;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18);color:rgba(10,10,10,.45);font-size:13px;font-weight:600;
font-variant-numeric:tabular-nums;transition:background .45s,box-shadow .45s,color .45s}
[data-ulasti="1"] .yc-durak{background:#4895F7;color:#fff;box-shadow:0 0 0 5px rgba(72,149,247,.16)}
/* adım içeriği görününce: çıkartma yaylanarak büyür, yazı hafifçe yükselir */
.yc-gir{opacity:0;translate:0 12px;transition:opacity .6s cubic-bezier(.22,1,.36,1),translate .6s cubic-bezier(.22,1,.36,1)}
[data-ulasti="1"] .yc-gir{opacity:1;translate:0 0}
[data-ulasti="0"] .yc-cik{opacity:0;scale:.6}
/* hizmet örnekleri (araştırma adımı); hizmet adı yalnız ekran okuyucuya */
.yc-hik{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.yc-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* köprü: Panel bölümüne tek satır */
.yc-kopru{display:inline-flex;align-items:center;gap:14px;max-width:100%;padding:6px 20px 6px 6px;border-radius:9999px;
background:rgba(72,149,247,.08)}
.yc-kopru p{margin:0;font-size:15px;line-height:1.45;color:rgba(10,10,10,.72);text-wrap:balance}
.yc-kopru .pb-cizgi{flex:none}
.yc-kopru-ikon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:9999px;background:#4895F7;color:#fff}
.yc-dongu{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:599px){
.yc-kopru{display:flex;flex-wrap:wrap;align-items:flex-start;border-radius:20px;padding:14px 16px;gap:10px 14px}
.yc-kopru p{flex:1 1 200px}
.yc-kopru .pb-cizgi{margin-left:54px;min-height:32px}
}
@media(max-width:640px){.yc-ic{padding:0 20px}.yc-giris{font-size:16px}}
@media(prefers-reduced-motion:reduce){
.yc-cik,.yc-durak,.yc-gir{transition:none}
}
.ayr-dug{appearance:none;display:none;position:relative;z-index:2;align-self:stretch;justify-self:stretch;min-height:44px;margin:0;padding:0;border:0;
border-radius:14px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ayr-dug:focus-visible{outline:2px solid #4895F7;outline-offset:2px}
.ayr-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hsr{position:relative;color:#0A0A0A;font-family:"Outfit",sans-serif;-webkit-font-smoothing:antialiased;padding:clamp(72px,8vw,112px) 0}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.hsr{padding-top:56px;padding-bottom:56px}}
.hsr *{box-sizing:border-box}
.hsr-ic{max-width:1200px;margin:0 auto;padding:0 24px}
.hsr-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.hsr-h2 em{font-style:normal;color:#FF5E4A}
.hsr-giris{margin:14px 0 0;max-width:560px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.hsr-kap{position:relative;margin-top:clamp(44px,4.6vw,64px)}
/* masaüstü: 3 + 3, sütunlar kabın tam genişliğinde; satır arası rotanın dönüşüne yer bırakır */
.hsr-yol{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
column-gap:clamp(24px,3vw,40px);row-gap:clamp(52px,5.4vw,72px)}
/* sol eksen: çıkartma, durak, ad, süre ve kutu sütunun sol kenarında (anasayfa yolculuğu) */
.hsr-adim{--cg:clamp(100px,8.6vw,118px);position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.hsr-cikyer{height:calc(var(--cg) + 30px);display:flex;align-items:flex-end;padding-bottom:20px}
.hsr-cikyer .yc-kirp{aspect-ratio:1;object-fit:cover}
.hsr-adim:hover .yc-cik{rotate:0deg;translate:0 -4px}
.hsr-ad{margin:20px 0 0;font-size:clamp(20px,1.9vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.hsr-sure{display:inline-flex;align-items:flex-start;gap:6px;margin-top:7px;font-size:14px;font-weight:500;line-height:1.3;color:rgba(10,10,10,.52);
text-wrap:balance}
.hsr-sure svg{width:14px;height:14px;flex:none;margin-top:1.5px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* adımın kutusu: anasayfadaki ya-detay; ikon mavi, madde sayısı adımdan */
.hsr-detay{list-style:none;margin:14px 0 0;padding:11px 16px 11px 12px;display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px;
max-width:100%;border-radius:14px;background:rgba(72,149,247,.07)}
.hsr-detay li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.35;font-weight:500;color:rgba(10,10,10,.7);text-wrap:pretty}
.hsr-mik{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:#4895F7;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Panel (yalnız sosyal medya, onay adımı): kutunun son satırı; ikonu coral Piktram yıldızı, yanında küçük çizgi bağlantı */
.hsr-detay li.sr-panel{color:#0A0A0A}
.hsr-panel>svg{width:16px;height:16px;flex:none;margin-top:1px}
.hsr-pbag{position:relative;display:inline-flex;align-items:center;gap:4px;margin-left:4px;color:#FF5E4A;font-weight:600;text-decoration:none;
white-space:nowrap}
/* dokunma alanı 44px (görünüm aynı; 28 Eyl mobil denetim: 19px'ti) */
.hsr-pbag::before{content:"";position:absolute;inset:-12px -6px}
.hsr-pbag::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;transform-origin:left;
transform:scaleX(.32);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.hsr-pbag:hover::after{transform:scaleX(1)}
.hsr-pbag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hsr-pbag:hover svg{transform:translate(2px,-2px)}
.hsr-pbag:focus-visible{outline:2px solid #4895F7;outline-offset:3px;border-radius:4px}
/* yazılar sırayla: ad, süre, kutu */
.hsr-sure.yc-gir{transition-delay:.05s}
.hsr-detay.yc-gir{transition-delay:.11s}
/* masaüstü yılan: 1-2-3 / 6-5-4 (DOM sırası 1-6, yer grid-area ile) */
@media(min-width:1000px){
.hsr-adim:nth-child(1){grid-area:1 / 1}.hsr-adim:nth-child(2){grid-area:1 / 2}.hsr-adim:nth-child(3){grid-area:1 / 3}
.hsr-adim:nth-child(4){grid-area:2 / 3}.hsr-adim:nth-child(5){grid-area:2 / 2}.hsr-adim:nth-child(6){grid-area:2 / 1}
}
/* tablet yılan: 1-2 / 4-3 / 5-6 */
@media(min-width:600px) and (max-width:999px){
.hsr-adim:nth-child(1){grid-area:1 / 1}.hsr-adim:nth-child(2){grid-area:1 / 2}.hsr-adim:nth-child(3){grid-area:2 / 2}
.hsr-adim:nth-child(4){grid-area:2 / 1}.hsr-adim:nth-child(5){grid-area:3 / 1}.hsr-adim:nth-child(6){grid-area:3 / 2}
}
/* tablet: iki sütun, üç satır */
@media(max-width:999px){
.hsr-yol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:clamp(44px,6vw,56px)}
.hsr-adim{--cg:100px}
.hsr-ad{font-size:21px}
}
@media(max-width:599px){
.hsr-ic{padding:0 20px}
.hsr-giris{font-size:16px}
/* telefonda dikey ray: numara solda, çıkartma sağda (anasayfa yolculuğu gibi); kutu yazı sütununda, çıkartmanın altına uzanır */
.hsr-yol{grid-template-columns:minmax(0,1fr);row-gap:0}
.hsr-adim{--cg:64px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:16px;align-items:start;padding-bottom:32px}
.hsr-adim:last-child{padding-bottom:0}
.hsr-cikyer{grid-column:3;grid-row:1 / span 2;height:auto;padding:2px 4px 0 0}
.hsr-adim .yc-durak{grid-column:1;grid-row:1}
.hsr-ad{grid-column:2;grid-row:1;margin:3px 0 0;font-size:20px}
.hsr-sure{grid-column:2;grid-row:2;margin-top:5px;align-self:start}
.hsr-detay{grid-column:2 / span 2;grid-row:3;justify-self:start;margin-top:12px}
.hsr-detay li{font-size:14px}
/* 28 Eyl (Burak, mobil denetim m-surec, ikinci tur): kutu kapalıyken yalnız ikonlar; dokununca yerinde açılır (src/yeni/Ayrinti.tsx) */
.hsr-adim .ayr-dug{display:block;grid-column:2 / span 2;grid-row:3;margin-top:12px}
.hsr-adim:not([data-acik]) .hsr-detay{position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:9px 34px 9px 12px}
.hsr-adim:not([data-acik]) .hsr-detay li{font-size:0;gap:0}
.hsr-adim:not([data-acik]) .hsr-detay li svg{width:17px;height:17px;margin:0}
.hsr-adim:not([data-acik]) .hsr-detay::after{content:"";position:absolute;right:11px;top:50%;width:14px;height:14px;margin-top:-7px;background:#4895F7;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209.5l6%206%206-6'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209.5l6%206%206-6'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transition:rotate .32s cubic-bezier(.22,1,.36,1)}
.hsr-adim[data-acik] .hsr-detay{position:relative;z-index:3;padding-right:34px;cursor:pointer}
.hsr-adim[data-acik] .hsr-detay::after{content:"";position:absolute;right:11px;top:12px;width:14px;height:14px;background:#4895F7;rotate:180deg;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209.5l6%206%206-6'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%209.5l6%206%206-6'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transition:rotate .32s cubic-bezier(.22,1,.36,1)}
}
@media(prefers-reduced-motion:reduce){.hsr-pbag::after,.hsr-pbag svg{transition:none}}
.ydn-bol{position:relative;color:#0A0A0A;font-family:"Outfit",sans-serif;-webkit-font-smoothing:antialiased;padding:clamp(64px,7vw,104px) 0}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.ydn-bol{padding-top:56px;padding-bottom:56px}}
.ydn-bol *{box-sizing:border-box}
.ydn-bol-ic{max-width:1200px;margin:0 auto;padding:0 24px}
.ydn-bol-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.ydn-bol-h2 span{color:#4895F7}
.ydn-bol-giris{margin:14px 0 clamp(28px,3vw,40px);max-width:560px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:pretty}
@media(max-width:640px){
.ydn-bol-ic{padding:0 20px}
.ydn-bol-giris{font-size:16px}
}
.ydn{font-family:"Outfit",sans-serif;color:#0A0A0A}
.ydn *{box-sizing:border-box}
.ydn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* süzgeç: /projeler ve /blog süzgecinin aynısı (prj-suz, prj-hap) */
.ydn-suz{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto clamp(20px,2.4vw,32px);padding:0;list-style:none}
.ydn-hap{appearance:none;border:0;margin:0;display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 20px 0 17px;border-radius:9999px;
background:#fff;box-shadow:inset 0 0 0 1px rgba(10,10,10,.14);color:#0A0A0A;font:inherit;font-size:15.5px;font-weight:500;letter-spacing:-.005em;
white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s,background-color .25s}
.ydn-hap.tumu{padding:0 20px}
.ydn-hap svg{flex:none;width:18px;height:18px;color:rgba(10,10,10,.5);transition:color .25s}
.ydn-hap b{font-weight:500;color:rgba(10,10,10,.42);font-variant-numeric:tabular-nums;transition:color .25s}
@media(hover:hover){
.ydn-hap:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1px #0A0A0A}
.ydn-hap:not([aria-pressed="true"]):hover svg{color:#0A0A0A}
}
.ydn-hap[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #4895F7;background:#F3F8FF;cursor:default}
.ydn-hap[aria-pressed="true"] svg,.ydn-hap[aria-pressed="true"] b{color:#4895F7}
.ydn-hap:focus-visible{outline:2px solid #4895F7;outline-offset:3px}
@media(min-width:641px) and (max-width:1023px){.ydn-suz{max-width:640px}}
/* sahne: ufuk sahnenin altından --taban yukarıda */
.ydn-kap{width:100%}
.ydn-sahne{position:relative;margin:0 auto}
.ydn-yaylar{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ydn-yaylar g{transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .5s ease}
/* çekirdek: yarım daire kubbe (beyaz kenar, açık mavi), içinde nesne(ler) ufukta durur */
.ydn-orta{position:absolute;left:50%;bottom:var(--taban);z-index:2;width:var(--c);height:calc(var(--c) / 2);translate:-50% 0;pointer-events:none}
.ydn-kubbe{position:absolute;left:-6px;right:-6px;bottom:0;height:calc(100% + 6px);border-radius:9999px 9999px 0 0;background:#fff;
box-shadow:0 0 0 1px rgba(10,10,10,.07);clip-path:inset(-2px -2px 0 -2px)}
.ydn-kubbe::after{content:"";position:absolute;left:6px;right:6px;top:6px;bottom:0;border-radius:9999px 9999px 0 0;background:#EAF2FD}
.ydn-icerik{position:absolute;inset:0}
.ydn-n{position:absolute;bottom:var(--alt,6%);display:block;height:auto;rotate:var(--e,0deg);
filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 4px 6px rgba(10,10,10,.16))}
.ydn-orta[data-gel] .ydn-icerik{animation:ydn-gel .65s cubic-bezier(.34,1.56,.64,1) both}
.ydn-orta[data-git] .ydn-icerik{animation:ydn-git .3s cubic-bezier(.55,0,1,.45) both}
@keyframes ydn-gel{from{opacity:0;scale:.5}}
@keyframes ydn-git{to{opacity:0;scale:.6}}
/* çıkartma: kendi transform'uyla yayda akar; animasyonsuzken yuvasında sabit */
.ydn-yer{position:absolute;left:50%;top:calc(100% - var(--taban));z-index:3;--ar-boy:var(--s);
transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--R) * -1)) rotate(calc(var(--a) * -1));
animation-duration:calc(var(--sure) * 1s);animation-timing-function:linear;animation-iteration-count:infinite;
animation-delay:calc(var(--sure) * var(--faz) * -1s)}
.ydn-yer[data-tur="a"]{animation-name:ydn-akis-a}
.ydn-yer[data-tur="b"]{animation-name:ydn-akis-b}
.ydn-yer[data-ters]{animation-direction:reverse}
@keyframes ydn-akis-a{0.00%{transform:translate(-50%,-50%) rotate(-90.00deg) translateY(calc(var(--R) * -1)) rotate(90.00deg) scale(0.55);opacity:0}7.00%{transform:translate(-50%,-50%) rotate(-77.40deg) translateY(calc(var(--R) * -1)) rotate(77.40deg) scale(1);opacity:1}93.00%{transform:translate(-50%,-50%) rotate(77.40deg) translateY(calc(var(--R) * -1)) rotate(-77.40deg) scale(1);opacity:1}100.00%{transform:translate(-50%,-50%) rotate(90.00deg) translateY(calc(var(--R) * -1)) rotate(-90.00deg) scale(0.55);opacity:0}}
@keyframes ydn-akis-b{0.00%{transform:translate(-50%,-50%) rotate(-90.00deg) translateY(calc(var(--R) * -1)) rotate(90.00deg) scale(0.55);opacity:0}7.00%{transform:translate(-50%,-50%) rotate(-77.40deg) translateY(calc(var(--R) * -1)) rotate(77.40deg) scale(1);opacity:1}93.00%{transform:translate(-50%,-50%) rotate(77.40deg) translateY(calc(var(--R) * -1)) rotate(-77.40deg) scale(1);opacity:1}100.00%{transform:translate(-50%,-50%) rotate(90.00deg) translateY(calc(var(--R) * -1)) rotate(-90.00deg) scale(0.55);opacity:0}}
.ydn-yer[data-yak]{z-index:10}
.ydn-yer[data-cikan]{pointer-events:none}
.ydn-uc{display:block}
.ydn-suzul{display:block;animation:ydn-suzul var(--ss) ease-in-out infinite;animation-delay:var(--sg)}
@keyframes ydn-suzul{0%,100%{translate:0 0}50%{translate:0 -4px}}
.ydn[data-dur] .ydn-yer,.ydn[data-dur] .ydn-suzul{animation-play-state:paused}
/* kesik işaret ve düğme */
.ydn-kesik{--i:calc(var(--ar-boy,44px) * var(--k,1));display:block;width:calc(var(--i) * 1.34);height:calc(var(--i) * 1.34);overflow:visible}
.ydn-kesik .ydn-m{color:#0A0A0A;transition:opacity .35s ease}
.ydn-kesik .ydn-r{opacity:0;transition:opacity .35s ease}
[data-yak] .ydn-kesik .ydn-m,.ydn-renkli .ydn-kesik .ydn-m{opacity:0}
[data-yak] .ydn-kesik .ydn-r,.ydn-renkli .ydn-kesik .ydn-r{opacity:1}
.ydn-mono{font-family:"Outfit",sans-serif;font-weight:600}
.ydn-yz{fill:#0A0A0A;transition:fill .35s ease}
[data-yak] .ydn-yz{fill:#4895F7}
.ydn-cik{position:relative;appearance:none;border:0;background:none;padding:0;margin:0;cursor:pointer;display:grid;justify-items:center;
color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}
.ydn-cik-s{display:block;rotate:var(--egim,0deg);transition:rotate .45s cubic-bezier(.22,1,.36,1),scale .45s cubic-bezier(.22,1,.36,1)}
.ydn-cik[data-yak] .ydn-cik-s{rotate:0deg;scale:1.16}
.ydn-cik:focus-visible{outline:2px solid #4895F7;outline-offset:3px;border-radius:14px}
.ydn-cik[data-oneri]::after{content:"";position:absolute;right:9%;top:7%;width:9px;height:9px;border-radius:50%;background:#4895F7;box-shadow:0 0 0 2px #fff}
.ydn-cik-ad{position:absolute;left:50%;top:calc(100% + 4px);z-index:2;translate:calc(-50% + var(--kay,0px)) 0;pointer-events:none;white-space:nowrap;
padding:5px 10px 6px;border-radius:9999px;background:#fff;color:#0A0A0A;font:600 13px/1.1 "Outfit",sans-serif;
box-shadow:0 0 0 1px rgba(10,10,10,.1),0 12px 22px -14px rgba(10,10,10,.55);animation:ydn-hap-ac .3s cubic-bezier(.22,1,.36,1) both}
@keyframes ydn-hap-ac{from{opacity:0;margin-top:4px}}
.ydn-cik-ad small{margin-left:5px;font-size:11.5px;font-weight:500;color:rgba(10,10,10,.5)}
.ydn-alt{margin:clamp(6px,1vw,12px) 0 0;text-align:center;font-size:13.5px;color:rgba(10,10,10,.5)}
.ydn-alt i{display:inline-block;width:9px;height:9px;margin:0 6px 0 14px;border-radius:50%;background:#4895F7;vertical-align:0}
/* kısa ad yalnız telefonda */
.ydn-kisa{display:none}
@media(max-width:640px){
/* telefonda tek sıra (28 Eyl, Burak: "o butonlara o kadar yer ayıramazsın mobilde; ikon koy, ya da 'Sosyal', 'Film' yaz"): ikon + kısa
ad (Sosyal, Film, Web, Kimlik), sayılar yok; haplar sırayı eşit paylaşır, 44px yüksek. Tam ad ve sayı düğmenin adında (aria-label) */
.ydn-suz{flex-wrap:nowrap;gap:6px}
.ydn-suz>li{flex:1 1 auto;min-width:0;display:flex}
.ydn-hap,.ydn-hap.tumu{flex:1;justify-content:center;height:44px;padding:0 6px;gap:5px;font-size:14px}
.ydn-hap svg{width:16px;height:16px}
.ydn-hap b,.ydn-uzun{display:none}
.ydn-kisa{display:inline}
.ydn-suzul{animation:none}
.ydn-kubbe{left:-4px;right:-4px;height:calc(100% + 4px)}
.ydn-kubbe::after{left:4px;right:4px;top:4px}
.ydn-n{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 4px rgba(10,10,10,.16))}
}
/* dar telefonda (≤380) ikon düşer, kısa adlar sığar */
@media(max-width:380px){
.ydn-suz{gap:5px}
.ydn-hap svg{display:none}
}
@media(prefers-reduced-motion:reduce){
.ydn-yer,.ydn-suzul,.ydn-orta .ydn-icerik,.ydn-cik-ad{animation:none !important}
.ydn-yer{opacity:1}
.ydn-yaylar g,.ydn-hap,.ydn-hap svg,.ydn-cik-s,.ydn-kesik .ydn-m,.ydn-kesik .ydn-r{transition:none}
}
:root{--tam-gorunur:100vh;--tam-ekran:100vh;--tam-tasma:0px;--tam-bant:calc(var(--tam-ekran) - var(--tam-gorunur) + var(--tam-tasma));
--tam-devam:clamp(64px,10vh,112px)}
@supports (height:100svh){:root{--tam-gorunur:100svh;--tam-ekran:100lvh}}
@supports (-webkit-touch-callout:none){@media(max-width:743px){:root{--tam-tasma:64px}}}
.hh{font-family:"Outfit",sans-serif;color:#0A0A0A}
.hh-sar{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}
/* hero: iç sayfa kalıbı */
.hh-hero{position:relative;background:#fff;min-height:calc(100svh - 80px);display:flex;flex-direction:column;justify-content:center;
padding:72px 0;box-sizing:border-box}
.hh-hero>.hh-sar{width:100%}
.hh-hero-iz{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:center}
.hh h1{margin:0;font-size:clamp(44px,5.6vw,72px);font-weight:600;line-height:1;letter-spacing:-.03em}
.hh h1 em{font-style:normal;color:#FF5E4A}
.hh-spot{margin:14px 0 0;max-width:520px;font-size:18px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.hh-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
/* dört görsel tek görsel: tek çerçeve, tek gölge; aralar ince beyaz çizgi, iç köşe yok. Balon çerçevenin kardeşi (kırpılmaz) */
.hh-dortlu{position:relative;width:100%;max-width:540px;aspect-ratio:4/5;margin-left:auto;border-radius:26px;
box-shadow:0 30px 60px -44px rgba(10,10,10,.45)}
.hh-dortlu-ic{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#fff;display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:4px}
.hh-dortlu-ic a{position:relative;display:block;overflow:hidden;background:#3D9BEE}
.hh-dortlu-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hh-op,50% 50%);display:block;
transform-origin:var(--hh-zo,50% 50%);transform:scale(var(--hh-z,1));transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hh-dortlu-ic a:hover img{transform:scale(calc(var(--hh-z,1) * 1.05))}
/* 28 Eyl: karelerde görsel yerine hizmet hero'larının sahnesi (src/hizmet/HizmetUst.tsx HeroSahne): düz mavi gök, hero'nun vadisi
kareyi kaplar, alet vadinin dibinde. Eskisi 
ve --hh-op/--hh-z kırpımları (GORSELLER.md) */
.hh-gok{position:absolute;inset:0;background:#2F94EF url(https://medya.piktram.com/s/cimen/vadi-1200.b53b349f55.webp) 50% 100%/cover no-repeat}
.hh-alet{position:absolute;left:50%;bottom:8%;width:min(calc(70% * var(--oran)),78%);max-height:82%;aspect-ratio:var(--oran);translate:-50% 0;
transition:translate .6s cubic-bezier(.22,1,.36,1)}
.hh-alet svg{display:block;width:100%;height:100%;overflow:visible}
.hh-alet::after{content:"";position:absolute;left:18%;right:18%;bottom:-3%;height:6%;border-radius:50%;background:rgba(110,25,0,.4);
filter:blur(5px);z-index:-1}
.hh-dortlu-ic a:hover .hh-alet{translate:-50% -3%}
/* iki görsel aynı çizimden kırpılmış: mührün üstünde monitörün altı, monitörün dibinde mührün sapı görünüyordu (tek görselde iki
monitör). Hücre 4:5 ya da dik iken (masaüstü; telefon ve dik tablet) mühür alttan yakınlaşır, monitörün dibi kırpılır. Yatık
pencerede (tek sütun, hücre yatık) yakınlaşma yok; kırpımı object-position yapar */
@media(min-width:1024px),(max-aspect-ratio:4/5){
.hh-dortlu-ic a[data-k="marka-kimligi"]{--hh-z:1.58;--hh-zo:26% 100%}
.hh-dortlu-ic a[data-k="web-tasarim"]{--hh-z:1.06;--hh-zo:50% 0%}
}
.hh-dortlu-ic a:focus-visible{outline:none}
.hh-dortlu-ic a:focus-visible::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px #4895F7}
.hh-balon{position:absolute;z-index:2;padding:11px 16px;border-radius:16px;background:#fff;border:2px solid #0A0A0A;
font:600 15.5px "Outfit",sans-serif;color:#0A0A0A;white-space:nowrap;pointer-events:none;transform-origin:14% 100%;
opacity:0;transform:scale(.7);animation:hh-balon .55s cubic-bezier(.34,1.56,.64,1) 1.1s forwards,hh-sal 4.2s ease-in-out 1.8s infinite}
.hh-balon::after{content:"";position:absolute;left:18px;bottom:-9px;width:14px;height:14px;background:#fff;
border-right:2px solid #0A0A0A;border-bottom:2px solid #0A0A0A;transform:rotate(45deg) skew(8deg,8deg)}
/* bütün görselin sağ üstünde; kuyruk sol altta, görselin ortasına bakar */
.hh-dortlu>.hh-balon{top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px)}
@keyframes hh-balon{to{opacity:1;transform:none}}
@keyframes hh-sal{0%,100%{translate:0 0}50%{translate:0 -5px}}
.hh-asagi{position:absolute;left:max(24px,calc((100% - 1152px) / 2));bottom:clamp(20px,3.4svh,36px);display:flex;flex-direction:column;
gap:10px;text-decoration:none;color:rgba(10,10,10,.55);font-size:13.5px;font-weight:500;transition:opacity .4s,color .2s}
.hh-asagi[data-gizli]{opacity:0;pointer-events:none}
.hh-asagi i{display:grid;place-items:center;width:42px;height:42px;border-radius:9999px;color:#0A0A0A;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18);
transition:background .2s,color .2s,box-shadow .2s}
.hh-asagi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
animation:hh-in 1.9s cubic-bezier(.22,1,.36,1) infinite}
.hh-asagi:hover{color:#0A0A0A}
.hh-asagi:hover i{background:#0A0A0A;color:#fff;box-shadow:none}
.hh-asagi:focus-visible{outline:none}
.hh-asagi:focus-visible i{box-shadow:0 0 0 2px #4895F7}
@keyframes hh-in{0%{transform:translateY(-5px);opacity:0}30%,65%{opacity:1}100%{transform:translateY(6px);opacity:0}}
/* hizmet bentosu */
.hh-bento{background:#FCFBFA;padding:clamp(64px,8vw,112px) 0;scroll-margin-top:72px}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.hh-bento{padding-top:56px;padding-bottom:56px}}
.hh h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.hh h2 i{font-style:normal;color:#4895F7}
.hh-giris{margin:14px 0 clamp(28px,3.4vw,44px);max-width:560px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.hh-izgara{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.hh-hk{grid-column:span 4;height:380px;box-sizing:border-box;display:flex;flex-direction:column;padding:10px;border-radius:22px;background:#fff;
border:1px solid rgba(10,10,10,.09);text-decoration:none;color:#0A0A0A;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.hh-hk:hover{transform:translateY(-4px);box-shadow:0 0 0 2px #4895F7}
.hh-hk:focus-visible{outline:none;box-shadow:0 0 0 2px #4895F7}
.hh-hk-ust{padding:12px 12px 14px}
.hh-hk h3{margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.hh-hk h3 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hh-hk:hover h3 svg{transform:translate(3px,-3px)}
.hh-hk p{margin:8px 0 0;font-size:15px;line-height:1.5;color:rgba(10,10,10,.6);text-wrap:balance}
.hh-fiyat{display:block;margin-top:10px;font-size:13.5px;font-weight:500;color:rgba(10,10,10,.6)}
.hh-fiyat b{color:#0A0A0A;font-weight:600}
.hh-gor{position:relative;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:#3D9BEE}
.hh-gor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hh-hk:hover .hh-gor img{transform:scale(1.04)}
.hh-gor .hh-balon{left:14px;top:14px;font-size:14px;padding:9px 13px;animation:hh-balon .55s cubic-bezier(.34,1.56,.64,1) .4s forwards,hh-sal 4.2s ease-in-out 1s infinite}
/* 28 Eyl: kart görseli yerine hizmet hero'larının sahnesi (.hh-gok, .hh-alet hero'dakiyle ortak); yatık kutuda alet boyla ölçülür,
balon aletin tepesinde (--ax, src/yeni/dortis/Aletler.tsx). Eskisi ve balon sol üstte (GORSELLER.md) */
.hh-gor .hh-alet{height:64%;width:auto;max-height:none;max-width:86%}
.hh-hk:hover .hh-gor .hh-alet{translate:-50% -3%}
.hh-balon-yer{position:absolute;left:var(--ax,50%);bottom:calc(100% + 10px);translate:-50% 0;z-index:2}
.hh-balon-yer .hh-balon{position:relative;left:auto;top:auto;display:block;transform-origin:50% 100%}
.hh-balon-yer .hh-balon::after{left:calc(50% - 7px)}
/* sağdaki kart (sayfadaki bento kartı; sınıfı ve ölçüsü kendi CSS'inden, 8 kolon 380px) */
.hh-canli{grid-column:span 8}
/* sosyal medya · Aylık döngü geniş kartta (sayfada 4 kolonluk kart): döngü kartın boyunca ve ortada, başlık ve açıklama sol üstte.
Kart daraldıkça döngü sağa kayar ve küçülür; başlığın alanına (200px) girmez */
.hh-canli.hh-sm{height:380px}
.hh-sm .sm-km{max-width:190px}
.hh-sm .sm-c-sahne{position:absolute;inset:26px;margin:0;min-height:0;grid-template-columns:minmax(200px,1fr) auto minmax(0,1fr)}
.hh-sm .sm-c-kutu{grid-column:2;width:min(calc(100cqw - 200px),calc(100cqh * 320 / 260))}
/* web tasarım · iki kartın görseli: solda kırılımlar panosu (kırılım listesi yok; ölçüyü çıkartmanın cetveli söylüyor), sağda teslim */
.hh-canli.hh-wb{height:380px}
.hh-wb-iki{flex:1;min-height:0;margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1.05fr);align-items:stretch}
.hh-wb-sol,.hh-wb-sag{min-width:0;min-height:0;display:flex;flex-direction:column}
.hh-wb-ok{align-self:center;width:64px;height:20px;overflow:visible}
.hh-wb .wb-b-gov{display:flex;margin-top:0}
.hh-wb .wb-blist{display:none}
.hh-wb .wb-d-gov{margin-top:0}
/* pano üstte cetvele yer bırakır (telefondaki gibi); çıkartma panonun iç boyuna göre */
@media(min-width:641px){.hh-wb .wb-pano{padding-top:24px}.hh-wb .wb-cik{--s:min(62cqw,40cqh)}}
@media(max-width:1023px){
/* telefon ve dik tablet: navbar dahil tam ekran; görsel metinden kalan alanı alır, ekranın dibine iner ve taşar
(src/yeni/tamEkran.ts tasan; alt köşeleri açılışta görünmez, kaydırınca görselin devamı gelir) */
.hh-hero{height:calc(max(max(calc(var(--tam-gorunur) - 72px), 480px), calc(var(--tam-gorunur) - 72px + var(--tam-bant))) + var(--tam-devam) + 40px);min-height:480px;justify-content:flex-start;padding:48px 0 40px}
.hh-hero>.hh-sar{flex:1;min-height:0;display:flex;flex-direction:column}
.hh-hero-iz{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:36px}
.hh-dortlu{flex:1 1 0;min-height:120px;width:auto;max-width:none;aspect-ratio:auto;margin:0}
.hh-asagi{display:none}
.hh-hk,.hh-canli{grid-column:1 / -1}
.hh-hk{height:auto;min-height:0}
.hh-gor{flex:none;aspect-ratio:16/10}
/* dar ekranda sıra hep: önce hizmet kartı, sonra sağdaki kart */
.hh-izgara{grid-auto-flow:row dense}
.hh-hk{order:var(--sira)}.hh-canli{order:calc(var(--sira) + 1)}
}
@media(max-width:767px){
/* telefonda tam ekran yok (28 Eyl, Burak: "görselin genişliğini bozma ama dikeyde kısaltabilirsin"): dörtlü tam genişlikte, boyu
sabit; hero içeriği kadar, sonraki bölüm ilk ekranın dibinde görünebilir */
.hh-hero{height:auto;min-height:0;padding:28px 0}
.hh-hero>.hh-sar,.hh-hero-iz{flex:none}
.hh-dortlu{flex:none;height:clamp(260px,calc((100vw - 40px) * .92),420px)}
.hh-hero-iz{gap:24px}
.hh-spot{font-size:16px}
}
@media(max-width:640px){
/* telefonda kenar payı 20px (hakkımızda, iletişim ve hizmet bentolarıyla aynı); 360'ta iki buton tek satırda kalır */
.hh-sar{padding:0 20px}
.hh-canli.hh-sm,.hh-canli.hh-wb{height:auto;padding:20px 18px 18px;border-radius:22px}
/* döngü tam genişlikte: başlık üstte, döngü altında */
.hh-sm .sm-km{max-width:none}
.hh-sm .sm-c-sahne{position:relative;inset:auto;flex:none;height:252px;margin-top:12px;grid-template-columns:minmax(0,1fr)}
.hh-sm .sm-c-kutu{grid-column:1;width:min(100cqw,calc(100cqh * 320 / 260))}
/* web: pano ve teslim alt alta; teslim tam genişlikte, kalemler adlarıyla, alan adı tek satır (sayfadaki büyük kart gibi) */
.hh-wb-iki{display:flex;flex-direction:column;gap:16px;margin-top:14px}
.hh-wb-ok{display:none}
.hh-wb .wb-kalem{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hh-wb .wb-kalem li{width:auto;height:40px;padding:0 12px 0 6px;gap:8px;justify-content:flex-start;font-size:13px}
.hh-wb .wb-kli{width:28px;height:28px}
.hh-wb .wb-kli svg{width:16px;height:16px}
.hh-wb .wb-kli i{right:-4px;top:-4px;width:14px;height:14px}
.hh-wb .wb-alan{height:58px;margin-top:78px;padding:0 14px 0 12px;align-items:center;gap:11px}
.hh-wb .wb-ali{display:grid}
.hh-wb .wb-alan b{font-size:16px}
.hh-wb .wb-damga{top:50%;right:14px;translate:0 -50%;padding:3px 10px 4px;font-size:14.5px}
.hh-wb .wb-muhur{right:22px;bottom:50px;width:56px}
}
@media(max-width:560px){.hh-balon{font-size:14px}}
@media(prefers-reduced-motion:reduce){
/* sağdaki kartlar hizmet sayfasındaki gibi durgun son hâlinde (sayfada .sm *, .rf *, .wb *, .mb * kuralı; hub'da o kaplar yok) */
.hh-canli *{animation:none!important;transition:none!important}
.hh-balon,.hh-gor .hh-balon{animation:none;opacity:1;transform:none}
.hh-asagi svg{animation:none}
.hh-dortlu-ic img,.hh-gor img,.hh-hk,.hh-hk h3 svg{transition:none}
}
.sm{background:#FCFBFA;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(64px,7vw,104px) 0;-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.sm{padding-top:56px;padding-bottom:56px}}
.sm *{box-sizing:border-box}
.sm-sar{max-width:1200px;margin:0 auto;padding:0 24px}
/* TASARIM-KURALLARI §1: açıklama başlığın altında (sağında değil), araları 14px, en çok 520px, dengeli kırılır */
.sm-ust{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,3.4vw,44px)}
.sm-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.sm-nok{color:#4895F7}
.sm-giris{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.sm-izgara{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.sm-k{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:26px;padding:26px;background:#fff;
border:1px solid rgba(10,10,10,.09);overflow:hidden}
.sm-a{grid-column:span 8;height:380px}
.sm-b{grid-column:span 4;grid-row:span 2;height:774px}
.sm-c{grid-column:span 4;height:380px}
.sm-d{grid-column:span 4;height:380px}
.sm-kb{position:relative;z-index:2;margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.sm-km{position:relative;z-index:2;margin:6px 0 0;font-size:15px;line-height:1.5;color:rgba(10,10,10,.58);text-wrap:balance}
/* ── A · takvim solda (öncekinin ölçüsü: 1.08fr / .92fr), onay çıkartması sağda, aralarında elle çizilmiş ok ── */
.sm-a-alan{position:relative;flex:1;min-height:0;margin-top:16px;display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:minmax(0,1fr);gap:clamp(16px,2vw,24px)}
.sm-pen{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px 12px 12px;
border-radius:18px;background:#fff;border:1px solid rgba(10,10,10,.1)}
.sm-pbas{display:flex;align-items:center;gap:7px;min-height:20px;font-size:12.5px}
.sm-pbas svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sm-pbas b{font-weight:600;white-space:nowrap}
.sm-pay{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:12px;font-weight:500;color:rgba(10,10,10,.62);white-space:nowrap}
.sm-pay svg{width:13px;height:13px;color:rgba(10,10,10,.4)}
.sm-phaft{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:9px;font-size:10px;font-weight:500;color:rgba(10,10,10,.42)}
.sm-phaft span{padding-left:5px}
.sm-pgun{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));
gap:4px;margin-top:5px}
.sm-g{position:relative;min-height:0;border-radius:8px;background:#F5F4F2;overflow:hidden;transition:box-shadow .4s}
.sm-g b{position:absolute;z-index:2;left:4px;top:4px;padding:0 2px;border-radius:4px;font-size:10px;font-weight:500;line-height:14px;
color:rgba(10,10,10,.5);transition:background .3s,color .3s}
/* gün etiketi: normal hap; çevresi tam konturlu, zemini kendi renginin açık tonu (sol kenar çizgisi yok). Yazı rengi
küçük boyda okunsun diye biraz koyulaştırıldı */
.sm-cip{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);height:15px;display:inline-flex;align-items:center;
padding:0 6px;border-radius:9999px;border:1px solid var(--r);background:color-mix(in srgb,var(--r) 12%,#fff);
font-style:normal;font-size:9.5px;font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;
color:color-mix(in srgb,var(--r) 82%,#0A0A0A)}
.sm-gimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(.55);
transition:opacity .35s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.sm-g[data-dolu="1"] .sm-gimg{opacity:1;transform:none}
.sm-g[data-dolu="1"] b{background:rgba(10,10,10,.55);color:#fff}
/* sıradaki onay günü: boşken kesik çizgili yer, dolunca coral halka */
.sm-g[data-bag="bos"]{outline:1.5px dashed #FF5E4A;outline-offset:-1.5px;background:color-mix(in srgb,#FF5E4A 6%,#F5F4F2)}
.sm-g[data-bag="dolu"]{box-shadow:0 0 0 2px #FF5E4A}
.sm-g[data-yeni="1"]{animation:sm-yeni 1.4s ease-out}
@keyframes sm-yeni{0%{box-shadow:0 0 0 2px #FF5E4A,0 0 0 0 rgba(255,94,74,.55)}100%{box-shadow:0 0 0 2px #FF5E4A,0 0 0 10px rgba(255,94,74,0)}}
/* onay çıkartması (TASARIM-KURALLARI §5: 7px beyaz kenar, 20px köşe, eğik; üstüne gelince düzelir). Sağ sütunun sağında:
arada büyük ok için yer kalır. Altı takvimle hizalı; boyu alandan uzunsa üstteki boşluğa taşar (başlık solda, çakışmaz) */
.sm-a-sag{position:relative;z-index:3;min-width:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 4px 0}
.sm-onay{position:relative;flex:none;width:min(176px,100%);padding:7px;border-radius:20px;background:#fff;
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.06);rotate:2.4deg;
transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
.sm-onay:hover{rotate:0deg;translate:0 -4px}
.sm-okare{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#EFEDEA}
.sm-okare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);
transition:opacity .55s,transform .9s cubic-bezier(.22,1,.36,1)}
.sm-okare img[data-a]{opacity:1;transform:none}
.sm-otur{position:absolute;right:9px;bottom:9px;padding:4px 9px;border-radius:9999px;background:#fff;color:var(--r);
font-size:11.5px;font-weight:600;line-height:1.1}
.sm-obar{display:flex;align-items:center;gap:8px;padding:9px 3px 3px 5px}
.sm-om{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sm-om b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-om>span{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(10,10,10,.55);white-space:nowrap}
.sm-om i{width:7px;height:7px;border-radius:9999px;flex:none;background:#E8A33D}
.sm-om i[data-d="o"]{background:#1F9D55}
.sm-obtn{flex:none;width:34px;height:34px;border-radius:9999px;display:grid;place-items:center;color:#0A0A0A;
box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.2);transition:background .25s,color .25s,box-shadow .25s,transform .15s}
.sm-obtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sm-onay[data-faz="1"] .sm-obtn,.sm-onay[data-faz="2"] .sm-obtn{background:#1F9D55;color:#fff;box-shadow:none}
.sm-onay[data-faz="1"] .sm-obtn{transform:scale(.88)}
.sm-imlec{position:absolute;z-index:4;right:2px;bottom:-4px;width:20px;height:20px;pointer-events:none;
fill:#0A0A0A;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(10,10,10,.3));
transform:translate(0,0);transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .4s}
.sm-onay[data-faz="1"] .sm-imlec{transform:translate(-1px,-1px) scale(.86);transition-duration:.15s}
.sm-onay[data-faz="2"] .sm-imlec{transform:translate(34px,40px);opacity:0}
/* ok: kutunun kenarındaki halkadan çıkan kesik çizgili, yumuşak kavisli mürekkep; çizgiler yavaşça çıkartmaya doğru akar */
.sm-ok{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.sm-okg,.sm-okb{fill:none;stroke:#0A0A0A;stroke-opacity:.68;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sm-okg{stroke-dasharray:7 8;animation:sm-okak 1.4s linear infinite}
.sm-okn{fill:#fff;stroke:#0A0A0A;stroke-opacity:.68;stroke-width:2.4}
@keyframes sm-okak{from{stroke-dashoffset:15}to{stroke-dashoffset:0}}
/* ── B · platformlar: tek görsel, ölçüden ölçüye dönüşür ── */
.sm-b-gov{flex:1;min-height:0;margin-top:18px;display:flex;flex-direction:column;gap:16px}
/* pano bir kap: çıkartmanın ölçüsü panonun eni ve boyundan (cqw, cqh) gelir */
.sm-pano{position:relative;flex:1;min-height:0;border-radius:18px;container-type:size;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
background:radial-gradient(rgba(10,10,10,.09) 1px,transparent 1.2px) 0 0/18px 18px}
.sm-cik{position:relative;display:block;flex:none;padding:7px;border-radius:20px;background:#fff;rotate:var(--e);
--s:min(64cqw,50cqh);box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);
transition:rotate .75s cubic-bezier(.22,1,.36,1)}
.sm-cikg{position:relative;display:block;border-radius:14px;overflow:hidden;background:#EFEDEA;
width:calc(var(--s) * var(--w));height:calc(var(--s) * var(--h));transition:width .75s cubic-bezier(.22,1,.36,1),height .75s cubic-bezier(.22,1,.36,1)}
.sm-cikg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-cikg em{position:absolute;left:9px;bottom:9px;padding:3px 9px;border-radius:9999px;background:#fff;color:#0A0A0A;
font-style:normal;font-size:12px;font-weight:600;line-height:1.25;animation:sm-belir .4s cubic-bezier(.22,1,.36,1) both}
.sm-roz{position:absolute;left:-11px;top:-11px;width:38px;height:38px;border-radius:9999px;background:#fff;display:grid;place-items:center;
box-shadow:0 6px 14px -6px rgba(10,10,10,.35),0 0 0 1px rgba(10,10,10,.06);animation:sm-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.sm-roz svg{width:19px;height:19px}
/* konuşma balonu (hero'daki balonun dili: beyaz, 2px mürekkep kenar); çıkartmanın altında, kuyruğu yukarı */
.sm-balon{position:relative;flex:none;padding:8px 13px;border-radius:14px;background:#fff;border:2px solid #0A0A0A;
font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;pointer-events:none;
animation:sm-pop .45s .12s cubic-bezier(.34,1.56,.64,1) both}
.sm-balon::after{content:"";position:absolute;left:50%;top:-7px;width:11px;height:11px;margin-left:-5.5px;background:#fff;rotate:45deg;
border-left:2px solid #0A0A0A;border-top:2px solid #0A0A0A}
@keyframes sm-pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes sm-belir{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
.sm-plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sm-pt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:11px 11px 10px;border-radius:14px;background:#fff;
border:1px solid rgba(10,10,10,.09);transition:border-color .35s,background .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.sm-pt[data-on]{border-color:var(--r);background:color-mix(in srgb,var(--r) 6%,#fff);transform:translateY(-2px)}
.sm-pti{width:22px;height:22px;display:grid;place-items:center;color:var(--r);margin-bottom:2px}
.sm-pti svg{width:19px;height:19px}
.sm-pt b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.sm-pt em{font-style:normal;font-size:12px;color:rgba(10,10,10,.5);white-space:nowrap}
/* ── C · döngü: beyaz kart, nesneler köşelerde, ortada takvim yaprağı ── */
.sm-c-sahne{flex:1;min-height:0;margin-top:8px;container-type:size;display:grid;place-items:center}
.sm-c-kutu{position:relative;width:min(100cqw,calc(100cqh * 320 / 260));aspect-ratio:320/260}
.sm-c-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* yörünge: nesneler arasında kesik çizgili gri yaylar ve ok başları; coral dolgu aynı yolun üstünde (temelde gizli:
azaltılmış harekette sade gri döngü kalır) */
.sm-c-yol,.sm-c-uc,.sm-c-dol,.sm-c-ucd{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sm-c-yol{stroke:rgba(10,10,10,.26);stroke-width:1.6;stroke-dasharray:4.5 4.5}
.sm-c-uc{stroke:rgba(10,10,10,.4);stroke-width:1.8}
.sm-c-dol{stroke:#FF5E4A;stroke-width:2.4;stroke-dasharray:100 120;stroke-dashoffset:100}
.sm-c-ucd{stroke:#FF5E4A;stroke-width:2.2;opacity:0}
.sm-n{position:absolute;width:22%;aspect-ratio:1;translate:-50% -50%;display:grid;place-items:center;rotate:var(--e);z-index:1;
transition:rotate .5s cubic-bezier(.22,1,.36,1)}
.sm-n img{width:88%;height:88%;object-fit:contain;display:block;
filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
drop-shadow(0 8px 8px rgba(10,40,90,.16))}
.sm-n em{position:absolute;left:50%;top:calc(100% - 4px);translate:-50% 0;padding:3px 10px;border-radius:9999px;background:#fff;
font-style:normal;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;color:#0A0A0A;
box-shadow:0 0 0 1px rgba(10,10,10,.1)}
/* takvim yaprağı: coral sırt, iki halka, altında küçük günler; ay adı yok */
.sm-yaprak{position:absolute;left:50%;top:47.69230769230769%;translate:-50% -50%;width:16%;rotate:-3deg;
filter:drop-shadow(0 8px 12px rgba(10,10,10,.12))}
.sm-yust{position:relative;z-index:2;display:block;height:10px;border-radius:8px 8px 0 0;background:#FF5E4A}
.sm-yust::before,.sm-yust::after{content:"";position:absolute;top:3px;width:4px;height:4px;border-radius:9999px;background:#fff}
.sm-yust::before{left:27%}
.sm-yust::after{right:27%}
.sm-ygov{position:relative;display:block}
.sm-ysf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:6px 6px 7px;background:#fff;
border-radius:0 0 8px 8px;box-shadow:inset 0 0 0 1px rgba(10,10,10,.09)}
.sm-ysf i{display:block;aspect-ratio:1;border-radius:2px;background:#ECEAE6}
.sm-ysf[data-on]{position:absolute;inset:0;transform-origin:50% 0;backface-visibility:hidden}
/* hareket (8 sn'lik tur): nesne kalkar, ondan çıkan yay coral dolar, ok ucu sıradaki nesneye varınca o kalkar. Dört yay
dolunca takvim yaprağı çevrilir, yaylar griye döner, tur Analiz'den yeniden başlar */
.sm-c-sahne[data-gor] .sm-n{animation:sm-naktif 8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d)}
.sm-c-sahne[data-gor] .sm-n em{animation:sm-eaktif 8s steps(1,end) infinite;animation-delay:var(--d)}
.sm-c-sahne[data-gor] .sm-ysf[data-on]{animation:sm-cevir 8s ease-in infinite}
@keyframes sm-naktif{0%{rotate:var(--e);scale:1;translate:-50% -50%}6%,19%{rotate:0deg;scale:1.1;translate:-50% -56%}
25%,100%{rotate:var(--e);scale:1;translate:-50% -50%}}
@keyframes sm-eaktif{0%,5%{background:#fff;color:#0A0A0A;box-shadow:0 0 0 1px rgba(10,10,10,.1)}6%,20%{background:#FF5E4A;color:#fff;box-shadow:none}
21%,100%{background:#fff;color:#0A0A0A;box-shadow:0 0 0 1px rgba(10,10,10,.1)}}
@keyframes sm-cevir{0%,80%{transform:perspective(220px) rotateX(0deg);opacity:1}89%{transform:perspective(220px) rotateX(-110deg);opacity:0}
100%{transform:perspective(220px) rotateX(0deg);opacity:0}}
.sm-c-sahne[data-gor] .sm-c-dol[data-i="0"]{animation:sm-dol0 8s ease-in-out infinite}
.sm-c-sahne[data-gor] .sm-c-ucd[data-i="0"]{animation:sm-ucd0 8s linear infinite}
@keyframes sm-dol0{0%,5%{stroke-dashoffset:100;opacity:1}22.5%,90%{stroke-dashoffset:0;opacity:1}97.5%{stroke-dashoffset:0;opacity:0}
100%{stroke-dashoffset:100;opacity:0}}
@keyframes sm-ucd0{0%,22%{opacity:0}23%,90%{opacity:1}97.5%,100%{opacity:0}}
.sm-c-sahne[data-gor] .sm-c-dol[data-i="1"]{animation:sm-dol1 8s ease-in-out infinite}
.sm-c-sahne[data-gor] .sm-c-ucd[data-i="1"]{animation:sm-ucd1 8s linear infinite}
@keyframes sm-dol1{0%,27.5%{stroke-dashoffset:100;opacity:1}38.75%,90%{stroke-dashoffset:0;opacity:1}97.5%{stroke-dashoffset:0;opacity:0}
100%{stroke-dashoffset:100;opacity:0}}
@keyframes sm-ucd1{0%,38.25%{opacity:0}39.25%,90%{opacity:1}97.5%,100%{opacity:0}}
.sm-c-sahne[data-gor] .sm-c-dol[data-i="2"]{animation:sm-dol2 8s ease-in-out infinite}
.sm-c-sahne[data-gor] .sm-c-ucd[data-i="2"]{animation:sm-ucd2 8s linear infinite}
@keyframes sm-dol2{0%,43.75%{stroke-dashoffset:100;opacity:1}61.25%,90%{stroke-dashoffset:0;opacity:1}97.5%{stroke-dashoffset:0;opacity:0}
100%{stroke-dashoffset:100;opacity:0}}
@keyframes sm-ucd2{0%,60.75%{opacity:0}61.75%,90%{opacity:1}97.5%,100%{opacity:0}}
.sm-c-sahne[data-gor] .sm-c-dol[data-i="3"]{animation:sm-dol3 8s ease-in-out infinite}
.sm-c-sahne[data-gor] .sm-c-ucd[data-i="3"]{animation:sm-ucd3 8s linear infinite}
@keyframes sm-dol3{0%,66.25%{stroke-dashoffset:100;opacity:1}77.5%,90%{stroke-dashoffset:0;opacity:1}97.5%{stroke-dashoffset:0;opacity:0}
100%{stroke-dashoffset:100;opacity:0}}
@keyframes sm-ucd3{0%,77%{opacity:0}78%,90%{opacity:1}97.5%,100%{opacity:0}}
/* ── D · rapor: kartın beyazında hafif eğik duran tek bir rapor sayfası. Arka yüzey yok; ayrımı ince kenar ve kısa, yumuşak
gölge verir. Hiyerarşi: büyük erişim rakamı ve coral işaret önde, grafik onun eğilimi, üç ölçüm altta sakin ── */
.sm-d-sahne{position:relative;flex:1;min-height:0;margin-top:16px;padding:7px 10px 5px 5px}
.sm-sayfa{position:relative;height:100%;display:flex;flex-direction:column;padding:15px 17px 14px;border-radius:16px;background:#fff;
border:1px solid rgba(10,10,10,.09);box-shadow:0 16px 30px -22px rgba(10,10,10,.32);rotate:-1.5deg;
transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
/* sayfa da çıkartma gibi: üstüne gelince eğim sıfırlanır, 4px yükselir */
.sm-sayfa:hover{rotate:0deg;translate:0 -4px}
.sm-rust{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:rgba(10,10,10,.5)}
.sm-rust b{font-size:13px;font-weight:600;color:#0A0A0A;white-space:nowrap}
.sm-grafk{position:relative;display:block;flex:none;margin-top:10px}
.sm-rana{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-top:6px}
.sm-rsayi{font-size:clamp(28px,2.6vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.sm-rbir{font-size:13px;color:rgba(10,10,10,.55)}
.sm-rart{position:relative;margin-left:4px;padding:0 2px;font-size:15px;font-weight:600;color:#FF5E4A}
.sm-rart svg{position:absolute;left:-14px;top:-9px;width:calc(100% + 26px);height:calc(100% + 18px);overflow:visible}
.sm-rart path{fill:none;stroke:#FF5E4A;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100 120;stroke-dashoffset:0}
/* grafik sabit boyda: yatayda hafif esner, çizgi kalınlığı gözle fark edilmez */
.sm-graf{width:100%;height:54px;flex:none;display:block;overflow:visible;margin:6px 0 0}
.sm-galan{fill:#FF5E4A;opacity:.09}
.sm-geski{fill:none;stroke:rgba(10,10,10,.3);stroke-width:1.5;stroke-dasharray:3 3}
.sm-gyeni{fill:none;stroke:#FF5E4A;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100 120;stroke-dashoffset:0}
.sm-glej{position:absolute;left:0;top:2px;display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1;color:rgba(10,10,10,.5)}
.sm-gnok{fill:#FF5E4A;stroke:#fff;stroke-width:2}
.sm-glej i{width:12px;height:2px;border-radius:2px;background:#FF5E4A}
.sm-glej i[data-t="eski"]{background:rgba(10,10,10,.3)}
.sm-glej i[data-t="yeni"]{margin-left:8px}
/* üç ölçüm yan yana, üstten hizalı: değer ve değişimi bir satırda, adı altında soluk. Kutu da çizgi de yok, yalnız aralık */
.sm-rsat{list-style:none;margin:auto 0 0;padding:14px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;
container-type:inline-size}
.sm-rsat li{display:flex;flex-direction:column;gap:3px;min-width:0}
.sm-rdeg{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px}
.sm-rsat b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#0A0A0A;font-variant-numeric:tabular-nums}
.sm-rsat em{font-style:normal;font-size:11.5px;font-weight:600;color:#FF5E4A}
.sm-rsat em[data-t="p"]{color:#4895F7}
.sm-rad{font-size:11.5px;line-height:1.3;color:rgba(10,10,10,.5);text-wrap:balance}
/* dar sayfada (1024 civarı) üç değişimin üçü de değerin altına iner: sütunlar tutarlı kalır */
@container (max-width:240px){.sm-rdeg{flex-direction:column;align-items:flex-start;gap:1px}}
/* mühür: küçük süs çıkartması (en çok ±10°), raporun sağ üst köşesinde */
.sm-muhur{position:absolute;z-index:2;right:4px;top:0;width:62px;height:62px;border-radius:9999px;display:grid;place-items:center;text-align:center;
background:#4895F7;color:#fff;border:4px solid #fff;font-size:11.5px;font-weight:600;line-height:1.1;rotate:9deg;
box-shadow:0 6px 12px -8px rgba(10,40,90,.5);animation:sm-sal 7s ease-in-out infinite}
.sm-d-sahne[data-gor] .sm-rart path{animation:sm-halka 9s cubic-bezier(.65,0,.35,1) infinite}
.sm-d-sahne[data-gor] .sm-gyeni{animation:sm-cizgi 9s cubic-bezier(.65,0,.35,1) infinite}
.sm-d-sahne[data-gor] .sm-galan{animation:sm-alan 9s ease infinite}
.sm-d-sahne[data-gor] .sm-gnok{animation:sm-alan2 9s ease infinite}
@keyframes sm-cizgi{0%{stroke-dashoffset:100}22%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes sm-alan{0%,10%{opacity:0}28%,100%{opacity:.09}}
@keyframes sm-alan2{0%,18%{opacity:0}24%,100%{opacity:1}}
@keyframes sm-halka{0%,20%{stroke-dashoffset:100}34%,100%{stroke-dashoffset:0}}
/* süzülen çıkartma (§5): 7 sn'de 10px iner-kalkar */
@keyframes sm-sal{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media(max-width:1000px){
.sm-a,.sm-b{grid-column:span 12}
.sm-c,.sm-d{grid-column:span 6}
/* tablette pano geniş ve kısa: çıkartma panonun boyuna göre küçülür, platformlar yanında */
.sm-b{grid-row:auto;height:520px}
.sm-b-gov{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:stretch}
.sm-plist{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}
}
/* telefon · sıkı yığın (lab/bento-mobil B): takvim ve platformlar tam genişlik ama kısa, döngü ve rapor yan yana iki küçük kutu */
@media(max-width:640px){
.sm-sar{padding:0 20px}
.sm-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sm-a,.sm-b,.sm-c,.sm-d{height:auto}
.sm-a,.sm-b{grid-column:1 / -1;padding:20px 18px 18px;border-radius:22px}
.sm-c,.sm-d{grid-column:auto;padding:16px 14px 14px;border-radius:20px}
.sm-km{font-size:14.5px}
.sm-c .sm-kb,.sm-d .sm-kb{font-size:18px}
.sm-c .sm-km,.sm-d .sm-km{margin-top:4px;font-size:13.5px}
/* A · takvim kısa ve tam genişlik; onay çıkartması hemen altında, yatay. Ok yok */
.sm-a-alan{flex:none;display:flex;flex-direction:column;gap:0;margin-top:14px}
.sm-pen{height:184px;padding:9px 8px 9px;border-radius:16px}
.sm-pbas{font-size:12px}
.sm-phaft{margin-top:6px;font-size:9.5px;gap:3px}
.sm-phaft span{padding-left:3px}
.sm-pgun{margin-top:4px;gap:3px}
.sm-g{border-radius:6px}
.sm-g b{font-size:9.5px;left:2px;top:2px}
.sm-cip{left:3px;bottom:3px;max-width:calc(100% - 6px);height:13px;padding:0 4px;font-size:8px}
.sm-a-sag{justify-content:flex-end;margin-top:10px;padding:0 4px 0 0}
.sm-onay{width:auto;display:flex;align-items:center;gap:10px;padding:6px;border-radius:18px;rotate:1.8deg}
.sm-okare{width:56px;flex:none;border-radius:12px}
.sm-otur{display:none}
.sm-obar{padding:0 2px 0 0;gap:12px}
.sm-om b{font-size:13px}
.sm-om>span{font-size:11.5px;gap:5px}
.sm-obtn{width:30px;height:30px}
.sm-obtn svg{width:14px;height:14px}
.sm-ok{display:none}
/* B · pano kısa. Dönüşüm yerine geçiş: dört ölçünün çıkartması üst üste, sıradaki belirir (opacity + transform).
Platformlar tek sıra ikon; adı balonda, listede ekran okuyucu için duruyor */
.sm-b-gov{display:flex;margin-top:14px;gap:12px}
.sm-pano{flex:none;height:190px;gap:14px}
.sm-cik{--s:min(64cqw,46cqh)}
.sm-kat{display:grid;place-items:center}
.sm-kat>.sm-cik{grid-area:1 / 1;opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.sm-kat>.sm-cik[data-on]{opacity:1;transform:none}
.sm-kat .sm-cikg{transition:none}
.sm-kat .sm-cikg em{animation:none}
.sm-balon{padding:7px 11px;font-size:13.5px}
.sm-plist{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sm-pt{position:relative;align-items:center;justify-content:center;height:44px;padding:0;border-radius:12px}
.sm-pt b,.sm-pt em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sm-pti{margin:0}
/* C · döngü küçük kutuda: sahne kutunun eninde, etiketler küçük */
.sm-c-sahne{flex:1;height:auto;min-height:112px;margin-top:10px}
.sm-n em{top:calc(100% - 3px);padding:2px 7px;font-size:11px}
/* D · rapor küçük kutuda: sayı, değişim ve grafik; üç ölçüm ve lejant yok, mühür küçük */
.sm-d-sahne{flex:1;height:auto;margin-top:12px;padding:8px 6px 2px 2px}
.sm-sayfa{padding:11px 11px 12px;border-radius:14px}
.sm-rsayi{font-size:24px}
.sm-rbir{font-size:12px}
.sm-rart{font-size:13px}
.sm-glej,.sm-rsat{display:none}
.sm-grafk{margin-top:auto}
.sm-graf{height:40px}
.sm-muhur{width:46px;height:46px;border-width:3px;font-size:8.5px;right:-2px;top:-6px}
}
@media(prefers-reduced-motion:reduce){
.sm *{animation:none!important;transition:none!important}
}
.rf{background:#FCFBFA;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(64px,7vw,104px) 0;-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.rf{padding-top:56px;padding-bottom:56px}}
.rf *{box-sizing:border-box}
.rf-sar{max-width:1200px;margin:0 auto;padding:0 24px}
/* TASARIM-KURALLARI §1: açıklama başlığın altında, araları 14px, en çok 520px, dengeli kırılır */
.rf-ust{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,3.4vw,44px)}
.rf-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.rf-nok{color:#4895F7}
.rf-giris{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.rf-izgara{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.rf-k{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:26px;padding:26px;background:#fff;
border:1px solid rgba(10,10,10,.09);overflow:hidden}
.rf-a{grid-column:span 8;height:380px}
.rf-b{grid-column:span 4;grid-row:span 2;height:774px}
.rf-c{grid-column:span 4;height:380px}
.rf-d{grid-column:span 4;height:380px}
.rf-kb{position:relative;z-index:2;margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.rf-km{position:relative;z-index:2;margin:6px 0 0;font-size:15px;line-height:1.5;color:rgba(10,10,10,.58);text-wrap:balance}
/* çıkartma (§5): 7px beyaz kenar, 20px köşe, eğik; üstüne gelince düzelir ve 4px kalkar */
.rf-kare,.rf-kl{transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
.rf-kare:hover,.rf-kl:hover,.rf-fis:hover{rotate:0deg;translate:0 -4px}
/* ── A · tarif kutusu solda, kare çıkartması sağda, aralarında düz ok ── */
.rf-a-alan{position:relative;flex:1;min-height:0;margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto}
.rf-tarif{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px;border-radius:18px;
background:#fff;border:1px solid rgba(10,10,10,.1)}
.rf-tbas{display:flex;align-items:center;gap:7px;min-height:22px;padding:0 2px;font-size:12.5px}
.rf-tbas svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rf-tbas b{font-weight:600}
/* "Sen" hapı: çevresi tam konturlu, zemini coral'ın açık tonu */
.rf-sen{margin-left:auto;height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:9999px;
border:1px solid #FF5E4A;background:color-mix(in srgb,#FF5E4A 10%,#fff);color:color-mix(in srgb,#FF5E4A 78%,#0A0A0A);
font-size:12px;font-weight:600;line-height:1}
/* satırlar çizgiyle ayrılmaz: boşluk; yazılan satır hafif bir kutuda */
.rf-satir{list-style:none;margin:8px 0 0;padding:0;flex:1;min-height:0;display:flex;flex-direction:column;gap:4px}
.rf-satir li{flex:1;min-height:0;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:12px;transition:background .35s}
.rf-satir li[data-d="yaz"]{background:#F5F4F2}
.rf-sno{flex:none;width:22px;height:22px;border-radius:9999px;display:grid;place-items:center;font-style:normal;font-size:11.5px;
font-weight:600;color:rgba(10,10,10,.38);box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.13);transition:background .3s,color .3s,box-shadow .3s}
.rf-satir li[data-d="yaz"] .rf-sno{background:#fff;color:#4895F7;box-shadow:inset 0 0 0 1.5px #4895F7}
.rf-satir li[data-d="tam"] .rf-sno{background:#4895F7;color:#fff;box-shadow:none}
.rf-cm{min-width:0;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden}
.rf-imlec{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.17em;background:#FF5E4A;
animation:rf-yanson 1s steps(1,end) infinite}
@keyframes rf-yanson{0%,100%{opacity:1}50%{opacity:0}}
.rf-iskelet{display:block;height:8px;max-width:calc(100% - 32px);border-radius:4px;background:#EFEDEA}
/* kare çıkartması */
.rf-a-sag{position:relative;z-index:3;min-width:0;display:flex;align-items:center;justify-content:flex-end;
padding:0 6px 0 clamp(78px,8.4vw,116px)}
.rf-kare{position:relative;flex:none;width:clamp(214px,23vw,318px);padding:7px;border-radius:20px;background:#fff;rotate:2.2deg;
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.06)}
.rf-kgor{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#F2F0ED}
/* boş kare: döngü başında, cümle gelmeden önce */
.rf-bos{position:absolute;inset:9px;border-radius:9px;border:1.5px dashed rgba(10,10,10,.16);display:grid;place-items:center}
.rf-bos svg{width:26px;height:26px;fill:none;stroke:rgba(10,10,10,.28);stroke-width:1.6;stroke-linejoin:round}
/* kareler üst üste; sıradaki kare üstte belirir, önceki o gelene dek altında tam durur (arada boş zemin görünmez).
Kadraj görselin kendisinde, oturma katmanda */
.rf-kat{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .5s ease}
.rf-kat[data-alt]{z-index:1;opacity:1;transition:none}
.rf-kat[data-a]{z-index:2;opacity:1;animation:rf-otur 1.2s cubic-bezier(.22,1,.36,1) both}
.rf-kat img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;transform-origin:0 0}
@keyframes rf-otur{from{scale:1.07}to{scale:1}}
.rf-kcip{position:absolute;z-index:3;left:9px;bottom:9px;padding:3px 9px;border-radius:9999px;background:#fff;color:#0A0A0A;
font-style:normal;font-size:12px;font-weight:600;line-height:1.25;animation:rf-belir .45s cubic-bezier(.22,1,.36,1) both}
/* oynat işareti (iş kartlarındaki gibi): kare filme dönünce gelir */
.rf-oynat{position:absolute;z-index:3;top:9px;right:9px;width:34px;height:34px;border-radius:9999px;background:#fff;
display:grid;place-items:center;opacity:0;scale:.6;transition:opacity .3s,scale .45s cubic-bezier(.34,1.56,.64,1)}
.rf-oynat svg{width:11px;height:12px;margin-left:2px;fill:#0A0A0A}
.rf-kare[data-film] .rf-oynat{opacity:1;scale:1}
@keyframes rf-belir{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
/* ok: kutunun kenarındaki halkadan çıkan düz, kesik çizgili mürekkep; çizgiler kareye doğru akar */
.rf-ok{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.rf-okg,.rf-okb{fill:none;stroke:#0A0A0A;stroke-opacity:.68;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rf-okg{stroke-dasharray:7 8;animation:rf-okak 1.4s linear infinite}
.rf-okn{fill:#fff;stroke:#0A0A0A;stroke-opacity:.68;stroke-width:2.4}
@keyframes rf-okak{from{stroke-dashoffset:15}to{stroke-dashoffset:0}}
/* ── B · tek görsel ölçüden ölçüye dönüşür ── */
.rf-b-gov{flex:1;min-height:0;margin-top:18px;display:flex;flex-direction:column;gap:16px}
/* pano bir kap: çıkartmanın ölçüsü panonun eni ve boyundan (cqw, cqh) gelir */
.rf-pano{position:relative;flex:1;min-height:0;border-radius:18px;container-type:size;display:flex;align-items:center;justify-content:center;
background:radial-gradient(rgba(10,10,10,.09) 1px,transparent 1.2px) 0 0/18px 18px}
.rf-cik{position:relative;display:block;flex:none;padding:7px;border-radius:20px;background:#fff;rotate:var(--e);
--s:min(66cqw,54cqh);box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);transition:rotate .75s cubic-bezier(.22,1,.36,1)}
.rf-cikg{position:relative;display:block;border-radius:14px;overflow:hidden;background:#EFEDEA;
width:calc(var(--s) * var(--w));height:calc(var(--s) * var(--h));transition:width .75s cubic-bezier(.22,1,.36,1),height .75s cubic-bezier(.22,1,.36,1)}
.rf-cikg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 53%}
.rf-cikg em{position:absolute;z-index:2;left:9px;bottom:14px;padding:3px 9px;border-radius:9999px;background:#fff;color:#0A0A0A;
font-style:normal;font-size:12px;font-weight:600;line-height:1.25;animation:rf-belir .4s cubic-bezier(.22,1,.36,1) both}
/* çıktı çubuğu: her ölçüde baştan dolar (film o ölçüde çıkıyor) */
.rf-ilerle{position:absolute;z-index:2;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.45)}
.rf-ilerle i{display:block;height:100%;background:#FF5E4A;transform-origin:0 50%;animation:rf-ilerle 2600ms linear both}
.rf-ilerle i[data-dur]{animation:none}
@keyframes rf-ilerle{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rf-roz{position:absolute;left:-11px;top:-11px;width:38px;height:38px;border-radius:9999px;background:#fff;display:grid;place-items:center;
box-shadow:0 6px 14px -6px rgba(10,10,10,.35),0 0 0 1px rgba(10,10,10,.06);animation:rf-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.rf-roz svg{width:19px;height:19px}
@keyframes rf-pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
.rf-plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rf-pt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:12px 12px 11px;border-radius:14px;background:#fff;
border:1px solid rgba(10,10,10,.09);transition:border-color .35s,background .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.rf-pt[data-on]{border-color:var(--r);background:color-mix(in srgb,var(--r) 6%,#fff);transform:translateY(-2px)}
.rf-pti{width:22px;height:22px;display:grid;place-items:center;color:var(--r);margin-bottom:2px}
.rf-pti svg{width:19px;height:19px}
.rf-pt b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.rf-pt em{font-style:normal;font-size:12px;color:rgba(10,10,10,.5);white-space:nowrap}
/* ── C · fiş: kalemler çizilir, toplam sıfıra iner ── */
.rf-c-sahne{position:relative;flex:1;min-height:0;margin-top:14px;display:flex;align-items:center;justify-content:center}
/* fiş bir çıkartma: beyaz kâğıt, alt kenarı tırtıklı, hafif eğik; gölge tırtığı izlesin diye filtreyle */
.rf-fis{position:relative;width:min(100%,292px);rotate:-1.6deg;transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1);
filter:drop-shadow(0 0 .5px rgba(10,10,10,.28)) drop-shadow(0 14px 14px rgba(10,10,10,.12))}
.rf-fkag{--z:7px;padding:14px 14px calc(14px + var(--z));border-radius:14px 14px 0 0;background:#fff;
-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / calc(2 * var(--z)) 100%;
mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / calc(2 * var(--z)) 100%}
.rf-fsat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.rf-fsat li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:30px;padding:0 2px}
.rf-fik{display:grid;place-items:center;color:#4895F7;transition:opacity .4s}
.rf-fik svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rf-fad{position:relative;justify-self:start;max-width:100%;font-size:13.5px;color:rgba(10,10,10,.78);white-space:nowrap;transition:color .4s}
/* üstü çizilir: elle çizilmiş coral çizgi soldan sağa */
.rf-fad svg{position:absolute;left:-3px;top:50%;width:calc(100% + 6px);height:10px;margin-top:-5px;overflow:visible}
.rf-fad path{fill:none;stroke:#FF5E4A;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
stroke-dasharray:100 120;stroke-dashoffset:100;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1)}
.rf-fut{display:grid;justify-items:end;align-items:center}
.rf-fut>*{grid-area:1/1}
.rf-fut b{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity .3s,translate .3s}
/* "Gerek yok": çevresi tam konturlu, zemini coral'ın açık tonu */
.rf-fut em{height:22px;display:inline-flex;align-items:center;padding:0 8px;border-radius:9999px;border:1px solid #FF5E4A;
background:color-mix(in srgb,#FF5E4A 10%,#fff);color:color-mix(in srgb,#FF5E4A 78%,#0A0A0A);font-style:normal;font-size:11.5px;
font-weight:600;line-height:1;white-space:nowrap;opacity:0;scale:.7;transition:opacity .3s .15s,scale .45s .15s cubic-bezier(.34,1.56,.64,1)}
.rf-fsat li[data-d] .rf-fad{color:rgba(10,10,10,.42)}
.rf-fsat li[data-d] .rf-fad path{stroke-dashoffset:0}
.rf-fsat li[data-d] .rf-fik{opacity:.35}
.rf-fsat li[data-d] .rf-fut b{opacity:0;translate:0 -4px}
.rf-fsat li[data-d] .rf-fut em{opacity:1;scale:1}
/* toplam: hafif bir kutuda (çizgiyle ayrılmaz) */
.rf-ftop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 12px 9px 13px;
border-radius:12px;background:#F5F4F2}
.rf-ftop>span{font-size:13px;color:rgba(10,10,10,.55)}
.rf-ftop b{position:relative;font-size:clamp(24px,2.3vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1.1;
font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .4s}
.rf-ftop b[data-s]{color:#FF5E4A}
.rf-ftop svg{position:absolute;left:-15px;top:-9px;width:calc(100% + 28px);height:calc(100% + 18px);overflow:visible}
.rf-ftop path{fill:none;stroke:#FF5E4A;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100 120;stroke-dashoffset:100;
transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1)}
.rf-ftop b[data-s] path{stroke-dashoffset:0}
/* fiş yenilenirken kalemler bir anlığına söner */
.rf-fkag[data-yeni] .rf-fsat,.rf-fkag[data-yeni] .rf-ftop b{animation:rf-yeni .7s ease both}
@keyframes rf-yeni{0%{opacity:0}100%{opacity:1}}
/* ── D · klaket: mavi pano, çubuk açılıp çarpar ── */
/* klaket ortada; üstte açık çubuğun kalkışı, altta hapın taşması kadar pay (çubuk açıklamaya değmez) */
.rf-d-sahne{flex:1;min-height:0;margin-top:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:22px 0 20px}
.rf-kl{position:relative;width:min(100%,252px);padding-top:26px;rotate:1.8deg}
/* çubuk: gövdenin üstünde, sol ucundan menteşeli; açıkken kalkık, çarparken hızla kapanır */
.rf-kl-cubuk{position:absolute;z-index:2;left:0;right:0;top:2px;height:26px;border-radius:9px;border:5px solid #fff;
background:repeating-linear-gradient(-56deg,#0A0A0A 0 11px,#fff 11px 27px);
box-shadow:inset 0 0 0 1.5px #0A0A0A,0 8px 14px -10px rgba(10,10,10,.4);transform-origin:9px 100%;rotate:-10deg;
transition:rotate .7s cubic-bezier(.22,1,.36,1)}
.rf-kl-cubuk::before{content:"";position:absolute;left:3px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:9999px;background:#fff;
box-shadow:0 0 0 1.5px #0A0A0A}
.rf-kl[data-kapali] .rf-kl-cubuk{rotate:0deg;transition:rotate .17s cubic-bezier(.55,0,1,.45)}
.rf-kl[data-kapali] .rf-kl-govde{animation:rf-carp .38s .15s ease-out}
@keyframes rf-carp{0%{translate:0 0}35%{translate:0 2.5px}100%{translate:0 0}}
.rf-kl-govde{position:relative;padding:7px;border-radius:20px;background:#fff;
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.06)}
.rf-kl-cene{display:block;height:16px;border-radius:8px 8px 4px 4px;
background:repeating-linear-gradient(56deg,#0A0A0A 0 11px,#fff 11px 27px);box-shadow:inset 0 0 0 1.5px #0A0A0A}
.rf-kl-pano{margin-top:5px;padding:13px 14px 14px;border-radius:12px;background:#2F94EF;color:#fff;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.rf-kl-a{display:flex;flex-direction:column;gap:3px;min-width:0}
.rf-kl-a b{position:relative;display:flex;align-items:center;gap:6px;height:21px}
/* boş alan: panoya henüz yazılmamış ölçü */
.rf-kl-yer{position:absolute;left:0;top:50%;width:44px;height:8px;margin-top:-4px;border-radius:4px;background:rgba(255,255,255,.3);
transition:opacity .3s}
.rf-kl-a em{font-style:normal;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1;white-space:nowrap;
opacity:0;translate:0 5px;transition:opacity .35s,translate .45s cubic-bezier(.22,1,.36,1)}
.rf-kl-tik{flex:none;width:17px;height:17px;border-radius:9999px;background:#fff;color:#2F94EF;display:grid;place-items:center;
scale:0;transition:scale .45s .1s cubic-bezier(.34,1.56,.64,1)}
.rf-kl-tik svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rf-kl-a>span{font-size:12.5px;font-weight:500;line-height:1.2;color:#fff;white-space:nowrap}
.rf-kl-a[data-on] .rf-kl-yer{opacity:0}
.rf-kl-a[data-on] em{opacity:1;translate:0 0}
.rf-kl-a[data-on] .rf-kl-tik{scale:1}
/* "Yayına hazır": canlıdaki rozet; çevresi tam konturlu, zemini yeşilin açık tonu. Klaketin sağ alt köşesine biner
(küçük süs çıkartması, eğimi ±10°'nin içinde) */
.rf-hazir{position:absolute;z-index:3;right:-10px;bottom:-15px;display:inline-flex;align-items:center;gap:7px;height:30px;
padding:0 12px 0 6px;border-radius:9999px;background:#EAF6EE;border:1px solid #BFE3CC;color:#1F7A44;font-size:13px;font-weight:600;
white-space:nowrap;rotate:-5deg;box-shadow:0 0 0 3px #fff,0 10px 18px -10px rgba(10,10,10,.35);opacity:0;scale:.7;
transition:opacity .25s,scale .45s cubic-bezier(.34,1.56,.64,1)}
.rf-hazir i{width:18px;height:18px;border-radius:9999px;background:#2FA463;color:#fff;display:grid;place-items:center}
.rf-hazir svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.rf-hazir[data-on]{opacity:1;scale:1}
@media(max-width:1000px){
.rf-a,.rf-b{grid-column:span 12}
.rf-c,.rf-d{grid-column:span 6}
/* tablette pano geniş ve kısa: çıkartma panonun boyuna göre küçülür, platformlar yanında */
.rf-b{grid-row:auto;height:520px}
/* tarif kutusu genişledikçe kare de büyür; kutu boş kalmasın */
.rf-kare{width:min(318px,40vw)}
.rf-b-gov{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:stretch}
.rf-plist{align-content:center}
}
/* telefon · sıkı yığın (lab/bento-mobil B): tarif ve formatlar tam genişlik ama kısa, gider ve klaket yan yana iki küçük kutu */
@media(max-width:640px){
.rf-sar{padding:0 20px}
.rf-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rf-a,.rf-b,.rf-c,.rf-d{height:auto}
.rf-a,.rf-b{grid-column:1 / -1;padding:20px 18px 18px;border-radius:22px}
.rf-c,.rf-d{grid-column:auto;padding:16px 14px 14px;border-radius:20px}
.rf-km{font-size:14.5px}
.rf-c .rf-kb,.rf-d .rf-kb{font-size:18px}
.rf-c .rf-km,.rf-d .rf-km{margin-top:4px;font-size:13.5px}
/* A · tarif kutusu kısa ve tam genişlik; kare hemen altında, sağda. Ok yok */
.rf-a-alan{flex:none;display:flex;flex-direction:column;margin-top:14px}
.rf-tarif{height:142px;padding:9px}
.rf-satir{margin-top:6px;gap:2px}
.rf-satir li{gap:9px;padding:0 8px;border-radius:10px}
.rf-sno{width:20px;height:20px;font-size:11px}
.rf-cm{font-size:14px}
.rf-a-sag{justify-content:flex-end;margin-top:10px;padding:0 4px 4px 0}
.rf-kare{width:min(100%,240px);rotate:1.6deg}
.rf-ok{display:none}
/* B · pano kısa. Dönüşüm yerine geçiş: dört ölçünün çıkartması üst üste, sıradaki belirir (opacity + transform).
Platformlar tek sıra: simge ve oran; adı ekran okuyucu için duruyor */
.rf-b-gov{display:flex;margin-top:14px;gap:12px}
.rf-pano{flex:none;height:190px}
.rf-yigin{display:grid;place-items:center}
.rf-yigin>.rf-cik{grid-area:1 / 1;opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.rf-yigin>.rf-cik[data-on]{opacity:1;transform:none}
.rf-yigin .rf-cikg{transition:none}
.rf-yigin .rf-cikg em{animation:none}
.rf-plist{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.rf-pt{position:relative;align-items:center;gap:4px;padding:9px 4px 8px;border-radius:12px}
.rf-pti{margin:0}
.rf-pt b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rf-pt em{font-size:11px}
/* C · fiş küçük kutuda: kalem adları çizilir, toplam sıfıra iner; tutarlar ve "Gerek yok" hapı yok */
.rf-c-sahne{margin-top:12px;padding:2px 0 6px}
.rf-fis{width:100%;rotate:-1.2deg}
.rf-fkag{--z:5px;padding:9px 9px calc(9px + var(--z));border-radius:12px 12px 0 0}
.rf-fsat{gap:1px}
.rf-fsat li{grid-template-columns:15px minmax(0,1fr);gap:7px;min-height:22px;padding:0}
.rf-fik svg{width:15px;height:15px}
.rf-fad{font-size:12px}
.rf-fut{display:none}
.rf-ftop{flex-direction:column;align-items:flex-start;gap:1px;margin-top:8px;padding:6px 9px 7px;border-radius:10px}
.rf-ftop>span{font-size:11.5px}
.rf-ftop b{font-size:20px}
/* D · klaket küçük kutuda: dört değer alt alta, adları yok. Üstte açık çubuğun kalkışı kadar pay */
.rf-d-sahne{margin-top:12px;padding:18px 0 13px}
.rf-kl{width:100%;padding-top:17px;rotate:1.4deg}
.rf-kl-cubuk{top:1px;height:18px;border-width:4px;border-radius:7px;background:repeating-linear-gradient(-56deg,#0A0A0A 0 8px,#fff 8px 19px);
transform-origin:7px 100%}
.rf-kl-cubuk::before{left:2px;width:6px;height:6px;margin-top:-3px}
.rf-kl-govde{padding:5px;border-radius:16px}
.rf-kl-cene{height:11px;border-radius:6px 6px 3px 3px;background:repeating-linear-gradient(56deg,#0A0A0A 0 8px,#fff 8px 19px)}
.rf-kl-pano{margin-top:4px;padding:9px 10px 10px;border-radius:10px;grid-template-columns:minmax(0,1fr);gap:3px}
.rf-kl-a>span{display:none}
.rf-kl-a b{height:18px}
.rf-kl-a em{font-size:13.5px}
.rf-kl-yer{width:38px;height:7px;margin-top:-3.5px}
.rf-kl-tik{width:15px;height:15px}
.rf-kl-tik svg{width:9px;height:9px}
.rf-hazir{right:-6px;bottom:-13px;height:26px;gap:5px;padding:0 9px 0 5px;font-size:12px}
.rf-hazir i{width:16px;height:16px}
.rf-hazir svg{width:10px;height:10px}
}
@media(prefers-reduced-motion:reduce){
.rf *{animation:none!important;transition:none!important}
}
.wb{background:#FCFBFA;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(64px,7vw,104px) 0;-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.wb{padding-top:56px;padding-bottom:56px}}
.wb *{box-sizing:border-box}
.wb-sar{max-width:1200px;margin:0 auto;padding:0 24px}
/* TASARIM-KURALLARI §1: açıklama başlığın altında, araları 14px, en çok 520px, dengeli kırılır */
.wb-ust{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,3.4vw,44px)}
.wb-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.wb-h2 span{white-space:nowrap}
.wb-nok{color:#4895F7}
.wb-giris{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.wb-izgara{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.wb-k{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:26px;padding:26px;background:#fff;
border:1px solid rgba(10,10,10,.09);overflow:hidden}
.wb-a{grid-column:span 8;height:380px}
.wb-b{grid-column:span 4;grid-row:span 2;height:774px}
.wb-c{grid-column:span 4;height:380px}
.wb-d{grid-column:span 4;height:380px}
.wb-kb{position:relative;z-index:2;margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.wb-km{position:relative;z-index:2;margin:6px 0 0;font-size:15px;line-height:1.5;color:rgba(10,10,10,.58);text-wrap:balance}
/* ── A · site solda (düz kutu), istek çıkartması sağda, aralarında kavisli kesik ok ── */
.wb-a-alan{position:relative;flex:1;min-height:0;margin-top:16px;display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-rows:minmax(0,1fr);gap:clamp(16px,2vw,24px)}
.wb-site{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px;border-radius:18px;
background:#fff;border:1px solid rgba(10,10,10,.1)}
.wb-sbar{display:flex;align-items:center;gap:8px;min-height:22px}
.wb-snok{flex:none;display:flex;gap:4px;padding-left:3px}
.wb-snok i{width:6px;height:6px;border-radius:9999px;background:rgba(10,10,10,.14)}
.wb-surl{flex:1;min-width:0;max-width:190px;height:22px;display:inline-flex;align-items:center;gap:5px;padding:0 10px 0 8px;
border-radius:9999px;background:#F4F3F0;font-size:11.5px;font-weight:500;color:rgba(10,10,10,.55);white-space:nowrap;overflow:hidden}
.wb-surl svg{flex:none;width:12px;height:12px;color:#4895F7}
/* durum hapı: tam konturlu, hafif yeşil zemin */
.wb-syay{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 8px;border-radius:9999px;
border:1px solid color-mix(in srgb,#1F9D55 55%,#fff);background:color-mix(in srgb,#1F9D55 9%,#fff);
font-size:11px;font-weight:600;color:#17693D}
.wb-syay i{width:6px;height:6px;border-radius:9999px;background:#1F9D55;animation:wb-nabiz 1.8s ease-in-out infinite}
.wb-sgov{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:14px;margin-top:10px}
/* görsel: iki hâl üst üste; değişince yerinde süzülerek geçer */
.wb-sgor{position:relative;display:block;min-height:0}
.wb-sgi{position:absolute;inset:0;border-radius:11px;overflow:hidden;background:#E9E6E1}
.wb-sgi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.wb-sgi img[data-a]{opacity:1;transition:opacity .7s .12s}
/* metin sütunu bir kap: yazılar sütunun enine göre küçülür, dar kartta da başlık iki satırda kalır */
.wb-smet{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 4px 0 0;container-type:inline-size}
.wb-sbas{display:block;font-size:clamp(13px,9.2cqi,15.5px);font-weight:600;line-height:1.22;letter-spacing:-.02em}
.wb-sacik{display:block;font-size:clamp(11px,7.4cqi,12.5px);line-height:1.4;color:rgba(10,10,10,.58)}
.wb-sbas,.wb-sacik,.wb-sbm b{text-wrap:balance}
/* iki hâl aynı hücrede: eskisi hızla söner, yenisi ardından gelir (üst üste binip bulanmaz) */
.wb-iki{display:grid}
.wb-iki>span{grid-area:1/1;opacity:0;transition:opacity .25s}
.wb-iki>span[data-a]{opacity:1;transition:opacity .45s .12s}
.wb-sblog{display:flex;align-items:center;gap:9px;min-height:50px;padding:8px 10px 8px 8px;border-radius:11px;background:#F5F4F1}
.wb-sbi{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#fff;color:#4895F7;
box-shadow:0 0 0 1px rgba(10,10,10,.06)}
.wb-sbi svg{width:15px;height:15px}
.wb-sbm{min-width:0;display:flex;flex-direction:column;gap:2px}
.wb-sbm b{display:block;font-size:clamp(11px,7.4cqi,12.5px);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.wb-sbm em{font-style:normal;font-size:11.5px;color:rgba(10,10,10,.5)}
/* seçim: tasarım aracının seçimi (düz mavi çerçeve, dört köşe tutamağı). İmleç tıklayınca belirir; alan değişince bir kez
yumuşak halka verir */
.wb-sec{position:relative}
.wb-secc{position:absolute;inset:-4px;border:1.5px solid #4895F7;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s}
.wb-sec[data-s]>.wb-secc{opacity:1}
.wb-sec[data-s="yeni"]>.wb-secc{animation:wb-yeni 1.2s ease-out}
.wb-secc i{position:absolute;width:6px;height:6px;border-radius:1.5px;background:#fff;border:1.5px solid #4895F7}
.wb-secc i:nth-child(1){left:-3.75px;top:-3.75px}
.wb-secc i:nth-child(2){right:-3.75px;top:-3.75px}
.wb-secc i:nth-child(3){left:-3.75px;bottom:-3.75px}
.wb-secc i:nth-child(4){right:-3.75px;bottom:-3.75px}
@keyframes wb-yeni{0%{box-shadow:0 0 0 0 rgba(72,149,247,.4)}100%{box-shadow:0 0 0 10px rgba(72,149,247,0)}}
/* imleç: sitede alandan alana sakin gider ve tıklar; yeri JS'le ölçülür (translate), ucu (4, 2.5) */
.wb-imlec{position:absolute;z-index:4;left:0;top:0;width:20px;height:20px;pointer-events:none;
fill:#0A0A0A;stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(10,10,10,.3));
transform-origin:4px 2.5px;transition:translate .8s cubic-bezier(.45,0,.2,1)}
.wb-imlec[data-tik]{animation:wb-tikla .32s ease-out}
@keyframes wb-tikla{0%,100%{scale:1}40%{scale:.8}}
/* istek çıkartması (TASARIM-KURALLARI §5: 7px beyaz kenar, 20px köşe, eğik; üstüne gelince düzelir). Altı siteyle hizalı */
.wb-a-sag{position:relative;z-index:3;min-width:0;display:flex;align-items:flex-end;justify-content:flex-start;
padding:0 0 4px clamp(56px,7vw,104px)}
.wb-pan{position:relative;flex:none;width:min(196px,100%);padding:7px;border-radius:20px;background:#fff;
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.06);rotate:2.4deg;
transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
.wb-pan:hover{rotate:0deg;translate:0 -4px}
.wb-palan{position:relative;height:110px;border-radius:14px;background:#F3F1ED;overflow:hidden}
.wb-pp{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:10px 10px 11px;opacity:0;translate:0 8px;
transition:opacity .35s,translate .5s cubic-bezier(.22,1,.36,1)}
.wb-pp[data-a]{opacity:1;translate:0 0}
/* seçili alanın adı: sitedeki seçimle aynı mavi, tam konturlu hap */
.wb-pet{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:9999px;
border:1px solid color-mix(in srgb,#4895F7 55%,#fff);background:color-mix(in srgb,#4895F7 8%,#fff);
font-size:12px;font-weight:600;line-height:1;color:color-mix(in srgb,#4895F7 62%,#0A0A0A)}
.wb-pet svg{width:13px;height:13px;color:#4895F7}
.wb-pin{position:relative;flex:1;min-height:0;display:block;padding:8px 10px;border-radius:10px;background:#fff;
font-size:14px;font-weight:600;line-height:1.28;letter-spacing:-.01em;box-shadow:inset 0 0 0 1px rgba(10,10,10,.1);
overflow:hidden;transition:box-shadow .3s}
/* seçim yokken: yalnız soluk yer tutucu yazı */
.wb-pp-bos .wb-pin{display:flex;align-items:center;font-weight:500;color:rgba(10,10,10,.36)}
.wb-pp[data-odak] .wb-pin,.wb-pp[data-odak] .wb-pgor{box-shadow:inset 0 0 0 1.5px #4895F7,0 0 0 3px rgba(72,149,247,.16)}
.wb-kr{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.16em;background:#4895F7;
animation:wb-kirp 1s steps(1,end) infinite}
/* görsel alanı: boşken simge, yüklenirken yeni görsel ve dolan çubuk, sonra yalnız görsel */
.wb-pgor{position:relative;flex:1;min-height:0;display:block;border-radius:10px;overflow:hidden;background:#fff;
box-shadow:inset 0 0 0 1px rgba(10,10,10,.1);transition:box-shadow .3s}
.wb-pgor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.wb-pgor:not([data-d="bos"]) img[data-a]{opacity:1}
.wb-pgbos{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,#4895F7 75%,#fff);transition:opacity .3s}
.wb-pgbos svg{width:22px;height:22px}
.wb-pgor:not([data-d="bos"]) .wb-pgbos{opacity:0}
.wb-pyuk{position:absolute;left:8px;right:8px;bottom:8px;height:5px;border-radius:3px;background:rgba(255,255,255,.75);overflow:hidden;
opacity:0;transition:opacity .3s}
.wb-pyuk b{display:block;height:100%;border-radius:3px;background:#4895F7;transform-origin:left;transform:scaleX(0)}
.wb-pgor[data-d="yaz"] .wb-pyuk{opacity:1}
.wb-pgor[data-d="yaz"] .wb-pyuk b{animation:wb-yuk 1.3s cubic-bezier(.4,0,.2,1) both}
.wb-pbar{display:flex;align-items:center;gap:8px;padding:9px 3px 3px 5px}
.wb-pm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wb-pm b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-pm>span{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(10,10,10,.55);white-space:nowrap}
.wb-pm i{width:7px;height:7px;border-radius:9999px;flex:none;background:#E8A33D}
.wb-pm i[data-d="o"]{background:#1F9D55}
/* Enter tuşu: tuş kapağı; basılınca iner ve maviye döner */
.wb-enter{flex:none;width:38px;height:32px;border-radius:10px;display:grid;place-items:center;color:#0A0A0A;background:#fff;
box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18),0 2px 0 rgba(10,10,10,.14);transition:background .25s,color .25s,box-shadow .25s}
.wb-enter svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wb-pan[data-enter] .wb-enter{background:#4895F7;color:#fff;box-shadow:inset 0 0 0 1.5px #4895F7,0 2px 0 color-mix(in srgb,#4895F7 55%,#0A0A0A);
animation:wb-tus .32s ease-out}
@keyframes wb-tus{0%,100%{translate:0 0}35%{translate:0 2px;scale:.94}}
/* ok: halkadan çıkan kesik çizgili, yumuşak kavisli mürekkep (sosyal bentodaki ok); çizgiler çıkartmadan siteye doğru akar */
.wb-ok{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.wb-okg,.wb-okb{fill:none;stroke:#0A0A0A;stroke-opacity:.68;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wb-okg{stroke-dasharray:7 8;animation:wb-okak 1.4s linear infinite}
.wb-okn{fill:#fff;stroke:#0A0A0A;stroke-opacity:.68;stroke-width:2.4}
@keyframes wb-okak{from{stroke-dashoffset:15}to{stroke-dashoffset:0}}
@keyframes wb-nabiz{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
@keyframes wb-kirp{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes wb-yuk{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ── B · kırılımlar: tek site çıkartması ölçüden ölçüye dönüşür, bloklar yeniden dizilir ── */
.wb-b-gov{flex:1;min-height:0;margin-top:18px;display:flex;flex-direction:column;gap:16px}
/* pano bir kap: çıkartmanın ölçüsü panonun eni ve boyundan (cqw, cqh) gelir */
.wb-pano{position:relative;flex:1;min-height:0;border-radius:18px;container-type:size;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
background:radial-gradient(rgba(10,10,10,.09) 1px,transparent 1.2px) 0 0/18px 18px}
.wb-cik{position:relative;display:block;flex:none;padding:7px;border-radius:20px;background:#fff;rotate:var(--e);
--s:min(66cqw,44cqh);box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);
transition:rotate .75s cubic-bezier(.22,1,.36,1)}
.wb-ekr{position:relative;display:block;border-radius:14px;overflow:hidden;background:#F5F4F1;
width:calc(var(--s) * var(--w));height:calc(var(--s) * var(--h));transition:width .75s cubic-bezier(.22,1,.36,1),height .75s cubic-bezier(.22,1,.36,1)}
.wb-eb{position:absolute;display:block;transition:left .75s cubic-bezier(.22,1,.36,1),top .75s cubic-bezier(.22,1,.36,1),width .75s cubic-bezier(.22,1,.36,1),height .75s cubic-bezier(.22,1,.36,1)}
.wb-e-gor{border-radius:7px;overflow:hidden;background:#E9E6E1}
.wb-e-gor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-e-logo{border-radius:3px;background:#0A0A0A;clip-path:inset(0 0 0 0 round 3px)}
.wb-e-t{border-radius:3px;background:rgba(10,10,10,.82)}
.wb-e-p{border-radius:3px;background:rgba(10,10,10,.16)}
.wb-e-btn{border-radius:9999px;background:#4895F7}
.wb-e-k{border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.07)}
.wb-e-k::before{content:"";position:absolute;left:9%;top:14%;width:14%;aspect-ratio:1;max-width:12px;border-radius:4px;
background:color-mix(in srgb,#4895F7 22%,#fff)}
.wb-e-k::after{content:"";position:absolute;left:9%;bottom:16%;width:56%;height:5px;border-radius:3px;background:rgba(10,10,10,.12)}
/* menü: telefonda üç çizgi, genişte bağlantılar ve küçük mavi düğme */
.wb-ham,.wb-mbar{position:absolute;inset:0;display:flex;align-items:center;transition:opacity .45s}
.wb-ham{flex-direction:column;justify-content:center;align-items:flex-end;gap:2px}
.wb-ham i{display:block;width:12px;height:1.8px;border-radius:2px;background:#0A0A0A}
.wb-mbar{justify-content:flex-end;gap:7%;opacity:0}
.wb-mbar i{display:block;flex:none;width:14%;height:36%;border-radius:2px;background:rgba(10,10,10,.28)}
.wb-mbar u{display:block;flex:none;width:26%;height:100%;border-radius:9999px;background:#0A0A0A}
.wb-ekr:not([data-k="mobil"]) .wb-ham{opacity:0}
.wb-ekr:not([data-k="mobil"]) .wb-mbar{opacity:1}
/* genişlik ölçüsü: çıkartmanın üstünde, iki uçta dik çentik, ortada mavi hap */
.wb-olcu{position:absolute;left:7px;right:7px;top:-25px;height:14px;display:flex;align-items:center;color:#4895F7;pointer-events:none}
.wb-olcu i{flex:1;height:1.5px;background:currentColor}
.wb-olcu i:first-child,.wb-olcu i:last-child{flex:none;width:1.5px;height:10px;border-radius:1px}
.wb-olcu em{flex:none;margin:0 6px;padding:2px 8px;border-radius:9999px;border:1px solid #4895F7;background:color-mix(in srgb,#4895F7 10%,#fff);
color:color-mix(in srgb,#4895F7 72%,#0A0A0A);font-style:normal;font-size:11px;font-weight:600;line-height:1.3;
animation:wb-pop .45s cubic-bezier(.34,1.56,.64,1) both}
/* konuşma balonu (hero'daki balonun dili: beyaz, 2px mürekkep kenar); çıkartmanın altında, kuyruğu yukarı */
.wb-balon{position:relative;flex:none;padding:8px 13px;border-radius:14px;background:#fff;border:2px solid #0A0A0A;
font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;pointer-events:none;
animation:wb-pop .45s .12s cubic-bezier(.34,1.56,.64,1) both}
.wb-balon::after{content:"";position:absolute;left:50%;top:-7px;width:11px;height:11px;margin-left:-5.5px;background:#fff;rotate:45deg;
border-left:2px solid #0A0A0A;border-top:2px solid #0A0A0A}
@keyframes wb-pop{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
.wb-blist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wb-bt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:11px 11px 10px;border-radius:14px;background:#fff;
border:1px solid rgba(10,10,10,.09);transition:border-color .35s,background .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.wb-bt[data-on]{border-color:#4895F7;background:color-mix(in srgb,#4895F7 7%,#fff);transform:translateY(-2px)}
.wb-bti{width:22px;height:22px;display:grid;place-items:center;margin-bottom:2px;color:rgba(10,10,10,.42);transition:color .35s}
.wb-bti svg{width:20px;height:20px}
.wb-bt[data-on] .wb-bti{color:#4895F7}
.wb-bt b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.wb-bt em{font-style:normal;font-size:12px;color:rgba(10,10,10,.5);white-space:nowrap}
/* ── C · hız: büyük rakam coral, cetvel, iki skor kutusu ── */
.wb-hbuy{position:relative;z-index:2;display:flex;align-items:baseline;gap:6px}
.wb-hsay{font-size:clamp(32px,3.2vw,44px);font-weight:500;letter-spacing:-.04em;line-height:.95;color:#FF5E4A;font-variant-numeric:tabular-nums}
.wb-hbr{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.02em}
.wb-hkb{margin-top:10px}
.wb-c-gov{flex:1;min-height:0;margin-top:14px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;container-type:inline-size}
.wb-cet{position:relative;flex:none;height:108px;margin:auto 0}
/* etiketler: tam konturlu, hafif renkli zeminli hap */
.wb-cet-et{position:absolute;top:0;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:9999px;
font-size:12px;font-weight:500;white-space:nowrap}
.wb-cet-et b{font-weight:600}
.wb-cet-biz{top:80px;left:30%;translate:-50% 0;border:1px solid #FF5E4A;background:color-mix(in srgb,#FF5E4A 9%,#fff);
color:color-mix(in srgb,#FF5E4A 70%,#0A0A0A)}
.wb-cet-ge{right:0;border:1px solid rgba(10,10,10,.16);background:#F6F5F2;color:rgba(10,10,10,.62)}
.wb-cet-ge b{color:#0A0A0A}
/* cetvel üç parça: coral dolgu (0'dan çıkartmaya), gri yol (çıkartmadan Google'a), gri yol (Google'dan sona). Parçalar
işaretlerin 4px önünde biter; konum tek değişkenden (--wb-p) gelir, dolgu çıkartmayla birlikte uzar */
.wb-cet{--wb-p:30%}
.wb-cet-dol,.wb-cet-y1,.wb-cet-y2{position:absolute;top:44px;height:8px;border-radius:9999px}
.wb-cet-dol{left:0;width:max(0px,calc(var(--wb-p) - 24px));background:#FF5E4A}
.wb-cet-y1{left:calc(var(--wb-p) + 24px);right:calc(16.667% + 19px);background:#EEECE8}
.wb-cet-y2{left:calc(83.333% + 19px);right:0;background:#EEECE8}
.wb-cet-g{position:absolute;left:83.333%;top:48px;width:30px;height:30px;translate:-50% -50%;border-radius:9999px;background:#fff;
display:grid;place-items:center;box-shadow:0 0 0 1px rgba(10,10,10,.1),0 6px 12px -8px rgba(10,10,10,.35)}
.wb-cet-g svg{width:15px;height:15px}
/* sitenin küçük çıkartması (küçüklerde kenar ince, eğim ±10°'yi geçmez): cetvelde koşar */
.wb-cet-kos{position:absolute;left:var(--wb-p);top:48px;width:40px;height:40px;translate:-50% -50%;rotate:-6deg;padding:5px;border-radius:12px;
background:#fff;box-shadow:0 8px 14px -8px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.06)}
.wb-cet-kos img{display:block;width:100%;height:100%;object-fit:cover;border-radius:7px}
.wb-cet-alt{position:absolute;left:0;right:0;top:86px;display:flex;justify-content:space-between;font-size:12px;line-height:15px;color:rgba(10,10,10,.45)}
.wb-cet-alt em{font-style:normal}
@property --wb-p{syntax:"";inherits:true;initial-value:30%}
.wb-c-gov[data-gor] .wb-cet{animation:wb-kos 9s linear infinite}
.wb-c-gov[data-gor] .wb-cet-biz{animation:wb-et 9s linear infinite}
@keyframes wb-kos{0%{--wb-p:0%;animation-timing-function:cubic-bezier(.33,1,.68,1)}17%,90%{--wb-p:30%;animation-timing-function:ease-in-out}98%,100%{--wb-p:0%}}
@keyframes wb-et{0%,12%{opacity:0;translate:-50% 4px}19%,88%{opacity:1;translate:-50% 0}93%,100%{opacity:0;translate:-50% 4px}}
/* skorlar: çizgiyle değil hafif kutuyla */
.wb-skor{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wb-skor li{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:14px;background:#F5F4F1}
.wb-ski{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;color:#4895F7;
box-shadow:0 0 0 1px rgba(10,10,10,.06)}
.wb-ski svg{width:17px;height:17px}
.wb-skor b{display:block;font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.wb-skor em{display:block;font-style:normal;font-size:12px;color:rgba(10,10,10,.5)}
/* ── D · teslim: dört kalem hapı, alan adı kutusu, mühür ── */
/* Burak, 25 Eyl: kalemler aşağı iner, alan adı kutusuyla arası daralır. İçerik alta yaslı; aradaki boşluk yalnız mührün
süzüldüğü yer kadar (alan adı kutusunun üst payı) */
.wb-d-gov{position:relative;flex:1;min-height:0;margin-top:18px;display:flex;flex-direction:column;justify-content:flex-end;
container-type:inline-size}
.wb-kalem{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* hap: tam kontur, kurulunca mavi kontur ve açık mavi zemin; simge dolu mavi daire, köşesinde küçük onay */
.wb-kalem li{display:flex;align-items:center;gap:8px;min-width:0;height:40px;padding:0 12px 0 6px;border-radius:9999px;
border:1px solid color-mix(in srgb,#4895F7 60%,#fff);background:color-mix(in srgb,#4895F7 7%,#fff);
font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:border-color .35s,background .35s}
.wb-kli{position:relative;flex:none;width:28px;height:28px;border-radius:9999px;display:grid;place-items:center;background:#4895F7;color:#fff}
.wb-kli svg{width:16px;height:16px}
.wb-kli i{position:absolute;right:-4px;top:-4px;width:14px;height:14px;border-radius:9999px;display:grid;place-items:center;
background:#1F9D55;border:2px solid #fff}
.wb-kli i svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.wb-alan{position:relative;display:flex;align-items:center;gap:11px;height:58px;margin-top:82px;padding:0 14px 0 12px;border-radius:16px;
background:#F5F4F1}
.wb-ali{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;color:#4895F7;
box-shadow:0 0 0 1px rgba(10,10,10,.06)}
.wb-ali svg{width:18px;height:18px}
.wb-alan b{font-size:16.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
/* damga: coral mürekkep, çift kenarlı lastik mühür izi; hafif eğik */
.wb-damga{position:absolute;right:14px;top:50%;translate:0 -50%;rotate:-8deg;padding:3px 10px 4px;border-radius:9px;
border:2px solid #FF5E4A;box-shadow:inset 0 0 0 2px #F5F4F1,inset 0 0 0 3.2px color-mix(in srgb,#FF5E4A 70%,transparent);
color:#FF5E4A;font-size:14.5px;font-weight:700;letter-spacing:.01em;line-height:1.2;white-space:nowrap}
/* mühür: anasayfanın mavi nesnesi, beyaz çıkartma kenarıyla; damganın hemen üstünde, yakından süzülür (Burak, 25 Eyl: eskisi
18px yukarıdaydı). Basınca indiği yer aynı; iniş yolu 40px'ten 22px'e kısaldı */
.wb-muhur{position:absolute;z-index:3;right:22px;bottom:52px;width:58px;height:auto;rotate:12deg;transform-origin:50% 100%;pointer-events:none;
filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
drop-shadow(0 8px 8px rgba(10,40,90,.16))}
/* 10 sn'lik tur: kalemler sırayla kurulur (KALEM_CSS), mühür iner, damga basılır, bekler; hepsi birlikte söner, baştan */
.wb-d-gov[data-gor] .wb-muhur{animation:wb-bas 10s cubic-bezier(.22,1,.36,1) infinite}
.wb-d-gov[data-gor] .wb-damga{animation:wb-damga 10s ease-out infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(1){animation:wb-kalem0 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(1) .wb-kli{animation:wb-kli0 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(1) .wb-kli i{animation:wb-kon0 10s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes wb-kalem0{0%,4%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}
8%,88%{border-color:color-mix(in srgb,#4895F7 60%,#fff);background:color-mix(in srgb,#4895F7 7%,#fff);color:#0A0A0A}
92%,100%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}}
@keyframes wb-kli0{0%,4%{background:#EFEDE9;color:rgba(10,10,10,.4)}8%,88%{background:#4895F7;color:#fff}
92%,100%{background:#EFEDE9;color:rgba(10,10,10,.4)}}
@keyframes wb-kon0{0%,5%{scale:0}9%,88%{scale:1}91%,100%{scale:0}}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(2){animation:wb-kalem1 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(2) .wb-kli{animation:wb-kli1 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(2) .wb-kli i{animation:wb-kon1 10s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes wb-kalem1{0%,9.5%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}
13.5%,88%{border-color:color-mix(in srgb,#4895F7 60%,#fff);background:color-mix(in srgb,#4895F7 7%,#fff);color:#0A0A0A}
92%,100%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}}
@keyframes wb-kli1{0%,9.5%{background:#EFEDE9;color:rgba(10,10,10,.4)}13.5%,88%{background:#4895F7;color:#fff}
92%,100%{background:#EFEDE9;color:rgba(10,10,10,.4)}}
@keyframes wb-kon1{0%,10.5%{scale:0}14.5%,88%{scale:1}91%,100%{scale:0}}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(3){animation:wb-kalem2 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(3) .wb-kli{animation:wb-kli2 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(3) .wb-kli i{animation:wb-kon2 10s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes wb-kalem2{0%,15%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}
19%,88%{border-color:color-mix(in srgb,#4895F7 60%,#fff);background:color-mix(in srgb,#4895F7 7%,#fff);color:#0A0A0A}
92%,100%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}}
@keyframes wb-kli2{0%,15%{background:#EFEDE9;color:rgba(10,10,10,.4)}19%,88%{background:#4895F7;color:#fff}
92%,100%{background:#EFEDE9;color:rgba(10,10,10,.4)}}
@keyframes wb-kon2{0%,16%{scale:0}20%,88%{scale:1}91%,100%{scale:0}}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(4){animation:wb-kalem3 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(4) .wb-kli{animation:wb-kli3 10s ease infinite}
.wb-d-gov[data-gor] .wb-kalem li:nth-child(4) .wb-kli i{animation:wb-kon3 10s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes wb-kalem3{0%,20.5%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}
24.5%,88%{border-color:color-mix(in srgb,#4895F7 60%,#fff);background:color-mix(in srgb,#4895F7 7%,#fff);color:#0A0A0A}
92%,100%{border-color:rgba(10,10,10,.14);background:#fff;color:rgba(10,10,10,.45)}}
@keyframes wb-kli3{0%,20.5%{background:#EFEDE9;color:rgba(10,10,10,.4)}24.5%,88%{background:#4895F7;color:#fff}
92%,100%{background:#EFEDE9;color:rgba(10,10,10,.4)}}
@keyframes wb-kon3{0%,21.5%{scale:0}25.5%,88%{scale:1}91%,100%{scale:0}}
@keyframes wb-bas{0%,30%{translate:0 0;rotate:12deg}36%{translate:-4px 22px;rotate:0deg}38%{translate:-4px 26px;rotate:0deg;scale:1.02 .96}
41%{translate:-4px 22px;rotate:0deg;scale:1}50%,100%{translate:0 0;rotate:12deg}}
@keyframes wb-damga{0%,37%{opacity:0;scale:1.35}39%{opacity:1;scale:.96}42%,88%{opacity:1;scale:1}92%,100%{opacity:0;scale:1}}
@media(max-width:1000px){
.wb-a,.wb-b{grid-column:span 12}
.wb-c,.wb-d{grid-column:span 6}
/* tablette pano geniş ve kısa: çıkartma panonun boyuna göre küçülür, kırılımlar yanında */
.wb-b{grid-row:auto;height:540px}
.wb-b-gov{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:stretch}
.wb-blist{grid-template-columns:minmax(0,1fr);align-content:center}
.wb-bt{flex-direction:row;align-items:center;gap:10px;padding:14px 16px}
.wb-bt .wb-bti{margin:0}
.wb-bt em{margin-left:auto}
}
@media(max-width:799px){
.wb-c,.wb-d{grid-column:span 12}
}
/* telefon · sıkı yığın (lab/bento-mobil B): yönetim ve ekranlar tam genişlik ama kısa, hız ve teslim yan yana iki küçük kutu */
@media(max-width:640px){
.wb-sar{padding:0 20px}
.wb-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wb-a,.wb-b,.wb-c,.wb-d{height:auto}
.wb-a,.wb-b{grid-column:1 / -1;padding:20px 18px 18px;border-radius:22px}
.wb-c,.wb-d{grid-column:auto;padding:16px 14px 14px;border-radius:20px}
.wb-km{font-size:14.5px}
.wb-c .wb-kb,.wb-d .wb-kb{font-size:18px}
.wb-d .wb-km{margin-top:4px;font-size:13.5px}
/* A · site kısa ve tam genişlik; istek çıkartması hemen altında tek satır: seçili alanın simgesi, yazılan istek ve Enter.
Ok ve durum satırı yok. Sitedeki yazılar metin sütununun enine göre (kap birimi) küçülür */
.wb-a-alan{flex:none;display:flex;flex-direction:column;gap:0;margin-top:14px}
.wb-site{height:200px;padding:9px}
.wb-sgov{gap:11px;margin-top:9px}
.wb-smet{gap:9px}
.wb-sblog{min-height:44px;padding:6px 8px 6px 7px;gap:7px}
.wb-sbi{width:24px;height:24px;border-radius:8px}
.wb-sbm em{font-size:11px}
.wb-surl{max-width:none}
.wb-ok{display:none}
.wb-a-sag{justify-content:flex-end;margin-top:10px;padding:0 4px 4px 0}
.wb-pan{width:min(100%,292px);display:flex;align-items:center;gap:8px;padding:7px;border-radius:18px;rotate:1.2deg}
.wb-palan{flex:1;min-width:0;height:60px;border-radius:12px}
.wb-pp{flex-direction:row;align-items:center;gap:7px;padding:7px}
.wb-pet{flex:none;width:28px;height:28px;padding:0;gap:0;justify-content:center;font-size:0}
.wb-pet svg{width:14px;height:14px}
.wb-pin{align-self:stretch;padding:5px 9px;font-size:13px;line-height:1.25;border-radius:9px}
.wb-pgor{align-self:stretch;border-radius:9px}
.wb-pbar{flex:none;padding:0 1px 0 0}
.wb-pm{display:none}
/* B · pano kısa; üç ekranın çıkartması üst üste, sıradaki belirir (en/boy ve blok geçişi yerine opacity + transform).
Kırılımlar tek sıra: simge ve ad; genişliği çıkartmanın ölçüsü söylüyor, listede ekran okuyucu için duruyor */
.wb-b-gov{display:flex;margin-top:14px;gap:12px}
.wb-pano{flex:none;height:206px;gap:12px;padding-top:22px}
.wb-cik{--s:min(62cqw,37cqh)}
.wb-yigin{display:grid;place-items:center}
.wb-yigin>.wb-cik{grid-area:1 / 1;opacity:0;transform:scale(.92);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.wb-yigin>.wb-cik[data-on]{opacity:1;transform:none}
.wb-yigin .wb-ekr,.wb-yigin .wb-eb{transition:none}
.wb-yigin .wb-olcu em{animation:none}
.wb-balon{padding:6px 10px;font-size:13px}
.wb-blist{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wb-bt{position:relative;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px}
.wb-bt .wb-bti{margin:0}
.wb-bt b{font-size:12.5px}
.wb-bt em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* C · hız küçük kutuda: rakam, başlık, cetvel ve iki skor alt alta; "Siteniz" hapı yok (rakam söylüyor) */
.wb-hsay{font-size:30px}
.wb-hbr{font-size:17px}
.wb-hkb{margin-top:8px}
.wb-c-gov{margin-top:10px;gap:10px;justify-content:flex-end}
.wb-cet{height:70px;margin:0 6px}
.wb-cet-biz{display:none}
.wb-cet-ge{height:22px;gap:4px;padding:0 8px;font-size:11px}
.wb-cet-dol,.wb-cet-y1,.wb-cet-y2{top:36px;height:6px}
.wb-cet-dol{width:max(0px,calc(var(--wb-p) - 19px))}
.wb-cet-y1{left:calc(var(--wb-p) + 19px);right:calc(16.667% + 16px)}
.wb-cet-y2{left:calc(83.333% + 16px)}
.wb-cet-g{top:39px;width:24px;height:24px}
.wb-cet-g svg{width:12px;height:12px}
.wb-cet-kos{top:39px;width:30px;height:30px;padding:4px;border-radius:9px}
.wb-cet-kos img{border-radius:5px}
.wb-cet-alt{top:55px;font-size:11px}
.wb-skor{grid-template-columns:minmax(0,1fr);gap:5px}
.wb-skor li{padding:5px 9px;border-radius:10px}
.wb-ski{display:none}
.wb-skor li>span:last-child{display:flex;align-items:baseline;gap:5px}
.wb-skor b{font-size:15px}
.wb-skor em{font-size:11.5px}
/* D · teslim küçük kutuda: dört kalem yalnız simge (adları ekran okuyucuda), alan adı kutusu iki satır: üstte damga, altta
alan adı. Mühür damganın üstünde süzülür, basınca ona iner */
.wb-d-gov{margin-top:12px;gap:0}
.wb-kalem{display:flex;justify-content:space-between;gap:4px}
.wb-kalem li{width:30px;height:30px;padding:0;gap:0;justify-content:center;font-size:0}
.wb-kli{width:24px;height:24px}
.wb-kli svg{width:14px;height:14px}
.wb-kli i{right:-5px;top:-5px;width:13px;height:13px}
.wb-alan{height:66px;margin-top:54px;padding:0 10px 11px;align-items:flex-end;gap:0}
.wb-ali{display:none}
.wb-alan b{font-size:14.5px}
.wb-damga{top:8px;right:8px;translate:none;padding:2px 8px 3px;font-size:13px}
.wb-muhur{right:22px;bottom:68px;width:38px}
}
/* dar kartlar (1001-1100 px arası masaüstü): kap sorguları, temel kuralların ardından gelsin diye en sonda. Telefonda küçük
kutuların kendi kuralı var (yukarıda), bunlar yalnız 641 px ve üstünde */
@media(min-width:641px){
@container (max-width:290px){
.wb-ski{display:none}
.wb-skor li{padding:10px 12px}
}
@container (max-width:300px){
.wb-kalem{display:flex;flex-wrap:wrap;gap:7px}
.wb-kalem li{flex:none;height:36px;padding:0 11px 0 5px;gap:7px;font-size:12.5px}
.wb-kli{width:26px;height:26px}
.wb-alan{gap:9px;padding:0 10px}
.wb-alan b{font-size:15px}
.wb-ali{width:30px;height:30px;border-radius:10px}
.wb-damga{right:9px;font-size:13px;padding:2px 8px 3px}
}
}
@media(prefers-reduced-motion:reduce){
.wb *{animation:none!important;transition:none!important}
}
/* B'deki çıkartmanın ölçü ve işaret yeri yumuşak geçsin diye kayıtlı değişkenler (adlar bu bentoya özel) */
@property --mb-w{syntax:"";inherits:true;initial-value:1}
@property --mb-h{syntax:"";inherits:true;initial-value:1}
@property --mb-mx{syntax:"";inherits:true;initial-value:.5}
@property --mb-my{syntax:"";inherits:true;initial-value:.5}
@property --mb-ms{syntax:"";inherits:true;initial-value:.25}
@property --mb-e{syntax:"";inherits:true;initial-value:0deg}
.mb{background:#FCFBFA;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(64px,7vw,104px) 0;-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.mb{padding-top:56px;padding-bottom:56px}}
.mb *{box-sizing:border-box}
.mb-sar{max-width:1200px;margin:0 auto;padding:0 24px}
/* TASARIM-KURALLARI §1: açıklama başlığın altında (canlıda sağındaydı), araları 14px, en çok 520px, dengeli kırılır */
.mb-ust{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,3.4vw,44px)}
.mb-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.mb-nok{color:#4895F7}
.mb-giris{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.mb-izgara{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.mb-k{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:26px;padding:26px;background:#fff;
border:1px solid rgba(10,10,10,.09);overflow:hidden}
.mb-k-a{grid-column:span 8;height:380px}
.mb-k-b{grid-column:span 4;grid-row:span 2;height:774px}
.mb-k-c{grid-column:span 4;height:380px}
.mb-k-d{grid-column:span 4;height:380px}
.mb-kb{position:relative;z-index:2;margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.mb-km{position:relative;z-index:2;margin:6px 0 0;font-size:15px;line-height:1.5;color:rgba(10,10,10,.58);text-wrap:balance}
/* hap: çevresi tam konturlu, zemini açık; sırası gelen mavi (sol kenar çizgisi yok) */
.mb-hap,.mb-tag em{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:9999px;
border:1px solid rgba(10,10,10,.13);background:#F6F5F3;font-style:normal;font-size:13px;font-weight:500;line-height:1;
color:rgba(10,10,10,.62);white-space:nowrap;transition:background .35s,border-color .35s,color .35s}
.mb-hap[data-on]{border-color:#4895F7;background:color-mix(in srgb,#4895F7 10%,#fff);color:color-mix(in srgb,#4895F7 58%,#0A0A0A)}
/* çıkartma (§5): beyaz kenar, eğik, hafif gölge; üstüne gelince düzelir ve 4px kalkar */
.mb-foto,.mb-kitap,.mb-syfk{background:#fff;box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.06);
transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
.mb-foto:hover,.mb-kitap:hover,.mb-syfk:hover{rotate:0deg;translate:0 -4px}
/* ── A · üç durak: adaylar · ok · fotoğraf · ok · kılavuz; altta haplar. Ölçüler alanın boyundan (cqh) gelir ── */
.mb-a{position:relative;flex:1;min-height:0;margin-top:16px;container-type:size;display:grid;
grid-template-columns:auto minmax(44px,1fr) auto minmax(44px,1fr) auto;grid-template-rows:minmax(0,1fr) 28px;
row-gap:12px;align-items:center;justify-items:center;--v:calc(100cqh - 50px)}
.mb-adaylar{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:12px}
.mb-aday{position:relative;display:grid;place-items:center;width:calc((var(--v) - 24px) / 3);aspect-ratio:1;border-radius:16px;
background:#fff;color:rgba(10,10,10,.5);rotate:var(--e);box-shadow:0 0 0 1px rgba(10,10,10,.1),0 12px 22px -16px rgba(10,10,10,.4);
transition:rotate .5s cubic-bezier(.22,1,.36,1),scale .5s cubic-bezier(.22,1,.36,1),box-shadow .35s,color .35s,opacity .45s}
.mb-aday[data-t="0"]{--e:-4deg}
.mb-aday[data-t="1"]{--e:3deg}
.mb-aday[data-t="2"]{--e:-2.5deg}
.mb-aday svg{width:46%;height:46%;display:block}
.mb-aday[data-sec]{rotate:0deg;scale:1.06;color:#F2604C;box-shadow:0 0 0 2px #4895F7,0 14px 26px -16px rgba(10,40,90,.45)}
.mb-aday[data-sonuk]{opacity:.4}
.mb-tik{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:9999px;background:#4895F7;display:grid;place-items:center;
box-shadow:0 0 0 2.5px #fff;opacity:0;scale:.4;transition:opacity .25s,scale .45s cubic-bezier(.34,1.56,.64,1)}
.mb-tik svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.mb-aday[data-sec] .mb-tik{opacity:1;scale:1}
/* ok: kendi sütununu kaplar, iki yanında 14px boşluk; hiçbir öğenin altından geçmez */
.mb-ok{grid-row:1;justify-self:stretch;align-self:center;display:block;height:18px;margin:0 14px;min-width:0}
.mb-ok svg{display:block;overflow:visible}
.mb-okg{stroke:rgba(10,10,10,.3);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.mb-okd{stroke:#4895F7;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100 120;stroke-dashoffset:100;
transition:stroke-dashoffset .75s cubic-bezier(.65,0,.35,1)}
.mb-ok[data-dolu] .mb-okd{stroke-dashoffset:0}
.mb-oku{fill:none;stroke:rgba(10,10,10,.45);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.mb-ok[data-dolu] .mb-oku{stroke:#4895F7;transition-delay:.55s}
.mb-okn{fill:#fff;stroke:rgba(10,10,10,.45);stroke-width:2;transition:stroke .3s}
.mb-ok[data-dolu] .mb-okn{stroke:#4895F7}
/* uygulama çıkartması: 7px beyaz kenar, 4:5 (mockup bu ölçüde, bu kırpımla görünür). İçinde Burak'ın mockup'ı ya da sade
yer tutucu (YER TUTUCU: üretilecek görsel) */
.mb-foto{grid-column:3;grid-row:1;position:relative;display:block;padding:7px;border-radius:20px;rotate:-2deg}
.mb-fic{position:relative;display:block;height:calc(var(--v) - 14px);aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#EFEDEA}
.mb-fic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* işaret: fotoğrafın üstünde ayrı katman, düz renk (fotoğrafa efekt yok). "Uygulama" sırası gelince yüzeye basılır: biraz
büyükten iner, oturur; tur başında söner */
.mb-fis{position:absolute;display:block;aspect-ratio:1;translate:-50% -50%;rotate:var(--mb-fe,0deg);opacity:0;scale:1.3;
transform:perspective(600px) rotateX(var(--mb-fx,0deg)) rotateY(var(--mb-fy,0deg));transition:opacity .25s,scale .25s}
.mb-fis svg{width:100%;height:100%;display:block}
.mb-foto[data-on] .mb-fis{opacity:1;scale:1;transition:opacity .12s,scale .5s cubic-bezier(.34,1.56,.64,1)}
/* yer tutucu: nötr zemin, ortada ince görsel simgesi; efekt yok */
.mb-yer{position:absolute;inset:0;display:grid;place-items:center;color:rgba(10,10,10,.24)}
.mb-yer svg{width:24%;height:auto;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* kılavuz kitapçığı: örnek markanın kırmızısı, kapakta işaret ve ad */
.mb-kitap{grid-column:5;grid-row:1;position:relative;display:block;padding:7px;border-radius:20px;rotate:2.5deg}
/* sırtta yumuşak gölge (çizgi değil): kapak kitap gibi okunur */
.mb-kapak{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:calc((var(--v) - 14px) * .84);
aspect-ratio:3/4;padding:14px 13px 13px 17px;border-radius:13px;color:#fff;overflow:hidden;
background:linear-gradient(90deg,rgba(10,10,10,.16),rgba(10,10,10,0) 11%),#F2604C}
.mb-kis{display:block;width:42%;aspect-ratio:1}
.mb-kis svg{width:100%;height:100%;display:block}
.mb-kis .mb-ih{stroke-dasharray:100 120;stroke-dashoffset:100;transition:stroke-dashoffset .3s}
.mb-kis .mb-in{transform-box:fill-box;transform-origin:center;scale:0;transition:scale .2s}
.mb-kitap[data-on] .mb-kis .mb-ih{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.22,1,.36,1)}
.mb-kitap[data-on] .mb-kis .mb-in{scale:1;transition:scale .45s .6s cubic-bezier(.34,1.56,.64,1)}
.mb-kapak b{font-size:15px;font-weight:600;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.mb-hap{grid-row:2}
.mb-hap[data-i="0"]{grid-column:1}
.mb-hap[data-i="1"]{grid-column:3}
.mb-hap[data-i="2"]{grid-column:5}
/* ── B · tek çıkartma dört yüzeye dönüşür; mühür her birine aynı işareti basar ── */
.mb-b{flex:1;min-height:0;margin-top:18px;display:flex;flex-direction:column;gap:14px}
/* pano bir kap: çıkartma ve mühür ölçüsünü panonun eni ve boyundan (cqw, cqh) alır. Nokta dokusu sosyal bentodaki gibi */
.mb-pano{position:relative;flex:1;min-height:0;border-radius:18px;container-type:size;
background:radial-gradient(rgba(10,10,10,.09) 1px,transparent 1.2px) 0 0/18px 18px;
transition:--mb-w .75s cubic-bezier(.22,1,.36,1),--mb-h .75s cubic-bezier(.22,1,.36,1),--mb-e .75s cubic-bezier(.22,1,.36,1),--mb-mx .75s cubic-bezier(.22,1,.36,1),--mb-my .75s cubic-bezier(.22,1,.36,1),--mb-ms .75s cubic-bezier(.22,1,.36,1)}
.mb-yz,.mb-muhur{--s:min(60cqw,43cqh);--mw:min(31cqw,24cqh);--yc:63cqh}
.mb-yz{position:absolute;left:50%;top:var(--yc);translate:-50% -50%;display:block;padding:7px;border-radius:20px;background:#fff;rotate:var(--mb-e);
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);transition:scale .25s}
.mb-yzg{position:relative;display:block;width:calc(var(--s) * var(--mb-w));height:calc(var(--s) * var(--mb-h));border-radius:14px;overflow:hidden}
.mb-ys{position:absolute;inset:0;display:block;opacity:0}
.mb-ys[data-once]{z-index:0;opacity:1}
.mb-ys[data-once]>*{opacity:0;transition:opacity .15s}
.mb-ys[data-on]{z-index:1;opacity:1;transition:opacity .45s .1s}
.mb-ys b{position:absolute;white-space:nowrap;font-weight:600;letter-spacing:-.02em;line-height:1}
/* kartvizit: kâğıt, işaret ortada, ad altında */
.mb-ys-kartvizit{background:#FBF6EF;box-shadow:inset 0 0 0 1px rgba(10,10,10,.05)}
.mb-ys-kartvizit b{left:50%;top:74%;translate:-50% -50%;font-size:calc(var(--s) * .085);color:#0A0A0A}
/* profil: kapak bandı, yuvarlak profil resmi, ad ve gönderi ızgarası */
.mb-ys-profil{background:#fff}
.mb-pkap{position:absolute;left:0;right:0;top:0;height:25%;background:#E8A33D}
.mb-pav{position:absolute;left:50%;top:30%;width:calc(var(--s) * .3);aspect-ratio:1;translate:-50% -50%;border-radius:9999px;
background:#F2604C;box-shadow:0 0 0 3px #fff}
.mb-ys-profil b{left:50%;top:49%;translate:-50% -50%;font-size:calc(var(--s) * .072);color:#0A0A0A}
.mb-pgr{position:absolute;left:9%;right:9%;top:59%;bottom:7%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3px}
.mb-pgr i{display:block;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(10,10,10,.06)}
/* tabela: yeşil pano, işaret solda, ad sağında, köşelerde vida */
.mb-ys-tabela{background:#2F6F5E}
.mb-ys-tabela b{left:45%;top:50%;translate:0 -50%;font-size:calc(var(--s) * .105);color:#FCFBFA}
.mb-vida{position:absolute;width:5px;height:5px;border-radius:9999px;background:rgba(252,251,250,.4)}
.mb-vida[data-v="0"]{left:7px;top:7px}
.mb-vida[data-v="1"]{right:7px;top:7px}
.mb-vida[data-v="2"]{left:7px;bottom:7px}
.mb-vida[data-v="3"]{right:7px;bottom:7px}
/* ambalaj: amber kutu, üstte kapak bandı, ortada krem etiket */
.mb-ys-ambalaj{background:#E8A33D}
.mb-akap{position:absolute;left:0;right:0;top:0;height:9%;background:color-mix(in srgb,#E8A33D 82%,#0A0A0A)}
.mb-aet{position:absolute;left:15%;right:15%;top:22%;bottom:24%;border-radius:12px;background:#FCFBFA}
.mb-ys-ambalaj b{left:50%;top:62%;translate:-50% -50%;font-size:calc(var(--s) * .075);color:#0A0A0A}
/* işaret: yüzeyin üstünde ayrı katman; mühür basınca belirir */
.mb-yis{position:absolute;z-index:2;left:calc(var(--mb-mx) * 100%);top:calc(var(--mb-my) * 100%);width:calc(var(--s) * var(--mb-ms));aspect-ratio:1;
translate:-50% -50%;display:block;opacity:0;scale:.55;transition:opacity .18s,scale .2s}
.mb-yis svg{width:100%;height:100%;display:block}
.mb-pano[data-faz="2"] .mb-yis,.mb-pano[data-faz="3"] .mb-yis{opacity:1;scale:1;transition:opacity .1s,scale .45s cubic-bezier(.34,1.56,.64,1)}
.mb-mur{position:absolute;z-index:1;left:calc(var(--mb-mx) * 100%);top:calc(var(--mb-my) * 100%);width:calc(var(--s) * var(--mb-ms) * 1.7);
aspect-ratio:1;translate:-50% -50%;border-radius:9999px;border:2px solid currentColor;opacity:0;pointer-events:none}
.mb-pano[data-faz="2"] .mb-mur{animation:mb-murek .7s ease-out both}
@keyframes mb-murek{from{opacity:.55;scale:.55}to{opacity:0;scale:1.15}}
.mb-pano[data-faz="2"] .mb-yz{scale:.985}
/* mühür: elle çizilmiş mavi nesne, çıkartma kenarlı. Yukarıda eğik bekler; işaretin yerine iner (tabanının ortası işaretin
ortasına), basar, kalkar. Yatayda işaretin yerini izler */
.mb-muhur{position:absolute;z-index:3;top:3.5cqh;left:calc(50% + (var(--mb-mx) - .5) * var(--s) * var(--mb-w) - var(--mw) / 2);
width:var(--mw);height:auto;display:block;transform-origin:50% 86%;rotate:-9deg;translate:0 0;pointer-events:none;
filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff)
drop-shadow(0 10px 10px rgba(10,40,90,.16));
transition:translate .55s cubic-bezier(.22,1,.36,1),rotate .55s cubic-bezier(.22,1,.36,1)}
.mb-pano[data-faz="1"] .mb-muhur,.mb-pano[data-faz="2"] .mb-muhur{rotate:0deg;
translate:0 calc(var(--yc) - 3.5cqh + (var(--mb-my) - .5) * var(--s) * var(--mb-h) - .86 * 1.2552 * var(--mw));
transition:translate .28s cubic-bezier(.55,0,.85,.25),rotate .28s ease-in}
/* yüzey kutuları: sosyal bentodaki platform kutularının dili; sırası gelen mavi */
.mb-yl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mb-yt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:11px 12px 10px;border-radius:14px;background:#fff;
border:1px solid rgba(10,10,10,.09);transition:border-color .35s,background .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.mb-yt[data-on]{border-color:#4895F7;background:color-mix(in srgb,#4895F7 7%,#fff);transform:translateY(-2px)}
.mb-yti{width:22px;height:22px;display:grid;place-items:center;margin-bottom:3px;color:rgba(10,10,10,.5);transition:color .35s}
.mb-yti svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mb-yt[data-on] .mb-yti{color:#4895F7}
.mb-yt b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.mb-yt em{font-style:normal;font-size:12.5px;color:rgba(10,10,10,.5);white-space:nowrap}
/* ── C · kartela ve tek yazı ailesi ── */
.mb-c{flex:1;min-height:0;margin-top:20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;container-type:inline-size}
/* üç kart (--n), aralık --g, kartın iç payı --p */
.mb-kartela{--n:3;--g:10px;--p:5px;list-style:none;margin:0;padding:6px 0 0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
gap:var(--g)}
.mb-kartela li{display:flex;flex-direction:column;gap:6px;padding:var(--p) var(--p) 7px;border-radius:14px;background:#fff;rotate:var(--e);
box-shadow:0 14px 26px -18px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.07)}
/* renk alanı: boyu eskisiyle aynı (85px), eni kartın içi; dar kartta boy eni geçmez, kare kalır */
.mb-kartela i{display:block;height:min(85px,calc((100cqw - (var(--n) - 1) * var(--g)) / var(--n) - 2 * var(--p)));border-radius:10px;
background:var(--r);box-shadow:inset 0 0 0 1px rgba(10,10,10,.07)}
.mb-kartela span{display:block;font-size:12px;font-weight:500;line-height:1.2;color:rgba(10,10,10,.62);text-align:center;
font-variant-numeric:tabular-nums;white-space:nowrap}
.mb-c[data-gor] .mb-kartela li{animation:mb-kal 7s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--d)}
@keyframes mb-kal{0%,3%{rotate:var(--e);translate:0 0}8%,17%{rotate:0deg;translate:0 -6px}22%,100%{rotate:var(--e);translate:0 0}}
.mb-tipo{display:flex;align-items:center;gap:16px}
/* bölüm içi büyük yazı (§1): en çok clamp(32-44), her zaman h2'den küçük */
.mb-aa{flex:none;width:clamp(58px,5.6vw,78px);font-size:clamp(32px,3.2vw,44px);font-weight:600;line-height:1;letter-spacing:-.03em}
.mb-tsag{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.mb-tad{font-size:14px;line-height:1.4;color:rgba(10,10,10,.6);text-wrap:balance}
.mb-tag{display:flex;gap:6px}
.mb-tag em{height:26px;padding:0 10px}
.mb-tag em[data-t="b"]{border-color:#4895F7;background:color-mix(in srgb,#4895F7 10%,#fff);color:color-mix(in srgb,#4895F7 58%,#0A0A0A)}
.mb-c[data-gor] .mb-aa{animation:mb-agir 6s ease-in-out infinite}
.mb-c[data-gor] .mb-tag em[data-t="b"]{animation:mb-tb 6s steps(1,end) infinite}
.mb-c[data-gor] .mb-tag em[data-t="m"]{animation:mb-tb 6s steps(1,end) -3s infinite}
@keyframes mb-agir{0%,38%{font-weight:600}50%,88%{font-weight:400}100%{font-weight:600}}
@keyframes mb-aa-agir{0%,38%{opacity:1}50%,88%{opacity:0}100%{opacity:1}}
@keyframes mb-aa-ince{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
@keyframes mb-tb{0%,45%{border-color:#4895F7;background:color-mix(in srgb,#4895F7 10%,#fff);color:color-mix(in srgb,#4895F7 58%,#0A0A0A)}
45.01%,95%{border-color:rgba(10,10,10,.13);background:#F6F5F3;color:rgba(10,10,10,.62)}
95.01%,100%{border-color:#4895F7;background:color-mix(in srgb,#4895F7 10%,#fff);color:color-mix(in srgb,#4895F7 58%,#0A0A0A)}}
/* ── D · soru mesajı ve kılavuzun sayfası ── */
/* Burak, 25 Eyl: yerleşim toparlandı. Soru tek mesaj: solda soranın simgesi, balonda önce kim (küçük, soluk), sonra soru.
Cevap sayfası altta sağda, sabit ölçüde; dar kartta da üst üste binmez */
.mb-d{position:relative;flex:1;min-height:0;margin-top:16px;display:flex;flex-direction:column;justify-content:safe center;gap:22px}
.mb-soru{flex:none;display:flex;align-items:flex-end;gap:12px;min-width:0}
/* soranın simgesi: mavi arayüz rozeti */
.mb-kim{flex:none;width:34px;height:34px;border-radius:9999px;display:grid;place-items:center;
background:color-mix(in srgb,#4895F7 12%,#fff);color:#4895F7;animation:mb-pop .45s cubic-bezier(.34,1.56,.64,1) both}
.mb-kim svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* konuşma balonu (hero'daki balonun dili: beyaz, 2px mürekkep kenar); kuyruğu soldaki simgeye döner */
.mb-balon{position:relative;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 14px 10px;border-radius:16px;
background:#fff;border:2px solid #0A0A0A;transform-origin:0 100%;animation:mb-pop .45s .06s cubic-bezier(.34,1.56,.64,1) both}
.mb-balon::after{content:"";position:absolute;left:-7px;bottom:9px;width:11px;height:11px;background:#fff;rotate:45deg;
border-left:2px solid #0A0A0A;border-bottom:2px solid #0A0A0A}
.mb-balon em{font-style:normal;font-size:12.5px;font-weight:500;line-height:1.3;color:rgba(10,10,10,.5)}
.mb-balon b{font-size:15px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
@keyframes mb-pop{from{opacity:0;scale:.8;translate:0 6px}to{opacity:1;scale:1;translate:0 0}}
/* sayfa çıkartması: 7px beyaz kenar, eğik; iki sayfa üst üste, açık olan görünür */
.mb-syfk{position:relative;flex:none;align-self:flex-end;display:block;width:min(252px,86%);height:150px;margin:0 6px 4px 0;
padding:7px;border-radius:20px;rotate:2deg}
/* sayfa çevrilir: eskisi hızla çekilir, yenisi ardından gelir (üst üste binmez) */
.mb-syf{position:absolute;inset:7px;display:flex;flex-direction:column;gap:6px;padding:11px 13px 12px;border-radius:13px;background:#FAF8F5;
opacity:0;translate:-8px 0;transition:opacity .18s,translate .18s}
.mb-syf[data-on]{opacity:1;translate:0 0;transition:opacity .3s .2s,translate .5s .2s cubic-bezier(.22,1,.36,1)}
.mb-sust{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:rgba(10,10,10,.5)}
.mb-sust em{font-style:normal;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;border:1px solid #FF5E4A;
background:color-mix(in srgb,#FF5E4A 10%,#fff);font-size:12px;font-weight:600;color:color-mix(in srgb,#FF5E4A 80%,#0A0A0A)}
.mb-sbas{font-size:14px;font-weight:600;letter-spacing:-.01em}
.mb-sren,.mb-solc{margin-top:auto;display:flex;align-items:center;gap:10px}
.mb-sw{flex:none;width:36px;height:36px;border-radius:9px;background:#F2604C}
.mb-shex,.mb-spx{position:relative;font-size:15px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mb-sdiger{margin-left:auto;display:flex;gap:4px}
.mb-sdiger i{width:15px;height:15px;border-radius:4px;display:block}
.mb-sbyk{width:36px;height:36px;color:#F2604C;flex:none}
.mb-skck{width:16px;height:16px;color:#F2604C;flex:none}
.mb-sbyk svg,.mb-skck svg{width:100%;height:100%;display:block}
.mb-spx{margin-left:4px}
/* cevap halkası: coral, elle çizilmiş; cevap anında çizilir */
.mb-halka{position:absolute;left:-12px;top:-9px;width:calc(100% + 24px);height:calc(100% + 18px);overflow:visible;pointer-events:none}
.mb-halka path{fill:none;stroke:#FF5E4A;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:100 120;stroke-dashoffset:100;transition:stroke-dashoffset .2s}
.mb-syf[data-halka] .mb-halka path{stroke-dashoffset:0;transition:stroke-dashoffset .8s .45s cubic-bezier(.65,0,.35,1)}
@media(max-width:1180px){
.mb-kartela{--g:8px;--p:4px}
.mb-kartela li{padding-bottom:6px}
.mb-kartela span{font-size:11px}
}
@media(max-width:1000px){
.mb-k-a,.mb-k-b{grid-column:span 12}
.mb-k-c,.mb-k-d{grid-column:span 6}
/* tablette pano geniş ve kısa, yüzey kutuları yanında */
.mb-k-b{grid-row:auto;height:520px}
.mb-b{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:stretch}
.mb-yl{align-content:center}
}
/* telefon · sıkı yığın (lab/bento-mobil B): akış ve yüzeyler tam genişlik ama kısa, renk ve soru yan yana iki küçük kutu */
@media(max-width:640px){
.mb-sar{padding:0 20px}
.mb-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mb-k-a,.mb-k-b,.mb-k-c,.mb-k-d{height:auto}
.mb-k-a,.mb-k-b{grid-column:1 / -1;padding:20px 18px 18px;border-radius:22px}
.mb-k-c,.mb-k-d{grid-column:auto;padding:16px 14px 14px;border-radius:20px}
.mb-km{font-size:14.5px}
.mb-k-c .mb-kb,.mb-k-d .mb-kb{font-size:18px}
.mb-k-c .mb-km,.mb-k-d .mb-km{margin-top:4px;font-size:13.5px}
/* A · duraklar yan yana, küçük: adaylar 35px, fotoğraf 116px boy; oklar kısa ama düz ve görünür (en az 34px) */
.mb-a{flex:none;height:172px;margin-top:14px;grid-template-columns:auto minmax(30px,1fr) auto minmax(30px,1fr) auto;
grid-template-rows:minmax(0,1fr) 26px;row-gap:10px;--v:calc(100cqh - 46px)}
.mb-adaylar{gap:10px}
.mb-ok{margin:0 5px}
/* haplar sütununu şişirmez (eksi kenar payı), durağın altında ortalı durur */
.mb-hap{height:26px;padding:0 10px;font-size:12.5px;margin:0 -24px}
.mb-foto,.mb-kitap{padding:5px;border-radius:16px}
.mb-fic{height:calc(var(--v) - 10px);border-radius:12px}
.mb-kapak{height:calc((var(--v) - 10px) * .84);padding:10px 9px 9px 12px;border-radius:11px}
.mb-kapak b{font-size:12.5px}
.mb-aday{width:calc((var(--v) - 20px) / 3);border-radius:10px}
.mb-aday svg{width:50%;height:50%}
.mb-tik{width:18px;height:18px;right:-6px;top:-6px}
.mb-tik svg{width:11px;height:11px}
/* B · pano kısa. Dört yüzeyin çıkartması üst üste, sıradaki belirir (kayıtlı değişken geçişi yok); mühür yatayda translate
ile kayar, iner ve basar. Yüzeyler tek sıra: simge ve ad (türü ekran okuyucuda) */
.mb-b{display:flex;margin-top:14px;gap:12px}
.mb-pano{flex:none;height:204px;transition:none}
.mb-yigin{position:absolute;inset:0}
.mb-yigin>.mb-yz{opacity:0;scale:.92;transition:opacity .4s ease,scale .6s cubic-bezier(.22,1,.36,1)}
.mb-yigin>.mb-yz[data-on]{opacity:1;scale:1}
.mb-pano[data-faz="2"] .mb-yigin>.mb-yz:not([data-on]){scale:.92}
.mb-pano[data-faz="2"] .mb-yigin>.mb-yz[data-on]{scale:.985;transition:opacity .4s ease,scale .25s}
.mb-pano[data-faz="2"] .mb-yigin>.mb-yz:not([data-on]) .mb-mur{animation:none}
.mb-muhur{left:calc(50% - var(--mw) / 2);translate:calc((var(--mb-mx) - .5) * var(--s) * var(--mb-w)) 0}
.mb-pano[data-faz="1"] .mb-muhur,.mb-pano[data-faz="2"] .mb-muhur{translate:calc((var(--mb-mx) - .5) * var(--s) * var(--mb-w))
calc(var(--yc) - 3.5cqh + (var(--mb-my) - .5) * var(--s) * var(--mb-h) - .86 * 1.2552 * var(--mw))}
.mb-yl{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.mb-yt{position:relative;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px}
.mb-yti{margin:0}
.mb-yt b{font-size:12.5px}
.mb-yt em{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* C · kartela üç renk ve kodu; "Aa" solda, başlık ve metin hapları alt alta (tek aile cümlesi ekran okuyucuda) */
.mb-c{flex:1;margin-top:12px;gap:12px;justify-content:flex-end}
.mb-kartela{--g:6px;--p:3px;padding-top:4px}
.mb-kartela li{gap:4px;padding-bottom:5px;border-radius:11px}
.mb-kartela i{border-radius:8px}
.mb-kartela span{margin:0 calc(-1 * var(--p));font-size:11px;letter-spacing:-.02em}
.mb-tipo{gap:10px}
.mb-aa{width:46px;font-size:30px}
.mb-aa-tel{display:grid}
.mb-aa-tel i{grid-area:1 / 1;font-style:normal}
.mb-aa-tel i+i{font-weight:400;opacity:0}
.mb-c[data-gor] .mb-aa-tel{animation:none}
.mb-c[data-gor] .mb-aa-tel i{animation:mb-aa-agir 6s ease-in-out infinite}
.mb-c[data-gor] .mb-aa-tel i+i{animation-name:mb-aa-ince}
.mb-tad{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mb-tsag{gap:0}
.mb-tag{flex-direction:column;align-items:flex-start;gap:4px}
.mb-tag em{height:22px;padding:0 8px;font-size:12px}
/* D · soru balonu ve kılavuz sayfası küçük: sayfada kılavuzun adı ve öteki renkler yok */
.mb-d{flex:1;height:auto;margin-top:12px;gap:10px;justify-content:flex-end}
.mb-soru{gap:7px}
.mb-kim{width:26px;height:26px}
.mb-kim svg{width:14px;height:14px}
.mb-balon{padding:6px 9px 7px;border-radius:13px}
.mb-balon::after{left:-6px;bottom:8px;width:9px;height:9px}
.mb-balon em{font-size:11px}
.mb-balon b{font-size:13px;line-height:1.28}
.mb-syfk{width:100%;height:96px;margin:0;padding:5px;border-radius:16px;rotate:1.5deg}
.mb-syf{inset:5px;gap:3px;padding:8px 9px 9px;border-radius:11px}
.mb-sust span{display:none}
.mb-sust em{height:19px;padding:0 7px;font-size:11px}
.mb-sbas{font-size:12.5px}
.mb-sren,.mb-solc{gap:7px}
.mb-sw{width:24px;height:24px;border-radius:7px}
.mb-shex,.mb-spx{font-size:13px}
.mb-sdiger{display:none}
.mb-sbyk{width:26px;height:26px}
.mb-skck{width:13px;height:13px}
.mb-spx{margin-left:2px}
}
/* en dar telefonlarda (360 civarı) renk kodu küçük kartın beyaz kenarından taşmasın */
@media(max-width:370px){
.mb-kartela span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
.mb *{animation:none!important;transition:none!important}
}
.isb{--ara:14px;background:transparent;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(72px,8vw,112px) 0;
-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.isb{padding-top:56px;padding-bottom:56px}}
.isb *{box-sizing:border-box}
.isb-kap{max-width:1200px;margin:0 auto;padding:0 24px}
.isb-ust{margin-bottom:clamp(28px,3vw,40px)}
.isb-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.isb-giris{margin:14px 0 0;max-width:560px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.isb-giris b{font-weight:500;color:#0A0A0A}
/* samimi cümle bölünmesin: dar ekranda bütün olarak alt satıra iner */
.isb-nda{display:inline-block}
/* ── ızgara: telefonda 2x2 dört kart (Burak 25 Eyl: "mobilde işler aşırı yer kaplıyor; 4:5 bozulmasın"), tablette üç kart
tek sıra, masaüstünde 4 sütun ── */
.isb-izgara{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ara)}
.isb-izgara>li{min-width:0}
.isb-izgara>li[data-sira="4"]{display:none}
@media(min-width:641px){
.isb{--ara:20px}
.isb-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
.isb-izgara>li[data-sira="3"]{display:none}
}
@media(min-width:1024px){
.isb{--ara:24px}
.isb-izgara{grid-template-columns:repeat(4,minmax(0,1fr))}
.isb-izgara>li[data-sira="3"],.isb-izgara>li[data-sira="4"]{display:block}
.isb-buyuk{grid-column:1 / span 2;grid-row:1 / span 2}
/* büyük kart hücresini doldurur: alt kenarı küçük kartlarla bir */
.isb-buyuk>.ik-kart,.isb-buyuk .prk-a>.ik-kart{aspect-ratio:auto;height:100%}
/* platform ikonu büyük kartta da detay satırının ortasında */
.isb-buyuk .prk{--prk-sag:26px;--prk-alt:26px;--prk-boy:34px}
/* öne çıkan kart başlığı (TASARIM-KURALLARI §1: en çok clamp(26px,2.6vw,34px)) */
.isb-buyuk .ik-marka{font-size:clamp(26px,2.6vw,34px)}
.isb-buyuk .ik-detay{margin-top:6px;font-size:clamp(16px,1.35vw,19px)}
.isb-buyuk .ik-yazi{left:24px;right:24px;bottom:22px}
}
.isb-alt{margin-top:28px}
.isb-cocuk{margin-top:clamp(40px,4vw,56px)}
/* ── kart: dik çıkartma, 7px beyaz kenar ── */
.ik-kart{position:relative;display:block;margin:0;aspect-ratio:4/5;border:7px solid #fff;border-radius:22px;overflow:hidden;isolation:isolate;
background:#fff;color:#fff;box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);
transition:translate .5s cubic-bezier(.22,1,.36,1)}
.ik-kart img,.ik-kart video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .4s}
.ik-kart video{opacity:0}
.ik-kart[data-oynuyor="1"] video{opacity:1}
/* okunurluk degradesi: alttan, üst yarı temiz */
.ik-kart::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to bottom,rgba(10,10,10,0) 42%,rgba(10,10,10,.46) 68%,rgba(10,10,10,.82) 100%)}
.ik-oynat{position:absolute;z-index:2;top:9px;right:9px;width:34px;height:34px;border-radius:9999px;background:#fff;
display:grid;place-items:center;transition:opacity .3s}
/* film oynarken oynat işareti çekilir */
.ik-kart[data-oynuyor="1"] .ik-oynat{opacity:0}
.ik-oynat svg{width:11px;height:12px;margin-left:2px;fill:#0A0A0A}
.ik-hap{position:absolute;z-index:2;top:10px;left:10px;max-width:calc(100% - 70px);height:30px;padding:0 12px;border-radius:9999px;
background:#fff;color:#0A0A0A;font-size:13px;font-weight:500;line-height:30px;letter-spacing:0;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* film olmayan kartta sağ üstte oynat yok; hap o payı bırakmasın (dar kartta uzun tür adı kesilmesin) */
.isb li:not([data-film]) .ik-hap{max-width:calc(100% - 20px)}
.ik-hap i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:9999px;vertical-align:1px}
.ik-yazi{position:absolute;z-index:2;left:17px;right:17px;bottom:15px}
/* h3 ölçüsü (TASARIM-KURALLARI §1): marka adı kartın baskın yazısı */
.ik-marka{margin:0;font-size:clamp(22px,1.9vw,26px);font-weight:600;line-height:1.12;letter-spacing:-.02em;color:#fff}
.ik-detay{margin:5px 0 0;font-size:clamp(15px,1.2vw,17px);font-weight:600;line-height:1.3;letter-spacing:-.005em}
.ik-detay[data-renk="c"]{color:#FF5E4A}
.ik-detay[data-renk="m"]{color:#4895F7}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.isb li:hover>.ik-kart img{transform:scale(1.04)}
.isb li:hover>.ik-kart{translate:0 -4px}
}
@media(max-width:767px){.ik-yazi{left:15px;right:15px;bottom:13px}}
@media(max-width:640px){
.isb{--ara:12px}
/* 2x2'de platform ikonu küçük kartın detay satırında */
.isb .prk{--prk-sag:13px;--prk-alt:11px;--prk-boy:24px}
.isb .prk-yer svg{width:11px;height:11px}
.isb-kap{padding:0 20px}
/* 2x2'de küçük kart: kenar, köşe, hap, oynat ve yazılar kartın enine göre */
.ik-kart{border-width:5px;border-radius:18px}
.ik-hap{top:7px;left:7px;height:24px;padding:0 9px;font-size:11.5px;line-height:24px;max-width:calc(100% - 44px)}
.isb li:not([data-film]) .ik-hap{max-width:calc(100% - 14px)}
.ik-hap i{width:6px;height:6px;margin-right:5px}
.ik-oynat{top:7px;right:7px;width:26px;height:26px}
.ik-oynat svg{width:9px;height:10px}
.ik-yazi{left:11px;right:11px;bottom:10px}
.ik-marka{font-size:17px}
.ik-detay{margin-top:3px;font-size:13px;line-height:1.25}
.isb-giris{font-size:16px}
.isb-alt{margin-top:22px}
.isb-alt>.pb{height:44px;padding:0 19px;font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
.ik-kart,.ik-kart img,.ik-kart video,.ik-oynat{transition:none}
}
.prk{--prk-sag:19px;--prk-alt:18px;--prk-boy:30px;position:relative;height:100%;min-width:0}
.prk-a{position:relative;display:block;height:100%;border-radius:22px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.prk-a:focus-visible{outline:2.5px solid #4895F7;outline-offset:4px}
/* oynat işareti yalnız filmde; ötekinde hap sağa kadar uzayabilir */
.prk:not([data-film]) .ik-hap{max-width:calc(100% - 20px)}
/* süzülünce hap yok (Tümü'nde var) */
.prk[data-hapsiz] .ik-hap{display:none}
/* detay satırı sağdaki ikona çarpmasın */
.prk .ik-detay{padding-right:calc(var(--prk-boy) + 10px)}
/* ── platform ikonu: görselin sağ altında, detay satırının ortasında ── */
.prk-yer{position:absolute;z-index:3;right:var(--prk-sag);bottom:var(--prk-alt);display:grid;place-items:center;width:var(--prk-boy);
height:var(--prk-boy);border-radius:9999px;background:#fff;color:#0A0A0A;text-decoration:none;-webkit-tap-highlight-color:transparent;
box-shadow:0 10px 24px -12px rgba(10,10,10,.55);
transition:opacity .3s,transform .5s cubic-bezier(.22,1,.36,1),background-color .25s,color .25s}
.prk-yer svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* yazı: ikonun solunda beyaz hap, yalnız ikonun üstüne gelince ya da odakta */
.prk-yer-ad{position:absolute;right:calc(100% + 6px);top:50%;height:30px;margin-top:-15px;padding:0 12px;border-radius:9999px;background:#fff;
color:#0A0A0A;font-size:13px;font-weight:500;line-height:30px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateX(6px);
box-shadow:0 10px 24px -12px rgba(10,10,10,.55);transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.prk-yer:focus-visible{outline:2px solid #4895F7;outline-offset:3px}
.prk-yer:focus-visible .prk-yer-ad{opacity:1;transform:none}
/* fare: kartın üstüne gelince belirir ve kartla kalkar */
@media(hover:hover){
.prk-yer{opacity:0;transform:translateY(4px)}
.prk:hover .prk-yer,.prk-yer:focus-visible{opacity:1;transform:translateY(-4px)}
.prk-yer:hover{background:#FF5E4A;color:#fff}
.prk-yer:hover .prk-yer-ad{opacity:1;transform:none}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
.prk:hover .ik-kart{translate:0 -4px}
.prk:hover .ik-kart img{transform:scale(1.04)}
}
/* dokunmatik: hep görünür, sessiz */
@media(hover:none){
.prk{--prk-boy:28px}
.prk-yer{background:rgba(10,10,10,.3);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.prk-yer svg{width:12px;height:12px;stroke-width:2.2}
/* görünen ikon küçük, dokunma alanı 44px */
.prk-yer::before{content:"";position:absolute;inset:-8px;border-radius:9999px}
.prk-yer-ad{display:none}
}
@media(max-width:767px){.prk{--prk-sag:17px;--prk-alt:16px}}
@media(prefers-reduced-motion:reduce){.prk-yer,.prk-yer-ad{transition:none}}
.ykr{background:#FCFBFA;color:#0A0A0A;font-family:"Outfit",sans-serif;padding:clamp(72px,8vw,112px) 0;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.ykr{padding-top:56px;padding-bottom:56px}}
.ykr.tek{background:transparent}
.ykr *{box-sizing:border-box}
.ykr-ic{max-width:1200px;margin:0 auto;padding:0 24px}
.ykr-h2{margin:0 0 clamp(28px,3vw,40px);font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.ykr-h2 em{font-style:normal;color:#FF5E4A}
/* kart */
.ykr-kart{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:clamp(24px,2.8vw,36px);border-radius:22px;background:#fff;
box-shadow:inset 0 0 0 1px rgba(10,10,10,.09)}
.ykr-tirnak{display:block;flex:none;width:34px;height:27px;color:#4895F7}
.ykr-kart blockquote{margin:18px 0 0;font-size:clamp(18px,1.55vw,21px);font-weight:500;line-height:1.45;letter-spacing:-.012em;text-wrap:pretty}
.ykr-kart mark{color:inherit;background:linear-gradient(transparent 60%,rgba(72,149,247,.32) 0);padding:0 .06em}
/* dipte künye ve logo: kartın dibine yaslı, yan yana kartların künyesi aynı hizada */
.ykr-alt{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:26px}
.ykr-kunye{display:flex;align-items:center;gap:14px;min-width:0}
.ykr-foto{display:block;flex:none;width:52px;height:52px;border:4px solid #fff;border-radius:14px;overflow:hidden;rotate:var(--egim,0deg);
box-shadow:0 12px 24px -12px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.06);transition:rotate .5s cubic-bezier(.22,1,.36,1)}
.ykr-foto img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.ykr-kim{min-width:0}
.ykr-kim b{display:block;font-size:16px;font-weight:600;line-height:1.25}
.ykr-kim span{display:block;margin-top:2px;font-size:14.5px;line-height:1.35;color:rgba(10,10,10,.6)}
.ykr-logo{display:block;flex:none;width:auto;height:22px;max-width:130px;object-fit:contain}
@media(hover:hover){.ykr-kart:hover .ykr-foto{rotate:0deg}}
/* tek yorum (hizmet): kabın enince, söz daha iri */
.ykr-kart.genis blockquote{max-width:900px;font-size:clamp(19px,1.9vw,25px);line-height:1.42}
.ykr-kart.genis .ykr-logo{height:26px;max-width:150px}
/* kaydırak: kartlar tek hücrede; yer × (kart eni + ara) kadar kayar. Hücre eni: görünen kart sayısına (--v) göre */
.ykr-kirp{overflow:hidden;touch-action:pan-y pinch-zoom;border-radius:22px;outline:none}
.ykr-kirp:focus-visible{box-shadow:0 0 0 3px #FCFBFA,0 0 0 5px #4895F7}
.ykr-iz{--v:1;--ara:12px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:calc((100% - (var(--v) - 1) * var(--ara)) / var(--v))}
.ykr-iz>li{grid-area:1/1;display:flex;min-width:0;transform:translateX(var(--suruk,0px));transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* görünen yerler (0, 1) CSS'te; gizli yerlerin (-1, 2) kayması satır içi (bkz. Kaydirak: uçak katmanının ölçümü) */
.ykr-iz>li[data-yer="1"]{transform:translateX(calc(100% + var(--ara) + var(--suruk,0px)))}
.ykr-iz>li[data-atla],.ykr-iz.suruklu>li{transition:none}
.ykr-iz>li>.ykr-kart{flex:1}
.ykr-kumanda{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
/* çubuklar: her yoruma bir; görünenler dolu, soldakinin dolumu scaleX (yalnız transform) */
.ykr-cubuklar{display:flex;align-items:center;gap:4px}
.ykr-cubuklar button{appearance:none;border:0;background:none;cursor:pointer;display:block;width:30px;padding:12px 0}
/* dokunma alanı 44px yüksek (görünüm aynı; 28 Eyl mobil denetim: 28px'ti), yandakine taşmaz */
.ykr-cubuklar button{position:relative}
.ykr-cubuklar button::before{content:"";position:absolute;inset:-8px -2px}
.ykr-cubuklar button:focus-visible{outline:2px solid #4895F7;outline-offset:2px;border-radius:6px}
.ykr-cubuk{position:relative;display:block;height:4px;border-radius:2px;overflow:hidden;background:rgba(72,149,247,.22)}
.ykr-cubuklar button:hover .ykr-cubuk{background:rgba(72,149,247,.4)}
.ykr-tam,.ykr-dolum{position:absolute;inset:0;background:#4895F7;transform-origin:0 50%}
.ykr-dolum{transform:scaleX(0);animation:ykr-dol linear forwards}
@keyframes ykr-dol{to{transform:scaleX(1)}}
/* oklar: Buton.tsx dili (geri ikincil, ileri d3), yuvarlak */
.ykr-oklar{display:flex;gap:8px}
.ykr-ok.pb{width:48px;height:48px;padding:0;justify-content:center}
.ykr-ok-ikon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:translate .3s cubic-bezier(.22,1,.36,1)}
.ykr-ok.geri .ykr-ok-ikon{rotate:180deg}
@media(hover:hover){.ykr-ok:hover .ykr-ok-ikon{translate:3px 0}.ykr-ok.geri:hover .ykr-ok-ikon{translate:-3px 0}}
@media(min-width:900px){.ykr-iz{--v:2;--ara:16px}}
@media(max-width:640px){
.ykr-ic{padding:0 20px}
.ykr-kart{padding:20px 18px 18px;border-radius:20px}
.ykr-kirp{border-radius:20px}
.ykr-tirnak{width:26px;height:21px}
.ykr-kart blockquote,.ykr-kart.genis blockquote{margin-top:14px;font-size:16px;line-height:1.5}
.ykr-alt{padding-top:18px}
.ykr-kunye{gap:12px}
.ykr-foto{width:44px;height:44px;border-width:3px;border-radius:12px}
.ykr-foto img{border-radius:9px}
.ykr-kim b{font-size:15px}
.ykr-kim span{font-size:13.5px}
/* dar ekranda logo sağ üstte, tırnağın hizasında */
.ykr-logo,.ykr-kart.genis .ykr-logo{position:absolute;top:20px;right:18px;height:16px;max-width:88px;margin-top:2.5px}
.ykr-kumanda{margin-top:12px}
.ykr-ok.pb{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.ykr-iz>li,.ykr-foto,.ykr-ok-ikon{transition:none}}
.fk-et{font-size:15px;font-weight:500;line-height:1.3;color:rgba(10,10,10,.68);text-wrap:balance}
/* seçenek hapları */
.fk-haplar{display:flex;flex-wrap:wrap;gap:6px}
.fk-haplar button{appearance:none;border:0;cursor:pointer;height:44px;min-width:44px;padding:0 14px;border-radius:9999px;background:#fff;
box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.14);font:500 14px "Outfit",sans-serif;color:rgba(10,10,10,.72);white-space:nowrap;
transition:box-shadow .2s,background-color .2s,color .2s}
.fk-haplar button:hover{box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.34);color:#0A0A0A}
.fk-haplar button[aria-pressed="true"]{background:rgba(72,149,247,.1);box-shadow:inset 0 0 0 1.5px #4895F7;color:#1F6FD6}
.fk-haplar button:focus-visible{outline:2px solid #4895F7;outline-offset:2px}
/* adım sayacı: tek hap, içinde − değer + */
.fk-adim{display:inline-flex;align-self:flex-start;align-items:center;height:52px;padding:0 5px;border-radius:9999px;
box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.14);background:#fff}
.fk-adim button{appearance:none;border:0;background:none;width:42px;height:42px;border-radius:9999px;cursor:pointer;display:grid;place-items:center;
color:#0A0A0A;transition:background-color .2s,opacity .2s}
.fk-adim button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fk-adim button:hover:not(:disabled){background:rgba(10,10,10,.05)}
.fk-adim button:disabled{opacity:.28;cursor:default}
.fk-adim button:focus-visible{outline:2px solid #4895F7;outline-offset:0}
.fk-adim output{min-width:34px;text-align:center;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;color:#0A0A0A}
/* seçim hapı ("Bizden olsun"): açılınca tik dolar; pakete dahilse kilitli ve açık */
.fk-sec{appearance:none;border:0;cursor:pointer;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 10px 0 20px;
border-radius:9999px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.14);font:500 15px "Outfit",sans-serif;color:rgba(10,10,10,.72);
white-space:nowrap;transition:box-shadow .2s,background-color .2s,color .2s}
.fk-sec:hover{box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.34);color:#0A0A0A}
.fk-sec[aria-pressed="true"]{background:rgba(72,149,247,.1);box-shadow:inset 0 0 0 1.5px #4895F7;color:#1F6FD6}
.fk-sec[aria-disabled="true"]{cursor:default;background:rgba(72,149,247,.06);box-shadow:inset 0 0 0 1.5px rgba(72,149,247,.4)}
.fk-sec:focus-visible{outline:2px solid #4895F7;outline-offset:2px}
.fk-tik{flex:none;width:32px;height:32px;border-radius:9999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18);
transition:background-color .25s,box-shadow .25s}
.fk-tik svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:scale(0);
transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.fk-sec[aria-pressed="true"] .fk-tik{background:#4895F7;box-shadow:none}
.fk-sec[aria-pressed="true"] .fk-tik svg{transform:scale(1)}
.fk-sec[aria-disabled="true"] .fk-tik{background:rgba(72,149,247,.55)}
@media(prefers-reduced-motion:reduce){.fk-haplar button,.fk-adim button,.fk-sec,.fk-tik,.fk-tik svg{transition:none}}
.fz{position:absolute;inset:0;font-family:"Outfit",sans-serif;color:#0A0A0A}
/* ana çıkartma: film, post, sayfa ve kimlik kartları */
.fz-kart{position:absolute;border:7px solid #fff;border-radius:20px;background:#fff;
box-shadow:0 22px 44px -26px rgba(10,10,10,.45),0 0 0 1px rgba(10,10,10,.05);
rotate:var(--egim,0deg);transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
.fz-kart:hover{rotate:0deg;translate:0 -4px}
.fz-ic{position:absolute;inset:0;border-radius:13px;overflow:hidden;background:#d9d4cc}
.fz-ic img{width:100%;height:100%;object-fit:cover;display:block}
.fz-ic::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 44%,rgba(10,10,10,.72))}
.fz-marka{position:absolute;z-index:1;left:12px;bottom:18px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;
transition:opacity .3s}
.fz-kart[data-yan="sag"] .fz-marka{left:auto;right:12px;flex-direction:row-reverse}
/* üstüne kâğıt ya da takvim binen kartın etiketi silinir: yarım kelime görünmez */
.fz-kart[data-ortu] .fz-marka{opacity:0}
.fz-oynat{width:28px;height:28px;border-radius:9999px;background:#fff;display:grid;place-items:center;flex:none}
.fz-oynat svg{width:10px;height:10px;margin-left:2px;fill:#0A0A0A}
.fz-kod{position:absolute;z-index:1;right:9px;top:9px;border-radius:8px;background:rgba(255,255,255,.92);color:#0A0A0A;
padding:3px 8px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fz-serit{position:absolute;z-index:1;left:12px;right:12px;bottom:8px;display:flex;gap:3px}
.fz-serit i{flex:1;height:4px;border-radius:9999px;background:rgba(255,255,255,.45);display:block;transform-origin:0 50%}
.fz-serit i:first-child{background:#FF5E4A}
/* küçük süs çıkartmaları */
.fz-suz{animation:fz-suz 7s ease-in-out infinite}
@keyframes fz-suz{0%,100%{translate:0 0}50%{translate:0 -10px}}
.fz-kagit{position:absolute;width:108px;height:136px;padding:12px 12px 0;box-sizing:border-box;background:#fff;border:1.5px solid #0A0A0A;
border-radius:10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 22px 44px -26px rgba(10,10,10,.45)}
.fz-kagit b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px;white-space:nowrap}
.fz-kagit i{display:block;height:4px;border-radius:9999px;background:rgba(10,10,10,.14)}
.fz-kagit i:nth-of-type(1){background:rgba(10,10,10,.42);width:84%}
.fz-kagit i:nth-of-type(3){width:72%}
.fz-kagit i:nth-of-type(5){width:56%}
/* senaryo kâğıdının dibinde küçük storyboard: üç kare, ilki coral */
.fz-kagit em{margin-top:auto;margin-bottom:12px;display:flex;gap:5px}
.fz-kagit em s{flex:1;aspect-ratio:4/3;border-radius:3px;border:1.5px solid #0A0A0A;text-decoration:none}
.fz-kagit em s:first-child{background:#FF5E4A;border-color:#FF5E4A}
.fz-takvim{position:absolute;width:122px;padding:11px;box-sizing:border-box;background:#fff;border:1.5px solid #0A0A0A;border-radius:12px;
box-shadow:0 22px 44px -26px rgba(10,10,10,.45)}
.fz-takvim b{display:block;font-size:12.5px;font-weight:600;margin-bottom:8px}
.fz-takvim span{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.fz-takvim span i{aspect-ratio:1;border-radius:3px;background:rgba(10,10,10,.08);display:block}
.fz-takvim span i.c{background:#FF5E4A}
.fz-takvim span i.m{background:#4895F7}
.fz-klaket{position:absolute;width:92px;border:5px solid #fff;border-radius:14px;box-shadow:0 22px 44px -26px rgba(10,10,10,.45)}
.fz-reels{position:absolute;width:58px;aspect-ratio:9/16;border:4px solid #fff;border-radius:12px;background:#fff;
box-shadow:0 16px 32px -18px rgba(10,10,10,.5)}
.fz-reels .fz-ic{border-radius:8px}
.fz-reels .fz-oynat{position:absolute;z-index:1;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px}
.fz-reels .fz-oynat svg{width:8px;height:8px;margin-left:1.5px}
.fz-hap{position:absolute;z-index:9;right:6px;top:2px;border-radius:9999px;background:#fff;color:#0A0A0A;padding:6px 12px;
font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 8px 20px -12px rgba(10,10,10,.4)}
/* ── web: sayfa kartı (tarayıcı çubuğu + sayfa iskeleti) ── */
.fz-sayfa{position:absolute;inset:0;border-radius:13px;overflow:hidden;background:#F5F3EF;display:flex;flex-direction:column}
.fz-cubuk{flex:none;display:flex;align-items:center;gap:3px;height:23px;padding:0 6px;background:#fff;border-bottom:1px solid rgba(10,10,10,.07)}
.fz-cubuk>i{width:5px;height:5px;border-radius:9999px;background:rgba(10,10,10,.16);flex:none}
.fz-cubuk>i:first-child{background:#FF5E4A}
/* sayfanın adı adres çubuğunda yazı olarak (görselin üstüne hap konmaz); ortalı: destede her kartın ortası açık kalır */
.fz-url{flex:1;min-width:0;margin-left:5px;height:15px;border-radius:9999px;background:rgba(10,10,10,.06);font-size:10.5px;font-weight:600;
line-height:15px;text-align:center;color:rgba(10,10,10,.62);white-space:nowrap;overflow:hidden}
.fz-kart[data-yan="sol"] .fz-url{text-align:left;padding-left:8px}
.fz-kart[data-yan="sag"] .fz-url{text-align:right;padding-right:8px}
.fz-dil{flex:none;display:flex;gap:2px;margin-left:5px;font-size:8.5px;font-weight:600;line-height:11px;color:rgba(10,10,10,.45)}
.fz-dil b{padding:0 4px;border-radius:9999px;background:#4895F7;color:#fff;font-weight:600}
.fz-govde{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:7px}
.fz-hero{position:relative;flex:none;height:46%;border-radius:7px;overflow:hidden;background:#cfd8e0}
.fz-hero img{width:100%;height:100%;object-fit:cover;display:block}
.fz-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.62),rgba(10,10,10,.05) 75%)}
.fz-hero span{position:absolute;z-index:1;left:8px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:4px;width:62%}
.fz-hero span i{display:block;height:5px;border-radius:9999px;background:rgba(255,255,255,.92)}
.fz-hero span i+i{width:70%;height:3.5px;background:rgba(255,255,255,.5)}
.fz-hero span em{display:block;width:30px;height:9px;margin-top:3px;border-radius:9999px;background:#FF5E4A}
.fz-satir{display:block;height:4px;border-radius:9999px;background:rgba(10,10,10,.13)}
.fz-satir.koyu{height:5px;width:58%;background:rgba(10,10,10,.42)}
.fz-kutular{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;flex:1;min-height:0}
.fz-kutular span{border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,10,10,.06);display:flex;flex-direction:column;
justify-content:space-between;gap:3px;padding:5px}
.fz-kutular span::before{content:"";width:7px;height:7px;border-radius:9999px;background:#4895F7}
.fz-kutular span:nth-child(2)::before{background:#FF5E4A}
.fz-kutular i{display:block;height:3px;border-radius:9999px;background:rgba(10,10,10,.14)}
.fz-kutular i+i{width:62%}
.fz-yazi{display:flex;gap:6px;align-items:center;flex:1;min-height:0}
.fz-yazi img{width:38%;height:100%;border-radius:5px;object-fit:cover;display:block;flex:none}
.fz-yazi span{flex:1;display:flex;flex-direction:column;gap:4px}
.fz-izgara{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:4px;flex:1;min-height:0}
.fz-izgara img{width:100%;height:100%;border-radius:4px;object-fit:cover;display:block;min-height:0}
.fz-urun{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;flex:1;min-height:0}
.fz-urun span{display:flex;flex-direction:column;gap:3px;min-height:0;padding:4px;border-radius:6px;background:#fff}
.fz-urun img{width:100%;flex:1;min-height:0;border-radius:4px;object-fit:cover;display:block}
.fz-urun em{display:block;width:44%;height:6px;border-radius:9999px;background:#FF5E4A}
/* telefon (responsive) çıkartması */
.fz-tel{position:absolute;width:62px;aspect-ratio:9/17;border:4px solid #fff;border-radius:13px;background:#fff;
box-shadow:0 16px 32px -18px rgba(10,10,10,.5),0 0 0 1px rgba(10,10,10,.05)}
.fz-tel .fz-sayfa{border-radius:9px}
.fz-tel .fz-govde{padding:4px;gap:4px}
.fz-tel .fz-hero{height:52%;border-radius:5px}
.fz-tel .fz-hero span{left:5px;width:74%;gap:3px}
.fz-tel .fz-hero span em{width:20px;height:6px}
.fz-tel .fz-satir{height:3px}
.fz-centik{flex:none;height:9px;display:grid;place-items:center;background:#fff}
.fz-centik::after{content:"";width:18px;height:3.5px;border-radius:9999px;background:rgba(10,10,10,.18)}
/* içerik paneli (CMS) kâğıdı */
.fz-panel{position:absolute;width:128px;padding:11px 11px 12px;box-sizing:border-box;background:#fff;border:1.5px solid #0A0A0A;border-radius:12px;
display:flex;flex-direction:column;gap:7px;box-shadow:0 22px 44px -26px rgba(10,10,10,.45)}
.fz-panel b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;justify-content:space-between}
.fz-panel b::after{content:"";width:7px;height:7px;border-radius:9999px;background:#22C55E}
.fz-panel>span{display:flex;align-items:center;gap:6px}
.fz-panel>span img{width:18px;height:18px;border-radius:4px;object-fit:cover;display:block;flex:none}
.fz-panel>span i{flex:1;display:block;height:4px;border-radius:9999px;background:rgba(10,10,10,.16)}
.fz-panel>span s{flex:none;width:7px;height:7px;border-radius:9999px;background:#4895F7;text-decoration:none}
.fz-panel>span:nth-of-type(2) s{background:rgba(10,10,10,.18)}
.fz-panel em{align-self:flex-start;margin-top:2px;border-radius:9999px;background:#FF5E4A;color:#fff;padding:3px 10px;
font-size:11px;font-weight:600;font-style:normal}
/* ── marka: kimlik kartları ── */
.fz-kimlik{position:absolute;inset:0;border-radius:13px;overflow:hidden;background:#fff}
.fz-kimlik.krem{background:#F4F1EC}
.fz-logo{position:absolute;left:14%;right:14%;top:0;bottom:0;margin:auto;height:auto;width:72%;display:block}
.fz-kimlik[data-varyant] .fz-logo{bottom:34%}
.fz-varyant{position:absolute;left:10px;right:10px;bottom:34px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fz-varyant span{height:40px;border-radius:8px;display:grid;place-items:center}
.fz-varyant img{width:74%;height:auto;display:block;filter:brightness(0) invert(1)}
.fz-arti{position:relative;width:16px;height:16px}
.fz-arti::before,.fz-arti::after{content:"";position:absolute;background:#307FE2;border-radius:1.5px}
.fz-arti::before{left:5.5px;top:0;width:5px;height:16px}
.fz-arti::after{left:0;top:5.5px;width:16px;height:5px}
.fz-renk{position:absolute;inset:0;display:flex;flex-direction:column}
.fz-renk i{display:block;flex:1;transition:flex-grow .5s cubic-bezier(.22,1,.36,1)}
.fz-renk i:first-child{flex:2.2}
.fz-aa{position:absolute;left:14px;top:14px;display:flex;align-items:baseline;gap:8px;line-height:1}
.fz-kart[data-yan="sag"] .fz-aa{left:auto;right:14px}
.fz-aa b{font-size:54px;font-weight:600;letter-spacing:-.04em;color:#0C0C0C}
.fz-aa span{font-size:24px;font-weight:300;letter-spacing:-.02em;color:#307FE2}
.fz-kimlik .fz-satirlar{position:absolute;left:14px;right:14px;top:92px;display:flex;flex-direction:column;gap:6px}
/* kartın adı: açık kartta mürekkep yazı, fotoğraflı ve renkli kartta beyaz yazı */
.fz-kimlik-ad{position:absolute;z-index:1;left:12px;bottom:12px;font-size:13px;font-weight:600;color:#0A0A0A;white-space:nowrap;transition:opacity .3s}
.fz-kimlik-ad.beyaz{color:#fff}
.fz-kart[data-yan="sag"] .fz-kimlik-ad{left:auto;right:12px}
.fz-kimlik.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(10,10,10,.6))}
.fz-kimlik.foto img{width:100%;height:100%;object-fit:cover;display:block}
/* kılavuz / brand book: kâğıt, brand book'ta arkasında iki yaprak daha */
.fz-kilavuz{position:relative}
.fz-kilavuz .fz-kagit{position:relative}
.fz-yaprak{position:absolute;inset:0;background:#fff;border:1.5px solid #0A0A0A;border-radius:10px}
.fz-kilavuz .fz-kagit u{display:flex;gap:4px;text-decoration:none}
.fz-kilavuz .fz-kagit u s{width:14px;height:14px;border-radius:4px;text-decoration:none}
.fz-kilavuz .fz-kagit small{margin-top:auto;margin-bottom:11px;font-size:11px;font-weight:600;color:rgba(10,10,10,.5)}
/* ikon seti ve ses tonu: küçük süs çıkartmaları (5px kenar) */
.fz-ikonlar{position:absolute;width:104px;padding:9px;box-sizing:border-box;border:5px solid #fff;border-radius:16px;background:#fff;
box-shadow:0 16px 32px -18px rgba(10,10,10,.5),0 0 0 1px rgba(10,10,10,.05);display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.fz-ikonlar svg{width:100%;height:auto;display:block;fill:none;stroke:#307FE2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fz-balon{position:absolute;padding:8px 13px;border-radius:16px 16px 16px 4px;background:#fff;box-shadow:0 16px 32px -18px rgba(10,10,10,.5),0 0 0 1px rgba(10,10,10,.05);
font-size:13px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:7px}
.fz-balon i{display:flex;gap:3px}
.fz-balon i s{width:5px;height:5px;border-radius:9999px;background:#307FE2;text-decoration:none}
.fz-balon i s:nth-child(2){opacity:.6}
.fz-balon i s:nth-child(3){opacity:.3}
/* şablon kiti: hikâye şablonları (9:16), reels gibi sağ alta düşer */
.fz-sablon{position:absolute;width:56px;aspect-ratio:9/16;border:4px solid #fff;border-radius:12px;overflow:hidden;
box-shadow:0 16px 32px -18px rgba(10,10,10,.5),0 0 0 1px rgba(10,10,10,.05);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:8px 7px;box-sizing:border-box}
.fz-sablon .fz-arti{position:absolute;left:7px;top:8px;scale:.8;transform-origin:0 0}
.fz-sablon{background:#307FE2}
.fz-sablon i{display:block;height:4px;border-radius:9999px;background:rgba(255,255,255,.85)}
.fz-sablon i+i{width:64%;background:rgba(255,255,255,.45)}
.fz-sablon.krem{background:#F4F1EC}
.fz-sablon.krem i{background:rgba(10,10,10,.5)}
.fz-sablon.krem i+i{background:rgba(10,10,10,.2)}
/* Sayac'ın ekran okuyucu kopyası */
.fz-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ölçekli sahne kabı */
.fz-olcek{position:relative;width:100%}
.fz-olcek>div{position:absolute;left:50%;top:0;transform-origin:50% 0}
/* telefonda sahne ~%65'e küçülür: üstündeki küçük yazılar okunur kalsın diye büyütülür */
.fz-olcek[data-kucuk] .fz-hap{font-size:19px;padding:8px 16px}
.fz-olcek[data-kucuk] .fz-kod{font-size:16px;padding:4px 10px;border-radius:10px}
.fz-olcek[data-kucuk] .fz-marka,.fz-olcek[data-kucuk] .fz-kimlik-ad{font-size:17px}
.fz-olcek[data-kucuk] .fz-cubuk{height:29px}
.fz-olcek[data-kucuk] .fz-url{height:21px;line-height:21px;font-size:15px}
.fz-olcek[data-kucuk] .fz-kagit b,.fz-olcek[data-kucuk] .fz-takvim b,.fz-olcek[data-kucuk] .fz-panel b{font-size:16px}
.fz-olcek[data-kucuk] .fz-balon{font-size:17px}
@media(prefers-reduced-motion:reduce){.fz-kart,.fz-marka,.fz-kimlik-ad,.fz-renk i{transition:none}.fz-suz{animation:none}}
.fb{background:transparent;font-family:"Outfit",sans-serif;color:#0A0A0A;padding:clamp(64px,7vw,96px) 0}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.fb{padding-top:56px;padding-bottom:56px}}
.fb *{box-sizing:border-box}
.fb-sar{max-width:1200px;margin:0 auto;padding:0 24px}
/* açıklama başlığın altında, 14px arayla (TASARIM-KURALLARI §1) */
.fb-bas{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(28px,3vw,40px)}
.fb-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.fb-giris{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6);text-wrap:balance}
.fb-kart{border-radius:22px;background:#fff;border:1px solid rgba(10,10,10,.09);overflow:hidden}
/* bant: gök + vadi; sahne gökte, nesne çimende */
.fb-bant{position:relative;aspect-ratio:1152 / 470;background:#2F94EF;overflow:hidden;isolation:isolate}
.fb-vadi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-1;pointer-events:none}
.fb-nesne{position:absolute;left:5.5%;bottom:16%;width:clamp(84px,12%,150px);height:auto;z-index:1;pointer-events:none;
filter:drop-shadow(0 18px 18px rgba(10,10,10,.18))}
.fb-nesne.telefon{width:clamp(60px,8%,104px);rotate:-6deg}
.fb-nesne.muhur{width:clamp(68px,9.5%,120px);rotate:-4deg}
.fb-sahne{position:absolute;left:0;right:0;top:4%;z-index:2}
/* kontrol sırası: film ve sosyal üç hücre, web iki hücre, marka üç hücre (paketler geniş) */
.fb-kontrol{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.15fr)}
.fb-kontrol.iki{grid-template-columns:minmax(0,2.1fr) minmax(0,1.15fr)}
.fb-kontrol.marka{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1fr)}
.fb-hucre{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px 24px;min-width:0}
.fb-hucre+.fb-hucre{border-left:1px solid rgba(10,10,10,.08)}
/* toplam */
.fb-toplam{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:20px 20px 20px 24px;
border-top:1px solid rgba(10,10,10,.08);background:#FCFBFA}
.fb-rakam{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.fb-sayi{font-size:clamp(32px,3.2vw,44px);font-weight:500;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fb-kdv{font-size:14px;font-weight:500;color:rgba(10,10,10,.5)}
/* çağrılar: /fiyatlar'a çizgi bağlantı + T1 */
.fb-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.fb-cta .pb-cizgi:focus-visible{outline:2px solid #4895F7;outline-offset:2px}
.fk-kisa{display:none}
@media(max-width:1023px){
.fb-kontrol,.fb-kontrol.marka{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fb-kontrol:not(.iki) .fb-hucre:first-child{grid-column:1 / -1;border-bottom:1px solid rgba(10,10,10,.08)}
.fb-kontrol:not(.iki) .fb-hucre:nth-child(2){border-left:none}
.fb-kontrol.iki{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.fb-bant{aspect-ratio:772 / 400}
.fb-sahne{left:15%;right:15%}
}
@media(max-width:640px){
.fb-sar{padding:0 20px}
.fb-bant{aspect-ratio:350 / 300}
.fb-sahne{top:3%;left:0;right:0}
/* telefonda nesne vadinin dibinde, ortada: yan çıkartmalar iki yanda kalır */
.fb-nesne{left:50%;translate:-50% 0;bottom:3%;width:68px}
.fb-nesne.telefon{width:46px}
.fb-nesne.muhur{width:54px}
.fb-kontrol,.fb-kontrol.iki,.fb-kontrol.marka{grid-template-columns:minmax(0,1fr)}
.fb-hucre{padding:18px 18px}
.fb-hucre+.fb-hucre{border-left:none;border-top:1px solid rgba(10,10,10,.08)}
.fb-kontrol .fb-hucre:first-child{border-bottom:none}
.fb-hucre.yan{flex-direction:row;align-items:center;justify-content:space-between}
/* haplar ızgaraya oturur: süre 3 + 3 (tek kalan "3 dk" olmaz), post tek sıra, paketler alt alta */
.fb-hucre .fk-haplar{display:grid;gap:6px}
.fb-hucre.sure .fk-haplar{grid-template-columns:repeat(3,minmax(0,1fr))}
.fb-hucre.post .fk-haplar{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:4px}
.fb-hucre.paket .fk-haplar{grid-template-columns:repeat(3,minmax(0,1fr))}
.fb-hucre.paket .fk-uzun{display:none}
.fb-hucre.paket .fk-kisa{display:inline}
.fb-hucre .fk-haplar button{padding:0 4px}
.fb-toplam{padding:18px}
.fb-cta{gap:4px 20px}
.fb-cta .pb-t1{order:-1}
}
/* 360'tan dar telefonda altı post hapı 44px'e sığmaz: 3 + 3; paketler tam adla alt alta */
@media(max-width:359px){
.fb-hucre.post .fk-haplar{grid-template-columns:repeat(3,minmax(0,1fr))}
.fb-hucre.paket .fk-haplar{grid-template-columns:minmax(0,1fr)}
.fb-hucre.paket .fk-uzun{display:inline}
.fb-hucre.paket .fk-kisa{display:none}
}
.fd-kap{position:relative}
.fd-kap>.fb-kart{position:relative;z-index:1}
.fd{position:relative;z-index:0;margin:-24px 14px 0;padding-top:24px;border-radius:0 0 20px 20px;background:#F3F1EE}
.fd-dil{appearance:none;border:0;background:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
min-height:54px;padding:6px 12px 6px 22px;cursor:pointer;font:inherit;color:#0A0A0A;text-align:left;border-radius:0 0 20px 20px}
.fd-soru{font-size:14.5px;font-weight:500;color:rgba(10,10,10,.58)}
.fd-ac{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;white-space:nowrap}
.fd-ac i{display:grid;place-items:center;width:30px;height:30px;border-radius:9999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,10,10,.12);
transition:background-color .2s,color .2s,box-shadow .2s}
.fd-ac svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:rotate .35s cubic-bezier(.22,1,.36,1)}
.fd-dil:hover .fd-ac i{background:#0A0A0A;color:#fff;box-shadow:none}
.fd-dil[aria-expanded="true"] .fd-ac svg{rotate:180deg}
.fd-dil:focus-visible{outline:2px solid #4895F7;outline-offset:-2px}
.fd-ic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 56px;padding:6px 22px 26px}
.fd-ic h3{margin:0 0 12px;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.fd-ic ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.fd-ic li{display:flex;gap:10px;align-items:center;min-height:22px;font-size:14.5px;line-height:1.35;color:rgba(10,10,10,.8)}
.fd-t{min-width:0;animation:fd-yeni .35s cubic-bezier(.22,1,.36,1)}
@keyframes fd-yeni{from{opacity:.25;translate:0 3px}to{opacity:1;translate:0 0}}
.fd-degil li{color:rgba(10,10,10,.56)}
.fd-i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:9999px}
.fd-dahil .fd-i{background:rgba(72,149,247,.16);color:#1F6FD6}
.fd-degil .fd-i{box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.2);color:rgba(10,10,10,.45)}
.fd-sec{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;font-size:12.5px;font-weight:500;
color:rgba(10,10,10,.5);box-shadow:inset 0 0 0 1px rgba(10,10,10,.14)}
@media(max-width:760px){.fd-ic{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
.fd{margin:-22px 8px 0;padding-top:22px}
.fd-dil{padding:6px 8px 6px 16px}
.fd-ic{padding:4px 16px 22px;gap:22px}
}
@media(prefers-reduced-motion:reduce){.fd-ac i,.fd-ac svg{transition:none}.fd-t{animation:none}}
.nt{background:#FCFBFA;font-family:"Outfit",sans-serif;color:#0A0A0A;padding:clamp(72px,8vw,112px) 0;-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.nt{padding-top:56px;padding-bottom:56px}}
.nt-ic{max-width:1200px;margin:0 auto;padding:0 24px}
.nt-ust{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin:0 0 clamp(20px,2.4vw,28px)}
.nt h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.nt h2 .mavi{color:#4895F7}
.nt-seviye{display:flex;align-items:center;gap:14px;margin:0 0 6px;font-size:15px;font-weight:600;white-space:nowrap}
.nt-seviye>span:first-child{display:inline-block;min-width:92px;text-align:right}
.nt-seg{display:flex;gap:4px}
.nt-seg i{width:28px;height:6px;border-radius:9999px;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.3);transition:background-color .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.nt-seg i.on{background-color:#4895F7;box-shadow:none}
/* vadi sahnesi: nesnesiz hero vadisi, çerçeveli; nesneler kendi yuvasında topraktan yükselir (yuva altı = zemin, taşan kırpılır) */
/* üstten kırpılır (kullanıcı: "tam kullanmana gerek yok, üstten kırpabilirsin"): görselin üst UST %'si gizli */
.nt-vadi{position:relative;border-radius:26px;overflow:hidden;margin-top:0;container-type:inline-size}
.nt-vadi>img{position:absolute;left:0;width:100%;display:block}
/* nesne yuvası (lab D gibi, kullanıcı: "çimenin üstüne çıkart"): seçilince taban çizgisinin ALTINDAN yaylanarak yükselir
(yuva yalnız alttan kırpar; yükselince nesnenin tamamı görünür, kesik yok), tabandan iki yana toprak zerreleri sıçrar,
gölge oturur; sonra hafifçe sallanır. */
.nt-yuva{position:absolute;cursor:pointer;clip-path:inset(-80% -60% 0 -60%)}
.nt-yuva img{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;transform-origin:50% 100%;
opacity:0;transform:translateY(106%)}
.nt-yuva.on img{opacity:1;transform:none;animation:nt-yuksel .95s cubic-bezier(.2,.8,.3,1) both,nt-salla 4.8s ease-in-out .95s infinite}
.nt-yuva::before{content:"";position:absolute;left:14%;right:14%;bottom:-2%;height:7%;border-radius:50%;background:rgba(110,30,0,.3);
filter:blur(3px);opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.nt-yuva.on::before{opacity:1;transform:none;transition-delay:.5s}
.nt-zerre{position:absolute;z-index:0;left:50%;bottom:2%;width:0;height:0;pointer-events:none}
.nt-yuva img{z-index:1}
.nt-zerre i{position:absolute;left:0;bottom:0;width:var(--s);height:var(--s);border-radius:50%;background:var(--r);opacity:0}
.nt-yuva.on .nt-zerre i{animation:nt-zer .8s cubic-bezier(.2,.7,.4,1) .12s both}
@keyframes nt-yuksel{0%{transform:translateY(106%)}55%{transform:translateY(-8%)}72%{transform:translateY(2.5%)}86%{transform:translateY(-1.2%)}100%{transform:none}}
@keyframes nt-zer{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}
45%{opacity:1;transform:translate(calc(var(--dx) * .6),var(--dy)) scale(1)}
100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) * -.2)) scale(.8)}}
/* kaldırınca "puf" (kullanıcı): nesne şişip küçülerek kaybolur, yerinden çizgili beyaz duman yükselir */
.nt-puf{position:absolute;left:50%;top:58%;width:0;height:0;pointer-events:none}
.nt-puf i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .22cqw #0A0A0A;opacity:0}
.nt-yuva.puf .nt-puf i{animation:nt-puf .7s ease-out var(--d) both}
.nt-yuva.puf img{animation:nt-kaybol .32s ease-in both}
@keyframes nt-puf{0%{opacity:0;transform:scale(.2)}28%{opacity:1;transform:scale(.95)}100%{opacity:0;transform:translateY(-35%) scale(1.3)}}
@keyframes nt-kaybol{0%{opacity:1;transform:none}40%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:scale(.25)}}
@keyframes nt-salla{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.6deg)}70%{transform:rotate(1.3deg)}}
.nt-arti{position:absolute;display:grid;place-items:center;width:clamp(26px,2.8vw,40px);aspect-ratio:1;border-radius:9999px;background:#fff;
border:2px dashed #0A0A0A;color:#0A0A0A;transform:translate(-50%,-50%);cursor:pointer;padding:0;transition:opacity .3s .6s,transform .35s cubic-bezier(.22,1,.36,1) .6s}
.nt-arti:hover{border-color:#4895F7;color:#4895F7;transform:translate(-50%,-50%) scale(1.08)}
.nt-arti.gizli{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.6);transition-delay:0s}
.nt-arti svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
/* seçim kartları: sade */
.nt-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.nt-kart{appearance:none;border:0;margin:0;width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px 14px 12px;text-align:left;
background:#fff;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(10,10,10,.14);cursor:pointer;font:inherit;color:#0A0A0A;
-webkit-tap-highlight-color:transparent;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.nt-kart:focus-visible{outline:2px solid #4895F7;outline-offset:3px}
.nt-kart[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #4895F7}
@media(hover:hover){.nt-kart:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #0A0A0A}.nt-kart[aria-pressed="true"]:hover{box-shadow:inset 0 0 0 2px #4895F7}}
.nt-kart:active{transform:scale(.985)}
.nt-ikon{flex:none;width:34px;height:40px}
.nt-yazi{flex:1;min-width:0}
.nt-ad{display:block;font-size:16px;font-weight:600;line-height:20px;letter-spacing:-.01em}
.nt-fiyat{display:block;font-size:14px;font-weight:500;line-height:20px;color:rgba(10,10,10,.6);white-space:nowrap}
.nt-fiyat b{font-weight:600;color:#0A0A0A}
.nt-tik{flex:none;width:24px;height:24px;border-radius:9999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.3);
background:#fff;transition:background-color .25s,box-shadow .25s}
.nt-tik svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.nt-kart[aria-pressed="true"] .nt-tik{background:#4895F7;box-shadow:none}
.nt-kart[aria-pressed="true"] .nt-tik svg{transform:scale(1)}
/* toplam çubuğu (Burak 25 Eyl: "yazı çok ince, dikkat çekmiyor; kutunun rengi değişebilir"): açık mavi zemin, üstteki beyaz
kartlardan ayrışır; dört hizmet seçilince aynı ailede tam gök mavisine döner. Yazı medium, rakam büyük (siyah yüzey yok) */
.nt-alt{margin-top:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 32px;
padding:14px 14px 14px 28px;border-radius:18px;background-color:#EAF3FE;color:#0A0A0A;box-shadow:inset 0 0 0 1px rgba(72,149,247,.3);
transition:background-color .6s cubic-bezier(.22,1,.36,1),color .6s,box-shadow .6s}
.nt-alt.tam{background-color:#2F94EF;color:#fff;box-shadow:none}
.nt-toplam{margin:0;font-size:18px;font-weight:500;line-height:1.3;min-height:52px;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.35em}
.nt-toplam>span{align-self:center}
.nt-sayi{font-size:clamp(34px,3.2vw,46px);font-weight:600;line-height:1;letter-spacing:-.035em;color:#FF5E4A;font-variant-numeric:tabular-nums;transition:color .6s}
.nt-alt.tam .nt-sayi{color:#fff}
.nt-alt.tam .nt-kdv{opacity:.85}
.nt-kdv{font-size:14px;font-weight:500;opacity:.6;margin-left:2px}
.nt-bos{opacity:.8}
.nt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:1023px){.nt-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
.nt{padding:56px 0}
/* telefonda seviye başlığın altına iner: önce çubuk, sonra ad; sola yaslı */
.nt-seviye{flex-direction:row-reverse;justify-content:flex-end}
.nt-seviye>span:first-child{min-width:0;text-align:left}
.nt-alt{padding:18px 18px 18px 22px}
.nt-toplam{font-size:17px}
}
/* telefonda kısa (28 Eyl, Burak: "çok büyük; 'fiyattan başlar' satırına ve büyük butona gerek yok"): kartlar ikişer, küçük; toplam
çubuğu yok, yerine /fiyatlar'a küçük bağlantı. Kartların üstünde başlangıç fiyatları duruyor */
.nt-tel{display:none}
@media(max-width:767px){
.nt-ust{margin-bottom:14px}
.nt-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nt-kart{gap:8px;padding:10px 10px 10px 8px;border-radius:16px}
.nt-ikon{width:24px;height:28px}
.nt-ad{font-size:14.5px;line-height:18px}
.nt-fiyat{font-size:13px;line-height:18px}
.nt-tik{display:none}
.nt-alt{display:none}
.nt-tel{display:flex;margin-top:14px}
}
/* gömülü hâl (28 Eyl, Burak onayı: mobil-kisaltma lab üçüncü tur): anasayfada telefonda "Bütçe ve hız"ın içinde, grafiğin ve hız
kutularının altında (ButceHiz gomulu verir). Masaüstü ve tablette yok; telefonda anasayfadaki ayrı "Ne kadar tutar?" bölümü gizlenir
(sayfada gömülü hâli varsa). Masaüstünde ayrı bölüm eskisi gibi yerinde */
.nt-gomulu{display:none}
@media(max-width:767px){
.nt.nt-gomulu{display:block;padding:32px 0 0;background:none}
.nt-gomulu .nt-ic{padding:0}
.nt-gomulu h3{margin:0;font-size:24px;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.nt-gomulu h3 .mavi{color:#4895F7}
body:has(.nt-gomulu) .nt:not(.nt-gomulu){display:none}
}
/* dar telefonda (360) "60 bin ₺'den · proje" kutuya sığmıyor: fiyat iki satıra inebilir */
@media(max-width:380px){.nt-fiyat{white-space:normal}}
@media(prefers-reduced-motion:reduce){.nt-kart,.nt-tik,.nt-tik svg,.nt-seg i,.nt-alt,.nt-yuva img,.nt-arti{transition:none}
.nt-yuva.on img,.nt-yuva.on .nt-zerre i,.nt-yuva.puf img,.nt-yuva.puf .nt-puf i{animation:none}}
.sq{background:var(--sq-zemin,transparent);font-family:"Outfit",sans-serif;color:#0A0A0A;padding:clamp(72px,8vw,112px) 0;-webkit-font-smoothing:antialiased}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.sq{padding-top:56px;padding-bottom:56px}}
.sq *{box-sizing:border-box}
.sq-ic{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:36px}
/* dar ekranda çıkartma sağda bütün satırları kaplar; fazla yükseklik en alttaki esnek satıra gider, yazılar aralanmaz */
.sq-bas{align-self:start;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr;column-gap:20px;align-items:start}
.sq-bas>*{grid-column:1}
.sq-h2{margin:0;font-size:clamp(34px,4.4vw,56px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.sq-h2 .mavi{color:#4895F7}
.sq-not{margin:14px 0 0;max-width:340px;font-size:17px;line-height:1.6;color:rgba(10,10,10,.6)}
.sq-cta{margin-top:24px}
/* çıkartma: 4:5 kart, 7px beyaz kenar, eğik; süzülür, üstüne gelince düzelip 4px kalkar */
.sq-bas>.sq-cik{position:relative;grid-column:2;grid-row:1 / -1;width:clamp(96px,17vw,150px);margin:4px 0 -16px}
.sq-kart{aspect-ratio:4/5;border:5px solid #fff;border-radius:18px;overflow:hidden;background:#fff;rotate:3deg;
box-shadow:0 22px 44px -26px rgba(10,10,10,.4),0 0 0 1px rgba(10,10,10,.05);
transition:rotate .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1);animation:sq-suz 7s ease-in-out infinite}
.sq-kart img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block;border-radius:13px}
.sq-cik:hover .sq-kart{rotate:0deg;animation-play-state:paused;translate:0 -4px}
@keyframes sq-suz{0%,100%{translate:0 0}50%{translate:0 -10px}}
.sq-balon{display:none}
/* sorular: her biri ayrı beyaz kart */
.sq-liste{display:flex;flex-direction:column;gap:12px}
.sq-d{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(10,10,10,.09);transition:box-shadow .3s}
.sq-d[open]:not([data-kapaniyor]){box-shadow:inset 0 0 0 1.5px #4895F7,0 22px 44px -34px rgba(47,148,239,.55)}
.sq-d summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 20px 20px 24px;cursor:pointer;
font-size:clamp(17px,1.3vw,19px);font-weight:500;line-height:1.4;letter-spacing:-.01em;border-radius:20px;-webkit-tap-highlight-color:transparent}
.sq-d summary::-webkit-details-marker{display:none}
.sq-d summary:focus-visible{outline:2px solid #4895F7;outline-offset:2px}
/* artı → eksi: mavi hap; açılınca dolar */
.sq-art{position:relative;flex:none;width:36px;height:36px;border-radius:9999px;background:rgba(72,149,247,.1);color:#4895F7;
transition:background-color .3s,color .3s}
.sq-art::before,.sq-art::after{content:"";position:absolute;left:11px;top:17px;width:14px;height:2px;border-radius:2px;background:currentColor;
transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sq-art::after{transform:rotate(90deg)}
.sq-d summary:hover .sq-art{background:rgba(72,149,247,.18)}
.sq-d[open]:not([data-kapaniyor]) .sq-art{background:#4895F7;color:#fff}
.sq-d[open]:not([data-kapaniyor]) .sq-art::after{transform:rotate(0)}
.sq-c{overflow:hidden}
.sq-c p{margin:0;padding:0 76px 24px 24px;max-width:720px;font-size:16px;line-height:1.6;color:rgba(10,10,10,.62)}
/* not yoksa (hizmet sayfası çağrısı) başlık bloğu kısa; çıkartma da küçülür ki altında boşluk kalmasın */
@media(max-width:1023px){.sq-bas.kisa>.sq-cik{width:clamp(88px,13vw,116px)}}
@media(min-width:1024px){
.sq-ic{grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:64px}
.sq-bas{position:sticky;top:104px;display:block}
.sq-bas>.sq-cik{width:min(100%,280px);margin:40px 0 0 6px}
.sq-kart{border-width:7px;border-radius:22px;rotate:-2.4deg}
.sq-kart img{border-radius:15px}
.sq-balon{position:absolute;display:block;left:34%;top:-7%;background:#fff;color:#0A0A0A;border:2px solid #0A0A0A;border-radius:16px;padding:9px 16px;
font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transform-origin:18px 100%;
box-shadow:0 14px 30px -18px rgba(10,10,10,.45)}
.sq-balon::after{content:"";position:absolute;left:20px;bottom:-9px;width:14px;height:14px;background:#fff;
border-right:2px solid #0A0A0A;border-bottom:2px solid #0A0A0A;transform:rotate(45deg)}
.sq-d summary{padding:22px 22px 22px 28px}
.sq-c p{padding-left:28px}
}
@media(max-width:640px){
.sq-ic{padding:0 20px}
.sq-not{font-size:16px}
.sq-d summary{padding:18px 16px 18px 20px;gap:14px;font-size:16.5px}
.sq-art{width:32px;height:32px}
.sq-art::before,.sq-art::after{left:9px;top:15px}
.sq-c p{padding:0 20px 20px;font-size:15.5px}
}
/* kısaltma (ilk=N; 28 Eyl, Burak: mobil denetim m-sss): telefonda ilk N soru, altta "Tümünü gör". Sorular HTML'de kalır (arama motoru,
FAQPage verisi aynı); masaüstünde hepsi görünür, düğme yok */
.sq-tumu{display:none}
@media(max-width:767px){
.sq-d[data-fazla]{display:none}
.sq-tumu{display:block;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
.sq-kart{animation:none;transition:none}
.sq-d,.sq-art,.sq-art::before,.sq-art::after{transition:none}
}
.pb{appearance:none;border:none;display:inline-flex;align-items:center;gap:0;height:50px;padding:0 24px;
border-radius:9999px;font-family:"Outfit",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.005em;
text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box;
transition:transform .18s cubic-bezier(.22,1,.36,1),background-size .45s cubic-bezier(.22,1,.36,1),color .2s,box-shadow .2s}
.pb:active{transform:scale(.97)}
.pb-ok{width:0;height:17px;margin-left:0;opacity:0;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;transition:width .3s,margin .3s,opacity .2s}
.pb-d3,.pb-t1,.pb-canli{background-color:#0A0A0A;color:#fff;background-image:linear-gradient(#FF5E4A,#FF5E4A);
background-repeat:no-repeat;background-size:0% 100%}
.pb-d3:hover,.pb-t1:hover,.pb-canli:hover{background-size:100% 100%;color:#fff}
.pb-d3:hover .pb-ok,.pb-t1:hover .pb-ok,.pb-canli:hover .pb-ok{width:17px;margin-left:10px;opacity:1}
.pb-ikincil{background:transparent;color:#0A0A0A;box-shadow:inset 0 0 0 1.5px rgba(10,10,10,.18);padding:0 22px}
.pb-ikincil:hover{box-shadow:inset 0 0 0 1.5px #0A0A0A}
.pb[data-zemin="koyu"].pb-d3,.pb[data-zemin="koyu"].pb-t1,.pb[data-zemin="gok"].pb-d3,.pb[data-zemin="gok"].pb-t1{background-color:#fff;color:#0A0A0A}
.pb[data-zemin="koyu"].pb-d3:hover,.pb[data-zemin="koyu"].pb-t1:hover,.pb[data-zemin="gok"].pb-d3:hover,.pb[data-zemin="gok"].pb-t1:hover{color:#fff}
.pb[data-zemin="koyu"].pb-ikincil,.pb[data-zemin="gok"].pb-ikincil{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.pb[data-zemin="koyu"].pb-ikincil:hover,.pb[data-zemin="gok"].pb-ikincil:hover{box-shadow:inset 0 0 0 1.5px #fff}
/* T1: avatarlar + durum noktası */
/* boyut ölçeği tek kural (kullanıcı: "küçültebilirsin ama padding'i bu kadar değişince garip duruyor"):
T1'de avatar grubunun sol boşluğu üst-alt boşluğuna eşit, yan boşluklar yükseklikle orantılı.
M 50px: avatar 30, kenar (50-30)/2 = 10 · S 44px: avatar 26, kenar 9 · L 58px: avatar 34, kenar 12 */
.pb-t1{padding:0 24px 0 10px}
.pb-av{position:relative;display:inline-flex;flex:none;margin-right:12px}
.pb-av i{font-style:normal;width:30px;height:30px;border-radius:9999px;display:grid;place-items:center;
font-size:10px;font-weight:600;color:#fff;box-shadow:0 0 0 2px var(--pb-halka,#0A0A0A)}
.pb-av i+i{margin-left:-6px}
.pb-av b{position:absolute;right:-2px;bottom:-1px;width:10px;height:10px;border-radius:9999px;background:#9CA3AF;
box-shadow:0 0 0 2px var(--pb-halka,#0A0A0A)}
.pb-av b.on{background:#22C55E}
.pb-av b.on::after{content:"";position:absolute;inset:0;border-radius:9999px;background:#22C55E;animation:pb-nabiz 2s ease-out infinite}
@keyframes pb-nabiz{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.4);opacity:0}}
/* canlı: avatarsız, yalnız nabız atan yeşil nokta */
.pb-canli{padding:0 22px 0 18px}
.pb-nokta{position:relative;width:8px;height:8px;margin-right:10px;border-radius:9999px;background:#22C55E;flex:none}
.pb-nokta::after{content:"";position:absolute;inset:0;border-radius:9999px;background:#22C55E;animation:pb-nabiz 2s ease-out infinite}
.pb.kucuk.pb-canli{padding-left:16px;padding-right:20px}
.pb-t1:hover{--pb-halka:#fff}
.pb[data-zemin="koyu"].pb-t1,.pb[data-zemin="gok"].pb-t1{--pb-halka:#fff}
.pb.buyuk{height:58px;font-size:16px;padding-left:28px;padding-right:28px}
.pb.buyuk.pb-ikincil{padding-left:26px;padding-right:26px}
.pb.buyuk.pb-t1{padding-left:12px}
.pb.buyuk .pb-av i{width:34px;height:34px;font-size:11px}
.pb.buyuk .pb-av{margin-right:14px}
.pb.kucuk{height:44px;font-size:14.5px;padding-left:21px;padding-right:21px}
.pb.kucuk.pb-ikincil{padding-left:19px;padding-right:19px}
.pb.kucuk.pb-t1{padding-left:9px}
.pb.kucuk .pb-av i{width:26px;height:26px;font-size:9.5px}
.pb.kucuk .pb-av{margin-right:11px}
/* çizgi bağlantı: zemin yok, alt çizgi yazının üçte biri kadar başlar, üstüne gelince tamamlanır */
.pb-cizgi{position:relative;height:auto;min-height:40px;padding:0 2px;gap:8px;border-radius:0;background:none;color:#0A0A0A}
.pb-cizgi::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:currentColor;
transform-origin:left;transform:scaleX(.32);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.pb-cizgi:hover::after{transform:scaleX(1)}
.pb-capraz{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pb-cizgi:hover .pb-capraz{transform:translate(3px,-3px)}
.pb-cizgi[data-renk="mercan"]{color:#FF5E4A}
.pb[data-zemin="koyu"].pb-cizgi,.pb[data-zemin="gok"].pb-cizgi{color:#fff}
@media(prefers-reduced-motion:reduce){.pb,.pb-ok,.pb-av b.on::after,.pb-nokta::after{transition:none;animation:none}}
.kps{position:relative;overflow:hidden;isolation:isolate;background:#2F94EF;color:#fff;font-family:"Outfit",sans-serif;
height:clamp(620px,calc(100vw / 1.85),820px);text-align:center;-webkit-font-smoothing:antialiased;--cam-r:clamp(230px,22vw,330px)}
.kps *{box-sizing:border-box}
.kps-sahne{position:absolute;inset:0;z-index:-1;pointer-events:none}
.kps-sahne img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 78%}
/* buz: görselin bulanık kopyaları, aynı kutu ve kadraj (yukarıdaki img kuralı), alt kenara doğru maskeyle */
.kps-buz{position:absolute;inset:0}
.kps .kps-buz{display:none}
.kps[data-cam] .kps-buz{display:block}
.kps .kps-buz.b1{-webkit-mask-image:linear-gradient(to top,#000 0,#000 calc(var(--cam-r) * 0.600),rgba(0,0,0,.84) calc(var(--cam-r) * 0.700),rgba(0,0,0,.5) calc(var(--cam-r) * 0.800),rgba(0,0,0,.16) calc(var(--cam-r) * 0.900),transparent calc(var(--cam-r) * 1.000));mask-image:linear-gradient(to top,#000 0,#000 calc(var(--cam-r) * 0.600),rgba(0,0,0,.84) calc(var(--cam-r) * 0.700),rgba(0,0,0,.5) calc(var(--cam-r) * 0.800),rgba(0,0,0,.16) calc(var(--cam-r) * 0.900),transparent calc(var(--cam-r) * 1.000))}
.kps .kps-buz.b2{-webkit-mask-image:linear-gradient(to top,#000 0,#000 calc(var(--cam-r) * 0.300),rgba(0,0,0,.84) calc(var(--cam-r) * 0.405),rgba(0,0,0,.5) calc(var(--cam-r) * 0.510),rgba(0,0,0,.16) calc(var(--cam-r) * 0.615),transparent calc(var(--cam-r) * 0.720));mask-image:linear-gradient(to top,#000 0,#000 calc(var(--cam-r) * 0.300),rgba(0,0,0,.84) calc(var(--cam-r) * 0.405),rgba(0,0,0,.5) calc(var(--cam-r) * 0.510),rgba(0,0,0,.16) calc(var(--cam-r) * 0.615),transparent calc(var(--cam-r) * 0.720))}
.kps .kps-buz.b3{-webkit-mask-image:linear-gradient(to top,#000 0,#000 calc(var(--cam-r) * 0.080),rgba(0,0,0,.84) calc(var(--cam-r) * 0.165),rgba(0,0,0,.5) calc(var(--cam-r) * 0.250),rgba(0,0,0,.16) calc(var(--cam-r) * 0.335),transparent calc(var(--cam-r) * 0.420));mask-image:linear-gradient(to top,#000 0,#000 calc(var(--cam-r) * 0.080),rgba(0,0,0,.84) calc(var(--cam-r) * 0.165),rgba(0,0,0,.5) calc(var(--cam-r) * 0.250),rgba(0,0,0,.16) calc(var(--cam-r) * 0.335),transparent calc(var(--cam-r) * 0.420))}
.kps-ic{position:relative;max-width:1200px;margin:0 auto;padding:clamp(88px,10.4vw,150px) 24px 0}
/* telefonda bölüm aralığı sitede tek ölçü: 56px (28 Eyl, Burak onayı: mobil denetim m-aralik) */
@media(max-width:767px){.kps-ic{padding-top:56px}}
.kps h2{margin:0 auto;max-width:820px;font-size:clamp(40px,5vw,64px);font-weight:600;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.kps h2 .mercan,.kps h2 .mavi,.kps h2 em{font-style:normal;color:inherit}
.kps-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
@media(max-width:767px){
.kps{height:auto;--cam-r:clamp(80px,23vw,100px)}
.kps-ic{padding:56px 20px 0}
/* 28 Eyl (mobil denetim m-kapanis): sahne 390:420'den 390:300'e (odak alt kenar: çimen ve bulutlar kırpılmaz, göğün üstü kısalır);
metnin altına 40px biner (eskisi 128): butonlar bulutun değil düz göğün üstünde kalır */
.kps-sahne{position:relative;inset:auto;aspect-ratio:390/300;margin-top:-40px}
/* kısa kutuda iki yandaki bulutlar üst kenara değiyor: sahnenin üstü göğe yumuşak geçer (yalnız asıl görsel; buz kopyaları altta) */
.kps-sahne>img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 64px);mask-image:linear-gradient(to bottom,transparent,#000 64px)}
.kps-sahne img{object-position:50% 100%}
.kps-cta{margin-top:28px}
}