/* ============================================================================
   ATÖLYE · BÖLÜM BİLEŞENLERİ — II
   süreç · ekip · görüşler · SSS · çağrı · alt bilgi
   ========================================================================= */

/* ------------------------------------------------------------------ SÜREÇ --- */
.at-sur__liste {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--at-r-1);
    counter-reset: at-sur;
}
.at-sur__adim {
    display: flex; flex-direction: column; gap: 12px;
    padding-top: var(--at-r-0);
    border-top: 2px solid var(--at-metin);
}
/* İlk adım vurgu rengiyle başlar — okuma yönünü işaret eder. */
.at-sur__adim:first-child { border-top-color: var(--at-vurgu); }
.at-sur__no { font-family: var(--at-serif); font-size: var(--at-y-l); color: var(--at-metin-3); }
.at-sur__ad { margin: 0; font-size: var(--at-y-xl); font-weight: 500; line-height: 1.2; color: var(--at-metin); }
.at-sur__ac { margin: 0; font-size: var(--at-y-s); line-height: 1.6; color: var(--at-metin-2); }
.at-sur__sure { align-self: flex-start; margin-top: 4px; }
@media (max-width: 900px) { .at-sur__liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .at-sur__liste { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- EKİP --- */
.at-ekip__izgara {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--at-r-1);
}
.at-ekip__kisi { display: flex; flex-direction: column; gap: 14px; }
.at-ekip__cerceve {
    position: relative; overflow: hidden; border-radius: 16px;
    background: var(--at-zemin-3);
    aspect-ratio: 4 / 5;
    display: grid; place-items: center;
}
.at-ekip__cerceve img { width: 100%; height: 100%; object-fit: cover; }
.at-ekip__harf {
    font-family: var(--at-serif); font-size: var(--at-y-6xl);
    color: var(--at-metin-3); line-height: 1;
}
.at-ekip__ad { margin: 0; font-size: var(--at-y-m); font-weight: 500; color: var(--at-metin); }
.at-ekip__unvan { margin: -8px 0 0; font-size: var(--at-y-s); color: var(--at-metin-2); }
@media (max-width: 900px) { .at-ekip__izgara { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- GÖRÜŞLER --- */
.at-gor__ray {
    list-style: none; margin: var(--at-r-1) 0 0; padding: 4px var(--at-yan) var(--at-r-0);
    display: flex; gap: var(--at-r-0);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* ZORUNLU: scroll-snap-align kabın padding-inline'ını YOK SAYAR ve ilk
       kart kenara yapışır. Bu projede ölçüldü. */
    scroll-padding-inline: var(--at-yan);
    scrollbar-width: thin;
}
.at-gor__kart {
    flex: 0 0 min(430px, 82vw);
    scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--at-r-0);
    padding: var(--at-r-1);
    background: var(--at-zemin);
    border: 1px solid var(--at-cizgi);
    border-radius: 20px;
}
.at-bolum--ikinci .at-gor__kart { background: var(--at-zemin); }
.at-gor__metin {
    margin: 0;
    font-family: var(--at-serif);
    font-size: var(--at-y-xl);
    line-height: 1.38;
    color: var(--at-metin);
}
.at-gor__metin::before { content: '“'; color: var(--at-vurgu); }
.at-gor__metin::after { content: '”'; color: var(--at-vurgu); }
.at-gor__kim { display: flex; align-items: center; gap: 14px; }
.at-gor__kim img, .at-gor__harf {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--at-zemin-3); color: var(--at-metin-2);
    font-family: var(--at-serif); font-size: var(--at-y-l);
}
.at-gor__kim > span { display: flex; flex-direction: column; }
.at-gor__ad { font-size: var(--at-y-s); font-weight: 500; color: var(--at-metin); }
.at-gor__unvan { font-size: var(--at-y-xs); color: var(--at-metin-2); }

/* -------------------------------------------------------------------- SSS --- */
.at-sss__ic { display: grid; grid-template-columns: 0.72fr 1fr; gap: var(--at-r-4); align-items: start; }
.at-sss__bas { position: sticky; top: 108px; }
.at-sss__liste { border-top: 1px solid var(--at-cizgi); }
.at-sss__oge { border-bottom: 1px solid var(--at-cizgi); }
.at-sss__soru {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-block: var(--at-r-0);
    min-height: 48px;                      /* dokunma hedefi */
    font-size: var(--at-y-l); font-weight: 500; line-height: 1.35;
    color: var(--at-metin); cursor: pointer; list-style: none;
}
.at-sss__soru::-webkit-details-marker { display: none; }
.at-sss__iz {
    position: relative; flex: 0 0 auto; width: 20px; height: 20px;
}
.at-sss__iz::before, .at-sss__iz::after {
    content: ''; position: absolute; inset: 50% 0 auto 0;
    height: 1.5px; background: var(--at-metin);
    transition: transform var(--at-gecis-hizli);
}
.at-sss__iz::after { transform: rotate(90deg); }
.at-sss__oge[open] .at-sss__iz::after { transform: rotate(0deg); }
.at-sss__cevap { padding-bottom: var(--at-r-0); }
.at-sss__cevap p { margin: 0; font-size: var(--at-y-m); line-height: 1.65; color: var(--at-metin-2); max-width: 62ch; }
@media (max-width: 900px) {
    .at-sss__ic { grid-template-columns: 1fr; gap: var(--at-r-2); }
    .at-sss__bas { position: static; }
}

/* ------------------------------------------------------------------ ÇAĞRI --- */
.at-cag__ic { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--at-r-0); }
.at-cag__baslik { max-width: 18ch; }
.at-cag__alt { max-width: 54ch; }
.at-cag__eylemler { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.at-cag--ters :is(.at-cag__baslik) { color: #f7f4f0; }
.at-cag--ters :is(.at-cag__alt) { color: #b8afa3; }
.at-cag--ters .at-cag__etiket { color: #857c70; }
.at-cag--ters .at-dugme--ikincil { color: #f7f4f0; border-color: rgba(247, 244, 240, 0.34); }
.at-cag--ters .at-dugme--ikincil:hover { border-color: #f7f4f0; }

/* -------------------------------------------------------------- ALT BİLGİ --- */
.at-altbilgi {
    padding-top: var(--at-r-5);
    background: var(--at-zemin-2);
    border-top: 1px solid var(--at-cizgi);
    overflow: clip;
}
.at-altbilgi__ust {
    display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--at-r-1);
    padding-bottom: var(--at-r-3);
}
.at-altbilgi__ad { margin: 0 0 12px; font-family: var(--at-serif); font-size: var(--at-y-3xl); color: var(--at-metin); }
.at-altbilgi__slogan { margin: 0 0 18px; font-size: var(--at-y-s); line-height: 1.6; color: var(--at-metin-2); max-width: 34ch; }
.at-altbilgi__eposta {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: var(--at-y-m); color: var(--at-metin); text-decoration: none;
    border-bottom: 1px solid var(--at-vurgu);
}
.at-altbilgi__sbaslik {
    margin: 0 0 16px; font-size: var(--at-y-xs); font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--at-metin-3);
}
.at-altbilgi__sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.at-altbilgi__sutun a {
    /* ÖLÇÜLDÜ: 40px idi, WCAG 2.5.5'in 44px eşiğinin altında. Bunlar liste
       içinde tek tek duran bağlantılar; "Inline" istisnası cümle İÇİNDEKİ
       bağlantı içindir, buna uygulanmaz. */
    /* `flex` (inline-flex DEĞİL): bağlantı sütunun tamamını kaplasın.
       "Ekip" gibi kısa metinlerde hedef 30px genişliğe düşüyordu — AA'nın
       24px eşiğini geçiyor ama AAA'nın 44'ünü geçmiyordu. Sütuna yayılınca
       görünüm aynı kalıyor, hedef büyüyor. */
    display: flex; align-items: center; min-height: 44px;
    font-size: var(--at-y-s); color: var(--at-metin-2); text-decoration: none;
    transition: color var(--at-gecis-hizli);
}
.at-altbilgi__sutun a:hover { color: var(--at-metin); }

/* DEV MARKA — referans ailesinin imzası. Dekoratif, aria-hidden. */
.at-altbilgi__dev {
    margin: 0;
    font-family: var(--at-serif);
    font-size: clamp(72px, 19vw, 300px);
    line-height: 0.82;
    letter-spacing: -0.03em;
    color: var(--at-metin);
    opacity: 0.07;
    user-select: none;
    white-space: nowrap;
}
:root[data-gorunum="koyu"] .at-altbilgi__dev { opacity: 0.11; }

.at-altbilgi__dip {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding-block: var(--at-r-0);
    margin-top: var(--at-r-0);
    border-top: 1px solid var(--at-cizgi);
}
.at-altbilgi__dip p { margin: 0; font-size: var(--at-y-xs); color: var(--at-metin-2); }
.at-altbilgi__sosyal { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.at-altbilgi__sosyal a {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px;
    font-size: var(--at-y-xs); color: var(--at-metin-2); text-decoration: none;
}
.at-altbilgi__sosyal a:hover { color: var(--at-metin); }

@media (max-width: 900px) {
    .at-altbilgi__ust { grid-template-columns: 1fr 1fr; gap: var(--at-r-0); }
    .at-altbilgi__dip { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) { .at-altbilgi__ust { grid-template-columns: 1fr; } }