/* Ziraat Bankası — İklim Geçiş Yol Haritası 2026 · Prototip v04 (v03 + dinamik/simetrik UI; v02 Framer yapısına sadık taban)
   Webflow eşlemesi:
   - :root değişkenleri  → Webflow Variables
   - etiket seçicileri   → "All …" tag stilleri (body, h1–h3, p, a, strong, img, ul, table, th, td)
   - .moreport-*         → her ögede TEK base class (+ gerekirse combo .is-*)
   - @media (max-width: 767px) → Webflow "Mobile landscape" breakpoint override'ı
   Soy (descendant) seçici, :nth-child, keyframes yok. ::backdrop yalnız prototip içindir. */

@font-face { font-family: "Gotham for ZB"; src: url("fonts/GothamforZB-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gotham for ZB"; src: url("fonts/GothamforZB-Book.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gotham for ZB"; src: url("fonts/GothamforZB-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Gotham for ZB"; src: url("fonts/GothamforZB-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Gotham for ZB"; src: url("fonts/GothamforZB-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* Marka — IDML swatch'ları */
  --color-ink: #2B2B2B;        /* r43g43b43 */
  --color-muted: #5C6166;
  --color-deep: #1C5360;       /* R28 G83 B96 */
  --color-cyan: #4AC6E0;       /* C61 M0 Y10 K0 — yalnız işaret/zemin */
  --color-teal: #007C99;       /* camgöbeğinin metin-güvenli tonu, 4.84:1 */
  --color-red: #E1030E;        /* R225 G3 B14 */
  --color-green: #70AD46;      /* R112 G173 B70 */
  --color-paper: #FFFFFF;
  --color-tint: #EFF8FB;
  --color-surface: #FAFAFA;
  --color-line: #E5E7EB;
  --color-head: #D6EFF6;   /* tablo başlık/sektör zemini */
  --color-rule: #888888;   /* prensip kartları arası bağlantı */
  /* Prensip ikonları — Framer kart renkleri (beyaz ikon üstünde) */
  --principle-green: #245815; --principle-teal: #1A5A4A; --principle-amber: #7A4213; --principle-slate: #5C6166;
  /* Isı haritası — IDML swatch'ları */
  --heat-1: #70AD46; --heat-2: #A8D18D; --heat-3: #F2DD8A; --heat-4: #E7A827; --heat-5: #E1030E;

  --font-base: "Gotham for ZB", Gotham, Montserrat, Arial, sans-serif;
  --space-section: clamp(4rem, 2rem + 5vw, 7rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
}

/* ---------- Etiket stilleri ---------- */
body { margin: 0; font-family: var(--font-base); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--color-ink); background-color: var(--color-paper); -webkit-font-smoothing: antialiased; }
h1 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; text-align: center; }
h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h3 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; }
a:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-deep); }
strong { font-weight: 700; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding-left: 1.1rem; }
table { width: 100%; border-collapse: separate; border-spacing: 6px; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
th { padding: 0.875rem 1rem; border-radius: 6px; background-color: var(--color-head); color: var(--color-deep); font-weight: 700; text-align: left; vertical-align: middle; }
td { padding: 0.875rem 1rem; border-radius: 6px; background-color: var(--color-tint); text-align: left; vertical-align: middle; }

/* ---------- Yerleşim ---------- */
.moreport-skip-link { position: absolute; top: -4rem; left: 1rem; z-index: 20; padding: 0.5rem 1rem; border-radius: 6px; background-color: var(--color-paper); color: var(--color-deep); font-weight: 700; }
.moreport-skip-link:focus { top: 1rem; }

.moreport-header { position: absolute; top: 0; right: 0; left: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; box-sizing: border-box; max-width: 75rem; margin-right: auto; margin-left: auto; padding: 1.5rem var(--gutter); }
.moreport-logo { display: block; width: auto; height: 3rem; margin-right: auto; margin-left: auto; }

.moreport-container { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 75rem; margin-right: auto; margin-left: auto; padding-right: var(--gutter); padding-left: var(--gutter); }
.moreport-container.is-narrow { max-width: 60rem; }

.moreport-section { position: relative; overflow: hidden; padding-top: var(--space-section); padding-bottom: var(--space-section); }
.moreport-section.is-tint { background-color: var(--color-tint); }
.moreport-section.is-dark { background-color: #0E2A30; color: var(--color-paper); }
.moreport-section.is-compact { padding-top: 2rem; padding-bottom: 2rem; }

.moreport-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.moreport-grid.is-bottom { align-items: end; }
.moreport-grid.is-even { align-items: stretch; }
.moreport-grid.is-apart { margin-top: calc(var(--space-section) - 1.25rem); }   /* yığın aralığıyla birlikte tam bölüm payı */
.moreport-grid.is-tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0.5rem; }
.moreport-stack { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.moreport-stack.is-center { align-items: center; text-align: center; }
.moreport-stack.is-close { gap: 0.375rem; }
.moreport-stack.is-tight { gap: 0.5rem; text-align: center; }   /* ısı haritası: eşit aralık, ortalı sınıf adları */
.moreport-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0; padding: 0; list-style: none; }
.moreport-cluster.is-between { flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; }
.moreport-cluster.is-timeline { position: relative; z-index: 2; flex: 1 1 auto; flex-wrap: nowrap; align-items: flex-end; gap: var(--gap); min-height: 0; padding-right: max(var(--gutter), calc((100% - 75rem) / 2 + var(--gutter))); padding-left: max(var(--gutter), calc((100% - 75rem) / 2 + var(--gutter))); overflow-x: auto; }

/* ---------- Yolculuk: sabitlenen sahnede scroll ile ilerleyen kartlar ---------- */
.moreport-section.is-flow { overflow: visible; }
.moreport-pin { position: relative; }
.moreport-pin-stage { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1.25rem; box-sizing: border-box; height: 100vh; height: 100svh; padding-top: 2rem; padding-bottom: 2rem; }

/* ---------- Kaydırmalı video hikâyesi (sticky 100vh paneller) ---------- */
.moreport-story { position: relative; }
.moreport-panel { position: sticky; top: 0; display: flex; align-items: flex-end; box-sizing: border-box; height: 100vh; height: 100svh; padding-bottom: clamp(2rem, 1rem + 4vw, 4rem); overflow: hidden; background-color: #000; color: var(--color-paper); }
.moreport-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; }
.moreport-shade.is-veil { background-image: linear-gradient(rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 55%); }
.moreport-shade.is-left { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 75%); }
.moreport-panel-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.25rem; }
.moreport-panel-content.is-baked { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Metin ---------- */
.moreport-title { margin-bottom: 1.25rem; }   /* bölüm başlığı: içerikle toplam 2.5rem (40px) aralık */
.moreport-display { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 2.875rem); font-weight: 900; line-height: 1.1; }
.moreport-lead { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.45; }
.moreport-meta { font-size: 0.875rem; line-height: 1.5; color: var(--color-muted); }
.moreport-tag { align-self: center; padding: 0.75rem 1.5rem; border: 1px solid var(--color-line); border-radius: 12px; background-color: var(--color-paper); color: var(--color-deep); font-size: 1.125rem; font-weight: 700; line-height: 1.3; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.moreport-meta.is-pill { align-self: center; padding: 0.375rem 1.5rem; border: 1px solid #D8D8D8; border-radius: 999px; background-color: #F8F8F8; color: #555555; }
.moreport-figure-number { font-size: 2.25rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--color-teal); }
.moreport-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Kontroller ---------- */
.moreport-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0.625rem 1.5rem; border: 0; border-radius: 999px; background-color: var(--color-paper); color: var(--color-deep); font-family: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease; }
.moreport-button:hover { background-color: var(--color-head); }
.moreport-button:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-deep); }
.moreport-button:disabled { opacity: 0.35; cursor: default; }
.moreport-button.is-solid { background-color: var(--color-cyan); font-size: 1.1875rem; font-weight: 700; }
.moreport-button.is-icon { width: 44px; padding: 0; font-size: 1.5rem; font-weight: 400; }

/* ---------- Kartlar ve görseller ---------- */
.moreport-card { display: flex; flex-direction: column; gap: 1rem; box-sizing: border-box; padding: 2rem; overflow: hidden; border: 1px solid var(--color-line); border-radius: 16px; background-color: var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); color: var(--color-ink); text-align: left; }
.moreport-card.is-center { flex: 1 1 auto; text-align: center; }
.moreport-card.is-row { flex-direction: row; align-items: center; gap: 1.5rem; }   /* ikon solda, metin sağında */
.moreport-card.is-float { justify-self: end; width: min(22rem, 100%); max-height: calc(100vh - 5rem); max-height: calc(100svh - 5rem); gap: 0.75rem; overflow-y: auto; }
.moreport-card.is-wide { width: min(30rem, 100%); }
.moreport-card.is-half { width: calc(50% - var(--gap) / 2); min-width: min(18rem, 100%); }   /* ızgara kolonuyla birebir */
.moreport-card.is-green { border-color: transparent; background-color: var(--principle-green); color: var(--color-paper); }
.moreport-card.is-teal { border-color: transparent; background-color: var(--principle-teal); color: var(--color-paper); }
.moreport-card.is-amber { border-color: transparent; background-color: var(--principle-amber); color: var(--color-paper); }
.moreport-card.is-slate { border-color: transparent; background-color: var(--principle-slate); color: var(--color-paper); }
.moreport-card.is-step { flex: 0 0 22rem; min-height: 0; max-height: 100%; overflow-y: auto; transition: min-height 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }

.moreport-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 12px; background-color: var(--color-paper); }
.moreport-icon.is-badge { position: relative; z-index: 1; width: 5.5rem; height: 5.5rem; margin: -3rem auto 0; border: 4px solid var(--color-surface); border-radius: 50%; background-color: var(--color-green); }

.moreport-link { display: flex; align-items: center; justify-content: center; height: 2rem; }
.moreport-link.is-label { height: 3.5rem; background-image: linear-gradient(var(--color-rule), var(--color-rule)); background-position: center; background-repeat: no-repeat; background-size: 2px 100%; }

.moreport-media { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; }
.moreport-media.is-bleed { width: calc(100% + 4rem); max-width: none; margin: -2rem -2rem 0; border-radius: 0; }
.moreport-media.is-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.moreport-media.is-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; aspect-ratio: auto; border-radius: 0; }
.moreport-media.is-anchor { align-self: end; margin-bottom: calc(-1 * var(--space-section)); }
.moreport-media.is-portrait { width: auto; max-height: min(88vh, 46rem); aspect-ratio: auto; object-fit: contain; border-radius: 0; margin-right: auto; margin-left: auto; }

/* ---------- Grafik: sütun çiftleri (24px, veri ucunda 4px yuvarlak, taban kare) ---------- */
.moreport-columns { display: flex; flex: none; align-items: flex-end; gap: 1.25rem; height: 12rem; }
.moreport-columns.is-compact { gap: 0.75rem; height: 5.25rem; }
.moreport-column { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 0.375rem; height: 100%; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.moreport-bar { display: block; flex-shrink: 0; width: 1.5rem; height: 0; border-radius: 4px 4px 0 0; background-color: var(--color-red); transition: height 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.moreport-bar.is-target { background-color: var(--color-cyan); transition-delay: 450ms; }
.moreport-swatch { display: inline-block; width: 1rem; height: 0.75rem; margin-right: 0.5rem; border-radius: 2px; vertical-align: -1px; background-color: var(--color-red); }
.moreport-swatch.is-target { background-color: var(--color-cyan); }

.moreport-table-wrap { overflow-x: auto; }
.moreport-table-wrap:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.moreport-cell { text-align: center; }
.moreport-cell.is-scope { background-color: var(--color-head); color: var(--color-deep); font-weight: 700; }
.moreport-cell.is-target { background-color: var(--color-cyan); color: var(--color-deep); font-size: 1.375rem; font-weight: 900; }

/* ---------- Zaman çizelgesi ve ısı haritası ---------- */
.moreport-heat-item { padding: 0.625rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; line-height: 1.3; text-align: center; color: var(--color-ink); }
.moreport-heat-item.is-1 { background-color: var(--heat-1); }
.moreport-heat-item.is-2 { background-color: var(--heat-2); }
.moreport-heat-item.is-3 { background-color: var(--heat-3); }
.moreport-heat-item.is-4 { background-color: var(--heat-4); }
.moreport-heat-item.is-5 { background-color: var(--heat-5); color: var(--color-paper); }

/* ---------- Diyaloglar (GM mesajı: tam ekran, bkz. .moreport-message) ---------- */
.moreport-dialog { box-sizing: border-box; width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 4rem 2.5rem 2.5rem; border: 0; border-radius: 16px; background-color: var(--color-paper); color: var(--color-ink); }
.moreport-dialog::backdrop { background-color: rgba(0, 0, 0, 0.7); }
.moreport-dialog.is-film { width: min(60rem, calc(100vw - 2rem)); padding: 4.5rem 0 0; overflow: visible; border-radius: 12px; background-color: #000000; color: var(--color-paper); }
.moreport-dialog.is-full { width: 100vw; max-width: none; height: 100vh; height: 100svh; max-height: none; margin: 0; padding: 0; overflow: hidden; border-radius: 0; }

/* ---------- Mobile landscape ve altı (Webflow "small" breakpoint) ---------- */
@media screen and (max-width: 767px) {
  .moreport-header { grid-template-columns: 1fr; justify-items: start; }
  .moreport-panel { position: relative; display: block; height: auto; }
  .moreport-media.is-video { position: relative; aspect-ratio: 16 / 9; height: auto; }
  .moreport-panel-content { padding-top: 1.5rem; }
  .moreport-card.is-float { justify-self: stretch; width: auto; max-height: none; }
  .moreport-media.is-anchor { margin-bottom: 0; }
  .moreport-cluster.is-between { flex-wrap: wrap; }
  .moreport-pin-stage { position: static; display: block; height: auto; padding: 0; }
  .moreport-cluster.is-timeline { flex-direction: column; align-items: stretch; overflow-x: visible; }
  .moreport-card.is-step { flex: none; max-height: none; }
        }


/* ================================================================
   Hareket ve tarayici yuzeyleri (2026-09-14)
   Metin, isaretleme ve renk token'lari degismedi; yalniz sunum.
   ================================================================ */

/* Sayan rakamlar sabit genislikli basamak kullanir: sayarken satir zipmaz. */
.moreport-figure-number,
.moreport-column strong,
.moreport-table-wrap table { font-variant-numeric: tabular-nums; }

/* Basamakli kart yuksekligi yerlesimi tetikler; etkisini kartin icine hapset. */
.moreport-card.is-step { contain: layout paint; }

/* Tarayicinin kendi yuzeyleri de tasarima ait. */
::selection { background-color: var(--color-head); color: var(--color-ink); }
.moreport-section.is-dark ::selection,
.moreport-panel ::selection { background-color: var(--color-teal); color: var(--color-paper); }
.moreport-table-wrap,
.moreport-cluster.is-timeline,
.moreport-card.is-step { scrollbar-color: var(--color-teal) var(--color-head); scrollbar-width: thin; }

/* <dialog>: tam ekran pano artik yerine oturarak gelir, aniden belirmez.
   @starting-style desteklemeyen tarayicida bugunku davranis aynen surer. */
.moreport-dialog {
  opacity: 1;
  transform: none;
  transition: opacity 240ms ease,
              transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              overlay 320ms allow-discrete,
              display 320ms allow-discrete;
}
.moreport-dialog:not([open]) { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
.moreport-dialog.is-full:not([open]) { transform: translateY(1.5rem); }
@starting-style {
  .moreport-dialog[open] { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
  .moreport-dialog.is-full[open] { transform: translateY(1.5rem); }
}
.moreport-dialog::backdrop {
  opacity: 1;
  transition: opacity 240ms ease, overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.moreport-dialog:not([open])::backdrop { opacity: 0; }
@starting-style { .moreport-dialog[open]::backdrop { opacity: 0; } }

/* ---------- Hareket azaltma: uzamsal hareket gider, anlam kalir ---------- */
@media (prefers-reduced-motion: reduce) {
  .moreport-bar { transition: none; }
  .moreport-card.is-step { transition: none; }
  .moreport-dialog,
  .moreport-dialog::backdrop { transition: opacity 120ms ease; }
  .moreport-dialog:not([open]),
  .moreport-dialog.is-full:not([open]) { transform: none; }
}


/* ================================================================
   Yerlesim ritmi ve olculen kusurlar (2026-09-14)
   Token'lar, metin ve isaretleme degismedi.
   ================================================================ */

/* Bosluk olceginde orta kademe yoktu: 20 · 32 sonrasi dogrudan 104'e atliyordu.
   4 tabanli ara basamaklar eklendi; mevcut degerler oldugu gibi korunuyor. */
:root {
  --space-3xs: 0.25rem;   /*  4 */
  --space-2xs: 0.5rem;    /*  8 */
  --space-xs: 0.75rem;    /* 12 */
  --space-sm: 1.25rem;    /* 20 - sayfanin mevcut ritmi */
  --space-md: 2rem;       /* 32 */
  --space-lg: 3.5rem;     /* 56 - eksik kademe */
  --space-xl: 5rem;       /* 80 - eksik kademe */
  --space-section-wide: clamp(5rem, 2.5rem + 6.5vw, 9rem);
  --space-section-dense: clamp(3rem, 1.5rem + 4vw, 5.5rem);
}

/* Bolum ritmi: zeminler zaten anlatiyi bolumluyordu, bosluk onu takip etmiyordu.
   Koyu bolumler sayfanin nefes noktalari (GM mesaji, Yol Haritasi, Izleme);
   duz zeminli veri bolumleri daha sik durur, veri blok olarak okunur. */
.moreport-section.is-dark {
  padding-top: var(--space-section-wide);
  padding-bottom: var(--space-section-wide);
}
.moreport-section:not(.is-dark):not(.is-tint):not(.is-compact):not(.is-flow) {
  padding-top: var(--space-section-dense);
  padding-bottom: var(--space-section-dense);
}

/* Baslik ile onu izleyen icerik arasi, gruplar arasindan daha sikidir:
   basligi kendi grubuna baglar. */
.moreport-stack.is-center > :is(h2, h3) { margin-bottom: calc(var(--space-sm) * -0.4); }

/* Dialog kapatma dugmesi: site ust cubuguyla ayni sinifi paylastigi icin
   <=767px'te sola dusup basligin ustune biniyordu (v02'den beri).
   Dialog basligi her genislikte saga yaslanir. */
.moreport-dialog .moreport-header {
  grid-template-columns: 1fr;
  justify-items: end;
}


/* ================================================================
   v04 · Dinamik ve simetrik UI (2026-09-14)
   Token'lar, metinler ve veriler değişmedi. Webflow taşınabilirliği bağlayıcı
   olmadığından (PRODUCT.md) soy seçici, ::after ve @keyframes kullanıldı.
   Ana fikirler: merkez ekseni (hero, başlık çizgisi, 2 eşit kolonlu paneller,
   4 eşit kolonlu prensip basamağı), görününce beliren ögeler (data-reveal),
   sayfa ilerleme çubuğu, hikâye rayı, yolculuk ilerleme çizgisi.
   ================================================================ */

:root {
  --radius-card: 20px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(28, 83, 96, 0.06);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(28, 83, 96, 0.14);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Sayfa ilerleme çubuğu (site.js ekler) ---------- */
.moreport-progress { position: fixed; top: 0; left: 0; z-index: 30; width: 100%; height: 3px; background-color: var(--color-cyan); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Görününce beliren ögeler (site.js data-reveal atar, kardeşler basamaklı) ----------
   2026-09-22: yalnız opaklık. translateY(1.5rem) kaldırıldı — ekran okuyucunun sanal imleci
   bir bloğa varınca tarayıcı onu görünüme kaydırıyor, geçiş tetikleniyor ve okunan blok odak
   anından SONRA yukarı kayıyordu (ölçüm: rect.top 425,1 → 401,1 px). Hareket azaltma bloğu
   (bkz. "Hareket azaltma") yerinde kalır. */
[data-reveal] { opacity: 0; transition: opacity 0.6s ease; transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-in { opacity: 1; }

/* ---------- Bölüm başlığı: ortalı, altında simetrik camgöbeği çizgi ---------- */
.moreport-stack.is-center > .moreport-title::after { content: ""; display: block; width: 3rem; height: 4px; margin: 1.25rem auto 0; border-radius: 2px; background-color: var(--color-cyan); }
.moreport-stack.is-center > .moreport-lead { max-width: 52rem; }

/* ---------- Kartlar: tek köşe, yumuşak gölge, hover'da hafif yükselme ---------- */
.moreport-card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: opacity 0.6s ease, transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.moreport-card:not(.is-step):hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); transition-delay: 0ms; }
.moreport-card.is-center > .moreport-stack { align-items: center; }
.moreport-icon.is-badge { border-color: var(--color-paper); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }

/* ---------- Düğmeler ---------- */
.moreport-button { transition: background-color 0.2s ease, transform 0.3s var(--ease-out), box-shadow 0.3s ease; }
.moreport-button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.moreport-button.is-solid:hover { background-color: #7AD6E8; }

/* ---------- Hero: merkez ekseni, ortalı metin ve düğmeler, kaydırma işareti ---------- */
.moreport-story > .moreport-panel:first-child { align-items: center; padding-bottom: 0; }
.moreport-story > .moreport-panel:first-child .moreport-shade { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.55) 100%); }
.moreport-story > .moreport-panel:first-child .moreport-stack { align-items: center; gap: 2rem; text-align: center; }
.moreport-story > .moreport-panel:first-child .moreport-display { max-width: 22ch; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.moreport-story > .moreport-panel:first-child .moreport-cluster { justify-content: center; }
.moreport-story > .moreport-panel:first-child .moreport-container { opacity: 0; transform: translateY(2rem); transition: opacity 0.8s ease, transform 1.1s var(--ease-out); }
.moreport-story > .moreport-panel:first-child.is-active .moreport-container { opacity: 1; transform: none; }
.moreport-story > .moreport-panel:first-child::after { content: ""; position: absolute; bottom: 2rem; left: 50%; z-index: 2; width: 0.75rem; height: 0.75rem; margin-left: -0.5rem; border-right: 2px solid rgba(255, 255, 255, 0.85); border-bottom: 2px solid rgba(255, 255, 255, 0.85); transform: rotate(45deg); animation: moreport-cue 1.8s ease-in-out infinite; }
@keyframes moreport-cue { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.9; } 50% { transform: translateY(0.5rem) rotate(45deg); opacity: 0.4; } }

/* ---------- Sektör panelleri: metin viewport yüksekliğinde dikey ORTALI; grafik kartı container'ın EN SAĞ ALTINA yapışık (alt boşluk 0, alt köşeler düz), %25 küçük ---------- */
.moreport-story > .moreport-panel:not(:first-child) { align-items: stretch; padding-top: 0; padding-bottom: 0; }
.moreport-story > .moreport-panel:not(:first-child) > .moreport-container { display: flex; flex-direction: column; }
.moreport-grid.is-bottom { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.moreport-panel-content { align-self: center; }
.moreport-card.is-float { align-self: end; zoom: 0.75; }
.moreport-panel-content { justify-self: start; max-width: 34rem; max-height: calc(100vh - 8rem); max-height: calc(100svh - 8rem); overflow-y: auto; }
.moreport-panel-content h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.moreport-panel-content .moreport-lead { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem); line-height: 1.55; }
/* Grafik kartı tipografisi v02 ile aynı: 22rem (tarım 30rem) × zoom .75, üst köşeler 16px / alt köşeler DÜZ (tabana yapışık), ince gölge, 18px başlık, hover'da yükselmez */
.moreport-card.is-float { justify-self: end; width: min(22rem, 100%); border-radius: 16px 16px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.moreport-card.is-float.is-wide { width: min(30rem, 100%); }
.moreport-card.is-float h3 { font-size: 1.125rem; letter-spacing: 0; }
.moreport-card.is-float:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.moreport-panel .moreport-panel-content { opacity: 0; transform: translateY(2rem); transition: opacity 0.7s ease, transform 1s var(--ease-out); }
.moreport-panel .moreport-card.is-float { opacity: 0; transition: opacity 0.7s ease 0.15s; }   /* kart yerinden oynamaz, yalnız belirir */
.moreport-panel.is-active .moreport-panel-content, .moreport-panel.is-active .moreport-card.is-float { opacity: 1; transform: none; }

/* ---------- Hikâye rayı: 5 panel için sağda dikey noktalar (site.js üretir) ---------- */
.moreport-rail { position: fixed; top: 50%; right: 1.25rem; z-index: 10; display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; transform: translateY(-50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.moreport-rail.is-visible { opacity: 1; pointer-events: auto; }
.moreport-rail button { position: relative; display: block; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background-color: transparent; cursor: pointer; }
.moreport-rail button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-sizing: border-box; transition: transform 0.3s var(--ease-out), background-color 0.3s ease, border-color 0.3s ease; }
.moreport-rail button[aria-current="true"]::after { border-color: var(--color-cyan); background-color: var(--color-cyan); transform: scale(1.4); }
.moreport-rail button:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }

/* ---------- Genel Müdür: iki eşit kolon, metin dikeyde ortalı ---------- */
.moreport-section[aria-labelledby="gm-teaser"] .moreport-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.moreport-section[aria-labelledby="gm-teaser"] .moreport-grid > .moreport-stack { align-self: center; max-width: 34rem; }
.moreport-section[aria-labelledby="gm-teaser"] .moreport-media.is-anchor { margin-bottom: calc(-1 * var(--space-section-wide)); }

/* ---------- GM tam mesajı: sol metin kutusu kendi içinde kayar, sağda portre tabana hizalı ---------- */
.moreport-message { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--gap); box-sizing: border-box; width: 100%; max-width: 75rem; height: 100vh; height: 100svh; margin: 0 auto; padding: 6.5rem var(--gutter) 0; }
.moreport-message-text { align-self: stretch; min-height: 0; padding-right: 1rem; padding-bottom: 3rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--color-teal) var(--color-head); scrollbar-width: thin; }
.moreport-message-text { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); }
.moreport-message-text .moreport-lead { font-size: 1rem; line-height: 1.6; }
.moreport-message-text h2 { font-size: clamp(1.125rem, 0.825rem + 1.125vw, 1.5rem); }   /* GM iç başlık %25 küçük (operatör 2026-09-14) */   /* GM mektubu site geneli paragraf boyutunda (operatör 2026-09-14) */
.moreport-message-text:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: -3px; border-radius: 8px; }
.moreport-message > .moreport-media.is-portrait { justify-self: center; align-self: end; max-height: calc(100vh - 7rem); max-height: calc(100svh - 7rem); }

/* ---------- Tablo: kart kabı, satır vurgusu ---------- */
.moreport-table-wrap { padding: 0.5rem; border: 1px solid var(--color-line); border-radius: var(--radius-card); background-color: var(--color-paper); box-shadow: var(--shadow-card); }
tbody td, tbody th { transition: background-color 0.25s ease; }
tbody tr:hover > td:not(.is-target):not(.is-scope) { background-color: var(--color-head); }

/* ---------- Yolculuk: şerit altında ilerleme çizgisi (site.js üretir) ---------- */
.moreport-journey-progress { position: relative; z-index: 2; flex: none; height: 4px; opacity: 0.75; margin: 0 max(var(--gutter), calc((100% - 75rem) / 2 + var(--gutter))); border-radius: 2px; background-color: rgba(255, 255, 255, 0.35); overflow: hidden; }
.moreport-journey-progress::after { content: ""; display: block; width: 100%; height: 100%; background-color: var(--color-paper); transform: scaleX(var(--journey-progress, 0)); transform-origin: 0 50%; }
.moreport-card.is-step { border-radius: var(--radius-card); }
.moreport-card.is-step ul { font-size: 0.875rem; line-height: 1.5; }   /* madde puntosu bir kademe küçük (operatör 2026-09-14) */
.moreport-card.is-step:last-child { flex-basis: 36rem; }   /* 2025: dokuz madde kendi içinde kaymasın diye kart geniş */
.moreport-cluster.is-timeline { scrollbar-color: rgba(255, 255, 255, 0.75) rgba(255, 255, 255, 0.2); }   /* şerit kaydırma çubuğu da %75 beyaz */

/* ---------- Prensipler: dikey liste; kart ve bağlantılar görününce yukarıdan aşağı sırayla belirir (site.js) ---------- */
.moreport-link { transition: opacity 0.5s ease, transform 0.7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }

/* ---------- Sektörel hedefler: 3 × 2 eşit ızgara ---------- */
@media (min-width: 64rem) { .moreport-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Isı haritası: sütun başlıkları, hücre hover ---------- */
.moreport-grid.is-tight > .moreport-stack.is-tight > p { padding-bottom: 0.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.25); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.moreport-heat-item { transition: transform 0.3s var(--ease-out); }
.moreport-heat-item:hover { transform: scale(1.04); }

/* ---------- Altbilgi ortalı ---------- */
footer .moreport-cluster.is-between { justify-content: center; gap: 1rem 3rem; }

@media screen and (max-width: 767px) {
  /* Mobilde hero: üst çubuk akışa girer (video 16:9'da başlığın üstüne biniyordu), her şey ortalı */
  .moreport-story > .moreport-panel:first-child { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 3rem; }
  .moreport-story > .moreport-panel:first-child > .moreport-header { position: relative; order: -1; justify-items: center; padding-top: 1.25rem; padding-bottom: 0; text-align: center; }
  .moreport-story > .moreport-panel:first-child > .moreport-header .moreport-cluster { justify-content: center; }
  .moreport-story > .moreport-panel:first-child::after { display: none; }
  .moreport-story > .moreport-panel:not(:first-child) { padding-top: 0; padding-bottom: 2rem; }
  .moreport-card.is-float { zoom: 1; border-radius: 16px; }
  .moreport-story > .moreport-panel:not(:first-child) > .moreport-container { display: block; }
  .moreport-grid.is-bottom { grid-template-columns: 1fr; }
  .moreport-panel-content { max-width: none; max-height: none; overflow: visible; }
  .moreport-card.is-float { justify-self: stretch; }
  .moreport-section[aria-labelledby="gm-teaser"] .moreport-grid { grid-template-columns: 1fr; }
  .moreport-journey-progress { display: none; }
  .moreport-dialog.is-full { overflow-y: auto; }
  .moreport-message { grid-template-columns: 1fr; height: auto; padding-top: 7rem; }
  .moreport-message-text { padding-right: 0; padding-bottom: 1rem; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .moreport-section[aria-labelledby="gm-teaser"] .moreport-media.is-anchor { margin-bottom: 0; }
}
/* ≤1100px: ray görsel olarak gizli ama display:none DEĞİL (2026-09-18) — ekran okuyucu ve
   klavye için ağaçta kalır; odak alınca görünür (bkz. "Ray: gizliyken de okunur"). */
@media screen and (max-width: 1100px) { .moreport-rail, .moreport-rail.is-visible { opacity: 0; pointer-events: none; } }

/* ---------- Hareket azaltma: her şey yerinde ve görünür ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .moreport-link, .moreport-panel .moreport-panel-content, .moreport-panel .moreport-card.is-float, .moreport-story > .moreport-panel:first-child .moreport-container { opacity: 1; transform: none; transition: none; }
  .moreport-story > .moreport-panel:first-child::after { animation: none; }
  .moreport-card, .moreport-button, .moreport-heat-item, .moreport-rail button::after { transition: none; }
  .moreport-card:not(.is-step):hover, .moreport-heat-item:hover, .moreport-button:hover { transform: none; }
}


/* ================================================================
   Revizeler (2026-09-15) — müşteri kontrol notları rev_1409_co / rev_ae
   Renk ve tipografi token'ları değişmedi; yalnız kırılma ve hizalama.
   ================================================================ */

/* rev 1-3 · "(2050 Net Sıfır)" parantezi bölünmez: sığmazsa bütün hâlde alt satıra iner. */
.moreport-nowrap { white-space: nowrap; }

/* rev 6 · Özet tabloda emisyon kapsamı tek satırda kalır (tablo zaten yatay kayar). */
.moreport-cell.is-scope { white-space: nowrap; }

/* rev 4 · Tarım kartı: yüzde yanındaki sütun grafiğiyle aynı hizada,
   her ürün başlığı ince bir çizgiyle ayrılır (basılı rapordaki ayrım). */
.moreport-cluster.is-between.is-middle { align-items: center; }
.moreport-card.is-wide > h3 { margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }

/* rev 9 · Isı haritası eksen adları: dikey "Risk Seviyesi", yatay "Risk Sınıfı". */
.moreport-heat { display: flex; align-items: stretch; gap: 0.75rem; }
.moreport-heat-plot { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.5rem; min-width: 0; }
.moreport-heat-axis { font-size: 0.8125rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.moreport-heat-axis.is-x { text-align: center; }
.moreport-heat-axis.is-y { display: flex; flex: none; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); }

@media screen and (max-width: 767px) {
  .moreport-heat { flex-direction: column; gap: 0.5rem; }
  .moreport-heat-axis.is-y { writing-mode: horizontal-tb; transform: none; text-align: center; }
}


/* ================================================================
   Erişilebilirlik düzeltmeleri (2026-09-15)
   Renk ve tipografi token'ları DEĞİŞMEDİ. Değişen: video perdelerinin
   alfası (metnin durduğu banda göre), odak halkalarının ikinci tonu,
   ray görünürlüğü ve kayan bölgelerin odak biçimi.
   Ölçüm dayanağı: beyaz metin, video pikseli en kötü hâlde bembeyaz.
   ================================================================ */

/* --- Perdeler metne göre yazılır (WCAG 1.4.3) ---------------------
   Hero metni dikeyde ORTADA duruyordu; perde tam orada en zayıf noktasındaydı
   (%12 → en kötü 1,32:1). Perdenin orta bandı metnin bandına taşındı ve metin
   kutusunun arkasına kendi koruma katmanı kondu.
   0,30 taban + 0,40 elips = toplam 0,58 → en kötü 5,33:1. */
.moreport-story > .moreport-panel:first-child .moreport-shade {
  background-image:
    radial-gradient(ellipse 42rem 22rem at 50% 50%,
      rgba(0, 0, 0, 0.40) 0%,
      rgba(0, 0, 0, 0.40) 62%,
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.30) 22%,
      rgba(0, 0, 0, 0.30) 78%,
      rgba(0, 0, 0, 0.55) 100%);
}

/* Sektör panellerinde (ve GM tanıtımında) metin sütunu kabın ~%48'ine kadar
   uzanıyor; perde %45'te 0,55'e, %48'de 0,50'ye düşüyordu → 3,90:1.
   Perde metnin bittiği yere kadar taşındı: %48'de 6,69:1, %55'te 6,19:1.
   Sağdaki grafik kartı ve GM portresi %85 sonrasında, perdesiz kalır. */
.moreport-shade.is-left {
  background-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.62) 55%,
    rgba(0, 0, 0, 0) 85%);
}

/* --- Ray: gizliyken de okunur, odaklanınca görünür (WCAG 1.3.1 / 2.1.1 / 2.4.7) ---
   2026-09-15: opacity:0 ögeyi sekme sırasından çıkarmadığı için visibility:hidden
   konmuştu. 2026-09-18 denetimi: visibility ögeyi erişilebilirlik ağacından da
   çıkarıyor; hikâye ekranda değilken ekran okuyucu rayı yön tuşlarıyla okuyamıyordu.
   Şimdi ray ağaçta hep durur (DOM'da hikâyenin önünde, bkz. site.js 6c); ekranda
   görünmediği anda odak alırsa :focus-within onu görünür kılar — görünmez odak yok. */
.moreport-rail:focus-within { opacity: 1; pointer-events: auto; }
/* Hikâyenin dışında (açık zemin) beyaz noktalar kaybolur: odaktayken koyu hap zemin.
   Gölgeyle büyütülür, padding yok — rayın ölçüsü ve konumu değişmez. */
.moreport-rail:focus-within:not(.is-visible) { border-radius: 999px; background-color: var(--color-deep); box-shadow: 0 0 0 0.375rem var(--color-deep); }
@media screen and (max-width: 1100px) {
  .moreport-rail:focus-within, .moreport-rail.is-visible:focus-within { opacity: 1; pointer-events: auto; border-radius: 999px; background-color: var(--color-deep); box-shadow: 0 0 0 0.375rem var(--color-deep); }
}

/* --- Odak halkası her zeminde görünür (WCAG 1.4.11 / 2.4.11) ------
   Camgöbeği beyaz üstünde 2,01:1 kalıyor. Düğme ve bağlantılarda zaten ikinci
   halka (--color-deep, 8,55:1) vardı; aşağıdaki üç yerde yoktu. Çift ton:
   açık zeminde koyu halka, koyu zeminde camgöbeği halka taşır. */
.moreport-table-wrap:focus-visible {
  box-shadow: 0 0 0 5px var(--color-deep), var(--shadow-card);
}
.moreport-rail button:focus-visible {
  box-shadow: 0 0 0 5px var(--color-deep);
}
/* GM metin kutusu mask-image taşır: dışarıya çizilen halka kırpılır → içeriden. */
.moreport-message-text:focus-visible {
  outline: 3px solid var(--color-deep);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--color-cyan);
}

/* --- Kayan bölgeler klavyeyle erişilir (WCAG 2.1.1) ---------------
   Panel metni ve yolculuk basamakları kendi içlerinde kayıyor ama odak
   alamıyordu (HTML'de tabindex="0" eklendi). Her ikisi de kırpan bir kabın
   içinde (overflow / contain: paint), o yüzden halka içeriden çizilir. */
.moreport-panel-content:focus-visible,
.moreport-card.is-step:focus-visible {
  outline: 3px solid var(--color-deep);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--color-cyan);
  border-radius: 8px;
}
.moreport-card.is-step:focus-visible { border-radius: var(--radius-card); }

/* Panel metni etkin panele kadar opacity:0 duruyor. Artık odak alabildiği için
   ray'daki hatanın aynısını doğurmasın: odaklanan blok her hâlde görünür olur. */
/* :focus-visible degil :focus — fare/program odaginda da gorunur olmali,
   yoksa opacity:0 iken odak alan blok ray hatasinin aynisini dogurur. */
.moreport-panel .moreport-panel-content:focus { opacity: 1; transform: none; }


/* ---------- Arka plan videoları: oynat/duraklat (WCAG 2.2.2, 2026-09-15) ----------
   Operatör kararı 2026-09-14'te düğmeyi kaldırmıştı; 2026-09-15'te küçük ikon düğme
   olarak geri kondu. İkon burada çizilir (yeni dosya yok): duraklat = iki çubuk,
   oynat = üçgen. Renk `currentColor` — .moreport-button zaten beyaz zemin üstünde
   --color-deep taşıyor (8,55:1). */
.moreport-videos {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 31;
  /* 1px halka: parlak bir video karesinde beyaz hap zemine karisir, kenar kaybolur. */
  box-shadow: 0 0 0 1px var(--color-deep), 0 2px 12px rgba(0, 0, 0, 0.35);
  transition: opacity 0.25s ease, visibility 0s, background-color 0.2s ease;
}
.moreport-videos:hover { transform: none; box-shadow: 0 0 0 1px var(--color-deep), 0 2px 12px rgba(0, 0, 0, 0.45); }
.moreport-videos::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.875rem;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 0.25rem 100%;
}
.moreport-videos.is-paused::before {
  width: 0.8125rem;
  background-image: none;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Ekranda oynayabilecek video yokken gizlenir — ray ile aynı kural: visibility,
   çünkü opacity ögeyi sekme sırasından çıkarmaz. */
.moreport-videos.is-idle {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
@media (prefers-reduced-motion: reduce) {
  .moreport-videos { transition: none; }
  .moreport-videos.is-idle { transition: none; }
}


/* ================================================================
   Geliştirmeler (2026-09-15) — responsive denetiminin bulguları
   Renk token'ları değişmedi. Değişen: yalnız grafik kartının İÇİ
   (zoom 0.75'in altında kalan punto tabanı ve kısa ekranda yükseklik).
   ================================================================ */

/* Grafik kartı `zoom: .75` taşıyor: 0,875rem etiketler ekranda 10,5 px'e iniyordu.
   Kart boyutu ve tipografi ölçeği DEĞİŞMEDİ; yalnız kartın içindeki en küçük
   punto, zoom sonrası 12 px tabanını tutacak şekilde telafi edilir.
   Mobilde zoom zaten 1 olduğu için kural yalnız ≥768 px'te çalışır. */
@media screen and (min-width: 768px) {
  .moreport-card.is-float .moreport-meta,
  .moreport-card.is-float .moreport-column { font-size: 1rem; }   /* 16 × .75 = 12 px */
}

/* Kısa ekranda (1024×600, 1280×620) kartın altı kesiliyordu ve kart `aria-hidden`
   olduğu için klavyeyle kaydırılamıyor. Punto küçültmek yerine kartın kendi
   boşluğu ve sütun yüksekliği geri alınır. */
@media screen and (min-width: 768px) and (max-height: 760px) {
  .moreport-card.is-float { padding: 1.25rem; gap: 0.5rem; }
  .moreport-card.is-float .moreport-columns { height: 9rem; }
  .moreport-card.is-float .moreport-columns.is-compact { height: 4rem; }
  .moreport-card.is-float .moreport-stack { gap: 0.75rem; }
  /* Tarım kartı üç ürün taşıyor; ürün başlıklarının ayrım payı yarıya iner. */
  .moreport-card.is-float.is-wide > h3 { margin-top: 0; padding-top: 0.5rem; }
  .moreport-card.is-float .moreport-cluster { gap: 0.5rem 0.75rem; }
}

/* Film diyaloğu kısa ekranda kendi içinde kayıyordu (1024×600'de 104 px):
   video kaydırılacak değil, sığdırılacak bir şeydir. */
.moreport-dialog.is-film { max-height: calc(100vh - 2rem); }
.moreport-dialog.is-film .moreport-media {
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  background-color: #000000;
}