/*
 * Adanacar v4 — services: /hizmetlerimiz (main service grid + branch strip), the branch pages' service
 * list and board (pages/sube.php) and the service detail sidebar (pages/sayfa.php when tip = service). "Yol çizgisi" language of the home page: gold hairline
 * route curves, gold-outlined board codes, one organic leaf corner, arched band edges.
 * Tokens only (temel.css), light + dark. No sticky elements. Motion: transform / opacity only.
 */
@layer custom {
  .ac-hz, .ac-hz-yan, .ac-page-hero .ac-hz-pano-nav {
    --ac-leaf: 1.75rem;
    --ac-card-radius: var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-leaf) var(--ac-radius-lg);
  }

  /* ------------------------------------------------------------------ hero: branch boards */
  .ac-hz-pano-nav { display: flex; flex-wrap: wrap; gap: var(--ac-space-3); margin: var(--ac-space-6) 0 0; }
  .ac-hz-pano-nav a {
    display: inline-flex; align-items: center; gap: var(--ac-space-3); padding: var(--ac-space-2) var(--ac-space-4) var(--ac-space-2) var(--ac-space-2);
    border: 1px solid rgb(201 169 106 / 0.45); border-radius: var(--ac-card-radius); color: var(--ac-ink); text-decoration: none;
    transition: border-color var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease);
  }
  .ac-hz-pano-nav a:hover { border-color: var(--ac-gold); transform: translateY(-2px); color: var(--ac-ink); }
  .ac-hz-pano-nav b { display: grid; place-items: center; inline-size: 3rem; block-size: 2.5rem; border-radius: var(--ac-radius); background: rgb(201 169 106 / 0.14); color: var(--ac-gold-text); font-size: var(--ac-step--1); letter-spacing: 0.08em; }
  .ac-hz-pano-nav span { display: grid; font-weight: 700; line-height: 1.25; }
  .ac-hz-pano-nav small { color: var(--ac-muted); font-weight: 500; font-size: var(--ac-step--2); }

  /* ------------------------------------------------------------------ branch station */
  .ac-hz-sube { padding-block: var(--ac-section); scroll-margin-block-start: var(--ac-header-h, 4.5rem); }
  .ac-hz-sube--alt { background: var(--ac-surface-2); border-start-start-radius: 50% 2.75rem; border-start-end-radius: 50% 2.75rem; }
  .ac-hz-sube__izgara { display: grid; gap: var(--ac-space-7); }
  @media (width >= 992px) { .ac-hz-sube__izgara { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ac-space-8); align-items: start; } }

  .ac-hz-pano { display: flex; flex-direction: column; gap: var(--ac-space-2); }
  .ac-hz-pano .ac-eyebrow { margin: 0; }
  .ac-hz-pano__kod {
    margin-block-start: var(--ac-space-3); font-size: clamp(3.5rem, 2.25rem + 5vw, 6.5rem); font-weight: 800; line-height: 0.85; letter-spacing: 0.01em;
    color: transparent; -webkit-text-stroke: 1.25px var(--ac-gold);
  }
  @supports not (-webkit-text-stroke: 1px black) { .ac-hz-pano__kod { color: var(--ac-gold-text); } }
  .ac-hz-pano h2 { margin: var(--ac-space-3) 0 0; font-size: var(--ac-step-4); letter-spacing: -0.02em; line-height: var(--ac-leading-tight); }
  .ac-hz-pano__ozet { margin: 0; color: var(--ac-muted); font-size: var(--ac-step-1); }
  .ac-hz-pano__ozet b { color: var(--ac-ink); }
  .ac-hz-pano__yol { inline-size: min(20rem, 100%); block-size: 2.5rem; margin-block: var(--ac-space-3); color: var(--ac-gold); overflow: visible; }
  .ac-hz-pano__yol path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ac-hz-pano__yol circle { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .ac-hz-pano__iletisim { display: grid; gap: var(--ac-space-3); list-style: none; margin: 0; padding: 0; }
  .ac-hz-pano__iletisim li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--ac-space-3); align-items: center; color: var(--ac-ink-2); }
  .ac-hz-pano__iletisim i { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--ac-gold); border-radius: 50% 50% 50% var(--ac-radius-sm); color: var(--ac-gold-text); }
  .ac-hz-pano__iletisim a { color: var(--ac-ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
  .ac-hz-pano__iletisim a:hover { color: var(--ac-red); }
  .ac-hz-pano__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-3); margin-block-start: var(--ac-space-5); }

  .ac-hz-yuvarlak {
    display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border: 1px solid var(--ac-line-strong); border-radius: 50%;
    background: var(--ac-surface-3); color: var(--ac-ink); font-size: 1.1rem; text-decoration: none;
    transition: transform var(--ac-dur-1) var(--ac-ease), background-color var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease);
  }
  .ac-hz-yuvarlak:hover { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-surface); }
  .ac-hz-yuvarlak--wa:hover { background: var(--ac-whatsapp); border-color: var(--ac-whatsapp); color: #fff; }
  .ac-hz-yuvarlak:active { transform: scale(0.94); }
  :is(.ac-hz, .ac-hz-yan) a:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 3px; }

  /* ------------------------------------------------------------------ numbered service list */
  .ac-hz-tur {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--ac-space-3); margin: 0; padding-block: var(--ac-space-3);
    border-block-end: 1.5px solid var(--ac-ink); font-size: var(--ac-step--2); font-weight: 760; letter-spacing: var(--ac-tracking-caps); text-transform: uppercase; color: var(--ac-ink);
  }
  .ac-hz-tur .ac-num { color: var(--ac-gold-text); }
  .ac-hz-tur ~ .ac-hz-tur { margin-block-start: var(--ac-space-7); }
  .ac-hz-hizmetler { list-style: none; margin: 0; padding: 0; }
  .ac-hz-hizmet {
    position: relative; isolation: isolate; display: grid; grid-template-columns: 2rem 2.75rem minmax(0, 1fr) 2.25rem; gap: var(--ac-space-4); align-items: start;
    padding: var(--ac-space-5) var(--ac-space-3); border-block-end: 1px solid var(--ac-line);
  }
  .ac-hz-hizmet::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--ac-card-radius); background: var(--ac-surface-3); box-shadow: var(--ac-shadow-1);
    opacity: 0; transform: scale(0.98); transition: opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease); pointer-events: none;
  }
  .ac-hz-hizmet:hover::before, .ac-hz-hizmet:focus-within::before { opacity: 1; transform: none; }
  .ac-hz-hizmet__no { padding-block-start: 0.35rem; font-size: var(--ac-step--1); font-weight: 700; color: var(--ac-gold-text); }
  .ac-hz-hizmet__ikon { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50% 50% 50% var(--ac-radius-sm); background: rgb(201 169 106 / 0.14); color: var(--ac-gold-text); font-size: 1.15rem; }
  .ac-hz-hizmet h3 { margin: 0; font-size: var(--ac-step-1); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
  .ac-hz-hizmet h3 a { color: var(--ac-ink); text-decoration: none; }
  .ac-hz-hizmet h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
  .ac-hz-hizmet h3 a:focus-visible { outline: 0; }
  .ac-hz-hizmet:has(h3 a:focus-visible) { outline: 2px solid var(--ac-focus); outline-offset: 2px; border-radius: var(--ac-radius-lg); }
  .ac-hz-hizmet:hover h3 a { color: var(--ac-red); }
  .ac-hz-hizmet__metin p { margin: var(--ac-space-2) 0 0; color: var(--ac-muted); font-size: var(--ac-step--1); max-inline-size: 62ch; }
  .ac-hz-hizmet__git {
    display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--ac-line-strong); border-radius: 50%; color: var(--ac-ink);
    transition: transform var(--ac-dur-2) var(--ac-ease), background-color var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease);
  }
  .ac-hz-hizmet:hover .ac-hz-hizmet__git { transform: translate(2px, -2px); background: var(--ac-brand-red); border-color: var(--ac-brand-red); color: #fff; }
  .ac-hz-sube--alt .ac-hz-hizmet::before { background: var(--ac-surface-3); }
  @media (width < 576px) {
    .ac-hz-hizmet { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--ac-space-3); padding-inline: var(--ac-space-1); }
    .ac-hz-hizmet__no, .ac-hz-hizmet__git { display: none; }
  }

  /* ------------------------------------------------------------------ /hizmetlerimiz: main services + branch strip */
  .ac-hz-ana { padding-block: var(--ac-section) var(--ac-section-tight); }
  .ac-hz-ana__bas { display: grid; gap: var(--ac-space-3) var(--ac-space-7); align-items: end; margin-block-end: var(--ac-space-7); }
  @media (width >= 992px) { .ac-hz-ana__bas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
  .ac-hz-ana__bas h2 { margin: var(--ac-space-2) 0 0; font-size: var(--ac-step-4); letter-spacing: -0.02em; line-height: var(--ac-leading-tight); }
  .ac-hz-ana__bas > p { margin: 0; color: var(--ac-muted); font-size: var(--ac-step-1); max-inline-size: 56ch; }

  .ac-hz-subeler { padding-block: var(--ac-section); background: var(--ac-surface-2); border-start-start-radius: 50% 2.75rem; border-start-end-radius: 50% 2.75rem; }
  .ac-hz-subeler__liste { display: grid; gap: var(--ac-space-5); list-style: none; margin: 0; padding: 0; }
  @media (width >= 768px) { .ac-hz-subeler__liste { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
  .ac-hz-subetas {
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--ac-space-1); padding: var(--ac-space-5);
    background: var(--ac-surface-3); border: 1px solid var(--ac-line); border-radius: var(--ac-card-radius); scroll-margin-block-start: var(--ac-header-h, 4.5rem);
    transition: transform var(--ac-dur-3) var(--ac-ease), border-color var(--ac-dur-2) var(--ac-ease);
  }
  .ac-hz-subetas:hover, .ac-hz-subetas:target { transform: translateY(-3px); border-color: var(--ac-gold); }
  .ac-hz-subetas__ust { display: flex; align-items: start; justify-content: space-between; }
  .ac-hz-subetas__no { font-size: var(--ac-step--1); font-weight: 700; color: var(--ac-gold-text); }
  .ac-hz-subetas h3 { margin: var(--ac-space-3) 0 0; font-size: var(--ac-step-2); letter-spacing: -0.015em; }
  .ac-hz-subetas h3 a { color: var(--ac-ink); text-decoration: none; }
  .ac-hz-subetas h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .ac-hz-subetas h3 a:focus-visible { outline: 0; }
  .ac-hz-subetas:has(h3 a:focus-visible) { outline: 2px solid var(--ac-focus); outline-offset: 3px; }
  .ac-hz-subetas:hover h3 a { color: var(--ac-red); }
  .ac-hz-subetas__ozet { margin: 0; color: var(--ac-muted); font-size: var(--ac-step--1); }
  .ac-hz-subetas__ozet b { color: var(--ac-ink); }
  .ac-hz-subetas__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ac-space-3); margin-block-start: var(--ac-space-4); padding-block-start: var(--ac-space-4); border-block-start: 1px solid var(--ac-line); }
  .ac-hz-subetas__git { display: inline-flex; align-items: center; gap: var(--ac-space-2); color: var(--ac-red); font-weight: 750; font-size: var(--ac-step--1); }
  .ac-hz-subetas__git i { transition: transform var(--ac-dur-2) var(--ac-ease); }
  .ac-hz-subetas:hover .ac-hz-subetas__git i { transform: translateX(4px); }
  .ac-hz-subetas__tel { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--ac-space-2); color: var(--ac-ink-2); font-size: var(--ac-step--1); font-weight: 650; text-decoration: none; }
  .ac-hz-subetas__tel:hover { color: var(--ac-red); }
  .ac-hz-subetas__tel i { color: var(--ac-gold-text); }

  /* ------------------------------------------------------------------ closing band */
  .ac-hz-son { padding-block: var(--ac-section); }
  .ac-hz-son__ic { display: grid; gap: var(--ac-space-6); align-items: center; padding-block-start: var(--ac-space-7); border-block-start: 1px solid var(--ac-line); }
  @media (width >= 992px) { .ac-hz-son__ic { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
  .ac-hz-son h2 { margin: var(--ac-space-2) 0 var(--ac-space-3); font-size: var(--ac-step-3); }
  .ac-hz-son p:last-child { margin: 0; color: var(--ac-muted); max-inline-size: 52ch; }

  /* ------------------------------------------------------------------ service detail sidebar (pages/sayfa.php) */
  .ac-hz-yan { display: grid; gap: var(--ac-space-5); }
  .ac-hz-kart { padding: var(--ac-space-5); background: var(--ac-surface-3); border: 1px solid var(--ac-line); border-radius: var(--ac-card-radius); }
  .ac-hz-kart h2 { margin: var(--ac-space-1) 0 var(--ac-space-3); font-size: var(--ac-step-2); letter-spacing: -0.015em; }
  .ac-hz-kart .ac-eyebrow { margin: 0; }

  .ac-hz-kart__ust { display: flex; align-items: start; justify-content: space-between; gap: var(--ac-space-3); }
  .ac-hz-kart__kod { font-size: 2.75rem; font-weight: 800; line-height: 0.85; color: transparent; -webkit-text-stroke: 1px var(--ac-gold); }
  @supports not (-webkit-text-stroke: 1px black) { .ac-hz-kart__kod { color: var(--ac-gold-text); } }
  .ac-hz-kart__yol { display: block; inline-size: 100%; block-size: 1.5rem; margin-block: var(--ac-space-1) var(--ac-space-3); color: var(--ac-gold); overflow: visible; }
  .ac-hz-kart__yol path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ac-hz-kart__yol circle { fill: none; stroke: currentColor; stroke-width: 1.25; vector-effect: non-scaling-stroke; }

  .ac-hz-menu { list-style: none; margin: 0; padding: 0; counter-reset: hz; }
  .ac-hz-menu li { counter-increment: hz; border-block-start: 1px solid var(--ac-line); }
  .ac-hz-menu a {
    display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--ac-space-2);
    min-block-size: 2.9rem; padding-block: var(--ac-space-2); color: var(--ac-ink); font-weight: 650; font-size: var(--ac-step--1); line-height: 1.3; text-decoration: none;
  }
  .ac-hz-menu a::before { content: counter(hz, decimal-leading-zero); font-size: var(--ac-step--2); font-weight: 700; color: var(--ac-gold-text); font-variant-numeric: tabular-nums; }
  .ac-hz-menu a i { color: var(--ac-muted); font-size: 0.75rem; transition: transform var(--ac-dur-2) var(--ac-ease); }
  .ac-hz-menu a:hover { color: var(--ac-red); }
  .ac-hz-menu a:hover i { transform: translateX(3px); color: var(--ac-red); }
  .ac-hz-menu a[aria-current="page"] { color: var(--ac-ink); font-weight: 800; box-shadow: inset 2px 0 0 var(--ac-brand-red); padding-inline-start: var(--ac-space-2); margin-inline-start: calc(-1 * var(--ac-space-2)); }
  .ac-hz-menu a[aria-current="page"] i { color: var(--ac-red); }
  .ac-hz-menu__tum { display: inline-flex; align-items: center; gap: var(--ac-space-2); margin-block-start: var(--ac-space-4); font-weight: 700; font-size: var(--ac-step--1); }

  .ac-hz-kart__ana { margin: var(--ac-space-3) 0 0; padding-block-start: var(--ac-space-3); border-block-start: 1px dashed var(--ac-line-strong); color: var(--ac-muted); font-size: var(--ac-step--1); }
  .ac-hz-kart__ana a { font-weight: 750; }

  /* main service: its branch versions, board code first */
  .ac-hz-surum { display: grid; gap: var(--ac-space-2); list-style: none; margin: 0; padding: 0; }
  .ac-hz-surum a {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--ac-space-3); min-block-size: 3.25rem;
    padding: var(--ac-space-2) var(--ac-space-3) var(--ac-space-2) var(--ac-space-2); border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg);
    color: var(--ac-ink); font-weight: 700; font-size: var(--ac-step--1); line-height: 1.3; text-decoration: none;
    transition: border-color var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-2) var(--ac-ease);
  }
  .ac-hz-surum b { display: grid; place-items: center; block-size: 2.25rem; border-radius: var(--ac-radius); background: rgb(201 169 106 / 0.14); color: var(--ac-gold-text); font-size: var(--ac-step--2); letter-spacing: 0.08em; }
  .ac-hz-surum small { display: block; color: var(--ac-muted); font-weight: 500; font-size: var(--ac-step--2); }
  .ac-hz-surum i { color: var(--ac-muted); transition: transform var(--ac-dur-2) var(--ac-ease); }
  .ac-hz-surum a:hover { border-color: var(--ac-gold); color: var(--ac-red); transform: translateX(2px); }
  .ac-hz-surum a:hover i { transform: translateX(3px); color: var(--ac-red); }

  .ac-hz-kart .ac-hz-pano__iletisim { gap: var(--ac-space-3); font-size: var(--ac-step--1); }
  .ac-hz-kart .ac-hz-pano__iletisim i { inline-size: 2rem; block-size: 2rem; }
  .ac-hz-kart .ac-hz-pano__iletisim li { grid-template-columns: 2rem minmax(0, 1fr); }

  /* CTA card: dark leaf card with three actions */
  .ac-hz-cta { position: relative; isolation: isolate; overflow: hidden; padding: var(--ac-space-6) var(--ac-space-5) var(--ac-space-5); border-radius: var(--ac-card-radius); background: var(--ac-band); color: var(--ac-ink); }
  .ac-hz-cta h2 { margin: var(--ac-space-1) 0 var(--ac-space-2); font-size: var(--ac-step-2); }
  .ac-hz-cta p { margin: 0 0 var(--ac-space-4); color: var(--ac-ink-2); font-size: var(--ac-step--1); }
  .ac-hz-cta .ac-topo { color: rgb(216 190 138 / 0.08); }
  .ac-hz-cta__eylem { display: grid; gap: var(--ac-space-2); }
  .ac-hz-cta__eylem a {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--ac-space-3); min-block-size: 3.25rem;
    padding: var(--ac-space-1) var(--ac-space-3) var(--ac-space-1) var(--ac-space-1); border-radius: var(--ac-radius-lg); border: 1px solid rgb(255 255 255 / 0.14);
    color: var(--ac-ink); font-weight: 700; text-decoration: none; transition: background-color var(--ac-dur-2) var(--ac-ease), border-color var(--ac-dur-2) var(--ac-ease);
  }
  .ac-hz-cta__eylem a > i:first-child { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--ac-radius); background: rgb(255 255 255 / 0.08); color: var(--ac-gold-text); }
  .ac-hz-cta__eylem a > i:last-child { color: var(--ac-muted); transition: transform var(--ac-dur-2) var(--ac-ease); }
  .ac-hz-cta__eylem a small { display: block; color: var(--ac-muted); font-weight: 500; font-size: var(--ac-step--2); }
  .ac-hz-cta__eylem a:hover { border-color: var(--ac-gold); background: rgb(255 255 255 / 0.04); color: var(--ac-ink); }
  .ac-hz-cta__eylem a:hover > i:last-child { transform: translateX(3px); color: var(--ac-gold-text); }
  .ac-hz-cta__eylem a.is-ana { background: var(--ac-brand-red); border-color: var(--ac-brand-red); color: #fff; }
  .ac-hz-cta__eylem a.is-ana > i { color: #fff; background: rgb(255 255 255 / 0.14); }
  .ac-hz-cta__eylem a.is-ana > i:last-child { background: none; }
  .ac-hz-cta__eylem a.is-ana small { color: rgb(255 255 255 / 0.85); }
  .ac-hz-cta__eylem a.is-ana:hover { background: var(--ac-brand-red-strong); border-color: var(--ac-brand-red-strong); color: #fff; }

  /* ------------------------------------------------------------------ motion, contrast, print */
  @media (prefers-reduced-motion: reduce) {
    :is(.ac-hz, .ac-hz-yan, .ac-hz-pano-nav) *, :is(.ac-hz, .ac-hz-yan) *::before { transition-duration: 0.01ms !important; }
    .ac-hz-pano-nav a:hover, .ac-hz-subetas:hover, .ac-hz-subetas:target { transform: none; }
  }
  @media (forced-colors: active) {
    .ac-hz-pano__kod, .ac-hz-kart__kod { color: CanvasText; -webkit-text-stroke: 0; }
    .ac-hz-kart, .ac-hz-cta { border: 1px solid CanvasText; }
  }
  @media print {
    .ac-hz-pano__eylem, .ac-hz-son, .ac-hz-cta { display: none !important; }
  }
}