@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

   :root {
     --c-bg: #ffffff;
     --c-text: #0b0e14;
     --c-muted: #667085;
     --c-primary: #1e66f5;
     --c-line: #eaecf0;
     --c-surface: #f8fafc;
     --shadow: 0 8px 28px rgba(16, 24, 40, .12);
   }

   /* Font Awesome kullanımı için ekleme yap */

.sc-input-icon {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%; /* Taşmayı engeller */
  box-sizing: border-box; /* Padding dahil genişlik hesaplar */
}

.sc-input-icon .sc-ico {
  flex-shrink: 0; /* İkonun küçülmesini engeller */
  margin-right: 8px;
  color: var(--c-muted);
  font-size: 16px;
}

.sc-input-icon select,
.sc-input-icon input[type="date"] {
  flex: 1; /* Geri kalan alanı kaplasın */
  min-width: 0; /* Taşmayı engeller */
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-surface);
  font-size: 14px;
  color: var(--c-text);
  box-sizing: border-box;
}

.sc-input-icon select:focus,
.sc-input-icon input[type="date"]:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 6px rgba(30, 102, 245, 0.25);
  outline: none;
}



   .sc-service-page {
     color: var(--c-text);
   }

   .sc-container-xx {
     width: min(1200px, 94vw);
     margin: 0 auto;
   }

   .quick-res-btn {
     position: fixed;
     bottom: 70px;
     left: 16px;
     right: 16px;
     background: var(--c-primary, #1e66f5);
     color: #fff;
     text-align: center;
     padding: 14px 0;
     border-radius: 12px;
     font-weight: 700;
     font-size: 16px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
     text-decoration: none;
     z-index: 9999;
     display: none;
     /* varsayılan gizli */
   }

   /* Sadece mobilde göster */
   @media (max-width: 768px) {
     .quick-res-btn {
       display: block;
     }
   }


   /* HERO */
   .sc-pkg-hero {
     position: relative;
     background: white;
     width: 100vw;
     margin-left: calc(50% - 50vw);
   }

   .sc-pkg-slider {
     position: relative;
     overflow: hidden;
   }

   .sc-pkg-track {
     display: flex;
     gap: 8px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }

   .sc-pkg-track::-webkit-scrollbar {
     display: none;
   }

   .sc-pkg-slide {
     margin-top: 120px;
     min-width: 100%;
     height: clamp(500px, 18vw, 560px);
     scroll-snap-align: start;
     background: white;
     position: relative;
   }

   .sc-pkg-slide picture,
   .sc-pkg-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   .sc-pkg-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 42px;
     height: 42px;
     border-radius: 999px;
     border: 0;
     background: rgba(255, 255, 255, .92);
     color: #111;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: var(--shadow);
   }

   .sc-pkg-prev {
     left: 14px;
   }

   .sc-pkg-next {
     right: 14px;
   }

   .sc-pkg-dots {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 12px;
     display: flex;
     justify-content: center;
     gap: 8px;
   }

   .sc-pkg-dots button {
     width: 10px;
     height: 10px;
     border-radius: 999px;
     border: 0;
     background: rgba(255, 255, 255, .6);
     cursor: pointer;
   }

   .sc-pkg-dots button.is-active {
     background: #fff;
   }

   .sc-pkg-title-wrap {
     opacity: 0.7;
     position: absolute;
     left: 50%;
     bottom: 28px;
     transform: translateX(-50%);
     width: min(1200px, 94vw);
     display: flex;
     align-items: flex-end;
     gap: 16px;
     pointer-events: none;
   }

   .sc-pkg-title {
     pointer-events: auto;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(6px);
     border-radius: 14px;
     padding: 16px 20px;
     font-weight: 800;
     font-size: clamp(18px, 1.5vw, 28px);
     box-shadow: var(--shadow);
   }

   /* Sticky tabs */
   .sc-sticky-tabs {
     position: sticky;
     top: 64px;
     z-index: 5;
     background: #fff;
     border-bottom: 1px solid var(--c-line);
   }

   .sc-sticky-tabs .sc-tabs {
     display: flex;
     gap: 26px;
     align-items: center;
     height: 56px;
     overflow: auto;
     scrollbar-width: none;
   }

   .sc-sticky-tabs .sc-tabs::-webkit-scrollbar {
     display: none;
   }

   .sc-tab {
     position: relative;
     padding: 0 2px;
     font-weight: 700;
     white-space: nowrap;
     color: #344054;
   }

   .sc-tab.active {
     color: var(--c-primary);
   }

   .sc-tab.active::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: -1px;
     height: 2px;
     background: var(--c-primary);
   }

   /* Grid */
   .sc-main-wrap {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 340px;
     gap: 28px;
     margin: 0 auto;
     width: 100%;
   }

   @media (max-width:1000px) {
     .sc-main-wrap {
       grid-template-columns: 1fr;
     }
      .sc-pkg-card{
      margin-top: 10px!important;
     }
    

   }

   .sc-section-card {
     background: #fff;
     border: 1px solid var(--c-line);
     border-radius: 16px;
     box-shadow: 0 4px 10px rgba(16, 24, 40, .06);
     padding: 18px;
   }

   .sc-section-title {
     font-size: 18px;
     font-weight: 800;
     margin-bottom: 10px;
   }

   .sc-action-row {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
   }

   .sc-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 10px 14px;
     border-radius: 10px;
     border: 1px solid var(--c-line);
     background: #fff;
     color: var(--c-text);
     cursor: pointer;
     font-weight: 600;
     text-decoration: none;
   }

   .sc-btn.sc-primary {
     background: var(--c-primary);
     color: #fff;
     border-color: var(--c-primary);
   }

   .sc-btn.sc-ghost {
     background: #fff;
   }

   .sc-btn.sc-warning {
     background: #fff7ed;
     border-color: #fed7aa;
     color: #9a3412;
   }

   .sc-price-card {
     position: sticky;
     top: 120px;
   }

   .sc-pkg-card {
    display: flex;
    align-self: flex-start;
    flex-direction: column;
    /* width: 100%; */
    height: auto;
    padding: 32px 20px;
    /* background: var(--primary-hover); */
    margin-top: -50px;
    /* border: 5px solid var(--color-0); */
    /* border-radius: 12px; */
    position: sticky;
    top: 100px;
    pointer-events: auto;
    margin-left: auto;
    width: min(360px, 94vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
   }

   .sc-pkg-card .sc-row {
     display: flex;
     gap: 12px;
     padding: 14px 16px;
     align-items: center;
     border-bottom: 1px solid var(--c-line);
   }

   .sc-pkg-card .sc-row:last-child {
     border-bottom: 0;
   }

   .sc-ico {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: var(--c-surface);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
   }

   .sc-meta {
     font-size: 13px;
     color: var(--c-muted);
   }

   .sc-strong {
     font-weight: 700;
     font-size: 14px;
     color: var(--c-text);
   }

   .sc-btns {
     display: flex;
     gap: 10px;
     padding: 14px 16px;
     flex-direction: column;
   }

   .sc-price-tag {
     font-size: 28px;
     font-weight: 900;
   }

   .sc-price-sub {
     color: var(--c-muted);
     font-size: 13px;
   }

   .sc-m-24 {
     padding-top: 24px;
     max-width: 1280px;
     margin: 0 auto;
   }

   .sc-mt-16 {
     margin-top: 16px;
   }

   .form-group {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     margin-bottom: 15px;
   }

   .form-field {
    gap: 12px;
    padding: 14px 16px;
    align-items: center;
    border-bottom: 1px solid var(--c-line);
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: row;

   }

   .form-field label {
     font-weight: 600;
     margin-bottom: 6px;
     font-size: 14px;
     color: #333;
   }

   .form-field select,
   .form-field input {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 14px;
     transition: border-color 0.2s, box-shadow 0.2s;
   }

   .form-field select:focus,
   .form-field input:focus {
     outline: none;
     border-color: #007bff;
     box-shadow: 0px 0px 5px rgba(0, 123, 255, 0.3);
   }