body {
      background: #f8f9fa;
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }

    .tab-menu .list-group-item {
      cursor: pointer;
      border-left: 5px solid transparent;
    }

    .tab-menu .list-group-item.active {
      border-left: 5px solid #0b02d3;
      background-color: #ebeaeaff;
      color: #00e7ff;
      font-weight: 600;
    }

    /* ===== ÖZET (Preview) İÇİ FERAHLIK ===== */
    #configurator .cfg-preview__body {
      padding: 16px 16px 18px !important;
    }

    #configurator .cfg-preview__body .cfg-title {
      font-size: 15px !important;
      font-weight: 900 !important;
      margin-bottom: 10px !important;
    }

    /* satırlar arası boşluk + iki kolon hissi */
    #configurator .cfg-summary {
      display: grid !important;
      gap: 10px !important;
    }

    #configurator .cfg-row {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      padding: 10px 12px !important;
      border: 1px solid rgba(0, 0, 0, .06) !important;
      background: rgba(255, 255, 255, .85) !important;
      border-radius: 12px !important;
    }

    #configurator .cfg-row span.text-muted {
      font-size: 13px !important;
      line-height: 1.3 !important;
      color: rgba(0, 0, 0, .58) !important;
    }

    #configurator .cfg-row strong {
      font-size: 13.5px !important;
      line-height: 1.3 !important;
      font-weight: 900 !important;
      color: rgba(0, 0, 0, .82) !important;
      text-align: right !important;
    }

    /* ayraç daha yumuşak */
    #configurator .cfg-summary hr {
      margin: 10px 0 !important;
      border-color: rgba(0, 0, 0, .10) !important;
    }

    /* fiyat satırını vurgula */
    #configurator .cfg-row:has(#sumPrice) {
      background: rgba(84, 119, 146, .08) !important;
      border-color: rgba(84, 119, 146, .18) !important;
    }

    /* dip not daha okunur */
    #configurator .cfg-preview__body .text-muted {
      margin-top: 10px !important;
      font-size: 12.5px !important;
      line-height: 1.55 !important;
      color: rgba(0, 0, 0, .55) !important;
    }

        /* =========================
   CONFIGURATOR OVERRIDE CSS
   (en alta koy)
========================= */

      #configurator .cfg-title {
        font-weight: 800;
        font-size: 14px;
        margin-bottom: 10px;
        letter-spacing: .2px;
      }

      /* GRID: Eklem 2 kolon, El 3 kolon */
      #configurator .cfg-grid {
        display: grid;
        gap: 12px;
      }

      #configurator .cfg-block:not(#handBlock) .cfg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #configurator #handBlock .cfg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      /* Mobil kırılım */
      @media (max-width: 576px) {
        #configurator .cfg-block:not(#handBlock) .cfg-grid {
          grid-template-columns: 1fr;
        }

        #configurator #handBlock .cfg-grid {
          grid-template-columns: 1fr;
        }
      }

      /* CARD */
      #configurator .cfg-card {
        position: relative;
        cursor: pointer;
        user-select: none;
        margin: 0;
        display: block;
      }

      /* Radio/Checkbox default görünümü kapat */
      #configurator .cfg-card>input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      /* Card inner */
      #configurator .cfg-card__inner {
        border: 1px solid rgba(0, 0, 0, .10);
        background: rgba(255, 255, 255, .92);
        border-radius: 16px;
        padding: 14px 14px;
        transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
        min-height: 86px;
        /* el tipi kartlarında hizalama */
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      #configurator .cfg-card__head {
        font-weight: 800;
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 4px;
      }

      #configurator .cfg-card__sub {
        font-size: 13px;
        color: rgba(0, 0, 0, .60);
        line-height: 1.4;
      }

      /* Hover */
      #configurator .cfg-card:hover .cfg-card__inner {
        transform: translateY(-1px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .08);
      }

      /* Seçili kart */
      #configurator .cfg-card>input:checked+.cfg-card__inner {
        border-color: rgba(84, 119, 146, .65);
        /* #547792 tonu */
        background: rgba(84, 119, 146, .08);
        box-shadow: 0 18px 44px rgba(84, 119, 146, .18);
      }

      /* Seçili kartın sol üst işareti (mini) */
      #configurator .cfg-card>input:checked+.cfg-card__inner::after {
        content: "✓";
        position: absolute;
        top: 10px;
        right: 12px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 12px;
        font-weight: 900;
        color: #fff;
        background: #547792;
        box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
      }

      /* Eklem kartındaki mini listeyi daha kurumsal göster */
      #configurator .cfg-mini {
        margin-top: 10px !important;
        color: rgba(0, 0, 0, .65);
      }

      #configurator .cfg-mini li {
        margin: 2px 0;
      }

      /* Özellik listesi (cfg-feature) zaten vardı; biraz toparlayalım */
      #configurator .cfg-features {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      #configurator .cfg-feature {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 12px 12px;
        border: 1px solid rgba(0, 0, 0, .10);
        border-radius: 16px;
        background: rgba(255, 255, 255, .92);
        transition: transform .12s ease, box-shadow .12s ease;
      }

      #configurator .cfg-feature:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .08);
      }

      #configurator .cfg-feature input {
        margin-top: 4px;
      }

      #configurator .cfg-feature--rule {
        border-color: rgba(255, 193, 7, .40);
        background: rgba(255, 193, 7, .08);
      }

      #configurator .cfg-feature--disabled {
        opacity: .6;
        cursor: not-allowed;
      }

      #configurator .cfg-feature--disabled:hover {
        transform: none;
        box-shadow: none;
      }

      /* Preview görseli daha premium: */
      #configurator .cfg-preview {
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .07);
        background: rgba(255, 255, 255, .92);
      }

      #configurator .cfg-preview__media {
        background: rgba(0, 0, 0, .03);
        padding: 14px;
      }

      #configurator #previewImg {
        width: 100%;
        border-radius: 14px;
        display: block;
        transition: opacity .18s ease;
      }

      /* ====== HARD OVERRIDE (en alta koy) ====== */
      #configurator .cfg-block {
        margin-bottom: 18px !important;
      }

      #configurator .cfg-title {
        font-weight: 800 !important;
        font-size: 14px !important;
        margin: 0 0 10px !important;
      }

      /* GRID */
      #configurator .cfg-grid {
        display: grid !important;
        gap: 12px !important;
        width: 100% !important;
      }

      #configurator #handBlock .cfg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      #configurator .cfg-block:not(#handBlock) .cfg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      @media (max-width: 576px) {
        #configurator .cfg-grid {
          grid-template-columns: 1fr !important;
        }
      }

      /* CARD LABEL */
      #configurator label.cfg-card {
        display: block !important;
        margin: 0 !important;
        cursor: pointer !important;
        position: relative !important;
      }

      /* RADIO'YU TAMAMEN GİZLE (görünen yuvarlaklar için) */
      #configurator label.cfg-card>input {
        position: absolute !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 1px !important;
        height: 1px !important;
        left: -9999px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
      }

      /* CARD BODY */
      #configurator .cfg-card__inner {
        position: relative !important;
        border: 1px solid rgba(0, 0, 0, .10) !important;
        background: #fff !important;
        border-radius: 16px !important;
        padding: 14px 14px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .06) !important;
        transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease !important;
        min-height: 92px !important;
      }

      /* Hand kartları daha kompakt ve ortalı */
      #configurator #handBlock .cfg-card__inner {
        min-height: 78px !important;
        text-align: center !important;
      }

      #configurator .cfg-card__head {
        font-weight: 800 !important;
        font-size: 14px !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
      }

      #configurator .cfg-card__sub {
        font-size: 13px !important;
        color: rgba(0, 0, 0, .62) !important;
        line-height: 1.4 !important;
      }

      /* Hover */
      #configurator label.cfg-card:hover .cfg-card__inner {
        transform: translateY(-1px) !important;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .08) !important;
      }

      /* Selected */
      #configurator label.cfg-card>input:checked+.cfg-card__inner {
        border-color: rgba(84, 119, 146, .75) !important;
        /* #547792 */
        background: rgba(84, 119, 146, .08) !important;
        box-shadow: 0 22px 54px rgba(84, 119, 146, .18) !important;
      }

      /* Selected check badge */
      #configurator label.cfg-card>input:checked+.cfg-card__inner::after {
        content: "✓" !important;
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 999px !important;
        display: grid !important;
        place-items: center !important;
        background: #547792 !important;
        color: #fff !important;
        font-size: 12px !important;
        font-weight: 900 !important;
      }

      /* Mini bullet listesini premium yap (nokta yerine check) */
      #configurator .cfg-mini {
        list-style: none !important;
        padding: 10px 0 0 !important;
        margin: 8px 0 0 !important;
        border-top: 1px dashed rgba(0, 0, 0, .10) !important;
        color: rgba(0, 0, 0, .64) !important;
        font-size: 13px !important;
      }

      #configurator .cfg-mini li {
        position: relative !important;
        padding-left: 18px !important;
        margin: 4px 0 !important;
      }

      #configurator .cfg-mini li::before {
        content: "✓" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        color: #547792 !important;
        font-weight: 900 !important;
      }

      /* ===== ALTTA ÇIKAN UYARI (BOTTOM SHEET / TOAST) ===== */
      #configurator .cfg-bottom-alert {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 18px !important;
        z-index: 9999 !important;

        width: min(760px, calc(100vw - 24px)) !important;
        border-radius: 18px !important;
        padding: 14px 14px !important;

        background: rgba(255, 248, 220, .98) !important;
        border: 1px solid rgba(255, 193, 7, .45) !important;
        box-shadow: 0 18px 60px rgba(0, 0, 0, .18) !important;
      }

      #configurator .cfg-bottom-alert__title {
        font-weight: 900 !important;
        margin-bottom: 6px !important;
      }

      #configurator .cfg-bottom-alert__text {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: rgba(0, 0, 0, .75) !important;
      }

      #configurator .cfg-bottom-alert__actions {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin-top: 12px !important;
      }

      /* görünüm animasyonu */
      #configurator .cfg-bottom-alert {
        animation: cfgSlideUp .18s ease both;
      }

      @keyframes cfgSlideUp {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }
/* --- Alt uyarı barı (fixed) --- */
.cfg-bottom-alert{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 9999;
  width: min(980px, calc(100% - 24px));
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  display: grid;
  gap: 10px;
}

.cfg-bottom-alert__title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
}

.cfg-bottom-alert__text{
  font-size: 14px;
  line-height: 1.45;
}

.cfg-bottom-alert__actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* mobilde daha sıkı */
@media (max-width: 576px){
  .cfg-bottom-alert{
    bottom: 10px;
    padding: 12px;
  }
}

/* --- Toast fixed --- */
.cfg-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  background: rgba(16, 16, 16, .92);
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cfg-toast a{ color:#fff; text-decoration: underline; }