@font-face{font-family:Clash;src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/f98be4842650.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Clash;src:url(/wp-content/plugins/koli-lazim-onizleme/varlik/f49f8bb2db96.woff2) format("woff2");font-weight:500;font-display:swap}
/* zemin varsayilan olarak beyaz; koyu bolumler kendi rengini ustune yaziyor.
   .S2.lite'a bel baglamiyoruz, o kural dusse bile sayfa beyaz kaliyor */
.S2{background-color:var(--beyaz);--AW:1724;container-type:inline-size;position:relative;overflow:hidden;
    font-family:Clash,Montserrat,system-ui,sans-serif;
    padding:calc(96*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW)) calc(110*100cqw/var(--AW))}
.S2.lite{background:var(--beyaz);color:var(--vurgu-uzeri)}
.S2.dark{background:var(--yzy-panel) center/100% 100% no-repeat;color:var(--mtn-1);background-image:url(/wp-content/plugins/koli-lazim-onizleme/varlik/e2216a7e9b73.gif)}
.S2 h2{margin:0;font-weight:var(--ag-baslik);line-height:1.10;text-transform:uppercase;
       font-size:var(--m1)}
.S2.dark h2{color:var(--green);text-align:center}
.S2 .lead{font-weight:var(--ag-ince);line-height:1.10;font-size:var(--m3);margin:0}
.S2.lite .head{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw}
.S2.lite .lead{width:calc(521*100cqw/var(--AW));text-align:right;margin-top:calc(8*100cqw/var(--AW))}
.S2.dark .lead{width:calc(911*100cqw/var(--AW));margin:calc(9*100cqw/var(--AW)) auto 0;
               text-align:center;color:var(--mtn-2)}
.row{display:grid;gap:calc(59.5*100cqw/var(--AW));margin-top:calc(78*100cqw/var(--AW))}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.r5{grid-template-columns:repeat(5,1fr)}
.r6{grid-template-columns:repeat(6,1fr)}
.card2{border:var(--cizgi) solid rgba(5,28,38,.55);padding:calc(34*100cqw/var(--AW));
       display:flex;flex-direction:column;gap:calc(7*100cqw/var(--AW));
       transition:border-color .3s,transform .3s;background:var(--beyaz)}
.card2:hover{border-color:var(--vurgu-uzeri);transform:translateY(-4px)}
.S2.dark .card2{border-color:rgba(97,206,112,.55);background:transparent;color:var(--mtn-1)}
.S2.dark .card2:hover{border-color:var(--green)}
.num{font-size:var(--m3);font-weight:var(--ag-ince);opacity:.55}
.card2 h3{margin:0;font-weight:var(--ag-baslik);line-height:1.14;text-transform:uppercase;
          font-size:var(--m3)}
.S2.dark .card2 h3{color:var(--green)}
.card2 p{margin:0;font-weight:var(--ag-ince);line-height:1.45;font-size:var(--m4);opacity:.8}
/* Gulbin'in dogal ikonlari DOLU form; kontur eklenmiyor.
   ("iconlari da kalinlik vermeden dogal hali ile kullanalim") */
.arw2{margin-top:auto;width:calc(20*100cqw/var(--AW));height:auto;fill:currentColor;stroke:none}
.stat{display:flex;align-items:baseline;gap:.4em}
.stat b{font-weight:var(--ag-ince);font-size:var(--m2)}
.qa{border-top:var(--cizgi) solid rgba(97,206,112,.35)}
.qa:last-child{border-bottom:var(--cizgi) solid rgba(97,206,112,.35)}
.qa button{width:100%;background:none;border:0;color:inherit;font:inherit;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:2cqw;text-align:left;
  padding:calc(30*100cqw/var(--AW)) 0;font-size:var(--m3);font-weight:var(--ag-ince)}
.qa i{flex:none;width:.7em;height:.7em;border-right:var(--cizgi) solid currentColor;
      border-bottom:var(--cizgi) solid currentColor;transform:rotate(45deg);transition:transform .3s}
.qa.open i{transform:rotate(-135deg)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.qa.open .ans{max-height:26em}
.qa .ans p{margin:0 0 calc(30*100cqw/var(--AW));font-weight:var(--ag-ince);line-height:1.55;
           font-size:var(--m4);opacity:.8;max-width:60cqw}
.set{display:grid;grid-template-columns:1.1fr .9fr;gap:calc(70*100cqw/var(--AW));
     align-items:center;margin-top:calc(90*100cqw/var(--AW))}
.set .box{border:var(--cizgi) solid rgba(97,206,112,.55);aspect-ratio:16/10;display:grid;place-items:center;
          background:rgba(255,255,255,.02)}
.set img{width:76%;height:auto}
.tag{align-self:flex-start;display:inline-block;border:var(--cizgi) solid var(--green);color:var(--green);padding:.35em 1em;
     font-size:var(--m4);text-transform:uppercase}
.rev{display:flex;flex-direction:column;gap:calc(18*100cqw/var(--AW));align-items:flex-start}
.stars{color:var(--green);font-size:var(--m3)}
@media(max-width:820px){
  .S2{padding:9vw 6vw 11vw}
  .r3,.r4,.r6{grid-template-columns:1fr}
  .S2.lite .head{flex-direction:column;gap:5vw}
  .S2.lite .lead{width:100%;text-align:left}
  .S2 h2{font-size:8.2vw}.S2 .lead{font-size:3.9vw}
  .card2 h3{font-size:4.6vw}.card2 p{font-size:3.4vw}.num{font-size:4.4vw}
  .qa button{font-size:4.4vw}.qa .ans p{font-size:3.6vw;max-width:none}
  .set{grid-template-columns:1fr}
  .stat b{font-size:9vw}
}

/* --- gercek urun kartlari (maket bolumlerin yerine) --- */
.pgrid{align-items:stretch}
.pcard{display:flex;flex-direction:column;gap:calc(6*100cqw/var(--AW));
  border:var(--cizgi) solid rgba(97,206,112,.55);padding:calc(26*100cqw/var(--AW));
  text-decoration:none;color:inherit;background:transparent;
  transition:border-color .3s,transform .3s}
.pcard:hover{border-color:var(--green);transform:translateY(-4px)}
.S2.lite .pcard{border-color:rgba(5,28,38,.45)}
.S2.lite .pcard:hover{border-color:var(--vurgu-uzeri)}
.pcard .ph{display:block;aspect-ratio:1;background:var(--beyaz);overflow:hidden;
  display:grid;place-items:center}
/* Gulbin, 21 Eylul: "gorseller cerceveli yani kuculttulmus degil,
   oldugu kare alana tam sigmis sekilde olacak... tum urun
   kartlarinda boyle olacak." Gorsel kareyi tam dolduruyor.
   Dosyalarin icindeki bos beyaz pay da kirpildi (gorsel_kirp.py). */
.pcard img{width:100%;height:100%;object-fit:contain}
.pcard h3{margin:0;font-weight:var(--ag-baslik);line-height:1.15;text-transform:uppercase;
  font-size:var(--m3);color:var(--green)}
.S2.lite .pcard h3{color:var(--vurgu-uzeri)}
.pcard p{margin:0;font-weight:var(--ag-ince);line-height:1.4;opacity:.78;
  font-size:var(--m4)}
.pcard .pr{font-weight:var(--ag-ince);font-size:var(--m3);opacity:1;line-height:1.1}
.pcard .num{font-size:var(--m4);opacity:.5;order:-1}
.pcard .arw2{margin-top:auto;width:calc(18*100cqw/var(--AW));height:auto;
  fill:currentColor;stroke:none}
.pmore{margin-top:calc(46*100cqw/var(--AW));text-align:center}
.pmore a{display:inline-block;border:var(--cizgi) solid var(--green);color:var(--green);text-decoration:none;
  padding:.62em 2.1em;text-transform:uppercase;font-weight:var(--ag-ince);
  font-size:var(--m4);transition:background .3s,color .3s}
.pmore a:hover{background:var(--green);color:var(--vurgu-uzeri)}
.S2.lite .pmore a{border-color:var(--vurgu-uzeri);color:var(--vurgu-uzeri)}
.S2.lite .pmore a:hover{background:var(--vurgu-uzeri);color:var(--beyaz)}
/* bolum alt seridi: rozetler sola yaslanir, buton saga (Gulbin, 6 Eylul) */
.sfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:calc(18*100cqw/var(--AW));margin-top:calc(46*100cqw/var(--AW))}
.sfoot .rband{margin-top:0;justify-content:flex-start;flex:1 1 auto}
.sfoot .pmore{margin-top:0;text-align:right;flex:0 0 auto}
@media(max-width:820px){
  .sfoot{flex-direction:column;align-items:flex-start}
  .sfoot .pmore{text-align:left}
}
/* bes sutunda kart ici yazilar biraz kuculsun */
.r5 .pcard h3{font-size:var(--m3)}
.r5 .pcard p{font-size:var(--m5)}
.r5 .pcard .pr{font-size:var(--m3)}
.r5 .pcard .pr.calc{font-size:var(--m5)}
/* stok kartinda fiyatin altindaki birim notu */
.pcard .birim{font-size:var(--m5);opacity:.7;line-height:1.3;
  margin-top:calc(-2*100cqw/var(--AW))}
/* --- Ne dediler: Pacdora duzeni, iki serit zit yonde akar (7 Eylul) --- */
/* Ne dediler zemini hero ile ayni gradient (Gulbin, 7 Eylul) */
.S2.dark.yorum{background:var(--siyah);background-image:var(--bgrad)}
.yorum{overflow:hidden}
.yorum h2{display:flex;align-items:center;justify-content:center;
  gap:calc(14*100cqw/var(--AW))}
.gikon{width:calc(34*100cqw/var(--AW));height:auto;flex:none;display:block}
.gpuan{display:flex;align-items:center;justify-content:center;gap:.55em;
  margin-top:calc(18*100cqw/var(--AW));color:var(--green)}
.gpuan .gikon{width:calc(26*100cqw/var(--AW))}
.gpuan b{font-size:var(--m2);font-weight:var(--ag-ince);line-height:1}
.gpuan .stars{font-size:var(--m4);letter-spacing:.08em}
.gpuan span:last-child{font-size:var(--m4);opacity:.75;color:var(--mtn-2)}

.ysr{overflow:hidden;margin-top:calc(30*100cqw/var(--AW));
  /* kenarlarda yumusak kaybolma */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--siyah) 7%,var(--siyah) 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,var(--siyah) 7%,var(--siyah) 93%,transparent 100%)}
.yak{display:flex;gap:calc(22*100cqw/var(--AW));width:max-content;
  animation:kay 64s linear infinite}
.ysr.saga .yak{animation-direction:reverse}
.ysr:hover .yak{animation-play-state:paused}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.yk{flex:0 0 calc(392*100cqw/var(--AW));width:calc(392*100cqw/var(--AW));
  margin:0;display:flex;flex-direction:column;gap:calc(12*100cqw/var(--AW));
  border:var(--cizgi) solid rgba(97,206,112,.3);background:rgba(255,255,255,.03);
  padding:calc(24*100cqw/var(--AW));transition:border-color .3s,background .3s}
.yk:hover{border-color:rgba(97,206,112,.7);background:rgba(255,255,255,.06)}
.yk .yy{color:var(--green);font-size:var(--m4);letter-spacing:.1em}
.yk p{margin:0;font-size:var(--m4);line-height:1.55;color:var(--mtn-2)}
.yk figcaption{display:flex;align-items:center;gap:calc(11*100cqw/var(--AW));
  margin-top:auto;padding-top:calc(6*100cqw/var(--AW))}
.ya{flex:none;width:calc(42*100cqw/var(--AW));height:calc(42*100cqw/var(--AW));
  border-radius:50%;overflow:hidden;background:var(--yzy-panel)}
.ya img{width:100%;height:100%;object-fit:cover;display:block}
.yb{display:flex;flex-direction:column;min-width:0}
.yb b{font-weight:var(--ag-ince);font-size:var(--m4);line-height:1.25;color:var(--beyaz);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yb span{font-size:var(--m5);opacity:.55}
.yk figcaption .gikon{margin-left:auto;width:calc(20*100cqw/var(--AW))}
@media(prefers-reduced-motion:reduce){ .yak{animation:none} }
@media(max-width:820px){
  .yorum h2{font-size:8.2vw;gap:2.6vw}.gikon{width:7vw}
  .gpuan b{font-size:11vw}.gpuan .gikon{width:6vw}
  .yk{flex-basis:76vw;width:76vw;padding:5vw;gap:3vw}
  .yk p{font-size:3.8vw}.yb b{font-size:3.9vw}.yb span{font-size:3.2vw}
  .ya{width:10vw;height:10vw}.yk figcaption .gikon{width:5vw}
}

/* --- Neler yaptik: dort kartlik akan serit, kartlar hafif capraz --- */
.isler{overflow:hidden}
.wsr{overflow:hidden;margin-top:calc(22*100cqw/var(--AW));
  padding:calc(50*100cqw/var(--AW)) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,var(--siyah) 6%,var(--siyah) 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,var(--siyah) 6%,var(--siyah) 94%,transparent 100%)}
.wak{display:flex;gap:calc(30*100cqw/var(--AW));width:max-content;
  animation:wkay 46s linear infinite;animation-direction:reverse}
.wsr:hover .wak{animation-play-state:paused}
@keyframes wkay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* dort kart bir satirda: kenar bosluklari 83,6x2, aralar 30x3 */
.wk{flex:0 0 calc(347*100cqw/var(--AW));width:calc(347*100cqw/var(--AW));
  margin:0;display:flex;flex-direction:column;gap:calc(10*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);padding:calc(16*100cqw/var(--AW));
  background:var(--beyaz);rotate:var(--e);
  animation:wksuz var(--sr,7s) ease-in-out var(--gec,0s) infinite;
  transition:rotate .4s cubic-bezier(.2,.8,.25,1),
             scale .4s cubic-bezier(.2,.8,.25,1),
             transform .4s cubic-bezier(.2,.8,.25,1)}
/* hero'daki urunlerle ayni ritim: yerinde hafifce suzuluyor */
@keyframes wksuz{0%,100%{translate:0 0}
  50%{translate:0 calc(-15*100cqw/var(--AW))}}
@media(prefers-reduced-motion:reduce){.wk{animation:none}}
.wk:hover{rotate:0deg;scale:1.06;animation-play-state:paused;
  transform:translateY(calc(-14*100cqw/var(--AW)));
  position:relative;z-index:2}
.wk .ph{display:block;aspect-ratio:3/4;background:var(--beyaz);overflow:hidden}
.wk img,.wk video{width:100%;height:100%;object-fit:cover;display:block}
.wk figcaption{display:flex;flex-direction:column;gap:calc(3*100cqw/var(--AW));
  margin-top:auto;padding-top:calc(6*100cqw/var(--AW))}
.wk figcaption b{font-weight:var(--ag-baslik);font-size:var(--m4);
  text-transform:uppercase;line-height:1.2}
.wk figcaption span{font-size:var(--m5);opacity:.72;line-height:1.35}
.isler .rband{margin-top:calc(34*100cqw/var(--AW));justify-content:flex-start}

/* --- Kurucu: Artboard 15 --- */
/* Tuval 1734 x 840. Fotograf artboarddaki
   olceginde (1064,96 birim), ustten konumlandirilip tasan alt kismi
   kadraj kesiyor. Kafa ve govde tasarimdaki buyuklukte kaliyor.
   Yan bosluk yok: metinler sayfanin kendi kenar bosluguna (84,1 birim =
   diger bolumlerdeki 83,6) oturuyor, boylece hizalar tutuyor. */
.krc{padding:0;background:var(--siyah);
  background-image:var(--bgrad);color:var(--mtn-1)}
/* artboard'da fotografin altinda kirpma maskesi var, kadraja dayaniyor */
.krcsahne{position:relative;width:100%;aspect-ratio:1734/840;overflow:hidden;
  container-type:inline-size;--AW:1734}
/* baslik sol ust, aciklama sol alt; sag sutun tek parca: giris paragrafi
   ve altinda iletisim blogu (Gulbin, 9 Eylul) */
.krcsahne>*{position:absolute}
/* .S2 h2 kuralindan daha ozel olmali, yoksa baslik kuculuyor */
.krcsahne .krcbas{left:calc(84.1*100cqw/var(--AW));top:calc(80*100cqw/var(--AW));
  margin:0;z-index:1;color:var(--green);font-weight:var(--ag-baslik);
  font-size:var(--m0);line-height:1.2;text-transform:uppercase}
/* Artboard 18: fotograf kendi silueti icine kirpiliyor, cevresine artboardin
   yesil konturu ve imza cizimi geliyor.
   14 Eylul 17:47'de Gulbin artboardi yeniledi ("yunusun fotograf kismi da
   boyle olsun"): kirpma silueti, kontur ve imza degisti, fotograf yeniden
   yerlestirildi. Tuval 747,73 x 1425,14 idi; ustteki bos zemin bolumun
   kendi gradyani oldugu icin gorunum kutusu icerigin basladigi yere
   kirpildi: viewBox "0 656,47 747,73 768,67". Oran 0,9727.
   Sahnenin 840 birimlik yuksekligine oturunca 817,1 genislik istiyor. */
.krcfoto{left:calc(572.4*100cqw/var(--AW));bottom:calc(-46*100cqw/var(--AW));
  width:calc(817.1*100cqw/var(--AW));height:calc(840*100cqw/var(--AW));
  z-index:2;pointer-events:none;overflow:visible}
.krcfoto .yimza{fill:var(--green)}
.krcfoto .yctr{fill:none;stroke:var(--green);stroke-width:var(--cizgi);
  stroke-miterlimit:10;vector-effect:non-scaling-stroke}
/* baslik disi her sey sitenin govde olcegi: 17 birim */
/* sag sutun tek parca akiyor: giris paragrafi, hemen altinda fabrika
   daveti, en altta iletisim butonlari */
.krcsag{right:calc(84.1*100cqw/var(--AW));top:calc(80*100cqw/var(--AW));
  width:calc(300*100cqw/var(--AW));z-index:3;text-align:right;color:var(--green)}
.krcgiris{margin:0;font-size:var(--m4);line-height:1.6}
.krcsol{left:calc(84.1*100cqw/var(--AW));bottom:calc(85*100cqw/var(--AW));
  width:calc(380*100cqw/var(--AW));z-index:3;color:var(--green)}
/* Gulbin: "fabrikada goruselim" basligiyla ayni kalinlik ve boy */
.krcetiket{display:block;font-weight:var(--ag-baslik);font-size:var(--m3);
  line-height:1.35;text-transform:uppercase}
.krcsol p{margin:calc(18*100cqw/var(--AW)) 0 0;
  font-size:var(--m4);line-height:1.6}
.krcbag{margin-top:calc(30*100cqw/var(--AW))}
.krcbag>p{margin:0 0 calc(16*100cqw/var(--AW));
  font-size:var(--m4);line-height:1.6}
.krcbtnlar{display:flex;justify-content:flex-end;align-items:center;
  gap:calc(10*100cqw/var(--AW))}
.krc .ktel{display:inline-block;border:var(--cizgi) solid var(--green);
  color:var(--green);text-decoration:none;padding:.6em 1em;white-space:nowrap;
  font-size:var(--m4);transition:background .3s,color .3s}
.krc .ktel:hover{background:var(--green);color:var(--mavi-koyu)}
.krc .kli{width:calc(42*100cqw/var(--AW));height:calc(42*100cqw/var(--AW));
  border:var(--cizgi) solid var(--green);display:grid;place-items:center;
  color:var(--green);transition:background .22s,color .22s}
.krc .kli:hover{background:var(--green);color:var(--mavi-koyu)}
.krc .kli svg{width:52%;height:52%}
.krc .kli svg path{fill:currentColor}
.krcfab{margin-top:calc(26*100cqw/var(--AW));
  display:flex;flex-direction:column;gap:calc(6*100cqw/var(--AW))}
.krcfab b{font-weight:var(--ag-baslik);font-size:var(--m3);text-transform:uppercase}
.krcfab span{font-size:var(--m4);line-height:1.45}
.krcfab a{color:var(--green);text-decoration:none;font-size:var(--m4);
  border-bottom:var(--cizgi) solid transparent;align-self:flex-end}
.krcfab a:hover{border-bottom-color:var(--green)}

/* 821-1440 arasinda okunurluk tabani govde yazisini buyutuyor; sabit tuval
   o boyda yetmiyordu, baslikla sol metin ve sag sutun ust uste biniyordu.
   Tuvali bu aralikta yukseltiyoruz, tabana dayali ogeler yerinde kaliyor. */
@media(min-width:821px) and (max-width:1440px){
  .krcsahne{aspect-ratio:1734/1080}
}

@media(max-width:820px){
  .krcsahne{aspect-ratio:auto;--AW:820;display:flex;flex-direction:column;
    gap:6vw;padding:8vw 6vw}
  .krcsahne>*{position:static}
  .krcbas{font-size:12vw}
  .krcfoto{width:100%;height:auto;aspect-ratio:747.73/768.67;order:-1}
  .krcsag,.krcsol{width:100%;text-align:left}
  .krcgiris,.krcsol p,.krcbag>p{font-size:3.9vw}
  .krcsag{position:static}.krcetiket{font-size:3.4vw}
  .krcbtnlar{justify-content:flex-start}
  .krcfab a{align-self:flex-start}
}

/* --- Harita --- */
.hkap{position:relative;display:block;margin-top:calc(40*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);overflow:hidden;
  aspect-ratio:16/6.4;text-decoration:none}
.hkap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.35) contrast(1.05)}
.hort{position:absolute;inset:0;z-index:2}
.hbilgi{position:absolute;left:calc(26*100cqw/var(--AW));bottom:calc(26*100cqw/var(--AW));
  z-index:3;background:var(--beyaz);border:var(--cizgi) solid var(--mavi-koyu);
  padding:calc(16*100cqw/var(--AW)) calc(20*100cqw/var(--AW));
  display:flex;flex-direction:column;gap:calc(4*100cqw/var(--AW));
  max-width:calc(430*100cqw/var(--AW))}
.hbilgi b{font-weight:var(--ag-baslik);font-size:var(--m3);text-transform:uppercase}
.hbilgi span{font-size:var(--m4);line-height:1.4}
.hac{color:var(--mavi-acik);margin-top:calc(4*100cqw/var(--AW))}
.hkap:hover .hbilgi{border-color:var(--mavi-acik)}

@media(max-width:820px){
  .wk{flex-basis:72vw;width:72vw;padding:4vw}
  .wk figcaption b{font-size:4vw}.wk figcaption span{font-size:3.2vw}
  .kgrid{grid-template-columns:1fr;gap:6vw}
  .kmetin p{font-size:3.9vw;max-width:none}.ketiket{font-size:3.4vw}
  .ktel{font-size:3.8vw}.kli{width:11vw;height:11vw}
  .hkap{aspect-ratio:4/4.4}
  .hbilgi{left:4vw;right:4vw;bottom:4vw;max-width:none;padding:4vw}
  .hbilgi b{font-size:4.6vw}.hbilgi span{font-size:3.5vw}
}
/* ---- footer: canli sitedeki duzen. Degisen iki sey: logo vektorel,
   arka plan tasarimin kendi gradienti (Gulbin, 7 Eylul 2026) ---- */
svg.ftsus{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;overflow:visible}
svg.ftsus path{fill:none;stroke:var(--green);stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  opacity:.55}
.ft{--AW:1724;container-type:inline-size;color:var(--beyaz);position:relative;overflow:hidden;
  background:var(--siyah);background-image:var(--bgrad);
  /* yan bosluk .ftin'de: alt bant tam kenardan kenara gitsin, altta bosluk yok */
  padding:calc(96*100cqw/var(--AW)) 0 0}
.ftin{display:grid;grid-template-columns:1.15fr 1fr 1fr .95fr;
  gap:calc(48*100cqw/var(--AW));align-items:start;position:relative;z-index:2;
  padding:0 calc(83.6*100cqw/var(--AW))}
.ft h3{margin:0 0 calc(24*100cqw/var(--AW));font-weight:var(--ag-baslik);color:var(--beyaz);
  font-size:var(--m2);line-height:1.08;text-transform:uppercase}
/* marka sembolunun h3'u metin degil, SVG tasiyor */
.ftmarka h3{text-transform:none}
/* marka sembolu: cerceve konturlu, katmanlar gradientli. Cerceve ustten acik
   cizilmis; footerin ust kenarina dayanmasi icin negatif ust bosluk. */
.ftmarka h3{margin-top:calc(-96*100cqw/var(--AW))}
.ftmarka h3 svg{width:calc(122*100cqw/var(--AW));height:auto;display:block;
  color:var(--green)}
.ftmarka .lm-cerceve polyline{fill:none;stroke:currentColor;
  stroke-width:var(--cizgi);vector-effect:non-scaling-stroke}
/* sembol: sag alt acik mavi -> ust yesil (Gulbin) */
.ftmarka .lm-sembol path,.ftmarka .lm-sembol polygon{fill:url(#lmg)}
.fttelif{margin:0 0 calc(20*100cqw/var(--AW));font-size:var(--m4);
  line-height:1.5;color:var(--green);max-width:calc(300*100cqw/var(--AW))}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:calc(11*100cqw/var(--AW))}
/* Gulbin, 11 Eylul: "koli lazim tum haklari saklidir yazisi disinda
   butun yazilar beyaz olsun." Olculdu: footerde 14 baglanti #cfe6dc idi,
   basliklar ve metinler zaten beyazdi, telif yesil. Kapsayici rengi de
   beyaza alindi ki miras alan her sey beyaz cikssin; yesil kalan tek yer
   .fttelif. Uzerine gelince yesile donmesi etkilesim isareti, duruyor. */
.ft li a{color:var(--beyaz);text-decoration:none;font-size:var(--m4);
  line-height:1.35;transition:color .22s}
.ft li a:hover{color:var(--green)}
/* sosyal: gercek marka isaretleri (dolgu), kare cerceve icinde, tam beyaz */
.ftsos{display:flex;gap:calc(9*100cqw/var(--AW));margin-top:calc(24*100cqw/var(--AW))}
.ftsos a{width:calc(38*100cqw/var(--AW));height:calc(38*100cqw/var(--AW));
  border:var(--cizgi) solid var(--beyaz);
  display:grid;place-items:center;color:var(--beyaz);
  transition:background .22s,color .22s,border-color .22s}
.ftsos a:hover{background:var(--green);border-color:var(--green);color:var(--mavi-koyu)}
.ftsos svg{width:52%;height:52%;display:block}
.ftsos svg path{fill:currentColor}
.ftiso{display:flex;gap:calc(10*100cqw/var(--AW));margin-top:calc(22*100cqw/var(--AW))}
.ftiso img{width:calc(56*100cqw/var(--AW));height:auto}
.ftmetin{margin:0 0 calc(16*100cqw/var(--AW));font-size:var(--m4);
  line-height:1.55;color:var(--beyaz)}
/* adres, telefonun hemen altina yapisiyordu: liste araligiyla ayni bosluk */
.ftbilgi + .ftmetin{margin-top:calc(11*100cqw/var(--AW))}
.ftmetin b{color:var(--green);font-weight:var(--ag-baslik);opacity:1}
.ftode{width:calc(196*100cqw/var(--AW));height:auto;display:block}
.ftetbis{width:calc(62*100cqw/var(--AW));height:auto;display:block;
  margin-top:calc(14*100cqw/var(--AW))}
.ftbilgi a{font-size:var(--m4)}
/* alt bant metin sutunlariyla ayni hizada baslar ve biter, altta bosluk yok */
.ftdev{position:relative;z-index:1;line-height:0;pointer-events:none;
  margin:calc(52*100cqw/var(--AW)) 0 0;
  padding:0 calc(83.6*100cqw/var(--AW))}
.ftdev svg{width:100%;height:auto;display:block;color:var(--green)}
.ftdev svg path,.ftdev svg polygon{fill:currentColor}
/* alt banttaki "lazim" cerceveli: dolgu yok, sitenin cizgi diliyle kontur */
.ftdev .lg-lazim path{fill:none;stroke:currentColor;
  stroke-width:var(--cizgi);vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
@media(max-width:820px){
  .ft{padding:11vw 0 0}
  .ftin{padding:0 6vw;grid-template-columns:1fr 1fr;gap:8vw}
  /* Artboard 2'de marka bloku tek sutun, sag sutunda Gizlilik var.
     Iki sutuna yayilinca sira bozuluyordu. */
  .ftmarka{grid-column:auto}
  .ftmarka h3{margin-top:-11vw}
  .ftmarka h3 svg{width:26vw}
  .ft h3{font-size:var(--f1);margin-bottom:var(--r2)}
  .ft li a{font-size:3.7vw}.ftmetin,.fttelif{font-size:3.5vw}
  .ftsos a{width:9vw;height:9vw}.ftiso img{width:13vw}
  .ftode{width:46vw}.ftetbis{width:15vw}
  .ftdev{margin:8vw 0 0;padding:0 6vw}
}
.S2.dark .lead{text-align:center}
@media(max-width:820px){
  .pgrid{grid-template-columns:1fr 1fr}
  .pcard h3{font-size:4.2vw}.pcard p{font-size:3.2vw}.pcard .pr{font-size:3.6vw}
}

/* rozetler ve hizalama */
.pcard .rzt{display:flex;flex-wrap:wrap;gap:.4em}
.pcard .rzt i{font-style:normal;border:var(--cizgi) solid rgba(97,206,112,.5);color:var(--green);
  padding:.24em .7em;font-size:var(--m5);text-transform:uppercase;line-height:1.5}
.S2.lite .pcard .rzt i{border-color:rgba(5,28,38,.3);color:var(--mavi-koyu)}
.pcard .pr.calc{opacity:.62;font-weight:var(--ag-ince);font-size:var(--m4);line-height:1.35}
.rband{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(12*100cqw/var(--AW));
  margin-top:calc(46*100cqw/var(--AW))}
.rband span{border:var(--cizgi) solid rgba(97,206,112,.45);color:var(--green);
  padding:.5em 1.15em;font-size:var(--m4);text-transform:uppercase;
  line-height:1.5}
.S2.lite .rband span{border-color:rgba(5,28,38,.28);color:var(--mavi-koyu)}
@media(max-width:820px){
  .pcard .rzt i,.rband span{font-size:3vw}
}


/* --- numarali katalog (Casa dergisi duzeni) --- */
/* .kat .head ek boslugu kaldirildi: .row zaten ust bosluk veriyordu,
   ikisi ust uste binince 190 birim oluyordu (Gulbin, 6 Eylul) */
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:calc(46*100cqw/var(--AW));row-gap:calc(78*100cqw/var(--AW))}
.kkart{position:relative;display:grid;grid-template-columns:auto 1fr;
  column-gap:calc(18*100cqw/var(--AW));align-items:start;
  text-decoration:none;color:inherit;padding-top:calc(14*100cqw/var(--AW));
  border-top:var(--cizgi) solid rgba(5,28,38,.22);transition:border-color .3s}
.kkart:hover{border-top-color:var(--vurgu-uzeri)}
.kno{grid-row:1/3;font-weight:var(--ag-ince);line-height:.9;color:var(--vurgu-uzeri);opacity:.28;
  font-size:var(--m2);font-variant-numeric:tabular-nums;
  transition:opacity .3s,color .3s}
.kkart:hover .kno{opacity:1;color:var(--mavi-koyu)}
.kgor{grid-column:2;display:grid;place-items:center;aspect-ratio:4/3;background:var(--beyaz);
  overflow:hidden}
/* Gulbin, 21 Eylul: gorsel kareyi tam doldursun. */
.kgor img{width:100%;height:100%;object-fit:contain;transition:transform .45s cubic-bezier(.2,.8,.25,1)}
.kkart:hover .kgor img{transform:scale(1.05)}
.kbil{grid-column:2;display:flex;flex-direction:column;gap:calc(3*100cqw/var(--AW));
  margin-top:calc(12*100cqw/var(--AW))}
.kbil b{font-weight:var(--ag-ince);text-transform:uppercase;line-height:1.2;
  font-size:var(--m3)}
.kolcu{font-weight:var(--ag-ince);opacity:.62;font-size:var(--m4);
  font-variant-numeric:tabular-nums}
.kfiyat{font-weight:var(--ag-ince);font-size:var(--m3);margin-top:calc(4*100cqw/var(--AW))}
@media(max-width:820px){
  .kgrid{grid-template-columns:1fr 1fr;row-gap:9vw}
  .kno{font-size:8vw}.kbil b{font-size:3.8vw}.kolcu{font-size:3vw}.kfiyat{font-size:4.6vw}
}

/* --- sektorler: dosya sekmesi duzeni, sayfanin kendi paletinde --- */
.sekt .lead{margin-bottom:calc(54*100cqw/var(--AW))}
.dosya{position:relative}
.dtabs{display:flex;flex-wrap:wrap;gap:calc(6*100cqw/var(--AW));align-items:flex-end;
  padding-left:calc(10*100cqw/var(--AW));position:relative;z-index:2}
.dtab{position:relative;background:rgba(97,206,112,.10);border:var(--cizgi) solid rgba(97,206,112,.32);
  border-bottom:0;cursor:pointer;font-family:inherit;font-weight:var(--ag-ince);text-transform:uppercase;
  color:var(--mtn-3);font-size:var(--m3);line-height:1.2;
  padding:calc(14*100cqw/var(--AW)) calc(26*100cqw/var(--AW)) calc(16*100cqw/var(--AW));
  border-radius:calc(7*100cqw/var(--AW)) calc(7*100cqw/var(--AW)) 0 0;
  margin-bottom:-1px;transition:background .25s,color .25s,transform .25s,border-color .25s}
.dtab:hover{background:rgba(97,206,112,.18);color:var(--mtn-2);transform:translateY(-2px)}
.dtab[aria-selected="true"]{background:var(--yzy-panel);color:var(--green);
  border-color:rgba(97,206,112,.55);transform:translateY(-3px)}
.dgovde{position:relative;z-index:1;background:var(--yzy-panel);color:var(--mtn-1);
  border:var(--cizgi) solid rgba(97,206,112,.32);
  border-radius:0 calc(9*100cqw/var(--AW)) calc(9*100cqw/var(--AW)) calc(9*100cqw/var(--AW));
  padding:calc(38*100cqw/var(--AW));box-shadow:0 34px 80px -46px var(--siyah)}
.dpanel{display:grid;grid-template-columns:1fr 1fr;gap:calc(44*100cqw/var(--AW));
  align-items:center;animation:dIn .45s cubic-bezier(.2,.8,.25,1)}
.dpanel[hidden]{display:none}
@keyframes dIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dph{display:grid;place-items:center;aspect-ratio:16/11;background:var(--beyaz);overflow:hidden}
/* Gulbin, 21 Eylul: gorsel kareyi tam doldursun. */
.dph img{width:100%;height:100%;object-fit:contain}
.dmetin{display:flex;flex-direction:column;gap:calc(5*100cqw/var(--AW))}
.dmetin h3{margin:0;font-weight:var(--ag-baslik);line-height:1.1;text-transform:uppercase;
  font-size:var(--m2);color:var(--green)}
.dalt{margin:0;font-weight:var(--ag-ince);opacity:.55;font-size:var(--m4);
  text-transform:uppercase}
.sekt .surun{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sekt .surun a{display:flex;align-items:center;gap:.5em;text-decoration:none;color:var(--mtn-2);
  font-weight:var(--ag-ince);font-size:var(--m3);padding:.3em 0;
  border-bottom:var(--cizgi) solid rgba(97,206,112,.18);transition:color .2s,padding-left .2s}
.sekt .surun a::after{content:"\2192";margin-left:auto;color:var(--green);opacity:.55}
.sekt .surun a:hover{color:var(--green);padding-left:.35em}
.sekt .shiz{display:flex;flex-wrap:wrap;gap:.42em;margin-top:calc(6*100cqw/var(--AW))}
.sekt .shiz i{font-style:normal;border:var(--cizgi) solid rgba(97,206,112,.42);color:var(--green);
  padding:.3em .8em;font-size:var(--m4);text-transform:uppercase;line-height:1.5}
@media(max-width:820px){
  .dtab{font-size:3.4vw;padding:2.4vw 3.4vw 2.6vw}
  .dpanel{grid-template-columns:1fr;gap:5vw}
  .dmetin h3{font-size:7vw}.sekt .surun a{font-size:4vw}.sekt .shiz i{font-size:3vw}
}

/* ERLY duzeni: rozet fotografin kosesinde */
.pcard .ph{position:relative}
/* blog gorselleri: oran ne olursa olsun kare gozuksun, tasan kirpilsin.
   Urun gorselleri contain kaliyor (kutu kesilmesin), blog cover. */
.blogkart .ph{aspect-ratio:1}
.blogkart img{width:100%;height:100%;object-fit:cover;object-position:center}
/* blog kartlari nefes alsin: urun kartinda 6 birimlik aralik yeterliydi,
   burada gorsel buyuk oldugu icin yazilar sikisiyordu (Gulbin, 7 Eylul) */
.blogkart{gap:calc(16*100cqw/var(--AW));padding:calc(22*100cqw/var(--AW))}
.blogkart .num{margin-bottom:calc(6*100cqw/var(--AW));opacity:.55;
  font-size:var(--m4)}
.blogkart .ph{margin-bottom:calc(8*100cqw/var(--AW))}
.blogkart h3{font-size:var(--m3);line-height:1.28}
.blogkart p{font-size:var(--m4);line-height:1.65;opacity:.72}
.blogkart .arw2{margin-top:calc(12*100cqw/var(--AW))}
/* uc kart arasi da biraz acilsin */
.blogsatir{gap:calc(78*100cqw/var(--AW))}
@media(max-width:820px){
  .blogkart{gap:3.4vw;padding:4.4vw}
  .blogkart h3{font-size:4.6vw}.blogkart p{font-size:3.5vw}
}
.pcard .rzt{position:absolute;top:calc(8*100cqw/var(--AW));left:calc(8*100cqw/var(--AW));
  right:calc(8*100cqw/var(--AW));display:flex;justify-content:space-between;
  pointer-events:none;z-index:2}
.pcard .rzt i{background:rgba(255,255,255,.9);border-color:rgba(13,104,133,.4);
  backdrop-filter:blur(4px)}
.pcard .rzt i:only-child{margin-right:auto}

/* --- kendi olcunu tasarla: butun yazi ve cerceveler koyu mavi (baslik rengi);
       secilince kart hafif buyur ve yukari kayar, golge yok --- */
.S2.lite{--mavi:var(--mavi-koyu)}
.S2.lite h2,.S2.lite .lead{color:var(--mavi)}
.S2.lite .pcard{border-color:var(--mavi);
  transition:transform .32s cubic-bezier(.2,.8,.25,1),border-color .25s}
.S2.lite .pcard h3,.S2.lite .pcard p,.S2.lite .pcard .pr,.S2.lite .pcard .num{color:var(--mavi)}
.S2.lite .pcard .arw2{fill:var(--mavi)}
.S2.lite .pcard:hover,.S2.lite .pcard:focus-visible{
  transform:translateY(-10px) scale(1.035);box-shadow:none}
.S2.lite .rband span{border-color:var(--mavi);color:var(--mavi);
  font-size:var(--m4);padding:.55em 1.3em;
  transition:background .25s,color .25s}
.S2.lite .rband span:hover{background:var(--mavi);color:var(--beyaz)}

/* --- Blog kartlari: urun kartiyla AYNI serit duzeni ---
   Gulbin, 14 Eylul: "blog kartlari da urun kartlari tarzinda olsun mu?
   cok bos kaldi." ve ardindan "blog kartlari da degismemis."
   Duzen urun kartindan birebir aliniyor: ust seritte kategori, ortada
   gorsel, altinda baslik ve ozet, en altta "Yazıyı oku" + ok. Ayirici
   cizgiler kartin kendi kenar renginden miras (border-color:inherit),
   ayri renk tanimlanmadi. Olculer de urun kartiyla ayni: masaustunde
   17 / 8 birim ic dolgu, mobilde --r2 / --r1. */
.blogsatir{margin-top:calc(46*100cqw/var(--AW))}
.pcard.blogkart{position:relative;
  border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  color:var(--mavi-koyu);text-decoration:none;overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.25,1),border-color .25s}
.pcard.blogkart:hover{transform:translateY(-10px) scale(1.035);
  border-color:var(--green)}
.pcard.blogkart::after{content:none}
@media(min-width:821px){
  .pcard.blogkart{--ks:calc(17*100cqw/var(--AW));--ks1:calc(8*100cqw/var(--AW));
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "ph ph"
      "ad ad"
      "ac ac"
      "ok ok";
    align-items:center;gap:0;padding:0;text-align:left}
  /* Gulbin daha once "bloglarin ustundeki kategoriyi istemiyorum" demisti;
     urun kartinin ust seridi burada yok, kart dogrudan gorselle basliyor. */
  .pcard.blogkart>.num{display:none}
  /* .pcard .ph'nin kendi alt kenar boslugu var (olculdu: 5,7 px) ve
     kutu ile baslik arasinda cizgisiz bir aralik birakiyordu; sifirlandi. */
  .pcard.blogkart>.ph{grid-area:ph;display:block;width:100%;aspect-ratio:1;
    overflow:hidden;position:relative;inset:auto;background:var(--beyaz);
    margin:0;
    border-bottom:var(--cizgi) solid;border-color:inherit}
  .pcard.blogkart>h3{grid-area:ad;margin:0;
    padding:var(--ks) var(--ks) var(--ks1);
    font-weight:var(--ag-baslik);color:var(--mavi-koyu);
    line-height:1.15;font-size:var(--m3);text-transform:uppercase;
    height:calc(2 * 1.15em + var(--ks) + var(--ks1));
    overflow:hidden;display:flex;align-items:center}
  .pcard.blogkart>p{grid-area:ac;margin:0;padding:0 var(--ks) var(--ks);
    color:rgba(2,31,54,.72);font-size:var(--m4);line-height:1.4;
    border-bottom:var(--cizgi) solid;border-color:inherit;
    display:flex;align-items:center;overflow:hidden;
    line-height:1.4;max-height:calc(2 * 1.4em)}
  /* Gulbin: "yazıyı oku alani daha kisa olsun." Urun kartinin fiyat
     seridi 68 birim, cunku "Olcuye gore aninda hesaplanir" iki satira
     kiriliyor. Blogda tek kisa satir var; taban yukseklik kalkti, serit
     kendi ic dolgusu kadar. */
  .pcard.blogkart>.oku{grid-area:ok;display:flex;align-items:center;
    justify-content:space-between;gap:var(--ks1);
    padding:var(--ks);margin:0}
  .pcard.blogkart>.oku b{font-weight:var(--ag-ince);font-size:var(--m4)}
}
.pcard.blogkart .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.pcard.blogkart:hover .ph img{transform:scale(1.04)}
.pcard.blogkart .oku .arw2{display:block;flex:0 0 auto;margin:0;
  width:calc(18*100cqw/var(--AW));height:auto;
  fill:var(--mavi-koyu);stroke:none;
  transition:transform .32s cubic-bezier(.2,.8,.25,1),fill .3s}
.pcard.blogkart:hover .oku .arw2{transform:translate(14%,14%);fill:var(--green)}
@media(max-width:820px){
  .pcard.blogkart{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "ph ph"
      "ad ad"
      "ac ac"
      "ok ok";
    align-items:center;gap:0!important;padding:0!important;
    aspect-ratio:auto!important;text-align:left}
  .pcard.blogkart>.num{display:none!important}
  .pcard.blogkart>.ph{grid-area:ph;aspect-ratio:1;margin:0!important;
    border-bottom:var(--cizgi) solid;border-color:inherit}
  .pcard.blogkart>h3{grid-area:ad;padding:var(--r2) var(--r2) var(--r1);
    margin:0;font-size:var(--f3);line-height:1.15;
    height:calc(2 * 1.15em + var(--r2) + var(--r1));
    overflow:hidden;display:flex;align-items:center;text-align:left}
  .pcard.blogkart>p{grid-area:ac;padding:0 var(--r2) var(--r2);margin:0;
    font-size:var(--f4);line-height:1.45;
    border-bottom:var(--cizgi) solid;border-color:inherit;
    display:flex!important;align-items:center;overflow:hidden;
    -webkit-line-clamp:none;text-align:left;
    height:calc(2 * 1.45em + var(--r2) + var(--cizgi))}
  .pcard.blogkart>.oku{grid-area:ok;display:flex;align-items:center;
    justify-content:space-between;gap:var(--r1);padding:var(--r2);margin:0}
  .pcard.blogkart>.oku b{font-weight:var(--ag-ince);font-size:var(--f4)}
  .pcard.blogkart .oku .arw2{width:var(--ik-s)!important;height:auto!important}
  .pcard.blogkart:hover{transform:none}
}

/* --- Kart satirlari: rozet ve hareket --- */
/* Rozet gorselin ust sag kosesinde; metni bolumun kendi rozet seridinden
   geliyor, yani zaten dogrulanmis bir iddia. */
.pcard{position:relative}
.krz{position:absolute;z-index:3;
  top:calc(14*100cqw/var(--AW));right:calc(14*100cqw/var(--AW));
  border:var(--cizgi) solid var(--mavi-koyu);background:var(--beyaz);
  padding:calc(5*100cqw/var(--AW)) calc(10*100cqw/var(--AW));
  font-size:max(10.5px,var(--m5));line-height:1.2;
  text-transform:uppercase;color:var(--mavi-koyu);
  transition:background .3s,color .3s,border-color .3s}
.pcard:hover .krz{background:var(--green);border-color:var(--green);color:var(--mavi-koyu)}
/* karta tiklanabilirlik hissi: cerceve yesile doner, gorsel hafif buyur,
   ok kosesine dogru kayar */
.pcard{transition:transform .32s cubic-bezier(.2,.8,.25,1),border-color .25s}
.pcard .ph{overflow:hidden}
.pcard .ph img{transition:transform .6s cubic-bezier(.2,.8,.25,1)}
/* giris slider'daki hareketin aynisi: kart hafif buyur ve yukari cikar */
/* Kalkis 10 -> 6 px, buyume %3,5 -> %2: kart kendi kutusunun disina daha
   az tasiyor, kayan seritte ust kenari kesilmiyor. */
.pcard:hover,.pcard:focus-visible{transform:translateY(-6px) scale(1.02);
  border-color:var(--green);box-shadow:none}
.pcard:hover .ph img{transform:scale(1.06)}
/* Ok dolu form: renk stroke'tan fill'e gecti. */
.pcard .arw2{transition:transform .38s cubic-bezier(.2,.8,.25,1),fill .3s}
.pcard:hover .arw2{transform:translate(18%,-18%);fill:var(--green)}
.pcard:hover .pr{color:var(--green)}
.pcard .pr{transition:color .3s}

/* Goruse girerken sirayla belirme. Varsayilan gorunur; yalnizca betik
   calisirsa gizlenip animasyona giriyor, boylece JS yoksa icerik duruyor. */
/* Belirme translate ozelligini kullaniyor; transform hover'a kaliyor.
   Ikisi ayni ozelligi paylasinca .gor kurali hover'i eziyordu. */
html.js .row.giris .pcard{opacity:0;translate:0 calc(20*100cqw/var(--AW))}
html.js .row.giris .pcard.gor{opacity:1;translate:0 0;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--kg,0s),
             translate .7s cubic-bezier(.16,1,.3,1) var(--kg,0s)}
@media(prefers-reduced-motion:reduce){
  html.js .row.giris .pcard{opacity:1;translate:none}}
@media(max-width:820px){
  .krz{top:8px;right:8px;padding:var(--r0) var(--r1);font-size:var(--f5)}
  .pcard:hover{transform:none}
}

/* ---- MASAUSTU URUN KARTI: MOBILDEKI DUZENIN AYNISI ----
   Gulbin, 14 Eylul: "masaustundeki urun kartlarini da duzenle mobildeki
   gibi." Mobilde kurulan serit duzeni birebir buraya tasindi: ust seritte
   numara ve durum rozeti, ortada gorsel, altinda baslik ve aciklama, en
   altta fiyat / birim / ok. Ayirici cizgiler kartin kendi kenar renginden
   miras aliniyor, ayri renk tanimlanmadi.

   Olculer mobilden orantiyla cevrildi, kafadan atilmadi: mobilde kart
   285 px genis ve serit dolgusu 16 px, yani %5,6. Masaustunde kart
   tuvalin 268 biriminde, %5,6'si 15-17 birim. Kucuk dolgu (8 px / %2,8)
   ayni yolla 8 birim.

   Bu kural mobil.css'ten ONCE geliyor ama mobil kurallar
   @media(max-width:820px) icinde, o yuzden carpismiyorlar. Yine de
   masaustune sinirlandi ki iki taraf birbirine karismasin. */
@media(min-width:821px){
  .pcard:not(.blogkart){
    --ks:calc(17*100cqw/var(--AW));   /* serit ic dolgusu */
    --ks1:calc(8*100cqw/var(--AW));   /* baslik ile aciklama arasi */
    display:grid;
    /* Fiyat sutunu auto: icerigi kadar yer alir ama daralabilir. Ortadaki
       1fr olmasa ok sutunu sifira iniyor ve ok kartin disina tasiyor. */
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "no no rz"
      "ph ph ph"
      "ad ad ad"
      "ac ac ac"
      "fi bi ok";
    /* Bos alan aciklama satirinda toplansin: fiyat seridi hep dipte,
       baslik hep gorselin hemen altinda. */
    grid-template-rows:auto auto auto 1fr auto;
    align-items:center;
    gap:0;
    padding:0;
    overflow:hidden;
    text-align:left}
  .pcard:not(.blogkart)>.num{grid-area:no}
  .pcard:not(.blogkart)>.krz{grid-area:rz;position:static}
  .pcard:not(.blogkart)>.ph{grid-area:ph}
  .pcard:not(.blogkart)>h3{grid-area:ad}
  .pcard:not(.blogkart)>p{grid-area:ac}
  .pcard:not(.blogkart)>.pr{grid-area:fi}
  .pcard:not(.blogkart)>.birim{grid-area:bi}
  .pcard:not(.blogkart)>.arw2{grid-area:ok}
  /* Ust serit: numara solda, rozet sagda; ikisi de kendi cercevesiz. */
  .pcard:not(.blogkart)>.num,
  .pcard:not(.blogkart)>.krz{
    align-self:stretch;display:flex;align-items:center;
    border:0;background:none;padding:var(--ks);margin:0}
  .pcard:not(.blogkart)>.krz{justify-content:flex-end;gap:var(--ks1)}
  /* Durum isigi: stok yesil, ozel olcu mavi, ikisi de nefes alir gibi
     yanip soner. Kare, sitenin kose diliyle ayni. */
  .pcard:not(.blogkart)>.krz::before{content:"";flex:0 0 auto;
    width:calc(7*100cqw/var(--AW));height:calc(7*100cqw/var(--AW));
    border-radius:0;background:var(--mavi-acik)}
  .pcard:not(.blogkart)>.krz-ozel::before{background:var(--mavi-acik);
    animation:krzyan 2.4s ease-in-out infinite}
  .pcard:not(.blogkart)>.krz-stok::before{background:var(--green);
    animation:krzyan 2.4s ease-in-out infinite}
  .pcard:hover .krz{background:none;border:0;color:inherit}
  /* Cizgiler tam olsun, yarida kesilmesin: ayiricilar tek parca ogelere
     veriliyor, serit hucrelerine degil. */
  .pcard:not(.blogkart)>.ph{border-top:var(--cizgi) solid;
    border-bottom:var(--cizgi) solid;border-color:inherit}
  /* Baslik tam iki satir, aciklama tam iki satir: satir sayisi degisince
     alttaki cizgiler kartlar arasinda kaymasin. Icerik kutunun icinde
     dikeyde ortali, boylece tek satirlik baslikta altta bosluk kalmiyor. */
  .pcard:not(.blogkart)>h3{padding:var(--ks) var(--ks) var(--ks1);margin:0;
    align-self:start;display:block;box-sizing:content-box;
    line-height:1.15;max-height:calc(2 * 1.15em);overflow:hidden}
  .pcard:not(.blogkart)>p{padding:0 var(--ks) var(--ks);margin:0;
    border-bottom:0;
    align-self:start;display:block;box-sizing:content-box;overflow:hidden;
    /* box-sizing:border-box oldugu icin dolgu yukseklige dahil,
       iki satirlik yer ayrica ekleniyor. */
    /* Cizgi kalinligi yuksege ayrica ekleniyor: box-sizing:border-box
       oldugu icin alt cizgi ic alandan calip ikinci satirin uzerine
       biniyordu ("cizginin ustune cizgi cekiyor"). */
    height:calc(2 * 1.4em + var(--ks) + var(--cizgi))}
  /* Fiyat seridi de sabit: "Olcuye gore aninda hesaplanir" iki satira
     kiriliyor, "8 TL" tek satir; serbest birakilsa kartlar farkli boyda
     olurdu. */
  .pcard:not(.blogkart)>.pr,
  .pcard:not(.blogkart)>.birim{align-self:stretch;display:flex;
    align-items:center;padding:var(--ks) 0;margin:0;
    min-height:calc(68*100cqw/var(--AW))}
  /* Ayirici cizgi fiyat seridinin ust kenari.
     Gulbin, 22 Eylul: "kartlari bozmussun kesik kesik." Cizgiyi uc
     ayri hucreye (fiyat, birim, ok) vermistim; hucreler sutunlarini
     tam doldurmadigi ve okun yan boslugu oldugu icin cizgi parca
     parca cikiyordu. Artik TEK oge: kartin kendi ::after'i, fiyat
     satirinin tamamini kat ediyor, yuksekligi sifir oldugu icin
     yerlesimi etkilemiyor. */
  .pcard:not(.blogkart)::after{content:"";grid-row:5;grid-column:1/-1;
    align-self:start;height:0;border-top:var(--cizgi) solid;
    border-color:inherit;pointer-events:none}
  .pcard:not(.blogkart)>.pr{padding-left:var(--ks);font-size:var(--m2);
    white-space:nowrap}
  .pcard:not(.blogkart)>.birim{padding-left:var(--ks1);font-size:var(--m5);
    white-space:nowrap;margin-top:0}
  /* "Olcuye gore aninda hesaplanir" fiyat degil cumle: sarmali, yoksa
     nowrap sutunu sisirip oku disari itiyor. */
  .pcard:not(.blogkart)>.pr.calc{white-space:normal;font-size:var(--m5)}
  .pcard:not(.blogkart)>.num{font-size:var(--m2);opacity:1}
  .pcard:not(.blogkart)>.krz{white-space:nowrap;font-size:var(--m5)}
  .pcard:not(.blogkart)>.arw2{margin:0 var(--ks) 0 var(--ks1);
    align-self:center;justify-self:end}
  /* Kart ici dolgu kalkinca gorselin kendi ic boslugu de gerekmiyor. */
  .pcard:not(.blogkart)>.ph{margin:0}
}
@media(min-width:821px) and (prefers-reduced-motion:reduce){
  .pcard:not(.blogkart)>.krz-stok::before,
  .pcard:not(.blogkart)>.krz-ozel::before{animation:none}
}

/* --- Hizmet bantlari --- */
.tbant{--AW:1724;container-type:inline-size;position:relative;overflow:hidden;
  background:var(--siyah);background-image:var(--bgrad);color:var(--green);
  font-family:Clash,Montserrat,system-ui,sans-serif;
  padding:calc(84*100cqw/var(--AW)) calc(83.6*100cqw/var(--AW))}
.tic{display:grid;grid-template-columns:calc(590*100cqw/var(--AW)) 1fr;
  gap:calc(64*100cqw/var(--AW));align-items:center}
.tbant.ters .tic{grid-template-columns:1fr calc(590*100cqw/var(--AW))}
.tbant.ters .tmetin{order:2}
.tbant.ters .tgorsel{order:1}
.tic>*{min-width:0}
.tbas{margin:0;font-weight:var(--ag-baslik);font-size:var(--m1);
  line-height:1.04;white-space:pre-line;text-transform:uppercase;color:var(--green)}
.talt{margin:calc(20*100cqw/var(--AW)) 0 0;font-size:var(--m4);
  line-height:1.6;color:var(--mtn-2);max-width:calc(500*100cqw/var(--AW))}
.tbtn{display:inline-flex;align-items:center;gap:.7em;
  margin-top:calc(32*100cqw/var(--AW));
  border:var(--cizgi) solid var(--green);color:var(--green);text-decoration:none;
  padding:.85em 1.8em;font-size:var(--m4);text-transform:uppercase;
  transition:background .3s,color .3s}
.tbtn svg{width:calc(15*100cqw/var(--AW));height:auto;fill:none;
  stroke:currentColor;stroke-width:var(--cizgi);vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round;
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tbtn:hover{background:var(--green);color:var(--mavi-koyu)}
.tbtn:hover svg{transform:translate(14%,-14%)}

/* --- sahne: her bandda ayni isik dili, farkli kompozisyon --- */
.tgorsel{position:relative;display:block}
.tsahne{position:relative;display:block}
.tsahne::after{content:"";position:absolute;left:50%;top:48%;
  width:96%;height:96%;transform:translate(-50%,-50%);border-radius:50%;
  pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,
    rgba(255,255,255,.24) 0%, rgba(151,205,168,.10) 46%, rgba(97,206,112,0) 74%);
  filter:blur(calc(46*100cqw/var(--AW)))}
.tsahne img{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 calc(28*100cqw/var(--AW)) calc(26*100cqw/var(--AW)) rgba(0,0,0,.62))}
.tcer{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  overflow:visible;pointer-events:none}
.tcer path{fill:none;stroke:var(--green);stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}

/* 01 — stant dikey, bandin kenarlarini kesiyor */
.tstand{padding-block:0}
.tstand .tmetin{padding-block:calc(84*100cqw/var(--AW))}
.tstand .tuzun{margin-block:calc(-40*100cqw/var(--AW))}

/* 02 — cerceve goruse girince kendini ciziyor */
.tciz .tcer path{stroke-dasharray:var(--u,4000);stroke-dashoffset:var(--u,4000)}
.tbant.gor .tciz .tcer path{
  animation:tciz 1.6s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes tciz{to{stroke-dashoffset:0}}

/* 03 — ayni kutu uc kez, geriye dogru: adet */
.tyigin{display:block;padding-bottom:6%}
.tyigin img{position:absolute;left:0;top:0;width:78%}
.tyigin .y1{position:relative;width:78%;margin-left:22%}
.tyigin .y2{left:11%;top:5%;width:74%;opacity:.5;filter:none}
.tyigin .y3{left:0;top:10%;width:70%;opacity:.24;filter:none}

/* tek yetkili an: urun goruse girince yukselip isik aliyor */
html.js .tbant .tsahne{opacity:0;transform:translateY(calc(26*100cqw/var(--AW)))}
html.js .tbant.gor .tsahne{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1)}
html.js .tbant .tsahne::after{opacity:0}
html.js .tbant.gor .tsahne::after{opacity:1;transition:opacity 1s ease .25s}
@media(prefers-reduced-motion:reduce){
  html.js .tbant .tsahne{opacity:1;transform:none}
  .tbant.gor .tciz .tcer path{animation:none;stroke-dashoffset:0}}

@media(max-width:820px){
  .tbant,.tstand{padding:var(--r32) var(--yan) 42px}
  .tstand .tmetin{padding-block:0}
  .tstand .tuzun{margin-block:0}
  .tic,.tbant.ters .tic{grid-template-columns:1fr;gap:var(--yan)}
  .tbant.ters .tmetin,.tbant.ters .tgorsel{order:initial}
  .tbas{font-size:var(--f1);line-height:1.08}
  .talt{font-size:var(--f5);margin-top:var(--r12);max-width:none}
  .tbtn{font-size:var(--f5);margin-top:var(--yan);padding:var(--r2) var(--yan);justify-content:center}
  .tbtn svg{width:13px}
  .tsahne{max-width:78%;margin:0 auto}
  .tyigin{max-width:92%}
}

/* --- Speedy Stand · Artboard 17 --- */
.sstand{--AW:1734;container-type:inline-size;position:relative;overflow:hidden;
  background:var(--siyah);background-image:var(--bgrad);color:var(--green);
  font-family:Clash,Montserrat,system-ui,sans-serif}
.sssahne{position:relative;width:100%;aspect-ratio:1734/1312.13}
.sssahne>*,.sssahne .ssbin>*,.sssahne .ssrozet>*,
.sssahne .ssrkay>*,.sssahne .ssrkopya>*{position:absolute;margin:0}
/* .ssrozet de .ssbin gibi masaustunde kutu uretmiyor; maddeler yine
   sahnenin kendi koordinatinda duruyor. Mobilde tek satirlik serit. */
.ssrozet,.ssrkay{display:contents}
/* Serit ikinci bir kopya tasiyor; masaustunde gerekmiyor, gizli. */
.ssrkopya{display:none}
/* .ssbin masaustunde kutu uretmiyor, cocuklari yine .sssahne'ye gore
   konumlaniyor; masaustu yerlesimi degismiyor. Mobilde urun sahnesi olup
   klip kutularini urunun uzerine tasiyor. */
.ssbin{display:contents}
.sscizgi{inset:0;width:100%;height:100%;pointer-events:none}
.sscizgi path,.sscizgi rect{fill:none;stroke:var(--green);
  stroke-width:var(--cizgi);vector-effect:non-scaling-stroke;
  stroke-miterlimit:10;opacity:.8}
.sskavis{z-index:4}
/* stand ve konturu tek kapsayicida: tek animasyon ikisini birlikte
   tasiyor, boylece cerceve kutudan ayri dusmuyor */
.ssgrup{inset:0;z-index:1}
.ssgrup>*{position:absolute;margin:0}
.sskontur{inset:0;width:100%;height:100%}
/* Diger bolumlerin basligiyla ayni buyuklukte olsun diye olcek duzeltmesi:
   .S2 kapsayicisinin yan bosluklari cqw tabanini %9,7 daraltiyor, bu bolum
   ise tam genislikte. 67,3 x 0,903 = 61,13 birim ayni pikseli veriyor. */
.ssbas{left:calc(84.12*100cqw/var(--AW));top:calc(74.2*100cqw/var(--AW));
  z-index:2;font-weight:var(--ag-baslik);font-size:calc(var(--m1)*0.903);
  line-height:1.2;text-transform:uppercase;white-space:pre-line}
.ssgiris{right:calc(84.12*100cqw/var(--AW));top:calc(85*100cqw/var(--AW));
  width:calc(408*100cqw/var(--AW));z-index:2;text-align:right;
  font-weight:var(--ag-ince);line-height:1.375;
  font-size:max(14px,var(--m3))}
.sskucuk{z-index:2;white-space:pre-line;line-height:1.2;text-transform:uppercase;
  font-weight:var(--ag-ince);font-size:max(11px,var(--m4))}
.ssnot{right:calc(1267*100cqw/var(--AW));top:calc(326*100cqw/var(--AW));
  width:calc(230*100cqw/var(--AW));text-align:right}
.ssoz{width:calc(340*100cqw/var(--AW))}
.ssoz.sol{left:calc(84.12*100cqw/var(--AW))}
.ssoz.sag{right:calc(84.12*100cqw/var(--AW));text-align:right}
.ssurun{left:calc(480.92*100cqw/var(--AW));top:calc(27.23*100cqw/var(--AW));
  width:calc(720*100cqw/var(--AW));rotate:-4.08deg;transform-origin:0 0}
.ssurunm{display:none}
/* giris slider'in hareketi: goruse girince asagidan gelip yerine oturuyor,
   sonra ayni salinima basliyor */
@keyframes sssalin{0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}}
html.js .ssgrup,html.js .sskare{opacity:0;translate:0 44px}
html.js .ssgrup.gor,html.js .sskare.gor{opacity:1;translate:0 0;
  transition:opacity 1.05s ease var(--gg,0s),
             translate 1.05s cubic-bezier(.2,.8,.25,1) var(--gg,0s)}
.ssgrup.gor{animation:sssalin 7s ease-in-out 1.1s infinite}
.sskare.k1.gor{animation:sssalin 6.2s ease-in-out 1.5s infinite}
.sskare.k2.gor{animation:sssalin 7.6s ease-in-out 1.3s infinite}
@media(prefers-reduced-motion:reduce){
  html.js .ssgrup,html.js .sskare{opacity:1;translate:none}
  .ssgrup.gor,.sskare.gor{animation:none}}
.ssurun img,.ssurunm img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 calc(26*100cqw/var(--AW)) calc(24*100cqw/var(--AW))
         rgba(0,0,0,.55))}
.sskare{z-index:8;width:calc(182.45*100cqw/var(--AW));aspect-ratio:1;
  box-sizing:border-box;padding:calc(8.71*100cqw/var(--AW));overflow:hidden;
  border:var(--cizgi) solid var(--green)}
.sskare img,.sskare video{width:100%;height:100%;object-fit:cover;display:block}
.sskare.k1{left:calc(609.02*100cqw/var(--AW));top:calc(377.2*100cqw/var(--AW))}
.sskare.k2{left:calc(981.82*100cqw/var(--AW));top:calc(240.95*100cqw/var(--AW))}
/* klip hucreleri: sifira sifir, sahnenin iki yanina ve tabanina dayali */
.ssh{z-index:3;width:calc(578.06*100cqw/var(--AW));
  top:calc(701.14*100cqw/var(--AW));bottom:0}
.ssh.h1{left:0}
.ssh.h2{left:calc(578.06*100cqw/var(--AW))}
.ssh.h3{left:calc(1156.12*100cqw/var(--AW))}
.ssh>*{position:absolute;left:calc(84.12*100cqw/var(--AW));margin:0}
.ssgif{inset:0;left:0;overflow:hidden;z-index:0}
.ssgif video,.ssgif img{width:100%;height:100%;object-fit:cover;display:block}
/* artboardin kendi gecisi: ustte %60 siyah, altta saydam */
.ssgif::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.ssno{top:calc(76*100cqw/var(--AW));line-height:1;font-weight:var(--ag-ince);z-index:1;
  font-size:var(--m2)}
.sset{top:calc(122.1*100cqw/var(--AW));white-space:pre-line;line-height:1.2;
  z-index:1;text-transform:uppercase;font-weight:var(--ag-ince);
  font-size:max(11px,var(--m4))}

@media(max-width:820px){
  /* Mobilde sahne masaustu tuvalinden dokulmuyor, bastan kuruluyor:
     baslik, paragraf, urun, ikili kareler, ikili madde listesi, uc adim.
     Sira DOM'a degil order'a bagli; hizalar tek izgaraya oturuyor. */
  .sssahne{aspect-ratio:auto;display:flex;flex-wrap:wrap;align-items:flex-start;
    /* Gulbin: "renkli alanlarda aciklama baslik ve kutu biraz yukariya
       kaysin." Sahnenin ust dolgusu --r4 (48) -> --r3 (24). Ust gruptaki
       uc oge de (urun, baslik, aciklama) birlikte 24 px yukari geliyor. */
    justify-content:center;gap:var(--r2);padding:var(--r3) var(--yan) 0}
  .sssahne>*,.sssahne .ssbin>*,.sssahne .ssrozet>*,
  .sssahne .ssrkay>*,.sssahne .ssrkopya>*{position:static;margin:0}
  /* Gulbin: "renkli alandaki kucuk kutuculu gifler urunun ustunde olacak
     masaustundeki gibi." Mobilde .ssbin urun sahnesi oluyor: urun akista,
     iki klip kutusu onun uzerinde, masaustundeki gibi biri sol altta biri
     sag ustte, urunun kenarindan tasarak. Konumlar !important cunku
     tasarim hizmeti bolumunde kareler satir ici stille geliyor. */
  /* Urun gorsellerinin altinda saydam bos alan var (murekkep karenin
     %85'inde bitiyor), bu yuzden urunle baslik arasi olculenden fazla
     goruluyordu. Cekme baslikta degil urun blogunun altinda: baslik
     margin-top ile yukari alininca altinda 19,4 px'lik bir bosluk
     kaliyordu (negatif kenar satir yuksekligini kisaltip kutuyu satirin
     disina tasiyor). Boyle yapinca basligin altindaki aralik bozulmuyor.
     Tasarim hizmetinde urun kendi kutusunun altina tastigi icin cekme yok. */
  /* Gulbin, 14 Eylul: "stand alani kadar olsun arge ve tasarim alanlari,
     tasarimla arge alani cok daralmis kutular sikismis, standin konumu ve
     bosluklari gibi olsun, alani da ayni olcekte buyusun."
     Uc bolumde de urun sahnesi artik AYNI: 1:1 kare kutu (335x335),
     urun kutunun tam ortasinda. Olculdu: stand kutusu 335 px ve basligi
     bolumun 327. pikselinde basliyordu; tasarim 239, ar-ge 224 px'te
     kaliyordu, bu yuzden ikisi daralmis goruluyordu. */
  .ssbin{display:grid;place-items:center;position:relative;order:1;
    flex:1 0 100%;aspect-ratio:1;overflow:hidden;
    margin:0 0 calc(-1 * var(--r4))}
  /* ---- URUNUN KENDI CERCEVESI ----
     Gulbin: "mobilde renkli alanlardaki urunlerin cerceveleri yok."
     Masaustunde her urun kendi kontur katmaniyla geliyor; mobilde o katman
     kapaliydi ve yerine cerceveisz bir mobil kirpma (.ssurunm) duruyordu.
     Artik mobilde de urun kendi konturuyla geliyor, .ssurunm kapandi.
       · Ar-Ge (.kurun) ve Tasarim (.dzurun) kendi kutusunda urun+kontur
         tasiyor: dogrudan .ssbin'i dolduruyorlar.
       · Speedy Stand'de kontur tuvalin tamamini kaplayan bir katman
         (.ssgrup). Katman urun kutusuna gore olceklenip oteleniyor:
         genislik 1734/720 = %240,833, oteleme -480,92/1734 ve -27,23/1312,13.
         Bu iki deger urunun tuvaldeki konumunu sifirliyor, kontur urunle
         birebir ustuste kaliyor. */
  .ssbin .ssurunm{display:none!important}
  .ssbin .kurun,.ssbin .dzurun{display:block!important;position:relative;
    left:auto;top:auto;width:100%;margin:0}
  /* Once "tasarim hizmeti kutusu biraz kuculsun" ve "arge projeleri
     kutusu biraz kuculsun" demisti, %86'ya sonra %74'e indirmistim.
     Ardindan "kutular sikismis, stand alani kadar olsun" -> iki bolumde
     de urun kendi kare kutusunu tam dolduruyor, daraltma kalkti.
     Kutu 1:1 oldugu ve urun gorselleri neredeyse kare oldugu icin
     (ar-ge 1,107 tasarim 1,038) tam genislikte bile tasmiyorlar. */
  /* Gulbin netlestirdi: "kutular buyumeyecekti aksine kuculecekti,
     arka plan uzasin anlaminda buyusun dedim."
     Yani SAHNE standinkiyle ayni (335 px kare, ustteki .ssbin kurali),
     KUTU ise daha kucuk. Olcu standin kendi oranindan aliniyor, kafadan
     degil: standin murekkebi 335'lik sahnenin 18,4. pikselinde basliyor,
     304,5'te bitiyor; yani sahnenin %5,5'inden basliyor ve %78'ini
     kapliyor. Iki urun de ayni orana oturtuldu, boylece uc bolumde de
     urunun alt kenariyla baslik arasi ayni. */
  #tasarim-hizmeti .ssbin .dzurun,
  #arge-projeleri .ssbin .kurun{width:78%;margin:5.5% 0 0;
    place-self:start center}
  /* "rivarte kutusunu biraz daha kucultelim, televizyon kutusunu da
     biraz buyutelim": %78 ortak tabandan Rivarte %72'ye, TV %84'e. */
  #tasarim-hizmeti .ssbin .dzurun{width:72%}
  #arge-projeleri .ssbin .kurun{width:84%}
  /* opacity ve translate'i giris animasyonu kuruyordu (html.js .ssgrup:
     opacity 0, translate 0 44px) ve mobilde .gor hic gelmedigi icin katman
     hem gorunmez hem 44 px kaymis kaliyordu; ikisi de eziliyor. */
  .ssbin .ssgrup{display:block!important;position:absolute;inset:auto;
    top:0;left:0;width:240.833%;height:auto;aspect-ratio:1734/1312.13;
    /* Gulbin: "stand alaninda standi ortala sayfaya." Olculdu: standin
       gorunen murekkebi 1440'lik karenin %30,5-%76,5'i, merkezi %53,5.
       Kutu 335 px oldugunda murekkep merkezi 199,2'ye, ekran merkezi
       187,5'e dusuyordu; 11,7 px sola cekildi. */
    translate:calc(-27.734% - 11.7px) -2.075%!important;
    opacity:1!important;animation:none;
    container-type:inline-size;--AW:1734;z-index:1}
  .ssbin .ssgrup .sscizgi{display:block!important}
  /* ---- STANDIN KONTURU CIZILEREK GELIYOR ----
     Gulbin, 14 Eylul: "stand animasyonlu olsun giris slider'daki gibi."
     Giristeki urun cerceveleriyle ayni yontem: pathLength="1" ile yol bir
     birime normallestirildi, kesik kaydirmasi birden sifira iniyor.
     Fark: bu bolum ilk ekranda degil, o yuzden yuklenince degil goruse
     girince basliyor (mobil-app.js .cizildi sinifini takiyor). Boylece
     kullanici kaydirip geldiginde animasyonu bastan goruyor. */
  /* Gulbin, 14 Eylul: "asagidaki renkli alanlarda rivarte kutusu ve
     televizyon kutusunun cercevesi de stand alanindaki gibi cizilsin."
     Uc bolumde de ayni recete: yol pathLength="1" ile normallestirildi,
     kesik kaydirmasi birden sifira iniyor, bolum goruse girince basliyor.
     "cok hizli ciziliyor ya yavaslasin biraz" -> 2,2 sn'den 3,2'ye. */
  #speedy-stand .ssgrup .sskontur path,
  #tasarim-hizmeti .dzurun .dzkon path,
  #arge-projeleri .kurun .ucerk path{
    stroke-dasharray:1;stroke-dashoffset:1}
  #speedy-stand .ssbin.cizildi .sskontur path,
  #tasarim-hizmeti .ssbin.cizildi .dzkon path,
  #arge-projeleri .ssbin.cizildi .ucerk path{
    animation:sskonturciz 3.2s cubic-bezier(.65,0,.35,1) .1s forwards}
  @keyframes sskonturciz{to{stroke-dashoffset:0}}
  /* aspect-ratio ve overflow artik uc bolumde de ortak (.ssbin). */
  /* Gulbin iki kez soyledi: "tasarim hizmeti kutu cercevesi cok ince
     kalmis, bizim cerceve kalinligimizda olmali." Koyu zeminde 1 px
     optik olarak kayboluyordu; klip kutularinin kenari iki katina cikti. */
  .sskare{border-width:calc(var(--cizgi) * 2)!important}
  /* Gulbin, 14 Eylul: "mobilde renkli alanlarda urun resmi uzerine gelen
     kucuk kutucuklar olmasin." Klip kareleri mobilde tamamen kapali;
     ayni klipler zaten altta tam genislikte 1-2-3 hucrelerinde donuyor.
     Masaustunde duruyorlar. */
  .sskare{display:none!important}
  .sscizgi,.ssnot,.ssgrup{display:none}
  /* Gulbin: "mobilde renkli alanlarda once gorsel sonra baslik aciklama
     sonra da yazilar rozet seklinde gelsin. sonra da gifler." */
  /* Gulbin: "renkli alanlarda baslik ve aciklama daha yukarida olsun."
     Urun gorsellerinin alt tarafinda saydam bos alan var (murekkep karenin
     %85'inde bitiyor), bu yuzden baslikla urun arasi olculenden fazla
     goruluyordu. Baslik grubu --r4 kadar yukari cekiliyor. */
  .ssbas{order:2;flex:1 0 100%;font-size:var(--f1);line-height:1.1;
    }
  /* "baslik ve aciklamayi ayirmissin, diger hizalar gibi olsun": beyaz
     bolumlerde baslik ile giris metni arasi --r1 (8 px). Sahnenin kendi
     araligi 16 oldugu icin aciklama 8 px yukari cekiliyor. */
  /* Gulbin, 14 Eylul: "speedy stand alaninda aciklamadan sonra biraz
     bosluk birak", "arge ... aciklamanin altina yine bosluk birak",
     "tasarim hizmeti alaninda da ... aciklama altina bosluk verelim."
     Uc bolumde de aciklama ile altindaki rozet seridi arasi --r3 acildi.
     Sahnenin kendi araligi --r2, toplam 40 px. */
  .ssgiris{order:3;flex:1 0 100%;text-align:left;font-size:var(--f4);
    margin-top:calc(-1 * var(--r1));margin-bottom:var(--r3);
    line-height:1.6;width:auto}
  .ssurunm{order:1;flex:1 0 100%;display:block;width:100%;margin:0;
    text-align:center}
  .ssurunm img{width:auto;max-width:68%;max-height:300px;margin:0 auto}
  /* iki kare yan yana, ikili izgaranin ayni sutununda */
  .sskare{order:1;flex:0 1 calc(50% - 8px);width:auto;padding:var(--r1);
    display:block}
  /* yedi madde alt alta uzun bir sutun oluyordu; ikili izgaraya girdi */
  /* "yazilar rozet seklinde gelsin": maddeler artik iki sutunlu bir liste
     degil, bolum altindaki .rband seridiyle ayni cerceveli rozetler. */
  /* Gulbin: "rozetleri metin altina alinca cok yer kapladi, baska bir
     sekilde cozmeliyiz." Yedi rozet sarinca bes satir tutuyordu (~200 px).
     Simdi tek satir: sarmiyor, sayfa kenarindan kenara akiyor, parmakla
     kaydiriliyor. Yukseklik ~24 px'e dusuyor, bolum kisaliyor. */
  /* Gulbin: "super cozum rozetler icin. onlar bi de slider olsun oto
     kaysin." Sitenin kendi bant dili: icerik iki kez yaziliyor ve serit
     yarisi kadar oteleniyor, dikis gorunmuyor. Parmak degince duruyor. */
  /* display:contents masaustu kurali; mobilde kutu lazim, yoksa yukseklik
     sifir kaliyor ve serit hic gorunmuyor. */
  .ssrozet{order:4;flex:1 0 100%;display:block;overflow:hidden;
    margin-inline:calc(-1*var(--yan))}
  .ssrkay{display:flex;flex-wrap:nowrap;width:max-content;gap:var(--r1);
    animation:kay 26s linear infinite}
  .ssrkopya{display:contents}
  /* Gulbin: "bir yerden sonra kutucuklar bozuluyor." Olculdu: sag gruptaki
     rozetler iki satira kirilip 32 px oluyordu, soldakiler 24. Metindeki
     satir sonu ve .sskucuk'un pre-line'i sarmaya yol aciyordu. Serit tek
     satir: hepsi nowrap ve tam olarak --rozet-yuk yuksekliginde. */
  .ssrkay .ssoz{white-space:nowrap!important;max-width:none!important;
    height:var(--rozet-yuk);min-height:var(--rozet-yuk)!important;
    align-self:center}
  .ssrozet:hover .ssrkay,.ssrozet:active .ssrkay{animation-play-state:paused}
  @media(prefers-reduced-motion:reduce){
    .ssrkay{animation:none}
    .ssrozet{overflow-x:auto;scrollbar-width:none}
  }
  .ssoz,.ssoz.sag{order:4;flex:0 0 auto;width:auto;white-space:nowrap;
    text-align:center;font-size:var(--f5);
    border:var(--cizgi) solid var(--green);color:var(--green);
    padding:var(--rozet-dolgu);min-height:var(--rozet-yuk);
    display:inline-flex;align-items:center;line-height:1.2;
    white-space:normal;
    /* Not: burada bir zamanlar -4 px telafi kenari vardi (sahnenin 16 px
       araligini 8'e indirmek icin). Rozetler artik .ssrkay'in icinde ve
       onun kendi 8 px araligi var; telafi kalinca sag gruptaki rozetlerin
       arasi 8-4-4 = 0 oluyordu. Kaldirildi, butun araliklar 8 px. */
    margin:0}
  /* Gulbin, 14 Eylul: "bunlar alani kaplasin ardarda olsun. yesil cizgiler
     olmasin. mobile ozel olacak bu arada masaustune elleme."
     Hucre sahnenin yan dolgusunu negatif kenar boslugu ile asiyor: flex-basis
     100% icerik kutusu kadar, eksi 2*--yan ile disari tasiyor, flex-grow acigi
     kapatiyor; sonuc tam ekran genisligi. Aradaki 16 px satir boslugu ayni
     miktarda negatif ust kenarla siliniyor, uc klip tek bant gibi akiyor.
     Yesil ust cizgi kaldirildi. */
  /* Gulbin: "gif alanlari daha yuksek olsun video tam belli olmuyor."
     176 px sabit yukseklik 375 genislikte 2,13:1 gibi ince bir seritti,
     klipten yalnizca bir bant goruluyordu. Sabit yukseklik yerine 4:3
     kare orani: 375'te 281 px, ekran buyudukce oraninda buyuyor. */
  .ssh,.ssh.h1,.ssh.h2,.ssh.h3{order:5;flex:1 0 100%;position:relative;
    width:auto;height:auto;aspect-ratio:4/3;top:0;left:0;bottom:auto;
    overflow:hidden;margin-inline:calc(-1*var(--yan));border-top:0;
    /* Gulbin: "rozetlerle gifin arasi cok kisa, biraz bosluk olsun."
       Ilk hucre rozet seridinden --r3 uzakta; asagidaki .ssh + .ssh kurali
       2. ve 3. hucrede bunu eziyor, uclu bant birbirine yapisik kaliyor. */
    margin-top:var(--r3)}
  .ssh + .ssh{margin-top:calc(-1*var(--r2))}
  /* Gulbin, 21 Eylul: "mobilde bu alanlarin altinda bosluklar var,
     kaldir bunlari." Uclu klip bandinin sonunda 48 px koyu bir serit
     kaliyordu; bant artik dogrudan sonraki bolume yapisiyor. */
  .ssh:last-child{margin-bottom:0}
  /* hucre tam ekrana yayilinca yazinin ic dolgusu artik ekran kenarindan
     olculuyor; sayfa hizasina oturmasi icin --r2 degil --yan. */
  .ssh>*{position:absolute;left:var(--yan)}
  .ssgif{position:absolute;inset:0;left:0;height:auto}
  /* mobilde hucre alcaldi, yazi videonun uzerinde: perde de kisaldi ve koyulastı */
  .ssgif::after{background:linear-gradient(180deg,rgba(2,16,10,.94) 0%,
    rgba(2,16,10,.78) 34%,rgba(2,16,10,.24) 60%,rgba(2,16,10,0) 80%)}
  /* Gulbin: "giflerin ustundeki 1-2-3 baslik ve metin araligi cok daha
     yakin olsun, basliklar asagiya kaysin biraz daha."
     Numara --r2'den --r3'e indi; etiket numaranin hemen altinda:
     numara 17 px, satir araligi 1, aradaki bosluk 9 -> 4 px. */
  .ssno{top:var(--r3);font-size:var(--f3)}
  .sset{top:calc(var(--r3) + 21px);font-size:var(--f5)}
}

/* --- Markana ozel tasarim hizmeti --- */
/* Urun: Artboard 8'in kendi kutusu. Kontur artboardin vektor yolu,
   sayfadaki diger cizgilerle ayni kalinlikta cizilir. Isik ve golge
   slider'daki kurallarin aynisi, olculeri bu kutuya gore ayarlandi. */
.dzurun{left:calc(607*100cqw/var(--AW));top:calc(105*100cqw/var(--AW));
  width:calc(520*100cqw/var(--AW));aspect-ratio:1297.85/1251.99;z-index:1;
  pointer-events:none}
.dzurun .prod{position:absolute;inset:0}
.dzurun .gorsel{position:absolute;inset:0;z-index:3}
.dzurun .gorsel img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 calc(20*100cqw/var(--AW)) calc(18*100cqw/var(--AW))
         rgba(0,0,0,.5))}
.dzurun .dzkon{position:absolute;inset:0;width:100%;height:100%;z-index:4;
  pointer-events:none;overflow:visible}
.dzurun .dzkon path{fill:none;stroke:var(--green);stroke-width:var(--cizgi);
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  opacity:.9}
@media(prefers-reduced-motion:reduce){
  .dzurun .prod .fl{animation:none}}
@media(max-width:820px){
    .dzurun{display:none}
}

/* --- Ar-Ge projeleri: stand sahnesinin ayni sablonu --- */
.kurun{left:calc(567*100cqw/var(--AW));top:calc(75*100cqw/var(--AW));
  width:calc(600*100cqw/var(--AW));aspect-ratio:1;z-index:1;pointer-events:none}
.kurun .prod{position:absolute;inset:0}
.kurun .gorsel{position:absolute;inset:0;z-index:3}
.kurun .gorsel img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 calc(20*100cqw/var(--AW)) calc(18*100cqw/var(--AW))
         rgba(0,0,0,.5))}
.kurun .ucerk.kucer{position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:4}
.kurun .ucerk.kucer path{opacity:.9}
@media(prefers-reduced-motion:reduce){.kurun .prod .fl{animation:none}}
@media(max-width:820px){
  .kurun{display:none}
}

/* --- Guvenen markalar --- */
.mrk{background:var(--siyah);background-image:var(--bgrad);
  padding:0 var(--yan) calc(46*100cqw/var(--AW));
  container-type:inline-size;--AW:1734}
.mrkbas{margin:0 0 calc(26*100cqw/var(--AW));text-align:center;
  color:var(--green)!important;font-weight:var(--ag-ince);
  font-size:var(--m4);line-height:1.35}
/* Gulbin'in PNG'si tek parca: dizilim ve aralar onun dosyasindan
   geliyor, CSS ile yeniden kurulmuyor. */
.mrkl{display:block;width:100%;height:auto;margin:0 auto}
@media(max-width:820px){
  /* Once "biraz asagiya kaydir" (ust bosluk 24 -> 64), ardindan ISO
     rozetleri araya girince "bize guvenen ve logolar da biraz yukariya
     kaysin" -> --r3 (24), ardindan "bize guvenen ve alti biraz
     asagiya kaysin" -> --r4 (48), son olarak "cok az yukariya
     kaydir" -> --r32 (32 px). */
  /* Alt dolgu --r5'ten --r3'e: giris ekrani 100svh ve icerik ortali,
     alttaki 64 px bos dolgu blogu yukari itiyordu. */
  .mrk{padding:var(--r32) var(--yan) var(--r5);background:none}
  /* "logolari kucultup bize guvenen metninin altina getir" ve ardindan
     "daha da yukariya gelsin logolar": aradaki bosluk 112 -> 48 -> 24 -> 8 -> 16 px,
     logolar da %80 genislige indi.
     Secici .mrk p.mrkbas, cunku mobil.css'teki
     ".mhero p{margin:var(--r2) 0 0}" daha guclu ve daha sonra geliyordu;
     onceki ".mrkbas{margin-bottom}" denemeleri bu yuzden hic islemedi. */
  .mrk p.mrkbas{margin:0 0 var(--r2);font-size:var(--f4)}
  .mrk .mrkl{width:80%}
}

/* Gulbin, 24 Eylul: "urun kartlarinin isiklari yanip sonsun hep."
   Yanip sonme yalnizca masaustu blogunda tanimliydi (min-width:821px),
   telefonda isik sabit duruyordu. Kural artik kirilimdan bagimsiz.
   Hareket kapaliysa yine duruyor. */
/* krzyan tarifi yalnizca @media(max-width:820px) icinde (mobil.css)
   tanimliydi; masaustunde animasyon adi atanip karsiligi bulunamiyor,
   isik sabit kaliyordu. Tarif kirilimdan bagimsiz olarak burada. */
@keyframes krzyan{0%,100%{opacity:1}50%{opacity:.22}}
.pcard:not(.blogkart)>.krz-ozel::before,
.pcard:not(.blogkart)>.krz-stok::before{
  animation:krzyan 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .pcard:not(.blogkart)>.krz-ozel::before,
  .pcard:not(.blogkart)>.krz-stok::before{animation:none}
}