/* ── İzmir Airport Guide — UI reconstruction ────────────────────────────────
   A component set that rebuilds parts of izmirairportguide.com in HTML/CSS,
   so the project page's visuals stay sharp at any resolution and reflow with
   the column instead of being scaled-down screenshots.

   THESE ARE RECONSTRUCTIONS of a site I built myself. Colours, type, spacing,
   labels, fares and copy are sampled from the live pages (Plus Jakarta Sans,
   ink #16192c, body #4a4f68, lines #e9ebf2, the #3e5cf0 → #8b44e5 action
   gradient, 20px card radius). They are cleaned up but NOT redesigned.

   Everything is scoped under `.ig-scope` so it cannot leak into the portfolio
   shell. Class prefix `ig-` = İzmir Guide.

   Used by: project-izmir-airport-guide.html
   ─────────────────────────────────────────────────────────────────────────── */

.ig-scope {
  /* Sampled from the live site */
  --ig-ink: #16192c;
  --ig-ink-2: #4a4f68;
  --ig-ink-3: #9aa0b4;
  --ig-line: #e9ebf2;
  --ig-line-2: #dcdfe9;
  --ig-head: #f6f7fb;
  --ig-card: #ffffff;

  --ig-blue: #3e5cf0;
  --ig-violet: #8b44e5;
  --ig-violet-bg: #f4ecfe;
  --ig-action: linear-gradient(90deg, #3e5cf0 0%, #8b44e5 100%);

  --ig-green: #1f7a4d;
  --ig-green-bg: #e7f6ec;
  --ig-amber: #92400e;
  --ig-amber-bg: #fdf6e9;
  --ig-amber-line: #f5e2bd;

  /* A figure is as wide as its column, not the window: a bleed figure at a
     1000px window is narrower than the same figure at 1500px. The layout
     below therefore responds to this box rather than to the viewport. */
  container-type: inline-size;

  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ig-ink-2);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* The outer frame stands in for the screenshot the figure used to hold, so it
   carries the same border and radius the portfolio gives a <figure> image. */
.ig-frame {
  background: var(--ig-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ig-pad { padding: 26px 24px 24px; }

.ig-scope b, .ig-scope strong { font-weight: 700; color: var(--ig-ink); }
.ig-scope a { color: var(--ig-blue); text-decoration: underline; text-underline-offset: 2px; }
/* :where() keeps this reset at zero specificity so the component rules below
   can still set their own margins. */
.ig-scope :where(p, ul, ol, table) { margin: 0; }
/* Every icon here is inline in a run of text, so it defaults to the size of
   that text; the components that need a fixed icon override it below.   */
.ig-scope svg {
  width: 1em; height: 1em; flex: none; vertical-align: -0.13em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Site chrome ─────────────────────────────────────────────────────────── */
.ig-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--ig-line);
  background: var(--ig-card);
}
.ig-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--ig-ink); }
.ig-logo svg { width: 19px; height: 19px; stroke: var(--ig-blue); }
.ig-nav { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ig-ink-2); }
.ig-nav span { padding: 6px 12px; border-radius: 999px; }
.ig-nav .is-on { background: #eef1fe; color: var(--ig-blue); }

/* ── Homepage hero ───────────────────────────────────────────────────────── */
.ig-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  align-items: center;
  gap: 40px;
  padding: 34px 26px 38px;
  /* The live hero sits on a pale wash with a faint dot grid behind it. */
  background:
    radial-gradient(circle, #dfe3f5 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(120deg, #f6f4fb 0%, #fbfaff 42%, #fdf6f2 100%);
}
.ig-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  background: var(--ig-green-bg); color: var(--ig-green);
  font-size: 13px; font-weight: 700;
}
.ig-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.ig-h1 {
  margin: 18px 0 14px;
  font-size: 40px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em;
  color: var(--ig-ink);
}
.ig-h1 .ig-grad {
  background: var(--ig-action);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ig-lede { max-width: 30em; font-size: 15px; line-height: 1.55; color: var(--ig-ink-2); }
/* Kept as flowing text rather than a flex row: in a narrow column the trailing
   clause has to wrap under the bold part, not into its own squeezed track. */
.ig-trust { margin-top: 16px; font-size: 15px; color: var(--ig-ink-3); }
.ig-trust svg { margin-right: 5px; stroke: var(--ig-green); }

.ig-stats {
  display: flex; gap: 26px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--ig-line-2);
}
.ig-stats > div { padding-right: 26px; border-right: 1px solid var(--ig-line-2); }
.ig-stats > div:last-child { border-right: 0; padding-right: 0; }
.ig-stats b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.ig-stats span { font-size: 13px; color: var(--ig-ink-3); }
.ig-arrival { margin-top: 14px; font-size: 14px; color: var(--ig-ink-3); }

/* ── Guided chooser panel ────────────────────────────────────────────────── */
.ig-panel {
  background: var(--ig-card);
  border: 1px solid var(--ig-line);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(22, 25, 44, 0.1);
  padding: 22px;
}
.ig-panel-q { font-size: 17px; font-weight: 700; color: var(--ig-ink); }
.ig-panel-q + * { margin-top: 12px; }
.ig-panel-q:not(:first-child) { margin-top: 20px; }

.ig-dests { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ig-dest { padding: 12px 13px; border: 1.5px solid var(--ig-line-2); border-radius: 14px; background: var(--ig-card); }
.ig-dest b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.ig-dest b svg { width: 14px; height: 14px; flex: none; stroke: var(--ig-ink-3); }
.ig-dest span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--ig-ink-3); }

.ig-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ig-chip {
  min-width: 42px; padding: 8px 13px;
  border: 1.5px solid var(--ig-line-2); border-radius: 14px;
  background: var(--ig-card);
  font-size: 14px; font-weight: 600; color: var(--ig-ink-2); text-align: center;
}
.ig-chip.is-on { background: var(--ig-violet-bg); border-color: var(--ig-violet); color: var(--ig-violet); }

.ig-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--ig-action); color: #fff;
  font-size: 16px; font-weight: 600; text-align: center;
}

/* ── Comparison table ────────────────────────────────────────────────────── */
.ig-cmp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.ig-h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ig-ink); }
.ig-sub { margin-top: 4px; font-size: 14px; color: var(--ig-ink-3); }
.ig-group { display: flex; align-items: center; gap: 8px; }
.ig-group-label { font-size: 14px; color: var(--ig-ink-2); white-space: nowrap; }
.ig-group .ig-chip { min-width: 38px; padding: 6px 11px; border-radius: 12px; }

/* Six columns need room; below that the table scrolls inside its own frame
   rather than reflowing into something the real product never looked like. */
.ig-tablewrap { overflow-x: auto; border: 1px solid var(--ig-line); border-radius: 20px; box-shadow: 0 2px 8px rgba(22, 25, 44, 0.06); }
.ig-table { width: 100%; min-width: 840px; border-collapse: collapse; }
.ig-table th {
  padding: 12px 14px; text-align: left;
  background: var(--ig-head); color: var(--ig-ink-2);
  font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--ig-line);
}
.ig-table td { padding: 13px 14px; vertical-align: top; border-top: 1px solid var(--ig-line); font-size: 14px; }
.ig-table tbody tr:first-child td { border-top: 0; }
.ig-table th:first-child, .ig-table td:first-child { padding-left: 18px; }
.ig-table th:last-child, .ig-table td:last-child { padding-right: 18px; }

.ig-mode { font-size: 14px; font-weight: 600; color: var(--ig-ink); }
.ig-mode-sub { margin-top: 2px; font-size: 12px; color: var(--ig-ink-3); }
.ig-cost { font-size: 14px; font-weight: 700; color: var(--ig-ink); }
.ig-cost-note { margin-top: 3px; max-width: 34em; font-size: 12px; line-height: 1.45; color: var(--ig-ink-3); }
.ig-warn {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 8px; padding: 7px 10px;
  border: 1px solid var(--ig-amber-line); border-radius: 10px;
  background: var(--ig-amber-bg); color: var(--ig-amber);
  font-size: 12px; line-height: 1.45;
}
.ig-warn svg { width: 13px; height: 13px; margin-top: 1px; flex: none; }
.ig-warn b { color: inherit; }

.ig-partner {
  display: inline-block; margin-top: 6px;
  padding: 3px 9px; border: 1px solid var(--ig-line-2); border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #6b7186;
}
.ig-btn-ghost {
  display: inline-block; padding: 6px 12px;
  border: 1.5px solid var(--ig-line-2); border-radius: 999px;
  background: var(--ig-card);
  font-size: 13px; font-weight: 600; color: var(--ig-ink-2); white-space: nowrap;
}
.ig-btn-grad {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  background: var(--ig-action); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ig-tablenote { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ig-ink-3); }

/* ── Guides index ────────────────────────────────────────────────────────── */
.ig-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ig-ink-3); }
.ig-crumb b { color: var(--ig-ink-2); font-weight: 600; }
.ig-crumb svg { width: 12px; height: 12px; }
.ig-verified {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 5px 13px; border-radius: 999px;
  background: var(--ig-green-bg); color: var(--ig-green);
  font-size: 13px; font-weight: 600;
}
.ig-verified svg { width: 14px; height: 14px; }
.ig-guides { display: grid; gap: 12px; margin-top: 20px; }
.ig-guide { padding: 14px 16px; border: 1px solid var(--ig-line); border-radius: 16px; background: var(--ig-card); }
.ig-guide b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.ig-guide b svg { width: 14px; height: 14px; stroke: var(--ig-violet); }
.ig-guide span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ig-ink-3); }

/* ── Narrow columns ────────────────────────────────────────────────────── */
@container (max-width: 880px) {
  .ig-hero { grid-template-columns: 1fr; gap: 28px; padding: 26px 20px 30px; }
  .ig-h1 { font-size: 32px; }
  /* Stacked, the dividers between figures no longer separate anything. */
  .ig-stats { flex-wrap: wrap; gap: 14px 22px; }
  .ig-stats > div { padding-right: 0; border-right: 0; }
  .ig-topbar { padding: 12px 18px; }
  .ig-nav { display: none; }
  .ig-pad { padding: 20px 18px; }
}
@container (max-width: 430px) {
  .ig-dests { grid-template-columns: 1fr; }
  .ig-h1 { font-size: 27px; }
  .ig-panel { padding: 16px; }
  .ig-pad { padding: 16px 14px; }
}