/* Bootstrap 5.2.2 + Bootstrap Icons — tema yalnız bootstrap-grid yüklüyor, form/buton/utility/ikon için gerekli. @import en üstte olmalı. */
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.2/font/bootstrap-icons.min.css");

/* ==========================================================
   DARK TEMA — tüm stiller .sb-contact altında kapsüllenmiştir;
   ContentBox / tema CSS'i ile çakışmaz.
   Renkleri aşağıdaki değişkenlerden değiştirin.
   (Bootstrap 5.2.2'de data-bs-theme olmadığı için form
   elemanları burada elle koyulaştırılmıştır.)
   ========================================================== */
.sb-contact{
  --sb-bg:#0e1317;           /* sayfa zemini */
  --sb-band:#0a0e11;         /* form/harita bandı zemini */
  --sb-surface:#161d23;      /* kart / panel zemini */
  --sb-surface-2:#1c252d;    /* input zemini, hover */
  --sb-border:#27323b;
  --sb-heading:#f3eee5;      /* başlıklar */
  --sb-text:#d5d9dd;
  --sb-muted:#8f9aa3;
  --sb-accent:#c9a46a;       /* vurgu (ikon, rozet, buton) */
  --sb-accent-hover:#d9b883;
  --sb-on-accent:#15120c;    /* vurgu rengi üstündeki yazı */
  color:var(--sb-text);
  background:var(--sb-bg);
}
.sb-contact .sb-eyebrow{
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sb-accent); font-weight:600;
}
.sb-contact .sb-title{ color:var(--sb-heading); font-weight:700; letter-spacing:-.01em; }
.sb-contact .sb-lead{ color:var(--sb-muted); max-width:46rem; }
.sb-contact .text-muted{ color:var(--sb-muted) !important; }

/* --- Lokasyon kartları --- */
.sb-contact .sb-loc{
  position:relative; height:100%; width:100%; text-align:left;
  background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:.75rem;
  padding:1.5rem; cursor:pointer;
  transition:border-color .2s, box-shadow .2s, transform .2s, background-color .2s;
}
.sb-contact .sb-loc:hover{ transform:translateY(-2px); border-color:#3a4752; box-shadow:0 .75rem 2rem rgba(0,0,0,.35); }
.sb-contact .sb-loc.active{
  border-color:var(--sb-accent);
  box-shadow:0 0 0 1px var(--sb-accent), 0 1rem 2.5rem rgba(0,0,0,.45);
}
.sb-contact .sb-loc:focus-visible{ outline:3px solid rgba(201,164,106,.55); outline-offset:2px; }
.sb-contact .sb-badge{
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:50rem;
  background:var(--sb-surface-2); color:var(--sb-text); border:1px solid var(--sb-border);
}
.sb-contact .sb-loc.is-hq .sb-badge{ background:var(--sb-accent); border-color:var(--sb-accent); color:var(--sb-on-accent); }
.sb-contact .sb-loc h3{ font-size:1.15rem; font-weight:700; color:var(--sb-heading); margin:.85rem 0 .15rem; }
.sb-contact .sb-city{ font-size:.85rem; color:var(--sb-muted); margin-bottom:1rem; }
.sb-contact .sb-list{ list-style:none; padding:0; margin:0; }
.sb-contact .sb-list li{ display:flex; gap:.75rem; padding:.45rem 0; font-size:.925rem; line-height:1.5; }
.sb-contact .sb-list i{ color:var(--sb-accent); font-size:1rem; line-height:1.5; flex:0 0 auto; }
.sb-contact .sb-list a{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; }
.sb-contact .sb-list a:hover{ color:var(--sb-heading); border-bottom-color:var(--sb-accent); }
.sb-contact .sb-route{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font-size:.85rem; font-weight:600; color:var(--sb-accent); text-decoration:none;
}
.sb-contact .sb-route:hover{ color:var(--sb-accent-hover); }

/* --- Form + harita --- */
.sb-contact .sb-band{ background:var(--sb-band); border-top:1px solid var(--sb-border); }
.sb-contact .sb-panel{ background:var(--sb-surface); border:1px solid var(--sb-border); border-radius:.75rem; padding:2rem; height:100%; }
.sb-contact .form-label{ font-size:.8rem; font-weight:600; color:var(--sb-heading); margin-bottom:.35rem; }
.sb-contact .form-control, .sb-contact .form-select{
  background-color:var(--sb-surface-2); color:var(--sb-heading);
  border-color:#36434e; border-radius:.5rem; padding:.7rem .9rem; font-size:.95rem;
  color-scheme:dark;
}
.sb-contact .form-select{
  padding-right:2.25rem;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9a46a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.sb-contact .form-select option{ background:var(--sb-surface); color:var(--sb-heading); }
.sb-contact .form-control::placeholder{ color:var(--sb-muted); }
.sb-contact .form-control:focus, .sb-contact .form-select:focus{
  background-color:var(--sb-surface-2); color:var(--sb-heading);
  border-color:var(--sb-accent); box-shadow:0 0 0 .2rem rgba(201,164,106,.2);
}
.sb-contact .form-control:-webkit-autofill{
  -webkit-text-fill-color:var(--sb-heading);
  box-shadow:0 0 0 1000px var(--sb-surface-2) inset;
}
.sb-contact .form-check-input{ background-color:var(--sb-surface-2); border-color:#44515c; }
.sb-contact .form-check-input:checked{ background-color:var(--sb-accent); border-color:var(--sb-accent); }
.sb-contact .form-check-input:focus{ border-color:var(--sb-accent); box-shadow:0 0 0 .2rem rgba(201,164,106,.2); }
.sb-contact .invalid-feedback{ color:#ff8f8f; }
.sb-contact .was-validated .form-control:invalid, .sb-contact .was-validated .form-select:invalid{ border-color:#e06c6c; }
.sb-contact .was-validated .form-control:valid, .sb-contact .was-validated .form-select:valid{ border-color:#4f9f7c; }
.sb-contact .was-validated .form-check-input:invalid ~ .form-check-label{ color:#ff8f8f; }
.sb-contact .was-validated .form-check-input:valid ~ .form-check-label{ color:var(--sb-text); }
.sb-contact .sb-btn{
  background:var(--sb-accent); border:1px solid var(--sb-accent); color:var(--sb-on-accent);
  padding:.8rem 1.75rem; border-radius:.5rem; font-weight:600;
}
.sb-contact .sb-btn:hover{ background:var(--sb-accent-hover); border-color:var(--sb-accent-hover); color:var(--sb-on-accent); }

.sb-contact .sb-map{ border-radius:.75rem; overflow:hidden; border:1px solid var(--sb-border); height:100%; min-height:420px; background:var(--sb-surface); display:flex; flex-direction:column; }
.sb-contact .sb-map-tabs{ display:flex; background:var(--sb-surface); border-bottom:1px solid var(--sb-border); }
.sb-contact .sb-map-tabs button{
  flex:1 1 0; border:0; background:transparent; padding:.85rem .5rem;
  font-size:.85rem; font-weight:600; color:var(--sb-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.sb-contact .sb-map-tabs button:hover{ color:var(--sb-text); }
.sb-contact .sb-map-tabs button.active{ color:var(--sb-heading); border-bottom-color:var(--sb-accent); }
.sb-contact .sb-map iframe{
  flex:1 1 auto; width:100%; border:0; min-height:360px;
  /* Google Maps embed'i koyu temaya yaklaştırır. Haritanın orijinal
     renklerde kalmasını isterseniz bu satırı silin. */
  filter:invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9);
}

.sb-contact .sb-hours{ border-top:1px dashed var(--sb-border); margin-top:1rem; padding-top:.75rem; }

@media (max-width:575.98px){
  .sb-contact .sb-panel{ padding:1.25rem; }
  .sb-contact .sb-map-tabs button{ font-size:.78rem; }
}

/* ==========================================================
   GRID DÜZELTMESİ — ContentBox içerik alanında cBox runtime CSS'i
   Bootstrap grid'ini (.row/.col-*) etkisizleştiriyor. Kolonları
   .sb-contact kapsamında zorla geri getiriyoruz.
   ========================================================== */
.sb-contact .row{ display:flex !important; flex-wrap:wrap !important; }
.sb-contact .row > *{ flex-shrink:0 !important; box-sizing:border-box !important; }
.sb-contact .col-12{ flex:0 0 auto !important; width:100% !important; }
@media (min-width:576px){ .sb-contact .col-sm-6{ flex:0 0 auto !important; width:50% !important; } }
@media (min-width:768px){
  .sb-contact .col-md-6{ flex:0 0 auto !important; width:50% !important; }
  .sb-contact .col-md-12{ flex:0 0 auto !important; width:100% !important; }
}
@media (min-width:992px){
  .sb-contact .col-lg-4{ flex:0 0 auto !important; width:33.3333% !important; }
  .sb-contact .col-lg-6{ flex:0 0 auto !important; width:50% !important; }
  .sb-contact .col-lg-8{ flex:0 0 auto !important; width:66.6667% !important; }
}
.sb-contact .form-control,
.sb-contact .form-select,
.sb-contact textarea.form-control{ width:100% !important; display:block !important; }

/* Form gönderim durum mesajı */
.sb-contact .sb-form-msg{ font-size:.9rem; font-weight:600; }
.sb-contact .sb-form-msg.is-ok{ color:#4f9f7c; }
.sb-contact .sb-form-msg.is-err{ color:#ff8f8f; }