/* ============================================================================
   uyelik_style.css — ÜYELİK FORMU (PC)
   TÜM kurallar #uyelik_app altında → mevcut sayfanın CSS'ini bozmaz / bozulmaz.
   Renkler: kurumsal lacivert + teal aksan. Hatalı=kırmızı, uygun=yeşil.
   ========================================================================== */

#uyelik_app{
  /* --- TEMA DEĞİŞKENLERİ (renkleri tek yerden yönet) --- */
  --lacivert:#6B9DD5; --lacivert-2:#27303A;
  --teal:#6196D1; --teal-koyu:#275C9E;
  --metin:#1d2733; --metin-soluk:#6b7785; --cizgi:#e3e8ee;
  --hata-bg:#fdecec; --hata-cizgi:#e23b3b;   /* HATALI alan */
  --ok-bg:#e9f9f1;   --ok-cizgi:#1fb486;     /* UYGUN alan */

  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--metin); display:flex; justify-content:center; padding:20px 0 0 0;;
}
#uyelik_app *{ box-sizing:border-box; }

/* --- KART: sol panel + sağ form (banner 1010px ile aynı en) --- */
#uyelik_app .kart{
  width:1010px; max-width:100%; display:grid; grid-template-columns:240px 1fr;
  background:#fff; border-radius:0px; overflow:hidden;
  box-shadow:0 24px 60px rgba(15,28,46,.18); text-align:left;
}

/* --- SOL PANEL --- */
#uyelik_app .yan-panel{ background:linear-gradient(190deg,var(--lacivert),var(--lacivert-2)); color:#fff; padding:32px 22px; position:relative; }
#uyelik_app .yan-panel h1{ font-size:26px; margin:0 0 14px; color:#fff; }
#uyelik_app .yan-panel .aciklama{ font-size:14px; line-height:1.7; color:#fff; margin:0; }
#uyelik_app .yan-panel .ozellik{ list-style:none; margin:28px 0; padding:0; }
#uyelik_app .yan-panel .ozellik li{ font-size:13px; padding:8px 0 8px 24px; position:relative; color:#fff; }
#uyelik_app .yan-panel .ozellik li:before{ content:"✓"; position:absolute; left:0; color:#1fb486; font-weight:700; }
#uyelik_app .yan-panel .rozet{ position:absolute; bottom:32px; left:32px; right:32px; font-size:12px; color:#9fb0c0; border-top:1px solid rgba(255,255,255,.08); padding-top:16px; }

/* --- SAĞ FORM ALANI --- */
#uyelik_app .form-alan{ padding:36px 40px; }
#uyelik_app .seritsiz{ display:none; }
#uyelik_app .serit{ display:block; padding:12px 16px; border-radius:10px; font-size:14px; margin-bottom:18px; }
#uyelik_app .serit.ok{ background:var(--ok-bg); color:var(--ok-cizgi); border:1px solid var(--ok-cizgi); }
#uyelik_app .serit.hata{ background:var(--hata-bg); color:var(--hata-cizgi); border:1px solid var(--hata-cizgi); }

/* --- FORM TABLOSU: etiket | giriş | durum --- */
#uyelik_app .form-tablo{ width:100%; border-collapse:collapse; }
#uyelik_app .form-tablo th{ text-align:left; vertical-align:top; padding:10px 14px 10px 0; font-size:13px; font-weight:600; color:var(--metin); white-space:nowrap; width:130px; }
#uyelik_app .form-tablo td{ padding:8px 0; vertical-align:top; }
#uyelik_app .form-tablo td.durum{ padding-left:14px; width:200px; font-size:12px; line-height:1.5; }

/* --- GİRİŞ ELEMANLARI --- */
#uyelik_app input[type=text], #uyelik_app input[type=email], #uyelik_app input[type=password], #uyelik_app select{
  width:100%; padding:11px 13px; font-size:14px; color:var(--metin);
  border:1px solid var(--cizgi); border-radius:9px; background:#fff;
  transition:border-color .15s, background .15s, box-shadow .15s; outline:none;
}
#uyelik_app input::placeholder{ color:var(--metin-soluk); }
#uyelik_app input:focus, #uyelik_app select:focus{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,180,134,.15); }
#uyelik_app .ikili{ display:flex; gap:8px; align-items:center; }
#uyelik_app .ikili input{ flex:1; min-width:0; }
#uyelik_app .captcha-gorsel{ border-radius:8px; flex:0 0 auto; }
/* captcha kutusunu geniş tut (item 5) */
#uyelik_app #captcha{ min-width:170px; }
/* mail kutusunu geniş tut (item 5) */
#uyelik_app #eposta{ min-width:240px; }
/* göz / yenile gibi simge butonları kare ve sade */
#uyelik_app .btn.goz, #uyelik_app #captcha_yenile{ padding:10px 12px; font-size:16px; line-height:1; }
#uyelik_app .sayac{ display:inline-block; margin-top:6px; font-size:12px; color:var(--metin-soluk); }
#uyelik_app .tik{ display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; }
#uyelik_app .tik input{ width:17px; height:17px; accent-color:var(--teal); }
#uyelik_app .tik a{ color:var(--teal); text-decoration:none; font-weight:600; }
#uyelik_app .tik a:hover{ text-decoration:underline; }

/* --- GİRİŞ ALANI DURUMU: SADECE içi (bordura dokunmaz) — kendin renk verebilirsin ---
   alan-ok  : uygun → içi beyaz (istersen burayı "farklı" yap)
   alan-hata: hatalı → içi açık kırmızı
   Mesaj sınıfları (msg-ok/msg-hata) bunlardan AYRIDIR, aşağıda. */
   
   /* --- DOĞRULAMA DURUMLARI: hatalı KIRMIZI, uygun YEŞİL --- 
#uyelik_app input.gecerli, #uyelik_app select.gecerli{ background:var(--ok-bg); border-color:var(--ok-cizgi); }
#uyelik_app input.hatali,  #uyelik_app select.hatali { background:var(--hata-bg); border-color:var(--hata-cizgi); }
#uyelik_app td.durum .msg-ok{ color:var(--ok-cizgi); }
#uyelik_app td.durum .msg-hata{ color:var(--hata-cizgi); }
#uyelik_app td.durum .msg-bilgi{ color:var(--metin-soluk); }
#uyelik_app td.durum .rozetcik{ font-weight:700; margin-right:4px; }*/
   
   
   
#uyelik_app input.alan-ok,   #uyelik_app select.alan-ok  {border-color:var(--ok-cizgi); background:#ffffff; }
#uyelik_app input.alan-hata, #uyelik_app select.alan-hata{ border-color:var(--hata-cizgi); background:var(--hata-bg); }
#uyelik_app td.durum .msg-ok{ color:var(--ok-cizgi); }
#uyelik_app td.durum .msg-hata{ color:var(--hata-cizgi); }
#uyelik_app td.durum .msg-bilgi{ color:var(--metin-soluk); }
#uyelik_app td.durum .rozetcik{ font-weight:700; margin-right:4px; }

/* --- KİLİTLİ SATIRLAR (doğrulamadan önce soluk/pasif) --- */
#uyelik_app .kilit{ opacity:.45; filter:grayscale(.2); }
#uyelik_app .kilit input, #uyelik_app .kilit select{ background:#f1f3f6; cursor:not-allowed; }
#uyelik_app .kilit th:after{ content:" 🔒"; font-size:11px; }
#uyelik_app .gizli{ display:none !important; }

/* --- BUTONLAR --- */
#uyelik_app .btn{ border:none; border-radius:9px; cursor:pointer; font-weight:600; font-size:14px; transition:background .15s, transform .05s, opacity .15s; }
#uyelik_app .btn:active{ transform:translateY(1px); }
#uyelik_app .btn:disabled{ opacity:.5; cursor:not-allowed; }
#uyelik_app .btn-ana{ background:var(--teal); color:#fff; padding:13px 26px; width:420px; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
#uyelik_app .btn-ana:hover:not(:disabled){ background:var(--teal-koyu); }
#uyelik_app .btn-ana-kucuk{ background:var(--teal); color:#fff; padding:11px 18px; white-space:nowrap; }
#uyelik_app .btn-ana-kucuk:hover:not(:disabled){ background:var(--teal-koyu); }
#uyelik_app .btn-ikincil{ background:var(--lacivert); color:#fff; padding:11px 16px; white-space:nowrap; }
#uyelik_app .btn-ikincil:hover:not(:disabled){ background:var(--lacivert-2); }

/* --- SPINNER (tıklayınca "gönderiliyor..." animasyonu) --- */
#uyelik_app .spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; display:none; animation:uyDon .7s linear infinite; }
#uyelik_app .btn.yukleniyor .spinner{ display:inline-block; }
#uyelik_app .btn.yukleniyor{ pointer-events:none; opacity:.85; }
@keyframes uyDon{ to{ transform:rotate(360deg); } }

/* --- SÖZLEŞME PENCERESİ --- */
#uyelik_app .modal{ position:fixed; inset:0; background:rgba(15,28,46,.55); display:flex; align-items:center; justify-content:center; z-index:9999; }
#uyelik_app .modal-ic{ background:#fff; width:560px; max-width:90%; border-radius:14px; padding:28px; }
#uyelik_app .modal-ic h3{ margin:0 0 14px; }
#uyelik_app .modal-metin{ max-height:300px; overflow:auto; font-size:14px; line-height:1.7; color:var(--metin-soluk); border:1px solid var(--cizgi); border-radius:10px; padding:16px; margin-bottom:18px; }