/* ============================================================
   ASME GOLD - Gel Al sayfasi (/gel-al)

   Yalnizca bu sayfada yuklenir (GelAlController -> ekStiller).
   Ana sayfadaki "Gel Al" bolumunun etiket stili (.gelal__etiket)
   bilesenler.css'te; burada yeniden kullaniliyor.

   Altin vurgu yalnizca kucuk isaretlerde: etiket, ikon daireleri,
   adim numaralari, baglantilar. Kart zeminleri notr kalir
   ("gold is the accent, never the page").

   Soluk altin zemin (--vurgu-soluk) uzerindeki YAZI --metin renginde:
   --vurgu orada 4.45:1 kaliyor, kucuk yazi icin AA'nin altinda. Ikonlar
   (3:1 yeterli) --vurgu kalabilir.
   ============================================================ */

.gelal-sayfa { padding-bottom: var(--uzay-9); }

/* --- Ust bolum: metin + gorsel --- */
.gelal-ust {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    box-shadow: var(--golge-sm);
}

.gelal-ust__govde { padding: var(--uzay-6) var(--uzay-5); }

/* Dar ekranda gorsel ustte: sayfanin ne anlattigini ilk bakista gosterir.
   Isaretleme sirasi (baslik once) ekran okuyucu icin degismez. */
.gelal-ust__gorsel-alan { order: -1; }

.gelal-ust__gorsel {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (min-width: 900px) {
    .gelal-ust { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .gelal-ust__govde { padding: var(--uzay-8) var(--uzay-7); }
    .gelal-ust__gorsel-alan { order: 0; position: relative; }
    .gelal-ust__gorsel { position: absolute; inset: 0; aspect-ratio: auto; }
}

.gelal-ust__baslik {
    margin: 0 0 var(--uzay-3);
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.25rem);   /* Rima vitrin basligi 36 px (telefonda 30) */
    line-height: 1.15;
}

.gelal-ust__giris {
    max-width: 52ch;
    margin: 0 0 var(--uzay-5);
    color: var(--metin-soluk);
    font-size: 1.0625rem;
}

.gelal-ust__rozet {
    display: flex;
    align-items: flex-start;
    gap: var(--uzay-3);
    max-width: 56ch;
    margin: 0 0 var(--uzay-6);
    padding: var(--uzay-3) var(--uzay-4);
    background: var(--vurgu-soluk);
    border-radius: var(--yuvarlak);
    color: var(--metin);
    font-size: .9375rem;
    line-height: 1.5;
}

.gelal-ust__rozet-ikon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--vurgu);
}

.gelal-ust__eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uzay-3);
}

.gelal-ust__eylemler .ikon { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Iki kart: magaza bilgileri + teslim kurallari --- */
.gelal-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uzay-5);
    margin-top: var(--uzay-7);
}

@media (min-width: 900px) {
    .gelal-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gelal-kart {
    padding: var(--uzay-5);
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
}

@media (min-width: 600px) {
    .gelal-kart { padding: var(--uzay-6); }
}

.gelal-kart__baslik {
    margin: 0 0 var(--uzay-5);
    font-size: 1.5rem;
}

.gelal-magaza__liste {
    display: grid;
    gap: var(--uzay-4);
    margin: 0;
}

.gelal-magaza__satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uzay-1);
}

@media (min-width: 600px) {
    .gelal-magaza__satir {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: var(--uzay-4);
    }
}

.gelal-magaza__satir dt {
    display: flex;
    align-items: center;
    gap: var(--uzay-2);
    color: var(--metin-soluk);
    font-size: .875rem;
    font-weight: 600;
}

.gelal-magaza__satir dd {
    margin: 0;
    line-height: 1.6;
}

.gelal-magaza__satir dd a {
    color: var(--vurgu);
    text-decoration: none;
    font-weight: 600;
}

.gelal-magaza__satir dd a:hover { text-decoration: underline; }

.gelal-magaza__ikon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--vurgu);
}

.gelal-magaza__harita {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uzay-3) var(--uzay-6);
    margin-top: var(--uzay-5);
    padding-top: var(--uzay-5);
    border-top: 1px solid var(--ayrac);
}

.gelal-magaza__harita-baglanti {
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-1);
    min-height: 44px;
    color: var(--vurgu);
    font-weight: 600;
    text-decoration: none;
}

.gelal-magaza__harita-baglanti:hover { text-decoration: underline; }

.gelal-magaza__ok { width: 16px; height: 16px; flex-shrink: 0; }

.gelal-kurallar {
    display: grid;
    gap: var(--uzay-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gelal-kurallar__oge {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--uzay-3);
    align-items: start;
}

.gelal-kurallar__ikon {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    background: var(--vurgu-soluk);
    color: var(--vurgu);
}

.gelal-kurallar__baslik {
    margin: 0 0 2px;
    font-weight: 600;
    line-height: 1.4;
}

.gelal-kurallar__metin {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- Nasil calisacak: uc adim --- */
.gelal-akis { margin-top: var(--uzay-8); }

.gelal-akis__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uzay-3);
    margin-bottom: var(--uzay-5);
}

.gelal-akis__baslik {
    margin: 0;
    font-size: 1.875rem;
}

.gelal-akis__rozet {
    padding: var(--uzay-1) var(--uzay-3);
    background: var(--vurgu-soluk);
    border-radius: var(--yuvarlak-tam);
    color: var(--metin);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gelal-akis__adimlar {
    counter-reset: gelal-akis;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uzay-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .gelal-akis__adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gelal-akis__adim {
    counter-increment: gelal-akis;
    padding: var(--uzay-5);
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
}

.gelal-akis__adim::before {
    content: counter(gelal-akis);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--uzay-4);
    border-radius: 50%;
    background: var(--vurgu-soluk);
    color: var(--metin);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gelal-akis__adim-baslik {
    margin: 0 0 var(--uzay-2);
    font-family: var(--yazi-govde);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.gelal-akis__adim-metin {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- SSS --- */
.gelal-sss {
    max-width: 80ch;
    margin-top: var(--uzay-8);
}

.gelal-sss__baslik {
    margin: 0 0 var(--uzay-4);
    font-size: 1.875rem;
}