body {
    font-size: 14px !important;
}

h1, h2, h3, h4, h5, h6, table, p, ul, li, ol, blockquote {
    margin-bottom: 0;
}
h1 {
    font-size: 1.6em !important;
}
h2 {
    font-size: 1.5em !important;
}
h3 {
    font-size: 1.4em !important;
}
h4 {
    font-size: 1.4em !important;
}
h5 {
    font-size: 1.2em !important;
}
h6 {
    font-size: 1.1em !important;
}


.login-register-form {
    background-color: #161616 !important;
    border: 1px solid #2e2e2e !important;
}

.da-link{
    color: #2470dc;
    text-decoration: none;
  }

.modal-bg-dark {background: #022325;}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.site-logo {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.site-logo-login {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.border-dark-blue {
    --bs-border-opacity: 1;
    border: 1px solid #013858 !important;
}

.border-black {
    --bs-border-opacity: 1;
    border: 1px solid #000b10 !important;
}

/* Apply this to the parent .row to ensure equal column heights, especially on smaller devices */
.image-gallery-row {
    display: flex;
    flex-wrap: wrap; /* Allows the columns to wrap to the next line */
}

/* Set a fixed height on the image container. 
You can adjust the 'height' value as needed. 
*/
.image-wrapper {
    /* Crucial: Make the wrapper take up 100% of the column's width 
    and set the fixed height.
    */
    width: 100%; 
    height: 250px; /* Example fixed height for all image cells */
    overflow: hidden; /* Hide any overflow if 'object-fit' doesn't cover it */
}

/* Style the <img> tag itself. 
The .img-fluid class is already a good start (max-width: 100%; height: auto;).
*/
.gallery-image {
    /* Make the image take 100% of the wrapper's dimensions */
    width: 100%;
    height: 100%;
    
    /* KEY PROPERTY: Resizes the image to fit the container.
    'cover' fills the box (clipping parts of the image if needed).
    Use 'contain' if you must see the entire image (it will leave white space/gaps).
    */
    object-fit: cover;
    object-position: center; /* Centers the image content */
}

.disabled-link {
    /* Tıklamayı engelleme işini JS yaptı, bu kısım sadece görsel */
    opacity: 0.5; /* Daha soluk görünmesini sağlar */
    cursor: default; /* İmlecin normal bir oka dönüşmesini sağlar */
}

.larger-checkbox {
  width: 1.2em; /* Adjust size as needed */
  height: 1.2em; /* Should match the width */
  margin-top: 0.3em;
}

/* preloader */

/* HTML: <div class="loader"></div> */
.loader {
  width: 225px;
  aspect-ratio: 1; 
  display: grid;
}
.loader:before{
  content: "";
  grid-area: 1/1;
  width: 105px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 5px #ffffff inset;
  filter: drop-shadow(120px 120px 0 #fff);
  animation: l8 2s infinite alternate;
}
.loader:after {
  content: "";
  grid-area: 1/1;
  width: 105px;
  aspect-ratio: 1;
  box-shadow: 0 0 0 5px #ff0000 inset;
  filter: drop-shadow(120px 120px 0 #fff);
  animation: l8 2s infinite alternate;
}
.loader:after {
  margin: 0 0 0 auto; 
  filter: drop-shadow(-120px 120px 0 #ff0000);
  animation-delay: -1s;
}
@keyframes l8 {
  0%,10%   {border-radius:0}
  30%,40%  {border-radius:50% 0}
  60%,70%  {border-radius:50%}
  90%,100% {border-radius:0 50%}
}