/* Alan Adı Merkezi · giriş kabuğu (Kazım, 11 Kasım). Her zaman koyu (Kazım: "yalnız koyu, tema seçimi olmasın"); renkler yalnız :root değişkenlerinde.
   Karanix renkleri: turkuaz #009F92, açık turkuaz #7ADCD0, koyu #005952, turuncu #FB5206 (--mavi vurgu, --teal ikinci renk). */
:root {
    --z: #020202; --z2: #07090c; --kart: rgba(18, 22, 24, .24); --kart-kenar: rgba(255, 255, 255, .14); --yazi: #ffffff; --soluk: #a3a3a3; --cizgi: #262626;
    --alan: rgba(255, 255, 255, .05); --alan-kenar: rgba(255, 255, 255, .16); --vurgu: #7adcd0; --mavi: 0, 224, 208; --d1: 0, 200, 185; --d2: 122, 220, 208; --d3: 251, 82, 6; --parlak: 255, 255, 255; --teal: 251, 82, 6; --piksel: 255, 255, 255;
    --dugme: #ffffff; --dugme-yazi: #0a0a0a; --dugme-piksel: 10, 10, 10;
    --iyi: #6fd99a; --kotu: #ff8f85; --kotu-z: rgba(180, 35, 24, .16); --uyari: #f2c26b; --uyari-z: rgba(242, 194, 107, .12); --bilgi-z: rgba(122, 220, 208, .1);
    --golge: 0 40px 100px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.gd {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
    background: var(--z); color: var(--yazi); font: 15px/1.5 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease;
}
a { color: var(--vurgu); }
.ikon { flex: none; }
.gd-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── background layers ── */
.gd-tuval { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gd-izgara {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(var(--piksel), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--piksel), .045) 1px, transparent 1px);
    background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%);
}

.gd-marka { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 0 22px; color: var(--yazi); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.015em; }
.gd-imza { width: fit-content; margin: 18px auto 0; padding: 5px 12px; border-radius: 999px; text-align: center; font-size: 13px; color: var(--soluk); background: var(--kart); border: 1px solid var(--kart-kenar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gd-imza a { color: var(--yazi); font-weight: 700; text-decoration: none; }
.gd-imza a:hover { text-decoration: underline; }

/* ── main ── */
.gd-ana {
    position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(24px, 6vh, 72px) clamp(16px, 4vw, 44px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-content: center; column-gap: clamp(32px, 6vw, 96px);
}
.gd-kart-yer { min-width: 0; grid-column: 2;
}

.gd-kart {
    position: relative; padding: clamp(24px, 3.4vw, 36px); border-radius: 22px; background: var(--kart); border: 1px solid var(--kart-kenar); box-shadow: var(--golge);
    backdrop-filter: blur(9px) saturate(1.7) brightness(1.1); -webkit-backdrop-filter: blur(9px) saturate(1.7) brightness(1.1); animation: gd-gir .7s cubic-bezier(.2, .8, .2, 1) both;
}
.gd-kart::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(150deg, rgba(var(--mavi), .55), transparent 38%, transparent 62%, rgba(var(--teal), .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes gd-gir { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.gd-kart h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.gd-kart .gd-ust-yazi { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--mavi)); }
.gd-kart .gd-aciklama { margin: 8px 0 22px; color: var(--soluk); font-size: 14.5px; }

/* fields */
.gd-alan { margin-bottom: 14px; }
.gd-alan > label, .gd-etiket { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; }
.gd-girdi { position: relative; display: flex; align-items: center; }
.gd-girdi > .ikon { position: absolute; left: 14px; color: var(--soluk); pointer-events: none; }
.gd-girdi input {
    width: 100%; height: 50px; padding: 0 46px 0 42px; border-radius: 13px; border: 1px solid var(--alan-kenar); background: var(--alan); color: var(--yazi);
    font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s, background .2s;
}
.gd-girdi input::placeholder { color: var(--soluk); opacity: .7; }
.gd-girdi input:focus { outline: none; border-color: rgb(var(--mavi)); box-shadow: 0 0 0 4px rgba(var(--mavi), .16); }
.gd-girdi input[aria-invalid="true"] { border-color: var(--kotu); }
.gd-goz { position: absolute; right: 6px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--soluk); cursor: pointer; }
.gd-goz:hover { color: var(--yazi); background: rgba(var(--piksel), .06); }
.gd-goz:focus-visible { outline: 2px solid rgb(var(--mavi)); }
.gd-goz .goz-kapali { display: none; } .gd-goz[aria-pressed="true"] .goz-acik { display: none; } .gd-goz[aria-pressed="true"] .goz-kapali { display: block; }
.gd-not { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; }
.gd-not[hidden] { display: none; }
.gd-not.uyari { color: var(--uyari); }
.gd-alan-hata { margin-top: 7px; font-size: 13.5px; color: var(--kotu); display: flex; gap: 6px; align-items: center; }
.gd-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 20px; font-size: 13.5px; color: var(--soluk); }
.gd-onay { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.gd-onay input { width: 18px; height: 18px; margin: 0; accent-color: rgb(var(--mavi)); }
.gd-bilgi, .gd-hata { padding: 11px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; }
.gd-bilgi { background: var(--bilgi-z); color: var(--yazi); }
.gd-hata { background: var(--kotu-z); color: var(--kotu); }

/* the Başla button: blinking pixel floor (Neva Cortex's intro), a slow breathing glow, pixel curtain on submit */
.gd-basla {
    position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 58px;
    border: 0; border-radius: 15px; background: var(--dugme); color: var(--dugme-yazi); font: inherit; font-size: 17px; font-weight: 700; letter-spacing: .01em; cursor: pointer;
    box-shadow: 0 0 0 1.5px rgba(var(--mavi), .9); /* Kazım, 11 Kasım: arkadaki yanıp sönen büyük ışık yok; içteki pikseller duruyor */
    transition: transform .15s ease;
}
.gd-basla > :not(.gd-piksel) { position: relative; z-index: 1; }
.gd-basla .ikon { transition: transform .25s ease; }
.gd-basla:hover .ikon { transform: translateX(4px); }
.gd-basla:hover { box-shadow: 0 0 0 2px rgba(var(--mavi), 1); }
.gd-basla:active { transform: scale(.985); }
.gd-basla:focus-visible { outline: 3px solid rgba(var(--mavi), .6); outline-offset: 3px; }
.gd-basla[disabled] { cursor: progress; }
.gd-basla .gd-yukleniyor { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gd-don .7s linear infinite; }
.gd-basla[data-yukleniyor] .gd-yukleniyor { display: inline-block; } .gd-basla[data-yukleniyor] .ikon { display: none; }
.gd-piksel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
@keyframes gd-don { to { transform: rotate(360deg); } }
.gd-ikincil { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 10px; border-radius: 13px; border: 1px solid var(--alan-kenar); background: transparent; color: var(--yazi); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none; }
.gd-ikincil:hover { background: rgba(var(--piksel), .05); }
.gd-ikincil[disabled] { opacity: .55; cursor: not-allowed; }
.gd-baglantilar { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 14px; }
.gd-baglantilar a, .gd-baglantilar button.gd-baglanti { color: var(--soluk); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.gd-baglantilar a:hover, .gd-baglantilar button.gd-baglanti:hover { color: var(--yazi); text-decoration: underline; }

/* one-time code: 8 boxes over one real input (paste, autofill and screen readers keep working) */
.gd-kod { position: relative; margin-bottom: 8px; }
.gd-kod input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; z-index: 2; caret-color: transparent; letter-spacing: 1em; }
.gd-kod .kutular { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 7px; }
.gd-kod .kutular span { display: grid; place-items: center; height: 56px; border-radius: 12px; border: 1px solid var(--alan-kenar); background: var(--alan); font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gd-kod .kutular span.dolu { border-color: rgba(var(--mavi), .55); }
.gd-kod .kutular span.aktif { border-color: rgb(var(--mavi)); box-shadow: 0 0 0 4px rgba(var(--mavi), .16); }
.gd-kod .kutular span.aktif::after { content: ""; width: 2px; height: 24px; background: rgb(var(--mavi)); animation: gd-imlec 1s steps(1) infinite; }

.gd-kod.hatali .kutular span { border-color: var(--kotu); animation: gd-salla .35s; }
@keyframes gd-imlec { 50% { opacity: 0; } }
@keyframes gd-salla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gd-kod-metin input { text-align: center; letter-spacing: .14em; text-transform: uppercase; padding: 0 14px !important; font-size: 20px !important; }

/* password rules (davet) */
.gd-kurallar { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--soluk); }
.gd-kurallar li { display: flex; align-items: center; gap: 7px; }
.gd-kurallar li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--alan-kenar); flex: none; transition: all .2s; }
.gd-kurallar li.tamam { color: var(--iyi); }
.gd-kurallar li.tamam::before { border-color: var(--iyi); background: var(--iyi); box-shadow: inset 0 0 0 3px var(--kart); }
.gd-guc { height: 5px; border-radius: 3px; margin-top: 10px; background: rgba(var(--piksel), .08); overflow: hidden; }
.gd-guc span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .3s, background .3s; }



/* pixel curtain between pages */
.gd-perde { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.gd-perde canvas { width: 100%; height: 100%; display: block; }
.gd-perde.acik { pointer-events: auto; }

@media (max-width: 960px) {
    /* telefon ve dar ekran: tek ekran, kaydırma yok; yalnız logo, tema ve giriş kartı (Kazım: "çok yoğun, ikiye katlanmasın") */
    .gd-ana { grid-template-columns: minmax(0, 1fr); max-width: 460px; padding: 10px 16px max(16px, env(safe-area-inset-bottom)); gap: 0; align-content: end; }
    .gd-kart-yer { grid-column: 1; }
    .gd-izgara { opacity: .3; }
    .gd-kart { padding: 24px 20px; border-radius: 20px; }
    .gd-kart h1 { font-size: 25px; }
    .gd-kart .gd-aciklama { margin: 6px 0 18px; }
}
@media (max-height: 760px) {
    /* kısa ekran (dizüstü 720, küçük telefon): her şey tek ekrana sığar */
    .gd-ana { padding-top: 12px; padding-bottom: 12px; }
    .gd-marka { margin-bottom: 12px; font-size: 18px; }
    .gd-imza { margin-top: 10px; }
    .gd-kart { padding: 20px 22px; }
    .gd-kart .gd-ust-yazi { display: none; }
    .gd-kart .gd-aciklama { margin: 4px 0 12px; font-size: 13.5px; }
    .gd-alan { margin-bottom: 10px; }
    .gd-girdi input { height: 46px; }
    .gd-satir { margin-bottom: 8px; }
    .gd-onay { min-height: 36px; }
    .gd-basla { height: 52px; }
    .gd-kod .kutular span { height: 48px; }
    .gd-baglantilar { margin-top: 12px; gap: 6px; }
    .gd-ikincil { height: 42px; }
}

@media (max-width: 420px) {
    .gd-kod .kutular { gap: 5px; } .gd-kod .kutular span { height: 50px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (forced-colors: active) { .gd-basla { border: 2px solid ButtonText; } }
.gd-satir { margin: 0 0 14px; }
.gd-onay { min-height: 44px; padding-right: 8px; }


/* buzlu cam (Kazım, 11 Kasım: "kristal, bulanık buz, arkası biraz görünsün"): üstte ince ışık, içte parlak kenar */
.gd-kart { background-image: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .015) 100%); box-shadow: var(--golge), inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .03); }
.gd-girdi input { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── QR belge doğrulama sayfası (Kazım, 11 Kasım: "giriş sayfası gibi kurumsal") ── */
.gb .gd-ana { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
.gb-marka-alt { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--kart-kenar); color: var(--soluk); font-weight: 600; font-size: 15px; }
.gb-durum { display: flex; align-items: center; gap: 16px; padding: 16px; margin-bottom: 22px; border-radius: 16px; border: 1px solid; }
.gb-durum h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.gb-durum p { margin: 3px 0 0; color: var(--soluk); font-size: 14px; }
.gb-rozet { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 16px; }
.gb-iyi { background: rgba(0, 224, 208, .08); border-color: rgba(0, 224, 208, .32); }
.gb-iyi .gb-rozet { background: rgba(0, 224, 208, .16); color: rgb(var(--mavi)); box-shadow: 0 0 0 1px rgba(0, 224, 208, .35), 0 10px 30px -12px rgba(0, 224, 208, .6); }
.gb-uyari { background: rgba(251, 82, 6, .08); border-color: rgba(251, 82, 6, .32); }
.gb-uyari .gb-rozet { background: rgba(251, 82, 6, .16); color: #ff8a4c; box-shadow: 0 0 0 1px rgba(251, 82, 6, .35); }
.gb-kotu { background: var(--kotu-z); border-color: rgba(255, 143, 133, .3); }
.gb-kotu .gb-rozet { background: rgba(255, 143, 133, .14); color: var(--kotu); box-shadow: 0 0 0 1px rgba(255, 143, 133, .3); }
.gb-etiket { margin-bottom: 4px !important; }
.gb-alan { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; word-break: break-all; margin-bottom: 18px; }
.gb-bilgi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.gb-bilgi > div { padding: 12px 14px; border-radius: 13px; background: var(--alan); border: 1px solid var(--kart-kenar); min-width: 0; }
.gb-bilgi .gb-genis { grid-column: 1 / -1; }
.gb-bilgi dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.gb-bilgi dd { margin: 4px 0 0; font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.gb-bilgi dd code { font: 600 14.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.gb-bilgi dd small { display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px; color: var(--soluk); }
.gb-bilgi .gb-not { font-weight: 500; font-size: 14px; }
.gb-zaman { display: flex; align-items: center; gap: 7px; margin: 18px 0 0; font-size: 12.5px; color: var(--soluk); }
.gb-zaman .ikon { color: rgb(var(--mavi)); }
.gb-dipnot { margin: 14px auto 0; max-width: 540px; text-align: center; font-size: 12.5px; color: var(--soluk); }
@media (max-width: 960px) { .gb .gd-ana { grid-template-columns: minmax(0, 1fr); max-width: 560px; align-content: start; padding-top: 24px; } }
@media (max-width: 480px) { .gb-bilgi { grid-template-columns: 1fr; } .gb-durum { padding: 12px; gap: 12px; } .gb-rozet { width: 46px; height: 46px; } .gb-durum h1 { font-size: 19px; } }