/* Standalone pages (Hizmetler, Hakkımda). Builds on style.css: same tokens, header, footer, light and materials.
   Editorial layouts rather than the desk scene; physical objects from the desk appear as quiet still-lifes. */

.wrap {
  width:min(1200px,calc(100% - 100px));
  margin:0 auto;
}
.nav nav a[aria-current="page"] {
  color:var(--ink);
}
.nav nav a[aria-current="page"]:after {
  transform:scaleX(1);
  background:var(--red);
}
.sub-main {
  position:relative;
  /* Rotated photographs carry transparent corners; never let them widen the page. Vertical overflow stays visible. */
  overflow-x:clip;
}
/* The same window light as the desk, falling across the top of each page. */
.sub-main:before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:760px;
  background:
    radial-gradient(ellipse 60% 70% at 16% 0%,#fffcf5d9,#fffcf500 70%),
    radial-gradient(ellipse 70% 60% at 96% 90%,rgba(var(--umber),.05),transparent 70%),
    var(--mottle);
  background-size:auto,auto,900px 900px;
  -webkit-mask:linear-gradient(#000 60%,transparent);
  mask:linear-gradient(#000 60%,transparent);
  pointer-events:none;
  z-index:-1;
}
.crumbs {
  display:flex;
  gap:8px;
  font:13px var(--sans);
  color:var(--muted);
  margin-bottom:34px;
}
.crumbs a {
  color:var(--muted);
  transition:color .2s;
}
.crumbs a:hover {
  color:var(--red);
}
.crumbs span[aria-hidden] {
  opacity:.5;
}

/* ---------- Hero ---------- */
.sub-hero {
  padding:72px 0 96px;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;
  align-items:end;
}
.sub-hero h1 {
  font:600 clamp(52px,7.2vw,104px)/.95 var(--sans);
  letter-spacing:-.045em;
  margin:0;
}
.sub-hero h1 .burgundy {
  color:var(--red);
}
.lead {
  font:400 25px/1.38 var(--serif);
  letter-spacing:-.01em;
  max-width:31ch;
  margin-top:34px;
  color:#2c2d28;
}
.hero-still {
  position:relative;
  height:330px;
}

/* ---------- Shared physical artefacts ---------- */
.sticky-note {
  position:absolute;
  width:200px;
  padding:20px 22px 24px;
  font:31px/1.18 var(--hand);
  color:#2b2a24;
  background:
    linear-gradient(180deg,#00000008,transparent 18%),
    linear-gradient(160deg,transparent 70%,#fffbe080 92%,#fff8d6b3),
    var(--grain),
    linear-gradient(125deg,#f4eab9,#ebdfa3);
  background-size:auto,auto,180px 180px,auto;
  border-radius:1px 1px 3px 2px;
  box-shadow:0 .5px .5px rgba(var(--umber),.2),2px 4px 4px -2px rgba(var(--umber),.2),8px 16px 16px -8px rgba(var(--umber),.38);
}
.sticky-note span {
  display:block;
  padding-left:10px;
}
.photo {
  position:absolute;
  background:url('assets/desk-objects.png') no-repeat;
  background-size:300% 200%;
  filter:drop-shadow(.6px 1.4px 1px rgba(var(--umber),.42)) drop-shadow(5px 12px 10px rgba(var(--umber),.26));
}
.photo-pen { background-position:0 100%; }
.photo-keyboard { background-position:50% 0; }
.photo-phone { background-position:100% 0; }
.photo-lamp { background-position:0 0; }
/* The turntable photograph in its playing pose: counterweight, arm and base layers from turntable.png. */
.photo-turntable {
  position:absolute;
  background:
    url('assets/turntable.png') 0 100%/100% 300% no-repeat,
    url('assets/turntable.png') 0 50%/100% 300% no-repeat,
    url('assets/turntable.png') 0 0/100% 300% no-repeat;
  filter:drop-shadow(.5px 1px .8px rgba(var(--umber),.4)) drop-shadow(4px 9px 9px rgba(var(--umber),.26));
}
.hero-pen {
  width:330px;
  height:330px;
  left:10px;
  top:-10px;
  transform:rotate(56deg);
}
.hero-note {
  right:18px;
  top:34px;
  transform:rotate(-5deg);
}
.paper-card {
  position:relative;
  background-color:#f4eee1;
  background-image:linear-gradient(125deg,#ffffff59,transparent 45%),var(--grain),linear-gradient(#ada48d2e 1px,transparent 1px);
  background-size:auto,220px 220px,100% 29px;
  box-shadow:inset 0 1px 0 #fffaf0,var(--shadow-raised);
}
.paper-card:before {
  content:'';
  position:absolute;
  width:96px;
  height:30px;
  background:linear-gradient(180deg,#f3ead0d9,#e6dabbcc);
  top:-14px;
  left:42%;
  transform:rotate(5deg);
  box-shadow:0 1px 2px rgba(var(--umber),.14);
  clip-path:polygon(2% 0,98% 4%,100% 22%,97% 41%,100% 63%,98% 100%,3% 96%,0 78%,3% 55%,0 33%);
}

/* ---------- Section frame ---------- */
.block {
  padding:96px 0;
  border-top:1px solid var(--line);
}
.block-head {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:56px;
  align-items:end;
  margin-bottom:56px;
}
.block-head-solo {
  display:block;
  margin-bottom:44px;
}
.block-head h2 {
  font:600 44px/1.04 var(--sans);
  letter-spacing:-.032em;
  margin:0;
}
.block-head p {
  font:16.5px/1.6 var(--sans);
  color:var(--muted);
  max-width:52ch;
}
.note-hand {
  display:inline-block;
  font:24px var(--hand);
  color:var(--muted);
  transform:rotate(-3deg);
  margin-bottom:10px;
}

/* ---------- Services: long editorial rows ---------- */
.service-row {
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  gap:48px;
  padding:64px 0 72px;
  border-top:1px solid var(--line);
}
.service-row:first-of-type {
  border-top:0;
  padding-top:8px;
}
.service-row h3 {
  font:600 36px/1.05 var(--sans);
  letter-spacing:-.03em;
  margin:0;
}
.service-row .tagline {
  font:400 20px/1.4 var(--serif);
  color:#3a3b35;
  margin-top:14px;
  max-width:24ch;
}
.service-row .body p {
  font:16.5px/1.68 var(--sans);
  color:#45463f;
  max-width:52ch;
}
.service-row .body p + p {
  margin-top:14px;
}
.scope h4 {
  font:500 13px var(--sans);
  color:var(--muted);
  margin:0 0 12px;
}
.scope ul {
  list-style:none;
  margin:0;
  padding:0;
}
.scope li {
  font:15px/1.4 var(--sans);
  padding:11px 0;
  border-top:1px solid var(--line);
}
.scope li:last-child {
  border-bottom:1px solid var(--line);
}
.row-art {
  position:relative;
  height:190px;
  margin-top:34px;
}
/* small material references to the desk objects */
.still-card {
  position:absolute;
  left:4px;
  top:12px;
  width:220px;
  height:150px;
  padding:9px;
  border-radius:6px;
  transform:rotate(-6deg);
  background:linear-gradient(125deg,#ffffff8c,transparent 40%),var(--grain),#f8f4eb;
  background-size:auto,200px 200px,auto;
  border:1px solid #ece4d5;
  box-shadow:inset 0 1px 0 #fff,0 1px 0 #dcd2c0,3px 7px 8px -3px rgba(var(--umber),.2),12px 24px 30px -12px rgba(var(--umber),.3);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.still-card i {
  display:block;
  border-radius:2px;
}
.still-card i:nth-child(1) {
  background:linear-gradient(#3b3c35 0 3px,transparent 3px 10px,#3b3c3566 10px 12px,transparent 12px 17px,#3b3c3566 17px 19px,transparent 0);
  margin-top:26px;
}
.still-card i:nth-child(2) {
  background:radial-gradient(circle at 70% 120%,#2d62a3 0 46%,transparent 46.5%),radial-gradient(circle at 10% 110%,#4b7fb9 0 38%,transparent 38.5%),#7ca3d4;
}
.still-code {
  position:absolute;
  left:4px;
  top:14px;
  width:240px;
  padding:16px 18px 18px;
  border-radius:11px;
  transform:rotate(4deg);
  color:#e7e3d8;
  font:11.5px/1.75 var(--mono);
  white-space:pre;
  background:linear-gradient(122deg,#ffffff14 0%,#ffffff08 22%,#ffffff00 48%),radial-gradient(ellipse 90% 70% at 30% 0%,#2e312a,#1f211c 72%);
  border:1px solid #4a4c45;
  box-shadow:inset 0 1px 0 #ffffff2e,inset 0 0 0 4px #121310,0 1px 0 #5c5e57,0 2.5px 0 #1a1b18,3px 9px 10px -3px rgba(var(--umber),.3),14px 30px 40px -14px rgba(var(--umber),.36);
}
.still-code b { font-weight:400; color:#b991b8; }
.still-code em { font-style:normal; color:#ccad83; }
.still-code mark { background:none; color:#bdd4a1; }
/* The atlas cell carries a sliver of a neighbouring object at its left edge; crop it away. */
.row-art .photo-phone {
  clip-path:inset(0 0 0 16%);
  left:-20px;
  top:-36px;
  width:250px;
  height:250px;
  transform:rotate(-24deg);
}

/* ---------- Expertise: a plain typographic list ---------- */
.expertise {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:56px;
  margin:0;
}
.expertise div {
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:24px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.expertise dt {
  font:600 17px/1.35 var(--sans);
  letter-spacing:-.01em;
}
.expertise dd {
  margin:0;
  font:15.5px/1.55 var(--sans);
  color:var(--muted);
}

/* ---------- Process: one line through four stages, written like the notebook margin ---------- */
.process {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:32px;
  position:relative;
}
.process:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:46px;
  height:1px;
  background:linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 7px) repeat-x;
  background-size:7px 1px;
  opacity:.35;
}
.process li {
  position:relative;
  padding-top:70px;
}
.process li:before {
  content:'';
  position:absolute;
  left:0;
  top:41px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--paper);
  border:1.5px solid var(--ink);
}
.process li:last-child:before {
  background:var(--red);
  border-color:var(--red);
}
.process h3 {
  position:absolute;
  top:0;
  left:0;
  font:500 32px/1 var(--hand);
  margin:0;
}
.process p {
  font:15.5px/1.6 var(--sans);
  color:#4b4c45;
  max-width:30ch;
}

/* ---------- Expectations ---------- */
.promises {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:56px;
}
.promises li {
  padding:24px 0 26px;
  border-top:1px solid var(--line);
}
.promises strong {
  display:block;
  font:400 23px/1.32 var(--serif);
  letter-spacing:-.01em;
  font-weight:400;
  max-width:28ch;
}
.promises span {
  display:block;
  font:15.5px/1.55 var(--sans);
  color:var(--muted);
  margin-top:8px;
  max-width:46ch;
}

/* ---------- Contact ---------- */
.cta {
  padding:40px 0 110px;
}
.cta-sheet {
  padding:64px 64px 60px;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:48px;
  align-items:end;
  transform:rotate(-.6deg);
}
.cta-sheet h2 {
  font:600 clamp(42px,5.6vw,76px)/.98 var(--sans);
  letter-spacing:-.045em;
  margin:0;
}
.cta-sheet h2 .burgundy {
  color:var(--red);
}
.cta-sheet p {
  font:16.5px/1.6 var(--sans);
  color:#4b4c45;
  margin-top:22px;
  max-width:40ch;
}
.cta-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
}
.cta-mail {
  font:500 26px var(--sans);
  letter-spacing:-.02em;
  border-bottom:1px solid #bab9a7;
  padding-bottom:6px;
  transition:color .3s,border-color .3s;
}
.cta-mail:hover {
  color:var(--red);
  border-color:currentColor;
}
.cta-links {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:500 15px var(--sans);
  letter-spacing:-.005em;
  padding:13px 22px;
  border-radius:6px;
  transition:background .25s,color .25s,border-color .25s;
}
.button-dark {
  background:linear-gradient(180deg,#2c2d28,#1f201c);
  color:#f8f4ea;
  box-shadow:inset 0 1px 0 #ffffff14,0 1px 1px rgba(var(--umber),.2),2px 6px 12px -4px rgba(var(--umber),.3);
}
.button-dark:hover {
  background:var(--red);
}
.button-line {
  border:1px solid #c9c1b1;
  color:var(--ink);
}
.button-line:hover {
  border-color:var(--ink);
}

/* ---------- About ---------- */
/* ---------- About: materials sheet (right-hand visual) ----------
   A taped specimen card of the site's real typefaces, paint-chip cards carrying its real colours, and the pen
   from the desk. It is composed at a fixed size (--w by --h) inside .about-frame, which is a size container:
   below that width the whole sheet scales down in proportion to the column it sits in, so it can never
   outgrow it. The wide frame measures its own column; zoom reflows layout, unlike transform. */
.about-still {
  height:auto;
  pointer-events:none;
}
.about-frame {
  --w:460;
  --h:440;
  container-type:inline-size;
  width:100%;
  max-width:460px;
  margin-left:auto;
  aspect-ratio:var(--w) / var(--h);
}
.about-stage {
  position:relative;
  width:calc(var(--w) * 1px);
  height:calc(var(--h) * 1px);
  zoom:min(1,calc(100cqw / (var(--w) * 1px)));
}
.specimen {
  position:absolute;
  left:8px;
  top:16px;
  width:328px;
  height:322px;
  padding:34px 30px 0;
  transform:rotate(-2.5deg);
}
.specimen-note {
  display:block;
  font:500 29px/1 var(--hand);
  color:#4b4c45;
  transform:rotate(-1.5deg);
  transform-origin:0 100%;
  margin-bottom:12px;
}
.specimen-types {
  margin:0;
}
.specimen-types div {
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px 0 8px;
  border-top:1px solid #b9ae9638;
}
.specimen-types dt {
  font-size:40px;
  line-height:1;
  color:var(--ink);
}
.specimen-types dd {
  margin:0;
}
.specimen-types strong {
  display:block;
  font:600 15px/1.2 var(--sans);
  letter-spacing:-.01em;
}
.specimen-types span {
  display:block;
  font:13px/1.35 var(--sans);
  color:var(--muted);
  margin-top:2px;
}
.t-sans { font-family:var(--sans); font-weight:600; letter-spacing:-.04em; }
.t-serif { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }
.t-mono { font-family:var(--mono); font-size:34px !important; letter-spacing:-.06em; }
.t-hand { font-family:var(--hand); font-weight:500; font-size:46px !important; }
/* a ruler along the foot of the card */
.specimen-ruler {
  position:absolute;
  left:30px;
  right:30px;
  bottom:15px;
  height:10px;
  background:
    repeating-linear-gradient(90deg,#5a554870 0 1px,transparent 1px 40px) 0 100%/100% 10px no-repeat,
    repeating-linear-gradient(90deg,#5a554858 0 1px,transparent 1px 8px) 0 100%/100% 5px no-repeat;
}
.chips {
  position:absolute;
  left:318px;
  top:26px;
  width:132px;
  margin:0;
  padding:0;
  list-style:none;
}
.chip {
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  column-gap:10px;
  height:58px;
  padding-right:8px;
  margin-bottom:17px;
  border-radius:3px;
  background:linear-gradient(125deg,#ffffff8c,transparent 45%),var(--grain),#f8f4eb;
  background-size:auto,200px 200px,auto;
  box-shadow:inset 0 1px 0 #fff,0 .5px .5px rgba(var(--umber),.24),2px 5px 6px -2px rgba(var(--umber),.24),9px 18px 20px -10px rgba(var(--umber),.3);
}
.chip i {
  display:block;
  grid-row:1 / 3;
  width:56px;
  height:58px;
  border-radius:3px 0 0 3px;
  box-shadow:inset 0 1px 0 #ffffff40,inset -1px 0 0 #00000014;
}
.chip b {
  display:block;
  font:600 13.5px/1.2 var(--sans);
  letter-spacing:-.01em;
}
.chip small {
  display:block;
  font:11px/1.3 var(--mono);
  color:var(--muted);
  margin-top:2px;
}
.chip-red { transform:rotate(-3deg); }
.chip-ink { transform:translateX(12px) rotate(2.5deg); }
.chip-brass { transform:translateX(-4px) rotate(-2deg); }
.chip-sage { transform:translateX(10px) rotate(3deg); }
.chip-red i { background:var(--red); }
.chip-ink i { background:var(--ink); }
.chip-brass i { background:var(--brass); }
.chip-sage i { background:var(--sage); box-shadow:inset 0 1px 0 #ffffff80,inset -1px 0 0 #0000001a; }
.about-pen {
  width:300px;
  height:300px;
  left:34px;
  top:240px;
  transform:rotate(47deg) scale(1.12);
}
.makes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px;
}
.makes h3 {
  font:600 26px/1.1 var(--sans);
  letter-spacing:-.025em;
  margin:0 0 12px;
}
.makes p {
  font:16.5px/1.65 var(--sans);
  color:#45463f;
  max-width:46ch;
}
.quote-label {
  display:block;
  font-weight:400;
  margin:0 0 26px;
}
.quote {
  display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:56px;
  align-items:end;
}
.quote blockquote {
  margin:0;
  font:400 clamp(30px,3.6vw,46px)/1.18 var(--serif);
  letter-spacing:-.018em;
  max-width:24ch;
}
.quote>p {
  font:16.5px/1.65 var(--sans);
  color:#45463f;
}
.still-life {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  margin-top:8px;
}
.still-life figure {
  margin:0;
}
.still-frame {
  position:relative;
  height:230px;
  border-radius:8px;
  background:
    radial-gradient(ellipse 80% 70% at 22% 10%,#fffcf5,#f0eadd 70%),
    var(--mottle);
  background-size:auto,900px 900px;
  box-shadow:inset 0 0 0 1px #e3dccf;
  overflow:hidden;
}
.still-frame .photo-keyboard {
  width:300px;
  height:300px;
  left:50%;
  top:50%;
  margin:-150px 0 0 -150px;
  transform:rotate(-12deg);
}
.still-frame .photo-pen {
  width:280px;
  height:280px;
  left:50%;
  top:50%;
  margin:-140px 0 0 -140px;
  transform:rotate(38deg);
}
.still-frame .photo-turntable {
  width:200px;
  height:186px;
  left:50%;
  top:50%;
  margin:-93px 0 0 -100px;
  transform:rotate(5deg);
}
.still-life figcaption {
  font:25px/1.1 var(--hand);
  color:#4b4c45;
  margin-top:14px;
  transform:rotate(-1.5deg);
}
.inline-link {
  display:inline-block;
  font:500 15px var(--sans);
  border-bottom:1px solid #999b8a;
  padding-bottom:4px;
  margin-top:26px;
  transition:color .25s,border-color .25s;
}
.inline-link:hover {
  color:var(--red);
  border-color:currentColor;
}

/* ---------- Responsive ---------- */
@media(max-width:1100px) {
  .service-row {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .service-row .scope {
    grid-column:2;
  }
  .expertise div {
    grid-template-columns:1fr;
    gap:6px;
  }
}
@media(max-width:999px) {
  .wrap {
    width:calc(100% - 55px);
  }
  .sub-hero,.block-head,.quote,.cta-sheet {
    grid-template-columns:1fr;
    gap:28px;
  }
  .sub-hero {
    padding:56px 0 72px;
  }
  .hero-still {
    height:280px;
  }
  .process {
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:48px;
  }
  .process:before {
    display:none;
  }
}
@media(max-width:700px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .crumbs {
    margin-bottom:24px;
  }
  .sub-hero {
    padding:40px 0 56px;
  }
  .sub-hero h1 {
    font-size:min(56px,15vw);
  }
  .lead {
    font-size:21px;
    margin-top:24px;
  }
  .hero-still {
    height:250px;
  }
  .block {
    padding:64px 0;
  }
  .block-head {
    margin-bottom:36px;
  }
  .block-head h2 {
    font-size:34px;
  }
  .service-row {
    grid-template-columns:1fr;
    gap:24px;
    padding:48px 0 52px;
  }
  .service-row .scope {
    grid-column:auto;
  }
  .service-row h3 {
    font-size:30px;
  }
  .row-art {
    height:170px;
    margin-top:24px;
  }
  .expertise,.promises,.makes,.still-life {
    grid-template-columns:1fr;
  }
  .makes {
    gap:32px;
  }
  .process {
    grid-template-columns:1fr;
    row-gap:36px;
  }
  .promises strong {
    font-size:21px;
  }
  .cta {
    padding:24px 0 72px;
  }
  .cta-sheet {
    padding:44px 26px 40px;
    transform:none;
  }
  .cta-mail {
    font-size:21px;
  }
}
@media(max-width:700px) {
  .hero-pen {
    width:250px;
    height:250px;
    left:-30px;
    top:0;
  }
  .hero-note {
    right:4px;
    top:24px;
  }
}
@media(max-width:360px) {
  .sticky-note {
    width:170px;
    font-size:27px;
  }
  .cta-mail {
    font-size:19px;
  }
}
@media(max-width:700px) {
  /* Narrow screens: the colour chips step aside and the sheet is composed a little narrower and shorter. */
  .about-frame {
    --w:340;
    --h:405;
    margin-left:0;
  }
  .chips {
    display:none;
  }
  .about-pen {
    left:8px;
    transform:rotate(47deg) scale(.92);
  }
}