*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:#0b0b0b;
  color:#f2f2f2;
}
.container{width:92%;max-width:1120px;margin:0 auto}
a{color:inherit;text-decoration:none}

/* Header */
.banner{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px 4%;
  border-bottom:1px solid rgba(242,242,242,.10);
  background:rgba(10,10,10,.85);
}
.logo{
  letter-spacing:.22em;
  font-weight:700;
  text-transform:uppercase;
	font-size:19px;
}
.banner-middle .nav{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
}
.banner-middle .nav li{
  font-size:13px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(242,242,242,.75);
  cursor:pointer;
}
.banner-middle .nav li:hover{color:#fff}
.banner-right{display:flex;align-items:center;gap:12px}
.sign-in{
  font-size:13px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(242,242,242,.75);
  cursor:pointer;
}
.sign-in:hover{color:#fff}
.start{
  border:1px solid rgba(242,242,242,.18);
  background:#f2f2f2;
  color:#0b0b0b;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.start:hover{filter:brightness(.92)}
/* Header - Social (Instagram) */
.socials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:8px;
}
.socials a{
  opacity:.65;
  transition:opacity .2s ease, transform .2s ease;
}
.socials a:hover{
  opacity:1;
  transform:translateY(-1px);
}
.socials img{
  width:22px;
  height:22px;
  opacity:.85;
  transition:.2s;
  filter: invert(1);
	  transform: translateY(3px);
/* ikon siyahsa görünür yapar */
}

.socials img:hover{
  opacity:1;
  transform:scale(1.1);
}
/* Hero */
.main-section{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:110px; /* fixed header offset */
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.25), rgba(0,0,0,.85)),
    url("images/heroarkaplan.png") center/cover no-repeat;
}
.main-section::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.10;
}
.main-section-content{
  position:relative;
  width:92%;
  max-width:1120px;
  margin:0 auto;
  padding:64px 0;
}
.content-title{
  font-size:56px;                 /* fallback */
  font-size:clamp(40px, 6vw, 78px);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.content-subtitle{
  color:rgba(242,242,242,.78);
  font-size:16px;
  line-height:1.7;
  max-width:60ch;
  margin:0 0 22px;
}
.content-button{
  border:1px solid rgba(242,242,242,.18);
  background:transparent;
  color:#f2f2f2;
  padding:12px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.content-button:hover{border-color:rgba(242,242,242,.35)}

/* Main */
.main{padding:84px 0}
.section1{width:92%;max-width:1120px;margin:0 auto 34px}
.main-text1{
  margin:0 0 12px;
  font-size:34px;                 /* fallback */
  font-size:clamp(26px, 3vw, 40px);
  letter-spacing:.06em;
}
.main-text2{
  margin:0;
  color:rgba(242,242,242,.72);
  line-height:1.8;
  max-width:80ch;
}

/* 3 steps (flex) */
.orta-div{
  width:92%;
  max-width:1120px;
  margin:26px auto 0;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.main-text3-div{
  flex: 1 1 280px; /* 3'lü dizilim */
  border:1px solid rgba(242,242,242,.10);
  border-radius:18px;
  padding:18px;
  background:rgba(255,255,255,.02);
  transition:transform .25s ease, border-color .25s ease;
}
.main-text3-div:hover{
  transform:translateY(-4px);
  border-color:rgba(242,242,242,.22);
}
.number{
  font-size:44px;
  font-weight:700;
  opacity:.35;
}
.text-title{
  margin-top:4px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.main-text{
  margin-top:10px;
  color:rgba(242,242,242,.72);
  line-height:1.8;
  font-size:14px;
 min-height:60px;
}
.text3-image{
  margin-top:17px;
height:220px;
border-radius:14px;
border:1px solid rgba(242,242,242,.10);
background-image:url("images/ımg3.png");
background-size:cover;
background-position:center;
}


.text4-image{
background-image:url("images/ımg1.jpg");
background-size:cover;
background-position:center;
}

.text5-image{
background-image:url("images/ımg2.jpg");
background-size:cover;
background-position:center;
}

/* Section 3 (flex) */
.section3{
  width:92%;
  max-width:1120px;
  margin:0 auto;
  padding:74px 0;

  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.section3 > div{
  flex: 1 1 420px;
}
.green-div{
  border:1px solid rgba(242,242,242,.10);
  border-radius:18px;
  padding:22px;
  background:rgba(255,255,255,.02);
}
.text{margin:0 0 10px}
.text-bootom{
  color:rgba(242,242,242,.72);
  line-height:1.8;
  margin-bottom:16px;
}
.img4{
  height:360px;
  border-radius:18px;
  border:1px solid rgba(242,242,242,.10);
  background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), rgba(0,0,0,.8));
  background-image:
    radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), rgba(0,0,0,.8)),
    url("images/img4.png");
  background-position:center,center;
  background-size:cover,cover;
background-repeat:no-repeat,no-repeat;
	filter:grayscale(100%);
}

/* Section 4 image + text (flex) */
.img-div{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.img5, .img5-text{
  flex: 1 1 420px;
}
.img5{
  height:420px;
  border-radius:18px;
  border:1px solid rgba(242,242,242,.10);
  background-image:
    radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), rgba(0,0,0,.85)),
    url("images/p3.jpg");
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  filter:grayscale(100%);
}
.img5-text{
  border:1px solid rgba(242,242,242,.10);
  border-radius:18px;
  padding:22px;
  background:rgba(255,255,255,.02);
}
.img5-text-bottom{
  margin-top:10px;
  color:rgba(242,242,242,.72);
  line-height:1.8;
}
.buton{margin-top:16px}

/* Footer */
.alt{
  border-top:1px solid rgba(242,242,242,.10);
  padding:26px 0;
  margin-top:40px;
}
.alt ol{
  width:92%;
  max-width:1120px;
  margin:0 auto;
  padding:0;
  list-style:none;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:rgba(242,242,242,.72);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
.alt li:first-child{color:#fff;font-weight:700}

/* Responsive */
@media (max-width:900px){
  .banner-middle{display:none}
  .section3{flex-direction:column}
  .img-div{flex-direction:column}
  .main-text3-div{width:100%}
  .orta-div{flex-direction:column}
}
.video-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.video-modal video{
width:80%;
max-width:900px;
}

.close-video{
position:absolute;
top:40px;
right:60px;
font-size:40px;
color:white;
cursor:pointer;
}
/* CONCERT SECTION */

.concert-section{
width:92%;
max-width:1120px;
margin:68px auto;
}

.concert-container{
display:flex;
gap:40px;
align-items:center;
flex-wrap:wrap;
}

.concert-poster{
flex:1;
}

.concert-poster img{
width:100%;
max-height:85vh;
object-fit:contain;
border-radius:16px;
}

.concert-info{
flex:1;
}

.concert-info h2{
letter-spacing:.25em;
font-size:12px;
color:rgba(255,255,255,.6);
margin-bottom:10px;
}

.concert-info h3{
font-size:34px;
margin-bottom:10px;
}

.concert-date{
color:rgba(255,255,255,.7);
margin-bottom:20px;
}

.concert-text{
line-height:1.8;
color:rgba(255,255,255,.75);
margin-bottom:30px;
}

.ticket-button,
.whatsapp-button{
display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 28px;
border-radius:999px;

font-size:12px;
letter-spacing:.15em;
text-decoration:none;
}
.ticket-icon{
width:18px;
height:18px;
margin-right:8px;
}
.ticket-button:hover{
transform:translateY(-3px);
background:linear-gradient(135deg,#1a82ff,#0066ff);
box-shadow:0 10px 30px rgba(0,80,255,0.55);

}



.ticket-circle img{
width:16px;
height:16px;
}

.ticket-button:hover{
transform:translateY(-3px);
background:linear-gradient(135deg,#1a82ff,#0066ff);
box-shadow:0 10px 30px rgba(0,80,255,0.55);
}
.countdown{
margin-top:20px;
font-size:22px;
font-weight:600;
letter-spacing:1px;
}

.countdown span{
font-size:32px;
margin:0 5px;
}

.ticket-button{
background:linear-gradient(135deg,#0072ff,#0051cc);
color:white;
font-weight:600;
box-shadow:0 6px 20px rgba(0,80,255,0.35);
}
.whatsapp-button{

background:#25D366;
color:white;
}
.whatsapp-button:hover{
background:#1ebe5d;
transform:translateY(-2px);
}
.button-group{
display:flex;
align-items:center;
gap:16px;
margin-top:20px;
}
.ticket-button{
display:inline-flex;
align-items:center;
gap:10px;
}