/* tekeoglu.com.tr — tek stil dosyasi
   Sanayi/hirdavat tedarikcisi: koyu antrasit + turuncu vurgu, sakin tipografi. */

:root {
  --kahve: #11151a;
  --koyu: #1b2129;
  --koyu-2: #262f3a;
  --turuncu: #e2661f;
  --turuncu-ac: #f58634;
  --metin: #23282e;
  --metin-sonuk: #5d6570;
  --cizgi: #e2e5ea;
  --zemin: #f5f6f8;
  --beyaz: #fff;
  --golge: 0 1px 2px rgba(17, 21, 26, .06), 0 8px 24px rgba(17, 21, 26, .06);
  --en: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--metin);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--turuncu); text-decoration: none; }
a:hover { text-decoration: underline; }

.kapsayici { max-width: var(--en); margin: 0 auto; padding: 0 20px; }

/* ---------- Ust bant ---------- */
.ust-bant {
  background: var(--kahve);
  color: #aeb6c0;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ust-bant .kapsayici { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-block: 9px; }
.ust-bant a { color: #dfe4ea; }
.ust-bant .ayrac { margin-left: auto; }

/* ---------- Baslik ---------- */
.baslik { background: var(--koyu); color: #fff; position: sticky; top: 0; z-index: 30; }
.baslik .kapsayici { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo img { height: 52px; width: auto; border-radius: 3px; }
.logo:hover { text-decoration: none; }
.logo-yazi { line-height: 1.15; }
.logo-yazi strong { display: block; color: #fff; font-size: 19px; letter-spacing: .04em; }
.logo-yazi span { display: block; color: #97a1ad; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; }

.menu { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
  color: #cfd6de; padding: 9px 13px; border-radius: 4px;
  font-size: 14.5px; font-weight: 500; letter-spacing: .015em; white-space: nowrap;
}
.menu a:hover { background: var(--koyu-2); color: #fff; text-decoration: none; }
.menu a[aria-current="page"] { background: var(--turuncu); color: #fff; }

.menu-dugme {
  display: none; margin-left: auto; background: var(--koyu-2); color: #fff;
  border: 0; border-radius: 4px; padding: 10px 14px; font-size: 15px; cursor: pointer;
}

/* ---------- Kahraman (ana sayfa) ---------- */
.kahraman { background: var(--kahve); color: #fff; padding-block: 64px 72px; }
.kahraman .kapsayici { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.kahraman h1 { margin: 0 0 18px; font-size: 40px; line-height: 1.16; letter-spacing: -.015em; }
.kahraman h1 em { color: var(--turuncu-ac); font-style: normal; }
.kahraman p { margin: 0 0 26px; color: #b6bec8; font-size: 17px; max-width: 46ch; }
.kahraman-gorsel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kahraman-gorsel img { border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kahraman-gorsel img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }

.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.dugme {
  display: inline-block; padding: 12px 22px; border-radius: 4px;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
}
.dugme:hover { text-decoration: none; }
.dugme-ana { background: var(--turuncu); color: #fff; }
.dugme-ana:hover { background: var(--turuncu-ac); }
.dugme-ikincil { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.dugme-ikincil:hover { background: rgba(255, 255, 255, .08); }

/* ---------- Sayfa basi (ic sayfalar) ---------- */
.sayfa-basi { background: var(--koyu); color: #fff; padding-block: 40px; }
.sayfa-basi h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.01em; }
.kirinti { font-size: 13.5px; color: #98a2ae; }
.kirinti a { color: #c8d0d9; }
.kirinti span { margin: 0 7px; opacity: .5; }

/* ---------- Bolumler ---------- */
.bolum { padding-block: 60px; }
.bolum-gri { background: var(--zemin); }
.bolum-basligi { margin-bottom: 30px; max-width: 62ch; }
.bolum-basligi .ust-yazi {
  color: var(--turuncu); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.bolum-basligi h2 { margin: 0 0 10px; font-size: 27px; letter-spacing: -.01em; }
.bolum-basligi p { margin: 0; color: var(--metin-sonuk); }

/* ---------- Kategori kartlari ---------- */
.izgara-kategori { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kategori-kart {
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 7px;
  overflow: hidden; display: flex; flex-direction: column; color: inherit;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.kategori-kart:hover { text-decoration: none; box-shadow: var(--golge); border-color: #cfd5dd; }
.kategori-kart .foto { aspect-ratio: 3 / 2; background: var(--zemin); overflow: hidden; }
.kategori-kart .foto img { width: 100%; height: 100%; object-fit: cover; }
.kategori-kart .govde { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.kategori-kart h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: .02em; }
.kategori-kart p { margin: 0 0 14px; font-size: 13.5px; color: var(--metin-sonuk); line-height: 1.55; }
.kategori-kart .devam { margin-top: auto; color: var(--turuncu); font-weight: 600; font-size: 14px; }

/* ---------- Urun izgarasi ---------- */
.izgara-urun { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.urun-kart {
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* 🔴 contain, cover DEGIL: bu izgarada hem urun fotografi hem MARKA LOGOSU var
   (LOCTITE, EGESAN, ATLAS ZIMPARA...). cover logolarin kenarini kirpiyordu. */
.urun-kart .foto { aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; overflow: hidden; padding: 14px; }
.urun-kart .foto img { width: 100%; height: 100%; object-fit: contain; }
.urun-kart .ad { padding: 13px 14px 15px; font-size: 14.5px; font-weight: 500; line-height: 1.4; }

/* gorseli olmayan urun icin sakin yer tutucu */
.yer-tutucu {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #eef0f3 0 10px, #e8ebef 10px 20px);
  color: #9aa3ae;
}
.yer-tutucu svg { width: 34px; height: 34px; opacity: .65; }

/* ---------- Kategori aciklamasi (SEO metni) ---------- */
.kategori-metin {
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 7px;
  padding: 22px 24px; margin-top: 34px; font-size: 14.5px; color: var(--metin-sonuk); line-height: 1.75;
}
.kategori-metin h2 { margin: 0 0 10px; font-size: 16px; color: var(--metin); }

/* ---------- Bayi logolari ---------- */
.izgara-bayi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bayi-kart {
  background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 6px;
  padding: 16px; display: grid; place-items: center; aspect-ratio: 3 / 2;
  transition: box-shadow .16s ease;
}
.bayi-kart:hover { box-shadow: var(--golge); text-decoration: none; }
.bayi-kart img { max-height: 100%; width: auto; object-fit: contain; }

/* ---------- Hakkimizda ---------- */
.iki-sutun { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: start; }
.iki-sutun p { margin: 0 0 16px; }
.iki-sutun img { border-radius: 7px; }
.olcu-satiri { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--cizgi); }
.olcu strong { display: block; font-size: 27px; color: var(--turuncu); line-height: 1.1; }
.olcu span { font-size: 13.5px; color: var(--metin-sonuk); }

/* ---------- Iletisim ---------- */
.iletisim-duzen { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.bilgi-liste { list-style: none; margin: 0; padding: 0; }
.bilgi-liste li { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.bilgi-liste li:last-child { border-bottom: 0; }
.bilgi-liste .etiket { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-sonuk); display: block; margin-bottom: 3px; }
.bilgi-liste .deger { font-size: 15.5px; }
.simge { flex: 0 0 34px; height: 34px; border-radius: 6px; background: #fdeee4; color: var(--turuncu); display: grid; place-items: center; }
.simge svg { width: 17px; height: 17px; }

.form-kutu { background: var(--beyaz); border: 1px solid var(--cizgi); border-radius: 8px; padding: 26px; box-shadow: var(--golge); }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alan { margin-bottom: 16px; }
.alan label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--metin-sonuk); margin-bottom: 6px; }
.alan input, .alan select, .alan textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #ccd2da; border-radius: 5px;
  font: inherit; font-size: 15px; color: var(--metin); background: #fff;
}
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: 2px solid var(--turuncu-ac); outline-offset: -1px; border-color: transparent; }
.alan textarea { min-height: 128px; resize: vertical; }
.alan .zorunlu { color: var(--turuncu); }

.bildirim { padding: 13px 16px; border-radius: 6px; font-size: 14.5px; margin-bottom: 20px; }
.bildirim-basarili { background: #e8f6ec; color: #1d6b33; border: 1px solid #bfe3c9; }
.bildirim-hata { background: #fdecea; color: #97231a; border: 1px solid #f3c6c1; }
.bildirim-bilgi { background: #eef2f7; color: #41536b; border: 1px solid #d3dce7; }

/* ---------- Alt bilgi ---------- */
.alt { background: var(--kahve); color: #98a2ae; padding-block: 46px 0; font-size: 14.5px; margin-top: 0; }
.alt-izgara { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 34px; }
.alt h4 { color: #fff; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 14px; }
.alt a { color: #b9c2cd; }
.alt a:hover { color: #fff; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt ul li { margin-bottom: 8px; }
.alt-son { border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 18px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 10px; }
.alt-son .sag { margin-left: auto; }

/* ---------- 404 ---------- */
.bos-durum { text-align: center; padding-block: 60px; color: var(--metin-sonuk); }
.bos-durum h2 { color: var(--metin); margin: 0 0 10px; }

/* ---------- Duyarli ---------- */
@media (max-width: 1000px) {
  .izgara-kategori { grid-template-columns: repeat(2, 1fr); }
  .izgara-urun { grid-template-columns: repeat(3, 1fr); }
  .izgara-bayi { grid-template-columns: repeat(4, 1fr); }
  .kahraman .kapsayici, .iki-sutun, .iletisim-duzen { grid-template-columns: 1fr; gap: 32px; }
  .kahraman h1 { font-size: 32px; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .menu { display: none; width: 100%; flex-direction: column; gap: 2px; }
  .menu.acik { display: flex; }
  .menu-dugme { display: block; }
  .baslik .kapsayici { flex-wrap: wrap; gap: 12px; }
  .izgara-urun { grid-template-columns: repeat(2, 1fr); }
  .izgara-bayi { grid-template-columns: repeat(3, 1fr); }
  .form-satir { grid-template-columns: 1fr; }
  .bolum { padding-block: 44px; }
  .kahraman { padding-block: 44px 50px; }
  .alt-izgara { grid-template-columns: 1fr; gap: 26px; }
  .ust-bant .ayrac { margin-left: 0; }
}

@media (max-width: 420px) {
  .izgara-kategori { grid-template-columns: 1fr; }
  .kahraman h1 { font-size: 27px; }
}

/* ---------- Tanıtım videosu ---------- */
/* aspect-ratio + width/height ikilisi düzen kaymasını (CLS) önlüyor:
   video yüklenmeden önce de yeri hazır duruyor. */
/* 🔴 ORTALAMA YOK (2026-09-15): once max-width:900px + margin:0 auto vardi;
   bolum basligi kapsayicinin sol kenarindayken video ortalanip kayiyordu,
   ayni bolumde iki farkli hiza olusuyordu. Video da kapsayici genisligini
   kullaniyor, boylece baslik/paragraf ile ayni sol kenardan basliyor. */
.video-cerceve{
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--golge);
  line-height: 0;
}
.video-cerceve video{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}