/* ===========================================================
   tedarikyolu — 2026 yenilemesi
   Canvas'ın CSS'ini silmez, yalnızca kendi bileşenlerini tanımlar.
   Tüm sınıflar "ty" önekiyle — Canvas'la çakışma yok.
   Geri almak: head.php'deki <link> satırını kaldır,
   header.php'yi _yedek/canli-20260821/ içinden geri koy.
   =========================================================== */

:root{
  --ty-turuncu:#E85522;
  --ty-turuncu-koyu:#C6431A;
  --ty-amber:#F7941D;
  --ty-gecis:linear-gradient(100deg,#E8482B 0%,#F7941D 100%);
  --ty-murekkep:#12171C;
  --ty-murekkep-2:#3D4750;
  --ty-murekkep-3:#6B7681;
  --ty-murekkep-4:#98A2AC;
  --ty-cizgi:#D7DEE5;
  --ty-cizgi-soluk:#E6EBF0;
  --ty-yumusak:#EEF2F6;
  --ty-yay:cubic-bezier(.22,.61,.36,1);
  --ty-kondens:'Barlow Condensed','Poppins',-apple-system,sans-serif;
  --ty-baslik:'Manrope','Poppins',-apple-system,sans-serif;
}

/* -----------------------------------------------------------
   BAŞLIK — uçtan uca, logo ortada
   İki yan grup da flex:1 1 0 → birebir eşit genişlik.
   Aralarındaki sınır sayfanın tam ortası, logo oraya oturuyor.
   Mutlak konumlandırma yok; pencere boyu değişince kaymıyor.
   ----------------------------------------------------------- */
/* Aşağı kaydırınca yukarı kayıp kaybolur, yukarı kaydırınca geri gelir. */
.tyhd{
  position:sticky; top:0; z-index:400; isolation:isolate; will-change:transform;
  transition:transform .34s var(--ty-yay);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ty-cizgi);
  box-shadow:0 1px 2px rgba(18,23,28,.05), 0 8px 22px rgba(18,23,28,.07);
  font-family:var(--ty-kondens);
}
.tyhd.tyhd-gizli{ transform:translateY(-100%); }
.tyhd *{ box-sizing:border-box; }
.tyhd a{ text-decoration:none; }

.tyhd-in{
  display:flex; align-items:stretch;
  height:84px; padding:0 30px;         /* uçtan uca: container yok */
}
.tyhd-yan{ display:flex; align-items:center; justify-content:space-between; flex:1 1 0; min-width:0; gap:14px; }

.tyhd-logo{ display:flex; align-items:center; flex:0 0 auto; padding:0 30px; }
.tyhd-logo img{ height:44px; width:auto; display:block; }

/* --- menü --- */
.tyhd-menu{ display:flex; align-items:stretch; height:100%; margin:0; padding:0; list-style:none; }
.tyhd-menu > li{ position:static; display:flex; }
.tyhd-menu > li > a{
  display:flex; align-items:center; height:100%; padding:0 14px;
  font-size:16px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ty-murekkep-2); white-space:nowrap;
  box-shadow:inset 0 -2px 0 transparent;
  transition:color .16s var(--ty-yay), box-shadow .16s var(--ty-yay);
}
.tyhd-menu > li:hover > a,
.tyhd-menu > li:focus-within > a{ color:var(--ty-murekkep); box-shadow:inset 0 -2px 0 var(--ty-turuncu); }

/* "Ürün Çeşitlerimiz" artık bir sayfaya gitmiyor, yalnız mega paneli açıyor.
   Bu yüzden <a> değil <button>: hedefi olmayan bağlantı olmamalı. Görünüşü
   diğer menü öğeleriyle birebir aynı; panel yalnız üzerine gelince açılır. */
.tyhd-menu > li > .tyhd-mega-buton{
  display:flex; align-items:center; height:100%; padding:0 14px;
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ty-murekkep-2); white-space:nowrap;
  background:none; border:0; cursor:pointer;
  box-shadow:inset 0 -2px 0 transparent;
  transition:color .16s var(--ty-yay), box-shadow .16s var(--ty-yay);
}
.tyhd-menu > li:hover > .tyhd-mega-buton,
.tyhd-menu > li:focus-within > .tyhd-mega-buton{
  color:var(--ty-murekkep); box-shadow:inset 0 -2px 0 var(--ty-turuncu);
}

/* --- yuvarlak ikonlar (arama, sepet) --- */
.tyhd-ikon{
  position:relative; flex:0 0 auto; align-self:center;
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:transparent; border:1px solid var(--ty-cizgi); color:var(--ty-murekkep-2);
  cursor:pointer; padding:0;
  transition:background .16s var(--ty-yay), color .16s var(--ty-yay), border-color .16s var(--ty-yay);
}
.tyhd-ikon:hover{ background:var(--ty-yumusak); color:var(--ty-murekkep); border-color:var(--ty-murekkep-4); }
.tyhd-ikon svg{ width:17px; height:17px; }
.tyhd-say{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  display:grid; place-items:center; border-radius:9px;
  background:var(--ty-turuncu); color:#fff; font-size:11px; font-weight:700;
  font-family:var(--ty-baslik); line-height:1;
}

/* --- teklif butonu --- */
.tyhd-teklif{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  background:var(--ty-gecis); color:#fff !important;
  font-size:16px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:12px 22px; border-radius:10px; line-height:1;
  transition:transform .18s var(--ty-yay), box-shadow .18s var(--ty-yay);
}
.tyhd-teklif:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(232,85,34,.3); }

/* --- mega panel: ortalanmış, sınırlı genişlikte açılır kart --- */
/* Kenardan kenara levha ekranı kaplıyordu. Yükseklik tavanlı;
   taşarsa panel kendi içinde kayar. 66 alt kategorinin tamamı
   listelendiği için tavan biraz yükseltildi. */
.tyhd-mega{
  position:absolute; left:50%; transform:translateX(-50%) translateY(-6px); top:100%; z-index:5;
  width:min(1180px, calc(100vw - 60px));
  background:#fff; border:1px solid var(--ty-cizgi-soluk);
  border-radius:16px; box-shadow:0 18px 44px rgba(18,23,28,.16);
  max-height:min(74vh, 530px); overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity .18s var(--ty-yay), transform .18s var(--ty-yay), visibility .18s;
}
.tyhd-mega-tetik:hover > .tyhd-mega,
.tyhd-mega-tetik:focus-within > .tyhd-mega,
.tyhd-mega:hover{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(6px); }

/* Izgara değil CSS sütunu: ızgarada satır yüksekliği o satırın en uzun
   kolonuna göre belirleniyor, Promosyon'un 20 alt kategorisi yüzünden
   yanındaki kolonların altında dev boşluk kalıyordu. Sütunlarda içerik
   kendi akıyor; break-inside bir kategoriyi ortasından bölmüyor. */
.tyhd-mega-in{
  columns:5; column-gap:26px;
  padding:24px 26px 8px;
}
.tyhd-mega-kol{ break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:18px; }
.tyhd-mega-bas{
  display:block; font-size:15px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ty-murekkep); line-height:1.2;
  padding-bottom:7px; margin-bottom:8px; border-bottom:1px solid var(--ty-cizgi-soluk);
}
.tyhd-mega-bas:hover{ color:var(--ty-turuncu); }
.tyhd-mega-kol ul{ margin:0; padding:0; list-style:none; }
.tyhd-mega-kol li a{
  display:block; padding:2px 0; font-size:12.5px; font-family:var(--ty-baslik);
  font-weight:500; color:var(--ty-murekkep-3); line-height:1.38;
  transition:color .14s var(--ty-yay);
}
.tyhd-mega-kol li a:hover{ color:var(--ty-turuncu); }

/* --- arama şeridi --- */
.tyhd-arama{ border-top:1px solid var(--ty-cizgi-soluk); background:#fff; }
.tyhd-arama form{ display:flex; gap:10px; padding:16px 30px; margin:0; }
.tyhd-arama input{
  flex:1; min-width:0; height:46px; padding:0 16px;
  border:1px solid var(--ty-cizgi); border-radius:10px;
  font-family:var(--ty-baslik); font-size:15px; color:var(--ty-murekkep); background:#fff;
}
.tyhd-arama input:focus{ outline:2px solid var(--ty-turuncu); outline-offset:1px; border-color:transparent; }
.tyhd-arama button{
  flex:0 0 auto; height:46px; padding:0 24px; border:0; border-radius:10px; cursor:pointer;
  background:var(--ty-gecis); color:#fff;
  font-family:var(--ty-kondens); font-size:16px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}

/* --- mobil --- */
.tyhd-burger{
  display:none; flex:0 0 auto; align-self:center;
  width:38px; height:38px; border:1px solid var(--ty-cizgi); border-radius:50%;
  background:transparent; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.tyhd-burger span{ display:block; width:16px; height:2px; background:var(--ty-murekkep-2); border-radius:2px; }
.tyhd-mobil{ display:none; }

@media (max-width:1100px){
  .tyhd-menu > li > a,
  .tyhd-menu > li > .tyhd-mega-buton{ font-size:15px; padding:0 10px; }
  .tyhd-logo{ padding:0 18px; }
  .tyhd-logo img{ height:38px; }
  .tyhd-mega-in{ columns:3; }
}

@media (max-width:900px){
  .tyhd-in{ height:66px; padding:0 14px; }
  .tyhd-menu{ display:none; }
  .tyhd-burger{ display:flex; }
  .tyhd-teklif{ display:none; }
  .tyhd-logo{ padding:0 12px; }
  .tyhd-logo img{ height:34px; }
  .tyhd-arama form{ padding:12px 14px; }

  .tyhd-mobil{
    display:block; border-top:1px solid var(--ty-cizgi-soluk);
    background:#fff; padding:18px 14px 24px; max-height:76vh; overflow-y:auto;
  }
  .tyhd-mobil[hidden]{ display:none; }
  .tyhd-mobil-bas{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:12px 2px; margin:0 0 4px;
    background:none; border:0; border-bottom:1px solid var(--ty-cizgi-soluk);
    font-family:var(--ty-kondens); font-size:16px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ty-murekkep);
    cursor:pointer; text-align:left;
  }
  .tyhd-ok{ width:18px; height:18px; flex:0 0 auto; color:var(--ty-murekkep-4);
            transition:transform .22s var(--ty-yay); }
  .tyhd-mobil-bas[aria-expanded="true"] .tyhd-ok{ transform:rotate(180deg); color:var(--ty-turuncu); }
  .tyhd-mobil-kat[hidden]{ display:none; }
  .tyhd-mobil ul{ margin:0 0 16px; padding:0; list-style:none; }
  .tyhd-mobil li a{
    display:block; padding:11px 2px; font-family:var(--ty-baslik);
    font-size:15.5px; font-weight:600; color:var(--ty-murekkep);
    border-bottom:1px solid var(--ty-cizgi-soluk);
  }
  .tyhd-mobil-sayfa li a{ color:var(--ty-murekkep-2); font-weight:500; }
  .tyhd-mobil-teklif{ display:block !important; text-align:center; margin-top:4px; }
}

@media (prefers-reduced-motion:reduce){
  .tyhd, .tyhd *{ transition-duration:.01ms !important; }
}

/* ===========================================================
   ANASAYFA — slider ve kategori kartları
   =========================================================== */

/* --- slider ---
   Görselin metni içine gömülü; kırpmıyoruz, 3:1 oranı korunuyor.
   max-height verilirse object-fit:cover alttaki turuncu şeridi ve
   üstteki logoyu kesiyor — banner'da kırpma zararsız değil. */
.tysl{ position:relative; background:var(--ty-yumusak); overflow:hidden; }
.tysl-pist{ position:relative; display:grid; }
.tysl-slayt{
  grid-area:1/1; display:block; opacity:0; visibility:hidden;
  transition:opacity .45s var(--ty-yay), visibility .45s;
}
.tysl-slayt.aktif{ opacity:1; visibility:visible; }
.tysl-slayt img{ display:block; width:100%; height:auto; }

.tysl-ok{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.88); border:1px solid var(--ty-cizgi);
  color:var(--ty-murekkep); font-size:26px; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(18,23,28,.14);
}
.tysl-ok:hover{ background:#fff; }
.tysl-sol{ left:22px; } .tysl-sag{ right:22px; }

.tysl-metin{ display:none; }

@media (max-width:760px){
  /* Banner yazıları bu genişlikte okunmuyor: yalnız fotoğraf yarısı
     gösteriliyor, mesaj altındaki HTML'den geliyor. */
  .tysl-ok{ display:none; }
  .tysl-slayt img{ aspect-ratio:5/4; height:auto; object-fit:cover; object-position:74% center; }
  .tysl-metin{ display:block; padding:26px 16px 34px; background:var(--ty-yumusak); }
  .tysl-metin h2{
    font-family:var(--ty-kondens); font-size:clamp(27px,7.5vw,36px); font-weight:600;
    letter-spacing:.01em; line-height:1.08; color:var(--ty-murekkep); margin:0;
  }
  .tysl-metin p{ margin:9px 0 0; font-size:16px; color:var(--ty-murekkep-3); }
  .tysl-btn{
    display:block; width:fit-content; margin:26px auto 0;
    background:var(--ty-gecis); color:#fff !important;
    font-family:var(--ty-kondens); font-size:16px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    padding:13px 26px; border-radius:10px; text-decoration:none;
  }
}

/* --- kategori kartları --- */
/* #kategoriler bağlantı hedefi — sticky başlık üstünü örtmesin */
.tykat{ padding:80px 0 96px; background:#fff; scroll-margin-top:100px; }
.tykat-in{ width:100%; max-width:1360px; margin:0 auto; padding:0 24px; }

/* bölüm başlığı: ortada, kalın, altında kısa vurgu çizgisi */
.tybas{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:48px; }
.tybas h2{
  font-family:var(--ty-baslik); font-size:clamp(26px,2.7vw,39px); font-weight:800;
  letter-spacing:-.022em; line-height:1.14; color:var(--ty-murekkep); margin:0;
  text-transform:none;
}
.tybas-cizgi{ margin-top:17px; width:74px; height:4px; border-radius:100px; background:var(--ty-gecis); }

.tykat-izgara{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.tykart{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  background:#fff; border:1px solid var(--ty-cizgi-soluk);
  border-radius:20px; padding:12px;
  transition:border-color .24s var(--ty-yay), box-shadow .24s var(--ty-yay), transform .24s var(--ty-yay);
}
.tykart:hover{
  border-color:rgba(232,85,34,.42); transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(200,80,40,.13), 0 3px 8px rgba(18,23,28,.05);
}

/* Kare sahne görseli 4:3.15 kutuya girerken dikeyde kırpılıyor. Odak %69:
   altı görselin ürün bandı ölçüldü, geçerli aralıkların kesişimi %62-%76. */
.tykart-foto{
  position:relative; aspect-ratio:4/3.15; overflow:hidden;
  border-radius:14px; background:var(--ty-yumusak);
}
.tykart-foto img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center 69%;
  transition:transform .45s var(--ty-yay);
}
.tykart:hover .tykart-foto img{ transform:scale(1.05); }

.tykart-govde{ padding:18px 12px 8px; display:flex; flex-direction:column; gap:9px; flex:1; }
.tykart-ust{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
/* Başlıklar büyük harf basılıyor (ty_buyuk). Negatif harf aralığı
   büyük harfte sıkışık duruyordu; hafif pozitife alındı. */
.tykart-ust h3{
  font-family:var(--ty-baslik); font-size:clamp(16px,1.08vw,19px); font-weight:700;
  letter-spacing:.018em; line-height:1.22; color:var(--ty-murekkep); margin:0; text-transform:none;
}
.tykart-adet{
  flex:0 0 auto; font-family:var(--ty-kondens);
  font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ty-turuncu-koyu); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tykart-alt{ margin:0; font-family:var(--ty-baslik); font-size:13.5px; line-height:1.55; color:var(--ty-murekkep-3); }
.tykart-alt span::after{ content:' · '; color:var(--ty-murekkep-4); }
.tykart-alt span:last-child::after{ content:''; }

.tykart-git{
  margin-top:auto; padding-top:13px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ty-kondens); font-size:14.5px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ty-murekkep-4);
  transition:color .2s var(--ty-yay);
}
.tykart:hover .tykart-git{ color:var(--ty-turuncu); }
.tykart-git svg{ width:16px; height:16px; transition:transform .25s var(--ty-yay); }
.tykart:hover .tykart-git svg{ transform:translateX(4px); }

@media (max-width:1040px){ .tykat-izgara{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .tykat{ padding:46px 0 56px; }
  .tykat-in{ padding:0 16px; }
  .tykat-izgara{ grid-template-columns:1fr; gap:18px; }
  .tykart-foto{ aspect-ratio:16/9; }
}

/* ===========================================================
   ÜRÜN KARTLARI — anasayfa "popüler ürünler", ürün listesi,
   arama sonuçları ve ürün detayındaki benzer ürünler.
   Kutu/çerçeve yok: yalnızca görsel + yazı. Canvas'ın 1.25rem
   başlıkları ve 300px görselleri yeni tema için iriydi.
   =========================================================== */

/* satır içi height:300px yazıldığı için !important şart */
.portfolio-image img,
.product-image img{
  height:200px !important; width:100%; object-fit:contain !important;
}

/* Ürün DETAY sayfasındaki büyük galeri bu kuralın dışında kalmalı:
   o da .product-image içinde ama 600px olarak tasarlanmış. */
.single-product .product-image img{ height:600px !important; }

.portfolio-desc, .product-desc{ padding:14px 4px 4px; }

/* başlık: iri serifsizden yeni tema yüzüne, iki satırda kesiliyor */
#portfolio .portfolio-desc h3,
.product-title h3{
  font-family:var(--ty-baslik) !important;
  font-size:14.5px !important; font-weight:600 !important;
  line-height:1.38; letter-spacing:-.005em; margin:0 0 5px;
  text-transform:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#portfolio .portfolio-desc h3 a,
.product-title h3 a{ color:var(--ty-murekkep); transition:color .18s var(--ty-yay); }
#portfolio .portfolio-item:hover .portfolio-desc h3 a,
.product:hover .product-title h3 a{ color:var(--ty-turuncu); }

/* marka / satıcı satırı: küçük, seyrek, soluk */
#portfolio .portfolio-desc span,
.product-desc span{
  font-family:var(--ty-kondens); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ty-murekkep-4);
  line-height:1.6;
}

/* fiyat / "Fiyat Alınız." */
.product-price{
  font-family:var(--ty-baslik) !important;
  font-size:14.5px !important; font-weight:700 !important;
  color:var(--ty-turuncu-koyu) !important; margin:7px 0 0;
}
.product-price ins{ text-decoration:none; }

@media (max-width:640px){
  .portfolio-image img, .product-image img{ height:150px !important; }
  .single-product .product-image img{ height:380px !important; }
  #portfolio .portfolio-desc h3, .product-title h3{ font-size:13.5px !important; }
  .portfolio-desc, .product-desc{ padding:11px 2px 2px; }
}

/* ===========================================================
   SEO düzeltmelerinin görsel karşılığı.
   Ürün adı <h2> iken <h1> oldu, anasayfa slider başlığı da öyle.
   Canvas'ın h1 kuralları farklı olduğu için eski görünüm burada
   birebir korunuyor — sayfa gözle aynı kalıyor.
   =========================================================== */
#page-title h1.ty-urun-baslik{
  font-size:1.75rem; font-weight:600; letter-spacing:-.01em;
  text-transform:none; line-height:1.25; color:#333;
}
.slider-title h1{ font-size:30px; }
@media (min-width:992px){
  .slider-title h1{
    font-size:50px; line-height:1.3; letter-spacing:-1px;
    font-weight:700; margin-bottom:26px;
  }
}