/* ===== ARES — fonts ===== */
@font-face{font-family:"Cinzel";src:url("fonts/cinzel.ttf") format("truetype-variations");
  font-weight:400 700;font-display:swap}
@font-face{font-family:"Plex";src:url("fonts/plexsans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("fonts/plexsans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url("fonts/plexsans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexMono";src:url("fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* ===== tokens ===== */
:root{
  --ink:#161310; --graphite:#1B1613; --cream:#F5F1E8; --copper:#7C3A1C;
  --rust:#B07858; --stone:#8A8578;
  --line-dark:rgba(245,241,232,.16); --line-light:rgba(22,19,16,.16);
  --display:"Cinzel",Georgia,serif; --body:"Plex",system-ui,sans-serif; --mono:"PlexMono",ui-monospace,monospace;
  --pad:clamp(1.5rem,5vw,6rem); --maxw:78rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--graphite);color:var(--cream);
  font-family:var(--body);font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.65;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--copper);color:var(--cream);padding:.6rem 1rem}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* ===== masthead ===== */
.masthead{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:.85rem var(--pad);background:rgba(27,22,19,.86);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dark)}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0;
  font-family:var(--display);font-weight:600;letter-spacing:.22em;font-size:1rem}
.mark img{width:26px;height:auto;opacity:.9}
.masthead nav{display:flex;gap:clamp(.9rem,2.2vw,2rem);font-family:var(--mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.masthead nav a{text-decoration:none;color:rgba(245,241,232,.72);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.masthead nav a:hover{color:var(--cream);border-bottom-color:var(--rust)}

/* hamburger — sadece dar ekranlarda gorunur, JS ile #site-nav'i acip kapatir */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:2.2rem;height:2.2rem;padding:0;border:0;background:none;cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;width:100%;height:1.5px;background:var(--cream)}
@media (max-width:48rem){
  .nav-toggle{display:flex}
  .masthead nav{position:fixed;top:3.6rem;left:0;right:0;z-index:49;
    flex-direction:column;gap:0;background:rgba(20,16,13,.97);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-dark);
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease}
  .masthead nav[data-open]{max-height:20rem;visibility:visible}
  .masthead nav a{padding:1rem var(--pad);border-bottom:1px solid var(--line-dark)}
  .masthead nav a:last-child{border-bottom:0}
}

/* ===== sheets ===== */
.sheet{padding:clamp(3.5rem,8vw,7rem) var(--pad) 0;position:relative}
.sheet--dark{background:var(--graphite);color:var(--cream)}
.sheet--light{background:var(--cream);color:var(--ink)}
.sheet > *{max-width:var(--maxw);margin-inline:auto}

/* title block — her paftanin kunyesi */
.titleblock{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem 1.5rem;align-items:baseline;
  margin-top:clamp(2.5rem,5vw,4rem);padding:.9rem 0 1.1rem;
  border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.sheet--light .titleblock{border-top-color:var(--line-light)}
.titleblock span:first-child{color:var(--rust)}
.titleblock span:nth-child(2){text-align:center;opacity:.6}
.titleblock span:last-child{text-align:right;opacity:.6}
@media (max-width:38rem){
  .titleblock{grid-template-columns:1fr;gap:.3rem}
  .titleblock span:nth-child(2),.titleblock span:last-child{text-align:left}
}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rust);margin:0 0 1.6rem}
.section-title{font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem);margin:0 0 clamp(1.8rem,4vw,3rem);
  display:flex;align-items:center;gap:1rem}
.section-title::after{content:"";flex:1;height:1px;background:var(--line-dark)}
.sheet--light .section-title::after{background:var(--line-light)}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.3rem);line-height:1.55;max-width:44ch;color:rgba(245,241,232,.82)}

/* ===== hero — full-bleed photo, ken burns, tasarim citasi köşe rozeti ===== */
.hero{padding:0;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.hero__bg video,.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,.22) 42%, rgba(10,8,6,.1) 68%),
    linear-gradient(100deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.18) 40%, rgba(10,8,6,0) 62%)}

.hero__text{max-width:38rem;padding:0 var(--pad);margin:0 0 clamp(2.5rem,6vw,4.5rem)}
.hero h1{font-family:var(--display);font-weight:500;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);line-height:1.06;letter-spacing:.01em;margin:0 0 1.6rem;
  text-shadow:0 2px 28px rgba(10,8,6,.4)}
.hero h1 em{font-style:normal;color:var(--rust)}
.hero .lede{text-shadow:0 1px 16px rgba(10,8,6,.35)}
.cta{display:inline-block;margin-top:2rem;padding:.85rem 1.9rem;text-decoration:none;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--rust);color:var(--cream);transition:background .22s,color .22s}
.cta:hover{background:var(--copper);border-color:var(--copper)}

.hero > .titleblock{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);
  border-top-color:rgba(245,241,232,.22);position:relative;z-index:1;background:rgba(20,16,13,.3)}

@media (max-width:56rem){
  .hero{padding-top:clamp(5rem,16vw,7rem)}
  .hero__text{order:1}
  .hero > .titleblock{order:3}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg img{animation:none;transform:scale(1.02)}
  /* video autoplay HTML ozniteligiyle geliyor, CSS'le durdurulamaz — bkz. site.js */
}

/* ===== practice ===== */
.practice__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.statement{font-family:var(--display);font-weight:400;line-height:1.28;margin:0;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.4rem)}
.practice__body p{margin:0 0 1.15rem;color:rgba(22,19,16,.78);max-width:52ch}
.practice__body p:last-child{margin-bottom:0}
@media (max-width:50rem){.practice__grid{grid-template-columns:1fr}}

/* ===== schedule ===== */
.schedule{width:100%;border-collapse:collapse;text-align:left}
.schedule thead th{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(22,19,16,.5);padding:0 1rem .8rem 0;
  border-bottom:1px solid var(--line-light)}
.schedule td{padding:1.15rem 1rem 1.15rem 0;border-bottom:1px solid var(--line-light);vertical-align:baseline}
.schedule tbody tr:last-child td{border-bottom:0}
.schedule .ref{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--copper);white-space:nowrap}
.schedule .scope{font-family:var(--display);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.9rem;white-space:nowrap;padding-right:2rem}
.schedule td:last-child{color:rgba(22,19,16,.74)}
@media (max-width:46rem){
  .schedule thead{display:none}
  .schedule tr{display:block;padding:1.2rem 0;border-bottom:1px solid var(--line-light)}
  .schedule tbody tr:last-child{border-bottom:0}
  .schedule td{display:block;border:0;padding:0}
  .schedule .ref{margin-bottom:.35rem}
  .schedule .scope{margin-bottom:.5rem;white-space:normal}
}

/* ===== work ===== */
.note{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust);margin:-1.5rem 0 2.5rem}
.work__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,2.5vw,2rem);
  grid-template-columns:repeat(3,1fr)}
.work__grid li{margin:0}
.work__frame{border:1px solid var(--line-dark);aspect-ratio:3/4;overflow:hidden}
.work__frame img{width:100%;height:132%;object-fit:cover;display:block;
  transform:translateY(calc(-16% + var(--py,0px)));will-change:transform}
@media (prefers-reduced-motion:reduce){.work__frame img{transform:none;height:100%}}
.caption{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.caption b{font-weight:500}
.caption span{color:var(--stone)}
@media (max-width:56rem){.work__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:34rem){.work__grid{grid-template-columns:1fr}}

/* ===== before / after ===== */
.subsection-title{font-family:var(--display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(.95rem,.88rem + .3vw,1.1rem);margin:clamp(3rem,6vw,4.5rem) 0 .6rem;color:var(--cream)}
.note--tight{margin:0 0 1.8rem}
.ba__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(2,1fr)}
.ba{margin:0}
.ba__frame{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line-dark);
  cursor:ew-resize;background:var(--ink);touch-action:none}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-select:none;user-select:none;pointer-events:none}
.ba__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__tag{position:absolute;top:.9rem;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);background:rgba(20,16,13,.55);padding:.3rem .6rem}
.ba__tag--before{left:.9rem}
.ba__tag--after{right:.9rem}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;pointer-events:none;
  width:0;border-left:1.5px solid var(--cream);transform:translateX(-50%)}
.ba__handle::before{content:"";position:absolute;top:50%;left:50%;width:2.4rem;height:2.4rem;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--rust);
  border:1px solid rgba(245,241,232,.6)}
.ba__handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  font-size:.9rem;color:var(--cream)}
/* Native range input stretched to a tall 3:4 frame yaptigi icin tiklama/surukleme
   isabet hesaplamasi tarayicida guvenilmez oluyordu (bkz. site.js). Suruklemeyi artik
   .ba__frame uzerinde Pointer Events ile kendimiz yonetiyoruz; range sadece klavye
   erisilebilirligi icin arka planda duruyor, fare/dokunmatik olaylarini almiyor. */
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:3;
  opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:1px}
.ba__range::-moz-range-thumb{width:1px;height:1px;opacity:0;border:none}
.ba__range:focus-visible ~ .ba__handle::before{outline:2px solid var(--cream);outline-offset:2px}
.ba__caption{margin:.75rem 0 0;padding-top:.6rem;border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
@media (max-width:40rem){.ba__grid{grid-template-columns:1fr}}

/* ===== contact ===== */
.motto{margin:0 0 clamp(1.8rem,4vw,2.6rem);padding:0 0 0 clamp(1rem,2.5vw,1.6rem);
  border-left:2px solid var(--rust);max-width:36ch}
.motto p{margin:0;font-family:var(--display);font-weight:500;color:var(--cream);
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.25}
.motto p::before{content:"\201C"}
.motto p::after{content:"\201D"}
.motto cite{display:block;margin-top:.7rem;font-style:normal;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.motto cite::before{content:"\2014 "}
.contact__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);margin:clamp(2.5rem,5vw,3.5rem) 0 0}
.contact__list div{border-top:1px solid var(--line-dark);padding-top:1rem}
.contact__list dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);margin-bottom:.5rem}
.contact__list dd{margin:0;font-size:1.1rem}
.contact__list a{text-decoration:none;border-bottom:1px solid var(--line-dark);transition:border-color .2s}
.contact__list a:hover{border-bottom-color:var(--rust)}

/* ===== footer ===== */
footer{padding:clamp(2.5rem,5vw,4rem) var(--pad);text-align:center;border-top:1px solid var(--line-dark)}
footer img{margin:0 auto 1.2rem;opacity:.75;width:32px}
footer p{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,241,232,.6)}
footer .fine{margin-top:.5rem;opacity:.55}

/* ===== motion ===== */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
}