/* Stockline Common Elements v1.0 */
/* Masonry Grid Stilleri */
.stockline-masonry-grid { column-count: 4; column-gap: 15px; width: 100%; margin: 0 auto; }
.stockline-masonry-item { margin: 0 0 15px 0; display: inline-block; width: 100%; overflow: hidden; break-inside: avoid; border-radius: 6px; background-color: #f9f9f9; }
.stockline-masonry-thumb { border-radius: 6px !important; display: block; line-height: 0; }
.stockline-masonry-thumb img { border-radius: 6px !important; transition: transform .3s ease-out; width: 100%; height: auto; display: block; }
@media (max-width:1400px) { .stockline-masonry-grid { column-count: 3; } }
@media (max-width:992px) { .stockline-masonry-grid { column-count: 2; } }
@media (max-width:576px) { .stockline-masonry-grid { column-count: 1; } }

/* Flexbox Grid Stilleri (Arama için) */
.stockline-flex-grid { display: flex; flex-wrap: wrap; gap: 15px; width: 100%; margin: 0 auto 40px auto; }
.stockline-flex-item { flex: 1 1 calc(25% - 12px); box-sizing: border-box; margin-bottom: 0; border-radius: 6px; overflow: hidden; background-color: #f0f0f0; }
.stockline-flex-thumb { display: block; line-height: 0; border-radius: 6px; }
.stockline-flex-thumb img { width: 100%; height: auto; display: block; border-radius: 6px; transition: transform .25s ease; }
.stockline-flex-item:hover .stockline-flex-thumb img { transform: scale(1.03); }
.stockline-flex-placeholder { width: 100%; padding-bottom: 66.66%; background-color: #e9ecef; border-radius: 6px; }
@media (max-width: 1200px) { .stockline-flex-item { flex-basis: calc(33.33% - 10px); } }
@media (max-width: 900px) { .stockline-flex-item { flex-basis: calc(50% - 8px); } }
@media (max-width: 576px) { .stockline-flex-item { flex-basis: 100%; } }

/* Genel Buton Stilleri */
button.download-button, button.load-more-button { cursor: pointer; transition: all 0.2s ease; border: none; text-decoration: none; display: inline-block; text-align: center; line-height: 1.4; }
button:disabled { cursor: not-allowed; opacity: 0.7; }

/* Stockline Search Box Styles (Shortcode v3) */
/* === Updated Slim Search Box Styles (Shortcode v3) === */
.si-search-form-v3 {
    width: 100%;        /* Take full container width */
    max-width: 100%;    /* Override any potential theme max-width */
    display: block;
    margin: 25px 0;     /* Adjust vertical margin as needed */
    box-sizing: border-box;
}

.si-search-input-wrapper-v3 {
    position: relative;
    width: 100%;
}

.si-search-form-v3 input[type="search"], /* Use type="search" for semantics */
.si-search-form-v3 input[type="text"] {
    width: 100%;
    padding: 8px 40px 8px 16px; /* Slimmer Padding: top/bottom 8px, left 16px, right 40px (for icon) */
    font-size: 0.95em;           /* Slightly smaller font */
    line-height: 1.5;           /* Adjust line height if needed */
    height: 40px;               /* Fixed height for slim look */
    border: 1px solid #ccc;     /* Lighter border */
    border-radius: 25px;         /* Slightly rounded corners */
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;           /* Remove default browser styling */
    background-color: #ffffff;
    color: #333;
}

.si-search-form-v3 input[type="search"]::placeholder,
.si-search-form-v3 input[type="text"]::placeholder {
    color: #999;
    opacity: 1;
}

.si-search-form-v3 input[type="search"]:focus,
.si-search-form-v3 input[type="text"]:focus {
    border-color: #888;
    box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.15); /* Subtle focus */
    outline: none;
}

/* Search Icon Styling */
.si-search-input-wrapper-v3 .si-search-icon-v3 {
    position: absolute;
    right: 14px;        /* Position from right */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;       /* Icon color */
    pointer-events: none; /* Icon is not clickable */
    font-size: 1em;    /* Adjust icon size if needed */
    line-height: 1;
    z-index: 2;
}

/* Hide the actual submit button if using JS */
.si-search-form-v3 button.search-submit {
    display: none;
}

/* --- End Search Box Styles --- */

/* Masonry Layout for Search Results */

.stockline-masonry-grid {
  column-count: 5;
  column-gap: 22px;
  max-width: 1600px;
  margin: 40px auto;
  padding: 0 16px;
}

@media (max-width: 1400px) {
  .stockline-masonry-grid { column-count: 4; }
}
@media (max-width: 1024px) {
  .stockline-masonry-grid { column-count: 3; }
}
@media (max-width: 768px) {
  .stockline-masonry-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .stockline-masonry-grid { column-count: 1; }
}

.stockline-masonry-item {
  break-inside: avoid;
  margin-bottom: 22px;
  display: block;
  width: 100%;
}

.stockline-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


/* Masonry Layout for Search Results - Top Aligned with Links */

.stockline-masonry-grid {
  column-count: 5;
  column-gap: 22px;
  max-width: 1600px;
  margin: 40px auto;
  padding: 0 16px;
}

@media (max-width: 1400px) {
  .stockline-masonry-grid { column-count: 4; }
}
@media (max-width: 1024px) {
  .stockline-masonry-grid { column-count: 3; }
}
@media (max-width: 768px) {
  .stockline-masonry-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .stockline-masonry-grid { column-count: 1; }
}

.stockline-masonry-item {
  break-inside: avoid;
  margin-bottom: 22px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.stockline-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}