/* HUKASİS logo and the sign-in / sign-up split pages (stage 204a).
   Mirrors the hukuk app (apps/web/app/globals.css "The HUKASİS logo (stage 202)" and app/(auth)/layout.tsx).
   Loaded after app.css / cam.css / site.css on every page, so it works in the "cam" and "sade" looks and in
   light and dark (:root[data-tema="koyu"]). */

/* ---------------------------------------------------------------- the logo (templates/_logo.html) */
.hk-logo { display: block; flex-shrink: 0; max-width: 100%; height: auto; }
.hk-logo mask { mask-type: alpha; }
.hk-logo .hk-ink, .hk-logo .hk-ink-soft { fill: #1b1d24; }
.hk-logo .hk-on-dark, .hk-mark .hk-on-dark { display: none; }
:is(:root[data-tema="koyu"] .hk-logo:not([data-tone="light"]), .hk-logo[data-tone="dark"]) .hk-ink { fill: #ffffff; }
:is(:root[data-tema="koyu"] .hk-logo:not([data-tone="light"]), .hk-logo[data-tone="dark"]) .hk-ink-soft { fill: #f3f1ec; }
:is(:root[data-tema="koyu"] .hk-logo:not([data-tone="light"]), .hk-logo[data-tone="dark"]) .hk-on-dark,
:root[data-tema="koyu"] .hk-mark .hk-on-dark { display: inline; }
:is(:root[data-tema="koyu"] .hk-logo:not([data-tone="light"]), .hk-logo[data-tone="dark"]) .hk-on-light,
:root[data-tema="koyu"] .hk-mark .hk-on-light { display: none; }
.hk-mark { display: inline-flex; flex-shrink: 0; }
.hk-mark img { display: block; object-fit: contain; }
.hk-sweep { transform: skewX(-18deg); animation: hk-sweep 7.5s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes hk-sweep {
  0%, 58% { transform: translateX(0) skewX(-18deg); }
  100% { transform: translateX(1900px) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) { .hk-sweep { display: none; } }
.gizli-metin { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- side menu header: the logo fills the menu's width
   with a little air on both sides; a narrow menu shows the emblem only. */
.kenar-baslik { container-type: inline-size; }
:root .kenar .kenar-baslik a.logo { display: flex; align-items: center; justify-content: center; height: auto; min-height: 64px;
  padding: 12px 12px 10px; margin: 0 -8px 8px; font-size: 0; }
:root[data-gorunum="cam"] .kenar .kenar-baslik a.logo { margin: 2px -8px 4px; padding: 14px 12px 8px; }
.kenar-baslik .hk-logo { width: 100%; height: auto; }
.kenar-baslik .hk-mark { display: none; }
@container (max-width: 150px) {
  .kenar-baslik .hk-logo { display: none; }
  .kenar-baslik .hk-mark { display: inline-flex; }
}
@media (max-width: 760px) {
  :root .kenar .kenar-baslik a.logo { justify-content: flex-start; margin: 0; padding: 12px 6px 10px 12px; }
  .kenar-baslik .hk-logo { width: auto; height: 48px; }
}

/* ---------------------------------------------------------------- public site: top bar and footer */
.site-ust .marka .hk-logo { height: 40px; width: auto; }
.site-alt .marka .hk-logo { height: 46px; width: auto; }
@media (max-width: 600px) {
  .site-ust .marka .hk-logo { height: 32px; }
}

/* ---------------------------------------------------------------- sign-in and sign-up: picture left, form right;
   on a phone the picture is a band above the form. */
body.giris-bolunmus { display: flex; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; }
.giris-gorsel { position: sticky; top: 0; width: 50%; height: 100vh; height: 100dvh; flex-shrink: 0; overflow: hidden; background: #0f172a; }
.giris-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.giris-gorsel-perde { position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, .75), rgba(30, 58, 138, .45) 50%, rgba(15, 23, 42, .7)); }
.giris-geri { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 999px; background: rgba(0, 0, 0, .32); color: #fff; font-size: 14px; font-weight: 500;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s; }
.giris-geri:hover { background: rgba(0, 0, 0, .48); text-decoration: none; }
.giris-geri:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.giris-gorsel-metin { position: absolute; left: 32px; right: 32px; bottom: 40px; color: #fff; }
.giris-gorsel-metin strong { display: block; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.giris-gorsel-metin span { display: block; max-width: 28rem; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .82); }

.giris-taraf { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 32px; background: var(--yuzey); }
:root[data-gorunum="cam"] .giris-taraf { -webkit-backdrop-filter: var(--cam-bulanik); backdrop-filter: var(--cam-bulanik); }
.giris-logo { display: block; margin-bottom: 32px; }
.giris-logo:hover { text-decoration: none; }
.giris-logo .hk-logo { height: 44px; width: auto; }

.giris-form { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 16px; }
.giris-baslik { margin-bottom: 8px; }
.giris-form h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.giris-baslik p { margin: 8px 0 0; font-size: 14px; color: var(--soluk); }
.giris-baslik p a { font-weight: 500; }
.giris-form label:not(.secim) { gap: 6px; font-size: 14px; }
:root .giris-form input:not([type="radio"]):not([type="checkbox"]) { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 15px; }
:root:not([data-gorunum="cam"]) .giris-form input:not([type="radio"]):not([type="checkbox"]) { border-radius: 10px; }
:root .giris-form button.birincil { width: 100%; min-height: 44px; font-size: 15px; font-weight: 600; margin-top: 4px; }
:root:not([data-gorunum="cam"]) .giris-form button.birincil { border-radius: 10px; }
.giris-form .ipucu { margin: -6px 0 0; }

/* password box with an eye that shows what was typed; the eye stays hidden until app.js runs */
.parola-kutu { position: relative; display: block; }
:root .giris-form .parola-kutu input:not([type="radio"]):not([type="checkbox"]) { padding-right: 48px; }
:root .giris-form button.parola-goz { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid;
  place-items: center; width: 34px; height: 34px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px;
  background: none; box-shadow: none; color: var(--soluk); cursor: pointer; }
:root .giris-form button.parola-goz[hidden] { display: none; }
:root .giris-form button.parola-goz:hover { background: var(--uzerinde); color: var(--metin); }
:root .giris-form button.parola-goz:active { transform: translateY(-50%); }
:root .giris-form button.parola-goz:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }
.parola-goz svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.parola-goz .goz-kapali, .parola-goz[aria-pressed="true"] .goz-acik { display: none; }
.parola-goz[aria-pressed="true"] .goz-kapali { display: block; }

@media (max-width: 1023px) {
  body.giris-bolunmus { flex-direction: column; }
  .giris-gorsel { position: relative; width: 100%; height: 224px; }
  .giris-gorsel-metin { display: none; }
  .giris-taraf { justify-content: flex-start; padding: 40px 16px; }
}
@media (max-width: 639px) {
  .giris-gorsel { height: 160px; }
  .giris-logo { margin-bottom: 28px; }
  .giris-form h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .giris-geri { transition: none; } }
.giris-form .dugme.birincil { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; }
.giris-form > p { margin: 0; }