/*-------------- LAYOUT -------------------*/
html,body{margin:0;padding:0;font-family:'Poppins',sans-serif;scroll-behavior:smooth;}
section{padding:80px 0;}
a{text-decoration:none;color:#000;letter-spacing:1px;}

/*-------------- LANDING BG -------------------*/
#hero{position:relative;height:100vh;display:flex;align-items:center;padding:0;overflow:hidden;}
.hero-bg{position:absolute;inset:0;width:100%;height:110%;object-fit:cover;object-position:center -35%;z-index:-1;}

/*-------------- LANDING CONTAINER -------------------*/
.hero-container{position:relative;z-index:2;width:50%;margin-left:58%;padding:0;box-sizing:border-box;text-align:left;top:-50px;}
.hero-badge{display:block;width:max-content;background:#f3f5f7;color:#0a1946;padding:6px 12px;border-radius:20px;font-size:16px;font-weight:500;letter-spacing:.3px;margin:0 0 20px;}
.hero-title{font-size:35px;font-weight:700;line-height:1.2;color:#0a1946;margin:0 0 10px;padding:0;text-align:left;}
.hero-sub{font-size:18px;color:#0a1946;font-weight:600;margin:0 0 20px;padding:0;line-height:1.4;text-align:left;}
.button-container{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:12px!important;width:100%!important;margin:25px 0 0!important;padding:0!important;text-align:left!important;}
.landing-button{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:230px!important;min-width:230px!important;margin:0!important;padding:10px 16px!important;box-sizing:border-box!important;border:none;border-radius:8px;box-shadow:0 12px 25px rgba(0,0,0,.18);font-size:14px!important;gap:15px!important;}
.landing-button i{width:22px!important;height:25px!important;flex-shrink:0;padding:0!important;}

#inceleme{background:#fff;color:#000;}
#teklif{background:#ff6a00;color:#fff;}
#sakin{background:#0a1946;color:#fff;}

@media(max-width:768px){
#hero{height:100vh;padding:0;overflow:hidden;}
.hero-container{width:100%;margin:0;padding:0 20px;box-sizing:border-box;text-align:center;}
.hero-badge{display:inline-block;margin:0 0 15px;}
.hero-title{font-size:20px;margin:0 0 10px;text-align:center;}
.hero-sub{font-size:14px;margin:0 0 20px;text-align:center;}
.button-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:25px 0 0;width:100%;}
.landing-button{width:200px;min-width:0;}
}



/*-------------- NEW BUILDING -------------------*/
#new-building{padding:30px 0 90px;background:#f9f9f9;}
#new-building .container{max-width:1200px;margin:auto;padding:0 20px;}
#new-building .section-tag{display:block;text-align:center;color:#d47a2d;font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px;}
#new-building h2{text-align:center;font-size:40px;color:#23283b;margin:0 0 70px;}
#new-building .timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative;width:100%;margin:0 auto;}
#new-building .timeline:before{content:"";position:absolute;top:16px;left:0;width:100%;height:2px;background:#e5e5e5;}
#new-building .timeline-item{position:relative;}
#new-building .step{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50%;background:#d97728;color:#fff;font-weight:700;font-size:18px;border:3px solid #f6c08d;box-sizing:border-box;}
#new-building .content{border-left:2px solid #d97728;margin-left:16px;padding-left:18px;padding-top:15px;margin-top:5px;}
#new-building .content h3{font-size:24px;margin:0 0 18px;color:#2c2c2c;}
#new-building .content ul{list-style:none;padding:0;margin:0;}
#new-building .content li{margin-bottom:12px;color:#555;font-size:16px;line-height:1.2;}
#new-building .timeline-note{text-align:center;margin:60px 0 0;color:#666;font-size:16px;}

/*---- SERVİCE---*/
h2 {text-align:center;font-size:32px; margin-bottom:50px;color:#111827; }
.services-grid { gap: 25px; padding: 20px;}
@media (max-width: 1024px) {
.services-grid {grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px) {.services-grid {grid-template-columns: 1fr;}}
.button-container {display: flex; justify-content: center;  gap: 15px;flex-wrap: wrap;}
#hero .landing-button { position: relative; min-width: 120px;  margin: 5px 0;font-size:14px;}
#services{background: white;}
.service-card{background:white; border-radius:16px;padding:20px 20px; text-decoration:none; color:#1f2937; box-shadow:0 6px 18px rgba(0,0,0,0.2);
    transition: all 0.3s ease; display:flex;flex-direction:column; align-items:center; text-align:center; }
.service-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,0.1); }
.icon-circle{ width:60px; height:60px; border-radius:50%; background:#e0e7ff; display:flex; align-items:center; justify-content:center;
    margin-bottom:5px; color:#4f46e5; font-size:28px; transition: all 0.3s ease;}
.service-card:hover .icon-circle{ background:#c7d2fe; transform:scale(1.1);}
.service-card h3{ font-size:20px; font-weight:500;}
#services .title {line-height: 1.2; margin-bottom: 8px;}
.card-hint {line-height: 1.4; margin-top: 0; margin-bottom:40px; text-align:center; color: #4b5563;}
.service-card p{font-size:14px; color:#4b5563; line-height:1.6; }
.flip-card { perspective: 1000px;}
.flip-card-inner { position: relative; width: 100%;  min-height: 220px; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front { backface-visibility: hidden; }
.flip-card-back { position: absolute; top: 0; left: 0; width: 100%;height: 100%; border-radius: 16px; background: #0a1946; color: white;
  display: flex; flex-direction: column; justify-content: center; align-items: center;backface-visibility: hidden;transform: rotateY(180deg); padding: 30px 20px; box-sizing: border-box;}
.flip-card-back ul{padding:0; margin:0;list-style:none;}
.flip-card-back li{margin:0px 0;letter-spacing:0.3px;}
#counter { background-color: #2F80ED; color: white; }
#services .card { border: none; transition: transform 0.3s; }
#services .card:hover { transform: translateY(-10px); }
.testimonial { background-color: #f7f9fc; }
footer { background-color: #0F2A44; color: white; padding: 40px 0; }
.btn-primary { background-color: #2F80ED; border: none; }
.btn-primary:hover { background-color: #1F5BB5; }

/* Mobil için tıklayınca toggle sınıfı */
.flip-card-inner.flipped {transform: rotateY(180deg);}
.services-grid{display:grid;grid-template-columns: repeat(3, 1fr); gap:20px;}
@media (max-width:1024px){
.services-grid{grid-template-columns: repeat(2,1fr);}    }
@media (max-width:640px){
.services-grid{grid-template-columns: 1fr;}}