/* Yedi Diyar's admin pages (the second version, 2026-10-25): the game's new look on a working tool. Charcoal
   panels, thin bronze edges, gold Cinzel titles, Alegreya Sans for text, the item tiers' colours, the game's
   own icons. Everything is under .yd, so the rest of the panel keeps its own look. */

@font-face { font-family: 'YD Cinzel'; src: url('yd-cinzel.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'YD Alegreya'; src: url('yd-alegreya.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'YD Alegreya'; src: url('yd-alegreya-kalin.ttf') format('truetype'); font-weight: 700 800; font-display: swap; }

.yd {
  --page: #0e0f12;
  --side: #0b0c0e;
  --card: #16171b;
  --card-2: #121316;
  --row: #1f1d19;
  --hover: #1b1c20;
  --edge: #2a2620;
  --edge-2: #24211c;
  --bronze: #4a3e29;
  --bronze-2: #b8955a;
  --gold: #edc773;
  --gold-2: #f2d28e;
  --gold-3: #d9bd86;
  --field: #0f1013;
  --title: #ead3a0;
  --head: #e3c88e;
  --ink: #f2ebdb;
  --ink-2: #d9d1c1;
  --ink-3: #b9b0a0;
  --muted: #958d7f;
  --muted-2: #8e8677;
  --good: #8edb84;
  --bad: #ff9686;
  --warn: #f0be5a;
  --info: #8cc2ff;
  --gok: #8cc4ff;
  --kara: #ff8577;
  --flow-in: #b98a33;
  --flow-out: #3987e5;
  font-family: 'YD Alegreya', 'Alegreya Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--page);
  font-variant-numeric: lining-nums tabular-nums;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-height: 100vh;
}
/* Around a short page (an error, a loading one) the panel's own light background must not show. */
html:has(.yd), body:has(.yd) { background: #0e0f12; }
.yd *, .yd *::before, .yd *::after { box-sizing: border-box; }
.yd a { color: var(--gold); text-decoration: none; }
.yd a:hover { color: #f7dfa6; }
.yd button { font: inherit; }
.yd .cz { font-family: 'YD Cinzel', 'Cinzel', Georgia, serif; text-transform: uppercase; letter-spacing: .1em; }
.yd .mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.yd .y-sub { color: var(--muted); font-size: 12.5px; }
.yd .h3 { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 0; }
.yd .y-num { text-align: right; justify-self: end; }
.yd .y-ok { color: var(--good); }
.yd .err { color: var(--bad); }
.yd .gok { color: var(--gok); }
.yd .kara { color: var(--kara); }
.yd .t0 { color: #cfc8b9; } .yd .t1 { color: #ebe6db; } .yd .t2 { color: #86e67a; } .yd .t3 { color: #74b2ff; }
.yd .t4 { color: #db8cff; } .yd .t5 { color: #ff8a40; } .yd .t6 { color: #ffd65c; } .yd .t7 { color: #ff5c6a; }

/* Sprites (the page's rules allow no style attributes: sizes and places are set on the style object). */
.yd .ie { background-image: url('yd-esyalar.webp'); background-repeat: no-repeat; border-radius: 4px; flex: none; display: inline-block; }
.yd .ie.ibox { border: 1px solid #2e2a22; background-color: #101114; }
.yd .si { background-image: url('yd-simgeler.webp'); background-repeat: no-repeat; flex: none; display: inline-block; }
.yd .pt { background-image: url('yd-portreler.webp'); background-repeat: no-repeat; flex: none; display: inline-block; border-radius: 50%; background-color: #202228; }
.yd .pt.sq { border-radius: 8px; }
.yd .pt.edge { border: 1px solid var(--bronze); }
.yd .pt.none { background-image: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.yd .coin { background: url('yd-kit-sikke.webp') center/contain no-repeat; width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.yd .akc { background: url('yd-kit-akce.webp') center/contain no-repeat; width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.yd .ayrac { background: url('yd-kit-ayrac.webp') left center/auto 100% no-repeat; height: 12px; width: 320px; max-width: 100%; opacity: .85; }
.yd .frame { background: url('yd-kit-portre.webp') center/contain no-repeat; }
.yd .y-slot { background: url('yd-kit-slot.webp') center/100% 100% no-repeat; }
.yd .y-slot.on { background-image: url('yd-kit-slot-secili.webp'); }
.yd .y-brand { background: url('yd-simge.webp') center/cover no-repeat; width: 40px; height: 40px; border-radius: 9px; border: 1px solid #6e5a35; flex: none; }

/* The frame: menu at the side, content beside it (stacked on a phone). */
.yd .y-side { flex: 1 1 248px; max-width: 248px; background: var(--side); border-right: 1px solid #262219; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.yd .y-side .grp { font-family: 'YD Cinzel', serif; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #7f7768; padding: 16px 10px 6px; }
.yd .y-nav { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 6px; color: var(--ink-3); font-size: 14px; }
.yd .y-nav:hover { background: #17181b; color: var(--ink); }
.yd .y-nav.on { background: #221e15; color: var(--gold-2); box-shadow: inset 2px 0 0 #c9a45c; }
.yd .y-nav .si { opacity: .85; }
.yd .y-nav .n { margin-left: auto; font-size: 11px; font-weight: 800; color: #17130b; background: #e8a04a; border-radius: 9px; padding: 0 6px; line-height: 17px; }
.yd .srv { display: flex; align-items: center; gap: 8px; margin: 0 6px 6px; padding: 8px 10px; border: 1px solid #262219; border-radius: 7px; background: #111215; font-size: 12px; color: var(--ink-3); }
.yd .dot { width: 8px; height: 8px; border-radius: 50%; background: #7fd877; flex: none; display: inline-block; }
.yd .dot.off { background: #ff7a6b; }
.yd .y-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.yd .y-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 28px; border-bottom: 1px solid #221f19; position: relative; }
.yd .page { padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.yd .crumb { color: var(--muted); font-size: 12.5px; }
.yd .crumb b { color: var(--ink-2); }
.yd h1.ttl { margin: 0; font-size: 26px; font-weight: 700; color: var(--title); }
.yd .ttl-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.yd .ttl-col { display: flex; flex-direction: column; gap: 6px; }
.yd .acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* Search everywhere. */
.yd .find { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; max-width: 560px; height: 38px; padding: 0 12px; border: 1px solid #2e2a22; border-radius: 8px; background: #121316; color: var(--muted-2); position: relative; }
.yd .find:focus-within { border-color: var(--bronze-2); }
.yd .find input { border: 0; background: transparent; flex: 1; height: 36px; color: var(--ink); font: inherit; font-size: 13px; outline: none; min-width: 0; }
.yd .find .y-key { border: 1px solid #2e2a22; border-radius: 4px; padding: 0 5px; color: #7f7768; }
.yd .found { position: absolute; left: 0; right: 0; top: 42px; z-index: 20; background: #17181c; border: 1px solid var(--bronze); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); max-height: 70vh; overflow: auto; padding: 6px 0; }
.yd .found .grp { padding: 8px 14px 4px; }
.yd .found a { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--ink); }
.yd .found a:hover, .yd .found a.sel { background: #221e15; }

/* Cards, tiles, tables. */
.yd .y-card { background: var(--card); border: 1px solid var(--edge); border-radius: 8px; min-width: 0; }
.yd .y-card.warm { border-color: #5a3a22; }
.yd .ch { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--edge-2); flex-wrap: wrap; }
.yd .ch .end { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.yd .h2 { font-family: 'YD Cinzel', serif; font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--head); font-weight: 600; margin: 0; }
.yd .pad { padding: 14px 16px; }
.yd .y-grid { display: grid; gap: 18px; min-width: 0; }
.yd .g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.yd .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yd .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.yd .g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.yd .row-flex { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.yd .kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.yd .kpi .t { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.yd .kpi .v { font-size: 26px; font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: 7px; }
.yd .kpi .s { font-size: 12px; color: #a79f90; }
.yd .th { display: grid; gap: 12px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--edge); color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.yd .tr { display: grid; gap: 12px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--row); font-size: 13.5px; color: var(--ink); }
.yd a.tr, .yd .tr.link { cursor: pointer; }
.yd .tr:hover { background: var(--hover); }
.yd .tr.sel { background: #1f1c15; box-shadow: inset 2px 0 0 #c9a45c; }
.yd .tr > .tag { justify-self: start; }
.yd .y-scroll { overflow-x: auto; }
.yd .y-empty { padding: 18px 16px; color: var(--muted); }
.yd .day { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--card-2); border-bottom: 1px solid var(--edge-2); }
.yd .day .cz { font-size: 12px; color: #d9bd86; font-weight: 600; }
.yd .kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 7px 12px; font-size: 13px; }
.yd .kv > :nth-child(odd) { color: var(--muted); }

/* Controls. */
.yd .y-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--bronze); background: #1a1a1d; color: var(--title); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.yd .y-btn:hover { border-color: var(--bronze-2); color: var(--title); }
.yd .y-btn:disabled { opacity: .5; cursor: default; }
.yd .y-btn.pri { background: #c9a45c; border-color: #ddbb78; color: #17130b; }
.yd .y-btn.pri:hover { background: #d6b06a; }
.yd .y-btn.dan { border-color: #6b2c26; color: #ff9b8c; background: #1e1514; }
.yd .y-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.yd .y-btn.big { height: 44px; padding: 0 22px; font-size: 15px; }
.yd .y-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #2e2a22; background: #141518; color: #c9c0af; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.yd .y-chip.on { border-color: var(--bronze-2); background: #2a2416; color: var(--gold-2); }
.yd .y-chip .mono { color: var(--muted-2); }
.yd .tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.yd .tag.gold { background: #2b2414; color: #f0cf83; } .yd .tag.good { background: #16281a; color: #8edb84; }
.yd .tag.warn { background: #2e2410; color: #f0be5a; } .yd .tag.bad { background: #341816; color: #ff9686; }
.yd .tag.info { background: #142233; color: #8cc2ff; } .yd .tag.mute { background: #1f2023; color: #a79f90; }
.yd .cc { display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 26px; padding: 0 4px; border-radius: 3px; background: #24262c; color: var(--ink-2); font-family: ui-monospace, monospace; font-size: 11px; }
.yd .in { height: 34px; border-radius: 6px; border: 1px solid #2e2a22; background: #0f1013; color: var(--ink); padding: 0 11px; font: inherit; font-size: 13px; min-width: 0; }
.yd select.in { padding-right: 6px; }
.yd textarea.in { height: auto; padding: 8px 11px; resize: vertical; }
.yd .in:focus { outline: none; border-color: var(--bronze-2); }
.yd .in.changed { border-color: var(--bronze-2); background: #1c1910; }
.yd .in.sm { height: 30px; }
.yd .fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.yd .fld > label, .yd .fld > .lbl { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.yd .box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--bronze); background: #0f1013; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.yd .box.on { background: #c9a45c; border-color: #ddbb78; }
.yd .box.round { border-radius: 50%; }
.yd .ck { display: flex; align-items: center; gap: 9px; min-height: 30px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; background: none; border: 0; padding: 0; text-align: left; width: 100%; }
.yd .tog { width: 34px; height: 20px; border-radius: 10px; background: #2a2b30; position: relative; flex: none; border: 1px solid #3a3b40; cursor: pointer; padding: 0; }
.yd .tog.on { background: #7a6233; border-color: #c9a45c; }
.yd .tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #a79f90; }
.yd .tog.on::after { left: 16px; background: var(--gold-2); }
.yd .y-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--edge-2); }
.yd .y-tab { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 4px; margin-right: 20px; color: #a79f90; font-weight: 700; font-size: 14px; border-bottom: 2px solid transparent; }
.yd .y-tab:hover { color: var(--ink); }
.yd .y-tab.on { color: var(--gold-2); border-bottom-color: #c9a45c; }
.yd .said { font-size: 13px; min-height: 18px; }
.yd .said:empty { display: none; }
.yd .pc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 2px; border: 1px solid #2e2a22; border-radius: 999px; background: #111215; font-size: 12.5px; white-space: nowrap; color: var(--ink); }
.yd .itm { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1px solid #2e2a22; border-radius: 6px; background: #111215; font-size: 12.5px; color: var(--ink); }
.yd .bar { height: 4px; border-radius: 2px; background: #24221d; overflow: hidden; }
.yd .bar > span { display: block; height: 4px; border-radius: 2px; background: var(--flow-in); }
.yd .bar.out > span { background: var(--flow-out); }
.yd .bar.big, .yd .bar.big > span { height: 6px; border-radius: 3px; }

/* The player's timeline. */
.yd .ev { display: grid; grid-template-columns: 62px 34px minmax(0, 1fr) 150px; gap: 12px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--row); cursor: pointer; }
.yd .ev:hover { background: #1a1b1f; }
.yd .ev.sel { background: #1f1c15; box-shadow: inset 2px 0 0 #c9a45c; }
.yd .ev .y-when { color: #a79f90; padding-top: 7px; }
.yd .ev .body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yd .ev .y-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.yd .ev .text { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.yd .ev .side2 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12.5px; text-align: right; }
.yd .chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* The inventory. */
.yd .inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.yd .cell { position: relative; height: 64px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; background-color: transparent; padding: 0; }
.yd .cell .y-ct { position: absolute; right: 6px; bottom: 4px; font-size: 11px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 2px #000; }
.yd .cell .pl { position: absolute; left: 6px; top: 3px; font-size: 11px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.yd .cell .lb { position: absolute; left: 0; right: 0; bottom: -15px; font-size: 10.5px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
.yd .inv.worn { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); row-gap: 24px; }

/* A dialog: a question with the reason it needs. */
.yd-modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 7, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.yd-modal .dlg { width: 100%; max-width: 480px; background: #17181c; border: 1px solid #6e5a35; border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.yd-modal .dlg .q { font-size: 15px; color: var(--ink); white-space: pre-line; }

/* The world maps (svg). */
.yd .map svg { width: 100%; height: auto; display: block; background: #101114; border-radius: 6px; }
.yd .map .bg { fill: #121316; }
.yd .map .grid-l { stroke: #1f1e1b; stroke-width: 1; }
.yd .map .hunt { fill: rgba(185, 138, 51, .08); stroke: rgba(185, 138, 51, .25); }
.yd .map .castle { stroke-width: 2; fill: none; }
.yd .map .castle.n1, .yd .map .pl.n1 { stroke: #8cc4ff; fill: #8cc4ff; }
.yd .map .castle.n2, .yd .map .pl.n2 { stroke: #ff8577; fill: #ff8577; }
.yd .map .castle { fill-opacity: 0; }
.yd .map .gate { fill: #c9a45c; }
.yd .map .jail { fill: #777; }
.yd .map .market { fill: rgba(237, 199, 115, .07); stroke: rgba(237, 199, 115, .3); }
.yd .map .st { fill: #c9a45c; }
.yd .map .drop { fill: #ebe6db; } .yd .map .drop.t2 { fill: #86e67a; } .yd .map .drop.t3 { fill: #74b2ff; } .yd .map .drop.t4 { fill: #db8cff; } .yd .map .drop.t5 { fill: #ff8a40; } .yd .map .drop.t6 { fill: #ffd65c; } .yd .map .drop.t7 { fill: #ff5c6a; }
.yd .map .boss { fill: #ff5c4a; stroke: #111; stroke-width: 1; } .yd .map .boss.dead { fill: #555; }
.yd .map .pl { stroke: #111; stroke-width: .6; cursor: pointer; } .yd .map .pl.dead { opacity: .4; } .yd .map .pl.hid { opacity: .55; }

/* Charts (diverging bars). */
.yd .flow { display: flex; gap: 2px; height: 280px; position: relative; justify-content: center; }
.yd .flow .mid { position: absolute; left: 0; right: 0; top: 140px; border-top: 1px solid #3a3b40; }
.yd .flow .col { flex: 1; max-width: 64px; display: flex; flex-direction: column; padding: 0 3px; border-radius: 4px; }
.yd .flow .col.hi { background: #1f1e1b; }
.yd .flow .up { height: 140px; display: flex; align-items: flex-end; }
.yd .flow .dn { height: 138px; display: flex; align-items: flex-start; margin-top: 2px; }
.yd .flow .up > span { width: 100%; border-radius: 4px 4px 0 0; background: var(--flow-in); }
.yd .flow .dn > span { width: 100%; border-radius: 0 0 4px 4px; background: var(--flow-out); }
.yd .legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); }
.yd .legend span { display: inline-flex; align-items: center; gap: 6px; }
.yd .legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Ödül ver: the three steps, the kinds of gift, premium cards, item picks. */
.yd .step { display: flex; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--edge-2); }
.yd .stepn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bronze-2); color: var(--gold-2); display: flex; align-items: center; justify-content: center; font-family: 'YD Cinzel', serif; font-weight: 700; flex: none; }
.yd .kind { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 90px; padding: 12px 6px; border: 1px solid #2e2a22; border-radius: 8px; background: #111215; color: #c9c0af; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.yd .kind.on { border-color: #c9a45c; background: #221e15; color: var(--gold-2); box-shadow: 0 0 0 1px #c9a45c inset; }
.yd .prem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2e2a22; border-radius: 8px; background: #111215; cursor: pointer; font-family: inherit; color: var(--ink-2); text-align: left; }
.yd .prem.on { border-color: #c9a45c; background: #221e15; }
.yd .gi { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.2; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.yd .gi:hover { color: var(--ink); }

/* Forum ve destek: a request's messages (the player's, the staff's). */
.yd .y-msg { display: flex; gap: 10px; align-items: flex-start; }
.yd .bub { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 8px; background: var(--card-2); font-size: 13.5px; color: var(--ink-2); }
.yd .bub.staff { background: #1a1810; border-color: var(--bronze); }

/* Phones: the menu above, columns one under another. */
@media (max-width: 900px) {
  .yd .y-side { max-width: none; flex-basis: 100%; border-right: 0; border-bottom: 1px solid #262219; flex-direction: row; flex-wrap: wrap; }
  .yd .y-side .grp { display: none; }
  .yd .g2, .yd .g3 { grid-template-columns: minmax(0, 1fr); }
  .yd .g4, .yd .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Grids whose columns are set on the element (two or three unequal ones) stack too. */
  .yd .split { grid-template-columns: minmax(0, 1fr) !important; }
  .yd .page, .yd .y-top { padding-left: 16px; padding-right: 16px; }
  .yd .ev { grid-template-columns: 52px 28px minmax(0, 1fr); }
  .yd .ev .side2 { grid-column: 3; align-items: flex-start; text-align: left; }
}

/* The server's state (yd-sunucu.js), and the strip over every page while it is closed (yd-ortak.js frame). */
.yd .srv.shut { border-color: #4a3e29; background: #1c1810; }
.yd .srv.shut .dot { background: #e8a04a; }
.yd .y-shut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 28px; background: #221b0e; border-bottom: 1px solid #4a3e29; font-size: 13px; color: #f0d8a4; }
.yd .y-card.sd-shut { border-color: #4a3e29; background: linear-gradient(180deg, #1c1810, var(--card) 70%); }
.yd .sd-now { display: flex; gap: 28px; flex-wrap: wrap; padding: 20px 22px; align-items: center; }
.yd .sd-now-l { display: flex; flex-direction: column; gap: 8px; flex: 1 1 420px; min-width: 0; }
.yd .sd-when { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.yd .sd-cd { display: flex; align-items: baseline; flex-wrap: wrap; }
.yd .sd-cd b { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 500; font-size: 34px; color: var(--gold-2); }
.yd .sd-cd i { font-style: normal; font-size: 13px; color: var(--muted); margin: 0 10px 0 3px; }
.yd .sd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1 1 360px; }
.yd .sd-kpi { padding: 10px 12px; border: 1px solid var(--row); border-radius: 7px; background: #121316; display: flex; flex-direction: column; }
.yd .sd-kpi b { font-size: 20px; font-weight: 800; }
.yd .sd-kpi.warm { border-color: #4a3e29; background: #1f1c15; }
.yd .sd-kpi.warm b { color: var(--gold-2); }
.yd .sd-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 22px 18px; }
.yd .sd-pre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--row); font-size: 13px; color: var(--ink-2); }
.yd .sd-pre .y-btn { margin-left: auto; }
.yd .sd-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.yd .sd-side { flex: 1 1 360px; max-width: 420px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.yd .sd-form { display: flex; flex-direction: column; gap: 16px; }
.yd .sd-form .lbl, .yd .sd-seen .lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.yd .sd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.yd .sd-dt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.yd .sd-dt .in { color-scheme: dark; }
.yd .sd-preview { display: flex; flex-direction: column; gap: 10px; }
.yd .sd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.yd .sd-step { display: flex; flex-direction: column; gap: 5px; padding-right: 10px; font-size: 12.5px; color: var(--ink-2); position: relative; }
.yd .sd-step .sd-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--card); }
.yd .sd-step::before { content: ''; position: absolute; left: 16px; right: 4px; top: 5px; height: 2px; background: #4a3e29; }
.yd .sd-step:last-child::before { display: none; }
.yd .sd-step.warn .sd-dot { background: #f0be5a; } .yd .sd-step.warn .mono { color: #f0be5a; }
.yd .sd-step.bad .sd-dot { background: #ff9686; } .yd .sd-step.bad .mono { color: #ff9686; }
.yd .sd-step.good .sd-dot { background: #8edb84; } .yd .sd-step.good .mono { color: #8edb84; }
.yd .sd-say { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid #4a3e29; border-radius: 7px; background: #1c1810; }
.yd .sd-say b { font-size: 14px; color: var(--ink); }
.yd .sd-say .lbl { color: #c9a45c; }
.yd .sd-order { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--row); border-radius: 7px; background: #121316; font-size: 13px; color: var(--ink-2); }
.yd .sd-order > span:not(.lbl) { display: flex; gap: 10px; align-items: flex-start; }
.yd .sd-plan { padding: 12px 16px; border-bottom: 1px solid var(--row); display: flex; flex-direction: column; gap: 6px; }
.yd .sd-plan:last-child { border-bottom: 0; }
.yd .sd-seen { display: flex; flex-direction: column; gap: 12px; }
.yd .sd-phone { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid #2e2a22; background: radial-gradient(120% 90% at 30% 20%, #2a2a33 0%, #15161b 55%, #0b0c0f 100%); }
.yd .sd-ph-logo { position: absolute; left: 14px; top: 12px; font-size: 12.5px; font-weight: 700; color: var(--title); letter-spacing: .16em; }
.yd .sd-ph-box { position: absolute; right: 12px; top: 12px; bottom: 12px; width: 50%; border: 1px solid #6e5a35; border-radius: 8px; background: rgba(16, 15, 13, .9); padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center; }
.yd .sd-ph-t { font-size: 10px; color: #c9a45c; letter-spacing: .16em; }
.yd .sd-ph-box b { font-size: 12.5px; color: var(--ink); }
.yd .sd-ph-c { font-size: 18px; color: var(--gold-2); }
.yd .sd-ph-s { font-size: 10.5px; color: var(--muted); }
.yd .sd-ph-btn { margin-top: 4px; width: 80%; height: 24px; border-radius: 5px; background: #c9a45c; color: #17130b; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.yd .sd-ph-btn.off { background: #2a2520; color: #6f675a; }
.yd .sd-old { border: 1px solid var(--row); border-radius: 7px; background: #111215; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.yd .sd-old.row { flex-direction: row; align-items: center; gap: 10px; }
.yd .dot.warn { background: #e8a04a; }
.yd .sd-rules { display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 720px) {
  .yd .sd-two, .yd .sd-kpis { grid-template-columns: minmax(0, 1fr); }
  .yd .y-shut { padding-left: 16px; padding-right: 16px; }
}
.yd .sd-go { align-items: center; }
.yd .sd-go .said { margin: 0; }