/* ==========================================================================
   cimbicmerobotu.tr ortak stil: pudurobotics.com tasarim dili.
   Kaynak: docs/PUDU-TASARIM-SPEC.md ve canli olcum (docs/UI-DEGISIKLIK.md).

   OLCEK KURALI (Pudu O1, canli olcumle dogrulandi):
   - 1024px altinda kok yazi boyutu = pencere / 375 x 16. Mobil tasarim 375px
     artboard'dur ve 1023px'e kadar oldugu gibi buyur (768'de 2,048 kat).
   - Bu yuzden 1024 alti tum yazi, bosluk, yukseklik ve genislik degerleri rem
     yazilir (375 tabaninda 1rem = 16px). Pudu'nun "px" adli siniflari da
     (h-426px, w-186px, pt-39px, h-72px) rem'dir, olcumde buyurler.
   - px kalanlar: 1px cizgiler, odak cercevesi, golge ve bulaniklik, medya
     sorgusu kosullari ve Pudu'nun CSS modulu degerleri (makale basligi 20/28,
     zengin metin 14/24). 1024 ve ustu medya sorgularinda degerler spec ile
     kolay karsilastirilsin diye px yazilir; orada kok 16px oldugu icin esittir.
   - Ara kirilim (600, 768, 900) kullanilmaz: 1024 altinda mobil duzen korunur.
   ========================================================================== */

/* PingFang SC kisa cizgiyi (U+002D) uzun tire genisliginde cizer: "26-114 mm", "E-posta" tireli
   gorunur. Yalniz bu karakterler Latin sistem yazi tipinden gelir; geri kalan metin Pudu'daki gibi
   PingFang. Yazi tipi bulunamazsa siradaki (PingFang) kullanilir. */
@font-face{font-family:"CB Kisa Cizgi";font-weight:100 500;unicode-range:U+002D,U+2010,U+2011;
  src:local("Helvetica Neue"),local("HelveticaNeue"),local("Segoe UI"),local("SegoeUI"),local("Arial"),local("ArialMT")}
@font-face{font-family:"CB Kisa Cizgi";font-weight:600 900;unicode-range:U+002D,U+2010,U+2011;
  src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Segoe UI Bold"),local("SegoeUI-Bold"),local("Arial Bold"),local("Arial-BoldMT")}
:root{
  --bg-1:#ffffff; --bg-2:#f3f4f5; --bg-3:#e1e4e8; --bg-kart:#f2f3f5;
  --koyu-1:#141417; --koyu-2:#28292d; --koyu-3:#1c1d20;
  --m-1:rgba(0,0,0,.9); --m-2:rgba(0,0,0,.6); --m-3:rgba(0,0,0,.4); --m-4:rgba(0,0,0,.26);
  --b-1:hsla(0,0%,100%,.95); --b-2:hsla(0,0%,100%,.6); --b-3:hsla(0,0%,100%,.35);
  --mavi:#0066ff; --mavi-koyu:#0052cc; --mavi-acik:#297eff; --mavi-zemin:#eef4ff;
  --cizgi:#e1e4e8; --cizgi-2:#d4d8e0;
  /* eski adlar: sayfa modulleri satir ici stilde kullaniyor */
  --c-ink:rgba(0,0,0,.9); --c-text:rgba(0,0,0,.9); --c-muted:rgba(0,0,0,.6); --c-subtle:rgba(0,0,0,.4);
  --c-line:#e1e4e8; --c-surface:#f2f3f5; --c-surface-2:#e1e4e8; --c-white:#fff;
  --c-blue:#0066ff; --c-blue-hover:#1e40af; --c-red:#e31937;
  --c-turf:#0066ff; --c-turf-bg:#eef4ff;
  --radius-sm:.125rem; --radius:.125rem; --header-h:4rem; --gutter:1.5rem; --col-gap:1.5rem;
  --ease:cubic-bezier(.5,0,0,.75); --dur:.3s;
  --font:"CB Kisa Cizgi","PingFang SC",-apple-system,BlinkMacSystemFont,"Open Sans","Microsoft YaHei","Helvetica Neue","Hiragino Sans GB","WenQuanYi Micro Hei",Arial,sans-serif;
  --shadow-panel:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --wrap:1248px;
}

/* O1 kok olcek */
@media (max-width:1023px){html{font-size:calc(100vw / 375 * 16)}}

/* ---- taban ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font);font-size:.875rem;line-height:1.5;color:rgba(0,0,0,.85);background:#fff;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-variant:tabular-nums;font-feature-settings:"tnum"}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--mavi);text-decoration:none}
a:hover{color:var(--c-blue-hover);text-decoration:underline}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--mavi);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;color:rgba(0,0,0,.85);font-weight:600;line-height:1.14;letter-spacing:normal}
h1,h2{font-size:1.5rem;line-height:2rem}
h3{font-size:1.25rem;line-height:1.75rem}
@media(min-width:1024px){h1,h2{font-size:42px;line-height:50px}}
p{margin:0}
p,li{color:var(--m-2);font-size:inherit}

/* hareket: azaltilmis hareket tercihinde gecis yok; ?hareket=1 (html.hareket) zorlar */
@media(prefers-reduced-motion:reduce){
  html:not(.hareket) *,html:not(.hareket) *::before,html:not(.hareket) *::after{animation:none!important;transition:none!important}
  html:not(.hareket){scroll-behavior:auto}
}

/* ---- yerlesim ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.stack{display:flex;flex-direction:column}
.stack>*+*{margin-top:1rem}
main>section{padding:clamp(3.75rem,8vw,7.5rem) 0}
.lede{font-size:1rem;line-height:1.5rem;color:var(--m-2);max-width:62ch}
.eyebrow{font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:normal;color:var(--mavi)}
main>section:not(.hero)>.wrap.stack>h2:first-child{text-align:center;margin-left:auto;margin-right:auto;max-width:28ch}
main>section:not(.hero)>.wrap.stack>h2:first-child+p.lede{text-align:center;margin-left:auto;margin-right:auto}

/* ---- dugmeler: kose 2px, hover #1e40af (O3, O16) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;
  padding:.72rem 1.5rem;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;
  font-size:.875rem;line-height:1.3125rem;font-weight:500;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--mavi);border-color:var(--mavi);color:#fff}
.btn-primary:hover{background:#1e40af;border-color:#1e40af;color:#fff}
.btn-ghost{background:#fff;color:var(--m-1);border-color:var(--cizgi-2)}
.btn-ghost:hover{background:var(--bg-2);color:var(--m-1)}

/* ---- basit icerik hero'su: yalniz 404 sayfasi (build.mjs) kullanir ---- */
.hero{position:relative;padding:0!important;background:var(--koyu-1);overflow:hidden;
  min-height:clamp(35rem,133vw,47.5rem);display:flex;align-items:flex-end}
@media(min-width:1024px){.hero{min-height:min(56.25vw,760px);align-items:center}}
.hero .inner{position:static;display:block;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:clamp(6rem,14vw,8rem) var(--gutter) clamp(2.5rem,6vw,4rem)}
.hero .inner>div:last-child{position:absolute;inset:0;z-index:0}
.hero .inner>div:last-child img{width:100%;height:100%;object-fit:cover;border-radius:0!important;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,20,23,.92) 0%,rgba(20,20,23,.55) 45%,rgba(20,20,23,.1) 100%)}
@media(min-width:1024px){.hero::after{background:linear-gradient(90deg,rgba(20,20,23,.9) 0%,rgba(20,20,23,.6) 42%,rgba(20,20,23,0) 75%)}}
.hero .inner>div:first-child{position:relative;z-index:2;max-width:40rem}
.hero h1{font-size:1.75rem;line-height:2.25rem;color:#fff}
@media(min-width:1024px){.hero h1{font-size:42px;line-height:50px}}
.hero .eyebrow{color:var(--mavi-acik)}
.hero .lede,.hero p{font-size:1rem;line-height:1.5rem;color:#fff}
.hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}


table{width:100%;min-width:28.75rem;border-collapse:collapse;background:#fff;font-size:.875rem;line-height:1.3125rem}
@media(min-width:1024px){table{min-width:520px}}
th,td{text-align:left;vertical-align:top;padding:.65rem .75rem;border-bottom:1px solid var(--c-line)}
@media(min-width:1024px){th,td{padding:.8rem 1rem}}
th{background:var(--bg-2);color:var(--m-1);font-size:.75rem;line-height:1rem;font-weight:600;text-transform:uppercase;white-space:nowrap}
td{color:var(--m-2)}
tr:last-child td{border-bottom:0}
td.sayi{font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:hover td{background:#fafbfc}

/* etiket: Pudu urun ozellik etiketi dili, kose 2px */
.rozet{display:inline-block;padding:.2rem .6rem;border-radius:var(--radius-sm);font-size:.74rem;font-weight:600;
  background:var(--c-turf-bg);color:var(--c-turf)}

/* SSS: yalniz icerikte. Kabuktaki akordeonlar (mobil menu, footer) kendi kuralini tasir. */
main details{border-bottom:1px solid var(--c-line);padding:1rem 0}
main details>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:max(1.5rem,24px);cursor:pointer;list-style:none;
  font-size:1rem;line-height:1.5rem;font-weight:600;color:var(--m-1)}
main details>summary::-webkit-details-marker{display:none}
main details>summary::after{content:"+";font-size:1.4rem;line-height:1;font-weight:400;color:var(--mavi)}
main details[open]>summary::after{content:"\2212"}
main details>*:not(summary){margin-top:.75rem;max-width:68ch;font-size:.875rem;line-height:1.3125rem;color:var(--m-2)}


/* icerige atla: yalnizca klavye odaginda gorunur */
.atla{position:absolute;left:.75rem;top:-6.25rem;z-index:200;background:var(--c-ink);color:#fff;
  padding:.6rem 1rem;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600}
.atla:focus{top:.75rem;color:#fff;text-decoration:none}

/* ==========================================================================
   KABUK: navbar (O10), mega menu (O11, O12), mobil cekmece (O14)
   ========================================================================== */
/* backdrop-filter sabit konumlu cocuklar icin kapsayici blok yaratir; bulaniklik
   sozde ogede durur ki mega panel ve cekmece ekrana gore konumlansin. */
/* saklanma top ile: transform sabit konumlu cocuklara (panel, perde, cekmece) kapsayici blok
   yaratir, geri gelirken acilan cekmece 0 yukseklige coker. top bunu yapmaz, gorunum ayni. */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);isolation:isolate;transition:top .3s ease}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(150%) blur(24px);backdrop-filter:saturate(150%) blur(24px);border-bottom:1px solid #f2f3f5}
.hdr .bar{max-width:1248px;height:var(--header-h);display:flex;align-items:center;gap:1rem;min-width:0}
.logo{display:inline-flex;align-items:center;gap:.7rem;flex:none;min-height:2.75rem;text-decoration:none}
.logo:hover{text-decoration:none}
.logo img{display:block;width:auto;height:1.5rem}
.logo .ek{font-size:.72rem;line-height:1.2;color:rgba(0,0,0,.6);padding-left:.7rem;border-left:1px solid #d4d8e0;white-space:nowrap}
@media(max-width:1023px){.logo{gap:.5rem}.logo .ek{padding-left:.5rem}}
/* Pudu masaustu menuyu 1200'de acar; 1024-1199 hamburger + cekmece, logo 78x24 (canli olcum).
   Kok olcek 1023'te kalir: 1024-1199'da cekmece 375 tasariminin 1:1 hali, tam genislik. */
@media(max-width:1199px){.hdr .logo{gap:.5rem}.hdr .logo .ek{padding-left:.5rem}.hdr .logo img{width:4.875rem;height:auto}}
.hdr-sag{flex:none;margin-left:auto;display:flex;align-items:center;gap:.5rem}
.hdr-sag .btn-primary{min-height:0;height:auto;padding:8px 16px;border:0;border-radius:2px;background:#2563eb;
  font-size:14px;line-height:21px;font-weight:500;white-space:nowrap}
.hdr-sag .btn-primary:hover{background:#1e40af}
@media(max-width:1199px){.hdr-sag .btn-primary{display:none}}

.nav{flex:1;min-width:0;height:100%;display:flex;align-items:stretch;justify-content:flex-end;gap:48px}
@media(max-width:1199px){.nav{display:none}}
.nav-oge{display:flex;align-items:center}
/* Pudu: oge 14/20 + 2px alt cizgi, dolgu yok; cizgi y 40,5-42,5 (Pudu navbarinin 1px alt cizgisi
   icerigi 0,5px yukari alir, margin-bottom 1px ayni hizayi verir). Tiklama ve dokunma alani
   ::before ile header yuksekligine genisler, gorunum degismez. */
.nav-dug{appearance:none;-webkit-appearance:none;position:relative;display:inline-grid;margin:0 0 1px;padding:0;background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;font:inherit;font-size:14px;line-height:20px;color:rgba(0,0,0,.9);
  white-space:nowrap;transition:border-color .15s ease}
.nav-dug::before{content:"";position:absolute;top:-21px;bottom:-21px;left:-12px;right:-12px}
/* kalinlasinca kayma olmasin: kalin genislik onceden ayrilir (O10) */
.nav-dug::after{content:attr(data-ad);font-weight:600;height:0;visibility:hidden;overflow:hidden}
html:not(.js) .nav-oge:hover .nav-dug,.nav-oge.acik .nav-dug,.nav-dug.aktif{border-bottom-color:var(--mavi);font-weight:600;color:rgba(0,0,0,.9)}
/* acik (hover) oge mavi yazi, bulunulan bolum siyah; ikisi de 600 + mavi alt cizgi (Pudu olcumu) */
html:not(.js) .nav-oge:hover .nav-dug,.nav-oge.acik .nav-dug{color:var(--mavi)}
/* panel acikken sayfa karartilir: siyah %80 + 12px bulaniklik, navbar camin arkasinda kalir (z -2 < ::before -1) */
.hdr-ortu{position:fixed;top:0;left:0;right:0;height:100vh;z-index:-2;pointer-events:none;background:rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
  opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
/* menu acikken (JS .menu-acik) perde tiklamayi yakalar: disari tiklama alttaki baglantiyi
   tetiklemeden kapatir, sayfa hover almaz (Pudu). Ogeler arasi geciste sinif kalkmaz, perde titremez. */
.hdr.menu-acik .hdr-ortu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
html:not(.js) .hdr:has(.nav-oge:hover) .hdr-ortu{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
@media(max-width:1199px){.hdr-ortu{display:none}}
.nav-dug:focus-visible{outline:2px solid var(--mavi);outline-offset:4px}

/* Panel: Pudu gibi yalniz opaklik (O11, O16). Kapali panel fareyi yakalamaz (pointer-events),
   kaybolurken ustunden gecen imlec eski paneli geri acmaz; header'a tasan kayma yok. */
.mega{position:fixed;top:var(--header-h);left:0;right:0;z-index:49;max-height:90vh;overflow-y:auto;
  padding:16px 0 24px;background:#fff;box-shadow:var(--shadow-panel);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
html:not(.js) .nav-oge:hover .mega,html:not(.js) .nav-oge:focus-within .mega,.nav-oge.acik .mega{
  opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
/* acik panel kapanmakta olanin ustunde. Panelden panele (.gecis): yeni panel 200 ms'de eskisinin
   ustune gelir, eski panel ancak sonra kaybolur; arada perde gorunmez, ic ice hayalet olmaz. */
.nav-oge.acik .mega{z-index:50}
.nav.gecis .mega{transition:opacity .15s linear .2s,visibility 0s linear .35s}
.nav.gecis .nav-oge.acik .mega{transition:opacity .2s cubic-bezier(.4,0,.2,1)}
.mega .ic{max-width:1248px;margin:0 auto;padding:0 24px}
.mega:not(.liste) .ic{min-height:400px}
.mega.liste{padding:48px 0}
/* O11 urun paneli: sekme satiri + 186x220 kartlar */
.mega-sekme{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:16px}
.mega-sekme>*{padding:8px 16px;font-size:14px;line-height:20px;color:rgba(0,0,0,.6);white-space:nowrap}
.mega-sekme .aktif{background:#edf4ff;color:var(--mavi);font-weight:600}
.mega-sekme a{display:inline-flex;align-items:center;font-size:12px;line-height:16px;color:rgba(0,0,0,.9);text-decoration:none;transition:color .15s ease}
.mega-sekme a:hover{color:var(--mavi);text-decoration:none}
.mega-sekme a svg{width:7px;height:12px;margin-left:6px;fill:none;stroke:currentColor;stroke-width:1.5}
.mega-kartlar{display:flex;flex-wrap:wrap;gap:16px}
.mega-kart{display:flex;flex-direction:column;width:186px;color:rgba(0,0,0,.9);text-decoration:none;white-space:normal}
.mega-kart:hover{text-decoration:none}
.mega-kart .res{display:flex;align-items:center;justify-content:center;width:186px;height:220px;overflow:hidden;background:#f2f3f5}
.mega-kart .res img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease-in-out}
.mega-kart:hover .res img{transform:scale(1.1)}
.mega-kart .ad{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:16px}
.mega-kart .ad strong{font-size:16px;line-height:24px;font-weight:600;color:rgba(0,0,0,.9)}
.mega-kart .yeni{font-size:12px;line-height:16px;font-weight:600;font-style:italic;color:#f76719}
.mega-kart .ac{margin-top:4px;font-size:12px;line-height:16px;color:rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* O12 liste paneli: sutunlu akis, 24px satir, 14px, hover 600 */
/* Sutunlar arasi Pudu olcumu: en genis ogenin sonundan sonraki sutuna 78px (Industries paneli) */
.mega-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;
  gap:24px 78px;max-height:260px}
.mega-liste li{height:24px;display:flex;align-items:center}
/* Pudu olcumu: liste ogeleri 14/20, 600, rgba(0,0,0,.9); spec O12'deki "hover 600" zaten 600 */
.mega-liste a{font-size:14px;line-height:20px;font-weight:600;color:rgba(0,0,0,.9);white-space:nowrap;text-decoration:none;transition:color .15s ease}
.mega-liste a:hover,.mega-liste a[aria-current=page]{color:var(--mavi);text-decoration:none}

/* O14 mobil navbar ve cekmece */
.mobil{display:none;position:relative}
@media(max-width:1199px){.mobil{display:block}}
.mobil>summary{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;margin-right:-.625rem;
  list-style:none;cursor:pointer;background:none;border:0}
.mobil>summary::-webkit-details-marker{display:none}
.cizgi,.cizgi::before,.cizgi::after{display:block;width:1.25rem;height:.125rem;background:rgba(0,0,0,.9);
  transition:transform .3s ease,background-color .3s ease,top .3s ease}
.cizgi{position:relative}
.cizgi::before,.cizgi::after{content:"";position:absolute;left:0}
.cizgi::before{top:-.375rem}
.cizgi::after{top:.375rem}
.mobil[open] .cizgi{background:transparent}
.mobil[open] .cizgi::before{top:0;transform:rotate(45deg)}
.mobil[open] .cizgi::after{top:0;transform:rotate(-45deg)}
.mobil-panel{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:60;display:block;overflow-y:auto;
  overscroll-behavior:contain;padding:1.5rem 1.5rem 2rem;background:#fff;font-size:.875rem}
.mobil-panel details{border-top:1px solid #576c8a}
.mobil-panel details:last-of-type{border-bottom:1px solid #576c8a}
.mobil-panel summary{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;cursor:pointer;list-style:none;
  font-size:.875rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.9)}
.mobil-panel summary::-webkit-details-marker{display:none}
/* Pudu cekmecesi: alt listesi olan satirda 12x12 arti; acikken 45 derece doner */
.mobil-panel summary::after{content:"";flex:none;width:.75rem;height:.75rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .5s ease-in-out}
.mobil-panel details[open]>summary::after{transform:rotate(45deg)}
.mobil-panel ul{list-style:none;margin:0;padding:0 0 .5rem .5rem;display:grid}
.mobil-panel ul a{display:flex;align-items:center;height:2.5rem;font-size:.875rem;font-weight:400;color:rgba(0,0,0,.85);text-decoration:none}
.mobil-panel ul a:hover{color:var(--mavi)}
.mobil-panel .mobil-cta{display:flex;align-items:center;justify-content:center;height:3.5rem;margin-top:3.5rem;
  background:#2563eb;border-radius:.125rem;color:#fff;font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .15s ease}
.mobil-panel .mobil-cta:hover{background:#1e40af;color:#fff}
/* akordeon acilisi: icerik yuksekligi 500ms (O16), destekleyen tarayicida */
@supports (interpolate-size:allow-keywords){
  .mobil-panel details,.ftr-mobil details{interpolate-size:allow-keywords}
  .mobil-panel details::details-content,.ftr-mobil details::details-content{block-size:0;overflow-y:clip;
    transition:block-size .5s ease-in-out,content-visibility .5s allow-discrete}
  .mobil-panel details[open]::details-content,.ftr-mobil details[open]::details-content{block-size:auto}
}
/* cekmece acikken sayfa kaymasin; yalniz cekmeceli duzende (acikken 1200+'a genisleyen pencere kilitli kalmaz) */
@media(max-width:1199px){html:has(details.mobil[open]){overflow:hidden}}

/* ==========================================================================
   FOOTER (O15)
   ========================================================================== */
.ftr{background:#e6e9ed;padding:2.4375rem 0 5rem;font-size:.75rem}
@media(min-width:1024px){.ftr{padding:96px 0 64px}}
.ftr .wrap{max-width:1248px}
/* Pudu footer logosu tek renk siyah, 78x24 (M'de 4.875rem); footer ustunden 96px (M 39px): logo kutusu
   yalniz gorsel kadar, 44px dokunma yuksekligi burada ust boslugu kaydirmasin */
.ftr .logo{min-height:0}
.ftr .logo img{width:4.875rem;height:auto;filter:brightness(0)}
.ftr-ust{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1024px){.ftr-ust{grid-template-columns:256px 1fr;gap:16px}}
@media(min-width:1200px){.ftr-ust{grid-template-columns:304px 1fr}}
.ftr-marka>p{max-width:17.5rem;margin-top:1.5rem;font-size:.75rem;line-height:1.125rem;color:rgba(0,0,0,.6)}
.ftr-iletisim{display:grid;gap:.125rem;max-width:17.5rem;margin-top:1.25rem}
@media(max-width:1023px){.ftr-iletisim{max-width:none}}
.ftr-iletisim a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:max(1.5rem,24px);text-decoration:none}
.ftr-iletisim a:hover{text-decoration:underline}
.ftr-iletisim span{font-size:.75rem;color:rgba(0,0,0,.6)}
.ftr-iletisim strong{font-size:.75rem;font-weight:600;color:rgba(0,0,0,.9);font-variant-numeric:tabular-nums}
.ftr .kolonlar{display:none}
/* 1024-1199'da dort sutun tek satirda kalsin: sutunlar daralir, uzun baglanti iki satira iner */
@media(min-width:1024px){.ftr .kolonlar{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:24px}}
.ftr .kolonlar>div{flex:0 1 auto;min-width:0}
.ftr h4{margin:0 0 24px;font-size:12px;line-height:16px;font-weight:600;color:rgba(0,0,0,.9)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* Pudu baglanti adimi 24px: satir 16px + aralik 8px (li govdenin 21px satirini almasin) */
.ftr .kolonlar li{line-height:16px}
.ftr .kolonlar a{font-size:12px;line-height:16px;color:rgba(0,0,0,.6);text-decoration:none}
.ftr .kolonlar a:hover{color:rgba(0,0,0,.6);text-decoration:underline}
/* mobil: akordeon satiri 72px, ust cizgi #576c8a, 12px arti ikonu (500ms) */
.ftr-mobil{display:block;margin-top:2rem}
@media(min-width:1024px){.ftr-mobil{display:none}}
.ftr-mobil details{border-top:1px solid #576c8a}
.ftr-mobil details:last-of-type{border-bottom:1px solid #576c8a}
.ftr-mobil summary{display:flex;align-items:center;justify-content:space-between;height:4.5rem;cursor:pointer;list-style:none;
  font-size:.875rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.85)}
.ftr-mobil summary::-webkit-details-marker{display:none}
.ftr-mobil summary::after{content:"";flex:none;width:.75rem;height:.75rem;
  background:linear-gradient(#576c8a,#576c8a) center/100% 1.5px no-repeat,linear-gradient(#576c8a,#576c8a) center/1.5px 100% no-repeat;
  transition:transform .5s ease-in-out}
.ftr-mobil details[open]>summary::after{transform:rotate(45deg)}
.ftr-mobil ul{padding:0 0 1rem 1rem;gap:1rem}
.ftr-mobil a{font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.6);text-decoration:none}
.ftr-mobil a:hover{text-decoration:underline}
.ftr-mobil .cta-tam{display:block;margin-top:2rem;padding:.8125rem;background:#0066ff;color:#fff;text-align:center;
  font-size:1rem;line-height:1.5rem;text-decoration:none;transition:background-color .15s ease}
.ftr-mobil .cta-tam:hover{background:#1e40af;color:#fff;text-decoration:none}
/* yasal notlar Pudu'nun sosyal satiri yerinde: ust 64, alt 16, alt cizgi #d4d8e0 */
.ftr-notlar{display:grid;grid-template-columns:1fr;gap:1rem 3rem;padding:2rem 0 1rem;border-bottom:1px solid #576c8a}
@media(min-width:1024px){.ftr-notlar{grid-template-columns:1fr 1fr;padding:64px 0 16px;border-bottom-color:#d4d8e0}}
.not-bas{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;font-size:.75rem;line-height:1rem;font-weight:600;color:rgba(0,0,0,.9)}
.not-bas img{width:auto;height:1rem;opacity:.9}
.not p{font-size:.75rem;line-height:1.125rem;color:rgba(0,0,0,.6)}
.not a{color:rgba(0,0,0,.9);font-weight:600}
.ftr .alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-top:1rem;
  font-size:.75rem;line-height:1rem;color:rgba(0,0,0,.6)}
/* satir ici kucuk baglanti: dikey dolgu dokunma alanini 24px yapar, satir yuksekligi degismez */
.ftr .alt a{padding-block:max(.25rem,calc((24px - 1rem) / 2));color:rgba(0,0,0,.6)}

/* ==========================================================================
   A10 duyuru blogu (site geneli sayfa sonu)
   ========================================================================== */
.duyuru-blok{background:#fff;padding:3.75rem 1.5rem}
@media(min-width:1024px){.duyuru-blok{padding:48px 24px}}
.db-ic{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.db-ic{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.db-res{order:-1;height:11.75rem;overflow:hidden;background:#f2f3f5}
@media(min-width:1024px){.db-res{order:0;height:376px}}
.db-res img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s ease-in-out}
.duyuru-blok:hover .db-res img{transform:scale(1.1)}
.db-yazi h2{margin:0;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
.db-yazi p{margin:.75rem 0 0;font-size:.875rem;line-height:1.625;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.db-yazi h2{font-size:24px;line-height:32px}.db-yazi p{margin-top:24px}}
.db-git{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);margin-top:1.5rem;font-size:.875rem;line-height:1.25rem;color:#0066ff}
@media(min-width:1024px){.db-git{font-size:16px;line-height:24px}}
.db-git svg{width:.4375rem;height:.75rem;margin-left:.375rem;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s ease}
.db-git:hover svg{transform:translateX(.25rem)}

/* ==========================================================================
   COZUM ALT MENUSU (C2): yapiskan, 52px, cam, golge; hover ve aktif mavi dolgu
   ========================================================================== */
.alt-menu{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(150%) blur(16px);backdrop-filter:saturate(150%) blur(16px);
  box-shadow:var(--shadow-panel);transition:top .3s ease}
@media(max-width:1023px){.alt-menu{display:none}}
.alt-menu .ic{max-width:1248px;min-height:48px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:0;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.alt-menu .ic::-webkit-scrollbar{display:none}
.alt-menu .bas{flex:none;margin-right:auto;padding:0 40px 0 0;font-size:14px;line-height:21px;font-weight:400;color:rgba(0,0,0,.85);white-space:nowrap}
.alt-menu a{flex:none;padding:8px 12px;font-size:14px;line-height:20px;color:rgba(0,0,0,.6);white-space:nowrap;text-decoration:none;
  transition:background-color .15s,color .15s}
.alt-menu a:hover,.alt-menu a.aktif{background:#0066ff;color:#fff;text-decoration:none}
[id]{scroll-margin-top:calc(var(--header-h) + 4rem)}
/* Cozum sayfasinda asagi kaydirinca navbar saklanir, alt menu en uste yapisir (C0, C2) */
html.ust-gizli .hdr{top:calc(var(--header-h) * -1)}
html.ust-gizli .alt-menu{top:0}

/* ==========================================================================
   URUN SAYFASI (/gt3 /gt5 /gt7): pudurobotics.com/products ile ayni iskelet.
   Koyu tema: zemin #141417, birincil metin %95 beyaz, ikincil %60 beyaz.
   ========================================================================== */
.pd{background:#141417;color:rgba(255,255,255,.95)}
.pd h1,.pd h2,.pd h3{color:rgba(255,255,255,.95);font-weight:600}
.pd-en{max-width:1248px;margin:0 auto;padding:0 1.5rem}
.pd-bol{padding:3.75rem 0}
@media(min-width:1024px){.pd-bol{padding:120px 0}}
.pd-b1{margin:0 0 .75rem;font-size:1.75rem;line-height:2.625rem}
@media(min-width:1024px){.pd-b1{margin-bottom:24px;font-size:48px;line-height:72px}}
.pd-b2{margin:0 0 1.5rem;font-size:1.25rem;line-height:1.75rem}
@media(min-width:1024px){.pd-b2{margin-bottom:32px;font-size:24px;line-height:32px}}
.pd-b3{margin:0 0 .25rem;font-size:1rem;line-height:1.5rem}
@media(min-width:1024px){.pd-b3{margin-bottom:24px;font-size:40px;line-height:48px}}
.pd-gov{font-size:1rem;line-height:1.5rem;color:rgba(255,255,255,.6);white-space:pre-line}
.pd-ana{color:rgba(255,255,255,.95)}

/* hero: 177.86vw (9:16) mobil, 56.25vw (16:9) masaustu; metin ustte, gradyan yok */
.pd-hero{position:relative;width:100%;height:177.86vw;overflow:hidden;background:#141417}
@media(min-width:1024px){.pd-hero{height:56.25vw}}
.pd-hero picture,.pd-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pd-hero-ust{position:absolute;top:0;left:0;width:100%;height:50%;padding:3.75rem 1.5rem 0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
@media(min-width:1024px){.pd-hero-ust{padding-top:112px}}
.pd-hero-ad{width:100%;height:2rem;margin:0 0 .75rem;line-height:0}
@media(min-width:1024px){.pd-hero-ad{max-width:24.28vw;height:3.2vw;margin-bottom:16px}}
.pd-hero-ad img{width:100%;height:100%;object-fit:contain}
.pd-hero-alt{max-width:50rem;margin:0 0 .75rem;font-size:1.125rem;line-height:1.75rem;color:rgba(255,255,255,.95);text-wrap:balance}
@media(min-width:1024px){.pd-hero-alt{margin-bottom:16px;font-size:20px;line-height:28px}}
.pd-hero-dug{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:1.1875rem;background:#f3f4f6;
  color:rgba(0,0,0,.9);font-size:.875rem;line-height:1.25rem;text-decoration:none;transition:background-color .15s ease}
.pd-hero-dug:hover{background:#fff;color:#000;text-decoration:none}

/* ikon izgarasi */
.pd-ikonlar{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem .75rem}
@media(min-width:1024px){
  .pd-ikonlar{gap:48px 24px}
  .pd-ikonlar.k3{grid-template-columns:repeat(3,1fr)}
  .pd-ikonlar.k4{grid-template-columns:repeat(4,1fr)}
}
.pd-ikon{display:flex;flex-direction:column;align-items:center;text-align:center}
.pd-ikon img{width:3rem;height:3rem;margin-bottom:.75rem}
@media(min-width:1024px){.pd-ikon img{width:80px;height:80px;margin-bottom:24px}}
.pd-ikon h3{margin:0;font-size:1.125rem;line-height:1.6875rem}

/* tam genislik: medya + ustte metin, ust gradyan */
.pd-tam{position:relative;width:100%;height:177.86vw;overflow:hidden;background:#141417}
@media(min-width:1024px){.pd-tam{height:56.25vw}}
.pd-tam-medya{position:absolute;inset:0;overflow:hidden}
.pd-tam-ust{position:absolute;top:0;left:0;width:100%;height:68%;padding-top:3.75rem;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.35) 55%,transparent 100%)}
@media(min-width:1024px){.pd-tam-ust{height:50%;padding-top:112px;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}}
.pd-tam-ust .ic{max-width:1248px;margin:0 auto;padding:0 1.5rem;text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media(min-width:1024px){.pd-tam-ust .ic{text-align:center;text-shadow:none}}
.pd-tam-ust p{max-width:45rem;margin:0 auto 2rem}

/* ortali baslik + 2:1 medya */
.pd-orta-bas{max-width:1248px;margin:0 auto 2rem;padding:0 1.5rem}
@media(min-width:1024px){.pd-orta-bas{margin-bottom:64px;text-align:center}.pd-orta-bas p{max-width:45rem;margin:0 auto}}
/* Pudu: 2:1 medyanin altinda 1.5rem, 1024+ 48px bosluk */
.pd-orta-medya{width:100%;max-width:1200px;margin:0 auto 1.5rem;aspect-ratio:2/1;overflow:hidden}
@media(min-width:1024px){.pd-orta-medya{margin-bottom:48px}}

/* kaydirmaya bagli yakinlasma katmani */
.pd-zoom{width:100%;height:100%;transform-origin:center;will-change:transform}
.pd-zoom img,.pd-zoom video,.pd-orta-medya>img,.pd-orta-medya>video{display:block;width:100%;height:100%;object-fit:cover}

/* yan yana grup: kare medya + metin */
.pd-yan-grup{display:flex;flex-direction:column;gap:2rem;max-width:1248px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1024px){.pd-yan-grup{gap:64px}}
.pd-yan{display:flex;flex-direction:column;gap:1.25rem}
@media(min-width:1024px){
  .pd-yan{flex-direction:row;align-items:center;gap:48px}
  .pd-yan.ters{flex-direction:row-reverse}
  .pd-yan .gorsel{flex:0 0 min(588px,50%);width:min(588px,50%)}
}
.pd-yan .gorsel{width:100%;aspect-ratio:1/1;overflow:hidden}
.pd-yan .gorsel img,.pd-yan .gorsel video{display:block;width:100%;height:100%;object-fit:cover}
.pd-yan .yazi{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.pd-yan .pd-gov{font-size:.875rem;line-height:1.25rem}
@media(min-width:1024px){.pd-yan .pd-gov{font-size:18px;line-height:26px}}
/* gizli baslangic yalnizca animasyon aciksa: JS yoksa ya da hareket azaltilmissa icerik gorunur */
.hareket .pd-kay{opacity:0;transform:translateY(3rem);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hareket .pd-kay.gorundu{opacity:1;transform:none}
.pd-sayfa video{cursor:pointer}

/* buyuk sayilar */
.pd-sayilar{display:flex;flex-wrap:wrap;gap:2rem 1.5rem;margin-top:2rem}
@media(min-width:1024px){.pd-sayilar{justify-content:center;gap:64px;margin-top:64px}}
.pd-sayilar .s{flex:0 0 calc(50% - .75rem)}
@media(min-width:1024px){.pd-sayilar .s{flex:0 0 auto;text-align:center}}
.pd-sayilar .d{font-size:1.75rem;line-height:2.625rem;font-weight:700;color:rgba(255,255,255,.95);font-variant-numeric:tabular-nums}
@media(min-width:1024px){.pd-sayilar .d{font-size:48px;line-height:56px}}
.pd-sayilar .e{margin-top:.25rem;font-size:1rem;line-height:1.5rem;color:rgba(255,255,255,.6)}

/* urune genel bakis */
.pd-ozet{display:flex;flex-direction:column;max-width:1248px;margin:0 auto;padding:0 1.5rem}
/* Pudu: gorsel 370px, ozellik kolonu hemen yaninda (1440'ta x 490, genislik 830) */
@media(min-width:1024px){.pd-ozet{flex-direction:row;gap:0}}
.pd-ozet .resim{width:100%;height:20.4375rem;margin-bottom:2rem;text-align:center}
@media(min-width:1024px){.pd-ozet .resim{flex:0 0 370px;height:25vw;max-height:420px;margin:0}}
.pd-ozet .resim img{width:100%;height:100%;object-fit:contain}
.pd-ozet .liste{flex:1;min-width:0}
.pd-ozet-bas{margin:0;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.5rem;line-height:2rem;font-weight:600}
@media(min-width:1024px){.pd-ozet-bas{padding-bottom:24px;font-size:40px;line-height:48px}}
.pd-ozet .ogeler{display:flex;flex-direction:column}
@media(min-width:1024px){.pd-ozet .ogeler{flex-direction:row;flex-wrap:wrap;justify-content:space-between}}
/* Pudu M: ogeler arasinda cizgi yok; etiket 14/21 .6, deger 12/20 .95, arada 7px, altta 10px */
.pd-ozet .oge{margin-top:.75rem;padding-bottom:.625rem}
@media(min-width:1024px){.pd-ozet .oge{width:calc(50% - 12px);max-width:360px;margin-top:44px;padding:0;border:0}}
.pd-ozet .et{margin:0;font-size:.875rem;line-height:1.3125rem;color:rgba(255,255,255,.6)}
.pd-ozet .de{margin:.4375rem 0 0;font-size:.75rem;line-height:1.25rem;color:rgba(255,255,255,.95)}
@media(min-width:1024px){.pd-ozet .et,.pd-ozet .de{font-size:16px;line-height:24px}.pd-ozet .de{margin-top:12px;font-weight:500}}
.pd-ozet .dug{margin-top:3.75rem}
@media(min-width:1024px){.pd-ozet .dug{margin-top:80px}}
.pd-ozet .dug a{display:block;width:100%;padding:1rem;border-radius:.5rem;background:#0066ff;color:#fff;text-align:center;
  font-size:1.125rem;line-height:1.625rem;text-decoration:none;transition:background-color .15s ease}
@media(min-width:1024px){.pd-ozet .dug a{display:inline-block;width:326px;padding:8px 24px;border-radius:4px;font-size:16px}}
.pd-ozet .dug a:hover{background:#1e40af;color:#fff}

/* urun anlatimi: ortali uc blok */
.pd-metinler{display:grid;grid-template-columns:1fr;gap:3rem;max-width:1248px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1024px){.pd-metinler{grid-template-columns:repeat(3,1fr);gap:48px}}
.pd-metin .pd-b2{margin-bottom:1rem}
.pd-metin .pd-gov{font-size:1rem}

/* SEO bolumleri: kullanim alanlari ve SSS, ayni koyu dilde */
.pd-alt{border-top:1px solid rgba(255,255,255,.08)}
.pd-segler{display:grid;gap:1px;background:rgba(255,255,255,.1);grid-template-columns:repeat(auto-fit,minmax(min(16.25rem,100%),1fr))}
.pd-seg{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.4rem;background:#141417;
  color:rgba(255,255,255,.95);font-weight:500;text-decoration:none;transition:background-color .15s ease}
.pd-seg:hover{background:#1c1d20;color:#fff;text-decoration:none}
.pd-seg span:last-child{color:#297eff;font-size:1.25rem}
.pd-sss details{border-bottom-color:rgba(255,255,255,.12)}
.pd-sss details>summary{color:rgba(255,255,255,.95)}
.pd-sss details>summary::after{color:#297eff}
.pd-sss details>*:not(summary){color:rgba(255,255,255,.6)}
.pd-sss a{color:#297eff}

/* demo baloncugu: w-35 h-35, mobilde scale-50; menu, mega panel ve cekmecenin altinda */
/* baloncugun tamami tek baglanti: mobilde scale(.5) ile 70x70 dokunma alani (WCAG 2.5.8) */
.pd-demo{position:fixed;z-index:39;right:-1rem;bottom:2rem;display:block;width:8.75rem;height:8.75rem;
  transform:scale(.5);transform-origin:center;text-decoration:none}
@media(min-width:1024px){.pd-demo{right:78px;bottom:78px;transform:none}}
/* yatay telefonda kok olcekle buyuyen baloncuk ustten header'a tasar: Pudu gibi header'in ustunde kalsin */
@media(max-width:1023px) and (orientation:landscape){.pd-demo{z-index:51}}
.pd-demo:hover{text-decoration:none}
.pd-demo:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:.5rem}
/* Pudu olcumu: 124px yuvarlak, 2px #c0df16 kenar, icinde beyaz zeminli urun gorseli (120px). Bizim
   gorsel saydam oldugu icin beyaz zemin yuvarlakta; kenar cizgisi gorselin ustunde kalir, kapanmaz. */
.pd-demo .yuvarlak{position:absolute;left:.5rem;top:.625rem;display:block;width:7.75rem;height:7.75rem;border-radius:50%;overflow:hidden;
  background:#fff;border:2px solid #c0df16}
.pd-demo .yuvarlak img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease-in-out}
.pd-demo:hover .yuvarlak img{transform:scale(1.1)}
.pd-demo .et{position:absolute;left:0;right:0;bottom:0;display:block;padding:.5rem;border-radius:.5rem;background:#c0df16;
  color:rgba(0,0,0,.9);text-align:center;font-size:.875rem;line-height:1.3125rem;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:background-color .15s ease}
.pd-demo:hover .et{background:#d3f02c;color:#000}
html:has(details.mobil[open]) .pd-demo{display:none}
@media print{.pd-demo{display:none}}

/* ---- src/css/ana.css ---- */
/* ==========================================================================
   Ana sayfa: pudurobotics.com/en ana sayfa sablonu (spec A0-A10, O6-O9, O16).
   Olculer 375x812 ve 1440x900'de Pudu'dan alindi. 1024 alti degerler rem yazilir
   (375 tabaninda 1rem = 16px; kok olcegi ortak stilde, Pudu O1). Pudu'nun px sabitleri
   px kalir: swiper araliklari (8/16), 16x4 sayfalama cubugu, 72 ve 48 oklar, A3 baslik
   clamp(18px, 3vw, 36px). 1024 ve ustu px.
   ========================================================================== */

main>section.an{padding:0}
.an a:hover{text-decoration:none}
.an-gizli{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* O6 bolum kabugu: 60 / 160 dikey, baslik 24/32 sola -> 42/50 ortali */
main>section.an-kabuk{padding:3.75rem 0;display:flex;flex-direction:column}
@media(min-width:1024px){main>section.an-kabuk{padding:160px 0;align-items:center}}
.an-beyaz{background:#fff}
.an-gri{background:#f2f3f5}
.an-bas{width:100%;padding:0 1.5rem 2rem;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.85)}
@media(min-width:1024px){.an-bas{padding:0 24px 64px;font-size:42px;line-height:50px;text-align:center}}

/* O9 daha fazla baglantisi: metin + 7x12 cizgi ok, arada 6px */
.an-git,.an-alt-bag,.an-mavi-bag{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);font-size:1rem;line-height:1.5rem;font-weight:400}
.an-git svg,.an-alt-bag svg,.an-mavi-bag svg{flex:none;width:7px;height:12px;margin-left:.375rem;fill:none;stroke:currentColor;stroke-width:1.2}
.an-git{color:#fff}
.an-alt-bag,.an-mavi-bag,.an-alt-bag:hover,.an-mavi-bag:hover{color:#0066ff}
.an-alt-bag svg,.an-mavi-bag svg{transition:transform .3s ease}
.an-alt-bag:hover svg,.an-mavi-bag:hover svg{transform:translateX(3px)}

/* Gorsel kart: kenardan kenara medya, %20 siyah ortu, kartin tamami tek baglanti */
.an-kart{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;color:#fff;background:#1c1d20}
.an-kart>img,.an-kart>picture>img,.an-kart>video{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.an-kart>picture{display:contents}
.an-kart::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.2);pointer-events:none}
.an-germe,.an-germe:hover{color:inherit}
.an-germe::after{content:"";position:absolute;inset:0;z-index:1}
.an-germe:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
/* O16: hover'da 700 ms boyunca 1.1 buyutme */
.an-buyut>img,.an-buyut>picture>img{transition:transform .7s ease-in-out}
.an-buyut:hover>img,.an-buyut:hover>picture>img{transform:scale(1.1)}

/* O8 oklar: 72x72 hayalet, hover'da rgba(0,0,0,.3) kare, pasif .2 */
.an-ok{position:absolute;top:50%;z-index:9;display:none;width:72px;height:72px;margin-top:-36px;padding:0;border:0;border-radius:0;
  background:transparent;color:#fff;cursor:pointer;transition:background-color .2s ease}
.an-ok svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3}
.an-ok:hover{background:rgba(0,0,0,.3)}
.an-ok:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:0}
.an-ok:disabled{opacity:.2;cursor:default;background:transparent}
.an-ok-onceki{left:0}
.an-ok-sonraki{right:0}
.an-ok-sonraki svg{transform:rotate(180deg)}
@media(min-width:1024px){.an-ok{display:block}}

/* O8 sayfalama: 16x4, 25 derece egik, pasif .35 opaklik */
/* dugme 24x24 dokunma alani (WCAG 2.5.8); gorunen cubuk ::before ile 16x4, adim 24px (16 + 4 + 4) ayni kalir */
.an-sayfa{position:absolute;left:0;right:0;bottom:calc(1.5rem - 10px);z-index:10;display:flex;justify-content:center;pointer-events:none}
.an-sayfa button{position:relative;flex:none;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:0;background:transparent;
  cursor:pointer;pointer-events:auto}
.an-sayfa button::before{content:"";position:absolute;left:4px;top:10px;width:16px;height:4px;background:#fff;opacity:.35;
  transform:skewX(25deg);transition:opacity .2s ease}
.an-sayfa button:hover::before{opacity:.7}
.an-sayfa button[aria-current="true"]::before{opacity:1}
.an-sayfa button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* ------------------------------------------------------------------ A2 banner */
.an-banner{position:relative;height:36rem;overflow:hidden;background:#141417}
@media(max-width:1023px) and (orientation:landscape){.an-banner{height:min(36rem,100svh)}}
/* 1024+: Pudu 800px; kisa ekranda (1024x768, 1280x720, 1366x768) banner header altindaki gorunur alana
   sigar, en az 600px. Boylece seri slaytinin alttaki yazisi ve baglantisi ilk ekranda kalir. Video
   slaytlari (1920x864, 2,22:1) cover ile cizilir: kisa bannerda yanlardan daha az kirpilir. */
@media(min-width:1024px){.an-banner{height:800px;height:min(800px,max(600px,calc(100vh - var(--header-h))));
  height:min(800px,max(600px,calc(100svh - var(--header-h))))}}
/* Dokunmatikte yatay kaydirma betige kalir (pointercancel gelmez), dikey kaydirma ve iki parmakla
   yakinlastirma tarayicida kalir; sektor rayiyla ayni kural. */
.an-fd{touch-action:pan-y pinch-zoom}
.an-fd-slayt{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:0;transition:opacity .8s ease,visibility 0s linear .8s}
.an-fd-slayt.aktif{opacity:1;visibility:visible;z-index:2;transition:opacity .8s ease}
.an-fd-slayt.onceki{opacity:1;visibility:visible;z-index:1;transition:none}
.an-fd[data-capraz] .an-fd-slayt.onceki{opacity:0;transition:opacity .8s ease}
.an-bn-yazi{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:4.75rem;text-align:center;pointer-events:none}
.an-bn-alt{width:95vw;font-size:.875rem;line-height:1.25rem;color:#fff}
.an-bn-alt,.an-bn-yazi .an-git{text-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 16px rgba(0,0,0,.3)}
.an-bn-alt a{pointer-events:auto;font-weight:600}
.an-bn-yazi .an-git{font-size:.75rem;line-height:1.125rem}
.an-bn-yazi .an-git svg,.an-uk .an-git svg{width:6px;height:10px;margin-left:.375rem}
.an-bn-slayt::after{background:linear-gradient(180deg,rgba(0,0,0,.36) 0,rgba(0,0,0,.12) 30%,rgba(0,0,0,0) 48%)}
/* Video slaytlari (GT5, GT7, GT3): acik gokyuzu karelerinde beyaz alt baslik ve baglanti en az 4,5:1
   olsun diye ustten koyu gecis. Yazi bandi boyunca %55 siyah (en parlak karede p10 icin gereken %52),
   bandin altinda yumusak egriyle sifirlanir; robot ve zemin aynen kalir. Olculer yazi katmaniyla ayni
   birimde: 1024 alti rem (yatay telefonda da yaziyla birlikte olceklenir), ustu px. */
.an-bn-slayt:not(.an-bn-seri)::after{background:linear-gradient(180deg,rgba(0,0,0,.56) 0,rgba(0,0,0,.55) 8.25rem,
  rgba(0,0,0,.42) 9.75rem,rgba(0,0,0,.26) 11.25rem,rgba(0,0,0,.12) 12.75rem,rgba(0,0,0,.04) 14.25rem,rgba(0,0,0,0) 15.75rem)}
/* Yatay video (1920x864): GT7 filminin 3,4. saniyesinde alt 14 px'te kirpilmis Ingilizce ozellik
   yazisinin ust kenari kaliyor (alt 14-18 satir). Video ve afis kutusu banner altina 24 px tasar,
   banner kirpar (800 px bannerda bile alttan 25 video satiri gizli); afis ile video ayni kadrajda kalir. */
@media(min-width:1024px),(orientation:landscape){
  .an-bn-slayt:not(.an-bn-seri)>video,.an-bn-slayt:not(.an-bn-seri)>picture>img{bottom:auto;height:calc(100% + 24px)}
}
@media(min-width:1024px){
  .an-bn-yazi{gap:16px;padding-top:112px}
  .an-bn-alt{font-size:20px;line-height:40px}
  .an-bn-yazi .an-git{font-size:14px;line-height:20px}
  .an-bn-yazi .an-git svg,.an-uk .an-git svg{width:7px;height:12px;margin-left:6px}
  .an-bn-slayt:not(.an-bn-seri)::after{background:linear-gradient(180deg,rgba(0,0,0,.56) 0,rgba(0,0,0,.55) 250px,
    rgba(0,0,0,.42) 300px,rgba(0,0,0,.26) 350px,rgba(0,0,0,.12) 400px,rgba(0,0,0,.04) 450px,rgba(0,0,0,0) 500px)}
}

/* ------------------------------------------------------------------ A3 urun grubu 2x2 */
main>section.an-urunler{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:.5rem}
@media(min-width:1024px){main>section.an-urunler{grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;padding:0 16px}}
/* metin ust %5: 4:5 kartta genisligin %6,25'i, 25:16 kartta %3,2'si. 25:16 oran 1200'den baslar;
   1024-1199 arasinda Pudu karti 4:5 kalir (488x610). 1199 alti gorsel ayni fotografin 4:5 kesimi
   (picture, ana.mjs dikey): kutuyu kirpmadan doldurur, robot kadrajda tam. */
.an-uk{aspect-ratio:4/5;align-items:center;gap:.25rem;padding:6.25% 1rem 0;text-align:center}
.an-uk h3{max-width:90%;font-size:clamp(18px,3vw,36px);line-height:1.5;font-weight:600;color:#fff}
.an-uk .an-git{font-size:.75rem;line-height:1.125rem}
@media(min-width:1024px){
  .an-uk{gap:8px}
  .an-uk .an-git{font-size:14px;line-height:20px}
}
@media(min-width:1200px){.an-uk{aspect-ratio:25/16;padding-top:3.2%}}

/* ------------------------------------------------------------------ swiper rayi */
.an-ray{position:relative;width:100%}
.an-ray-pencere{overflow:hidden;touch-action:pan-y pinch-zoom}
.an-ray-iz{position:relative;display:flex;gap:8px;will-change:transform}
@media(min-width:1024px){.an-ray-iz{gap:16px}}
.an-ray-iz>*{flex:none}
.an-ray img{-webkit-user-drag:none;user-select:none}
.an-ray.surukle{cursor:grabbing}
.an-ray.surukle .an-ray-iz{user-select:none}
.an-alt-bag{position:absolute;left:50%;bottom:-3.5rem;transform:translateX(-50%);white-space:nowrap;font-size:.875rem;line-height:1.25rem}
@media(min-width:1024px){.an-alt-bag{bottom:-64px;font-size:16px;line-height:24px}}

/* ------------------------------------------------------------------ A4 sektorler */
.an-sektor-ray .an-ray-pencere{padding-left:1.5rem}
@media(min-width:1024px){.an-sektor-ray .an-ray-pencere{padding-left:16px}}
.an-sektor{width:18.75rem;aspect-ratio:1/1;justify-content:flex-end;padding:0 0 2rem 2rem}
.an-sk-yazi{width:calc(100% + 2rem - 18vw)}
.an-sektor h3{padding-bottom:.5rem;font-size:1.5rem;line-height:2rem;font-weight:600;color:#fff}
@media(min-width:1024px){
  .an-sektor{width:372px;padding:0 0 32px 32px}
  .an-sk-yazi{width:calc(100% + 32px - 5vw)}
  .an-sektor h3{font-size:26px;line-height:1.2}
}

/* ------------------------------------------------------------------ A5 kabiliyet videolari */
.an-vd{width:100%;height:20rem;justify-content:flex-end;align-items:center;padding-bottom:4.75rem;text-align:center}
.an-vd-yazi{width:100%;padding:0 1rem;display:flex;flex-direction:column;align-items:center}
.an-vd h3{padding:0 1rem .5rem;font-size:1.5rem;line-height:2rem;font-weight:600;color:#fff}
/* Pudu: oklar 1098px ortali kapta; 1098px'ten dar ekranda kenara yaslanir, disari tasmaz */
.an-vd-ray .an-ok-onceki{left:max(0px,calc(50% - 549px))}
.an-vd-ray .an-ok-sonraki{right:max(0px,calc(50% - 549px))}
@media(min-width:1024px){
  .an-vd{width:50%;height:700px;padding-bottom:76px}
  .an-vd-yazi{width:50%;padding:0}
  .an-vd h3{font-size:30px;line-height:36px}
}

/* ------------------------------------------------------------------ A7 operasyonel sonuclar */
.an-nd{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:1248px;padding:0 1.5rem}
.an-nd-res{position:relative;flex:none;height:20.4375rem;overflow:hidden;background:#e6e9ed}
.an-nd-res img{display:block;width:100%;height:100%;object-fit:cover}
.an-nd-sag{display:flex;flex-direction:column;justify-content:space-between}
.an-istat{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.an-istat>div{display:flex;flex-direction:column;gap:1rem;padding:.5rem .75rem;background:#f2f3f5}
.an-istat .d{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.25rem;color:#0066ff;font-weight:700;font-variant-numeric:tabular-nums}
.an-istat .d .s{font-size:2rem;line-height:2.5rem}
.an-istat .d .b{font-size:1rem;line-height:1.25rem;font-weight:600;white-space:nowrap}
.an-istat .e{font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.6)}
/* Degerlerin kaynagi tablonun ustunde bir kez (her etikette model notu yok) */
.an-istat-not{grid-column:1/-1;font-size:.875rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.6)}
.an-nd-alt{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;margin-top:3rem}
.an-nd-alt p{font-size:1rem;line-height:1.5rem;color:rgba(0,0,0,.85)}
.an-mavi-bag{font-size:.875rem;line-height:1.25rem}
.an-sonuc{display:flex;gap:.5rem;width:100%;max-width:1248px;margin-top:1.5rem;padding:0 1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 1.5rem;scrollbar-width:none}
.an-sonuc::-webkit-scrollbar{display:none}
.an-sonuc:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.an-sonuc>div{flex:none;width:16.5rem;scroll-snap-align:start}
.an-sonuc>div{position:relative;padding:1.25rem .75rem 1rem;background:#f2f3f5;border:0}
.an-sonuc>div::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#0066ff;transform:scaleX(.12);transform-origin:left;transition:transform .3s ease}
.an-sonuc>div:hover::before{transform:scaleX(1)}
.an-sonuc h3{font-size:1rem;line-height:1.5rem;font-weight:600;color:rgba(0,0,0,.9)}
.an-sonuc p{margin-top:.5rem;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){
  .an-nd{flex-direction:row;gap:48px;height:660px;padding:0 24px}
  .an-nd-res{width:calc(50% - 24px);height:100%}
  .an-nd-sag{flex:1;min-width:0}
  .an-istat>div{padding:16px 24px}
  .an-istat .d .s{font-size:48px;line-height:48px}
  .an-istat .d .b{font-size:24px;line-height:28px}
  .an-istat .e{font-weight:600}
  .an-nd-alt{margin-top:0}
  .an-mavi-bag{font-size:16px;line-height:24px}
  .an-sonuc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;padding:0 24px;overflow:visible}
  .an-sonuc>div{width:auto;padding:28px 24px 24px}
}

/* 1024-1199: dar istatistik kartinda sayi ve birim tek satirda kalsin */
@media(min-width:1024px) and (max-width:1199px){
  .an-istat>div{padding:16px}
  .an-istat .d .s{font-size:40px;line-height:44px}
  .an-istat .d .b{font-size:18px;line-height:24px}
}

/* ------------------------------------------------------------------ A9 bilgi sayfalari */
.an-meta{display:flex;gap:1.25rem;padding-top:2rem;font-size:.875rem;line-height:1.25rem;color:#0066ff}
.an-oc{position:relative;width:100%;max-width:1200px}
.an-oc .an-fd-slaytlar{display:grid}
.an-oc .an-fd-slayt{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column-reverse;background:transparent}
.an-oc-res{position:relative;flex:none;width:100%;height:15rem;overflow:hidden;background:#e6e9ed}
.an-oc-res img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
/* Metin karti slaytin kalan yuksekligini doldurur: gorsel her slaytta ustte kalir, kisa ozetli slaytta
   ozet ile tur etiketi arasi en uzun ozetle olan satir farki kadardir (sabit ozet kutusu yok). */
.an-oc-yazi{position:relative;z-index:1;flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;margin:0 1.5rem;padding:1rem;background:#fff;transform:translateY(-.5rem)}
.an-oc-yazi h3{font-size:1.125rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.an-oc-yazi h3 a{color:inherit}
.an-oc-yazi h3 a:hover{color:#0066ff}
.an-oc-yazi h3 .an-germe::after{z-index:1}
.an-oc-ozet{margin-top:1.5rem;font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.6)}
.an-oc-ozet a{position:relative;z-index:2;color:#0066ff}
.an-oc-ozet a:hover{text-decoration:underline}
.an-oc .an-ok{display:block;top:8.5rem;width:48px;height:48px;margin-top:0}
@media(min-width:1024px){
  .an-oc{width:min(1200px,calc(100% - 48px));background:#fff}
  .an-oc .an-fd-slayt{min-height:440px;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:32px}
  .an-oc-res{width:min(592px,calc(50% + 24px));height:376px}
  /* Pudu'da ozet 220px kutuyu doldurur; buradaki ozetler 2-4 satir. Baslik, ozet ve tur etiketi tek
     blok olarak 376px gorsel yuksekliginde dikey ortalanir: ozetin altinda bos kutu kalmaz. */
  .an-oc-yazi{flex:1;align-self:stretch;min-width:0;margin:0;padding:0 24px 0 0;transform:none;justify-content:center}
  .an-oc-yazi h3{font-size:24px;line-height:32px}
  .an-oc-ozet{font-size:16px;line-height:24px}
  .an-oc .an-ok{top:auto;bottom:32px;background:rgba(0,0,0,.3)}
  .an-oc .an-ok:hover{background:rgba(0,0,0,.5)}
  .an-oc .an-ok-onceki{left:auto;right:90px}
  .an-oc .an-ok-sonraki{right:32px}
}
.an-hk-ray{margin-top:1rem;max-width:1200px}
@media(min-width:1024px){.an-hk-ray{width:min(1200px,calc(100% - 48px))}}
.an-hk-ray .an-ray-pencere{padding:0 1.5rem}
.an-hk{position:relative;width:100%;display:flex;flex-direction:column-reverse;background:#fff}
.an-hk::after{content:"";position:absolute;left:0;bottom:0;width:0;border-bottom:4px solid #0066ff;transition:width .3s ease;pointer-events:none}
.an-hk:hover::after{width:100%}
.an-hk-res{flex:none;height:13.0625rem;overflow:hidden;background:#e6e9ed}
.an-hk-res img{display:block;width:100%;height:100%;object-fit:cover}
/* Duz zeminli stüdyo gorseli (ana/yatirim-gt7.webp, kare): kirpilmadan sigar, kenar bantlari gorselin
   zemin rengiyle (#27292d) birlesir. 1,22 olcek robotu buyutur; gorunen pencere gorselin %9-91'i,
   robot ve yansimasi %16-84 arasinda. */
.an-hk-sigdir{background:#27292d}
.an-hk-sigdir img{object-fit:contain;transform:scale(1.22)}
/* 640-1023 kutu dikey: gorsel genislige oturur, gorunen pencere yatayda %5-95, robot %16-84 */
@media(min-width:640px) and (max-width:1023px){.an-hk-sigdir img{transform:scale(1.12)}}
.an-hk-yazi{flex:1;padding:1rem}
.an-hk h3{height:2.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.an-hk h3 a{color:inherit}
.an-hk:hover h3 a{color:#0066ff}
.an-hk-ray .an-ok{display:block;top:7.5rem;width:48px;height:48px;margin-top:0}
.an-hk-ray .an-ok-onceki{left:1.5rem}
.an-hk-ray .an-ok-sonraki{right:1.5rem}
.an-hk-ray .an-ok:disabled{visibility:hidden}
/* Pudu kart kaydiricisi: 1 kart 16px aralik, 640+ 2 kart 8px, 1024+ 4 kart 16px (swiper px degerleri) */
.an-hk-ray .an-ray-iz{gap:16px}
@media(min-width:640px){.an-hk-ray .an-ray-iz{gap:8px}.an-hk{width:calc((100% - 8px) / 2)}}
/* 640-1023: kart yarim genislikte, yazi rem ile buyur (satirda ~20 karakter). Baslik bir kademe kucuk
   (13px karsiligi) ve sabit iki satirlik kutu yok: en uzun baslik uc satirda tam okunur (farkli sistem
   yazi tipinde dort satira kadar kesilmez). Kartlar raydaki en uzun basliga gore esit yukseklikte, tur
   etiketi kart altinda hizali. */
@media(min-width:640px) and (max-width:1023px){
  .an-hk-yazi{display:flex;flex-direction:column}
  .an-hk h3{height:auto;font-size:.8125rem;-webkit-line-clamp:4}
  .an-hk .an-meta{margin-top:auto}
}
@media(min-width:1024px){
  .an-hk-ray .an-ray-pencere{padding:0}
  .an-hk-ray .an-ray-iz{gap:16px}
  .an-hk{width:288px;height:304px;overflow:hidden}
  /* 180 + metin kutusu 124 = 304: gorselin ustu tasmadan gorunur */
  .an-hk-res{height:180px}
  /* Pudu 1024+: 48x48 zeminsiz oklar ilk ve son kartin gorseli uzerinde, raydan 84px asagida, kenarda */
  .an-hk-ray .an-ok{top:84px}
  .an-hk-ray .an-ok-onceki{left:0}
  .an-hk-ray .an-ok-sonraki{right:0}
}

/* ------------------------------------------------------------------ SSS (O15 akordeon satiri) */
.an-sss-liste{width:100%;max-width:1248px;padding:0 1.5rem}
.an-sss details:not(.mobil){padding:0;border:0;border-top:1px solid #576c8a}
.an-sss details:not(.mobil):last-of-type{border-bottom:1px solid #576c8a}
.an-sss details:not(.mobil)>summary{min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.75rem 0;
  font-size:.875rem;line-height:1.3125rem;font-weight:600;color:rgba(0,0,0,.85);transition:color .2s ease}
.an-sss details:not(.mobil)>summary:hover{color:#0066ff}
.an-sss details:not(.mobil)>summary::after{content:"";flex:none;width:.75rem;height:.75rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .5s ease}
.an-sss details:not(.mobil)[open]>summary::after{content:"";transform:rotate(45deg)}
.an-sss details:not(.mobil)>p{margin:0;padding:0 0 1.5rem 1rem;max-width:none;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.an-sss details a{color:#0066ff}
@supports (interpolate-size:allow-keywords){
  .an-sss{interpolate-size:allow-keywords}
  .an-sss details::details-content{height:0;overflow:clip;transition:height .5s ease,content-visibility .5s allow-discrete}
  .an-sss details[open]::details-content{height:auto}
}
@media(min-width:1024px){
  .an-sss details:not(.mobil)>summary{font-size:16px;line-height:24px}
}

/* ------------------------------------------------------------------ A10 duyuru blogu */
main>section.an-duyuru{padding:3.75rem 1.5rem;background:#fff}
.an-dy-ic{display:grid;grid-template-columns:1fr;gap:3rem;max-width:1200px;margin:0 auto}
.an-dy-yazi{order:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.an-dy-yazi h2{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.9)}
.an-dy-yazi p{margin-top:.75rem;font-size:.875rem;line-height:1.625;color:rgba(0,0,0,.6)}
.an-dy-yazi p a{color:#0066ff}
/* duyuru maddeleri: paragrafla ayni 14px; isaret sol kenarda, kirilan satir metinle hizali */
.an-dy-madde{margin:.75rem 0 0;padding:0;list-style:none}
.an-dy-madde li{position:relative;margin:0;padding-left:1em;font-size:.875rem;line-height:1.625;color:rgba(0,0,0,.6)}
.an-dy-madde li::before{content:"\2022";position:absolute;left:0;top:0}
.an-dy-madde li+li{margin-top:.25rem}
.an-dy-yazi .an-mavi-bag{margin-top:.25rem}
.an-dy-res{order:1;position:relative;height:11.75rem;overflow:hidden;background:#e6e9ed}
.an-dy-res img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s ease-in-out}
.an-duyuru:hover .an-dy-res img{transform:scale(1.05)}
@media(min-width:1024px){
  main>section.an-duyuru{padding:48px 24px}
  .an-dy-ic{grid-template-columns:1fr 1fr;gap:48px}
  .an-dy-yazi{order:1}
  .an-dy-yazi h2{font-size:24px;line-height:32px}
  .an-dy-yazi p:first-of-type{margin-top:24px}
  .an-dy-yazi .an-mavi-bag{margin-top:8px}
  .an-dy-res{order:2;height:376px}
}

/* GT serisi slayti (ilk slayt): model adlari gorselin icinde; masaustunde yazi alttaki koyu zemine
   iner. 1024 alti yatayda pc gorseli (3840x1340) kullanilir, icerik merkezi yataydaki %52,5'e hizalanir.
   1024+ tuvallerde (ana.mjs, 1024-1199 / 1200-1439 / 1440+) icerik yatayda tam ortada: %50. Banner
   tuvalden genis oranliysa (cok genis ya da cok kisa ekran) dikey tasmanin %70'i ustten kirpilir:
   robotlar alttaki yazinin ustunde kalir, adlar ustte gorunur.
   Yazi katmani konumlandirilmaz (kartin flex sutununda margin-top:auto ile alta iner): boylece slayt
   baglantisinin (an-germe) ortusu yazi kutusuyla sinirli kalmaz, slaytin tamami tiklanir. */
.an-bn-seri>picture>img{object-position:52.5% 50%}
@media (min-width:1024px){
  .an-bn-seri>picture>img{object-position:50% 70%}
  .an-bn-seri .an-bn-yazi{margin:auto 0 88px;padding-top:0}
  /* Alt baslik kutusu metin kadar (95vw bos kutu yerine); gorunum ayni, slayt baglantisi degismez. */
  .an-bn-seri .an-bn-alt{width:auto;max-width:95vw}
  /* Yazi blogu parlak zemin yansimasinin ustunde (yazi gizliyken alt baslik p90 2,31:1). Blogun
     arkasinda yumusak eliptik koyuluk: iki yazi satirinda %60 siyah, robot tekerleklerine varmadan
     (merkezin ~80 px ustu) sonumlenir; robotlar ve gorseldeki model adlari aynen kalir. Ustteki
     genel gecis ikinci katman olarak korunur. */
  .an-bn-seri::after{background:radial-gradient(ellipse 640px 80px at 50% calc(100% - 135px),rgba(0,0,0,.62) 0,rgba(0,0,0,.6) 55%,
    rgba(0,0,0,.34) 72%,rgba(0,0,0,.12) 86%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,.36) 0,rgba(0,0,0,.12) 30%,rgba(0,0,0,0) 48%)}
}
/* Seri adinin logotipi (PUDU GT) yalniz mobil dikeyde gorunur; diger gorunumlerde ad yazidir. */
.an-bn-seri .an-bn-logo{display:none}
/* Mobil dikey: yazisiz aile cekimi (robotlar gorselin %28-80'inde, altta parlak zemin yansimasi).
   Yazi diger slaytlar gibi ustte; seri adi diger slaytlardaki gibi Pudu italik logotipi (2rem, ayni
   konum ve .5rem aralik), yazi ve ayrac gizlenir, alt baslik ve baglanti ayni olcude kalir. Gorselin
   ustu zaten siyah: ust koyu gecis robotlari karartmasin diye kapali. */
@media (max-width:1023px) and (orientation:portrait){
  .an-bn-seri::after{background:none}
  .an-bn-seri .an-bn-alt a{display:table;margin:0 auto .5rem;line-height:0}
  .an-bn-seri .an-bn-logo{display:block;height:2rem;width:auto;max-width:80vw}
  .an-bn-seri .an-bn-seri-ad,.an-bn-seri .an-bn-ayrac{display:none}
}

/* Yatay telefon ve 1024 alti yatay tablet: masaustu gorseli (model adlari gomulu) kullanilir, kok olcek
   (1rem ~ 35-44px) canli yaziyi gomulu adlarin ustune tasiyordu. Seri adi ve alt baslik gorselde zaten
   var: alt baslik gorunmez olur (font-size 0; slayt baglantisi an-germe calismaya devam eder, ekran
   okuyucu metni okur), yalniz "Modelleri karsilastirin" ustteki siyah bantta ekran yuksekligiyle olceklenir. */
@media (max-width:1023px) and (orientation:landscape){
  .an-bn-seri .an-bn-yazi{padding-top:max(10px,3svh)}
  .an-bn-seri .an-bn-alt{font-size:0;line-height:0}
  .an-bn-seri .an-bn-yazi .an-git{font-size:max(12px,3.4svh);line-height:1.5}
}

/* Banner yazisi Pudu gibi: urun adi Pudu logotip SVG'si (italik HTML baslik yok), altinda
   normal 20/40 alt baslik. Yazi katmani ustten baslar; H1 ekran okuyucu icin gizli. */
.an-bn-yazi{padding-top:2.25rem}
.an-bn-ad{margin:0;line-height:0}
.an-bn-ad a{pointer-events:auto;display:inline-block}
.an-bn-ad img{display:block;height:2rem;width:auto;max-width:80vw}
.an-bn-alt{font-weight:400;font-style:normal}
@media (min-width:1024px){
  .an-bn-yazi{padding-top:96px}
  .an-bn-ad img{height:48px}
}

/* ---- src/css/bulunamadi.css ---- */
/* ==========================================================================
   404 (build.mjs govde404): Pudu dilinde sade sayfa. Beyaz zemin, sola dayali
   baslik blogu, tek birincil dugme, altta uc urun karti.
   Olcek: 1024 alti rem (kok olcekle buyur), 1024 ve ustu px.
   ========================================================================== */
.yk{background:#fff}
/* alt dolgu kucuk: ardindan gelen A10 duyuru blogunun kendi ust dolgusu var */
.yk-ic{max-width:1248px;margin:0 auto;padding:3.5rem 1.5rem 1rem}
@media(min-width:1024px){.yk-ic{padding:120px 24px 24px}}
.yk-kod{margin:0;font-size:.875rem;line-height:1.25rem;font-weight:600;color:#0066ff}
.yk h1{margin:.75rem 0 0;font-size:1.75rem;line-height:2.125rem;font-weight:600;color:rgba(0,0,0,.85);text-wrap:balance}
.yk-metin{max-width:35rem;margin:1rem 0 0;font-size:1rem;line-height:1.5rem;color:rgba(0,0,0,.65);text-wrap:pretty}
@media(min-width:1024px){.yk h1{margin-top:16px;font-size:42px;line-height:50px}.yk-metin{max-width:560px;margin-top:24px;font-size:16px;line-height:24px}}
.yk-dug{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:2rem}
@media(min-width:1024px){.yk-dug{margin-top:40px}}
.yk-birincil{display:inline-flex;align-items:center;padding:.5rem 1.5rem;font-size:.875rem;line-height:1.25rem;color:#fff;
  background:#0066ff;border-radius:2px;text-decoration:none;transition:background-color .15s}
.yk-birincil:hover,.yk-birincil:focus-visible{background:#1e40af;color:#fff;text-decoration:none}
.yk-ikincil{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.85);text-decoration:none}
.yk-ikincil:hover{color:#0066ff;text-decoration:none}
.yk-ikincil svg{flex:none;width:7px;height:12px;margin-left:.75rem;fill:none;stroke:currentColor;stroke-width:1.5}
@media(min-width:1024px){.yk-birincil{padding:8px 24px;font-size:14px;line-height:20px}.yk-ikincil{font-size:14px;line-height:20px}}

/* urun kartlari: 1024 altinda yatay satir (gorsel solda; kok olcekle buyur, 768'de uc sutun yaziyi
   5-6 satira bolerdi), 1024 ve ustu uc sutun */
.yk-urunler{display:grid;grid-template-columns:1fr;gap:.75rem;margin:3rem 0 0;padding:0;list-style:none}
.yk-urunler li{margin:0}
.yk-urunler a{display:grid;grid-template-columns:5.5rem 1fr;grid-template-rows:auto auto;column-gap:1rem;align-content:center;
  padding:.75rem 1rem .75rem .75rem;background:#f5f6f8;border-radius:2px;color:rgba(0,0,0,.85);text-decoration:none;transition:background-color .2s}
.yk-urunler a:hover{background:#eceef1;text-decoration:none}
.yk-res{grid-row:1 / 3;display:block}
.yk-res img{display:block;width:100%;height:auto}
.yk-urunler strong{align-self:end;font-size:1rem;line-height:1.5rem;font-weight:600}
.yk-sinif{align-self:start;margin-top:.25rem;font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.65);text-wrap:balance}
@media(min-width:1024px){
  .yk-urunler{grid-template-columns:repeat(3,1fr);gap:1rem}
  .yk-urunler a{grid-template-columns:1fr;grid-template-rows:auto;padding:1.5rem 1.5rem 1.75rem;text-align:center}
  .yk-res{grid-row:auto;width:62%;max-width:186px;margin:0 auto 1rem}
  .yk-urunler strong{align-self:auto}
}
@media(min-width:1024px){
  .yk-urunler{gap:24px;margin-top:80px}
  .yk-urunler a{padding:32px 24px 36px}
  .yk-res{margin-bottom:24px}
  .yk-urunler strong{font-size:20px;line-height:28px}
  .yk-sinif{margin-top:8px;font-size:14px;line-height:20px}
}

/* ---- src/css/cozum.css ---- */
/* ==========================================================================
   Pudu cozum sayfasi (segment sayfalari): spec C0-C8, E3.
   Olcek: 1024 alti rem (375 artboard, kok olcekle buyur), 1024 ve ustu px.
   Bolum sirasi: hero, faydalar (gri), senaryo kapsami (beyaz), uygulama
   alanlari (gri; sekmeli, altta robotik cozumler kutusu), surec (beyaz), SSS (gri),
   diger uygulamalar (gri). Ardisik gri bolumler cizgisiz.
   ========================================================================== */
.cz{background:#fff}
.cz h1,.cz h2,.cz h3,.cz h4,.cz p{letter-spacing:normal}
/* 1024 alti basliklar dengeli kirilir: son satirda tek kelime kalmaz */
@media(max-width:1023px){.cz h2,.cz h3{text-wrap:balance}}
/* Asagi atlamada navbar gizlenir, alt menu en ustte (0-52): bolum dogrudan menunun altinda baslar
   (Pudu gibi, arada onceki bolumun zemini kalmaz). Yukari atlamada navbar geri gelir (64 + 52):
   kabuk betigi o tiklamada hedefe 116px verir. */
@media(min-width:1024px){.cz [id]{scroll-margin-top:52px}}

/* ---- C3 hero: 3:4 mobil, 16:9 masaustu; %40 siyah ortu; metin beyaz, sola ---- */
.cz-hero{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#1d1f22;color:#fff}
@media(min-width:1024px){.cz-hero{aspect-ratio:16/9}}
/* Kadraj (segment.mjs SAHNE.kadraj): metin solda 660 px kolonda durur, robot metnin sagina ya da
   altina duser. Masaustu --ls/--lo, mobil --ms/--mo: olcek ve sabit nokta (transform-origin);
   sabit nokta sol kenarda (0%) oldugunda gorsel saga dogru buyur ve robot saga kayar. */
.cz-hero picture{position:absolute;inset:0}
.cz-hero img,.cz-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--mp,50% 50%);transform:scale(var(--ms,1));transform-origin:var(--mo,50% 50%)}
@media(min-width:1024px){.cz-hero img,.cz-hero>video{object-position:var(--lp,50% 50%);transform:scale(var(--ls,1));transform-origin:var(--lo,50% 50%)}}
/* Ortu yalniz metnin durdugu seritte koyu (mobil ust, masaustu sol %52-55): acik gokyuzu ya da
   cephe onunde de paragraf en az 4,5:1 kontrastta kalir. Robot tarafinda %8-12'ye iner, gorsel
   dogal parlakliginda gorunur (duz %40 ortu robotu soluklastiriyordu). */
.cz-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.52) 34%,rgba(0,0,0,.24) 56%,rgba(0,0,0,.1) 76%)}
@media(min-width:1024px){.cz-hero::after{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.52) 46%,rgba(0,0,0,.3) 62%,rgba(0,0,0,.12) 80%,rgba(0,0,0,.08) 100%)}}
.cz-hero-ic{position:relative;z-index:1;height:100%;display:flex;align-items:flex-start}
@media(min-width:1024px){.cz-hero-ic{align-items:center}}
.cz-hero-yazi{width:100%;max-width:1248px;margin:0 auto;padding:2.5rem 1.5rem 0}
@media(min-width:1024px){.cz-hero-yazi{padding:0 24px}}
.cz-hero h1{margin:0;font-size:1.75rem;line-height:2.125rem;font-weight:600;color:#fff;text-wrap:balance}
.cz-hero p{max-width:41.25rem;margin:1rem 0 0;font-size:1rem;line-height:1.5rem;font-weight:400;color:#fff;text-wrap:pretty}
/* Baslik da paragrafla ayni 660 px kolonda (Pudu laptop:w-165): uzun baslik iki dengeli satira iner.
   1024-1434 arasinda paragraf 46vw ile daralir; metin hero genisliginin sol yarisinda kalir. */
@media(min-width:1024px){.cz-hero h1{max-width:660px;font-size:42px;line-height:50px}.cz-hero p{max-width:min(660px,46vw);margin-top:24px}}

/* ---- O6 bolum basligi: 24/32 sola, yan 24, alt 32 -> 42/50 ortali, alt 64 ---- */
.cz-bas{width:100%;margin:0;padding:0 1.5rem 2rem;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.85)}
@media(min-width:1024px){.cz-bas{padding:0 24px 64px;font-size:42px;line-height:50px;text-align:center}}

/* ---- C4 kazanim kartlari (gri) ---- */
.cz-fayda{background:#f2f3f5;padding:3.75rem 0}
@media(min-width:1024px){.cz-fayda{padding:160px 0}}
.cz-fk-izgara{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:1248px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1024px){.cz-fk-izgara{gap:16px;padding:0 24px}}
.cz-fk{display:flex;align-items:center;width:100%;min-height:5rem;padding:1rem;background:#fff}
.cz-fk-ikon{flex:none;width:3rem;height:3rem;margin-right:1.5rem;background:#0066ff;
  -webkit-mask:var(--ikon) center/contain no-repeat;mask:var(--ikon) center/contain no-repeat}
.cz-fk h3{margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400;color:rgba(0,0,0,.6)}
.cz-fk p{margin:0;font-size:1.5rem;line-height:2.25rem;font-weight:600;color:#0066ff}
@media(min-width:1024px){
  .cz-fk{flex:1 1 0;width:288px;min-height:284px;flex-direction:column;justify-content:flex-start;padding:32px 16px 16px}
  .cz-fk-ikon{width:96px;height:96px;margin:0 0 28px}
  .cz-fk-yazi{padding-bottom:32px;text-align:center}
  .cz-fk h3{margin-bottom:16px;font-size:20px;line-height:28px}
  .cz-fk p{font-size:30px;line-height:36px}
}
.cz-kaynak{max-width:1248px;margin:.5rem auto 0;padding:0 1.5rem;font-size:.75rem;line-height:1rem;color:rgba(0,0,0,.4)}
@media(min-width:1024px){.cz-kaynak{padding:0 24px;text-align:right}}
.cz-not{max-width:1248px;margin:2rem auto 0;padding:0 1.5rem}
@media(min-width:1024px){.cz-not{padding:0 24px}}

/* ---- C5 senaryo kapsami (beyaz): alt 72px, gorsel 1:1 mobil, 16:9 kutu + 48px yan ---- */
.cz-senaryo{background:#fff;padding:3.75rem 0 4.5rem}
@media(min-width:1024px){.cz-senaryo{padding:160px 0 72px}}
.cz-senaryo .cz-bas{padding-bottom:0}
.cz-zincir{margin:0;padding:1rem 1.5rem 2rem;font-size:14px;line-height:21px;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.cz-zincir{max-width:1248px;margin:0 auto;padding:24px 24px 64px;text-align:center}}
.cz-medya{width:100%;aspect-ratio:1/1;overflow:hidden}
@media(min-width:1024px){.cz-medya{aspect-ratio:16/9;padding:0 48px}}
.cz-medya img,.cz-medya video{display:block;width:100%;height:100%;object-fit:cover}

/* ---- C6 uygulama alanlari (gri): bolum basligi, sekme cubugu (Pudu U3), panel (solda medya, sagda
   iki kart), altta robotik cozumler. Betik yoksa paneller basliklariyla alt alta; betik .sekmeli ekler. ---- */
.cz-uyg{background:#f2f3f5;padding:3.75rem 0}
@media(min-width:1024px){.cz-uyg{padding:160px 0}}
.cz-uyg>.cz-bas{padding-bottom:1.5rem}
@media(min-width:1024px){.cz-uyg>.cz-bas{padding-bottom:40px}}
.cz-uyg-kap{max-width:1200px;margin:0 auto}
.cz-uyg-ic{display:flex;flex-wrap:wrap}
/* betiksiz: blok basligi gorunur, bloklar ve robotik cozumler arasinda bosluk */
.cz-uyg-ic>h3{width:100%;margin:0;padding:0 1.5rem 1rem;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.85)}
.cz-uyg-ic+.cz-uyg-ic,.cz-uyg-ic+.cz-rs{margin-top:3rem}
@media(min-width:1024px){
  .cz-uyg-ic>h3{padding:0 24px 24px;font-size:28px;line-height:36px;text-align:center}
  .cz-uyg-ic+.cz-uyg-ic,.cz-uyg-ic+.cz-rs{margin-top:80px}
}
/* sekmeli: ad sekmede, panel basligi yalniz ekran okuyucuda; tek panel gorunur. Gizli panel
   hidden=until-found ile sayfa ici aramada bulunur (kutusu bos ve 0 yukseklikte); destek yoksa display:none. */
.cz-uyg.sekmeli .cz-uyg-ic>h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cz-uyg.sekmeli .cz-uyg-ic+.cz-uyg-ic{margin-top:0}
.cz-uyg.sekmeli .cz-uyg-ic+.cz-rs{margin-top:1rem}
@media(min-width:1024px){.cz-uyg.sekmeli .cz-uyg-ic+.cz-rs{margin-top:16px}}
.cz-uyg-ic[hidden]:not([hidden="until-found"]){display:none}
.cz-uyg-ic:focus-visible{outline-offset:4px}
@keyframes cz-gir{from{opacity:0}to{opacity:1}}
html.hareket .cz-uyg-ic.gir{animation:cz-gir .3s ease-out}
/* sekme cubugu (Pudu U3): gri zeminde 14px metin sekme, altta ince taban cizgisi; secili beyaz zemin, 600, mavi alt cizgi.
   Mobil tek satir, yatay kayar (yan 24, aralik 4); masaustu 1200 px'te esit sutunlar (aralik 4), uzun ad iki
   satira dengeli iner. Secili agirligin genisligi ::after ile onceden ayrilir: sekmeler kaymaz. */
.cz-sekme{display:flex;gap:.25rem;margin:0 0 1rem;padding:0 1.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-padding:0 1.5rem;scrollbar-width:none;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}
.cz-sekme[hidden]{display:none}
.cz-sekme::-webkit-scrollbar{display:none}
.cz-sekme button{flex:none;display:grid;place-items:center;min-width:3.5rem;min-height:2.25rem;margin:0;padding:.5rem .75rem;
  border:0;border-radius:0;background:none;font:inherit;font-size:.875rem;line-height:1.25rem;font-weight:400;
  color:rgba(0,0,0,.6);white-space:nowrap;cursor:pointer;transition:color .15s ease,background-color .15s ease}
.cz-sekme button>span,.cz-sekme button::after{grid-area:1/1}
.cz-sekme button::after{content:attr(data-ad);content:attr(data-ad) / "";font-weight:600;visibility:hidden}
.cz-sekme button[aria-selected="true"]{background:#fff;color:rgba(0,0,0,.9);font-weight:600;box-shadow:inset 0 -2px 0 #0066ff;cursor:default}
@media(hover:hover){.cz-sekme button[aria-selected="false"]:hover{color:#0066ff}}
.cz-sekme button:focus-visible{outline:2px solid #0066ff;outline-offset:-2px;border-radius:0}
@media(min-width:1024px){
  .cz-sekme{max-width:1200px;gap:4px;margin:0 auto 24px;padding:0;overflow:visible}
  .cz-sekme button{flex:1 1 0;min-width:0;min-height:56px;padding:8px 12px;font-size:14px;line-height:20px;
    white-space:normal;text-align:center;text-wrap:balance}
}
.cz-uyg-gorsel{position:relative;width:100%;height:26.625rem;overflow:hidden;background:#e6e9ed}
.cz-uyg-gorsel img,.cz-uyg-gorsel video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Alttan gradyan: urun adi etiketinin satiri (mobil alttan 3-5,2rem, masaustu 48-80 px) en az %56 siyah
   ustunde durur; beyaz etiket en parlak zeminde de 4,5:1 kontrasti gecer. Gradyan etiketin ustunde soner. */
.cz-uyg-gorsel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0,rgba(0,0,0,.56) 5.75rem,rgba(0,0,0,.2) 10rem,rgba(0,0,0,0) 14rem)}
@media(min-width:1024px){
  .cz-uyg-gorsel{flex:1 1 0;width:50%;height:auto;min-height:672px;padding-right:8px;background:none}
  .cz-uyg-gorsel::after{right:8px;background:linear-gradient(to top,rgba(0,0,0,.62) 0,rgba(0,0,0,.56) 92px,rgba(0,0,0,.2) 170px,rgba(0,0,0,0) 260px)}
  .cz-uyg-gorsel img,.cz-uyg-gorsel video{position:absolute;top:0;left:0;width:calc(100% - 8px)}
}
/* urun adi: gorselin sol altinda, 24/32 600 beyaz, soldan 32, alttan 48 */
.cz-etiket{position:absolute;left:2rem;bottom:3rem;z-index:1;margin:0;font-size:1.5rem;line-height:2rem;font-weight:600;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.25);pointer-events:none}
@media(min-width:1024px){.cz-etiket{left:32px;bottom:48px;font-size:24px;line-height:32px}}
.cz-uyg-sag{flex:1 1 100%;display:flex;flex-direction:column;gap:1rem;margin:1.5rem 1.5rem 0}
@media(min-width:1024px){.cz-uyg-sag{flex:1 1 0;width:50%;margin:0;padding-left:8px;gap:16px}}
/* kart: beyaz, kose 0; ustte 6px serit (ihtiyac turuncu, PUDU yaklasimi mavi) */
.cz-kart{position:relative;padding:1rem;background:#fff}
.cz-kart::before{content:"";position:absolute;top:0;left:0;width:100%;height:.375rem;background:#f76719}
.cz-kart+.cz-kart::before{background:#0066ff}
.cz-kart h3,.cz-kart h4{margin:0;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.85)}
/* kart govdesi: Pudu'daki "• " satirlari; 14/21 500, isaret basligin sol kenarinda,
   kirilan satir metinle hizali (asili girinti), maddeler arasi 8px M / 10px L */
.cz-madde{margin:1.5rem 0 0;padding:0;list-style:none}
.cz-madde li{position:relative;margin:0;padding-left:1em;font-size:.875rem;line-height:1.3125rem;font-weight:500;color:rgba(0,0,0,.6)}
.cz-madde li::before{content:"\2022";position:absolute;left:0;top:0}
.cz-madde li+li{margin-top:.5rem}
.cz-kart a{color:#0066ff}
@media(min-width:1024px){
  .cz-kart{padding:32px 24px}
  .cz-uyg-sag .cz-kart:first-child{min-height:336px}
  .cz-uyg-sag .cz-kart+.cz-kart{flex:1}
  .cz-kart h3,.cz-kart h4{font-size:24px;line-height:32px}
  .cz-madde li{font-size:14px;line-height:21px;color:rgba(0,0,0,.9)}
  .cz-madde li+li{margin-top:10px}
}

/* robotik cozumler kutusu: beyaz, ust 16; ic 16 / 24; baslik 18/28 -> 24/32 */
.cz-rs{flex:1 1 100%;margin:1rem 1.5rem 0;padding:1rem;background:#fff}
@media(min-width:1024px){.cz-rs{margin:16px 0 0;padding:24px}}
.cz-rs>h3{margin:0 0 .5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.9)}
@media(min-width:1024px){.cz-rs>h3{margin-bottom:8px;font-size:24px;line-height:32px}}
.cz-rs-giris{max-width:50rem;margin:0 0 1.5rem;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.cz-rs-giris{margin-bottom:24px;font-size:14px;line-height:21px}}
.cz-rs>h3+.cz-urunler{margin-top:1rem}
.cz-urunler{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:1024px){.cz-urunler{grid-template-columns:1fr 1fr;gap:16px}}
.cz-urun{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:1024px){.cz-urun{flex-direction:row;gap:16px}}
.cz-urun-res{flex:none;display:flex;align-items:center;justify-content:center;width:100%;height:13.75rem;overflow:hidden;background:#f3f4f6}
.cz-urun-res img{display:block;width:100%;height:100%;object-fit:contain}
@media(min-width:1024px){.cz-urun-res{width:186px;height:220px}}
.cz-urun-yazi{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
@media(min-width:1024px){.cz-urun-yazi{padding:8px 0 0}}
.cz-urun h4{margin:0;min-height:1.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;color:rgba(0,0,0,.9)}
.cz-urun p,.cz-urun ul{margin:.5rem 0 0;font-size:1rem;line-height:1.5rem;font-weight:400;color:rgba(0,0,0,.6)}
.cz-urun ul{padding:0;list-style:none}
.cz-urun li{font-size:inherit;color:inherit}
.cz-urun li::before{content:"\2022\00a0"}
@media(min-width:1024px){.cz-urun p,.cz-urun ul{font-size:14px;line-height:21px}}
/* O9 "daha fazla" baglantisi: metin + 7x12 cizgi ok, araya 6px */
.cz-urun-git,.cz-rs-alt a{display:inline-flex;align-items:center;align-self:flex-start;min-height:max(1.5rem,24px);font-size:.875rem;line-height:1.25rem;color:#0066ff;text-decoration:none}
.cz-urun-git{margin-top:1.5rem}
@media(min-width:1024px){.cz-urun-git{margin-top:12px;font-size:14px;line-height:20px}}
.cz-urun-git::after,.cz-rs-alt a::after{content:"";flex:none;width:.4375rem;height:.75rem;margin-left:.375rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s ease}
.cz-urun-git:hover,.cz-rs-alt a:hover{color:#0066ff;text-decoration:underline}
.cz-urun-git:hover::after,.cz-rs-alt a:hover::after{transform:translateX(.1875rem)}
.cz-rs-alt{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,.08)}
@media(min-width:1024px){.cz-rs-alt{margin-top:24px;padding-top:16px;gap:8px 32px}}

/* ---- proje sureci (beyaz): Pudu'da karsiligi yok; C4 kart iskeleti, sira numarasi mavi ---- */
.cz-surec{background:#fff;padding:3.75rem 0}
@media(min-width:1024px){.cz-surec{padding:160px 0}}
.cz-adimlar{display:grid;grid-template-columns:1fr;gap:.5rem;max-width:1248px;margin:0 auto;padding:0 1.5rem;
  list-style:none;counter-reset:adim}
@media(min-width:1024px){.cz-adimlar{grid-template-columns:repeat(3,1fr);gap:16px;padding:0 24px}}
.cz-adimlar li{counter-increment:adim;padding:1.5rem;background:#f2f3f5;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.cz-adimlar li::before{content:counter(adim,decimal-leading-zero);display:block;margin-bottom:1rem;
  font-size:1.875rem;line-height:2.25rem;font-weight:600;color:#0066ff;font-variant-numeric:tabular-nums}
.cz-adimlar strong{display:block;margin-bottom:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;color:rgba(0,0,0,.9)}
@media(min-width:1024px){.cz-adimlar li{padding:32px 24px;font-size:14px;line-height:21px}.cz-adimlar strong{font-size:20px;line-height:28px}}

/* ---- SSS (gri): O15 akordeon satiri; 72px, ust cizgi #576c8a, 12px arti ikonu, 500ms ---- */
.cz-sss{background:#f2f3f5;padding:3.75rem 0}
@media(min-width:1024px){.cz-sss{padding:160px 0}}
.cz-sss-ic{max-width:1248px;margin:0 auto}
.cz-sss-liste{padding:0 1.5rem}
@media(min-width:1024px){.cz-sss-liste{max-width:848px;margin:0 auto;padding:0 24px}}
.cz-sss details{margin:0;padding:0;border:0;border-top:1px solid #576c8a}
.cz-sss details:last-child{border-bottom:1px solid #576c8a}
.cz-sss details>summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.5rem;padding:.75rem 0;
  font-size:.875rem;line-height:1.3125rem;font-weight:600;color:rgba(0,0,0,.85);transition:color .15s ease}
.cz-sss details>summary:hover{color:#0066ff}
.cz-sss details>summary::after{content:"";flex:none;width:.75rem;height:.75rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .5s ease-in-out}
.cz-sss details[open]>summary::after{transform:rotate(45deg)}
.cz-sss details>*:not(summary){max-width:none;margin:0;padding:0 0 1.5rem 1rem;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.cz-sss a{color:#0066ff}
@media(min-width:1024px){.cz-sss details>summary{font-size:16px;line-height:24px}.cz-sss details>*:not(summary){font-size:14px;line-height:24px}}
/* acilis: icerik yuksekligi 500ms'de acilir (destekleyen tarayicida) */
@supports (interpolate-size:allow-keywords){
  .cz-sss details{interpolate-size:allow-keywords}
  .cz-sss details::details-content{block-size:0;overflow-y:clip;transition:block-size .5s ease-in-out,content-visibility .5s allow-discrete}
  .cz-sss details[open]::details-content{block-size:auto}
}

/* ---- C7 diger uygulamalar (gri): baslik satiri + yatay kaydirilan kartlar + oklar ---- */
.cz-diger{background:#f2f3f5;padding:3.75rem 0;overflow:hidden}
@media(min-width:1024px){.cz-diger{padding:160px 0}}
.cz-diger-bas{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;max-width:1248px;margin:0 auto;padding:0 1.5rem 2rem}
@media(min-width:1024px){.cz-diger-bas{padding:0 24px 64px}}
.cz-diger-bas .cz-bas{padding:0;text-align:left}
.cz-diger-bas a{flex:none;display:inline-flex;align-items:center;min-height:max(1.5rem,24px);font-size:.875rem;line-height:1.25rem;color:#0066ff;text-decoration:none}
.cz-diger-bas a:hover{text-decoration:underline}
@media(min-width:1024px){.cz-diger-bas a{font-size:14px;line-height:20px}}
.cz-dk-ray{display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:0 1.5rem;scroll-padding:0 1.5rem;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.cz-dk-ray::-webkit-scrollbar{display:none}
.cz-dk-ray:focus-visible{outline:2px solid #0066ff;outline-offset:-2px}
@media(min-width:1024px){.cz-dk-ray{gap:16px;padding:0 max(24px,calc(50% - 600px));scroll-padding:0 max(24px,calc(50% - 600px))}}
.cz-dk{flex:none;display:flex;flex-direction:column;width:18rem;background:#fff;color:inherit;text-decoration:none;scroll-snap-align:start}
@media(min-width:1024px){.cz-dk{width:440px}}
.cz-dk:hover{text-decoration:none}
.cz-dk-res{display:block;height:12rem;overflow:hidden;background:#e6e9ed}
@media(min-width:1024px){.cz-dk-res{height:293px}}
.cz-dk-res img{display:block;width:100%;height:100%;object-fit:cover}
.cz-dk-yazi{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:.75rem}
@media(min-width:1024px){.cz-dk-yazi{padding:24px}}
.cz-dk strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.25rem;
  font-size:.9375rem;line-height:1.40625rem;font-weight:600;color:#000}
.cz-dk-metin{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.9375rem;line-height:1.40625rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.cz-dk strong{margin-bottom:8px;font-size:20px;line-height:28px}.cz-dk-metin{font-size:14px;line-height:20px}}
.cz-dk-ok{width:1.5rem;height:1.5rem;margin:.75rem 0 0 auto;fill:none;stroke:#0066ff;stroke-width:1.5;transition:opacity .3s ease}
@media(min-width:1024px){.cz-dk-ok{margin-top:24px;opacity:0}.cz-dk:hover .cz-dk-ok,.cz-dk:focus-visible .cz-dk-ok{opacity:1}}
.cz-dk:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.cz-dk-dug{display:flex;flex-direction:row;justify-content:flex-end;gap:.25rem;max-width:1248px;margin:1.5rem auto 0;padding:0 1.5rem}
@media(min-width:1024px){.cz-dk-dug{gap:8px;margin-top:24px;padding:0 24px}}
.cz-dk-dug button{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:0;
  background:none;color:#000;opacity:.9;cursor:pointer;transition:opacity .15s ease,background-color .15s ease}
.cz-dk-dug button:hover:not(:disabled){background:rgba(0,0,0,.06)}
.cz-dk-dug button svg{width:.625rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2}
.cz-dk-dug button[data-yon="-1"] svg{transform:rotate(180deg)}
.cz-dk-dug button:disabled{opacity:.26;cursor:not-allowed}
@media(min-width:1024px){.cz-dk-dug button{width:48px;height:48px}.cz-dk-dug button svg{width:10px;height:16px}}
/* mobil: "Tum sektorler" baglantisi rayin altinda, oklarla ayni satirda (baslik tam genislikte tek
   satir kalir; yaninda baglanti varken 210 px'e sikisip ikiye bolunuyordu). Masaustu Pudu C7 gibi yan yana. */
@media(max-width:1023px){
  .cz-diger{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .cz-diger-bas{display:contents}
  .cz-diger-bas .cz-bas{grid-row:1;grid-column:1/-1;padding:0 1.5rem 2rem}
  .cz-dk-ray{grid-row:2;grid-column:1/-1;min-width:0}
  .cz-diger-bas a{grid-row:3;grid-column:1;justify-self:start;margin:1.5rem 0 0 1.5rem}
  .cz-dk-dug{grid-row:3;grid-column:2;margin:1.5rem 0 0}
}

/* ---- src/css/iletisim.css ---- */
/* ==========================================================================
   /turkiye: Pudu iletisim sablonu (I2 banner, I3 sabitlenen h1 + kanallar,
   I4 form, I5 icerik bolumleri). Olcu kaynagi: pudurobotics.com/en/contact-us,
   1440x900 (L) ve 375x812 (M) Playwright olcumu.
   Birim kurali: 1024 alti rem (Pudu O1 kok olcegi, 375'te 1rem = 16px),
   1024 ve ustu px. Kolonlar %40 + %60 (Pudu 400 + 800): uzun h1 ("... resmi
   distributoru") 32/40 ile iki satira sigsin diye sol kolon 1200'de 480 px.
   Tum siniflar "il-" onekli; ortak stile ve diger sablonlara dokunmaz.
   ========================================================================== */

.il{background:#fff;color:rgba(0,0,0,.85);padding-bottom:10rem}
@media(min-width:1024px){.il{padding-bottom:160px}}
.il h1,.il h2,.il h3,.il p,.il li,.il label,.il legend{letter-spacing:normal}
.il a:hover{text-decoration:none}
.il [id]{scroll-margin-top:calc(var(--header-h,64px) + 1rem)}
@media(min-width:1024px){.il [id]{scroll-margin-top:calc(var(--header-h,64px) + 16px)}}
.il-ok{flex:none;width:7px;height:12px;margin-left:.375rem;fill:none;stroke:currentColor;stroke-width:1.5}
/* aralik ifadesi satir sonunda tireden bolunmez ("24-" / "48 saat") */
.il-nb{white-space:nowrap}

/* --- I2 banner: 200px (M) / 40vh (L), metinsiz. Robot (GT5, gorselin dikeyde %47-%82'si)
   anteninden tekerine tam gorunur: kadraj %75, genis ve alcak pencerede (1920x900 gibi)
   40vh robotu kesmesin diye alt sinir 22vw (1440x900'de 40vh = 360 gecerli kalir). --- */
.il-banner{width:100%;height:12.5rem;overflow:hidden;background:#e6e9ed}
@media(min-width:1024px){.il-banner{height:40vh;min-height:max(280px,22vw)}}
.il-banner img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 75%}
/* M: 16:9 gorsel 1.875:1 kutuyu neredeyse tamamen doldurdugu icin robot kucuk kaliyor (kutu
   yuksekliginin %38'i). 1.5 kat yakinlastirma, odak robotun merkezinde: robot dikeyde ortalanir,
   ustte ve altta ~43 px (375'te) pay kalir; gorsel kutuyu her kenarda tasmaya devam eder. */
@media(max-width:1023px){.il-banner img{transform:scale(1.5);transform-origin:48% 92%}}

/* --- I3 bilgi basligi: solda sabitlenen h1, sagda iletisim kanallari --- */
.il-ust{max-width:1248px;margin:0 auto;padding:3.75rem 1.5rem 0}
@media(min-width:1024px){.il-ust{padding:120px 24px 0}}
.il-bilgi{display:flex;flex-direction:column}
/* M: sol ve sag kolon cozulur, sira h1 > kanallar > form olur */
.il-sol,.il-sol-ic,.il-sag{display:contents}
.il-bas-blok{order:1}
.il-kanal-blok{order:2;margin-top:2rem}
.il-form-blok{order:3}
@media(min-width:1024px){
  .il-bilgi{flex-direction:row;align-items:stretch}
  .il-sol,.il-sag,.il-sol-ic{display:block}
  .il-sol{flex:0 0 40%;width:40%;min-width:0}
  .il-sol-ic{padding-right:24px}
  .il-sag{flex:0 0 60%;width:60%;min-width:0}
  .il-kanal-blok{margin-top:0}
}
@media(min-width:1024px) and (max-width:1199px){.il-sol-ic{padding-right:16px}}
/* Pudu h1'i JS ile top:80px'e sabitler; burada position:sticky ayni sonucu verir.
   Sol kolon kisa ekranda sigmazsa sabitleme devre disi kalir. */
@media(min-width:1024px) and (min-height:840px){.il-sol-ic{position:sticky;top:calc(var(--header-h,64px) + 16px)}}
/* H1 (Pudu'da tek satir "Contact Us") burada 51 karakter: 1200+ px'te 32/40 (Pudu I5 kart basligi
   olcegi) ve 456 px kutu ile iki dengeli satir (satir basina ~410 px), 1024-1199'da 28/36. */
.il h1{margin:0;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.85);overflow-wrap:break-word;text-wrap:balance}
@media(min-width:1024px){.il h1{font-size:32px;line-height:40px}}
@media(min-width:1024px) and (max-width:1199px){.il h1{font-size:28px;line-height:36px}}
.il-lede{margin:1rem 0 0;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.il-lede{margin-top:24px;font-size:16px;line-height:24px}}

/* iletisim kanallari: etiket 14px 600 %60, deger 18/26 (M) - 24/32 (L) 600 */
.il-kanallar{display:flex;flex-direction:column;gap:1.5rem}
.il-kanal-grup{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;margin:0;padding:0;list-style:none}
@media(min-width:1024px){.il-kanal-grup{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.il-kanal-grup.tek{grid-template-columns:minmax(0,1fr)}}
.il-kanal{display:flex;flex-direction:column;margin:0}
.il-kanal-et{margin:0;font-size:.875rem;line-height:1.3125rem;font-weight:600;color:rgba(0,0,0,.6)}
.il-kanal-deger{margin:0;font-size:1.125rem;line-height:1.625rem;font-weight:600;color:rgba(0,0,0,.85);overflow-wrap:anywhere}
@media(min-width:1024px){.il-kanal-et{font-size:14px;line-height:21px}.il-kanal-deger{font-size:24px;line-height:32px}}
.il-kanal-deger a{color:inherit;text-decoration:none;transition:color .15s}
.il-kanal-deger a:hover{color:#0066ff}
.il-kanal-git{display:inline-flex;align-items:center;align-self:flex-start;margin-top:.125rem;font-size:.875rem;line-height:1.3125rem;color:#0066ff;text-decoration:none;min-height:max(1.5rem,24px)}
.il-kanal-git:hover{color:#1e40af}
@media(min-width:1024px){.il-kanal-git{font-size:14px;line-height:21px}}
/* Kanal degerinin altindaki kisa kaynakli not (ornek: WhatsApp, 7/24 teknik destek) */
.il-kanal-not{margin:.125rem 0 0;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.il-kanal-not{font-size:14px;line-height:21px}}
.il-cizgi{height:1px;margin-top:1.5rem;background:#c2c2c2}
@media(min-width:1024px){.il-cizgi{margin-top:42px}}

/* --- I4 form: sag kolonda, 2 sutun alanlar (L), gri 52px girdiler --- */
.il-form-blok{min-width:0}
.il-form-bas{margin:2.25rem 0 0;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.85)}
.il-giris{margin:.75rem 0 0;font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.85)}
@media(min-width:1024px){.il-form-bas{margin-top:48px;font-size:24px;line-height:32px}.il-giris{margin-top:16px;font-size:14px;line-height:20px}}
.il-kontrol-blok{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e6e9ed}
.il-kontrol-bas{margin:0;font-size:.875rem;line-height:1.3125rem;font-weight:600;color:rgba(0,0,0,.6)}
.il-kontrol{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem 1.5rem;margin:.75rem 0 0;padding:0;list-style:none}
.il-kontrol li{position:relative;margin:0;padding-left:1.5rem;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.il-kontrol li::before{content:"";position:absolute;left:0;top:.15625rem;width:1rem;height:1rem;background:#0066ff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
@media(min-width:1024px){
  .il-kontrol-blok{margin-top:48px;padding-top:24px}
  .il-kontrol-bas{font-size:14px;line-height:21px}
  .il-kontrol{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:12px}
  .il-kontrol li{padding-left:24px;font-size:14px;line-height:21px}
  .il-kontrol li::before{top:2.5px;width:16px;height:16px}
}

.il-form{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:2rem;column-gap:0;margin-top:2.25rem;
  font-size:1rem;line-height:1.5rem;color:rgba(0,0,0,.9)}
@media(min-width:1024px){.il-form{row-gap:48px;column-gap:16px;margin-top:48px}}
.il-form[hidden]{display:none}
.il-alan{width:100%;min-width:0;margin:0;padding:0;border:0}
@media(min-width:1024px){.il-alan{width:calc(50% - 8px)}.il-alan.tam{width:100%}}
.il-etiket{display:flex;align-items:flex-start;gap:.25rem;margin:0;padding:0 0 .5rem;font-size:1rem;line-height:1.5rem;
  font-weight:400;color:rgba(0,0,0,.9);text-transform:none}
fieldset.il-alan>legend{display:block;width:100%;float:none;margin:0;padding:0 0 .75rem}
@media(min-width:1024px){.il-etiket{font-size:16px;line-height:24px;padding-bottom:8px}fieldset.il-alan>legend{padding-bottom:8px}}
fieldset.il-alan>legend .il-etiket{padding:0}
.il-zorunlu{flex:none;width:1rem;height:1.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f52242' d='M7.25 3h1.5v3.7l3.2-1.85.75 1.3L9.5 8l3.2 1.85-.75 1.3-3.2-1.85V13h-1.5V9.3l-3.2 1.85-.75-1.3L6.5 8 3.3 6.15l.75-1.3 3.2 1.85z'/%3E%3C/svg%3E") center/1rem 1rem no-repeat}

.il-girdi{display:block;width:100%;max-width:100%;height:2.5rem;margin:0;padding:.5rem .75rem;border:0;border-radius:2px;
  background:#f2f3f5;font-family:inherit;font-size:.875rem;line-height:1.25rem;font-weight:400;color:rgba(0,0,0,.9);
  box-shadow:inset 0 0 0 1px transparent;outline:0;transition:box-shadow .2s,background-color .2s;
  -webkit-appearance:none;appearance:none}
@media(min-width:1024px){.il-girdi{height:52px;padding:8px 12px;font-size:14px;line-height:20px}}
/* iOS Safari 16px altindaki alanda odaklaninca sayfayi yakinlastirir; yalnizca orada 16px */
@supports(-webkit-touch-callout:none){.il-girdi{font-size:max(1rem,16px)}}
.il-girdi::placeholder{color:rgba(0,0,0,.4);opacity:1}
.il-girdi:hover{background:#eceef1}
.il-girdi:focus{background:#edf4ff;box-shadow:inset 0 0 0 1px #0066ff}
.il-girdi[aria-invalid=true]{background:#fff5f5;box-shadow:inset 0 0 0 1px #ef4444}
.il-girdi[aria-invalid=true]:focus{box-shadow:inset 0 0 0 2px #ef4444}
select.il-girdi{padding-right:2.25rem;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:.75rem .75rem}
select.il-girdi:invalid,select.il-girdi.bos{color:rgba(0,0,0,.4)}
select.il-girdi option{color:rgba(0,0,0,.9)}
textarea.il-girdi{height:10rem;min-height:7.5rem;resize:vertical}
@media(min-width:1024px){select.il-girdi{padding-right:36px;background-position:right 12px center;background-size:12px 12px}textarea.il-girdi{height:110px;min-height:110px}}
.il-hata{margin:.25rem 0 0;font-size:.75rem;line-height:1rem;color:#ef4444}
.il-hata[hidden]{display:none}
@media(min-width:1024px){.il-hata{margin-top:4px;font-size:12px;line-height:16px}}

/* talep turu cipleri: #f2f3f5, secili #dbeaff + #0066ff cerceve */
.il-cipler{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
@media(min-width:1024px){.il-cipler{gap:16px;margin-bottom:16px}}
.il-cip{position:relative;display:flex;cursor:pointer}
.il-cip input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.il-cip span{display:flex;align-items:center;justify-content:center;padding:.25rem .75rem;border:1px solid transparent;border-radius:2px;
  background:#f2f3f5;font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.9);transition:background-color .15s,border-color .15s,color .15s}
@media(min-width:1024px){.il-cip span{padding:8px 24px;font-size:14px;line-height:20px}}
/* 640-1023 (tablet): kok olcekle buyuyen form girisi, #teklif capasina gelindiginde ilk alani ekran
   disina itiyordu. Baslik ve form arasi bosluk, giris metninin satir araligi ve cip olculeri kuculur;
   cipler iki satira iner. 768x1024'te baslik, cipler ve ilk alan ilk ekranda gorunur. */
@media(min-width:640px) and (max-width:1023px){
  .il-form-bas{margin-top:1.5rem}
  .il-giris{margin-top:.5rem;line-height:1.125rem}
  .il-form{margin-top:1.5rem;row-gap:1.5rem}
  fieldset.il-alan>legend{padding-bottom:.5rem}
  .il-cipler{gap:.375rem}
  .il-cip span{padding:.1875rem .5rem;font-size:.6875rem;line-height:1.0625rem}
}
.il-cip:hover span{border-color:rgba(0,102,255,.35)}
/* secili cip metni koyu mavi: #dbeaff zeminde 5,5:1 (#0066ff 3,96:1 idi) */
.il-cip input:checked+span{border-color:#0066ff;background:#dbeaff;color:#0052cc}
.il-cip input:focus-visible+span{outline:2px solid #0066ff;outline-offset:2px}

/* onay satiri ve gonderim: onay 48px ustte, dugme 240x54 (L) / tam genislik 50px (M) */
.il-gonderim{width:100%;margin-top:1rem}
@media(min-width:1024px){.il-gonderim{margin-top:0}}
.il-onay{display:flex;align-items:flex-start;gap:.75rem;width:fit-content;max-width:100%;cursor:pointer;
  font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.55)}
@media(min-width:1024px){.il-onay{font-size:14px;line-height:20px;gap:12px}}
.il-onay input{flex:none;width:1rem;height:1rem;margin:.125rem 0 0;border:1px solid #6b7280;border-radius:2px;background:#fff;
  cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .15s,border-color .15s}
.il-onay input:checked{border-color:#2563eb;background:#2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/100% no-repeat}
.il-onay input:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.il-onay input[aria-invalid=true]{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}
.il-onay a{color:#0066ff;text-decoration:none}
.il-onay a:hover{text-decoration:underline}
.il-onay-hata{margin-left:1.75rem}
.il-ozet-hata{margin:1rem 0 0;padding:.625rem .875rem;border-left:2px solid #ef4444;background:#fff5f5;
  font-size:.875rem;line-height:1.3125rem;color:#b91c1c}
.il-ozet-hata[hidden]{display:none}
.il-dugmeler{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
@media(min-width:1024px){.il-dugmeler{flex-direction:column;align-items:flex-start;gap:16px;margin-top:48px}.il-ozet-hata{font-size:14px;line-height:21px}}
.il-gonder{display:inline-flex;align-items:center;justify-content:center;width:100%;height:3.125rem;margin:0;padding:0 1.5rem;
  border:0;border-radius:0;background:rgba(0,0,0,.3);font-family:inherit;font-size:1rem;line-height:1.5rem;font-weight:400;
  color:#fff;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
@media(min-width:1024px){.il-gonder{width:auto;min-width:240px;height:54px;padding:0 32px;font-size:20px;line-height:28px;white-space:nowrap}}
.il-gonder:hover{background:rgba(0,0,0,.4)}
.il-gonder.hazir{background:#0066ff}
.il-gonder.hazir:hover{background:#1e40af}
.il-gonder:focus-visible{outline:2px solid #0066ff;outline-offset:3px}
/* Tek birincil gonder (Pudu); WhatsApp onun altinda 14px mavi metin baglantisi gorunumunde */
.il-wa{display:inline-flex;align-self:flex-start;align-items:center;gap:.375rem;min-height:1.5rem;margin:0;padding:0;border:0;background:none;
  font:inherit;font-size:.875rem;line-height:1.25rem;color:#0066ff;cursor:pointer}
.il-wa:hover{text-decoration:underline}
.il-wa:focus-visible{outline:2px solid #0066ff;outline-offset:3px}
.il-wa .il-ok{width:7px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
@media(min-width:1024px){.il-wa{font-size:14px;line-height:20px;min-height:24px}}
.il-not{margin:1rem 0 0;font-size:.75rem;line-height:1.125rem;color:rgba(0,0,0,.55)}
/* Bot tuzagi: ekran disinda, klavye ve ekran okuyucu disinda; dolu gelirse api/teklif.mjs iletmez */
.il-tuzak{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.il-gonder[aria-busy=true]{cursor:progress;opacity:.85}
/* Panel kipleri hidden ile acilip kapanir; dugmelerin inline-flex kurali hidden'i ezmesin */
.il-tesekkur [hidden]{display:none!important}
@media(min-width:1024px){.il-not{margin-top:16px;font-size:12px;line-height:18px}}

/* gonderim sonrasi tesekkur durumu */
.il-tesekkur{margin-top:2.25rem;padding:1.5rem;border:1px solid #d4d8e0;background:#fff}
.il-tesekkur[hidden]{display:none}
.il-tesekkur:focus{outline:0}
@media(min-width:1024px){.il-tesekkur{margin-top:48px;padding:40px}}
.il-tesekkur-ikon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:#dbeaff;color:#0066ff}
.il-tesekkur-ikon svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2}
.il-tesekkur h3{margin:1.25rem 0 0;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.9)}
.il-tesekkur p{margin:.75rem 0 0;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.il-tesekkur p a{color:#0066ff}
@media(min-width:1024px){.il-tesekkur h3{margin-top:24px;font-size:32px;line-height:40px}.il-tesekkur p{margin-top:12px;font-size:16px;line-height:24px}}
.il-tesekkur-dug{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.5rem}
@media(min-width:1024px){.il-tesekkur-dug{margin-top:32px}}
.il-birincil{display:inline-flex;align-items:center;padding:.375rem 1.25rem;border:0;border-radius:2px;background:#0066ff;
  font-family:inherit;font-size:.875rem;line-height:1.25rem;color:#fff;text-decoration:none;cursor:pointer;transition:background-color .15s}
.il-birincil:hover{background:#1e40af;color:#fff}
.il-metin-dug{display:inline-flex;align-items:center;padding:0;border:0;background:none;font-family:inherit;font-size:.875rem;
  line-height:1.25rem;color:#0066ff;cursor:pointer}
.il-metin-dug:hover{color:#1e40af}
@media(min-width:1024px){.il-birincil,.il-metin-dug{font-size:14px;line-height:20px}.il-birincil{padding:6px 20px}}
.il-tesekkur .il-ek{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e6e9ed;font-size:.75rem;line-height:1.125rem;color:rgba(0,0,0,.55)}
@media(min-width:1024px){.il-tesekkur .il-ek{margin-top:32px;padding-top:16px;font-size:12px;line-height:18px}}

/* --- I5 icerik bolumleri: solda sabitlenen h2, sagda #d4d8e0 cerceveli kartlar --- */
.il-bolum{max-width:1248px;margin:0 auto;padding:3.75rem 1.5rem 0}
@media(min-width:1024px){.il-bolum{padding:120px 24px 0}}
.il-satir{display:flex;flex-direction:column;padding-bottom:1.5rem}
@media(min-width:1024px){.il-satir{flex-direction:row;padding-bottom:48px}}
.il-bolum-sol{min-width:0}
/* Son satirda tek kelime kalmaz: pretty, Chromium'da uzun tek kelimeyi yetim saymadigi icin
   kisa basliklarda balance. */
.il-bolum-sol h2{margin:0 0 2rem;font-size:1.75rem;line-height:2.125rem;font-weight:600;color:rgba(0,0,0,.9);
  text-wrap:pretty;text-wrap:balance}
.il-bolum-sag{min-width:0;padding-bottom:1rem;border-bottom:1px solid #c2c2c2}
@media(min-width:1024px){
  .il-bolum-sol{flex:0 0 40%;width:40%}
  .il-bolum-sol h2{position:sticky;top:calc(var(--header-h,64px) + 16px);min-height:120px;margin:0 60px 0 0;font-size:36px;line-height:40px}
  .il-bolum-sag{flex:0 0 60%;width:60%}
}
@media(min-width:1024px) and (max-width:1199px){.il-bolum-sol h2{margin-right:32px;font-size:32px;line-height:36px}}
.il-bolum-giris{margin:0 0 1.5rem;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.il-bolum-giris a,.il-bolum-son a{color:#0066ff}
.il-bolum-son{margin:1.5rem 0 .5rem;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.il-bolum-giris{margin-bottom:24px;font-size:16px;line-height:24px}.il-bolum-son{margin:24px 0 8px;font-size:16px;line-height:24px}}

.il-kartlar{display:flex;flex-direction:column;gap:.25rem;margin:0;padding:0;list-style:none}
@media(min-width:1024px){.il-kartlar{gap:8px}}
.il-kart{display:flex;flex-direction:column;gap:1.25rem;margin:0;padding:.75rem;border:1px solid #d4d8e0;background:#fff}
@media(min-width:1024px){.il-kart{gap:40px;padding:24px}}
.il-kart-ust{display:flex;flex-direction:column}
.il-kart-et{font-size:.875rem;line-height:1.203rem;font-weight:600;color:rgba(0,0,0,.6)}
.il-kart h3{margin:.0625rem 0 0;font-size:1.125rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.9)}
.il-kart-alt{font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.il-kart-alt p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.il-kart-alt p+p{margin-top:.5rem}
.il-kart-alt a{color:#0066ff}
@media(min-width:1024px){
  .il-kart-et{font-size:20px;line-height:27.5px}
  .il-kart h3{margin-top:0;font-size:32px;line-height:40px}
  .il-kart-alt{font-size:16px;line-height:24px}
  .il-kart-alt p+p{margin-top:12px}
}

/* SSS: Pudu O15 akordeon satiri (72px, ust cizgi, 12px arti ikonu, 500ms) */
.il .il-sss details{margin:0;padding:0;border:0;border-top:1px solid #d4d8e0}
.il .il-sss details:first-child{border-top:0}
.il .il-sss summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;padding:1rem 0;
  list-style:none;cursor:pointer;font-size:1rem;line-height:1.5rem;font-weight:600;color:rgba(0,0,0,.9)}
.il .il-sss summary::-webkit-details-marker{display:none}
.il .il-sss summary::after{content:none}
.il .il-sss summary:hover{color:#0066ff}
.il .il-sss summary:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.il-arti{position:relative;flex:none;width:.75rem;height:.75rem;color:rgba(0,0,0,.6)}
.il-arti::before,.il-arti::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;
  background:currentColor;transition:transform .5s ease-in-out}
.il-arti::after{transform:rotate(90deg)}
.il .il-sss details[open]>summary .il-arti::after{transform:rotate(0deg)}
.il .il-sss details>.il-cevap{margin:0;padding:0 2rem 1.5rem 0;max-width:none;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6)}
.il .il-sss details[open]>.il-cevap{animation:il-ac .5s ease-in-out}
.il-cevap a{color:#0066ff}
@media(min-width:1024px){.il .il-sss summary{font-size:18px;line-height:28px}.il .il-sss details>.il-cevap{font-size:16px;line-height:24px}}
@keyframes il-ac{from{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.il .il-sss details[open]>.il-cevap{animation:none}.il-arti::before,.il-arti::after{transition:none}}

/* ---- src/css/listeleme.css ---- */
/* ==========================================================================
   /karsilastirma: Pudu urun listeleme (U2-U4) + makale kolonu (K2) + ilgili
   yazilar (K3). Olcu kaynagi: pudurobotics.com/en/products ve makale sablonu,
   1440x900 (L) ve 375x812 (M) Playwright olcumu.
   Birim kurali: 1024 alti rem (Pudu O1 kok olcegi, 375'te 1rem = 16px),
   1024 ve ustu px. Pudu 1024-1199 arasinda tasiyor; burada kolonlar akiskan.
   Tum siniflar "ls-" onekli; ortak stile ve diger sablonlara dokunmaz.
   ========================================================================== */

.ls{background:#f2f3f5;color:rgba(0,0,0,.85)}
.ls h1,.ls h2,.ls h3,.ls p,.ls li{letter-spacing:normal}
.ls a:hover{text-decoration:none}
.ls [id]{scroll-margin-top:calc(var(--header-h,64px) + 5.25rem)}
@media(min-width:1024px){.ls [id]{scroll-margin-top:calc(var(--header-h,64px) + 84px)}}

/* --- U2 banner + C3 hero metni: kare (M) / 600px (L). Gorsel GT serisi: model adlari gorselin icinde,
   kenarlari siyaha iner; zemin siyah oldugu icin gorsel kutuyu doldurmak zorunda degil.
   M: dikey kesim tam genislikte, metin ustte (C3 M: ust 40px, yan 24px), urunler metnin altinda.
   L: metin solda dikey ortali (C3 L), urunler metin kolonunun sagindaki alanda. Urun kutusu gorselde
   x 860-3120 / 3840 ve y 556-1300 / 1800: --alan genisligine sigar (genislik = alan x 3840/2260,
   sol = alan basi - alan x 860/2260), dikeyde ortalanir. Alan: metin kolonu (440px + 40px) sonrasindan
   sag kenara en az 40px kalana kadar. Kisa kalan ust ve alt kenar maskeyle siyaha erir.
   Ortu yalniz metin tarafinda: M'de ust bant, L'de sol kolon; urunlerin ustunde ortu yok. --- */
.ls-banner{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#000;color:#fff}
.ls-banner-res img{position:absolute;top:1.25rem;left:0;width:100%;height:auto;max-width:none}
.ls-banner::after{content:"";position:absolute;inset:0 0 auto;height:55%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0))}
.ls-banner-ic{position:relative;z-index:1;height:100%;display:flex;align-items:flex-start}
.ls-banner-yazi{width:100%;max-width:1248px;margin:0 auto;padding:2.5rem 1.5rem 0}
/* H1 "PUDU GT serisi model karsilastirmasi": son iki kelime bolunmez bosluklu (karsilastirma.mjs), iki satir dengeli */
.ls-banner h1{margin:0;font-size:1.75rem;line-height:2.125rem;font-weight:600;color:#fff;text-wrap:balance}
.ls-banner p{margin:1rem 0 0;font-size:1rem;line-height:1.5rem;font-weight:400;color:rgba(255,255,255,.85);text-wrap:pretty}
@media(min-width:1024px){
  .ls-banner{aspect-ratio:auto;height:600px;--sol:max(24px,(100% - 1200px) / 2);
    --alan:calc(100% - max(40px,var(--sol) * .5) - var(--sol) - 480px)}
  .ls-banner-res img{top:50%;left:calc(var(--sol) + 480px - var(--alan) * .380531);width:calc(var(--alan) * 1.699115);
    transform:translateY(-51.556%);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent);
    mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent)}
  .ls-banner::after{inset:0 auto 0 0;width:calc(var(--sol) + 480px);height:auto;
    background:linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.35) 70%,rgba(0,0,0,0))}
  .ls-banner-ic{align-items:center}
  .ls-banner-yazi{padding:0 24px}
  .ls-banner h1{font-size:42px;line-height:50px;max-width:440px}
  .ls-banner p{margin-top:24px;max-width:440px}
}

/* --- U3 yapiskan sekme cubugu: navbar altinda, #f2f3f5, 68px --- */
.ls-panel{position:relative}
@media(min-width:1024px){.ls-panel{padding-top:32px}}
.ls-sekme{position:sticky;top:var(--header-h,64px);z-index:20;background:#f2f3f5}
.ls-sekme-ic{max-width:1248px;margin:0 auto;padding:1rem 1.5rem}
.ls-sekme ul{position:relative;display:flex;gap:.25rem;margin:0;padding:0;list-style:none;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.ls-sekme ul::-webkit-scrollbar{display:none}
.ls-sekme li{flex:none;display:flex}
.ls-sekme a{display:flex;align-items:center;justify-content:center;min-width:3.5rem;height:2.25rem;
  padding:.25rem .5rem;font-size:14px;line-height:21px;font-weight:400;color:rgba(0,0,0,.85);
  white-space:nowrap;text-decoration:none;transition:color .15s}
.ls-sekme a:hover{color:#0066ff}
.ls-sekme a.aktif{background:#fff;font-weight:600}
.ls-sekme a:focus-visible{outline:2px solid #0066ff;outline-offset:-2px;border-radius:0}
/* 1024 alti: sekmeler ekran kenarina kadar kayar; sag kenarda 3rem solma, yarim kalan sekme kesik harf
   yerine solarak biter ve satirin kaydigini gosterir. Sondaki bosluk son sekmeyi solmanin disina tasir.
   Kaydirma baslayinca sol kenarda da solma belirir (scroll-driven animation destekleyen tarayicida). */
@property --ls-sol{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes ls-solma{from{--ls-sol:0px}8%,to{--ls-sol:32px}}
@media(max-width:1023px){
  .ls-sekme-ic{padding-left:0;padding-right:0}
  .ls-sekme ul{padding-left:1.5rem;scroll-padding-inline:1.5rem;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 3rem),transparent)}
  .ls-sekme ul::after{content:"";flex:0 0 2.75rem}
  @supports (animation-timeline:scroll()){
    .ls-sekme ul{animation:ls-solma linear both;animation-timeline:scroll(self inline);
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--ls-sol),#000 calc(100% - 3rem),transparent);
      mask-image:linear-gradient(90deg,transparent,#000 var(--ls-sol),#000 calc(100% - 3rem),transparent)}
  }
}
@media(min-width:1024px){
  .ls-sekme-ic{padding:16px 24px}
  .ls-sekme ul{flex-wrap:wrap;gap:0;overflow:visible}
  .ls-sekme a{min-width:0;height:36px;padding:8px 24px;font-size:14px;line-height:20px;color:rgba(0,0,0,.6)}
  .ls-sekme a.aktif{color:rgba(0,0,0,.6)}
  .ls-sekme a:hover{color:#0066ff}
}

/* --- U4 kart izgarasi: 1024 ve ustu 3 sutun, aralik 16px. 1024 alti yatay kaydirmali ray (asagida,
   "kart raylari"): Pudu mobilde kartlari alt alta dizer, bu sayfada uc kart ust uste ~2000px tutuyordu. --- */
.ls-kartlar{max-width:1248px;margin:0 auto;padding:0 1.5rem 3rem}
@media(min-width:1024px){.ls-kartlar{padding:0 24px 48px}}
.ls-izgara{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:0;padding:0;list-style:none}
@media(min-width:1024px){.ls-izgara{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.ls-kart{display:flex;flex-direction:column;min-width:0;background:#fff}
@media(min-width:1024px){.ls-kart{max-width:388px}}
.ls-kart-res{display:flex;justify-content:center;height:21.75rem;overflow:hidden}
@media(min-width:1024px){.ls-kart-res{height:348px}}
.ls-kart-res img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}
.ls-kart-govde{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:1rem}
@media(min-width:1024px){.ls-kart-govde{padding:20px 32px 32px}}
.ls-kart-ad{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ls-kart-ad h2{margin:0;font-size:1.75rem;line-height:2.125rem;font-weight:600;color:#000}
@media(min-width:1024px){.ls-kart-ad h2{font-size:32px;line-height:40px}}
.ls-yeni{font-size:.875rem;line-height:1.25rem;font-weight:600;font-style:italic;color:#ea580c}
.ls-kart-alt{margin:.5rem 0 0;font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.9);text-wrap:balance}
.ls-etiketler{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.ls-etiketler li{margin:0;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;color:rgba(0,0,0,.6);white-space:nowrap;
  border:1px solid #d1d5db;border-radius:2px}
.ls-kart-dug{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem}
.ls-birincil{display:inline-flex;align-items:center;padding:.375rem 1.25rem;font-size:.875rem;line-height:1.25rem;
  color:#fff;background:#0066ff;border-radius:2px;text-decoration:none;transition:background-color .15s}
.ls-birincil:hover,.ls-birincil:focus-visible{background:#1e40af;color:#fff;text-decoration:none}
.ls-ikincil{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.9);text-decoration:none}
.ls-ikincil:hover{color:#0066ff;text-decoration:none}
.ls-ok{flex:none;width:7px;height:12px;margin-left:.75rem;fill:none;stroke:currentColor;stroke-width:1.5}

/* --- gri kart bolumleri: karar olcutleri (#olcutler) ve tesis profili (#tesis). Baslik satiri Pudu K3
   (h2 24/32 M, 30/36 L, 600) + C5 alt metni (14/21, .6). Kart Pudu C6 metin karti: beyaz, kose 0,
   golgesiz; 1024 alti tek sutun (kok olcekle buyur), 1024 ve ustu iki sutun, aralik 16px. --- */
.ls-bolum{max-width:1248px;margin:0 auto;padding:3rem 1.5rem}
.ls-bolum.son{padding-bottom:3.75rem}
@media(min-width:1024px){.ls-bolum{padding:48px 24px}.ls-bolum.son{padding-bottom:96px}}
.ls-bolum-bas{max-width:49.6875rem}
.ls-bolum-bas h2{margin:0;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.85);text-wrap:balance}
.ls-bolum-bas p{margin:.75rem 0 0;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.6);text-wrap:pretty}
@media(min-width:1024px){
  .ls-bolum-bas{max-width:795px}
  .ls-bolum-bas h2{font-size:30px;line-height:36px}
  .ls-bolum-bas p{margin-top:16px;font-size:14px;line-height:21px}
}
.ls-bilgiler{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin:1.5rem 0 0;padding:0;list-style:none}
@media(min-width:1024px){.ls-bilgiler{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}}
.ls-bilgi{display:flex;flex-direction:column;min-width:0;margin:0;padding:1rem;background:#fff}
@media(min-width:1024px){.ls-bilgi{padding:24px}}
/* --- kart raylari (1024 alti): model kartlari, karar olcutleri ve tesis profili yatay kaydirilir (Pudu mobil
   swiper dili, K3 rayi gibi). Ray ekran kenarina tasar, ilk kart icerik kenarinda baslar, sonraki kartin
   ucu gorunur; bolum yuksekligi en uzun kart kadar. Kok olcekle buyur (768'de ayni duzen). --- */
@media(max-width:1023px){
  .ls-izgara,.ls-bilgiler{display:flex;gap:1rem;margin-left:-1.5rem;margin-right:-1.5rem;padding:0 1.5rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 1.5rem;
    scrollbar-width:none;-ms-overflow-style:none}
  .ls-izgara::-webkit-scrollbar,.ls-bilgiler::-webkit-scrollbar{display:none}
  .ls-izgara>li,.ls-bilgiler>li{flex:0 0 18.5rem;scroll-snap-align:start}
  .ls-izgara.surukle,.ls-bilgiler.surukle{scroll-snap-type:none;cursor:grabbing;user-select:none}
  .ls-izgara:focus-visible,.ls-bilgiler:focus-visible{outline:2px solid #0066ff;outline-offset:-2px}
}
.ls-bilgi h3{margin:0;font-size:1.125rem;line-height:1.625rem;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
.ls-bilgi h3 a{color:inherit;text-decoration:none}
.ls-bilgi h3 a:hover{color:#0066ff}
.ls-bilgi-not{margin:.25rem 0 0;font-size:.75rem;line-height:1rem;color:rgba(0,0,0,.6)}
/* model basina deger satiri: model 14/20 .6; deger 16/24 600 pdblue (C4 deger rengi) + ek 14/20 .6 */
.ls-deger,.ls-eslesme{margin:1rem 0 0;padding:0}
.ls-deger>div,.ls-eslesme>div{display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:.75rem;align-items:baseline;
  padding:.5rem 0;border-top:1px solid #e6e9ed}
.ls-deger>div:last-child,.ls-eslesme>div:last-child{border-bottom:1px solid #e6e9ed}
.ls-eslesme>div{grid-template-columns:7.5rem minmax(0,1fr)}
.ls-deger dt,.ls-eslesme dt,.ls-deger dd,.ls-eslesme dd{margin:0;font-size:.875rem;line-height:1.25rem;color:rgba(0,0,0,.6)}
.ls-deger strong{margin-right:.5rem;font-size:1rem;line-height:1.5rem;font-weight:600;color:#0066ff}
.ls-deger strong.yok{font-size:.875rem;line-height:1.25rem;font-weight:400;color:rgba(0,0,0,.6)}
/* model baglantilari tek basina duran hedef: en az 24px yukseklik (WCAG 2.5.8) */
.ls-eslesme a{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);vertical-align:middle;font-weight:600;color:#0066ff;text-decoration:none}
.ls-eslesme a:hover{color:#1e40af}
.ls-madde{margin:1rem 0 0;padding:0 0 0 1.125rem;list-style:square;font-size:.875rem;line-height:1.3125rem;color:rgba(0,0,0,.75)}
.ls-madde li{margin:0}
.ls-madde li+li{margin-top:.5rem}
.ls-madde a{color:#0066ff;text-decoration:none}
.ls-madde a:hover{color:#1e40af}
/* ozet karti: Pudu C6 kart B (cozum) gibi 6px #0066ff ust serit */
.ls-ozet{border-top:.375rem solid #0066ff}
.ls-bolum-not{margin:.5rem 0 0;font-size:.75rem;line-height:1rem;color:rgba(0,0,0,.6)}
@media(min-width:1024px){
  .ls-bilgi h3{font-size:20px;line-height:28px}
  .ls-bilgi-not{margin-top:4px;font-size:12px;line-height:16px}
  .ls-deger,.ls-eslesme{margin-top:16px}
  .ls-deger>div,.ls-eslesme>div{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:8px 0}
  .ls-eslesme>div{grid-template-columns:120px minmax(0,1fr)}
  .ls-deger dt,.ls-eslesme dt,.ls-deger dd,.ls-eslesme dd{font-size:14px;line-height:20px}
  .ls-deger strong{margin-right:8px;font-size:16px;line-height:24px}
  .ls-deger strong.yok{font-size:14px;line-height:20px}
  .ls-madde{margin-top:16px;padding-left:18px;font-size:14px;line-height:21px}
  .ls-madde li+li{margin-top:8px}
  .ls-ozet{border-top-width:6px}
  .ls-bolum-not{margin-top:8px;text-align:right;font-size:12px;line-height:16px}
}

/* --- K2 makale kolonu: tam genislik beyaz, 795px kolon, govde kutusu --- */
.ls-makale{background:#fff}
.ls-kolon{max-width:795px;margin:0 auto;padding:1.5rem 0 4rem}
@media(min-width:1024px){.ls-kolon{padding:64px 0}}
/* metin Pudu makalesi gibi her genislikte sabit px: kap 14/24, paragraf ve liste ogesi 16/24 (makale.css ile
   ayni); cerceve (kenar boslugu, dolgu) 1024 altinda rem ile olceklenmeye devam eder */
.ls-govde{margin:0 1.5rem;padding:3rem 0 4rem;border-top:1px solid #d1d5db;border-bottom:1px solid #d1d5db;
  font-size:14px;line-height:24px;color:rgba(0,0,0,.9)}
@media(min-width:1024px){.ls-govde{margin:0;padding:48px 0 64px}}
.ls-govde>:first-child{margin-top:0;padding-top:0}
.ls-govde p{margin:1em 0;padding:.2em 0 .9em;font-size:16px;line-height:24px;color:rgba(0,0,0,.9);text-wrap:pretty}
/* basliklar: Pudu makale CSS modulu h2 20/28 700 (Pudu makalelerinde olculen), h3 16/24 600, h4 14/22 600.
   Sayfa h1'inden (banner) buyuk olmaz; tek kelimelik son satir olmasin diye dengeli kirilim. Bolum araligi
   em ile, basligin kendi olcusune gore: h2 ustu 32px, h3 ustu 24px. */
.ls-govde h2{margin:1.6em 0 0;padding:0 0 .4em;font-size:20px;line-height:28px;font-weight:700;color:rgba(0,0,0,.9);text-wrap:balance}
.ls-govde h3{margin:1.5em 0 0;padding:0 0 .5em;font-size:16px;line-height:24px;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
.ls-govde h4{margin:0;padding:0;font-size:14px;line-height:22px;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
.ls-govde h2+h3{margin-top:.5em}
.ls-govde h2+p,.ls-govde h3+p{margin-top:0;padding-top:0}
.ls-govde ul{list-style:square;margin:0 0 .9em;padding-left:1.5em;line-height:1.6em}
.ls-govde li{font-size:16px;line-height:24px;font-weight:400;color:rgba(0,0,0,.9);text-wrap:pretty}
.ls-govde a{color:#1b3af2;text-decoration:none}
.ls-govde a:hover{text-decoration:underline}
.ls-govde strong{font-weight:600;color:rgba(0,0,0,.9)}
.ls-govde .ls-dipnot{font-size:.857em;line-height:1.6em;color:rgba(0,0,0,.6)}

/* ikili karsilastirma: ortak nokta etiketleri (U4 ozellik etiketi: 12px, 1px #d1d5db, kose 2px),
   iki model karti (#f2f3f5 kutu, 1024+ yan yana) ve sonuc cumlesi. Metin 14px tabanli, olcu px/em. */
.ls-ortak{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.ls-ortak>span{margin-right:4px;font-size:12px;line-height:16px;font-weight:600;color:rgba(0,0,0,.6)}
.ls-govde .ls-cip{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;line-height:16px}
.ls-govde .ls-cip li{margin:0;padding:4px 8px;font-size:12px;line-height:16px;color:rgba(0,0,0,.6);
  border:1px solid #d1d5db;border-radius:2px}
.ls-cift{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0}
@media(min-width:1024px){.ls-cift{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
.ls-cift-kart{min-width:0;padding:1rem;background:#f2f3f5}
@media(min-width:1024px){.ls-cift-kart{padding:20px 24px 24px}}
.ls-govde .ls-cift-kart h4 a{display:inline-flex;align-items:center;min-height:24px;color:rgba(0,0,0,.9);text-decoration:none}
.ls-govde .ls-cift-kart h4 a:hover{color:#0066ff;text-decoration:none}
.ls-govde .ls-rol{margin:0;padding:0;font-size:12px;line-height:18px;color:rgba(0,0,0,.6)}
.ls-govde .ls-cift-madde{margin:10px 0 0;padding-left:1.5em;list-style:square;line-height:1.6em}
.ls-govde .ls-cift-madde li+li{margin-top:4px}
.ls-govde .ls-karar{margin:12px 0 0;padding:0}
.ls-govde .ls-karar strong{font-weight:600}
/* ikili ayrinti (ortak noktalar + iki model karti): Pudu O15 akordeon dili, govde icinde kisa satir (48px,
   ust ve alt cizgi, 12px arti). 1024 alti kapali baslar (karsilastirma.mjs satir ici betik), 1024 ve ustu
   acik; kapaliyken de sayfa ici aramada bulunur. Sonuc cumlesi satirin ustunde, gorunur kalir. */
.ls-govde .ls-acilir{margin:16px 0 0;padding:0;border:0;border-top:1px solid #d1d5db;border-bottom:1px solid #d1d5db}
.ls-govde .ls-acilir[open]{padding-bottom:16px}
.ls-govde .ls-acilir>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px 0;
  list-style:none;cursor:pointer;font-size:14px;line-height:20px;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
.ls-govde .ls-acilir>summary::-webkit-details-marker{display:none}
.ls-govde .ls-acilir>summary::after{content:none}
.ls-govde .ls-acilir>summary:hover{color:#0066ff}
.ls-govde .ls-acilir>summary:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.ls-govde .ls-acilir[open]>summary .ls-arti::after{transform:rotate(0deg)}
.ls-govde .ls-acilir>*:not(summary){max-width:none;margin-top:0;font-size:inherit;line-height:inherit;color:inherit}

/* tablo: Pudu makale kuralinda tablo yok; 14/24 govde, #d1d5db cizgi, #f2f3f5 baslik */
.ls-tablo{margin:1.25em 0 .5em;padding:0 0 1px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center/2.5rem 100% no-repeat local,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.14),transparent) left center/.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.14),transparent) right center/.75rem 100% no-repeat scroll}
.ls-tablo:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.ls-tablo table{width:100%;min-width:36rem;border-collapse:collapse;background:transparent;font-size:1em;line-height:24px}
@media(min-width:1024px){.ls-tablo table{min-width:0}}
.ls-tablo caption{caption-side:top;padding:0 0 .75rem;text-align:left;font-size:.857em;line-height:1.4;color:rgba(0,0,0,.6)}
.ls-tablo th,.ls-tablo td{padding:.625rem .875rem;border:1px solid #d1d5db;vertical-align:top;text-align:left;
  font-size:1em;line-height:inherit;letter-spacing:normal;text-transform:none;white-space:normal;color:rgba(0,0,0,.9)}
@media(min-width:1024px){.ls-tablo th,.ls-tablo td{padding:10px 14px}}
.ls-tablo thead th{background:#f2f3f5;font-weight:600}
.ls-tablo tbody th{font-weight:600;background:rgba(242,243,245,.45);white-space:nowrap}
/* 1024 alti tablo yatay kayar: satir etiketi sutunu sabit kalir (saga kaydirinca degerler etiketsiz
   kalmasin). Yapiskan hucrenin zemini opak (yari saydam zemin altindan gecen metni gosterirdi). */
@media(max-width:1023px){
  /* birlesik kenarlikta hucre zemini sol kenar seridini ortmez: ic sol serit zemin renginde,
     kayan hucrelerin harf parcalari yapiskan sutunun kenarindan sizmasin */
  .ls-tablo thead th:first-child,.ls-tablo tbody th{position:sticky;left:0;z-index:1}
  .ls-tablo thead th:first-child{box-shadow:inset -1px 0 0 #d1d5db,inset 3px 0 0 #f2f3f5}
  .ls-tablo tbody th{background:#f9fafa;box-shadow:inset -1px 0 0 #d1d5db,inset 3px 0 0 #f9fafa}
}
.ls-tablo tbody tr:hover td{background:transparent}
.ls-tablo td a,.ls-tablo th a{color:#1b3af2}
/* sutun basligindaki model baglantisi: dokunma hedefi en az 24px (WCAG 2.5.8) */
.ls-tablo thead th a{display:inline-flex;align-items:center;min-height:24px;vertical-align:top}
/* veri yok hucresi ikincil ama okunur: #666 beyaz ustunde 5,7:1 (.45 ile 3,35:1 idi) */
.ls-tablo .ls-yok{color:rgba(0,0,0,.6)}
.ls-tablo .ls-model{white-space:nowrap}

/* SSS: Pudu O15 akordeon satiri (72px, ust cizgi, 12px arti ikonu, 500ms) */
.ls-sss{margin:1em 0 .9em;border-bottom:1px solid #d1d5db}
.ls .ls-sss details{margin:0;padding:0;border:0;border-top:1px solid #d1d5db}
/* makale kolonundaki metin gibi sabit px (768'de govde 16px iken soru 33px'e buyumesin) */
.ls .ls-sss summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;
  padding:16px 0;list-style:none;cursor:pointer;font-size:16px;line-height:24px;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
.ls .ls-sss summary::-webkit-details-marker{display:none}
.ls .ls-sss summary::after{content:none}
.ls .ls-sss summary:hover{color:#0066ff}
.ls .ls-sss summary:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.ls-arti{position:relative;flex:none;width:.75rem;height:.75rem;color:rgba(0,0,0,.6)}
.ls-arti::before,.ls-arti::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;
  background:currentColor;transition:transform .5s ease-in-out}
.ls-arti::after{transform:rotate(90deg)}
.ls .ls-sss details[open]>summary .ls-arti::after{transform:rotate(0deg)}
.ls .ls-sss details>.ls-cevap{margin:0;padding:0 32px 24px 0;font-size:14px;line-height:24px;color:rgba(0,0,0,.6);max-width:none}
.ls .ls-sss details[open]>.ls-cevap{animation:ls-ac .5s ease-in-out}
@keyframes ls-ac{from{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:none}}
.ls-cevap a{color:#1b3af2}

/* --- K3 ilgili yazilar: #f2f3f5, kolon solundan baslayip saga tasan kaydirici --- */
.ls-ilgili{background:#f2f3f5;padding:3.75rem 0;overflow:hidden}
@media(min-width:1024px){.ls-ilgili{padding:96px 0}}
.ls-ilgili-bas{max-width:795px;margin:0 auto 1.5rem;padding:0 1.5rem}
@media(min-width:1024px){.ls-ilgili-bas{margin-bottom:32px;padding:0}}
.ls-ilgili-bas h2{margin:0;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.85);text-wrap:balance}
@media(min-width:1024px){.ls-ilgili-bas h2{font-size:30px;line-height:36px}}
.ls-ray{display:flex;gap:1rem;margin:0;padding:0 1.5rem;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 1.5rem;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.ls-ray::-webkit-scrollbar{display:none}
.ls-ray.surukle{cursor:grabbing;scroll-snap-type:none;user-select:none}
@media(min-width:1024px){
  .ls-ray{gap:16px;padding:0 max(24px,calc((100% - 795px) / 2));scroll-padding:0 max(24px,calc((100% - 795px) / 2))}
}
.ls-ray>li{flex:none;display:flex;width:20.4375rem;scroll-snap-align:start}
@media(min-width:1024px){.ls-ray>li{width:400px}}
.ls-yazi{position:relative;display:flex;flex-direction:column;width:100%;background:#fff;color:inherit;text-decoration:none}
.ls-yazi::after{content:"";position:absolute;left:0;bottom:0;width:0;height:4px;background:#0066ff;transition:width .3s}
.ls-yazi:hover::after,.ls-yazi:focus-visible::after{width:100%}
.ls-yazi:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.ls-yazi-res{display:block;aspect-ratio:74/47;overflow:hidden;background:#e6e9ed}
.ls-yazi-res img{width:100%;height:100%;max-width:none;object-fit:cover;-webkit-user-drag:none}
.ls-yazi-govde{display:flex;flex-direction:column;padding:1rem}
@media(min-width:1024px){.ls-yazi-govde{padding:16px}}
.ls-yazi h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.5rem;margin:0;
  font-size:.875rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.9);text-wrap:balance}
/* meta satiri (A9): Pudu'da tarih 14px .6 + tur pdblue, araya 20px; tarih yerine okuma suresi */
.ls-yazi-meta{display:flex;flex-wrap:wrap;column-gap:1.25rem;padding-top:2rem;font-size:.875rem;line-height:1.25rem;color:#0066ff}
.ls-yazi-meta .ls-sure{color:rgba(0,0,0,.6)}
@media(min-width:1024px){.ls-yazi h3{height:40px;font-size:14px;line-height:20px}.ls-yazi-meta{padding-top:32px;column-gap:20px}}

@media(prefers-reduced-motion:reduce){.ls .ls-sss details[open]>.ls-cevap{animation:none}}


/* ---- src/css/makale.css ---- */
/* ==========================================================================
   Pudu makale sablonu: bilgi sayfalari (spec K0-K4, E4). Olcum kaynagi:
   pudurobotics.com/en/news/pudu-mp2000-ai-native-robotic-forklift, 1440x900 ve
   375x812. Birim kurali: 1024 altinda her olcu rem ya da rem tabanli em; Pudu O1
   kok olcegiyle sitenin geri kalaniyla ayni oranda buyur (375'te 1rem = 16px).
   Zengin metin tek tabandan olculur: .mk-metin 1024 altinda .875rem, 1024 ve
   ustunde 14px; icindeki tum olculer em (14px tabaninda Pudu degerleri birebir).
   1024 ve ustu degerler Pudu px degerleriyle ayni kalir.
   ========================================================================== */

/* ---- makale kolonu (K2) ---- */
.mk{display:block;background:#fff}
.mk-kolon{max-width:49.6875rem;margin:0 auto;padding:0 0 4rem}
@media(min-width:1024px){.mk-kolon{padding-top:4rem}}
.mk-kapak{background:#f2f3f5}
.mk-kapak img{display:block;width:100%;height:auto;aspect-ratio:74/47;object-fit:cover;object-position:center}
.mk-yazi{padding:0 1.5rem}
@media(min-width:1024px){.mk-yazi{padding:0}}
/* Basliklarda tek kelimelik son satir kalmasin: text-wrap:balance (iki satira inen basligi esit boler). */
.mk h1.mk-baslik{margin:0;padding:1.5rem 0 0;font-size:20px;line-height:28px;font-weight:600;
  color:rgba(0,0,0,.9);letter-spacing:normal;text-wrap:balance}
/* meta satiri (K2): Pudu'da tarih 18px .6 + sag 16px, tur 14px pdblue. Tarih tutulmadigi icin tarihin
   yerinde okuma suresi durur (makale.mjs okumaSuresi). */
.mk-meta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;margin:1.5rem 0 0;font-size:14px;line-height:28px}
.mk-meta .mk-sure{font-size:18px;color:rgba(0,0,0,.6)}
@media(min-width:1024px){.mk h1.mk-baslik{font-size:20px;line-height:28px}.mk-meta{font-size:14px;line-height:28px}}
.mk-tur{color:#0066ff}
.mk-govde{margin-top:1.5rem;padding:3rem 0 4rem;border-top:1px solid #d1d5db;border-bottom:1px solid #d1d5db}

/* ---- zengin metin: Pudu pd-rich-text kurallari. Kap 14px (pd-rich-text), satir 24px; paragraf ve
   liste ogesi 16/24 (news-detail article-content "h3, li, p" kurali ve pd-rich-text-size-body).
   Asagidaki em degerleri 14px kap tabanina gore: 1.714285714em = 24px, .857142857em = 12px. ---- */
/* Pudu makale metnini (CSS modulu) kok olcekle buyutmez: baslik 20/28, govde 16/24 her genislikte sabit;
   cerceve (dolgu, kapak, kartlar) olceklenmeye devam eder. */
.mk-metin{font-size:14px;line-height:1.714285714;color:rgba(0,0,0,.9);overflow-wrap:break-word}
@media(min-width:1024px){.mk-metin{font-size:14px}}
.mk-metin>*{margin-top:0;margin-bottom:0}
/* govde paragrafi 16/24; son satirda tek kelime kalmasin diye text-wrap:pretty */
.mk-metin p{font-size:16px;line-height:24px;color:rgba(0,0,0,.9);max-width:none;text-wrap:pretty}
.mk-metin>p+p,.mk-metin>p+ul,.mk-metin>p+ol,.mk-metin>ul+p.mk-git{margin-top:24px}
/* Basliklar: Pudu makale CSS modulu (news-detail article-content) h2 20/28, h3 16/24, h4 14/22.
   Kalinlik: h2 700 (Pudu'da on makale olculdu: h2 tasiyan altisinin hepsinde 700; mavi renk yalniz
   birinde satir ici stil, sablon kurali degil), h3 ve h4 600. Sayfa h1'i 20/28 600; govde basliklari
   h1'den buyuk olmaz. Bolum araligi: h2 ustu 32px, h3 ve h4 ustu 24px, h2'yi izleyen h3 ustu 16px,
   baslik alti 8px (em, basligin kendi olcusune gore). */
.mk-metin h2,.mk-metin h3,.mk-metin h4{padding:0;font-weight:600;color:rgba(0,0,0,.9);letter-spacing:normal;text-wrap:balance}
.mk-metin h2{margin:1.6em 0 .4em;font-size:1.428571429em;line-height:1.4;font-weight:700}
.mk-metin h3{margin:1.5em 0 .5em;font-size:1.142857143em;line-height:1.5}
.mk-metin h4{margin:1.714285714em 0 .571428571em;font-size:1em;line-height:1.571428571}
.mk-metin>h2:first-child,.mk-metin>h3:first-child{margin-top:0}
.mk-metin h2+h3{margin-top:1em}
.mk-metin ul,.mk-metin ol{margin:0 0 .9em 1.5em;padding:.2em 0 0;line-height:1.6em}
.mk-metin ul{list-style-type:square}
.mk-metin ol{list-style-type:decimal}
.mk-metin ul ul{list-style-type:disc}
.mk-metin li{font-size:16px;line-height:24px;font-weight:400;color:rgba(0,0,0,.9);text-wrap:pretty}
.mk-metin .mk-uzun>li+li{margin-top:12px}
.mk-metin strong,.mk-metin b{font-weight:700;color:rgba(0,0,0,.9)}
.mk-metin a{color:#1b3af2;text-decoration:none}
.mk-metin a:hover{color:#1b3af2;text-decoration:underline}
.mk-metin figure{margin:.9em 0}
.mk-metin img{display:block;width:100%;height:auto;border-radius:0}
.mk-metin figcaption{margin-top:.571428571em;font-size:1em;line-height:1.428571429;color:rgba(0,0,0,.6)}
.mk-metin video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#f2f3f5;cursor:pointer}
/* kare videonun 16:9 kirpimi: yakin cekimlerde tekerlekler kadrajda kalsin */
.mk-metin video.mk-odak-alt{object-position:50% 65%}

/* kucuk not: tablo altindaki kaynak ve kapsam notlari (12/18) */
.mk-metin .mk-not{font-size:.857142857em;line-height:1.5;color:rgba(0,0,0,.6)}
.mk-metin .mk-tablo+.mk-not{margin-top:-1em}

/* eski hero dugmeleri: Pudu "Learn More" baglantisi (O9), bolum alti 14 / 16px */
.mk-metin .mk-git{display:flex;flex-wrap:wrap;gap:8px 32px}
.mk-metin .mk-git a{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);font-size:14px;line-height:20px;color:#0066ff}
.mk-metin .mk-git a:hover{color:#0066ff}
.mk-git svg,.mk-tumu svg,.mk-duyuru-git svg{flex:none;width:.4375rem;height:.75rem;margin-left:.375rem;fill:none;stroke:#0066ff;stroke-width:1.5}
@media(min-width:1024px){
  .mk-metin .mk-git a{font-size:16px;line-height:24px}
  .mk-git svg,.mk-tumu svg,.mk-duyuru-git svg{width:7px;height:12px;margin-left:6px}
}

/* urun ozellik etiketi (spec U4): 12px, 1px #d1d5db, kose 2px */
.mk-etiketler{display:flex;flex-wrap:wrap;gap:.571428571em}
/* etiket satiri paragraf olarak yazilir; govde paragrafinin 16px'i etiket olculerini buyutmesin */
.mk-metin p.mk-etiketler{font-size:14px;line-height:1.714285714}
.mk-metin .rozet{display:inline-block;padding:.333333333em .666666667em;border:1px solid #d1d5db;border-radius:.166666667em;background:#fff;
  font-size:.857142857em;line-height:1.333333333;font-weight:400;color:rgba(0,0,0,.6);text-transform:none;letter-spacing:normal}

/* ilke kutusu: Pudu lokasyon karti cercevesi (1px #d4d8e0, ic 24px) */
.mk-metin .mk-kutu{margin:1.714285714em 0;padding:1.714285714em;border:1px solid #d4d8e0}
.mk-metin .mk-kutu>*+*{margin-top:12px}

/* gorsel izgarasi: zengin metin icinde 2 sutun, 74:47 kirpma (aralik 16/8, 1024+ 24/16) */
.mk-metin .mk-izgara{display:grid;grid-template-columns:1fr 1fr;gap:1.142857143em .571428571em;margin:.9em 0}
@media(min-width:1024px){.mk-metin .mk-izgara{gap:1.714285714em 1.142857143em}}
.mk-metin .mk-izgara figure{margin:0}
.mk-metin .mk-izgara img{aspect-ratio:74/47;object-fit:cover;background:#f2f3f5}

/* ---- tablo: Pudu'da kural yok (spec E4 onerisi): 14/24, 1px #d1d5db, baslik satiri #f2f3f5.
   Dar ekranda tablo 560px'den (6 sutunlu tablo 720px) yatay kaydirilir; olcu metinle buyur. ---- */
.mk-tablo{margin:1.714285714em 0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border:0;border-radius:0}
.mk-metin>.mk-tablo{margin:1.714285714em 0}
.mk-tablo:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.mk-metin table{width:100%;min-width:40em;border-collapse:collapse;background:#fff;font-size:1em;line-height:1.714285714}
.mk-metin .mk-tablo.dar table{min-width:0}
.mk-metin .mk-tablo.genis table{min-width:51.428571429em}
.mk-metin table caption{caption-side:top;padding:0 0 .666666667em;text-align:left;font-size:.857142857em;line-height:1.5;color:rgba(0,0,0,.6)}
.mk-metin table th,.mk-metin table td{padding:.571428571em .857142857em;border:1px solid #d1d5db;text-align:left;vertical-align:top;
  font-size:1em;line-height:1.714285714;font-weight:400;color:rgba(0,0,0,.9);background:#fff;
  text-transform:none;letter-spacing:normal;white-space:normal}
.mk-metin table thead th{background:#f2f3f5;font-weight:600}
.mk-metin table tbody th{font-weight:600}
.mk-metin table tr:last-child td,.mk-metin table tr:last-child th{border-bottom:1px solid #d1d5db}
.mk-metin table tbody tr:hover td{background:#fff}
.mk-metin table td.sayi{font-variant-numeric:tabular-nums}
.mk-metin table th a{color:#1b3af2}

/* ---- SSS: govde sonunda Pudu akordeon satiri (O15): 72px, ust cizgi #576c8a, 12px arti, 500ms.
   Zengin metnin tabanindan olculur: 72px = 5.142857143em, 12px = .857142857em. ---- */
.mk-metin .mk-sss{margin-top:1em;interpolate-size:allow-keywords}
.mk-sss details:not(.mobil){margin:0;padding:0;border:0;border-top:1px solid #576c8a}
.mk-sss details:not(.mobil):last-child{border-bottom:1px solid #576c8a}
.mk-sss details:not(.mobil)>summary{display:flex;align-items:center;justify-content:space-between;gap:1.714285714em;
  min-height:5.142857143em;padding:.857142857em 0;font-size:1em;line-height:1.428571429;font-weight:600;color:rgba(0,0,0,.9);
  list-style:none;cursor:pointer;text-wrap:balance}
.mk-sss details:not(.mobil)>summary::-webkit-details-marker{display:none}
.mk-sss details:not(.mobil)>summary::after{content:"";flex:none;font-size:1em;width:.857142857em;height:.857142857em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M11 13V24H13V13L24 13V11L13 11V0H11V11L0 11V13L11 13Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s ease-in-out}
.mk-sss details:not(.mobil)[open]>summary::after{content:"";transform:rotate(45deg)}
.mk-sss details:not(.mobil)>summary:hover{color:#000}
.mk-sss details:not(.mobil)>summary:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.mk-sss details:not(.mobil)>p{margin:0;max-width:none;padding:0 0 1.142857143em 1.142857143em;font-size:1em;line-height:1.714285714;color:rgba(0,0,0,.6)}
.mk-sss details::details-content{block-size:0;overflow-y:clip;
  transition:block-size .5s ease-in-out,content-visibility .5s ease-in-out allow-discrete}
.mk-sss details[open]::details-content{block-size:auto}
.mk-metin .mk-sss+p{margin-top:24px}
@media(prefers-reduced-motion:reduce){
  .mk-sss details::details-content,.mk-sss details:not(.mobil)>summary::after{transition:none}
}

/* ---- alt gezinme (K2): geri 16/24 M, 18/28 L; 32x32 oklar, araya 24px ---- */
.mk-gezinme{display:flex;align-items:center;justify-content:space-between;margin:1.5rem 0 2rem}
.mk-geri{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);font-size:1rem;line-height:1.5rem;font-weight:600;color:rgba(0,0,0,.6)}
.mk-geri:hover{color:rgba(0,0,0,.9);text-decoration:none}
@media(min-width:1024px){.mk-geri{font-size:18px;line-height:28px}}
.mk-oklar{display:flex;align-items:center;gap:1.5rem}
.mk-ok{position:relative;display:block;width:2rem;height:2rem;fill:rgba(0,0,0,.4)}
.mk-ok svg{display:block;width:100%;height:100%}
.mk-ok.sonraki svg{transform:rotate(180deg)}
a.mk-ok::before{content:"";position:absolute;inset:-6px}
a.mk-ok:hover{fill:rgba(0,0,0,.9)}
.mk-ok.pasif{fill:rgba(0,0,0,.26);cursor:not-allowed}

/* ---- A10 duyuru blogu (yalniz /nereden-alinir, K3'ten once) ---- */
main>section.mk-duyuru{padding:3.75rem 1.5rem;background:#fff}
@media(min-width:1024px){main>section.mk-duyuru{padding:48px 24px}}
.mk-duyuru-ic{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.mk-duyuru-ic{grid-template-columns:1fr 1fr;gap:48px;align-items:center}}
.mk-duyuru-res{order:-1;height:11.75rem;overflow:hidden;background:#f2f3f5}
@media(min-width:1024px){.mk-duyuru-res{order:0;height:376px}}
.mk-duyuru-res img{display:block;width:100%;height:100%;object-fit:cover}
.mk-duyuru h2{margin:0;font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgba(0,0,0,.9);letter-spacing:normal;text-wrap:balance}
.mk-duyuru p{margin:.75rem 0 0;max-width:none;font-size:.875rem;line-height:1.625;color:rgba(0,0,0,.6);text-wrap:pretty}
.mk-duyuru-git{display:inline-flex;align-items:center;min-height:max(1.5rem,24px);margin-top:1.5rem;font-size:.875rem;line-height:1.25rem;color:#0066ff}
.mk-duyuru-git:hover{color:#0066ff}
@media(min-width:1024px){
  .mk-duyuru h2{font-size:24px;line-height:32px}
  .mk-duyuru p{margin-top:24px}
  .mk-duyuru-git{font-size:16px;line-height:24px}
}

/* ---- K3 ilgili yazilar: #f2f3f5, ilk kart kolonun sol kenarindan baslar, saga tasar ---- */
main>section.mk-ilgili{padding:3.75rem 0;background:#f2f3f5;overflow:hidden}
@media(min-width:1024px){main>section.mk-ilgili{padding:96px 0}}
/* baslik satiri: dar ekranda baglanti basligi sikistirmaz, alt satira gecer ("Diger / kaynaklar" kirilmasin) */
.mk-ilgili-ust{max-width:calc(49.6875rem + 3rem);margin:0 auto 1.5rem;padding:0 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
@media(min-width:1024px){.mk-ilgili-ust{max-width:795px;margin-bottom:32px;padding:0}}
.mk-ilgili h2{flex:1 0 auto;max-width:100%;margin:0;font-size:1.5rem;line-height:2rem;font-weight:600;color:rgba(0,0,0,.85);letter-spacing:normal;text-wrap:balance}
@media(min-width:1024px){.mk-ilgili h2{font-size:30px;line-height:36px}}
.mk-tumu{flex:none;display:inline-flex;align-items:center;min-height:max(1.5rem,24px);gap:.25rem;font-size:.875rem;line-height:1.25rem;color:#2563eb}
.mk-tumu:hover{color:#2563eb}
@media(min-width:1024px){.mk-tumu{font-size:16px;line-height:24px}}

/* ray: Pudu swiper, aralik 16px; yerel kaydirma + surukleme. 1024 alti kart ray genisliginde (375'te 327px,
   Pudu M slayti) ve kok olcekle buyur; 640-1023'te 1,8 / 2,2 karta bolunmez: rem ile buyuyen kisa
   basliklar dar kartta tek kelimelik satirlara kiriliyordu. 1024 ve ustu 400px. */
.mk-ray{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:0 1.5rem;scroll-padding:0 1.5rem;scrollbar-width:none;-ms-overflow-style:none}
.mk-ray::-webkit-scrollbar{display:none}
.mk-ray.suruklen{scroll-snap-type:none;cursor:grabbing;user-select:none}
@media(min-width:1024px){.mk-ray{padding:0 24px 0 calc((100% - 795px) / 2);scroll-padding:0 24px 0 calc((100% - 795px) / 2)}}
.mk-kart{position:relative;flex:0 0 100%;min-width:0;display:flex;flex-direction:column;background:#fff;color:inherit;
  text-decoration:none;scroll-snap-align:start}
@media(min-width:1024px){.mk-kart{flex-basis:400px}}
.mk-kart:hover{text-decoration:none;color:inherit}
.mk-kart::after{content:"";position:absolute;left:0;bottom:0;width:0;height:4px;background:#0066ff;transition:width .3s}
.mk-kart:hover::after,.mk-kart:focus-visible::after{width:100%}
.mk-kart:focus-visible{outline:2px solid #0066ff;outline-offset:2px}
.mk-kart-res{flex:none;aspect-ratio:74/47;overflow:hidden;background:#e6e9ed}
.mk-kart-res img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.mk-kart-yazi{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:1rem;background:#fff}
.mk-kart .mk-kart-bas{margin:0;height:2.5rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:.875rem;line-height:1.25rem;font-weight:600;color:rgba(0,0,0,.85);letter-spacing:normal;text-wrap:balance}
/* meta satiri (A9): Pudu'da tarih 14px .6 + tur 14px pdblue, araya 20px. Tarih tutulmadigi icin yerinde
   okuma suresi (makale.mjs okumaSuresi) durur; baslik one cikar, tur etiketi ikincil kalir. */
.mk-kart-meta{display:flex;flex-wrap:wrap;column-gap:1.25rem;padding-top:2rem;font-size:.875rem;line-height:1.25rem}
.mk-kart-meta .mk-sure{color:rgba(0,0,0,.6)}
@media(min-width:1024px){.mk-kart-meta{column-gap:20px}}