/* =========================================================
3D Anatomi Atlası - ortak görünüm
Giriş sayfası (index.html) ve katalog (app/index.html) bu dosyayı kullanır.
Bütün renkler ve ölçüler :root değişkenlerinden yönetilir.
========================================================= */

:root {
color-scheme: light dark;

/* yüzeyler */
--bg: #eef3f8; /* sayfa arka planı */
--glow: #cfe6f5; /* üst kısımdaki yumuşak ışık */
--dots: #d9e4ee; /* giriş sayfası nokta deseni */
--card: #ffffff; /* kart yüzeyi */
--field: #f4f8fb; /* giriş kutusu ve bilgi kutusu zemini */
--header: rgba(255, 255, 255, .82);

/* çizgiler */
--line: #dde6ee;
--line-strong: #c3d2e0;

/* yazı */
--text: #102233;
--muted: #5b7185;

/* vurgu */
--acc: #0e6f8e;
--acc-hover: #0b5b76;
--acc-text: #ffffff;
--acc-soft: rgba(14, 111, 142, .12);
--soft: rgba(91, 113, 133, .14);

/* durum renkleri */
--err: #c23b2b;
--ok: #157f57;

/* biçim */
--radius: 18px;
--radius-sm: 12px;
--shadow: 0 1px 2px rgba(16, 34, 51, .05), 0 18px 40px -18px rgba(16, 34, 51, .28);
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: #0c151e;
--glow: #16374d;
--dots: #1a2836;
--card: #131f2b;
--field: #0f1a25;
--header: rgba(19, 31, 43, .82);

--line: #22303f;
--line-strong: #2f4356;

--text: #e7eff6;
--muted: #93a7b9;

--acc: #4fb8dc;
--acc-hover: #6ecbea;
--acc-text: #06222c;
--acc-soft: rgba(79, 184, 220, .16);
--soft: rgba(147, 167, 185, .16);

--err: #ff8f7e;
--ok: #6fd6a2;

--shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 40px -18px rgba(0, 0, 0, .75);
}
}

/* ---------- temel ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }

body {
background-color: var(--bg);
background-image: radial-gradient(1100px 560px at 50% -14%, var(--glow), transparent 68%);
background-repeat: no-repeat;
color: var(--text);
font: 16px/1.55 var(--font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

a { color: var(--acc); }
img { max-width: 100%; }

::selection { background: var(--acc-soft); }

/* ---------- logo ve marka ---------- */
.marka { display: flex; align-items: center; gap: 12px; }
.logo { width: 40px; height: 40px; display: block; flex: none; }
.marka-ad { font-weight: 650; font-size: 17px; letter-spacing: -.01em; }

/* =========================================================
GİRİŞ SAYFASI
========================================================= */
body.giris {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px 18px;
background-image:
radial-gradient(900px 480px at 50% -8%, var(--glow), transparent 70%),
radial-gradient(var(--dots) 1px, transparent 1.2px);
background-size: auto, 22px 22px;
background-repeat: no-repeat, repeat;
}

.card {
width: 100%;
max-width: 440px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 36px 32px 30px;
box-shadow: var(--shadow);
}

.card .marka { margin-bottom: 26px; }

.card h1 {
font-size: 24px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -.02em;
margin: 0 0 8px;
}

.lead {
margin: 0 0 24px;
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}

label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}

#kod {
width: 100%;
font: 600 19px/1 var(--mono);
letter-spacing: 3px;
text-align: center;
padding: 16px 10px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--field);
color: var(--text);
outline: none;
text-transform: uppercase;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#kod::placeholder { color: var(--muted); opacity: .55; letter-spacing: 2px; }

#kod:focus {
border-color: var(--acc);
background: var(--card);
box-shadow: 0 0 0 4px var(--acc-soft);
}

#btn {
margin-top: 16px;
width: 100%;
padding: 15px 16px;
font: 650 16px var(--font);
letter-spacing: .01em;
border: 0;
border-radius: var(--radius-sm);
background: var(--acc);
color: var(--acc-text);
cursor: pointer;
box-shadow: 0 10px 22px -14px var(--acc);
transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}

#btn:hover:not(:disabled) { background: var(--acc-hover); }
#btn:active:not(:disabled) { transform: translateY(1px); }
#btn:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 2px; }
#btn:disabled { opacity: .55; cursor: default; box-shadow: none; }

.msg {
min-height: 20px;
margin-top: 14px;
font-size: 14px;
line-height: 1.45;
color: var(--muted);
}
.msg.err { color: var(--err); font-weight: 600; }
.msg.ok { color: var(--ok); font-weight: 600; }

.note {
margin-top: 24px;
padding: 16px 16px 6px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--field);
font-size: 12.5px;
line-height: 1.55;
color: var(--muted);
}

.note p { position: relative; margin: 0 0 10px; padding-left: 15px; }

.note p::before {
content: "";
position: absolute;
left: 2px;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--acc);
opacity: .65;
}

/* =========================================================
KATALOG
========================================================= */
.ust {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 28px;
border-bottom: 1px solid var(--line);
background: var(--header);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}

.katalog {
max-width: 1080px;
margin: 0 auto;
padding: 40px 24px 64px;
}

.katalog h1 {
font-size: clamp(24px, 4vw, 30px);
line-height: 1.2;
font-weight: 700;
letter-spacing: -.025em;
margin: 0 0 8px;
}

.katalog .lead {
margin: 0 0 30px;
font-size: 15.5px;
}

.kartlar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 20px;
}

.kart {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text);
text-decoration: none;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

a.kart:hover,
a.kart:focus-visible {
transform: translateY(-3px);
border-color: var(--acc);
box-shadow: var(--shadow);
outline: none;
}

a.kart:focus-visible { box-shadow: 0 0 0 3px var(--acc-soft), var(--shadow); }
a.kart:active { transform: translateY(-1px); }

.kart-gorsel {
height: 132px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--line);
background-image: linear-gradient(145deg, var(--acc-soft), transparent 72%);
background-color: var(--field);
color: var(--acc);
}

.kart-gorsel svg {
width: 58px;
height: 58px;
display: block;
}

.kart-govde {
display: flex;
flex-direction: column;
flex: 1;
padding: 18px 20px 20px;
}

.kart h2 {
font-size: 17px;
font-weight: 650;
letter-spacing: -.01em;
margin: 0 0 6px;
}

.kart p {
flex: 1;
margin: 0 0 16px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.55;
}

.etiket {
align-self: flex-start;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 999px;
background: var(--acc-soft);
color: var(--acc);
}

.kart.kapali {
cursor: default;
border-style: dashed;
border-color: var(--line-strong);
}

.kart.kapali .kart-gorsel {
color: var(--muted);
background-image: none;
border-bottom-style: dashed;
border-bottom-color: var(--line-strong);
}

.kart.kapali .etiket {
background: var(--soft);
color: var(--muted);
}

.alt {
border-top: 1px solid var(--line);
padding: 22px 24px 34px;
text-align: center;
color: var(--muted);
font-size: 12.5px;
line-height: 1.5;
}

/* ---------- mobil ---------- */
@media (max-width: 600px) {
.ust { padding: 12px 16px; }
.logo { width: 34px; height: 34px; }
.marka-ad { font-size: 15.5px; }

.katalog { padding: 28px 16px 48px; }
.katalog .lead { margin-bottom: 22px; }
.kartlar { grid-template-columns: 1fr; gap: 16px; }

.card { padding: 28px 22px 24px; }
.card h1 { font-size: 21px; }

#kod { font-size: 17px; letter-spacing: 2px; padding: 15px 8px; }
#kod::placeholder { letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {

* { transition: none !important; animation: none !important; }
}