/* ==================================================================== */
/* =========== GENEL STİL DOSYASI VE RENK PALETİ (style.css) ============ */
/* ==================================================================== */

/* Temel Ayarlar ve Font */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* KURUMSAL RENKLER */
    --color-primary: #002052; /* Koyu Lacivert */
    --color-secondary: #f7931e; /* Canlı Turuncu */
    --color-gradient-start: #002052; 
    --color-gradient-end: #0a3d70; 
    
    /* Soft Light Mode RENK PALETİ */
    --color-bg-primary: #f8f9fa; 
    --color-bg-secondary: #ffffff;
    --color-text-primary: #212529; 
    --color-text-secondary: #6c757d; 
    --color-border: #e9ecef;
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08); 
    
    /* Buton Renkleri - Mavi (Test Start Butonu / CTA) */
    --color-button-primary-start: #1e88e5; 
    --color-button-primary-end: #0a3d70; 

    /* Hero Butonu Turuncu Renkleri */
    --color-button-hero-start: #ffb74d; 
    --color-button-hero-end: #f7931e;   

    /* Soft Teknoloji/Eğitim Renkleri (Flip Card Arka Yüzü) */
    --color-soft-tech-gradient-start: #26c6da; 
    --color-soft-tech-gradient-end: #00acc1;   

    /* GÜNCELLENMİŞ BUTON IŞILTI Değişkenleri (Mavi Yıldızlar) */
    --sparkle-color: #00796b;         
    --shadow: #002052;                
    --glare: #2196f3;                 
    --font-size-sparkle: 0.95rem;     
    --transition: 0.2s;
    --hover: 0.4;                     
    --pos: 0;                         
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    transition: overflow 0.3s;
}

body.menu-open {
    overflow: hidden;
}

a {
    text-decoration: none;
    color: var(--color-text-primary);
    transition: color 0.3s;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ======================== GERİ SAYIM SAYACI BANNER ======================== */
.countdown-banner {
    background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end)); 
    color: white;
    padding: 15px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.countdown-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.countdown-item {text-align: center;}
.countdown-title {font-size: 0.9rem; font-weight: 600; opacity: 0.9;}
.countdown-time {font-size: 1.6rem; font-weight: 900;}
.countdown-time span {
    display: inline-block;
    padding: 2px 5px;
    background-color: rgba(255, 255, 255, 0.15); 
    border-radius: 4px;
    margin: 0 2px;
    color: var(--color-secondary); 
}
.countdown-divider {width: 1px; height: 50px; background-color: rgba(255, 255, 255, 0.4);}


/* ======================== HERO FULL SCREEN ======================== */
.hero-full-screen {
    width: 100%;
    height: calc(100vh - 70px - 50px); 
    min-height: 550px;
    background: url("img/bg.png") center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 10; 
    display: flex;
    align-items: center; 
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Overlay'i hafiflettim ki blur efekti daha iyi görünsün */
    background: linear-gradient(90deg, rgba(0, 32, 82, 0.75) 35%, rgba(0, 32, 82, 0.3) 75%, rgba(0, 32, 82, 0.1) 100%);
}

.hero-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    height: 100%;
    position: relative; 
}

/* ==================================================================== */
/* ============= HERO TEXT AREA (BULANIK & SAYDAM BEYAZ) ============= */
/* ==================================================================== */

.hero-text-area {
    /* Masaüstünde sol tarafa yaslı ve 50% genişlik */
    max-width: 50%; 
    padding: 40px; 
    
    /* İstenen Blur ve Saydam Beyaz Efekt */
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    
    /* Köşe Yuvarlama Kuralı: Sol üst (0) hariç 20px */
    border-radius: 0 20px 20px 20px; 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); 
}

.hero-text-area h1 {
    font-size: 3.2rem;
    font-weight: 900;
    margin-bottom: 20px; 
    color: var(--color-primary); /* Beyaz arkaplanda koyu renk */
}

.hero-text-area p {
    color: var(--color-text-primary); /* Beyaz arkaplanda koyu renk */
    margin-bottom: 30px;
}

.quick-how-it-works {
    width: 350px; 
    background-color: rgba(255, 255, 255, 0.95);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.quick-how-it-works h3 {
    color: var(--color-primary);
}
.quick-how-it-works ul li i {
    color: var(--color-secondary);
}

/* ======================== GENEL VE HERO BUTON STİLLERİ ======================== */
.action-button {
    display: flex;
    align-items: center;
    padding: 15px 30px; 
    border-radius: 30px; 
    font-weight: 700;
    color: white; 
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
    max-width: 300px; 
    margin: 20px 0; 
}

/* Hero Butonunun Turuncu Stili */
.hero-action-button {
    background: linear-gradient(90deg, var(--color-button-hero-start), var(--color-button-hero-end));
    box-shadow: 0 8px 25px rgba(247, 147, 30, 0.4); 
}

.action-button:hover {
    transform: translateY(-2px);
}

.action-button i {
    margin-left: 10px;
}

/* READ MORE BUTONU VE IŞILTI EFEKTİ (Diğer bölümlerde kullanılan) */
.read-more-btn {
    background-color: var(--color-bg-secondary);
    color: var(--color-primary); 
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--font-size-sparkle);
    transition: all 0.3s ease-out;
    text-decoration: none; 
    display: inline-block; 
    position: relative; 
    overflow: hidden; 
}
.read-more-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #fff 0%, #eee 100%);
    color: var(--color-primary); 
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    --hover: 1;
    --pos: 1;
}
.read-more-btn:active { --hover: 0; }
.read-more-btn span {
    display: inline-block;
    font-size: var(--font-size-sparkle);
    font-weight: 600;
    transition: all 0.2s;
    transform: translate(calc(var(--hover) * (var(--font-size-sparkle) * 0.10)), calc(var(--hover) * (var(--font-size-sparkle) * -0.10)));
}
.read-more-btn span:last-of-type {
    position: absolute;
    inset: 0; 
    padding: 10px 30px;
    background: linear-gradient(
        108deg,
        transparent 0 55%,
        var(--glare) 55% 60%,
        transparent 60% 70%,
        var(--glare) 70% 85%,
        transparent 85%
    ) calc(var(--pos) * -200%) 0% / 200% 100%, var(--sparkle-color);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 2;
    text-shadow: none;
    transform: translate(calc(var(--hover) * (var(--font-size-sparkle) * 0.10)), calc(var(--hover) * (var(--font-size-sparkle) * -0.10)));
    transition: transform 0.2s, background-position 0s;
}
.read-more-btn:hover span:last-of-type {
    transition: transform 0.2s, background-position calc(var(--hover) * 1.5s) calc(var(--hover) * 0.25s);
}
.read-more-btn:active span:last-of-type { --hover: 0; --pos: 1; }
.read-more-btn svg {
	position: absolute;
	z-index: 3;
	width: calc(var(--font-size-sparkle) * 0.5);
	aspect-ratio: 1;
}
.read-more-btn svg path { fill: var(--glare); }
@keyframes sparkle {
	50% { transform: translate(-50%, -50%) scale(var(--s, 1)); }
}
.read-more-btn:hover svg { animation: sparkle 0.75s calc((var(--delay-step) * var(--d)) * 1s) both; }
.read-more-btn svg {
	--delay-step: 0.15;
	top: calc(var(--y, 50) * 1%);
	left: calc(var(--x, 0) * 1%);
	transform: translate(-50%, -50%) scale(0);
}
.read-more-btn svg:nth-of-type(1) { --x: 0; --y: 20; --s: 1.1; --d: 1; }
.read-more-btn svg:nth-of-type(2) { --x: 15; --y: 80; --s: 1.25; --d: 2; }
.read-more-btn svg:nth-of-type(3) { --x: 45; --y: 40; --s: 1.1; --d: 3; }
.read-more-btn svg:nth-of-type(4) { --x: 75; --y: 60; --s: 0.9; --d: 2; }
.read-more-btn svg:nth-of-type(5) { --x: 100; --y: 30; --s: 0.8; --d: 4; }


/* ==================================================================== */
/* ============= CTA BÖLÜMÜ (KARAR VEREMEDİN Mİ?) STİLLERİ (Eski CTA) ============= */
/* ==================================================================== */
.cta-section {
    padding: 80px 0;
    margin-top: 50px;
    background-color: var(--color-bg-secondary); 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.cta-content p {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin-bottom: 30px;
}

/* ======================== FEATURE HIGHLIGHTS (3D FLIP CARD) ======================== */

.feature-highlights {
    margin-top: -100px; 
    position: relative;
    z-index: 50; 
    padding-bottom: 50px; 
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
}

/* 3D DÖNÜŞÜM İÇİN KRİTİK STİLLER */
.feature-card {
    background-color: transparent; 
    height: 300px; 
    perspective: 1000px; 
    cursor: pointer;
}

.feature-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s; 
    transform-style: preserve-3d; 
    box-shadow: var(--shadow-soft); 
    border-radius: 12px;
}

/* JS ile tetiklenen mobil dönüşüm için sınıf */
.feature-card-inner.flipped {
    transform: rotateY(180deg);
}

/* Masaüstü Hover Etkisi */
@media (min-width: 1051px) {
    .feature-card:hover .feature-card-inner {
        transform: rotateY(180deg); 
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 
    }
}


.feature-card-front, .feature-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.feature-card-back {
    transform: rotateY(180deg); 
    background: linear-gradient(135deg, #002052 0%, #0a3d70 100%); 
    color: white; 
    border-color: var(--color-soft-tech-border);
}

.feature-icon {
    font-size: 3rem; 
    display: block;
    margin-bottom: 15px;
    color: var(--color-primary); 
}

.feature-card-front h3 {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.feature-card-back h4 {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 10px;
}
.feature-card-back p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Detay Göster Butonu Stilleri (Mobil Tetikleyici) */
.detail-toggle-btn {
    background: none;
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
    margin-top: auto; 
    display: none; 
}

.detail-toggle-btn i {
    margin-right: 8px;
}

.detail-toggle-btn:hover {
    background-color: var(--color-secondary);
    color: white;
}

/* ARKA YÜZ Butonu Stili */
.detail-toggle-btn.back-btn {
    border-color: white;
    color: white;
}
.detail-toggle-btn.back-btn:hover {
    background-color: white;
    color: var(--color-primary);
}
.detail-toggle-btn.back-btn i {
    margin-right: 0;
    margin-left: 8px; 
}

.hemen-basla{
    background: orange;
    padding: 15px;
    border-radius: 30px;
    color: #fff;
    transition: all 0.4s ease-in-out; 
}
.hemen-basla:hover {
    background: none;
    color: #f7931e;
    border:1px solid #f7931e;
    transition: all 0.4s ease-in-out; 
}




/* ==================================================================== */
/* ============= SOSYAL MEDYA BANNER BÖLÜMÜ STİLLERİ (AURA/HALO EFEKTİ) ============= */
/* ==================================================================== */

.social-banner {
    background-color: var(--color-bg-primary); 
    padding: 60px 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.social-banner h2 {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 40px;
}

.social-links-big {
    display: flex;
    justify-content: center;
    gap: 40px; 
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; 
    height: 80px;
    border-radius: 50%;
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
    
    color: var(--color-text-secondary); 
    background-color: transparent; 
    border: none; 
    
    font-size: 2.5rem; 
    transition: all 0.4s ease-in-out; 
    cursor: pointer;
}

.social-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    will-change: transform, opacity; 
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    z-index: -1; 

    /* IŞIK YAYILMASI İÇİN FİLTRE VE ÖN EKLER */
    filter: blur(8px); 
    -webkit-filter: blur(8px); 
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
}

.social-icon i {
    transition: color 0.4s ease-in-out;
    z-index: 2; 
}

.social-icon:hover {
    transform: translateY(-5px) scale(1.05); 
    color: white; 
}

.social-icon:hover::before {
    transform: translate(-50%, -50%) scale(1.8); 
    opacity: 0.8; 
}

/* PLATFORM RENKLERİ VE YAYILMA (::before BACKGROUND) */
.social-icon.instagram::before {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 35%, #d6249f 60%, #405ede 90%);
}

.social-icon.tiktok::before {
    background: linear-gradient(135deg, #00f2ea 0%, #ee1d52 100%);
}

.social-icon.youtube::before {
    background-color: #ff0000;
}
.card {
  display: flex;
  width: 500px;
  height: 50px;
  /* gap: 1.2rem; */
  background-color: whitesmoke;
  border-radius: 115px;
  padding-inline: 15px;
  position: relative;
  justify-content: space-around;
  /* align-items: center; */
}

.social-icons {
  cursor: pointer;
  display: flex;
  transition: all 0.5s;
  align-items: center;
  justify-content: center;
  position: relative;
  color: white;
  font-weight: bold;
  font-size: small;
}

.social-icons > p {
  --var: -0%;
  position: absolute;
  top: var(--var);
  transition: all 0.7s;
  background-color: dodgerblue;
  border-radius: 7px;
  opacity: 0;
  padding-inline: 7px;
  padding-block: 3px;
  width: max-content;
}
.social-icons > p::after {
  content: "";
  position: absolute;
  border-top: 10px solid dodgerblue;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  top: 100%;
  left: 50%;
  transform: translate(-50%);
}
.social-icons > a {
  --var: -0%;
  position: absolute;
  bottom: var(--var);
  width: max-content;
  transition: all 0.7s;
  opacity: 0;
  padding-inline: 7px;
  padding-block: 3px;
  background-color: crimson;
  border-radius: 7px;
}
.social-icons > a::after {
  content: "";
  position: absolute;
  border-bottom: 10px solid crimson;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
}

.social-icons:hover > a,
.social-icons:hover > p {
  --var: -65%;
  opacity: 1;
}

.social-icons:hover {
  z-index: 15;
}

.card:hover > .social-icons:not(:hover) {
  filter: blur(3px);
  transform: scale(0.8);
}

.card svg {
  height: 30px;
}


/* ==================================================================== */
/* ============= FOOTER STİLLERİ (MODERN VE ELİT TASARIM) ============= */
/* ==================================================================== */

.footer {
    background-color: var(--color-bg-secondary); 
    padding: 60px 0 30px; 
    border-top: 1px solid var(--color-border);
    margin-top: 40px; 
}

.footer-social-mobile, .social-links.desktop-only {
    display: none; 
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr; 
    gap: 40px;
}

.footer-logo {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--color-primary);
    display: block;
    margin-bottom: 15px;
}

.footer-info-col p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
}

.footer-col .footer-title {
    color: var(--color-primary); 
    margin-bottom: 20px;
    font-weight: 800;
    font-size: 1.2rem; 
    letter-spacing: 0.5px;
    position: relative;
}

.footer-col .footer-title::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--color-secondary); 
    margin-top: 8px;
    border-radius: 2px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: var(--color-text-primary); 
    font-size: 1rem;
    transition: color 0.3s;
    font-weight: 500;
}

.footer-col ul li a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-list i {
    color: var(--color-secondary);
    font-size: 1.1rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    margin-top: 40px;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ======================== MOBİL UYUMLULUK EK STİLLERİ (MEDIA QUERY) ======================== */

@media (max-width: 1050px) {
    
    /* HERO TEXT AREA MOBİL UYUMLULUK */
    .hero-text-area {
        max-width: 90%; /* Mobilde daha geniş */
        margin: 0 auto; /* Ortalamak için */
        padding: 30px 20px; 
    }
    .hero-text-area h1 {
        font-size: 2.5rem;
    }
    .hero-content-wrapper {
        justify-content: center; /* Ortalamak için */
    }
    .quick-how-it-works {
        display: none; /* Mobilde bu kısmı gizleyebiliriz */
    }
    
    /* FEATURE HIGHLIGHTS MOBİL DÜZELTMELERİ */
    .feature-highlights {
        margin-top: 0; 
        padding-top: 30px; 
        padding-bottom: 30px; 
    }
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .feature-card {
        height: 350px; 
    }
    .detail-toggle-btn {
        display: inline-flex;
    }

    /* FOOTER TABLET DÜZENLEME */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 25px;
    }
    .footer-info-col {
        grid-column: span 2; 
    }
}

@media (max-width: 768px) {
    /* CTA BÖLÜMÜ MOBİL DÜZELTMELERİ */
    .cta-section {
        padding: 50px 0;
        margin-top: 30px;
    }
    .cta-content h2 {
        font-size: 2rem;
    }
    .cta-content p {
        font-size: 1rem;
    }
    
    /* FOOTER TELEFON DÜZENLEME */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .footer-col {
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 20px;
    }
    .footer-col:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }
}

@media (max-width: 600px) {
    /* SOSYAL BANNER MOBİL */
    .social-banner {
        padding: 40px 0;
    }
    .social-banner h2 {
        font-size: 1.6rem;
        margin-bottom: 25px;
    }
    .social-links-big {
        gap: 20px;
    }
    .social-icon {
        width: 60px; 
        height: 60px;
        font-size: 1.8rem;
    }
}