/* LabDorado v5 "Indeks" : tokenlar + bilesen + bolum CSS (prototipte 390/1440 olculup dogrulandi). Kodcu bu dosyayi v5/assets/styles.css olarak AYNEN alir; yalniz tarayici onegi gerekirse ekleme yapar. Kurallar: radius 0 (hicbir yerde yuvarlak kose yok; tek istisna hizmet kartlarindaki ceyrek daire), golge YOK, gradient YOK, border yalniz 1px --hair, 5 font-size (xl/l/m/b/s), tek bolum boslugu --sec, tek bilesen: satir (.rows). */ /* Yedek font: Plus Jakarta Sans gelene kadar Arial, onunla ayni genislik/dikey olcuyle gosterilir (font gelince satir kaymasi/CLS olmasin). size-adjust, Chrome'da ayni metnin iki fontta olculen genislik oranindan (300: 1.025, 400-600: 1.042, bold: 1.005); ascent/descent override = font olcusu / size-adjust. */ @font-face{font-family:"PJS Yedek";src:local("Arial"),local("ArialMT");font-weight:300;size-adjust:102.5%;ascent-override:101.5%;descent-override:21.5%;line-gap-override:0%} @font-face{font-family:"PJS Yedek";src:local("Arial"),local("ArialMT");font-weight:400 600;size-adjust:104.2%;ascent-override:99.8%;descent-override:21.1%;line-gap-override:0%} @font-face{font-family:"PJS Yedek";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;size-adjust:100.5%;ascent-override:103.5%;descent-override:21.9%;line-gap-override:0%} :root{ /* renk */ --white:#fff; --ink:#0a0a0a; --blue:#005EFB; --green:#37D564; --blue-d:#0040B8; /* beyaz/tint uzerinde kucuk metin */ --green-d:#0B6B2E; /* beyaz/tint uzerinde kucuk metin */ --mut:#3d4350; /* ikincil metin */ --tint-n:#f4f6f9; --tint-b:#eef4ff; --tint-g:#eefaf2; --hair:rgba(10,10,10,.14); /* tek ayirici: 1px */ /* font */ --f:'Plus Jakarta Sans','PJS Yedek',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* tipografi: tam 5 font-size */ --fs-xl:clamp(3.25rem,15vw,8.5rem); /* H1 */ --fs-l:clamp(2.25rem,8.6vw,4.5rem); /* hizmet no, proje adi, footer CTA, menu baglantilari */ --fs-m:clamp(1.5rem,5.4vw,2.25rem); /* hizmet adi, metin marka adi, teknoloji (768+) */ --fs-b:1.125rem; /* govde, lede, buton, teknoloji (mobil) */ --fs-s:.9375rem; /* etiket, kategori, kucuk bilgi */ /* yerlesim */ --pad:20px; --max:1440px; --bar:56px; --sec:72px; --gap:24px; --ease:cubic-bezier(.2,.8,.2,1); } @media (min-width:768px){:root{--pad:32px;--sec:96px}} @media (min-width:1024px){:root{--pad:56px;--sec:128px;--bar:72px}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 48px)} body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f);font-size:var(--fs-b);line-height:1.6;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:clip} img,svg{display:block;max-width:100%} img{height:auto} h1,h2,h3{font-family:var(--f);font-weight:800;margin:0} p,ul,ol{margin:0;padding:0} ul,ol{list-style:none} a{color:inherit} button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0} [hidden]{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:3px solid var(--blue);outline-offset:3px} .skip{position:fixed;left:12px;top:-100px;z-index:200;background:var(--ink);color:#fff;padding:14px 18px;font-weight:800;text-decoration:none} .skip:focus{top:12px} .wrap{padding-inline:var(--pad);max-width:var(--max);margin-inline:auto} /* ---- tipografi rolleri ---- */ .t-xl{font-size:var(--fs-xl);line-height:.96;letter-spacing:-.035em} .t-l{font-size:var(--fs-l);line-height:1;letter-spacing:-.03em} .t-m{font-size:var(--fs-m);line-height:1.12;letter-spacing:-.02em} .t-s{font-size:var(--fs-s);line-height:1.5} .lede{color:var(--mut);max-width:24.6em} /* ---- bolum etiketi (h2): kucuk, solda; buyuk tipografi icerikte ---- */ .lab{display:flex;align-items:center;gap:10px;font-size:var(--fs-s);font-weight:800;line-height:1.3;letter-spacing:.01em} .lab::before{content:"";width:10px;height:10px;background:var(--blue);flex:none} /* ---- buton (kare, mavi) ---- */ .btn{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:0 24px;background:var(--blue);color:#fff;font-weight:800;font-size:var(--fs-b);line-height:1;text-decoration:none;transition:background-color .2s,transform .12s} .btn:hover{background:var(--ink)} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .btn[aria-disabled="true"],.btn[disabled]{background:var(--tint-n);color:#5b6270;pointer-events:none} .btn svg{width:22px;height:22px;flex:none;transition:transform .2s var(--ease)} .btn:hover svg{transform:translateX(4px)} .btn.sm{min-height:48px;padding:0 20px} /* ---- metin baglantisi ---- */ .ln{display:inline-flex;align-items:center;min-height:48px;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--blue);transition:color .2s} .ln:hover{color:var(--blue-d)} /* ---- bolum iskeleti: etiket + govde ---- */ .s{padding-block:var(--sec);border-top:1px solid var(--hair)} .s.n{background:var(--tint-n);border-top:0} #hizmetler.s{border-top:0} .s .wrap{display:grid;gap:32px} .s .lab{min-height:40px} @media (min-width:1024px){.s .wrap{grid-template-columns:3fr 9fr;column-gap:var(--gap);align-items:start}} /* ---- header: ince sabit bar ---- */ .bar{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--hair);padding-top:20px;padding-bottom:20px} .bar .wrap{height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{display:inline-flex;align-items:center;min-height:48px} .logo img{width:128px;height:auto} .nav-d{display:none} .nav-d a:not(.btn){display:inline-flex;align-items:center;min-height:48px;padding:0 4px;margin-right:24px;font-weight:800;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:2px} .nav-d a:not(.btn):hover{text-decoration:underline;text-decoration-color:var(--blue)} .mbtn{min-height:48px;min-width:64px;padding:0 4px 0 16px;font-weight:800;font-size:var(--fs-b);display:inline-flex;align-items:center;justify-content:flex-end;gap:8px} .mbtn::after{content:"+";font-size:var(--fs-m);line-height:1;font-weight:500;margin-top:-2px} .mbtn[aria-expanded="true"]::after{content:"\00d7"} @media (min-width:1024px){ .logo img{width:152px} .mbtn,.panel{display:none} .nav-d{display:flex;align-items:center} .nav-d .btn{margin-left:8px} } /* ---- menu paneli (mobil): bar yerinde kalir, panel altindan acilir ---- */ .panel{position:fixed;left:0;right:0;top:calc(var(--bar) + 40px);bottom:0;z-index:40;background:var(--white);padding:8px var(--pad) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .24s var(--ease),visibility 0s .24s} .panel.open{clip-path:inset(0);visibility:visible;transition:clip-path .24s var(--ease),visibility 0s} .panel nav a{display:flex;align-items:center;justify-content:space-between;min-height:72px;font-size:var(--fs-l);font-weight:800;letter-spacing:-.03em;line-height:1;text-decoration:none;border-bottom:1px solid var(--hair)} .panel nav a:hover{color:var(--blue-d)} .panel nav svg{width:28px;height:28px;flex:none;color:var(--blue)} .panel .btn{margin-top:24px} .panel .soc{margin-top:auto;padding-top:24px;display:flex;gap:24px;flex-wrap:wrap} /* ---- hero ---- */ .hero{padding-top:calc(var(--sec)/2)} .hero h1 .lt{font-weight:300} .hero .lede{margin-top:24px} .hero .btn{margin-top:32px;width:100%} .hero-body{display:block} @media (min-width:768px){.hero .btn{width:auto;min-width:300px}} @media (min-width:1024px){ .hero{padding-top:64px} .hero-body{display:block;margin-top:40px} .hero-body .lede{margin-top:0;max-width:27.5em} .hero .btn{margin-top:32px} } /* ---- satir bileseni: ortak (.rows; projeler kullanir) ---- */ .rows>li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;padding-block:24px;border-top:1px solid var(--hair)} .rows>li:first-child{border-top:0;padding-top:0} /* ---- satir bileseni: projeler (acik gri bant, kartsiz) ---- */ .pj>li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;min-height:80px;border-top:1px solid var(--hair)} .pj>li:last-child{border-bottom:1px solid var(--hair)} .pj .lg{display:flex;align-items:center;height:48px} .pj .lg img{width:auto;height:var(--lh,30px);max-width:200px;object-fit:contain;object-position:left center} .pj .nm{font-size:var(--fs-m);font-weight:800;line-height:1.1;letter-spacing:-.02em} .pj .ct{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-s);font-weight:700;color:var(--mut);white-space:nowrap} .pj .ct::before{content:"";width:8px;height:8px;background:var(--blue)} .pj .ct.g::before{background:var(--green)} @media (min-width:768px){ .pj{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:48px} .pj>li:nth-child(3){border-bottom:1px solid var(--hair)} .pj>li{min-height:96px} .pj>li:nth-child(1),.pj>li:nth-child(4){border-top:1px solid var(--hair)} } /* ---- teknolojiler: duz metin sutunlari ---- */ .tc{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);row-gap:0} .tc li{font-size:var(--fs-b);font-weight:800;letter-spacing:-.01em;padding-block:12px;line-height:1.3} @media (min-width:768px){.tc{grid-template-columns:repeat(3,1fr)}.tc li{font-size:var(--fs-m);padding-block:14px}} @media (min-width:1024px){.tc{grid-template-columns:repeat(4,1fr)}} /* ---- footer ---- */ .ftr{background:var(--tint-g);padding-block:var(--sec) 32px} .cta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;border-block:1px solid var(--hair);font-size:var(--fs-l);font-weight:800;letter-spacing:-.03em;line-height:1;text-decoration:none;transition:color .2s} .cta-row svg{width:.8em;height:.8em;flex:none;color:var(--blue);transition:transform .2s var(--ease)} .cta-row:hover{color:var(--blue-d)} .cta-row:hover svg{transform:translateX(6px)} .ftr .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px} .ftr h2{margin-bottom:8px} .ftr ul a{display:inline-flex;align-items:center;min-height:48px;font-weight:300;text-decoration:none} .ftr ul a:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px} .ftr .end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--hair);color:var(--mut)} .ftr .end .logo img{width:128px} @media (min-width:768px){.ftr .cols{grid-template-columns:repeat(3,1fr)}} @media (min-width:1024px){.ftr .cols{grid-template-columns:repeat(3,3fr)}} @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}} /* LabDorado v5 GUNCELLEME: hizmet kartlari + detay paneli + SSS. Bu dosya v5/assets/styles.css'in SONUNA eklenir (mevcut tokenlari bozmaz, yeni token ve sinif ekler). Yeni font-size / renk YOK: mevcut --fs-* ve renkler kullanilir. Istisnalar (yalniz kartlar+panel): ciftli yuvarlak kose YOK (kose 0 kalir, tek yuvarlak form = ceyrek daire, hero imzasinin dili), 1 golge recetesi (yalniz acik panel), gradient YOK. SILINECEK eski secililer (v5/assets/styles.css icinden, dosyanin sonunda "SIL" listesi var): .sv .no | .sv h3 | .sv p | @media(min-width:1024px){.sv>li... .sv .no ... .sv p ... .sv>li:first-child}. DOKUNMA: .rows>li (+ :first-child) kurallari .pj icin GEREKLI, silinmez. */ :root{ /* yay (spring): kisa, hafif tasma (%4,6). linear() desteklenmezse cubic-bezier yedegi */ --spring:cubic-bezier(.34,1.3,.64,1); --t-open:440ms; --t-close:320ms; } @supports (transition-timing-function:linear(0,1)){ :root{--spring:linear(0,.049,.166,.315,.47,.614,.739,.841,.918,.974,1.011,1.033,1.043,1.046,1.043,1.038,1.031,1.024,1.017,1.012,1.005,1)} } html{scrollbar-gutter:stable} html.lock{overflow:hidden} /* ========================================================= 1. HIZMET KARTLARI (
    >
  1. ) Kimlik: acik gri dolgu yuzey, kare kose, sag ust kosede YESIL CEYREK DAIRE + artisi (hero imzasinin dili), buyuk ince mavi numara. Hover/odak/acik: dolgu --tint-b, ceyrek daire buyur, arti doner. ========================================================= */ .svc-g{display:grid;grid-template-columns:1fr;gap:12px} .svc{position:relative;display:flex;flex-direction:column;padding:20px;background:var(--tint-n);overflow:hidden; transition:background-color .2s,transform .35s var(--spring);-webkit-tap-highlight-color:transparent} .svc:active{transform:scale(.98);transition-duration:.2s,.1s} .svc .no{font-size:var(--fs-l);line-height:1;font-weight:300;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.03em} .svc h3{padding-top:24px;font-size:var(--fs-m);line-height:1.12;letter-spacing:-.02em} .svc>p{margin-top:auto;padding-top:12px;color:var(--mut);max-width:24.6em;font-size:12px;font-weight:300} /* ceyrek daire + arti: yalniz JS ile (.js) gorunur */ .svc::before{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:var(--green);border-radius:0 0 0 100%;transform-origin:100% 0;transition:transform .45s var(--spring);display:none} .js .svc::before{display:block} .svc .pl{position:absolute;top:10px;right:10px;width:24px;height:24px;display:none;transition:rotate .45s var(--spring)} .js .svc .pl{display:block} .svc .pl::before,.svc .pl::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink)} .svc .pl::before{width:16px;height:2.5px;margin:-1.25px 0 0 -8px} .svc .pl::after{width:2.5px;height:16px;margin:-8px 0 0 -1.25px} /* tum karti kaplayan tiklama alani (button icinde h3 degil, h3 icinde button: gecerli HTML) */ .svc-b{display:block;width:100%;text-align:left;font:inherit;letter-spacing:inherit;color:inherit;font-weight:800;line-height:inherit} .svc-b::after{content:"";position:absolute;inset:0} .svc-b:focus-visible{outline:0} .svc:has(.svc-b:focus-visible){outline:3px solid var(--blue);outline-offset:3px;background:var(--tint-b)} .svc:has(.svc-b:focus-visible)::before{transform:scale(1.2)} .svc:has(.svc-b:focus-visible) .pl{rotate:90deg} @media (hover:hover){ .svc:hover{background:var(--tint-b)} .svc:hover::before{transform:scale(1.2)} .svc:hover .pl{rotate:90deg} } /* JS yoksa: detay listesi kartin altinda acik duz icerik; JS varsa gizli (panel bu icerigi kopyalar) */ .svc-det{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair)} .svc-det h4{font-size:var(--fs-s);font-weight:800;margin:0 0 4px} .svc-det li{padding-block:6px;color:var(--mut)} .svc-det .tech{margin-top:10px;font-size:var(--fs-s);color:var(--mut)} .svc-det .tech b{color:var(--ink);font-weight:800} .js .svc-det{display:none} @media (min-width:700px){.svc-g{grid-template-columns:1fr 1fr;gap:16px}.svc{min-height:300px;padding:24px}.svc h3{padding-top:40px}.svc::before{width:72px;height:72px}.svc .pl{top:12px;right:12px}} @media (min-width:1024px){.svc-g{grid-template-columns:repeat(3,1fr)}} /* ========================================================= 2. DETAY PANELI () Mobil: tam ekran sayfa. >=900: ortada buyuk panel (sol %5/12 acik mavi baslik alani, sag %7/12 icerik). ========================================================= */ .sp{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--white);color:var(--ink);overflow:hidden} .sp:not([open]){display:none} .sp::backdrop{background:rgba(244,246,249,.82)} .sp-in{display:grid;grid-template-columns:1fr;grid-template-areas:"top" "head" "main" "foot";grid-template-rows:auto auto 1fr auto;height:100%;overflow-y:auto;overscroll-behavior:contain} .sp-top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);min-height:var(--bar);border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--white);z-index:2} .sp-cnt{font-size:var(--fs-s);font-weight:800;font-variant-numeric:tabular-nums;color:var(--mut)} .sp-x{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 0 0 12px;font-weight:800;font-size:var(--fs-b);margin-right:-4px} .sp-x i{position:relative;width:28px;height:28px;rotate:45deg;display:block} .sp-x i::before,.sp-x i::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink)} .sp-x i::before{width:20px;height:2.5px;margin:-1.25px 0 0 -10px} .sp-x i::after{width:2.5px;height:20px;margin:-10px 0 0 -1.25px} .sp-x:hover{color:var(--blue-d)} .sp-head{grid-area:head;padding:32px var(--pad) 8px;position:relative} .sp-head::after{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:var(--green);border-radius:0 0 0 100%;display:none} .sp-no{display:block;font-size:var(--fs-xl);line-height:.96;font-weight:300;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.035em;transform-origin:0 100%} .sp-t{margin-top:12px;font-size:var(--fs-l);line-height:1;letter-spacing:-.03em;font-weight:800} .sp-d{margin-top:16px;color:var(--mut);max-width:24.6em} .sp-main{grid-area:main;padding:24px var(--pad) 32px} .sp-main h3{font-size:var(--fs-s);font-weight:800;line-height:1.3;display:flex;align-items:center;gap:10px;min-height:32px} .sp-main h3::before{content:"";width:10px;height:10px;background:var(--blue);flex:none} .sp-l{margin-top:8px} .sp-l li{padding-block:14px;border-top:1px solid var(--hair);font-weight:700} .sp-l li:last-child{border-bottom:1px solid var(--hair)} .sp-tech{margin-top:24px;color:var(--mut);font-size:var(--fs-b);line-height:1.6} .sp-tech b{display:block;color:var(--ink);font-weight:800;font-size:var(--fs-s);margin-bottom:2px} .sp-foot{grid-area:foot;position:sticky;bottom:0;z-index:2;display:flex;gap:8px;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--hair)} .sp-foot .btn{flex:1;min-width:0} .sp-nv{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:64px;min-height:64px;background:var(--tint-n);font-weight:800;transition:background-color .2s,transform .35s var(--spring)} .sp-nv:hover{background:var(--tint-b)} .sp-nv:active{transform:scale(.96);transition-duration:.2s,.1s} .sp-nv svg{width:22px;height:22px;flex:none;color:var(--blue)} .sp-nv span{display:none} .sp-nv:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} @media (min-width:900px){ .sp{inset:0;margin:auto;width:min(1120px,calc(100vw - 64px));height:min(760px,calc(100svh - 48px));border:1px solid var(--hair);box-shadow:0 24px 64px rgba(10,10,10,.12)} .sp-in{grid-template-columns:5fr 7fr;grid-template-areas:"head top" "head main" "head foot";grid-template-rows:auto 1fr auto;overflow:hidden} .sp-top{padding:0 32px;position:static} .sp-head{background:var(--tint-b);padding:32px;display:flex;flex-direction:column} .sp-head::after{display:block} .sp-no{margin-top:auto} .sp-t{margin-top:16px} .sp-d{margin-bottom:0} .sp-main{padding:24px 32px;overflow-y:auto} .sp-foot{position:static;padding:16px 32px;gap:8px} .sp-nv{padding:0 20px} .sp-nv span{display:inline} .sp-foot .btn{flex:1} } /* ========================================================= 3. ACILIS / KAPANIS HAREKETI (yalniz kullanici tetiklemeli; dongu YOK) Birincil: View Transitions ile kart -> panel morph (440 ms yay / kapanis 320 ms yumusak). Yedek: View Transitions yoksa .sp.fb girisi (opacity+translate+scale). Reduced-motion: hicbiri. ========================================================= */ ::view-transition-old(root),::view-transition-new(root){animation:none} ::view-transition-group(svc){animation-duration:var(--t-open);animation-timing-function:var(--spring)} /* ust-sola sabit, gerilmeyen goruntu: kart/panel anlik goruntusu bozulmadan acilan pencerede acigi cikar */ ::view-transition-old(svc),::view-transition-new(svc){height:100%;object-fit:none;object-position:0 0;animation-timing-function:linear;mix-blend-mode:normal} html.vt-open::view-transition-old(svc){animation:vt-out 120ms both} html.vt-open::view-transition-new(svc){animation:vt-in 160ms 40ms both} html.vt-close::view-transition-group(svc){animation-duration:var(--t-close);animation-timing-function:var(--ease)} html.vt-close::view-transition-old(svc){animation:vt-out 130ms both} html.vt-close::view-transition-new(svc){animation:vt-in 160ms 80ms both} @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0}} /* ic ogelerin sirali beliris: 3 grup (.g1 baslik, .g2 liste, .g3 alt cubuk), 0/50/100 ms + 120 ms baslangic */ .sp.in .g{animation:g-in 280ms var(--ease) calc(120ms + var(--i,0)*50ms) backwards} .g1{--i:0}.g2{--i:1}.g3{--i:2} @keyframes g-in{from{opacity:0;transform:translateY(14px)}} .sp.in .sp-no{animation:no-pop 480ms var(--spring) 110ms backwards} @keyframes no-pop{from{transform:scale(.7)}} .sp.in .sp-x i{animation:x-turn 460ms var(--spring) 90ms backwards} @keyframes x-turn{from{rotate:0deg}} /* sonraki/onceki: icerik yatay hafif kayarak degisir */ .sp.sw .g{animation:g-sw 240ms var(--ease) calc(var(--i,0)*40ms) backwards} @keyframes g-sw{from{opacity:0;transform:translateX(calc(var(--dir,1)*18px))}} .sp.sw .sp-no{animation:no-pop 420ms var(--spring) backwards} /* yedek giris/cikis */ .sp.fb{animation:sp-fb 360ms var(--spring) both} .sp.fb-out{animation:sp-fb-out 200ms var(--ease) both} @keyframes sp-fb{from{opacity:0;transform:translateY(24px) scale(.98)}} @keyframes sp-fb-out{to{opacity:0;transform:translateY(12px) scale(.99)}} @media (prefers-reduced-motion:reduce){ .sp *,.sp,.svc,.svc::before,.svc .pl{animation:none!important;transition-duration:.01ms!important} } /* ========================================================= 4. SSS (
    > h2.lab + div.faq > details) ========================================================= */ .faq details{border-top:1px solid var(--hair)} .faq details:last-child{border-bottom:1px solid var(--hair)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-block:16px;cursor:pointer;list-style:none;font-size:var(--fs-m);font-weight:800;line-height:1.15;letter-spacing:-.02em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";flex:none;width:48px;text-align:center;font-size:var(--fs-m);font-weight:500;line-height:1;color:var(--blue)} .faq details[open] summary::after{content:"\2212"} .faq summary:hover{color:var(--blue-d)} .faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:-3px} .faq details>p{padding:0 56px 24px 0;color:var(--mut);max-width:44.9em} @supports (interpolate-size:allow-keywords){ .faq{interpolate-size:allow-keywords} .faq details::details-content{block-size:0;overflow:clip;transition:block-size .2s var(--ease),content-visibility .2s allow-discrete} .faq details[open]::details-content{block-size:auto} } @media (prefers-reduced-motion:reduce){.faq details::details-content{transition:none!important}} /* LabDorado v5 COK SAYFALI SITE: /hizmetler/ + /hizmetler// + kabuk eklemeleri. Bu dosya v5/assets/styles.css'in SONUNA eklenir (v5-tokens.css + v5-update-tokens.css'ten SONRA). Mevcut tokenlari/siniflari BOZMAZ. Yeni font-size YOK (xl/l/m/b/s kullanilir), yeni renk YOK, golge YOK, gradient YOK, border yalniz 1px --hair. Tek yuvarlak form: ceyrek daire (hizmet kartlari ve detay sayfasi giris bandi). Yeniden kullanilan mevcut siniflar: .wrap .s .s.n .lab .btn .ln .t-xl .t-m .tc .cta-row .sr .logo .bar .panel .nav-d Dekoratif animasyon YOK; yalniz kullanici tetiklemeli geri bildirim (hover/odak/basis). */ :root{ --sec-s:calc(var(--sec)*.75); } /* hafif bolumler (ilgili hizmetler, onceki/sonraki): 54 / 72 / 96 px */ /* ========================================================= 0. KABUK: aktif sayfa, footer 4 sutun ========================================================= */ .nav-d a[aria-current]:not(.btn){text-decoration:underline;text-decoration-color:var(--blue)} .panel nav a[aria-current]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;text-decoration-color:var(--blue)} /* footer: Sayfalar | Hizmetler | Iletisim | Sosyal. <768: 2x2, 768-1023: 2x2, >=1024: 4 sutun */ .ftr .cols.c4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} @media (min-width:1024px){.ftr .cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}} /* anasayfa: bolum basligi satiri (Hizmetler + "Tum hizmetler ->") */ .sh{display:flex;align-items:center;justify-content:space-between;gap:16px} .sh .ln svg{width:20px;height:20px;flex:none;margin-left:8px;transition:transform .2s var(--ease)} .sh .ln:hover svg{transform:translateX(4px)} @media (min-width:1024px){.sh{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0}} /* anasayfa: panel basligindaki "Detay sayfasi ->" baglantisi + JS'siz kart ici baglanti */ .sp-more{margin-top:16px} .sp-more svg,.svc-det .ln svg{width:20px;height:20px;flex:none;margin-left:8px;transition:transform .2s var(--ease)} .sp-more:hover svg,.svc-det .ln:hover svg{transform:translateX(4px)} .svc-det .ln{margin-top:8px;position:relative;z-index:1} /* JS'siz: kart ici metin baglantisi (kart ust katmani yok, .svc-b yalniz JS ile var) */ /* ========================================================= 1. BREADCRUMB ========================================================= */ .bc ol{display:flex;flex-wrap:wrap;align-items:center} .bc li{display:inline-flex;align-items:center;min-height:48px;font-size:var(--fs-s);font-weight:700;line-height:1.3;color:var(--mut)} .bc li+li::before{content:"/";content:"/" / "";margin-inline:10px;font-weight:500} .bc a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;transition:color .2s} .bc a:hover{color:var(--blue-d);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:5px} .bc li[aria-current]{color:var(--ink);font-weight:800} /* ========================================================= 2. SAYFA GIRISI .pi /hizmetler/ :
    (beyaz; H1 tam genislik + lede 9 sutunda) detay :
    (acik mavi tam kenar bant + alt sag ceyrek daire; H1 + numara + giris) ========================================================= */ .pi{padding-bottom:var(--sec-s)} .pi.ix{padding-bottom:calc(var(--sec)/2)} .pi-g{display:grid;grid-template-columns:1fr;row-gap:12px;margin-top:8px} .pi h1{font-weight:800;text-wrap:balance;overflow-wrap:break-word;min-width:0} .pi.b h1{font-size:clamp(2.75rem,12.4vw,8.5rem);letter-spacing:-.015em;line-height:1.04;overflow-wrap:normal;hyphens:manual;margin-top:24px} .nw{white-space:nowrap} /* tireli kelime (E-Ticaret, back-end) tirede bolunmesin */ /* Hizmet detay girisi (kunye): baslik alta yaslanir, yesil ceyrek daire sag uste; altta 1px cizgiyle numara | giris | buton */ .pi.b{padding-bottom:0} .pi.b::after{top:0;bottom:auto;border-radius:0 0 0 100%;width:72px;height:72px} .pi.b .wrap{display:flex;flex-direction:column} .pi.b .bc{padding-right:64px;margin-bottom:8px} .pi-f{display:grid;grid-template-columns:1fr;row-gap:16px;margin-top:32px;padding-block:24px var(--sec-s);border-top:1px solid var(--hair)} .pi-no{font-size:var(--fs-l);line-height:1;font-weight:300;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.03em} .pi.b .pi-l{margin-top:0;max-width:26em;grid-column:auto;grid-row:auto} .pi-btn{width:100%;margin-top:8px} /* mobilde breadcrumb'in son halkasi (H1 ile ayni metin) gorsel gizli, ekran okuyucuda kalir */ @media (max-width:767px){.pi.b .bc li[aria-current]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} @media (min-width:768px){.pi-btn{width:auto;min-width:300px;justify-self:start}} @media (min-width:1024px){ .pi.b::after{width:var(--sec-s);height:var(--sec-s)} .pi.b .wrap{min-height:min(620px,calc(100vh - 112px))} .pi.b h1{margin-top:auto;padding-top:64px;max-width:14em} .pi-f{grid-template-columns:3fr 6fr 3fr;column-gap:var(--gap);align-items:start;margin-top:48px;padding-block:32px 56px} .pi-btn{justify-self:end;min-width:0;width:100%;margin-top:0} } .pi .no{order:-1;font-size:var(--fs-l);line-height:1;font-weight:300;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.03em} .pi-l{margin-top:12px;font-size:var(--fs-m);line-height:1.25;font-weight:500;letter-spacing:-.02em;max-width:26em;text-wrap:pretty} .pi.ix .pi-l{margin-top:12px;font-size:var(--fs-b);line-height:1.6;letter-spacing:0;color:var(--mut);max-width:24.6em} /* bant: kenardan kenara; ceyrek daire alt sag kosede (yukseklik = alt dolgu, metinle cakismaz) */ .pi.b{position:relative;background:var(--tint-b);overflow:hidden} .pi.b::after{content:"";position:absolute;right:0;bottom:0;width:var(--sec-s);height:var(--sec-s);background:var(--green);border-radius:100% 0 0 0} @media (min-width:1024px){ .pi-g{grid-template-columns:3fr 9fr;column-gap:var(--gap);row-gap:32px;margin-top:16px;align-items:start} .pi h1{grid-column:1/-1;grid-row:1} .pi .no{order:0;grid-column:1;grid-row:2;margin-top:6px} .pi-l{grid-column:2;grid-row:2;margin-top:0} .pi.ix .pi-l{grid-column:2;grid-row:2;max-width:27.5em;margin-top:0} } /* ========================================================= 3. HIZMET BAGLANTI KARTI .sl (/hizmetler/ ; panel acmaz, gercek baglanti)

    1. Ad

      kisa aciklama

      Arac · Arac · Arac

      2. Ceyrek daire + ok HER ZAMAN gorunur (JS'e bagli degil). Hover/odak: dolgu --tint-b, ceyrek daire buyur, ok -45 derece doner (-> ↗). ========================================================= */ .sl-g{display:grid;grid-template-columns:1fr;gap:12px} .sl{position:relative;display:flex;flex-direction:column;padding:20px;background:var(--tint-n);overflow:hidden; transition:background-color .2s,transform .35s var(--spring);-webkit-tap-highlight-color:transparent} .sl:active{transform:scale(.98);transition-duration:.2s,.1s} .sl::before{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:var(--green);border-radius:0 0 0 100%;transform-origin:100% 0;transition:transform .45s var(--spring)} .sl .ar{position:absolute;top:10px;right:10px;width:24px;height:24px;color:var(--ink);transition:rotate .45s var(--spring)} .sl .no{font-size:var(--fs-l);line-height:1;font-weight:300;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.03em} .sl h2{padding-top:24px;font-size:var(--fs-m);line-height:1.12;letter-spacing:-.02em} .sl h2 a{color:inherit;text-decoration:none} .sl h2 a::after{content:"";position:absolute;inset:0} /* kartin tamami tiklanir */ .sl h2 a:focus-visible{outline:0} .sl:has(h2 a:focus-visible){outline:3px solid var(--blue);outline-offset:3px;background:var(--tint-b)} .sl:has(h2 a:focus-visible)::before{transform:scale(1.2)} .sl:has(h2 a:focus-visible) .ar{rotate:-45deg} .sl p{margin-top:12px;color:var(--mut);max-width:24.6em} .sl .tg{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);font-size:var(--fs-s);font-weight:700;line-height:1.5;color:var(--mut);max-width:none} .sl h2+p{margin-bottom:24px} @media (hover:hover){ .sl:hover{background:var(--tint-b)} .sl:hover::before{transform:scale(1.2)} .sl:hover .ar{rotate:-45deg} } @media (min-width:700px){ .sl-g{grid-template-columns:1fr 1fr;gap:16px} .sl{min-height:340px;padding:24px} .sl h2{padding-top:40px} .sl::before{width:72px;height:72px} .sl .ar{top:12px;right:12px} } @media (min-width:1024px){.sl-g{grid-template-columns:repeat(3,1fr)}} .cs{padding-bottom:var(--sec)} /* ========================================================= 4. MADDE LISTESI .ml ("Neler yapiyoruz")