@font-face { font-family: Manrope; src: url('assets/fonts/Manrope-Variable.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
:root { --cobalt:#082587; --midnight:#071B58; --orange:#FF6500; --line:#CBD5EF; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cobalt); color:white; font:16px/1.5 Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
ul { list-style:none; padding:0; margin:0; }
a:focus-visible, button:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:10; padding:12px 16px; color:var(--cobalt); background:white; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.reading-progress { position:fixed; z-index:20; inset:0 0 auto; height:3px; pointer-events:none; }
.reading-progress span { display:block; width:100%; height:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; }
#header { min-height:72px; padding:8px 32px; display:flex; align-items:center; gap:28px; }
.logo-container { width:250px; max-width:40%; margin-right:auto; }
#desktop-nav ul { display:flex; gap:24px; }
#desktop-nav a, .btn-hemen-ara { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-decoration:none; }
.btn-hemen-ara { justify-content:center; padding:6px 18px; border:2px solid white; white-space:nowrap; }
#desktop-nav a:hover, .btn-service-call:hover, .disclaimer a:hover { text-decoration:underline; }
.btn-hemen-ara:hover { background:white; color:var(--cobalt); }
#hero h1, #service-icons-band a, #service-section h2, .service-item h3, #other-services h2, .contact-title, .contact-phone { font-family:'Barlow Condensed',Arial,sans-serif; font-weight:800; }
#hero h1 { margin:0 16px 4px; text-align:center; font-size:44px; line-height:1.1; }
.video-stage { display:block; width:min(calc(100% - 32px), calc(333.333vh - 700px)); aspect-ratio:10/3; padding:0; margin:auto; border:0; background:var(--cobalt); cursor:pointer; }
.boiler-video { display:block; width:100%; height:100%; object-fit:contain; }
.hero-call { display:flex; align-items:center; justify-content:center; gap:14px; width:540px; max-width:calc(100% - 32px); min-height:64px; margin:8px auto 12px; padding:8px 24px; background:var(--orange); color:var(--midnight); font-size:20px; font-weight:800; text-align:center; text-decoration:none; }
.hero-call span { font-size:24px; white-space:nowrap; }
.hero-call:hover, .mobile-call-bar:hover { background:#ff8535; }
.mobile-call-bar { display:none; }
#service-icons-band { padding:0 32px; background:white; color:var(--midnight); }
#service-icons-band ul { min-height:64px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#service-icons-band li { display:flex; align-items:center; justify-content:center; gap:14px; }
#service-icons-band li + li { border-left:1px solid var(--line); }
#service-icons-band img { order:-1; width:40px; height:40px; object-fit:contain; }
#service-icons-band a { display:inline-flex; align-items:center; min-height:44px; font-size:28px; line-height:1; text-decoration:none; }
#service-icons-band a:hover { text-decoration:underline; }
#service-section { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; padding:24px 32px; background:white; color:var(--midnight); }
#service-section > .eyebrow, #service-section > h2 { grid-column:1/-1; }
.eyebrow { margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--cobalt); }
#service-section h2 { margin:0 0 16px; font-size:36px; line-height:1.1; }
.service-item { border-top:1px solid var(--line); padding:10px 0 0; }
.ordinal { font-size:12px; font-weight:700; color:var(--cobalt); letter-spacing:.14em; }
.service-item h3 { margin:2px 0 6px; font-size:24px; line-height:1.1; }
.service-item p { max-width:42ch; margin:0; line-height:1.5; }
.btn-service-call { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px; }
#other-services { display:flex; align-items:baseline; gap:24px; padding:20px 32px; background:#F4F6FA; color:var(--midnight); }
#other-services h2 { margin:0; font-size:20px; white-space:nowrap; }
#other-services p { margin:0; }
#iletisim { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; padding:24px 32px; }
.contact-title { margin:0; font-size:36px; line-height:1.1; }
.contact-info address { font-style:normal; }
.contact-phone { display:inline-flex; align-items:center; min-height:44px; font-size:40px; line-height:1.1; text-underline-offset:5px; }
.contact-info p { margin:4px 0 0; }
.social-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.social-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 10px; border:1px solid rgba(255,255,255,.55); border-radius:4px; font-size:14px; font-weight:700; text-decoration:none; }
.social-link svg { flex:none; width:20px; height:20px; }
.social-link:hover { background:white; color:var(--cobalt); }
.disclaimer { grid-column:2; }
.disclaimer a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-underline-offset:3px; }
#site-footer { display:flex; justify-content:space-between; gap:16px; padding:16px 32px; background:white; color:var(--midnight); font-size:14px; }
#site-footer p { margin:0; }
@media (min-width:768px) {
  html { scroll-padding-top:80px; }
  #header { position:sticky; top:0; z-index:21; background:var(--cobalt); }
}
@media (max-width:767px) {
  html { scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  body { padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  #header { min-height:0; padding:8px 16px 0; display:grid; grid-template-columns:1fr auto; gap:0 8px; }
  .logo-container { width:130px; max-width:100%; margin:0; }
  .btn-hemen-ara { grid-column:2; grid-row:1; padding:6px 10px; font-size:14px; }
  #desktop-nav { grid-column:1/-1; }
  #desktop-nav ul { gap:20px; }
  #desktop-nav a { font-size:14px; }
  #hero h1 { margin:4px 12px 6px; font-size:30px; }
  .video-stage { width:calc(100% - 16px); }
  .hero-call { flex-direction:column; gap:0; width:calc(100% - 32px); min-height:72px; margin:8px auto 12px; font-size:18px; line-height:1.2; }
  .hero-call span { font-size:22px; }
  #service-icons-band { padding:0 8px; }
  #service-icons-band ul { min-height:62px; }
  #service-icons-band li { gap:4px; }
  #service-icons-band img { width:26px; height:26px; }
  #service-icons-band a { font-size:18px; }
  #service-section { grid-template-columns:1fr; padding:20px 16px; }
  #service-section h2 { font-size:30px; }
  .service-item { padding:8px 0 4px; }
  .service-item h3 { margin:0 0 4px; font-size:22px; }
  #other-services { display:block; padding:16px; }
  #other-services h2 { margin:0 0 4px; }
  #iletisim { display:block; padding:20px 16px; }
  .contact-title { margin:0 0 12px; font-size:30px; }
  .contact-phone { font-size:32px; }
  #site-footer { display:block; padding:16px; }
  #site-footer p + p { margin-top:4px; }
  .mobile-call-bar { position:fixed; inset:auto 0 0; z-index:30; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px; min-height:calc(56px + env(safe-area-inset-bottom)); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--orange); color:var(--midnight); font-weight:800; text-decoration:none; box-shadow:0 -4px 12px rgba(0,0,0,.2); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.motion-ready #header > * { animation:arrive 450ms both; }
.motion-ready #header > :nth-child(2) { animation-delay:60ms; }
.motion-ready #header > :nth-child(3) { animation-delay:120ms; }
.motion-ready #hero h1 span { display:inline-block; animation:arrive 450ms both; }
.motion-ready #hero h1 span:nth-child(2) { animation-delay:80ms; }
.motion-ready #hero h1 span:nth-child(3) { animation-delay:160ms; }
.reveal-item { transition:opacity 450ms ease, transform 450ms ease; }
.reveal-pending { opacity:0; transform:translateY(8px); }
.reveal-pending:focus-within { opacity:1; transform:none; }
@media (hover:hover) and (pointer:fine) {
  .btn-hemen-ara, .hero-call { transition:background-color 200ms, color 200ms, transform 200ms; }
  .btn-hemen-ara:hover, .hero-call:hover { transform:translateY(-2px); }
  #service-icons-band a:hover { text-decoration:underline; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal-pending { opacity:1; transform:none; }
}


/* Motion V6: decorative only; the content remains available without script. */
#hero { overflow:hidden; }
.video-stage { position:relative; isolation:isolate; overflow:hidden; perspective:900px; touch-action:manipulation; }
.video-stage::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(90deg,#000,transparent 43%,transparent 57%,#000); }
.boiler-video { position:relative; z-index:1; transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition:transform 240ms ease-out; }
.stage-circuit { position:absolute; z-index:2; inset:0; width:100%; height:100%; color:#b7d7ff; opacity:.68; pointer-events:none; }
.circuit-lines { stroke-width:1.4; opacity:.55; }
.circuit-nodes { stroke-width:2; opacity:.8; }
.circuit-pulses { color:var(--orange); stroke-width:3; stroke-linecap:round; stroke-dasharray:18 420; stroke-dashoffset:438; opacity:0; }
.motion-ready #hero h1 span { animation:hero-word 800ms cubic-bezier(.2,.7,.2,1) both; }
.motion-ready #hero h1 span:nth-child(2) { animation-delay:120ms; }
.motion-ready #hero h1 span:nth-child(3) { animation-delay:240ms; }
.motion-ready .video-stage { animation:stage-arrive 900ms 200ms both; }
.motion-ready .video-stage.is-playing .circuit-lines { stroke-dasharray:500; animation:draw-circuit 1.5s ease-out both; }
.motion-ready .video-stage.is-playing .circuit-nodes { transform-origin:center; animation:node-arrive 1s 350ms both; }
.motion-ready .video-stage.is-playing .circuit-pulses { animation:pulse-circuit 3s 500ms ease-out both; }
@keyframes hero-word { from { opacity:0; filter:blur(7px); transform:translateY(18px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@keyframes stage-arrive { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes draw-circuit { from { stroke-dashoffset:500; opacity:0; } to { stroke-dashoffset:0; opacity:.55; } }
@keyframes node-arrive { from { opacity:0; transform:scale(.94); } to { opacity:.8; transform:scale(1); } }
@keyframes pulse-circuit { 0% { opacity:0; stroke-dashoffset:438; } 12% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; stroke-dashoffset:0; } }
.service-item { position:relative; transform:translateY(var(--reveal-y,0px)) rotateX(var(--card-y,0deg)) rotateY(var(--card-x,0deg)); transform-origin:center; transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1); }
.service-item::before { content:""; position:absolute; top:-2px; left:0; width:100%; height:3px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform 600ms cubic-bezier(.2,.7,.2,1); }
.service-item.reveal-item:not(.reveal-pending)::before, .service-item:hover::before, .service-item:focus-within::before { transform:scaleX(1); }
.service-item:nth-of-type(2) { transition-delay:90ms; }
.service-item:nth-of-type(3) { transition-delay:180ms; }
.service-item.reveal-pending { --reveal-y:18px; transform:translateY(var(--reveal-y)); }
.service-item.reveal-pending:focus-within { opacity:1; transform:none; }
@media (max-width:767px) { .stage-circuit { opacity:.5; } .video-stage::before { background-size:24px 24px; } .service-item:nth-of-type(n) { transition-delay:0ms; } }
@media (prefers-reduced-motion:reduce) { .boiler-video, .service-item { transform:none !important; } }
.document-hidden *, .motion-paused, .motion-paused * { animation-play-state:paused !important; }

/* Mobile V8 */
#service-icons-band a { width: 100%; justify-content: center; gap: 14px; min-height: 64px; }
@media (max-width: 767px) {
  #header { padding: 6px 16px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  #header .btn-hemen-ara { display: none; }
  #desktop-nav { grid-column: 2; grid-row: 1; }
  #desktop-nav ul { gap: 12px; }
  #desktop-nav a { font-size: 13px; }
  .logo-container { width: 130px; }
  #hero h1 { margin: 2px 12px 6px; }
  #service-icons-band ul { min-height: 56px; }
  #service-icons-band a { min-height: 56px; gap: 6px; }
  #service-section { padding: 16px; }
  #service-section h2 { font-size: 28px; margin-bottom: 12px; }
  .service-item .ordinal { position: absolute; left: 0; top: 8px; line-height: 24.2px; }
  .service-item h3 { padding-left: 26px; }
  #iletisim { padding: 16px; }
  .contact-title { font-size: 28px; margin-bottom: 8px; }
  .social-links { margin-top: 8px; }
  #site-footer { padding: 12px 16px; }
}