@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

[x-cloak] { display: none !important; }

/* baslik/kart baslik fontu: Poppins (drago2 --font-display) */
.markdown-content h1, .markdown-content h2 { font-family: 'Poppins', 'Inter', sans-serif; }

.markdown-content {
    color: #1f2937;
    line-height: 1.6;
}

.markdown-content h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 1rem;
    margin-top: 2rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .markdown-content h1 {
        font-size: 1.875rem;
    }
}

.markdown-content h1:first-child {
    margin-top: 0;
}

.markdown-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .markdown-content h2 {
        font-size: 1.5rem;
    }
}

.markdown-content h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .markdown-content h3 {
        font-size: 1.25rem;
    }
}

.markdown-content h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .markdown-content h4 {
        font-size: 1.125rem;
    }
}

.markdown-content p {
    margin-bottom: 1rem;
    color: #4b5563;
    line-height: 1.75;
    font-size: 0.95rem;
}

@media (min-width: 768px) {
    .markdown-content p {
        font-size: 1rem;
    }
}

.markdown-content ul {
    list-style-type: disc;
    margin-left: 1rem;
    margin-bottom: 1rem;
    color: #4b5563;
}

@media (min-width: 768px) {
    .markdown-content ul {
        margin-left: 1.5rem;
    }
}

.markdown-content ol {
    list-style-type: decimal;
    margin-left: 1rem;
    margin-bottom: 1rem;
    color: #4b5563;
}

@media (min-width: 768px) {
    .markdown-content ol {
        margin-left: 1.5rem;
    }
}

.markdown-content li {
    margin-bottom: 0.5rem;
    color: #4b5563;
    font-size: 0.95rem;
}

@media (min-width: 768px) {
    .markdown-content li {
        font-size: 1rem;
    }
}

.markdown-content a {
    color: #282e35;
    font-weight: 600;
}

.markdown-content a:hover {
    color: #0f1113;
}

.markdown-content strong {
    font-weight: bold;
    color: #1f2937;
}

.markdown-content em {
    font-style: italic;
    color: #4b5563;
}

.markdown-content code {
    background-color: #e5e7eb;
    color: #374151;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
}

@media (min-width: 768px) {
    .markdown-content code {
        padding: 0.125rem 0.5rem;
        font-size: 0.875rem;
    }
}

.markdown-content pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
}

@media (max-width: 1024px) {
    .markdown-content pre {
        padding: 1rem;
        font-size: 0.875rem;
        max-width: fit-content;
    }
}

.markdown-content pre code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    background-color: transparent;
    color: #f9fafb;
    padding: 0;
}

.markdown-content blockquote {
    border-left: 4px solid #e0ad4e;
    padding-left: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 1rem 0;
    background-color: #fefcbf;
    font-style: italic;
    color: #4b5563;
    font-size: 0.95rem;
}

@media (min-width: 768px) {
    .markdown-content blockquote {
        padding-left: 1rem;
        font-size: 1rem;
    }
}

.markdown-content table {
    display: block;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    word-break: break-word;
}

@media (min-width: 768px) {
    .markdown-content table {
        font-size: 0.875rem;
        display: table;
        white-space: normal;
    }
}

.markdown-content th {
    border: 1px solid #9ca3af;
    padding: 0.5rem;
    text-align: left;
    background-color: #f3f4f6;
    font-weight: 600;
    color: #1f2937;
}

@media (min-width: 768px) {
    .markdown-content th {
        padding: 0.75rem 1rem;
    }
}

.markdown-content td {
    border: 1px solid #9ca3af;
    padding: 0.5rem;
    text-align: left;
    color: #4b5563;
}

@media (min-width: 768px) {
    .markdown-content td {
        padding: 0.75rem 1rem;
    }
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
}

.markdown-content hr {
    border-color: #9ca3af;
    margin: 1.5rem 0;
}

.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.scrollbar-thin {
    scrollbar-width: thin;
}

.scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
}

.scrollbar-track-gray-100::-webkit-scrollbar-track {
    background-color: #f3f4f6;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

@media (max-width: 767px) {
    .markdown-content {
        font-size: 0.9rem;
    }
    
    .markdown-content h1,
    .markdown-content h2,
    .markdown-content h3,
    .markdown-content h4 {
        line-height: 1.3;
    }
    
    .markdown-content pre {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
    }
    
    .markdown-content table {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }
}

@media (max-width: 820px), (max-height: 620px) {
    body, html {
        width: 100vw;
        height: 100vh;
        min-width: 320px;
        min-height: 480px;
        overflow-x: hidden;
    }
    .max-w-\[800px\] {
        max-width: 100vw !important;
    }
    .max-h-\[600px\] {
        max-height: 100vh !important;
    }
    .markdown-content {
        font-size: 0.85rem;
    }
}

.hero-background {
    background: linear-gradient(135deg, #1a1a21 0%, #13131a 100%);
}

.guide-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 767px) {
    .hero-section {
        height: 300px !important;
    }
    
    .hero-section h1 {
        font-size: 1.75rem !important;
    }
    
    .hero-section .mu-logo {
        font-size: 2.5rem !important;
    }
    
    .hero-section .guide-text {
        font-size: 1.5rem !important;
    }
}

aside {
    min-width: 0;
}
header {
    min-width: 0;
    width: 100vw;
    overflow-x: hidden;
}

@media (width: 800px) and (height: 600px) {
    body .markdown-content, body aside {
        zoom: 0.9;
    }
}

mark {
    background-color: #fef08a;
    padding: 1px 2px;
    border-radius: 2px;
}

.search-overlay {
    z-index: 99;
    backdrop-filter: blur(2px);
}

.search-result {
    z-index: 999;
}

.search-result:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.admonition {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: #f8fafc;
}

.admonition-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    color: #111827;
}

.admonition-body :first-child {
    margin-top: 0;
}

.admonition-body :last-child {
    margin-bottom: 0;
}

.admonition-tip {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.admonition-tip .admonition-title {
    color: #166534;
}

.admonition-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.admonition-warning .admonition-title {
    color: #92400e;
}

.admonition-info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.admonition-info .admonition-title {
    color: #1e3a8a;
}

/* ==================== DARK MODE ==================== */
.dark body { background-color: #0f0f14 !important; color: #d6d7db !important; }

/* Utility-class dark overrides now live inline in index.html as Tailwind `dark:`
   variants. Only rules for runtime-rendered markdown and hand-written
   components remain below. */

/* markdown content */
.dark .markdown-content { color: #c4c6cc; }
.dark .markdown-content h1, .dark .markdown-content h2, .dark .markdown-content h3, .dark .markdown-content h4 { color: #ededf0; }
.dark .markdown-content h1 { border-bottom-color: #2a2b33; }
.dark .markdown-content h2 { border-bottom-color: #242530; }
.dark .markdown-content p, .dark .markdown-content li, .dark .markdown-content ul, .dark .markdown-content ol { color: #b9bbc0; }
.dark .markdown-content strong { color: #ededf0; }
.dark .markdown-content a { color: #9472c0; }
.dark .markdown-content code { background: #23242c; color: #e5cfbb; }
.dark .markdown-content pre { background: #14141b !important; border-color: #2a2b33 !important; }
.dark .markdown-content pre code { color: #d6d7db; }
.dark .markdown-content blockquote { background: rgba(255,255,255,0.03); color: #b9bbc0; }
.dark .markdown-content table { border-color: #2a2b33; }
.dark .markdown-content th { background: #1b1c22; color: #ededf0; border-color: #2a2b33; }
.dark .markdown-content td { border-color: #2a2b33; color: #b9bbc0; }
.dark .markdown-content hr { border-color: #2a2b33; }

/* ==================== DRAGO2 HEADER/FOOTER (ported from the main site) ==================== */
:root {
  --tl-header-bg: #13131a; --tl-page: #111218; --tl-surface: #1b1c22; --tl-surface-2: #15161b; --tl-surface-hover: #232430;
  --tl-border: #2a2b33; --tl-border-strong: #3a3b45; --tl-accent: #7a5ba6; --tl-accent-hover: #9472c0;
  --tl-text: #d6d7db; --tl-text-strong: #ededf0; --tl-text-dim: #8a8c93;
  --gold: #e0ad4e; --font-display: 'Poppins','Inter',sans-serif;
  --surface-solid: #1b1c22; --border: #2a2b33; --text: #d6d7db; --surface-hover: #232430; --row-alt: rgba(255,255,255,0.03);
  --card-shadow: rgb(0 0 0 / 38%) 0 10px 24px 0, rgb(0 0 0 / 22%) 0 2px 4px 0; --footer-bg: #0c0d10;
  --row1-h: 50px; --nav-h: 44px;
}
@keyframes keyframes-fill { 0% { transform: rotate(-360deg) scale(0); opacity: 0; } 75% { transform: rotate(25deg); } }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(53,196,106,0.5)} 70%{box-shadow:0 0 0 7px rgba(53,196,106,0)} 100%{box-shadow:0 0 0 0 rgba(53,196,106,0)} }
/* Matches the main site exactly: a scale bounce, not a vertical hop. The two
   had drifted — this file had a translateY version that read as a different
   interaction entirely. */
@keyframes tlSocialBounce { 40% { transform: scale(1.4); } 60% { transform: scale(0.8); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } }


/* lang dropdown ortak */
.lang-dd { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 7px; background: transparent; border: 0; color: var(--tl-text); padding: 6px 4px; cursor: pointer; font-size: 14px; font-family: inherit; }
.lang-btn img { width: 20px; height: 14px; object-fit: cover; }
.lang-btn:hover { color: var(--tl-accent-hover); }
.lang-caret { width: 9px; height: 9px; fill: currentColor; opacity: .6; }
.lang-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 170px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--card-shadow); list-style: none; padding: 6px; display: none; z-index: 65; border-radius: 4px; margin: 0; }
.lang-dd.open .lang-menu { display: block; }
.lang-menu li, .lang-menu li a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; color: var(--text); font-size: 14px; border-radius: 4px; }
.lang-menu li:hover, .lang-menu li a:hover { background: var(--surface-hover); }
.lang-menu li img { width: 22px; height: 15px; object-fit: cover; }
.lang-btn .lang-flag { width: 20px; height: 14px; object-fit: cover; display: block; }
.lang-btn .lang-label { font-size: 14px; }

/* theme switch (icon button) */
.theme-switch { --size: 19px; display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; font-size: var(--size); fill: var(--tl-text); width: 34px; height: 34px; background: transparent; border: 0; padding: 0; }
.theme-switch:hover { fill: var(--tl-accent-hover); }
.theme-switch .moon, .theme-switch .sun { position: absolute; animation: keyframes-fill .5s; }
.theme-switch .sun { display: none; }
html:not(.dark) .theme-switch .moon { display: none; }
html:not(.dark) .theme-switch .sun { display: inline; }

/* theme-toggle pill (header) */
.theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(0,0,0,.30); cursor: pointer; line-height: 0; }
.theme-toggle:hover { border-color: rgba(255,255,255,.32); }
.theme-toggle .tt-seg { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border-radius: 999px; color: rgba(255,255,255,.5); transition: background-color .18s, color .18s; }
.theme-toggle .tt-seg svg { width: 14px; height: 14px; display: block; fill: currentColor; }
html:not(.dark) .theme-toggle .tt-day { background: rgba(255,255,255,.92); color: #c8922b; }
.dark .theme-toggle .tt-night { background: var(--tl-accent); color: #fff; }

/* header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  /* Translucent at the top of the page so the home hero reads through it, and
     opaque once the page scrolls — otherwise the nav sits over arbitrary body
     content and the labels become unreadable. The state is toggled by a scroll
     listener in main.js, not by CSS, because there is no scroll-position
     selector. */
  background: rgba(0, 0, 0, .75);
  transition: background-color .22s ease;
}

.site-header.is-scrolled {
  background: rgba(18, 19, 25, .97);
}
.hdr-row1 { border-bottom: 1px solid rgba(255,255,255,0.08); }
.hdr-row1-inner { width: 100%; padding: 0 24px; height: var(--row1-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hdr-left { display: flex; align-items: center; gap: 25px; }
.brand { display: flex; align-items: center; flex-shrink: 0; margin-left: -4px; }
.brand .brand-logo { height: 34px; width: auto; display: block; }
.brand .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.hdr-tools { display: flex; align-items: center; gap: 14px; }
.hdr-link { display: inline-flex; align-items: center; height: var(--row1-h); padding: 0 12px; color: var(--tl-text); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s; }
.hdr-link:hover { color: var(--tl-accent-hover); background: rgba(255,255,255,0.06); }
.hdr-tools .lang-btn { height: var(--row1-h); padding: 0 12px; gap: 8px; }
.hdr-tools .lang-btn:hover, .hdr-tools .lang-dd.open .lang-btn { color: var(--tl-accent-hover); background: rgba(255,255,255,0.06); }
.hdr-search { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 0; color: var(--tl-text); cursor: pointer; transition: color .15s; }
.hdr-search:hover, .hdr-search.active { color: var(--tl-accent-hover); }
.hdr-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.hdr-search-input { background: transparent; border: 0; outline: none; color: #fff; font-size: 14px; width: 180px; }
.hdr-search-input::placeholder { color: #8a8c93; }

/* nav-toggle (hamburger) */
.nav-toggle { display: block; position: relative; cursor: pointer; width: 23px; height: 13px; flex-shrink: 0; margin-left: 6px; }
.nav-toggle input { -webkit-appearance: none; appearance: none; display: none; visibility: hidden; }
.nav-toggle span { position: absolute; left: 0; width: 21px; height: 3px; background: #f1faee; border-radius: 100px; display: inline-block; transition: .3s ease; }
.nav-toggle span.top { top: -2px; } .nav-toggle span.middle { top: 4.9px; } .nav-toggle span.bottom { bottom: -0.9px; }
.nav-toggle input:checked ~ span.top { transform: rotate(45deg); transform-origin: top left; width: 23px; left: 3px; }
.nav-toggle input:checked ~ span.bottom { transform: rotate(-45deg); transform-origin: top left; width: 23px; bottom: -4px; box-shadow: 0 0 6px #495057; }
.nav-toggle input:checked ~ span.middle { transform: translateX(-10px); opacity: 0; }

/* nav satiri */
.header-nav { position: relative; border-bottom: 1px solid var(--tl-accent); background: rgba(255,255,255,0.015); }
.header-nav-inner { width: 100%; padding: 0 24px; height: var(--nav-h); display: flex; align-items: stretch; gap: 26px; }
.main-nav { display: flex; align-items: stretch; margin-left: -23px; }
.main-nav > a, .main-nav .mn-link { position: relative; display: flex; align-items: center; padding: 0 15px; color: #fff; font-size: 14px; font-weight: 500; transition: color .15s, background .15s; text-decoration: none; }
.main-nav > a:hover, .main-nav > a.active, .main-nav .mn-item:hover .mn-link, .main-nav .mn-item.active .mn-link { background: rgba(255,255,255,0.06); color: var(--tl-accent-hover); box-shadow: inset 0 -2px 0 0 var(--tl-accent); }
.main-nav .mn-item { position: relative; display: flex; align-items: stretch; }
.main-nav .mn-link { gap: 5px; cursor: pointer; }
.main-nav .mn-link .mn-caret { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.main-nav .mn-sub { position: absolute; top: 100%; left: 0; min-width: 130px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--card-shadow); list-style: none; margin: 0; padding: 5px 0; display: none; z-index: 40; }
.main-nav .mn-item:hover .mn-sub { display: block; }
.main-nav .mn-sub li a { display: block; padding: 8px 18px; color: var(--text); white-space: nowrap; font-size: 14px; text-decoration: none; }
.main-nav .mn-sub li a:hover { background: var(--surface-hover); color: var(--tl-accent-hover); }
.btn-download-img { display: inline-flex; align-items: center; margin-left: auto; margin-right: -24px; transition: filter .15s, transform .05s; }
.btn-download-img img { height: 44px; width: auto; display: block; }
.btn-download-img:hover { filter: brightness(1.08); }

/* layout offset */
aside.g-offset { top: calc(var(--row1-h) + var(--nav-h) + 2px) !important; }
main.g-offset { padding-top: calc(var(--row1-h) + var(--nav-h) + 2px) !important; }

/* footer (tlFooter birebir) */
.site-footer { position: relative; z-index: 3; background: var(--footer-bg); padding: 34px 20px 26px; color: var(--tl-text); }
.tlFooter { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 10px 0; max-width: 1000px; margin: 0 auto; }
.tlFooter__social { display: flex; gap: 10px; }
.tlFooter__social a { align-items: center; border-radius: 50%; color: var(--tl-text-dim); display: inline-flex; height: 44px; justify-content: center; width: 44px; text-decoration: none; transition: color .25s, background-color .25s; }
.tlFooter__social a svg { width: 22px; height: 22px; fill: currentColor; }
.tlFooter__social a.tl-yt:hover { background: red; color: #fff; animation: tlSocialBounce .4s linear; }
.tlFooter__social a.tl-dc:hover { background: #5865f2; color: #fff; animation: tlSocialBounce .4s linear; }
.tlFooter__social a.tl-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff; animation: tlSocialBounce .4s linear; }
.tlFooter__divider { border: 0; border-top: 1px solid var(--tl-border); margin: 0; max-width: 860px; width: 100%; }
.tlFooter__links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; max-width: 860px; }
.tlFooter__links a { color: var(--tl-text); font-size: 14px; text-decoration: none; }
.tlFooter__links a:hover { color: var(--tl-accent-hover); text-decoration: underline; }
.tlFooter__info { color: var(--tl-text-dim); font-size: 13px; line-height: 1.7; max-width: 760px; }
.tlFooter__info b { color: #cbc8d4; font-weight: 700; }
.tlFooter__dev img { height: 26px; width: auto; opacity: .85; }
.tlFooter__dev a:hover img { opacity: 1; }
.tlFooter__dev .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 4px; color: var(--gold); }
.tlLangSelect { display: inline-block; position: relative; }
.tlLangSelect__toggle { align-items: center; background: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: 4px; color: var(--tl-text); cursor: pointer; display: inline-flex; font: inherit; gap: 10px; justify-content: space-between; min-width: 150px; padding: 8px 12px; }
.tlLangSelect__toggle:hover { border-color: var(--tl-accent); }
.tlLangSelect__name { display: inline-flex; align-items: center; gap: 8px; }
.tlLangSelect__name img { width: 20px; height: 14px; object-fit: cover; display: block; }
.tlLangSelect__caret { color: var(--tl-text-dim); display: inline-flex; }
.tlLangSelect__caret svg { width: 11px; height: 11px; fill: currentColor; }
.tlLangSelect__menu { background: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: 6px; bottom: 100%; box-shadow: var(--card-shadow); display: none; left: 50%; list-style: none; margin: 0 0 6px; min-width: 100%; padding: 6px; position: absolute; transform: translateX(-50%); z-index: 500; }
.tlLangSelect.open .tlLangSelect__menu { display: block; }
.tlLangSelect__menu li a { align-items: center; border-radius: 4px; color: var(--tl-text); cursor: pointer; display: flex; gap: 7px; padding: 7px 12px; white-space: nowrap; text-decoration: none; }
.tlLangSelect__menu li a img { width: 20px; height: 14px; object-fit: cover; }
.tlLangSelect__menu li a:hover { background: var(--tl-surface-hover); color: var(--tl-text-strong); }

@media (max-width: 900px) {
  .header-nav { display: none; }
  .hdr-tools .hdr-link { display: none; }
  .site-header { top: 0 !important; }
  aside.g-offset { top: 48px !important; }
  main.g-offset { padding-top: 48px !important; }
  /* The sidebar used to shrink its contents with `transform: scale(0.8)` when
     collapsed and `zoom: 0.8` when open. Two different scaling mechanisms:
     `transform` is purely visual and leaves layout untouched, while `zoom`
     changes layout and forces a reflow. Swapping between them mid-transition is
     what produced the jump — the browser recomputed the whole subtree at a
     different size, and `transform-origin: top center` slid the icons sideways
     on the way.

     Nothing is scaled now. Sizes below are the intended 80% values written out
     directly, so opening and closing only animates width. */
  .gv-side nav { font-size: 13px; }
}

/* symbol above the footer */

/* ==================== SHARP CORNERS (drago2 house style) ==================== */
[class*="rounded"] { border-radius: 0 !important; }
.mn-sub,
.markdown-content code, .markdown-content pre, .hdr-search-input,
.reg-form input, .reg-form textarea, .reg-form select { border-radius: 0 !important; }

/* Language pickers keep rounded corners by project direction, so they are
   excluded from the sharp-corner reset above. The `!important` is needed to
   beat `[class*="rounded"]` on the same elements. */
.lang-menu,
.lang-menu li,
.lang-menu li a,
.tlLangSelect__toggle,
.tlLangSelect__menu,
.tlLangSelect__menu li a { border-radius: 4px !important; }

/* ==================== SIDEBAR (purple/gold treatment) ==================== */
.gv-side { background: rgb(12,12,12) !important; border-right: 1px solid rgb(28,28,28) !important; }
.gv-side .bg-slate-200 { background: transparent !important; }
.gv-side .border-t { border-color: rgb(30,30,30) !important; }
.gv-tab { position: relative; overflow: hidden; background: rgb(20,20,20) !important; border: 1px solid rgb(35,35,35) !important; color: rgb(170,170,170) !important; margin-bottom: 5px; transition: transform .15s ease, border-color .25s, background .25s, color .25s; will-change: transform; }
.gv-tab:hover { color: #fff !important; border-color: rgb(110,110,110) !important; background: rgb(22,22,22) !important; transform: translateX(2px); }
.gv-tab:active { transform: translateX(1px) scale(.99); }
.gv-tab.bg-mu-purple-light { background: rgb(26,26,26) !important; border-color: var(--tl-accent) !important; box-shadow: inset 3px 0 0 0 var(--tl-accent); }
.gv-tab::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.04), transparent 55%); pointer-events: none; z-index: 1; }
.gv-tab::after { content: ""; position: absolute; inset: -70%; background: conic-gradient(from 180deg, rgba(122,91,166,0), rgba(122,91,166,.28), rgba(224,173,78,.22), rgba(148,114,192,.22), rgba(255,255,255,.10), rgba(122,91,166,0)); filter: blur(16px); opacity: 0; transform: translateX(-70%) rotate(20deg); pointer-events: none; z-index: 0; }
.gv-tab:hover::after { opacity: 1; animation: gv-sweep 3.2s ease-in-out infinite; }
@keyframes gv-sweep { 0% { transform: translateX(-70%) rotate(20deg); } 50% { transform: translateX(0) rotate(20deg); } 100% { transform: translateX(70%) rotate(20deg); } }
.gv-debris { position: absolute; width: 3px; height: 3px; background: rgba(220,220,220,.22); top: 50%; left: -20px; opacity: 0; filter: blur(.3px); pointer-events: none; z-index: 1; animation: gv-drift 6s linear infinite; }
.gv-debris:nth-of-type(1) { top: 25%; animation-duration: 5s; }
.gv-debris:nth-of-type(2) { top: 60%; animation-duration: 7s; opacity: .18; }
.gv-debris:nth-of-type(3) { top: 80%; animation-duration: 6.5s; opacity: .12; }
@keyframes gv-drift { 0% { transform: translateX(-20px); opacity: 0; } 10% { opacity: .25; } 50% { opacity: .2; } 90% { opacity: .25; } 100% { transform: translateX(240px); opacity: 0; } }
.gv-tab:hover .gv-debris { animation-play-state: paused; opacity: 0; }
.gv-tab > div, .gv-tab > svg { position: relative; z-index: 2; }
.gv-side .text-mu-text-light, .gv-side .text-mu-text { color: rgb(170,170,170) !important; }
.gv-tab:hover .text-mu-text-light, .gv-tab:hover .text-mu-text { color: #fff !important; }
.gv-tab.bg-mu-purple-light span, .gv-tab.bg-mu-purple-light svg { color: #fff !important; }
.gv-side ul ul a { color: rgb(150,150,150) !important; }
.gv-side ul ul a:hover { color: #fff !important; background: rgb(24,24,24) !important; }
.gv-side ul ul a.bg-mu-purple-light { background: rgb(26,26,26) !important; color: #fff !important; box-shadow: inset 3px 0 0 0 var(--tl-accent); }
.gv-side .mt-8 button { position: relative; overflow: hidden; }
.gv-side .mt-8 button:hover { background: rgb(22,22,22) !important; }

/* ==================== SIDEBAR INCE AYAR (kullanici istekleri) ==================== */
/* 1) tab'lar tam genislik: yan padding yok, yan kenar yok, arka plan doldursun */
.gv-side nav > div { padding-left: 0 !important; padding-right: 0 !important; }
.gv-tab { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid rgb(28,28,28) !important; margin-bottom: 0 !important; }
.gv-tab.bg-mu-purple-light { border-bottom-color: rgb(28,28,28) !important; }

/* 2) hover degisen efekti kaldir; default'ta hafif parlama */
.gv-tab:hover { transform: none !important; background: rgb(20,20,20) !important; border-bottom-color: rgb(28,28,28) !important; color: rgb(170,170,170) !important; }
.gv-tab.bg-mu-purple-light, .gv-tab.bg-mu-purple-light:hover { background: rgb(26,26,26) !important; }
.gv-tab:hover .text-mu-text-light, .gv-tab:hover .text-mu-text { color: rgb(170,170,170) !important; }
/* Hover: → #e0ad4e (gold). Was forcing grey, which cancelled the themed
   filter defined in index.html's <head>. */
.gv-side .group:hover .icon-filter-hover-blue { filter: brightness(0) saturate(100%) invert(74%) sepia(38%) saturate(668%) hue-rotate(347deg) brightness(94%) contrast(89%) !important; }
/* sweep -> statik yumusak parlama */
.gv-tab::after { animation: none !important; opacity: 1 !important; inset: 0 !important; filter: none !important; background: radial-gradient(130% 100% at 0% 50%, rgba(148,114,192,.12), rgba(224,173,78,.05) 42%, transparent 76%) !important; }
.gv-tab:hover::after { animation: none !important; opacity: 1 !important; }
.gv-tab:hover .gv-debris { animation-play-state: running !important; }

/* Hovering the list dims the rows you are not pointing at (open sidebar only) */
.gv-side.w-60 ul.space-y-0:hover > li { filter: blur(2.5px); opacity: .38; transition: filter .2s ease, opacity .2s ease; }
.gv-side.w-60 ul.space-y-0:hover > li:hover { filter: none; opacity: 1; }


/* alt hizli-nav (Anasayfaya Git vb.) tam genislik tab */
.gv-side ul.space-y-2 { padding-left: 0 !important; padding-right: 0 !important; }
.gv-side ul.space-y-2 > li + li { margin-top: 0 !important; }
.gv-side ul.space-y-2 button { display: block; width: 100%; text-align: left !important; padding: 12px 24px !important; background: rgb(20,20,20) !important; border: 0 !important; border-bottom: 1px solid rgb(28,28,28) !important; color: rgb(170,170,170) !important; }
.gv-side ul.space-y-2 button:hover { background: rgb(20,20,20) !important; color: rgb(200,200,200) !important; border-bottom-color: rgb(28,28,28) !important; }

/* ==================== SIDEBAR: tema-duyarli + header uyumlu + kapali mor ==================== */
/* 1) nav py-4 kaldir */
.gv-side .py-4 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* renk degiskenleri (tema ile degisir) */
.gv-side { --gs-bg: #13131a; --gs-tab: #101017; --gs-tab-active: #271b39; --gs-border: #262030; --gs-text: #b9bbc0; --gs-text-dim: #8f8b98; }
html:not(.dark) .gv-side { --gs-bg: #ebe8f2; --gs-tab: #f4f2f9; --gs-tab-active: #e7e0f4; --gs-border: #e0dbec; --gs-text: #3b3646; --gs-text-dim: #6c6878; }

/* 2+3) uygula */
.gv-side { background: var(--gs-bg) !important; border-right: 1px solid var(--gs-border) !important; }
.gv-tab { background: var(--gs-tab) !important; border-bottom: 1px solid var(--gs-border) !important; color: var(--gs-text-dim) !important; }
.gv-tab.bg-mu-purple-light { background: var(--gs-tab-active) !important; border-bottom-color: var(--gs-border) !important; }
.gv-tab:hover { background: var(--gs-tab) !important; color: var(--gs-text-dim) !important; border-bottom-color: var(--gs-border) !important; }
.gv-tab.bg-mu-purple-light:hover { background: var(--gs-tab-active) !important; }
.gv-side .text-mu-text-light, .gv-side .text-mu-text { color: var(--gs-text-dim) !important; }
.gv-tab:hover .text-mu-text-light, .gv-tab:hover .text-mu-text { color: var(--gs-text-dim) !important; }
.gv-tab.bg-mu-purple-light span, .gv-tab.bg-mu-purple-light svg { color: var(--tl-accent-hover) !important; }
.gv-side ul ul a { color: var(--gs-text-dim) !important; }
.gv-side ul ul a:hover { color: var(--gs-text) !important; background: var(--gs-tab-active) !important; }
.gv-side ul ul a.bg-mu-purple-light { background: var(--gs-tab-active) !important; color: var(--tl-accent-hover) !important; box-shadow: inset 3px 0 0 0 var(--tl-accent); }
.gv-side ul.space-y-2 button { background: var(--gs-tab) !important; border-bottom: 1px solid var(--gs-border) !important; color: var(--gs-text-dim) !important; }
.gv-side ul.space-y-2 button:hover { background: var(--gs-tab) !important; color: var(--gs-text) !important; border-bottom-color: var(--gs-border) !important; }
.gv-side .border-t { border-color: var(--gs-border) !important; }
/* glow'u tema ile hafif ayarla */
.gv-tab::after { background: radial-gradient(130% 100% at 0% 50%, rgba(148,114,192,.14), rgba(224,173,78,.05) 42%, transparent 76%) !important; }
html:not(.dark) .gv-tab::after { background: radial-gradient(130% 100% at 0% 50%, rgba(122,91,166,.10), rgba(224,173,78,.06) 42%, transparent 76%) !important; }

/* 4) kapali sidebar ikon float animasyonunu komple kaldir */
.gv-side .animate-float { animation: none !important; }
/* sadece ilk kategori ikonu (kapali sidebar) dikkat cekici kucuk hareket */
@keyframes gv-attn { 0%, 55%, 100% { transform: translateY(0) scale(1); } 65% { transform: translateY(-6px) scale(1.12); } 75% { transform: translateY(0) scale(1); } 85% { transform: translateY(-3px) scale(1.06); } 95% { transform: translateY(0) scale(1); } }
.gv-side ul.space-y-0 > li:first-child .gv-tab img.animate-float,
.gv-side ul.space-y-0 > li:first-child img { animation: gv-attn 2.2s ease-in-out infinite !important; }

/* dark: aktif kategori baslik + ikon + caret BEYAZ (mor yerine) */
.dark .gv-tab.bg-mu-purple-light span, .dark .gv-tab.bg-mu-purple-light svg { color: #fff !important; }
/* Active category: → #9472c0 (accent purple), matching the row's own
   highlight. Was flat white, which read as a third colour with no meaning. */
.dark .gv-tab.bg-mu-purple-light img.icon-filter-active-blue,
.dark .gv-tab.bg-mu-purple-light .icon-filter-active-blue { filter: brightness(0) saturate(100%) invert(52%) sepia(19%) saturate(1132%) hue-rotate(224deg) brightness(94%) contrast(88%) !important; }
.dark .gv-side ul ul a.bg-mu-purple-light { color: #fff !important; }

/* Sistemler sonrasi bosluk kaldir (alt hizli-nav bolumu) */
.gv-side .mt-8 { margin-top: 0 !important; padding-top: 0 !important; border-top: 1px solid var(--gs-border) !important; }

/* kategori yazilarina harf araligi */
.gv-side .gv-tab span:not(.gv-debris), .gv-side ul ul a, .gv-side ul.space-y-2 button { letter-spacing: .4px; }

/* ===== Header dropdown kirpma/kayma duzeltmesi =====
   Orijinal guide'in `header{overflow-x:hidden}` kurali overflow-y'yi de auto
   yapip Website & dil dropdown'larini kirpiyor + acilinca dikey scrollbar
   ekleyip header'i birkac px sola kaydiriyordu. site-header'da overflow acilir. */
.site-header { overflow: visible !important; }
.site-header .header-nav,
.site-header .header-nav-inner,
.site-header .hdr-row1 { overflow: visible !important; }

/* Footer tam genislik: sidebar ml offset'i footer'a uygulanmiyor.
   Sabit sidebar (z-40) sayfa sonunda footer'i ortmesin diye footer ustte. */
.site-footer { z-index: 45 !important; }

/* ==================== TEMA UYUMLU SCROLLBAR (dark + light) ==================== */
/* Sade, temaya gore notr ton — mor yok, arka planla harmanlanir */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: #d3cfdc transparent; }
html.dark { scrollbar-color: #302b39 transparent; }
.gv-side, .gv-side nav, main.g-offset { scrollbar-width: thin; scrollbar-color: #d3cfdc transparent; }
html.dark .gv-side, html.dark .gv-side nav, html.dark main.g-offset { scrollbar-color: #302b39 transparent; }

/* WebKit / Blink — LIGHT (varsayilan) */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d3cfdc; border: 2px solid transparent; background-clip: padding-box; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #c2bccf; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* WebKit / Blink — DARK */
html.dark ::-webkit-scrollbar-thumb { background: #302b39; border: 2px solid transparent; background-clip: padding-box; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #423b4d; background-clip: padding-box; }

/* ==================== SIDEBAR SCROLLBAR — notr (beyazin tonu), mor YOK, ince ==================== */
.gv-side::-webkit-scrollbar, .gv-side nav::-webkit-scrollbar { width: 6px; height: 6px; }
.gv-side::-webkit-scrollbar-track, .gv-side nav::-webkit-scrollbar-track { background: transparent; }
/* light: koyu-notr yari saydam */
.gv-side::-webkit-scrollbar-thumb, .gv-side nav::-webkit-scrollbar-thumb { background: rgba(28,26,32,0.18); border: 0; background-clip: border-box; border-radius: 0; }
.gv-side::-webkit-scrollbar-thumb:hover, .gv-side nav::-webkit-scrollbar-thumb:hover { background: rgba(28,26,32,0.30); }
/* dark: beyazin farkli tonu (notr, hueless) */
html.dark .gv-side::-webkit-scrollbar-thumb, html.dark .gv-side nav::-webkit-scrollbar-thumb { background: rgba(238,238,240,0.16); border: 0; background-clip: border-box; }
html.dark .gv-side::-webkit-scrollbar-thumb:hover, html.dark .gv-side nav::-webkit-scrollbar-thumb:hover { background: rgba(238,238,240,0.28); }
/* Firefox */
html.dark .gv-side, html.dark .gv-side nav { scrollbar-width: thin; scrollbar-color: rgba(238,238,240,0.20) transparent; }
html:not(.dark) .gv-side, html:not(.dark) .gv-side nav { scrollbar-width: thin; scrollbar-color: rgba(28,26,32,0.20) transparent; }

/* Search results panel, anchored to the header rather than a hardcoded offset
   that drifts whenever a header row changes height. */
#search-results-panel { top: calc(var(--row1-h) + var(--nav-h) + 8px) !important; }

/* ==================== SIDEBAR TRANSITION & ALIGNMENT ==================== */

/* Only width and transform animate. `transition-all` was also animating
   padding, font-size and border-width, all of which change discontinuously when
   the width class swaps — that is what made the panel appear to slide, settle,
   and then jump into place. */
.gv-side {
  transition: width .26s cubic-bezier(.4, 0, .2, 1),
              transform .26s cubic-bezier(.4, 0, .2, 1);
}

/* Content is laid out at the open width and clipped by the rail, so labels are
   simply uncovered as the panel widens rather than being re-wrapped on every
   frame. `overflow-x: hidden` on the panel is what does the clipping — without
   it the off-panel labels would spill over the page while collapsed. */
.gv-side {
  overflow-x: hidden;
}
.gv-side nav > ul,
.gv-side nav > div {
  width: 240px; /* == w-60, the open width */
}

/* Icon size is fixed in both states. Alpine swaps the tab's utility classes on
   toggle (`py-1.5` ↔ `px-4 md:px-6 py-3`), and the tab carries Tailwind's
   `transition-all duration-200`, so padding and any inherited sizing were
   animating too — icons visibly resized and drifted mid-transition. Pinning the
   icon box takes it out of that entirely. */
.gv-side .gv-tab svg,
.gv-side .gv-tab img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0;
}

/* The tab itself only animates colour. Padding is set here for both states, so
   the class swap has nothing left to animate. */
.gv-side .gv-tab {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  justify-content: flex-start !important;
}

/* Tighter left inset. The icons previously sat well away from the edge because
   the collapsed rail centred them; now they align with the labels below. */
.gv-side .gv-tab {
  padding-left: 14px !important;
  padding-right: 12px !important;
}
.gv-side .gv-tab > svg,
.gv-side .gv-tab img {
  flex-shrink: 0;
}

/* Sub-lists sit flush under their category. The `mt-2` utility on the list was
   leaving an 8px gap that only became obvious on hover, where the row highlight
   stops and the background shows through between the two. */
.gv-side ul ul {
  margin-top: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* `space-y-1` puts a 4px margin between every sibling, including the first —
   leaving a visible seam under the category header. Rows sit flush and are
   separated by their own bottom border instead. */
.gv-side ul ul > li + li,
.gv-side ul ul > li {
  margin-top: 0 !important;
}
.gv-side ul ul a {
  border-bottom: 1px solid var(--gs-border, rgb(28, 28, 28)) !important;
}
.gv-side ul ul > li:last-child a {
  border-bottom: 0 !important;
}

/* Sub-items indent from the panel edge, not from the list's own inset — the
   list itself starts 24px in, so the old 40px padding stacked on top of that
   and pushed the labels well right of the category titles above them. */
.gv-side ul ul li {
  margin-left: -24px !important;
  padding-left: 0 !important;
}
.gv-side ul ul a {
  padding-left: 39px !important;
  padding-right: 12px !important;
  /* Lighter and a step smaller than the category rows above, so the hierarchy
     reads from the type itself and not only from the indent. */
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* Category titles: lighter than Tailwind's `font-medium` (500), so they sit
   closer to the body weight while the size difference still carries the
   hierarchy. */
.gv-side .gv-tab .truncate,
.gv-side .gv-tab span:not(.gv-debris) {
  font-weight: 400 !important;
}

/* The three icon buttons at the foot of the sidebar (home, update notes,
   community rules)
   are laid out at the open width like every other row, but unlike the category
   rows they centre their icon — which put it at 120px, well outside the 64px
   rail, so they appeared to be missing entirely while collapsed.

   Width must equal the rail exactly (64px, Tailwind `w-16`): the button centres
   its own icon, so anything narrower centres it against the wrong box and the
   icon lands left of the category icons above. */
.gv-side.w-16 .mt-8 ul.space-y-1,
.gv-side.w-16 .mt-8 ul.space-y-1 > li,
.gv-side.w-16 .mt-8 ul.space-y-1 button {
  width: 64px !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The actual glare: a radial gradient anchored to each tab's left edge
   (`at 0% 50%`), which on the 64px rail fills most of the box and reads as a
   light leak from the lower left. It exists to give the open panel's wide rows
   some depth, so it is only suppressed while collapsed. */
.gv-side.w-16 .gv-tab::after {
  background: none !important;
}
.gv-side.w-16 .gv-tab::before {
  background: none !important;
}

/* Collapsed rail: the row is still laid out at the open width (240px) and
   clipped to 64px, so centring is done with padding — `justify-content: center`
   would centre against 240px and push the icon out of sight.

   The icon sits inside a wrapper that Alpine sizes to `w-12` (48px) while
   collapsed, and the icon is already centred within it. So the wrapper is what
   needs centring in the 64px rail: (64 - 48) / 2 = 8px. */
.gv-side.w-16 .gv-tab {
  padding-left: 8px !important;
  padding-right: 0 !important;
  justify-content: flex-start !important;
}


/* ==================== HOME HERO ==================== */

/* Full-bleed artwork that runs up behind the translucent header. Home view
   only, and only on wide layouts — on narrow screens the header is opaque, so
   there is nothing for the artwork to show through. */
.home-hero {
  position: relative;
  /* Spans the full viewport width, including the strip behind the sidebar
     rail: the header is translucent all the way across, so stopping the artwork
     at the rail left that corner showing the page background instead — which is
     what read as the header and sidebar overlapping.

     The sidebar itself starts below the header, so it covers this extension
     from 96px down; only the part behind the header is ever visible. */
  /* Absolute against <body>, not the flow: `main` shifts from 64px to 240px
     when the sidebar expands, and a margin-based break-out moved with it,
     leaving a strip on the left showing the page background through the
     translucent header.
     `absolute` (not `fixed`) so the artwork still scrolls away with the page —
     `body` is the containing block because nothing between here and it is
     positioned. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  height: 404px;
  /* Behind the header (z-index 55) but above the page background. */
  z-index: 1;
  overflow: hidden;
  background-color: #140d16;
}

/* Text sits at the bottom of the artwork, clear of the header above it, and
   its left edge lines up with the "Kategoriler" heading below.

   The hero spans the full content area while the content column is centred and
   capped, so the inset is derived rather than hardcoded: half the leftover
   width, which is exactly where the column starts. */
.home-hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--row1-h) + var(--nav-h));
  padding-bottom: 30px;
  padding-left: calc(64px + ((100vw - 64px - 1024px) / 2));
  padding-right: calc((100vw - 64px - 1024px) / 2);
}

/* Below 1024px + rail there is no leftover width to split, so fall back to a
   fixed gutter matching `main`'s padding. */
@media (max-width: 1152px) {
  .home-hero__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Shadow rather than a scrim: keeps the artwork at full clarity while giving
   the type enough separation to read over the armour and fire behind it. */
.home-hero__inner h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .9);
}
.home-hero__inner p {
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .95);
}

@media (max-width: 900px) {
  /* Narrow layout keeps the card hero and an opaque header. */
  .home-hero { display: none; }
  .site-header { background: var(--tl-header-bg); }
}


/* ==================== SIDEBAR: STARTS BELOW THE HEADER ==================== */

/* Tailwind's `top-16` on the element resolves to 64px, which is less than the
   header's 94px — the sidebar was sliding under it. Anchoring to the same
   variables the header is built from keeps the two flush at any header height,
   and `height` is derived rather than using `bottom: 0` so the panel cannot
   extend past the viewport when the header grows. */
aside.gv-side {
  /* +2px for the two 1px borders the header rows carry: `--row1-h` and
     `--nav-h` describe content height only, so the sum came out 2px short of
     the header's real 96px and the sidebar started underneath it. */
  top: calc(var(--row1-h) + var(--nav-h) + 2px) !important;
  height: calc(100vh - var(--row1-h) - var(--nav-h) - 2px) !important;
  bottom: auto !important;
}

/* Left-edge shadow for the page as a whole, not the sidebar — an overlay
   pinned to the viewport's left edge rather than a `box-shadow` on any element,
   so it sits above both the sidebar and the header without either casting onto
   the other. `pointer-events: none` keeps it out of the way of clicks. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  z-index: 100;
  pointer-events: none;
  box-shadow: rgb(0 0 0 / 50%) 0 12px 28px 0, rgb(0 0 0 / 32%) 0 2px 4px 0;
}

@media (max-width: 900px) {
  /* Compact layout: the header collapses to a single 50px row. */
  aside.gv-side {
    top: var(--row1-h) !important;
    height: calc(100vh - var(--row1-h)) !important;
  }
}


/* The hero is absolutely positioned, so it occupies no space in the flow. This
   spacer restores it: the artwork's height, less the header offset `main`
   already applies, plus a 10px gap so the content does not butt against the
   artwork's bottom edge. */
.home-hero + .w-full,
.home-hero + div {
  margin-top: calc(404px - var(--row1-h) - var(--nav-h) - 2px - 32px + 15px);
}

@media (max-width: 900px) {
  /* Hero is hidden in the compact layout, so no spacer is needed. */
  .home-hero + .w-full,
  .home-hero + div { margin-top: 0; }
}

/* ==================== HOME CATEGORY CARDS ==================== */

/* Replaces a long utility chain that produced a gold top-glow strip, an amber
   hover border and a warm shadow — none of which matched the purple/gold theme.
   Written by hand rather than as Tailwind classes because the utility CSS is
   frozen (see README). */
.gv-card {
  position: relative;
  background: var(--tl-surface);
  border: 1px solid rgba(42, 43, 50, .5);
  /* Reserved at rest so the card does not shift 2px when the gold rule appears
     on hover — a transparent border occupies the same space as a coloured one. */
  border-bottom: 2px solid transparent;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .45);
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}

.gv-card:hover {
  border-color: #7a5ba6;
  border-bottom-color: var(--gold);
  /* Black rather than the previous amber tint: the glow read as a separate
     light source competing with the gold edge. */
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
  transform: translateY(-2px);
}

html:not(.dark) .gv-card {
  background: #fff;
  border-color: var(--tl-border);
  box-shadow: 0 4px 18px -6px rgba(0, 0, 0, .12);
}
html:not(.dark) .gv-card:hover {
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .1);
}

/* Icon sits directly on the card — the tinted tile behind it was extra chrome
   the theme does not need. Recoloured from amber to the theme's gold, and it
   shifts to the accent purple on hover to tie in with the border. */
.gv-card__icon {
  flex-shrink: 0;
  transition: transform .3s ease;
}
.gv-card:hover .gv-card__icon {
  transform: scale(1.08);
}

/* SVG icons ship as flat black, so they are recoloured with a filter chain
   rather than `fill` — the source images are <img>, not inline SVG.
   Same two colours as the sidebar icons: #e6cfbb on dark, #392f48 on light. */
.gv-card__icon img {
  width: 30px;
  height: 30px;
  filter: brightness(0) saturate(100%) invert(74%) sepia(53%) saturate(100%) hue-rotate(346deg) brightness(100%) contrast(100%);
  transition: filter .28s ease;
}
html:not(.dark) .gv-card__icon img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(5%) saturate(2800%) hue-rotate(222deg) brightness(110%) contrast(100%);
}

/* Dark: hover brightens the same warm tone (#e6cfbb → #f6eee7) rather than
   shifting hue. Purple was a second colour arriving for no reason — the card's
   own border already carries the accent, so the icon only needs to lift. */
.gv-card:hover .gv-card__icon img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(6%) saturate(240%)
          hue-rotate(342deg) brightness(100%) contrast(100%);
}

/* Light theme keeps the purple hover: brightening a dark icon on a light card
   would make it recede instead of respond. */
html:not(.dark) .gv-card:hover .gv-card__icon img {
  filter: brightness(0) saturate(100%) invert(52%) sepia(19%) saturate(1132%)
          hue-rotate(224deg) brightness(94%) contrast(88%);
}

/* ==================== FOOTER ABOUT TEXT ==================== */

/* Sits between the legal links and the copyright line. Narrower than the
   footer itself and centred, because a full-width paragraph at this size gives
   line lengths well past comfortable reading. */
.tlFooter__about {
  max-width: 82ch;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--tl-text-dim);
}

@media (max-width: 640px) {
  .tlFooter__about {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* ==================== COMPONENTS RETHEMED TO THE PALETTE ==================== */

/* These replace Tailwind amber/yellow utilities that predate the purple+gold
   palette. Written by hand because the utility CSS is frozen (see README). */

/* Search-result category pill. Was amber-on-amber; now the accent purple, which
   is what marks every other "tagged / selected" state in the UI. */
.gv-pill {
  background: rgba(122, 91, 166, .18);
  color: var(--tl-accent-hover);
  border: 1px solid rgba(122, 91, 166, .3);
}
html:not(.dark) .gv-pill {
  background: rgba(122, 91, 166, .12);
  color: #6b4d96;
  border-color: rgba(122, 91, 166, .25);
}

/* Event-table icon tile. */
.gv-icon-tile {
  background: rgba(224, 173, 78, .10);
  border: 1px solid rgba(224, 173, 78, .22);
  border-radius: 8px;
}
html:not(.dark) .gv-icon-tile {
  background: rgba(224, 173, 78, .14);
  border-color: rgba(224, 173, 78, .3);
}

/* Duration pill in the event table — neutral at rest, gold on row hover. */
.gv-time-pill {
  background: rgba(255, 255, 255, .04);
}
.group:hover .gv-time-pill {
  background: rgba(224, 173, 78, .12);
}
html:not(.dark) .gv-time-pill {
  background: rgba(0, 0, 0, .04);
}
html:not(.dark) .group:hover .gv-time-pill {
  background: rgba(224, 173, 78, .16);
}

/* Category tag buttons on the home cards. The old hover filled solid gold with
   white text — 1.9:1 contrast, effectively unreadable. Gold now carries the
   border and text while the fill stays dark. */
.gv-tag-btn:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(224, 173, 78, .08) !important;
}
html:not(.dark) .gv-tag-btn:hover {
  border-color: var(--gold) !important;
  color: #8a6414 !important;
  background: rgba(224, 173, 78, .12) !important;
}


/* ==================== EVENT CALENDAR ==================== */

.tlCalFrame {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-bottom: 2px solid rgba(224, 173, 78, .35);
}
html:not(.dark) .tlCalFrame {
  background: #fff;
  border-color: #e2e0e8;
}

/* --- header: title + view switch + day nav --- */

.tlCalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tl-border);
}
html:not(.dark) .tlCalHead { border-bottom-color: #e2e0e8; }

.tlCalTitle {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tl-text-strong);
  margin: 0;
}
html:not(.dark) .tlCalTitle { color: #2d2838; }

.tlCalControls { display: flex; align-items: center; gap: 10px; }

/* Segmented control. Buttons butt against each other with a single shared
   divider rather than individual borders, so the group reads as one control. */
.tlCalSeg {
  display: flex;
  border: 1px solid var(--tl-border);
  overflow: hidden;
}
html:not(.dark) .tlCalSeg { border-color: #e2e0e8; }

.tlCalSeg button {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tl-text-dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.tlCalSeg button + button { border-left: 1px solid var(--tl-border); }
html:not(.dark) .tlCalSeg button + button { border-left-color: #e2e0e8; }
.tlCalSeg button:hover { color: var(--tl-text-strong); background: rgba(255, 255, 255, .04); }
html:not(.dark) .tlCalSeg button:hover { color: #2d2838; background: rgba(0, 0, 0, .03); }
.tlCalSeg button.on {
  background: rgba(122, 91, 166, .22);
  color: var(--tl-accent-hover);
}
html:not(.dark) .tlCalSeg button.on { background: rgba(122, 91, 166, .12); color: #6b4d96; }

.tlCalNav { display: flex; align-items: center; gap: 4px; }
.tlCalNav button {
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--tl-text-dim);
  background: transparent;
  border: 1px solid var(--tl-border);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
html:not(.dark) .tlCalNav button { border-color: #e2e0e8; }
.tlCalNav button:hover { color: var(--gold); border-color: rgba(224, 173, 78, .5); }
.tlCalNav .td { font-size: 12px; }

/* --- day view: a vertical run of the schedule --- */

.tlCalDay { padding: 6px 0; }

.tlDayRow {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .18s ease;
}
html:not(.dark) .tlDayRow { border-bottom-color: rgba(0, 0, 0, .05); }
.tlDayRow:last-child { border-bottom: 0; }
/* Hover borrows the "next up" language — gold spine, lifted ground — but at
   lower intensity, so the row you are pointing at never outshouts the one the
   schedule is actually pointing to. */
.tlDayRow:hover {
  background: rgba(224, 173, 78, .14);
  box-shadow: inset 3px 0 0 0 var(--gold);
}
html:not(.dark) .tlDayRow:hover {
  background: rgba(224, 173, 78, .18);
  box-shadow: inset 3px 0 0 0 var(--gold);
}

/* Past rows dim to 0.42; on hover they come back up so the row reads as
   interactive rather than disabled. */
.tlDayRow.past:hover { opacity: .72; }

/* Events already past are dimmed rather than hidden — the full day stays
   readable, but the eye skips to what is still ahead. */
.tlDayRow.past { opacity: .42; }

/* "Next up" keeps the stronger treatment: full-strength spine, warmer ground.
   Listed after the hover rule so it wins when both apply — pointing at the next
   event should not weaken its marker. */
.tlDayRow.next,
.tlDayRow.next:hover {
  background: rgba(224, 173, 78, .22);
  box-shadow: inset 3px 0 0 0 var(--gold), inset 0 0 0 1px rgba(224, 173, 78, .28);
}
html:not(.dark) .tlDayRow.next,
html:not(.dark) .tlDayRow.next:hover { background: rgba(224, 173, 78, .14); }

.tlDayTime {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
html:not(.dark) .tlDayTime { color: #a87c1c; }
.tlDayHour { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.tlDayMin { font-size: 13px; font-weight: 600; opacity: .75; }

.tlDayTitle { font-size: 13.5px; font-weight: 550; color: #f0edf5; }
html:not(.dark) .tlDayTitle { color: #241f2e; }
.tlDayDur { font-size: 12px; color: #c6c1d2; margin-top: 2px; }
html:not(.dark) .tlDayDur { color: #4f4a5c; }

.tlDayBadge {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-ink, #191320);
  background: var(--gold);
  white-space: nowrap;
}

/* --- week view: seven columns --- */

.tlCalDows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--tl-border);
}
html:not(.dark) .tlCalDows { border-bottom-color: #e2e0e8; }

.tlCalDow {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 9px 4px;
  font-size: 11.5px;
  color: var(--tl-text-dim);
}
.tlCalDow b { font-size: 13.5px; color: var(--tl-text-strong); font-weight: 600; }
html:not(.dark) .tlCalDow b { color: #2d2838; }
.tlCalDow.today { color: var(--gold); }
.tlCalDow.today b { color: var(--gold); }
html:not(.dark) .tlCalDow.today, html:not(.dark) .tlCalDow.today b { color: #a87c1c; }

.tlCalGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.tlCalCell {
  min-height: 120px;
  padding: 6px 5px;
  border-right: 1px solid rgba(255, 255, 255, .04);
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Columns hold the full recurring set; scrolling keeps the row height sane
     without truncating the schedule. */
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
}
html:not(.dark) .tlCalCell { border-right-color: rgba(0, 0, 0, .05); }
.tlCalCell:last-child { border-right: 0; }
.tlCalCell.today { background: rgba(224, 173, 78, .05); }

.tlCalEv {
  transition: background .18s ease, border-left-color .18s ease;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, .04);
  border-left: 2px solid rgba(224, 173, 78, .55);
  font-size: 10.5px;
  line-height: 1.3;
}
html:not(.dark) .tlCalEv { background: rgba(0, 0, 0, .03); }
.tlCalEv:hover {
  background: rgba(224, 173, 78, .2);
  border-left-color: var(--gold);
}
.tlCalEvTime {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--gold);
}
html:not(.dark) .tlCalEvTime { color: #a87c1c; }
.tlCalEvName {
  color: var(--tl-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not(.dark) .tlCalEvName { color: #6b6577; }

@media (max-width: 760px) {
  /* Seven columns cannot hold a legible event at phone widths, so the week
     view scrolls sideways with a usable minimum column instead of squeezing. */
  .tlCalDows, .tlCalGrid { min-width: 620px; }
  .tlCalFrame > div:last-child { overflow-x: auto; }
  .tlDayRow { grid-template-columns: 62px 1fr auto; padding: 9px 12px; }
  .tlDayHour { font-size: 17px; }
  .tlCalHead { padding: 12px; }
}


/* ==================== CORNER RADII ====================
   These sit after the site-wide `[class*="rounded"] { border-radius: 0 }`
   reset, and need the same !important to beat it. */

/* Category cards */
.gv-card { border-radius: 3px !important; }

/* Recommended-guide cards */
.gv-rec {
  border-radius: 1px !important;
  /* Overrides the Tailwind `border-gray-200 dark:border-[#2a2b33]` on the
     element, which would otherwise win by specificity in light mode. */
  border-color: rgba(42, 43, 50, .5) !important;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.gv-rec:hover { border-color: #7a5ba6 !important; }

/* Calendar: the outer frame only. Rows and event chips inside stay square, so
   the rounding reads as one panel edge rather than a stack of pills. */
.tlCalFrame {
  border-radius: 3px !important;
  /* Clips the header's and first row's corners to the frame's own radius —
     without it their square edges poke through the rounded outline. */
  overflow: hidden;
}

/* ==================== CALENDAR PAGE ==================== */

.calPage { padding-bottom: 20px; }

/* --- hero --- */

.calHero {
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--tl-border);
  margin-bottom: 22px;
}
html:not(.dark) .calHero { border-bottom-color: #e2e0e8; }

.calHero__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 6px 0 8px;
  color: var(--tl-text-strong);
}
html:not(.dark) .calHero__title { color: #2d2838; }

.calHero__sub {
  font-size: 14px;
  line-height: 1.7;
  color: #c4bfd0;
  max-width: 68ch;
}
html:not(.dark) .calHero__sub { color: #524d5e; }

/* --- stat row --- */

.calStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.calStat {
  padding: 14px 16px;
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 3px;
}
html:not(.dark) .calStat { background: #fff; border-color: #e2e0e8; }

/* The "next event" figure is the one a player checks; it carries the accent so
   the eye lands there first. */
.calStat--next { border-bottom: 2px solid var(--gold); }

.calStat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tl-text-strong);
  line-height: 1.1;
}
html:not(.dark) .calStat__value { color: #2d2838; }
.calStat--next .calStat__value { color: var(--gold); }
html:not(.dark) .calStat--next .calStat__value { color: #a87c1c; }

.calStat__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #b3aec0;
}
html:not(.dark) .calStat__label { color: #5c5768; }

/* --- control bar --- */

.calBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.calFilter { display: flex; gap: 6px; flex-wrap: wrap; }
.calFilter button {
  padding: 7px 13px;
  font-size: 12.5px;
  color: #b3aec0;
  background: transparent;
  border: 1px solid var(--tl-border);
  border-radius: 3px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
html:not(.dark) .calFilter button { border-color: #e2e0e8; color: #55505f; }
.calFilter button:hover { color: var(--gold); border-color: rgba(224, 173, 78, .5); }
.calFilter button.on {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(224, 173, 78, .1);
}

/* --- day list --- */

.calDay {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 3px;
  overflow: hidden;
}
html:not(.dark) .calDay { background: #fff; border-color: #e2e0e8; }

.calRow {
  display: grid;
  grid-template-columns: 84px 4px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
html:not(.dark) .calRow { border-bottom-color: rgba(0, 0, 0, .05); }
.calRow:last-child { border-bottom: 0; }
.calRow.past { opacity: .45; }

.calRow:hover {
  background: rgba(224, 173, 78, .14);
  box-shadow: inset 3px 0 0 0 var(--gold);
}
.calRow.past:hover { opacity: .75; }
.calRow.next,
.calRow.next:hover {
  background: rgba(224, 173, 78, .22);
  box-shadow: inset 3px 0 0 0 var(--gold), inset 0 0 0 1px rgba(224, 173, 78, .28);
}
html:not(.dark) .calRow.next, html:not(.dark) .calRow.next:hover { background: rgba(224, 173, 78, .26); }

.calRow__time {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
html:not(.dark) .calRow__time { color: #a87c1c; }
.calRow__hh { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.calRow__mm { font-size: 13px; font-weight: 600; opacity: .75; }

/* Duration as a bar: length is relative to the longest event of the day, so the
   list conveys scale without a second column of numbers. */
.calRow__bar {
  height: 26px;
  background: linear-gradient(to bottom, rgba(224, 173, 78, .5), rgba(224, 173, 78, .22));
  width: 4px;
  position: relative;
}
.calRow__bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: var(--w, 50%);
  max-height: 26px;
  background: var(--gold);
}

.calRow__title { font-size: 13.5px; font-weight: 550; color: #f0edf5; }
html:not(.dark) .calRow__title { color: #241f2e; }
.calRow__meta { margin-top: 3px; font-size: 12px; color: #c6c1d2; }
html:not(.dark) .calRow__meta { color: #4f4a5c; }
.calRow__sep { margin: 0 6px; opacity: .75; }

.calRow__badge {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #191320;
  background: var(--gold);
  border-radius: 2px;
  white-space: nowrap;
}

.calEmpty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13.5px;
  color: #b3aec0;
}

/* --- week grid --- */

.calWeekWrap { overflow-x: auto; }

.calWeek {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 8px;
  min-width: 700px;
}

.calCol {
  background: var(--tl-surface);
  border: 1px solid var(--tl-border);
  border-radius: 3px;
  overflow: hidden;
}
html:not(.dark) .calCol { background: #fff; border-color: #e2e0e8; }
.calCol.today { border-color: rgba(224, 173, 78, .45); }

.calCol__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--tl-border);
  font-size: 12px;
  color: #b3aec0;
}
html:not(.dark) .calCol__head { border-bottom-color: #e2e0e8; color: #5c5768; }
.calCol.today .calCol__head { background: rgba(224, 173, 78, .08); color: var(--gold); }
.calCol__date { font-size: 14px; font-weight: 600; color: var(--tl-text-strong); }
html:not(.dark) .calCol__date { color: #2d2838; }
.calCol.today .calCol__date { color: var(--gold); }
html:not(.dark) .calCol.today .calCol__date { color: #a87c1c; }

.calCol__body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.calChip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .06);
  border-left: 2px solid rgba(224, 173, 78, .6);
  font-size: 12px;
  line-height: 1.4;
  transition: background .18s ease, border-left-color .18s ease;
}
html:not(.dark) .calChip { background: rgba(0, 0, 0, .03); }
.calChip:hover { background: rgba(224, 173, 78, .2); border-left-color: var(--gold); }
/* Brightened from --gold (2.05:1 here) to clear AA on the chip's own ground. */
.calChip__time { font-variant-numeric: tabular-nums; font-weight: 600; color: #f0c669; }
html:not(.dark) .calChip__time { color: #8a6414; }
.calChip__name {
  color: #cfc9d6;   /* was --tl-text-dim at 3.36:1 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not(.dark) .calChip__name { color: #55505f; }

@media (max-width: 640px) {
  .calHero__title { font-size: 24px; }
  .calRow { grid-template-columns: 66px 4px 1fr; padding: 11px 12px; gap: 10px; }
  .calRow__badge { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* Sits in a `.head`, which is a flex row shared with the section title, so the
   link inherited the surrounding 16px rather than the 12px the other
   `head__hint` elements use. */
.gv-more {
  font-size: 12.5px;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.gv-more:hover { color: var(--gold-hi, #e5b243); }
html:not(.dark) .gv-more { color: #a87c1c; }

/* The heading row above the calendar had no bottom margin, leaving the link
   2px off the frame. Scoped to this heading so other sections keep their
   existing rhythm. */
.head:has(.gv-more) { margin-bottom: 14px; }


/* ==================== HOME HERO SLIDER ==================== */

/* One layer per image, stacked and crossfaded. Opacity rather than swapping a
   single background: the browser keeps both decoded, so the transition has no
   flash of empty space on the way. */
.home-hero__slide {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 28%;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.home-hero__slide.on { opacity: 1; }

.home-hero__dots {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 7px;
}

/* Small targets by design — this is ambient navigation, not a primary control.
   The hit area is padded out to 20px via the pseudo-element so it stays
   comfortably clickable without a large visible dot. */
.home-hero__dot {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: background .22s ease, width .22s ease;
}
.home-hero__dot::after {
  content: "";
  position: absolute;
  inset: -7px;
}
.home-hero__dot:hover { background: rgba(255, 255, 255, .65); }
.home-hero__dot.on {
  width: 20px;
  background: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__slide { transition: none; }
}

@media (max-width: 640px) {
  .home-hero__dots { right: 14px; bottom: 14px; }
}

/* Card padding and equal height.
   `p-6` (24px) came from the original markup and was generous for the amount of
   text these hold. Set here rather than in the class list so the value lives
   with the rest of the card's styling.

   The grid already stretches its items, but the card is only as tall as its
   content unless it is told to fill — hence `height: 100%` plus a column
   layout, which lets the tag row sit at the bottom of every card regardless of
   how long the description runs. */
.gv-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 14px;
}

/* Equal heights mean the shorter cards in a row gain slack. Push that slack
   above the header's divider rather than between the divider and the tags, so
   the divider stays attached to the tag list it introduces and the gap reads
   as deliberate spacing instead of a hole in the card. */
.gv-card > div:first-child {
  margin-bottom: auto;
}
.gv-card > div:last-child {
  margin-top: 0;
}

@media (max-width: 640px) {
  .gv-card { padding: 14px 14px 12px; }
}

/* Sidebar scrolling.
   `h-full` pinned the nav to the aside's height while its own content ran
   taller, and with `overflow: visible` that surplus spilled outside the box
   instead of extending the aside's scroll height — so the aside reported
   nothing to scroll and the wheel fell through to the page. Letting the nav
   size to its content restores the aside as the scroll container. */
.gv-side__nav {
  min-height: 100%;
  height: auto;
  /* Breathing room under the last item, so it does not sit flush against the
     viewport edge at the bottom of the scroll. */
  padding-bottom: 12px;
}

/* Keep the wheel on the sidebar once it reaches an end, rather than handing
   the remaining delta to the page behind it. */
.gv-side {
  overscroll-behavior: contain;
}