/* Palette (logo turuncu odak) */
:root{--bg:#ffffff;--text:#0e141b;--muted:#5b6675;--line:#e7ebf0;--surface:#ffffff;--accent:#ff7a00;--accent-2:#ff9f1a}
:root.dark{--bg:#0c1117;--text:#eef1f5;--muted:#9aa4b2;--line:#1f2a3a;--surface:#0f1620;--accent:#ff7a00;--accent-2:#ffb14d}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
img{max-width:100%;display:block}

.container{max-width:1120px;margin-inline:auto;padding:0 1.2rem}
.section{padding:4rem 0;border-top:1px solid var(--line)}

/* Header + Nav */
.site-header{position:sticky;top:0;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:1000}
.nav{display:flex;justify-content:space-between;align-items:center;height:88px}
.brand img{height:80px;width:auto}
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:1px}
.menu{display:flex;gap:1rem;align-items:center;list-style:none;margin:0;padding:0}
.menu a,.menu button{padding:.6rem .9rem;border-radius:10px;color:var(--text);text-decoration:none}
.menu a:hover{background:color-mix(in oklab,var(--line) 40%,transparent)}
.menu .nav-link.active{border-bottom:2px solid var(--accent)}
.lang-switch button,#theme-toggle{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;color:var(--text)}

/* Overlay for mobile */
.overlay{position:fixed;inset:0;backdrop-filter:blur(4px);background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.2s}
.menu.open ~ .overlay{opacity:1;pointer-events:auto}

@media (max-width: 760px){
  body.menu-lock{overflow:hidden}
  .menu{position:fixed;inset:88px 0 auto 0;background:var(--bg);flex-direction:column;padding:1rem 1.2rem;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:.2s}
  .menu.open{transform:translateY(0)}
  .nav-toggle{display:block}
}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding:5rem 0 3.5rem}
.hero-title{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.05;margin:0;background:linear-gradient(135deg,var(--text),color-mix(in oklab,var(--accent-2) 50%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);font-weight:600;margin:.7rem 0 1.2rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--line);color:var(--text)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0;color:#1a0e00}
.btn.ghost{background:transparent}
.hero-media{display:grid;place-items:center}

/* Work */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.work-card{grid-column:span 6;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.work-card img{width:100%;height:240px;object-fit:cover}
.work-card h3{margin:1rem 1rem .5rem}
.work-card p{margin:0 1rem 1.2rem;color:var(--muted)}

/* Services */
.services{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.services li{background:var(--surface);border:1px solid var(--line);padding:.6rem .8rem;border-radius:999px}

/* Contact */
.form{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-top:1rem}
.field{grid-column:span 6;display:flex;flex-direction:column;gap:.35rem}
.field.full{grid-column:span 12}
input,textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.85rem;color:var(--text);outline:none}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%,transparent)}
.actions{grid-column:span 12;display:flex;gap:.8rem}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:2rem 0;margin-top:2rem}
.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.social{display:flex;gap:.75rem;list-style:none;margin:0;padding:0}

/* Active section anchor offset */
section{scroll-margin-top:96px}

/* === Skip link fix (accessibility) === */
.skip{
  position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);white-space:nowrap
}
.skip:focus{
  left:1rem;top:1rem;width:auto;height:auto;padding:.6rem 1rem;
  clip:auto;clip-path:none;z-index:11000;background:var(--accent);color:#1a0e00;
  border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.25)
}
/* Ensure overlay stays below focused skip link */
.overlay{z-index:900}
.site-header{z-index:1000}

/* === Header logo mobile fix === */
/* Make sure the header has enough inner height on small screens */
@media (max-width: 760px){
  :root{ --header-mobile-h: 72px; }
  .nav{height: var(--header-mobile-h);}                 /* was 88px */
  .site-header{ padding-top: env(safe-area-inset-top); }
  .brand{ display:flex; align-items:center; min-height: var(--header-mobile-h); }
  .brand img{ height:56px; max-height:calc(var(--header-mobile-h) - 16px); width:auto; object-fit:contain; display:block; }
  /* Mobile menu panel starts under the header */
  .menu{ inset: var(--header-mobile-h) 0 auto 0; }
  /* Anchor scrolling respects the shorter header */
  section{ scroll-margin-top: calc(var(--header-mobile-h) + 8px); }
}

/* Prevent accidental clipping on ultra-small heights */
@media (max-height: 560px){
  .brand img{ height:48px; }
}

/* === Responsive iOS & mobile spacing + mobile stacking fix === */
/* 1) iOS safe-areas + yumuşak container padding */
:root{ --container-pad: clamp(16px, 5vw, 24px); }
.container{ padding-left: var(--container-pad); padding-right: var(--container-pad); }
/* iOS çentikler: kenarlarda taşma olmasın */
.container{ padding-left: max(var(--container-pad), env(safe-area-inset-left));
            padding-right: max(var(--container-pad), env(safe-area-inset-right)); }

/* 2) Mobilde gridlerin tek sütuna düşmesi (work + gallery) */
@media (max-width: 760px){
  .grid{ grid-template-columns: 1fr !important; }
  .work-card{ grid-column: 1 / -1 !important; }
  .gallery{ grid-template-columns: 1fr !important; }
  .gallery img{ grid-column: 1 / -1 !important; width: 100%; height: auto; }
}

/* 3) Hero ve bölüm kenar boşluklarının eşitlenmesi */
@media (max-width: 760px){
  .hero{ padding-left: var(--container-pad); padding-right: var(--container-pad); }
  section{ padding-left: 0; padding-right: 0; } /* sections already within .container */
}

/* 4) Görsellerin taşmasını önle (iOS Safari) */
img{ max-width: 100%; height: auto; }

/* Yukarı Git butonu */
#toTop{
  position:fixed; right:clamp(12px, 3vw, 20px); bottom:clamp(12px, 3vw, 20px);
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 90%, transparent);
  color:var(--text); box-shadow:0 6px 18px rgba(0,0,0,.12);
  opacity:0; pointer-events:none; transition:.2s ease; z-index:1200;
}
#toTop.show{ opacity:1; pointer-events:auto; }
#toTop:hover{ background:color-mix(in oklab, var(--line) 45%, var(--bg)); }
``