:root{
    --ink:#141310;
    --ink-soft:#2b2926;
    --paper:#FBF8F1;
    --paper-2:#F3EFE2;
    --steel-1:#DAD7CB;
    --steel-2:#A9A69A;
    --steel-3:#77746A;
    --gold:#C08A2E;
    --gold-bright:#D9A438;
    --gold-dim:#8C6A2A;
    --line: rgba(20,19,16,0.12);
    --bg: var(--paper);
    --ink-muted:#4A463E;
    --fg: var(--ink);
  }
  /* Köse İnşaat is a fixed brand palette: the site intentionally
     keeps this one light, cream identity regardless of the
     viewer's system light/dark setting, so text and backgrounds
     always stay paired correctly. */
  :root[data-theme="dark"]{
    --bg: var(--paper);
    --fg: var(--ink);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scroll-padding-top:72px;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3{
    font-family:'Archivo',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px,4vw,56px);
  }
  section{
    position:relative;
  }

  #bgScene{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
  }
  #bgScene video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(0.85) brightness(0.9);
  }
  #bgScene::after{
    content:"";
    position:absolute;
    inset:0;
    background: color-mix(in srgb, var(--paper) 72%, transparent);
  }
  @media (max-width:900px){
    #bgScene::after{ background: color-mix(in srgb, var(--paper) 84%, transparent); }
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px clamp(20px,4vw,56px);
    transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
    border-bottom:1px solid transparent;
  }
  nav.scrolled{
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.05rem;
    text-decoration:none;
    letter-spacing:0.01em;
  }
  .brand img{height:34px;width:auto;}
  .navlinks{
    display:flex;
    gap:clamp(18px,3vw,36px);
    list-style:none;
    margin:0;padding:0;
  }
  .navlinks a{
    text-decoration:none;
    font-size:0.92rem;
    font-weight:500;
    color:var(--fg);
    opacity:1; color:var(--ink-soft);
    padding:6px 2px;
    border-bottom:1px solid transparent;
    transition:opacity .2s, border-color .2s;
  }
  .navlinks a:hover, .navlinks a:focus-visible{
    opacity:1;
    border-color:var(--gold);
  }
  .navtoggle{display:none;}
  .navtoggle{
    width:44px; height:44px;
    padding:0;
    background:none;
    border:1px solid var(--line);
    cursor:pointer;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    position:relative;
    z-index:2;
  }
  .navtoggle span{
    display:block;
    width:20px; height:2px;
    background:var(--ink);
    transition:transform .3s ease, opacity .2s ease;
  }
  nav.menu-open .navtoggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav.menu-open .navtoggle span:nth-child(2){ opacity:0; }
  nav.menu-open .navtoggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  nav.menu-open{
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--paper) 88%, transparent) 0%,
      color-mix(in srgb, var(--paper) 70%, transparent) 45%,
      transparent 80%);
  }
  @media (max-width:860px){
    .hero::before{ background:color-mix(in srgb, var(--paper) 55%, transparent); }
  }
  .hero-pin{
    width:100%;
    position:relative;
    padding:150px 0 90px;
  }
  .hero-grid{
    width:100%;
    max-width:740px;
  }
  .hero-copy .kicker{
    font-size:0.95rem;
    color:var(--gold-dim);
    font-weight:600;
    margin-bottom:18px;
    display:block;
  }
  .hero-copy h1{
    font-size:clamp(2.4rem, 5.6vw, 4.4rem);
    font-weight:900;
    line-height:1.03;
  }
  .hero-copy p{
    max-width:46ch;
    margin:26px 0 0;
    font-size:1.08rem;
    color:var(--fg);
    opacity:1; color:var(--ink-soft);
  }
  .hero-stats{
    display:flex;
    gap:clamp(24px,4vw,44px);
    margin-top:44px;
    flex-wrap:wrap;
  }
  .hero-stats div{ min-width:80px; }
  .hero-stats strong{
    display:block;
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:clamp(1.6rem,2.6vw,2.1rem);
    color:var(--gold);
  }
  .hero-stats span{
    font-size:0.82rem;
    opacity:1; color:var(--ink-muted);
  }
  .scrollhint{
    position:absolute;
    bottom:34px;
    left:clamp(20px,4vw,56px);
    display:flex;
    align-items:center;
    gap:10px;
    font-size:0.78rem;
    opacity:0.8;
  }
  .scrollhint .bar{
    width:1px;height:34px;
    background:var(--fg);
    position:relative;
    overflow:hidden;
  }
  .scrollhint .bar i{
    position:absolute;
    top:0;left:0;right:0;height:40%;
    background:var(--gold);
    animation:scrollmove 1.8s ease-in-out infinite;
  }
  @keyframes scrollmove{
    0%{transform:translateY(-100%);}
    100%{transform:translateY(250%);}
  }

  /* ---------- SECTION HEADERS ---------- */
  .sec-head{
    display:grid;
    grid-template-columns: 1fr 1.4fr;
    gap:40px;
    margin-bottom:56px;
    align-items:end;
  }
  .sec-head h2{
    font-size:clamp(1.9rem,3.4vw,2.6rem);
    font-weight:800;
  }
  .sec-head .lead{
    font-size:1.05rem;
    opacity:1; color:var(--ink-soft);
    max-width:52ch;
  }

  /* ---------- ABOUT ---------- */
  .about{
    padding:130px 0 110px;
    border-top:1px solid var(--line);
    position:relative;
    z-index:1;
    background: color-mix(in srgb, var(--paper) 74%, transparent);
  }
  .about-grid{
    display:grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap:clamp(30px,5vw,80px);
  }
  .about-stats{
    display:flex;
    flex-direction:column;
    gap:34px;
    position:sticky;
    top:110px;
    align-self:start;
  }
  .stat-row{
    border-top:1px solid var(--line);
    padding-top:16px;
  }
  .stat-row strong{
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:clamp(2.6rem,5vw,3.6rem);
    color:var(--ink);
    display:block;
    line-height:1;
  }
  :root[data-theme="dark"] .stat-row strong{ color:var(--fg); }
  .stat-row span{
    font-size:0.92rem;
    opacity:1; color:var(--ink-muted);
  }
  .timeline{
    list-style:none;
    margin:0;padding:0;
    border-left:2px solid var(--line);
  }
  .timeline li{
    position:relative;
    padding:2px 0 40px 32px;
  }
  .timeline li::before{
    content:"";
    position:absolute;
    left:-7px; top:4px;
    width:12px;height:12px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px var(--bg);
  }
  .timeline .yr{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.15rem;
    color:var(--gold-dim);
    display:block;
    margin-bottom:6px;
  }
  .timeline p{
    margin:0;
    font-size:1.02rem;
    max-width:56ch;
    opacity:1; color:var(--ink-soft);
  }
  .principles{
    margin-top:46px;
    padding-top:46px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
  }
  .principles h3{
    font-size:1.05rem;
    font-weight:700;
    color:var(--gold-dim);
    margin-bottom:12px;
  }
  .principles p{
    margin:0;
    font-size:0.98rem;
    opacity:1; color:var(--ink-soft);
  }

  /* ---------- ACTIVITIES ---------- */
  .activities{
    background: color-mix(in srgb, var(--paper-2) 78%, transparent);
    padding:120px 0;
    position:relative;
    z-index:1;
  }
  .act-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--line);
  }
  .act-card{
    padding:52px clamp(24px,4vw,52px);
    border-right:1px solid var(--line);
  }
  .act-card:last-child{border-right:none;}
  .act-card .num{
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:0.9rem;
    color:var(--gold-dim);
    display:block;
    margin-bottom:22px;
  }
  .act-card h3{
    font-size:1.5rem;
    font-weight:800;
    margin-bottom:16px;
  }
  .act-card p{
    opacity:1; color:var(--ink-soft);
    font-size:1rem;
    max-width:42ch;
  }
  .act-card svg{
    width:100%;
    height:120px;
    margin-top:30px;
  }

  /* ---------- PROJECTS ---------- */
  .projects{
    padding:120px 0 130px;
    position:relative;
    z-index:1;
  }
  .proj-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
  }
  .proj-card{
    margin:0;
    position:relative;
    background:var(--ink);
    overflow:hidden;
  }
  .proj-card button{
    all:unset;
    display:block;
    width:100%;
    cursor:zoom-in;
    position:relative;
  }
  .proj-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s;
  }
  .proj-card img[hidden]{display:none;}
  .proj-card button:hover img,
  .proj-card button:focus-visible img{ transform:scale(1.04); }
  .proj-card button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
  .proj-card figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:44px 16px 14px;
    color:var(--paper);
    background:linear-gradient(to top, rgba(20,19,16,.94) 0%, rgba(20,19,16,.72) 45%, rgba(20,19,16,0) 100%);
    text-shadow:0 1px 3px rgba(0,0,0,.55);
    pointer-events:none;
  }
  .proj-card .loc{
    display:block;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--gold-bright);
    margin-bottom:2px;
  }
  .proj-card h3{
    font-size:1.02rem;
    font-weight:800;
    line-height:1.2;
  }
  .proj-card .meta{
    display:block;
    margin-top:2px;
    font-size:.8rem;
    opacity:1;
  }
  .proj-card .tag{
    position:absolute;
    top:10px; left:10px;
    z-index:1;
    font-size:.68rem;
    font-weight:600;
    padding:3px 8px;
    background:color-mix(in srgb, var(--paper) 92%, transparent);
    color:var(--ink);
    pointer-events:none;
  }
  .proj-card .tag.right{ left:auto; right:10px; }

  /* ---------- LIGHTBOX ---------- */
  .lightbox{
    border:none;
    padding:0;
    margin:0;
    width:100vw; height:100vh;
    max-width:none; max-height:none;
    background:rgba(20,19,16,.94);
    color:var(--paper);
  }
  .lightbox::backdrop{ background:rgba(20,19,16,.6); }
  .lightbox[open]{
    display:grid;
    grid-template-rows:1fr auto;
  }
  .lb-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:64px clamp(56px,8vw,110px) 12px;
    min-height:0;
  }
  .lb-stage img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
  }
  .lb-cap{
    padding:12px 24px 26px;
    text-align:center;
    font-size:.95rem;
  }
  .lb-cap b{ font-family:'Archivo',sans-serif; font-weight:800; }
  .lb-cap small{ display:block; opacity:.85; margin-top:2px; }
  .lb-btn{
    position:absolute;
    background:none;
    border:1px solid rgba(251,248,241,.35);
    color:var(--paper);
    width:46px; height:46px;
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    transition:background .2s, border-color .2s;
  }
  .lb-btn:hover{ background:rgba(251,248,241,.12); border-color:var(--gold); }
  .lb-close{ top:14px; right:14px; }
  .lb-prev, .lb-next{ top:50%; transform:translateY(-50%); }
  .lb-prev{ left:clamp(6px,2vw,28px); }
  .lb-next{ right:clamp(6px,2vw,28px); }

  /* ---------- CONTACT ---------- */
  footer{
    background: color-mix(in srgb, var(--paper-2) 90%, transparent);
    color:var(--ink);
    padding:100px 0 34px;
    border-top:1px solid var(--line);
    position:relative;
    z-index:1;
  }
  .contact-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    padding-bottom:70px;
    border-bottom:1px solid var(--line);
  }
  footer h2{
    font-size:clamp(1.9rem,3.8vw,2.7rem);
    font-weight:800;
    color:var(--ink);
    max-width:16ch;
  }
  .contact-list{
    list-style:none;
    margin:30px 0 0;padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .contact-list li{
    display:flex;
    gap:14px;
    font-size:1rem;
    color:var(--ink);
    opacity:1; color:var(--ink-soft);
  }
  .contact-list b{
    font-weight:600;
    min-width:90px;
    opacity:1; color:var(--ink-muted);
  }
  .cta-btn{
    display:inline-block;
    margin-top:34px;
    padding:14px 26px;
    border:1px solid var(--gold);
    color:var(--gold-dim);
    text-decoration:none;
    font-weight:600;
    font-size:0.95rem;
    transition:background .2s, color .2s;
  }
  .cta-btn:hover, .cta-btn:focus-visible{
    background:var(--gold);
    color:var(--paper);
  }
  .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px;
  }
  .cta-row .cta-btn{ margin-top:0; }
  .cta-btn.cta-solid{
    background:var(--gold);
    color:var(--paper);
  }
  .cta-btn.cta-solid:hover, .cta-btn.cta-solid:focus-visible{
    background:var(--gold-dim);
    border-color:var(--gold-dim);
  }
  .contact-list a{
    color:var(--ink);
    font-weight:500;
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .2s;
  }
  .contact-list a:hover, .contact-list a:focus-visible{ border-color:var(--gold); }
  .contact-list address{
    font-style:normal;
    line-height:1.55;
  }
  .contact-list .map-link{
    display:inline-block;
    margin-top:6px;
    font-size:.9rem;
    color:var(--gold-dim);
    font-weight:600;
  }
  .foot-bottom{
    padding-top:26px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.82rem;
    opacity:1; color:var(--ink-muted);
  }
  .foot-brand{
    display:flex;align-items:center;gap:8px;
  }
  .foot-brand img{height:22px;width:auto;}

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  @media (max-width:860px){
    .navtoggle{display:flex;}
    .scrollhint{display:none;}
    .navlinks{
      position:absolute;
      top:100%; left:0; right:0;
      flex-direction:column;
      gap:0;
      padding:8px clamp(20px,4vw,56px) 22px;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      box-shadow:0 18px 30px -18px rgba(20,19,16,.25);
      opacity:0;
      visibility:hidden;
      transform:translateY(-8px);
      transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    }
    nav.menu-open .navlinks{
      opacity:1;
      visibility:visible;
      transform:none;
      transition:opacity .25s ease, transform .25s ease;
    }
    .navlinks a{
      display:block;
      padding:14px 0;
      font-size:1.05rem;
      opacity:1;
      border-bottom:1px solid var(--line);
    }
    .navlinks li:last-child a{ border-bottom:none; }
    .hero-pin{padding:120px 0 60px;}
    .sec-head{grid-template-columns:1fr;gap:16px;}
    .about-grid{grid-template-columns:1fr;}
    .about-stats{position:static;flex-direction:row;flex-wrap:wrap;}
    .stat-row{flex:1 1 40%;}
    .principles{grid-template-columns:1fr;}
    .act-grid{grid-template-columns:1fr;}
    .act-card{border-right:none;border-bottom:1px solid var(--line);}
    .proj-grid{grid-template-columns:1fr 1fr;}
    .contact-grid{grid-template-columns:1fr;}
  }

  @media (max-width:560px){
    .proj-grid{grid-template-columns:1fr 1fr;gap:8px;}
    .proj-card img{aspect-ratio:4/5;}
    .proj-card figcaption{padding:32px 10px 9px;}
    .proj-card .loc{font-size:.6rem;letter-spacing:.02em;}
    .proj-card h3{font-size:.88rem;}
    .proj-card .meta{font-size:.7rem;}
    .proj-card .tag{font-size:.6rem;padding:2px 6px;top:6px;left:6px;}
    .proj-card .tag.right{left:auto;right:6px;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .scrollhint i{animation:none;}
  }