/* ============================================================================
   AGNE TUR BRAND COLOUR SYSTEM — single source of truth.
   ============================================================================
   Loaded on every page by includes/header.php, before any page-local <style>.
   Nothing anywhere else may hard-code a hex value.

   LAYER 1 — the official Agne Tur brand colours, exactly as supplied.
   These three are the identity and are never altered:

     Agne Blue       #0B53A7   rgb(11, 83, 167)    the dominant corporate colour
     Agne Orange     #F16E00   rgb(241, 110, 0)    conversion accent, used sparingly
     Agne Turquoise  #00A6B4   rgb(0, 166, 180)    secondary / decorative, Mediterranean

   LAYER 2 — tone ramps, and WHY they are necessary.

   Measured against white:
     Agne Blue        7.47:1  → safe as text AND with white text on the fill.
     Agne Orange      3.01:1  → FAILS WCAG AA (4.5:1) for normal text, both as
                                text on white and as a fill under white text.
     Agne Turquoise   2.95:1  → FAILS AA. Decorative only.

   So orange and turquoise get darker siblings for anything that carries or
   sits under text. The brand hues themselves stay exactly as issued and are
   used where no text is involved — fills behind dark text, rules, icons,
   gradients, focus rings. A "Teklif isteyin" button in raw #F16E00 with white
   text would be unreadable for a large number of users; --agne-orange-700 is
   the same hue, dark enough to pass, and reads as the same brand orange.

   Every ratio below is measured, not estimated, and dev-tools/check-contrast.py
   re-verifies the whole set. If you change a value, run it.

   LAYER 3 — semantic roles. Components reference ONLY these, so the palette can
   be re-pointed in one place without touching a single component:

     brand   = Agne Blue      headings, navigation, structure, corporate blocks
     action  = Agne Orange    every route INTO a conversion: Teklif isteyin,
                              Kurumsal teklif, form submits. Deliberately rare.
     accent  = Agne Turquoise eyebrows, decorative rules, sea/tourism gradients
     ground  = neutral tints  section separation without a second border

   VISUAL BALANCE, roughly as briefed: ~65% white/neutral, ~22% blue,
   ~8% turquoise, ~5% orange. Orange appears on this site only as buttons and
   the "Detaylar →" affordance; if it starts appearing anywhere else, that
   balance is being broken.
   ============================================================================ */

:root {
  /* ---- Layer 1: official brand colours, unaltered ---- */
  --agne-blue: #0B53A7;
  --agne-orange: #F16E00;
  --agne-turquoise: #00A6B4;

  /* ---- Layer 1b: the supplied supporting neutrals and tints ---- */
  --agne-blue-dark: #083F80;        /* 10.33:1 on white — dark section grounds */
  --agne-blue-light: #EAF2FB;       /* soft blue background */
  --agne-orange-light: #FFF1E6;     /* soft orange background */
  --agne-turquoise-light: #E6F7F8;  /* soft turquoise background */
  --agne-text: #1F2937;             /* 14.68:1 on white */
  --agne-muted: #6B7280;            /*  4.83:1 on white — smallest print only */
  --agne-background: #FFFFFF;
  --agne-surface: #F7F9FC;
  --agne-border: #E5E7EB;

  /* ---- Layer 2: derived tones, required for contrast ---- */
  /* Blue needs no lightening for text; it only needs a hover and a tint. */
  --agne-blue-hover: #094A96;
  --agne-blue-100: #D3E3F7;         /* stronger tint: borders on soft panels */
  --agne-blue-on-dark: #C7DCF5;     /* 7.37:1 on --agne-blue-dark — body copy */

  /* Orange. -700 is the ONLY orange that may carry white text (4.75:1); -800
     is the only orange that may BE text on white (5.50:1). Raw #F16E00 is for
     fills behind dark ink, rules and icons — never for text either way. */
  --agne-orange-700: #BA5600;
  --agne-orange-800: #AB4E00;
  --agne-orange-100: #FFE2CC;
  --agne-orange-on-dark: #FFA45C;   /* 5.27:1 on --agne-blue-dark */

  /* Turquoise, same rule: raw is decorative, -700 carries white text (4.83:1),
     -800 is turquoise text on white (5.53:1). */
  --agne-turquoise-700: #007E89;
  --agne-turquoise-800: #00747E;
  --agne-turquoise-100: #C7EDF0;
  --agne-turquoise-on-dark: #4FD1DC; /* 5.65:1 on --agne-blue-dark */

  /* Neutral ink ramp. --ink-faint carries the smallest text on the site (form
     hints, price notes) and has the least headroom, so it is the one to check
     first if these are ever adjusted. */
  --ink: var(--agne-text);          /* 14.68:1 */
  --ink-muted: #4B5563;             /*  7.56:1 — small print */
  --ink-faint: var(--agne-muted);   /*  4.83:1 — smallest legal size only */
  --line: var(--agne-border);
  --line-strong: #CBD5E1;
  --white: var(--agne-background);

  /* ---- Layer 3: semantic roles ---- */
  --brand: var(--agne-blue);
  --brand-deep: var(--agne-blue-dark);
  --brand-heading: var(--agne-blue);
  --brand-hover: var(--agne-blue-hover);
  --brand-soft: var(--agne-blue-light);
  --brand-soft-strong: var(--agne-blue-100);
  --on-brand: var(--white);

  /* Conversion only. --action is the button FILL (white text sits on it);
     --action-ink is orange WORDING on a light ground. They are different
     tones because they have different contrast jobs. */
  --action: var(--agne-orange-700);
  --action-hover: var(--agne-orange-800);
  --action-ink: var(--agne-orange-800);
  --action-soft: var(--agne-orange-light);
  --action-soft-strong: var(--agne-orange-100);
  --on-action: var(--white);

  /* Supporting / decorative. --accent is the raw brand turquoise and is only
     ever used where no text sits on it. --accent-ink is the text-safe tone. */
  --accent: var(--agne-turquoise);
  --accent-ink: var(--agne-turquoise-800);
  --accent-soft: var(--agne-turquoise-light);
  --accent-soft-strong: var(--agne-turquoise-100);

  --ground: var(--agne-surface);
  --ground-strong: var(--agne-blue-light);

  /* Text colours for the dark blue sections (.brand-dark, .site-footer). */
  --on-dark: var(--white);
  --on-dark-muted: var(--agne-blue-on-dark);
  --on-dark-accent: var(--agne-turquoise-on-dark);

  /* ---- Structure ---- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(8, 63, 128, .06), 0 2px 8px rgba(8, 63, 128, .05);
  --shadow: 0 2px 6px rgba(8, 63, 128, .07), 0 12px 28px rgba(8, 63, 128, .08);
  --shadow-lg: 0 4px 12px rgba(8, 63, 128, .09), 0 24px 56px rgba(8, 63, 128, .12);
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --header-h: 74px;

  /* ---- Motion ----
     The site is deliberately almost motionless: three hover/press transitions
     and one entrance. This curve is the shared easing for anything that
     ENTERS — it decelerates hard, so an element arrives and settles rather
     than sliding to a stop. Use it rather than the `ease` keyword. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* ---- Type ---- */
  /* System stack first: it renders instantly, has full Turkish coverage
     (ı, İ, ş, ğ, ç, ö, ü) on every platform, and costs no request. No webfont
     is loaded — a travel site is judged on how fast the first screen paints. */
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
}

/* ---------------------------------------------------------------- reset ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Blanket kill-switch, kept as the default for anything added later without
     thought. It is a floor, not the whole policy — see the exception below. */
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

  /* Exception: the success panel keeps a plain opacity fade.
     What this setting protects against is MOVEMENT — translation, scaling,
     parallax — which can genuinely make people ill. A cross-fade has no
     motion vector and is not what the preference is asking us to remove.
     Reducing motion should mean gentler, not "nothing ever happens": the
     confirmation should still read as having arrived, rather than being there
     as though it always had been.
     Wins over the blanket rule above on specificity (0,1,0 vs 0,0,0), so both
     can carry !important. */
  .form-status--ok { animation: agne-fade-in 240ms linear both !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-heading);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem); font-weight: 750; }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Visible focus everywhere. Never removed — this is the only affordance a
   keyboard user has, and the enquiry forms are the whole point of the site. */
:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 200;
  background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--on-brand); }

/* Sample-data banner. Local dev only — see includes/header.php. Uses the danger
   red rather than any brand tone precisely so it never reads as site chrome. */
.dev-banner {
  background: var(--agne-orange-800); color: var(--agne-orange-light);
  font-size: .84rem; font-weight: 600; line-height: 1.45;
  padding: 9px 20px; text-align: center;
}
.dev-banner strong {
  display: inline-block; margin-right: .6em;
  background: var(--agne-orange-light); color: var(--agne-orange-800);
  padding: 1px 8px; border-radius: 999px;
  font-size: .76rem; letter-spacing: .08em;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout ---- */

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 600px) { .wrap, .wrap-narrow { width: calc(100% - 32px); } }

section { padding: clamp(46px, 6vw, 82px) 0; }
section.ground { background: var(--ground); }
section.ground-strong { background: var(--ground-strong); }
section.brand-dark { background: var(--brand-deep); color: var(--on-dark-muted); }
section.brand-dark h2, section.brand-dark h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-muted); font-size: 1.06rem; margin-bottom: 0; }
.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: .55em;
}
section.brand-dark .eyebrow { color: var(--agne-turquoise); }
section.brand-dark .section-head p { color: #B9D2D4; }

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --------------------------------------------------------------- buttons --- */
/* One rule: --action (terracotta) marks a route into an enquiry — call, message,
   send the form. Anything else is a --btn-ghost or a plain link. If everything
   is orange, nothing is. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 13px 24px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-action { background: var(--action); color: var(--on-action); }        /* 5.68:1 */
.btn-action:hover { background: var(--action-hover); color: var(--on-action); }

.btn-brand { background: var(--brand); color: var(--on-brand); }           /* 7.37:1 */
.btn-brand:hover { background: var(--brand-hover); color: var(--on-brand); }

.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

.btn-on-dark { background: var(--white); color: var(--agne-blue-dark); }
.btn-on-dark:hover { background: var(--agne-blue-light); color: var(--agne-blue-dark); }
.btn-ghost-on-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost-on-dark:hover { background: rgba(255,255,255,.12); color: var(--white); border-color: var(--white); }

.btn-sm { padding: 9px 17px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- header --- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* The header gets a WIDER container than the page body.
   Eight primary nav items in Turkish ("Grup Seyahatleri", "Kurumsal Seyahat")
   set ~800px of links on their own. Against the body's 1180px --wrap, plus the
   logo, the phone number and the language button, the row overflowed at EVERY
   width — the container is capped, so a bigger monitor never fixed it — and
   flex silently crushed the credential lockup to 60px, wrapping it into a tall
   narrow column. Widening the header alone keeps the body measure intact. */
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
  width: min(100% - 40px, 1440px); margin-inline: auto;
}
@media (max-width: 600px) { .header-inner { width: calc(100% - 32px); } }
.logo-mark { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.logo-svg { width: 128px; height: auto; }
/* flex-shrink:0 is load-bearing: without it this is the element flex chooses to
   crush, because it is the only one with wrapping text. It would rather
   disappear at a narrow width than render as a squeezed column. */
.logo-strap {
  flex-shrink: 0;
  font-size: .68rem; font-weight: 650; letter-spacing: .05em;
  color: var(--ink-muted); border-left: 1px solid var(--line-strong);
  padding-left: 11px; line-height: 1.35; width: 168px;
}
.logo-strap b { display: block; color: var(--accent-ink); font-weight: 750; }
/* Only shown where it genuinely fits alongside the full nav. Below this the
   credentials still appear in the footer on every page, in the hero trust row
   on the home page, and in the "Belgelerimiz" panel on the category pages. */
@media (max-width: 1499px) { .logo-strap { display: none; } }

.nav-main { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 1px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.nav-list a:hover { background: var(--brand-soft); color: var(--brand-heading); }
.nav-list a[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -2px 0 var(--action); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: .95rem; color: var(--brand-heading); text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--action-ink); }
.header-phone svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Language switcher — a disclosure, not a menu. Closed it shows only the
   two-letter code, so the header keeps its width in both languages. The
   options are real <a> links to the equivalent page, so crawlers follow them;
   there is no client-side string swapping anywhere on this site. */
.langsw { position: relative; }
.langsw-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--white); font: inherit; font-size: .86rem; font-weight: 700;
  color: var(--ink); cursor: pointer;
}
.langsw-toggle:hover { border-color: var(--brand); color: var(--brand); }
.langsw-caret { font-size: .7em; }
.langsw-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 190px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; z-index: 110;

  /* The menu used to appear with no relationship to the button that opened it —
     it simply existed, one frame later. It now grows from its trigger: the
     origin is the top-right corner, which is where the toggle sits, so the
     panel reads as coming OUT of the control rather than landing on top of it.
     150ms keeps it inside the dropdown budget; anything slower on a control
     people click and immediately read would feel like lag.

     `display` is transitioned with allow-discrete so the element can stay
     rendered for the duration of the exit instead of vanishing on frame one.
     Browsers without allow-discrete/@starting-style ignore both and get
     exactly today's instant behaviour — a safe progressive enhancement. */
  transform-origin: top right;
  opacity: 0; transform: scale(.96) translateY(-4px);
  transition: opacity 150ms var(--ease-out),
              transform 150ms var(--ease-out),
              display 150ms allow-discrete;
}
.langsw[data-open="true"] .langsw-menu {
  display: block; opacity: 1; transform: none;
}
@starting-style {
  .langsw[data-open="true"] .langsw-menu { opacity: 0; transform: scale(.96) translateY(-4px); }
}
.langsw-opt {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .93rem; color: var(--ink); text-decoration: none;
}
.langsw-opt:hover { background: var(--brand-soft); color: var(--brand-heading); }
.langsw-opt[aria-current="true"] { font-weight: 700; color: var(--brand); background: var(--brand-soft); }
.langsw-gloss { color: var(--ink-faint); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--white); cursor: pointer; color: var(--brand-heading);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* The phone number's digits are the first thing to go: the icon still links to
   tel:, and the number is in the footer and on the contact page. */
@media (max-width: 1340px) {
  .header-phone span { display: none; }
}

/* Below this the eight-item nav no longer fits on one row, so it becomes the
   disclosure menu. Raised from 1000px, where the nav overflowed instead. */
@media (max-width: 1150px) {
  .nav-toggle { display: inline-flex; }
  .nav-main {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 10px 0 18px; display: none;

    /* The panel is anchored to the bottom edge of the header, so it slides
       DOWN out of that edge rather than fading in place — the motion says
       where it came from. No scale: this is a full-bleed panel, and scaling
       something pinned to both viewport edges just looks like a rendering
       glitch. 200ms, a little longer than the language menu because the
       travel is longer and the surface is bigger.

       Same allow-discrete / @starting-style pair as the language menu, and
       the same fallback story: browsers supporting neither ignore both and
       get today's instant toggle. */
    opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out),
                transform 200ms var(--ease-out),
                display 200ms allow-discrete;
  }
  .site-header[data-nav-open="true"] .nav-main {
    display: block; opacity: 1; transform: none;
  }
  @starting-style {
    .site-header[data-nav-open="true"] .nav-main { opacity: 0; transform: translateY(-8px); }
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
  .nav-list a { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav-list li:last-child a { border-bottom: 0; }
}

/* ------------------------------------------------------------------ hero --- */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 480px at 78% -12%, rgba(0, 166, 180, .28), transparent 62%),
    radial-gradient(900px 520px at 8% 108%, rgba(11, 83, 167, .55), transparent 60%),
    linear-gradient(160deg, var(--agne-blue-dark) 0%, #0A4A94 55%, var(--agne-blue) 100%);
  color: var(--on-dark-muted);
  padding: clamp(56px, 8vw, 108px) 0 clamp(48px, 6vw, 84px);
}
.hero h1 { color: var(--white); max-width: 16ch; }
.hero-lede {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.28rem);
  color: var(--on-dark-muted); max-width: 56ch; margin-bottom: 1.7em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: clamp(34px, 4.5vw, 52px);
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: .93rem; font-weight: 600; color: var(--on-dark-muted);
}
.hero-trust ul, .hero-trust { list-style: none; margin: 0; padding-left: 0; }
.hero-trust svg { width: 18px; height: 18px; color: var(--agne-turquoise); flex-shrink: 0; }

/* Sub-page hero: same family, shorter, no radial flourish. */
.page-hero {
  background: linear-gradient(160deg, var(--agne-blue-dark) 0%, #0A4A94 100%);
  color: var(--on-dark-muted);
  padding: clamp(30px, 4vw, 46px) 0 clamp(38px, 5vw, 60px);
}
.page-hero h1 { color: var(--white); margin-bottom: .35em; }
.page-hero .page-lede { font-size: clamp(1rem, .95rem + .3vw, 1.16rem); color: var(--on-dark-muted); max-width: 62ch; }

/* ------------------------------------------------------------ breadcrumb --- */

.breadcrumb { font-size: .87rem; margin-bottom: 1.4em; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--on-dark-muted); }
.breadcrumb a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--white); font-weight: 650; }
.breadcrumb .sep { color: rgba(255,255,255,.4); }
/* On a light ground (destination detail body) the same component inverts. */
.breadcrumb.on-light li { color: var(--ink-faint); }
.breadcrumb.on-light a { color: var(--brand); }
.breadcrumb.on-light [aria-current="page"] { color: var(--ink); }
.breadcrumb.on-light .sep { color: var(--line-strong); }

/* ----------------------------------------------------------------- cards --- */

.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover { border-color: var(--agne-blue-100); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
/* Card titles are h3 by default and h4 where the card sits under a region
   subheading (international tours). Both must look identical — the level is a
   document-outline decision, not a visual one — so the global h4 size is
   overridden back to the h3 scale here. */
.card h3, .card h4 { margin-bottom: .4em; font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); font-weight: 700; }
.card h3 a, .card h4 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .card h4 a:hover { color: var(--brand-hover); }
.card p { color: var(--ink-muted); font-size: .96rem; }
.card-foot { margin-top: auto; padding-top: 18px; }

/* Product-category card — the six on the home page. */
.cat-card { position: relative; }
.cat-card .card-body { gap: 4px; }
.cat-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--brand-soft); color: var(--brand);
}
.cat-icon svg { width: 24px; height: 24px; }
.cat-card--action .cat-icon { background: var(--action-soft); color: var(--action-ink); }
.cat-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: .91rem; color: var(--ink-muted); }
.cat-list li { padding-left: 17px; position: relative; margin-bottom: 3px; }
.cat-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.cat-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; text-decoration: none; }
.cat-more::after { content: "→"; transition: transform .16s ease; }
.card:hover .cat-more::after { transform: translateX(3px); }
/* The whole card is clickable via a stretched pseudo-element on its main link,
   while the link text stays the real, screen-reader-announced target. */
.stretch::after { content: ""; position: absolute; inset: 0; }

/* Media panel. When a record has no real photograph we render a typographic
   panel rather than a stock image — a generic beach photo on a Cappadocia tour
   is the same lie as a placeholder price. */
.card-media { aspect-ratio: 16 / 10; background: var(--agne-surface); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media--typo {
  display: grid; place-items: center; padding: 18px; text-align: center;
  background: linear-gradient(150deg, var(--agne-blue) 0%, var(--agne-turquoise-700) 100%);
}
.card-media--typo span {
  font-size: 1.22rem; font-weight: 750; color: var(--white);
  letter-spacing: -.01em; text-wrap: balance;
}
.card-media--typo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 80% 0%, rgba(0,166,180,.35), transparent 65%);
}

/* -------------------------------------------------------------- tour card -- */
/* Every field here is conditional. A tour that reached this component has
   already passed catalog.php's validation, so a missing field means "the
   agency did not supply this", not "the data is broken" — and the row is
   simply omitted rather than rendered empty. */

.tour-card .card-body { gap: 0; }
.tour-dest {
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: .45em;
}
.tour-meta { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.tour-meta li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; color: var(--ink-muted); }
.tour-meta svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; margin-top: .2em; }
.tour-price-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.tour-price { font-size: 1.45rem; font-weight: 800; color: var(--brand-heading); line-height: 1.1; }
.tour-price-note { display: block; font-size: .8rem; font-weight: 500; color: var(--ink-faint); margin-top: 3px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
}
.badge-seats { background: var(--action-soft-strong); color: var(--agne-orange-800); }
.badge-visa { background: var(--agne-blue-100); color: var(--agne-blue-dark); }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

/* Region subheading on the international tours page. Sits between the section
   heading and a grid, so it needs to read as a rung below the <h2> without
   competing with the card titles that follow it. */
.region-head {
  font-size: 1.02rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 16px;
  padding-bottom: 9px; border-bottom: 2px solid var(--line-strong);
}

/* On phones the price row stacks and the CTA goes full width.
   Not only a bigger tap target: the floating WhatsApp/call buttons are fixed to
   the bottom-right, and a right-aligned card button ends up partly underneath
   one of them. The centre stayed clickable, but a thumb aiming at the visible
   right half of "Request a quote" opened WhatsApp instead — the user asks for a
   quote and gets a chat window. A full-width button keeps a large, unambiguous
   target to the left of the floats. */
@media (max-width: 560px) {
  .tour-price-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .tour-price-row .btn { width: 100%; }
}

/* -------------------------------------------------------- destination card - */

.dest-card { position: relative; }
.dest-card .card-media { aspect-ratio: 4 / 3; }
.dest-region {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: .3em;
}
.dest-card p { font-size: .93rem; }

/* ---------------------------------------------------------------- lists ---- */

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tick-list li { display: flex; align-items: flex-start; gap: 11px; }
.tick-list svg { width: 20px; height: 20px; color: var(--agne-blue-hover); flex-shrink: 0; margin-top: .18em; }
section.brand-dark .tick-list svg { color: var(--agne-turquoise); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line-strong);
  font-size: .91rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
a.chip:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-heading); }

/* Fact table used on destination pages and the about page. */
.facts { border-top: 1px solid var(--line); margin: 0; }
.facts > div { display: flex; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 30%; font-weight: 700; color: var(--brand-heading); font-size: .93rem; margin: 0; }
.facts dd { margin: 0; color: var(--ink-muted); font-size: .95rem; }
@media (max-width: 560px) { .facts > div { flex-direction: column; gap: 3px; } .facts dt { flex: none; } }

/* ------------------------------------------------------------- panel/FAQ --- */

.panel {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px);
}
.panel-soft { background: var(--brand-soft); border-color: var(--brand-soft-strong); }
.panel-accent { background: var(--accent-soft); border-color: var(--agne-turquoise-100); }

/* An answer used to appear instantly and shove every question below it down
   the page, which is the exact "content teleports" problem — the reader loses
   their place because nothing bridges the two layouts. The panel now opens to
   its own height over 250ms, so the questions below are pushed rather than
   jumped.

   `interpolate-size: allow-keywords` is what makes a transition to
   `block-size: auto` possible at all; without it the keyword is not an
   interpolable value and the answer would still snap. It is deliberately set
   on .faq rather than :root — it is an inherited property, so the FAQ subtree
   is the smallest scope that reaches ::details-content, and confining it here
   means enabling keyword interpolation cannot quietly change the behaviour of
   some unrelated auto-sized transition added later.

   content-visibility is transitioned with allow-discrete so the answer stays
   rendered while it collapses instead of blanking on the first frame.

   Browsers without ::details-content ignore this entire block and keep the
   current instant open/close. */
.faq { interpolate-size: allow-keywords; }
.faq-item::details-content {
  block-size: 0; opacity: 0; overflow: hidden;
  transition: block-size 250ms var(--ease-out),
              opacity 250ms var(--ease-out),
              content-visibility 250ms allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; opacity: 1; }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative;
  font-weight: 700; font-size: 1.03rem; color: var(--brand-heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--action-ink); line-height: 1;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 34px 20px 0; color: var(--ink-muted); }

/* --------------------------------------------------------------- empty ----- */
/* The state a listing takes when the catalogue has nothing publishable. It is
   an invitation to ask, never a row of skeleton cards or a "0 results" line. */

.empty-state {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--ground); padding: clamp(28px, 4vw, 46px); text-align: center;
}
.empty-state h3 { margin-bottom: .45em; }
.empty-state p { color: var(--ink-muted); max-width: 52ch; margin-inline: auto; }
.empty-state .btn-row { justify-content: center; margin-top: 22px; }

/* ----------------------------------------------------------------- form ---- */

.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 650; font-size: .93rem; color: var(--brand-heading); }
.field .req { color: var(--action-ink); }
.field .hint { font-size: .84rem; color: var(--ink-faint); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--white); width: 100%;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--agne-blue-100); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: 3px solid var(--agne-blue-100); outline-offset: 0;
}
.field [aria-invalid="true"] { border-color: var(--agne-orange-700); }
.field-error { font-size: .87rem; color: var(--agne-orange-800); font-weight: 600; }

.form-note { font-size: .87rem; color: var(--ink-faint); }
.form-status {
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
  border: 1px solid; font-weight: 600;
}
.form-status--ok { background: var(--agne-blue-light); border-color: var(--agne-blue-100); color: var(--agne-blue-dark); }
.form-status--err { background: var(--agne-orange-light); border-color: var(--agne-orange); color: var(--agne-orange-800); }

/* ---------------------------------------------------------------------------
   The one entrance on the site.
   ---------------------------------------------------------------------------
   The success panel is the only moment here with any emotional weight: someone
   has just handed over their travel plans and their phone number, and is
   waiting to be told it arrived. Until now it rendered as flat as an error.
   This is the whole delight budget, spent in one place.

   A KEYFRAME, not a transition, and deliberately so. The panel is not toggled
   on the client — the form POSTs, the server renders a different page, and the
   element exists at first paint. There is no state change for a transition to
   observe, and @starting-style is unreliable for elements present in the
   initial HTML. A keyframe simply runs on render. Nothing here re-triggers, so
   the usual "transitions retarget better" argument does not apply.

   Only opacity and transform, so it stays off the layout/paint path. 380ms is
   above the 300ms UI ceiling on purpose: this is a rare, terminal moment, not
   an interaction the user is waiting to act on — the budget exists to stop
   frequent interactions feeling sluggish, and nothing follows this one.

   ONLY the success panel animates. .form-status--err stays instant: an error
   should read as immediate fact, not something presented.
   --------------------------------------------------------------------------- */
@keyframes agne-enter-up {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes agne-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.form-status--ok { animation: agne-enter-up 380ms var(--ease-out) both; }
/* Honeypot. Hidden from people, reachable by the naive bots that fill every
   input they find. Not display:none — some bots skip those. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------------- prose --- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.lede { font-size: 1.12rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- footer --- */

.site-footer { background: var(--agne-blue-dark); color: var(--on-dark-muted); padding: clamp(46px, 5vw, 68px) 0 26px; font-size: .94rem; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: 1.5fr repeat(3, 1fr); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--agne-turquoise); margin-bottom: 1.1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-logo .logo-svg { width: 138px; margin-bottom: 14px; }
.footer-about p { color: var(--on-dark-muted); max-width: 42ch; }
.footer-contact { display: grid; gap: 10px; margin-top: 18px; }
.footer-contact a { display: inline-flex; align-items: flex-start; gap: 9px; font-weight: 600; }
.footer-contact svg { width: 17px; height: 17px; color: var(--agne-turquoise); flex-shrink: 0; margin-top: .18em; }
.footer-creds {
  margin-top: 22px; padding: 14px 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  font-size: .86rem; color: var(--on-dark-muted);
}
.footer-creds b { color: var(--white); }
.footer-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--on-dark-muted);
}
.footer-sisters { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-sisters a { color: var(--on-dark-muted); font-size: .85rem; }

/* --------------------------------------------------------- floating CTA ---- */

.float-cta {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
}
.float-cta a {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; box-shadow: var(--shadow-lg);
  color: var(--white); text-decoration: none;
}
.float-cta svg { width: 26px; height: 26px; }
.float-wa { background: #25D366; color: #06341A; }
.float-tel { background: var(--action); }
@media (min-width: 1001px) { .float-cta { display: none; } }

/* -------------------------------------------------------------- utility ---- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1em; }
.split { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

@media print {
  .site-header, .site-footer, .float-cta, .btn-row, .nav-toggle { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}