/* ==========================================================================
   Giris (login) modalinin stilleri. Kullanan sayfalar:
     Giris/Index -> Views/Login/Login.cshtml
                    Views/Login/SifreyleOturum.cshtml
                    Views/Login/FastLogin.cshtml
                    Views/Login/MobileLogin.cshtml
                    Views/Login/SMSLogin.cshtml
                    Views/Login/TCKimlikSifreyleOturum.cshtml

   Ayni view hem "#login" modalinin icine AJAX ile yuklenir hem de returnUrl
   dolu geldiginde tam sayfa olarak render edilir; bu dosya iki durumu da
   kapsar.

   Bootstrap 3.4.1 uzerine kurgulanmistir.

   Tum seciciler ".gm-" onekli ve ".gm-wrap" altinda kapsamlandirilmistir,
   bu yuzden diger sayfalari etkilemez. Renk paleti Content/UyelikDuzenle.css
   ile ayni tutulmustur.

   TEMALAR:
   Bu dosya App_Start/BundleConfig.cs icinde "~/Content/css" ve
   "~/Content/cssone" stil bundle'larina eklenmistir. Temalar kendi
   _HeadPartial.cshtml'ini tasiyabildigi icin bundle'a konmustur; boylece her
   temada yuklenir. Temanin ~/Views/CustomTheme/<Tema>/Css/Custom.css dosyasi
   her zaman bundle'dan SONRA geldiginden, belediyeye ozel tema ayni secici
   ozgullugu ile buradaki degerleri ezebilir. Bir temayi renklendirmek icin
   genelde su birkac secici yeterlidir:
     .gm-head            -> ust bandin arka plani (degrade)
     .gm-wrap .gm-btn    -> birincil giris dugmesi
     .gm-card-ico        -> kart basligi ikon rozeti
     .gm-seg > li.active > a  -> secili sekme
     .gm-note            -> bilgi kutucugu

   TIPOGRAFI:
   font-family tanimi YOKTUR; yazi tipi temadan gelir (Content/Site.css ->
   body { font-family: Open-Sans-Regular }). Olcek de menu linkleriyle ayni
   tutulmustur (1em / 14px) ve asagidaki "Yazi olcegi" bolumunde tek yerde
   toplanmistir; degistirmek isteyen temanin yalnizca orayi ezmesi yeterlidir.

   ONEMLI - !important:
   Content/Site.css icindeki "input, select, textarea { border-radius: 0 }"
   kurali !important tasidigi icin, form elemanlarinin koseleri de ancak
   !important ile yuvarlatilabiliyor.
   ========================================================================== */


/* --------------------------------------------------------- Yazi olcegi ---- */
/* Popup metinleri menu linkleriyle ayni olcude olsun istenmistir:
   Site.css -> .menuArea .container .navbar-nav > li > a font-size tanimlamaz,
   yani body'den gelen 14px (1em) ile cizilir. Asagidaki govde metinleri de
   bu yuzden 1em'dir. Yazi ailesi zaten temadan (body -> Open-Sans-Regular)
   miras alindigi icin burada tanimlanmaz.

   Kutu olculeri (40px kutu, 42px dugme, 120px etiket sutunu) bu bolume bagli
   degildir; olcegi degistirmek yerlesimi bozmaz. */
/* Modalin ana basligi kart basliklarindan (1.25em) bir kademe yukarida kalir,
   yoksa ikisi ayni boyutta olup hiyerarsi duzlesiyor. */
.gm-head-text h4 {
    font-size: 1.4em; /* ~19.5px */
}

.gm-head-text p,
.gm-seg > li > a,
.gm-wrap .gm-label,
.gm-links a,
.gm-radio,
.gm-wrap input.gm-input,
.gm-wrap select.gm-input,
.gm-wrap .gm-btn,
.gm-note,
.gm-wrap .validation-summary-errors {
    font-size: 1em; /* menu linkleriyle ayni: 14px */
}

/* Kart basliklari ("Hizli Sorgulama", "Uye Girisi") govde metninden iki
   kademe buyuk: 1em'de ve kalinken alan etiketleriyle karisiyorlardi. */
.gm-card-title,
.gm-sub {
    font-size: 1.25em; /* ~17.5px */
}

/* Alan altindaki ikincil aciklamalar ve dogrulama mesajlari bir tik kucuk */
.gm-hint,
.gm-wrap .text-danger {
    font-size: 0.9em;
}


/* ------------------------------------------------------- Modal kabugu ----- */
.gm-dialog {
    display: table;
    height: 90%;
}

    .gm-dialog .gm-valign {
        display: table-cell;
        vertical-align: middle;
    }

/* Tek kartli kutu (SMS ile giris). "display: table" genisligi icerige gore
   kuculttugu icin genislik acikca verilir; 768px altinda mobil kurali
   (display: block) zaten tam genislik verir. */
@media (min-width: 768px) {
    .gm-dialog.gm-dialog-tek {
        width: 480px;
    }
}

.gm-modal {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10,30,50,.28);
    overflow: hidden;
}

/* Bootstrap'in varsayilan "yukaridan kay" animasyonu yerine daha yumusak bir giris */
.modal.fade .gm-dialog {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
}

.modal.in .gm-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}


/* ----------------------------------------------------------- Ust bant ----- */
.gm-head {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 18px 56px 18px 22px;
    background: #035177;
    background: linear-gradient(135deg, #035177 0%, #4c87b9 100%);
    color: #fff;
}

.gm-head-ico {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin-right: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.16);
    line-height: 46px;
    text-align: center;
}

    .gm-head-ico > .bi {
        font-size: 22px; /* ikon boyutu */
    }

.gm-head-text {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

    .gm-head-text h4 {
        margin: 0;
        color: #fff;
    }

    .gm-head-text p {
        margin: 3px 0 0;
        color: rgba(255,255,255,.82);
    }

.gm-close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    line-height: 30px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    cursor: pointer;
}

    .gm-close:hover,
    .gm-close:focus {
        background: rgba(255,255,255,.3);
        color: #fff;
        opacity: 1;
        outline: none;
    }


/* --------------------------------------------------------------- Govde ---- */
.gm-body {
    padding: 18px;
    background: #f7fafd;
}

.gm-row {
    margin-right: -7px;
    margin-left: -7px;
}

.gm-col {
    padding: 7px;
}

/* Kolonlar yan yana geldiginde iki kartin boyu esitlensin diye satir flex olur;
   col-md-* genislikleri yuzde oldugu icin flex icinde de aynen calisir. */
@media (min-width: 992px) {
    .gm-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}


/* -------------------------------------------------------------- Kartlar --- */
.gm-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e3e9f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16,42,67,.05);
}

/* Baslik bandi govdeden ayrilsin diye hafif zeminli; ust koseler kartin
   14px yaricapina uyar (1px cerceve dusulerek 13px). */
.gm-card-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid #e3e9f1;
    border-radius: 13px 13px 0 0;
    background: #f5f9fc;
}

.gm-card-ico {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-right: 11px;
    border-radius: 9px;
    background: #eaf2f9;
    color: #035177;
    font-size: 15px; /* ikon boyutu */
    line-height: 32px;
    text-align: center;
}

/* Site.css icindeki .h4Design ile ayni his: kalin + mavi baslik. */
.gm-card-title {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    font-weight: bold;
    color: #20364a;
}

.gm-card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 16px;
}


/* ------------------------------------------------ Sekmeler (segment) ------ */
/* Bootstrap'in tab eklentisi "data-toggle=tab" ile calisir; nav-tabs sinifina
   ihtiyac duymaz. Bu yuzden eski sekme gorunumu tamamen degistirilebiliyor. */
.gm-seg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid #e3e9f1;
    border-radius: 11px;
    background: #eef3f8;
}

    .gm-seg > li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
        min-width: 0;
    }

        /* Etiketler 14px'e cikinca tek satira sigmiyor; ucundan kesmek yerine
           alt satira sarmalari birakildi (li'ler flex oldugu icin sekmelerin
           yuksekligi yine esit kalir). */
        .gm-seg > li > a {
            display: block;
            padding: 8px 10px;
            border-radius: 8px;
            color: #41586e;
            text-align: center;
            white-space: normal;
            -webkit-transition: background .15s ease, color .15s ease;
            transition: background .15s ease, color .15s ease;
        }

            .gm-seg > li > a > .bi,
            .gm-seg > li > a > img {
                margin-right: 6px;
            }

            .gm-seg > li > a > img {
                height: 16px;
                vertical-align: -3px;
            }

        .gm-seg > li:not(.active) > a:hover,
        .gm-seg > li:not(.active) > a:focus {
            background: rgba(255,255,255,.7);
            color: #20364a;
        }

        .gm-seg > li.active > a,
        .gm-seg > li.active > a:hover,
        .gm-seg > li.active > a:focus {
            background: #fff;
            color: #035177;
            font-weight: bold;
            box-shadow: 0 1px 3px rgba(16,42,67,.14);
        }

.gm-seg-wrap {
    padding: 14px 16px 0;
}


/* --------------------------------------------------------- Form alanlari -- */
/* kart icindeki ara baslik (ornegin "Su Borc Sorgulama") */
.gm-sub {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf1f6;
    color: #20364a;
    font-weight: bold;
}

    .gm-sub > .bi {
        margin-right: 7px;
        color: #4c87b9;
    }

.gm-field {
    margin-bottom: 12px;
}

/* font-weight: Bootstrap "label { font-weight: bold }" diyor; etiketler kart
   basligiyla ayni agirlikta olunca ikisi birbirine karisiyordu, bu yuzden
   normale cekildi. */
.gm-wrap .gm-label {
    display: block;
    margin-bottom: 6px;
    color: #41586e;
    font-weight: normal;
}

/* Yatay duzen: etiket solda, alan sagda. 768px altinda (modal tam genislige
   indiginde) alan daralmasin diye otomatik olarak alt alta duser.
   Etiket sola hizalidir; iki satira tasan etiketlerde ve RTL dillerde (ar)
   saga hizalamadan daha duzgun okunur. */
@media (min-width: 768px) {
    .gm-field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .gm-wrap .gm-field > .gm-label {
        -ms-flex: 0 0 120px;
        flex: 0 0 120px;
        width: 120px;
        margin-bottom: 0;
        padding: 11px 10px 0 0; /* 40px'lik kutuyla ayni hizaya getirir */
    }

    .gm-field-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Alt alta kalmasi gereken alanlar. Dar sutunda (col-md-5) duran Hizli
       Sorgulama karti, dar kutudaki (gm-dialog-tek) SMS karti ve radyo cipi
       secimi bu sinifi kullanir; 120px'lik etiket sutunu oralarda kutuya cok
       az yer biraktigi icin yatay duzen uygulanmaz. */
    .gm-wrap .gm-field-stack {
        display: block;
    }

        .gm-wrap .gm-field-stack > .gm-label {
            width: auto;
            padding: 0 0 6px;
        }

    /* etiket sutununun altinda kalmasin diye alan sutunuyla hizalanir */
    .gm-inline-offset {
        margin-left: 120px;
    }
}

.gm-input-wrap {
    position: relative;
}

    /* kutunun icindeki sol ikon */
    .gm-input-wrap > .gm-ico {
        position: absolute;
        left: 0;
        top: 0;
        width: 38px;
        height: 40px;
        color: #8a9bad;
        font-size: 14px; /* ikon boyutu */
        line-height: 40px;
        text-align: center;
        pointer-events: none;
    }

.gm-wrap input.gm-input,
.gm-wrap select.gm-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid #dbe3ec;
    border-radius: 10px !important;
    background-color: #fff;
    color: #20364a;
    line-height: normal;
    box-shadow: none;
    -webkit-transition: border-color .15s ease, box-shadow .15s ease;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .gm-wrap input.gm-input:focus,
    .gm-wrap select.gm-input:focus {
        border-color: #4c87b9;
        box-shadow: 0 0 0 3px rgba(76,135,185,.16);
        outline: none;
    }

    /* ikon tasimayan kutular (ornegin select) solda bosluk birakmaz */
    .gm-wrap .gm-input.gm-input-plain {
        padding-left: 12px;
    }

/* alan altindaki kucuk aciklama satiri (placeholder'a sigmayan yonlendirmeler) */
.gm-hint {
    display: block;
    margin-top: 5px;
    color: #6b7d8f;
}

    .gm-hint:empty {
        display: none;
    }

    .gm-hint > .bi {
        margin-right: 5px;
    }

/* number input'larin artir/azalt oklari gizlenir (Site.css ile ayni davranis) */
.gm-wrap input.gm-input[type=number] {
    -moz-appearance: textfield;
}

/* Tarih secici: bootstrap-datetimepicker "input-group date" yapisini bekledigi
   icin yapi korunmus, yalnizca gorunumu yenilenmistir. */
.gm-wrap .gm-date {
    width: 100%;
}

    .gm-wrap .gm-date .input-group-addon {
        width: 38px;
        padding: 0;
        border: 1px solid #dbe3ec;
        border-right: 0;
        border-radius: 10px 0 0 10px !important;
        background: #fff;
        color: #8a9bad;
        cursor: pointer;
    }

    .gm-wrap .gm-date .gm-input {
        padding-left: 12px;
        border-left: 0;
        border-radius: 0 10px 10px 0 !important;
    }

    /* odak halkasi tek parca gorunsun diye kutunun kendi golgesi kapatilir ve
       halka gruba verilir (:focus-within desteklemeyen tarayicida sadece
       cerceve rengi degisir) */
    .gm-wrap .gm-date .gm-input:focus {
        box-shadow: none;
    }

    .gm-wrap .gm-date:focus-within {
        border-radius: 10px;
        box-shadow: 0 0 0 3px rgba(76,135,185,.16);
    }

        .gm-wrap .gm-date:focus-within .input-group-addon {
            border-color: #4c87b9;
        }

.gm-wrap .text-danger {
    display: block;
    margin-top: 5px;
}

.gm-wrap .validation-summary-errors {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid #f3c6c6;
    border-left: 4px solid #d91e18;
    border-radius: 10px;
    background: #fdf4f4;
}

    .gm-wrap .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }


/* --------------------------------------------- Sifre goster/gizle dugmesi - */
.gm-pass .gm-input {
    padding-right: 40px;
}

.gm-pass-toggle {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7d8f;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
}

    .gm-pass-toggle:hover,
    .gm-pass-toggle:focus {
        background: #f2f6fa;
        color: #035177;
        outline: none;
    }


/* ------------------------------------------------------- Secim dugmeleri -- */
/* Hizli giriste "Sicil No / T.C. Kimlik No / Vergi No" radyo secimi */
.gm-radios {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Ic bosluklar bilerek dar: uc cip ("Sicil No / T.C. Kimlik No / Vergi No")
   Hizli Sorgulama kartinin ~318px'lik alanina tek satirda sigsin diye.
   Daha genis bir padding ile "Vergi No" alt satira dusuyordu. */
.gm-radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 4px 6px 0;
    padding: 5px 8px;
    border: 1px solid #dbe3ec;
    border-radius: 999px;
    background: #fff;
    color: #41586e;
    font-weight: normal;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: border-color .15s ease, background .15s ease;
    transition: border-color .15s ease, background .15s ease;
}

    /* Son cipin sagindaki bosluk satirin toplam genisligine ekleniyor ve
       ucunu tek satira sigmaktan alikoyuyordu. */
    .gm-radio:last-child {
        margin-right: 0;
    }

    .gm-radio:hover {
        border-color: #bcd0e3;
        background: #f6fafd;
    }

    .gm-radio input[type="radio"] {
        width: auto;
        height: auto;
        margin: 0 5px 0 0;
    }


/* ------------------------------------------------------------- Dugmeler --- */
.gm-wrap .gm-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px !important;
    background: #035177;
    background: linear-gradient(135deg, #0a6a9a 0%, #035177 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 6px 14px rgba(3,81,119,.2);
    -webkit-transition: background .15s ease, box-shadow .15s ease;
    transition: background .15s ease, box-shadow .15s ease;
}

    .gm-wrap .gm-btn:hover,
    .gm-wrap .gm-btn:focus,
    .gm-wrap .gm-btn:active {
        background: #024361;
        color: #fff;
        box-shadow: 0 8px 18px rgba(3,81,119,.28);
    }

    .gm-wrap .gm-btn[disabled] {
        opacity: .6;
        cursor: not-allowed;
    }

    .gm-wrap .gm-btn > .bi {
        margin-right: 7px;
    }

/* e-Devlet dugmesi kurumsal kirmizi kalir */
.gm-wrap .gm-btn-edevlet {
    background: #b71c1c;
    background: linear-gradient(135deg, #c62828 0%, #a01818 100%);
    box-shadow: 0 6px 14px rgba(183,28,28,.2);
}

    .gm-wrap .gm-btn-edevlet:hover,
    .gm-wrap .gm-btn-edevlet:focus,
    .gm-wrap .gm-btn-edevlet:active {
        background: #9c1717;
        box-shadow: 0 8px 18px rgba(183,28,28,.28);
    }

    /* vertical-align gerekmiyor: dugme artik flex ve icerigini ortaliyor. */
    .gm-wrap .gm-btn-edevlet > img {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        height: 20px;
        margin-right: 10px;
    }

/* ikincil (cerceveli) dugme - ornegin SMS gonder */
.gm-wrap .gm-btn-ghost {
    background: #fff;
    border: 1px solid #cddbe9;
    color: #035177;
    box-shadow: none;
}

    .gm-wrap .gm-btn-ghost:hover,
    .gm-wrap .gm-btn-ghost:focus,
    .gm-wrap .gm-btn-ghost:active {
        background: #f2f6fa;
        color: #035177;
        box-shadow: none;
    }


/* ----------------------------------------------------- Yardimci baglantilar */
/* "Sifremi Unuttum" solda, "Yeni Kullanici" sagda; ikisi arasi bosluk
   space-between ile alan sutununun genisligine yayilir. */
.gm-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /* Kisaltma "margin" kullanilmaz: sol bosluk .gm-inline-offset'e birakilir,
       aksi halde onu sifirlayip satiri etiket sutununa kaydiriyordu. */
    margin-top: -2px;
    margin-bottom: 14px;
}

    /* Hover'da hafif zemin alabilmesi icin ic bosluk verilir; bastaki ve
       sondaki baglantinin metni yine de kutularla ayni hizada kalsin diye
       ayni miktar negatif dis boslukla geri cekilir. */
    .gm-links a {
        padding: 4px 8px;
        border-radius: 6px;
        color: #4c87b9;
        white-space: nowrap;
        -webkit-transition: background-color .15s ease, color .15s ease;
        transition: background-color .15s ease, color .15s ease;
    }

        .gm-links a:first-child {
            margin-left: -8px;
        }

        .gm-links a:last-child {
            margin-right: -8px;
        }

        .gm-links a:hover,
        .gm-links a:focus {
            background-color: #eef3f8;
            color: #035177;
            text-decoration: none;
        }

        .gm-links a > .bi {
            margin-right: 6px;
            opacity: .75;
        }


/* ------------------------------------------------------ Bilgi kutuculari -- */
.gm-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid #d7e7f5;
    border-radius: 10px;
    background: #f1f8fd;
    color: #2c5d80;
    text-align: justify;
    text-justify: inter-word;
}

    .gm-note p {
        margin: 0 0 8px;
    }

        .gm-note p:last-child {
            margin-bottom: 0;
        }

    .gm-note > .bi {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: 9px;
        font-size: 14px; /* ikon boyutu */
        line-height: 1.5;
    }

    .gm-note > span {
        min-width: 0;
    }

.gm-note-warn {
    border-color: #f0e0bd;
    background: #fdf8ee;
    color: #7a5a17;
}

.gm-note-danger {
    border-color: #f3c6c6;
    background: #fdf4f4;
    color: #a22;
}

/* uzun e-Devlet aciklamasi icin kaydirilabilir alan */
.gm-note-scroll {
    max-height: 190px;
    overflow-y: auto;
}


/* ------------------------------------------------- Modal yuklenme iskeleti - */
.gm-loading {
    padding: 60px 20px;
    text-align: center;
    color: #41586e;
}

    .gm-loading .bi {
        display: block;
        margin-bottom: 10px;
        color: #4c87b9;
        font-size: 30px; /* ikon boyutu */
        -webkit-animation: gm-spin 1s linear infinite;
        animation: gm-spin 1s linear infinite;
    }

@-webkit-keyframes gm-spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes gm-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ------------------------------------------------------------ Mobil ------- */
@media (max-width: 767px) {
    .gm-dialog {
        display: block;
        height: auto;
        margin: 10px;
    }

        .gm-dialog .gm-valign {
            display: block;
        }

    .gm-head {
        padding: 14px 50px 14px 16px;
    }

    .gm-head-ico {
        width: 40px;
        height: 40px;
        margin-right: 11px;
        border-radius: 10px;
        line-height: 40px;
    }

        .gm-head-ico > .bi {
            font-size: 19px; /* ikon boyutu */
        }

    .gm-body {
        padding: 12px;
    }

    .gm-card {
        height: auto;
    }

    /* dar ekranda sekmeler alt alta degil, yan yana sarar */
    .gm-seg > li {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
}