:root{
  --red:#e30613; --red-d:#b8050f; --ink:#0b0d10; --ink2:#12161b; --ink3:#1a1f26;
  --bg:#f6f7f9; --white:#fff; --text:#1b1f24; --muted:#6b7480; --line:#e4e7ec;
  --r:10px; --maxw:1640px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;line-height:1.15;font-weight:600}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,3.5vw,64px)}
.ico{flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:14px;border:1.5px solid transparent;cursor:pointer;transition:.2s;font-family:inherit}
.btn-sm{padding:10px 20px;font-size:13px;border-radius:8px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}.btn-ghost:hover{background:#fff;color:var(--ink)}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff;padding:11px 22px;font-size:13px}.btn-outline:hover{background:#fff;color:var(--ink)}
.btn-block{width:100%;justify-content:center;border-radius:6px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:32px;height:76px}
.logo{display:block;color:var(--ink)}
.logo-svg{height:46px;width:auto}.logo-img{height:50px;width:auto}
.main-nav{display:flex;gap:34px;margin:0 auto}
.main-nav a{font-size:13.5px;font-weight:500;padding:27px 0;border-bottom:2px solid transparent;color:#2a3038}
.main-nav a:hover,.main-nav a.active{border-color:var(--red);color:var(--ink)}
.main-nav a.active{font-weight:700}
.nav-cta-mobile{display:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;margin-left:auto;color:var(--ink)}

/* Hero */
.hero{position:relative;color:#fff;min-height:clamp(520px,34vw,680px);display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(8,9,11,.96) 0%,rgba(8,9,11,.82) 38%,rgba(8,9,11,.25) 75%),var(--hero,none) center right/cover no-repeat,
  radial-gradient(900px 500px at 82% 40%,#3a0a0e 0%,#0b0d10 70%);background-color:#0b0d10}
.hero-in{padding-top:60px;padding-bottom:60px}
.hero-text{max-width:720px}
.hero h1 em{white-space:nowrap}
.kicker{font-size:11px;letter-spacing:.2em;font-weight:600;margin-bottom:26px;color:#e8eaee}
.hero h1{font-size:clamp(36px,4.8vw,60px);font-weight:700;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{margin:26px 0 34px;max-width:430px;color:#d7dbe1;font-size:15px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* Sections */
.sec{padding:76px 0}
.sec-light{background:var(--bg)}
.sec-dark{background:var(--ink);color:#fff}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.16em;color:#333;margin-bottom:22px}
.eyebrow span{width:24px;height:3px;background:var(--red);border-radius:2px}
.sec-dark .eyebrow,.page-hero .eyebrow,.sec-contact .eyebrow{color:#c9ced6}
.split{display:grid;grid-template-columns:clamp(340px,24vw,440px) 1fr;gap:40px;align-items:start}
.split-head h2{font-size:34px;margin-bottom:20px}
.split-head p{color:var(--muted);font-size:14.5px;margin-bottom:26px}
.sec-dark .split-head p{color:#c7ccd4}
.sec-light .split-head h2{font-size:34px}

/* Service cards */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.svc-grid-4{grid-template-columns:repeat(4,1fr)}
.svc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 26px;display:flex;flex-direction:column;gap:6px;min-height:170px;transition:.2s}
.svc-card:hover{border-color:var(--red);box-shadow:0 12px 30px -14px rgba(227,6,19,.35);transform:translateY(-3px)}
.svc-ico{color:var(--red);margin-bottom:14px}
.svc-card h3{font-size:15px;font-weight:600}
.svc-card p{font-size:12px;color:var(--muted);line-height:1.5;padding-right:10px}
.svc-arrow{position:absolute;right:18px;bottom:16px;color:var(--red)}

/* Project cards */
.prj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prj-grid-4{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prj-card h3{font-size:13.5px;font-weight:600;margin:14px 0 2px;font-family:Inter}
.prj-card p{font-size:11.5px;color:#aab1bb}
.prj-img{aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:var(--ink3)}
.prj-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prj-card:hover .prj-img img{transform:scale(1.06)}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  background:linear-gradient(160deg,#7d0710,#1a0709 70%);color:#fff;font:700 22px Poppins,sans-serif;font-style:italic}

/* Clients */
.clients-bar{background:#fff;border-bottom:1px solid var(--line)}
.clients-in{display:flex;align-items:center;gap:40px;padding-top:26px;padding-bottom:26px}
.clients-in .eyebrow{margin:0;white-space:nowrap}
.clients-row{display:flex;flex:1;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.client{height:44px;display:flex;align-items:center;justify-content:center;color:#444;font:600 19px Poppins,sans-serif;font-style:italic;filter:grayscale(1);opacity:.8;transition:.2s}
.client:hover{filter:none;opacity:1}
.client img{max-height:44px;width:auto;max-width:140px;object-fit:contain}
.all-link{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.all-link:hover{color:var(--red)}
.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.clients-grid .client{background:#fff;border:1px solid var(--line);border-radius:var(--r);height:110px;filter:none;opacity:1}

/* Contact section */
.sec-contact{color:#fff;background:linear-gradient(90deg,rgba(8,9,11,.97),rgba(8,9,11,.75)),radial-gradient(700px 400px at 30% 90%,#4a0a10,#0b0d10 70%);background-color:#0b0d10}
.contact-split{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.sec-contact h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:20px}
.lead{color:#d3d7de;max-width:430px;font-size:15px}
.info-row{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.info-col{display:flex;flex-direction:column;gap:30px}
.info{display:flex;gap:14px;align-items:center}
.info-ico{width:42px;height:42px;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none}
.info strong{display:block;font-size:13.5px;font-weight:600}
.info small{color:#9aa2ad;font-size:11.5px}
.form-card{background:rgba(12,14,18,.82);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:32px;backdrop-filter:blur(6px)}
.form-card h3{font-size:18px;margin-bottom:8px}
.form-card>p{color:#b5bbc5;font-size:13px;margin-bottom:20px}
.quick-form{display:flex;flex-direction:column;gap:12px}
.quick-form input,.quick-form textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:4px;padding:13px 14px;font:inherit;font-size:13px}
.quick-form input::placeholder,.quick-form textarea::placeholder{color:#9aa2ad}
.quick-form input:focus,.quick-form textarea:focus{outline:0;border-color:var(--red)}
.quick-form textarea{resize:vertical;min-height:84px}
.hp{position:absolute!important;left:-9999px}

/* Page hero & content */
.page-hero{background:radial-gradient(800px 300px at 80% 0,#3a0a0e,#0b0d10 70%);background-color:#0b0d10;color:#fff;padding:64px 0 56px}
.page-hero h1{font-size:clamp(30px,4vw,46px);max-width:760px}
.page-hero p{margin-top:16px;color:#cfd4db;max-width:620px}
.detail{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.detail-img{border-radius:var(--r);margin-bottom:28px;width:100%}
.prose{font-size:16px;line-height:1.8;margin-bottom:30px}
.prose-dark{color:#d3d7de;max-width:760px}
.detail-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.detail-side h4{font-size:15px;margin-bottom:12px}
.detail-side a{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.detail-side a:hover{color:var(--red)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.filters a{padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:13px;color:#d7dbe1}
.filters a.active,.filters a:hover{background:var(--red);border-color:var(--red);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:30px}
.g-item{aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:var(--ink3);cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.g-item:hover img{transform:scale(1.05)}
.empty{color:#aab1bb}

/* Footer */
.site-footer{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.06)}
.site-footer .logo{color:#fff}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:34px;padding-bottom:30px;flex-wrap:wrap}
.footer-nav{display:flex;gap:34px;flex-wrap:wrap}
.footer-nav a{font-size:12.5px;color:#d7dbe1}.footer-nav a:hover{color:var(--red)}
.socials{display:flex;gap:22px;min-width:60px}.socials a:hover{color:var(--red)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);padding-top:20px;padding-bottom:26px;font-size:11.5px;color:#9aa2ad}

.wa-float{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(227,6,19,.45);z-index:60;transition:.2s}
.wa-float:hover{transform:scale(1.08)}

.toast{position:fixed;left:50%;top:92px;transform:translateX(-50%);background:#12301c;border:1px solid #2c7a45;color:#d6f5e0;padding:14px 22px;border-radius:8px;z-index:100;font-size:14px;animation:fade 5s forwards}
.toast.err{background:#3a1215;border-color:#a8242b;color:#ffd9db}
@keyframes fade{0%,85%{opacity:1}100%{opacity:0;visibility:hidden}}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:100%;max-width:100%;border-radius:4px}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;cursor:pointer}

/* Responsive */
@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .svc-grid,.svc-grid-4{grid-template-columns:repeat(3,1fr)}
  .prj-grid{grid-template-columns:repeat(2,1fr)}
  .contact-split{grid-template-columns:1fr;gap:40px}
  .detail{grid-template-columns:1fr}
}
@media(max-width:820px){
  .header-in{height:66px}
  .nav-cta{display:none}
  .nav-toggle{display:block}
  .main-nav{position:absolute;top:66px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);display:none}
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-cta-mobile{display:inline-flex;margin-top:14px;justify-content:center;border-bottom:0!important;color:#fff!important}
  .clients-in{flex-direction:column;align-items:flex-start;gap:18px}
  .clients-row{width:100%}
  .sec{padding:54px 0}
}
@media(max-width:560px){
  .svc-grid,.svc-grid-4{grid-template-columns:repeat(2,1fr)}
  .prj-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero{min-height:480px}
  .container{padding:0 18px}
  .form-card{padding:22px}
  .info-row{flex-direction:column;gap:22px}
}

/* Şeffaf navbar: üstte hero üzerinde, kaydırınca beyaz */
.site-header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.12);transition:background .3s,border-color .3s,box-shadow .3s}
.site-header .logo,.site-header .nav-toggle{color:#fff}
.site-header .main-nav a{color:#fff}
.site-header .main-nav a:hover,.site-header .main-nav a.active{color:#fff;border-color:var(--red)}
.site-header.scrolled{background:#fff;border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.site-header.scrolled .logo,.site-header.scrolled .nav-toggle{color:var(--ink)}
.site-header.scrolled .main-nav a{color:#2a3038}
.site-header.scrolled .main-nav a:hover,.site-header.scrolled .main-nav a.active{color:var(--ink)}
.hero{padding-top:76px}
.page-hero{padding-top:calc(64px + 76px)}
@media(max-width:820px){
  .site-header .main-nav a,.site-header.scrolled .main-nav a{color:#2a3038}
  .hero{padding-top:66px}.page-hero{padding-top:calc(48px + 66px)}
}
.logo-light{display:block}.logo-dark{display:none}
.site-header.scrolled .logo-light{display:none}.site-header.scrolled .logo-dark{display:block}
.site-footer .logo-light{display:block}

/* Hero görseli: dikeyde ortalı (navbar yüksekliği payı dahil), daha yüksek alan, hafif karartma */
.hero{min-height:clamp(560px,40vw,840px);
  background-image:linear-gradient(90deg,rgba(8,9,11,.95) 0%,rgba(8,9,11,.72) 32%,rgba(8,9,11,.05) 68%),var(--hero,none),radial-gradient(900px 500px at 82% 40%,#3a0a0e 0%,#0b0d10 70%);
  background-size:cover;background-position:center,right calc(50% + 38px),center;background-repeat:no-repeat}
@media(max-width:820px){.hero{background-position:center,65% calc(50% + 33px),center}}

/* Menü yazıları: daha büyük ve okunaklı */
.main-nav{gap:clamp(26px,2.6vw,44px)}
.main-nav a{font-size:16px;font-weight:600;letter-spacing:.01em}
.site-header:not(.scrolled) .main-nav a{text-shadow:0 1px 8px rgba(0,0,0,.55)}
.nav-cta{font-size:14.5px;padding:12px 24px}
@media(max-width:820px){.main-nav a{font-size:16px;text-shadow:none!important}}

/* Yasal sayfalar */
.legal{max-width:860px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,48px)}
.legal h3{font-size:20px;margin:30px 0 10px}.legal h3:first-child{margin-top:0}
.legal p{margin-bottom:14px;line-height:1.8;color:#2c333b}
.site-footer .footer-bottom a:hover{color:#fff}

/* Çerez bilgilendirme çubuğu */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:rgba(11,13,16,.97);color:#e6e9ee;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;gap:24px;padding:16px clamp(18px,3.5vw,64px);font-size:14px;box-shadow:0 -8px 30px rgba(0,0,0,.35)}
.cookie-bar[hidden]{display:none}
.cookie-bar p{margin:0;max-width:900px}
.cookie-bar a{color:#fff;text-decoration:underline}
.cookie-bar .btn{white-space:nowrap;font-size:14px;padding:11px 26px}
body.has-cookie .wa-float{bottom:92px}
@media(max-width:640px){.cookie-bar{flex-direction:column;align-items:stretch;gap:12px;text-align:center}body.has-cookie .wa-float{bottom:150px}}

/* Hizmet detay (SEO içerik) */
.prose.rich h2,.faq h2,.areas h2{font-size:24px;margin:34px 0 12px}
.prose.rich h2:first-child{margin-top:0}
.prose.rich p{margin-bottom:16px}
.prose.rich ul{margin:0 0 20px 0;padding-left:0;list-style:none}
.prose.rich li{position:relative;padding:6px 0 6px 26px}
.prose.rich li::before{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.faq{margin:8px 0 10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--red);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px;color:#3a424c;line-height:1.75}
.areas{margin:8px 0 32px}
.areas p{color:#3a424c;margin-bottom:12px}
.area-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.area-list li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px}
.side-call{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.side-call small{display:block;color:var(--muted)}
.side-call a{border:0;padding:4px 0;font-size:18px;font-weight:700;color:var(--red)}

.btn-outline-dark{border-color:#c9ced6;color:var(--ink);margin-left:8px}.btn-outline-dark:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:560px){.btn-outline-dark{margin:10px 0 0}}