* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     background: #f9f9f9;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     min-height: 100vh;
 }

 header {
     margin-top: 0;
     padding: 0;
 }


 .menu-cubugu {
     display: flex;
     position: fixed;
     width: 100%;
     height: 15vh;
     top: 0;
     z-index: 1000;
     justify-content: space-around;
     align-items: center;
     padding: 0.6rem 1rem;
     background-color: #fff;
     color: black;
     box-shadow: 7px 7px 15px rgba(27, 0, 228, 0.6);
 }

 .anabaslik {

     display: flex;
     align-items: stretch;
     justify-content: center;
     gap: 0;
 }


 .logo {
     font-weight: 800;
     font-size: 1.8rem;
     color: #060077;
     font-style: italic;

 }

 .logo a {
     text-decoration: none;
 }

 .anabaslik img {
     max-height: 50px;
     width: auto;
     margin-left: 10px;
     max-width: 80px;
 }

 /* Hamburger menü butonu */
 .menu-toggle {
     display: none;
     background: none;
     border: 0;
     color: white;
     font-size: 1.5rem;
     cursor: pointer;
     padding: 6px;
 }

 /* Menü listesi */
 .linklerim {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     list-style: none;

 }

 .menu-oge {
     position: relative;

 }

 .menu-oge a,
 .menu-oge>button,
 .menu-oge.acilir-toggle {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     padding: 7px 12px;
     text-decoration: none;
     color: black;
     font-size: 1.2rem;
     background: none;
     border: 0;
     cursor: pointer;
     font-weight: 700;
 }

 .menu-oge a:hover,
 .menu-oge>button:hover,
 .menu-oge.acilir-toggle:hover {
     color: rgb(15, 15, 143);
 }

 /* Ok ikonu */
 .acilir>button .down-icon {
     font-size: 0.8rem;
     transition: transform .2s ease;
 }

 .acilir.open>button .down-icon {
     transform: rotate(180deg);
 }

 /* Açılır pencere - masaüstü */
 .acilir-pencere {
     display: none;
     position: absolute;
     top: 100%;
     /* tam altına yapış */
     left: 0;
     min-width: 200px;
     background-color: #7c76f5;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
     border-radius: 6px;
     z-index: 50;
 }

 .acilir.open .acilir-pencere {
     display: block;
 }

 .acilir-pencere a {
     display: block;
     padding: 10px 12px;
     color: white;
     text-decoration: none;
     font-weight: 600;
 }

 .acilir-pencere a:hover {
     background: rgba(0, 0, 0, 0.1);
 }

 .anakutu {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 75vh;
     background-image: url("images/cilt-bakimi.jpg");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
     overflow: hidden;
     margin-top: 15vh;
     box-shadow: 0 8px 20px rgba(0, 20, 60, 0.25);
 }

 /* koyu mavi şeffaf gölge */
 .anakutu::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 20, 60, 0.35);
     z-index: 0;
 }

 /* içteki yazı stili */
 .anakutu p {
     position: relative;
     word-break: break-word;
     z-index: 1;
     color: #fff;
     font-size: 45px;
     font-family: 'Dancing Script', cursive;
     font-weight: 600;
     text-align: center;
     text-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
     line-height: 1.3;
     letter-spacing: 1px;
     opacity: 1;
     transition: opacity 0.9s ease-in-out;
     /* 🔹 yazıya fade geçiş */
 }


 .anaicerik {
     display: flex;
     flex-direction: column;
     padding-top: 60px;
     /* Menü çubuğu yüksekliği kadar boşluk bırak */

     margin: 1rem;


 }

 .kutu1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
     background-color: #fff;
     box-shadow: 0 2px 4px rgb(0, 50, 158);
     margin-bottom: 2rem;

 }

 .kutu1 .sol {
     flex: 1;
     padding-right: 1rem;


 }

 .kutu1 .sag {
     flex: 0 0 300px;
     max-width: 300px;
     overflow: hidden;
 }

 .kutu1 .sag img {
     width: 100%;
     height: auto;
     max-height: 350px;

 }

 .yuvarlak {
     border-radius: 50%;
 }

 .kare {
     border-radius: 8px;
 }

 .kutu1 h2 {
     margin-bottom: 0.5rem;
     color: #060077;
 }

 .kutu1 p {
     line-height: 1.6;
     color: #333;
 }

 .kutu1 .sol p {
     margin-bottom: 1rem;
 }

 .kutu2 {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1rem;
     padding: 1rem;

     background-color: #fff;
     margin-bottom: 2rem;
     border-radius: 8px;
     flex-wrap: wrap;
     overflow-y: auto;

 }

 .kart {
     background-color: #f0f0f0;

     border-radius: 8px;
     text-align: center;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .kart img {
     width: 100%;
     height: 200px;
     border-radius: 8px;
     margin-bottom: 0.5rem;
 }

 .kart h3 {
     margin-bottom: 0.5rem;
     color: #060077;
 }

 .kart p {
     color: #555;
     font-size: 0.9rem;
     line-height: 1.4;
     margin-top: 10px;
 }

 .kart .btn {
     display: inline-block;
     margin: 1rem 0 1.5rem 0;
     padding: 8px 16px;
     background-color: #060077;
     color: white;
     text-decoration: none;
     border-radius: 4px;
     font-weight: 600;
 }

 .kart .btn:hover {
     background-color: #040147;
 }

 .kart:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     transform: translateY(-5px);
     transition: all 0.3s ease;
 }

 .kutu3 {
     display: flex;
     flex-direction: column;
     gap: 2rem;
     padding: 1rem;

     /* Tek background-color */
     margin-bottom: 2rem;
     border-radius: 8px;
     overflow-x: hidden;
 }

 .cerceve {
     display: flex;
     position: relative;
     flex-wrap: nowrap;
     width: 100%;
     height: 50vh;
     justify-content: flex-start;
     border: 4px solid #060077;
     border-radius: 8px;
     margin: 1rem;

     overflow-x: hidden;
     z-index: 1;
 }

 .buttonlarim {
     display: flex;
     justify-content: space-between;
     align-items: center;
     transform: translateY(-10px);
 }

 #sag,
 #sol {
     position: absolute;
     background-color: #060077;
     color: white;
     border: none;
     width: 40px;
     height: 40px;
     padding: 10px 15px;
     cursor: pointer;
     font-size: 1.2rem;
     border-radius: 4px;
     z-index: 10;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }


 .calismalar {
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
     justify-content: stretch;
     transition: transform 0.9s ease;
     gap: 20px;
 }

 .calismalar img {
     width: calc(100% / 4);
     height: 100%;

     object-fit: cover;
     border-radius: 12px;
 }

 .kutu3 {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     padding: 1rem;
     background-color: #f0f0f0;
     margin-bottom: 2rem;
     border-radius: 8px;
     overflow: hidden;
 }

 .cerceve {
     display: flex;
     position: relative;
     flex-wrap: nowrap;
     width: 100%;
     height: 50vh;
     justify-content: flex-start;

     border-radius: 8px;
     background-color: white;
     overflow: hidden;
 }

 .calismalar {
     display: flex;
     gap: 20px;
     transition: transform 0.5s ease;
     touch-action: pan-x;
     -webkit-overflow-scrolling: touch;
 }

 .calismalar img {
     flex: 0 0 calc(25% - 15px);
     /* 4 resim için */
     height: 100%;
     object-fit: cover;
     border-radius: 12px;
 }

 /* Dokunmatik kaydırma için */
 .cerceve::-webkit-scrollbar {
     display: none;
 }

 /* Butonlar */
 #sol,
 #sag {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background-color: #060077;
     color: white;
     border: none;
     width: 40px;
     height: 40px;
     cursor: pointer;
     font-size: 1.5rem;
     border-radius: 4px;
     z-index: 10;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 #sol {
     left: 10px;
 }

 #sag {
     right: 10px;
 }


 .kutu4 {
     background: linear-gradient(135deg, #0B1B3F, #1A2A5A);
     color: #fff;
     text-align: center;
     padding: 3rem 2rem;
     border-radius: 15px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
     max-width: 700px;
     margin: 2rem auto;
     position: relative;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .kutu4::before {
     content: "";
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: rgba(255, 215, 0, 0.05);
     transform: rotate(45deg);
 }

 .kutu4:hover {
     transform: translateY(-5px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
 }

 .kutu4 h3 {
     font-size: 2rem;
     margin-bottom: 1rem;
     color: #FFD700;
     /* Altın sarısı vurgu */
     letter-spacing: 1px;
 }

 .kutu4 p {
     font-size: 1.1rem;
     margin-bottom: 0.8rem;
     color: #e0e6f3;
 }

 .kutu4 .btn {
     display: inline-block;
     margin-top: 1rem;
     padding: 0.8rem 2rem;
     background-color: #FFD700;
     color: #0B1B3F;
     font-weight: 600;
     border-radius: 50px;
     text-decoration: none;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .kutu4 .btn:hover {
     background-color: #e6c200;
     transform: scale(1.05);
 }



 .whatsapp-float {
     position: fixed;
     width: 60px;
     height: 60px;
     bottom: 25px;
     right: 25px;
     background-color: #25d366;
     color: #FFF;
     border-radius: 50px;
     text-align: center;
     font-size: 30px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.4s;
     animation: pulse 2s infinite;
 }

 .whatsapp-float:hover {
     background-color: #128C7E;
     transform: scale(1.1);
 }

 .whatsapp-float i {
     margin-top: 5px;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
     }
 }



footer {
  background: linear-gradient(to right, #0a2342, #1b3b6f);
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
  border-top: 3px solid #5ca0d3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* İçerik düzeni */
.footer-container {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Sosyal medya ikonları */
.footer-social a {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0.6rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social a:hover {
  color: #5ca0d3;
  transform: scale(1.2);
}

/* Telif yazısı */
.footer-bottom {
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.8;
}


 /* Responsive tasarım */
 @media (max-width: 1024px) {
     body {
         font-size: 14px;
         line-height: 1.5;
         display: flex;
         flex-direction: column;
         min-height: 100vh;



     }

     .anaicerik {
         padding: 70px 15px 20px 15px;
         background: #f9f9f9;
         display: flex;
         flex-direction: column;
         gap: 2rem;

     }


     .menu-toggle {
         display: block;
         z-index: 1000;
         background-color: #060077;
         border-radius: 4px;
     }

     .linklerim {
         position: fixed;
         top: 0;
         color: white;
         right: 0;
         width: 75%;
         max-width: 320px;
         height: 100%;
         background: linear-gradient(to right, #241da7, #040147);
         transform: translateX(1000%);
         flex-direction: column;
         align-items: stretch;
         padding-top: 3rem;
         transition: transform .3s ease;
         z-index: 999;
     }

     .linklerim.aktiflik {
         transform: translateX(0);
     }

     .menu-oge {
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         color: white;
     }

     .menu-oge a,
     .menu-oge>button {
         font-size: 1.2rem;
         padding: 14px 18px;
         width: 100%;
         text-align: left;
         color: white;
     }

     .menu-oge a:hover,
     .menu-oge>button:hover {
         background: rgba(255, 255, 255, 0.1);
         color: white;
     }

     .acilir-pencere {
         position: relative;
         top: 0;
         left: 0;
         display: none;
         background: none;
         box-shadow: none;
         min-width: 100%;
     }

     .acilir.open .acilir-pencere {
         display: block;
     }

     .acilir-pencere a {
         padding-left: 32px;
     }

 }

 @media (max-width: 768px) {
     .calismalar img {
         flex: 0 0 calc(50% - 10px);
         /* mobilde 2 resim */
     }

     .kutu1 {
         display: flex;
         flex-direction: column;
         align-items: center;
         border: none;
     }

     .kutu4 h3 {
         font-size: 1.5rem;
     }

     .kutu4 p {
         font-size: 1rem;
     }
     footer {
    padding: 1.5rem 0.5rem;
    font-size: 0.9rem;
  }

  .footer-social a {
    font-size: 1.3rem;
    margin: 0 0.4rem;
  }
   
         .footer-container {
              display:flex;
             flex-direction: column;
              gap:5px;
             align-items: center;
             text-align: center;
         }


     }

 


 @media (max-width: 480px) {
     .calismalar img {
         flex: 0 0 calc(80% - 10px);
         /* mobilde tek resim daha büyük */
     }

 }