/* BOM 337 giris kapisi BILESENLERI - Taslak A "Kabile Ormani Kapisi" (launcher1819, kullanici secimi 2 Eki).
   ORTAK KAYNAK (giris1820, kullanici 2 Eki: "Şifre ekranının temasını ve kendisini websiteyede işleyelim web sitede aynı tasarım olsun"):
   bu dosya BAYT BAYT AYNI iki yerde kullanilir -
     firlatici  : asar src/ui/giris-bilesen.css (giris.html; yerlesim giris.css)
     web sitesi : https://bom337.com/launcher/giris/giris-bilesen.css (giris.php / index.php sahnesi; yerlesim varliklar/gk-site.css)
   Paketler md5 ile denetler (paket8/launcher1820 derle.sh, paket8/giris1820 uygula.sh). Burada YERLESIM YOK (konum/genislik
   sahneye ait); yalniz bilesenlerin gorunumu. Sinif adlari gk- onekli: sitenin kendi .panel/.alan/.ust/.goz/.satir/.etiket
   kurallariyla carpismasin (olculdu: site.css'te bu adlarin 7'si var).
   Chromium 83 (firlatici) uyumu: flex 'gap' YOK, :where/:is YOK, aspect-ratio YOK; bosluklar margin ile. */
.gk { --gk-yazi: "Segoe UI", Tahoma, sans-serif; font-family: var(--gk-yazi); color: #f3e6c4; }
.gk, .gk * { box-sizing: border-box; }
.gk [hidden] { display: none !important; }
/* dugme sifirlama: TUM gk dugmelerinde ilk sinif; ayni ozgulluk + dosyada once -> bilesen kurallari ezer */
.gk-sifir { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; outline: none;
  -webkit-appearance: none; appearance: none; text-decoration: none; }

/* ---- pencere dugmeleri (yuvarlak altin / kirmizi) ---- */
.gk-yd { width: 30px; height: 30px; margin-left: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #ffe08a 0%, #f2b93b 55%, #b9791a 100%); border: 1px solid #7a5510;
  box-shadow: 0 2px 0 #6a4a10, 0 3px 8px rgba(0,0,0,.5); transition: filter .15s, transform .1s; }
.gk-yd svg { width: 12px; height: 12px; fill: none; stroke: #3a2400; stroke-width: 1.9; stroke-linecap: round; }
.gk-yd.kapat { background: radial-gradient(circle at 50% 35%, #ff9a7a 0%, #e0482d 55%, #9c2414 100%); border-color: #6e170c;
  box-shadow: 0 2px 0 #5c130a, 0 3px 8px rgba(0,0,0,.5); }
.gk-yd.kapat svg { stroke: #fff; }
.gk-yd:hover { filter: brightness(1.1); }
.gk-yd:active { transform: translateY(1px); }

/* ---- sosyal dugmeler ---- */
.gk-sosyal { display: flex; }
.gk-sb { display: flex; align-items: center; height: 40px; padding: 0 14px 0 10px; margin-right: 10px; border-radius: 11px;
  font: 700 12px/1.15 var(--gk-yazi); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.25); transition: filter .15s, transform .1s; }
.gk-sb svg { width: 20px; height: 20px; margin-right: 8px; fill: #fff; flex: none; }
.gk-sb:hover { filter: brightness(1.1); }
.gk-sb:active { transform: translateY(1px); }
.gk-sb.site { background: linear-gradient(180deg, #e9b54a, #a8711c); color: #2a1800; border-color: #7a5510; }
.gk-sb.site svg { fill: #2a1800; }
.gk-sb.discord { background: linear-gradient(180deg, #7b86f2, #4f59c9); }
.gk-sb.instagram { background: linear-gradient(180deg, #d9558a, #8e3aa6); }
.gk-sb.whatsapp { background: linear-gradient(180deg, #3fcf6e, #1f9a4a); }

/* ---- kadife panel ---- */
.gk-panel { position: relative; margin: 0; padding: 18px 22px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(42,27,14,.86) 0%, rgba(20,12,6,.9) 100%);
  border: 1px solid rgba(247,201,75,.55);
  box-shadow: inset 0 1px 0 rgba(255,230,160,.18), 0 14px 34px rgba(0,0,0,.55); }
.gk-panel::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(247,201,75,0), rgba(255,217,100,.95), rgba(247,201,75,0)); }
.gk-etiket { display: block; margin: 0 0 6px 2px; font: 700 11px/1 var(--gk-yazi); letter-spacing: 1.4px; text-transform: uppercase; color: #c9a86a; }
.gk-alan { position: relative; display: flex; align-items: center; height: 42px; margin-bottom: 12px; padding: 0 8px 0 12px;
  background: rgba(0,0,0,.42); border: 1px solid rgba(205,157,90,.45); border-radius: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
  transition: border-color .15s, box-shadow .15s; }
.gk-alan.odak { border-color: #f7c94b; box-shadow: 0 0 0 3px rgba(247,201,75,.18), inset 0 2px 4px rgba(0,0,0,.6); }
.gk-alan > svg { width: 18px; height: 18px; flex: none; margin-right: 10px; fill: none; stroke: #d9b77a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gk-alan input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff3d8;
  box-shadow: none; outline: none; font: 600 15px/1 var(--gk-yazi); letter-spacing: .3px; caret-color: #ffd964; user-select: text; -webkit-user-select: text; }
.gk-alan input[type=password] { letter-spacing: 2px; }
.gk-alan input::placeholder { color: #8d7a5a; letter-spacing: .3px; font-weight: 600; }
.gk-alan.kayitliSifre input::placeholder { color: #e9c66a; letter-spacing: .4px; }
.gk-alan input:disabled { color: #b9a77f; }
.gk-goz { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; }
.gk-goz svg { width: 18px; height: 18px; fill: none; stroke: #d9b77a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gk-goz .cizgi { display: none; }
.gk-goz.acik .cizgi { display: inline; }
.gk-goz:hover { background: rgba(247,201,75,.12); }
.gk-goz:disabled { opacity: .35; cursor: default; background: none; }

.gk-hata { display: flex; align-items: center; margin: -2px 0 10px; padding: 7px 10px; border-radius: 9px; font: 600 12px/1.3 var(--gk-yazi);
  color: #ffb4a6; background: rgba(120,28,18,.55); border: 1px solid rgba(255,140,120,.4); user-select: text; -webkit-user-select: text; }
.gk-hata.bilgi { color: #ffe7a8; background: rgba(110,78,20,.55); border-color: rgba(247,201,75,.45); }

.gk-satir { display: flex; align-items: center; justify-content: space-between; margin: -2px 0 12px; font: 600 12px/1 var(--gk-yazi); }
.gk-kutu { position: relative; display: inline-flex; align-items: center; color: #ecd9ae; cursor: pointer; }
.gk-kutu input { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: 0; opacity: 0; cursor: pointer; }
.gk-kutu i { width: 16px; height: 16px; margin-right: 7px; border-radius: 4px; border: 1px solid #c8901f; background: rgba(0,0,0,.45);
  display: inline-flex; align-items: center; justify-content: center; }
.gk-kutu i svg { width: 11px; height: 11px; fill: none; stroke: #3a2400; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.gk-kutu input:checked + i { background: linear-gradient(180deg, #ffd964, #c8901f); }
.gk-kutu input:checked + i svg { visibility: visible; }
.gk-kutu input:focus + i { box-shadow: 0 0 0 3px rgba(247,201,75,.25); }
.gk-kutu.pasif { opacity: .45; cursor: default; }
.gk-kutu.pasif input { cursor: default; pointer-events: none; }

.gk-acilir { position: relative; }
.gk-kayitli { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 8px; color: #ffe7a8; font: 600 12px/1 var(--gk-yazi);
  background: rgba(247,201,75,.12); border: 1px solid rgba(247,201,75,.4); }
.gk-kayitli b { margin-left: 6px; font-size: 10px; }
.gk-kayitli:hover, .gk-kayitli.acik { background: rgba(247,201,75,.2); }
.gk-sunucu { position: relative; display: flex; align-items: center; width: 100%; height: 46px; padding: 0 12px; margin-bottom: 14px; border-radius: 10px;
  text-align: left; background: linear-gradient(180deg, rgba(92,60,24,.72), rgba(38,23,9,.8)); border: 1px solid rgba(247,201,75,.6);
  box-shadow: inset 0 1px 0 rgba(255,230,160,.2); }
.gk-sunucu:hover, .gk-sunucu.acik { border-color: #f7c94b; }
.gk-nokta { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #5ee36a; box-shadow: 0 0 8px #5ee36a; margin-right: 10px; }
.gk-nokta.yakinda { background: #8a7656; box-shadow: none; }
.gk-nokta.bakim { background: #f0a23a; box-shadow: 0 0 8px #f0a23a; }
.gk-sunucu-ad { flex: 1; font: 700 14px/1.15 var(--gk-yazi); color: #fff3d0; }
.gk-sunucu-ad small { display: block; margin-top: 3px; font: 600 10px/1 var(--gk-yazi); color: #b9a074; letter-spacing: .6px; }
.gk-ok { color: #f7c94b; font-size: 12px; }

.gk-liste { position: absolute; z-index: 8; padding: 6px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(42,27,14,.99), rgba(21,12,6,.99)); border: 1px solid rgba(205,157,90,.62);
  box-shadow: 0 10px 24px rgba(0,0,0,.6); }
.gk-liste.gk-sunucular { left: 0; right: 0; top: 50px; }
.gk-liste.gk-hesaplar { right: 0; top: 32px; width: 270px; max-height: 236px; overflow-y: auto; }
.gk-oge { display: flex; align-items: center; width: 100%; height: 38px; padding: 0 6px 0 10px; border-radius: 8px; text-align: left;
  font: 700 13px/1 var(--gk-yazi); color: #fff3d0; cursor: pointer; }
.gk-oge:hover, .gk-oge:focus { background: rgba(247,201,75,.12); outline: none; }
.gk-oge.secili { background: rgba(247,201,75,.16); box-shadow: inset 0 0 0 1px rgba(247,201,75,.45); }
.gk-oge.pasif { color: #9a876a; }
.gk-oge-ad { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gk-oge em { margin-left: 8px; font: 600 10px/1 var(--gk-yazi); font-style: normal; letter-spacing: .5px; color: #a88f62; white-space: nowrap; }
.gk-oge em.sifreli { color: #e9c66a; }
.gk-liste .gk-nokta { width: 9px; height: 9px; margin-right: 10px; box-shadow: none; }
.gk-sil { flex: none; width: 26px; height: 26px; margin-left: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.gk-sil svg { width: 14px; height: 14px; fill: none; stroke: #c99a7a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gk-sil:hover { background: rgba(224,72,45,.25); }
.gk-sil:hover svg { stroke: #ffb4a6; }
.gk-bos { padding: 10px; font: 600 12px/1.3 var(--gk-yazi); color: #a88f62; }
.gk-liste::-webkit-scrollbar { width: 8px; }
.gk-liste::-webkit-scrollbar-thumb { background: rgba(247,201,75,.35); border-radius: 4px; }

.gk-oyna { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 14px;
  background: linear-gradient(180deg, #fff1a0 0%, #ffd964 18%, #f7c94b 52%, #c8901f 100%);
  border: 1px solid #8a6413; box-shadow: 0 3px 0 #7a5510, 0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7);
  font: 900 26px/1 var(--gk-yazi); letter-spacing: 4px; color: #3a2400; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  transition: filter .15s, transform .1s; }
.gk-oyna svg { width: 22px; height: 22px; margin-right: 10px; fill: #3a2400; }
.gk-oyna:hover { filter: brightness(1.06); color: #3a2400; }
.gk-oyna:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a5510, 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7); }
.gk-oyna:focus { box-shadow: 0 3px 0 #7a5510, 0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 3px rgba(255,236,160,.45); }
.gk-oyna:disabled { filter: saturate(.55) brightness(.85); cursor: default; transform: none; }
.gk-oyna.mesgul { font-size: 18px; letter-spacing: 2px; }
.gk-oyna.mesgul svg { display: none; }
.gk-alt-baglanti { margin-top: 10px; text-align: center; font: 600 12px/1 var(--gk-yazi); color: #b99a63; }
.gk-baglanti { color: #ffd964; font-weight: 700; }
.gk-baglanti:hover { text-decoration: underline; color: #ffd964; }

/* ---- haber afisi (karusel) ---- */
.gk-haber { position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(247,201,75,.55); box-shadow: 0 12px 28px rgba(0,0,0,.55); background: #000; }
.gk-haber.bagli { cursor: pointer; }
.gk-resim { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000 center / cover no-repeat; transition: opacity .35s; }
.gk-resim.solgun { opacity: .15; }
.gk-serit { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(10,6,4,.88) 55%); }
.gk-serit b { display: block; font: 800 15px/1.2 var(--gk-yazi); color: #ffe7a8; text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 64px; }
.gk-serit span { display: block; margin-top: 4px; font: 600 11px/1.3 var(--gk-yazi); color: #d8c49b; padding-right: 64px; }
.gk-etk { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 3px 8px; border-radius: 6px; font: 800 10px/1.4 var(--gk-yazi); letter-spacing: 1px;
  background: #e0482d; color: #fff; }
.gk-noktalar { position: absolute; right: 14px; bottom: 14px; display: flex; }
.gk-noktalar button { width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: width .2s; }
.gk-noktalar button.aktif { background: #ffd964; width: 20px; border-radius: 4px; }

/* ---- Toni balonu (sanattaki Toni Amca'nin ustunde; konumu sahne verir) ---- */
.gk-balon { position: absolute; z-index: 4; padding: 9px 12px; border-radius: 12px; text-align: left;
  font: 700 12px/1.3 var(--gk-yazi); color: #3a2400; background: linear-gradient(180deg, #fff6d6, #f3dda0); border: 1px solid #c8901f;
  box-shadow: 0 6px 14px rgba(0,0,0,.45); animation: gk-salla 4s ease-in-out infinite; }
.gk-balon::after { content: ''; position: absolute; left: 34px; bottom: -7px; width: 12px; height: 12px; background: #f3dda0;
  border-right: 1px solid #c8901f; border-bottom: 1px solid #c8901f; transform: rotate(45deg); }
.gk-balon:hover { filter: brightness(1.05); color: #3a2400; }
@keyframes gk-salla { 0%, 80%, 100% { transform: translateY(0); } 86% { transform: translateY(-4px); } 92% { transform: translateY(0); } 96% { transform: translateY(-2px); } }