/* EsraÖğretmenim V25.9.6: align search with login/account actions.
   Social icons remain ABOVE the account actions on the far right.
   This is intentionally loaded last to override the earlier experimental header rules. */
@media (min-width: 931px) {
  header.top:has(> .site-social-top) {
    display: grid !important;
    grid-template-columns: minmax(168px, 240px) minmax(150px, 1fr) max-content !important;
    grid-template-rows: 30px minmax(46px, auto) !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    justify-content: stretch !important;
    min-height: 0 !important;
    padding: 8px 18px 11px !important;
  }
  header.top:has(> .site-social-top) > .brand {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  header.top:has(> .site-social-top) > .brand.brand-custom > .site-custom-logo {
    max-width: 100%;
    max-height: 82px;
    object-fit: contain;
  }
  header.top:has(> .site-social-top) > .search {
    grid-column: 2 !important;
    grid-row: 2 !important;
    order: 0 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  header.top:has(> .site-social-top) > .account {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    width: max-content !important;
    margin: 0 !important;
    gap: 7px !important;
  }
  header.top:has(> .site-social-top) > .site-social-top {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    gap: 5px !important;
    width: max-content !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  header.top:has(> .site-social-top) > .site-social-top a {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  header.top:has(> .site-social-top) > .site-social-top img {
    width: 23px;
    height: 23px;
  }
}
/* Mid-size/tablet: keep controls alongside logo; put search on a generous second row. */
@media (min-width: 731px) and (max-width: 930px) {
  header.top:has(> .site-social-top) {
    display: grid !important;
    grid-template-columns: minmax(165px, 1fr) max-content !important;
    grid-template-rows: 30px minmax(46px, auto) auto !important;
    gap: 3px 12px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 8px 15px 11px !important;
  }
  header.top:has(> .site-social-top) > .brand {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  header.top:has(> .site-social-top) > .site-social-top {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    width: max-content !important;
    height: 30px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
    background: transparent !important;
  }
  header.top:has(> .site-social-top) > .account {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    margin: 0 !important;
    gap: 7px !important;
  }
  header.top:has(> .site-social-top) > .search {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 5px 0 0 !important;
  }
  header.top:has(> .site-social-top) > .site-social-top a {width:30px;height:30px}
  header.top:has(> .site-social-top) > .site-social-top img {width:23px;height:23px}
  header.top:has(> .site-social-top) > .account .hello {display:none}
}
/* Small phones retain the established mobile flow and footer social icons. */