/* 1.298 theme: gold-rimmed dark windows, stone buttons, game colours. Linked only when the pictures were cut
   successfully (ThemeAssets.IsReady); every rule is scoped to body.ko so the plain style stays untouched. */

body.ko {
    --bg: #0e0d0a;
    --bg-2: #1a150e;
    --panel: #1f1a12;
    --line: #5e4f2b;
    --text: #f2e8cc;
    --muted: #bcab7c;
    --accent: #d8b255;
    --accent-2: #ffff80;
    --accent-ink: #1a1306;
    --up: #7fe58f;
    --down: #ff7a6a;
    --code: #2b2417;
    --radius: 0;
    --shadow: none;
    --parchment: #ecdaae;
    --dark: #272116;
    --karus: #ff6b5e;
    --elmorad: #6db3ff;
    --font: Arial, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif;
    --ink: 1px 1px 0 #0e0e0c, -1px 1px 0 #0e0e0c, 1px -1px 0 #0e0e0c, -1px -1px 0 #0e0e0c;
    color-scheme: dark;
    background: radial-gradient(900px 380px at 50% -140px, rgb(216 178 85 / 0.2), transparent 70%), var(--bg);
    cursor: url(/tema/imlec-ka.png) 0 0, auto;
}
.ko a, .ko button, .ko summary, .ko label { cursor: url(/tema/imlec-ka.png) 0 0, pointer; }
.ko :active, .ko a:active, .ko button:active { cursor: url(/tema/imlec-ka-basili.png) 0 0, pointer; }
.ko img, .ko .panel, .ko .stat, .ko .entry, .ko .file, .ko .button, .ko .nav a, .ko .chip, .ko input { image-rendering: pixelated; }

.ko h1, .ko h2, .ko h3 { text-shadow: var(--ink); letter-spacing: 0; }
.ko h2 { color: var(--accent-2); }
.ko code { border-radius: 0; color: var(--parchment); }
.ko a { color: var(--accent-2); }
.ko a:hover { color: #fff; }

/* header: ornamental band, tabs */
.ko .top { background: #0b0a08 url(/tema/bant-1-orta.png) repeat-x 0 0 / auto 60px; border-bottom: 2px solid var(--line); backdrop-filter: none; image-rendering: pixelated; }
.ko .brand { color: #fff; text-shadow: var(--ink); font-size: 1.2rem; }
.ko .brand-mark { color: var(--accent-2); }
.ko .nav { gap: 2px; }
.ko .nav a, .ko .nav .linklike {
    display: inline-block; min-height: 36px; padding: 0 14px; line-height: 36px; border-radius: 0;
    border-style: solid; border-width: 0 14px; border-color: transparent; margin: 0 -8px;
    border-image: url(/tema/sekme-normal.png) 0 14 fill / 0 14px stretch;
    color: #2b2113; font-weight: 700; font-size: 0.9rem; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); background: none; box-shadow: none;
}
.ko .nav a:hover, .ko .nav .linklike:hover { border-image-source: url(/tema/sekme-ustunde.png); color: #000; background: none; }
.ko .nav a[aria-current="page"] { border-image-source: url(/tema/sekme-aktif.png); color: #fff; text-shadow: var(--ink); box-shadow: none; background: none; }

/* windows */
.ko .panel, .ko .stat, .ko .entry, .ko .file {
    background: var(--panel) padding-box; border: 10px solid transparent; border-image: url(/tema/pencere.png) 10 / 10px stretch;
    border-radius: 0; box-shadow: none; padding: 4px 10px;
}
.ko .panel.empty { padding: 14px 6px; }
.ko .stat { padding: 0 4px; }
.ko .entry { scroll-margin-top: 80px; }
.ko .grid .panel { margin-bottom: 0; }

/* title plates */
.ko .page-head h1 {
    display: block; margin: 0 0 14px; padding: 8px 18px; font-size: clamp(1.35rem, 4.5vw, 2rem); color: #fff;
    background: linear-gradient(90deg, rgb(14 12 8 / 0.9), rgb(14 12 8 / 0.55) 45%, transparent 85%), #14110c url(/tema/bant-2-orta.png) repeat-x 0 0 / auto 100%; border: 2px solid var(--line); image-rendering: pixelated;
}
.ko .hero h1 { color: #fff; text-shadow: var(--ink), 0 3px 12px rgb(0 0 0 / 0.6); }
.ko .eyebrow { color: var(--accent-2); text-shadow: var(--ink); }
.ko .lead { color: var(--parchment); }

/* stone buttons: one picture, three states stacked (normal, hover, pressed) */
.ko .button {
    display: inline-flex; align-items: center; justify-content: center; width: 149px; height: 34px; padding: 0 6px;
    border: 0; border-radius: 0; background: url(/tema/dugme.png) 0 0 no-repeat; color: #fff; font: 700 15px/1 var(--font);
    text-shadow: var(--ink); text-decoration: none; white-space: nowrap; image-rendering: pixelated;
}
.ko .button:hover { background-position: 0 -34px; color: #fff; }
.ko .button:active { background-position: 0 -68px; }
.ko .button.ghost { background-color: transparent; border: 0; color: #fff; filter: grayscale(1) brightness(0.9); }
.ko .button.ghost:hover { filter: none; border: 0; }
.ko :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* filter chips: small tabs */
.ko .chip {
    display: inline-block; min-height: 28px; padding: 0 8px; line-height: 28px; border-radius: 0; background: none;
    border-style: solid; border-width: 0 10px; border-color: transparent; margin: 0 -4px;
    border-image: url(/tema/sekme-normal.png) 0 14 fill / 0 10px stretch; color: #2b2113; font-weight: 700; font-size: 0.85rem;
    text-shadow: 0 1px 0 rgb(255 255 255 / 0.45);
}
.ko .chip:hover { border-image-source: url(/tema/sekme-ustunde.png); color: #000; }
.ko .chip[aria-current="page"] { border-image-source: url(/tema/sekme-aktif.png); color: #fff; text-shadow: var(--ink); background: none; }
.ko .filters { gap: 6px 8px; }

/* tables: parchment head, dark rows */
.ko .table-wrap { background: var(--dark); border: 2px solid var(--line); border-radius: 0; box-shadow: none; }
.ko table.data th, .ko table.data td { border-top: 1px solid #3d331d; }
.ko table.data thead th { background: #3a2f1a; color: var(--accent-2); text-shadow: var(--ink); letter-spacing: 0.04em; }
.ko table.data tbody tr:nth-child(even) { background: #2d2619; }
.ko table.data tbody tr:hover { background: #4a3c1f; }
.ko .panel .table-wrap { margin-bottom: 8px; }
.ko .nation { text-shadow: var(--ink); }
.ko .nation.n1 { color: var(--karus); }
.ko .nation.n2 { color: var(--elmorad); }

.ko .tag { border-radius: 0; color: var(--accent-2); border-color: var(--line); }
.ko .prose th, .ko .prose td { border-color: var(--line); }
.ko .mini-log li, .ko .props div { border-color: #3d331d; }
.ko .dot { box-shadow: none; }
.ko .pager { color: var(--parchment); }
.ko .foot { border-top: 2px solid var(--line); background: #0b0a08; color: var(--muted); }

/* forms: engraved input field */
.ko .form label { color: var(--parchment); text-shadow: var(--ink); }
.ko .form input, .ko .search input {
    min-height: 36px; padding: 4px 8px; background: #0b0a08 padding-box; color: #fff; border: 7px solid transparent;
    border-image: url(/tema/giris-kutusu.png) 7 / 7px stretch; border-radius: 0; image-rendering: pixelated;
}
.ko .form input:focus, .ko .search input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.ko .problem { color: var(--down); text-shadow: var(--ink); }
.ko .ok { color: var(--up); text-shadow: var(--ink); }

/* sign-in / sign-up: the login screen's ornate frame */
.ko .panel.ko-login {
    border-style: solid; border-color: transparent; border-width: 44px 26px 40px; border-image: url(/tema/giris-cerceve.png) 44 26 40 / 44px 26px 40px stretch;
    padding: 0 10px 6px; background: #17130c padding-box;
}

@media (max-width: 720px) {
    .ko .panel, .ko .stat, .ko .entry, .ko .file { border-width: 8px; border-image-width: 8px; padding: 2px 4px; }
    .ko .panel.ko-login { border-width: 34px 20px 30px; border-image-width: 34px 20px 30px; padding: 0 4px; }
    .ko .nav a, .ko .nav .linklike { min-height: 32px; line-height: 32px; font-size: 0.85rem; }
    .ko .page-head h1 { padding: 6px 12px; }
}

/* Item pictures (droplist): the client's 45x45 inventory icon in a dark cell with a gold edge, like an inventory slot */
.ko .item-line { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ko .item-icon { display: block; width: 45px; height: 45px; flex: none; background: #120e08; border: 2px solid #6b5a33; box-shadow: inset 0 0 0 1px #000; image-rendering: pixelated; }
.ko .page-head h1.item-line { display: flex; }