/*
 * GIRIS-YARDIM.PHP — "Giriş yapamıyor musunuz?" sayfası (giriş yapmadan çalışır).
 *
 * Görsel dil BİLEREK Moodle giriş ekranının devamıdır (theme_boost/scss):
 * aynı logo, aynı beyaz "hap" düğmeler, aynı renkler — kişi giriş ekranından
 * ayrıldığını hissetmemeli. Renkler oradan alındı:
 *   --kolay-giris-renk #CFAB8D  ("Kolay Giriş" başlığı)
 *   --buton-arkaplan   #2FA4D7  (eski "Giriş yap" düğmesi)
 * Tema değişirse bu dosyadaki :root değerleri de elle güncellenmeli.
 */

:root {
    --gy-mavi: #2FA4D7;
    --gy-mavi-koyu: #1f86b5;
    --gy-mavi-acik: #eaf6fc;
    --gy-altin: #CFAB8D;
    --gy-yazi: #1d1d1f;
    --gy-yazi-soluk: #64748b;
    --gy-cizgi: #e5e7eb;
    --gy-zemin: #f4f6f7;
    --gy-kart: #ffffff;
    --gy-golge: 0 10px 40px rgba(0, 0, 0, 0.10);
    --gy-hap-golge: 0 2px 10px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    font-family: 'Inter', sans-serif;
    color: var(--gy-yazi);
    background: radial-gradient(ellipse at top, #ffffff 0%, var(--gy-zemin) 60%);
}

.gy-kart {
    width: 100%;
    max-width: 460px;
    background: var(--gy-kart);
    border-radius: 24px;
    box-shadow: var(--gy-golge);
    padding: 36px 32px 28px;
    text-align: center;
}

.gy-logo { width: 84px; height: 84px; display: block; margin: 0 auto 14px; }

.gy-ust-baslik {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gy-altin);
    margin-bottom: 6px;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.gy-giris { font-size: 14px; line-height: 1.65; color: var(--gy-yazi-soluk); margin-bottom: 22px; }

/* ---- 1. adım: "Hesabınız hangi e-postaydı?" ---- */
.gy-soru {
    font-size: 13px;
    font-weight: 600;
    color: var(--gy-yazi);
    text-align: left;
    margin: 0 4px 10px;
}

.gy-secenekler { display: flex; flex-direction: column; gap: 10px; }

.gy-secenek {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: #fff;
    box-shadow: var(--gy-hap-golge), 0 0 0 1px var(--gy-cizgi);
    font: 500 14.5px 'Inter', sans-serif;
    color: var(--gy-yazi);
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, background .15s, opacity .3s ease;
}
.gy-secenek:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 0 0 1px #d1d5db; }
.gy-secenek:focus-visible { outline: 3px solid var(--gy-mavi-acik); outline-offset: 2px; }
.gy-secenek[aria-pressed="true"] { border-color: var(--gy-mavi); background: var(--gy-mavi-acik); }

.gy-secenek-ikon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gy-secenek-ikon svg { width: 22px; height: 22px; display: block; }
.gy-secenek-ikon .material-symbols-rounded { font-size: 22px; color: var(--gy-yazi-soluk); }

.gy-secenek-metin { flex: 1; min-width: 0; }
.gy-secenek-alt { display: block; font-size: 12px; font-weight: 400; color: var(--gy-yazi-soluk); margin-top: 1px; }

/* ---- Seçim yapılınca: yerinde açılan çözüm ----
 * Çözüm paneli, JS tarafından SEÇİLEN düğmenin hemen altına taşınır; sayfa
 * değişmez (kullanıcı kararı: ekrandan ayrılmadan, basit liste korunarak).
 * Yerleşim SABİT kalır: diğer seçenekler ne küçülür ne kayar, yalnızca
 * yumuşakça soluklaşır; panel yumuşakça belirir. Otomatik kaydırma YOK
 * (kullanıcı bulgusu: zıplama ve kayma işi karmaşıklaştırıyordu).
 * Başka seçeneğe dokunmak seçimi değiştirir; ayrı bir "Değiştir" düğmesi yok. */
.gy-secenekler.secim-var .gy-secenek[aria-pressed="false"] { opacity: .3; }
.gy-secenekler.secim-var .gy-secenek[aria-pressed="false"]:hover { opacity: .65; }

@keyframes gy-belir { from { opacity: 0; } to { opacity: 1; } }
.gy-panel:not([hidden]) { animation: gy-belir .35s ease; }

/* Seçilen düğmenin sağında ince bir onay işareti. Yeri HER ZAMAN ayrılı
 * (görünmez hâlde duruyor) — belirdiğinde hiçbir şey kaymaz. */
.gy-secenek::after {
    content: 'check_circle';
    font-family: 'Material Symbols Rounded';
    font-size: 22px;
    line-height: 1;
    color: var(--gy-mavi);
    flex-shrink: 0;
    width: 22px;
    opacity: 0;
    transition: opacity .3s ease;
}
.gy-secenek[aria-pressed="true"]::after { opacity: 1; }

/* Akıllı ipucu — kayıtlı adres bir Gmail/Hotmail adresiyse, talep yerine
 * doğrudan giriş önerilir (gereksiz talep oluşmasın). */
.gy-akilli {
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-size: 13px;
    line-height: 1.6;
    color: #78350f;
    animation: gy-belir .35s ease;
}
.gy-akilli[hidden], .gy-akilli .gy-btn[hidden] { display: none; }  /* .gy-btn'in display:flex'i hidden'ı ezmesin */
.gy-akilli .gy-btn { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
    .gy-panel:not([hidden]), .gy-akilli { animation: none; }
    .gy-secenek, .gy-secenek::after { transition: none; }
}

/* ---- Çözüm panelleri ---- */
.gy-panel { text-align: left; padding: 8px 4px 10px; }
.gy-panel[hidden] { display: none; }

.gy-bilgi {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--gy-mavi-acik);
    font-size: 14px;
    line-height: 1.65;
    color: #0f3b52;
    margin-bottom: 16px;
}
.gy-bilgi .material-symbols-rounded { font-size: 22px; color: var(--gy-mavi); flex-shrink: 0; margin-top: 1px; }
.gy-bilgi b { font-weight: 600; }

.gy-adimlar { list-style: none; counter-reset: gy; margin: 0 0 18px; }
.gy-adimlar li {
    counter-increment: gy;
    position: relative;
    padding: 0 0 12px 38px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gy-yazi);
}
.gy-adimlar li::before {
    content: counter(gy);
    position: absolute;
    left: 0;
    top: -1px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--gy-altin);
    color: #9a7656;
    font: 600 13px/26px 'Poppins', sans-serif;
    text-align: center;
}

/* Form alanları */
.gy-alan { margin-bottom: 16px; }
.gy-alan label, .gy-alan .gy-etiket { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.gy-alan .gy-ipucu { display: block; font-size: 12px; font-weight: 400; color: var(--gy-yazi-soluk); margin-top: 6px; line-height: 1.5; }
.gy-alan input[type="email"], .gy-alan input[type="text"], .gy-alan textarea {
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--gy-cizgi);
    background: #fff;
    font: 400 14.5px 'Inter', sans-serif;
    color: var(--gy-yazi);
    transition: border-color .15s, box-shadow .15s;
}
.gy-alan textarea { resize: vertical; min-height: 76px; }
.gy-alan input:focus, .gy-alan textarea:focus { outline: none; border-color: var(--gy-mavi); box-shadow: 0 0 0 3px var(--gy-mavi-acik); }
.gy-alan input[aria-invalid="true"] { border-color: #dc2626; }
.gy-hata { display: none; font-size: 12px; color: #dc2626; margin-top: 6px; }
.gy-alan.hatali .gy-hata { display: block; }

/* Google / Microsoft seçimi — iki eşit hap */
.gy-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gy-ikili label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 10px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    box-shadow: var(--gy-hap-golge), 0 0 0 1px var(--gy-cizgi);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.gy-ikili label svg { width: 18px; height: 18px; flex-shrink: 0; }
.gy-ikili input { position: absolute; opacity: 0; pointer-events: none; }
.gy-ikili label:has(input:checked) { border-color: var(--gy-mavi); background: var(--gy-mavi-acik); }
.gy-ikili label:has(input:focus-visible) { outline: 3px solid var(--gy-mavi-acik); outline-offset: 2px; }

/* Düğmeler */
.gy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 999px;
    border: none;
    font: 600 14.5px 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
}
.gy-btn .material-symbols-rounded { font-size: 19px; }
.gy-btn-birincil { background: var(--gy-mavi); color: #fff; box-shadow: 0 6px 18px rgba(47, 164, 215, 0.28); }
.gy-btn-birincil:hover { background: var(--gy-mavi-koyu); }
.gy-btn-ikincil { background: #fff; color: var(--gy-yazi); box-shadow: var(--gy-hap-golge), 0 0 0 1px var(--gy-cizgi); }
.gy-btn-ikincil:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 0 0 1px #d1d5db; }
.gy-btn + .gy-btn { margin-top: 10px; }

/* "Google ile devam et" / "Microsoft ile devam et" — giriş ekranındaki
 * sosyal düğmelerin aynısı: beyaz hap, marka simgesi, koyu yazı. Doğrudan
 * sağlayıcı girişini başlatır (href sunucuda sesskey'li üretilir). */
.gy-btn-saglayici {
    background: #fff;
    color: var(--gy-yazi);
    gap: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 0 0 1.5px var(--gy-mavi);
}
.gy-btn-saglayici svg { width: 20px; height: 20px; flex-shrink: 0; }
.gy-btn-saglayici:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 0 0 1.5px var(--gy-mavi-koyu); }

.gy-baglanti {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    background: none;
    border: none;
    font: 500 13px 'Inter', sans-serif;
    color: var(--gy-mavi-koyu);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
.gy-baglanti:hover { text-decoration: underline; }

.gy-guven {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.55;
    color: var(--gy-yazi-soluk);
    margin: 4px 2px 16px;
}
.gy-guven .material-symbols-rounded { font-size: 16px; color: #16a34a; flex-shrink: 0; margin-top: 1px; }

/* Sonuç ekranı */
.gy-sonuc-ikon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 6px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #059669;
}
.gy-sonuc-ikon .material-symbols-rounded { font-size: 34px; }
.gy-sonuc p { font-size: 14px; line-height: 1.7; color: var(--gy-yazi-soluk); margin-bottom: 14px; }
.gy-sonuc p b { color: var(--gy-yazi); font-weight: 600; }

.gy-alt-bilgi {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--gy-cizgi);
    font-size: 12px;
    line-height: 1.6;
    color: var(--gy-yazi-soluk);
}
.gy-alt-bilgi a { color: var(--gy-mavi-koyu); text-decoration: none; }

@media (max-width: 480px) {
    body { padding: 20px 16px 32px; }
    .gy-kart { padding: 28px 20px 22px; border-radius: 20px; }
    .gy-logo { width: 72px; height: 72px; }
    h1 { font-size: 20px; }
}

/* ---- Sunucu tarafı durumlar (giris-yardim.php) ---- */
.gy-form-aciklama { text-align: left; margin-bottom: 18px; }
.gy-istege-bagli { font-weight: 400; color: var(--gy-yazi-soluk); }

.gy-hata-kutu {
    padding: 13px 16px;
    border-radius: 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 16px;
}

.gy-sonuc-ikon.gy-ikon-mavi { background: var(--gy-mavi-acik); color: var(--gy-mavi); }
.gy-sonuc-ikon.gy-ikon-turuncu { background: #fff7ed; color: #c2410c; }
.gy-sonuc form { margin: 6px 0 4px; }
.gy-sonuc .gy-dipnot { font-size: 12px; margin-top: 14px; }

/* Bal küpü — botlar için görünmez alan. display:none KULLANILMAZ (bazı botlar
 * gizli alanı atlar); ekran dışına itilir, ekran okuyucudan da gizlidir. */
.gy-bal { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }