/* Görev 14: Üst bar (logo, filtre, arama, içindekiler, PDF indir) ve arama
   sonuç panelinin stilleri.

   .ust-bar burada, app.css'teki (Görev 10) govde-grid'e bagli halinden
   FARKLI olarak "position: fixed" ile tanimlaniyor — bu, Gorev 11'in
   flipbook.css'te birakti belgeledigi tasma sorununun KOKUNU cozuyor
   (bkz. flipbook.css basindaki not ve bu gorevin raporu): govde grid'inin
   tek "auto" sutunu, icindeki EN GENIS grid ogesinin icerik genisligine
   (min-content) gore hesaplaniyordu; .ust-bar akista (in-flow) bir grid
   ogesi oldugu ve kendi icerigi (arama kutusu + dugmeler, sarilmadan/
   nowrap) 375px'lik bir viewport'tan daha genis oldugu icin, o sutun
   viewport'tan genis hesaplaniyor ve butun govde (dolayisiyla
   document.documentElement.scrollWidth) tasiyordu. "position: fixed"
   olan bir oge CSS Grid'in otomatik sutun/satir boyutlandirmasina hic
   katilmaz (akis disina cikar), bu yuzden .ust-bar'i akistan tamamen
   cikarmak govde sutununun genisligini artik etkilememesini sagliyor.
   Asagidaki mobil medya sorgusu da geri kalan icerigin (dugme metinleri,
   bosluklar) KENDI genisligi icinde 375px'e sigmasini saglayan ikinci
   yari; olcumler icin raporun "carried-forward" bolumune bakin. */

.ust-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--ust-bar);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  z-index: 30;
}

.logo {
  flex: none;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--metin-ters);
  background: var(--kruger-sari);
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
}

.ikon-dugme {
  flex: none;
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--metin);
  border-radius: var(--yuvarlak);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.ikon-dugme:hover, .ikon-dugme:focus-visible { border-color: var(--vurgu); color: var(--vurgu); }

/* Görev 17: "PDF indir" bağlantısının gerçek dosya boyutunu (47,7 MB —
   ~35 MB'lık ilk tahminden büyük, bkz. görev raporu) belirtmesi, mobil veri
   üzerinde habersizce büyük bir indirmeye başlanmasını önler. Ayrı bir
   "span" ile hafif renklendirilip asıl etiketten görsel olarak ayrıştırılır;
   metin hiçbir genişlikte gizlenmiyor (bu dosyanın başındaki "hiçbir yerde
   kırpılmıyor/gizlenmiyor" ilkesiyle tutarlı) — dar ekranlarda yalnızca
   yanındaki arama kutusu (zaten "min-width: 0" ile esnek) daha çok büzülür. */
.pdf-boyut { color: var(--metin-soluk); font-weight: 400; }

.arama-kutusu { position: relative; flex: 1 1 auto; min-width: 0; max-width: 520px; }

/* Kutu modeli (genislik/yukseklik/dolgu) burada tek kaynak: bkz. app.css'teki
   "#arama" notu. Deger app.css'in eski ID kuraliyla ayni (0 14px / 36px) —
   gorunum degismiyor, yalnizca artik gercekten uygulanan kural burasi. */
.arama-kutusu input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  color: var(--metin);
  font: inherit;
  font-size: 14px;
}

.arama-kutusu input::placeholder { color: var(--metin-soluk); }

/* ":focus" degil ":focus-visible" kullanilir: boylece odak halkasi asil
   ihtiyaci olan klavye etkilesiminde (Tab, ya da Gorev 16'nin "/" kisayolu
   ile programatik focus()) gorunur kalir. Metin girdileri icin tarayicilar
   fare tiklamasinda da ":focus-visible"i eslestirir (imlecin nereye
   yazacagini gormek faydali sayildigindan) — bu yuzden fare tiklamasindaki
   gorunum de makul kaliyor, sadece buton gibi diger kontrollerin aksine
   burada "tiklayinca halka gizlenir" varsayimina guvenilmiyor. Eskiden
   burada ".arama-kutusu input:focus" vardi ama app.css'teki bir ID kurali
   (#arama:focus-visible { outline: none }) klavye odaginda bunu HER ZAMAN
   eziyordu (bkz. app.css'teki notun guncellenmis hali); o ID kurali
   kaldirildi, burasi artik tek kaynak. */
.arama-kutusu input:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }

.arama-sonuclari {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 62vh;
  overflow-y: auto;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: 0 18px 40px var(--golge-guclu);
  z-index: 35;
}

.arama-satir {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--satir-cizgi);
  color: var(--metin);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.arama-satir:hover, .arama-satir.secili { background: var(--satir-vurgu); }
.arama-satir img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; background: var(--zemin-2); }
.satir-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.satir-metin strong { font-size: 13px; font-weight: 600; }
.satir-metin small { font-size: 11px; color: var(--vurgu); }
.satir-metin small.soluk { color: var(--metin-soluk); }
.arama-bos { margin: 0; padding: 12px; font-size: 13px; color: var(--metin-soluk); }

/* F10: "Tümünü gör" dugmesi ve tam liste sonundaki bilgi satiri.

   ".arama-bos" DEGIL: o secici arama.spec.mjs'te "Sonuç bulunamadı."
   metnini dogrulamak icin kullaniliyor ve ayni anda iki elemana
   eslesirse (strict mode) o testi bozar — filterpanel.js'teki
   ".filtre-bilgi" notuyla ayni gerekce. */
.arama-tumu {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--satir-vurgu);
  border: 0;
  color: var(--vurgu);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.arama-tumu:hover, .arama-tumu:focus-visible { background: var(--zemin-2); }
.arama-bilgi { margin: 0; padding: 12px; font-size: 13px; color: var(--metin-soluk); }

/* F1 (kritik): telefonda arama kutusu tek satirda eziliyordu.

   Olculen (duzeltme oncesi, dist/ uzerinde gercek tarayicida): sarmalayici
   (.arama-kutusu) 360 px'te 8 px, 375 px'te 23 px, 412 px'te (Pixel 7, e2e
   "mobil" projesi) 17 px genisligindeydi; girdinin kendi 30 px'lik asgari
   genisligi sarmalayicidan TASIP "Icindekiler" dugmesinin uzerine biniyordu
   (375 px'te 3 px, 412 px'te 7 px, 360 px'te 18 px ortusme). Sonuc listesi
   sarmalayiciya bagli oldugu icin ("left: 0; right: 0") ayni genislikte,
   okunamaz bir sutun olarak aciliyordu.

   Nedeni yapisal: logo, uc dugme ve "PDF indir (47,7 MB)" etiketi
   "flex: none"; tek satirda onlarin min-content genisligi 375 px'te zaten
   satirin tamamini dolduruyor, geriye arama icin birkac piksel kaliyor.
   "Arama biraz daha genis olsun" turu bir ayar (flex-basis/min-width)
   bu yuzden ise yaramaz — yer fiziksel olarak yok.

   Cozum: arama kutusuna KENDI SATIRINI vermek. "order: 1" onu (DOM'da
   ucuncu ogeyken) dugmelerin ALTINDAKI satira tasir, "flex: 1 0 100%" o
   satirin tamamini kaplatir. Boylece hicbir metin kirpilmiyor/gizlenmiyor
   (bu dosyanin Gorev 17 notundaki ilke aynen korunuyor) ve arama kutusu
   375 px'te 23 px yerine ~363 px (viewport'un %96'si) oluyor; sonuc
   listesi de ayni genisligi aliyor.

   Iki satirin yuksekligi icin --ust-bar token'i AYNI medya sorgusunda
   app.css'te 92 px'e cikariliyor (govde grid'i, paneller ve hata bandi
   hepsi o token'dan beslendigi icin tek nokta orasi). Dikey telefonda
   katalog alaninin 36 px kisalmasi sayfa boyutunu DEGISTIRMIYOR: portre
   gorunumde sayfa zaten GENISLIGE gore sinirli (375 px'te 530 px yukseklik,
   mevcut 628 px'lik alanin altinda) — olculdu. */
@media (max-width: 767px) {
  .ust-bar {
    flex-wrap: wrap;
    align-content: center;
    gap: 6px;
    padding: 0 8px;
  }
  .arama-kutusu { order: 1; flex: 1 0 100%; max-width: none; }
  .ikon-dugme { padding: 8px; font-size: 12px; }
  .logo { padding: 5px 8px; font-size: 13px; }
}

/* En dar telefonlarda (<=380px) bosluk/dolgu bir kademe daha
   sikilastiriliyor. F1'den sonra bu, ARAMA icin degil UST SATIR icin
   gerekli: logo + uc dugmenin min-content toplami 360 px'te 324 px ve
   buradaki daraltmayla (4 px bosluk, 6 px yan dolgu) satir 348 px'e
   iniyor — 360 px'lik en dar telefonda bile tasmadan sigiyor (olculdu).
   Metinler HICBIR yerde kirpilmiyor/gizlenmiyor (e2e testleri dugme
   adlarina gore secim yapiyor) — yalnizca bosluk azaliyor. */
@media (max-width: 380px) {
  .ust-bar { gap: 4px; padding: 0 6px; }
  .ikon-dugme { padding: 6px 7px; font-size: 11px; }
  .logo { padding: 5px 7px; font-size: 12px; }
}

/* Görev 15: Filtre paneli (Kategori + Alet Tipi).

   .panel'in konum/boyut/renk temeli zaten app.css'te tanımlı (position,
   top, bottom, width, overflow-y, background, border-right, z-index);
   burada yalnızca o taban kurala EKSİK olan "padding" ekleniyor. Bilhassa
   "left" buraya TEKRAR yazılmıyor: app.css'teki #filtre-paneli { left: 0 }
   zaten bir ID kuralı olduğu için burada ayrıca ".panel { left: 0 }"
   yazmak filtre-paneli için etkisiz (ID zaten kazanıyor) olurdu, ama AYNI
   ZAMANDA #icindekiler-paneli'ne de sızıp onun "right: 0" ile kurduğu sağ
   hizalamayı left+width+right'ın üçü birden tanımlı hale gelmesiyle
   (LTR'de "right" göz ardı edilir) bozardı. Bu yüzden konumlama app.css'teki
   ID kurallarına bırakılıyor; burada yalnızca gerçekten eksik olan özellik
   ekleniyor. */
.panel { padding: 14px; }

.panel h2 { margin: 0; font-size: 15px; }
.panel h3 {
  margin: 18px 0 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vurgu);
}

.panel-baslik {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Baslik satirinda artik dort oge olabiliyor (h2 + sayac + "Temizle" +
     kapatma dugmesi). 264 px'lik masaustu panelinde dordu birlikte 8 px
     boslukla 237 px tutuyordu, kullanilabilir genislik ise 235 px — yani
     2 px tasiyordu; bosluk 6 px'e ve asagidaki "Temizle" dolgusu 10 px'e
     cekilerek tek satira siginiyor (olculdu). "wrap" yine de duruyor:
     sonuc sayisi buyudugunde (orn. "336 ürün") kirpilmak yerine alt
     satira sarsin. */
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Panel basligindaki "Temizle" ust bardaki dugmelerden biraz daha dar:
   bkz. yukaridaki olcum notu. */
.panel-baslik .ikon-dugme { padding: 8px 10px; }
.panel-baslik span { font-size: 12px; color: var(--metin-soluk); }

/* F9: panellerin gorunur kapatma dugmesi. Telefonda paneller ekranin
   altina yapisan birer alt sayfa (bottom sheet) ve orada ne Escape tusu
   ne de "disariya dokun" ile kapanma var; tek cikis ust bardaki acma
   dugmesiydi. Dokunma hedefi 32x32 px (ust bardaki .ikon-dugme ile ayni
   mertebede), rengi diger ikincil kontrollerle ayni token'dan geliyor. */
.panel-kapat {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  color: var(--metin-soluk);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.panel-kapat:hover, .panel-kapat:focus-visible { border-color: var(--vurgu); color: var(--vurgu); }

/* F18: panel acilirken odak panelin KENDISINE aliniyor (tabindex="-1",
   bkz. filterpanel.js/toc.js). Klavyeyle acildiginda odagin nereye
   gittiginin gorunur olmasi icin halka; fareyle acildiginda tarayici
   ":focus-visible"i eslestirmedigi icin halka cikmiyor. "outline-offset"
   negatif: panel viewport kenarina yapisik oldugu icin disariya tasan bir
   halka kirpilirdi. */
.panel:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: -2px;
}

.facet-secenek {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  cursor: pointer;
}
.facet-secenek em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--metin-soluk); }
.facet-secenek.bos { opacity: .38; }
.facet-secenek input { accent-color: var(--vurgu); }

.filtre-sonuc-satir {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 7px 8px;
  margin-bottom: 4px;
  background: var(--zemin-2);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--metin);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.filtre-sonuc-satir:hover { border-color: var(--vurgu); }
.filtre-sonuc-satir strong { font-size: 12px; font-weight: 600; }
.filtre-sonuc-satir small { font-size: 11px; color: var(--vurgu); }

/* .arama-bos ile GORSEL olarak ayni ama kasten AYRI bir sinif — neden
   icin filterpanel.js'teki "filtre-bilgi" atamasinin yanindaki nota bak. */
.filtre-bilgi { margin: 0; padding: 12px; font-size: 13px; color: var(--metin-soluk); }

@media (max-width: 767px) {
  .panel {
    top: auto;
    width: 100%;
    max-height: 72vh;
    border-right: 0;
    border-top: 1px solid var(--cizgi);
    border-radius: 14px 14px 0 0;
  }
}

/* Görev 16: İçindekiler paneli. */

.toc-satir {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 5px;
  background: var(--zemin-2);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--metin);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.toc-satir:hover { border-color: var(--vurgu); }
.toc-satir strong { font-size: 12px; font-weight: 600; }
.toc-satir small { font-size: 11px; color: var(--metin-soluk); }
.toc-satir em { font-style: normal; font-size: 11px; color: var(--vurgu); }

/* Görev 16: Sayfa şeridi.

   .sayfa-seridi zaten app.css'te (Görev 10) govde CSS Grid'inin "serit"
   alanina baglanmis bir grid ogesiydi (grid-area: serit; height:
   var(--serit)). Burada .ust-bar'in Gorev 14'te aldigi ayni yolu izliyor:
   "position: fixed" ile grid akisindan tamamen cikariliyor. Govde grid
   sablonundaki "var(--serit)" yuksekligindeki satir aciklama ile
   ("grid-template-rows: var(--ust-bar) 1fr var(--serit)") EXPLICIT bir
   uzunluk oldugu icin, icinde artik grid ogesi olmasa bile o satir
   rezerve edilmeye devam ediyor — bu yuzden #katalog'un ortadaki "1fr"
   satiri, tam da bu sabit-konumlu seridin viewport altina sabitlendigi
   bosluk kadar kisaliyor; ayrica bir bosluk/margin eklemeye gerek yok
   (ust-bar icin de ayni mantik gecerli, bkz. yukaridaki not). Mobilde
   serit "display: none" ile gizlenince bu rezerve alan sadece govdenin
   zemin rengiyle bos kaliyor; #katalog kendi grid alaninin disina hicbir
   zaman tasmiyor. */

.sayfa-seridi {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--serit);
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  overflow-x: auto;
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
  scrollbar-width: thin;
  z-index: 20;
}

.serit-ogesi {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.serit-ogesi img { display: block; width: 100%; border-radius: 2px; }
.serit-ogesi span {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 3px;
  font-size: 9px;
  color: var(--metin);
  background: var(--etiket-zemin);
  border-radius: 2px;
}
.serit-ogesi.aktif { border-color: var(--vurgu); }

@media (max-width: 767px) {
  .sayfa-seridi { display: none; }
}

/* F16: YATAY telefonda serit sayfanin ustunu ortuyordu. Serit yalnizca
   GENISLIGE gore gizlendigi icin (yukaridaki 767px sorgusu), telefon yan
   cevrildiginde (ornegin 812x375 ya da Pixel 7'nin 863x360'i) genislik
   767'yi astigindan serit geri geliyor ve viewport'un alt 92 px'ini
   kapliyordu; body "overflow: hidden" oldugu icin altta kalan kisim
   kaydirilarak da gorulemiyordu (olculen: sayfa kutusu y 68-464, serit
   y 268-360, yani sayfanin ~%50'si erisilemez). Kisa viewport'ta serit
   kucuk resimleri zaten anlamli bir yer kaplayamaz; bu yuzden gizleniyor
   ve ayirdigi govde grid satiri app.css'te --serit: 0 ile kapatiliyor
   (ikisi birlikte olmali: yalnizca "display: none" satiri bos birakir,
   yalnizca token'i sifirlamak seridi 0 yukseklikte ezik birakir).
   Duzeltmenin ucuncu parcasi flipbook.js'teki minHeight'tir — StPageFlip
   oradaki degeri #katalog'a satir ici "min-height" olarak yaziyor ve
   396 px'lik taban, satir kisalabilse bile kutuyu viewport'tan tasiriyordu. */
@media (max-height: 500px) {
  .sayfa-seridi { display: none; }
}