:root {
--font1: "Outfit", Helvetica, Arial, sans-serif;
--primary-orange: #5f135e;
--radius: 3px;
}html {
scroll-behavior: smooth;
}/* Formun tam tepesine yapışmaması, biraz pay kalması için (Opsiyonel) */
#randevu-formu {
scroll-margin-top: 100px;
}body {
font-family: var(--font1);
padding: 0px;
margin: 0px;
}body.menu-open {
overflow: hidden;
}/* --- TEMA DEĞİŞKENLERİ --- */
.header1 {
--header1-primary: #b442ea;
--header1-primary-dark: #401856;
--header1-topbar-bg: #fcfaff;
--header1-text-main: #2a2a2a;
--header1-text-gray: #666666;
--header1-border: #eaeaea;
--header1-bg-white: #ffffff;
--header1-transition: all 0.25s ease-in-out;font-family: var(--header1-font);
background-color: var(--header1-bg-white);
color: var(--header1-text-main);
position: fixed;
width: 100%;
top: 0px;
z-index: 1000;
border-bottom: 1px solid var(--header1-border);
}.header1 ul {
list-style: none;
}
.header1 a {
text-decoration: none;
color: inherit;
color: var(--header1-topbar-bg);
}
.header1 button {
background: none;
border: none;
cursor: pointer;
font: inherit;
}
.header1 svg {
display: inline-block;
vertical-align: middle;
color: var(--header1-topbar-bg);
}/* Kapsayıcı (Geniş tutuldu - Adisyo gibi) */
.header1-container {
max-width: 95%;
}/* --- ADİSYO STİLİ ÜST BAR --- */
.header1-topbar {
background-color: var(--header1-primary);
border-bottom: 1px solid var(--header1-border);
padding: 10px 0;
}.header1-topbar-content {
display: flex;
justify-content: center; /* Adisyo'daki gibi her şey ortada hizalı */
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 14px;
}.header1-icon-top {
width: 18px;
height: 18px;
color: var(--header1-primary);
}
.header1-icon-arrow {
width: 16px;
height: 16px;
}
.header1-top-text {
color: var(--header1-topbar-bg);
font-weight: 500;
}
.header1-top-phone {
font-weight: 600;
color: var(--header1-primary);
}
.header1-top-or {
color: var(--header1-text-gray);
font-weight: 400;
font-size: 13px;
margin: 0 4px;
}/* Sizi Arayalım stili -> WhatsApp Hattı */
.header1-top-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--header1-primary);
color: var(--header1-primary);
background-color: transparent;
padding: 6px 16px;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
transition: var(--header1-transition);
}
.header1-top-btn:hover {
background-color: var(--header1-primary);
color: var(--header1-bg-white);
}
.header1-icon-wa {
width: 16px;
height: 16px;
}a.header-whatsapp {
color: var(--header1-primary-dark);
}/* --- ANA HEADER BÖLÜMÜ --- */
.header1-main {
padding: 12px 0;
}.header1-main-inner {
display: flex;
justify-content: space-between;
align-items: center;
}/* Logo */
.header1-logo {
display: flex;
align-items: center;
gap: 8px;
color: var(--header1-primary);
font-size: 28px;
font-weight: 800;
letter-spacing: -0.5px;
}.header1-logo img {
width: auto;
height: 70px;
}
.header1-logo svg {
width: 36px;
height: 36px;
fill: var(--header1-primary);
color: var(--header1-bg-white);
}/* Wrapper (Menü + Buton) */
.header1-nav-wrapper {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end; /* Sağ tarafa yasla */
}/* Menü */
.header1-nav {
margin-right: 30px; /* Buton ile menü arası mesafe */
}.header1-menu {
padding: 0px;
margin: 0px;
display: flex;
align-items: center;
gap: 28px; /* Menü linkleri arası mesafe */
}.header1-menu .nav-item {
position: relative;
}.header1-menu .nav-item:nth-child(2) {
display: none;
}.header1-menu .nav-item .nav-link {
font-size: 15px;
font-weight: 500;
color: var(--header1-text-main);
display: flex;
align-items: center;
gap: 4px;
padding: 15px 0;
transition: var(--header1-transition);
}.header1-menu .nav-item .nav-link svg {
width: 15px;
height: 15px;
}.header1-menu .nav-item .nav-link :hover {
color: var(--header1-primary);
}.header-social-icons {
display: flex;
gap: 8px;
}.header-social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 33px;
height: 33px;
border-radius: 50%;
color: #401856;
text-decoration: none;
transition: all 0.3s ease;
border: solid 1px #d6d2dd;
}
.header-social-icons a svg {
width: 16px;
height: 16px;
fill: #401856;
}
.header-social-icons a:hover {
background-color: #ac81d0;
fill: #0c1427;
transform: translateY(-3px);
border: solid 1px #ac81d0;
}.header-social-icons a:hover svg {
fill: #fff;
}.header1-caret {
width: 14px;
height: 14px;
transition: transform 0.3s ease;
color: var(--header1-text-gray);
}
.header1-menu-item:hover .header1-caret {
transform: rotate(180deg);
color: var(--header1-primary);
}/* Dropdown */
.header1-dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: var(--header1-bg-white);
min-width: 200px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
border: 1px solid var(--header1-border);
border-radius: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: var(--header1-transition);
padding: 10px 0;
z-index: 10;
}.header1-has-dropdown:hover .header1-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}.header1-dropdown a {
display: block;
padding: 10px 20px;
font-size: 14px;
color: var(--header1-text-main);
transition: var(--header1-transition);
}.header1-dropdown a:hover {
background-color: var(--header1-topbar-bg);
color: var(--header1-primary);
}/* Adisyo Stili Ana Buton (Giriş Yap YOK) */
.header1-actions {
display: flex;
align-items: center;
}.header1-cta-btn {
background-color: var(--header1-primary);
color: var(--header1-bg-white);
padding: 12px 24px;
border-radius: 30px; /* Hap şeklinde buton */
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
transition: var(--header1-transition);
}.header1-cta-btn:hover {
background-color: var(--header1-primary-dark);
}/* --- MOBİL YAPI (Max 1024px) --- */
.header1-mobile-open,
.header1-mobile-header,
.header1-overlay {
display: none;
}@media (max-width: 1024px) {/* Topbar Mobilde Kutuplaşma */
.header1-topbar-content {
flex-direction: column;
gap: 8px;
text-align: center;
}
.header1-icon-arrow,
.header1-top-or {
display: none;
}/* Mobil İkonları */
.header1-mobile-open {
display: flex;
color: var(--header1-text-main);
padding: 5px;
}
.header1-mobile-open svg {
width: 30px;
height: 30px;
color : #401856;
}/* Menü Kapsayıcı Mobil Drawer */
.header1-nav-wrapper {
position: fixed;
top: 0;
right: -100%;
width: 320px;
max-width: 85vw;
height: 100vh;
background-color: var(--header1-bg-white);
flex-direction: column;
align-items: flex-start;
padding: 25px 20px;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1002;
overflow-y: auto;
}.header1-nav-wrapper.header1-is-active {
right: 0;
justify-content: start;
}/* Mobil Menü Üst Başlık ve Kapat Butonu */
.header1-mobile-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid var(--header1-border);
}.header1-mobile-title {
font-weight: 700;
font-size: 20px;
color: var(--header1-primary);
}
.header1-mobile-close {
color: var(--header1-text-main);
}
.header1-mobile-close svg {
width: 28px;
height: 28px;
}/* Mobil Navigasyon Dizilimi */
.header1-nav {
width: 100%;
margin-right: 0;
margin-bottom: 30px;
}
.header1-menu {
flex-direction: column;
align-items: flex-start;
gap: 0;
}.header1-menu-item {
width: 100%;
border-bottom: 1px solid var(--header1-border);
}
.header1-menu .nav-item .nav-link {
width: 100%;
justify-content: space-between;
padding: 16px 0;
font-size: 16px;
}/* Mobil Akordeon Dropdown */
.header1-dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.header1-has-dropdown.header1-dropdown-open .header1-dropdown {
max-height: 350px;
padding-bottom: 15px;
}
.header1-has-dropdown.header1-dropdown-open .header1-caret {
transform: rotate(180deg);
}/* Mobil Buton */
.header1-actions {
width: 100%;
}
.header1-cta-btn {
width: 100%;
justify-content: center;
padding: 14px;
font-size: 16px;
}/* Karartma Maskesi */
.header1-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
z-index: 1001;
transition: var(--header1-transition);
}
.header1-overlay.header1-is-active {
opacity: 1;
visibility: visible;
}
body.header1-no-scroll {
overflow: hidden;
}
}a.WhatsApp1 {
display: flex;
font-size: 18px;
background: #2eb843;
font-weight: 600;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
left: 20px;
border-radius: 50%;
-webkit-transition: all 0.1s ease-out 0s;
-moz-transition: all 0.1s ease-out 0s;
-ms-transition: all 0.1s ease-out 0s;
-o-transition: all 0.1s ease-out 0s;
transition: all 0.1s ease-out 0s;
color: #fff;
align-items: center;
justify-content: center;
animation: whatsapp infinite 2s linear;
z-index: 9999;
}@keyframes whatsapp {
0% {
box-shadow: 0 0 0 0 #2eb843;
}50% {
box-shadow: 0 0 0 10px #015dc700;
}100% {
box-shadow: 0 0 0 0 #015dc700;
}
}.mobilbuttonlar {
display: none;
}@media (max-width: 1200px) {
.stylish-info-bar{
margin-bottom: 35px;
}
.header1-topbar {
display: none;
}.header1-logo img {
width: auto;
height: 60px;
}a.WhatsApp1 {
bottom: 60px;
}.btn {
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
width: 100%;
}.btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}.mobilbuttonlar {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
display: flex;
}.btn1 {
background: #401856;
border-color: #401856;
color: #fff;
}.btn2 {
background: #2c0d3d;
border-color: #2c0d3d;
color: #fff;
}.btn3 {
background: #2eb843;
border-color: #2eb843;
color: #fff;
}
}/* Buton Tasarımı */
.btn-randevu {
display: inline-flex;
align-items: center;
background-color: #401856; /* Birebir aynı mint yeşili */
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
padding: 14px 20px 14px 30px;
border-radius: 50px;
transition: background-color 0.3s ease;
}.btn-randevu:hover {
background-color: #ac81d0;
}.ok-ikon {
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
width: 26px;
height: 26px;
border-radius: 50%;
margin-left: 15px;
}svg {
height: 20px;
height: 20px;
}/**//* Ana Footer Ayarları */
.modern-footer .container {
max-width: 1200px;
}.modern-footer {
background-color: #fafafa;
background-repeat: repeat;
padding-top: 60px;
}/* Harita ve Kart Bölümü */
.map-wrapper {
position: relative;
height: 500px;
width: 100%;
}
.relative-container {
position: relative;
height: 100%;
z-index: 5;
}
.google-map {
position: absolute;
top: 0;
right: 150px;
width: 55%;
height: 100%;
z-index: 1;
}/* Yüzen Kart Tasarımı */
.contact-card {
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
background: #fff;
width: 100%;
max-width: 460px;
padding: 50px;
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.05);
border-radius: 15px;
border: solid 5px #b442ea;
}
.card-title {
font-size: 42px;
font-weight: 300;
color: #b5b5b5;
letter-spacing: 8px;
margin-bottom: 10px;
}
.card-subtitle {
font-size: 29px;
color: #401856;
font-weight: 500;
margin-bottom: 20px;
}
.call-action {
color: #e63946;
text-decoration: none;
font-weight: 600;
display: inline-block;
margin-bottom: 35px;
transition: 0.3s;
}
.call-action:hover { color: #1d3557; }
.card-address, .card-phone {
color: #777;
font-size: 15px;
line-height: 1.6;
margin-bottom: 8px;
}
.card-mail {
display: flex;
align-items: center;
color: #777;
text-decoration: none;
margin-top: 15px;
}
.mail-svg { width: 18px; margin-right: 10px; opacity: 0.7; }/* Alt Bilgi Barı (Şık Tasarım) */
.stylish-info-bar {
padding: 60px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
background: #fff;
margin-top: 70px;
}
.info-grid {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.info-box {
display: flex;
align-items: center;
flex: 1;
}
.svg-icon-wrapper {
width: 45px;
height: 45px;
background: #b442ea;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 15px;
flex-shrink: 0;
transition: 0.3s ease;
}.svg-icon-wrapper svg { width: 22px; height: 22px; }
.info-content { color: #401856; font-size: 14px; line-height: 1.4; }
.info-content a { color: inherit; text-decoration: none; transition: 0.2s; }.logo-box { justify-content: flex-end; flex: 1.2; }
.f-logo {
max-width: max-content;
height: 70px;
}.bottom-legal {
text-align: right;
padding-bottom: 30px;
color: #bbb;
font-size: 12px;
}/* MOBİL UYUMLULUK */
@media (max-width: 1199px) {
.google-map { width: 50%; display: none;}
.contact-card { padding: 35px; max-width: 400px; }
}@media (max-width: 991px) {
.google-map {
position: relative;
width: 100%;
height: 350px;
}
.contact-card {
position: relative;
top: 0;
transform: none;
max-width: 100%;
box-shadow: none;
border: 1px solid #eee;
margin-bottom: 20px;
}
.map-wrapper { height: auto; }
.info-grid { flex-wrap: wrap; }
.info-box { width: 45%; flex: none; }
.logo-box { width: 100%; justify-content: center; margin-top: 20px; }
}@media (max-width: 767px) {
.info-box { width: 100%; }
.card-title { font-size: 32px; }
.bottom-legal { text-align: center; }
}@media(max-width:1024px){
.modern-footer{
display: none;
}
.stylish-info-bar{
padding: 60px 20px;
}
}/* Alt Bilgi Barı Kutucukları (Buton Görünümü) */
.info-box {
display: flex;
align-items: center;
flex: 1;
background: #ffffff;
padding: 15px 20px;
border-radius: 12px;
border: 1px solid #f0f0f0;
transition: all 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}/* Hover Efekti: Üzerine gelince */
.info-box {
background-color: #fcfaff; /* Çok hafif mor arka plan */
border-color: #b442ea; /* Ana mor renk çerçeve */
transform: translateY(-5px); /* Hafif yukarı kalkma */
box-shadow: 0 10px 20px rgba(180, 66, 234, 0.1); /* Morumsu gölge */
}/* İkon ve İçerik Düzenlemeleri */
.svg-icon-wrapper {
width: 45px;
height: 45px;
background: #b442ea;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px; /* Yuvarlak yerine hafif karemsi-oval */
margin-right: 15px;
flex-shrink: 0;
transition: 0.3s ease;
}.info-box:hover .svg-icon-wrapper {
background: #401856; /* Hoverda ikon kutusu koyulaşsın */
transform: scale(1.05);
}.info-content {
color: #401856;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}/* Logo kutusunun buton gibi görünmemesi için (Opsiyonel) */
.info-box.logo-box {
background: transparent;
border: none;
box-shadow: none;
cursor: default;
}
.info-box.logo-box:hover {
transform: none;
background: transparent;
}/* Mobil için aradaki boşlukları artır */
@media (max-width: 991px) {
.info-grid {
gap: 15px;
}
.info-box {
width: 100%; /* Mobilde tam genişlik */
}
}