receives focus\n // in IE and (under certain conditions) Edge.\n // See https://github.com/twbs/bootstrap/issues/19398.\n color: $c-selectbox-focus-color;\n }\n }\n\n &:disabled {\n background-color: $c-selectbox-bg-disabled-color;\n cursor: default;\n opacity: 0.5;\n }\n\n .is-valid > &,\n &.is-valid {\n background-image: url('../img/form-icons/select-arrow-success.svg');\n border-color: $success-color;\n color: $success-color;\n }\n\n .is-invalid > &,\n &.is-invalid {\n background-image: url('../img/form-icons/select-arrow-danger.svg');\n border-color: $alert-color;\n color: $alert-color;\n }\n\n .is-warning > &,\n &.is-warning {\n background-image: url('../img/form-icons/select-arrow-warn.svg');\n border-color: $warning-color;\n color: $warning-color;\n }\n\n // Hides the default caret in IE11\n &::-ms-expand {\n opacity: 0;\n }\n\n //\n // Modifiers\n // -------------------------\n\n //\n // Light\n //\n // Markup:\n // \n // \n // Please Select \n // \n //
\n //\n // Styleguide Components.Form.Selectbox.Light\n\n &--light {\n background-color: transparent;\n background-image: url('../img/form-icons/select-arrow-light.svg');\n border-color: transparent;\n color: $color-white;\n\n &:focus {\n border-color: transparent;\n color: $color-white;\n\n &::-ms-value {\n background-color: transparent;\n border-color: transparent;\n color: $color-white;\n }\n }\n }\n}\n","//\n// Form Label\n//\n// Markup:\n// Lorem Ipsum \n//\n// Styleguide Components.Form.Form-Label\n\n.c-form-label {\n display: inline-block;\n color: $color-outer-space;\n font-size: $g-font-size-small;\n}\n","//\n// Form Control Mask\n//\n// Markup: c-form-control-mask.twig\n//\n// .is-filled - Filled\n// [disabled] - Disabled\n// .is-valid - Valid\n// .is-invalid - Invalid\n// .is-warning - Warning\n//\n// Styleguide Components.Form.Mask\n\n.c-form-control-mask {\n @include form-control-block($display: flex);\n @include form-control-modifier($color: $color-dusty-gray);\n align-items: center;\n cursor: pointer;\n\n //\n // Elements\n // -------------------------\n\n &__icon {\n flex-shrink: 0;\n margin-left: auto;\n font-size: $g-font-size-large;\n }\n\n &__placeholder {\n @include text-truncate();\n padding-right: pad(2xsmall);\n }\n\n //\n // Modifiers\n // -------------------------\n\n &.is-filled {\n color: $c-input-color;\n }\n\n [disabled] + &,\n &.is-disabled {\n background-color: $c-input-bg-color-disabled;\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n }\n\n .is-valid > &,\n &.is-valid {\n border-color: $success-color;\n color: $success-color;\n }\n\n .is-invalid > &,\n &.is-invalid {\n border-color: $alert-color;\n color: $alert-color;\n }\n\n .is-warning > &,\n &.is-warning {\n border-color: $warning-color;\n color: $warning-color;\n }\n}\n","// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n","//\n// Form File Control\n//\n// Markup: c-form-file-control.twig\n//\n// [disabled] - Disabled\n// .is-valid - Valid\n// .is-invalid - Invalid\n// .is-warning - Warning\n//\n// Styleguide Components.Form.File-Control\n\n.c-form-file-control {\n //\n // Elements\n // -------------------------\n\n &__input {\n position: absolute;\n z-index: -1; // stylelint-disable-line scale-unlimited/declaration-strict-value\n overflow: hidden;\n width: 0.1px;\n height: 0.1px;\n opacity: 0;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Header Menu\n//\n// Markup:\n// \n//\n// Styleguide Components.Header-Link\n\n.c-header-link {\n padding: pad(xsmall);\n color: $color-outer-space;\n transition: background-color $g-transition-duration, color $g-transition-duration;\n\n &:hover {\n background-color: $color-white-smoke;\n color: $color-azure-radiance;\n text-decoration: none;\n }\n}\n","//\n// Dropdown\n//\n// `.is-expanded` dropdown'nın aktif durumunu belirten classtır.\n//\n// Markup:\n// \n//\n//\n// Styleguide Components.Dropdown\n\n.c-dropdown {\n position: relative;\n\n //\n // Elements\n // -------------------------\n\n &__content {\n position: absolute;\n z-index: $g-z-index-c-dropdown-container;\n top: 100%;\n left: 0;\n display: none;\n min-width: px-to-rem(150px);\n }\n\n // &__trigger {\n // }\n\n &__overlayer {\n position: fixed;\n z-index: $g-z-index-c-dropdown-overlayer;\n top: 0;\n left: 0;\n display: none;\n width: 100%;\n height: 100%;\n }\n\n //\n // Open state\n //\n\n &.is-expanded {\n > .c-dropdown__content {\n display: block;\n }\n\n > .c-dropdown__overlayer {\n display: block;\n }\n\n > .c-dropdown__trigger {\n position: relative;\n z-index: $g-z-index-c-dropdown-container;\n }\n }\n\n //\n // Modifiers\n // -------------------------\n\n &--header {\n // stylelint-disable max-nesting-depth\n @include media-breakpoint-up(xl) {\n &:hover > .c-dropdown__content {\n display: block;\n }\n\n &:hover > .c-dropdown__trigger {\n background-color: $color-wild-sand;\n }\n }\n\n > .c-dropdown__content {\n // fadeIn animation keyframes located in abstracts/_keyframes.scss\n animation: fadeIn 0.4s;\n background-color: $color-wild-sand;\n\n @include media-breakpoint-down(lg) {\n position: static;\n }\n }\n // stylelint-enable\n }\n\n &--main-menu {\n position: static;\n\n > .c-dropdown__content {\n width: 100%;\n }\n }\n\n &--locale {\n > .c-dropdown__content {\n right: 0;\n left: auto;\n }\n }\n}\n","//\n// Jumbotron\n//\n// Markup: c-jumbotron.twig\n//\n// Styleguide Components.Jumbotron\n\n.c-jumbotron {\n position: relative;\n //\n // Elements\n // -------------------------\n\n &__img {\n width: 100%;\n }\n\n &__container {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n flex-direction: column;\n justify-content: center;\n\n &:hover {\n text-decoration: none;\n }\n }\n\n &__title {\n // stylelint-disable max-nesting-depth\n margin-top: 0;\n margin-bottom: 0;\n color: $color-white;\n letter-spacing: -0.5px;\n\n &--primary {\n font-weight: 800;\n text-transform: uppercase;\n\n @include media-breakpoint-up(xl) {\n font-size: px-to-rem(72px);\n }\n\n @include media-breakpoint-only(lg) {\n font-size: px-to-rem(56px);\n }\n }\n\n &--secondary {\n @include media-breakpoint-up(lg) {\n font-size: px-to-rem(48px);\n }\n\n @include media-breakpoint-only(md) {\n font-size: px-to-rem(40px);\n }\n\n @include media-breakpoint-down(sm) {\n font-size: px-to-rem(32px);\n }\n }\n\n &--tertiary {\n font-weight: 800;\n text-transform: uppercase;\n\n @include media-breakpoint-up(lg) {\n font-size: px-to-rem(48px);\n }\n\n @include media-breakpoint-only(md) {\n font-size: px-to-rem(40px);\n }\n\n @include media-breakpoint-down(sm) {\n font-size: px-to-rem(32px);\n }\n }\n // stylelint-enable\n }\n\n &__text {\n margin-top: 0;\n color: $color-white;\n\n @include media-breakpoint-up(lg) {\n font-size: $g-font-size-xlarge;\n }\n\n @include media-breakpoint-down(md) {\n font-size: $g-font-size-medium;\n }\n\n @include media-breakpoint-down(xs) {\n display: none;\n }\n }\n\n //\n // Modifiers\n // -------------------------\n\n &--has-dots {\n // stylelint-disable max-nesting-depth\n > .c-jumbotron__container {\n @include media-breakpoint-up(sm) {\n padding-top: pad(large);\n padding-bottom: pad(large);\n }\n\n @include media-breakpoint-down(xs) {\n padding-top: pad();\n padding-bottom: pad();\n }\n }\n // stylelint-enable\n }\n\n &--job-application {\n background-image: url('../img/jumbotron/job-application.jpg');\n background-size: cover;\n\n > .c-jumbotron__container {\n position: static;\n }\n }\n}\n","//\n// Secondary Title\n//\n// Markup:\n// Hello World \n//\n// Styleguide Components.Secondary-Title\n\n.c-secondary-title {\n color: $color-outer-space;\n font-family: $g-font-primary;\n}\n","//\n// Section Subtitle\n//\n// Markup:\n// Hello World \n//\n// Styleguide Components.Section-Subtitle\n\n.c-section-subtitle {\n color: $color-gray;\n font-size: $g-font-size-xsmall;\n letter-spacing: px-to-rem(2px);\n text-transform: uppercase;\n //\n // Elements\n // -------------------------\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Badge\n//\n// Markup:\n// Hello \n//\n// .c-badge--primary - Primary\n// .c-badge--secondary - Secondary\n//\n// Styleguide Components.Badge\n\n.c-badge {\n display: inline-block;\n font-weight: 500;\n\n //\n // Elements\n // -------------------------\n\n &--primary {\n padding: px-to-rem(6px) pad(small);\n background-color: $primary-color;\n border-radius: px-to-rem(50px);\n color: $color-white;\n font-size: $g-font-size-2xsmall;\n letter-spacing: px-to-rem(1.6px);\n line-height: (16 / 10);\n text-transform: uppercase;\n }\n\n &--secondary {\n padding: px-to-rem(4px) pad(xsmall);\n border: px-to-rem(1px) solid $g-border-color;\n background-color: $color-white;\n border-radius: px-to-rem(2px);\n font-size: $g-font-size-small;\n line-height: (20 / 14);\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Stat\n//\n// Markup: c-stat.twig\n//\n// Styleguide Components.Stat\n\n.c-stat {\n position: relative;\n display: flex;\n height: 100%;\n flex-direction: column;\n align-items: center;\n padding: pad() pad(small);\n border: px-to-rem(1px) solid $g-border-color;\n background: $color-white;\n border-top-left-radius: px-to-rem(4px);\n border-top-right-radius: px-to-rem(4px);\n\n &::after {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: px-to-rem(5px);\n background-color: $primary-color;\n content: '';\n }\n\n //\n // Elements\n // -------------------------\n\n &__lead {\n @include heading-styles();\n text-transform: uppercase;\n }\n\n &__count {\n color: $color-outer-space;\n font-size: px-to-rem(48px);\n font-weight: 500;\n }\n\n &__name {\n margin-top: 0;\n margin-bottom: 0;\n color: $color-outer-space;\n font-family: $g-font-primary;\n font-weight: 400;\n text-align: center;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Content Banner\n//\n// Markup: c-content-banner.twig\n//\n// Styleguide Components.Content-Banner\n\n.c-content-banner {\n $z-index-overlayer: 1;\n $z-index-content: 2;\n $z-index-badge: 3;\n\n position: relative;\n display: block;\n\n &:hover {\n text-decoration: none;\n\n &::after {\n opacity: 0.3;\n }\n }\n\n //\n // Elements\n // -------------------------\n\n &::after {\n position: absolute;\n z-index: $z-index-overlayer;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n background-color: $color-black;\n content: '';\n opacity: 0.6;\n transition: opacity $g-transition-duration;\n }\n\n &__content {\n position: absolute;\n z-index: $z-index-content;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: pad(small);\n color: $color-white;\n }\n\n &__title {\n margin-top: 0;\n margin-bottom: 0;\n color: $color-white;\n font-weight: 700;\n letter-spacing: px-to-rem(-0.4px);\n text-transform: uppercase;\n }\n\n &__img {\n display: block;\n width: 100%;\n height: auto;\n }\n\n &__badge {\n position: absolute;\n z-index: $z-index-badge;\n top: px-to-rem(16px);\n right: px-to-rem(16px);\n color: $color-azure-radiance;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Link White\n//\n// Markup:\n// \n//\n// Styleguide Components.Link-White\n\n.c-link-white {\n &,\n &:hover {\n color: $color-white;\n }\n\n &:hover,\n &.is-active {\n text-decoration: underline;\n }\n}\n","//\n// Link Title\n//\n// Markup:\n// \n//\n// Styleguide Components.Link-Title\n\n.c-link-title {\n &,\n &:hover {\n color: $color-outer-space;\n }\n\n &:hover,\n &.is-active {\n text-decoration: underline;\n }\n}\n","//\n// Dotted List\n//\n// Markup:\n// \n// Lorem \n// Ipsum \n// Sit \n// Amet \n// \n//\n// Styleguide Components.Dotted-List\n\n.c-dotted-list {\n @include list-unstyled($margin-bottom: 0);\n display: flex;\n //\n // Elements\n // -------------------------\n\n &__item {\n // stylelint-disable max-nesting-depth\n\n & + & {\n padding-left: pad(2xsmall);\n\n &::before {\n margin-right: gap(xsmall);\n content: '•';\n }\n }\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","@mixin list-unstyled($pad-left: 0, $margin-bottom: null) {\n padding-left: $pad-left;\n margin-bottom: $margin-bottom;\n list-style: none;\n}\n","//\n// Bar\n//\n// Markup:\n// \n//
Hello \n// \n//\n// Styleguide Components.Bar\n\n.c-bar {\n background-image: linear-gradient(\n to right,\n $color-mirage 0%,\n $color-biscay 30%,\n $color-biscay 70%,\n $color-mirage 100%\n );\n color: $color-white;\n\n //\n // Elements\n // -------------------------\n\n &__title {\n color: $color-white;\n font-weight: 700;\n letter-spacing: px-to-rem(1px);\n text-transform: uppercase;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Preview Box\n//\n// Markup:\n// \n// Lorem Ipsum\n//
\n//\n// Styleguide Components.Preview-Box\n\n.c-preview-box {\n background-image: radial-gradient(ellipse at center, $color-white 25%, $color-athens-gray 100%);\n}\n","//\n// Preview Box Secondary\n//\n// Markup:\n// \n// Lorem Ipsum\n//
\n//\n// Styleguide Components.Preview-Box-Secondary\n\n.c-preview-box-secondary {\n border: px-to-rem(2px) solid $color-athens-gray;\n}\n","//\n// Product Description\n//\n// Markup: c-product-description.twig\n//\n// Styleguide Components.Product-Description\n\n.c-product-description {\n color: $color-outer-space;\n text-align: center;\n\n //\n // Elements\n // -------------------------\n\n &__title {\n margin-top: 0;\n margin-bottom: gap(small);\n font-size: px-to-rem(16px);\n font-weight: 700;\n text-transform: uppercase;\n }\n\n &__text {\n @include heading-styles($font-family: null, $color: null);\n display: block;\n font-family: $g-font-secondary;\n font-size: $g-font-size-xlarge;\n }\n\n &__name {\n display: block;\n font-size: $g-font-size-large;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Shadow 1\n//\n// Markup:\n//
\n//\n// Styleguide Components.Shadows.1\n\n.c-shadow-1 {\n box-shadow: 0 px-to-rem(2px) px-to-rem(35px) 0 rgba(0, 0, 0, 0.15);\n}\n","//\n// Dark Section\n//\n// Markup:\n// \n//
\n//
Çevre Dostu Motor \n//
Büyük şehirlerin en önemli sorunu haline gelen hava kirliliği problemine karşı Euro 6 normlarındaki motoru sayesinde çevre dostudur. Dizel motoruna ek olarak sunulan CNG (doğal gazlı) motoru da farklı kullanım alanı ve ihtiyaçlara da cevap vermektedir.
\n//
Büyük şehirlerin en önemli sorunu haline gelen hava kirliliği problemine karşı Euro 6 normlarındaki motoru sayesinde çevre dostudur. Dizel motoruna ek olarak sunulan CNG (doğal gazlı) motoru da farklı kullanım alanı ve ihtiyaçlara da cevap vermektedir.
\n//
\n//
Maksimum Güç \n//\n// Styleguide Components.Feature-Title\n\n.c-feature-title {\n color: $color-outer-space;\n text-transform: uppercase;\n}\n","//\n// Promotion Section\n//\n// HideOriginal: true\n//\n// Markup:\n// \n//
\n//
\n//
\n//
\n//
Mayına karşı korumalı araç sınıfında sağladığı yüksek koruma özellikleri ile fark yaratan Kirpi’nin 6X6 versiyonunda; monokok tipte zırhlı kabin ve özel zırhlı camlar, şok emici koltuklar, V-şeklindeki özel tasarım karın altı yapısı, silah istasyonu ve acil çıkış kapağı özellikleri ön plana çıkıyor.
\n//
\n// \n// \n// Bulunduğu İl\n// \n//\n// Styleguide Components.Title-With-Icon\n\n.c-title-with-icon {\n display: flex;\n align-items: center;\n margin-top: 0;\n margin-bottom: 0;\n color: $color-outer-space;\n text-transform: uppercase;\n}\n","//\n// Card\n//\n// Styleguide Components.Card\n\n//\n// Demo 1\n//\n// Markup: c-card-1.twig\n//\n// Styleguide Components.Card.Demo-1\n\n//\n// Demo 2\n//\n// Markup: c-card-2.twig\n//\n// Styleguide Components.Card.Demo-2\n\n.c-card {\n display: flex;\n flex-direction: column;\n background-color: $color-ghost;\n border-radius: px-to-rem(4px);\n\n //\n // Elements\n // -------------------------\n\n &__header {\n padding-top: pad(small);\n padding-bottom: pad(small);\n border-bottom: 1px solid $g-border-color;\n background-color: $color-white;\n background-color: $primary-color;\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n\n @include media-breakpoint-up(md) {\n min-height: px-to-rem(110px);\n padding-right: pad();\n padding-left: pad();\n }\n\n @include media-breakpoint-down(sm) {\n padding-right: pad(small);\n padding-left: pad(small);\n }\n\n &--small-pad {\n min-height: auto;\n padding: px-to-rem(12px) pad(xsmall);\n }\n }\n\n &__title {\n margin-top: 0;\n margin-right: auto;\n margin-bottom: 0;\n color: $color-white;\n }\n\n &__content {\n flex-shrink: 0;\n padding-top: pad(small);\n\n @include media-breakpoint-up(md) {\n padding-right: pad();\n padding-bottom: pad(small);\n padding-left: pad();\n }\n\n @include media-breakpoint-down(sm) {\n padding-right: pad(small);\n padding-left: pad(small);\n }\n\n &--small-pad {\n padding: px-to-rem(12px) pad(xsmall);\n }\n }\n\n &__map-area {\n min-height: px-to-rem(180px);\n padding-top: pad(small);\n padding-bottom: pad(small);\n margin-top: auto;\n\n @include media-breakpoint-up(md) {\n padding-right: pad();\n padding-left: pad();\n }\n\n @include media-breakpoint-down(sm) {\n padding-right: pad(small);\n padding-left: pad(small);\n }\n }\n\n //\n // Modifiers\n // -------------------------\n\n &--bordered {\n border: px-to-rem(1px) solid $g-border-color;\n }\n}\n","//\n// Box\n//\n// Markup:\n// \n//
Vizyonumuz \n//
Türkiye ve Katar merkezli olmak üzere, Ortadoğu, Körfez Ülkeleri, Kuzey Afrika ve Türki Cumhuriyetleri kapsayan bölgede, Savunma Sanayi kara araçları, otobüs, kamyon, motor ve bunlara ilişkili teknolojiler alanında, Lider ve Milli bir teknoloji şirketi olmak.
\n//
Lorem Ipsum \n//\n// Styleguide Components.Price-List-Label\n\n.c-price-list-label {\n @include heading-styles($color: $color-outer-space, $line-height: 1.2);\n display: block;\n}\n","//\n// Price List\n//\n// Markup: c-price-list.twig\n//\n// Styleguide Components.Price-List\n\n.c-price-list {\n @include list-unstyled($margin-bottom: 0);\n\n //\n // Elements\n // -------------------------\n\n &__item {\n padding: pad();\n\n &:nth-child(odd) {\n background-color: $color-white-smoke;\n }\n }\n\n &__product-title {\n margin-top: 0;\n margin-bottom: gap(2xsmall);\n color: $color-outer-space;\n font-size: $g-font-size-base;\n text-transform: uppercase;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Blockquote\n//\n// Markup: c-blockquote.twig\n//\n// Styleguide Components.Blockquote\n\n.c-blockquote {\n padding: pad();\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTcgMTAwIj48ZyBmaWxsPSIjRjBGMEYwIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjxwYXRoIGQ9Ik0xMTYuODA1IDI3LjU5MmwuMDAxLS4wMzdDMTE2LjgwNiAxMi4zMzYgMTA0LjE4IDAgODguNjAxIDAgNzMuMDI0IDAgNjAuMzk2IDEyLjMzNiA2MC4zOTYgMjcuNTU1YzAgMTUuMjE4IDEyLjYyOSAyNy41NTQgMjguMjA1IDI3LjU1NCAzLjIwMiAwIDYuMjY2LS41NDUgOS4xMzQtMS41MDZDOTEuMzg5IDg5LjE2NyA2MyAxMTIuMTAyIDg5LjMxNiA5My4yMjZjMjkuMTgtMjAuOTMxIDI3LjUyMi02NC44MyAyNy40OS02NS42MzR6TTI4LjIwNSA1NS4xMDlhMjguNyAyOC43IDAgMCAwIDkuMTM1LTEuNTA2Yy02LjM0NyAzNS41NjQtMzQuNzM1IDU4LjQ5OS04LjQyIDM5LjYyM0M1OC4xIDcyLjI5NSA1Ni40NDIgMjguMzk2IDU2LjQxIDI3LjU5MmwuMDAxLS4wMzdDNTYuNDEgMTIuMzM2IDQzLjc4MyAwIDI4LjIwNSAwIDEyLjYyOCAwIDAgMTIuMzM2IDAgMjcuNTU1YzAgMTUuMjE4IDEyLjYyOSAyNy41NTQgMjguMjA1IDI3LjU1NHoiLz48L2c+PC9zdmc+');\n background-position: center center;\n background-repeat: no-repeat;\n background-size: px-to-rem(117px) auto;\n text-align: center;\n\n @include media-breakpoint-up(md) {\n margin: gap(large);\n }\n\n @include media-breakpoint-down(sm) {\n margin: gap(small) 0;\n }\n\n &__text {\n margin-top: 0;\n color: $color-outer-space;\n font-size: $g-font-size-xlarge;\n }\n}\n","//\n// Alert\n//\n// Markup:\n// \n//
Title \n// This is alert, check it out!\n// \n//\n// .c-alert--primary - Primary\n// .c-alert--danger - Danger\n// .c-alert--success - Success\n// .c-alert--warning - Warning\n//\n// Styleguide Components.Alert\n\n/* uncss:ignore start */\n.c-alert {\n padding: pad(small);\n border-top: px-to-rem(3px) solid;\n background-color: lighten($color-fiord, 62%);\n border-bottom-left-radius: px-to-rem(2px);\n border-bottom-right-radius: px-to-rem(2px);\n color: $color-fiord;\n\n &__title {\n margin-top: 0;\n margin-bottom: 0;\n line-height: 1.2;\n text-transform: uppercase;\n }\n\n &--primary {\n background-color: $color-pattens-blue;\n border-color: $primary-color;\n\n > .c-alert__title {\n color: $primary-color;\n }\n }\n\n &--danger {\n background-color: $color-cinderella;\n border-color: $alert-color;\n\n > .c-alert__title {\n color: $alert-color;\n }\n }\n\n &--success {\n background-color: $color-panache;\n border-color: $success-color;\n\n > .c-alert__title {\n color: $success-color;\n }\n }\n\n &--warning {\n background-color: $color-pearl-lusta;\n border-color: $warning-color;\n\n > .c-alert__title {\n color: $warning-color;\n }\n }\n}\n/* uncss:ignore end */\n","//\n// Sprite Spin Container\n//\n// Markup:\n//
\n//\n// Styleguide Components.Sprite-Spin-Container\n\n.c-sprite-spin-container {\n margin-right: auto;\n margin-left: auto;\n background-image: url('../img/sprite-spin-container-bg.svg');\n background-position: center bottom;\n background-repeat: no-repeat;\n background-size: contain;\n cursor: grab;\n\n &:active {\n cursor: grabbing;\n }\n\n //\n // Elements\n // -------------------------\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Marker\n//\n// Markup:\n// 9 \n//\n// Styleguide Components.Marker\n\n/* uncss:ignore */\n.c-marker {\n display: flex;\n width: em(33px);\n height: em(44px);\n justify-content: center;\n padding-top: px-to-rem(4px);\n background-image: url('../img/marker.svg');\n background-repeat: no-repeat;\n color: $color-white;\n font-weight: 500;\n}\n","//\n// Button Unstyled\n//\n// Markup:\n// Lorem Ipsum \n//\n// Styleguide Components.Button-Unstyled\n\n.c-button-unstyled {\n padding: em(2px) em(4px);\n border: 0;\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n line-height: (24 / 16);\n}\n","//\n// Tooltip\n//\n// Markup:\n// \n//\n// Styleguide Components.Tooltip\n\n/* uncss:ignore start */\n.c-tooltip {\n $z-index-inner: 1;\n $z-index-arrow: 2;\n $arrow-size: px-to-rem(12px);\n position: relative;\n z-index: $g-z-index-c-tooltip;\n animation: fadeIn 0.2s;\n\n //\n // Elements\n // -------------------------\n\n &__inner {\n max-width: 100%;\n padding: pad(2xsmall) pad(xsmall);\n background-color: $color-white;\n border-radius: px-to-rem(4px);\n box-shadow: 0 px-to-rem(2px) px-to-rem(10px) 0 rgba(0, 0, 0, 0.05);\n }\n\n &__arrow {\n position: absolute;\n display: block;\n width: $arrow-size;\n height: $arrow-size;\n background-color: $color-white;\n box-shadow: px-to-rem(-2px) px-to-rem(2px) px-to-rem(2px) 0 rgba(0, 0, 0, 0.05);\n content: '';\n }\n\n &[x-placement='top'],\n &[x-placement='top-start'],\n &[x-placement='top-end'] {\n padding-bottom: $arrow-size;\n\n > .c-tooltip__arrow {\n bottom: ($arrow-size / 2);\n transform: rotate(-45deg);\n }\n }\n\n &[x-placement='top-start'] {\n > .c-tooltip__inner {\n transform: translateX(#{($arrow-size / 2) * -1});\n }\n }\n\n &[x-placement='top-end'] {\n > .c-tooltip__inner {\n transform: translateX(($arrow-size / 2));\n }\n }\n\n &[x-placement='bottom'],\n &[x-placement='bottom-start'],\n &[x-placement='bottom-end'] {\n padding-top: $arrow-size;\n\n > .c-tooltip__arrow {\n top: ($arrow-size / 2);\n transform: rotate(135deg);\n }\n }\n\n &[x-placement='bottom-start'] {\n > .c-tooltip__inner {\n transform: translateX(#{($arrow-size / 2) * -1});\n }\n }\n\n &[x-placement='bottom-end'] {\n > .c-tooltip__inner {\n transform: translateX(($arrow-size / 2));\n }\n }\n\n &[x-placement='right'],\n &[x-placement='right-start'],\n &[x-placement='right-end'] {\n padding-left: $arrow-size;\n\n > .c-tooltip__arrow {\n left: ($arrow-size / 2);\n transform: rotate(45deg);\n }\n }\n\n &[x-placement='right-start'] {\n > .c-tooltip__inner {\n transform: translateY(#{($arrow-size / 2) * -1});\n }\n }\n\n &[x-placement='right-end'] {\n > .c-tooltip__inner {\n transform: translateY(($arrow-size / 2));\n }\n }\n\n &[x-placement='left'],\n &[x-placement='left-start'],\n &[x-placement='left-end'] {\n padding-right: $arrow-size;\n\n > .c-tooltip__arrow {\n right: ($arrow-size / 2);\n transform: rotate(-135deg);\n }\n }\n\n &[x-placement='left-start'] {\n > .c-tooltip__inner {\n transform: translateY(#{($arrow-size / 2) * -1});\n }\n }\n\n &[x-placement='left-end'] {\n > .c-tooltip__inner {\n transform: translateY(($arrow-size / 2));\n }\n }\n\n //\n // Modifiers\n // -------------------------\n}\n/* uncss:ignore end */\n","//\n// Feature Expand Button\n//\n// Markup:\n// \n// \n// \n// \n//\n// .is-expanded - Expanded\n//\n// Styleguide Components.Feature-Expand-Button\n\n.c-feature-expand-button {\n position: relative;\n display: inline-flex;\n width: px-to-rem(24px);\n height: px-to-rem(24px);\n align-items: center;\n justify-content: center;\n padding: em(2px) em(4px);\n border: 0;\n background-color: $color-white;\n border-radius: 50%;\n box-shadow: 0 px-to-rem(2px) px-to-rem(35px) rgba($color-black, 0.4);\n color: $primary-color;\n cursor: pointer;\n\n &::before {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n border: px-to-rem(2px) solid $color-white;\n border-radius: 50%;\n content: '';\n opacity: 0;\n pointer-events: none;\n }\n\n // Button icon\n &__icon {\n transition: transform $g-transition-duration;\n }\n\n &:not(.is-expanded)::before {\n animation: pulse linear 2s infinite;\n }\n\n // Activated\n &.is-expanded {\n > .c-feature-expand-button__icon {\n transform: rotate(45deg);\n }\n }\n}\n","//\n// Feature Map\n//\n// Markup:\n// \n//
\n// \n//
\n// \n// \n// \n// \n//
\n//
\n// Yana Yatma Sistemi (Kneeling) \n// Araç durduğunda yana doğru hafifçe yatarak, iniş ve binişleri her yaştan yolcu için çok daha kolay ve rahat hale getiriyor.\n//
\n//\n// Styleguide Components.Feature-Tooltip-Content\n\n.c-feature-tooltip-content {\n font-size: $g-font-size-xsmall;\n\n //\n // Elements\n // -------------------------\n\n &__title {\n display: block;\n color: $primary-color;\n font-weight: 500;\n white-space: nowrap;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Modal\n//\n// Styleguide Components.Modal\n\n//\n// Timeline\n//\n// Markup: c-modal-timeline.twig\n//\n// Styleguide Components.Modal.Timeline\n\n.c-modal {\n display: none;\n\n &.is-open {\n display: block;\n }\n\n &[aria-hidden='false'] .c-modal__overlay {\n animation: fadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);\n }\n\n &[aria-hidden='false'] .c-modal__container {\n animation: modalSlideIn 0.3s cubic-bezier(0, 0, 0.2, 1);\n }\n\n &[aria-hidden='true'] .c-modal__overlay {\n animation: fadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);\n }\n\n &[aria-hidden='true'] .c-modal__container {\n animation: modalSlideOut 0.3s cubic-bezier(0, 0, 0.2, 1);\n }\n\n //\n // Elements\n // -------------------------\n\n &__overlay {\n position: fixed;\n z-index: $g-z-index-c-modal;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: rgba($color-black, 0.5);\n overflow-x: hidden;\n overflow-y: auto;\n will-change: transform;\n\n @include media-breakpoint-up(md) {\n padding-right: pad(small);\n padding-left: pad(small);\n }\n\n @include media-breakpoint-down(sm) {\n padding-right: pad(xsmall);\n padding-left: pad(xsmall);\n }\n\n &--centered {\n display: flex;\n align-items: center;\n }\n }\n\n &__container {\n overflow: hidden;\n max-width: px-to-rem(750px);\n flex-grow: 1;\n // border: 1px solid $color-oslo-gray;\n margin: gap(xlarge) auto;\n background-color: $color-white;\n // border-radius: px-to-rem(4px);\n box-shadow: 0 px-to-rem(2px) px-to-rem(35px) 0 rgba(0, 0, 0, 0.15);\n will-change: transform;\n\n &--large {\n max-width: px-to-rem(900px);\n }\n\n &--small {\n max-width: px-to-rem(300px);\n }\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Downloadable Media\n//\n// Markup: c-downloadable-media.twig\n//\n// Styleguide Components.Downloadable-Media\n\n.c-downloadable-media {\n $z-index-overlayer: 1;\n $z-index-container: 2;\n\n position: relative;\n display: block;\n\n &:hover {\n text-decoration: none;\n\n > .c-downloadable-media__container {\n opacity: 1;\n pointer-events: auto;\n }\n }\n\n //\n // Elements\n // -------------------------\n\n // &::after {\n // position: absolute;\n // z-index: $z-index-overlayer;\n // top: 0;\n // right: 0;\n // bottom: 0;\n // left: 0;\n // display: block;\n // background-color: $color-black;\n // content: '';\n // opacity: 0;\n // transition: opacity $g-transition-duration;\n // }\n\n &__container {\n position: absolute;\n z-index: $z-index-container;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n padding: pad(small);\n background-color: rgba($color-black, 0.3);\n color: $color-white;\n opacity: 0;\n pointer-events: none;\n transition: opacity $g-transition-duration;\n }\n\n &__img {\n display: block;\n width: 100%;\n height: auto;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Animated Text\n//\n// Markup:\n// \n// Hello\n//
\n// World! \n// Boys! \n// \n//
\n// Cras justo odio \n// Dapibus ac facilisis in \n// Morbi leo risus \n// Porta ac consectetur ac \n// Vestibulum at eros \n// \n//\n// Styleguide Objects.List-Unstyled\n\n.o-list-unstyled {\n @include list-unstyled($margin-bottom: 0);\n}\n","//\n// Product Hero\n//\n// Markup:\n//\n// Styleguide\n\n.o-section-product-hero {\n display: flex;\n\n @include media-breakpoint-up(lg) {\n align-items: center;\n padding-top: pad(2xlarge);\n padding-bottom: pad(2xlarge);\n }\n\n @include media-breakpoint-down(md) {\n flex-direction: column-reverse;\n padding-top: pad(xlarge);\n padding-bottom: pad(xlarge);\n }\n\n //\n // Elements\n // -------------------------\n\n &__image-col {\n padding-right: pad(xsmall);\n\n @include media-breakpoint-up(lg) {\n max-width: percentage(7 / 12);\n flex: 0 0 percentage(7 / 12);\n }\n\n @include media-breakpoint-down(md) {\n padding-top: pad(large);\n }\n }\n\n &__content-col {\n padding-left: pad(xsmall);\n\n @include media-breakpoint-up(lg) {\n max-width: percentage(4 / 12);\n flex: 0 0 percentage(4 / 12);\n padding-right: pad(xsmall);\n }\n\n @include media-breakpoint-down(md) {\n max-width: map-get($container-max-widths, md);\n align-self: center;\n padding-right: pad();\n text-align: center;\n }\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Subheader\n//\n// Markup:\n//\n// Styleguide\n\n.o-subheader {\n @include media-breakpoint-up(md) {\n padding-top: pad(small);\n padding-bottom: pad(small);\n }\n\n @include media-breakpoint-down(sm) {\n padding-top: pad(2xsmall);\n padding-bottom: pad(2xsmall);\n }\n\n //\n // Elements\n // -------------------------\n\n &__inner {\n display: flex;\n align-items: center;\n }\n\n &__title {\n margin-top: 0;\n margin-bottom: 0;\n font-size: $g-font-size-medium;\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Subheader Menu\n//\n// Markup:\n//\n// Styleguide\n\n.o-subheader-menu {\n @include list-unstyled($margin-bottom: 0);\n\n display: flex;\n font-size: $g-font-size-small;\n\n @include media-breakpoint-down(sm) {\n display: none;\n }\n\n //\n // Elements\n // -------------------------\n\n &__item {\n & + & {\n margin-left: gap();\n }\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Specification Title\n//\n// Markup:\n//\n// Styleguide\n\n.o-specification-title {\n font-weight: 700;\n\n @include media-breakpoint-up(md) {\n font-size: px-to-rem(36px);\n }\n\n @include media-breakpoint-down(sm) {\n font-size: px-to-rem(26px);\n }\n}\n","//\n// Defense Industry Jumbotron Content\n//\n// Markup:\n//\n// Styleguide\n\n.o-defense-industry-jumbotron-content {\n // 1. Added for fixing the bug that the content does not fit the container occurs on IE :/\n\n width: 100%; // [1]\n justify-content: flex-start;\n padding-top: 9%;\n}\n","//\n// Promotion Section\n//\n// Markup:\n//\n// Styleguide\n\n.o-promotion-big-section {\n height: 100%;\n}\n","//\n// Promotion Section\n//\n// Markup:\n//\n// Styleguide\n\n.o-promotion-small-section {\n flex-grow: 1;\n flex-shrink: 0;\n font-size: $g-font-size-small;\n\n & + & {\n margin-top: gap(medium);\n }\n}\n","//\n// Price List Header\n//\n// Markup: o-price-list-header.twig\n//\n// Styleguide Objects.Price-List-Header\n\n.o-price-list-header {\n align-items: center;\n padding: pad(xsmall) pad(medium);\n text-align: center;\n\n @include media-breakpoint-down(md) {\n display: none;\n }\n}\n","//\n// Home Slider\n//\n// Markup:\n//\n// Styleguide\n\n.o-home-slider {\n // stylelint-disable scale-unlimited/declaration-strict-value\n &:not(.slick-initialized) {\n > .c-jumbotron:not(:first-child) {\n position: absolute;\n z-index: -1;\n }\n }\n}\n","//\n// Filter List\n//\n// Markup: o-filter-list.twig\n//\n// Styleguide Objects.Filter-List\n\n.o-filter-list {\n $gutter: px-to-rem(16px);\n @include list-unstyled($margin-bottom: 0);\n\n display: flex;\n margin-right: (($gutter / 2) * -1);\n margin-left: (($gutter / 2) * -1);\n\n //\n // Elements\n // -------------------------\n &__item {\n padding-right: ($gutter / 2);\n padding-left: ($gutter / 2);\n }\n\n //\n // Modifiers\n // -------------------------\n}\n","//\n// Dynamic Content\n//\n// Markup:\n//\n// Styleguide\n\n/* uncss:ignore start */\n.o-dynamic-content {\n img {\n @include img-fluid;\n }\n}\n/* uncss:ignore end */\n","// Clearfix\n//\n// For modern browsers\n// 1. The space content is one way to avoid an Opera bug when the\n// contenteditable attribute is included anywhere else in the document.\n// Otherwise it causes space to appear at the top and bottom of elements\n// that are clearfixed.\n// 2. The use of `table` rather than `block` is only necessary if using\n// `:before` to contain the top-margins of child elements.\n//\n// Source: http://nicolasgallagher.com/micro-clearfix-hack/\n\n@mixin clearfix() {\n &::before,\n &::after {\n display: table; // 2\n content: ' '; // 1\n }\n\n &::after {\n clear: both;\n }\n}\n","//\n// Common\n//\n// | Class | Description |\n// | -------------------------- | ------------- |\n// | `.u-clearfix` | Clear any floats within an element. Can also be used as a mixin. `@include clearfix` |\n// | `.u-pull-right` | Set `float: right` |\n// | `.u-pull-left` | Set `float: left` |\n// | `.u-circle` | Set `border-radius: 50%` |\n// | `.u-static` | Set `position: static` |\n// | `.u-relative` | Set `position: relative` |\n// | `.u-overflow-hidden` | Set `overflow: hidden` |\n// | `.u-img-fluid` | Responsive images (ensure images don't scale beyond their parents) |\n// | `.u-text-truncate` | For longer content, you can add this class to truncate the text with an ellipsis. Requires `display: inline-block` or `display: block`. Can also be used as a mixin. `@include text-truncate`|\n// | `.u-equalize-line-height` | Set `line-height: 1` |\n// | `.u-block-center` | horizontally center the block element |\n// | `.u-table-layout-fixed` | Set `table-layout: fixed` |\n// | `.u-transition-background` | Set transition to background-color |\n// | `.u-transition-color` | Set transition to color |\n// | `.u-transition-opacity` | Set transition to opacity |\n// | `.u-transition-transform` | Set transition to opacity |\n// | `.u-unselectable` | Prevents the text from being selectable |\n// | `.u-pointer-events-none` | Make element not react to pointer events, like `:hover` or `click`. |\n// | `.u-cursor-pointer` | Set the mouse cursor to a pointer and indicate a link. |\n// | `.u-visually-hidden` | Visually hides the text |\n//\n// Styleguide Utilities.Common\n\n.u-clearfix {\n @include clearfix;\n}\n\n.u-pull-right {\n float: right;\n}\n\n.u-pull-left {\n float: left;\n}\n\n.u-circle {\n border-radius: 50%;\n}\n\n.u-static {\n position: static;\n}\n\n.u-relative {\n position: relative;\n}\n\n.u-overflow-hidden {\n overflow: hidden;\n}\n\n.u-visually-hidden {\n position: absolute;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n}\n\n// Responsive images (ensure images don't scale beyond their parents)\n//\n// This is purposefully opt-in via an explicit class rather than being the default for all `Set the text color of an element to muted color. |\n// | `u-color-primary` | Set the text color of an element to primary color. |\n// | `u-color-success` | Set the text color of an element to success color. |\n// | `u-color-alert` | Set the text color of an element to alert color. |\n// | `u-color-warning` | Set the text color of an element to warning color. |\n// | `u-color-outer-space` | Set the text color of an element. |\n// | `u-color-gray` | Set the text color of an element. |\n// | `u-color-mercury` | Set the text color of an element. |\n// | `u-color-white` | Set the text color of an element. |\n// | `u-color-athens-gray` | Set the text color of an element. |\n// | `u-color-azure-radiance` | Set the text color of an element. |\n//\n// Styleguide Utilities.Colors.Color\n\n//\n// Contextual colors\n// -------------------------\n\n/* uncss:ignore start */\n.u-color-muted {\n color: $g-text-muted-color;\n}\n\n.u-color-primary {\n color: $primary-color;\n}\n\n.u-color-success {\n color: $success-color;\n}\n\n.u-color-alert {\n color: $alert-color;\n}\n\n.u-color-warning {\n color: $warning-color;\n}\n/* uncss:ignore end */\n\n.u-color-outer-space {\n color: $color-outer-space;\n}\n\n.u-color-gray {\n color: $color-gray;\n}\n\n.u-color-mercury {\n color: $color-mercury;\n}\n\n.u-color-white {\n color: $color-white;\n}\n\n.u-color-athens-gray {\n color: $color-athens-gray;\n}\n\n.u-color-azure-radiance {\n color: $color-azure-radiance;\n}\n\n//\n// Background\n//\n// | Class | Description |\n// | ------------------------ | ------------- |\n// | `u-bg-primary` | Lorem ipsum dolor sit amet
|\n// | `u-bg-success` | Lorem ipsum dolor sit amet
|\n// | `u-bg-alert` | Lorem ipsum dolor sit amet
|\n// | `u-bg-warning` | Lorem ipsum dolor sit amet
|\n// | `u-bg-white` | Lorem ipsum dolor sit amet
|\n// | `u-bg-ghost` | Lorem ipsum dolor sit amet
|\n// | `u-bg-color-athens-gray` | Lorem ipsum dolor sit amet
|\n// | `u-bg-gainsboro` | Lorem ipsum dolor sit amet
|\n// | `u-bg-heavy-metal` | Lorem ipsum dolor sit amet
|\n//\n// Styleguide Utilities.Colors.Background\n\n.u-bg-primary {\n background-color: $primary-color;\n}\n\n.u-bg-success {\n background-color: $success-color;\n}\n\n.u-bg-alert {\n background-color: $alert-color;\n}\n\n.u-bg-warning {\n background-color: $warning-color;\n}\n\n.u-bg-ghost {\n background-color: $color-ghost;\n}\n\n.u-bg-color-athens-gray {\n background-color: $color-athens-gray;\n}\n\n.u-bg-white {\n background-color: $color-white;\n}\n\n.u-bg-gainsboro {\n background-color: $color-gainsboro;\n}\n\n.u-bg-heavy-metal {\n background-color: $color-heavy-metal;\n}\n","//\n// Display\n//\n// | Class | Description |\n// | ------------------ | ------------- |\n// | `.u-block` | Set the box type of the element to `block`. |\n// | `.u-inline-block` | Set the box type of the element to `inline-block` |\n// | `.u-inline` | Set the box type of the element to `inline`. |\n// | `.u-table` | Set the box type of the element to `table`. |\n// | `.u-table-row` | Set the box type of the element to `table-row`. |\n// | `.u-table-cell` | Set the box type of the element to `table-cell`. |\n// | `.u-flex` | Set the box type of the element to `flex`. You can use this class with responsive breakpoints;