/* Hizmet sayfaları: ana sayfanın "dark room" tokenları, sade okuma düzeni. */
:root {
  --bg: #1a1714; --bg-deep: #12100e; --surface: #25211d;
  --ink: #e7e5e1; --muted: #b8afa3; --accent: #c9a24a; --on-accent: #1a1714;
  --f-display: "Imbue", "Didot", "Bodoni 72", Georgia, serif;
  --f-text: "Albert Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --s-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --s-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --s-lead: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  --s-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --s-display: clamp(2.4rem, 1rem + 5.4vw, 6rem);
  --m: max(20px, 5vw);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-text); font-size: var(--s-body); line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color 180ms ease; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }
.wrap { padding-left: max(var(--m), env(safe-area-inset-left)); padding-right: max(var(--m), env(safe-area-inset-right)); }
.display { font-family: var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; background: var(--accent); color: var(--on-accent); font-weight: 500; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn { white-space: nowrap; }
.tlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #d8b35d; } .tlink:hover, .top nav a:hover { color: var(--accent); } }

.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: 20px; border-bottom: 1px solid rgba(231, 229, 225, .08); }
.top .mark img { height: 46px; width: auto; }
.top nav { display: flex; align-items: center; gap: 26px; font-size: var(--s-small); }
.crumbs { font-size: var(--s-small); color: var(--muted); padding-top: 28px; }
.crumbs a { color: var(--ink); }

.head { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: end; padding-block: 40px 80px; }
.head h1 { font-size: var(--s-display); }
.head .lead { margin-top: 26px; font-size: var(--s-lead); line-height: 1.35; max-width: 34ch; }
.head .acts { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; }
.head figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.head figure img { width: 100%; height: 100%; object-fit: cover; }

.body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: clamp(28px, 6vw, 96px); padding-block: 20px 100px; }
.body article { max-width: 68ch; }
.body h2 { font-family: var(--f-display); text-transform: uppercase; font-size: var(--s-lead); line-height: 1.1; margin: 56px 0 16px; }
.body h2:first-child { margin-top: 0; }
.body p + p { margin-top: 14px; }
.body ul { margin: 14px 0 0; padding-left: 1.1em; }
.body li { margin: 6px 0; }
.body li::marker { color: var(--accent); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
details { border-top: 1px solid rgba(231, 229, 225, .14); padding: 16px 0; }
details:last-of-type { border-bottom: 1px solid rgba(231, 229, 225, .14); }
summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 44px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-size: 1.4em; line-height: 1; transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 8px; color: var(--ink); }

aside .card { position: sticky; top: 24px; background: var(--surface); padding: 26px; display: grid; gap: 14px; font-size: var(--s-small); }
aside .card h2 { margin: 0; font-family: var(--f-display); text-transform: uppercase; font-size: 1.5rem; }
aside .card .btn { margin-top: 6px; }
aside .card b { font-weight: 500; display: block; }
.others { margin-top: 28px; display: grid; gap: 8px; font-size: var(--s-small); }

footer { padding-block: 60px max(30px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(231, 229, 225, .08); display: grid; gap: 14px; font-size: var(--s-small); color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ink); }
.wa { position: fixed; z-index: 20; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; padding: 0; }
.wa svg { width: 24px; height: 24px; }

@media (max-width: 900px) {
  .top nav a:not(.btn) { display: none; }
  .head { grid-template-columns: 1fr; padding-bottom: 48px; }
  .head figure { aspect-ratio: 4 / 3; }
  .body { grid-template-columns: 1fr; }
  aside .card { position: static; }
}
@media (max-width: 600px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .btn, summary::after { transition: none; } }