/* ============================================================================
   identUP Pass — Base CSS
   Reset + tipografi + temel HTML elementleri
   ============================================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--tr-base), color var(--tr-base);
}

/* ── Başlıklar ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--color-text);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
    margin: 0 0 var(--sp-3);
}

small,
.small {
    font-size: var(--fs-sm);
}

/* ── Linkler ───────────────────────────────────────────────────────────── */
a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color var(--tr-fast);
}

a:hover {
    color: var(--brand-primary-hover);
}

a:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── Code/pre ──────────────────────────────────────────────────────────── */
code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* Inline code — satır içi rozet görünümü */
code {
    padding: 2px 6px;
    background: var(--color-surface-2);
    border-radius: var(--radius-xs);
    color: var(--color-text);
}

/* Blok kod — tek parça arkaplan.
   pre içindeki code inline arkaplanını bırakır, yoksa her satır kendi
   kutusunu çizip "şeritli" görünüme sebep oluyordu. */
pre {
    display: block;
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--code-block-bg);
    color: var(--code-block-text);
    border: 1px solid var(--code-block-border);
    border-radius: var(--radius-md);
    line-height: 1.6;
    white-space: pre;
    overflow-x: auto;
    tab-size: 4;
}

pre > code,
pre code {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    white-space: inherit;
}

pre a {
    color: var(--brand-primary);
    word-break: break-all;
}

/* ── HR ────────────────────────────────────────────────────────────────── */
hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--sp-4) 0;
}

/* ── Image ─────────────────────────────────────────────────────────────── */
img,
svg {
    max-width: 100%;
    vertical-align: middle;
}

/* ── Selection ───────────────────────────────────────────────────────────
   Arkaplan MAT (opak) olmalı: yarı saydam bir seçim rengi altındaki öğenin
   rengine karışır, metin rengi de temaya göre sabit kaldığı için tema ile
   uyuşmayan bir yüzeyde (ör. sabit renkli bir kutu) yazı okunamaz hale
   geliyordu. Opak zemin + garanti kontrastlı yazı her yüzeyde okunur. */
::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
    text-shadow: none;
}

::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-text);
    text-shadow: none;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ── Focus ring (tüm tıklanabilirler) ──────────────────────────────────── */
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ── No-tap-highlight on mobile ────────────────────────────────────────── */
button,
[role="button"],
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* ── Hide for print / a11y ─────────────────────────────────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Tabler icon defaults ──────────────────────────────────────────────── */
.ti {
    font-size: 18px;
    line-height: 1;
    vertical-align: -0.125em;
}

.ti-sm { font-size: 14px; }
.ti-md { font-size: 18px; }
.ti-lg { font-size: 22px; }
.ti-xl { font-size: 28px; }