/* bestbitcoincasinosturkey.com — «Tezgâh» teması.
 *
 * Ground is a warm charcoal rather than the usual near-black: the page is a
 * counter in a bureau de change, not a night sky. Three colours, one job
 * each. Turquoise — the word is Turkey's own — marks what was read in a
 * document. Gold marks what is written as a figure. Red is the way out, and
 * nothing else on the page is allowed to use it.
 *
 * Body text is set in a serif on purpose: this is a register to be read, not
 * a poster. Headings and figures are set in a grotesque with thick stems so
 * that the difference between reading and counting shows without thinking.
 */

:root {
  --zemin: #16120f;      /* the ground under everything */
  --tepe: #100d0b;       /* header and footer */
  --panel: #201a16;      /* boxes */
  --panel2: #2a221d;     /* boxes inside boxes */
  --cizgi: #3a2f27;
  --cizgi2: #2b231d;
  --tx: #f2ece4;
  --tx2: #bcaf9f;
  --tx3: #8d8073;
  --turkuaz: #17b3a3;    /* read in a document */
  --turkuaz-k: #0d7c72;
  --altin: #e8b23a;      /* written as a figure */
  --kirmizi: #e30a17;    /* the way out */
  --disp: "Bricolage Grotesque", system-ui, sans-serif;
  --govde: Faustina, Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --genis: 1220px;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--zemin); color: var(--tx);
  font: 400 17px/1.66 var(--govde);
  font-synthesis-weight: none;
}
img { max-width: 100%; height: auto }
a { color: var(--turkuaz); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px }

.kt-sar { max-width: var(--genis); margin: 0 auto; padding: 0 20px }
.kt-atla {
  position: absolute; left: -9999px; background: var(--altin); color: #1a1205;
  padding: 10px 16px; z-index: 40;
}
.kt-atla:focus { left: 12px; top: 12px }

/* The band. Red ground with two white marks set left of centre, where the
 * crescent and the star sit on the flag. It is the one place on the page
 * where white is used as a colour rather than as text. */
.kt-bant { height: 5px; background: linear-gradient(90deg,
  var(--kirmizi) 0 8.4%, #fdfdfb 8.4% 9.2%, var(--kirmizi) 9.2% 12.6%,
  #fdfdfb 12.6% 13.1%, var(--kirmizi) 13.1% 100%) }

/* ------------------------------------------------------------ topo --- */
.kt-ust { background: var(--tepe) }
.kt-ust-i { display: flex; align-items: center; gap: 24px;
  justify-content: space-between; min-height: 72px; flex-wrap: wrap }
.kt-logo { color: var(--tx); display: block }
.kt-logo:hover { text-decoration: none }
.kt-logo b { display: block; font: 800 27px/1 var(--disp); letter-spacing: -.015em }
.kt-logo i { font-style: normal; color: var(--turkuaz) }
.kt-logo em { font-style: normal; color: var(--tx) }
.kt-logo u { text-decoration: none; color: var(--kirmizi) }
.kt-logo span { display: block; margin-top: 5px; font: 500 10.5px/1 var(--mono);
  letter-spacing: .14em; color: var(--tx3) }
.kt-ust-f { display: flex; gap: 22px; margin: 0; font: 400 12.5px/1.3 var(--govde);
  color: var(--tx3) }
.kt-ust-f span { display: flex; flex-direction: column }
.kt-ust-f b { font: 700 19px/1 var(--disp); color: var(--altin);
  font-variant-numeric: tabular-nums }

/* ------------------------------------------------------------ menu --- */
.kt-menu { background: var(--panel); border-bottom: 1px solid var(--cizgi) }
.kt-menu-i { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none }
.kt-menu-i::-webkit-scrollbar { display: none }
.kt-menu a {
  color: var(--tx2); white-space: nowrap; padding: 13px 15px;
  font: 600 13px/1 var(--disp); letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.kt-menu a:hover { color: var(--tx); text-decoration: none; background: var(--panel2) }
.kt-menu a[aria-current] { color: var(--tx); border-bottom-color: var(--turkuaz) }

/* ----------------------------------------------------------- herói --- */
.kt-bas { background: var(--panel); border-bottom: 1px solid var(--cizgi);
  padding: 30px 0 32px }
.kt-kirinti { margin: 0 0 12px; font-size: 13.5px; color: var(--tx3) }
.kt-kirinti a { color: var(--tx2) }
.kt-ustyazi { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--altin) }
.kt-bas h1 { margin: 13px 0 0; font: 800 clamp(31px, 5vw, 50px)/1.06 var(--disp);
  letter-spacing: -.022em; text-wrap: balance; max-width: 19ch }
.kt-giris { margin: 16px 0 0; font-size: 18.5px; line-height: 1.6; color: var(--tx2);
  max-width: 66ch }
.kt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.kt-chip { font: 500 12px/1 var(--mono); color: var(--tx2);
  border: 1px solid var(--cizgi); padding: 7px 10px }
.kt-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px }
.kt-bt { padding: 11px 19px; font: 700 14.5px/1 var(--disp) }
.kt-bt-a { background: var(--turkuaz); color: #04170c }
.kt-bt-b { border: 1px solid var(--cizgi); color: var(--tx) }
.kt-bt:hover { text-decoration: none; filter: brightness(1.08) }

/* as duas saídas do primeiro ecrã: cor forte, um brilho que passa, e um
 * pequeno salto ao passar o rato. Tudo pára com prefers-reduced-motion. */
.kt-bt-go { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: 12px 21px; font-weight: 800;
  box-shadow: 0 4px 0 0 rgba(0,0,0,.3), 0 0 0 0 var(--brilho);
  animation: kt-nabiz 2.8s ease-in-out infinite;
  transition: transform .14s ease, box-shadow .14s ease }
.kt-bt-go > span { position: relative; z-index: 2 }
.kt-bt-go > i { position: absolute; z-index: 1; top: -60%; bottom: -60%; width: 36%;
  left: -45%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  animation: kt-parilti 3.6s ease-in-out infinite }
.kt-bt-go:hover { filter: none; transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(0,0,0,.3), 0 0 22px 2px var(--brilho) }
.kt-bt-go:active { transform: translateY(1px) }
.kt-go-rtp { --brilho: rgba(212,33,44,.55);
  background: linear-gradient(120deg, #ff6a2a, var(--kirmizi) 58%, #96101f) }
.kt-go-bonus { --brilho: rgba(240,192,32,.6); color: #221803;
  background: linear-gradient(120deg, #ffe07a, var(--altin) 50%, #c98a12);
  animation-delay: 1.4s }
.kt-go-bonus > i { animation-delay: 1.4s;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent) }
@keyframes kt-nabiz {
  0%, 100% { box-shadow: 0 4px 0 0 rgba(0,0,0,.3), 0 0 0 0 var(--brilho) }
  50% { box-shadow: 0 4px 0 0 rgba(0,0,0,.3), 0 0 18px 1px var(--brilho) } }
@keyframes kt-parilti { 0% { left: -45% } 30%, 100% { left: 118% } }

/* ----------------------------------------------------------- faixa --- */
.kt-serit { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  margin: 24px 0 8px }
.kt-f { background: var(--panel); border: 1px solid var(--cizgi); padding: 16px 10px;
  text-align: center }
.kt-f svg { display: block; margin: 0 auto 8px; width: 30px; height: 30px; color: var(--turkuaz) }
.kt-f b { display: block; font: 700 31px/1 var(--disp); font-variant-numeric: tabular-nums }
.kt-f span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.3;
  color: var(--tx3) }
.kt-serit-f { margin: 10px 0 22px; font-size: 13.5px; color: var(--tx3); max-width: 96ch }

/* ---------------------------------------------------------- grelha --- */
.kt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 40px;
  padding-bottom: 46px; align-items: start }
.kt-grid-1 { grid-template-columns: minmax(0, 1fr) }
main { min-width: 0 }

.kt-icindekiler { background: var(--panel); border: 1px solid var(--cizgi);
  padding: 16px 18px; margin: 0 0 28px }
.kt-icindekiler b { display: block; font: 600 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 10px }
.kt-icindekiler ol { margin: 0; padding: 0; list-style: none; counter-reset: i;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 3px 18px }
.kt-icindekiler li { counter-increment: i; font-size: 14.5px }
.kt-icindekiler li::before { content: counter(i, decimal-leading-zero) " ";
  font: 500 12px var(--mono); color: var(--altin) }
.kt-icindekiler a { color: var(--tx2) }

/* --------------------------------------------------------- secções --- */
.kt-bol { margin: 0 0 40px; scroll-margin-top: 16px }
.kt-bol-t { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--cizgi); padding-bottom: 11px; margin-bottom: 22px }
.kt-bol-n { font: 500 13px/1 var(--mono); color: var(--altin);
  border: 1px solid var(--cizgi); padding: 6px 8px }
.kt-bol h2 { margin: 0; font: 800 clamp(23px, 3vw, 31px)/1.16 var(--disp);
  letter-spacing: -.018em; text-wrap: balance }
.kt-bol-s { margin-left: auto; font: 500 11.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3) }
.kt-bol-c > *:first-child { margin-top: 0 }
.kt-bol-c h3 { margin: 30px 0 10px; font: 700 20px/1.3 var(--disp) }
.kt-bol-c p { margin: 0 0 16px; max-width: 74ch }
.kt-bol-c ul, .kt-bol-c ol { margin: 0 0 18px; padding-left: 22px; max-width: 74ch }
.kt-bol-c li { margin-bottom: 8px }
.kt-ince { font-size: 14px; color: var(--tx3); max-width: 84ch }
.kt-not { background: var(--panel); border-left: 3px solid var(--altin);
  padding: 15px 18px; margin: 0 0 20px; font-size: 15.5px; color: var(--tx2) }

/* ----------------------------------------------------------- ficha --- */
.kt-liste { display: grid; gap: 14px; margin: 0 0 22px }
.kt-kayit { display: grid; grid-template-columns: 96px 168px minmax(0, 1fr);
  gap: 18px; background: var(--panel); border: 1px solid var(--cizgi);
  padding: 16px; align-items: start }
.kt-kayit-1 { border-color: var(--turkuaz); box-shadow: inset 3px 0 0 0 var(--turkuaz) }
.kt-sira { text-align: center; background: var(--panel2); padding: 12px 6px }
.kt-sira i { display: block; font: 500 10px/1 var(--mono); letter-spacing: .12em;
  color: var(--tx3); font-style: normal }
.kt-sira b { display: block; font: 800 38px/1 var(--disp); margin: 2px 0 8px;
  font-variant-numeric: tabular-nums }
.kt-puan { display: block; font: 700 21px/1 var(--disp); color: var(--altin);
  font-variant-numeric: tabular-nums }
.kt-puan em { font-style: normal; font-size: 12px; color: var(--tx3) }
.kt-puan-l { display: block; margin-top: 4px; font: 500 9.5px/1 var(--mono);
  letter-spacing: .14em; color: var(--tx3) }
.kt-marka { aspect-ratio: 3/2; display: grid; place-items: center;
  font: 800 22px var(--disp); color: #08150d;
  background: linear-gradient(135deg, var(--tom), #0d1b13) }
.tem-logo { background: var(--panel2); position: relative; overflow: hidden;
  padding: 9px 12px 9px 15px }
.tem-logo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--tom) }
.tem-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain }
.tem-logo.claro { background: #f1f4f1 }
.kt-govde h3 { margin: 0 0 6px; font: 700 21px/1.2 var(--disp) }
.kt-govde h3 a { color: var(--tx) }
.kt-govde h3 span { font: 500 12px var(--mono); color: var(--tx3); white-space: nowrap }
.kt-satir { margin: 0 0 11px; font-size: 15.5px; color: var(--tx2) }
.kt-etiketler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px }
.kt-etiket { font: 500 11.5px/1 var(--mono); color: var(--tx2);
  border: 1px solid var(--cizgi); padding: 6px 8px }
.kt-etiket.q { background: var(--altin); color: #221803; border-color: var(--altin) }

.kt-barlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 13px }
.kt-bar i { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx3); font-style: normal; margin-bottom: 5px }
.kt-bar u { display: block; text-decoration: none; height: 7px;
  background: var(--cizgi2); overflow: hidden }
.kt-bar s { display: block; height: 100%; text-decoration: none; background: var(--turkuaz) }
.kt-bar.cheia s { background: var(--altin) }
.kt-bar.vazia u { background: #2a1416 }
.kt-bar b { display: block; margin-top: 4px; font: 700 13px/1 var(--disp);
  font-variant-numeric: tabular-nums }
.kt-bar em { font-style: normal; font-size: 10.5px; color: var(--tx3) }

.kt-kat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 13px; padding: 9px 12px; background: var(--panel2);
  border-left: 3px solid var(--altin) }
.kt-kat i { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx3); font-style: normal }
.kt-kat b { font: 800 22px/1 var(--disp); color: var(--altin);
  font-variant-numeric: tabular-nums }
.kt-kat span { font-size: 13px; color: var(--tx3) }
.kt-kat-bos { border-left-color: var(--cizgi) }
.kt-kat-bos b { color: var(--tx3) }

.kt-cikislar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.kt-go { background: var(--kirmizi); color: #fff; font: 700 14px/1 var(--disp);
  padding: 11px 20px }
.kt-go:hover { text-decoration: none; filter: brightness(1.1) }
.kt-oku { font-size: 14px; color: var(--tx2); border-bottom: 1px solid var(--cizgi) }
.kt-oku:hover { color: var(--turkuaz) }

/* --------------------------------------------------------- cartões --- */
.kt-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px; margin: 0 0 22px }
.kt-kart { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px;
  align-items: center; background: var(--panel); border: 1px solid var(--cizgi);
  padding: 13px }
.kt-kart:hover { text-decoration: none; border-color: var(--turkuaz) }
.kt-kart-p { aspect-ratio: 1; display: grid; place-items: center;
  font: 800 15px var(--disp); color: #08150d;
  background: linear-gradient(135deg, var(--tom), #0d1b13) }
.kt-kart-t b { display: block; font: 700 15.5px/1.2 var(--disp); color: var(--tx) }
.kt-kart-t span { display: block; margin-top: 4px; font-size: 13px; color: var(--tx3) }

/* --------------------------------------------------------- números --- */
.kt-sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin: 0 0 22px }
.kt-sayilar > div { background: var(--panel); border-top: 3px solid var(--turkuaz);
  padding: 15px }
.kt-sayilar b { display: block; font: 800 33px/1 var(--disp); color: var(--altin);
  font-variant-numeric: tabular-nums }
.kt-sayilar span { display: block; margin-top: 6px; font-size: 14px; color: var(--tx2) }
.kt-sayilar i { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal;
  color: var(--tx3) }

/* --------------------------------------------------------- tabelas --- */
.kt-tablo-s { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--cizgi) }
.kt-tablo { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px }
.kt-tablo th, .kt-tablo td { padding: 10px 13px; border-bottom: 1px solid var(--cizgi2);
  text-align: left }
.kt-tablo thead th { background: var(--panel2); font: 600 11.5px/1.3 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx3);
  position: sticky; top: 0 }
.kt-tablo tbody th { font-weight: 600; color: var(--tx) }
.kt-tablo td.num { font-family: var(--mono); font-size: 13px; color: var(--tx2);
  font-variant-numeric: tabular-nums }
.kt-tablo .q { color: var(--altin) }
.kt-tablo tbody tr:nth-child(odd) { background: rgba(255,255,255,.015) }

/* ----------------------------------------------------------- conta --- */
.kt-hesap { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: c }
.kt-hesap li { counter-increment: c; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline;
  padding: 13px 15px; background: var(--panel); border-left: 3px solid var(--turkuaz);
  margin-bottom: 6px }
.kt-hesap li:last-child { border-left-color: var(--altin) }
.kt-hesap b { font: 700 16px/1.3 var(--disp) }
.kt-hesap-n { font: 800 22px/1 var(--disp); color: var(--altin); text-align: right;
  font-variant-numeric: tabular-nums }
.kt-hesap-x { grid-column: 1 / -1; font-size: 13.5px; color: var(--tx3) }

/* ---------------------------------------------------------- passos --- */
.kt-adimlar { list-style: none; margin: 0 0 22px; padding: 0 }
.kt-adimlar li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--cizgi2) }
.kt-adimlar i { font: 500 13px/1 var(--mono); color: var(--altin); font-style: normal;
  padding-top: 4px }
.kt-adimlar b { display: block; font: 700 16px/1.3 var(--disp); margin-bottom: 4px }
.kt-adimlar span { font-size: 15px; color: var(--tx2) }

/* --------------------------------------------------------- figuras --- */
.kt-fig, .kt-img { margin: 0 0 24px; background: var(--panel);
  border: 1px solid var(--cizgi) }
.kt-fig svg { display: block; width: 100%; height: auto }
.kt-img img { display: block; width: 100%; height: auto }
.kt-img.alta img { max-height: 520px; object-fit: cover; object-position: center }
.kt-fig figcaption, .kt-img figcaption { padding: 12px 15px; font-size: 13.5px;
  color: var(--tx3); border-top: 1px solid var(--cizgi2) }

/* --------------------------------------------------------- moedas ---- */
.kt-paralar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px }
.kt-para { font: 500 12px/1 var(--mono); color: var(--tx2);
  border: 1px solid var(--cizgi); padding: 7px 9px }

/* ---------------------------------------------------------- saída ---- */
.kt-cikis { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between; background: var(--panel2);
  border: 1px solid var(--cizgi); border-left: 3px solid var(--kirmizi);
  padding: 17px 19px; margin: 0 0 24px }
.kt-cikis b { display: block; font: 700 17px/1.3 var(--disp) }
.kt-cikis span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--tx2) }
.kt-cikis-go { background: var(--kirmizi); color: #fff; font: 700 14.5px/1 var(--disp);
  padding: 12px 22px; white-space: nowrap }
.kt-cikis-go:hover { text-decoration: none; filter: brightness(1.1) }

/* ------------------------------------------------------------ faq ---- */
.kt-faq details { border-bottom: 1px solid var(--cizgi2) }
.kt-faq summary { cursor: pointer; padding: 15px 0; font: 700 16.5px/1.4 var(--disp);
  list-style: none }
.kt-faq summary::-webkit-details-marker { display: none }
.kt-faq summary::before { content: "+"; display: inline-block; width: 22px;
  color: var(--altin); font-family: var(--mono) }
.kt-faq details[open] summary::before { content: "–" }
.kt-faq details > div { padding: 0 0 16px 22px; color: var(--tx2); max-width: 74ch }

/* --------------------------------------------------------- lateral --- */
.kt-yan { position: sticky; top: 14px }
.kt-yan-h { margin: 0 0 0; font: 700 12px/1 var(--disp); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx3); padding-bottom: 9px;
  border-bottom: 2px solid var(--cizgi) }
.kt-yan-c { margin: 0 0 28px }
.kt-yan-l { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 11px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--cizgi2) }
.kt-yan-so { grid-template-columns: minmax(0, 1fr) }
.kt-yan-l:last-child { border-bottom: 0 }
.kt-yan-p { aspect-ratio: 3/2; display: grid; place-items: center;
  font: 800 15px var(--disp); color: #08150d;
  background: linear-gradient(135deg, var(--tom), #0d1b13) }
.kt-yan-p.tem-logo { padding: 5px 7px 5px 10px }
.kt-yan-p.tem-logo::before { width: 2px }
.kt-yan-l b { display: block; font: 700 15px/1.2 var(--disp) }
.kt-yan-l b a { color: var(--tx) }
.kt-yan-i { display: block; margin: 4px 0 6px; font-size: 13px; color: var(--tx3) }
.kt-yan-so .kt-yan-i { margin-bottom: 0 }
.kt-yan-s { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.kt-yan-go { background: var(--kirmizi); color: #fff; font: 700 11.5px/1 var(--disp);
  padding: 5px 12px; white-space: nowrap }
.kt-yan-go:hover { text-decoration: none; filter: brightness(1.1) }
.kt-yan-oku { font: 500 11.5px/1 var(--mono); color: var(--tx3);
  border-bottom: 1px solid var(--cizgi) }
.kt-yan-f { margin: 10px 0 0; font-size: 13px; color: var(--tx3) }

/* --------------------------------------------------------- seguir ---- */
.kt-sonraki { background: var(--panel); border: 1px solid var(--cizgi); padding: 18px 20px }
.kt-sonraki p { margin: 0 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx3) }
.kt-sonraki ul { margin: 0; padding-left: 20px }
.kt-sonraki li { margin-bottom: 6px }

/* ---------------------------------------------------------- rodapé --- */
.kt-alt { background: var(--tepe); color: var(--tx3); padding: 0 0 86px;
  font-size: 14px }
.kt-alt .kt-sar { padding-top: 28px }
.kt-alt-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px }
.kt-alt h4 { margin: 0 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx2) }
.kt-alt ul { margin: 0; padding: 0; list-style: none }
.kt-alt li { margin-bottom: 6px }
.kt-alt a { color: var(--tx3) }
.kt-alt a:hover { color: var(--turkuaz) }
.kt-alt-l { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--cizgi2);
  font-size: 12.5px; line-height: 1.6; max-width: 110ch }

/* ------------------------------------------------------------ doca --- */
.kt-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--tepe); border-top: 1px solid var(--cizgi);
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)); text-align: center }
.kt-dock a { display: inline-block; background: var(--kirmizi); color: #fff;
  font: 700 14.5px/1 var(--disp); padding: 12px 26px }
.kt-dock a:hover { text-decoration: none; filter: brightness(1.1) }

/* ---------------------------------------------------------- estreito - */
@media (max-width: 1080px) {
  .kt-grid { grid-template-columns: minmax(0, 1fr); gap: 34px }
  .kt-yan { position: static }
  .kt-serit { grid-template-columns: repeat(3, 1fr) }
  .kt-ust-f { display: none }
}
@media (max-width: 760px) {
  body { font-size: 16.5px }
  .kt-kayit { grid-template-columns: 72px minmax(0, 1fr); gap: 13px }
  .kt-marka { grid-column: 2; max-width: 150px }
  .kt-govde { grid-column: 1 / -1 }
  .kt-sira b { font-size: 31px }
  .kt-barlar { grid-template-columns: repeat(2, 1fr) }
  .kt-serit { grid-template-columns: repeat(2, 1fr) }
  .kt-bol-s { margin-left: 0; width: 100% }
  .kt-bas h1 { max-width: none }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
}

/* ------------------------------------------------- os rolos do herói --- */
/* Três rolos que rodam e param, rodam e param. Nenhum JavaScript: a fita
 * desloca-se exactamente seis alturas de célula, que é o comprimento do
 * conjunto de símbolos, por isso o fim de cada volta cai em cima do mesmo
 * desenho por onde começou e a repetição não tem costura.
 *
 * O estado parado é o que está escrito fora da animação: com
 * prefers-reduced-motion a folha inteira desliga `animation`, e o que fica
 * tem de ser um painel com três símbolos à vista, não uma caixa vazia. */
.kt-bas-2 { display: grid; gap: 34px; align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 360px) }
.kt-mak { --cel: 74px; border: 1px solid var(--cizgi); background: var(--zemin);
  box-shadow: 0 18px 40px -26px #000 }
.kt-mak-kapak { display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--cizgi) }
.kt-mak-kapak .kt-bant { flex: 1 }
.kt-mak-ad { font: 500 11px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx3) }
.kt-mak-cam { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  padding: 7px; background:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.55)) }
.kt-mak-rulo { height: calc(var(--cel) * 3); overflow: hidden;
  background: #101f16; border: 1px solid var(--cizgi2) }
.kt-mak-serit { display: block }
.kt-mak-hucre { display: grid; place-items: center; height: var(--cel) }
.kt-mak-hucre svg { width: 42px; height: 42px }
.kt-s-para { color: var(--altin) }
.kt-s-yedi { color: var(--kirmizi) }
.kt-s-elmas { color: #55d6f0 }
.kt-s-can { color: #f0a020 }
.kt-s-nal { color: var(--tx2) }
.kt-s-yildiz { color: var(--turkuaz) }
.kt-go-mak { --brilho: rgba(31,170,82,.6); display: block; margin: 12px;
  text-align: center; color: #04170c;
  background: linear-gradient(120deg, #6ee89a, var(--turkuaz) 52%, #0c6b33) }
.kt-go-mak > i { animation-delay: .7s }
.kt-mak-dip { margin: 0 12px 13px; font-size: 12.5px; line-height: 1.5; color: var(--tx3) }

@media (prefers-reduced-motion: no-preference) {
  .kt-mak-s1 { animation: kt-rulo1 7.4s infinite }
  .kt-mak-s2 { animation: kt-rulo2 7.4s infinite }
  .kt-mak-s3 { animation: kt-rulo3 7.4s infinite }
}
/* A curva vive dentro dos fotogramas: a fita arranca, ganha velocidade e
 * trava; depois fica quieta o resto da volta. Uma curva única para toda a
 * animação faria o descanso arrastar-se em câmara lenta. */
@keyframes kt-rulo1 {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  46%, 100% { transform: translateY(calc(var(--cel) * -6)) }
}
@keyframes kt-rulo2 {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  58%, 100% { transform: translateY(calc(var(--cel) * -6)) }
}
@keyframes kt-rulo3 {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  70%, 100% { transform: translateY(calc(var(--cel) * -6)) }
}

@media (max-width: 900px) {
  .kt-bas-2 { grid-template-columns: minmax(0, 1fr) }
  .kt-mak { --cel: 62px; max-width: 420px }
  .kt-mak-hucre svg { width: 36px; height: 36px }
}

/* ------------------------------------------------- troca de língua ----- */
/* Empurrada para o fim da barra e marcada com as três cores: é a única
 * entrada do menu que não leva a uma secção do registo, e misturá-la com
 * as outras faria o leitor entrar noutra língua a pensar que mudava de
 * assunto. */
.kt-menu a.kt-dil { margin-left: auto; color: var(--tx);
  border-bottom-color: var(--altin) }
.kt-menu a.kt-dil::before { content: ""; display: inline-block;
  width: 15px; height: 10px; margin-right: 8px; vertical-align: -1px;
  background: linear-gradient(90deg, var(--turkuaz) 0 40%, var(--kirmizi) 40% 100%) }
@media (max-width: 720px) { .kt-menu a.kt-dil { margin-left: 0 } }