/* ================================================================
   SPORT PRO — FORMA TASARLA ARACI TEMA KATMANI  ·  SÜRÜM 14
   ================================================================

   V6'DAN FARKI  (5 maddelik istek listesi)
   1. Yaka/model kartları: kalın çerçeve, yumuşak geçiş,
      üzerine gelince görsel hafif büyüyor.
   2. Açık panel artık neon yeşil — "şu an buradasın" çok net.
   3. Devam Et butonundaki kayma giderildi (sticky kaldırıldı).
   4. Renk kutuları ızgaraya alındı, kareler küçüldü.
   5. Adım göstergesi ok şeklinden hap şeklinde satıra döndü.
      Mobilde tek satır: pasif adımlar numara, aktif adım tam ad.

   V5'TEN FARKI
   1. Sıradaki panel sol kenarında neon şerit + "sıradaki"
      etiketiyle işaretleniyor. Diğerleri sakin kalıyor.
   2. Kapalı panellerin sağına aşağı ok eklendi.
   3. Özet ekranındaki oyuncu tablosu gizlendi; fiyat tablosunun
      altına teslimat satırı geldi.
   4. Toplu liste yapıştırma kutusu sportpro-panel.js ile geliyor.

   V4'TEN FARKI
   Mobilde oyuncu tablosu ve özet tabloları karta dönüştürüldü.
   Altı sütunlu tablo 380 piksele sığmıyordu; isim kutusuna
   "Oyu" yazısı sığıyordu. Artık her oyuncu tek kart, alanlar
   alt alta ve tam genişlikte. Masaüstünde hiçbir şey değişmiyor.

   V3'TEN FARKI
   1. İlerleme çubuğu ile FORMA grup etiketinin çakışması giderildi.
   2. Seçilen rengin karesi, aracın kendi açılır ok işaretiyle
      çakışmayacak şekilde sola alındı.
   3. Çorap panelindeki "ücretsiz" etiketi "isteğe bağlı" oldu.
      Logo ve sponsorda "ücretsiz" kalıyor.
   4. Devam Et butonu koyu lacivert + beyaz yazı. Neon artık
      sadece vurgu rengi (ilerleme çubuğu, tikler).
   5. Panel yükseklikleri, boşluklar, köşeler ve punto büyütüldü.

   KURULUM
   1. /beta/css/ klasörüne yükleyin (FTP'de İKİLİ mod).
   2. home.php'de eski sportpro-tema satırını silin, en sona:
        <link rel="stylesheet" type="text/css" href="css/sportpro-tema-v14.css?v=14">
   3. Script etiketlerinin en altına:
        <script src="js/sportpro-panel.js?v=6"></script>
   4. LiteSpeed + Cloudflare temizle, Ctrl+Shift+R.
================================================================ */

:root{
  --sp-gece: #16202E;
  --sp-gece-koyu: #0A1220;
  --sp-neon: #94E900;
  --sp-neon-koyu: #7BC400;
  --sp-neon-ink: #12210A;
  --sp-cizgi: #E3E8ED;
  --sp-cizgi-koyu: #C7D0D9;
  --sp-yuzey: #F2F5F7;
  --sp-metin: #3C4A60;
  --sp-metin-soluk: #8290A3;
  --sp-tamam: #5FA019;
}


/* ================================================================
   1. EL YAZISI BAŞLIK
   ================================================================ */
@font-face{
  font-family: "Bernadette Rough";
  src: local("Segoe UI Semibold"), local("Helvetica Neue"), local("Arial");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Bernadette";
  src: local("Segoe UI Semibold"), local("Helvetica Neue"), local("Arial");
  font-weight: normal; font-style: normal; font-display: swap;
}

.step_head,
h1, h2, h3, h4,
.page-title, .step-title{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: -.015em !important;
  color: var(--sp-gece) !important;
}
.step_head{
  font-size: 21px !important;
  margin: 16px 0 26px !important;
}

/* Başlığı kaldırmak isterseniz aşağıdaki satırın yorumunu açın:
   .step_head{ display:none !important; }
*/


/* ================================================================
   2. ARKA PLAN
   ================================================================ */
html, body,
.wrap, .wrapper, .main, .main-content, .content-wrap{
  background-image: none !important;
  background-color: var(--sp-yuzey) !important;
}


/* ================================================================
   3. ADIM GÖSTERGESİ
   ================================================================ */
.nav-wizard > li.active > a,
.nav-wizard > li.active > a:hover,
.nav-wizard > li.active > a:focus{
  background-color: var(--sp-gece) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.nav-wizard > li.active > a:after{ border-left-color: var(--sp-gece) !important; }
.nav-wizard > li.active > a .badge{
  background-color: var(--sp-neon) !important;
  color: var(--sp-neon-ink) !important;
}
.nav-wizard > li.done > a{
  background-color: #EDF6DE !important;
  background-image: none !important;
  color: var(--sp-gece) !important;
}
.nav-wizard > li.done > a:after{ border-left-color: #EDF6DE !important; }
.nav-wizard > li > a{
  background-color: #fff !important;
  background-image: none !important;
  color: var(--sp-metin) !important;
}
.nav-wizard > li > a:after{ border-left-color: #fff !important; }
.nav-wizard > li > a .badge{
  background-color: var(--sp-gece) !important;
  color: #fff !important;
}
.nav-wizard > li.disabled > a{ color: var(--sp-metin-soluk) !important; }


/* ================================================================
   4. ÖN / ARKA
   .newbtn dış kap — zemin almamalı.
   ================================================================ */
.btn-group.newbtn,
.newbtn{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 22px !important;
}
.btn-group.newbtn > .btn:not([style*="background"]){
  background: #fff !important;
  background-image: none !important;
  color: var(--sp-metin) !important;
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 8px !important;
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  transition: background .15s, color .15s !important;
}
.btn-group.newbtn > .btn.active:not([style*="background"]){
  background: var(--sp-gece) !important;
  color: #fff !important;
  border-color: var(--sp-gece) !important;
}


/* ================================================================
   5. RENK KUTULARI — DOKUNULMAZ
   ================================================================ */
color-picker [style*="background"],
[ng-style]{ background-image: none !important; }

color-picker .active,
.colors .active,
.color-picker .active{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sp-gece) !important;
  position: relative;
  z-index: 2;
}


/* ================================================================
   6. PANELLER
   ================================================================ */
.panel-group{ margin-bottom: 0 !important; }

.panel-group > .panel{
  position: relative !important;
  overflow: visible !important;
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  transition: border-color .15s !important;
}
.panel-group > .panel:hover{ border-color: var(--sp-cizgi-koyu) !important; }

.panel-group > .panel > .panel-heading{
  position: relative;
  background: #fff !important;
  background-image: none !important;
  filter: none !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 0 !important;
}
.panel-group > .panel > .panel-heading .panel-title{ margin: 0 !important; }
.panel-group > .panel > .panel-heading a{
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--sp-metin) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 15px 44px 15px 16px !important;
  text-decoration: none !important;
}

/* AÇIK PANEL */
.panel-group > .panel.panel-open > .panel-heading,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading{
  background: var(--sp-gece) !important;
  border-radius: 11px 11px 0 0 !important;
}
.panel-group > .panel.panel-open > .panel-heading a,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading a{
  color: #fff !important;
  font-weight: 700 !important;
}
.panel-group > .panel.panel-open,
.panel-group > .panel:has(.panel-collapse.in){
  border-color: var(--sp-gece) !important;
}

/* TAMAMLANMIŞ PANEL */
.panel-group > .panel.sp-done > .panel-heading a{
  color: var(--sp-metin-soluk) !important;
  padding-left: 42px !important;
}
.panel-group > .panel.sp-done > .panel-heading:before{
  content: "\e013";
  font-family: "Glyphicons Halflings";
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--sp-tamam);
  z-index: 3;
}
/* Seçilen rengin karesi. right:44px — aracın kendi açılır ok
   işareti sağ kenarda duruyor, çakışmasın diye sola alındı. */
.panel-group > .panel.sp-done[style*="--sp-dot"] > .panel-heading:after{
  content: "";
  position: absolute;
  right: 44px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--sp-dot);
  border: 1px solid rgba(0,0,0,.18);
  z-index: 3;
}
.panel-group > .panel.sp-done.panel-open > .panel-heading a,
.panel-group > .panel.sp-done:has(.panel-collapse.in) > .panel-heading a{
  color: #fff !important;
}
.panel-group > .panel.sp-done.panel-open > .panel-heading:after,
.panel-group > .panel.sp-done:has(.panel-collapse.in) > .panel-heading:after{
  display: none;
}

.panel-group > .panel .panel-body{
  background: #fff !important;
  background-image: none !important;
  border-top: none !important;
  border-radius: 0 0 11px 11px !important;
  padding: 16px !important;
}


/* ================================================================
   7. GRUP BAŞLIKLARI
   Sıra: 1 ana renk · 2 desen · 3 şort rengi · 4 şort modeli ·
   5 şort deseni · 6 çorap · 7 göğüs logosu · 8 sponsor ·
   9 sırt numarası
   ================================================================ */
.panel-group > .panel:nth-child(1),
.panel-group > .panel:nth-child(3),
.panel-group > .panel:nth-child(6),
.panel-group > .panel:nth-child(9){
  margin-top: 30px !important;
}

.panel-group > .panel:nth-child(1):before,
.panel-group > .panel:nth-child(3):before,
.panel-group > .panel:nth-child(6):before,
.panel-group > .panel:nth-child(9):before{
  position: absolute;
  top: -21px; left: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--sp-metin-soluk);
}
.panel-group > .panel:nth-child(1):before{ content: "FORMA"; }
.panel-group > .panel:nth-child(3):before{ content: "ŞORT"; }
.panel-group > .panel:nth-child(6):before{ content: "İSTERSEN EKLE"; }
.panel-group > .panel:nth-child(9):before{ content: "FORMA ARKASI"; }

/* Etiketler: çorap isteğe bağlı, logolar ücretsiz */
.panel-group > .panel:nth-child(6) > .panel-heading a:after,
.panel-group > .panel:nth-child(7) > .panel-heading a:after,
.panel-group > .panel:nth-child(8) > .panel-heading a:after{
  float: right;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-metin-soluk);
  letter-spacing: .03em;
  margin-right: 4px;
}
.panel-group > .panel:nth-child(6) > .panel-heading a:after{ content: "isteğe bağlı"; }
.panel-group > .panel:nth-child(7) > .panel-heading a:after,
.panel-group > .panel:nth-child(8) > .panel-heading a:after{ content: "ücretsiz"; }

.panel-group > .panel:nth-child(6).sp-done > .panel-heading a:after,
.panel-group > .panel:nth-child(7).sp-done > .panel-heading a:after,
.panel-group > .panel:nth-child(8).sp-done > .panel-heading a:after,
.panel-group > .panel:nth-child(6).panel-open > .panel-heading a:after,
.panel-group > .panel:nth-child(7).panel-open > .panel-heading a:after,
.panel-group > .panel:nth-child(8).panel-open > .panel-heading a:after{
  content: "";
}


/* ================================================================
   8. İLERLEME ÇUBUĞU (JS ekler)
   ================================================================ */
.sp-progress{
  margin: 0 0 26px !important;
}
.sp-progress-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sp-progress-top span:first-child{
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-metin);
}
.sp-progress-label{
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-gece);
}
.sp-progress-track{
  height: 8px;
  background: #E1E7EC;
  border-radius: 4px;
  overflow: hidden;
}
.sp-progress-fill{
  height: 100%;
  width: 0;
  background: var(--sp-neon);
  border-radius: 4px;
  transition: width .35s ease;
}

/* Sonraki adım butonu (JS ekler) */
.sp-next{
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--sp-cizgi);
  border-radius: 10px;
  color: var(--sp-gece);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sp-next:hover{
  border-color: var(--sp-gece);
  background: var(--sp-yuzey);
}


/* ================================================================
   9. DEVAM ET — ALTA SABİT, KOYU LACİVERT
   Neon zemin şerit gibi görünüyordu; buton olarak okunmuyordu.
   ================================================================ */
a.cont,
a.cont.buttonhover,
a.cont:hover,
a.cont:focus{
  position: sticky !important;
  bottom: 12px !important;
  z-index: 20 !important;
  display: block !important;
  margin-top: 20px !important;
  padding: 15px !important;
  background: var(--sp-gece) !important;
  background-image: none !important;
  filter: none !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: 0 6px 18px -8px rgba(18,23,30,.55) !important;
  transition: background .15s !important;
}
a.cont:hover{ background: var(--sp-gece-koyu) !important; }


/* ================================================================
   10. DİĞER BUTONLAR
   ================================================================ */
.btn-new:not([style*="background"]),
.buttonhover:not(.cont):not([style*="background"]){
  background: var(--sp-neon) !important;
  background-image: none !important;
  filter: none !important;
  border: none !important;
  color: var(--sp-neon-ink) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  text-shadow: none !important;
}
.boxes button:not([style*="background"]),
.boxes .btn:not([style*="background"]){
  background: var(--sp-neon) !important;
  background-image: none !important;
  color: var(--sp-neon-ink) !important;
  font-weight: 700 !important;
  border: none !important;
}
.boxes button:not([style*="background"]):hover,
.boxes .btn:not([style*="background"]):hover{
  background: var(--sp-neon-koyu) !important;
}


/* ================================================================
   11. SEÇİM KARTLARI (yaka ve model ekranı)
   ================================================================ */
.boxes{
  background: #fff !important;
  background-image: none !important;
  filter: none !important;
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
.boxes:hover{
  border-color: var(--sp-neon) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(18,23,30,.35) !important;
  text-decoration: none !important;
}
.boxes .header,
.boxes h3{
  color: var(--sp-gece) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -.015em !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 8px 0 4px !important;
}
.boxes .description{
  color: var(--sp-gece) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 !important;
}
.boxes .meta{
  color: var(--sp-metin-soluk) !important;
  font-size: 12px !important;
  margin: 2px 0 10px !important;
}


/* ================================================================
   12. TABLOLAR, BAĞLANTILAR, ANAHTARLAR
   ================================================================ */
.table-striped thead,
table.tablehead.table.table-striped.table-xs.table-condensed thead,
table.table.table-striped.table-hover thead{
  background: var(--sp-gece) !important;
  background-image: none !important;
  border-color: var(--sp-gece) !important;
  color: #fff !important;
}
table.tablehead.table.table-striped.table-xs.table-condensed,
table.tablehead.table.table-striped.table-condensed.text-center.summary-player-table,
table.table.table-striped.table-hover{
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.text-info{ color: var(--sp-gece) !important; }

a{ color: var(--sp-gece) !important; }
a:hover{ color: var(--sp-neon-koyu) !important; }

.drop-box{ border-color: var(--sp-cizgi) !important; border-radius: 10px !important; }
.drop-box:hover{ border-color: var(--sp-gece) !important; }
.simple-switch-input:checked + .simple-switch{
  background: var(--sp-neon) !important;
  box-shadow: inset 0 0 0 15px var(--sp-neon) !important;
}


/* ================================================================
   13. MOBİL
   ================================================================ */
@media (max-width: 767px){
  .nav-wizard.nav-justified > li > a{
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
  }
  .step_head{ font-size: 17px !important; margin: 10px 0 18px !important; }
  .panel-group > .panel > .panel-heading a{ font-size: 14px !important; padding: 14px 40px 14px 14px !important; }
  .boxes .header, .boxes h3{ font-size: 14px !important; min-height: 52px !important; }
  .boxes button, .boxes .btn{ font-size: 14px !important; padding: 12px 10px !important; }
}


/* ================================================================
   14. MOBİLDE TABLOLAR — KART GÖRÜNÜMÜ
   ----------------------------------------------------------------
   Üç tablo etkileniyor:
   - Oyuncu bilgileri tablosu (payment) : 6 sütun
   - Özet oyuncu tablosu (summary)      : 5 sütun
   - Fiyat tablosu (summary)            : 4 sütun

   Sütun etiketleri :before ile yazılıyor, tablo yapısına
   dokunulmuyor. Masaüstünde bu blok hiç çalışmaz.
   ================================================================ */
@media (max-width: 767px){

  .table.table-striped.table-hover thead,
  .summary-player-table thead,
  .tablehead.table-xs thead{
    display: none !important;
  }

  .table.table-striped.table-hover,
  .table.table-striped.table-hover tbody,
  .table.table-striped.table-hover tfoot,
  .summary-player-table,
  .summary-player-table tbody,
  .summary-player-table tfoot,
  .tablehead.table-xs,
  .tablehead.table-xs tbody,
  .tablehead.table-xs tfoot{
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Her satır bir kart */
  .table.table-striped.table-hover tbody > tr,
  .summary-player-table tbody > tr,
  .tablehead.table-xs tbody > tr{
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--sp-cizgi) !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 6px 14px 12px !important;
  }

  .table.table-striped.table-hover tbody > tr > td,
  .summary-player-table tbody > tr > td,
  .tablehead.table-xs tbody > tr > td{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    border: none !important;
    border-top: 1px solid #EEF2F5 !important;
    padding: 10px 0 !important;
    text-align: left !important;
  }

  .table.table-striped.table-hover tbody > tr > td:before,
  .summary-player-table tbody > tr > td:before,
  .tablehead.table-xs tbody > tr > td:before{
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-metin-soluk);
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Girdiler tam genişlik — satır içi max-width'leri eziyoruz */
  .table.table-striped.table-hover td input.form-control,
  .table.table-striped.table-hover td select.form-control{
    max-width: none !important;
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  .table.table-striped.table-hover td > input.form-control,
  .table.table-striped.table-hover td > select.form-control{
    flex: 1 1 auto !important;
  }

  /* --- Oyuncu bilgileri tablosu --- */
  /* 1: sıra no → kart başlığı */
  .table.table-striped.table-hover tbody > tr > td:nth-child(1){
    display: block !important;
    border-top: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sp-gece) !important;
    letter-spacing: .04em !important;
    padding: 6px 0 4px !important;
  }
  .table.table-striped.table-hover tbody > tr > td:nth-child(1):before{
    content: "OYUNCU ";
    font-weight: 700;
    color: var(--sp-gece);
  }
  .table.table-striped.table-hover tbody > tr > td:nth-child(2):before{ content: "Sırt ismi"; }
  .table.table-striped.table-hover tbody > tr > td:nth-child(3):before{ content: "Numara"; }
  .table.table-striped.table-hover tbody > tr > td:nth-child(4):before{ content: "Kaleci"; }
  .table.table-striped.table-hover tbody > tr > td:nth-child(5):before{ content: "Beden"; }

  /* Kaleci hücresi: satır içindeki iç row/label düzenini sadeleştir */
  .table.table-striped.table-hover tbody > tr > td:nth-child(4) .row{
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .table.table-striped.table-hover tbody > tr > td:nth-child(4) label{
    font-size: 0 !important;   /* "Kaleci Yap" yazısı :before ile zaten var */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Sil: küçük, sağda, kırmızı metin */
  .table.table-striped.table-hover tbody > tr > td:nth-child(6){
    justify-content: flex-end !important;
    padding-bottom: 2px !important;
  }
  .table.table-striped.table-hover tbody > tr > td:nth-child(6) .btn{
    background: transparent !important;
    border: none !important;
    color: #B3261E !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
  }

  /* Alt satır: oyuncu sayısı + Oyuncu Ekle */
  .table.table-striped.table-hover tfoot > tr{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    border: none !important;
    padding: 4px 0 0 !important;
  }
  .table.table-striped.table-hover tfoot th{
    border: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--sp-metin-soluk) !important;
    font-weight: 600 !important;
  }
  .table.table-striped.table-hover tfoot th:empty{ display: none !important; }
  .table.table-striped.table-hover tfoot .btn{
    width: 100% !important;
    background: #fff !important;
    border: 1px solid var(--sp-gece) !important;
    border-radius: 10px !important;
    color: var(--sp-gece) !important;
    font-weight: 700 !important;
    padding: 13px !important;
  }

  /* --- Özet oyuncu tablosu --- */
  .summary-player-table tbody > tr > td:nth-child(1){
    display: block !important;
    border-top: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sp-gece) !important;
    padding: 6px 0 4px !important;
  }
  .summary-player-table tbody > tr > td:nth-child(1):before{ content: "OYUNCU "; }
  .summary-player-table tbody > tr > td:nth-child(2):before{ content: "Oyuncu adı"; }
  .summary-player-table tbody > tr > td:nth-child(3):before{ content: "Sırt numarası"; }
  .summary-player-table tbody > tr > td:nth-child(4):before{ content: "Kaleci"; }
  .summary-player-table tbody > tr > td:nth-child(5):before{ content: "Forma ölçüsü"; }
  .summary-player-table tbody > tr > td{ text-align: left !important; }

  /* --- Fiyat tablosu --- */
  .tablehead.table-xs tbody > tr > td:nth-child(1):before{ content: "Ürün"; }
  .tablehead.table-xs tbody > tr > td:nth-child(2):before{ content: "Adet"; }
  .tablehead.table-xs tbody > tr > td:nth-child(3):before{ content: "Renk"; }
  .tablehead.table-xs tbody > tr > td:nth-child(4):before{ content: "Fiyat"; }
  .tablehead.table-xs tbody > tr > td:nth-child(4){
    font-weight: 700 !important;
    color: var(--sp-gece) !important;
  }
  .tablehead.table-xs tfoot{
    display: block !important;
    background: #fff !important;
    border: 1px solid var(--sp-cizgi) !important;
    border-radius: 12px !important;
    padding: 6px 14px 10px !important;
  }
  .tablehead.table-xs tfoot > tr{
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    border: none !important;
  }
  .tablehead.table-xs tfoot th{
    border: none !important;
    padding: 8px 0 !important;
    text-align: left !important;
    font-size: 14px !important;
  }
  .tablehead.table-xs tfoot > tr:last-child th{
    font-size: 17px !important;
    color: var(--sp-gece) !important;
  }

  /* Sipariş butonları: tam genişlik, koyu lacivert */
  .btn-new.btn-labeled,
  button[type="submit"].btn-new{
    width: 100% !important;
    margin: 16px 0 0 !important;
    left: 0 !important;
    float: none !important;
    background: var(--sp-gece) !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    font-size: 16px !important;
  }
}


/* ================================================================
   15. KAPALI PANELDE AŞAĞI OK
   Kapalı satırlarda tıklanabilirlik belli olmuyordu.
   ================================================================ */
.panel-group > .panel > .panel-heading .panel-title a:before{
  content: "\e114";
  font-family: "Glyphicons Halflings";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--sp-metin-soluk);
  z-index: 3;
}
.panel-group > .panel.panel-open > .panel-heading .panel-title a:before,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading .panel-title a:before{
  content: "\e113";
  color: #fff;
}

/* "isteğe bağlı" / "ücretsiz" etiketleri okla çakışmasın */
.panel-group > .panel:nth-child(6) > .panel-heading a:after,
.panel-group > .panel:nth-child(7) > .panel-heading a:after,
.panel-group > .panel:nth-child(8) > .panel-heading a:after{
  margin-right: 22px !important;
}


/* ================================================================
   16. SIRADAKİ PANEL
   Sınıfı JS ekliyor: kalan ilk zorunlu, tamamlanmamış panel.
   Tek bir satır vurgulanıyor — dokuz satır birden değil.
   ================================================================ */
.panel-group > .panel.sp-siradaki{
  border-color: var(--sp-cizgi-koyu) !important;
  border-left: 3px solid var(--sp-neon) !important;
}
.panel-group > .panel.sp-siradaki > .panel-heading a{
  color: var(--sp-gece) !important;
  font-weight: 700 !important;
}
.panel-group > .panel.sp-siradaki > .panel-heading a:after{
  content: "sıradaki" !important;
  float: right;
  margin-right: 22px !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sp-neon-koyu);
}


/* ================================================================
   17. ÖZET EKRANI SADELEŞTİRME
   Oyuncu tablosu ve başlığı gizlendi — müşteri o bilgileri bir
   önceki adımda zaten girdi, burada tekrar göstermek ekranı
   şişiriyordu.
   ================================================================ */
.summary-player-table,
form > h4.text-info:nth-of-type(3){
  display: none !important;
}

/* Fiyat tablosunun altına teslimat satırı */
.tablehead.table-xs:after{
  content: "Kargo ücretsiz · Baskılar dahil · 7 iş gününde teslim";
  display: block;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: #EDF6DE;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-gece);
  text-align: center;
}


/* ================================================================
   18. TOPLU LİSTE KUTUSU (JS ekler)
   ================================================================ */
.sp-toplu{
  background: #fff;
  border: 1px solid var(--sp-cizgi);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 16px;
}
.sp-toplu-baslik{
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-gece);
  margin: 0 0 4px;
}
.sp-toplu-not{
  font-size: 13px;
  color: var(--sp-metin-soluk);
  margin: 0 0 10px;
  line-height: 1.5;
}
.sp-toplu textarea{
  width: 100%;
  min-height: 110px;
  border: 1px solid var(--sp-cizgi);
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--sp-metin);
  resize: vertical;
}
.sp-toplu textarea:focus{
  outline: none;
  border-color: var(--sp-gece);
}
.sp-toplu-btn{
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  background: var(--sp-gece);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.sp-toplu-btn:hover{ background: var(--sp-gece-koyu); }
.sp-toplu-sonuc{
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-tamam);
}
.sp-toplu-sonuc.hata{ color: #B3261E; }


/* ================================================================
   ================================================================
   SÜRÜM 7 — 5 MADDELİK İSTEK LİSTESİ
   Bu blok dosyanın sonunda; üstteki kuralları bilerek eziyor.
   ================================================================
   ================================================================ */


/* ================================================================
   19. ADIM GÖSTERGESİ — YENİ TASARIM   (istek 5)
   ----------------------------------------------------------------
   Ok şeklindeki sekmeler kaldırıldı. Yerine hap şeklinde tek
   satır. Mobilde beş satıra bölünüp ekranın üçte birini yiyordu;
   artık pasif adımlar sadece numara, aktif adım tam ad.
   ================================================================ */
.nav-wizard{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  background: transparent !important;
  border: none !important;
}
.nav-wizard > li{
  float: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
/* Ok uçlarını tamamen kaldır */
.nav-wizard > li > a:after,
.nav-wizard > li > a:before,
.nav-wizard > li.active > a:after,
.nav-wizard > li.done > a:after{
  display: none !important;
  content: none !important;
  border: none !important;
}
.nav-wizard > li > a{
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--sp-cizgi) !important;
  color: var(--sp-metin-soluk) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background .18s, color .18s, border-color .18s !important;
}
.nav-wizard > li.active > a{
  background: var(--sp-gece) !important;
  border-color: var(--sp-gece) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.nav-wizard > li.done > a{
  background: #fff !important;
  border-color: var(--sp-neon) !important;
  color: var(--sp-gece) !important;
}
.nav-wizard > li > a i,
.nav-wizard > li > a .glyphicon,
.nav-wizard > li > a img,
.nav-wizard > li > a svg{
  display: none !important;   /* ikonlar dar ekranda yer yiyor */
}

@media (max-width: 767px){
  .nav-wizard{ gap: 5px !important; margin-bottom: 18px !important; }
  /* Pasif adımlar: sadece numara */
  .nav-wizard > li > a{
    font-size: 0 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .nav-wizard > li:nth-child(1) > a:before{ content: "1"; }
  .nav-wizard > li:nth-child(2) > a:before{ content: "2"; }
  .nav-wizard > li:nth-child(3) > a:before{ content: "3"; }
  .nav-wizard > li:nth-child(4) > a:before{ content: "4"; }
  .nav-wizard > li:nth-child(5) > a:before{ content: "5"; }
  .nav-wizard > li > a:before{
    display: block !important;
    content: "";
    font-size: 14px !important;
    font-weight: 700 !important;
    border: none !important;
  }
  /* Aktif adım: tam ad görünsün */
  .nav-wizard > li.active > a{
    font-size: 13px !important;
    width: auto !important;
    padding: 0 16px !important;
  }
  .nav-wizard > li.active > a:before{ display: none !important; }
}


/* ================================================================
   20. AÇIK PANEL — CANLI RENK   (istek 2)
   ----------------------------------------------------------------
   Koyu lacivert başlık "şu an buradasın" hissi vermiyordu.
   Açık panel artık neon yeşil zemin + koyu yazı. Kontrast 11.9,
   okunurluk sorunu yok.
   ================================================================ */
.panel-group > .panel.panel-open > .panel-heading,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading{
  background: var(--sp-neon) !important;
  background-image: none !important;
}
.panel-group > .panel.panel-open > .panel-heading a,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading a,
.panel-group > .panel.sp-done.panel-open > .panel-heading a,
.panel-group > .panel.sp-done:has(.panel-collapse.in) > .panel-heading a{
  color: var(--sp-neon-ink) !important;
  font-weight: 800 !important;
}
.panel-group > .panel.panel-open > .panel-heading .panel-title a:before,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading .panel-title a:before{
  color: var(--sp-neon-ink) !important;
}
.panel-group > .panel.panel-open,
.panel-group > .panel:has(.panel-collapse.in){
  border-color: var(--sp-neon) !important;
  border-width: 2px !important;
  box-shadow: 0 8px 22px -14px rgba(18,23,30,.45) !important;
}

/* Kapalı paneller biraz daha belirgin */
.panel-group > .panel{
  border-width: 1.5px !important;
}
.panel-group > .panel:hover{
  border-color: var(--sp-gece) !important;
}


/* ================================================================
   22. DEVAM ET   (istek 3)
   ----------------------------------------------------------------
   sticky yüzünden içeriğin üstüne binip kayıyordu. Kaldırıldı.
   ================================================================ */
a.cont,
a.cont.buttonhover,
a.cont:hover,
a.cont:focus{
  position: static !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  margin: 22px 0 8px !important;
  padding: 16px !important;
  background: var(--sp-gece) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  box-shadow: 0 10px 24px -14px rgba(18,23,30,.7) !important;
  transition: background .16s, transform .16s !important;
}
a.cont:hover{
  background: var(--sp-gece-koyu) !important;
  transform: translateY(-1px);
}
a.cont:active{ transform: translateY(0); }


/* ================================================================
   23. YAKA VE MODEL KARTLARI   (istek 1)
   ----------------------------------------------------------------
   Kalın çerçeve, yumuşak geçiş, üzerine gelince görsel hafif
   büyüyor ve kart yükseliyor.
   ================================================================ */
.boxes{
  display: block !important;
  border: 2px solid var(--sp-cizgi) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.boxes img{
  transition: transform .3s ease !important;
  display: block !important;
  margin: auto !important;
}
.boxes:hover{
  border-color: var(--sp-gece) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 38px -20px rgba(18,23,30,.5) !important;
}
.boxes:hover img{
  transform: scale(1.05) !important;
}
.boxes:active{
  transform: translateY(-1px) !important;
}
.boxes p{ margin-bottom: 0 !important; }
.boxes .btn{
  border-radius: 0 !important;
  padding: 14px !important;
  font-size: 15px !important;
}

/* Dokunmatik ekranda hover yok — kart yine de belirgin dursun */
@media (hover: none){
  .boxes{ box-shadow: 0 6px 16px -12px rgba(18,23,30,.4) !important; }
  .boxes:hover{ transform: none !important; }
  .boxes:hover img{ transform: none !important; }
}


/* ================================================================
   24. DEVAM ET — HİZA DÜZELTMESİ
   ----------------------------------------------------------------
   Buton, üstündeki panellerle aynı hizada başlayıp sağa taşıyordu.
   Sebep: width:100% + iç boşluk, kutu modeli border-box'a
   sabitlenmediği için toplam genişliği aşıyordu.
   ================================================================ */
a.cont,
a.cont.buttonhover{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
a.cont .glyphicon{
  top: 0 !important;
  margin: 0 !important;
}


/* ================================================================
   25. SİPARİŞ FORMU — TESLİMAT BİLGİLERİ
   ----------------------------------------------------------------
   Turkuaz çerçeveler kaldırıldı, alanlar büyüdü, etiketler
   okunur hale geldi, odaklanınca alan koyu laciverte dönüyor.
   ================================================================ */
form .padding,
form > .padding{
  background: #fff !important;
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-bottom: 8px !important;
}

form h4.text-info{
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--sp-gece) !important;
  margin: 26px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
form h4.text-info:first-of-type{ margin-top: 4px !important; }

form .form-group{
  margin-bottom: 18px !important;
}
form .form-group label{
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sp-metin) !important;
  margin-bottom: 7px !important;
  letter-spacing: .01em !important;
}
form .form-group .form-control,
form .form-group input.form-control,
form .form-group textarea.form-control{
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: var(--sp-gece) !important;
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
form .form-group textarea.form-control{
  min-height: 96px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}
form .form-group .form-control:focus{
  border-color: var(--sp-gece) !important;
  box-shadow: 0 0 0 3px rgba(22,32,46,.10) !important;
  outline: none !important;
}
form .form-group .form-control::placeholder{
  color: #A9B3C0 !important;
}

/* Dış turkuaz çerçeveyi sustur */
form .last,
form > div[class*="column"]{
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Siparişi Ver butonu */
form button[type="submit"]{
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 24px auto 8px !important;
  left: 0 !important;
  float: none !important;
  padding: 16px !important;
  background: var(--sp-gece) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 24px -14px rgba(18,23,30,.7) !important;
}
form button[type="submit"]:hover{
  background: var(--sp-gece-koyu) !important;
}

@media (max-width: 767px){
  form .padding{ padding: 16px !important; }
  form h4.text-info{ font-size: 16px !important; margin: 20px 0 10px !important; }
  form .form-group .form-control{ font-size: 16px !important; }  /* iOS yakınlaştırmasını önler */
  form button[type="submit"]{ max-width: none !important; }
}


/* ================================================================
   ================================================================
   SÜRÜM 9
   26 · Sipariş formu — modern giriş alanları
   27 · Adım bandının üstüne boşluk
   28 · Adım bandı ile başlık arası daraltıldı, başlık yenilendi
   ================================================================
   ================================================================ */


/* ================================================================
   26. SİPARİŞ FORMU — MODERN GİRİŞ ALANLARI
   ----------------------------------------------------------------
   Üç durum var ve üçü de gözle ayırt ediliyor:
     boş      → gri çerçeve
     yazarken → neon çerçeve + neon halka (odak)
     dolu     → koyu çerçeve, alan doldurulmuş görünüyor
   ================================================================ */

/* Dıştaki turkuaz çerçeveyi tamamen kaldır */
.last,
.last.ten,
div[class*="wide"][class*="column"]{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

form .padding{
  background: #fff !important;
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 16px !important;
  padding: 26px !important;
  box-shadow: 0 2px 10px -6px rgba(18,23,30,.18) !important;
}

form .form-group{ margin-bottom: 20px !important; }

form .form-group label{
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--sp-metin-soluk) !important;
  margin-bottom: 8px !important;
  transition: color .15s !important;
}

form .form-group .form-control{
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--sp-gece) !important;
  background: #FAFBFC !important;
  background-image: none !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color .16s, box-shadow .16s, background .16s !important;
}

form .form-group .form-control:hover{
  border-color: var(--sp-cizgi-koyu) !important;
  background: #fff !important;
}

/* YAZARKEN — neon çerçeve ve halka */
form .form-group .form-control:focus{
  background: #fff !important;
  border-color: var(--sp-neon) !important;
  box-shadow: 0 0 0 4px rgba(148,233,0,.22) !important;
  outline: none !important;
}
/* Odaklanılan alanın etiketi de koyulaşır */
form .form-group:focus-within label{
  color: var(--sp-gece) !important;
}

/* DOLU — boş olandan ayrılsın */
form .form-group .form-control:not(:placeholder-shown){
  background: #fff !important;
  border-color: var(--sp-cizgi-koyu) !important;
}

form .form-group textarea.form-control{
  min-height: 104px !important;
  line-height: 1.55 !important;
  resize: vertical !important;
}

form .form-group .form-control::placeholder{
  color: #AEB8C4 !important;
  font-weight: 400 !important;
}

/* TC Kimlik alanındaki sayı okları gizlensin */
form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}
form input[type="number"]{ -moz-appearance: textfield !important; }

/* Bölüm başlıkları */
form h4.text-info{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sp-gece) !important;
  margin: 30px 0 14px !important;
}
form h4.text-info:before{
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--sp-neon);
  flex: 0 0 auto;
}
form h4.text-info:first-of-type{ margin-top: 6px !important; }

@media (max-width: 767px){
  form .padding{ padding: 18px !important; border-radius: 14px !important; }
  form .form-group{ margin-bottom: 16px !important; }
  form .form-group .form-control{
    font-size: 16px !important;      /* iOS yakınlaştırmasını önler */
    min-height: 48px !important;
  }
}


/* ================================================================
   27. ADIM BANDININ ÜSTÜNE BOŞLUK   (istek 2)
   Bant, sitenin koyu üst şeridine yapışık duruyordu.
   ================================================================ */
.nav-wizard{
  margin: 20px 0 14px !important;
}
@media (max-width: 767px){
  .nav-wizard{ margin: 14px 0 12px !important; }
}


/* ================================================================
   28. ADIM BAŞLIĞI   (istek 3)
   ----------------------------------------------------------------
   Bant ile başlık arasındaki boşluk daraltıldı. Başlık küçüldü,
   altına kısa bir neon çizgi geldi — süs değil, gözü kartlara
   doğru aşağı yönlendiriyor.
   ================================================================ */
.step_head{
  position: relative !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--sp-gece) !important;
  text-align: center !important;
  margin: 0 0 26px !important;
  padding-bottom: 12px !important;
}
.step_head:after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--sp-neon);
}

@media (max-width: 767px){
  .step_head{
    font-size: 16px !important;
    margin: 0 0 20px !important;
    padding-bottom: 10px !important;
  }
  .step_head:after{ width: 36px; }
}


/* ================================================================
   ================================================================
   SÜRÜM 10
   29 · Çift ok sorunu
   30 · ÜCRETSİZ etiketleri belirginleşti
   31 · Forma önizlemesi ekranda sabit kalıyor (kaydırma sorunu)
   32 · Toplu liste kutusu bilgi kutusuna dönüştü
   33 · Buton hover'larında yazı kaybolması
   ================================================================
   ================================================================ */


/* ================================================================
   29. ÇİFT OK
   ----------------------------------------------------------------
   Aracın kendi açılır oku (.panel-title:after) ile bizim
   eklediğimiz ok üst üste biniyordu. Aracınki susturuldu,
   bizimki kaldı — açıkken yukarı, kapalıyken aşağı bakıyor.
   ================================================================ */
.panel-group > .panel .panel-title:after,
.panel-group > .panel .panel-title > a:after,
.panel-group > .panel .panel-title > a > span:after,
.panel-group > .panel.passed .panel-title > a > span:after{
  display: none !important;
  content: none !important;
}


/* ================================================================
   30. ÜCRETSİZ ETİKETLERİ   (müşteri paralı sanıyor)
   ----------------------------------------------------------------
   Küçük gri yazı fark edilmiyordu. Artık kırmızı, kalın ve
   çerçeveli rozet. Forma arkası ismi/numarası da ücretsiz
   olduğu için 9. panele de eklendi.
   ================================================================ */
.panel-group > .panel:nth-child(6) > .panel-heading a:after,
.panel-group > .panel:nth-child(7) > .panel-heading a:after,
.panel-group > .panel:nth-child(8) > .panel-heading a:after,
.panel-group > .panel:nth-child(9) > .panel-heading a:after{
  float: right !important;
  margin-right: 26px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: #FDE8E6 !important;
  border: 1px solid #F3B5AE !important;
  color: #C62828 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.panel-group > .panel:nth-child(6) > .panel-heading a:after{ content: "isteğe bağlı" !important; }
.panel-group > .panel:nth-child(7) > .panel-heading a:after,
.panel-group > .panel:nth-child(8) > .panel-heading a:after,
.panel-group > .panel:nth-child(9) > .panel-heading a:after{ content: "ücretsiz" !important; }

/* Çorap isteğe bağlı — kırmızı değil, nötr dursun */
.panel-group > .panel:nth-child(6) > .panel-heading a:after{
  background: #EEF2F5 !important;
  border-color: var(--sp-cizgi-koyu) !important;
  color: var(--sp-metin) !important;
}

/* Panel açıkken rozet gizlenir */
.panel-group > .panel.panel-open > .panel-heading a:after,
.panel-group > .panel:has(.panel-collapse.in) > .panel-heading a:after{
  content: "" !important;
  display: none !important;
}


/* ================================================================
   31. FORMA ÖNİZLEMESİ EKRANDA SABİT   (kaydırma sorunu)
   ----------------------------------------------------------------
   Müşteri sağdaki panellerde aşağı indikçe forma görüntüden
   çıkıyor, seçtiği rengin sonucunu göremiyordu. Önizleme
   sütunu artık ekranda asılı kalıyor; paneller altında
   kayarken forma hep görünür.
   ================================================================ */
.col-md-8:has(#pixi-scene){
  position: sticky !important;
  top: 12px !important;
  align-self: flex-start !important;
  z-index: 4 !important;
}

@media (max-width: 767px){
  /* Mobilde önizleme üstte asılı kalır, yüksekliği sınırlanır */
  .col-md-8:has(#pixi-scene){
    top: 0 !important;
    background: var(--sp-yuzey) !important;
    padding-bottom: 8px !important;
    box-shadow: 0 10px 16px -14px rgba(18,23,30,.5) !important;
  }
  #pixi-scene canvas{
    max-height: 300px !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}


/* ================================================================
   32. TOPLU LİSTE KUTUSU — BİLGİ KUTUSU GÖRÜNÜMÜ
   ================================================================ */
.sp-toplu{
  position: relative !important;
  background: #F7FCEC !important;
  border: 1px solid #CBE79A !important;
  border-left: 4px solid var(--sp-neon) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  margin: 0 0 22px !important;
  box-shadow: 0 2px 12px -8px rgba(18,23,30,.25) !important;
}
.sp-toplu-baslik{
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--sp-gece) !important;
  margin: 0 0 6px !important;
}
.sp-toplu-not{
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--sp-metin) !important;
  margin: 0 0 14px !important;
}
.sp-toplu textarea{
  background: #fff !important;
  border: 1.5px solid #CBE79A !important;
  border-radius: 12px !important;
  min-height: 120px !important;
  font-size: 15px !important;
  padding: 14px !important;
}
.sp-toplu textarea:focus{
  border-color: var(--sp-neon) !important;
  box-shadow: 0 0 0 4px rgba(148,233,0,.22) !important;
  outline: none !important;
}
.sp-toplu-btn{
  border-radius: 12px !important;
  padding: 15px !important;
  font-size: 15px !important;
}
.sp-toplu-btn:hover{ color: #fff !important; }


/* ================================================================
   33. BUTON HOVER — YAZI KAYBOLMASI
   ----------------------------------------------------------------
   Üzerine gelince zemin koyulaşıyor ama yazı rengini Bootstrap
   kendi kuralıyla değiştirip koyuya çeviriyordu; koyu zemin
   üstünde koyu yazı görünmüyordu.
   ================================================================ */
form button[type="submit"],
form button[type="submit"]:hover,
form button[type="submit"]:focus,
form button[type="submit"]:active,
a.cont,
a.cont:hover,
a.cont:focus,
a.cont:active{
  color: #fff !important;
  text-shadow: none !important;
}
form button[type="submit"]:hover .glyphicon,
a.cont:hover .glyphicon{ color: #fff !important; }


/* ================================================================
   ================================================================
   SÜRÜM 21 — RENK SEÇİCİ "A · SIKI IZGARA"  (DOĞRU SEÇİCİ)
   ----------------------------------------------------------------
   NEDEN ÖNCEKİ SÜRÜMLER TUTMADI
   color-picker bileşeni DOM'da kendi etiketiyle kalmıyor; kendini
   şuna dönüştürüyor:

     <div class="btn-group colors" data-toggle="buttons">
       <label class="btn btn-primary" ng-style="{backgroundColor: color.hex}">

   Yani sayfada "color-picker" diye bir eleman yok. Ona yazılan
   bütün kurallar sessizce boşa gidiyordu — hata da vermiyordu.

   Doğru hedef: .colors kabı ve içindeki label.btn kutuları.
   Panel gövdesine hiç dokunulmuyor, bu yüzden .field sarmalayıcılı
   paneller (Şort Rengi, Şort Deseni, Çoraplar) de aynı düzene
   giriyor ve v7'deki kayma sorunu tekrarlanamıyor.
   ================================================================
   ================================================================ */

.colors,
.btn-group.colors{
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  float: none !important;
  vertical-align: top !important;
}

.colors > label.btn,
.colors > .btn{
  display: block !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  transition: transform .14s ease !important;
}

.colors > label.btn:hover,
.colors > .btn:hover{
  transform: scale(1.14) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Seçili renk: içeri beyaz boşluk, dışına koyu halka */
.colors > label.btn.active,
.colors > .btn.active{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sp-gece) !important;
  transform: scale(1.06) !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Bootstrap'in btn-group iç köşe düzeltmelerini iptal et */
.colors > .btn:first-child,
.colors > .btn:last-child,
.colors > .btn:not(:first-child):not(:last-child){
  border-radius: 50% !important;
  margin-left: 0 !important;
}

/* .field sarmalayıcısı ızgarayı bozmasın */
.panel-body > .field{
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
}

@media (max-width: 767px){
  .colors,
  .btn-group.colors{
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 4px !important;
  }
}


/* ----------------------------------------------------------------
   BAŞLIKTA SEÇİLEN RENK
   Nokta + renk adı. Nokta mevcut JS ile çalışıyor; adı yazmak
   için sportpro-panel-v9.js gerekiyor. JS yoksa sadece nokta
   görünür, düzen bozulmaz.
   ---------------------------------------------------------------- */
.sp-renk-ad{
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-metin);
  z-index: 4;
  pointer-events: none;
}
.sp-renk-ad i{
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2);
  flex: 0 0 auto;
}

/* Ad varsa eski renk karesi gizlensin, ikisi üst üste binmesin */
.panel-group > .panel > .panel-heading:has(.sp-renk-ad):after{
  display: none !important;
}
/* Panel açıkken ad da gizlenir, başlık ferah kalsın */
.panel-group > .panel.panel-open .sp-renk-ad,
.panel-group > .panel:has(.panel-collapse.in) .sp-renk-ad{
  display: none;
}




/* ================================================================
   ================================================================
   SÜRÜM 15
   34 · Göğüs logosu — "2 · ÖNCE YÜKLEME" düzeni
   35 · Sponsor logosu bölümü baştan tasarlandı
   ================================================================
   ================================================================ */


/* ================================================================
   34. GÖĞÜS LOGOSU — ÖNCE YÜKLEME, SONRA HAZIR LOGOLAR
   ----------------------------------------------------------------
   Araçta bu iki bölüm ayrı sekmelerde duruyor: "Sol Göğüs"te hazır
   kütüphane, "Sağ Göğüs"te yükleme. Sekme başlıkları gizlenip her
   iki bölüm de aynı anda gösteriliyor, sıraları CSS ile çevriliyor.

   ÖNEMLİ: Sekmeler aslında logonun hangi göğse basılacağını
   belirliyor. İkisi aynı ekranda göründüğü için bölüm başlıklarına
   konumu yazdım — yoksa müşteri logonun nereye gideceğini bilemez.
   ================================================================ */

/* --- Hazır logo ızgarası ---
   :has(> .logo-container) ŞART. Sponsor panelindeki yazı alanının
   kabı da "logo-library" sınıfını taşıyor; bu daraltma olmadan
   oradaki yazı tipi butonları da ızgaraya giriyor ve dağılıyor. */
.logo-library:has(> .logo-container){
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}
.logo-library > .logo-container{
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 10px !important;
  background: #fff !important;
  background-image: none !important;   /* damalı şeffaflık zemini kalksın */
  overflow: hidden !important;
  transition: border-color .15s, transform .15s !important;
}
.logo-library > .logo-container:hover{
  border-color: var(--sp-gece) !important;
  transform: translateY(-2px) !important;
}
.logo-library > .logo-container.active{
  border-color: var(--sp-gece) !important;
  box-shadow: 0 0 0 3px rgba(148,233,0,.45) !important;
}
.logo-library > .logo-container img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.logo-library > .logo-container.no-logo{
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--sp-metin-soluk) !important;
  text-align: center !important;
  border-style: dashed !important;
}

/* --- Yükleme alanı --- */
.drop-box{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 130px !important;
  padding: 22px 16px !important;
  border: 2px dashed var(--sp-neon) !important;
  border-radius: 14px !important;
  background-color: #F7FCEC !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color .16s, border-color .16s, transform .16s !important;
}
.drop-box:hover{
  background-color: #EEF9DA !important;
  border-color: var(--sp-neon-koyu) !important;
  transform: translateY(-2px) !important;
}
.drop-box.dragover{ background-color: #E4F5C4 !important; }
.drop-box > span{
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sp-gece) !important;
  line-height: 1.5 !important;
}
.drop-box > span:before{
  content: "\e025";
  font-family: "Glyphicons Halflings";
  display: block;
  font-size: 22px;
  color: var(--sp-tamam);
  margin-bottom: 8px;
  font-weight: normal;
}
.drop-box > span:after{
  content: "Sürükle ya da tıkla · PNG, JPG";
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-metin-soluk);
}

/* Sürükleme bilgi kutusu sadeleşsin */
.field div[uib-alert]{
  background: transparent !important;
  border: none !important;
  color: var(--sp-metin-soluk) !important;
  font-size: 12px !important;
  padding: 0 0 10px !important;
  margin: 0 !important;
}


/* ================================================================
   35. SPONSOR LOGOSU BÖLÜMÜ
   ----------------------------------------------------------------
   Üç parçadan oluşuyor: yazı/logo seçimi, sponsor yazısı alanı,
   yazı tipi seçimi. Üçü de dağınıktı.
   ================================================================ */

/* --- Yazı / Logo seçimi: ikiye bölünmüş tek şerit --- */
.btn-group.row{
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: none !important;
}
.btn-group.row > .btn{
  flex: 1 1 0 !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 11px 8px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 10px !important;
  color: var(--sp-metin) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
.btn-group.row > .btn.active{
  background: var(--sp-gece) !important;
  border-color: var(--sp-gece) !important;
  color: #fff !important;
}

/* --- Sponsor yazısı alanı --- */
textarea.sp-text{
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 14px !important;
  padding: 13px 15px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--sp-gece) !important;
  background: #fff !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  resize: none !important;
}
textarea.sp-text:focus{
  border-color: var(--sp-neon) !important;
  box-shadow: 0 0 0 4px rgba(148,233,0,.22) !important;
  outline: none !important;
}
textarea.sp-text::placeholder{
  font-weight: 500 !important;
  color: #AEB8C4 !important;
}

/* --- Yazı tipi seçimi ---
   Sponsor panelindeki kap da "logo-library" sınıfını taşıyor,
   bu yüzden logo ızgarası kuralı ona uygulanmıyor (yukarıdaki
   :has daraltması). Burada kendi düzenini alıyor. */
.logo-library:not(:has(> .logo-container)){
  display: block !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
}

@media (max-width: 767px){
  .logo-library:has(> .logo-container){
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 5px !important;
  }
  .drop-box{ min-height: 116px !important; }
  font-picker{ grid-template-columns: repeat(2, 1fr) !important; }
}


/* ================================================================
   36. YENİLENMİŞ GÖĞÜS LOGOSU BÖLÜMÜ
   ----------------------------------------------------------------
   color.html içindeki logo bölümü yeniden yazıldıysa bu kurallar
   devreye girer. Yazılmadıysa hiçbir şey bozulmaz — bu sınıflar
   eski yapıda mevcut değil, kurallar boşa gider.
   ================================================================ */

.sp-etiket{
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--sp-metin-soluk) !important;
  margin: 0 0 8px !important;
}
.sp-etiket-ayrik{
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--sp-cizgi) !important;
}

.sp-yukleme-sar{
  position: relative !important;
}
.sp-yukleme-sar .cancel{
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid var(--sp-cizgi) !important;
  border-radius: 50% !important;
  color: #B3261E !important;
  font-size: 11px !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.sp-ipucu{
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--sp-metin-soluk) !important;
  margin: 12px 0 0 !important;
}

/* Devre dışıyken (anahtar kapalı) alan soluk dursun */
.sp-logo-alan.disabled{
  opacity: .45 !important;
  pointer-events: none !important;
}


/* ================================================================
   37. SPONSOR BÖLÜMÜ
   ----------------------------------------------------------------
   font-picker directive'i replace:true kullanıyor; <font-picker>
   etiketi DOM'da kalmıyor, yerine şablonun kök div'i geçiyor.
   Bu yüzden hedef sp-font-picker sınıfı — o sınıf yenilenmiş
   angular.fontpicker.js ile geliyor.
   ================================================================ */

/* Yazı / Logo ikili şeridi */
.btn-group.sp-ikili{
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  background: transparent !important;
  border: none !important;
}
.btn-group.sp-ikili > .btn{
  flex: 1 1 0 !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 11px 8px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 10px !important;
  color: var(--sp-metin) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
.btn-group.sp-ikili > .btn.active{
  background: var(--sp-gece) !important;
  border-color: var(--sp-gece) !important;
  color: #fff !important;
}

/* Sponsor adı alanı */
textarea.sp-text{
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-height: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  color: var(--sp-gece) !important;
  background: #fff !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  resize: none !important;
  overflow: hidden !important;
  transition: border-color .15s, box-shadow .15s !important;
}
textarea.sp-text:focus{
  border-color: var(--sp-neon) !important;
  box-shadow: 0 0 0 4px rgba(148,233,0,.22) !important;
  outline: none !important;
}
textarea.sp-text::placeholder{
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #AEB8C4 !important;
}

/* Yazı tipi düğmeleri */
.sp-font-picker{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
}
.sp-font-picker > .sp-font-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  float: none !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 11px !important;
  color: var(--sp-gece) !important;
  text-align: left !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
}
.sp-font-picker > .sp-font-btn:hover{
  border-color: var(--sp-gece) !important;
}
.sp-font-picker > .sp-font-btn.active{
  background: var(--sp-gece) !important;
  border-color: var(--sp-gece) !important;
  color: #fff !important;
}

/* Sol taraf: sponsor adının o fontla önizlemesi */
.sp-font-ornek{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Sağ taraf: fontun adı, küçük ve nötr */
.sp-font-ad{
  flex: 0 0 auto !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--sp-metin-soluk) !important;
}
.sp-font-picker > .sp-font-btn.active .sp-font-ad{
  color: rgba(255,255,255,.65) !important;
}

.sp-sponsor-alan.disabled{
  opacity: .45 !important;
  pointer-events: none !important;
}


/* ================================================================
   38. YAZI TİPİ ÖN YÜKLEME
   ----------------------------------------------------------------
   Forma önizlemesi Pixi ile canvas'a çiziliyor. Canvas, o an
   tarayıcıda YÜKLÜ olmayan bir fontu çizemez; sessizce varsayılan
   fonta düşer. Aşağıdaki gizli eleman beş fontu da sayfa açılırken
   kullanıma sokar, böylece müşteri seçtiğinde font hazır olur.

   Bu kural ancak home.php'ye Google Fonts satırı eklenirse işe
   yarar — o satır olmadan tarayıcının indirecek bir şeyi yok.
   ================================================================ */
body:after{
  content: "Oswald Anton Bebas Teko";
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-family: "Oswald", "Anton", "Bebas Neue", "Teko", sans-serif;
}

@media (max-width: 767px){
  .sp-font-ornek{ font-size: 18px !important; }
  .sp-font-picker > .sp-font-btn{ min-height: 48px !important; }
}


/* ================================================================
   39. YAZI TİPİ SEÇİCİ — İKİLİ IZGARA
   ----------------------------------------------------------------
   Beş satır tek sütun yerine iki sütun. Yükseklik ~300 px'den
   ~165 px'e iniyor. Beşinci font tek başına kaldığı için satırın
   tamamını kaplıyor.

   Önizleme yazısı ile font adı üst üste dizildi; yan yana
   olduklarında iki sütuna sığmıyorlardı.
   ================================================================ */

.sp-font-picker{
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

.sp-font-picker > .sp-font-btn{
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 0 !important;
  padding: 9px 8px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* Beşinci (son) font tek başına kalıyor — satırı doldursun */
.sp-font-picker > .sp-font-btn:last-child{
  grid-column: 1 / -1 !important;
}

.sp-font-ornek{
  display: block !important;
  width: 100% !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sp-font-ad{
  display: block !important;
  width: 100% !important;
  font-size: 9px !important;
  letter-spacing: .07em !important;
  text-align: center !important;
  opacity: .75 !important;
}

@media (max-width: 767px){
  .sp-font-ornek{ font-size: 16px !important; }
  .sp-font-picker > .sp-font-btn{ padding: 8px 6px !important; }
}


/* ================================================================
   40. GÖĞÜS LOGOSU BÖLÜMÜ — KISALTMA  (A · altılı ızgara)
   ----------------------------------------------------------------
   Bölüm ~400 px'den ~250 px'e iniyor.

   Kazancın büyük kısmı yükleme kutusundan geliyor: ortada boşluk
   duran 130 piksellik kesikli kutu, tek satırlık 55 piksellik
   şeride dönüyor — ikon solda, yazı yanında.

   Izgara 5 sütundan 6'ya çıkıyor. 8'e çıkarmadım: armaların çoğu
   ince çizgili ve yazılı, 40 pikselde renkli lekeye dönüşüp
   ayırt edilemez hale geliyorlar.
   ================================================================ */

/* --- Yükleme kutusu: dikey kutu değil, yatay şerit --- */
.drop-box{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  text-align: left !important;
}
.drop-box > span{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.drop-box > span:before{
  display: none !important;   /* dikey düzendeki büyük ikon */
}
.drop-box > span:after{
  margin-top: 0 !important;
  font-size: 10px !important;
}
/* İkon artık kutunun solunda, tek satırda */
.drop-box:before{
  content: "\e025";
  font-family: "Glyphicons Halflings";
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: normal;
  color: var(--sp-tamam);
  line-height: 1;
}
.drop-box:hover{ transform: none !important; }

/* Dosya yüklendiğinde önizleme görünsün diye yükseklik gerekiyor */
.drop-box[style*="url("]{
  min-height: 110px !important;
}

/* --- Logo ızgarası: 6 sütun --- */
.logo-library:has(> .logo-container){
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
}
.logo-library > .logo-container{
  padding: 4px !important;
  border-radius: 9px !important;
  border-width: 1px !important;
}

/* --- Başlık ve ipucu boşlukları --- */
.sp-etiket{ margin-bottom: 6px !important; }
.sp-etiket-ayrik{
  margin-top: 14px !important;
  padding-top: 12px !important;
}
.sp-ipucu{
  font-size: 10px !important;
  margin-top: 8px !important;
}

@media (max-width: 767px){
  .logo-library:has(> .logo-container){
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 4px !important;
  }
  .drop-box{ padding: 12px 14px !important; }
  .drop-box > span{ font-size: 12px !important; }
}


/* ================================================================
   41. EKSİK SEÇİM UYARISI
   ----------------------------------------------------------------
   Müşteri seçim yapmadan devam etmeye çalıştığında araç bir
   balon çıkarıyor. Balon soluk ve küçüktü, "hata" gibi değil
   bilgi notu gibi duruyordu.

   Artık kırmızı zemin, beyaz kalın yazı, ünlem işareti ve gölge.
   Ekrana geldiğinde bir kez sallanıyor — göz hareketi yakalıyor.
   ================================================================ */

.popover{
  max-width: 260px !important;
  padding: 0 !important;
  background: #C62828 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px -10px rgba(198,40,40,.55) !important;
  z-index: 1080 !important;
}
.popover .popover-content{
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 13px 16px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.popover .popover-content:before{
  content: "!";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #C62828;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
}
.popover .popover-title{ display: none !important; }

/* Balonun sivri ucu — dört yön için de kırmızı */
.popover.right > .arrow:after{ border-right-color: #C62828 !important; }
.popover.left > .arrow:after{ border-left-color: #C62828 !important; }
.popover.top > .arrow:after{ border-top-color: #C62828 !important; }
.popover.bottom > .arrow:after{ border-bottom-color: #C62828 !important; }
.popover > .arrow{ border-width: 9px !important; }
.popover > .arrow:after{ border-width: 9px !important; }

/* Ekrana geldiğinde bir kez sallansın — JS sınıfı ekliyor */
.popover.sp-uyari-vurgu{
  animation: sp-salla .5s ease !important;
}
@keyframes sp-salla{
  0%, 100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}


/* ================================================================
   42. "LOGO YOK" KUTUSU — İKİ KAT
   ----------------------------------------------------------------
   Müşterilerin çoğu logo istemediğine karar verip bu kutuya
   dönüyor ama kutu diğerleriyle aynı boyutta olduğu için
   kaybolup gidiyordu.

   Izgarada 15 kutu var, 6 sütunda son satırda 3 boşluk kalıyor.
   Bu kutu 2x2 yapılınca 4 hücre kaplıyor: 14 + 4 = 18, yani tam
   üç satır. Boşluklar doluyor ve BÖLÜMÜN YÜKSEKLİĞİ DEĞİŞMİYOR.

   Masaüstüne özel: dar ekranda 2x2 kutu ızgaranın üçte birini
   yer, orada normal boyutunda kalıyor.
   ================================================================ */
@media (min-width: 768px){
  .logo-library > .logo-container.no-logo{
    grid-column: span 2 !important;
    grid-row: span 2 !important;
    aspect-ratio: auto !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-width: 2px !important;
    border-radius: 12px !important;
  }
  .logo-library > .logo-container.no-logo.active{
    background: #F7FCEC !important;
  }
}


/* ================================================================
   43. ŞORT MODELİ — IZGARA
   ----------------------------------------------------------------
   Karusel kaldırıldı, sekiz model tek bakışta görünüyor.
   Yükseklik ~250 px'den ~200 px'e iniyor ama asıl kazanç orada
   değil: sekizinci modeli görmek için gereken tıklama sayısı
   yediden sıfıra indi.

   Bu blok color.html'deki yeni ızgara yapısıyla çalışır.
   color.html güncellenmediyse kurallar boşa gider, karusel
   eski haliyle çalışmaya devam eder.
   ================================================================ */

.sp-sort-izgara{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
}

.sp-sort-kutu{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
  background: #fff !important;
  border: 1.5px solid var(--sp-cizgi) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: border-color .15s, transform .15s !important;
}
.sp-sort-kutu:hover{
  border-color: var(--sp-gece) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
.sp-sort-kutu.active{
  border-color: var(--sp-gece) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(148,233,0,.45) !important;
}
.sp-sort-kutu img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

/* Seçilen modelin adı ve fiyatı */
.sp-sort-bilgi{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--sp-cizgi) !important;
}
.sp-sort-ad{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--sp-gece) !important;
}
.sp-sort-fiyat{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sp-gece) !important;
  white-space: nowrap !important;
}

@media (max-width: 767px){
  .sp-sort-izgara{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
  }
  .sp-sort-ad{ font-size: 14px !important; }
}