/* ============================================================================
   ATÖLYE · KAHRAMAN + KAYAN ŞERİT
   ============================================================================
   ÖLÇÜLDÜ (harbor): kahraman 1000px, tam genişlik. Bizde min-height —
   sabit yükseklik mobilde adres çubuğu kayınca içeriği KIRPAR.
   ========================================================================= */

.at-kh {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: clip;
    background: var(--at-zemin-2);
}
.at-kh--tam   { min-height: 100svh; }
.at-kh--buyuk { min-height: min(1000px, 92svh); }   /* ölçülen 1000px */
.at-kh--orta  { min-height: min(680px, 78svh); }

.at-kh__zemin { position: absolute; inset: 0; z-index: 0; }
.at-kh__zemin img { width: 100%; height: 100%; object-fit: cover; }
/* Görsel varsa metin okunabilirliği için kademe. Düz siyah katman değil:
   üstte şeffaf, altta koyu — metin alt hizada duruyor. */
.at-kh__zemin::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.06) 42%, rgba(0,0,0,0.62) 100%);
}
.at-kh:has(.at-kh__zemin) :is(.at-kh__baslik, .at-kh__alt, .at-kh__etiket) { color: #fff; }
.at-kh:has(.at-kh__zemin) .at-kh__alt { color: rgba(255,255,255,0.86); }

.at-kh__ic {
    position: relative; z-index: 1;
    padding-block: var(--at-r-6) var(--at-r-5);
    display: flex; flex-direction: column; gap: var(--at-r-0);
    max-width: 100%;
}
.at-kh--orta .at-kh__ic { align-items: center; text-align: center; }

.at-kh__baslik { max-width: 17ch; }
.at-kh--orta .at-kh__baslik { max-width: 20ch; }
/* İMZA: dev punto içinde tek kelime serif italik olarak karakter değiştirir. */
.at-kh__vurgu { font-style: italic; color: var(--at-vurgu); }
.at-kh:has(.at-kh__zemin) .at-kh__vurgu { color: #f0c9b4; }

.at-kh__alt { max-width: 52ch; font-size: clamp(17px, 1.5vw, var(--at-y-xl)); }
.at-kh__eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--at-r-0); }
.at-kh:has(.at-kh__zemin) .at-dugme--ikincil { color: #fff; border-color: rgba(255,255,255,0.42); }
.at-kh:has(.at-kh__zemin) .at-dugme--ikincil:hover { border-color: #fff; }

/* Kaydırma ipucu — bir ÇAPA, script değil */
.at-kh__ipucu {
    position: absolute; z-index: 2; bottom: 26px; left: 50%; transform: translateX(-50%);
    display: grid; place-items: center; width: 44px; height: 44px;   /* 2.5.5 hedefi */
    text-decoration: none;
}
.at-kh__ipucu-iz {
    width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 999px;
    color: var(--at-metin-3); position: relative;
}
.at-kh:has(.at-kh__zemin) .at-kh__ipucu-iz { color: rgba(255,255,255,0.72); }
.at-kh__ipucu-iz::after {
    content: ''; position: absolute; left: 50%; top: 7px; width: 2.5px; height: 7px;
    margin-left: -1.25px; border-radius: 2px; background: currentColor;
    animation: at-ipucu 1.9s ease-in-out infinite;
}
@keyframes at-ipucu { 0%,100% { transform: translateY(0); opacity: 1 } 55% { transform: translateY(9px); opacity: 0.25 } }

@media (max-width: 900px) {
    .at-kh--buyuk, .at-kh--tam { min-height: 76svh; }
    .at-kh__ic { padding-block: var(--at-r-4) var(--at-r-3); }
    .at-kh__baslik { max-width: 100%; }
}

/* ---------------------------------------------------------------- ŞERİT --- */
.at-serit {
    overflow: hidden;
    padding-block: var(--at-r-0);
    border-block: 1px solid var(--at-cizgi);
    background: var(--at-zemin);
}
.at-serit--ters { background: var(--at-ustu); border-color: transparent; }
.at-serit--ters :is(.at-serit__oge, .at-serit__ayirac) { color: #f7f4f0; }

.at-serit__ray { display: flex; width: max-content; }
.at-serit__liste {
    display: flex; align-items: center; gap: 0;
    list-style: none; margin: 0; padding: 0;
    animation: at-kay linear infinite;
    animation-duration: var(--at-serit-sure, 34s);
}
[data-yon="sag"] .at-serit__liste { animation-direction: reverse; }
.at-serit--yavas  { --at-serit-sure: 56s; }
.at-serit--orta   { --at-serit-sure: 34s; }
.at-serit--hizli  { --at-serit-sure: 20s; }

/* WCAG 2.2.2: 5 sn'den uzun otomatik hareket DURDURULABİLMELİ.
   Duraklatma düğmesi yerine hover/odak — ayrıca reduced-motion çekirdekte. */
.at-serit:hover .at-serit__liste,
.at-serit:focus-within .at-serit__liste { animation-play-state: paused; }

.at-serit__oge {
    display: flex; align-items: center; gap: var(--at-r-0);
    padding-inline: var(--at-r-0);
    font-family: var(--at-serif);
    font-size: clamp(24px, 3.4vw, var(--at-y-5xl));
    line-height: 1.1;
    color: var(--at-metin);
    white-space: nowrap;
}
.at-serit__ayirac { color: var(--at-vurgu); font-size: 0.62em; }
.at-serit__oge img { width: auto; height: 34px; opacity: 0.62; filter: grayscale(1); }

@keyframes at-kay { from { transform: translateX(0) } to { transform: translateX(-100%) } }