/* ===== Strings Kurumsal — temel stiller ===== */
:root{
  --lacivert:#1a365d; --teal-koyu:#164e63; --teal:#0e7490;
  --cyan:#0891b2; --cyan-hover:#1d4ed8; --acik-cyan:#2dd4bf;
  --metin:#1f2937; --soluk:#6b7280; --zemin:#eef1f4; --kart:#f8fafc; --kenar:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Work Sans',system-ui,sans-serif;color:var(--metin);
  background:
    radial-gradient(1200px 700px at 100% 0%, rgba(45,212,191,0.14), transparent 58%),
    radial-gradient(1000px 600px at 0% 100%, rgba(8,145,178,0.14), transparent 58%),
    linear-gradient(160deg, #2c4d72 0%, #2a5c73 50%, #2c8199 100%);
  background-attachment:fixed}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--lacivert)}
img{max-width:100%}

/* Tam genişlik (full-bleed) yerleşim: bölüm arka planları ekranı kaplar,
   içerik ortada ~1320px'te tutulur (okunabilirlik). */
.sk-viewport{width:100%;overflow-x:hidden}
.sk-wrap{width:100%;max-width:100%;margin:0 auto;background:#fff}
/* Doğrudan bölümlerin (nav, hero, ... footer) içeriğini ortala; arka plan tam en.
   Tekil blog yazıları (body.single) hariç — onlar kendi max-width ortalamasını kullanır. */
@media(min-width:1025px){
  body:not(.single) .sk-wrap > *{
    padding-left:max(32px, calc((100% - 1320px) / 2)) !important;
    padding-right:max(32px, calc((100% - 1320px) / 2)) !important;
  }
}

/* ===== Açılır menü (staggered) ===== */
.dd .ddm{display:none}
.dd:hover .ddm{display:flex}
.dd:hover .ddm.mega{display:grid}
.dd:hover .ddm a{opacity:0;animation:ddIn .3s cubic-bezier(.2,.7,.3,1) forwards}
.dd:hover .ddm a:nth-child(1){animation-delay:.04s}
.dd:hover .ddm a:nth-child(2){animation-delay:.08s}
.dd:hover .ddm a:nth-child(3){animation-delay:.12s}
.dd:hover .ddm a:nth-child(4){animation-delay:.16s}
.dd:hover .ddm a:nth-child(5){animation-delay:.20s}
.dd:hover .ddm a:nth-child(6){animation-delay:.24s}
.dd:hover .ddm a:nth-child(7){animation-delay:.28s}
.dd:hover .ddm a:nth-child(8){animation-delay:.32s}
.dd:hover .ddm a:nth-child(9){animation-delay:.36s}
@keyframes ddIn{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}

/* Karusel: sadece aktif slayt görünür (JS transform yönetir) */
[data-track]{display:flex;transition:transform .7s cubic-bezier(.4,0,.2,1)}

/* SSS akordeon */
.sk-faq-a{display:none}
.sk-faq.open .sk-faq-a{display:block}

/* ===== Hamburger + mobil menü ===== */
.sk-burger{display:none;background:none;border:none;font-size:26px;line-height:1;color:#1a365d;cursor:pointer;padding:6px 8px}
.sk-mobile-menu{display:none;flex-direction:column;background:#ffffff;border-bottom:1px solid #eef1f4;padding:6px 20px 14px}
.sk-mobile-menu a{padding:13px 4px;color:#1f2937;font-weight:600;font-size:16px;border-bottom:1px solid #f1f5f9}
.sk-mobile-menu a:hover{color:#0891b2}
.sk-mm-group{display:flex;flex-direction:column}
.sk-mm-head{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;padding:13px 4px;font-family:inherit;font-weight:600;font-size:16px;color:#1f2937;cursor:pointer;border-bottom:1px solid #f1f5f9}
.sk-mm-head span{color:#0891b2;font-size:22px;line-height:1}
.sk-mm-sub{display:none;flex-direction:column;padding-left:14px}
.sk-mm-group.open .sk-mm-sub{display:flex}
.sk-mm-sub a{padding:11px 4px;color:#475569;font-weight:500;font-size:15px;border-bottom:1px solid #f6f8fa}
.sk-mm-sub a:hover{color:#0891b2}
body.sk-menu-open .sk-mobile-menu{display:flex}
@media(min-width:1025px){ .sk-mobile-menu{display:none !important} .sk-burger{display:none !important} }

/* ===== Mobil / tablet responsive ===== */
@media(max-width:1024px){
  .sk-burger{display:block}
  .sk-viewport{overflow-x:hidden}
  .sk-wrap{width:100% !important;max-width:100% !important}
  /* çok kolonlu tüm gridleri tek kolona indir (kartlar, footer, hero, istatistik) */
  .sk-wrap [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* sabit piksel genişlikleri taşmayı önlemek için akışkanlaştır */
  .sk-wrap [style*="width:"]{max-width:100% !important}
  .sk-wrap [style*="min-width"]{min-width:0 !important}
  .sk-wrap img,.sk-wrap svg{max-width:100%}
  /* uzun yatay paddingleri güvenli aralığa çek */
  .sk-wrap [style*="84px 48px"],.sk-wrap [style*="72px 48px"],.sk-wrap [style*="64px 48px"],.sk-wrap [style*="56px 48px"],.sk-wrap [style*="48px 48px"]{padding-left:20px !important;padding-right:20px !important}
  .sk-wrap [data-screen-label="Hero"]{padding-top:44px !important;padding-bottom:48px !important}
  /* flex/grid çocukları içeriğe göre daralabilsin (taşmayı önler) */
  .sk-wrap [style*="display:flex"],.sk-wrap [style*="display:grid"]{min-width:0}
  .sk-wrap [style*="display:flex"] > *,.sk-wrap [style*="display:grid"] > *{min-width:0}
  /* Anasayfa "Ürünlerimizden Kareler": görseller tam görünsün (sabit yükseklik kaldır) */
  .sk-wrap [data-screen-label="Ürün vitrini"] a{height:auto !important}
  .sk-wrap [data-screen-label="Ürün vitrini"] img{height:auto !important;max-height:none !important}
  /* geniş yatay paddingleri azalt */
  .sk-wrap [style*="padding:84px 48px"],
  .sk-wrap [style*="padding:72px 48px"],
  .sk-wrap [style*="padding:64px 48px"],
  .sk-wrap [style*="padding:56px 48px"],
  .sk-wrap [style*="padding:48px"],
  .sk-wrap [style*="0 48px"]{padding-left:20px !important;padding-right:20px !important}
  .sk-wrap [style*="padding:56px 160px"]{padding-left:20px !important;padding-right:20px !important}
  .sk-wrap [style*="margin:0 48px"]{margin-left:16px !important;margin-right:16px !important}
  /* üst menü linklerini mobilde gizle (logo + hamburger kalır) */
  .sk-wrap [data-screen-label="Nav"] > div{display:none !important}
  .sk-wrap h1{font-size:34px !important}
  .sk-wrap h2{font-size:26px !important}
}
@media(max-width:640px){
  .sk-wrap [style*="font-size:52px"]{font-size:28px !important}
  .sk-wrap [style*="font-size:44px"]{font-size:26px !important}
  .sk-wrap [style*="font-size:40px"]{font-size:30px !important}
  .sk-wrap [data-screen-label="Nav"]{padding:0 20px !important;height:64px !important}
}

/* Klavye erişimi ve hareket tercihi */
.dd:focus-within .ddm{display:flex}
.dd:focus-within .ddm.mga,.dd:focus-within .ddm.mega{display:grid}
a:focus-visible,button:focus-visible{outline:3px solid #0891b2;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}