/* EditorJS Frontent Component UI tasarımları */

.editorjs-columns {display: flex;flex-wrap: wrap; gap: 30px;margin: 30px 0;}
.editorjs-columns .column {flex: 1 1 250px ;}

.editorjs-accordion .accordion-item {border: unset;border-radius: 5px;border: 1px solid gray;}
.editorjs-accordion .accordion-item:not(:last-child) {margin-bottom: 10px;}
.editorjs-accordion .accordion-item .accordion-button:not(.collapsed) {color: var(--primary-color);}
.editorjs-accordion .accordion-item .accordion-button {font-size: 20px;font-weight: 600;border: unset;box-shadow: unset;background: unset;padding:10px 20px;}
.editorjs-accordion .accordion-item .accordion-body {padding: 10px 20px;border-top: 1px solid gray;}

.editorjs-grid {display: grid;gap: 30px; grid-template-columns: repeat(2, 1fr);}
.editorjs-grid.grid-1 {grid-template-columns: repeat(1, 1fr);}
.editorjs-grid.grid-2 {grid-template-columns: repeat(2, 1fr);}
.editorjs-grid.grid-3 {grid-template-columns: repeat(3, 1fr);}
.editorjs-grid.grid-4 {grid-template-columns: repeat(4, 1fr);}
.editorjs-grid.grid-5 {grid-template-columns: repeat(5, 1fr);}
.editorjs-grid.grid-6 {grid-template-columns: repeat(6, 1fr);}


.editorjs-grid .item a{display: block;background: #fff;border-radius: 10px; box-shadow: 0 0 20px -18px var(--dark-color);transition: 0.3s ease all;}
.editorjs-grid .item .image{position: relative;z-index: 1;overflow: hidden;border-radius: 10px;}
.editorjs-grid .item .image::before {content: "";z-index: 0;position: absolute;background: var(--dark-color);opacity: 0;transition: 0.3s ease all;inset: 0;}
.editorjs-grid .item .image::after {content: "\f138"; position: absolute;color: #fff;font-size: 24px; z-index: 1; right: 50%;opacity: 0; bottom: 20px; display: inline-block;font-family: bootstrap-icons !important;font-style: normal;font-weight: normal !important;font-variant: normal;text-transform: none;line-height: 1;vertical-align: -.125em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;transition:0.1s ease;}
.editorjs-grid .item .text{display: block;padding: 20px 15px;}
.editorjs-grid .item .title{font-size: 18px;font-weight: 600;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.editorjs-grid .item:hover a{color: var(--primary-color); box-shadow: 0 10px 20px -18px var(--dark-color);}
.editorjs-grid .item:hover .image::before {opacity: 0.5;}
.editorjs-grid .item:hover .image::after {opacity: 1;right: 20px;transition-delay: 0.2s;transition-duration: 0.3s;}


.editor-details {margin: 50px 0;}
.editor-details .editor-item {margin: 30px 0;}
.editor-item .editor-header {display: block; color: var(--primary-color); font-size: 24px;margin-bottom: 15px;}

/* ul ve ol için list style ekleyelim */
ul.editorjs-list {list-style: disc;}
ol.editorjs-list {list-style: decimal;}