/* ══════════════════════════════════════════════════════════════════
   MÜŞTERİ GİRİŞİ — /giris (e-posta) + /giris/dogrula (kod)   27.07.2026
   ------------------------------------------------------------------
   İKİ SÜTUN:  SOL → giriş formu · SAĞ → tanıtım paneli
   (hesap özellikleri · ödeme seçenekleri · giriş yardımı)

   ⚠ İKİ SÜTUN DA AYNI TEMAYI KULLANIR: sağ panel de soldaki kartla
     aynı --gr-yuzey / --gr-kenar / --gr-metin değişkenlerinden beslenir.
     ⛔ Panelin içine SABİT renk (#fff, rgba(255,255,255,…)) yazma —
        açık temada okunmaz hâle gelir. Değişken kullan.

   TASARIM SÖZLEŞMESİ (27.07.2026 revizyonu — bozma):
     · Easing TEK KAYNAK: --gr-esne (güçlü ease-out) + --gr-esne-ic
       (ease-in-out). ⛔ ease-in KULLANMA — arayüz hantal hissettirir.
     · UI geçiş süreleri ≤ 300ms (buton 160ms, alanlar 200ms);
       tek seferlik sayfa girişi 550ms olabilir.
     · Yalnız transform / opacity / filter anime edilir — padding,
       height, renk animasyonu layout tetikler, YAZMA.
     · Köşe yarıçapı TEK SİSTEM: --gr-r-kart / --gr-r-kutu / --gr-r-ikon
       + CTA pill (999px). Elle yeni yarıçap uydurma.
     · Hover yalnız GERÇEKTEN tıklanabilir öğede ve yalnız
       (hover:hover) ortamında — tıklanamayan kutu zıplamaz.
     · Odak halkası: klavye için :focus-visible her etkileşimli öğede.

   ⚠ style.css'e HİÇ dokunulmadı: bu dosya yalnız /giris ekranlarında
     @section Head ile yüklenir, sınıfların tamamı "gr-" öneklidir →
     site geneliyle çakışmaz.

   ⚠ Oran/taksit sayısı BURADA YOK: metinler view'da OdemeAyarHelper'dan
     (siteayar.json → "Odeme") gelir. CSS yalnız kutuyu çizer.
   ══════════════════════════════════════════════════════════════════ */

.gr-sayfa {
    --gr-bg: #f4f7fc;
    --gr-yuzey: #ffffff;
    --gr-kutu: #f8fafc;                     /* yüzey üstündeki mini kutular */
    --gr-kenar: rgba(15, 23, 42, .09);
    --gr-metin: #0f172a;
    --gr-soluk: #64748b;
    --gr-mavi: #0d6efd;
    --gr-cyan: #0dcaf0;
    --gr-vurgu-a: #0b5ed7;                  /* "tek panelde" degradesi — açık zeminde okunur */
    --gr-vurgu-b: #0aa2c0;

    /* Katmanlı gölge: yakın temas + orta yayılım + uzak ortam.
       Tek büyük gölge yerine üç katman — kart zemine "oturur". */
    --gr-golge:
        0 1px 2px rgba(2, 6, 23, .05),
        0 12px 32px -16px rgba(2, 6, 23, .16),
        0 32px 64px -32px rgba(2, 6, 23, .22);

    /* Yarıçap sistemi (tek kaynak) */
    --gr-r-kart: 24px;
    --gr-r-kutu: 14px;
    --gr-r-ikon: 10px;

    /* Hareket sistemi (tek kaynak) */
    --gr-esne: cubic-bezier(.23, 1, .32, 1);        /* güçlü ease-out — giriş/tepki */
    --gr-esne-ic: cubic-bezier(.77, 0, .175, 1);    /* ease-in-out — yer değiştirme */

    position: relative;
    overflow: hidden;
    padding: 132px 0 90px;
    background: var(--gr-bg);
}

[data-bs-theme="dark"] .gr-sayfa {
    --gr-bg: #0b1220;
    --gr-yuzey: #111c30;
    --gr-kutu: #16233a;
    --gr-kenar: rgba(148, 163, 184, .14);
    --gr-metin: #e2e8f0;
    --gr-soluk: #94a3b8;
    --gr-mavi: #60a5fa;
    --gr-vurgu-a: #4da3ff;
    --gr-vurgu-b: #7dd3fc;
    --gr-golge:
        0 1px 2px rgba(0, 0, 0, .45),
        0 16px 40px -20px rgba(0, 0, 0, .55),
        0 40px 72px -36px rgba(0, 0, 0, .6);
}

/* Dekoratif zemin: marka ışığı + ince ızgara (ana sayfa .digital-grid dili) */
.gr-arka {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 70% 55% at 15% 0%, rgba(13, 110, 253, .13), transparent 62%),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(13, 202, 240, .10), transparent 60%);
}

.gr-arka::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(100, 116, 139, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 116, 139, .07) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 72%);
}

.gr-ic {
    position: relative;
    z-index: 1;
}

/* ── Sayfa girişi: kart önce, panel 90ms sonra (tek seferlik, kademeli).
     Yalnız transform+opacity; reduced-motion'da tamamen kapanır. ── */
@keyframes gr-belir {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.gr-kart {
    animation: gr-belir .55s var(--gr-esne) both;
}

.gr-panel {
    animation: gr-belir .55s var(--gr-esne) .09s both;
}

/* ────────────────────────────────────────────
   SOL — GİRİŞ KARTI
   ──────────────────────────────────────────── */
.gr-kart {
    position: relative;
    padding: clamp(1.6rem, 3.4vw, 2.6rem);
    border: 1px solid var(--gr-kenar);
    border-radius: var(--gr-r-kart);
    background: var(--gr-yuzey);
    box-shadow: var(--gr-golge);
    overflow: hidden;
}

/* Tepedeki marka çizgisi */
.gr-kart::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0d6efd, #0dcaf0, #7dd3fc);
}

.gr-kart-ust {
    text-align: center;
    margin-bottom: 1.6rem;
}

.gr-ikon {
    width: 62px;
    height: 62px;
    display: inline-grid;
    place-items: center;
    margin-bottom: 1rem;
    border-radius: 18px;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 2px 4px rgba(13, 110, 253, .2),
        0 14px 30px -12px rgba(13, 110, 253, .6);
}

.gr-kart-ust h1 {
    margin: 0 0 .5rem;
    font-size: clamp(1.45rem, 2.6vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--gr-metin);
}

.gr-kart-ust p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--gr-soluk);
}

.gr-kart-ust strong {
    color: var(--gr-metin);
}

/* Adım göstergesi: 1 E-posta → 2 Kod → 3 Giriş */
.gr-adim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.gr-adim-parca {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gr-soluk);
}

.gr-adim-no {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--gr-kenar);
    font-size: .72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--gr-metin) 4%, transparent);
}

.gr-adim-parca.aktif {
    color: var(--gr-mavi);
}

.gr-adim-parca.aktif .gr-adim-no {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    box-shadow: 0 6px 14px -6px rgba(13, 110, 253, .8);
}

.gr-adim-parca.tamam .gr-adim-no {
    color: #fff;
    border-color: transparent;
    background: #22c55e;
}

/* Tamamlanan adımda numara yerine tik durur — rakam boyutunda kalmasın */
.gr-adim-parca.tamam .gr-adim-no i {
    font-size: .82rem;
    line-height: 1;
}

.gr-adim-ok {
    color: var(--gr-soluk);
    opacity: .5;
    font-size: .75rem;
}

/* Sayfa içi uyarı/bilgi kutuları (.gr-uyari) ve doğrulama özeti kuralları 06.08.2026'da
   KALDIRILDI: giriş ekranlarının bildirimleri artık ekranın ortasındaki ortak modalda
   gösteriliyor (/tema/css/bildirim.css · CLAUDE.md §7). Alan altındaki doğrulama
   mesajları (asp-validation-for) yerinde durur. */

/* Form alanları */
.gr-form .form-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--gr-metin);
    margin-bottom: .4rem;
}

.gr-form .form-control {
    padding: .9rem 1.1rem;
    border-radius: var(--gr-r-kutu);
    border: 1px solid var(--gr-kenar);
    background: color-mix(in srgb, var(--gr-metin) 3%, transparent);
    color: var(--gr-metin);
    font-size: .98rem;
    transition: border-color .2s var(--gr-esne), box-shadow .2s var(--gr-esne), background .2s var(--gr-esne);
}

.gr-form .form-control::placeholder {
    color: color-mix(in srgb, var(--gr-soluk) 70%, transparent);
}

.gr-form .form-control:focus {
    background: var(--gr-yuzey);
    border-color: var(--gr-mavi);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gr-mavi) 15%, transparent);
    outline: 0;
}

/* E-posta alanı: içinde zarf ikonu (odaklanınca marka rengine döner).
   Kod ekranında KULLANILMAZ — iri ortalanmış kod alanına ikon girmez. */
.gr-alan {
    position: relative;
}

.gr-alan > i {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--gr-soluk);
    pointer-events: none;
    transition: color .2s var(--gr-esne);
}

.gr-alan .form-control {
    padding-left: 2.7rem;
}

.gr-alan:focus-within > i {
    color: var(--gr-mavi);
}

/* Kod alanı — 6 hane, aralıklı ve iri */
.gr-kod {
    text-align: center;
    font-size: 1.55rem !important;
    font-weight: 700;
    letter-spacing: .55em;
    text-indent: .55em; /* letter-spacing sağa kaydırır, ortalamayı düzeltir */
    padding-block: .95rem !important;
}

.gr-form .form-check-label {
    font-size: .88rem;
    color: var(--gr-soluk);
}

.gr-form .form-check-input {
    accent-color: var(--gr-mavi);
}

.gr-form .form-check-input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gr-mavi) 55%, transparent);
    outline-offset: 2px;
}

/* Gönder butonu — marka degradesi + içten ışık.
   Basınca ANINDA küçülür (160ms) — geri bildirim bırakışta değil basışta. */
.gr-gonder {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 2px 4px rgba(13, 110, 253, .18),
        0 12px 28px -10px rgba(13, 110, 253, .7);
    transition: transform .16s var(--gr-esne), box-shadow .16s var(--gr-esne);
}

.gr-gonder i {
    transition: transform .2s var(--gr-esne);
}

.gr-gonder:active {
    transform: scale(.97);
}

.gr-gonder:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gr-mavi) 45%, transparent);
    outline-offset: 3px;
}

/* Gönderim sürerken (form-kilit.js) — "işlem yapılıyor" hâli.
   Soluk + imleç beklemede; hover/aktif tepkileri susar ki düğme "basılabilir"
   izlenimi vermesin. Genişliği JS sabitler, metin değişince zıplamaz. */
.gr-gonder:disabled,
.gr-gonder[aria-busy="true"] {
    opacity: .72;
    cursor: progress;
    transform: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 2px 4px rgba(13, 110, 253, .18);
}

/* Kart altındaki "Tekrar gönder" bağlantı düğmesi de aynı dili konuşur. */
.gr-not .btn-link:disabled,
.gr-not .btn-link[aria-busy="true"] {
    opacity: .72;
    cursor: progress;
    text-decoration: none;
}

/* Kart altı notlar */
.gr-not {
    margin: 1.4rem 0 0;
    text-align: center;
    font-size: .85rem;
    color: var(--gr-soluk);
}

.gr-not .btn-link {
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.gr-not .btn-link:hover {
    text-decoration: underline;
}

.gr-not .btn-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gr-mavi) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Güven satırı — kartın en altı */
.gr-guven {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.2rem;
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--gr-kenar);
}

.gr-guven span {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--gr-soluk);
}

.gr-guven i {
    color: #22c55e;
    font-size: .9rem;
}

/* ────────────────────────────────────────────
   SAĞ — TANITIM PANELİ (soldaki kartla AYNI tema)
   ⛔ Buradan aşağıda sabit renk kullanma; tek istisna marka degradesi
      taşıyan ödeme ikonudur (üstündeki ikon her temada beyazdır).
   ──────────────────────────────────────────── */
.gr-panel {
    position: relative;
    height: 100%;
    padding: clamp(1.7rem, 3.4vw, 2.6rem);
    border-radius: var(--gr-r-kart);
    overflow: hidden;
    color: var(--gr-metin);
    /* Yüzey soldaki kartla aynı; üst köşedeki çok hafif marka ışığı
       iki sütunun birbirinin kopyası gibi görünmesini engeller. */
    background:
        radial-gradient(ellipse 90% 60% at 100% 0%,
            color-mix(in srgb, var(--gr-cyan) 13%, transparent), transparent 62%),
        var(--gr-yuzey);
    border: 1px solid var(--gr-kenar);
    box-shadow: var(--gr-golge);
}

.gr-rozet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1.05rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gr-mavi) 26%, transparent);
    background: color-mix(in srgb, var(--gr-mavi) 10%, transparent);
    color: var(--gr-mavi);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.gr-panel h2 {
    margin: 1.1rem 0 .7rem;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--gr-metin);
}

.gr-panel-giris {
    margin: 0 0 1.9rem;
    font-size: .95rem;
    line-height: 1.75;
    color: var(--gr-soluk);
}

/* Degrade metin: tonlar --gr-vurgu-* değişkenlerinden gelir; açık temada
   koyulaşır, koyu temada açılır (beyaz zeminde okunmaz renk kalmasın). */
.gr-vurgu {
    background: linear-gradient(120deg, var(--gr-vurgu-a) 0%, var(--gr-vurgu-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Panel içi bölüm başlığı */
.gr-bolum {
    margin-bottom: 1.8rem;
}

.gr-bolum:last-of-type {
    margin-bottom: 0;
}

.gr-bolum-baslik {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .95rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gr-mavi);
}

.gr-bolum-baslik::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--gr-mavi) 32%, transparent), transparent);
}

/* Hesap özellikleri — 4 kart, DAİMA 2×2.
   auto-fit KULLANILMAZ: geniş panelde 3 sütuna dağılıp son kart tek başına
   asılı kalıyordu (3+1). Dar ekranda tek sütuna iner (aşağıdaki media).
   ⚠ Hover YOK (bilinçli): bu kutular tıklanamaz — kalkıp inen kutu
     tıklanabilir sanılır, boşa tıklatır. */
.gr-ozellik-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.gr-ozellik {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem .9rem;
    border-radius: var(--gr-r-kutu);
    background: var(--gr-kutu);
    border: 1px solid var(--gr-kenar);
}

.gr-ozellik i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--gr-r-ikon);
    font-size: 1rem;
    color: var(--gr-mavi);
    background: color-mix(in srgb, var(--gr-mavi) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--gr-mavi) 22%, transparent);
}

.gr-ozellik strong {
    display: block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--gr-metin);
    line-height: 1.3;
}

.gr-ozellik small {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--gr-soluk);
}

/* Ödeme seçenekleri */
.gr-odeme {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem .95rem;
    border-radius: var(--gr-r-kutu);
    background: var(--gr-kutu);
    border: 1px solid var(--gr-kenar);
}

.gr-odeme + .gr-odeme {
    margin-top: .6rem;
}

/* Tek sabit renk: marka degradesi + üstünde beyaz ikon (.gr-gonder ile aynı dil).
   İki temada da aynı görünür, bilinçlidir. */
.gr-odeme-ikon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 1.12rem;
    color: #fff;
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 8px 18px -10px rgba(13, 110, 253, .7);
}

.gr-odeme-metin {
    min-width: 0;
}

.gr-odeme-metin strong {
    display: block;
    font-size: .93rem;
    font-weight: 700;
    color: var(--gr-metin);
    line-height: 1.3;
}

.gr-odeme-metin small {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--gr-soluk);
}

/* Kart markaları + güvenlik notu */
.gr-marka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-top: .85rem;
}

.gr-marka span {
    padding: .28rem .7rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gr-soluk);
    background: var(--gr-kutu);
    border: 1px solid var(--gr-kenar);
}

.gr-dipnot {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .85rem 0 0;
    font-size: .77rem;
    line-height: 1.55;
    color: var(--gr-soluk);
}

.gr-dipnot i {
    margin-top: .1rem;
    color: #22c55e;
}

/* ── Giriş yapamayanlar için yardım bloğu ──
   Kullanıcı girişte takıldıysa çıkış yolu (destek / iletişim) gözden
   kaçmasın diye kendi kutusunda ve hafif vurgulu durur. */
.gr-yardim {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-top: 1.8rem;
    padding: 1.1rem 1.15rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--gr-mavi) 7%, var(--gr-kutu));
    border: 1px solid color-mix(in srgb, var(--gr-mavi) 24%, transparent);
}

.gr-yardim-ikon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.15rem;
    color: var(--gr-mavi);
    background: color-mix(in srgb, var(--gr-mavi) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--gr-mavi) 24%, transparent);
}

.gr-yardim-metin {
    min-width: 0;
}

.gr-yardim-metin strong {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--gr-metin);
    line-height: 1.35;
}

.gr-yardim-metin small {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--gr-soluk);
}

.gr-yardim-baglanti {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .9rem;
    margin-top: .85rem;
}

.gr-yardim-baglanti a {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--gr-mavi);
    text-decoration: none;
}

.gr-yardim-baglanti a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gr-mavi) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ────────────────────────────────────────────
   HOVER — yalnız gerçek imleçli ortamda (dokunmatikte hover takılı
   kalır; Emil kuralı: hover'ı (hover:hover) ile kapıla)
   ──────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .gr-gonder:hover {
        transform: translateY(-2px);
        color: #fff;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .22),
            0 2px 4px rgba(13, 110, 253, .18),
            0 18px 38px -12px rgba(13, 110, 253, .85);
    }

    .gr-gonder:hover i {
        transform: translateX(4px);
    }

    /* Basış her durumda hover'ı ezer — tepki basışta hissedilir */
    .gr-gonder:active {
        transform: scale(.97);
    }

    .gr-form .form-control:hover:not(:focus) {
        border-color: color-mix(in srgb, var(--gr-mavi) 32%, var(--gr-kenar));
    }

    .gr-yardim-baglanti a:hover {
        text-decoration: underline;
    }
}

/* ────────────────────────────────────────────
   DUYARLILIK
   ──────────────────────────────────────────── */
@media (min-width: 992px) {
    /* Panel formdan uzunsa form ekranda kalsın (navbar 80px + nefes payı) */
    .gr-sol-sabit {
        position: sticky;
        top: 104px;
    }
}

@media (max-width: 991.98px) {
    .gr-sayfa {
        padding: 118px 0 70px;
    }

    .gr-panel {
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .gr-adim-parca span:last-child {
        display: none; /* dar ekranda yalnız numaralar kalır */
    }

    .gr-adim {
        gap: .35rem;
    }

    /* Telefonda iki mini kart yan yana sıkışır */
    .gr-ozellik-grid {
        grid-template-columns: 1fr;
    }

    .gr-kod {
        font-size: 1.3rem !important;
        letter-spacing: .38em;
        text-indent: .38em;
    }
}

/* Hareket azaltma: kayma/ölçek biter, yalnız yumuşak belirme kalır */
@media (prefers-reduced-motion: reduce) {
    .gr-kart,
    .gr-panel {
        animation-duration: .01ms;
        animation-delay: 0ms;
    }

    .gr-gonder,
    .gr-gonder i,
    .gr-alan > i,
    .gr-form .form-control {
        transition: none;
    }

    .gr-gonder:hover,
    .gr-gonder:active,
    .gr-gonder:hover i {
        transform: none;
    }
}