.site-header { background: var(--brand-color);}.page-icerik { min-height: 650px; padding: 50px 0rem; background-color: #f8f5f1; color: #333; line-height: 1.7;}a { text-decoration: none;}a.liste_kutu { width: 100%; position: relative; text-align: center; display: block;}a.liste_kutu .urun_liste_bg { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}a.liste_kutu .liste_kutu_ic { width: 100%; height: auto; position: relative; display: block; padding-top: 0; z-index: 1; border-radius: 5px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0px 0px 3px #0000002e;}a.liste_kutu .baslik { width: 100%; height: auto; position: relative; bottom: 0px; z-index: 99; padding: 40px 40px; transition: all 0.2s; text-align: left; background: #fff;}a.liste_kutu .baslik .sayi { width: 100%; display: flex; text-align: left; margin-bottom: 14px; font-size: 17px; font-weight: 700; align-items: center;}a.liste_kutu .baslik .sayi svg { width: 50px; height: 50px; fill: var(--brand-color); margin-right: 8px;}a.liste_kutu .baslik span { width: 100%; display: block; text-align: left; margin-bottom: 0px; font-size: 22px; line-height: 1; font-weight: 700;}a.liste_kutu .baslik small { width: 100%; display: block; text-align: left; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box !important; text-overflow: ellipsis; font-size: 16px; font-weight: 400;}a.liste_kutu .liste_kutu_ic .resim { width: 100%; height: 325px; position: relative; z-index: 9;}a.liste_kutu .liste_kutu_ic .resim img { height: 100%; object-fit: cover; width: 100%; transition: transform 0.4s ease;}a.liste_kutu:hover .liste_kutu_ic { transform: translateY(-8px); box-shadow: 0px 8px 18px #0000003a;}a.liste_kutu:hover .resim img { transform: scale(1.08);}a.liste_kutu:hover .baslik span { color: var(--brand-color);}/* --------------------------------------------------- *//* Video Galerisi Stilleri (Değişiklik Yok) *//* --------------------------------------------------- */.page-videolar { padding: 0;}.page-videolar .images-list { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: #fff; transition: all 0.3s ease; text-decoration: none; color: inherit; margin-bottom: 25px;}.page-videolar .images-list:hover { transform: translateY(-5px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);}.page-videolar .image { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius);}.page-videolar .image img { width: 100%; height: auto; display: block; transition: transform 0.4s ease;}.page-videolar .images-list:hover img { transform: scale(1.05);}.page-videolar .zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.85); border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;}.page-videolar .zoom svg { width: 30px; height: 30px; transition: transform 0.3s ease; fill: var(--primary-orange);}.page-videolar .images-list:hover .zoom { background-color: var(--primary-orange);}.page-videolar .images-list:hover .zoom svg { transform: scale(1.15); fill: #fff;}.page-videolar .images-list-text { font-size: 1rem; font-weight: 500; color: #333; text-align: center; padding: 0.75rem 0.5rem 0.5rem; line-height: 1.4;}@media (max-width: 767px) { .page-videolar .col-6 { width: 100% !important; margin-bottom: 1.5rem; } .page-videolar .images-list-text { font-size: 0.95rem; padding: 0.5rem 0.25rem; } .page-videolar .zoom { width: 50px; height: 50px; } .page-videolar .zoom svg { width: 24px; height: 24px; }}@media (min-width: 768px) and (max-width: 1199px) { .page-videolar .col-md-6 { width: 50% !important; margin-bottom: 1.5rem; }}.page-videolar .images-list,.page-videolar .zoom,.page-videolar img { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}/* =================================================================== */.page-resimler { margin-top: 0px;}/* Ana kart yapısı */.page-urunler-listele-resimler { position: relative; display: block; border-radius: 3px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; margin-bottom: 1.5rem; overflow: hidden;}.page-urunler-listele-resimler:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);}.sektor-liste { display: block;}.sektor-liste .resim-sektor { display: flex; width: 100%; height: auto; padding: 30px 0px; text-align: center; justify-content: center; height: 160px; align-items: center;}.sektor-liste img { display: block; max-width: 80%; max-height: 80%; width: auto; height: auto;}/* Lazy Load için Resim Çerçevesi (Placeholder) */.image-container { border-radius: var(--radius); position: relative; overflow: hidden; width: 100%; background-color: #f0f0f0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Ccircle cx='50' cy='50' r='32' stroke-width='8' stroke='%23cccccc' stroke-dasharray='50.26548245743669 50.26548245743669' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' keyTimes='0;1' values='0 50 50;360 50 50'%3E%3C/animateTransform%3E%3C/circle%3E%3Cg%3E%3C/g%3E%3C/g%3E%3C!-- [ldio] generated by https://loading.io/ --%3E%3C/svg%3E"); background-size: 50px; background-repeat: no-repeat; background-position: center;}/* Resmin kendisi için stiller */.image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease-in-out, filter 0.4s ease;}/* Resim yüklendiğinde görünür yap */.image-container img.loaded { opacity: 1;}/* Mevcut hover efektiniz yeni yapıya uyarlandı */.page-urunler-listele-resimler:hover .image-container img.loaded { filter: brightness(0.85);}/* Zoom ikonu stilleri */.page-urunler-listele-resimler .zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; background: rgba(0, 0, 0, 0.4); transition: opacity 0.3s ease; z-index: 2;}.page-urunler-listele-resimler:hover .zoom { opacity: 1;}.page-urunler-listele-resimler .zoom svg { width: 20px; height: 20px; fill: #fff; transform: scale(0.8); transition: transform 0.3s ease;}.page-urunler-listele-resimler:hover .zoom svg { transform: scale(1);}/* Resim başlığı stilleri */.images-list-text { text-align: center; font-size: 1rem; font-weight: 500; color: #333; padding: 0.8rem 0.5rem; background: #f9f9f9; border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;}/* Genel responsive kurallar */@media (max-width: 767px) { .col-6 { width: 100% !important; } .images-list-text { font-size: 0.9rem; }}@media (min-width: 768px) and (max-width: 1199px) { .col-md-3 { width: 50% !important; }}.page-urunler-listele-resimler,.page-urunler-listele-resimler .zoom,.page-urunler-listele-resimler svg { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}/* --------------------------------------------------- *//* Ekibimiz Sayfası Stilleri (Değişiklik Yok) *//* --------------------------------------------------- */.team-section h2 { color: #333; position: relative; display: inline-block; padding-bottom: 10px;}.team-section h2::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: #0d6efd;}.profile-card { background-color: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; overflow: hidden; border: 1px solid #eee;}.profile-card:hover { transform: translateY(-10px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);}.profile-image-wrapper { position: relative; overflow: hidden; padding: 20px 20px 0 20px;}.profile-image-wrapper img { width: 150px; height: 150px; object-fit: cover; transition: transform 0.4s ease; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.profile-card:hover .profile-image-wrapper img { transform: scale(1.1);}.profile-overlay { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 0; background: rgba(13, 110, 253, 0.8); border-radius: 50% 50% 0 0; opacity: 0; visibility: hidden; transition: all 0.4s ease; display: flex; align-items: center; justify-content: center;}.profile-card:hover .profile-overlay { opacity: 1; visibility: visible;}.overlay-content { color: #fff;}.social-links a { color: #fff; font-size: 18px; margin: 0 8px; display: inline-block; transition: transform 0.2s ease;}.social-links a:hover { color: #fff; transform: scale(1.2);}.profile-info { background-color: #fff;}.profile-info h5 { font-weight: 600; color: #212529;}.profile-info p { font-size: 0.9rem;}/* İÇERK MODAL RESİM VE VİDEO*/.page-baslik2 { width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; background-position: center !important; background-size: cover !important; position: relative; color: #fff;}.page-baslik2::before { content: ""; position: absolute; left: 0px; top: 0px; background: var(--dark-text); width: 100%; height: 100%; opacity: 40%;}.page-baslik2 h1 { text-align: center; font-size: 35px; position: relative; z-index: 9;}.page-baslik1 { width: 100%; height: auto;}.page-baslik1 h3 { font-size: 1.75rem; font-weight: 700; color: var(--primary-orange); margin: 0 0 0px 0; line-height: 1.2;}.page-baslik1 .d-sm-flex { display: flex; align-items: center; justify-content: space-between; gap: 1rem;}/* Breadcrumb stili */.breadcrumb-bg { margin-top: 122px; background: #f8f5f1; width: 100%;}.breadcrumb { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; font-size: 14px;}.breadcrumb li { display: flex; align-items: center;}.breadcrumb li a { padding: 8px 0px;}.breadcrumb li + li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 8px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,");}@media (max-width: 767px) { .page-baslik1 .d-sm-flex { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .page-baslik1 h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .page-baslik1 .breadcrumb { font-size: 0.85rem; } .breadcrumb li:last-child { display: flex; align-items: center; white-space: nowrap; /* Tek satır */ overflow: hidden; /* Taşanı gizle */ text-overflow: ellipsis; /* Üç nokta (...) */ }}/**/.sol-menu-style1 { width: 100%; height: auto;}.sol-menu-style1 .breadcrumb { margin-bottom: 0px; border-radius: 0px; background: transparent; padding: 0px;}.sol-menu-style1 .breadcrumb li a { color: #3e3e3e;}.sol-menu-style1 .sol-menu .menu-akordiyon { width: 100%; position: relative;}.sol-menu-style1 .sol-menu .menu-akordiyon .sol-menu-icon { display: inline-block; margin-right: 8px; font-size: 0.75rem; display: none;}.sol-menu-style1 .sol-menu .menu-akordiyon .sol-menu-alt-var { display: inline-block; float: right; font-size: 12px;}.sol-menu-style1 .sol-menu .menu-akordiyon { width: 100%; text-align: left;}.sol-menu-style1 .sol-menu .menu-akordiyon ul { margin: 0; padding: 0; width: 100%; position: relative;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li:first-child { border: none; margin-top: 0px;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li { list-style-type: none; width: 100%; position: relative; background: #f2f2f2; margin-top: 5px;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li a { width: 100%; font-size: 15px; color: #23282d; line-height: auto; padding: 10px 13px; font-weight: 600; transition: all 0.25s ease !important; display: block; background: #fff; border-radius: 3px; border: solid 1px #eaeaea;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li.active a { color: #fff; background: #ff4242;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li a:hover { color: #fff; background: #ff4242;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li ul { display: none; background: #fff;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li ul li { margin-top: 0px;}.sol-menu-style1 .sol-menu .menu-akordiyon ul li ul li a { padding: 8px 24px 8px; font-weight: 400; color: #23282d;}.sol-menu-style1 .navbar { padding: 0px;}.sol-menu-style1 .navbar .navbar-toggler { width: 100%; position: relative; margin-top: 0px; top: 0px; padding: 16px 24px; font-size: 18px; text-align: left; background: #333; color: #fff; border: none; outline: none; display: flex; align-items: center;}.sol-menu-style1 .navbar .navbar-toggler:focus { border: none;}.sol-menu-style1 .navbar .navbar-toggler:hover { border: none;}.sol-menu-style1 .navbar .navbar-toggler svg { margin-right: 15px; fill: #fff; width: 25px; height: 25px;}@media (min-width: 1201px) { .sol-menu-mobil-button { display: none !important; }}@media (max-width: 1200px) { .sol-menu-style1 .sol-menu .menu-akordiyon { padding: 0px 15px; } /* width */ .sol-menu-hasem .menu-akordiyon::-webkit-scrollbar { width: 5px; } /* Track */ .sol-menu-hasem .menu-akordiyon::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ .sol-menu-hasem .menu-akordiyon::-webkit-scrollbar-thumb { background: #6d6d6d; border-radius: 10px; } .sol-menu-hasem { width: 80%; height: 100%; position: fixed; top: 0; left: -80%; z-index: 999999999999; background: #fff; transition: 0.2s ease-in-out; } .sol-menu-hasem-fixed { left: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } .sol-menu-hasem .akordiyon-baslik { font-size: 16px; text-align: left; font-weight: 700; padding: 15px; border-bottom: 1px solid #d6d6d6; box-shadow: 0 0 10px rgba(0, 0, 0, 0); text-transform: capitalize; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .sol-menu-hasem .akordiyon-baslik .kapat svg { fill: #000; width: 25px; height: 25px; } #menu-overlay { display: none; /* Başlangıçta gizli */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); /* Yarı saydam siyah renk */ z-index: 999; /* Menünün arkasında, sayfa içeriğinin önünde */ cursor: pointer; /* Tıklanabilir olduğunu belirtmek için */ }}.page-dosya { padding: 2rem 0rem;}/* Dosya linkleri */.page-dosya .dosya-liste { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1rem; background: #f9f9f9; border: 1px solid #e0e0e0; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: inherit; border-radius: 0.5rem; fill: var(--primary-orange);}.page-dosya .dosya-liste:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);}/* Dosya ikonları */.page-dosya .dosya-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-bottom: 0.8rem;}/* SVG ikon boyutu ve renk ayarı */.page-dosya .dosya-icon svg { width: 60px; height: 60px; display: block;}/* İndir butonu */.page-dosya .indir { position: absolute; top: 1px; right: 5px; font-size: 0.9rem; background-color: #ffffff; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 28px; height: 28px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, transform 0.3s ease; padding: 0 6px;}.page-dosya .dosya-liste:hover .indir { color: #fff; transform: scale(1.1);}/* Dosya başlığı */.page-dosya .dosya-aciklama .baslik { text-align: center; font-size: 0.95rem; font-weight: 500; color: #333; word-break: break-word;}/* Responsive kolonlar */@media (max-width: 767px) { .page-dosya .col-6 { width: 100% !important; margin-bottom: 1rem; }}@media (min-width: 768px) and (max-width: 1199px) { .page-dosya .col-md-3 { width: 50% !important; margin-bottom: 1rem; }}/* Animasyon ve geçişler */.page-dosya .dosya-liste,.page-dosya .dosya-icon,.page-dosya .indir { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);}/* ====================================================== *//* ÖZEL FORM STİLLERİ (formId_7) *//* ====================================================== *//* --- Genel Form Konteyneri --- */.form1 { width: 100%; height: auto;}/* --- Form Alanı Grubu (Her bir input/label çifti) --- */.form1 .form-group { margin-bottom: 1.2rem; /* Alanlar arasına dikey boşluk */}/* --- Etiketler (Adınız Soyadınız vb.) --- */.form1 .basliklabel { display: block; /* Etiketin tam satır kaplamasını sağlar */ font-weight: 600; font-size: 14px; margin-bottom: 8px; /* Etiket ile input arasına boşluk */}/* --- Input ve Select Alanları --- */.form1 .form-control,.form1 select { width: 100%; background-color: #fff; border-radius: 6px; box-sizing: border-box; margin: 0; line-height: 150%; height: 44px; font-weight: 400; font-size: 16px; padding: 0.75rem 1rem; outline: none; border: 1px solid #bfbfbf; color: #78737d; transition: all 0.2s ease-in-out;}/* Alanlara odaklanıldığında (tıklandığında) */.form1 .form-control:focus,.form1 .form-select:focus { outline: none; border-color: var(--form-brand-color); box-shadow: var(--form-focus-shadow); background-color: #fff;}.form1 textarea.form-control { height: auto;}/* --- Güvenlik Kodu Alanı --- */.form1 .guvenlik_input { align-items: center; /* Dikeyde ortala */ gap: 15px; /* Aralarına boşluk koy */ position: relative;}.form1 .guvenlik_input .basliklabel {}.form1 .guvenlik_input input { flex-grow: 1; /* Input'un kalan tüm boşluğu kaplamasını sağla */}.form1 .guvenlik_resim { flex-shrink: 0; overflow: hidden; position: absolute; right: 0px; bottom: 7px;}.form1 .guvenlik_resim img { display: block; height: 24px;}/* --- Gönder Butonu --- */.form1 .btn { width: 100%; padding: 14px 20px; font-size: 16px; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; /* Buton için renkler HTML'den geliyor, onları ezelim */ background-color: #000 !important; color: #ffffff !important; margin-top: 30px;}.form1 .btn:hover { background-color: #e63e3e !important; /* Rengin biraz koyusu */}.form1 .btn:active { transform: scale(0.98); /* Tıklama anında küçülme efekti */}.form1 .form_aciklama,.form1 .help-block[id^="uyariid_"] { display: none; font-size: 12px; margin-top: 5px;}/* İçinde metin olursa göster (JS ile doldurulursa) */.form1 .help-block[id^="uyariid_"]:not(:empty) { display: block; color: #e74c3c; /* Hata mesajı rengi */}/* --- Form Sonuç Bildirim Alanı --- */.form1 .formAlert_7 { padding: 15px; border-radius: 8px; font-weight: 500; text-align: center;}/**//* -------------------------------------------------------------------------- DEĞİŞKENLER (VARIABLES) -------------------------------------------------------------------------- */:root { --primary-blue: #ff4242; --dark-blue-text: #ff4242; --light-gray-bg: #f8f5f1; --border-gray: #f8f5f1; --text-gray: #6b7280; --white: #ffffff; --slider-bg: #d1d5db; --success-green: #10b981; /* SVG Onay ikonu için renk */}.tur-liste-sayfasi { display: grid; grid-template-columns: 327px 1fr; gap: 32px; align-items: flex-start; /* Elemanları dikeyde yukarıya hizalar */ width: 100%;}/* -------------------------------------------------------------------------- ANA FİLTRE KONTEYNERİ -------------------------------------------------------------------------- */.filter-sidebar { background-color: var(--white); border-radius: 3px; padding: 15px; width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}.filter-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border-gray);}.filter-group { padding: 24px 0; border-bottom: 1px solid var(--border-gray);}.filter-group:last-of-type { border-bottom: none;}.filter-sidebar h2 { font-size: 20px; font-weight: 600; margin: 0px;}.filter-sidebar h3 { font-size: 16px; font-weight: 600; margin-top: 0px; margin-bottom: 12px;}/* -------------------------------------------------------------------------- BÖLGEYE GÖRE FİLTRELEME (SVG İkonlu) -------------------------------------------------------------------------- */.hidden-checkbox { display: none;}.filter-option-label { display: block; margin-bottom: 8px; cursor: pointer;}.filter-option-label:last-child { margin-bottom: 0;}.filter-option { display: flex; color: var(--dark-text); justify-content: space-between; align-items: center; width: 100%; background-color: var(--light-gray-bg); border: 1.5px solid transparent; border-radius: 3px; padding: 5px 12px; font-size: 16px; transition: all 0.2s ease-in-out; font-weight: 500;}.option-content { display: flex; align-items: center; gap: 12px;}/* Harita SVG ikonlarının stili */.map-icon { width: 22px; height: 22px; fill: var(--primary-blue); stroke-width: 0;}/* Sağdaki ok/onay ikonu container'ı */.selection-indicator { width: 18px; height: 18px; position: relative;}/* Hem chevron hem de check ikonu için ortak SVG stilleri */.selection-indicator svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;}.icon-chevron { stroke: var(--text-gray);}.icon-check { stroke: var(--success-green); opacity: 0; /* Başlangıçta gizli */ transform: scale(0.8);}/* Checkbox seçili olduğunda stilleri değiştir */.hidden-checkbox:checked + .filter-option { background-color: #fffefd; border-color: var(--primary-blue);}/* Checkbox seçili olduğunda ok'u gizle, onayı göster */.hidden-checkbox:checked + .filter-option .icon-chevron { opacity: 0;}.hidden-checkbox:checked + .filter-option .icon-check { opacity: 1; transform: scale(1);}/* -------------------------------------------------------------------------- TARİH FİLTRELEME VE TAKVİM -------------------------------------------------------------------------- */.date-tabs { display: flex; align-items: center; margin-bottom: 16px;}.date-tab { flex: 1; padding: 10px; border: 1px solid var(--border-gray); background: var(--white); cursor: pointer; font-size: 14px;}.date-tab.active { border: 1.5px solid var(--dark-blue-text); font-weight: 600;}.date-tab:first-child { border-radius: 8px 0 0 8px;}.date-tab:last-child { border-radius: 0 8px 8px 0;}.arrow-separator { color: var(--text-gray); padding: 0 8px;}.year-selector { display: flex; background-color: var(--light-gray-bg); border-radius: 20px; padding: 4px; margin-bottom: 16px; position: relative;}.year-pill { flex: 1; text-align: center; padding: 6px 0; border-radius: 16px; cursor: pointer; z-index: 2; transition: color 0.3s ease; font-weight: 500;}.year-slider { position: absolute; top: 4px; left: 4px; width: calc(33.33% - 8px / 3); height: calc(100% - 8px); background-color: var(--dark-blue-text); border-radius: 16px; transition: transform 0.3s ease; z-index: 1;}.calendar-container { margin-top: 16px;}.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;}.month-year-selector { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 5px;}#month-select { border: none; background: transparent; font-weight: 600; font-size: 16px; color: var(--dark-blue-text); -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}#month-select:focus { outline: none;}.nav-arrow { background: none; border: none; cursor: pointer; padding: 8px; color: var(--text-gray);}.nav-arrow svg { width: 22px; height: 22px;}.nav-arrow:hover { color: var(--dark-blue-text);}.calendar-weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;}.calendar-weekdays span { font-weight: 500; color: var(--text-gray); font-size: 12px; padding-bottom: 8px;}.calendar-grid .day { cursor: pointer; border-radius: 50%; transition: background-color 0.2s; position: relative; width: 33px; height: 33px; margin: 0px auto; font-weight: 600; align-items: center; justify-content: center; display: flex; font-size: 15px;}.calendar-grid .day:not(.empty):hover { background-color: var(--light-gray-bg);}.calendar-grid .day.disabled { color: var(--border-gray); cursor: not-allowed;}.calendar-grid .day.selected { background-color: var(--dark-blue-text); color: var(--white); font-weight: 600;}.calendar-footer { display: flex; justify-content: space-between; margin-top: 16px;}.btn-reset-date,.btn-apply-date { background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 500;}.btn-reset-date { color: var(--dark-blue-text);}.btn-apply-date { background-color: var(--light-gray-bg); padding: 8px 16px; border-radius: 20px; color: var(--text-gray);}.btn-reset-main { background-color: var(--light-gray-bg); border: none; border-radius: 20px; padding: 8px 16px; font-weight: 500; cursor: pointer; font-size: 14px; color: var(--dark-blue-text);}.checkbox-option { display: flex; align-items: center; background-color: var(--light-gray-bg); border: 1.5px solid transparent; border-radius: 3px; padding: 6px 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s ease;}.checkbox-option:last-child { margin-bottom: 0;}.checkbox-option:hover { background-color: #fff; /* Hover için biraz daha belirgin bir renk */ border-color: var(--primary-blue);}/* Checkbox seçiliyken container'ın da stilini değiştirelim */.checkbox-option:has(input[type="checkbox"]:checked) { background-color: #fff; border-color: var(--primary-blue);}/* Varsayılan checkbox'ı gizle */.checkbox-option input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 0; display: none; /* Tamamen gizliyoruz, kontrolü label ile yapacağız */}/* Özel checkbox kutusu */.checkbox-option label::before { content: ""; display: inline-block; width: 17px; height: 17px; border: 1.5px solid var(--text-gray); border-radius: 3px; background-color: var(--white); margin-right: 12px; vertical-align: middle; /* Metinle dikeyde hizala */ transition: all 0.2s ease;}/* Onay (check) işareti */.checkbox-option label::after { content: ""; display: inline-block; position: absolute; width: 6px; height: 12px; border: solid var(--white); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); /* Başlangıçta gizli ve küçük */ left: 45px; /* Konumu manuel ayarlıyoruz, gerekirse değiştirilebilir */ top: 50%; margin-top: -9px; /* Dikeyde ortalamak için */ transition: transform 0.2s ease;}/* Checkbox seçildiğinde özel kutunun ve onay işaretinin stilleri */.checkbox-option input[type="checkbox"]:checked + label::before { background-color: var(--primary-blue); border-color: var(--primary-blue);}.checkbox-option input[type="checkbox"]:checked + label::after { transform: rotate(45deg) scale(1); /* Görünür hale getir */}.checkbox-option label { font-size: 16px; color: #000; display: flex; /* İçeriği hizalamak için */ align-items: center; width: 100%; cursor: pointer;}.checkbox-option input[type="checkbox"]:checked + label { color: var(--primary-blue);}/* -------------------------------------------------------------------------- BÜTÇE KAYDIRICI -------------------------------------------------------------------------- */.budget-slider-container { position: relative; height: 24px; display: flex; align-items: center;}.slider-track,.slider-fill { position: absolute; width: 100%; height: 6px; border-radius: 3px; left: 0;}.slider-track { background-color: var(--slider-bg);}.slider-fill { background-color: var(--dark-blue-text); z-index: 1;}.budget-slider-container .slider { position: absolute; width: 100%; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; z-index: 2;}.budget-slider-container .slider::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 24px; height: 24px; background: var(--white); border: 2px solid var(--dark-blue-text); border-radius: 50%; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}.budget-inputs { display: flex; justify-content: space-between; align-items: center; margin-top: 16px;}.budget-input { width: 45%;}.budget-input label { font-size: 12px; color: var(--text-gray);}.budget-input input { width: 100%; border: 1px solid var(--border-gray); border-radius: 8px; padding: 8px; font-size: 16px; font-weight: 500; background-color: transparent;}/* -------------------------------------------------------------------------- ALT KISIM -------------------------------------------------------------------------- */.filter-bottom { padding-top: 16px; text-align: center;}.filter-bottom a { color: var(--dark-blue-text); text-decoration: underline; font-size: 14px; display: block; margin-bottom: 16px;}.btn-back-to-filters { background-color: var(--primary-blue); color: var(--white); border: none; border-radius: 25px; padding: 14px; width: 100%; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px;}.tur-listesi-alani { width: 100%; margin-left: 0px; /* Filtre menüsünden boşluk bırak */}/* -------------------------------------------------------------------------- Liste Başlığı (Sonuç Sayısı ve Sıralama) -------------------------------------------------------------------------- */.liste-basligi { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;}.sonuc-sayisi { font-size: 16px; font-weight: 600; color: var(--dark-blue-text);}.siralama-select { padding: 10px 16px; border: 1px solid var(--border-gray); border-radius: 8px; background-color: var(--white); font-size: 14px; color: var(--text-gray); cursor: pointer;}.siralama-select:focus { outline: 2px solid var(--primary-blue); outline-offset: 2px;}.siralama-select { width: 100%; margin-left: auto; margin-bottom: -27px;}.mb-0 { margin-bottom: 0px;}/* -------------------------------------------------------------------------- Ana Kart Yapısı -------------------------------------------------------------------------- */.tur-karti-v2 { display: grid; grid-template-columns: 240px 1fr 220px; /* Resim | İçerik | Fiyat */ gap: 24px; background-color: #ffffff; border-radius: 3px; /* Daha yumuşak köşeler */ border: 1px solid #eaecef; box-shadow: 0 4px 20px rgba(14, 43, 92, 0.06); /* Daha yumuşak gölge */ margin-bottom: 20px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;}.tur-karti-v2:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(14, 43, 92, 0.1);}/* -------------------------------------------------------------------------- Bölüm 1: Tur Resmi -------------------------------------------------------------------------- */.tur-karti-v2 .tur-resim { position: relative; overflow: hidden; /* Resim zoom efekti için */}.tur-karti-v2 .tur-resim img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}.tur-karti-v2:hover .tur-resim img { transform: scale(1.05); /* Hover'da resme hafif zoom */}.tur-karti-v2 .kampanya-etiketi { position: absolute; top: 16px; left: 16px; background-image: linear-gradient(45deg, #fc5050, #ff4242); /* Gradient etiket */ color: white; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px;}.tur-karti-v2 .kampanya-etiketi svg { width: 15px; fill: #fff;}.tur-karti-v2 .fuar-logo { padding: 10px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; height: 78px; display: flex; align-items: center; justify-content: center;}.tur-karti-v2 .fuar-logo img { max-width: 80%; height: 100%; object-fit: contain;}/* -------------------------------------------------------------------------- Bölüm 2: Tur İçeriği -------------------------------------------------------------------------- */.tur-karti-v2 .tur-icerik { padding: 24px 0; display: flex; flex-direction: column; gap: 12px; /* Elemanlar arası boşluk */}.tur-karti-v2 .tur-kategori { font-size: 13px; font-weight: 600; color: var(--primary-blue, #0056b3); text-transform: uppercase; letter-spacing: 0.5px;}.tur-karti-v2 .tur-icerik h3 { font-size: 22px; font-weight: 700; color: var(--dark-blue-text, #0e2b5c); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; /* Kaç satır gösterileceğini belirler */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}.tur-karti-v2 .tur-meta-bilgi { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: #555;}.tur-karti-v2 .tur-meta-bilgi span { display: flex; align-items: center; gap: 8px; font-weight: 500;}.tur-karti-v2 .tur-meta-bilgi svg { width: 16px; height: 16px; fill: #888;}.siralama-select { width: 100%;}.tur-karti-v2 .tur-aciklama { font-size: 14px; color: var(--light-text); line-height: 1.5; margin: 4px 0 20px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}.tur-karti-v2 .tur-sure-konum { margin-top: auto; background-color: #f8f5f1; border: 1px solid #eaecef; border-radius: 3px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #333; display: flex; align-items: center; justify-content: space-between; height: 60px;}.tur-karti-v2 .tur-sure-konum .rota { display: flex; align-items: center; gap: 8px;}.tur-karti-v2 .tur-sure-konum .rota svg { width: 18px; fill: var(--primary-blue, #0056b3);}/* -------------------------------------------------------------------------- Bölüm 3: Fiyat ve Eylem -------------------------------------------------------------------------- */.tur-karti-v2 .tur-fiyat-aksiyon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 24px; background-color: #f8f5f1; border-left: 1px solid #eaecef; text-align: center;}.tur-karti-v2 .fiyat-kutusu { line-height: 1.1;}.tur-karti-v2 .eski-fiyat { font-size: 16px; color: #999; text-decoration: line-through; opacity: 0.8;}.tur-karti-v2 .fiyat { font-size: 32px; font-weight: 700; color: var(--dark-blue-text, #0e2b5c); margin: 2px 0;}.tur-karti-v2 .fiyat-aciklama { font-size: 13px; color: #777; font-weight: 500;}.tur-karti-v2 .tur-buton { display: inline-block; width: 100%; background-color: var(--primary-blue); color: white; padding: 14px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 8px rgba(35, 35, 35, 0.2);}.tur-karti-v2 .tur-buton:hover { background-color: #000000; box-shadow: 0 4px 12px rgba(123, 123, 123, 0.3); transform: translateY(-2px);}/* --- YENİ TARİH/ROTA ALANI STİLLERİNİ EKLEYİN --- */.tur-karti-v2 .tur-zaman-cizgisi { margin-top: auto; display: flex; align-items: center; justify-content: space-between; background-color: #f8f5f1; border: 1px solid #eaecef; border-radius: 3px; padding: 11px 11px;}.tur-karti-v2 .zaman-noktasi { text-align: center; flex: 1; /* Esnek genişlik */ font-weight: 500;}.tur-karti-v2 .zaman-noktasi .gun { font-size: 21px; font-weight: 700; color: var(--primary-blue); line-height: 1; margin-right: 5px;}.tur-karti-v2 .zaman-noktasi .ay-yil { font-size: 13px; color: #000; margin-top: 0px;}.tur-karti-v2 .zaman-noktasi .konum { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; text-transform: uppercase; margin-top: 6px;}.tur-karti-v2 .zaman-noktasi .konum svg { width: 14px; height: 14px; fill: #888;}.tur-karti-v2 .zaman-ok { flex-shrink: 0; /* Okun sıkışmasını engelle */ padding: 0 10px;}.tur-karti-v2 .zaman-ok svg { width: 24px; height: 24px; fill: #b0b8c5; /* Daha yumuşak bir ok rengi */}/* -------------------------------------------------------------------------- GENEL TABLET VE MOBİL DÜZENİ (1024px ve altı) -------------------------------------------------------------------------- */@media (max-width: 1024px) { .page-baslik2 { height: 130px; } .page-baslik2 h1 { font-size: 30px; } .tur-liste-sayfasi { /* Grid yapısını tek sütuna düşür */ grid-template-columns: 1fr; gap: 20px; } /* --- MOBİL FİLTRE MENÜSÜ --- */ .filter-sidebar { position: fixed; top: 0; left: -320px; /* Ekranın solunda gizli */ width: 300px; height: 100%; z-index: 1001; transition: left 0.3s ease-in-out; box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); overflow-y: auto; /* Uzun filtreler için kaydırma */ padding-bottom: 70px; /* Alttaki butona yer aç */ } .filter-sidebar.acik { left: 0; /* "acik" class'ı eklendiğinde görünür yap */ } /* Filtre menüsü açıkken arka planı karartmak için */ #filtre-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; cursor: pointer; } #filtre-overlay.goster { display: block; } /* Mobil için eklenen filtreleme butonu */ .mobil-filtre-kontrol { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .mobil-filtre-kontrol .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background-color: var(--primary-blue); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } .mobil-filtre-kontrol .btn-primary svg { fill: white; width: 15px; height: 16px; } /* Masaüstündeki liste başlığını mobilde düzenle */ .liste-basligi { margin-bottom: 20px; } .liste-basligi .sonuc-sayisi-desktop { display: none; /* Masaüstü sonuç sayısını gizle */ } /* --- TUR KARTI MOBİL GÖRÜNÜMÜ --- */ .tur-karti-v2 { /* Kartı dikey (tek sütunlu) hale getir */ grid-template-columns: 1fr; gap: 0; } .tur-karti-v2 .tur-resim { height: 200px; /* Resim için sabit bir yükseklik */ } .tur-karti-v2 .tur-icerik { padding: 20px; /* İçeriğe her yönden boşluk ver */ } .tur-karti-v2 .tur-fiyat-aksiyon { border-left: none; /* Sol kenarlığı kaldır */ border-top: 1px solid #eaecef; /* Üste kenarlık ekle */ flex-direction: row; /* Fiyat ve butonu yan yana getir */ justify-content: space-between; align-items: center; background-color: #fff; padding: 15px 20px; } .tur-karti-v2 .fuar-logo { margin-bottom: 0px; margin-right: 15px; } .tur-karti-v2 .fiyat-aciklama { padding-left: 15px; } .tur-karti-v2 .fiyat-kutusu { text-align: left; display: flex; align-items: center; } .tur-karti-v2 .tur-buton { width: auto; padding: 12px 20px; } .tur-karti-v2 .zaman-noktasi .konum { margin-top: 1px; } .btn-close-filter { display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background-color: transparent; border: none; border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease; z-index: 10; } .btn-close-filter svg { width: 22px; height: 22px; stroke: #888; transition: stroke 0.2s ease; } .btn-close-filter:hover { background-color: #f0f0f0; } .btn-close-filter:hover svg { stroke: #333; } .filter-header { padding-right: 0; margin-top: 40px; }}/* -------------------------------------------------------------------------- DAHA KÜÇÜK MOBİL EKRANLAR İÇİN İNCE AYARLAR (576px ve altı) -------------------------------------------------------------------------- */@media (max-width: 576px) { .page-icerik { padding: 30px 0; } .tur-karti-v2 .tur-icerik h3 { font-size: 20px; } /* Tarih/Zaman çizgisini daha kompakt yap */ .tur-karti-v2 .tur-zaman-cizgisi { padding: 12px; align-items: stretch; gap: 10px; } .tur-karti-v2 .zaman-ok { transform: rotate(90deg); /* Oku dikey yap */ padding: 0; } .tur-karti-v2 .zaman-ok svg { width: 20px; height: 20px; } .tur-karti-v2 .tur-fiyat-aksiyon { flex-direction: column; /* Fiyat ve butonu alt alta getir */ align-items: stretch; /* Elemanları tam genişliğe yay */ gap: 12px; } .tur-karti-v2 .fiyat-kutusu { text-align: center; justify-content: center; } .tur-karti-v2 .tur-buton { width: 100%; /* Butonu tam genişlik yap */ } .tur-karti-v2 .tur-aciklama { display: none; }}@media (min-width: 768px) and (max-width: 1024px) { /* Tur listesi alanını 2 sütunlu grid yapısına çevir */ .tur-listesi-alani { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; /* Kartlar arasına boşluk ekle */ } /* Filtre butonu ve sıralama menüsünün grid'in tamamını kaplamasını sağla */ .tur-listesi-alani .mobil-filtre-kontrol, .tur-listesi-alani .liste-basligi { grid-column: 1 / -1; /* 1. sütundan başla, son sütunda bitir */ }}/* =================== YENİ BÖLÜM SONU ====================================== *//* -------------------------------------------------------------------------- DAHA KÜÇÜK MOBİL EKRANLAR İÇİN İNCE AYARLAR (576px ve altı) -------------------------------------------------------------------------- */@media (max-width: 576px) { .page-icerik { padding: 30px 0; } .tur-karti-v2 .tur-icerik h3 { font-size: 20px; } .tur-karti-v2 .tur-zaman-cizgisi { padding: 12px; align-items: stretch; gap: 10px; } .tur-karti-v2 .zaman-ok { transform: rotate(90deg); padding: 0; } .tur-karti-v2 .zaman-ok svg { width: 20px; height: 20px; } .tur-karti-v2 .tur-fiyat-aksiyon { flex-direction: column; align-items: stretch; gap: 12px; } .tur-karti-v2 .fiyat-kutusu { text-align: center; justify-content: center; } .tur-karti-v2 .tur-buton { width: 100%; } .tur-karti-v2 .tur-aciklama { display: none; }}@media (min-width: 768px) { .container { max-width: 95%; }}@media (min-width: 1025px) { .mobil-filtre-kontrol { display: none; }}@media (min-width: 1366px) { .container { max-width: 95%; }}/* --- Genel Stiller ve Fontlar --- */.tour-header { width: 100%; border-bottom: 1px solid #e0e0e0; padding-top: 1rem; padding-bottom: 1rem;}.tour-header .tour-header-ic { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}.tour-info { flex: 2; min-width: 300px;}/* YENİ EKLENEN ÖZELLİKLER ALANI */.tour-features { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; color: #555; font-size: 14px;}.feature-item { display: flex; align-items: center; gap: 8px; border-left: 1px solid #eaeaea; padding-left: 10px;}.hotel-rating-badge { background-color: #f39c12; color: white; font-weight: bold; width: 24px; height: 24px; border-radius: 4px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px;}.rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555;}.rating .stars { color: #f39c12; font-size: 18px;}.rating .score { font-weight: bold; color: #000;}.tour-info h1 { font-size: 30px; color: #2c2c2c; margin: 10px 0 5px 0;}/* --- Fiyatlandırma ve Buton Alanı --- */.pricing-box { flex: 1; text-align: right; min-width: 320px; /* Genişliği artırıldı */ display: flex; justify-content: flex-end; /* İçerik sona yaslandı */ align-items: center; /* Dikeyde ortalama */ gap: 20px;}/* YENİ ODA FİYATLARI STİLLERİ */.room-prices { text-align: right; padding-right: 0px; display: flex; gap: 15px;}.room-price-item { font-size: 16px; color: #333; margin-bottom: 8px; border-right: 1px solid #eaeaeaff; padding-right: 20px;}.room-price-item:last-child { margin-bottom: 0;}.price-amount { font-weight: bold; font-size: 27px; display: block;}.price-label { font-weight: 400; font-size: 13px; display: block; margin-top: 4px;}.action-buttons button,.action-buttons a { display: block; width: 100%; min-width: 160px; /* Minimum genişlik */ margin: 5px 0 5px auto; padding: 12px; border-radius: 25px; text-align: center; font-weight: 500; font-size: 14px; text-decoration: none; cursor: pointer; border: 2px solid #ff4242; transition: all 0.3s ease;}.btn-primary { background-color: #ff4242; color: white;}.btn-primary:hover { background-color: #e03535ff;}.btn-secondary { background-color: white; color: #ff4242;}.btn-secondary:hover { background-color: #f8f8f8;}/* --- Navigasyon Sekmeleri --- */.tour-nav { position: sticky; top: 0; z-index: 888; transition: box-shadow 0.3s ease; background-color: #fff;}.tour-nav.is-sticky { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}.tour-nav.is-sticky .action-buttons button,.tour-nav.is-sticky .action-buttons a { min-width: auto; margin: 5px 0 5px auto; padding: 8px 12px; border-radius: 25px; text-align: center; font-weight: 400; font-size: 13px; text-decoration: none; cursor: pointer; border: 2px solid #ff4242; transition: all 0.3s ease; width: auto;}.tour-nav.is-sticky .container { position: relative; display: flex; justify-content: space-between;}.tour-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 40px; display: flex; justify-content: center;}.tour-nav li a { display: block; padding: 15px 5px; text-decoration: none; color: #555; font-weight: bold; border-bottom: 3px solid transparent; transition: all 0.3s ease;}.tour-nav li a.active,.tour-nav li a:hover { color: #ff4242; border-bottom-color: #ff4242;}.sticky-action-bar { display: none; gap: 10px; opacity: 0; align-items: center; visibility: hidden; transform: translateX(20px); /* Hafif sağdan gelme efekti için */ transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;}/* Navigasyon 'is-sticky' class'ını aldığında butonları görünür yap */.tour-nav.is-sticky .sticky-action-bar { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;}.tour-nav.is-sticky .sticky-action-bar { display: flex;}/* Sabitlenmiş nav bar içindeki butonların boyutunu ayarlar */.btn-sticky { padding: 8px 20px !important; font-size: 14px !important; min-width: auto !important; /* Minimum genişliği kaldır */ border-radius: 20px !important;}.tour-nav.is-sticky ul { width: auto;}/* --- Sayfa İçerik Alanları --- */.orta-bolum { background-color: #f8f5f1; padding: 25px 0px;}.orta-bolum section { padding: 30px 30px; scroll-margin-top: 20px; background: #fff; margin-bottom: 25px; border-radius: 3px;}.orta-bolum section:last-child { border-bottom: none;}.orta-bolum section .tarih { display: flex; flex-wrap: nowrap;}.orta-bolum section .tarih li { list-style: none; padding: 11px 14px; background-color: var(--footer-background); border: 1px solid var(--border-color); margin-right: 10px; border-radius: 3px; font-weight: 500; font-size: 14px;}.orta-bolum section .tarih li svg { width: 14px; height: 14px;}.orta-bolum section .tarih li span { padding-left: 5px;}.orta-bolum h2 { font-size: 25px; margin-top: 0px; margin-bottom: 20px; font-weight: 700; color: #ff4242;}.orta-bolum p { line-height: 1.4; font-size: 15px; font-weight: 500; opacity: 70%;}/* --- Modal Stilleri --- */.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6);}.modal-content { background-color: #fefefe; margin: 10% auto; padding: 30px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; position: relative; animation: fadeIn 0.5s;}@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); }}.close-btn { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer;}.close-btn:hover,.close-btn:focus { color: black;}.modal-content h3 { margin-top: 0; color: #2c2c2c;}.modal-content form label { display: block; margin-top: 15px; font-weight: bold;}.modal-content form input,.modal-content form textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}.modal-content form button { background-color: #ff4242; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; font-weight: bold;}.modal-content form button:hover { background-color: #004494;}/* --- Tur Özellikleri Barı Stilleri --- */.tour-highlights-bar { background-color: #fff; margin-top: auto; margin-bottom: 0px;}.highlights-container { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; /* Mobil cihazlar için önemlidir */ gap: 20px; /* Kutular arasındaki boşluk */}.highlight-item { background-color: var(--footer-background); border: 1px solid var(--border-color); border-radius: 3px; padding: 20px; width: 130px; height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: default; /* Üzerine gelince tıklanabilir olmadığını belirtir */}.highlight-item:hover { transform: translateY(-5px); /* Hafif yukarı kalkma efekti */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* Belirgin gölge */}.highlight-item svg { width: 32px; height: 32px; margin-bottom: 12px; stroke: #2c2c2c; /* İkon rengi */ stroke-width: 1.5; /* İkon çizgi kalınlığı */ fill: none;}.highlight-item .text { color: #2c2c2c; /* Metin rengi */ font-size: 15px; font-weight: 600; /* Hafif kalın yazı */}.bolum-right { width: 100%; height: auto; display: flex; flex-flow: column;}.bolum-right .text-ust { width: 100%; height: auto; display: flex; align-items: center; margin-bottom: 20px;}.bolum-right .text-ust h2 { height: auto; display: inline-block; margin-bottom: 0px; flex: auto; padding-left: 15px;}.program-tablosu table { width: 100%; border-collapse: separate; /* Hücreler arasında boşluk oluşturmak için */ border-spacing: 0 1rem; /* Sadece satırlar arasına dikey boşluk */}.program-tablosu td { padding: 1.5rem; vertical-align: top; /* İçerikleri yukarı hizala */ background-color: #ffffff; /* Kart efekti için beyaz arka plan */}/* --- SATIR TASARIMI (KART GÖRÜNÜMÜ) --- */.program-tablosu tbody tr { background-color: #fff; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); transition: transform 0.2s ease, box-shadow 0.2s ease;}/* Fare üzerine gelince hafifçe yükselme efekti */.program-tablosu tbody tr:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);}/* --- ÖZEL HÜCRE STİLLERİ --- *//* 1. Satır: Tur Başlığı */.program-tablosu tr:first-child td { background-color: #ff4242; /* Mavi arka plan */ color: #ffffff; font-size: 1.2rem; font-weight: 500; border-radius: 3px; text-align: center;}.program-tablosu tr:first-child strong { color: #ffffff; /* Başlıktaki strong etiketinin rengi beyaz kalsın */}/* Tarih Sütunu */.program-tablosu tr:not(:first-child) td:first-child { font-weight: 700; color: #ff4242; background-color: #f8f9fa; /* Tarih için hafif farklı bir arka plan */ width: 120px; /* Sabit genişlik */ text-align: center; vertical-align: middle; /* Tarihi dikeyde ortala */ border-right: 2px solid #e9ecef; border-top-left-radius: 3px; border-bottom-left-radius: 3px;}.program-tablosu tr:not(:first-child) td:first-child p { font-weight: 700; color: #ff4242;}/* Açıklama Sütunu */.program-tablosu tr:not(:first-child) td:nth-child(2) { border-top-right-radius: 3px; border-bottom-right-radius: 3px;}/* --- İÇERİK STİLLERİ --- */.program-tablosu td p { margin: 0.5rem 0; /* Paragraflar arasına boşluk */}.program-tablosu td p:first-child { margin-top: 0;}.program-tablosu td p:last-child { margin-bottom: 0;}/* Vurgulanan metinler (Otel, Fuar vb.) */.program-tablosu strong { color: #ff4242; font-weight: 500;}.program-tablosu { max-width: 100%; /* Kapsayıcısının genişliğine uysun */ margin: 0; /* <-- ÜST VE ALT BOŞLUĞU SIFIRLADIK */}/* --- Liste ve Zaman Çizgisi --- */.program-tablosu ul { list-style: none; padding-left: 40px; position: relative; /* ARKA PLAN ÇİZGİSİ: Bu, her zaman görünen kesikli çizgidir. */ border-left: 3px dashed #e0e0e0;}.program-tablosu ul::before { content: ""; position: absolute; top: 0; left: -2px; /* Kesikli çizginin tam üzerine gelmesi için */ width: 2px; /* Kesikli çizgiyle aynı kalınlıkta */ height: 100%; background-color: #ff4242; /* Doldurma rengi */ transform-origin: top; /* Animasyon yukarıdan aşağıya doğru olacak */ transform: scaleY(0); /* Başlangıçta yüksekliği 0 (görünmez) */ animation: fill-timeline linear forwards; /* Animasyonu uygula */ animation-timeline: view(); /* Animasyonu zamana değil, scroll'a bağla! */ animation-range: entry 10% to contain 150%; /* Animasyonun ne zaman başlayıp biteceği */}/* YENİ EKLENDİ: ANİMASYON TANIMI */@keyframes fill-timeline { to { transform: scaleY(1); /* Animasyon sonunda yüksekliği %100 yap */ }}/* --- Genel Liste Elemanları --- */.program-tablosu li { position: relative; padding-left: 30px; margin-bottom: 12px; color: #555; line-height: 1.4;}.program-tablosu li::before { content: ""; position: absolute; left: -12.5px; /* Çizgi kalınlaştığı için biraz daha sola aldık */ top: 1px; width: 20px; height: 20px; background-color: #fff; border: 2px solid #ccc; border-radius: 50%; z-index: 1;}.program-tablosu li:last-child { margin-bottom: 0;}/* --- Gün Başlıkları --- */.program-tablosu li.gun-basligi { font-size: 17px; font-weight: 700; color: #ff4242; margin-top: 27px; margin-bottom: 15px; padding-left: 30px; text-transform: uppercase;}.program-tablosu ul li:first-child.gun-basligi { margin-top: 10px;}.program-tablosu li.gun-basligi::before { left: -14.5px; top: 0px; width: 22px; height: 22px; background-color: #ff4242; border-color: #ff4242;}/* --- Saat Bilgisi --- */.program-tablosu li strong { display: inline-block; font-weight: 600; color: #333; min-width: 60px; margin-right: 10px;}/* --- Mobil Uyum --- */@media (max-width: 768px) { .program-tablosu ul { padding-left: 20px; } .program-tablosu li, .program-tablosu li.gun-basligi { padding-left: 25px; } .program-tablosu li::before { left: -11.5px; width: 18px; height: 18px; } .program-tablosu li.gun-basligi::before { left: -13.5px; width: 22px; height: 22px; } .program-tablosu li strong { display: block; margin-bottom: 5px; }}/* ====================================================== *//* OTOMATİK OTEL BİLGİSİ STİLLERİ *//* ====================================================== */.otel-karti { width: 100%;}.otel-karti h3.otel-adi { margin: 0 0 10px 0; font-size: 1.5rem; color: #333;}.otel-karti .otel-etiketler { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap;}.otel-etiketler .etiket { display: inline-flex; align-items: center; gap: 6px; background-color: #f8f9fa; padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; color: #555; font-weight: 500;}.otel-etiketler .etiket svg { width: 18px; height: 18px; fill: #ff4242; /* Ana renk */}.otel-karti .otel-adres { display: flex; align-items: flex-start; gap: 10px; padding-top: 15px; border-top: 1px solid #e9ecef;}.otel-adres svg { width: 18px; height: 18px; fill: #ff4242; flex-shrink: 0; margin-top: 2px;}.otel-adres span { color: #555; line-height: 1.6;}#ucus-bilgisi { line-height:2; font-weight: 500;}#ucus-bilgisi h2{ line-height:1;}/* ---   paragrafını gizle (gereksiz boşlukları engeller) --- */p:empty,p:containing(" ") { display: none;}/* --- Rezervasyon Avantajları Barı --- */.booking-advantages-bar { padding: 30px 0; background-color: #fff; border-top: 2px solid #f2efeb; border-bottom: 2px solid #f2efeb; /* Görseldeki alt çizgiyi ekler */ margin-bottom: 20px; /* Sonraki bölümle arasına boşluk koyar */}.advantages-container { display: flex; justify-content: center; align-items: flex-start; /* İkon ve metni yukarıdan hizalar */ flex-wrap: wrap; gap: 60px; /* Öğeler arasındaki boşluğu artırır */}.advantage-item { display: flex; align-items: center; /* İkon ve metni dikeyde ortalar */ gap: 15px; /* İkon ve metin arasındaki boşluk */ max-width: 250px; /* Öğenin maksimum genişliği */}.advantage-item .icon-circle { background-color: #f4f5f7; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; /* Küçülmesini engeller */}.advantage-item .icon-circle svg { width: 24px; height: 24px; stroke: #555; /* İkon rengini biraz daha yumuşak yapar */ stroke-width: 1.5; fill: none;}.advantage-item .text { font-size: 15px; font-weight: 500; /* Orta kalınlıkta */ line-height: 1.4;}/* --- LİSTE STİLLERİ --- */#fiyata-dahil ul { list-style: none; /* Varsayılan madde imlerini kaldır */ padding: 0; margin: 0; display: grid; /* Modern bir yerleşim için Grid Layout */ grid-template-columns: repeat(2, 1fr); /* İki eşit sütun oluştur */ gap: 1rem 2rem; /* Satırlar arası 1rem, sütunlar arası 2rem boşluk */}#fiyata-dahil li { font-size: 16px; color: #444; padding-left: 35px; /* İkon için solda boşluk bırak */ position: relative; /* İkonu konumlandırmak için */ line-height: 1.5;}/* --- TİK İKONU (CHECKMARK) OLUŞTURMA --- */#fiyata-dahil li::before { content: ""; /* Pseudo-element içeriği boş olmalı */ position: absolute; left: 0; top: 4px; /* Metne göre dikey hizalama */ width: 24px; height: 24px; /* SVG ikonu CSS içine gömüldü. Rengini (fill) kolayca değiştirebilirsiniz. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;}/* --- MOBİL UYUMLULUK (RESPONSIVE) --- */@media (max-width: 768px) { #fiyata-dahil ul { grid-template-columns: 1fr; /* Küçük ekranlarda listeyi tek sütuna düşür */ gap: 12px; /* Sütunlar arası boşluk kalktığı için sadece satır boşluğu */ } #fiyata-dahil-olmayan li { margin-bottom: 12px; } #fiyata-dahil h2 { font-size: 2rem; /* Başlığı mobil için biraz küçült */ } #fiyata-dahil li { font-size: 1rem; /* Yazıları mobil için biraz küçült */ } .program-tablosu td { padding: 1.1rem; } .sol-menu-style1 .navbar { padding: 0px; margin-bottom: 25px; }}/* Liste Stillerini Sıfırlama ve Temel Ayarlar */#fiyata-dahil-olmayan ul { list-style: none; /* Varsayılan madde imlerini kaldır */ padding-left: 0; margin: 0;}/* Liste Öğesi (li) Stilleri */#fiyata-dahil-olmayan li { display: flex; /* İkon ve metni hizalamak için */ align-items: center; /* Dikeyde ortala */ font-size: 16px; color: #555; margin-bottom: 15px; /* Öğeler arasına boşluk koy */ line-height: 1.5;}/* İkonu Oluşturma (::before pseudo-elementi ile) */#fiyata-dahil-olmayan li::before { content: "✗"; /* Çarpı işareti */ color: #c0392b; /* Kırmızı renk */ background-color: #fceceb; /* Çok açık kırmızı arka plan */ border-radius: 50%; /* Daire şekli */ font-weight: bold; display: inline-flex; /* İçeriği ortalamak için flex */ justify-content: center; align-items: center; width: 26px; /* Daire genişliği */ height: 26px; /* Daire yüksekliği */ margin-right: 15px; /* İkon ve metin arasına boşluk */ flex-shrink: 0; /* Küçülmesini engelle */}/* --- EKSTRA: Fiyata Dahil Olanlar Listesi İçin Stil --- *//* Bu stili kullanmak için