/* ═══════════════════════════════════════════════════════════════
   MERYS ENGLISH CLUB — Section Styles (sections.css)
   ═══════════════════════════════════════════════════════════════
   Her bölümün kendine özel stilleri burada tanımlanır.
   Bölümler eklendikçe bu dosya büyüyecek.
   ═══════════════════════════════════════════════════════════════ */


/* ─── Hero Section ─────────────────────────────────────────── */

/* ─── Hero Section ─────────────────────────────────────────── */

/* ─── Hero Section ─────────────────────────────────────────── */

.section-hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   background: var(--flow-hero);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
}

.section-hero:nth-child(even),
.section-hero:nth-child(odd) {
   background: var(--flow-hero);
}

/* ─── Layout ──────────────────────────────────────────────── */

.section-hero .container {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.3fr 0.7fr;
   gap: var(--space-3xl);
   align-items: center;

}


/* ─── İçerik ──────────────────────────────────────────────── */

.hero-content {
   position: relative;
   z-index: 3;
}

/* Ana başlık kompozisyonu */
.hero-headline {
   margin-bottom: var(--space-4xl);
   padding-top: var(--space-xl);
}

.hero-title {
   gap: var(--space-sm);
   margin-bottom: 0;
   display: block;
   font-family: var(--font-title-modern);
   font-weight: var(--fw-bold);
   line-height: 1.05;
   letter-spacing: var(--ls-normal);
   color: var(--clr-primary);
   font-size: var(--fs-17);
}

.hero-title .title-mark {
   font-size: var(--fs-18);
}

.hero-tagline {
   font-family: var(--font-heading);
   font-size: var(--fs-9);
   font-weight: var(--fw-regular);
   font-style: italic;
   color: var(--clr-primary-light);
   letter-spacing: var(--ls-snug);
   line-height: var(--lh-snug);
   margin-bottom: 0;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-sm);
   margin-bottom: var(--space-md);
}


/* ─── görsel alanı ──────────────────────────────────────────────── */

.hero-visual {
   position: relative;
   height: 100%;
}

.hero-visual img {
   position: absolute;
   height: 70%;
   filter: hue-rotate(40deg);
   bottom: 0;
   right: 0;
}

.hero-visual img:nth-of-type(2) {
   width: 180px;
   height: auto;
   right: 290px;
   left: auto;
   rotate: -5deg !important;
   opacity: 1;
   top: 29px;
   filter: none !important;

}

.section-hero .decor {
   width: 120px;
   left: 10px;
   top: 180px;
   rotate: 15deg;
   opacity: 0.8;

}



/* ─── Testimonials Section ─────────────────────────────────── */
.section-testimonials {
   background: var(--flow-testimonials);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
   overflow: hidden;
}

.testimonials-layout {
   display: grid;
   grid-template-columns: 3fr 7fr;
   gap: var(--space-3xl);
   align-items: center;
}

.testimonials-content {
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);

}

/* Slider Mimari (Native Scroll Snap) */
.testimonials-slider-wrapper {
   width: 100%;
   overflow: hidden;
}

.testimonials-track {
   display: flex;
   gap: var(--space-xl);
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   /* Scrollbar gizleme */
   -ms-overflow-style: none;
   scrollbar-width: none;
   padding-bottom: var(--space-xl);
   padding-top: var(--space-xl);
   /* Avatarın taşması için ekstra boşluk */
}

.testimonials-track::-webkit-scrollbar {
   display: none;
}

.testimonials-page {
   min-width: 100%;
   scroll-snap-align: center;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 1fr;
   gap: var(--space-sm);
}

/* Kart Tasarımı */
.testimonial-card {
   background: var(--clr-gray-100);
   -webkit-backdrop-filter: blur(var(--blur-md));
   border: 2px solid var(--clr-primary);
   border-radius: var(--radius-lg);
   padding: var(--space-2xl) var(--space-sm);
   padding-bottom: var(--space-xl);
   box-shadow: var(--shadow-sm);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.testimonial-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
}

.t-quote {
   font-family: var(--font-title-modern);
   font-size: 9rem;
   line-height: 0;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
   color: var(--clr-primary);
   opacity: 1;
   position: absolute;
   bottom: -45px;
   left: 50%;
   translate: -50% 0;
}

.testimonial-card .stars {
   margin-bottom: var(--space-3xs);
   margin-top: var(--space-3xs);
}

.testimonial-card .stars-icon {
   fill: var(--clr-primary);
}

.t-text {
   font-family: var(--font-body);
   font-size: 15px;
   color: var(--clr-primary-dark);
   line-height: var(--lh-relaxed);
   flex-grow: 1;
   padding-top: var(--space-xs);
   display: flex;
   align-items: center;

}

.t-author {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-2xs);
   margin-top: var(--space-md);

}

.t-avatar {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 65px;
   height: 65px;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid var(--clr-primary);
}

.t-author-info {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}

.t-author-info strong {
   font-family: var(--font-title-modern);
   font-size: var(--fs-4);
   color: var(--clr-primary-dark);
   font-weight: var(--fw-bold);
}

.t-author-info span {
   font-family: var(--font-body);
   font-size: var(--fs-1);
   color: var(--clr-primary-dark);
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* ─── Bio Section ──────────────────────────────────────────── */
.section-bio {
   background: var(--flow-bio);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
   overflow: hidden;
}

/* Layout: görsel sol (0.8fr), içerik sağ (1.2fr) */
.bio-layout {
   display: grid;
   grid-template-columns: 0.8fr 1.2fr;
   gap: var(--space-3xl);
   align-items: center;
}

/* ─── Görsel Alan (Sol) ────────────────── */
.bio-visual {
   position: relative;
   display: flex;
   flex-direction: column;
}

.bio-visual img {
   width: 100%;
   filter: drop-shadow(var(--shadow-primary));
}

.bio-visual img:nth-child(2) {
   width: 80%;
   margin-top: -30px;
   margin: 0 auto;
   margin-top: -20px;

}

/* ─── İçerik Alanı (Sağ) ──────────────── */
.bio-content {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
   padding-top: var(--space-md);
}

/* ─── Hedef Kitle Listesi ──────────────── */
.bio-audience-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: var(--space-sm);
   margin: var(--space-xs) 0;

}

.bio-audience-item {
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--clr-primary-dark);
   line-height: var(--lh-snug);
   max-width: 220px;
   padding: var(--space-lg);
   padding-top: var(--space-md);
   padding-left: var(--space-sm);
   background: var(--clr-gray-100);
   border-radius: var(--radius-blob);
   position: relative;
   text-align: center;
   border: 2px solid var(--clr-primary-dark);

}

.bio-audience-item::before {
   content: '✦';
   color: var(--clr-primary);
   flex-shrink: 0;
   position: absolute;
   font-size: var(--fs-12);
   right: 20px;
   bottom: 0px;
}


/* ─── Curriculum Section ───────────────────────────────────── */
.section-curriculum {
   background: var(--flow-curriculum);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
}

.curriculum-header {
   text-align: center;
   margin-bottom: var(--space-4xl);
   max-width: var(--container-md);
   margin-inline: auto;
}

.curriculum-layout {
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
   position: relative;
}

.curriculum-item {
   display: grid;
   align-items: center;
   position: relative;
   grid-template-columns: 1fr 1fr;

}

.curriculum-item.reverse {
   direction: rtl;
}

.curriculum-item.reverse>* {
   direction: ltr;
}

.c-number {
   position: absolute;
   font-size: var(--fs-7);
   font-weight: var(--fw-black);
   color: var(--clr-primary);
   line-height: 0.8;
   z-index: 0;
   top: 70px;
   left: 0;
}

.curriculum-item.reverse .c-number {
   left: auto;
   right: 0;
}

.c-content {
   position: relative;
   z-index: 1;
   padding: var(--space-md) 0;
}

.c-title {
   font-family: var(--font-title-modern);
   font-size: var(--fs-15);
   color: var(--clr-primary-dark);
   margin-bottom: var(--space-3xs);
}

.c-subtitle {
   display: block;
   font-family: var(--font-accent);
   font-size: var(--fs-8);
   color: var(--clr-accent-dark);
   margin-bottom: var(--space-md);
}

.c-text {
   font-size: var(--fs-5);
   color: var(--text-secondary);
   line-height: var(--lh-relaxed);
   margin-bottom: 0;
}

.c-visual {
   position: relative;
   height: 480px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.curriculum-item:nth-child(odd) .c-visual {
   justify-content: flex-end;
}

.curriculum-item:nth-child(even) .c-visual {
   justify-content: flex-start;
}

.c-blob {
   width: 65%;
   height: 80%;
   border-radius: var(--radius-blob);
   transition: all var(--transition-slow);
   position: relative;
}

.curriculum-item:hover .c-blob {
   border-radius: var(--blob-2);
   transform: scale(1.05);
}

.c-blob img {
   height: 110%;
   position: absolute;
   left: 50%;
   translate: -50% -50%;
   top: 50%;
   transition: all var(--transition-slow);
}

.curriculum-item:hover .c-blob img {
   opacity: 1;
}

.c-blob-1 {
   border-radius: var(--blob-1);
   background: var(--clr-primary-light);
}

.c-blob-2 {
   border-radius: var(--blob-2);
   background: var(--clr-accent);
}

.c-blob-3 {
   border-radius: var(--blob-2);
   background: var(--clr-sky);
}

.c-blob-4 {
   border-radius: var(--radius-blob);
   background: var(--clr-primary-lighter);
}

/* ─── Credentials Section ──────────────────────────────────── */
.section-credentials {
   background: var(--flow-credentials);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
   overflow: hidden;
   position: relative;
}

/* Header */
.credentials-header {
   text-align: center;
   margin-bottom: var(--space-4xl);
   max-width: var(--container-md);
   margin-inline: auto;
}

/* Grid Layout */
.credentials-layout {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: var(--space-md);
}

.credential-card {
   background: var(--clr-gray-100);
   border: 1px solid var(--clr-primary);
   border-top: 3px solid var(--clr-primary);
   border-radius: 0px 0px 50px 50px;
   padding: var(--space-lg) var(--space-lg);
   position: relative;
   transform: none;
   transition: transform var(--transition-slow);
   box-shadow: none;
}

.credential-card:hover {
   transform: translateY(-8px);
}

/* ─── Blob Year Badge (Sağ Üst) ─── */
.cred-blob {
   position: absolute;
   bottom: -24px;
   right: 0;
   width: 64px;
   height: 64px;
   border-radius: var(--blob-2);
   background: var(--clr-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-slow);
   z-index: 2;
}

.credential-card:hover .cred-blob {
   border-radius: var(--blob-2);
   transform: scale(1.12) rotate(8deg);
}

.cred-year {
   font-family: var(--font-accent);
   font-size: var(--fs-5);
   font-weight: var(--fw-bold);
   color: var(--clr-white);
   line-height: 1;
}

/* ─── ✦ Dekoratif Filigran ──────── */
.cred-watermark {
   position: absolute;
   bottom: 0;
   right: 0;
   font-size: var(--fs-13);
   color: var(--clr-primary-light);
   opacity: 0.08;
   line-height: 1;
   pointer-events: none;
   transition: opacity var(--transition-slow);
}

.credential-card:hover .cred-watermark {
   opacity: 0.15;
}

/* ─── İçerik Tipografi ──────────── */
.cred-title {
   font-family: var(--font-title-modern);
   font-size: var(--fs-7);
   font-weight: var(--fw-bold);
   color: var(--clr-primary-dark);
   margin-bottom: var(--space-3xs);
   line-height: var(--lh-snug);
}

.cred-institution {
   display: block;
   font-family: var(--font-body);
   font-size: var(--fs-2);
   font-weight: var(--fw-medium);
   color: var(--clr-primary-dark);
   text-transform: uppercase;
   letter-spacing: var(--ls-wider);
   margin-bottom: var(--space-xs);
}

.credential-card:nth-child(2) .cred-institution {
   color: var(--clr-primary-light);
}

.credential-card:nth-child(3) .cred-institution {
   color: var(--clr-accent-dark);
}

.cred-text {
   font-size: var(--fs-4);
   color: var(--clr-black);
   line-height: var(--lh-relaxed);
   margin-bottom: 0;
   max-width: 92%;
}

/* Stats band removed as requested */

/* ─── Schedule Section ─────────────────────────────────────── */
.section-schedule {
   background: var(--flow-schedule);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
}

.sch-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-xl);
}

.sch-card {
   border-radius: var(--radius-2xl);
   padding: var(--space-xl);
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
   position: relative;
   box-shadow: var(--shadow-md);
   transition: all var(--transition-normal);
   background: var(--clr-gray-200);
   border: 2px solid var(--clr-primary-dark);
   color: var(--clr-primary-dark);
}

.sch-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.sch-card-primary {
   background-color: var(--clr-primary-dark);
   color: var(--clr-gray-200);
}

.sch-card-primary .sch-card-name,
.sch-card-primary .sch-card-desc {
   color: var(--clr-gray-200);
}

.sch-card-top {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
}

.sch-card-badge {
   position: absolute;
   top: -15px;
   right: var(--space-md);
   background: var(--clr-primary-light);
   color: var(--clr-white);
   font-size: var(--fs-1);
   font-weight: var(--fw-bold);
   text-transform: uppercase;
   letter-spacing: var(--ls-widest);
   padding: 6px 14px;
   border-radius: var(--radius-full);
}

.sch-card-duration {
   font-family: var(--font-accent);
   font-weight: var(--fw-bold);
   font-size: var(--fs-4);
   text-transform: uppercase;
   letter-spacing: var(--ls-wider);
}

.sch-card-name {
   font-family: var(--font-title-modern);
   font-size: var(--fs-9);
   line-height: var(--lh-tight);
   margin-bottom: var(--space-xs);
}

.sch-card-price {
   font-family: var(--font-title-modern);
   font-size: var(--fs-10);
   font-weight: var(--fw-black);
   line-height: 1;
   display: flex;
   align-items: center;

}

.sch-card-price-text {
   font-size: var(--fs-8);
   letter-spacing: var(--ls-tight);
   font-weight: var(--fw-regular);
}

.sch-currency {
   font-size: var(--fs-8);
   font-weight: var(--fw-medium);
   margin-right: 7px;
}

.sch-period {
   font-family: var(--font-body);
   font-size: var(--fs-4);
   font-weight: var(--fw-medium);
   margin-left: auto;
}

.sch-card-desc {
   color: var(--clr-primary-dark);
   font-size: var(--fs-4);
   line-height: var(--lh-relaxed);
   margin-bottom: var(--space-sm);
}


/* ─── FAQ Section ──────────────────────────────────────────── */
.section-faq {
   background: var(--flow-faq);
   padding-top: var(--space-4xl);
   padding-bottom: var(--space-4xl);
}

.faq-layout {
   display: grid;
   grid-template-columns: 4fr 6fr;
   gap: var(--space-4xl);
   align-items: start;
}

.faq-sidebar {
   position: sticky;
   top: 180px;
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

.faq-list {
   display: flex;
   flex-direction: column;
}

.faq-item {
   border-bottom: 1px solid var(--clr-primary-lighter);
   padding: var(--space-lg) 0;
}

.faq-question {
   font-family: var(--font-title-modern);
   font-size: var(--fs-8);
   font-weight: var(--fw-bold);
   color: var(--clr-primary-dark);
   cursor: pointer;
   list-style: none;
   position: relative;
   padding-right: var(--space-2xl);
   transition: color var(--transition-normal);
}

.faq-question::-webkit-details-marker {
   display: none;
}

.faq-question:hover {
   color: var(--clr-primary-light);
}

.faq-icon {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
}

.faq-icon::before,
.faq-icon::after {
   content: '';
   position: absolute;
   background-color: var(--clr-primary-dark);
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: all 0.3s ease;
}

.faq-icon::before {
   width: 16px;
   height: 2px;
}

.faq-icon::after {
   width: 2px;
   height: 16px;
}

.faq-item.active .faq-icon::after {
   transform: translate(-50%, -50%) rotate(90deg);
   opacity: 0;
}

.faq-item.active .faq-question {
   color: var(--clr-primary-light);
}

.faq-answer-wrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer-wrapper {
   grid-template-rows: 1fr;
}

.faq-answer {
   overflow: hidden;
}

.faq-answer p {
   padding-top: var(--space-md);
   color: var(--clr-gray-600);
   font-size: var(--fs-5);
   line-height: var(--lh-relaxed);
}

/* ─── Contact Section ──────────────────────────────────────── */
.section-contact {
   background: var(--flow-contact);
}

.contact-layout {
   display: grid;
   grid-template-columns: 5fr 5fr;
   gap: var(--space-4xl);
   align-items: center;
}

.contact-form-container {
   border: 2px solid var(--clr-primary);
   border-radius: var(--radius-2xl);
   background: var(--clr-gray-50);
}

.c-form {
   display: flex;
   flex-direction: column;
   padding: var(--space-xl) var(--space-lg);
   gap: var(--space-lg);
   border-radius: var(--radius-2xl);
}

.form-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--space-lg);
}

.form-group {
   position: relative;
   display: flex;
   flex-direction: column;
   border: 2px solid var(--clr-gray-300);
   border-radius: var(--radius-full);
   padding-inline: var(--space-md);
   height: 56px;
   transition: all var(--transition-normal);
   background: transparent;
   min-width: 0;
}

.form-group:has(textarea) {
   border-radius: var(--radius-2xl);
   height: 200px;
   padding: var(--space-md);
}

.form-group:focus-within,
.form-group:has(input.form-input:not(:placeholder-shown)),
.form-group:has(textarea.form-input:not(:placeholder-shown)),
.form-group.has-value {
   border-color: var(--clr-primary);
   box-shadow: 0 4px 12px rgba(54, 37, 80, 0.08);
}

.form-input {
   font-family: var(--font-body);
   font-size: var(--fs-5);
   color: var(--clr-primary-dark);
   background: transparent;
   border: none;
   width: 100%;
   padding: 0;
   height: 56px;
}

.form-input:focus {
   outline: none;
}

.form-input::placeholder {
   color: transparent;
}

.form-label {
   position: absolute;
   left: var(--space-md);
   top: 50%;
   translate: 0% -50%;
   font-family: var(--font-body);
   font-size: var(--fs-5);
   color: var(--clr-gray-500);
   pointer-events: none;
   transition: all var(--transition-normal);
   padding: 0;
   white-space: nowrap;
}

.form-group:has(textarea) .form-label {
   top: var(--space-lg);
}

.form-input:focus~.form-label,
input.form-input:not(:placeholder-shown)~.form-label,
textarea.form-input:not(:placeholder-shown)~.form-label,
.form-group.has-value .form-label,
.form-group.custom-select.open .form-label {
   top: -13px;
   transform: none;
   left: 50%;
   translate: -50% 0;
   transform: 0;
   background: var(--clr-primary);
   color: var(--clr-white);
   padding: 2px 12px;
   border-radius: var(--radius-full);
   font-size: var(--fs-2);
}

/* Custom Select UI - Clean Integration */
.form-group.custom-select {
   cursor: pointer;
}

.form-group.custom-select.open {
   border: 2px solid var(--clr-primary);
}

.select-trigger {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   min-width: 0;
}

.selected-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: var(--space-sm);
   flex: 1;
   min-width: 0;
}

.select-trigger::after {
   content: '';
   width: 12px;
   height: 8px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23362550' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-size: cover;
   transition: transform var(--transition-normal);
}

.form-group.custom-select.open .select-trigger::after {
   transform: rotate(180deg);
}

.select-options {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   right: 0;
   background: var(--clr-gray-100);
   border-radius: var(--radius-2xl);
   box-shadow: 0 4px 20px rgba(54, 37, 80, 0.06);
   border: 2px solid var(--clr-primary);
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: all var(--transition-normal);
   z-index: 100;
}

.form-group.custom-select.open .select-options {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.select-option {
   padding: var(--space-sm) var(--space-md);
   font-family: var(--font-body);
   font-size: var(--fs-5);
   color: var(--clr-primary-dark);
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast);
}

.select-option:hover {
   background: var(--clr-gray-200);
   color: var(--clr-primary-dark);
}

.select-option.selected {
   background: var(--clr-gray-200);
   color: var(--clr-primary);
}

.form-textarea {
   height: 100%;
   width: 100%;
   resize: none;
}

.form-submit {
   width: 100%;
   justify-content: center;
   margin-top: var(--space-md);
   padding: var(--space-md) var(--space-xl);
}

.form-submit-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-xl);
   flex-wrap: wrap;
   margin-top: var(--space-sm);
}

.kvkk-group {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   flex: 1;
}

.kvkk-group input[type="checkbox"] {
   display: none;
}

.toggle-switch {
   position: relative;
   display: inline-block;
   width: 44px;
   height: 24px;
   background-color: var(--clr-gray-300);
   border-radius: var(--radius-full);
   cursor: pointer;
   transition: background-color var(--transition-normal);
   flex-shrink: 0;
}

.toggle-switch::after {
   content: '';
   position: absolute;
   top: 2px;
   left: 2px;
   width: 20px;
   height: 20px;
   background-color: var(--clr-white);
   border-radius: 50%;
   transition: transform var(--transition-normal);
   box-shadow: 0 2px 4px rgba(54, 37, 80, 0.15);
}

.kvkk-group input[type="checkbox"]:checked+.toggle-switch {
   background-color: var(--clr-primary);
}

.kvkk-group input[type="checkbox"]:checked+.toggle-switch::after {
   transform: translateX(20px);
}

.kvkk-text {
   font-family: var(--font-body);
   font-size: var(--fs-3);
   color: var(--clr-gray-600);
   line-height: var(--lh-tight);
}

.kvkk-text a {
   color: var(--clr-primary);
   font-weight: var(--fw-medium);
   text-decoration: underline;
   text-decoration-color: var(--clr-primary-lighter);
   text-underline-offset: 2px;
}

.kvkk-text a:hover {
   color: var(--clr-primary-dark);
   text-decoration-color: var(--clr-primary);
}

.contact-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: var(--space-lg);
}

.contact-content .section-title,
.contact-content .section-description {
   text-align: left;
}

/* Info Column Styles */

.contact-info-container {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
}

.info-title {
   font-family: var(--font-title-modern);
   font-size: var(--fs-8);
   color: var(--clr-primary-light);
}

.info-desc {
   color: var(--clr-gray-600);
   font-size: var(--fs-4);
   line-height: var(--lh-relaxed);
   margin-bottom: var(--space-md);
}

.info-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-xl);
}

.info-item {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

.info-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: var(--radius-full);
   background: var(--clr-primary-muted);
   border: 1px solid var(--clr-primary);
   color: var(--clr-primary-dark);
   font-size: var(--fs-5);
   font-weight: var(--fw-bold);
   font-family: var(--font-heading);
}

.info-text {
   display: flex;
   flex-direction: column;
}

.info-text strong {
   color: var(--clr-primary-dark);
   font-weight: var(--fw-bold);
   font-size: var(--fs-4);
}

.info-text a,
.info-text span {
   color: var(--clr-gray-600);
   font-size: var(--fs-5);
   transition: color var(--transition-normal);
}

.info-text a:hover {
   color: var(--clr-primary);
}