/* ============================================================
   ALTER TEKNİK — stil (AÇIK TEMA)
   Beton/çelik açık sanayi teması. Tek dil: Türkçe.
   Görsel kuralı: Base64 yok. Görseller assets/ klasöründen.
   ============================================================ */

:root{
  --bg:       #f3f2ee;   /* açık beton zemin */
  --bg-2:     #eceae4;
  --surface:  #ffffff;   /* kart yüzeyi */
  --surface-2:#f7f6f2;
  --ink:      #1f2328;   /* koyu grafit — başlık/ana metin */
  --steel:    #2f343a;   /* gövde metni */
  --muted:    #6f757c;   /* ikincil metin */
  --line:     #e3e1da;   /* ince çizgiler */
  --line-2:   #d2d0c8;
  --spark:    #c07f16;   /* vurgu: taşlama kıvılcımı / pirinç (koyu ton) */
  --spark-lt: #e0a93b;
  --white:    #ffffff;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --shadow: 0 1px 2px rgba(31,35,40,.04), 0 8px 24px rgba(31,35,40,.06);
  --shadow-hover: 0 6px 14px rgba(31,35,40,.08), 0 18px 40px rgba(31,35,40,.12);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--steel);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- eyebrow / spec etiketleri ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--spark);
  display:inline-block;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,242,238,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:70px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand .name{
  font-family:var(--font-display);
  font-weight:800; font-size:1.15rem; letter-spacing:.04em;
  color:var(--ink); text-transform:uppercase; line-height:1;
}
.brand .name span{ color:var(--spark); }
.brand .sub{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em;
  color:var(--muted); text-transform:uppercase; display:block; margin-top:3px;
}

.menu{ display:flex; align-items:center; gap:6px; }
.menu > li{ position:relative; list-style:none; }
.menu a.link{
  display:block; padding:10px 14px;
  font-size:.92rem; color:var(--steel); border-radius:6px;
  transition:color .2s, background .2s;
}
.menu a.link:hover{ color:var(--ink); background:var(--surface-2); }

.has-drop > .link::after{
  content:"›"; margin-left:6px; color:var(--muted);
  display:inline-block; transform:rotate(90deg); font-size:.85em;
}
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:8px; min-width:270px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s;
  box-shadow:var(--shadow);
}
.has-drop:hover .dropdown,
.has-drop:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:7px; font-size:.9rem; color:var(--muted);
  transition:color .18s, background .18s;
}
.dropdown a:hover{ color:var(--ink); background:var(--surface-2); }
.dropdown a .n{ font-family:var(--font-mono); font-size:.72rem; color:var(--spark); }

.header-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--ink); border:1px solid var(--line-2);
  padding:9px 16px; border-radius:7px; transition:border-color .2s, background .2s;
}
.header-cta:hover{ border-color:var(--spark); background:var(--surface); }
.header-cta .dot{ width:7px; height:7px; border-radius:50%; background:var(--spark); }

.burger{
  display:none; background:none; border:1px solid var(--line-2);
  border-radius:7px; width:42px; height:42px; cursor:pointer;
  flex-direction:column; gap:5px; align-items:center; justify-content:center;
}
.burger span{ width:18px; height:2px; background:var(--steel); transition:.25s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 82% 8%, rgba(224,169,59,.16), transparent 60%),
    linear-gradient(180deg, #faf9f6, var(--bg));
}
.hero-grid{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr;
  gap:40px; align-items:center; padding:84px 0 96px;
}
.hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.03;
  letter-spacing:-.01em; color:var(--ink); margin:18px 0 20px;
}
.hero h1 em{ color:var(--spark); font-style:normal; }
.hero p.lead{ font-size:1.08rem; color:var(--muted); max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.86rem; letter-spacing:.03em;
  padding:14px 24px; border-radius:8px; cursor:pointer;
  transition:transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--ink); color:#f6f5f2; font-weight:500; box-shadow:var(--shadow); }
.btn-primary:hover{ background:#2c3138; box-shadow:var(--shadow-hover); }
.btn-ghost{ border:1px solid var(--line-2); color:var(--ink); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--spark); }

/* hero görseli: yuvarlak, dönen taş fotoğrafı */
.hero-media{ display:flex; justify-content:center; }
.media-frame{
  position:relative; width:min(100%, 400px); aspect-ratio:1/1;
  border-radius:50%; overflow:hidden;
  background:var(--surface-2);
  box-shadow:var(--shadow-hover), inset 0 0 0 1px var(--line-2);
}
.media-frame::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:2px solid rgba(192,127,22,.55); pointer-events:none; z-index:2;
}
.media-img{ width:100%; height:100%; object-fit:cover; display:block; }
.spin-img{ transform-origin:50% 50%; animation:spin 16s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .spin-img{ animation:none; } }
.media-empty{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:20px;
}
.media-empty svg{ width:60px; height:60px; opacity:.9; }
.media-empty span{ font-family:var(--font-display); font-weight:700; color:var(--muted); }
.media-empty small{ font-family:var(--font-mono); font-size:.72rem; color:var(--line-2); letter-spacing:.05em; }

/* hero alt: sektör şeridi */
.sectors{
  position:relative; display:flex; flex-wrap:wrap; gap:8px 28px;
  padding:20px 0 0; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  letter-spacing:.04em;
}
.sectors b{ color:var(--steel); font-weight:600; }

/* ============================================================
   BÖLÜM ORTAK
   ============================================================ */
.section{ padding:88px 0; border-bottom:1px solid var(--line); }
.section.alt{ background:var(--bg-2); }
.section-head{ max-width:60ch; margin-bottom:44px; }
.section-head h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.5rem); color:var(--ink);
  letter-spacing:-.01em; margin:14px 0 12px; line-height:1.1;
}
.section-head p{ color:var(--muted); font-size:1.02rem; }

/* ---------- Hakkımızda ---------- */
.about-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:start; }
.about-text p{ color:var(--muted); margin-bottom:16px; max-width:56ch; }
.about-text p strong{ color:var(--ink); font-weight:600; }
.brands{ border:1px solid var(--line); border-radius:12px; padding:26px; background:var(--surface); box-shadow:var(--shadow); }
.brands h3{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px; font-weight:400;
}
.brands ul{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.brands li{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line); font-family:var(--font-display);
  font-weight:700; font-size:1.1rem; color:var(--ink); letter-spacing:.02em;
}
.brands li:last-child{ border-bottom:0; }
.brands li::before{ content:""; width:8px; height:8px; background:var(--spark); flex:none; border-radius:1px; transform:rotate(45deg); }

/* ---------- Ürün kategorileri ---------- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat{
  position:relative; display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:26px 24px 24px;
  overflow:hidden; box-shadow:var(--shadow);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.cat:hover{ border-color:var(--spark); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.cat .code{ font-family:var(--font-mono); font-size:.72rem; color:var(--spark); letter-spacing:.12em; }
.cat h3{
  font-family:var(--font-display); font-weight:700; font-size:1.22rem;
  color:var(--ink); margin:12px 0 10px; line-height:1.15;
}
.cat p{ color:var(--muted); font-size:.92rem; }
.cat .go{
  margin-top:18px; font-family:var(--font-mono); font-size:.78rem; color:var(--muted);
  display:inline-flex; align-items:center; gap:6px; transition:color .2s, gap .2s;
}
.cat:hover .go{ color:var(--spark); gap:12px; }
.cat::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:3px;
  background:var(--spark); transform:scaleY(0); transform-origin:top; transition:transform .25s;
}
.cat:hover::after{ transform:scaleY(1); }

/* ---------- İletişim ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.contact-block h3{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; font-weight:400;
}
.contact-block .big{
  font-family:var(--font-display); font-weight:700; font-size:1.25rem;
  color:var(--ink); margin-bottom:6px;
}
.contact-block a.line{ color:var(--steel); display:block; margin:4px 0; transition:color .2s; }
.contact-block a.line:hover{ color:var(--spark); }
.contact-block .muted{ color:var(--muted); }
.phones{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.phone{ border:1px solid var(--line); border-radius:10px; padding:14px 18px; background:var(--surface); box-shadow:var(--shadow); }
.phone .who{ font-size:.8rem; color:var(--muted); font-family:var(--font-mono); letter-spacing:.05em; }
.phone .num{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--ink); }
.phone .num:hover{ color:var(--spark); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--bg-2); padding:52px 0 28px; border-top:1px solid var(--line); }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; }
.footer-brand .name{
  font-family:var(--font-display); font-weight:800; font-size:1.1rem;
  color:var(--ink); text-transform:uppercase; letter-spacing:.04em;
}
.footer-brand .name span{ color:var(--spark); }
.footer-brand p{ color:var(--muted); font-size:.88rem; margin-top:10px; max-width:34ch; }
.footer-col h4{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; font-weight:400;
}
.footer-col a{ display:block; color:var(--steel); font-size:.9rem; padding:5px 0; transition:color .2s; }
.footer-col a:hover{ color:var(--spark); }
.footer-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-family:var(--font-mono); font-size:.76rem; color:var(--muted); letter-spacing:.03em;
}
.footer-bottom a:hover{ color:var(--spark); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   MOBİL
   ============================================================ */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; padding:56px 0 64px; }
  .hero-media{ order:-1; }
  .media-frame{ width:min(84%, 320px); }
  .about-grid{ grid-template-columns:1fr; gap:32px; }
  .cats{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:720px){
  .menu, .header-cta{ display:none; }
  .burger{ display:flex; }
  .menu.open{
    display:flex; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--line); padding:12px;
    box-shadow:var(--shadow);
  }
  .menu.open > li{ width:100%; }
  .menu.open .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:4px 0 4px 14px; background:transparent;
    display:none;
  }
  .menu.open .has-drop.open-sub .dropdown{ display:block; }
  .cats{ grid-template-columns:1fr; }
  .section{ padding:60px 0; }
}