body {


  color: #303050;

  font-family: arial, helvetica, sans-serif;

  font-size: 10pt;
   background-image: url("kep/hatter.jpg");

}
body.gyerek {
    background-image: url("kep/hatter.jpg");
}


body.felso {
    background-image: url("../kep/hatter.jpg");
}


.button-01 {
  background-color: initial;
  background-image: linear-gradient(-180deg, #FF7E31, #E62C03);
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: Inter, -apple-system, system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  height: 30px;
  line-height: 30px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 100%;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
}

.button-01:hover {
  box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
}

.button-26,
.button-27 {
  appearance: none;
  border: none;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 6px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  padding: 3px 7px;
  height: 24px;
  width: 180px;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s, transform 0.15s;
  user-select: none;

}

.button-26b {
  appearance: none;
  border: none;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 6px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 3px 7px;
  height: 48px;
  width: 180px;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s, transform 0.15s;
  user-select: none;

}

.button-26:focus,
.button-26b:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-27:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

/* button-27: kék → lila átmenet */
.button-27 {
  background: linear-gradient(135deg, #4f8ef7, #7b5bf7);
}

.button-27:hover {
  background: linear-gradient(135deg, #457fe0, #6d4fe0);
  transform: translateY(-2px);
}


.button-27:active {
  transform: scale(0.96);
  transform: translateY(2px);
}

/* button-26: zöld → türkiz átmenet */
.button-26,
.button-26b {
  background: linear-gradient(135deg, #20c997, #17a2b8);
}

.button-26:hover,
.button-26b:hover {
  background: linear-gradient(135deg, #1bb190, #1491a3);
  transform: translateY(-2px);
}

.button-26:active,
.button-26b:active {
  transform: scale(0.96);
  transform: translateY(2px);
}

.button-28 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  height: 24px;
  width: 180px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 6px;
  padding-right: 6px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 12px;
}

.button-28:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-28:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-28:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}



.button-29 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #ffb86c 0, #ff6b6b 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  height: 24px;
  width: 180px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 6px;
  padding-right: 6px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 12px;
}

.button-29:focus {
  box-shadow: #ff6b6b 0 0 0 1.5px inset,
    rgba(45, 35, 66, .4) 0 2px 4px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    #ff6b6b 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    #ff6b6b 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: #ff6b6b 0 3px 7px inset;
  transform: translateY(2px);
}











.button-30 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #ffb86c 0, #ff6b6b 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono", monospace;
  height: 48px;
  width: 200px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 6px;
  padding-right: 6px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow, transform;
  font-size: 24px;
}

.button-30:focus {
  box-shadow: #ff6b6b 0 0 0 1.5px inset,
    rgba(45, 35, 66, .4) 0 2px 4px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    #ff6b6b 0 -3px 0 inset;
}

.button-30:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px,
    rgba(45, 35, 66, .3) 0 7px 13px -3px,
    #ff6b6b 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-30:active {
  box-shadow: #ff6b6b 0 3px 7px inset;
  transform: translateY(2px);
}

.hang_ablak {

  display: none;
}

.info_ablak {
  display: none;
  /* alapból nem látszik! */
  position: absolute;
  /* nem foglal helyet, lebeg */
  background: #fff;
  border: 1px solid #444;
  padding: 6px;
  z-index: 9999;
  /* minden elé kerül */
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}



.ablak {
  border: 1px solid #006;
  background-color: #fff;
  width: 150px;
}

.button {
  border: 1px solid #006;
  background: #9cf;
  width: 150px;
}

.button2 {
  background: #fea;
  width: 100%;
  height: 20px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
}

.button2mat {
  background: #ccf;
  width: 100%;
  height: 20px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
}

.button2ang {
  background: #fcc;
  width: 100%;
  height: 20px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
}

.button2b {
  background: #f88;
  width: 100%;
  height: 20px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
}

.button3 {
  background: #fea;
  width: 120px;
  height: 20px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
}

.button4 {
  background: #fea;
  width: 160px;
  height: 20px;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
}

.button5 {
  border: 1px solid #006;
  background: #9c8;
  width: 120px;
  height: 40px;
  font-size: 16pt;
}

.button6 {
  background: #fea;
  width: 160px;
  height: 25px;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}

.button7 {
  background: #bfa;
  height: 75px;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}

.button8 {
  background: #efa;
  height: 75px;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}

.button9 {
  background: #fea;
  width: 90px;
  height: 30px;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}


.cella1 {
  font-size: 10pt;
  text-align: center;
  font-family: arial, helvetica, sans-serif;
}

.strong {
  font-weight: bold;
}

.slidecontainer {
  width: 100%;
}

.slider {

  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {

  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.nagyzarojel {
  display: inline-block;
  font-size: 1.0em;
  font-weight: bold;
  transform: scaleY(1.3);
  transform-origin: center;
  vertical-align: middle;
  line-height: 0.8;

}



#matek {
  font-family: "JetBrains Mono", monospace;
  border-collapse: collapse;
  justify-content: center;
  /*background-color: #FFFFFF;*/
  background-color: #EEF3F7;
  vertical-align: middle;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.10);
}

/* A feladatok belső táblázatvonalainak eltüntetése */
#matek table,
#matek tbody,
#matek tr,
#matek td,
#matek th {
  border: none !important;
}

#matek td,
#matek th {
  border: 0px;
  padding: 4px;
  text-align: center;
}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;

}

#customers td,
#customers th {
  border: 1px solid #ddd;
  padding: 4px;
}

#customers1 tr:nth-child(even) {
  background-color: #D6EEEE;
}

#customers1 tr:hover {
  background-color: #ddd;
}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

#negyzetracs {

  table {
    border-collapse: collapse;
  }

  td input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* ne növelje túl a cellát */
    border: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  td {
    width: 30px;
    height: 30px;
    border: 1px solid blue;
    background: white;
    text-align: center;

  }

  tr:nth-child(2) td:nth-child(-n+5) {
    border-bottom: 4px solid black;
  }

}

#magyarazo_doboz {
  max-width: 480px;
  margin: 10px auto;
  padding: 10px;
  background-color: #fdf2f8;
  border: 1px solid #c0392b;
  border-radius: 8px;
  line-height: 1.3;
  font-family: sans-serif;
}

#magyarazo_doboz_szeles {
  max-width: 620px;
  margin: 10px auto;
  padding: 10px;
  background-color: #fdf2f8;
  border: 1px solid #c0392b;
  border-radius: 8px;
  line-height: 1.3;
  font-family: sans-serif;
}

#summary {
  color: #c0392b;
  font-weight: bold;
  font-size: 0.9em;
  cursor: pointer;
  outline: none;

}


input::placeholder {
  font-size: 0.82em;
  color: #888;
  font-style: italic;
}

/* =====================================================
   Matektúra kezdőoldal – reszponzív vár
   ===================================================== */

body {
  margin: 0;
  padding: 0;
  background: #EEF3F7;
  /*biztonsági háttérszín*/
  background-image: url("kep/hatterkep3.png");
  /* a kép elérési útja*/
  background-repeat: repeat;
  background-size: 900px auto;
  background-position: left top;
  background-attachment: fixed;
}


/* A kép befoglalója */
.var-container {
  position: relative;

  width: 100%;
  max-width: 1132px;

  margin: 0 auto;
}


/* Maga a várkép */
.var-kep {
  display: block;

  width: 100%;
  height: auto;
}


/* Kattintható kapu */
.kapu {
  position: absolute;

  left: 54%;
  top: 67%;

  width: 5%;
  height: 8%;

  cursor: pointer;
}



@media (max-width: 768px) {

  .kapu {
    left: 52%;
    top: 63%;

    width: 10%;
    height: 15%;
  }
}


.belepes-hatter {
  width: 100%;
  max-width: 1130px;
  min-height: 623px;

  margin: 0 auto;

  background-image: url("kep/taj12tabla.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  position: relative;
}

.belepes-doboz {
  position: absolute;

  width: 250px;

  left: 650px;
  top: 450px;

  text-align: center;
}

.belepes-doboz form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mezo {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.mezo label {
  width: 70px;
  text-align: right;
  margin-right: 8px;
}

.mezo input {
  width: 150px;
}

.belepes-doboz input[type="submit"] {
  margin-top: 8px;
}

.belepes-doboz a {
  display: inline-block;
  margin-top: 10px;
}

/* Beúszó belépési üzenet */
.belepes-uzenet {
    position: absolute;
    top: 5%;
    right: 3%;
    z-index: 10;

    width: min(340px, 80%);
    box-sizing: border-box;
    padding: 22px 20px 18px;

    color: #3b2816;
    background: linear-gradient(
        135deg,
        #fff1c9,
        #e8c98e
    );

    border: 3px solid #805426;
    border-radius: 12px;
    box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.4);

    font-family: Georgia, serif;
    text-align: center;

    /* Kezdetben a képernyőn kívül van */
    opacity: 0;
    transform: translateX(120%);
    visibility: hidden;

    transition:
        transform 0.8s ease,
        opacity 0.8s ease,
        visibility 0.8s;
}

/* Amikor az üzenet láthatóvá válik */
.belepes-uzenet.uzenet-lathato {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.belepes-uzenet strong {
    display: block;
    font-size: 21px;
    margin-bottom: 10px;
}

.belepes-uzenet p {
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0 14px;
}

.uzenet-nyil {
    display: block;
    color: #7a301c;
    font-weight: bold;
    font-size: 17px;
    animation: kapu-jelzes 1.2s ease-in-out infinite alternate;
}

/* A kapura mutató szöveg finom kiemelése */
@keyframes kapu-jelzes {
    from {
        opacity: 0.65;
    }
    to {
        opacity: 1;
    }
}

/* Bezáró gomb */
.uzenet-bezar {
    position: absolute;
    top: 4px;
    right: 8px;

    border: none;
    background: transparent;
    color: #59391c;

    font-size: 26px;
    cursor: pointer;
}

/* Mobiltelefon */
@media (max-width: 600px) {
    .belepes-uzenet {
        top: 2%;
        right: 2%;
        width: min(290px, 85%);
        padding: 18px 14px 14px;
    }

    .belepes-uzenet strong {
        font-size: 18px;
    }

    .belepes-uzenet p {
        font-size: 14px;
    }

    .uzenet-nyil {
        font-size: 15px;
    }
}

/* Mozgáscsökkentést kérő felhasználóknak */
@media (prefers-reduced-motion: reduce) {
    .belepes-uzenet,
    .uzenet-nyil {
        transition: none;
        animation: none;
    }
}