:root{
  --black:#222;
  --white:#fff;
  --offwhite:#f5f5f3;
  --blue:#1238f5;
  --gray:#6e6e6e;
  --line:#dededc;
  --max:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",Arial,sans-serif;background:#fff;color:var(--black);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button,input,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 60px));margin:auto}
.section{padding:120px 0;border-bottom:1px solid var(--line)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.eyebrow:before{content:"";width:8px;height:8px;background:var(--blue);display:block;flex:none}
.blue{color:var(--blue)}
.header{position:fixed;z-index:5000;top:0;left:0;right:0;height:84px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{width:145px;display:flex;align-items:center}
.logo img{width:100%;height:auto}
.menu{display:flex;align-items:center;gap:36px}
.menu a{font-size:14px;font-weight:600;position:relative}
.menu a:after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--blue);transition:.25s}
.menu a:hover:after,.menu a.active:after{width:100%}
.menu a.active{color:var(--blue)}
.contact-btn,.customer-btn,.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--black);font-size:13px;font-weight:700;min-height:50px;padding:0 23px;transition:.3s}
.nav-actions{display:flex;align-items:center;gap:10px}
.contact-btn{background:var(--black);color:#fff}
.contact-btn:hover,.btn-primary:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.customer-btn{background:#fff;color:var(--black);white-space:nowrap}
.customer-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.btn-primary{background:var(--black);color:#fff}
.btn-outline:hover{background:var(--black);color:#fff}
.mobile-button{display:none;border:0;background:none;font-size:25px;cursor:pointer}
.hero{padding-top:84px;min-height:calc(100vh - 0px);display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 84px)}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:90px 0}
.hero-title{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(58px,8vw,126px);line-height:.92;letter-spacing:-5px;font-weight:600;max-width:850px;overflow-wrap:normal;word-break:normal}
.hero-title .blue-word{display:block;color:var(--blue)}
.hero-description{max-width:550px;font-size:17px;line-height:1.75;color:var(--gray);margin-top:35px}
.hero-actions{display:flex;gap:12px;margin-top:32px}
.hero-right{position:relative;border-left:1px solid var(--line);background:#f0f0ee;overflow:hidden}
.hero-image{position:absolute;inset:70px 55px 55px;overflow:hidden}
.hero-image img{height:100%;object-fit:cover;transition:.7s}
.hero-image:hover img{transform:scale(1.04)}
.hero-label{position:absolute;z-index:3;top:35px;right:35px;width:112px;height:112px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:700;line-height:1.45;transform:rotate(8deg)}
.hero-number{position:absolute;bottom:25px;left:25px;font-family:"Space Grotesk";font-size:90px;color:rgba(17,17,17,.08);line-height:1}
.marquee{overflow:hidden;background:var(--black);color:#fff}
.marquee-track{display:flex;width:max-content;animation:marquee 24s linear infinite}
.marquee-item{display:flex;align-items:center;gap:30px;padding:22px 34px;font-family:"Space Grotesk";font-size:20px;font-weight:600;white-space:nowrap}
.marquee-item span{color:var(--blue)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px}
.section-title{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(46px,6.5vw,94px);line-height:.94;letter-spacing:-4px;font-weight:600}
.section-head p{max-width:410px;color:var(--gray);line-height:1.75}
.intro{padding:130px 0;border-bottom:1px solid var(--line)}
.intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:80px}
.intro-text{font-family:"Space Grotesk";font-size:clamp(35px,4.8vw,68px);line-height:1.03;letter-spacing:-3px}
.intro-text span{color:#a2a2a0}
.intro-side{max-width:480px;margin-top:35px;color:var(--gray);line-height:1.8}
.service-list{border-top:1px solid var(--black)}
.service{display:grid;grid-template-columns:90px 1fr 1fr 60px;align-items:center;min-height:130px;border-bottom:1px solid var(--line);transition:.3s}
.service:hover{background:var(--black);color:#fff;padding:0 18px}
.service-number{font-size:12px;color:var(--blue);font-weight:700}
.service-name{font-family:"Space Grotesk";font-size:clamp(27px,3.5vw,48px);letter-spacing:-2px}
.service-description{color:var(--gray);font-size:13px;line-height:1.5}
.service:hover .service-description{color:#aaa}
.service-arrow{font-size:28px;text-align:right}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.work-card{position:relative;overflow:hidden;background:#ddd}
.work-card:nth-child(1){grid-column:span 7;height:580px}.work-card:nth-child(2){grid-column:span 5;height:580px}
.work-card:nth-child(3){grid-column:span 5;height:430px}.work-card:nth-child(4){grid-column:span 7;height:430px}
.work-card img{height:100%;object-fit:cover;transition:.7s}.work-card:hover img{transform:scale(1.05)}
.work-overlay{position:absolute;left:0;right:0;bottom:0;padding:30px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.work-category{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ddd;margin-bottom:9px}.work-title{font-family:"Space Grotesk";font-size:30px}
.numbers{background:var(--offwhite)}.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--black);border-bottom:1px solid var(--black)}
.number{padding:50px 28px;border-right:1px solid var(--line)}.number:last-child{border-right:0}.number strong{display:block;font-family:"Space Grotesk";font-size:66px;line-height:1;letter-spacing:-4px}.number span{display:block;margin-top:12px;color:var(--gray);font-size:13px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.about-image{height:620px;overflow:hidden}.about-image img{height:100%;object-fit:cover}
.about-content h2{font-family:"Space Grotesk";font-size:clamp(50px,6vw,82px);line-height:.94;letter-spacing:-4px;margin:25px 0 30px}.about-content p{max-width:520px;color:var(--gray);line-height:1.8;margin-bottom:18px}
.process{background:var(--black);color:#fff}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border-top:1px solid #333}.process-item{padding:34px 24px 44px;border-right:1px solid #333}.process-item:last-child{border-right:0}.process-number{color:var(--blue);font-family:"Space Grotesk";font-size:13px;margin-bottom:65px}.process-item h3{font-family:"Space Grotesk";font-size:28px;margin-bottom:13px}.process-item p{color:#999;line-height:1.7;font-size:14px}
.page-hero{padding:170px 0 95px;border-bottom:1px solid var(--line);background:#fafaf8}.page-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end}.page-hero h1{font-family:"Space Grotesk";font-size:clamp(60px,9vw,130px);line-height:.86;letter-spacing:-6px}.page-hero p{max-width:430px;color:var(--gray);line-height:1.8}
.service-detail{display:grid;grid-template-columns:80px 1fr 1fr;gap:40px;padding:55px 0;border-bottom:1px solid var(--line)}.service-detail:last-child{border-bottom:0}.service-detail h2{font-family:"Space Grotesk";font-size:42px;letter-spacing:-2px}.service-detail p{color:var(--gray);line-height:1.8}.service-detail ul{list-style:none;margin-top:22px;color:#444}.service-detail li{padding:8px 0;border-bottom:1px solid #eee;font-size:13px}
.reference-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.reference-card{border:1px solid var(--line);background:#fff;overflow:hidden}.reference-card img{height:420px;object-fit:cover}.reference-info{padding:25px}.reference-info small{color:var(--blue);font-weight:700;letter-spacing:1.5px}.reference-info h2{font-family:"Space Grotesk";font-size:30px;margin-top:8px}.reference-info p{color:var(--gray);line-height:1.6;margin-top:10px;font-size:14px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-title{font-family:"Space Grotesk";font-size:clamp(48px,6vw,85px);line-height:.9;letter-spacing:-4px}.contact-copy{color:var(--gray);line-height:1.8;margin-top:28px;max-width:470px}.contact-details{margin-top:40px;display:grid;gap:18px}.contact-detail span{display:block;color:#888;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px}.contact-detail a,.contact-detail strong{font-size:19px}
.form{border-top:1px solid var(--black)}.field{padding:20px 0;border-bottom:1px solid var(--line)}.field label{display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}.field input,.field textarea{width:100%;border:0;outline:0;background:transparent;font-size:17px;color:var(--black);resize:vertical}.field textarea{min-height:120px}.form .btn{margin-top:25px}
.cta{padding:140px 0;background:var(--blue);color:#fff;position:relative;overflow:hidden}.cta h2{font-family:"Space Grotesk";font-size:clamp(60px,9vw,140px);line-height:.84;letter-spacing:-7px}.cta p{max-width:520px;color:#dfe4ff;line-height:1.7;margin-top:35px}.cta-button{display:inline-flex;margin-top:30px;padding:17px 25px;background:#fff;color:var(--black);font-weight:700;font-size:13px}.cta-shape{position:absolute;right:-180px;top:-170px;width:520px;height:520px;border:100px solid rgba(255,255,255,.08);transform:rotate(45deg)}
footer{background:var(--black);color:#fff;padding:75px 0 28px}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:45px;padding-bottom:65px;border-bottom:1px solid #333}.footer-logo{width:145px}.footer-brand p{color:#888;max-width:350px;line-height:1.7;margin-top:22px}.footer-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#777;margin-bottom:18px}.footer-links{display:grid;gap:12px}.footer-links a{font-size:14px;color:#ddd}.footer-links a:hover{color:var(--blue)}.footer-bottom{display:flex;justify-content:space-between;padding-top:23px;color:#666;font-size:12px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){
.container{width:min(100% - 32px,var(--max))}
.menu{display:none;position:absolute;top:84px;left:0;right:0;padding:24px 20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:20px}.menu.active{display:flex}.nav-actions .contact-btn{display:none}.mobile-button{display:block}
.hero-grid,.page-hero-grid{grid-template-columns:1fr}.hero-left{min-height:65vh}.hero-right{height:500px;border-left:0;border-top:1px solid var(--line)}
.section-head{display:block}.section-head p{margin-top:25px}.intro-grid{grid-template-columns:1fr;gap:35px}.service{grid-template-columns:55px 1fr 45px}.service-description{display:none}
.work-card:nth-child(n){grid-column:span 12;height:430px}.numbers-grid{grid-template-columns:1fr 1fr}.number:nth-child(2){border-right:0}.number:nth-child(-n+2){border-bottom:1px solid var(--line)}
.about-grid,.contact-grid{grid-template-columns:1fr;gap:55px}.about-image{height:500px}.process-grid{grid-template-columns:1fr 1fr}.process-item:nth-child(2){border-right:0}.process-item:nth-child(-n+2){border-bottom:1px solid #333}.footer-top{grid-template-columns:1fr 1fr}
.service-detail{grid-template-columns:55px 1fr;gap:25px}.service-detail p,.service-detail ul{grid-column:2}.reference-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
.container{width:calc(100% - 28px)}.section{padding:85px 0}.logo{width:120px}.customer-btn{min-height:42px;padding:0 12px;font-size:10px}.hero-title{font-size:62px;line-height:.96;letter-spacing:-3px}.hero-description{font-size:15px}.hero-actions{flex-direction:column}.btn{width:100%}.hero-right{height:390px}.hero-image{inset:30px}.hero-label{top:18px;right:18px;width:88px;height:88px}.hero-number{font-size:65px}
.intro{padding:90px 0}.intro-text{font-size:38px;letter-spacing:-2px}.service{min-height:105px}.service-name{font-size:26px}.numbers-grid{grid-template-columns:1fr}.number{border-right:0;border-bottom:1px solid var(--line)}.number:last-child{border-bottom:0}.number strong{font-size:54px}
.about-image{height:410px}.process-grid{grid-template-columns:1fr}.process-item{border-right:0;border-bottom:1px solid #333}.process-item:last-child{border-bottom:0}.page-hero{padding:145px 0 75px}.page-hero h1{font-size:62px;letter-spacing:-3px}.page-hero p{margin-top:30px}.service-detail{grid-template-columns:42px 1fr;gap:18px;padding:40px 0}.service-detail h2{font-size:31px}.service-detail p,.service-detail ul{grid-column:2}.reference-card img{height:300px}.contact-title{font-size:55px;letter-spacing:-3px}.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:10px}.cta{padding:100px 0}.cta h2{letter-spacing:-4px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* BLOG / HORIZONTAL CAROUSEL */
.blog-section{padding:120px 0;border-bottom:1px solid var(--line);overflow:hidden}
.blog-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.blog-top p{max-width:410px;color:var(--gray);line-height:1.75}
.blog-viewport{overflow:hidden;cursor:grab;user-select:none}
.blog-viewport.is-dragging{cursor:grabbing}
.blog-track{display:flex;gap:18px;will-change:transform}
.blog-card{flex:0 0 calc((100% - 36px)/3);min-width:0;border:1px solid var(--line);background:#fff;overflow:hidden}
.blog-card-image{height:250px;overflow:hidden;background:#eee}
.blog-card-image img{height:100%;object-fit:cover;transition:transform .6s}
.blog-card:hover .blog-card-image img{transform:scale(1.04)}
.blog-card-content{padding:24px}
.blog-meta{display:flex;justify-content:space-between;gap:15px;color:#888;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.blog-category{color:var(--blue);font-weight:700}
.blog-card h3{font-family:"Space Grotesk";font-size:25px;line-height:1.05;letter-spacing:-1px;margin:16px 0 12px}
.blog-card p{font-size:13px;color:var(--gray);line-height:1.65}
.blog-more{display:inline-flex;margin-top:20px;font-size:12px;font-weight:700}
.blog-more:hover{color:var(--blue)}
.blog-controls{display:flex;align-items:center;gap:8px;margin-top:24px}
.blog-arrow{width:44px;height:44px;border:1px solid var(--black);background:#fff;cursor:pointer;font-size:20px;transition:.25s}
.blog-arrow:hover{background:var(--black);color:#fff}
.blog-progress{height:2px;background:var(--line);flex:1;max-width:360px;position:relative;overflow:hidden}
.blog-progress span{position:absolute;left:0;top:0;height:100%;width:30%;background:var(--blue);transition:left .3s,width .3s}
.blog-page{padding-top:84px}
.blog-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.blog-list .blog-card{flex-basis:auto}
.article-wrap{max-width:900px;margin:auto}
.article-meta{display:flex;gap:15px;color:#888;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:22px}
.article-title{font-family:"Space Grotesk";font-size:clamp(48px,7vw,92px);line-height:.92;letter-spacing:-4px}
.article-lead{font-size:20px;line-height:1.7;color:var(--gray);margin-top:28px}
.article-image{margin:55px 0;height:500px;overflow:hidden}
.article-image img{height:100%;object-fit:cover}
.article-body{font-size:17px;line-height:1.9;color:#444}
.article-body h2{font-family:"Space Grotesk";font-size:34px;line-height:1.05;color:var(--black);margin:50px 0 18px}
.article-body p{margin-bottom:22px}
.article-body ul{padding-left:22px;margin:20px 0 30px}
.article-body li{margin:8px 0}
@media(max-width:900px){
  .blog-card{flex-basis:calc((100% - 18px)/2)}
  .blog-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .blog-section{padding:85px 0}
  .blog-top{display:block}
  .blog-top p{margin-top:24px}
  .blog-card{flex-basis:100%}
  .blog-card-image{height:230px}
  .blog-card h3{font-size:23px}
  .article-title{font-size:54px;letter-spacing:-3px}
  .article-image{height:300px;margin:40px 0}
  .article-body{font-size:16px}
}

/* BLOG CATEGORY DROPDOWN */
.menu-item-blog{position:relative;height:100%;display:flex;align-items:center}
.blog-dropdown{
  position:absolute;left:-18px;top:100%;min-width:190px;
  background:#fff;border:1px solid var(--black);padding:8px 0;
  display:none;box-shadow:8px 8px 0 var(--blue);z-index:1100;
}
.menu-item-blog:hover .blog-dropdown,
.menu-item-blog:focus-within .blog-dropdown{display:block}
.blog-dropdown a{
  display:block!important;padding:12px 16px;font-size:12px!important;
  letter-spacing:.2px;white-space:nowrap;
}
.blog-dropdown a:after{display:none!important}
.blog-dropdown a:hover{background:var(--black);color:#fff}
.blog-dropdown a.active-cat{color:var(--blue)}
.blog-category-filter{
  display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--black);
  border-bottom:1px solid var(--black);margin-bottom:40px;
}
.blog-category-filter a{
  padding:15px 20px;border-right:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
}
.blog-category-filter a:hover,.blog-category-filter a.active{background:var(--black);color:#fff}
.hero-title .hero-line{display:block;overflow:hidden}
.hero-title .hero-word{
  display:inline-block;opacity:0;transform:translateY(105%);
  animation:fizzHeroIn .8s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-title .hero-line:nth-child(1) .hero-word{animation-delay:.08s}
.hero-title .hero-line:nth-child(2) .hero-word{animation-delay:.22s}
.hero-title .hero-line:nth-child(3) .hero-word{animation-delay:.38s}
@keyframes fizzHeroIn{
  0%{opacity:0;transform:translateY(105%)}
  100%{opacity:1;transform:translateY(0)}
}
@media(max-width:900px){
  .menu-item-blog{display:block;height:auto;width:100%}
  .menu-item-blog>a.blog-main-link{display:block}
  .blog-dropdown{
    position:static;box-shadow:none;border:0;border-left:2px solid var(--blue);
    margin:10px 0 0 0;padding:0 0 0 8px;display:block;
  }
  .blog-dropdown a{padding:8px 10px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-title .hero-word{animation:none;opacity:1;transform:none}
}

/* CUSTOMER LOGIN */
.login-page{background:var(--offwhite);min-height:100vh}
.login-main{min-height:100vh;padding-top:84px;display:grid;grid-template-columns:1fr 1fr}
.login-intro{background:var(--black);color:#fff;padding:clamp(48px,8vw,130px) clamp(30px,8vw,120px);display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100vh - 84px);position:relative;overflow:hidden}
.login-intro:after{content:"";position:absolute;width:min(45vw,580px);height:min(45vw,580px);border:90px solid rgba(255,255,255,.07);right:-210px;bottom:-220px;transform:rotate(45deg)}
.login-intro .eyebrow{position:relative;z-index:1}.login-intro h1{position:relative;z-index:1;font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(52px,6vw,100px);font-weight:600;line-height:.87;letter-spacing:-5px;margin-top:auto}.login-intro h1 span{color:var(--blue)}
.login-intro p{position:relative;z-index:1;color:#aaa;max-width:410px;line-height:1.75;margin-top:32px}.login-mark{position:relative;z-index:1;align-self:flex-end;color:var(--blue);font-family:"Space Grotesk",Arial,sans-serif;font-size:13px;font-weight:700;line-height:1.05;letter-spacing:1px;text-align:right}
.login-card-wrap{display:flex;align-items:center;justify-content:center;padding:50px 30px}
.login-card{width:min(100%,470px);background:#fff;border:1px solid var(--line);padding:clamp(32px,5vw,60px);box-shadow:16px 16px 0 var(--blue)}
.login-card h2{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(42px,5vw,68px);letter-spacing:-3px;line-height:.9;margin:24px 0 16px}.login-copy{color:var(--gray);line-height:1.7}
.login-form{margin-top:38px;border-top:1px solid var(--black)}.login-field{padding:20px 0;border-bottom:1px solid var(--line)}.login-field label{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:11px}.login-field input{width:100%;border:0;background:transparent;outline:0;font-size:16px;color:var(--black)}.login-field input::placeholder{color:#aaa}
.login-submit{width:100%;min-height:54px;margin-top:25px;border:1px solid #b9b9b7;background:#d9d9d7;color:#777;font-size:13px;font-weight:700;cursor:not-allowed}.login-status{color:var(--gray);font-size:12px;line-height:1.65;margin-top:18px}.login-help{display:inline-flex;margin-top:22px;font-size:12px;font-weight:700}.login-help:hover{color:var(--blue)}
@media(max-width:900px){.login-main{grid-template-columns:1fr}.login-intro{min-height:420px;padding:65px 32px}.login-intro h1{margin-top:70px}.login-card-wrap{padding:70px 32px}.login-mark{position:absolute;right:32px;top:65px}}
@media(max-width:600px){.login-intro{min-height:390px;padding:52px 28px}.login-intro h1{font-size:52px;letter-spacing:-3px}.login-card-wrap{padding:55px 28px}.login-card{padding:32px 26px;box-shadow:10px 10px 0 var(--blue)}.login-card h2{font-size:46px}.login-page .customer-btn{font-size:9px;padding:0 9px}}

.menu-item-blog::after{
  content:"";
  position:absolute;
  left:-18px;
  top:100%;
  width:210px;
  height:12px;
  background:transparent;
  display:none;
}
.menu-item-blog:hover::after,
.menu-item-blog:focus-within::after{display:block}

/* PHP içerik katmanı */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hero-slide.is-hidden{display:none}.home-work .work-card:nth-child(n){grid-column:span 6;height:420px}
.blog-grid .blog-card{min-width:0}
.blog-grid .blog-card{width:100%;flex:none}.home-work{align-items:stretch}
.footer{background:var(--black);color:#fff;padding:52px 0}
.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}.footer p{color:#aaa;max-width:320px;margin-top:18px;line-height:1.7}.footer small{color:#aaa}
.contact-form{display:grid;gap:16px}.contact-form label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;display:grid;gap:8px}.contact-form input,.contact-form textarea{border:1px solid var(--line);padding:13px;background:#fff}.notice{padding:14px;background:#ddf4e5;color:#16623a;line-height:1.5}
.article-hero{padding:175px 0 65px;background:var(--offwhite);border-bottom:1px solid var(--line)}.article-title{font-family:"Space Grotesk",Arial,sans-serif;font-size:clamp(46px,7vw,90px);letter-spacing:-4px;line-height:.96;max-width:1000px;margin:25px 0}.article-body{padding:80px 0;max-width:800px;font-size:18px;line-height:1.85;white-space:normal}.rich-content{font-size:17px;line-height:1.85;color:var(--gray)}
@media(max-width:800px){.blog-grid{grid-template-columns:1fr}.footer-grid{display:block}.footer small{display:block;margin-top:30px}.contact-form{margin-top:20px}}

/* Müşteri portalı header aksiyonları */
.nav-actions{display:flex;align-items:center;gap:10px}.auth-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid rgba(17,29,54,.14);border-radius:999px;text-decoration:none;color:inherit;font-size:12px;font-weight:700;white-space:nowrap}.auth-link.login{background:#111d36;color:#fff;border-color:#111d36}@media(max-width:980px){.nav-actions .auth-link{display:none}}


/* =========================================================
   FIZZ PUBLIC SITE — RESPONSIVE / MOBILE PASS
   ========================================================= */
.mobile-auth-actions,.hero-mobile-visual{display:none}
.mobile-button{width:46px;height:46px;padding:0;border:1px solid transparent;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;z-index:5101}
.mobile-button span{display:block;width:24px;height:2px;background:var(--black);transition:transform .25s ease,opacity .2s ease}
.mobile-button.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-button.active span:nth-child(2){opacity:0}
.mobile-button.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open{overflow:hidden}

@media(max-width:1100px){
  .menu{gap:22px}.menu a{font-size:13px}.nav-actions{gap:7px}.auth-link{padding:0 11px}.contact-btn{padding:0 15px;font-size:11px}
}

@media(max-width:980px){
  .header{height:74px}.nav{position:relative;z-index:5100}.logo{width:124px;position:relative;z-index:5101}.mobile-button{display:flex}
  .nav-actions{margin-left:auto;margin-right:8px}.nav-actions .auth-link,.nav-actions .contact-btn{display:none!important}
  .menu{display:flex;visibility:hidden;opacity:0;pointer-events:none;position:fixed;z-index:5099;top:74px;left:0;right:0;bottom:0;padding:26px 20px 30px;background:#fff;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;border-top:1px solid var(--line);overflow-y:auto;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .menu.active{visibility:visible;opacity:1;pointer-events:auto;transform:none}
  .menu>a,.menu-item-blog>.blog-main-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0 2px;border-bottom:1px solid #ececea;font-family:"Space Grotesk",Arial,sans-serif;font-size:22px;font-weight:600}
  .menu a:after{display:none}.menu a.active{color:var(--blue)}
  .menu-item-blog{display:block;height:auto;width:100%}.blog-dropdown{display:none!important}
  .mobile-auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;padding-bottom:22px}
  .mobile-auth-actions>a{display:flex!important;align-items:center;justify-content:center;min-height:50px;padding:0 14px;border:1px solid var(--black)!important;border-radius:0;font-size:12px!important;font-family:"DM Sans",Arial,sans-serif!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.3px}
  .mobile-auth-actions .login{background:var(--blue);border-color:var(--blue)!important;color:#fff}
  .mobile-auth-actions .project{grid-column:1/-1;background:var(--black);color:#fff}
  .hero{padding-top:74px}.hero-grid{min-height:calc(100vh - 74px)}
  .page-hero{padding-top:140px}
}

@media(max-width:700px){
  .container{width:calc(100% - 32px)}
  .header{height:72px}.logo{width:116px}.menu{top:72px;padding:20px 16px 26px}.menu>a,.menu-item-blog>.blog-main-link{min-height:50px;font-size:20px}
  .hero{padding-top:72px;min-height:auto}.hero-grid{display:block;min-height:0}.hero-left{min-height:0;padding:54px 0 42px;justify-content:flex-start}.hero-right{display:none}
  .hero-title{font-size:clamp(46px,13.5vw,64px);line-height:.94;letter-spacing:-3px}.hero-title .hero-line{display:block}.eyebrow{font-size:10px;letter-spacing:1.7px;margin-bottom:10px}
  .hero-mobile-visual{display:block;position:relative;height:230px;margin-top:26px;overflow:hidden;background:#ececeb;border:1px solid var(--line)}
  .hero-mobile-visual img{width:100%;height:100%;object-fit:cover}.hero-mobile-visual span{position:absolute;left:14px;bottom:8px;font-family:"Space Grotesk";font-size:48px;line-height:1;color:rgba(255,255,255,.7);text-shadow:0 1px 12px rgba(0,0,0,.18)}
  .hero-description{margin-top:24px;font-size:15px;line-height:1.65}.hero-actions{margin-top:22px;gap:10px}.hero-actions .btn{min-height:54px}
  .marquee-item{padding:16px 22px;font-size:15px;gap:18px}
  .section,.blog-section{padding:72px 0}.section-head,.blog-top{margin-bottom:34px}.section-title{font-size:clamp(44px,13vw,62px);letter-spacing:-3px}.section-head p,.blog-top p{margin-top:16px!important;font-size:14px}
  .service{grid-template-columns:42px minmax(0,1fr) 34px;min-height:90px}.service-name{font-size:24px;letter-spacing:-1px}.service-number{font-size:10px}.service-arrow{font-size:22px}
  .work-card:nth-child(n),.home-work .work-card:nth-child(n){height:310px}.work-overlay{padding:18px}.work-title{font-size:24px}
  .numbers-grid{grid-template-columns:1fr 1fr}.number{padding:28px 18px}.number:nth-child(odd){border-right:1px solid var(--line)}.number strong{font-size:44px;letter-spacing:-2px}.number span{font-size:12px}
  .cta{padding:75px 0}.cta h2{font-size:clamp(50px,15vw,72px);line-height:.88;letter-spacing:-4px}.cta p{margin-top:22px}.cta-button{width:100%;justify-content:center}.cta-shape{width:300px;height:300px;border-width:60px;right:-130px;top:-100px}
  .footer-top{grid-template-columns:1fr;gap:28px;padding-bottom:40px}.footer-bottom{font-size:11px}
  .page-hero{padding:122px 0 62px}.page-hero-grid{gap:22px}.page-hero h1{font-size:clamp(48px,14vw,68px);line-height:.9;letter-spacing:-3px;overflow-wrap:anywhere}.page-hero p{margin-top:4px;font-size:14px;line-height:1.65}
  .about-grid,.contact-grid{gap:32px}.about-image{height:330px}.rich-content{font-size:15px;line-height:1.75;overflow-wrap:anywhere}.contact-form{width:100%}.contact-form input,.contact-form textarea{min-width:0;font-size:16px}.contact-form .btn{width:100%}
  .blog-card-image{height:210px}.blog-card-content{padding:18px}.blog-meta{flex-wrap:wrap;gap:8px}.blog-controls{flex-wrap:wrap}.blog-progress{order:3;flex-basis:100%;max-width:none}.blog-controls>.blog-more{margin-left:0!important}
  .article-hero{padding:122px 0 48px}.article-title{font-size:clamp(42px,12vw,58px)!important;line-height:.96;letter-spacing:-2.5px!important;overflow-wrap:anywhere}.article-body{padding:52px 16px!important;font-size:16px!important;line-height:1.8!important}
  .reference-card img{height:270px}.reference-info{padding:20px}.reference-info h2{font-size:25px}
}

@media(max-width:420px){
  .container{width:calc(100% - 24px)}.logo{width:108px}.mobile-button{width:42px;height:42px}
  .hero-left{padding-top:44px}.hero-title{font-size:clamp(42px,13vw,55px)}.hero-mobile-visual{height:205px}.hero-actions .btn{font-size:12px}
  .mobile-auth-actions{grid-template-columns:1fr}.mobile-auth-actions .project{grid-column:auto}
  .section-title{font-size:45px}.page-hero h1{font-size:48px}.work-card:nth-child(n),.home-work .work-card:nth-child(n){height:280px}
  .numbers-grid{grid-template-columns:1fr}.number:nth-child(odd){border-right:0}.number{border-bottom:1px solid var(--line)}
}


/* FIZZ floating utilities */
.floating-whatsapp,.back-to-top{position:fixed;z-index:4800;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;box-shadow:0 12px 30px rgba(17,29,54,.18);transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease}
.floating-whatsapp{left:18px;bottom:20px;min-height:52px;padding:0 16px 0 11px;gap:9px;background:#20b45b;color:#fff;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.2px}
.floating-whatsapp:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(32,180,91,.28)}
.floating-wa-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:18px;line-height:1}
.back-to-top{right:18px;bottom:20px;width:52px;height:52px;border-radius:50%;background:#111d36;color:#fff;font-size:23px;opacity:0;pointer-events:none;transform:translateY(10px)}
.back-to-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.back-to-top:hover{background:var(--blue);transform:translateY(-3px)}
@media(max-width:700px){.floating-whatsapp{left:12px;bottom:14px;min-height:48px;padding:0 13px 0 9px}.floating-wa-icon{width:30px;height:30px}.back-to-top{right:12px;bottom:14px;width:48px;height:48px}.floating-whatsapp,.back-to-top{z-index:4800}}
@media(max-width:390px){.floating-wa-text{display:none}.floating-whatsapp{width:48px;padding:0;border-radius:50%}.floating-wa-icon{background:transparent}}


/* v13 - menu stacking + fixed action controls */
.header{isolation:isolate}
.floating-whatsapp,.back-to-top{z-index:99970!important}
@media(max-width:980px){
  .header{z-index:99990!important;overflow:visible!important}
  .nav{z-index:99992!important}
  .mobile-button{z-index:99994!important}
  body.menu-open .header{height:100dvh!important;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.menu-open .nav{height:74px!important}
  .menu{z-index:99993!important}
  body.menu-open .menu{position:fixed!important;top:74px!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:calc(100dvh - 74px)!important;max-height:none!important;background:#fff!important;overflow-y:auto!important;overscroll-behavior:contain!important}
}
@media(max-width:600px){
  body.menu-open .nav{height:72px!important}
  body.menu-open .menu{top:72px!important;height:calc(100dvh - 72px)!important}
}
.floating-whatsapp{visibility:visible!important;opacity:1!important;text-decoration:none!important}
.back-to-top{visibility:visible!important}

/* FIZZ home hero slider */
.hero-slider{position:relative;overflow:hidden}
.hero-slider-track{width:100%}
.hero-slide{display:none;width:100%}
.hero-slide.is-active{display:block;animation:heroSlideIn .48s ease both}
@keyframes heroSlideIn{from{opacity:.15;transform:translateX(18px)}to{opacity:1;transform:none}}
.hero-slider-controls{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.92);border:1px solid rgba(17,17,17,.1);border-radius:999px;padding:7px 9px;box-shadow:0 10px 30px rgba(0,0,0,.09);backdrop-filter:blur(8px)}
.hero-slider-arrow{width:34px;height:34px;border:0;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;cursor:pointer;font-weight:800;transition:.18s}
.hero-slider-arrow:hover{background:var(--blue);transform:translateY(-1px)}
.hero-slider-dots{display:flex;align-items:center;gap:7px}
.hero-slider-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#c7c7c7;cursor:pointer;transition:.2s}
.hero-slider-dot.is-active{width:25px;background:var(--blue)}
@media(max-width:800px){.hero-slider-controls{bottom:12px}.hero-slider-arrow{width:31px;height:31px}.hero-slider-dot.is-active{width:20px}.hero-slide.is-active{animation:none}}

/* Rich content entered from admin editor */
.rich-content p{margin:0 0 1em}.rich-content h2,.rich-content h3,.rich-content h4{margin:1.2em 0 .55em}.rich-content ul,.rich-content ol{padding-left:1.4em;margin:.8em 0}.rich-content blockquote{margin:1em 0;padding:.8em 1em;border-left:4px solid #2147f5;background:#f5f7ff}.rich-content a{color:#2147f5;text-decoration:underline}.service-description p{margin:0}.service-description ul,.service-description ol{margin:.4em 0;padding-left:1.2em}.work-description{margin-top:8px;font-size:13px;line-height:1.45;max-width:360px}.work-description p{margin:0}

/* FIZZ home v15 - motion, brand ribbon, counter entrance */
.hero-slide.is-active.slide-from-right{animation:heroSlideFromRight .72s cubic-bezier(.22,.78,.25,1) both}
.hero-slide.is-active.slide-from-left{animation:heroSlideFromLeft .72s cubic-bezier(.22,.78,.25,1) both}
@keyframes heroSlideFromRight{from{opacity:0;transform:translate3d(70px,0,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes heroSlideFromLeft{from{opacity:0;transform:translate3d(-70px,0,0) scale(.985)}to{opacity:1;transform:none}}
.hero-slide.is-active .hero-image img{animation:heroImageDrift .9s cubic-bezier(.22,.78,.25,1) both}
@keyframes heroImageDrift{from{opacity:.5;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}

.brand-marquee{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;background:#002aff;color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.brand-marquee-label{position:relative;z-index:2;display:flex;align-items:center;padding:0 34px;min-height:82px;background:#0022d6;color:#fff;font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:700;letter-spacing:1.2px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.18)}
.brand-marquee-label:after{content:"";position:absolute;right:-17px;top:0;border-top:41px solid transparent;border-bottom:41px solid transparent;border-left:17px solid #0022d6}
.brand-marquee-window{overflow:hidden;min-width:0}
.brand-marquee-track{display:flex;align-items:center;width:max-content;min-height:82px;animation:brandTicker 26s linear infinite;will-change:transform}
.brand-marquee-track span{display:flex;align-items:center;padding:0 34px;font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:700;letter-spacing:.4px;white-space:nowrap;color:#fff}
.brand-marquee-track span:after{content:"✦";margin-left:38px;color:#fff;opacity:.55;font-size:12px}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused}
@keyframes brandTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.numbers-grid[data-counter-group] .number strong{font-variant-numeric:tabular-nums}
@media(max-width:800px){.brand-marquee{grid-template-columns:1fr}.brand-marquee-label{min-height:54px;padding:0 20px;border-right:0;border-bottom:1px solid rgba(255,255,255,.15)}.brand-marquee-label:after{display:none}.brand-marquee-track{min-height:66px}.brand-marquee-track span{padding:0 22px;font-size:15px}.hero-slide.is-active.slide-from-right,.hero-slide.is-active.slide-from-left{animation:heroFadeMobile .5s ease both}@keyframes heroFadeMobile{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}