/* Kerim Bölten — A2 "İki Perde"
   Fontlar tools/fetch_fonts.py ile self-host edilir; bu dosya hiçbir
   uzak font sunucusuna başvurmaz. */

/* FONTS:START */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin.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;
}
/* FONTS:END */

:root{
  --ink:#151B24;--ink-2:#1D2531;--stone:#F5F1E9;--card:#FFFFFF;
  --text:#1A1F27;--soft:#61666E;--rule:#DFD9CD;
  --brass:#B08D4F;--brass-text:#7E612C;--brass-lt:#C9A961;
  --display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --wrap:1360px;--gut:48px;--nav-height:82px;--ease:cubic-bezier(.22,.7,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 24px)}
body{margin:0;background:var(--stone);color:var(--text);font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
::selection{background:var(--brass-lt);color:var(--ink)}
img{max-width:100%;display:block}a{color:inherit}button,input,textarea{font:inherit}
h1,h2,h3{overflow-wrap:anywhere;font-family:var(--display);font-weight:500;letter-spacing:-.04em;font-variant-numeric:lining-nums;text-wrap:balance}
h1{font-size:clamp(44px,7vw,104px);line-height:1;margin:0}
h2{font-size:clamp(34px,4.2vw,60px);line-height:1.08;margin:0}
h3{font-size:clamp(24px,2.4vw,34px);line-height:1.18;margin:0}
p{margin:0 0 1.15em}.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);width:100%}
.kicker{font:500 12px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)}
.on-dark{background:var(--ink);color:var(--stone)}.on-dark .kicker{color:var(--brass-lt)}
.rule-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  padding-bottom:26px;margin-bottom:38px;border-bottom:1px solid var(--rule)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;
  padding:15px 24px;border:1px solid var(--ink);background:var(--ink);color:var(--stone);
  text-decoration:none;font:500 12px/1.6 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s}
.btn::after{content:"↗";font-size:20px;line-height:1;transition:transform .3s}
.btn:hover{background:var(--ink-2)}.btn:hover::after{transform:translate(2px,-2px)}
.on-dark .btn{background:var(--stone);border-color:var(--stone);color:var(--ink)}
.on-dark .btn:hover{background:#fff;border-color:#fff}
.btn--ghost,.on-dark .btn--ghost{background:transparent;border-color:var(--brass);color:inherit}
.arrow-link{display:inline-flex;align-items:center;gap:24px;text-decoration:none;font:500 12px/1.6 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--brass);padding:10px 0}
.arrow-link::after{content:"↗";font-size:20px;color:var(--brass-text);transition:transform .3s}
.arrow-link:hover::after{transform:translate(3px,-3px)}
.skip{position:absolute;left:-9999px;top:0;padding:12px 18px;z-index:99;background:var(--ink);color:var(--stone)}
.skip:focus{left:12px;top:12px}:focus-visible{outline:2px solid var(--brass);outline-offset:5px}

/* Wordmark + navigation. Without JS the full menu stays available. */
nav{position:sticky;top:0;z-index:50;background:#151b24f5;color:var(--stone);border-bottom:1px solid #ffffff26;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 24px #00000014}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--nav-height)}
.mark{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-decoration:none;
  font:500 23px/1.15 var(--display);letter-spacing:-.02em;white-space:nowrap}
.mark small{font:400 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#b9bec5}
.mark-name{display:block}
.mark i{font-style:normal;color:var(--brass-lt)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{padding:10px 0;text-decoration:none;font:500 12px/1.5 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:#c4c7cb;position:relative}
.nav-links a::after{content:"";position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--brass-lt);
  transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover,.nav-links a.is-current{color:#fff}
.nav-links a:hover::after,.nav-links a.is-current::after{transform:scaleX(1)}
.nav-links .nav-portal{border-left:1px solid #ffffff26;padding-left:26px}
.nav-links .nav-portal::after{left:26px}.nav-links .nav-lang{color:var(--brass-lt);border:1px solid #c9a96166;padding:9px 11px}
.nav-toggle{display:none;color:var(--stone)}

/* Personal atlas: a typographic masthead above a three-part portrait stage. */
.curtain{position:relative;overflow:hidden;background:var(--ink);color:var(--stone)}
.hero{position:relative;isolation:isolate;background:#131a23;overflow:hidden;
  min-height:calc(100svh - var(--nav-height));display:flex;flex-direction:column}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,#34464d66,transparent 56%),linear-gradient(110deg,#151b24,#131a23 55%,#19232c)}
/* Desen iki fısıltıdan ibaret: koridor haritasının koordinat ızgarası ve kâğıt
   tanesi. İkisi de maskeyle kenarlara doğru söner; "desenli zemin" gibi
   okunmamalı, yalnızca boşluğun ölü düzlük olmasını engellemeli. */
.hero-atmosphere::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,#f5f1e90a 0 1px,transparent 1px 96px),
                   repeating-linear-gradient(to bottom,#f5f1e90a 0 1px,transparent 1px 96px);
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 46% 42%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 70% at 46% 42%,#000 20%,transparent 78%)}
.hero-atmosphere::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
.hero-shell{padding-top:clamp(14px,2.4vh,26px);padding-bottom:clamp(6px,1.4vh,14px);
  flex:1;display:flex;flex-direction:column}
.hero .hero-name{position:relative;z-index:3;display:flex;justify-content:flex-start;gap:.26em;white-space:nowrap;font-size:clamp(52px,min(9.3vw,15vh),131px);font-weight:500;line-height:1.22;padding-top:.06em;letter-spacing:-.065em;text-transform:uppercase;margin:10px 0 0;overflow-wrap:normal}
.name-line{display:block;animation:atlas-name 1.15s var(--ease) both}.name-surname{animation-delay:.12s}.name-stop{color:var(--brass-lt)}
/* Asimetrik kurgu: isim sol üstte, portre sağda, metin ve şehirler solda.
   Portre iki satırı birden kaplar ve ismin sağındaki boşluğa doğru yükselir. */
.hero-stage{position:relative;flex:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  grid-template-areas:"story portrait" "reach portrait";
  grid-template-rows:auto 1fr;
  column-gap:clamp(32px,5vw,76px);row-gap:0;align-items:start;margin-top:-14px}
.hero-story{grid-area:story}
/* Şehirler sütunun DİBİNE yaslanır: ortada yüzünce ada gibi duruyorlardı,
   şimdi portrenin alt hizasıyla aynı çizgiye oturuyorlar. */
.hero-reach{grid-area:reach;align-self:end;position:relative;z-index:3;
  padding:0 0 clamp(6px,1.4vh,16px);animation:atlas-in 1s .4s var(--ease) both}
.hero-portrait-panel{grid-area:portrait;align-self:end;margin-top:clamp(-92px,-7vh,-28px)}
.hero-story{position:relative;z-index:3;padding:0;align-self:center;animation:atlas-in 1s .25s var(--ease) both}
.hero-story-rule{display:block;width:64px;height:1px;background:var(--brass-lt);margin-bottom:20px;
  opacity:.85}
.hero-lead{font-size:clamp(17px,1.55vw,22px);line-height:1.62;color:#eaedf0;max-width:31ch;
  margin:0;text-wrap:balance;letter-spacing:.004em;font-weight:300}
.hero-lead-plain{font-size:14px;line-height:1.7;letter-spacing:.01em;color:var(--stone);max-width:31ch;
  margin:0 0 14px;font-weight:400}
.hero-lead-plain+.hero-lead{font-size:15px;color:#aab4be;margin-bottom:0}
.hero-portal:hover{color:var(--stone);border-color:#c9a96166}.hero-portrait-panel{position:relative;min-width:0;align-self:end;padding-top:4px;isolation:isolate}
.portrait{position:relative;width:min(100%,58vh);margin-left:auto;margin-right:0;aspect-ratio:1/1.05;overflow:hidden;border-radius:46% 46% 0 0;background:#1d2831;animation:atlas-portrait 1.4s .1s var(--ease) both}
.portrait-img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:saturate(.65) contrast(1.04)}
.portrait-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#131a23 0%,#131a2355 20%,transparent 45%),linear-gradient(90deg,#131a2366,transparent 20%,transparent 80%,#131a2366)}
.portrait-orbit{position:absolute;z-index:-1;width:130%;height:auto;left:-15%;top:-6%;overflow:visible;fill:none;stroke:#c9a96166;stroke-width:1;pointer-events:none;animation:atlas-orbit 1.7s .15s var(--ease) both}
.portrait-orbit path{stroke:#c9a9611f;stroke-dasharray:2 8}.portrait-orbit circle{fill:var(--brass-lt);stroke:none}
.portrait-monogram{position:absolute;right:-.15em;bottom:28px;z-index:2;font:500 clamp(55px,7vw,96px)/1 var(--display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px #f5f1e957;pointer-events:none;animation:atlas-in 1s .6s var(--ease) both}
.hero-reach-title{font-size:12.5px;line-height:1.55;color:var(--brass-lt);max-width:30ch;margin:0 0 10px}
.hero-cities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(14px,2vw,30px)}.hero-city{display:flex;align-items:baseline;gap:10px;padding:clamp(9px,1.6vh,14px) 0;
  border-top:1px solid #f5f1e926}
.hero-city .city-index{font-size:10px;color:#c9a96180;font-variant-numeric:tabular-nums}
.hero-city>div{min-width:0;display:flex;flex-direction:column;gap:7px}
.hero-city>div>span{font-size:10px;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;
  color:#8e9aa6;white-space:nowrap}
.hero-city b{font-size:clamp(18px,1.7vw,23px);font-weight:400;line-height:1.2;letter-spacing:-.035em;color:var(--stone)}
.hero-base{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0 18px;border-top:1px solid #f5f1e926}
.hero-discover{display:flex;align-items:center;gap:20px;min-height:44px;font-size:12px;text-decoration:none;color:#d3d9de}
.hero-discover>span:last-child{display:grid;place-items:center;width:36px;height:36px;border:1px solid #c9a96177;border-radius:50%;font-size:20px;color:var(--brass-lt);transition:transform .3s}
.hero-discover:hover>span:last-child{transform:translateY(4px)}
/* klip payı: inset(0) tam kutuyu keser ve İ/Ö işaretlerinin üstünü alır */
@keyframes atlas-name{from{opacity:0;transform:translateY(25px);clip-path:inset(-12% -4% 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(-12% -4% -6% 0)}}
@keyframes atlas-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes atlas-portrait{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes atlas-orbit{from{opacity:0;transform:rotate(-12deg) scale(.94)}to{opacity:1;transform:none}}

/* Cream editorial spread: statement, prose and facts in one chapter. */
.intro{padding:88px 0 64px}.intro-in{display:grid;grid-template-columns:1.05fr 1fr;gap:100px;align-items:center}
.intro-heading .kicker{display:block;margin-bottom:22px}.intro-heading h2{font-size:clamp(34px,3.5vw,48px);max-width:16ch}
.intro-heading em{color:var(--brass-text);font-style:normal;font-weight:500}.intro-main{padding-top:30px}
.intro-main p{font-size:15px;line-height:1.9;color:var(--soft);max-width:55ch}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;border-top:1px solid var(--rule);margin-top:54px;padding-top:30px}
.stat{display:flex;align-items:center;gap:20px}.stat b{font:500 clamp(40px,4.8vw,66px)/1 var(--display);letter-spacing:-.04em;color:var(--brass-text)}
.stat span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);max-width:16ch}

/* An architectural image gives the practice a distinct, recognisable silhouette. */
.practice-showcase{padding:48px 0 90px;background:#eee9df;border-top:1px solid var(--rule)}
.practice-composition{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:stretch}
.practice-image{position:relative;overflow:hidden;margin:0;min-height:550px;background:var(--ink)}
.practice-image img{width:100%;height:100%;position:absolute;object-fit:cover;filter:grayscale(1) brightness(.64)}
.practice-image::after{content:"";position:absolute;inset:18px;border:1px solid #f5f1e94d;pointer-events:none}
.practice-image-mark{position:absolute;bottom:24px;left:32px;font:500 88px/1 var(--display);letter-spacing:-.07em;color:var(--stone)}
.practice-list{display:flex;flex-direction:column;justify-content:center}
.practice-row{position:relative;display:grid;grid-template-columns:28px 1fr 34px;gap:20px;padding:30px 0;border-bottom:1px solid #cec6b9}
.practice-row:first-child{padding-top:12px}.area-n{font:500 13px/1.6 var(--display);color:var(--brass-text);letter-spacing:.06em}
.practice-row .area-n{padding-top:7px}.practice-row h3{font-size:clamp(25px,2.6vw,35px);margin:0 0 13px}
.practice-row h3 a{text-decoration:none}.practice-row h3 a::after{content:"";position:absolute;inset:0}
.practice-row p{font-size:14px;color:var(--soft);line-height:1.8;margin:0;max-width:47ch}
.practice-arrow{display:grid;place-items:center;align-self:start;margin-top:4px;width:34px;height:34px;border:1px solid #c5b9a4;border-radius:50%;font-size:20px;transition:background .3s,color .3s,transform .3s}
.practice-row:hover .practice-arrow,.practice-row:focus-within .practice-arrow{background:var(--ink);color:var(--stone);transform:rotate(5deg)}
.practice-row:focus-within{outline:2px solid var(--brass);outline-offset:5px}.areas-foot{margin-top:26px}

/* The closing behaves like the reverse of a personal calling card. */
.closing{position:relative;padding:72px 0 64px;overflow:hidden;border-bottom:1px solid #ffffff1a}
.closing::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 100%,#b08d4f12,transparent 60%)}
.closing-in{position:relative;display:grid;grid-template-columns:1fr auto;gap:24px 70px;align-items:center}
.closing-label{grid-column:1/-1}.closing h2{font-size:clamp(38px,4.7vw,64px);max-width:19ch}
.closing-text{margin:24px 0 0;color:#b8bdc4;font-size:14px;max-width:58ch}
.closing-link{display:flex;flex-direction:column;align-items:center;gap:18px;text-decoration:none;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.closing-arrow{display:grid;place-items:center;width:116px;height:116px;border:1px solid #c9a96188;border-radius:50%;font:400 60px/1 var(--sans);color:var(--brass-lt);transition:background .4s,color .4s,transform .4s}
.closing-link:hover .closing-arrow{background:var(--stone);color:var(--ink);transform:rotate(7deg)}
footer{background:var(--ink);color:#b7bdc5;padding:44px 0 24px;font-size:12px}
footer a{text-decoration:none;border-bottom:1px solid #c9a96155}footer a:hover{color:#fff}
.foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding-bottom:32px}
.foot-name{font:400 30px/1.1 var(--display);color:var(--stone);margin-bottom:10px}.foot-role{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-lt)}
.foot-office{margin-top:6px;max-width:28ch}.foot-base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:11px;color:#a5adb7;padding-top:20px;position:relative}
.foot-base::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:#ffffff1a}

/* Inner-page title: generous display type, lead aligned on the same baseline. */
.pagehead{padding:64px 0 72px;position:relative}
.pagehead .wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px 70px;align-items:end}
.pagehead .kicker{grid-column:1/-1}.pagehead h1{font-size:clamp(48px,6vw,84px);margin:0}
.pagehead-lead{font-size:14px;line-height:1.85;color:#c4c7cb;max-width:55ch;margin:0;padding-left:24px;border-left:1px solid #c9a96166}
.pagehead--slim .wrap{display:block}.pagehead--slim h1{font-size:clamp(42px,5vw,72px);margin-bottom:24px}
.pagehead--slim .pagehead-lead{padding:0;border:0;color:var(--brass-lt);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.bio{padding:72px 0 0}.bio-in{display:grid;grid-template-columns:.78fr 1.22fr;gap:80px;align-items:start}
.bio-side{position:sticky;top:calc(var(--nav-height) + 24px);padding:0 20px 20px 0}.bio-figure{position:relative;margin:0}
.bio-figure::after{content:"";position:absolute;inset:20px -20px -20px 20px;border:1px solid var(--brass);z-index:-1}
.bio-figure img{width:100%;height:560px;object-fit:cover;filter:grayscale(1)}
.bio-main p{font-size:15px;line-height:1.95;color:var(--soft);max-width:62ch}
.bio-main p:first-child{font:500 clamp(23px,2.3vw,30px)/1.5 var(--display);color:var(--text);margin-bottom:28px}
.creds{padding:64px 0}.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.cred{padding:32px;background:#ffffff55}.cred+.cred{border-left:1px solid var(--rule)}
.cred-n{display:block;font:400 12px/1 var(--display);color:var(--brass-text);margin-bottom:30px}
.cred h3{font-size:27px;margin-bottom:16px}.cred p{color:var(--soft);font-size:14px;line-height:1.85;margin:0}
.marks{padding:55px 0 70px;background:#eae4d8;border-top:1px solid var(--rule)}
.mark-list{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.mark-item{position:relative;padding:0 30px 0 0}.mark-item::before{content:"";position:absolute;left:0;right:0;top:79px;height:1px;background:#c5b9a4}
.mark-item::after{content:"";position:absolute;left:0;top:76px;width:7px;height:7px;border-radius:50%;background:var(--brass-text)}
.mark-year{display:block;font:500 53px/1.1 var(--display);letter-spacing:-.04em;color:var(--brass-text);margin-bottom:55px}
.mark-body h3{font-size:24px;margin-bottom:14px}.mark-body p{font-size:14px;line-height:1.85;color:var(--soft);margin:0}

/* Practice: large indexes, deep-dive spread, clear three-step method. */
.areas--page{padding:64px 0 0}.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule)}
.area{position:relative;padding:32px;background:#ffffff66;scroll-margin-top:16px}.area+.area{border-left:1px solid var(--rule)}
.area .area-n{display:block;font-size:54px;letter-spacing:-.04em;margin-bottom:36px;line-height:1}
.area h3{margin-bottom:20px;font-size:30px}.area p{font-size:14px;line-height:1.85;color:var(--soft);margin:0}
.area:target{outline:2px solid var(--brass);outline-offset:4px}
.deep{padding:70px 0}.deep-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.deep-head h2{margin-bottom:20px;max-width:14ch}.deep-lead{color:var(--soft);font-size:14px;max-width:40ch;margin:0}
.deep-grid{display:grid;gap:30px}.deep-item{border-left:1px solid var(--brass);padding:0 0 0 28px}
.deep-item h3{font-size:28px;margin-bottom:14px}.deep-item p{color:var(--soft);font-size:14px;line-height:1.85;margin:0;max-width:58ch}
.solutions{padding:60px 0;background:#eae4d8}.solutions-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.solutions-figure{margin:0;overflow:hidden}.solutions-figure img{width:100%;height:550px;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.solutions-text h2{margin-bottom:20px;max-width:16ch}.solutions-text p{font-size:14px;line-height:1.85;color:var(--soft);max-width:52ch}
.solutions-list{list-style:none;margin:28px 0 0;padding:0}.solutions-list li{border-top:1px solid #ccc2b1;padding:16px 0 16px 28px;position:relative;font-size:14px}
.solutions-list li::before{content:"↗";position:absolute;left:0;top:15px;color:var(--brass-text)}
.method{padding:64px 0 72px}.method-lead{color:var(--soft);font-size:14px;max-width:56ch;margin:0 0 32px}
.step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{border-top:1px solid var(--brass);padding-top:26px}.step-n{display:block;font:500 46px/1 var(--display);color:var(--brass-text);margin-bottom:26px}
.step h3{font-size:26px;margin-bottom:16px}.step p{color:var(--soft);font-size:14px;line-height:1.85;margin:0}

/* Contact as a physical card and a calm writing surface. */
.contact{padding:64px 0 72px}.contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}
.contact-direct{background:var(--ink);color:var(--stone);padding:36px 36px 0;overflow:hidden}
.contact-direct h2,.contact-form h2{font-size:36px;margin-bottom:26px}.channels{margin:0}
.channels dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);padding-top:18px;border-top:1px solid #ffffff26}
.channels dd{margin:6px 0 20px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}.channels dd a{text-decoration:none;border-bottom:1px solid #c9a96166}.channels dd a:hover{color:#fff}
.contact-image{margin:30px -36px 0;height:200px;position:relative}.contact-image img{width:100%;height:100%;object-fit:cover;object-position:center 44%;filter:grayscale(1) brightness(.65)}
.contact-image::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ink),transparent 60%)}
.contact-form{background:#ffffff80;border:1px solid var(--rule);padding:36px 40px}
.form-note{color:var(--soft);font-size:14px;margin-bottom:30px;max-width:46ch}.field{margin:0 0 24px}
.field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}.req{color:var(--brass-text)}
.field input,.field textarea{width:100%;background:#ffffff66;border:0;border-bottom:1px solid #bdb5a7;border-radius:0;
  padding:12px 10px;font-size:16px;color:var(--text);transition:border-color .3s,background .3s}
.field textarea{resize:vertical;min-height:140px}.field input:focus,.field textarea:focus{outline:2px solid var(--brass);outline-offset:2px;background:#fff}
.form-actions{margin:28px 0 0}button.btn{cursor:pointer}button.btn[disabled]{opacity:.6;cursor:progress}
.form-status{min-height:1.4em;margin:16px 0 0;font-size:14px}.form-status.is-ok{color:#2F5D3A}.form-status.is-err{color:#8A3A2E}
.form-privacy{margin:16px 0 0;font-size:12px;color:var(--soft);max-width:52ch}.form-privacy a{color:var(--text)}
.legal{max-width:850px;padding-top:62px;padding-bottom:72px}.legal-block{margin-bottom:40px}.legal-block h2{font-size:30px;margin-bottom:16px}.legal-block p{font-size:15px;line-height:1.9;color:var(--soft);margin:0}

/* Motion progressively enhances visible content; a blocked script hides nothing. */
.reveal{opacity:1;transform:none}
.reveal.is-pending{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .75s var(--ease) var(--d,0ms),transform .75s var(--ease) var(--d,0ms)}

@media(max-width:1100px){
  :root{--gut:32px}.nav-links{gap:20px}.nav-links .nav-portal{padding-left:18px}.nav-links .nav-portal::after{left:18px}
  .intro-in,.practice-composition,.bio-in,.deep-in,.solutions-in{gap:46px}.contact-in{gap:28px}
  .contact-direct{padding:28px 26px 0}.contact-image{margin-left:-26px;margin-right:-26px}.contact-form{padding:28px}
}
@media(max-width:900px){
  :root{--nav-height:76px}.mark{font-size:21px}.mark small{font-size:11px;letter-spacing:.04em}
  nav:not(.is-enhanced){position:relative}
  nav .wrap{min-height:var(--nav-height);flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  .nav-links{width:100%;flex-wrap:wrap;gap:8px 22px}
  nav.is-enhanced .nav-links{max-height:calc(100dvh - var(--nav-height));overflow-y:auto;overscroll-behavior:contain;display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);padding:18px var(--gut) 26px;border-bottom:1px solid #c9a96166;box-shadow:0 20px 30px #0003}
  nav.is-enhanced.is-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0}
  nav.is-enhanced .nav-links a{padding:15px 0;border-left:0;border-bottom:1px solid #ffffff1a}
  nav.is-enhanced .nav-links a::after{display:none}
  nav.is-enhanced .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;background:none;border:1px solid #ffffff33;padding:0;cursor:pointer}
  .nav-toggle span{width:20px;height:1px;background:currentColor;transition:transform .3s}
  nav.is-open .nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  nav.is-open .nav-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .intro-in{gap:38px}.intro-heading h2{font-size:44px}.intro-main p{font-size:14px}.stat{gap:12px}.stat span{font-size:11px}
  .practice-composition{grid-template-columns:.75fr 1.25fr;gap:32px}.practice-row{gap:12px;grid-template-columns:22px 1fr 30px}.practice-row h3{font-size:28px}
  .pagehead .wrap{gap:26px;grid-template-columns:1fr}.pagehead-lead{max-width:70ch;padding:0;border:0}.pagehead h1{font-size:64px}
  .bio-in{grid-template-columns:.7fr 1.3fr;gap:40px}.bio-figure img{height:450px}
  .cred{padding:26px 22px}.cred h3{font-size:25px}.mark-list{grid-template-columns:repeat(2,1fr);gap:44px 0}
  .area{padding:26px 22px}.area h3{font-size:26px}.area p{font-size:14px}
  .deep-in,.solutions-in{gap:36px}.solutions-figure img{height:500px}.step-list{gap:28px}
  .contact-in{grid-template-columns:1fr 1.2fr;gap:24px}.contact-direct{padding:26px 22px 0}.contact-image{margin-left:-22px;margin-right:-22px}
  .contact-form{padding:26px 22px}.contact-direct h2,.contact-form h2{font-size:30px}
}
@media(max-width:700px){
  :root{--gut:24px}.intro-in,.bio-in,.deep-in,.solutions-in,.contact-in{grid-template-columns:1fr}
  .intro{padding:58px 0 46px}.intro-in{gap:24px}.intro-heading h2{font-size:clamp(40px,7vw,54px);max-width:20ch}.intro-main{padding:0}
  .intro-main p{font-size:15px}.stat-grid{gap:18px;margin-top:32px;padding-top:26px}.stat{align-items:flex-start;flex-direction:column;gap:12px}.stat b{font-size:46px}.stat span{font-size:11px;max-width:17ch}
  .practice-showcase{padding:40px 0 54px}.rule-head{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:22px;margin-bottom:28px}
  .practice-composition{grid-template-columns:1fr;gap:26px}.practice-image{min-height:0;height:240px}.practice-image img{object-position:center 42%}.practice-image-mark{font-size:68px;bottom:20px}
  .practice-row{padding:24px 0;gap:16px}.practice-row:first-child{padding-top:0}.practice-row h3{font-size:30px}.practice-row p{font-size:14px}
  .closing{padding:48px 0}.closing-in{gap:24px 28px}.closing h2{font-size:clamp(36px,6vw,48px)}.closing-text{font-size:14px;margin-top:18px}
  .closing-arrow{width:76px;height:76px;font-size:40px}.closing-link{font-size:11px;max-width:100px;gap:14px}
  .foot{grid-template-columns:1fr 1fr;gap:26px}.foot-col:first-child{grid-column:1/-1}.foot-base{font-size:11px;gap:12px 24px}.foot-agency{width:100%}
  .pagehead{padding:44px 0 48px}.pagehead h1{font-size:clamp(40px,8vw,64px)}.pagehead-lead{font-size:14px}
  .bio{padding-top:48px}.bio-side{position:relative;top:auto;max-width:100%;padding:0 12px 12px 0}.bio-figure img{height:330px;object-position:center 40%}.bio-figure::after{inset:12px -12px -12px 12px}
  .bio-main p:first-child{font-size:27px}.creds{padding:42px 0}.cred-grid,.area-grid,.step-list{grid-template-columns:1fr}
  .cred{padding:26px}.cred+.cred,.area+.area{border-left:0;border-top:1px solid var(--rule)}.cred-n{margin-bottom:20px}.cred h3{font-size:29px}
  .marks{padding:40px 0 48px}.mark-item{padding-right:24px}.mark-year{font-size:46px}.mark-body h3{font-size:25px}
  .areas--page{padding-top:42px}.area{padding:28px}.area .area-n{font-size:45px;margin-bottom:24px}.area h3{font-size:32px}.area p{font-size:14px}
  .deep{padding:44px 0}.deep-head h2{max-width:20ch}.deep-lead{max-width:55ch}.deep-item{padding-left:22px}
  .solutions{padding:40px 0}.solutions-figure img{height:320px}.solutions-text h2{max-width:20ch}
  .method{padding:42px 0 50px}.step-list{gap:30px}.step{display:grid;grid-template-columns:48px 1fr;gap:14px 20px}.step-n{grid-row:1/3;margin:0}.step h3{margin:0}.step p{grid-column:2}
  .contact{padding:40px 0 48px}.contact-in{gap:32px}.contact-direct{padding:30px 28px 0}.contact-image{margin-left:-28px;margin-right:-28px;height:180px}.contact-form{padding:30px 26px}
  .legal{padding-top:44px;padding-bottom:44px}.legal-block h2{font-size:28px}
}
@media(max-width:380px){
  :root{--gut:20px}
  .closing-in{grid-template-columns:1fr}.closing-link{flex-direction:row;max-width:none;justify-self:start;gap:20px}.closing-arrow{width:64px;height:64px}
  .mark-list{grid-template-columns:1fr}.mark-item{padding-right:0}.foot{grid-template-columns:1fr}.foot-col:first-child{grid-column:auto}
}
/* Art direction adapts by composition, not by shrinking the desktop stage. */
@media(max-width:1100px){
  .hero-stage{column-gap:38px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .hero-lead{font-size:15px}.hero-cta .btn{padding:14px;gap:12px;font-size:10px}  .nav-links{gap:18px}.nav-links a{font-size:11px;letter-spacing:.04em}
}
@media(max-width:900px){
  .hero-masthead{align-items:flex-start}  .hero .hero-name{font-size:10vw;margin-top:16px;line-height:1.2}
  .hero-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    grid-template-areas:"story portrait" "reach reach";gap:22px 32px;margin-top:2px}
  .hero-portrait-panel{margin-top:0}
  .hero-reach{padding:6px 0 0}.hero-reach-title{max-width:none;margin-bottom:12px}
  .hero-cities{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.hero-city{gap:10px;padding:18px 0 22px}.hero-city b{font-size:23px}
  .hero-story{padding:28px 0}.portrait{max-height:410px}.portrait-orbit{width:120%;left:-10%}.portrait-monogram{font-size:64px;right:0}
  nav.is-enhanced .nav-links a{font-size:13px}.nav-links .nav-lang{align-self:flex-start;padding:12px 0;border:0}
}
@media(max-width:600px){
  .hero-shell{padding-top:20px}.hero-masthead .kicker{font-size:10px;max-width:31ch}  .hero .hero-name{font-size:10.1vw;line-height:1.28;margin:18px 0 8px;letter-spacing:-.06em;gap:.1em}
  .hero-stage{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"portrait" "story" "reach";gap:0}
  .hero-portrait-panel{width:88%;justify-self:center;margin-top:0;padding-top:6px}
  .portrait{width:100%;margin-inline:auto}
  .portrait{aspect-ratio:1/1.02;max-height:390px}.portrait-monogram{font-size:65px;bottom:38px;right:-.12em}
  .portrait-caption{bottom:21px;font-size:11px;padding:0 14px;gap:10px}.portrait-orbit{top:-8%;width:124%;left:-12%}
  .hero-story{padding:22px 0 28px}.hero-story-rule{display:none}.hero-lead{max-width:44ch;font-size:15px;line-height:1.8;margin:0 0 22px}
  .hero-reach{padding:0}.hero-reach-title{font-size:11px;margin:0 0 10px}
  .hero-cities{gap:14px}.hero-city{display:block;padding:15px 0 20px}.hero-city .city-index{display:none}
  .hero-city>div>span{font-size:10px;letter-spacing:0;min-height:32px}.hero-city b{font-size:21px}
  .hero-base{padding:12px 0 18px}.hero-base-mark{display:none}.hero-discover{width:100%;justify-content:space-between}
}
@media(max-width:480px){
  .mark small{display:none}.hero-cta .btn{font-size:11px}.hero-city b{font-size:18px}
  .stat-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .stat{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .stat span{max-width:20ch;text-align:right}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;transition-duration:0s!important}
  .reveal.is-pending{opacity:1;transform:none}.name-line,.portrait,.hero-story,.hero-reach,.portrait-orbit,.portrait-monogram,}


/* ---------------------------------------------------------------- alçak pencere
   Safari pencere modunda görünür yükseklik ~620-720px'e düşüyor; hero o zaman
   kendini toplar. Genişlik sorgusu bunu yakalamaz, yükseklik sorgusu gerekir. */
@media (max-height:760px) and (min-width:1000px){
    .hero .hero-name{margin-top:4px;line-height:1.16}
  .hero-stage{gap:32px;margin-top:-10px}
  .hero-lead-plain{margin-bottom:10px}
  .hero-lead{margin-bottom:16px;font-size:14px;line-height:1.7}
    .hero-reach-title{margin-bottom:8px}
    .portrait-monogram{bottom:18px}
  .hero-base{padding:10px 0 12px}
}
@media (max-height:660px) and (min-width:1000px){
    .hero-masthead   .hero .hero-name{font-size:min(8vw,13vh)}
  .hero-story-rule{margin-bottom:14px}
  .hero-lead{display:none}          /* karakterli cümle profil sayfasında da var */
  .hero-city{padding:8px 0}
  .hero-city b{font-size:clamp(20px,2.2vw,26px)}
  .hero-base{display:none}          /* alt şerit alçak pencerede yer kaplıyor */
  .hero-shell{padding-bottom:18px}  /* alt şerit gidince portre krem bölüme yapışmasın */
  .portrait{width:min(100%,46vh)}
}

/* ---------------------------------------------------------------- koridorlar */
.corridors{padding:clamp(58px,7vh,86px) 0 0}
.corridor-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4vw,60px);align-items:start}
.corridor-lead{color:var(--soft);max-width:44ch;margin:0 0 26px}
.corridor-map{margin:0}
.corridor-map svg{width:100%;height:auto;display:block;overflow:visible}
.corridor-note{margin:14px 0 0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#8c8f95}

.corridor-list,.corridor-progress{list-style:none;margin:0;padding:0}
.corr{border-top:1px solid var(--rule);padding:24px 0}
.corr:last-child{border-bottom:1px solid var(--rule)}
.corr-route{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;
  font-family:var(--display);font-size:clamp(20px,2.1vw,26px);letter-spacing:-.02em}
.corr-route i{font-style:normal;font-size:15px;color:var(--brass-text)}
.corr p{margin:0;color:var(--soft);font-size:14.8px;line-height:1.82;max-width:52ch}

/* satırın üstüne gelince şemadaki ilgili yay öne çıkar (JS yok) */

@media(max-width:900px){
  .corridor-in{grid-template-columns:minmax(0,1fr);gap:26px}
  .corridor-map{order:-1}
  .corr{padding:20px 0}
}

/* ---------------------------------------------------------------- kayan başlık */
nav{transition:height .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
nav.is-scrolled{position:sticky;top:0;z-index:40;background:#151b24d9;
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:#f5f1e91f}
nav.is-scrolled .wrap{height:60px}
nav.is-scrolled .mark{font-size:19px}
nav.is-scrolled .mark small{opacity:0;height:0;overflow:hidden}

/* ---------------------------------------------------------------- imleç */
.has-cursor,.has-cursor a,.has-cursor button{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}  /* yazı imleci kalsın */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  will-change:transform}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--brass-lt)}
.cursor-ring{display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid #c9a96166;border-radius:50%;
  transition:width .32s var(--ease),height .32s var(--ease),margin .32s var(--ease),
             border-color .32s var(--ease),opacity .3s var(--ease)}
.cursor-ring.is-active{width:72px;height:72px;margin:-36px 0 0 -36px;border-color:var(--brass-lt)}
.cursor-ring.is-out,.cursor-dot.is-out{opacity:0}
.cursor-label{font:400 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-lt);opacity:0;transition:opacity .3s var(--ease)}
.cursor-ring.is-active .cursor-label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}
  .has-cursor,.has-cursor a,.has-cursor button{cursor:auto}}


@media(prefers-reduced-motion:reduce){
  body::after{display:none}
  .cursor-dot,.cursor-ring{display:none}
  nav{transition:none}
}


/* Ana sayfada başlıktaki unvan satırı gizlenir: hero'daki giriş cümlesi aynı
   şeyi söylüyor. Alt sayfalarda kalır, orada kimliği o taşır. */
body.page-home .mark small{display:none}
body.page-home .mark{justify-content:center}

/* Koridorlar: bölüm ve harita küçültüldü */
.corridors{padding:clamp(46px,5.5vh,68px) 0 0}
@media(min-width:901px){
  /* sahnede harita solda ve BÜYÜK durur: küçülünce şehir adları okunmuyordu */
  .corridor-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center}
}
.corridor-map{max-width:none}
.corridor-lead{font-size:15px;margin-bottom:20px}
.corr{padding:18px 0}
.corr-route{font-size:clamp(18px,1.8vw,23px);margin-bottom:8px}
.corr p{font-size:14.2px;line-height:1.75}


/* ---------------------------------------------------------------- koridor haritası */
.map-grid path{fill:none;stroke:#1a1f2716;stroke-width:.6;vector-effect:non-scaling-stroke;
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 52% 50%,#000 30%,transparent 88%);
  mask-image:radial-gradient(ellipse 70% 72% at 52% 50%,#000 30%,transparent 88%)}
.map-land path{fill:#1a1f2714;stroke:#1a1f2747;stroke-width:.85;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.map-arcs .arc{fill:none;stroke:var(--brass);stroke-width:1.6;opacity:.5;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:opacity .4s var(--ease),stroke-width .4s var(--ease)}
.map-points .pt-core{fill:var(--ink);transition:r .35s var(--ease)}
.map-points .pt-ring{fill:none;stroke:var(--brass);stroke-width:1;opacity:0;
  transition:opacity .45s var(--ease),r .45s var(--ease)}
.map-points .pt-leader{stroke:#1a1f2733;stroke-width:.8;vector-effect:non-scaling-stroke;
  transition:stroke .4s var(--ease)}
.map-points .pt-coord{font:400 7.5px/1 var(--sans);letter-spacing:.1em;fill:#a9a49a;
  text-anchor:middle;transition:fill .4s var(--ease)}
.map-points .pt-halo{fill:var(--brass);opacity:0;transition:opacity .4s var(--ease)}
.map-points .pt-label{font:400 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  fill:var(--soft);text-anchor:middle;transition:fill .35s var(--ease)}
.map-marks .arc-mark circle{fill:var(--stone);stroke:var(--brass);stroke-width:1;opacity:.9;
  transition:fill .35s var(--ease),stroke-width .35s var(--ease)}
.map-marks .arc-mark text{font:500 9px/1 var(--sans);letter-spacing:.06em;fill:var(--brass-text);
  text-anchor:middle;transition:fill .35s var(--ease)}

/* satır numarası */
.corr{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.corr-n{font:500 10px/1.6 var(--sans);letter-spacing:.14em;color:var(--brass-text);padding-top:6px}

/* --- iki yönlü vurgu: satırdan haritaya, haritadan satıra --- */
.corridors[data-active] .arc,
.corridors:has(.corr:hover) .arc,
.corridors:has(.arc-mark:hover) .arc{opacity:.16}
.corridors[data-active] .arc-mark circle,
.corridors:has(.corr:hover) .arc-mark circle,
.corridors:has(.arc-mark:hover) .arc-mark circle{opacity:.35}
.corridors[data-active="1"] .arc-1,.corridors:has(.corr-1:hover) .arc-1,.corridors:has(.arc-mark-1:hover) .arc-1,
.corridors[data-active="2"] .arc-2,.corridors:has(.corr-2:hover) .arc-2,.corridors:has(.arc-mark-2:hover) .arc-2,
.corridors:has(.corr-3:hover) .arc-3,.corridors:has(.arc-mark-3:hover) .arc-3{
  opacity:1;stroke-width:2.4}
.corridors[data-active="1"] .arc-mark-1 circle,.corridors:has(.corr-1:hover) .arc-mark-1 circle,.corridors:has(.arc-mark-1:hover) .arc-mark-1 circle,
.corridors[data-active="2"] .arc-mark-2 circle,.corridors:has(.corr-2:hover) .arc-mark-2 circle,.corridors:has(.arc-mark-2:hover) .arc-mark-2 circle,
.corridors:has(.corr-3:hover) .arc-mark-3 circle,.corridors:has(.arc-mark-3:hover) .arc-mark-3 circle{
  opacity:1;fill:var(--brass);stroke-width:0}
.corridors[data-active="1"] .arc-mark-1 text,.corridors:has(.corr-1:hover) .arc-mark-1 text,.corridors:has(.arc-mark-1:hover) .arc-mark-1 text,
.corridors[data-active="2"] .arc-mark-2 text,.corridors:has(.corr-2:hover) .arc-mark-2 text,.corridors:has(.arc-mark-2:hover) .arc-mark-2 text,
.corridors:has(.corr-3:hover) .arc-mark-3 text,.corridors:has(.arc-mark-3:hover) .arc-mark-3 text{
  fill:#fff}
/* hattın iki ucundaki şehirler de yanar */
.corridors[data-active="1"] .pt-istanbul .pt-halo,.corridors[data-active="1"] .pt-dubai .pt-halo,
.corridors[data-active="2"] .pt-zurich .pt-halo,.corridors[data-active="2"] .pt-istanbul .pt-halo,
.corridors[data-active="3"] .pt-zurich .pt-halo,.corridors[data-active="3"] .pt-dubai .pt-halo,
.corridors:has(.corr-1:hover) .pt-istanbul .pt-halo,.corridors:has(.corr-1:hover) .pt-dubai .pt-halo,
.corridors:has(.corr-2:hover) .pt-zurich .pt-halo,.corridors:has(.corr-2:hover) .pt-istanbul .pt-halo,
.corridors:has(.corr-3:hover) .pt-zurich .pt-halo,.corridors:has(.corr-3:hover) .pt-dubai .pt-halo{
  opacity:.22}
.corridors:has(.corr-1:hover) .pt-istanbul .pt-label,.corridors:has(.corr-1:hover) .pt-dubai .pt-label,
.corridors:has(.corr-2:hover) .pt-zurich .pt-label,.corridors:has(.corr-2:hover) .pt-istanbul .pt-label,
.corridors:has(.corr-3:hover) .pt-zurich .pt-label,.corridors:has(.corr-3:hover) .pt-dubai .pt-label{
  fill:var(--text)}
.corr:hover .corr-n{color:var(--brass)}


/* Noktalar halkanın üzerinde yürür (SMIL ile; hareket azaltma JS'te durdurulur) */
.portrait-orbit .orbit-dot circle{fill:var(--brass-lt)}
.portrait-orbit .orbit-dot--small circle{fill:#c9a96199}


/* ---------------------------------------------------------------- sayfa geçişi
   Perde JS ile DEĞİL, sözde öğeyle kurulur: ilk boyamada zaten oradadır, bu
   yüzden varışta içerik perdenin ARKASINDAN açılır. Tek yönlü kararma kaba
   duruyordu; giriş ve çıkış artık simetrik. */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  background:var(--ink);opacity:1;animation:veil-out .5s var(--ease) forwards}
body.is-leaving::after{animation:veil-in .3s var(--ease) forwards}
@keyframes veil-out{from{opacity:1}to{opacity:0}}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body::after{display:none}}




/* ---------------------------------------------------------------- koridor sahnesi
   Pist üç ekran boyu; sahne yapışkan durduğu için kullanıcı kaydırdıkça sayfa
   sabit görünür, yalnızca koridor değişir ve hat haritaya çizilir.
   Kaydırma ele geçirilmez: hız kullanıcının, istediği an geçip gider. */
@media(min-width:901px){
  .corridors{padding:0}
  .corridor-runway{position:relative;height:370svh}
  .corridor-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;
    padding-block:clamp(10px,2.4vh,26px);overflow:hidden}
  .corridor-steps{position:absolute;inset:0;display:grid;
    grid-template-rows:.7fr 1fr 1fr 1fr;pointer-events:none}
  .corridor-in{width:100%;align-items:center}

  .corridor-stage{position:relative;display:flex;flex-direction:column;justify-content:center}
  .corridor-list{position:relative;min-height:min(210px,26svh)}
  .corr{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none;
    transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .corr.is-active{opacity:1;transform:none;pointer-events:auto}
  .corr-route{font-size:clamp(22px,2.3vw,32px)}
  .corr p{font-size:15px;line-height:1.8;max-width:42ch}
  .corr-n{font-size:11px}

  /* ilerleme göstergesi */
  .corridor-progress{list-style:none;display:flex;gap:22px;margin:34px 0 0;padding:0}
  .cp{position:relative;font:500 10px/1 var(--sans);letter-spacing:.16em;color:#b3b0a8;
    padding-top:12px;transition:color .4s var(--ease)}
  .cp::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;
    background:var(--rule);transition:background .4s var(--ease),width .4s var(--ease)}
  .corridors[data-active="1"] .cp-1,.corridors[data-active="2"] .cp-2,
  .corridors[data-active="3"] .cp-3{color:var(--brass-text)}
  .corridors[data-active="1"] .cp-1::before,.corridors[data-active="2"] .cp-2::before,
  .corridors[data-active="3"] .cp-3::before{background:var(--brass);width:40px}

  /* hat, sahneye girdiğinde çizilir */
  .map-arcs .arc{stroke-dasharray:1;stroke-dashoffset:1;opacity:.16;
    transition:stroke-dashoffset 1.1s var(--ease),opacity .5s var(--ease),stroke-width .4s var(--ease)}
  .corridors[data-active="1"] .arc-1,.corridors[data-active="2"] .arc-2,
  .corridors[data-active="3"] .arc-3{stroke-dashoffset:0;opacity:1;stroke-width:2.4}
}

@media(prefers-reduced-motion:reduce){
  .corridor-runway{height:auto}
  .corridor-pin{position:static;height:auto}
  .corridor-steps{display:none}
  .corr{position:static;opacity:1;transform:none;pointer-events:auto}
  .corridor-list{min-height:0}
  .map-arcs .arc{stroke-dashoffset:0;opacity:.5}
}


/* Mobilde de sahne çalışır, yalnızca DİKEY kurulur: harita üstte, koridor
   altta. Sabitleme başlığın ALTINA yapışır, yoksa sahne menünün altında kalır. */
@media(max-width:900px){
  .corridors{padding:0}
  .corridor-runway{position:relative;height:330svh}
  .corridor-pin{position:sticky;top:var(--nav-height);
    height:calc(100svh - var(--nav-height));display:flex;align-items:center;
    padding-block:10px;overflow:hidden}
  .corridor-steps{position:absolute;inset:0;display:grid;
    grid-template-rows:.7fr 1fr 1fr 1fr;pointer-events:none}
  .corridor-in{display:flex;flex-direction:column;gap:10px;width:100%}
  .corridor-side{order:1}
  .corridor-stage{order:2;display:flex;flex-direction:column}
  .corridor-map{max-width:none}
  .corridor-map svg{max-height:29svh;width:100%;height:auto}
  .map-points .pt-label{font-size:13px;letter-spacing:.12em}   /* dar ekranda ölçek küçülüyor */
  .map-marks .arc-mark text{font-size:11px}
  .map-marks .arc-mark circle{r:13}
  .corridor-stage .rule-head{margin-bottom:10px;padding-bottom:8px}
  .corridor-lead{font-size:13.5px;line-height:1.6;margin-bottom:10px;max-width:38ch}
  .corridor-list{position:relative;min-height:25svh}
  .corr{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;
    transition:opacity .5s var(--ease),transform .5s var(--ease);
    display:grid;grid-template-columns:28px 1fr;gap:12px}
  .corr.is-active{opacity:1;transform:none;pointer-events:auto}
  .corr-route{font-size:22px;margin-bottom:8px}
  .corr p{font-size:14.5px;line-height:1.75;max-width:none}
  .corridor-progress{display:flex;gap:18px;margin-top:8px}
  .map-points .pt-coord{display:none}          /* dar ekranda koordinat okunmuyor */
  .map-arcs .arc{stroke-dasharray:1;stroke-dashoffset:1}
  .corridors[data-active="1"] .arc-1,.corridors[data-active="2"] .arc-2,
  .corridors[data-active="3"] .arc-3{stroke-dashoffset:0}
  .corridors[data-active="0"] .corridor-stage .corridor-list,
  .corridors[data-active="0"] .corridor-progress{opacity:0;transition:opacity .4s var(--ease)}
}


/* ---------------------------------------------------------------- kurulum perdesi
   Bölüme girilince önce sahne kurulur: ağ çizilir, kara yerleşir, şehirler
   sırayla oturur. Koridorlar ondan sonra başlar (0. adım). */
@media(min-width:901px){
  .corridor-map svg{max-height:68svh;width:100%;height:auto}
  .corridor-stage .rule-head{margin-bottom:clamp(10px,1.8vh,22px);padding-bottom:12px}
  .corridor-lead{margin-bottom:clamp(12px,2.2vh,22px)}

  /* DİKKAT: varsayılan GÖRÜNÜR. Başlangıcı 'opacity:0' yapıp animasyonla
     açmak, animasyon herhangi bir sebeple ilerlemezse haritayı tamamen yok
     ediyordu. Şimdi kurulum yalnızca bir gösteri: oynamazsa harita yerinde. */
  .corridors.is-entered .map-grid path{animation:map-in-soft .7s .05s var(--ease) both}
  .corridors.is-entered .map-land path{animation:map-in .8s .22s var(--ease) both}
  .corridors.is-entered .pt-zurich{animation:map-pop .6s .62s var(--ease) both}
  .corridors.is-entered .pt-istanbul{animation:map-pop .6s .78s var(--ease) both}
  .corridors.is-entered .pt-dubai{animation:map-pop .6s .94s var(--ease) both}
  .corridors.is-entered .map-marks .arc-mark{animation:map-in .6s 1.15s var(--ease) both}

  /* 0. perdede hiçbir koridor açık değil: sahne yalnızca kurulur */
  .corridors[data-active="0"] .arc{stroke-dashoffset:1;opacity:.12}
  .corridors[data-active="0"] .arc-mark circle{opacity:.3}
  .corridors[data-active="0"] .corridor-stage{opacity:0;transform:translateY(10px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .corridor-stage{transition:opacity .5s var(--ease),transform .5s var(--ease)}
}

@keyframes map-in{from{opacity:.28}to{opacity:1}}
@keyframes map-in-soft{from{opacity:.35}to{opacity:1}}
@keyframes map-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* sayfa doğrudan bu bölümde açıldıysa gösteriye gerek yok */
.corridors.is-instant .map-grid path,.corridors.is-instant .map-land path,
.corridors.is-instant .pt-zurich,.corridors.is-instant .pt-istanbul,
.corridors.is-instant .pt-dubai,.corridors.is-instant .map-marks .arc-mark{animation:none}
@media(prefers-reduced-motion:reduce){
  .corridors.is-entered .map-grid path,.corridors.is-entered .map-land path,
  .corridors.is-entered .pt-zurich,.corridors.is-entered .pt-istanbul,
  .corridors.is-entered .pt-dubai,.corridors.is-entered .map-marks .arc-mark{animation:none}
}


/* ---------------------------------------------------------------- harita ince işler */
/* hat üzerinde akan nokta: yalnızca aktif koridorda görünür */
.map-flow .flow{fill:var(--brass);opacity:0;transition:opacity .5s var(--ease)}
.corridors[data-active="1"] .flow-1,.corridors[data-active="2"] .flow-2,
.corridors[data-active="3"] .flow-3{opacity:.95}
/* aktif hat hafifçe parlar */
.corridors[data-active="1"] .arc-1,.corridors[data-active="2"] .arc-2,
.corridors[data-active="3"] .arc-3{filter:drop-shadow(0 0 5px rgba(176,141,79,.45))}
/* aktif hattın uçlarında halka ve koyulaşan etiket */
.corridors[data-active="1"] .pt-istanbul .pt-ring,.corridors[data-active="1"] .pt-dubai .pt-ring,
.corridors[data-active="2"] .pt-zurich .pt-ring,.corridors[data-active="2"] .pt-istanbul .pt-ring,
.corridors[data-active="3"] .pt-zurich .pt-ring,.corridors[data-active="3"] .pt-dubai .pt-ring{
  opacity:.55;r:11}
.corridors[data-active="1"] .pt-istanbul .pt-coord,.corridors[data-active="1"] .pt-dubai .pt-coord,
.corridors[data-active="2"] .pt-zurich .pt-coord,.corridors[data-active="2"] .pt-istanbul .pt-coord,
.corridors[data-active="3"] .pt-zurich .pt-coord,.corridors[data-active="3"] .pt-dubai .pt-coord{
  fill:var(--brass-text)}
.corridors[data-active="1"] .pt-istanbul .pt-leader,.corridors[data-active="1"] .pt-dubai .pt-leader,
.corridors[data-active="2"] .pt-zurich .pt-leader,.corridors[data-active="2"] .pt-istanbul .pt-leader,
.corridors[data-active="3"] .pt-zurich .pt-leader,.corridors[data-active="3"] .pt-dubai .pt-leader{
  stroke:var(--brass)}
@media(prefers-reduced-motion:reduce){.map-flow{display:none}}


@media(max-width:900px){
  .hero-reach{align-self:start;padding-bottom:0}
  .hero-reach-title{max-width:none}
}