.leftwindow{
    color:#DAEFB3;
    font-family: 'Consolas';
    font-size: calc(6px + 0.8vw + 0.8vh);
    vertical-align: middle;
}

.bottomline{
    color: #839192;
    font-family: 'Consolas';
    font-size: 12px;

    position: absolute;
    bottom: 0;
    left:0;
    z-index: -1;
}

.col{
vertical-align: middle;

}
.abut{
font-size: calc(8px + 0.6vw + 0.6vh);
font-family: inherit;

}

.buttons{
text-align: left;

}

/* ---------------------------------------------------------------
   Secondary buttons (DEMO / Intro). They keep their original colour
   coding -- green for the demo, red for the YouTube intro -- but
   deeply darkened, so they read as solid buttons without competing
   with the gold login button. Full strength on hover / focus / tap.
   --------------------------------------------------------------- */
.sbut{
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px 6px 0;
    padding: .45em 1em;
    border: 1px solid var(--sb-bd);
    border-radius: 10px;
    background-color: var(--sb-bg);
    color: var(--sb-fg);
    font-size: calc(7.5px + 0.5vw + 0.5vh);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.sbut--demo{
    --sb-bg: #1F4A25;
    --sb-bg-hover: #2E6E37;
    --sb-fg: #B7D8B9;
    --sb-bd: rgba(183, 216, 185, .16);
}
.sbut--intro{
    --sb-bg: #6B2A28;
    --sb-bg-hover: #953A37;
    --sb-fg: #E0B9B8;
    --sb-bd: rgba(224, 185, 184, .16);
}
.sbut:visited{ color: var(--sb-fg); }
.sbut:hover,
.sbut:focus-visible{
    background-color: var(--sb-bg-hover);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    text-decoration: none;
}
.sbut:active{
    background-color: var(--sb-bg-hover);
    color: #fff;
    transform: translateY(1px);
}
.sbut i{
    margin-right: .35em;
    color: inherit;
}

/* ---------------------------------------------------------------
   3D call-to-action button. Only the WORD rotates through
   "Here we go!" / "LOGIN" / "GIRIS"; the door-arrow icon is fixed
   beside it, so a student who cannot read any of the three labels
   still has one constant cue that this is the way in.
   --------------------------------------------------------------- */
.gobtn{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px 6px 0;
    padding: 0;
    border: none;
    outline-offset: 4px;
    background: transparent;
    cursor: pointer;
    font-size: calc(9px + 0.7vw + 0.7vh);
    font-family: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.gobtn:hover,
.gobtn:visited,
.gobtn:active{
    text-decoration: none;
}

/* the ground shadow the button lifts off from */
.gobtn__shadow{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px;
    background: rgba(0, 0, 0, .35);
    transform: translateY(3px);
    transition: transform 220ms cubic-bezier(.3, .7, .4, 1);
    will-change: transform;
}

/* the dark extruded side of the button = the "3D" thickness */
.gobtn__edge{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px;
    background: linear-gradient(to left,
        #7a4a00 0%, #c98a00 8%, #c98a00 92%, #7a4a00 100%);
}

/* the top face you actually press */
.gobtn__front{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    padding: .55em 1.15em;
    border-radius: 14px;
    background: linear-gradient(160deg, #ffe27a 0%, #ffc107 45%, #ff9800 100%);
    color: #2b1a00;
    font-weight: 800;
    letter-spacing: .02em;
    transform: translateY(-7px);
    transition: transform 220ms cubic-bezier(.3, .7, .4, 1);
    will-change: transform;
}

.gobtn:hover .gobtn__front{ transform: translateY(-10px); }
.gobtn:hover .gobtn__shadow{ transform: translateY(5px); }
.gobtn:active .gobtn__front{
    transform: translateY(-2px);
    transition-duration: 34ms;
}
.gobtn:active .gobtn__shadow{
    transform: translateY(1px);
    transition-duration: 34ms;
}

/* attention halo so the eye lands here first */
.gobtn__edge::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px;
    box-shadow: 0 0 0 0 rgba(255, 193, 7, .65);
    animation: gobtn-halo 2.4s ease-out infinite;
}

/* the door/arrow cue: sits OUTSIDE the prism so it stays still
   while the word rotates -- the one part of the button that never
   changes, for students who cannot read any of the three labels */
.gobtn__icon{
    flex: 0 0 auto;
    font-size: .95em;
}

/* --- the rotating label ------------------------------------
   Three faces on a triangular prism: "Here we go!" -> "LOGIN"
   -> "GIRIS" (Turkish). --r is the prism apothem: face height
   / (2 * tan 60deg), so the faces meet cleanly at the edges. */
.gobtn__flip{
    position: relative;
    flex: 0 0 auto;
    min-width: 7.1em;
    height: 1.35em;
    perspective: 700px;
}
.gobtn__spin{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    --r: .39em;
    transform-style: preserve-3d;
    animation: gobtn-flip 6s cubic-bezier(.6, 0, .3, 1) infinite;
}
.gobtn__face{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.gobtn__face--go   { transform: rotateX(0deg)    translateZ(var(--r)); }
.gobtn__face--login{ transform: rotateX(-120deg) translateZ(var(--r)); }
.gobtn__face--tr   { transform: rotateX(-240deg) translateZ(var(--r)); }

@keyframes gobtn-flip{
    0%, 26%  { transform: rotateX(0deg); }
    33%, 59% { transform: rotateX(120deg); }
    66%, 92% { transform: rotateX(240deg); }
    100%     { transform: rotateX(360deg); }
}

@keyframes gobtn-halo{
    0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, .6); }
    70%  { box-shadow: 0 0 0 16px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* no spinning / pulsing for users who ask for less motion:
   the three labels still take turns, they just swap in place */
@media (prefers-reduced-motion: reduce){
    .gobtn__spin{ animation: none; transform: none; }
    .gobtn__edge::after{ animation: none; }
    .gobtn__face{ backface-visibility: visible; transform: none; }
    .gobtn__face--go   { animation: gobtn-swap-1 6s step-end infinite; }
    .gobtn__face--login{ animation: gobtn-swap-2 6s step-end infinite; }
    .gobtn__face--tr   { animation: gobtn-swap-3 6s step-end infinite; }
    @keyframes gobtn-swap-1{ 0%{opacity:1} 33.3%{opacity:0} 100%{opacity:0} }
    @keyframes gobtn-swap-2{ 0%{opacity:0} 33.3%{opacity:1} 66.6%{opacity:0} 100%{opacity:0} }
    @keyframes gobtn-swap-3{ 0%{opacity:0} 66.6%{opacity:1} 100%{opacity:1} }
}