/* =========================================================
   RABİR — Reklam Ajansları Birliği
   Monochrome system. Ink #212121 on white, Poppins throughout.
   ========================================================= */

:root{
  --ink:#212121;
  --ink-soft:#3A3A3A;
  --muted:#767676;
  --muted-light:#9A9A9A;
  --white:#FFFFFF;
  --soft:#F6F6F6;
  --soft-2:#EFEFEF;
  --line:#E6E6E6;
  --line-strong:#D4D4D4;

  --shadow-sm:0 2px 8px rgba(33,33,33,.04);
  --shadow:0 24px 48px -28px rgba(33,33,33,.22);

  --radius:20px;
  --radius-sm:14px;
  --radius-pill:100px;

  /* One width for header, banner and every section, so all content
     shares the same left/right margin down the whole page. */
  --container:1400px;
  --gutter:clamp(20px,5vw,56px);
  --section-pad:clamp(72px,9vw,150px);
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:"Poppins",sans-serif;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
  margin:0;
  color:var(--ink);
}
h1{ font-size:clamp(2.4rem,5.4vw,4.3rem); font-weight:600; }
h2{ font-size:clamp(1.85rem,3.4vw,2.9rem); }
h3{ font-size:clamp(1.1rem,1.5vw,1.32rem); font-weight:600; letter-spacing:-.02em; }

p{ margin:0 0 1rem; }
.lede{ font-size:clamp(1rem,1.4vw,1.14rem); color:var(--muted); font-weight:400; max-width:660px; line-height:1.7; }
.muted{ color:var(--muted); }

.eyebrow{
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-light);
  margin-bottom:20px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px;
  border-radius:var(--radius-pill);
  font-size:.9rem; font-weight:500; letter-spacing:-.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn-primary{ background:var(--ink); color:var(--white); }
.btn-primary:hover{ background:#000; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-light{ background:var(--white); color:var(--ink); }
.btn-light:hover{ background:var(--soft); transform:translateY(-2px); }
.btn-sm{ padding:11px 22px; font-size:.82rem; }

/* pill + square combo (reference banner style) */
.btn-combo{ display:inline-flex; align-items:stretch; gap:6px; }
.btn-combo .btn-square{
  display:flex; align-items:center; justify-content:center;
  width:48px; border-radius:14px;
  border:1px solid transparent; cursor:pointer;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.btn-combo .btn{ border-radius:14px; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:22px 0;
  transition:padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header .container{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.header-left{ display:flex; align-items:center; }
/* absolutely centred so a wide nav can never push the logo off-centre */
.header-center{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.header-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* brand */
.brand{ display:flex; align-items:center; }
.brand img{ height:26px; width:auto; }
.brand .logo-light{ display:none; }

/* nav pill */
.nav{
  display:flex; align-items:center; gap:2px;
  padding:5px;
  border-radius:var(--radius-pill);
  background:var(--soft);
  border:1px solid var(--line);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.nav a{
  position:relative;
  padding:9px 10px;
  border-radius:var(--radius-pill);
  font-size:.76rem; font-weight:450; color:var(--ink-soft);
  white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.nav a:hover{ color:var(--ink); background:rgba(33,33,33,.055); }
.nav a:active{ transform:scale(.97); }
.nav a.is-active{ background:var(--white); color:var(--ink); font-weight:500; box-shadow:var(--shadow-sm); }
/* a hairline that grows out from the centre under the hovered item */
.nav a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:5px; height:1.5px;
  border-radius:2px; background:currentColor; opacity:.5;
  transition:left .4s var(--ease), right .4s var(--ease);
}
.nav a:hover::after{ left:14px; right:14px; }
.nav a.is-active::after{ left:50%; right:50%; }

/* header CTA */
.header-cta-pill{
  padding:11px 22px; border-radius:14px;
  background:var(--soft); border:1px solid var(--line);
  font-size:.82rem; font-weight:450; color:var(--ink);
  white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.header-cta-pill:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.header-plus{
  width:44px; height:42px; border-radius:14px;
  background:var(--soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.header-plus:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.header-plus svg{ width:15px; height:15px; transition:transform .55s var(--ease); }
.header-plus:hover svg{ transform:rotate(90deg); }
.header-plus:active,.header-cta-pill:active{ transform:scale(.96); }

.nav-toggle svg path{ transition:transform .45s var(--ease); transform-origin:center; }
.nav-toggle:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.nav-toggle:active{ transform:scale(.94); }

/* scrolled state */
.site-header.is-scrolled{
  padding:12px 0;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line);
}

/* --- header over dark hero (home) --- */
.site-header.on-dark .brand .logo-dark{ display:none; }
.site-header.on-dark .brand .logo-light{ display:block; }
.site-header.on-dark .nav{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.site-header.on-dark .nav a{ color:rgba(255,255,255,.82); }
.site-header.on-dark .nav a:hover{ color:#fff; background:rgba(255,255,255,.14); }
.site-header.on-dark .nav a.is-active{ background:var(--white); color:var(--ink); }
.site-header.on-dark .header-cta-pill,
.site-header.on-dark .header-plus{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.site-header.on-dark .header-cta-pill:hover,
.site-header.on-dark .header-plus:hover{ background:#fff; color:var(--ink); }
.site-header.on-dark .nav-toggle{ border-color:rgba(255,255,255,.3); color:#fff; }

/* once scrolled past hero, revert to light chrome */
.site-header.on-dark.is-scrolled .brand .logo-dark{ display:block; }
.site-header.on-dark.is-scrolled .brand .logo-light{ display:none; }
.site-header.on-dark.is-scrolled .nav{ background:var(--soft); border-color:var(--line); }
.site-header.on-dark.is-scrolled .nav a{ color:var(--ink-soft); }
.site-header.on-dark.is-scrolled .nav a.is-active{ background:var(--white); color:var(--ink); }
.site-header.on-dark.is-scrolled .header-cta-pill,
.site-header.on-dark.is-scrolled .header-plus{ background:var(--soft); border-color:var(--line); color:var(--ink); }
.site-header.on-dark.is-scrolled .header-cta-pill:hover,
.site-header.on-dark.is-scrolled .header-plus:hover{ background:var(--ink); color:var(--white); }
.site-header.on-dark.is-scrolled .nav-toggle{ border-color:var(--line-strong); color:var(--ink); }

/* nav toggle (mobile) */
.nav-toggle{
  display:none; width:44px; height:42px; border-radius:14px;
  border:1px solid var(--line); background:var(--soft);
  align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width:1299px){
  .header-left{ display:none; }
  .header-center{ position:static; transform:none; margin-right:auto; }
  .header-cta-pill{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =========================================================
   MOBILE NAV — full-screen panel, sits outside the header
   ========================================================= */
.mobile-nav{
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column;
  padding:22px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background:var(--white);
  opacity:0; visibility:hidden;
  transform:translateY(-14px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.mobile-nav.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .45s var(--ease), transform .6s var(--ease), visibility 0s;
}
@media (min-width:1300px){ .mobile-nav{ display:none; } }

.mobile-nav-top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}
.mobile-nav-top .brand img{ height:26px; }
.mobile-nav-close{
  width:46px; height:46px; border-radius:14px;
  border:1px solid var(--line); background:var(--soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .5s var(--ease);
}
.mobile-nav-close svg{ width:18px; height:18px; transition:transform .55s var(--ease); }
.mobile-nav-close:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.mobile-nav-close:hover svg{ transform:rotate(90deg); }
.mobile-nav-close:active{ transform:scale(.94); }

/* links */
.mobile-nav-links{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav-links a{
  position:relative;
  display:flex; align-items:baseline; gap:16px;
  padding:clamp(14px,2.4vh,22px) 4px;
  font-size:clamp(1.55rem,7vw,2.3rem);
  font-weight:500; letter-spacing:-.035em; line-height:1.1;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .35s var(--ease);
}
.mobile-nav.is-open .mobile-nav-links a{
  opacity:1; transform:none;
  transition-delay:calc(120ms + var(--i,0) * 55ms);
}
.mobile-nav-links a .idx{
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  color:var(--muted-light);
  transition:color .35s var(--ease);
}
.mobile-nav-links a .label{
  transition:transform .5s var(--ease);
  display:inline-block;
}
/* the underline sweeps in from the left on hover */
.mobile-nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.mobile-nav-links a .arw{
  margin-left:auto; align-self:center;
  opacity:0; transform:translateX(-10px);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.mobile-nav-links a .arw svg{ width:22px; height:22px; }

.mobile-nav-links a:hover .label,
.mobile-nav-links a:focus-visible .label{ transform:translateX(10px); }
.mobile-nav-links a:hover::after,
.mobile-nav-links a:focus-visible::after{ transform:scaleX(1); }
.mobile-nav-links a:hover .arw,
.mobile-nav-links a:focus-visible .arw{ opacity:1; transform:translateX(0); }
.mobile-nav-links a:hover .idx,
.mobile-nav-links a:focus-visible .idx{ color:var(--ink); }

.mobile-nav-links a.is-active .idx{ color:var(--ink); }
.mobile-nav-links a.is-active::after{ transform:scaleX(1); }

/* footer of the panel */
.mobile-nav-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--line);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.mobile-nav.is-open .mobile-nav-foot{
  opacity:1; transform:none; transition-delay:.46s;
}
.mobile-nav-mail{ font-size:.88rem; color:var(--muted); transition:color .35s var(--ease); }
.mobile-nav-mail:hover{ color:var(--ink); }

/* =========================================================
   HERO (banner) — reference layout
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 0 clamp(40px,5vw,64px);
  overflow:hidden;
  background-color:#8E9195;
}
/* Separate layer so the photo can drift on scroll without moving the text.
   Oversized top/bottom to leave room for the parallax travel. */
.hero-media{
  position:absolute; left:0; right:0; top:-10%; bottom:-10%;
  will-change:transform;
  /* Drop a photo at assets/img/hero.jpg — it layers over this studio gradient */
  background-image:
    radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%),
    url("../img/hero.jpg"),
    linear-gradient(165deg,#A7AAAE 0%,#8A8D91 45%,#5E6165 100%);
  background-size:auto, cover, auto;
  background-position:center, center, center;
  background-repeat:no-repeat;
}
/* Ink (#212121) scrim: a light wash under the header, clear through the
   middle, easing into a soft floor so the headline and list stay legible.
   Many stops keep the ramp smooth and banding-free over a photo. */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(33,33,33,.32)  0%,
    rgba(33,33,33,.12) 12%,
    rgba(33,33,33,.02) 24%,
    rgba(33,33,33,0)   34%,
    rgba(33,33,33,.10) 44%,
    rgba(33,33,33,.24) 54%,
    rgba(33,33,33,.38) 62%,
    rgba(33,33,33,.52) 70%,
    rgba(33,33,33,.66) 78%,
    rgba(33,33,33,.78) 86%,
    rgba(33,33,33,.87) 93%,
    rgba(33,33,33,.92) 100%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; }

.hero-bottom{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:end;
}
@media (max-width:900px){ .hero-bottom{ grid-template-columns:1fr; gap:40px; } }

.hero h1{
  color:#fff;
  font-size:clamp(2.5rem,6.2vw,5rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.04;
  margin-bottom:22px;
}
.hero-sub{
  color:rgba(255,255,255,.8);
  font-size:clamp(.95rem,1.2vw,1.05rem);
  line-height:1.6;
  max-width:400px;
  margin-bottom:32px;
}
.hero-cta .btn-light{ border-radius:14px; }
.hero-cta .btn-square{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.hero-cta .btn-square:hover{ background:#fff; color:var(--ink); }
.hero-cta .btn-square svg{ width:15px; height:15px; }

/* hero list (bottom right) */
.hero-list{ display:flex; flex-direction:column; }
.hero-list a{
  display:flex; align-items:center; gap:14px;
  padding:17px 4px;
  color:rgba(255,255,255,.86);
  font-size:.92rem; font-weight:400;
  border-top:1px solid rgba(255,255,255,.16);
  transition:color .35s var(--ease), padding-left .45s var(--ease);
}
.hero-list a:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.hero-list a:hover{ color:#fff; padding-left:12px; }
.hero-list svg{ width:17px; height:17px; flex:none; opacity:.85; }
.hero-list .arrow{ margin-left:auto; opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.hero-list a:hover .arrow{ opacity:.9; transform:translateX(0); }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:3; color:rgba(255,255,255,.6);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0)); }
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* =========================================================
   IMAGERY — parallax bands & media frames
   Photos are painted as background-image on a div (not <img>) so a
   missing file falls back to the gradient instead of a broken icon.
   Everything is desaturated to hold the monochrome identity.
   ========================================================= */
.ph{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.04);
}

/* --- full-bleed parallax band --- */
.parallax-band{
  position:relative;
  overflow:hidden;
  padding:clamp(96px,14vw,190px) 0;
  background-color:#2B2B2B;
  isolation:isolate;
}
.parallax-band .pb-media{
  position:absolute; left:0; right:0; top:-14%; bottom:-14%;
  z-index:0;
  will-change:transform;
}
.parallax-band .pb-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(33,33,33,.72) 0%,
    rgba(33,33,33,.62) 40%,
    rgba(33,33,33,.70) 100%);
}
.parallax-band .container{ position:relative; z-index:2; }
.parallax-band h2,.parallax-band h3{ color:#fff; }
.parallax-band p{ color:rgba(255,255,255,.78); }
.parallax-band .eyebrow{ color:rgba(255,255,255,.5); }
.parallax-band .quote{ color:#fff; }
.parallax-band .quote-attr{ color:rgba(255,255,255,.5); }
.parallax-band .stat .figure{ color:#fff; }
.parallax-band .stat p{ color:rgba(255,255,255,.6); }

/* --- framed image that drifts and settles --- */
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--soft-2);
  aspect-ratio:4/3;
}
.media-frame.tall{ aspect-ratio:3/4; }
.media-frame.wide{ aspect-ratio:16/9; }
.media-frame .mf-par{
  position:absolute; left:0; right:0; top:-10%; bottom:-10%;
  will-change:transform;
}
.media-frame .mf-img{
  position:absolute; inset:0;
  transform:scale(1.16);
  transition:transform 1.6s var(--ease);
}
.media-frame.in-view .mf-img{ transform:scale(1); }
.media-frame .mf-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 24px;
  font-size:.78rem; letter-spacing:.02em; color:#fff;
  background:linear-gradient(to top, rgba(33,33,33,.72), rgba(33,33,33,0));
}

/* image on a news/blog card */
.card-media{
  height:180px; border-radius:12px; margin-bottom:22px;
  background:var(--soft-2);
  overflow:hidden; position:relative;
}
.card-media .ph{ position:absolute; inset:0; transition:transform 1.1s var(--ease); }
.card:hover .card-media .ph{ transform:scale(1.06); }

/* ---------- News: clickable card + article body ---------- */
a.haber-karti{ display:block; color:inherit; }
a.haber-karti h3{ transition:opacity .35s var(--ease); }
a.haber-karti:hover h3{ opacity:.68; }

.yazi{ max-width:720px; }
.yazi p{ font-size:1.06rem; line-height:1.85; color:var(--ink-soft); margin:0 0 1.5rem; }
.yazi p:last-child{ margin-bottom:0; }
.yazi-alt{
  max-width:720px; margin-top:clamp(36px,4vw,56px);
  padding-top:28px; border-top:1px solid var(--line);
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:calc(var(--section-pad) + 46px) 0 var(--section-pad); }
.page-hero h1{ max-width:16ch; }
.breadcrumb{ font-size:.78rem; color:var(--muted-light); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--ink); }

/* ---------- Sections ---------- */
section{ padding:var(--section-pad) 0; }
.section-soft{ background:var(--soft); }
.section-dark{ background:var(--ink); color:var(--white); }
.section-dark h1,.section-dark h2,.section-dark h3{ color:var(--white); }
.section-dark p{ color:rgba(255,255,255,.72); }
.section-dark .eyebrow{ color:rgba(255,255,255,.45); }

.section-head{ max-width:740px; margin-bottom:clamp(40px,5vw,64px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2 + .lede{ margin-top:20px; }

.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,80px); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:28px; } }

/* ---------- Grid + cards ---------- */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 30px;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.card .num{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  color:var(--muted-light); margin-bottom:18px;
}
.card h3{ margin-bottom:10px; }
.card p{ color:var(--muted); font-size:.92rem; margin:0; line-height:1.7; }
.section-soft .card{ background:var(--white); }
.section-dark .card{ background:#2A2A2A; border-color:#383838; }
.section-dark .card p{ color:rgba(255,255,255,.65); }
.section-dark .card .num{ color:rgba(255,255,255,.4); }

/* pillar row */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.pillar{ padding:40px 34px 40px 0; border-right:1px solid var(--line); }
.pillar:last-child{ border-right:none; padding-right:0; }
.pillar:not(:first-child){ padding-left:34px; }
.pillar .num{ display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; color:var(--muted-light); margin-bottom:14px; }
.pillar h3{ margin-bottom:10px; }
.pillar p{ color:var(--muted); font-size:.92rem; margin:0; }
@media (max-width:820px){
  .pillars{ grid-template-columns:1fr; }
  .pillar{ border-right:none; border-bottom:1px solid var(--line); padding:30px 0; }
  .pillar:not(:first-child){ padding-left:0; }
  .pillar:last-child{ border-bottom:none; }
}

/* member cards */
.member-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.member-card:hover{ transform:translateY(-5px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.member-mark{
  width:46px; height:46px; border-radius:12px;
  background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  margin-bottom:22px;
}
.member-card h3{ margin-bottom:6px; }
.member-card p{ color:var(--muted); font-size:.86rem; margin:0; }

/* quote */
.quote{
  font-size:clamp(1.3rem,2.6vw,2.1rem);
  font-weight:500; letter-spacing:-.03em; line-height:1.32;
  max-width:900px; margin:0;
}
.quote-attr{ margin-top:26px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-light); }
.section-dark .quote-attr{ color:rgba(255,255,255,.45); }

/* stat strip */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:700px){ .stats{ grid-template-columns:1fr; } }
.stat .figure{ font-size:clamp(2.4rem,4.6vw,3.4rem); font-weight:600; letter-spacing:-.04em; line-height:1; margin-bottom:12px; }
.stat p{ color:var(--muted); font-size:.9rem; margin:0; }
.section-dark .stat p{ color:rgba(255,255,255,.6); }

/* accordion */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item:first-child{ border-top:1px solid var(--line); }
.accordion-trigger{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:28px 4px; display:flex; align-items:center; justify-content:space-between; gap:28px;
  font-family:"Poppins",sans-serif; font-size:1.02rem; font-weight:500;
  letter-spacing:-.02em; color:var(--ink); line-height:1.4;
}
.accordion-trigger .plus{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line-strong); position:relative;
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.accordion-trigger .plus::before,.accordion-trigger .plus::after{
  content:""; position:absolute; background:var(--ink); transition:background .45s var(--ease);
}
.accordion-trigger .plus::before{ left:9px; right:9px; top:14px; height:1px; }
.accordion-trigger .plus::after{ top:9px; bottom:9px; left:14px; width:1px; }
.accordion-item.is-open .accordion-trigger .plus{ transform:rotate(45deg); background:var(--ink); border-color:var(--ink); }
.accordion-item.is-open .accordion-trigger .plus::before,
.accordion-item.is-open .accordion-trigger .plus::after{ background:#fff; }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.accordion-panel-inner{ padding:0 60px 30px 4px; color:var(--muted); font-size:.94rem; line-height:1.75; }

/* tabs */
.tabs-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(32px,4vw,52px); }
.tab-btn{
  padding:11px 22px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--white);
  font-size:.84rem; font-weight:450; color:var(--muted); cursor:pointer;
  transition:all .35s var(--ease);
}
.tab-btn:hover{ border-color:var(--line-strong); color:var(--ink); }
.tab-btn.is-active{ background:var(--ink); color:var(--white); border-color:var(--ink); font-weight:500; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fadeUp .55s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }

/* form */
.form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(28px,4vw,44px); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.78rem; font-weight:500; color:var(--muted); letter-spacing:.01em; }
.field input,.field select,.field textarea{
  font-family:"Poppins",sans-serif; font-size:.92rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line-strong); border-radius:12px;
  padding:14px 16px; outline:none;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-light); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ink); box-shadow:0 0 0 3px rgba(33,33,33,.07);
}
.field textarea{ resize:vertical; min-height:118px; }
.form-note{ font-size:.8rem; color:var(--muted); margin-top:16px; }

/* info rows */
.info-list{ display:flex; flex-direction:column; }
.info-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.info-row:first-child{ border-top:1px solid var(--line); }
.info-row .label{ color:var(--muted); font-size:.85rem; }
.info-row .value{ font-weight:500; font-size:.92rem; text-align:right; }

/* sosyal medya ikon satırı */
.sosyal-row{ align-items:center; }
.sosyal{ display:inline-flex; gap:10px; }
.sosyal-ikon{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.sosyal-ikon svg{ width:19px; height:19px; }
.sosyal-ikon:hover{
  background:var(--ink); color:var(--white);
  border-color:var(--ink); transform:translateY(-3px);
}
.sosyal-ikon:active{ transform:translateY(-1px) scale(.96); }

/* empty state */
.empty-card{
  border:1px dashed var(--line-strong); border-radius:var(--radius);
  padding:clamp(48px,7vw,84px) 32px; text-align:center;
}
.empty-card h2{ margin-bottom:14px; }
.empty-card p{ color:var(--muted); max-width:520px; margin:0 auto; }

/* CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:18ch; margin:0 auto 18px; }
.cta-band p{ max-width:520px; margin:0 auto 34px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--white); padding:var(--section-pad) 0 36px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:clamp(48px,6vw,80px); }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.site-footer .brand img{ height:28px; margin-bottom:22px; }
.site-footer p{ color:rgba(255,255,255,.6); font-size:.9rem; max-width:300px; line-height:1.7; }
.site-footer h3{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:20px; }
.footer-links{ display:flex; flex-direction:column; gap:13px; }
.footer-links a{ color:rgba(255,255,255,.78); font-size:.9rem; transition:color .3s ease; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.42); font-size:.78rem;
}
.footer-ortakfikir{
  display:inline-flex; align-items:center;
  opacity:.6; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.footer-ortakfikir img{ height:30px; width:auto; display:block; }
.footer-ortakfikir:hover{ opacity:1; transform:translateY(-2px); }

/* =========================================================
   DECO — line-art motifs in the empty margins
   The wrapper ignores the pointer so it can never block text;
   only the drawing itself is hoverable.
   ========================================================= */
section{ position:relative; }

.deco{
  position:absolute;
  z-index:0;
  pointer-events:none;
  color:var(--ink);
  opacity:0;
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease);
}
.deco .deco-svg{
  pointer-events:auto;
  width:100%; height:auto;
  overflow:visible;
}

/* entrances — they arrive from beyond the page edge */
.deco-right{ right:calc(var(--gutter) * -1); transform:translateX(70px); }
.deco-left{ left:calc(var(--gutter) * -1); transform:translateX(-70px); }
.deco-in{ transform:translateY(30px); }
.deco.in-view{ opacity:1; transform:none; }

/* --- bezier (pen tool) ---
   Hover, "kalem aracı noktaları aktifleşiyor" hissi verir: hiçbir eleman
   yerinden oynamaz, yalnızca vurgulanır. Kontrol noktaları kendi
   merkezlerinde büyür (transform-box: fill-box), kollar belirginleşir,
   düğüm kareleri dolar. Böylece eğriyle kopukluk oluşmaz. */
.d-bezier .curve{ transition:stroke-width .6s var(--ease); }
.d-bezier .h,
.d-bezier .ctrl,
.d-bezier .node{ transition:opacity .5s var(--ease), fill .5s var(--ease), transform .5s var(--ease); }
.d-bezier .ctrl{ transform-box:fill-box; transform-origin:center; }

.d-bezier:hover .curve{ stroke-width:2; }
.d-bezier:hover .h{ opacity:.75; }
.d-bezier:hover .ctrl{ transform:scale(1.45); }
.d-bezier:hover .node{ fill:var(--ink); }

/* --- halftone dots (radii driven by JS on hover) --- */
.d-dots circle{ transition:r .45s var(--ease), opacity .45s var(--ease); }

/* --- waveform --- */
.d-wave rect{
  transition:transform .7s var(--ease), opacity .5s var(--ease);
  transform-origin:center;
  transform-box:fill-box;
}
.d-wave:hover rect{
  transform:scaleY(1.45);
  opacity:.85;
  transition-delay:calc(var(--b,0) * 26ms);
}

/* --- registration mark --- */
.d-reg .ring,
.d-reg .bk{ transition:transform .9s var(--ease), opacity .6s var(--ease); }
.d-reg{ transform-box:view-box; }
.d-reg:hover .ring{ transform:rotate(90deg); transform-origin:70px 70px; }
.d-reg:hover .bk{ opacity:1; }
.d-reg:hover .tl{ transform:translate(-7px,-7px); }
.d-reg:hover .tr{ transform:translate(7px,-7px); }
.d-reg:hover .br{ transform:translate(7px,7px); }
.d-reg:hover .bl{ transform:translate(-7px,7px); }

/* --- layout grid --- */
.d-grid .g{ transition:transform .75s var(--ease), opacity .6s var(--ease); }
.d-grid:hover .g1{ transform:translateX(8px); }
.d-grid:hover .g3{ transform:translateY(-7px); }
.d-grid:hover .g4{ transform:translateY(7px); opacity:.24; }
.d-grid:hover .g5{ transform:translateX(7px); }
.d-grid:hover .g6{ transform:translate(7px,5px); opacity:.34; }

/* Decoration is a bonus, not content — it steps aside on small screens
   where there is no empty margin to fill. */
@media (max-width:1100px){ .deco{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .deco{ opacity:1; transform:none; }
}

/* ---------- Motion ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 80ms);
}
[data-reveal].in-view{ opacity:1; transform:none; }

/* The clipping box is padded top and bottom so descenders (g, ş, ğ, ç, j),
   commas and Turkish diacritics are never cut off; negative margins keep
   the visual line rhythm unchanged. */
.split-line{
  display:block; overflow:hidden;
  padding-top:.14em; padding-bottom:.26em;
  margin-top:-.14em; margin-bottom:-.26em;
}
.split-line > span{
  display:block;
  transform:translateY(140%);
  transition:transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms);
}
.split-line.in-view > span{ transform:translateY(0); }

.split-word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-top:.14em; padding-bottom:.26em;
  margin-top:-.14em; margin-bottom:-.26em;
}
.split-word > span{
  display:inline-block;
  transform:translateY(140%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.split-word.in-view > span{ transform:translateY(0); }

/* focus */
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
.site-header.on-dark :focus-visible{ outline-color:#fff; }
::selection{ background:var(--ink); color:#fff; }