:root{
  --nav:#063042;         /* eskiye yakın koyu ama yumuşak */
  --nav2:#052635;
  --bg:#f6f8fb;          /* açık zemin */
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.10);
  --shadow:0 14px 40px rgba(15,23,42,.10);
  --primary:#e53935;
  --primary2:#c62828;
  --radius:16px;
  --container:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto}

/* TOPBAR */
.topbar{
  background:var(--nav2);
  color:rgba(255,255,255,.85);
  font-size:14px;
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; gap:12px;
}
.topbar__left{display:flex; gap:10px; align-items:center; flex-wrap:wrap; opacity:.95}
.dot{opacity:.6}
.topbar__left a{color:rgba(255,255,255,.85)}
.topbar__right{display:flex; gap:10px; align-items:center}
.topbar__phone{font-weight:800; color:#fff}
.lang{
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  text-transform:lowercase;
}

/* HEADER */
.header{
  background:var(--nav);
  border-bottom:1px solid rgba(255,255,255,.10);
  position:sticky; top:0; z-index:20;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:12px;
}
.brand img{height:42px}

.nav{display:flex; gap:14px; align-items:center}
.nav__link{
  color:rgba(255,255,255,.85);
  padding:10px 10px;
  border-radius:12px;
  font-size:15px;
}
.nav__link:hover{background:rgba(255,255,255,.08)}
.nav__link.is-active{color:#fff; font-weight:800}

.navToggle{
  display:none;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  border-radius:12px;
  cursor:pointer;
}
.navToggle span{
  display:block;width:20px;height:2px;
  background:rgba(255,255,255,.8);
  margin:6px auto;
}

/* DROPDOWN */
.dropdown{position:relative}
.dropdown__btn{border:none;background:transparent;cursor:pointer;display:flex;gap:8px;align-items:center}
.caret{
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,.65);
}
.dropdown__menu{
  position:absolute; top:46px; left:0;
  min-width:260px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:10px;
  display:none;
}
.dropdown__menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  font-size:14px;
}
.dropdown__menu a:hover{background:rgba(15,23,42,.05); color:var(--text)}
.dropdown:hover .dropdown__menu{display:block}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:800;
}
.btn--primary{
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  border-color:rgba(229,57,53,.25);
  color:#fff;
}
.btn--ghost{
  background:transparent;
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
.btn--lg{padding:12px 18px; border-radius:16px}

/* HERO */
.hero{
  position:relative;
  min-height: 520px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,20,35,.55), rgba(5,20,35,.72)),
    url("../image/services/deniz.jpg") center/cover no-repeat;
  transform: scale(1.02);
  filter: saturate(1.1) contrast(1.05);
}
.hero__inner{position:relative; padding:70px 0 60px; max-width: 920px}
.hero__title{margin:0; line-height:1.02}
.hero__titleTop{
  display:block;
  font-size:64px;
  font-weight:900;
  color:var(--primary);
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero__titleBottom{
  display:block;
  font-size:72px;
  font-weight:900;
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero__sub{
  margin:18px auto 18px;
  color:rgba(255,255,255,.88);
  max-width: 62ch;
  font-size:16px;
}
.hero__actions{margin-top:10px}

/* PAGE */
.page{background:var(--bg)}
.section{padding:34px 0 52px}
.section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; margin-bottom:14px;
}
.section__eyebrow{
  color:#0ea5a5;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  margin:0 0 6px;
}
.section__title{margin:0; font-size:28px}

/* SERVICE CARDS */
.servicesGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.svcCard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.15s ease;
}
.svcCard:hover{transform:translateY(-3px)}
.svcCard__img{height:170px; background:#e8eef5}
.svcCard__img img{width:100%; height:100%; object-fit:cover}
.svcCard__body{padding:14px}
.svcCard__body h3{margin:0 0 6px; font-size:16px}
.svcCard__body p{margin:0 0 10px; color:var(--muted); font-size:14px}
.svcCard__cta{color:#0ea5a5; font-weight:900; font-size:13px}

/* FOOTER */
.footer{
  background:#fff;
  border-top:1px solid var(--line);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.25fr .75fr .9fr;
  gap:16px;
  padding:28px 0;
}
.footer__logo{height:36px; margin-bottom:10px}
.footer h4{margin:0 0 10px}
.footer a{display:block; margin:8px 0; color:var(--muted)}
.footer a:hover{color:var(--text)}
.footer__bottom{
  border-top:1px solid var(--line);
  padding:12px 0 16px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
}
.muted{color:var(--muted)}

/* WHATSAPP */
.whatsapp{
  position:fixed;
  right:16px; bottom:16px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(14,165,165,.14);
  border:1px solid rgba(14,165,165,.30);
  color:#0f766e;
  font-weight:900;
  box-shadow:var(--shadow);
}

/* RESPONSIVE */
@media (max-width: 1020px){
  .servicesGrid{grid-template-columns: repeat(2, 1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
  .hero__titleTop{font-size:52px}
  .hero__titleBottom{font-size:60px}
}
@media (max-width: 680px){
  .navToggle{display:block}
  .nav{
    display:none;
    position:absolute;
    right:20px; left:20px;
    top: 70px;
    background:var(--nav);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .nav.is-open{display:flex}
  .dropdown:hover .dropdown__menu{display:none} /* mobilde hover yok */
  .servicesGrid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .hero{min-height: 430px}
  .hero__titleTop{font-size:40px}
  .hero__titleBottom{font-size:48px}
}
/* Mobil menü aç/kapat */
@media (max-width: 1020px){
  .nav { display: none; }
  .nav.is-open { display: block; }
}

/* Mobil dropdown aç/kapat */
.dropdown__menu { display: none; }
.dropdown.is-open .dropdown__menu { display: block; }
/* Mobil menü: linkler alt alta, kayma olmasın */
@media (max-width: 1020px){
  .nav{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
  }

  .nav__link,
  .dropdown__btn,
  .btn.btn--primary{
    width: 100%;
    display: block;
    text-align: left;
  }

  /* Dropdown menü mobilde içeride, altına açılsın */
  .dropdown__menu{
    position: static !important;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border-radius: 12px;
  }

  /* Hizmetlerimiz satırı düzenli görünsün */
  .dropdown__btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}