/* ─── ape-sections.css — Spotlight (.aps), Vitrin Kartları (.apg), Keşfet (.apd) ─────────────────────────
   apechain.com SectionSpotlight / SectionGridCarousel / SectionDiscoverApps ölçüleri birebir. */

/* ═══════════ SPOTLIGHT ═══════════ */
.aps {
    position: relative; min-height: 100svh; padding-top: 6rem; padding-bottom: 6rem; color: #000;
    overflow: hidden; -webkit-font-smoothing: antialiased;
}
/* Arka plan kart ızgarası (Background_root): --grid-width 150% / 75%, yükseklik auto / 100svh, 2 sütun, perspektif 1000px */
.aps-bg {
    --grid-width: 150%; --grid-height: auto; --grid-columns: 2; --perspective: 1000px;
    --grid-gap: calc(3 * var(--ape-col) + 2 * var(--ape-gutter));
    position: absolute; left: 0; right: 0; top: 0; z-index: 0;
    display: grid; place-items: center; width: 100%; perspective: var(--perspective);
    padding-left: var(--ape-margin); padding-right: var(--ape-margin); pointer-events: none;
}
@media (min-width: 768px) { .aps-bg { --grid-width: 75%; --grid-height: 100svh; } }
.aps-bgwrap {
    height: var(--grid-height); width: var(--grid-width); display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr); gap: calc(var(--grid-gap) * .75) var(--grid-gap);
    transform-style: preserve-3d;
}
.aps-bgitem {
    position: relative; width: calc(3 * var(--ape-col) + 2 * var(--ape-gutter)); aspect-ratio: 3 / 4; height: auto;
    display: grid; place-items: center; border-radius: 3.75%; will-change: transform, opacity;
}
.aps-bgcard { position: relative; width: 100%; height: 100%; border-radius: .5rem; overflow: hidden; transform: perspective(800px) rotateX(7.5deg) rotateY(-15deg) rotateZ(2.5deg); }
.aps-bgcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.aps-grid {
    position: relative; z-index: 1; min-height: 100svh;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1rem; align-items: center;
}
@media (min-width: 1024px) { .aps-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.aps-main { grid-column: span 6; max-width: 800px; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 768px) { .aps-main { gap: 1.5rem; } }
@media (min-width: 1024px) { .aps-main { grid-column: 2 / span 6; } }
/* Rozet: referansta 213×38 png ("APECHAIN | SPOTLIGHT") → metinden iki kutu */
.aps-badge { display: inline-flex; height: 38px; font-family: var(--ape-display); font-size: 1.75rem; line-height: 38px; text-transform: uppercase; letter-spacing: .04em; }
.aps-badge-a { padding: 0 .5rem; border: 2px solid #000; color: #000; }
.aps-badge-b { padding: 0 .5rem; background: #000; color: #fff; border: 2px solid #000; }
.aps-title { font-family: var(--ape-display); font-weight: 400; text-transform: uppercase; font-size: 3.5rem; line-height: .785; margin: 0; color: inherit; }
@media (min-width: 768px) { .aps-title { font-size: 7.5rem; } }
.aps-desc { font-family: var(--ape-sans); font-size: .875rem; line-height: 1.3; letter-spacing: .24px; }
@media (min-width: 768px) { .aps-desc { font-size: 1rem; width: 83.333%; } }
.aps-desc p { margin: 0 0 1em; } .aps-desc p:last-child { margin-bottom: 0; }
.aps-ctas { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.aps-ctas .ape-btn { flex: none; align-self: flex-start; }

.aps-side { position: relative; grid-column: 3 / span 4; padding: 2rem 0; color: #fff; }
@media (min-width: 768px) { .aps-side { padding: 0; } }
@media (min-width: 1024px) { .aps-side { grid-column: 9 / span 4; } }
/* Eğik kart (module 38772): gradyan çerçeve + koyu alt geçiş + görsel; masaüstünde scale 1.5 + fare eğimi */
.aps-card {
    position: absolute; max-width: 600px; padding: 1px; top: 30%; left: 10%; right: -50%;
    transform: perspective(800px) scale(1.5) rotateX(7.5deg) rotateY(-15deg) rotateZ(7.27deg); transform-style: preserve-3d;
}
@media (min-width: 768px) { .aps-card { position: relative; padding: 2px; top: auto; left: auto; right: auto; } }
.aps-card-border { position: absolute; inset: 0; border-radius: 1rem; overflow: hidden; background: linear-gradient(45deg, #A281FF 10%, #EB8280 33%, #EBBF9A 66%, #89D0FF 90%); }
.aps-card-shade { position: absolute; inset: 1px; z-index: 1; border-radius: 1rem; overflow: hidden; background: linear-gradient(182deg, rgba(24,83,117,0) 39.56%, rgba(24,83,117,.8) 93.99%); }
@media (min-width: 768px) { .aps-card-shade { inset: 2px; } }
.aps-card-img { position: relative; display: block; width: 100%; height: auto; border-radius: 1rem; }
.aps-cardtext { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; padding-top: 7.5rem; padding-bottom: 4.375rem; }
@media (min-width: 768px) { .aps-cardtext { position: absolute; bottom: 0; left: 0; padding: 0; } }
.aps-cardtitle { font-family: var(--ape-display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: .785; margin: 0; color: #fff; }
@media (min-width: 768px) { .aps-cardtitle { font-size: 3rem; } }
.aps-carddesc { max-width: 200px; font-family: var(--ape-mono); font-size: .75rem; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; margin: 0; color: #fff; }
@media (min-width: 768px) { .aps-carddesc { max-width: 305px; font-size: .75rem; } }
.aps-cardtext .ape-btn { align-self: flex-start; }

/* ═══════════ VİTRİN KARTLARI (grid carousel) ═══════════ */
.apg {
    position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: .5rem; row-gap: 2rem;
    padding-top: 6rem; padding-bottom: 6rem; overflow: hidden; color: #000; -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { .apg { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: baseline; } }
.apg-head { grid-column: 1 / span 3; display: flex; align-items: baseline; gap: .5rem; }
@media (min-width: 768px) { .apg-head { grid-column: 2 / span 8; } }
.apg-head .ape-icon { font-size: 2rem; }
.apg-title { font-family: var(--ape-display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1.12; margin: 0; color: inherit; }
.apg-headlink { grid-column: span 3; display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; padding-bottom: .25rem; }
@media (min-width: 768px) { .apg-headlink { padding-bottom: 0; } }
.apg-slider { grid-column: 1 / span 6; width: 100%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.apg-slider.is-dragging { cursor: grabbing; }
@media (min-width: 768px) { .apg-slider { grid-column: 2 / span 10; } }
.apg-track { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; width: max-content; will-change: transform; }
/* Birden çok panel (genel + hizmet kategorileri): display:flex/grid [hidden]'ı ezmesin */
.apg-track[hidden] { display: none !important; }

/* Kategori paneli: sürüklenmeyen, kart sayısına göre dengeli ızgara (VitrinKartlariViewComponent.IzgaraDuzeni).
   Genişlik = şerit → initGrid'in minX'i 0, sürükleme hareket etmez. Telefon: 2 sütun, tek sayıda kartta ilki tam satır. */
.apg-track.apg-izgara { display: grid; width: 100%; gap: .5rem; transform: none !important; }
/* Sütun tanımı tek sınıfta: düzen sınıfları (.apg-izgara--N, aynı özgüllük, sonra gelir) ezebilsin */
.apg-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apg-izgara .apg-cell { width: auto; max-width: none; min-width: 0; }
.apg-izgara--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767.98px) { .apg-izgara--tek > :first-child { grid-column: 1 / -1; } }
@media (min-width: 768px) {
    .apg-track.apg-izgara { gap: 1.5rem; }
    .apg-izgara--1 { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
    .apg-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* bento: 1 büyük (2 satır) + 2×2 küçük — büyük kartın oranı ≈ 2 satır + boşluk */
    .apg-izgara--bento { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
    .apg-izgara--bento > :first-child { grid-row: span 2; display: flex; }
    /* Büyük kart oranla değil iki satır + boşluk yüksekliğiyle (oranla ~24px kısa kalıyordu) */
    .apg-izgara--bento > :first-child .apg-card { flex: 1; height: auto; padding-top: 0; aspect-ratio: auto; }
    .apg-izgara--bento > :first-child .apg-name--uzun { width: 85%; font-size: 3rem; }
}
@media (min-width: 1024px) { .apg-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.apg-slider.is-izgara { cursor: default; }

/* Hizmet kategorisi düğmeleri (aria-pressed) — başlık ile şerit arası, HER genişlikte tek satır ve kompakt.
   Telefonda kenardan kenara yatay kaydırma (çubuk gizli); ≥768'de başlık hizasından sağ kenara (≥1280'de 7 düğme sığar,
   altında ince kaydırma çubuğuyla kayar). Seçili = ape-btn--secondary mavisi. */
.apg-tabs {
    grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: .375rem; margin: -1rem calc(-1 * var(--ape-margin)) 0;
    padding: 0 var(--ape-margin) 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.apg-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .apg-tabs { grid-column: 2 / -1; margin: -1rem 0 0; padding: 0 0 4px; scrollbar-width: thin; }
    .apg-tabs::-webkit-scrollbar { display: block; height: 4px; }
    .apg-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 4px; }
}
.apg-tab {
    flex: none; min-height: 38px; padding: .4rem .6rem; border-radius: .5rem; border: 1px solid rgba(0,0,0,.16); background: transparent;
    color: #000; cursor: pointer; white-space: nowrap; -webkit-font-smoothing: antialiased;
    font-family: var(--ape-mono); font-size: .6875rem; font-weight: 500; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase;
    transition: background-color .25s, border-color .25s, color .25s, box-shadow .3s;
}
@media (max-width: 767.98px) { .apg-tab { min-height: 44px; } }   /* dokunma hedefi */
.apg-tab:hover { border-color: #000; }
.apg-tab:focus-visible { outline: 2px solid var(--ape-blue); outline-offset: 2px; }
.apg-tab[aria-pressed="true"] {
    color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(0,167,250,.35);
    background: radial-gradient(90% 120% at 30% 10%, #00A7FA 0%, #0054FA 100%);
}
@media (min-width: 768px) { .apg-track { gap: 1.5rem; } }
.apg-group { flex: none; display: flex; flex-direction: row; flex-wrap: nowrap; gap: .5rem; align-content: stretch; }
@media (min-width: 768px) {
    .apg-group { width: calc(5 * var(--ape-col) + 4 * var(--ape-gutter)); max-width: 902px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); gap: 1.5rem; }
    .apg-group--one { grid-template-columns: 1fr; grid-template-rows: auto; }
}
.apg-cell { width: calc(3 * var(--ape-col) + 2 * var(--ape-gutter)); max-width: 160px; }
@media (min-width: 768px) { .apg-cell { width: auto; max-width: none; } }
.apg-card { display: block; position: relative; text-decoration: none; color: #fff; height: 0; padding-top: calc(100% / 160 * 200); aspect-ratio: 160 / 200; border-radius: .5rem; overflow: hidden; }
.apg-cardlink { position: absolute; inset: 0; z-index: 3; border-radius: .5rem; }
.apg-cardlink:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (min-width: 768px) { .apg-card { padding-top: calc(100% / 268 * 273); aspect-ratio: 268 / 273; } }
.apg-preview { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: .5rem; overflow: hidden; background: #111; }
.apg-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.apg-preview::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to top, #000 0%, transparent 60%); }
.apg-cat { position: absolute; top: .75rem; left: .75rem; z-index: 2; }
/* Açık tonlu görsellerde beyaz-%30 pill okunmuyordu ("SEKTÖR"/"HİZMET") → koyu cam zemin (Son Yazılar ile aynı) */
.apg-cat .ape-pill { background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (min-width: 768px) { .apg-cat { top: 1rem; left: 1rem; } }
.apg-content { position: absolute; inset: 0; padding: .75rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; z-index: 1; }
@media (min-width: 768px) { .apg-content { padding: 1rem; } }
.apg-content-inner { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.apg-name { width: 75%; margin: 0; color: inherit; font-weight: 400; font-family: var(--ape-display); text-transform: uppercase; font-size: 2rem; line-height: 1; }
@media (min-width: 768px) { .apg-name { font-size: 3rem; } }
/* 20+ karakterli adlar (hizmet adları): telefonda 160px kartta ve masaüstü 2×2 küçük kartta taşmasın; büyük kartta tam boy */
.apg-name--uzun { width: 100%; font-size: 1.5rem; }
@media (min-width: 768px) { .apg-name--uzun { font-size: 2.25rem; } .apg-group--one .apg-name--uzun { width: 85%; font-size: 3rem; } }
.apg-sub { margin: 0; font-family: var(--ape-mono); font-size: .75rem; line-height: 1; text-transform: uppercase; }
.apg-preview picture, .apd-thumb picture, .apf-strip-item picture { display: contents; }

/* ═══════════ KEŞFET (discover) ═══════════ */
.apd { position: relative; display: flex; flex-direction: column; gap: 4rem; padding-top: 6rem; padding-bottom: 6rem; color: #000; overflow: hidden; -webkit-font-smoothing: antialiased; }
@media (min-width: 1024px) { .apd { min-height: 80svh; } }
.apd-inner { margin: auto 0; display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 1024px) { .apd-inner { gap: 6rem; } }
.apd-groups { display: flex; flex-direction: column; align-items: center; }
.apd-group { display: flex; overflow: hidden; margin: 0; }
@media (min-width: 1024px) { .apd-group { margin: 0; } }
.apd-dup { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; will-change: transform; }
.apd-dup:not(:first-child) { display: none; }
@media (min-width: 1024px) {
    .apd-dup { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0; }
    .apd-dup:not(:first-child) { display: flex; }
    .apd.is-visible .apd-dup { animation: apdMarquee var(--apd-dur, 48s) linear infinite running; }
    .apd-group:nth-child(2n) .apd-dup { animation-direction: reverse; }
}
@keyframes apdMarquee { 0% { transform: translateX(0); } to { transform: translateX(-100%); } }
/* Hover'da şerit durur: etiket okunur, tıklanır. */
@media (min-width: 1024px) { .apd-group:hover .apd-dup { animation-play-state: paused; } }
.apd-label {
    flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: 1rem; color: inherit; text-decoration: none;
    font-family: var(--ape-display); font-size: 3.5rem; text-transform: uppercase; line-height: .785;
}
@media (min-width: 768px) { .apd-label { font-size: 120px; } }
@media (min-width: 1024px) { .apd-label { font-size: clamp(120px, calc(120 / 900 * 100vh), 200px); margin-right: 3rem; } }
/* Etiket kutusu: Bebas Neue .785 satır yüksekliğinde Türkçe diakritikler (İ noktası, Ç/Ş çengeli) kutudan taşar ve
   .apd-group'un overflow:hidden'ı onları kırpar ("BİLETİ" → "BILETI"). Ana ve klon metne aynı iç boşluk verilir
   (.2em üst / .16em alt): kutu glifin tamamını içerir, grup da bu yüksekliği alır → hiçbir katman harf kırpmaz.
   Klon tam bir kutu aşağıda bekler; hover'da ikisi birlikte kendi yükseklikleri kadar (−100%) kayar. */
.apd-lbl { display: block; position: relative; overflow: hidden; }
.apd-lbl-main, .apd-lbl-clone { display: block; padding: .2em 0 .16em; transition: transform .6s cubic-bezier(.45,.03,.52,.96); }
.apd-lbl-clone { position: absolute; top: 100%; left: 0; width: 100%; color: var(--ape-blue); }
.apd-label:hover .apd-lbl-main, .apd-label:hover .apd-lbl-clone { transform: translateY(-100%); }
.apd-thumb { position: relative; display: none; width: .785em; height: .785em; border-radius: 1rem; background: var(--ape-blue); overflow: hidden; }
@media (min-width: 1024px) { .apd-thumb { display: block; } }
.apd-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.apd-cta { display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .apd.is-visible .apd-dup { animation: none; }
}

/* Telefon: anasayfanın son bölümü (Keşfet) ile footer arası boşluk küçülür */
@media (max-width: 767.98px) { .apd { padding-bottom: 2.5rem; } }