/* Karakaş Hukuk Bürosu — homepage reference-match polish */

/* Overall rhythm and surface */
body{
  background:
    radial-gradient(70% 42% at 50% -5%,rgba(195,148,82,.055),transparent 62%),
    #080807;
}

/* Header: more compact, closer to the reference */
.site-header{
  height:88px;
  background:linear-gradient(180deg,rgba(5,5,4,.985),rgba(5,5,4,.78) 74%,transparent);
}
.site-header.is-stuck{
  background:rgba(7,7,6,.955);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
.nav-wrap{gap:28px}
.brand img{width:178px}
.main-nav{gap:clamp(20px,2.2vw,38px)}
.main-nav__link{
  font-size:10.5px;
  letter-spacing:.075em;
  padding:13px 0 12px;
}
.nav-cta{
  min-height:42px;
  padding:12px 19px;
  border-color:rgba(195,148,82,.62);
  background:rgba(0,0,0,.06);
}

/* Hero */
.hero{
  min-height:690px;
  height:min(78vw,820px);
  max-height:860px;
  align-items:center;
  border-bottom-color:rgba(195,148,82,.38);
}
.hero::before{
  background:
    linear-gradient(90deg,
      #080807 0%,
      rgba(8,8,7,.995) 25%,
      rgba(8,8,7,.94) 37%,
      rgba(8,8,7,.68) 48%,
      rgba(8,8,7,.18) 64%,
      rgba(8,8,7,.03) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.3)),
    url("assets/hero-adalet-premium.webp") 78% center/cover no-repeat;
  filter:saturate(.96) contrast(1.03);
}
.hero::after{
  background:
    radial-gradient(52% 52% at 69% 39%,rgba(207,151,75,.11),transparent 68%),
    linear-gradient(180deg,transparent 72%,rgba(0,0,0,.34));
}
.hero__inner{
  padding-top:58px;
  min-height:100%;
  display:flex;
  align-items:center;
}
.hero__copy{
  width:min(500px,42vw);
  transform:translateY(10px);
}
.eyebrow{
  margin-bottom:22px;
  font-size:10px;
  letter-spacing:.23em;
  color:#cfa76b;
}
.hero h1{
  font-size:clamp(52px,4.5vw,76px);
  max-width:10ch;
  line-height:1.04;
  letter-spacing:-.028em;
  text-shadow:0 3px 20px rgba(0,0,0,.26);
}
.hero__rule{
  width:48px;
  height:1px;
  margin:24px 0;
}
.hero__lead{
  max-width:45ch;
  font-size:14px;
  line-height:1.72;
  color:#aaa59c;
}
.hero__actions{margin-top:28px}
.hero .btn{
  min-height:46px;
  padding:12px 22px;
  font-size:10px;
}

/* Sections are shallower in the reference */
.section{padding:66px 0}
.section--deep{
  background:
    linear-gradient(rgba(255,255,255,.012),rgba(255,255,255,.012)),
    radial-gradient(65% 120% at 10% 100%,rgba(195,148,82,.035),transparent 58%),
    #0a0a09;
}
.section-label{
  margin-bottom:28px;
  font-size:13px;
  letter-spacing:.2em;
}

/* Expertise strip */
.practice-grid{
  background:rgba(255,255,255,.006);
  border-top-color:rgba(195,148,82,.26);
  border-bottom-color:rgba(195,148,82,.26);
}
.practice-card{
  min-height:220px;
  padding:28px 18px 23px;
  border-right-color:rgba(195,148,82,.26);
}
.practice-icon{
  width:39px;
  height:39px;
  margin-bottom:18px;
  color:#c79249;
}
.practice-card h3{
  font-size:13px;
  line-height:1.32;
}
.practice-card p{
  margin-top:13px;
  max-width:19ch;
  font-size:10.8px;
  line-height:1.64;
  color:#8f8a82;
}
.practice-card .arrow{
  padding-top:14px;
  font-size:18px;
}

/* About band — the banner runs full bleed and carries its own copy. */
.section--about{padding:0;border-bottom:1px solid rgba(195,148,82,.24)}
.about-banner{
  display:block;
  border-top:1px solid rgba(195,148,82,.24);
  border-bottom:1px solid rgba(195,148,82,.24);
  background:#090908;
}
.about-banner img{width:100%;height:auto;display:block}
/* Desktop takes the banner's own type; the fallback copy is for narrow screens. */
.about-banner__copy{display:none}
.about-banner__cta{padding:26px 0;text-align:center}

/* Articles */
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(34px,3.1vw,47px)}
.article-grid{gap:16px}
.article-card{
  background:#0a0a09;
  border-color:rgba(195,148,82,.34);
}
.article-media{aspect-ratio:3/2}
.article-media.one{background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.09)),url("assets/makale-kira-sozlesmeleri.webp")}
.article-media.two{background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.09)),url("assets/makale-ticari-sozlesmeler.webp")}
.article-media.three{background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.09)),url("assets/makale-is-hukuku.webp")}
.article-body{padding:17px 18px 19px}
.article-body time{font-size:10px}
.article-body h3{
  font-size:20px;
  line-height:1.2;
  margin:6px 0 15px;
}

/* Footer */
.site-footer{
  padding:58px 0 20px;
  border-top-color:rgba(195,148,82,.3);
}
.footer-grid{
  grid-template-columns:.9fr 1.15fr .55fr;
  gap:42px;
}
.footer-brand img{width:188px}
.footer-brand p{margin-top:13px;font-size:11.5px}
.footer-contact{gap:10px;padding-top:4px}
.footer-contact li{font-size:12px;line-height:1.5}
.footer-bottom{
  margin-top:25px;
  padding-top:14px;
}

/* Slightly calmer entrance */
.reveal{transform:translateY(12px);transition-duration:.65s}

@media(max-width:1180px){
  .site-header{height:82px}
  .brand img{width:165px}
  .main-nav{gap:18px}
  .nav-cta{padding:11px 15px}
  .hero{height:auto;min-height:700px}
  .hero__copy{width:min(500px,48vw)}
}

@media(max-width:920px){
  .site-header{height:76px}
  .brand img{width:150px}
  .main-nav{inset:76px 0 auto}
  .hero{
    min-height:670px;
    height:auto;
    align-items:flex-end;
  }
  .hero::before{
    background:
      linear-gradient(180deg,rgba(7,7,6,.18) 0%,rgba(7,7,6,.35) 38%,rgba(7,7,6,.92) 73%,#080807 100%),
      url("assets/hero-adalet-premium.webp") 66% 26%/cover no-repeat;
  }
  .hero::after{background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.32) 72%,rgba(0,0,0,.54))}
  .hero__inner{padding:160px 0 64px;align-items:flex-end}
  .hero__copy{width:100%;max-width:620px;transform:none}
  .hero h1{font-size:clamp(46px,8vw,66px);max-width:11ch}
  .hero__lead{max-width:52ch}
  .practice-grid{grid-template-columns:repeat(3,1fr)}
  .about-banner img{aspect-ratio:16/9;object-fit:cover}
  .about-banner__copy{display:block;padding:38px 0 4px}
  .about-banner__copy h2{margin:0;max-width:16ch;font-family:var(--display);font-weight:400;
    font-size:clamp(30px,4.4vw,40px);line-height:1.1;letter-spacing:-.02em}
  .about-banner__copy p{margin-top:16px;color:var(--muted,#a8a29a);font-size:13px;line-height:1.75;max-width:56ch}
  .about-banner__copy .mini{margin-bottom:12px;color:var(--gold);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
  .about-banner__cta{padding:20px 0 34px;text-align:left}
}

@media(max-width:640px){
  :root{--shell:min(100% - 28px,640px)}
  .site-header{height:70px}
  .brand img{width:136px}
  .main-nav{inset:70px 0 auto}
  .hero{min-height:640px}
  .hero__inner{padding:140px 0 48px}
  .eyebrow{font-size:9px;margin-bottom:16px}
  .hero h1{font-size:clamp(40px,12vw,54px);max-width:10ch}
  .hero__rule{margin:19px 0}
  .hero__lead{font-size:13px;line-height:1.66}
  .hero__actions{margin-top:23px}
  .section{padding:52px 0}
  .practice-grid{grid-template-columns:repeat(2,1fr)}
  .practice-card{min-height:196px;padding:24px 12px 20px}
  .practice-card:nth-child(2n){border-right:0}
  .practice-card:nth-child(n+3){border-top:1px solid rgba(195,148,82,.26)}
  .practice-card h3{font-size:12px}
  .practice-card p{font-size:10.2px}
  .about-banner img{aspect-ratio:4/3}
  .article-grid{grid-template-columns:1fr}
  .article-media{aspect-ratio:3/2}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:8px}
}

/* ------------------------------------------------------------------------
   Visual-QA tuning for the homepage. These used to be injected from
   redesign.js as an !important <style> block; they belong in the cascade.
   Placed last so they win over the max-width blocks above.
   ------------------------------------------------------------------------ */
@media(min-width:1181px){
  .site-header{height:112px}
  .brand img{width:215px}
  .main-nav{gap:clamp(22px,2vw,34px)}
  .hero{height:720px;min-height:720px;max-height:720px}
  .hero::before{
    background:
      linear-gradient(90deg,
        #080807 0%,
        rgba(8,8,7,.995) 28%,
        rgba(8,8,7,.94) 40%,
        rgba(8,8,7,.62) 53%,
        rgba(8,8,7,.12) 70%,
        rgba(8,8,7,.02) 100%) 0 0/100% 100% no-repeat,
      linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28)) 0 0/100% 100% no-repeat,
      url("assets/hero-adalet-base.webp") 97% center/auto 94% no-repeat;
  }
  .hero__inner{padding-top:82px}
  .hero__copy{width:min(620px,46vw);transform:translateY(4px)}
  .hero h1{font-size:clamp(56px,4.1vw,68px);max-width:16ch;line-height:1.03;letter-spacing:-.025em}
  .hero__lead{max-width:50ch}
}

@media(min-width:921px) and (max-width:1180px){
  .site-header{height:100px}
  .brand img{width:190px}
  .main-nav{gap:15px}
  .hero{min-height:680px;height:680px}
  .hero__inner{padding-top:76px}
  .hero__copy{width:min(570px,50vw)}
  .hero h1{font-size:56px;max-width:16ch}
  .hero::before{
    background:
      linear-gradient(90deg,
        #080807 0%,
        rgba(8,8,7,.99) 30%,
        rgba(8,8,7,.88) 43%,
        rgba(8,8,7,.42) 58%,
        rgba(8,8,7,.06) 77%) 0 0/100% 100% no-repeat,
      url("assets/hero-adalet-base.webp") 100% center/auto 90% no-repeat;
  }
}

@media(max-width:640px){
  .hero h1{max-width:12ch}
}

/* ------------------------------------------------------------------------
   Terazi sarkacı. Katman, hero fotoğrafının render kutusunu birebir taklit
   eder: aynı yükseklik oranı, aynı yatay konum formülü. Böylece kırılım
   noktalarında hizalama kendiliğinden tutar. Mesnet, kolun orta göbeği.
   ------------------------------------------------------------------------ */
.hero__scales{display:none}
.hero__scales img{width:100%;height:100%;display:block;transform-origin:77.39% 30.42%}

@keyframes terazi-salinim{
  0%{transform:rotate(0deg)}  1.75%{transform:rotate(2.45deg)}  5.25%{transform:rotate(-2.18deg)}
  8.75%{transform:rotate(1.94deg)}  12.25%{transform:rotate(-1.73deg)}  15.75%{transform:rotate(1.54deg)}
  19.25%{transform:rotate(-1.37deg)}  22.75%{transform:rotate(1.22deg)}  26.25%{transform:rotate(-1.08deg)}
  29.75%{transform:rotate(0.964deg)}  33.25%{transform:rotate(-0.858deg)}  36.75%{transform:rotate(0.764deg)}
  40.25%{transform:rotate(-0.68deg)}  43.75%{transform:rotate(0.605deg)}  47.25%{transform:rotate(-0.538deg)}
  50.75%{transform:rotate(0.479deg)}  54.25%{transform:rotate(-0.426deg)}  57.75%{transform:rotate(0.379deg)}
  61.25%{transform:rotate(-0.338deg)}  64.75%{transform:rotate(0.3deg)}  68.25%{transform:rotate(-0.267deg)}
  71.75%{transform:rotate(0.238deg)}  75.25%{transform:rotate(-0.212deg)}  78.75%{transform:rotate(0.188deg)}
  82.25%{transform:rotate(-0.168deg)}  85.75%{transform:rotate(0.149deg)}  89.25%{transform:rotate(-0.133deg)}
  92.75%{transform:rotate(0.118deg)}  96.25%{transform:rotate(-0.105deg)}  100%{transform:rotate(0deg)}
}

@media(min-width:1181px){
  .hero__scales{
    display:block;position:absolute;pointer-events:none;
    height:94%;aspect-ratio:1672/941;
    left:97%;top:50%;transform:translate(-97%,-50%);
  }
}
@media(min-width:921px) and (max-width:1180px){
  .hero__scales{
    display:block;position:absolute;pointer-events:none;
    height:90%;aspect-ratio:1672/941;
    left:100%;top:50%;transform:translate(-100%,-50%);
  }
}
/* Uçlar arasında sinüse yakın bir geçiş; sarkaç böyle hareket eder.
   Katman görünmediği kırılımlarda zaten display:none, animasyon zararsız. */
@media(prefers-reduced-motion:no-preference){
  .hero__scales img{animation:terazi-salinim 40s ease-in-out .6s both}
}

/* Mobil. Burada hero `cover` kullanıyor; dar ve uzun ekranda cover'ın
   yüksekliğe göre ölçeklendiği kesin olduğu için aynı kutuyu `auto 100%`
   ile birebir kurabiliyoruz. Yatay ekranda bu garanti bozulur, o yüzden
   en-boy koşulu var; dışında birleşik görsel statik kalıyor.
   Karartma gradyanını ::before'dan ::after'a taşıdık: aksi hâlde terazi
   katmanı karartmanın üstünde kalıp fotoğraftan kopuk parlıyordu. */
@media(max-width:920px){
  /* Dikey ekranda yatay görseli kırparak doldurmak kompozisyonun ancak
     üçte birini bırakıyordu. Mobil kendi kadrajını kullanıyor: kabartma
     tam genişlikte bir bant olarak üstte duruyor, metin altında temiz
     zeminde. Bandın alt kenarı zemine karışsın diye eriyor. */
  .hero{min-height:auto;height:auto;padding:0;align-items:stretch}
  .hero::before{
    background:url("assets/hero-adalet-mobil-full.webp") top center/100% auto no-repeat;
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(7,7,6,.10) 0%,rgba(7,7,6,.06) 46%,rgba(7,7,6,.62) 82%,#080807 101vw),
      radial-gradient(70% 40% at 60% 34%,rgba(207,151,75,.10),transparent 70%);
  }
  .hero__inner{padding:calc(100vw + 30px) 0 58px;align-items:flex-start}
  .hero__copy{width:100%;max-width:560px;transform:none}
}

/* Terazi mobilde de sallanıyor. Bant `100% auto` olduğu için katmanın
   kutusu doğrudan hesaplanabiliyor; kırpma oranı 880/890. */
@media(max-width:920px){
  .hero::before{background-image:url("assets/hero-adalet-mobil.webp")}
  .hero__scales{
    display:block;position:absolute;pointer-events:none;
    width:100%;aspect-ratio:880/890;left:0;top:0;
  }
  .hero__scales img{transform-origin:58.41% 31.04%}
}