@import url('https://fonts.cdnfonts.com/css/segoe-ui-4');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

a {color:#000;text-decoration: none;}
html {
    box-sizing:border-box;
    
    --adet: 4;
    --adet2: calc(((100 / var(--adet)) / 100) / var(--adet));
    --adet3: calc(var(--adet) * var(--adet2));
    --aralik:calc(var(--adet) - 1);
    --spacing: 100%;
    
    --spacing2:20px;/* sağ sol padding */
    --spacing3:10px; /* gap */
    --spacing4: calc(var(--spacing3) * var(--aralik)); /* toplam gap */
    --spacing44: calc(var(--spacing4) + var(--spacing2)) + 20px; /* padding ve gap toplamı */
    --spacing5: calc(var(--spacing) - var(--spacing44)); /* toplam genişlikten kalan miktar */
    --spacing6: calc(var(--spacing5) / var(--adet));
}
body {background-color: #eef5f9;margin:0;}
.container {max-width:768px;margin:0 auto;font-family: "Roboto", sans-serif;}
.top {display:flex;justify-content:space-between;align-items:center;padding:25px;background-color: #fff;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);}
.torpinet {font-size: 30px;font-family: "Roboto", sans-serif;    font-weight: 300;letter-spacing: -2px;}
.menu {font-size:24px;margin-right:10px;}
.menu img {max-height: 25px;}
#menu {display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
#cubuk {height:2px;background-color:#000;}
#menu:hover > #cubuk {background-color:#707070;}
.cubuk1 {width:18px;}
.cubuk2 {width:23px;}
.cubuk3 {width:13px;}

.menu2 {padding:15px 25px;background-color: #fff;border-radius:5px;box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);margin-top:20px;
display:flex;align-items: center;}
.menu2 a {font-size: 12px;font-family: 'Open Sans', serif; border-radius: 3px;color:#0f1f3e;padding-bottom: 1px;}
.menu2 a:hover {color:#0d4a71}

.pazaryerleri-modul {margin-top:20px;margin-left:10px;margin-right:10px;background-color: #fff;padding:15px;box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);border-radius: 5px;}
.referans {padding:20px;background-color: #36b23e;}
.pazaryerleri-modul-baslik {margin-bottom:30px;font-size:16px;font-family: "Roboto", sans-serif;}
.pazaryerleri-modul-baslik a{letter-spacing: -1px;color:#545454;padding-bottom:8px;border-bottom:2px solid;border-image:   linear-gradient(to right, grey 25%, orange 25%, orange 50%,red 50%, red 75%, teal 75%) 5;}
.pazaryerleri {display:grid;grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));gap:20px;}
.referanslar {display:grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
.pazarlar {display:flex;align-items:center;font-size: 12px;font-family: "Roboto", sans-serif;padding: 10px;    border-radius: 8px;    border: 1px solid #eee; }
.pazarlar-img {margin-right:10px;padding-top:4px;}
.pazarlar-img img {max-width:40px !important;height:auto;border-radius: 5px;}
.referans img {object-fit: contain;    width: 100%;    height: 100%;}
.links {padding:0px 10px;}
.padi {font-family: "Open Sans", serif;font-weight: 400;  font-style: normal;font-size:13px;letter-spacing: -0.5px;position:relative;white-space: nowrap;}
.puan-etiket {margin-left:5px;background-color:#36b23e;padding:0px 3px 1px 2px;border-radius:3px;font-weight:bold;color:#fff;font-size:9px;position:absolute;}
.plink {text-decoration: none;color:#0f1f3e;font-size:10px;}
.plink a {text-decoration: none;color:#0f1f3e;}
.plink a:hover {text-decoration: none;color:#707070;}

.bottom {
    border-radius: 5px;
    box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);
    background-color: #fff;
    margin:20px 10px;
    padding: 25px;
    display:flex;
    flex-wrap:wrap;
    box-sizing: border-box;
    
}
.bottom2 {flex: 33.33333%;padding:5px 10px;box-sizing: border-box;}
.enalt {width:100%;text-align: center;font-family: "Open Sans", serif;font-weight: 400;  font-style: normal;font-size:11px;border-top: #eef5f9 .5px solid;padding-top: 20px;}
/*.enalt a {padding:3px;color:#fff;border-radius: 5px;background-color: crimson;}*/
.iletisim-baslik {margin-bottom:30px;font-size:16px;font-family: "Roboto", sans-serif;}
.iletisim-baslik a {padding-bottom:6px;border-bottom:2px solid;border-image:   linear-gradient(to right, grey 25%, orange 25%, orange 50%,red 50%, red 75%, teal 75%) 5;}
.iletisim-adres {display:grid;grid-template-columns: repeat( auto-fit, minmax(290px, 1fr));font-size:13px;font-family: "Roboto", sans-serif;/*margin-bottom:20px;*/}
.iletisim-adres2 {font-size:13px;font-family: "Roboto", sans-serif;margin-bottom:20px;padding-right:20px;}
.iletisim-adres2:hover {color:dimgray;}
.iletisim-adres-tarih{font-size:10px;margin-top:-10px;color:#707070;}
.iletisim-adres a {color:#000;text-decoration:none;}
.iletisim-adres p {line-height: 20px;}
.iletisim-adres a:hover {color:#707070;text-decoration:none;}
.iletisim-adres-1 {display:flex;align-items: center;gap:0px 5px;}
.iletisim-adres-1a, .iletisim-adres-1b {padding:5px 5px 10px 5px;;}
.iletisim-adres-1a {font-size: 12px;color:#858585;border:1px solid rgb(225, 225, 225);padding:5px;min-width: 15px;text-align: center;margin-bottom: 5px;border-radius: 5px;}
.iletisim-adres-mail {display:flex;align-items: center;gap:0px 5px;justify-content: space-between;}

.banner-modul {margin-top:20px;background-color: #fff;padding:10px;box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);border-radius: 5px;}
.banner {margin-top:20px;}
.banner img {width: 100%;}


.sanalmagazagenelkapsama {font-family: "Open Sans", serif; margin-top: 20px;        background-color: #fff;    padding: 25px;    box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);    border-radius: 5px;}
.ilankapsama {display: grid;gap: 20px;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}

.ilantek {border:#ababab5e 1px solid;display: flex;padding: 10px;gap:10px;align-items: center;font-size: 13px;border-radius: 8px;}
.ilantek>div:nth-child(2) {padding-bottom: 3px;flex:2}
.ilantek>div:nth-child(3) {font-size: 20px;}
.bi-link-45deg {color:#caa615;}
.bi-link-45deg:hover {color:#000;}
.ilantek img {width:45px;height:45px;border-radius: 5px;object-fit:fill;border:#ababab5e .5px solid;margin-top: 2px;}



.birincikapsama {padding:20px;max-width:1320px; margin:20px auto;background-color: #fff;}
.kapsama {display: grid;gap:20px;grid-template-columns: repeat( auto-fill, minmax(150px, 1fr));margin-bottom:10px;}
.kutu {/*background-color:orange;*/border:1px solid #e7e7e7;padding:10px;display:flex;flex-direction:column;justify-content:space-between;border-radius:10px;background-color:#fff;text-align:left;}
.imaj img {height:100px;width:100%;object-fit: contain;margin-bottom:10px;border-radius:5px;}
.metin, .tikla {padding:10px 0px;}
.metin {flex-grow:2;font-size:13px;font-weight:300;line-height:16px;}
.metin>p {margin-bottom:5px;margin-top: 0px;}
.kutu>p {font-weight:bold;text-align: center;}
.baslik {/*min-height:30px;*/font-size:12px;line-height:18px;font-weight:bold;color: #707070bd;}
.tikla {text-align:center;width:100%;background-color:#fdd639;border-radius:5px;font-size:12px;font-weight:400;margin-top:5px;display: flex;align-items: center;justify-content: center;}
.fa-whatsapp {font-size: 20px;margin-right: 10px;}
.kutu a {text-decoration:none;color:#000;width:100%;}
.tikla:hover {color:#fdd639;background-color:#0d4a71;transition: all 400ms ease-in-out;}




.pyerikapsama {max-width:1320px;margin:0px auto;display:grid;gap:20px;grid-template-columns: repeat(auto-fill, minmax(min(75px, 100%), 1fr));padding:10px;/*border:1px solid #000;*/}
.pyeriust {position:relative;flex-grow: 2;}
.pyeri {border:1px solid #eee;padding:10px;display:flex;flex-direction:column;justify-content:space-between;align-items: center;gap:3px;border-radius:8px;}


.pyeriimaj {   }
.pyeriimaj:hover img{border-radius: 5px;    border: 1px solid #a5a5a5;}

.pyeriimaj img {width:100%;height:100%;border-radius:5px;object-fit:cover;transition: 0.35s;border: 1px solid #fff;}
.puan {position:absolute;background-color:#36b23e;padding:3px;border-radius:3px;font-size: 11px;color:#fff;top:-5px;right:-5px;z-index:9;}
.pyeriadi, .pyeriyil {font-size:10px;text-align:center;}
.incelesatinal {display: flex;justify-content: space-between;gap: 5px;}

.katadiayar {margin:5px 0px 30px 0px}
.katadiayar:not(:first-child) {margin:30px 0px;}









/* flicty genel */
.flickity-page-dots {     bottom: 8px !important;   }
.flickity-page-dots .dot {    width: 3px !important;    height: 3px !important;    opacity: 1;    background: transparent !important;    border: 1px solid #707070 !important;  }
.flickity-page-dots .dot.is-selected {    background: #fff !important;  }
/* flicty genel */





@media only screen and (max-width: 390px) {
    html {--adet: 2;}
    .bottom {background-color: #eef5f9;box-shadow:none;padding: 0px;margin: 15px 10px;}
    .bottom2 {flex: 100%;margin-bottom: 20px;box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);background-color: #fff;padding:25px;border-radius:5px;}
    .plink {font-size:9px;}
    .pazarlar-img img {max-width: 30px !important;}
    
}
@media (max-width: 440px) {
  .kapsama {grid-template-columns: repeat( auto-fill, minmax(130px, 1fr));}
}
@media only screen  and (min-width: 390px) and (max-width: 600px) { 
    html {--adet: 2;}
    .bottom {background-color: #eef5f9;box-shadow:none;padding: 0px;margin: 15px 10px;}
    .bottom2 {flex: 100%;box-shadow: 0 0 0.25rem rgba(108, 118, 134, 0.1);background-color: #fff;padding:25px;border-radius:5px;}
    .plink {font-size:9px;}
 
}

@media only screen and (min-width: 600px) and (max-width: 768px) { 
    html {--adet: 3;}
    .bottom2 {flex: 50%;}
    .plink {font-size:9px;}
}

@media only screen and (min-width: 768px) and (max-width: 1000px) { 
    .bottom2 {flex: 50%;margin-bottom: 20px;}
    
}
@media only screen and (min-width: 1000px) and (max-width: 1024px) { 
    
    .bottom2 {flex: 50%;}
}
@media only screen and (min-width: 1024px) and (max-width: 1152px) { 
    html {--adet: 5;}
}
@media only screen and (min-width: 1152px) and (max-width: 1280px) { 
    html {--adet: 5;}
}
@media only screen and (min-width: 1280px)  { 
    html {--adet: 6;}
    .bottom {margin:20px 0px;}
    .pazaryerleri-modul {margin-top:20px;margin-left:0px;margin-right:0px;}
}