/* Reset & Basics ------------------------------------- */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;} @font-face { font-family: 'Karrik'; src: url('js/fonts/Karrik-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* Renk Değişkenleri */ --birinci-color: #b1947f; --ikinci-color: #181516; --ucuncu-color: #ede8e6; /* zemin */ --dorduncu-color: #d5c6bc; --besinci-color: #594436; --baslik-font: 'Karrik', sans-serif; --metin-font: "Inter", sans-serif; /* 'Jost', sans-serif; "DM Sans", sans-serif; */ --paddingContent: 0 8px; } /* html - body ------------------------------------- */ * {margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; /* font-size:14px; */} body { margin:0; padding:0; font-size:1rem; font-weight:400; line-height:1.5; color:var(--ikinci-color); background-color: var(--ucuncu-color); font-family: var(--metin-font); } /* Typography ------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:1rem; font-weight:400; line-height:1.2; color:var(--ikinci-color); font-family: var(--baslik-font); } h1{ font-size:3.2rem; } h2{ font-size:2.8rem; } h3{ font-size:2.2rem; } h4{ font-size:1.6rem; } h5{ font-size:1rem; } p { margin-top:0; margin-bottom:1rem; } b, strong { font-weight:600; } small { font-size:.8rem; } em {font-style: italic;} /* FORM ------------------------------------- */ input:focus, textarea:focus, select:focus {outline: none !important; box-shadow: none !important;} /* Links */ a {text-decoration: none; color:var(--ikinci-color);} /* img ------------------------------------- */ img {border:none; padding:0; margin:0; display:block;} /* btn ------------------------------------- */ button {border:none; background: none; cursor: pointer; border-radius: 3px;} .btn {text-align: center; padding: .5rem 2rem; font-size: 1rem; line-height: 1.5; border:none; border-radius: 3px; transition: all .5s; cursor:pointer; margin: .5rem 0; background-color:var(--birinci-color); color:var(--ikinci-color); margin-right:.8rem;} .btn:hover {color: #fff; background-color: var(--ikinci-color); border-color: var(--ikinci-color); text-decoration: none;} .btn:focus, .btn.focus {} .btn.disabled, .btn:disabled {color: #fff; background-color: #aaa; border-color: #aaa;} .btn span{margin-right: 0;} .btnDetay { border: none; border-bottom: 2px solid var(--ikinci-color); padding-bottom: 2px; font-family: var(--baslik-font); font-size: 1.4rem; line-height: 1.2; text-align: left; margin-bottom: 16px; transition: all .5s; border-radius: 0; width: auto; cursor: pointer; align-self: flex-start;} .btnDetay:hover { color: var(--besinci-color); margin-bottom: 16px; } @media only screen and (min-width:900px) and (max-width:1367px) { h1{ font-size:2.4rem; } h2{ font-size:2.2rem; } h3{ font-size:2rem; } h4{ font-size:1.8rem; } h5{ font-size:1.6rem; } } @media only screen and (min-width:) and (max-width:899px) { h1{ font-size:1.8rem; } h2{ font-size:1.7rem; } h3{ font-size:1.6rem; } h4{ font-size:1.5rem; } h5{ font-size:1.4rem; } } /* GRID ------------------------------------- */ /* Genel Konteyner Özellikleri */ .aContainer-full, .aContainer-genis, .aContainer-dar, .aContainer { position:relative; width: 100%; margin-right: auto; margin-left: auto; box-sizing: border-box; display: flex; /* İçindeki öğeleri flex yönetebilmek için */ flex-direction: column; /* İçerik varsayılan olarak yukarıdan aşağı aksın */ } /* Genişlik Tanımları */ .aContainer-full { max-width: 1920px; } .aContainer-genis { max-width: 1440px; } .aContainer-dar { max-width: 960px; } .aContainer { max-width: 1368px; } .aRow {position:relative; display: flex; flex-wrap: wrap; width:100%;} [class*="aCol-"] {position:relative; } .aCol-1-12 { width: 8.3333%; } .aCol-2-12 { width: 16.6666%; } .aCol-3-12 { width: 25%; } .aCol-4-12 { width: 33.3333%; } .aCol-5-12 { width: 41.6666%; } .aCol-6-12 { width: 50%; } .aCol-7-12 { width: 58.3333%; } .aCol-8-12 { width: 66.6666%; } .aCol-9-12 { width: 75%; } .aCol-10-12 { width: 83.3333%; } .aCol-11-12 { width: 91.6666%; } .aCol-12-12 { width: 100%; } /* 5'li Sistem */ .aCol-1-5 { width: 20%; } .aCol-2-5 { width: 40%; } .aCol-3-5 { width: 60%; } .aCol-4-5 { width: 80%; } .aContent {position:relative; /* background:#fff; */ width: 100%; padding: var(--paddingContent); box-sizing: border-box;} /* FLEX */ .a-display-flex {display:flex;} .a-flex-direction-column {flex-direction: column;} .a-flex-wrap-wrap {flex-wrap: wrap;} .cFix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} * html .cFix {zoom:1;} /* IE6 */ *:first-child+html .cFix {zoom:1;} /* IE7 */ .aClear {clear:both; padding:0 !important; margin:0 !important;} .displayNone {display:none;} .displayBlock {display:block;} .fLeft {float:left;} .fRight {float:right;} @media only screen and (min-width:900px) and (max-width:1367px) { .aContainer, .aContainer-genis, .aContainer-dar {width: 888px;} } @media only screen and (min-width:600px) and (max-width:899px) { .aCol-1-12, .aCol-2-12, .aCol-3-12, .aCol-4-12, .aCol-5-12, .aCol-6-12, .aCol-7-12, .aCol-8-12, .aCol-9-12, .aCol-12-12, .aCol-1-5, .aCol-2-5, .aCol-3-5, .aCol-4-5 {width: 100%;} .aContainer, .aContainer-genis, .aContainer-dar {width: 588px;} } @media only screen and (min-width:0) and (max-width:599px) { .aCol-1-12, .aCol-2-12, .aCol-3-12, .aCol-4-12, .aCol-5-12, .aCol-6-12, .aCol-7-12, .aCol-8-12, .aCol-9-12, .aCol-12-12, .aCol-1-5, .aCol-2-5, .aCol-3-5, .aCol-4-5 {width: 100%;} .aContainer, .aContainer-genis, .aContainer-dar {width: 94%;} } /* custom img ------------------------------------- */ .img img {position:relative; object-fit: contain; max-width:100%;} /* 100% -> 1:1 Aspect Ratio | 75% -> 4:3 Aspect Ratio | 62.5% -> 8:5 Aspect Ratio */ .img-k {position: relative; width: 100%; overflow: hidden; aspect-ratio: 1 / 1;} .img-y {position: relative; width: 100%; overflow: hidden; aspect-ratio: 5 / 4;}/* yatay */ .img-d {position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 5;}/* dikey */ .img-k img, .img-y img, .img-d img {width: 100%; height: 100%; object-fit: contain; display: block;} /* SAYFA / BLOKLAR / BAŞLIKLAR / KATEGORİ MENU ------------------------------------- */ .contMarginTop {margin-top:48px;} .contMarginBottom {margin-bottom:48px;} .contPadding {padding-top:24px; padding-bottom:24px;} .contPaddingTop {padding-top:48px;} .contPaddingBottom {padding-bottom:48px;} .contBorderBottom {border-bottom:1px solid #eee;} .contBorderTop {border-top:1px solid #eee;} .blokTitle {} .blokTitle h1 {font-size: 3.4rem; margin-bottom:32px;} .blokTitle h1 a {} .modTitleSol {position:relative; width:100%; display:flex;} .modTitleOrta {position:relative; width:100%; display:flex; justify-content: center;} .modTitleSol h1, .modTitleSol h2, .modTitleSol h3, .modTitleOrta h1, .modTitleOrta h2, .modTitleOrta h3 { color:var(--ikinci-color); font-size:3.2rem; line-height:1.05; margin-bottom:1rem; letter-spacing:0; } .modTitleSol h1 a, .modTitleSol h2 a, .modTitleSol h3 a, .modTitleOrta h1 a, .modTitleOrta h2 a, .modTitleOrta h3 a {color:var(--ikinci-color);} @media only screen and (min-width:900px) and (max-width:1367px) { .contMarginTop {margin-top:36px;} .contMarginBottom {margin-bottom:36px;} .contPadding {padding-top:18px; padding-bottom:18px;} .contPaddingTop {padding-top:36px;} .contPaddingBottom {padding-bottom:36px;} .blokTitle h1 {font-size: 2.8rem; margin-bottom:28px;} .modTitleSol h1, .modTitleSol h2, .modTitleSol h3, .modTitleOrta h1, .modTitleOrta h2, .modTitleOrta h3 {font-size: 2.8rem;} } @media only screen and (min-width:600px) and (max-width:899px) { .contMarginTop {margin-top:24px;} .contMarginBottom {margin-bottom:24px;} .contPadding {padding-top:12px; padding-bottom:12px;} .contPaddingTop {padding-top:24px;} .contPaddingBottom {padding-bottom:24px;} .blokTitle h1 {font-size: 2.4rem; margin-bottom:22px;} .modTitleSol h1, .modTitleSol h2, .modTitleSol h3, .modTitleOrta h1, .modTitleOrta h2, .modTitleOrta h3 {font-size: 2.4rem;} } @media only screen and (min-width:0) and (max-width:599px) { .contMarginTop {margin-top:16px;} .contMarginBottom {margin-bottom:16px;} .contPadding {padding-top:8px; padding-bottom:8px;} .contPaddingTop {padding-top:16px;} .contPaddingBottom {padding-bottom:16px;} .blokTitle h1 {font-size: 2rem; margin-bottom:16px;} .modTitleSol h1, .modTitleSol h2, .modTitleSol h3, .modTitleOrta h1, .modTitleOrta h2, .modTitleOrta h3 {font-size: 2rem;} } /* HEADER **************************************************** */ .aHeaderKap {background-color: var(--birinci-color);} .aHeaderKap.clss-AnaSayfa {position:absolute; z-index:2; background-color: transparent;} .aHeaderFlex {width:100%; display:flex; justify-content: space-between; align-items:center;} .aLogoAnd {width:100%; display:flex; justify-content: flex-start; align-items:center;} .logo {position: relative; width: 120px; padding: 18px 0;} .logo img {width: 100%; filter: brightness(0) saturate(100%) invert(7%) sepia(5%) saturate(836%) brightness(93%) contrast(91%);/* logoyu #191516 (koyu) rengine çevirir */} .logo.clss-AnaSayfa img {filter: brightness(0) invert(1);/* logoyu beyaz rengine çevirir */} .aSearchFormKap {position:relative; min-width:240px; border-bottom:1px solid #eee; z-index: 11;} .aSearchForm {display:flex;} .aSearchForm button {width: 21px; height:36px; padding: 0; margin: 0; color: #222; border: none; border-radius:0; cursor: pointer; font-size: 21px;} .aSearchForm .input {background-color: transparent; width: calc(100% - 21px); padding: 0 8px; margin:0; color: #222; font-size: 14px; line-height:36px; border: none; } .aSearchForm .input:focus {outline: none; box-shadow: none;} .aSearchForm .input::placeholder {color:#777; font-weight:normal; font-style: normal; font-size: .9rem;} ul.aHeaderMenu { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; } ul.aHeaderMenu li { position: relative; margin: 0 12px; color: var(--ikinci-color); font-size: 0.9rem; line-height: 1.5rem; font-weight: 400; cursor: pointer; display:flex; align-items: center; } ul.aHeaderMenu.clss-AnaSayfa li {color:#fff;} ul.aHeaderMenu li a {display: flex; align-items: center; text-decoration: none; color: var(--ikinci-color); white-space: nowrap; font-size: 0.9rem; line-height: 1.5rem; } ul.aHeaderMenu.clss-AnaSayfa li a {color:#fff;} ul.aHeaderMenu li span.menuMetin {} ul.aHeaderMenu li span.menuCount { position: absolute; top: -10px; right: -15px; background-color: var(--ikinci-color); color: #fff; font-size: 0.6rem; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 2px; } ul.aHeaderMenu.clss-AnaSayfa li span.menuCount {background-color: var(--birinci-color);} ul.aHeaderMenu li:hover a {color: #fff;} ul.aHeaderMenu li i {font-size: 1.2rem; line-height: 1.5rem; } ul.aHeaderMenu li#imgSepetGoster i, ul.aHeaderMenu li#kullGoster i{display:none;} ul.aHeaderMenu li#respBlokAc {display:none;} /* ÜST MENU ------------------------------------- */ #sf-kutu {position:relative; display: flex; display:flex; justify-content: center; align-items:center; margin-left:80px;} #sf-kutu .sf-menu {position:relative; margin:0;} /*** TEMEL SIFIRLAMA ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .sf-menu a {outline: none !important; -webkit-tap-highlight-color: transparent;} .sf-menu a:focus, .sf-menu a:active {outline: none !important; box-shadow: none !important;} /*** ANA MENÜ (1. Seviye) ***/ .sf-menu { display: flex; align-items: center; position: relative; white-space: nowrap; } .sf-menu > li { position: relative; margin: 0; } .sf-menu li a { display: flex; align-items: center; padding: 20px 12px; color: var(--ikinci-color); text-decoration: none; font-size: 0.9rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; transition: color 0.3s ease; } .sf-menu.clss-AnaSayfa li a {color: #fff;} /* Alt Çizgi Efekti */ /**/ .sf-menu > li > a:before { content: ""; position: absolute; background-color: #191516; bottom: 0; left: 0; width: 0%; height: 3px; transition: width 0.3s ease; } .sf-menu.clss-AnaSayfa > li > a:before {background-color: #fff;} .sf-menu > li:hover > a:before, .sf-menu > li.sfHover > a:before { width: 100%;} /*** ALT MENÜLER (Dropdown) ***/ .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; background: #fff; min-width: 200px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 10px 0; border-radius: 0; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block; } /* 2. Seviye Liste Öğeleri */ .sf-menu li li { width: 100%; margin: 0; background: transparent; } .sf-menu li li a { padding: 8px 20px; font-size: 0.85rem; color: #444; } .sf-menu.clss-AnaSayfa li li a { color: #444;} .sf-menu li li:hover { background: #fff; } .sf-menu li li:hover > a { color: #191516; } .sf-menu.clss-AnaSayfa li li:hover > a { color: #191516; } /* 3. Seviye (Yana açılan menü) */ .sf-menu ul ul { top: 0; left: 100%; margin-top: -10px; } /*** OKLAR (Arrows) ***/ .sf-arrows .sf-with-ul { padding-right: 25px; } .sf-arrows .sf-with-ul:after { content: '\e912'; font-family: 'icomoon'; position: absolute; right: 5px; font-size: 1.2rem; color: var(--ikinci-color); } .sf-menu.clss-AnaSayfa .sf-with-ul:after { color: #fff; } .sf-arrows ul .sf-with-ul:after { content: '\e911'; right: 15px; } /*** HOVER DURUMLARI ***/ .sf-menu li:hover > a { color: #191516; } .sf-menu.clss-AnaSayfa li:hover > a { color: #fff; } /* respBlok ------------------------------------- */ #respBlok {position: fixed; left: -100%; top: 0px; width: 100%; height: 100%; z-index: 100; background: rgba(24, 21, 22, 0.5);} .menuBlokCont {position:relative; display:flex; flex-direction: column; width:360px; max-width:90%; height:100%; background: rgba(24, 21, 22, 1); overflow: hidden;} #respBlokKapat {position:absolute; right:2rem; top:2rem; margin:0; padding:0; color:#fff; cursor:pointer; z-index:3;} #respBlokKapat span {font-size:2rem; line-height:2rem; margin:0; display:block;} #respBlok .respLogo {position:relative; width: 120px; margin:2rem 2rem;} #respBlok .respLogo img {width:100%; filter: brightness(0) invert(1); /*filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(55deg) brightness(104%) contrast(103%);*/} ul.respMenu {position:relative; margin:0; padding:0; list-style:none; width:100%; padding:0 2rem; margin:0;} ul.respMenu li {position:relative; margin:0; padding:0 0 0 14px; list-style:none; font-size:1.2rem; line-height:2;} ul.respMenu li:before { content: "❯"; position: absolute; left: 0; top: .8rem; font-size:.5rem; color: #fff; } ul.respMenu li a {margin:0; padding:0; color:#fff; text-decoration: none;} ul.respMenu li a:hover {text-decoration: underline;} ul.respMenu ul {padding-left:.5rem;} ul.respMenu li li a {color:#ddd; font-size:1rem;} ul.respMenu ul ul {display:none;} @media only screen and (min-width:900px) and (max-width:1367px) { .logo {/*background: yellow;*/} #sf-kutu {display:none;} ul.aHeaderMenu li#imgSepetGoster i, ul.aHeaderMenu li#kullGoster i {display:block;} ul.aHeaderMenu li span.menuMetin {display:none;} ul.aHeaderMenu li#respBlokAc {display:block;} } @media only screen and (min-width:600px) and (max-width:899px) { .logo {/*background: blue;*/} #sf-kutu {display:none;} ul.aHeaderMenu li#imgSepetGoster i, ul.aHeaderMenu li#kullGoster i {display:block;} ul.aHeaderMenu li span.menuMetin {display:none;} ul.aHeaderMenu li#respBlokAc {display:block;} } @media only screen and (min-width:0) and (max-width:599px) { .logo {/*background: red;*/} #sf-kutu {display:none;} ul.aHeaderMenu li#imgSepetGoster i, ul.aHeaderMenu li#kullGoster i {display:block;} ul.aHeaderMenu li span.menuMetin {display:none;} ul.aHeaderMenu li#respBlokAc {display:block;} } /* ÇEKİRDEKTEN FİNCANA NİTELİKLİ KAHVE **************************************************** */ /* sCoffee */ .sCoffeeKap { z-index: 1; background-color: var(--ikinci-color); width: 100%; height: 100dvh; min-height: 720px; max-height: 1080px; max-width: 1920px; margin: 0 auto; } .sCoffeeKap .aContainer { height: 100%; } .sCoffee { position: relative; width: 100%; height: 100%; display: flex; } .sCoffeeSol { position:relative;/*background-color: green;*/ width: 60%; height: 100%; display: flex; align-items: center; } .solRow {width:100%; display: flex; flex-direction: column; position:relative;} .solRow h1 {color:var(--birinci-color); font-size:3.4rem; line-height:1.05; margin-bottom:72px; letter-spacing:1px; /*font-weight:600;*/ padding:var(--paddingContent);} .solMesaj {display:flex; flex-wrap: wrap; margin-bottom:72px;} .solMesaj span {width:33.3%; font-size: 1rem; line-height:1.5; color: #ddd; padding:var(--paddingContent); box-sizing: border-box; margin-bottom:16px;} .solRow p.hemenSatinAl { display: block; margin-bottom: 72px; margin-left: 33.3%; padding:var(--paddingContent); box-sizing: border-box; color: var(--birinci-color); font-family: var(--baslik-font); font-size: 1.8rem; line-height: 1.2; text-align: left; } .solRow p.hemenSatinAl a { color: var(--birinci-color); text-decoration: none; } .solRow p.hemenSatinAl span { border-bottom: 2px solid var(--birinci-color); padding-bottom: 2px; } .sCoffeeBLogo1 { position:absolute; width:66.6%; left:0; bottom:32px; z-index:2; padding:var(--paddingContent); box-sizing: border-box;} .sCoffeeBLogo1 img {width: 100%;} .arcRoasteryAbs1 { position:absolute; width:160px; left: -80px; bottom:240px; z-index:2;} .arcRoasteryAbs1 img { width: 100%;} .sCoffeeSag { position:relative;/*background-color: blue;*/ width: 40%;} .sCoffeeSag:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index: 1; pointer-events: none; } .slaytGor { position: relative; width: 100%; height: 100%; overflow: hidden; } .slaytGor img { width: 100%; height: 100%; object-fit: cover; display: block; } /* not : .sCoffeeSag "Half-Container" yapılabilir. Yani (bir tarafı sabit, diğer tarafı sonsuza uzanan) modelidir.*/ .sCoffeeSag.halfContainerim { width: 40%; position: relative; } .sCoffeeSag.halfContainerim .slaytGor { position: absolute; top: 0; left: 0; width: 900px; height: 100%; /*background-color: yellow;*/ } .sCoffeeSag.halfContainerim .slaytGor img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Eski tarayıcılar için yedek (Fallback) */ @supports not (height: 100dvh) { #slaytNew { height: 100vh; } } @media only screen and (min-width:900px) and (max-width:1367px) { .sCoffeeKap {height: auto; min-height: 0; max-height: none; } .solRow h1 {font-size:2.6rem; margin-top:152px; margin-bottom:48px;} .solMesaj {display:flex; margin-bottom:48px;} .solMesaj span {width:50%; font-size: 0.9rem;} .solRow p.hemenSatinAl {margin-bottom: 152px; margin-left:0; font-size: 1.7rem; width:100%;} .arcRoasteryAbs1 { position:absolute; width:120px; left: -60px; bottom:72px; z-index:2;} } @media only screen and (min-width:600px) and (max-width:899px) { .sCoffeeKap {height: auto; min-height: 0; max-height: none; } .solRow h1 {font-size:2.2rem; margin-top:140px; margin-bottom:36px;} .solMesaj {display:flex; margin-bottom:36px;} .solMesaj span {width:50%; font-size: 0.85rem;} .solRow p.hemenSatinAl {margin-bottom: 140px; margin-left:0; font-size: 1.6rem; width:100%;} .arcRoasteryAbs1 { position:absolute; width:120px; left: -60px; bottom:72px; z-index:2;} } @media only screen and (min-width:0) and (max-width:599px) { .sCoffeeKap {height: auto; min-height: 0; max-height: none; } .solRow h1 {font-size:1.8rem; margin-top:128px; margin-bottom:24px; letter-spacing:0;} .solMesaj {display:flex; margin-bottom:24px;} .solMesaj span {width:100%; font-size: 0.8rem;} .solRow p.hemenSatinAl {margin-bottom: 128px; margin-left:0; font-size: 1.5rem; width:50%;} .arcRoasteryAbs1 { position:absolute; width:120px; left: -60px; bottom:72px; z-index:2;} } /*-- modHeader **************************************************** ANASAYFA modül üst başlık ve açıklamalar, görseller vb. */ .modHeader { margin-bottom:64px;} .modHeaderSolP {font-family: var(--baslik-font); color: var(--besinci-color);} .modHeaderSagP {color: var(--ikinci-color); font-size:1.1rem;} .modHeaderBaslik {color:var(--ikinci-color); font-size:3.2rem; line-height:1.05;letter-spacing:1px;} .modHeaderAdres {font-family: var(--baslik-font); color: var(--ikinci-color);} .modFullImg {width:100%; position:relative;} .modFullImg img {width:100%;} @media only screen and (min-width:900px) and (max-width:1367px) { .modHeader {margin-bottom:48px;} .modHeaderSagP {font-size:1rem;} .modHeaderBaslik {font-size:2.8rem;letter-spacing:0;} } @media only screen and (min-width:600px) and (max-width:899px) { .modHeader {margin-bottom:36px;} .modHeaderSagP {font-size:0.9rem;} .modHeaderBaslik {font-size:2.4rem; letter-spacing:0;} } @media only screen and (min-width:0) and (max-width:599px) { .modHeader {margin-bottom:24px;} .modHeaderSagP {font-size:0.9rem;} .modHeaderBaslik {font-size:2rem; letter-spacing:0;} } .modMetnBaslik {color: var(--ikinci-color); font-size: 1.4rem; line-height: 1.2;} .modMetnP {font-size:1rem;} /*satın al
ul { display: block; } .katMenuM li ul li a:hover { background-color: var(--ikinci-color); color: #fff !important; } .modalBlok {margin:8px; padding:8px; background-color: #f5f5f5; min-width:300px;} .modalBlok h3 {font-size:1rem; margin-bottom:6px; padding:.5rem 0;} #yanUrunKateg, #yanUrunFiltre {display:none;} /* kategori filtre ve sıralama */ .katFiltSira { position:relative; width:100%; margin-bottom:32px; background-color: #fff; border:1px solid #eee; } #yanUrunKategAc, #yanUrunFiltreAc {float:left; border:none; font-size:.9rem; padding:5px; line-height:1.5rem; margin: 5px; background:#fff; color:#222; border-radius:3px;} form#urunSiraM {position:relative; float:right; margin:0; padding:0; padding:5px;} form#urunSiraM select { position: relative; float: right; box-shadow: none; background-color: transparent; background-image: none; z-index: 2; border: none; border-bottom: 2px solid var(--ikinci-color); border-radius: 0; padding: 2px 0; margin-left: 16px; width: 140px; cursor: pointer; font-family: var(--baslik-font); font-size: 1.2rem; } form#urunSiraM select#orderBy {width: 140px;} form#urunSiraM select#cat-limit {width: 40px;} form#urunSiraM select#katGorunumTipi {width: 80px;} #buttonList, #buttonListLite {font-size:.9rem; line-height:1.8rem; padding:0 .2rem; border-radius: 0; margin-top:.2rem; color:var(--birinci-color);} #buttonList.active, #buttonListLite.active {color:var(--besinci-color); } /* kategori kutu */ #kategKutuList {display:flex; justify-content: center; flex-wrap: wrap; width:100%;} .kategKutu {text-align:center; margin-bottom:24px; width:25%;} .kategKutu .kategKutuFlex {width:100%; display: flex; flex-direction: column;} .kategKutu .img-k {} .ktCapt {display:flex; flex-direction: column; justify-content: center; align-items: center; padding:0; margin-bottom:.2rem; height:3rem; background-color: #215ba7;} .ktTitleCapt {color:#215ba7; line-height:1.5rem; font-size:1.2rem; font-weight:400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; background-color: #215ba7;} .ktTitleCapt a {color:#fff;} .ktTitleCapt a:hover {color:#fff;} .ktAltKat {width:100%;} .ktAltKat ul {} .ktAltKat ul li {} .ktAltKat ul li a {} #kategKutuOwl {margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #kategKutuOwl .owl-dots {display:none;} #kategKutuOwl .owl-nav {} #kategKutuOwl .owl-nav button.owl-prev, #kategKutuOwl .owl-nav button.owl-next {position:absolute; top:50%; margin-top:-1rem; font-size:1.2rem; width:2rem; height:2rem; line-height:2rem; color:#999; cursor:pointer; } #kategKutuOwl .owl-nav button.owl-prev {left:-.5rem;} #kategKutuOwl .owl-nav button.owl-next {right:-.5rem;} #kategKutuOwl .owl-nav button.owl-prev:hover, #kategKutuOwl .owl-nav button.owl-next:hover {color:#000;} #kategKutuOwl .kategKutu {width:100%;} /* urnBox */ .urnBox {margin-top:12px; margin-bottom:12px;} .urnBox .img-d, .urnBox .img-k { background-color: rgba(0,0,0,0.2);} .urnBox .urnBoxFlex {display: flex; flex-direction: column;} .urnBox .urnBoxHead {display: flex; margin-top:12px; justify-content: space-between;} .urnBox .urnBoxHeadSol {display: flex; flex-direction: column; } .urnBox .urnBoxBaslik {font-family: var(--baslik-font); font-size:1.1rem; line-height:1.05; margin-bottom:6px;} .urnBox .urnBoxOzet { font-size:0.8rem; margin-bottom:0;} .urnBox .urnBoxHeadSag {display: flex; flex-direction: column;} .urnBox .urnBoxFiyat {font-family: var(--baslik-font); font-size:1.1rem; line-height:1.05; letter-spacing: -1px; text-align:right; margin-left:10px; white-space: nowrap;} .urnBox .aSepeteEkle {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; transition: all 0.3s ease; background-color: var(--ikinci-color); color: #fff; z-index: 3; width: 100%; border-radius: 0; font-size:1.2rem; line-height:2;} .urnBox:hover .aSepeteEkle {opacity: 1; visibility: visible; transform: translateX(-50%);} .urnBoxEtiketleri {position:absolute; top:5px; right:5px; z-index:3; display: flex; flex-direction: column; gap:5px; } .urnBoxEtiketleri span {font-size:.8rem; line-height:1; padding:5px; font-family: var(--baslik-font); color:var(--ikinci-color); background-color: var(--ucuncu-color); text-align:center;} .urnBoxEtiketleri span.aUrunYeni {} .urnBoxEtiketleri span.aUrunIndirim {} /* Sayfalama */ .paginationKap {Width:100%; display: flex; justify-content:center;} ul.pagination {list-style:none; margin:16px 0; float:right; } ul.pagination li {display:inline; background:none; padding:0; list-style:none;} ul.pagination li a {display:block; float:left; padding:.3rem .6rem; margin-left:.5rem; border:1px solid #333;} ul.pagination li.current a {background:#333; color:#fff;} ul.pagination li a:hover {background:#000; color:#fff; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;} /* filtre */ .filtrem {padding:0;} .filtreBaslik {color:#333; text-decoration:none; padding:0;} .filtreOzellik {color:#666; margin-bottom:12px; font-size:.9rem;} .filterContainer {margin:0; padding:0;} @media only screen and (min-width:900px) and (max-width:1367px) { #buttonList, #buttonListLite {display:none;} .urnBox .urnBoxHead {display: flex; flex-direction: column; margin-top:6px; } .urnBox .urnBoxHeadSol {} .urnBox .urnBoxBaslik {} .urnBox .urnBoxOzet {margin-bottom:6px;} .urnBox .urnBoxFiyat {text-align:left; margin-left:0;} .urnBox[class*="aCol-"] { width: 25%; margin-bottom:6px; margin-top:6px;} } @media only screen and (min-width:600px) and (max-width:899px) { #buttonList, #buttonListLite {display:none;} .urnBox .urnBoxHead {display: flex; flex-direction: column; margin-top:6px; } .urnBox .urnBoxHeadSol {} .urnBox .urnBoxBaslik {} .urnBox .urnBoxOzet {margin-bottom:6px;} .urnBox .urnBoxFiyat {text-align:left; margin-left:0;} .urnBox[class*="aCol-"] { width: 50%; margin-bottom:6px; margin-top:6px;} } @media only screen and (min-width:0) and (max-width:599px) { #buttonList, #buttonListLite {display:none;} form#urunSiraM select {width: 100px; font-size: 1rem;} form#urunSiraM select#orderBy {width: 100px;} .katMenuM li a {padding: 0 8px; font-size: 0.9rem; line-height: 1.8;} .urnBox .urnBoxHead {display: flex; flex-direction: column; margin-top:6px; } .urnBox .urnBoxHeadSol {} .urnBox .urnBoxBaslik {} .urnBox .urnBoxOzet {margin-bottom:6px;} .urnBox .urnBoxFiyat {text-align:left; margin-left:0;} .urnBox[class*="aCol-"] { width: 50%; margin-bottom:6px; margin-top:6px;} } /* ÜRÜN DETAY SAYFASI ------------------------------------- */ .urunGaleri {position:relative; width:50%; display:flex; padding: var(--paddingContent); box-sizing: border-box;} /* galeri 2 (�r�n resimleri 2 - lib.php -> urunKucukResimGoster2 ) */ .resimKucuk {width: 20%; padding-right:8px; box-sizing: border-box;} .gall {list-style:none; position:relative; margin:0; padding:0; width:100%; overflow:auto;} .gall li {position:relative; float:left; width:100%; margin-bottom:10px; border:2px solid var(--dorduncu-color); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; cursor:pointer;} .gall li img {width:100%; padding:5px; box-sizing: border-box; cursor:pointer;} .gall li.current {border:2px solid var(--besinci-color);} .gall-content {position:relative; display:none; margin:0; padding:0;} .gall-content img {} .gall-content.current {display:inherit;} .resimBuyuk {width:80%;} .resimBuyuk img {position:relative; width:100%; margin:0 auto;} .urunDetay {width:50%; display: flex; flex-direction: column; padding: var(--paddingContent); box-sizing: border-box;} .urunDetay h1 {color:var(--ikinci-color); font-size:3.2rem; line-height:1.05; margin-bottom:1rem; letter-spacing:0;} .urunDetay .listeDetay {color: var(--ikinci-color); font-size: 1.4rem; line-height: 1.2; margin-bottom:16px;} .urunDetay .aFiyatlarKutu {margin-bottom: 16px;} .urunDetay .aFiyatlarKutu p {margin-bottom: .5rem; line-height: 1.2; } .urunDetay .aMarka {color: #999;} .urunDetay .aFiyatKDVHaric {font-size:1rem; font-weight: 400; color: #999; } .urunDetay .aFiyat {font-size:1rem; font-weight: 700;} .urunDetay .aFiyatTL {font-size:2rem; font-weight: 700;} .urunDetay small {font-size:1rem; font-weight: 400; color: #999; } .urunDetay .aPiyasaFiyat {font-size:1rem; font-weight: 400; color: #999; text-decoration: line-through;} .urunDetay .aIndirimOran {} .urunDetay .onDetay {font-size:1.2rem; margin-bottom:16px;} .urunDetay .urunDetayGit {font-size:1.2rem; margin-bottom:16px; cursor:pointer; color: var(--besinci-color); transition: all .5s;} .urunDetay .urunDetayGit:hover {text-decoration: underline; color: var(--ikinci-color);} .urunDetay .aButonlarKutu {display: flex; flex-direction: column; align-items: flex-start; } .urunDetay .aSorunuz { border: none; border-bottom: 2px solid var(--ikinci-color); padding-bottom: 2px; font-family: var(--baslik-font); font-size: 1.8rem; line-height: 1.2; text-align: left; margin-bottom: 16px; transition: all .5s; border-radius: 0; width: auto; cursor: pointer; } .urunDetay .aSorunuz:hover { color: var(--besinci-color); margin-bottom: 16px; } .urunDetay .aSepeteEkle { border: none; border-bottom: 2px solid var(--ikinci-color); padding-bottom: 2px; font-family: var(--baslik-font); font-size: 1.8rem; line-height: 1.2; text-align: left; margin-bottom: 16px; transition: all .5s; border-radius: 0; width: auto; cursor: pointer; } .urunDetay .aSepeteEkle:hover { color: var(--besinci-color); margin-bottom: 16px; } .aAdetKap { border: 2px solid var(--ikinci-color); margin-right: 16px; display: flex; width: max-content; margin-bottom: 16px; } .aAdetKap form { display: flex; } .aMinus, .aPlus { font-size: 1.8rem; line-height: 1.4; padding: 0 10px; cursor: pointer; } .urunSepeteEkleAdet { font-size: 1.8rem; line-height: 1.4; width: 50px; text-align: center; border: none; background-color: transparent; outline: none; } .urunEtiketleri {position:absolute; width:60px; right:16px; top:8px; display: flex; flex-direction: column; z-index: 1;} .urunEtiketleri img {margin:0 0 5px 0; width:100%; background-color: var(--ucuncu-color);} .urunEtiketleri span {font-size:.8rem; line-height:1.2rem; width:100%; text-align:center; font-weight:400; margin:0 0 5px 0;} .yerli-uretim {display:none;} /* shopphp orijinal yerli görseli gizleniyor */ .aKullSecenekleri {background-color: #f9f9f9; margin-bottom:10px; padding:16px;} .tel-whatsapp {position:relative; margin-bottom:20px; width:100%;} .hizliButon {float:left; border:1px solid #eee; padding: .5rem 1rem; margin:0 5px 5px 0; border-radius: 3px; background-color: #fff; color:#222; font-size:1rem; font-weight:400;} .hizliWhatsapp {color: #198754;} .hizliTel {color: #333;} .urunTab {position:relative; width:100%;} /* Style the tab */ ul.tabss {margin:0 0 24px 0; padding:0; list-style:none; display:flex; justify-content: center;} ul.tabss li { position:relative; font-size:1.2rem; font-weight:400; padding:10px; margin:0 5px; cursor:pointer; border:2px solid var(--ikinci-color); color: var(--ikinci-color);} ul.tabss li.secili {background-color: var(--ikinci-color); color: var(--ucuncu-color);} .tab-icerik {width:100%; display:none; /* border:1px solid #ddd; */ padding:16px 0;} .tab-icerik.secili {display:block;} .tab-icerik p {text-align: justify;} .tab-icerik ul { list-style: circle inside; } .tab-icerik ol { list-style: decimal inside; } @media only screen and (min-width:900px) and (max-width:1367px) { .urunDetay h1 {font-size:2.8rem;} } @media only screen and (min-width:600px) and (max-width:899px) { .urunGaleri {width:100%; margin-bottom:32px;} .urunDetay {width:100%; margin-bottom:32px;} .urunDetay h1 {font-size:2.4rem;} .urunDetay .listeDetay {font-size: 1rem; margin-bottom:8px;} .urunDetay .onDetay {font-size:1rem; margin-bottom:8px;} .urunDetay .aFiyatlarKutu {margin-bottom: 8px;} } @media only screen and (min-width:0) and (max-width:599px) { .urunGaleri {width:100%; margin-bottom:32px;} .urunDetay {width:100%; margin-bottom:32px;} .urunDetay h1 {font-size:2rem;} .urunDetay .listeDetay {font-size: 1rem; margin-bottom:8px;} .urunDetay .onDetay {font-size:1rem; margin-bottom:8px;} .urunDetay .aFiyatlarKutu {margin-bottom: 8px;} } /* OWL ------------------------------------- */ /* owl Ürün */ .owlUrun { width: 100%; } .owlUrun .owl-nav { } .owlUrun .owl-nav button.owl-prev, .owlUrun .owl-nav button.owl-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; line-height: 40px; background: #fff; color: #333; font-size: 20px; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer; border-radius: 0; } .owlUrun .owl-nav button.owl-prev { left: -20px; } .owlUrun .owl-nav button.owl-next { right: -20px; } .owlUrun .owl-nav button:hover { background: #222; color: #fff; border-color: #222; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .owlUrun .urnBox { margin-bottom: 0; margin-top: 0; } .owlUrun .urnBox[class*="aCol-"] { width: 100%; margin-bottom: 0; margin-top: 0; } .modulSecmeUrunlerList { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; } @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { } @media only screen and (min-width:0) and (max-width:599px) { } /* slayt-ana sayfa */ #slaytim {position:relative; width:100%; max-width:1400px; padding:0; z-index:1; margin: 0 auto; margin-top:96px;} .slaytOge {position:relative; padding:0; margin:0; width:100%; display: flex; align-items: center; flex-wrap: wrap; z-index:1;} .slaytContent {position:relative; width:40%;} .slaytContent h1 {color:#215ba7; font-size: 2.2rem; font-weight: 400; margin-top:1.5rem; margin-bottom:1.5rem;} .slaytContent p {color:#222; font-size: 1.3rem; line-height:1.5; letter-spacing:0; font-weight: 400; margin-bottom:1.5rem;} .slaytContent .btnSlayt {font-weight: 400; padding: 0; font-size: 1.1rem; line-height: 1.5; border:none; border-radius: 0; cursor:pointer; margin-bottom:1.5rem; color:#215ba7; border-bottom: 1px solid #215ba7;} .slaytAra {width:10%;} .slaytImg {position:relative; width:50%; aspect-ratio: 16 / 9;} .slaytImg img { width: 100%; height: 100%; object-fit: cover;} .slaytImg video {width: 100%; aspect-ratio: 16 / 9;} .owl-item.active .OgeSol {animation:.5s .2s slideInLeft both;} .owl-item.active .OgeSag {animation:.5s .2s slideInRight both;} #slaytim .owl-dots {display:none;} #slaytim .owl-nav {} #slaytim .owl-nav button.owl-prev, #slaytim .owl-nav button.owl-next {position:absolute; top:50%; opacity:0; font-size:24px; line-height:24px; width:24px; height:24px; color:#999; transition:all .3s ease; cursor:pointer;} #slaytim .owl-nav button.owl-prev {left: -24px;} #slaytim .owl-nav button.owl-next {right: -24px;} #slaytim .owl-nav button.owl-prev:hover, #slaytim .owl-nav button.owl-next:hover {} #slaytim:hover .owl-nav button.owl-prev {opacity:1;} #slaytim:hover .owl-nav button.owl-next {opacity:1;} @media only screen and (min-width:900px) and (max-width:1367px) { .slaytContent h1 {font-size: 1.6rem;} .slaytContent p {font-size: 1rem;} } @media only screen and (min-width:600px) and (max-width:899px) { #slaytim {margin-top:48px;} .slaytContent {width:100%;} .slaytImg {position:relative; width:100%; aspect-ratio: 16 / 9;} .slaytAra {width:0;} .slaytContent h1 {font-size: 1.6rem;} .slaytContent p {font-size: 1rem;} } @media only screen and (min-width:0) and (max-width:599px) { #slaytim {margin-top:48px;} .slaytContent {width:100%;} .slaytImg {position:relative; width:100%; aspect-ratio: 16 / 9;} .slaytAra {width:0;} .slaytContent h1 {font-size: 1.6rem;} .slaytContent p {font-size: 1rem;} } /* slayt - Kategori banner*/ #slaytKategori {} #slaytKategori {position:relative; width:100%; margin-bottom:16px;} #slaytKategori img { /*height:500px;object-fit: cover; */ width:100%;} #slaytKategori .owl-dots {} #slaytKategori .owl-nav {display:none;} @media only screen and (min-width:900px) and (max-width:1367px) { #slaytKategori img {width:auto; height:120px; object-fit: cover;} } @media only screen and (min-width:600px) and (max-width:899px) { #slaytKategori img {width:auto; height:100px; object-fit: cover;} } @media only screen and (min-width:0) and (max-width:599px) { #slaytKategori img {width:auto; height:80px; object-fit: cover;} } /* GEZG�N **************************** */ .gezginKap {} .gezginKap .aContent {} ul.gezgin {position:relative; display:flex; justify-content: center; margin:0; padding:0; list-style:none; width:100%; } ul.gezgin li {color:#555; border-top:none; font-size:.9rem; line-height:1.5; margin:5px; padding:0;} ul.gezgin li a {color:#555;} ul.gezgin li i {color:#555; padding:0 9px 0 3px; } ul.gezgin li:hover a {color:#555;} @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { } @media only screen and (min-width:0) and (max-width:599px) { ul.gezgin {/*display:none;*/} } /* markalar **************************** */ .markalarKap {background-color: #fff;} /* liste görünümü */ #listMarkalar {display:flex; justify-content: center; align-items: center; flex-wrap: wrap;} #listMarkalar .markaKutu {position: relative; width: 148px; height: 148px; margin: 8px;padding: 0; display: flex; justify-content: center; align-items: center; overflow: hidden;} #listMarkalar .markaKutu img { max-width: 100%; max-height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:2;} #listMarkalar .markaKutu span {display: block; font-size:1rem; color:#333; z-index:2; padding:.5rem; background-color: #eee; border-radius:3px; z-index:1;} /* owl görünümü */ #owlMarkalar {margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #owlMarkalar .markaKutu { position: relative; width: 112px; height: 112px; padding: 8px 16px; margin: 0; display: flex; justify-content: center; align-items: center; overflow: hidden;} #owlMarkalar .markaKutu img { max-width: 100%; max-height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:2;} #owlMarkalar .markaKutu span {display: block; font-size:1rem; color:#333; z-index:2; padding:.5rem; background-color: #eee; border-radius:3px; z-index:1;} #owlMarkalar .owl-dots {display:none;} #owlMarkalar .owl-nav {} #owlMarkalar .owl-nav button.owl-prev, #owlMarkalar .owl-nav button.owl-next {position:absolute; top:50%; margin-top:-1rem; font-size:1.2rem; width:2rem; height:2rem; line-height:2rem; color:#999; cursor:pointer; } #owlMarkalar .owl-nav button.owl-prev {left:-.5rem;} #owlMarkalar .owl-nav button.owl-next {right:-.5rem;} #owlMarkalar .owl-nav button.owl-prev:hover, #owlMarkalar .owl-nav button.owl-next:hover {color:#000;} @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { #listMarkalar .markaKutu {width: 96px; height: 96px;} #listMarkalar .markaKutu span {font-size:.8rem;} } @media only screen and (min-width:0) and (max-width:599px) { #listMarkalar .markaKutu {width: 96px; height: 96px;} #listMarkalar .markaKutu span {font-size:.7rem;} } /* BLOG/MAKALE (MakaleListShow-MakaleGoster) ------------------------------------- */ /* MakaleListShow */ .makaleKutu {margin-top:12px; margin-bottom:12px;} .makaleKutu .aContent {position:relative; display: flex; flex-direction: column;} .makaleKutu .img-y {margin-bottom:24px;} .makaleKutu h2 {} .makaleKutu p {text-align: justify;} /* MakaleGoster */ .makaleGoster {width:100%;} .makaleGoster .aContent {position:relative; display: flex; flex-direction: column;} .makaleGoster .img-y {width:500px; max-width:100%; margin-bottom:24px;} .makaleGoster p {text-align: justify;} @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { } @media only screen and (min-width:0) and (max-width:599px) { } /* HABER (HaberListShow-HaberGoster) ------------------------------------- */ /* HaberListShow .sp-haber-ic-list shopphp hbar listelemede otomatik bu classı kullanıyor. temaya göre güncelledik. */ ul.sp-haber-ic-list {display:flex; flex-wrap: wrap; margin:0; padding:0;} .sp-haber-ic-list time {float: none;} /* HaberListShow */ .haberKutu {margin-top:12px; margin-bottom:12px;} .haberKutu .aContent {position:relative; display: flex; flex-direction: column;} .haberKutu .img-y {margin-bottom:24px;} .haberKutu h2 {} /* HaberGoster */ .haberGoster {width:100%;} .haberGoster .aContent {position:relative; display: flex; flex-direction: column;} .haberGoster .img-y {width:500px; max-width:100%; margin-bottom:24px;} .haberGoster .p {text-align: justify;} @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { } @media only screen and (min-width:0) and (max-width:599px) { } /* Galeri - flex ----------------------------*/ .flexGalKap {display:flex; flex-wrap: wrap; justify-content: center;} .flexGalOge {width:25%; margin-bottom:16px;} .flexGalOge .aContent{display:flex; flex-direction: column; align-items: center;} .flexGalOge .flexGalOgeTit {font-size:1rem; font-weight:400; padding:10px 0;} .flexGalOge .flexGalOgeDesc {font-size:.9rem;} @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { .flexGalOge {width:50%;} } @media only screen and (min-width:0) and (max-width:599px) { .flexGalOge {width:80%;} } /* FOOTER ------------------------------------- */ .footerKap {background-color: var(--ikinci-color);} .footer {} .footer .aContent {padding:0 16px;} .footer h3 { position: relative; color: var(--birinci-color); margin-bottom: 64px; font-size: 2.4rem; line-height: 1.2; } .footer h3 a { color: #000; } .footer h4 { } .footer h4 a { } .aBultenKayit { width: 100%; max-width: 600px; } .aBultenKayit form { display: flex; align-items: center; border-bottom: 2px solid var(--birinci-color); padding-bottom: 5px; margin-bottom: 20px; background: none; } .aBultenInput { flex: 1; border: none !important; background: none !important; outline: none; padding: 0 0.5rem; font-size: 1.8rem; line-height: 3rem; color: var(--birinci-color); font-weight: 400; } .aBultenInput::placeholder { color: var(--birinci-color); font-weight: normal; font-style: normal !important; font-family: var(--metin-font); } .aBultenKayit button { border: none !important; background: none !important; color: var(--birinci-color); font-family: var(--baslik-font); cursor: pointer; white-space: nowrap; padding: 0 0.5rem; display: flex; align-items: center; } .aBultenKayit button i { font-size: 1.4rem; margin-left: 1rem; } .aBultenKayit button span {font-size: 1.8rem; line-height: 3rem;} .aBultenKayit button:hover { opacity: 0.7; } .aBultenKayit p { text-align: left; font-size: 0.8rem; color: var(--birinci-color); } .aBultenKayit p a { color: var(--birinci-color); } .aBultenKayit p a:hover { text-decoration: underline; } .footerCoffeeArc {width:100%; margin-top:72px;} .footerCoffeeArc img { width: 100%;} .footerFlex {width:100%; display: flex; flex-direction: column; margin-bottom:24px;} .footerMenuKolon {} ul.footerList { position: relative; margin: 0; padding: 0; list-style: none; font-family: var(--baslik-font); display: flex; flex-direction: column; align-items: flex-end; text-align: right; } ul.footerList li { position: relative; margin: 0; padding: 0; list-style: none; font-size: 1.8rem; line-height: 2; width: 100%; } ul.footerList li a { margin: 0; padding: 0; color: var(--birinci-color); text-decoration: none; display: block; } ul.footerList li a:hover { text-decoration: underline; } ul.footerList li li a { color: var(--birinci-color); } .footerAlt { background-color: var(--ikinci-color);} .footerAlt .aContent {} .footerAltFlex { width: 100%; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--birinci-color); padding:24px 0;} ul.footerList2 { display: flex; flex-wrap: wrap; order: 1; padding: 0; margin: 0; list-style: none; } ul.footerList2 li { position: relative; margin: 0; padding: 0 .8rem 0 0; list-style: none; font-size: 0.8rem; line-height: 2; } ul.footerList2 li a { margin: 0; padding: 0; color: var(--birinci-color); text-decoration: none; } ul.footerList2 li a:hover { text-decoration: underline; } ul.footerList2 li li { display: none; } .footerAlt p { margin: 0; text-align: right; order: 2; color: var(--birinci-color); font-size: .8rem;} .footerAlt p a { color: var(--birinci-color); } @media only screen and (min-width:900px) and (max-width:1367px) { .footer h3 { position: relative; color: var(--birinci-color); margin-bottom: 56px; font-size: 2.2rem;} ul.footerList li {font-size: 1.7rem;} .aBultenInput {font-size: 1.6rem; line-height: 2.6rem;} .aBultenKayit button i { font-size: 1.3rem; margin-left: 0; } .aBultenKayit button span {display:none;} .footerCoffeeArc {margin-top:56px;} } @media only screen and (min-width:600px) and (max-width:899px) { .footer .aContent {margin-bottom:24px;} .footer h3 { position: relative; color: var(--birinci-color); margin-bottom: 40px; font-size: 2rem;} .footerMenuKolon.aCol-3-12 {width:50%;} ul.footerList {text-align: left;} ul.footerList li {font-size: 1.6rem;} .aBultenInput {font-size: 1.5rem; line-height: 2.3rem;} .aBultenKayit button i { font-size: 1.2rem; margin-left: 0; } .aBultenKayit button span {display:none;} .footerCoffeeArc {margin-top:40px;} .footerAltFlex {flex-direction: column; justify-content:flex-start; align-items: center;} } @media only screen and (min-width:0) and (max-width:599px) { .footer .aContent {margin-bottom:24px;} .footer h3 {position: relative; color: var(--birinci-color); margin-bottom: 24px; font-size: 1.8rem;} .footerMenuKolon.aCol-3-12 {width:50%;} ul.footerList {text-align: left;} ul.footerList li {font-size: 1.5rem;} .aBultenInput {font-size: 1.4rem; line-height: 2rem;} .aBultenKayit button i { font-size: 1.1rem; margin-left: 0; } .aBultenKayit button span {display:none;} .footerCoffeeArc {margin-top:24px;} .footerAltFlex {flex-direction: column; justify-content:flex-start; align-items: center;} } /* basicKategori ------------------------------------- */ /* Ana Menü Çerçevesi */ .basicKategori, .basicKategori ul { list-style: none; padding: 0; margin: 0; width: 250px; background: #fff; border: 1px solid #eee; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .basicKategori li { position: relative; border-bottom: 1px solid #f9f9f9; } .basicKategori li a { display: block; padding: 12px 15px; text-decoration: none; color: #444; font-size: 14px; transition: all 0.3s ease; } .basicKategori li.selected > a { text-decoration: underline; color: #000; } .basicKategori li a:hover { color: #007bff; } .basicKategori li a.aktif { font-weight: bold; } .basicKategori li ul { position: absolute; left: 100%; top: 0; display: none; z-index: 999; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); } .basicKategori li:hover > ul { display: block; } .basicKategori li a.arrow::after { content: '▶'; font-size: 10px; float: right; margin-top: 3px; color: #ccc; } .basicKategori li:last-child { border-bottom: none; } /* SHOPPHP ------------------------------------- */ .PageBody { } /* FORM */ .sf-form-container { background: transparent !important; } .sf-text-label { display: none !important; } .sf-form-input, .sf-form-select { background: transparent !important; color: var(--ikinci-color) !important; font-size: 1.2rem !important; border: none !important; border-bottom: 1px solid var(--ikinci-color) !important; border-radius: 0 !important; padding: 10px 5px !important; margin: 5px 0 !important; } .sf-form-textarea { background: transparent !important; color: var(--ikinci-color) !important; font-size: 1.2rem !important; border: 1px solid var(--ikinci-color) !important; border-radius: 0 !important; padding: 10px 5px !important; margin: 5px 0 !important; } .sf-button { padding: 0 !important; padding-top: 0 !important; padding-bottom: 2px !important; color: var(--ikinci-color); font-size: 1.8rem !important; border: none !important; border-bottom: 2px solid var(--ikinci-color) !important; background-color: transparent !important; font-weight: normal !important; line-height: 1.2 !important; } .sf-form-input::placeholder, .sf-form-textarea::placeholder { color: var(--ikinci-color) !important; font-size: 1.2rem !important; font-weight: 500 !important; } form.formv3 .sf-form-container ul li { width: 100% !important; margin-right: 0 !important; } form.formv3 .sf-form-item-fullwidth .sf-form-textarea { width: 80% !important; } /* kategori */ .filterCheck {text-transform: none;} /* filterlerdeki küçük harfe dönüştürmeyi kaldırmak için */ /* sepet */ .basket-button .green-button {border:1px solid #215ba7 !important; background:#215ba7 !important;} .basket-button .green-button:hover {border:1px solid #000 !important; background:#000 !important;} .basket-right ul li.tutar span {color:#215ba7 !important;} .basket-title div span {color: #215ba7 !important;} .cat-slider-fiyat {color: #215ba7 !important;} .hizli-button-siparis {background-color:#215ba7;} /* login */ #divUyeGirisForm button.userLoginBtn {background-color: #215ba7 !important;} .register-tab label.active {background-color: #215ba7 !important;} /* ürün detay */ table.urunSecimTable {border:none;} table.urunSecimTable th.UrunSecenekleri {display:none;} table.urunSecimTable tr {border:none;} table.urunSecimTable div.UrunSecenekleriHeader {border:none;} table.urunSecimTable ul.urunSecim {border:none; display:flex; flex-wrap: wrap;} table.urunSecimTable ul.urunSecim li {border: 2px solid var(--ikinci-color) !important; background-color: transparent !important; color: var(--ikinci-color); border-radius: 0 !important; font-size:1.2rem;} table.urunSecimTable ul.urunSecim li.urun-var-resim { width: unset; min-height: unset;} table.urunSecimTable ul.urunSecim li.selected { background-color: var(--ikinci-color) !important; color: #fff;} table.urunSecimTable ul.urunSecim li.urun-var-resim img {display:none;} table.urunSecimTable td {border:none; padding:3px 3px 3px 0px;} table.urunSecimTable td select{border:none; padding:3px; border-radius:3px; } .taksitGosterim {width: 32.3%; margin-right:1%; margin-bottom:10px;} .taksit-container {width: 100%;} .genel_taksitDiv {font-weight:400; font-size:.9rem; } .powered-by {display:none;} @media only screen and (min-width:900px) and (max-width:1367px) { } @media only screen and (min-width:600px) and (max-width:899px) { table.urunSecimTable ul.urunSecim li {font-size:1rem;} .taksitGosterim {width: 49%; margin-right:1%;} } @media only screen and (min-width:0) and (max-width:599px) { table.urunSecimTable ul.urunSecim li {font-size:1rem;} .taksitGosterim {width: 100%; margin-right:0;} } #tel-birakin {display:none;} /* BACKGROUND - COLOR ------------------------------------- */ .bg-blue {background-color: #4096ca;} .bg-red {background-color: #d62323;} .bg-orange {background-color: #fd4b37;} .bg-yellow {background-color: #ffc107;} .bg-green {background-color: #0c7242;} .bg-white {background-color: #fff;} .bg-gray {background-color: #6c757d;} .bg-gray-dark {background-color: #343a40;} .bg-success {background-color: #198754;} .bg-info {background-color: #0dcaf0;} .bg-warning {background-color: #ffc107;} .bg-danger {background-color: #dc3545;} .bg-light {background-color: #eee;} .bg-dark {background-color: #212529;} .bg-black {background-color: #000;} .bg-brown {background-color: #974a02;} .bg-primary {background-color: #b1947f;} .bg-secondary {background-color: #191516;} .bg-third {background-color: #d6c7bd;} .color-blue {color: #4096ca;} .color-red {color: #d62323;} .color-orange {color: #fd4b37;} .color-yellow {color: #ffc107;} .color-green {color: #198754;} .color-white {color: #fff;} .color-gray {color: #6c757d;} .color-gray-dark {color: #343a40;} .color-success {color: #198754;} .color-info {color: #0dcaf0;} .color-warning {color: #ffc107;} .color-danger {color: #dc3545;} .color-light {color: #eee;} .color-dark {color: #212529;} .color-black {color:#000;} .color-brown {color: #974a02;} .color-primary {color: #b1947f;} .color-secondary {color: #191516;} .color-third {color: #d6c7bd;} /* 3.4 3.2 3 2.4 1 1.8 72 * 2.8 2.8 2.6 2.2 1 1.7 56 152 2.4 2.4 2.3 2 0.8 1.6 40 140 2 2 2 1.8 0.8 1.5 24 128 */