/* ============================================================ İLETİŞİM ====
   /iletisim — generated by scripts/contact.mjs. Built on service.css (heads,
   eyebrow, FAQ, WhatsApp link, quote closing); this file adds:

     ct-hero      the promise, and the phone number set as large as a title
     ct-channels  four ways in: WhatsApp (gold), phone, address, form
     ct-intents   four topics, each opening WhatsApp with its own message
     ct-visit     graphite: the facility, address, directions and the map,
                  which loads only on request (js/map-consent.js, KVKK)
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.ct-hero { background: var(--surface-light); }
.ct-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "crumbs crumbs" "copy phone"; gap: 0 clamp(2rem, 6vw, 7rem); align-items: end; margin-inline: var(--gutter); padding-block: clamp(1.2rem, 2vw, 1.8rem) clamp(2.6rem, 4.4vw, 4.4rem); }
.ct-crumbs { grid-area: crumbs; margin: 0; padding: 0 0 clamp(2rem, 4.4vw, 4.4rem); }
.ct-hero__copy { grid-area: copy; }
.ct-hero__title { font-size: clamp(2.8rem, 5.6vw, 6.6rem); font-weight: 500; line-height: 1; letter-spacing: -.055em; }
.ct-hero__title .line { display: block; }
.ct-hero__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.02em; color: var(--gold-deep); }
.ct-hero__lede { max-width: 36rem; margin-top: clamp(1.4rem, 2.4vw, 2.2rem); color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.75; }
/* The number itself is the most useful thing on the page: set it like a title. */
.ct-hero__phone { grid-area: phone; justify-self: end; display: inline-flex; align-items: center; min-height: 2.75rem; padding-bottom: .4rem; border-bottom: 2px solid var(--gold); font-size: clamp(2rem, 3.6vw, 3.9rem); font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 200ms ease, border-color 200ms ease; }
.ct-hero__phone:hover { color: var(--gold-ink); border-color: var(--gold-deep); }

/* ------------------------------------------------------------ channels */
.ct-channels { margin-inline: var(--gutter); padding-bottom: clamp(4rem, 7vw, 7rem); }
.ct-channels__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.6rem); }
.ct-channel { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.2rem); border: 1px solid var(--line); background: rgb(255 255 255 / .5); transition: border-color 250ms ease, transform 350ms var(--motion), box-shadow 350ms var(--motion); }
.ct-channel:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 1.4rem 2.4rem -1.8rem rgb(43 46 44 / .45); }
.ct-channel--primary { border-color: var(--gold); border-top-width: 3px; background: linear-gradient(180deg, rgb(209 154 23 / .1), rgb(255 255 255 / .55) 70%); }
.ct-channel__icon { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--gold-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ct-channel .wa-icon.ct-channel__icon { stroke-width: 1.2; }
.ct-channel__title { margin-top: 1.2rem; font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 500; letter-spacing: -.03em; }
.ct-channel__text { flex: 1; margin-top: .55rem; color: var(--muted); font-size: .9rem; font-style: normal; line-height: 1.65; }
.ct-channel__action { display: inline-flex; align-self: flex-start; align-items: center; gap: .65rem; min-height: 2.75rem; margin-top: 1rem; border-bottom: 1px solid var(--field-line); font-size: .92rem; font-weight: 600; transition: color 200ms ease, border-color 200ms ease; }
.ct-channel__action svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 250ms var(--motion); }
.ct-channel__action:hover { color: var(--gold-ink); border-color: var(--gold-deep); }
.ct-channel__action:hover svg { transform: translate(2px, -2px); }
/* the whole card answers a click on its action (the link stays the only target) */
.ct-channel__action::after { content: ''; position: absolute; inset: 0; }
.ct-channel--primary .ct-channel__action { color: var(--ink); border-color: var(--gold); }
.ct-channel.reveal .ct-channel__icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms var(--ease-editorial) calc(var(--reveal-delay, 0ms) + 250ms); }
.ct-channel.reveal.is-in .ct-channel__icon * { stroke-dashoffset: 0; }
.ct-channel .wa-icon * { stroke-dasharray: none !important; }

/* -------------------------------------------------------------- intents */
.ct-intents { background: var(--surface-light); }
.ct-intents__inner { margin-inline: var(--gutter); padding-block: clamp(3.5rem, 6vw, 6.5rem) clamp(4rem, 7vw, 7.5rem); border-top: 1px solid var(--line); }
.ct-intents__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ct-intent { position: relative; display: flex; flex-direction: column; padding: clamp(1.6rem, 2.4vw, 2.4rem) clamp(1rem, 2vw, 2rem) 0; }
.ct-intent:first-child { padding-left: 0; }
.ct-intent:last-child { padding-right: 0; }
.ct-intent + .ct-intent { border-left: 1px solid var(--line); }
.ct-intent::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--ease-editorial); }
.ct-intent__no { position: absolute; top: clamp(1.6rem, 2.4vw, 2.4rem); right: clamp(1rem, 2vw, 2rem); color: var(--gold-ink); font-size: .7rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ct-intent:last-child .ct-intent__no { right: 0; }
.ct-intent .svc-icon { color: var(--ink); transition: color 250ms ease, transform 350ms var(--motion); }
.ct-intent__title { margin-top: 1.3rem; font-size: clamp(1.1rem, 1.4vw, 1.4rem); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.ct-intent__text { flex: 1; margin-top: .55rem; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.ct-intent .svc-wa { align-self: flex-start; margin-top: 1.2rem; }
.ct-intent__more { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--muted); font-size: .82rem; transition: color 200ms ease; }
.ct-intent__more svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ct-intent__more:hover { color: var(--gold-ink); }
@media (hover: hover) {
  .ct-intent:hover::before { transform: scaleX(1); }
  .ct-intent:hover .svc-icon { color: var(--gold-ink); transform: translateY(-3px); }
}
.ct-intent.reveal .svc-icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease-editorial) calc(var(--reveal-delay, 0ms) + 250ms); }
.ct-intent.reveal.is-in .svc-icon * { stroke-dashoffset: 0; }

/* ------------------------------------------------------- visit (dark) */
.ct-visit__inner { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 2.5rem clamp(2.5rem, 5vw, 6rem); align-items: center; margin-inline: var(--gutter); padding-block: clamp(4.5rem, 7.5vw, 8rem); }
.ct-visit .svc-eyebrow { color: var(--on-dark-muted); }
.ct-visit .svc-eyebrow::before { background: var(--gold-lit); }
.ct-visit .svc-head__title .line + .line { color: var(--on-dark-muted); }
.ct-visit__lede { max-width: 30rem; margin-top: 1.2rem; color: var(--on-dark-body); font-size: clamp(.92rem, 1vw, 1rem); line-height: 1.75; }
.ct-visit__lines { display: grid; gap: .2rem; margin-top: 1.8rem; border-top: 1px solid var(--on-dark-line); }
.ct-visit__lines div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--on-dark-line); }
.ct-visit__lines dt { color: var(--on-dark-muted); font-size: .74rem; letter-spacing: .04em; }
.ct-visit__lines address { font-style: normal; color: var(--on-dark-ink); font-size: .95rem; line-height: 1.6; }
.ct-visit__lines dd a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--on-dark-ink); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; text-decoration: underline; text-decoration-color: var(--on-dark-line-strong); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ct-visit__lines dd a:hover { color: var(--gold-lit); }
.ct-visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 1.8rem; }
.ct-visit__actions .pill { color: var(--on-gold); }
.ct-visit .svc-link { color: var(--on-dark-ink); border-color: var(--on-dark-line-strong); }
.ct-visit .svc-link:hover { color: var(--gold-lit); border-color: var(--gold-lit); }

/* The map: a still of the facility until the visitor asks for Google Maps. */
.ct-map { position: relative; margin: 0 calc(-1 * var(--gutter)) 0 0; aspect-ratio: 16 / 11; overflow: hidden; background: #1f2120; }
.ct-map__photo, .ct-map__photo img { display: block; width: 100%; height: 100%; }
.ct-map__photo img { object-fit: cover; object-position: 50% 45%; transform: scale(1.02); }
/* a quiet scrim over the photo, and the words on their own glass card so the facility's signs never fight the text */
.ct-map__veil { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.4rem); background: linear-gradient(180deg, rgb(31 33 32 / .25), rgb(31 33 32 / .55)); }
.ct-map__card { display: flex; flex-direction: column; align-items: center; gap: .95rem; width: min(100%, 25rem); padding: clamp(1.4rem, 2.6vw, 2.2rem); border: 1px solid rgb(246 244 238 / .14); border-radius: 6px; text-align: center; background: rgb(31 33 32 / .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.6rem 3rem -1.4rem rgb(0 0 0 / .6); }
.ct-map__pin { position: relative; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; }
.ct-map__pin::before, .ct-map__pin::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold-lit); border-radius: 50%; opacity: 0; }
.ct-map__pin svg { position: relative; width: 2.6rem; height: 2.6rem; fill: rgb(240 178 26 / .16); stroke: var(--gold-lit); stroke-width: 1.6; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .ct-map__pin::before, .ct-map__pin::after { animation: ct-ping 2600ms var(--ease-editorial) infinite; }
  .ct-map__pin::after { animation-delay: 1300ms; }
}
@keyframes ct-ping { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
.ct-map__place { color: var(--on-dark-ink); font-size: clamp(1.15rem, 1.6vw, 1.6rem); font-weight: 500; letter-spacing: -.025em; }
.ct-map__place span { display: block; margin-top: .3rem; color: var(--on-dark-body); font-size: .82rem; font-weight: 400; letter-spacing: .02em; }
.ct-map__load { color: var(--on-gold); }
.ct-map__load[hidden] { display: none; }
.ct-map__note { max-width: 24rem; color: var(--on-dark-muted); font-size: .74rem; line-height: 1.55; }
.ct-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #e8e6df; }
.ct-map.is-live .ct-map__veil, .ct-map.is-live .ct-map__photo { visibility: hidden; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 74.99em) {
  .ct-channels__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-intents__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.8rem; }
  .ct-intent:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .ct-intent:nth-child(2n) { padding-right: 0; }
  .ct-intent:nth-child(2n) .ct-intent__no { right: 0; }
  .ct-intent:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 63.99em) {
  .ct-hero__inner { grid-template-columns: 1fr; grid-template-areas: "crumbs" "copy" "phone"; }
  .ct-hero__phone { justify-self: start; margin-top: 2rem; }
  .ct-visit__inner { grid-template-columns: 1fr; }
  .ct-map { order: -1; margin-left: calc(-1 * var(--gutter)); }
}
@media (max-width: 47.99em) {
  .ct-crumbs { padding-bottom: 2rem; }
  .ct-hero__title { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .ct-hero__phone { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
  .ct-channels { padding-bottom: 3.4rem; }
  .ct-channels__list { grid-template-columns: 1fr; }
  .ct-channel { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.1rem; padding: 1.3rem 1.2rem; }
  .ct-channel__icon { grid-row: 1 / span 3; width: 2.2rem; height: 2.2rem; }
  .ct-channel__title { margin-top: 0; }
  .ct-channel__action { margin-top: .5rem; }
  .ct-intents__inner { padding-block: 3.2rem 3.8rem; }
  .ct-intents__list { grid-template-columns: 1fr; row-gap: 0; }
  .ct-intent:nth-child(n) { padding: 1.6rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .ct-intent:first-child { border-top: 0; }
  .ct-intent:nth-child(n) .ct-intent__no { top: 1.6rem; right: 0; }
  .ct-visit__inner { padding-block: 0 3.8rem; }
  .ct-map { aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--gutter)); }
  .ct-visit__lines div { grid-template-columns: 4.5rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-channel, .ct-channel__action, .ct-channel__action svg, .ct-intent::before, .ct-intent .svc-icon, .ct-hero__phone { transition: none; }
  .ct-channel:hover { transform: none; }
}