:root{
  --orange:#FF5200; --orange-2:#FF8A45; --orange-dark:#DC4600; --orange-soft:#FFF0E9;
  --ink:#1A222C; --ink-2:#2A3542; --slate:#64707E; --line:#E6EAEF; --bg:#FFFFFF; --bg-2:#F7F9FB;
  --radius:16px; --shadow:0 10px 30px rgba(16,20,26,.08); --shadow-lg:0 24px 60px rgba(16,20,26,.14);
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:10px;font-weight:700;font-size:15px;border:1.5px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(255,82,0,.32)}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--orange-dark);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.btn-white:hover{transform:translateY(-2px);color:#B83A00}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.3)}
.btn-wa:hover{background:#1eb857;transform:translateY(-2px)}
.sec{padding:88px 0}
.sec-alt{background:linear-gradient(180deg,#FFF6F1,#FFEFE6)}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--orange-soft);color:var(--orange-dark);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;padding:7px 14px;border-radius:100px}
.h2{font-size:clamp(27px,3.4vw,40px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:16px 0 14px}
.lead{color:var(--slate);font-size:17px;max-width:640px}
.center{text-align:center}
.center .lead{margin:0 auto}

/* ---------- TOPBAR ---------- */
.topbar{background:linear-gradient(90deg,#C93F00,#FF5200 55%,#FF6E23);color:rgba(255,255,255,.92);font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;gap:16px}
.topbar a{display:inline-flex;align-items:center;gap:7px;transition:.2s}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;gap:22px;flex-wrap:wrap}
.topbar .tb-right{display:flex;gap:14px;align-items:center}
.topbar svg{width:15px;height:15px;fill:#fff;opacity:.9}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 2px 20px rgba(26,34,44,.05)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.logo{display:flex;align-items:center;gap:13px}
.logo-img{height:38px;width:auto}
.logo-div{width:1px;height:26px;background:var(--line);display:block}
.logo-city{font-size:11px;letter-spacing:.24em;font-weight:800;color:var(--slate)}
.logo-txt strong{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.logo-txt span{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);font-weight:700}
nav.main{display:flex;gap:28px;align-items:center}
nav.main a{font-weight:600;font-size:15px;color:#39424E;position:relative;padding:6px 0;transition:.2s}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:.25s}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{width:100%}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.25s}

/* ---------- HERO ---------- */
.hero{position:relative;background:linear-gradient(135deg,#FF5200 0%,#FF6E23 46%,#DE4300 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-220px;background:radial-gradient(circle,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 68%)}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000 0%,transparent 85%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding-top:78px;padding-bottom:78px}
.hero h1{font-size:clamp(32px,4.6vw,55px);line-height:1.1;font-weight:800;letter-spacing:-.03em;margin:20px 0 20px}
.hero h1 em{font-style:normal;color:#2B1206}
.hero p.sub{color:rgba(255,255,255,.93);font-size:17.5px;max-width:540px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);color:#fff;padding:8px 15px;border-radius:100px;font-size:13px;font-weight:700;backdrop-filter:blur(4px)}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hero-stats{display:flex;gap:38px;margin-top:46px;padding-top:30px;border-top:1px solid rgba(255,255,255,.3);flex-wrap:wrap}
.hero-stats b{display:block;font-size:29px;font-weight:800;color:#fff;letter-spacing:-.02em}
.hero-stats small{color:rgba(255,255,255,.82);font-size:13.5px}
.hero-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hv{border-radius:18px;padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.6);background:#fff;box-shadow:0 12px 30px rgba(120,40,0,.18);transition:.3s}
.hv:hover{transform:translateY(-5px);border-color:#fff;box-shadow:0 18px 44px rgba(120,40,0,.28)}
.hv.tall{grid-row:span 2;background:linear-gradient(160deg,#22303E,#141C25);border-color:transparent;box-shadow:0 18px 44px rgba(20,28,37,.35)}
.hv svg{width:30px;height:30px;fill:var(--orange)}
.hv.tall svg{fill:var(--orange-2)}
.hv b{font-size:15.5px;font-weight:700;display:block;color:var(--ink)}
.hv.tall b{color:#fff}
.hv small{color:var(--slate);font-size:12.5px;display:block;margin-top:3px}
.hv.tall small{color:rgba(255,255,255,.8)}

/* ---------- SERVICES ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:.28s;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-2));transition:.35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::before{width:100%}
.ic{width:56px;height:56px;border-radius:14px;background:var(--orange-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:.28s}
.ic svg{width:27px;height:27px;fill:var(--orange)}
.card:hover .ic{background:var(--orange)}
.card:hover .ic svg{fill:#fff}
.card h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:9px}
.card p{color:var(--slate);font-size:14.8px}
.card ul{list-style:none;margin-top:15px;padding-top:15px;border-top:1px dashed var(--line)}
.card ul li{font-size:13.8px;color:#46505D;padding-left:19px;position:relative;margin-bottom:5px}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ---------- WHY ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.why-item{padding:26px 22px;background:#fff;border-radius:14px;border:1px solid var(--line)}
.why-item .n{font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.1em}
.why-item h4{font-size:16.5px;font-weight:800;margin:9px 0 7px}
.why-item p{font-size:14.3px;color:var(--slate)}

/* ---------- GALLERY ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal-item{position:relative;border-radius:var(--radius);overflow:hidden;height:230px;display:flex;align-items:flex-end;padding:22px;color:#fff;cursor:pointer}
.gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,34,.82) 0%,rgba(20,26,34,.12) 62%,transparent 100%);transition:.3s}
.gal-item .g-bg{position:absolute;inset:0;transition:.5s}
.gal-item:hover .g-bg{transform:scale(1.07)}
.gal-item .g-txt{position:relative;z-index:2}
.gal-item .g-txt b{display:block;font-size:17px;font-weight:800}
.gal-item .g-txt small{color:#C6CDD6;font-size:13px}
.g1{background:linear-gradient(140deg,#7C8EA1,#B6C4D1)}
.g2{background:linear-gradient(140deg,#D4763B,#F3B389)}
.g3{background:linear-gradient(140deg,#6E8DA1,#AFC6D3)}
.g4{background:linear-gradient(140deg,#C98247,#EFC199)}
.g5{background:linear-gradient(140deg,#8590A0,#BCC5CF)}
.g6{background:linear-gradient(140deg,#E06A22,#FFAE79)}

/* ---------- BRANDS ---------- */
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.brand{height:78px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;color:#94A0AE;letter-spacing:.03em;font-size:15px;transition:.25s}
.brand:hover{color:var(--orange);border-color:var(--orange);transform:translateY(-3px)}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;position:relative}
.step{text-align:center;padding:0 10px}
.step .circ{width:62px;height:62px;border-radius:50%;background:#fff;border:2px solid var(--orange);color:var(--orange);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;margin:0 auto 16px;position:relative;z-index:2}
.step h4{font-size:16.5px;font-weight:800;margin-bottom:6px}
.step p{font-size:14.2px;color:var(--slate)}

/* ---------- CTA BAND ---------- */
.band{background:linear-gradient(120deg,#22303E,#141C25 60%,#22303E);border-radius:22px;padding:48px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:420px;height:420px;right:-120px;bottom:-220px;background:rgba(255,255,255,.11);border-radius:50%}
.band h3{font-size:clamp(23px,2.7vw,31px);font-weight:800;letter-spacing:-.02em;position:relative;z-index:2}
.band p{color:rgba(255,255,255,.9);margin-top:7px;position:relative;z-index:2}
.band .band-btns{display:flex;gap:12px;position:relative;z-index:2;flex-wrap:wrap}
.band .btn-white{background:var(--orange);color:#fff;box-shadow:0 10px 26px rgba(255,82,0,.4)}
.band .btn-white:hover{background:var(--orange-2);color:#fff}
.band .btn-white:hover{transform:translateY(-2px)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px}
.cinfo-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.cinfo-item .ci{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:var(--orange-soft);display:flex;align-items:center;justify-content:center}
.cinfo-item .ci svg{width:21px;height:21px;fill:var(--orange)}
.cinfo-item b{display:block;font-size:15px;font-weight:800}
.cinfo-item span{color:var(--slate);font-size:14.5px}
form.cf{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:15px;background:#FBFCFD;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(255,82,0,.11)}
.field textarea{min-height:118px;resize:vertical}

/* ---------- FOOTER ---------- */
footer{background:linear-gradient(135deg,#E84A00,#C43C00);color:rgba(255,255,255,.85);padding:64px 0 0;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:44px}
footer h5{color:#fff;font-size:15.5px;font-weight:800;margin-bottom:17px}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
footer a:hover{color:#fff;text-decoration:underline}
.f-soc{display:flex;gap:10px;margin-top:18px}
.f-soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;transition:.25s}
.f-soc a svg{width:17px;height:17px;fill:#fff}
.f-soc a:hover{background:#fff;border-color:#fff}
.f-soc a:hover svg{fill:var(--orange-dark)}
.f-bot{border-top:1px solid rgba(255,255,255,.25);padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.4px}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.wa-btn{width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.42);transition:.25s;position:relative}
.wa-btn svg{width:31px;height:31px;fill:#fff}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulse 2.2s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.wa-panel{width:310px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;display:none}
.wa-panel.open{display:block;animation:up .25s ease}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.wa-head{background:#075E54;color:#fff;padding:15px 18px;display:flex;align-items:center;gap:11px}
.wa-head b{font-size:14.5px}
.wa-head small{display:block;color:#9EDAB0;font-size:12px}
.wa-body{padding:18px;background:#ECE5DD}
.wa-msg{background:#fff;border-radius:0 10px 10px 10px;padding:12px 14px;font-size:14px;color:#333;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wa-foot{padding:14px 18px;background:#fff}
.wa-foot a{display:flex;justify-content:center;align-items:center;gap:8px;background:#25D366;color:#fff;padding:11px;border-radius:9px;font-weight:700;font-size:14.5px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .grid-4,.why{grid-template-columns:repeat(2,1fr)}
  .brands{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  nav.main{position:fixed;inset:78px 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:10px 22px 22px;border-bottom:1px solid var(--line);display:none;box-shadow:var(--shadow)}
  nav.main.open{display:flex}
  nav.main a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .hdr-cta{display:none}
  .grid-3,.gal,.contact-grid,.grid-2{grid-template-columns:1fr}
  .sec{padding:62px 0}
  .band{padding:34px}
  .topbar .tb-left span.hide-m{display:none}
}
@media(max-width:520px){
  .grid-4,.why,.f-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .hero-visual{grid-template-columns:1fr}
  .hv.tall{grid-row:auto}
  .topbar{display:none}
  .logo-div,.logo-city{display:none}
  .wa-panel{width:calc(100vw - 44px)}
}

/* ---------- FORM UYARILARI ---------- */
.alert{padding:12px 15px;border-radius:10px;font-size:14.3px;margin-bottom:14px;border:1px solid transparent}
.alert.ok{background:#E8F7EE;color:#166534;border-color:#BBE6CB}
.alert.err{background:#FEECEC;color:#B3261E;border-color:#F5C6C6}
.cinfo-item span a{color:var(--slate)}
.cinfo-item span a:hover{color:var(--orange)}
.gal-item .g-bg{background-repeat:no-repeat}