@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100;1,300&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:wght@400;700&display=swap');



body, html {

    margin: 0;

    padding: 0;

    height: 100%;

    font-family: 'Lato';

    color: #262626;

    overflow-x: hidden;

}



p {

    font-size: 14px;

    margin: 8px 0;

    line-height: 1.35;

}



/* Backgrounds */

.home-bg {

    background: url('kepek/kep1.webp') no-repeat center center fixed;

    background-size: cover;

}



.subpage-bg {

    background: url('kepek/kep2.webp') no-repeat center center fixed;

    background-size: cover;

}



/* Layout */

.container {

    display: flex;

    height: 100vh;

}



/* Sidebar Menu */

.sidebar {

    width: 300px;

    padding: 40px;

    padding-top: 40px;

    color: white;

    background: rgba(0, 0, 0, 0.3);

}



/* Language Switcher - Popup Style */

.lang-switcher-container {

    position: fixed;

    bottom: 20px;

    right: 20px;

    z-index: 1000;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

}



.lang-toggle {

    display: none;

    width: 50px;

    height: 50px;

    background: rgba(0, 0, 0, 0.7);

    border-radius: 50%;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    transition: transform 0.3s, background 0.3s;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.lang-toggle:hover {

    transform: scale(1.1);

    background: rgba(0, 0, 0, 0.9);

}



.lang-toggle svg {

    width: 30px;

    height: 30px;

    fill: white;

}



.lang-options {

    display: flex;

    flex-direction: row;

    gap: 10px;

    opacity: 1;

    transform: none;

    pointer-events: auto;

    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}



.lang-switcher-container:hover .lang-options {

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

}



.lang-flag {

    width: 40px;

    height: 27px;

    cursor: pointer;

    border: 2px solid rgba(255,255,255,0.5);

    border-radius: 4px;

    overflow: hidden;

    transition: transform 0.2s;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}



.lang-flag:hover {

    transform: scale(1.15);

    border-color: white;

}



.lang-flag svg {

    width: 100%;

    height: 100%;

    display: block;



    display: flex;

    flex-direction: column;

    overflow-y: auto;

    position: relative;

    z-index: 10;

    transition: transform 0.3s ease;

}



/* Social Icons */

.social-icons {

    position: fixed;

    top: 20px;

    right: 40px;

    display: flex;

    gap: 15px;

    z-index: 100;

}



.social-icons a {

    color: white;

    text-decoration: none;

    font-size: 20px;

    transition: opacity 0.3s;

}



.social-icons a:hover {

    opacity: 0.7;

}



.menu-item {

    margin-bottom: 0;

}



.menu-link {

    color: #F7F6F5;

    text-decoration: none;

    font-family: 'Lato';

    font-style: normal;

    font-weight: 400; /* Regular weight for better legibility */

    font-size: 14px; /* Reduced size to match reference */

    text-transform: uppercase;

    letter-spacing: 3px; /* Wider spacing */

    display: block;

    cursor: pointer;

    transition: color 0.3s;

    user-select: none;

    margin: .75em .5em .75em 0;

}



.menu-link:hover, .menu-link.active {

    color: #a2834e;

}



/* Dropdown specific */

.has-dropdown > .menu-link::before {

    content: "+ ";

    margin-right: 5px;

}



.submenu {

    display: none;

    margin-left: 20px;

    margin-top: 10px;

}



.submenu.open {

    display: block;

}



.submenu a {

    color: white;

    text-decoration: none;

    display: block;

    font-family: 'Lato';

    font-style: normal;

    font-weight: 400;

    font-size: 13px; /* Slightly smaller than main menu */

    margin-bottom: 8px;

    opacity: 0.9;

    text-transform: uppercase;

    letter-spacing: 2px;

    transition: color 0.3s;

}



.submenu a:hover, .submenu a.active {

    opacity: 1;

    color: #a2834e;

    text-decoration: none;

}



/* Content Area */

.content {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: flex-start; /* Changed from center to allow scrolling long content */

    text-align: center;

    color: white;

    overflow-y: auto; /* Enable vertical scrolling for content area */

    height: 100vh;

}



.hero-text {

    margin: auto; /* Keep hero text vertically centered on home page */

    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

    background: rgba(0, 0, 0, 0.32); /* Slightly lighter for more transparency */

    padding: 60px 80px; /* Increased padding */

    backdrop-filter: blur(5px);

    border: 1px solid rgba(255,255,255,0.1); /* Subtle border */

}



.hero-text h1 {

    font-size: 72px; /* Large and thin */

    font-weight: 100; /* Thin */

    margin: 0;

    letter-spacing: 12px; /* Very wide spacing */

    text-transform: uppercase;

    color: #E0E0E0; /* Lighter grey for thin text visibility */

    font-family: 'Lato';

    line-height: 1.1;

}



.hero-text h2 {

    font-size: 32px;

    font-weight: 300; /* Light but not hairline */

    margin: 20px 0 10px 0;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: #D0D0D0;

    font-family: 'Lato';

}



.hero-text h3 {

    font-size: 13px;

    font-weight: 400;

    margin-top: 20px;

    letter-spacing: 4px;

    color: #C2C2C2;

    font-family: 'Lato';

    text-transform: uppercase;

}



/* Mobile Menu Overlay - Base Styles (Hidden by default) */

.mobile-menu-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: black;

    z-index: 2000; /* Higher than toggle */

    flex-direction: column;

    justify-content: flex-start; /* Align to top to allow scrolling */

    align-items: center;

    overflow-y: auto;

    padding: 40px 0; /* Adjusted padding */

}



.mobile-menu-overlay.active {

    display: flex;

}



.mobile-menu-overlay .menu-item {

    text-align: center;

    margin-bottom: 20px;

    width: 100%;

}



.mobile-menu-overlay .menu-link {

    font-size: 18px; /* Larger for touch */

    color: white;

    display: block;

    padding: 10px;

}



.mobile-menu-overlay .submenu {

    margin-left: 0;

    text-align: center;

    background: rgba(255,255,255,0.05);

    padding: 10px 0;

}



.mobile-menu-overlay .submenu a {

    font-size: 14px;

    padding: 8px 0;

}



.mobile-close {

    position: relative;

    margin-bottom: 30px;

    color: white;

    font-size: 20px;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;

    font-weight: bold;

    padding: 10px 20px;

    border: 1px solid white;

    border-radius: 5px;

    z-index: 2001;

}



/* Mobile Toggle Header */

.mobile-toggle {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1001;

    color: white;

    background: black; /* Solid black header */

    padding: 15px 0;

    text-align: center;

    cursor: pointer;

    text-transform: uppercase;

    letter-spacing: 3px;

    font-weight: bold;

    font-size: 16px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.5);

}



@media (max-width: 768px) {

    .container {

        flex-direction: column;

        padding-top: 60px; /* Push content down below fixed header */

    }



    .sidebar {

        display: none; /* Hide default sidebar on mobile */

    }



    .mobile-toggle {

        display: block;

    }

    

    .hero-text {

        width: 80%;

        padding: 20px;

    }

    

    .hero-text h1 { font-size: 32px; }

    .hero-text h2 { font-size: 20px; }

    .hero-text h3 { font-size: 14px; }



    /* Move desktop social icons to bottom-left on mobile */

    body > .social-icons {

        display: flex;

        position: fixed;

        top: auto;

        bottom: 20px;

        right: auto;

        left: 20px;

        z-index: 2001; /* Ensure visibility over overlay if needed, or consistent with other fixed elements */

    }



    /* Style social icons inside mobile menu overlay - keep them as duplicate or hide? 

       If we show them fixed at bottom-left, we might not need them in the overlay.

       But let's keep the user's request "telefonos nézetbe lehetne bal alul".

       This usually means always visible.

    */

    .mobile-menu-overlay .social-icons {

        display: none; /* Hide duplicate in overlay if we have fixed ones */

    }

}



/* Document overlay viewer */

.doc-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.85);

    z-index: 3000;

    align-items: center;

    justify-content: center;

    padding: 40px;

}



.doc-overlay.active {

    display: flex;

}



.doc-overlay iframe {

    width: 85%;

    height: 85%;

    background: #111;

    border: 1px solid #a2834e;

    box-shadow: 0 20px 50px rgba(0,0,0,0.6);

}



.doc-close {

    position: absolute;

    top: 20px;

    right: 100px;

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    background: rgba(0,0,0,0.8);

    border: 1px solid rgba(255,255,255,0.3);

    padding: 10px 20px;

    border-radius: 4px;

    z-index: 3010;

    display: flex;

    align-items: center;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.doc-close-icon {

    font-size: 24px;

    line-height: 1;

}



.doc-html {

    width: 85%;

    height: 85%;

    overflow: auto;

    background: #111;

    border: 1px solid #a2834e;

    padding: 20px 30px;

    color: #e0e0e0;

    box-shadow: 0 20px 50px rgba(0,0,0,0.6);

}



@media (max-width: 768px) {

    .doc-overlay {

        padding: 0;

        background: rgba(0,0,0,0.95);

        flex-direction: column;

        justify-content: flex-start;

    }



    .doc-overlay iframe {

        width: 100%;

        height: calc(100% - 60px); /* Leave space for top bar */

        margin-top: 60px;

        border: none;

    }



    .doc-close {

        top: 0;

        right: 0;

        left: 0;

        width: 100%;

        height: 60px;

        background: #1a1a1a;

        border: none;

        border-bottom: 1px solid #a2834e;

        border-radius: 0;

        display: flex;

        justify-content: flex-end; /* Align close button to right */

        padding: 0 20px;

    }

    

    .doc-html {

        width: 100%;

        height: calc(100% - 60px);

        margin-top: 60px;

        border: none;

        padding: 15px;

    }

}



/* Subpage Content Styling - Inspired by hongyu-chen.com/oper */

.subpage-content {

    background: rgba(18, 18, 18, 0.30); /* Slightly lighter for more transparency */

    padding: 60px 80px;

    max-width: 1000px;

    width: 100%;

    margin: 120px auto 80px auto; /* Increased top margin for better spacing */

    box-shadow: 0 20px 50px rgba(0,0,0,0.6);

    border-top: 3px solid #a2834e; /* Gold accent top */

    color: #e0e0e0;

    backdrop-filter: blur(10px);

    text-align: left;

    overflow: hidden; /* Clear floats */

}



/* Floating image for subpages */

.content-image-right {

    float: right;

    max-width: 32%;

    margin: 0 0 16px 24px;

    border-radius: 4px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    border: 1px solid #a2834e;

}



.content-image-right2 {
    float: right;
    max-width: 180px;
    margin: 0 0 16px 24px;
    border-radius: 4px;
    opacity: 0.33;
}

@media (max-width: 768px) {
    .content-image-right2 {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        max-width: 33%;
        width: 100%;
    }
}



.kollegium-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin: 18px 0 26px 0;

}



.kollegium-image {

    width: 280px;

    max-width: 280px;

    border-radius: 4px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    border: 1px solid #a2834e;

    flex-shrink: 0;

}



.kollegium-item-text {

    flex: 1;

}



.content-image-block {

    display: block;

    max-width: 80%;

    margin: 20px auto;

    border-radius: 4px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

    border: 1px solid #a2834e;

}



.erkel-table {

    width: 100%;

    border-collapse: collapse;

    margin: 20px 0 30px 0;

    font-family: 'Lato';

}



.erkel-table th, .erkel-table td {

    border: 1px solid rgba(162, 131, 78, 0.4);

    padding: 12px 16px;

    color: #e0e0e0;

}



.erkel-table th {

    background: rgba(0,0,0,0.35);

    color: #a2834e;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 600;

    text-align: left;

}



.erkel-table tr:nth-child(even) td {

    background: rgba(255,255,255,0.03);

}



.subpage-content h2 {

    font-family: 'Playfair Display', serif;

    font-size: 36px;

    color: #a2834e; /* Gold */

    text-align: center;

    margin-bottom: 12px;

    text-transform: uppercase;

    letter-spacing: 2px;

    border-bottom: 1px solid rgba(162, 131, 78, 0.3);

    padding-bottom: 10px;

    font-weight: 400;

}



.subpage-content p {

    text-align: justify;

    font-family: 'Lato';

    font-size: 16px;

    line-height: 1.4;

    color: #d0d0d0;

    margin-bottom: 15px;

    font-weight: 300;

}



.subpage-content p.intro-lead {

    font-weight: 500;

}



.subpage-content .visa-section-title {

    text-align: center;

    color: #a2834e;

    font-family: 'Playfair Display', serif;

    font-size: 22px;

    font-weight: 500;

    margin: 22px 0 10px 0;

    letter-spacing: 0.5px;

}



.subpage-content a:not(.doc-open):not(.doc-link) {

    color: #a2834e;

    text-decoration: none;

    border-bottom: 1px solid rgba(162,131,78,0.5);

    padding-bottom: 1px;

    transition: color .2s ease, border-color .2s ease;

}



.subpage-content a:not(.doc-open):not(.doc-link):hover {

    color: #ffffff;

    border-color: #a2834e;

}



.subpage-content .erkel-pre {

    white-space: pre-wrap;

    font-family: 'Lato';

    font-size: 16px;

    line-height: 1.4;

    color: #d0d0d0;

}



.subpage-content strong {

    color: white;

    font-weight: 700;

    display: block;

    margin-top: 10px;

    margin-bottom: 6px;

    font-family: 'Playfair Display', serif;

    font-size: 15px;

    letter-spacing: 1px;

    border-left: 3px solid #a2834e;

    padding-left: 15px;

}

.subpage-content strong1 {

    color: white;

    font-weight: 700;

    display: block;

    margin-top: 10px;

    margin-bottom: 6px;

    font-family: 'Playfair Display', serif;

    font-size: 15px;

    letter-spacing: 1px;

    border-left: 3px solid #a2834e;

    padding-left: 15px;

}

.subpage-content ul {

    margin: 6px 0;

    padding-left: 20px;

}



.subpage-content li {

    margin: 3px 0;

    line-height: 1.3;

}



.doc-list {

    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    margin: 20px 0 30px;

}



.doc-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    background: rgba(0,0,0,0.35);

    border: 1px solid rgba(162,131,78,0.4);

    padding: 12px 16px;

    border-radius: 4px;

}



.doc-title {

    color: #e0e0e0;

    font-family: 'Lato';

    font-size: 16px;

    font-weight: 400;

}



.doc-actions {

    display: flex;

    gap: 10px;

}



.doc-link {

    color: #a2834e;

    text-decoration: none;

    border: 1px solid rgba(162,131,78,0.6);

    padding: 8px 12px;

    border-radius: 4px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: background .2s ease, color .2s ease;

}



.doc-link:hover {

    background: #a2834e;

    color: #111;

}



.doc-open {

    color: #a2834e;

    text-decoration: none;

    border: 1px solid rgba(162,131,78,0.6);

    padding: 4px 10px;

    border-radius: 999px;

    font-family: 'Lato';

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.5px;

    text-transform: none;

    background: rgba(0,0,0,0.35);

    display: inline-block;

    margin: 2px 0;

    transition: background .2s ease, color .2s ease, border-color .2s ease;

}



.doc-open:hover {

    background: #a2834e;

    color: #111;

    border-color: #a2834e;

}



.subpage-content ul.teacher-doc-list {

    list-style: none;

    margin: 4px 0 10px 0;

    padding-left: 0;

}



.subpage-content ul.teacher-doc-list li {

    margin: 2px 0;

}



.regulations-content {

    max-width: 900px;

}



.regulations-item {

    align-items: flex-start;

    flex-wrap: wrap;

}



.regulation-image {

    max-width: 100%;

    height: auto;

    display: block;

    border-radius: 4px;

}



.doc-image {

    margin-top: 8px;

}



/* Gallery */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}



.gallery-item {

    background: rgba(0,0,0,0.35);

    border: 1px solid rgba(162,131,78,0.4);

    padding: 6px;

    border-radius: 4px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

}



.gallery-item img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 3px;

    display: block;

}



.lazy-img {

    opacity: 0;

    transition: opacity .25s ease;

}

.lazy-img.loaded {

    opacity: 1;

}



.lightbox {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.85);

    z-index: 3000;

    align-items: center;

    justify-content: center;

    padding: 40px;

}



.lightbox.active {

    display: flex;

}



.lightbox img {

    max-width: 85%;

    max-height: 85%;

    background: #111;

    border: 1px solid #a2834e;

    box-shadow: 0 20px 50px rgba(0,0,0,0.6);

}



.lightbox-close,

.lightbox-prev,

.lightbox-next {

    position: absolute;

    color: white;

    cursor: pointer;

    background: rgba(255,255,255,0.1);

    border: 1px solid rgba(255,255,255,0.3);

    padding: 6px 12px;

    border-radius: 4px;

    font-size: 28px;

    user-select: none;

}



.lightbox-close {

    top: 20px;

    right: 30px;

}



.lightbox-prev {

    left: 30px;

    top: 50%;

    transform: translateY(-50%);

}



.lightbox-next {

    right: 30px;

    top: 50%;

    transform: translateY(-50%);

}

/* Prevent background scroll when lightbox is open */
body.no-scroll {
    position: fixed;
    width: 100%;
}


/* Responsive adjustments for subpage content */

@media (max-width: 768px) {

    .subpage-content {

        padding: 30px;

        margin: 20px;

        width: auto;

    }



    .content-image-right {

        float: none;

        display: block;

        width: 100%;

        max-width: 100%;

        margin: 20px auto;

        height: 240px;

        object-fit: cover;

    }



        .content-image-right {

        float: none;

        display: block;

        width: 100%;

        margin: 20px auto;

        object-fit: cover;

    }



    .content-image-block {

        width: 100%;

        max-width: 100%;

        height: 240px;

        object-fit: cover;

    }

    

    .gallery-grid {

        grid-template-columns: 1fr 1fr;

    }

    .gallery-item img {

        height: 180px;

    }

    

    .subpage-content h2 {

        font-size: 28px;

    }

    

    .subpage-content strong {

        font-size: 18px;

    }

}



.erkel-form {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin: 20px 0 30px;

    align-items: end;

}



.erkel-form .form-row {

    display: flex;

    flex-direction: column;

}



.erkel-form label {

    color: #a2834e;

    font-family: 'Lato';

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 6px;

}



.erkel-input {

    background: rgba(0,0,0,0.35);

    border: 1px solid rgba(162,131,78,0.4);

    color: #e0e0e0;

    padding: 10px 12px;

    border-radius: 4px;

    outline: none;

}



.erkel-input:focus {

    border-color: #a2834e;

    box-shadow: 0 0 0 2px rgba(162,131,78,0.2);

}



.erkel-button {

    background: #a2834e;

    color: #111;

    border: none;

    padding: 12px 18px;

    border-radius: 4px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    cursor: pointer;

    transition: opacity .2s ease;

}



.erkel-button:hover {

    opacity: .9;

}



.results-panel {

    background: rgba(0,0,0,0.35);

    border: 1px solid rgba(162,131,78,0.4);

    padding: 16px 20px;

    border-radius: 4px;

}



.result-badge {

    display: inline-block;

    padding: 8px 12px;

    border-radius: 16px;

    font-weight: 700;

    margin-bottom: 12px;

}



.badge-admitted {

    background: #2e7d32;

    color: #fff;

    border: 1px solid rgba(255,255,255,0.2);

}



.badge-rejected {

    background: #b71c1c;

    color: #fff;

    border: 1px solid rgba(255,255,255,0.2);

}



@media (max-width: 768px) {

    .erkel-form {

        grid-template-columns: 1fr;

    }

}





/* Lightbox */

.lightbox {

    display: none;

    position: fixed;

    z-index: 10000;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.9);

    justify-content: center;

    align-items: center;

}

.lightbox.active {

    display: flex;

}

.lightbox img {

    max-width: 90%;

    max-height: 90%;

    box-shadow: 0 0 20px rgba(0,0,0,0.5);

    border: 2px solid #a2834e;

}

.lightbox-close {

    position: absolute;

    top: 20px;

    right: 30px;

    font-size: 40px;

    color: #fff;

    cursor: pointer;

    z-index: 10001;

}

.lightbox-prev, .lightbox-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    font-size: 40px;

    color: #fff;

    cursor: pointer;

    z-index: 10001;

    padding: 10px;

    background: rgba(0,0,0,0.3);

}

.lightbox-prev { left: 20px; }

.lightbox-next { right: 20px; }

.lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:hover {

    color: #a2834e;

}