/* ============================
   EXPERIENCES SECTION (xp)
============================ */
.xp-container {
  padding: 1.5rem 0;
  color: #fff;
}

/* Title + Subtitle birlikte */
.xp-title {
  font-weight: 700;
  color: #fff;
}
.xp-title .xp-sub {
  display: block;
  font-size: .9rem;
  font-weight: 400;
  color: #bbb;
  margin-top: 7px;
}
.xp-alerts { margin-bottom: 1rem; }

/* ============================
   EXPERIENCE CARD
============================ */
.xp-card {
  background: linear-gradient(135deg, #D90404, #730707);
  border: none;
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  transition: box-shadow 0.2s ease, transform .12s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.32);
}
.xp-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.45); transform: translateY(-1px); }
.xp-drag { cursor: move; color: #fff; font-size: 1.25rem; min-width: 16px; }
.xp-info { flex: 1; min-width: 0; }
.xp-title-sm { margin: 0; font-weight: 700; color: #fff; display: flex; align-items: center; gap: .45rem; }
.xp-meta { font-size: .93rem; color: #fff; opacity: .95; }
.xp-card[draggable="false"] .xp-drag { opacity: .45; cursor: default; }

/* Kart içi aksiyonlar */
.xp-card .xp-actions { display: flex; gap: .35rem; align-items: center; }
.xp-card .xp-actions .btn{
  --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.85);
  --bs-btn-hover-color:#000; --bs-btn-hover-bg:#fff; --bs-btn-hover-border-color:#fff;
  --bs-btn-active-bg:#fff; --bs-btn-active-color:#000;
  border-radius: 12px; padding: .28rem .5rem; line-height: 1; border-width: 1px;
}

/* ============================
   HEADER BUTTONS (top actions)
============================ */
.xp-header{ position: relative; }
.xp-actions { display: flex; flex-wrap: wrap; gap: .5rem; overflow: visible; }

.xp-btn-red {
  background: linear-gradient(135deg, #D90404, #730707);
  color: #fff !important;
  border: none;
  border-radius: 30px;
  padding: .55rem 1.3rem;
  font-weight: 600;
  transition: all .2s ease;
  box-shadow: 0 6px 16px rgba(217,4,4,.18);
}
.xp-btn-red:hover { background: linear-gradient(135deg, #730707, #D90404); }

.xp-btn-white {
  border: 1px solid #fff;
  color: #fff !important;
  background: transparent;
  border-radius: 30px;
  padding: .55rem 1.3rem;
  font-weight: 600;
  transition: all .2s ease;
}
.xp-btn-white:hover { background: #fff; color: #000 !important; }

/* ============================
   MODAL
============================ */
.xp-modal .modal-content {
  background: linear-gradient(135deg, #0f0f0f, #1a1a1a) !important;
  color: #fff !important;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
}
.xp-modal .modal-header,
.xp-modal .modal-footer { border-color: #2a2a2a; }

/* Inputs */
.xp-input {
  background: #111 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
  min-height: 46px;
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
  margin-bottom: .85rem;
}
.xp-input:focus {
  border-color: #D90404 !important;
  box-shadow: 0 0 0 0.2rem rgba(217, 4, 4, 0.25);
  outline: none;
}
#xpDesc { min-height: 140px; }

/* Labels */
.form-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .35rem;
}
.form-label i { color: #D90404; font-size: 1rem; line-height: 1; }

/* Modal buttons */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.modal-footer .btn-secondary {
  background: #333; border: none; border-radius: 20px;
  padding: .45rem 1.2rem; color: #fff;
}
.modal-footer .btn-secondary:hover { background: #555; color: #fff; }
.modal-footer .xp-btn-red { padding: .5rem 1.5rem; font-weight: 600; }

/* ============================
   BOOTSTRAP-SELECT (Country) – Dark & Aligned
   (yalnızca bu formdaki selectpicker’a hedefleyelim)
============================ */
#xpCountry + .bootstrap-select>.dropdown-toggle {
  background:#111 !important;
  border:1px solid #333 !important;
  color:#fff !important;
  min-height:46px; height:46px;
  border-radius:10px;
  padding-left:44px;     /* flag/metin nefes alır */
  padding-right:38px;    /* caret için yer */
  line-height: 1.2;
}
#xpCountry + .bootstrap-select .filter-option {
  display:flex; align-items:center;
  padding-left:0;  /* üstte verdiğimiz 44px padding toggle’da */
}
#xpCountry + .bootstrap-select .filter-option .filter-option-inner,
#xpCountry + .bootstrap-select .filter-option .filter-option-inner-inner{
  color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* caret hizası (BS5 override) */
#xpCountry + .bootstrap-select>.dropdown-toggle::after{
  border-top-color:#fff;
  position:absolute; right:12px; top:50%;
  transform: translateY(-50%);
}

/* Menü */
#xpCountry + .bootstrap-select .dropdown-menu{
  background:#121212; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; overflow:hidden;
}
#xpCountry + .bootstrap-select .dropdown-menu .inner{
  max-height:240px;   /* scroll */
}
#xpCountry + .bootstrap-select .dropdown-item{
  color:#eee;
  display:flex; align-items:center; gap:.5rem;
}
#xpCountry + .bootstrap-select .dropdown-item .fi{
  transform: translateY(1px); /* flag dikey hizası */
}
#xpCountry + .bootstrap-select .dropdown-item:hover,
#xpCountry + .bootstrap-select .dropdown-item:focus{
  background:#1e1e1e; color:#fff;
}

/* Varsayılan select (fallback) de aynı yükseklikte kalsın */
select#xpCountry.xp-input {
  padding-left: 12px;
  padding-right: 38px;
  appearance: none;
  background-image: none;
}

/* ============================
   RESPONSIVE – Header actions fix
============================ */
@media (max-width: 991.98px){
  .xp-actions{ justify-content: flex-start; }
}
@media (max-width: 767.98px) {
  .xp-header{ position:relative; }
  .xp-actions{
    flex-wrap: wrap;            /* kaybolmasın, alt satıra geçsin */
    gap: .5rem;
    justify-content: flex-start;
    overflow: visible;
  }
  .xp-btn-red,
  .xp-btn-white {
    flex: 0 0 auto;
    white-space: nowrap;
    width: 100%;
    max-width: 320px;
    font-size: .9rem; padding: .45rem 1rem;
    text-align: center;
  }

  /* Selectpicker mobil dokunuş: toggle yüksekliği tutarlı */
  #xpCountry + .bootstrap-select>.dropdown-toggle{
    min-height:46px; height:46px;
  }
}