/*
 * Global CSS variables for colour palette and basic styling.
 */
:root {
    /*
     * Colour palette inspired by modern education platforms. A deep purple
     * primary anchors the design, complemented by a warm secondary orange‑red
     * and a softer accent. Backgrounds are light with very subtle shadows
     * for elevation. Text uses a dark plum for comfortable reading.
     */
    --primary-color: #5c2d91;
    --secondary-color: #ee2e24;
    --accent-color: #ffb226;
    --bg-color: #fdf9ff;
    --text-color: #3e315b;
    --light-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.05);
}

/* Reset & base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Navigation bar */
/* Navigation bar */
/*
 * The navigation bar has been updated to adopt a lighter aesthetic similar to
 * professional education sites. On wide screens the background is light and
 * links use the primary colour. On smaller screens the hamburger menu still
 * toggles the slide‑in menu. A subtle box shadow helps separate the nav
 * from the rest of the page.
 */
.navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: var(--light-color);
    color: var(--primary-color);
    box-shadow: 0 2px 4px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Logo text inherits the primary colour on the light nav background */
.navbar .logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.navbar .nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* Navigation links use the primary colour and change to the secondary colour on hover */
.navbar .nav-links li a {
    color: var(--primary-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Hover state on navigation links emphasises the secondary colour */
.navbar .nav-links li a:hover {
    color: var(--secondary-color);
}

/* Call‑to‑action button in the nav bar stands out with the secondary colour */
.navbar .nav-links li .btn-primary {
    background-color: var(--secondary-color);
    color: var(--light-color);
    padding: 0.5rem 1.25rem;
    border-radius: 25px;
    font-weight: 600;
    white-space: nowrap;
}

/* Hamburger (mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

/* Hamburger lines use primary colour on the light background */
.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Toggle cross when menu open */
.hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Hero section
 * The hero on the home and class pages has been simplified to remove the
 * oversized illustration. A light background with dark text creates a clean
 * introduction. The optional image container is hidden by default to keep
 * the focus on the message. To reinstate an image on a particular page,
 * override the display property locally.
 */
.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: var(--light-color);
    color: var(--primary-color);
    text-align: center;
}

.hero-content {
    max-width: 800px;
}

.hero-content h1 {
    font-size: 2.75rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.hero-content .subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Secondary button used in hero and pricing sections */
.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--light-color);
    padding: 0.75rem 1.75rem;
    border-radius: 30px;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.btn-secondary:hover {
    background-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* Primary button used for strong calls to action */
.btn-primary {
    background-color: var(--secondary-color);
    color: var(--light-color);
    padding: 0.75rem 1.75rem;
    border-radius: 30px;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.btn-primary:hover {
    background-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.hero-image {
    display: none;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 20px var(--shadow-color);
}

/* ------------------------------------------------------------------ */
/* New hero slider styles                                             */
/* These rules style the multi‑slide banner at the top of the home
   page. The slider is hidden on grade pages because those pages
   continue to use the older .hero class defined above. */
.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--light-color);
}

.hero-slider .slider {
    display: flex;
    width: 100%;
}

.hero-slider .slide {
    flex: 0 0 100%;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    min-height: 60vh;
    background-color: var(--light-color);
}

.hero-slider .slide.active {
    display: flex;
}

.hero-slider .slide-content {
    max-width: 800px;
    text-align: center;
}

.hero-slider .slide-content h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.hero-slider .slide-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: var(--text-color);
}

.hero-slider .slider-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

.hero-slider .slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--shadow-color);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.hero-slider .slider-dots .dot.active {
    background-color: var(--secondary-color);
}

/* ------------------------------------------------------------------ */
/* Features section styling                                            */
.features-section {
    padding: 4rem 2rem;
    background-color: var(--light-color);
    text-align: center;
}

.features-section h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.features-section .section-lead {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-item {
    background-color: var(--bg-color);
    border: 1px solid var(--shadow-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 2px 6px var(--shadow-color);
}

.feature-item::before {
    content: '\2714';
    color: var(--secondary-color);
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.feature-item p {
    color: var(--text-color);
    line-height: 1.5;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* Pricing section styling                                             */
.pricing {
    padding: 4rem 2rem;
    background-color: var(--light-color);
    text-align: center;
}

.pricing h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.pricing .pricing-info {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.price-card {
    position: relative;
    background-color: var(--bg-color);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.price-card.highlight {
    border-color: var(--secondary-color);
}

.price-card .label {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-color);
    color: var(--light-color);
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
}

.price-card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.price-card ul {
    list-style: none;
    margin-bottom: 1.5rem;
    width: 100%;
}

.price-card ul li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9rem;
}

.price-card ul li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.price-card .price-amount {
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.price-card .btn-secondary {
    margin-top: auto;
}

/* ------------------------------------------------------------------ */
/* Methodology section tweaks                                          */
.principles li {
    color: var(--text-color);
    font-size: 1rem;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.principles li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Grade cards and class selection                                     */
.packages {
    padding: 4rem 2rem;
    background-color: var(--light-color);
    text-align: center;
}

.packages h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.packages .package-info {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-size: 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.grade-card {
    background-color: var(--bg-color);
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grade-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.grade-card h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.grade-card p {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.btn-outline {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.btn-outline:hover {
    background-color: var(--secondary-color);
    color: var(--light-color);
}

/* ------------------------------------------------------------------ */
/* Comparison table styling                                            */
/* Comparison table */
.comparison {
    padding: 80px 0;
    background: #faf7ff;
}

.comparison h2 {
    text-align: center;
    margin-bottom: 8px;
}

.comparison .section-lead {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
}

.table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(46, 8, 84, 0.06);
    font-size: 0.95rem;
}

.comparison-table thead th {
    background: #6a1bb1;
    color: #ffffff;
    padding: 14px 18px;
    text-align: center;
    font-weight: 600;
}

.comparison-table thead th:first-child {
    text-align: left;
}

.comparison-table .col-sub {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
}

.comparison-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid #f1e7ff;
    text-align: center;
}

.comparison-table tbody tr:nth-child(even) {
    background: #fbf8ff;
}

.comparison-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: #4a2b74;
}

/* MatVerse sütununu hafif vurgula */
.comparison-table tbody td:nth-child(2) {
    background: #f6efff;
}

/* Var / Yok rozetleri */
.tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.tag-yes {
    background: #e3f7ec;
    color: #0b8b47;
}

.tag-no {
    background: #ffe5e5;
    color: #c62828;
}

.tag-partial {
    background: #fff4d8;
    color: #b26a00;
}


/* ------------------------------------------------------------------ */
/* Responsive adjustments                                              */
@media (max-width: 768px) {
    .hero-slider .slide-content h1 {
        font-size: 2rem;
    }
    .hero-slider .slide-content p {
        font-size: 0.95rem;
    }
    .pricing-cards {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .grade-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .price-card .price-amount {
        font-size: 1.6rem;
    }
    .price-card h3 {
        font-size: 1.3rem;
    }
}

/* Methodology section */
.methodology {
    padding: 4rem 2rem;
    background-color: var(--light-color);
    text-align: center;
}

.methodology h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.methodology p {
    max-width: 800px;
    margin: 0 auto 2rem;
}

.methodology .principles {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.methodology .principles li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.methodology .principles li i {
    margin-right: 0.5rem;
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

/* Packages section */
.packages {
    padding: 4rem 2rem;
    background-color: var(--bg-color);
    text-align: center;
}

.packages h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.packages .package-info {
    max-width: 800px;
    margin: 0 auto 1rem;
    font-size: 0.95rem;
    color: #555555;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Grade selection grid (homepage) */
.grade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.grade-card {
    background-color: var(--light-color);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px var(--shadow-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grade-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.grade-card p {
    flex-grow: 1;
    font-size: 0.95rem;
    color: #555555;
    margin-bottom: 1rem;
}

.package-card {
    position: relative;
    background-color: var(--light-color);
    border-radius: 20px;
    padding: 2rem 2rem 2.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Üstte renkli bir şerit – kartı daha premium gösterir */
.package-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

/* Hover efekti – kart yukarı zıplasın */
.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.package-card h3 {
    font-size: 1.4rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.package-card ul {
    margin-bottom: 1.25rem;
    text-align: left;
    font-size: 0.98rem;
    line-height: 1.6;
}

.package-card ul li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.25rem;
}

.package-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--secondary-color);
    border-radius: 50%;
}

/*
 * Countdown and features sections
 * These sections add a sense of urgency and clearly articulate why the
 * tutoring service is unique. Inspired by modern education landing
 * pages, the countdown uses pill‑shaped counters while the feature grid
 * showcases benefits with icons.
 */
.countdown-section {
    padding: 4rem 2rem;
    background-color: var(--bg-color);
    text-align: center;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.countdown-box {
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-weight: 600;
    min-width: 100px;
}

.countdown-box span {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}



/* Comparison table */
.comparison {
    padding: 4rem 2rem;
    background-color: var(--light-color);
    text-align: center;
}

.comparison h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.comparison table {
    width: 100%;
    border-collapse: collapse;
    max-width: 1000px;
    margin: 0 auto;
    font-size: 0.95rem;
}

.comparison th, .comparison td {
    padding: 0.75rem 0.5rem;
    border: 1px solid #e5e5e5;
    text-align: center;
}

.comparison th {
    background-color: var(--primary-color);
    color: var(--light-color);
    font-weight: 600;
}

.comparison tbody tr:nth-child(odd) {
    background-color: var(--bg-color);
}

.comparison tbody tr:nth-child(even) {
    background-color: var(--light-color);
}

/* Price styling inside package cards */
.package-card .price {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--secondary-color);
}

.btn-outline {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    padding: 0.5rem 1rem;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    align-self: flex-start;
}

.btn-outline:hover {
    background-color: var(--secondary-color);
    color: var(--light-color);
}

/* Testimonials section */
.testimonials {
    padding: 4rem 2rem;
    background-color: var(--light-color);
    text-align: center;
    position: relative;
}

.testimonials h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.testimonial-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.testimonial-slide {
    overflow: hidden;
    width: 100%;
}

.testimonial {
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 0 2rem;
}

.testimonial.active {
    opacity: 1;
}

.testimonial p {
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial .author {
    font-weight: 600;
    color: var(--primary-color);
}

/*
 * Testimonial navigation buttons: use large unicode arrows instead of
 * external icon fonts. The default colour is the primary colour, with
 * a secondary accent on hover.
 */
.prev, .next {
    background-color: transparent;
    border: none;
    font-size: 2rem;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0 1rem;
    transition: color 0.3s ease;
}

.prev:hover, .next:hover {
    color: var(--secondary-color);
}

/* About section */
.about {
    padding: 4rem 2rem;
    background-color: var(--bg-color);
}

.about h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    gap: 2rem;
}

.about-text {
    flex: 1 1 50%;
    font-size: 1rem;
    line-height: 1.7;
}

.about-text p {
    margin-bottom: 1rem;
}

.about-text .btn-secondary {
    margin-top: 1rem;
}

.about-image {
    flex: 1 1 40%;
    text-align: center;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 20px var(--shadow-color);
}

/* Contact / Footer section */
.contact {
    background-color: var(--primary-color);
    color: var(--light-color);
    padding: 4rem 2rem 2rem;
}

.contact-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.contact-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.contact-form .input-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.contact-form label {
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.contact-form input,
.contact-form textarea {
    padding: 0.75rem;
    border: none;
    border-radius: 5px;
    background-color: #fdfdfd;
    color: #333333;
    font-size: 1rem;
    resize: vertical;
}

.contact-form button {
    align-self: center;
    margin-top: 1rem;
}

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--accent-color);
}

/* Social icons with simple letters. Each link is a coloured circle
   representing the platform. Hovering lifts the icon slightly. */
.social-icons {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icons a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-color);
    font-weight: 600;
    text-transform: uppercase;
    transition: transform 0.3s ease;
}

/* Specific brand colours for each platform */
.social-icons a.whatsapp { background-color: #25D366; }
.social-icons a.instagram { background-color: #E1306C; }
.social-icons a.facebook { background-color: #1877F2; }

.social-icons a:hover {
    transform: translateY(-4px);
}

.footer-bottom {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: #cccccc;
}

/* Responsive styles */
@media (max-width: 768px) {
    .navbar .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100vh;
        background-color: var(--light-color);
        flex-direction: column;
        gap: 1.5rem;
        padding-top: 4rem;
        box-shadow: -2px 0 6px var(--shadow-color);
        transition: right 0.3s ease;
    }

    .navbar .nav-links.active {
        right: 0;
    }

    .hamburger {
        display: flex;
    }

    .nav-links li .btn-primary {
        margin-left: 0;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 6rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-image {
        margin-top: 2rem;
    }

    .about-content {
        flex-direction: column-reverse;
        text-align: center;
    }

    .about-image {
        margin-bottom: 1rem;
    }

    .package-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

/* Sınıf kartlarındaki "Paketi Gör" butonunu ortala */
.grade-card {
    text-align: center;
}

.grade-card .btn-outline {
    display: block;
    width: max-content;
    margin: 1.5rem auto 0;  /* yukarıdan boşluk + yatayda ortalama */
}
/* Paket kartlarındaki butonu ortaya al */
.package-card .btn-outline {
    align-self: center;
    margin-top: 1.5rem;
}
.package-card .price.highlight {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e53935; /* mevcut kırmızı tonuna yakınsa bunu kullan */
}
.kvkk {
    padding: 48px 16px;
    background: #f9f5ff;
    font-size: 0.9rem;
}

.kvkk h2 {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
    color: #4a2b74;
}

.kvkk p {
    max-width: 900px;
    margin: 0 auto 10px;
    line-height: 1.6;
}

/* Footer linki için ufak stil (opsiyonel) */
.footer-bottom .kvkk-link {
    margin-left: 16px;
    font-size: 0.85rem;
    text-decoration: underline;
}

.price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-weight: 600;
}

.price .old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9rem;
}

.price .new-price {
    color: #1f8b4c;
    font-size: 1.1rem;
}

.price .price-note {
    font-size: 0.8rem;
    color: #666;
}
@media (max-width: 600px) {
    .package-grid {
        grid-template-columns: 1fr;  /* Kartlar tek sütun */
    }

    .package-card {
        padding: 1.5rem 1.25rem;
    }

    .package-card h3 {
        font-size: 1.1rem;
    }

    /* Fiyat bloğu ortalı dursun */
    .package-card .price {
        align-items: center;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .hero {
        padding: 3rem 1.25rem;
    }

    .hero-content h1 {
        font-size: 1.7rem;
    }

    .hero-content .subtitle {
        font-size: 0.9rem;
    }

    .packages h2,
    .features-section h2 {
        font-size: 1.6rem;
    }
}
/* Genel içerik yanlardan nefes alsın */
main, .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}