/* =============================================================================================
   v8 GÖRÜNÜM KATMANI (HEUS_TEMA='v8'; 2026-10-21). Saruhan onaylı tasarım (outputs/site-ana-20261021/tasarim-saruhan.png): kömür siyahı zemin,
   ateş kırmızısı eylem, altın ince çizgi/çerçeve, serif başlık (Cormorant Garamond, Türkçe alt küme, self-host), elmas ayraç.
   Son stil katmanıdır (main/v7/_savas.php h2_v7_savas_css(): savas-v7.css'ten sonra). v7 dosyaları değişmez; geri dönüş HEUS_TEMA='v7'.
   Özgüllük: v7 savaş katmanı `body.v7.v7.v7 :where(*)` ile gölge/yarıçapı sıfırlar; bu yüzden her kural `body.v8.v7.v7.v7` altında yuvalanır
   (CSS iç içe yazım). Satır içi stil yok (CSP). Ölçülen renkler tasarım görselinden: zemin #050504/#0c0a08, kırmızı #97240c, altın #e1b569,
   çizgi #684c29, metin #e9d7ca, yeşil nokta #50e147.
   ============================================================================================= */

@font-face {
  font-family: "Heus Cormorant";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/v8-Cormorant-500-tr.woff2") format("woff2");
}

@font-face {
  font-family: "Heus Cormorant";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/v8-Cormorant-600-tr.woff2") format("woff2");
}

@font-face {
  font-family: "Heus Cormorant yedek";
  font-style: normal;
  font-weight: 500 700;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 88%;
}

body.v8.v7.v7.v7,
body.v8.v7.v7.v7 .ic {
  --gece: #070605;
  --gece-2: #0c0a08;
  --yuzey: #12100d;
  --yuzey-2: #1b1713;
  --krem: #e9d7ca;
  --krem-2: #b9a791;
  --soluk: #b9a791;
  --altin: #d9b068;
  --altin-acik: #e8c785;
  --altin-koyu: #8a6a35;
  --lake: #8f2410;
  --lake-koyu: #6a1608;
  --canli: #50e147;
  --cerceve: #4a3a22;
  --cerceve-dugme: #c9a15a;
  --heus-ayirici: #4a3a22;
  --heus-pirinc: #8a6a35;
  --heus-lake-acik: #b3321a;
  --font-baslik: "Heus Cormorant", "Heus Cormorant yedek", georgia, serif;
  --v8-altin: #e1b569;
  --v8-altin-soluk: #684c29;
  --v8-kirmizi: #97240c;
  --v8-ust-yukseklik: 5.5rem;
  background: var(--gece);
}

body.v8.v7.v7.v7 {
  /* ---- başlık yazı tipi: bütün sayfalar ---- */
  :is(h1, h2, h3, .ana-sinif-ad, .ana-sistem-ad) {
    font-family: var(--font-baslik);
    font-weight: 600;
  }

  .v8-ana :is(h1, h2, h3),
  .v8-alt :is(h1, h2, h3) {
    text-transform: none;
    letter-spacing: normal;
  }

  .v8-plat-ad {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
    line-height: 1.05;
  }

  /* ---- ortak düğme ---- */
  .v8-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.1rem;
    padding: 0.55rem 1.4rem;
    border: 1px solid var(--v8-altin);
    border-radius: 3px;
    background: #080605;
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    box-shadow: inset 0 0 0 3px #080605, inset 0 0 0 4px rgba(225, 181, 105, 0.5);
    transition: background-color 0.15s, color 0.15s;
  }

  .v8-dugme:hover,
  .v8-dugme:focus-visible {
    color: #fff;
    background: #17100a;
  }

  .v8-dugme:focus-visible {
    outline: 2px solid var(--v8-altin);
    outline-offset: 3px;
  }

  .v8-dugme--kirmizi {
    background: linear-gradient(180deg, #a52c10, #6a1608);
    border-color: #c98a45;
    box-shadow: inset 0 0 0 3px #7a1c0a, inset 0 0 0 4px rgba(225, 181, 105, 0.5);
  }

  .v8-dugme--kirmizi:hover,
  .v8-dugme--kirmizi:focus-visible {
    background: linear-gradient(180deg, #bc3513, #7c1b0a);
  }

  .v8-dugme--pasif {
    cursor: default;
    color: #a89580;
    border-color: #6b5230;
    box-shadow: inset 0 0 0 3px #080605, inset 0 0 0 4px rgba(225, 181, 105, 0.22);
  }

  .v8-dugme--pasif:hover {
    background: #080605;
    color: #a89580;
  }

  .v8-simge {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
  }

  .v8-ok {
    font-size: 1.6rem;
    line-height: 0.8;
  }

  /* =========================================================================
     ÜST MENÜ
     ========================================================================= */
  .v8-ust {
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(180deg, #060504 0%, rgba(8, 6, 5, 0.94) 100%);
    border-bottom: 1px solid var(--v8-altin-soluk);
  }

  &:has(.v8-ana) .v8-ust {
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(5, 4, 3, 0.5) 0%, rgba(5, 4, 3, 0.22) 55%, rgba(5, 4, 3, 0) 100%);
    border-bottom: 0;
  }

  .v8-ust-ic {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 120rem;
    min-height: var(--v8-ust-yukseklik);
    margin: 0 auto;
    padding: 0.4rem clamp(1rem, 3.4vw, 4rem);
  }

  .v8-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
  }

  .v8-logo img {
    display: block;
    width: clamp(15rem, 20.5vw, 26rem);   /* tasarımda 1536 px genişlikte ~290 px görünür; parıltı payı + büyütme (Saruhan) */
    height: auto;
  }

  .v8-cekmece {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-width: 0;
  }

  .v8-liste {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0.35rem 1.2rem;
    list-style: none;
    background: transparent;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.7);
  }

  /* Tasarımdaki menü şeridi (f4b168b5): uçları sönen koyu şerit + ince altın çizgiler; satır logonun üst yarısında */
  @media (min-width: 1101px) {
    .v8-liste {
      border-block: 1px solid transparent;
      border-image: linear-gradient(90deg, transparent, rgba(225, 181, 105, 0.45) 12%, rgba(225, 181, 105, 0.45) 88%, transparent) 1;
      background: linear-gradient(90deg, rgba(6, 5, 4, 0), rgba(6, 5, 4, 0.5) 10%, rgba(6, 5, 4, 0.5) 90%, rgba(6, 5, 4, 0));
    }

    &:has(.v8-ana) .v8-cekmece {
      align-self: flex-start;
      margin-top: clamp(0.5rem, calc(4.33vw - 3.07rem), 2.6rem);   /* sahne vw ile küçülür, düğmeler küçülmez: 1366'da ~10 px, 1920'de ~34 px (Anka başı düğmelerin altında açık kalsın) */
    }
  }

  .v8-liste > .v8-oge + .v8-oge::before {
    content: "";
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0 0.9rem;
    border: 1px solid var(--v8-altin);
    transform: rotate(45deg);
    vertical-align: middle;
  }

  .v8-oge {
    position: relative;
    display: flex;
    align-items: center;
  }

  .v8-tetik {
    appearance: none;
    padding: 0.55rem 0.4rem;
    border: 0;
    background: transparent;
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
  }

  .v8-tetik:hover,
  .v8-aktif > .v8-tetik,
  .v8-acik > .v8-tetik {
    color: var(--altin-acik);
  }

  .v8-tetik:focus-visible,
  .v8-panel-baglanti:focus-visible,
  .v8-giris:focus-visible,
  .v8-ham:focus-visible {
    outline: 2px solid var(--v8-altin);
    outline-offset: 2px;
  }

  .v8-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: -0.5rem;
    z-index: 5;
    min-width: 15rem;
    margin: 0;
    padding: 0.4rem 0;
    list-style: none;
    background: #0b0907;
    border: 1px solid var(--v8-altin-soluk);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
  }

  .v8-panel--sag {
    left: auto;
    right: 0;
  }

  .v8-acik > .v8-panel {
    display: block;
  }

  @media (hover: hover) {
    .v8-oge:not(.v8-hesap):hover > .v8-panel,
    .v8-oge:focus-within > .v8-panel {
      display: block;
    }
  }

  .v8-panel-baglanti {
    display: block;
    padding: 0.5rem 1.1rem;
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
  }

  .v8-panel-baglanti:hover,
  .v8-panel-baglanti[aria-current] {
    background: rgba(225, 181, 105, 0.1);
    color: var(--altin-acik);
  }

  .v8-bakiye {
    padding: 0.4rem 1.1rem;
    color: var(--krem-2);
    font-size: 0.95rem;
  }

  .v8-sag {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    flex: 0 0 auto;
  }

  .v8-giris {
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
  }

  .v8-giris:hover {
    color: var(--altin-acik);
  }

  .v8-sag .v8-dugme {
    min-height: 2.9rem;
    font-size: 1.2rem;
    white-space: nowrap;
  }

  .v8-ara {
    display: inline-flex;
    color: var(--krem);
  }

  .v8-ara svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }

  .v8-tetik--hesap {
    border: 1px solid var(--v8-altin);
    padding: 0.5rem 1.1rem;
    border-radius: 3px;
  }

  .v8-sag .kabuk-dil ul {
    display: flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .v8-sag .kabuk-dil-ad {
    display: none;
  }

  .v8-sag .kabuk-dil-baglanti {
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--v8-altin-soluk);
    color: var(--krem-2);
    font-size: 0.82rem;
    text-decoration: none;
  }

  .v8-sag .kabuk-dil-baglanti[aria-current] {
    color: var(--altin-acik);
    border-color: var(--v8-altin);
  }

  .v8-ham,
  .v8-perde {
    display: none;
  }

  /* =========================================================================
     ANA SAYFA — sahne
     ========================================================================= */
  .v8-ana {
    background: var(--gece);
  }

  .v8-sahne {
    position: relative;
    min-height: clamp(36rem, 50vw, 66rem);
    overflow: hidden;
    background:
      radial-gradient(ellipse 60% 70% at 18% 100%, rgba(140, 36, 12, 0.35), transparent 70%),
      radial-gradient(ellipse 50% 60% at 70% 30%, rgba(160, 50, 10, 0.25), transparent 70%),
      #0a0706;
    border-bottom: 1px solid var(--v8-altin-soluk);
  }

  .v8-sahne-resim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
  }

  .v8-sahne-resim img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center top;
  }

  .v8-sahne::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 34% 48% at 14% 46%, rgba(190, 52, 14, 0.2), transparent 72%),   /* sol dumana tasarımdaki kor kızıllığı */
      radial-gradient(ellipse 30% 26% at 22% 92%, rgba(210, 70, 18, 0.18), transparent 70%),
      linear-gradient(180deg, rgba(5, 4, 3, 0.3) 0, rgba(5, 4, 3, 0.12) 4rem, transparent 7rem, transparent 78%, rgba(5, 4, 3, 0.3) 100%);
  }

  .v8-sahne-ic {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: inherit;
    padding: 8rem clamp(1rem, 3.4vw, 4rem) clamp(1.5rem, 4.2vw, 3.2rem);
  }

  .v8-sol {
    width: min(100%, clamp(27rem, 36vw, 40rem));
  }

  .v8-indir-baslik {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 0.7rem;
    color: var(--altin-acik);
    font-family: var(--font-baslik);
    font-size: 1.9rem;
    font-weight: 600;
  }

  .v8-indir-baslik::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--v8-altin), transparent);
  }

  .v8-plat-liste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
  }

  .v8-plat-liste .v8-dugme {
    width: 100%;
    min-height: 3.9rem;
    padding: 0.4rem 0.8rem;
    font-size: 1.15rem;
    font-weight: 500;
  }

  .v8-plat-liste li:first-child .v8-dugme:not(.v8-dugme--pasif) {
    background: linear-gradient(180deg, #8f2410, #5c1307);
  }

  .v8-plat-liste .v8-dugme small {
    display: block;
    margin-left: 0.1rem;
    color: var(--altin);
    font-family: var(--font-govde);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .v8-cagri {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
  }

  .v8-cagri .v8-dugme {
    justify-content: space-between;
    padding: 0.5rem 1.2rem;
    font-size: 1.3rem;
  }

  .v8-cagri .v8-dugme span:first-child {
    flex: 1 1 auto;
    text-align: center;
  }

  /* durum kutusu */
  .v8-durum {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.9rem;
    padding: 0.5rem 1.1rem;
    background: rgba(5, 4, 3, 0.82);
    border: 1px solid var(--v8-altin);
    box-shadow: inset 0 0 0 3px rgba(5, 4, 3, 0.9), inset 0 0 0 4px rgba(225, 181, 105, 0.35);
  }

  .v8-online {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding-right: 1.1rem;
    border-right: 1px solid var(--v8-altin-soluk);
    line-height: 1.05;
  }

  .v8-online strong {
    color: var(--altin-acik);
    font-family: var(--font-baslik);
    font-size: 1.9rem;
    font-weight: 600;
  }

  .v8-online span {
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 0.95rem;
  }

  .v8-faz {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--krem);
    font-family: var(--font-govde);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .v8-nokta {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--altin);
  }

  .v8-faz--acik .v8-nokta {
    background: var(--canli);
    box-shadow: 0 0 8px var(--canli);
  }

  .v8-nokta--sonuk {
    width: 0.6rem;
    height: 0.6rem;
    background: var(--v8-altin-soluk);
  }

  .v8-kanallar {
    display: flex;
    gap: 0.8rem;
    margin: 0 0 0 auto;
    padding: 0 0 0 1.1rem;
    list-style: none;
    border-left: 1px solid var(--v8-altin-soluk);
  }

  .v8-kanallar li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--krem);
    font-family: var(--font-govde);
    font-size: 0.68rem;
  }

  .v8-cizgi {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.3rem;
    font-weight: 500;
  }

  .v8-cizgi::before,
  .v8-cizgi::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--v8-altin);
  }

  .v8-cizgi::before {
    margin-right: 0.1rem;
  }

  .v8-cizgi span::before,
  .v8-cizgi span::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid var(--v8-altin);
    transform: rotate(45deg);
    vertical-align: middle;
  }

  .v8-cizgi span::before {
    margin-right: 0.9rem;
  }

  .v8-cizgi span::after {
    margin-left: 0.9rem;
  }

  /* =========================================================================
     ANA SAYFA — alt koyu şerit
     ========================================================================= */
  .v8-serit {
    background:
      radial-gradient(ellipse 45% 130% at 22% 115%, rgba(150, 44, 14, 0.30), transparent 70%),
      radial-gradient(ellipse 40% 110% at 82% 120%, rgba(120, 34, 12, 0.20), transparent 70%),
      linear-gradient(180deg, #120b08 0%, #0c0705 100%);
  }

  .v8-serit-ic {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1.45fr);
    gap: clamp(1rem, 2.6vw, 3rem);
    align-items: center;
    max-width: 120rem;
    margin: 0 auto;
    padding: clamp(1.8rem, 3.6vw, 3.4rem) clamp(1rem, 3.4vw, 4rem);
  }

  .v8-iki {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .v8-iki-metin {
    flex: 1 1 14rem;
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  .v8-iki-baslik {
    margin: 0 0 0.6rem;
    color: var(--krem);
    font-size: clamp(2.1rem, 3.1vw, 3.4rem);
    font-weight: 600;
    line-height: 1.05;
  }

  .v8-iki-metin p {
    max-width: 22rem;
    margin: 0;
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.3rem;
    line-height: 1.3;
  }

  .v8-iki-resim {
    flex: 0 1 21rem;
    min-width: 0;
    width: 21rem;
    height: auto;
    max-width: 48%;
  }

  .v8-tuy {
    align-self: stretch;
    width: 1px;
    min-height: 9rem;
    background: linear-gradient(180deg, transparent, var(--v8-altin) 20%, var(--v8-altin) 80%, transparent);
  }

  .v8-siralamalar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.4vw, 2.6rem);
  }

  .v8-kutu {
    min-width: 0;
  }

  .v8-kutu-baslik {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--v8-altin);
    color: var(--krem);
    font-size: 1.5rem;
    font-weight: 600;
  }

  .v8-kutu-baslik .v8-simge {
    color: var(--v8-altin);
  }

  .v8-tablo {
    width: 100%;
    border-collapse: collapse;
    color: var(--krem);
    font-family: var(--font-baslik);
    font-size: 1.15rem;
  }

  .v8-tablo thead th {
    padding: 0.35rem 0.4rem;
    color: var(--altin);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
  }

  .v8-tablo tbody th,
  .v8-tablo tbody td {
    padding: 0.4rem 0.4rem;
    border-top: 1px solid var(--v8-altin-soluk);
    font-weight: 500;
    text-align: left;
  }

  .v8-tablo .v8-say {
    text-align: right;
  }

  .v8-tablo th:first-child,
  .v8-tablo td:first-child {
    width: 2.8rem;
  }

  .v8-madalya {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid var(--altin);
    border-radius: 50%;
    background: #1a120a;
    color: var(--altin-acik);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .v8-madalya--2 {
    border-color: #c4c4c4;
    color: #e4e4e4;
  }

  .v8-madalya--3 {
    border-color: #b9774a;
    color: #e0a077;
  }

  .v8-bos {
    margin: 0.6rem 0;
    color: var(--krem-2);
    font-family: var(--font-baslik);
    font-size: 1.1rem;
    line-height: 1.35;
  }

  .v8-tumu {
    margin: 0.7rem 0 0;
    text-align: center;
  }

  .v8-tumu a {
    display: inline-block;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--v8-altin);
    color: var(--altin-acik);
    font-family: var(--font-baslik);
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
  }

  /* <picture> kutusuz: dar ekranda esnek öğe yine <img>; boş <source> esnek öğe olup gap'i ikilemesin */
  .v8-iki-kap {
    display: contents;
  }

  .v8-iki-kap > source {
    display: none;
  }

  /* =========================================================================
     ANA SAYFA — MASAÜSTÜ KAHRAMAN (>= 1280 px): TEK PARÇA SAHNE (SITETEKPARCA, Saruhan forum ac8e98bd 2026-10-27).
       Boş kitabe taşı, "iki ekran" çizimi ve iki boş sıralama levhası sahne resminin İÇİNE boyalıdır (img/v8/sahne-tekparca-a-*.webp,
       _ana.php <picture> min-width 1280px kaynağı); yazılar HTML olarak taşların iç yüzeyine oturur.
       Ölçek: resim 2:1, tepeye hizalı, yüksekliği 50vw ⇒ 1 resim pikseli (2560 tabanı) = --v8-p = 100vw / 2560. Taş kutuları resim pikseliyle
       verilir; konum, ölçü ve yazı boyu --v8-p'den türer, resimle birlikte ölçeklenir (yazı boyları okunurluk için alt sınırlı; 1280-2560 sınandı).
       Yatay: img object-fit: cover, kaydırma çubuğu varken resim (100vw - 100%) kadar ortadan kırpılır; sol konumlar bu kırpımı düşer.
     DOM değişmez: .v8-sahne / .v8-sahne-ic / .v8-serit / .v8-serit-ic / .v8-iki / .v8-siralamalar kutusuz olur; kitabe metni ve iki levha
     .v8-ana'ya göre mutlak konumlu, indirme bloğu resmin sakin sol alt bölgesinde akışta. 1280 altı bugünkü düzen (bu bölüm dokunmaz).
     Kurgu 2'nin ayrı varlıkları (kitabe-serit, levha-cerceve, levha-sutun, iki-cizim) burada kullanılmaz.
     ========================================================================= */
  @media (min-width: 1280px) {
    .v8-ana {
      --v8-p: calc(100vw / 2560);                                              /* 1 resim pikseli */
      --v8-yan: clamp(1rem, 3.4vw, 4rem);                                      /* .v8-sahne-ic yan boşluğu */
      /* taş iç yüzeyleri, resim px (x0 y0 x1 y1); kaynak outputs/site-yan-alan-20261027/tekparca/tamkare/duzeltme (aday d3), 2x kırpımla elle */
      --v8-kit-x0: 116;
      --v8-kit-y0: 228;
      --v8-kit-x1: 820;
      --v8-kit-y1: 332;
      --v8-lv1-x0: 1012;
      --v8-lv1-y0: 1026;
      --v8-lv1-x1: 1672;
      --v8-lv1-y1: 1204;
      --v8-lv2-x0: 1805;
      --v8-lv2-y0: 1026;
      --v8-lv2-x1: 2455;
      --v8-lv2-y1: 1204;
      --v8-sol-y: 880;                                                         /* indirme bloğu üstü: sakin sol alt bölge (oyuncu başları, PC, telefon üstte) */
      --v8-sol-x1: 940;                                                        /* indirme bloğu sağ sınırı: sol levha çerçevesinin (x 1000) solu */
      --v8-dikis: 48;                                                          /* resim alt kenarı yumuşak geçiş (levha alt çerçevesinin altındaki kaya) */
      /* yazı boyları, resim px (1920'de x 0.75 = onaylı maket onizleme-1920-d3) */
      --v8-kit-bas: 41;
      --v8-kit-alt: 22.7;
      --v8-lv-bas: 29.3;
      --v8-lv-govde: 22.7;
      --v8-lv-tumu: 24;
      --v8-golge: 0 1px 2px rgba(5, 4, 3, 0.95), 0 0 0.6em rgba(5, 4, 3, 0.75);   /* çatlak taş dokusunda okunurluk */
      position: relative;
      min-height: 50vw;
      padding: calc(var(--v8-sol-y) * var(--v8-p)) var(--v8-yan) clamp(1.5rem, 4.2vw, 3.2rem);
      overflow: hidden;
      background:
        radial-gradient(ellipse 60% 70% at 18% 100%, rgba(140, 36, 12, 0.35), transparent 70%),
        radial-gradient(ellipse 50% 60% at 70% 30%, rgba(160, 50, 10, 0.25), transparent 70%),
        #0a0706;
    }

    .v8-sahne,
    .v8-sahne-ic,
    .v8-serit,
    .v8-serit-ic,
    .v8-iki,
    .v8-siralamalar {
      display: contents;
    }

    /* resim tam görünür (2:1; 2112 px üstünde de kırpılmaz, levhalar alt kenara yakın); içerik uzarsa kahraman resmin altından koyu zeminle uzar */
    .v8-sahne-resim {
      bottom: auto;
      height: 50vw;
      -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--v8-dikis) * var(--v8-p)), transparent);
      mask-image: linear-gradient(180deg, #000 calc(100% - var(--v8-dikis) * var(--v8-p)), transparent);
    }

    .v8-sol {
      position: relative;
      z-index: 2;
      width: clamp(27rem, calc(var(--v8-sol-x1) * var(--v8-p) - var(--v8-yan)), 40rem);
    }

    .v8-tuy,
    .v8-iki-resim {
      display: none;
    }

    /* ---- kitabe: boyalı taşın iç yüzeyi ---- */
    .v8-iki-metin {
      position: absolute;
      z-index: 2;
      top: calc(var(--v8-kit-y0) * var(--v8-p));
      left: calc(var(--v8-kit-x0) * var(--v8-p) - (100vw - 100%) / 2);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: calc(4 * var(--v8-p));
      width: calc((var(--v8-kit-x1) - var(--v8-kit-x0)) * var(--v8-p));
      height: calc((var(--v8-kit-y1) - var(--v8-kit-y0)) * var(--v8-p));
      padding: 0 calc(16 * var(--v8-p));
      text-align: center;
      text-shadow: var(--v8-golge);
    }

    .v8-iki-baslik {
      margin: 0;
      color: var(--altin-acik);
      font-size: max(1.15rem, calc(var(--v8-kit-bas) * var(--v8-p)));
      line-height: 1.1;
    }

    .v8-iki-metin p {
      max-width: none;
      margin: 0;
      font-size: max(0.8rem, calc(var(--v8-kit-alt) * var(--v8-p)));
      line-height: 1.2;
      text-wrap: balance;
    }

    .v8-iki-ek {
      display: none;
    }

    /* ---- iki sıralama: her biri kendi boyalı levhasının iç yüzeyinde (başlık üstte, "Tümünü gör" alt çerçevenin üstünde) ---- */
    .v8-siralamalar > .v8-kutu:first-child {
      --v8-lx0: var(--v8-lv1-x0);
      --v8-ly0: var(--v8-lv1-y0);
      --v8-lx1: var(--v8-lv1-x1);
      --v8-ly1: var(--v8-lv1-y1);
    }

    .v8-siralamalar > .v8-kutu + .v8-kutu {
      --v8-lx0: var(--v8-lv2-x0);
      --v8-ly0: var(--v8-lv2-y0);
      --v8-lx1: var(--v8-lv2-x1);
      --v8-ly1: var(--v8-lv2-y1);
    }

    .v8-kutu {
      position: absolute;
      z-index: 2;
      top: calc(var(--v8-ly0) * var(--v8-p));
      left: calc(var(--v8-lx0) * var(--v8-p) - (100vw - 100%) / 2);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      width: calc((var(--v8-lx1) - var(--v8-lx0)) * var(--v8-p));
      height: calc((var(--v8-ly1) - var(--v8-ly0)) * var(--v8-p));
      padding: calc(10 * var(--v8-p)) calc(28 * var(--v8-p)) calc(12 * var(--v8-p));
      text-shadow: var(--v8-golge);
    }

    .v8-kutu-baslik {
      justify-content: center;
      gap: 0.4em;
      margin: 0 0 calc(5 * var(--v8-p));
      padding-bottom: calc(5 * var(--v8-p));
      color: var(--altin-acik);
      font-size: max(1rem, calc(var(--v8-lv-bas) * var(--v8-p)));
      line-height: 1.1;
    }

    .v8-kutu-baslik .v8-simge {
      width: 0.85em;
      height: 0.85em;
    }

    /* gövde iki dengeli satır (iki levhada aynı ritim; tek satır levhayı kenardan kenara doldurmasın) */
    .v8-kutu .v8-bos {
      max-width: max(calc(560 * var(--v8-p)), 18.5rem);
      margin: calc(5 * var(--v8-p)) auto 0;
      color: var(--krem);
      font-size: max(0.78rem, calc(var(--v8-lv-govde) * var(--v8-p)));
      line-height: 1.25;
      text-align: center;
      text-wrap: balance;
    }

    .v8-kutu .v8-tumu {
      margin: auto 0 0;
      padding-top: calc(4 * var(--v8-p));
      line-height: 1.15;
    }

    .v8-kutu .v8-tumu a {
      padding-bottom: calc(2 * var(--v8-p));
      font-size: max(0.82rem, calc(var(--v8-lv-tumu) * var(--v8-p)));
    }

    /* oyun açılınca (dolu durum): sütun başlıksız 3 satır; başlık satırı sıfır yükseklikte (ekran okuyucuda okunur), sabit tablo düzeninde
       sütun genişliklerini verir. Ad tek satır (uzun ad levhayı uzatmasın); tam ad "Tümünü gör" sayfasında. */
    .v8-kutu .v8-tablo {
      --v8-tb: max(0.78rem, calc(21 * var(--v8-p)));                          /* satır yazı boyu; sütun genişlikleri bundan (thead font-size 0: em kullanılamaz) */
      table-layout: fixed;
      margin-top: calc(2 * var(--v8-p));
      font-size: var(--v8-tb);
    }

    .v8-kutu .v8-tablo thead th {
      height: 0;
      padding: 0;
      border: 0;
      font-size: 0;
      line-height: 0;
      overflow: hidden;
    }

    .v8-kutu .v8-tablo thead th:first-child {
      width: calc(var(--v8-tb) * 2);
    }

    .v8-kutu .v8-tablo thead th:last-child {
      width: calc(var(--v8-tb) * 4.4);
    }

    .v8-kutu .v8-tablo tbody th,
    .v8-kutu .v8-tablo tbody td {
      padding: 0 0.3em;
      line-height: 1.15;
    }

    .v8-kutu .v8-tablo tbody tr:first-child > * {
      border-top: 0;
    }

    .v8-kutu .v8-tablo tbody th {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .v8-kutu .v8-madalya {
      width: 1.55em;
      height: 1.55em;
      font-size: 0.72em;
    }

    /* dolu durumda başlık + 3 satır + "Tümünü gör" taşın yüksekliğine alt alta sığmaz (1280'de taş 89 px): "Tümünü gör" başlık satırının sağına */
    .v8-kutu:has(.v8-tablo) .v8-kutu-baslik {
      justify-content: flex-start;
    }

    .v8-kutu:has(.v8-tablo) .v8-tumu {
      position: absolute;
      top: calc(10 * var(--v8-p) + 0.1em);
      right: calc(28 * var(--v8-p));
      margin: 0;
      padding: 0;
    }
  }

  /* =========================================================================
     ALTBİLGİ
     ========================================================================= */
  .v8-alt {
    background: #050403;
    border-top: 1px solid var(--v8-altin-soluk);
    color: var(--krem-2);
  }

  .v8-alt-ic {
    max-width: 120rem;
    margin: 0 auto;
    padding: 2.4rem clamp(1rem, 3.4vw, 4rem) 2rem;
  }

  .v8-sutunlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.6rem 2rem;
  }

  .v8-sutun-baslik {
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--v8-altin-soluk);
    color: var(--altin-acik);
    font-size: 1.25rem;
  }

  .v8-sutun ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .v8-sutun li {
    margin: 0.2rem 0;
  }

  .v8-sutun a,
  .v8-alt a {
    color: var(--krem-2);
    text-decoration: none;
  }

  .v8-sutun a:hover,
  .v8-alt a:hover {
    color: var(--altin-acik);
    text-decoration: underline;
  }

  .v8-sutun-alt,
  .v8-sutun-not {
    margin: 0.6rem 0 0.2rem;
    font-size: 0.85rem;
  }

  .v8-alt-alt {
    margin-top: 1.8rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--v8-altin-soluk);
    font-size: 0.9rem;
  }

  .v8-kunye {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
  }

  .v8-kunye li {
    padding: 0.15rem 0.7rem;
    border: 1px solid var(--v8-altin-soluk);
    color: var(--krem);
    font-size: 0.82rem;
  }

  .v8-beyan {
    margin: 0 0 0.5rem;
    max-width: 62rem;
  }

  .v8-alt-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.6rem;
    margin-top: 0.8rem;
  }

  .v8-alt-satir p {
    margin: 0;
  }

  .v8-alt .kabuk-dil ul {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .v8-alt .kabuk-dil-baglanti {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--v8-altin-soluk);
    text-decoration: none;
  }

  /* =========================================================================
     TELEFON / DAR EKRAN
     ========================================================================= */
  @media (max-width: 1100px) {
    .v8-ust-ic {
      gap: 1rem;
      justify-content: space-between;
    }

    .v8-ham {
      position: relative;
      z-index: 70;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      padding: 0;
      border: 1px solid var(--v8-altin);
      border-radius: 3px;
      background: rgba(5, 4, 3, 0.7);
      cursor: pointer;
    }

    .v8-ham-cizgi,
    .v8-ham-cizgi::before,
    .v8-ham-cizgi::after {
      display: block;
      width: 1.4rem;
      height: 2px;
      background: var(--altin-acik);
    }

    .v8-ham-cizgi {
      position: relative;
    }

    .v8-ham-cizgi::before,
    .v8-ham-cizgi::after {
      content: "";
      position: absolute;
      left: 0;
    }

    .v8-ham-cizgi::before {
      top: -0.45rem;
    }

    .v8-ham-cizgi::after {
      top: 0.45rem;
    }

    .v8-perde {
      position: fixed;
      inset: 0;
      z-index: 55;
      background: rgba(0, 0, 0, 0.6);
    }

    .v8-ust-acik .v8-perde {
      display: block;
    }

    .v8-cekmece {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 65;
      display: none;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 1.2rem;
      width: min(88vw, 24rem);
      padding: 5.5rem 1.4rem 2rem;
      overflow-y: auto;
      background: #0a0807;
      border-left: 1px solid var(--v8-altin);
    }

    .v8-cekmece.v8-cekmece-acik {
      display: flex;
    }

    html.v8-kilit {
      overflow: hidden;
    }

    .v8-liste {
      flex-direction: column;
      align-items: stretch;
      padding: 0;
      background: transparent;
    }

    .v8-liste > .v8-oge + .v8-oge::before {
      display: none;
    }

    .v8-oge {
      flex-direction: column;
      align-items: stretch;
      border-bottom: 1px solid var(--v8-altin-soluk);
    }

    .v8-tetik {
      width: 100%;
      padding: 0.85rem 0.2rem;
      text-align: left;
      font-size: 1.45rem;
    }

    .v8-tetik::after {
      content: "+";
      float: right;
      color: var(--v8-altin);
    }

    .v8-acik > .v8-tetik::after {
      content: "\2212";
    }

    .v8-panel,
    .v8-panel--sag {
      position: static;
      min-width: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
      padding: 0 0 0.6rem 0.8rem;
    }

    @media (hover: hover) {
      .v8-oge:not(.v8-hesap):hover > .v8-panel,
      .v8-oge:focus-within > .v8-panel {
        display: none;
      }

      .v8-acik > .v8-panel {
        display: block;
      }
    }

    .v8-sag {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
    }

    .v8-sag .v8-dugme {
      width: 100%;
    }

    .v8-giris {
      text-align: center;
      padding: 0.5rem;
    }

    .v8-logo img {
      height: 4.4rem;
      width: auto;
      filter: drop-shadow(0 0 0.5rem rgba(5, 4, 3, 0.9)) drop-shadow(0 0 1.2rem rgba(5, 4, 3, 0.6));   /* telefonda logo Anka kanadına biner: okunurluk */
    }

    .v8-ust-ic {
      min-height: 4.6rem;
    }
  }

  @media (max-width: 899px) {
    .v8-sahne {
      min-height: 0;
      background: #0a0706;
    }

    /* telefon sahnesi 1080x1920 (alt üçte bir koyu): görsel kabı doldurur, düğmeler alttaki koyu bölgeye oturur */
    .v8-sahne-resim img {
      height: auto;
      object-fit: fill;
    }

    .v8-sahne::after {
      background: linear-gradient(180deg, rgba(5, 4, 3, 0.35) 0, rgba(5, 4, 3, 0.1) 3.5rem, transparent 6rem, transparent 60%, rgba(5, 4, 3, 0.55) 100%);
    }

    .v8-sahne-ic {
      display: block;
      min-height: 0;
      padding: calc(100vw * 1.32) 1rem 1.6rem; /* 1.32 = telefon sahnesinde karakter ayaklarının (≈1.30 genişlik) hemen altı; sahne değişince yeniden ölç */
    }

    .v8-sol {
      width: 100%;
    }

    .v8-plat-liste .v8-dugme {
      flex-direction: column;
      gap: 0.2rem;
      min-height: 4.4rem;
      padding: 0.4rem 0.3rem;
      font-size: 1rem;
    }

    .v8-plat-ad {
      align-items: center;
    }

    .v8-plat-liste .v8-dugme > .v8-simge:last-child {
      display: none;
    }

    .v8-plat-liste .v8-dugme small {
      margin: 0;
    }

    .v8-cagri {
      grid-template-columns: 1fr;
    }

    .v8-durum {
      flex-wrap: wrap;
      gap: 0.8rem;
    }

    .v8-kanallar {
      margin-left: 0;
      padding-left: 0;
      border-left: 0;
      width: 100%;
      justify-content: space-between;
      border-top: 1px solid var(--v8-altin-soluk);
      padding-top: 0.6rem;
    }

    .v8-serit-ic {
      grid-template-columns: 1fr;
      gap: 1.8rem;
    }

    .v8-iki {
      flex-direction: column;
      align-items: flex-start;
    }

    .v8-iki-metin {
      flex: none;   /* sütunda flex-basis 14rem yükseklik olur: metinle görsel arasında boşluk */
    }

    .v8-iki-resim {
      flex: none;
      width: 100%;
      max-width: 26rem;
    }

    .v8-tuy {
      display: none;
    }

    .v8-siralamalar {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .v8-iki-metin p {
      max-width: none;
    }
  }
}