/* Has Prefabric — tek renk (koyu petrol) kurumsal tema */
:root{
  --brand:#0f3d4c;
  --brand-dark:#0a2c38;
  --brand-mid:#1d5568;
  --brand-light:#e8eff1;
  --brand-tint:#f4f8f9;
  --text:#22333a;
  --muted:#5c7078;
  --white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--brand-tint);line-height:1.6}
img{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none}

.wrap{display:flex;min-height:100vh}

/* ---------- Sol menü ---------- */
.sidebar{width:250px;background:var(--brand-dark);color:var(--white);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;padding:28px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--white);padding:0 24px 26px;font-size:17px;letter-spacing:1px}
.logo b{font-weight:800}
.logo span{font-weight:300}
.sidebar nav{display:flex;flex-direction:column;flex:1}
.sidebar nav a{color:#c8d8dd;padding:13px 24px;border-left:3px solid transparent;font-size:15px;transition:.2s}
.sidebar nav a:hover{background:var(--brand);color:var(--white)}
.sidebar nav a.active{background:var(--brand);color:var(--white);border-left-color:#7fb3c2}
.side-contact{padding:20px 24px;border-top:1px solid var(--brand-mid);font-size:13px}
.side-contact p{color:#9db8c0;text-transform:uppercase;letter-spacing:1px;font-size:11px;margin-bottom:8px}
.side-contact a{display:block;color:#e3edf0;margin-bottom:5px;word-break:break-all}

/* ---------- Ana alan ---------- */
.main{flex:1;margin-left:250px;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
.topbar{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:480px;display:flex;align-items:flex-end}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,56,.15) 0%,rgba(10,44,56,.82) 100%)}
.hero-text{position:relative;z-index:1;padding:48px;color:var(--white);max-width:720px}
.hero-text h1{font-size:38px;line-height:1.2;margin-bottom:14px}
.hero-text p{font-size:17px;color:#dbe7ea;margin-bottom:22px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-block;background:var(--brand);color:var(--white);padding:12px 26px;border-radius:4px;font-weight:600;font-size:15px;transition:.2s}
.btn:hover{background:var(--brand-mid)}
.btn-outline{background:transparent;border:2px solid var(--white)}
.btn-outline:hover{background:var(--white);color:var(--brand-dark)}

/* ---------- Bölümler ---------- */
.section{padding:48px;max-width:1200px}
.section h2{color:var(--brand-dark);font-size:26px;margin-bottom:24px;border-left:4px solid var(--brand);padding-left:14px}
.center{text-align:center;margin-top:28px}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.feature{background:var(--white);border-top:3px solid var(--brand);padding:22px;border-radius:6px;box-shadow:0 1px 4px rgba(10,44,56,.08)}
.feature h3{color:var(--brand-dark);font-size:17px;margin-bottom:8px}
.feature p{font-size:14px;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:var(--white);border-radius:6px;overflow:hidden;box-shadow:0 1px 5px rgba(10,44,56,.1)}
.card img{height:220px;width:100%;object-fit:cover}
.card-body{padding:18px 20px}
.card-body h3{color:var(--brand-dark);margin-bottom:6px}
.card-body p{font-size:14px;color:var(--muted)}

.page-head{padding:44px 48px 8px;max-width:900px}
.page-head h1{color:var(--brand-dark);font-size:32px;margin-bottom:10px}
.page-head p{color:var(--muted);font-size:16px}
.page-head+ .cards{margin:28px 48px 0;max-width:1104px}

.spec ul{list-style:none;margin-bottom:22px}
.spec li{padding:9px 0 9px 26px;border-bottom:1px solid var(--brand-light);position:relative}
.spec li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}

/* ---------- Galeri ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:28px 48px 48px;max-width:1300px}
.gal-item{background:var(--white);border-radius:6px;overflow:hidden;box-shadow:0 1px 5px rgba(10,44,56,.1)}
.gal-item img{height:230px;width:100%;object-fit:cover;transition:.3s}
.gal-item:hover img{transform:scale(1.04)}
.gal-item figcaption{padding:12px 16px;font-size:14px;color:var(--brand-dark);font-weight:600}

/* ---------- Referanslar ---------- */
.refs{padding:28px 48px 48px;max-width:1000px;display:flex;flex-direction:column;gap:22px}
.ref{display:flex;gap:22px;background:var(--white);border-radius:6px;overflow:hidden;box-shadow:0 1px 5px rgba(10,44,56,.1)}
.ref img{width:280px;height:190px;object-fit:cover;flex-shrink:0}
.ref div{padding:20px 22px}
.ref h3{color:var(--brand-dark);margin-bottom:8px}
.ref p{font-size:14px;color:var(--muted)}

/* ---------- İletişim ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;padding:28px 48px 0;max-width:1200px}
.contact-card{background:var(--white);border-top:3px solid var(--brand);padding:24px;border-radius:6px;box-shadow:0 1px 5px rgba(10,44,56,.1)}
.contact-card h3{color:var(--brand-dark);margin-bottom:10px}
.contact-card a{display:block;margin-bottom:8px;font-weight:600;word-break:break-all}
.contact-card p{font-size:14px;color:var(--muted)}
.wa-btn{margin-top:6px;color:var(--white)!important;font-weight:600}

/* ---------- Yasal ---------- */
.legal{padding:10px 48px 48px;max-width:820px;font-size:15px}
.legal h3{color:var(--brand-dark);margin:22px 0 8px}
.legal p{margin-bottom:10px;color:var(--text)}

/* ---------- Footer ---------- */
footer{background:var(--brand-dark);color:#c8d8dd;margin-top:auto}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;padding:40px 48px;max-width:1200px}
.foot-col h4{color:var(--white);margin-bottom:12px;font-size:15px}
.foot-col p{font-size:14px}
.foot-col a{display:block;color:#c8d8dd;font-size:14px;margin-bottom:8px}
.foot-col a:hover{color:var(--white)}
.foot-bottom{border-top:1px solid var(--brand-mid);padding:16px 48px;font-size:13px;color:#9db8c0}

/* ---------- WhatsApp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(10,44,56,.4);z-index:100;transition:.2s}
.wa-float:hover{background:var(--brand-mid);transform:scale(1.07)}

/* ---------- Mobil ---------- */
.menu-btn{display:none;background:none;border:none;color:var(--white);cursor:pointer}
.logo-m{color:var(--white);font-size:16px;letter-spacing:1px;font-weight:300}
.logo-m b{font-weight:800}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:.25s;width:240px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar{display:flex;align-items:center;gap:14px;background:var(--brand-dark);padding:14px 18px;position:sticky;top:0;z-index:40}
  .menu-btn{display:block}
  .hero-text{padding:28px}
  .hero-text h1{font-size:27px}
  .section,.page-head,.gallery,.refs,.contact-grid,.legal{padding-left:20px;padding-right:20px}
  .page-head+ .cards{margin:24px 20px 0}
  .ref{flex-direction:column}
  .ref img{width:100%;height:200px}
  .foot-grid,.foot-bottom{padding-left:20px;padding-right:20px}
}