/* ================ TOKENS ================ */
:root{
  --bg:#ffffff;           /* beyaz zemin */
  --surface:#ffffff;
  --text:#0b1220;
  --muted:#5b6678;
  --brand:#ea5517;        /* turuncu */
  --brand-2:#0255a0;      /* mavi */
  --brand-2-10: rgba(2,85,160,.10);
  --border:#e7ecf2;
  --shadow:0 10px 30px rgba(16,24,40,.06);
  --skeleton:#eef2f7;
}


  /* Sayfanın tamamını kaplayan yükleme ekranı */
  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f8fa; /* soft açık gri ton */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }

  /* Yuvarlak dönen obje */
  .loader {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 127, 39, 0.2);  /* soft turuncu */
  border-top: 6px solid rgba(255, 127, 39, 0.9); /* yoğun turuncu */
  border-radius: 50%;
  animation: spin 1s linear infinite, pulse 1.5s ease-in-out infinite;
}

  /* Döndürme animasyonu */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* Hafif nefes efekti */
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

  /* Yükleme bitince görünmez yap */
  #preloader.hide {
    opacity: 0;
    visibility: hidden;
  }

  /* Sayfa içeriği */
  .content {
    display: none;
    padding: 20px;
    font-family: Arial, sans-serif;
  }

  .content.show {
    display: block;
    animation: fadeIn 1s ease;
  }

  /* İçeriğin fade-in efekti */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Poppins', system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
img{max-width:100%; display:block}

/* ================ LAYOUT ================ */
.container{width:min(1200px,92%); margin-inline:auto}
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0}
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.logo img{height:40px; width:auto}
.logo-text{font-weight:700; font-size:1.2rem; color:var(--text)}

.main-nav ul{display:flex; gap:1.1rem; list-style:none; padding:0; margin:0}
.main-nav a{
  color:var(--text); text-decoration:none; font-weight:600;
  padding:.55rem .7rem; border-radius:.6rem;
}
.main-nav a:hover{background:var(--brand-2-10)}
.main-nav a.active{background:var(--brand-2-10); color:var(--brand-2)}
.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--border);
  border-radius:.6rem; background:#fff; box-shadow:var(--shadow);
}
.nav-toggle span{ display:block; height:2px; background:var(--text); margin:7px 10px; }

/* ================ HERO ================ */
.hero{padding:3.2rem 0 2rem; border-bottom:1px solid var(--border)}
.hero-wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.eyebrow{color:var(--brand-2); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem}
h1{font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.1; margin:.35rem 0 1rem; font-weight:800}
.lead{color:#334155; font-size:1.06rem; max-width:60ch}
.cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.1rem; border-radius:14px;
  font-weight:700; text-decoration:none; border:1px solid var(--border);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
}
.btn.small{padding:.6rem .9rem; border-radius:10px; font-weight:600}
.btn.primary{ background:linear-gradient(180deg, var(--brand), rgb(213, 75, 20)); color:#fff; border-color:transparent; }
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost{ background:transparent; color:var(--brand-2); border:1px solid var(--brand-2); box-shadow:none; }
.btn.ghost:hover{ background:var(--brand-2-10) }

/* Hero card + skeleton */
.hero-card{background:#fff; border:1px solid var(--border); border-radius:18px; padding:1rem; box-shadow:var(--shadow)}
.media{
  border-radius:14px; border:1px dashed var(--border);
  background:linear-gradient(90deg, var(--skeleton) 25%, #f6f8fb 37%, var(--skeleton) 63%);
  background-size:400% 100%; animation:skeleton 1.4s ease-in-out infinite;
  display:grid; place-items:center; color:#7a8796; font-weight:600; text-align:center;
}
.h320{height:320px} .h200{height:200px}
@keyframes skeleton{0%{background-position:100% 0}100%{background-position:0 0}}

/* ================ PAGE HERO (alt sayfa başlığı) ================ */
.page-hero{
  background:linear-gradient(90deg, rgba(2,85,160,.06), rgba(234,85,23,.06));
  border-bottom:1px solid var(--border);
  padding:2.2rem 0 1.4rem;
}
.page-hero h1{ margin:0 0 .4rem; }
.page-hero .muted{ margin:0; }

/* ================ SECTIONS ================ */
.section{padding:3rem 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
h2{font-size:clamp(1.4rem,2.4vw,2rem); margin:0 0 .8rem}
.section-lead{color:var(--muted); max-width:70ch}

/* ================ CARDS / CATEGORIES ================ */
.grid{display:grid; gap:1rem}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)
}
.card .body{padding:1rem}
.pill{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem;
  padding:.25rem .6rem; border-radius:999px; background:rgba(234,85,23,.08);
  border:1px solid rgba(234,85,23,.25); color:#b13f13;
}
.card h3{margin:.6rem 0 .2rem; font-size:1.05rem}
.muted{color:var(--muted)}
.card .actions{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap}
.tag{ font-size:.78rem; border:1px dashed var(--border); padding:.2rem .5rem; border-radius:8px; color:#667085 }
.thumb{
  height:150px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(2,85,160,.08), rgba(234,85,23,.08));
  border-bottom:1px solid var(--border)
}

/* ================ PRODUCTS (vitrin, fiyat yok sayfada) ================ */
.products{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.products{grid-template-columns:1fr}}
.p-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)
}
.p-card .meta{padding:.9rem}
.kicker{color:var(--brand-2); font-size:.85rem; font-weight:600}
.p-card h3{margin:.4rem 0}
.features{display:flex; gap:.4rem; flex-wrap:wrap; margin:.4rem 0 .6rem}
.features span{
  font-size:.75rem; background:#f2f6fb; border:1px solid var(--border);
  border-radius:999px; padding:.2rem .5rem; color:#334155
}
.price{font-weight:800; font-size:1.1rem; margin-top:.2rem}

/* filters / chips */
.filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
.chip{
  display:inline-flex; align-items:center; padding:.45rem .7rem; border-radius:999px;
  border:1px solid var(--border); text-decoration:none; color:var(--text); font-weight:600; font-size:.92rem;
}
.chip:hover{background:var(--brand-2-10)}
.chip.is-active{background:var(--brand-2-10); color:var(--brand-2); border-color:transparent}

/* ================ ABOUT / STATS ================ */
.about{grid-template-columns:1.1fr .9fr; gap:1.2rem}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1rem}
.stat{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.2rem; text-align:center; box-shadow:var(--shadow)
}
.stat b{font-size:1.8rem; display:block}
.mt{margin-top:1rem}

/* ================ CONTACT ================ */
.grid.two{grid-template-columns:repeat(2,1fr)}
.contact{grid-template-columns:1.1fr .9fr}
.form{padding:1.2rem}
.form h2{margin-top:0}
label{display:block; font-weight:600; margin:.6rem 0}
input, textarea{
  width:100%; margin-top:.35rem; padding:.75rem .9rem; border:1px solid var(--border);
  border-radius:10px; font:inherit; color:var(--text); background:#fff;
}
input:focus, textarea:focus{outline:3px solid var(--brand-2-10)}
.info{padding:1.2rem}

/* ================ CTA BAND ================ */
.cta-band{
  display:grid; grid-template-columns:1.5fr .5fr; gap:1rem; align-items:center;
  background:linear-gradient(90deg, rgba(2,85,160,.06), rgba(234,85,23,.06));
  border:1px solid var(--border); border-radius:18px; padding:1.2rem; box-shadow:var(--shadow)
}
.cta-btns{display:flex; gap:.6rem; flex-wrap:wrap}

/* ================ FOOTER ================ */
footer{border-top:1px solid var(--border); padding:2.4rem 0; background:#fff}
.foot{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:1.4rem }
.foot .logo img{height:36px}
.foot ul{list-style:none; padding:0; margin:.6rem 0 0; line-height:1.9}
.foot a{text-decoration:none; color:var(--text)}
.foot a:hover{color:var(--brand-2)}
address{font-style:normal; line-height:1.7; color:var(--muted)}
footer .copyright{border-top:1px solid var(--border); margin-top:1.4rem; padding-top:1rem; color:var(--muted); font-size:.9rem}

/* Ortalanmış butonlar */
.center-buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

/* Küçük ekran uyumu */
@media (max-width: 768px) {
  .center-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* ================ RESPONSIVE ================ */
@media (max-width:1000px){
  .hero-wrap{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:840px){
  .main-nav ul{display:none}
  .nav-toggle{display:inline-block}
  .main-nav.open ul{
    display:flex; flex-direction:column; position:absolute; top:64px; right:4%;
    background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
    padding:.5rem; z-index:60;
  }
  .main-nav.open a{padding:.7rem 1rem; width:100%}
}
@media (max-width:560px){
  .cols-4{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  h1{font-size:1.9rem; line-height:1.18}
  .lead{font-size:.98rem}
}

/* ==== Footer – dar ekran yaması ==== */
@media (max-width:360px){
  .foot{ grid-template-columns:1fr !important; gap:.9rem !important; }
  .foot > *{ min-width:0; }
  .foot h4{ margin:.2rem 0 .4rem; }
  .foot ul{ margin:0; line-height:1.7; }
  .foot a, .foot small, address{ overflow-wrap:anywhere; word-break:break-word; }
  .logo-text{ font-size:1.05rem; }
}

/* ================ ACCESSIBILITY ================ */
:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px}

/* Genel taşma güvenliği */
.grid > *, .hero-wrap > *, .about > *, .products > * { min-width:0; }
h1, h2, h3, p, .logo-text { overflow-wrap:anywhere; word-break:break-word; }

/* Hero'yu görselli yap */
.hero{
  position: relative;
  padding: 4rem 0 2.2rem;             /* biraz daha nefes alan */
  background-image: url("images/anasayfa-tarim-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border); /* aynı tema çizgisi */
}

/* Okunurluk için koyu overlay */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);        /* istersen .30/.45 yap */
  z-index:0;
}

/* İçerikleri üstte tut */
.hero-wrap{ position: relative; z-index: 1; }

/* Görsel üstünde metin rengi */
.hero .eyebrow{ color:#fff; opacity:.9; }
.hero h1{ color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.hero .lead{ color:#eaf1f6; text-shadow:0 1px 3px rgba(0,0,0,.35); }

/* Buton kontrastı – turuncu & mavi palete uygun */
.hero .btn{ box-shadow:none; }
.hero .btn.primary{
  background: linear-gradient(180deg, var(--brand), #d54b14); /* #ea5517 */
  border-color: transparent; color:#fff;
}
.hero .btn.ghost{
  color:#fff; border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
}
.hero .btn.ghost:hover{ background: rgba(255,255,255,.12); }

/* Küçük ekran ayarı */
@media (max-width:560px){
  .hero{ padding: 3rem 0 1.4rem; }
}

.hero-image-caption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #555; /* Dilersen #0255a0 veya #ea5517 yapabilirsin */
  text-align: center;
}

/* === Hero başlık ve beyaz alan boşluk ayarı === */

/* Masaüstü görünüm */
.hero {
  padding-top: 8rem; /* Başlığı biraz aşağı indir */
}

.hero-wrap {
  margin-bottom: 5rem; /* Beyaz alanı aşağı çek */
}

/* Mobil görünüm (tablet ve telefonlar) */
@media (max-width: 768px) {
  .hero {
    padding-top: 3rem;
  }

  .hero-wrap {
    margin-bottom: 1.8rem;
  }
}

/* === ALT KISIM (CTA bandı + Footer) Mobil Uyum Yaması === */

/* 1) CTA bandını (iletisim) tek sütuna düşür, içerikleri ortala */
@media (max-width: 768px){
  .cta-band{
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 1rem;
    text-align: center;
  }
  .cta-band .cta-btns{
    justify-content: center;
  }
  .cta-band .hero-card{
    margin-top: .6rem;
  }
  .cta-band .contact-number{
    font-size: 1.2rem;
  }
}

/* 2) Footer: tablet ve aşağısında 2 sütun, telefonlarda 1 sütun */
@media (max-width: 768px){
  .foot{
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .foot > *{ min-width: 0; }                 /* taşmaları kes */
  .foot h4{ margin: .2rem 0 .4rem; }
  .foot ul{ margin: 0; line-height: 1.7; }
  .foot a, .foot small, address{
    overflow-wrap: anywhere; word-break: break-word;
  }
}

@media (max-width: 480px){
  .foot{
    grid-template-columns: 1fr !important;
    gap: .9rem !important;
  }
  .logo-text{ font-size: 1.05rem; }
}

/* 3) Telif satırı (en alt) taşmasın, çok satıra yayılabilsin */
footer .copyright{
  display: flex; flex-wrap: wrap; gap: .4rem;
  align-items: flex-start; justify-content: flex-start;
  text-align: left;
}
@media (max-width: 480px){
  footer .copyright{
    font-size: .9rem; line-height: 1.4;
  }
}

/* 4) Güvenlik: alt kısımda hiçbir öğe genişlik taşırmasın */
footer *, .cta-band *{ min-width: 0; }

/* === Mobil menü ikonunu sağa hizala === */
@media (max-width: 840px) {
  .nav {
    position: relative;
  }
  .nav-toggle {
    margin-left: auto;  /* Sağ tarafa it */
    position: absolute;
    right: 0;           /* Tam sağa yasla */
    top: 50%;
    transform: translateY(-50%); /* Dikey ortalama */
  }
}

/* Sadece mobilde ortala */
@media (max-width: 768px) {
  .cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    text-align: center;
  }
}

.cta-band > div:first-child {
  display: flex;
  flex-direction: column;  /* yazıları alt alta tut */
  align-items: center;     /* yatay ortala */
  text-align: center;      /* metni ortala */
}

/* Alternatif: CTA bandındaki 2. sütunu hedefle */
.cta-band > :nth-child(2){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* 7/24 destek kutusundaki yazı aralıklarını ayarla */
.cta-band .hero-card h3 {
  margin-bottom: 0.4rem; /* Başlık ile telefon arası */
}

.cta-band .hero-card p {
  margin: 0.2rem 0; /* Telefon ile e-posta arası */
}

/* === Hero CTA: sadece mobilde SOLA hizala === */
@media (max-width: 768px){
  .hero .cta,
  .hero .cta.center-buttons {                 /* varsa önceki center sınıfını da bastır */
    display: flex;
    flex-direction: column;                   /* mobilde alt alta */
    justify-content: flex-start !important;   /* sola hizala */
    align-items: flex-start !important;       /* sola hizala */
    text-align: left !important;              /* metin hizası sol */
    gap: .8rem;
    width: 100%;
  }
  .hero .cta a { align-self: flex-start; }    /* linklerin de sola yaslanması için */
}

.phone-link {
  color: #fff; /* Beyaz yazı */
  text-decoration: none; /* Alt çizgiyi kaldırır */
}

.phone-link:hover {
  color: #ea5517; /* Üzerine gelince turuncu olsun istersen */
}

/* Marka Değerlerimiz, Vizyon ve Misyonumuz Kısmı */
/* Üst başlık ve açıklama ortada */
.brand-values .section-title{ text-align:center; }
.brand-values .section-lead{ text-align:center; color:var(--muted); }

/* Değer kartları: 3 → 2 → 1 sütun */
.values-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.2rem;
  margin-top: 1.6rem;
}
@media (max-width:1000px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid{ grid-template-columns:1fr; } }

/* Vizyon & Misyon: iki sütun, altta */
.vm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: .6rem;      /* üst bloktan nefes */
}
@media (max-width:900px){ .vm-grid{ grid-template-columns:1fr; } }

/* Kart görünümleri (varsa mevcut kart stillerinle uyumlu) */
.value-card, .vm-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:1.5rem;
}
.icon-circle{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background: rgba(234,85,23,.12); margin-bottom:.8rem;
}
.icon-circle svg{ width:22px;height:22px;fill:var(--brand); }
.circle-icon.blue{ background: rgba(2,85,160,.1); }
.circle-icon.pink{ background: rgba(234,85,23,.1); }

.highlight-box{ margin-top:1rem;padding:1rem;border-radius:12px;background:rgba(234,85,23,.08); }
.highlight-box.pink-light{ background:rgba(234,85,23,.08); }

.brand-promise-box {
  background-color: #ea5517; /* Sitenin turuncu rengi */
  color: #fff; /* Yazı beyaz */
  border-radius: 12px; /* Köşeleri yuvarlat */
  padding: 2rem 1rem;
  text-align: center;
  margin: 2rem 0;
  max-width: 1100px; /* Orta genişlik */
  margin-left: auto;
  margin-right: auto;
}

.brand-promise-box h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.brand-promise-box p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto;
}

/* Mobil uyum */
@media (max-width: 768px) {
  .brand-promise-box h2 {
    font-size: 1.5rem;
  }
  .brand-promise-box p {
    font-size: 1rem;
  }
}

/*Tarihçemiz*/
.timeline{
  --row-gap: 0.2rem;    
  --row-minh: 120px;  

  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap);
  max-width: 1100px;
  margin: 0 auto;
}

/* orta çizgi */
.timeline::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:4px; border-radius:4px;
  background: linear-gradient(180deg, var(--brand), #d54b14);
  z-index:0;
}

/* her yıl = bir satır: sol | merkez(dot) | sağ */
.t-row{
  display:grid;
  grid-template-columns: 1fr 60px 1fr;
  column-gap: 1.6rem;
  align-items: center;            /* kartı satır ortasına çek → dot tam merkezde */
  min-height: var(--row-minh);
  position: relative;
  z-index:1;
}

/* dot */
.t-center{
  display:flex; align-items:center; justify-content:center;
}
.t-center .dot{
  width:14px; height:14px; border-radius:50%;
  background: var(--brand);
  border:3px solid #fff;
  box-shadow: 0 0 0 2px rgba(234,85,23,.32);
}

/* kart görünümü */
.t-card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:1.15rem 1.25rem;
  box-shadow: var(--shadow); text-align:left;
}
.t-card h3{ margin:0 0 .45rem; font-size:1.06rem; }
.t-card h3 span{ color:var(--brand); font-weight:800; margin-right:.45rem; }
.t-card p{ margin:0; color:var(--muted); line-height:1.6; }

/* === MOBİL DOT & ÇİZGİ HİZASI — SON HAL === */
@media (max-width: 768px){
  .timeline{
    --row-gap: 0.12rem;
    --row-minh: 110px;
    --line-col: 40px;                      /* çizgi/dot kolonu genişliği */
    --line-x: calc(var(--line-col) / 2);   /* çizginin orta noktası */
  }

  .timeline::before{
    left: var(--line-x) !important;
    transform: none !important;
    width: 4px !important;
  }

  .t-row{
    grid-template-columns: var(--line-col) 12px 1fr !important;
    column-gap: .9rem !important;
    min-height: var(--row-minh) !important;
    align-items: stretch !important;       /* orta kolon kart kadar uzasın */
  }

  .t-center{
    grid-column: 1 !important;
    position: relative !important;
    height: 100% !important;
  }
  .t-center .dot{
    position: absolute !important;
    left: var(--line-x) !important;        /* çizginin tam üstü */
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--brand);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(234,85,23,.32);
  }

  .t-left, .t-right{ grid-column: 3 !important; }
  .t-card{ padding: 1rem !important; margin: 0 !important; }
}

/* Mobil Görünüm alanı için ayrılan kısım */
/* Görsel alanını sabitle (16:9 oran) */
.card .thumb {
  aspect-ratio: 16 / 9;   /* genişlik / yükseklik oranı */
  overflow: hidden;       /* taşan kısımlar görünmesin */
  border-radius: 12px 12px 0 0;
}

/* Görselin kutuya oturması */
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* resmi kutuya doldurur, orantıyı bozmadan */
  display: block;
}

/* Ürün Kategorilerimiz: kart üst görsel alanı – KESİN DOLDUR */
.grid.cols-4 .card .thumb{
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;             /* varsa eski padding’i sıfırla */
  border-radius: 12px 12px 0 0;
  overflow: hidden;                   /* taşanı kırp */
  background: #f2f6fb;               /* yüklenmeden önce zemin */
}

/* Sabit oran (16:9). Yüksekliği oranla üretir, genişlik %100 kalır */
.grid.cols-4 .card .thumb::before{
  content: "";
  display: block;
  padding-top: 56.25%;                /* 16/9 = %56.25 */
}

/* Görseli kutunun tamamına yapıştır */
.grid.cols-4 .card .thumb img{
  position: absolute;
  inset: 0;                           /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;                  /* oranı koru, kutuyu doldur (gerekirse kırp) */
}

/* İletişim – Harita */
.map-embed{
  position: relative;
  height: 320px;                 /* masaüstü yüksekliği */
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #eef2f7;           /* yüklenene kadar açık gri */
  box-shadow: var(--shadow);
}
.map-embed iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Mobilde biraz daha alçak olsun */
@media (max-width: 560px){
  .map-embed{ height: 240px; }
}