/* Rezervasyon Detay Sayfası Stilleri */

/* Entfernung (Mesafe) bölümünü gizle - hesaplama kodu bozulmadan */
#ozet-mesafe {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Mesafe içeren detay-item'ı gizle */
.detay-item .detay-content strong[data-translate="mesafe"],
.detay-item .detay-content:has(strong[data-translate="mesafe"]),
.detay-item:has(#ozet-mesafe) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.rezervasyon-detay-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: calc(100vh - 200px);
    padding: 40px 0 60px;
}

.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Transfer Tipi Seçimi */
.transfer-tip-secim {
    margin-bottom: 30px;
}

.transfer-tip-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.transfer-tip-option {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    padding: 20px 40px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.transfer-tip-option i {
    font-size: 20px;
    color: #6c5ce7;
}

.transfer-tip-option:hover {
    border-color: #6c5ce7;
    background: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);
}

.transfer-tip-option.active {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    border-color: #6c5ce7;
    color: #fff;
    box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
}

.transfer-tip-option.active i {
    color: #fff;
}

/* Ana Layout */
.rezervasyon-detay-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 30px;
}

/* Sol Kolon: Form Alanları */
.form-kolon {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-section {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.form-section-header i {
    color: #6c5ce7;
    font-size: 22px;
}

.form-section-header h3 {
    color: #333;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.form-section-header.checkbox-header {
    justify-content: space-between;
}

.checkbox-label {
    position: relative;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    width: 50px;
    height: 26px;
    background: #ccc;
    border-radius: 13px;
    position: relative;
    transition: background 0.3s;
}

.checkmark::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: left 0.3s;
}

.checkbox-label input[type="checkbox"]:checked ~ .checkmark {
    background: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.checkbox-label input[type="checkbox"]:checked ~ .checkmark::after {
    left: 27px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.bebek-koltugu-checkbox-label .checkmark {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #6c5ce7;
    border-radius: 4px;
    position: relative;
    transition: all 0.3s;
}

.bebek-koltugu-checkbox-label .checkmark::after {
    content: '';
    position: absolute;
    display: none;
}

.bebek-koltugu-checkbox-label input[type="checkbox"]:checked ~ .checkmark {
    background: #6c5ce7;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.bebek-koltugu-checkbox-label input[type="checkbox"]:checked ~ .checkmark::after {
    display: block;
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.form-section-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.required {
    color: #e74c3c;
    font-weight: normal;
}

.input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c5ce7;
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
    margin-top: 0;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: 14px 15px 14px 45px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    transition: all 0.3s;
    background: #fff;
    font-family: inherit;
    line-height: normal;
    box-sizing: border-box;
    min-width: 0;
}

.input-wrapper input[type="date"],
.input-wrapper input[type="time"] {
    position: relative;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.input-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
.input-wrapper input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    position: absolute;
    right: 15px;
    opacity: 1;
    z-index: 1;
}

/* Tarih ve saat input'larının tüm alanına tıklanabilir yap */
.input-wrapper input[type="date"]:focus,
.input-wrapper input[type="time"]:focus {
    cursor: text;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.input-wrapper textarea {
    resize: vertical;
    min-height: 100px;
}

.phone-input-with-flag {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.phone-flag-selector {
    position: relative;
    display: flex;
    align-items: stretch;
}

.phone-flag-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8f9ff;
    border: 2px solid #e0e0e0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.3s;
    height: 100%;
    box-sizing: border-box;
}

.phone-flag-button:hover {
    background: #f0f0f0;
}

.phone-flag-button i {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s;
}

.phone-flag-selector.open .phone-flag-button i {
    transform: rotate(180deg);
}

.phone-flag-display {
    font-size: 20px;
    line-height: 1;
}

.phone-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    margin-top: 5px;
    min-width: 250px;
}

.phone-flag-selector.open .phone-country-dropdown {
    display: block;
}

.phone-country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.phone-country-item:hover,
.phone-country-item.active {
    background: #f8f9ff;
}

.country-flag {
    font-size: 20px;
    line-height: 1;
    width: 30px;
    text-align: center;
}

.country-name {
    flex: 1;
    color: #333;
    font-size: 14px;
}

.country-code {
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

.phone-code-display {
    background: #fff;
    padding: 14px 10px;
    border: 2px solid #e0e0e0;
    border-left: none;
    border-right: none;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    box-sizing: border-box;
}

.phone-code-flag {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

.phone-input-with-flag input {
    border-radius: 0 10px 10px 0;
    padding-left: 15px;
    flex: 1;
    border: 2px solid #e0e0e0;
    border-left: none;
    padding: 14px 15px;
    height: 100%;
    box-sizing: border-box;
}

.phone-input-with-flag input:focus {
    outline: none;
    border-color: #6c5ce7;
    border-left: none;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.phone-input-with-flag:focus-within .phone-flag-button,
.phone-input-with-flag:focus-within .phone-code-display {
    border-color: #6c5ce7;
}

.phone-country-select {
    background: #f8f9ff;
    padding: 14px 12px;
    border: 2px solid #e0e0e0;
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
    min-width: 100px;
    display: flex;
    align-items: center;
}

.phone-country-select:focus {
    outline: none;
    border-color: #6c5ce7;
    background-color: #fff;
}

.phone-input input {
    border-radius: 0 10px 10px 0;
    padding-left: 15px;
    flex: 1;
}

/* Yolcu Bilgileri / Geliş Bilgileri */
.yolcu-item {
    margin-bottom: 15px;
}

.yolcu-item:last-child {
    margin-bottom: 0;
}

.yolcu-item .form-group {
    margin-bottom: 0;
}

.yolcu-item .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.yolcu-item input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s;
}

.yolcu-item input:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.form-row-2 .form-group {
    margin-bottom: 0;
}

.form-row-2 input:not(.phone-input input):not(.input-wrapper input),
.form-row-2 select:not(.phone-country-select):not(.input-wrapper select) {
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    width: 100%;
}

.form-row-2 .input-wrapper {
    width: 100%;
    position: relative;
    display: block;
}

.form-row-2 .input-wrapper .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c5ce7;
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

.form-row-2 .input-wrapper input {
    width: 100%;
    padding: 14px 15px 14px 45px;
    box-sizing: border-box;
    min-width: 0;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c5ce7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
}

/* Ödeme Yöntemi - Yeni Tasarım */
.odeme-yontemleri-new {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.odeme-yontemi-new {
    position: relative;
}

.odeme-yontemi-new input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.odeme-yontemi-new label {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    background: #fff;
    margin: 0;
    position: relative;
}

.odeme-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #6c5ce7;
    flex-shrink: 0;
    padding-top: 2px; /* İkonu biraz aşağı ortalama */
}

.odeme-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.odeme-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.odeme-desc {
    font-size: 13px;
    color: #666;
}

.odeme-check {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.odeme-check i {
    font-size: 20px;
    color: #28a745;
}

.odeme-yontemi-new:hover label {
    border-color: #6c5ce7;
    background: #f8f9ff;
}

.odeme-yontemi-new input[type="radio"]:checked + label {
    border-color: #28a745;
    background: #f0fdf4;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.odeme-yontemi-new input[type="radio"]:checked + label .odeme-check {
    opacity: 1;
}

.odeme-yontemi-new input[type="radio"]:checked + label .odeme-icon {
    color: #28a745;
}


/* Rezervasyon Oluştur Butonu */
.btn-rezervasyon-olustur {
    width: 100%;
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    color: #fff;
    border: none;
    padding: 18px 30px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.btn-rezervasyon-olustur:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.btn-rezervasyon-olustur i {
    font-size: 18px;
}

/* Bebek Koltuğu Bölümü */
.bebek-koltugu-wrapper {
    margin-top: 0;
    padding-top: 0;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 25px;
}

.bebek-koltugu-header {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #6c5ce7;
    background: #fff;
    transition: all 0.3s;
}

.bebek-koltugu-header:hover {
    background-color: #f8f9ff;
    border-color: #6c5ce7;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.1);
}

/* Bebek koltuğu seçildiğinde header'ı vurgula */
.bebek-koltugu-header.bebek-koltugu-selected {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8e9ff 100%);
    border-color: #6c5ce7;
    border-width: 3px;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.25);
}

.bebek-koltugu-header.bebek-koltugu-selected .bebek-koltugu-title {
    color: #6c5ce7;
    font-weight: 700;
}

.bebek-koltugu-header.bebek-koltugu-selected .bebek-koltugu-icon {
    transform: scale(1.2);
    color: #6c5ce7;
}

.bebek-koltugu-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.bebek-koltugu-icon {
    color: #6c5ce7;
    font-size: 22px;
}

.bebek-koltugu-title {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.bebek-koltugu-subtitle {
    font-weight: normal;
    font-size: 14px;
    color: #666;
}

.bebek-koltugu-checkbox-label {
    cursor: pointer;
}

/* Havalimanında İsimle Karşılama */
.karsilama-wrapper {
    margin-top: 15px;
}

.karsilama-header {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #6c5ce7;
    background: #fff;
    transition: all 0.3s;
}

/* Tabela stili */
.karsilama-header.karsilama-tabela {
    background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
    border: 3px solid #6c5ce7;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);
    position: relative;
    overflow: hidden;
}

.karsilama-header.karsilama-tabela::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #6c5ce7 0%, #a29bfe 100%);
}

.karsilama-header.karsilama-tabela .karsilama-title {
    color: #6c5ce7;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.karsilama-header.karsilama-tabela .karsilama-icon {
    font-size: 28px;
    color: #6c5ce7;
}

.karsilama-header:hover {
    background-color: #f8f9ff;
    border-color: #6c5ce7;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.1);
}

.karsilama-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.karsilama-icon {
    color: #6c5ce7;
    font-size: 22px;
}

.karsilama-title {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.karsilama-subtitle {
    font-weight: normal;
    font-size: 14px;
    color: #666;
}

.karsilama-checkbox-label {
    cursor: pointer;
}

.karsilama-checkbox-label .checkmark {
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #6c5ce7;
    border-radius: 4px;
    position: relative;
    transition: all 0.3s;
}

.karsilama-checkbox-label .checkmark::after {
    content: '';
    position: absolute;
    display: none;
}

.karsilama-checkbox-label input[type="checkbox"]:checked ~ .checkmark {
    background: #6c5ce7;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.karsilama-checkbox-label input[type="checkbox"]:checked ~ .checkmark::after {
    display: block;
    content: '✕';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}

.karsilama-header.karsilama-selected {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8e9ff 100%);
    border-color: #6c5ce7;
    border-width: 3px;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.25);
}

.karsilama-header.karsilama-selected .karsilama-title {
    color: #6c5ce7;
    font-weight: 700;
}

.karsilama-header.karsilama-selected .karsilama-icon {
    transform: scale(1.2);
    color: #6c5ce7;
}

.bebek-koltugu-info {
    margin-bottom: 20px;
    padding: 12px;
    background: #f8f9ff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.bebek-koltugu-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.bebek-koltugu-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.bebek-koltugu-item {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    cursor: pointer;
}

.bebek-koltugu-item:hover {
    border-color: #6c5ce7;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);
}

.koltuk-checkbox-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    z-index: 10;
}

.koltuk-checkbox {
    width: 30px;
    height: 30px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.koltuk-checkbox i {
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s;
}

.bebek-koltugu-item.selected .koltuk-checkbox {
    background: #27ae60;
    border-color: #27ae60;
}

.bebek-koltugu-item.selected .koltuk-checkbox i {
    opacity: 1;
}

.koltuk-image {
    margin-bottom: 15px;
    border: none;
    background: transparent;
    width: auto;
    height: auto;
    padding: 0;
}

.koltuk-info h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 15px;
    font-weight: 600;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.qty-btn {
    width: 35px;
    height: 35px;
    border: 2px solid #e0e0e0;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #6c5ce7;
    transition: all 0.3s;
}

.qty-btn:hover {
    border-color: #6c5ce7;
    background: #f8f9ff;
}

.qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quantity-selector input {
    width: 50px;
    height: 35px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 35px;
    padding: 0;
}

.quantity-selector input:focus {
    outline: none;
    border-color: #6c5ce7;
}

/* Sağ Kolon: Özet */
.ozet-kolon {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
    height: fit-content;
}

.ozet-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(108, 92, 231, 0.15);
    border: 1px solid rgba(108, 92, 231, 0.1);
}

.ozet-card h3 {
    color: #333;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 3px solid #6c5ce7;
    position: relative;
}

.ozet-card h3::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    border-radius: 2px;
}

.detay-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.detay-item:last-child {
    margin-bottom: 0;
}

.detay-icon {
    font-size: 18px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    margin-top: 0;
    line-height: 1;
    padding: 0;
    text-align: center;
}

.detay-icon i {
    display: block;
    line-height: 1;
    margin: 0;
}

.detay-content {
    flex: 1;
    min-width: 0;
}

.detay-content strong {
    display: block;
    color: #6c5ce7;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.detay-content span {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    display: block;
    word-wrap: break-word;
}

/* Promosyon Kodu */
.promosyon-input-group {
    display: flex;
    gap: 10px;
}

.promosyon-input-group input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
}

.btn-promosyon {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-promosyon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

/* Ödeme Detayları */
.odeme-detay-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
}

.odeme-detay-item:last-child {
    border-bottom: none;
}

.odeme-detay-item.total {
    padding-top: 20px;
    margin-top: 10px;
    
    font-weight: 700;
    font-size: 18px;
    color: #333;
}

.odeme-detay-item.total span:last-child {
    color: #6c5ce7;
    font-size: 20px;
}

#bebek-koltugu-detay-list {
    width: 100%;
    display: block;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .rezervasyon-detay-layout {
        grid-template-columns: 1fr;
    }
    
    .ozet-kolon {
        position: static;
    }
    
    .bebek-koltugu-list {
        grid-template-columns: 1fr;
    }
}

/* Custom Time Picker Styles */
.custom-time-picker-wrapper {
    position: relative;
}

.custom-time-input {
    cursor: pointer;
}

/* Yeni Time Input Stilleri (Saat ve Dakika Ayrı) */
.time-input-separate {
    position: relative;
}

.time-inputs-container {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: flex-start;
}

.time-input-hour {
    width: 55px;
    padding: 6px 4px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    color: #333;
    background: #fff;
    transition: all 0.3s;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 55px;
}

.time-input-hour:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1);
}

.time-input-hour::-ms-expand {
    display: none;
}

.time-separator {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    user-select: none;
    margin: 0 3px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.time-input-minute {
    width: 42px;
    padding: 6px 3px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    color: #333;
    background: #fff;
    transition: all 0.3s;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 42px;
}

.time-input-minute:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1);
}

.custom-time-picker {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #6c5ce7;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    margin-top: 5px;
    padding: 15px;
    gap: 10px;
}

.time-picker-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.time-picker-label {
    text-align: center;
    font-weight: 600;
    color: #6c5ce7;
    margin-bottom: 10px;
    font-size: 12px;
    text-transform: uppercase;
}

.time-picker-scroll {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 5px 0;
}

.time-picker-item {
    padding: 8px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #333;
}

.time-picker-item:hover {
    background: #f0f0f0;
}

.time-picker-item.selected {
    background: #6c5ce7;
    color: #fff;
    font-weight: 600;
}

.time-picker-scroll::-webkit-scrollbar {
    width: 6px;
}

.time-picker-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.time-picker-scroll::-webkit-scrollbar-thumb {
    background: #6c5ce7;
    border-radius: 3px;
}

.time-picker-scroll::-webkit-scrollbar-thumb:hover {
    background: #5a4fcf;
}

@media (max-width: 768px) {
    .transfer-tip-options {
        flex-direction: column;
    }
    
    .transfer-tip-option {
        width: 100%;
        justify-content: center;
    }
    
    .form-row-2 {
        grid-template-columns: 1fr;
    }
    
    .promosyon-input-group {
        flex-direction: column;
    }
    
    .btn-promosyon {
        width: 100%;
    }
    
    /* Mobilde layout düzeni */
    .rezervasyon-detay-layout {
        display: flex;
        flex-direction: column;
    }
    
    .form-kolon {
        display: flex;
        flex-direction: column;
    }
    
    .ozet-kolon {
        order: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Ödeme yöntemi bölümü mobilde ozet-kolon'a taşındığında */
    .ozet-kolon .odeme-yontemi-section {
        margin-top: 20px;
    }
}

.phone-country-dropdown { display:none; }
.phone-country-dropdown.show { display:block; }
/* =========================================================
   PREMIUM - REZERVASYON DETAY (rezervasyon-detay.php)
   ========================================================= */
body.premium-rez{
  background:#070707;
  color:#f2f2f2;
}

/* Sol form section kartları */
body.premium-rez .form-section{
  background: rgba(10,10,10,.85) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,.55) !important;
  color: rgba(245,245,245,.9) !important;
}

body.premium-rez .form-section-header h3,
body.premium-rez .form-section h3{
  color: rgba(212,175,55,.95) !important;
}

body.premium-rez .form-section-header i{
  color: rgba(212,175,55,.95) !important;
}

body.premium-rez label{
  color: rgba(245,245,245,.85) !important;
}

body.premium-rez .required{
  color: rgba(212,175,55,.85) !important;
}

/* Inputlar */
body.premium-rez input,
body.premium-rez select,
body.premium-rez textarea{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  color: rgba(245,245,245,.92) !important;
}

body.premium-rez input::placeholder,
body.premium-rez textarea::placeholder{
  color: rgba(245,245,245,.45) !important;
}

body.premium-rez .input-icon{
  color: rgba(212,175,55,.9) !important;
}

/* Sağ özet kartları (asıl "görünmüyor" dediğin yer burası) */
body.premium-rez .ozet-kolon .ozet-card{
  background: rgba(10,10,10,.85) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,.55) !important;
  color: rgba(245,245,245,.9) !important;
}

body.premium-rez .ozet-kolon .ozet-card h3{
  color: rgba(212,175,55,.95) !important;
}

/* Özet detay satırları */
body.premium-rez .ozet-kolon .detay-item strong{
  color: rgba(212,175,55,.85) !important;
}
body.premium-rez .ozet-kolon .detay-item span{
  color: rgba(245,245,245,.92) !important;
}
body.premium-rez .ozet-kolon .detay-item i{
  color: rgba(212,175,55,.95) !important;
}

/* Ödeme Detayları rakamlar */
body.premium-rez #arac-fiyati,
body.premium-rez #ara-toplam,
body.premium-rez #toplam-fiyat{
  color: rgba(212,175,55,.95) !important;
  font-weight: 800;
}

/* Promosyon alanı */
body.premium-rez .promosyon-input-group input{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(212,175,55,.25) !important;
  color: rgba(245,245,245,.92) !important;
}
body.premium-rez .btn-promosyon{
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(176,137,36,.95)) !important;
  color:#0b0b0b !important;
  border: 0 !important;
}

/* Rezervasyon oluştur butonu */
body.premium-rez .btn-rezervasyon-olustur{
  background: linear-gradient(135deg, rgba(212,175,55,.95), rgba(176,137,36,.95)) !important;
  color:#0b0b0b !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}
/* =================================================
   REZERVASYON DETAY – PREMIUM BLACK & GOLD FIX
   ================================================= */

:root{
  --gold:#d4af37;
  --gold-soft:#e6c86f;
  --black:#0b0b0b;
  --black-soft:#121212;
  --text:#f2f2f2;
}

/* =========================
   TELEFON ALANI (BAYRAK + KOD)
   ========================= */
.phone-input-with-flag{
  background: var(--black-soft) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
}

.phone-flag-button,
.phone-code-display{
  background: #000 !important;
  color: #fff !important;
  border-right: 1px solid rgba(212,175,55,.3) !important;
}

/* dropdown */
.phone-country-dropdown{
  background: #0f0f0f !important;
  border: 1px solid rgba(212,175,55,.35) !important;
}

.phone-country-item{
  color: #fff !important;
}
.phone-country-item.active,
.phone-country-item:hover{
  background: rgba(212,175,55,.12) !important;
}

/* =========================
   SAĞ REZERVASYON DETAY İKONLARI
   (mor yuvarlaklar)
   ========================= */
.rezervasyon-detaylari .detay-icon-wrapper,
.ozet-kolon .detay-icon{
  background: #000 !important;
  border: 1px solid rgba(212,175,55,.45) !important;
  color: var(--gold) !important;
}

/* =========================
   SAĞ PANEL YAZILAR
   ========================= */
.rezervasyon-detaylari strong{
  color: var(--gold) !important;
  font-weight: 700 !important;
}

.rezervasyon-detaylari span{
  color: #ffffff !important;
}

/* =========================
   BEBEK KOLTUĞU / KARŞILAMA KUTULARI
   (beyaz kalan alanlar)
   ========================= */
.bebek-koltugu-wrapper,
.bebek-koltugu-header{
  background: var(--black-soft) !important;
  border: 1px solid rgba(212,175,55,.35) !important;
  color: #fff !important;
}

/* başlıklar */
.bebek-koltugu-title{
  color: var(--gold) !important;
}
.bebek-koltugu-subtitle{
  color: #fff !important;
}

/* ikonlar */
.bebek-koltugu-icon{
  color: var(--gold) !important;
}

/* checkbox */
.checkbox-label .checkmark{
  border-color: rgba(212,175,55,.6) !important;
}

/* =========================
   NOT ALANI (textarea)
   ========================= */
textarea,
#notlar{
  background: #0f0f0f !important;
  color: #ffffff !important;
  border: 1px solid rgba(212,175,55,.35) !important;
}

textarea::placeholder{
  color: rgba(255,255,255,.45) !important;
}

/* =========================
   PROMOSYON KODU
   ========================= */
.promosyon-input-group input{
  background: #0f0f0f !important;
  color: #fff !important;
  border: 1px solid rgba(212,175,55,.35) !important;
}

.promosyon-input-group button{
  background: linear-gradient(135deg,var(--gold),#b88924) !important;
  color: #000 !important;
  font-weight: 800 !important;
}

/* Kupon bilgi mesajları */
.kupon-mesaj {
  margin-top: 8px;
  font-size: 13px;
}

.kupon-mesaj-basarili {
  color: #2ecc71;
}

.kupon-mesaj-hata {
  color: #e74c3c;
}
/* ===============================
   BEBEK KOLTUGU KARTLARI: SİYAH + FULL GOLD
   =============================== */

/* üst wrapper zaten siyah kalsın */
.bebek-koltugu-wrapper{
  background:#0b0b0b !important;
  border:1px solid rgba(212,175,55,.55) !important;
}

/* BEYAZ KARTLAR = .bebek-koltugu-item */
.bebek-koltugu-item{
  background:#000 !important;
  border:1px solid rgba(212,175,55,.65) !important;
  border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.12);
}

/* iç bloklar */
.bebek-koltugu-item .koltuk-image,
.bebek-koltugu-item .koltuk-info{
  background:transparent !important;
}

/* başlıklar tamamen GOLD */
.bebek-koltugu-item h4{
  color:#d4af37 !important;
  font-weight:700;
}

/* ikonlar FULL GOLD */
.bebek-koltugu-item .koltuk-image i,
.bebek-koltugu-item i,
.bebek-koltugu-item svg{
  color:#d4af37 !important;
  fill:#d4af37 !important;
}

/* sayaç input (0) */
.bebek-koltugu-item input[type="number"]{
  background:#050505 !important;
  color:#d4af37 !important;
  border:1px solid rgba(212,175,55,.7) !important;
  border-radius:10px;
  font-weight:700;
}

/* - + butonları */
.bebek-koltugu-item .qty-btn{
  background:#000 !important;
  color:#d4af37 !important;
  border:1px solid #d4af37 !important;
  border-radius:10px;
  font-weight:800;
}

.bebek-koltugu-item .qty-btn:hover{
  background:#d4af37 !important;
  color:#000 !important;
}

/* ❌ mor çizgi / ring / focus kalıntıları */
.bebek-koltugu-item *{
  box-shadow:none !important;
  --tw-ring-color: transparent !important;
  accent-color:#d4af37 !important;
}

/* checkbox çizgisi de gold */
.bebek-koltugu-wrapper .checkmark{
  border:1px solid rgba(212,175,55,.8) !important;
}
.bebek-koltugu-wrapper input:checked ~ .checkmark{
  background:#d4af37 !important;
}
/* soldaki çizgi varsa kapat */
.bebek-koltugu-header::before,
.bebek-koltugu-wrapper::before{
  display:none !important;
}

/* header satırını hizala: başlık solda, ok sağda */
.bebek-koltugu-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}

/* ok tasarımı */
.accordion-arrow{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(212,175,55,.7);
  background:#000;
  color:#d4af37;
  transition:transform .2s ease;
}

.accordion-arrow i{
  color:#d4af37;
  font-size:14px;
}

/* Açıkken ok yukarı dönecek */
/* Bebek koltuğu oku: SADECE kendi header’ı */
.bebek-koltugu-wrapper.is-open > .bebek-koltugu-header .accordion-arrow i {
  transform: rotate(180deg);
}

/* Karşılama oku: SADECE kendi header’ı */
.karsilama-wrapper.is-open > .bebek-koltugu-header .accordion-arrow i {
  transform: rotate(180deg);
}

/* ✅ MOR ÇİZGİLERİ GOLD YAP (Özet kartlar + tüm başlık alt çizgileri) */

/* 1) Rezervasyon Detayları / Promosyon / Ödeme kartlarının mor çizgisi */
.ozet-card h3::after,
.ozet-card h3:after,
.ozet-card .card-title::after,
.ozet-card .section-title::after{
  background: linear-gradient(90deg, #d4af37 0%, #f7e27c 50%, #d4af37 100%) !important;
  box-shadow: 0 0 10px rgba(212,175,55,.35) !important;
}

/* Eğer çizgi border-bottom ile geliyorsa */
.ozet-card h3,
.ozet-card .card-title,
.ozet-card .section-title{
  border-bottom: 1px solid rgba(212,175,55,.45) !important;
}

/* 2) Sitede mor geçen her şeyi GOLD'a zorla (çizgi/ikon/detay) */
:root{
  --primary: #d4af37 !important;
  --accent:  #d4af37 !important;
}

/* Mor renk sabit verilmişse yakala */
*[style*="#6c5ce7"],
*[style*="rgb(108, 92, 231)"]{
  color: #d4af37 !important;
  border-color: rgba(212,175,55,.6) !important;
}

/* 3) Mor border/background olan ince çizgi sınıflarını da ez */
.hr,
.divider,
.separator,
.section-divider,
.line,
.underline{
  background: rgba(212,175,55,.65) !important;
  border-color: rgba(212,175,55,.65) !important;
}
/* ===============================
   TELEFON ALANI - BEYAZ ÇERÇEVEYİ KALDIR / GOLD ÇERÇEVE
   =============================== */

/* dış kapsayıcı tek parça gold çerçeve */
body.premium-rez .phone-input-with-flag{
  border: 1px solid rgba(212,175,55,.65) !important;
  border-radius: 12px !important;
  background: #0b0b0b !important;
  overflow: hidden !important; /* köşeler düzgün birleşsin */
  box-shadow: none !important;
}

/* içerideki parçaların borderlarını sıfırla (beyazlık buradan geliyordu) */
body.premium-rez .phone-flag-button,
body.premium-rez .phone-code-display,
body.premium-rez .phone-input-with-flag input{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* iç ayırıcı çizgiler GOLD olsun */
body.premium-rez .phone-flag-button{
  background:#000 !important;
  color:#fff !important;
  border-right: 1px solid rgba(212,175,55,.45) !important;
  border-radius: 0 !important;
}

body.premium-rez .phone-code-display{
  background:#000 !important;
  color:#d4af37 !important;
  border-right: 1px solid rgba(212,175,55,.45) !important;
  border-radius: 0 !important;
}

body.premium-rez .phone-input-with-flag input{
  color:#fff !important;
  padding: 14px 15px !important;
  border-radius: 0 !important;
}

/* focus olunca mor/beyaz ring olmasın, sadece gold dış çerçeve kalsın */
body.premium-rez .phone-input-with-flag:focus-within{
  border-color: rgba(212,175,55,.95) !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,.18) !important;
}

/* butona tıklayınca tarayıcı outline vermesin */
body.premium-rez .phone-flag-button:focus,
body.premium-rez .phone-flag-button:active{
  outline: none !important;
  box-shadow: none !important;
}
/* ✅ DROPDOWN AÇILMIYOR SORUNU - overflow hidden düzeltmesi */
body.premium-rez .phone-input-with-flag{
  overflow: visible !important;  /* dropdown dışarı taşsın */
  position: relative !important; /* z-index çalışsın */
}

/* dropdown üstte kalsın */
body.premium-rez .phone-flag-selector{
  position: relative !important;
}

body.premium-rez #phone-country-dropdown.phone-country-dropdown{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  z-index: 99999 !important;
}
/* ✅ Telefon alanı: köşeleri düzelt + altın çerçeve */
body.premium-rez .phone-input-with-flag{
  border: 1px solid rgba(212, 175, 55, .55) !important; /* gold */
  border-radius: 12px !important;
  overflow: visible !important; /* dropdown için */
  background: #0b0b0b !important;
}

/* İç parçalar köşeyi bozmasın */
body.premium-rez .phone-flag-selector,
body.premium-rez .phone-flag-button,
body.premium-rez .phone-code-display,
body.premium-rez #telefon{
  border-radius: 0 !important;
  background: transparent !important;
}

/* Sol tarafta DE kutusu ile +49 arasında çizgi */
body.premium-rez .phone-flag-selector{
  border-right: 1px solid rgba(212, 175, 55, .35) !important;
}

/* ✅ Yazılar BEYAZ: DE, +49 ve input yazısı */
body.premium-rez .phone-flag-button,
body.premium-rez .phone-code-display,
body.premium-rez #telefon{
  color: #fff !important;
}

/* Placeholder da beyaz-gri */
body.premium-rez #telefon::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* ✅ Dropdown: çerçeve gold, yazılar beyaz */
body.premium-rez #phone-country-dropdown.phone-country-dropdown{
  border: 1px solid rgba(212, 175, 55, .65) !important;
  border-radius: 12px !important;
  background: #0b0b0b !important;
  z-index: 99999 !important;
}

body.premium-rez #phone-country-dropdown .phone-country-item{
  color: #fff !important; /* ülke yazıları beyaz */
}

body.premium-rez #phone-country-dropdown .country-name,
body.premium-rez #phone-country-dropdown .country-code{
  color: #fff !important; /* isim + numara beyaz */
}

/* Hover güzel dursun */
body.premium-rez #phone-country-dropdown .phone-country-item:hover{
  background: rgba(212,175,55,.10) !important;
}
/* ===============================
   TELEFON + SAAT/DK - TEMA UYUMLU
   =============================== */

/* Telefon input wrapper */
body.premium-rez .phone-input-with-flag,
body.premium-rez .phone-flag-button,
body.premium-rez .phone-code-display,
body.premium-rez input[type="tel"] {
  background: #242628 !important;
  color: #ffffff !important;
  border-color: rgba(212,175,55,.55) !important;
}

/* Saat & Dakika select (kapalı hali) */
body.premium-rez select.time-input-hour,
body.premium-rez select.time-input-minute {
  background: #242628 !important;
  color: #ffffff !important;
  border: 1px solid rgba(212,175,55,.55) !important;
}

/* Saat & Dakika açılan liste */
body.premium-rez select.time-input-hour option,
body.premium-rez select.time-input-minute option {
  background: #242628 !important;
  color: #ffffff !important;
}

/* Hover / seçili */
body.premium-rez select.time-input-hour option:hover,
body.premium-rez select.time-input-minute option:hover,
body.premium-rez select.time-input-hour option:checked,
body.premium-rez select.time-input-minute option:checked {
  background: rgba(212,175,55,.25) !important;
  color: #ffffff !important;
}

/* Placeholder rengi */
body.premium-rez input::placeholder {
  color: rgba(255,255,255,.45);
}

/* MOBİL SAFARI / IOS FIX */
@supports (-webkit-touch-callout: none) {
  body.premium-rez select,
  body.premium-rez input {
    background-color: #242628 !important;
    color: #ffffff !important;
  }
}
    /* ===============================
   TELEFON DROPDOWN AÇILMIYOR FIX
   (overflow hidden dropdown'ı kesiyordu)
   =============================== */

body.premium-rez .phone-input-with-flag{
  overflow: visible !important;            /* ✅ dropdown artık kesilmez */
  border-radius: 12px !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  background: #242628 !important;          /* sayfanın gri tonu */
}

/* dropdown'ın düzgün konumlanması için */
body.premium-rez .phone-flag-selector{
  position: relative !important;
}

/* dropdown üstte çıksın */
body.premium-rez #phone-country-dropdown{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  z-index: 999999 !important;
  width: 320px !important;
  max-height: 260px !important;
  overflow-y: auto !important;

  background: #242628 !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.45) !important;
}

/* İç parçaların köşeleri düzgün olsun */
body.premium-rez .phone-flag-button{
  border: 0 !important;
  border-right: 1px solid rgba(212,175,55,.35) !important;
  border-radius: 12px 0 0 12px !important;
  background: #242628 !important;
  color: #fff !important;
}

body.premium-rez .phone-code-display{
  border: 0 !important;
  border-right: 1px solid rgba(212,175,55,.35) !important;
  background: #242628 !important;
  color: #fff !important;                  /* ✅ numara beyaz */
  font-weight: 600;
}

body.premium-rez .phone-input-with-flag input[type="tel"]{
  border: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  background: #242628 !important;
  color: #fff !important;                  /* ✅ yazı beyaz */
  outline: none !important;
  box-shadow: none !important;
}

/* Dropdown içindeki ülke satırları: yazılar + kodlar beyaz */
body.premium-rez .phone-country-item,
body.premium-rez .phone-country-item .country-name,
body.premium-rez .phone-country-item .country-code{
  color: #fff !important;
}

/* Hover/active güzelleştirme */
body.premium-rez .phone-country-item:hover{
  background: rgba(212,175,55,.10) !important;
}
body.premium-rez .phone-country-item.active{
  background: rgba(212,175,55,.16) !important;
}

/* Focus rengi (mor-mavi olmasın) */
body.premium-rez .phone-input-with-flag:focus-within{
  box-shadow: 0 0 0 2px rgba(212,175,55,.18) !important;
}

/* =========================
   PRELOADER (REZERVASYON OLUŞTURULUYOR)
   Premium Gold Tema: Siyah, Sarı, Beyaz
   ========================= */
.rezervasyon-preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(7, 7, 7, 0.98) !important;
    z-index: 2147483647 !important;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.rezervasyon-preloader.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Preloader açıldığında butonu gizle */
body.preloader-active .btn-rezervasyon-olustur {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: scale(0) !important;
}

.rezervasyon-preloader-content {
    background: rgba(10, 10, 10, 0.95);
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 20px;
    padding: 50px 60px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 175, 55, 0.3);
    max-width: 400px;
    width: 90%;
}

.rezervasyon-preloader-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: rgba(212, 175, 55, 1);
    border-radius: 50%;
    animation: rezervasyon-spin 1s linear infinite !important;
    -webkit-animation: rezervasyon-spin 1s linear infinite !important;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.rezervasyon-preloader-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.5;
    margin: 0;
}

.rezervasyon-preloader-text strong {
    color: rgba(212, 175, 55, 1);
    font-weight: 700;
}

@keyframes rezervasyon-spin {
    from {
        -webkit-transform: rotate(0deg) translateZ(0);
        transform: rotate(0deg) translateZ(0);
    }
    to {
        -webkit-transform: rotate(360deg) translateZ(0);
        transform: rotate(360deg) translateZ(0);
    }
}

@-webkit-keyframes rezervasyon-spin {
    from {
        -webkit-transform: rotate(0deg) translateZ(0);
        transform: rotate(0deg) translateZ(0);
    }
    to {
        -webkit-transform: rotate(360deg) translateZ(0);
        transform: rotate(360deg) translateZ(0);
    }
}

/* Mobil için özel optimizasyon */
@media (max-width: 768px) {
    .rezervasyon-preloader-spinner {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-animation: rezervasyon-spin 1s linear infinite !important;
        animation: rezervasyon-spin 1s linear infinite !important;
        will-change: transform;
        -webkit-will-change: transform;
    }
    
    .rezervasyon-preloader-content {
        padding: 40px 30px;
    }
    
    .rezervasyon-preloader-text {
        font-size: 16px;
    }
}
/* Özet kart içindeki detay satırlarını saran alanı flex yap */
.ozet-card {
  position: relative;
}

/* Detay item'ların olduğu alan (ikonlar + içerik birlikte) */
.ozet-card .detay-item {
  display: flex;
  align-items: center;          /* ✅ her satırda ikon ve yazıyı ortala */
}

/* Eğer sen ikonları bir kolon gibi solda sabit genişlikte tutuyorsan */
.ozet-card .detay-icon {
  width: 44px;                  /* ikon kolon genişliği */
  min-width: 44px;
  display: flex;
  align-items: center;          /* ✅ ikonun kendi içinde dikey ortası */
  justify-content: center;      /* ✅ yatay ortası */
}

/* ✅ Asıl istenen: ikonların bulunduğu “sol kolon” komple ortalansın
   Eğer senin HTML'de ikonlar tek tek .detay-item içindeyse,
   bu zaten satır bazlı olur. Ama ikonlar yukarıda kalıyorsa,
   demek ki ikonlar ayrı bir container içinde. O container varsa: */
.ozet-card .detay-icons,
.ozet-card .detay-icons-col,
.ozet-card .detay-icons-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;      /* ✅ tüm ikon grubunu ortala */
  height: 100%;
}
@media (max-width: 768px) {
  .ozet-kolon{
    position: static !important;  /* sticky iptal */
    top: auto !important;
    z-index: auto !important;
  }

  .btn-rezervasyon-olustur{
    position: relative !important;
    z-index: 99999 !important;   /* buton her şeyin üstünde */
  }
}

}
/* Mobilde butonun üstüne bir şey binmesin */
@media (max-width: 768px){
  .btn-rezervasyon-olustur{
    position: relative !important;
    z-index: 9999 !important;
  }
}
@media (max-width: 768px) {

  /* mobilde iki kolon alt alta */
  .rezervasyon-detay-layout{
    display:flex !important;
    flex-direction:column !important;
  }

  /* sağ kolon üstte gelsin */
  .ozet-kolon{
    order:1 !important;
    display:flex !important;
    flex-direction:column !important;
  }

  /* form aşağı gelsin */
  .form-kolon{
    order:2 !important;
    width:100% !important;
  }

/* =========================================
   GOOGLE PLACES AUTOCOMPLETE DROPDOWN - SİYAH ALTIN TEMA
   ========================================= */
.pac-container {
    z-index: 999999 !important;
    background: #0b0b0c !important;
    border: 1px solid rgba(212, 175, 55, .55) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .90) !important;
    border-radius: 14px !important;
}

.pac-container,
.pac-container * {
    color: #fff !important;
}

.pac-item {
    background: #0b0b0c !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 12px 16px !important;
}

.pac-item:hover {
    background: #17171a !important;
}

.pac-item-query {
    color: #d4af37 !important;
    font-weight: 800 !important;
}

.pac-matched {
    color: #f5e28a !important;
    font-weight: 800 !important;
}

.pac-icon {
    background-color: transparent !important;
}

  /* ✅ Transfer Detayları kartını gizle (ozet-kolon içindeki 1. kart) */
  .ozet-kolon .ozet-card:first-child{
    display:none !important;
  }

}

/* --- TARİH INPUT YAPISI --- */
.date-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Masaüstü: font-awesome ikon görünür */
.date-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c5ce7;
    font-size: 16px;
    pointer-events: none;
    z-index: 3;
}

.date-input-wrapper input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px 14px 45px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    background: #fff;
    font-family: inherit;
    line-height: normal;
    min-width: 0;
    display: block;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.date-input-wrapper input[type="date"]:focus {
    outline: none;
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

/* Masaüstünde Chrome'un built-in takvim ikonunu şeffaf yap ama tıklanabilir bırak */
@media (min-width: 769px) {
    .date-native-input {
        text-align: center !important;
    }
    .date-native-input::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
        z-index: 1 !important;
    }
}

/* Premium tema */
body.premium-rez .date-input-wrapper input[type="date"] {
    background: #242628 !important;
    border: 1px solid rgba(212,175,55,.55) !important;
    color: #fff !important;
}

body.premium-rez .date-input-wrapper input[type="date"]:focus {
    border-color: rgba(212,175,55,.95) !important;
    box-shadow: 0 0 0 2px rgba(212,175,55,.18) !important;
}

body.premium-rez .date-input-icon {
    color: rgba(212,175,55,.9) !important;
}

/* Mobil - DOKUNMA, ÇALIŞIYOR */
@media (max-width: 768px) {
    .date-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .date-input-icon {
        display: block !important;
        left: 12px !important;
        z-index: 3 !important;
        pointer-events: none !important;
    }
    .date-input-wrapper input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 14px 40px 14px 40px !important;
        overflow: visible !important;
        display: block !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    .date-native-input::-webkit-calendar-picker-indicator {
        opacity: 1 !important;
        position: absolute !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: auto !important;
        width: 24px !important;
        height: 24px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 3 !important;
    }
    /* Tarih alanı form-row-2 içinde tam genişlik kaplasın */
    .form-group:has(.date-input-wrapper) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* --- TARİH SELECT YAPISI --- */
.date-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 10px 0 45px;
    min-height: 52px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.date-select-wrapper:focus-within {
    border-color: #6c5ce7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.date-select-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c5ce7;
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
}

.date-selects-container {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    flex-wrap: nowrap;
}

.date-select-part {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #333 !important;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    padding: 0 2px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex-shrink: 1;
    min-width: 0;
    width: 42px;
    text-align: center;
    box-shadow: none !important;
}

.date-select-part.date-select-year {
    width: 60px;
}

.date-select-part:focus {
    color: #6c5ce7 !important;
}

.date-sep {
    color: #999;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}

/* Premium tema uyumu */
body.premium-rez .date-select-wrapper {
    background: #242628 !important;
    border: 1px solid rgba(212,175,55,.55) !important;
}

body.premium-rez .date-select-wrapper:focus-within {
    border-color: rgba(212,175,55,.95) !important;
    box-shadow: 0 0 0 2px rgba(212,175,55,.18) !important;
}

body.premium-rez .date-select-part {
    color: #fff !important;
    background: transparent !important;
}

body.premium-rez .date-select-part option {
    background: #242628 !important;
    color: #fff !important;
}

body.premium-rez .date-sep {
    color: rgba(212,175,55,.7) !important;
}

body.premium-rez .date-select-icon {
    color: rgba(212,175,55,.9) !important;
}

/* Mobil */
@media (max-width: 768px) {
    .date-select-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .date-selects-container {
        width: 100% !important;
    }
    .date-select-part {
        font-size: 14px;
        width: 38px;
    }
    .date-select-part.date-select-year {
        width: 56px;
    }
}

/* --- MOBİL TAŞMA FİX (FORCE MODE) --- */
@media (max-width: 768px) {
    /* 1. Sayfanın sağa kaymasını kökten engelle */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    /* 2. Grid yapısını tamamen devre dışı bırak, dikey yapıya zorla */
    .rezervasyon-detay-layout, 
    .form-row-2, 
    .yolcu-item .form-row-2 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        grid-template-columns: none !important; /* Grid'i kapat */
    }

    /* 3. Görseldeki o kutunun (Saat/Dakika) taşmasını engelle */
    .time-inputs-container {
        display: flex !important;
        flex-direction: row !important; /* Saat ve dakika yan yana kalsın */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Kutular ekranın dışına taşmasın, sığmaya zorla */
    .time-input-hour, 
    .time-input-minute {
        width: 100% !important; /* Kapsayıcıyı doldur */
        min-width: 0 !important;   /* Zorla küçült */
        flex: 1 !important;
    }

    /* 4. Tüm form bölümlerini ekran genişliğine sabitle */
    .form-section, 
    .ozet-card, 
    .input-wrapper, 
    .phone-input-with-flag {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 6. Tarih inputlarının mobilde taşmasını engelle */
    .input-wrapper input[type="date"],
    .input-wrapper input[type="time"],
    .form-row-2 .input-wrapper input[type="date"],
    .form-row-2 .input-wrapper input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-right: 35px !important;
        font-size: 16px !important;
    }

    .date-input-wrapper input[type="date"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 14px 40px 14px 15px !important;
        overflow: visible !important;
    }

    .date-input-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .input-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
    .input-wrapper input[type="time"]::-webkit-calendar-picker-indicator,
    .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute !important;
        right: 8px !important;
        width: 20px !important;
        height: 20px !important;
    }

    /* 5. Eğer sağdaki özet hala sırıtmaya çalışıyorsa */
    .ozet-kolon {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: static !important; /* Sticky özelliğini mobilde kapat */
    }
}