/* =========================================================
   HERO — büyük slider yerine, 5 fotoğraftan oluşan yay
   (arc) kompozisyonu. Metin üstte ortalanır, fotoğraflar
   altında hafifçe kavis çizerek dizilir.
========================================================= */
/* =========================================================
   Işık zemini — ortak kural

   ÖNEMLİ: Işık hüzmeleri artık `filter:blur()` uygulanmış mutlak
   konumlu daireler DEĞİL, doğrudan bölümün arka planına konan
   radial-gradient katmanlarıdır.

   NEDEN: Bulanık daireler kutunun kenarından taşıyordu. Taşan kısım
   yatay kaydırma yaratmasın diye bölüme `overflow:hidden` verilmişti;
   ama bu, ışığın sönümlenmeden DÜZ BİR ÇİZGİYLE kesilmesine yol
   açıyordu — ekranın solunda ve sağında pembemsi bir bandın aniden
   bitmesi tam olarak buydu. Gradyan katmanları kutunun kendi
   koordinatlarına göre hesaplandığı için taşmaz, dolayısıyla
   kırpılacak bir şey de kalmaz: geçiş her ekran genişliğinde
   kusursuz biçimde yumuşaktır. Ayrıca blur filtresi kalktığı için
   mobilde çizim maliyeti de düşer.
========================================================= */
.hero{
  position:relative;
  /* Üst dolgu, header'ın arkasından başlayan içeriği geri aşağı iter
     (bkz. base.css → main{margin-top}). */
  padding-block:calc(var(--header-h) + clamp(2.5rem,6vw,5rem)) clamp(2.5rem,6vw,4.5rem);
  background-color:var(--bg-primary);
  background-image:
    /* EN ÜST KATMAN — alt kenar kilidi.
       Aşağıdaki ışık katmanları bölümün ALT KENARINA kadar hâlâ hafifçe
       renkli kalıyordu (özellikle sağ alttaki pembe ışık, 97%/78%'te).
       Kutu orada bittiği ve sonraki bölüm düz zeminle başladığı için bu
       kalıntı renk ekranı boydan boya kesen ince bir iz bırakıyordu.
       Bu katman son %18'lik bölümde her şeyin üzerine zemin rengini
       yedirir; alt kenarda arka plan TANIM GEREĞİ tam olarak
       --bg-primary olur, dolayısıyla geçecek bir renk farkı kalmaz. */
    linear-gradient(180deg,
      rgba(var(--bg-primary-rgb),0) 82%,
      rgba(var(--bg-primary-rgb),1) 100%),
    radial-gradient(70% 52% at 50% -8%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    radial-gradient(46% 40% at 4% 22%, rgba(var(--glow-cream),.55), rgba(var(--glow-cream),0) 72%),
    radial-gradient(44% 38% at 97% 78%, rgba(var(--glow-blush),.42), rgba(var(--glow-blush),0) 72%),
    radial-gradient(34% 30% at 74% 44%, rgba(var(--glow-sky),.32), rgba(var(--glow-sky),0) 72%),
    radial-gradient(32% 30% at 26% 88%, rgba(var(--glow-sage),.3), rgba(var(--glow-sage),0) 72%),
    linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-primary) 66%);
  background-repeat:no-repeat;
}

.hero__inner{position:relative;z-index:1;}
.hero__copy{
  max-width:56rem;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.hero__copy h1{max-width:18ch;}
.hero__copy h1 em{font-style:italic;color:var(--color-taupe-dark);}
.hero__copy p{font-size:1.08rem;color:var(--color-anthracite);max-width:52ch;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:.5rem;}
@media (max-width:640px){
  .hero__copy p{font-size:.98rem;}
  .hero__actions .btn{padding:.85rem 1.4rem;font-size:.72rem;}
}

.hero-collage{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(.55rem,1.3vw,1.3rem);
  align-items:center;
  margin-top:clamp(2.6rem,5vw,4.2rem);
  /* Yaydaki uç kartlar aşağı, orta kart yukarı kaydığı için ızgaranın
     kendi yüksekliğinden taşarlar; taşan payı burada telafi ediyoruz ki
     altındaki bölümle çakışmasın. */
  padding-block:1.8rem;
}
.hero-card{
  position:relative;
  aspect-ratio:4/5;
  border-radius:clamp(.9rem,1.8vw,1.6rem);
  overflow:hidden;
  background:var(--bg-secondary);
  box-shadow:var(--shadow-lift);
  transform:translateY(var(--lift,0)) scale(var(--scale,1));
  transition:transform .7s var(--ease-premium), box-shadow .7s var(--ease-premium);
}
.hero-card img{width:100%;height:100%;object-fit:cover;}
/* Fotoğraflar birbirine çok yakın tonlarda olduğu için kartların
   sınırları kaybolabiliyor; çok hafif bir iç çerçeve ayrımı netleştirir. */
.hero-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.hero-card:nth-child(1){--lift:32px;}
.hero-card:nth-child(2){--lift:6px;}
.hero-card:nth-child(3){--lift:-26px;--scale:1.06;}
.hero-card:nth-child(4){--lift:6px;}
.hero-card:nth-child(5){--lift:32px;}
@media (hover:hover){
  .hero-card:hover{transform:translateY(calc(var(--lift,0px) - 10px)) scale(calc(var(--scale,1) * 1.03));box-shadow:var(--shadow-deep);}
}

/* 5 kart tek sırada sığmayınca 3 + 2 (ortalanmış) düzene geçer.
   12'lik değil 6'lık ızgara kullanılıyor: her kart 2 sütun kaplar,
   ikinci satırdaki iki kart 2-4 ve 4-6 aralığına oturunca kenarlarda
   birer sütunluk boşluk kalır ve satır kendiliğinden ortalanır. */
@media (max-width:1040px){
  .hero-collage{grid-template-columns:repeat(6,1fr);gap:clamp(.7rem,1.8vw,1.2rem);padding-block:0;}
  .hero-card{grid-column:span 2;}
  /* Seçici bilerek :nth-child(n) — yukarıdaki yay değerleri
     `.hero-card:nth-child(3)` gibi iki sınıflı seçicilerle yazıldığı için
     düz `.hero-card` kuralı onları EZEMEZ (medya sorgusu önceliği
     değiştirmez, yalnızca sırayı). Aynı özgüllükte ve daha sonra gelen bu
     kural, yayı tek sıradan çıkan düzende sıfırlar. */
  .hero-card:nth-child(n){--lift:0;--scale:1;}
  .hero-card:nth-child(4){grid-column:2 / 4;}
  .hero-card:nth-child(5){grid-column:4 / 6;}
}
/* Telefon: kartlar ikişerli sıralara iner.
   Üçüncü kart (yakın plan hırka detayı) burada EN ALTA alınır ve tek
   başına ortalanır; ikişerli düzende sol ortada sıkışmak yerine kolajı
   kapatan kare olarak duruyor. Değişen yalnızca GÖRÜNTÜ sırasıdır:
   HTML sırası aynı kalır, masaüstünde de bu kart yerinden oynamaz —
   orada yayın tepe noktası ve büyütülmüş kart odur (bkz. --lift/--scale).
   Bu yüzden `order` kullanılır, kartlar yeniden sıralanmaz. */
@media (max-width:620px){
  .hero-collage{grid-template-columns:repeat(4,1fr);}
  .hero-card{grid-column:span 2;}
  .hero-card:nth-child(3){order:5;grid-column:2 / 4;}
  .hero-card:nth-child(4){order:3;grid-column:span 2;}
  .hero-card:nth-child(5){order:4;grid-column:span 2;}
}

/* =========================================================
   Rakam şeridi (kuruluş yılı, tecrübe, ihracat…)
========================================================= */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(2rem,4vw,3.2rem);
}
.stat{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding:0 1.2rem;text-align:center;
  border-left:1px solid rgba(44,38,33,.12);
}
.stat:first-child{border-left:none;}
.stat__value{
  font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(2.2rem,3.6vw,3.1rem);
  color:var(--color-taupe-dark);
}
.stat__label{
  font-family:var(--font-accent);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-anthracite);
}
@media (max-width:820px){
  .stat-strip{grid-template-columns:repeat(2,1fr);row-gap:1.8rem;}
  .stat:nth-child(2n+1){border-left:none;}
  .stat:nth-child(n+3){padding-top:1.6rem;border-top:1px solid rgba(44,38,33,.12);}
}
@media (max-width:420px){
  .stat{padding-inline:.6rem;}
  .stat__label{font-size:.62rem;letter-spacing:.12em;}
}

/* =========================================================
   Kategori kartları (Ürünlerimiz)
========================================================= */
.category-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.6rem);
}
@media (max-width:1080px){.category-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.category-grid{grid-template-columns:1fr;}}

.category-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--color-paper);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform var(--dur-med) var(--ease-premium), box-shadow var(--dur-med) var(--ease-premium);
}
.category-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift);}
.category-card__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-secondary);flex:none;}
.category-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-premium);}
.category-card:hover .category-card__media img{transform:scale(1.06);}
.category-card__count{
  position:absolute;left:1rem;top:1rem;z-index:1;
  font-family:var(--font-accent);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .75rem;border-radius:var(--radius-pill);
  background:rgba(252,249,245,.92);color:var(--color-taupe-dark);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.category-card__body{display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto;padding:1.4rem 1.5rem 1.6rem;}
.category-card__body h3{display:flex;align-items:center;gap:.55rem;font-size:1.55rem;}
.category-card__body h3 .icon{width:1.05em;height:1.05em;color:var(--color-taupe);flex:none;}
.category-card__body p{font-size:.92rem;color:var(--color-anthracite);flex:1 1 auto;}
.category-card__body .link-arrow{margin-top:.4rem;}

/* =========================================================
   Üretim / kurumsal görsel sahnesi — fotoğrafların arkasında
   yumuşak ışık hüzmeleri (referans sitedeki "stage glow" dili,
   İncilay'ın sıcak bebek paletine uyarlanmış hâli).
========================================================= */
.production-stage{
  position:relative;
  /* Alttaki ışıma çerçevenin dışına taşar; hemen altındaki bölümün kendi
     zeminiyle keskin biçimde kesişmesin diye ışığa sönümlenecek nötr alan
     bırakılır. */
  margin-bottom:clamp(1.5rem,5vw,3.5rem);
}
.production-stage__glow{position:absolute;border-radius:50%;filter:blur(52px);pointer-events:none;z-index:-1;}
/* Üst/alt ışıklar kutunun dışına taşabilir (bölümün dikey dolgusu
   sönümlenmeye yetiyor); YANLARDAKİLER her zaman içeride kalır —
   gerekçesi için bkz. products.css / .wholesale-stage__glow. */
.production-stage__glow--a{width:280px;height:280px;background:rgba(var(--glow-cream),.9);top:-110px;left:2%;}
.production-stage__glow--b{width:240px;height:240px;background:rgba(var(--glow-blush),.75);bottom:-95px;right:6%;}
.production-stage__glow--c{width:200px;height:200px;background:rgba(var(--glow-sky),.6);top:30%;right:12px;}
.production-stage__glow--d{width:200px;height:200px;background:rgba(var(--glow-sage),.55);top:34%;left:12px;}
.production-stage__glow--e{width:170px;height:170px;background:rgba(var(--glow-butter),.6);top:64%;left:20px;}
@media (max-width:640px){
  .production-stage__glow{filter:blur(34px);}
  .production-stage__glow--a{top:-58px;width:170px;height:170px;}
  .production-stage__glow--b{bottom:-50px;width:150px;height:150px;}
  .production-stage__glow--c{right:10px;width:110px;height:110px;}
  .production-stage__glow--d{left:10px;width:110px;height:110px;}
  .production-stage__glow--e{left:14px;width:90px;height:90px;}
}

.production-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(.8rem,1.8vw,1.4rem);
  align-items:stretch;
}
/* minmax(0,1fr) ZORUNLU — sade `1fr` aslında `minmax(auto,1fr)` demektir
   ve satır, içeriğin doğal boyutundan (burada fotoğrafın kendi yüksekliği)
   daha küçük olamaz. Sağdaki iki fotoğraf bu yüzden kendi satırlarını
   itip taşıyor, soldaki büyük fotoğrafın üzerine binmiş gibi görünüyordu —
   sorun yalnızca yatay masaüstünde çıkıyordu, çünkü tek sütuna düşen dar
   ekranlarda satırlar zaten içeriğe göre hesaplanıyor. minmax(0,…) satırın
   küçülmesine izin verir; fotoğraflar da object-fit:cover ile kutuya oturur. */
.production-side{
  display:grid;grid-template-rows:auto auto;
  gap:clamp(.8rem,1.8vw,1.4rem);
  min-height:0;
}
.production-figure{
  position:relative;margin:0;overflow:hidden;min-height:0;
  border-radius:clamp(1rem,2.2vw,1.9rem);
  background:var(--bg-secondary);
  box-shadow:var(--shadow-lift);
}
.production-figure img{width:100%;height:100%;object-fit:cover;display:block;}
/* align-self:start ZORUNLU. Izgara öğeleri varsayılan olarak satır
   yüksekliğine UZATILIR (stretch); uzatılan bir öğede aspect-ratio da
   varsa tarayıcı yüksekliği veri kabul edip GENİŞLİĞİ ona göre büyütür ve
   kutu kendi sütununu taşar — sağdaki fotoğrafların soldakinin üzerine
   binmesinin asıl sebebi buydu. start ile öğe uzatılmaz: genişlik
   sütununun tamamı olur, yüksekliği oradan türer ve satır yüksekliğini
   bu öğe belirler. */
/* ---- Yatay (iki sütunlu) yerleşim ----
   Sol büyük fotoğrafa aspect-ratio VERİLMEZ. Izgara öğeleri varsayılan
   olarak satır yüksekliğine uzatılır (stretch) ve uzatılan bir öğede
   aspect-ratio da varsa tarayıcı yüksekliği veri kabul edip GENİŞLİĞİ ona
   göre büyütür; kutu kendi sütununu taşar ve sağdaki fotoğrafların üzerine
   biner — masaüstünde görülen iç içe geçme tam olarak buydu. Bunun yerine
   satır yüksekliğini SAĞ sütun belirler (iki fotoğrafın kendi doğal
   yükseklikleri), sol fotoğraf da o yüksekliğe uzar. Sonuç: iki sütun her
   zaman birbirine eşit ve taşma imkânsız. */
@media (min-width:821px){
  .production-figure--main{align-self:stretch;}
}
/* Köşelerde çok hafif bir vinyet: farklı pozlamalardaki üç fotoğraf
   birbirine daha yakın bir ışıkta görünsün diye. */
.production-figure::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(40,32,26,.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(40,32,26,.14), transparent 34%);
}
/* ---- Dikey (tek sütunlu) yerleşim ----
   Burada uzatılacak bir kardeş yok; yükseklik oranlardan gelir. */
@media (max-width:820px){
  .production-grid{grid-template-columns:1fr;}
  .production-figure--main{aspect-ratio:4/5;}
  .production-figure--side{aspect-ratio:3/2;}
}

/* Üretim kutucukları (kapasite / makine / kalite notları) */
.production-notes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.6rem);
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
}
@media (max-width:820px){.production-notes{grid-template-columns:1fr;}}
.production-note{
  background:var(--color-paper);border-radius:var(--radius-md);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow-soft);
}
.production-note .icon{width:1.7em;height:1.7em;color:var(--color-taupe);margin-bottom:.7rem;}
.production-note h4{margin-bottom:.35rem;}
.production-note p{font-size:.9rem;color:var(--color-anthracite);}

/* =========================================================
   Kurumsal metin + iletişim kutusu (anasayfa)
========================================================= */
.about-grid{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
@media (max-width:940px){.about-grid{grid-template-columns:1fr;}}

/* Kurumsal sayfasındaki "bina" satırı: fotoğraf DİKEY (3:4) olduğu için
   metin sütunundan belirgin biçimde uzun. `align-items:start` bırakılsaydı
   metin yukarıda asılı kalır, yanında büyük bir boşluk oluşurdu. Burada
   iki sütun da aynı yüksekliğe uzatılır (stretch) ve metin kendi içinde
   dikeyde ortalanır — böylece iki blok gerçekten aynı kutu yüksekliğini
   paylaşır. */
.about-grid--figure{grid-template-columns:1.08fr .92fr;align-items:stretch;}
.about-grid--figure .about-copy{
  display:flex;flex-direction:column;justify-content:center;
  min-height:0;
}
.about-grid--figure .about-figure{
  margin:0;position:relative;overflow:hidden;min-height:0;
  border-radius:clamp(1rem,2.2vw,1.9rem);
  background:var(--bg-secondary);
  box-shadow:var(--shadow-lift);
  /* Fotoğrafın kendi oranı (3:4) — object-fit:cover ile birlikte binanın
     hiçbir yeri kırpılmaz, kutuya tam oturur. */
  aspect-ratio:3/4;
  /* align-self:start — bkz. .production-figure--main'deki açıklama:
     uzatılan bir öğede aspect-ratio, genişliği şişirip sütunu taşırır. */
  align-self:start;width:100%;
}
.about-grid--figure .about-figure img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:940px){
  .about-grid--figure{grid-template-columns:1fr;}
  /* Tek sütuna düştüğünde fotoğraf kutusu 3:4 oranında ekranı gereğinden
     fazla kaplıyor; biraz daha basık bir orana geçer. */
  .about-grid--figure .about-figure{aspect-ratio:4/5;max-width:32rem;margin-inline:auto;width:100%;}
}
.about-copy__quote{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.35;
  color:var(--color-ink);
  border-left:3px solid var(--color-taupe);
  padding-left:1.3rem;margin-block:1.3rem;
}
.about-copy p+p{margin-top:.9rem;}

.chip-list{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem;}
.chip-list li{
  font-family:var(--font-accent);font-size:.72rem;letter-spacing:.06em;
  padding:.4rem .85rem;border-radius:var(--radius-pill);
  background:var(--color-taupe-soft);color:var(--color-taupe-dark);
}

.contact-card{
  background:var(--color-paper);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-soft);height:100%;
}
.contact-card>h3{margin-top:.6rem;margin-bottom:1rem;}
.contact-detail{display:flex;gap:1rem;padding-block:1rem;border-bottom:1px solid var(--color-fog);}
.contact-detail>div{min-width:0;}
.contact-detail p,.contact-detail a{overflow-wrap:break-word;word-break:break-word;}
.contact-detail:last-of-type{border-bottom:0;}
.contact-detail .icon{width:1.4em;height:1.4em;color:var(--color-taupe-dark);flex:none;margin-top:.2rem;}
.contact-detail h4{margin-bottom:.15rem;font-size:1.1rem;}
.contact-detail p{font-size:.95rem;color:var(--color-anthracite);}
.contact-detail a:hover{color:var(--color-taupe-dark);}

/* =========================================================
   İletişim formu bölümü + WhatsApp kutusu
========================================================= */
/* Form ve WhatsApp kutusu HER ekran boyutunda alt alta durur: WhatsApp
   kutusu, formu doldurmak istemeyen ziyaretçi için formun hemen ardından
   gelen bir alternatif; yan yana konduğunda iki ayrı seçenek gibi değil
   birbiriyle yarışan iki kutu gibi görünüyordu. */
.form-panel{
  display:flex;flex-direction:column;
  gap:clamp(1.25rem,2.5vw,1.75rem);
  max-width:46rem;margin-inline:auto;
}
.form-card{
  background:var(--color-paper);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.6rem);box-shadow:var(--shadow-soft);
}

.whatsapp-callout{
  position:relative;overflow:hidden;isolation:isolate;
  /* Arka plan BİLEREK DÜZ RENK: köşeden köşeye taban parlaklığı aynı
     olsun diye. Gradyan zeminde, birebir aynı ışık efektleri bile köşeden
     köşeye farklı GÖRÜNÜR (aynı el fenerinin karanlık ve aydınlık duvarda
     farklı görünmesi gibi) ve her köşe için ayrı opaklık ayarı gerekir. */
  background-color:#1f3d2c;
  color:var(--bg-primary);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.8rem 2rem;
  display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center;
  text-align:center;
  box-shadow:var(--shadow-lift);
  height:100%;
}
/* Dört köşe TEK ortak kuraldan gelir; boyut, renk, opaklık, blur ve konum
   tamamen simetrik — düz zemin sayesinde gerçekten de aynı görünürler. */
.whatsapp-callout__glow{
  position:absolute;width:160px;height:160px;border-radius:50%;
  background:rgba(37,211,102,.18);filter:blur(38px);pointer-events:none;
  /* Kutunun kendi zemini ile içeriği arasında — bkz. base.css'teki
     "Işık katmanı standardı". Kutu .whatsapp-callout üzerinde
     isolation:isolate ile kendi bağlamını açar. */
  z-index:-1;
}
.whatsapp-callout__glow--a{top:-60px;right:-50px;}
.whatsapp-callout__glow--b{bottom:-60px;left:-50px;}
.whatsapp-callout__glow--c{top:-60px;left:-50px;}
.whatsapp-callout__glow--d{bottom:-60px;right:-50px;}
.whatsapp-callout__logo{width:2.4em;height:2.4em;color:var(--color-whatsapp);position:relative;z-index:1;}
.whatsapp-callout h3{color:var(--bg-primary);position:relative;z-index:1;font-size:clamp(1.45rem,2.2vw,1.9rem);}
.whatsapp-callout__subtitle{
  font-family:var(--font-accent);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7fe3a2;position:relative;z-index:1;
}
.whatsapp-callout p{color:var(--color-fog);font-size:.92rem;position:relative;z-index:1;max-width:32ch;}
.whatsapp-callout .btn{position:relative;z-index:1;margin-top:.3rem;}
.whatsapp-callout__hours{
  position:relative;z-index:1;display:flex;align-items:center;gap:.5rem;
  font-size:.8rem;color:rgba(222,213,203,.8);
}
.whatsapp-callout__hours .icon{width:1.05em;height:1.05em;color:#7fe3a2;}

/* =========================================================
   İç sayfa üst bloğu
========================================================= */
/* İç sayfa üst bloğu da aynı gradyan yaklaşımını kullanır (bkz. .hero
   üzerindeki açıklama): kırpılan bulanık daireler yerine bölümün kendi
   arka planına konan, kenara varmadan sönümlenen ışık katmanları. */
.page-intro{
  padding-block:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)) clamp(1rem,2vw,1.5rem);
  position:relative;
  background-color:var(--bg-primary);
  background-image:
    /* Alt kenar kilidi — gerekçesi için bkz. .hero. İç sayfa üst bloğu
       daha kısa olduğu için kilit biraz daha erken başlar. */
    linear-gradient(180deg,
      rgba(var(--bg-primary-rgb),0) 74%,
      rgba(var(--bg-primary-rgb),1) 100%),
    radial-gradient(52% 62% at 6% 14%, rgba(var(--glow-cream),.5), rgba(var(--glow-cream),0) 74%),
    radial-gradient(48% 58% at 95% 88%, rgba(var(--glow-blush),.34), rgba(var(--glow-blush),0) 74%),
    linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%);
  background-repeat:no-repeat;
}
.page-intro .container{position:relative;z-index:1;}
.page-intro__eyebrow{margin-bottom:1rem;}
.page-intro h1{max-width:20ch;}
.page-intro p{margin-top:1rem;font-size:1.05rem;color:var(--color-anthracite);max-width:52rem;}
.page-intro--centered{text-align:center;}
.page-intro--centered .page-intro__eyebrow{justify-content:center;}
.page-intro--centered h1,.page-intro--centered p{margin-inline:auto;}
@media (max-width:720px){
  .page-intro{text-align:center;}
  .page-intro__eyebrow{justify-content:center;}
  .page-intro h1,.page-intro p{margin-inline:auto;}
}

/* =========================================================
   Değer kartları (Kurumsal sayfası)
========================================================= */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);}
@media (max-width:900px){.values-grid{grid-template-columns:1fr;}}
.value-card{background:var(--color-paper);border-radius:var(--radius-md);padding:1.7rem;box-shadow:var(--shadow-soft);}
.value-card .icon{width:1.8em;height:1.8em;color:var(--color-taupe);margin-bottom:.8rem;}
.value-card h3{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-bottom:.35rem;}
.value-card p{font-size:.92rem;color:var(--color-anthracite);}

/* Zaman çizgisi (1983'ten bugüne) */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem);}
@media (max-width:900px){.timeline{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.timeline{grid-template-columns:1fr;}}
.timeline__step{border-top:2px solid var(--color-taupe);padding-top:1rem;}
.timeline__year{font-family:var(--font-accent);color:var(--color-taupe-dark);font-size:.74rem;letter-spacing:.16em;}
.timeline__step h4{margin-block:.4rem .4rem;}
.timeline__step p{color:var(--color-anthracite);font-size:.9rem;}

/* İhracat ülkeleri */
.country-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;}
@media (max-width:900px){.country-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:520px){.country-grid{grid-template-columns:repeat(2,1fr);}}
.country{
  display:flex;align-items:center;gap:.55rem;
  background:var(--color-paper);border-radius:var(--radius-sm);
  padding:.8rem 1rem;font-size:.9rem;
  box-shadow:var(--shadow-soft);
}
.country .icon{width:1.05em;height:1.05em;color:var(--color-taupe);flex:none;}

/* =========================================================
   İletişim sayfası — kart + harita
========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:stretch;}
.contact-grid>*{min-width:0;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-map-wrap{height:100%;min-height:340px;}
.contact-map{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  border:0;width:100%;height:100%;min-height:340px;display:block;
}

/* =========================================================
   Bölüm ayracı — iki bölüm arasındaki renk geçişini yumuşatan,
   üzerinde örgü sırası izlenimi veren dalgalı çizgiler taşıyan
   ince şerit.

   Renk geçişi DOĞRUDAN gradyanla yapılır: blur + mask ile üretilen
   geçişler tarayıcı motoruna bağımlıdır ve iOS Safari'de katman hiç
   görünmeyip alt sınırda ekranı boydan boya kesen keskin bir çizgi
   bırakabiliyordu. linear-gradient bunu yapısal olarak imkânsız kılar.
========================================================= */
.section-seam{
  position:relative;overflow:hidden;
  height:clamp(56px,9vw,104px);
  background:linear-gradient(to bottom,
    var(--seam-a) 0%,
    var(--seam-a) 14%,
    var(--seam-b) 86%,
    var(--seam-b) 100%);
}
.section-seam__knit{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
/* vector-effect:non-scaling-stroke ZORUNLU. viewBox 0 0 1200 100 ve
   preserveAspectRatio="none" olduğu için kutu orantısız gerilir ve çizgi
   kalınlığı da bu ölçekle ezilir: masaüstünde ~1.5px olan çizgi mobilde
   (56px yükseklik) bir CSS pikselinin ALTINA düşer; hiçbir tarayıcı bu
   kalınlıkta net çizemez, kenar yumuşatma çizgiyi soluk bir lekeye yayar.
   Bu özellik kalınlığı viewBox ölçeğinden bağımsız kılar. */
.section-seam__knit path{
  fill:none;stroke:var(--color-taupe);stroke-width:1.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:.4;
}
.section-seam__mark{position:absolute;color:var(--color-taupe);pointer-events:none;z-index:1;opacity:.55;}

/* Küçük, ortalanmış ikon ayracı */
.divider-mark{display:flex;align-items:center;gap:1rem;margin-block:clamp(2rem,4vw,3rem);color:var(--color-taupe);}
.divider-mark::before,.divider-mark::after{content:'';flex:1;height:1px;background:var(--color-fog);}
.divider-mark .icon{width:1.4em;height:1.4em;}