@font-face { font-family: Hind; font-weight: 500; font-display: swap; src: url(yazi/hind-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: Hind; font-weight: 500; font-display: swap; src: url(yazi/hind-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Hind; font-weight: 600; font-display: swap; src: url(yazi/hind-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: Hind; font-weight: 600; font-display: swap; src: url(yazi/hind-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Hind; font-weight: 700; font-display: swap; src: url(yazi/hind-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: Hind; font-weight: 700; font-display: swap; src: url(yazi/hind-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
:root { --sari: #ffd200; --siyah: #111; --zemin: #1b1b1b; --girdi: #121212; --cizgi: #353535; --yazi: #f4f4f4; --soluk: #a3a3a3; --hata: #ff6b5e; color-scheme: dark; }
* { box-sizing: border-box; }
::selection { background: var(--sari); color: var(--siyah); }
html, body { margin: 0; min-height: 100%; }
body { background: var(--zemin); color: var(--yazi); font: 500 17px/1.5 Hind, system-ui, sans-serif; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }
.bant { display: flex; align-items: center; gap: 22px; min-height: 96px; padding: 12px 28px; background: var(--sari); color: var(--siyah); }
.piktogram { width: 54px; height: 54px; flex: none; display: grid; place-items: center; background: var(--siyah); color: var(--sari); border-radius: 3px; }
.piktogram svg { width: 30px; height: 30px; }
.bant b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.bant div span { display: block; font-size: 16px; opacity: .78; }
@media (max-width: 760px) { .bant { gap: 12px; padding: 10px 14px; min-height: 76px; } .piktogram { width: 42px; height: 42px; } .bant b { font-size: 20px; } .bant div span { font-size: 13px; } }
.giris { width: min(460px, calc(100vw - 32px)); margin: 64px auto; }
h1 { font-size: 34px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.02em; }
h1 span { color: var(--soluk); font-weight: 500; }
p { color: var(--soluk); margin: 0 0 22px; }
.hata { color: var(--yazi); border: 2px solid rgba(255, 107, 94, .55); background: rgba(255, 107, 94, .08); padding: 12px 16px; border-radius: 3px; }
form { display: grid; gap: 18px; }
label { display: grid; gap: 7px; font-weight: 600; }
input { height: 52px; background: var(--girdi); border: 2px solid var(--cizgi); border-radius: 3px; padding: 0 16px; font: inherit; font-size: 18px; color: var(--yazi); caret-color: var(--sari); outline: none; }
input:focus { border-color: var(--sari); }
button { height: 56px; margin-top: 8px; background: var(--sari); color: var(--siyah); border: 0; border-radius: 3px; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; }
button:hover { background: #e6bd00; }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }