html{scroll-behavior:smooth}
*{box-sizing:border-box}
:root{--brand:#2e4a92;--ink:#0f172a}
html,body{margin:0;padding:0}
body{font-family: 'Inter','Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;color:var(--ink);background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.topbar{background:var(--brand);color:#fff;font-size:14px}
.topbar .inner{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e5e7eb;z-index:50}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.header img{height:140px}
.nav a{color:#334155;text-decoration:none;margin:0 12px;font-size:14px}
.nav a:hover{color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;border-radius:12px;padding:10px 14px;text-decoration:none}
.btn.secondary{background:#fff;color:var(--brand);border:1px solid #cbd5e1}
.hero{position:relative;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(46,74,146,.14),rgba(46,74,146,.06));}
.hero .inner{position:relative;display:grid;gap:24px;grid-template-columns:1fr;padding:60px 0}
@media(min-width:900px){.hero .inner{grid-template-columns:1.2fr .8fr;padding:80px 0}}
.hero h1{font-size:42px;line-height:1.15;margin:10px 0 6px}
.hero p{color:#475569;max-width:680px}
.section{padding:56px 0}
.section.alt{background:#f8fafc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.title{text-align:center;margin-bottom:26px}
.title .kicker{color:#0369a1;text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:12px}
.title h2{font-size:32px;margin:6px 0}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{border:1px solid #e5e7eb;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(2,8,23,.04)}
.card .head{padding:14px 16px;border-bottom:1px solid #e5e7eb;font-weight:600}
.card .body{padding:16px}
.gallery{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery img,.thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;cursor:zoom-in}
.thumbs{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.thumbs{grid-template-columns:repeat(3,1fr)}}
.specs{margin-top:10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:12px}
.specs h4{margin:0 0 8px;font-size:16px}
.specs ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media(max-width:700px){.specs ul{grid-template-columns:1fr}}
.small{font-size:13px;color:#64748b}
footer{border-top:1px solid #e5e7eb;margin-top:44px}
footer .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
#hakkimizda,#kapaklar,#mahya,#iletisim{scroll-margin-top:180px}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv div{background:#f1f5f9;padding:12px;border-radius:12px}
@media(max-width:700px){.kv{grid-template-columns:1fr}}


.lang-switch, #lang-tr, #lang-en{pointer-events:auto}

/* Ensure header and language buttons are always on top and clickable */
header, .site-header{position:relative; z-index:4000}
#lang-tr, #lang-en{pointer-events:auto}
/* Disable pointer-events on hero overlays that could overlap header */
.hero .overlay, .hero::before, .hero::after{pointer-events:none}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(33,53,105,.25);background:#fff;color:#2a3f7a;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.icon-btn:hover{background:#f6f8ff}


.lang-toggle{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:14px}
.lang-toggle button{background:transparent;border:0;cursor:pointer;padding:4px 6px}
.lang-toggle button.active{font-weight:700;text-decoration:underline}


/* --- Hero visual enhancement --- */
.hero { position: relative; overflow: hidden; }
.hero .bg {
  position:absolute; inset:0;
  background: radial-gradient(1200px 600px at 80% 40%, rgba(30,64,175,0.10), transparent),
              linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(15,23,42,0.04) 60%, rgba(255,255,255,0.00) 100%);
  pointer-events:none;
}
.hero .container.inner { display:grid; grid-template-columns: 1fr 480px; gap: 32px; align-items: center; }
@media (max-width: 1024px){
  .hero .container.inner { grid-template-columns: 1fr; }
  .hero-right { display:none; }
}

/* --- Experience badge --- */
.hero-right { display:flex; justify-content:center; align-items:center; min-height:260px; }
.experience-badge {
  position:relative; width:220px; height:220px;
  border-radius:50%; background: rgba(255,255,255,0.8);
  box-shadow: 0 10px 30px rgba(2,6,23,0.08);
  backdrop-filter: blur(4px);
}
.experience-badge .badge-ring {
  position:absolute; inset:-8px;
  border-radius:50%;
  border: 2px dashed rgba(30,64,175,0.25);
}
.experience-badge .badge-inner {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:18px;
}
.experience-badge .badge-top {
  font-weight:600; font-size:12px; letter-spacing: .06em; opacity:.75;
}
.experience-badge .badge-main {
  font-size:64px; line-height:1; font-weight:800;
}
.experience-badge .badge-main span { font-size:36px; vertical-align:top; }
.experience-badge .badge-sub {
  font-size:12px; opacity:.75;
}

/* v41: make only the left 'Since 1997' text transparent (keep right badge visible) */
.hero .hero-left .pill,
.hero .hero-left .kicker,
.hero .hero-left .badge,
.hero .hero-left small {
  opacity: 0 !important;
  pointer-events: none;
}
/* Ensure the right circular badge remains visible */
.hero .hero-right .experience-badge,
.hero .hero-right .badge-top,
.hero .hero-right .badge-inner {
  opacity: 1 !important;
  pointer-events: auto;
}

/* --- Lightbox (global) --- */
.lb-overlay{position:fixed;inset:0;z-index:9999;display:block}
.lb-overlay[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7)}
.lb-modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.lb-modal img{max-width:90vw;max-height:90vh;box-shadow:0 10px 30px rgba(0,0,0,0.6);border-radius:8px;background:#fff}
.lb-close{position:absolute;top:16px;right:16px;font-size:32px;line-height:1;border:0;background:transparent;color:#fff;cursor:pointer}


/* === UZMAN METALURJİ ÖZEL DÜZENLEME ===
   Sandviç Panel Mahyaları — 3 Hadveli bölümünde (id="mahya")
   küçük görünen 3 küçük fotoğrafı, diğer mahya sayfasındaki gibi
   büyük ve alt alta gelecek şekilde ayarlıyoruz.
*/

/* ZORLA: 5 hadveli panel mahya kartlarını yan yana 3 sütun yap */
#mahya5 .grid{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:18px;
}
#mahya5 .grid .card{
  flex:0 0 calc(33.333% - 12px);
  max-width:calc(33.333% - 12px);
}
@media (max-width: 768px){
  #mahya5 .grid{
    overflow-x:auto;
  }
}