*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Montserrat','Segoe UI',sans-serif;
}


html{
scroll-behavior:smooth;
}


body{
background:#fffaf8;
color:#333;
}



/* ================================================= */
/* HEADER */
/* ================================================= */

header{

height:95px;
width:100%;

background:#111;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 5%;

position:fixed;
top:0;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.25);

}


.logo-text{

color:white;

font-size:30px;

font-weight:700;

letter-spacing:3px;

line-height:1;

}


.logo-text span{

display:block;

font-size:14px;

letter-spacing:5px;

margin-top:8px;

color:#d9aaaa;

}


nav ul{

display:flex;

gap:22px;

list-style:none;

}


nav a{

text-decoration:none;

color:white;

font-size:15px;

font-weight:500;

transition:.3s;

}


nav a:hover{

color:#d9aaaa;

}


.header-button a{

background:#d9aaaa;

padding:12px 25px;

border-radius:30px;

color:white;

text-decoration:none;

transition:.3s;

}


.header-button a:hover{

transform:scale(1.08);

}



/* ================================================= */
/* HERO */
/* ================================================= */

.hero{

height:100vh;

margin-top:95px;

position:relative;

overflow:hidden;

}


.hero img{

width:100%;

height:100%;

object-fit:cover;

}


.hero:after{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.35);

}


.hero-content{

position:absolute;

z-index:2;

top:50%;

left:8%;

transform:translateY(-50%);

color:white;

}


.hero-content h1{

font-size:55px;

letter-spacing:2px;

}


.hero-content p{

font-size:21px;

margin:25px 0;

}


.hero-content a{

display:inline-block;

background:#d9aaaa;

padding:15px 35px;

border-radius:35px;

color:white;

text-decoration:none;

transition:.3s;

}


.hero-content a:hover{

background:#b97f7f;

transform:translateY(-2px);

}



/* ================================================= */
/* GENEL */
/* ================================================= */

section{

padding:70px 6%;

scroll-margin-top:95px;

}


.section-title{

text-align:center;

margin-bottom:45px;

}


.section-title h2{

display:inline-block;

padding:15px 45px;

border:2px solid #d9aaaa;

border-radius:40px;

color:#9d6868;

background:white;

}



/* ================================================= */
/* HİZMETLER */
/* ================================================= */

.service-layout{

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

}


.nutrition-box,
.vki-box{

background:white;

border:1px solid #ead0d0;

border-radius:25px;

padding:30px;

}


.nutrition-box h3,
.vki-box h3{

text-align:center;

color:#a06c6c;

margin-bottom:25px;

}


.cards{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}


.card{

border:1px solid #ead0d0;

border-radius:20px;

overflow:hidden;

background:white;

transition:.35s;

cursor:pointer;

user-select:none;

}


.card:hover{

transform:translateY(-5px) scale(1.02);

box-shadow:0 15px 30px rgba(0,0,0,.15);

}


.card:focus{

outline:3px solid rgba(201,144,144,.35);

outline-offset:3px;

}


.card:active{

transform:scale(.98);

}


.card img{

display:block;

width:100%;

height:180px;

object-fit:cover;

}


.card h4{

padding:15px;

text-align:center;

}



/* ================================================= */
/* VKİ */
/* ================================================= */

.vki-aciklama{

text-align:center;

line-height:1.6;

margin-bottom:20px;

}


.vki-form label{

display:block;

margin-top:15px;

margin-bottom:5px;

font-weight:600;

color:#8f5d5d;

}


.vki-form input{

width:100%;

padding:14px;

border-radius:15px;

border:1px solid #e5caca;

outline:none;

font-size:16px;

}


.vki-form input:focus{

border-color:#c99090;

box-shadow:0 0 0 3px rgba(201,144,144,.12);

}


.vki-form button{

margin-top:20px;

width:100%;

padding:15px;

border:none;

background:#c99090;

color:white;

border-radius:30px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}


.vki-form button:hover{

transform:scale(1.05);

}


#sonuc{

margin:25px 0;

padding:15px;

background:#fff5f5;

border-radius:15px;

text-align:center;

font-size:20px;

color:#8f5d5d;

min-height:30px;

}


.vki-table{

margin-top:25px;

border-top:1px solid #edd5d5;

padding-top:20px;

}


.vki-table h4{

text-align:center;

margin-bottom:15px;

color:#8f5d5d;

}


.vki-row{

display:flex;

justify-content:space-between;

padding:12px 15px;

margin-bottom:10px;

background:#fff8f6;

border-radius:12px;

border:1px solid #f0dddd;

}



/* ================================================= */
/* CİHAZLAR */
/* ================================================= */

.device-area{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}


.device{

background:white;

border:1px solid #ead0d0;

border-radius:25px;

padding:25px;

text-align:center;

transition:.35s;

cursor:pointer;

user-select:none;

}


.device:hover{

transform:translateY(-5px) scale(1.02);

box-shadow:0 15px 30px rgba(0,0,0,.15);

}


.device:focus{

outline:3px solid rgba(201,144,144,.35);

outline-offset:3px;

}


.device:active{

transform:scale(.98);

}


.device h3{

margin-bottom:20px;

color:#9d6868;

}


.device h3 span{

font-size:16px;

font-weight:500;

}


.device img{

display:block;

width:100%;

height:350px;

object-fit:contain;

}


.device-click-info{

margin-top:15px;

color:#a06c6c;

font-size:14px;

font-weight:600;

}



/* ================================================= */
/* KLİNİK */
/* ================================================= */

.clinic-gallery{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}


.clinic-gallery img{

display:block;

width:100%;

height:350px;

object-fit:cover;

border-radius:25px;

border:1px solid #ead0d0;

transition:.35s;

}


.clinic-gallery img:hover{

transform:scale(1.04);

}



/* ================================================= */
/* ALT BÖLÜMLER */
/* ================================================= */

#hakkimizda p,
#online p{

max-width:900px;

margin:auto;

text-align:center;

font-size:18px;

line-height:1.8;

}



/* ================================================= */
/* İLETİŞİM */
/* ================================================= */

#iletisim{

text-align:center;

}


#iletisim a{

display:inline-block;

margin-top:20px;

background:#d9aaaa;

padding:15px 30px;

border-radius:30px;

color:white;

text-decoration:none;

transition:.3s;

}


#iletisim a:hover{

background:#b97f7f;

}



/* ================================================= */
/* FOOTER */
/* ================================================= */

footer{

background:#111;

color:white;

text-align:center;

padding:45px 20px;

}


footer h3{

font-size:25px;

margin-bottom:20px;

}


footer p{

margin:12px;

line-height:1.7;

color:#ddd;

}


.copyright{

margin-top:25px;

font-size:14px;

color:#aaa;

}



/* ================================================= */
/* WHATSAPP */
/* ================================================= */

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

background:#25d366;

color:white;

padding:15px 25px;

border-radius:40px;

text-decoration:none;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.2);

transition:.3s;

}


.whatsapp:hover{

transform:translateY(-3px);

}



/* ================================================= */
/* MODAL */
/* ================================================= */

body.modal-acik{

overflow:hidden;

}


.hizmet-modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.72);

display:flex;

align-items:center;

justify-content:center;

padding:30px;

z-index:5000;

opacity:0;

visibility:hidden;

pointer-events:none;

transition:opacity .3s ease,
visibility .3s ease;

}


.hizmet-modal.aktif{

opacity:1;

visibility:visible;

pointer-events:auto;

}


.hizmet-modal-content{

position:relative;

background:#fffaf8;

width:min(850px,100%);

max-height:85vh;

overflow-y:auto;

border-radius:30px;

padding:45px;

box-shadow:0 25px 70px rgba(0,0,0,.35);

transform:translateY(30px) scale(.96);

transition:transform .3s ease;

}


.hizmet-modal.aktif
.hizmet-modal-content{

transform:translateY(0) scale(1);

}



/* ================================================= */
/* MODAL KAPAT */
/* ================================================= */

.modal-kapat{

position:absolute;

right:20px;

top:15px;

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#f5dddd;

color:#8f5d5d;

font-size:32px;

line-height:1;

cursor:pointer;

transition:.3s;

z-index:2;

}


.modal-kapat:hover{

background:#d9aaaa;

color:white;

transform:rotate(90deg);

}



/* ================================================= */
/* MODAL BAŞLIK */
/* ================================================= */

.modal-baslik{

text-align:center;

padding:10px 45px 25px;

border-bottom:1px solid #efdada;

}


.modal-baslik h2{

color:#9d6868;

font-size:30px;

line-height:1.3;

}



/* ================================================= */
/* MODAL İÇERİK */
/* ================================================= */

.modal-icerik{

padding:30px 10px 20px;

}


.modal-icerik p{

font-size:17px;

line-height:1.8;

margin-bottom:20px;

color:#444;

}


.modal-icerik h3{

color:#9d6868;

margin:25px 0 15px;

font-size:21px;

}


.modal-icerik ul{

padding-left:25px;

margin-bottom:20px;

}


.modal-icerik li{

margin-bottom:12px;

line-height:1.6;

}



/* ================================================= */
/* MODAL RANDEVU */
/* ================================================= */

.modal-randevu{

display:block;

width:max-content;

margin:15px auto 0;

padding:14px 30px;

background:#d9aaaa;

color:white;

text-decoration:none;

border-radius:30px;

font-weight:600;

transition:.3s;

}


.modal-randevu:hover{

background:#b97f7f;

transform:scale(1.05);

}



/* ================================================= */
/* MOBİL */
/* ================================================= */

@media(max-width:1000px){

header{

height:auto;

padding:20px;

flex-direction:column;

gap:20px;

}


nav ul{

flex-wrap:wrap;

justify-content:center;

gap:12px;

}


.hero-content h1{

font-size:35px;

}


.service-layout{

grid-template-columns:1fr;

}


.cards{

grid-template-columns:1fr 1fr;

}


.device-area{

grid-template-columns:1fr;

}

}



@media(max-width:600px){

header{

position:relative;

}


.hero{

margin-top:0;

height:calc(100vh - 0px);

}


section{

padding:55px 5%;

scroll-margin-top:20px;

}


.section-title h2{

font-size:20px;

padding:12px 25px;

}


.cards{

grid-template-columns:1fr;

}


.hero-content{

left:6%;

right:6%;

}


.hero-content h1{

font-size:28px;

}


.hero-content p{

font-size:17px;

}


.hero-content a{

padding:13px 28px;

}


.clinic-gallery{

grid-template-columns:1fr;

}


.hizmet-modal{

padding:15px;

}


.hizmet-modal-content{

padding:30px 20px;

max-height:90vh;

border-radius:22px;

}


.modal-baslik{

padding:10px 35px 20px;

}


.modal-baslik h2{

font-size:23px;

}


.modal-icerik{

padding:25px 5px 15px;

}


.modal-icerik p{

font-size:15px;

}


.modal-icerik h3{

font-size:18px;

}


.modal-randevu{

width:100%;

text-align:center;

}


.modal-kapat{

right:15px;

top:13px;

width:40px;

height:40px;

font-size:28px;

}


.device img{

height:280px;

}


.whatsapp{

right:15px;

bottom:15px;

padding:13px 20px;

}

}