/* MASAÜSTÜ ARAMA + ARAÇLAR */
.sf-search-desktop-row{
  width:min(1640px,96%);
  margin:0 auto;
  display:grid;
  grid-template-columns:
    minmax(210px,290px)
    minmax(600px,1000px)
    minmax(210px,290px);
  gap:20px;
  align-items:center;
  justify-content:center;
}

.sf-search-desktop-row .sf-search-wrap{
  width:100% !important;
  max-width:none !important;
}

.sf-search-tool{
  height:62px;
  box-sizing:border-box;

  display:flex;
  align-items:center;

  gap:13px;
  padding:7px 15px;

  border:2px solid #f8c40a;
  border-radius:17px;

  background:#10161b;

  color:#fff !important;
  text-decoration:none !important;

  font-size:14px;
  font-weight:800;
  line-height:1.25;

  white-space:nowrap;
}

.sf-tool-ico{
  width:43px;
  height:43px;
  min-width:43px;

  display:grid;
  place-items:center;

  border:1px solid #f8c40a;
  border-radius:11px;

  color:#f8c40a;

  font-size:28px;
  font-weight:700;
}

.sf-search-tool:hover{
  background:#151d23;
  text-decoration:none !important;
}


/* MOBİLDE ARAÇLARI GİZLE */
@media (max-width:768px){

  .sf-search-desktop-row{
    width:100% !important;
    display:block !important;
  }

  .sf-search-tool{
    display:none !important;
  }

  .sf-search-desktop-row .sf-search-wrap{
    width:100% !important;
  }

}
.sf-search-tool{
  position:relative;
  z-index:50;
  pointer-events:auto !important;
  cursor:pointer;
}

.sf-search-desktop-row{
  position:relative;
  z-index:20;
}
/* ==============================
   RESPONSIVE DÜZEN
   ============================== */

/* Büyük masaüstü */
.sf-search-desktop-row{
  width:96%;
  max-width:1640px;
  margin:0 auto;

  display:grid;
  grid-template-columns:
    minmax(190px,260px)
    minmax(500px,1000px)
    minmax(190px,260px);

  gap:18px;
  align-items:center;
  justify-content:center;
}

.sf-search-desktop-row .sf-search-wrap{
  width:100% !important;
  min-width:0;
}

.sf-search-tool{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}


/* ORTA BOY EKRANLAR */
@media (max-width:1200px){

  .sf-search-desktop-row{
    grid-template-columns:
      180px
      minmax(450px,1fr)
      180px;

    gap:12px;
  }

  .sf-search-tool{
    padding:7px 10px;
    font-size:12px;
  }

  .sf-tool-ico{
    width:36px;
    height:36px;
    min-width:36px;
    font-size:22px;
  }
}


/* TABLET + MOBİL
   Araçlar tamamen gizlenir */
@media (max-width:900px){

  .sf-search-section{
    width:100%;
    box-sizing:border-box;
  }

  .sf-search-desktop-row{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  .sf-search-tool{
    display:none !important;
  }

  .sf-search-desktop-row .sf-search-wrap{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }
}


/* TELEFON */
@media (max-width:600px){

  .sf-search-section{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .sf-search-line{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  #sfSearchInput{
    min-width:0 !important;
    width:100% !important;
  }
}
/* SporForma.Net Arama Motoru - V2 */
.sf-search-section{
  width:100%;
  padding:10px 26px 10px !important;
  background:linear-gradient(180deg,#11171b 0%,#343a40 100%) !important;
  position:relative;
  z-index:100;
}

.sf-search-wrap{
  width:min(1000px,85%) !important;
  margin:0 auto !important;
  position:relative;
}

.sf-search-line{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  height:66px !important;
  padding:0 !important;
  border:2px solid #ffc400 !important;
  border-radius:34px !important;
  overflow:hidden !important;
  background:#11171b !important;
  box-shadow:0 10px 25px rgba(0,0,0,.28) !important;
  position:relative !important;
}

.sf-search-line:before{
  content:"" !important;
  display:block !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  margin-left:24px !important;
  margin-right:17px !important;
  border:3px solid #fff !important;
  border-radius:50% !important;
  background:transparent !important;
}

.sf-search-line:after{
  content:"" !important;
  position:absolute !important;
  left:45px !important;
  top:37px !important;
  width:11px !important;
  height:3px !important;
  background:#fff !important;
  border-radius:3px !important;
  transform:rotate(45deg) !important;
  pointer-events:none;
}

.sf-search-line input,
.sf-search-line input[type="search"]{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  height:62px !important;
  margin:0 !important;
  padding:0 18px 0 0 !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  font-size:17px !important;
  line-height:62px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}

.sf-search-line input::placeholder{
  color:#b8b8b8 !important;
  opacity:1 !important;
}

.sf-search-line input::-webkit-search-cancel-button{
  display:none;
}

.sf-search-line button,
.sf-search-line button[type="button"]{
  flex:0 0 132px !important;
  width:132px !important;
  height:50px !important;
  margin:0 8px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:26px !important;
  background:linear-gradient(180deg,#ffd21b 0%,#f4bb00 100%) !important;
  color:#111 !important;
  font-size:17px !important;
  font-weight:900 !important;
  line-height:50px !important;
  text-align:center !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

.sf-search-line button:hover{
  filter:brightness(1.05);
}

.sf-results{
  position:absolute !important;
  top:76px !important;
  left:0 !important;
  right:0 !important;
  max-height:560px !important;
  overflow-y:auto !important;
  padding:8px !important;
  background:#11171b !important;
  border:1px solid #ffc400 !important;
  border-radius:18px !important;
  box-shadow:0 18px 42px rgba(0,0,0,.42) !important;
  z-index:9999 !important;
}

.sf-result{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:102px !important;
  padding:10px 12px !important;
  color:#fff !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
}

.sf-result:hover{
  background:#1b2227 !important;
}

.sf-result-image{
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  border:2px solid #ffc400 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#252c31 !important;
}

.sf-result-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}

.sf-result-main{
  min-width:0 !important;
  flex:1 !important;
}

.sf-result-main strong{
  display:block !important;
  color:#fff !important;
  font-size:16px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.sf-result-main small{
  color:#aaa !important;
}

.sf-result-arrow{
  color:#ffc400 !important;
  font-size:22px !important;
  font-weight:900 !important;
}

.sf-no-result{
  color:#fff !important;
  padding:16px !important;
}

@media (max-width:768px){
  .sf-search-section{
    padding:18px 14px 20px !important;
	  background-color:#343a40; 
  }

  .sf-search-wrap{
    width:100% !important;
  }

  .sf-search-line{
    height:58px !important;
    border-radius:30px !important;
  }

  .sf-search-line:before{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    margin-left:18px !important;
    margin-right:12px !important;
    border-width:2px !important;
  }

  .sf-search-line:after{
    left:33px !important;
    top:31px !important;
    width:9px !important;
    height:2px !important;
  }

  .sf-search-line input,
  .sf-search-line input[type="search"]{
    height:54px !important;
    font-size:14px !important;
    line-height:54px !important;
  }

  .sf-search-line button,
  .sf-search-line button[type="button"]{
    flex-basis:92px !important;
    width:92px !important;
    height:44px !important;
    line-height:44px !important;
    border-radius:24px !important;
    font-size:14px !important;
  }

  .sf-results{
    top:68px !important;
  }
}

@media (max-width:480px){
  .sf-search-section{
    padding:14px 10px 16px !important;
  }

  .sf-search-line{
    height:54px !important;
  }

  .sf-search-line:before{
    margin-left:14px !important;
    margin-right:10px !important;
  }

  .sf-search-line input,
  .sf-search-line input[type="search"]{
    height:50px !important;
    line-height:50px !important;
    font-size:13px !important;
  }

  .sf-search-line button,
  .sf-search-line button[type="button"]{
    flex-basis:76px !important;
    width:76px !important;
    height:40px !important;
    line-height:40px !important;
    font-size:13px !important;
  }
}


@media (max-width:768px){
  .sf-result-image{
    width:68px !important;
    height:68px !important;
    flex-basis:68px !important;
    border-radius:10px !important;
  }
}

@media (max-width:480px){
  .sf-result-image{
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
    border-radius:9px !important;
  }
}

/* V7: yedek forma görseli */
.sf-result-image img[src*="arama-forma-yedek.svg"]{
  object-fit:contain !important;
  padding:6px !important;
  background:#11171b !important;
}


/* V8 - Klavye ile sonuç seçimi */
.sf-result{
  border:1px solid transparent !important;
}

.sf-result:hover,
.sf-result.sf-keyboard-active{
  background:#1b2227 !important;
  border:1px solid #ffc400 !important;
  outline:none !important;
}

.sf-result.sf-keyboard-active{
  box-shadow:0 0 0 1px rgba(255,196,0,.10) inset !important;
}
/* ARAMA KUTUSUNU ÜSTTE TUT */
.sf-search-desktop-row{
    width:96%;
    max-width:1640px;
    margin:0 auto;

    display:grid;
    grid-template-columns:250px minmax(600px,1000px) 250px;
    gap:12px;

    align-items:start;
    justify-content:center;
}

.sf-search-desktop-row .sf-search-wrap{
    display:block !important;
    width:100% !important;
    max-width:1000px !important;
    margin:0 !important;
    position:relative;
}

.sf-search-desktop-row .sf-search-line{
    display:flex !important;
    width:100% !important;
    position:relative;
}

/* İKİ YAN BUTON ARAMA KUTUSUYLA AYNI HİZADA */
.sf-search-desktop-row > .sf-search-tool{
    margin-top:0 !important;
    align-self:start;
}
/* =========================================
   YAN ARAÇ BUTONLARI RESPONSIVE
   ========================================= */

.sf-search-desktop-row{
    width:96%;
    max-width:1640px;
    margin:0 auto;

    display:grid;
    grid-template-columns:
        minmax(190px,250px)
        minmax(500px,1000px)
        minmax(190px,250px);

    gap:12px;
    align-items:center;
    justify-content:center;
}

.sf-search-desktop-row .sf-search-wrap{
    width:100% !important;
    min-width:0;
    margin:0 !important;
}

.sf-search-tool{
    width:100%;
    min-width:0;
    height:62px;

    display:flex;
    align-items:center;

    box-sizing:border-box;
    gap:12px;
    padding:7px 14px;

    border:2px solid #ffc107;
    border-radius:17px;

    background:#10161b;
    color:#fff !important;
    text-decoration:none !important;

    font-size:14px;
    font-weight:800;
    line-height:1.2;

    white-space:nowrap;
}

.sf-tool-ico{
    width:42px;
    height:42px;
    min-width:42px;

    display:grid;
    place-items:center;

    border:1px solid #ffc107;
    border-radius:11px;

    color:#ffc107;
    font-size:26px;
}


/* ORTA EKRANLAR */
@media (max-width:1200px){

    .sf-search-desktop-row{
        grid-template-columns:
            170px
            minmax(400px,1fr)
            170px;

        gap:10px;
    }

    .sf-search-tool{
        height:58px;
        padding:6px 9px;
        gap:8px;
        font-size:11px;
    }

    .sf-tool-ico{
        width:34px;
        height:34px;
        min-width:34px;
        font-size:21px;
    }
}


/* 768 PX VE ALTINDA BUTONLAR YOK */
@media (max-width:768px){

    .sf-search-desktop-row{
        display:block !important;
        width:100% !important;
        max-width:none !important;
    }

    .sf-search-tool{
        display:none !important;
    }

    .sf-search-desktop-row .sf-search-wrap{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }
}