/* ASBALSA — asbalsa.com */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/inter-latin-ext.34b9c504.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/inter-latin.3100e775.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --charcoal:#16181D; --sand:#D5CABE; --taupe:#817872; --ivory:#F5F1EB; --sage:#A6B39E;
  --pad:40px; --hdr:75px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
a{color:var(--charcoal)}
img,svg{max-width:100%}
figure,blockquote{margin:0}
::selection{background:var(--sage);color:var(--charcoal)}
input,textarea,select,button{font-family:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.skip{position:fixed;left:-9999px;top:0;z-index:300;background:var(--charcoal);color:var(--ivory);
  padding:12px 22px;font-size:12px;letter-spacing:.16em;text-decoration:none}
.skip:focus{left:0}

@keyframes asb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes asb-fade{from{opacity:0}to{opacity:1}}
@keyframes asb-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes asb-card{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes asb-scroll{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes asb-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- header / nav ---------- */
#asb-hdr{position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .4s ease,border-color .4s ease;
  background:rgba(245,241,235,0);border-bottom:1px solid rgba(22,24,29,0)}
#asb-hdr.on{background:rgba(245,241,235,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(22,24,29,.08)}
.hdr-in{max-width:1280px;margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--charcoal)}
.brand .mark{width:68px;height:39px;flex-shrink:0}
.brand .txt{display:flex;flex-direction:column;align-items:flex-start;gap:5.5px}
.brand .wm{display:block;height:21.5px;width:auto;flex-shrink:0}
.brand .tag{font-size:7.73px;font-weight:500;letter-spacing:.268em;color:var(--taupe);line-height:1;white-space:nowrap}
.nav-d{display:flex;gap:34px;align-items:center}
.nav-d a{font-size:12.2px;font-weight:500;letter-spacing:.22em;text-decoration:none;color:var(--charcoal);
  padding:4px 0 6px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.nav-d a:hover{color:var(--sage)}
.nav-d a[aria-current=page]{border-bottom-color:var(--sage)}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;align-items:flex-end;gap:6px;padding:8px}
.burger span{width:30px;height:2px;background:var(--charcoal);border-radius:2px;display:block}
.burger span:last-child{width:19px}

#asb-menu{position:fixed;inset:0;z-index:150;background:var(--charcoal);display:none;flex-direction:column}
#asb-menu.open{display:flex;animation:asb-fade .35s ease both}
.menu-top{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid rgba(245,241,235,.08)}
.menu-top .wm{height:15px;width:auto;color:var(--ivory);display:block}
.menu-x{background:none;border:none;color:var(--ivory);font-size:30px;cursor:pointer;line-height:1;padding:4px 12px}
#asb-menu nav{display:flex;flex-direction:column;padding:32px 28px;flex:1;justify-content:center;gap:2px}
#asb-menu nav a{font-size:clamp(26px,7vw,32px);font-weight:600;letter-spacing:.02em;color:var(--ivory);
  text-decoration:none;padding:14px 0;border-bottom:1px solid rgba(245,241,235,.08);transition:color .3s}
#asb-menu nav a:last-child{border-bottom:none}
#asb-menu nav a:hover,#asb-menu nav a[aria-current=page]{color:var(--sage)}
.menu-foot{padding:28px;color:var(--taupe);font-size:10px;letter-spacing:.26em}

/* ---------- preloader ---------- */
#asb-pre{position:fixed;inset:0;z-index:200;background:var(--ivory);display:flex;flex-direction:column;
  gap:20px;align-items:center;justify-content:center;transition:opacity .5s ease}
#asb-pre .mark{width:112px;animation:asb-pulse 1.3s ease infinite}
#asb-pre .lbl{font-size:11px;font-weight:500;letter-spacing:.5em;margin-right:-.5em;color:var(--taupe)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ivory)}
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 88% at 3% 4%, rgba(213,202,190,.52) 0%, rgba(213,202,190,0) 56%),
    radial-gradient(78% 58% at 0% 100%, rgba(129,120,114,.12) 0%, rgba(129,120,114,0) 72%)}

.hero-in{position:relative;z-index:2;box-sizing:border-box}
.hero-copy{max-width:620px}
.hero-eyebrow{font-size:11px;font-weight:500;letter-spacing:.34em;line-height:2;color:var(--taupe);
  animation:asb-up .8s ease .15s both}
.hero h1{margin:26px 0 0;font-weight:600;letter-spacing:-.028em;line-height:1.03;
  font-size:clamp(42px,5.6vw,84px);text-wrap:balance;animation:asb-up .8s ease .3s both}
.hero h1 em{font-style:normal;display:block;color:var(--charcoal)}
.hero-lead{margin:30px 0 0;max-width:520px;font-size:17px;line-height:1.8;color:var(--taupe);
  animation:asb-up .8s ease .45s both}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px;animation:asb-up .8s ease .6s both}
.btn{display:inline-block;text-decoration:none;font-size:11.5px;font-weight:500;letter-spacing:.24em;
  border-radius:2px;transition:background .3s,color .3s,border-color .3s}
.btn-solid{background:var(--charcoal);color:var(--ivory);padding:20px 36px;border:1px solid var(--charcoal)}
.btn-solid:hover{background:var(--sage);border-color:var(--sage);color:var(--charcoal)}
.btn-ghost{background:transparent;color:var(--charcoal);padding:20px 36px;border:1px solid rgba(22,24,29,.35)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage)}

.hero-scroll{display:flex;align-items:center;gap:14px;text-decoration:none;
  animation:asb-up .8s ease .75s both}
.hero-scroll .rule{width:58px;height:1px;background:rgba(22,24,29,.22);position:relative;overflow:hidden}
.hero-scroll .rule::after{content:"";position:absolute;inset:0;background:var(--sage);
  transform-origin:left;animation:asb-swipe 2.4s ease-in-out infinite}
.hero-scroll span{font-size:9.5px;font-weight:500;letter-spacing:.4em;color:var(--taupe)}
@keyframes asb-swipe{0%{transform:scaleX(0)}45%{transform:scaleX(1)}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

.hero-media{position:relative;z-index:1;overflow:hidden;background:var(--sand)}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,241,235,.72) 0,rgba(245,241,235,0) 17%)}

/* hero: kenara tasan detay karesi (yalniz genis ekran) */
.hero-detail{display:none}
@media (min-width:1100px){
  .hero-detail{display:block;position:absolute;z-index:3;bottom:clamp(86px,13vh,146px);
    right:calc(clamp(420px,46vw,800px) - 128px);
    width:clamp(186px,15.5vw,246px);
    border:7px solid var(--ivory);
    box-shadow:0 26px 64px -28px rgba(22,24,29,.45)}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .hero-detail{opacity:0;transform:translateY(26px);
    transition:opacity .9s cubic-bezier(.22,.61,.19,1) .95s,transform .9s cubic-bezier(.22,.61,.19,1) .95s}
  .hero-detail.is-in{opacity:1;transform:none}
}

@media (min-width:1100px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,clamp(420px,46vw,800px));
    min-height:100vh;min-height:100svh}
  .hero-in{grid-column:1;display:grid;grid-template-rows:1fr auto;
    padding-left:max(var(--pad),calc((100vw - 1280px)/2 + var(--pad)));
    padding-right:clamp(36px,4.5vw,80px);
    padding-top:calc(var(--hdr) + 40px);padding-bottom:56px}
  .hero-copy{align-self:center}
  .hero-in > .hero-scroll{align-self:end;padding-top:56px}
  .hero-media{grid-column:2}
  .hero-media{border-left:1px solid rgba(22,24,29,.10)}
}
@media (max-width:1099px){
  .hero-in{max-width:1280px;margin:0 auto;padding:calc(var(--hdr) + 68px) var(--pad) 60px}
  .hero-copy{max-width:640px}
  .hero-media{height:clamp(300px,54svh,540px)}
  .hero-scroll{margin-top:48px}
}
@media (max-width:600px){
  .hero-eyebrow{font-size:9.6px;letter-spacing:.2em}
  .hero-scroll{margin-top:38px}
  .hero-in{padding-bottom:44px}
  .hero-cta{gap:10px}
  .btn{padding:18px 26px;font-size:11px;letter-spacing:.2em}
  .hero-lead{font-size:16px}
}

/* ---------- footer ---------- */
.f-brand .mark{width:104px;display:block}
.f-brand .wm{display:block;height:30px;width:auto;color:var(--ivory);margin-bottom:9px}
.f-brand .tag{font-size:8.6px;font-weight:500;letter-spacing:.268em;color:var(--taupe);line-height:1}

/* ---------- utilities ---------- */
[data-reveal]{will-change:opacity,transform}

/* ---------- hareket katmani ----------
 * JS elemanlara data-anim atar, gorunur olunca .is-in ekler.
 * --ad: gecikme (stagger). prefers-reduced-motion'da tum katman devre disi.
 */
@media (prefers-reduced-motion: no-preference){
  [data-anim]{--ad:0ms}
  [data-anim="up"]{opacity:0;transform:translateY(30px);
    transition:opacity .85s cubic-bezier(.22,.61,.19,1) var(--ad),
               transform .85s cubic-bezier(.22,.61,.19,1) var(--ad)}
  [data-anim="mask"]{opacity:0;clip-path:inset(0 0 102% 0);transform:translateY(.16em);
    transition:opacity .45s ease var(--ad),
               clip-path 1.05s cubic-bezier(.22,.61,.19,1) var(--ad),
               transform 1.05s cubic-bezier(.22,.61,.19,1) var(--ad)}
  [data-anim="rule"]{transform:scaleX(0);transform-origin:left;
    transition:transform .85s cubic-bezier(.22,.61,.19,1) var(--ad)}
  [data-anim="fade"]{opacity:0;transition:opacity .9s ease var(--ad)}
  [data-anim].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

  /* header kaydirinca hafifce toplansin */
  #asb-hdr{transition:background .4s ease,border-color .4s ease,padding .45s cubic-bezier(.22,.61,.19,1)}
  #asb-hdr .brand .mark,#asb-hdr .brand .wm{transition:width .45s cubic-bezier(.22,.61,.19,1),height .45s cubic-bezier(.22,.61,.19,1)}
  #asb-hdr.on .hdr-in{padding-top:11px;padding-bottom:11px}
  #asb-hdr.on .brand .mark{width:48px;height:27.5px}
  #asb-hdr.on .brand .wm{height:15.4px}
  #asb-hdr.on .brand .tag{opacity:0;transition:opacity .3s ease}

  /* hero gorseli: giris + kaydirma paralaksi */
  .hero-media{clip-path:inset(0 0 0 100%);transition:clip-path 1.15s cubic-bezier(.22,.61,.19,1) .15s}
  .hero-media.is-in{clip-path:inset(0 0 0 0)}
  .hero-media img{transform:scale(1.12);transition:transform 1.6s cubic-bezier(.22,.61,.19,1) .2s;will-change:transform}
  .hero-media.is-in img{transform:scale(1.06)}
  .hero-media.parallax img{transition:none}
}

/* nav alt cizgisi buyusun */
.nav-d a{position:relative}
.nav-d a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--sage);
  transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.22,.61,.19,1)}
.nav-d a:hover::after,.nav-d a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.nav-d a[aria-current=page]{border-bottom-color:transparent}

/* kart gorselleri hover'da hafifce yakinlassin */
.shot{overflow:hidden;position:relative}
.shot picture{display:block;width:100%;height:100%}
.shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.22,.61,.19,1)}
a:hover .shot img,[data-project]:hover .shot img{transform:scale(1.055)}

/* butonlarda ince dolgu gecisi */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sage);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.22,.61,.19,1)}
.btn:hover::before{transform:translateY(0)}
.btn-solid:hover{background:var(--charcoal);border-color:var(--sage);color:var(--charcoal)}
.btn-ghost:hover{color:var(--charcoal);border-color:var(--sage)}

/* ---------- dar ekran korumalari ----------
 * Sayfa icerigi .dc.html kaynagindan satir-ici stillerle geliyor; asagidaki
 * kurallar dar ekranlarda yatay tasmaya yol acan iki kaliba mudahale eder.
 */
main [style*="display:grid"] > *{min-width:0}
@media (max-width:700px){
  /* 70px 1fr 2fr degerler tablosu (hakkimizda) dar ekranda alt alta */
  main [style*="grid-template-columns:70px"]{grid-template-columns:1fr!important;gap:8px!important}
}

@media (max-width:920px){
  .nav-d{display:none}
  .burger{display:flex}
}
@media (max-width:600px){
  :root{--pad:24px;--hdr:65px}
  .hdr-in{padding:16px var(--pad)}
  .brand .mark{width:58px;height:33px}
  .brand .wm{height:18.4px}
  .brand .tag{font-size:6.62px;letter-spacing:.268em}
}
@media (max-width:400px){
  :root{--pad:18px}
}
@media (max-width:380px){
  .brand .tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}