/* ==========================================================================
   SIMETRA — Shared Stylesheet
   Design tokens + navbar + base typography, reused on every page.
   ========================================================================== */

:root{
  --ink:#0e0d0c;
  --ink-soft:#141311;
  --stone:#1c1a17;
  --stone-line: rgba(243,241,234,0.10);
  --paper:#f3f1ea;
  --paper-dim:#e8e4d8;
  --brass:#a9835b;
  --brass-light:#cba876;
  --brass-dim: rgba(169,131,91,0.35);
  --mist:#948d80;
  --mist-dark:#5a564c;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:160px;

  --display: 'Outfit', sans-serif;
  --body: 'Plus Jakarta Sans', sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
}
::selection{ background:var(--brass); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

.eyebrow{
  font-family:var(--body);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--brass-light);
  font-weight:600;
}
.wrap{ max-width:1180px; margin:0 auto; }

/* ============ NAVBAR (shared across all pages) ============ */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:40px 56px;
  background:transparent;
  box-shadow:0 0 0 rgba(14,13,12,0);
  transition: padding .4s cubic-bezier(.16,1,.3,1), background .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1);
}
header.nav.solid{
  padding:20px 56px;
  background:rgba(14,13,12,0.7);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom:1px solid var(--stone-line);
  box-shadow:0 16px 40px rgba(14,13,12,0.18);
}

.brand{ display:flex; align-items:center; gap:var(--s2); cursor:pointer; opacity:1; transition:opacity .3s ease; }
.brand:hover{ opacity:.78; }
.brand img{ height:74px; width:auto; filter:drop-shadow(0 1px 4px rgba(14,13,12,0.55)) drop-shadow(0 0 14px rgba(14,13,12,0.25)); }

nav.links{ display:flex; align-items:center; gap:var(--s5); }
nav.links a{
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
  color:var(--paper-dim); opacity:.62; position:relative; padding-bottom:5px;
  transition:opacity .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
  white-space:nowrap; outline-offset:6px;
}
nav.links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--brass-light), var(--brass));
  transform:scaleX(0); transform-origin:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
nav.links a:hover{ opacity:1; }
nav.links a:hover::after{ transform:scaleX(1); }
nav.links a.active{ opacity:1; color:var(--brass-light); }
nav.links a.active::after{ transform:scaleX(1); }
nav.links a:focus-visible,
.nav-search:focus-visible,
.nav-toggle:focus-visible{
  outline:1.5px solid var(--brass-light);
  outline-offset:6px;
  border-radius:2px;
}

.nav-divider{ width:1px; height:12px; background:rgba(243,241,234,0.16); }

.lang-switch{ display:flex; align-items:center; font-size:11.5px; font-weight:600; letter-spacing:.05em; }
.lang-switch span{
  opacity:.5; cursor:pointer; padding:2px 0;
  transition:opacity .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
}
.lang-switch span:first-child::after{
  content:'/'; margin:0 7px; opacity:.35; color:var(--paper); pointer-events:none;
}
.lang-switch span.active{ opacity:1; color:var(--brass-light); }
.lang-switch span:hover{ opacity:1; }

.nav-search{
  background:none; border:none; color:var(--paper-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:.62;
  transition:opacity .3s cubic-bezier(.16,1,.3,1);
}
.nav-search:hover{ opacity:1; }

.nav-toggle{
  display:none; position:relative; width:26px; height:16px;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{
  position:absolute; left:0; width:100%; height:1.5px; background:var(--paper);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease, top .35s cubic-bezier(.16,1,.3,1);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:7px; }
.nav-toggle span:nth-child(3){ top:14px; }
.nav-toggle.open span:nth-child(1){ top:7px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:7px; transform:rotate(-45deg); }

.nav-close{ display:none; }

@media (max-width:1000px){
  header.nav{ padding:24px 24px; }
  nav.links{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:#141311; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:var(--s5); padding:var(--s6); transform:translateX(100%);
    transition:transform .45s cubic-bezier(.16,1,.3,1);
    border-left:1px solid var(--stone-line);
    box-shadow:-24px 0 60px rgba(14,13,12,0.35);
  }
  nav.links.open{ transform:translateX(0); }
  nav.links a{ font-size:15px; opacity:.85; }
  .nav-toggle{ display:block; }

  .nav-close{
    display:flex; position:absolute; top:24px; right:24px; z-index:1;
    width:36px; height:36px; align-items:center; justify-content:center;
    background:none; border:1px solid rgba(243,241,234,0.25); border-radius:50%;
    color:var(--paper); cursor:pointer;
    transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), color .3s ease;
  }
  .nav-close:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); transform:rotate(90deg); }
}

/* ============ PAGE HEADER (used on every inner page) ============ */
main.page{
  padding: 200px 56px 140px;
  min-height:100vh;
}
.page-head{
  max-width:900px; margin:0 auto var(--s7);
  padding-bottom:var(--s5);
  border-bottom:1px solid var(--stone-line);
}
.page-head .eyebrow{ margin-bottom:var(--s2); display:block; }
.page-head h1{
  font-family:var(--display); font-weight:500; font-size:clamp(34px,5vw,58px);
  line-height:1.08; letter-spacing:-0.03em; color:var(--paper);
  max-width:16ch;
}
.page-head p{
  margin-top:var(--s3); max-width:52ch; color:var(--mist); font-size:17px; line-height:1.7;
}
.page-head p + p{ margin-top:var(--s2); }

/* ============ LIGHT THEME (inner pages that sit on the paper background — Simetra, Hakkımızda, Çözümlerimiz, ...) ============ */
body[data-theme="light"]{
  background:
    radial-gradient(ellipse 900px 520px at 12% -8%, rgba(169,131,91,0.12), transparent 60%),
    radial-gradient(ellipse 700px 620px at 104% 18%, rgba(169,131,91,0.07), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") repeat,
    var(--paper);
  color:var(--ink);
}
body[data-theme="light"] .page-head{ border-bottom-color: rgba(14,13,12,0.10); }
body[data-theme="light"] .eyebrow{ color:var(--brass); }
body[data-theme="light"] .page-head h1{ color:var(--ink); }
body[data-theme="light"] .page-head p{ color:#6f695d; }

/* ============ REVEAL (shared fade + rise entrance, triggered via IntersectionObserver) ============ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ============ SCROLL-TO-TOP (floating button, fades in once scrolled down) ============ */
.scroll-top-btn{
  position:fixed; right:28px; bottom:28px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper);
  border:1px solid rgba(243,241,234,0.15);
  box-shadow:0 12px 30px rgba(14,13,12,0.3);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s, background .3s ease, color .3s ease;
}
.scroll-top-btn.show{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease;
}
.scroll-top-btn:hover{ background:var(--brass); color:var(--ink); }
@media (max-width:700px){
  .scroll-top-btn{ right:16px; bottom:16px; width:42px; height:42px; }
}

/* ============ LIGHTBOX (click an image to view it full-size) ============ */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,13,12,0.92); backdrop-filter:blur(6px);
  padding:var(--s5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s;
}
.lightbox.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
.lightbox-img{
  max-width:min(1100px, 92vw); max-height:88vh; width:auto; height:auto;
  border-radius:6px; box-shadow:0 40px 100px rgba(0,0,0,0.5);
  transform:scale(.94); transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.lightbox.open .lightbox-img{ transform:scale(1); }
.lightbox-close{
  position:absolute; top:28px; right:32px; z-index:1;
  width:44px; height:44px; border-radius:50%;
  background:rgba(243,241,234,0.08); border:1px solid rgba(243,241,234,0.25);
  color:var(--paper); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.lightbox-close:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); transform:rotate(90deg); }
@media (max-width:700px){
  .lightbox-close{ top:16px; right:16px; width:38px; height:38px; }
}

/* ============ PAGE HERO (full-bleed image hero on inner pages — nav floats transparent over it, like the index.html video hero) ============ */
.page-hero{
  position:relative; width:100%;
  height:50vh; min-height:420px; max-height:640px;
  overflow:hidden;
}
.page-hero img, .page-hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation: page-hero-zoom 12s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes page-hero-zoom{
  from{ transform:scale(1.1); }
  to{ transform:scale(1); }
}
.page-hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,13,12,0.55) 0%, rgba(14,13,12,0.05) 30%, rgba(14,13,12,0.05) 65%, rgba(14,13,12,0.5) 100%);
  pointer-events:none;
}
.page-hero + main.page{ padding-top:var(--s7); }
@media (max-width:860px){
  .page-hero{ height:46vh; min-height:320px; }
  .page-hero + main.page{ padding-top:var(--s6); }
}

footer.site-footer{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding: 0 56px var(--s5);
  overflow:hidden;
}
footer.site-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--brass-light) 0%, rgba(169,131,91,0.15) 40%, transparent 75%);
}
footer.site-footer::after{
  content:''; position:absolute; top:-260px; left:-120px; width:560px; height:440px;
  background:radial-gradient(ellipse, rgba(169,131,91,0.10), transparent 70%);
  pointer-events:none;
}

/* ---- big closing CTA ---- */
.footer-cta{
  position:relative;
  padding: var(--s7) 0 var(--s6);
  border-bottom:1px solid var(--stone-line);
}
.footer-cta-link{
  position:relative; display:inline-flex; align-items:center; gap:var(--s4);
  transition:opacity .3s ease;
}
.footer-cta-link:hover{ opacity:.9; }
.footer-cta-link .txt{
  position:relative;
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(30px,5.6vw,60px); letter-spacing:-0.01em; line-height:1;
  color:var(--paper);
}
.footer-cta-link .txt::after{
  content:''; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:linear-gradient(90deg, var(--brass-light), var(--brass));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.footer-cta-link:hover .txt::after{ transform:scaleX(1); }
.footer-cta-icon{
  flex-shrink:0; width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(243,241,234,0.28); color:var(--paper);
  transition:transform .5s cubic-bezier(.16,1,.3,1), background .4s ease, border-color .4s ease, color .4s ease;
}
.footer-cta-link:hover .footer-cta-icon{
  background:var(--brass); border-color:var(--brass); color:var(--ink);
  transform:rotate(45deg);
}

/* ---- link columns ---- */
.footer-top{
  position:relative;
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--s6);
  padding: var(--s6) 0;
  border-bottom:1px solid var(--stone-line);
}
.footer-brand{ max-width:340px; }
.footer-brand img{ height:62px; margin-bottom:var(--s3); filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.footer-brand p{ color:var(--mist); font-size:14px; max-width:32ch; line-height:1.75; }
.footer-links{ display:flex; gap:var(--s7); flex-wrap:wrap; }
.footer-col .eyebrow{ display:block; margin-bottom:var(--s3); }
.footer-col a, .footer-col div{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; color:var(--mist); margin-bottom:12px;
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
.footer-col a::after{
  content:'→'; color:var(--brass-light); font-size:11px;
  opacity:0; transform:translateX(-5px);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.footer-col a:hover{ color:var(--paper); }
.footer-col a:hover::after{ opacity:1; transform:translateX(0); }

/* ---- bottom bar ---- */
.footer-bottom{
  position:relative;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s2);
  padding-top:var(--s4);
  font-size:12px; color:var(--mist-dark);
}

@media (max-width:700px){
  footer.site-footer{ padding: 0 24px var(--s4); }
  .footer-cta{ padding: var(--s6) 0 var(--s5); }
  .footer-cta-link{ gap:var(--s3); }
  .footer-cta-icon{ width:48px; height:48px; }
  .footer-cta-icon svg{ width:16px; height:16px; }
  .footer-links{ gap:var(--s5); }
}

@media (max-width:860px){
  main.page{ padding:150px 24px 100px; }
}