.onayla,.reddet{width:40%;height:50px;font-weight: 700;}#loadingson,#siparisozeti{position:absolute;top:0;width:100%;background-color:#fff}body{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}model-viewer{position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
z-index: 0;
background-color: white;
}h2{color:#fff;font-size:small}.reddet{border:none;border-radius:50px;background-color: #000000;color: white;
      border: 2px solid #000000;}.onayla{background-color:#C41414;color: white; border: 2px solid #C41414;border-radius:50px}#arkadiv,#beldiv,#nickdiv,#ondiv,#ondivfab{display:none}#loadingson{transition:ease-out,opacity 2s;pointer-events:all;display:grid;place-items:center;height:100vh;z-index:999}#siparis-tamamla{z-index:50;overflow-y:scroll}@media (max-width:1000px){#siparis-tamamla{z-index:50;overflow-y:scroll;align-items:center;align-content:center}}#F_atru_a{z-index:51}#siparisozeti{display:none;height:100%;z-index:50} ul.matter-item {margin-left: 20px; }ul.matter-item li {list-style: disc;margin-bottom: 5px;}

   
#hawkOrderBtn {

font-size: 0.8em;
border: none;
background: #ff5e5e;
color: white;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}

#hawkOrderBtn:hover {
background: #e84141;
}

.hawk-order-popup-overlay {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}

.hawk-order-popup {
background: #1f1f1f;
padding: 2em;
border-radius: 12px;
max-width: 420px;
width: 90%;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
color: white;
}

.hawk-order-popup h2 {
margin-top: 0;
font-size: 1.4em;
margin-bottom: 1em;
color: #ffeacc;
}

#hawkOrderInput {
width: 100%;
padding: 0.75em;
font-size: 1em;
border: none;
border-radius: 6px;
margin-bottom: 1em;
}

.hawk-order-popup-actions {
display: flex;
justify-content: space-between;
gap: 1em;
}

.hawk-order-popup-actions button {
background: #ffeacc;
color: #000;
border: none;
padding: 0.5em 1em;
border-radius: 6px;
cursor: pointer;
}

.hawk-order-cancel-btn {
background: transparent;
color: #ccc;
border: 1px solid #555;
}

.hawk-order-popup-actions button:hover {
opacity: 0.85;
}

#hawkOrderResult {
border-top: 1px solid #444;
padding-top: 1em;
font-size: 0.95em;
color: #ddd;
}

#hawkOrderResult strong {
color: #ffeacc;
}
#hawkOrderBtn {

font-size: 0.8em;
border: none;
background: #ff5e5e;
color: white;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease;
}

#hawkOrderBtn:hover {
transform: scale(1.1);}
#hawkModeBtn:hover {
transform: scale(1.1);}
#howToUseBtn:hover {

transform: scale(1.1);}

/* Sözleşme Metinleri */
.hawk-contract-container h3 { color: #C41414; font-size: 16px; font-weight: 700; margin-bottom: 15px; text-decoration: underline; }
.hawk-contract-container p { margin-bottom: 12px; text-align: justify; }
.hawk-contract-container strong { color: #000; }

.flag {
  position: relative;
  width: 300px;
  height: 200px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.turkey {
  background: #e30a17;
}

/* Turkey Moon */
.turkey::before {
  position: absolute;
  content: "";
  width: 80px;
  aspect-ratio: 1;
  border-radius: 1in;
  left: 73px;
  top: 60px;
  box-shadow: -13px 0 0 10px white;
}

/* Turkey Star */
.turkey::after {
  content: "";
  position: absolute;
  left: 48%;
  top: calc(50% - 25px);

  height: 50px;
  aspect-ratio: 1;
  background: white;
  transform: rotate(-15deg);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.united_kingdom {
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  background: #213064;
}

.united_kingdom__plus {
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px white) drop-shadow(10px 0 white)
    drop-shadow(-10px 0 white) drop-shadow(0 -10px white);
}

.united_kingdom__plus .plus {
  width: 100%;
  height: 100%;
  background-color: #e51837;
  clip-path: polygon(
    0% 43%,
    45% 43%,
    45% 0%,
    55% 0%,
    55% 43%,
    100% 43%,
    100% 58%,
    55% 58%,
    55% 100%,
    45% 100%,
    45% 58%,
    0% 58%
  );
}

.united_kingdom__x {
  position: absolute;
  inset: 0;
}

.united_kingdom__x > .x__strip-1,
.united_kingdom__x > .x__strip-2 {
  position: relative;
  background-color: rgb(255 255 255);
  height: 32px;
  transform: rotate(-28deg) scalex(1.3) translate(-30px, 73px);
}

.united_kingdom__x > .x__strip-2 {
  transform: rotate(28deg) scalex(1.3) translate(13px, 47px);
}

.united_kingdom__x > .x__strip-1::before,
.united_kingdom__x > .x__strip-1::after,
.united_kingdom__x > .x__strip-2::before,
.united_kingdom__x > .x__strip-2::after {
  position: absolute;
  background-color: #e51837;
  content: "";
  width: 50%;
  height: 10px;
}

.united_kingdom__x > .x__strip-1::before {
  bottom: 7px;
}

.united_kingdom__x > .x__strip-1::after {
  top: 7px;
  left: 50%;
}

.united_kingdom__x > .x__strip-2::before {
  bottom: 7px;
}

.united_kingdom__x > .x__strip-2::after {
  top: 7px;
  left: 50%;
}
#whatsapppp {
  
  width: 134px;
  z-index: 99;
  background-color: #e2e2e278;
  border-radius: 50px;
  transition: transform 0.3s ease; /* Yumuşak geçiş efekti ekler */
}

#whatsapppp:hover {
  transform: scale(1.1);
cursor: pointer;
}
                      #siparis-button {
                      background-color: #a62020;
                      border: 2px solid #a62020;
                      color: white;
                      font-family: 'Poppins', sans-serif;
                      font-size: 14px;
                      font-weight: 300;
                      padding: 4px 12px;
                      border-radius: 24px;
                      -webkit-transition: .3s ease;
                      transition: .3s ease;
                      display: block; /* Default to hidden */
                      
                  
                      width: 100%;
                       height: 60px;
                  }
                  #siparis-button2 {
                      background-color: #a62020;
                      border: 2px solid #a62020;
                      color: white;
                      font-family: 'Poppins', sans-serif;
                      font-size: 14px;
                      font-weight: 300;
                      padding: 4px 12px;
                      border-radius: 24px;
                      -webkit-transition: .3s ease;
                      transition: .3s ease;
                      display: none; /* Default to hidden */
                      position: absolute;
                      top: 0;
                      right: 0;
                      height: unset;
                  }
                  #parametericon2{
                          width: 36px;
                          height: 36px;
                          z-index: 45;
                          right: 10%;
                          left: unset;

                          position: absolute;
                          top: 3%;
                          background-color: #e0e0e085;
                          border-radius: 50px;
                          bottom: unset;
                          margin-right: 21px;
                      }
                      #parametericon{
                          width: 36px;
                          height: 36px;
                          z-index: 45;
                          right: 3%;
                          left: unset;
                          position: absolute;
                          top: 3%;
                          background-color: #e0e0e085;
                          border-radius: 50px   ;
                          bottom: unset;
                      }
                      
 #paramatersdiv{
  position: absolute;
          width: 150px;
          height: 36px;
          display: flex;
          z-index: 41;
        
          bottom: 9vh;
          left: unset;
          right: 0;
          justify-content: space-evenly;
}
.customize-hawkchair-container .hawkchair-container .selection-container button.selection-button {
  padding: 5px 20px;
  height: 40px;
  background-color: #e2e2e2c2;
  color: black;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 7px;
  border-radius: 10px;
  transition: .3s ease;
  outline: none;
  border: none;
}    

                  /* Media query to hide the button on mobile devices */
                  @media (max-width: 1000px) {
                      #siparis-button2 {
                          display: block;
                      }
                      #siparis-button {
                   
                      display: none; /* Default to hidden */
                      
                  
                  }
                  #paramatersdiv{
                      position: fixed;
  width: 100px;
  height: 26px;
  display: flex;
  z-index: 41;
  bottom: 15vh;
  left: 3px;
  top: unset;
  right: unset;
  justify-content: space-evenly;
}
 


                      
                #parametericon2{
                          width: 25px;
                          height: 25px;
                          z-index: 99;
                          left: 12%;
                          right: unset;
                          position: fixed;
                          top: unset;
                          bottom: 3%;

                          background-color: #e0e0e085;
                          border-radius: 50px;
                      }
                      #parametericon{
                          width: 25px;
                          height: 25px;
                          z-index: 99;
                          left: 3%;
                          right: unset;
                          position: fixed;
                          top: unset;
                          bottom: 3%;
                          background-color: #e0e0e085;
                          border-radius: 50px   
                      }
                      .customize-hawkchair-container .next-graphic {
  position: fixed;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: none;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  margin-top: 30px;
  bottom: 19%;
}
.customize-hawkchair-container .mobile-logo {
      display: flex;
      z-index: 99;
  }
.customize-hawkchair-container .hawkchair-container .view-component {
  position: fixed;
  z-index: -9;
  left: unset;
  top: unset;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transition: .3s ease;
  margin-top: 30px;
  bottom: 19%;
}
.customize-hawkchair-container .hawkchair-container .selection-container.active {
      opacity: 1;
      top: 30px;
      z-index: 10;
  }
.customize-hawkchair-container .hawkchair-container .view-component.active {
  top: unset; 
  opacity: 1;
  z-index: 10;
}
.customize-hawkchair-container .hawkchair-container .selection-container {
      top: 85px;
      right: auto;
      left: 0;
      width: 100%;
      height: auto;
      flex-direction: column;
      overflow-y: scroll;
      display: flex;
      opacity: 0;
      transition: .3s ease;
      z-index: 0;
  }

                  }
                  #loadingbar {
                    width: 100%;
                    display: none;
                    height: 100%;
                    position: fixed;
                    background-color: rgba(116, 116, 116, 0);
                    top: 50%;
                    left: 50%;
                    z-index: 99;
                    transform: translate(-50%, -50%);
                }
    
                #loadingbar3 {
                    width: 100%;
                    display: none;
                    height: 10%;
                    position: absolute;
                    background-color: rgba(116, 116, 116, 0);
                    top: 50%;
                    left: 50%;
                    z-index: 12399;
                    transform: translate(-50%, -50%);
                }
    
                #loadingbar2 {
                    width: 100%;
                    display: none;
                    height: 10%;
                    position: absolute;
                    background-color: rgb(255, 255, 255);
                    top: 0%;
                    left: 50%;
                    z-index: 99;
                    transform: translate(-50%, -50%);
                }
    
                #orijinal {
                    display: none !important;
                }
    
                #loadingimage {
                    width: auto;
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 99;
                    transform: translate(-50%, -50%);
                    background-color: rgb(31 30 30 / 0%);
                    height: 250px;
                    border-radius: 100px;
                    filter: invert(1);
                }
    
                #company-logo {
                    width: 50%;
                    display: block;
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    z-index: 9999999;
                    transform: translate(-50%, -50%);
                 
                }
    
                #loadingimage3 {
                    width: 100%;
                    display: none;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 9999999;
                    transform: translate(-50%, -50%);
                }

                #chatPopup {
                  display: none;
                  position: fixed;
                  bottom: 100px; /* butonun üstünde olsun */
                  right: 20px;
                  width: 400px;
                  height: 500px;
                  background: white;
                  border-radius: 16px;
                  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                  z-index: 999999;
                  overflow: hidden;
                  border: 1px solid #ccc;
              }
              
              #chatPopup iframe {
                  width: 100%;
                  height: 100%;
                  border: none;
              }
                   #openChat {
                  position: fixed;
                  bottom: 20px;
                  right: 20px;
                  z-index: 999998;
                  border-radius: 50%;
                  background-color: #c4141400;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                
                  cursor: pointer;
                  transition: transform 0.3s ease;
              }
              #openChat:hover {
                  transform: scale(1.1);
              }
              #openChat img {
                  width: 48px;
                  height: 48px;
              }
              #chatPopup::-webkit-scrollbar {
                width: 8px;
              }
              
              #chatPopup::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 10px;
              }
              
              #chatPopup::-webkit-scrollbar-thumb {
                background: #C41414;
                border-radius: 10px;
              }
              
              #chatPopup::-webkit-scrollbar-thumb:hover {
                background: #a00000;
              }
              #chatPopup .scrollable-content::-webkit-scrollbar {
                width: 8px;
              }
              
              #chatPopup .scrollable-content::-webkit-scrollbar-track {
                background: #eee;
              }
              
              #chatPopup .scrollable-content::-webkit-scrollbar-thumb {
                background-color: #C41414;
                border-radius: 10px;
                border: 2px solid transparent;
                background-clip: content-box;
              }
              #sliderValue {
                color: red;
            }
            .fabanim{
              display: block;
background: url(./static/image/play-icon.png) no-repeat;
background-size: 150%;
background-position: 50% 50%;
border-radius: 50%;
cursor: pointer;


position: relative;
--min-hotspot-opacity: 1;
width: 30px;
height: 30px;
            }
            .parameters:hover{
                cursor: pointer;
                transform: scale(1.1);
            }
            .futureanim{
              width: 30px;
              height: 30px;
              background: url(./static/image/play-icon.png)  no-repeat;
              background-size: 150%;
              background-position: 50% 50%;
              border-radius: 50%;
              cursor: pointer;
              position: relative;
              --min-hotspot-opacity: 1;
                          }

                          .futureanim[slot="hotspot-11"], .futureanim[slot="hotspot-12"], .futureanim[slot="hotspot-13"],.futureanim[slot="hotspot-14"] {
                            --min-hotspot-opacity: 0;
background-color: #dddddda3;
display: none;
border: none;

}
.fabanim[slot="hotspot-21"], .fabanim[slot="hotspot-22"], .fabanim[slot="hotspot-23"],.fabanim[slot="hotspot-24"] {
    --min-hotspot-opacity: 0;
background-color: #dddddda3;
display: none;
border: none;

}
.popup {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure it's on top */
}

.popup-content {
background-color: #ffffff66;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 400px;
}
.comfirmation{
color: white !important;
width: 30% !important;
border-radius: 9px !important;
padding: 1% !important;
}

#confirmYes {
border-radius: 50p;
background-color: #C41414;
color: white;
border: 2px solid #C41414;

}

#confirmNo {
border-radius: 50px;
background-color: #000000;
color: white;
border: 2px solid #000000;

}
model-viewer::part(default-ar-button) {

display: none;
}
/* --- MODERN POP-UP KART YAPISI (FORCED) --- */
.order-completion-area {
/* Konumlandırma: Ekranın tam ortası (Zorla) */
position: fixed !important;
top: 50% !important;
left: 50% !important;
bottom: auto !important;
right: auto !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important; /* Eski marginleri sıfırla */

/* Boyutlandırma */
width: 90% !important;
max-width: 500px !important; /* Biraz daha daralttım daha şık dursun */
height: auto !important;
max-height: 85vh !important; /* Ekran taşmasın */

/* Görünüm: Modern Kart */
background: rgba(255, 255, 255, 0.95) !important;
border-radius: 24px !important;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;

/* İçerik Düzeni */
padding: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 999999 !important; /* En üstte durması garanti olsun */

display: block !important; /* Flex vb. bozmasın diye */
}

/* Dark Mode Desteği */
body.dark-mode .order-completion-area {
background: rgba(25, 25, 25, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: white !important;
}

/* --- BAŞLIK (HEADER) --- */
.order-completion-area .header-container {
position: sticky !important;
top: 0 !important;
background: rgba(255, 255, 255, 0.98) !important;
z-index: 10 !important;
padding: 15px 20px !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
border-radius: 24px 24px 0 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}

body.dark-mode .order-completion-area .header-container {
background: rgba(25, 25, 25, 0.98) !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Header içindeki gereksiz marginleri sıfırla */
.order-completion-area .header-container * {
margin-bottom: 0 !important;
margin-top: 0 !important;
}

/* --- İÇERİK BOŞLUKLARI --- */
.form-content, 
.bank-information-content, 
.contract-content {
padding: 20px 25px !important;
background: transparent !important;
}

/* --- INPUTLAR VE SELECTLER --- */
.order-completion-area input, 
.order-completion-area select, 
.order-completion-area textarea {
width: 100% !important;
background: #f4f4f4 !important;
border: 1px solid #ddd !important;
padding: 12px 15px !important;
border-radius: 12px !important;
margin-bottom: 10px !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
box-sizing: border-box !important;
color: #333 !important;
height: auto !important;
box-shadow: none !important;
}

.order-completion-area input:focus, 
.order-completion-area select:focus, 
.order-completion-area textarea:focus {
background: white !important;
border-color: #C41414 !important;
outline: none !important;
}

/* Dark Mode Input */
body.dark-mode .order-completion-area input,
body.dark-mode .order-completion-area select,
body.dark-mode .order-completion-area textarea {
background: #333 !important;
border-color: #444 !important;
color: white !important;
}

/* --- ALT BUTON ALANI (FOOTER) --- */
.bottom-button-content {
position: sticky !important;
bottom: 0 !important;
background: white !important; /* Gradient yerine düz renk daha temiz durur karışık CSS'te */
padding: 20px 25px !important;
border-top: 1px solid rgba(0,0,0,0.05) !important;
border-radius: 0 0 24px 24px !important;
z-index: 10 !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}

body.dark-mode .bottom-button-content {
background: #191919 !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* --- BUTONLAR --- */
.link-button, #link-button1, #link-button2, #link-button3 {
width: 100% !important;
background: #C41414 !important;
color: white !important;
text-align: center !important;
padding: 14px !important;
border-radius: 16px !important;
font-weight: 600 !important;
display: block !important;
cursor: pointer !important;
border: none !important;
font-size: 16px !important;
margin: 0 !important;
text-decoration: none !important;
}

/* --- KAYDIRMA ÇUBUĞU (SCROLLBAR) --- */
.order-completion-area::-webkit-scrollbar {
width: 6px !important;
}
.order-completion-area::-webkit-scrollbar-track {
background: transparent !important;
}
.order-completion-area::-webkit-scrollbar-thumb {
background-color: rgba(196, 20, 20, 0.5) !important;
border-radius: 20px !important;
}

/* --- LOGOLAR VE RESİMLER --- */
.order-completion-area img {
max-width: 100% !important;
height: auto !important;
}


.fullscreen {
  height: 100% !important;
  z-index: 40 !important;
}

.normal {
  height: 81% !important;
  z-index: 0 !important;
}


.input-color {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 66px;
  height: 66px;
  border: none;
}

    .environment2{
        height: 90px;
        width: 60px;
    border-radius: 50px;
    border: 3px solid rgba(252, 252, 252, 0.137);
    margin: 9px;
     
    }  
    .environment2:hover{
  transform: scale(1.1);
    }  

         /* Tooltip Temel Yapısı (Görünmez hali) */
/* Tooltip Temel Yapısı (Görünmez hali) */
[data-tooltip]::after {
    content: attr(data-tooltip); /* HTML'deki yazıyı çeker */
    position: absolute;
    bottom: 125%; /* Butonun %125 üstünde dur */
    
    /* YENİ: Sağa hizala. Yazı, ekranda sola doğru yayılacak. */
    right: 0; 
    /* left: 50% ve transform: translateX(-50%) iptal edildi */

    background-color: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    font-weight: 500;
}

/* Küçük bir ok işareti eklemek için */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 115%;
    
    /* OK İŞARETİ KÜÇÜK OLDUĞU İÇİN ORTALAMA KOMUTLARI KALABİLİR */
    left: 50%; 
    transform: translateX(-50%);
    
    border-width: 5px;
    border-style: solid;
    border-color: #111 transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hover Yapınca Görünür Olması İçin */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    /* Hafif yukarı kayarak gelme efekti için transform korundu */
    transform: translateY(-5px); 
}
        /* Butonun Temel Stili */
        .hawk-support-btn {
        background-color: #ffffff;
        color: rgb(0, 0, 0);
        width: 12%;
        height: 40px;
        position: fixed;
        bottom: 0;
        right: 1%;
        
        /* Flexbox ile yazı ve ikonu yan yana hizalama */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        
        border: 2px solid #000;
        border-bottom: 0px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.3s ease;
        z-index: 9999;
        box-shadow: -5px 2px 1px 0px;
        }

        /* SVG İkon Boyutlandırma */
        .chat-icon {
        width: 24px;
        height: 24px;
        }

        /* Noktaların varsayılan hali (Görünmez yapıyoruz) */
        .typing-dots .dot {
        opacity: 0;
        transform: translateY(0);
        transition: all 0.3s ease;
        }

        /* --- HOVER EFEKTİ --- */

        /* Butona hover yapınca noktalar görünür olsun ve animasyon başlasın */
        .hawk-support-btn:hover .typing-dots .dot {
        animation: typingBounce 1.4s infinite ease-in-out both;
        }

        /* Her nokta için gecikme (Sırayla zıplamaları için) */
        .hawk-support-btn:hover .dot-1 {
        animation-delay: 0s;
        }
        .hawk-support-btn:hover .dot-2 {
        animation-delay: 0.2s;
        }
        .hawk-support-btn:hover .dot-3 {
        animation-delay: 0.4s;
        }

        /* Animasyon Tanımı (Zıplama ve Opaklık) */
        @keyframes typingBounce {
        0%, 80%, 100% { 
            transform: translateY(0);
            opacity: 0.2; /* Hafif sönük */
        }
        40% { 
            transform: translateY(-3px); /* Yukarı zıpla */
            opacity: 1; /* Tam görünür */
        }
        }
        /* Modal Ana Yapı */
        .hawk-info-modal {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 90%; max-width: 700px; max-height: 90vh;
            background: #fff; border-radius: 24px; overflow: hidden;
            display: flex; flex-direction: column;
            box-shadow: 0 25px 80px rgba(0,0,0,0.6);
        }
        .hawk-info-close {
            position: absolute; top: 15px; right: 20px; background: none; border: none;
            font-size: 32px; color: #333; cursor: pointer; z-index: 10;
        }
        
        /* Header */
        .hawk-info-header {
            padding: 30px 30px 20px; text-align: center; border-bottom: 1px solid #eee;
        }
        .hawk-info-header h2 {
             font-size: 28px; color: #4b4b4b; margin: 15px 0 0; letter-spacing: 1px;
        }

        /* Tabs */
        .hawk-info-tabs {
            display: flex; background: #f9f9f9; padding: 5px;
        }
        .hawk-info-tab {
            flex: 1; border: none; background: transparent; padding: 15px;
            font-weight: 600; color: #888; cursor: pointer; transition: 0.3s;
            border-bottom: 3px solid transparent;
        }
        .hawk-info-tab.active {
            color: #C41414; border-bottom-color: #C41414; background: #fff;
        }

        /* Content */
        .hawk-info-content {
            padding: 30px; display: none; overflow-y: auto;
            animation: fadeIn 0.4s ease;
        }
        .hawk-info-content.active { display: block; }
        
        .hawk-info-content h3 { font-size: 20px; margin-top: 0; color: #222; border-left: 4px solid #C41414; padding-left: 10px; }
        .hawk-info-content p { color: #555; font-size: 14px; line-height: 1.6; }

        /* Steps Grid */
        .hawk-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .hawk-step { background: #f8f8f8; padding: 15px; border-radius: 12px; position: relative; }
        .hawk-step span { 
            position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; 
            background: #C41414; color: white; border-radius: 50%; 
            display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;
        }
        .hawk-step h4 { margin: 0 0 5px; font-size: 15px; color: #333; }
        .hawk-step p { margin: 0; font-size: 12px; color: #666; }

        /* Social Grid */
        .hawk-social-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-top: 20px; }
        .hawk-social-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 4px; background: #fff; border: 1px solid #eee; border-radius: 12px;
            text-decoration: none; color: #333; transition: 0.3s;
        }
        .hawk-social-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: #C41414; }
        .hawk-social-item img { height: 32px; margin-bottom: 8px; }
        .hawk-social-item span { font-size: 13px; font-weight: 500; }

        /* Legal List */
        .hawk-legal-list { list-style: none; padding: 0; }
        .hawk-legal-list li { margin-bottom: 12px; }
        .hawk-legal-list a { text-decoration: none; color: #444; font-weight: 500; transition: 0.2s; display: flex; align-items: center; }
        .hawk-legal-list a:hover { color: #C41414; padding-left: 5px; }

        .hawk-info-footer { text-align: center; font-size: 11px; color: #aaa; padding: 20px; border-top: 1px solid #eee; background: #fcfcfc; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        @media (max-width: 600px) {
            .hawk-steps-grid, .hawk-social-grid { grid-template-columns: 1fr 1fr; }

            .hawk-support-btn {
                width: 30%;
        }
        
        }