body{margin:0}
a[href^="mailto:"]{text-transform:none !important;letter-spacing:.02em}
.root .prj .tb{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.root .prj .tb:has(>div:nth-child(3)){grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.8fr)}
.root .tb b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega .mcol ul li a{font-size:14px}


body{margin:0}
a[href^="mailto:"]{text-transform:none !important;letter-spacing:.02em}
.root .prj .tb{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.root .prj .tb:has(>div:nth-child(3)){grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,.8fr)}
.root .tb b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soc2{display:flex;gap:10px;margin-top:4px}
.siw{position:relative;display:inline-flex}
.si{position:relative;width:46px;height:46px;border-radius:12px;border:1px solid #26354F;background:#0F1A2C;color:#D5DCE8;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:color .25s,border-color .25s,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.si::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#05C4FD,#3289ED 50%,#7A28D4);opacity:0;transition:opacity .3s}
.si svg{position:relative}
.si:hover,.si:focus-visible{color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(50,137,237,.7)}
.si:hover::before,.si:focus-visible::before{opacity:1}
.siw .tip{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);white-space:nowrap;background:linear-gradient(135deg,#05C4FD,#3289ED 50%,#7A28D4);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:6px 9px;border-radius:7px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1),visibility .2s}
.siw .tip::after{content:'';position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#3289ED}
.siw:hover .tip,.siw:focus-within .tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nlf{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding:24px;border:1px solid #1E2A40;border-radius:14px;background:rgba(17,26,43,.6)}
.nlf form{display:flex;gap:10px;flex:1 1 320px;max-width:460px}
.nlf input{flex:1;min-width:0;font:inherit;font-size:15px;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid #2A3956;background:#0F1828;color:#F4F6FA;outline:none}
.nlf input:focus{border-color:#3289ED;box-shadow:0 0 0 4px rgba(50,137,237,.2)}


body{margin:0;background:#F7F8FA}
a[href^="mailto:"]{text-transform:none !important;letter-spacing:.02em}
.lgx{gap:0}
.lgm{position:relative;display:block;width:148px;height:44px;background-color:#8A95A8;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:background-color .35s}
.lg2:hover .lgm{background-color:#FFFFFF}
.dkm .lgm{background-color:#C2CBD9}
.dkm .lg2:hover .lgm{background-color:#FFFFFF}
.mr .lgm{width:112px;height:34px}
.lg-siemens{-webkit-mask-image:url(/assets/images/embedded/1edda6cf4781.png);mask-image:url(/assets/images/embedded/1edda6cf4781.png)}
.lg-abb{-webkit-mask-image:url(/assets/images/embedded/3d0762c1dd5b.png);mask-image:url(/assets/images/embedded/3d0762c1dd5b.png)}
.lg-schneider{-webkit-mask-image:url(/assets/images/embedded/1a61af3dc8ca.png);mask-image:url(/assets/images/embedded/1a61af3dc8ca.png)}
.lg-mitsubishi{-webkit-mask-image:url(/assets/images/embedded/33547e671dab.png);mask-image:url(/assets/images/embedded/33547e671dab.png)}
.lg-omron{-webkit-mask-image:url(/assets/images/embedded/1485a21f6cac.png);mask-image:url(/assets/images/embedded/1485a21f6cac.png)}
.lg-delta{-webkit-mask-image:url(/assets/images/embedded/eba5345756dd.png);mask-image:url(/assets/images/embedded/eba5345756dd.png)}
.lg-weintek{-webkit-mask-image:url(/assets/images/embedded/45a1afc8bc5f.png);mask-image:url(/assets/images/embedded/45a1afc8bc5f.png)}
.lg-microchip{-webkit-mask-image:url(/assets/images/embedded/e27345590465.png);mask-image:url(/assets/images/embedded/e27345590465.png)}
.lg-st{-webkit-mask-image:url(/assets/images/embedded/6d9e0ce87c7d.png);mask-image:url(/assets/images/embedded/6d9e0ce87c7d.png)}
.lg-ti{-webkit-mask-image:url(/assets/images/embedded/4978d7b7747f.png);mask-image:url(/assets/images/embedded/4978d7b7747f.png)}
.lg-espressif{-webkit-mask-image:url(/assets/images/embedded/1ead5fcfa858.png);mask-image:url(/assets/images/embedded/1ead5fcfa858.png)}
.lg-jlcpcb{-webkit-mask-image:url(/assets/images/embedded/973f1a172509.png);mask-image:url(/assets/images/embedded/973f1a172509.png)}
.lg-ozdisan{-webkit-mask-image:url(/assets/images/embedded/5d2061d416b1.png);mask-image:url(/assets/images/embedded/5d2061d416b1.png)}
.lg-gmt{-webkit-mask-image:url(/assets/images/embedded/6b56579d3892.png);mask-image:url(/assets/images/embedded/6b56579d3892.png)}
.ph-photo{background-image:none}
.ph-p1{--img:url(/assets/images/oto43.webp);--pos:50% 50%}
.ph-p2{--img:url(/assets/images/ele169.webp);--pos:50% 45%}
.ph-p3{--img:url(/assets/images/mak43.webp);--pos:50% 42%}
.ph-p4{--img:url(/assets/images/ser916.webp);--pos:50% 60%}
.ph-p5{--img:url(/assets/images/yaz916.webp);--pos:50% 48%}
.ph-dk.ph-photo::after{background-image:radial-gradient(circle,#2E3E5A 1px,transparent 1.3px)}
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
@property --x{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --y{syntax:'<percentage>';inherits:false;initial-value:50%}
.tw{position:absolute;inset:0;pointer-events:none;transition:opacity 1.1s ease}
.tw i{position:absolute;inset:0;--x:50%;--y:50%;--r:0px;--c:#3289ED;opacity:0;
background-image:radial-gradient(circle,var(--c) 1.5px,transparent 2px),radial-gradient(circle at var(--x) var(--y),color-mix(in srgb,var(--c) 16%,transparent),transparent var(--r));
background-size:16px 16px,100% 100%;
-webkit-mask-image:radial-gradient(circle at var(--x) var(--y),#000 0,#000 calc(var(--r) * .25),transparent var(--r));mask-image:radial-gradient(circle at var(--x) var(--y),#000 0,#000 calc(var(--r) * .25),transparent var(--r))}
@keyframes rp{0%{--r:0px;opacity:0}12%{opacity:1}100%{--r:520px;opacity:0}}
.tw i:nth-child(1){--c:#05C4FD}.svc:not(:hover) .tw i:nth-child(1){animation:rp 7s ease-out 0s infinite,hp1 28s step-end 0s infinite}
@keyframes hp1{0%{--x:18%;--y:28%}25%{--x:72%;--y:18%}50%{--x:40%;--y:78%}75%{--x:86%;--y:62%}}
.tw i:nth-child(2){--c:#3289ED}.svc:not(:hover) .tw i:nth-child(2){animation:rp 8.5s ease-out 1.6s infinite,hp2 34s step-end 1.6s infinite}
@keyframes hp2{0%{--x:64%;--y:72%}25%{--x:22%;--y:60%}50%{--x:78%;--y:30%}75%{--x:34%;--y:16%}}
.tw i:nth-child(3){--c:#7A28D4}.svc:not(:hover) .tw i:nth-child(3){animation:rp 10s ease-out 3.2s infinite,hp3 40s step-end 3.2s infinite}
@keyframes hp3{0%{--x:46%;--y:40%}25%{--x:12%;--y:84%}50%{--x:90%;--y:86%}75%{--x:58%;--y:10%}}
.svc:hover .tw{opacity:0}
.still .tw{display:none}
.ph-photo::before{content:'';position:absolute;inset:0;background:var(--img) var(--pos,center)/cover no-repeat;opacity:.3;transition:opacity 1.1s ease}
.ph-photo::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,#C3CCD9 1px,transparent 1.3px);background-size:16px 16px;opacity:1;transition:opacity 1.1s ease}
.svc:hover .ph-photo::before{opacity:1}
.svc:hover .ph-photo::after{opacity:0}
.dkm .ph-photo::before{opacity:.37}.dkm .svc:hover .ph-photo::before{opacity:1}
.dkm .ph-photo::after{background-image:radial-gradient(circle,#2E3E5A 1px,transparent 1.3px)}
.hsl{display:grid}
.hs{grid-area:1/1;display:flex;flex-direction:column;gap:22px;opacity:0;animation:hsw 18s cubic-bezier(.4,0,.2,1) infinite}
.hs:nth-child(2){animation-delay:6s}.hs:nth-child(3){animation-delay:12s}
@keyframes hsw{0%{opacity:0;transform:translateY(18px)}4%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-10px)}}
.still .hs{animation:none}.still .hs:first-child{opacity:1}
.hbar{display:flex;gap:8px;align-items:center}
.hbar i{position:relative;display:block;width:44px;height:3px;border-radius:3px;background:#D5DCE6;overflow:hidden}
.hbar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#05C4FD,#3289ED,#7A28D4);transform-origin:left;transform:scaleX(0);animation:hbar 18s linear infinite}
.hbar i:nth-child(2)::after{animation-delay:6s}.hbar i:nth-child(3)::after{animation-delay:12s}
@keyframes hbar{0%{transform:scaleX(0)}33.3%{transform:scaleX(1)}33.4%,100%{transform:scaleX(0)}}
.still .hbar i::after{animation:none}
.dkm .hbar i{background:#26354F}
.cntb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid #D9DFE8}
.cntb>div{position:relative;padding:34px 28px;border-right:1px solid #D9DFE8;display:flex;flex-direction:column;gap:10px}
.cntb strong{font-family:Manrope,sans-serif;font-weight:800;font-size:52px;letter-spacing:-0.04em;line-height:1;background:linear-gradient(90deg,#05C4FD,#3289ED 55%,#7A28D4);-webkit-background-clip:text;background-clip:text;color:transparent}
.cntb>div::before{content:'';position:absolute;left:-5px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--nodebg);border:1.5px solid var(--nodebd);animation:capn 8s ease-in-out infinite}
.cntb>div:nth-child(2)::before{animation-delay:2s}.cntb>div:nth-child(3)::before{animation-delay:4s}.cntb>div:nth-child(4)::before{animation-delay:6s}
.dkm .cntb,.dkm .cntb>div{border-color:#24324C}
.pos3 .trk{transform:translateX(calc(-150% - 36px))}
.pos4 .trk{transform:translateX(calc(-200% - 48px))}
.pos5 .trk{transform:translateX(calc(-250% - 60px))}
.snap .trk{transition:none !important}
@media (max-width:760px){.pos3 .trk{transform:translateX(calc(-300% - 72px))}.pos4 .trk{transform:translateX(calc(-400% - 96px))}.pos5 .trk{transform:translateX(calc(-500% - 120px))}}
.tq{font-weight:500}
.rel3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tst .dot.on i{position:relative;overflow:hidden;background:#D5DCE6}
.tst .dot.on i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#05C4FD,#3289ED,#7A28D4);transform-origin:left;transform:scaleX(0);animation:dotfill 6s linear forwards}
.dkm .tst .dot.on i{background:#26354F}
.still .tst .dot.on i{background:#1C66C9}.still .tst .dot.on i::after{display:none}
.clogo3{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:56px;padding:9px 14px;border:1px solid #E1E6ED;border-radius:12px;background:#fff}
.cl-img{display:block;flex:1;min-width:0;height:100%;background-position:left center;background-size:contain;background-repeat:no-repeat}
.cl-stara{background-image:url(/assets/tl-stara.png)}
.cl-tekno{background-image:url(/assets/tl-tekno.png)}
.cl-safak{background-image:url(/assets/tl-safak.png)}
.cl-arlon{background-image:url(/assets/tl-arlon.png)}
.cl-inf{flex:none;width:38px;background-image:url(/assets/logo.png)}
.cl-wm{display:none;flex-direction:column;line-height:1}.cl-wm.on{display:flex}
.cl-wm strong{font-family:Manrope,sans-serif;font-weight:800;font-size:18px;letter-spacing:-0.02em;color:#0E1726}
.cl-wm span{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.3em;color:#5A6478;margin-top:4px}
.dkm .clogo3{border-color:#2A3A57}
.clogo2{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:56px;padding:0 14px;border:1px dashed #C3CCD9;border-radius:12px;background:#F7F8FA}
.clogo2 b{font-family:Manrope,sans-serif;font-weight:800;font-size:20px;letter-spacing:-0.02em;background:linear-gradient(90deg,#05C4FD,#3289ED,#7A28D4);-webkit-background-clip:text;background-clip:text;color:transparent}
.clogo2 span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:#8C97AB}
.dkm .clogo2{background:#0F1828;border-color:#34466A}
.tc-top{gap:18px}
.who2{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid #EDF0F4}
.who2 strong{display:block;font-family:Manrope,sans-serif;font-size:16px;color:#0E1726}
.who2 .sc{font-size:13.5px;color:#4B5567}
.dkm .who2{border-color:#1E2A40}.dkm .who2 strong{color:#F4F6FA}.dkm .who2 .sc{color:#AEB8C9}
.secl{display:flex;flex-direction:column;gap:14px;padding:18px 0;border-top:1px solid #DCE2EA;border-bottom:1px solid #DCE2EA}
.secl p{margin:0;font-family:Manrope,sans-serif;font-weight:700;font-size:17px;line-height:1.4;color:#0E1726}
.dkm .secl p{color:#F4F6FA}.dkm .secl{border-color:#24324C}
.coml{display:flex;flex-wrap:wrap;gap:8px}



/* Mobile dimensions from P3M-Ana; retain all approved desktop content. */
@media(max-width:767px){
 .hero{padding:22px 0 40px}.hero-g{gap:24px}
 .cntb{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cntb>div{padding:18px 16px;gap:8px;min-height:96px;border-bottom:1px solid #D9DFE8}
 .cntb strong{font-size:36px}.cntb .mono{font-size:10px}
 .dkm .cntb>div{border-bottom-color:#24324C}
 .rel3{grid-template-columns:minmax(0,1fr)}
}

.hero .hsl .h1{font-size:clamp(40px,4.7vw,66px)}.svc.s-a .h3{font-size:28px}.diagram-logo{width:54px;height:auto;display:block}
@media(max-width:767px){
 .root .hero .hsl .h1{font-size:34px}.svc.s-a .h3{font-size:22px}
 .svc{padding:20px}.s-a .ph{min-height:0;aspect-ratio:16/9}
 .cap-g{grid-template-columns:minmax(0,1fr)}.cap{min-height:0}.cap-top{flex-wrap:wrap}
 .hero .btn{width:100%}.cta .btn{width:100%}
 .dcore{padding:12px}.diagram-logo{width:40px}.dcore strong{font-size:15px}.dcore .mono{font-size:9px}
 .dnode{padding:8px 10px}.dnode strong{font-size:14px}
}
@media(max-width:359px){.root .hero .hsl .h1{font-size:32px}}

.diagram-caption{font-size:10px;color:#8C97AB}
@media(max-width:767px){.dcore .diagram-caption{font-size:9px}}
@media(max-width:359px){.dcore{padding:8px;gap:6px}.diagram-logo{width:32px}.dcore strong{font-size:13.5px}.dcore .diagram-caption{font-size:8px}.dnode{padding:8px}.dnode strong{font-size:12px}}

/* project-card:v1 — single style source for all project cards (markup: src/components/project-card.mjs).
   Bundled by tools/build.mjs into every page that renders a card; do not copy these rules into page CSS.
   Base geometry (.prj, .ph 320/300px, .prj-ov, .tb, p1–p4/w7/w5 spans, hover zoom, dark tokens) stays in
   claude-original.css; claude-mobile.css keeps the 200px mobile media height. Variants are layout-only. */
.root .prj{min-width:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none}
.root .prj:focus{outline:none}
.root .prj:focus-visible{outline:3px solid #3289ed;outline-offset:4px}
.root .prj .ph-wrap{position:relative;flex:none;overflow:hidden}
/* Real covers always fill the media box: no letterbox bars on any card size. */
.root .prj .ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;-webkit-user-drag:none;user-select:none;pointer-events:none}
.root .prj-ov{gap:10px;padding:26px}
.root .prj-ov .prj-cat{color:#7FD8FB}
.root .prj-ov .prj-ov-t{font-family:Manrope,sans-serif;font-size:20px;font-weight:700;line-height:1.3;color:#fff;overflow-wrap:break-word}
.root .prj-ov .lnk{color:#fff}
/* Full title above a compact sector/discipline pair, shared at all card widths. */
.root .prj .tb{flex:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.root .prj .tb:has(>div:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
.root .prj .tb>div:first-child{grid-column:1/-1}
.root .prj .tb>div:nth-child(2){border-left:0}
.root .prj .tb>div:nth-child(n+2){border-top:1px solid #E1E6ED}
.root .prj .tb>div:nth-child(3){border-left:1px solid #E1E6ED}
.root.dkm .prj .tb>div:nth-child(n+2){border-top-color:#1E2A40}
.root.dkm .prj .tb>div:nth-child(3){border-left-color:#1E2A40}
.root .prj .tb b{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;line-height:1.4}
/* Atomic project tags: compact wrapping row under the bar, always visible (not hover-only); fills equal-height rows. */
.root .prj-tags{flex:1 0 auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;padding:12px 20px 16px;border-top:1px solid #E1E6ED}
.root .prj-tag{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:6px;background:#F1F4F8;border:1px solid #E0E6EE;font-size:12px;font-weight:500;line-height:1.3;color:#344055;max-width:100%;overflow-wrap:anywhere}
.root .prj-tags,.root .prj-tag{transition:background-color .6s ease,border-color .6s ease,color .6s ease}
.dkm .prj-tags{border-top-color:#1E2A40}
.dkm .prj-tag{background:#16213A;border-color:#26354F;color:#C9D2E0}
/* Short variant: related grids on service and project detail pages. */
.rg3 .prj .ph,.rg3 .prj-ov{height:240px}
@media(max-width:767px){
 .root .prj-ov{gap:8px;padding:18px 20px}
 .root .prj-ov .prj-ov-t{font-size:17px}
 .root .prj .tb b{font-size:14.5px}
 .root .prj-tags{gap:5px;padding:10px 14px 12px}
 .root .prj-tag{font-size:11.5px;padding:2px 8px}
}

/* Project collection controls: homepage CTA under the featured grid, listing "Daha Fazla". */
.root .prj-cta{position:relative;margin-top:28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding:28px 32px 28px 36px;background:#fff;border:1px solid #E1E6ED;border-radius:16px;overflow:hidden}
.root .prj-cta::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#05C4FD,#3289ED 55%,#7A28D4)}
.root .prj-cta .h3{font-weight:800;font-size:clamp(21px,2vw,26px);letter-spacing:-.02em;line-height:1.2}
.root .prj-cta .btn{flex:none;-webkit-tap-highlight-color:transparent}
.dkm .prj-cta{background:#111A2B;border-color:#1E2A40}
.root .prj-more{display:flex;justify-content:center;margin-top:36px}
.root .prj-more .btn{-webkit-tap-highlight-color:transparent;transition:border-color .3s ease,color .3s ease,background-color .3s ease}
.root .prj-more .btn:focus:not(:focus-visible),.root .prj-cta .btn:focus:not(:focus-visible){outline:none}
@media(max-width:767px){
 .root .prj-cta{flex-direction:column;align-items:stretch;gap:18px;padding:24px 20px 24px 24px}
 .root .prj-cta .btn{width:100%}
 .root .prj-more .btn{width:100%}
}