/* ==========================================================================
   COMPONENTS — Uyarı, kart, kod bloğu, rozet, buton, adımlar, arama
   ========================================================================== */

/* --------------------------------------------------------------- Butonlar */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: background var(--tr), color var(--tr);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Tema düğmesi: koyu modda güneş, açık modda ay göster */
.ico--sun  { display: none; }
.ico--moon { display: inline-block; }
[data-theme="dark"] .ico--sun  { display: inline-block; }
[data-theme="dark"] .ico--moon { display: none; }

/* Hamburger */
.burger,
.burger::before,
.burger::after {
    display: block; width: 17px; height: 2px;
    background: currentColor; border-radius: 2px;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after  { top: 5px; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    font-size: var(--fs-sm);
    font-weight: 650;
    font-family: inherit;
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background var(--tr), border-color var(--tr), transform var(--tr);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}
.btn--primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }

/* ---------------------------------------------------------------- Arama */
.site-search { position: relative; flex: 1; max-width: 460px; }
.site-search__input {
    width: 100%;
    padding: .5rem .85rem .5rem 2.1rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--tr), background var(--tr);
}
.site-search__input::placeholder { color: var(--text-faint); }
.site-search__input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--primary);
}
.site-search::before {
    content: "";
    position: absolute; left: .7rem; top: 50%;
    width: 13px; height: 13px; margin-top: -7px;
    background: currentColor; color: var(--text-faint);
    -webkit-mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.5-4.5'/></svg>");
            mask: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4.5-4.5'/></svg>");
}

.site-search__results {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0; right: 0;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .35rem;
    z-index: 70;
}
.site-search__results[hidden] { display: none; }
.search-hit {
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    color: var(--text);
}
.search-hit:hover, .search-hit.is-active { background: var(--primary-soft); text-decoration: none; }
.search-hit__title { font-weight: 650; font-size: var(--fs-sm); }
.search-hit__crumb { display: block; font-size: .7rem; color: var(--text-faint); }
.search-hit__excerpt { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.search-empty { padding: 1rem .8rem; color: var(--text-muted); font-size: var(--fs-sm); }
mark { background: var(--warning-soft); color: var(--warning); border-radius: 3px; padding: 0 .15em; }

/* ---------------------------------------------------------------- Uyarı */
.alert {
    display: flex;
    gap: .7rem;
    margin: 1.5rem 0;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left-width: 3px;
    background: var(--surface);
    font-size: var(--fs-sm);
}
.alert > *:last-child { margin-bottom: 0; }
/* flex öğesinin içeriğinden dolayı kutuyu genişletmesini engeller
   (uyarı içine konan geniş kod blokları kutudan taşmasın) */
.alert__body { min-width: 0; }
.alert__body > pre { margin: .8rem 0 0; }
.alert__icon { flex-shrink: 0; font-weight: 800; line-height: 1.5; }
.alert__body > :first-child { margin-top: 0; }
.alert__title { font-weight: 700; display: block; margin-bottom: .2rem; }

.alert--info    { border-left-color: var(--info);    background: var(--info-soft); }
.alert--info    .alert__icon { color: var(--info); }
.alert--tip     { border-left-color: var(--success); background: var(--success-soft); }
.alert--tip     .alert__icon { color: var(--success); }
.alert--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.alert--warning .alert__icon { color: var(--warning); }
.alert--danger  { border-left-color: var(--danger);  background: var(--danger-soft); }
.alert--danger  .alert__icon { color: var(--danger); }

/* ------------------------------------------------------ Kod bloğu + kopyala */
.code {
    position: relative;
    margin: 1.5rem 0;
    border: 1px solid var(--code-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--code-bg);
}
.code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem .55rem .4rem .85rem;
    background: var(--code-head);
    border-bottom: 1px solid var(--code-border);
}
.code__lang {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tok-comment);
}
.code__copy {
    font-family: inherit;
    font-size: .7rem;
    font-weight: 650;
    color: var(--code-text);
    background: color-mix(in srgb, var(--code-text) 10%, transparent);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-sm);
    padding: .22rem .55rem;
    cursor: pointer;
    transition: background var(--tr);
}
.code__copy:hover { background: color-mix(in srgb, var(--code-text) 20%, transparent); }
.code__copy.is-done { color: var(--tok-string); border-color: var(--tok-string); }

/* Kod bloğu temeli — JS OLMADAN DA okunur kalması için koyu zemin burada. */
.doc-content pre {
    margin: 1.5rem 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.65;
    color: var(--code-text);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-lg);
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}
.doc-content pre > code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    white-space: pre;
}

/* JS üst çubuğu eklediğinde zemin ve çerçeve sarmalayıcıya taşınır */
.code > pre {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ---------------------------------------------------- Sözdizimi renkleri */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--tok-comment); font-style: italic; }
.token.punctuation { color: var(--tok-punct); }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--tok-tag); }
.token.boolean, .token.number { color: var(--tok-number); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--tok-string); }
.token.operator, .token.entity, .token.url { color: var(--tok-punct); }
.token.atrule, .token.attr-value, .token.keyword { color: var(--tok-keyword); }
.token.function, .token.class-name { color: var(--tok-function); }
.token.regex, .token.important, .token.variable { color: var(--tok-var); }

/* ------------------------------------------------------------------ Rozet */
.badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .16rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-muted);
    white-space: nowrap;
}
.badge--ok      { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.badge--warn    { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.badge--primary { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }

/* ------------------------------------------------------- Kart ve ızgara */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.doc-card {
    display: block;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--tr), box-shadow var(--tr);
}
/* NOT: eskiden burada `transform: translateY(-1px)` vardı; üzerine gelince kart
   zıplıyor ve içindeki yazı kayıyordu. Geri bildirim artık çerçeve + gölge ile veriliyor. */
.doc-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.doc-card__title { font-weight: 700; display: block; margin-bottom: .25rem; }
.doc-card__text { font-size: var(--fs-sm); color: var(--text-muted); }
.doc-card__icon {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-bottom: .7rem;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 800;
    font-size: .8rem;
}

/* ------------------------------------------------------------- Adımlar */
.steps { counter-reset: step; list-style: none; margin: 1.5rem 0; padding: 0; }
.steps > li {
    position: relative;
    padding: 0 0 1.15rem 2.6rem;
    border-left: 1px solid var(--border);
    margin-left: .85rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: -.85rem; top: 0;
    width: 1.7rem; height: 1.7rem;
    display: grid; place-items: center;
    font-size: .76rem;
    font-weight: 700;
    color: var(--primary-contrast);
    background: var(--primary);
    border-radius: 999px;
}
.steps__title { font-weight: 700; display: block; }
.steps__text { font-size: var(--fs-sm); color: var(--text-muted); }

/* ------------------------------------------------------------- Dosya ağacı */
.filetree {
    margin: 1.5rem 0;
    padding: .95rem 1.1rem;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.75;
    color: var(--code-text);
    overflow-x: auto;
}
.filetree .c { color: var(--tok-comment); }
.filetree .d { color: var(--tok-keyword); }
.filetree .f { color: var(--tok-string); }

/* --------------------------------------------------------- Önceki / Sonraki */
.pager {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    max-width: var(--content-max);
    margin: 3rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.pager__link {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-width: 48%;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--tr), background var(--tr);
}
.pager__link:hover { border-color: var(--primary); background: var(--primary-softer); text-decoration: none; }
.pager__link small { font-size: .72rem; color: var(--text-faint); font-weight: 650; }
.pager__link strong { font-size: var(--fs-sm); font-weight: 650; }
.pager__link--next { margin-left: auto; text-align: right; }
.pager__spacer { flex: 1; }

/* ------------------------------------------------------------------- Kbd */
kbd {
    font-family: var(--font-mono);
    font-size: .76em;
    padding: .12em .42em;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

/* -------------------------------------------------------------- Ana sayfa */
.hero {
    max-width: 760px;
    padding: 3rem 0 2rem;
}
.hero h1 {
    font-size: 2.6rem;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin: 0 0 1rem;
    font-weight: 800;
}
.hero h1 em {
    font-style: normal;
    color: var(--primary);
}
.hero p {
    font-size: 1.08rem;
    color: var(--text-muted);
    margin: 0 0 1.8rem;
}
.hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

@media (max-width: 860px) {
    .hero h1 { font-size: 1.9rem; }
    .pager { flex-direction: column; }
    .pager__link { max-width: none; }
    .pager__link--next { margin-left: 0; text-align: left; }
}

/* ------------------------------------------------- Yukarı çık düğmesi */
/* Sağ altta sabit durur; 500px kaydırıldıktan sonra JS .is-visible ekler.
   z-index, mobil çekmece perdesinin (50) ALTINDA seçildi; böylece menü
   açıkken düğme karartmanın altında kalır. */
.to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elev);
    color: var(--text-muted);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tr), visibility var(--tr),
                color var(--tr), border-color var(--tr);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover,
.to-top:focus-visible { color: var(--primary); border-color: var(--primary); }
.to-top .ico {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 860px) {
    .to-top { right: 1rem; bottom: 1rem; }
}