/* ============ FONTS (self-hosted, subsetted: Latin + Turkish) ============ */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-semibold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/newsreader-italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Source Serif 4';
  src:url('fonts/sourceserif4-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Source Serif 4';
  src:url('fonts/sourceserif4-italic.woff2') format('woff2');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/ibmplexmono-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ============ TOKENS ============ */
:root{
  --ink:        #1F1E32;
  --ink-soft:   #46445c;
  --paper:      #F6F2E9;
  --paper-dim:  #EEE7D8;
  --oak:        #9C8A52;
  --oak-light:  #B6A468;
  --oak-deep:   #70633B; /* darker accessible gold: >=4.5:1 on paper and paper-dim, for small text */
  --olive:      #3E4D3B;
  --rule:       rgba(31,30,50,0.16);
  --rule-soft:  rgba(31,30,50,0.09);

  --display: 'Newsreader', 'Georgia', serif;
  --body:    'Source Serif 4', Georgia, serif;
  --mono:    'IBM Plex Mono', monospace;

  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;color:var(--ink);}
::selection{background:var(--oak-light);color:var(--ink);}

:focus-visible{
  outline:2px solid var(--oak);
  outline-offset:3px;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
}

@media (max-width:720px){
  .wrap{padding:0 22px;}
  body{font-size:16px;}
}

/* shared eyebrow / divider signature element, echoes the logo's
   "Kazan — Hukuk" hairline-rule lockup */
.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--oak-deep);
  margin-bottom:22px;
}
.eyebrow::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{
  content:"";
  flex:1;
  height:1px;
  background:var(--rule);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ============ HEADER ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(246,242,233,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  line-height:1;
}
.brand-mark{
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.brand-rule{
  width:100%;
  height:1px;
  background:var(--oak);
}
.brand-sub{
  font-family:var(--display);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.nav-desktop{
  display:flex;
  gap:38px;
}
.nav-desktop a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
.nav-desktop a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--oak);
  transition:width .25s ease;
}
.nav-desktop a:hover::after{width:100%;}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:1px;
  background:var(--ink);
}
.nav-mobile{
  display:none;
  flex-direction:column;
  padding:8px 22px 22px;
  border-top:1px solid var(--rule-soft);
}
.nav-mobile a{
  padding:14px 0;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.nav-mobile.open{display:flex;}

.header-right{
  display:flex;
  align-items:center;
  gap:22px;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--rule);
  padding:3px;
}
.lang-btn{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink-soft);
  padding:6px 11px;
  transition:background .2s ease, color .2s ease;
}
.lang-btn.is-active{
  background:var(--ink);
  color:var(--paper);
}
.lang-btn:not(.is-active):hover{
  color:var(--ink);
}
.lang-switch--mobile{
  align-self:flex-start;
  margin-top:18px;
}

@media (max-width:860px){
  .nav-desktop{display:none;}
  .nav-toggle{display:flex;}
  .header-inner{height:72px;}
  .header-right .lang-switch{display:none;}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:128px 0 110px;
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, var(--paper-dim) 100%);
}
.hero::before{
  /* faint bookshelf-spine rhythm, a quiet nod to the office's bookcases */
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 38px,
    var(--rule-soft) 38px,
    var(--rule-soft) 39px
  );
  opacity:0.5;
  mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,0.6) 40%, transparent 90%);
}
.hero-inner{
  position:relative;
  text-align:center;
}
.hero-since{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--oak);
  margin:0 0 28px;
}
.hero-title{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.hero-line{
  font-size:clamp(52px, 9vw, 104px);
  line-height:0.98;
  font-weight:500;
}
.hero-line--sub{
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 4vw, 42px);
  color:var(--ink-soft);
}
.hero-rule{
  width:64px;
  height:1px;
  background:var(--oak);
}
.hero-desc{
  max-width:600px;
  margin:36px auto 0;
  font-size:18px;
  line-height:1.75;
  color:var(--ink-soft);
}
.hero-actions{
  display:flex;
  gap:18px;
  justify-content:center;
  margin-top:44px;
}
.btn{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
}
.btn-primary:hover{
  background:var(--oak);
  border-color:var(--oak);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
}
.btn-ghost:hover{
  border-color:var(--oak);
  color:var(--oak);
}
.hero-spine{
  position:relative;
  display:flex;
  justify-content:center;
  gap:48px;
  margin-top:90px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--ink-soft);
  opacity:0.55;
}
@media (max-width:600px){
  .hero{padding:96px 0 80px;}
  .hero-spine{gap:24px; font-size:9.5px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
}

/* ============ HAKKIMIZDA ============ */
.about{
  padding:108px 0;
  background:var(--paper-dim);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.about-inner{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:80px;
  align-items:start;
}
.about-title{
  font-size:clamp(30px, 3.4vw, 42px);
  line-height:1.18;
  margin-bottom:30px;
  max-width:480px;
}
.about-lead{
  font-size:20px;
  font-style:italic;
  color:var(--ink-soft);
  margin-bottom:22px;
}
.about-text p{
  margin:0 0 18px;
  max-width:560px;
}
.about-stats{
  display:flex;
  gap:48px;
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid var(--rule);
}
.stat{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stat-num{
  font-family:var(--display);
  font-size:36px;
  color:var(--oak);
}
.stat-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  line-height:1.4;
}
.about-quote{
  margin:0;
  padding-left:32px;
  border-left:1px solid var(--rule);
  align-self:center;
}
.about-quote blockquote{
  margin:0 0 18px;
  font-family:var(--display);
  font-style:italic;
  font-size:22px;
  line-height:1.5;
  color:var(--ink-soft);
}
.about-quote-rule{
  display:block;
  width:36px;
  height:1px;
  background:var(--oak);
}

@media (max-width:900px){
  .about-inner{grid-template-columns:1fr; gap:48px;}
  .about-quote{padding-left:0; border-left:none; padding-top:32px; border-top:1px solid var(--rule);}
}
@media (max-width:600px){
  .about{padding:72px 0;}
  .about-stats{flex-wrap:wrap; gap:32px;}
}

/* ============ ÇALIŞMA ALANLARI ============ */
.practice{
  padding:110px 0;
}
.practice-title{
  font-size:clamp(28px, 3.2vw, 38px);
  max-width:560px;
  margin-bottom:56px;
  line-height:1.2;
}
.practice-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.practice-card{
  background:var(--paper);
  padding:38px 34px;
  position:relative;
  transition:background .3s ease;
}
.practice-card:hover{
  background:var(--paper-dim);
}
.practice-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--oak-light);
  letter-spacing:0.05em;
}
.practice-card h3{
  font-size:23px;
  margin:16px 0 12px;
}
.practice-card p{
  margin:0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-soft);
}
.practice-card--featured{
  background:var(--ink);
}
.practice-card--featured .practice-num{
  color:var(--oak-light);
}
.practice-card--featured h3{
  color:var(--paper);
}
.practice-card--featured p{
  color:rgba(246,242,233,0.72);
}
.practice-card--featured:hover{
  background:var(--ink);
}
.practice-card--wide{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:40px;
}
.practice-card--wide h3{
  margin:0;
  flex-shrink:0;
  min-width:180px;
}
.practice-card--wide p{
  max-width:none;
  flex:1;
}
.practice-card--wide .practice-num{
  display:none;
}

@media (max-width:900px){
  .practice-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:600px){
  .practice{padding:72px 0;}
  .practice-grid{grid-template-columns:1fr;}
  .practice-card{padding:30px 26px;}
  .practice-card--wide{grid-column:1 / -1; flex-direction:column; align-items:flex-start; gap:12px;}
  .practice-card--wide .practice-num{display:block;}
}

/* ============ EKİBİMİZ ============ */
.team{
  padding:110px 0;
  background:var(--paper-dim);
  border-top:1px solid var(--rule-soft);
}
.team-title{
  font-size:clamp(28px, 3.2vw, 38px);
  max-width:560px;
  margin-bottom:60px;
  line-height:1.2;
}
.team-list{
  display:flex;
  flex-direction:column;
}
.member{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:48px;
  padding:42px 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.team-list .member:last-child{
  border-bottom:1px solid var(--rule);
}
.member-photo{
  width:200px;
  height:200px;
  overflow:hidden;
  background:var(--ink);
  filter:grayscale(0.15) sepia(0.08);
}
.member-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.member-photo--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, var(--ink) 0%, #2a2823 100%);
}
.member-photo--placeholder span{
  font-family:var(--display);
  font-style:italic;
  font-size:40px;
  color:var(--oak-light);
  letter-spacing:0.02em;
}
.member-role{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--oak);
}
.member-info h3{
  font-size:27px;
  margin:10px 0 14px;
}
.member-info p{
  margin:0;
  max-width:620px;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.7;
}
.member--founder .member-info h3{
  font-size:30px;
}

@media (max-width:700px){
  .member{grid-template-columns:1fr; gap:22px;}
  .member-photo, .member-photo--placeholder{width:120px; height:120px;}
}
@media (max-width:600px){
  .team{padding:72px 0;}
}

/* ============ İLETİŞİM ============ */
.contact{
  padding:110px 0 130px;
}
.contact-inner{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:72px;
  align-items:start;
}
.contact-title{
  font-size:clamp(28px, 3.2vw, 38px);
  margin-bottom:20px;
}
.contact-desc{
  color:var(--ink-soft);
  font-size:17px;
  max-width:440px;
  margin-bottom:44px;
}
.contact-block{
  padding:24px 0;
  border-top:1px solid var(--rule);
}
.contact-block:last-child{
  border-bottom:1px solid var(--rule);
}
.contact-label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--oak);
  margin-bottom:10px;
}
.contact-block p{
  margin:0;
  line-height:1.75;
}
.contact-block a{
  border-bottom:1px solid var(--rule);
  transition:border-color .2s ease, color .2s ease;
}
.contact-block a:hover{
  color:var(--oak);
  border-color:var(--oak);
}
.contact-map{
  width:100%;
  aspect-ratio:1/1;
  border:1px solid var(--rule);
  filter:sepia(0.18) saturate(0.85) contrast(0.96);
}
.contact-map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

@media (max-width:900px){
  .contact-inner{grid-template-columns:1fr; gap:48px;}
  .contact-map{aspect-ratio:16/10;}
}
@media (max-width:600px){
  .contact{padding:72px 0 90px;}
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--ink);
  color:var(--paper);
  padding:54px 0 40px;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  line-height:1;
}
.site-footer .brand-rule{
  background:var(--oak-light);
}
.site-footer .brand-sub{
  color:rgba(246,242,233,0.85);
}
.footer-nav{
  display:flex;
  gap:30px;
}
.footer-nav a{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(246,242,233,0.7);
  transition:color .2s ease;
}
.footer-nav a:hover{
  color:var(--oak-light);
}
.footer-note{
  width:100%;
  margin:30px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(246,242,233,0.12);
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:rgba(246,242,233,0.52); /* was 0.45 (4.02:1 on ink); raised for >=4.5:1 */
}

@media (max-width:600px){
  .footer-inner{flex-direction:column; align-items:flex-start;}
  .footer-nav{flex-wrap:wrap; gap:18px;}
}

/* ============ SCROLL REVEAL ============ */
/* Visible by default so the page reads fully with JS off/blocked/failed.
   The hidden-until-scrolled state is opt-in, added only once JS confirms
   it can run the reveal (see the head-inline script that adds .js-reveal). */
.reveal{
  transition:opacity .7s ease, transform .7s ease;
}
.js-reveal .reveal{
  opacity:0;
  transform:translateY(22px);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}