/* ===== Genel reset & davranış ===== */
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

/* Sayfa ilerleme çubuğu */
#progressBar{
  position:fixed; top:0; left:0; height:3px; background:#0d6efd; width:0; z-index:2000;
}

/* ===== Body (arka plan & tipografi) ===== */
body{
  background: linear-gradient(-45deg, #e3f2fd, #fce4ec, #fff8e1, #e8f5e9);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite; /* daha yumuşak */
  font-family: 'Poppins', sans-serif;
  text-align: center;
  color: #222;
  position: relative;
  padding-bottom: 0; /* masaüstünde boşluk yok */
}
body::before{ content:""; position:fixed; inset:0; background:rgba(255,255,255,.35); z-index:-1; }
@keyframes gradientBG{ 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ===== Header ===== */
.gl-header{
  background:#0a2472; color:#fff;
  position:sticky; top:0; z-index:1000;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  margin-bottom:20px;
}
.gl-header-inner{
  max-width:1200px; margin:0 auto;
  padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}

/* Logo + başlık & açıklama (logo yanında) */
.gl-header-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; min-width:0; }
.gl-header-logo{ height:40px; width:auto; display:block; flex:0 0 auto; }
.gl-header-text{ display:flex; flex-direction:column; line-height:1.15; overflow:hidden; text-align:left; }
.gl-header-title{ font-weight:800; font-size:1.05rem; color:#fff; white-space:nowrap; }
/* Geniş uyumluluk için renk fallback */
.gl-header-subtitle{
  color: rgba(255,255,255,.8);
  color: #ffffffcc; /* modern tarayıcılar */
  font-weight:500; font-size:.85rem; white-space:nowrap;
}

/* Header CTA buton (dolu turuncu) */
.gl-header-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:9999px;
  font-size: 0.9rem; 
  white-space: nowrap; 
  background:#ff7a00; border:2px solid #ff7a00;
  color:#fff; font-weight:700; text-decoration:none; transition:all .25s ease;
}
@media (max-width: 480px) {
  .gl-header-btn {
    font-size: 0.8rem;
    padding: 8px 12px;   /* daha kompakt */
  }
}
.gl-header-btn:hover{ background:#e56700; border-color:#e56700; transform:translateY(-1px); }

/* Erişilebilirlik */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== CTA blokları ===== */
.logo{ max-width:220px; margin:32px auto 16px; }
.main-title{ font-size:2rem; font-weight:700; color:#2c3e50; margin-bottom:6px; }
.slogan{ font-size:1rem; font-style:italic; color:#6c3483; margin-bottom:14px; }
.desc{ max-width:760px; margin:0 auto 28px; font-size:1.05rem; color:#444; padding:0 12px; }

.video-section{
  max-width:780px; border:3px solid #660099; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(102,0,153,.12); margin:0 auto;
}
.video-intro{ font-size:1.2rem; font-weight:600; color:#d63384; margin:20px 0 12px; }

.gl-container { max-width:1100px; margin:0 auto; padding:0 16px; box-sizing:border-box; }

.gl-cta{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 28px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.15);
  margin:28px 0; color:#fff;
}
.gl-cta-navy{   background:linear-gradient(135deg, #0a2472, #0096c7); }
.gl-cta-purple{ background:linear-gradient(135deg, #6a0dad, #d63384); }
.gl-cta-green{  background:linear-gradient(135deg, #006d4f, #00a86b); }

.gl-cta-left{ display:flex; align-items:flex-start; gap:14px; text-align:left; }
.gl-cta-left .cta-icon{ font-size:2.8rem; flex-shrink:0; margin-top:4px; color:#fff; }
.gl-cta-left .cta-text h2{ margin:0 0 8px; font-size:clamp(1.15rem, 0.9rem + 1vw, 1.5rem); font-weight:800; }
.gl-cta-left .cta-text p{ margin:0; line-height:1.55; opacity:.95; }

.gl-cta-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.gl-cta-btn{
  display:inline-block; padding:10px 18px; border-radius:8px; background:#ff7a18;
  color:#fff; text-decoration:none; font-weight:800; white-space:nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.gl-cta-btn:hover{ background:#e96a10; transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.18); }
.gl-cta-note{ font-size:.9rem; opacity:.92; }

/* Dekoratif animasyonlu çerçeve */
.gl-cta-animated { position:relative; border:3px solid transparent; border-radius:12px; background-clip:padding-box; animation:borderMove 3s linear infinite; }
@keyframes borderMove{
  0%{ box-shadow:0 0 10px rgba(255,255,255,.2), 0 0 20px rgba(255,165,0,.3) }
  50%{ box-shadow:0 0 20px rgba(255,255,255,.4), 0 0 40px rgba(255,165,0,.5) }
  100%{ box-shadow:0 0 10px rgba(255,255,255,.2), 0 0 20px rgba(255,165,0,.3) }
}
.gl-btn-pulse { animation:pulseGlow 1.8s infinite; }
@keyframes pulseGlow{ 0%{ box-shadow:0 0 0 0 rgba(255,165,0,.6) } 70%{ box-shadow:0 0 0 12px rgba(255,165,0,0) } 100%{ box-shadow:0 0 0 0 rgba(255,165,0,0) } }

/* CTA mobil davranış */
@media (max-width:768px){
  .gl-cta{ flex-direction:column; text-align:center; }
  .gl-cta-left{ flex-direction:column; align-items:center; text-align:center; }
  .gl-cta-right{ align-items:center; }
  .gl-cta-btn{ width:100%; }
}

/* ===== Mobil alt menü ===== */
.mobile-bottom-menu{
  display:flex; position:fixed; bottom:0; left:0; right:0; z-index:1035;
  background:#fff; /* fallback */
  background:#ffffffcc; backdrop-filter: blur(8px);
  border-top:1px solid #e5e7eb; box-shadow:0 -4px 16px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bottom-menu a{ flex:1; text-align:center; padding:8px 0 10px; font-size:.75rem; color:#334155; text-decoration:none; line-height:1.1; }
.mobile-bottom-menu i{ font-size:1.15rem; display:block; margin-bottom:2px; color:#0d6efd; }
@media (min-width:992px){ .mobile-bottom-menu{ display:none; } }
/* Mobilde alt menüye yer aç */
@media (max-width:768px){
  body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ===== Kişi Kartı ===== */
.gl-person-card{
  font-family: 'Poppins', sans-serif;
  max-width:900px;
  margin:30px auto 20px; /* footer öncesi 20px boşluk */
  padding:20px;
  display:flex; align-items:center; gap:20px;
  background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.gl-person-card .person-avatar{
  width:150px; height:150px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.gl-person-card .person-info h6{
  margin:0 0 20px;
  font-size:1.2rem;
  font-weight:500;
  color:#222;
}
/* Sosyal ikonlar */
.gl-person-card .person-social{ display:flex; flex-wrap:wrap; gap:12px; }
.gl-person-card .person-social a{
  font-size:1.5rem; color:#444; transition:all .3s ease;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:#f5f5f5;
}
.gl-person-card .person-social a:hover{
  transform:scale(1.15); box-shadow:0 4px 12px rgba(0,0,0,.15); background:#fff;
}
/* Marka renkleri hover */
.gl-person-card .person-social a i{ display:inline-block; } /* gradient text için */
.gl-person-card .person-social a:hover .fa-instagram{
  background:linear-gradient(45deg,#feda75,#d62976,#962fbf,#4f5bd5);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.gl-person-card .person-social a:hover .fa-youtube{ color:#FF0000; }
.gl-person-card .person-social a:hover .fa-facebook{ color:#1877F2; }
.gl-person-card .person-social a:hover .fa-twitter{ color:#1DA1F2; }
.gl-person-card .person-social a:hover .fa-linkedin{ color:#0A66C2; }
.gl-person-card .person-social a:hover .fa-tiktok{ color:#000; }
.gl-person-card .person-social a:hover .fa-telegram{ color:#0088cc; }
.gl-person-card .person-social a:hover .fa-pinterest{ color:#BD081C; }
.gl-person-card .person-social a:hover .fa-snapchat{ color:#FFFC00; }
.gl-person-card .person-social a:hover .fa-whatsapp{ color:#25D366; }

@media (max-width:768px){
  .gl-person-card{ flex-direction:column; text-align:center; }
  .gl-person-card .person-avatar{ width:120px; height:120px; } /* tek değer */
  .gl-person-card .person-social{ justify-content:center; }
}

/* ===== İnce footer (alt şerit) ===== */
.footer-thin{
  padding:10px 0;
  font-size:0.85rem;
  color:#fff;
  background:#0a2472; /* header ile aynı */
  border-top:none;
  text-align:center;
  margin:0;
}

/* ===== Header mobil (tekleştirilmiş) ===== */
@media (max-width:768px){
  .gl-header-inner{ padding:8px 12px; gap:8px; }
  .gl-header-logo{ height:28px; }
  .gl-header-text{ text-align:left; max-width:60vw; line-height:1.2; } /* 60vw seçildi */
  .gl-header-title{ font-size:1rem; }
  .gl-header-subtitle{ font-size:.78rem; color:#dfe6ff; white-space:normal; }
  .gl-header-btn{ padding:8px 12px; font-size:.9rem; font-weight:600; border-radius:14px; line-height:1.05; }
  .gl-header-btn .btn-emoji{ display:inline-block; margin-right:.45em; transform: translateY(1px); }
}

/* Ekstra dar ekranlar (<=420px) için sıkılaştırma */
@media (max-width:420px){
  .gl-header-text{ max-width:58vw; }
  .gl-header-btn{
    padding:6px 10px;
    font-size:.85rem;
    border-width:2px;
  }
}

/* ===== Hareket hassasiyeti için ===== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* ====== Geri Sayım Alanı (Countdown) – EK ====== */

/* Tam genişlik bant */
.countdown-section{
  width:100%;
  background:#0a2472;               /* koyu mavi; istersen #0f172a yap */
  padding:15px 8px;                 /* dar üst-alt boşluk */
  color:#f8fafc;
}

/* İçerik hizalama */
.countdown-content{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;                   /* küçük ekranda alt alta gelebilsin */
  align-items:center;
  justify-content:center;
  gap:15px;                         /* açıklama + sayaç arası yakın */
  text-align:center;
}

/* Açıklama (başlıksız) */
.cta{ 
  flex:1; 
  min-width:260px;                  /* aşırı dar ekranlarda kırılmayı azaltır */
}
.cta p{
  margin:0;
  font-size:1rem;
  line-height:1.4;
  color:#fff;                       /* beyaz metin */
  /* uzun metinde taşma olmasın */
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* Sayaç bloğu */
.countdown{
  flex:1;
  min-width:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Sayaç kapsayıcı – HER ZAMAN TEK SATIR */
.timer{
  display:flex;
  flex-wrap:nowrap;                 /* satır atlamayı engelle */
  gap:10px;
  background:#fff;
  padding:10px 18px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  max-width:100%;
  overflow:hidden;                  /* olası taşmaları gizle */
}

/* Sayaç kutuları */
.time-box{ 
  text-align:center; 
  min-width:64px;                   /* tek satıra sığsın diye minimum genişlik */
}
.value{ 
  font-size:1.4rem; 
  font-weight:700; 
  color:#0f172a; 
}
.label{ 
  font-size:.72rem; 
  color:#475569; 
  margin-top:2px; 
}

.note{ 
  margin-top:6px; 
  font-size:.8rem; 
  color:#cbd5e1; 
}

/* ====== Responsive ====== */

/* Tablet */
@media (max-width: 992px){
  .cta p{ font-size:.95rem; }
  .time-box{ min-width:60px; }
  .value{ font-size:1.3rem; }
  .label{ font-size:.7rem; }
}

/* Telefon */
@media (max-width: 640px){
  .countdown-section{ padding:12px 10px; }   /* daha sıkı bant */
  .countdown-content{
    flex-direction:column;                   /* CTA üstte, sayaç altta */
    gap:12px;
  }
  .cta{ width:100%; }
  .cta p{
    font-size:.95rem;
    line-height:1.45;
    max-width:90ch;                          /* okunur satır uzunluğu */
    margin:0 auto;
  }
  /* Sayaç tek satırda kalsın diye daraltmalar */
  .timer{ gap:8px; padding:8px 12px; }
  .time-box{ min-width:56px; }
  .value{ font-size:1.15rem; }
  .label{ font-size:.68rem; }
}

/* Çok küçük telefonlar */
@media (max-width: 360px){
  .timer{ gap:6px; padding:6px 10px; }
  .time-box{ min-width:50px; }
  .value{ font-size:1.05rem; }
  .label{ font-size:.65rem; }
}
/* === Entrance Effects (Countdown için) === */
.gl-reveal {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
  transition: opacity .6s ease, transform .6s ease;
}
.gl-reveal.gl-inview {
  opacity: 1;
  transform: none;
}

/* İç öğeleri hafif gecikmeyle getirelim */
.gl-reveal-child {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.gl-inview .gl-reveal-child {
  opacity: 1;
  transform: none;
}
.gl-inview .gl-reveal-child:nth-of-type(1) { transition-delay: .05s; }
.gl-inview .gl-reveal-child:nth-of-type(2) { transition-delay: .12s; }

/* Sayaç kutularına kademeli pop-in */
.gl-stagger {
  opacity: 0;
  transform: scale(.96) translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.gl-inview .gl-stagger { opacity: 1; transform: none; }
.gl-inview .gl-stagger:nth-child(1){ transition-delay: .08s; }
.gl-inview .gl-stagger:nth-child(2){ transition-delay: .16s; }
.gl-inview .gl-stagger:nth-child(3){ transition-delay: .24s; }
.gl-inview .gl-stagger:nth-child(4){ transition-delay: .32s; }

/* Hareketi azalt tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .gl-reveal, .gl-reveal-child, .gl-stagger{
    transition-duration: .01ms !important;
    transform: none !important;
  }
}
/* === Hero Keys === */
.gl-hero-keys { margin: 16px auto 10px; }
.gl-hero-keys-title{
  margin: 15px 0 18px;
  font-weight: 900;
  color: #0a2472;
  letter-spacing: .3px;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); /* büyütüldü */
  line-height: 1.3;
}

/* Grid: desktop 6 kolon, mobil 2 kolon */
.gl-keys-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* masaüstü: tek sıra */
  gap: 12px;
}

/* Mobil: 2 kolon */
@media (max-width: 768px){
  .gl-keys-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kart */
.gl-key-card{
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 12px;
  border-radius: 12px;
  background: #ffffffcc;          /* mevcut cam efekti stiline uyum */
  backdrop-filter: blur(6px);
  border: 2px solid #ffffffaa;
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gl-key-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-color: #fff;
}

/* Icon + kelime */
.gl-key-icon{
  font-size: 1.6rem; line-height: 1; color: #d63384; margin-bottom: 6px;
}
.gl-key-word{
  font-weight: 800; color: #222; margin-bottom: 6px;
  font-size: clamp(.98rem, .9rem + .25vw, 1.05rem);
  letter-spacing: .2px;
}
.gl-key-desc{
  margin: 0;
  font-size: .92rem;
  line-height: 1.4;
  color: #444;
  /* uzun metinde taşma olmasın */
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}

/* Çok dar ekranlarda biraz sıkılaştır */
@media (max-width: 360px){
  .gl-key-card{ padding: 12px 10px; }
  .gl-key-icon{ font-size: 1.45rem; }
  .gl-key-desc{ font-size: .9rem; }
}
/* Kutucukların ana stili */
.gl-key-card {
  border: 2px solid transparent; /* degrade için önce şeffaf kenarlık */
  border-radius: 14px;
  background: 
    linear-gradient(#fff, #fff) padding-box, /* içi beyaz */
    linear-gradient(135deg, #ff7a00, #ff3d00) border-box; /* degrade kenarlık */
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}

/* Hover efekti */
.gl-key-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(255, 122, 0, 0.25);
}

/* İkon rengi butonla uyumlu */
.gl-key-card .gl-key-icon {
  color: #ff7a00;
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.section-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff7a00, #ff3d00); /* Şimdi Başla butonunun turuncu tonu */
  margin: 40px 0;   /* üst-alt boşluk */
  border-radius: 2px;
}