/*
  style.css
  Başkale Motors - Temel stil dosyası
  Açıklamalar: :root değişkenleri, basit reset, responsive düzenler ve bileşen stilleri içerir.
*/

/* Simple CSS reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
img { max-width:100%; display:block; }
body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; line-height:1.5; color:var(--text-color); background:var(--bg-color); }

:root{
  --primary: #e84a3a; /* canlı kırmızı-turuncu */
  --muted: #6b6b6b;
  --bg-color: #0f1214; /* koyu füme */
  --panel: #121416; /* slightly lighter */
  --card: #161819;
  --text-color: #ffffff;
  --accent-contrast: #ffffff;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --container-max: 1100px;
}

/* Layout container */
.container{ max-width:var(--container-max); margin:0 auto; padding:1rem; }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background 250ms ease, box-shadow 250ms ease; }
.site-header .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 1rem; }
.site-header .logo{ color:var(--text-color); text-decoration:none; font-weight:700; font-size:1.15rem; letter-spacing:0.4px; }
.site-header .logo span{ color:var(--primary); }

.main-nav{ display:flex; gap:1rem; align-items:center; }
.main-nav .nav-link{ color:var(--text-color); text-decoration:none; padding:0.4rem 0.6rem; border-radius:6px; transition:background 160ms, color 160ms; }
.main-nav .nav-link:hover{ background:var(--glass); }

.nav-toggle{ display:none; background:none; border:0; }
.nav-toggle .hamburger{ width:22px; height:2px; background:var(--text-color); display:block; position:relative; }
.nav-toggle .hamburger::before, .nav-toggle .hamburger::after{ content:''; position:absolute; left:0; right:0; height:2px; background:var(--text-color); }
.nav-toggle .hamburger::before{ top:-6px; }
.nav-toggle .hamburger::after{ top:6px; }

.site-header.scrolled{ background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.25)); box-shadow: 0 6px 18px rgba(0,0,0,0.6); backdrop-filter: blur(6px); }

/* Hero */
.hero{ padding-top:5.5rem; padding-bottom:3.5rem; min-height:72vh; display:flex; align-items:center; }
.hero-grid{ display:grid; grid-template-columns: 1fr 420px; gap:2rem; align-items:center; }
.hero-content h1{ font-size:clamp(1.6rem, 3.6vw, 2.6rem); color:var(--accent-contrast); margin-bottom:0.5rem; }
.hero-sub{ color:var(--primary); font-weight:600; margin-bottom:0.5rem; min-height:28px; }
.lead{ color:var(--muted); margin-bottom:1rem; }
.hero-cta{ display:flex; gap:0.75rem; }
.btn{ padding:0.6rem 1rem; border-radius:10px; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; font-weight:600; cursor:pointer; border:0; }
.btn-primary{ background:var(--primary); color:var(--accent-contrast); box-shadow:0 6px 16px rgba(232,74,58,0.12); transition:transform 160ms ease, box-shadow 160ms ease; }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(232,74,58,0.14); }
.btn-outline{ background:transparent; color:var(--text-color); border:1px solid rgba(255,255,255,0.06); }

.hero-art .art-card{ height:320px; border-radius:var(--radius); background: linear-gradient(135deg, rgba(232,74,58,0.12), rgba(255,255,255,0.02)); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.gear{ width:140px; height:140px; opacity:0.9; }

/* Sections */
.section-inner{ padding:3rem 1rem; }
.section-header h2{ font-size:1.4rem; color:var(--text-color); margin-bottom:0.4rem; }
.section-sub{ color:var(--muted); margin-bottom:1rem; }

/* About */
.about-grid{ display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start;  width:100%; }
/* Make about section use row layout on wider screens and keep features column fixed width */
.about-text{ flex:1 1 auto; }
.about-features{ flex:0 0 300px; }
.about-text p{ color:var(--muted); margin-bottom:0.75rem; }
.about-features .feature{ background:var(--card); padding:1rem; border-radius:10px; margin-bottom:1rem; display:flex; gap:0.75rem; align-items:flex-start; }
.feature-icon{ width:44px; height:44px; border-radius:50%; background:var(--primary); color:var(--accent-contrast); display:flex; align-items:center; justify-content:center; font-weight:700; }

/* Services cards */
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1rem; border-radius:12px; min-height:160px; }
.card-icon{ width:56px; height:56px; border-radius:50%; background:var(--glass); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:0.5rem; }

.why{ margin-top:1.25rem; color:var(--muted); }
.why ul{ display:flex; gap:1rem; list-style:none; }
.why li{ background:var(--panel); padding:0.6rem 0.9rem; border-radius:8px; }

/* Testimonials */
.test-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem; }
.test-card{ background:var(--card); padding:1rem; border-radius:10px; color:var(--muted); }
.test-card footer{ margin-top:0.8rem; color:var(--text-color); font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.stars{ color:var(--primary); margin-left:0.5rem; }

/* Contact form */
.contact-form{ background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); padding:1rem; border-radius:12px; }
.form-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:0.75rem; }
.form-grid label{ display:block; color:var(--muted); font-size:0.9rem; }
.form-grid input, .form-grid textarea{ width:100%; padding:0.6rem 0.7rem; margin-top:0.35rem; background:transparent; border:1px solid rgba(255,255,255,0.06); border-radius:8px; color:var(--text-color); }
.form-grid .full{ grid-column:1 / -1; }
.form-actions{ margin-top:0.9rem; display:flex; gap:1rem; align-items:center; }
.form-msg{ color:var(--primary); font-weight:600; }

/* Footer */
.site-footer{ padding:1.25rem 0; border-top:1px solid rgba(255,255,255,0.03); margin-top:2rem; }

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr 320px; }
  .cards{ grid-template-columns: repeat(2,1fr); }
  .test-grid{ grid-template-columns: repeat(2,1fr); }
  /* On narrower screens the default flex-direction:column already stacks content; keep spacing */
  .about-features{ flex: 0 0 auto; }
}

@media (min-width: 981px){
  /* On wider screens switch the about section to row layout */
  .about-grid{ flex-direction:row; gap:2rem; }
}

@media (max-width: 720px){
  .container{ padding:0.75rem; }
  .nav-toggle{ display:block; }
  .main-nav{ position:fixed; right:0; top:60px; background:var(--panel); padding:1rem; border-radius:10px; display:flex; flex-direction:column; gap:0.5rem; transform:translateY(-20px); opacity:0; pointer-events:none; transition:opacity 200ms, transform 200ms; }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
  .cards{ grid-template-columns:1fr; }
  .test-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
}

/* small utility */
.hidden{ display:none !important; }