/* =========================
   CONTACT
   ========================= */

body.page-contact{background:#ffffff;color:#121212;overflow-x:hidden}
body.page-contact .brand{color:#121212}
body.page-contact .hb span{background:#121212}
body.page-contact .menu-btn{color:#121212}
body.page-contact .brand-img{filter:brightness(0);opacity:1}
body.page-contact.menu-open .brand-img{filter:brightness(0) invert(1);opacity:.95}
body.page-contact.menu-open .hb span{background:#f3f4f6}

body.page-contact .ink__backdrop{background:rgba(0,0,0,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.page-contact .ink__drawer{background:#000;border-right:1px solid rgba(255,255,255,.08)}
body.page-contact .ink__drawer::before{display:none}
body.page-contact .ink__ghost{display:none}
body.page-contact .ink__list a{color:rgba(243,244,246,.95);opacity:.72}
body.page-contact .ink__list li:hover>a{opacity:1;transform:translateX(6px)}
body.page-contact .ink__list .current-menu-item>a,
body.page-contact .ink__list .current_page_item>a{opacity:1}
body.page-contact .ink__corner{color:rgba(243,244,246,.55)}
body.page-contact .ink__social{color:rgba(243,244,246,.70)}
body.page-contact .ink__sociallink{color:rgba(243,244,246,.70)}
body.page-contact .ink__sociallink:hover{color:rgba(243,244,246,.95)}

/* ========================= ANİMASYONLAR ========================= */
@keyframes contactFadeUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

.contact-info   {animation:contactFadeUp .65s cubic-bezier(.2,.8,.2,1) .10s both}
.contact-form-wrap{animation:contactFadeUp .65s cubic-bezier(.2,.8,.2,1) .22s both}

@media(prefers-reduced-motion:reduce){
  .contact-info,.contact-form-wrap{animation:none!important;opacity:1!important;transform:none!important}
}

/* ========================= LAYOUT ========================= */
.contact-main{min-height:100vh}

.contact{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:140px 28px 84px;
}

.contact-shell{
  width:min(900px,100%);
  display:flex;
  justify-content:center;
}

.contact-stack{
  position:relative;
  width:100%;
  isolation:isolate;
}

/* Dekoratif katman — about-layer3 ile aynı dil */
.contact-layer{
  position:absolute;
  inset:-60px -80px;
  border-radius:40px;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(70% 70% at 15% 50%,rgba(0,0,0,.04),rgba(0,0,0,0) 80%);
}

/* ========================= PANEL ========================= */
.contact-panel{
  position:relative;
  z-index:2;
  width:100%;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.60);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 2px 6px rgba(0,0,0,.04),
    0 8px 28px rgba(0,0,0,.07),
    0 24px 56px rgba(0,0,0,.05);
  display:grid;
  grid-template-columns:1fr 1.4fr;
}

/* Noise dokusu — about-panel ile aynı */
.contact-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:25;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ========================= SOL — BİLGİ ========================= */
.contact-info{
  padding:48px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  background:linear-gradient(135deg,rgba(0,0,0,.03) 0%,rgba(0,0,0,0) 60%);
  border-right:1px solid rgba(0,0,0,.06);
  position:relative;
  z-index:2;
}

.contact-label{
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(18,18,18,.38);
  margin-bottom:14px;
  display:block;
}

.contact-title{
  margin:0 0 16px;
  font-family:"Inter",ui-sans-serif,system-ui;
  font-weight:850;
  font-size:clamp(28px,3vw,42px);
  letter-spacing:.06em;
  line-height:1.15;
  color:#121212;
  text-transform:uppercase;
}

.contact-sub{
  font-size:13px;
  line-height:1.65;
  color:rgba(18,18,18,.58);
  margin:0 0 28px;
}

.contact-direct{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.07);
}

/* Sosyal ikonlar */
.contact-socials{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.07);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.contact-social-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.08);
  color:rgba(18,18,18,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}

.contact-social-btn:hover{
  background:#121212;
  border-color:#121212;
  color:#fff;
  transform:translateY(-2px);
}

/* ========================= SAĞ — FORM ========================= */
.contact-form-wrap{
  padding:48px 40px;
  position:relative;
  z-index:2;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.cf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.cf-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.cf-label{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(18,18,18,.45);
}

.cf-input{
  width:100%;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.09);
  border-radius:10px;
  padding:11px 14px;
  font-size:13.5px;
  font-family:inherit;
  color:#121212;
  outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance:none;
}

.cf-input::placeholder{
  color:rgba(18,18,18,.28);
}

.cf-input:focus{
  border-color:rgba(0,0,0,.28);
  background:rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}

.cf-input.is-error{
  border-color:rgba(200,50,50,.5);
  background:rgba(200,50,50,.03);
}

.cf-textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.55;
}

/* ========================= FOOTER / BUTON ========================= */
.cf-footer{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:4px;
}

.cf-btn{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  border-radius:40px;
  border:none;
  background:#121212;
  color:#fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s, transform .2s, opacity .2s;
  flex-shrink:0;
}

.cf-btn:hover{
  background:#333;
  transform:translateY(-1px);
}

.cf-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
}

.cf-status{
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(18,18,18,.5);
  margin:0;
  transition:opacity .3s;
}

.cf-status.is-success{color:#2a7a4f}
.cf-status.is-error  {color:#b83232}

/* ========================= RESPONSIVE ========================= */
@media(max-width:860px){
  .contact{padding:120px 18px 64px}

  /* Topbar: beyaz arka plan — içerik scroll edilince altına girmesin */
  body.page-contact .site-head{
    background:#ffffff;
    border-bottom:1px solid rgba(0,0,0,.07);
    transition:background .25s ease, border-color .25s ease;
  }

  /* Menü açıkken topbar siyah — ink__drawer zaten siyah */
  body.page-contact.menu-open .site-head{
    background:#000000;
    border-bottom-color:rgba(255,255,255,.08);
  }

  .contact-panel{
    grid-template-columns:1fr;
  }

  .contact-info{
    padding:36px 28px 28px;
    border-right:none;
    border-bottom:1px solid rgba(0,0,0,.06);
    background:linear-gradient(180deg,rgba(0,0,0,.025) 0%,rgba(0,0,0,0) 100%);
  }

  .contact-direct{
    padding-top:18px;
    margin-top:18px;
  }

  .contact-form-wrap{
    padding:28px 28px 36px;
  }
}

@media(max-width:520px){
  .contact{padding:100px 14px 48px}

  .contact-panel{border-radius:18px}
  .contact-title{font-size:28px}

  .cf-row{
    grid-template-columns:1fr;
  }

  .contact-info{padding:28px 20px 22px}
  .contact-form-wrap{padding:22px 20px 28px}
}

@media(max-width:420px){
  body.page-contact.menu-open .hb span{background:#fff !important}
}