/*
 * Adanacar v4: references (/referanslar) and the home references section (partials/anasayfa_bolumler "cta").
 * "Yol çizgisi" language: a thin gold route line, leaf-cornered tiles, quiet type. Logos sit on a light
 * plate in both themes (brand logos are drawn for white) and turn from grayscale to colour on hover/focus.
 * Tokens only (temel.css), light + dark. Motion: transform / opacity / filter, off under reduced motion.
 * Filter / "show more" behaviour: js/suzgec.js.
 */
@layer custom {
  .ac-refs, .ac-hrefs {
    --ac-leaf: 1.75rem;
    --ac-plate: light-dark(#FFFFFF, #ECECF0);
    --ac-tile-radius: var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-leaf) var(--ac-radius-lg);
  }
  [data-suzgec-liste] > [hidden] { display: none !important; }

  /* ------------------------------------------------------------------ logo (shared) */
  .ac-refs__plate, .ac-hrefs__plate {
    display: grid; place-items: center; aspect-ratio: 1; background: var(--ac-plate);
    border: 1px solid var(--ac-line); border-radius: var(--ac-tile-radius); overflow: hidden;
  }
  .ac-refs__plate img, .ac-hrefs__plate img {
    inline-size: 78%; block-size: 78%; object-fit: contain;
    filter: grayscale(1) contrast(1.05); opacity: 0.72;
    transition: filter var(--ac-dur-2) var(--ac-ease), opacity var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease);
  }
  :is(.ac-refs__logo, .ac-hrefs__logo):is(:hover, :focus-within) img { filter: none; opacity: 1; transform: scale(1.04); }

  /* ------------------------------------------------------------------ page: intro + numbers on the road */
  .ac-refs__intro { padding-block: var(--ac-section-tight, var(--ac-space-7)) 0; }
  .ac-refs__lead { max-inline-size: 62ch; margin: 0 0 var(--ac-space-6); font-size: var(--ac-step-1); color: var(--ac-ink-2); line-height: 1.6; }
  .ac-refs__stats { position: relative; padding-block: var(--ac-space-5); }
  .ac-refs__road { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: var(--ac-gold); pointer-events: none; }
  .ac-refs__road path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.8; }
  .ac-refs__nums { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--ac-space-4); margin: 0; }
  .ac-refs__nums > div { display: flex; flex-direction: column-reverse; gap: var(--ac-space-1); padding: var(--ac-space-4) var(--ac-space-5); background: var(--ac-surface); border-inline-start: 2px solid var(--ac-gold); }
  .ac-refs__nums dt { font-size: var(--ac-step--2); font-weight: 700; letter-spacing: var(--ac-tracking-caps); text-transform: uppercase; color: var(--ac-gold-text); }
  .ac-refs__nums dd { margin: 0; font-size: var(--ac-step-4); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ac-ink); }

  /* ------------------------------------------------------------------ page: sections */
  .ac-refs__sec { padding-block: var(--ac-section, var(--ac-space-8)); }
  .ac-refs__sec--alt { background: var(--ac-surface-2); border-start-start-radius: 50% 2.75rem; border-start-end-radius: 50% 2.75rem; }
  .ac-refs__sec h2 { font-size: var(--ac-step-4); letter-spacing: -0.02em; margin: 0; }
  .ac-refs__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--ac-space-4) var(--ac-space-6); margin-block-end: var(--ac-space-6); }
  .ac-refs__sub { margin: var(--ac-space-3) 0 0; max-inline-size: 56ch; color: var(--ac-muted); }

  .ac-refs__chips { display: flex; flex-wrap: wrap; gap: var(--ac-space-2); }
  .ac-refs__chips[hidden] { display: none; }
  .ac-refs__chip {
    display: inline-flex; align-items: center; gap: var(--ac-space-2); min-block-size: 2.5rem; padding: 0 var(--ac-space-4);
    border: 1px solid var(--ac-line-strong); border-radius: var(--ac-radius); background: transparent; color: var(--ac-ink);
    font: inherit; font-size: var(--ac-step--1); font-weight: 600; cursor: pointer;
    transition: background-color var(--ac-dur-2) var(--ac-ease), color var(--ac-dur-2) var(--ac-ease);
  }
  .ac-refs__chip span { color: var(--ac-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
  .ac-refs__chip:hover { border-color: var(--ac-ink); }
  .ac-refs__chip[aria-pressed="true"] { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-surface); }
  .ac-refs__chip[aria-pressed="true"] span { color: inherit; opacity: 0.75; }
  .ac-refs__chip:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 3px; }
  @media (width < 768px) {
    .ac-refs__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
    .ac-refs__chip { white-space: nowrap; }
  }

  /* logo wall */
  .ac-refs__wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--ac-space-5) var(--ac-space-4); list-style: none; margin: 0; padding: 0; }
  .ac-refs__logo { display: flex; flex-direction: column; gap: var(--ac-space-2); animation: ac-refs-in var(--ac-dur-3) var(--ac-ease) both; }
  .ac-refs__name { font-size: var(--ac-step--1); font-weight: 700; line-height: 1.3; color: var(--ac-ink); }
  .ac-refs__name small { display: block; font-weight: 500; color: var(--ac-muted); font-size: var(--ac-step--2); }
  .ac-refs__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--ac-gold); text-underline-offset: 0.25em; }
  .ac-refs__empty { margin: 0; color: var(--ac-muted); }

  /* testimonials from references */
  .ac-refs__sec--quote { padding-block-start: 0; }
  .ac-refs__quote { max-inline-size: 52rem; margin: 0 auto; padding: var(--ac-space-6) 0; border-block-start: 1px solid var(--ac-line); }
  .ac-refs__quote blockquote { margin: 0; }
  .ac-refs__quote p { margin: 0; font-size: var(--ac-step-2); line-height: 1.5; font-weight: 600; letter-spacing: -0.01em; color: var(--ac-ink); text-wrap: pretty; }
  .ac-refs__quote p::before { content: "“"; display: block; block-size: 1.75rem; font-size: 3.5rem; line-height: 1; color: var(--ac-gold); }
  .ac-refs__quote figcaption { display: flex; align-items: center; gap: var(--ac-space-3); margin-block-start: var(--ac-space-4); color: var(--ac-muted); }
  .ac-refs__quote figcaption img { inline-size: 3rem; block-size: 3rem; object-fit: contain; padding: 0.25rem; background: var(--ac-plate); border-radius: 50% 50% 50% var(--ac-radius-sm); }
  .ac-refs__quote strong { color: var(--ac-ink); }

  /* operation photos */
  .ac-refs__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--ac-space-6) var(--ac-space-5); list-style: none; margin: 0; padding: 0; }
  .ac-refs__photo { animation: ac-refs-in var(--ac-dur-3) var(--ac-ease) both; }
  .ac-refs__photo:focus { outline: 2px solid var(--ac-focus); outline-offset: 4px; }
  .ac-refs__photo figure { margin: 0; }
  .ac-refs__frame { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ac-surface-3); border-radius: var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-leaf); }
  .ac-refs__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--ac-dur-3) var(--ac-ease); }
  .ac-refs__photo:hover .ac-refs__frame img { transform: scale(1.05); }
  .ac-refs__photo figcaption { padding-block-start: var(--ac-space-3); }
  .ac-refs__photo h3 { margin: 0; font-size: var(--ac-step-0, 1rem); font-weight: 800; line-height: 1.35; letter-spacing: -0.005em; }
  .ac-refs__photo p { margin: var(--ac-space-1) 0 0; color: var(--ac-gold-text); font-size: var(--ac-step--1); font-weight: 600; }
  .ac-refs__more { display: flex; justify-content: center; margin: var(--ac-space-7) 0 0; }
  .ac-refs__more[hidden] { display: none; }
  .ac-refs__morebtn { border: 0; background: none; padding: var(--ac-space-2) 0; font: inherit; font-weight: 700; cursor: pointer; }

  /* closing band */
  .ac-refs__cta { padding-block: var(--ac-section, var(--ac-space-8)); background: var(--ac-band); text-align: center; color: var(--ac-ink); }
  .ac-refs__cta h2 { max-inline-size: 26ch; margin: 0 auto var(--ac-space-3); font-size: var(--ac-step-3); text-wrap: balance; }
  .ac-refs__cta p { max-inline-size: 56ch; margin: 0 auto var(--ac-space-5); color: var(--ac-muted); }

  @keyframes ac-refs-in { from { opacity: 0; transform: translateY(8px); } }

  /* ------------------------------------------------------------------ home: logo ribbon + operation cards */
  .ac-hrefs__lead { margin: 0; color: var(--ac-muted); font-size: var(--ac-step-1); }
  .ac-hrefs__lead b { color: var(--ac-ink); font-variant-numeric: tabular-nums; }
  .ac-hrefs__ribbon {
    position: relative; margin-inline: calc(-1 * var(--ac-hpad, 1rem)); margin-block-end: var(--ac-space-7); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ac-hrefs__road { display: block; inline-size: 100%; block-size: 2.5rem; color: var(--ac-gold); }
  .ac-hrefs__road path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ac-hrefs__track { display: flex; inline-size: max-content; gap: var(--ac-space-4); padding: var(--ac-space-2) 0; animation: ac-hrefs-akis 60s linear infinite; }
  .ac-hrefs__ribbon:is(:hover, :focus-within) .ac-hrefs__track { animation-play-state: paused; }
  .ac-hrefs__list { display: flex; gap: var(--ac-space-4); list-style: none; margin: 0; padding: 0; }
  .ac-hrefs__logo { inline-size: 7.5rem; flex: none; }
  .ac-hrefs__logo:nth-child(even) { margin-block-start: var(--ac-space-5); }   /* the logos ride the curve */
  .ac-hrefs__logo a { display: block; border-radius: var(--ac-tile-radius); }
  .ac-hrefs__logo a:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 3px; }
  @keyframes ac-hrefs-akis { to { transform: translateX(calc(-50% - var(--ac-space-4) / 2)); } }

  .ac-hop { position: relative; display: flex; flex-direction: column; margin: 0; }
  .ac-hop__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ac-surface-3); border-radius: var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-radius-lg) var(--ac-leaf); }
  .ac-hop__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--ac-dur-3) var(--ac-ease); }
  .ac-hop:hover .ac-hop__media img { transform: scale(1.05); }
  .ac-hop__city { margin: var(--ac-space-3) 0 var(--ac-space-1); font-size: var(--ac-step--2); font-weight: 700; letter-spacing: var(--ac-tracking-caps); text-transform: uppercase; color: var(--ac-gold-text); }
  .ac-hop__title { margin: 0; font-size: var(--ac-step-1); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
  .ac-hop__title a { color: inherit; text-decoration: none; }
  .ac-hop:hover .ac-hop__title a { text-decoration: underline; text-decoration-color: var(--ac-gold); text-underline-offset: 0.2em; }
  .ac-hop:has(a:focus-visible) { outline: 2px solid var(--ac-focus); outline-offset: 4px; border-radius: var(--ac-radius-lg); }
  .ac-hop a:focus-visible { outline: 0; }

  /* ------------------------------------------------------------------ motion, contrast, print */
  @media (prefers-reduced-motion: reduce) {
    .ac-refs *, .ac-hrefs * { animation: none !important; transition-duration: 0.01ms !important; }
    .ac-hrefs__ribbon { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .ac-hrefs__track [aria-hidden="true"] { display: none; }
    :is(.ac-refs, .ac-hrefs) img { transform: none !important; }
  }
  @media (prefers-contrast: more) {
    .ac-refs__plate img, .ac-hrefs__plate img { filter: none; opacity: 1; }
  }
  @media (forced-colors: active) {
    .ac-refs__plate, .ac-hrefs__plate { border-color: CanvasText; }
    .ac-refs__chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }
  @media print {
    .ac-refs__chips, .ac-refs__more, .ac-refs__cta { display: none !important; }
    [data-suzgec-liste] > [hidden] { display: revert !important; }
    .ac-hrefs__track { animation: none; flex-wrap: wrap; }
  }
}

/* Home operation photos as small, sharp square tiles: 9 per row on desktop, 6 on tablets, no captions. */
@layer custom {
  .ac-carousel--kare { --slide: clamp(7rem, 30vw, 9rem); --gap: var(--ac-space-3); }
  @media (width >= 768px) { .ac-carousel--kare .ac-carousel__track { grid-auto-columns: calc((100% - 5 * var(--gap)) / 6); } }
  @media (width >= 1200px) { .ac-carousel--kare .ac-carousel__track { grid-auto-columns: calc((100% - 8 * var(--gap)) / 9); } }
  .ac-carousel--kare .ac-hop__media {
    display: block; aspect-ratio: 1; border-radius: 0.75rem 0.75rem 0.75rem 1.5rem; overflow: hidden;
    border: 1px solid var(--ac-line); box-shadow: 0 10px 24px -18px rgb(17 17 20 / 0.6);
    transition: transform var(--ac-dur-2) var(--ac-ease), box-shadow var(--ac-dur-2) var(--ac-ease), border-color var(--ac-dur-2) var(--ac-ease);
  }
  .ac-carousel--kare .ac-hop__media img { inline-size: 100%; block-size: 100%; object-fit: cover; image-rendering: auto; filter: saturate(0.92); transition: filter var(--ac-dur-2) var(--ac-ease), transform var(--ac-dur-3) var(--ac-ease); }
  .ac-carousel--kare .ac-hop__media:hover { transform: translateY(-3px); border-color: var(--ac-gold); box-shadow: 0 18px 36px -20px rgb(17 17 20 / 0.7); }
  .ac-carousel--kare .ac-hop__media:hover img { filter: none; transform: scale(1.05); }
  .ac-carousel--kare .ac-hop__media:focus-visible { outline: 2px solid var(--ac-focus); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .ac-carousel--kare .ac-hop__media, .ac-carousel--kare .ac-hop__media img { transition: none; } }
}