:root{
  --bg:#0b0b0b;
  --elev:#121212;
  --card:#151515;
  --ink:#f4f5f7;
  --muted:#b7b9bd;
  --brand:#ffc400; /* brighter industrial yellow */
  --brand-ink:#111;
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.65 'Inter',system-ui,Segoe UI,Roboto,Arial}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
.container{width:min(1180px,92%);margin:auto}
/* Header */
.header{position:sticky;top:0;background:rgba(10,10,10,.85);backdrop-filter:blur(6px);border-bottom:1px solid #202020;z-index:20}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;gap:.7rem;align-items:center;font:800 1.2rem/1 'Montserrat',sans-serif;color:#fff;letter-spacing:.4px}
.brand img{width:40px;height:40px;object-fit:contain;filter:invert(1)}
.nav{display:flex;gap:1.1rem;align-items:center}
.nav a{color:var(--muted)}
.nav a:hover{color:#fff}
.burger{display:none;background:transparent;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
/* Buttons */
.btn{background:var(--brand);color:var(--brand-ink);padding:.7rem 1rem;border-radius:12px;font:600 .95rem/1 'Inter';display:inline-block;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;border:1px solid #2a2a2a;color:#fff;box-shadow:none}
.btn.small{padding:.55rem .8rem}
/* Hero */
.hero{position:relative;min-height:62vh;background:url('assets/img/hero.jpg') center/cover no-repeat;display:flex;align-items:center}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.75),rgba(0,0,0,.45))}
.hero__content{position:relative;padding:4.2rem 0}
.hero h1{font:800 clamp(2rem,6vw,3.6rem)/1.02 'Montserrat',sans-serif;margin:0;color:#fff}
.hero h1 span{color:var(--brand)}
.hero p{margin:.6rem 0 1.2rem;color:#e2e3e6}
.hero__actions{display:flex;gap:.8rem}
/* Sections */
.section{padding:3.6rem 0;border-top:1px solid #151515;background:linear-gradient(180deg,var(--bg),var(--elev))}
.section__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
h2{font:800 2rem/1.1 'Montserrat',sans-serif;margin:.2rem 0}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem}
.media-card{background:var(--card);border:1px solid #1f1f1f;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.media-card img,.map{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;border:0}
.ticks{list-style:none;margin:1rem 0 0;padding:0;color:#d5d7db}
.ticks li{margin:.25rem 0;position:relative;padding-left:1.2rem}
.ticks li::before{content:'✓';position:absolute;left:0;color:var(--brand)}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{border:1px solid #1f1f1f;background:var(--card);border-radius:16px;overflow:hidden;transition:transform .2s ease}
.card:hover{transform:translateY(-3px)}
.card img{aspect-ratio:16/10;object-fit:cover}
.card__body{padding:1rem}
.card__body h3{margin:.1rem 0 .4rem;font:700 1.1rem 'Montserrat'}
.card__body p{color:#c9cbd0}
/* Masonry */
.masonry{columns:3 260px;column-gap:12px}
.masonry img{width:100%;margin:0 0 12px;border-radius:12px;border:1px solid #222}
/* Contact */
.contact__list{list-style:none;margin:0 0 1rem;padding:0}
.actions{display:flex;gap:.6rem}
.map{min-height:240px}
/* Footer */
.footer{border-top:1px solid #1c1c1c;background:#0a0a0a;padding:1rem 0;color:#b9bbc0;text-align:center}
/* Responsive */
@media(max-width:980px){
  .grid2{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block}
}
<!-- HERO / FACTORY -->
<section class="hero" id="home">
  <picture>
    <!-- صورة الغلاف -->
    <img src="hero.jpg" alt="Tasland Makina factory with crushers" class="hero-img" loading="eager">
  </picture>

  <!-- طبقة تدرّج خفيف لقراءة النص -->
  <div class="hero-overlay"></div>

  <div class="hero-content">
    <h1>
      <span>STRONG MACHINES</span><br>
      FOR STRONG PROJECTS
    </h1>
    <p class="hero-sub">Kırma • Eleme • Beton Santrali</p>

    <div class="hero-actions">
      <a href="https://wa.me/905447617531" class="btn btn-yellow" target="_blank" rel="noopener">WhatsApp</a>
      <a href="#products" class="btn btn-dark">Ürünleri Gör</a>
    </div>
  </div>
</section>