/* Kataş-Sen Özel Tema */
:root{
  --ks-blue:#004080;
  --ks-blue-light:#0066cc;
  --ks-black:#111111;
  --ks-bg:#f5f7fb;
  --radius:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--ks-bg);
  color:#222;
}




.site-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.06);
}

.site-header .top-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
}
.site-header .logo img{ height:150px; width:auto }

.banner .banner-placeholder{
  width:50%; height:90px; border:2px dashed #cdd6ea; border-radius:var(--radius);
  background:linear-gradient(90deg,#eef3ff,#ffffff);
}

.nav-row{ border-top:1px solid #e8ecf7 }
.navbar{
  display:flex; align-items:center; gap:16px; padding:8px 16px;
}
.burger{ display:none; font-size:24px; background:var(--ks-blue); color:#fff; border:0; padding:8px 12px; border-radius:10px }
.navlinks{ 
    list-style:none; 
    display:flex; 
    gap:5px; 
    padding:0; 
    margin:0; 
    flex:1; 
    justify-content:center 
    flex-wrap: wrap; /* menü öğeleri alt satıra kayacak */
}
.navlinks a{ text-decoration:none; color:var(--ks-black); padding:10px 14px; border-radius:10px; transition:.2s }
.navlinks a:hover{ background:rgba(0,64,128,.08); color:var(--ks-blue) }
.lang-switch a{ text-decoration:none; padding:6px 8px; color:#666 }
.lang-switch a.active{ color:#fff; background:var(--ks-blue); border-radius:8px }

.hero{
  max-width:1100px; margin:26px auto; background:#fff; padding:20px; border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.hero .video-pin{
  background:#0b2d5a; color:#fff; padding:10px 14px; border-radius:10px; display:inline-block; margin-bottom:10px
}
.hero iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:10px }

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
  max-width:1100px; margin:16px auto;
}
.card{
  background:#fff; border-radius:var(--radius); padding:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
  transition: transform .2s ease;
}
.card:hover{ transform: translateY(-3px) }
.card h3{ margin:0 0 8px; color:var(--ks-blue) }





.site-footer{ 
    margin-top:40px; 
    background:#0b2244; 
    color:#dfe9ff; 
    padding:22px; 
    text-align:center 
    
}

/* Responsive */
@media (max-width: 1000px){
  .banner .banner-placeholder{ width:360px; height:60px }
}
@media (max-width: 720px){
  .banner .banner-placeholder{ display:none }
  .burger{ display:block }
  .navlinks{ display:none; position:absolute; left:0; top:120px; width:100%; flex-direction:column; background:#fff;
    padding:14px; border-top:1px solid #e8ecf7; box-shadow:0 12px 18px rgba(0,0,0,.06) }
  .navlinks.open{ display:flex }
}


.logo h2 {
  font-size: 18px;
  line-height: 1.3;
  color: #000;
}
.logo h2 span {
  font-size: 16px;
  font-weight: normal;
}

@media (max-width: 720px) {
  .logo h2 {
    font-size: 16px;
    line-height: 1.4;
  }
  .logo h2 span {
    font-size: 14px;
  }
}
/* Genel yazılar */
body {
  font-size: 16px; /* Masaüstü */
}

@media (max-width: 720px) {
  body {
    font-size: 18px; /* Telefon ekranında biraz daha büyük */
  }
}

/* Menü yazıları */
.navbar a {
  font-size: 16px;
}

@media (max-width: 720px) {
  .navbar a {
    font-size: 18px;
  }
}





.contact-info {
    background: #f5f8ff;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}
.contact-info p {
    margin: 6px 0;
    font-size: 15px;
}






#message-box {
  display: none; /* Açılışta görünmesin */
}


#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #a3cfff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}

.preloader-row {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s forwards;
}

.preloader-logo {
  height: 50%; /* LOGO BÜYÜTÜLDÜ */
  transform: translateX(0);
  animation: slideLogo 1s ease forwards 1.2s;
}

.preloader-text {
  color: black;
  font-size: 28px; /* Yazı da büyütüldü */
  font-weight: bold;
  opacity: 0;
  transform: translateX(50px);
  animation: showText 1s ease forwards 2.2s;
}
.preloader-text span {
  font-size: 20px;
  font-weight: normal;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLogo {
  to {
    transform: translateX(-80px);
  }
}
@keyframes showText {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}

.preloader-hide {
  animation: fadeOut 0.8s ease forwards;
}