/* dryorum — giriş / kayıt (2026-11-13). Sade, nötr tonlar; ince kenarlıklar, yumuşak gölgeler. */
:root { --hs-lac: #0b2440; --hs-mint: #13b59a; --hs-mint2: #0ea58b; --hs-yazi: #0f172a; --hs-gri: #64748b; --hs-gri2: #94a3b8; --hs-cizgi: #e2e8f0; --hs-zemin: #f8fafc; --hs-kirmizi: #dc2626; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.hs { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--hs-yazi); background: #fff; -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; }
.hs a { color: var(--hs-yazi); font-weight: 600; text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 3px; }
.hs a:hover { text-decoration-color: var(--hs-mint); color: var(--hs-mint2); }
.hs-sayfa { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100vh; }
body.hs-cikis .hs-kart { opacity: .55; transition: opacity .2s; pointer-events: none; }

/* Sol tanıtım paneli */
.hs-sol { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; color: #e2e8f0; background: radial-gradient(900px 500px at 0% 0%, rgba(19, 181, 154, .28), transparent 60%), radial-gradient(700px 520px at 100% 100%, rgba(47, 124, 246, .22), transparent 60%), #07172b; }
.hs-sol::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hs-sol > * { position: relative; }
.hs-logo { font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--hs-lac) !important; text-decoration: none !important; }
.hs-logo span { color: var(--hs-mint); }
.hs-logo-acik { color: #fff !important; }
.hs-sol-orta { max-width: 470px; }
.hs-etiket { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #a7f3e4; background: rgba(19, 181, 154, .12); border: 1px solid rgba(19, 181, 154, .3); border-radius: 999px; padding: 5px 12px; }
.hs-sol h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.03em; color: #fff; margin: 20px 0 12px; font-weight: 800; }
.hs-sol p { color: #94a3b8; font-size: 16px; margin: 0 0 26px; }
.hs-madde { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.hs-madde li { display: flex; gap: 14px; align-items: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(4px); }
.hs-madde i { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(19, 181, 154, .16); color: #5eead4; font-size: 17px; }
.hs-madde strong { display: block; color: #f1f5f9; font-size: 14.5px; }
.hs-madde span { color: #94a3b8; font-size: 13.5px; }
.hs-sayilar { display: flex; gap: 30px; }
.hs-sayilar strong { display: block; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.hs-sayilar span { font-size: 12.5px; color: #94a3b8; }
.hs-imza { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; color: #e2e8f0 !important; width: max-content; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); transition: .2s; }
.hs-imza:hover { border-color: rgba(19, 181, 154, .5); background: rgba(19, 181, 154, .08); }
.hs-imza > span { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #13b59a, #2f7cf6); color: #fff; font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.hs-imza strong { display: block; font-size: 13.5px; line-height: 1.2; }
.hs-imza small { color: #94a3b8; font-size: 12px; }

/* Sağ: form alanı */
.hs-sag { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 22px; background: radial-gradient(600px 300px at 50% 0%, rgba(19, 181, 154, .06), transparent 70%), #fff; }
.hs-ust { width: 100%; max-width: 440px; display: flex; justify-content: flex-end; align-items: center; margin-bottom: 4vh; }
.hs-ust .hs-logo { display: none; margin-right: auto; }
.hs-geri { font-size: 14px; font-weight: 500 !important; color: var(--hs-gri) !important; text-decoration: none !important; display: inline-flex; gap: 6px; align-items: center; }
.hs-geri:hover { color: var(--hs-yazi) !important; }
.hs-kart { width: 100%; max-width: 440px; margin: auto 0; }
.hs-rol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #f1f5f9; border: 1px solid var(--hs-cizgi); border-radius: 14px; padding: 4px; margin-bottom: 28px; }
.hs-rol a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--hs-gri) !important; text-decoration: none !important; transition: .15s; }
.hs-rol a:hover { color: var(--hs-yazi) !important; }
.hs-rol a.aktif { background: #fff; color: var(--hs-yazi) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .06); }
.hs-ekran { animation: hs-gir .25s ease; }
@keyframes hs-gir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hs h1 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; line-height: 1.2; }
.hs-alt { color: var(--hs-gri); margin: 0 0 22px; font-size: 15px; }
.hs-ikon { width: 48px; height: 48px; border-radius: 14px; background: #ecfdf8; color: var(--hs-mint2); border: 1px solid #c8f1e6; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 16px; }
.hs-google { min-height: 44px; display: flex; justify-content: center; transition: opacity .2s; }
.hs-gyedek { width: 100%; height: 44px; border: 1px solid #dadce0; border-radius: 999px; background: #fff; font: inherit; font-weight: 500; font-size: 14.5px; color: #3c4043; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.hs-gyedek:hover { background: #f8fafd; border-color: #d2e3fc; }
.hs-google.bekliyor { opacity: .5; pointer-events: none; }
.hs-ayrac { display: flex; align-items: center; gap: 12px; color: var(--hs-gri2); font-size: 12.5px; font-weight: 500; margin: 20px 0 6px; text-transform: lowercase; }
.hs-ayrac::before, .hs-ayrac::after { content: ""; flex: 1; height: 1px; background: var(--hs-cizgi); }
.hs-form { margin: 0; }
.hs-etk { display: block; font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; color: #1e293b; }
.hs-etk-sat { display: flex; justify-content: space-between; align-items: baseline; }
.hs-etk-sat a { font-size: 13px; font-weight: 500; color: var(--hs-gri) !important; text-decoration: none; }
.hs-etk-sat a:hover { color: var(--hs-mint2) !important; }
.hs-sec { font-weight: 400; color: var(--hs-gri2); }
.hs-girdi { width: 100%; height: 46px; border: 1px solid #d7dee8; background: #fff; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--hs-yazi); outline: 0; transition: border-color .15s, box-shadow .15s; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.hs-girdi::placeholder { color: #a3aebd; }
.hs-girdi:hover { border-color: #c2ccd8; }
.hs-girdi:focus { border-color: var(--hs-mint); box-shadow: 0 0 0 4px rgba(19, 181, 154, .14); }
.hs-girdi.hatali { border-color: var(--hs-kirmizi); box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); }
select.hs-girdi { appearance: none; -webkit-appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M8 11 3 6h10z'/%3E%3C/svg%3E") no-repeat right 14px center; text-overflow: ellipsis; }
.hs-kod { height: 58px; font-size: 26px; font-weight: 700; letter-spacing: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.hs-sifre { position: relative; }
.hs-sifre .hs-girdi { padding-right: 46px; }
.hs-goz { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: 0; background: transparent; border-radius: 9px; color: var(--hs-gri); cursor: pointer; font-size: 17px; }
.hs-goz:hover { background: #f1f5f9; color: var(--hs-yazi); }
.hs-guc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.hs-guc i { height: 4px; border-radius: 4px; background: #e2e8f0; transition: background .2s; }
.hs-guc[data-p="1"] i:nth-child(-n+1) { background: #f97316; }
.hs-guc[data-p="2"] i:nth-child(-n+2) { background: #eab308; }
.hs-guc[data-p="3"] i:nth-child(-n+3) { background: #22c55e; }
.hs-guc[data-p="4"] i { background: var(--hs-mint); }
.hs-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.hs-onay { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13.5px; color: #475569; cursor: pointer; }
.hs-onay input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--hs-mint); flex: 0 0 auto; }
.hs-onay a { font-weight: 500; }
.hs-hata { color: var(--hs-kirmizi); font-size: 14px; font-weight: 500; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; }
.hs-hata:empty { display: none; }
.hs-btn { width: 100%; height: 48px; margin-top: 18px; border: 0; border-radius: 12px; background: var(--hs-lac); color: #fff !important; font: inherit; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; text-decoration: none !important; box-shadow: 0 1px 2px rgba(11, 36, 64, .2), inset 0 1px 0 rgba(255, 255, 255, .08); transition: background .15s, transform .05s; }
.hs-btn:hover { background: #12365e; }
.hs-btn:active { transform: translateY(1px); }
.hs-btn i { transition: transform .15s; }
.hs-btn:hover i { transform: translateX(3px); }
.hs-btn:disabled { opacity: .7; cursor: wait; }
.hs-btn.yukleniyor i { animation: hs-don .8s linear infinite; }
@keyframes hs-don { to { transform: rotate(360deg); } }
.hs-btn-acik { background: #fff; color: var(--hs-yazi) !important; border: 1px solid #d7dee8; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.hs-btn-acik:hover { background: var(--hs-zemin); }
.hs-dip { text-align: center; color: var(--hs-gri); font-size: 14px; margin: 22px 0 0; }
.hs-bilgi { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 13px 14px; border-radius: 14px; background: var(--hs-zemin); border: 1px solid var(--hs-cizgi); font-size: 13.5px; }
.hs-bilgi > i { color: var(--hs-mint2); font-size: 17px; margin-top: 1px; }
.hs-bilgi strong { display: block; font-size: 14px; }
.hs-bilgi span { color: var(--hs-gri); }
.hs-bilgi-sari { background: #fffbeb; border-color: #fde68a; margin: 0 0 6px; }
.hs-bilgi-sari > i { color: #b45309; }
.hs-benzer { display: grid; gap: 8px; }
.hs-satir { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hs-cizgi); border-radius: 14px; text-decoration: none !important; transition: .15s; }
.hs-satir:hover { border-color: var(--hs-mint); background: #f6fefc; }
.hs-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--hs-lac), var(--hs-mint)); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hs-satir-m { flex: 1; min-width: 0; }
.hs-satir-m strong { display: block; font-size: 14.5px; color: var(--hs-yazi); }
.hs-satir-m small { color: var(--hs-gri); font-size: 13px; font-weight: 500; }
.hs-satir em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--hs-mint2); white-space: nowrap; }
.hs-satir em.gri { color: var(--hs-gri2); }
.hs-yasal { margin: 28px 0 0; font-size: 12.5px; color: var(--hs-gri2); }
.hs-yasal a { color: var(--hs-gri2) !important; font-weight: 500; text-decoration: none; }
.hs-yasal a:hover { color: var(--hs-yazi) !important; }

@media (max-width: 980px) {
  .hs-sayfa { grid-template-columns: 1fr; }
  .hs-sol { display: none; }
  .hs-ust { justify-content: space-between; margin-bottom: 26px; }
  .hs-ust .hs-logo { display: inline; }
}
@media (max-width: 480px) {
  .hs-sag { padding: 18px 18px 16px; }
  .hs h1 { font-size: 24px; }
  .hs-iki { grid-template-columns: 1fr; }
  .hs-rol a { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .hs-ekran { animation: none; } }