@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@200..700&display=swap');

:root {
  --primary: #FEC224;
  --secondary: #569897;
  --green:#6d7021;
  --brown:#945220;
  --mavi:#92a8c0;
  --laci:#233985;
  --light: #ffffff;
  --dark: #000000;
}
    .nav-logo { height: 70px; }
    .hero-img {
    width: 100%;
    height: 375px; 
    object-fit: cover;
    display: block; 
}

.carousel-inner {
    height: 375px; 
}
.carousel-item {
    height: 375px; 
    transition: transform 0.6s ease-in-out; 
}

.carousel-indicators [data-bs-target] { 
    background-color: #000; 
}
.navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-link,
.navbar-nav .dropdown > a {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 500;
}.dropdown-toggle {
  color: var(--text-color);
  border: none;
  background: none;
}

.dropdown-toggle:hover {
  color: var(--primary);
}

.dropdown-menu .dropdown-item:hover {
  color: var(--primary);
}.dropdown-toggle::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.dropdown-toggle:hover::after {
  width: 100%;
}
      .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: var(--primary);
      transition: width 0.3s ease;
    }
    .nav-link:hover {
      color: var(--primary);
    }
    .nav-link:hover::after {
      width: 100%;
    }
    
/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
body{
    font-family: "Stack Sans Headline", sans-serif;
    scroll-behavior: smooth;
    
}
/* ------------------------------------------------ */
/* HEADER SECTION */
.etkinlik-section .header-div {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}

.etkinlik-section .header-div h2:first-child {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.3rem;
  letter-spacing: 1px;
}

.etkinlik-section .header-div h1:last-child {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dark);
  opacity: 0.8;
}

/* ------------------------------------------------ */
/* SLIDER CONTAINER */
.slider-container {
  overflow: hidden;
  width: 100%;
  max-width: 1400px;
  margin: auto;
}

.slider-container p {
  color: var(--light);
}

/* ------------------------------------------------ */
/* SLIDER TRACK */
.slider-track {
  display: flex;
  gap: 3rem;
  transition: transform 0.5s ease-in-out;
  padding: 2rem;
}

/* ------------------------------------------------ */
/* CARD WRAPPER (card + buttons) */
.card-wrapper {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(25% - 2rem);
  max-width: calc(25% - 2rem);
  margin-bottom: 1rem;
}

/* CARD LINK */
.card-wrapper a {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 450px;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  transition: transform 0.5s ease-in-out;
}

.card-wrapper a:hover,
.card-wrapper a:focus {
  transform: scale(1.03);
}

/* CARD */
.card {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.card > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: absolute;
  inset: 0;
}

/* IMAGE */
.card__background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: transform 0.5s ease-in;
}

/* GRADIENT + CONTENT */
.card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: flex-end;
  height: 50%;
  padding: 10% 1rem 1.25rem;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.3) 10%,
    hsl(0, 0%, 0%) 100%
  );
  z-index: 3;

  transform: translateY(62%);
  transition: transform 500ms ease-out 500ms;
}

/* CONTENT CONTAINER */
.card__content--container {
  --flow-space: 1.25rem;
}

/* TITLE */
.card__title {
  position: relative;
  width: fit-content;
  color: var(--light);
}

.card__title::after {
  content: "";
  position: absolute;
  height: 0.3125rem;
  width: calc(100% + 1.25rem);
  bottom: calc((1.25rem - 0.5rem) * -1);
  left: -1.25rem;
  background-color: var(--primary);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 1000ms ease-in 500ms,
              transform 500ms ease-out 500ms;
  transform-origin: right;
}

/* BUTTON INSIDE CARD */
.card__button {
  padding: 0.4em 1em;
  width: fit-content;
  border-radius: 0.45em;
  border: none;
  background-color: var(--primary);
  color: var(--light);
  opacity: 0;
  transition: opacity 500ms ease-out;
  z-index: 4;
}

/* ------------------------------------------------ */
/* BUTTONS UNDER CARD */
.button-con {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.button-con .btn {
  flex: 1;
  padding: 0.5em 0;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-con .btn-buy {
  background-color: var(--primary);
  color: var(--dark);
}

.button-con .btn-buy:hover {
  background-color: var(--secondary);
  color: var(--light);
}

.button-con .btn-info {
  background-color: var(--secondary);
  color: var(--light);
}

.button-con .btn-info:hover {
  background-color: var(--primary);
  color: var(--dark);
}

/* ------------------------------------------------ */
/* HOVER EFFECTS */
@media (any-hover: hover) and (any-pointer: fine) {
  .card-wrapper a:hover .card__content,
  .card-wrapper a:focus .card__content {
    transform: translateY(0);
  }

  .card-wrapper a:hover .card__background,
  .card-wrapper a:focus .card__background {
    transform: scale(1.3);
  }

  .card-wrapper a:hover .card__content--container > :not(.card__title),
  .card-wrapper a:hover .card__button,
  .card-wrapper a:focus .card__content--container > :not(.card__title),
  .card-wrapper a:focus .card__button {
    opacity: 1;
    transition-delay: 1000ms;
  }

  .card-wrapper a:hover .card__title::after,
  .card-wrapper a:focus .card__title::after {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ------------------------------------------------ */
/* SLIDER BUTTONS */
.slider-controls {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}

.slider-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--secondary);
  color: var(--secondary);
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 250ms ease;
}

.slider-btn:hover {
  background: var(--secondary);
  color: var(--light);
  transform: scale(1.08);
}

/* ------------------------------------------------ */
/* RESPONSIVE SLIDER */
@media (max-width: 768px) {
  html { font-size: 13px; }

  .card-wrapper {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }

  .slider-track {
    gap: 1.5rem;
    padding: 1rem;
  }
  .slider-container .a {
    height: 340px;
  }
  
    .image-container{
      display: none;
    }
    .hizli-erisim{
      display: none;
    }
}

@media (max-width: 480px) {
  .card-wrapper {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }

  .slider-container .a {
    height: 300px;
  }
}
/* mekanlar */
.locations-area {
 position: relative;
 overflow: hidden;
 min-height: 400px; 
}

.locations-area::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image: url("/uploads/starry.jpg");
 background-size: cover;
 background-position: center;
 filter: blur(2px);
 z-index: 0; 
}

.locations-area .slider-track {
  justify-content: center;
}
.locations-area::before {
 content: "";
 position: absolute;
 inset: 0;
 background-color: rgba(0, 0, 0, 0.4); 
 z-index: 1; 
}

.locations-area .container {
 position: relative; 
   z-index: 2;
}
.location-main-title {
    font-size: 2rem;
    font-weight: 700;
   color: var(--light); 
}

.location-subtitle {
 color: var(--primary);
 font-size: 1.1rem;
 font-weight: 500;
}

.location-card{
}
.location-card-style {
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 0.5rem; 
    overflow: hidden; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 
    height: 100%;
    box-shadow: 0 0 2px 2px rgba(255, 255, 210, 0.3); 
    position: relative; 
    z-index: 3; 
}

.location-img {
    height: 200px; 
    object-fit: cover; 
    width: 100%;
}

.location-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--light); 
    margin-bottom: 0;
}

.location-btn-konum {
    background-color: transparent !important;
    color: var(--light) !important; 
    border: 1px solid var(--primary); 
    font-weight: 500;
    padding: 0.375rem 0.75rem; 
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.location-btn-konum:hover {
    background-color: var(--primary) !important; 
    color: var(--light) !important; 
    border-color: var(--primary);
}

.location-btn-ara {
    background-color: var(--primary) !important;
    color: var(--dark) !important;
    border: 1px solid var(--primary); 
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

/* Ara Hover Effect */
.location-btn-ara:hover {
    background-color: var(--secondary) !important; 
    color: var(--light) !important;
}
.location-card-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(25% - 2rem); 
    max-width: calc(25% - 2rem);
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .location-card-wrapper {
        flex: 0 0 calc(50% - 1rem); 
        max-width: calc(50% - 1rem);
    }
    .location-btn-konum {
    font-weight: 500;
    padding: 0.25rem 0.5rem; 
}
.location-btn-ara {
    font-weight: 500;
    padding: 0.25rem 0.5rem;
}
}

@media (max-width: 480px) {
  .location-card-style{
    box-shadow: 0 0 2px 2px rgba(255, 255, 210, 0.3); 
  }
  .locations-area .slider-track {
  justify-content: start;
}
    .location-card-wrapper {
    flex: 0 0 calc(50% - .9rem);
    max-width: calc(50% - .9rem);
}
.location-img {
    height: 140px; 
}

.faq {
  min-height: 875px; 
}
}

/* faq */

.faq {
  padding: 60px 0;
  background-color: var(--secondary);
  min-height: 750px; 
}

.faq h2 {
  text-align: center;
  font-weight: 700;
  color: var(--primary);
}

.faq a {
  text-decoration: none;
}

.faq .faq-list {
  padding: 20px 0;
  list-style: none;
}

.faq .faq-list li {
  background: #fff; 
  padding: 0; 
  border-bottom: none; 
  margin-bottom: 15px;
  border-radius: 8px; 
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); 
  overflow: hidden; 
  transition: all 0.3s ease-in-out;
}

.faq .faq-list li:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
}

.list-item {
  opacity: 1;
  transform: translateY(30px); 
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.list-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.faq .faq-list a {
  display: block;
  position: relative;
  padding: 18px 45px 18px 20px; 
  color: var(--dark);
  font-size: 16px; 
  line-height: 24px;
  font-weight: 600; 
  cursor: pointer;
  transition: all 0.3s;
}

.faq .faq-list a.collapsed {
  color: var(--dark); 
}

.faq .faq-list a:hover {
  color: var(--green); 
}

.faq .faq-list i {
  font-size: 18px; 
  position: absolute;
  right: 20px; 
  top: 50%;
  transform: translateY(-50%) rotate(0deg); 
  
  color: var(--faq-icon);
  transition: transform 0.3s ease-in-out, color 0.3s; 
}

.faq .faq-list a:not(.collapsed) i {
  color: var(--green); 
  transform: translateY(-50%) rotate(180deg); 
}

.faq .faq-list a.collapsed:hover i {
  color: var(--green); 
}

.faq .faq-list p {
  padding: 0 20px 20px 20px; 
  margin-bottom: 0;
  margin-top: -5px; 
  font-size: 15px;
  color: var(--text-color);
}
/* contact */

.contact {
    background-color: var(--light); 
    color: var(--dark);
}

.contact-form-wrapper {
    background-color: var(--light); 
    color: var(--dark);
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
}

.contact-form-wrapper h2 {
    color: var(--laci); 
}

.form-label {
    font-weight: 600;
    color: var(--laci);
}

.form-control {
    border: 2px solid var(--mavi); 
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s;
}

.form-control:focus {
    border-color: var(--primary); 
    box-shadow: 0 0 0 0.25rem rgba(254, 194, 36, 0.25); 
}

/* --- Button Styling (Inspiring Look) --- */
.btn-submit {
    background-color: var(--primary); 
    color: var(--light); 
    font-weight: bold;
    font-size: 1.1rem;
    padding: 12px;
    border: none;
    border-radius: 10px;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-submit:hover {
    background-color: var(--secondary); 
    color: var(--light);
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* --- Image Container --- */
.image-container {
    height: 450px; 
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional: Add a subtle overlay to the image for polish */
.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(35, 57, 133, 0.2), rgba(254, 194, 36, 0.1));
    z-index: 1;
    border-radius: 15px;
}
/* footer */

/* --- Footer Container --- */
.site-footer {
    background-color: var(--secondary); /* Deep Navy Background */
    color: var(--light); /* White Text */
    font-size: 15px;
}

/* --- Branding/Logo --- */
.footer-brand {
    font-weight: 700;
    color: var(--primary); /* Highlight brand with Primary color */
}
.footer-text {
    color: var(--light); /* Lighter text for the description */
}

/* --- Headings --- */
.footer-heading {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary); /* Accent heading with Secondary color */
    border-bottom: 2px solid var(--secondary);
    display: inline-block;
    padding-bottom: 5px;
}

/* --- Links and List --- */
.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--light);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--primary); /* Primary color on hover */
}

/* --- Contact Details --- */
.contact-detail {
    margin-bottom: 10px;
    line-height: 1.5;
}
.contact-detail i {
    color: var(--primary);
    font-size: 1.1rem;
}

/* --- Social Icons --- */
.social-links .social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light);
    text-align: center;
    margin-right: 10px;
    transition: all 0.3s;
}

.social-links .social-icon:hover {
    background-color: var(--primary); /* Primary color on hover */
    color: var(--laci);
    transform: translateY(-2px);
}

/* --- Separator & Copyright --- */
.footer-hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright-text {
    color: var(--primary);
}

@media (min-width: 480px) {
    .controller { 
        display: none; 
    }
}
/* counter */
.counters-section {
    background-color: var(--light); 
    color: var(--light);
}

.counter-box {
    padding: 20px;
}

.counter-value {
    color: var(--primary); 
    font-family: 'Montserrat', sans-serif; 
    margin-bottom: 5px;
}

.counter-label {
    color: var(--secondary); 
    font-size: 1.2rem;
}

.counter-image-container {
    height: 350px; 
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.counter-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* galeri */
.galeri {
  column-count: 4;
  column-gap: 15px;
  padding: 20px;
}

.galeri-item {
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
  overflow: hidden;              
  border-radius: 20px;
}

/* --- Images --- */
.galeri-item img {
  width: 100%;
  display: block;
  transition: transform 0.35s ease;
  border-radius: 20px;
}

/* --- Hover effect: only IMG scales --- */
.galeri-item:hover img {
  transform: scale(1.1);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .galeri { 
    column-count: 3; 
  }
}
@media (max-width: 768px) {
  .galeri { 
    column-count: 2; 
  padding: 5px;
  }
}
@media (max-width: 576px) {
  .galeri { 
    column-count: 2; 
  margin: 0 0 5px;
  padding: 5px;
  }
}
/* register */
.register-container {
            max-width: 450px;
            width: 100%;
            padding: 40px;
            border-radius: 15px;
            background-color: var(--light);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .form-header {
            color: var(--laci);
            font-weight: 700;
            margin-bottom: 30px;
        }

        .form-control {
            border: 1px solid var(--mavi); 
            border-radius: 8px;
            padding: 10px 15px;
        }

        .form-control:focus {
            border-color: var(--primary); /* Highlight with primary color on focus */
            box-shadow: 0 0 0 0.25rem rgba(254, 194, 36, 0.25); 
        }

        .btn-register {
            background-color: var(--laci); /* Use Navy Blue for the main action button */
            color: var(--light);
            font-weight: bold;
            padding: 10px 0;
            border-radius: 8px;
            transition: background-color 0.3s;
        }

        .btn-register:hover {
            background-color: var(--secondary); /* Teal on hover */
            color: var(--light);
        }
        /* login */

        .login-container {
            max-width: 400px;
            width: 100%;
            padding: 40px;
            border-radius: 15px;
            background-color: var(--light);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .form-header {
            color: var(--laci);
            font-weight: 700;
            margin-bottom: 30px;
        }

        .form-control {
            border: 1px solid var(--mavi); 
            border-radius: 8px;
            padding: 10px 15px;
        }

        .form-control:focus {
            border-color: var(--primary); /* Highlight with primary color on focus */
            box-shadow: 0 0 0 0.25rem rgba(254, 194, 36, 0.25); 
        }

        .btn-login {
            background-color: var(--laci); /* Use Navy Blue for the main action button */
            color: var(--light);
            font-weight: bold;
            padding: 10px 0;
            border-radius: 8px;
            transition: background-color 0.3s;
        }

        .btn-login:hover {
            background-color: var(--secondary); /* Teal on hover */
            color: var(--light);
        }