*,*:before, *:after { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; text-decoration: none; box-sizing: border-box; } :root { --s: calc(8px); --s2: calc( var(--s) * 2); /* https://clamp.font-size.app */ /*font14-18_360-960*/ --fs01: clamp(0.875rem, 0.725rem + 0.6667vw, 1.125rem); /*font18-24_360-960*/ --fs02: clamp(1.125rem, 0.9rem + 1vw, 1.5rem); --fs03: clamp(0.875rem, 0.8125rem + 0.2778vw, 1rem); --fsh3: clamp(1.125rem, 1.0625rem + 0.2778vw, 1.25rem); } i{font-style:normal;} p{cursor: default;} /* h1{font-size:clamp(1.5rem, 1.2rem + 1.3333vw, 2rem);} /* 24 - 32 / h2{font-size:clamp(1.17rem, 0.972rem + 0.88vw, 1.5rem);} /* 18.72 - 24 / h3{font-size:clamp(1rem, 0.898rem + 0.4533vw, 1.17rem);} /* 16 - 18.72 / h4{font-size:clamp(1rem);} /* 16 px / h5{font-size:clamp(0.83rem, 0.728rem + 0.4533vw, 1rem);} /* 13.28 - 16 / h6{font-size:clamp(0.67rem, 0.574rem + 0.4267vw, 0.83rem);} /*10.72 - 13.28 / */ .arrow { border: solid #374A61; border-width: 0 2px 2px 0; display: inline-block; padding: var(--s3); } .arrow.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .arrow.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .arrow.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .arrow.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } /*** SPACE ***/ /** Margin **/ [s*="mc"], [s^="mc"] {margin:0;} [s*="ma"], [s^="ma"] {margin:var(--s);} [s*="mx"], [s^="mx"] {margin:0 var(--s);} [s*="my"], [s^="my"] {margin:var(--s) 0;} [s*="mt"], [s^="mt"] {margin-top:var(--s);} [s*="mr"], [s^="mr"] {margin-right:var(--s);} [s*="mb"], [s^="mb"] {margin-bottom:var(--s);} [s*="ml"], [s^="ml"] {margin-left:var(--s);} /* > * */ [se*="mce"] > * , [se^="mce"] > * {margin:0;} [se*="mae"] > * , [se^="mae"] > * {margin:var(--s);} [se*="mxe"] > * , [se^="mxe"] > * {margin:0 var(--s);} [se*="mye"] > * , [se^="mye"] > * {margin:var(--s) 0;} [se*="mte"] > * , [se^="mte"] > * {margin-top:var(--s);} [se*="mre"] > * , [se^="mre"] > * {margin-right:var(--s);} [se*="mbe"] > * , [se^="mbe"] > * {margin-bottom:var(--s);} [se*="mle"] > * , [se^="mle"] > * {margin-left:var(--s);} /* > * Bitti*/ /** Margin Bitti**/ /** Padding **/ [s*="pc"], [s^="pc"] {padding:0;} [s*="pa"], [s^="pa"] {padding:var(--s);} [s*="px"], [s^="px"] {padding:0 var(--s);} [s*="py"], [s^="py"] {padding:var(--s) 0;} [s*="pt"], [s^="pt"] {padding-top:var(--s);} [s*="pr"], [s^="pr"] {padding-right:var(--s);} [s*="pb"], [s^="pb"] {padding-bottom:var(--s);} [s*="pl"], [s^="pl"] {padding-left:var(--s);} /* > * */ [se*="pce"] > * , [se^="pce"] > * {padding:0;} [se*="pae"] > * , [se^="pae"] > * {padding:var(--s);} [se*="pxe"] > * , [se^="pxe"] > * {padding:0 var(--s);} [se*="pye"] > * , [se^="pye"] > * {padding:var(--s) 0;} [se*="pte"] > * , [se^="pte"] > * {padding-top:var(--s);} [se*="pre"] > * , [se^="pre"] > * {padding-right:var(--s);} [se*="pbe"] > * , [se^="pbe"] > * {padding-bottom:var(--s);} [se*="ple"] > * , [se^="ple"] > * {padding-left:var(--s);} /* > * Bitti*/ /** Padding Bitti**/ /*** SPACE Bitti ***/ /*** FLEX ***/ [f]{display:flex;} /* flex-direction: row | row-reverse | column | column-reverse */ [f*="y"], [f^="y"] {flex-direction:column;} [f*="rr"], [f^="rr"] {flex-direction:row-reverse;} [f*="ry"], [f^="ry"] {flex-direction:column-reverse;} /* Süper ortala */ [f*="cc"], [f^="cc"] {align-items:center;justify-content:center;} /* flex-wrap: nowrap | wrap | wrap-reverse; */ [f*="w"], [f^="w"] {flex-wrap: wrap;} [f*="nw"], [f^="nw"] {flex-wrap: nowrap;} [f*="rw"], [f^="rw"] {flex-wrap: wrap-reverse;} /* justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; */ [f*="js"], [f^="js"] {justify-content:flex-start;} [f*="jn"], [f^="jn"] {justify-content:flex-end;} [f*="jc"], [f^="jc"] {justify-content:center;} [f*="jb"], [f^="jb"] {justify-content:space-between;} [f*="ja"], [f^="ja"] {justify-content:space-around;} [f*="jv"], [f^="jv"] {justify-content:space-evenly;} /* align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; */ [f*="is"], [f^="is"] {align-items: flex-start;} [f*="ie"], [f^="ie"] {align-items: flex-end;} [f*="ic"], [f^="ic"] {align-items: center;} [f*="ih"], [f^="ih"] {align-items: stretch;} [f*="ib"], [f^="ib"] {align-items: baseline;} /* align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe */ [f*="cs"], [f^="cs"] {align-content: flex-start;} [f*="ce"], [f^="ce"] {align-content: flex-end;} [f*="co"], [f^="co"] {align-content: center;} [f*="cb"], [f^="cb"] {align-content: space-between;} [f*="ca"], [f^="ca"] {align-content: space-around;} [f*="cv"], [f^="cv"] {align-content: space-evenly;} [f*="ch"], [f^="ch"] {align-content: stretch;} /* align-self: auto | flex-start | flex-end | center | baseline | stretch */ [f*="ao"], [f^="ao"] {align-self: auto;} [f*="as"], [f^="as"] {align-self: flex-start;} [f*="ae"], [f^="ae"] {align-self: flex-end;} [f*="ac"], [f^="ac"] {align-self: center;} [f*="ab"], [f^="ab"] {align-self: baseline;} [f*="ah"], [f^="ah"] {align-self: stretch;} /*** flex - grow ***/ [g1] {flex-grow: 1;} [g2] {flex-grow: 2;} [g3] {flex-grow: 3;} [g4] {flex-grow: 4;} [g5] {flex-grow: 5;} [g6] {flex-grow: 6;} [g7] {flex-grow: 7;} [g8] {flex-grow: 8;} [g9] {flex-grow: 9;} [g0] {flex-grow: 0;} /*** flex - shrink ***/ [k1] {flex-shrink: 1;} [k2] {flex-shrink: 2;} [k3] {flex-shrink: 3;} [k4] {flex-shrink: 4;} [k5] {flex-shrink: 5;} [k6] {flex-shrink: 6;} [k7] {flex-shrink: 7;} [k8] {flex-shrink: 8;} [k9] {flex-shrink: 9;} [k0] {flex-shrink: 0;} /*** order ***/ [o1] {order: 1;} [o2] {order: 2;} [o3] {order: 3;} [o4] {order: 4;} [o5] {order: 5;} [o6] {order: 6;} [o7] {order: 7;} [o8] {order: 8;} [o9] {order: 9;} [o0] {order: 0;} /*** FLEX BITTI***/ [w25] { width: 25%; } [w33] { width: 33%; } [w50] { width: 50%; } [w100] { width: 100%; } [w100e] > * { width: 100%; } /*Gap*/ [gap] { gap: var(--s); } [gap2e] > * > * { gap: var(--s); } [gapx] { gap: 0 var(--s); } [gapy] { gap: var(--s) 0; } [gape] > * { gap: var(--s); } [gapxe] > * { gap: 0 var(--s); } [gapye] > * { gap: var(--s) 0; } /*Gap*/