/* Modern Onepage Styles — Bilgin Oto Kurtarma */
:root{
  --bg:#0f1724;
  --card:#0b1220cc;
  --muted:#98a0b3;
  --accent:#ff6b35;
  --accent-2:#ffd166;
  --glass: rgba(255,255,255,0.04);
  --max:1100px;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#071021 0%, #071827 60%); color:#e6eef8; -webkit-font-smoothing:antialiased;
  padding-top:72px; /* space for fixed header */
}

/* Keep header fixed so it doesn't disappear while scrolling */
.site-header{position:fixed;top:0;left:0;right:0;height:72px}
.container{max-width:var(--max);margin:0 auto;padding:1rem}
.nav-row{display:flex;align-items:center;justify-content:space-between ;height:72px}
.brand{font-weight:700;font-size:1.15rem;letter-spacing:0.4px}
.site-header{backdrop-filter: blur(6px);z-index:60;background:linear-gradient(180deg, rgba(7,10,14,0.45), rgba(7,10,14,0.15));border-bottom:1px solid rgba(255,255,255,0.03)}
.nav{display:flex;gap:1rem}
.nav a{color:var(--muted);text-decoration:none;padding:0.5rem}
.nav a:hover{color:#fff}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:1.25rem}

/* Logo styling */
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo{height:48px;width:auto;display:block}
.brand-text{color:#fff;font-weight:700}

/* Hero */
.hero{padding:4rem 0;background:linear-gradient(120deg, rgba(255,107,53,0.06), transparent);}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero-left h1{font-size:2rem;margin:0 0 .5rem}
.hero-left p{color:var(--muted);margin:0 0 1rem}
.hero-ctas{display:flex;gap:.75rem;margin-bottom:1rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;border:0;cursor:pointer;font-weight:600;text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071021}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
  .quick-contact{display:flex;gap:1rem;color:var(--muted);margin-top:1rem;flex-wrap:nowrap}
  .quick-contact > span{flex:0 0 50%;max-width:50%;display:flex;align-items:center}
.hero-right .card{background:var(--glass);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.hero-right input{width:100%;padding:.6rem;margin:.4rem 0;border-radius:8px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:#e6eef8}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* hero image */
.hero-image{width:100%;height:220px;object-fit:cover;border-radius:10px;margin-bottom:.75rem;display:block}

/* service images */
.service img{width:64px;height:64px;object-fit:cover;border-radius:8px;margin:0 auto .5rem;display:block}

/* Services */
.section{padding:3.5rem 0}
.section.alt{background:rgba(10,15,25,0.3)}
.section-title{font-size:1.25rem;margin-bottom:1rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.service{background:var(--card);padding:1.25rem;border-radius:12px;text-align:center}
.service .icon{font-size:1.6rem;margin-bottom:.5rem}

/* Services grid cards */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.service-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 30px rgba(2,6,23,0.45);display:flex;flex-direction:column}
.card-media{height:160px;background-size:cover;background-position:center;flex:0 0 auto}
.card-media{position:relative}
.card-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));pointer-events:none}
.card-body{padding:1rem;flex:1 1 auto;display:flex;flex-direction:column;gap:.6rem}
.card-body h3{margin:0;font-size:1.05rem;color:#fff}
.card-body p{margin:0;color:rgba(255,255,255,0.85);font-size:.95rem}
.service-card .btn{margin-top:auto;align-self:flex-start}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(2,6,23,0.6);transition:all .18s ease}

@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:650px){
  .services-grid{grid-template-columns:1fr}
  .card-media{height:130px}
  .service-card{border-radius:10px}
}

/* How */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.step{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:10px;text-align:center;font-weight:700}
.step span{display:block;font-weight:400;color:var(--muted);margin-top:.5rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form input, .contact-form textarea{width:100%;padding:.7rem;margin:.35rem 0;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:#e6eef8}
.contact-form .muted{margin-top:.5rem}

.site-footer{padding:1.25rem 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem;color:var(--muted)}
.footer-row{display:flex;justify-content:space-between;align-items:center}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:650px){
  .nav{display:none;}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}

  /* Mobile: show nav when `.open` is toggled */
  .nav{position:fixed;top:72px;left:0;right:0;flex-direction:column;padding:1rem;gap:.5rem;background:rgba(7,10,14,0.96);box-shadow:0 6px 24px rgba(2,6,23,0.6);max-height:calc(100vh - 72px);overflow:auto;z-index:220;}
  .nav.open{display:flex}
  .nav a{padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,0.02)}
}


/* Corporate Hero (replacement for banner) */
.hero{
  position:relative;
  padding:6rem 0 4rem;
  background: url('https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=1600&q=60') center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,0.03);
  overflow:hidden;
}
.hero::before{
  content: '';
  position: absolute;inset:0;z-index:1;
  background: linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.55));
}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:2.5rem;align-items:center}
.hero-left h1{font-size:2.6rem;margin:0 0 .6rem;position:relative;z-index:2}
.hero-left p{color:var(--muted);margin:0 0 1rem;font-size:1.05rem;position:relative;z-index:2}

/* Make hero text more visible: backdrop, contrast and shadows */
.hero-left{position:relative;z-index:3;background:linear-gradient(90deg, rgba(2,6,23,0.55), rgba(2,6,23,0.18));padding:1.2rem;border-radius:12px}
.hero-left h1{color:#ffffff;text-shadow:0 10px 30px rgba(0,0,0,0.6);font-weight:800}
.hero-left p{color:rgba(255,255,255,0.92);text-shadow:0 6px 18px rgba(0,0,0,0.45)}
.hero-ctas{position:relative;z-index:3}
.hero-ctas{display:flex;gap:.85rem;margin-bottom:1rem}
.hero-right .card{background:rgba(7,10,14,0.78);padding:1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 18px 50px rgba(2,6,23,0.6);backdrop-filter:blur(6px);position:relative;z-index:3}

@media (max-width:900px){
  .hero{padding:4rem 0;background-position:center top}
  .hero::before{background: linear-gradient(180deg, rgba(2,6,23,0.65), rgba(2,6,23,0.65));}
  .hero-left h1{font-size:2rem}
  .hero-right .card{padding:1rem}
  .map-preview img{object-position:center top}
  /* Ensure hero stacks on small screens */
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .hero-right .card{max-width:720px;width:100%;margin:0 auto}
  .hero-left, .hero-right{position:relative;z-index:2}
}

@media (max-width:480px){
  .hero::before{background: linear-gradient(180deg, rgba(2,6,23,0.72), rgba(2,6,23,0.72));}
  .map-preview img{object-position:center top}
  .hero{padding:3rem 0}
  .hero-left h1{font-size:1.6rem}
  .hero-left p{font-size:.95rem}
  .hero-right .card{padding:.85rem;border-radius:10px}
  .map-preview img{height:90px}
  /* Move FABs up so they don't overlap hero content on small screens */
  .contact-actions{right:12px;bottom:18px}
}

/* Quick contact: make two spans behave like col-lg-6 (50% width) on large screens */
/* (handled globally above) */

/* Make hero CTAs two equal-width columns and center them on all viewports */
.hero-ctas{display:flex;justify-content:center;align-items:center;gap:.75rem;flex-wrap:nowrap}
.hero-ctas > a{flex:0 0 50%;max-width:50%;text-align:center;display:inline-flex;justify-content:center;align-items:center}
.hero-ctas > a.btn{width:100%;display:inline-flex;justify-content:center}

/* small helpers */
.text-center{text-align:center}

/* Image importer removed */

.--REMOVED-SEARCH--
/* Back to top button (styled as FAB and placed inside .contact-actions) */
.backToTop{width:48px;height:48px;border-radius:12px;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.4);opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.backToTop.visible{opacity:1;transform:translateY(0)}

@media (max-width:650px){
  /* no header search */
}

/* Floating contact buttons (WhatsApp + phone) */
.contact-actions{position:fixed;right:18px;bottom:90px;display:flex;flex-direction:column;gap:.6rem;z-index:95}
.fab{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(2,6,23,0.6);transition:transform .12s ease;}
.fab:active{transform:translateY(1px)}
.fab.wa{background:linear-gradient(180deg,#25D366,#128C7E);}
.fab.phone{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#071021}
.fab.backToTop{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#071021}
.fab svg{display:block}

@media (max-width:480px){
  .contact-actions{right:12px;bottom:84px}
  .fab{width:44px;height:44px;border-radius:10px}
}

  /* Map preview inside quick-send card */
  .map-preview-wrap{width:100%;margin-bottom:.75rem}
  .map-preview{display:block;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
  .map-preview img{width:100%;height:160px;object-fit:cover;display:block}

  @media (max-width:900px){
    .map-preview img{height:120px}
  }
  @media (max-width:480px){
    .map-preview img{height:100%}
  }