/* =========================================================
   MINI BOOTSTRAP (QT) — grid + utilities + modal (subset)
   Covers used classes:
   .container, .row, .col-md-*, .g-0, .g-3, .mt-3, .d-none,
   .modal(+parts), .btn-close
   ========================================================= */

:root{
  --mbp-container-pad: 12px;
  --mbp-container-max: 1180px; /* istersen var(--qt-wide-max) ile değiştir */
  --mbp-gutter-x: 24px;
  --mbp-gutter-y: 24px;
}

/* ---------- Container ---------- */
.container{
  width:100%;
  max-width:var(--mbp-container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--mbp-container-pad);
  padding-right:var(--mbp-container-pad);
}

/* ---------- Grid row/cols (Bootstrap-ish) ---------- */
.row{
  display:flex;
  flex-wrap:wrap;
  margin-left: calc(var(--mbp-gutter-x) * -0.5);
  margin-right: calc(var(--mbp-gutter-x) * -0.5);
  margin-top: calc(var(--mbp-gutter-y) * -1);
}

.row > *{
  box-sizing:border-box;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-left: calc(var(--mbp-gutter-x) * 0.5);
  padding-right: calc(var(--mbp-gutter-x) * 0.5);
  margin-top: var(--mbp-gutter-y);
}

/* md breakpoint ~ Bootstrap 768px */
@media (min-width: 768px){
  .col-md-4{ flex:0 0 auto; width:33.333333%; }
  .col-md-6{ flex:0 0 auto; width:50%; }
  .col-md-8{ flex:0 0 auto; width:66.666667%; }
  .col-md-12{ flex:0 0 auto; width:100%; }
}

/* ---------- Gap utilities ---------- */
.g-0{
  --mbp-gutter-x: 0px;
  --mbp-gutter-y: 0px;
}
.g-3{
  --mbp-gutter-x: 16px;
  --mbp-gutter-y: 16px;
}

/* ---------- Spacing utilities (only what you use) ---------- */
.mt-3{ margin-top: 1rem !important; }

/* ---------- Display utility ---------- */
.d-none{ display:none !important; }

/* =========================================================
   Modal subset (CSS only)
   NOTE: Requires your own JS OR Bootstrap JS for open/close.
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  z-index:1050;
  display:none;
  overflow:hidden;
  outline:0;
}

.modal.show{ display:block; }

.modal.fade .modal-dialog{
  transform: translateY(10px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.modal.show .modal-dialog{
  transform: translateY(0);
  opacity: 1;
}

.modal-dialog{
  position:relative;
  width:auto;
  margin: 1rem;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height: calc(100% - 2rem);
}

@media (min-width: 576px){
  .modal-dialog{ margin: 1.75rem auto; min-height: calc(100% - 3.5rem); }
}

.modal-content{
  pointer-events:auto;
  width:min(560px, 100%);
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.22);
  overflow:hidden;
}

.modal-header,
.modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.modal-footer{
  border-bottom:0;
  border-top:1px solid rgba(15,23,42,.08);
  justify-content:flex-end;
}

.modal-title{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

.modal-body{
  padding:14px 16px;
}

/* Backdrop (bootstrap’te ayrı element) — basit çözüm:
   Eğer bootstrap JS kullanmayacaksan bir .modal-backdrop ekleyebilirsin.
*/
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index:1040;
  opacity:0;
  transition: opacity .18s ease;
}
.modal-backdrop.show{ opacity:1; }

/* Close button */
.btn-close{
  appearance:none;
  border:0;
  background:transparent;
  width:34px;
  height:34px;
  border-radius:10px;
  position:relative;
  cursor:pointer;
}
.btn-close:before,
.btn-close:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2px;
  background: rgba(15,23,42,.75);
  transform-origin:center;
}
.btn-close:before{ transform: translate(-50%,-50%) rotate(45deg); }
.btn-close:after { transform: translate(-50%,-50%) rotate(-45deg); }
.btn-close:hover{ background: rgba(15,23,42,.06); }