/* ══════════════════════════════════════════════════════════════════════════
   Ankara Air — Public Web Site
   Surface: web.  Built from `recipe-web.md` (2026-07-10), section by section.

   Concept: "the next departure". Ankara Air does not sell a flight — it sells
   an hour. Every decision below descends from that.

   Visual language: measured, never eyeballed, from two references
   (`recipe-web.md` §0):
     · Pegasus (flypgs.com)        → hero STRUCTURE. Slider, overlapping search
                                     card, tab strip, controls bottom-left.
     · Bilet Dükkanı (defunct;     → interface STYLE. Flatness, the 8/6/4 radius
       Wayback 20260202204653)       family, boxed fields, folder tabs, sentence
                                     case, hairline cards, light mega footer.
   Their assets, palettes, logos and section orders are NOT used.

   Delivery: static HTML + CSS + dependency-free JS. No build step.
     Fonts: Hellix (local @font-face). Icons: Lucide (ISC). Nothing else is loaded.

     ⚠ Hellix ships per-weight static files (100–900). Every rule that renders
      text states font-weight explicitly; the browser then picks the matching
      static face. Do not rely on inheritance here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* brand — the single accent */
  --aa-blue:       #0057D9;   /* CTA · active state · THE NEXT DEPARTURE */
  --aa-blue-ink:   #0044B3;   /* hover / pressed */
  --aa-blue-wash:  #EAF1FD;   /* selected day, focus tint */

  /* chrome */
  --aa-navy:       #092B44;   /* hero scrim, now-badge */

  /* Green — revised 2026-07-10 on Beyazıt's instruction.
     Originally status-only. It is now the SECONDARY ACCENT of everything below
     the hero: section links, card hovers, route endpoints, list bullets.
     Blue stays reserved for the primary act — the CTA, the active stop, and
     THE NEXT DEPARTURE. Header and hero remain blue-only.
     Cost, recorded: the green dot marking "a bus is on the road right now"
     no longer owns the colour alone. See recipe-web.md §3. */
  --aa-green:      #5F9C51;
  --aa-green-ink:  #4F8443;
  --aa-red:        #E0392B;
  --aa-amber:      #F0A020;

  /* ink */
  --aa-ink:        #1B2B3D;
  --aa-ink-soft:   #5B6B7C;
  --aa-ink-mute:   #93A2B4;

  /* surfaces */
  --aa-panel:      #FFFFFF;
  --aa-canvas:     #F7F8FA;
  --aa-line:       #E4E9EE;
  --aa-line-soft:  #EEF1F4;

  /* radii */
  --aa-r-sm:   4px;
  --aa-r-md:   8px;
  --aa-r-lg:   12px;
  --aa-r-xl:   18px;
  --aa-r-pill: 999px;

  /* the ONLY two shadows in this stylesheet.
     Everything else is flat with a 1px hairline. The hero card is the single
     exception because it floats over a photograph, where a flat card reads as
     a mistake rather than a choice. */
  --aa-shadow-card: 0 12px 32px -12px rgba(9,43,68,.35);
  --aa-shadow-pop:  0 8px 24px -8px  rgba(9,43,68,.24);

  /* layout */
  --aa-wrap:   1400px;
  --aa-gutter: 32px;
  --aa-header: 76px;

  /* motion */
  --aa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --aa-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* time chips ONLY */
}

html[data-theme="dark"]{
  color-scheme:dark;
  --aa-blue-wash:#122B4E;
  --aa-navy:#071827;
  --aa-ink:#ECF3FA;
  --aa-ink-soft:#B2C0CE;
  --aa-ink-mute:#7F91A3;
  --aa-panel:#111C27;
  --aa-canvas:#0B141E;
  --aa-line:#2A3948;
  --aa-line-soft:#1D2A36;
  --aa-shadow-card:0 12px 32px -12px rgba(0,0,0,.65);
  --aa-shadow-pop:0 8px 24px -8px rgba(0,0,0,.6);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Hellix', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px; font-weight:400; line-height:1.6;
  color:var(--aa-ink); background:var(--aa-panel);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
svg{ flex:none; }

/* The UA gives [hidden] `display:none`, but ANY class rule that sets `display`
   outranks it — `.aa-grid--arrive{display:grid}` did, and both rows rendered at
   once while `el.hidden` reported true. Assert what the browser paints, not
   what the attribute says. This one line makes `hidden` mean hidden. */
[hidden]{ display:none !important; }

/* Focus is never removed. It is replaced. */
:focus-visible{ outline:2px solid var(--aa-blue); outline-offset:2px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }

.aa-wrap{ max-width:var(--aa-wrap); margin:0 auto; padding:0 var(--aa-gutter); }
.aa-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.aa-icon{ width:1em; height:1em; }

/* tabular + slashed zero — times, PNR, fares, stat figures.
   NOT applied to body prose: a slashed zero in a sentence is affectation. */
.aa-num.typewriter{ font-weight:700; }

/* ₺ (U+20BA) only. Some typefaces draw the Turkish lira sign poorly; the shim
    ensures it always renders from the system font. The sign is wrapped in
    <span class="lira">₺</span> and takes its shape from the system font, while the
     digits beside it stay Hellix.

   The shim must change the GLYPH and nothing else, so everything typographic is
   re-inherited. This matters because several stat/summary blocks style their unit
   LABEL with a descendant-span rule — `.aa-return__stat span`, `.aa-stat span`
   (which also sets display:block), `.aa-ozet__total span` — and those rules would
   otherwise capture this shim and render ₺ small, faded, or on its own line.
   Doubling the class (`.lira.lira`, specificity 0-2-0) outranks every one of those
   single-class descendant rules (0-1-1) no matter where they are declared —
   including a page's own inline <style>, which wins ties against this file. */
.lira.lira{
  font-family:-apple-system,'Helvetica Neue','Segoe UI',Arial,sans-serif;
  font-feature-settings:normal;
  font-size:inherit; font-weight:inherit; color:inherit;
  letter-spacing:inherit; line-height:inherit;
  display:inline; margin:0;
}

/* Gray-box: a labelled empty slot. Ars never draws artwork (ARS.md §2.5).
   The label states what belongs here and who supplies it. */
.aa-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:24px;
  border:1px dashed var(--aa-line); border-radius:var(--aa-r-lg);
  background:var(--aa-canvas); color:var(--aa-ink-mute);
  font-size:12px; font-weight:500; line-height:1.5;
}
.aa-box svg{ width:26px; height:26px; opacity:.55; }

/* ── 3. Type roles ─────────────────────────────────────────────────────── */
.aa-display{
  font-size:clamp(30px, 3.2vw, 44px); font-weight:700;
  font-stretch:112%; letter-spacing:-0.03em; line-height:1.05;
}
.aa-h2{ font-size:26px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; }
.aa-h3{ font-size:16px; font-weight:700; line-height:1.4; }
.aa-meta{ font-size:12px; font-weight:400; line-height:1.5; color:var(--aa-ink-mute); }
/* No uppercase anywhere on this site (Beyazıt, 2026-07-10). Wide tracking was
   there to open up capitals; in sentence case it just looks loose, so it comes
   down with them. `PNR` and `SSS` stay capital because they are acronyms, not
   styling. */
.aa-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.06em;
  line-height:1.5;
}

.aa-section{ padding:80px 0; }
.aa-section--canvas{ background:var(--aa-canvas); }
.aa-section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:32px;
}
.aa-section__head p{ color:var(--aa-ink-soft); margin-top:6px; max-width:64ch; }
/* Section links carry the secondary accent, and no arrow. The arrow used to
   provide the hover affordance (it slid 3px right); an underline does the same
   job without the ornament. Directional arrows survive only where they steer
   something: the slider's next/prev and the calendar's month nav. */
.aa-more{
  font-size:14px; font-weight:600; color:var(--aa-green);
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px; transition:color .16s var(--aa-ease), text-decoration-color .16s var(--aa-ease);
}
.aa-more:hover{ color:var(--aa-green-ink); text-decoration-color:currentColor; }

/* ── 4. Buttons ────────────────────────────────────────────────────────── */
.aa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 22px; border-radius:var(--aa-r-md);
  font-size:15px; font-weight:600; line-height:1;
  transition:background-color .16s var(--aa-ease), color .16s var(--aa-ease),
             border-color .16s var(--aa-ease), transform .16s var(--aa-ease);
}
.aa-btn svg{ width:17px; height:17px; }
/* flat. no gradient. Pegasus's CTA is linear-gradient(90deg,#FA6A24,#F2AC14);
   ours is one colour, because we have one accent. */
.aa-btn--primary{ background:var(--aa-blue); color:#fff; }
.aa-btn--primary:hover{ background:var(--aa-blue-ink); }
.aa-btn--primary:active{ transform:translateY(1px); }
.aa-btn--ghost{ border:1px solid rgba(255,255,255,.42); color:#fff; }
.aa-btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ── 5. Header ─────────────────────────────────────────────────────────── */
.aa-header{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--aa-header);
  display:flex; align-items:center;
  transition:height .2s var(--aa-ease), background-color .2s var(--aa-ease),
             box-shadow .2s var(--aa-ease), backdrop-filter .2s var(--aa-ease);
}
.aa-header .aa-wrap{ display:flex; align-items:center; gap:40px; width:100%; max-width:1400px; }
.aa-header__logo img{ height:54px; width:auto; filter:brightness(0) invert(1); transition:filter .2s var(--aa-ease); }
.aa-header__logo img.original-logo{ filter:none; }

/* Glassmorphism on scroll: frosted glass instead of flat white. */
.aa-header.is-solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 1px 0 rgba(228,233,238,.6), 0 4px 20px -4px rgba(9,43,68,.08);
}
.aa-header.is-solid .aa-header__logo img{ filter:none; }

.aa-nav{ display:flex; align-items:center; gap:16px; }
.aa-nav__link{
  position:relative; font-size:14px; font-weight:700; color:rgba(255,255,255,.86);
  display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--aa-r-md);
  transition:color .16s var(--aa-ease), background-color .16s var(--aa-ease);
}
.aa-menu-bold{ font-weight:700; }
.aa-sheet a{ font-weight:700; }
/* Header icons cluster: notification + theme sit as a compact pair. */
.aa-notifications-toggle{ position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border:1px solid rgba(255,255,255,.24); border-radius:50%; color:#fff; background:rgba(255,255,255,.1); transition:color .16s var(--aa-ease), background-color .16s var(--aa-ease), border-color .16s var(--aa-ease); }
.aa-notifications-toggle:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); }
.aa-notifications-toggle i{ font-size:18px; line-height:1; }
.aa-notif__badge{ position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--aa-r-pill); background:var(--aa-red); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--aa-header-bg, transparent); }
.aa-header.is-solid .aa-notifications-toggle{ color:var(--aa-ink-soft); background:var(--aa-canvas); border-color:var(--aa-line); }
.aa-header.is-solid .aa-notifications-toggle:hover{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }
html[data-theme="dark"] .aa-notifications-toggle{ color:var(--aa-ink-soft); background:var(--aa-canvas); border-color:var(--aa-line); }
html[data-theme="dark"] .aa-notifications-toggle:hover{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }

.aa-notifications-menu{ min-width:320px; max-width:min(92vw, 360px); padding:0; }
.aa-notif__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--aa-line); }
.aa-notif__head strong{ font-size:15px; font-weight:700; }
.aa-notif__mark{ font-size:12px; font-weight:600; color:var(--aa-blue); padding:0; background:none; border:none; cursor:pointer; }
.aa-notif__mark:hover{ color:var(--aa-blue-ink); text-decoration:underline; }
.aa-notif__list{ max-height:min(70vh, 360px); overflow-y:auto; padding:8px 0; }
.aa-notif__item{ display:flex; gap:12px; align-items:flex-start; padding:10px 16px; cursor:pointer; transition:background-color .12s var(--aa-ease); border-bottom:1px solid var(--aa-line-soft); }
.aa-notif__item:last-child{ border-bottom:none; }
.aa-notif__item:hover{ background:var(--aa-canvas); }
.aa-notif__item.is-unread{ background:var(--aa-blue-wash); }
.aa-notif__item.is-unread:hover{ background:#DBE7F8; }
html[data-theme="dark"] .aa-notif__item.is-unread:hover{ background:var(--aa-blue-wash); }
.aa-notif__dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--aa-blue); margin-top:6px; }
.aa-notif__item.is-read .aa-notif__dot{ background:var(--aa-ink-mute); }
.aa-notif__body{ flex:1; min-width:0; }
.aa-notif__title{ font-size:14px; font-weight:600; line-height:1.4; color:var(--aa-ink); }
.aa-notif__meta{ font-size:12px; color:var(--aa-ink-mute); margin-top:2px; }
.aa-notif__empty{ padding:28px 16px; text-align:center; color:var(--aa-ink-mute); font-size:14px; }

.aa-notifications-toggle[aria-expanded="true"]{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }
html[data-theme="dark"] .aa-notifications-toggle[aria-expanded="true"]{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }
.aa-header.is-solid .aa-notifications-toggle[aria-expanded="true"]{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }

.aa-nav__link svg{ width:14px; height:14px; transition:transform .16s var(--aa-ease); }
.aa-nav__link::after{
  content:''; position:absolute; left:10px; right:calc(100% - 10px); bottom:4px; height:2px;
  background:currentColor; border-radius:2px;
  transition:right .2s var(--aa-ease), left .2s var(--aa-ease);
}
.aa-nav__link:hover{ color:#fff; background:rgba(255,255,255,.10); }
.aa-nav__link:hover::after{ right:10px; }
.aa-header.is-solid .aa-nav__link{ color:#000; }
.aa-header.is-solid .aa-nav__link:hover{ color:var(--aa-green); background:rgba(95,156,81,.10); }
.aa-header.is-solid .aa-nav__link::after{ background:var(--aa-green); }
.aa-nav__link[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* Divider between nav links */
.aa-nav__link:not(:first-child)::before{
  content:''; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:1px; height:16px; background:rgba(255,255,255,.22); border-radius:1px;
}
.aa-header.is-solid .aa-nav__link:not(:first-child)::before{
  background:var(--aa-line);
}

/* 12px between the controls (theme, language, bell, login) — they read as one
   cluster. The phone keeps a little more air: it is a different kind of item. */
.aa-header__right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.aa-phone{ margin-right:6px; }
.aa-theme-toggle{
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.24); border-radius:50%;
  color:#fff; background:rgba(255,255,255,.1);
  transition:color .16s var(--aa-ease), background-color .16s var(--aa-ease), border-color .16s var(--aa-ease), transform .16s var(--aa-ease);
}
.aa-theme-toggle:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); transform:rotate(8deg); }
.aa-theme-toggle svg{ width:18px; height:18px; }
.aa-header.is-solid .aa-theme-toggle{ color:var(--aa-ink-soft); background:var(--aa-canvas); border-color:var(--aa-line); }
.aa-header.is-solid .aa-theme-toggle:hover{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }

/* Language switcher — dropdown trigger + popover menu next to the theme toggle.
   Uses emoji flags so no external assets are required; the receiving developer
   can swap them for SVG/image flags when the language trees are built. */
.aa-lang{ position:relative; flex:none; }
.aa-lang__toggle{
  height:38px; padding:0 10px;
  display:flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.24); border-radius:var(--aa-r-md);
  background:rgba(255,255,255,.1);
  color:#fff; font-size:14px; font-weight:600; line-height:1;
  cursor:pointer; user-select:none;
  transition:color .16s var(--aa-ease), background-color .16s var(--aa-ease), border-color .16s var(--aa-ease);
}
.aa-lang__toggle:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); }
.aa-lang__toggle svg{ width:14px; height:14px; opacity:.85; }
.aa-header.is-solid .aa-lang__toggle,
html[data-theme="dark"] .aa-lang__toggle{ color:var(--aa-ink-soft); background:var(--aa-canvas); border-color:var(--aa-line); }
.aa-header.is-solid .aa-lang__toggle:hover,
html[data-theme="dark"] .aa-lang__toggle:hover{ color:var(--aa-blue); background:var(--aa-blue-wash); border-color:var(--aa-blue); }
.aa-lang__menu{
  /* Positioned by the popover engine (left/top set inline); `right` must stay
     auto or the fixed box stretches to the viewport edge. */
  position:fixed; left:0; right:auto; top:0; min-width:170px;
  display:none; flex-direction:column; gap:2px; padding:6px;
  background:var(--aa-canvas); border:1px solid var(--aa-line); border-radius:var(--aa-r-lg);
  box-shadow:0 12px 32px -12px rgba(9,43,68,.24), 0 4px 12px -4px rgba(9,43,68,.12);
  z-index:120;
}
/* The popover engine puts `is-open` on the panel itself, like .aa-pop — not on
   the .aa-lang wrapper. */
.aa-lang__menu.is-open{ display:flex; }
.aa-lang__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.aa-lang__menu a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--aa-r-md);
  font-size:14px; font-weight:500; color:var(--aa-ink); text-decoration:none;
  transition:background-color .16s var(--aa-ease), color .16s var(--aa-ease);
}
.aa-lang__menu a:hover{ background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-lang__menu a.is-active{ background:var(--aa-blue); color:#fff; }
.aa-lang__menu .flag{ font-size:18px; line-height:1; }
.aa-lang__menu .label{ flex:1; }

/* For a transfer company the phone number is the strongest trust signal there
   is; it used to live only in the footer. The client puts it top-right on
   their own site, and so do we. */
.aa-phone{
  display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:var(--aa-r-md);
  font-size:15px; font-weight:600; color:rgba(255,255,255,.86);
  transition:color .16s var(--aa-ease), background-color .16s var(--aa-ease);
}
.aa-phone svg{ width:17px; height:17px; }
.aa-phone:hover{ color:#fff; background:rgba(255,255,255,.10); }
/* The green wash used to appear only on hover, which hid the strongest trust
   signal on the page until you went looking for it. It is the resting state
   now; hover just deepens it. */
.aa-header.is-solid .aa-phone{ color:var(--aa-green); background:rgba(95,156,81,.10); }
.aa-header.is-solid .aa-phone:hover{ color:var(--aa-green); background:rgba(95,156,81,.18); }

/* Permanent pill CTA. Full radius and a soft lift for a modern login button.
   Black rather than brand blue, so it reads as a neutral account action next to
   the blue booking CTAs instead of competing with them. */
.aa-header__cta{
  height:40px; padding:0 20px; font-size:14px;
  border-radius:var(--aa-r-pill);
  background:#000; color:#fff;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.35);
  transition:box-shadow .16s var(--aa-ease), transform .16s var(--aa-ease), background-color .16s var(--aa-ease);
}
.aa-header__cta:hover{ background:#1a1a1a; box-shadow:0 4px 14px -2px rgba(0,0,0,.45); transform:translateY(-1px); }
.aa-header__cta:active{ transform:translateY(0); }
.aa-header__cta i.fi, .aa-sheet .aa-btn i.fi{ font-size:1em; line-height:1; margin-right:6px; }

.aa-burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; color:#fff; margin-left:auto; }
.aa-header.is-solid .aa-burger{ color:var(--aa-ink); }
.aa-burger svg{ width:22px; height:22px; }

/* dropdown — click-to-open, never hover.
   The client's own v1 panel was a hover-menu maze; its source code says so. */
.aa-menu{
  position:fixed; z-index:70; min-width:240px; padding:8px 0;
  background:var(--aa-panel); border-radius:var(--aa-r-lg);
  box-shadow:var(--aa-shadow-pop); border:1px solid var(--aa-line);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s var(--aa-ease), transform .16s var(--aa-ease);
}
.aa-menu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.aa-menu a{
  display:flex; align-items:center; gap:12px; height:40px; padding:0 18px;
  font-size:14px; font-weight:700; color:var(--aa-ink);
  transition:background-color .12s var(--aa-ease), color .12s var(--aa-ease);
}
.aa-menu a svg{ width:16px; height:16px; color:var(--aa-ink-mute); }
.aa-menu a:hover{ background:var(--aa-canvas); color:var(--aa-blue); }
.aa-menu a:hover svg{ color:var(--aa-blue); }

/* mobile sheet */
.aa-sheet{
  position:fixed; inset:0; z-index:80; background:var(--aa-panel);
  transform:translateX(100%); transition:transform .3s var(--aa-ease);
  display:flex; flex-direction:column; padding:20px var(--aa-gutter) 32px;
  overflow-y:auto;
}
.aa-sheet.is-open{ transform:none; }
.aa-sheet__top{ display:flex; align-items:center; justify-content:space-between; height:44px; margin-bottom:24px; }
.aa-sheet__top img{ height:28px; }
.aa-sheet a{ display:block; padding:14px 0; font-size:17px; font-weight:600; border-bottom:1px solid var(--aa-line-soft); }
.aa-sheet .aa-btn{ margin-top:24px; width:100%; }

/* ── 6. Hero ───────────────────────────────────────────────────────────── */
/* 2026-08-09 (Ergin): the hero is no longer a full-bleed 620px banner with the
   search card cutting into it. It is a contained, rounded box inside the page
   grid, and the search card follows it in normal flow. Consequences, all
   handled below: the header can no longer be transparent (nothing dark behind
   it — index.html ships it `is-solid`), the search tabs can no longer be white
   glass (they sit on the page, not on the photo), and .aa-hero__cut is dead. */
/* --aa-hero-overlap is HALF the search card's measured height at this
   breakpoint: the slider's bottom edge therefore lands on the card's vertical
   midline. Measured, not guessed — card is 171px ≥1101, 323px at 701-1100,
   483px ≤700. Re-measure it if the card's field layout changes.
   Two things read from it: the card's negative pull, and the slider controls,
   which park just above whatever the card covers. */
.aa-hero{ position:relative; padding-top:calc(var(--aa-header) + 28px); --aa-hero-overlap:86px; }
.aa-hero .aa-wrap{ max-width:1400px; }
.aa-hero__media{
  position:relative; height:680px; background:var(--aa-navy);
  overflow:hidden; border-radius:var(--aa-r-xl);
  box-shadow:0 18px 44px -20px rgba(9,43,68,.28), 0 2px 8px -4px rgba(9,43,68,.10);
}

/* ── The banner cut ───────────────────────────────────────────────────────
   Pegasus's construction, measured on the live site at two viewport widths
   and reproduced exactly: TWO white right-triangles hung at the banner's
   bottom corners, each `35%` of the container wide and a fixed `65px` tall.
   The angle therefore rides the viewport — 5.52° at 1920px, 7.35° at 1440px.
   Because the search card covers the middle, only the two flanks are seen,
   which is what makes the banner read as if its bottom corners were rounded.

   This REPLACES our own shallow single-slope horizon (Beyazıt, 2026-07-10 —
   he asked for Pegasus's, having first chosen ours). The visual-similarity
   risk noted in recipe-web.md §3 constraint 7 is accepted, not gone. */
.aa-hero__cut{
  position:absolute; inset:auto 0 0 0; height:65px; z-index:5; pointer-events:none;
}
.aa-hero__cut::before, .aa-hero__cut::after{
  content:''; position:absolute; bottom:0; width:35%; height:100%;
  background:var(--aa-panel);
}
.aa-hero__cut::before{ left:0;  clip-path:polygon(0 0, 0 100%, 100% 100%); }
.aa-hero__cut::after{  right:0; clip-path:polygon(100% 100%, 100% 0, 0 100%); }
.aa-slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .6s var(--aa-ease);
}
.aa-slide.is-active{ opacity:1; }
.aa-slide__img{ position:absolute; inset:0; }
/* 2026-08-05: hero photographed-frame generated for this slot at 21:9, so the
   band (2.769 at desktop) crops only ~16% of the height instead of the 35-46%
   the reused v2 frames cost. The frame was also composed to solve a problem the
   older photographs could not: its top third is the canopy soffit in shadow, so
   the white header sits on a dark mass. Measured, not assumed — all seven
   header items clear 4.5:1, the worst at 11.8, where every previous candidate
   (including the photograph this replaced) failed. */
.aa-slide__img{
  position:absolute; inset:0;
  background-size:cover; background-position:50% 50%;
  transform:scale(1.12);
  transition:transform 7s linear, opacity .8s var(--aa-ease);
  overflow:hidden; border-radius:var(--aa-r-xl);
}
.aa-slide.is-active .aa-slide__img{
  transform:scale(1);
  animation:kenBurns 8s ease-out forwards;
}
@keyframes kenBurns{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
.aa-slide.is-active ~ .aa-slide .aa-slide__img,
.aa-slide:not(.is-active) .aa-slide__img{
  transform:scale(1.12);
}

/* Overlay element centered in the slide */
.aa-slide__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
/* Front overlay image — centered, scaled, dropshadow */
.aa-slide__front{
  position:relative; z-index:3;
  max-width:55%; max-height:70%; object-fit:contain;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.35));
  background-repeat:no-repeat;
  transform:translate(60px, 30px) scale(.95);
  opacity:0;
  transition:transform 1s var(--aa-ease), opacity 1s var(--aa-ease);
}
.aa-slide.is-active .aa-slide__front{
  transform:translate(60px, 0) scale(1);
  opacity:1;
}

/* ── What you see through the window ──────────────────────────────────────
   The shuttle-at-the-terminal plate, painted as the BACKGROUND of the
   window-frame img itself rather than as a sibling layer. The background box
   is the img's own padding box, so the plate tracks the frame at every
   viewport for free — a separate absolutely-positioned layer would have to
   re-derive the frame's size, which is set by max-width/max-height and is
   therefore viewport-dependent.

   Both assets are drawn on the same 693×600 canvas, but s1-p1's rounded plate
   (x 147–552, y 18–582) is cut larger than the frame's glass opening
   (x 173–470, y 98–510), so at 1:1 it hangs out past the frame's right flank.
   77% shrinks the plate to just overspill the opening instead — a hair larger
   on every side, which is what hides the seam, since everything outside the
   rounded opening but inside its bounding box is opaque frame.
   Retune these two lines only if either asset changes. */
.aa-slide__front--window{
  background-image:url('s1-p1.webp');
  background-size:77%;
  background-position:32.7% 53.6%;
}

/* ── Slide 2 figure ───────────────────────────────────────────────────────
   A cut-out that parks on the right flank, clear of the left-aligned copy,
   and slides in from the left every time the slide activates. It sits above
   the search card's overlap so the card never crops its feet. Driven by a
   transition rather than a keyframe: it plays forward on activate and rewinds
   on leave, with no JS hook to keep in sync. */
.aa-slide__figure{
  position:absolute; z-index:3; right:5%;
  bottom:calc(var(--aa-hero-overlap) + 6px);
  height:76%; width:auto; max-width:42%; object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.28));
  opacity:0; transform:translateX(-160px);
  transition:transform .9s var(--aa-ease), opacity .7s var(--aa-ease);
}
.aa-slide.is-active .aa-slide__figure{ opacity:1; transform:translateX(0); }

/* Centred variant: the figure straddles the middle of the box and clears the
   copy layer (z-index 5), so the headline runs BEHIND it instead of over it.
   The travel-in offset has to ride inside the same transform as the centring
   translate — two transforms on one element would overwrite each other. */
.aa-slide__figure--center{
  z-index:6; right:auto; left:50%;
  transform:translateX(calc(-50% - 160px));
}
.aa-slide.is-active .aa-slide__figure--center{ transform:translateX(-50%); }

/* The coach behind the traveller — z-index 2 puts it under the figure (3) and
   over the back cloud band (1). It drives in from the right, opposite the
   figure, so the two entrances read as one crossing move rather than a pair.
   The asset is a square canvas with the coach in the middle third, so it is
   sized by height and hung 6% below the box: that lands the wheels just above
   the strip the search card covers. Bleeding past the right edge is deliberate
   — the coach is cut off on that side anyway. */
.aa-slide__bus{
  position:absolute; z-index:2; right:-6%; bottom:5%;
  height:100%; width:auto; object-fit:contain;
  pointer-events:none;
  opacity:0; transform:translateX(220px);
  transition:transform 1.1s var(--aa-ease), opacity .8s var(--aa-ease);
}
.aa-slide.is-active .aa-slide__bus{ opacity:1; transform:translateX(0); }

/* Tyre trace under the coach. z-index 1 keeps it beneath the coach (2), so the
   opaque bodywork masks everything but the length that runs past the nose —
   which is the only stretch that reads as a trace rather than as a smudge.
   `bottom` is tuned to the wheel contact line: the coach sits in the middle
   third of a square canvas, so its wheels land at ~24% of the box height.
   Two stacked gradients: a soft wide wash for the dust, a tighter dark core
   for the rubber. */
.aa-slide__tracks{
  position:absolute; z-index:1; right:-6%; bottom:24%;
  width:78%; height:16px; pointer-events:none; border-radius:999px;
  background:
    linear-gradient(90deg, rgba(24,28,33,0) 0%, rgba(24,28,33,.10) 34%, rgba(24,28,33,.26) 72%, rgba(24,28,33,.32) 100%),
    linear-gradient(180deg, rgba(24,28,33,0) 0%, rgba(24,28,33,.22) 50%, rgba(24,28,33,0) 100%);
  filter:blur(3px);
  opacity:0; transform:translateX(220px);
  transition:transform 1.1s var(--aa-ease), opacity .8s var(--aa-ease);
}
.aa-slide.is-active .aa-slide__tracks{ opacity:1; transform:translateX(0); }

/* ── Drifting clouds (slide 1) ────────────────────────────────────────────
   Drawn, not photographed: four overlapping radial puffs plus a blur whose
   radius scales with the cloud, so one rule covers every size. A sprite would
   have cost another request and pinned us to one silhouette; at this opacity
   and this speed the drawn shape is indistinguishable from a cut-out.
   Per-cloud geometry rides on custom properties set inline in the markup —
   --w width, --y top, --o opacity, --t duration, --d (negative) delay so the
   band is already mid-flight on load instead of marching in from the edge. */
.aa-clouds{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
  border-radius:var(--aa-r-xl);
}
.aa-clouds--front{ z-index:4; }
.aa-cloud{
  position:absolute; top:var(--y); left:0;
  width:var(--w); height:calc(var(--w) * .34);
  opacity:var(--o);
  background:
    radial-gradient(ellipse 20% 40% at 22% 60%, #fff 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 17% 34% at 36% 50%, #fff 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 21% 46% at 52% 42%, #fff 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 18% 36% at 70% 56%, #fff 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 15% 28% at 83% 64%, #fff 0 62%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 34% 20% at 50% 74%, #fff 0 66%, rgba(255,255,255,0) 100%);
  background-repeat:no-repeat;
  filter:blur(calc(var(--w) * .012));
  will-change:transform;
  animation:aaCloudLtr var(--t) linear var(--d, 0s) infinite;
}
.aa-cloud--rtl{ animation-name:aaCloudRtl; }
@keyframes aaCloudLtr{
  from{ transform:translate3d(calc(-1 * var(--w) - 40px), 0, 0); }
  to  { transform:translate3d(calc(100vw + 40px), 0, 0); }
}
@keyframes aaCloudRtl{
  from{ transform:translate3d(calc(100vw + 40px), 0, 0); }
  to  { transform:translate3d(calc(-1 * var(--w) - 40px), 0, 0); }
}
/* Motion is the whole point of the effect, so reduced-motion does not hide the
   clouds — it parks them where they are. */
@media (prefers-reduced-motion:reduce){
  .aa-cloud{ animation:none; transform:translate3d(28vw,0,0); }
  .aa-cloud--rtl{ transform:translate3d(62vw,0,0); }
  /* Figure and coach still appear, they just stop travelling to get there. */
  .aa-slide__figure, .aa-slide__bus, .aa-slide__tracks{ transition:none; }
}

/* gray-box stand-in while the hero photography is pending (recipe §9) */
.aa-slide__img .aa-box{
  width:100%; height:100%; border:none; border-radius:0;
  background:linear-gradient(180deg,#0E3A5C 0%, var(--aa-navy) 100%);
  color:rgba(255,255,255,.4);
}
.aa-slide__img .aa-box svg{ opacity:.35; }

/* two stops: the horizontal one carries the headline, the vertical one seats
   the slider controls. The photograph carries no edge falloff of its own. */
/* Hero scrim disabled 2026-07-12 (Beyazıt): the darkening gradients existed to
   seat white headline text over the photo. With the text baked into the image,
   the hero shows the clean photo. Restore with the hero copy markup.
.aa-hero__media::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(90deg, rgba(9,43,68,.74) 0%, rgba(9,43,68,.44) 46%, rgba(9,43,68,.16) 100%),
    linear-gradient(180deg, rgba(9,43,68,0) 52%, rgba(9,43,68,.38) 100%);
}
*/

.aa-hero__content{ position:relative; z-index:3; padding-top:92px; }
/* Text left, call-to-action right — as the reference has it. Stacking the CTA
   under the copy walked it straight into the slider controls, which live in
   the same lower-left band. The reference solved this by separating them; so
   do we. */
.aa-slide__text{ display:none; position:absolute; inset:0; z-index:5; padding:60px 40px calc(var(--aa-hero-overlap) + 60px) 80px; pointer-events:none; }
/* Keyed off the SLIDE, not the text: site.js only ever toggles .is-active on
   .aa-slide, so a text block waiting for its own .is-active never appeared on
   any slide but the first. */
.aa-slide.is-active .aa-slide__text{ display:flex; align-items:center; justify-content:flex-start; gap:48px; }
.aa-slide__text > div{ max-width:640px; }
.aa-slide__text .aa-eyebrow{ color:#000; }
.aa-slide__text h1{ color:#000; max-width:18ch; margin-top:14px; }
.aa-slide__text p{ color:#000; max-width:52ch; margin-top:16px; }
.aa-slide__text .aa-btn{ flex:none; margin-bottom:4px; }
/* CTA that sits under the copy rather than beside it. The text layer is
   pointer-events:none so the drag/swipe on the slide still works, so the one
   interactive child has to opt back in. */
.aa-slide__cta{
  display:inline-flex; margin-top:26px; margin-bottom:0; pointer-events:auto;
  background:#86C542; color:#fff;
}
.aa-slide__cta:hover{ background:#77B238; }
.aa-slide__cta:active{ transform:translateY(1px); }

/* Inside the box, clearing the half of the card that covers it. */
.aa-hero__nav{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:0 20px calc(var(--aa-hero-overlap) + 14px); pointer-events:none;
}
.aa-hero__nav button, .aa-dots{ pointer-events:auto; }
.aa-hero__btn{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--aa-navy);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .16s var(--aa-ease);
}
.aa-hero__btn:hover{ background:#fff; }
.aa-hero__btn svg{ width:12px; height:12px; }
.aa-dots{ display:flex; align-items:center; gap:6px; margin-left:6px; }
.aa-dot{
  width:8px; height:8px; border-radius:var(--aa-r-pill);
  background:rgba(255,255,255,.55);
  transition:width .3s var(--aa-ease), background-color .3s var(--aa-ease);
}
.aa-dot.is-active{ width:28px; background:#fff; }

/* ── 7. Search card ────────────────────────────────────────────────────── */
/* Rides up over the hero box by half its own height. */
.aa-search{ position:relative; z-index:10; margin-top:calc(var(--aa-hero-overlap) * -1); }

/* The tab rail used to be white glass because it sat on the hero photograph.
   On the page background that reads as a washed-out smudge, so it is now built
   from the surface tokens and follows the theme on its own. */
.aa-search__tabs{
  display:flex; gap:8px; padding:6px;
  width:max-content;
  border:1px solid var(--aa-line-soft);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:var(--aa-canvas);
}
.aa-tab{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:44px; padding:0 18px;
  border-radius:12px;
  font-size:14px; font-weight:600;
  color:var(--aa-ink-soft); cursor:pointer;
  background:transparent;
  border:1px solid transparent;
  transition:background-color .18s var(--aa-ease), color .18s var(--aa-ease), border-color .18s var(--aa-ease), transform .18s var(--aa-ease), box-shadow .18s var(--aa-ease);
}
.aa-tab svg{ width:17px; height:17px; opacity:.95; }
.aa-tab:hover{
  border-color:var(--aa-line);
  background:var(--aa-panel);
  color:var(--aa-ink);
  transform:translateY(-1px);
}
/* The selected tab reads as one surface with the body below it — same panel
   colour, no bottom seam. Token-based, so dark mode needs no override. */
.aa-tab[aria-selected="true"]{
  background:var(--aa-panel);
  color:var(--aa-ink);
  border-color:var(--aa-line-soft);
  box-shadow:0 8px 20px -14px rgba(9,43,68,.35);
  transform:none;
}
.aa-tab[aria-selected="true"] svg{ color:var(--aa-blue); }
.aa-tab[aria-selected="true"]:hover{ background:var(--aa-panel); border-color:var(--aa-blue); }

.aa-search__body{
  background:var(--aa-panel);
  border-radius:0 14px 14px 14px;
  padding:24px;
  box-shadow:
    0 24px 60px -16px rgba(9,43,68,.18),
    0 4px 12px -4px rgba(9,43,68,.08);
  border:1px solid var(--aa-line-soft);
}

.aa-grid--buy{ display:grid; grid-template-columns:1fr 48px 1fr 200px 168px 180px; gap:12px; align-items:end; }
.aa-grid--find{ display:grid; grid-template-columns:1fr 1fr 180px; gap:12px; align-items:end; }

/* Field grammar: boxed, from Bilet Dükkanı (measured). Not Pegasus's underline. */
/* 64px is the box. Label + value + sub-line must FIT it:
   12/1.25 (15) + 15/1.25 (18.75) + 11/1.15 (12.65) = 46.4, plus 8+8 padding
   = 62.4. The recipe specified 10px padding and looser leading, which totals
   72px and clipped the date's weekday line. Measured, corrected, kept at 64. */
.aa-field{
  position:relative; height:64px; padding:8px 14px;
  border:1px solid var(--aa-line); border-radius:var(--aa-r-lg);
  background:linear-gradient(180deg, var(--aa-panel), var(--aa-canvas));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; flex-direction:column; justify-content:center;
  transition:border-color .16s var(--aa-ease), box-shadow .16s var(--aa-ease);
  cursor:pointer; text-align:left; width:100%; overflow:hidden;
}

html[data-theme="dark"] .aa-header.is-solid{ background:rgba(17,28,39,.92); }
html[data-theme="dark"] .aa-header.is-solid .aa-header__logo img,
html[data-theme="dark"] .aa-footer__logo{ filter:brightness(0) invert(1); }
html[data-theme="dark"] .aa-tab[aria-selected="true"]{ background:var(--aa-panel); }
.aa-field__label{ font-size:12px; font-weight:500; line-height:1.25; color:var(--aa-ink-soft); }
.aa-field__value{
  font-size:15px; font-weight:600; line-height:1.25; color:var(--aa-ink);
  border:none; padding:0; background:none; width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.aa-field__value::placeholder{ color:var(--aa-ink-mute); font-weight:500; }
.aa-field__value:focus{ outline:none; }
.aa-field__sub{ font-size:11px; font-weight:500; line-height:1.15; color:var(--aa-ink-mute); }

.aa-field:hover{ border-color:var(--aa-ink-mute); }
.aa-field:focus-within{ border-color:var(--aa-blue); box-shadow:0 0 0 3px rgba(0,87,217,.16); outline:none; }
/* The one micro-interaction taken from Pegasus: a completed field's underline
   turns brand-coloured. Theirs is 2px yellow. Ours is blue. It teaches the form. */
.aa-field.is-filled{ border-color:#C8D0D9; box-shadow:none; }
.aa-field.is-filled:focus-within{ border-color:#AEB9C5; box-shadow:0 0 0 3px rgba(0,87,217,.16); }

.aa-swap{
  align-self:end; justify-self:center; width:40px; height:40px; margin-bottom:12px;
  border-radius:50%; background:var(--aa-canvas); border:1px solid var(--aa-line);
  display:flex; align-items:center; justify-content:center; color:var(--aa-ink-soft);
  transition:border-color .16s var(--aa-ease), color .16s var(--aa-ease);
}
.aa-swap svg{ width:17px; height:17px; transition:transform .3s var(--aa-ease); }
.aa-swap:hover{ border-color:var(--aa-blue); color:var(--aa-blue); }
.aa-swap.is-turned svg{ transform:rotate(180deg); }

.aa-search .aa-btn--primary{
  height:64px; font-size:15px;
  border-radius:var(--aa-r-lg);
  box-shadow:0 8px 18px -8px rgba(0,87,217,.55);
  transition:background-color .16s var(--aa-ease), box-shadow .16s var(--aa-ease), transform .16s var(--aa-ease);
}
.aa-search .aa-btn--primary:hover{
  box-shadow:0 12px 24px -8px rgba(0,87,217,.62);
  transform:translateY(-1px);
}

/* segmented pill — a real radio group with a decorated thumb */
.aa-seg{
  position:relative; display:flex; height:44px; padding:4px;
  background:var(--aa-canvas); border-radius:var(--aa-r-pill);
  border:1px solid var(--aa-line);
}
.aa-seg__thumb{
  position:absolute; top:4px; bottom:4px; left:4px;
  background:var(--aa-panel); border-radius:var(--aa-r-pill);
  box-shadow:0 3px 10px -4px rgba(9,43,68,.24);
  transition:transform .24s var(--aa-ease), width .24s var(--aa-ease);
}
.aa-seg label{
  position:relative; z-index:1; flex:1; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:var(--aa-ink-soft); cursor:pointer;
  border-radius:var(--aa-r-pill); transition:color .16s var(--aa-ease);
}
.aa-seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.aa-seg input:checked + label{ color:var(--aa-ink); }
.aa-seg input:focus-visible + label{ outline:2px solid var(--aa-blue); outline-offset:2px; }

.aa-notice{ margin-top:14px; display:flex; align-items:flex-start; gap:9px; color:var(--aa-ink-mute); font-size:12px; line-height:1.5; }
.aa-notice svg{ width:14px; height:14px; margin-top:2px; color:var(--aa-ink-mute); }
.aa-notice a{ color:var(--aa-blue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Popovers.
   `position: fixed`, placed from the trigger's rect, closed on scroll+resize.
   NOT `absolute`: a scroll container (overflow-x:auto silently forces
   overflow-y:auto) clips an absolutely positioned child on BOTH axes.
   That was dashboard bug 20. It cost a session. It does not recur. */
.aa-pop{
  position:fixed; z-index:90; background:var(--aa-panel);
  border:1px solid var(--aa-line); border-radius:var(--aa-r-lg);
  box-shadow:var(--aa-shadow-pop); padding:8px;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .16s var(--aa-ease), transform .16s var(--aa-ease);
}
.aa-pop.is-open{ opacity:1; transform:none; pointer-events:auto; }

.aa-list{ max-height:320px; overflow-y:auto; min-width:280px; }
.aa-list button{
  display:flex; align-items:center; gap:12px; width:100%; height:44px; padding:0 12px;
  border-radius:var(--aa-r-md); font-size:14px; font-weight:500; text-align:left;
  transition:background-color .12s var(--aa-ease);
}
.aa-list button svg{ width:16px; height:16px; color:var(--aa-ink-mute); }
.aa-list button:hover, .aa-list button.is-cursor{ background:var(--aa-canvas); }
.aa-list button:hover svg, .aa-list button.is-cursor svg{ color:var(--aa-blue); }
.aa-list button[disabled]{ opacity:.35; cursor:not-allowed; }
.aa-list__empty{ padding:20px 12px; text-align:center; font-size:14px; color:var(--aa-ink-mute); }

/* calendar */
.aa-cal{ width:308px; }
.aa-cal__quick{ display:flex; gap:6px; padding:4px 4px 10px; border-bottom:1px solid var(--aa-line-soft); margin-bottom:8px; }
.aa-cal__quick button{
  height:32px; padding:0 12px; border-radius:var(--aa-r-md); background:var(--aa-canvas);
  font-size:13px; font-weight:600; color:var(--aa-ink-soft);
}
.aa-cal__quick button:hover{ background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-cal__head{ display:flex; align-items:center; justify-content:space-between; padding:0 4px 10px; }
.aa-cal__head strong{ font-size:14px; font-weight:600; }
.aa-cal__head button{ width:32px; height:32px; border-radius:var(--aa-r-md); display:flex; align-items:center; justify-content:center; color:var(--aa-ink-soft); }
.aa-cal__head button:hover{ background:var(--aa-canvas); color:var(--aa-blue); }
.aa-cal__head svg{ width:16px; height:16px; }
.aa-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.aa-cal__dow{ font-size:11px; font-weight:600; color:var(--aa-ink-mute); text-align:center; padding:4px 0 6px; }
.aa-cal__day{
  height:38px; border-radius:var(--aa-r-md); font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .12s var(--aa-ease), color .12s var(--aa-ease);
}
.aa-cal__day:hover:not([disabled]){ background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-cal__day[disabled]{ opacity:.28; cursor:not-allowed; }
.aa-cal__day.is-today{ box-shadow:inset 0 0 0 1px var(--aa-blue); color:var(--aa-blue); }
.aa-cal__day.is-selected{ background:var(--aa-blue); color:#fff; }
.aa-cal__day.is-empty{ pointer-events:none; }

/* passenger stepper */
.aa-step{ min-width:260px; padding:6px; }
.aa-step__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 8px; }
.aa-step__row strong{ display:block; font-size:14px; font-weight:600; }
.aa-step__ctrl{ display:flex; align-items:center; gap:6px; }
.aa-step__ctrl button{
  width:36px; height:36px; border-radius:var(--aa-r-md);
  border:1px solid var(--aa-line); display:flex; align-items:center; justify-content:center;
  color:var(--aa-ink); transition:border-color .16s var(--aa-ease), color .16s var(--aa-ease);
}
.aa-step__ctrl button svg{ width:15px; height:15px; }
.aa-step__ctrl button:hover:not([disabled]){ border-color:var(--aa-blue); color:var(--aa-blue); }
.aa-step__ctrl button[disabled]{ opacity:.3; cursor:not-allowed; }
.aa-step__ctrl output{ min-width:28px; text-align:center; font-size:15px; font-weight:600; }

/* ── 8. Timetable — the signature section ──────────────────────────────── */
/* The countdown, promoted out of the chip and into the section head. It is the
   single fact the section exists to deliver, so it reads as a headline, not a
   caption. Blue, because it is the primary act — the same blue as the chip it
   points at. */
/* ── Next departure — a boarding pass, not a status strip ────────────────
   Three zones read left to right the way a ticket does: the countdown (the
   one fact), the journey it belongs to, and a perforated stub carrying the
   clock. A gradient rail on the leading edge and a progress bar at the foot
   tie it to the timetable below — the rail runs blue (the section's "next"
   colour) into green (departed), the bar fills as the departure approaches.

   Everything except the weather cell is derived from the client's timetable
   plus the browser clock. */
.aa-nextbar{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  align-items:stretch;
  margin:28px 0 36px;
  border-radius:var(--aa-r-xl);
  background:linear-gradient(180deg,#FFFFFF 0%, #FAFCFF 100%);
  border:1px solid var(--aa-line);
  box-shadow:0 24px 60px -28px rgba(0,87,217,.22), 0 6px 20px -12px rgba(9,43,68,.10);
  overflow:hidden; cursor:pointer;
  transition:transform .25s var(--aa-ease), box-shadow .25s var(--aa-ease),
             border-color .25s var(--aa-ease);
}
.aa-nextbar:hover{
  transform:translateY(-3px); border-color:#CFE0FA;
  box-shadow:0 34px 74px -28px rgba(0,87,217,.30), 0 10px 26px -14px rgba(9,43,68,.14);
}
.aa-nextbar__rail{
  position:absolute; inset:0 auto 0 0; width:5px;
  background:linear-gradient(180deg, var(--aa-blue) 0%, var(--aa-green) 100%);
}

/* ── zone 1: the countdown ── */
.aa-nextbar__main{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:26px 30px 24px 34px;
}
.aa-nextbar__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.aa-nextbar__label{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  color:var(--aa-ink-mute);
}
/* the single pulsing dot on the card — the old one on the status line is gone,
   two pulses in one card read as two different things happening */
.aa-nextbar__live{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:var(--aa-r-pill);
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--aa-green-ink); background:rgba(95,156,81,.12);
  border:1px solid rgba(95,156,81,.24);
}
.aa-nextbar__live i{
  width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
  animation:aa-nextbar-pulse 2.4s var(--aa-ease) infinite;
}
/* currentColor keeps one keyframe honest in both themes */
@keyframes aa-nextbar-pulse{
  0%, 70%, 100%{ box-shadow:0 0 0 0 currentColor; }
  35%{ box-shadow:0 0 0 6px transparent; }
}
.aa-nextbar__time{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.aa-nextbar__time > b{
  font-size:clamp(42px, 5.2vw, 60px); font-weight:900; line-height:.95;
  letter-spacing:-.035em; color:var(--aa-ink); font-variant-numeric:tabular-nums;
}
.aa-nextbar__time > b:empty{ display:none; }
.aa-nextbar__in{
  padding:5px 11px; border-radius:var(--aa-r-pill);
  font-size:13.5px; font-weight:800; color:var(--aa-green-ink);
  background:rgba(95,156,81,.11);
}
.aa-nextbar__in:empty{ display:none; }
.aa-nextbar__status{ font-size:13px; font-weight:600; color:var(--aa-ink-soft); }
.aa-nextbar__jump{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  min-height:44px; padding:12px 2px 0; background:none; border:0; cursor:pointer;
  font-size:13px; font-weight:800; color:var(--aa-blue);
}
.aa-nextbar__jump svg{ width:15px; height:15px; transition:transform .18s var(--aa-ease); }
.aa-nextbar__jump:hover svg{ transform:translateX(3px); }
.aa-nextbar.is-done .aa-nextbar__jump{ visibility:hidden; }

/* ── zone 2: which journey the countdown belongs to ── */
.aa-nextbar__route{
  align-self:center; display:flex; flex-direction:column; gap:4px;
  min-width:230px; margin:22px 0; padding:0 30px;
  border-left:1px solid var(--aa-line-soft);
}
.aa-nextbar__leg{ display:flex; align-items:center; gap:12px; }
.aa-nextbar__pin{
  width:11px; height:11px; flex:none; border-radius:50%;
  border:2.5px solid var(--aa-blue); background:var(--aa-panel);
}
.aa-nextbar__pin--end{
  border-color:var(--aa-green); background:var(--aa-green);
  box-shadow:0 0 0 3px rgba(95,156,81,.16);
}
.aa-nextbar__place{ font-size:14px; font-weight:700; color:var(--aa-ink); }
/* the connector: 4.5px left margin puts the 2px dash on the pins' centre line */
.aa-nextbar__mid{
  display:flex; align-items:center; gap:9px; min-height:38px;
  margin-left:4.5px; padding-left:17px; border-left:2px dashed var(--aa-line);
}
.aa-nextbar__bus{ width:18px; height:18px; flex:none; color:var(--aa-blue); }
.aa-nextbar__facts{ font-size:12.5px; font-weight:600; color:var(--aa-ink-soft); }
.aa-nextbar__facts b{ font-weight:800; color:var(--aa-ink); }

/* ── zone 3: the stub, torn off along the perforation ── */
.aa-nextbar__stub{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:16px;
  min-width:172px; padding:26px 32px;
  background:var(--aa-canvas); border-left:2px dashed var(--aa-line);
}
/* the punched holes: half of each circle is clipped by the card's overflow */
.aa-nextbar__stub::before,
.aa-nextbar__stub::after{
  content:''; position:absolute; left:-10px; width:18px; height:18px; border-radius:50%;
  background:var(--aa-panel); border:1px solid var(--aa-line);
}
.aa-nextbar__stub::before{ top:-10px; }
.aa-nextbar__stub::after{ bottom:-10px; }
.aa-nextbar__cell{ display:flex; align-items:center; gap:11px; }
.aa-nextbar__cell svg{ width:20px; height:20px; flex:none; color:var(--aa-blue); }
.aa-nextbar__cell-body{ line-height:1.2; }
.aa-nextbar__cell-body b{
  display:block; font-size:17px; font-weight:800; color:var(--aa-ink);
  font-variant-numeric:tabular-nums;
}
.aa-nextbar__cell-body span{ font-size:11.5px; font-weight:600; color:var(--aa-ink-soft); }
/* amber carries the weather on the icon, not the number — #F0A020 text on
   white is ~2.1:1 and fails AA */
.aa-nextbar__weather svg{ color:var(--aa-amber); }

/* ── the foot: how far through the gap between departures we are ── */
/* laid over the card's bottom edge rather than given a grid row of its own, so
   the stub reaches the corner and its lower notch tears the edge properly */
.aa-nextbar__progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--aa-line-soft);
}
.aa-nextbar__progress i{
  display:block; height:100%; width:var(--aa-next-p, 0%);
  background:linear-gradient(90deg, var(--aa-blue), var(--aa-green));
  transition:width .6s var(--aa-ease);
}

/* ── past the last departure of the day ── */
.aa-nextbar.is-done{
  cursor:default;
  box-shadow:0 14px 36px -24px rgba(9,43,68,.26);
}
.aa-nextbar.is-done:hover{ transform:none; border-color:var(--aa-line); }
.aa-nextbar.is-done .aa-nextbar__rail{ background:var(--aa-ink-mute); }
.aa-nextbar.is-done .aa-nextbar__live{
  color:var(--aa-ink-soft); background:var(--aa-line-soft); border-color:var(--aa-line);
}
.aa-nextbar.is-done .aa-nextbar__live i{ animation:none; }
.aa-nextbar.is-done .aa-nextbar__time > b{ color:var(--aa-ink-mute); }
.aa-nextbar.is-done .aa-nextbar__in{ color:var(--aa-ink-soft); background:var(--aa-line-soft); }
.aa-nextbar.is-done .aa-nextbar__pin--end{ border-color:var(--aa-ink-mute); background:var(--aa-ink-mute); box-shadow:none; }
.aa-nextbar.is-done .aa-nextbar__progress i{ background:var(--aa-ink-mute); }

/* ── responsive: 3 zones → stub beside the countdown → single column ── */
/* The route stays a vertical ladder at every width — laid on its side it
   overflows as soon as a stop name is long. It only changes cell. */
@media (max-width:1080px){
  .aa-nextbar{ grid-template-columns:minmax(0,1fr) auto; }
  .aa-nextbar__route{
    grid-column:1 / -1; grid-row:2; align-self:start;
    min-width:0; margin:0; padding:18px 30px 20px 34px;
    border-left:0; border-top:1px solid var(--aa-line-soft);
  }
}
@media (max-width:680px){
  .aa-nextbar{ grid-template-columns:1fr; }
  .aa-nextbar__main{ padding:22px 22px 20px 26px; }
  .aa-nextbar__route{ padding:16px 22px 18px 26px; }
  .aa-nextbar__stub{
    grid-column:1 / -1; grid-row:3;
    flex-direction:row; gap:28px; min-width:0; padding:18px 26px;
    border-left:0; border-top:2px dashed var(--aa-line);
  }
  .aa-nextbar__stub::before{ top:-10px; left:-10px; }
  .aa-nextbar__stub::after{ top:-10px; bottom:auto; left:auto; right:-10px; }
}

@media (prefers-reduced-motion:reduce){
  .aa-nextbar:hover{ transform:none; }
  .aa-nextbar__live i{ animation:none; }
  .aa-nextbar__progress i{ transition:none; }
  .aa-nextbar__jump:hover svg{ transform:none; }
}

/* dark mode */
html[data-theme="dark"] .aa-nextbar{
  background:linear-gradient(180deg,#16222F 0%, #111C27 100%);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 26px 64px -30px rgba(0,0,0,.80);
}
html[data-theme="dark"] .aa-nextbar:hover{ border-color:rgba(127,179,245,.34); }
html[data-theme="dark"] .aa-nextbar__label{ color:#94A3B8; }
html[data-theme="dark"] .aa-nextbar__live{
  color:#86EFAC; background:rgba(134,239,172,.12); border-color:rgba(134,239,172,.22);
}
html[data-theme="dark"] .aa-nextbar__time > b{ color:#fff; }
html[data-theme="dark"] .aa-nextbar__in{ color:#86EFAC; background:rgba(134,239,172,.12); }
html[data-theme="dark"] .aa-nextbar__jump{ color:#7FB3F5; }
html[data-theme="dark"] .aa-nextbar__place{ color:#fff; }
html[data-theme="dark"] .aa-nextbar__pin{ background:#16222F; border-color:#7FB3F5; }
html[data-theme="dark"] .aa-nextbar__pin--end{
  background:#86EFAC; border-color:#86EFAC; box-shadow:0 0 0 3px rgba(134,239,172,.16);
}
html[data-theme="dark"] .aa-nextbar__mid,
html[data-theme="dark"] .aa-nextbar__stub{ border-color:rgba(255,255,255,.16); }
html[data-theme="dark"] .aa-nextbar__bus{ color:#7FB3F5; }
html[data-theme="dark"] .aa-nextbar__facts b{ color:#fff; }
html[data-theme="dark"] .aa-nextbar__stub{ background:rgba(255,255,255,.03); }
html[data-theme="dark"] .aa-nextbar__stub::before,
html[data-theme="dark"] .aa-nextbar__stub::after{
  background:var(--aa-panel); border-color:rgba(255,255,255,.09);
}
html[data-theme="dark"] .aa-nextbar__cell svg{ color:#7FB3F5; }
html[data-theme="dark"] .aa-nextbar__weather svg{ color:#FBBF24; }
html[data-theme="dark"] .aa-nextbar__cell-body b{ color:#fff; }
html[data-theme="dark"] .aa-nextbar__cell-body span{ color:#94A3B8; }
html[data-theme="dark"] .aa-nextbar__progress{ background:rgba(255,255,255,.07); }
html[data-theme="dark"] .aa-nextbar.is-done .aa-nextbar__time > b{ color:#94A3B8; }
html[data-theme="dark"] .aa-nextbar.is-done .aa-nextbar__live{
  color:#94A3B8; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] .aa-nextbar.is-done .aa-nextbar__in{ color:#94A3B8; background:rgba(255,255,255,.06); }
/* The timetable is the product, so it sits directly under the hero.
   Pegasus puts campaign cards here. We put the hour. */
.aa-tt__axes{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
/* Five line chips (~1060px) plus the day selector (320px) exceed the 1280px
   column, so the selector wraps to its own row. `margin-left:auto` keeps it
   right-aligned whether it wrapped or not — `justify-content:space-between`
   would dump it at the left the moment it wrapped. */
.aa-tt__axes > .aa-seg{ width:320px; margin-left:auto; }
/* `max-width:100%` is load-bearing, and `flex-basis` alone is not enough.
   Five line chips are ~1060px wide. Left unconstrained the row takes its
   content width, `overflow-x:auto` never engages, and the whole PAGE scrolls
   sideways. Worse, at ≤700px the axes become `flex-direction:column`, where
   `flex-wrap:wrap` wraps along the HORIZONTAL axis: the flex line's cross size
   is then the widest child (1054px) and `align-items:stretch` grows this row
   to match, overflowing its 452px container. `max-width:100%` stops both. */
.aa-tt__lines{
  flex:1 1 100%; min-width:0; max-width:100%;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:12px; padding-bottom:2px;
  overflow-x:visible; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.aa-tt__lines::-webkit-scrollbar{ display:none; }
.aa-chip{
  flex:none; min-width:0; height:56px; padding:0 8px 0 6px; border-radius:14px;
  border:1px solid var(--aa-line); background:var(--aa-panel);
  font-size:13px; font-weight:600; color:var(--aa-ink); white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color .16s var(--aa-ease), background-color .16s var(--aa-ease), color .16s var(--aa-ease), transform .12s var(--aa-ease), box-shadow .16s var(--aa-ease);
  cursor:pointer; user-select:none;
}
.aa-chip svg{ width:18px; height:18px; color:var(--aa-ink-mute); flex:none; }
.aa-chip:hover{ border-color:var(--aa-blue); color:var(--aa-blue); transform:translateY(-1px); }
.aa-chip:hover svg{ color:var(--aa-blue); }
.aa-chip[aria-pressed="true"]{ background:var(--aa-blue); border-color:var(--aa-blue); color:#fff; box-shadow:0 8px 18px -6px rgba(0,87,217,.35); transform:translateY(-1px); }
.aa-chip[aria-pressed="true"] svg{ color:#fff; }
.aa-chip__badge{
  font-size:10px; font-weight:600; letter-spacing:.03em;
  padding:2px 6px; border-radius:var(--aa-r-sm); background:var(--aa-canvas); color:var(--aa-ink-mute);
}
.aa-chip[aria-pressed="true"] .aa-chip__badge{ background:rgba(255,255,255,.2); color:#fff; }

/* The meta row used to supply the breathing space between the stop chips and
   the first period. It was removed; the space it held was not decoration. */
#ttGrid{ margin-top:28px; }
.aa-tt__period{ margin-top:28px; padding:22px 24px 24px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-tt__period:first-of-type{ margin-top:0; }
.aa-tt__periodhead{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.aa-tt__periodhead span{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--aa-ink); white-space:nowrap;
}
.aa-tt__periodicon{
  width:20px; height:20px; color:var(--aa-blue); flex:none;
}
.aa-tt__periodhead[data-period="oglen"] .aa-tt__periodicon{ color:var(--aa-amber); }
.aa-tt__periodhead[data-period="aksam"] .aa-tt__periodicon{ color:var(--aa-navy); }
.aa-tt__periodhead[data-period="gece"] .aa-tt__periodicon{ color:var(--aa-ink-mute); }
.aa-tt__periodhead::after{ content:''; flex:1; height:1px; background:var(--aa-line-soft); }

.aa-tt__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:10px; }
/* The chip carries the time and nothing else. It used to reserve a second line
   for the countdown, which left every other chip with dead space under its
   number and made the grid read badly. The countdown moved to the section
   head (`.aa-next`), where it is a headline fact instead of a chip's footnote. */
.aa-time{
  position:relative; min-width:0; height:54px; border:1px solid var(--aa-line);
  border-radius:14px; background:var(--aa-panel);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .16s var(--aa-ease), border-color .16s var(--aa-ease),
             color .16s var(--aa-ease), opacity .3s var(--aa-ease), transform .16s var(--aa-ease), box-shadow .16s var(--aa-ease);
}
.aa-time__h{ font-size:15px; font-weight:600; line-height:1.2; color:var(--aa-ink); letter-spacing:-0.01em; }

/* Hover: only a gentle background tone shift — no border/text colour change
   (Beyazıt 2026-07-12). A tooltip above the chip shows the time remaining. */
.aa-time:hover{ background:var(--aa-canvas); border-color:var(--aa-ink-mute); transform:translateY(-2px); box-shadow:0 6px 16px -6px rgba(9,43,68,.12); }
.aa-time__tip{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:5px 10px; border-radius:8px; background:var(--aa-navy); color:#fff;
  font-size:12px; font-weight:600; white-space:nowrap; line-height:1.2;
  opacity:0; pointer-events:none; transition:opacity .14s var(--aa-ease); z-index:6;
}
.aa-time__tip:empty{ display:none; }
.aa-time:hover .aa-time__tip{ opacity:1; }

.aa-time.is-past{ opacity:.42; background:var(--aa-canvas); border-color:transparent; pointer-events:none; }
/* A departure already made, but the bus is STILL on the road — that is live
   information, not history. It does not get buried at 38%. */
.aa-time.is-past.is-live{ opacity:.75; border-color:var(--aa-line); }

.aa-time.is-next{ background:var(--aa-blue); border-color:var(--aa-blue); box-shadow:0 8px 20px -8px rgba(0,87,217,.45); }
.aa-time.is-next .aa-time__h{ color:#fff; font-weight:700; }
/* it is already the answer — it does not respond to hover */
.aa-time.is-next:hover{ background:var(--aa-blue); transform:none; box-shadow:0 8px 20px -8px rgba(0,87,217,.45); }
.aa-time.is-next:hover .aa-time__h{ color:#fff; }

/* a bus on this run, right now */
.aa-time.is-live::after{
  content:''; position:absolute; top:8px; right:8px;
  width:7px; height:7px; border-radius:50%; background:var(--aa-green); border:1.5px solid var(--aa-panel);
}
.aa-time.is-next.is-live::after{ background:#fff; border-color:var(--aa-blue); }

/* the now-line: a flex item at 100% basis, so it forces a wrap and lands
   between the past chips and the upcoming ones — at any width. */
.aa-nowline{
  flex-basis:100%; display:flex; align-items:center; gap:12px;
  margin:6px 0; pointer-events:none;
}
.aa-nowline__badge{
  flex:none; background:var(--aa-navy); color:#fff;
  font-size:12px; font-weight:600; padding:3px 8px; border-radius:var(--aa-r-sm);
}
.aa-nowline__rule{
  flex:1; height:1px; background:var(--aa-line);
  transform-origin:left;
  transition:transform .7s var(--aa-ease) .24s;
}
.aa-tt.is-revealed .aa-nowline__rule{ transform:scaleX(1); }

/* the client's own description of the boarding stop. AŞTİ has none in the
   API, so the element is hidden rather than filled with a plausible sentence. */
.aa-tt__desc{
  display:flex; align-items:center; gap:9px;
  margin:16px 0 0; font-size:12px; line-height:1.5; color:var(--aa-ink-soft);
}
.aa-tt__desc[hidden]{ display:none; }
.aa-tt__desc::before{
  content:''; flex:none; width:6px; height:6px; border-radius:50%;
  background:var(--aa-green);
}

/* ── 8b. The return direction has no timetable, so it gets no grid ─────────
   Esenboğa → city runs continuously, by passenger load, with staff on the
   arrivals platforms 7/24. Drawing a plausible-looking chip grid here would
   be inventing data (ARS.md §2.5). We state the truth instead.

   Modern card: larger rounded corners, soft gradient, floating shadow, and
   a structured icon-led stat row. */
.aa-return{
  display:grid; grid-template-columns:min(420px, 50%) 1fr;
  margin-top:48px;
  background:linear-gradient(135deg, var(--aa-panel) 0%, var(--aa-canvas) 100%);
  border:1px solid var(--aa-line); border-radius:var(--aa-r-xl);
  box-shadow:0 18px 44px -18px rgba(9,43,68,.12), 0 4px 12px -6px rgba(9,43,68,.06);
  overflow:hidden;
}
.aa-return__media{
  position:relative; flex:none; align-self:stretch; overflow:hidden;
  min-height:220px; border-right:1px solid var(--aa-line);
}
.aa-return__media img, .aa-return__media .aa-box{
  width:100%; height:100%; object-fit:cover; object-position:80% center;
  border:none; border-radius:0;
}
.aa-return__media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,87,217,.08) 0%, transparent 60%);
}
.aa-return__body{ flex:1; padding:30px 34px; min-width:0; align-self:center; }
.aa-return__body h3{ font-size:22px; font-weight:700; color:var(--aa-ink); line-height:1.2; }
.aa-return__body p{ margin-top:10px; font-size:15px; line-height:1.6; color:var(--aa-ink-soft); max-width:72ch; }
.aa-return__facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:16px;
  margin-top:22px; padding-top:22px; border-top:1px solid var(--aa-line);
}
.aa-return__stat{
  display:flex; flex-direction:column; gap:6px; padding:14px 16px;
  background:var(--aa-canvas); border:1px solid var(--aa-line); border-radius:var(--aa-r-md);
}
.aa-return__stat svg{
  width:20px; height:20px; color:var(--aa-blue);
}
.aa-return__num{ font-size:26px; font-weight:800; color:var(--aa-ink); line-height:1; letter-spacing:-0.02em; }
.aa-return__stat span{ font-size:12px; font-weight:600; color:var(--aa-ink-soft); text-transform:uppercase; letter-spacing:.04em; }
@media(max-width:700px){
  .aa-return{ grid-template-columns:1fr; }
  .aa-return__media{ width:100%; aspect-ratio:16/9; min-height:auto; border-right:none; border-bottom:1px solid var(--aa-line); }
  .aa-return__media img, .aa-return__media .aa-box{ object-position:80% center; }
  .aa-return__media .aa-box{ border-right:none; border-bottom:1px solid var(--aa-line); }
  .aa-return__body{ padding:22px; }
}

/* ── 7b. Uçuşuma Göre — the hero card's third mode ─────────────────────────
   A tool, not a second signature (design-principles.md §5). It lives in the
   search card because that is where a traveller arrives with a flight time in
   their head. Two passenger modes; the toggle sits above the fields, the way
   the reference puts its Tek Yön / Gidiş Dönüş switch. */
/* Yolcu tipi now sits inline with the other fields, not on its own row above
   (Beyazıt 2026-07-12). The panel is a wrapping flex row; the mode grid takes
   the remaining width so the stop field shrinks to fit. */
.aa-flightpanel{ display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.aa-field--paxtype{ width:180px; flex:none; }
/* the native time picker's clock icon, hidden (Beyazıt 2026-07-12) */
#flightTime::-webkit-calendar-picker-indicator{ display:none; }
#flightTime{ padding-right:0; }

.aa-grid--depart{ display:grid; grid-template-columns:200px 240px 1fr 180px; gap:12px; align-items:end; flex:1 1 auto; min-width:0; }
.aa-grid--arrive{ display:grid; grid-template-columns:1fr 1fr 180px; gap:12px; align-items:end; flex:1 1 auto; min-width:0; }
.aa-grid--depart .aa-seg{ height:64px; }
.aa-flightpanel .aa-btn--primary{ height:64px; font-size:15px; }

/* Not an input. It states where an arriving passenger boards, which is a fact,
   not a choice — so it must not look like a control they failed to fill in. */
.aa-field--static{
  background:var(--aa-canvas); border-style:dashed; cursor:default;
}
.aa-field--static .aa-field__value{ color:var(--aa-ink-soft); }

.aa-flight__result{
  flex-basis:100%; margin-top:16px; padding:14px 16px; border-radius:var(--aa-r-md);
  background:var(--aa-blue-wash); border:1px solid var(--aa-blue);
  font-size:15px; line-height:1.55; color:var(--aa-ink);
}
.aa-flight__result b{ font-weight:700; color:var(--aa-blue-ink); }
.aa-flight__result.is-warn{ background:#FEF6E7; border-color:var(--aa-amber); }
.aa-flight__result.is-warn b{ color:#8A5A00; }
.aa-flight__note{ margin-top:14px; }

@media(max-width:900px){
  .aa-grid--depart, .aa-grid--arrive{ grid-template-columns:1fr; flex-basis:100%; }
  .aa-field--paxtype{ width:100%; }
}

/* the departure the flight tool points at — distinct from `.is-next` (blue
   fill) and `.is-live` (green dot), because it means a third thing */
.aa-time.is-suggested{
  outline:2px solid var(--aa-navy); outline-offset:2px;
  background:var(--aa-panel);
}
.aa-time.is-suggested .aa-time__h{ color:var(--aa-navy); }

/* ── 8d. Duraklar ─────────────────────────────────────────────────────────
   Six of the client's fourteen FAQs ask where the stop is. Here is the answer,
   in their words. AŞTİ carries no description in the API, so its card says so
   rather than inventing a plausible corner of Ankara. */
.aa-stops__grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
.aa-stopcard{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--aa-panel); border:1px solid var(--aa-line);
  border-radius:var(--aa-r-lg);
  transition:border-color .16s var(--aa-ease);
}
/* 16:9 photo area at the top of each stop card — gray-box placeholder; the real
   per-stop photo is client/developer-provided (Beyazıt 2026-07-12, §2.5). */
.aa-stopcard__media{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:var(--aa-canvas); border-bottom:1px solid var(--aa-line); color:var(--aa-ink-mute);
}
.aa-stopcard__media svg{ width:24px; height:24px; opacity:.5; }
.aa-stopcard__media img{ width:100%; height:100%; object-fit:cover; }
/* Attribution line for the CC BY-SA stop photos. Deliberately quiet — it is a
   licence obligation, not content. */
.aa-stops__credits{ margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--aa-ink-mute); }
.aa-stops__credits a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.aa-stops__credits a:hover{ color:var(--aa-ink-soft); }
.aa-stopcard__inner{ display:flex; flex-direction:column; flex:1; padding:18px 20px; }
.aa-stopcard__inner .aa-more{ margin-top:auto; padding-top:14px; }
/* Esenboğa now looks like the other stop cards (Beyazıt 2026-07-12): the
   distinct blue airport styling was removed; it still drives the airport
   behaviour via the data flag, only its appearance is uniform. */
.aa-stopcard:hover{ border-color:var(--aa-green); }
.aa-stopcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.aa-stopcard__desc{ margin-top:10px; font-size:14px; line-height:1.55; color:var(--aa-ink-soft); }
.aa-stopcard__desc--empty{ font-style:italic; color:var(--aa-ink-mute); }
.aa-stopcard__notes{ list-style:none; margin:12px 0 0; padding:0; }
.aa-stopcard__notes li{
  position:relative; padding-left:16px; margin-top:6px;
  font-size:12px; line-height:1.5; color:var(--aa-ink-mute);
}
.aa-stopcard__notes li::before{
  content:''; position:absolute; left:0; top:8px; width:5px; height:5px;
  border-radius:50%; background:var(--aa-green);
}
/* 5-up on desktop, degrading gracefully (Beyazıt 2026-07-12) */
@media(max-width:1100px){ .aa-stops__grid{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:640px){ .aa-stops__grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:400px){ .aa-stops__grid{ grid-template-columns:1fr; } }
/* the link sits on the card's floor; the notes stay under the sentence they
   belong to, instead of being pushed down with it */
.aa-stopcard .aa-more{ margin-top:auto; padding-top:18px; align-self:flex-start; }

/* ── 9. Routes ─────────────────────────────────────────────────────────── */
/* Routes section — large map-style cards with a coloured route line */
.aa-routes__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.aa-routes-sec{ position:relative; overflow:hidden; background:var(--aa-canvas); }
.aa-routes-sec__bg{ display:none; }
.aa-routes-sec > .aa-wrap{ position:relative; z-index:1; }
.aa-routes-sec__head{ text-align:center; justify-content:center; margin-bottom:40px; }
.aa-routes-sec__head > div{ display:flex; flex-direction:column; align-items:center; }
.aa-routes-sec .aa-section__head h2{ color:var(--aa-ink); }
.aa-routes-sec .aa-section__head p{ color:var(--aa-ink-soft); max-width:56ch; }
.aa-routes-sec .aa-more{
  color:var(--aa-ink); background:var(--aa-panel); border:1px solid var(--aa-line);
  padding:8px 18px; border-radius:999px; font-size:13px; font-weight:600;
  text-decoration:none; margin-top:16px;
  transition:background .2s var(--aa-ease), border-color .2s var(--aa-ease), transform .2s var(--aa-ease);
}
.aa-routes-sec .aa-more:hover{ color:var(--aa-ink); background:var(--aa-canvas); border-color:var(--aa-blue); text-decoration:none; }

.aa-route{
  display:flex; flex-direction:column;
  background:var(--aa-panel); border-radius:var(--aa-r-xl); overflow:hidden;
  border:1px solid var(--aa-line); box-shadow:0 20px 50px -20px rgba(9,43,68,.15), 0 6px 18px -8px rgba(9,43,68,.08);
  transition:transform .25s var(--aa-ease), box-shadow .25s var(--aa-ease), border-color .25s var(--aa-ease);
  position:relative;
}
.aa-route::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--line) 0%, var(--line-ink) 100%);
}
.aa-route:hover{ transform:translateY(-4px); box-shadow:0 28px 70px -28px rgba(9,43,68,.22), 0 8px 24px -10px rgba(9,43,68,.12); border-color:rgba(var(--line-rgb),.38); }

/* --line is the direction's colour, set once per card so the tile, the rail,
   the terminal nodes, the tags and the CTA all agree without repeating a
   nth-child override for each of them. */
.aa-route{ --line:var(--aa-blue); --line-ink:var(--aa-blue-ink); --line-rgb:0,87,217; }
.aa-route:nth-child(2){ --line:var(--aa-green); --line-ink:var(--aa-green-ink); --line-rgb:95,156,81; }

.aa-route__canvas{ flex:1; padding:24px 24px 22px; display:flex; flex-direction:column; gap:20px; }
.aa-route__header{ display:flex; align-items:flex-start; gap:15px; }
.aa-route__tile{
  display:grid; place-items:center; flex:none; width:46px; height:46px;
  border-radius:var(--aa-r-lg); color:var(--line);
  background:rgba(var(--line-rgb),.10); border:1px solid rgba(var(--line-rgb),.18);
}
.aa-route__tile svg{ width:22px; height:22px; }
.aa-route__eyebrow{
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--aa-ink-mute);
}
.aa-route__chip{
  padding:2px 8px; border-radius:var(--aa-r-pill); letter-spacing:.06em;
  color:var(--aa-line-ink); background:rgba(var(--line-rgb),.11);
  border:1px solid rgba(var(--line-rgb),.22);
}
.aa-route__title{ font-size:18px; font-weight:800; color:var(--aa-ink); margin:0; line-height:1.25; }
.aa-route__desc{ font-size:14px; color:var(--aa-ink-soft); line-height:1.45; margin:6px 0 0; max-width:34ch; }

/* the line itself. Each stop draws the half-rail above and below its own node,
   so the rail follows the row however tall a wrapped stop name makes it. */
/* the ladders stretch to the card's floor, so the two cards — seven stops out,
   eight back — end level instead of leaving the shorter one with dead air */
.aa-route__stops{ flex:1; display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
.aa-route__stop{
  position:relative; flex:1; min-height:34px;
  display:grid; grid-template-columns:12px minmax(0,1fr) auto;
  align-items:center; column-gap:14px; padding:7px 0;
}
.aa-route__stop::before,
.aa-route__stop::after{
  content:''; position:absolute; left:5px; width:2px; background:rgba(var(--line-rgb),.32);
}
.aa-route__stop::before{ top:0; height:50%; }              /* rail from the stop above */
.aa-route__stop::after{ top:50%; bottom:0; }               /* rail to the stop below  */
.aa-route__stop:first-child::before,
.aa-route__stop:last-child::after{ display:none; }
.aa-route__node{
  position:relative; z-index:1; box-sizing:border-box;
  width:12px; height:12px; border-radius:50%;
  background:var(--aa-panel); border:2px solid rgba(var(--line-rgb),.45);
}
.aa-route__stop.is-term .aa-route__node{
  background:var(--line); border-color:var(--line);
  box-shadow:0 0 0 3px rgba(var(--line-rgb),.15);
}
.aa-route__name{ font-size:14px; font-weight:600; color:var(--aa-ink); line-height:1.4; }
.aa-route__stop.is-term .aa-route__name{ font-weight:800; }
.aa-route__tag{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--aa-ink-mute); white-space:nowrap;
}
/* the finding: this stop is served in one direction only */
.aa-route__tag--only{
  padding:3px 9px; border-radius:var(--aa-r-pill);
  font-size:11px; font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--aa-line-ink); background:rgba(var(--line-rgb),.10);
}

.aa-route__foot{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 24px 22px; border-top:1px solid var(--aa-line-soft);
  font-size:12px; color:var(--aa-ink-mute); background:var(--aa-canvas);
}
.aa-route__meta b{ color:var(--aa-ink); font-weight:800; font-size:13px; }
.aa-route__cta{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:auto; min-height:44px; padding:0 20px; border-radius:var(--aa-r-pill);
  background:var(--line); color:#fff; font-size:13px; font-weight:700; text-decoration:none;
  transition:background .2s var(--aa-ease), transform .2s var(--aa-ease);
}
.aa-route__cta svg{ width:15px; height:15px; transition:transform .18s var(--aa-ease); }
.aa-route__cta:hover{ background:var(--line-ink); transform:translateY(-2px); color:#fff; text-decoration:none; }
.aa-route__cta:hover svg{ transform:translateX(3px); }

@media (max-width:980px){
  .aa-routes__grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .aa-route__canvas{ padding:18px 18px 16px; }
  .aa-route__foot{ padding:14px 18px 18px; }
  .aa-route__cta{ margin-left:0; width:100%; justify-content:center; margin-top:4px; }
  /* the tag drops under the stop name rather than squeezing it */
  .aa-route__stop{ grid-template-columns:12px minmax(0,1fr); row-gap:3px; }
  .aa-route__tag{ grid-column:2; justify-self:start; }
}
@media (prefers-reduced-motion:reduce){
  .aa-route:hover{ transform:none; }
  .aa-route__cta:hover{ transform:none; }
  .aa-route__cta:hover svg{ transform:none; }
}

/* dark mode */
html[data-theme="dark"] .aa-route{
  background:rgba(30,41,54,.95); border-color:rgba(255,255,255,.10);
  --line:#4C8DF6; --line-ink:#9CC6FA; --line-rgb:76,141,246;
}
html[data-theme="dark"] .aa-route:nth-child(2){ --line:#5FAE4E; --line-ink:#A7E8B4; --line-rgb:134,239,172; }
html[data-theme="dark"] .aa-route:hover{ border-color:rgba(var(--line-rgb),.5); }
html[data-theme="dark"] .aa-route__title,
html[data-theme="dark"] .aa-route__name{ color:#fff; }
html[data-theme="dark"] .aa-route__desc{ color:#94A3B8; }
html[data-theme="dark"] .aa-route__node{ background:#1E2936; }
html[data-theme="dark"] .aa-route__stop.is-term .aa-route__node{ background:var(--line); border-color:var(--line); }
html[data-theme="dark"] .aa-route__cta,
html[data-theme="dark"] .aa-route__cta:hover{ color:#0B141E; }
html[data-theme="dark"] .aa-route__foot{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .aa-route__meta b{ color:#fff; }
/* ── 10. Stats — REMOVED 2026-07-10 ────────────────────────────────────── */
/* The trust strip read `12 otobüs · 9 durak · 5 hat · 39 koltuk`. Measuring
   the client's live system showed `5 hat` is false and that `12 otobüs` /
   `39 koltuk` exist only in a demo data layer that declares itself synthetic.
   Two of four figures were unverifiable, so the section was cut rather than
   published behind a data-slot. The figures that ARE real — 48 sefer/gün,
   9 durak, 60 dk, 7/24 — now live in the timetable meta row and the return
   card, where they carry meaning instead of decorating a counter. */

/* ── 10b. Full-bleed CTA band ──────────────────────────────────────────────
   Rebuilt 2026-08-10. The band used to be white copy laid on a scrimmed
   photograph — the hero's move, repeated 700px further down, which made this
   read as a second hero instead of an offer. It now carries the offer as the
   object being sold: a TICKET. Face = the pitch, stub = the route, and a
   perforation between them.

   The band still owns the photograph, and the photograph is still allowed to
   be missing: the gray-box keeps the navy the image will sit under, and the
   card is opaque, so the section is legible either way. */
.aa-cta{
  position:relative; overflow:hidden;
  background:var(--aa-navy);
  padding:clamp(56px, 6vw, 96px) 0;
}
.aa-cta__media{ position:absolute; inset:0; }
.aa-cta__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.aa-cta__media .aa-box{
  width:100%; height:100%; border:none; border-radius:0;
  background:linear-gradient(180deg,#0E3A5C 0%, var(--aa-navy) 100%);
  color:rgba(255,255,255,.34);
}
.aa-cta__media .aa-box svg{ opacity:.3; }
/* Two scrims. The vertical one seats the band against the white sections above
   and below so the photo does not end on a hard edge; the flat wash under it
   keeps a bright frame (sky, terminal glass) from fighting the card's shadow.
   No horizontal gradient any more — nothing is set on the photo to protect. */
.aa-cta::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,43,68,.80) 0%, rgba(9,43,68,.34) 42%, rgba(9,43,68,.80) 100%),
    rgba(9,43,68,.28);
}
.aa-cta > .aa-wrap{ position:relative; z-index:2; }

/* the ticket ─────────────────────────────────────────────────────────────
   Two elements, not one, and the split is load-bearing:
     .aa-pass       radius + shadow. A mask clips everything painted outside
                    the border box, and an outer box-shadow is exactly that —
                    put the shadow on the masked element and it vanishes.
     .aa-pass__card the mask, the background, the grid.
   The shadow is the hero card's, and permitted for the hero card's reason:
   this too floats over a photograph, where a flat card reads as a mistake. */
.aa-pass{
  --stub: 316px;   /* also the seam position — the mask reads it */
  --notch: 15px;
  max-width:1040px; margin:0 auto;
  border-radius:var(--aa-r-xl);
  box-shadow:var(--aa-shadow-card);
}
/* The notches are CUT, not painted. Two circles of navy would be a lie the
   moment the photograph lands behind them; a mask makes them holes, and the
   photo shows through whatever it turns out to be.
   Degradation is silent and safe: without `mask-composite` the two layers
   UNION (each is "everything except one hole", so the union is everything)
   and the card simply renders with no notches — never with no card. */
.aa-pass__card{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) var(--stub);
  background:var(--aa-panel);
  border-radius:var(--aa-r-xl);
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,    transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,    transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, #000 100%);
          mask-composite:intersect;
}

/* face */
.aa-pass__face{ padding:clamp(28px, 3.4vw, 44px); }
.aa-pass__brand{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--aa-blue);
}
.aa-pass__brand svg{ width:15px; height:15px; }
.aa-pass__title{
  font-size:clamp(24px, 2.3vw, 32px);
  max-width:19ch; margin-top:12px;
}
.aa-pass__sub{ color:var(--aa-ink-soft); max-width:46ch; margin-top:12px; }
.aa-pass__actions{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  margin-top:clamp(20px, 2.4vw, 28px);
}

/* stub ───────────────────────────────────────────────────────────────────
   Tinted one step back from the face so the tear-off reads as the tear-off,
   and the tint is a token — dark mode inverts the relationship for free. */
.aa-pass__stub{
  position:relative;
  padding:clamp(24px, 2.6vw, 32px);
  background:var(--aa-canvas);
  display:flex; flex-direction:column; justify-content:center;
}
/* the perforation. Stops short of both notches at each end so the dashes never
   run into the cut. */
.aa-pass__stub::before{
  content:''; position:absolute; left:0; top:var(--notch); bottom:var(--notch); width:2px;
  background-image:repeating-linear-gradient(to bottom,
    var(--aa-line) 0 5px, transparent 5px 11px);
}
.aa-pass__stub-label{ color:var(--aa-ink-mute); }

.aa-pass__route{
  display:grid; grid-template-columns:auto minmax(28px,1fr) auto;
  align-items:center; column-gap:10px; row-gap:3px;
  margin-top:14px;
}
.aa-pass__code{ font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; }
.aa-pass__code--to{ text-align:right; }
.aa-pass__place{ grid-row:2; grid-column:1; font-size:11px; color:var(--aa-ink-mute); line-height:1.4; }
.aa-pass__place--to{ grid-column:3; text-align:right; }
/* The connector shows a pair, not a direction — the line runs both ways all
   day and an arrowhead would claim otherwise. */
.aa-pass__link{ position:relative; display:flex; align-items:center; justify-content:center; }
.aa-pass__link::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  border-top:2px dotted var(--aa-line);
}
.aa-pass__link svg{
  position:relative; width:17px; height:17px;
  color:var(--aa-blue); background:var(--aa-canvas);
  padding:0 6px; box-sizing:content-box;
}

.aa-pass__fields{ margin:22px 0 0; }
.aa-pass__fields > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-top:1px solid var(--aa-line);
}
.aa-pass__fields dt{ font-size:12px; font-weight:500; color:var(--aa-ink-mute); }
.aa-pass__fields dd{ margin:0; font-size:14px; font-weight:600; text-align:right; }

/* ≤900px: the ticket tears the other way — face over stub. The mask goes with
   the vertical seam; a horizontal one would have to guess the stub's height,
   and a notch that lands 4px off its seam is worse than no notch.
   The stub keeps two columns of its own here. Stacked in one, its content is
   ~340px wide inside an 840px band and the tear-off reads half-empty. */
@media (max-width:900px){
  .aa-pass__card{
    grid-template-columns:1fr;
    -webkit-mask-image:none; mask-image:none;
  }
  .aa-pass__stub::before{
    left:var(--notch); right:var(--notch); top:0; bottom:auto; width:auto; height:2px;
    background-image:repeating-linear-gradient(to right,
      var(--aa-line) 0 5px, transparent 5px 11px);
  }
  .aa-pass__stub{
    display:grid; align-content:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(28px, 5vw, 56px);
  }
  .aa-pass__stub-label{ grid-column:1; grid-row:1; }
  .aa-pass__route{ grid-column:1; grid-row:2; }
  .aa-pass__fields{ grid-column:2; grid-row:1 / span 2; align-self:center; margin-top:0; }
}
/* ≤620px: one column is now the honest layout — two would put "Her saat başı"
   on two lines to save space it does not have. */
@media (max-width:620px){
  .aa-pass__stub{ display:flex; flex-direction:column; }
  .aa-pass__fields{ margin-top:20px; }
}
@media (max-width:480px){
  .aa-pass__actions{ gap:16px; }
  .aa-pass__actions .aa-btn{ width:100%; }
}
/* dark mode: surfaces, hairlines and the perforation all read tokens, so they
   invert on their own. Only the accent needs a hand — #0057D9 on a dark panel
   is under 4.5:1, and this is the one place blue carries text. */
html[data-theme="dark"] .aa-pass__brand,
html[data-theme="dark"] .aa-pass__link svg{ color:#4C8DF6; }

/* ── 11. News ──────────────────────────────────────────────────────────── */
.aa-news__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.aa-card{
  background:var(--aa-panel); border:1px solid var(--aa-line);
  border-radius:var(--aa-r-lg); padding:24px;
  transition:border-color .16s var(--aa-ease);
  display:flex; flex-direction:column;
}
.aa-card:hover{ border-color:var(--aa-green); }
.aa-card h3{ margin:8px 0 10px; }
.aa-card p{
  font-size:14px; color:var(--aa-ink-soft); flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.aa-card .aa-more{ margin-top:16px; font-size:13px; }

/* ── 12. App strip ─────────────────────────────────────────────────────── */
/* The section read as unfinished: a short left column and a narrow right-aligned
   phone left a wide empty gutter. A soft blue-wash panel turns that void into an
   intentional field (blue, not the grey of the FAQ band directly below, so the
   two do not merge), and the feature list gives the copy body. The phone stays
   an honest gray-box until the `mobile` surface ships its real screen. */
.aa-app__panel{ background:var(--aa-blue-wash); border-radius:var(--aa-r-lg); padding:56px 64px; }
.aa-app__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.aa-app p{ color:var(--aa-ink-soft); margin-top:14px; max-width:46ch; }
/* the three real promises from the copy, as a scannable list — genuine content
   (real Lucide icons, real capability text), never an invented app screenshot.
   Green icons: the secondary accent for list bullets below the hero (§3). */
.aa-app__feats{ margin-top:26px; display:flex; flex-direction:column; gap:15px; }
.aa-app__feats li{ display:flex; align-items:center; gap:13px; font-size:15px; font-weight:600; color:var(--aa-ink); }
.aa-app__feats svg{ width:22px; height:22px; flex:none; color:var(--aa-green); }
.aa-app__badges{ display:flex; gap:12px; margin-top:28px; }
.aa-app__badges .aa-box{ width:168px; height:52px; padding:8px; }
.aa-app__phone{ max-width:220px; margin-left:auto; aspect-ratio:9/19.5; }

/* ── 13. FAQ ───────────────────────────────────────────────────────────── */
/* Minimal FAQ — two-column clean cards */
.aa-faq__list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.aa-faq details{
  border:1px solid var(--aa-line);
  border-radius:var(--aa-r-md);
  background:var(--aa-panel);
  transition:border-color .2s var(--aa-ease), background-color .2s var(--aa-ease);
}
.aa-faq details:hover{ border-color:var(--aa-blue); }
.aa-faq details[open]{ border-color:var(--aa-blue); background:var(--aa-canvas); }
.aa-faq summary{
  list-style:none; cursor:pointer; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:15px; font-weight:700; color:var(--aa-ink);
  -webkit-tap-highlight-color:transparent;
}
.aa-faq summary::-webkit-details-marker{ display:none; }
.aa-faq summary svg{ width:18px; height:18px; color:var(--aa-ink-mute); transition:transform .2s var(--aa-ease); flex:none; }
.aa-faq details[open] summary svg{ transform:rotate(180deg); color:var(--aa-blue); }
.aa-faq summary::before{ display:none; }
.aa-faq__a{ padding:0 20px 18px; color:var(--aa-ink-soft); max-width:68ch; font-size:14px; line-height:1.6; }
.aa-faq__a--empty{ color:var(--aa-ink-mute); font-size:13px; font-style:italic; }

@media (max-width:800px){
  .aa-faq__list{ grid-template-columns:1fr; }
}

/* dark mode */
html[data-theme="dark"] .aa-faq details{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] .aa-faq details:hover{ border-color:var(--aa-blue); }
html[data-theme="dark"] .aa-faq details[open]{ border-color:var(--aa-blue); background:rgba(255,255,255,.06); }
html[data-theme="dark"] .aa-faq summary svg{ color:#94A3B8; }
html[data-theme="dark"] .aa-faq details[open] summary svg{ color:var(--aa-blue); }

/* ── 14. Footer ────────────────────────────────────────────────────────── */
/* Light, not navy. Bilet Dükkanı — which also takes payments — carries its
   whole legal apparatus in a white footer without difficulty, and the concept
   does not earn a dark slab here. */
.aa-footer{ background:var(--aa-panel); border-top:1px solid var(--aa-line); padding:64px 0 32px; }
/* footer brand row: logo + tagline + social (left), app buttons (right) */
.aa-footer__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:32px 40px; padding-bottom:40px; margin-bottom:40px; border-bottom:1px solid var(--aa-line);
}
.aa-footer__logo{ height:38px; width:auto; display:block; }
.aa-footer__brand{ max-width:360px; }
.aa-footer__brand p{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--aa-ink-soft); }
.aa-footer__apps{ display:flex; gap:12px; flex-wrap:wrap; }
.aa-storebtn{
  display:flex; align-items:center; gap:11px; padding:9px 18px;
  border-radius:var(--aa-r-md); background:var(--aa-ink); color:#fff;
  transition:background-color .16s var(--aa-ease);
}
.aa-storebtn:hover{ background:#0E1A28; }
.aa-storebtn svg{ width:22px; height:22px; }
.aa-storebtn span{ display:flex; flex-direction:column; line-height:1.15; font-size:15px; font-weight:600; }
.aa-storebtn small{ font-size:10px; font-weight:500; opacity:.7; }
.aa-footer__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:40px; }
.aa-footer h4{ font-size:14px; font-weight:700; margin-bottom:14px; }
.aa-footer ul{ list-style:none; margin:0; padding:0; }
.aa-footer li a, .aa-footer address a, .aa-footer address span{
  display:flex; align-items:center; gap:9px; min-height:32px;
  font-size:14px; font-weight:400; color:var(--aa-ink-soft);
  transition:color .16s var(--aa-ease);
}
.aa-footer li a:hover, .aa-footer address a:hover{ color:var(--aa-green); }
.aa-footer address{ font-style:normal; }
.aa-footer address svg{ width:15px; height:15px; color:var(--aa-ink-mute); }
.aa-social{ display:flex; gap:12px; margin-top:18px; }
.aa-social a{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--aa-line); color:var(--aa-ink-soft);
  transition:border-color .16s var(--aa-ease), color .16s var(--aa-ease);
}
.aa-social a:hover{ border-color:var(--aa-green); color:var(--aa-green); }
.aa-social svg{ width:18px; height:18px; }

/* floating WhatsApp live-support button — a circle that expands to a pill on
   hover (Beyazıt 2026-07-12). Brand green #25D366. */
.aa-wa{
  position:fixed; right:24px; bottom:24px; z-index:80;
  display:inline-flex; align-items:center; height:56px; border-radius:28px;
  padding:0 13px; background:#25D366; color:#fff;
  box-shadow:0 10px 26px -6px rgba(37,211,102,.55);
  transition:padding-right .22s var(--aa-ease), box-shadow .16s var(--aa-ease);
}
.aa-wa:hover{ padding-right:20px; box-shadow:0 12px 30px -6px rgba(37,211,102,.7); }
.aa-wa svg{ width:30px; height:30px; flex:none; }
.aa-wa__label{
  max-width:0; overflow:hidden; opacity:0; margin-left:0; white-space:nowrap;
  font-size:15px; font-weight:600;
  transition:max-width .22s var(--aa-ease), opacity .18s var(--aa-ease), margin-left .22s var(--aa-ease);
}
.aa-wa:hover .aa-wa__label{ max-width:150px; opacity:1; margin-left:10px; }

.aa-footer__bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--aa-line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.aa-footer__bottom .aa-meta{ line-height:1.7; }
.aa-footer__pay{ display:flex; align-items:center; gap:16px; }
.aa-footer__pay .aa-box{ width:210px; height:44px; padding:6px; font-size:11px; }

/* ── 15. Reveal ────────────────────────────────────────────────────────── */
/* Gated behind `.js`. Without JavaScript nothing ever adds `.is-in`, so an
   ungated `opacity:0` would hide the whole page. Progressive enhancement:
   the page is fully readable with scripting off; motion is the enhancement. */
.js .aa-reveal{ opacity:0; transform:translateY(16px); }
.js .aa-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .6s var(--aa-ease), transform .6s var(--aa-ease);
  transition-delay:var(--d, 0ms);
}
/* chip settle — EASE_POP is permitted here and NOWHERE else:
   a bounded overshoot is allowed for small entrance pops, banned on
   scroll-linked or structural motion (design-principles.md §1). */
.js .aa-time{ opacity:0; transform:translateY(10px) scale(.96); }
.js .aa-nowline__rule{ transform:scaleX(0); }
.aa-tt.is-revealed .aa-time{
  opacity:1; transform:none;
  transition:opacity .42s var(--aa-pop) var(--d, 0ms), transform .42s var(--aa-pop) var(--d, 0ms),
             background-color .16s var(--aa-ease), border-color .16s var(--aa-ease);
}

/* ── 16. Responsive ────────────────────────────────────────────────────── */
@media (max-width:1100px){
  /* the card wraps to three rows here, so it is nearly twice as tall */
  .aa-hero{ --aa-hero-overlap:162px; }
  .aa-hero__media{ height:530px; }
  .aa-grid--buy{ grid-template-columns:1fr 48px 1fr; }
  .aa-grid--buy > *:nth-child(4){ grid-column:1 / 3; }
  .aa-grid--buy > *:nth-child(5){ grid-column:3 / 4; }
  .aa-grid--buy > *:nth-child(6){ grid-column:1 / -1; }
  .aa-grid--find{ grid-template-columns:1fr; }
  .aa-routes__grid{ grid-template-columns:1fr; }
  .aa-app__grid{ gap:40px; }
  .aa-footer__grid{ grid-template-columns:repeat(3,1fr); gap:32px; }
}
@media (max-width:900px){
  .aa-nav, .aa-header__right{ display:none; }
  .aa-burger{ display:flex; }
  .aa-section{ padding:64px 0; }

  /* The hero band is short here. The slide's CTA goes away — the search card
     sits directly beneath it and IS the call to action; slides 2 and 3 reach
     their targets through the nav sheet. */
  .aa-slide.is-active .aa-slide__text{ flex-direction:column; align-items:flex-start; }
  .aa-slide__text .aa-btn{ display:none; }
  /* Shorter box, and the copy is no longer confined to the left half — the
     figure gives back width so it stays a backdrop, not a collision. */
  .aa-slide__figure{ height:62%; max-width:34%; right:3%; }
  /* `right` above would fight `left:50%` and stretch the box — the centred
     variant opts back out of it. */
  .aa-slide__figure--center{ right:auto; }
  .aa-slide__bus{ height:80%; bottom:2%; }
  .aa-slide__tracks{ bottom:20%; height:12px; }
  /* Autoplay is off below 900px (see site.js), so there is nothing to pause:
     only the dots remain, as navigation. Constraint 16 binds auto-advancing
     sliders; this one does not auto-advance. */
  #heroPause, #heroPrev, #heroNext{ display:none; }
  /* left/right only — the bottom clearance is driven by --aa-hero-overlap */
  .aa-hero__nav{ padding-left:16px; padding-right:16px; }
  .aa-dots{ margin-left:0; }
  .aa-news__grid{ grid-template-columns:1fr; }
  .aa-app__grid{ grid-template-columns:1fr; }
  .aa-app__phone{ margin:0 auto; }
  .aa-app__panel{ padding:40px 28px; }
  /* every interactive target ≥44px */
  .aa-chip{ height:50px; }
  .aa-more{ min-height:44px; }
  /* the pill's tap target is the label inside it: the 44px track carries 4px
     padding + 1px border top and bottom, leaving 34px. The track grows to 54px
     so the label clears 44px. */
  .aa-seg{ height:54px; }
  .aa-swap{ width:44px; height:44px; }
  /* was a flex-era min-width; inside the grid Safari resolves the % against the whole
     grid (Chrome: the column) and the chips overflowed the page on iPhones. */
  .aa-time{ min-width:0; }
}
@media (max-width:700px){
  :root{ --aa-gutter:24px; }
  /* Half of a 483px stacked card would bury the whole slider, so the overlap is
     capped here: enough to read as an overlap, not enough to eat the photo. */
  .aa-hero{ padding-top:calc(var(--aa-header) + 20px); --aa-hero-overlap:100px; }
  .aa-hero__media{ height:380px; border-radius:var(--aa-r-lg); }
  /* 380px box minus a 100px overlap leaves the copy nowhere to go — the
     figure steps out entirely rather than fight it. */
  .aa-slide__figure, .aa-slide__bus, .aa-slide__tracks{ display:none; }
  .aa-hero__content{ padding-top:80px; }
  .aa-section{ padding:48px 0; }
  .aa-search__body{ padding:16px; }
  .aa-search__tabs{ width:100%; padding:4px; gap:4px; }
  .aa-app__panel{ padding:28px 20px; }
  .aa-search__tabs .aa-tab{ flex:1; justify-content:center; padding:0 8px; gap:6px; font-size:13px; }
  .aa-search__tabs .aa-tab svg{ width:16px; height:16px; }
  .aa-grid--buy, .aa-grid--find{ grid-template-columns:1fr; }
  .aa-grid--buy > *, .aa-grid--find > *{ grid-column:1 / -1 !important; }
  /* Stacked, the swap button would claim a whole 44px row plus two gaps.
     Negative margins pull it back into the seam between the two stops. */
  .aa-swap{ align-self:flex-end; margin:-14px 0 -14px auto; z-index:1; }
  /* `nowrap` matters: in a column container, `wrap` wraps along the horizontal
     axis and lets a wide child dictate the line's cross size. */
  .aa-tt__axes{ align-items:stretch; flex-direction:column; flex-wrap:nowrap; }
  .aa-tt__axes > .aa-seg{ width:100%; margin-left:0; }
  /* was a flex-era min-width; inside the grid Safari resolves the % against the whole
     grid (Chrome: the column) and the chips overflowed the page on iPhones. */
  .aa-time{ min-width:0; }
  .aa-routes__grid{ gap:12px; }
  .aa-route{ border-radius:16px; }
  .aa-route__body{ padding:18px 20px 20px; }
  .aa-route__map{ padding:22px 18px 14px; }
  .aa-route__line{ left:18px; right:18px; top:38px; }
  .aa-route__dot{ width:12px; height:12px; border-width:2px; }
  .aa-route__node.is-start .aa-route__dot,
  .aa-route__node.is-end .aa-route__dot{ width:15px; height:15px; border-width:3px; }
  .aa-route__title{ font-size:16px; }
  .aa-route__cta{ margin-left:0; width:100%; text-align:center; margin-top:4px; }
  .aa-footer__grid{ grid-template-columns:1fr 1fr; }
  .aa-h2{ font-size:22px; }
  .aa-routes-sec__head{ margin-bottom:28px; }
}
@media (max-width:480px){
  .aa-footer__grid{ grid-template-columns:1fr; }
  .aa-cal{ width:min(308px, calc(100vw - 32px)); }
}

/* ── 16b. Travel — gezilecek yerler, varış, rota, harita (2026-10-29) ───── */
/* The home page below the hero is now a travel guide for people landing at
   Esenboğa: where to go, which stop to get off at, how the day can run.
   Same vocabulary as everything above — hairline cards, the 12px radius,
   blue for the primary act, green for section links and list markers. The
   one new move is the photo card with copy on a scrim: places sell on their
   picture, and a card that hides the photo behind a white body undersells it. */

/* small chip: filters and direction toggles, where 56px tiles are too heavy */
.aa-chip--sm{ height:40px; padding:0 14px; border-radius:var(--aa-r-pill); font-size:13px; display:inline-flex; }
.aa-chip--sm svg{ width:16px; height:16px; }

/* one-direction tag, independent of the route card's per-line colour vars */
.aa-onlytag{
  display:inline-block; padding:2px 8px; border-radius:var(--aa-r-pill);
  font-size:11px; font-weight:700; line-height:1.5; white-space:nowrap;
  color:var(--aa-green-ink); background:rgba(95,156,81,.12);
}
html[data-theme="dark"] .aa-onlytag{ color:#9CCB90; background:rgba(95,156,81,.18); }

.aa-eyebrow--green{ color:var(--aa-green); display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; }
.aa-eyebrow--green svg{ width:16px; height:16px; }

/* ── place card (photo + scrim) ── */
.aa-explore{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:260px; gap:16px;
}
.aa-place{
  position:relative; overflow:hidden; display:block; isolation:isolate;
  border-radius:var(--aa-r-lg); background:var(--aa-navy); color:#fff;
}
.aa-place--big{ grid-column:span 2; grid-row:span 2; }
.aa-place__media, .aa-place__media img{ position:absolute; inset:0; width:100%; height:100%; }
.aa-place__media img{ object-fit:cover; transition:transform .7s var(--aa-ease); }
.aa-place:hover .aa-place__media img{ transform:scale(1.04); }
/* the scrim exists for the copy, so it only covers where the copy sits */
.aa-place__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,43,68,0) 38%, rgba(9,43,68,.55) 66%, rgba(9,43,68,.88) 100%);
}
.aa-place__tag{
  position:absolute; top:14px; left:14px; z-index:1;
  padding:5px 11px; border-radius:var(--aa-r-pill);
  background:rgba(255,255,255,.92); color:#1B2B3D;   /* fixed ink: the pill stays white in both themes */
  font-size:12px; font-weight:600; line-height:1.3;
}
.aa-place__body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px; }
.aa-place__title{ font-size:18px; font-weight:700; line-height:1.25; }
.aa-place--big .aa-place__title{ font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-.01em; }
.aa-place__short{ margin-top:4px; font-size:14px; font-weight:400; color:rgba(255,255,255,.82); line-height:1.45; }
.aa-place:not(.aa-place--big) .aa-place__short{ display:none; }
.aa-place__stop{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:6px 11px; border-radius:var(--aa-r-pill);
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:12px; font-weight:500; line-height:1.3;
}
.aa-place__stop svg{ width:14px; height:14px; }
.aa-place__stop b{ font-weight:700; }
.aa-place__stop span{ color:rgba(255,255,255,.78); }
.aa-place:focus-visible{ outline-offset:3px; }

/* category shortcuts under the bento */
.aa-explore__cats{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.aa-explore__cats .aa-meta{ margin-right:4px; font-size:13px; }

.aa-credits{ margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--aa-ink-mute); }
.aa-credits a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.aa-credits a:hover{ color:var(--aa-ink-soft); }

/* ── arrival: steps + mini map ── */
.aa-arrive{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:56px; align-items:center; }
.aa-arrive__lead{ margin-top:10px; color:var(--aa-ink-soft); max-width:52ch; }
.aa-steps{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.aa-step{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:16px; padding-bottom:22px; }
/* the rail joins the numbers into one journey */
.aa-step:not(:last-child)::before{
  content:''; position:absolute; left:19px; top:42px; bottom:2px; width:2px;
  background:repeating-linear-gradient(180deg, var(--aa-line) 0 6px, transparent 6px 11px);
}
.aa-step__n{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--aa-blue-wash); color:var(--aa-blue); font-size:15px; font-weight:700;
}
.aa-step__n svg{ width:18px; height:18px; }
.aa-step h3{ font-size:16px; font-weight:700; line-height:1.35; padding-top:8px; }
.aa-step p{ margin-top:4px; font-size:14px; color:var(--aa-ink-soft); line-height:1.55; }
.aa-step p b{ color:var(--aa-ink); font-weight:600; }
.aa-arrive__actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }

/* ── map (mini + full share the marker and popup styles) ── */
.aa-map{
  position:relative; overflow:hidden; border-radius:var(--aa-r-lg);
  border:1px solid var(--aa-line); background:var(--aa-canvas);
}
.aa-arrive__map{ height:500px; }
.aa-map__fallback{ padding:28px; }
.aa-map__fallback ol{ margin:12px 0 0; padding-left:20px; color:var(--aa-ink-soft); font-size:14px; line-height:1.9; }
.aa-map__fallback b{ font-weight:700; color:var(--aa-ink); }
.aa-map__note{ margin-top:10px; font-size:12px; color:var(--aa-ink-mute); display:flex; gap:6px; align-items:flex-start; }
.aa-map__note svg{ width:14px; height:14px; margin-top:2px; flex:none; }




































/* ── one day in Ankara ── */
.aa-itin{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; position:relative; }
.aa-itin::before{
  content:''; position:absolute; left:0; right:0; top:59px; height:2px;
  background:repeating-linear-gradient(90deg, var(--aa-line) 0 8px, transparent 8px 14px);
}
.aa-itin__item{ position:relative; display:flex; flex-direction:column; }
.aa-itin__time{ font-size:13px; font-weight:700; color:var(--aa-blue); height:24px; }
.aa-itin__dot{
  position:relative; z-index:1; width:36px; height:36px; margin:10px 0 16px; border-radius:50%;
  display:grid; place-items:center; background:var(--aa-panel); border:2px solid var(--aa-green); color:var(--aa-green);
}
.aa-itin__dot svg{ width:16px; height:16px; }
.aa-itin__item.is-bus .aa-itin__dot{ background:var(--aa-blue); border-color:var(--aa-blue); color:#fff; }
.aa-itin__item h3{ font-size:15px; font-weight:700; line-height:1.35; }
.aa-itin__item p{ margin-top:4px; font-size:13px; color:var(--aa-ink-soft); line-height:1.5; }
.aa-itin__item a{ margin-top:8px; font-size:13px; }
.aa-itin__foot{ margin-top:28px; }

/* ── inner travel pages ── */
.aa-pagemain{ padding-top:var(--aa-header); background:var(--aa-panel); min-height:100vh; }
.aa-pagehead{ padding:44px 0 28px; }
.aa-backlink{ display:inline-flex; align-items:center; gap:7px; margin-bottom:16px; font-size:14px; font-weight:600; color:var(--aa-ink-soft); transition:color .16s var(--aa-ease); }
.aa-backlink svg{ width:16px; height:16px; }
.aa-backlink:hover{ color:var(--aa-blue); }
.aa-pagehead .aa-backlink{ display:flex; width:max-content; }
.aa-pagehead h1{ font-size:clamp(28px, 3vw, 38px); font-weight:700; letter-spacing:-.015em; line-height:1.15; }
.aa-pagehead p{ margin-top:10px; font-size:16px; color:var(--aa-ink-soft); max-width:62ch; }
.aa-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }

.aa-spots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap:20px; }
.aa-spot{
  display:flex; flex-direction:column; overflow:hidden; scroll-margin-top:calc(var(--aa-header) + 20px);
  background:var(--aa-panel); border:1px solid var(--aa-line); border-radius:var(--aa-r-lg);
  transition:border-color .16s var(--aa-ease), box-shadow .3s var(--aa-ease);
}
.aa-spot:hover{ border-color:var(--aa-green); }
.aa-spot.is-target{ border-color:var(--aa-blue); box-shadow:0 0 0 3px var(--aa-blue-wash); }
.aa-spot__media{ position:relative; aspect-ratio:3/2; background:var(--aa-canvas); }
/* absolute, or the image's intrinsic ratio overrides the box's 3/2 */
.aa-spot__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.aa-spot__body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
.aa-spot__title{ font-size:19px; font-weight:700; line-height:1.3; }
.aa-spot__desc{ margin-top:8px; font-size:14px; color:var(--aa-ink-soft); line-height:1.6; }
.aa-spot__facts{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--aa-line-soft); display:flex; flex-direction:column; gap:10px; }
.aa-spot__facts div{ display:grid; grid-template-columns:18px 1fr; column-gap:10px; align-items:start; }
.aa-spot__facts svg{ width:16px; height:16px; margin-top:2px; color:var(--aa-green); grid-row:span 2; }
.aa-spot__facts dt{ font-size:12px; font-weight:500; color:var(--aa-ink-mute); line-height:1.4; }
.aa-spot__facts dd{ margin:0; font-size:13px; font-weight:500; color:var(--aa-ink); line-height:1.45; }
.aa-spot__facts dd b{ font-weight:700; }
.aa-spot__body > .aa-more{ margin-top:auto; padding-top:16px; align-self:flex-start; }
.aa-pagenote{ margin-top:28px; }

/* ── full map page ── */
.aa-mapapp{
  display:grid; grid-template-columns:400px 1fr;
  height:calc(100vh - var(--aa-header)); height:calc(100dvh - var(--aa-header));
  border-top:1px solid var(--aa-line);
}
.aa-mapapp__side{ overflow-y:auto; border-right:1px solid var(--aa-line); background:var(--aa-panel); padding:24px 24px 32px; }
.aa-mapapp__side h1{ font-size:24px; font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.aa-mapapp__side > p{ margin-top:6px; font-size:14px; color:var(--aa-ink-soft); }
.aa-mapapp__map{ border:0; border-radius:0; height:100%; }
.aa-mapapp__dirs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.aa-mapapp__note{ margin-top:12px; padding:10px 12px; border-radius:var(--aa-r-md); background:var(--aa-blue-wash); font-size:13px; color:var(--aa-ink); line-height:1.5; }
.aa-mapapp__h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 10px; font-size:13px; font-weight:700; color:var(--aa-ink); }
.aa-mapapp__h label{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--aa-ink-soft); cursor:pointer; }
.aa-mapapp__h input{ accent-color:var(--aa-green); width:15px; height:15px; }
.aa-mapapp__list{ list-style:none; margin:0; padding:0; }

.aa-sidestop, .aa-sideplace{
  width:100%; text-align:left; display:flex; align-items:center; gap:12px;
  padding:10px; margin:0 -10px; width:calc(100% + 20px); border-radius:var(--aa-r-md);
  transition:background-color .14s var(--aa-ease);
}
.aa-sidestop:hover, .aa-sideplace:hover{ background:var(--aa-canvas); }
.aa-sidestop__n{
  flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--aa-blue); color:#fff; font-size:12px; font-weight:700;
}
.aa-sidestop__n.is-air{ background:var(--aa-navy); }
.aa-sidestop__n svg{ width:14px; height:14px; }
.aa-sidestop__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.aa-sidestop__body b, .aa-sideplace b{ font-size:14px; font-weight:700; color:var(--aa-ink); line-height:1.35; }
.aa-sidestop__body span, .aa-sideplace span span{ font-size:12px; color:var(--aa-ink-mute); line-height:1.45; }
.aa-sideplace img{ flex:none; width:52px; height:52px; border-radius:var(--aa-r-md); object-fit:cover; background:var(--aa-canvas); }
.aa-sideplace > span{ display:flex; flex-direction:column; min-width:0; }
.aa-mapapp .aa-credits{ margin-top:22px; }

@media (max-width:1100px){
  .aa-explore{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:240px; }
  .aa-arrive{ grid-template-columns:1fr; gap:36px; }
  .aa-arrive__map{ height:420px; }
  .aa-itin{ grid-template-columns:repeat(3, 1fr); row-gap:32px; }
  .aa-itin::before{ display:none; }
}
@media (max-width:900px){
  .aa-mapapp{ grid-template-columns:1fr; height:auto; }
  .aa-mapapp__map{ height:62vh; order:-1; }
  .aa-mapapp__side{ border-right:0; overflow:visible; }
}
/* The stop chips were sized for a desktop grid; at phone width "Esenboğa
   Havalimanı" pushed the page 22px sideways. The HTML has always promised a
   horizontal scroller here — this makes it one. */
@media (max-width:700px){
  .aa-tt__lines{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; margin-inline:calc(-1 * var(--aa-gutter)); padding-inline:var(--aa-gutter); }
  .aa-tt__lines .aa-chip{ flex:none; padding:0 16px; scroll-snap-align:start; }
}
@media (max-width:620px){
  .aa-explore{ grid-template-columns:1fr; grid-auto-rows:230px; }
  .aa-place--big{ grid-column:auto; grid-row:span 1; }
  .aa-place--big .aa-place__title{ font-size:22px; }
  .aa-place__short{ display:none; }
  .aa-arrive__map{ height:360px; }
  .aa-itin{ grid-template-columns:1fr; row-gap:0; }
  .aa-itin__item{ display:grid; grid-template-columns:36px 1fr; column-gap:16px; padding-bottom:20px; }
  .aa-itin__item > *{ grid-column:2; }
  .aa-itin__dot{ grid-column:1; grid-row:1 / span 4; margin:0; }
  .aa-itin__time{ height:auto; }
}

/* ── 16c. Travel v2 — hero finder, yer detayı, rota planlayıcı (2026-10-29) ── */

/* small shared pieces */
.aa-btn--line{ border:1px solid var(--aa-line); background:var(--aa-panel); color:var(--aa-ink); }
.aa-btn--line:hover{ border-color:var(--aa-blue); color:var(--aa-blue); }
.aa-more--quiet{ color:var(--aa-ink-soft); }
.aa-more--quiet:hover{ color:var(--aa-blue); }
.aa-linkbtn{ padding:0; font-weight:700; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.aa-spot__title a:hover{ color:var(--aa-blue); }
.aa-spot__links{ margin-top:auto; padding-top:16px; display:flex; gap:20px; flex-wrap:wrap; }
.aa-spot__media{ display:block; }
.aa-itin__cta{ margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* ── hero: the question, over Ankara ── */
.aa-hero--finder .aa-slide__img{ border-radius:0; }
.aa-hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(9,43,68,.55) 0%, rgba(9,43,68,.25) 70%, rgba(9,43,68,.15) 100%),
    linear-gradient(180deg, rgba(9,43,68,.35) 0%, rgba(9,43,68,.1) 40%, rgba(9,43,68,.55) 100%);
}
.aa-slide__credit{
  position:absolute; z-index:4; top:16px; right:20px; max-width:60%;
  font-size:11px; font-weight:500; line-height:1.4; color:rgba(255,255,255,.78); text-align:right;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.aa-slide__credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.aa-hero__finder{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:40px 24px calc(var(--aa-hero-overlap) + 40px); color:#fff;
}
.aa-hero__finder > *{ pointer-events:auto; }
.aa-hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--aa-r-pill);
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:13px; font-weight:600;
}
.aa-hero__eyebrow svg{ width:16px; height:16px; }
.aa-hero__finder h1{
  margin-top:18px; font-size:clamp(32px, 4.4vw, 60px); font-weight:700; letter-spacing:-.025em; line-height:1.05;
  text-shadow:0 2px 24px rgba(9,43,68,.35);
}
.aa-hero__lead{ margin-top:14px; font-size:clamp(15px, 1.4vw, 18px); color:rgba(255,255,255,.9); max-width:52ch; }

.aa-finder{ width:min(100%, 720px); margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; position:relative; }
.aa-finder__glass{ position:absolute; left:22px; top:32px; transform:translateY(-50%); width:22px; height:22px; color:var(--aa-ink-mute); pointer-events:none; }
.aa-finder input{
  flex:1; min-width:0; height:64px; padding:0 130px 0 58px; border:0; border-radius:var(--aa-r-pill);
  background:#fff; color:#1B2B3D; font-size:17px; font-weight:500;
  box-shadow:0 18px 40px -16px rgba(9,43,68,.55);
}
.aa-finder input::placeholder{ color:#93A2B4; }
.aa-finder input:focus-visible{ outline:3px solid rgba(255,255,255,.6); outline-offset:3px; }
.aa-finder input::-webkit-search-cancel-button{ cursor:pointer; }
.aa-finder > .aa-btn{ position:absolute; right:8px; top:8px; height:48px; border-radius:var(--aa-r-pill); padding:0 26px; }
.aa-finder__chips{ flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:16px; }
.aa-finder__try{ font-size:13px; color:rgba(255,255,255,.8); }
.aa-finder__chips button, .aa-finder__plan{
  height:34px; padding:0 14px; border-radius:var(--aa-r-pill); display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:13px; font-weight:600; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .16s var(--aa-ease), border-color .16s var(--aa-ease);
}
.aa-finder__chips button:hover, .aa-finder__plan:hover{ background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.5); }
.aa-finder__plan{ background:#86C542; border-color:#86C542; }
.aa-finder__plan:hover{ background:#77B238; border-color:#77B238; }
.aa-finder__plan svg{ width:15px; height:15px; }

/* results panel — fixed, placed from the form's rect by gezi.js */
.aa-finder__panel{
  position:fixed; z-index:80; overflow-y:auto; overscroll-behavior:contain;
  padding:8px; border-radius:var(--aa-r-lg); background:var(--aa-panel);
  border:1px solid var(--aa-line); box-shadow:var(--aa-shadow-card);
  text-align:left;
}
.aa-finder__h{ padding:10px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--aa-ink-mute); }
.aa-finder__row{
  display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--aa-r-md);
  transition:background-color .12s var(--aa-ease);
}
.aa-finder__row:hover, .aa-finder__row.is-active{ background:var(--aa-blue-wash); }
.aa-finder__thumb{ width:44px; height:44px; border-radius:var(--aa-r-md); object-fit:cover; flex:none; }
.aa-finder__ico{ width:44px; height:44px; border-radius:var(--aa-r-md); display:grid; place-items:center; flex:none; background:var(--aa-canvas); color:var(--aa-blue); }
.aa-finder__ico svg{ width:18px; height:18px; }
.aa-finder__txt{ min-width:0; display:flex; flex-direction:column; }
.aa-finder__txt b{ font-size:14px; font-weight:700; color:var(--aa-ink); line-height:1.35; }
.aa-finder__txt span{ font-size:12.5px; color:var(--aa-ink-soft); line-height:1.45; }
.aa-finder__all{ display:block; margin:6px 2px 2px; padding:10px; border-top:1px solid var(--aa-line-soft); font-size:13px; font-weight:600; color:var(--aa-green); }
.aa-finder__empty{ padding:18px 12px; font-size:14px; color:var(--aa-ink-soft); }
.aa-finder__empty a{ color:var(--aa-blue); font-weight:600; }

/* ── SSS search ── */
.aa-faqsearch{ position:relative; margin-top:24px; }
.aa-faqsearch svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--aa-ink-mute); pointer-events:none; }
.aa-faqsearch input{
  width:100%; height:54px; padding:0 18px 0 48px; border-radius:var(--aa-r-pill);
  border:1px solid var(--aa-line); background:var(--aa-panel); font-size:15px; color:var(--aa-ink);
}
.aa-faqsearch input:focus{ outline:none; border-color:var(--aa-blue); box-shadow:0 0 0 3px var(--aa-blue-wash); }
.aa-faq details.is-target{ background:var(--aa-blue-wash); }
.aa-faqempty{ margin-top:24px; padding:20px; border:1px dashed var(--aa-line); border-radius:var(--aa-r-lg); color:var(--aa-ink-soft); font-size:14px; }
.aa-faqempty a{ color:var(--aa-blue); font-weight:600; }












.aa-sideitem{ display:flex; align-items:center; gap:4px; }
.aa-sideitem > button{ flex:1; min-width:0; margin-right:0; width:auto; }
.aa-sideitem__go{ flex:none; width:32px; height:32px; border-radius:var(--aa-r-md); display:grid; place-items:center; color:var(--aa-ink-mute); }
.aa-sideitem__go:hover{ background:var(--aa-canvas); color:var(--aa-blue); }
.aa-sideitem__go svg{ width:15px; height:15px; }

/* ── yer detayı ── */
.aa-crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding-top:28px; font-size:13px; font-weight:500; color:var(--aa-ink-soft); }
.aa-crumbs a:hover{ color:var(--aa-blue); }
.aa-crumbs svg{ width:14px; height:14px; color:var(--aa-ink-mute); }
.aa-crumbs [aria-current]{ color:var(--aa-ink); font-weight:600; }
.aa-detail__head{ padding-top:22px; }
.aa-place__tag.aa-detail__tag{ position:static; display:inline-block; background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-detail__head h1{ margin-top:12px; font-size:clamp(30px, 3.8vw, 48px); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.aa-detail__lead{ margin-top:10px; font-size:18px; color:var(--aa-ink-soft); max-width:60ch; }
.aa-detail__hero{ margin:28px 0 0; }
.aa-detail__hero img{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--aa-r-xl); background:var(--aa-canvas); }
.aa-detail__hero figcaption{ margin-top:8px; font-size:12px; color:var(--aa-ink-mute); }
.aa-detail__hero figcaption a{ text-decoration:underline; text-underline-offset:2px; }
.aa-detail__grid{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:56px; margin-top:44px; align-items:start; }
.aa-detail__sec + .aa-detail__sec{ margin-top:52px; }
.aa-detail__sec > .aa-h2{ margin-bottom:14px; }
.aa-detail__sec .aa-section__head{ margin-bottom:18px; }
.aa-detail__desc{ font-size:16px; line-height:1.75; color:var(--aa-ink-soft); max-width:68ch; }
.aa-tips{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.aa-tips li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--aa-ink); line-height:1.55; }
.aa-tips svg{ width:22px; height:22px; padding:4px; border-radius:50%; flex:none; background:rgba(95,156,81,.14); color:var(--aa-green); margin-top:1px; }
.aa-howto{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.aa-howto__card{ padding:20px 22px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-howto__h{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--aa-ink); }
.aa-howto__h svg{ width:34px; height:34px; padding:8px; border-radius:50%; background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-howto__steps{ margin:14px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:14px; line-height:1.55; color:var(--aa-ink-soft); }
.aa-howto__steps b{ color:var(--aa-ink); font-weight:700; }
.aa-howto__steps li::marker{ color:var(--aa-blue); font-weight:700; }
.aa-deps{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.aa-deps__t{ padding:3px 10px; border-radius:var(--aa-r-pill); background:var(--aa-blue-wash); color:var(--aa-blue); font-size:13px; font-weight:700; }
.aa-deps__t:first-child{ background:var(--aa-blue); color:#fff; }
.aa-detail__map{ height:400px; margin-top:16px; }
.aa-explore--row{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:220px; }
.aa-explore--row .aa-place__title{ font-size:17px; }
.aa-detail__side{ position:sticky; top:calc(var(--aa-header) + 20px); }
.aa-factcard{ display:flex; flex-direction:column; gap:12px; padding:22px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-factcard dl{ margin:0 0 6px; }
.aa-factcard dl div{ padding:11px 0; border-bottom:1px solid var(--aa-line-soft); display:flex; flex-direction:column; gap:2px; }
.aa-factcard dt{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--aa-ink-mute); }
.aa-factcard dt svg{ width:14px; height:14px; color:var(--aa-green); }
.aa-factcard dd{ margin:0; font-size:14px; font-weight:600; color:var(--aa-ink); }
.aa-factcard .aa-btn{ width:100%; }
.aa-factcard .aa-more{ align-self:center; margin-top:2px; }
.aa-factcard__note{ font-size:12px; color:var(--aa-ink-mute); line-height:1.5; text-align:center; }
.aa-pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:64px 0 72px; padding-top:24px; border-top:1px solid var(--aa-line); }
.aa-pager a{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); transition:border-color .16s var(--aa-ease); }
.aa-pager a:hover{ border-color:var(--aa-green); }
.aa-pager a.is-next{ justify-content:flex-end; text-align:right; }
.aa-pager svg{ width:18px; height:18px; color:var(--aa-ink-mute); flex:none; }
.aa-pager span{ display:flex; flex-direction:column; font-size:15px; font-weight:700; }
.aa-pager small{ font-size:12px; font-weight:500; color:var(--aa-ink-mute); }

/* ── rota planlayıcı ── */
.aa-planner-wrap{ display:grid; grid-template-columns:440px minmax(0, 1fr); gap:40px; align-items:start; padding-bottom:80px; }
.aa-planner-wrap > *, .aa-prow > *{ min-width:0; }
.aa-pinput select, .aa-pinput input{ width:100%; min-width:0; }
.aa-pstep{ padding:22px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-pstep + .aa-pstep{ margin-top:16px; }
.aa-pstep__h{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.aa-pstep__n{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--aa-blue); color:#fff; font-size:14px; font-weight:700; flex:none; }
.aa-pstep__h h2{ font-size:17px; font-weight:700; line-height:1.3; }
.aa-pstep__h p{ font-size:13px; color:var(--aa-ink-soft); }
.aa-prow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.aa-pinput{ display:flex; flex-direction:column; gap:6px; }
.aa-pinput > span{ font-size:12px; font-weight:600; color:var(--aa-ink-soft); }
.aa-pinput input, .aa-pinput select{
  height:50px; padding:0 14px; border:1px solid var(--aa-line); border-radius:var(--aa-r-md);
  background:var(--aa-panel); color:var(--aa-ink); font-size:16px; font-weight:600;
}
.aa-pinput input:focus, .aa-pinput select:focus{ outline:none; border-color:var(--aa-blue); box-shadow:0 0 0 3px var(--aa-blue-wash); }
.aa-pinfo{ margin-top:12px; display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:var(--aa-r-md); background:var(--aa-blue-wash); font-size:12.5px; line-height:1.5; color:var(--aa-ink); }
.aa-pinfo svg{ width:15px; height:15px; color:var(--aa-blue); flex:none; margin-top:2px; }
.aa-presets{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.aa-presets button{ height:32px; padding:0 12px; border-radius:var(--aa-r-pill); border:1px solid var(--aa-line); font-size:12.5px; font-weight:600; color:var(--aa-ink-soft); }
.aa-presets button:hover{ border-color:var(--aa-green); color:var(--aa-green-ink); }
.aa-picks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.aa-pick{
  position:relative; display:flex; align-items:center; gap:10px; padding:7px; cursor:pointer;
  border:1px solid var(--aa-line); border-radius:var(--aa-r-md); background:var(--aa-panel);
  transition:border-color .14s var(--aa-ease), background-color .14s var(--aa-ease);
}
.aa-pick:hover{ border-color:var(--aa-blue); }
.aa-pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.aa-pick:has(input:checked){ border-color:var(--aa-blue); background:var(--aa-blue-wash); }
.aa-pick:has(input:focus-visible){ outline:2px solid var(--aa-blue); outline-offset:2px; }
.aa-pick__img img{ width:44px; height:44px; border-radius:6px; object-fit:cover; }
.aa-pick__txt{ min-width:0; display:flex; flex-direction:column; }
.aa-pick__txt b{ font-size:13px; font-weight:700; line-height:1.3; color:var(--aa-ink); }
.aa-pick__txt span{ font-size:11.5px; color:var(--aa-ink-mute); }
.aa-pick__tick{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--aa-blue); color:#fff; opacity:0; transform:scale(.6); transition:opacity .14s var(--aa-ease), transform .14s var(--aa-ease); }
.aa-pick__tick svg{ width:11px; height:11px; stroke-width:3; }
.aa-pick:has(input:checked) .aa-pick__tick{ opacity:1; transform:none; }
.aa-pcount{ margin-top:10px; font-size:12.5px; font-weight:600; color:var(--aa-ink-soft); }
.aa-radios{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.aa-radios label{
  display:flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 10px; cursor:pointer; text-align:center;
  border:1px solid var(--aa-line); border-radius:var(--aa-r-md); font-size:13.5px; font-weight:600; color:var(--aa-ink-soft);
}
.aa-radios input{ position:absolute; opacity:0; width:1px; height:1px; }
.aa-radios label:has(input:checked){ border-color:var(--aa-blue); background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-radios label:has(input:focus-visible){ outline:2px solid var(--aa-blue); outline-offset:2px; }
.aa-radios svg{ width:16px; height:16px; }
.aa-planner .aa-btn--primary[type="submit"]{ width:100%; margin-top:16px; }

.aa-plan__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.aa-plan__head h2{ font-size:22px; font-weight:700; }
.aa-plan__head p{ font-size:13px; color:var(--aa-ink-soft); }
.aa-plansum{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.aa-plansum__c{ padding:16px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); display:flex; flex-direction:column; gap:2px; }
.aa-plansum__c span{ font-size:12px; font-weight:600; color:var(--aa-ink-mute); }
.aa-plansum__c b{ font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--aa-ink); line-height:1.2; }
.aa-plansum__c b small{ font-size:11px; font-weight:600; color:var(--aa-amber); }
.aa-plansum__c small{ font-size:12px; color:var(--aa-ink-soft); }
.aa-planwarn{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.aa-plannote{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--aa-r-md); font-size:13.5px; line-height:1.55; color:var(--aa-ink); background:var(--aa-canvas); }
.aa-plannote svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--aa-ink-soft); }
.aa-plannote.is-ok{ background:rgba(95,156,81,.12); } .aa-plannote.is-ok svg{ color:var(--aa-green); }
.aa-plannote.is-bad{ background:rgba(224,57,43,.10); } .aa-plannote.is-bad svg{ color:var(--aa-red); }
.aa-plannote.is-warn{ background:rgba(240,160,32,.12); } .aa-plannote.is-warn svg{ color:var(--aa-amber); }
.aa-plannote a{ color:var(--aa-blue); font-weight:600; }
.aa-plan__body{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; margin-top:20px; align-items:start; }
.aa-plan__map{ height:560px; position:sticky; top:calc(var(--aa-header) + 20px); }

.aa-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.aa-timeline::before{ content:''; position:absolute; left:73px; top:18px; bottom:18px; width:2px; background:var(--aa-line); }
.aa-tl{ position:relative; display:grid; grid-template-columns:56px 36px minmax(0, 1fr); column-gap:12px; align-items:start; padding:8px 0; }
.aa-tl__t{ text-align:right; padding-top:8px; font-size:14px; font-weight:700; color:var(--aa-ink); }
.aa-tl__dot{
  position:relative; z-index:1; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--aa-panel); border:2px solid var(--aa-line); color:var(--aa-ink-soft); font-size:13px; font-weight:700;
}
.aa-tl__dot svg{ width:16px; height:16px; }
.aa-tl__body{ padding-top:6px; display:flex; flex-direction:column; gap:2px; }
.aa-tl__body b{ font-size:14.5px; font-weight:700; color:var(--aa-ink); line-height:1.35; }
.aa-tl__body > span:not(.aa-tl__tag){ font-size:13px; color:var(--aa-ink-soft); line-height:1.5; }
.aa-tl__tag{ align-self:flex-start; margin-top:2px; padding:1px 8px; border-radius:var(--aa-r-pill); background:var(--aa-blue-wash); color:var(--aa-blue); font-size:11px; font-weight:700; }
.aa-tl.is-minor{ padding:2px 0; }
.aa-tl.is-minor .aa-tl__dot{ width:24px; height:24px; margin-left:6px; border-width:0; background:var(--aa-canvas); }
.aa-tl.is-minor .aa-tl__dot svg{ width:12px; height:12px; }
.aa-tl.is-minor .aa-tl__body{ padding-top:2px; }
.aa-tl.is-minor .aa-tl__body b{ font-size:13px; font-weight:600; color:var(--aa-ink-soft); }
.aa-tl.is-minor .aa-tl__body > span{ font-size:12px; }
.aa-tl.is-bus .aa-tl__dot{ background:var(--aa-blue); border-color:var(--aa-blue); color:#fff; }
.aa-tl.is-land .aa-tl__dot, .aa-tl.is-flight .aa-tl__dot{ background:var(--aa-navy); border-color:var(--aa-navy); color:#fff; }
.aa-tl.is-late .aa-tl__dot{ background:var(--aa-red); border-color:var(--aa-red); color:#fff; }
.aa-tl.is-stop .aa-tl__dot{ border-color:var(--aa-blue); color:var(--aa-blue); }
.aa-tl.is-place .aa-tl__dot{ background:var(--aa-green); border-color:var(--aa-green); color:#fff; }
.aa-tl__card{ display:flex; gap:12px; align-items:center; padding:8px; border:1px solid var(--aa-line); border-radius:var(--aa-r-md); background:var(--aa-panel); transition:border-color .16s var(--aa-ease); }
.aa-tl__card:hover{ border-color:var(--aa-green); }
.aa-tl__card img{ width:60px; height:60px; border-radius:6px; object-fit:cover; flex:none; }
.aa-tl__card > span{ display:flex; flex-direction:column; min-width:0; }
.aa-tl__card b{ font-size:14.5px; font-weight:700; color:var(--aa-ink); }
.aa-tl__card span span{ font-size:12.5px; color:var(--aa-ink-soft); }
.aa-tl__card small{ font-size:12px; font-weight:700; color:var(--aa-green-ink); }
.aa-plan__assume{ margin-top:24px; padding:16px 18px; border:1px dashed var(--aa-line); border-radius:var(--aa-r-lg); font-size:12.5px; color:var(--aa-ink-soft); line-height:1.6; }
.aa-plan__assume b{ color:var(--aa-ink); }
.aa-plan__assume ul{ margin:6px 0 0; padding-left:18px; }
.aa-planempty{ padding:48px 24px; text-align:center; border:1px dashed var(--aa-line); border-radius:var(--aa-r-lg); color:var(--aa-ink-soft); }
.aa-planempty svg{ width:32px; height:32px; color:var(--aa-ink-mute); margin:0 auto 10px; }

@media (max-width:1240px){
  .aa-plan__body{ grid-template-columns:1fr; }
  .aa-plan__map{ position:relative; top:0; height:420px; order:-1; }
}
@media (max-width:1100px){
  .aa-detail__grid{ grid-template-columns:1fr; gap:36px; }
  .aa-detail__side{ position:static; }
  .aa-planner-wrap{ grid-template-columns:1fr; }
  .aa-plansum{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:800px){
  .aa-howto{ grid-template-columns:1fr; }
  .aa-explore--row{ grid-template-columns:1fr; }
  .aa-detail__hero img{ aspect-ratio:4/3; }
}
@media (max-width:700px){
  .aa-hero--finder .aa-hero__media{ height:500px; }
  .aa-hero__finder{ justify-content:flex-start; padding-top:44px; }
  .aa-hero__finder h1{ font-size:32px; }
  .aa-hero__lead{ display:none; }
  .aa-finder input{ height:56px; font-size:15px; padding:0 64px 0 48px; }
  .aa-finder__glass{ left:18px; top:28px; width:19px; height:19px; }
  .aa-finder > .aa-btn{ top:6px; right:6px; height:44px; width:44px; padding:0; font-size:0; }
  .aa-finder > .aa-btn::before{ content:''; width:18px; height:18px; background:currentColor; -webkit-mask:var(--aa-search-mask) center/contain no-repeat; mask:var(--aa-search-mask) center/contain no-repeat; }
  .aa-finder__chips{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin-inline:-24px; padding:0 24px 4px; scrollbar-width:none; }
  .aa-finder__chips::-webkit-scrollbar{ display:none; }
  .aa-finder__chips > *{ flex:none; }
  .aa-slide__credit{ top:12px; right:14px; font-size:10px; max-width:70%; }
  .aa-hero__finder{ padding-top:52px; }
  .aa-picks{ grid-template-columns:1fr; }
  .aa-prow{ grid-template-columns:1fr 1fr; }
  .aa-pager{ grid-template-columns:1fr; }
  .aa-timeline::before{ left:61px; }
  .aa-tl{ grid-template-columns:44px 36px minmax(0, 1fr); }
}
:root{ --aa-search-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); }


/* ── 16d. Maps are Google Maps embeds (2026-10-29, v3) ── */
/* The iframe sits over the fallback list, so a blocked embed still leaves
   something readable underneath once the frame is removed by the browser. */
.aa-map.is-live .aa-map__fallback{ visibility:hidden; }
.aa-gmap{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:var(--aa-canvas); }
.aa-sidestop.is-active, .aa-sideplace.is-active{ background:var(--aa-blue-wash); }
.aa-plan__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.aa-plan__actions .aa-btn{ height:44px; padding:0 16px; font-size:14px; }
.aa-mapapp__h .aa-more{ font-size:12px; }

/* the hero no longer carries the ticket card, so nothing overlaps it */
.aa-hero.aa-hero--finder{ --aa-hero-overlap:0px; }
.aa-hero--finder .aa-hero__media{ height:620px; }
@media (max-width:1100px){ .aa-hero--finder .aa-hero__media{ height:540px; } }
@media (max-width:700px){ .aa-hero--finder .aa-hero__media{ height:480px; } }

/* ── 16e. Durak haritası as a contained box (2026-10-29, v4) ── */
.aa-mapapp.aa-mapapp--box{
  margin-top:28px; height:min(780px, calc(100vh - var(--aa-header) - 56px)); height:min(780px, calc(100dvh - var(--aa-header) - 56px));
  border:1px solid var(--aa-line); border-radius:var(--aa-r-xl); overflow:hidden;
  grid-template-columns:380px 1fr; background:var(--aa-panel);
  box-shadow:0 18px 44px -28px rgba(9,43,68,.28);
}
.aa-mapapp--box .aa-mapapp__side{ border-right:1px solid var(--aa-line); }
@media (max-width:900px){
  .aa-mapapp.aa-mapapp--box{ height:auto; grid-template-columns:1fr; }
  .aa-mapapp--box .aa-mapapp__map{ height:56vh; }
  .aa-mapapp--box .aa-mapapp__side{ border-right:0; border-top:1px solid var(--aa-line); }
}

/* ── 16f. Ulaşım rehberi (bilgi/) — 2026-10-29, v4 ── */
.aa-guide{ padding-bottom:80px; }
.aa-guide__grid{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:56px; align-items:start; margin-top:24px; }
.aa-guide__h1{ margin-top:6px; font-size:clamp(28px, 3.2vw, 40px); font-weight:700; letter-spacing:-.02em; line-height:1.12; }
.aa-answer{ margin-top:22px; padding:20px 22px; border-radius:var(--aa-r-lg); background:var(--aa-blue-wash); border:1px solid rgba(0,87,217,.16); }
.aa-answer__label{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--aa-blue); }
.aa-answer p{ margin-top:6px; font-size:17px; line-height:1.6; color:var(--aa-ink); font-weight:500; }
.aa-answer__cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.aa-guide__body{ margin-top:28px; font-size:16px; line-height:1.75; color:var(--aa-ink-soft); max-width:70ch; }
.aa-guide__body > * + *{ margin-top:14px; }
.aa-guide__body ul, .aa-guide__body ol{ padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.aa-guide__body li::marker{ color:var(--aa-green); font-weight:700; }
.aa-guide__body b{ color:var(--aa-ink); font-weight:700; }
.aa-guide__body a, .aa-gtt__note a{ color:var(--aa-blue); font-weight:600; text-decoration:underline; text-decoration-color:rgba(0,87,217,.3); text-underline-offset:3px; }
.aa-guide__body a:hover{ text-decoration-color:currentColor; }
.aa-bt{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; line-height:1.5; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); overflow:hidden; display:block; overflow-x:auto; }
.aa-bt th, .aa-bt td{ padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--aa-line-soft); }
.aa-bt thead th{ background:var(--aa-canvas); font-size:12px; font-weight:700; color:var(--aa-ink-soft); white-space:nowrap; }
.aa-bt tbody tr:last-child td{ border-bottom:0; }
.aa-bt td{ color:var(--aa-ink); }
.aa-gtt{ margin-top:32px; padding:20px 22px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); }
.aa-gtt__h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:17px; font-weight:700; }
.aa-gtt__h span{ font-size:13px; font-weight:600; color:var(--aa-ink-mute); }
.aa-gtt__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); gap:8px; margin-top:14px; }
.aa-gtt__t{ height:36px; display:grid; place-items:center; border-radius:var(--aa-r-md); background:var(--aa-canvas); font-size:14px; font-weight:700; color:var(--aa-ink); }
.aa-gtt__note{ margin-top:12px; font-size:12.5px; color:var(--aa-ink-mute); line-height:1.55; }
.aa-guide__updated{ margin-top:28px; font-size:12.5px; color:var(--aa-ink-mute); line-height:1.6; }
.aa-guide__related{ margin-top:40px; padding-top:24px; border-top:1px solid var(--aa-line); }
.aa-guide__related h2{ font-size:18px; font-weight:700; }
.aa-guide__related ul{ list-style:none; margin:12px 0 16px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.aa-guide__related li a{ display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid var(--aa-line); border-radius:var(--aa-r-md); font-size:14px; font-weight:600; color:var(--aa-ink); line-height:1.4; transition:border-color .16s var(--aa-ease); }
.aa-guide__related li a:hover{ border-color:var(--aa-green); }
.aa-guide__related li svg{ width:15px; height:15px; margin-top:2px; color:var(--aa-green); flex:none; }
.aa-guide__side{ position:sticky; top:calc(var(--aa-header) + 20px); }

.aa-buycard{ padding:22px; border-radius:var(--aa-r-lg); background:var(--aa-navy); color:#fff; display:flex; flex-direction:column; gap:12px; box-shadow:0 18px 40px -24px rgba(9,43,68,.6); }
.aa-buycard__eyebrow{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.8); }
.aa-buycard__eyebrow svg{ width:16px; height:16px; }
.aa-buycard__price{ font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; }
.aa-buycard__price small{ display:block; margin-top:2px; font-size:12px; font-weight:500; color:rgba(255,255,255,.7); letter-spacing:0; white-space:normal; }
.aa-buycard__facts{ list-style:none; margin:0; padding:12px 0; border-block:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:8px; }
.aa-buycard__facts li{ display:flex; align-items:center; gap:9px; font-size:14px; color:rgba(255,255,255,.9); }
.aa-buycard__facts svg{ width:16px; height:16px; color:#86C542; }
.aa-buycard__btn{ width:100%; height:52px; font-size:16px; }
.aa-buycard__note{ font-size:12px; color:rgba(255,255,255,.65); text-align:center; }
.aa-buycard__phone{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:700; color:#fff; }
.aa-buycard__phone svg{ width:16px; height:16px; }

.aa-guidehero{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:48px; align-items:center; padding:40px 0 28px; }
.aa-guidehero h1{ margin-top:4px; font-size:clamp(32px, 4vw, 50px); font-weight:700; letter-spacing:-.025em; line-height:1.05; }
.aa-guidehero__text > p:not(.aa-eyebrow){ margin-top:14px; font-size:17px; color:var(--aa-ink-soft); max-width:58ch; }
.aa-guidehero .aa-backlink{ display:flex; width:max-content; }
.aa-guide__toc{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 0 8px; border-top:1px solid var(--aa-line); }
.aa-qgroup{ margin-top:36px; scroll-margin-top:calc(var(--aa-header) + 16px); }
.aa-qgroup__h{ display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; margin-bottom:12px; }
.aa-qgroup__h span{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:var(--aa-r-pill); background:var(--aa-canvas); color:var(--aa-ink-mute); }
.aa-qlist{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.aa-qitem{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); transition:border-color .16s var(--aa-ease), transform .16s var(--aa-ease); }
.aa-qitem:hover{ border-color:var(--aa-green); transform:translateY(-1px); }
.aa-qitem__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.aa-qitem__txt b{ font-size:15px; font-weight:700; color:var(--aa-ink); line-height:1.35; }
.aa-qitem__txt span{ font-size:13px; color:var(--aa-ink-soft); line-height:1.5; }
.aa-qitem > svg{ width:18px; height:18px; color:var(--aa-ink-mute); flex:none; }

/* mobile: a buy button that is always one tap away */
.aa-ctabar{ display:none; }
@media (max-width:1100px){
  .aa-guide__grid, .aa-guidehero{ grid-template-columns:1fr; gap:28px; }
  .aa-guide__side{ position:static; }
}
@media (max-width:760px){
  .aa-qlist, .aa-guide__related ul{ grid-template-columns:1fr; }
  .aa-guidehero__buy{ display:none; }
  .aa-ctabar{
    display:flex; align-items:center; gap:12px; position:fixed; z-index:60; left:0; right:0; bottom:0;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background:var(--aa-panel);
    border-top:1px solid var(--aa-line); box-shadow:0 -10px 24px -16px rgba(9,43,68,.35);
  }
  .aa-ctabar__btn{ flex:1; height:48px; }
  .aa-ctabar__price{ font-size:13px; font-weight:700; color:var(--aa-ink); white-space:nowrap; }
  .has-ctabar .aa-wa{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  .has-ctabar .aa-footer{ padding-bottom:84px; }
}

/* ── 16g. Bildirim sayfası, VIP Transfer, SSS kalıcı bağlantı (2026-10-29, v5) ── */
.aa-notif__item{ text-decoration:none; color:inherit; }
/* .aa-menu a (one-line menu links: height 40px, centred) must not reach the
   notification rows — their titles wrap to two lines and overlapped. */
.aa-menu a.aa-notif__item{ height:auto; align-items:flex-start; padding:12px 16px; font-weight:400; }
.aa-menu a.aa-notif__item:hover{ color:inherit; }
.aa-nav__link--vip{ gap:6px; }
.aa-soon{ font-size:10px; font-weight:700; line-height:1; padding:3px 6px; border-radius:var(--aa-r-pill); background:#C8A15A; color:#1B1405; letter-spacing:.02em; }
.aa-faq__perma{ display:inline-flex; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--aa-green) !important; }
.aa-faq__perma:hover{ text-decoration:underline; }
.aa-card--pinned{ border-color:rgba(0,87,217,.35); background:var(--aa-blue-wash); }
.aa-pin{ display:inline-block; margin-right:8px; padding:1px 8px; border-radius:var(--aa-r-pill); background:var(--aa-blue); color:#fff; font-size:11px; font-weight:700; }

/* kimlik bilgilendirmesi */
.aa-notice-page{ padding-bottom:80px; }
.aa-np-hero{ display:grid; grid-template-columns:72px 1fr; gap:24px; align-items:start; margin-top:24px; padding:32px; border-radius:var(--aa-r-xl);
  background:linear-gradient(135deg, var(--aa-blue-wash), var(--aa-panel) 70%); border:1px solid rgba(0,87,217,.16); }
.aa-np-hero__icon{ width:72px; height:72px; border-radius:20px; display:grid; place-items:center; background:var(--aa-blue); color:#fff; box-shadow:0 14px 30px -14px rgba(0,87,217,.6); }
.aa-np-hero__icon svg{ width:34px; height:34px; }
.aa-np-hero__meta{ display:flex; align-items:center; gap:12px; font-size:13px; color:var(--aa-ink-soft); }
.aa-np-tag{ padding:3px 10px; border-radius:var(--aa-r-pill); background:var(--aa-panel); border:1px solid var(--aa-line); font-weight:700; font-size:12px; color:var(--aa-blue); }
.aa-np-hero h1{ margin-top:10px; font-size:clamp(28px, 3.4vw, 42px); font-weight:700; letter-spacing:-.02em; line-height:1.12; }
.aa-np-hero__lead{ margin-top:14px; font-size:17px; line-height:1.7; color:var(--aa-ink-soft); max-width:70ch; }
.aa-np-hero__lead b{ color:var(--aa-ink); }
.aa-np-promises{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; }
.aa-np-promise{ padding:24px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-np-promise__ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(95,156,81,.14); color:var(--aa-green); }
.aa-np-promise__ico.is-no{ background:rgba(224,57,43,.10); color:var(--aa-red); }
.aa-np-promise__ico svg{ width:22px; height:22px; }
.aa-np-promise h2{ margin-top:14px; font-size:18px; font-weight:700; }
.aa-np-promise p{ margin-top:6px; font-size:14px; color:var(--aa-ink-soft); line-height:1.6; }
.aa-np-flow{ margin-top:48px; }
.aa-np-steps{ list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; counter-reset:s; }
.aa-np-steps li{ position:relative; padding:22px 22px 22px 22px; border-radius:var(--aa-r-lg); background:var(--aa-canvas); display:flex; flex-direction:column; gap:6px; }
.aa-np-steps li:not(:last-child)::after{ content:''; position:absolute; right:-14px; top:50%; width:12px; height:12px; border-top:2px solid var(--aa-ink-mute); border-right:2px solid var(--aa-ink-mute); transform:translateY(-50%) rotate(45deg); }
.aa-np-steps__n{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--aa-blue); color:#fff; font-size:14px; font-weight:700; }
.aa-np-steps b{ font-size:16px; font-weight:700; margin-top:6px; }
.aa-np-steps span:not(.aa-np-steps__n){ font-size:14px; color:var(--aa-ink-soft); line-height:1.55; }
.aa-np-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:48px; align-items:start; margin-top:48px; }
.aa-np-body > .aa-h2{ margin:36px 0 12px; } .aa-np-body > .aa-h2:first-child{ margin-top:0; }
.aa-np-body > p{ font-size:16px; line-height:1.75; color:var(--aa-ink-soft); max-width:70ch; }
.aa-np-body > p a{ color:var(--aa-blue); font-weight:600; }
.aa-np-list{ list-style:none; margin:14px 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.aa-np-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; color:var(--aa-ink); }
.aa-np-list svg{ width:22px; height:22px; padding:4px; border-radius:50%; flex:none; background:rgba(95,156,81,.14); color:var(--aa-green); }
.aa-np-faq{ display:flex; flex-direction:column; gap:10px; }
.aa-np-faq details{ border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-np-faq summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px; font-weight:600; font-size:15px; }
.aa-np-faq summary::-webkit-details-marker{ display:none; }
.aa-np-faq summary svg{ width:18px; height:18px; margin-left:auto; color:var(--aa-ink-mute); flex:none; transition:transform .2s var(--aa-ease); }
.aa-np-faq details[open] summary svg{ transform:rotate(180deg); color:var(--aa-blue); }
.aa-np-faq .aa-faq__a{ padding:0 18px 16px; font-size:14px; color:var(--aa-ink-soft); line-height:1.65; }
.aa-np-faq .aa-faq__a a{ color:var(--aa-blue); font-weight:600; }
.aa-np-side{ position:sticky; top:calc(var(--aa-header) + 20px); }
.aa-np-contact{ padding:24px; border-radius:var(--aa-r-lg); background:var(--aa-navy); color:#fff; display:flex; flex-direction:column; gap:12px; }
.aa-np-contact__ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.12); }
.aa-np-contact__ico svg{ width:22px; height:22px; }
.aa-np-contact h2{ font-size:20px; font-weight:700; }
.aa-np-contact p{ font-size:14px; color:rgba(255,255,255,.8); line-height:1.6; }
.aa-np-contact .aa-btn{ width:100%; }
.aa-np-contact .aa-btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.aa-np-contact .aa-more{ color:#9CCB90; align-self:center; }
.aa-np-sign{ margin-top:48px; padding-top:24px; border-top:1px solid var(--aa-line); font-size:15px; color:var(--aa-ink-soft); }
.aa-np-sign b{ color:var(--aa-ink); }

/* VIP transfer — navy with a page-scoped gold accent */
.aa-vip{ --vip-gold:#C8A15A; --vip-gold-ink:#A9843F; --vip-deep:#061A2B; padding-top:var(--aa-header); }
.aa-eyebrow--gold{ color:var(--vip-gold-ink); margin-bottom:8px; }
.aa-vip-hero{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(ellipse 60% 80% at 85% 20%, rgba(200,161,90,.22), transparent 60%), radial-gradient(ellipse 50% 60% at 10% 90%, rgba(0,87,217,.30), transparent 60%), var(--vip-deep); }
.aa-vip-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.05) 46px 47px); }
.aa-vip-hero__grid{ position:relative; display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:56px; align-items:center; padding-block:72px 80px; }
.aa-vip-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--aa-r-pill); border:1px solid rgba(200,161,90,.5); background:rgba(200,161,90,.12); color:var(--vip-gold); font-size:13px; font-weight:700; letter-spacing:.04em; }
.aa-vip-badge i{ width:8px; height:8px; border-radius:50%; background:var(--vip-gold); box-shadow:0 0 0 0 rgba(200,161,90,.6); animation:vipPulse 2s infinite; }
@keyframes vipPulse{ 0%{ box-shadow:0 0 0 0 rgba(200,161,90,.55); } 70%{ box-shadow:0 0 0 10px rgba(200,161,90,0); } 100%{ box-shadow:0 0 0 0 rgba(200,161,90,0); } }
.aa-vip-hero h1{ margin-top:20px; font-size:clamp(38px, 5.4vw, 72px); font-weight:700; letter-spacing:-.03em; line-height:1.02; }
.aa-vip-hero h1 span{ display:block; background:linear-gradient(90deg, #E9D3A5, var(--vip-gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.aa-vip-hero__text > p{ margin-top:20px; font-size:18px; line-height:1.7; color:rgba(255,255,255,.82); max-width:52ch; }
.aa-vip-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.aa-vip-btn{ background:var(--vip-gold); color:#1B1405; height:52px; padding:0 24px; }
.aa-vip-btn:hover{ background:#D5B272; }
.aa-vip-btn--ghost{ border:1px solid rgba(255,255,255,.3); color:#fff; height:52px; padding:0 22px; }
.aa-vip-btn--ghost:hover{ background:rgba(255,255,255,.08); }
.aa-vip-hero__facts{ list-style:none; margin:36px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:22px; }
.aa-vip-hero__facts li{ display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.85); }
.aa-vip-hero__facts svg{ width:18px; height:18px; color:var(--vip-gold); }
.aa-vip-hero__media{ position:relative; margin:0; justify-self:end; width:min(100%, 460px); }
/* height:auto is load-bearing: the img's height="1400" attribute otherwise wins
   over aspect-ratio and the portrait source stretches the hero. The crop sits
   low so the terminal façade and its sign stay in frame. */
.aa-vip-hero__media img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; object-position:50% 78%; border-radius:28px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }
.aa-vip-hero__media::after{ content:''; position:absolute; inset:0; border-radius:28px; background:linear-gradient(180deg, transparent 50%, rgba(6,26,43,.6)); pointer-events:none; }
.aa-vip-card{ position:absolute; z-index:1; left:-36px; bottom:36px; padding:16px 20px; border-radius:18px; background:rgba(255,255,255,.95); color:#1B2B3D; display:flex; flex-direction:column; gap:2px; box-shadow:0 24px 40px -20px rgba(0,0,0,.55); }
.aa-vip-card__k{ font-size:12px; font-weight:600; color:var(--vip-gold-ink); }
.aa-vip-card b{ font-size:18px; font-weight:700; }
.aa-vip-card__s{ font-size:12.5px; color:#5B6B7C; }
.aa-vip-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.aa-vip-feat{ padding:26px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); transition:border-color .2s var(--aa-ease), transform .2s var(--aa-ease); }
.aa-vip-feat:hover{ border-color:var(--vip-gold); transform:translateY(-2px); }
.aa-vip-feat__ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(200,161,90,.2), rgba(200,161,90,.06)); color:var(--vip-gold-ink); }
.aa-vip-feat__ico svg{ width:22px; height:22px; }
.aa-vip-feat h3{ margin-top:16px; font-size:18px; font-weight:700; }
.aa-vip-feat p{ margin-top:6px; font-size:14.5px; color:var(--aa-ink-soft); line-height:1.6; }
.aa-vip-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.aa-vip-steps li{ padding:28px; border-radius:var(--aa-r-lg); background:var(--aa-panel); border:1px solid var(--aa-line); }
.aa-vip-steps li > span{ font-size:40px; font-weight:700; letter-spacing:-.03em; color:var(--vip-gold); line-height:1; }
.aa-vip-steps h3{ margin-top:14px; font-size:18px; font-weight:700; }
.aa-vip-steps p{ margin-top:6px; font-size:14.5px; color:var(--aa-ink-soft); line-height:1.6; }
.aa-vip-who__grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:center; }
.aa-vip-who__lead{ margin-top:12px; font-size:16px; color:var(--aa-ink-soft); line-height:1.7; max-width:52ch; }
.aa-vip-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.aa-vip-tags li{ padding:10px 16px; border-radius:var(--aa-r-pill); border:1px solid var(--aa-line); font-size:14px; font-weight:600; background:var(--aa-panel); }
.aa-vip-faqwrap{ max-width:860px; }
.aa-vip-faqwrap .aa-h2{ margin-bottom:18px; }
.aa-vip-final{ padding:80px 0; }
.aa-vip-final__box{ text-align:center; padding:56px 32px; border-radius:28px; color:#fff; display:flex; flex-direction:column; align-items:center; gap:16px;
  background:radial-gradient(ellipse 70% 90% at 50% 0%, rgba(200,161,90,.25), transparent 70%), var(--vip-deep); }
.aa-vip-final__box h2{ font-size:clamp(26px, 3vw, 38px); font-weight:700; letter-spacing:-.02em; }
.aa-vip-final__box p{ font-size:16px; color:rgba(255,255,255,.8); max-width:52ch; }

@media (max-width:1100px){
  .aa-np-grid{ grid-template-columns:1fr; } .aa-np-side{ position:static; }
  .aa-vip-hero__grid{ grid-template-columns:1fr; padding-block:48px 56px; }
  .aa-vip-hero__media{ justify-self:start; width:min(100%, 380px); }
  .aa-vip-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:760px){
  .aa-np-hero{ grid-template-columns:1fr; padding:24px; }
  .aa-np-promises, .aa-np-steps, .aa-vip-steps, .aa-vip-grid, .aa-vip-who__grid{ grid-template-columns:1fr; }
  .aa-np-steps li:not(:last-child)::after{ display:none; }
  .aa-vip-card{ left:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce){ .aa-vip-badge i{ animation:none; } }

/* ── 16h. Header fit with seven menu items (2026-10-29, v5) ── */
/* Labels never break onto two lines; the header tightens in steps instead,
   and below 1100px the menu moves into the sheet (the burger). */
.aa-nav__link, .aa-phone, .aa-header__cta{ white-space:nowrap; }
@media (max-width:1380px){
  .aa-header .aa-wrap{ gap:24px; }
  .aa-nav{ gap:2px; }
  .aa-nav__link{ padding:6px 8px; font-size:13.5px; }
  /* the dividers were centred in a 16px gap; at 2px they would touch the text */
  .aa-nav__link:not(:first-child)::before{ display:none; }
  .aa-header__right{ gap:8px; }
}
@media (max-width:1240px){
  .aa-phone .aa-num{ display:none; }
  .aa-soon{ display:none; }
}
@media (max-width:1100px){
  .aa-nav, .aa-header__right{ display:none; }
  .aa-burger{ display:flex; }
}

/* ── 16i. Lounge hizmetleri — çok yakında (2026-10-29, v6) ── */
/* Shares the VIP page's navy/gold language (.aa-vip) — same tier of service. */
.aa-lg-pass{ justify-self:end; width:min(100%, 400px); border-radius:24px; overflow:hidden; color:#1B2B3D;
  background:#fff; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); transform:rotate(-3deg); }
.aa-lg-pass__top{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; background:linear-gradient(90deg, #0B2A44, #123A5E); color:#fff; font-size:13px; font-weight:700; letter-spacing:.12em; }
.aa-lg-pass__tag{ padding:4px 10px; border-radius:var(--aa-r-pill); background:var(--vip-gold); color:#1B1405; letter-spacing:.08em; }
.aa-lg-pass__main{ padding:22px; }
.aa-lg-pass__k{ font-size:12px; font-weight:600; color:#93A2B4; }
.aa-lg-pass__main b{ display:block; font-size:28px; font-weight:700; letter-spacing:-.02em; margin-top:2px; }
.aa-lg-pass__main ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.aa-lg-pass__main li{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#1B2B3D; }
.aa-lg-pass__main svg{ width:18px; height:18px; color:var(--vip-gold-ink); flex:none; }
.aa-lg-pass__stub{ position:relative; display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-top:2px dashed #E4E9EE; background:#FBF7EF; }
.aa-lg-pass__stub::before, .aa-lg-pass__stub::after{ content:''; position:absolute; top:-11px; width:20px; height:20px; border-radius:50%; background:var(--vip-deep); }
.aa-lg-pass__stub::before{ left:-10px; } .aa-lg-pass__stub::after{ right:-10px; }
.aa-lg-pass__stub span{ font-size:12px; font-weight:600; color:#93A2B4; }
.aa-lg-pass__stub b{ font-size:15px; font-weight:700; color:var(--vip-gold-ink); }
.aa-lg-group + .aa-lg-group{ margin-top:36px; }
.aa-lg-group__h{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; margin-bottom:14px; }
.aa-lg-group__h span{ font-size:12px; font-weight:700; padding:2px 8px; border-radius:var(--aa-r-pill); background:rgba(200,161,90,.15); color:var(--vip-gold-ink); }
.aa-lg-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:14px; }
.aa-lg-card{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:20px 20px 20px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); transition:border-color .2s var(--aa-ease), transform .2s var(--aa-ease); }
.aa-lg-card:hover{ border-color:var(--vip-gold); transform:translateY(-2px); }
.aa-lg-card__ico{ width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center; background:linear-gradient(135deg, rgba(200,161,90,.22), rgba(200,161,90,.06)); color:var(--vip-gold-ink); }
.aa-lg-card__ico svg{ width:22px; height:22px; }
.aa-lg-card h3{ font-size:16px; font-weight:700; line-height:1.35; padding-right:64px; }
.aa-lg-card p{ margin-top:4px; font-size:14px; color:var(--aa-ink-soft); line-height:1.55; }
.aa-lg-soon{ position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:var(--aa-r-pill); background:var(--vip-deep); color:var(--vip-gold); }
.aa-lg-note{ margin-top:32px; display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--aa-r-md); background:var(--aa-canvas); font-size:13.5px; color:var(--aa-ink-soft); line-height:1.6; }
.aa-lg-note svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--vip-gold-ink); }
.aa-lg-note a{ color:var(--aa-blue); font-weight:600; }
.aa-lg-pair{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:32px; align-items:start; }
.aa-lg-link{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:32px; border-radius:24px; color:#fff;
  background:radial-gradient(ellipse 80% 90% at 100% 0%, rgba(200,161,90,.25), transparent 65%), var(--vip-deep); transition:transform .2s var(--aa-ease); }
.aa-lg-link:hover{ transform:translateY(-2px); }
.aa-lg-link h2{ font-size:24px; font-weight:700; letter-spacing:-.01em; }
.aa-lg-link p{ color:rgba(255,255,255,.8); font-size:15px; }
.aa-lg-link .aa-more{ color:var(--vip-gold); }
@media (max-width:1100px){ .aa-lg-pass{ justify-self:start; transform:none; } .aa-lg-pair{ grid-template-columns:1fr; } }

/* ── 16j. Ücretsiz hizmetler (2026-10-29, v7) — reuses the .aa-np-* notice layout ── */
.aa-fr-hero{ background:linear-gradient(135deg, rgba(95,156,81,.14), var(--aa-panel) 70%); border-color:rgba(95,156,81,.28); }
.aa-fr-hero__icon{ background:var(--aa-green); box-shadow:0 14px 30px -14px rgba(95,156,81,.7); }
.aa-fr-tag{ color:var(--aa-green-ink); }
.aa-fr-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:24px; }
.aa-fr-card{ display:flex; flex-direction:column; padding:26px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); transition:border-color .2s var(--aa-ease), transform .2s var(--aa-ease); }
.aa-fr-card:hover{ border-color:var(--aa-green); transform:translateY(-2px); }
.aa-fr-card__ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:rgba(95,156,81,.14); color:var(--aa-green-ink); }
.aa-fr-card__ico svg{ width:26px; height:26px; }
.aa-fr-card h2{ margin-top:16px; font-size:20px; font-weight:700; }
.aa-fr-card > p:not(.aa-fr-doc){ margin-top:6px; font-size:14.5px; color:var(--aa-ink-soft); line-height:1.6; flex:1; }
.aa-fr-price{ display:flex; align-items:baseline; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--aa-line-soft); }
.aa-fr-price s{ font-size:15px; font-weight:600; color:var(--aa-ink-mute); text-decoration-thickness:2px; }
.aa-fr-price b{ font-size:26px; font-weight:700; letter-spacing:-.01em; color:var(--aa-green-ink); }
.aa-fr-doc{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 12px; border-radius:var(--aa-r-md); background:var(--aa-canvas); font-size:13px; color:var(--aa-ink-soft); }
.aa-fr-doc svg{ width:18px; height:18px; color:var(--aa-green-ink); flex:none; }
.aa-fr-doc b{ color:var(--aa-ink); }
html[data-theme="dark"] .aa-fr-price b, html[data-theme="dark"] .aa-fr-card__ico, html[data-theme="dark"] .aa-fr-doc svg{ color:#9CCB90; }
@media (max-width:900px){ .aa-fr-grid{ grid-template-columns:1fr; } }

/* ── 16k. Footer → ankaraair.com, kart logoları, açılış kutlaması (2026-10-29, v8) ── */
@media (min-width:1101px){ .aa-footer__grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:32px; } }
.aa-paymarks{ display:flex; align-items:center; gap:10px; }
.aa-paymark{ display:grid; place-items:center; width:64px; height:40px; border-radius:8px; background:#fff; border:1px solid #E4E9EE; }
.aa-paymark svg{ width:44px; height:28px; }
.aa-paymarks--sm{ gap:6px; }
.aa-paymarks--sm .aa-paymark{ width:44px; height:28px; border-radius:6px; }
.aa-paymarks--sm .aa-paymark svg{ width:30px; height:19px; }

.aa-confetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:300; }
.aa-launch{
  position:fixed; z-index:301; left:50%; top:calc(var(--aa-header) + 16px); transform:translate(-50%, -14px); opacity:0;
  width:min(600px, calc(100vw - 32px)); display:flex; align-items:center; gap:14px; padding:14px 14px 14px 16px;
  background:var(--aa-panel); border:1px solid var(--aa-line); border-radius:18px; box-shadow:var(--aa-shadow-card);
  transition:opacity .35s var(--aa-ease), transform .35s var(--aa-ease);
}
.aa-launch.is-in{ opacity:1; transform:translate(-50%, 0); }
.aa-launch__ico{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg, var(--aa-blue), #5F9C51); }
.aa-launch__ico svg{ width:22px; height:22px; }
.aa-launch__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.aa-launch__txt b{ font-size:16px; font-weight:700; color:var(--aa-ink); }
.aa-launch__txt span{ font-size:13px; color:var(--aa-ink-soft); line-height:1.45; }
.aa-launch__cta{ flex:none; height:40px; padding:0 18px; font-size:14px; }
.aa-launch__x{ flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--aa-ink-mute); }
.aa-launch__x:hover{ background:var(--aa-canvas); color:var(--aa-ink); }
.aa-launch__x svg{ width:16px; height:16px; }
@media (max-width:560px){
  .aa-launch{ flex-wrap:wrap; }
  .aa-launch__txt{ flex-basis:calc(100% - 110px); }
  .aa-launch__cta{ order:3; flex:1; }
}
@media (prefers-reduced-motion:reduce){ .aa-launch{ transition:opacity .01ms; transform:translate(-50%, 0); } }

/* ── 16l. Mobil uygulama kabuğu (2026-10-29, v9) ──────────────────────────
   ≤1100px the site behaves like an app: a fixed bottom tab bar (Ana Sayfa,
   Keşfet, Rota, Harita, Menü), a slim top bar (logo · bell · Bilet Al), and
   the menu as a bottom sheet over a dimmed backdrop. Everything that floats
   at the bottom (WhatsApp, the guide's ticket bar) sits above the tab bar. */
:root{ --aa-tabbar:64px; --aa-safe-b:env(safe-area-inset-bottom, 0px); }
.aa-tabbar{ display:none; }
.aa-sheet-backdrop{ position:fixed; inset:0; z-index:85; background:rgba(9,43,68,.45); opacity:0; pointer-events:none; transition:opacity .25s var(--aa-ease); }
.aa-sheet-backdrop.is-open{ opacity:1; pointer-events:auto; }
.aa-sheet__theme{ display:none; }

@media (max-width:1100px){
  html{ -webkit-tap-highlight-color:transparent; }
  body{ padding-bottom:calc(var(--aa-tabbar) + var(--aa-safe-b)); }

  /* top bar: logo · bell · Bilet Al — the rest lives in the sheet */
  .aa-burger{ display:none !important; }
  .aa-header__right{ display:flex !important; margin-left:auto; gap:8px; }
  .aa-header__right .aa-phone, .aa-header__right .aa-lang, .aa-header__right .aa-theme-toggle{ display:none; }
  .aa-header__cta{ height:38px; padding:0 14px; font-size:14px; }

  /* the tab bar */
  .aa-tabbar{
    display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; z-index:70; left:0; right:0; bottom:0;
    height:calc(var(--aa-tabbar) + var(--aa-safe-b)); padding:6px 6px calc(6px + var(--aa-safe-b));
    background:color-mix(in srgb, var(--aa-panel) 88%, transparent); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px);
    border-top:1px solid var(--aa-line); box-shadow:0 -8px 24px -18px rgba(9,43,68,.35);
  }
  .aa-tab-i{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:14px;
    font-size:11px; font-weight:600; color:var(--aa-ink-mute); transition:color .15s var(--aa-ease), transform .12s var(--aa-ease); }
  .aa-tab-i svg{ width:24px; height:24px; padding:2px; border-radius:10px; transition:background-color .15s var(--aa-ease); box-sizing:content-box; }
  .aa-tab-i:active{ transform:scale(.94); }
  .aa-tab-i.is-active, .aa-tab-i[aria-expanded="true"]{ color:var(--aa-blue); }
  .aa-tab-i.is-active svg, .aa-tab-i[aria-expanded="true"] svg{ background:var(--aa-blue-wash); padding:2px 14px; }

  /* the menu as a bottom sheet */
  .aa-sheet{
    inset:auto 0 0 0; max-height:calc(100dvh - 56px); z-index:90; border-radius:24px 24px 0 0;
    transform:translateY(105%); padding:12px 20px calc(24px + var(--aa-safe-b));
    box-shadow:0 -20px 50px -20px rgba(9,43,68,.45);
  }
  .aa-sheet::before{ content:''; display:block; flex:none; width:40px; height:5px; border-radius:3px; margin:0 auto 8px; background:var(--aa-line); }
  .aa-sheet.is-open{ transform:none; }
  .aa-sheet__top{ margin-bottom:8px; }
  .aa-sheet a:not(.aa-btn){ display:flex; align-items:center; justify-content:space-between; padding:13px 4px; font-size:16px; }
  .aa-sheet a:not(.aa-btn)::after{ content:''; width:8px; height:8px; border-top:2px solid var(--aa-ink-mute); border-right:2px solid var(--aa-ink-mute); transform:rotate(45deg); flex:none; }
  .aa-sheet a:not(.aa-btn):active{ background:var(--aa-canvas); }
  .aa-sheet small{ font-size:12px; color:var(--aa-ink-mute); font-weight:600; margin:0 auto 0 6px; }
  .aa-sheet__theme{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 4px; font-size:16px; font-weight:600; color:var(--aa-ink); border-bottom:1px solid var(--aa-line-soft); }
  .aa-sheet__theme svg{ width:20px; height:20px; color:var(--aa-ink-soft); }

  /* floating things sit above the tab bar */
  .aa-wa{ bottom:calc(var(--aa-tabbar) + var(--aa-safe-b) + 14px); right:16px; height:50px; padding:0 10px; }
  .aa-wa svg{ width:28px; height:28px; }
  .aa-wa:hover{ padding-right:10px; }
  .aa-wa .aa-wa__label{ display:none; }
}
@media (max-width:760px){
  .has-ctabar .aa-ctabar{ bottom:calc(var(--aa-tabbar) + var(--aa-safe-b)); padding-bottom:10px; }
  .has-ctabar .aa-wa{ bottom:calc(var(--aa-tabbar) + var(--aa-safe-b) + 84px); }
  .has-ctabar .aa-footer{ padding-bottom:90px; }
}
@media (max-width:380px){ .aa-header__cta{ padding:0 10px; } .aa-header__cta i.fi{ display:none; } }
@supports not (background:color-mix(in srgb, red 50%, transparent)){ @media (max-width:1100px){ .aa-tabbar{ background:var(--aa-panel); } } }

/* ── 16m. Mobil yatay kayma önlemi, dünya menüsü, vizesiz ülkeler (2026-10-29, v10) ── */
/* No page may pan sideways. `clip` (not `hidden`) so sticky/fixed children
   keep working; older Safari gets `hidden` on body only. The map iframe is
   pinned to its box — iOS Safari otherwise sizes iframes to their content. */
html, body{ overflow-x:clip; max-width:100%; }
@supports not (overflow:clip){ body{ overflow-x:hidden; } }
.aa-gmap{ min-width:100%; width:1px; max-width:100%; }
.aa-map{ max-width:100%; }

/* globe menu (shares the bell's popover chrome) */
.aa-globe-toggle i{ font-size:18px; line-height:1; }
.aa-globe-menu{ min-width:300px; max-width:min(92vw, 340px); padding:0; }
.aa-globe__sub{ padding:8px 16px 4px; font-size:12px; color:var(--aa-ink-mute); line-height:1.45; }
.aa-globe__list{ max-height:min(60vh, 380px); overflow-y:auto; padding:4px 0 8px; }
.aa-menu a.aa-globe__item{ height:auto; min-height:42px; padding:8px 16px; gap:10px; font-weight:600; font-size:14px; }
.aa-globe__flag{ font-size:20px; line-height:1; width:26px; text-align:center; flex:none; }
.aa-globe__flag.is-text, .aa-vz-flag.is-text{ font-size:10px; font-weight:800; letter-spacing:.02em; color:#fff; background:#C8102E; border-radius:4px; padding:4px 3px; width:auto; }
.aa-globe__name{ flex:1; min-width:0; }
.aa-globe__tag{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:var(--aa-r-pill); background:rgba(95,156,81,.14); color:var(--aa-green-ink); }

/* vizesiz pages */
.aa-vz-flag{ display:grid; place-items:center; font-size:36px; line-height:1; }
.aa-vz-flag.is-big{ width:88px; height:88px; border-radius:24px; font-size:56px; background:var(--aa-canvas); border:1px solid var(--aa-line); flex:none; }
.aa-vz-flag.is-big.is-text{ font-size:18px; padding:0; background:#C8102E; border-color:#C8102E; }
.aa-vz-hero{ display:flex; gap:24px; align-items:center; margin-top:22px; }
.aa-vz-hero h1{ margin-top:8px; font-size:clamp(26px, 3.4vw, 42px); font-weight:700; letter-spacing:-.02em; line-height:1.12; }
.aa-vz-hero__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--aa-ink-soft); }
.aa-vz-hero__lead{ margin-top:10px; font-size:17px; color:var(--aa-ink-soft); max-width:62ch; }
.aa-vz-badge{ display:inline-block; padding:3px 10px; border-radius:var(--aa-r-pill); background:var(--aa-blue-wash); color:var(--aa-blue); font-size:12px; font-weight:700; }
.aa-vz-badge.is-id{ background:rgba(95,156,81,.14); color:var(--aa-green-ink); }
.aa-vz-facts{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin:24px 0 0; }
.aa-vz-facts div{ padding:14px 16px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-vz-facts dt{ font-size:12px; font-weight:600; color:var(--aa-ink-mute); }
.aa-vz-facts dd{ margin:2px 0 0; font-size:15px; font-weight:700; color:var(--aa-ink); }
.aa-vz-sec + .aa-vz-sec{ margin-top:44px; }
.aa-vz-sec > .aa-h2{ margin-bottom:14px; }
.aa-vz-intro{ font-size:16px; line-height:1.75; color:var(--aa-ink-soft); max-width:70ch; }
.aa-vz-h3{ margin-top:22px; font-size:17px; font-weight:700; }
.aa-vz-steps{ padding-left:22px; font-size:15px; }
.aa-vz-tt{ margin-top:18px; padding:16px 18px; border-radius:var(--aa-r-lg); background:var(--aa-canvas); }
.aa-vz-tt__h{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--aa-ink); }
.aa-vz-tt__h svg{ width:18px; height:18px; color:var(--aa-blue); }
.aa-vz-tt ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.aa-vz-tt li{ display:flex; flex-direction:column; padding:10px 12px; border-radius:var(--aa-r-md); background:var(--aa-panel); border:1px solid var(--aa-line); }
.aa-vz-tt li b{ font-size:14px; font-weight:700; }
.aa-vz-tt li span{ font-size:14px; font-weight:600; color:var(--aa-blue); }
.aa-vz-tt li small{ font-size:12px; color:var(--aa-ink-mute); }
.aa-vz-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.aa-vz-warn{ margin-top:32px; display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--aa-r-md); background:rgba(240,160,32,.12); font-size:13.5px; line-height:1.6; color:var(--aa-ink); }
.aa-vz-warn svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--aa-amber); }
.aa-vz-warn a{ color:var(--aa-blue); font-weight:600; }
.aa-vz-group{ margin-top:32px; scroll-margin-top:calc(var(--aa-header) + 16px); }
.aa-vz-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:12px; }
.aa-vz-card{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); transition:border-color .16s var(--aa-ease), transform .16s var(--aa-ease); }
.aa-vz-card:hover{ border-color:var(--aa-green); transform:translateY(-1px); }
.aa-vz-card__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.aa-vz-card__txt b{ font-size:15px; font-weight:700; color:var(--aa-ink); }
.aa-vz-card__txt span{ font-size:13px; color:var(--aa-ink-soft); line-height:1.45; }
@media (max-width:900px){ .aa-vz-facts, .aa-vz-tt ul{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .aa-vz-hero{ flex-direction:column; align-items:flex-start; } .aa-vz-flag.is-big{ width:72px; height:72px; font-size:44px; } }

/* ── 16n. Uygulama çubuğu, hava durumu, aramada ülkeler (2026-10-29, v11) ── */
:root{ --aa-appbar:0px; }
html.has-appbar{ --aa-appbar:48px; }
.aa-appbar{ position:fixed; z-index:66; top:0; left:0; right:0; height:48px; transform:translateY(-100%);
  transition:transform .35s var(--aa-ease); color:#fff; background:linear-gradient(90deg, #092B44, #0057D9); }
html.has-appbar .aa-appbar{ transform:none; }
.aa-header{ top:var(--aa-appbar); transition:top .35s var(--aa-ease), height .2s var(--aa-ease), background-color .2s var(--aa-ease), box-shadow .2s var(--aa-ease); }
body{ transition:padding-top .35s var(--aa-ease); }
html.has-appbar body{ padding-top:48px; }
.aa-launch{ top:calc(var(--aa-header) + var(--aa-appbar) + 16px); }
.aa-appbar__in{ max-width:1400px; height:100%; margin:0 auto; padding:0 var(--aa-gutter); display:flex; align-items:center; gap:12px; }
.aa-appbar__ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.16); flex:none; }
.aa-appbar__ico svg{ width:17px; height:17px; }
.aa-appbar__txt{ flex:1; min-width:0; display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.aa-appbar__txt b{ font-weight:700; }
.aa-appbar__txt span{ color:rgba(255,255,255,.85); }
.aa-appbar__cta{ flex:none; height:32px; padding:0 14px; border-radius:var(--aa-r-pill); display:inline-flex; align-items:center; background:#86C542; color:#0B2A12; font-size:13px; font-weight:700; }
.aa-appbar__cta:hover{ background:#9AD45A; }
.aa-appbar__x{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:rgba(255,255,255,.85); }
.aa-appbar__x:hover{ background:rgba(255,255,255,.14); color:#fff; }
.aa-appbar__x svg{ width:16px; height:16px; }
@media (max-width:560px){
  .aa-appbar__in{ padding:0 12px; gap:10px; }
  .aa-appbar__txt{ flex-direction:column; gap:0; font-size:13px; line-height:1.2; }
  .aa-appbar__txt span{ font-size:12px; }
  .aa-appbar__long{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .aa-appbar, .aa-header, body{ transition:none; } }

/* weather card on the route planner */
.aa-wx{ margin:0 0 20px; padding:20px 22px; border-radius:var(--aa-r-lg); border:1px solid var(--aa-line);
  background:linear-gradient(135deg, var(--aa-blue-wash), var(--aa-panel) 65%); display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1.3fr); gap:20px 28px; align-items:center; }
.aa-wx__loading{ grid-column:1 / -1; font-size:14px; color:var(--aa-ink-soft); }
.aa-wx-ico{ width:20px; height:20px; flex:none; }
.aa-wx__now{ display:flex; align-items:center; gap:16px; }
.aa-wx__big .aa-wx-ico{ width:58px; height:58px; color:var(--aa-blue); }
.aa-wx__k{ font-size:12px; font-weight:600; color:var(--aa-ink-mute); }
.aa-wx__t{ display:flex; align-items:baseline; gap:10px; }
.aa-wx__t b{ font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--aa-ink); }
.aa-wx__t span{ font-size:16px; font-weight:600; color:var(--aa-ink); }
.aa-wx__m{ margin-top:4px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:12.5px; color:var(--aa-ink-soft); }
.aa-wx__m .aa-wx-ico{ width:14px; height:14px; color:var(--aa-ink-mute); }
.aa-wx__m > span{ color:var(--aa-ink-mute); }
.aa-wx__days{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.aa-wx__days li{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:var(--aa-r-md); background:var(--aa-panel); border:1px solid var(--aa-line); }
.aa-wx__d{ font-size:12px; font-weight:700; color:var(--aa-ink-soft); }
.aa-wx__days .aa-wx-ico{ width:24px; height:24px; color:var(--aa-blue); }
.aa-wx__days b{ font-size:15px; font-weight:700; }
.aa-wx__days b small{ margin-left:4px; font-size:12px; font-weight:600; color:var(--aa-ink-mute); }
.aa-wx__p{ display:flex; align-items:center; gap:2px; font-size:11.5px; font-weight:600; color:var(--aa-ink-mute); }
.aa-wx__p .aa-wx-ico{ width:12px; height:12px; color:#3B82C4; }
.aa-wx__tip{ grid-column:1 / -1; display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; padding:12px 14px; border-radius:var(--aa-r-md); background:var(--aa-panel); border:1px solid var(--aa-line); }
.aa-wx__tip p{ flex:1; min-width:240px; font-size:14px; color:var(--aa-ink); line-height:1.5; }
.aa-wx__btns{ display:flex; flex-wrap:wrap; gap:8px; }
.aa-wx__btns button{ height:34px; padding:0 14px; border-radius:var(--aa-r-pill); border:1px solid var(--aa-blue); color:var(--aa-blue); font-size:13px; font-weight:700; }
.aa-wx__btns button:hover{ background:var(--aa-blue); color:#fff; }
.aa-wx__src{ grid-column:1 / -1; margin-top:-8px; font-size:11.5px; color:var(--aa-ink-mute); }
.aa-wx__src a{ text-decoration:underline; text-underline-offset:2px; }
@media (max-width:900px){ .aa-wx{ grid-template-columns:1fr; } }
@media (max-width:420px){ .aa-wx__days{ grid-template-columns:repeat(2, 1fr); } }

/* country rows in the hero finder */
.aa-finder__flag{ font-size:22px; background:var(--aa-canvas); }
.aa-finder__flag.is-text{ font-size:10px; font-weight:800; color:#fff; background:#C8102E; }

/* ── 17. Reduced motion ────────────────────────────────────────────────── */
/* Everything stops. Except the departure countdown, which site.js keeps
   updating: "14 dk sonra" is information a passenger needs, not decoration.
   Freezing it would be an accessibility failure dressed as a feature. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .aa-reveal, .js .aa-reveal.is-in{ opacity:1; transform:none; }
  .js .aa-time{ opacity:1; transform:none; }
  .js .aa-nowline__rule{ transform:scaleX(1); }
}

/* ── 18. Print ─────────────────────────────────────────────────────────── */
@media print{
  .aa-header,.aa-hero__nav,.aa-search,.aa-app,.aa-footer__pay{ display:none; }
  .aa-time.is-past{ opacity:1; }
}

/* ── 16o. Nöbetçi eczane, kurum rehberi, dil menüsü "yakında" (2026-10-29, v11) ── */
.aa-pharm-toggle i{ font-size:18px; line-height:1; }
.aa-pharm-menu{ min-width:310px; max-width:min(92vw, 360px); padding:0; }
.aa-pharm__bar{ padding:8px 16px 4px; }
.aa-pharm__select{ width:100%; height:40px; padding:0 12px; border:1px solid var(--aa-line); border-radius:var(--aa-r-md); background:var(--aa-panel); color:var(--aa-ink); font:inherit; font-size:14px; font-weight:600; }
.aa-pharm__list{ display:flex; flex-direction:column; }
.aa-pharm-menu .aa-pharm__list{ max-height:min(56vh, 360px); overflow-y:auto; padding:4px 0 8px; }
.aa-pharm__item{ display:flex; flex-direction:column; gap:3px; padding:10px 16px; border-bottom:1px solid var(--aa-line); }
.aa-pharm__item:last-of-type{ border-bottom:0; }
.aa-pharm__item b{ font-size:14px; font-weight:700; color:var(--aa-ink); }
.aa-pharm__item > span{ font-size:12.5px; line-height:1.45; color:var(--aa-ink-soft); }
.aa-pharm__acts{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:2px; }
.aa-menu .aa-pharm__acts a, .aa-pharm__acts a{ height:auto; padding:0; font-size:13px; font-weight:700; color:var(--aa-blue); background:none; }
.aa-pharm__msg{ padding:12px 16px; font-size:13px; line-height:1.5; color:var(--aa-ink-soft); }
.aa-pharm__msg a, .aa-pharm__src a{ color:var(--aa-blue); font-weight:600; }
.aa-menu .aa-pharm__msg a, .aa-menu .aa-pharm__src a{ display:inline; height:auto; padding:0; background:none; }
.aa-pharm__src{ padding:8px 16px 4px; font-size:11.5px; color:var(--aa-ink-mute); }
/* full page */
.aa-pharm-page{ margin-top:24px; }
.aa-pharm__lab{ display:flex; flex-direction:column; gap:6px; max-width:360px; font-size:13px; font-weight:600; color:var(--aa-ink-mute); }
.aa-pharm__list.is-big{ margin-top:18px; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:12px; }
.aa-pharm__item.is-big{ padding:16px 18px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-pharm__item.is-big b{ font-size:16px; }
.aa-pharm__item.is-big > span{ font-size:14px; }
.aa-pharm__list.is-big .aa-pharm__msg, .aa-pharm__list.is-big .aa-pharm__src{ grid-column:1 / -1; padding-inline:0; }

/* kurum rehberi (rehber/) */
.aa-rg-head{ margin-top:22px; }
.aa-rg-head h1{ margin-top:10px; font-size:clamp(26px, 3.4vw, 40px); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.aa-rg-badge, .aa-rg-dist{ display:inline-block; margin-right:8px; padding:3px 10px; border-radius:var(--aa-r-pill); font-size:12px; font-weight:700; background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-rg-dist{ background:var(--aa-canvas); color:var(--aa-ink-soft); border:1px solid var(--aa-line); }
.aa-rg-call{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.aa-rg-facts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:12px; margin:0; }
.aa-rg-facts div{ padding:14px 16px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); min-width:0; }
.aa-rg-facts dt{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--aa-ink-mute); }
.aa-rg-facts dt svg{ width:14px; height:14px; }
.aa-rg-facts dd{ margin:4px 0 0; font-size:15px; font-weight:600; color:var(--aa-ink); overflow-wrap:anywhere; }
.aa-rg-facts dd a{ color:var(--aa-blue); }
.aa-rg-map{ margin-top:20px; height:300px; border-radius:var(--aa-r-lg); overflow:hidden; border:1px solid var(--aa-line); }
.aa-rg-map iframe{ width:100%; height:100%; border:0; display:block; }
.aa-rg-sec{ margin-top:32px; }
.aa-rg-sec > .aa-h2{ margin-bottom:14px; }
.aa-rg-step{ margin-top:8px; font-size:14px; color:var(--aa-ink-soft); }
.aa-rg-step b{ color:var(--aa-ink); }
.aa-rg-small{ margin-top:4px; font-size:12.5px; color:var(--aa-ink-mute); }
.aa-rg-small a{ color:var(--aa-blue); font-weight:600; }
.aa-rg-note, .aa-rg-src{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:12px 14px; border-radius:var(--aa-r-md); font-size:13px; line-height:1.55; }
.aa-rg-note{ background:rgba(95,156,81,.12); color:var(--aa-ink); }
.aa-rg-src{ background:var(--aa-canvas); color:var(--aa-ink-soft); }
.aa-rg-note svg, .aa-rg-src svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--aa-blue); }
.aa-rg-note a, .aa-rg-src a{ color:var(--aa-blue); font-weight:600; }
.aa-rg-group{ margin-top:28px; }
.aa-rg-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:8px; }
.aa-rg-list a{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--aa-line); border-radius:var(--aa-r-md); background:var(--aa-panel); transition:border-color .16s var(--aa-ease); }
.aa-rg-list a:hover{ border-color:var(--aa-green); }
.aa-rg-list b{ font-size:14.5px; font-weight:700; color:var(--aa-ink); }
.aa-rg-list span{ font-size:13px; color:var(--aa-blue); font-weight:600; }
.aa-rg-ico{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:14px; background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-rg-ico svg{ width:22px; height:22px; }
.aa-rg .aa-pagehead .aa-faqsearch{ margin-top:16px; max-width:420px; }

/* language menu: languages not translated yet */
.aa-lang__menu .is-soon{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--aa-r-md); font-size:14px; color:var(--aa-ink-mute); cursor:default; }
.aa-lang__menu .is-soon small{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:var(--aa-r-pill); background:var(--aa-canvas); border:1px solid var(--aa-line); }

/* phones: the logo keeps its size in every language ("Buy Ticket" is longer
   than "Bilet Al"); the ticket glyph goes first when space runs out */
@media (max-width:1100px){ .aa-header__logo{ flex:none; } }
@media (max-width:480px){ .aa-header__logo img{ height:40px; } .aa-header__right{ gap:6px; } .aa-header__cta{ padding:0 12px; } .aa-header__cta i.fi{ display:none; } }
@media (max-width:370px){ .aa-header__logo img{ height:34px; } .aa-header__right{ gap:4px; } }

/* VIP hero: the vehicle photo is landscape (2026-10-29) */
.aa-vip-hero__media{ width:min(100%, 560px); }
.aa-vip-hero__media picture{ display:block; }
.aa-vip-hero__media img{ aspect-ratio:16/10; object-position:50% 50%; }
.aa-vip-credit{ position:absolute; top:12px; right:14px; z-index:2; font-size:10px; color:rgba(255,255,255,.75); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.aa-vip-credit a{ color:inherit; text-decoration:underline; }
@media (max-width:1100px){ .aa-vip-hero__media{ width:min(100%, 520px); } }

/* menu: VIP "Yakında" badge in white type (2026-10-29) */
.aa-nav__link--vip .aa-soon{ color:#fff; }

/* SSS: question groups in two columns, left and right (desktop) */
.aa-pagemain .aa-sss{ max-width:1180px; }
@media (min-width:900px){
  .aa-sss [data-gezi-faq]{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start; }
  .aa-sss [data-gezi-faq] > noscript{ grid-column:1 / -1; }
  .aa-sss [data-gezi-faq] .aa-faqgroup[hidden]{ display:none; }
}

/* ── 16p. Kiosk Kullanımı (2026-10-29) ── */
.aa-kiosk-hero{ display:grid; grid-template-columns:1.25fr .75fr; gap:48px; align-items:center; padding-top:28px; }
.aa-kiosk-hero h1{ margin-top:10px; font-size:clamp(28px, 3.6vw, 46px); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.aa-kiosk-hero__lead{ margin-top:14px; font-size:17px; line-height:1.65; color:var(--aa-ink-soft); max-width:58ch; }
.aa-kiosk-hero__fare{ margin-top:22px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:30px; font-weight:800; color:var(--aa-ink); }
.aa-kiosk-hero__fare small{ font-size:13px; font-weight:600; color:var(--aa-ink-mute); }
/* the device: a simple drawn kiosk, not a product photo */
.aa-kiosk-device{ justify-self:center; width:min(100%, 250px); padding:18px 18px 0; border-radius:28px 28px 10px 10px; background:linear-gradient(160deg, #1d2b3a, #0b141e); box-shadow:0 40px 70px -30px rgba(9,43,68,.55); }
.aa-kiosk-device__screen{ display:flex; flex-direction:column; gap:8px; padding:18px 14px; aspect-ratio:3/4; border-radius:14px; background:linear-gradient(180deg, #f7fafc, #e8f0f8); }
.aa-kiosk-device__logo{ display:block; } .aa-kiosk-device__logo img{ height:26px; width:auto; }
.aa-kiosk-device__screen b{ margin-top:6px; font-size:17px; color:#0b141e; }
.aa-kiosk-device__row{ padding:9px 10px; border-radius:9px; background:#fff; border:1px solid #d9e3ee; font-size:12px; font-weight:600; color:#24364a; }
.aa-kiosk-device__btn{ margin-top:auto; padding:10px; border-radius:10px; text-align:center; font-size:13px; font-weight:700; color:#fff; background:var(--aa-green); }
.aa-kiosk-device__pos{ display:flex; justify-content:center; padding:14px 0 10px; }
.aa-kiosk-device__pos span{ width:64px; height:30px; border-radius:7px; background:#2c3e52; box-shadow:inset 0 0 0 2px #3c5168; }
.aa-kiosk-device__slot{ margin:0 auto 14px; width:90px; height:6px; border-radius:3px; background:#05090e; }
.aa-kiosk-device__foot{ margin:0 -18px; height:34px; border-radius:0 0 10px 10px; background:#0b141e; }
.aa-kiosk-sec{ margin-top:52px; }
.aa-kiosk-sec > .aa-h2{ margin-bottom:16px; }
.aa-kiosk-sub{ margin:-6px 0 18px; font-size:15px; color:var(--aa-ink-soft); }
.aa-kiosk-steps{ list-style:none; counter-reset:k; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.aa-kiosk-steps li{ counter-increment:k; position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 18px 18px 64px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-kiosk-steps li::before{ content:counter(k); position:absolute; left:18px; top:18px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--aa-blue); color:#fff; font-weight:800; font-size:14px; }
.aa-kiosk-steps b{ font-size:15px; color:var(--aa-ink); }
.aa-kiosk-steps span{ font-size:14px; line-height:1.55; color:var(--aa-ink-soft); }
.aa-kiosk-steps a{ color:var(--aa-blue); font-weight:600; }
.aa-kiosk-pays{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.aa-kiosk-pay{ position:relative; padding:22px; border:1px solid var(--aa-line); border-radius:var(--aa-r-lg); background:var(--aa-panel); }
.aa-kiosk-pay__ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--aa-blue-wash); color:var(--aa-blue); }
.aa-kiosk-pay__ico svg{ width:24px; height:24px; }
.aa-kiosk-pay__tag{ position:absolute; top:22px; right:22px; padding:3px 10px; border-radius:var(--aa-r-pill); font-size:11.5px; font-weight:700; background:rgba(95,156,81,.14); color:var(--aa-green-ink); }
.aa-kiosk-pay h3{ margin-top:16px; font-size:17px; font-weight:700; color:var(--aa-ink); }
.aa-kiosk-pay p{ margin-top:6px; font-size:14px; line-height:1.6; color:var(--aa-ink-soft); }
.aa-kiosk-cols{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:start; padding-bottom:40px; }
.aa-kiosk-online{ padding:24px; border-radius:var(--aa-r-lg); background:var(--aa-blue-wash); }
.aa-kiosk-online p{ font-size:15px; line-height:1.6; color:var(--aa-ink); margin-bottom:16px; }
.aa-kiosk .aa-tips a{ color:var(--aa-blue); font-weight:600; }
@media (max-width:1000px){ .aa-kiosk-steps, .aa-kiosk-pays{ grid-template-columns:1fr 1fr; } .aa-kiosk-cols{ grid-template-columns:1fr; } }
@media (max-width:760px){ .aa-kiosk-hero{ grid-template-columns:1fr; gap:28px; } .aa-kiosk-device{ width:200px; } }
@media (max-width:560px){ .aa-kiosk-steps, .aa-kiosk-pays{ grid-template-columns:1fr; } }
.aa-kiosk-hero__text .aa-backlink{ display:flex; width:max-content; }

/* ── 16q. Kamp alanları (2026-10-29) ── */
.aa-camp-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 16px; }
.aa-camp-filter .aa-chip.is-active{ background:var(--aa-blue); border-color:var(--aa-blue); color:#fff; }
.aa-camp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.aa-camp-tags i{ font-style:normal; font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--aa-r-pill); background:rgba(95,156,81,.14); color:var(--aa-green-ink); }
.aa-camp-card[hidden]{ display:none; }
.aa-camp-about p{ font-size:16px; line-height:1.75; color:var(--aa-ink-soft); max-width:70ch; }
.aa-camp-h{ margin:28px 0 14px; }
.aa-camp-how{ font-size:15px; line-height:1.7; color:var(--aa-ink-soft); max-width:70ch; }
.aa-camp .aa-rg-head .aa-rg-badge + .aa-rg-badge{ background:rgba(95,156,81,.14); color:var(--aa-green-ink); }