@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap');

:root{
  --white:#ffffff;
  --black:#111111;
  --gray:#8c8c8c;
  --line:#d5d5d5;
  --gold:#c8a15a;
}

*{box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}

body{
  background:#fff;
  color:var(--black);
  font-family:"DM Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.splash{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  background:#fff;
}

/* Çok hafif beyaz/temiz premium görünüm */
.splash:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 48%,#fff 0%,#fff 58%,#fafafa 100%);
  z-index:0;
}

.header{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  width:100%;
  height:86px;
  padding:0 4.2vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#111;
  text-decoration:none;
}

.mark{
  width:42px;
  font:37px Georgia,serif;
  letter-spacing:-.17em;
  line-height:.75;
}

.brand-name{
  font-size:12px;
  font-weight:500;
  letter-spacing:.2em;
}

.lang{
  font-size:8px;
  color:#888;
  letter-spacing:.25em;
}

.center{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:min(560px,82vw);
  transform:translate(-50%,-47%);
  text-align:center;
}

.brand-center{
  animation:brandReveal 1.25s cubic-bezier(.22,.61,.36,1) both;
}

.big-mark{
  font:86px Georgia,serif;
  letter-spacing:-.2em;
  line-height:.75;
  width:94px;
  margin:0 auto 29px;
}

.title{
  font-size:28px;
  font-weight:400;
  letter-spacing:.42em;
  padding-left:.42em;
  white-space:nowrap;
}

.loading-area{
  width:min(390px,70vw);
  margin:56px auto 38px;
  animation:fadeUp .8s .25s both;
}

.loading-line{
  width:100%;
  height:2px;
  background:#d6d6d6;
  overflow:hidden;
}

.loading-line span{
  display:block;
  width:0;
  height:100%;
  background:#111;
  transition:width .03s linear;
}

.loading-info{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  color:#777;
  font-size:8px;
  letter-spacing:.28em;
}

.collection{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(530px,78vw);
  height:86px;
  margin:0 auto;
  padding:0 39px;
  border:1px solid #222;
  background:#fff;
  color:#111;
  text-decoration:none;
  overflow:hidden;
  animation:fadeUp .8s .4s both;
  transition:color .35s ease,background .35s ease;
}

.collection span,
.collection b{
  position:relative;
  z-index:2;
}

.collection span{
  font-size:16px;
  letter-spacing:.19em;
  font-weight:400;
}

.collection b{
  font-size:29px;
  font-weight:300;
}

.collection i{
  position:absolute;
  z-index:1;
  left:0;
  bottom:0;
  width:0;
  height:3px;
  background:#111;
  transition:width .03s linear;
}

.collection.ready{
  background:#111;
  color:#fff;
}

.collection.ready i{
  background:#c8a15a;
}

.socials{
  margin:43px auto 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  animation:fadeUp .8s .55s both;
}

.socials a{
  width:62px;
  height:62px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#111;
  text-decoration:none;
  transition:.3s ease;
}

.socials a:hover{
  background:#111;
  color:#fff;
  border-color:#111;
  transform:translateY(-2px);
}

.instagram{
  font-size:35px;
  line-height:1;
}

.vk{
  font-size:19px;
  font-weight:600;
}

.pinterest{
  font:38px Georgia,serif;
}

.separator{
  width:1px;
  height:45px;
  background:var(--gold);
  opacity:.75;
}

.footer{
  position:absolute;
  z-index:5;
  bottom:0;
  left:4.2vw;
  right:4.2vw;
  height:58px;
  border-top:1px solid #dedede;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#9b9b9b;
  font-size:7px;
  letter-spacing:.25em;
}

@keyframes brandReveal{
  0%{opacity:0;transform:translateY(18px);letter-spacing:.65em}
  100%{opacity:1;transform:translateY(0);letter-spacing:normal}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:650px){
  .header{
    height:68px;
    padding:0 24px;
  }

  .brand-name{display:none}
  .mark{font-size:32px}

  .center{
    width:90vw;
    transform:translate(-50%,-49%);
  }

  .big-mark{
    font-size:68px;
    width:75px;
    margin-bottom:24px;
  }

  .title{
    font-size:17px;
    letter-spacing:.27em;
    padding-left:.27em;
  }

  .loading-area{
    margin-top:45px;
    margin-bottom:30px;
    width:72vw;
  }

  .collection{
    width:82vw;
    height:64px;
    padding:0 22px;
  }

  .collection span{
    font-size:9px;
    letter-spacing:.13em;
  }

  .collection b{font-size:22px}

  .socials{
    margin-top:32px;
    gap:22px;
  }

  .socials a{
    width:52px;
    height:52px;
  }

  .separator{height:36px}
  .instagram{font-size:28px}
  .pinterest{font-size:31px}

  .footer{
    height:45px;
  }
}