html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   Yazi tipleri

   Sablon her yerde DM Sans kullaniyordu: basliklarla govde metni ayni
   yuvarlak geometrik yuzden geldigi icin sayfa duz, "hazir sablon" gibi
   okunuyordu.

   Basliklar Archivo: dar, duz kesilmis, endustriyel bir grotesk. Sitedeki
   buyuk harfli bolum basliklari (ÜRÜNLERİMİZ, HABERLER) bu yuzle kartona
   basilmis gibi duruyor; ayni piksel boyunda DM Sans'tan daha fazla harf
   sigdirdigi icin uzun Turkce basliklar da daha az satira boluniyor.

   Govde Inter: kucuk punto okunurluk icin tasarlandi, Turkce karakter seti
   (latin-ext) eksiksiz ve genis x-yuksekligi 14-16px'lik metni rahat
   okutuyor.

   Degiskenler style.css'in :root'unda tanimli; site.css en sonda
   yuklendigi icin buradaki ayni ozgullukteki blok onu eziyor.
   ========================================================================== */

:root {
  --text-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Archivo'nun varsayilan harf araligi buyuk puntolarda genis duruyor;
   basliklar hafif sikilastirilinca blok halinde okunuyor. Govde metnine
   dokunulmuyor. */
h1,
h2,
h3,
.sec-title h1,
.sec-title h2 {
  letter-spacing: -0.015em;
}

/* Sablonun tek tek yerlerde cagirdigi, artik yuklenmeyen yazi tipi;
   tanimsiz birakilirsa tarayicinin varsayilanina (Arial) dusuyordu. */
.product-block .cat {
  font-family: var(--text-font);
}

/* ==========================================================================
   İletişim sayfası — ofis kartları, harita ve form

   ÖNEMLİ: Bu sayfada Bootstrap grid'ine (row / col-*) güvenilmiyor.
   wwwroot/css/bootstrap.min.css dosyası bozuk (uzantısı .css ama içeriği
   ayrıştırılamayan ikili veri) ve style.css'te de bir grid tanımı yok, yani
   col-* sınıfları sitede tamamen etkisiz. Düzen bu yüzden kendi flex/grid
   kurallarıyla kuruluyor.

   Kurallar .ofis-*, .harita-* ve .iletisim-* altına kapatıldı; footer ve
   mobil menüdeki iletişim bilgileri bu dosyadan etkilenmez.
   ========================================================================== */

.iletisim-bolum {
  padding-bottom: 3.5em;
}

.iletisim-bolum__baslik {
  margin: 2.2em 0 1.8em;
}

/* --- Ofis kartları --- */

.ofis-listesi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6em;
  margin: 0 0 2.4em;
}

@media (min-width: 768px) {
  .ofis-listesi--coklu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ofis-listesi--tekli {
    max-width: 620px;
    margin-inline: auto;
  }
}

.ofis-karti {
  height: 100%;
  background: #fff;
  border: 1px solid #e6e8ec;
  /* Üstteki kırmızı şerit kartı markaya bağlıyor. */
  border-top: 3px solid var(--theme-color2, #d70006);
  padding: 1.8em 1.9em 1.6em;
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.ofis-karti:hover {
  box-shadow: 0 14px 34px rgba(35, 35, 49, 0.1);
  transform: translateY(-3px);
}

.ofis-karti__ad {
  color: var(--theme-color1, #232331);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 1.1em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid #eef0f3;
}

.ofis-karti__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ofis-karti__liste li {
  display: flex;
  /* flex-start olmadan ikon kabı satır yüksekliğine göre esner; adres üç
     satıra çıkınca ikon ovalleşiyordu. */
  align-items: flex-start;
  gap: 0.9em;
  margin-bottom: 1em;
}

.ofis-karti__liste li:last-child {
  margin-bottom: 0;
}

.ofis-karti__ikon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f8;
  color: var(--theme-color2, #d70006);
  border-radius: 50%;
  transition: background 300ms ease, color 300ms ease;
}

.ofis-karti:hover .ofis-karti__ikon {
  background: var(--theme-color2, #d70006);
  color: #fff;
}

.ofis-karti__ikon span {
  font-size: 15px;
  line-height: 1;
}

.ofis-karti__metin {
  color: var(--text-color, #797f7d);
  font-size: 15px;
  line-height: 1.65;
  padding-top: 0.4em;
}

.ofis-karti__metin a {
  color: var(--text-color, #797f7d);
  transition: color 300ms ease;
}

.ofis-karti__metin a:hover {
  color: var(--theme-color2, #d70006);
}

/* --- Haritalar --- */

.harita-listesi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8em;
  padding-bottom: 3.5em;
}

@media (min-width: 768px) {
  .harita-listesi--coklu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.harita-karti__ad {
  color: var(--theme-color1, #232331);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0.7em;
}

.harita-karti iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid #e6e8ec;
}

/* --- İletişim formu --- */

.iletisim-form-kart {
  background: #fff;
  border: 1px solid #e6e8ec;
  box-shadow: 0 18px 44px rgba(35, 35, 49, 0.07);
  padding: 2.6em 2.6em 2.4em;
}

.iletisim-form-kart__ust {
  margin-bottom: 2em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid #eef0f3;
}

.iletisim-form-kart__ust h3 {
  color: var(--theme-color1, #232331);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 0.45em;
  position: relative;
  padding-left: 0.7em;
}

/* Başlığın solundaki kırmızı çizgi, ofis kartlarının üst şeridiyle aynı dil. */
.iletisim-form-kart__ust h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  bottom: 0.14em;
  width: 4px;
  background: var(--theme-color2, #d70006);
}

.iletisim-form-kart__ust p {
  color: var(--text-color, #797f7d);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  max-width: 62ch;
}

.iletisim-form__izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.4em;
}

@media (min-width: 768px) {
  .iletisim-form__izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .iletisim-form__alan--tam {
    grid-column: 1 / -1;
  }
}

.iletisim-form__alan {
  margin-bottom: 1.4em;
}

.iletisim-form__alan label {
  display: block;
  color: var(--theme-color1, #232331);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}

.iletisim-form__alan label .zorunlu {
  color: var(--theme-color2, #d70006);
}

.iletisim-form .form-control {
  display: block;
  width: 100%;
  background: #f7f8fa;
  border: 1px solid #e3e5ea;
  border-radius: 0;
  height: 56px;
  padding: 12px 18px;
  font-size: 15px;
  font-family: inherit;
  color: var(--theme-color1, #232331);
  box-shadow: none;
  transition: border-color 250ms ease, background 250ms ease, box-shadow 250ms ease;
}

.iletisim-form textarea.form-control {
  height: auto;
  min-height: 150px;
  padding-top: 14px;
  line-height: 1.7;
  resize: vertical;
}

.iletisim-form .form-control::placeholder {
  color: #a9aeb5;
}

.iletisim-form .form-control:focus {
  background: #fff;
  border-color: var(--theme-color2, #d70006);
  box-shadow: 0 0 0 3px rgba(215, 0, 6, 0.1);
  outline: none;
}

.iletisim-form .form-control.input-validation-error {
  border-color: var(--theme-color2, #d70006);
  background: #fff7f7;
}

.iletisim-form .text-danger {
  display: block;
  color: var(--theme-color2, #d70006);
  font-size: 13px;
  margin-top: 0.4em;
}

.iletisim-form__alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
  padding-top: 1.6em;
  border-top: 1px solid #eef0f3;
}

.iletisim-form__not {
  color: #a9aeb5;
  font-size: 13px;
  margin: 0;
}

@media (max-width: 575px) {
  .iletisim-form-kart {
    padding: 1.8em 1.4em 1.6em;
  }

  .ofis-karti {
    padding: 1.5em 1.4em 1.3em;
  }

  .iletisim-form__alt {
    justify-content: center;
    text-align: center;
  }

  .harita-karti iframe {
    height: 300px;
  }
}

/* ==========================================================================
   Ana sayfa — "Hizmet Verdiğimiz Sektörler" bölümünün arka planı

   Şablonun kuralı (style.css: .services-section .bg-image) dokuyu
   background-size: contain + max-height: 454px ile yalnızca bölümün tepesine
   koyuyordu. Bölüm ~1800px olduğu için alt üçte ikisi düz beyaz kalıyor,
   aradaki geçiş de bıçakla kesilmiş gibi yatay bir çizgi oluşturuyordu.

   Yerine bölümün tamamını kaplayan bir ışık geçti: başlığın arkasından açılan
   beyaz bir hüzme, sağ altta marka kırmızısının %10'u kadar bir sis, sol altta
   gri bir gölge ve hepsinin altında yumuşak bir dikey gradyan. Doku görseli yok
   — bölümde zaten 13 ürün fotoğrafı ve 13 kırmızı etiket var, arka plan onların
   önüne geçmiyor.

   Yarıçaplar yüzde değil piksel: bölümün yüksekliği içerik sayısıyla değiştiği
   için yüzde verilince ışığın çapı da kayıyordu.

   Zemin serin griden sıcak kağıt tonuna alındı. Üstteki Hakkımızda bölümü
   beyaz olduğu için ikisi tek bir uzun blok gibi okunuyordu; sıcak/soğuk
   karşıtlığı araya çizgi çekmeden iki yüzeyi ayırıyor. Ürün fotoğraflarının
   çoğu bej/krem zeminli olduğundan kartlar da bu zemine daha iyi oturuyor.
   ========================================================================== */

.services-section {
  background: #faf7f2;
}

.services-section .sektorler-doku {
  /* Şablonun contain + 454px sınırını geçersiz kılar. */
  max-height: none;
  height: 100%;
  background-image:
    radial-gradient(
      1600px 520px at 50% -40px,
      #fffdf9 0%,
      rgba(255, 253, 249, 0) 100%
    ),
    radial-gradient(
      900px 640px at 90% 102%,
      rgba(215, 0, 6, 0.09) 0%,
      rgba(215, 0, 6, 0) 100%
    ),
    /* Gölge de sıcak: gri leke kağıt tonunun üstünde kirli duruyordu. */
    radial-gradient(
      800px 600px at 6% 94%,
      rgba(120, 100, 72, 0.13) 0%,
      rgba(120, 100, 72, 0) 100%
    ),
    linear-gradient(180deg, #fdfbf7 0%, #f1eade 54%, #faf7f2 100%);
  opacity: 1;
}

/* Dar ekranda bölüm ~5000px'e uzuyor; ışığın odağını üstte tutmak için alt
   iki lekeyi kapatıp gradyanı kısaltıyoruz, yoksa ekranın ortasında asılı
   kalıyorlar. */
@media (max-width: 991px) {
  .services-section .sektorler-doku {
    background-image:
      radial-gradient(
        900px 420px at 50% -30px,
        #fffdf9 0%,
        rgba(255, 253, 249, 0) 100%
      ),
      linear-gradient(180deg, #fdfbf7 0%, #f3ede3 30%, #faf7f2 100%);
  }
}

/* ==========================================================================
   Ana sayfa — hero (Slider bileşeni)

   Eski slider üç görselden ibaretti ve metin görselin içine gömülüydü: dil
   değişince metin Türkçe kalıyor, mobilde okunmuyor, arama motoru göremiyordu.
   Artık görsel yalnızca fotoğraf; başlık, alt başlık ve butonlar HTML.

   Fotoğrafın solu kasıtlı olarak boş (1920x600, 3.2:1) — metin bloğu oraya
   oturuyor. Yükseklik vw ile veriliyor ki fotoğrafın oranı korunsun; alt ve üst
   sınır clamp ile tutuluyor.
   ========================================================================== */

/* Slaytlar tek grid hücresinde üst üste duruyor; kapsayıcının yüksekliği en
   uzun slayta göre oluşuyor ve geçişte zıplama olmuyor. */
.kahraman-kutu {
  position: relative;
  display: grid;
}

.kahraman-kutu > .kahraman {
  grid-area: 1 / 1;
}

.kahraman-kutu--coklu > .kahraman {
  opacity: 0;
  /* visibility, pasif slaytları klavye sırasından da çıkarır. */
  visibility: hidden;
  transition: opacity 700ms ease, visibility 0s linear 700ms;
}

.kahraman-kutu--coklu > .kahraman.is-aktif {
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease, visibility 0s;
}

.kahraman-noktalar {
  position: absolute;
  z-index: 4;
  bottom: 26px;
  /* Kapsayıcının sol kenarına, yani metin bloğunun hizasına oturur. */
  left: max(20px, min(calc((100% - 1170px) / 2 + 20px), 7vw));
  display: flex;
  gap: 10px;
}

.kahraman-nokta {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(33, 31, 28, 0.24);
  cursor: pointer;
  transition: background 300ms ease, width 300ms ease;
}

.kahraman-nokta.is-aktif {
  width: 56px;
  background: var(--theme-color2, #d70006);
}

.kahraman-nokta:focus-visible {
  outline: 2px solid #211f1c;
  outline-offset: 4px;
}

.kahraman {
  position: relative;
  /* Negatif z-index'li katmanlar bölümün dışına taşmasın. */
  isolation: isolate;
  overflow: hidden;
  background: #f1e6dc;
}

.kahraman__gorsel {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  /* Kutular sağda; dar ekranda önce sol boşluk kırpılsın. */
  background-position: center right;
  background-repeat: no-repeat;
}

/* Soldan gelen krem tül. Fotoğrafın sol alanı zaten açık ama yaprak gölgesi
   yüzünden tonu dalgalanıyor; bu katman metnin altını düzleştiriyor. */
.kahraman::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(246, 240, 233, 0.97) 0%,
    rgba(246, 240, 233, 0.88) 24%,
    rgba(246, 240, 233, 0.4) 44%,
    rgba(246, 240, 233, 0) 60%
  );
}

/* Metin bloğu sayfanın ortalanmış 1170px kapsayıcısına bağlanamıyor: ekran
   genişledikçe kapsayıcının sol kenarı sağa kayarken fotoğraftaki boş alan
   oranla büyüyor, aradaki temiz genişlik daralıyordu (1600px'te 381px,
   2560px'te 271px). Bunun yerine sol dolgu 7vw'ye kilitleniyor — 1250px'in
   altında yine kapsayıcı hizasında kalıyor, üstünde ekranla birlikte açılıyor. */
.kahraman__ic {
  position: relative;
  padding-left: max(20px, min(calc((100% - 1170px) / 2 + 20px), 7vw));
  padding-right: 20px;
  /* 31.25vw = fotoğrafın 3.2:1 oranı. Alt sınır fazla yükseltilirse kapsayıcı
     kareleşiyor, cover görselin yanlarını kırpıyor ve ürünler metnin üstüne
     geliyordu; bu yüzden 360px'te tutuluyor. */
  min-height: clamp(360px, 31.25vw, 600px);
  display: flex;
  align-items: center;
}

/* İkinci fotoğrafta ürünler 38,5%'te başlıyor; metin sütunu 30vw'yi geçerse
   çantanın üstüne biniyor. */
.kahraman__metin {
  max-width: min(31rem, 30vw);
  padding: 44px 0;
}

/* Marka satırı: yeni bir cümle uydurmadan hiyerarşi kurar. Soldaki kırmızı
   çizgi fotoğraftaki dikey kırmızı şeridi metne bağlıyor. */
.kahraman__marka {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a7d6d;
}

.kahraman__marka::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--theme-color2, #d70006);
}

.kahraman__baslik {
  margin: 0 0 20px;
  /* !important zorunlu: style.css'te "h2 { color: #ca1f26 !important }" var ve
     sitedeki bölüm başlıklarının kırmızısı oradan geliyor. O kuralı
     değiştirmek tüm sayfaları etkilerdi; ikinci slaytın h2 başlığı bu yüzden
     burada ayrıca geçersiz kılınıyor. */
  color: #211f1c !important;
  font-size: clamp(31px, 3.5vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.kahraman__alt {
  /* Genişliği metin bloğundan alıyor; ayrı bir sınır koyulursa iki slaytın
     sütun genişliği farklılaşıyor. */
  margin: 0 0 34px;
  color: #5f584e;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
}

.kahraman__butonlar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.kahraman__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease,
    transform 260ms ease, box-shadow 260ms ease;
}

.kahraman__btn--dolu {
  background: var(--theme-color2, #d70006);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(215, 0, 6, 0.24);
}

.kahraman__btn--dolu:hover,
.kahraman__btn--dolu:focus {
  background: #b30005;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(215, 0, 6, 0.3);
}

.kahraman__ok {
  transition: transform 260ms ease;
}

.kahraman__btn--dolu:hover .kahraman__ok {
  transform: translateX(4px);
}

.kahraman__btn--cizgi {
  border: 1px solid rgba(33, 31, 28, 0.26);
  color: #211f1c;
}

.kahraman__btn--cizgi:hover,
.kahraman__btn--cizgi:focus {
  border-color: #211f1c;
  background: rgba(33, 31, 28, 0.05);
  color: #211f1c;
}

.kahraman__btn:focus-visible {
  outline: 2px solid #211f1c;
  outline-offset: 3px;
}

/* Sayfa açılışında kademeli giriş. */
@keyframes kahramanGir {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Kural yalnizca aktif slayta uyguladigi icin, slayt degistiginde secici yeniden
   eslesiyor ve animasyon kendiliginden bastan calisiyor. */
.kahraman.is-aktif .kahraman__marka,
.kahraman.is-aktif .kahraman__baslik,
.kahraman.is-aktif .kahraman__alt,
.kahraman.is-aktif .kahraman__butonlar {
  animation: kahramanGir 820ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.kahraman.is-aktif .kahraman__baslik { animation-delay: 90ms; }
.kahraman.is-aktif .kahraman__alt { animation-delay: 180ms; }
.kahraman.is-aktif .kahraman__butonlar { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .kahraman.is-aktif .kahraman__marka,
  .kahraman.is-aktif .kahraman__baslik,
  .kahraman.is-aktif .kahraman__alt,
  .kahraman.is-aktif .kahraman__butonlar {
    animation: none;
  }

  .kahraman-kutu--coklu > .kahraman {
    transition: none;
  }

  .kahraman__btn:hover {
    transform: none;
  }
}

/* 992px altında 3.2:1'lik şerit çok alçalıyor: cover görselin yanlarından
   üçte birini kırpıyor, kutular sola kayıp metnin altına giriyordu. Bu
   genişlikten sonra fotoğraf ve metin alt alta ayrılıyor — hem fotoğraf tam
   görünüyor hem metin kendi zemininde duruyor. */
@media (max-width: 991px) {
  .kahraman__gorsel {
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(190px, 30vw, 300px);
    background-position: 68% center;
  }

  .kahraman::before {
    display: none;
  }

  .kahraman__ic {
    min-height: 0;
    padding: 44px 20px 52px;
    background: #f4ece2;
  }

  .kahraman__metin {
    max-width: 40rem;
    padding: 0;
  }

  .kahraman__baslik {
    font-size: clamp(29px, 4.6vw, 42px);
  }

  /* Dikey düzende noktalar fotoğrafın altında, metnin hizasında. */
  .kahraman-noktalar {
    left: 20px;
    bottom: auto;
    top: clamp(190px, 30vw, 300px);
    transform: translateY(-30px);
  }
}

@media (max-width: 575px) {
  .kahraman__ic {
    padding: 36px 20px 44px;
  }

  .kahraman__btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 16px 22px;
  }
}

/* ==========================================================================
   Ana sayfa — Sektörler altındaki bant

   Görsel (bant-karton-kirmizi.jpg) ortada kırmızı, iki yanda karton kenarları
   olan simetrik bir kompozisyon. Şablonun iki kuralı bunu bozuyordu:

   1) .call-to-action:before — %20 opaklıkta #232331 tül. Görseldeki kırmızıyı
      #C10303'ten #A3080C'ye düşürüyordu; beyaz metnin kontrastı tülsüz de
      yeterli (5,9:1) olduğu için kapatıldı.
   2) .call-to-action padding: 200px 0 120px — sabit yükseklik içinde asimetrik
      dolgu metni yukarı itiyordu. Kompozisyon simetrik olduğundan sıfırlandı.
   ========================================================================== */

.call-to-action {
  padding: 0;
}

.call-to-action:before {
  display: none;
}

/* --- Bandin kendisi ---

   Telefonda bozulan uc sey vardi, ucu de satir ici stilden geliyordu:

   1) height: 350px sabitti. background-size: cover, 390px'lik bir ekranda
      1920x640'lik gorseli 350px yuksekligi doldurmak icin ~%55 olcekle
      kirpiyor; geriye yalnizca ortadaki duz kirmizi kaliyor, iki yandaki
      karton kompozisyonu tamamen disarida kaliyordu. Yukseklik ekranla
      birlikte kuculunce (min 190px) kirpma orani duser ve karton kenarlar
      telefonda da gorunur.
   2) font-size: 35px sabitti; 390px'de baslik uc satira bolunup bandin
      icinde sikisik duruyordu.
   3) .auto-container'in yatay dolgusu style.css'te sifirlanmis (satir 327),
      dolayisiyla metin ekran kenarina yapisiyordu. Dolgu bandin kendisine
      veriliyor; genel kural degismiyor.

   Masaustunde olculer eskisiyle ayni: 34vw, 1030px ustunde zaten 350px'e
   dayaniyor. */

.bant-sektor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(190px, 34vw, 350px);
  padding: clamp(32px, 6vw, 60px) 24px;
  background-image: url(../images/bant-karton-kirmizi.jpg);
}

.bant-sektor__baslik {
  margin: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: clamp(22px, 5.4vw, 35px);
  line-height: 1.3;
  /* Destekleyen tarayicilarda satirlari esit uzunlukta boler; desteklemeyende
     bir etkisi olmaz. */
  text-wrap: balance;
}

/* Logo kutusu, sablonda ustteki iletisim barina bindirilsin diye 40px yukari
   cekiliyor (style.css: .header-lower .logo-box). O bar bu projede kapali
   (style.css: .header-top { display: none }), dolayisiyla telafi edecek bir
   yukseklik yok: logo sayfanin tepesinden 20px tasiyor ve .page-wrapper
   overflow:hidden oldugu icin ustu kesik goruntuleniyordu. responsive.css
   ayni sifirlamayi 1199px altinda zaten yapiyor; eksik olan masaustuydu. */
.header-lower .logo-box {
  margin-top: 0;
  /* style.css'te padding-left: 0. Panelden yuklenen logo dosyasinin solunda hic
     bosluk yoksa (canlidaki logoda "O" harfi 0. pikselden basliyor) logo sayfa
     kenarina yapisip kirpilmis gibi duruyor. Kutunun kendi bosluğu her logo
     dosyasi icin garanti veriyor. */
  padding-left: 18px;
}

/* Logo iki baslikta da kirpilmamali.

   Sablon .main-header .logo img'a width:170px !important, height:70px ve
   object-fit:cover veriyor (style.css). Bu ucu yalnizca kutu tam olarak
   logonun oraninda (canlida 340x140 = 2.43:1) oldugunda dogru calisir;
   oran tutmazsa cover farki kirpar.

   Sticky logo fb215cb'de menuyu ortalamak icin flex ogesi yapildi
   (flex:1 1 0; min-width:0), yani genisligi artik icerikten degil flex
   dagilimindan geliyor: max-width:100% img'in 170px'ini kutuya indiriyor,
   height:70px sabit kaldigi icin oran bozuluyor ve cover fazlaligi soldan
   ve sagdan esit kesiyor -- masaustunde her genislikte 3.44px.

   contain hicbir kosulda kirpmaz, tasan yon varsa gorseli kuculterek
   sigdirir. width:auto ise yer varken logonun kendi oranini korur.
   Ust baslikta kutu bugun zaten tam oranda oldugu icin gorunum degismiyor;
   kural oraya da yaziliyor cunku panelden farkli oranda bir logo
   yuklendiginde ayni hata orada da olusur. */
.main-header .logo img,
.sticky-header .logo img {
  width: auto !important;
  object-fit: contain;
}

/* Menu ogeleri arasindaki bosluk sablonda sabit 70px. Inter, DM Sans'tan
   biraz genis: ayni menu 1200px'de 887px yerine 930px yer kapliyordu. Bosluk
   ekranla birlikte kuculunce menunun genisligi eski haline donuyor (1200px'de
   889px), yani yazi tipi degisikligi ust menuyu daraltmis olmuyor. 1920px'de
   3.6vw ~ 69px; genis ekranlarda gorunum aynen korunuyor.

   Not: 1200-1300px arasinda logonun sol tarafi kirpik goruluyor. Bu, yazi
   tipinden once de vardi (logo kutusu bu genislikte 310px yerine ~127px'e
   sikisiyor) ve ayri bir duzeltme gerektiriyor. */
.main-menu .navigation > li {
  margin-right: clamp(38px, 3.6vw, 70px);
}

/* ==========================================================================
   Urunler sayfasi — kategori filtresi ve urun izgarasi

   Duzen sayfaya gomulu <style> blogundan ve satir ici stillerden geliyordu;
   ikisi de medya sorgulariyla ezilemedigi icin sayfa telefonda bozuluyordu:

   1) Kategoriler 230px genisliginde dikey bir sutundu ve urunlerin ustunde
      neredeyse bir ekran dolusu yer kapliyordu.
   2) Urunler tek sutun halinde alt alta diziliyordu (768px'de bile), sagda
      ~225px bos alan kaliyordu; 101 urunle sayfa telefonda 31.000 piksel
      uzunluga cikiyordu.
   3) Gorseller 240x250px'e sabitlenmisti, hucreyi doldurmuyordu.

   Masaustu duzeni degismiyor: asagidaki ilk blok, sayfadan tasinan
   kurallarin birebir aynisi.
   ========================================================================== */

#mixitup-gallery {
  display: flex;
  max-width: 1440px;
  margin-inline: auto;
  /* justify-content: center idi; kategori filtresi az urun kalinca satirla
     birlikte ortalanip saga kayiyordu. Filtre sutunu solda sabit, urun
     listesi kalan genisligi aliyor. */
  justify-content: flex-start;
  align-items: flex-start;
}

#mixitup-gallery .nav-outer {
  flex: 0 0 auto;
}

#mixitup-gallery .filter-list {
  flex: 1 1 auto;
  min-width: 0;
}

/* Kategori listesi. Secici sablonun .featured-products .filters li kuralini
   (0,2,1) gecmek zorunda; satir ici stiller kalkinca ozgulluk belirleyici
   oldu. */
.featured-products .filters .kategori-filtresi {
  margin-right: 2em;
}

.featured-products .filters .kategori-filtresi li {
  display: block;
  width: 230px;
  text-align: left;
}

.featured-products .filters .kategori-filtresi li + li {
  margin-top: 0.6em;
}

/* Kalinlik eskiden yalnizca "Tum urunler" satirindaydi ve sabitti; artik
   secili kategoriyi gosteriyor. */
.featured-products .filters .kategori-filtresi li.active {
  font-weight: 700;
}

@media (max-width: 991px) {
  /* 120px/90px masaustu dolgusu telefonda basligin altinda bos bir ekran
     birakiyordu. Ust dolgu 36 degil 70px: sayfa basligindaki gorsel mutlak
     konumlu ve kendi bolumunden 48px tasiyor, ilk 48px zaten bandin altinda
     kaliyor. */
  .featured-products {
    padding: 70px 0 56px;
  }

  #mixitup-gallery {
    flex-direction: column;
    /* flex-start, sutun duzeninde cocuklarin genisligini icerige gore
       kisitliyor: liste 375px yerine 242px kaliyordu. */
    align-items: stretch;
    /* .auto-container'in yatay dolgusu style.css'te sifirlanmis. */
    padding: 0 16px;
  }

  /* Kategoriler ust uste yerine yan yana etiketler. Kaydirma serit yerine
     satir atlatiliyor: uzun kategori adlariyla tek seritte kalanlar ekran
     disinda kalir ve fark edilmezdi. */
  .featured-products .filters {
    margin-bottom: 0;
  }

  .featured-products .filters .kategori-filtresi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
  }

  .featured-products .filters .kategori-filtresi li {
    width: auto;
    margin: 0;
    padding: 9px 14px;
    font-size: 15px;
    line-height: 1.25;
    background: #fff;
    /* Urun kartlarindaki cerceveyle ayni; kose yuvarlatmasi urun
       kutularinin keskin hatlarina uysun diye 2px'te birakildi. */
    border: 1px solid #e4e1d5;
    border-radius: 2px;
  }

  .featured-products .filters .kategori-filtresi li.active {
    background: var(--bg-theme-color2, #d70006);
    border-color: var(--bg-theme-color2, #d70006);
    color: #fff;
  }

  /* Sablonun alt cizgi animasyonu etiketin icinde yersiz duruyor. */
  .featured-products .filters .kategori-filtresi li:before {
    display: none;
  }

  /* Izgara: 390px'de iki, 600px ustunde uc-dort sutun. MixItUp gizledigi
     ogelere display: none verdigi icin izgara akisindan da cikiyorlar. */
  .filter-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  .product-block {
    margin-bottom: 0;
  }

  /* Gorseli saran bag, esnek kutunun icinde icerik genisliginde kaliyor;
     blok yapilmazsa gorsel hucreyi doldurmuyor. */
  .product-block .image a {
    display: block;
    width: 100%;
  }

  #urunler-img {
    /* inline-block birakilirsa satir tabani icin altta 11px bosluk kaliyor. */
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Sablon gorseli %10 buyutup ustune gelince %20'ye cikariyor. Dokunmatikte
     hover yok, yani buyutme kalici: gorselin kenarlari bosuna kirpiliyordu. */
  .product-block .image img {
    transform: none;
  }
}

/* ==========================================================================
   Alt bilgi (footer) rengi

   Sablonun rengi #232331'di: maviye calan soguk bir koyu ton, lacivert gibi
   okunuyor ve markayla bir iliskisi yok. Sitenin geri kalani sicak bir
   paletle calisiyor (kahraman bolumunun kagit zemini #f4ece2, urun ve bant
   gorsellerindeki karton tonlari, kirmizi #d70006).

   Yeni zemin yakin koyulukta ama sicak: koyu karton/espresso siyahi. Kirmizi
   ikonlar ve beyaz metin ustunde daha net duruyor, sayfanin sonu da ustundeki
   sicak zeminlerle ayni aileden geliyor.

   Kirmizi ince ust serit, iletisim sayfasindaki ofis kartlarinda zaten
   kullanilan dil (site.css: .ofis-karti); alt bilgiyi markaya baglayan tek
   vurgu o, gerisi sessiz kaliyor.
   ========================================================================== */

.main-footer {
  border-top: 3px solid var(--theme-color2, #d70006);
}

.main-footer .bg-image:before {
  background-color: #2b1c18;
}

/* Telif seridi ve ikon kutulari: zeminden bir ton koyu, ayni sicak aile. */
.main-footer .footer-bottom,
.main-footer .contact-info-block .icon-box {
  background-color: #1f1310;
}

/* Soguk gri (#9898a0) sicak zeminde yesilimsi duruyor; ayni acikliktaki
   sicak gri kullaniliyor (zemine karsi kontrast 6,4:1). */
.main-footer .contact-info-block .text,
.main-footer .contact-info-block .text a,
.main-footer .footer-bottom .copyright-text p,
.main-footer .footer-bottom .copyright-text a {
  color: #a9a09b;
}

/* ==========================================================================
   Haberler sayfasi — kronolojik serit

   Liste col-lg-4 sinifiyla uclu izgara olacak sekilde yazilmisti ama bu
   sitede Bootstrap grid'i yok (bootstrap.min.css bozuk), dolayisiyla uc
   haber alt alta ~450px'lik gorsellerle diziliyordu. Ucunde de ayni stok
   fotograf oldugu icin sayfa ayni gorseli uc kez tam boy gosteriyordu.

   Yeni duzen icerigin zenginligine bagimli degil: tasiyici oge tarih.
   Gorsel varsa saga giriyor, yoksa ucuncu sutun sifir genislikte kaliyor;
   ozet varsa basligin altina, yoksa satir kisaliyor.
   ========================================================================== */

.haberler-bolum {
  /* Sayfa basligindaki gorsel mutlak konumlu ve kendi bolumunden 48px
     tasiyor; ilk 48px zaten bandin altinda kaliyor. */
  padding: 70px 0 90px;
}

.haber-listesi {
  max-width: 980px;
  margin-inline: auto;
  /* .auto-container'in yatay dolgusu style.css'te sifirlanmis (satir 328);
     liste kendi dolgusunu tasiyor. */
  padding: 0 20px;
}

.haber-bos {
  text-align: center;
  color: var(--text-color, #797f7d);
  padding: 40px 0;
}

/* --- Yil ayraci --- */

.haber-yil {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 46px 0 4px;
  font-family: var(--title-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--theme-color1, #232331);
}

.haber-yil:first-child {
  margin-top: 0;
}

.haber-yil::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--theme-color2, #d70006);
}

/* --- Satir --- */

.haber-satiri {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 0 32px;
  align-items: start;
  /* Yatay dolgu, ustune gelince cikan zeminin metne yapismamasi icin;
     negatif kenar bosluguyla metin hizasi bozulmuyor. */
  padding: 28px 18px;
  margin: 0 -18px;
  border-bottom: 1px solid #e6e2dc;
  transition: background-color 200ms ease;
}

.haber-satiri:hover {
  background-color: #faf7f2;
}

/* --- Tarih --- */

.haber-satiri__gun {
  display: block;
  font-family: var(--title-font);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--theme-color1, #232331);
  transition: color 200ms ease;
}

.haber-satiri:hover .haber-satiri__gun {
  color: var(--theme-color2, #d70006);
}

.haber-satiri__ay {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--theme-color2, #d70006);
}

.haber-satiri__yil {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  color: #7a736d;
}

/* --- Metin --- */

.haber-satiri__baslik {
  margin: 0;
  font-family: var(--title-font);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

.haber-satiri__baslik a {
  color: var(--theme-color1, #232331);
  transition: color 200ms ease;
}

.haber-satiri:hover .haber-satiri__baslik a {
  color: var(--theme-color2, #d70006);
}

/* style.css'te ":active, :focus { outline: none !important; }" (satir
   844-847) var; bu kural !important tasidigi icin !important olmayan bir
   kural onu ezemiyor. Ozguluk (0,2,1) > (0,1,0) oldugundan !important
   eklenince kazaniyor. */
.haber-satiri__baslik a:focus-visible {
  outline: 2px solid var(--theme-color2, #d70006) !important;
  outline-offset: 3px;
}

.haber-satiri__ozet {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-color, #797f7d);
  max-width: 62ch;
}

/* --- Gorsel --- */

.haber-satiri__gorsel {
  display: block;
  width: 180px;
}

.haber-satiri__gorsel img {
  display: block;
  width: 100%;
  height: 135px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .haberler-bolum {
    padding: 60px 0 64px;
  }

  .haber-listesi {
    padding: 0 16px;
  }

  .haber-satiri {
    grid-template-columns: 1fr;
    gap: 14px 0;
    padding: 22px 14px;
    margin: 0 -14px;
  }

  /* Gorsel DOM'da sonda; mobilde satirin ustune aliniyor. */
  .haber-satiri__gorsel {
    order: -1;
    width: 100%;
  }

  .haber-satiri__gorsel img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Tarih tek satira iniyor. */
  .haber-satiri__tarih {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .haber-satiri__tarih::before {
    content: "";
    align-self: center;
    width: 18px;
    height: 2px;
    background: var(--theme-color2, #d70006);
  }

  .haber-satiri__gun {
    font-size: 17px;
    font-weight: 700;
  }

  .haber-satiri__ay,
  .haber-satiri__yil {
    margin-top: 0;
    font-size: 13px;
  }

  .haber-satiri__baslik {
    font-size: 20px;
  }

  .haber-satiri__ozet {
    font-size: 15px;
  }
}

/* ==========================================================================
   Haber detay sayfasi

   Olcu 900px'den 720px'e iniyor: 16px metinde satir 100 karakteri asiyordu,
   goz satir basina donerken kayboluyor. text-align: justify de kalkti; dar
   sutunda Turkce metinde kelime araları duzensiz aciliyordu.
   ========================================================================== */

.haber-detay {
  display: block;
  max-width: 720px;
  margin-inline: auto;
  padding: 70px 20px 90px;
}

/* Listedeki tarih vurgusunun aynisi. */
.haber-detay__tarih {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--theme-color2, #d70006);
}

.haber-detay__tarih::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.haber-detay__baslik {
  margin: 0 0 28px;
  font-family: var(--title-font);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--theme-color1, #232331);
}

.haber-detay__gorsel {
  margin: 0 0 28px;
}

.haber-detay__gorsel img {
  display: block;
  width: 100%;
  height: auto;
}

.haber-detay__ozet {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--theme-color1, #232331);
}

.haber-detay__icerik {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color, #797f7d);
}

.haber-detay__icerik p {
  margin-bottom: 1.2em;
}

.haber-detay__geri {
  margin-top: 36px;
}

.haber-detay__geri a {
  color: var(--theme-color2, #d70006);
  font-weight: 600;
}

/* style.css'teki ":active, :focus { outline: none !important; }" (satir
   844-847) resetini ezmek icin !important gerekiyor; liste satirindaki
   .haber-satiri__baslik a:focus-visible ile ayni gorunum. */
.haber-detay__geri a:focus-visible {
  outline: 2px solid var(--theme-color2, #d70006) !important;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .haber-detay {
    padding: 60px 16px 70px;
  }

  .haber-detay__baslik {
    font-size: 26px;
  }

  .haber-detay__ozet {
    font-size: 16px;
  }
}

/* Detay sayfasindaki bant basligi artik h1 degil div (sayfadaki tek h1
   haberin basligi olsun diye). style.css'teki "h1,h2,h3,h4,h5,h6" ve
   "h1,h2,h3" kurallari font-family/font-weight/letter-spacing degerlerini
   etikete gore veriyor; div bu secicilere girmediginden bant sessizce
   sistem fontuna, 400 agirliga ve normal harf araligina dusuyordu. Bu
   secici yalnizca bu sayfadaki div.title'i hedefliyor — diger sayfalarda
   bant hala h1 oldugu icin onlara dokunmuyor. */
.page-title .title-outer div.title {
  font-family: var(--title-font);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* ==========================================================================
   Hakkimizda sayfasi — rakamlarla buyume

   Eski duzen 1288 karakterlik tek paragrafi 1270px genisligine iki yana
   yasli (justify) olarak yayiyordu: satir basina ~150 karakter, goz satir
   sonunda kayboluyor, Turkce metinde kelime araları duzensiz aciliyordu.
   Metnin icindeki en carpici gercek — 140 m²'den 14.000 m²'ye buyume — o
   duvarin icinde kayboluyordu.

   Yeni duzen o rakamlari sayfanin ustune bir serit olarak cikariyor,
   anlatiyi 66 karakterlik olcude okutuyor, Misyon/Vizyon'u iki karta
   aliyor. Sitede tesis fotografi olmadigi icin duzen fotografa
   dayanmiyor: tasiyici oge tipografi.
   ========================================================================== */

.hakkimizda-bolum {
  /* Sayfa basligindaki gorsel mutlak konumlu ve kendi bolumunden 48px
     tasiyor; ilk 48px zaten bandin altinda kaliyor. */
  padding: 70px 0 90px;
}

.hakkimizda {
  max-width: 1180px;
  margin-inline: auto;
  /* .auto-container'in yatay dolgusu style.css'te sifirlanmis. */
  padding: 0 24px;
}

.hakkimizda__giris {
  margin: 0 0 8px;
  max-width: 22ch;
  font-family: var(--title-font);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--theme-color1, #232331);
  text-wrap: balance;
}

/* --- Buyume seridi --- */

.hakkimizda__adimlar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e6e2dc;
  border-bottom: 1px solid #e6e2dc;
  margin: 34px 0 40px;
}

.hakkimizda__adim {
  padding: 24px 22px;
  border-right: 1px solid #e6e2dc;
}

.hakkimizda__adim:last-child {
  border-right: 0;
}

.hakkimizda__adim-etiket {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--theme-color2, #d70006);
}

.hakkimizda__adim-sayi {
  display: block;
  margin-top: 7px;
  font-family: var(--title-font);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--theme-color1, #232331);
}

.hakkimizda__adim-sayi small {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-color, #797f7d);
  margin-left: 5px;
  letter-spacing: 0;
}

.hakkimizda__adim-not {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-color, #797f7d);
}

/* --- Anlati --- */

.hakkimizda__anlati {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 38px;
  align-items: start;
}

.hakkimizda__anlati-baslik {
  margin: 0 0 14px;
  font-family: var(--title-font);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  /* Sablonda h2 { color: #ca1f26 !important } var (style.css:239); bolum
     basliklarini kirmizi yapmak icin konmus. Burasi bolum basligi degil,
     metnin ust basligi: giris cumlesiyle ayni koyulukta durmasi gerekiyor,
     yoksa sayfada iki ayri kirmizi vurgu yarisiyor. !important'i ancak
     !important eziyor. */
  color: var(--theme-color1, #232331) !important;
}

.hakkimizda__metin {
  /* justify kalkti: dar sutunda Turkce metinde kelime aralari duzensiz
     aciliyordu. 66ch, 15px'lik metinde rahat okunan satir uzunlugu. */
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-color, #797f7d);
}

.hakkimizda__gorsel {
  margin: 0;
  background: #f6f2ec;
  border: 1px solid #e6e2dc;
  padding: 16px;
}

.hakkimizda__gorsel img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Misyon / Vizyon --- */

.hakkimizda__kartlar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.hakkimizda__kart {
  /* Ustteki kirmizi serit, iletisim sayfasindaki ofis kartlariyla ayni dil. */
  border-top: 3px solid var(--theme-color2, #d70006);
  padding-top: 16px;
}

.hakkimizda__kart h3 {
  margin: 0 0 8px;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--theme-color1, #232331);
}

.hakkimizda__kart p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-color, #797f7d);
}

@media (max-width: 991px) {
  .hakkimizda-bolum {
    padding: 60px 0 70px;
  }

  .hakkimizda__anlati {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hakkimizda__gorsel {
    order: -1;
  }
}

@media (max-width: 767px) {
  .hakkimizda {
    padding: 0 18px;
  }

  /* Uc kutu yan yana 120px'e sikisiyordu; alt alta hepsi okunuyor. */
  .hakkimizda__adimlar {
    grid-template-columns: 1fr;
  }

  .hakkimizda__adim {
    border-right: 0;
    border-bottom: 1px solid #e6e2dc;
    padding: 18px 0;
  }

  .hakkimizda__adim:last-child {
    border-bottom: 0;
  }

  .hakkimizda__adim-sayi {
    font-size: 34px;
  }

  .hakkimizda__kartlar {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 34px;
  }
}

/* ==========================================================================
   Ana sayfa — Hakkimizda bolumu: gorsel ve buton

   Gorsel cercevesizdi: acik gri studyo zemini beyaz sayfayla sert bir kenar
   yapiyor, sayfanin sol kenarina yapisiyor, metin blogu ile dikey hizasi
   tutmuyordu. Artik sag alttan tasan kurumsal kirmizi bir blogun uzerinde,
   hafif golgeyle duruyor.

   Duzeltme tamamen CSS: gorsel dosyasina dokunulmuyor. 4:3 kirpma
   cozunurlugu dusurmez, tersine artirir (1600 piksellik kaynagin daha kucuk
   bir alani ayni ekran olcusunde gosteriliyor).

   Kurallar #hakkimizda (ana sayfadaki satirin id'si) altina kapatildi;
   /hakkimizda sayfasinin gorseli ayri bir bilesenden gelir, etkilenmez.
   ========================================================================== */

#hakkimizda .image-column .inner-column {
  position: relative;
  padding: 0 26px 26px 0;
}

/* Fotografin arkasindan tasan marka blogu. */
#hakkimizda .image-column .inner-column::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 66%;
  height: 72%;
  background: var(--theme-color2, #d70006);
  z-index: 0;
}

#hakkimizda .image-column .inner-column figure {
  position: relative;
  z-index: 1;
  margin: 0;
}

#hakkimizda .image-column .inner-column figure img {
  display: block;
  width: 100%;
  height: auto;
  /* Kaynak 3:2; 4:3'e kirpinca kutunun iki yanindaki bos gri azaliyor.
     Dikeyde %46: kutu kadrajin biraz ustunde duruyor. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 46%;
  box-shadow: 0 20px 44px rgba(35, 35, 49, 0.18);
}

/* --- "Devami" butonu ---

   Sablonun btn-style-one'i iki yerde siteyle catisiyordu: zemini
   --bg-theme-color2-light (#ca1f26), yani markanin kirmizisi (#d70006)
   degil; ustune gelince de :before ile koyu lacivert (#232331) bir panel
   soldan saga siliyordu. Hero'daki "Urunleri kesfedin" butonu ise marka
   kirmizisinda ve ustune gelince koyulasip hafifce kalkiyor.

   Bu buton artik hero'daki butonun dilini birebir izliyor. Kural yalnizca
   bu bolume kapatildi; sablonun butonu baska sayfalarda oldugu gibi kaliyor.
   ========================================================================== */

#hakkimizda .btm-box .theme-btn.btn-style-one {
  background: var(--theme-color2, #d70006);
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(215, 0, 6, 0.24);
  transition: background 260ms ease, transform 260ms ease,
    box-shadow 260ms ease;
}

/* Koyu lacivert silme efektini kapatir. */
#hakkimizda .btm-box .theme-btn.btn-style-one:before {
  display: none;
}

#hakkimizda .btm-box .theme-btn.btn-style-one:hover {
  background: #b30005;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(215, 0, 6, 0.3);
}

/* Hero butonundaki ok; ustune gelince ayni sekilde ilerliyor. */
#hakkimizda .btm-box .theme-btn.btn-style-one .btn-title:after {
  content: "→";
  margin-left: 12px;
  display: inline-block;
  transition: transform 260ms ease;
}

#hakkimizda .btm-box .theme-btn.btn-style-one:hover .btn-title:after {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  #hakkimizda .image-column .inner-column {
    padding: 0 18px 18px 0;
  }
}