/* ============================================================================
   ATÖLYE · BAŞLIK + DÜĞME + GÖRÜNÜM SEÇİCİ
   ============================================================================ */

.at-baslikc {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--at-zemin) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color var(--at-gecis-hizli), background var(--at-gecis-hizli);
}
/* Kaydırınca çizgi belirir. JS'siz: sayfa başındaki nöbetçi ögeye göre değil,
   sticky'nin kendi durumuna göre — animation-timeline destekleyen tarayıcıda
   otomatik, desteklemeyende çizgi hep durur (kabul edilebilir gerileme). */
@supports (animation-timeline: scroll()) {
    .at-baslikc {
        animation: at-baslik-cizgi linear both;
        animation-timeline: scroll();
        animation-range: 0 120px;
    }
    @keyframes at-baslik-cizgi { to { border-bottom-color: var(--at-cizgi); } }
}

.at-baslikc__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 78px;
}
.at-baslikc__marka {
    /* ÖLÇÜLDÜ: 50×38px idi — WCAG 2.5.5'in 44px eşiğinin altında. Marka
       bağlantısı cümle içi değil, tek başına duran bir hedef; "Inline"
       istisnası ONA UYGULANMAZ. min-height ile eşiğe çekildi. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--at-serif);
    font-size: var(--at-y-xl);
    letter-spacing: -0.01em;
    color: var(--at-metin);
    text-decoration: none;
    flex: 0 0 auto;
}
.at-baslikc__gez { flex: 1 1 auto; display: flex; justify-content: center; }
.at-baslikc__liste { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.at-baslikc__oge { position: relative; }
.at-baslikc__oge > a {
    display: block;
    padding: 10px 16px;
    font-size: var(--at-y-s);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--at-metin-2);
    text-decoration: none;
    border-radius: 999px;
    transition: color var(--at-gecis-hizli), background var(--at-gecis-hizli);
}
.at-baslikc__oge > a:hover,
.at-baslikc__oge > a:focus-visible { color: var(--at-metin); background: var(--at-zemin-2); }

/* Açılır alt menü — hover VE klavye (:focus-within) */
.at-baslikc__alt {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 216px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: var(--at-zemin);
    border: 1px solid var(--at-cizgi);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--at-gecis-hizli), transform var(--at-gecis-hizli), visibility var(--at-gecis-hizli);
}
.at-baslikc__oge--acilir:hover > .at-baslikc__alt,
.at-baslikc__oge--acilir:focus-within > .at-baslikc__alt {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.at-baslikc__alt a {
    display: block; padding: 9px 14px; border-radius: 9px;
    font-size: var(--at-y-s); color: var(--at-metin-2); text-decoration: none;
}
.at-baslikc__alt a:hover, .at-baslikc__alt a:focus-visible { background: var(--at-zemin-2); color: var(--at-metin); }

.at-baslikc__sag { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* --- DÜĞME --- */
.at-dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px;                 /* WCAG 2.5.5 dokunma hedefi */
    padding: 0 26px;
    font-family: var(--at-sans);
    font-size: var(--at-y-s);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--at-vurgu-metin);
    background: var(--at-vurgu);
    border: 1px solid var(--at-vurgu);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--at-gecis-hizli), opacity var(--at-gecis-hizli);
}
.at-dugme:hover { transform: translateY(-2px); opacity: 0.92; }
.at-dugme:active { transform: translateY(0); }
.at-dugme--ikincil {
    color: var(--at-metin); background: transparent; border-color: var(--at-cizgi);
}
.at-dugme--ikincil:hover { border-color: var(--at-metin); }
.at-dugme--kucuk { min-height: 44px; padding: 0 20px; font-size: var(--at-y-xs); }

/* --- GÖRÜNÜM SEÇİCİ --- */
.at-gorunum {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; min-width: 44px; padding: 0 14px;
    font-family: var(--at-sans); font-size: var(--at-y-xs); font-weight: 500;
    color: var(--at-metin-2); background: transparent;
    border: 1px solid var(--at-cizgi); border-radius: 999px; cursor: pointer;
    transition: color var(--at-gecis-hizli), border-color var(--at-gecis-hizli);
}
.at-gorunum:hover { color: var(--at-metin); border-color: var(--at-metin); }
.at-gorunum__iz {
    width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg, var(--at-metin) 0 50%, transparent 50% 100%);
    border: 1.5px solid var(--at-metin); flex: 0 0 auto;
}
.at-gorunum__ad { display: none; }
@media (min-width: 1100px) { .at-gorunum__ad { display: inline; } }

/* --- MOBİL MENÜ (<details>, JS yok) --- */
.at-mobil { display: none; }
.at-mobil__dugme {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 48px; height: 48px; padding: 0 12px;
    border: 1px solid var(--at-cizgi); border-radius: 999px;
    cursor: pointer; list-style: none;
}
.at-mobil__dugme::-webkit-details-marker { display: none; }
.at-mobil__dugme > span { display: block; height: 1.5px; background: var(--at-metin); transition: transform var(--at-gecis-hizli); }
.at-mobil[open] .at-mobil__dugme > span:first-child { transform: translateY(3.25px) rotate(45deg); }
.at-mobil[open] .at-mobil__dugme > span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.at-mobil__panel {
    position: fixed; inset: 78px 0 0; z-index: 59;
    padding: var(--at-r-1) var(--at-yan) var(--at-r-3);
    background: var(--at-zemin);
    overflow-y: auto;
}
.at-mobil__panel ul { list-style: none; margin: 0 0 var(--at-r-1); padding: 0; }
.at-mobil__panel > ul > li > a {
    display: block; padding: 15px 0;
    font-family: var(--at-serif); font-size: var(--at-y-3xl);
    color: var(--at-metin); text-decoration: none;
    border-bottom: 1px solid var(--at-cizgi);
}
.at-mobil__panel ul ul { margin: 6px 0 12px 14px; }
.at-mobil__panel ul ul a {
    display: block; padding: 9px 0; font-size: var(--at-y-m);
    color: var(--at-metin-2); text-decoration: none;
}

@media (max-width: 1000px) {
    .at-baslikc__gez { display: none; }
    .at-mobil { display: block; }
    .at-baslikc__sag .at-dugme--kucuk { display: none; }
}

/* Odak: klavye kullanıcısı için görünür halka — tüm etkileşimli ögelerde */
.at :is(a, button, summary, input, textarea, select):focus-visible {
    outline: 2px solid var(--at-vurgu);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --- İÇERİĞE ATLA --- 
   Görsel olarak gizli ama ODAKLANINCA görünür ve 44px hedefi taşır.
   ÖLÇÜLDÜ: stil yazılmadan önce 90×20px'lik görünür bir bağlantı olarak
   sayfanın en üstünde duruyordu. */
.at-atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    font-size: var(--at-y-s);
    font-weight: 500;
    color: var(--at-vurgu-metin);
    background: var(--at-vurgu);
    border-radius: 0 0 12px 0;
    text-decoration: none;
}
.at-atla:focus-visible { left: 0; }

/* --- TANITIM NOTU --- */
.at-tanitim-notu {
    margin: 0;
    padding: var(--at-r-0) var(--at-yan);
    font-size: var(--at-y-xs);
    line-height: 1.6;
    text-align: center;
    color: var(--at-metin-3);
    background: var(--at-zemin-2);
    border-top: 1px solid var(--at-cizgi);
}