/* ==========================================================================
   Barutçuoğlu Grup — Stylesheet
   Design concept: "Mühendislik Defteri" (Engineer's Ledger)
   Blueprint grid, title-block section labels, registration-mark corners.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Colors */
  --navy:        #10233B;
  --navy-deep:   #0A1626;
  --steel:       #4C5C70;
  --steel-light: #7C8AA0;
  --paper:       #E7E2D6;
  --paper-2:     #DED7C6;
  --line:        #C7BFAC;
  --ink:         #1A1913;
  --ink-soft:    #4A473C;
  --white:       #FAF8F3;
  --rust:        #A3441C;
  --rust-dark:   #7E3315;
  --amber:       #D69A3E;

  /* Type */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-body:    'IBM Plex Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--f-display); font-weight:800; letter-spacing:.01em; }
p{ margin:0 0 1em; }
::selection{ background: var(--rust); color: var(--white); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; }

/* Blueprint grid backdrop --------------------------------------------- */
.blueprint-bg{
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  background-position: -1px -1px;
  background-color: var(--paper);
}
.dark-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
}

.wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; }

/* Registration marks (signature element) -------------------------------- */
.reg{ position:relative; }
.reg::before, .reg::after,
.reg .rc2, .reg .rc3{ position:absolute; width:16px; height:16px; pointer-events:none; z-index:2; }
.reg::before{ content:""; top:-1px; left:-1px; border-top:2px solid var(--rust); border-left:2px solid var(--rust); }
.reg::after{ content:""; bottom:-1px; right:-1px; border-bottom:2px solid var(--rust); border-right:2px solid var(--rust); }
.reg .rc2{ content:""; top:-1px; right:-1px; border-top:2px solid var(--rust); border-right:2px solid var(--rust); }
.reg .rc3{ content:""; bottom:-1px; left:-1px; border-bottom:2px solid var(--rust); border-left:2px solid var(--rust); }

/* Top strip -------------------------------------------------------------- */
.topstrip{
  background: var(--navy-deep);
  color: var(--steel-light);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing:.03em;
}
.topstrip .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap: 16px; flex-wrap:wrap;
}
.topstrip a:hover{ color: var(--amber); }
.topstrip .ts-links{ display:flex; gap:20px; }
.topstrip .coords{ opacity:.8; }
@media (max-width: 720px){
  .topstrip{ display:none; }
}

/* Header ------------------------------------------------------------------ */
header.site-header{
  background: var(--navy);
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:44px; width:auto; }
.brand-fallback{
  font-family: var(--f-display); font-weight:900; color:var(--white);
  font-size: 22px; letter-spacing:.02em; line-height:1;
}
.brand-fallback span{ color: var(--amber); }

nav.mainnav{ display:flex; align-items:center; gap: 2px; }
nav.mainnav > ul{ display:flex; align-items:center; gap: 2px; }
nav.mainnav > ul > li{ position:relative; }
nav.mainnav > ul > li > a{
  display:block; padding: 10px 14px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing:.04em; text-transform:uppercase;
  color: var(--white); opacity:.85;
  border-bottom: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
nav.mainnav > ul > li > a:hover,
nav.mainnav > ul > li.active > a{ opacity:1; border-color: var(--rust); }

.submenu{
  display:none; position:absolute; top:100%; left:0; min-width:230px;
  background: var(--navy-deep); border:1px solid rgba(255,255,255,.1); padding:6px 0;
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}
nav.mainnav li:hover .submenu,
nav.mainnav li:focus-within .submenu{ display:block; }
.submenu li a{
  display:block; padding:10px 16px; font-family: var(--f-body); font-size:14px;
  color: var(--white); opacity:.85;
}
.submenu li a:hover{ opacity:1; background: rgba(255,255,255,.05); color: var(--amber); }

.navtoggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.3); color:var(--white);
  font-family: var(--f-mono); font-size:12px; padding:8px 12px; letter-spacing:.05em; cursor:pointer;
}

/* Hero --------------------------------------------------------------------- */
.hero{
  position:relative; color: var(--white); overflow:hidden;
  background: var(--navy);
  min-height: 62vh;
  display:flex; align-items:flex-end;
}
.hero img.hero-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.55; filter: grayscale(15%) contrast(1.05);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,35,59,.55) 0%, rgba(10,22,38,.75) 55%, rgba(10,22,38,.97) 100%);
}
.hero-inner{ position:relative; z-index:2; padding: 120px 0 56px; width:100%; }
.eyebrow{
  font-family: var(--f-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background: var(--amber); display:inline-block; }
.hero h1{
  font-size: clamp(46px, 8vw, 96px); line-height:.92; text-transform:uppercase;
  color: var(--white); max-width: 14ch;
}
.hero .sub{
  font-family: var(--f-body); font-size: 18px; max-width: 46ch; color: var(--steel-light);
  margin-top: 18px;
}

/* Dimension stat strip ------------------------------------------------------ */
.dimline{
  display:flex; flex-wrap:wrap; gap: 0; margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.dimline .dim{
  flex:1 1 160px; padding: 18px 20px 0; position:relative;
  border-left: 1px solid rgba(255,255,255,.18);
}
.dimline .dim:first-child{ border-left:none; padding-left:0; }
.dim .num{ font-family: var(--f-display); font-size: 34px; color:var(--white); line-height:1; }
.dim .lab{ font-family: var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--steel-light); margin-top:6px; }

/* Sub-page hero (smaller) --------------------------------------------------- */
.subhero{ background: var(--navy); color:var(--white); position:relative; }
.subhero .wrap{ padding: 54px 28px 40px; }
.crumbs{
  font-family: var(--f-mono); font-size:12px; color: var(--steel-light); margin-bottom:14px;
  letter-spacing:.03em;
}
.crumbs a:hover{ color: var(--amber); }
.subhero h1{
  font-size: clamp(34px, 5.6vw, 58px); text-transform:uppercase; color:var(--white); line-height:1;
}
.subhero .tag{ font-family: var(--f-mono); color: var(--amber); font-size:13px; letter-spacing:.1em; margin-bottom:10px; display:block; }

/* Title-block section headers ---------------------------------------------- */
.titleblock{
  display:flex; align-items:baseline; gap:16px; margin-bottom: 34px;
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
}
.titleblock .idx{
  font-family: var(--f-mono); font-size: 14px; color: var(--rust); letter-spacing:.05em;
  border: 1px solid var(--rust); padding: 3px 8px;
}
.titleblock h2{ font-size: clamp(26px, 3.6vw, 40px); text-transform:uppercase; color: var(--ink); }
.titleblock .desc{ font-family: var(--f-mono); font-size:12.5px; color: var(--ink-soft); margin-left:auto; text-align:right; max-width:32ch; }

section{ padding: 76px 0; }
section.tight{ padding: 56px 0; }
section.on-dark{ background: var(--navy); color: var(--white); }
section.on-navy-deep{ background: var(--navy-deep); color: var(--white); }

/* About / two-col layout ---------------------------------------------------- */
.twocol{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items:start; }
.label-col{ font-family: var(--f-mono); font-size:12.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.08em; }
.label-col strong{ display:block; font-family:var(--f-display); font-size:22px; color:var(--ink); text-transform:none; letter-spacing:0; margin-top:8px; }
.prose p{ font-size: 17px; color: var(--ink-soft); }
.prose strong{ color: var(--ink); }

/* Sector cards --------------------------------------------------------------- */
.sector-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sector-card{
  background: var(--white); border:1px solid var(--line); padding: 26px 24px 24px;
  transition: transform .18s ease, border-color .18s ease;
}
.sector-card:hover{ transform: translateY(-4px); border-color: var(--rust); }
.sector-card .tag{ font-family: var(--f-mono); font-size:11.5px; color: var(--rust); letter-spacing:.08em; }
.sector-card h3{ font-size: 26px; text-transform:uppercase; margin: 10px 0 12px; color: var(--ink); }
.sector-card p{ font-size:14.5px; color: var(--ink-soft); margin-bottom:16px; }
.sector-card .go{ font-family: var(--f-mono); font-size:12.5px; color: var(--ink); display:inline-flex; gap:8px; align-items:center; }
.sector-card:hover .go{ color: var(--rust); }

/* Content blocks on subpages -------------------------------------------------- */
.content-area{ background: var(--paper); }
.content-grid{ display:grid; grid-template-columns: 260px 1fr; gap: 50px; }
.side-nav{ border-right: 1px solid var(--line); padding-right: 30px; }
.side-nav .sn-h{ font-family: var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--rust); margin-bottom:14px; }
.side-nav ul li a{
  display:block; padding: 9px 0; font-size:14.5px; color: var(--ink-soft); border-bottom:1px solid var(--line);
}
.side-nav ul li a:hover, .side-nav ul li.active a{ color: var(--rust); }
.side-nav .contact-mini{ margin-top: 26px; font-family: var(--f-mono); font-size:12.5px; color: var(--ink-soft); line-height:1.9; }

.main-copy h3{ font-size:20px; text-transform:uppercase; color: var(--ink); margin: 30px 0 12px; }
.main-copy h3:first-child{ margin-top:0; }
.main-copy p{ font-size:16.5px; color: var(--ink-soft); }
.main-copy ul{ margin: 8px 0 22px; }
.main-copy ul li{
  padding: 7px 0 7px 20px; border-bottom: 1px dashed var(--line); font-size:15.5px; color: var(--ink-soft);
  position:relative;
}
.main-copy ul li::before{ content:"—"; position:absolute; left:0; color: var(--rust); }
.main-copy .grp-title{ font-family: var(--f-display); font-size:22px; text-transform:uppercase; color: var(--ink); margin-top:34px; }
.quote-block{
  border-left: 3px solid var(--rust); padding: 4px 0 4px 22px; margin: 30px 0; font-size:18px;
  font-style: italic; color: var(--ink);
}
.signature{ font-family: var(--f-display); font-size: 22px; margin-top:18px; color: var(--ink); }

/* Gallery ---------------------------------------------------------------------- */
.gallery{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.gallery figure{ margin:0; overflow:hidden; position:relative; aspect-ratio: 4/3; background: var(--paper-2); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.gallery figure:hover img{ transform: scale(1.06); }
.gallery figure::after{
  content: attr(data-tag); position:absolute; left:8px; bottom:8px; font-family: var(--f-mono);
  font-size:10.5px; color: var(--white); background: rgba(10,22,38,.7); padding:3px 7px; letter-spacing:.04em;
}

/* Stat / info cards row ---------------------------------------------------------- */
.info-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; margin-top: 34px; }
.info-card{ border:1px solid var(--line); background: var(--white); padding: 22px; }
.info-card h4{ font-size:15px; text-transform:uppercase; color:var(--rust); font-family:var(--f-mono); letter-spacing:.05em; }
.info-card p{ margin-top:10px; color: var(--ink-soft); font-size:15px; }

/* Contact page ------------------------------------------------------------------- */
.office-card{
  border:1px solid var(--line); background: var(--white); padding:28px; margin-bottom:26px;
}
.office-card h3{ font-size:22px; text-transform:uppercase; color: var(--ink); margin-bottom:14px; }
.office-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; }
.office-grid .ok{ font-family: var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--rust); margin-bottom:5px; }
.office-grid .ov{ font-size:15.5px; color: var(--ink-soft); }
.office-card .mapwrap{ border:1px solid var(--line); }
.office-card iframe{ width:100%; height: 280px; border:0; display:block; filter: grayscale(35%) contrast(1.05); }

/* Footer --------------------------------------------------------------------------- */
footer.site-footer{ background: var(--navy-deep); color: var(--steel-light); }
.footer-top{ padding: 60px 0 40px; display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; }
.footer-brand img{ height:40px; margin-bottom:16px; }
.footer-brand p{ font-size:14px; color: var(--steel-light); max-width:34ch; }
.footer-col h5{
  font-family: var(--f-mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color: var(--amber); margin-bottom:16px;
}
.footer-col ul li{ margin-bottom:9px; }
.footer-col ul li a{ font-size:14.5px; color: var(--steel-light); }
.footer-col ul li a:hover{ color: var(--white); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0;
  font-family: var(--f-mono); font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color: var(--steel-light);
}
.footer-bottom a:hover{ color: var(--amber); }
.socials{ display:flex; gap:12px; }
.socials a{
  width:30px; height:30px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
  font-family: var(--f-mono); font-size:12px;
}
.socials a:hover{ border-color: var(--amber); color: var(--amber); }

/* Buttons ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family: var(--f-mono); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; padding: 13px 22px; border:1px solid var(--rust);
  color: var(--ink); background:transparent; cursor:pointer;
}
.btn:hover{ background: var(--rust); color: var(--white); }
.btn.on-dark{ color: var(--white); border-color: var(--amber); }
.btn.on-dark:hover{ background: var(--amber); color: var(--navy-deep); }

/* Responsive ------------------------------------------------------------------------ */
@media (max-width: 980px){
  .twocol{ grid-template-columns: 1fr; }
  .sector-grid{ grid-template-columns: repeat(2,1fr); }
  .content-grid{ grid-template-columns: 1fr; }
  .side-nav{ border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:24px; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .gallery{ grid-template-columns: repeat(3,1fr); }
  .office-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  nav.mainnav{
    display:none; position:absolute; top:100%; left:0; right:0; background: var(--navy);
    flex-direction:column; align-items:stretch; border-top:1px solid rgba(255,255,255,.1);
    max-height: 80vh; overflow:auto;
  }
  nav.mainnav.open{ display:flex; }
  nav.mainnav > ul{ flex-direction:column; align-items:stretch; width:100%; }
  nav.mainnav > ul > li > a{ padding: 14px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
  .submenu{ position:static; border:none; background: rgba(255,255,255,.03); box-shadow:none; }
  .navtoggle{ display:block; }
  .topstrip .ts-links{ gap:12px; }
  .dimline .dim{ flex-basis: 45%; border-left:none; padding-left:0; margin-bottom:14px; }
  .sector-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; padding: 44px 0 30px; }
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .titleblock{ flex-wrap:wrap; }
  .titleblock .desc{ margin-left:0; text-align:left; }
}

/* Image fallback ------------------------------------------------------------------- */
img.imgfail{ display:none; }
.figfail{ background: var(--paper-2); }