/* landing.css — Landing sayfası stilleri (eskiden HTML içine gömülüydü; ayrı dosyada tarayıcı
   önbelleğe alır, sayfaya her dönüşte yeniden inmez). Yorumlar şablondan taşındı. */
  body { font-family: 'Manrope', sans-serif; }
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
  :root { --animate-duration: 0.45s; }
  /* ─── Landing token'ları (sadece bu sayfa; global primary'ye dokunmaz) ─── */
  :root,
  [data-theme="light"] {
    --landing-nav-h: 76px;
    --landing-gutter: clamp(1rem, 6vw, 7rem);
    /* Ortak sayfa genişliği: hero metni + tüm bölümler aynı sol çizgide (navbar hariç, kenarlarda kalır) */
    --landing-max: 1600px;
    --landing-pad: clamp(2rem, 3vw, 2.5rem);
    /* Görsellerin uzanabileceği en geniş alan: ≤1920px'te ekranın kendisi, daha genişte ortada 1920px */
    --landing-frame: min(100%, 1920px);
    /* Navbar içerikten geniş: geniş ekranda en fazla 36 px (dar ekranda gutter ile aynı) */
    --landing-nav-gutter: min(var(--landing-gutter), 2.25rem);
    --landing-accent: #0e9f8c;
    --landing-accent-2: #17c3b2;
    --landing-surface: #e4ecec;
    /* Sayfa zemini: login (--portal-page) ile aynı mat ton; beyaz kartlar üstünde ayrışır */
    --landing-page: #e4ecec;
    --landing-page-2: #dbe6e6;
    /* Kart ve navbar: saf beyaz değil, portal kartlarıyla aynı mat ton (--portal-surface) */
    --landing-card: #eff4f4;
    --landing-nav-bg: color-mix(in oklab, #e4ecec 85%, transparent);
  }

  [data-theme="dark"] {
    --landing-accent: #1ec8b0;
    --landing-accent-2: #5eead4;
    --landing-surface: #001b20;
    --landing-page: var(--color-base-100);
    --landing-page-2: var(--color-base-200);
    --landing-card: var(--color-base-100);
    --landing-nav-bg: color-mix(in oklab, var(--color-base-100) 82%, transparent);
  }

  /* ─── Yazı ölçeği: 12 / 14 / 15 / 16 / 18 / 20 + açıklama ve bölüm başlığı (akışkan) ─── */
  :root {
    --fs-label: .75rem;
    --fs-meta: .875rem;
    --fs-body-sm: .9375rem;
    --fs-body: 1rem;
    --fs-title: 1.125rem;
    --fs-title-lg: 1.25rem;
    --fs-lead: clamp(1.0625rem, 1.15vw, 1.1875rem);
    --fs-h2: clamp(2.1rem, 3.2vw, 3rem);
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--landing-nav-h);
  }

  /* ─── Navbar ─── */
  .landing-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--landing-nav-h);
    /* Sayfa başında tamamen şeffaf: hero ile bütünleşir, ayrı bar gibi görünmez */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }

  /* Scroll sonrası: hafif opak zemin + blur, içerik üstünde okunur kalır */
  .landing-nav.is-scrolled {
    background: var(--landing-nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-color: color-mix(in oklab, var(--color-base-content) 7%, transparent);
  }

  .landing-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--landing-nav-gutter);
  }

  /* ─── MİS JES logo (partials/includes/_mis_jes_logo.html) ─── */
  .mis-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    line-height: 1;
  }

  .mis-logo-mark { width: 36px; height: 36px; flex-shrink: 0; }
  [id^="misLogoGrad"] stop:first-child { stop-color: var(--landing-accent); }
  [id^="misLogoGrad"] stop:last-child  { stop-color: var(--landing-accent-2); }
  [id^="misLogoBudGrad"] stop:first-child { stop-color: #f97316; }
  [id^="misLogoBudGrad"] stop:last-child  { stop-color: #fbbf24; }

  .mis-logo-text {
    font-size: 1.5rem;
    letter-spacing: -.02em;
    white-space: nowrap;
  }

  .mis-logo-text b { font-weight: 800; color: var(--color-base-content); }
  .mis-logo-text span { font-weight: 500; color: var(--landing-accent); }

  .landing-nav-links {
    display: none;
    align-items: center;
    gap: 2.5rem;
    font-size: .9rem;
    font-weight: 500;
  }

  .landing-nav-link {
    position: relative;
    padding: .4rem 0;
    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
    transition: color .2s ease;
  }

  .landing-nav-link:hover,
  .landing-nav-link.is-active { color: var(--color-base-content); }

  .landing-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.35rem;
    height: 2px;
    border-radius: 2px;
    background: var(--landing-accent);
    transform: scaleX(0);
    transition: transform .25s ease;
  }

  .landing-nav-link.is-active::after { transform: scaleX(1); }

  .landing-nav-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
  }

  .landing-nav-user {
    display: none;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }

  /* Giriş yapmış kullanıcı: hesap kontrolü + dropdown (landing değişkenleriyle; portal CSS'i yüklenmez) */
  .landing-account { position: relative; display: none; }

  .landing-account-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 44px;
    padding: 0 .65rem 0 .3rem;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    border-radius: 9999px;
    background: color-mix(in oklab, var(--landing-card) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-base-content);
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease;
  }

  .landing-account-btn:hover { border-color: color-mix(in oklab, var(--landing-accent) 45%, transparent); }
  .landing-account-btn:focus-visible,
  .landing-account-item:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 2px; }

  .landing-account-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent);
    border-radius: 9999px;
    background: var(--color-base-200);
  }

  .landing-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .landing-account-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .landing-account-chevron { font-size: 1.15rem !important; opacity: .6; transition: transform .15s ease; }
  .landing-account-chevron.is-open { transform: rotate(180deg); }

  .landing-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 250px;
    padding: 6px;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    border-radius: 14px;
    background: var(--landing-card);
    box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35);
  }

  .landing-account-head { display: grid; gap: 2px; padding: .55rem .7rem .7rem; margin-bottom: 4px; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); }
  .landing-account-head b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .landing-account-head small { font-size: .74rem; opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .landing-account-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-base-content);
    font: inherit;
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }

  .landing-account-item .material-symbols-outlined { font-size: 1.1rem; color: var(--landing-accent); }
  .landing-account-item:hover { background: color-mix(in oklab, var(--color-base-content) 6%, transparent); }
  .landing-account-item--danger .material-symbols-outlined { color: #dc2626; }
  [data-theme="dark"] .landing-account-item--danger .material-symbols-outlined { color: #f87171; }

  .landing-account-enter { transition: opacity .14s ease, transform .14s ease; }
  .landing-account-from { opacity: 0; transform: translateY(-4px); }

  .landing-mobile-user { display: flex; flex-direction: row; align-items: center; gap: .55rem; padding: .35rem .75rem; font-size: .86rem; font-weight: 600; }
  .landing-mobile-user .landing-account-avatar { width: 28px; height: 28px; }
  .landing-mobile-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .landing-mobile-logout button { display: flex; align-items: center; gap: .5rem; width: 100%; }
  .landing-mobile-logout .material-symbols-outlined { color: #dc2626; }
  [data-theme="dark"] .landing-mobile-logout .material-symbols-outlined { color: #f87171; }

  .landing-nav-cta {
    display: none;
    align-items: center;
    gap: .35rem;
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 9999px;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--landing-accent);
    border: 1px solid color-mix(in oklab, var(--landing-accent) 45%, transparent);
    /* Artwork'ün parlak gökyüzü üzerinde de okunur kalsın */
    background: color-mix(in oklab, var(--landing-card) 72%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color .2s ease, color .2s ease;
  }

  .landing-nav-cta:hover {
    background: var(--landing-accent);
    color: #fff;
  }

  #landing-mobile-menu { background: var(--landing-card); }

  /* Mobil menü birincil butonu (Giriş Yap / Yönetim Paneli): masaüstü CTA ile aynı teal sistem.
     Açıkta koyulaştırılmış teal + beyaz (≥4.5:1), koyuda teal + koyu metin. */
  .landing-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 9999px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--landing-cta-fg);
    background: var(--landing-accent-strong);
    transition: filter .2s ease;
  }

  .landing-mobile-cta:hover,
  .landing-mobile-cta:focus-visible {
    color: var(--landing-cta-fg);
    background: var(--landing-accent-strong);
    filter: brightness(1.08);
  }

  .landing-mobile-cta:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 2px; }

  .landing-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    color: var(--color-base-content);
    transition: background-color .2s ease;
  }

  .landing-icon-btn svg { border-radius: 2px; }

  .landing-icon-btn:hover {
    background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
  }

  /* Yuvarlak kontroller (dil, tema) — portal header ile aynı dil; 44px dokunma hedefi */
  .landing-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    box-sizing: border-box;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    border-radius: 9999px;
    background: color-mix(in oklab, var(--landing-card) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-base-content);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
  }

  .landing-ctrl:hover {
    border-color: color-mix(in oklab, var(--landing-accent) 45%, transparent);
    color: var(--landing-accent);
  }

  .landing-ctrl .material-symbols-outlined { font-size: 1.25rem; }
  .landing-ctrl--lang { padding: 0 .95rem 0 .8rem; }
  .landing-ctrl--lang svg { width: 20px; height: 14px; border-radius: 2px; }

  .landing-nav-mobile { position: relative; display: block; }

  @media (min-width: 640px) {
    .landing-nav-cta { display: inline-flex; }
  }

  /* 6 bağlantı: dar masaüstünde aralık daralır, sağdaki butonlarla çakışmaz */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .landing-nav-links { gap: 1.5rem; font-size: .85rem; }
  }

  @media (min-width: 1024px) {
    .landing-nav-links { display: flex; }
    .landing-nav-user,
    .landing-account { display: inline-flex; }
    .landing-nav-mobile { display: none; }
  }

  /* ─── Hero ───
     Katmanlar (alttan üste): arka plan → artwork → okunabilirlik gradient'i → içerik */
  .landing-hero {
    position: relative;
    overflow: hidden;
    min-height: max(720px, 100svh);   /* her ekranda tam dolar, alttan bölüm görünmez */
    background:
      radial-gradient(ellipse 60% 70% at 12% 30%, #ffffff 0%, transparent 70%),
      linear-gradient(180deg, #edf3f3 0%, var(--landing-surface) 100%);
  }

  [data-theme="dark"] .landing-hero {
    background:
      radial-gradient(ellipse 55% 65% at 10% 35%, #00333b 0%, transparent 70%),
      linear-gradient(90deg, #001b20 0%, #00262b 100%);
  }

  /* Artwork: sağa yaslı; sol ve alt kenar mask ile arka plana erir (görünür kenar yok) */
  .hero-artwork {
    position: absolute;
    top: 0;
    right: calc((100% - var(--landing-frame)) / 2);
    bottom: 0;
    width: calc(var(--landing-frame) * .68);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 30%),
      linear-gradient(to top, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 30%),
      linear-gradient(to top, transparent 0%, #000 14%);
    mask-composite: intersect;
  }

  /* İki artwork stage içinde üst üste; tema değişince opacity crossfade.
     Kırpma/konum (cover + 92% 72%) stage'de: static/css/landing-hero-anim.css */
  .hero-art-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity .45s ease;
  }

  .hero-art-dark { opacity: 0; }
  [data-theme="dark"] .hero-art-light { opacity: 0; }
  [data-theme="dark"] .hero-art-dark { opacity: 1; }

  /* Okunabilirlik gradient'i: solda zemin rengi, artwork ortasına doğru şeffaflaşır */
  .hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgb(228 236 236 / .92) 0%,
      rgb(228 236 236 / .7) 30%,
      rgb(228 236 236 / 0) 52%);
  }

  [data-theme="dark"] .hero-gradient {
    background: linear-gradient(90deg,
      rgb(0 27 32 / .9) 0%,
      rgb(0 32 38 / .6) 30%,
      rgb(0 38 43 / 0) 52%);
  }

  /* Alt geçiş: hero zemini bir sonraki bölümün zeminine erir (düz kenar yok) */
  .landing-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--landing-page));
  }

  /* Hareket azaltma tercihi: crossfade ve hover geçişleri kapatılır */
  @media (prefers-reduced-motion: reduce) {
    .hero-art-stage img,
    .hero-cta,
    .hero-cta svg,
    .landing-nav,
    .landing-nav-link::after { transition: none; }
    .hero-cta:hover,
    .hero-cta:hover svg { transform: none; }
    html { scroll-behavior: auto; }
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: inherit;
    max-width: calc(var(--landing-max) + 2 * var(--landing-pad));
    margin: 0 auto;
    padding: calc(var(--landing-nav-h) + 2rem) var(--landing-pad) 3.5rem;
  }

  /* İçerik katmanı tüm hero'yu kaplar ama tıklamayı sadece içerik/stats alır;
     böylece artwork üzerindeki hotspotlar hover/pointer alabilir */
  .hero-inner { pointer-events: none; }
  .hero-content { pointer-events: auto; }

  /* İçerik kalan alanda dikey ortalanır */
  .hero-content { max-width: 620px; margin-block: auto; }

  /* ─── Hero tipografi ─── */
  .hero-eyebrow {
    display: block;
    margin-bottom: 1.25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }

  .hero-title {
    margin: 0 0 1.5rem;
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.025em;
    color: var(--color-base-content);
  }

  .hero-title > span { display: block; }

  .hero-title-accent {
    background: linear-gradient(90deg, var(--landing-accent), var(--landing-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-desc {
    max-width: 540px;
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
  }

  /* ─── Hero CTA ─── */
  :root,
  [data-theme="light"] {
    --landing-cta-bg: linear-gradient(135deg, #0c9482, #13ad9a);
    --landing-cta-fg: #ffffff;
  }

  [data-theme="dark"] {
    --landing-cta-bg: linear-gradient(135deg, #1ec8b0, #5eead4);
    --landing-cta-fg: #00262b;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 2.25rem;
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    height: 52px;
    padding: 0 1.5rem 0 1.75rem;
    border-radius: 9999px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--landing-cta-fg);
    background: var(--landing-cta-bg);
    box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--landing-accent) 80%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .hero-cta svg { width: 1.1rem; height: 1.1rem; transition: transform .2s ease; }

  .hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--landing-accent) 90%, transparent);
  }

  .hero-cta:hover svg { transform: translateX(3px); }

  .hero-link {
    font-size: .95rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 6px;
    transition: color .2s ease, text-decoration-color .2s ease;
  }

  .hero-link:hover {
    color: var(--landing-accent);
    text-decoration-color: currentColor;
  }

  /* Tablet: artwork daha geniş, sol gradient daha güçlü */
  @media (max-width: 1279px) {
    .hero-artwork { width: 78%; }
    .hero-gradient {
      background: linear-gradient(90deg,
        rgb(228 236 236 / .95) 0%,
        rgb(228 236 236 / .8) 38%,
        rgb(228 236 236 / 0) 62%);
    }
    [data-theme="dark"] .hero-gradient {
      background: linear-gradient(90deg,
        rgb(0 27 32 / .94) 0%,
        rgb(0 32 38 / .75) 38%,
        rgb(0 38 43 / 0) 62%);
    }
  }

  /* Mobil: ayrı kompozisyon — içerik üstte, artwork altta akışta */
  /* Alt alta düzen: mobil + portre tablet (dar/uzun ekranda metin + artwork üst üste binmesin) */
  @media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
    .landing-hero { min-height: 0; }
    .hero-inner { padding-bottom: 0; }
    .hero-gradient { display: none; }
    .hero-artwork {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      margin-top: 1.5rem;
      -webkit-mask-image:
        linear-gradient(to bottom, transparent 0%, #000 8%),
        linear-gradient(to top, transparent 0%, #000 10%);
      mask-image:
        linear-gradient(to bottom, transparent 0%, #000 8%),
        linear-gradient(to top, transparent 0%, #000 10%);
    }
    .landing-hero::after { height: 56px; }

    .hero-inner { padding-top: calc(var(--landing-nav-h) + 1.5rem); }
    .hero-eyebrow { letter-spacing: .28em; margin-bottom: 1rem; }
    .hero-title { font-size: clamp(2.7rem, 11vw, 3.2rem); margin-bottom: 1.1rem; }
    .hero-actions { margin-top: 1.75rem; }
    .hero-cta { height: 50px; }

  }

  /* ─── İkon boyutu düzeltmesi ───
     fonts.css'teki katmansız `font-size: 24px`, Tailwind v4'ün @layer içindeki
     text-* boyutlarını eziyor; landing'de bu class'lar için Tailwind değerine dön. */
  :where(.text-base, .text-xl, .text-4xl, .text-5xl, .text-\[15rem\]).material-symbols-outlined {
    font-size: revert-layer;
  }

  /* Sayfa zemini (açıkta login ile aynı mat ton, koyuda base-100) */
  .landing-body { background-color: var(--landing-page); }

  /* Ortak içerik kapsayıcısı (Tailwind container yerine; tek genişlik + tek kenar boşluğu) */
  .landing-wrap {
    width: 100%;
    max-width: calc(var(--landing-max) + 2 * var(--landing-pad));
    margin-inline: auto;
    padding-inline: var(--landing-pad);
  }

  /* Ekran okuyucuya özel metin (derlenmiş Tailwind'de sr-only yok) */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ─── Ortak bölüm başlığı ─── */
  .section-eyebrow {
    display: block;
    margin-bottom: .9rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--landing-accent-text);
  }

  .section-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
  }

  .section-lead {
    margin-top: 1rem;
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  }

  /* ─── Özellikler şeridi: hero'nun hemen altında, başlıksız 4 kolon ─── */
  /* Açık temada teal metin beyaz zeminde 3:1 sınırında; küçük metin/link için koyulaştırılmış ton */
  :root,
  [data-theme="light"] {
    --landing-accent-strong: color-mix(in oklab, var(--landing-accent) 75%, var(--color-base-content));
    /* Gri sayfa zemininde duran küçük teal yazılar (bölüm etiketi, footer adı): ≥4.8:1 */
    --landing-accent-text: color-mix(in oklab, var(--landing-accent) 65%, var(--color-base-content));
  }

  [data-theme="dark"] {
    --landing-accent-strong: var(--landing-accent);
    --landing-accent-text: var(--landing-accent);
  }

  .feature-strip {
    position: relative;
    z-index: 2;
    padding-block: 1.75rem 3rem;
  }

  .feature-strip-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    list-style: none;
  }

  .feature-strip-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
  }

  .feature-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--landing-accent) 12%, transparent);
    color: var(--landing-accent);
  }

  .feature-strip-icon .material-symbols-outlined { font-size: 1.6rem; }
  .feature-strip-icon--heat { background: rgb(249 115 22 / .12); color: #ea580c; }

  .feature-strip-item h3 { font-size: var(--fs-title); font-weight: 700; line-height: 1.3; }

  .feature-strip-item p {
    margin-top: .3rem;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  }

  @media (min-width: 480px) {
    .feature-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
  }

  /* Masaüstü: tek satır, ince dikey ayraçlar; hero kısalır, şerit ilk ekranda görünür */
  @media (min-width: 1024px) {
    .feature-strip-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

    .feature-strip-item {
      padding-inline: 1.5rem;
      border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    }

    .feature-strip-item:first-child { padding-left: 0; border-left: 0; }
  }

  /* Dar masaüstünde metin alanı daralmasın: ikon üstte */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .feature-strip-item { flex-direction: column; gap: .75rem; }
  }

  /* Masaüstü (yatay): şerit ayrı bant değil, hero'nun alt erime alanının üstünde.
     Hero tam ekran kalır; içerik şerit yüksekliği kadar yukarıda biter, alt geçiş uzar. */
  @media (min-width: 1024px) and (orientation: landscape) {
    :root { --feature-strip-h: 10.25rem; }

    .feature-strip {
      min-height: var(--feature-strip-h);
      margin-top: calc(-1 * var(--feature-strip-h));
      padding-block: 1rem 1.5rem;
    }

    .hero-inner { padding-bottom: calc(var(--feature-strip-h) + 1rem); }

    .landing-hero::after {
      height: calc(var(--feature-strip-h) + 9rem);
      background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in oklab, var(--landing-page) 70%, transparent) 45%,
        var(--landing-page) 100%);
    }
  }

  @media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
    :root { --feature-strip-h: 12.5rem; }
  }

  /* ─── Bölüm yüksekliği ───
     Desktop'ta her bölüm navbar altındaki ekranı doldurur; alttan sonraki bölüm görünmez.
     Kısa ekranlarda (<700px) ve mobilde doğal yükseklik kalır. */
  @media (min-width: 1024px) and (min-height: 700px) {
    .landing-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: calc(100svh - var(--landing-nav-h));
      padding-block: clamp(2.5rem, 6svh, 4.5rem);
    }

    /* Potansiyel: görsel ekran yüksekliğine göre sınırlanır, bant kompaktlaşır */
    #potansiyel .field-band { margin-top: 2rem; padding-block: 1.25rem; }
  }

  /* ─── Potansiyel: çerçevesiz görsel — Hero/Teknoloji ile aynı dil (sağda, kenarı erir) ─── */
  .potential-section { position: relative; overflow: hidden; background: var(--landing-page-2); }
  .potential-top { position: relative; }

  /* Mobil/tablet: bölüm başında bant; üst ve alt kenarı zemine erir */
  .potential-art {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: -5rem 0 1.5rem;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  }

  .potential-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 55%;
  }

  [data-theme="dark"] .potential-art img { filter: brightness(.8) saturate(.9); }

  .potential-body { position: relative; z-index: 1; }
  .potential-text { max-width: 36rem; }

  /* Masaüstü: görsel sağda (Teknoloji ile aynı), sol kenarı elips yayıyla zemine erir;
     alt kenar Sahadaki Deneyim bandından önce söner. Metin sol kolonda. */
  @media (min-width: 1024px) {
    .potential-top {
      display: flex;
      align-items: center;
      min-height: clamp(26rem, 52svh, 34rem);
    }

    .potential-art {
      position: absolute;
      top: 0;
      bottom: 0;
      right: calc((100% - var(--landing-frame)) / 2);
      width: calc(var(--landing-frame) * .62);
      margin: 0;
      aspect-ratio: auto;
      -webkit-mask-image:
        radial-gradient(ellipse 100% 135% at 100% 50%, #000 62%, transparent 92%),
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 85%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        radial-gradient(ellipse 100% 135% at 100% 50%, #000 62%, transparent 92%),
        linear-gradient(to bottom, transparent 0%, #000 10%, #000 85%, transparent 100%);
      mask-composite: intersect;
    }

    .potential-body { width: 100%; }
    .potential-text { max-width: 34rem; }
  }

  /* ─── Potansiyel: Türkiye göstergeleri (ikonlu kartlar) ─── */
  .potential-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    list-style: none;
  }

  .potential-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: var(--landing-card);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
    box-shadow: 0 8px 24px -16px rgb(0 0 0 / .2);
  }

  .potential-card > div { min-width: 0; }

  .potential-card-icon,
  .field-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--landing-accent) 12%, transparent);
    color: var(--landing-accent);
  }

  .potential-card-icon .material-symbols-outlined,
  .field-card-icon .material-symbols-outlined { font-size: 1.4rem; }

  .potential-card-icon--heat,
  .field-card-icon--heat { background: rgb(249 115 22 / .12); color: #ea580c; }

  .potential-card-value {
    display: block;
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
  }

  .potential-card-label {
    display: block;
    margin-top: .2rem;
    font-size: var(--fs-meta);
    line-height: 1.35;
    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  }

  /* 2 kolon yalnız kolonun geniş olduğu yerde: tek kolon mobil (≥480) ve geniş masaüstü */
  @media (min-width: 480px) and (max-width: 767px), (min-width: 1280px) {
    .potential-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ─── Sahadaki deneyim: şirket santral verileri — ülke göstergelerinden ayrı bant ─── */
  .field-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    margin-top: 3rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: var(--landing-card);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  }

  .field-band-intro h3 {
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 800;
    color: var(--landing-accent-strong);
  }

  .field-band-intro p {
    margin-top: .6rem;
    max-width: 30rem;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
  }

  .field-band-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    margin-top: 1.25rem;
    padding: 0 1.1rem;
    border-radius: .75rem;
    border: 1px solid color-mix(in oklab, var(--landing-accent) 45%, transparent);
    font-size: var(--fs-body-sm);
    font-weight: 700;
    color: var(--landing-accent-strong);
    transition: background-color .2s, border-color .2s;
  }

  .field-band-btn:hover {
    background: color-mix(in oklab, var(--landing-accent) 8%, transparent);
    border-color: var(--landing-accent);
  }

  .field-band-btn:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 3px; }

  .field-band-btn .portal-icon { width: 1rem; height: 1rem; transition: transform .2s; }
  .field-band-btn:hover .portal-icon { transform: translateX(3px); }

  /* Bandın içinde ikinci kart katmanı yok: mobilde ince çizgiyle ayrılan satırlar
     (ikon | başlık + değer, meta altta), ≥640px'te dikey ayraçlı 3 sütun. */
  .field-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    list-style: none;
  }

  .field-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .85rem;
    min-width: 0;
    padding-block: .9rem;
  }

  .field-card + .field-card {
    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
  }

  .field-card-icon { grid-row: span 2; }

  .field-card-title {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: 700;
  }

  .field-card-value {
    display: block;
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--landing-accent-strong);
  }

  .field-card-value--plain { color: var(--color-base-content); }

  .field-card-meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-top: .4rem;
    list-style: none;
    font-size: var(--fs-meta);
    color: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  }

  .field-card-meta li { display: flex; align-items: center; gap: .4rem; min-width: 0; }
  .field-card-meta .portal-icon { flex-shrink: 0; width: 1rem; height: 1rem; }

  @media (min-width: 640px) {
    .field-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .field-card {
      align-content: start;
      row-gap: .5rem;
      padding: .25rem 1.5rem;
    }

    .field-card:first-child { padding-left: 0; }

    .field-card + .field-card {
      border-top: 0;
      border-left: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
    }

    .field-card-icon { grid-row: auto; }

    .field-card-value,
    .field-card-meta { grid-column: 1 / -1; }

    .field-card-meta { margin-top: 0; }
  }

  @media (min-width: 1024px) {
    .field-band {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: center;
      gap: 2.5rem;
      padding: 2rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .field-band-btn, .field-band-btn .portal-icon { transition: none; }
  }

  /* ─── Teknoloji: sağda zemine eriyen artwork + üstüne binen kompakt kartlar ─── */
  .tech-section {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklab, var(--landing-accent) 6%, var(--landing-page));
  }

  /* Mobil/tablet: artwork bölüm başında bant; üst ve alt kenarı zemine erir */
  .tech-art {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: -5rem 0 1.5rem;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  }

  .tech-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
  }

  /* Koyu temada parlak gökyüzü sayfadan kopmasın: yalnız görsel katmanında hafif kısma */
  [data-theme="dark"] .tech-art img { filter: brightness(.8) saturate(.9); }

  .tech-body { position: relative; z-index: 1; }

  .tech-intro-text { max-width: 36rem; }

  .tech-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    margin-top: 2rem;
    list-style: none;
  }

  /* Kompakt kart: ikon başlıkla yan yana, açıklama altta tam genişlik */
  .tech-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .75rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: var(--landing-card);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
    box-shadow: 0 10px 26px -20px rgb(0 0 0 / .28);
  }

  [data-theme="dark"] .tech-step { box-shadow: 0 10px 26px -20px rgb(0 0 0 / .6); }

  .tech-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--landing-accent) 12%, transparent);
    color: var(--landing-accent);
  }

  .tech-step-icon .material-symbols-outlined { font-size: 1.3rem; }

  /* Sıcak akışkan adımı turuncu, reenjeksiyon adımı mavi */
  .tech-step--hot .tech-step-icon  { background: rgb(249 115 22 / .12); color: #ea580c; }
  .tech-step--cold .tech-step-icon { background: rgb(14 165 233 / .12); color: #0284c7; }

  .tech-step h3 { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }

  .tech-step p {
    grid-column: 1 / -1;
    margin-top: .6rem;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  }

  /* Öne çıkanlar: ikon + başlık, tek satır; ince üst çizgiyle ayrılır */
  .tech-highlights {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    list-style: none;
    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
  }

  .tech-highlights li { display: flex; align-items: center; gap: .65rem; min-width: 0; }

  .tech-hl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .65rem;
    background: var(--landing-cta-bg);
    color: var(--landing-cta-fg);
  }

  .tech-hl-icon .material-symbols-outlined { font-size: 1.15rem; }
  .tech-highlights h4 { font-size: var(--fs-body-sm); font-weight: 700; line-height: 1.3; }

  @media (min-width: 480px) {
    .tech-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 768px) {
    .tech-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* Masaüstü: içerik sol kolonda (≤38rem); artwork sağda tam yükseklik ve kolonun
     bittiği yerden başlar → kartlar görseli kapatmaz. Sol kenar elips yayıyla zemine erir. */
  @media (min-width: 1024px) {
    .tech-art {
      position: absolute;
      top: 0;
      right: calc((100% - var(--landing-frame)) / 2);
      bottom: 0;
      width: calc(var(--landing-frame) * .56);
      margin: 0;
      aspect-ratio: auto;
      -webkit-mask-image:
        radial-gradient(ellipse 100% 135% at 100% 50%, #000 62%, transparent 92%),
        linear-gradient(to bottom, transparent 0%, #000 7%, #000 92%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        radial-gradient(ellipse 100% 135% at 100% 50%, #000 62%, transparent 92%),
        linear-gradient(to bottom, transparent 0%, #000 7%, #000 92%, transparent 100%);
      mask-composite: intersect;
    }

    .tech-col { max-width: 38rem; }
  }

  /* 1920px'ten geniş ekranlar: görseller ekran kenarına değil ortadaki 1920px çerçeveye
     bağlı; sağ kenarları da yumuşakça erir. Mevcut maskelere üçüncü katman eklenir. */
  @media (min-width: 1921px) {
    .hero-artwork {
      -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 30%),
        linear-gradient(to top, transparent 0%, #000 14%),
        linear-gradient(to left, transparent 0%, #000 12%);
      mask-image:
        linear-gradient(to right, transparent 0%, #000 30%),
        linear-gradient(to top, transparent 0%, #000 14%),
        linear-gradient(to left, transparent 0%, #000 12%);
    }

    .tech-art,
    .potential-art {
      -webkit-mask-image:
        radial-gradient(ellipse 100% 135% at 100% 50%, #000 62%, transparent 92%),
        linear-gradient(to bottom, transparent 0%, #000 8%, #000 88%, transparent 100%),
        linear-gradient(to left, transparent 0%, #000 12%);
      mask-image:
        radial-gradient(ellipse 100% 135% at 100% 50%, #000 62%, transparent 92%),
        linear-gradient(to bottom, transparent 0%, #000 8%, #000 88%, transparent 100%),
        linear-gradient(to left, transparent 0%, #000 12%);
    }
  }

  /* ─── Hakkında ─── */
  .about-heading {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.01em;
  }

  .about-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  @media (min-width: 640px) {
    .about-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Yatay kart: ikon solda (2 satır boyunca), başlık + metin sağda */
  .about-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .9rem;
    align-items: start;
    padding: 1.1rem 1.15rem;
    border-radius: 1rem;
    background: var(--landing-card);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
  }

  .about-card .material-symbols-outlined { grid-row: span 2; font-size: 1.6rem; color: var(--landing-accent); }
  .about-card h4 { font-size: var(--fs-title); font-weight: 700; line-height: 1.3; }

  .about-card p {
    margin-top: .25rem;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
  }

  .about-checklist { display: grid; gap: 1rem; list-style: none; }
  .about-checklist li { display: flex; align-items: flex-start; gap: .75rem; }

  .about-checklist .material-symbols-outlined {
    font-size: 1.35rem;
    color: var(--landing-accent);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  .about-checklist h4 { font-weight: 700; }

  .about-checklist p {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  }

  .about-standard {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: color-mix(in oklab, var(--landing-accent) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--landing-accent) 22%, transparent);
  }

  .about-standard .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 2.25rem;
    color: var(--landing-accent);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 40;
  }

  .about-standard h4 { font-weight: 700; }

  .about-standard p {
    margin-top: .25rem;
    font-size: var(--fs-body);
    color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
  }

  /* ─── Hakkında içinde kurumsal yapı ─── */
  .corp-head { max-width: 48rem; }
  .corp-head .section-title { overflow-wrap: break-word; }

  /* Şirket kartları: mobilde alt alta (ok aşağı), masaüstünde yan yana (ok sağa) */
  .corp-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    margin-top: 2.5rem;
    list-style: none;
  }

  .corp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.35rem 1.4rem;
    border-radius: 1.25rem;
    background: var(--landing-card);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
    box-shadow: 0 12px 30px -22px rgb(0 0 0 / .3);
  }

  /* Ana kimlik: Mis Enerji kartı teal kenarlıkla vurgulu */
  .corp-card--current {
    border-color: color-mix(in oklab, var(--landing-accent) 55%, transparent);
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--landing-accent) 10%, transparent),
      0 12px 30px -22px rgb(0 0 0 / .3);
  }

  .corp-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--landing-accent) 12%, transparent);
    color: var(--landing-accent);
  }

  .corp-value-icon .material-symbols-outlined { font-size: 1.25rem; }

  /* Rol: logonun altında küçük, sakin satır (isim tekrarı değil, hiyerarşideki yeri) */
  .corp-card-role {
    margin-top: .4rem;
    font-size: var(--fs-meta);
    font-weight: 600;
    color: color-mix(in oklab, var(--color-base-content) 64%, transparent);
  }

  .corp-card-logo { display: flex; align-items: center; min-height: 2.75rem; }

  .corp-card-logo .mis-logo-mark { width: 34px; height: 34px; }
  .corp-card-logo .mis-logo-text { font-size: 1.6rem; }

  .corp-card-desc {
    flex-grow: 1;
    margin-top: .75rem;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
  }

  .corp-card-link { margin-top: 1rem; font-size: var(--fs-body); font-weight: 700; }

  .corp-card-arrow {
    position: absolute;
    left: 50%;
    bottom: -2.075rem;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--landing-accent);
    transform: translateX(-50%) rotate(90deg);
  }

  /* Soyak logosu: resmi lacivert; koyu temada okunur kalsın diye açık metin rengi */
  /* Soyak logo kilidi: resmi işaretin oranlarına dokunulmaz; yanındaki ince yazı
     (ENERJİ / HOLDİNG) işaretin harf yüksekliğine ve taban çizgisine oturtulur.
     --soyak-suffix-shift: tarayıcıda ölçülerek ayarlanan dikey hizalama. */
  .soyak-logo {
    --soyak-suffix-shift: 0px;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    line-height: 1;
    color: #001689;
  }

  [data-theme="dark"] .soyak-logo { color: var(--color-base-content); }

  .soyak-logo-mark { width: auto; height: 2.2rem; }

  /* Yazı: MİS ENERJİ'deki 'ENERJİ' ile aynı (.corp-card-logo .mis-logo-text: 1.6rem, 500, -.02em) */
  .soyak-logo-suffix {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--landing-accent);   /* MİS ENERJİ'deki 'ENERJİ' ile aynı (light/dark otomatik) */
    transform: translateY(var(--soyak-suffix-shift));
  }

  /* Kurumsal değerler şeridi */
  .corp-values {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background: color-mix(in oklab, var(--landing-accent) 5%, var(--landing-card));
    border: 1px solid color-mix(in oklab, var(--landing-accent) 14%, transparent);
    list-style: none;
  }

  .corp-value { display: flex; align-items: center; gap: .85rem; min-width: 0; }
  .corp-value > div { min-width: 0; }
  .corp-value h3 { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }

  .corp-value p {
    margin-top: .1rem;
    font-size: var(--fs-meta);
    color: color-mix(in oklab, var(--color-base-content) 64%, transparent);
  }

  /* Dış bağlantı: ok ikonu + ekran okuyucu notu (anlam yalnız renge bağlı değil) */
  .corp-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, var(--landing-accent) 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
    border-radius: .25rem;
    transition: color .2s, text-decoration-color .2s;
  }

  .corp-link:hover { color: var(--landing-accent-strong); text-decoration-color: currentColor; }
  .corp-link:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 3px; }

  /* Kart linki: teal, alt çizgi yalnız hover'da; ok ikonu her zaman görünür */
  .corp-link--accent { color: var(--landing-accent-strong); text-decoration-color: transparent; }

  /* Footer linki: sade gri metin */
  .corp-link--plain {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
    text-decoration-color: transparent;
  }

  .corp-link-icon {
    display: inline-block;
    width: .95em;
    height: .95em;
    margin-left: .35em;
    vertical-align: -.1em;
    color: var(--landing-accent);
    transition: transform .2s;
  }

  .corp-link:hover .corp-link-icon { transform: translateX(2px); }

  @media (prefers-reduced-motion: reduce) {
    .corp-link, .corp-link-icon { transition: none; }
  }

  @media (min-width: 640px) {
    .corp-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .corp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }

    .corp-card-arrow {
      left: auto;
      bottom: auto;
      top: 50%;
      right: -2.2rem;
      transform: translateY(-50%);
    }

    .corp-values { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

    .corp-value {
      padding-inline: 1.25rem;
      border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    }

    .corp-value:first-child { padding-left: 0; border-left: 0; }
  }

  /* ─── Footer: 4 kolon + alt bar ─── */
  .landing-footer {
    background: var(--landing-page-2);
    border-top: 1px solid var(--color-base-300);
    color: var(--color-base-content);
  }

  .landing-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block: 3rem 2rem;
  }

  .landing-footer-tagline { display: block; margin-top: .75rem; font-size: .95rem; font-weight: 700; }

  .landing-footer-desc {
    margin-top: .4rem;
    max-width: 22rem;
    font-size: var(--fs-body-sm);
    line-height: 1.6;
    color: color-mix(in oklab, var(--color-base-content) 66%, transparent);
  }

  .landing-footer-title { margin-bottom: .75rem; font-size: var(--fs-body); font-weight: 700; }

  .landing-footer-links { display: grid; gap: .1rem; list-style: none; font-size: var(--fs-body-sm); }

  .landing-footer-links a { display: inline-block; padding-block: .25rem; }

  .landing-footer-nav a {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
    border-radius: .25rem;
    transition: color .2s;
  }

  .landing-footer-nav a:hover { color: var(--landing-accent-strong); }

  .landing-footer a:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 2px; }

  .landing-footer-contact { display: grid; gap: .6rem; list-style: none; font-size: var(--fs-body-sm); }

  .landing-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-width: 0;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
  }

  .landing-footer-contact .material-symbols-outlined { font-size: 1.25rem; color: var(--landing-accent); }
  .landing-footer-contact a { overflow-wrap: anywhere; border-radius: .25rem; }
  .landing-footer-contact a:hover { color: var(--landing-accent-strong); }

  /* En alt satır: login footer'ı ile aynı (ortak partial, portal.css değerleri).
     Çizgi tam genişlik; içerik navbar gibi en fazla 1920px ve aynı kenar boşluğunda. */
  .landing-footer-bar-row {
    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 9%, transparent);
  }

  .landing-footer-bar {
    box-sizing: border-box;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-inline: var(--landing-nav-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    padding-block: 1.1rem 1.3rem;
    font-size: .8rem;
    color: color-mix(in oklab, var(--color-base-content) 64%, transparent);
  }

  .landing-footer-bar .portal-footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .landing-footer-bar .mis-logo-mark { width: 24px; height: 24px; }
  .landing-footer-bar .mis-logo-text { font-size: 1rem; }

  .landing-footer-bar .portal-brand-divider {
    width: 1px;
    height: 1.75rem;
    background: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  }

  .landing-footer-bar .portal-footer-product { font-weight: 600; color: var(--color-base-content); }
  .landing-footer-bar .portal-footer-credit { margin: 0; }
  .landing-footer-bar .portal-footer-credit b { font-weight: 600; color: var(--landing-accent-text); }

  @media (max-width: 767px) {
    .landing-footer-bar,
    .landing-footer-bar .portal-footer-brand { justify-content: center; text-align: center; }
  }



  @media (min-width: 640px) {
    .landing-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .landing-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  }