/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --navy-900: #071d42;
  --navy: #0a2a5e;
  --navy-600: #2a467c;
  --green: #3fae2a;
  --green-700: #23781a;
  --green-300: #8fdc7f;
  --green-50: #e8f4e5;
  --amber: #f0b23a;
  --amber-50: #fdf6e3;
  --amber-700: #7a5510;
  --red: #d2553f;
  --ink: #0f1e36;
  --muted: #5b6880;
  --line: #e2e7ee;
  --line-strong: #cfd7e2;
  --canvas: #f4f6f9;
  --paper: #ffffff;
  --surface-2: #eef1f6;

  /* Dark surfaces (app panel, footer, download button): matte charcoal, with
     cobalt used only as a thin accent on the footer divider. */
  --char-900: #121416;
  --logo-navy: #082b63;      /* OgrenciKart V1.2 Logo Lacivert */
  --char-line: rgba(255, 255, 255, 0.08);
  --char-text: #d9dce0;
  --char-muted: #a4aab1;
  --cobalt: #315cff;
  --cobalt-300: #9db0ff;

  --navy-2: var(--navy-600);
  --green-dark: var(--green-700);
  --catalog-surface: var(--paper);

  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --sh-1: 0 1px 2px rgba(10, 42, 94, 0.05);
  --sh-2: 0 6px 16px -4px rgba(10, 42, 94, 0.1), 0 2px 4px rgba(10, 42, 94, 0.04);
  --sh-3: 0 18px 36px -12px rgba(10, 42, 94, 0.18), 0 4px 10px rgba(10, 42, 94, 0.06);
  --sh-panel: 0 28px 48px -22px rgba(18, 20, 22, 0.55), 0 2px 6px rgba(18, 20, 22, 0.12);

  --ease-color: 160ms ease-out;
  --ease-move: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);

  --gutter: 20px;
  --header-height: 72px;
  --catalog-card-width: 200px;
  --catalog-card-height: 300px;
  --catalog-image-height: 220px;
  --catalog-gap: 16px;

  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================================
   2. Base and page skeleton
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

.container {
  width: min(1240px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #fff;
  background: var(--navy);
  border-radius: 8px;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.site-footer :focus-visible,
.app-download-panel :focus-visible,
.mobile-download-cta:focus-visible {
  outline-color: var(--cobalt-300);
}

.eyebrow {
  margin: 0;
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 16px;
}

.breadcrumb a {
  text-decoration: none;
  text-underline-offset: 3px;
}

.breadcrumb > span:not([aria-current]) {
  color: var(--line-strong);
}

.breadcrumb [aria-current] {
  color: var(--ink);
  font-weight: 600;
}

/* Brand symbol on a white plate (footer, app panel, download button) */
.brand-plate {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  background: #fff;
}

.brand-plate img {
  width: auto;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  /* The 1px bottom border is part of --header-height. */
  height: calc(var(--header-height) - 1px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  justify-self: start;
  padding: 4px 0;
  border-radius: 8px;
}

.brand img {
  width: 64px;
  height: 49px;
}

.header-tagline {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.header-weather {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.header-weather i {
  color: #a9b4c4;
  font-style: normal;
}

.weather-city {
  color: var(--muted);
  font-weight: 600;
}

.header-weather strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   4. Portal shell (home and sub-category pages)
   ========================================================================== */

.portal-shell {
  padding: 32px 0 48px;
}

.portal-card-stage {
  min-width: 0;
}

/* Below the desktop breakpoint the card row is a full-bleed scroller. */
.portal-grid,
.sublevel-grid {
  display: flex;
  gap: var(--catalog-gap);
  margin: 0 calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 28px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.portal-grid::-webkit-scrollbar,
.sublevel-grid::-webkit-scrollbar {
  display: none;
}

/* ---- Portal card (200 x 300) ---- */

.portal-card {
  width: var(--catalog-card-width);
  min-width: var(--catalog-card-width);
  height: var(--catalog-card-height);
  min-height: var(--catalog-card-height);
  flex: 0 0 var(--catalog-card-width);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 8px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-decoration: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform var(--ease-move), box-shadow var(--ease-move), border-color var(--ease-color), opacity 200ms ease-out;
}

.portal-card:active {
  box-shadow: var(--sh-1);
  transform: translateY(-1px) scale(0.99);
}

.portal-card-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px 0 10px;
}

.portal-card-copy h2 {
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-visual--managed {
  overflow: hidden;
  background: var(--surface-2);
}

.portal-visual--managed img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.portal-card--secondary .portal-card-copy h2 {
  font-size: 14px;
  letter-spacing: 0.04em;
}

.card-affordance {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform var(--ease-move), color var(--ease-color);
}

.card-affordance--internal::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  transform: rotate(45deg);
}

/* Until the fetch resolves (app.js then writes "…: 13 derece, …" into the
   aria-label) only "Rize · —°" is shown, so no placeholder text is replaced. */
.header-weather:not([aria-label*=":"]) i:last-of-type,
.header-weather:not([aria-label*=":"]) .weather-condition {
  display: none;
}

.external-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .portal-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--sh-3);
    transform: translateY(-4px);
  }

  .portal-card:hover .card-affordance {
    color: var(--navy);
    transform: translateX(2px);
  }

  /* The hovered card comes forward; its siblings step back slightly. */
  .portal-grid:has(.portal-card:hover) .portal-card:not(:hover):not(:focus-visible),
  .sublevel-grid:has(.portal-card:hover) .portal-card:not(:hover):not(:focus-visible) {
    opacity: 0.75;
  }

  .portal-card:active {
    box-shadow: var(--sh-1);
    transform: translateY(-1px) scale(0.99);
  }
}

/* ---- App download panel (337 x 451, desktop only) ---- */

.app-download-panel {
  width: 337px;
  height: 451px;
  display: none;
  flex-direction: column;
  padding: 24px;
  color: #fff;
  background: var(--logo-navy);
  border: 1px solid var(--char-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-panel);
}

.app-panel-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.app-panel-brand .brand-plate {
  width: 68px;
  height: 48px;
  border-radius: var(--r-md);
}

.app-panel-brand .brand-plate img {
  height: 28px;
}

.app-panel-heading {
  margin-top: 20px;
}

.app-panel-heading p {
  margin: 0 0 4px;
  color: var(--green-300);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-panel-heading h2 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.app-panel-qr {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  margin: 20px auto 0;
  padding: 12px;
  background: #fff;
  border-radius: var(--r-lg);
}

.app-panel-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-panel-qr--placeholder {
  align-content: center;
  gap: 6px;
  color: var(--char-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  text-align: center;
}

.app-panel-qr--placeholder span {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.app-panel-qr--placeholder small {
  font-size: 12px;
  line-height: 16px;
}

/* Three decorative finder squares; no fake QR pattern. */
.app-panel-qr--placeholder::before,
.app-panel-qr--placeholder::after,
.app-panel-qr--placeholder span::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

.app-panel-qr--placeholder::before {
  top: 14px;
  left: 14px;
}

.app-panel-qr--placeholder::after {
  top: 14px;
  right: 14px;
}

.app-panel-qr--placeholder span::before {
  bottom: 14px;
  left: 14px;
}

.app-store-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.app-store-control {
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--ease-color), border-color var(--ease-color);
}

.app-store-control small {
  color: var(--char-muted);
  font-size: 11px;
  line-height: 14px;
}

.app-store-control strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .app-store-control:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.26);
  }
}

/* ---- Download button (shown instead of the panel below desktop) ---- */

.mobile-download-cta {
  min-width: 300px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 0 16px 0 10px;
  color: #fff;
  background: var(--logo-navy);
  border: 0;
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
}

.mobile-download-cta .brand-plate {
  width: 56px;
  height: 40px;
  border-radius: var(--r-sm);
}

.mobile-download-cta .brand-plate img {
  height: 24px;
}

.mobile-download-copy {
  display: flex;
  flex-direction: column;
}

.mobile-download-copy small {
  color: var(--char-muted);
  font-size: 11px;
  line-height: 14px;
}

.mobile-download-copy strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.mobile-download-cta::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 4px 0 auto;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
}

/* ==========================================================================
   5. Card illustrations (CSS-drawn at native px inside a 182 x 220 frame)
   ========================================================================== */

.portal-visual {
  /* Showcase stage: no tinted inner box. The object floats directly on the
     card surface, so it carries a deeper, softer shadow than --sh-2. */
  --sh-2: 0 20px 32px -16px rgba(10, 42, 94, 0.3), 0 6px 14px -6px rgba(10, 42, 94, 0.12), 0 0 0 1px rgba(10, 42, 94, 0.06);
  position: relative;
  width: 100%;
  height: var(--catalog-image-height);
  flex: 0 0 var(--catalog-image-height);
  display: grid;
  place-items: center;
  margin: 0;
  background: transparent;
  white-space: nowrap;
}

.portal-visual b,
.portal-visual strong,
.portal-visual small,
.portal-visual em,
.portal-visual i {
  font-style: normal;
  line-height: 1;
}

/* 1 — Web Siteleri: three browser windows */
.visual-websites {
  background: transparent;
}

.browser-stack {
  position: absolute;
  width: 112px;
  height: 84px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(10, 42, 94, 0.1);
  border-radius: 8px;
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.browser-stack span {
  display: block;
  height: 12px;
  margin: -10px -10px 10px;
  background:
    radial-gradient(circle at 9px 6px, #c3ccd9 2px, transparent 2.5px),
    radial-gradient(circle at 17px 6px, #c3ccd9 2px, transparent 2.5px),
    radial-gradient(circle at 25px 6px, #c3ccd9 2px, transparent 2.5px),
    #f1f4f7;
  border-bottom: 1px solid var(--line);
}

.browser-stack b {
  display: block;
  margin-bottom: 8px;
  color: var(--navy-600);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.browser-stack i {
  display: block;
  width: 84%;
  height: 6px;
  margin-top: 6px;
  background: #e8edf2;
  border-radius: 4px;
}

.browser-stack i:last-child {
  width: 56%;
  background: #bfe5b7;
}

.browser-stack--back {
  top: 24px;
  left: 14px;
  transform: rotate(-5deg);
}

.browser-stack--middle {
  top: 44px;
  right: 14px;
  transform: rotate(4deg);
}

.browser-stack--front {
  z-index: 2;
  top: 86px;
  left: 25px;
  width: 132px;
  height: 116px;
  padding: 12px;
  border-radius: 10px;
}

.browser-stack--front span {
  margin: -12px -12px 10px;
}

.browser-stack--front b {
  margin-bottom: 8px;
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.browser-stack--front i {
  height: 7px;
  margin-top: 7px;
}

.browser-stack--front::after {
  content: "";
  display: block;
  height: 20px;
  margin-top: 10px;
  background: var(--green-50);
  border-radius: 6px;
}

/* 2 — Haberler: a newspaper */
.visual-news {
  background: transparent;
}

.paper {
  width: 142px;
  height: 176px;
  padding: 12px;
  color: #1c1c1c;
  background: #fffdf9;
  border: 1px solid rgba(10, 42, 94, 0.1);
  box-shadow: var(--sh-2);
  transform: rotate(-2deg);
}

.paper header strong {
  display: block;
  padding-bottom: 5px;
  border-bottom: 2px solid #1c1c1c;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: -0.03em;
}

.paper header strong span {
  color: var(--red);
}

.paper header small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 6.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paper-grid {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 8px;
  padding-top: 8px;
}

.paper-photo {
  height: 68px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.3);
  background: #1f4d3f;
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1;
}

.paper section b {
  display: block;
  margin-top: 6px;
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
}

.paper i {
  display: block;
  height: 3px;
  margin-top: 4px;
  background: #e2dcd6;
}

.paper aside {
  min-width: 0;
  padding-left: 6px;
  border-left: 1px solid #e2dcd6;
}

.paper aside em {
  display: block;
  margin-top: 8px;
  color: var(--red);
  font-size: 6px;
  font-weight: 800;
}

.paper aside em:first-child {
  margin-top: 0;
}

/* 3, 8, 9 — Hizmetler, İş İlanları, İşletmeler: a sheet with two rows */
.visual-services,
.visual-jobs {
  background: transparent;
}

.visual-businesses {
  background: transparent;
}

.service-sheet,
.mini-list,
.business-board {
  width: 154px;
  height: 166px;
  display: flex;
  flex-direction: column;
  padding: 16px 12px 0;
  background: #fff;
  border: 1px solid rgba(10, 42, 94, 0.1);
  border-radius: 14px;
  box-shadow: var(--sh-2);
}

.service-sheet > span,
.mini-list > small,
.business-board > small {
  display: block;
  margin-bottom: 4px;
  color: var(--navy-600);
  font-size: 8px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 0.12em;
}

.business-board > small {
  font-size: 7px;
  letter-spacing: 0.1em;
}

.service-sheet > div,
.mini-list > div,
.business-board > div {
  height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0 8px;
  background: #f5f7fa;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.service-sheet > div {
  grid-template-columns: 28px minmax(0, 1fr) 6px;
}

.service-sheet > div > b,
.mini-list > div > b,
.business-board > div > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--green-700);
  background: var(--green-50);
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}

.business-board > div > b {
  color: #1d6a5c;
  background: #dbeee9;
  border-radius: 50%;
  font-size: 10px;
}

.service-sheet > div > strong,
.mini-list strong,
.business-board strong {
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}

.service-sheet > div > i {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
}

.mini-list > div > span,
.business-board > div > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mini-list span i,
.business-board span i {
  color: var(--muted);
  font-size: 7px;
  line-height: 9px;
}

/* 4 — Fırsatlar: two tickets */
.visual-opportunities {
  background: transparent;
}

.offer-ticket {
  position: absolute;
  width: 116px;
  height: 76px;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  color: #fff;
  background: var(--navy);
  border-radius: 12px;
  box-shadow: var(--sh-2);
}

/* Notches on the short edges, painted in the card surface colour. */
.offer-ticket::before,
.offer-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--paper);
  border-radius: 50%;
}

.offer-ticket::before {
  left: -5px;
}

.offer-ticket::after {
  right: -5px;
}

.offer-ticket small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.offer-ticket strong {
  margin-top: 5px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.offer-ticket span {
  margin-top: auto;
  color: #b7c3d8;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
}

.offer-ticket--one {
  top: 28px;
  left: 12px;
  transform: rotate(-6deg);
}

.offer-ticket--two {
  right: 12px;
  bottom: 28px;
  color: var(--navy);
  background: var(--amber);
  transform: rotate(5deg);
}

.offer-ticket--two span {
  color: var(--amber-700);
}

/* ---- Living miniatures: real content inside the four home cards ---- */

/* Address bar text in every mini browser window */
.browser-stack span em {
  display: block;
  overflow: hidden;
  padding-left: 32px;
  color: #8a95a8;
  font-size: 6px;
  font-weight: 600;
  line-height: 12px;
  text-overflow: ellipsis;
}

/* Web Siteleri — front window (right): anket.ogrencikart.net */
.browser-stack.mini-anket {
  z-index: 2;
  top: 84px;
  right: 6px;
  left: auto;
  width: 116px;
  height: 114px;
  padding: 0 9px;
  border-radius: 8px;
  text-align: center;
  transform: rotate(3deg);
}

.mini-anket::after {
  display: none;
}

.mini-anket > span {
  margin: 0 -9px 6px;
  text-align: left;
}

.ma-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--navy);
  font-size: 6.5px;
  font-weight: 800;
}

.ma-logo u,
.mw-nav u,
.ns-head u {
  width: 8px;
  height: 8px;
  margin-right: 2px;
  background: linear-gradient(var(--logo-navy) 0 60%, var(--green) 60% 75%, var(--logo-navy) 75%);
  border-radius: 2px;
}

.ma-logo strong {
  color: var(--green);
  font-size: 6.5px;
}

.ma-pill {
  display: block;
  width: fit-content;
  margin: 5px auto 0;
  padding: 2px 5px;
  color: #2f8a3a;
  background: var(--green-50);
  border-radius: 999px;
  font-size: 4.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ma-title {
  display: block;
  margin: 5px 0 4px;
  color: var(--navy);
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1.15;
  white-space: normal;
}

.ma-row {
  height: 8px;
  background: #f1f4f8;
  border-radius: 3px;
}

.ma-btn {
  height: 14px;
  display: grid;
  place-items: center;
  margin-top: 6px;
  color: #fff;
  background: linear-gradient(#4cb050, #3a9a3f);
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(61, 177, 42, 0.35);
  font-size: 5.5px;
  font-weight: 800;
}

/* Web Siteleri — back window (left): web.ogrencikart.net */
.browser-stack.mini-web {
  top: 18px;
  left: 6px;
  width: 140px;
  height: 120px;
  padding: 0 8px;
  border-radius: 10px;
  transform: rotate(-4deg);
}

.mini-web > span {
  margin: 0 -8px;
}

.mini-web::after {
  display: none;
}

.mw-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}

.mw-pill,
.ns-pill {
  padding: 2px 4px;
  color: #fff;
  background: #d7263d;
  border-radius: 999px;
  font-size: 4.5px;
  font-weight: 800;
}

.mw-link {
  color: var(--navy);
  font-size: 4.5px;
  font-weight: 700;
}

.mw-body {
  position: relative;
  height: 82px;
}

.mw-hero {
  display: block;
  width: 64%;
  margin-top: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: normal;
}

.mw-hero em {
  color: transparent;
  background: linear-gradient(90deg, #2f7df6, #22b573);
  -webkit-background-clip: text;
          background-clip: text;
}

.mw-btn {
  width: 44px;
  height: 10px;
  margin-top: 7px;
  background: #22b573;
  border-radius: 4px;
}

.mw-phone {
  position: absolute;
  top: 4px;
  right: -1px;
  width: 38px;
  height: 76px;
  padding: 9px 3px 3px;
  background: #f7f9fc;
  border: 2px solid #1d2433;
  border-radius: 8px;
}

.mw-card {
  padding: 3px;
  color: #fff;
  background: linear-gradient(135deg, #1e6ff2, #1a8de0);
  border-radius: 4px;
}

.mw-card small {
  display: block;
  font-size: 2.8px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mw-card strong {
  display: block;
  margin-top: 3px;
  font-size: 6.5px;
  font-weight: 800;
}

.mw-tile {
  height: 9px;
  margin-top: 3px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* Haberler — miniature of Öğrenci Haber with a scrolling feed */
.news-site {
  width: 158px;
  height: 190px;
  overflow: hidden;
  padding: 8px 8px 0;
  background: #fff;
  border: 1px solid rgba(10, 42, 94, 0.1);
  border-radius: 10px;
  box-shadow: var(--sh-2);
  transform: rotate(-2deg);
}

.ns-head {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ns-head u {
  width: 11px;
  height: 11px;
}

.ns-pill {
  font-size: 5px;
}

.ns-tabs {
  display: flex;
  gap: 7px;
  margin-top: 7px;
  padding-bottom: 3px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 5px;
  font-weight: 800;
}

.ns-tabs strong {
  color: #12a150;
  box-shadow: 0 4px 0 -2.5px #12a150;
}

.ns-title {
  margin: 7px 0 5px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ns-window {
  height: 122px;
  overflow: hidden;
  margin: 0 -8px;
  padding: 0 8px;
  background: linear-gradient(120deg, #f4f7fb 30%, #dceafb 70%, #dcf2ec);
}

.ns-item {
  position: relative;
  height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 0 6px 0 8px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 7px;
}

.ns-item::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 2px;
  background: linear-gradient(#2f7df6, #22b573);
  border-radius: 2px;
}

.ns-item small {
  display: block;
  color: #12a150;
  font-size: 4.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.ns-item strong {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink);
  font-size: 6.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ns-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.ns-thumb--announce {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 10v4h3l7 4V6L6 10z' fill='%23e9d3b0'/%3E%3Cpath d='M6 14l1.5 5h2.5l-1-4.4M17 9.5a3.5 3.5 0 0 1 0 5'/%3E%3C/svg%3E") center / 14px no-repeat, #38c6f4;
}

.ns-thumb--event {
  background:
    radial-gradient(circle at 28% 32%, #fff 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 62% 24%, #ffd1f3 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 46% 46%, #fff 0 0.6px, transparent 1.2px),
    radial-gradient(circle at 78% 52%, #ffb3ec 0 0.8px, transparent 1.4px),
    linear-gradient(#7b2ff7, #c13ad1 55%, #2a0f3d);
}

/* Hizmetler: a second line under each row title */
.service-sheet > div > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.service-sheet > div > span strong {
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}

.service-sheet > div > span em {
  overflow: hidden;
  color: var(--muted);
  font-size: 6.5px;
  font-weight: 600;
  line-height: 8px;
  text-overflow: ellipsis;
}

/* Fırsatlar: the discount is the headline */
.offer-ticket strong {
  font-size: 21px;
}

/* 5 — WEB: a site window */
.visual-site-card {
  background: transparent;
}

.site-window {
  width: 150px;
  height: 172px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10, 42, 94, 0.1);
  border-radius: 12px;
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.site-window > span {
  flex: 0 0 10px;
  background: #eef1f6;
}

.site-window header {
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
}

.site-window header b {
  margin-right: auto;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.site-window header i {
  width: 16px;
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
}

.site-window-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px;
  color: #fff;
  background: var(--navy);
}

.site-window-main small {
  color: var(--green-300);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.site-window-main strong {
  max-width: 104px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  white-space: normal;
}

.site-window-main div {
  width: 48px;
  height: 16px;
  margin-top: auto;
  background: var(--green);
  border-radius: 5px;
}

/* 6 — ANKET: a survey sheet */
.visual-survey {
  background: transparent;
}

.survey-sheet {
  width: 150px;
  height: 184px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(42, 48, 96, 0.1);
  border-radius: 14px;
  box-shadow: var(--sh-2);
}

.survey-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #2a3060;
}

.survey-sheet header b {
  font-size: 8px;
  font-weight: 700;
  line-height: 10px;
}

.survey-sheet header small {
  color: var(--muted);
  font-size: 7px;
}

.survey-sheet > i {
  display: block;
  height: 4px;
  margin: 7px 0 9px;
  background: linear-gradient(90deg, #5b68d6 50%, #e4e6f5 50%);
  border-radius: 4px;
}

.survey-sheet > strong {
  display: block;
  margin-bottom: 8px;
  color: #2a3060;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.survey-sheet > span {
  position: relative;
  height: 22px;
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 0 8px;
  color: #596176;
  background: #f7f7fb;
  border: 1px solid #e8e9f0;
  border-radius: 6px;
  font-size: 8px;
  line-height: 1;
}

.survey-sheet > span.selected {
  color: #3545ba;
  background: #eef0ff;
  border-color: #8993e2;
  font-weight: 600;
}

.survey-sheet > span.selected::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  background: #5b68d6;
  border-radius: 50%;
}

/* 7 — BLOG: a paper */
.visual-blog {
  background: transparent;
}

.blog-sheet {
  width: 146px;
  height: 178px;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 8px;
  color: #1c1c1c;
  background: #fffdf9;
  border: 1px solid rgba(10, 42, 94, 0.1);
  border-radius: 4px;
  box-shadow: var(--sh-2);
}

.blog-sheet > small {
  color: var(--green-700);
  font-size: 7px;
  font-weight: 800;
  line-height: 10px;
  letter-spacing: 0.1em;
}

.blog-sheet > strong {
  display: block;
  margin: 10px 0 auto;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.12;
  white-space: normal;
}

.blog-sheet div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #e7e0d8;
}

.blog-sheet div span {
  color: var(--red);
  font-size: 6.5px;
  font-weight: 800;
  line-height: 9px;
  letter-spacing: 0.04em;
}

.blog-sheet div i {
  height: 4px;
  background: #e6e0da;
}

/* ==========================================================================
   6. Content pages (lists, empty state, text pages)
   ========================================================================== */

.inner-main {
  padding: 32px 0 64px;
}

.page-aside,
.page-body {
  max-width: 848px;
}

.page-body {
  margin-top: 24px;
}

.page-intro {
  margin-top: 24px;
}

.page-intro h1 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.025em;
}

.page-intro > p:not(.eyebrow) {
  max-width: 60ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}

.data-notice {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--amber-50);
  border: 1px solid #f0dfb4;
  border-radius: var(--r-md);
}

.data-notice span {
  display: inline-block;
  padding: 3px 8px;
  color: var(--amber-700);
  background: #f6dfa6;
  border-radius: var(--r-xs);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data-notice p {
  margin: 8px 0 0;
  color: #6b5a36;
  font-size: 13px;
  line-height: 19px;
}

/* ---- List card ---- */

.content-list {
  display: grid;
  gap: 12px;
}

.content-card {
  min-height: 140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 24px;
  align-items: center;
  padding: 20px 20px 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.content-meta span {
  padding: 3px 8px;
  color: var(--navy-600);
  background: var(--surface-2);
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.content-meta .chip--status {
  color: var(--amber-700);
  background: var(--amber-50);
}

.content-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.content-card p {
  max-width: 560px;
  display: -webkit-box;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-card p.organization {
  margin-top: 4px;
  color: var(--ink);
  font-weight: 600;
}

/* ---- Thumbnails (132 x 100) ---- */

.content-thumb,
.content-image {
  width: 132px;
  height: 100px;
  border-radius: var(--r-sm);
}

.content-image {
  object-fit: contain;
  padding: 12px;
  background: var(--surface-2);
}

.content-image--blog {
  object-fit: cover;
  padding: 0;
}

.content-thumb {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--navy);
}

.content-thumb--blog {
  background: #f2ece2;
}

.content-thumb--blog::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 3px;
  background: var(--red);
}

.content-thumb--blog span {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: Georgia, serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.content-thumb--job {
  background: #e6ecf6;
}

.content-thumb--business {
  background: #e4f1ee;
}

.content-thumb--job span,
.content-thumb--business span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-2);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.content-thumb--business span {
  border-radius: 50%;
}

.biz-text {
  display: -webkit-box;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opportunity-logo {
  width: 48px;
  height: 48px;
  display: block;
  margin-bottom: 14px;
  object-fit: contain;
  border-radius: 10px;
}

/* ---- Fırsatlar ---- */

.empty-state {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.empty-mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--amber-700);
  background: var(--amber-50);
  border: 1px solid #f0dfb4;
  border-radius: var(--r-xl);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.empty-state h2 {
  margin: 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.01em;
}

.empty-state p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}

.source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.source-tags span {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--navy-600);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.opportunity-grid {
  display: grid;
  gap: 12px;
}

.opportunity-grid a {
  display: block;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-decoration: none;
}

.opportunity-grid h2 {
  margin: 0;
  color: var(--navy-600);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.opportunity-grid h3 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.opportunity-grid p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
}

.opportunity-grid a > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--green-700);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Text pages ---- */

.text-page-body {
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.text-page-body section + section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.text-page-body h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.text-page-body p {
  max-width: 72ch;
  margin: 8px 0 0;
  color: #33415a;
  font-size: 16px;
  line-height: 26px;
}

.text-page-body section + .pending-box,
.text-page-body section + .contact-link {
  margin-top: 28px;
}

.pending-box {
  padding: 16px 20px;
  background: var(--amber-50);
  border: 1px solid #f0dfb4;
  border-radius: var(--r-md);
}

.pending-box strong {
  display: block;
  color: var(--amber-700);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.pending-box p {
  margin-top: 4px;
  color: #6b5a36;
  font-size: 14px;
  line-height: 21px;
}

.contact-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--green-700);
  font-size: 18px;
  font-weight: 700;
  text-underline-offset: 5px;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
  /* Arc-style footer in OgrenciKart Logo Lacivert. */
  --footer-bg: var(--logo-navy);  /* band colour */
  --footer-rim: #1f4588;          /* 1px lighter navy rim along the scallops */
  /* no texture: plain corporate navy (kept as a variable so a texture can be re-added) */
  --footer-grain: linear-gradient(transparent, transparent);
  position: relative;
  padding: 48px 0 0;
  color: #fff;
  background: var(--footer-grain), var(--footer-bg);
}

/* Arc-style scalloped footer edge, measured from arc.net: one rounded wave
   every 17px, 4px from crest to trough (crests and troughs equally round),
   plus a 1px lighter rim just outside the edge. The grain continues into
   the scallops. */
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: 6px;
  pointer-events: none;
}

/* 1px lighter rim (drawn first, sits 1px outside the edge) */
.site-footer::before {
  background: var(--footer-rim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 0C4.25 0 4.25 4 8.5 4S12.75 0 17 0V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 0C4.25 0 4.25 4 8.5 4S12.75 0 17 0V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
}

/* the scallops themselves, in the footer colour + grain */
.site-footer::after {
  background: var(--footer-grain), var(--footer-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 1C4.25 1 4.25 5 8.5 5S12.75 1 17 1V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 1C4.25 1 4.25 5 8.5 5S12.75 1 17 1V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
}

/* Copyright strip: a separate, darker piece (UI Lacivert #07162F) that
   looks torn off the footer, finished with the same scalloped edge and rim. */
.footer-bottom-strip {
  position: relative;
  margin-top: 40px;
  background: #07162f;
}

.footer-bottom-strip::before,
.footer-bottom-strip::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100% - 1px);
  left: 0;
  height: 6px;
  pointer-events: none;
}

.footer-bottom-strip::before {
  background: var(--footer-rim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 0C4.25 0 4.25 4 8.5 4S12.75 0 17 0V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 0C4.25 0 4.25 4 8.5 4S12.75 0 17 0V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
}

.footer-bottom-strip::after {
  background: #07162f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 1C4.25 1 4.25 5 8.5 5S12.75 1 17 1V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 1C4.25 1 4.25 5 8.5 5S12.75 1 17 1V6H0Z'/%3E%3C/svg%3E") left bottom / 17px 6px repeat-x;
}

/* light text on the blue footer (the grey tones were made for the dark one) */
.site-footer .footer-grid h2,
.site-footer .footer-brand p,
.site-footer .footer-bottom {
  color: rgba(255, 255, 255, 0.72);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 1fr 1fr 1.2fr;
  gap: 32px 48px;
  padding-bottom: 32px;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand .brand-plate {
  width: 96px;
  height: 64px;
  border-radius: 14px;
}

.footer-brand .brand-plate img {
  height: 40px;
}

.footer-brand strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.footer-brand p {
  margin: 16px 0 0;
  color: var(--char-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.footer-grid h2 {
  margin: 0 0 12px;
  color: #8b9198;
  font-size: 13px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-grid li a,
.footer-email {
  display: block;
  padding: 6px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-decoration: none;
}

.footer-grid li a {
  width: fit-content;
}

.footer-email {
  overflow-wrap: anywhere;
}

.footer-bottom {
  padding: 22px 0 26px;
  color: #8b9198;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb a:hover {
    text-decoration: underline;
  }

  .footer-grid li a:hover,
  .footer-email:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* ==========================================================================
   8. Download dialog
   ========================================================================== */

.download-modal {
  width: min(460px, calc(100% - 32px));
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px -16px rgba(7, 29, 66, 0.45);
}

.download-modal::backdrop {
  background: rgba(7, 29, 66, 0.6);
}

.download-modal form {
  position: absolute;
  top: 12px;
  right: 12px;
}

.modal-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  color: var(--navy);
  background: var(--surface-2);
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--ease-color);
}

.modal-content {
  padding: 40px;
  text-align: center;
}

.modal-content > img {
  width: auto;
  height: 48px;
  margin: 0 auto 20px;
}

.modal-content h2 {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;
}

.modal-content > p:not(.eyebrow) {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
}

.qr-placeholder {
  width: 144px;
  height: 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 24px auto 16px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
}

.qr-placeholder span {
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.qr-placeholder small {
  font-size: 12px;
  line-height: 16px;
}

.modal-store-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.modal-store-row span {
  padding: 6px 12px;
  color: var(--navy-600);
  background: var(--surface-2);
  border-radius: var(--r-xs);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .modal-close:hover {
    background: var(--line);
  }
}

/* ==========================================================================
   9. Desktop (>= 1280px): two-column compositions, 848 | 55 | 337
   ========================================================================== */

@media (min-width: 1280px) {
  .portal-shell {
    margin-block: auto;
    padding: 40px 0 56px;
  }

  .portal-layout {
    height: 451px;
    display: grid;
    grid-template-columns: 848px 337px;
    align-items: stretch;
    justify-content: space-between;
  }

  /* Card row centred on the 451px panel: (451 - 300) / 2 = 75.5, snapped to a
     whole pixel so card edges stay crisp. */
  .portal-card-stage {
    width: 848px;
    display: flex;
    align-items: flex-start;
    padding-top: 75px;
  }

  .portal-grid,
  .sublevel-grid {
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .app-download-panel {
    display: flex;
  }

  .mobile-download-cta {
    display: none;
  }

  .inner-main {
    padding: 40px 0 80px;
  }

  .page-layout {
    display: grid;
    grid-template-columns: 337px 848px;
    align-items: start;
    justify-content: space-between;
  }

  .page-aside {
    position: sticky;
    top: calc(var(--header-height) + 32px);
  }

  .page-body {
    margin-top: 0;
  }
}

/* Short desktop viewports (e.g. 1440 x 900): header + shell + footer fit
   without a scrollbar. */
@media (min-width: 1280px) and (max-height: 940px) {
  .portal-shell {
    padding: 36px 0 42px;
  }
}

/* ==========================================================================
   10. Tablet (701px - 1279px): single column, wider gutter
   ========================================================================== */

@media (min-width: 701px) and (max-width: 1279px) {
  :root {
    --gutter: 32px;
  }

  /* The button starts on the card row's left edge and spans two cards + gap,
     so the row and the button read as one block on every shell page. */
  .mobile-download-cta {
    width: min(100%, 416px);
    display: flex;
  }

  /* 44px tap heights on touch-sized layouts. */
  .breadcrumb a {
    margin: -14px 0;
    padding: 14px 0;
  }

  .footer-grid li a,
  .footer-email {
    padding: 12px 0;
  }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   11. Mobile (<= 700px)
   ========================================================================== */

@media (max-width: 700px) {
  :root {
    --header-height: 60px;
    --catalog-gap: 12px;
  }

  /* ---- Header: symbol | one-line tagline, centred on the page | weather ---- */

  /* 59px + the 1px bottom border = a 60px bar. */
  .header-inner {
    height: calc(var(--header-height) - 1px);
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    gap: 10px;
  }

  .brand {
    padding: 5px 0;
  }

  .brand img {
    width: 52px;
    height: 40px;
  }

  .header-tagline {
    font-size: 13px;
  }

  .header-weather {
    height: 32px;
    gap: 5px;
    padding: 0 10px;
    font-size: 12px;
  }

  .header-weather strong {
    font-size: 13px;
  }

  .header-weather i:last-of-type,
  .weather-condition {
    display: none;
  }

  /* ---- Home / sub-category: carousel, then the download button ---- */

  .portal-shell {
    padding: 16px 0 32px;
  }

  /* 8px of top padding keeps the focus ring and pressed card inside the scroller. */
  .portal-grid,
  .sublevel-grid {
    padding: 8px var(--gutter) 20px;
    -webkit-overflow-scrolling: touch;
  }

  .portal-card,
  .portal-card:active {
    transition: transform 120ms ease-out, border-color var(--ease-color);
  }

  .portal-card:active {
    border-color: var(--line-strong);
    transform: scale(0.98);
  }

  .mobile-download-cta {
    width: 100%;
    min-width: 0;
    max-width: 400px;
    display: flex;
    transition: transform 120ms ease-out, background-color var(--ease-color);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-download-cta:active {
    background: var(--navy);
    transform: scale(0.98);
  }

  /* ---- Content pages ---- */

  .inner-main {
    padding: 20px 0 48px;
  }

  /* 44px tap height without changing the 16px line rhythm. */
  .breadcrumb a {
    margin: -14px 0;
    padding: 14px 0;
  }

  .page-intro {
    margin-top: 16px;
  }

  .page-intro .eyebrow {
    font-size: 11px;
  }

  .page-intro h1 {
    margin-top: 4px;
    font-size: 30px;
    line-height: 34px;
  }

  .page-intro > p:not(.eyebrow) {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
  }

  .data-notice {
    margin-top: 16px;
    padding: 12px 14px;
  }

  .page-body {
    margin-top: 16px;
  }

  /* List card: text left, 72px visual right. */
  .content-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 12px;
    align-items: start;
    padding: 16px;
  }

  .content-meta {
    gap: 4px;
    margin-bottom: 8px;
  }

  .content-meta span {
    padding: 2px 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  .content-card h2 {
    font-size: 16px;
    line-height: 22px;
    overflow-wrap: break-word;
  }

  .content-card p {
    font-size: 13px;
    line-height: 19px;
  }

  .content-card p.organization {
    margin-top: 2px;
  }

  .content-thumb,
  .content-image {
    width: 72px;
    height: 72px;
  }

  .content-image {
    padding: 8px;
  }

  .content-image--blog {
    padding: 0;
  }

  .content-thumb--blog::before {
    top: 10px;
    left: 10px;
    width: 16px;
  }

  .content-thumb--blog span {
    bottom: 8px;
    left: 10px;
    font-size: 28px;
  }

  .content-thumb--job span,
  .content-thumb--business span {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
  }

  .content-thumb--business span {
    border-radius: 50%;
  }

  .empty-state {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
  }

  .empty-mark {
    width: 56px;
    height: 56px;
    border-radius: var(--r-lg);
    font-size: 24px;
  }

  .empty-state h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .empty-state p {
    font-size: 14px;
    line-height: 21px;
  }

  .source-tags {
    margin-top: 20px;
  }

  .opportunity-grid a {
    padding: 16px;
  }

  .opportunity-grid h3 {
    font-size: 16px;
    line-height: 22px;
  }

  .text-page-body {
    padding: 20px;
  }

  .text-page-body section + section {
    margin-top: 20px;
    padding-top: 20px;
  }

  .text-page-body h2 {
    font-size: 17px;
  }

  .text-page-body p {
    font-size: 15px;
    line-height: 24px;
  }

  .text-page-body section + .pending-box,
  .text-page-body section + .contact-link {
    margin-top: 20px;
  }

  .pending-box {
    padding: 14px 16px;
  }

  .text-page-body .pending-box p {
    font-size: 14px;
    line-height: 21px;
  }

  .contact-link {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  /* ---- Footer: brand, Kurumsal | Yasal, İletişim ---- */

  .site-footer {
    padding: 40px 0 0;
  }

  /* 2fr | 3fr: the short Kurumsal labels leave the long legal labels on one line. */
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 28px 24px;
    padding-bottom: 28px;
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }

  .footer-brand .brand-plate {
    width: 88px;
    height: 58px;
  }

  .footer-brand .brand-plate img {
    height: 36px;
  }

  .footer-brand strong {
    font-size: 18px;
  }

  .footer-grid h2 {
    margin-bottom: 4px;
  }

  .footer-grid li a,
  .footer-email {
    min-width: 44px;
    padding: 12px 0;
  }

  .footer-email {
    width: fit-content;
    max-width: 100%;
  }

  /* ---- Download dialog ---- */

  .download-modal form {
    top: 8px;
    right: 8px;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  .modal-content {
    padding: 32px 24px 28px;
  }

  .modal-content > img {
    height: 44px;
    margin-bottom: 16px;
  }

  .modal-content h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .qr-placeholder {
    margin-top: 20px;
  }
}

/* Large phones: at 12px the second card would end 2-10px past the screen edge
   and read as a rendering fault. The gap grows with the viewport so the card
   is always cut by at least its corner radius. */
@media (min-width: 416px) and (max-width: 440px) {
  :root {
    --catalog-gap: clamp(12px, calc(100vw - 404px), 28px);
  }
}

@media (max-width: 374px) {
  :root {
    --gutter: 16px;
  }

  .header-inner {
    gap: 8px;
  }
}

@media (max-width: 340px) {
  .header-tagline {
    font-size: 12px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-brand,
  .footer-grid > div:last-child {
    grid-column: auto;
  }
}

/* ==========================================================================
   12. Reduced motion
   ========================================================================== */

/* ---- Header slogan: shown on phones/tablets; on desktop the big slogan
   above the cards takes over, so the header centre stays empty ---- */
.header-tagline {
  color: #0b1b35;
  font-weight: 700;
}

.header-tagline em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(100deg, #1167f5, #3a86ff 50%, #19b66b);
  -webkit-background-clip: text;
          background-clip: text;
}

@media (min-width: 1280px) {
  .header-tagline {
    visibility: hidden; /* keeps the 3-column header grid intact */
  }
}

/* ---- Home (desktop): the slogan above the card row; the app panel is a door ----
   "Şehrin anahtarı sende." sits in the space above the cards; the app panel has a
   green knob and opens a little on hover. Desktop only (the panel exists from 1280px). */
.portal-slogan {
  display: none;
}

@media (min-width: 1280px) {
  .portal-shell--home .portal-layout {
    position: relative;
  }

  /* cards stand on the threshold (bottom-aligned with the door) */
  .portal-shell--home .portal-card-stage {
    position: relative;
    z-index: 1;
    padding-top: 151px;
  }

  .portal-shell--home .portal-slogan {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    margin: 0;
    /* identical to the hero on web.ogrencikart.net */
    color: #0b1b35;
    font-size: 56.32px;
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }

  .portal-slogan em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(100deg, #1167f5, #3a86ff 50%, #19b66b);
    -webkit-background-clip: text;
            background-clip: text;
  }

}

/* ---- The app panel is a door (desktop, where the panel exists) ----
   Navy door leaf with a raised inner panel, the QR as its glass window, the store
   buttons on the kick plate and a green knob. Grab the knob (hover the handle strip
   on the right edge) and the door swings open on its left hinge, showing Rize
   behind it. Only the door moves; hovering the QR keeps it still for scanning. */
.door-frame {
  display: contents;
}

.door-scene,
.door-handle {
  display: none;
}

@media (min-width: 1280px) {
  .door-frame {
    position: relative;
    width: 337px;
    height: 451px;
    display: block;
    perspective: 1400px;
  }

  .door-scene {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--r-xl);
    box-shadow: inset 0 0 0 1px rgba(8, 43, 99, 0.12);
  }

  .door-scene svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .door-frame .app-download-panel {
    position: relative;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
      var(--logo-navy);
    transform-origin: 0 50%;
    transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 700ms ease-out;
  }

  /* raised inner panel of the door */
  .door-frame .app-download-panel::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.02);
    pointer-events: none;
  }

  /* QR = the door's glass window */
  .door-frame .app-panel-qr--placeholder {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    border: 3px solid rgba(255, 255, 255, 0.16);
  }

  /* the handle: an invisible strip on the right edge with the green knob in it */
  .door-handle {
    position: absolute;
    z-index: 2;
    top: 30%;
    right: 0;
    width: 64px;
    height: 40%;
    display: block;
    cursor: grab;
  }

  .door-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 10px;
    height: 34px;
    margin-top: -17px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
  }

  .door-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(61, 177, 42, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 300ms ease-out;
  }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .door-frame:has(.door-handle:hover) .app-download-panel {
    box-shadow: 18px 0 40px -18px rgba(18, 20, 22, 0.55);
    transform: rotateY(-32deg);
  }

  .door-handle:hover::after {
    transform: scale(1.15);
  }
}

/* ---- Phones & tablets: the app download bar is always in reach ----
   Most visitors arrive from the QR codes on stands, on a phone; the goal is the
   app. The bar sticks to the bottom of the screen with a bright green "İndir"
   button. The footer gets extra bottom padding so nothing hides behind it. */
.cta-pill {
  display: none;
}

@media (max-width: 1279px) {
  .mobile-download-cta {
    position: fixed;
    z-index: 30;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 16px;
    width: auto;
    max-width: 520px;
    height: 68px;
    margin: 0 auto;
    padding: 0 10px;
    box-shadow: 0 16px 32px -12px rgba(8, 43, 99, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .mobile-download-cta::after {
    display: none;
  }

  .cta-pill {
    height: 46px;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 20px;
    color: #fff;
    background: var(--green);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(61, 177, 42, 0.45);
    font-size: 15px;
    font-weight: 800;
  }

  body:has(.mobile-download-cta) .footer-bottom {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Floating cards (mouse/trackpad only) ----
   At rest a card is just an outline: no fill, no shadow, so the illustration
   floats on the page. On hover/focus the outline fills in white and lifts.
   Touch screens keep the solid white cards. */
@media (hover: hover) and (pointer: fine) {
  .portal-card {
    background: transparent;
    border-color: rgba(8, 43, 99, 0.18);
    box-shadow: none;
    transition: transform var(--ease-move), box-shadow var(--ease-move), border-color var(--ease-color), background-color 260ms ease-out, opacity 200ms ease-out;
  }

  .portal-card:is(:hover, :focus-visible) {
    background: var(--paper);
    border-color: var(--line-strong);
    box-shadow: var(--sh-3);
  }

  /* ticket notches are "holes": page colour at rest, card colour once filled */
  .offer-ticket::before,
  .offer-ticket::after {
    background: var(--canvas);
    transition: background-color 260ms ease-out;
  }

  .portal-card:is(:hover, :focus-visible) .offer-ticket::before,
  .portal-card:is(:hover, :focus-visible) .offer-ticket::after {
    background: var(--paper);
  }
}

/* ---- Card illustration micro-motion ----
   On hover / keyboard focus each illustration acts out its job in ~0.5s:
   browser windows fan out, the newspaper turns, service rows slide in turn,
   the tickets slide past each other. Mouse/trackpad only; reduced-motion users
   get no movement. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .browser-stack,
  .paper,
  .news-site,
  .ns-item,
  .mw-phone,
  .ma-btn,
  .service-sheet > div,
  .service-sheet > div > i,
  .offer-ticket {
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 500ms ease-out, background-color 300ms ease-out;
  }

  /* Web Siteleri: the windows fan out */
  .portal-card:is(:hover, :focus-visible) .browser-stack--back {
    transform: translate(-8px, -5px) rotate(-11deg);
  }

  .portal-card:is(:hover, :focus-visible) .browser-stack--middle {
    transform: translate(8px, -7px) rotate(10deg);
  }

  .portal-card:is(:hover, :focus-visible) .browser-stack--front {
    transform: translateY(-6px) rotate(-1.5deg);
  }

  .ns-feed {
    transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Web Siteleri: the phone in the WEB window lifts, the survey button glows */
  .portal-card:is(:hover, :focus-visible) .mw-phone {
    transform: translateY(-6px) rotate(-5deg);
  }

  .portal-card:is(:hover, :focus-visible) .ma-btn {
    box-shadow: 0 4px 10px rgba(61, 177, 42, 0.55);
    transform: scale(1.06);
  }

  /* Haberler: the page tilts up and the news feed scrolls to the next story */
  .portal-card:is(:hover, :focus-visible) .news-site {
    transform: translateY(-4px) rotate(1deg);
  }

  .portal-card:is(:hover, :focus-visible) .ns-feed {
    transform: translateY(-20px);
  }

  /* the two site windows move apart */
  .portal-card:is(:hover, :focus-visible) .browser-stack.mini-web {
    transform: translate(-6px, -6px) rotate(-7deg);
  }

  .portal-card:is(:hover, :focus-visible) .browser-stack.mini-anket {
    transform: translate(4px, 4px) rotate(6deg);
  }

  /* Haberler (legacy paper visual) */
  .portal-card:is(:hover, :focus-visible) .paper {
    transform: translateY(-4px) rotate(3deg) scale(1.03);
  }

  /* Hizmetler: rows come alive one after the other (they stay inside the sheet) */
  .portal-card:is(:hover, :focus-visible) .service-sheet > div {
    background-color: #fff;
    box-shadow: var(--sh-2);
    transform: translateY(-3px);
  }

  .portal-card:is(:hover, :focus-visible) .service-sheet > div > i {
    transform: scale(1.5);
  }

  .portal-card:is(:hover, :focus-visible) .service-sheet > div:nth-of-type(2),
  .portal-card:is(:hover, :focus-visible) .service-sheet > div:nth-of-type(2) > i {
    transition-delay: 110ms;
  }

  /* Fırsatlar: the tickets slide past each other */
  .portal-card:is(:hover, :focus-visible) .offer-ticket--one {
    transform: translate(10px, 8px) rotate(-2deg);
  }

  .portal-card:is(:hover, :focus-visible) .offer-ticket--two {
    transform: translate(-10px, -10px) rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .portal-card:hover,
  .portal-card:active,
  .portal-card:hover .card-affordance,
  .mobile-download-cta:active {
    transform: none;
  }
}


/* ===== Saate göre ana sayfa zemini (sabah · öğle · akşam · gece) ===== */
body[data-page="home"] #main-content { position: relative; isolation: isolate; }



/* ===== Ana sayfa şehir sahnesi (çizgi illüstrasyon) ===== */
body[data-page="home"] { --canvas: #ffffff; background: #ffffff; }
body[data-page="home"] .site-header { border-bottom-color: transparent; }
.city-band { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 8px; pointer-events: none; user-select: none; }
.city-band img { display: block; height: 300px; width: auto; max-width: none; }
@media (max-width: 1279px) {
  .city-band { padding-top: 24px; }
  .city-band img { height: auto; width: 50%; }
}
/* Sahne kartlara değsin, arkada kalsın */
body[data-page="home"] .portal-shell { position: relative; z-index: 1; }
.city-band { position: relative; z-index: 0; margin-top: -120px; padding-top: 0; }
@media (hover: hover) and (pointer: fine) {
  body[data-page="home"] .portal-card { background: #fff; }
}
@media (max-width: 1279px) {
  .city-band { margin-top: -70px; padding-top: 0; }
}

/* ===== Üst çene: header altındaki dalgalı çizgi, kaydırdıkça iner ===== */
.jaw { position: fixed; left: 0; right: 0; top: var(--header-height); height: 2px; z-index: 18; background: var(--logo-navy); pointer-events: none; }
.jaw::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 6px; background: var(--logo-navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 0H17V1C12.75 1 12.75 5 8.5 5S4.25 1 0 1Z'/%3E%3C/svg%3E") left top / 17px 6px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='6' viewBox='0 0 17 6'%3E%3Cpath d='M0 0H17V1C12.75 1 12.75 5 8.5 5S4.25 1 0 1Z'/%3E%3C/svg%3E") left top / 17px 6px repeat-x; }
body[data-page="home"] .site-footer { z-index: 19; }

/* Çene kapanınca üstten logo düşer, altında slogan */
.jaw-inner { position: absolute; inset: 0; overflow: hidden; }
.jaw-brand { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 22px; text-align: center; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-50% - 260px)); transition: transform .8s cubic-bezier(.34, 1.45, .64, 1), opacity .35s ease; }
.jaw.is-closed .jaw-brand { opacity: 1; transform: translate(-50%, -50%); }
.jaw-logo { display: grid; place-items: center; width: 132px; height: 100px; border-radius: 24px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); }
.jaw-logo img { width: 92px; height: auto; }
.jaw-brand p { margin: 0; color: #fff; font-size: 44px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.jaw-brand em { font-style: normal; color: transparent; background: linear-gradient(100deg, #b9f5cf, #3ddc84); -webkit-background-clip: text; background-clip: text; }
@media (prefers-reduced-motion: reduce) { .jaw-brand { transition: opacity .2s ease; } }

/* Logo: Öğrenci Kart + "Portal" rozeti (önce Yemek, Anket, Blog'dan geçip Portal'da durur) */
.jaw-logo { position: relative; width: auto; height: auto; padding: 18px 26px; border-radius: 24px; }
.jaw-logo img { display: block; width: 400px; max-width: 70vw; height: auto; }
.jaw-badge { position: absolute; left: calc(26px + 73.25%); top: calc(18px + 6.2%); width: 19%; height: 19.8%; border-radius: 999px; background: #f2a51a; overflow: hidden; }
.jaw-logo .jaw-badge { left: calc(26px + 400px * .7325); top: calc(18px + 400px * .2825 * .062); width: calc(400px * .19); height: calc(400px * .2825 * .198); }
.jaw-badge-roll { display: grid; }
.jaw-badge-roll b { display: grid; place-items: center; height: calc(400px * .2825 * .198); color: #fff; font: 700 15px/1 Arial, Helvetica, sans-serif; }
/* Rozet: Portal → Yemek → Anket → Blog → Haber → Portal, her ~1 sn'de bir */
@keyframes badgeLoop6 {
  0%, 14% { transform: translateY(0); }
  20%, 34% { transform: translateY(-16.6667%); }
  40%, 54% { transform: translateY(-33.3333%); }
  60%, 74% { transform: translateY(-50%); }
  80%, 94% { transform: translateY(-66.6667%); }
  100% { transform: translateY(-83.3333%); }
}
.jaw-badge-roll, .jaw.is-closed .jaw-badge-roll { animation: badgeLoop6 5s cubic-bezier(.5, 0, .3, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .jaw-badge-roll, .jaw.is-closed .jaw-badge-roll { animation: none; } }

/* Ana sayfa Anket kartı: tek pencere, ortada */
.visual-anket .browser-stack.mini-anket { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%) scale(1.3) rotate(-2deg); }
.portal-card:is(:hover, :focus-visible) .visual-anket .browser-stack.mini-anket { transform: translate(-50%, -56%) scale(1.34) rotate(1deg); }

/* Alt sayfalarda (Hizmetler vb.) kartların üstünde "Ana portal / …" sekme izi */
.portal-card-stage { position: relative; }
.portal-card-stage > .breadcrumb { margin: 0 0 20px; }
@media (min-width: 1280px) {
  .portal-card-stage > .breadcrumb { position: absolute; top: 12px; left: 0; margin: 0; white-space: nowrap; }
}

/* ===== Hizmetler: çarşı sokağı ===== */
body.has-carsi { --canvas: #ffffff; background: #ffffff; }
body.has-carsi .site-header { border-bottom-color: transparent; }
body.has-carsi #main-content { position: relative; }
body.has-carsi .portal-shell { position: relative; z-index: 1; }
body.has-carsi .portal-card { background: #fff; }
.carsi-band { position: relative; z-index: 0; display: flex; justify-content: space-between; align-items: flex-end; margin-top: -120px; overflow: hidden; pointer-events: none; user-select: none; }
.carsi-band > img { display: block; height: 300px; width: auto; max-width: none; }
.carsi-band > .carsi-kurye { position: absolute; left: 0; bottom: 0; height: 95px; animation: carsiRide 16s linear infinite; }
@keyframes carsiRide { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 40px)); } }
@media (max-width: 1279px) {
  .carsi-band { margin-top: -40px; }
  .carsi-band > img { height: auto; width: 50%; }
  .carsi-band > .carsi-kurye { width: auto; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .carsi-band > .carsi-kurye { animation: none; left: 30%; } }

/* ===== Canlı: tüm sayfalar ana sayfa gibi beyaz zemin, header çizgisiz ===== */
:root { --canvas: #ffffff; }
html, body { background: #ffffff; }
.site-header { border-bottom-color: transparent; }
a.content-card--link { color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a.content-card--link:hover, a.content-card--link:focus-visible { border-color: #b9c9e2; box-shadow: 0 14px 30px -18px rgba(8, 43, 99, .35); transform: translateY(-2px); }
.chip--deal { background: #e8f7ee !important; color: #127a43 !important; font-weight: 700; }
.page-aside .contact-link { margin-top: 18px; display: inline-flex; }
.empty-state .contact-link { margin-top: 14px; display: inline-flex; }

/* ===== Hizmetler kartları: ana sayfadaki gibi başlık ve üzerine gelince canlanan minyatürler ===== */
.portal-card--secondary .portal-card-copy h2 { font-size: 16px; letter-spacing: -0.01em; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mini-list, .business-board, .blog-sheet,
  .mini-list > div, .business-board > div, .blog-sheet div,
  .mini-list > div > b, .business-board > div > b, .blog-sheet div i {
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 500ms ease-out, background-color 300ms ease-out, color 300ms ease-out;
  }
  .blog-sheet div i { transform-origin: left center; }

  /* İş İlanları: liste öne eğilir, ilanlar sırayla kayar, numaralar yeşile döner */
  .portal-card:is(:hover, :focus-visible) .mini-list { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 22px 34px -18px rgba(8, 43, 99, 0.45); }
  .portal-card:is(:hover, :focus-visible) .mini-list > div:nth-of-type(1) { transform: translateX(-6px); }
  .portal-card:is(:hover, :focus-visible) .mini-list > div:nth-of-type(2) { transform: translateX(-12px); transition-delay: 80ms; }
  .portal-card:is(:hover, :focus-visible) .mini-list > div > b { color: #fff; background: var(--green); }

  /* İşletmeler: pano kalkar, işletmeler sırayla kayar, rozetleri büyür */
  .portal-card:is(:hover, :focus-visible) .business-board { transform: translateY(-6px) rotate(1.5deg); box-shadow: 0 22px 34px -18px rgba(8, 43, 99, 0.45); }
  .portal-card:is(:hover, :focus-visible) .business-board > div:nth-of-type(1) { transform: translateX(6px); }
  .portal-card:is(:hover, :focus-visible) .business-board > div:nth-of-type(2) { transform: translateX(12px); transition-delay: 80ms; }
  .portal-card:is(:hover, :focus-visible) .business-board > div > b { transform: scale(1.12); }

  /* Blog: sayfa çevrilir gibi eğilir, satırlar yazılıyormuş gibi uzar */
  .portal-card:is(:hover, :focus-visible) .blog-sheet { transform: translateY(-6px) rotate(-3deg); box-shadow: 0 22px 34px -18px rgba(8, 43, 99, 0.45); }
  .portal-card:is(:hover, :focus-visible) .blog-sheet div i { transform: scaleX(1.12); }
  .portal-card:is(:hover, :focus-visible) .blog-sheet div:nth-of-type(2) i { transition-delay: 120ms; }
}

/* ===== Çene + logo: telefonda da (logo ekran genişliğine göre ölçeklenir) ===== */
.jaw-runway { display: block; pointer-events: none; }
.jaw.jaw--runway { z-index: 20; } /* telefonda footer'ın lacivert üst kısmının da üstünden kapanır */
.jaw-logo { --lw: min(400px, 72vw); --px: clamp(14px, 4vw, 26px); --py: clamp(10px, 2.6vw, 18px); padding: var(--py) var(--px); border-radius: clamp(16px, 4vw, 24px); }
.jaw-logo img { width: var(--lw); max-width: none; }
.jaw-logo .jaw-badge { left: calc(var(--px) + var(--lw) * .7325); top: calc(var(--py) + var(--lw) * .2825 * .062); width: calc(var(--lw) * .19); height: calc(var(--lw) * .2825 * .198); }
.jaw-badge-roll b { height: calc(var(--lw) * .2825 * .198); font-size: calc(var(--lw) * .0375); }
.jaw-brand p { font-size: clamp(26px, 7.4vw, 44px); }
.jaw-brand { gap: clamp(14px, 4vw, 22px); }
/* Pist modunda alttaki "Uygulamayı indir" çubuğu çenenin üstünde durur; logo onun üstünde ortalanır. */
.jaw--runway .jaw-brand { top: calc(50% - 44px); }
.jaw.jaw--runway.jaw--behind { z-index: 18; }

/* Sağdaki tarayıcı kaydırma çubuğu gizli (kaydırma tekerlek/dokunmatik/klavye ile çalışmaya devam eder) */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ===== İş İlanları: solda Dönemsel, sağda Hızlı İş ===== */
.jobs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.jobs-col { display: grid; gap: 12px; min-width: 0; }
.jobs-col-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); }
.jobs-col--donemsel .jobs-col-head { border-top: 4px solid var(--navy); }
.jobs-col--hizli .jobs-col-head { border-top: 4px solid var(--green); }
.jobs-col-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; color: #fff; background: var(--navy); }
.jobs-col--hizli .jobs-col-mark { background: var(--green); }
.jobs-col-head h2 { margin: 0; color: var(--navy); font-size: 20px; line-height: 26px; letter-spacing: -.01em; }
.jobs-col-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.jobs-count { margin-left: auto; display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 10px; border-radius: 999px; background: #eef2f8; color: var(--navy); font-size: 14px; }
.jobs-col .content-list { display: grid; gap: 12px; }
.jobs-empty { padding: 28px 20px; border: 1.5px dashed var(--line); border-radius: var(--r-lg, 16px); color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }
@media (max-width: 760px) { .jobs-split { grid-template-columns: minmax(0, 1fr); } }

/* ===== İşletmeler: kare kartlar, görselin altında kategori ===== */
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.biz-card { display: flex; flex-direction: column; min-width: 0; background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); overflow: hidden; }
.biz-media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; background: #eef2f8; overflow: hidden; color: inherit; text-decoration: none; }
.biz-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.biz-initial { display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 22%; background: #fff; color: var(--navy); font-size: clamp(32px, 5vw, 52px); font-weight: 800; box-shadow: 0 10px 24px -14px rgba(8, 43, 99, .45); }
.biz-deal { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 14px; font-weight: 800; }
.biz-go { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--navy); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.biz-go .external-icon { width: 16px; height: 16px; }
a.biz-media:hover img, a.biz-media:focus-visible img { transform: scale(1.04); }
a.biz-media:hover .biz-go, a.biz-media:focus-visible .biz-go { opacity: 1; transform: none; }
@media (hover: none) { .biz-go { opacity: 1; transform: none; } }
.biz-info { padding: 12px 14px 16px; }
.biz-cat { margin: 0; color: var(--green-700, #23801a); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.biz-info h2 { margin: 4px 0 0; color: var(--navy); font-size: 17px; line-height: 22px; letter-spacing: -.01em; }
.biz-benefit { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 19px; }
@media (max-width: 520px) { .biz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .biz-info { padding: 10px 12px 14px; } .biz-info h2 { font-size: 15px; line-height: 20px; } .biz-benefit { display: none; } }
@media (prefers-reduced-motion: reduce) { .biz-media img, .biz-go { transition: none; } }

.biz-deal { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Fırsatlar: seçilmiş gençlik avantajları (kartlar panelden tek tek yönetilir) ===== */
.opp-note { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid var(--green); background: #f3faf1; border-radius: 0 10px 10px 0; color: var(--muted); font-size: 13.5px; line-height: 20px; }
.opp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.opp-filters button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.opp-filters button span { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.opp-filters button.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.opp-filters button.is-active span { color: rgba(255, 255, 255, .75); }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.opp-card { display: flex; flex-direction: column; min-width: 0; background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); overflow: hidden; }
.opp-card[hidden] { display: none; }
.opp-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.opp-card--featured .opp-cover { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 260px; }
.opp-card--featured h2 { font-size: 24px; line-height: 30px; }
.opp-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #e8f0ff, #eaf7e6); overflow: hidden; }
.opp-cover img { width: 100%; height: 100%; object-fit: cover; }
.opp-placeholder { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fff; color: var(--navy); font-size: 30px; font-weight: 800; box-shadow: 0 10px 24px -14px rgba(8, 43, 99, .45); }
.opp-cat { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 12px; font-weight: 700; }
.opp-deadline { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }
.opp-deadline.is-urgent { background: #d9480f; }
.opp-body { padding: 16px 18px 6px; }
.opp-brand { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-700, #23801a); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.opp-brand img { width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }
.opp-body h2 { margin: 6px 0 0; color: var(--navy); font-size: 18px; line-height: 24px; letter-spacing: -.01em; }
.opp-desc { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 21px; }
.opp-audience { margin: 8px 0 0; color: var(--ink, #0b1b35); font-size: 13px; line-height: 19px; }
.opp-audience b { font-weight: 700; }
.opp-how { margin: 10px 0 0; border-top: 1px dashed var(--line); padding-top: 8px; }
.opp-how summary { cursor: pointer; color: var(--navy); font-size: 13.5px; font-weight: 700; }
.opp-how ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 20px; }
.opp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 12px 18px 16px; }
.opp-verified { color: var(--muted); font-size: 12px; }
.opp-go { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.opp-go .external-icon { width: 15px; height: 15px; }
.opp-go:hover, .opp-go:focus-visible { background: var(--green); }
@media (max-width: 760px) {
  .opp-card--featured { display: flex; }
  .opp-card--featured .opp-cover { aspect-ratio: 16 / 9; min-height: 0; }
  .opp-card--featured h2 { font-size: 20px; line-height: 26px; }
  .opp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Marka adları yazıldığı gibi (Türkçe büyük harf dönüşümü "GİTHUB" yapmasın) */
.opp-brand { text-transform: none; letter-spacing: .01em; font-size: 13px; }

.opp-credit { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(7, 22, 47, .6); color: #fff; font-size: 10.5px; }

/* ===== Kapanış animasyonu: TV adımı + test yayını damgası (09.10.2026) ===== */
/* Rozet: Portal → Yemek → Anket → Blog → Haber → TV → Portal (logo aynen kalır, yalnız rozet "TV" olur) */
@keyframes badgeLoop7 {
  0%, 11.67% { transform: translateY(0); }
  16.67%, 28.33% { transform: translateY(-14.2857%); }
  33.33%, 45% { transform: translateY(-28.5714%); }
  50%, 61.67% { transform: translateY(-42.8571%); }
  66.67%, 78.33% { transform: translateY(-57.1429%); }
  83.33%, 95% { transform: translateY(-71.4286%); }
  100% { transform: translateY(-85.7143%); }
}
.jaw-badge-roll, .jaw.is-closed .jaw-badge-roll { animation: badgeLoop7 6s cubic-bezier(.5, 0, .3, 1) infinite; }
.jaw-test { position: absolute; left: calc(var(--px) + var(--lw) * .64); top: calc(var(--py) + var(--lw) * .2825 * .74); width: calc(var(--lw) * .33); transform: rotate(-6deg); transform-origin: left center; pointer-events: none; }
.jaw-test svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .jaw-badge-roll, .jaw.is-closed .jaw-badge-roll { animation: none; } }

/* ===== Telefon: kartlar okunur büyüklükte (09.10.2026) =====
   Kart ve içindeki minyatür birlikte orantılı büyür (zoom); ekranda bir kart tam,
   yanındakinin bir kısmı görünür → kaydırılabildiği anlaşılır. Bilgisayar düzeni değişmez. */
@media (max-width: 700px) {
  .portal-grid .portal-card, .sublevel-grid .portal-card { zoom: 1.45; }
}
@media (max-width: 389px) {
  .portal-grid .portal-card, .sublevel-grid .portal-card { zoom: 1.35; }
}
@media (max-width: 349px) {
  .portal-grid .portal-card, .sublevel-grid .portal-card { zoom: 1.25; }
}

/* Hizmetler minyatürü: son satır alt kenara yapışmasın, yazı tipi farkında da taşmasın (09.10.2026) */
.service-sheet { height: auto; min-height: 166px; padding-bottom: 10px; }
.service-sheet > div { height: 44px; margin-top: 7px; }

/* Telefon kapanışı: çene footer'a değdiği anda kapanır; logo çenenin tam ortasında (09.10.2026) */
.jaw--runway .jaw-brand { top: 50%; }

/* Telefon ana sayfa: alt lacivert (footer) Hizmetler sayfasıyla aynı yükseklikten başlar (09.10.2026) */
@media (max-width: 700px) {
  body[data-page="home"] .portal-shell { padding-top: 36px; }
  body[data-page="home"] .city-band { margin-top: -24px; }
}

/* ===== Kapanış anı: logo parlar (telefonda sayfa o noktada kısa bir an durur: app.js) (09.10.2026) ===== */
.jaw-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.jaw-shine::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(61, 220, 132, 0), rgba(185, 245, 207, .75) 45%, rgba(255, 255, 255, .95) 50%, rgba(185, 245, 207, .75) 55%, rgba(61, 220, 132, 0)); opacity: 0; }
@keyframes jawShine { 0% { left: -70%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
@keyframes jawGlow {
  0% { transform: scale(1); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55), 0 0 0 0 rgba(61, 220, 132, 0); }
  35% { transform: scale(1.07); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55), 0 0 70px 22px rgba(61, 220, 132, .55); }
  100% { transform: scale(1); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55), 0 0 0 0 rgba(61, 220, 132, 0); }
}
@keyframes jawSloganGlow { 0%, 100% { text-shadow: none; } 40% { text-shadow: 0 0 24px rgba(185, 245, 207, .9); } }
.jaw.is-flash .jaw-logo { animation: jawGlow 1.3s cubic-bezier(.3, .7, .3, 1) .35s both; }
.jaw.is-flash .jaw-shine::before { animation: jawShine .9s ease-out .55s both; }
.jaw.is-flash .jaw-brand p { animation: jawSloganGlow 1.3s ease-out .45s both; }
@media (prefers-reduced-motion: reduce) {
  .jaw.is-flash .jaw-logo, .jaw.is-flash .jaw-shine::before, .jaw.is-flash .jaw-brand p { animation: none; }
}