/* ═══════════════════════════════════════════════════════════════════════════
   DAR EKRAN DÜZENİ

   Sayfa 1440 piksel SABİT bir tasarımdan geliyor; bütün ölçüler satır içi
   stillerde. Kurallar `data-dc-tpl` kimliğiyle TEK ELEMANI hedefler —
   `[style*="..."]` ile toptan ezmek ilk denemede her şeyi bozmuştu.

   ⚠️ 33 ÜST ETİKET, 34 BAŞLIKTIR. İlk yazımda ikisine de başlık boyutu
      verdim ve "GLOBAL ÜRÜN VERİSİ ALTYAPISI" rozeti başlık kadar büyüdü
      (ölçüldü, ekran görüntüsü). Karıştırmayın.

   ⚠️ KAHRAMAN GÖRSELİ ORANTILI KÜÇÜLTÜLÜR. O bir kompozisyon: içindeki
      kartlar mutlak konumlu, 742px yüksekliğe göre yerleştirilmiş. Akışkan
      yapmaya çalışmak dağıtır; küçültmek "ürün fotoğrafı" etkisi verir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dış sayfa yüzeyi 1440px tasarım tuvalinden gelir; içerik kapları 1440px'te
   kalırken arka plan, header ve footer geniş ekranın tamamını doldurmalı. */
[data-dc-tpl="7"]{width:100% !important;min-width:0 !important;max-width:none !important}
[data-dc-tpl="9"],[data-dc-tpl="31"],[data-dc-tpl="345"],
[data-dc-tpl="474"],[data-dc-tpl="555"]{width:100% !important;max-width:1440px !important}

/* Mockup rozeti — kompozisyonun İÇİNDE durur, ondan kopmasın. */
.temsili-rozet{position:absolute;top:-26px;right:0;z-index:4;
  font-size:10px;font-weight:700;letter-spacing:.04em;color:#59615B;
  background:rgba(255,255,255,.92);border:1px solid rgb(232,229,219);
  border-radius:6px;padding:4px 8px;pointer-events:none}
.site-menu-dug{display:none}

@media(max-width:1100px){
  [data-dc-tpl="9"],[data-dc-tpl="31"],[data-dc-tpl="345"],
  [data-dc-tpl="474"],[data-dc-tpl="555"]{padding-left:26px !important;padding-right:26px !important}
  [data-dc-tpl="347"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-dc-tpl="475"],[data-dc-tpl="556"]{grid-template-columns:minmax(0,1fr) !important;gap:26px !important}
  /* ⚠️ Çocukları TEK TEK küçültüyoruz; `top` değeri transform'dan
     etkilenmez. Alt kart satırının inline `top:442px` değeri de aynı oranla
     çarpılmazsa panelle arasında koca bir boşluk kalıyor (ölçüldü: 390px'te
     261px boşluk). Ölçeği değiştiren her yerde bu satır da değişmeli. */
  /* Satırın inline `left:-14px; right:-14px` taşması masaüstünde kasıtlı;
     burada kutu `overflow:hidden` olduğu için soldaki kartı KESİYORDU. */
}

/* Başlık 125% tarayıcı yakınlaştırmasında yaklaşık 1400 CSS piksele düşüyor.
   Eski 1180 eşiğinde logo ve eylemler önce satıra bölünüp sağ CTA'yı kesiyordu.
   Masaüstü düzenini ancak 1440px tasarım genişliği gerçekten varsa kullan. */
@media(max-width:1439px){
  /* Hero görseli 1440px tasarım tuvaline göre çizildi. Daha dar ekranda iki
     sütunda kalırsa sayfa kaymasa bile sağ kartlar kırpılıyor. */
  [data-dc-tpl="31"]{grid-template-columns:minmax(0,1fr) !important;gap:8px !important}
  [data-dc-tpl="68"]{height:525px !important;overflow:hidden}
  [data-dc-tpl="68"] .temsili-rozet{top:10px;right:10px}
  [data-dc-tpl="68"]>*:not(.temsili-rozet){transform:scale(.72);transform-origin:top left;width:138.9% !important}
  [data-dc-tpl="203"]{top:318px !important;left:0 !important;right:0 !important}

  /* JS yoksa ürün bağlantıları ikinci satırda yatay kaydırılır. JS varsa aynı
     alan erişilebilir bir açılır menüye dönüşür; böylece son bağlantı telefonda
     yarım görünmez ve bütün hedefler en az 44px olur. */
  [data-dc-tpl="9"]{gap:12px !important;height:auto !important;min-height:60px;
    padding-top:10px !important;padding-bottom:8px !important;flex-wrap:wrap !important}
  [data-dc-tpl="17"]{display:flex !important;order:3;flex:0 0 100%;min-width:0;
    gap:18px !important;overflow-x:auto;padding:4px 0 2px;scrollbar-width:none}
  [data-dc-tpl="17"]::-webkit-scrollbar{display:none}
  [data-dc-tpl="9"] .scp0{display:inline-flex !important;align-items:center;gap:4px;flex:none;
    white-space:nowrap}
  .site-menu-hazir [data-dc-tpl="9"]{position:relative}
  .site-menu-hazir .site-menu-dug{order:3;display:flex;align-items:center;gap:8px;
    flex:0 0 100%;height:40px;padding:0 12px;border:1px solid rgb(222,219,209);
    border-radius:10px;background:#fff;color:rgb(20,49,38);font:600 13px/1 inherit;
    cursor:pointer;text-align:left}
  .site-menu-dug>svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
  .site-menu-dug .site-menu-ok{width:13px;height:13px;margin-left:auto;transition:transform .15s}
  .site-menu-dug:focus-visible{outline:2px solid rgb(20,49,38);outline-offset:2px}
  .site-menu-hazir [data-dc-tpl="17"]{display:none !important;order:4;flex:0 0 100%;
    overflow:visible;padding:4px;gap:2px !important;background:#fff;
    border:1px solid rgb(231,228,219);border-radius:12px;box-shadow:0 14px 30px rgba(20,49,38,.08)}
  .site-menu-hazir.site-menu-acik [data-dc-tpl="17"]{display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-menu-hazir.site-menu-acik .site-menu-ok{transform:rotate(180deg)}
  .site-menu-hazir [data-dc-tpl="17"] .scp0{min-height:44px;padding:0 12px;border-radius:8px}
  .site-menu-hazir [data-dc-tpl="17"] .scp0:hover{background:rgb(246,244,239)}
  .site-menu-hazir [data-dc-tpl="17"] .scp0:focus-visible{outline:2px solid rgb(20,49,38);
    outline-offset:-2px}
  [data-dc-tpl="10"]{gap:8px !important;flex:0 1 auto;min-width:0}
  [data-dc-tpl="10"] span,[data-dc-tpl="10"] b,[data-dc-tpl="10"] div{white-space:nowrap}
  [data-dc-tpl="11"]{width:26px !important;height:26px !important}
  [data-dc-tpl="28"]{gap:8px !important;flex:0 0 auto}
  [data-dc-tpl="28"] a{height:36px !important;padding:0 13px !important;
    font-size:12.5px !important;white-space:nowrap}
}

@media(max-width:820px){
  [data-dc-tpl="34"]{font-size:38px !important;line-height:1.1 !important;margin-top:20px !important}
  [data-dc-tpl="35"]{font-size:15.5px !important;max-width:none !important;margin-top:18px !important}
  [data-dc-tpl="52"]{flex-wrap:wrap !important;gap:10px 18px !important;margin-top:20px !important}
  [data-dc-tpl="346"],[data-dc-tpl="558"]{font-size:25px !important}
  [data-dc-tpl="347"]{grid-template-columns:minmax(0,1fr) !important}
  [data-dc-tpl="475"],[data-dc-tpl="556"]{padding:26px !important}
  [data-dc-tpl="68"]{height:400px !important}
  [data-dc-tpl="68"]>*:not(.temsili-rozet){transform:scale(.54);width:185% !important}
  [data-dc-tpl="203"]{top:239px !important}
  /* Alt şerit: dört sütun telefonda okunmuyor, ikişerli. */
  [data-dc-tpl="300"]{flex-wrap:wrap !important;gap:16px 0 !important;padding:22px 10px !important}
  [data-dc-tpl="300"]>div{flex:0 0 50% !important}
}

@media(max-width:560px){
  [data-dc-tpl="9"],[data-dc-tpl="31"],[data-dc-tpl="345"],
  [data-dc-tpl="474"],[data-dc-tpl="555"]{padding-left:16px !important;padding-right:16px !important}
  [data-dc-tpl="10"] b,[data-dc-tpl="10"] span{font-size:14px !important}
  [data-dc-tpl="16"]{display:none !important}
  [data-dc-tpl="28"] a{height:34px !important;padding:0 11px !important;font-size:12px !important}
  [data-dc-tpl="28"]{order:2;display:grid !important;
    grid-template-columns:auto minmax(0,.85fr) minmax(0,1.15fr);width:100%;
    flex:1 0 100% !important;margin-left:0 !important;gap:6px !important}
  [data-dc-tpl="28"] .dil,[data-dc-tpl="28"] .dil>summary,
  [data-dc-tpl="28"] a{width:100%;min-width:0;justify-content:center}
  [data-dc-tpl="34"]{font-size:31px !important;letter-spacing:-.02em !important}
  [data-dc-tpl="35"]{font-size:14.5px !important;line-height:1.6 !important}
  [data-dc-tpl="346"],[data-dc-tpl="558"]{font-size:22px !important}
  [data-dc-tpl="475"],[data-dc-tpl="556"]{padding:20px !important;border-radius:16px !important}
  [data-dc-tpl="68"]{height:300px !important}
  [data-dc-tpl="68"]>*:not(.temsili-rozet){transform:scale(.4);width:250% !important}
  [data-dc-tpl="203"]{top:177px !important}
  .site-menu-hazir.site-menu-acik [data-dc-tpl="17"]{grid-template-columns:minmax(0,1fr)}
}

/* 320 fiziksel pikselde %150 zoom yaklaşık 213 CSS piksele iner. Bu uçta üç
   hesap eylemini tek satıra zorlamak son CTA'yı kesiyordu; iki satıra dağıt. */
@media(max-width:320px){
  [data-dc-tpl="10"]{flex:1 0 100% !important}
  [data-dc-tpl="28"]{order:2;display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;
    flex:1 0 100% !important;margin-left:0 !important;gap:8px !important}
  [data-dc-tpl="28"] .dil,[data-dc-tpl="28"] .dil>summary,
  [data-dc-tpl="28"] a{width:100%;min-width:0;justify-content:center}
  [data-dc-tpl="28"] a:last-child{grid-column:1 / -1}
  .site-menu-hazir .site-menu-dug{order:3}
}

@media(prefers-reduced-motion:reduce){
  .site-menu-dug .site-menu-ok{transition:none}
}