:root{
 --blue:#0a5bd7; --deep:#08285f; --sky:#eaf3ff; --ink:#101a2b; --muted:#66748a;
 --line:#dbe5f1; --white:#fff; --pale:#f7faff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--white);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.wrap{width:min(1280px,calc(100% - 64px));margin:auto}
.header{height:86px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.nav{height:100%;display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.logo>span{width:43px;height:43px;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:900;font-size:25px;border-radius:6px}
.logo b{font-size:14px;letter-spacing:.8px}.logo small{display:block;color:var(--blue);font-size:8px;letter-spacing:1.8px;margin-top:4px}
.nav nav{display:flex;gap:32px;align-items:center}.nav nav a{font-size:12px;font-weight:700;color:#31415a;position:relative;padding:34px 0}.nav nav a:after{content:"";position:absolute;left:0;bottom:27px;width:0;height:2px;background:var(--blue);transition:.3s}.nav nav a:hover{color:var(--blue)}.nav nav a:hover:after{width:100%}
.call{background:var(--blue);color:#fff;padding:13px 18px;font-size:11px;font-weight:800;border-radius:5px}.call i{font-style:normal;margin-left:8px;color:#bcdcff}
.hamb{display:none;border:0;background:none;font-size:28px}

.hero{position:relative;min-height:calc(100vh - 86px);background:#fff;overflow:hidden}
.hero:before{content:"";position:absolute;right:0;top:0;width:59%;height:100%;background:var(--hero-bg) center/cover no-repeat}
.hero:after{content:"";position:absolute;right:0;top:0;width:59%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.08) 45%),linear-gradient(0deg,rgba(4,29,74,.2),transparent 45%)}
.hero-wrap{min-height:calc(100vh - 86px);position:relative;z-index:2;display:flex;align-items:center}
.hero-copy{width:58%;padding:60px 0}
.eyebrow{font-size:9px;letter-spacing:2.3px;color:var(--blue);font-weight:900;margin-bottom:22px}
.hero h1{font-size:clamp(48px,6.8vw,94px);line-height:.94;letter-spacing:-5px;margin:0 0 27px;font-weight:900;max-width:780px}
.hero h1 em{color:var(--blue);font-style:normal}
.hero-copy>p{font-size:15px;line-height:1.8;color:#65748a;max-width:520px;margin:0}
.buttons{display:flex;gap:12px;margin:32px 0}.btn{background:var(--blue);color:#fff;padding:15px 21px;border-radius:4px;font-size:11px;font-weight:900;box-shadow:0 12px 30px rgba(10,91,215,.18)}.btn b{margin-left:10px}.text-btn{padding:14px 10px;font-size:11px;font-weight:800;color:#233a5d}.text-btn span{color:var(--blue);margin-right:7px}
.stats{display:flex;gap:0;margin-top:42px}.stats div{padding:0 28px;border-left:1px solid var(--line)}.stats div:first-child{padding-left:0;border-left:0}.stats b{font-size:26px}.stats em{color:var(--blue);font-style:normal}.stats span{display:block;font-size:8px;color:#8290a3;letter-spacing:1px;margin-top:5px}
.hero-photo{display:none}
.scroll{position:absolute;bottom:25px;left:32px;font-size:8px;color:#8491a4;letter-spacing:2px;z-index:3}.scroll span{color:var(--blue)}

.ticker{height:58px;background:var(--deep);color:#fff;display:flex;align-items:center;overflow:hidden}.ticker div{display:flex;gap:24px;white-space:nowrap;font-size:9px;letter-spacing:1.7px;font-weight:800;animation:marquee 35s linear infinite}.ticker span{color:#dcecff}.ticker div:after{content:"ASMA TAVAN ✦ ALÇI SIVA ✦ BOYA BADANA ✦ MANTOLAMA ✦ SERAMİK & FAYANS ✦ ANAHTAR TESLİM ✦ TADİLAT ✦ MERMER ✦"}@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:125px 0}
.services-intro,.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end;margin-bottom:55px}
.section h1,.section h2{font-size:clamp(42px,5vw,70px);line-height:.98;letter-spacing:-3px;margin:0;font-weight:900}
.section-head>p,.services-intro>div:last-child>p{color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 20px}
.primary-link{font-size:11px;font-weight:900;color:var(--blue)}.primary-link b{margin-left:9px}

.service-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.service{position:relative;min-height:420px;overflow:hidden;background:var(--deep);color:#fff;border-radius:0}
.service:nth-child(1),.service:nth-child(4){grid-column:span 3}.service:nth-child(2),.service:nth-child(3){grid-column:span 3}
.service:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,18,45,.9),rgba(2,18,45,.03) 65%);z-index:1}
.service-icon{position:absolute;top:25px;left:25px;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;border-radius:50%;z-index:3;font-size:18px}
.service .no{position:absolute;top:29px;right:25px;z-index:3;color:#b8d7ff;font-size:9px;letter-spacing:1px}
.service h3{position:absolute;z-index:3;left:25px;bottom:54px;margin:0;font-size:25px}.service p{position:absolute;z-index:3;left:25px;right:25px;bottom:20px;margin:0;font-size:10px;line-height:1.5;color:#d4e2f2;opacity:.8}
.service a{display:none}
.service:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,91,215,.2),transparent 40%);z-index:2}
.service{background-image:linear-gradient(0deg,rgba(4,25,60,.3),rgba(4,25,60,.1)),var(--service-img);background-position:center;background-size:cover;transition:transform .5s,background-position .7s}
.service:hover{transform:translateY(-7px;background-position:55% 45%}.service:hover:after{background:rgba(10,91,215,.22)}
.service:hover h3{transform:translateY(-7px)}.service h3{transition:.45s}

.two{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.visual-card{height:490px;background:#edf5ff;position:relative;overflow:hidden;border-radius:0}
.visual-card:before{content:"Ç";position:absolute;right:-35px;bottom:-95px;font-size:450px;line-height:1;color:#d8eaff;font-weight:900}
.visual-card:after{content:"";position:absolute;left:45px;top:45px;width:170px;height:170px;border:1px solid #9ec8ff;border-radius:50%}
.vc-inner{position:absolute;left:55px;bottom:55px;z-index:2}.vc-inner strong{font-size:80px;color:var(--blue)}.vc-inner b{display:block;font-size:24px;letter-spacing:2px}.vc-inner small{color:var(--blue);font-size:8px;letter-spacing:2px}.serial{position:absolute;top:25px;right:25px;color:#7590b0;font-size:9px}
.features{margin-top:34px;border-top:1px solid var(--line)}.features div{display:grid;grid-template-columns:40px 1fr;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}.features div>b{color:var(--blue);font-size:10px}.features span{font-size:11px;color:#748196}.features strong{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}

.dark{background:#061f49;color:#fff}.dark .section-head>p{color:#aabbd0}.dark .eyebrow{color:#73b8ff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16)}.steps article{min-height:310px;padding:30px;background:#061f49;border:1px solid rgba(255,255,255,.08);transition:.35s}.steps article:hover{background:#0a5bd7;transform:translateY(-5px)}.steps article>span{float:right;color:#83c1ff;font-size:9px}.steps i{font-style:normal;font-size:28px;color:#75bbff}.steps h3{font-size:28px;margin:65px 0 13px}.steps p{font-size:11px;line-height:1.7;color:#b7c7d9;max-width:300px}.steps small{font-size:8px;letter-spacing:1.5px;color:#76bbff}

.projects{background:#f7faff}.project-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}.project{position:relative;height:560px;overflow:hidden;border-radius:0}.project:nth-child(2),.project:nth-child(3){height:273px}.project-grid>.project:first-child{grid-row:span 2}.project-img{position:absolute;inset:0;background-position:center;background-size:cover;transition:transform .8s}.project:hover .project-img{transform:scale(1.07)}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,19,47,.88),transparent 55%)}.project-info{position:absolute;z-index:2;left:28px;right:28px;bottom:25px;color:#fff}.project-info small{font-size:8px;color:#83c3ff;letter-spacing:1.6px}.project-info h3{font-size:27px;margin:7px 0}.project-info p{font-size:10px;color:#d3e0ef;margin:0;max-width:480px}.project-info>b{position:absolute;right:0;bottom:0;font-size:20px;color:#fff}

.gallery{background:#fff}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.media{border:1px solid var(--line);background:#fff;border-radius:0;overflow:hidden}.media img,.media video{width:100%;height:300px;display:block;object-fit:cover;transition:transform .6s}.media:hover img,.media:hover video{transform:scale(1.035)}.media>div{padding:17px}.media small{font-size:8px;color:var(--blue);letter-spacing:1.4px}.media b{display:block;margin-top:6px;font-size:13px}

.cta{background:var(--blue);color:#fff;padding:90px 0;position:relative;overflow:hidden}.cta:after{content:"Ç";position:absolute;right:-50px;bottom:-180px;font-size:520px;color:rgba(255,255,255,.07);font-weight:900}.cta-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:50px}.cta h2{font-size:clamp(42px,5vw,68px);line-height:.98;letter-spacing:-3px;margin:0 0 15px}.cta h2 em{font-style:normal;color:#d8ecff}.cta p{font-size:13px;color:#d8e9fb}.cta-btn{min-width:280px;background:#fff;color:#092b61;padding:20px;border-radius:0;display:grid;grid-template-columns:1fr auto}.cta-btn small{font-size:8px;color:#6d7f98;letter-spacing:1.3px}.cta-btn b{font-size:17px;margin-top:5px}.cta-btn i{grid-column:2;grid-row:1/3;font-size:25px;color:var(--blue);font-style:normal}

.contact-list{margin-top:30px}.contact-list a{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}.contact-list small{font-size:8px;color:#8b99aa;letter-spacing:1.4px}.contact-list b{font-size:12px;color:#10386f}.contact-art{height:420px;background:#edf5ff;position:relative;display:grid;place-items:center;overflow:hidden}.maplines{position:absolute;inset:-20%;background-image:linear-gradient(25deg,transparent 48%,#c7ddf7 49%,transparent 50%),linear-gradient(110deg,transparent 48%,#c7ddf7 49%,transparent 50%);background-size:85px 85px;transform:rotate(8deg)}.contact-art>span{position:relative;color:var(--blue);font-size:130px;font-weight:900}.contact-art>b{position:absolute;top:245px;font-size:26px;letter-spacing:2px}.contact-art>small{position:absolute;top:280px;color:var(--blue);font-size:8px;letter-spacing:2px}

footer{background:#041a3b;color:#fff;padding:55px 0}.foot{display:flex;align-items:center;gap:40px}.foot .logo{margin:0}.foot .logo b{color:#fff}.foot p{margin:0;color:#9db2cb;font-size:11px}.foot>small{margin-left:auto;color:#7188a5;font-size:9px}.wa{position:fixed;right:22px;bottom:22px;z-index:90;background:#fff;color:var(--blue);border:1px solid #cfe0f4;padding:12px 16px;border-radius:4px;box-shadow:0 8px 25px rgba(0,30,70,.12);font-size:12px;font-weight:800}.wa span{margin-left:6px}

.reveal{opacity:0;transform:translateY(25px);transition:opacity .65s ease,transform .65s ease}.reveal.show{opacity:1;transform:none}
@media(max-width:1000px){
 .wrap{width:min(100% - 40px,760px)}.nav nav{display:none}.hamb{display:block}.call{display:none}
 .hero:before,.hero:after{width:100%;opacity:.35}.hero-copy{width:100%;padding-top:100px}.hero h1{font-size:clamp(48px,10vw,80px)}
 .services-intro,.section-head{grid-template-columns:1fr;gap:20px}.service-grid{grid-template-columns:repeat(2,1fr)}.service:nth-child(n){grid-column:auto}
 .two{grid-template-columns:1fr;gap:45px}.steps{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.project,.project:nth-child(n){height:430px}.media-grid{grid-template-columns:1fr 1fr}.cta-inner{display:block}.cta-btn{margin-top:35px}.foot{display:block}.foot p{margin:25px 0}.foot>small{display:block}
}
@media(max-width:600px){
 .wrap{width:calc(100% - 28px)}.header{height:72px}.logo>span{width:38px;height:38px}.hero{min-height:700px}.hero-wrap{min-height:700px}.hero-copy{padding-top:70px}.hero h1{letter-spacing:-3px}.stats{gap:15px}.stats div{padding:0 13px}.stats b{font-size:20px}
 .section{padding:85px 0}.service-grid{grid-template-columns:1fr}.service{min-height:390px}.visual-card{height:360px}.media-grid{grid-template-columns:1fr}.media img,.media video{height:250px}.cta{padding:70px 0}.cta h2{letter-spacing:-2px}.contact-art{height:320px}
}

/* ===== YENİ HİZMETLERİMİZ: FOTOĞRAFLI KARE GALERİ ===== */
.service-photo-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.service-photo-tile{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0a2f68 center/cover no-repeat;
  background-image:var(--service-img);
  border:0;
  border-radius:2px;
  isolation:isolate;
  transition:transform .35s ease, box-shadow .35s ease;
}
.service-photo-tile:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(3,25,63,.05) 30%,rgba(3,18,48,.86) 100%);
  transition:background .35s ease;
}
.service-photo-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(5,35,84,.20);
}
.service-photo-tile:hover:before{
  background:linear-gradient(180deg,rgba(10,91,215,.10),rgba(3,18,48,.82) 100%);
}
.service-photo-title{
  position:absolute;
  left:24px;
  right:20px;
  bottom:21px;
  color:#fff;
  z-index:2;
}
.service-photo-title small{
  display:block;
  color:#a9d3ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.6px;
  margin-bottom:7px;
}
.service-photo-title h3{
  margin:0;
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:transform .35s ease;
}
.service-photo-title span{
  display:block;
  margin-top:10px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.5px;
  opacity:0;
  transform:translateY(8px);
  transition:.35s ease;
}
.service-photo-tile:hover .service-photo-title h3{transform:translateY(-4px)}
.service-photo-tile:hover .service-photo-title span{opacity:1;transform:none}

@media(max-width:1000px){
  .service-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .service-photo-grid{grid-template-columns:1fr 1fr;gap:8px}
  .service-photo-title{left:14px;right:10px;bottom:14px}
  .service-photo-title h3{font-size:16px}
  .service-photo-title small{font-size:7px;margin-bottom:5px}
  .service-photo-title span{display:none}
}